@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-cta a { font-family: var(--font-mono); font-size: var(--step--1); }
.mono, .topbar, .kicker, .section-label, .pin, .outcome em, .status .h, .tag { 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-8); }
header.masthead h1 { grid-column: 1 / -1; font-size: var(--step-6); font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin: var(--s-1) 0 0; text-transform: uppercase; }
.intro p { margin: 0 0 var(--s-2); max-width: 34rem; }
.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; }
.featured { margin-bottom: var(--s-8); }
.featured-label { margin-bottom: var(--s-4); }
.featured-list, .index { border-top: 2px solid var(--text); }
.feat { 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; 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; max-width: 44rem; margin: var(--s-2) 0 0; color: var(--muted); font-size: var(--step-0); }
.feat-meta { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin-top: var(--s-3); align-items: baseline; }
.feat-cta { grid-column: 2; margin-top: var(--s-3); }
.feat-cta a { letter-spacing: .04em; }
.row { border-bottom: 1px solid var(--border); }
.row-head { display: grid; grid-template-columns: var(--s-7) 6.5rem 1fr max-content; 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; }
.row-head .title { font-size: var(--step-2); font-weight: 500; letter-spacing: -0.01em; }
.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-1); max-width: var(--measure); margin: var(--s-2) 0 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; }
}
@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 .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; }
}

/* ========================================== print ====================================== */
@media print {
  .spy, .progress, .skip, .pager { display: none; }
  .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; }
}