/* ── Component vocabulary — siarheimardovich.com v2 ── */
/* NEW in 0814_3. Defect D5: the 0815 homepage carried 25 inline style= attributes because
   the shell had no class for a lede, a muted note, a stat, or a card. Presentation belongs
   here. A page that needs a style the vocabulary lacks should extend this file, never inline.
   Materials referenced by the design direction: terminal printouts, ledger rules, grid paper,
   instrument panels. Emphasis is carried by weight and rule, not colour. */

/* ── Sections ── */
.section { padding-block: var(--space-64); }
.section + .section { border-top: 1px solid var(--hairline); }
.section-tight { padding-block: var(--space-40); }

.section-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-16);
  margin-bottom: var(--space-24);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--ink-3);
  font-weight: var(--fw-medium);
}

.rule { border: 0; border-top: 1px solid var(--hairline); margin-block: var(--space-32); }

/* ── Text roles ── */
.lede {
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  color: var(--ink);
  max-width: var(--measure);
}
.lede-lg {
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  max-width: var(--measure);
}
.prose { max-width: var(--measure); }
.prose p + p { margin-top: var(--space-16); }
.muted { color: var(--ink-2); }
.quiet { color: var(--ink-3); }
.mono { font-family: var(--font-mono); }
.small { font-size: var(--text-sm); }
.label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--ink-3);
}

/* ── Hero ── */
.hero { padding-block: var(--space-80) var(--space-48); }
.hero h1 { max-width: 20ch; }
.hero .lede { margin-top: var(--space-24); }
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-16);
  margin-top: var(--space-24);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-3);
}
.hero-meta span::after { content: ' /'; color: var(--hairline-2); }
.hero-meta span:last-child::after { content: ''; }

/* ── Thesis block: a ledger rule down the left, not a coloured panel ── */
.thesis {
  border-left: 2px solid var(--ink);
  padding-left: var(--space-24);
  max-width: var(--measure);
}
.thesis p { font-size: var(--text-lg); line-height: var(--lh-snug); }

/* ── Cards (case links, principle cards) ── */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-top: var(--space-16);
  border-top: 1px solid var(--ink);
}
.card-quiet { border-top-color: var(--hairline); }
.card h3 { font-size: var(--text-lg); }
.card p { font-size: var(--text-sm); color: var(--ink-2); }
.card .card-index {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-3);
}
.card-link { display: block; }
.card-link:hover h3 { text-decoration: underline; text-underline-offset: 3px; }

/* ── Card thumbnail ──
   One ratio for every prototype card, so the work grid reads as a set rather than as
   9 differently shaped pictures. The crop is anchored to the top because the header
   band of a workspace is what identifies it; the middle of a dense tool is anonymous. */
.card-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  margin-bottom: var(--space-12);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--paper-2);
  transition: border-color 160ms ease;
}
.card-link:hover .card-thumb { border-color: var(--ink-3); }

/* The thumbnail sits above the ledger rule's content, so the rule stays the card's
   top edge and the picture is the first thing under it. */
.card-media { margin-top: var(--space-4); }

/* ── Work list (compact index of secondary pages) ── */
.worklist { list-style: none; padding: 0; }
.worklist li {
  border-top: 1px solid var(--hairline);
  padding-block: var(--space-16);
  display: grid;
  gap: var(--space-4);
}
.worklist li:last-child { border-bottom: 1px solid var(--hairline); }
.worklist .work-title { font-weight: var(--fw-semibold); }
.worklist .work-note { font-size: var(--text-sm); color: var(--ink-2); }
@media (min-width: 640px) {
  .worklist li { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--gutter); align-items: baseline; }
}

/* ── Stats ── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-24) var(--gutter);
}
@media (min-width: 900px) { .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { border-top: 1px solid var(--hairline); padding-top: var(--space-12); }
.stat-value {
  display: block;
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  font-variant-numeric: tabular-nums;
}
.stat-label { display: block; font-size: var(--text-sm); color: var(--ink-2); margin-top: var(--space-4); }

/* ── Callout: hairline box, no fill, no colour coding ── */
.callout {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-24);
  background: var(--paper-2);
}
.callout .label { margin-bottom: var(--space-8); }
.callout p { padding-left: var(--space-48); }

/* ── Stack note: the craft/provenance line, terminal-printout flavour ── */
.stack-note {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-16) var(--space-20);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  color: var(--ink-2);
}
.stack-note .label { margin-bottom: var(--space-8); }
.stack-note ul { list-style: none; padding: 0; }
.stack-note li { font-size: var(--text-sm); }
.stack-note li + li { margin-top: var(--space-8); }
.stack-note li::before { content: '· '; color: var(--hairline-2); }

/* ── Figures ── */
.figure { margin-block: var(--space-32); }
.figure-frame {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--paper-2);
}
.figure-frame img, .figure-frame iframe { display: block; width: 100%; border: 0; }
.figure-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-12);
  margin-bottom: var(--space-8);
}
.figure-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--ink-2);
  white-space: nowrap;
}
.figure-cap {
  margin-top: var(--space-8);
  font-size: var(--text-sm);
  color: var(--ink-2);
  max-width: var(--measure);
}

/* ── Numbered stage replay (order carries information) ── */
.stage-list { list-style: none; padding: 0; counter-reset: stage; }
.stage-list > li {
  counter-increment: stage;
  border-top: 1px solid var(--hairline);
  padding-block: var(--space-20);
  display: grid;
  gap: var(--space-8);
  margin-top: 0;
}
.stage-list > li:last-child { border-bottom: 1px solid var(--hairline); }
.stage-list > li::before {
  content: counter(stage, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-3);
}
@media (min-width: 640px) {
  .stage-list > li { grid-template-columns: 3rem minmax(0, 1fr); column-gap: var(--gutter); }
  .stage-list > li::before { grid-row: span 3; padding-top: 0.35em; }
}
.stage-title { font-weight: var(--fw-semibold); }
.stage-body { color: var(--ink-2); max-width: var(--measure); }
.stage-fields {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-3);
}

/* ── Numbered question list ── */
.q-list { list-style: none; padding: 0; counter-reset: q; }
.q-list > li {
  counter-increment: q;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: var(--space-12);
  padding-block: var(--space-12);
  border-top: 1px solid var(--hairline);
  margin-top: 0;
}
.q-list > li:last-child { border-bottom: 1px solid var(--hairline); }
.q-list > li::before {
  content: 'Q' counter(q);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--ink-2);
  padding-top: 0.25em;
}
.q-loop {
  margin-top: var(--space-12);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-3);
}

/* ── Key/value list (TL;DR, role, constraints) ── */
.kv { display: grid; gap: 0; }
.kv > div {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-12);
  border-top: 1px solid var(--hairline);
}
.kv > div:last-child { border-bottom: 1px solid var(--hairline); }
@media (min-width: 640px) {
  .kv > div { grid-template-columns: 10rem minmax(0, 1fr); column-gap: var(--gutter); }
}
.kv dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--ink-3);
  padding-top: 0.2em;
}
.kv dd { margin: 0; max-width: var(--measure); }

/* ── Tags ── */
.tag-row { display: flex; flex-wrap: wrap; gap: var(--space-8); list-style: none; padding: 0; }
.tag-row li { margin-top: 0; }
.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-8);
}

/* ── Case header ── */
.case-header { padding-block: var(--space-64) var(--space-32); }
.breadcrumb { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-3); margin-bottom: var(--space-16); }
.breadcrumb a { color: var(--ink-2); }
.case-header h1 { max-width: 22ch; }
.case-header .lede { margin-top: var(--space-20); }

/* ── Next/prev case navigation ── */
.case-nav {
  display: grid;
  gap: var(--space-16);
  margin-top: var(--space-64);
  padding-top: var(--space-24);
  border-top: 1px solid var(--ink);
}
@media (min-width: 640px) { .case-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.case-nav .label { margin-bottom: var(--space-4); }
.case-nav .case-nav-next { text-align: left; }
@media (min-width: 640px) { .case-nav .case-nav-next { text-align: right; } }

/* ── Resume-specific ── */
.role { padding-block: var(--space-24); border-top: 1px solid var(--hairline); }
.role-head { display: grid; gap: var(--space-4); margin-bottom: var(--space-12); }
@media (min-width: 640px) {
  .role-head { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--gutter); }
}
.role-title { font-weight: var(--fw-semibold); font-size: var(--text-lg); }
.role-org { color: var(--ink-2); }
.role-dates { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-3); white-space: nowrap; }
.role ul { padding-left: 1.1em; max-width: var(--measure); }
.role li { font-size: var(--text-sm); color: var(--ink-2); }

/* ── Wide table wrapper ── */
/* Added 0814_3 L5 after a builder flagged that a 4-column table compresses to near
   min-content below ~400px. Wide content scrolls inside its own container; the page body
   never scrolls horizontally. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll table { min-width: 34rem; }