@import url('tokens.css');

/* ======================================== reset ======================================== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* ====================================== base / type ===================================== */
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--step-0); line-height: var(--lh-mid); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
main { display: block; }
a { color: var(--accent); }
::selection { background: color-mix(in srgb, var(--accent) 18%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
code { font-family: var(--font-mono); font-size: .9em; background: var(--surface-2); padding: 0 var(--s-1); border-radius: var(--r-sm); }

/* ======================================= utilities ====================================== */
.mono, .topbar, .kicker, .section-label, .pin, .meta, .src, .tag, figcaption, .spy .lbl, .outcome em, .status .h, .skip, .feat-answer-pre { font-family: var(--font-mono); font-size: var(--step--1); }
.mono, .topbar, .kicker, .section-label, .pin, .outcome em, .status .h, .tag, .feat-answer-pre { letter-spacing: .08em; text-transform: uppercase; }
.meta, .src, figcaption, .spy .lbl { letter-spacing: .02em; }
.narrative p, .narrative li, .lead, .thesis, .transferable, .pull, blockquote, .qcard .q, .reflection .body, .changed li, .sidebar, .prio p, .status li { font-family: var(--font-serif); }
.skip { position: absolute; left: -999px; top: 0; background: var(--text); color: var(--bg); padding: var(--s-2) var(--s-3); border-radius: 0 0 var(--r-sm) 0; z-index: 100; }
.skip:focus-visible { left: 0; }
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--accent); z-index: 90; }

/* ======================================== layout ======================================== */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s-5); }
.page { max-width: var(--page); margin: 0 auto; padding: var(--s-8) var(--s-5); }

/* ================================== index components =================================== */
.mono { color: var(--muted); }
a { text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
.placeholder-link { color: var(--muted); border-bottom: 1px dashed var(--muted); }
header.masthead { display: grid; grid-template-columns: minmax(0, 34rem) 1fr; gap: var(--s-6) var(--s-8); margin-bottom: var(--s-9); }
header.masthead h1 { grid-column: 1 / -1; font-size: var(--step-5); font-weight: 700; letter-spacing: -0.02em; line-height: var(--lh-tight); margin: var(--s-1) 0 0; }
.intro p { margin: 0 0 var(--s-2); max-width: var(--measure); }
.intro p:last-child { margin-bottom: 0; }
.contact { justify-self: end; text-align: right; display: flex; flex-direction: column; gap: var(--s-1); align-items: flex-end; }
.eyebrow { font-size: var(--step-0); color: var(--muted); margin: 0; }
/* Facts strip — answers the three questions a recruiter asks before reading anything. */
.facts { grid-column: 1 / -1; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); border-top: 1px solid var(--border); padding-top: var(--s-4); }
.facts > div { display: flex; flex-direction: column; gap: var(--s-1); }
.facts dt { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.facts dd { margin: 0; font-size: var(--step-0); color: var(--text); }
.featured { margin-bottom: var(--s-9); }
.featured-label { margin-bottom: var(--s-5); border-top: 2px solid var(--text); padding-top: var(--s-4); }
.featured-list, .index { border-top: 1px solid var(--border); }
.feat { position: relative; display: grid; grid-template-columns: var(--s-7) 1fr; gap: var(--s-1) var(--s-5); padding: var(--s-5) var(--s-2); border-bottom: 1px solid var(--border); }
.feat:hover, .row.open { background: var(--surface-2); }
.feat-num { padding-top: var(--s-1); }
.feat-title { grid-column: 2; width: 100%; font-size: var(--step-5); font-weight: 700; letter-spacing: -0.02em; line-height: var(--lh-snug); margin: 0; }
.feat-title a { color: var(--text); }
.feat-title a:hover { color: var(--accent); text-decoration: none; }
.feat-hook { grid-column: 2; width: 100%; max-width: var(--measure); margin: var(--s-2) 0 0; color: var(--muted); font-size: var(--step-0); }
.feat-meta { grid-column: 2; width: 100%; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-4); align-items: baseline; }
.feat-meta .stat { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .02em; color: var(--muted); }
.feat-meta .stat b { font-family: var(--font-sans); font-size: var(--step-1); font-weight: 700; color: var(--text); margin-right: var(--s-1); }
.feat-meta .stat--tight b { margin-right: 0; }
/* Explicit width: 100% (rather than relying on the grid item's default stretch) — some
   engines shrink a grid item to its content width when a descendant is position:absolute
   (see .feat-answer a::after below), which otherwise wrapped this into a narrow column. */
.feat-answer { grid-column: 2; width: 100%; margin: var(--s-2) 0 0; font-size: var(--step-2); line-height: var(--lh-snug); }
.feat-answer a { color: var(--text); font-weight: 600; }
.feat-answer a:hover, .feat-answer a:focus-visible { color: var(--accent); }
.feat-answer a::after { content: ""; position: absolute; inset: 0; }
.feat-answer-pre { color: var(--faint); display: block; margin-bottom: var(--s-1); }
.row { border-bottom: 1px solid var(--border); }
/* Title and type get an explicit max width (16rem / 12rem — headroom over their longest
   real value, "Architecture, the first career" / "research · consultancy") instead of
   max-content, plus their own ellipsis. A max-content track next to a squeezed 1fr
   sibling can be under-sized by the layout engine, which is what wrapped these into a
   narrow, word-per-line column; sizing them explicitly removes that ambiguity, and the
   ellipsis is the fallback if a viewport is too narrow to fit everything at full size. */
.row-head { display: grid; grid-template-columns: var(--s-7) 6.5rem minmax(0, 16rem) minmax(0, 1fr) minmax(0, 12rem); gap: var(--s-5); align-items: baseline; width: 100%; padding: var(--s-4) var(--s-2); background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.row-head:hover, .row-head:focus-visible { color: var(--accent); }
.row-head:focus-visible { outline-offset: -2px; }
/* Explicit grid-column on each — otherwise hiding .summary at narrower widths (below)
   removes it as a grid item and auto-placement shifts .type left into its track. */
.row-head .title { grid-column: 3; font-size: var(--step-2); font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.row-head .type { grid-column: 5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.row.open .row-head .summary { visibility: hidden; }
.row-head .summary { grid-column: 4; font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .02em; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.row-body { display: none; padding: 0 var(--s-2) var(--s-5); }
.row.open .row-body { display: grid; grid-template-columns: var(--s-7) 1fr; gap: var(--s-5); }
.row-body .inner { grid-column: 2; max-width: 38rem; display: flex; flex-direction: column; gap: var(--s-2); }
.row-body p { margin: 0; }
.tags { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.tag { color: var(--muted); border: 1px solid var(--border); padding: var(--s-1) var(--s-2); border-radius: var(--r-pill); }
footer { margin-top: var(--s-8); }

/* =============================== case-study components ================================ */
.topbar { color: var(--faint); padding: var(--s-4) 0 0; }
.topbar a { color: var(--faint); text-decoration: none; border-bottom: 1px solid transparent; }
.topbar a:hover, .topbar a:focus-visible { color: var(--accent); border-bottom-color: var(--accent); }
header.hero { padding: var(--s-9) 0 var(--s-7); }
.hero-inner { max-width: 760px; }
.kicker { color: var(--faint); margin: 0; }
.wrap h1 { font-size: var(--step-6); line-height: var(--lh-tight); letter-spacing: -.015em; margin: var(--s-4) 0 var(--s-5); max-width: 17ch; font-weight: 700; }
.thesis { font-size: var(--step-3); color: var(--muted); line-height: var(--lh-mid); max-width: 54ch; margin: 0; }
.outcome { font-size: var(--step-0); font-weight: 600; color: var(--text); margin: var(--s-5) 0 0; max-width: 56ch; line-height: var(--lh-mid); padding-left: var(--s-4); border-left: 3px solid var(--accent); }
.outcome em { color: var(--faint); font-weight: 600; font-style: normal; display: block; margin-bottom: var(--s-1); }
.meta { color: var(--muted); margin: var(--s-6) 0 0; padding-top: var(--s-5); border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.meta span { white-space: nowrap; }
.meta b { color: var(--text); font-weight: 600; }
.track { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail); gap: var(--s-7); padding: var(--s-7) 0; border-top: 1px solid var(--border); align-items: start; }
.narrative { max-width: var(--measure); }
.narrative p { font-size: var(--step-1); line-height: var(--lh-prose); margin: 0 0 var(--s-4); }
.section-label { color: var(--faint); margin: 0 0 var(--s-2); }
.beat-title { font-size: var(--step-4); line-height: var(--lh-snug); letter-spacing: -.01em; margin: 0 0 var(--s-4); font-weight: 700; }
.lead::first-letter { float: left; font-family: var(--font-serif); font-size: 3.875rem; line-height: .82; padding: var(--s-2) var(--s-3) 0 0; font-weight: 700; }
blockquote { margin: var(--s-5) 0; padding: var(--s-1) 0 var(--s-1) var(--s-5); border-left: 3px solid var(--text); font-style: italic; font-size: var(--step-1); color: var(--text); }
blockquote cite { display: block; font-style: normal; font-family: var(--font-sans); font-size: var(--step--1); color: var(--faint); margin-top: var(--s-2); }
.rail { display: grid; gap: var(--s-4); position: static; }
.spy { position: fixed; top: 50%; left: var(--s-5); transform: translateY(-50%); z-index: 80; display: none; }
.spy ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.spy a { position: relative; display: flex; align-items: center; gap: var(--s-3); text-decoration: none; padding: var(--s-2); border-radius: var(--r-sm); color: var(--faint); line-height: 1.15; }
.spy .dot { width: 9px; height: 9px; border-radius: var(--r-round); border: 1.5px solid var(--border-strong); background: transparent; flex: none; transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast); }
.spy .lbl { white-space: nowrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--s-1) var(--s-2); box-shadow: var(--shadow); opacity: 0; transform: translateX(-4px); transition: opacity var(--t-fast), transform var(--t-fast); pointer-events: none; }
.spy:hover .lbl, .spy a:focus-visible .lbl, .spy a[aria-current="true"] .lbl { opacity: 1; transform: none; }
.spy a:hover { color: var(--text); }
.spy a:hover .dot { border-color: var(--accent); }
.spy a[aria-current="true"] { color: var(--accent); }
.spy a[aria-current="true"] .dot { background: var(--accent); border-color: var(--accent); transform: scale(1.15); }
section[id^="sp-"] { scroll-margin-top: var(--s-5); }
figure.artifact { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-4); }
.artifact .pin { color: var(--faint); margin-bottom: var(--s-2); }
.artifact svg { display: block; width: 100%; height: auto; }
figcaption { color: var(--muted); margin-top: var(--s-2); line-height: 1.45; }
.qcard { background: var(--surface-2); }
.qcard .q { font-style: italic; font-size: var(--step-0); line-height: var(--lh-mid); margin: 0; }
.qcard--fact .q { font-style: normal; }
.qcard .src { color: var(--faint); margin: var(--s-2) 0 0; }
ul.kit { list-style: none; margin: 0; padding: 0; font-size: var(--step--1); }
ul.kit li { padding: var(--s-2) 0; border-bottom: 1px solid var(--border); color: var(--muted); line-height: 1.4; }
ul.kit li:last-child { border-bottom: 0; padding-bottom: 0; }
ul.kit b, .changed b, .sidebar b { color: var(--text); font-family: var(--font-sans); font-weight: 600; }
.climax .beat-title, .pull { color: var(--accent); }
.pull { font-size: var(--step-5); font-weight: 700; line-height: 1.24; max-width: 24ch; border-top: 1px solid var(--accent-soft); border-bottom: 1px solid var(--accent-soft); padding: var(--s-5) 0; margin: var(--s-5) 0; }
.climax--danger .beat-title, .climax--danger .pull { color: var(--danger); }
.climax--danger .pull { border-color: var(--danger-soft); }
.implication { border-left: 3px solid var(--accent-soft); padding-left: var(--s-4); }
.results { padding: var(--s-7) 0; border-top: 2px solid var(--text); max-width: 820px; }
.results h2 { font-size: var(--step-results-h2); line-height: var(--lh-snug); margin: var(--s-2) 0 var(--s-5); letter-spacing: -.01em; }
.results-note { max-width: var(--measure); color: var(--muted); margin: 0 0 var(--s-5); }
.changed { display: grid; gap: var(--s-3); margin: 0 0 var(--s-6); padding: 0; }
.changed li { list-style: none; border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-md); padding: var(--s-4); font-size: var(--step-0); }
.status { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin: 0 0 var(--s-6); }
.status ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.status li { border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); font-size: var(--step--1); }
.status .h { margin: 0 0 var(--s-1); }
.status .shipped .h, .status .shipped .tick { color: var(--ok); }
.status .open .h, .status .open .tick { color: var(--danger); }
.tick { font-weight: 700; }
.prio { display: grid; grid-template-columns: repeat(var(--prio-cols, 3), 1fr); gap: var(--s-3); margin: var(--s-2) 0 0; }
.prio .cell { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); background: var(--surface); }
.prio .tag { color: var(--accent); margin: 0 0 var(--s-2); }
.prio p { margin: 0; font-size: var(--step--1); color: var(--muted); line-height: var(--lh-mid); }
.sus-block { display: grid; grid-template-columns: minmax(0, 380px) 1fr; gap: var(--s-5); align-items: center; margin: var(--s-2) 0 0; }
.sus-block figure { margin: 0; }
.sus-block p { font-size: var(--step-0); color: var(--muted); margin: 0; }
.sidebar { background: var(--surface-2); border-radius: var(--r-md); padding: var(--s-5); margin: var(--s-6) 0 0; font-size: var(--step-0); color: var(--muted); }
.reflection { padding: var(--s-7) 0 0; max-width: 760px; }
.reflection .body { font-size: var(--step-0); max-width: var(--measure); margin: var(--s-2) 0 0; }
.refl-part { margin: var(--s-5) 0 0; }
.refl-part .pin { color: var(--faint); margin: 0; }
.close { padding: var(--s-7) 0 var(--s-6); max-width: 640px; }
.transferable { font-size: var(--step-transfer); line-height: 1.48; color: var(--text); margin: var(--s-2) 0 0; }
footer.page { border-top: 1px solid var(--border); padding: var(--s-6) 0 var(--s-9); font-size: var(--step--1); color: var(--faint); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: baseline; }
footer.page .name { color: var(--text); font-weight: 600; }
.disclaimer { max-width: 60ch; line-height: var(--lh-mid); }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); border-top: 2px solid var(--text); padding: var(--s-6) 0; }
.pager a { display: flex; flex-direction: column; gap: var(--s-2); }
.pager-next { text-align: right; }
.pager-dir { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.pager-title { font-size: var(--step-2); color: var(--text); line-height: var(--lh-snug); }

/* ====================================== SVG (.s-*) ===================================== */
.s-axis { stroke: var(--border-strong); stroke-width: 1; }
.s-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; }
.s-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.s-dot { fill: var(--surface); stroke: var(--accent); stroke-width: 2.5; }
.s-band { fill: var(--accent); opacity: .07; }
.s-txt { font-family: var(--font-sans); fill: var(--muted); font-size: 12px; }
.s-val { font-family: var(--font-sans); font-size: 28px; font-weight: 700; fill: var(--text); }
.s-faint { font-family: var(--font-sans); fill: var(--faint); font-size: 11px; }
.s-label { font-family: var(--font-sans); fill: var(--text); font-size: 14px; font-weight: 600; }
.s-value-sm { font-family: var(--font-sans); fill: var(--text); font-size: 12px; font-weight: 600; }
.s-box { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 1.5; }
.s-box-lbl { font-family: var(--font-sans); fill: var(--text); font-size: 12.5px; font-weight: 600; }
.s-arrow { stroke: var(--faint); stroke-width: 1.5; fill: none; }
.s-node { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
.s-zone { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 1; }
.s-zone-ok { fill: color-mix(in srgb, var(--ok) 10%, transparent); stroke: var(--ok); stroke-width: 1; }
.s-zone-hi { fill: color-mix(in srgb, var(--accent) 12%, transparent); stroke: var(--accent); stroke-width: 1.5; }
.s-zone-gate { fill: color-mix(in srgb, var(--danger) 10%, transparent); stroke: var(--danger); stroke-width: 1.5; }
.s-gateline { stroke: var(--danger); stroke-width: 2; stroke-dasharray: 6 4; }
.s-zlabel { font-family: var(--font-sans); fill: var(--text); font-size: 12.5px; font-weight: 600; }
.s-zscope { font-family: var(--font-sans); fill: var(--muted); font-size: 11px; }
.s-bar { fill: var(--border-strong); }
.s-bar-hi { fill: var(--accent); }
.s-bar-danger { fill: var(--danger); }
.s-accent { fill: var(--accent); }
.s-danger { fill: var(--danger); }
.s-faint-fill { fill: var(--faint); }
.s-ok-stroke { stroke: var(--ok); }
.s-faint-line { stroke: var(--faint); stroke-width: 2; }
.s-medium { font-size: 20px; }

/* ======================================= responsive ==================================== */
@media (min-width: 861px) { .rail { position: sticky; top: var(--s-5); } }
@media (min-width: 1200px) { .spy { display: block; } }
@media (min-width: 1460px) { .spy .lbl { opacity: 1; transform: none; box-shadow: none; background: transparent; border-color: transparent; padding-left: 0; } }
@media (max-width: 860px) {
  .track { grid-template-columns: 1fr; gap: var(--s-5); padding: var(--s-6) 0; }
  .narrative p { font-size: var(--step-0); }
  .sus-block, .prio, .status { grid-template-columns: 1fr; }
  .pager { grid-template-columns: 1fr; }
  .pager-next { text-align: left; }
  /* Fixed-width title/type (above) don't leave room for the summary column once the
     page narrows below ~900px — drop it rather than let the row overflow. The full
     sentence is still one click away in the expanded row body. */
  .row-head .summary { display: none; }
}
@media (max-width: 640px) {
  header.masthead { grid-template-columns: 1fr; }
  .contact { justify-self: start; text-align: left; align-items: flex-start; }
  .feat { grid-template-columns: var(--s-6) 1fr; }
  .feat-title, .feat-hook, .feat-meta, .feat-cta { grid-column: 2; }
  .row-head { grid-template-columns: var(--s-6) 1fr; grid-template-rows: auto auto; gap: var(--s-1) var(--s-4); }
  .row-head .title, .row-head .year, .row-head .type { grid-column: 2; }
  .row-head .title { white-space: normal; }
  .row-head .summary { display: none; }
  .row-head .year { order: 3; }
  .row-head .type { order: 4; }
  .row.open .row-body { grid-template-columns: 1fr; padding-left: var(--s-2); }
  .row-body .inner { grid-column: 1; }
  /* nowrap keeps a short meta item from breaking mid-phrase, but the redesign study's
     longest one is 411px and cannot fit a phone — below this width, let it wrap. */
  .meta span { white-space: normal; }
}

/* ==================================== hiring Q&A page ================================== */
/* /hiring/ — the screening questions, answered before anyone has to ask them. Sans for the
   question, serif for the answer, per the one rule: serif argues. */
.qa { margin-bottom: var(--s-8); max-width: var(--measure); }
.qa h2 { font-size: var(--step-3); font-weight: 600; line-height: var(--lh-snug); margin: var(--s-2) 0 var(--s-4); }
.qa p { font-family: var(--font-serif); font-size: var(--step-1); line-height: var(--lh-prose); margin: 0 0 var(--s-4); }
.qa p:last-child { margin-bottom: 0; }
.qa strong { font-weight: 600; }
/* the page-level footer sits inside .page here, so it must not pad or narrow a second time */
.page > footer.page { max-width: none; padding-left: 0; padding-right: 0; }

/* ======================================= call to action ================================ */
/* The site could be read end to end without ever offering a next step. Same block on the
   landing page and after each case study's argument, different copy. Tokens only — no new
   colour, no new type size. */
.cta { border-top: 2px solid var(--text); margin-top: var(--s-8); padding: var(--s-6) 0 var(--s-7); }
.cta h2 { font-size: var(--step-4); line-height: var(--lh-snug); margin: var(--s-3) 0 var(--s-4); max-width: 30ch; font-weight: 600; }
.cta p { font-size: var(--step-1); line-height: var(--lh-prose); color: var(--muted); max-width: var(--measure); margin: 0 0 var(--s-5); }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); align-items: center; }
.cta-actions a { display: inline-block; padding: var(--s-3) var(--s-5); border-radius: var(--r-sm); font-size: var(--step-0); line-height: 1.2; border: 1px solid var(--accent); transition: background var(--t-fast), color var(--t-fast); }
.cta-primary { background: var(--accent); color: var(--surface); }
.cta-primary:hover, .cta-primary:focus-visible { background: var(--text); border-color: var(--text); color: var(--bg); }
.cta-secondary:hover, .cta-secondary:focus-visible { background: var(--accent-soft); }
.cta-note { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .02em; color: var(--faint); margin: var(--s-4) 0 0; max-width: var(--measure); }

/* ===================================== research shelf ================================== */
/* Two public, auditable studies. The point is falsifiability, so each names what ships. */
.shelf { border-top: 1px solid var(--border); padding-top: var(--s-4); margin-top: var(--s-8); }
.shelf-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--s-5); margin-top: var(--s-5); }
.shelf-item { display: flex; flex-direction: column; gap: var(--s-2); }
.shelf-item h3 { margin: 0; font-family: var(--font-mono); font-size: var(--step-0); letter-spacing: .02em; text-transform: none; font-weight: 400; }
.shelf-item p { margin: 0; font-size: var(--step-0); line-height: var(--lh-mid); color: var(--muted); }
.shelf-more { margin: var(--s-5) 0 0; font-size: var(--step-0); color: var(--muted); }

/* ======================================= walkthrough =================================== */
/* Video slot: a recorded walkthrough of the deck behind a case study, with its transcript
   underneath. The transcript is not optional — it is the same words, and it is what a reader
   who will not press play, or who reads English better than they hear it, actually gets.
   Reuses the .row disclosure pattern rather than inventing a second one. */
.walkthrough { border-top: 1px solid var(--border); padding-top: var(--s-4); margin: var(--s-8) 0; }
.walkthrough-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; margin-top: var(--s-4); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.walkthrough-frame > iframe, .walkthrough-frame > video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.walkthrough-cap { margin: var(--s-3) 0 0; font-size: var(--step-0); color: var(--muted); max-width: var(--measure); }
.walkthrough-cap .dur { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .02em; color: var(--faint); }
.walkthrough .row { border-top: 1px solid var(--border); margin-top: var(--s-4); }
/* .row-head is a four-column grid in the work index; here the row has one label, so collapse
   it rather than leaving the label sitting in the second column. */
.walkthrough .row-head { grid-template-columns: 1fr; }
.walkthrough .row-body .inner { grid-template-columns: 1fr; padding-left: 0; }
.walkthrough .transcript p { font-family: var(--font-serif); font-size: var(--step-0); line-height: var(--lh-prose); max-width: var(--measure); }

/* ========================================== print ====================================== */
@media print {
  .cta-actions a { border: 0; background: none; padding: 0; color: var(--text); }
  .walkthrough-frame { display: none; }
  .walkthrough .row-body { display: grid !important; }
  .spy, .progress, .skip, .pager { display: none; }
  .row-body { display: grid !important; }
  .feat-answer a::after { display: none; }
  .feat:hover, .row.open { background: none; }
  .facts { break-inside: avoid; }
  body { background: #fff; }
  .rail { position: static; }
  .track, .results, .close { break-inside: avoid; }
  body { font-size: 11pt; }
}

/* ===================================== reduced motion ================================== */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ================================== audience variants ================================== */
/* An inline head script stamps data-for on <html> from ?for=. Everything above the fold is
   then CSS, so there is no flash of the default copy and no-JS degrades to the default view.
   A variant may change emphasis and order. It may never change a claim, a number or a
   method. See DESIGN-SYSTEM.md. */

/* only ever one is visible, so none of them is a "last child" in the layout sense */
.intro p[data-aud] { display: none; margin-bottom: 0; }
.intro p[data-aud="default"] { display: block; }
[data-for] .intro p[data-aud="default"] { display: none; }
[data-for="security"]   .intro p[data-aud="security"],
[data-for="enterprise"] .intro p[data-aud="enterprise"],
[data-for="fintech"]    .intro p[data-aud="fintech"],
[data-for="product"]    .intro p[data-aud="product"] { display: block; }

.featured-list { display: flex; flex-direction: column; }
.feat-num::before { content: var(--n, ""); }
#feat-reversibility { --n: "01"; order: 1; }
#feat-column        { --n: "02"; order: 2; }
#feat-redesign      { --n: "03"; order: 3; }

/* security and fintech lead with the trust-in-automation study, same as the default order;
   they differ by intro copy and which work-index row opens, not by reshuffling for its own sake. */
[data-for="enterprise"] #feat-redesign      { --n: "01"; order: 1; }
[data-for="enterprise"] #feat-reversibility { --n: "02"; order: 2; }
[data-for="enterprise"] #feat-column        { --n: "03"; order: 3; }

[data-for="product"] #feat-column        { --n: "01"; order: 1; }
[data-for="product"] #feat-reversibility { --n: "02"; order: 2; }
[data-for="product"] #feat-redesign      { --n: "03"; order: 3; }