/* Poster composition; Coherence remains the source of color and controls. Grid sets its own type families. */
@font-face { font-family: "Gatecode"; src: url("fonts/Gatecode-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Gatecode"; src: url("fonts/Gatecode-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
:root {
  --display: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Canvas artwork reads --mono too, so painted labels match the page. */
  --mono: "Gatecode", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --gutter: 16px;
  --frame-inset: 12px;
  --plate-inset: 24px;
  --cell-inset: 16px;
  --section-space: 32px;
  --grid-columns: repeat(12, minmax(0, 1fr));
  --micro: 12px;
  --micro-small: 11px;
  --micro-tiny: 11px;
  --motion-ease: cubic-bezier(.16, 1, .3, 1);
  --nav-height: 52px;
  --nav-clearance: calc(var(--nav-measured-height, var(--nav-height)) + var(--frame-inset) + env(safe-area-inset-bottom, 0px));
  /* The bar's glass: .8 ink keeps the 12px numerals above 4.5:1 over the brightest art; the frame is a lighter hairline than --line. */
  --nav-ink: rgba(8, 8, 7, .8);
  --nav-frame: rgba(233, 229, 220, .34);
  /* Film grain: fine fractal noise tiled over the plate gradients to dither their banding. Warm specks only where the noise tops its mean, so the ink lifts about one level, not six. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .96 0 0 0 0 .9 0 0 0 0 .8 1.6 0 0 0 -.8'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
}
html { scroll-padding-bottom: calc(var(--nav-clearance) + 24px); }
#access { scroll-margin-top: var(--gutter); }
body { padding: var(--gutter) var(--gutter) calc(var(--nav-height) + var(--dock-footer-height, 0px) + 48px); background: #050504; }
.shell { width: 100%; }
/* Selection and caret carry the plate's amber; on the amber plate itself they invert to ink. */
::selection { background: var(--amber); color: var(--void); }
.section-amber::selection, .section-amber ::selection { background: var(--void); color: var(--amber-bright); }
html { caret-color: var(--amber); }
.section-paper, .section-amber, .field input, .field textarea { caret-color: var(--void); }
.collab-modal .field input, .collab-modal .field textarea { caret-color: var(--amber); }
.scene {
  --plate-line: rgba(233, 229, 220, .2);
  container-type: inline-size;
  margin: 0 0 var(--section-space);
  padding-bottom: var(--nav-clearance);
  border: 1px solid var(--plate-line);
  background: var(--void);
}
.section-paper { --plate-line: rgba(8, 8, 7, .22); background: var(--paper); }
.section-amber { --plate-line: rgba(8, 8, 7, .28); background: var(--amber); }
/* The example plate is quieter: amber behind the chart, ember low left, grain on top. */
.scene-loop { background: var(--grain) 0 0 / 160px 160px, radial-gradient(ellipse 54vw 40vw at 84% 34%, rgb(242 153 31 / .06), rgb(242 153 31 / .036) 38%, rgb(242 153 31 / .013) 68%, transparent), radial-gradient(ellipse 56vw 40vw at 4% 90%, rgb(107 36 9 / .18), rgb(107 36 9 / .1) 38%, rgb(107 36 9 / .035) 68%, transparent), var(--void); }
.scene::before, .scene::after { content: none; }
/* A shared, quiet screen texture ties the paper and ink plates together. */
.scene::after { content: ''; position: absolute; inset: 0; z-index: 5; width: auto; height: auto; pointer-events: none; background: url("screen.svg") repeat; opacity: .045; }
.scene-frame { position: relative; padding: var(--plate-inset); }
.scene-heading { display: grid; grid-template-columns: var(--grid-columns); align-items: baseline; gap: 0; padding: 0 0 24px; border-bottom: 1px solid var(--plate-line); font: var(--micro)/1.4 var(--mono); letter-spacing: .02em; text-transform: uppercase; color: var(--paper-soft); }
.heading-rule { display: none; }
.section-label { grid-column: 1 / 12; gap: 8px; }
.plate-marks { position: absolute; z-index: 4; inset: var(--frame-inset); pointer-events: none; border-top: 1px solid var(--plate-line); border-bottom: 1px solid var(--plate-line); }
.plate-marks i, .hero-edge-marks i { position: absolute; width: 11px; height: 11px; color: currentColor; opacity: .4; }
.plate-marks i::before, .plate-marks i::after, .hero-edge-marks i::before, .hero-edge-marks i::after { content: ''; position: absolute; background: currentColor; }
.plate-marks i::before, .hero-edge-marks i::before { width: 11px; height: 1px; top: 5px; }
.plate-marks i::after, .hero-edge-marks i::after { height: 11px; width: 1px; left: 5px; }
.plate-marks i:nth-child(3n+1) { left: -5px; }
.plate-marks i:nth-child(3n+2) { left: calc(50% - 5px); }
.plate-marks i:nth-child(3n) { right: -5px; }
.plate-marks i:nth-child(-n+3) { top: -6px; }
.plate-marks i:nth-child(n+4) { bottom: -6px; }
/* The dock itself is clear so the bar can frost the page; the open footer carries the ink. */
.plate-colophon { color: var(--paper-soft); font: 11px/1.25 var(--mono); letter-spacing: .025em; text-transform: uppercase; }
.plate-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 44px; width: fit-content; border-bottom: 1px solid currentColor; font: 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .02em; }
.plate-link span { font-size: 17px; }
.plate-link:hover { color: var(--amber-bright); }
.section-paper .plate-link:hover { color: var(--orange-ink); }
/* A bounded artwork and a title along its lower edge, like a printed plate. */
/* The hero is warm ink: an amber glow high right, ember low left, and grain over both. The art is transparent, so the light reads between its glyphs. */
.scene-hero { min-height: 0; padding-bottom: 0; background: var(--grain) 0 0 / 160px 160px, radial-gradient(ellipse 62vw 46vw at 80% 10%, rgb(242 153 31 / .10), rgb(242 153 31 / .06) 38%, rgb(242 153 31 / .022) 68%, transparent), radial-gradient(ellipse 60vw 44vw at 6% 94%, rgb(107 36 9 / .25), rgb(107 36 9 / .14) 38%, rgb(107 36 9 / .05) 68%, transparent), #100b07; container-type: normal; isolation: auto; z-index: auto; overflow: visible; }
.hero-surface { position: relative; z-index: 2; container-type: inline-size; overflow: hidden; isolation: isolate; }
/* This edge belongs to the hero artwork and scrolls with its plate. It passes under
   the dock, so where they meet the bar's own border finishes each cross. */
.hero-edge-marks { position: absolute; z-index: 59; left: var(--frame-inset); right: var(--frame-inset); top: var(--hero-nav-top, calc(100svh - var(--gutter) - 1px - max(calc(var(--gutter) + var(--frame-inset) + 1px), env(safe-area-inset-bottom)) - var(--nav-height) - 2px)); height: 0; border-top: 1px solid var(--plate-line); pointer-events: none; color: var(--paper-soft); }
.hero-edge-marks i { top: -6px; }
.hero-edge-marks i:nth-child(1) { left: -5px; }
.hero-edge-marks i:nth-child(2) { left: calc(50% - 5px); }
.hero-edge-marks i:nth-child(3) { right: -5px; }
.scene-hero .scene-frame { display: grid; grid-template-columns: var(--grid-columns); grid-template-rows: 1fr auto; min-height: calc(100svh - 2 * var(--gutter) - 2px); padding: var(--plate-inset); padding-bottom: calc(var(--nav-clearance) + var(--plate-inset)); }
.plate-art { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-surface > .plate-art { top: var(--plate-inset); bottom: var(--nav-clearance); }
.plate-art canvas, .art-fallback { position: absolute; width: 100%; height: 100%; max-width: none; inset: 0; }
.art-fallback { opacity: .75; }
.plate-art[data-rendered="true"] .art-fallback { visibility: hidden; }
/* The SVG filter bleeds and blooms the artwork's own amber light.
   The phosphor grille sits over it; all motion uses the sculpture's clock. */
.plate-art-crt canvas, .plate-art-crt .art-fallback { filter: url("#hero-crt"); }
.plate-art-crt::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, transparent 0 1px, rgb(0 0 0 / .32) 1px 2px),
    repeating-linear-gradient(to right, rgb(255 190 90 / .04) 0 1px, transparent 1px 2px, rgb(0 0 0 / .16) 2px 3px),
    radial-gradient(ellipse at 50% 50%, transparent 25%, rgb(0 0 0 / .2) 70%, rgb(0 0 0 / .65) 100%);
}
/* On the full plate the grille and vignette reach the plate's own edges, so the
   background glow fades under them instead of stopping at the artwork's margin. */
@media (min-width: 601px) {
  .hero-surface > .plate-art-crt { overflow: visible; }
  .hero-surface > .plate-art-crt::after { inset: calc(-1 * var(--plate-inset)) 0 calc(-1 * var(--nav-clearance)); }
}
.hero-intro { position: relative; z-index: 2; grid-column: 1 / 5; grid-row: 1; align-self: start; margin-top: 0; max-width: 310px; padding-bottom: 92px; }
/* A quiet dark wash keeps the pitch legible over the brightest part of the field. */
.hero-intro::before { content: ''; position: absolute; z-index: -1; inset: -32px -56px -40px -40px; pointer-events: none; background: radial-gradient(ellipse at 35% 40%, rgb(8 8 7 / .72) 0, rgb(8 8 7 / .5) 45%, transparent 78%); }
.hero-kicker { margin: 0 0 16px; font-size: clamp(16px, 1.65cqw, 24px); line-height: 1.3; letter-spacing: -.02em; font-weight: 500; }
.hero-deck { max-width: 300px; margin: 0; font-size: 16px; line-height: 1.5; letter-spacing: -.012em; color: var(--paper-soft); }
.hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 16px; }
.hero-intro .plate-link { color: var(--paper-soft); }
.hero-intro .plate-link-primary { color: var(--amber-bright); }
.hero-intro .plate-link:hover { color: var(--paper-bright); }
.hero-art-label { grid-column: 9 / -1; grid-row: 1; justify-self: end; align-self: end; margin-top: var(--section-space); display: grid; gap: 4px; width: 100%; max-width: 320px; padding: 0 12px 8px; background: rgb(8 8 7 / .66); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.hero-figure { margin: 0; font-size: 14px; line-height: 1.45; letter-spacing: -.005em; color: var(--paper-soft); }
/* The field's readout and reset use the same quiet mono micro-type as the motion toggle. */
.field-readout { margin: 0; font: 11px/1.4 var(--mono); text-transform: uppercase; color: var(--paper-soft); }
.field-readout .field-num { color: var(--amber); }
.hero-art-label .field-reset { justify-self: start; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--paper-soft); font: 11px/1.4 var(--mono); text-transform: uppercase; text-align: left; cursor: pointer; }
.hero-art-label .field-reset:hover, .hero-art-label .field-reset:focus-visible { color: var(--amber-bright); }
.hero-figure-label { display: block; margin-bottom: 8px; padding-top: 12px; border-top: 1px solid var(--plate-line); font: var(--micro-small)/1.5 var(--mono); text-transform: uppercase; letter-spacing: .03em; color: var(--amber); }
.hero-art-label .motion-control { justify-self: start; }
.hero-art-label .motion-toggle { padding-inline: 0; text-align: left; }
.study-ramp { font: 11px/1 var(--mono); letter-spacing: .24em; white-space: nowrap; }
.hero-copy { grid-column: 1 / -1; grid-row: 2; margin: 0; padding: var(--section-space) 0 0; position: relative; z-index: 3; }
.hero-copy h1 { max-width: none; margin: 0 0 .08em; font-size: min(14.5cqw, 14svh); line-height: .84; letter-spacing: -.066em; font-weight: 600; text-transform: uppercase; color: var(--paper-bright); }
.title-period { color: var(--amber); }
/* The paper plate places a concise register above a monumental statement. */
.scene-thesis { background: var(--paper); }
.thesis-frame { display: flex; flex-direction: column; min-height: max(520px, 55cqw); }
.thesis-body { display: grid; grid-template-columns: var(--grid-columns); gap: 0; padding: var(--section-space) 0 0; margin: 0; }
.thesis-note { grid-column: 1 / 6; grid-row: 1; display: block; max-width: 400px; margin: 0; padding-right: 24px; }
.thesis-note p { margin: 0; max-width: none; color: var(--void); font-size: clamp(16px, 1.65cqw, 24px); line-height: 1.4; letter-spacing: -.02em; }
.thesis-note .plate-link { margin-top: 16px; color: var(--orange-ink); }
.approach-register { grid-column: 1 / 6; grid-row: 2; align-self: start; margin: 32px 0 0; border-top: 1px solid var(--plate-line); }
.approach-sphere { grid-column: 7 / 12; grid-row: 1 / 4; align-self: center; position: relative; aspect-ratio: 1; width: 100%; max-width: 420px; margin: 0; justify-self: center; color: #49463f; }
.approach-sphere canvas, .sphere-fallback { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.approach-sphere[data-rendered="true"] .sphere-fallback { visibility: hidden; }
.sphere-fallback { opacity: .6; }
.approach-register div { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--plate-line); }
.approach-register dt { font: var(--micro-small)/1.5 var(--mono); text-transform: uppercase; color: var(--orange-ink); }
.approach-register dd { margin: 0; font-size: 14px; line-height: 1.4; color: #4c483f; }
#thesis-title { position: relative; margin: auto 0 0; padding-top: 64px; font-size: 13.7cqw; line-height: .84; letter-spacing: -.066em; font-weight: 600; text-transform: uppercase; color: var(--orange); }
#thesis-title > span:first-child { display: block; color: var(--void); }
.thesis-period { color: var(--void); }
/* Structured content stays on the same rails as the poster captions. */
.system-frame { display: grid; grid-template-columns: var(--grid-columns); column-gap: 0; }
.system-frame .scene-heading { grid-column: 1 / -1; }
.system-intro { grid-column: 1 / 6; display: block; margin-top: var(--section-space); padding-right: var(--cell-inset); }
.system-intro h2 { font-size: clamp(28px, 3.6cqw, 58px); line-height: .92; }
.system-intro > p { max-width: 320px; margin: 24px 0 0; padding: 0; font-size: 16px; line-height: 1.5; }
.system-intro strong { font-weight: 500; color: var(--paper-bright); }
.system-access { margin-top: 24px; color: var(--amber-bright); }
.module-list { grid-column: 7 / -1; margin-top: var(--section-space); }
.module-row { grid-template-columns: minmax(0, 1fr) 24px; gap: 8px; min-height: 88px; padding: 16px 0; }
.module-title { font-size: clamp(26px, 3.2cqw, 42px); }
.module-description { grid-column: 1; grid-row: 2; font-size: 14px; line-height: 1.4; }
.module-arrow { grid-column: 2; grid-row: 1; justify-self: center; font-size: 22px; line-height: 1; }
.module-detail { padding: 0 24px 24px 0; }
.module-detail p { max-width: 58ch; font-size: 16px; line-height: 1.5; }
.module-detail dl { gap: var(--cell-inset); margin-block: 24px; }
.module-detail dt { font-size: var(--micro-small); }
.module-detail dd { max-width: 58ch; font-size: 14px; line-height: 1.5; }
.module-detail .text-link { font-size: 12px; min-height: 44px; }
.plate-word { display: flex; justify-content: space-between; align-items: baseline; gap: var(--cell-inset); padding: var(--section-space) var(--plate-inset) var(--plate-inset); color: var(--paper-bright); font-size: 16cqw; line-height: 1; letter-spacing: -.075em; font-weight: 600; text-transform: uppercase; }
.plate-word-arrow { color: var(--amber); font-size: .62em; letter-spacing: 0; }
.experiment-heading { display: grid; grid-template-columns: var(--grid-columns); gap: 0; align-items: start; margin: var(--section-space) 0; }
.experiment-heading h2 { grid-column: 1 / 7; padding-right: var(--cell-inset); }
.experiment-heading h2 { font-size: clamp(30px, 4.3cqw, 68px); line-height: .92; }
.experiment-heading > p { grid-column: 7 / -1; max-width: 360px; margin: 0; padding-left: var(--cell-inset); font-size: 16px; line-height: 1.5; }
/* Clear, so the plate's gradient and grain read behind the panels. */
.experiment { margin-top: 0; background: transparent; }
.experiment-topline { font-size: var(--micro); }
.experiment-topline, .experiment-bottomline { padding: 16px var(--cell-inset); gap: var(--cell-inset); }
.experiment-controls button { min-height: 48px; padding: 16px var(--cell-inset); font-size: 14px; }
.experiment-controls button span { font-size: var(--micro); }
.experiment-panels, .signal-chart { padding: var(--cell-inset); }
.example-panel .detail-index { font-size: var(--micro); }
.artifact-values dt, .example-panel .artifact-label, .signal-chart figcaption, .chart-metric { font-size: 12px; }
.example-panel p { max-width: 58ch; }
.example-panel .artifact-values { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px var(--cell-inset); }
.example-panel pre { margin-block: 16px; }
.signal-chart { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.signal-register { display: flex; justify-content: space-between; gap: 12px; color: var(--paper-muted); font: 11px/1.5 var(--mono); letter-spacing: .025em; text-transform: uppercase; }
.signal-chart > svg { margin-top: 16px; }
.chart-guides { stroke-dasharray: 2 6; opacity: .55; }
.chart-error-band { fill: var(--amber); opacity: .1; }
.chart-residuals { stroke: var(--amber); stroke-width: 1.5; stroke-dasharray: 2 4; opacity: .6; }
.chart-samples { fill: var(--void); stroke: var(--amber-bright); stroke-width: 2; }
.experiment[data-example-stage="2"] .chart-error-band { opacity: .22; }
.experiment[data-example-stage="2"] .chart-residuals { opacity: 1; stroke-width: 2.5; }
.signal-error { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 24px; border-top: 1px solid var(--line); }
.signal-error > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 16px var(--cell-inset) 0 0; }
.signal-error > div + div { padding-left: var(--cell-inset); border-left: 1px solid var(--line); }
.signal-error span { color: var(--paper-soft); font: 11px/1.5 var(--mono); text-transform: uppercase; }
.signal-error small { display: block; color: var(--paper-muted); font-size: inherit; text-transform: none; }
.signal-error strong { color: var(--amber-bright); font: 400 clamp(30px, 3.6cqw, 52px)/1 var(--mono); letter-spacing: -.065em; font-variant-numeric: tabular-nums; }
.signal-chart .chart-metric { margin-top: 16px; text-align: left; font-size: 12px; }
.experiment-bottomline p { font-size: 14px; }
.experiment-bottomline .text-link { font-size: 12px; min-height: 44px; }
.research-layout { display: grid; grid-template-columns: var(--grid-columns); gap: 0; margin: var(--section-space) 0 0; }
.research-layout h2 { grid-column: 1 / -1; padding: 0 0 var(--section-space); margin: 0; font-size: 8.8cqw; line-height: .92; letter-spacing: -.055em; font-weight: 500; }
.research-layout h2 .type-line:last-child { margin-left: 8.3333%; }
.research-intro { grid-column: 1 / 5; display: flex; flex-direction: column; min-width: 0; padding: var(--cell-inset) var(--cell-inset) 0 0; border-top: 1px solid var(--plate-line); }
.research-intro .detail-index { margin: 0 0 24px; font: var(--micro-small)/1.5 var(--mono); color: var(--orange-ink); }
.research-lede { margin: 0; padding: 0; border: 0; font-size: clamp(15px, 1.45cqw, 21px); line-height: 1.35; letter-spacing: -.02em; }
.research-provenance { margin: auto 0 0; padding-top: var(--section-space); font-size: 14px; line-height: 1.5; color: #4c483f; }
.inline-link { text-decoration: underline; text-underline-offset: 3px; color: var(--orange-ink); }
.inline-link:hover { color: var(--void); }
.research-study { grid-column: 5 / 9; position: relative; align-self: stretch; min-width: 0; margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--plate-line); color: var(--orange-ink); }
.research-study .plate-art { position: relative; inset: auto; flex: 1; min-height: 320px; }
.research-study figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px var(--cell-inset) 0; font: var(--micro-small)/1.5 var(--mono); text-transform: uppercase; color: #4c483f; }
.research-study .study-ramp { color: var(--orange-ink); font-size: 11px; }
.research-details { grid-column: 9 / -1; padding-left: var(--cell-inset); border-top: 1px solid var(--plate-line); border-left: 1px solid var(--plate-line); }
.research-entry { position: relative; padding: var(--cell-inset) 0 24px; }
.research-entry:last-child { border-bottom: 0; padding-bottom: 0; }
.research-entry .detail-index { font-size: var(--micro-small); }
.research-entry h3 { font-size: clamp(17px, 1.5cqw, 23px); margin: 20px 0 12px; }
.research-entry p { max-width: 58ch; font-size: 16px; line-height: 1.5; margin: 0; }
.research-entry-action { font-size: 12px; margin-top: 16px; min-height: 44px; align-items: center; }
.research-entry::before { content: ''; position: absolute; top: -1px; left: 0; width: 24px; height: 2px; background: var(--orange-ink); transform: scaleX(0); transform-origin: left; transition: transform 350ms var(--motion-ease); }
.research-entry:is(:hover, :focus-visible, :focus-within)::before { transform: scaleX(1); }
.research-entry-links { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.research-entry-links .research-entry-action { margin-top: 20px; }
.research-entry-links .research-entry-action:hover { color: var(--orange-ink); }
/* Team: intro on the left third, a three-up register of portraits on the right. */
.team-frame { display: grid; grid-template-columns: var(--grid-columns); }
.team-frame .scene-heading { grid-column: 1 / -1; }
.team-intro { grid-column: 1 / 5; margin-top: var(--section-space); padding-right: var(--cell-inset); }
.team-intro h2 { display: flex; flex-direction: column; margin: 0; font-size: clamp(28px, 3.6cqw, 58px); line-height: .92; }
.team-intro > p { max-width: 320px; margin: 24px 0 0; font-size: 16px; line-height: 1.5; }
.team-intro .plate-link { margin-top: 24px; color: var(--amber-bright); }
.team-list { grid-column: 5 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--section-space) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--plate-line); border-left: 1px solid var(--plate-line); }
.team-member { min-width: 0; padding: var(--cell-inset); border-right: 1px solid var(--plate-line); border-bottom: 1px solid var(--plate-line); }
.team-member img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; filter: grayscale(1) contrast(1.05); opacity: .9; transition: filter 350ms var(--motion-ease), opacity 350ms var(--motion-ease); }
.team-member:hover img { filter: none; opacity: 1; }
.team-name { margin: 16px 0 0; color: var(--paper-bright); font-size: 17px; line-height: 1.3; font-weight: 500; }
.team-role { margin: 6px 0 0; color: var(--paper-muted); font: var(--micro-small)/1.5 var(--mono); letter-spacing: .025em; text-transform: uppercase; }
@media (max-width: 800px) {
  .team-intro, .team-list { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .team-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Team mark: the ASCII star fills what is left of the intro column beside the portraits. */
.team-intro { display: flex; flex-direction: column; }
.team-mark { flex: 1; display: flex; flex-direction: column; min-height: 240px; min-width: 0; margin: 32px 0 0; border-top: 1px solid var(--plate-line); color: var(--amber-bright); }
.team-mark-art { position: relative; flex: 1; min-height: 200px; overflow: hidden; }
.team-mark-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.team-mark figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 0; font: var(--micro-small)/1.5 var(--mono); text-transform: uppercase; color: var(--paper-muted); }
.team-mark .study-ramp { color: var(--amber-bright); font-size: 11px; }
html:not(.has-js) .team-mark { display: none; }
@media (max-width: 800px) {
  .team-mark { flex: none; height: 300px; }
}
@media (max-width: 600px) {
  .team-mark { height: 260px; margin-top: 24px; }
}
/* Contact is one twelve-column sheet: stepped title, three prompts, email row. */
.scene-contact[data-scene] .scene-heading { color: var(--ember); }
.contact-body { position: relative; display: grid; grid-template-columns: var(--grid-columns); margin: 0; padding: 0; }
.contact-body h2 { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; position: relative; margin: 0; padding: 40px 0; font-size: clamp(40px, 7.2cqw, 114px); text-transform: uppercase; font-weight: 600; line-height: .84; letter-spacing: -.058em; border-bottom: 1px solid var(--plate-line); }
.contact-body h2::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), var(--plate-line) calc(25% - 1px), var(--plate-line) 25%); opacity: .45; }
.contact-body h2 .type-line { position: relative; }
.contact-body h2 .type-line:nth-child(1) { grid-column: 1 / -1; }
.contact-body h2 .type-line:nth-child(2) { grid-column: 4 / -1; padding-left: calc(var(--cell-inset) + 1px); color: var(--ember); }
.contact-body h2 .type-line:nth-child(3) { grid-column: 7 / -1; padding-left: calc(var(--cell-inset) + 1px); color: var(--ember); }
.contact-label { display: block; color: var(--ember); font: var(--micro-small)/1.5 var(--mono); letter-spacing: .025em; text-transform: uppercase; }
/* Account creation sits on the amber plate like a printed form: rules, not boxes. */
.access { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; border-top: 1px solid var(--plate-line); }
.access-intro { grid-column: 1 / 4; padding: 24px var(--cell-inset) 32px 0; }
.access-intro .detail-index { margin: 0 0 20px; font: var(--micro-small)/1.5 var(--mono); letter-spacing: .025em; text-transform: uppercase; color: var(--ember); }
.access-intro h3 { margin: 0 0 16px; font-size: clamp(20px, 2cqw, 30px); line-height: 1.1; letter-spacing: -.025em; font-weight: 500; }
.access-services { margin: 0 0 12px; max-width: 320px; font-size: 16px; line-height: 1.5; }

.access-form, .form-panel { grid-column: 4 / -1; padding: 24px 0 32px calc(var(--cell-inset) + 1px); border-left: 1px solid var(--plate-line); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--cell-inset); }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.field label { font: 12px/1.5 var(--mono); letter-spacing: .025em; text-transform: uppercase; color: var(--ember); }
.field label span { text-transform: none; letter-spacing: 0; opacity: .8; }
.field-hint { margin: 0; max-width: 56ch; font-size: 14px; line-height: 1.45; color: var(--ember); }
.field-hint strong { font-weight: 600; }
.field-error { margin: 0; font: 500 13px/1.4 var(--mono); letter-spacing: .01em; color: var(--ember); }
.form-grant { margin: 4px 0 20px; max-width: 460px; font-size: 14px; line-height: 1.45; color: var(--ember); }
.field input, .field textarea { width: 100%; margin: 0; padding: 10px 0; border: 0; border-bottom: 1px solid rgba(8, 8, 7, .45); border-radius: 0; background: transparent; color: var(--void); font: 400 16px/1.5 var(--display); letter-spacing: -.01em; transition: border-color 180ms ease; }
.field textarea { resize: vertical; min-height: 2.6em; }
.field input::placeholder, .field textarea::placeholder { color: rgba(8, 8, 7, .42); }
.field input:focus-visible, .field textarea:focus-visible { outline: 0; border-bottom-color: var(--void); box-shadow: 0 1px 0 var(--void); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 8px; }
.form-actions .button { min-height: 56px; padding-inline: 24px; font-size: 12px; }
.form-actions .text-link { border: 0; padding: 0; background: none; cursor: pointer; font-size: 12px; min-height: 44px; letter-spacing: .02em; color: var(--void); }
.form-actions .text-link span { color: var(--ember); }
.form-status { min-height: 1.5em; margin: 16px 0 0; font: var(--micro)/1.5 var(--mono); letter-spacing: .02em; text-transform: uppercase; color: var(--ember); }
.form-status.is-error { color: var(--ember); font-weight: 500; }
.access-form.is-submitting { opacity: .6; pointer-events: none; }
.form-panel .detail-index { margin: 0 0 16px; font: var(--micro-small)/1.5 var(--mono); letter-spacing: .025em; text-transform: uppercase; color: var(--ember); }
.form-panel p:last-child { margin: 0; max-width: 420px; font-size: clamp(15px, 1.45cqw, 21px); line-height: 1.3; letter-spacing: -.02em; }
.form-panel strong { font-weight: 500; }
.form-panel:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
/* Collaborate dialog: an ink plate over the page, mirroring the section rules. */
.collab-modal { width: min(640px, calc(100vw - 2 * var(--gutter))); max-height: calc(100svh - 2 * var(--gutter)); margin: auto; padding: 0; border: 1px solid var(--line); background: var(--void); color: var(--paper); }
.collab-modal::backdrop { background: rgba(5, 5, 4, .78); }
.collab-inner { padding: var(--plate-inset); }
.collab-head { position: relative; padding-right: 48px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.collab-head .detail-index { margin: 0 0 14px; font: var(--micro-small)/1.5 var(--mono); letter-spacing: .025em; text-transform: uppercase; color: var(--amber); }
.collab-head h2 { margin: 0; font-size: clamp(24px, 3cqw, 34px); line-height: 1.05; letter-spacing: -.03em; font-weight: 500; color: var(--paper-bright); }
.collab-close { position: absolute; top: -8px; right: -8px; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); background: transparent; color: var(--paper-soft); font: 400 22px/1 var(--display); cursor: pointer; transition: color 150ms ease, border-color 150ms ease; }
.collab-close:hover, .collab-close:focus-visible { color: var(--amber-bright); border-color: var(--amber); }
.collab-lead { margin: 0 0 24px; max-width: 460px; font-size: 16px; line-height: 1.45; color: var(--paper-soft); }
.collab-form, .collab-modal .form-panel { grid-column: auto; padding: 0; border: 0; }
.collab-modal .field label, .collab-modal .form-panel .detail-index { color: var(--amber); }
.collab-modal .field input, .collab-modal .field textarea { color: var(--paper-bright); border-bottom-color: var(--line); }
.collab-modal .field input::placeholder, .collab-modal .field textarea::placeholder { color: var(--paper-muted); }
.collab-modal .field input:focus-visible, .collab-modal .field textarea:focus-visible { border-bottom-color: var(--amber); box-shadow: 0 1px 0 var(--amber); }
.collab-modal .form-actions .text-link { color: var(--paper-soft); }
.collab-modal .form-actions .text-link:hover { color: var(--paper-bright); }
.collab-modal .form-status { color: var(--paper-soft); }
.collab-modal .form-status.is-error { color: var(--amber-bright); }
.collab-modal .form-panel p:last-child { color: var(--paper-bright); }
.collab-fallback { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); font: var(--micro)/1.5 var(--mono); letter-spacing: .02em; text-transform: uppercase; color: var(--paper-muted); }
.collab-fallback a { color: var(--paper-bright); text-transform: none; font-size: 12px; }
.collab-fallback a:hover { color: var(--amber-bright); }
.collab-fallback .text-link { border: 0; padding: 0; background: none; cursor: pointer; font-size: var(--micro); color: var(--amber); }
.collab-fallback .text-link.is-done { color: var(--paper-bright); }
.contact-actions { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; gap: 0; min-height: 112px; margin: 0; padding-block: 24px; border-top: 1px solid var(--plate-line); }
.contact-actions > .contact-label { grid-column: 1 / 4; padding-right: var(--cell-inset); }
.contact-address { grid-column: 4 / 9; width: fit-content; margin-inline: calc(var(--cell-inset) + 1px); padding-block: 12px; font: clamp(16px, 2cqw, 28px)/1.2 var(--display); letter-spacing: -.025em; border-bottom: 1px solid transparent; }
.contact-address:hover { border-color: currentColor; }
.contact-actions .button { grid-column: 9 / -1; justify-self: stretch; margin-left: calc(var(--cell-inset) + 1px); min-height: 56px; gap: 12px; font-size: 12px; }
/* Type is visible by default; JavaScript arms only observed, pending titles. */
.type-line { display: block; overflow: hidden; padding-block: .12em .22em; margin-block: -.12em -.22em; }
/* Stacked in block flow, two negative margins collapse to the larger one and the lines sit .12em too far apart; a flex column keeps each line to its own line-height. */
.hero-copy h1, #thesis-title, .system-intro h2, .experiment-heading h2, .research-layout h2 { display: flex; flex-direction: column; }
.type-ink { display: block; }
.reveal-armed:not(.reveal-visible) .type-ink { transform: translate3d(0, calc(var(--reveal-direction, 1) * 120%), 0); }
.reveal-armed.reveal-visible .type-ink { transform: none; transition: transform 900ms var(--motion-ease); transition-delay: calc(var(--line-order, 0) * 100ms); }
[data-grid-reveal].reveal-armed:not(.reveal-visible) { opacity: 0; transform: translate3d(0, calc(var(--reveal-direction, 1) * 20px), 0); }
[data-grid-reveal].reveal-armed.reveal-visible { opacity: 1; transform: none; transition: opacity 600ms ease-out, transform 800ms var(--motion-ease); }
.plate-art canvas, .art-fallback { transform: translate3d(0, calc((var(--scene-progress, .5) - .5) * -32px), 0); }
.plate-word .type-line { flex: 1; }
/* The footer rides inside the dock; its height follows --dock-progress so the bar grows into it as the page ends. */
.site-footer { position: static; z-index: auto; display: flex; flex-direction: column; justify-content: flex-end; height: calc(var(--dock-progress, 0) * var(--dock-footer-height, 0px)); padding: 0; overflow: hidden; background: var(--void); }
.site-footer:focus-within { height: var(--dock-footer-height, auto); }
.site-footer-inner { flex: none; position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(320px, 36vw, 480px); padding: 28px 16px 24px; font: 12px/1.5 var(--mono); color: var(--paper-soft); }
.site-footer-inner > :not(.plate-art) { position: relative; z-index: 1; }
/* The coherence field occupies its own register above the utility links. */
.footer-art { bottom: auto; height: calc(clamp(160px, 20vw, 280px) + 28px); mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 72%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 72%, transparent 100%); }
.site-footer-inner > .footer-art-label { position: absolute; top: 20px; left: 12px; z-index: 1; display: grid; grid-template-columns: auto auto; gap: 10px 24px; padding: 4px 14px 10px 4px; background: var(--void); font: var(--micro-small)/1.5 var(--mono); text-transform: uppercase; letter-spacing: .03em; color: var(--paper-soft); }
.footer-art-label .study-ramp { grid-column: 1 / -1; padding-bottom: 12px; border-bottom: 1px solid var(--line); color: var(--amber); }
.footer-details { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 32px; margin-top: clamp(160px, 20vw, 280px); padding-top: 16px; border-top: 1px solid var(--line); background: var(--void); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 0 20px; align-self: start; text-transform: uppercase; }
.footer-nav a:hover { color: var(--amber); }
.footer-details > span { white-space: nowrap; }
.footer-details > p { justify-self: end; text-align: right; }
.footer-details > .footer-mail { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; justify-self: end; font-size: 14px; text-transform: none; }
.site-footer p { margin: 0; text-transform: uppercase; }
.site-footer a { align-self: start; }
.site-footer a:hover { color: var(--amber); }
@media (max-width: 1000px) {
  .footer-details { grid-template-columns: 1fr 1fr; }
  .footer-nav { grid-column: 1 / -1; }
  .footer-details > .footer-mail { grid-column: 1 / -1; justify-self: start; }
  .access-intro { grid-column: 1 / -1; padding-right: 0; }
  .access-services { max-width: 520px; }
  .access-form, .form-panel { grid-column: 1 / -1; padding-top: 0; padding-left: 0; border-left: 0; }
}
/* The plate's black colophon is the persistent navigation, shared by all scenes. */
.page-dock { position: fixed; z-index: 60; bottom: calc(var(--gutter) + var(--frame-inset) + 1px); left: calc(var(--gutter) + var(--frame-inset) + 1px); right: calc(var(--gutter) + var(--frame-inset) + 1px); display: flex; flex-direction: column; }
/* One bar in the colophon's ink on every plate: hairline container, six numbered chapters in equal columns, an amber square before the current one. Corners stay square. */
/* The bar is ink over a frosted page. The blur sits on ::before, not the bar, so the compact index panel above it can blur the page for itself. */
.page-nav { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--nav-height); padding: 4px; border: 1px solid var(--nav-frame); border-radius: 0; background: var(--nav-ink); color: var(--paper-soft); font-family: var(--display); }
.page-nav::before { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
/* Without scripts the plate simply closes the page. */
html:not(.has-js) body { padding-bottom: var(--gutter); }
html:not(.has-js) .page-dock { position: static; margin-top: var(--section-space); }
html:not(.has-js) .site-footer { height: auto; }
.nav-signature { display: flex; align-items: center; flex: none; padding-inline: 12px; min-height: 44px; color: var(--paper-bright); transition: color 150ms ease; }
/* Brand: the lockup signs the nav; the spark alone stands in where only a square cell remains. Both fill with currentColor. */
.logo-sprite { position: absolute; }
.logo-lockup { display: block; flex: none; width: auto; height: 34px; aspect-ratio: 1395.64 / 913; color: currentColor; }
.logo-mark { display: none; flex: none; width: 17px; height: 21px; color: currentColor; }
.nav-signature:hover { color: var(--amber); }
.index-links { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); flex: 1 1 auto; min-width: 0; border-radius: 0; }
.index-links a { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 44px; padding: 0 8px; border-radius: 0; font: 500 15px/1 var(--display); letter-spacing: 0; text-transform: none; white-space: nowrap; color: var(--paper-soft); transition: color 150ms ease; }
/* Every chapter keeps the square's room, so the labels hold still as the current one changes. */
.index-links a::before { content: ''; flex: none; width: 8px; height: 8px; background: transparent; transition: background-color 150ms ease; }
.index-links a[aria-current] { color: var(--paper-bright); }
.index-links a[aria-current]::before { background: var(--amber); }
.index-links a:hover { color: var(--paper-bright); }
/* A step above --paper-muted: the numerals now sit on glass, and this holds 4.5:1 over paper and amber art alike. */
.index-num { font: 400 12px/1 var(--mono); letter-spacing: .02em; font-variant-numeric: tabular-nums; color: #a39e94; }
.index-links a[aria-current] .index-num { color: var(--paper-soft); }
.nav-toggle { display: none; }
.page-dock :focus-visible { outline-offset: -3px; }
section[id] { scroll-margin-top: 12px; }
#top { scroll-margin-top: var(--gutter); }
/* Controls keep their grid position; ink, rules, and arrowheads provide feedback. */
.plate-link, .contact-address, .research-entry, .research-entry h3, .module-title { transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease; }
.plate-link { position: relative; border-bottom-color: var(--plate-line); }
.plate-link::after { content: ''; position: absolute; inset: auto 0 -1px; height: 1px; background: currentColor; transform: scaleX(.16); transform-origin: left; transition: transform 350ms var(--motion-ease); }
.plate-link span, .text-link span, .research-entry-action > span, .button span { display: inline-block; transition: transform 300ms var(--motion-ease); }
.text-link { transition: color 180ms ease, border-color 180ms ease; }
.text-link:hover, .text-link:focus-visible { gap: 1.25rem; }
.button:hover { transform: none; }
:is(.plate-link, .text-link, .button):focus-visible > span,
.research-entry:focus-visible .research-entry-action > span { transform: translate(3px, -3px); }
.plate-link:focus-visible::after { transform: scaleX(1); }
.contact-address:focus-visible { border-color: currentColor; }
.module-row:focus-visible .module-title { color: var(--amber-bright); }
.research-entry:focus-visible h3 { color: var(--orange-ink); }
@media (hover: hover) and (pointer: fine) {
  .plate-link:hover::after { transform: scaleX(1); }
  :is(.plate-link, .text-link, .button):hover > span,
  .research-entry:hover .research-entry-action > span { transform: translate(3px, -3px); }
  .module-row:hover .module-title { color: var(--amber-bright); }
}
@media (min-width: 1200px) {
  :root { --gutter: 24px; --plate-inset: 32px; --cell-inset: 24px; --section-space: 48px; }
}
@media (min-width: 1600px) {
  .hero-intro { max-width: 310px; }
  .hero-deck { max-width: 295px; }
}
@media (max-width: 1100px) {
}
@media (max-width: 800px) {
  .contact-actions .button { padding-inline: 12px; }
  .hero-intro { grid-column: 1 / 6; }
  .hero-art-label { grid-column: 7 / -1; }
  .research-intro { grid-column: 1 / 5; }
  .research-study { grid-column: 5 / -1; min-height: 300px; }
  .research-study .plate-art { min-height: 280px; }
  .research-details { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--section-space); padding: 0; border-left: 0; }
  .research-entry { border-bottom: 0; padding-right: var(--cell-inset); }
  .research-entry:nth-child(2) { padding-left: var(--cell-inset); border-left: 1px solid var(--plate-line); }
  .research-entry:last-child { grid-column: 1 / -1; padding-top: var(--cell-inset); border-top: 1px solid var(--plate-line); }
  .research-entry:last-child p { max-width: 520px; }
  .research-entry h3 { font-size: 20px; }
  .system-intro { grid-column: 1 / 6; }
  .module-detail dl { grid-template-columns: 1fr; }
  .experiment-workspace { grid-template-columns: 1fr; }
  .experiment-panels { border-right: 0; }
  .signal-chart { border-top: 1px solid var(--line); width: 100%; }
  .example-panel { min-height: 0; }
}
/* Below 940px the seven numbered chapters no longer fit one row. The bar names
   the current chapter beside the spark, and Menu opens the full index above it. */
@media (max-width: 940px) {
  .page-nav { gap: 0; }
  .logo-lockup { display: none; }
  .logo-mark { display: block; }
  .nav-signature { justify-content: center; width: 44px; padding: 0; }
  .nav-toggle { display: flex; flex: 1 1 auto; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; min-height: 44px; padding: 0 12px 0 8px; border: 0; border-radius: 0; background: transparent; color: var(--paper-bright); font: 500 16px/1 var(--display); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 150ms ease; }
  .nav-toggle:active { background: var(--void-soft); }
  .nav-toggle-current { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; }
  .nav-toggle-current::before { content: ''; flex: none; width: 8px; height: 8px; background: var(--amber); }
  .nav-toggle-cue { display: inline-flex; align-items: center; gap: 10px; flex: none; font: 12px/1 var(--mono); letter-spacing: .02em; text-transform: uppercase; color: var(--paper-soft); }
  .nav-toggle-cue i { position: relative; width: 11px; height: 11px; transition: transform 250ms var(--motion-ease); }
  .nav-toggle-cue i::before, .nav-toggle-cue i::after { content: ''; position: absolute; background: currentColor; }
  .nav-toggle-cue i::before { top: 5px; left: 0; width: 11px; height: 1px; }
  .nav-toggle-cue i::after { top: 0; left: 5px; width: 1px; height: 11px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-cue { color: var(--paper-bright); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-cue i { transform: rotate(45deg); }
  /* The index sits on the bar and shares its top hairline (the bar's own, so the panel drops its bottom border), so the bar grows upward as one plate. It frosts the page itself. */
  .index-links { position: absolute; left: -1px; right: -1px; bottom: calc(100% + 1px); display: none; flex-direction: column; max-width: none; padding: 4px; border: 1px solid var(--nav-frame); border-bottom: 0; background: var(--nav-ink); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
  .page-nav[data-nav-open] .index-links { display: flex; animation: index-open 280ms var(--motion-ease) both; }
  .index-links a { justify-content: flex-start; min-height: 48px; padding: 0 12px; font-size: 17px; }
  .index-links a + a { box-shadow: inset 0 1px var(--line-soft); }
  /* Without scripts the dock closes the page, so every chapter shows in a plain grid. */
  html:not(.has-js) .nav-toggle { display: none; }
  html:not(.has-js) .page-nav { flex-wrap: wrap; }
  html:not(.has-js) .index-links { position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 1 1 100%; padding: 0; border: 0; }
}
@keyframes index-open { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
/* Without backdrop blur, or without scripts, the bar stays solid ink. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .page-nav { background: var(--void); }
  @media (max-width: 940px) { .index-links { background: var(--void); } }
}
html:not(.has-js) .page-nav { background: var(--void); }
@media (max-width: 600px) {
  :root { --nav-height: 44px; --gutter: 12px; --frame-inset: 8px; --plate-inset: 16px; --cell-inset: 12px; --section-space: 24px; }
  body { padding-bottom: calc(var(--nav-height) + var(--dock-footer-height, 0px) + 40px + env(safe-area-inset-bottom)); }
  /* The title leads, the artwork follows it, then the pitch and its actions. */
  .hero-surface { display: grid; grid-template-columns: minmax(0, 1fr); padding: var(--plate-inset) var(--plate-inset) 0; }
  /* The art is a band here, so the glows grow with the narrow plate and sit in the margins around it. */
  .scene-hero { background: var(--grain) 0 0 / 160px 160px, radial-gradient(ellipse 130vw 75vw at 90% 4%, rgb(242 153 31 / .10), rgb(242 153 31 / .06) 38%, rgb(242 153 31 / .022) 68%, transparent), radial-gradient(ellipse 130vw 80vw at 0% 96%, rgb(107 36 9 / .25), rgb(107 36 9 / .14) 38%, rgb(107 36 9 / .05) 68%, transparent), #100b07; }
  .scene-loop { background: var(--grain) 0 0 / 160px 160px, radial-gradient(ellipse 120vw 70vw at 90% 62%, rgb(242 153 31 / .06), rgb(242 153 31 / .036) 38%, rgb(242 153 31 / .013) 68%, transparent), radial-gradient(ellipse 120vw 70vw at 0% 96%, rgb(107 36 9 / .18), rgb(107 36 9 / .1) 38%, rgb(107 36 9 / .035) 68%, transparent), var(--void); }
  .scene-hero .scene-frame { display: contents; }
  .hero-edge-marks { display: none; }
  .hero-copy { grid-row: 1; padding: 0; }
  .hero-copy h1 { font-size: 15cqw; letter-spacing: -.06em; }
  .hero-surface > .plate-art { position: relative; inset: auto; top: auto; bottom: auto; grid-row: 2; height: min(86vw, 360px); margin: var(--section-space) calc(-1 * var(--plate-inset)) 0; }
  .hero-intro { grid-column: auto; grid-row: 3; max-width: none; padding: var(--section-space) 0 0; }
  .hero-kicker { font-size: 20px; max-width: 22ch; }
  .hero-deck { font-size: 16px; max-width: 34ch; }
  .hero-intro .plate-link { margin-top: 5px; font-size: 12px; }
  .hero-art-label { grid-column: auto; grid-row: 4; justify-self: stretch; width: auto; max-width: none; padding: 0; background: none; margin: var(--section-space) 0 var(--plate-inset); }
  .thesis-frame { min-height: 600px; }
  .thesis-body { grid-template-columns: 1fr; gap: 24px; }
  .thesis-note { grid-column: 1; grid-row: auto; padding-right: 0; }
  .thesis-note p { font-size: 18px; max-width: 340px; }
  .approach-register { grid-column: 1; grid-row: auto; max-width: 260px; margin: 0; }
  .approach-sphere { grid-column: 1; grid-row: auto; max-width: 240px; }
  .approach-register div { grid-template-columns: 88px 1fr; padding: 8px 0; gap: 8px; align-items: baseline; }
  .approach-register dd { font-size: 14px; }
  #thesis-title { padding-top: 48px; font-size: 12.8cqw; }
  .system-frame { display: block; }
  .system-intro { padding: 0; }
  .system-intro h2 { font-size: 36px; }
  .system-intro > p { max-width: 330px; font-size: 16px; margin-top: 24px; }
  .module-title { font-size: 30px; }
  .plate-word { font-size: 16cqw; }
  .experiment-heading { display: block; }
  .experiment-heading h2 { font-size: 34px; }
  .experiment-heading > p { margin-top: 24px; padding-left: 0; font-size: 16px; }
  .experiment-controls button { padding: 12px; font-size: 12px; }
  .example-panel h3 { font-size: 28px; }
  .example-panel p { font-size: 16px; }
  .research-layout { display: grid; }
  .research-layout h2 { font-size: 10cqw; }
  .research-intro { grid-column: 1 / -1; padding-right: 0; display: block; }
  .research-intro .detail-index { margin-bottom: 16px; }
  .research-lede { font-size: 18px; }
  .research-provenance { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--plate-line); font-size: 14px; }
  .research-study { grid-column: 1 / -1; border-top: 0; min-height: 260px; margin-top: 24px; }
  .research-study .plate-art { min-height: 240px; }
  .research-study figcaption { padding-inline: 0; }
  .research-entry h3 { font-size: 18px; }
  .research-entry p { font-size: 16px; }
  .research-entry-action { font-size: 12px; gap: 8px; }
  .contact-body h2 { padding-block: 32px; font-size: 8.6cqw; }
  .contact-body h2 .type-line:nth-child(2) { grid-column: 2 / -1; padding-left: 0; }
  .contact-body h2 .type-line:nth-child(3) { grid-column: 3 / -1; padding-left: 0; }
  .contact-actions { row-gap: 16px; }
  .contact-actions > .contact-label { grid-column: 1 / -1; }
  .contact-address { grid-column: 1 / -1; justify-self: start; font-size: 21px; margin: 0; padding: 0; }
  .contact-actions .button { grid-column: 1 / -1; margin: 0; font-size: 12px; }
  .site-footer-inner { min-height: 520px; padding: 20px 12px 24px; }
  .footer-art { top: 112px; height: 188px; }
  .footer-details { grid-template-columns: 1fr; gap: 8px; margin-top: 316px; }
  .footer-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
  .footer-nav a:first-child { grid-column: span 2; }
  .footer-details > p { justify-self: start; text-align: left; }
  .site-footer-inner > .footer-art-label { top: 12px; left: 8px; }
  .hero-actions { margin-top: 5px; }
  .access-intro, .access-form, .form-panel { grid-column: 1 / -1; padding-inline: 0; border-left: 0; }
  .example-panel .artifact-values { grid-template-columns: 1fr; }
  .signal-error strong { font-size: 30px; }
  .access-form, .form-panel { padding-top: 0; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .form-actions .button { width: 100%; }
  .research-details { grid-template-columns: 1fr; }
  .research-entry:nth-child(2) { padding-left: 0; border-left: 0; border-top: 1px solid var(--plate-line); padding-top: var(--cell-inset); }
  .collab-inner { padding: var(--plate-inset); }
  /* Same side inset as desktop: the bar lines up with the plate's registration marks. */
  .page-dock { bottom: max(calc(var(--gutter) + var(--frame-inset) + 1px), env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .plate-art canvas, .art-fallback { transform: none; }
  .page-nav[data-nav-open] .index-links { animation: none; }
  .nav-toggle-cue i { transition: none; }
  .reveal-armed .type-ink, [data-grid-reveal].reveal-armed { transform: none; opacity: 1; transition: none; }
  :is(.plate-link, .text-link, .button) > span, .research-entry .research-entry-action > span { transform: none !important; }
}

/* Motion and recovery controls use the same quiet rules as the printed plates. */
.motion-toggle { min-height: 44px; padding: 0 8px; border: 0; background: transparent; color: var(--paper-soft); font: 11px/1.4 var(--mono); text-transform: uppercase; cursor: pointer; }
.motion-toggle:hover, .motion-toggle:focus-visible { color: var(--amber-bright); }
.motion-toggle:disabled { cursor: default; }
.motion-control { justify-self: end; }
.form-recovery { margin: 12px 0 0; font: 12px/1.5 var(--mono); color: var(--ember); }
.has-js .form-recovery[data-nojs] { display: none; }
html:not(.has-js) .access-form :is(.field-row, .field, .form-grant, .form-status, .form-actions .button) { display: none; }
.form-recovery a { display: inline-flex; margin-left: 4px; align-items: center; min-height: 44px; color: var(--void); font: 12px/1.5 var(--mono); text-decoration: underline; text-underline-offset: 4px; }
.access-form.is-submitting button { cursor: wait; }
.field [aria-invalid="true"] { border-bottom: 2px solid var(--ember); padding-bottom: 9px; }
.collab-modal .field [aria-invalid="true"] { border-bottom-color: var(--amber-bright); }
.collab-modal .field-hint { color: var(--paper-soft); }
.collab-modal .field-hint strong { color: var(--amber-bright); }
.collab-modal .field-error { color: var(--amber-bright); }
.footer-nav a, .collab-fallback :is(a, button) { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; }
@media (max-width: 600px) {
  .hero-surface > .plate-art { mask-image: linear-gradient(to bottom, transparent, #000 48px, #000 calc(100% - 48px), transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
  .motion-toggle { font-size: 11px; padding-inline: 0; }
}
@media (min-width: 601px) and (max-height: 800px) {
  .hero-copy h1 { font-size: min(14.5cqw, 12svh); }
}
@media (min-width: 601px) and (max-width: 1000px) {
  .contact-actions { row-gap: 16px; }
  .contact-actions > .contact-label { grid-column: 1 / -1; }
  .contact-address { grid-column: 1 / 8; margin: 0; }
  .contact-actions .button { grid-column: 8 / -1; margin: 0; padding-inline: 24px; font-size: 12px; }
}
@media (max-height: 600px) {
  .site-footer-inner { min-height: 0; padding-block: 16px; }
  .footer-details { margin-top: 0; padding-top: 0; border-top: 0; }
  .site-footer-inner > :is(.footer-art, .footer-art-label) { display: none; }
}

/* Cursor: the registration mark becomes the pointer (cursor.js). The class reaches <html> only after a fine pointer first moves; text fields keep the native I-beam. */
.has-custom-cursor, .has-custom-cursor * { cursor: none !important; }
.has-custom-cursor textarea, .has-custom-cursor [contenteditable]:not([contenteditable="false"]), .has-custom-cursor input:not([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="image"], [type="hidden"]) { cursor: text !important; }
.cursor-layer { --cursor-frame: var(--amber-bright); --cursor-cross: var(--paper-bright); --cursor-text: var(--void); position: fixed; inset: 0; z-index: 90; overflow: hidden; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 120ms ease, visibility 120ms; }
.cursor-layer.is-visible { opacity: 1; visibility: visible; }
.cursor-corner, .cursor-cross, .cursor-label { position: absolute; left: 0; top: 0; will-change: transform; }
/* Four corner brackets, 6px arms, like the tracker boxes drawn on the art. */
.cursor-corner { width: 6px; height: 6px; border: 0 solid currentColor; color: var(--cursor-frame); transition: color 150ms ease; }
.cursor-corner[data-corner="tl"] { border-width: 1.2px 0 0 1.2px; }
.cursor-corner[data-corner="tr"] { border-width: 1.2px 1.2px 0 0; }
.cursor-corner[data-corner="bl"] { border-width: 0 0 1.2px 1.2px; }
.cursor-corner[data-corner="br"] { border-width: 0 1.2px 1.2px 0; }
/* The same 11px "+" as the plate marks; locked, it closes down to a 3px square. */
.cursor-cross { width: 11px; height: 11px; color: var(--cursor-cross); transition: color 150ms ease; }
.cursor-cross::before, .cursor-cross::after { content: ''; position: absolute; background: currentColor; transition: transform 150ms var(--motion-ease); }
.cursor-cross::before { left: 0; top: 5px; width: 11px; height: 1px; }
.cursor-cross::after { left: 5px; top: 0; width: 1px; height: 11px; }
.cursor-layer.is-lock .cursor-cross::before { transform: scale(.27273, 3); }
.cursor-layer.is-lock .cursor-cross::after { transform: scale(0); }
.cursor-label { height: 17px; padding: 0 4px; background: var(--cursor-frame); color: var(--cursor-text); font: 11px/17px var(--mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; opacity: 0; transition: opacity 120ms ease, background-color 150ms ease, color 150ms ease; }
.cursor-layer.has-label .cursor-label { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .cursor-layer, .cursor-layer *, .cursor-layer ::before, .cursor-layer ::after { transition: none; }
}