/* Fonts, self-hosted (SIL OFL 1.1): Newsreader for display, Geist for text, Geist Mono for figures. */
@font-face { font-family: "Newsreader"; src: url("assets/fonts/newsreader.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("assets/fonts/newsreader-italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist"; src: url("assets/fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("assets/fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

/* Tokens. One dark theme on purpose: the point cloud only reads on black.
   Shapes: media 6px radius (phone shots 22px), nothing else is rounded.
   Accent: a few hero points and link hover only.
   z-index: canvas 0, stage text 1, header 20, loader 50, skip link 60. */
:root {
  color-scheme: dark;
  --bg: #0b0b0a;
  --raise: #141412;
  --text: #ecebe6;
  --muted: #8f8e88;
  --line: rgb(236 235 230 / 0.1);
  --accent: #f2783d;
  --live: #57c785;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --pad: clamp(20px, 4vw, 48px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1);
}

@view-transition { navigation: auto; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
p, h1, h2, h3, dl, dd, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: rgb(242 120 61 / 0.35); }

a { color: inherit; text-decoration: none; transition: color 0.25s; }
.u { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; transition: background-size 0.4s var(--ease), color 0.25s; }
.u:hover { color: var(--accent); background-size: 0% 1px; background-position: 100% 100%; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 60; background: var(--text); color: var(--bg); padding: 8px 12px; }
.skip:focus { top: 12px; }
.icon { width: 0.9em; height: 0.9em; vertical-align: -0.08em; }

/* 12-column grid */
.g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--pad); }

/* Nav: floating bar with a sliding highlight (nav.js), modeled on steelelabs.co */
.topbar { position: fixed; inset: 16px 0 auto 0; z-index: 20; display: flex; justify-content: center; pointer-events: none; padding-inline: 12px; }
.nav { position: relative; display: flex; gap: 2px; padding: 3px; border-radius: 11px; background: rgb(22 22 20 / 0.86); border: 1px solid rgb(236 235 230 / 0.07); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); pointer-events: auto; box-shadow: 0 10px 30px -12px rgb(0 0 0 / 0.6); }
@media (prefers-reduced-transparency: reduce) { .nav { background: #161614; backdrop-filter: none; } }
.nav__pill { position: absolute; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: 8px; background: #2a2a26; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05); opacity: 0; transition: transform 0.5s var(--ease), width 0.5s var(--ease), opacity 0.3s; }
.nav.is-ready .nav__pill { opacity: 1; }
.nav__item { position: relative; z-index: 1; display: flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 8px; font-size: 13px; color: var(--muted); white-space: nowrap; transition: color 0.2s; }
.nav__item:hover, .nav__item[aria-current="page"] { color: var(--text); }
.nav__mark { padding: 0 16px; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text); }
.nav__mark .short { display: none; }
@media (max-width: 599px) {
  .nav__item { padding: 0 11px; }
  .nav__mark { padding: 0 12px; }
  .nav__mark .full { display: none; }
  .nav__mark .short { display: inline; }
}

/* Loader: only when JS runs and motion is allowed */
.loader { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .loader { display: block; position: fixed; inset: 0; z-index: 50; background: var(--bg); transition: transform 1.1s var(--ease-io); }
  .js.is-loaded .loader { transform: translateY(-100%); }
  .js .topbar { opacity: 0; transform: translateY(-8px); transition: opacity 0.8s var(--ease) 0.7s, transform 0.8s var(--ease) 0.7s; }
  .js.is-loaded .topbar { opacity: 1; transform: none; }
}
.loader__inner { position: absolute; inset: auto var(--pad) 40px var(--pad); display: flex; justify-content: space-between; align-items: flex-end; }
.loader__name { font-size: 14px; color: var(--muted); }
.loader__count { font-family: var(--serif); font-size: clamp(64px, 10vw, 140px); line-height: 0.8; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.loader__bar { position: absolute; inset: auto 0 0 0; height: 1px; background: var(--line); }
.loader__bar span { display: block; height: 100%; background: var(--text); transform: scaleX(0); transform-origin: left; }

/* Line reveal for display type. Padding keeps descenders from clipping. */
.reveal { display: block; overflow: hidden; padding-block: 0.12em 0.16em; margin-block: -0.12em -0.16em; }
.reveal > span { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal > span { transform: translateY(110%); transition: transform 1.4s var(--ease) 0.15s; }
  .js.is-loaded .reveal > span { transform: none; }
  .js .fade-in { opacity: 0; transform: translateY(12px); transition: opacity 1s var(--ease) 0.6s, transform 1s var(--ease) 0.6s; }
  .js.is-loaded .fade-in { opacity: 1; transform: none; }
}

/* Stage: pinned while the point cloud morphs through the story */
.stage { position: relative; height: 600vh; }
.stage__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.stage__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero { position: absolute; inset: auto 0 0 0; z-index: 1; padding-bottom: clamp(28px, 5vh, 56px); will-change: transform, opacity; }
.hero .g { align-items: end; }
.hero__name { grid-column: 1 / -1; font-family: var(--serif); font-weight: 400; font-size: clamp(64px, 12.6vw, 208px); line-height: 0.86; letter-spacing: -0.045em; }
.live { display: inline-flex; align-items: center; gap: 8px; }
.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px rgb(87 199 133 / 0.18); }

.caps { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.caps .g { height: 100%; align-items: center; }
.cap { grid-column: 1 / 6; grid-row: 1; pointer-events: auto; will-change: transform, opacity; opacity: 0; visibility: hidden; }
.cap__big { font-family: var(--serif); font-weight: 400; font-size: clamp(72px, 10vw, 168px); line-height: 0.9; letter-spacing: -0.04em; }
.cap__big span { color: var(--muted); }
.cap__link { display: inline-block; margin-top: 32px; font-size: 15px; }

@media (max-width: 899px) {
  .caps .g { align-items: end; padding-bottom: 48px; }
  .cap { grid-column: 1 / -1; }
  .cap__big { font-size: clamp(56px, 18vw, 96px); }
}

/* Finale: the page ends on the point sphere, with one way to get in touch */
.finale { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; border-top: 1px solid var(--line); }
.finale__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.no-gl .finale__canvas { display: none; }
.finale__inner { position: relative; z-index: 1; padding-block: 140px 36px; row-gap: 0; }
.finale__title { grid-column: 1 / 9; font-family: var(--serif); font-weight: 400; font-size: clamp(72px, 11vw, 190px); line-height: 0.88; letter-spacing: -0.045em; }
.finale__mail { grid-column: 1 / 9; justify-self: start; margin-top: 40px; font-family: var(--serif); font-size: clamp(26px, 2.6vw, 38px); letter-spacing: -0.015em; }
.finale__row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: clamp(64px, 9vw, 120px); padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.finale__row a:hover { color: var(--text); }
@media (max-width: 899px) { .finale__title, .finale__mail { grid-column: 1 / -1; } .finale__inner { padding-top: 55svh; } }

/* Static stage: reduced motion or no WebGL. Hero over a still frame, captions in normal flow. */
.stage.is-static, .no-gl .stage { height: auto; }
.stage.is-static .stage__pin, .no-gl .stage__pin { position: relative; height: auto; overflow: visible; }
.stage.is-static .stage__canvas { height: 100svh; }
.no-gl .stage__canvas { display: none; }
.stage.is-static .hero, .no-gl .hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; }
.stage.is-static .caps, .no-gl .caps { position: relative; }
.stage.is-static .caps .g, .no-gl .caps .g { display: block; height: auto; padding-bottom: 0; }
.stage.is-static .cap, .no-gl .cap { opacity: 1 !important; visibility: visible !important; transform: none !important; padding-block: 96px; border-top: 1px solid var(--line); }

/* Sections */
.section { padding-block: clamp(96px, 12vw, 176px); border-top: 1px solid var(--line); }
.section .g { row-gap: 40px; }
.label { grid-column: 1 / 4; font-size: 14px; font-weight: 400; color: var(--muted); align-self: start; position: sticky; top: 96px; }
.content { grid-column: 5 / -1; }
@media (max-width: 899px) {
  .label { grid-column: 1 / -1; position: static; }
  .content { grid-column: 1 / -1; }
}

.lede { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3.3vw, 46px); line-height: 1.14; letter-spacing: -0.02em; text-wrap: balance; }
.lede em { font-style: italic; }
.body { color: var(--muted); font-size: 17px; max-width: 58ch; }
.body + .body { margin-top: 16px; }
.body strong { color: var(--text); font-weight: 400; }

.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); }
.facts dt { font-size: 13px; color: var(--muted); }
.facts dd { margin-top: 6px; font-size: 15px; line-height: 1.45; }
@media (max-width: 899px) { .facts { grid-template-columns: 1fr 1fr; } }

/* Work: asymmetric pair */
.work { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 72px; }
.work__item { display: block; }
.work__item:nth-child(1) { grid-column: 1 / 8; }
.work__item:nth-child(2) { grid-column: 9 / -1; margin-top: clamp(80px, 14vw, 220px); }
.frame { position: relative; overflow: hidden; border-radius: 6px; background: var(--raise); }
.frame img { width: 100%; transition: transform 1.2s var(--ease); }
.frame--crop img { aspect-ratio: 4 / 3; object-fit: cover; object-position: top center; }
.work__item:hover .frame img { transform: scale(1.025); }
.work__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 20px; }
.work__title { font-family: var(--serif); font-weight: 400; font-size: 30px; letter-spacing: -0.02em; }
.work__meta { font-size: 13px; color: var(--muted); white-space: nowrap; }
.work__desc { margin-top: 8px; color: var(--muted); max-width: 46ch; }
.work__more { display: inline-block; margin-top: 16px; font-size: 15px; }
@media (max-width: 899px) {
  .work__item:nth-child(1), .work__item:nth-child(2) { grid-column: 1 / -1; margin-top: 0; }
}

/* Dated rows */
.rows > li { display: grid; grid-template-columns: 9.5rem 1fr; gap: 24px; padding-block: 24px; border-top: 1px solid var(--line); }
.rows > li:last-child { border-bottom: 1px solid var(--line); }
.when { font-family: var(--mono); font-size: 12.5px; color: var(--muted); padding-top: 4px; letter-spacing: 0.01em; }
.rows h3 { font-size: 17px; font-weight: 450; line-height: 1.45; }
.rows p { color: var(--muted); margin-top: 6px; max-width: 60ch; }
@media (max-width: 599px) { .rows > li { grid-template-columns: 1fr; gap: 8px; } }

/* Lessons: two columns, serif titles */
.lessons { display: grid; grid-template-columns: 1fr 1fr; gap: 56px 48px; }
.lessons h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.2; letter-spacing: -0.015em; }
.lessons p { margin-top: 12px; color: var(--muted); max-width: 40ch; }
@media (max-width: 699px) { .lessons { grid-template-columns: 1fr; } }

/* Quotes from X */
.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.quote__day { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.quote blockquote { margin-top: 16px; font-family: var(--serif); font-size: clamp(21px, 1.8vw, 25px); line-height: 1.38; letter-spacing: -0.01em; }
.quote blockquote p + p { margin-top: 12px; }
.quotes__more { display: inline-block; margin-top: 56px; font-size: 15px; }
@media (max-width: 699px) { .quotes { grid-template-columns: 1fr; } }

/* Footer */
.foot { padding-block: clamp(96px, 12vw, 176px) 40px; border-top: 1px solid var(--line); }
.foot .label { position: static; }
.foot__mail { grid-column: 1 / -1; font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 7.4vw, 124px); line-height: 1.02; letter-spacing: -0.04em; margin-top: 20px; overflow-wrap: anywhere; }
.foot__mail .u { background-size: 100% 2px; padding-bottom: 0.04em; }
.foot__mail .u:hover { background-size: 0% 2px; }
.foot__row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: clamp(80px, 10vw, 140px); font-size: 14px; color: var(--muted); }
.foot__row a:hover { color: var(--text); }

/* Inner pages */
.page-head { padding-top: clamp(150px, 18vw, 230px); padding-bottom: clamp(56px, 7vw, 96px); }
.page-head .g { row-gap: 32px; }
.title { grid-column: 1 / -1; font-family: var(--serif); font-weight: 400; font-size: clamp(64px, 12vw, 200px); line-height: 0.88; letter-spacing: -0.045em; }
.title--sm { font-size: clamp(52px, 9vw, 150px); }
.page-lede { grid-column: 1 / 8; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.5; color: var(--muted); max-width: 44ch; }
.meta { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-top: 24px; border-top: 1px solid var(--line); margin-top: 24px; }
.meta dt { font-size: 13px; color: var(--muted); }
.meta dd { margin-top: 6px; font-size: 15px; }
@media (max-width: 899px) { .page-lede { grid-column: 1 / -1; } .meta { grid-template-columns: 1fr 1fr; } }

.plate { grid-column: 1 / -1; }
.plate .frame img { aspect-ratio: 16 / 9; object-fit: cover; object-position: top center; }
.plate .frame--mid img { aspect-ratio: 2 / 1; object-position: center 46%; }
.caption { margin-top: 14px; font-size: 13px; color: var(--muted); }

.numbers { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-block: 32px 72px; border-top: 1px solid var(--line); margin-top: clamp(56px, 7vw, 96px); }
.numbers dt { font-size: 13px; color: var(--muted); }
.numbers dd { font-family: var(--serif); font-size: clamp(40px, 5vw, 72px); line-height: 1; letter-spacing: -0.03em; margin-top: 12px; }
.numbers dd small { display: block; font-family: var(--sans); font-size: 13px; color: var(--muted); letter-spacing: 0; margin-top: 8px; }
@media (max-width: 899px) { .numbers { grid-template-columns: 1fr 1fr; row-gap: 32px; } }

.h-chapter { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 4.2vw, 60px); line-height: 1.04; letter-spacing: -0.03em; margin-bottom: 28px; }
.pull { margin-top: 40px; font-family: var(--serif); font-style: italic; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.15; letter-spacing: -0.02em; }
.pull-cite { margin-top: 14px; font-size: 14px; color: var(--muted); }
.gap-top { margin-top: 40px; }
.duo { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; margin-top: 72px; }
.duo .frame:nth-child(1) { grid-column: 3 / 7; }
.duo .frame:nth-child(2) { grid-column: 7 / 11; margin-top: 96px; }
.duo .frame { border-radius: 22px; }
.duo img { aspect-ratio: 9 / 15; object-fit: cover; object-position: top; }
.duo .caption { grid-column: 3 / 11; }
@media (max-width: 899px) { .duo .frame:nth-child(1) { grid-column: 1 / 7; } .duo .frame:nth-child(2) { grid-column: 7 / -1; margin-top: 48px; } .duo .caption { grid-column: 1 / -1; } }
.paper { background: #f4f3ee; border-radius: 6px; overflow: hidden; margin-top: 48px; }
.paper img { width: 100%; aspect-ratio: 1200 / 650; object-fit: cover; object-position: bottom; }
.stack { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.stack dt { font-size: 13px; color: var(--muted); }
.stack dd { margin-top: 4px; }
@media (max-width: 599px) { .stack { grid-template-columns: 1fr; } }

/* Ledger (log page) */
.ledger { grid-column: 1 / -1; padding-block: 40px 96px; border-top: 1px solid var(--line); }
.ledger__big { font-family: var(--serif); font-size: clamp(80px, 15vw, 230px); line-height: 0.86; letter-spacing: -0.05em; white-space: nowrap; }
.ledger__big span { color: var(--muted); }
.ledger__rows { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 24px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.ledger__rows dt { font-size: 13px; color: var(--muted); }
.ledger__rows dd { font-family: var(--mono); font-size: 22px; margin-top: 4px; }
.ledger__note { margin-top: 24px; font-size: 13px; color: var(--muted); }
@media (max-width: 899px) { .ledger__rows { grid-template-columns: 1fr 1fr; } .ledger__big { font-size: clamp(56px, 19vw, 120px); } }

/* Archive table */
.table { grid-column: 1 / -1; }
.table li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding: 22px 8px; margin-inline: -8px; border-top: 1px solid var(--line); align-items: baseline; transition: background-color 0.3s; }
.table li:last-child { border-bottom: 1px solid var(--line); }
.table li:hover { background: var(--raise); }
.table .when { grid-column: 1 / 3; }
.table h3 { grid-column: 3 / 6; font-family: var(--serif); font-weight: 400; font-size: 23px; line-height: 1.2; letter-spacing: -0.01em; }
.table p { grid-column: 6 / 11; color: var(--muted); }
.table .tag { grid-column: 11 / -1; font-family: var(--mono); font-size: 12px; color: var(--muted); text-align: right; }
@media (max-width: 899px) {
  .table li { grid-template-columns: 1fr; row-gap: 6px; }
  .table .when, .table h3, .table p, .table .tag { grid-column: 1 / -1; text-align: left; }
}

/* Page fade for inner pages */
@media (prefers-reduced-motion: no-preference) {
  .inner main { animation: rise 0.9s var(--ease) both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .frame img, .u { transition: none; }
}