/* Geist 1.401 (SIL Open Font License, /assets/fonts/OFL.txt), one variable file per subset, weights 100 to 900 */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/geist-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/geist-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* metric-matched to Geist at 400 against Arial, so the text doesn't reflow when the font arrives */
@font-face{
  font-family:'Geist Fallback';
  src:local('Arial');
  size-adjust:105.69%;
  ascent-override:95.09%;
  descent-override:27.91%;
  line-gap-override:0.00%;
}


:root {
  --sk-hi: rgba(255, 255, 255, .6);   /* a loading placeholder's sweep */
  --ground: #eef3f8;
  --raise: #e2eaf3;
  --raise-2: #d6e1ee;
  --ink: #0b2545;
  --ink-2: #3c536f;
  --amber: #e3a55c;
  --amber-ink: #1b1207;
  --amber-hover: #f0b878;
  --amber-text: #8f520a;
  --drape: #3a5fbf;
  --drape-hi: #a9bdf0;
  --drape-lo: #223f8c;
  --neutral: #8a9bb0;
  --neutral-hi: #cdd6e1;
  --neutral-lo: #5b6c82;
  --track: #d3deeb;
  --track-hover: #c3d2e4;
  --line: #c4d2e3;
  --grid: #b4c4d8;
  --header-solid: #eef3f8;
  /* the particle eye's tissues: colour, then the share of grid points kept */
  --t-chamber: #b9d2e8 .45;
  --t-sclera: #5a7493 .97;
  --t-cornea: #86aed0 .95;
  --t-iris: #8d6a56 .9;
  --t-bleb: #7fb5e2 .55;
  --t-flap: #3f5a79 1;
  --t-tenon: #c2a78b .95;
  --t-conj: #d4847f .95;
  --t-film: #d98b30 1;
  --t-ciliary: #a07c6a .9;

  --amber-pale: #f6dcb8;
  --pic-ink: #f4f4f2;
  --pic-ink-2: #d0d3d8;
  --gutter: clamp(20px, 5vw, 64px);
  --s-small: 1rem;
  --s-body: clamp(1rem, .96rem + .2vw, 1.0625rem);
  --s-lead: clamp(1.125rem, 1.04rem + .38vw, 1.3125rem);
  --s-head: clamp(1.75rem, 1.28rem + 1.7vw, 2.75rem);
  --s-display: clamp(2.5rem, 1.7rem + 3vw, 4rem);
  --band: clamp(88px, 10vw, 152px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --font: "Geist", "Geist Fallback", "Helvetica Neue", Arial, sans-serif;
  --bar: var(--neutral-lo);          /* data bars on the light ground: 3.9:1 on the track */
  --focus: var(--ink);
  --error-bg: #fbe7e5;
  --error-ink: #8c1d18;
  color-scheme: light;
}
.n {
  --sk-hi: rgba(255, 255, 255, .07);
  --ground: #0c2238;
  --raise: #12304e;
  --raise-2: #183b5f;
  --ink: #eef3f8;
  --ink-2: #b6c6d8;
  --amber-text: var(--amber);
  --drape: #93acec;
  --drape-hi: #dbe4fb;
  --drape-lo: #5b77bd;
  --neutral: #8fa3bb;
  --neutral-hi: #cad6e4;
  --neutral-lo: #5d7290;
  --track: #1d3d61;
  --track-hover: #2a5281;
  --line: #2a4c74;
  --grid: #35587f;
  --bar: var(--neutral);
  --focus: var(--amber);
  color-scheme: dark;
}

/* ElutiMed: the clinical light ground with navy bands (.n), the film's amber and the drape's blue as highlights.
   Every colour is a token; text over a photograph or micrograph uses --pic-*. */
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 var(--s-body)/1.65 var(--font); -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .2em; }
b, strong { font-weight: 600; }
::selection { background: var(--amber); color: var(--amber-ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* over the hero's picture and the clear header the ring is the film's amber */
.xhero, .top:not(.is-solid):not(.top--solid) { --focus: var(--amber); }
[tabindex="-1"]:focus { outline: none; }
.ic { width: 1.1em; height: 1.1em; flex: none; }
h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -.03em; line-height: 1.08; text-wrap: balance; }
h2 { font-size: var(--s-head); }
h3 { font-size: var(--s-lead); letter-spacing: -.012em; line-height: 1.25; }
p { margin: 0; }
.wrap { padding-inline: var(--gutter); max-width: 1200px; margin-inline: auto; }
.band { background: var(--ground); color: var(--ink); padding-block: var(--band); }
.lede { margin-top: 20px; max-width: 54ch; font-size: var(--s-lead); line-height: 1.5; color: var(--ink-2); }
.cite { margin-top: 14px; font-size: var(--s-small); line-height: 1.5; color: var(--ink-2); max-width: 64ch; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 50; background: var(--ink); color: var(--ground); padding: 12px 16px; }
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 20px; background: var(--amber); color: var(--amber-ink); font: 600 var(--s-body) var(--font); text-decoration: none; border: 0; border-radius: 999px; cursor: pointer; transition: transform .2s var(--ease), background-color .2s; }
.btn:hover { background: var(--amber-hover); }
.btn:active { transform: translateY(1px); }
/* the key swatch is a small bead, shaded like the particles and the curve dots */
.chip { display: inline-block; width: 12px; height: 12px; flex: none; border-radius: 50%; background: radial-gradient(circle at 34% 30%, var(--hi), var(--c) 55%, var(--lo)); }
.chip.mmc { --c: var(--amber); --hi: #f7dcb4; --lo: #b9783a; }
.chip.fu { --c: var(--drape); --hi: var(--drape-hi); --lo: var(--drape-lo); }
.chip.film { --c: var(--neutral); --hi: var(--neutral-hi); --lo: var(--neutral-lo); }
/* the 1 µg film's curve: open markers, as the patent draws it */
.chip.mmc1 { background: none; border: 2px solid var(--amber); }
/* a chip beside text that may wrap sits on the first line */
.lane-row .chip, .dates .chip, .read .lab .chip, .curve-key .chip { align-self: flex-start; margin-top: calc(.5lh - 6px); }

/* the loading card: everything heavy is prepared behind it, then it slides away. The page doesn't scroll until then;
   scrollbar-gutter keeps the width steady when it does. A failsafe slides it away if the script never finishes. */
html.is-loading { overflow: hidden; }
.loader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--ground); color: var(--ink); transition: transform .8s var(--ease), visibility 0s linear .8s; animation: loader-failsafe .8s var(--ease) 12s forwards; }
.loader-card { display: grid; justify-items: center; gap: 14px; transition: opacity .3s var(--ease); }
.loader-mark svg { width: 56px; height: auto; }
.loader-word svg { height: 17px; width: auto; }
.loader-bar { margin-top: 10px; width: 180px; height: 3px; border-radius: 3px; background: var(--track); overflow: hidden; }
.loader-bar i { display: block; height: 100%; background: var(--amber); transform-origin: 0 50%; transform: scaleX(.08); transition: transform .45s var(--ease); }
.loader-say { min-height: 1.5em; font-size: var(--s-small); color: var(--ink-2); }
.loaded .loader { transform: translateY(-101%); visibility: hidden; }
.loaded .loader-card { opacity: 0; }
@keyframes loader-failsafe { to { transform: translateY(-101%); visibility: hidden; } }
/* the timed lift is only for a page whose scripts never ran; once loader.js runs, it lifts the card itself */
.card-run .loader { animation: none; }

/* header: clear over the hero, solid once the page moves */
.top { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; gap: 32px; padding: 14px var(--gutter); color: var(--pic-ink); transition: background-color .4s var(--ease), color .4s var(--ease); }
.top.is-solid { background: var(--header-solid); color: var(--ink); }
.in-hero .progress { opacity: 0; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-height: 44px; }
.brand .mark svg { width: 38px; height: auto; }
.brand .word svg { height: 16px; width: auto; }
.nav { margin-left: auto; display: flex; gap: 26px; align-items: center; font-size: var(--s-small); }
.nav a:not(.btn) { text-decoration: none; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; transition: color .2s; }
.nav a:not(.btn):hover { color: var(--amber-text); }
.top:not(.is-solid):not(.top--solid) .nav a:not(.btn):hover { color: var(--amber); }
.nav .btn { min-height: 44px; padding: 0 18px; font-size: var(--s-small); }
.progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 30; background: var(--amber); transform-origin: 0 50%; transform: scaleX(0); transition: opacity .3s; }

/* the home hero: a pinned stage with a photograph of water droplets on glass, the 3D film and the words, each
   layer moved by its own keyframes against the scroll (xhero.js); the photograph is */
.xhero { position: relative; height: 380vh; height: 380svh; padding: 0; color: #fff; --ink: #fff; --ink-2: rgba(255, 255, 255, .78); }
.xh-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #04070b; isolation: isolate; }
.xh-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xh-fill, .xh-layer, .xhero .stage3d { will-change: transform, opacity; }
.xh-layer { position: absolute; }
.xhero .stage3d { position: absolute; inset: 0; height: auto; z-index: 3; }
/* a soft shade under the menu, so its words read over a light micrograph */
.xh-stage::before { content: ""; position: absolute; z-index: 5; inset: 0 0 auto 0; height: 128px; background: linear-gradient(rgba(4, 7, 11, .62), rgba(4, 7, 11, 0)); pointer-events: none; }
.xh-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.xh-copy { z-index: 4; left: max(var(--gutter), calc((100vw - 1240px) / 2 + var(--gutter))); bottom: 9vh; bottom: 9svh; width: min(560px, calc(100vw - 2 * var(--gutter))); }
.xh-copy .h1-what { display: block; font-size: min(2.25rem, calc((100vw - 2 * var(--gutter)) / 13)); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; }
.xh-copy p { margin-top: 18px; max-width: 44ch; font-size: var(--s-lead); line-height: 1.45; color: rgba(255, 255, 255, .82); }
.xh-cap { z-index: 5; margin: 0; max-width: 46ch; font-size: var(--s-small); line-height: 1.45; color: rgba(255, 255, 255, .78); }
.xh-cap b { display: block; color: #fff; font-weight: 600; }
.xh-tags { z-index: 4; list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; pointer-events: none; }
.xh-tag { display: grid; grid-template-columns: 14px 1fr; gap: 4px 12px; align-items: baseline; color: rgba(255, 255, 255, .8); opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.xh-tag.on { opacity: 1; transform: none; }
.xh-tag .chip { grid-row: span 2; align-self: start; margin-top: .35em; }
.xh-tag b { font-size: var(--s-lead); color: #fff; font-weight: 600; }
.xh-tag:nth-child(2) { transition-delay: .15s; }
.xh-veil { position: absolute; inset: 0; z-index: 6; background: #000; opacity: 0; pointer-events: none; }
.xhero .end-line { z-index: 7; color: #fff; opacity: 0; }
.xh-copy .h1-name { display: block; margin-bottom: .08em; font-size: min(6.5rem, 8vw); letter-spacing: -.045em; line-height: .95; }
/* option 1: the film in front of the 1978 surgery photograph */
/* the photograph stays visible: darkened only under the words on the left and along the top (the menu); the film
   sits on the right half, level with its name */
.sx-scrim { background:
  linear-gradient(90deg, rgba(4, 7, 11, .92), rgba(4, 7, 11, .8) 30%, rgba(4, 7, 11, .55) 44%, rgba(4, 7, 11, .14) 54%, rgba(4, 7, 11, 0) 62%),
  linear-gradient(180deg, rgba(4, 7, 11, .6), rgba(4, 7, 11, 0) 22%); }
.xhero .sx-film { inset: 18vh 1vw 2vh 44vw; inset: 18svh 1vw 2svh 44vw; }   /* level with the name, on the right half */
.sx-media { overflow: hidden; background: #04070b; }
.sx-copy p { max-width: 38ch; }   /* line ends stay in the dark, off the lit drape */
.sx-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.sx-place { left: 0; right: 0; top: 12vh; top: 12svh; margin: 0 auto; text-align: center; max-width: 50ch; padding-inline: var(--gutter); }
/* the layer labels sit right beside the split film, right-aligned with their dots toward it, each level with its own
   layer (measured mid-scroll at 1290 x 725 and 1440 x 900: the film's left edge sits near 43 to 45vw) */
.sx-tags { left: auto; right: 58.5vw; top: 35vh; top: 35svh; bottom: auto; align-content: start; gap: 12vh; gap: 12svh; width: min(380px, 30vw); text-align: right; }
.sx-tags .xh-tag { grid-template-columns: 1fr 14px; }
.sx-tags .xh-tag .chip { grid-column: 2; grid-row: 1 / span 2; }
.sx-tags .xh-tag b, .sx-tags .xh-tag span:not(.chip) { grid-column: 1; }
/* the fanned deck (data-fx-scope, xhero.js): the film's real pictures stacked like prints, fanning out to the right of the
   text as the section passes; each card names what it shows */
.deck { position: relative; height: 240vh; height: 240svh; padding: 0; }
.dk-stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; display: flex; align-items: center; padding-top: 72px; box-sizing: border-box; }
.dk-copy { position: relative; z-index: 2; width: min(480px, 37vw); margin-left: max(var(--gutter), calc((100vw - 1200px) / 2 + var(--gutter))); }
.dk-cards { position: absolute; inset: 0; pointer-events: none; }
/* the spread is sized so its first card always clears the text column (checked from 1000 to 1920 px wide) */
.dk-card { position: absolute; left: 70%; top: calc(50% + 36px); width: clamp(140px, 13vw, 200px); margin: 0; translate: -50% -50%; pointer-events: auto; }
.dk-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--raise); box-shadow: 0 24px 50px rgba(0, 0, 0, .45); }
.dk-card figcaption { margin-top: 10px; font-size: var(--s-small); line-height: 1.4; color: var(--ink-2); }
.dk-card figcaption b { display: block; color: var(--ink); font-weight: 600; }
.dk-c1 { z-index: 5; } .dk-c2 { z-index: 4; } .dk-c3 { z-index: 3; } .dk-c4 { z-index: 2; } .dk-c5 { z-index: 1; }
/* a short desk window (640px and less tall): the text column tightens so its link stays on the pinned stage */
@media (min-width: 961px) and (max-height: 700px) { .dk-copy .lede { margin-top: 12px; } .dk-copy .cite { margin-top: 8px; } .dk-copy .more { margin-top: 14px; } }
/* the hero's last beat: the picture goes to black and one line is left */
.end-line { position: absolute; z-index: 2; inset: auto 0 50% 0; transform: translateY(50%); margin: 0 auto; max-width: 36ch; padding-inline: var(--gutter); text-align: center; text-wrap: balance;
  font-size: min(2.125rem, calc((100vw - 2 * var(--gutter)) / 17.5)); font-weight: 500; letter-spacing: -.025em; line-height: 1.15; color: var(--pic-ink); opacity: 0; visibility: hidden; pointer-events: none; }
.go { margin-top: 28px; display: inline-flex; gap: 10px; align-items: center; color: var(--amber); font-weight: 600; min-height: 44px; text-decoration: none; }
.go:hover { text-decoration: underline; }
/* the arrow nudges sideways every few seconds while the hero is at rest (Adam, Oct 21 2026): it starts once the loading
   card has lifted, and stops once the page scrolls, on hover and focus, and under reduced motion */
.go .ic { animation: nudge 3.6s var(--ease) .8s infinite both; }
html.is-loading .go .ic, .xhero.moved .go .ic, .go:hover .ic, .go:focus-visible .ic { animation: none; }
@keyframes nudge { 0%, 34%, 100% { transform: translateX(0); } 9% { transform: translateX(7px); } 18% { transform: translateX(0); } 26% { transform: translateX(3px); } }
.zoom-cap .credit { display: flex; gap: 8px; align-items: center; }
.zoom-cap .credit img { height: 15px; width: auto; }
.zoom-cap .credit a { display: inline-flex; align-items: center; min-height: 44px; color: var(--pic-ink-2); }
.playpause { position: absolute; z-index: 3; right: var(--gutter); bottom: 18px; width: 44px; height: 44px; display: grid; place-items: center; background: rgba(255, 255, 255, .14); color: var(--pic-ink); border: 0; border-radius: 50%; cursor: pointer; transition: background-color .2s, opacity .3s; }
.playpause:hover { background: rgba(255, 255, 255, .28); }
.playpause span { display: grid; }
.playpause[data-playing="true"] .i-play, .playpause:not([data-playing="true"]) .i-pause { display: none; }

/* the problem */
.problem .grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.problem .bridge { margin-top: 28px; max-width: 46ch; font-weight: 500; }
.trials { display: grid; gap: 24px; }
.trials h3 { font-size: var(--s-body); font-weight: 600; letter-spacing: 0; }
.trials .note, .study .note { font-size: var(--s-small); line-height: 1.5; color: var(--ink-2); max-width: 64ch; }
.study .note { margin-top: 18px; }
.trial { display: grid; gap: 8px; }
.trial > b { font-size: var(--s-small); }
.arm { display: grid; grid-template-columns: minmax(0, 12rem) 1fr 4rem; gap: 14px; align-items: center; font-size: var(--s-small); }
.arm .track { height: 12px; background: var(--track); border-radius: 999px; overflow: hidden; }
.arm .track i { display: block; height: 100%; background: var(--bar); border-radius: 999px; transform-origin: 0 50%; }
.arm:nth-of-type(2) .track i { background: var(--ink); }
.arm .val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* breath-figure casting: the specimen closes into a captioned plate */
.shrink { position: relative; height: 220vh; height: 220svh; }
.shrink .pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.shrink.has-zoom { height: 300vh; height: 300svh; }
.shrink .zoom { position: absolute; inset: 0; z-index: 3; background: #000; color: var(--pic-ink); }
.shrink .zoom::after { content: ""; position: absolute; inset: auto 0 0 0; height: 46%; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .72)); pointer-events: none; }
.zoom-cap { position: absolute; z-index: 1; left: max(var(--gutter), calc((100vw - 1200px) / 2 + var(--gutter))); right: 88px; bottom: 22px; margin: 0; max-width: 52ch; font-size: var(--s-small); line-height: 1.45; color: var(--pic-ink-2); display: grid; gap: 4px; }
.zoom-cap b { color: var(--pic-ink); font-weight: 600; }
.zoom .playpause { z-index: 2; }
html:not(.js) .shrink .zoom { display: none; }
.shrink .full { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 0 0 0); }
.shrink .words { position: absolute; z-index: 2; left: max(var(--gutter), calc((100vw - 1200px) / 2 + var(--gutter))); top: 50%; transform: translateY(-50%); width: min(34%, 420px); }
.js .shrink .words, .js .shrink .pin > .cap { opacity: 0; }
.shrink .words p { margin-top: 20px; color: var(--ink-2); }
/* the caption sits under the words; on a desk the script moves it under the plate */
.shrink .words .cap { margin-top: 12px; font-size: var(--s-small); color: var(--ink-2); }
.shrink .pin > .cap { position: absolute; z-index: 2; margin: 0; font-size: var(--s-small); color: var(--ink-2); max-width: 64ch; text-align: right; }

/* the film in 3D: one 13 mm disc that comes apart into its two layers as it passes */
.disc3d .grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.stage3d { position: relative; height: clamp(300px, 38vw, 500px); }
.stage3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage3d .fallback { position: absolute; inset: 8% 4%; display: none; }
.stage3d .fallback img { width: 100%; height: 100%; object-fit: contain; }
.disc3d.no-gl .fallback, html:not(.js) .stage3d .fallback { display: block; }
/* each layer as a ruled point, led by its own micrograph; the ring takes the layer's drug colour once they part */
.legend3d { list-style: none; margin: 28px 0 0; padding: 0; border-top: 2px solid var(--line); }
.tag3d { display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: center; padding: 16px 0; border-bottom: 2px solid var(--line); }
.tag3d .thumb { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; outline: 2px solid var(--line); outline-offset: 2px; transition: outline-color .5s var(--ease); }
.tag3d:nth-child(1).on .thumb { outline-color: var(--amber); }
.tag3d:nth-child(2).on .thumb { outline-color: var(--drape); }
.tag3d p { color: var(--ink-2); line-height: 1.5; }
.tag3d b { display: block; color: var(--ink); }
.tag3d small { display: block; margin-top: 4px; font-size: var(--s-small); }
/* the real film, laid over the model's corner */
.photo-inset { position: absolute; right: 0; bottom: 0; z-index: 2; width: min(200px, 40%); margin: 0; padding: 8px 8px 10px; background: var(--raise); border-radius: 16px; }
.photo-inset img { width: 100%; aspect-ratio: 609 / 314; object-fit: cover; border-radius: 10px; }
.photo-inset figcaption { margin-top: 8px; padding-inline: 4px; font-size: var(--s-small); line-height: 1.35; color: var(--ink-2); }

/* the eye in particles: the film thins away over three months, then the drawing itself drifts off */
.eyefield { position: relative; height: 380vh; height: 380svh; }
.eyefield .pin { position: sticky; top: 0; min-height: 100vh; min-height: 100svh; display: grid; align-content: center; padding-block: 80px 8px; }
.eyefield .grid { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.field { position: relative; aspect-ratio: 720 / 330; }
.canvas-box { position: absolute; inset: 0; }
/* on a desk the drawing runs past the column to the edge of the screen */
@media (min-width: 961px) {
  .eyefield { overflow-x: clip; }
  .canvas-box { right: calc(-1 * max(var(--gutter), (100vw - 1200px) / 2 + var(--gutter))); }
}
.canvas-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }
/* which way is which: the front of the eye (the cornea) runs off to the left, the back to the right */
.eye-dir { position: absolute; z-index: 1; top: 0; margin: 0; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--raise); color: var(--ink); font-size: var(--s-small); font-weight: 500; transition: opacity .3s; }
.eye-dir .term { color: var(--ink-2); font-weight: 400; white-space: pre; }
.eye-dir .ic { width: 1em; height: 1em; flex: none; }
.eye-dir.front { left: 0; }
.eye-dir.back { right: 0; }
/* where the drawing sits on the whole eye: a side view with the cut boxed in amber, in the drawing's empty lower right */
.eye-where { position: absolute; z-index: 1; right: 0; bottom: 0; margin: 0; display: grid; grid-template-columns: auto clamp(96px, 12vw, 132px); align-items: center; gap: 12px; text-align: right; transition: opacity .3s; }
.eye-where svg { grid-column: 2; grid-row: 1; width: 100%; height: auto; overflow: visible; }
.eye-where figcaption { grid-column: 1; grid-row: 1; max-width: 9.5em; font-size: var(--s-small); line-height: 1.35; color: var(--ink-2); }
.ew-sclera, .ew-cornea, .ew-iris, .ew-lens, .ew-nerve { stroke: var(--neutral-lo); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ew-sclera { fill: var(--raise); }
.ew-cornea, .ew-iris, .ew-nerve { fill: none; }
.ew-lens { fill: var(--raise-2); }
.ew-here { fill: none; stroke: var(--amber); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
/* the three months as a track under the drawing: today's day, the latest milestone, a bead that moves with the scroll */
.eye-time { margin-top: 12px; transition: opacity .3s; }
.et-head { min-height: 3.1em; }
.field-day { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.et-now { margin: 2px 0 0; font-size: var(--s-small); line-height: 1.4; color: var(--ink-2); }
.et-line { position: relative; margin: 10px 8px 0; }
.et-track { position: absolute; left: 0; right: 0; top: 5px; height: 4px; border-radius: 2px; background: var(--track); }
.et-fill { position: absolute; inset: 0; border-radius: inherit; background: var(--amber); transform: scaleX(0); transform-origin: left; }
.et-knob { position: absolute; top: 50%; left: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #f7dcb4, var(--amber) 55%, #b9783a); box-shadow: 0 0 0 3px var(--ground); }
.tags { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; transition: opacity .3s; }
.tags button { min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font: 500 var(--s-small) var(--font); white-space: nowrap; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.tags button:hover { border-color: var(--ink-2); }
.tags button[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); }
.eye-say { margin-top: 16px; max-width: 62ch; min-height: 4.95em; color: var(--ink-2); transition: opacity .3s; }
.eye-say b { color: var(--ink); }
.steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 4px; position: relative; }
.steps li > * { grid-column: 2; }
.steps::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 14px; width: 2px; background: var(--track); }
.steps li { position: relative; display: grid; grid-template-columns: 12px 1fr; gap: 0 16px; padding: 6px 0; color: var(--ink-2); transition: color .3s; }
.steps li::before { content: ""; width: 12px; height: 12px; margin-top: .45em; border-radius: 50%; background: radial-gradient(circle at 34% 30%, var(--neutral-hi), var(--neutral) 55%, var(--neutral-lo)); transition: transform .3s var(--ease); }
.steps li.on { color: var(--ink); }
.steps li.on::before { background: radial-gradient(circle at 34% 30%, #f7dcb4, var(--amber) 55%, #b9783a); transform: scale(1.3); }
.steps b { display: block; color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .js .eye-time .steps { display: block; height: 44px; margin: 0; }
  .js .eye-time .steps::before { display: none; }
  .js .eye-time .steps li { position: absolute; top: 0; display: grid; justify-items: center; gap: 8px; padding: 0; transform: translateX(-50%); }
  .js .eye-time .steps li:first-child { justify-items: start; transform: translateX(-6px); }
  .js .eye-time .steps li:last-child { justify-items: end; transform: translateX(calc(-100% + 6px)); }
  .js .eye-time .steps li::before { margin: 1px 0 0; }
  .js .eye-time .steps li > * { grid-column: 1; }
  .js .eye-time .steps b { font-size: var(--s-small); font-weight: 500; color: var(--ink-2); white-space: nowrap; transition: color .3s; }
  .js .eye-time .steps li.on b { color: var(--ink); }
  .js .eye-time .steps span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* Day 0 and Day 1 sit close on a narrow track; the heading already says day 0, so its tick keeps no words */
  @media (max-width: 600px) { .js .eye-time .steps li:first-child b { color: transparent; } }
}
@media (prefers-reduced-motion: reduce) { .et-track, .et-now { display: none; } .et-head { min-height: 0; } }

/* release and breakdown, to scale, with the bench they were measured on */
.scale-head { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.bench-fig { margin: 0; }
.bench-fig svg { width: 100%; height: auto; display: block; }
.bench-fig figcaption { margin-top: 4px; font-size: var(--s-small); color: var(--ink-2); text-align: right; }
svg.iso-svg.paused * { animation-play-state: paused !important; }
.lanes { margin-top: 64px; display: grid; gap: 22px; }
.lane-row { display: grid; grid-template-columns: minmax(0, 15rem) 1fr; gap: 24px; align-items: center; }
.lane-row p { display: flex; gap: 12px; align-items: baseline; line-height: 1.35; font-size: var(--s-small); }
.lane { position: relative; height: 28px; background: var(--raise); border-radius: 6px; overflow: hidden; }
.lane i { position: absolute; top: 0; bottom: 0; border-radius: 6px; transform-origin: 0 50%; }
/* one day on a 90-day axis: kept at a width that still reads */
.lane.mmc i { background: var(--amber); min-width: 8px; }
.lane.fu i { background: var(--drape); }
.lane.film i { background: var(--bar); }
/* the one-day lane keeps a darker amber edge where the ground is light */
.band:not(.n) .lane.mmc i { outline: 2px solid var(--amber-text); outline-offset: -2px; }
.ticks-row { display: grid; grid-template-columns: minmax(0, 15rem) 1fr; gap: 24px; }
.ticks { position: relative; height: 56px; }
.ticks span { position: absolute; top: 0; padding-top: 14px; font-size: var(--s-small); font-weight: 600; white-space: nowrap; transform: translateX(-50%); text-align: center; line-height: 1.3; }
.ticks span::before { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 8px; background: var(--ink-2); transform: translateX(-50%); }
.ticks span:first-child { transform: none; text-align: left; }
.ticks span:first-child::before { left: 0; transform: none; }
.ticks span:last-child { transform: translateX(-100%); text-align: right; }
.ticks span:last-child::before { left: auto; right: 0; transform: none; }
.ticks small { display: block; font-size: var(--s-small); font-weight: 400; color: var(--ink-2); }
.dates-wrap { margin-top: 56px; display: grid; grid-template-columns: 4fr 8fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.dates-wrap label { display: grid; gap: 10px; font-weight: 600; }
.dates-wrap input { font: 500 var(--s-lead) var(--font); color: var(--ink); background: var(--raise); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; min-height: 52px; max-width: 16rem; }
.dates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dates div { background: var(--raise); padding: 20px 20px 22px; border-radius: 16px; display: grid; gap: 8px; align-content: start; }
.dates b { font-size: var(--s-lead); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; }
.dates span { display: flex; gap: 10px; align-items: baseline; font-size: var(--s-small); color: var(--ink-2); }

/* day by day */
.board-day { margin-top: 48px; display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.viewer { position: relative; aspect-ratio: 4 / 3; background: #000; border-radius: 16px; overflow: hidden; }
.viewer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s var(--ease); }
.viewer img.on { opacity: 1; }
.viewer .none { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 32px; color: var(--pic-ink); font-size: var(--s-lead); opacity: 0; transition: opacity .5s var(--ease); }
.viewer .none.on { opacity: 1; }
.vcap { margin-top: 12px; font-size: var(--s-small); color: var(--ink-2); min-height: 3.2em; }
.daynum { font-size: var(--s-display); font-weight: 400; letter-spacing: -.04em; line-height: .95; font-variant-numeric: tabular-nums; }
.daystate { margin-top: 14px; line-height: 1.5; min-height: 3.3em; color: var(--ink-2); }
.read { margin-top: 28px; display: grid; gap: 18px; }
.read .row { display: grid; gap: 8px; }
.read .lab { display: flex; justify-content: space-between; gap: 16px; font-size: var(--s-small); font-weight: 500; }
.read .lab span { display: flex; gap: 10px; align-items: baseline; }
.read .lab b { font-variant-numeric: tabular-nums; }
.meter { height: 10px; background: var(--track); border-radius: 999px; overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 999px; transform-origin: 0 50%; transform: scaleX(0); transition: transform .4s var(--ease); }
.meter.mmc i { background: var(--amber); }
.meter.fu i { background: var(--drape); }
.read .past { display: none; font-size: var(--s-small); color: var(--ink-2); }
.read .row.is-past .past { display: block; }
.read .row.is-past .meter i { opacity: .45; }
.curves { margin: 56px 0 0; }
.chart-title { font-weight: 600; }
.curve-key { list-style: none; margin: 10px 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 32px; font-size: var(--s-small); color: var(--ink-2); }
.curve-key li { display: flex; gap: 10px; align-items: baseline; }
.curve-key b { color: var(--ink); }
.curves .plot { position: relative; height: clamp(220px, 26vw, 340px); }
.curves svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.curves .grid circle { fill: var(--grid); }
.curves .dots circle { opacity: 0; transition: opacity .35s var(--ease); }
.curves.drawn .dots circle { opacity: 1; }
.curves .dots.mmc circle, .curves .mark.mmc { fill: url(#bead-mmc); }
.curves .dots.fu circle, .curves .mark.fu { fill: url(#bead-fu); }
.curves .mark { stroke: var(--ground); stroke-width: 3; }
.curves .dots.mmc1 circle, .curves .mark.mmc1 { fill: var(--ground); stroke: var(--amber); stroke-width: 2; }
.curves .cursor { stroke: var(--ink-2); stroke-width: 2; stroke-linecap: round; }
.ylab { position: absolute; left: 0; transform: translateY(-130%); font-size: var(--s-small); color: var(--ink-2); }
.xlabs { position: relative; height: 30px; margin-top: 12px; }
.xlabs span { position: absolute; top: 0; transform: translateX(-50%); font-size: var(--s-small); color: var(--ink-2); white-space: nowrap; }
.xlabs span:first-child { transform: none; }
.xlabs span:last-child { transform: translateX(-100%); }
.scrub { margin-top: 40px; }
.scrub input { width: 100%; height: 44px; accent-color: var(--amber); cursor: pointer; }
.stops { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.stops button, .pick button { min-height: 44px; min-width: 64px; padding: 0 16px; background: var(--track); color: var(--ink); border: 0; border-radius: 999px; font: 500 var(--s-small) var(--font); cursor: pointer; transition: background-color .2s, color .2s; }
.stops button:hover, .pick button:hover { background: var(--track-hover); }
.stops button[aria-pressed="true"], .pick button[aria-pressed="true"] { background: var(--amber); color: var(--amber-ink); }

/* placement */
.where { --photo-h: clamp(320px, 52vh, 540px);   /* vh, not svh: a custom property can't carry a fallback */ position: relative; padding-block: 0 var(--band); }
.where .photo { position: relative; height: var(--photo-h); overflow: hidden; color: var(--pic-ink); }
.where .photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.where .photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .08) 40%, rgba(0, 0, 0, .82) 100%); }
.where .photo .wrap { position: absolute; z-index: 2; inset: auto 0 44px; display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.where .title { max-width: 16ch; }
/* one caption: over the photo's foot on a desk, under the photo on a phone */
.where .pcap { position: absolute; z-index: 3; top: calc(var(--photo-h) - 44px); right: 0; left: 0; transform: translateY(-100%); display: flex; justify-content: flex-end; pointer-events: none; font-size: var(--s-small); color: var(--pic-ink-2); text-align: right; }
.where .pcap > span { max-width: 34ch; }
.sites { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); padding-top: 56px; }
.sites figure { margin: 0 0 20px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--raise); border-radius: 16px; }
.sites figure img { width: 100%; height: 100%; object-fit: cover; }
.sites h3 { font-size: var(--s-body); font-weight: 600; letter-spacing: 0; }
.sites p { margin-top: 8px; color: var(--ink-2); }

/* results */
/* each study: its number and its picture in one column, the reading in the other, sides alternating down the page;
   where the screen is tall enough the number and picture stay in view while the text beside them scrolls */
.study { margin-top: 72px; display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.study + .study { padding-top: 72px; border-top: 1px solid var(--line); }
.study.flip { grid-template-columns: 7fr 5fr; }
.study.flip .aside { order: 2; }
.study .aside { display: grid; gap: 32px; align-content: start; }
.study .aside .ref-fig { margin: 0; }
.study .aside .ref-fig img { max-width: 100%; }
.study .aside .ref-fig img.fig20 { width: auto; max-width: 100%; max-height: min(46vh, 420px); max-height: min(46svh, 420px); }
.study .text .ref-fig img { max-width: 460px; }
@media (min-width: 961px) and (min-height: 760px) { .study .aside { position: sticky; top: 104px; } }
.study .count { font-size: var(--s-display); font-weight: 300; letter-spacing: -.05em; line-height: .9; font-variant-numeric: tabular-nums; }
.study .what { margin-top: 12px; font-weight: 500; }
.study .who { margin-top: 4px; font-size: var(--s-small); color: var(--ink-2); }
.study .text h3 + p { margin-top: 14px; }
.study .text p { color: var(--ink-2); }
.study .text p + p { margin-top: 12px; }
.cut { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 9.5rem) 1fr; gap: 28px; align-items: center; padding: 24px; background: var(--raise); border-radius: 20px; }
.cut svg { width: 100%; height: auto; }
.cut .piece { fill: var(--amber); }
.cut .ghost { fill: var(--track); }
.pick { display: flex; flex-wrap: wrap; gap: 8px; }
.cut dl { margin: 18px 0 0; display: grid; grid-template-columns: repeat(3, auto); gap: 4px 28px; justify-content: start; }
.cut dt { font-size: var(--s-small); color: var(--ink-2); }
.cut dd { margin: 0; font-weight: 600; }
.cut .said { margin-top: 12px; }
.bars { margin-top: 18px; display: grid; gap: 12px; }
.bars-title { margin-top: 28px; font-weight: 600; color: var(--ink) !important; }
.bar { display: grid; grid-template-columns: minmax(0, 14rem) 1fr 4.5rem; gap: 16px; align-items: center; font-size: var(--s-small); transition: opacity .3s; }
.bar .track { height: 12px; background: var(--track); border-radius: 999px; overflow: hidden; }
.bar .track i { display: block; height: 100%; background: var(--bar); border-radius: 999px; transform-origin: 0 50%; }
.bar.film .track i { background: var(--drape); }
.bar .val { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.bars[data-focus] .bar:not(.on) { opacity: .5; }

/* compared with today's standard */
.tablewrap { margin-top: 44px; overflow-x: auto; }
.compare table { width: 100%; border-collapse: collapse; min-width: 640px; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.compare thead th { font-size: var(--s-small); color: var(--ink-2); font-weight: 400; border-bottom: 2px solid var(--ink); }
.compare thead th b { display: block; color: var(--ink); font-size: var(--s-body); font-weight: 600; margin-bottom: 2px; }
.compare tbody th { width: 18%; font-weight: 600; }
.compare td small { display: block; margin-top: 6px; color: var(--ink-2); font-size: var(--s-small); }
.compare td.film { background: var(--raise); }

/* publications and patents */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 12px; }
/* width: 100% keeps every tile in its column: with only aspect-ratio, a tile that text makes taller grows wider to keep 3:2 and slides under its neighbour */
.tiles > * { min-width: 0; width: 100%; justify-self: stretch; aspect-ratio: 3 / 2; align-self: stretch; background: var(--raise); padding: 28px 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; border-radius: 18px; text-decoration: none; transition: background-color .2s, color .2s, transform .2s var(--ease); }
/* the heading tile is the film's full amber; a tile under the pointer steps up one shade and its year (or patent number) turns amber, so the heading stays the strongest */
.tiles a:hover { background: var(--raise-2); transform: translateY(-2px); }
.tiles a:hover .yr, .tiles a:not(.paper):hover .txt b { color: var(--amber-text); }
.tiles .lead { grid-column: span 2; aspect-ratio: auto; background: var(--amber); color: var(--amber-ink); justify-content: space-between; }
.tiles .lead p { margin-top: 14px; max-width: 44ch; font-weight: 500; }
.flag { align-self: flex-start; display: inline-flex; }
.flag img { height: 22px; width: auto; border-radius: 3px; }
.tiles .paper .yr { font-size: var(--s-head); font-weight: 300; letter-spacing: -.04em; line-height: .9; color: var(--ink-2); transition: color .2s; }
.tiles .txt b { display: block; font-weight: 600; line-height: 1.25; transition: color .2s; }
.tiles .txt span { display: block; margin-top: 4px; font-size: var(--s-small); line-height: 1.4; color: var(--ink-2); transition: color .2s; }
.origins { margin-top: 88px; display: grid; grid-template-columns: 4fr 8fr; gap: clamp(28px, 5vw, 80px); }
.places { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.place { background: var(--raise); padding: 24px; border-radius: 18px; display: grid; gap: 14px; align-content: start; }
.place .logo-mark { height: 52px; display: flex; align-items: center; }
.place .logo-mark img { height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.place b { font-size: var(--s-body); }
.place p { color: var(--ink-2); }

/* people */
/* the team: two equal profiles side by side, portrait, name, role, facts and their own links (Adam, Oct 22 2026: Diana
   "needs a bigger role ... not just a footnote") */
.leads { margin-top: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 96px); align-items: start; }
.lead figure { margin: 0; width: min(240px, 70%); }
.lead figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; filter: grayscale(1) contrast(1.04); }
.lead h3 { margin-top: 22px; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -.02em; line-height: 1.15; }
.leads--short .lead figure { width: min(200px, 60%); }
.follows { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.follows .follow { margin-top: 0; }
.team .role { margin-top: 6px; font-size: var(--s-lead); color: var(--ink-2); }
.team .line { margin-top: 12px; max-width: 52ch; }
.follow { margin-top: 36px; display: inline-flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 18px 0 12px; background: var(--raise); border-radius: 999px; text-decoration: none; font-weight: 500; transition: background-color .2s; }
.follow:hover { background: var(--raise-2); }
.follow img { height: 24px; width: auto; }

/* questions */
.faq .wrap { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.faq h2 { position: sticky; top: 100px; }
.qs { display: grid; gap: 8px; }
details { background: var(--raise); border-radius: 18px; transition: background-color .25s; }
details[open] { background: var(--raise-2); }
summary { list-style: none; cursor: pointer; min-height: 64px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-weight: 500; }
summary::-webkit-details-marker { display: none; }
summary .sign { position: relative; width: 14px; height: 14px; flex: none; color: var(--amber-text); }
summary .sign::before, summary .sign::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s var(--ease); }
summary .sign::after { transform: rotate(90deg); }
details[open] summary .sign::after { transform: rotate(0deg); }
details p { padding: 0 24px 24px; max-width: 62ch; color: var(--ink-2); }

/* contact */
.contact .grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 80px); }
form { display: grid; gap: 14px; }
label { font-weight: 600; font-size: var(--s-small); display: grid; gap: 6px; }
form input, form select, form textarea { font: inherit; font-size: var(--s-body); font-weight: 400; color: var(--ink); background: var(--raise); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; min-height: 50px; transition: border-color .2s; }
form input:focus, form select:focus, form textarea:focus { border-color: var(--amber); outline: none; }
form textarea { min-height: 132px; resize: vertical; }
form .btn { justify-self: start; margin-top: 6px; }
.sent { min-height: 1.5em; font-weight: 600; }

/* footer: the name, set wide */
.foot { padding-block: 80px 32px; }
.foot .bigmark svg { width: min(100%, 860px); height: auto; color: var(--ink); }
.foot .cols { margin-top: 48px; display: grid; grid-template-columns: 2fr 1fr 1fr 2.4fr; gap: 32px; font-size: var(--s-small); color: var(--ink-2); }
.foot .cols p + p { margin-top: 10px; }
.foot .cols a { display: inline-flex; min-height: 44px; align-items: center; gap: 10px; color: var(--ink); }
.foot .cols a img { height: 20px; width: auto; }
.foot .cc { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.foot .cc img { height: 20px; width: auto; }
.foot .cc a { min-height: 44px; display: inline-flex; align-items: center; }
.foot .draft-line { margin-top: 40px; font-size: var(--s-small); color: var(--ink-2); }
.totop { position: fixed; right: var(--gutter); bottom: 22px; z-index: 15; width: 48px; height: 48px; display: grid; place-items: center; background: var(--raise); color: var(--ink); border: 1px solid var(--line); border-radius: 50%; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .3s, transform .2s var(--ease); }
.totop.show { opacity: 1; pointer-events: auto; }
.totop:hover { transform: translateY(-2px); }

/* entrances: only when script runs, only below the fold */
.js .pre { opacity: 0; transform: translateY(18px); }
.js .pre.in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .pre.in:nth-child(2) { transition-delay: 70ms; }
.js .pre.in:nth-child(3) { transition-delay: 140ms; }
/* bars grow only where they enter below the first screen; anything already in view is drawn at once */
.js .grow.pre i { transform: scaleX(0); }
.js .grow.pre.in i { transform: scaleX(1); transition: transform 1.1s var(--ease); }
.js .grow.pre.in > :nth-child(2) i, .js .trial.grow.pre.in .arm:nth-of-type(2) i { transition-delay: .2s; }
.js .grow.pre.in > :nth-child(3) i { transition-delay: .4s; }
.js .grow.pre.in > :nth-child(4) i { transition-delay: .6s; }

/* on a phone or tablet the drawing, its timeline and labels pin as one scene while the months run, where the
   screen is tall enough to hold them */
@media (max-width: 960px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  .js .eye-stage { height: 250vh; height: 250svh; }
  .js .eye-stick { position: sticky; top: 76px; }
}
/* the particle section pins only where its two columns fit one screen */
@media (max-width: 960px), (max-height: 680px) {
  .eyefield { height: auto; }
  .eyefield .pin { position: relative; min-height: 0; padding-block: var(--band); }
}
@media (max-width: 960px) {
  .xh-copy { left: var(--gutter); right: var(--gutter); width: auto; bottom: 7vh; bottom: 7svh; }
  .xh-copy .h1-name { font-size: min(4.5rem, 16vw); }
  .xhero .sx-film { inset: 190px 0 36% 0; }
  .sx-scrim { background: radial-gradient(ellipse 60vw 22vh at 50% 36%, rgba(4, 7, 11, .7), rgba(4, 7, 11, 0) 100%),
    linear-gradient(0deg, rgba(4, 7, 11, .96), rgba(4, 7, 11, .86) 38%, rgba(4, 7, 11, 0) 64%),
    linear-gradient(180deg, rgba(4, 7, 11, .85), rgba(4, 7, 11, .4) 18%, rgba(4, 7, 11, 0) 30%); background: radial-gradient(ellipse 60vw 22svh at 50% 36%, rgba(4, 7, 11, .7), rgba(4, 7, 11, 0) 100%),
    linear-gradient(0deg, rgba(4, 7, 11, .96), rgba(4, 7, 11, .86) 38%, rgba(4, 7, 11, 0) 64%),
    linear-gradient(180deg, rgba(4, 7, 11, .85), rgba(4, 7, 11, .4) 18%, rgba(4, 7, 11, 0) 30%); }
  .sx-tags { top: auto; bottom: 9vh; bottom: 9svh; left: var(--gutter); right: var(--gutter); width: auto; gap: 20px; text-align: left; }
  .sx-tags .xh-tag { grid-template-columns: 14px 1fr; }
  .sx-tags .xh-tag .chip { grid-column: 1; }
  .sx-tags .xh-tag b { grid-column: 2; }
  .sx-place { top: auto; bottom: 30vh; bottom: 30svh; }
  .deck { height: auto; padding-block: var(--band); }
  .dk-stage { position: relative; height: auto; min-height: 0; overflow: visible; display: block; }
  .dk-copy { width: auto; margin: 0; padding-inline: var(--gutter); }
  .dk-cards { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 18px; margin-top: 36px; padding-inline: var(--gutter); }
  .dk-card { position: relative; left: auto; top: auto; width: auto; translate: none; }
  .problem .grid, .disc3d .grid, .eyefield .grid, .scale-head, .board-day, .leads, .contact .grid, .study, .origins, .faq .wrap, .dates-wrap { grid-template-columns: 1fr; }
  /* one column: the number, then the reading, then the picture */
  .study.flip { grid-template-columns: 1fr; }
  .study .aside { display: contents; }
  .study .meta { order: 1; } .study .text { order: 2; } .study .aside .ref-fig { order: 3; }
  .sites { grid-template-columns: 1fr; }
  .photo-inset { width: min(180px, 46%); }
  /* one column: the drawing comes straight after the introduction, the timeline under its labels */
  .eyefield .grid { gap: 0; }
  .eyefield .grid > div { display: contents; }
  .eyefield h2 { order: 1; } .eyefield .lede { order: 2; } .eye-stage { order: 3; margin-top: 28px; }
  /* the drawing is narrow here: its direction labels ride above it as a row, shortened, so they never cover it */
  .field { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "front back" "canvas canvas" "where where"; gap: 8px 10px; }
  .canvas-box { grid-area: canvas; position: relative; inset: auto; aspect-ratio: 720 / 330; }
  .eye-dir { position: static; padding: 4px 10px; }
  .eye-dir.front { grid-area: front; justify-self: start; }
  .eye-dir.back { grid-area: back; justify-self: end; }
  .eye-dir .ofe { display: none; }
  .eye-where { grid-area: where; }
  .eye-where { position: static; margin-top: 10px; grid-template-columns: 84px auto; justify-content: start; text-align: left; }
  .eye-where svg { grid-column: 1; }
  .eye-where figcaption { grid-column: 2; max-width: none; }
  .shrink .words { width: auto; right: var(--gutter); top: auto; bottom: 7vh; bottom: 7svh; transform: none; }
  .where .photo .wrap { bottom: 28px; }
  .where .pcap { position: static; transform: none; display: block; margin-top: 14px; color: var(--ink-2); text-align: left; }
  .lane-row, .ticks-row { grid-template-columns: 1fr; gap: 10px; }
  .ticks-row > span { display: none; }
  .dates { grid-template-columns: 1fr; }
  .arm, .bar { grid-template-columns: 1fr auto; }
  .arm .track, .bar .track { grid-column: 1 / -1; grid-row: 2; }
  .cut { grid-template-columns: 1fr; }
  .cut svg { max-width: 140px; }
  .cut dl { grid-template-columns: repeat(2, auto); }
  .team figure { max-width: 280px; }
  .tiles { grid-template-columns: 1fr; gap: 6px; }
  .tiles .lead { grid-column: 1 / -1; padding: 22px 20px; }
  .tiles > * { aspect-ratio: auto; flex-direction: row; align-items: center; justify-content: space-between; padding: 16px 18px; border-radius: 14px; }
  .tiles .lead { flex-direction: column; align-items: flex-start; }
  .flag { align-self: center; }
  /* a fixed first column (the year, or the flag) so every tile's text starts at the same place */
  .tiles a { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: 14px; align-items: center; }
  .tiles .paper .yr { font-size: 1.375rem; }
  .tiles a .flag { grid-column: 1; grid-row: 1; justify-self: start; }
  .tiles a .txt { grid-column: 2; grid-row: 1; }
  .places { grid-template-columns: 1fr; }
  .faq h2 { position: static; }
  .foot .cols { grid-template-columns: 1fr; }
  .brand .word svg { height: 14px; }
  .totop { width: 44px; height: 44px; right: 12px; bottom: 12px; }
  .bench-fig figcaption { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .loader { transition: opacity .3s, visibility 0s linear .3s; }
  .loaded .loader { transform: none; opacity: 0; }
  .shrink, .eyefield, .xhero, .deck { height: auto; }
  .dk-stage { position: relative; }
  .xh-stage { position: relative; }
  .xh-veil, .xhero .end-line { display: none; }
  .shrink .pin, .eyefield .pin { position: relative; }
  .js .shrink .words, .js .shrink .pin > .cap { opacity: 1; }
  .shrink .full { clip-path: none; }
  .shrink .zoom { display: none; }
  .go .ic { animation: none; }
  * { transition: none !important; }
}

/* the comparison as stacked rows on a phone: each measure, then the two answers, each named */
@media (max-width: 640px) {
  .tablewrap { overflow: visible; }
  .compare table { min-width: 0; }
  .compare thead { display: none; }
  .compare tbody tr { display: grid; }
  .compare tbody th { width: auto; padding: 22px 0 8px; border-bottom: 0; }
  .compare td { padding: 14px 16px; border-bottom: 0; }
  .compare td + td { border-bottom: 1px solid var(--line); }
  .compare td::before { content: attr(data-col); display: block; margin-bottom: 4px; font-size: var(--s-small); font-weight: 600; color: var(--ink-2); }
}
.eye-cite { padding-bottom: clamp(40px, 6vw, 72px); }
.eye-cite .cite { margin-top: 0; }

/* the multipage parts: the header on inner pages, the phone menu, page heads, and the pieces the mockup didn't have */
.nb { white-space: nowrap; }
.opt { font-weight: 400; color: var(--ink-2); }

/* header: clear over the home page's hero only; every other page starts solid */
.top--solid { background: var(--header-solid); color: var(--ink); }
.top--solid .nav a:not(.btn):hover { color: var(--amber-text); }
.nav a[aria-current="page"]:not(.btn) { color: var(--amber-text); }
.top:not(.is-solid):not(.top--solid) .nav a[aria-current="page"]:not(.btn) { color: var(--amber); }
.srch-link { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: inherit; transition: background-color .2s; }
.srch-link:hover { background: rgba(128, 128, 128, .14); background: color-mix(in srgb, currentColor 12%, transparent); }
.srch-link .ic { width: 20px; height: 20px; }
.menu-btn { display: none; margin-left: 0; width: 44px; height: 44px; place-items: center; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.menu-btn .ic { width: 24px; height: 24px; }
.menu-btn .i-close { display: none; }
@media (max-width: 960px) {
  .top { gap: 8px; }
  .menu-btn { display: grid; }
  .nav { display: none; position: absolute; inset: 100% 0 auto; margin: 0; padding: 8px var(--gutter) 24px; flex-direction: column; align-items: stretch; gap: 0; background: var(--header-solid); color: var(--ink); font-size: var(--s-body); box-shadow: 0 1px 0 var(--line); }
  .nav a:not(.btn) { min-height: 52px; border-bottom: 1px solid var(--line); }
  .nav .btn { margin-top: 16px; min-height: 48px; justify-content: center; font-size: var(--s-body); }
  .top.is-open { background: var(--header-solid); color: var(--ink); }
  .top.is-open .nav { display: flex; min-height: calc(100vh - 72px); min-height: calc(100svh - 72px); overflow-y: auto; }
  .top.is-open .menu-btn .i-open { display: none; }
  .top.is-open .menu-btn .i-close { display: block; }
}

/* a page's own head: crumbs, the title, a short introduction and what's on the page */
.pagehead { padding-block: calc(var(--band) * .55 + 72px) calc(var(--band) * .5); }
.pagehead h1 { font-size: clamp(2.75rem, 1.6rem + 3.6vw, 4.75rem); letter-spacing: -.04em; line-height: 1.02; max-width: 18ch; }
.pagehead .lede { max-width: 60ch; }
.crumbs ol { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--s-small); color: var(--ink-2); }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--grid); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }
.crumbs [aria-current] { display: inline-flex; align-items: center; min-height: 44px; }
.toc { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.toc a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; font-size: var(--s-small); font-weight: 500; text-decoration: none; transition: border-color .2s, background-color .2s; }
.toc a:hover { border-color: var(--ink-2); background: var(--raise); }

/* a link that leads on: to the page that tells the rest */
.more { margin-top: 28px; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--amber-text); font-weight: 600; text-decoration: none; }
.more:hover { text-decoration: underline; }
.more .ic { transition: transform .25s var(--ease); }
.more:hover .ic { transform: translateX(3px); }

/* what has been studied: three ruled rows, each a setting, a finding and its source */
.glance-head { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 4vw, 64px); align-items: end; }
.glance-list { list-style: none; margin: 48px 0 0; padding: 0; border-top: 2px solid var(--ink); }
.glance-list li { display: grid; grid-template-columns: 4fr 6fr 3fr; gap: clamp(16px, 3vw, 48px); padding: 26px 0; border-bottom: 2px solid var(--line); align-items: baseline; }
.gl-set { font-size: var(--s-small); color: var(--ink-2); }
.gl-set b { display: block; font-size: var(--s-lead); font-weight: 500; letter-spacing: -.015em; color: var(--ink); }
.gl-src { font-size: var(--s-small); color: var(--ink-2); }

/* the two layers, each as its own micrograph plate, beside the film itself */
.layers-head { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.layers-head .lede { margin-top: 0; }
.layers-plates { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 32px); }
.plate { margin: 0; }
.plate img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; background: #000; }
.plate--photo img { object-position: 40% 50%; }
.plate figcaption { margin-top: 14px; font-size: var(--s-small); line-height: 1.5; color: var(--ink-2); }
.plate figcaption b { display: flex; gap: 10px; align-items: center; margin-bottom: 4px; font-size: var(--s-body); color: var(--ink); }

/* what hasn't been studied */
.limits .grid { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.limit-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.limit-list li { padding: 20px 0; border-bottom: 2px solid var(--line); color: var(--ink-2); display: grid; grid-template-columns: minmax(0, 15rem) 1fr; gap: 6px 32px; }
.limit-list b { color: var(--ink); font-weight: 600; }

/* the founder's record, and everyone else */
.team figure figcaption { margin-top: 8px; font-size: var(--s-small); color: var(--ink-2); }
.facts { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; max-width: 60ch; }
.facts li { position: relative; padding-left: 26px; color: var(--ink-2); }
.facts li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #f7dcb4, var(--amber) 55%, #b9783a); }

/* contact */
.contact-band .grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 80px); align-items: end; }
.contact-band .lede { margin: 0 0 24px; }
.contact-page .grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.contact-email { margin-top: 16px; max-width: 46ch; color: var(--ink-2); }
.contact-email a { color: var(--ink); font-weight: 500; }
.patient-note { margin-top: 24px; padding: 18px 20px; background: var(--raise); border-radius: 14px; max-width: 46ch; font-size: var(--s-small); line-height: 1.55; color: var(--ink-2); }
.cform { display: grid; gap: 16px; margin-top: 8px; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-sel { position: relative; display: grid; }
.cf-sel select { appearance: none; padding-right: 44px; cursor: pointer; }
.cf-sel .ic { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ink-2); }
.cf-note { padding: 14px 16px; background: var(--amber-pale); border-radius: 12px; font-size: var(--s-small); color: var(--amber-ink); }
/* sending: the button says so, and a spinner turns where its arrow was */
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"] svg { display: none; }
.btn[aria-busy="true"]::after { content: ""; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* loading: a placeholder in the page's own raised tone, with one slow sweep across it, for a picture still on its way
   and for the 3D film and the particle eye until their first frame. It goes the moment the thing arrives, and holds
   still under reduced motion. (Adam, Tue Oct 20 2026, 5:37 PM EDT: "loading states, skeleton loading".) */
/* PERM Tracker's sweep (Adam, Oct 21 2026: "skeleton loading animation ... like in pt"): a band three boxes wide
   crosses in the first 70% of each 2 s, then rests; the 0.2 s wait means a fast load never shows it */
@keyframes sk-sweep { 0% { background-position: 100% 0; } 70%, 100% { background-position: 0% 0; } }
img.sk { color: transparent; }
img.sk, .js .stage3d.is-loading::before, .js .canvas-box.is-loading::before, video.sk {
  background-color: var(--raise);
  background-image: linear-gradient(100deg, transparent 40%, var(--sk-hi) 50%, transparent 60%);
  background-size: 300% 100%; background-repeat: no-repeat;
  animation: sk-sweep 2s ease-in-out .2s infinite;
}
.js .stage3d.is-loading::before { content: ""; position: absolute; inset: 22% 26%; border-radius: 50%; }
.js .canvas-box.is-loading::before { content: ""; position: absolute; inset: 10% 0 18% 6%; border-radius: 40% 40% 24% 24%; }
/* a click that loads another page: a small spinner after 150 ms, so a slow connection still shows the click was
   heard (PERM Tracker's pending link). It never moves the layout: beside a plain link's words, in place of an arrow,
   or in the middle of a button whose label steps aside */
.is-pending { position: relative; cursor: progress; }
.spin { width: .9em; height: .9em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; opacity: 0; pointer-events: none; animation: spin .8s linear infinite, spin-show .01s linear .15s forwards; }
@keyframes spin-show { to { opacity: 1; } }
.is-pending > .spin { position: absolute; top: 50%; left: calc(100% + 6px); margin-top: -.45em; }
.is-pending.swap svg.ic { display: none; }
.is-pending.swap .spin { position: static; display: inline-block; width: 1em; height: 1em; margin: 0; flex: none; }
.btn.is-pending { color: transparent; }
.btn.is-pending > .spin { left: 50%; margin-left: -.45em; color: var(--amber-ink); }
/* a rule grows under a header or footer link's words from the left when it's pointed at or focused (PERM Tracker's
   hover underline); the page you're on keeps its rule, so it isn't marked by colour alone */
.u { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 2px; padding-bottom: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .3s ease-out; }
a:hover > .u, a:focus-visible > .u, a[aria-current="page"] > .u { background-size: 100% 2px; }
@media (prefers-reduced-motion: reduce) { img.sk, video.sk, .js .stage3d.is-loading::before, .js .canvas-box.is-loading::before, .btn[aria-busy="true"]::after { animation: none; } .spin { animation: spin-show .01s linear .15s forwards; } .u { transition: none; } }
.cf-done, .cf-fail { padding: 22px 24px; border-radius: 16px; background: var(--raise); }
.cf-done h2, .cf-fail h2 { font-size: var(--s-lead); letter-spacing: -.015em; }
.cf-done p, .cf-fail p { margin-top: 8px; color: var(--ink-2); }
.cf-fail { background: var(--error-bg); }
.cf-fail h2 { color: var(--error-ink); }
.cf-fail .btn { margin-top: 14px; }
.done-page { min-height: 70vh; min-height: 70svh; }
.acts { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.acts .more { margin-top: 0; }

/* prose pages */
.prose { padding-top: 0; }
.prose-col { max-width: 66ch; }
.prose h2 { margin-top: 44px; font-size: var(--s-lead); letter-spacing: -.015em; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-top: 12px; color: var(--ink-2); }

/* search, the 404 and the page index */
.srch-form { margin-top: 28px; display: flex; gap: 10px; max-width: 640px; }
.srch-form input { flex: 1; min-width: 0; font: inherit; font-size: var(--s-body); color: var(--ink); background: var(--raise); border: 1px solid var(--line); border-radius: 999px; padding: 0 20px; min-height: 52px; }
.srch-form input:focus { border-color: var(--amber); outline: none; }
.srch-form .btn { min-height: 52px; }
.srch-page-status, .srch-page-dym { margin-top: 18px; color: var(--ink-2); }
.srch-page-dym a, .lost-path { color: var(--ink); font-weight: 600; }
.srch-results { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 8px; max-width: 760px; }
.srch-results a { display: grid; gap: 2px; padding: 16px 20px; background: var(--raise); border-radius: 14px; text-decoration: none; transition: background-color .2s; }
.srch-results a:hover { background: var(--raise-2); }
.sr-t { font-weight: 600; }
.sr-p { font-size: var(--s-small); color: var(--amber-text); font-weight: 600; }
.sr-x { font-size: var(--s-small); color: var(--ink-2); }
.srch-results mark { background: var(--amber-pale); color: var(--amber-ink); border-radius: 3px; padding: 0 2px; }
.lost-page { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.lost-dym { margin-top: 36px; }
.pl-h { font-size: var(--s-body); font-weight: 600; letter-spacing: 0; }
.index-band h2 { font-size: var(--s-lead); }
.pagelist { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 18rem)); gap: 24px 48px; }
.pagelist ul { list-style: none; margin: 10px 0 0; padding: 0; }
.pagelist a { display: inline-flex; min-height: 44px; align-items: center; color: var(--ink); }

/* the next page, at the foot of each inner page */
.next { padding-block: clamp(56px, 7vw, 96px); background: var(--raise); }
.next a { display: flex; justify-content: space-between; align-items: center; gap: 24px; text-decoration: none; }
.next b { display: block; font-size: var(--s-head); font-weight: 500; letter-spacing: -.03em; line-height: 1.2; max-width: 26ch; }
.next .ic { width: 40px; height: 40px; flex: none; color: var(--amber-text); transition: transform .3s var(--ease); }
.next a:hover .ic { transform: translateX(6px); }
.next a:hover b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }

/* the curve values, for anyone who'd rather read the numbers */
.cv-data { margin-top: 28px; background: transparent; border: 1px solid var(--line); }
.cv-data[open] { background: transparent; }
.cv-data summary { min-height: 52px; font-size: var(--s-small); }
.cv-tables { padding: 0 24px 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.cv-tables table { border-collapse: collapse; font-size: var(--s-small); font-variant-numeric: tabular-nums; width: 100%; }
.cv-tables caption { text-align: left; font-weight: 600; padding-bottom: 8px; }
.cv-tables th, .cv-tables td { text-align: left; padding: 4px 8px 4px 0; border-bottom: 1px solid var(--line); }
.cv-tables thead th { color: var(--ink-2); font-weight: 500; }

/* the curve dots' bead shading, as classes so no style attribute is needed */
.stop-mmc-hi { stop-color: #f7dcb4; }
.stop-mmc { stop-color: var(--amber); }
.stop-mmc-lo { stop-color: #b9783a; }
.stop-fu-hi { stop-color: var(--drape-hi); }
.stop-fu { stop-color: var(--drape); }
.stop-fu-lo { stop-color: var(--drape-lo); }

.sites .fig20 { object-position: 50% 70%; }
.cf-privacy { font-size: var(--s-small); color: var(--ink-2); }
.foot .links { list-style: none; margin: 0; padding: 0; }
.foot .links a { min-height: 44px; }
.foot .cols h2 { font-size: var(--s-small); font-weight: 600; letter-spacing: 0; color: var(--ink); margin-bottom: 4px; }

/* a link to a #part of the page that isn't here */
dialog.lost { max-width: min(520px, calc(100vw - 32px)); padding: 28px; border: 0; border-radius: 20px; background: var(--ground); color: var(--ink); }
dialog.lost::backdrop { background: rgba(11, 37, 69, .5); }
dialog.lost h2 { font-size: var(--s-lead); }
dialog.lost p { margin-top: 10px; color: var(--ink-2); }
dialog.lost ul { margin: 16px 0 20px; padding: 0; list-style: none; }
dialog.lost li a { display: inline-flex; min-height: 44px; align-items: center; font-weight: 500; }

@media (max-width: 960px) {
  .glance-head, .layers-head, .limits .grid, .contact-band .grid, .contact-page .grid, .lost-page { grid-template-columns: 1fr; }
  .glance-list li { grid-template-columns: 1fr; gap: 8px; }
  .layers-plates { grid-template-columns: 1fr; gap: 36px; }
  .limit-list li { grid-template-columns: 1fr; }
  .cf-row { grid-template-columns: 1fr; }
  .cv-tables { grid-template-columns: 1fr; }
  .pagelist { grid-template-columns: 1fr; }
  .next b { font-size: var(--s-lead); }
  .srch-form { flex-direction: column; }
}
@media (min-width: 961px) and (max-width: 1180px) {
}

/* the hidden attribute always wins over a display rule */
[hidden] { display: none !important; }

@media (max-width: 960px) {
  .srch-link { margin-left: auto; }
  .foot .cols { grid-template-columns: 1fr 1fr; }
  .foot .cols > :first-child, .foot .cols > :last-child { grid-column: 1 / -1; }
}

/* inspector round one: 2px rules, display-size titles, 16px small text, paragraphs kept to a readable measure */
.place p, .cf-note, .cf-done p, .cf-fail p, .gl-find, .limit-list li, .study .text p, .ref-fig figcaption { max-width: 68ch; }

/* the contact button stays in the header on a phone; the menu then holds the pages */
.top-cta { display: none; min-height: 44px; padding: 0 16px; font-size: var(--s-small); }
@media (max-width: 960px) {
  .top-cta { display: inline-flex; }
  .nav .btn { display: none; }
  .srch-link { margin-left: auto; }
}

/* a reference picture inside a study, and a pair of them */
.ref-fig { margin: 32px 0 0; }
.ref-fig img { width: 100%; max-width: 560px; height: auto; border-radius: 14px; background: #000; }
.ref-fig.fig20, .ref-fig img.fig20 { max-width: 360px; }
.ref-fig figcaption, .ref-pair figcaption { margin-top: 12px; font-size: var(--s-small); line-height: 1.5; color: var(--ink-2); }
.ref-fig figcaption b { display: block; color: var(--ink); }
.ref-fig a { color: var(--ink); }
.ref-pair { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ref-pair figure { margin: 0; }
.ref-pair img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; background: #000; }
.layers-plates.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 960px; }

/* team faces: a portrait where an official one exists, initials otherwise */
/* a linked person: the card is the link; its grid is the row's */

/* the footer's signup */
.updates { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 4vw, 64px); align-items: end; padding-bottom: 64px; margin-bottom: 56px; border-bottom: 2px solid var(--line); }
.updates h2 { font-size: var(--s-lead); letter-spacing: -.015em; }
.updates p { margin-top: 8px; max-width: 52ch; color: var(--ink-2); }
.uform { display: flex; flex-wrap: wrap; gap: 10px; }
.uform input[type="email"] { flex: 1 1 260px; min-width: 0; font: inherit; color: var(--ink); background: var(--raise); border: 1px solid var(--line); border-radius: 999px; padding: 0 20px; min-height: 50px; }
.uform input:focus { border-color: var(--amber); outline: none; }
.uform .btn { min-height: 50px; }
.u-done, .u-fail { flex-basis: 100%; margin: 0; font-weight: 600; }
.u-fail { color: var(--error-ink); }

@media (max-width: 960px) {
  .updates { grid-template-columns: 1fr; }
  .ref-pair { grid-template-columns: 1fr; }
  .layers-plates.two { grid-template-columns: 1fr; }
}

/* closed details hold nothing on the page */
.cv-data:not([open]) .cv-tables { display: none; }

/* the day slider in the page's own colours */
.scrub input[type="range"] { appearance: none; -webkit-appearance: none; background: transparent; }
.scrub input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--track); }
.scrub input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--track); }
.scrub input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--amber); }
.scrub input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: var(--amber); border: 3px solid var(--ground); cursor: grab; }
.scrub input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--amber); border: 3px solid var(--ground); cursor: grab; }

/* a prose page as rows: the heading on the left, its text on the right */
.prose-rows { display: grid; }
.prose-row { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(20px, 4vw, 64px); padding: 32px 0; border-top: 2px solid var(--line); }
.prose-row h2 { margin: 0; font-size: var(--s-lead); }
.prose-row p { margin: 0; max-width: 64ch; color: var(--ink-2); }
.prose-row p + p { margin-top: 12px; }
@media (max-width: 960px) {
  .prose-row { grid-template-columns: 1fr; gap: 10px; }
  .tiles .paper .yr { font-size: 1.125rem; font-weight: 400; }
}

/* the film: a click-to-play player with its poster, and the film's own text beneath */
.fm-head { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 4vw, 64px); align-items: end; }
.fm-head .lede { margin-top: 0; }
.fm-player { margin: 40px 0 0; }
.fm-player video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; border-radius: 18px; }
.fm-player figcaption { margin-top: 12px; font-size: var(--s-small); color: var(--ink-2); max-width: 80ch; }
.fm-text { margin-top: 24px; background: transparent; border: 1px solid var(--line); }
.fm-text[open] { background: transparent; }
.fm-text summary { min-height: 52px; font-size: var(--s-small); }
.fm-text ol { margin: 0; padding: 0 24px 22px 44px; display: grid; gap: 8px; max-width: 72ch; color: var(--ink-2); }
.fm-text:not([open]) ol { display: none; }
@media (max-width: 960px) {
  .fm-head { grid-template-columns: 1fr; }
}

/* style attributes from the pages, as classes */
.s-10ce1301 { left:27.8%; }
.s-1c2bd44e { width:66.7%; }
.s-20f994bd { --am-period:5.20s;--am-delay:0.00s;--am-dx:0.00px;--am-dy:-56.48px; }
.s-21c2db78 { left:66.7%; }
.s-25bb40e1 { --am-period:2.60s;--am-delay:0.00s;--am-min:0.2; }
.s-2adeda02 { width:67%; }
.s-2f0a1848 { width:70%; }
.s-2fc422fb { left:84.8%; }
.s-31649e04 { width:53.3%; }
.s-3808a99f { --am-period:7.00s;--am-delay:0.00s;--am-a0:18deg;--am-a1:28deg; }
.s-391ea34d { left:0;width:100%; }
.s-4567acf6 { width:88.3%; }
.s-46517ef0 { left:63.6%; }
.s-4bdeb4ee { filter:blur(4px); }
.s-4d4e27cc { width:65.7%; }
.s-4f77e7af { filter:blur(8px); }
.s-5225e5b7 { width:0%; }
.s-57e793ad { --am-period:1.60s;--am-delay:0.00s;--am-dx:4.53px;--am-dy:1.77px; }
.s-62efd3ca { filter:blur(6px); }
.s-6aca2603 { left:0; }
.s-796c027b { width:83%; }
.s-81f7ccdc { left:0;width:1.1%; }
.s-8654e791 { width:74.5%; }
.s-8eeb19c2 { left:21.2%; }
.s-97a36e1c { width:90.7%; }
.s-9b8491dd { left:3.3%;width:24.5%; }
.s-9f4e0ac2 { filter:blur(3px); }
.s-b6e9436d { width:52.7%; }
.s-cb179f04 { width:58.3%; }
.s-d44dfdec { width:49.7%; }
.s-f0282b4a { left:42.4%; }
.s-f35dfd4a { width:78.2%; }
.s-f8e46e1a { width:62.2%; }
.s-f9284286 { left:100%; }