/* Design Blues: the split stage.
   Stone paper with near-black ink and one blueprint blue (the action, the focus ring). Gambarino sets the headings,
   General Sans everything else. No heading above 44px (Mufeeth's rule). Square corners, one button shape.
   The depth comes from real things: the rendered watch, the cabin's slate paint, photographs. */

@font-face { font-family: "Gambarino"; src: url("/fonts/gambarino-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("/fonts/general-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("/fonts/general-sans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
/* Console Flight's own faces, for its live renderer only (fetched when it draws) */
@font-face { font-family: "NORMT"; src: url("/media/db1210/live/normt.woff") format("woff"); font-display: block; }
@font-face { font-family: "E1234"; src: url("/media/db1210/live/e1234.woff") format("woff"); font-display: block; }
@font-face { font-family: "Technology"; src: url("/media/db1210/live/technology.woff") format("woff"); font-display: block; }
@font-face { font-family: "Roboto"; src: url("/media/db1210/live/roboto-light.woff") format("woff"); font-weight: 300; font-display: block; }   /* taste-skill-ignore: Console Flight's own face, for its renderer */
@font-face { font-family: "Roboto"; src: url("/media/db1210/live/roboto.woff") format("woff"); font-weight: 400; font-display: block; }   /* taste-skill-ignore: Console Flight's own face, for its renderer */
@font-face { font-family: "Roboto"; src: url("/media/db1210/live/roboto-medium.woff") format("woff"); font-weight: 500; font-display: block; }   /* taste-skill-ignore: Console Flight's own face, for its renderer */
@font-face { font-family: "Fredoka"; src: url("/media/db1210/live/fredoka-light.woff") format("woff"); font-weight: 300; font-display: block; }

:root {
  --bg: #dfdedb;
  --surface: #d3d2ce;
  --surface-2: #c8c7c2;
  --paper: #f1f0ed;        /* the lightest tone: fields, the printed sheet */
  --ink: #26251e;
  --muted: #55534c;
  --accent: #2456d6;
  --accent-press: #1d47b4;
  --accent-ink: #ffffff;
  --plate: #1c2329;        /* the cabin's dark plate: the stage's controls */
  --plate-2: #2b343c;
  --on-plate: #f1f0ed;
  --error: #a3271a;

  --display: "Gambarino", "Iowan Old Style", Georgia, serif;
  --font: "General Sans", "Helvetica Neue", Arial, sans-serif;
  --step-small: 0.875rem;                                     /* 14px */
  --step-body: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);      /* 17-18px */
  --step-lead: clamp(1.1875rem, 1.05rem + 0.45vw, 1.4375rem); /* 19-23px */
  --step-head: clamp(1.875rem, 1.35rem + 1.5vw, 2.75rem);     /* 30-44px: the largest type on the site */

  --margin: clamp(20px, 4vw, 56px);
  --col-pad: clamp(32px, 4.4vw, 72px);
  --gap: clamp(120px, 12vw, 200px);
  --radius: 0px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-press: 120ms; --t-hover: 180ms; --t-ui: 260ms; --t-reveal: 760ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 var(--step-body)/1.55 var(--font); font-kerning: normal;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, video, canvas, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, figure, fieldset, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.vh, .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; background: var(--ink); color: var(--paper); }
.skip:focus { top: 12px; }
[hidden] { display: none !important; }

h1, h2 { font: 400 var(--step-head)/1.04 var(--display); letter-spacing: -0.02em; text-wrap: balance; }
h3 { font: 500 var(--step-lead)/1.25 var(--font); letter-spacing: -0.005em; }
.lead { font-size: var(--step-lead); line-height: 1.45; max-width: 36ch; }
.small, .note { font-size: var(--step-small); color: var(--muted); }
.text-link { font-weight: 500; text-decoration: underline; }
.text-link:hover { text-decoration-thickness: 2px; }

/* the one button: flat blueprint blue, square */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px;
  background: var(--accent); color: var(--accent-ink); border: 0; border-radius: var(--radius);
  font: 500 var(--step-body)/1 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--t-hover) ease, transform var(--t-press) ease;
}
.btn:hover { background: var(--accent-press); }
.btn:active { transform: translateY(1px) scale(0.985); }
.btn.soon { background: var(--plate-2); color: var(--on-plate); cursor: default; }
.btn.soon:active { transform: none; }

/* ------------------------------------------------------------------------------------------------ the top */

.top { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; padding: 0 var(--margin); }
.mark { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.mark img { width: 28px; height: 28px; }
.top nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 22px; font-size: var(--step-small); }
.top nav a { text-decoration: none; padding: 8px 0; }
.top nav a:hover { text-decoration: underline; }
@media (max-width: 599px) { .top nav .wide { display: none; } }

/* ------------------------------------------------------------------------------------------------ the split */

.split { display: grid; grid-template-columns: minmax(0, 1fr); }
.stage-wrap { position: sticky; top: 0; z-index: 3; height: 50svh; min-height: 340px; }
.col { padding: 0 var(--margin) 40px; }
.intro { padding: 32px 0 8px; }
.intro .lead { margin-top: 18px; }

@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .stage-wrap { grid-column: 1; grid-row: 1 / span 2; align-self: start; height: 100svh; min-height: 600px; }
  .top { grid-column: 2; grid-row: 1; padding: 0 var(--col-pad); }
  .col { grid-column: 2; grid-row: 2; padding: 0 var(--col-pad) 120px; }
  .intro { padding: clamp(40px, 9vh, 112px) 0 12px; }
}

/* ------------------------------------------------------------------------------------------------ the stage */

.stage {
  --ctl: 132px;                       /* the facts' band at the foot, which the watch stands above */
  --side: min(100cqw, 100cqh - var(--ctl));
  position: relative; height: 100%; overflow: hidden; background: #3d4b57; color: var(--on-plate);
  container-type: size; isolation: isolate;
}
.stage .backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
/* the watch: a square that fits above the facts. Without script it holds the front pose with the face composited
   (tools/build_data.py); with script, the photographed pose, open where its screen shows, over the face in perspective */
.frame { position: absolute; width: var(--side); height: var(--side); left: calc((100cqw - var(--side)) / 2); top: calc((100cqh - var(--ctl) - var(--side)) / 2);
  touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.comp { position: absolute; inset: 0; width: 100%; height: 100%; display: none; transition: opacity 360ms ease; }
.comp[data-v="0"] { display: block; }
/* without script, the Looks below switch the picture */
.stage:has(.sw input:checked) .comp { display: none; }
.stage:has(.sw input[value="0"]:checked) .comp[data-v="0"], .stage:has(.sw input[value="1"]:checked) .comp[data-v="1"],
.stage:has(.sw input[value="2"]:checked) .comp[data-v="2"], .stage:has(.sw input[value="3"]:checked) .comp[data-v="3"],
.stage:has(.sw input[value="4"]:checked) .comp[data-v="4"], .stage:has(.sw input[value="5"]:checked) .comp[data-v="5"],
.stage:has(.sw input[value="6"]:checked) .comp[data-v="6"], .stage:has(.sw input[value="7"]:checked) .comp[data-v="7"],
.stage:has(.sw input[value="8"]:checked) .comp[data-v="8"], .stage:has(.sw input[value="9"]:checked) .comp[data-v="9"],
.stage:has(.sw input[value="10"]:checked) .comp[data-v="10"], .stage:has(.sw input[value="11"]:checked) .comp[data-v="11"] { display: block; }
.stage.js-stage .comp { display: block; opacity: 0; }
.stage.js-stage .comp.on { opacity: 1; }
.is-live .comp.on { opacity: 0; transition-delay: 200ms; }
.watch { position: absolute; inset: 0; cursor: grab; }
.turning .watch { cursor: grabbing; }
.watch .body { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; }
.screen { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.face-layer { position: absolute; left: 0; top: 0; width: 600px; height: 600px; transform-origin: 0 0; border-radius: 50%; overflow: hidden; opacity: 0; transition: opacity 420ms ease; }
.face-layer.on { opacity: 1; }
.face-layer > * { display: block; width: 100%; height: 100%; }
.screen.lit { animation: lit 900ms cubic-bezier(0.3, 0.7, 0.2, 1) both; }
@keyframes lit { 0%, 15% { opacity: 0.08; } }

/* the controls: Looks and the light, on the cabin's dark plate */
.controls { position: absolute; left: 0; right: 0; top: 0; bottom: var(--ctl); pointer-events: none; }
.controls > * { pointer-events: auto; }
.looks { position: absolute; left: 24px; bottom: 14px; max-width: calc(100% - 32px); display: flex; flex-wrap: wrap; gap: 6px; }
.sw { position: relative; display: block; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; background: var(--plate); padding: 3px; border: 0;
  transition: transform var(--t-press) ease, background-color var(--t-hover) ease; }
.sw img { width: 38px; height: 38px; border-radius: 50%; }
.sw input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sw:hover { transform: translateY(-2px); }
.sw:active { transform: scale(0.94); }
.sw:has(input:checked), .sw[aria-pressed="true"] { background: var(--paper); }
.sw:has(input:focus-visible) { outline: 2px solid var(--paper); outline-offset: 2px; }
.sw:focus-visible { outline-color: var(--paper); }
.looks.dim .sw { opacity: 0.55; }
.modes { position: absolute; top: 16px; right: 16px; display: flex; background: var(--plate); padding: 3px; }
.modes button { min-height: 40px; padding: 0 14px; border: 0; background: transparent; color: var(--on-plate); font-size: var(--step-small); font-weight: 500; cursor: pointer;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.modes button:hover { background: var(--plate-2); }
.modes button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.modes button:focus-visible { outline-color: var(--paper); outline-offset: 1px; }
.tilt-btn { position: absolute; top: 16px; left: 16px; min-height: 40px; padding: 0 14px; border: 0; background: var(--plate); color: var(--on-plate); font-size: var(--step-small); font-weight: 500; cursor: pointer; }

/* the facts: the chosen face, what it is, where to get it */
.facts { position: absolute; left: 0; right: 0; bottom: 0; min-height: var(--ctl); padding: 16px 24px 18px; background: var(--bg); color: var(--ink);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name act" "line act"; column-gap: 20px; align-content: center; }
.facts-name { grid-area: name; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.facts-name strong { font: 400 var(--step-lead)/1.15 var(--display); letter-spacing: -0.01em; }
.facts-name span { font-size: var(--step-small); color: var(--muted); }
.facts-line { grid-area: line; margin-top: 4px; font-size: var(--step-small); color: var(--muted); max-width: 46ch; }
.facts-act { grid-area: act; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 8px; }
.facts-act .text-link { font-size: var(--step-small); }
.facts.swap > * { animation: facts-in 420ms var(--ease-out) both; }
.facts.swap > :nth-child(2) { animation-delay: 60ms; }
.facts.swap > :nth-child(3) { animation-delay: 120ms; }
@keyframes facts-in { from { opacity: 0; transform: translateY(10px); } }

@media (min-width: 960px) {
  .facts { padding-left: var(--col-pad); padding-right: var(--col-pad); }
  .looks { left: var(--col-pad); }
  .modes { right: var(--col-pad); }
  .tilt-btn { left: var(--col-pad); }
}
@media (max-width: 959px) {
  .stage { --ctl: 64px; }
  .facts { padding: 8px 12px 8px 16px; grid-template-areas: "name act"; align-items: center; }
  .facts-line, .facts-act .text-link { display: none; }
  .facts-name strong { font-size: 1.1875rem; }
  .facts .btn { min-height: 44px; padding: 0 14px; font-size: 0.9375rem; }
  .looks { left: 10px; bottom: 8px; max-width: calc(100% - 20px); gap: 4px; }
  .sw { width: 38px; height: 38px; padding: 3px; }
  .sw img { width: 32px; height: 32px; }
  .modes { top: 10px; right: 10px; }
  .tilt-btn { top: 10px; left: 10px; }
  .modes button { padding: 0 10px; }
}

/* ------------------------------------------------------------------------------------------------ the collection */

.browse { padding-top: 56px; }
.find { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 10px; align-items: end; }
html:not(.js) .find { display: none; }
.find label { display: block; font-size: var(--step-small); color: var(--muted); margin-bottom: 6px; }
.find input[type="search"], .find select {
  width: 100%; min-height: 52px; padding: 0 16px; background: var(--paper); border: 0; border-radius: var(--radius); appearance: none;
  -webkit-appearance: none; font-size: var(--step-body);
}
.find select { padding-right: 40px; background-image: url("/assets/chevron.svg"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; }
.find input:focus-visible, .find select:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }   /* taste-skill-ignore: the focus ring, not a shadow at rest */
.filters { grid-column: 1 / -1; }
.filters summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 500; list-style: none; gap: 8px; }
.filters summary::-webkit-details-marker { display: none; }
.filters summary::after { content: "+"; font-weight: 400; transition: transform var(--t-ui) var(--ease-out); }
.filters[open] summary::after { transform: rotate(45deg); }
.filters-body { display: grid; gap: 18px; padding: 8px 0 12px; }
.filter legend { font-size: var(--step-small); color: var(--muted); margin-bottom: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; background: var(--surface); font-size: var(--step-small); font-weight: 500;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) ease; }
.chip:hover span { background: var(--surface-2); }
.chip input:checked + span { background: var(--ink); color: var(--paper); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip input:active + span { transform: scale(0.97); }

.shelf-head { margin-top: 40px; }
.shelf { margin-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.shelf-card { display: grid; align-content: start; gap: 4px; padding: 16px 14px 18px; background: var(--surface); text-decoration: none; height: 100%;
  transition: background-color var(--t-hover) ease, transform var(--t-press) ease; }
.shelf-card img { width: min(112px, 100%); height: auto; margin-bottom: 10px; transition: transform 500ms var(--ease-out); }
.shelf-card:hover { background: var(--surface-2); }
.shelf-card:hover img { transform: rotate(-6deg) scale(1.04); }
.shelf-card:active { transform: scale(0.985); }
.shelf-card[aria-current="true"] { background: var(--ink); color: var(--paper); }
.shelf-card[aria-current="true"] .shelf-line { color: #c9c7bf; }
.shelf-name { font-weight: 500; line-height: 1.25; }
.shelf-line { font-size: var(--step-small); color: var(--muted); line-height: 1.4; }
.filtering .shelf-head, .filtering .shelf { display: none; }

.tally { margin-top: 40px; font-size: var(--step-small); color: var(--muted); }
.rows { margin-top: 8px; display: grid; gap: 2px; }
.row { content-visibility: auto; contain-intrinsic-size: auto 84px; }
.face-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "pic name" "pic meta" "pic soon"; column-gap: 16px; align-items: center;
  padding: 10px 12px 10px 10px; text-decoration: none; transition: background-color var(--t-hover) ease, transform var(--t-press) ease; }
.face-row img { grid-area: pic; width: 64px; height: 64px; transition: transform 500ms var(--ease-out); }
.row-name { grid-area: name; align-self: end; font-weight: 500; line-height: 1.25; }
.row-meta { grid-area: meta; align-self: start; font-size: var(--step-small); color: var(--muted); line-height: 1.4; }
.row-soon { grid-area: soon; justify-self: start; margin-top: 4px; font-size: var(--step-small); font-weight: 500; padding: 2px 10px; background: var(--surface); }
.face-row:hover { background: var(--surface); }
.face-row:hover img { transform: rotate(-8deg); }
.face-row:active { transform: scale(0.99); }
.face-row[aria-current="true"] { background: var(--ink); color: var(--paper); }
.face-row[aria-current="true"] .row-meta { color: #c9c7bf; }
.face-row[aria-current="true"] .row-soon { background: var(--plate-2); }
.empty { margin-top: 20px; }
.empty button { margin-left: 6px; border: 0; background: none; padding: 0; text-decoration: underline; cursor: pointer; font-weight: 500; }

@media (max-width: 599px) {
  .find { grid-template-columns: minmax(0, 1fr); }
  .shelf { gap: 6px; }
  .shelf-card { padding: 10px 8px 12px; }
  .shelf-card img { width: 100%; margin-bottom: 6px; }
  .shelf-line { display: none; }
  .shelf-name { font-size: 0.9375rem; }
}

/* ------------------------------------------------------------------------------------------------ sections after the split */

.sec { padding: var(--gap) var(--margin) 0; }
.sec-head { max-width: 1120px; margin: 0 auto; }
.sec-head .lead { margin-top: 16px; }

/* what comes with a face: a small proof beside its words, on the same edge each time */
.with .sec-head, .mods { padding-left: clamp(0px, 12vw, 200px); }
.mods { max-width: 1120px; margin: 64px auto 0; display: grid; gap: clamp(64px, 8vw, 112px); }
.mod { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 400px); gap: 20px 48px; align-items: start; }
.mod-pic { background: var(--surface); height: 520px; overflow: hidden; }
.mod-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%; transition: transform 1.2s var(--ease-out); }
.mod:hover .mod-pic img { transform: scale(1.03); }
.mod-text p { margin-top: 12px; }
.mod-text .mod-who { color: var(--muted); font-size: var(--step-small); }
.mod-who a { color: var(--ink); }
@media (max-width: 699px) {
  .mod { grid-template-columns: minmax(0, 1fr); }
  .mod-pic { height: 400px; }
}

/* the other apps: one printed sheet on the cabin's black crinkle plate */
.apps { position: relative; isolation: isolate; margin-top: var(--gap); padding: clamp(72px, 9vw, 128px) 10px; }
.apps .plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.sheet { position: relative; max-width: 640px; margin: 0 auto; background: var(--paper); padding: 64px clamp(18px, 6vw, 64px); text-align: center; }
.sheet::before, .sheet::after { content: ""; position: absolute; left: 0; right: 0; height: 12px; background: url("/assets/scallop.svg") repeat-x 0 0 / 24px 12px; }
.sheet::before { top: -12px; }
.sheet::after { bottom: -12px; transform: scaleY(-1); }
.sheet .note { margin-top: 10px; }
.sheet-group { margin-top: 48px; }
.sheet-group h3 { font: 400 var(--step-lead)/1.2 var(--display); }
.menu { margin: 20px auto 0; max-width: 440px; text-align: left; display: grid; gap: 18px; }
.menu li { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.item { display: grid; gap: 2px; }
.item-name { font-weight: 500; }
.item-note { font-size: var(--step-small); color: var(--muted); }
.item-act { font-size: var(--step-small); white-space: nowrap; }
.sheet-foot { margin-top: 48px; font-size: var(--step-small); color: var(--muted); }

/* the letter */
.letter { max-width: 540px; margin: 0 auto; }
.letter-from { display: flex; align-items: center; gap: 14px; }
.letter-from img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.letter-from h2 { font-size: var(--step-lead); line-height: 1.2; }
.letter p { margin-top: 1.1em; line-height: 1.6; }
.letter mark { background: #cdd8f4; color: inherit; padding: 0 0.15em; }
.letter-pic { margin: 28px 0 8px; }
.letter-pic video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--plate); }
.letter-pic figcaption { margin-top: 10px; font-size: var(--step-small); color: var(--muted); }
.sign { margin-top: 32px; }
.sign-name { font: 400 var(--step-lead)/1.2 var(--display); }
.sign-role { font-size: var(--step-small); color: var(--muted); }

/* one field */
.ask { max-width: 560px; margin: 0 auto; }
.ask h2 { font: 500 var(--step-lead)/1.3 var(--font); letter-spacing: -0.005em; }
.ask h2 span { display: block; color: var(--muted); }
.ask-form { position: relative; margin-top: 28px; }
.ask-form input { width: 100%; height: 64px; padding: 0 72px 0 20px; background: var(--paper); border: 0; border-radius: var(--radius); font-size: var(--step-body); }
.ask-form input:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }   /* taste-skill-ignore: the focus ring, not a shadow at rest */
.ask-form button { position: absolute; right: 8px; top: 8px; width: 48px; height: 48px; display: grid; place-items: center; border: 0; background: var(--accent); color: var(--accent-ink); cursor: pointer;
  transition: background-color var(--t-hover) ease, transform var(--t-press) ease; }
.ask-form button:hover { background: var(--accent-press); }

.ask-form button img { transition: transform var(--t-hover) ease; }
.ask-form button:hover img { transform: translateX(2px); }
.ask-form button:active { transform: scale(0.95); }
.ask .note { margin-top: 14px; }
.ask-rows { margin-top: 64px; display: grid; gap: 14px; font-size: var(--step-small); }
.ask-rows div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; }
.ask-rows dt { color: var(--muted); }
.ask-rows dd { margin: 0; }
@media (max-width: 599px) { .ask-rows div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* ------------------------------------------------------------------------------------------------ the footer: photograph half, menu half */

.end { margin-top: var(--gap); display: grid; grid-template-columns: minmax(0, 1fr); background: var(--surface); }
.end-photo { position: relative; overflow: hidden; height: 56svh; min-height: 320px; }
.end-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 45%; transform: scale(var(--zoom, 1)); transform-origin: 30% 45%; }
.end-menu { padding: 40px var(--margin) 32px; display: grid; align-content: start; }
.end-menu .mark { margin-bottom: 36px; }
.end-nav { display: grid; gap: 14px; justify-items: start; }
.end-nav a { font: 400 var(--step-head)/1.05 var(--display); letter-spacing: -0.02em; text-decoration: none; transition: transform var(--t-ui) var(--ease-out), color var(--t-ui) ease; }
.end-nav:hover a { color: var(--muted); }
.end-nav a:hover, .end-nav a:focus-visible { color: var(--ink); transform: translateX(12px); }
.end-blocks { margin-top: 56px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; font-size: var(--step-small); }
.end-blocks h2 { font: 500 var(--step-small)/1.4 var(--font); letter-spacing: 0; color: var(--muted); }
.end-blocks p { margin-top: 6px; }
.end-legal { margin-top: 48px; font-size: var(--step-small); color: var(--muted); display: grid; gap: 10px; }
.credits { font-size: var(--step-small); color: var(--muted); max-width: 66ch; }
.credits a { color: var(--muted); }
@media (min-width: 960px) {
  .end { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100svh; }
  .end-photo { height: auto; }
  .end-menu { padding: 80px var(--col-pad) 40px; grid-template-rows: auto auto auto 1fr; }
  .end-legal { align-self: end; padding-top: 56px; }
}

/* ------------------------------------------------------------------------------------------------ a face's own page */

.face-page .intro { padding-top: clamp(24px, 6vh, 72px); }
.crumbs { font-size: var(--step-small); color: var(--muted); }
.crumbs a { color: var(--ink); }
.face-page h1 { margin-top: 14px; }
.face-page .intro .lead { margin-top: 16px; }
.facts-list { margin-top: 24px; display: grid; gap: 6px; }
.facts-list div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; }
.facts-list dt { color: var(--muted); }
.facts-list dd { margin: 0; }
.face-act { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.soon-line { font-weight: 500; }
.included { margin-top: 56px; }
.included h2, .how h2 { font-size: var(--step-lead); line-height: 1.2; }
.included ul { margin-top: 14px; display: grid; gap: 8px; }
.included li { padding-left: 22px; position: relative; }
.included li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; background: var(--accent); }
.included li.next { color: var(--muted); font-size: var(--step-small); padding-left: 0; }
.included li.next::before { display: none; }
.how { margin-top: 48px; }
.how ol { margin-top: 14px; display: grid; gap: 10px; list-style: decimal; padding-left: 1.3em; }
.how .note { margin-top: 16px; font-size: var(--step-body); color: var(--ink); }
.extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; max-width: 1120px; margin: 48px auto 0; }
.extra img { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; background: var(--surface); }
.extra figcaption { margin-top: 10px; font-weight: 500; }
.shots-wrap { max-width: 1120px; margin: 0 auto; }
.shots { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.shots img { width: 100%; height: auto; background: var(--surface); }
.world { max-width: 1120px; margin: 48px auto 0; }
.world img, .world video { width: 100%; height: auto; max-height: 76svh; object-fit: cover; background: var(--plate); }
.world figcaption { margin-top: 12px; max-width: 60ch; }

/* ------------------------------------------------------------------------------------------------ motion */

/* the first screen's words arrive on load, without waiting for a scroll: done in under a second */
.intro > * { animation: arrive 700ms var(--ease-out) both; }
.intro > :nth-child(2) { animation-delay: 90ms; }
.intro > :nth-child(3) { animation-delay: 180ms; }
.intro > :nth-child(n+4) { animation-delay: 260ms; }
@keyframes arrive { from { opacity: 0.4; transform: translateY(18px); } }
.intro > h1 { animation-name: arrive-title; }      /* the title moves but is never faint */
@keyframes arrive-title { from { transform: translateY(14px); } }
.js [data-reveal] > *, .js .solo[data-reveal] { opacity: 0.4; transform: translateY(24px); transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out); }
.js [data-reveal] > :nth-child(2) { transition-delay: 80ms; }
.js [data-reveal] > :nth-child(3) { transition-delay: 160ms; }
.js [data-reveal] > :nth-child(4) { transition-delay: 240ms; }
.js [data-reveal] > :nth-child(n+5) { transition-delay: 300ms; }
.js [data-reveal].is-in > *, .js .solo[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-delay: 0ms !important; }
  .js [data-reveal] > *, .js .solo[data-reveal] { opacity: 1; transform: none; }
  .end-photo img { transform: none; }
}