@font-face { font-family: "Hubot Sans"; src: url(fonts/hubot-sans-wide-700.woff2) format("woff2"); font-weight: 700; font-stretch: 125%; font-display: swap; }
@font-face { font-family: "Mona Sans"; src: url(fonts/mona-sans.woff2) format("woff2"); font-weight: 400 700; font-stretch: 100%; font-display: swap; }
@font-face { font-family: "Monaspace Krypton"; src: url(fonts/monaspace-krypton.woff2) format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
  /* one easing family: a soft cubic out for reveals, its in-out sibling for the loader wipe */
  --ease-out: cubic-bezier(.2,.7,.1,1);
  --ease-io: cubic-bezier(.7,0,.2,1);
  /* palette: warm black, bone line work, jade signal. main.js PAL mirrors the WebGL side.
     Off the Record keeps its own palette in otr.css. */
  --void: #0f0d0a; --void-rgb: 15, 13, 10;
  --void-2: #100e0b;
  --scrim-rgb: 16, 14, 11;
  --panel-rgb: 22, 19, 15;
  --panel-2-rgb: 24, 21, 17;
  --ink: #ece5d6; --ink-rgb: 236, 229, 214;
  --hi: #fff8e8;
  --hi-rgb: 239, 232, 217;
  --stroke-rgb: 246, 238, 223;
  --ice: #cdc7ba; --ice-rgb: 205, 199, 186;
  --dim: #b4aea3;
  --line-rgb: 226, 220, 205;
  --line: rgba(var(--line-rgb), .14);
  --tx-1: #efe8d9; --tx-2: #ece5d6; --tx-3: #e3ddce; --tx-4: #dad4c6;
  --gc-t: #bdb7ab; --gc-l: #a5a096; --gc-r: #a29e93; --gc-u: #848077;
  --sig: #56c596; --sig-rgb: 86, 197, 150;
  --sig-soft: rgba(var(--sig-rgb), .16);

  --display: "Hubot Sans", "Helvetica Neue", Arial, sans-serif;
  --body: "Mona Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "Monaspace Krypton", ui-monospace, Menlo, monospace;
  --hw: 700; --hs: 125%; --ls-disp: -.01em;

  --t-label: clamp(12px, .7rem + .12vw, 13px);
  --t-body: clamp(17px, 1rem + .25vw, 20px);
  --t-lede: clamp(21px, 1.15rem + .55vw, 28px);
  --t-h3: clamp(28px, 1.4rem + 1.1vw, 40px);
  --t-xl: clamp(36px, 1rem + 4.6vw, 92px);
  --t-h2: clamp(48px, 1.6rem + 6vw, 136px);
  --t-hero: clamp(34px, 10.6vw, 194px);

  --ls-label: .16em;
  --ls-tight: -.01em;
  --ls-hero: -.01em;
  --lh-tight: .86;
  --lh-head: 1;
  --lh-body: 1.4;

  --pad: clamp(20px, 4vw, 64px);
  --bar: 76px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* headlines: Hubot Sans, wide (125%) at 700 */
.hero h1, .card h2, .record h2, .rows tbody .co, footer .mail, #loader .count { font-family: var(--display); font-weight: var(--hw); font-stretch: var(--hs); letter-spacing: var(--ls-disp); }
html { background: var(--void); color: var(--ink); -webkit-text-size-adjust: 100%; }
body { font-family: var(--body); font-weight: 450; font-size: var(--t-body); line-height: var(--lh-body); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--sig); color: var(--void); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.label { font-family: var(--mono); font-weight: 500; font-size: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; line-height: var(--lh-body); }

/* stage */
#gl { position: fixed; inset: 0; width: 100vw; height: 100lvh; display: block; z-index: 0; touch-action: pan-y; }

/* nav: always still */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 20; height: 64px; padding: 0 var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: linear-gradient(var(--void) 0, var(--void) 52px, rgba(var(--void-rgb), .86) 64px); }
.nav::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 22px; background: linear-gradient(rgba(var(--void-rgb), .86), rgba(var(--void-rgb), 0)); pointer-events: none; }
.nav .who { text-decoration: none; color: var(--ink); }
.nav .right { display: flex; align-items: center; gap: 6px; }
.nav .where { color: var(--ice); }

/* loader */
#loader { position: fixed; inset: 0; z-index: 50; background: var(--void); display: flex; flex-direction: column; justify-content: flex-end; padding: var(--pad); padding-bottom: calc(var(--pad) + 20px);
  transition: transform .9s var(--ease-io), opacity .9s var(--ease-io); animation: loaderSafety 0s 6s forwards; }
#loader .count { font-family: var(--display); font-weight: var(--hw); font-size: var(--t-h2); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); color: var(--ink); font-variant-numeric: tabular-nums; }
#loader .count span { color: var(--sig); }
#loader .bar { margin-top: 18px; height: 1px; background: var(--line); position: relative; overflow: hidden; }
#loader .bar i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(var(--lp, 0)); }
#loader .label { color: var(--dim); margin-top: 12px; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
#loader .label span:first-child { flex: none; }
#loader .label span:last-child { text-align: right; text-wrap: balance; }
#loader.done { transform: translateY(-100%); pointer-events: none; }
@keyframes loaderSafety { to { transform: translateY(-100%); visibility: hidden; } }

/* hero */
.hero { position: relative; z-index: 2; height: 170svh; }
.hero .pin { position: sticky; top: 0; height: 100svh; padding: 0 var(--pad); display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: calc(var(--bar) + 28px); pointer-events: none; }
.hero h1 { font-weight: var(--hw); font-size: var(--t-hero); line-height: var(--lh-tight); letter-spacing: var(--ls-hero); text-transform: uppercase; margin-left: -.04em; position: relative; }
.hero h1 .ln { display: block; position: relative; }
.hero h1 .face { --face: var(--ink); position: relative; display: block; color: var(--face); }
html.js .hero h1 .face { color: rgba(var(--ink-rgb), 0); animation: faceSafety .6s 6s forwards; }
@keyframes faceSafety { to { color: var(--face); } }
/* once the draft takes over, each letter fades in on its own; the line itself is solid */
html.js .hero h1 .face.split { color: var(--face); animation: none; }
.hero h1 .lt { display: inline; }
.hero h1 .draft { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.draft .cl { stroke: rgba(var(--ice-rgb), .55); stroke-width: 1; fill: none; }
.draft .cl.d { stroke-dasharray: 6 4; }
.draft .ol { fill: none; stroke: rgba(var(--stroke-rgb), .95); stroke-width: 1; }
.draft .dm line, .draft .dm path { stroke: rgba(var(--hi-rgb), .85); stroke-width: 1; fill: none; }
.draft .dm .ah { fill: rgba(var(--hi-rgb), .85); stroke: none; }
.draft text.t { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; fill: var(--tx-4); font-weight: 500; text-transform: none; }
.hero .line { margin-top: 22px; max-width: 30ch; font-size: var(--t-lede); line-height: 1.2; color: var(--ink); text-wrap: balance; }
.hero .facts { margin-top: 14px; color: var(--ice); }
.hero .cue { position: absolute; right: var(--pad); top: 84px; color: var(--dim); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.hero .cue i { width: 1px; height: 64px; background: var(--line); position: relative; overflow: hidden; }
.hero .cue i::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100%; background: var(--sig); transform-origin: top; transform: scaleY(var(--hp, 0)); }
.hero-in { opacity: 0; transform: translateY(24px); transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out); }
.ready .hero-in { opacity: 1; transform: none; }
.ready .hero-in.d2 { transition-delay: .25s; } .ready .hero-in.d3 { transition-delay: .4s; }

/* chapters */
.ch { position: relative; z-index: 2; height: 250svh; }
.ch .pin { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--pad) calc(var(--bar) + 18px); pointer-events: none; }
.card { max-width: 560px; pointer-events: auto; opacity: var(--co, 0); transform: translateY(calc((1 - var(--co, 0)) * 26px)); }
.card .idx { color: var(--sig); display: flex; gap: 12px; }
.card .idx span { color: var(--ice); }
.card h2 { margin-top: 10px; font-weight: var(--hw); font-size: var(--t-h2); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); text-wrap: balance; clip-path: inset(-.12em calc((1 - var(--cw, 0)) * 100%) -.3em -.08em); }
.card .org { margin-top: 16px; font-size: var(--t-lede); line-height: 1.15; }
.card .meta { margin-top: 6px; color: var(--ice); }
.card p.body { margin-top: 12px; color: var(--tx-3); max-width: 34ch; }
.card .hint { position: relative; margin-top: 14px; color: var(--dim); display: flex; align-items: center; gap: 10px; text-transform: none; white-space: nowrap; }
/* the mark's center dot, layered on the mask so only it pulses */
.card .hint::after { content: ""; position: absolute; left: 25.5px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--sig); animation: hint-dot 2.8s ease-in-out infinite; will-change: opacity; }
@keyframes hint-dot { 0%, 100% { opacity: .2; box-shadow: 0 0 8px 1px rgba(var(--sig-rgb), 0); } 50% { opacity: 1; box-shadow: 0 0 8px 1px rgba(var(--sig-rgb), .6); } }
@media (prefers-reduced-motion: reduce) { .card .hint::after { animation: none; opacity: 1; box-shadow: none; } }
/* section-cut mark: A, line, dot, line, A, drawn in the accent */
.card .hint::before { content: ""; width: 56px; height: 14px; flex: none; background: var(--sig); -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 14' fill='none' stroke='%23000'><path d='M.9 12.5 4.5 1.5l3.6 11M2.1 9h4.8' stroke-width='1.8' stroke-linejoin='miter'/><path d='M12 7h10M34 7h10' stroke-width='1'/><path d='M47.9 12.5 51.5 1.5l3.6 11M49.1 9h4.8' stroke-width='1.8' stroke-linejoin='miter'/></svg>") center / 56px 14px no-repeat; mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 14' fill='none' stroke='%23000'><path d='M.9 12.5 4.5 1.5l3.6 11M2.1 9h4.8' stroke-width='1.8' stroke-linejoin='miter'/><path d='M12 7h10M34 7h10' stroke-width='1'/><path d='M47.9 12.5 51.5 1.5l3.6 11M49.1 9h4.8' stroke-width='1.8' stroke-linejoin='miter'/></svg>") center / 56px 14px no-repeat; }
.poster { display: none; }
.layer-list { display: none; }



/* nodes */
#nodes { position: fixed; inset: 0; z-index: 7; pointer-events: none; }
.node { position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; pointer-events: auto; display: grid; place-items: center; opacity: 0; transition: opacity .4s var(--ease-out); will-change: transform; }
.node.on { opacity: 1; }
.node.off { pointer-events: none; }
.node i { width: 12px; height: 12px; border-radius: 50%; background: var(--sig); box-shadow: 0 0 0 3px rgba(var(--sig-rgb), .22); }
.node.gate i { border-radius: 2px; transform: rotate(45deg); background: var(--hi); box-shadow: 0 0 0 3px rgba(var(--sig-rgb), .3); }
.node span { position: absolute; left: 0; top: 0; transform: translate(var(--lx, 36px), var(--ly, 10px)); white-space: nowrap; color: var(--ink); background: rgba(var(--void-rgb), .86); padding: 4px 8px; border: 1px solid rgba(var(--sig-rgb), .4); }
.node:focus-visible { outline: 2px solid var(--sig); outline-offset: 2px; border-radius: 50%; }

/* note sheet */
#note { position: fixed; z-index: 30; left: 12px; right: 12px; bottom: calc(var(--bar) + 10px); padding: 18px 18px 14px; background: rgba(var(--panel-rgb), .92); border: 1px solid rgba(var(--sig-rgb), .45); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transform: translateY(16px); opacity: 0; pointer-events: none; transition: transform .35s var(--ease-out), opacity .35s var(--ease-out); }
#note.on { transform: none; opacity: 1; pointer-events: auto; }
#note .label { color: var(--sig); padding-right: 48px; }
#note p { margin-top: 8px; font-size: var(--t-lede); line-height: 1.2; text-wrap: balance; }
#note button { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; display: grid; place-items: center; color: var(--ice); }

/* bottom bar */
.bar { position: fixed; z-index: 25; left: 0; right: 0; bottom: 0; height: calc(var(--bar) + env(safe-area-inset-bottom)); padding: 0 var(--pad) env(safe-area-inset-bottom); display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: linear-gradient(rgba(var(--void-rgb), 0), rgba(var(--void-rgb), .9) 55%); }
.xray { flex: none; white-space: nowrap; min-height: 48px; padding: 0 18px 0 14px; display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 999px; background: rgba(var(--panel-2-rgb), .7); color: var(--ink); transition: border-color .3s var(--ease-out), background .3s var(--ease-out), opacity .4s var(--ease-out); }
.xray i { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--sig); position: relative; }
.xray i::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--sig); transform: scale(0); transition: transform .3s var(--ease-out); }
.xray[aria-pressed="true"] { border-color: var(--sig); background: rgba(var(--sig-rgb), .12); }
.xray[aria-pressed="true"] i::after { transform: scale(1); }
.xray[disabled] { opacity: 0; pointer-events: none; }
.found { color: var(--ice); text-align: right; transition: opacity .4s var(--ease-out); }
.found b { color: var(--sig); font-weight: 500; }
.prog { position: fixed; z-index: 26; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--sig); transform-origin: left; transform: scaleX(var(--sp, 0)); }

/* record */
.record { position: relative; z-index: 2; padding: 22svh var(--pad) 12svh; background: linear-gradient(rgba(var(--void-rgb), 0), rgba(var(--void-rgb), .86) 18svh); }
.record .kicker { color: var(--sig); }
.record h2 { margin-top: 12px; font-weight: var(--hw); font-size: var(--t-h2); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.record .pos { margin-top: 22px; max-width: 32ch; font-size: var(--t-lede); line-height: 1.2; text-wrap: balance; }
.reg { margin-top: 44px; border: 1px solid rgba(var(--ice-rgb), .32); }
.reg-h { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid rgba(var(--ice-rgb), .32); color: var(--ice); }
.rows { width: 100%; border-collapse: collapse; }
.rows, .rows tbody { display: block; }
.rows tr { min-width: 0; }
.rows .co { min-width: 0; }
.rows thead { display: none; }
.rows tr { display: grid; grid-template-columns: 44px 1fr auto; grid-template-areas: "no co dwg" "no role role" "no yr yr"; column-gap: 12px; row-gap: 4px; padding: 14px 12px 16px; border-bottom: 1px solid rgba(var(--ice-rgb), .18); text-align: left; }
.rows tbody tr:last-child { border-bottom: 0; }
.rows td, .rows th { padding: 0; font-weight: inherit; text-align: left; }
.rows .no { grid-area: no; color: var(--dim); padding-top: .35em; font-variant-numeric: tabular-nums; }
.rows .co { grid-area: co; }
.rows tbody .co { font-weight: var(--hw); font-size: clamp(26px, 7.4vw, 40px); line-height: var(--lh-head); letter-spacing: var(--ls-tight); text-wrap: balance; }
.rows .role { grid-area: role; color: var(--ice); }
.rows .yr { grid-area: yr; }
.rows tbody .yr { color: var(--sig); font-variant-numeric: tabular-nums; }
.rows .dwg { grid-area: dwg; color: var(--dim); padding-top: .35em; white-space: nowrap; }
@media (max-width: 389px) { .rows tbody .co { font-size: 6.8vw; } }
.rows .dwg a { color: var(--ice); text-decoration: none; border-bottom: 1px solid rgba(var(--ice-rgb), .35); padding: 6px 0; }
.rows .dwg a:hover, .rows .dwg a:focus-visible { color: var(--hi); border-color: var(--hi); }
html.js .rows tbody tr > * { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
html.js .rows tbody tr.in > * { opacity: 1; transform: none; }
.rows tbody tr.in > .co { transition-delay: .05s; } .rows tbody tr.in > .role, .rows tbody tr.in > .yr { transition-delay: .1s; }
.record .base { margin-top: 26px; color: var(--ice); }



/* footer: a closing title-block sheet */
footer { position: relative; z-index: 2; padding: 10svh var(--pad) calc(var(--bar) + 28px); background: linear-gradient(rgba(var(--void-rgb), .86), var(--void) 30%); }
footer .label { color: var(--dim); }
.ts-sheet { position: relative; border: 1px solid rgba(var(--ice-rgb), .32); display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
.ts-sheet > * { position: relative; }
.ts-sheet::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(var(--ice-rgb), .1); pointer-events: none; }
.ts-stamp { position: absolute !important; right: calc(50% - 100px); bottom: 30px; width: 200px; height: auto; fill: none; stroke: rgba(var(--line-rgb), .08); stroke-width: 1.2; transform: rotate(-8deg); pointer-events: none; }
.ts-stamp path { vector-effect: non-scaling-stroke; }   /* the autograph as an outline: the 1.2px hairline holds at any size */
.ts-contact { padding: 28px 18px 30px; border-bottom: 1px solid rgba(var(--ice-rgb), .2); }
footer .mail { display: inline-block; margin-top: 12px; font-weight: var(--hw); font-size: var(--t-h3); letter-spacing: var(--ls-tight); line-height: var(--lh-head); text-decoration: none; padding: 8px 0; border-bottom: 1px solid var(--sig); overflow-wrap: anywhere; }
.ts-h { display: flex; justify-content: space-between; gap: 12px; padding: 10px 18px; border-bottom: 1px solid rgba(var(--ice-rgb), .2); color: var(--ice) !important; text-align: left; }
.ts-index { border-bottom: 1px solid rgba(var(--ice-rgb), .2); }
.ts-dwgs { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ts-dwgs li { border-right: 1px solid rgba(var(--ice-rgb), .14); border-bottom: 1px solid rgba(var(--ice-rgb), .14); }
.ts-dwgs li:nth-child(2n) { border-right: 0; }
.ts-dwgs li:last-child { border-bottom: 0; grid-column: 1 / -1; }
.ts-dwgs li:last-child a { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; grid-template-areas: "th dn" "th nm" "th sc"; column-gap: 12px; }
.ts-dwgs li:last-child .th { margin-bottom: 0; }
.ts-dwgs li:last-child .sc { text-align: left; align-self: end; }
.ts-dwgs a { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "th th" "dn sc" "nm nm"; gap: 4px 8px; padding: 12px 12px 14px; color: inherit; text-decoration: none; }
.ts-dwgs .th { grid-area: th; display: block; aspect-ratio: 3 / 2; margin-bottom: 6px; border: 1px solid rgba(var(--ice-rgb), .1); background: var(--void-2); overflow: hidden; }
.ts-dwgs img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .4s var(--ease-out); }
.ts-dwgs .dn { grid-area: dn; white-space: nowrap; color: var(--ice) !important; }
.ts-dwgs .sc { grid-area: sc; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: clip; }
@media (max-width: 400px) { .ts-dwgs li:not(:last-child) a { grid-template-areas: "th th" "dn dn" "nm nm" "sc sc"; } .ts-dwgs li:not(:last-child) .sc { text-align: left; } }
.ts-dwgs .nm { grid-area: nm; font-size: 15px; line-height: 1.25; color: var(--ink); }
.ts-dwgs a:hover img, .ts-dwgs a:focus-visible img { opacity: 1; }
.ts-dwgs a:focus-visible { outline: 1px solid var(--ice); outline-offset: -4px; }
.ts-low { display: grid; grid-template-columns: minmax(0, 1fr); }
.ts-rev { width: 100%; border-collapse: collapse; border-bottom: 1px solid rgba(var(--ice-rgb), .2); }
.ts-rev caption { display: table-caption; caption-side: top; text-align: left; }
.ts-rev th, .ts-rev td { text-align: left; padding: 8px 18px; border-bottom: 1px solid rgba(var(--ice-rgb), .1); font-weight: inherit; vertical-align: baseline; }
.ts-rev th { color: var(--dim); }
.ts-rev td { font-size: 14px; line-height: 1.35; color: var(--ice); }
.ts-rev td.label { font-size: var(--t-label); color: var(--dim); white-space: nowrap; }
.ts-rev th:first-child, .ts-rev td:first-child { width: 1%; padding-right: 6px; }
.ts-rev th:last-child, .ts-rev td:last-child { width: 1%; text-align: right; }
.ts-rev tbody tr:last-child td { border-bottom: 0; }
.ts-tb { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid rgba(var(--ice-rgb), .2); }
.ts-tb > div { padding: 9px 12px 10px; border-right: 1px solid rgba(var(--ice-rgb), .12); border-bottom: 1px solid rgba(var(--ice-rgb), .12); min-width: 0; }
.ts-tb > .w2 { grid-column: span 2; }
.ts-tb dt { font-size: 10.5px; color: var(--dim); }
.ts-tb dd { margin-top: 3px; font-size: 14px; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.ts-tb dd.label { font-size: var(--t-label); color: var(--ice); }
footer .fine { padding: 14px 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; color: var(--dim); }

/* desktop */
@media (min-width: 900px) {
  :root { --bar: 84px; }
  .hero .pin { padding-bottom: calc(var(--bar) + 40px); }
  .hero .line { max-width: 34ch; }
  .ch .pin { justify-content: center; padding-bottom: 0; }
  .card { max-width: 470px; }
  .card h2 { font-size: clamp(44px, 1rem + 2.6vw, 66px); }
  #note { left: auto; right: var(--pad); width: 420px; bottom: calc(var(--bar) + 16px); }
  .rows thead { display: block; }
  .rows thead tr { padding-top: 12px; padding-bottom: 12px; }
  .rows thead th { color: var(--dim) !important; font-size: var(--t-label); font-weight: 500; letter-spacing: var(--ls-label); line-height: var(--lh-body); padding-top: 0; }
  .rows tr { grid-template-columns: 64px 1fr 260px 120px 90px; grid-template-areas: "no co role yr dwg"; align-items: baseline; column-gap: 24px; padding: 18px 20px 20px; }
  .rows .no, .rows .dwg { padding-top: 0; }
    footer .mail { font-size: min(var(--t-xl), 6vw); }
  .ts-sheet { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .ts-contact { grid-column: 1 / -1; padding: 44px 28px 46px; }
  .ts-index { border-right: 1px solid rgba(var(--ice-rgb), .2); border-bottom: 0; }
  .ts-dwgs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ts-dwgs li, .ts-dwgs li:nth-child(2n) { border-right: 1px solid rgba(var(--ice-rgb), .14); border-bottom: 1px solid rgba(var(--ice-rgb), .14); }
  .ts-dwgs li:nth-child(3n) { border-right: 0; }
  .ts-dwgs li:nth-child(n+4) { border-bottom: 0; }
  .ts-dwgs li:last-child { border-right: 0; grid-column: span 2; }
  .ts-dwgs a { grid-template-areas: "th th" "dn sc" "nm nm"; }
  .ts-h { padding: 12px 28px; }
  .ts-rev th, .ts-rev td { padding: 9px 28px; }
  .ts-tb { border-bottom: 0; }
  .ts-low { border-bottom: 1px solid rgba(var(--ice-rgb), .2); }
  .ts-sheet .fine { grid-column: 1 / -1; padding: 16px 28px; }
  .ts-stamp { right: calc(22.2% - 130px); bottom: 40px; width: 260px; }   /* centered on the title block's lower rows */
}

/* short landscape phones: the hero name scales with height so it never runs off the top */
@media (orientation: landscape) and (max-height: 560px) {
  :root { --t-hero: clamp(30px, 11.5svh, 76px); }
  .hero .pin { padding-bottom: calc(var(--bar) + 10px); }
  .hero .line { margin-top: 10px; max-width: 46ch; }
}

/* no WebGL: posters + full legal layer list */
.no-gl #gl, .no-gl #anno, .no-gl #sheet, .no-gl .tblock, .no-gl .tbm, .no-gl #sect, .no-gl #expl, .no-gl #dcur, .no-gl #nodes, .no-gl .xray, .no-gl .found, .no-gl .card .hint { display: none !important; }
.no-gl .ch { height: auto; }
.no-gl .ch .pin { position: relative; height: auto; padding-top: 80px; padding-bottom: 40px; }
.no-gl .card { --co: 1; --cw: 1; opacity: 1; transform: none; }
.no-gl .card h2 { clip-path: none; }
.no-gl .poster { display: block; width: 100%; max-width: 720px; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 18px; border: 1px solid var(--line); }
.no-gl .layer-list { display: block; margin-top: 18px; list-style: none; border-top: 1px solid var(--line); }
.no-gl .layer-list li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--t-body); }
.no-gl .layer-list b { display: block; font-family: var(--mono); font-weight: 500; font-size: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--sig); }
.no-gl .hero { height: auto; } .no-gl .hero .pin { position: relative; min-height: 100svh; }

html.rm .card h2 { clip-path: none; }
html.rm .hero-in, html.rm .rows tbody tr > * { transition: none !important; opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .hero-in, .rows tbody tr > * { transition: none !important; opacity: 1 !important; transform: none !important; }
  .card h2 { clip-path: none; }
  #loader { transition: opacity .3s var(--ease-out); }
  #loader.done { transform: none; opacity: 0; }
}

.hero, .ch { pointer-events: none; }
.poster-mode main, .poster-mode footer, .poster-mode .nav, .poster-mode .bar, .poster-mode .prog, .poster-mode #nodes, .poster-mode #sect, .poster-mode #expl, .poster-mode #dcur, .poster-mode #sheet, .poster-mode .tblock, .poster-mode .tbm, .poster-mode #loader { display: none !important; }

.nw { white-space: nowrap; }
.node.nolabel span { visibility: hidden; }
#leads { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#leads line { stroke: rgba(var(--ice-rgb), .5); stroke-width: 1; opacity: 0; transition: opacity .3s var(--ease-out); }

/* drawing overlay */
#anno, #sheet { position: fixed; inset: 0; width: 100vw; height: 100lvh; z-index: 1; pointer-events: none; overflow: visible; }
#sheet { opacity: 0; }
#sheet .sb { stroke: rgba(var(--ice-rgb), .22); stroke-width: .6; fill: none; }
#sheet .st { fill: rgba(var(--ice-rgb), .38); font: 500 8.5px/1 var(--mono); text-anchor: middle; dominant-baseline: central; }
#anno .th { stroke: var(--ice); stroke-width: .6; fill: none; opacity: .8; }
#anno .ar { fill: var(--ice); stroke: none; }
#anno .bx, #anno .bl { fill: var(--void); stroke: var(--ice); stroke-width: .8; }
#anno .bg { fill: var(--void); }
#anno text { font-family: var(--mono); font-weight: 500; fill: var(--ice); font-size: 10.5px; letter-spacing: .02em; dominant-baseline: central; }
#anno .nt { fill: var(--tx-2); font-size: 11px; }
#anno .nm { text-anchor: middle; font-size: 10px; fill: var(--tx-2); }
.tblock { position: fixed; z-index: 21; right: 28px; bottom: calc(var(--bar) + 14px); display: none; min-width: 236px; background: var(--void); border: 1px solid rgba(var(--ice-rgb), .35); font: 500 10px/1 var(--mono); letter-spacing: .06em; color: var(--ice); opacity: 0; pointer-events: none; }
.tblock > div { display: flex; border-top: 1px solid rgba(var(--ice-rgb), .35); }
.tblock > div:first-child { border-top: 0; }
.tblock span { flex: 1; padding: 7px 9px; }
.tblock span + span { border-left: 1px solid rgba(var(--ice-rgb), .35); }
.tblock .tn { padding: 9px; text-transform: uppercase; color: var(--tx-2); font-size: 11px; }
.tbm { position: fixed; z-index: 21; right: var(--pad); top: 66px; color: rgba(var(--ice-rgb), .75); font-size: 9.5px; opacity: 0; pointer-events: none; }
@media (min-width: 900px) and (pointer: fine) { .tblock { display: block; } .tbm { display: none; } }
@media (max-width: 899px) { #anno .nt { font-size: 10px; } #anno text { font-size: 10px; } }

/* section cut marks */
#sect { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; overflow: visible; opacity: 0; }
#sect .pl { fill: none; stroke: rgba(var(--ice-rgb), .32); stroke-width: 1; stroke-dasharray: 14 3 2 3; }
#sect .tr { fill: none; stroke: rgba(var(--hi-rgb), .9); stroke-width: 1.5; stroke-dasharray: 18 3 3 3; }
#sect .ar { fill: rgba(var(--hi-rgb), .95); stroke: rgba(var(--hi-rgb), .95); stroke-width: 1.25; stroke-linejoin: round; }
#sect text { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; fill: var(--tx-1); text-anchor: middle; paint-order: stroke; stroke: var(--void); stroke-width: 4px; stroke-linejoin: round; }
#sect .la, #sect .lb { font-size: 13px; font-weight: 600; }
html.rv #loader { display: none; }

/* exploded view callouts */
#expl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; overflow: visible; opacity: 0; }
#expl .ld { fill: none; stroke: rgba(var(--hi-rgb), .75); stroke-width: 1; }
#expl circle { fill: var(--void); stroke: var(--tx-1); stroke-width: 1.25; }
#expl .bg { fill: rgba(var(--void-rgb), .88); stroke: rgba(var(--ice-rgb), .55); stroke-width: 1; }
#expl text { font-family: var(--mono); letter-spacing: .06em; }
#expl .k { font-size: 11px; font-weight: 600; fill: var(--hi); letter-spacing: .12em; }
#expl .t { font-size: 11px; fill: var(--ice); }
@media (max-width: 699px) { #expl .k, #expl .t { font-size: 10px; } #expl .bg { fill: rgba(var(--void-rgb), .8); } }

/* drafting cursor */
html.dcur, html.dcur body { cursor: none; }
#dcur { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: 0; }
#dcur i, #dcur b, #dcur span { position: absolute; left: 0; top: 0; will-change: transform; }
#dcur .h { width: 100%; height: 1px; background: rgba(var(--ice-rgb), .22); }
#dcur .v { width: 1px; height: 100%; background: rgba(var(--ice-rgb), .22); }
#dcur .sq { width: 8px; height: 8px; border: 1px solid var(--tx-1); background: rgba(var(--void-rgb), .6); opacity: 0; transition: opacity .12s var(--ease-out); }
#dcur .xy { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--ice); white-space: pre; background: rgba(var(--void-rgb), .7); padding: 2px 5px; }

/* hero star-chart callouts */
#gcall { position: fixed; inset: 0; width: 100vw; height: 100lvh; z-index: 1; pointer-events: none; overflow: visible; opacity: 0; }
#gcall .ld { stroke: var(--gc-l); stroke-width: .6; fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease-out) var(--d); }
#gcall .rg { stroke: var(--ice); stroke-width: .7; fill: none; opacity: 0; transition: opacity .6s ease var(--d); }
#gcall text { font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: .08em; fill: var(--gc-t); dominant-baseline: central; opacity: 0; transition: opacity .7s ease calc(var(--d) + .55s); }
#gcall.on .ld { stroke-dashoffset: 0; } #gcall.on .rg { opacity: .8; } #gcall.on text { opacity: .85; }
#gcall .u .ld { stroke: var(--gc-u); } #gcall .u .rg { fill: none; stroke: var(--gc-r); stroke-width: .7; }
#gcall.on .u text { opacity: .4; } #gcall.on .u .rg { opacity: .55; } #gcall.on .u .ld { opacity: .6; }
#gcall .u text, #gcall .u .ld, #gcall .u .rg { transition: opacity .35s ease, stroke-dashoffset 1.1s var(--ease-out) var(--d); }
#gcall.on.hov .u text { opacity: .8; } #gcall.on.hov .u .rg { opacity: 1; } #gcall.on.hov .u .ld { opacity: 1; }
#uncat { position: fixed; left: -22px; top: -22px; width: 44px; height: 44px; z-index: 3; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; opacity: 0; visibility: hidden; -webkit-tap-highlight-color: transparent; }
#uncat::after { content: ""; position: absolute; inset: 13px; border-radius: 50%; border: 1px solid rgba(var(--ice-rgb), 0); transition: border-color .35s ease, inset .35s ease; }
#uncat:hover::after, #uncat:focus-visible::after { border-color: rgba(var(--ice-rgb), .4); inset: 11px; }
#uncat:focus-visible { outline: none; }
.no-gl #gcall, .no-gl #uncat { display: none !important; }
html.rm #gcall .ld, html.rm #gcall .rg, html.rm #gcall text, html.rm #uncat::after { transition: none !important; }

/* globe city labels (current wave) */
#cities { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .3s ease; }
#cities .city { position: absolute; left: 0; top: 0; font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: .1em; color: var(--ice); white-space: nowrap; line-height: 12px; padding: 0 2px; background: rgba(var(--scrim-rgb), .72); opacity: 0; transition: opacity .35s ease; will-change: transform; }
.no-gl #cities { display: none !important; }
html.rm #cities .city { transition: none; }
.no-gl .layer-list li[data-region] b { display: none; }
.card h2 em { font-style: normal; color: var(--ice); }
.card h2 { font-size: clamp(34px, 9.4vw, 60px); line-height: .94; }
.record h2 { line-height: .94; }
@media (min-width: 900px) { .card h2 { font-size: clamp(44px, 1rem + 2.6vw, 66px); } }
footer .mail { white-space: nowrap; }
@media (max-width: 899px) { footer .mail { font-size: clamp(18px, 5.6vw, 40px); } }