/* Next Great American Base · site styles. Created 2026-11-09 (PT) · Updated 2026-11-10 · Version 2.
   The dark room: one blue-black field, lit things in it. Brand colour and type kept (NGAB kit): the mark's four cool
   tones, gold only as light and on the one action, Archivo Expanded for the name and headings, Archivo for reading. */
/* the world: fixed behind the page, seen only through the windows */
#world { position: fixed; inset: 0; width: 100vw; height: 100lvh; display: block; z-index: 0; }
main { position: relative; z-index: 1; }
/* the page's wrappers never catch the pointer over a window; the world behind them is what is there */
main, .hero { pointer-events: none; } main > section, .hero-band { pointer-events: auto; }
main > section:not(.pinned):not(.close) { background: var(--bg); }

/* ── hero: the world fills the first screen; the words sit on it, over its own night */
.hero { position: relative; z-index: 1; height: 100svh; min-height: 620px; }
.hero-window { position: absolute; inset: 0; pointer-events: none; } /* the world shows through: the canvas is the picture here */
.hero-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.js .hero-still { display: none; }
.js.no-gl .hero-still { display: block; }
/* the words are held to the screen and dissolve as the page starts to move, so no dark band ever slides up over the scene */
.hero-band { position: fixed; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 160px var(--m) 26px; background: linear-gradient(to bottom, transparent 0%, rgba(7, 10, 16, .6) 46%, rgba(7, 10, 16, .88) 100%); opacity: var(--ho, 1); transform: translate3d(0, calc(var(--hy, 0) * 1px), 0); will-change: opacity, transform; }
.hero-band.gone { display: none; } /* taste-skill-ignore: scrim under words on the live scene */
.hero-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.lede { max-width: calc(6 * var(--col) + 5 * var(--gap)); font-size: var(--t-lead); line-height: 1.35; color: var(--nose); }
.hero-film { display: grid; grid-template-columns: 208px auto; align-items: center; gap: 18px; text-decoration: none; color: var(--nose); background: rgba(7, 10, 16, .72); padding: 8px 22px 8px 8px; transition: background-color .3s, transform .5s var(--arrive); }
.hero-film:hover { background: var(--surface); transform: translateY(-3px); }
.hero-film video { width: 208px; aspect-ratio: 16 / 9; object-fit: cover; }
.hero-film b { font-weight: 600; font-size: var(--t-body); color: var(--hot); }
.name { font-weight: 500; text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.86; white-space: nowrap; color: var(--nose); font-size: 5.9vw; transform-origin: 0 100%; max-width: 100%; }

/* ── staircase statement: the mark's floors, lightest at the top, down to the core's gold */
.stair-sec { position: relative; min-height: 100svh; display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 var(--gap); padding: 0 var(--m); align-items: center; }
.stair { grid-column: 1 / 10; }
.st { font-stretch: 125%; font-weight: 500; font-size: var(--t-h2); line-height: 1.06; letter-spacing: -0.01em; white-space: nowrap; }
.st1 { color: var(--nose); } .st2 { color: var(--muted); padding-left: 4vw; } .st3 { color: var(--dim); padding-left: 8vw; }
.st4 { color: #7489a8; padding-left: 12vw; } .st5 { color: var(--accent); padding-left: 16vw; }
.stair-pics { grid-column: 10 / 13; display: grid; gap: 16px; }
.stair-pics figure { margin: 0; } .stair-pics img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.stair-note { position: absolute; left: var(--m); bottom: 64px; max-width: 440px; font-size: var(--t-small); color: var(--muted); }

/* ── below the surface: three photographs down a diagonal */
.diag { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 var(--gap); padding: 160px var(--m) 160px; }
.diag-h { grid-column: 7 / 13; grid-row: 1; align-self: start; font-weight: 300; font-size: var(--t-h2); }
.stage { display: contents; }
.stage figure { margin: 0; } .stage img { width: 100%; object-fit: cover; }
.diag b { font-weight: 600; color: var(--nose); }
.s1 figure { grid-column: 1 / 6; grid-row: 1 / 3; } .s1 img { aspect-ratio: 3 / 4; }
.s1 p { grid-column: 6 / 9; grid-row: 2; align-self: start; max-width: 36ch; margin-top: 48px; }
.s2 figure { grid-column: 6 / 10; grid-row: 3; margin-top: -120px; } .s2 img { aspect-ratio: 1; }
.s2 p { grid-column: 10 / 13; grid-row: 3; align-self: start; margin-top: -120px; max-width: 36ch; }
.s3 figure { grid-column: 7 / 13; grid-row: 4; margin-top: 96px; } .s3 img { aspect-ratio: 16 / 10; }
.s3 p { grid-column: 3 / 7; grid-row: 4; align-self: start; margin-top: 96px; max-width: 36ch; justify-self: end; }

/* ── pinned scenes (the way in, the taproot): the world holds for a few screens; captions step with the scroll */
.pinned { position: relative; height: calc(var(--screens) * 100svh); pointer-events: none; }
.pin-mark { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; } /* taste-skill-ignore: invisible scroll marker, not a rule */
.pin-stage { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 var(--gap); padding: 0 var(--m); align-items: center; }
.pin-text { grid-column: 1 / 5; pointer-events: auto; }
.pin-low { align-self: end; padding-bottom: 12svh; }
.pin-text h2, .pin-text h3 { font-size: var(--t-h2); line-height: 1.02; margin-bottom: 20px; }
.pin-steps { display: grid; }
.pin-step { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .5s var(--arrive), transform .7s var(--arrive), visibility 0s .5s; }
.pin-step.on { opacity: 1; visibility: visible; transform: none; transition-delay: .15s, .15s, 0s; }
.pin-step > p { color: var(--ink); max-width: 40ch; }
.flows { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 16px; }
.flows button { font: inherit; font-size: var(--t-small); color: var(--ink); background: var(--surface); border: 0; border-radius: 0; padding: 10px 16px; cursor: pointer; transition: background-color .25s, color .25s, transform .3s var(--arrive); }
.flows button:hover { background: #1b2c4c; transform: translateY(-1px); }
.flows button[aria-pressed="true"] { background: var(--nose); color: var(--bg); }
.flow-line { color: var(--hot); font-size: var(--t-small); min-height: 3.2em; max-width: 40ch; }

/* ── off every grid: full-bleed close-ups, one solid card stepping right */
.frame { position: relative; height: 100svh; overflow: hidden; }
.frame > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card { position: absolute; top: 24svh; width: calc(3 * var(--col) + 2 * var(--gap)); min-height: 52svh; background: var(--nose); color: var(--bg); padding: 28px 24px 0; display: flex; flex-direction: column; gap: 12px; }
.c1 { left: calc(var(--m) + 3 * (var(--col) + var(--gap))); } .c2 { left: calc(var(--m) + 6 * (var(--col) + var(--gap))); } .c3 { left: calc(var(--m) + 9 * (var(--col) + var(--gap))); }
.card h2, .card h3 { font-size: var(--t-h3); color: var(--bg); }
.card p { font-size: var(--t-small); color: #1d2a40; } .card .fact { font-weight: 600; color: var(--bg); }
.card img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; margin-top: auto; }
.cardlink { display: block; margin: 0 -24px; padding: 15px 24px; background: var(--bg); color: var(--nose); text-decoration: none; font-size: var(--t-small); font-weight: 500; transition: background-color .25s, color .25s; }
.cardlink:hover { background: var(--accent); color: var(--bg); }

/* ── what the base runs on: one size, three columns, the description in the fourth */
.index { padding: 180px var(--m); }
.index h2 { font-size: var(--t-h3); margin-bottom: 96px; }
.cols { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 var(--gap); }
.col { list-style: none; margin: 0; padding: 0; grid-column: span 3; font-size: var(--t-body); line-height: 1.25; }
.col li { color: var(--muted); padding: 3px 0; cursor: default; transition: color .2s; }
.col li.group { color: var(--nose); font-weight: 600; margin-bottom: 1.25em; }
.col li:not(.group):hover, .col li:not(.group):focus, .col li.on { color: var(--nose); outline: none; }
.desc { grid-column: 10 / 13; grid-row: 1; color: var(--hot); font-size: var(--t-body); line-height: 1.5; min-height: 6em; }

/* ── defended: three sheets that slide up over each other */
.curtain { position: relative; }
.interlock { position: relative; z-index: 3; margin-left: calc(var(--m) + 7 * (var(--col) + var(--gap))); width: calc(4 * var(--col) + 3 * var(--gap)); padding: 140px 0 0; margin-bottom: -96px; }
.interlock h2 { font-size: var(--t-h3); margin-bottom: 16px; }
.interlock p { color: var(--ink); background: var(--bg); padding: 0 0 20px; }
.sheet { position: sticky; top: 0; height: 100svh; margin: 0; overflow: hidden; }
.sheet video { width: 100%; height: 100%; object-fit: cover; }
.sheet figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px var(--m) 28px; font-size: var(--t-small); color: var(--nose); background: linear-gradient(transparent, rgba(7, 10, 16, .78)); } /* taste-skill-ignore: neutral scrim under a caption on a photograph */

/* ── people keep the decision: an inset panel, the photograph cut to the mark's arrowhead */
.panel-sec { padding: 20px; }
.inset { position: relative; background: var(--surface); min-height: 110svh; overflow: hidden; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto 1fr; gap: 0 var(--gap); padding: 56px 36px 0; }
.inset-h { grid-column: 1 / 7; grid-row: 1; color: var(--nose); font-size: var(--t-h2); }
.shaped { grid-column: 1 / 8; grid-row: 2; margin: 48px 0 0; align-self: end; }
.shaped img { width: 100%; aspect-ratio: 156 / 100; object-fit: cover; clip-path: polygon(50% 0, 100% 100%, 78% 90%, 67% 95.5%, 50% 83%, 33% 95.5%, 22% 90%, 0 100%); transform: translateY(16%); }
.inset-text { grid-column: 9 / 13; grid-row: 1 / 3; display: grid; gap: 64px; align-content: start; }
.inset-text h3 { margin-bottom: 12px; color: var(--nose); }
.inset-text p { color: var(--ink); max-width: 38ch; }

/* ── a home for those who defend it: each chapter on its own picture's darkest ground */
.chapter { position: relative; height: 100svh; background: var(--bg); overflow: hidden; }
.chapter::before { content: ''; position: absolute; inset: 0; background: var(--field); clip-path: inset(20px); transition: clip-path .8s var(--arrive); }
.chapter.arrive::before { clip-path: inset(0); }
.chapter h2, .chapter h3 { position: absolute; top: 32px; left: 32px; font-size: var(--t-h3); color: var(--nose); max-width: 18ch; z-index: 1; }
.portrait { position: absolute; left: 50%; top: 112px; height: 75%; aspect-ratio: 3 / 4; transform: translateX(-50%) scale(.92); transition: transform .8s var(--arrive); }
.chapter.arrive .portrait { transform: translateX(-50%) scale(1); }
.portrait video { width: 100%; height: 100%; object-fit: cover; }
.ch-line { position: absolute; left: 32px; bottom: 32px; max-width: 32ch; color: var(--ink); }
.ch-link { position: absolute; right: 32px; bottom: 32px; font-size: var(--t-small); color: var(--nose); text-underline-offset: 4px; }
.ch-link:hover { color: var(--hot); }

/* ── the teaser */
.film { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 var(--gap); padding: 200px var(--m); align-items: end; }
.film-head { grid-column: 1 / 4; }
.film-head h2 { font-size: var(--t-h3); margin-bottom: 16px; }
.film-head p { color: var(--muted); }
.player { grid-column: 4 / 13; position: relative; background: #000; }
.player video { width: 100%; aspect-ratio: 16 / 9; }
.play { position: absolute; left: 24px; bottom: 72px; display: flex; align-items: center; justify-content: center; background: var(--accent); border: 0; border-radius: 0; width: 72px; height: 72px; cursor: pointer; transition: background-color .25s, transform .4s var(--arrive); }
.play svg { width: 26px; fill: var(--bg); }
.play:hover { background: var(--hot); transform: scale(1.05); }
.player.playing .play { opacity: 0; pointer-events: none; }

/* ── the close: the world on the left two thirds, a filled column of night on the right */
.close { position: relative; height: 92svh; min-height: 620px; display: grid; grid-template-columns: repeat(12, 1fr); }
.close-window { grid-column: 1 / 9; pointer-events: none; }
.close { pointer-events: none; } .close-text { pointer-events: auto; }
.close-text { grid-column: 9 / 13; background: var(--bg); padding: 0 var(--m) 0 calc(var(--col) + var(--gap)); display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.close-text h2 { font-size: var(--t-h2); }
.close-text p { color: var(--ink); }
.close-text .fact { font-weight: 600; color: var(--nose); }
.close-text .btn { align-self: flex-start; margin-top: 8px; }

/* ── entrances: the parts of each section arrive in order; nothing stays hidden without script */
.js [data-rise] { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--arrive), transform 1s var(--arrive); transition-delay: calc(var(--i, 0) * 80ms); }
.js [data-rise].in { opacity: 1; transform: none; }

/* ── phone: its own composition */
@media (max-width: 900px) {
  @media (max-width: 560px) { .cols { grid-template-columns: 1fr; } }
  .hero-band { gap: 20px; padding: 120px var(--m) 18px; }
  .hero-row { flex-direction: column; align-items: stretch; gap: 18px; order: 2; }
  .lede { max-width: none; }
  .hero-film { grid-template-columns: 112px 1fr; padding: 6px 14px 6px 6px; } .hero-film video { width: 112px; }
  .name { white-space: normal; }
  .name span { display: block; white-space: nowrap; }
  .stair-sec { display: block; padding: 120px var(--m); min-height: 0; }
  .st { font-size: 6.4vw; white-space: normal; }
  .st2 { padding-left: 4vw; } .st3 { padding-left: 8vw; } .st4 { padding-left: 12vw; } .st5 { padding-left: 16vw; }
  .stair-pics { margin-top: 40px; grid-template-columns: 1fr 1fr; }
  .stair-note { position: static; margin-top: 32px; }
  .diag { display: block; padding: 120px var(--m); }
  .diag-h { margin-bottom: 40px; }
  .stage { display: block; margin-bottom: 56px; }
  .diag .stage p { margin-top: 16px; font-size: 16px; max-width: none; }
  .s2 figure, .s2 p { margin-top: 0; }
  .s2 figure { width: 62%; margin: 0 0 0 auto; } .diag .s2 p { margin-left: 38%; }
  .s3 figure { width: 78%; margin: 0; }
  .pin-stage { align-items: end; padding-bottom: 0; }
  .pin-text { grid-column: 1 / -1; padding: 20px 0 32px; }
  .pin-low { padding-bottom: 32px; }
  .pin-text h2, .pin-text h3 { margin-bottom: 12px; }
  .flows button { padding: 10px 13px; }
  .card { left: 0 !important; right: 0; bottom: 0; top: auto; width: auto; min-height: 46svh; padding: 20px var(--m) 0; display: grid; grid-template-columns: 1fr 96px; align-content: start; column-gap: 16px; }
  .card > *:not(img) { grid-column: 1; } .card img { grid-column: 2; grid-row: 1 / 3; width: 96px; margin: 0; }
  .card .cardlink { grid-column: 1 / -1; margin: auto calc(-1 * var(--m)) 0; }
  .index { padding: 120px var(--m); } .index h2 { margin-bottom: 48px; }
  .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--gap); } .col { grid-column: auto; margin-bottom: 40px; font-size: 18px; line-height: 1.4; }
  .desc { grid-column: 1 / -1; grid-row: auto; min-height: 0; margin-top: 8px; }
  .interlock { margin-left: var(--m); width: 70%; padding-top: 100px; margin-bottom: -72px; }
  .sheet { height: 88svh; }
  .panel-sec { padding: 10px; }
  .inset { display: flex; flex-direction: column; gap: 32px; padding: 32px 20px 0; min-height: 0; }
  .inset-h { font-size: var(--t-h2); }
  .inset-text { gap: 32px; }
  .shaped { width: 86vw; align-self: center; margin: 8px 0 0; }
  .chapter h2, .chapter h3 { left: var(--m); top: 24px; }
  .portrait { top: 50%; height: auto; width: 80%; transform: translate(-50%, -55%) scale(.92); }
  .chapter.arrive .portrait { transform: translate(-50%, -55%) scale(1); }
  .ch-line { left: var(--m); right: var(--m); bottom: 56px; font-size: 16px; } .ch-link { left: var(--m); right: auto; bottom: 24px; }
  .film { display: block; padding: 120px var(--m); } .film-head { margin-bottom: 24px; }
  .play { left: 12px; bottom: 56px; width: 56px; height: 56px; }
  .close { display: flex; flex-direction: column-reverse; height: auto; min-height: 0; }
  .close-window { height: 55svh; }
  .close-text { padding: 72px var(--m) 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-rise] { opacity: 1; transform: none; transition: none; }
  .pin-step { transition: none; }
  .chapter::before, .portrait { transition: none; }
}

/* ── diagrams (sections) ── */
/* One drawing system for every section: hairlines in the mark's cool tones, gold only where light runs.
   --u is the drawing's units per screen pixel (set by diagrams.js) so a line keeps its weight at any size.
   Words are HTML: diagrams.js lifts every <text> into a .dl span laid over the drawing at a whole-pixel size, so the
   letters are set by the page's own text engine. The <text> stays as the drawing's words where scripts are off. */
.dg { margin: 0; position: relative; color: var(--dim); }
.dg svg { display: block; width: 100%; height: auto; fill: none; stroke: currentColor; stroke-width: calc(var(--u, 1) * 1px); stroke-linejoin: round; }
.dg text { fill: var(--muted); stroke: var(--bg); stroke-width: calc(var(--u, 1) * 5px); paint-order: stroke; font-family: 'Archivo', system-ui, sans-serif; font-stretch: 100%; font-weight: 400; font-size: calc(var(--u, 1) * 13px); letter-spacing: 0.01em; }
.dg .tn { fill: var(--nose); font-weight: 500; } .dg .tk { fill: var(--dim); }
.dg .tl { font-stretch: 125%; font-size: calc(var(--u, 1) * 15px); fill: var(--hot); }
.dg .k { stroke: var(--ridge); } .dg .m { stroke: var(--muted); } .dg .n { stroke: var(--nose); } .dg .g { stroke: var(--accent); } .dg .h { stroke: var(--hot); }
.dg .q { stroke-opacity: .5; } .dg .by { stroke: var(--bg); }
.dg .w2 { stroke-width: calc(var(--u, 1) * 2px); }
.dg .ds { stroke-dasharray: calc(var(--u, 1) * 2px) calc(var(--u, 1) * 5px); }
.dg .fb, .dg .sq { fill: var(--bg); } .dg .fb { stroke: none; }
.dg .fn { fill: var(--nose); stroke: none; } .dg .fn2 { fill: var(--muted); stroke: none; }
.dg .f1 { fill: var(--muted); } .dg .f2 { fill: var(--dim); stroke: var(--dim); } .dg .f3 { fill: var(--ridge); stroke: var(--ridge); }
.dg .w15 { stroke-width: calc(var(--u, 1) * 1.6px); } .dg .w3 { stroke-width: calc(var(--u, 1) * 3px); } .dg .w4 { stroke-width: calc(var(--u, 1) * 4px); }
.dg .da { stroke-dasharray: calc(var(--u, 1) * 7px) calc(var(--u, 1) * 7px); }
.dg .fbg { fill: var(--bg); stroke: none; } .dg .fa { fill: var(--accent); stroke: none; } .dg .fm { fill: var(--muted); stroke: none; }
.dg .tile { fill: var(--surface); stroke: var(--ridge); } .dg .band { fill: var(--panel); stroke: var(--ridge); stroke-opacity: .45; }
/* the base in section: the mark's own four tones, the rooms cut into it, the rock it sits in */
.dg .mk1 { fill: var(--muted); stroke: none; } .dg .mk2 { fill: var(--dim); stroke: none; } .dg .mk3 { fill: var(--ridge); stroke: none; }
.dg .mkg { fill: var(--ridge); fill-opacity: .3; stroke: var(--dim); } .dg .rob { fill: var(--surface); stroke: var(--nose); }
.dg .rock { fill: var(--panel); stroke: none; } .dg .room { fill: var(--bg); stroke: none; } .dg .cab { fill: var(--surface); stroke: var(--ridge); }
.dg .leaf { fill: var(--dim); stroke: none; } .dg .water { fill: var(--ridge); fill-opacity: .6; stroke: none; } .dg .craft { fill: var(--dim); stroke: none; }
.dg .corebox { fill: var(--accent); fill-opacity: .5; stroke: var(--hot); } .dg .copper { stroke: var(--accent); stroke-opacity: .6; } .dg .road { fill: var(--ridge); fill-opacity: .4; stroke: none; }
.dg .gl { fill: var(--accent); fill-opacity: .09; stroke: none; } .dg .gd { fill: var(--hot); stroke: none; } .dg .dot { fill: currentColor; stroke: none; }
/* drawn on arrival, in the order the thing is built */
.js .dg .dw { stroke-dasharray: 1.01; stroke-dashoffset: 1.01; transition: stroke-dashoffset 1.7s var(--arrive) calc(var(--d, 0) * .55s), fill-opacity 1s ease calc(var(--d, 0) * .55s + .7s); }
.js .dg .dw.f1, .js .dg .dw.f2, .js .dg .dw.f3 { fill-opacity: 0; }
.js .dg .fd { opacity: 0; transition: opacity 1s ease calc(var(--d, 0) * .55s); }
.js .dg.in .dw { stroke-dashoffset: 0; fill-opacity: 1; } .js .dg.in .fd { opacity: 1; }
/* light moving along a line; it runs only while the drawing is on screen */
.dg .pl { stroke: var(--hot); stroke-width: calc(var(--u, 1) * 2px); stroke-linecap: round; stroke-dasharray: .03 .97; opacity: 0; transition: opacity 1.2s ease 2.2s; animation: dg-run var(--t, 6s) linear var(--pd, 0s) infinite; animation-play-state: paused; }
.dg .pl.cool { stroke: var(--nose); } .dg .pl.pl2 { stroke-dasharray: .012 .988; } .dg .pl.idle { stroke: var(--muted); }
.dg.in .pl:not(.wp) { opacity: 1; } .dg.live .pl { animation-play-state: running; }
@keyframes dg-run { to { stroke-dashoffset: -1; } }
/* a lit thing breathes, slowly */
.dg .swell { animation: dg-swell 5.5s ease-in-out infinite alternate; animation-play-state: paused; transform-box: fill-box; transform-origin: center; }
.dg.live .swell { animation-play-state: running; }
@keyframes dg-swell { from { transform: scale(.9); } to { transform: scale(1.06); } }
/* the words, as HTML over the drawing */
.dg .dl-layer { position: absolute; inset: 0; pointer-events: none; }
.dg .dl { position: absolute; left: 0; top: 0; white-space: nowrap; font: 400 15px/1 'Archivo', system-ui, sans-serif; font-stretch: 100%; letter-spacing: 0; color: var(--ink);
  background: var(--halo, var(--bg)); } /* a plate in the ground's own colour keeps a label clear of the lines under it */
.dg .dl.tn { color: var(--nose); font-weight: 500; } .dg .dl.tk { color: var(--muted); }
.dg .dl.tl { font-stretch: 125%; font-size: 19px; color: var(--hot); }
.dg .dl.tf { font-stretch: 125%; font-size: 20px; font-weight: 500; color: var(--nose); }
/* a label's plate takes the colour of the ground it sits on; none where it sits on a glow with nothing under it */
.dg .dl.pb { --halo: var(--bg); } .dg .dl.pp { --halo: var(--panel); } .dg .dl.ps { --halo: var(--surface); } .dg .dl.p0 { background: none; }
.dg.lab svg text { visibility: hidden; }
/* a drawing can come in two cuts: wide for a desk, tall for a phone */
.dg .dg-tall { display: none; }
.dg-energy .dg-wide { height: 100%; }
.plate { padding: 32px var(--m); }

/* below the surface: the shaft fills with light as the page goes down */
.dg-below { --p: 1; }
.dg-below .sc { stroke-dasharray: 1.01; stroke-dashoffset: calc(1.01 - var(--p) * 1.01); }
.dg-below .core-gl { opacity: calc(.55 + var(--p) * .45); }

/* what the base runs on: each name's node lights, and its wire runs gold from the core */
.dg-systems { grid-column: 1 / -1; margin-top: 110px; --halo: var(--panel); }
.dg-systems .nd { cursor: pointer; } .dg-systems .hit { fill: transparent; stroke: none; pointer-events: all; }
.dg-systems .fr { stroke: var(--ridge); transition: stroke .3s; } .dg-systems .gy { stroke: var(--muted); transition: stroke .3s; }
.dg-systems .nd text { fill: var(--dim); transition: fill .3s; }
.dg-systems .wire { stroke: var(--accent); stroke-width: calc(var(--u, 1) * 1.5px); stroke-dasharray: 1.01; stroke-dashoffset: 1.01; transition: stroke-dashoffset .35s ease; }
.dg-systems .nd.on .wire { stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--arrive); }
.dg-systems .nd.on .wp { opacity: 1; transition-delay: .5s; }
.dg-systems .nd.on .fr { stroke: var(--hot); } .dg-systems .nd.on .gy { stroke: var(--nose); } .dg-systems .nd.on text, .dg-systems .nd-core text { fill: var(--nose); }
.dg-systems .dl { transition: color .3s; } .dg-systems .dl.on { color: var(--hot); }
.dg-systems .tile { transition: stroke .3s, fill .3s; } .dg-systems .nd.on .tile { fill: color-mix(in srgb, var(--surface) 78%, var(--accent)); }
.dg-systems .nd-core .fr { stroke: var(--accent); }

/* defended: posts ping in turn, one slow sweep */
.dg-defended .ping { stroke: var(--hot); opacity: 0; animation: dg-ping 7.5s ease-out var(--pd, 0s) infinite; animation-play-state: paused; }
.dg-defended .sweep { color: var(--muted); opacity: 0; transform-box: view-box; transform-origin: 400px 450px; animation: dg-sweep 18s ease-in-out infinite alternate; animation-play-state: paused; transition: opacity 1.2s ease 2s; }
.dg-defended.in .sweep { opacity: .7; } .dg-defended.live .ping, .dg-defended.live .sweep { animation-play-state: running; }
@keyframes dg-ping { 0%, 46%, 100% { opacity: 0; } 16% { opacity: 1; } }
.dg-defended { --air: color-mix(in srgb, var(--surface) 55%, var(--panel)); }
.dg-defended .dome1 { fill: var(--panel); stroke: none; } .dg-defended .dome2 { fill: var(--air); stroke: none; } .dg-defended .dl.pa { --halo: var(--air); }
.dg-defended .ringf { fill: var(--accent); fill-opacity: .14; stroke: none; }
@keyframes dg-sweep { from { transform: rotate(-4deg); } to { transform: rotate(-168deg); } }

/* people keep the decision: the loop sits on the panel */
.dg-decision { max-width: 440px; --halo: var(--surface); } .dg-decision .fb { fill: var(--surface); } .dg-decision text { stroke: var(--surface); }
.dg-decision .tablef { fill: var(--accent); fill-opacity: .3; stroke: none; }
.dg-decision .person { fill: var(--nose); stroke: none; } .dg-decision .person .arm { fill: none; stroke: var(--nose); stroke-width: 8px; stroke-linecap: round; stroke-linejoin: round; }

/* off every grid: the island's edge, the bus */
.dg-grid { --halo: var(--panel); } .dg-grid .island { fill: var(--panel); stroke: none; } .dg-grid .busglow { stroke: var(--accent); stroke-opacity: .16; stroke-width: calc(var(--u, 1) * 16px); stroke-linecap: round; }

/* home: the gantry works the fresh wall */
.dg-home .gantry { animation: dg-gantry 20s linear infinite; animation-play-state: paused; }
.dg-home .wallp { fill: none; stroke: var(--muted); stroke-linecap: butt; stroke-linejoin: miter; }
.dg-home .course { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: dg-course 20s linear infinite; animation-play-state: paused; }
.dg-home.live .gantry, .dg-home.live .course { animation-play-state: running; }
@keyframes dg-gantry { 0% { transform: translate(0, 0); } 78%, 88% { transform: translate(var(--gx, 0), var(--gy, 0)); } 100% { transform: translate(0, 0); } }
@keyframes dg-course { 0% { stroke-dashoffset: 1; opacity: 1; } 78%, 88% { stroke-dashoffset: 0; opacity: 1; } 93% { stroke-dashoffset: 0; opacity: 0; } 94% { stroke-dashoffset: 1; opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 1; } }
.dg-home .roof { fill: var(--ridge); fill-opacity: .42; stroke: none; } .dg-home .hallf { fill: var(--surface); stroke: none; }
.dg-home .lane { stroke: var(--ridge); stroke-opacity: .3; stroke-linecap: butt; } .dg-home .hill { stroke-opacity: .7; }
.dg .gl2 { fill: var(--accent); fill-opacity: .22; stroke: none; }

/* the teaser, shot by shot: every frame as wide as its time on screen */
.reel { grid-column: 1 / -1; margin: 56px 0 34px; }
.reel-rule { display: block; width: 100%; height: 10px; margin-bottom: 6px; overflow: visible; }
.reel-rule path { fill: none; stroke: var(--ridge); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.reel-strip { position: relative; display: flex; }
.shot { flex: var(--s) 1 0; min-width: 0; height: 92px; padding: 0; border: 0; border-left: 2px solid var(--bg); border-radius: 0; background: var(--surface); cursor: pointer; overflow: hidden; }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .5; transition: opacity .35s; }
.shot:hover img, .shot:focus-visible img, .shot.on img { opacity: 1; }
.reel-head { position: absolute; left: 0; top: 0; width: 1px; height: 92px; pointer-events: none; transform: translate(calc(var(--x, 0) * 1px), calc(var(--y, 0) * 1px)); }
.reel-head::before { content: ''; position: absolute; left: 0; top: -16px; bottom: -6px; width: 1px; background: var(--hot); }
.reel-now { position: absolute; left: 0; top: calc(100% + 10px); font-size: 13px; line-height: 1; color: var(--hot); white-space: nowrap; }
.reel-head.flip .reel-now { left: auto; right: 0; }

/* the close and the footer */
.dg-close { width: 100%; max-width: 340px; margin-bottom: 10px; }
.dg-foot { color: var(--nose); }
.dg-foot .halo { fill: var(--accent); stroke: none; opacity: .3; transform-box: fill-box; transform-origin: center; animation: dg-halo 4.5s ease-in-out infinite alternate; animation-play-state: paused; }
.dg-foot.live .halo { animation-play-state: running; }
@keyframes dg-halo { from { opacity: .16; transform: scale(.8); } to { opacity: .42; transform: scale(1.25); } }

@media (min-width: 901px) {
  /* the first thing built: the statement keeps its screen, the section drawing takes the next row with the note beside it */
  .stair-sec { min-height: 0; grid-template-rows: minmax(84svh, auto) auto; padding-bottom: 150px; }
  .stair, .stair-pics { grid-row: 1; }
  .stair-sec .stair-note { position: static; grid-column: 1 / 5; grid-row: 2; align-self: end; max-width: 36ch; }
  .dg-energy { grid-column: 5 / 13; grid-row: 2; }
  /* below the surface: the elevation runs the full width under the heading, the photographs step down after it */
  .dg-below { grid-column: 1 / -1; grid-row: 2; margin: 56px 0 150px; }
  .s1 figure { grid-row: 3 / 5; } .s1 p { grid-row: 4; } .s2 figure, .s2 p { grid-row: 5; } .s3 figure, .s3 p { grid-row: 6; }
  /* defended: the section drawing holds the left seven columns beside the statement */
  .dg-defended { position: absolute; z-index: 3; left: var(--m); top: 110px; width: calc(7 * var(--col) + 6 * var(--gap)); }
  .interlock { display: flex; flex-direction: column; justify-content: flex-end; min-height: calc((7 * var(--col) + 6 * var(--gap)) * .72 + 250px); }
}

@media (max-width: 900px) {
  .dg .wd { display: none; }
  .plate { padding: 40px 0; }
  .dg-energy { margin: 48px calc(-1 * var(--m)) 0; }
  .dg-below { margin: 0 calc(-1 * var(--m)) 56px; }
  .dg .dg-wide { display: none; } .dg .dg-tall { display: block; }
  .dg .dl { font-size: 14px; } .dg .dl.tl { font-size: 17px; } .dg .dl.tf { font-size: 18px; }
  .dg-systems { margin-top: 40px; }
  .index .desc { position: sticky; top: 0; z-index: 2; background: var(--bg); padding: 14px 0; min-height: 5.6em; }
  .dg-defended { padding-top: 0; }
  .interlock { padding-top: 40px; }
  .dg-decision { align-self: center; width: 100%; margin-bottom: 28px; }
  .reel { margin: 28px 0 30px; } .reel-rule { display: none; }
  .reel-strip { flex-wrap: wrap; row-gap: 3px; }
  .shot { flex: 0 0 calc(var(--w) * 1%); height: 62px; } .reel-head { height: 62px; }
  .reel-head::before { top: -4px; bottom: -4px; } .reel-now { display: none; }
  .dg-close { max-width: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .dg .dw, .js .dg .fd, .dg-systems .wire, .dg-defended .sweep { transition: none; }
  .dg .pl, .dg .swell, .dg-defended .ping, .dg-defended .sweep, .dg-home .gantry, .dg-home .course, .dg-foot .halo { animation: none; }
  .dg-home .course { stroke-dashoffset: .45; } .dg-home .gantry { transform: translate(calc(var(--gx, 0) * .55), calc(var(--gy, 0) * .55)); }
  .dg .pl { display: none; }
}

/* the reel closes the film section without a dead band under it */
.film { padding-bottom: 110px; }

/* ── Version 3 (2026-11-10): the film carries every screen ──
   Larger type, the teaser's own shots moving at full size, every screen filled. Overrides the rules above.
   Tokens, base type, the button, the header and the footer live in chrome.css, shared with the brand guidelines. */
.pin-text h2, .pin-text h3 { font-size: var(--t-pin); }
.pin-step > p { font-size: var(--t-lead); line-height: 1.4; max-width: 34ch; }
.dg svg { stroke-width: calc(var(--u, 1) * 1.25px); }
.dg text { font-size: calc(var(--u, 1) * 15px); fill: var(--ink); stroke-width: calc(var(--u, 1) * 3px); stroke-linejoin: round; text-rendering: geometricPrecision; letter-spacing: 0; }
figure video { width: 100%; height: 100%; object-fit: cover; }

/* the systems index: each name brings its frame from the film */
.sys-pane { display: grid; gap: 20px; align-content: start; }
.sys-pic { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface); }
.sys-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sys-pic img + img { opacity: 0; transform: scale(1.05); }
.sys-pic img + img.up { opacity: 1; transform: none; transition: opacity .5s ease, transform 1.2s var(--arrive); }
.sys-pic img:not([src]) { visibility: hidden; }
.desc { font-size: var(--t-lead); line-height: 1.35; }

/* chapters: the shot fills the screen, the words sit on its own darkest colour */
.chapter { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 18px; padding: 0 var(--m) 56px; }
.chapter::before { display: none; }
.portrait, .chapter.arrive .portrait { left: 0; top: 0; width: 100%; height: 100%; aspect-ratio: auto; transform: scale(1.08); transition: transform 1.6s var(--arrive); }
.chapter.arrive .portrait { transform: none; }
.chapter::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, var(--field) 0%, color-mix(in srgb, var(--field) 70%, transparent) 26%, transparent 62%); } /* taste-skill-ignore: scrim under words on a film frame, in the frame's own darkest colour */
.chapter h2, .chapter h3 { position: relative; top: auto; left: auto; z-index: 2; font-size: var(--t-h2); line-height: .98; letter-spacing: -0.02em; max-width: 16ch; }
.ch-line { position: relative; left: auto; bottom: auto; z-index: 2; font-size: var(--t-lead); line-height: 1.35; max-width: 38ch; }
.ch-link { z-index: 2; bottom: 56px; right: var(--m); }

@media (min-width: 901px) {
  /* it begins with energy: the statement steps down the screen between two shots from the film */
  .stair-sec { grid-template-rows: minmax(124svh, auto) auto; padding-bottom: 140px; }
  .stair { grid-column: 1 / -1; position: relative; z-index: 1; }
  .stair-pics { display: contents; }
  .stair-pics figure { grid-row: 1; aspect-ratio: 16 / 10; overflow: hidden; }
  .stair-pics figure:first-child { grid-column: 8 / 13; align-self: start; margin-top: 9svh; }
  .stair-pics figure:last-child { grid-column: 1 / 6; align-self: end; margin-bottom: 4svh; }
  .stair-sec .stair-note { grid-column: 1 / 4; font-size: var(--t-lead); line-height: 1.35; color: var(--ink); max-width: none; align-self: center; }
  .dg-energy { grid-column: 4 / 13; }
  /* below the surface: the three shots at full size, stepping across */
  .diag { padding: 150px var(--m) 170px; row-gap: 0; }
  .diag-h { grid-column: 1 / 10; font-weight: 400; }
  .dg-below { margin: 64px 0 150px; }
  .stage figure { overflow: hidden; }
  .s1 figure { grid-column: 1 / 9; grid-row: 3; aspect-ratio: 16 / 10; }
  .s1 p { grid-column: 9 / 13; grid-row: 3; align-self: end; margin: 0; }
  .s2 figure { grid-column: 5 / 13; grid-row: 4; aspect-ratio: 16 / 10; margin-top: 24px; }
  .s2 p { grid-column: 1 / 5; grid-row: 4; align-self: end; margin: 0; }
  .s3 figure { grid-column: 1 / 9; grid-row: 5; aspect-ratio: 16 / 10; margin-top: 24px; }
  .s3 p { grid-column: 9 / 13; grid-row: 5; align-self: end; margin: 0; justify-self: start; }
  .diag .stage p { font-size: var(--t-lead); line-height: 1.35; max-width: 26ch; }
  /* off every grid */
  .card { width: calc(4 * var(--col) + 3 * var(--gap)); top: 18svh; min-height: 60svh; padding: 32px 28px 0; }
  .c3 { left: calc(var(--m) + 8 * (var(--col) + var(--gap))); }
  .card p { font-size: var(--t-body); } .cardlink { margin: 0 -28px; padding: 18px 28px; }
  /* what the base runs on */
  .index { padding: 150px var(--m) 130px; }
  .index h2 { font-size: var(--t-h2); margin-bottom: 72px; }
  .col { grid-column: span 2; font-size: var(--t-body); line-height: 1.3; }
  .col li { padding: 6px 0; }
  .sys-pane { grid-column: 7 / 13; grid-row: 1; }
  .desc { grid-column: auto; grid-row: auto; min-height: 4.2em; }
  .dg-systems { margin-top: 96px; }
  /* defended */
  .sheet figcaption { font-size: var(--t-lead); padding: 120px var(--m) 40px; }
  /* people keep the decision */
  .inset { padding: 64px 44px 0; }
  .shaped { grid-column: 1 / 9; }
  /* the teaser: the whole width */
  .film { padding: 150px var(--m) 110px; row-gap: 40px; }
  .film-head { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: end; }
  .film-head h2 { grid-column: 1 / 8; font-size: var(--t-h2); margin: 0; }
  .film-head p { grid-column: 9 / 13; color: var(--ink); }
  .player { grid-column: 1 / -1; }
  .play { left: 32px; bottom: 88px; width: 96px; height: 96px; } .play svg { width: 32px; }
  .shot { height: 120px; } .reel-head { height: 120px; }
}

@media (max-width: 900px) {
  .stair-pics figure { aspect-ratio: 4 / 5; overflow: hidden; }
  .stage figure { aspect-ratio: 4 / 3; overflow: hidden; } .s2 figure, .s3 figure { width: auto; margin: 0; } .diag .s2 p { margin-left: 0; }
  .stage figure { margin: 0 calc(-1 * var(--m)); }
  .index h2 { font-size: var(--t-h2); }
  .cols { display: flex; flex-direction: column; }
  .sys-pane { order: -1; position: sticky; top: 0; z-index: 2; background: var(--bg); margin: 0 calc(-1 * var(--m)) 28px; gap: 0; }
  .sys-pic { aspect-ratio: 16 / 9; }
  .index .desc { position: static; padding: 14px var(--m); min-height: 5.4em; margin: 0; font-size: 17px; }
  .col { margin-bottom: 28px; } .col li { padding: 7px 0; }
  .dg-systems { order: 5; }
  .chapter { padding: 0 var(--m) 40px; gap: 12px; }
  .portrait, .chapter.arrive .portrait { width: 100%; height: 100%; top: 0; left: 0; }
  .portrait { transform: scale(1.08); } .chapter.arrive .portrait { transform: none; }
  .ch-line { left: auto; right: auto; bottom: auto; font-size: 17px; }
  .ch-link { position: relative; left: auto; right: auto; bottom: auto; }
}
@media (prefers-reduced-motion: reduce) { .sys-pic img + img.up { transition: none; } }

/* Version 3, second pass: the doors behind the statement; the index set large beside its frame */
.desc { color: var(--ink); }
@media (min-width: 901px) {
  .stair-sec { grid-template-rows: 100svh auto auto; padding-bottom: 150px; align-items: start; row-gap: 0; }
  .stair { grid-row: 1; align-self: end; padding-bottom: 9svh; }
  .st { font-size: clamp(44px, 5vw, 88px); line-height: 1.02; }
  .st2 { padding-left: 3vw; } .st3 { padding-left: 6vw; } .st4 { padding-left: 9vw; } .st5 { padding-left: 12vw; }
  .stair-pics figure:first-child { grid-column: 1 / -1; grid-row: 1; margin: 0 calc(-1 * var(--m)); height: 100svh; aspect-ratio: auto; align-self: stretch; position: relative; }
  .stair-pics figure:first-child::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, var(--bg) 0%, rgba(7, 10, 16, .72) 34%, rgba(7, 10, 16, .1) 72%); } /* taste-skill-ignore: scrim under words on a film frame */
  .stair-pics figure:last-child { grid-column: 1 / 5; grid-row: 2; aspect-ratio: 4 / 5; align-self: start; margin: 120px 0 0; }
  .stair-sec .stair-note { grid-column: 1 / 5; grid-row: 3; align-self: start; margin-top: 28px; }
  .dg-energy { grid-column: 5 / 13; grid-row: 2 / span 2; margin-top: 120px; align-self: stretch; }
  .cols { align-items: start; }
  .col { grid-column: 1 / 6; font-size: clamp(22px, 1.75vw, 28px); line-height: 1.2; margin-bottom: 36px; }
  .col li { padding: 5px 0; } .col li.group { font-size: var(--t-small); margin-bottom: .6em; }
  .sys-pane { grid-column: 6 / 13; grid-row: 1 / span 3; position: sticky; top: 12svh; }
  .dg-systems { margin-top: 64px; }
}
@media (min-width: 901px) { .sys-pane { position: static; } }

/* Version 3, third pass: the phone gets the same poster scale */
@media (max-width: 900px) {
  .stair-sec .st { font-size: 31px; line-height: 1.04; }
  .stair-pics { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 32px calc(-1 * var(--m)); }
  .stair-pics figure { aspect-ratio: 16 / 11; width: auto; margin: 0; }
  .stair-sec .stair-note { font-size: var(--t-lead); line-height: 1.35; color: var(--ink); }
  .diag .stage p { font-size: var(--t-lead); line-height: 1.35; color: var(--ink); }
  .col { font-size: 22px; line-height: 1.2; } .col li.group { font-size: var(--t-small); }
}
@media (min-width: 901px) {
  /* chapters: the title on the left of the frame, its line on the right */
  .chapter { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-content: end; align-items: end; row-gap: 20px; }
  .chapter h2, .chapter h3 { grid-column: 1 / 8; grid-row: 1; max-width: none; }
  .ch-line { grid-column: 9 / 13; grid-row: 1; max-width: none; }
  .ch-link { position: relative; right: auto; bottom: auto; grid-column: 9 / 13; grid-row: 2; z-index: 2; }
  .chapter::after { background: linear-gradient(to top, var(--field) 0%, color-mix(in srgb, var(--field) 72%, transparent) 30%, transparent 66%); } /* taste-skill-ignore: scrim under words on a film frame, in the frame's own darkest colour */
  .pin-text { grid-column: 1 / 7; } .pin-text p { max-width: 36ch; }
  .close-text h2 { font-size: var(--t-h3); }
}
@media (min-width: 600px) and (max-width: 900px) {
  .chapter { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-content: end; align-items: end; row-gap: 16px; }
  .chapter h2, .chapter h3 { grid-column: 1 / 8; grid-row: 1; max-width: none; }
  .ch-line { grid-column: 8 / 13; grid-row: 1; max-width: none; }
  .ch-link { grid-column: 8 / 13; grid-row: 2; z-index: 2; }
}

/* the decision: the film's own shot, cut to the mark's arrowhead */
.shaped video { width: 100%; height: auto; aspect-ratio: 156 / 100; object-fit: cover; clip-path: polygon(50% 0, 100% 100%, 78% 90%, 67% 95.5%, 50% 83%, 33% 95.5%, 22% 90%, 0 100%); transform: translateY(16%); }

/* ── defended: the seven layers, outside in; each row steps a little further into the page, as the layers go deeper ── */
.layers { position: relative; z-index: 4; background: var(--bg); padding: 150px var(--m) 160px; }
.layers-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 20px; margin-bottom: 72px; }
.layers-head h3 { grid-column: 1 / 9; font-size: var(--t-h2); line-height: .98; letter-spacing: -0.02em; }
.layers-head p { grid-column: 1 / 8; font-size: var(--t-lead); line-height: 1.4; color: var(--ink); }
.layer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.layer-list li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: baseline; padding: 26px 28px; background: var(--panel); margin-left: calc(var(--n, 0) * 2.2vw); }
.layer-list li:nth-child(1) { --n: 0; } .layer-list li:nth-child(2) { --n: 1; } .layer-list li:nth-child(3) { --n: 2; } .layer-list li:nth-child(4) { --n: 3; }
.layer-list li:nth-child(5) { --n: 4; } .layer-list li:nth-child(6) { --n: 5; background: var(--surface); } .layer-list li:nth-child(7) { --n: 6; background: var(--surface); }
.layer-list h4 { grid-column: 1 / 4; margin: 0; font-stretch: 125%; font-weight: 400; font-size: var(--t-h3); line-height: 1.1; color: var(--nose); }
.layer-list p { grid-column: 4 / 10; color: var(--ink); }
.layer-list .meets { grid-column: 10 / 13; color: var(--hot); font-size: var(--t-body); }
@media (max-width: 900px) {
  .layers { padding: 96px var(--m) 110px; } .layers-head { margin-bottom: 40px; }
  .layers-head h3, .layers-head p, .layer-list h4, .layer-list p, .layer-list .meets { grid-column: 1 / -1; }
  .layer-list li { row-gap: 8px; padding: 20px; margin-left: calc(var(--n, 0) * 6px); }
}

/* ── the loading screen: the mark builds the way the title does (the land, the nose through it, the floors, the light
   down the shaft), then flies up into the header as the scene comes in behind it ── */
.loader { display: none; }
.js .loader { position: fixed; inset: 0; z-index: 1; /* under the hero's words, which are on screen from the first frame */ display: grid; place-content: center; padding-bottom: 16svh; justify-items: center; gap: 30px; background: var(--bg); transition: background-color .9s ease, visibility 0s 1.2s; }
.loader-mark { width: min(62vw, 480px); height: auto; overflow: visible; transform-origin: 0 0; will-change: transform; }
.loader-name { display: none; font-stretch: 125%; font-weight: 500; text-transform: uppercase; letter-spacing: .26em; font-size: clamp(11px, 1.05vw, 15px); color: var(--nose); opacity: 0; animation: ld-in .9s var(--arrive) 1.5s forwards; }
.ld-horizon path { transform-box: view-box; transform-origin: 220px 204px; transform: scaleX(0); animation: ld-wide .9s var(--arrive) .1s forwards; }
.ld-nose { transform: translateY(58px); animation: ld-rise 1s var(--arrive) .55s forwards; }
.ld-f1, .ld-f2, .ld-ridge { opacity: 0; transform: translateY(-9px); animation: ld-drop .7s var(--arrive) forwards; }
.ld-f1 { animation-delay: 1.05s; } .ld-f2 { animation-delay: 1.2s; } .ld-ridge { animation-delay: 1.35s; }
.ld-shaft { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ld-draw .9s ease-in 1.6s forwards; }
@keyframes ld-wide { to { transform: scaleX(1); } }
@keyframes ld-rise { to { transform: none; } }
@keyframes ld-drop { to { opacity: 1; transform: none; } }
@keyframes ld-draw { to { stroke-dashoffset: 0; } }
@keyframes ld-in { to { opacity: 1; } }
.loader.out { background-color: transparent; visibility: hidden; pointer-events: none; }
.loader.out .loader-mark { transition: transform 1s var(--arrive), opacity .35s ease .75s; opacity: 0; }
.loader.out .loader-name { animation: none; opacity: 0; transition: opacity .3s; }
.loading .bar, .loading .hero-row { opacity: 0; }
.bar, .hero-row { transition: opacity .9s ease .5s; }
@media (prefers-reduced-motion: reduce) {
  .loading .bar, .loading .hero-row { opacity: 1; } .bar, .hero-row { transition: none; } /* with motion reduced the first screen is complete from the first frame */
  .ld-horizon path, .ld-nose, .ld-f1, .ld-f2, .ld-ridge, .ld-shaft, .loader-name { animation: none; transform: none; opacity: 1; stroke-dashoffset: 0; }
  .loader.out .loader-mark { transition: opacity .3s; }
}

/* ── Version 4 (2026-11-10): one geometry ──
   Panels, tiles and controls take the mark's cut (chrome.css); solid fills only; titles carry the light-line. */
/* hero: the lede and the teaser tile stand in one bracket, the name under it */
.hero-row { position: relative; align-items: center; padding-bottom: 26px; }
.hero-row::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; border: solid var(--ridge); border-width: 0 1px 1px; pointer-events: none; } /* taste-skill-ignore: the bracket that ties lede, action and name */
.hero-row::before { content: ''; position: absolute; left: 0; bottom: 0; z-index: 1; width: clamp(44px, 5.2vw, 88px); height: 2px; background: var(--accent); }
.lede { font-size: clamp(20px, 1.7vw, 27px); line-height: 1.32; max-width: 42ch; }
.hero-film { grid-template-columns: 208px auto auto; gap: 0; padding: 0; background: var(--panel); clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cuty), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cuty))); }
.hero-film:hover { background: var(--surface); }
.hero-film b { padding: 0 30px 0 14px; color: var(--nose); }
.hero-play { position: relative; width: 44px; height: 44px; margin-left: 20px; background: var(--accent); --cut: 9px; --cuty: 11.5px; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cuty), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cuty))); transition: background-color .3s; }
.hero-play::after { content: ''; position: absolute; left: 17px; top: 13px; width: 13px; height: 18px; background: var(--on-accent); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.hero-film:hover .hero-play { background: var(--hot); }
/* the taproot's flow buttons */
.flows button { min-height: 44px; padding: 0 18px; font-weight: 500; --cut: 8px; --cuty: 10px; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cuty), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cuty))); }
/* off every grid: three instrument panels on the film */
.card { background: var(--panel); color: var(--ink); clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cuty), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cuty))); --cut: 22px; --cuty: 28px; }
.card h2, .card h3 { color: var(--nose); }
.card h3 { position: relative; padding-bottom: .36em; }
.card h3::after { content: ''; position: absolute; left: 0; bottom: 0; width: clamp(44px, 5.2vw, 88px); height: 2px; background: var(--accent); } /* taste-skill-ignore: the title's light-line */
.card p { color: var(--ink); } .card .fact { color: var(--hot); font-weight: 500; }
.card img { --cut: 14px; --cuty: 18px; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cuty), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cuty))); }
.cardlink { background: var(--surface); color: var(--nose); font-weight: 600; }
/* what the base runs on: the chosen name carries a tick of light; its frame sits in a cut panel */
.col li { position: relative; padding-left: 22px; }
.col li:not(.group)::before { content: ''; position: absolute; left: 0; top: 50%; width: 8px; height: 2px; background: var(--ridge); transition: width .3s var(--arrive), background-color .3s; }
.col li.on::before { width: 14px; background: var(--accent); }
.col li.group { padding-left: 0; font-stretch: 125%; }
.sys-pane { gap: 0; background: var(--panel); clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cuty), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cuty))); --cut: 22px; --cuty: 28px; }
.sys-pane .desc { padding: 22px 28px 30px; }
/* the seven layers */
.layer-list li { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cuty), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cuty))); }
.layer-list .meets { font-weight: 500; }
/* people keep the decision */
.inset { --cut: 28px; --cuty: 36px; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cuty), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cuty))); }
/* chapters */
.ch-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; background: var(--surface); color: var(--nose); font-weight: 600; text-decoration: none; --cut: 9px; --cuty: 11.5px; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cuty), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cuty))); transition: background-color .25s, color .25s; }
.ch-link:hover { background: var(--accent); color: var(--on-accent); }
.chapter .ch-link { justify-self: start; align-self: start; }
/* the teaser */
.player { --cut: 26px; --cuty: 33px; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cuty), 100% 100%, 0 100%); }
.play { --cut: 14px; --cuty: 18px; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cuty), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cuty))); }
.play:focus-visible, .flows button:focus-visible, .ch-link:focus-visible, .cardlink:focus-visible { outline: 2px solid var(--nose); outline-offset: -5px; }
.play:focus-visible { outline-color: var(--on-accent); }
/* section openings */
.index.step::before, .film.step::before, .diag.step::before { top: 64px; }
.layers.step::before { top: 72px; }
@media (max-width: 900px) {
  .hero-row { padding-bottom: 18px; }
  .hero-film { grid-template-columns: 112px auto 1fr; } .hero-play { margin-left: 14px; }
  .card { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cuty), 100% 100%, 0 100%); --cut: 16px; --cuty: 20.5px; }
  .sys-pane { clip-path: none; }
  .index .desc { padding: 14px var(--m); }
  .inset { --cut: 16px; --cuty: 20.5px; }
  .player { --cut: 14px; --cuty: 18px; }
  .index.step::before, .film.step::before, .diag.step::before, .layers.step::before { top: 44px; }
}