/* Base */
/* Until the fonts load (max 1s; see the head script), the page waits, then fades in */
body { transition: opacity calc(var(--dur) * 1.5) var(--ease); }
:root.fonts-wait body { opacity: 0; }
@media (prefers-reduced-motion: reduce) { body { transition: none; } }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--shell-bg);
  color: var(--shell-ink);
  font-family: var(--font-display);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; transition: color var(--dur) var(--ease); }
/* Focus: a hairline in the ink of wherever it sits (orange is reserved, rule 3) */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
::selection { background: var(--shell-ink); color: var(--shell-bg); }
.room ::selection { background: var(--room-ink); color: var(--room-bg); }
/* A plain text button (metal toggle): looks like the mono around it */
.bare { background: none; border: 0; padding: 0; margin: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; transition: color var(--dur) var(--ease); }
h1, h2, h3 { text-wrap: balance; margin: 0; font-weight: 500; }
p { margin: 0; }

.mono {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* The pixel field sits behind every dark section */
#field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}

.dark { position: relative; z-index: 1; color: var(--shell-ink); }
.room { position: relative; z-index: 2; background: var(--room-bg); color: var(--room-ink); }

.wrap { padding-inline: var(--gutter); max-width: 90rem; margin-inline: auto; }

/* Instrument header */
.masthead {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
  align-items: end;
  padding-block: var(--edge) var(--s-3);
  border-bottom: 1px solid var(--shell-rule);
}
.masthead .mono { color: var(--shell-mute); }
.masthead .locale { text-align: center; }
.masthead .wordmark { color: var(--shell-ink); font-weight: 500; text-decoration: none; cursor: pointer; user-select: none; }
.masthead nav { display: flex; justify-content: flex-end; gap: var(--s-5); }
.masthead nav a { text-decoration: none; color: var(--shell-mute); }
/* The locale needs the full width to sit on one line; below that the masthead is
   just the wordmark and nav, and on the narrowest phones the nav tightens. */
@media (max-width: 56rem) {
  .masthead { grid-template-columns: 1fr auto; }
  .masthead .locale { display: none; }
}
@media (max-width: 24rem) {
  .masthead nav { gap: var(--s-3); }
}

/* Ruler: tick marks like an instrument scale */
.ruler { height: 12px; position: relative; margin-top: var(--s-3); }
.ruler span { position: absolute; bottom: 0; width: 1px; height: 5px; background: var(--shell-mute); }
.ruler span.major { height: 11px; }

/* Hero */
.hero { padding-block: clamp(6rem, 18vh, 11rem) clamp(3.5rem, 9vh, 6rem); display: grid; gap: var(--s-8); }
/* Headline: GT America Extended Regular, sized from the width so "Complex systems,"
   (9.44em wide in the licensed face, sized at 9.5 for a hair of margin) ends exactly where the intro's measure does: the
   column, capped at the intro's 104ch (60.4rem). Two lines, broken by hand.
   "Say hello." at the close uses the same face and size: the page opens and
   closes in one voice. */
.hero, .close { container-type: inline-size; }
.hero h1, .close h2 { font-family: var(--font-hero); font-weight: 400; font-size: calc(min(100cqi, 60.4rem) / 9.5); line-height: 1; letter-spacing: -0.025em; white-space: nowrap; } /* breaks are set by hand */
.hero .intro { font-family: var(--font-mono); font-size: var(--t-mono-l); line-height: var(--lh-mono); color: var(--shell-mute); max-width: 104ch; }
.readout { display: flex; justify-content: space-between; gap: var(--s-4); color: var(--shell-mute); }
.readout > span, .threshold .frame header > span { white-space: nowrap; }
.readout .live { color: var(--shell-accent); }

/* Band: the field draws the weather line and index previews into this box */
.band { position: relative; height: clamp(7.5rem, 16vh, 10rem); margin-block: var(--s-2) var(--s-3); }
.band-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

/* Index of work */
.index { list-style: none; margin: 0; padding: 0 0 clamp(4rem, 12vh, 8rem); }
.index > li { border-top: 1px solid var(--shell-rule); }
.index > li:last-child { border-bottom: 1px solid var(--shell-rule); }
.index a {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  gap: var(--s-4);
  align-items: baseline;
  padding-block: var(--s-4);
  text-decoration: none;
}
.index .n, .index .s, .index .t i { color: var(--shell-mute); transition: color var(--dur) var(--ease); }
.index .t { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); align-items: baseline; min-width: 0; }
.index .t b { font-weight: 400; font-size: var(--t-title); letter-spacing: -0.01em; }
.index .t i { font-style: normal; font-family: var(--font-mono); font-size: var(--t-mono); }
/* Hover and focus: the row's mono brightens to ink while the band above shows the
   preview. No orange here (rule 3): the field is what lights up. */
.index a:hover .n, .index a:hover .s, .index a:hover .t i,
.index a:focus-visible .n, .index a:focus-visible .s, .index a:focus-visible .t i { color: var(--shell-ink); }

/* Tiers. One page, three versions (T cycles them; see CLAUDE.md):
   mvp = interactive CV (index rows expand, no chapters or images),
   reduced = short chapters and one visual per case, full = everything. */
:root[data-tier="mvp"] [data-min="reduced"],
:root[data-tier="mvp"] [data-min="full"],
:root[data-tier="reduced"] [data-min="full"] { display: none; }
:root[data-tier="reduced"] .threshold, :root[data-tier="reduced"] .threshold.short { height: 150vh; }
/* Reduced: one hero image per case, right under its head (copied from the first
   decision's visual by main.js); decisions become text only and sit tighter. */
:root:not([data-tier="reduced"]) [data-only="reduced"] { display: none; }
:root[data-tier="reduced"] .decision .media { display: none; }
:root[data-tier="reduced"] .decision { padding-block: var(--s-6); }
:root[data-tier="reduced"] .decision .body { gap: var(--s-2); }
.hero-shot { display: grid; grid-template-columns: var(--aside) minmax(0, 1fr); gap: var(--s-4) var(--col-gap); padding-block: var(--pad-block) var(--s-6); }
.hero-shot .media { grid-column: 2; }
@media (max-width: 48rem) { .hero-shot { grid-template-columns: 1fr; } .hero-shot .media { grid-column: 1; } }

/* MVP: each index row expands into a CV entry built from its case study */
.cv { display: none; }
:root[data-tier="mvp"] .cv { display: grid; grid-template-rows: 0fr; transition: grid-template-rows calc(var(--dur) * 2) var(--ease); }
:root[data-tier="mvp"] .index li.open .cv { grid-template-rows: 1fr; }
.cv > div { overflow: hidden; min-height: 0; }
.cv-body { display: grid; gap: var(--s-4); padding: 0 0 var(--s-6) calc(3.5rem + var(--s-4)); max-width: calc(var(--measure) + 3.5rem); }
.cv-meta { color: var(--shell-mute); }
.cv-problem { font-size: var(--t-body); line-height: 1.55; color: var(--shell-ink); }
.cv-decisions { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); font-family: var(--font-mono); font-size: var(--t-mono-l); color: var(--shell-ink); }
.cv-decisions li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); }
.cv-decisions li span, .cv-outcome span { color: var(--shell-mute); }
.cv-outcome { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-4); }
.cv-outcome b { font-size: var(--t-h3); font-weight: 500; letter-spacing: -0.03em; color: var(--shell-ink); white-space: nowrap; }
.cv-outcome b .to { font-size: 0.5em; font-weight: 400; color: var(--shell-mute); margin-inline: 0.2em; letter-spacing: 0; }
.cv-outcome span { font-size: var(--t-mono-l); font-family: var(--font-mono); }
.cv-list { list-style: none; margin: 0; padding: 0; font-family: var(--font-mono); font-size: var(--t-mono-l); }
.cv-list li { display: flex; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-1); color: var(--shell-ink); }
.cv-list li span:last-child { color: var(--shell-mute); }
@media (max-width: 40rem) { .cv-body { padding-left: 0; } }

/* The tier readout: appears for a moment when T switches tiers */
.tier-toast { position: fixed; top: var(--edge); left: 50%; translate: -50% 0; z-index: 10; color: var(--shell-accent); background: var(--shell-bg); padding: var(--s-1) var(--s-3); opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); }
.tier-toast.on { opacity: 1; }

/* Thresholds: tall dark sections whose inner frame sticks while the field plays */
.threshold { height: 260vh; }
.threshold.short { height: 200vh; }
.threshold .frame {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-block: var(--edge) var(--s-8);
}
.threshold .frame header { display: flex; justify-content: space-between; gap: var(--s-4); color: var(--shell-mute); }
.threshold .frame header .live { color: var(--shell-accent); }
.threshold h2 { font-size: var(--t-h2); line-height: 1; letter-spacing: -0.035em; }
.threshold .line { font-family: var(--font-mono); font-size: var(--t-mono-l); line-height: var(--lh-mono); color: var(--shell-ink); margin-top: var(--s-3); max-width: 40rem; }

/* Light rooms: case studies */
.room { padding-block: var(--pad-section); }
/* Every room row shares one grid: the mono margin, then the measure */
.room .head, .decision, .outcome {
  display: grid;
  grid-template-columns: var(--aside) minmax(0, 1fr);
  gap: var(--s-4) var(--col-gap);
}
.room .head { padding-bottom: var(--pad-block); border-bottom: 1px solid var(--room-rule); } /* every divider is the one light rule */
.room .eyebrow { color: var(--room-mute); margin-bottom: var(--s-2); }
.room h2 { font-size: var(--t-h2); line-height: 1.02; letter-spacing: -0.035em; max-width: var(--measure); text-wrap: pretty; }
/* Text grows a little with the window so the shared measure stays readable */
.room .lead { font-size: var(--t-lead); line-height: 1.45; max-width: var(--measure); margin-top: var(--s-5); color: var(--room-ink); }
.meta { display: grid; gap: var(--s-4); align-content: start; margin: 0; color: var(--room-mute); font-family: var(--font-mono); font-size: var(--t-mono-s); letter-spacing: 0.06em; text-transform: uppercase; line-height: var(--lh-mono); }
.meta dd { margin: 0; color: var(--room-ink); text-transform: none; letter-spacing: 0; font-size: var(--t-mono); }

.decision { padding-block: var(--pad-block); border-bottom: 1px solid var(--room-rule); }
.room .num { color: var(--room-mute); }
.decision .aside { display: grid; gap: var(--s-6); align-content: start; }
.decision .body { display: grid; gap: var(--s-5); min-width: 0; }
/* A smaller step of the section title: same weight, tracking tightened to match */
.decision h3 { font-size: var(--t-h3); line-height: 1.08; letter-spacing: -0.03em; max-width: var(--measure); text-wrap: pretty; }
.decision p { max-width: var(--measure); color: var(--room-ink); }
.decision .body p { font-size: var(--t-body-l); } /* body text only, not the label or margin note */
/* Margin notes: Ryan's voice in the mono margin. Ink, not orange (rule 3). */
.note { font-family: var(--font-mono); font-size: var(--t-mono); line-height: var(--lh-mono); color: var(--room-ink); max-width: var(--aside); }

.media {
  aspect-ratio: 16 / 10;
  max-width: 100%;
  background: var(--room-surface);
  border: 1px solid var(--room-rule);
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: var(--room-mute);
  text-align: center;
  padding: var(--s-4);
  width: 100%;
  max-width: var(--measure);
}

/* Real visuals: the image sets the shape; the frame stays the same rule and radius */
.media.shot { aspect-ratio: auto; padding: 0; margin: 0; overflow: hidden; background: var(--room-surface); }
.media.shot img, .media.shot video { width: 100%; height: auto; display: block; }
.media.shot video { cursor: pointer; } /* click to pause or play */
/* Tall sheets crop to the standard 16:10 frame from the top, so visuals keep one rhythm */
.media.shot.crop { aspect-ratio: 16 / 10; position: relative; }
.media.shot.crop img { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: top; }

.outcome { padding-top: var(--pad-block); }
.outcome .big { font-size: var(--t-big); line-height: 0.9; letter-spacing: -0.04em; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--room-ink); white-space: nowrap; max-width: none; }
.outcome .big .to { font-size: 0.32em; font-weight: 400; letter-spacing: 0; color: var(--room-mute); margin-inline: 0.25em; }
.outcome p { color: var(--room-mute); max-width: 30rem; margin-top: var(--s-3); }
/* Tally squares sit on the field's 9px grid, like its pixels */
.tally { display: flex; flex-wrap: wrap; gap: 3px; margin-top: var(--s-5); max-width: 22rem; }
.tally i { width: 6px; height: 6px; background: var(--room-ink); }
.tally i.on { background: var(--room-accent); }

@media (max-width: 48rem) {
  .room .head, .decision, .outcome { grid-template-columns: 1fr; }
  .room .head { row-gap: var(--s-8); }
  .room .head .meta { order: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); } /* title first, then the facts, two to a row */
  .room .head .meta div:last-child { grid-column: 1 / -1; }
  .note { max-width: none; }
}

/* Archive */
.archive { padding-top: clamp(6rem, 15vh, 10rem); } /* more air after the Uber room; its last rule already divides them */
/* No metadata column here: stack the eyebrow and title like the case study heads do */
.archive .head { grid-template-columns: minmax(0, 1fr); row-gap: 0; padding-bottom: var(--s-6); border-bottom: 0; }
.archive ul { list-style: none; margin: 0; padding: 0; }
.archive li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-4);
  align-items: baseline; /* year sits on the title's baseline, like the home index */
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--room-rule);
}
.archive li span:first-child { min-width: 0; }
.archive .yr { color: var(--room-mute); }

/* Close */
.close { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; padding-block: var(--edge) var(--s-8); }
.close .hello { width: fit-content; cursor: default; } /* hover sends pings: only over the words */
/* Contact: LinkedIn is the one way to reach Ryan (no email on the site) */
.close .contact { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin-top: var(--s-6); font-family: var(--font-mono); font-size: var(--t-mono-l); }
.close .contact a { color: var(--shell-ink); text-decoration: underline; text-underline-offset: 0.3em; }
.close .contact a:hover { color: var(--shell-mute); }
.masthead nav a:hover, .close footer .bare:hover { color: var(--shell-ink); }
/* Footer: three columns with the middle truly centered, whatever the sides say */
.close footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: var(--s-3) var(--s-8); color: var(--shell-mute); border-top: 1px solid var(--shell-rule); padding-top: var(--s-4); }
.close footer > :first-child { justify-self: start; }
.close footer .where { justify-self: center; text-align: center; }
.close footer > :last-child { justify-self: end; }
@media (max-width: 48rem) {
  .close footer { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .close footer > :first-child, .close footer > :last-child { justify-self: center; }
}

/* Metal mode: only ever touches the dark shell */
body.metal .dark h1,
body.metal .dark h2 { font-family: var(--font-metal); font-weight: 500; letter-spacing: 0; } /* same boxes and line heights as the default type */
/* The blackletter is far narrower ("Complex systems," is 6.46em wide vs 9.2em in
   Extended), so metal mode fits it to the same measure: larger, same line breaks. */
body.metal .hero h1, body.metal .close h2 { font-size: calc(min(100cqi, 60.4rem) / 6.55); }
.wordmark .mark-metal { display: none; }
body.metal .wordmark .mark-full { display: none; }
body.metal .wordmark .mark-metal { display: inline; }
/* RS draws large but takes no extra line height, so the masthead doesn't grow */
body.metal .masthead .wordmark { font-family: var(--font-metal); letter-spacing: 0; text-transform: none; }
body.metal .wordmark .mark-metal { font-size: 1.4rem; line-height: 0; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }