/* ============================================================
   LOOK V4: the dark showroom (docs/LOOK_V4.md, 2026-11-11)
   One machine huge and alive in 3D on a warm-lit plinth, a dark idea box,
   and ONE orange that only means "press this". Loaded last on the home page,
   so it wins ties with the page's own CSS. Colour tokens live in site.css.
   Motion (rule 2s): Entrances: ease out. Exits: ease in. Interface: spring,
   slight overshoot. Nothing linear. Transform and opacity only (rule 2j).

   DECISIONS (rule 2x), one line each:
   VON RESTORFF: the idea box is a dark raised pill with no glow, because a
     bright box competed with Build it, the one orange thing to press.
   HICK'S LAW: each screen is one idea with about half the elements it had,
     because every extra item is a choice the visitor has to skip.
   FIGURE-GROUND: renders are cropped so the machine fills about 70% of its
     card, because the subject is the machine, not the empty floor.
   COLOR CONSTANCY: one grade on every photo and the blue taken out in the
     file, because grey photos read as colourless and blue is a second accent.
   CLOSURE (8e): the examples rail shows the next card peeking, because a
     cut-off card says there is more without a label.
   SPATIAL CONSISTENCY: the "Ten machines" heading waits until the exploding
     machine has gone, because two half-visible things read as a bug.
   JAKOB'S LAW: a standard four-column footer and the logo links home,
     because people expect sites to work like the other sites they use.
   ============================================================ */
:root {
  --dx-out: cubic-bezier(0.16, 1, 0.3, 1);      /* entrances: arrive fast, land soft */
  --dx-in: cubic-bezier(0.55, 0, 0.75, 0.2);     /* exits: start slow, then leave */
  --dx-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* interface: a little overshoot */
  --dx-card: #12100e;
  --dx-line: rgba(255, 236, 220, 0.08);
  --dx-r: 28px;
  /* the one photo treatment (brand 90%, part 04): colour kept, warmed a breath */
  --dx-photo: saturate(0.88) sepia(0.1) contrast(1.04) brightness(0.95);
  --bar-h: 64px;
}
@media (max-aspect-ratio: 0.9999/1) { :root { --bar-h: 56px; } }
html { color-scheme: dark; }
body { background: var(--bg-0); overflow-x: clip; }

/* ---------- THE NAV: quieter glass, the hammer at the left ---------- */
/* a backing behind the floating pill: page text that scrolls up under it fades
   into the base colour, so nothing is readable behind the nav at any scroll */
.nav-wrap::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: calc(-1 * var(--sp-4)); height: calc(100% + var(--sp-4) + 44px);
  background: linear-gradient(180deg, var(--bg-0) 0%, var(--bg-0) 66%, rgba(12, 11, 10, 0.7) 82%, rgba(12, 11, 10, 0) 100%); pointer-events: none;
}
/* the home hero's headline starts right under the pill: a shorter backing there */
body:has(.stage) .nav-wrap::before { height: calc(100% + var(--sp-4) + 6px); background: linear-gradient(180deg, var(--bg-0) 0%, var(--bg-0) 80%, rgba(12, 11, 10, 0) 100%); }
.nav-pill { background: rgba(16, 14, 12, 0.9); border-color: var(--dx-line); box-shadow: inset 0 1px 0 rgba(255, 240, 225, 0.05), 0 10px 30px rgba(0, 0, 0, 0.35); }
@media (prefers-reduced-transparency: reduce) { .nav-pill { background: var(--bg-1); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.nav-logo .logo-mark { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6)); transform: none; transition: transform 260ms var(--dx-out); transform-origin: 30% 80%; }
.nav-logo .logo-up { color: var(--ink-mute); }
/* G3: no gear in the nav. Signed in, the BuildBux balance is the account button;
   signed out, the footer has Settings (js/settings.js wireV4) */
.nav-pill .gu-gear { display: none; }
@media (hover: hover) and (pointer: fine) {
  .nav-logo:hover .logo-mark { transform: rotate(-14deg); transition: transform 420ms var(--dx-spring); }
}

/* ---------- THE STAGE: a dark showroom with a warm pool of light ---------- */
/* fix 2026-11-12 ("the first screen reads as one brown"): figure-ground, like a product page. The
 * ground is near-black and the colour belongs to the machine, so the warm pool is a smaller, lower
 * under-light (.26 -> .15) instead of a brown haze across the whole stage and behind the headline. */
.stage-bg {
  background:
    radial-gradient(34% 34% at 50% 64%, rgba(var(--ember-rgb), 0.15), transparent 70%),
    radial-gradient(56% 22% at 50% 86%, rgba(var(--ember-rgb), 0.1), transparent 72%),
    radial-gradient(120% 70% at 50% 122%, #130d09 0%, transparent 60%),
    radial-gradient(60% 40% at 50% -10%, rgba(255, 236, 220, 0.04), transparent 70%),
    var(--bg-0);
}
.stage::after { background: linear-gradient(180deg, rgba(12, 11, 10, 0), var(--bg-0)); }
/* the back plane: the headline, white; a neutral shade under it only (the ember halo read as brown fog) */
.hero-back .title { color: var(--ink); text-shadow: 0 2px 28px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(0, 0, 0, 0.4); }
/* the neighbours step back (G5): dimmer than the machine in the middle */
.stage { --hc-dim: 0.42; }

/* THE MACHINE'S WORDS: its name, its price and one way in, an arrow either side */
.stage { --hc-sub-h: 0px; --hc-info-h: 58px; --hc-ctrl-h: 0px; --hc-gap: 14px; --hc-tuck: 0px; --hc-w: min(560px, 100cqw - 160px); --hc-s: 0.8; }
@media (min-aspect-ratio: 1/1) and (max-height: 859.98px) { .stage { --hc-s: 0.76; } }
@media (min-aspect-ratio: 1/1) and (max-height: 699.98px) { .stage { --hc-s: 0.7; } }
@media (max-aspect-ratio: 0.9999/1) { .stage { --hc-s: 0.88; --hc-w: min(560px, 100cqw - 140px); } }
@media (max-aspect-ratio: 0.9999/1) and (max-width: 640px) {
  .stage { --hc-s: 0.9; --hc-info-h: 56px; --hc-ctrl-h: 0px; --hc-gap: 12px; --hc-w: calc(100cqw - 32px); }
}
.hc-info { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; height: var(--hc-info-h); }
.hc-head { display: block; margin: 0; }
.hc-title { justify-content: center; }
.hc-name { font-size: 1.5rem; line-height: 1.1; letter-spacing: -0.02em; text-shadow: 0 1px 18px rgba(12, 11, 10, 0.95); }
.hc-open {
  position: static; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px; margin: 0;
  font: 400 0.9375rem/1.2 var(--font-ui); color: var(--ink-dim); text-decoration: none; background: none; border: 0;
  grid-column: auto; grid-row: auto; justify-self: auto;
}
.hc-open::before { content: none; }
.hc-open::after { width: 11px; height: 11px; background: var(--signal); transform: none; transition: transform 300ms var(--dx-spring); }
@media (hover: hover) and (pointer: fine) {
  .hc-open:hover { color: var(--ink); }
  .hc-open:hover::after { transform: translateX(3px); }
}
.hc-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0; }
.hc-row .hc-cost { font: 600 0.9375rem/1.2 var(--font-ui); color: var(--ink-mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hc-scale, .hint, .skip-story { display: none !important; }
.hc-ctrl { height: calc(var(--hc-info-h) + var(--hc-gap)); }
.hc-arrow {
  top: auto; bottom: calc(var(--hc-gap) + (var(--hc-info-h) - 48px) / 2); width: 48px; height: 48px; min-height: 48px; padding: 0; gap: 0;
  justify-content: center; border-radius: 50%; background: rgba(22, 19, 17, 0.82); border: 1px solid var(--dx-line);
  box-shadow: inset 0 1px 0 rgba(255, 240, 225, 0.06);
  transition: transform 260ms var(--dx-spring), background-color 200ms var(--dx-out), opacity 220ms var(--dx-out);
}
.hc-arrow .hc-wl, .hc-arrow .hc-nl, .hc-arrow > span { display: none !important; }
.hc-arrow svg { width: 18px; height: 18px; }
.hc-prev { left: calc(50% - var(--hc-w) / 2 - 64px); }
.hc-next { right: calc(50% - var(--hc-w) / 2 - 64px); }
.hc-arrow:active { transform: scale(0.94); transition-duration: 90ms; }
/* G3: on the first machine there is no "previous", so the arrow leaves the screen (Hick's law: a
   dead control is still a thing to skip). It stays focusable, so a keyboard user who pressed it
   back to the first machine keeps their place; focus shows it dimmed. */
.hc-arrow[aria-disabled="true"] { opacity: 0; pointer-events: none; transition: opacity 160ms var(--dx-in); }
.hc-arrow[aria-disabled="true"]:focus-visible { opacity: 0.35; }
@media (max-aspect-ratio: 0.9999/1) and (max-width: 640px) {
  .hc-prev { left: 16px; }
  .hc-next { right: 16px; }
  .hc-info { padding-inline: 56px; }
  .hc-name { font-size: 1.25rem; }
}

/* the parts, named (the scroll story's labels): plain words, warm light */
.tag { font: 600 0.8125rem/1 var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--ink); background: rgba(16, 14, 12, 0.92); border-color: var(--dx-line); border-radius: 999px; padding: 7px 12px; }
.tag::before { content: none; }
.tag-dot { background: #fff4ea; box-shadow: 0 0 0 3px rgba(var(--ember-rgb), 0.35); }   /* a ring, no blurred halo (impeccable dark-glow) */
.tag-line { background: linear-gradient(90deg, rgba(255, 236, 220, 0.9), rgba(255, 236, 220, 0.5)); }
.chapter { text-shadow: 0 2px 28px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(0, 0, 0, 0.4); }   /* the same neutral shade as the headline: a coloured halo on dark is a glow (impeccable dark-glow) */
.chapter::before { background: radial-gradient(closest-side, rgba(12, 11, 10, 0.82) 45%, rgba(12, 11, 10, 0) 100%); }

/* ---------- THE IDEA BOX (G1, LOOK_V4 section 7) ----------
   A raised near-black pill: hairline, a 1 px lit top edge and a soft drop.
   No glow, so Build it is the one bright, saturated thing on the screen.
   Dots on the left (Neil, ask 3), the words, then Build it. */
.idea-bar {
  padding: 6px 6px 6px 8px; gap: 10px;
  background: var(--surface-2); border: 1px solid var(--hairline-strong);
  box-shadow: inset 0 1px 0 rgba(255, 236, 220, 0.08), 0 18px 50px rgba(0, 0, 0, 0.45);
  transition: border-color 200ms var(--dx-out), box-shadow 200ms var(--dx-out);
}
.idea-bar:focus-within {
  border-color: var(--signal-hot); outline: 0;
  box-shadow: inset 0 0 0 0.5px var(--signal-hot), inset 0 1px 0 rgba(255, 236, 220, 0.08), 0 18px 50px rgba(0, 0, 0, 0.45);
}
.idea-bar input { color: var(--ink); caret-color: var(--signal-hot); font-size: 1.0625rem; }
.idea-bar input::placeholder { color: var(--ink-mute); }
.idea-bar .gm-in-bar { order: 0; }
.idea-bar .gm-dots { width: 50px; height: 50px; border-radius: 50%; }
.ty { left: 70px; color: var(--ink-mute); }
.ty-k { color: inherit; background: none; padding: 0; margin: 0; border-radius: 0; }
.ty-f { color: var(--ink); }
.ty-d { color: var(--ink-dim); }
.build-btn { padding: 0 26px; letter-spacing: 0.01em; transition: transform 260ms var(--dx-spring), color 200ms var(--dx-out); }
.build-btn:active { transform: scale(0.97); transition-duration: 90ms; }
.build-btn:focus-visible { outline: 2px solid var(--signal-hot); outline-offset: 3px; }
/* the one line under the box: 13 px, faint (section 7) */
.idea-note { font: 400 0.8125rem/1.25 var(--font-ui); letter-spacing: 0.01em; color: var(--ink-faint); text-shadow: 0 1px 10px rgba(12, 11, 10, 0.95); }
@media (max-width: 640px) {
  .idea-bar { padding-left: 5px; gap: 6px; }
  .idea-bar .gm-dots { width: 44px; height: 44px; }
  .ty { left: 54px; }
  .build-btn { padding: 0 18px; }
}
/* G10: at 560 px and below the typing drone never flies; the placeholder is plain words */
@media (max-width: 560px) { .ty { display: none; } .idea-bar.ph-fly input::placeholder { color: var(--ink-mute); } }

/* the menu over the box: three choices, Chat third and quieter (ask 4) */
.gm-menu { background: var(--surface-3); border: 1px solid var(--dx-line); border-radius: 20px; padding: 8px; box-shadow: inset 0 1px 0 rgba(255, 240, 225, 0.06), 0 24px 60px rgba(0, 0, 0, 0.6); }
.gm-up-menu { left: 0; right: auto; width: min(360px, 100%); transform-origin: 26px 100%; transform: translateY(8px) scale(0.96); }
.gm-menu.in { transition: opacity 260ms var(--dx-out), transform 260ms var(--dx-out); }
.gm-menu-h { display: none; }
.gm-item { border-radius: 14px; padding: 12px 14px; gap: 4px; }
.gm-item-name { font-size: 1rem; color: var(--ink); }
.gm-item-cost { font: 600 0.8125rem/1 var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.gm-item-line { font-size: 0.875rem; color: var(--ink-dim); }
.gm-item-chat { padding-block: 10px; }
.gm-item-chat .gm-item-name { color: var(--ink-dim); }
.gm-item-chat .gm-item-line { font-size: 0.8125rem; color: var(--ink-mute); }
.gm-item-build { background: rgba(255, 240, 225, 0.04); }
/* the footer line lives in the dots button's accessible name (G3) */
.gm-menu-f { display: none; }
@media (max-width: 640px) { .gm-up-menu { width: 100%; } }

/* ---------- SCREEN 2: THE EXAMPLES, AS PICTURES ---------- */
.next { max-width: 1312px; padding-inline: 32px; }
/* section headlines are the display size, 32 to 64 px (bimodal scale, 2d):
   only the hero headline is huge */
.dx-h {
  margin: 0; max-width: 22ch; font: 600 clamp(2rem, 4.4vw, 4rem)/1.02 var(--font-display); letter-spacing: -0.022em; color: var(--ink); text-wrap: balance;
}
.dx-h2 { color: var(--ink-dim); }
.dx-ex { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.dx-card { min-width: 0; }
.dx-a { grid-column: span 8; }
.dx-b { grid-column: span 4; }
.dx-card .ex {
  position: relative; display: block; overflow: hidden; isolation: isolate; text-decoration: none; color: var(--ink);
  height: clamp(380px, 40vw, 600px); border-radius: var(--dx-r);
  background:
    radial-gradient(56% 50% at 50% 62%, rgba(var(--ember-rgb), 0.14), transparent 72%),
    radial-gradient(90% 60% at 50% 120%, #150f0b, transparent 70%),
    var(--dx-card);
  box-shadow: inset 0 0 0 1px var(--dx-line), inset 0 1px 0 rgba(255, 240, 225, 0.05);
  transition: transform 420ms var(--dx-spring), box-shadow 300ms var(--dx-out);
}
.dx-card .ex-media { position: absolute; inset: 0; margin: 0; min-height: 0; }
/* G6: the render is cropped so the machine fills about 70% of the card's width
   (the stills carry empty floor around the machine; the frame is oversized and
   the card clips it) */
.dx-card .ex-media .frame { position: absolute; inset: -16% -22% 4% -22%; }
.dx-card .ex-media img { object-fit: contain; transition: transform 600ms var(--dx-out), opacity 320ms var(--dx-out); }
.dx-cap {
  position: absolute; left: 24px; right: 24px; bottom: 20px; margin: 0;
  font: 600 1.25rem/1.2 var(--font-display); letter-spacing: -0.015em; color: var(--ink); font-variant-numeric: tabular-nums;
}
@media (hover: hover) and (pointer: fine) {
  .dx-card .ex:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(255, 236, 220, 0.16), 0 24px 60px rgba(0, 0, 0, 0.45); }
  .dx-card .ex:hover .ex-media img { transform: scale(1.035); }
}
.dx-card .ex:active { transform: scale(0.985); transition-duration: 100ms; }
.dx-card .ex:focus-visible { outline: 2px solid var(--signal-hot); outline-offset: 3px; }
.dx-photo figure { position: relative; margin: 0; height: clamp(380px, 40vw, 600px); border-radius: var(--dx-r); overflow: hidden; background: #1a1714; }
.dx-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 46% 60%; }
.dx-photo img, .dx-parts-ph img, .dx-band-ph img { filter: var(--dx-photo); }
.dx-photo figcaption, .dx-band-ph figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 14px; margin: 0;
  font: 400 0.8125rem/1.35 var(--font-ui); letter-spacing: 0.01em; color: var(--ink-dim); background: linear-gradient(180deg, transparent, rgba(8, 7, 6, 0.8));
}

/* the other nine: a rail, two to a view, the third peeking (closure, 8e) */
.dx-rail-wrap { margin-top: 48px; }
.dx-rail {
  list-style: none; margin: 0 -32px; padding: 0 32px 6px; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 64px - 32px) / 2.3);
  gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scroll-padding-inline: 32px; scrollbar-width: none;
}
.dx-rail::-webkit-scrollbar { display: none; }
.dx-rail:focus-visible { outline: 2px solid var(--signal-hot); outline-offset: 4px; border-radius: var(--dx-r); }
.dx-r { scroll-snap-align: start; }
.dx-r .ex { height: clamp(300px, 30vw, 440px); }
.dx-endlink {
  display: flex; align-items: center; justify-content: center; height: clamp(300px, 30vw, 440px); border-radius: var(--dx-r); text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(255, 236, 220, 0.16); color: var(--ink); font: 600 1.25rem/1.2 var(--font-display);
  transition: transform 420ms var(--dx-spring), box-shadow 300ms var(--dx-out);
}
.dx-endlink span { display: inline-flex; align-items: center; gap: 10px; }
.dx-endlink span::after {
  content: ""; width: 14px; height: 14px; background: var(--signal);
  -webkit-mask: var(--gu-arrow) center / contain no-repeat; mask: var(--gu-arrow) center / contain no-repeat;
  transform: rotate(-45deg); transition: transform 350ms var(--dx-spring);
}
@media (hover: hover) and (pointer: fine) { .dx-endlink:hover { box-shadow: inset 0 0 0 1px rgba(255, 236, 220, 0.34); } .dx-endlink:hover span::after { transform: none; } }
.dx-endlink:active { transform: scale(0.985); transition-duration: 100ms; }
.dx-endlink:focus-visible { outline: 2px solid var(--signal-hot); outline-offset: 3px; }

/* a quiet way on (ghost, never orange): the arrow is the only orange on it */
.dx-more {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 32px; padding: 0 22px; border-radius: 999px;
  font: 600 0.9375rem/1 var(--font-ui); color: var(--ink); text-decoration: none;
  background: transparent; border: 1px solid var(--hairline-strong);
  transition: transform 260ms var(--dx-spring), border-color 200ms var(--dx-out);
}
.dx-more::after {
  content: ""; width: 12px; height: 12px; background: var(--signal);
  -webkit-mask: var(--gu-arrow) center / contain no-repeat; mask: var(--gu-arrow) center / contain no-repeat;
  transform: rotate(-45deg); transition: transform 350ms var(--dx-spring);
}
@media (hover: hover) and (pointer: fine) {
  .dx-more:hover { border-color: var(--ink-mute); }
  .dx-more:hover::after { transform: none; }
}
.dx-more:active { transform: scale(0.97); transition-duration: 90ms; }
.dx-more:focus-visible { outline: 2px solid var(--signal-hot); outline-offset: 3px; }

/* G7: the heading waits until the exploding machine has left (js/home-plinth.js
   sets .story-done on #next at story progress 0.85), then arrives with an ease-out */
@media (prefers-reduced-motion: no-preference) {
  .js #next:not(.story-done) .dx-market .dx-h { opacity: 0; transform: translate3d(0, 24px, 0); }
  .js #next.story-done .dx-market .dx-h { opacity: 1; transform: none; transition: opacity 600ms var(--dx-out), transform 600ms var(--dx-out); }
  /* each card arrives once (js/home-plinth.js adds .in to #next .nx); the gaps are
     uneven on purpose (seeded, not a uniform stagger) */
  .js #next .dx-ex .dx-card, .js #next .dx-rail .dx-card { opacity: 0; transform: translate3d(0, 24px, 0); }
  .js #next .nx.in .dx-ex .dx-card, .js #next .nx.in .dx-rail .dx-card { opacity: 1; transform: none; transition: opacity 600ms var(--dx-out), transform 600ms var(--dx-out); }
  .js #next .nx.in .dx-ex .dx-card:nth-child(2) { transition-delay: 70ms; }
  .js #next .nx.in .dx-rail .dx-card:nth-child(1) { transition-delay: 130ms; }
  .js #next .nx.in .dx-rail .dx-card:nth-child(2) { transition-delay: 180ms; }
  .js #next .nx.in .dx-rail .dx-card:nth-child(3) { transition-delay: 250ms; }
  .js #next .nx.in .dx-rail .dx-card:nth-child(n+4) { transition-delay: 290ms; }
}

/* ---------- SCREEN 3: THE PARTS, CARRIED BY A REAL PHOTOGRAPH ---------- */
.dx-parts {
  position: relative; isolation: isolate; overflow: hidden; margin: 128px 0 0; min-height: min(100svh, 860px);
  display: flex; align-items: center;
}
.dx-parts-ph { position: absolute; z-index: -1; top: 0; bottom: 0; right: 0; width: 52%; margin: 0; overflow: hidden; }
.dx-parts-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 60%; }
.dx-parts-ph::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--bg-0) 0%, var(--bg-0) 4%, rgba(12, 11, 10, 0.55) 30%, rgba(12, 11, 10, 0) 64%), linear-gradient(0deg, var(--bg-0), transparent 20%), linear-gradient(180deg, var(--bg-0), transparent 16%); }
.dx-parts-in { box-sizing: border-box; width: 100%; max-width: 1312px; margin: 0 auto; padding: 64px 32px; }
.dx-pt { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 20px; }
.dx-pt a {
  display: grid; justify-items: start; gap: 12px; text-decoration: none; color: var(--ink-dim); font: 400 1rem/1.3 var(--font-ui);
  transition: transform 360ms var(--dx-spring), color 200ms var(--dx-out);
}
.dx-pt img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 22px;
  background: radial-gradient(60% 55% at 50% 64%, rgba(var(--ember-rgb), 0.2), transparent 74%), var(--surface);
  box-shadow: inset 0 0 0 1px var(--dx-line);
  /* fix 2026-11-12: the render's empty margin is cropped, so the part fills the card
     (figure-ground: the subject is the picture). Every part's box stays inside it. */
  object-view-box: inset(10% 9%);
}
@media (hover: hover) and (pointer: fine) { .dx-pt a:hover { transform: translateY(-4px); color: var(--ink); } }
.dx-pt a:active { transform: scale(0.98); transition-duration: 90ms; }
.dx-pt a:focus-visible { outline: 2px solid var(--signal-hot); outline-offset: 4px; border-radius: 22px; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .dx-pt li { animation: dx-rise var(--dx-out) both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .dx-pt li:nth-child(2) { animation-range: entry 7% entry 77%; }
    .dx-pt li:nth-child(3) { animation-range: entry 11% entry 81%; }
    .dx-parts-ph img { animation: dx-drift var(--dx-out) both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}
@keyframes dx-rise { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: none; } }
@keyframes dx-drift { from { transform: scale(1.1) translate3d(0, -3%, 0); } to { transform: scale(1.02) translate3d(0, 3%, 0); } }

/* ---------- ONE IDEA: the soldering band (2k pull-back, scroll-driven) ---------- */
.dx-band {
  position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box; width: min(1100px, calc(100% - 64px)); margin: 128px auto 0;
  aspect-ratio: 900 / 470; border-radius: var(--dx-r); display: flex; align-items: flex-end;
}
.dx-band-ph { position: absolute; inset: 0; z-index: -1; margin: 0; }
.dx-band-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
/* the lower third goes dark so the one line reads (figure-ground) */
.dx-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 11, 10, 0) 38%, rgba(12, 11, 10, 0.72) 70%, rgba(12, 11, 10, 0.9)); pointer-events: none; }
.dx-band-ph figcaption { left: auto; top: 0; bottom: auto; padding: 14px 18px; background: none; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9); }
.dx-band-t {
  margin: 0; padding: 0 clamp(20px, 4vw, 48px) clamp(20px, 4vw, 44px); max-width: 20ch;
  font: 600 clamp(1.75rem, 3.6vw, 3.25rem)/1.04 var(--font-display); letter-spacing: -0.022em; color: var(--ink); text-wrap: balance;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .dx-band { animation: dx-pull var(--dx-out) both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    .dx-band-ph img { animation: dx-pull-img var(--dx-out) both; animation-timeline: view(); animation-range: entry 0% cover 55%; }
    .dx-band-t { animation: dx-rise var(--dx-out) both; animation-timeline: view(); animation-range: entry 30% cover 40%; }
  }
}
@keyframes dx-pull { from { transform: scale(0.94); opacity: 0.4; } to { transform: none; opacity: 1; } }
@keyframes dx-pull-img { from { transform: scale(1.16); } to { transform: scale(1.02); } }

/* the FAQ: quieter, under the one idea */
.faq { margin-top: 128px; }
.faq summary { font-weight: 600; }

/* ---------- THE FOOTER: four columns, the people who made it, the legal line ---------- */
.dx-foot { margin-top: 128px; background: var(--bg-1); border-top: 1px solid var(--hairline); }
.dx-foot::before { content: none; }
.dx-foot .footer-inner { padding-block: 64px 40px; }
.dx-foot .footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; width: 100%; }
.dx-foot .footer-col h3 { font: 600 0.8125rem/1.2 var(--font-ui); letter-spacing: 0.01em; text-transform: none; color: var(--ink-mute); margin-bottom: 4px; }
.dx-foot .footer-col a, .dx-foot .ft-link {
  color: var(--ink-dim); font: 400 0.9375rem/1.4 var(--font-ui); text-decoration: none; width: fit-content; overflow-wrap: anywhere;
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
}
@media (hover: hover) and (pointer: fine) {
  .dx-foot .footer-col a:hover, .dx-foot .ft-link:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--signal-hot); text-underline-offset: 4px; }
}
.dx-foot .footer-col a:focus-visible, .dx-foot .ft-link:focus-visible { outline: 2px solid var(--signal-hot); outline-offset: 3px; border-radius: 4px; }
.dx-foot .footer-base { display: grid; grid-template-columns: auto 1fr; gap: 10px 32px; align-items: start; padding-block: 28px 40px; border-top: 1px solid var(--hairline-soft); }
.dx-foot .ft-brand { grid-row: span 2; display: grid; gap: 8px; }
.dx-foot .ft-brand .nav-logo .logo-mark { width: 20px; height: 20px; }
.dx-foot .footer-tag { margin: 0; font-size: 0.8125rem; color: var(--ink-mute); }
.dx-foot .footer-base p { margin: 0; }
.dx-foot .ft-human { color: var(--ink-mute); font-size: 0.8125rem; }
.dx-foot .ft-legal { color: var(--ink-faint); font-size: 0.8125rem; letter-spacing: 0.01em; }
.dx-foot .footer-base a { color: var(--ink-mute); text-decoration: underline; text-decoration-color: rgba(246, 244, 241, 0.4); text-decoration-style: solid; }
/* the lockup is a logo, not a sentence link: no underline (Jakob: logos are not underlined) */
.dx-foot .footer-base a.nav-logo { color: var(--ink); text-decoration: none; }
@media (max-width: 760px) {
  .dx-foot .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .dx-foot .footer-base { grid-template-columns: 1fr; }
  .dx-foot .ft-brand { grid-row: auto; }
  .dx-foot .footer-col a, .dx-foot .ft-link { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---------- PHONE: its own composition ---------- */
@media (max-width: 760px) {
  .next { padding-inline: 16px; }
  .dx-h { font-size: clamp(2rem, 9.6vw, 2.75rem); }
  .dx-h2 { display: none; }
  /* the F450 and its real photo share one rail: the photo peeks (closure) */
  .dx-ex {
    display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 84%; gap: 12px; margin-top: 28px;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: -16px; padding: 0 16px 4px; scroll-padding-inline: 16px;
  }
  .dx-ex::-webkit-scrollbar { display: none; }
  .dx-card { scroll-snap-align: start; grid-column: auto !important; }
  .dx-card .ex, .dx-photo figure { height: min(116vw, 460px); }
  .dx-card .ex-media { aspect-ratio: auto; margin: 0; }
  .dx-card .ex-media .frame { inset: 0 -46% 20% -46%; }
  .dx-cap { left: 18px; right: 18px; bottom: 16px; font-size: 1.125rem; }
  /* the peeking photo's caption shows only once its card is in view */
  .js .dx-photo figcaption { opacity: 0; transition: opacity 200ms var(--dx-in); }
  .js .dx-photo.is-in figcaption { opacity: 1; transition: opacity 400ms var(--dx-out); }
  .dx-rail-wrap { margin-top: 40px; }
  .dx-rail { margin: 0 -16px; padding: 0 16px 4px; grid-auto-columns: 72%; gap: 12px; scroll-padding-inline: 16px; }
  .dx-r .ex, .dx-endlink { height: min(92vw, 360px); }
  .dx-parts { display: block; min-height: 0; margin-top: 80px; }
  .dx-parts-ph { position: relative; width: auto; height: 300px; margin: 0 0 -48px; }
  .dx-parts-ph::before { background: linear-gradient(0deg, var(--bg-0) 4%, transparent 60%); }
  .dx-parts-in { padding: 0 16px 24px; }
  .dx-pt { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; margin-top: 28px; }
  /* fix 2026-11-12 (LOOK_V4 16, parts 375): one row of two on a phone. The third card sat alone in a
     second row; "See all 37" carries the rest (Hick's law: fewer things to skip on a small screen) */
  .dx-pt li:nth-child(n+3) { display: none; }
  .dx-band { width: calc(100% - 32px); margin-top: 80px; aspect-ratio: 4 / 5; }
  .dx-band-ph img { object-position: 38% 50%; }
  .faq, .dx-foot { margin-top: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .dx-card .ex, .dx-more, .dx-endlink, .dx-pt a, .hc-arrow, .build-btn, .gm-menu { transition: none !important; }
}

/* ============================================================
   THE BUILD PAGE (/invent?example=...): the model big, the name, the price,
   and the rest behind six tabs (progressive disclosure)
   ============================================================ */
#state-result .section { padding-top: 112px; }
.result-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(28px, 3.4vw, 56px); }
#state-result #viewerWrap {
  padding: 0; background: none; border: 0; box-shadow: none;
}
#state-result #viewer3d {
  aspect-ratio: auto; height: min(72svh, 720px); border-radius: var(--dx-r);
  background:
    radial-gradient(52% 48% at 50% 60%, rgba(var(--ember-rgb), 0.15), transparent 72%),
    radial-gradient(90% 60% at 50% 118%, #150f0b, transparent 70%),
    var(--dx-card);
  box-shadow: inset 0 0 0 1px var(--dx-line);
}
.explode-ctl { margin: 14px 4px 0; gap: 14px; }
.explode-label { font: 400 0.8125rem/1 var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--ink-mute); }
.parts-legend, .viewer-hint { display: none !important; }
.viewer-cap { font-size: 0.75rem; color: var(--ink-faint); margin-top: 10px; }
.give-line { font-size: 0.8125rem; color: var(--ink-mute); }
.primary-actions { margin-top: 16px; }

/* the head: a quiet way back, the name huge, the price, one line */
.result-head .ex-eyebrow, .result-head .ex-question, .result-head .price-note, .result-head .crumbs li[aria-current] { display: none; }
.result-head .crumbs ol li:first-child::after { content: none; }
.result-head .crumbs a { color: var(--ink-mute); text-decoration: none; font-size: 0.9375rem; }
.result-head .crumbs a::before { content: "\2190\00a0"; }
.result-head .crumbs a:hover { color: var(--ink); }
.result-name { font-size: clamp(2.75rem, 4.6vw, 4.75rem); line-height: 0.98; letter-spacing: -0.04em; margin: 10px 0 14px; }
.price-line { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.price-k { font: 400 0.9375rem/1 var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--ink-mute); }
.price-v { font: 600 1.5rem/1 var(--font-ui); color: var(--ink); font-variant-numeric: tabular-nums; }
.result-tagline { margin-top: 14px; color: var(--ink-dim); font-size: 1.0625rem; max-width: 38ch; }

/* the tabs: words, a hairline, one sliding underline (the only moving part) */
.dt-tabs {
  position: relative; display: flex; gap: 4px; margin-top: 8px; border-bottom: 1px solid var(--dx-line);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
.dt-tabs::-webkit-scrollbar { display: none; }
.dt-tab {
  flex: none; min-height: 44px; padding: 0 12px; border: 0; background: none; cursor: pointer;
  font: 600 0.9375rem/1 var(--font-ui); color: var(--ink-mute); border-radius: 12px 12px 0 0;
  transition: color 180ms var(--dx-out);
}
.dt-tab[aria-selected="true"] { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .dt-tab:hover { color: var(--ink); } }
.dt-tab:focus-visible { outline: 2px solid var(--signal-hot); outline-offset: -2px; }
.dt-ink {
  position: absolute; left: 0; bottom: -1px; width: 1px; height: 2px; background: var(--signal); transform-origin: 0 50%;
  transition: transform 420ms var(--dx-spring); pointer-events: none;
}
.dt-panels { min-width: 0; }
.dt-panel { display: flex; flex-direction: column; gap: 20px; padding-top: 22px; }
.dt-panel[hidden] { display: none; }
.dt-panel:focus-visible { outline: 2px solid var(--signal-hot); outline-offset: 4px; border-radius: 12px; }
.dt-panel .reveal { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: no-preference) {
  .dt-panel:not([hidden]) { animation: dt-in 360ms var(--dx-out) both; }
}
@keyframes dt-in { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }
/* cards inside a panel lose their box: the tab already groups them */
#state-result .dt-panel > .card { background: none; border: 0; box-shadow: none; padding: 0; }
#state-result .dt-panel .eyebrow { font: 600 0.8125rem/1.2 var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--ink-mute); }
#state-result .dt-panel .eyebrow::before { content: none; }
/* the overview numbers: big value, small word, no boxes */
.dt-panel .stat-row { gap: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--dx-line); }
.dt-panel .stat-chip { background: none; border: 0; box-shadow: none; padding: 16px 0; border-bottom: 1px solid var(--dx-line); border-radius: 0; }
.dt-panel .stat-label { font: 400 0.8125rem/1 var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--ink-mute); }
.dt-panel .stat-value { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.dt-panel .stat-chip.chip-yellow .stat-value, .dt-panel .stat-chip.chip-green .stat-value { color: var(--ink); }
.result-summary { color: var(--ink-dim); line-height: 1.6; }
@media (max-width: 960px) {
  #state-result .section { padding-top: 124px; }   /* clear of the nav's fade, so the way back never looks greyed out */
  #state-result #viewer3d { height: 50svh; }
  .result-right > .dt-tabs { order: 0; align-self: stretch; min-width: 0; max-width: 100vw; margin-inline: -16px; padding-inline: 16px; }
  .result-right > .dt-panels { order: 1; align-self: stretch; min-width: 0; }
}
/* panel internals: mono capitals become plain small words, boxes become rows */
#state-result .dt-panel :is(th, .ex-group td, .meas-k) { font: 600 0.8125rem/1.2 var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--ink-mute); }
#state-result .dt-panel .meas-grid { gap: 0; border-top: 1px solid var(--dx-line); }
#state-result .dt-panel .meas-grid > * { background: none; border: 0; box-shadow: none; border-radius: 0; border-bottom: 1px solid var(--dx-line); padding: 14px 0; }
#state-result .dt-panel :is(.ex-money, .meas-v) { font-variant-numeric: tabular-nums; }
#state-result .dt-panel a { color: var(--signal-hot); }

/* ---------- THREE PLANES (rule 2d): the machine crosses the headline ----------
   The headline is the back plane (under the canvas). Here the props may cross
   the foot of it (js/home-plinth.js computeAlt reads --head-overlap), so the
   machine reads as standing in front of the words. The props are see-through
   discs, so the letters under them still read. */
/* desktop keeps the headline on one line: two lines reached down to where the
   tall machines (the Small Web Computer) stand, and covered whole words. On one
   line only the flying drone crosses its foot. */
@media (min-aspect-ratio: 1/1) and (min-height: 540px) {
  .hero-back .title { letter-spacing: -0.04em; --head-overlap: 0.3; }
}
/* G4: on a wide screen the headline settles onto each machine as the row moves
   (js/home-plinth.js placeHead sets --sy); with reduced motion it cuts */
@media (prefers-reduced-motion: reduce) {
  .hero-back .title { transition: opacity 200ms var(--dx-out); }
}
/* the phone: the headline is the one huge thing, four short lines that fill
   the air above the machine, and the props cross the last one */
@media (max-aspect-ratio: 0.9999/1) and (max-width: 640px) and (min-height: 700px) {
  /* the headline sits lower, so the hovering props cross its last line */
  .stage { --t-fs: clamp(1.75rem, 14.2vw, 3.6rem); --t-top: max(20svh, 156px); }
  .hero-back .title { line-height: 0.96; letter-spacing: -0.04em; --head-overlap: 0.26; }
}

/* look-v4: the overview's parts chip keeps its number; the split (bought,
   printed, hardware) is said again at the top of the Parts tab */
.dt-panel .stat-row .stat-sub { display: none; }
/* the safety card's "Rating: Medium" repeats the Danger number right above it */
#state-result .dt-panel .safety-rating { display: none; }

/* THE MENU IS THE ONE THING (figure and ground, 8e): while it is open the
   machines and the headline dim, and the slide's words and arrows step back,
   so the three choices are all there is to read. Exits ease in, the return
   eases out (rule 2s). The arrows keep their own press spring, so their fade
   is instant rather than overriding it. The carousel writes the slide words'
   opacity inline every frame, hence the one !important. */
.hc-info, .hc-ctrl, .hc-track, #heroCanvasWrap, .hero-back { transition: opacity 260ms var(--dx-out); }
body:has(.idea-bar .gm-open) :is(.hc-info, .hc-ctrl) { opacity: 0 !important; transition: opacity 160ms var(--dx-in); }
body:has(.idea-bar .gm-open) .hc-arrow { opacity: 0; pointer-events: none; }
body:has(.idea-bar .gm-open) .hc-info { pointer-events: none; }
body:has(.idea-bar .gm-open) :is(.hc-track, #heroCanvasWrap, .hero-back) { opacity: 0.35; transition: opacity 200ms var(--dx-in); }
@media (prefers-reduced-motion: reduce) {
  .hc-info, .hc-ctrl, .hc-track, #heroCanvasWrap, .hero-back { transition: none; }
}
/* phone: all six tabs in view (or the last one peeking), never one hidden off the edge */
@media (max-width: 420px) { .dt-tab { padding: 0 8px; font-size: 0.875rem; } .dt-tabs { gap: 0; } }

/* ---------- THE BUILD PAGE, look-v4 pages step (2026-11-12) ----------
   VON RESTORFF: the safety shields are ink, not orange, because orange only
     ever means "press this" (G8).
   TABULAR FIGURES: prices and counts in Urbanist tabular, because the digits
     line up without the receipt-printer mono (G9).
   HICK'S LAW: what was behind More is a quiet text row at the end of the
     Overview, because one button and six tabs is all the first screen needs. */
#state-result .safety-list li svg, #safetyCard .safety-list li svg,
#safetyCard.safety-green .safety-list li svg, #safetyCard.safety-red .safety-list li svg { color: var(--ink-mute) !important; }
#state-result :is(.ex-money, .ex-cost, .meas-v, .price-v, .stat-value) { font-family: var(--font-ui); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.dt-safe-line { margin: 0; color: var(--ink-mute); font-size: 0.9375rem; }
.dt-safe-line a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(246, 244, 241, 0.4); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .dt-safe-line a:hover { text-decoration-color: var(--signal-hot); } }
#state-result .dt-panel .dt-safe-line a { color: var(--ink); }
.dt-more { display: flex; flex-wrap: wrap; gap: 4px 18px; padding-top: 18px; border-top: 1px solid var(--dx-line); }
.dt-more .btn {
  min-height: 44px; padding: 0; background: none; border: 0; box-shadow: none; flex: 0 0 auto;
  font: 600 0.9375rem/1 var(--font-ui); color: var(--ink-dim); text-decoration: underline; text-decoration-color: rgba(246, 244, 241, 0.3); text-underline-offset: 4px;
}
.dt-more .btn[hidden] { display: none; }
.dt-more .btn:disabled { color: var(--ink-faint); text-decoration: none; cursor: default; }
@media (hover: hover) and (pointer: fine) { .dt-more .btn:not(:disabled):hover { color: var(--ink); text-decoration-color: var(--signal-hot); } }
.dt-more .btn:focus-visible { outline: 2px solid var(--signal-hot); outline-offset: 3px; border-radius: 4px; }
#state-result .dt-panel .viewer-cap { margin: 0; font-size: 0.8125rem; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
#state-result .stat-chip.chip-red .stat-value { color: var(--ink); }
/* the phone: "$265-299" under the title already reads as the price */
@media (max-width: 560px) { #state-result .price-k { display: none; } }

/* ---------- /invent, the asking page: the box, one button, three ideas ----------
   HICK'S LAW: no drawing grid, no scan line, no mono labels, because the box is
     the one idea on this screen. */
.floor-bg { background-image: radial-gradient(46% 34% at 50% 48%, rgba(var(--ember-rgb), 0.16), transparent 72%) !important; }
.floor-bg::after { content: none !important; animation: none !important; }
.floor-cap, .bf-sum .bf-k { font-family: var(--font-ui) !important; text-transform: none !important; letter-spacing: 0.01em !important; font-weight: 600 !important; }
.floor-cap { font-size: 0.8125rem; }
.spark-row { gap: 0; }
.floor-bg { background-size: 100% 100% !important; background-repeat: no-repeat !important; background-position: center !important; }

/* fix 2026-11-12: at 320-360 px "Open the plans" wrapped to two lines with its
   arrow loose beside it; the row tightens and the link stays one line */
@media (max-width: 360px) {
  .hc-row { gap: 6px; }
  .hc-open { white-space: nowrap; padding-inline: 12px 10px; }
}