@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/geist-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrumentserif-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrumentserif-italic.woff2") format("woff2");
}

:root {
  --bg: #050507;
  --ink: #f3efe7;
  --muted: rgba(243, 239, 231, 0.7);
  --faint: rgba(243, 239, 231, 0.58);
  --line: rgba(243, 239, 231, 0.22);
  --error: #ffb0a3;
  --serif: "Instrument Serif", "Iowan Old Style", "Times New Roman", serif;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --hud: rgba(243, 239, 231, 0.3);
  --pad: clamp(20px, 4.2vw, 64px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(243, 239, 231, 0.28) transparent;
}

body {
  margin: 0;
  background: var(--bg);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
}

::selection { background: var(--ink); color: #0b0b0d; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: rgba(243, 239, 231, 0.24); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }

#stage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  display: block;
  z-index: 0;
  pointer-events: none;
}

/* ---------- nav ---------- */
.nav {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(18px + env(safe-area-inset-top)) var(--pad) 18px;
  pointer-events: none;
}
.nav > * { pointer-events: auto; }
.nav::before {
  content: "";
  position: absolute;
  inset: 0 0 -28px;
  background: linear-gradient(to bottom, rgba(5, 5, 7, 0.72), rgba(5, 5, 7, 0));
  pointer-events: none;
  z-index: -1;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand img { width: 28px; height: 32px; object-fit: contain; }
/* the wordmark itself, as finished artwork (Good Times: a desktop-licensed face, never a webfont) */
.brand .brand-word { display: block; width: auto; height: 24px; object-fit: contain; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #0b0b0d;
  font: 500 15px/1 var(--sans);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.5s var(--ease), background-color 0.3s, box-shadow 0.5s var(--ease);
  box-shadow: 0 10px 30px -12px rgba(243, 239, 231, 0.35);
}
.btn:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 18px 40px -14px rgba(243, 239, 231, 0.5); }
.btn:active { transform: translateY(0); }
.btn-ghost {
  background: rgba(243, 239, 231, 0.06);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.btn-ghost:hover { background: rgba(243, 239, 231, 0.14); box-shadow: inset 0 0 0 1px rgba(243, 239, 231, 0.5); }
/* a down chevron: each chapter hands on to the next (a real link, so the move still plays) */
.btn .down { flex: none; width: 7px; height: 7px; margin: -4px 0 0 2px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.next { margin: 28px 0 0; }
.ch[tabindex="-1"]:focus { outline: none; }   /* focus lands on the chapter after a keyboard jump */
.btn-next { padding: 12px 20px; font-size: 14px; }

/* ---------- chapter rail ---------- */
.rail {
  position: fixed;
  z-index: 10;
  right: var(--pad);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.8s var(--ease), visibility 0s 0.8s;
}
.rail.is-on, .rail:focus-within {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.rail.is-moving:not(:focus-within) { opacity: 0; pointer-events: none; }
.rail a {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--faint);
  transition: color 0.4s;
}
.rail a::after {
  content: "";
  width: 7px;
  height: 7px;
  border: 1px solid currentColor;
  transform: rotate(45deg) scale(0.85);
  transition: transform 0.6s var(--ease), background-color 0.4s;
}
.rail a:hover, .rail a.is-current { color: var(--ink); }
.rail a.is-current::after { background: currentColor; transform: rotate(45deg) scale(1); }

/* ---------- chapters ---------- */
main { position: relative; z-index: 1; }
.scrim { display: none; }

/* each chapter = one screen plus a short pinned run (px, so every wheel step moves the
   story by a similar amount on any screen height) */
.ch { position: relative; height: calc(100vh + 440px); }
.ch-hero { height: calc(100vh + 280px); }

.pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

/* Scroll-driven copy: with JS each chapter's pin is a fixed layer that main.js moves and fades
   in step with the scene, so the words land with the logo and one chapter's copy is always on
   screen. Without JS (or if the script fails) the pins stay sticky and everything reads in order. */
.js .ch-pinned .pin { position: fixed; top: 0; left: 0; right: 0; z-index: 1; pointer-events: none; will-change: opacity, transform; }
.js .ch-pinned:not(.ch-hero) .pin { opacity: 0; }
/* a keyboard user tabbing into a faded layer: main.js brings the story to that chapter, so the
   layer fades in with it (no override here: one would keep words on screen after the story moves) */
.js .ch-pinned .pin.is-live .copy, .js .ch-pinned .pin.is-live .hero-copy, .js .ch-pinned .pin.is-live .scroll-cue { pointer-events: auto; }
.js .ch-pinned:not(.ch-hero) .rv,
.js .ch-pinned:not(.ch-hero) [data-split] .c { opacity: 1; transform: none; filter: none; transition: none; }
/* no JS or no WebGL: a plain page that scrolls, each chapter's copy followed by its work */
html:not(.js) .ch, .no-webgl .ch { height: auto; }
html:not(.js) .ch .pin, .js.no-webgl .ch-pinned .pin { position: relative; height: auto; min-height: 100vh; min-height: 100svh; opacity: 1; transform: none; pointer-events: auto; }

.fallback-mark {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 63% 50%;
  pointer-events: none;
}
html:not(.js) .fallback-mark, .no-webgl .fallback-mark { display: block; }
html:not(.js) body.home, .no-webgl body.home { background: #1c1b1c; }

/* hero */
.hero-copy {
  position: absolute;
  left: var(--pad);
  bottom: calc(var(--pad) + env(safe-area-inset-bottom));
  max-width: 34rem;
}
.eyebrow {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--faint);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-title {
  margin: 0;
  font: 400 clamp(40px, 4.4vw, 76px) / 0.98 var(--serif);
  letter-spacing: -0.012em;
}
.hero-title em { font-style: italic; }
.hero-sub {
  margin: 14px 0 28px;
  max-width: 30rem;
  color: var(--muted);
  font-size: clamp(16px, 1.15vw, 18px);
  text-wrap: pretty;
}
.scroll-cue {
  position: absolute;
  right: var(--pad);
  bottom: calc(var(--pad) + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
}
.scroll-cue i {
  width: 1px;
  height: 56px;
  background: linear-gradient(var(--ink), transparent);
  transform-origin: top;
  animation: breathe-line 3.2s var(--ease) infinite;
}
/* the hero's top-right corner: a piece of the owner's SAVAGE desk mat, redrawn abstract (no
   numbers) and faint; it comes up after the opening drawing and leaves with the hero (main.js) */
.mat-corner { display: none; }
.js:not(.no-webgl) .mat-corner {
  --w: 184px;
  display: block; position: absolute; top: calc(18px + env(safe-area-inset-top)); right: var(--pad); width: var(--w);
  opacity: 0; transition: opacity 1.6s var(--ease); pointer-events: none;
}
.js:not(.no-webgl) .mat-corner.is-on { opacity: 0.4; }
.mat-band { display: block; width: 100%; height: auto; }
.mat-ruler {
  position: absolute; top: calc(var(--w) * 206 / 890); left: calc(var(--w) * 770 / 890); width: calc(var(--w) * 80 / 890); height: 36vh;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent);
}
.mat-corner .fw { fill: var(--ink); }
.mat-corner .fg { fill: rgba(243, 239, 231, 0.55); }
.mat-corner .fd { fill: rgba(243, 239, 231, 0.28); }
.mat-corner .sw { fill: none; stroke: var(--ink); }
.mat-corner .sg { fill: none; stroke: rgba(243, 239, 231, 0.55); }
.mat-corner .sd { fill: none; stroke: rgba(243, 239, 231, 0.28); }
/* with JS one fixed cue serves the whole story: shown on the hero and on each chapter once its
   words settle, hidden while they travel and on the contact form (main.js placeCopy) */
.js .scroll-cue.is-free { position: fixed; z-index: 2; opacity: 0; pointer-events: none; transition: opacity 0.7s var(--ease); }
.js .scroll-cue.is-free.is-on { opacity: 1; pointer-events: auto; }
.no-webgl .scroll-cue.is-free { display: none; }
/* the word breathes on its own, slow and even (the line keeps its quicker downward pulse) */
.scroll-cue span { animation: breathe-word 6s ease-in-out infinite; }
@keyframes breathe-word {
  0%, 100% { opacity: 0.5; text-shadow: 0 0 0 rgba(243, 239, 231, 0); }
  50% { opacity: 1; color: var(--ink); text-shadow: 0 0 12px rgba(243, 239, 231, 0.28); }
}
@keyframes breathe-line {
  0% { transform: scaleY(0.15); opacity: 0.3; }
  45% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(0.15); opacity: 0.3; }
}

/* definition chapters */
.copy {
  position: absolute;
  left: var(--pad);
  top: 50%;
  transform: translateY(-50%);
  width: min(40rem, 44vw);
}
.sense {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.sense b { color: var(--ink); font-weight: 600; }
/* SAVAGE Labs tag and drafting lines, in the style of the studio's SAVAGE desk mats */
.lab {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 0;
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.lab::before { content: ""; width: 34px; height: 9px; background: repeating-linear-gradient(-55deg, var(--ink) 0 2px, transparent 2px 6px); opacity: 0.75; }
.lab b { color: var(--ink); font-weight: 600; }
.lab span { padding: 3px 7px; border: 1px solid var(--line); }
.hud-line {
  margin: 18px 0 0;
  font: 500 10.5px/1.6 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
}
.hud-line i { font-style: normal; color: var(--ink); padding: 0 0.25em; }
.sense i {
  font: italic 400 22px/1 var(--serif);
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--muted);
}
.copy h2 {
  margin: 0.1em 0 0.2em -0.04em;
  font: 400 clamp(92px, 13.5vw, 236px) / 0.86 var(--serif);
  letter-spacing: -0.035em;
}
.def {
  margin: 0;
  max-width: 31ch;
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}
.def em { font: italic 400 1.14em/1.3 var(--serif); color: var(--ink); }

/* chapters whose subject sits on the left: the copy takes the right (clear of the chapter rail) */
.ch-work .copy { top: auto; bottom: calc(var(--pad) + 3vh + env(safe-area-inset-bottom)); transform: none; width: min(36rem, 38vw); }
.ch-work .copy h2 { font-size: clamp(60px, 6.4vw, 120px); line-height: 0.92; }
.ch-work .def { max-width: 36ch; }
.ch-work[data-side="right"] .copy { left: auto; right: calc(var(--pad) + 110px); }
@media (max-width: 1180px) { .ch-work[data-side="right"] .copy { right: var(--pad); } }
/* short wide screens (laptops under browser chrome, phones held sideways): the words sit lower
   and the hand-on button is smaller, so the block grows no taller and stays clear of the mark
   and the nav */
@media (min-width: 821px) and (max-height: 860px) {
  .ch-work .copy { bottom: calc(14px + 1vh + env(safe-area-inset-bottom)); }
  .next { margin-top: 16px; }
  .btn-next { padding: 10px 16px; font-size: 13px; }
}
@media (min-width: 821px) and (max-height: 520px) {
  .ch-work .copy h2 { font-size: 46px; }
  .next { margin-top: 10px; }
}

/* the work: drawings and builds, in the half of the sheet the mark is not in */
.plate figcaption::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 0.32em; border: 1px solid currentColor; transform: rotate(45deg); }

/* drafting overlay: sheet corners, a millimetre ruler that runs with the story, and the
   SAVAGE word on a far plane behind the sim-racing and automotive chapters */
.hud { display: none; }
.js:not(.no-webgl) .hud { display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.hud-corner { position: absolute; width: 18px; height: 18px; border: 0 solid var(--hud); }
.hud-corner.tl { top: 12px; left: 12px; border-width: 1px 0 0 1px; }
.hud-corner.tr { top: 12px; right: 12px; border-width: 1px 1px 0 0; }
.hud-corner.bl { bottom: 12px; left: 12px; border-width: 0 0 1px 1px; }
.hud-corner.br { bottom: 12px; right: 12px; border-width: 0 1px 1px 0; }
.hud-ruler { position: absolute; left: 14px; top: 64px; bottom: 64px; width: 40px; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
.hud-ruler-scale { position: absolute; left: 0; top: 0; width: 100%; will-change: transform; }
.hud-ruler-scale i { position: absolute; left: 0; height: 1px; background: var(--hud); }
.hud-ruler-scale b { position: absolute; left: 20px; font: 500 8.5px/1 var(--mono); letter-spacing: 0.08em; color: rgba(243, 239, 231, 0.42); transform: translateY(-50%); }
.hud-ruler-mark { position: absolute; left: 0; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border: 1px solid rgba(243, 239, 231, 0.7); transform: rotate(45deg) translate(-2px, 2px); }
.hud-word {
  position: absolute;
  left: 0;
  top: 0;
  width: 92vw;
  height: auto;
  max-width: none;
  opacity: 0;
  will-change: transform, opacity;
}
.sketch { display: none; }
.js:not(.no-webgl) .sketch { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 1; pointer-events: none; opacity: 0; }
.plates { display: grid; gap: 24px; padding: 0 var(--pad) 48px; }
.plate { margin: 0; max-width: 46rem; }
.plate img { display: block; width: 100%; height: auto; }
.plate { position: relative; }
.plate::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  height: calc(var(--img-h, 100%) + 20px);
  pointer-events: none;
  --c: rgba(243, 239, 231, 0.42);
  background:
    linear-gradient(var(--c), var(--c)) top left / 14px 1px, linear-gradient(var(--c), var(--c)) top left / 1px 14px,
    linear-gradient(var(--c), var(--c)) top right / 14px 1px, linear-gradient(var(--c), var(--c)) top right / 1px 14px,
    linear-gradient(var(--c), var(--c)) bottom left / 14px 1px, linear-gradient(var(--c), var(--c)) bottom left / 1px 14px,
    linear-gradient(var(--c), var(--c)) bottom right / 14px 1px, linear-gradient(var(--c), var(--c)) bottom right / 1px 14px;
  background-repeat: no-repeat;
}
.plate figcaption {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  font: 500 10.5px/1.3 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.js:not(.no-webgl) .plates { display: block; padding: 0; height: 0; }
/* the Automotive carousel: one drawing large in the centre, the previous and the next small and
   faint above and below; the column glides up every few seconds (main.js placeCarousel). Drawings
   load as the chapter comes near (data-src). Without JS: the first drawing and every caption. */
.car-item { margin: 0 0 18px; }
.car-item img { display: block; width: 100%; height: auto; }
.car-item img[data-src]:not([src]) { display: none; }
.plate img[data-src]:not([src]) { visibility: hidden; }   /* until its chapter comes near (main.js) */
html:not(.js) .car-item:not(:first-child) figcaption::before { display: none; }
.car-caption { display: none; }
.js:not(.no-webgl) .plate-carousel .carousel { position: relative; height: var(--img-h); }
.js:not(.no-webgl) .car-item { position: absolute; top: 0; left: 0; width: 100%; margin: 0; transform-origin: 50% 50%; will-change: transform, opacity; opacity: 0; }
.js:not(.no-webgl) .car-item figcaption { display: none; }
.js:not(.no-webgl) .plate-carousel .car-caption { display: flex; position: absolute; margin: 0; transition: opacity 0.35s ease; }
/* the carousel keeps its corner marks for the drawing in the centre (the highlight of the moment) */
.js:not(.no-webgl) .plate-carousel::before { display: none; }
.car-frame { display: none; }
.js:not(.no-webgl) .plate-carousel .car-frame { display: block; position: absolute; pointer-events: none; }
.js:not(.no-webgl) .plate-carousel .car-frame::before {
  content: ""; position: absolute; inset: -10px; --c: rgba(243, 239, 231, 0.5);
  background:
    linear-gradient(var(--c), var(--c)) top left / 14px 1px, linear-gradient(var(--c), var(--c)) top left / 1px 14px,
    linear-gradient(var(--c), var(--c)) top right / 14px 1px, linear-gradient(var(--c), var(--c)) top right / 1px 14px,
    linear-gradient(var(--c), var(--c)) bottom left / 14px 1px, linear-gradient(var(--c), var(--c)) bottom left / 1px 14px,
    linear-gradient(var(--c), var(--c)) bottom right / 14px 1px, linear-gradient(var(--c), var(--c)) bottom right / 1px 14px;
  background-repeat: no-repeat;
}
/* the drawings beyond the plate's box fade out at its top and bottom edges */
.js:not(.no-webgl) .plate-carousel .carousel { -webkit-mask-image: linear-gradient(transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(transparent, #000 9%, #000 91%, transparent); }
.js:not(.no-webgl) .plate-carousel .car-caption.is-swapping { opacity: 0; }
/* the web destinations film (Digital): columns of homepage and name tiles rolling up and down
   (main.js buildFilm); the still image is kept for layout and shown without JS or WebGL */
.plate-link { display: block; color: inherit; text-decoration: none; }
.film { display: none; }
.js:not(.no-webgl) .plate-film > img { height: var(--img-h); object-fit: cover; }   /* the film's box, so the caption sits under it */
.js:not(.no-webgl) .plate.has-film > img { visibility: hidden; }
.js:not(.no-webgl) .plate.has-film .film {
  display: flex; gap: 12px; position: absolute; top: 0; left: 0; width: 100%; height: var(--img-h); overflow: hidden;
  container-type: inline-size;
  -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent);
}
.film-col { flex: 1 1 0; min-width: 0; overflow: hidden; }
.film-track { animation: film-up 110s linear infinite; will-change: transform; }
.film-col:nth-child(2) .film-track { animation-name: film-down; animation-duration: 96s; }
.film-col:nth-child(3) .film-track { animation-duration: 124s; }
.film-col:nth-child(4) .film-track { animation-name: film-down; animation-duration: 104s; }
@keyframes film-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes film-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.plate:not(.is-shown) .film-track { animation-play-state: paused; }
@container (max-width: 560px) { .film-col:nth-child(4) { display: none; } }
@container (max-width: 330px) { .film-col:nth-child(3) { display: none; } }
.film-tile { padding-bottom: 14px; }                        /* padding, not gap: the loop then joins exactly */
.film-tile img, .film-name { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; box-shadow: 0 0 0 1px rgba(243, 239, 231, 0.18); }
.film-name { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5em; padding: 0 6%; background: rgba(243, 239, 231, 0.03); text-align: center; }
.film-name b { font: 400 clamp(13px, 7cqi, 22px)/1.05 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.film-name span { font: 500 8px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }
.film-tile i { display: block; margin-top: 6px; font: 500 8.5px/1.2 var(--mono); font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.js:not(.no-webgl) .plate-link .plate.is-live { pointer-events: auto; cursor: pointer; }
.plate-link figcaption .ext { margin-left: 0.3em; }
.plate-link:hover figcaption, .plate-link:focus-visible figcaption { color: var(--ink); }
.plate-link:focus-visible .plate { outline: 1px solid rgba(243, 239, 231, 0.7); outline-offset: 8px; }
@media (prefers-reduced-motion: reduce) { .film-track { animation: none; } }
/* a drawn-in plate: its WebGL layer replaces the image while the drawing plays (main.js) */
.plate-draw { display: none; }
/* the sim-racing drawing's lights: a canvas over it (main.js drawSimFx) */
.plate-fx { display: none; }
.js:not(.no-webgl) .plate .plate-fx { display: block; position: absolute; top: 0; left: 0; width: 100%; height: var(--img-h); pointer-events: none; }
.js:not(.no-webgl) .plate.is-drawing .plate-draw { display: block; position: absolute; top: 0; left: 0; width: 100%; height: var(--img-h); }
.js:not(.no-webgl) .plate.is-drawing img { opacity: 0; }
/* the finished room the Spaces board turns into (main.js makeMorphPlate): a still after the board
   where there is no WebGL (no JS: its <noscript> copy) */
.plate img.plate-final { display: none; }
.js.no-webgl .plate img.plate-final { display: block; margin-top: 12px; }
/* once the morph is done (or WebGL is lost) the picture's own <img> takes the board's place */
.js:not(.no-webgl) .plate.is-final > img:not(.plate-final) { display: none; }
.js:not(.no-webgl) .plate.is-final > img.plate-final { display: block; }
/* the leader from the attachment to the rig, and the small attachment on it (main.js placeLink) */
.plate-leader { display: none; }
.js:not(.no-webgl) .plate-leader { display: block; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 0; overflow: visible; pointer-events: none; opacity: 0; }
.js:not(.no-webgl) .plate {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  max-width: none;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

/* name chapter */
/* offer */
.ch-offer {
  height: auto;
  min-height: 100vh;
  min-height: 100svh;
  padding: max(50vh, 340px) var(--pad) 0;   /* the raised mark and its drawing sheet sit above the form */
  display: flex;
  flex-direction: column;
}
.offer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 6vw, 120px);
  align-items: start;
  flex: 1;
}
.offer-copy h2 {
  margin: 0;
  font: 400 clamp(52px, 6vw, 108px) / 0.94 var(--serif);
  letter-spacing: -0.03em;
}
.offer-copy p { margin: 0.9em 0 0; max-width: 30ch; color: var(--muted); font-size: clamp(17px, 1.3vw, 20px); }

.offer-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 28px;
  padding: clamp(22px, 2.6vw, 34px);
  border-radius: 28px;
  background: linear-gradient(160deg, rgba(14, 13, 15, 0.5), rgba(14, 13, 15, 0.36));   /* darker glass: the lit paper behind it is bright */
  box-shadow: inset 0 0 0 1px rgba(243, 239, 231, 0.12), 0 40px 80px -40px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
}
.field { display: flex; flex-direction: column; min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(243, 239, 231, 0.88);
}
.field label span { letter-spacing: 0.04em; text-transform: none; color: var(--faint); font-weight: 400; margin-left: 6px; }
.field input::placeholder { color: rgba(243, 239, 231, 0.52); }
.field input, .field textarea {
  width: 100%;
  margin-top: 8px;
  padding: 8px 0 10px;
  border: 0;
  border-bottom: 1px solid rgba(243, 239, 231, 0.42);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 400 19px/1.3 var(--sans);
  caret-color: var(--ink);
  transition: border-color 0.3s;
  resize: none;
}
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--ink); }
.field input:focus-visible, .field textarea:focus-visible { box-shadow: 0 1px 0 0 var(--ink); }
.field [aria-invalid="true"] { border-bottom-color: var(--error); }
.err { margin: 6px 0 0; min-height: 1.2em; font-size: 13px; color: var(--error); }
.err:empty { min-height: 0; margin: 0; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form-foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.btn-send { padding: 17px 30px; font-size: 16px; }
.btn-send[disabled] { opacity: 0.55; cursor: progress; transform: none; }
.form-status { margin: 0; font-size: 14px; color: var(--muted); }
.form-status.is-error { color: var(--error); }
.form-note { margin: -6px 0 0; font-size: 13px; color: var(--muted); }

.sent { padding: clamp(24px, 3vw, 40px); border-radius: 28px; box-shadow: inset 0 0 0 1px var(--line); }
.sent-title { margin: 0; font: italic 400 clamp(44px, 4.4vw, 72px)/1 var(--serif); }
.sent p:last-child { margin: 12px 0 0; color: var(--muted); }
.sent:focus { outline: none; }

.foot {
  display: flex;
  gap: 24px;
  justify-content: space-between;
  align-items: center;
  margin-top: clamp(40px, 6vh, 80px);
  padding: 22px 0 calc(22px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--faint);
}
.foot p { margin: 0; }
.foot a { color: var(--muted); }

/* ---------- reveal choreography (JS only; content is visible without JS) ---------- */
.js .rv {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(8px);
  transition: opacity 0.9s var(--ease), transform 1.2s var(--ease), filter 1s var(--ease);
  transition-delay: calc(var(--d, 0) * 1ms);
}
.js .is-active .rv { opacity: 1; transform: none; filter: none; }

[data-split] .w { display: inline-block; overflow: hidden; padding: 0.04em 0.06em 0.14em; margin: -0.04em -0.06em -0.14em; vertical-align: top; }
[data-split] .c { display: inline-block; }
.js [data-split] .c {
  transform: translateY(112%) rotate(6deg);
  transform-origin: 0 100%;
  opacity: 0;
  transition: transform 1.25s var(--ease), opacity 0.5s linear;
  transition-delay: calc(var(--i) * 34ms + 120ms);
}
.js .is-active [data-split] .c { transform: none; opacity: 1; }

/* ---------- small screens ---------- */
@media (max-width: 1180px) {
  .rail { display: none; }
  .hud-ruler { display: none; }
}

@media (max-width: 820px), (max-aspect-ratio: 85/100) {
  .brand { font-size: 16px; }

  /* one screen-fixed scrim behind the text (per-section scrims left seams while scrolling) */
  .scrim {
    display: block;
    position: fixed;
    inset: 48% 0 0;
    z-index: 0;
    background: linear-gradient(to top, rgba(5, 5, 7, 0.86) 40%, rgba(5, 5, 7, 0));
    pointer-events: none;
  }
  /* each text block carries its own shade, so it stays legible while it scrolls */
  .copy::before {
    content: "";
    position: absolute;
    inset: -35% calc(-1 * var(--pad) - 12%) -25%;
    z-index: -1;
    background: radial-gradient(ellipse 48% 45% at 50% 55%, rgba(5, 5, 7, 0.82) 38%, rgba(5, 5, 7, 0) 100%);
    pointer-events: none;
  }

  .hero-copy { right: var(--pad); }
  .hero-title { font-size: clamp(34px, 9.5vw, 48px); }
  .scroll-cue { display: none; }
  .js:not(.no-webgl) .mat-corner { display: none; }

  .copy {
    top: auto;
    bottom: calc(var(--pad) + env(safe-area-inset-bottom));
    transform: none;
    width: auto;
    right: var(--pad);
  }
  .copy h2 { font-size: clamp(72px, 22vw, 120px); }
  .ch-work .copy, .ch-work[data-side="right"] .copy { left: var(--pad); right: var(--pad); width: auto; bottom: calc(var(--pad) + env(safe-area-inset-bottom)); }
  .ch-work .copy h2 { font-size: clamp(54px, 15vw, 88px); }
  .fallback-mark { object-fit: contain; object-position: 63% 18%; }
  .plate figcaption { font-size: 9.5px; letter-spacing: 0.1em; margin-top: 6px; }
  /* small phones: one small centred plate, its caption wider than the drawing and centred
     under it, so it stays on one or two lines */
  .plate.is-tight figcaption { width: max-content; max-width: min(17rem, 88vw); margin: 14px 0 0 50%; transform: translateX(-50%); }
  .plate.is-wide-cap figcaption { width: max-content; max-width: min(15rem, 78vw); }
  .plate.is-wide-cap.is-end figcaption { margin-left: 100%; transform: translateX(-100%); }
  .def { font-size: 17px; }
  .next { margin-top: 16px; }
  .btn-next { padding: 10px 16px; font-size: 13px; }

  .brand .brand-word { height: 19px; }

  .ch-offer { padding-top: 38vh; }
  .offer-inner { grid-template-columns: 1fr; }
  .offer-form { grid-template-columns: 1fr; gap: 22px; }
  .offer-copy h2 { font-size: clamp(46px, 13vw, 64px); }
  .foot { flex-direction: column; align-items: flex-start; gap: 6px; }
}
/* short phones (and phones held sideways): a more compact block of words, so the hand-on button
   costs the work plates no room and the words stay below the nav */
@media (max-width: 820px) and (max-height: 700px) {
  .ch-work .copy h2 { font-size: clamp(38px, 11vw, 48px); }
  .ch-work .def { font-size: 15px; line-height: 1.42; }
  .sense { font-size: 12px; }
  .next { margin-top: 10px; }
  .btn-next { padding: 8px 14px; font-size: 12.5px; }
}
@media (max-width: 820px) and (max-height: 430px) {
  .ch-work .copy, .ch-work[data-side="right"] .copy { bottom: calc(10px + env(safe-area-inset-bottom)); }
  .ch-work .copy h2 { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv, .js [data-split] .c { transition: none; opacity: 1; transform: none; filter: none; }
  .scroll-cue i, .scroll-cue span { animation: none; }
}

[hidden] { display: none !important; }

/* the contact sheet: an engineering drawing sheet around the raised mark (SAVAGE desk mats) */
.sheet { position: fixed; top: 0; left: 0; z-index: 0; pointer-events: none; opacity: 0; will-change: transform, opacity; --ink2: rgba(243, 239, 231, 0.5); }
.no-webgl .sheet, html:not(.js) .sheet { display: none; }
.sheet-lines { position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); overflow: visible; }
.sheet-lines .frame { fill: none; stroke: rgba(243, 239, 231, 0.42); stroke-width: 1; }
.sheet-lines .ticks { fill: none; stroke: rgba(243, 239, 231, 0.26); stroke-width: 1; }
.sheet-lines text { font: 500 8.5px var(--mono); letter-spacing: 0.06em; fill: rgba(243, 239, 231, 0.4); }
.sheet-lines .reg { fill: none; stroke: rgba(243, 239, 231, 0.4); stroke-width: 1; }
.sheet-title { position: absolute; left: 26px; top: 34px; display: flex; flex-direction: column; gap: 8px; }
.sheet-title b { font: 600 15px/1 var(--sans); letter-spacing: 0.34em; text-transform: uppercase; color: rgba(243, 239, 231, 0.82); }
.sheet-title span { padding-top: 7px; border-top: 1px solid rgba(243, 239, 231, 0.3); font: 500 8.5px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink2); }
.sheet-marks { position: absolute; left: 26px; bottom: 44px; display: flex; align-items: center; gap: 10px; }
.sheet-marks .bars { display: flex; gap: 5px; align-items: flex-end; }
.sheet-marks .bars u { display: block; width: 4px; height: 42px; background: rgba(243, 239, 231, 0.55); }
.sheet-marks .bars u:nth-child(2) { height: 34px; }
.sheet-marks .bars u:nth-child(3) { height: 26px; }
.sheet-marks .x { position: relative; width: 20px; height: 20px; }
.sheet-marks .x::before, .sheet-marks .x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 5px; margin: -2.5px 0 0 -13px; background: rgba(243, 239, 231, 0.7); transform: rotate(45deg); }
.sheet-marks .x::after { transform: rotate(-45deg); }
.sheet-marks .x.dim::before, .sheet-marks .x.dim::after { background: rgba(243, 239, 231, 0.22); }
.sheet-marks .plus { position: relative; width: 22px; height: 22px; border: 1px solid rgba(243, 239, 231, 0.45); }
.sheet-marks .plus::before, .sheet-marks .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1px; margin: 0 0 0 -5.5px; background: rgba(243, 239, 231, 0.7); }
.sheet-marks .plus::after { transform: rotate(90deg); }
.sheet-marks .plus.solid { background: rgba(243, 239, 231, 0.75); }
.sheet-marks .plus.solid::before, .sheet-marks .plus.solid::after { background: #1b1b1d; }
.sheet-motto { position: absolute; left: 26px; bottom: 16px; font: 500 10px/1 var(--mono); letter-spacing: 0.32em; text-transform: uppercase; color: rgba(243, 239, 231, 0.6); }
.sheet-motto em { font-style: normal; color: rgba(243, 239, 231, 0.9); padding: 0 0.2em; }
.sheet-stack { position: absolute; right: 42px; top: 30px; bottom: 14px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; --box: clamp(16px, calc((100% - 60px) / 6.6), 30px); }
.sheet-stack b {
  display: grid; place-items: center; width: 30px; height: 30px; max-height: 13%; aspect-ratio: 1;
  border: 1px solid rgba(243, 239, 231, 0.5); font: 700 15px/1 var(--sans); color: rgba(243, 239, 231, 0.85);
}
.sheet-stack b.fill { background: rgba(243, 239, 231, 0.8); color: #1b1b1d; border-color: transparent; }
.sheet-stack b.dim { color: rgba(243, 239, 231, 0.4); background: #1b1b1d; }
.sheet-stack span { margin-top: 4px; font: 600 9.5px/1 var(--sans); letter-spacing: 0.34em; text-transform: uppercase; color: rgba(243, 239, 231, 0.7); }
.sheet-stack em { font: 400 9px/1 var(--mono); font-style: normal; letter-spacing: 0.2em; color: rgba(243, 239, 231, 0.55); }
.sheet-stack small { font: 500 8px/1 var(--mono); letter-spacing: 0.2em; color: rgba(243, 239, 231, 0.4); }
.sheet.is-narrow .sheet-title, .sheet.is-narrow .sheet-marks, .sheet.is-narrow .sheet-stack,
.sheet.is-short .sheet-title, .sheet.is-short .sheet-marks, .sheet.is-short .sheet-stack, .sheet.is-short .sheet-motto,
.sheet.no-title .sheet-title, .sheet.no-title .sheet-marks, .sheet.no-sub .sheet-title span, .sheet.no-stack .sheet-stack { display: none; }
.sheet.is-narrow .sheet-motto { left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 8.5px; letter-spacing: 0.22em; bottom: 10px; }

/* the scene alone (?bare): the source of the no-WebGL still */
.bare .nav, .bare main, .bare .rail, .bare .hud, .bare .scrim, .bare .sheet { visibility: hidden; }
/* social card render (?og) */
.og .nav, .og .mat-corner, .og .rail, .og .hero-sub, .og .hero-actions, .og .scroll-cue, .og .eyebrow, .js:not(.no-webgl).og .hud { display: none; }
.og .hero-title { font-size: 44px; }

/* ---------- privacy notice ---------- */
.legal { position: relative; z-index: 1; max-width: 46rem; margin: 0 auto; padding: calc(120px + env(safe-area-inset-top)) var(--pad) 64px; }
.legal h1 { margin: 0 0 0.15em; font: 400 clamp(56px, 8vw, 104px) / 0.95 var(--serif); letter-spacing: -0.03em; }
.legal .updated { margin: 0 0 40px; color: var(--faint); font-size: 14px; }
.legal h2 { margin: 48px 0 12px; font: 400 clamp(28px, 3vw, 36px) / 1.1 var(--serif); letter-spacing: -0.01em; }
.legal p, .legal li { color: var(--muted); font-size: 17px; line-height: 1.65; }
.legal ul { padding-left: 1.2em; }
.legal li { margin: 6px 0; }
.legal a { color: var(--ink); }
.legal strong { color: var(--ink); font-weight: 500; }
.short {
  margin: 0 0 8px;
  padding: 24px 28px;
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px var(--line);
  background: rgba(243, 239, 231, 0.04);
}
.short h2 { margin-top: 0; font-size: 24px; }
.short ul { margin: 0; }
.legal-page .foot { max-width: 46rem; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }