/* ==========================================================================
   supreeth.in — main.css. One stylesheet for every page (the "Plain" system,
   Oct 2026; the ledger system it replaced is in archive/ledger-site-archive/).

   Whitespace does the separating: no rules, no cards, no boxes. One family in
   two voices — Hedvig Letters Serif speaks (statements, titles, results),
   Hedvig Letters Sans explains (body, labels, captions). Both come in a single
   weight with no italic, so emphasis switches voice instead of faking bold.

   Layout: a narrow label rail on the left, then one content measure. The rail
   holds what a section is (Work, Case study, On this page); the content holds
   the thing itself. Below 1100px the rail folds above its content.
   ========================================================================== */

/* ---------------------------------------------------------------- Tokens */
:root {
  --bg: #ecedea; --ground: #e2e3df; --ink: #1c1d1a; --muted: #63655f; --faint: #b9bbb4;
  --accent: #0f7a5a; --sel: rgba(15, 122, 90, .16); --rim: rgba(28, 29, 26, .1);
  --ink-soft: var(--muted);                     /* used inside the schematic SVGs */
  --serif: "Hedvig Letters Serif", Georgia, "Times New Roman", serif;
  --sans: "Hedvig Letters Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gut: clamp(1.25rem, 6vw, 7rem);
  --rail: 8.5rem; --rail-gap: clamp(2rem, 3.2vw, 3.25rem);
  --measure: 62rem;                             /* the content column beside the rail */
  --text: 38rem;                                /* the reading measure */
  --col-gap: clamp(2rem, 4vw, 4.5rem);
  --head-h: 4.25rem;
  --space-sec: clamp(7rem, 18vh, 12rem);
  --space-entry: clamp(6rem, 15vh, 10rem);
  --space-block: clamp(2.25rem, 5.5vh, 3.25rem);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-io: cubic-bezier(.77, 0, .175, 1);
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #171816; --ground: #20211e; --ink: #e8e9e4; --muted: #93958e; --faint: #454741;
  --accent: #62c79c; --sel: rgba(98, 199, 156, .2); --rim: rgba(255, 255, 255, .1);
  color-scheme: dark;
}

/* ---------------------------------------------------------------- Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--head-h) + 1.25rem); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html.smooth { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans); font-synthesis: none;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
::selection { background: var(--sel); }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
h1, h2, h3 { font-weight: 400; }
ul, ol { list-style: none; }
img, svg { max-width: 100%; }
img { height: auto; }
a {
  color: inherit; text-decoration-line: underline; text-decoration-thickness: 1px;
  text-underline-offset: .22em; text-decoration-color: var(--faint);
  transition: text-decoration-color .2s ease, color .2s ease;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
@media (hover: hover) and (pointer: fine) { a:hover { text-decoration-color: var(--accent); } }
.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip {
  position: fixed; z-index: 50; left: var(--gut); top: .75rem; padding: .55rem .85rem; border-radius: 6px;
  background: var(--ink); color: var(--bg); text-decoration: none; transform: translateY(-160%);
  transition: transform .2s var(--ease-out);
}
.skip:focus { transform: none; }

/* ---------------------------------------------------------------- Header
   Sticks, with no rule under it: content fades out as it passes beneath. */
.head {
  position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .4rem 1.5rem; padding: 1.4rem var(--gut) 1.1rem; background: var(--bg);
}
.head::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 2.25rem;
  background: linear-gradient(var(--bg), transparent); pointer-events: none; opacity: 0; transition: opacity .25s ease;
}
.head.is-stuck::after { opacity: 1; }
.head a { text-decoration-line: none; }
.head ul { display: flex; gap: clamp(.9rem, 2.4vw, 2rem); }
.head ul a, .head ul button { display: inline-block; padding-block: .35rem; margin-block: -.35rem; color: var(--muted); transition: color .2s ease; }
.head .theme { text-transform: lowercase; }
@media (hover: hover) and (pointer: fine) { .head ul a:hover, .head ul button:hover { color: var(--ink); } }
.head ul a[aria-current] { color: var(--ink); text-decoration-line: underline; text-decoration-color: var(--accent); text-underline-offset: .3em; }

/* ---------------------------------------------------------------- Blocks: rail + content */
.block { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: var(--rail-gap); align-items: baseline; padding: var(--space-sec) var(--gut) 0; }
.block--top { padding-top: clamp(3.5rem, 10vh, 7rem); }
.block--near { padding-top: var(--space-entry); }
.block--tight { padding-top: var(--space-block); }
.rail { position: sticky; top: calc(var(--head-h) + 2.25rem); }
.rail--static { position: static; }
.rail h2 { font: 400 1rem/1.4 var(--sans); }
.kick { font-size: 1rem; line-height: 1.4; color: var(--muted); }
.kick span { display: block; }
.kick span:first-child { color: var(--ink); }
.rail-sub { display: grid; margin-top: .1rem; color: var(--muted); }
.rail-sub span { grid-area: 1 / 1; opacity: 0; transform: translateY(.25rem); transition: opacity .25s ease, transform .35s var(--ease-out); }
.rail-sub span.is-on { opacity: 1; transform: none; }
.block-body { min-width: 0; max-width: var(--measure); }

/* ---------------------------------------------------------------- Shared type */
.statement { font: 400 clamp(2.15rem, 1rem + 4.3vw, 5.25rem)/1.06 var(--serif); letter-spacing: -.018em; max-width: 15.5em; transition: color .3s var(--ease-out); }
.title { font: 400 clamp(2.3rem, 1.1rem + 3.4vw, 4.4rem)/1.06 var(--serif); letter-spacing: -.018em; max-width: 15em; text-wrap: balance; }
.title-sub { margin-top: clamp(.9rem, 2vh, 1.25rem); max-width: 22em; font: 400 clamp(1.45rem, 1.1rem + 1.1vw, 2.15rem)/1.2 var(--serif); letter-spacing: -.012em; color: var(--ink); text-wrap: balance; }
.title-sub + .standfirst { margin-top: clamp(1rem, 2.5vh, 1.5rem); }
.standfirst { margin-top: clamp(1.25rem, 3vh, 1.75rem); max-width: 34rem; font: 400 clamp(1.25rem, 1.1rem + .45vw, 1.5rem)/1.4 var(--serif); color: var(--muted); text-wrap: pretty; }
.role { color: var(--muted); }
.title + .role { margin-top: .9rem; }
.result { font: 400 clamp(1.3rem, 1.05rem + .65vw, 1.6rem)/1.34 var(--serif); letter-spacing: -.006em; text-wrap: pretty; }
.label { font-size: .9375rem; color: var(--muted); margin-bottom: .4rem; }
.all { margin-top: var(--space-entry); }
.lead-link { font: 400 clamp(1.6rem, 1.2rem + 1.3vw, 2.4rem)/1.15 var(--serif); letter-spacing: -.012em; }
.lead-link a { text-decoration-thickness: .04em; text-underline-offset: .14em; }

/* ---------------------------------------------------------------- Home: opening (the hero) */
.hero { display: flex; flex-direction: column; justify-content: center; min-height: max(26rem, calc(100svh - var(--head-h) - var(--space-sec) - 4.5rem)); padding: 2rem var(--gut) 0; }
.statement a { text-decoration-thickness: .04em; text-underline-offset: .13em; transition: color .3s var(--ease-out), text-decoration-color .3s ease; }
.statement.is-peek { color: var(--faint); }
.statement.is-peek a.is-on { color: var(--ink); text-decoration-color: var(--accent); }
.slot { display: grid; max-width: 33rem; margin-top: clamp(2rem, 6vh, 3.75rem); }
.slot > * { grid-area: 1 / 1; transition: opacity .25s var(--ease-out), transform .4s var(--ease-out); }
.lede { color: var(--muted); }
.lede a { color: var(--ink); }
.proof { opacity: 0; transform: translateY(.35rem); pointer-events: none; font-size: 1.125rem; color: var(--muted); }
.proof b { display: block; font-weight: 400; color: var(--ink); }
.slot.is-peek .lede { opacity: 0; transform: translateY(-.25rem); pointer-events: none; }
.proof.is-on { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- Home: work entries */
.entry { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--col-gap); }
.entry + .entry { margin-top: var(--space-entry); }
.entry-head { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; }
.entry-head .role { grid-column: 2; }
@supports not (grid-template-columns: subgrid) { .entry-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 2rem; } }
.entry h3 { font: 400 clamp(2rem, 1.2rem + 2.1vw, 3.1rem)/1.05 var(--serif); letter-spacing: -.016em; }
.entry h3 a { text-decoration-line: none; }
@media (hover: hover) and (pointer: fine) { .entry h3 a:hover { text-decoration-line: underline; text-decoration-thickness: .04em; text-underline-offset: .12em; } }
.entry .result { grid-column: 1; margin-top: clamp(2.25rem, 5.5vh, 3.25rem); }
.entry .detail { grid-column: 2; margin-top: clamp(2.25rem, 5.5vh, 3.25rem); padding-top: .3rem; color: var(--muted); text-wrap: pretty; }
.designed { margin-top: 1.1rem; }
.designed b { display: block; font-weight: 400; color: var(--ink); }
.more { grid-column: 1 / -1; margin-top: clamp(2rem, 4.5vh, 2.75rem); }

/* ---------------------------------------------------------------- Home: drawn figures
   Each mark carries its start (x0, y0) and end (x1, y1) in custom properties.
   The resolved figure is the default — that is what shows without script and
   what prints; with script, a figure holds its start until it scrolls in. */
.fig[data-fig] { grid-column: 1 / -1; margin-top: clamp(1.75rem, 4.5vh, 3rem); }
.fig-frame { cursor: pointer; color: var(--ink); }
.fig[data-fig] svg { display: block; width: 100%; height: auto; overflow: visible; }
.fig[data-fig] .figcap { justify-content: space-between; max-width: none; }
.fig[data-fig] .figcap > span { max-width: 40rem; }
.replay {
  flex: none; color: var(--muted); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .22em;
  text-decoration-color: var(--faint); transition: color .2s ease, text-decoration-color .2s ease, transform .16s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .replay:hover, .fig-frame:hover + .figcap .replay { color: var(--ink); text-decoration-color: var(--accent); } }
.replay:active { transform: scale(.97); }
.fig[data-fig] .m {
  fill: var(--accent); transform: translate(var(--x1), var(--y1)) scale(var(--s1), var(--t1)); opacity: var(--o1);
  transition: transform 1.15s var(--ease-io) var(--d), opacity .8s ease var(--d), fill .7s ease calc(var(--d) + .4s);
}
.fig[data-fig="timeline"] .m { fill: currentColor; }
.fig[data-fig="timeline"] .flag { fill: var(--accent); }
.fig[data-fig="triage"] .crit { fill: var(--accent); }
.fig[data-fig="triage"] .field { opacity: .12; transition: opacity 1s ease .2s; }
.fig[data-fig="timeline"] .axis { stroke: currentColor; stroke-opacity: .3; stroke-width: 1; vector-effect: non-scaling-stroke; transition: opacity .6s ease .55s; }
.fig[data-fig] .lab { font-family: var(--sans); font-size: calc(13px * var(--k, 1)); fill: var(--muted); font-variant-numeric: tabular-nums; transition: opacity .45s ease; }
.fig[data-fig] .lab-res { fill: var(--accent); font-size: calc(17px * var(--k, 1)); transition: opacity .6s ease 1.15s; }
.fig[data-fig] .lab-raw { opacity: 0; }
.fig[data-fig="settle"] .lab-raw { opacity: 1; }
/* a faint copy of each mark stays where it started, so the finished figure still shows the "before" */
.fig[data-fig] .gm { fill: currentColor; transform: translate(var(--x0), var(--y0)); opacity: .13; }
.fig[data-fig="timeline"] .gm { opacity: .1; }
.js .fig[data-fig]:not(.is-done) .m { fill: currentColor; transform: translate(var(--x0), var(--y0)); opacity: var(--o0); }
.js .fig[data-fig="triage"]:not(.is-done) .crit { fill: var(--accent); }
.js .fig[data-fig="triage"]:not(.is-done) .field { opacity: .5; }
.js .fig[data-fig="timeline"]:not(.is-done) .axis { opacity: 0; }
.js .fig[data-fig]:not(.is-done) .lab-raw { opacity: 1; }
.js .fig[data-fig]:not(.is-done) .lab-res { opacity: 0; }
.fig.is-reset .m, .fig.is-reset .lab, .fig.is-reset .field, .fig.is-reset .axis { transition: none !important; }

/* ---------------------------------------------------------------- Writing lists (home, writing index) */
.intro { max-width: 34rem; color: var(--muted); }
.posts { display: grid; gap: clamp(2.75rem, 6vh, 3.5rem); margin-top: clamp(2.75rem, 6.5vh, 4rem); }
/* same two columns as the work entries: serif on the left, the detail on the right */
.post { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--col-gap); align-items: baseline; }
.post h2, .post h3 { font: 400 clamp(1.4rem, 1.15rem + .75vw, 1.8rem)/1.2 var(--serif); letter-spacing: -.008em; text-wrap: balance; }
.post h2 a, .post h3 a { text-decoration-line: none; }
.post h2 a::after, .post h3 a::after { content: ""; position: absolute; inset: -.75rem -1rem; }
@media (hover: hover) and (pointer: fine) {
  .post:hover h2 a, .post:hover h3 a { text-decoration-line: underline; text-decoration-thickness: .05em; text-underline-offset: .14em; text-decoration-color: var(--accent); }
}
.excerpt { color: var(--muted); text-wrap: pretty; }
.meta { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin-top: .65rem; font-size: .875rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.posts + .all, .posts + .links { margin-top: clamp(2.75rem, 6.5vh, 4rem); }

/* ---------------------------------------------------------------- Contact (home) */
.avail { max-width: 31rem; font-size: 1.25rem; line-height: 1.45; text-wrap: pretty; }
.avail-life { margin-top: .6rem; color: var(--muted); text-wrap: balance; }
.mail { margin-top: clamp(2rem, 5vh, 3rem); font: 400 clamp(2.15rem, 1rem + 4.3vw, 5.25rem)/1.05 var(--serif); letter-spacing: -.02em; }
.mail a { text-decoration-thickness: .04em; text-underline-offset: .12em; }
.links { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem clamp(1.25rem, 3vw, 2.25rem); }
.mail + .links { margin-top: clamp(1.25rem, 3vh, 1.75rem); }
.links a, .copy { display: inline-block; padding-block: .3rem; margin-block: -.3rem; }
.copy { display: inline-grid; color: var(--ink); transition: transform .16s var(--ease-out); }
.copy > span { grid-area: 1 / 1; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: var(--faint); transition: opacity .2s ease, filter .2s ease, text-decoration-color .2s ease; }
.copy .b { opacity: 0; filter: blur(2px); color: var(--accent); text-decoration-color: currentColor; }
.copy.is-copied .a { opacity: 0; filter: blur(2px); }
.copy.is-copied .b { opacity: 1; filter: none; }
.copy:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .copy:hover .a { text-decoration-color: var(--accent); } }
.is-unset { color: var(--muted) !important; text-decoration-style: dotted !important; cursor: default; }

/* ---------------------------------------------------------------- Inner pages: case study opening */
.facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--col-gap); margin-top: var(--space-block); }
.facts-list { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .55rem 1.5rem; align-content: start; }
.facts-list .row, .rows .row, .prose .ledger .row { display: contents; }
.facts-list dt { color: var(--muted); }
.page-fig { margin-top: var(--space-block); }

/* ---------------------------------------------------------------- Prototype embed */
.proto { margin-top: var(--space-block); }
.proto-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; margin-bottom: 1rem; color: var(--muted); }
.proto-head b { font-weight: 400; color: var(--ink); margin-right: .75rem; }
.proto-actions { display: flex; gap: 1.5rem; }
.proto-actions a, .proto-actions button {
  color: var(--ink); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .22em;
  text-decoration-color: var(--faint); transition: text-decoration-color .2s ease, transform .16s var(--ease-out);
}
.proto-actions button:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .proto-actions button:hover { text-decoration-color: var(--accent); } }
.proto-stage { position: relative; aspect-ratio: 16 / 10; background: var(--ground); }
.proto-stage.tall { aspect-ratio: 10 / 9; }
.proto-stage.mobile { aspect-ratio: 9 / 16; max-width: 22rem; margin-inline: auto; }
.proto-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.proto-cap { margin-top: 1rem; font-size: .9375rem; color: var(--muted); max-width: var(--text); }
.proto-open { display: none; font: 400 1.5rem/1.2 var(--serif); }

/* ---------------------------------------------------------------- On this page (case studies) */
.toc { font-size: .9375rem; line-height: 1.45; }
.toc-title { color: var(--muted); margin-bottom: .6rem; }
.toc li + li { margin-top: .3rem; }
.toc a { color: var(--muted); text-decoration-line: none; transition: color .2s ease; }
@media (hover: hover) and (pointer: fine) { .toc a:hover { color: var(--ink); } }
.toc li.is-current a { color: var(--ink); text-decoration-line: underline; text-decoration-color: var(--accent); text-underline-offset: .3em; }

/* ---------------------------------------------------------------- Prose (case studies in sans, essays in serif)
   A reading column (--text) with a margin beside it for notes; figures take both. */
.prose { display: grid; grid-template-columns: [text] minmax(0, var(--text)) [margin] minmax(0, 1fr); column-gap: clamp(2rem, 3.5vw, 3.5rem); }
.prose > * { grid-column: text; min-width: 0; }
.standfirst + .prose { margin-top: var(--space-block); }
.prose > .fig:first-child { margin-top: 0; }
.prose > .fig, .prose > .entry-link { grid-column: text / -1; }
.prose > .margin-note { grid-column: margin; align-self: start; }
.prose p { text-wrap: pretty; }
.prose > * + * { margin-top: 1.1em; }
.prose > h2 { font: 400 clamp(1.6rem, 1.25rem + 1vw, 2.1rem)/1.2 var(--serif); letter-spacing: -.012em; text-wrap: balance; margin-top: clamp(3.5rem, 8vh, 5rem); }
.prose > .sec { display: none; }
.prose > .sec + h2 { margin-top: clamp(3.5rem, 8vh, 5rem); }
.prose > h2 + * { margin-top: 1rem; }
.prose > .fig, .prose > .fig + * { margin-top: clamp(2.5rem, 6vh, 3.5rem); }
.prose > .fig + h2, .prose > .fig + .sec + h2 { margin-top: clamp(3.5rem, 8vh, 5rem); }
.prose > .margin-note { margin-top: 0; padding-top: .3rem; }
.prose ul > li, .prose ol > li { position: relative; padding-left: 1.4rem; }
.prose li + li { margin-top: .6rem; }
.prose ul > li::before { content: "\2013"; position: absolute; left: 0; color: var(--muted); }
.prose ol { counter-reset: li; }
.prose ol > li { counter-increment: li; }
.prose ol > li::before { content: counter(li); position: absolute; left: 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.prose ul.ship > li::before { content: ""; top: .62em; width: 7px; height: 7px; border-radius: 1px; background: var(--accent); }
.prose ul.ship > li.open::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }
.prose ul.ship > li { color: var(--muted); }
/* emphasis switches voice: serif inside sans text, sans inside serif text */
.prose strong, .prose b, .rows b, .tl-foot b, .margin-note b { font-weight: 400; font-family: var(--serif); color: var(--ink); font-size: 1.04em; }
.essay strong, .essay b, .tl-foot b { font-family: var(--sans); font-size: .94em; }
.prose code { font-family: var(--mono); font-size: .85em; background: var(--ground); padding: .08em .35em; border-radius: 3px; }
.prose blockquote { padding-left: clamp(1.25rem, 3vw, 2rem); font: 400 1.4rem/1.4 var(--serif); color: var(--ink); }
.prose > blockquote, .prose > blockquote + * { margin-top: 2rem; }
.prose > hr { border: 0; height: 0; margin: clamp(2.5rem, 6vh, 3.5rem) 0 0; }
.prose .closing { font: 400 1.25rem/1.45 var(--serif); color: var(--muted); }
.prose .entry-link a { color: var(--ink); }
a.fig-ref { color: var(--accent); text-decoration-line: none; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { a.fig-ref:hover { text-decoration-line: underline; } }

/* label/value rows inside prose (constraints, audit, tokens, I owned / Team) */
.prose .ledger { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem 1.5rem; }
.prose > .ledger { margin-top: 1.75rem; }
.prose > .ledger + * { margin-top: 2rem; }
.prose .ledger dt { color: var(--muted); font-size: .9375rem; padding-top: .1rem; font-variant-numeric: tabular-nums; }
.prose .ledger--tight:not(.ledger--tokens) dd > strong:first-child { display: block; margin-bottom: .15rem; }
.prose .ledger dd ul > li + li { margin-top: .35rem; }
.ledger--tokens dd { color: var(--muted); }
.sw { display: inline-block; width: .75em; height: .75em; border-radius: 3px; vertical-align: -.06em; margin-right: .35em; box-shadow: inset 0 0 0 1px var(--rim); }

/* margin notes: beside the paragraph they follow; inline on smaller screens */
.margin-note { font-size: .9375rem; line-height: 1.5; color: var(--muted); }
.margin-note b { display: block; margin-bottom: .25rem; }

/* Essays: the body speaks, so it is set in the serif */
.essay { font: 400 clamp(1.125rem, 1.04rem + .25vw, 1.25rem)/1.62 var(--serif); }
.essay > h2 { font-size: clamp(1.45rem, 1.2rem + .8vw, 1.85rem); }
.essay ul > li::before, .essay ol > li::before { font-family: var(--sans); }

/* ---------------------------------------------------------------- Figures (case studies, essays) */
.fig .figcap { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin-top: .9rem; font: 400 .9375rem/1.5 var(--sans); color: var(--muted); max-width: 44rem; }
.figcap .n { color: var(--ink); white-space: nowrap; }
.figcap .t { flex: 1; min-width: 14rem; }
.fig-ground { position: relative; overflow: hidden; background: var(--ground); padding: clamp(1rem, 3vw, 2.5rem); }
.fig-shot { display: block; width: 100%; outline: 1px solid var(--rim); outline-offset: -1px; }
.fig-lab { position: absolute; top: .75rem; left: 1rem; z-index: 1; font-size: .8125rem; color: var(--muted); }
.fig--plate .fig-ground { padding: 0; background: none; }
.fig--plate img { display: block; width: 100%; }
.fig--plate.fig--portrait .fig-ground { display: flex; justify-content: center; background: var(--ground); padding: clamp(1rem, 3vw, 2.5rem); }
.fig--portrait img { max-width: 18rem; border-radius: 22px; }
img.cover-dark { display: none; }
[data-theme="dark"] img.cover-light { display: none; }
[data-theme="dark"] img.cover-dark { display: block; }
.fig--phone .fig-ground { display: flex; justify-content: center; }
.fig--phone .fig-shot { max-width: 18rem; border-radius: 22px; outline: 0; }
.fig--specimen .fig-ground { padding-right: 0; }
.fig--specimen.frag .fig-ground { padding-right: clamp(1rem, 3vw, 2.5rem); }
.fig--specimen.frag .fig-shot { max-width: 680px; border-radius: 10px; }
.fig--specimen.tall .fig-ground { display: flex; justify-content: center; padding-right: clamp(1rem, 3vw, 2.5rem); }
.fig--specimen.tall .fig-shot { max-width: 520px; border-radius: 10px; }
img.phone { border-radius: 9% / 4.2%; }
.fig--seq .frames { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 2.5vw, 1.75rem); }
.fig--seq .frame { min-width: 0; }
.fig--seq .step { display: block; margin-bottom: .6rem; font-size: .8125rem; color: var(--ink); }
.fig--seq .frame img { display: block; width: 100%; outline: 1px solid var(--rim); outline-offset: -1px; }
@media (min-width: 680px) {
  .fig--seq .frames { grid-template-columns: repeat(3, 1fr); }
  .fig--seq .frames.two { grid-template-columns: repeat(2, 1fr); }
  .fig--seq .frames.four { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 679px) {
  .fig--seq .frames--portrait { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .fig--seq .frames--portrait::-webkit-scrollbar { display: none; }
  .fig--seq .frames--portrait .frame { flex: 0 0 74%; scroll-snap-align: start; }
}
/* detail: the enlarged crop is the point; a faded key shows where it lives */
.fig--detail .fig-ground { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); align-items: center; }
@media (min-width: 760px) {
  .fig--detail .fig-ground { grid-template-columns: minmax(0, 1fr) 13rem; }
  .fig--detail .fig-ground > .key { grid-column: 2; grid-row: 1; }
  .fig--detail .fig-ground > :not(.key) { grid-column: 1; grid-row: 1; }
}
.fig--detail .key-img { position: relative; }
.fig--detail .key img { display: block; width: 100%; opacity: .45; outline: 1px solid var(--rim); outline-offset: -1px; }
.fig--detail .box { position: absolute; box-shadow: 0 0 0 1.5px var(--accent); border-radius: 2px; }
.fig--detail .keylab { margin-top: .6rem; font-size: .8125rem; color: var(--muted); }
.fig--compare .pair { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 2.5vw, 1.75rem); }
@media (min-width: 680px) { .fig--compare .pair { grid-template-columns: 1fr 1fr; } }
.fig--compare .pane { min-width: 0; display: flex; flex-direction: column; }
.fig--compare .verdict { display: flex; align-items: center; gap: .45rem; margin-bottom: .7rem; font-size: .8125rem; }
.fig--compare .verdict::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.fig--compare .rejected .verdict { color: var(--muted); }
.fig--compare .shipped .verdict { color: var(--accent); }
.fig--compare .rejected img { filter: grayscale(1); opacity: .62; }
.fig--compare .pane img { display: block; width: 100%; outline: 1px solid var(--rim); outline-offset: -1px; }
.fig-pending { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 11rem; padding: 1.4rem; text-align: center; border: 1px dashed var(--faint); color: var(--muted); font-size: .875rem; line-height: 1.5; }
.fig--schematic svg { display: block; width: 100%; height: auto; }
.fig--schematic svg g, .fig--schematic svg text { font-family: var(--sans); }
.fig--margin { display: grid; gap: 1rem 2rem; }
.fig--margin .fig-ground { display: flex; justify-content: center; }
.fig--margin .fig-shot.phone { max-width: 280px; margin-inline: auto; border-radius: 10% / 4.6%; }

/* ---------------------------------------------------------------- Work index: companies opening into projects */
.timeline { margin-top: var(--space-block); }
.tl-co + .tl-co { margin-top: clamp(.75rem, 2vh, 1.25rem); }
.tl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 1rem; column-gap: 1.5rem; align-items: baseline; width: 100%; padding-block: .6rem; text-align: left; }
.tl-name { grid-column: 1; font: 400 clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem)/1.15 var(--serif); letter-spacing: -.012em; text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: .04em; text-underline-offset: .14em; transition: text-decoration-color .2s ease; }
@media (hover: hover) and (pointer: fine) { .tl-row:hover .tl-name { text-decoration-color: var(--accent); } }
.tl-count { grid-column: 1; grid-row: 2; margin-top: .3rem; font-size: .9375rem; color: var(--muted); }
.tl-leader { display: none; }
.tl-role { grid-column: 2; grid-row: 1; color: var(--muted); }
.tl-toggle { grid-column: 3; grid-row: 1; position: relative; width: 1rem; height: 1rem; align-self: center; color: var(--muted); }
.tl-toggle::before, .tl-toggle::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; transition: transform .3s var(--ease-out); }
.tl-toggle::after { transform: rotate(90deg); }
.is-open > .tl-row .tl-toggle::after { transform: rotate(0deg); }
html:not(.js) .tl-toggle { display: none; }
.tl-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease-out); }
.tl-panel > .tl-projects { overflow: hidden; min-height: 0; }
.is-open > .tl-panel, html:not(.js) .tl-panel { grid-template-rows: 1fr; }
.tl-projects > li:first-child { padding-top: .9rem; }
.tl-projects > li:last-child { padding-bottom: 1.5rem; }
.tl-project { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto; column-gap: 1.5rem; row-gap: .15rem; align-items: baseline; padding-block: .6rem; }
.tl-yr { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-title { font: 400 1.25rem/1.3 var(--serif); }
.tl-note { grid-column: 2; color: var(--muted); font-size: .9375rem; }
.tl-doors { grid-column: 3; grid-row: 1; display: flex; gap: 1.25rem; }
.tl-foot { margin-top: var(--space-entry); max-width: 34rem; font: 400 clamp(1.25rem, 1.1rem + .45vw, 1.5rem)/1.4 var(--serif); text-wrap: pretty; }
.placeholder { color: var(--muted); }

/* timeline rows carry their years in the rail column */
.timeline { margin-left: calc(-1 * (var(--rail) + var(--rail-gap))); }
.tl-co { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: var(--rail-gap); align-items: baseline; }
.tl-co > .tl-yrs { grid-column: 1; grid-row: 1; color: var(--muted); font-variant-numeric: tabular-nums; }
.tl-co > .tl-row, .tl-co > .tl-panel { grid-column: 2; }
.tl-co > .tl-panel { grid-row: 2; }

/* ---------------------------------------------------------------- Rows (about, now, 404) */
.rows { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.1rem 2rem; margin-top: var(--space-block); max-width: var(--text); }
.rows dt { color: var(--muted); }
.rows dd { text-wrap: pretty; }
.with-portrait { display: grid; grid-template-columns: minmax(0, var(--text)) minmax(0, 1fr); column-gap: var(--col-gap); align-items: start; }
.with-portrait > .rows { grid-column: 1; }
.portrait { grid-column: 2; margin-top: var(--space-block); }
.portrait img { display: block; width: 100%; max-width: 15rem; }
.note-line { margin-top: var(--space-block); color: var(--muted); }

/* ---------------------------------------------------------------- Footer */
.foot { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: var(--rail-gap); padding: var(--space-sec) var(--gut) 2.5rem; font-size: .875rem; color: var(--muted); }
.foot-body { grid-column: 2; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .75rem 2rem; max-width: var(--measure); }
.foot-nav { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-bottom: .6rem; }
.foot-nav a, .foot .top { display: inline-block; padding-block: .25rem; margin-block: -.25rem; }
.foot-body p + p { margin-top: .2rem; }

/* ---------------------------------------------------------------- Narrower screens */
@media (max-width: 1199px) {
  .prose { grid-template-columns: minmax(0, 1fr); }
  .prose > *, .prose > .fig, .prose > .margin-note, .prose > .entry-link { grid-column: 1; max-width: var(--text); }
  .prose > .fig, .prose > .entry-link { max-width: none; }
  .prose > .margin-note { margin-top: 1.25rem; padding: 1rem 1.25rem; background: var(--ground); }
  .fig--margin { grid-template-columns: minmax(0, 1fr); }
  .fig--margin .margin-note { padding: 0; background: none; }
}
@media (min-width: 1200px) { .fig--margin { grid-template-columns: minmax(0, 1fr) 15rem; align-items: start; } }
@media (max-width: 1099px) {
  .block, .foot { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; margin-bottom: clamp(1.5rem, 4vh, 2.25rem); }
  .rail-sub, .toc { display: none; }
  .block--body > .rail { display: none; }
  .foot-body { grid-column: 1; }
  .prose > .sec { display: block; font-size: .9375rem; color: var(--muted); margin-top: clamp(3.5rem, 8vh, 5rem); }
  .prose > .sec + h2 { margin-top: .5rem; }
  .timeline { margin-left: 0; }
  .tl-co { grid-template-columns: minmax(0, 1fr); }
  .tl-co > .tl-yrs { grid-column: 1; grid-row: 1; padding-top: 0; }
  .tl-co > .tl-row { grid-row: 2; }
  .tl-co > .tl-row, .tl-co > .tl-panel { grid-column: 1; }
  .tl-co > .tl-panel { grid-row: 3; }
}
@media (max-width: 899px) {
  .entry, .post, .facts, .with-portrait { grid-template-columns: minmax(0, 1fr); }
  .entry .result, .entry .detail, .entry-head .role, .portrait, .with-portrait > .rows { grid-column: 1; }
  .entry-head .role { margin-top: .35rem; }
  .entry .detail { margin-top: 1.25rem; }
  .post-text { margin-top: .55rem; }
  .facts-list { padding-top: 0; margin-top: 1.75rem; }
  .portrait { margin-top: var(--space-block); }
}
@media (max-width: 639px) {
  .proto-stage, .proto-actions { display: none; }
  .proto-open { display: block; }
  .proto-head { margin-bottom: .5rem; }
  .tl-row { grid-template-columns: minmax(0, 1fr) 1rem; }
  .tl-role { grid-column: 1; grid-row: 3; margin-top: .15rem; }
  .tl-toggle { grid-column: 2; }
  .tl-project { grid-template-columns: 3.25rem minmax(0, 1fr); column-gap: 1rem; }
  .tl-doors { grid-column: 2; grid-row: auto; margin-top: .3rem; }
  .rows { grid-template-columns: minmax(0, 1fr); row-gap: .2rem; }
  .rows dd + dt { margin-top: 1rem; }
  .prose .ledger { grid-template-columns: minmax(0, 1fr); row-gap: .2rem; }
  .prose .ledger dd + dt { margin-top: 1rem; }
  .fig-lab + * { margin-top: 1.5rem; }
}

/* ---------------------------------------------------------------- Motion off */
@media (prefers-reduced-motion: reduce) {
  .proof, .slot.is-peek .lede, .rail-sub span { transform: none !important; }
  .fig[data-fig] .m, .fig[data-fig] .field, .fig[data-fig] .axis, .fig[data-fig] .lab, .tl-panel, .tl-toggle::before, .tl-toggle::after { transition: none !important; }
}

/* ---------------------------------------------------------------- Print: a portfolio that prints as a document */
@media print {
  :root { --bg: #fff; --ground: #f3f3f3; --ink: #000; --muted: #444; --faint: #999; }
  .head, .skip, .replay, .proto, .toc, .copy, .foot-nav, .foot .top { display: none !important; }
  .block, .foot { grid-template-columns: minmax(0, 1fr); padding-top: 2.5rem; }
  .rail { position: static; }
  .prose > .sec { display: block; }
  .js .fig[data-fig] .m { fill: #000; transform: translate(var(--x1), var(--y1)) scale(var(--s1), var(--t1)); opacity: var(--o1); }
  .tl-panel { grid-template-rows: 1fr !important; }
  a { text-decoration: none; }
}

/* ---------------------------------------------------------------- Home opening: product screens
   A stake also shows a plate of that product's own screens beside its caption (wide screens with a
   pointer; main.js lifts a plate that would fall below the fold). Faded = before, crisp = after. */
.hero { position: relative; }
.proof { position: relative; }
.proof-text { max-width: 20rem; }
.plate {
  position: absolute; top: calc(.2rem - var(--lift, 0px)); left: calc(20rem + 2.75rem); width: 24rem; z-index: 3;
  display: flex; flex-direction: column; align-items: flex-start; gap: .65rem; padding: 1rem; background: var(--ground);
  transform-origin: 0 0; transform: translateY(.5rem) scale(var(--s, 1)); transition: transform .45s var(--ease-out);
}
.proof.is-on .plate { transform: scale(var(--s, 1)); }
.plate img { display: block; width: 100%; outline: 1px solid var(--rim); outline-offset: -1px; }
.plate .was { opacity: .5; }
.plate--money img { border-radius: 10px; }
.plate--security .was { border-radius: 4px; }
.plate--security .now { width: 62%; border-radius: 8px; }
.plate--health img { aspect-ratio: 16 / 11; object-fit: cover; object-position: 50% 10%; border-radius: 10px; }
/* while a plate shows, Work recedes with the sentence, so its first frame doesn't stack against the plate */
#work { transition: opacity .3s var(--ease-out); }
@media (min-width: 900px) and (hover: hover) { .hero:has(.slot.is-peek) ~ #work { opacity: .28; } }
@media (max-width: 899px), (hover: none) { .plate { display: none; } }

/* ---------------------------------------------------------------- Home work
   The facts in one column, the product beside them. One frame size for every project: a desktop
   screen sits whole inside the ground; the phones rise from its lower edge at the same height. */
.proj { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); column-gap: var(--col-gap); align-items: start; }
.proj + .proj { margin-top: var(--space-entry); }
.proj-kick { display: flex; gap: .7rem; font-size: .9375rem; line-height: 1.4; color: var(--muted); }
.proj-kick .n { color: var(--ink); font-variant-numeric: tabular-nums; }
.proj h3 { margin-top: .75rem; font: 400 clamp(2rem, 1.2rem + 2.1vw, 3.1rem)/1.05 var(--serif); letter-spacing: -.016em; }
.proj h3 a { text-decoration-line: none; }
.proj-line { margin-top: .8rem; font: 400 clamp(1.3rem, 1.05rem + .65vw, 1.6rem)/1.3 var(--serif); letter-spacing: -.006em; text-wrap: balance; }
.proj-desc { margin-top: 1.4rem; color: var(--muted); text-wrap: pretty; }
.proj-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .55rem 1.25rem; margin-top: 1.6rem; font-size: .9375rem; line-height: 1.45; }
.proj-meta dt { color: var(--muted); }
.proj-meta dd { text-wrap: pretty; }
.proj-act { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin-top: 1.9rem; }
.proj-fig { min-width: 0; }
.proj-stage { display: block; position: relative; overflow: hidden; background: var(--ground); padding: 6.5%; cursor: pointer; }
.proj-stage .shot { display: block; width: 100%; aspect-ratio: 2200 / 1393; object-fit: cover; object-position: top; border-radius: 6px; outline: 1px solid var(--rim); outline-offset: -1px; }
.proj-stage--phones { display: flex; justify-content: center; align-items: flex-start; gap: 5%; aspect-ratio: 1 / .6808; padding-bottom: 0; }
.proj-stage--phones .phone { flex: none; width: 40%; border-radius: 9% / 4.2%; }
.proj-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1.5rem; margin-top: .9rem; font: 400 .9375rem/1.5 var(--sans); color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .proj-stage img { transition: transform .6s var(--ease-out); }
  .proj-stage img + img { transition-delay: .04s; }
  .proj-stage:hover img { transform: translateY(-.3rem); }
  .proj h3 a:hover { text-decoration-line: underline; text-decoration-thickness: .04em; text-underline-offset: .12em; }
  .proj:has(.proj-stage:hover) .proj-try { text-decoration-color: var(--accent); }
}
@media (max-width: 899px) {
  .proj { grid-template-columns: minmax(0, 1fr); }
  .proj-copy { max-width: var(--text); }
  .proj-fig { margin-top: 2.25rem; }
}
/* Section ends on home (All work, All writing): set like the case studies' Next case, with the same
   gap after the essays as after the projects, so All writing doesn't read as a fourth essay */
.all .role { margin-top: .45rem; }
.posts + .all { margin-top: var(--space-entry); }
.lead-link { text-wrap: balance; }
.lead-link a { text-decoration-color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .lead-link a:hover { text-decoration-color: var(--accent); } }
/* light-theme screenshots glare on the dark ground */
[data-theme="dark"] .plate img, [data-theme="dark"] .proj-stage img { filter: brightness(.88); }

/* ---------------------------------------------------------------- Try the product (home)
   On wide screens the prototype opens over the page, full window; elsewhere the link goes to it. */
.pd { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--bg); color: var(--ink); }
.pd[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); animation: pd-in .45s var(--ease-out); }
.pd::backdrop { background: var(--bg); }
@keyframes pd-in { from { opacity: 0; transform: translateY(.6rem); } }
.pd-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; padding: 1.15rem 1.5rem 1rem; color: var(--muted); }
.pd-head b { font-weight: 400; color: var(--ink); margin-right: .75rem; }
.pd-actions { display: flex; gap: 1.5rem; }
.pd-actions a, .pd-actions button { color: var(--ink); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: var(--faint); transition: text-decoration-color .2s ease; }
@media (hover: hover) and (pointer: fine) { .pd-actions button:hover { text-decoration-color: var(--accent); } }
.pd-stage { position: relative; margin: 0 1.5rem 1.5rem; background: var(--ground); }
.pd-wait { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); transition: opacity .3s ease; }
.pd-stage.is-loaded .pd-wait { opacity: 0; }
.pd-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
html.pd-open { overflow: hidden; }

/* ---------------------------------------------------------------- Case studies: the drawn figure that opens each one */
.fig.page-fig { margin-top: var(--space-block); }
.fig[data-fig] .figcap > span { text-wrap: pretty; }

/* ---------------------------------------------------------------- Fixes from the review
   Work index: a closed company's links leave the tab order (they were focusable at zero height) */
.js .tl-panel { visibility: hidden; transition: grid-template-rows .4s var(--ease-out), visibility 0s linear .4s; }
.js .is-open > .tl-panel { visibility: visible; transition: grid-template-rows .4s var(--ease-out), visibility 0s; }
@media print { .js .tl-panel { visibility: visible !important; } }
/* an h2 after a pull quote keeps the usual section gap */
.prose > blockquote + h2 { margin-top: clamp(3.5rem, 8vh, 5rem); }
/* focus moving down the page never lands on the bottom edge */
html { scroll-padding-bottom: 4rem; }
.lede { text-wrap: pretty; }
.nobr { white-space: nowrap; }
@media (max-width: 1099px) { .prose > .fig + .sec + h2 { margin-top: .5rem; } }
@media (max-width: 639px) {
  /* a prototype built for desktop says so before a phone opens it */
  a[data-fit="desktop"]::after { content: "\00a0(desktop)"; display: inline-block; color: var(--muted); }
}

/* ---------------------------------------------------------------- Small screens: fixes from the phone audit */
@media (max-width: 639px) {
  /* label/value pairs are wrapped in .row (display: contents), so "dd + dt" never matched: space each row from the last */
  .rows .row + .row > dt, .prose .ledger .row + .row > dt { margin-top: 1.1rem; }
  /* the prototype label takes its own line, instead of its description wrapping back under it */
  .proto-head b { display: block; margin: 0 0 .2rem; }
}
@media (max-width: 400px) {
  /* name and nav stay on one line down to 360px */
  .head { column-gap: 1rem; }
  .head ul { gap: .8rem; }
}
@media (max-width: 359px) { .head { font-size: .875rem; column-gap: .75rem; } .head ul { gap: .6rem; } }

@media (prefers-reduced-motion: reduce) {
  .plate { transition: none; transform: scale(var(--s, 1)); }
  .proj-stage img { transition: none; transform: none; }
  .pd[open] { animation: none; }
}
@media print { .plate, .pd { display: none !important; } }

/* theme toggle in the footer (16 Oct 2026): the OS setting decides by default; this is the override */
.foot-aside { display: flex; gap: .6rem; align-items: baseline; }
.foot-aside .theme { color: var(--muted); text-transform: lowercase; padding-block: .25rem; margin-block: -.25rem; transition: color .2s ease; }
@media (hover: hover) and (pointer: fine) { .foot-aside .theme:hover { color: var(--ink); } }
@media print { .foot-aside { display: none !important; } }

/* prototype overlay on phones (16 Oct 2026): full-bleed stage, tighter bar, dynamic viewport height */
.pd { height: 100dvh; }
@media (max-width: 639px) { .pd-head { padding: .7rem 1rem .6rem; font-size: .9375rem; } #pd-title { font-size: 0; } #pd-title .pd-name { font-size: .9375rem; margin-right: 0; } .pd-actions { gap: 1rem; } .pd-stage { margin: 0; } }