/* Giant Entity: the shared system, look v3 "One Body" (plan/look-v3.md). Porcelain ground, carbon
   ink, and three materials that live in the drawings; ultramarine doubles as the primary action.
   Page builders add page CSS through their template or front matter; see src/README.md. */

@font-face {
  font-family: "Entity Sans";
  src: url("/assets/fonts/entity-sans-v2027-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-stretch: 100% 125%;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  /* Colour (section 3). Contrast ratios computed with the WCAG 2.1 formula. */
  --porcelain: #eef1f4;      /* the ground */
  --paper: #f8f9fb;          /* raised: cards, inputs, chips */
  --carbon: #171a24;         /* ink; 15.31 on porcelain */
  --slate: #4a5162;          /* secondary text on light fields; 7.00 on porcelain */
  /* The three materials (look-v3 section 3, as built 2026-10-22): sapphire, garnet and jade. The
     token names are the roles (rose is Workflow and automation, citron is 3D and games); the side
     faces are the top's linear light times 0.62 (-deep) and 0.37 (-dark), the ratios the WebGL
     lighting is solved to. src/data/interlock.json holds the same hex values; the build fails if
     the two disagree. */
  --ultra: #1b31c5;          /* Brand and websites; the primary action; porcelain on it 8.08 */
  --ultra-deep: #14269f;     /* porcelain on it 10.25 */
  --ultra-dark: #0d1c7d;     /* porcelain on it 12.52 */
  --rose: #b9345a;           /* madder. Workflow and automation; text on it is porcelain (5.00), never carbon (3.06) */
  --rose-deep: #952847;
  --rose-dark: #751e37;
  --citron: #3a9a72;         /* jade. 3D and games; text on it is carbon (5.00), never porcelain (3.06) */
  --citron-deep: #2d7c5b;
  --citron-dark: #226147;
  --carbon-muted: #a6acbb;   /* secondary text on carbon; 7.64 */
  --carbon-surface: #222633;
  --success: #1e6b3d;        /* forms only; 5.74 on porcelain */
  --error: #b3261e;          /* forms only; 5.77 on porcelain */

  /* Field tokens: components read these, so a field class recolours everything inside it. */
  --ground: var(--porcelain);
  --fg: var(--carbon);
  --fg-muted: var(--slate);
  --surface: #e1e6ed;        /* one step down: closing bands, brief panels, plate backgrounds */
  --input-bg: var(--paper);

  /* Names the v2 and early v3 stylesheets still use, until Parts B and C restyle them. */
  --ink: var(--carbon);
  --ink-muted: var(--slate);
  --paint: var(--carbon);
  --graphite: var(--carbon);
  --graphite-ink: var(--porcelain);
  --graphite-muted: var(--carbon-muted);
  --graphite-surface: var(--carbon-surface);
  --graphite-input: var(--carbon-surface);
  --paper-surface: #e1e6ed;
  --paper-input: var(--paper);

  --font: "Entity Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --display-weight: 880;
  --heading-weight: 800;
  --track-display: -0.025em;
  --track-heading: -0.012em;

  /* Type (section 4): five steps, fluid from 390 to 3840 px. A sixth size is a build failure. */
  --fs-small: clamp(0.8125rem, 0.8rem + 0.0833vw, 1rem);
  --fs-body: clamp(1rem, 0.975rem + 0.1667vw, 1.375rem);
  --fs-lead: clamp(1.1875rem, 1.1rem + 0.375vw, 2rem);
  --fs-heading: clamp(1.75rem, 1.4rem + 2.333vw, 7rem);
  --fs-display: clamp(2.75rem, 1.6rem + 4.6vw, 12.5rem);
  /* nav links: their own clamp inside the body step */
  --fs-nav: clamp(1.0625rem, 1rem + 0.15vw, 1.25rem);

  --sp-3xs: clamp(0.25rem, 0.2rem + 0.1vw, 0.5rem);
  --sp-2xs: clamp(0.5rem, 0.4rem + 0.2vw, 0.875rem);
  --sp-xs: clamp(0.75rem, 0.6rem + 0.35vw, 1.375rem);
  --sp-s: clamp(1rem, 0.8rem + 0.6vw, 2rem);
  --sp-m: clamp(1.5rem, 1.1rem + 1.1vw, 3.25rem);
  --sp-l: clamp(2.25rem, 1.6rem + 2vw, 5.5rem);
  --sp-xl: clamp(3.5rem, 2.4rem + 3.6vw, 9rem);
  --sp-section: clamp(5rem, 3.4rem + 6.5vw, 17.5rem);

  --margin: clamp(1rem, 2.8vw, 7rem);
  --gutter: clamp(0.75rem, 1.4vw, 3rem);
  --wrap-max: 3600px;
  --measure: 68ch;
  --nav-h: clamp(4.5rem, 4rem + 0.5vw, 5rem);
  --header-h: var(--nav-h);
  --mark-h: clamp(1.5rem, 1.3rem + 0.3vw, 1.75rem);
  --radius: 4px;
  --edge-w: clamp(1.75rem, 2vw, 4rem);

  /* Motion (section 8) */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-press: 120ms;
  --dur-hover: 180ms;
  --dur-link: 150ms;
  --dur-menu-open: 200ms;
  --dur-menu-close: 140ms;
  --dur-seat: 160ms;

  color-scheme: light;
}

/* Hairlines are derived from each field's own ink, so they are re-declared wherever the ink changes. */
:root,
.field-porcelain,
.field-carbon,
.field-graphite,
.field-ultra {
  --line: color-mix(in srgb, var(--fg) 16%, var(--ground));
  --line-strong: color-mix(in srgb, var(--fg) 52%, var(--ground)); /* 3.44:1 on porcelain */
}

.field-porcelain { --ground: var(--porcelain); --fg: var(--carbon); --fg-muted: var(--slate); --surface: #e1e6ed; --input-bg: var(--paper); }

/* The dark stage: the 3D and games pillar's head, the Work page's 3D group. */
.field-carbon,
.field-graphite {
  --ground: var(--carbon);
  --fg: var(--porcelain);
  --fg-muted: var(--carbon-muted);
  --surface: var(--carbon-surface);
  --input-bg: var(--carbon-surface);
  color-scheme: dark;
  background: var(--ground);
  color: var(--fg);
}

/* The home's closing band. */
.field-ultra {
  --ground: var(--ultra);
  --fg: var(--porcelain);
  --fg-muted: var(--porcelain);
  --surface: var(--ultra-deep);
  --input-bg: var(--ultra-deep);
  background: var(--ground);
  color: var(--fg);
}

@media (max-width: 719px) {
  :root { --fs-display: clamp(2.25rem, 10.6vw, 3.5rem); }
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--porcelain);
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  font-stretch: 100%;
  line-height: 1.55;
  font-kerning: normal;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
p { max-width: var(--measure); text-wrap: pretty; }
b, strong { font-weight: 500; }

/* Links: the underline thickens, the colour never changes. */
a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-thickness var(--dur-link) var(--ease-out);
}
a:hover { text-decoration-thickness: 2px; }

::selection { background: var(--ultra); color: var(--porcelain); }
.field-carbon ::selection,
.field-graphite ::selection,
.field-ultra ::selection { background: var(--porcelain); color: var(--carbon); }

/* Focus: 2 px in the field's ink, 3 px off, so it is carbon on light fields and porcelain on dark ones. */
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
main:focus { outline: none; }

.icon { flex: none; width: 1.5rem; height: 1.5rem; }
html:not(.js) .site-nav__caret { display: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  z-index: 40;
  left: var(--margin);
  top: 0.5rem;
  padding: 0.6em 1em;
  background: var(--carbon);
  color: var(--porcelain);
  border-radius: var(--radius);
  font-weight: 500;
  transform: translateY(-300%);
}
.skip-link:focus { transform: none; }

/* ---------- Type ---------- */

h1, h2, .t-display, .t-heading {
  font-stretch: 125%;
  text-wrap: balance;
}
h1, .t-display {
  font-size: var(--fs-display);
  font-weight: var(--display-weight);
  line-height: 0.92;
  letter-spacing: var(--track-display);
}
h2, .t-heading {
  font-size: var(--fs-heading);
  font-weight: var(--heading-weight);
  line-height: 1;
  letter-spacing: var(--track-heading);
}
h3, .t-lead {
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -0.008em;
}
h3, h4 { font-weight: 500; }
h4, .t-body { font-size: var(--fs-body); line-height: 1.55; letter-spacing: 0; }
.t-small { font-size: var(--fs-small); line-height: 1.45; letter-spacing: 0.004em; }
.t-muted { color: var(--fg-muted); }
.t-lead { max-width: 40ch; }
.t-num { font-variant-numeric: tabular-nums; }

/* Long text pages (privacy) */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1em; }
.prose > h2 { font-size: var(--fs-lead); font-stretch: 125%; font-weight: var(--heading-weight); letter-spacing: -0.01em; margin-top: 2.2em; }
.prose > h2 + * { margin-top: 0.6em; }
.prose ul, .prose ol { padding-left: 1.2em; }

/* ---------- Layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: var(--margin);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-m);
}
.grid > * { grid-column: 1 / -1; min-width: 0; }
.grid--loose { row-gap: var(--sp-xl); }

.col-start-1 { grid-column-start: 1; } .col-start-2 { grid-column-start: 2; } .col-start-3 { grid-column-start: 3; }
.col-start-4 { grid-column-start: 4; } .col-start-5 { grid-column-start: 5; } .col-start-6 { grid-column-start: 6; }
.col-start-7 { grid-column-start: 7; } .col-start-8 { grid-column-start: 8; } .col-start-9 { grid-column-start: 9; }
.col-start-10 { grid-column-start: 10; } .col-start-11 { grid-column-start: 11; } .col-start-12 { grid-column-start: 12; }
.col-span-1 { grid-column-end: span 1; } .col-span-2 { grid-column-end: span 2; } .col-span-3 { grid-column-end: span 3; }
.col-span-4 { grid-column-end: span 4; } .col-span-5 { grid-column-end: span 5; } .col-span-6 { grid-column-end: span 6; }
.col-span-7 { grid-column-end: span 7; } .col-span-8 { grid-column-end: span 8; } .col-span-9 { grid-column-end: span 9; }
.col-span-10 { grid-column-end: span 10; } .col-span-11 { grid-column-end: span 11; } .col-span-12 { grid-column-end: span 12; }

@media (max-width: 719px) {
  .grid > [class*="col-"] { grid-column: 1 / -1; }
}

.section { padding-block: calc(var(--sp-section) / 2); }
.field-carbon.section,
.field-graphite.section { padding-block: calc(var(--sp-section) * 0.75); }

/* ---------- Actions ---------- */

/* The primary button: a flat ultramarine slab lit from above by a 1 px highlight. No shadow. */
.button {
  --button-bg: var(--ultra);
  --button-bg-hover: var(--ultra-deep);
  --button-bg-press: var(--ultra-dark);
  --button-fg: var(--porcelain);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 2.75rem;
  padding: 0.5em 1.25em;
  border: 0;
  border-radius: var(--radius);
  background: var(--button-bg);
  color: var(--button-fg);
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16);
  transition: background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.button .icon,
.link-cta .icon { width: 1.25rem; height: 1.25rem; transition: transform var(--dur-hover) var(--ease-out); }
.button:hover { background-color: var(--button-bg-hover); text-decoration: none; }
.button:hover .icon,
.button:focus-visible .icon,
.link-cta:hover .icon,
.link-cta:focus-visible .icon { transform: translateX(4px); }
.button:active { background-color: var(--button-bg-press); transform: scale(0.97); }
.button:disabled,
.button[aria-disabled="true"] { opacity: 0.38; cursor: not-allowed; }
.button:disabled:hover,
.button[aria-disabled="true"]:hover { background-color: var(--button-bg); }
.button:disabled:hover .icon { transform: none; }
.button:disabled:active { transform: none; }

/* On carbon the slab turns porcelain; on the ultra field it is inverted. */
.field-carbon .button,
.field-graphite .button { --button-bg: var(--porcelain); --button-bg-hover: var(--paper); --button-bg-press: var(--paper); --button-fg: var(--carbon); box-shadow: none; }
.field-ultra .button { --button-bg: var(--porcelain); --button-bg-hover: var(--paper); --button-bg-press: var(--paper); --button-fg: var(--ultra); box-shadow: none; }
.field-ultra .button:hover { color: var(--ultra-deep); }

/* The wire button (the 404): an outline that fills ultramarine from the left in three steps. */
.button--wire {
  --button-bg: transparent;
  --button-bg-hover: transparent;
  --button-bg-press: transparent;
  --button-fg: var(--fg);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 1px var(--fg);
}
.button--wire::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--ultra);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 260ms steps(3, jump-end);
}
.button--wire:hover,
.button--wire:focus-visible { --button-fg: var(--porcelain); }
.button--wire:hover::before,
.button--wire:focus-visible::before { clip-path: inset(0); }

/* The arrow link: weight 500, the underline thickens and the arrow travels 4 px. */
.link-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 2.75rem;
  font-weight: 500;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.link-cta:hover { text-decoration-thickness: 2px; }
button.link-cta { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 500; cursor: pointer; }

.link-cta:not(:has(> .icon))::after {
  content: "";
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  background: currentColor;
  mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"%3E%3Cpath d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"/%3E%3C/svg%3E') center / contain no-repeat;
  transition: transform var(--dur-hover) var(--ease-out);
}
.link-cta:not(:has(> .icon)):hover::after { transform: translateX(4px); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-xs) var(--sp-m); }

/* ---------- Promises: four sentences, set large ---------- */

.promises { list-style: none; padding: 0; display: grid; gap: var(--sp-l); }
.promise {
  font-size: var(--fs-heading);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.02em;
  max-width: 24ch;
  text-wrap: balance;
}
.promise__verb {
  font-stretch: 125%;
  font-weight: var(--display-weight);
  letter-spacing: var(--track-heading);
}
.promise__detail {
  display: block;
  max-width: 40ch;
  margin-top: 0.75em;
  font-size: var(--fs-lead);
  font-stretch: 100%;
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -0.008em;
  color: var(--fg-muted);
  text-wrap: pretty;
}

/* ---------- Work plates: 16:10, image full bleed, one caption format ---------- */

/* A page that lays plates on subgrid rows resets this to normal: a size container cannot take its height from the shared rows (work.css). */
.plate { container-type: inline-size; }
.plate__frame { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface); }
.plate__frame > img,
.plate__frame > video,
.plate__frame > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The brand's caption size, so a page of plates stays quieter than the work it describes. */
.plate__caption {
  display: grid;
  gap: 0.1em;
  margin-top: var(--sp-xs);
  font-size: var(--fs-small);
  line-height: 1.45;
  overflow-wrap: anywhere;
  color: var(--fg-muted);
}
.plate__what { color: var(--fg); font-weight: 500; }
.plate__status a { white-space: nowrap; }
@container (min-width: 64rem) {
  .plate__caption { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); }
}

/* ---------- Structure and finish: two layers, the enamel edge is the handle ---------- */

.compare { container-type: inline-size; }
.compare__stage {
  --pos: 50%;
  position: relative;
  aspect-ratio: var(--compare-ratio, 16 / 9);
  overflow: hidden;
  background: var(--paper);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.compare__layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.compare__structure { color: var(--ink); }
.compare__structure > svg { width: 100%; height: 100%; }
/* Wire drawings keep one hairline at any size, as the drafting weights intend. */
.wire svg * { vector-effect: non-scaling-stroke; }
.compare__finish { clip-path: inset(0 0 0 var(--pos)); }
.compare__rail { position: absolute; inset: 0; pointer-events: none; transform: translateX(var(--pos)); }
.compare__edge {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--edge-w);
  transform: translateX(-50%);
  pointer-events: auto;
  cursor: ew-resize;
  /* a vertical swipe that starts on the edge still scrolls the page; the script reads clientX only */
  touch-action: pan-y;
}
/* A finger-sized grip around a thin edge */
.compare__edge::after { content: ""; position: absolute; inset: 0 -1.25rem; }
.compare__edge svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  /* the coat stands proud of the page: its shadow falls away from the light, down and right */
  filter: drop-shadow(0.18em 0.1em 0.3em rgb(0 0 0 / 0.32));
}
.compare__edge:focus-visible { outline-offset: 4px; }
.compare__note { margin-top: var(--sp-xs); color: var(--fg-muted); }

/* ---------- People and credits ---------- */

.person {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-xs);
  align-content: start;
  padding-block: var(--sp-l);
  border-top: 1px solid var(--line);
}
.person > * { min-width: 0; grid-column: 4 / -1; }
.person__portrait {
  grid-column: 1 / span 3;
  grid-row: 1 / span 5;
  width: 100%;
  max-width: 20rem;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(1);
}
.person__name {
  /* the name's glyphs hang below its line box; this keeps the title clear of them at every size */
  padding-bottom: 0.1em;
  font-size: var(--fs-heading);
  font-stretch: 125%;
  font-weight: var(--heading-weight);
  line-height: 1;
  letter-spacing: var(--track-heading);
}
.person__title { font-size: var(--fs-lead); line-height: 1.32; color: var(--fg-muted); }
.person__bio { margin-top: var(--sp-xs); }
.person .credits { margin-top: var(--sp-s); }
/* The portrait never grows past what a 400 px source holds, so on wide screens it gives up columns
   and the name follows one column after it. */
@media (min-width: 2000px) {
  .person > * { grid-column: 3 / -1; }
  .person__portrait { grid-column: 1 / span 2; }
}
@media (min-width: 3200px) {
  .person > * { grid-column: 2 / -1; }
  .person__portrait { grid-column: 1 / span 1; }
}
@media (max-width: 719px) {
  .person { display: flex; flex-direction: column; }
  .person__portrait { width: min(16rem, 70%); margin-bottom: var(--sp-xs); }
}

/* Film end credits: what was done, right-aligned, against where and for whom, on one axis. */
.credits { list-style: none; padding: 0; display: grid; row-gap: 0.3em; line-height: 1.38; }
.credits > li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gutter); }
.credits__role { text-align: right; color: var(--fg-muted); }
.credits > li.credits__break { margin-top: 0.9em; }
@media (max-width: 719px) {
  .credits { row-gap: 0.7em; }
  .credits > li { grid-template-columns: 1fr; }
  .credits__role { text-align: left; font-size: var(--fs-small); }
}

/* ---------- Forms ---------- */

/* align-content: start keeps an input its own height when a neighbour in the row shows an error */
.field { display: grid; gap: 0.45em; align-content: start; }
.field__label { font-weight: 500; }
.field__optional { font-weight: 400; color: var(--fg-muted); }
.field__help { font-size: var(--fs-small); color: var(--fg-muted); }
.field__error { font-size: var(--fs-small); font-weight: 500; color: var(--error); }
.fields { display: grid; gap: var(--sp-s) var(--gutter); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fields > .field--full { grid-column: 1 / -1; }
@media (max-width: 719px) { .fields { grid-template-columns: 1fr; } }

/* Inputs: paper, a 3.44:1 boundary, the border turns carbon under the hand. Errors appear without motion. */
.input {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75em 0.9em;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--input-bg);
  color: var(--fg);
  font: inherit;
  line-height: 1.4;
  transition: border-color var(--dur-link) var(--ease-out);
}
textarea.input { min-height: 9em; resize: vertical; }
.input::placeholder { color: var(--fg-muted); opacity: 1; }
.input:hover { border-color: var(--fg); }
.input:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; border-color: var(--fg); }
.input[aria-invalid="true"] { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); transition: none; }
.input:disabled { opacity: 0.5; cursor: not-allowed; }

/* Chips: a joint inside the control closes when it is chosen. Checked, the chip fills carbon, the
   tick draws, and a 2 px porcelain seat appears inside the edge (an inset outline). The tick box
   keeps its size, so choosing never reflows the row. */
.choice-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.choice-group > legend { padding: 0; font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: var(--sp-xs); }
.chip { position: relative; display: inline-flex; cursor: pointer; }
.chip > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.chip > span {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 2.75rem;
  padding: 0.55em 1em 0.55em 0.8em;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--input-bg);
  line-height: 1.2;
  user-select: none;
  outline: 2px solid transparent;
  outline-offset: -5px;
  transition: background-color var(--dur-press) var(--ease-out), border-color var(--dur-hover) var(--ease-out), color var(--dur-press) var(--ease-out), outline-color var(--dur-seat) var(--ease-out);
}
/* the tick box, 16 px */
.chip > span::before {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  border: 1px solid currentColor;
  border-radius: 2px;
}
/* the tick, drawn in on check (the Phosphor check, as a mask so it takes the chip's ink) */
.chip > span::after {
  content: "";
  position: absolute;
  left: calc(0.8em + 1px);
  top: 50%;
  width: 1rem;
  height: 1rem;
  margin-top: -0.5rem;
  background: currentColor;
  mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"%3E%3Cpath d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"/%3E%3C/svg%3E') center / 0.85rem no-repeat;
  opacity: 0;
  transition: opacity 110ms var(--ease-out);
}
.chip:hover > span { border-color: var(--fg); }
.chip > input:checked + span { background-color: var(--fg); border-color: var(--fg); color: var(--ground); outline-color: var(--ground); }
.chip > input:checked + span::before { border-color: transparent; }
.chip > input:checked + span::after { opacity: 1; transition-duration: var(--dur-press); }
.chip > input:focus-visible + span { outline: 2px solid var(--fg); outline-offset: 2px; }
.chip > input:disabled + span { opacity: 0.4; cursor: not-allowed; }

/* Three steps beside a live call brief. Without JavaScript the steps stack as one plain form. */
.booking { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--sp-l); }
.booking__main { grid-column: 1 / span 7; min-width: 0; display: grid; gap: var(--sp-l); align-content: start; }
.booking__aside { grid-column: 9 / -1; min-width: 0; }
@media (max-width: 1099px) {
  .booking__main { grid-column: 1 / span 7; }
  .booking__aside { grid-column: 8 / -1; }
}
@media (max-width: 719px) {
  .booking__main, .booking__aside { grid-column: 1 / -1; }
}

.stepper { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.stepper > li { display: grid; gap: 0.6em; align-content: start; font-size: var(--fs-small); line-height: 1.35; color: var(--fg-muted); }
/* Each step is wire until it is answered, then paint. */
.stepper > li::before {
  content: "";
  height: 4px;
  background: linear-gradient(var(--line-strong), var(--line-strong)) center / 100% 1px no-repeat;
}
.stepper > li[aria-current="step"] { color: var(--fg); font-weight: 500; }
.stepper > li[aria-current="step"]::before {
  background:
    linear-gradient(var(--fg), var(--fg)) left center / 50% 4px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) center / 100% 1px no-repeat;
}
.stepper > li.is-done { color: var(--fg); }
.stepper > li.is-done::before { background: var(--paint); }
/* Without a script the brief cannot fill, so it is not shown empty. */
html:not(.js) .stepper,
html:not(.js) .summary,
html:not(.js) [data-next],
html:not(.js) [data-back] { display: none; }

.step { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--sp-m); align-content: start; }
/* Focus moves to a step so its question is announced; the ring would frame the whole form. */
.step:focus { outline: none; }
.step > legend {
  padding: 0;
  margin-bottom: var(--sp-m);
  font-size: var(--fs-heading);
  font-stretch: 125%;
  font-weight: var(--heading-weight);
  line-height: 1;
  letter-spacing: var(--track-heading);
  text-wrap: balance;
}
.step__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-xs) var(--sp-m); }
.step__back {
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  cursor: pointer;
}
.step__back:hover { text-decoration-thickness: 2px; }

.summary {
  position: sticky;
  top: var(--sp-m);
  display: grid;
  gap: var(--sp-s);
  padding: var(--sp-m);
  background: var(--surface);
}
.summary__title { font-size: var(--fs-lead); font-weight: 500; line-height: 1.3; }
.summary__list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.55em var(--sp-s); }
.summary__list dt { padding-top: 0.15em; font-size: var(--fs-small); color: var(--fg-muted); }
.summary__list dd { overflow-wrap: anywhere; }
.summary__list dd.is-empty { color: var(--fg-muted); }
@media (max-width: 719px) {
  .summary { position: static; }
}

.form-status {
  display: block;
  max-width: none;
  padding: 0.9em 1.1em;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  font-weight: 500;
}
.form-status--success { color: var(--success); background: color-mix(in srgb, var(--success) 7%, var(--input-bg)); }
.form-status--error { color: var(--error); background: color-mix(in srgb, var(--error) 6%, var(--input-bg)); }
.form-status a { color: inherit; }

/* ---------- 404: the line, and the body in plan with one piece missing ---------- */

.notfound {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-m);
  align-content: center;
  min-height: calc(100dvh - var(--header-h));
  padding-block: var(--sp-xl);
}
.notfound > * { grid-column: 1 / span 7; min-width: 0; }
/* The headline is set like every other: solid carbon. The drawing carries the unfinished state; a
   stroked variable font shows its overlapping contours as seams inside the letters. */
.notfound__drawing { grid-column: 9 / -1; grid-row: 1 / span 3; align-self: center; color: var(--fg); }
.notfound__drawing svg { width: 100%; height: auto; }
@media (max-width: 719px) {
  .notfound > *, .notfound__drawing { grid-column: 1 / -1; grid-row: auto; }
}

/* ---------- Drawings: the body (look-v3 sections 6 and 9) ----------
   src/interlock.mjs draws every picture of the body; these are its materials and its four states.
   Three tones per material, a 1.5 px joint line in the material's -deep tone (a groove: the porcelain
   line read as a vector stroke on carbon and on the phone, and the -dark tone as a cartoon outline
   round the silhouette at 390; 2026-10-22), the ground shadow in the surface tone. */

.m-ultra { --m-top: var(--ultra); --m-right: var(--ultra-deep); --m-bottom: var(--ultra-dark); }
.m-rose { --m-top: var(--rose); --m-right: var(--rose-deep); --m-bottom: var(--rose-dark); }
.m-citron { --m-top: var(--citron); --m-right: var(--citron-deep); --m-bottom: var(--citron-dark); }

.body { overflow: visible; }
.body__shadow { fill: var(--surface); }
/* the lattice: a dot at every grid intersection, only ever under an unfinished drawing */
.body__lattice { fill: none; stroke: var(--fg); stroke-opacity: 0.18; stroke-width: 0.12; stroke-linecap: round; stroke-dasharray: 0 1; opacity: 0; }
.body:has([data-state="plan"]) .body__lattice { opacity: 1; }
/* the ground shadow belongs to the finished body only */
.body:has([data-state="plan"]) .body__shadow { opacity: 0; }
.pc__plan { fill: none; stroke: color-mix(in srgb, var(--fg) 55%, var(--ground)); stroke-width: 1px; vector-effect: non-scaling-stroke; opacity: 0; }
.pc__top { fill: var(--m-top); stroke: var(--m-right); stroke-width: 1.5px; stroke-linejoin: miter; vector-effect: non-scaling-stroke; }
.fc--r { fill: var(--m-right); }
.fc--b { fill: var(--m-bottom); }

/* plan: the outline on the lattice; solid and lifted: the build; muted: present but quiet */
.pc__plan[data-state="plan"] { opacity: 1; }
.pc[data-state="plan"] .pc__top,
.fc[data-state="plan"] { opacity: 0; }
.pc[data-state="muted"] .pc__top { fill: color-mix(in srgb, var(--m-top) 28%, var(--ground)); stroke: color-mix(in srgb, var(--m-bottom) 40%, var(--ground)); }
.fc[data-state="muted"] { fill: color-mix(in srgb, var(--m-right) 28%, var(--ground)); }
.pc__link { cursor: pointer; }
/* An outline on an SVG link is drawn in the drawing's own units, so a 2 px ring becomes a frame
   cells thick. The ring is the piece's own edge instead: 2 screen px in the field's ink (carbon on
   porcelain, porcelain on the carbon stage), whatever the drawing's scale. */
.pc__link:focus,
.pc__link:focus-visible { outline: none; }
/* a link covers exactly the visible part of its piece's top; under the hand that top deepens */
.pc__hit { fill: transparent; stroke: transparent; stroke-width: 1.5px; vector-effect: non-scaling-stroke; transition: fill var(--dur-hover) var(--ease-out); }
.pc__link:hover .pc__hit,
.pc__link:focus-visible .pc__hit,
.pc__link.is-named .pc__hit { fill: var(--m-right); stroke: var(--m-bottom); }
.pc__link:focus-visible .pc__hit { stroke: var(--fg); stroke-width: 2px; }

/* The hero's still (no WebGL, and every phone) carries the canvas's depth: each finished top falls
   off from its upper-left corner and its edges take a soft bevel, light on the near side and shade
   on the far (src/interlock.mjs finishDefs, drawn once beside the hero's SVG). */
.finish-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ge-lit { stop-color: color-mix(in oklab, var(--m-top), #fff 5%); }
.ge-far { stop-color: color-mix(in oklab, var(--m-top), #000 6%); }
@media (forced-colors: none) {
  .relief:not(.is-gl) .pc:is([data-state="solid"], [data-state="lifted"]) { filter: url(#ge-bevel); }
  .relief:not(.is-gl) .pc:is([data-state="solid"], [data-state="lifted"]).m-ultra .pc__top { fill: url(#ge-sheen-ultra); }
  .relief:not(.is-gl) .pc:is([data-state="solid"], [data-state="lifted"]).m-rose .pc__top { fill: url(#ge-sheen-rose); }
  .relief:not(.is-gl) .pc:is([data-state="solid"], [data-state="lifted"]).m-citron .pc__top { fill: url(#ge-sheen-citron); }
}

/* the order a drawing sweeps in: each piece waits on its footprint's diagonal */
[data-o="1"] { --o: 1; } [data-o="2"] { --o: 2; } [data-o="3"] { --o: 3; } [data-o="4"] { --o: 4; }
[data-o="5"] { --o: 5; } [data-o="6"] { --o: 6; } [data-o="7"] { --o: 7; } [data-o="8"] { --o: 8; }
[data-o="9"] { --o: 9; } [data-o="10"] { --o: 10; } [data-o="11"] { --o: 11; } [data-o="12"] { --o: 12; }

/* glyphs: the piece's footprint, one flat fill; the joint line only at 32 px and up */
.glyph { display: inline-block; height: 1.5rem; width: auto; vertical-align: middle; }
.glyph__fill { fill: var(--m-top); }
.glyph__joint { fill: none; stroke: var(--m-right); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }

@media (forced-colors: active) {
  .body__shadow, .body__lattice, .fc { display: none; }
  .pc__top { fill: Canvas; stroke: CanvasText; }
  .pc__plan { stroke: CanvasText; }
  .pc__link:focus-visible .pc__hit { stroke: Highlight; }
  .glyph__fill { fill: CanvasText; }
}

/* ---------- Entrances: pictures only; site.js arms the plates below the fold ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* a plate opens from a stepped mask: three 160 ms steps, 480 ms in all (look-v3 section 12) */
  .enter {
    transition-property: clip-path;
    transition-duration: 480ms;
    transition-timing-function: steps(3, jump-start);
    transition-delay: calc(var(--i, 0) * 110ms);
  }
  .enter:not(.is-in) { clip-path: inset(0 0 100% 0); }
  .enter.is-in { clip-path: inset(0); }

  @view-transition { navigation: auto; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 240ms; animation-timing-function: var(--ease-out); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header, .site-footer__mark, .skip-link { display: none; }
  .enter { clip-path: none !important; }
}

@media (forced-colors: active) {
  /* the seat is an outline, which forced colours would draw on every chip; only chosen chips keep it */
  .chip > input:not(:checked):not(:focus-visible) + span { outline: none; }
  .chip > span::after { forced-color-adjust: none; background: CanvasText; }
  .chip > input:checked + span::after { background: HighlightText; }
}