/* ==========================================================================
   Terminal texture.

   Applied to the chrome — prompts, labels, section markers, the monitor —
   and deliberately NOT to the prose. Long-form narrative and blog posts stay
   in Source Serif 4 at a comfortable measure, because monospaced body text at
   reading length is slower to read and would undercut the one thing the site
   needs to do well.

   The terminal reads as an engineer's site. The prose keeps it readable to a
   non-technical screener. Both audiences are real.
   ========================================================================== */

/* Prompt lines ------------------------------------------------------------- */

.eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5ch;
}

.eyebrow::before {
	content: "erkan@e.isik.one:~$";
	color: var(--signal);
	text-transform: none;
	letter-spacing: 0;
	white-space: nowrap;
}

/* Section titles as shell invocations -------------------------------------- */

.section__title {
	display: flex;
	align-items: baseline;
	gap: 0.6ch;
}

.section__title::before {
	content: "$";
	font-family: var(--font-data);
	font-size: 0.55em;
	font-weight: 400;
	color: var(--signal);
	letter-spacing: 0;
	transform: translateY(-0.15em);
}

/* Block labels as flags ---------------------------------------------------- */

.block__label::before {
	content: "--";
	margin-inline-end: 0.5ch;
	color: var(--rule);
}

/* Cursor ------------------------------------------------------------------- */

.hero__lead::after {
	content: "";
	display: inline-block;
	width: 0.55ch;
	height: 0.95em;
	margin-inline-start: 0.25ch;
	background: var(--signal);
	transform: translateY(0.08em);
	animation: e-isik-blink 1.1s steps(1, end) infinite;
}

@keyframes e-isik-blink {
	0%, 45%   { opacity: 1; }
	50%, 95%  { opacity: 0; }
	100%      { opacity: 1; }
}

/* A cursor that never stops blinking is exactly the kind of motion
   prefers-reduced-motion exists for. Solid block instead. */
@media (prefers-reduced-motion: reduce) {
	.hero__lead::after { animation: none; opacity: 1; }
}

/* Inventory and principles as key/value output ----------------------------- */

.inventory dt::before,
.principles dt::before {
	content: "› ";
	color: var(--signal);
}

.inventory dd { font-family: var(--font-data); font-size: 0.8125rem; }

/* Bullet lines as output rows ---------------------------------------------- */

.block__lines li::before {
	content: "";
	background: var(--signal);
	opacity: 0.55;
}

/* Link affordance ---------------------------------------------------------- */

.hero__links a,
.colophon__contact a {
	text-decoration: none;
	border-bottom: 1px solid var(--rule);
	padding-block-end: 2px;
	transition: border-color var(--motion-fast) var(--ease);
}

.hero__links a:hover,
.colophon__contact a:hover { border-bottom-color: var(--signal); }

/* Monitor readout ---------------------------------------------------------- */

.rail__monitor-value { font-variant-numeric: tabular-nums; }

/* Selection ---------------------------------------------------------------- */

::selection {
	background: color-mix(in srgb, var(--signal) 26%, transparent);
	color: var(--ink);
}

/* Narrow ------------------------------------------------------------------- */

@media (max-width: 47.99em) {
	.eyebrow::before { content: "~$"; }
}