/* The cover page.
 *
 * One file. It used to be two — home.css inside @layer components and
 * home-editions.css outside it, which is the only reason the second one
 * won every conflict. Unlayered and loaded after editions.css (see the
 * `/` entry in src/pages.mjs, which lists it as lateCss), this file has
 * the last word without needing a second file to get it.
 *
 * Every size outside the hero's drawing is a shell token. The drawing is
 * a specimen: Signal Studio's own task screen, set at its own sizes on
 * four sheets (DESIGN.md's frame exemption), and the machine type round it
 * — rail, detents, title block — is one micro size, 11/16, on purpose.
 */

/* ══ the home page's column ══════════════════════════════════════════
   The hero alone is full-bleed. The founder's word: "show our hero
   section properly wide screen" — so it takes the whole glass, kept off
   the edges by the shell's gutter only, and the drawing is sized from the
   width and height it then has. Everything else on the page — masthead,
   films, strip head, doors, close, footer — stays in the site's one
   container (.wrap), as on every other route: "the rest of the page can
   have the previous width in the containers." */
[data-page="home"] .hx .wrap { max-width: none; }
/* on an ultrawide the script insets the scene (--xpad) so the claim and
   the height-bound drawing stay one composition; see layout() */
[data-page="home"] .hx .hx-in { padding-inline: calc(max(var(--gutter), env(safe-area-inset-left)) + var(--xpad, 0px)); }

/* ══ the hero: the exploded view ═════════════════════════════════════
   Signal Studio's task screen drawn as four sheets you can pull apart:
   01 Surface (the rendered UI), 02 Structure (the same geometry as
   measured hairlines), 03 Logic (the Relay rule and the task states),
   04 Data (the six tasks as records). The claim is the h1; the drawing is
   the evidence; each layer carries one real design note on a leader that
   lands on the thing the note is about.

   Everything here is additive (--x-*) on top of the site's tokens. Every
   colour is a palette token or a palette colour at some alpha: the
   drawing's materials are the Editions palette, so they are written as
   the palette's own tokens rather than as a second set of hexes. */
.hx {
  /* the drawing's projection. 44° of tilt and 26° of turn: the glyph
     height a reader gets is cos(tilt) divided by how far the baseline
     leans, so this view gives the Surface's task text ~11% more height
     than a steeper one at the same width, and the lines lean 16°. */
  --x-tilt: .7193;              /* cos 44° */
  --x-turn: -26deg;
  --x-lead: rgb(17 17 17 / .34);      /* leaders, extension lines */
  --x-mark: rgb(17 17 17 / .5);       /* dimension lines */
  --x-surface-edge: var(--rule);
  /* the film is 90% opaque: the code on the ink sheet under it reads as a
     tone band, never as a second layer of half-legible letters */
  --x-film: rgb(255 255 255 / .9);
  --x-film-edge: rgb(17 17 17 / .2);
  --x-film-line: rgb(17 17 17 / .32);
  --x-film-grid: rgb(17 17 17 / .05);
  --x-logic: var(--paper-ink);
  --x-logic-edge: #000000;
  --x-logic-rule: rgb(250 250 250 / .1);
  --x-data: var(--paper-2);
  --x-data-edge: var(--rule-strong);
  --x-data-rule: rgb(17 17 17 / .07);
  --x-data-ink: var(--ink-2);
  --x-cast: 0 0 0;
  --x-ground: rgb(17 17 17 / .16);
  --x-rim: rgb(17 17 17 / .09);
  --x-pin: var(--accent-soft);        /* a committed lift: the selection fill and its rule */
  --x-pin-rule: var(--accent-line);
  /* the hero fills the first screen with the masthead, less a deliberate
     peek of the next section's heading, which sits on the fold */
  --x-hero-h: max(600px, calc(100svh - var(--nav-h, 76px) - 118px));
  padding-top: 8px; overflow-x: clip;
}
[data-theme="dark"] .hx {
  /* dark is a second set of materials, not an inversion */
  --x-lead: rgb(250 250 250 / .3);
  --x-mark: rgb(250 250 250 / .5);
  /* on a dark ground a shadow says nothing, so the sheets' edges catch
     the light instead: each thickness is a lighter grey than its face */
  --x-film: rgb(23 23 23 / .88);
  --x-film-edge: rgb(250 250 250 / .2);
  --x-film-line: rgb(250 250 250 / .34);
  --x-film-grid: rgb(250 250 250 / .05);
  --x-logic-edge: var(--rule-soft);
  --x-data-rule: rgb(250 250 250 / .06);
  --x-ground: rgb(0 0 0 / .7);
  --x-rim: rgb(250 250 250 / .1);
  --x-pin: var(--paper-3);
  --x-pin-rule: var(--rule-strong);
}

.hx :where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* copy on the left, the drawing commands the rest. One ramp for the
   claim at every width — no step at any breakpoint — and the copy column
   is measured off it, so "and build the system" always holds its line. */
.hx-in { --h1: clamp(34px, calc(2.4vw + 16px), 48px);
  display: grid; grid-template-columns: minmax(0, min(470px, calc(var(--h1) * 9.6))) minmax(0, 1fr); column-gap: 28px;
  align-items: center; min-height: var(--x-hero-h); }
.hx-copy { position: relative; z-index: 3; padding-bottom: 40px; }
.hx-h1 { margin: 0; font-size: var(--h1); line-height: 1.05; letter-spacing: -0.035em; font-weight: 550; text-wrap: balance; }
.hx-br { display: none; }
.hx-lede { margin: 20px 0 0; font-size: 17px; line-height: 1.5; letter-spacing: -0.005em; color: var(--ink-2); max-width: 34ch; }
.hx-actions { margin-top: 28px; display: flex; align-items: center; gap: 8px 22px; flex-wrap: wrap; }
.hx-btn { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px 0 20px; border-radius: var(--r-md);
  background: var(--ink); color: var(--paper); text-decoration: none; font-size: 15px; line-height: 20px; font-weight: 500; letter-spacing: -0.01em;
  transition: transform var(--d-press) var(--ease-out), background-color var(--d-hover) var(--ease-out); }
.hx-btn svg { width: 15px; height: 15px; transition: transform var(--d-hover) var(--ease-out); }
.hx-btn:active { transform: scale(.97); }
@media (hover: hover) { .hx-btn:hover svg { transform: translateX(2px); } .hx-btn:hover { background: var(--ink-2); color: var(--paper); } }
.hx-quiet { display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; padding-block: 12px; font-size: 15px; line-height: 20px;
  color: var(--ink-2); text-decoration: none; transition: color var(--d-hover) var(--ease-out); }
.hx-count { font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--graphite); }
@media (hover: hover) { .hx-quiet:hover { color: var(--ink); } }
.hx-btn:focus-visible, .hx-quiet:focus-visible { border-radius: var(--r-md); }

/* ── the rig ──────────────────────────────────────────────────────────
   The field is the drawing's coordinate space. Its geometry lives in four
   custom properties (--s scale, --g the resting gap, --cx/--cy the stack's
   centre); CSS alone draws the rest pose from them when there is no
   script, and src/js/home.mjs writes the same four when there is.
   The rig stops at the container's right edge, like every other band on
   the page: the notes column ends where the nav and the section heads do.
   The no-script scales below are the ones the script arrives at in the
   site's container (1136–1152px of content from 1240 up). */
.hx-rig { position: relative; margin: 0; height: var(--x-hero-h); min-width: 0;
  --rail: calc(64px * var(--kx, 1)); --labw: calc(180px * var(--kx, 1)); --bottom: 84px; --gut: 0px;
  --s: .95; --g: calc(var(--s) * 70.6px);
  /* the stack stands on the band: its Apart pose (1 + 3 × 0.32 of the
     projected sheet) ends 16px above the band's rule */
  --cx: calc(var(--rail) + (100% - var(--rail) - 44px - var(--labw)) / 2);
  --cy: calc(100% - var(--slack, 0px) - var(--bottom) - 16px - 147.04px * var(--s) * 1.96); }
.hx-field { position: absolute; inset: 0; }
@media (min-width: 1240px) and (max-width: 1359px) { .hx-rig { --s: .78; } }

/* the stack is the slider */
.hx-stage { position: absolute; inset: 0; border-radius: var(--r-lg); }
/* with script the stage shrinks to the stack's own region, so its focus
   ring draws round the thing it moves, not round the labels */
.js .hx-stage { inset: 0 calc(var(--labw) + 20px + var(--rin, 0px)) calc(var(--bottom) + var(--slack, 0px)) 0; cursor: grab;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.hx-stage:focus-visible { outline-offset: -2px; }
.is-dragging, .is-dragging * { cursor: grabbing !important; }

/* one footprint for all four sheets: 424 × 248, the real screen plus a
   20px title strip. A pure 2D affine — no perspective — so every sheet
   rasterises as flat, sharp type and nothing can z-fight. */
.hx-plane { position: absolute; left: calc(var(--cx) - 212px); top: calc(var(--cy) - 124px); width: 424px; height: 248px;
  transform-origin: 50% 50%; pointer-events: none;
  transform: translateY(calc(var(--k) * var(--g))) scale(var(--s)) scaleY(var(--x-tilt)) rotate(var(--x-turn)); }
.hx-p-data { --k: 1.5; } .hx-p-logic { --k: .5; } .hx-p-structure { --k: -.5; } .hx-p-surface { --k: -1.5; }
.hx-edge { transform: translateY(calc(var(--k) * var(--g) + 3px)) scale(var(--s)) scaleY(var(--x-tilt)) rotate(var(--x-turn)); }
.hx-sheet { overflow: hidden; font-family: var(--ui); color: var(--ink); line-height: 1.5; }
.js .hx-plane { will-change: transform; transition: opacity .24s var(--ease-out); }
.hx-edge.is-ghost { opacity: 0; }
/* a lifted layer is read through the ones above it: they drop to drafting's
   phantom line — a dashed outline where the sheet was, and no fill */
.hx-sheet::before { content: ""; position: absolute; inset: 0; z-index: 2; border: 1.5px dashed var(--x-mark); opacity: 0; pointer-events: none;
  transition: opacity .24s var(--ease-out); }
.hx-sheet > *, .hx-sheet .du { transition: opacity .24s var(--ease-out); }
.hx-sheet.is-ghost { background: transparent !important; box-shadow: none !important; }
.hx-sheet.is-ghost::before { opacity: .7; }
.hx-sheet.is-ghost > * { opacity: .05; }
/* reading a lifted layer: the line that proves its note stays in full
   ink, everything else on that sheet steps back to 40% */
.hx-sheet.is-reading .du { opacity: .4; }
/* the evidence the leader lands on, ringed while its layer is lit */
.hx-sheet .ev { border-radius: 3px; transition: box-shadow var(--d-hover) var(--ease-out); }
.hx-sheet.is-lit .ev { box-shadow: 0 0 0 1.5px var(--accent) !important; }
.hx-ground { position: absolute; left: calc(var(--cx) - 212px); top: calc(var(--cy) - 124px); width: 424px; height: 248px; pointer-events: none;
  background: var(--x-ground); filter: blur(16px); border-radius: var(--r-lg); transform-origin: 50% 50%;
  transform: translateY(calc(1.5 * var(--g) + 12px)) scale(var(--s)) scaleY(var(--x-tilt)) rotate(var(--x-turn)) scale(1.03); }
/* contact shadows: two fixed blurs, crossfaded and moved by transform only */
.hx-cast { position: absolute; inset: 0; pointer-events: none; background: rgb(var(--x-cast)); opacity: 0; border-radius: var(--r-sm); will-change: transform, opacity; }
.hx-cast-tight { filter: blur(1.5px); }
.hx-cast-soft { filter: blur(12px); }

/* 01 surface — the real task screen on paper */
.hx-s-surface { background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); }
.hx-e-surface { background: var(--x-surface-edge); }
.hx-sheet .pv-app { height: 228px; border: 0; line-height: 15px; box-shadow: none; }
.hx-sheet .pv-app-head strong { line-height: 20px; }
.hx-sheet .pv-mark { margin-bottom: 14px; }
.hx-sheet .pv-rail-item { line-height: 15px; }
.hx-sheet .pv-faces i { line-height: 12px; }
/* 02 structure — the same geometry as hairlines, on film */
.hx-s-structure { background:
    repeating-linear-gradient(0deg, var(--x-film-grid) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, var(--x-film-grid) 0 1px, transparent 1px 8px), var(--x-film);
  box-shadow: inset 0 0 0 1px var(--x-film-edge); }
.hx-e-structure { background: var(--x-film-edge); }
.hx-s-structure .pv-app, .hx-s-structure .pv-app * { color: transparent !important; background: transparent !important; border-color: var(--x-film-line) !important; }
.hx-s-structure .pv-app-rail { border-right: 1px solid var(--x-film-line) !important; }
.hx-s-structure svg { visibility: hidden; }
.hx-s-structure .pv-mark, .hx-s-structure .pv-task-title, .hx-s-structure .pv-task-when, .hx-s-structure .pv-app-head strong,
.hx-s-structure .pv-tabs b, .hx-s-structure .pv-rail-item b { box-shadow: inset 0 0 0 .75px var(--x-film-line); border-radius: 2px; }
.hx-s-structure .pv-tick { border-style: dashed !important; }
/* the faces column drawn as hairline circles: it is what 02's note is about */
.hx-s-structure .pv-faces i { border-color: var(--x-film-line) !important; box-shadow: inset 0 0 0 .75px var(--x-film-line); }
.hx-ann { position: absolute; inset: 0; pointer-events: none; font-family: var(--mono); color: var(--ink); }
.hx-dim { position: absolute; font-size: 8px; line-height: 10px; }
.hx-dim-h { border-top: 1px solid var(--ink); height: 0; }
.hx-dim-h::before, .hx-dim-h::after { content: ""; position: absolute; top: -4px; width: 1px; height: 7px; background: var(--ink); }
.hx-dim-h::before { left: 0; } .hx-dim-h::after { right: 0; }
.hx-dim-h > b { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); font-weight: 500; white-space: nowrap; }
.hx-dim-v { border-left: 1px solid var(--ink); width: 0; }
.hx-dim-v::before, .hx-dim-v::after { content: ""; position: absolute; left: -4px; height: 1px; width: 7px; background: var(--ink); }
.hx-dim-v::before { top: 0; } .hx-dim-v::after { bottom: 0; }
.hx-dim-v > b { position: absolute; top: 50%; left: 5px; transform: translateY(-50%); font-weight: 500; white-space: nowrap; }
.hx-role { position: absolute; font-size: 8px; line-height: 10px; padding: 1px 3px; border-radius: 2px; white-space: nowrap; font-weight: 500;
  color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 .75px var(--x-film-line); }
.hx-role i { font-style: normal; color: var(--graphite); }
/* 03 logic — the Relay attach rule, on ink. The state diagram sits at the
   top and the code at the foot, so the line that proves 03's note (the id
   kept instead of a copy) lands in the band a resting stack shows. */
.hx-s-logic { background: var(--x-logic); box-shadow: inset 0 0 0 1px var(--x-rim); }
.hx-e-logic { background: var(--x-logic-edge); }
.hx-s-logic .pv-code-body { position: absolute; left: 0; top: 58px; margin: 0; padding: 0 18px; font-size: 8.4px; line-height: 12.2px; overflow: visible; background: none; }
/* the specimen's comment grey is 4.2:1 here; its tab grey is the AA step */
.hx-s-logic .pv-code-body .c { color: var(--code-tab-off); }
/* the code's blank lines keep their height, as in the editor */
.hx-s-logic .pv-code-body .pv-line { min-height: 12.2px; }
.hx-sd { position: absolute; left: 18px; right: 18px; top: 12px; height: 32px; border-bottom: 1px dashed var(--x-logic-rule);
  display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 8px; line-height: 10px; color: var(--code-text); padding-bottom: 4px; }
.hx-sd .st { display: inline-flex; align-items: center; gap: 4px; }
.hx-sd .o { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.2px var(--code-text); }
.hx-sd .on .o { background: var(--code-key); box-shadow: none; }
.hx-sd .ar { display: inline-grid; line-height: 9px; text-align: center; color: var(--code-tab-off); }
.hx-sd .ar b { font-weight: 400; color: var(--code-text); }
.hx-sd .q { margin-left: auto; color: var(--code-tab-off); }
/* 04 data — the six records the list reads, one row under each task.
   Every record carries done as a field, so a state is visibly data. */
.hx-s-data { background: var(--x-data); box-shadow: inset 0 0 0 1px var(--x-data-edge); }
[data-theme="dark"] .hx-s-surface { box-shadow: inset 0 0 0 1px var(--rule-soft), inset 0 1px 0 rgb(250 250 250 / .06); }
[data-theme="dark"] .hx-s-data { box-shadow: inset 0 0 0 1px var(--rule-soft); }
.hx-e-data { background: var(--x-data-edge); }
.hx-recs { position: absolute; left: 0; right: 0; top: 0; height: 228px; padding: 16px 16px 0; font-family: var(--mono); color: var(--x-data-ink); }
.hx-recs header { display: flex; justify-content: space-between; height: 32px; font-size: 8px; line-height: 20px; color: var(--graphite); border-bottom: 1px solid var(--x-data-edge); }
.hx-recs ol { margin: 0; padding: 0; list-style: none; }
.hx-recs li { display: block; height: 30px; font-size: 8.4px; line-height: 29px; white-space: nowrap; border-bottom: 1px solid var(--x-data-rule); }
.hx-recs i { font-style: normal; color: var(--graphite); }
.hx-recs b { font-weight: 400; color: var(--ink); }
.hx-recs .pf i, .hx-recs .pf b { color: var(--ink); }
/* the title strip every sheet carries: its number, its name, one fact */
.hx-strip { position: absolute; left: 0; right: 0; bottom: 0; height: 20px; display: flex; align-items: center; gap: 6px; padding: 0 12px;
  font-family: var(--mono); font-size: 8px; line-height: 10px; color: var(--graphite); border-top: 1px solid var(--rule); }
.hx-strip b { font-weight: 500; color: var(--ink); }
.hx-strip span:last-child { margin-left: auto; }
.hx-s-structure .hx-strip { border-top-color: var(--x-film-line); }
.hx-s-structure .hx-strip b, .hx-s-structure .hx-strip { color: var(--ink); }
.hx-s-logic .hx-strip { border-top-color: var(--x-logic-rule); color: var(--code-tab-off); }
.hx-s-logic .hx-strip b { color: var(--code-tab-on); }
.hx-s-data .hx-strip { border-top-color: var(--x-data-edge); }

/* ── the drawing overlay: leaders, the dimension rail ────────────────── */
.hx-draw { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.hx-draw .ld { fill: none; stroke: var(--x-lead); stroke-width: 1; transition: stroke var(--d-hover) var(--ease-out); }
.hx-draw .pt { fill: var(--paper); stroke: var(--x-mark); stroke-width: 1.25; transform-box: fill-box; transform-origin: 50% 50%;
  transition: stroke var(--d-hover) var(--ease-out), fill var(--d-hover) var(--ease-out); }
.hx-draw .lit .ld { stroke: var(--accent); }
.hx-draw .lit .pt { stroke: var(--accent); fill: var(--accent); }
.hx-draw .ext { stroke: var(--x-lead); stroke-width: 1; }
.hx-draw .dimline { stroke: var(--x-mark); stroke-width: 1; }
.hx-draw .head { fill: var(--x-mark); }
.hx-draw .chain { stroke: var(--x-mark); stroke-width: 1; }
.hx-draw .det { stroke: var(--x-lead); stroke-width: 1; transition: stroke var(--d-hover) var(--ease-out); }
.hx-draw .det.is-on { stroke: var(--ink); }
/* the detent's tick: one small pulse when the stack comes to rest */
@keyframes hx-tick { 40% { transform: scale(1.7); } }
@keyframes hx-knock { 40% { transform: scale(.9); } }
.is-tick .hx-draw .pt { animation: hx-tick .24s var(--ease-out); }
.is-tick .hx-handle i { animation: hx-knock .24s var(--ease-out); }

/* the handle rides the top of the dimension line: 44px of target round a
   30px knob, and a "Drag" tip beside it until the first drag is done */
.hx-handle { position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; display: grid; place-items: center;
  cursor: grab; touch-action: none; z-index: 4; }
.hx-handle i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--ink);
  box-shadow: 0 0 0 1.25px var(--ink), 0 2px 6px rgb(17 17 17 / .14);
  transition: transform var(--d-press) var(--ease-out), background-color var(--d-press) var(--ease-out), color var(--d-press) var(--ease-out); }
.hx-handle svg { width: 14px; height: 14px; }
@media (hover: hover) { .hx-handle:hover i { transform: scale(1.08); } }
.hx-handle.is-pressed i { transform: scale(.94); background: var(--ink); color: var(--paper); }
[data-theme="dark"] .hx-handle i { box-shadow: 0 0 0 1.25px var(--ink), 0 2px 6px rgb(0 0 0 / .5); }
.hx-tip { position: absolute; left: 0; top: 0; font-family: var(--mono); font-size: 11px; line-height: 16px; color: var(--graphite);
  pointer-events: none; white-space: nowrap; transition: opacity .4s var(--ease-out); }
.has-dragged .hx-tip { opacity: 0; }

/* the three detents, in plain words. Pointer shortcuts for what the
   slider already does from the keyboard: out of the tab order and the
   accessibility tree. */
.hx-dets { position: absolute; left: 0; top: 0; z-index: 3; }
.hx-dets button { position: absolute; left: 0; top: 0; height: 32px; padding: 0 8px; margin-top: -16px; border: 0; background: none; border-radius: var(--r-sm);
  font-family: var(--mono); font-size: 11px; line-height: 16px; font-weight: 400; color: var(--graphite); cursor: pointer; white-space: nowrap;
  transition: color var(--d-hover) var(--ease-out); }
.hx-dets button.is-on { color: var(--ink); font-weight: 500; }
@media (hover: hover) { .hx-dets button:hover { color: var(--ink); } }
/* one micro size for everything machine-set around the drawing: 11/16 */
.hx-dimval { position: absolute; left: 0; top: 0; font-family: var(--mono); font-size: 11px; line-height: 16px; color: var(--graphite); white-space: nowrap; }

/* ── labels: name and one real note, on leaders ───────────────────── */
.hx-labels { position: absolute; inset: 0; pointer-events: none; margin: 0; padding: 0; list-style: none; }
.hx-labels li { position: absolute; left: calc(100% - var(--labw)); width: var(--labw);
  top: calc(var(--cy) + var(--ay0) * var(--s) + var(--k) * max(var(--g), 96px) - 10px); --ay0: -2.35px; }
.js .hx-labels li { left: 0; top: 0; will-change: transform; }
.hx-labels li[data-i="3"] { --k: -1.5; } .hx-labels li[data-i="2"] { --k: -.5; } .hx-labels li[data-i="1"] { --k: .5; } .hx-labels li[data-i="0"] { --k: 1.5; }
.hx-lab { pointer-events: auto; display: block; width: calc(100% + 16px); margin: -6px -8px; padding: 6px 8px; text-align: left; font: inherit; color: inherit;
  background: none; border: 0; border-radius: var(--r-md); cursor: pointer; transition: background-color var(--d-hover) var(--ease-out), box-shadow var(--d-hover) var(--ease-out); }
.hx-hd { display: flex; align-items: baseline; gap: 8px; }
.hx-n { font-family: var(--mono); font-size: 11px; line-height: 20px; color: var(--graphite); transition: color var(--d-hover) var(--ease-out); }
.hx-nm { font-size: calc(15px * var(--kx, 1)); line-height: calc(20px * var(--kx, 1)); font-weight: 550; letter-spacing: -0.01em; color: var(--ink); transition: color var(--d-hover) var(--ease-out); }
.hx-note { display: block; margin-top: 2px; padding-left: 25px; font-size: calc(13px * var(--kx, 1)); line-height: calc(18px * var(--kx, 1)); color: var(--graphite); transition: color var(--d-hover) var(--ease-out); }
.hx-lab.is-lit .hx-n, .hx-lab.is-lit .hx-nm { color: var(--accent); }
.hx-lab.is-lit .hx-note { color: var(--ink-2); }
/* a hover or focus preview is indigo type; a committed lift is also a
   filled row, so the column always says which one you have */
.hx-lab[aria-pressed="true"] { background: var(--x-pin); box-shadow: inset 0 0 0 1px var(--x-pin-rule); }
@media (hover: hover) { .hx-lab:hover .hx-note { color: var(--ink-2); } }
.hx .hx-lab:focus-visible { outline-offset: 0; }
/* the detail: the proof of the lit layer's note, set flat and at reading
   size (11px and up) — drafting's detail view. In the wide layout it sits
   in the band under the drawing; in the list layouts, under its own row. */
.hx-detail { font-size: 11px; line-height: 16px; }
.hx-cap { display: block; font-family: var(--mono); font-size: 11px; line-height: 16px; color: var(--graphite); margin-bottom: 4px; }
.hx-cap b { font-weight: 500; color: var(--ink); }
.hx-detail pre { margin: 0; font-family: var(--mono); font-size: 11px; line-height: 16px; white-space: pre-wrap; }
.hx-code { background: #111111; color: var(--code-text); padding: 4px 8px; border-radius: var(--r-sm); }
.hx-code .k { color: var(--code-key); } .hx-code .f { color: var(--code-fn); } .hx-code .s { color: var(--code-str); }
.hx-code .p { color: var(--code-prop); } .hx-code .c { color: var(--code-tab-off); } .hx-code i { font-style: normal; }
.hx-rec { color: var(--graphite); }
.hx-detail i { font-style: normal; }
.hx-rec b { font-weight: 400; color: var(--ink-2); }
.hx-rec .pf, .hx-rec .pf b, .hx-rec .pf i { color: var(--ink); font-weight: 500; font-style: normal; }
.hx-row { display: inline-grid; grid-template-columns: 15px minmax(0, max-content) auto auto; gap: 12px; align-items: center; color: var(--graphite); }
.hx-row .pv-task-title { color: var(--ink-2); }
.hx-row .pv-task-when { font-size: 11px; color: var(--graphite); }
.hx-row .pv-faces i { width: 18px; height: 18px; font-size: 11px; line-height: 14px; }
.hx-row .pf { color: var(--ink); font-weight: 500; border-radius: 3px; box-shadow: 0 0 0 1.5px var(--accent); padding: 0 3px; }
.hx-meas { display: block; margin-top: 4px; font-family: var(--mono); color: var(--graphite); }
.hx-meas b { font-weight: 500; color: var(--ink); }
.hx-ldetail { display: none; }

/* numbered balloons: in the list layouts the sheets carry item numbers in
   a gutter of their own beside the stack, each on a short leader from its
   sheet's corner — no balloon ever sits on a sheet */
.hx-balls { display: none; }
.hx-ball { position: absolute; left: calc(var(--cx) + 244.9px * var(--s) + 12px); top: calc(var(--cy) + 13.37px * var(--s) + var(--k) * var(--g) - 11px);
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; pointer-events: none;
  background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--x-mark);
  font-family: var(--mono); font-size: 11px; line-height: 16px; font-weight: 500;
  transition: background-color var(--d-hover) var(--ease-out), color var(--d-hover) var(--ease-out), box-shadow var(--d-hover) var(--ease-out); }
.hx-ball::before { content: ""; position: absolute; right: 100%; top: 50%; width: 12px; border-top: 1px solid var(--x-lead); }
.js .hx-ball { left: 0; top: 0; }
.js .hx-ball::before { display: none; }
.hx-ball[data-i="3"] { --k: -1.5; } .hx-ball[data-i="2"] { --k: -.5; } .hx-ball[data-i="1"] { --k: .5; } .hx-ball[data-i="0"] { --k: 1.5; }
.hx-ball.is-lit { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 1px var(--accent); }

/* leaders with no script: the same orthogonal leaders the live drawing
   draws, to the same evidence points (unit offsets measured off the real
   sheets), computed in CSS for the rest pose */
.hx-leads { position: absolute; inset: 0; pointer-events: none; }
.js .hx-leads { display: none; }
.hx-leads span { position: absolute; --ax: calc(var(--cx) + var(--ex1) * var(--s)); --ay: calc(var(--cy) + var(--ey1) * var(--s) + var(--k) * var(--g));
  --ty: calc(var(--cy) + var(--ay0) * var(--s) + var(--k) * max(var(--g), 96px));
  --run: calc(var(--cx) + 244.9px * var(--s) + 16px + var(--st) - var(--ax));
  left: var(--ax); right: calc(var(--labw) + 8px); --ay0: -2.35px; }
.hx-leads span::before, .hx-leads span::after { content: ""; position: absolute; }
.hx-leads span::before { left: 0; width: var(--run); height: 100%; border-right: 1px solid var(--x-lead); }
.hx-leads span::after { left: var(--run); right: 0; border-top: 1px solid var(--x-lead); }
.hx-leads i { position: absolute; left: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 1.25px var(--x-mark); }
.hx-leads .up { top: var(--ty); height: calc(var(--ay) - var(--ty)); }
.hx-leads .up::before { top: 0; border-bottom: 1px solid var(--x-lead); } .hx-leads .up::after { top: 0; } .hx-leads .up i { bottom: -3px; }
.hx-leads .dn { top: var(--ay); height: calc(var(--ty) - var(--ay)); }
.hx-leads .dn::before { top: 0; border-top: 1px solid var(--x-lead); } .hx-leads .dn::after { bottom: 0; } .hx-leads .dn i { top: -3px; }
.hx-leads [data-i="3"] { --k: -1.5; --st: 0px; } .hx-leads [data-i="2"] { --k: -.5; --st: 10px; }
.hx-leads [data-i="1"] { --k: .5; --st: 10px; } .hx-leads [data-i="0"] { --k: 1.5; --st: 0px; }
/* the evidence points in unit offsets from the stack centre, measured off
   the rendered sheets (the script re-measures them live) */
.hx-leads [data-i="3"] { --ex1: 157.98px; --ey1: -55.83px; } .hx-leads [data-i="2"] { --ex1: 217.2px; --ey1: -4.57px; }
.hx-leads [data-i="1"] { --ex1: 57.87px; --ey1: 19.72px; } .hx-leads [data-i="0"] { --ex1: 125.25px; --ey1: 31.3px; }

/* the band under the drawing: one hairline from the rail to the
   container's right edge, and under it the hint (on the rail's own x),
   the detail of whatever layer is lit, and the title block */
.hx-band { position: absolute; left: var(--gx, var(--rail)); right: var(--rin, 0px); bottom: var(--slack, 0px); height: var(--bottom); border-top: 1px solid var(--rule);
  display: flex; gap: 24px; padding-top: 10px; }
.hx-hint { flex: none; width: 176px; margin: 0; font-size: 13px; line-height: 18px; color: var(--graphite); transition: opacity .4s var(--ease-out); }
.hx-hint .l { display: block; white-space: nowrap; }
.hx-band .hx-detail { flex: 1; min-width: 0; transition: opacity var(--d-hover) var(--ease-out); }
.hx-titleblock { flex: none; margin-left: auto; font-family: var(--mono); font-size: 11px; line-height: 16px; color: var(--graphite); text-align: right;
  transition: opacity .4s var(--ease-out); }
.hx-titleblock span { display: block; white-space: nowrap; }
/* In the site's container the band is ~140px narrower than the lab's, so
   while a layer's detail is open the title block steps aside for it: the
   cited code then sets on its own lines inside the band instead of
   wrapping down into the next section. */
.hx-band:has(.hx-cap) .hx-titleblock { display: none; }
.hx-hint[hidden], .hx-handle[hidden], .hx-dimval[hidden], .hx-tip[hidden] { display: none; }
:root:not(.js) :is(.hx-hint, .hx-dets, .hx-handle, .hx-dimval, .hx-tip) { display: none; }

/* ══ the arrival ══════════════════════════════════════════════════
   The one orchestrated moment on the site, and now it is the stack
   assembling. The flag comes from chrome.mjs: `data-arrive` is set on the
   body once per session (sessionStorage `em.home.arrived`) and only on
   this page. The claim, the lede and the actions rise 75ms apart on the
   shell's own tokens; src/js/home.mjs reads the same flag and lands the
   four sheets closed, bottom first, then lets the stack exhale open to
   rest while the knob rides up and the leaders draw. `.is-arriving` is
   the script's half of the same moment, removed when the stack rests.

   Everything below is inside prefers-reduced-motion: no-preference, so a
   reader who asked for less motion gets the settled page; and with no
   scripting the flag never lands, so nothing is ever parked. The settled
   state is the no-JS render, exactly.

   Each step carries its own delay in --step rather than in a
   transition-delay of its own: a :is() list takes the specificity of its
   most specific branch, so one rule setting the transition would beat
   every per-element delay and fire the whole sequence at once. */
.hx-h1 { --step: 0ms; }
.hx-lede { --step: 75ms; }
.hx-actions { --step: 150ms; }
@media (prefers-reduced-motion: no-preference) {
  [data-arrive] :is(.hx-h1, .hx-lede, .hx-actions) { opacity: 0; transform: translateY(var(--arrive-shift)); }
  [data-arrive="run"] :is(.hx-h1, .hx-lede, .hx-actions) {
    opacity: 1; transform: none;
    transition: opacity var(--d-arrive) var(--ease-out) var(--step, 0ms),
                transform var(--d-arrive) var(--ease-out) var(--step, 0ms);
  }
  @keyframes hx-land { from { opacity: 0; translate: 0 -16px; } }
  .hx-rig.is-arriving :is(.hx-plane, .hx-ground) { animation: hx-land .32s var(--ease-out) both; }
  .hx-rig.is-arriving :is(.hx-p-data, .hx-ground) { animation-delay: 120ms; }
  .hx-rig.is-arriving .hx-p-logic { animation-delay: 190ms; }
  .hx-rig.is-arriving .hx-p-structure { animation-delay: 260ms; }
  .hx-rig.is-arriving .hx-p-surface { animation-delay: 330ms; }
  .hx-rig.is-arriving :is(.hx-hint, .hx-titleblock, .hx-tip) { opacity: 0; }
}

/* ── wide desktop: the headline breaks where the claim breaks ──────── */
/* The claim is display type and grows with the window — the shell's
   --t-display role, tuned to share the width with the drawing and fitted
   to the height as well as the width: ~57px at 1240, ~64px at 1280, 71px
   at 1440 (1.6× the section headings, which are --t-section, 44px from
   there), ~91px at 1920×1080 and ~121px on a 1440-tall widescreen. Between 1240 and
   1440 it is 1.35–1.6× them: at the full display ratio a 1280 laptop's
   drawing would drop to scale 0.70. At that size three lines would take the drawing's width, so it
   sets on four balanced lines, broken where the phrases break
   ("I design the / surface and / build the system / underneath it."), and
   its column is measured to its longest line with a 20px gap to the rail.
   The lede takes the shell's lede role beside it. */
@media (min-width: 1240px) {
  .hx-br { display: inline; } .hx-h1 { white-space: nowrap; }
  .hx-in { --h1: clamp(56px, min(calc(6.75vw - 26.4px), 8.4vh), 128px);
    grid-template-columns: minmax(0, calc(var(--h1) * 7.45)) minmax(0, 1fr); column-gap: 20px; }
  /* the lede and the actions are measured off the claim, so the copy
     block keeps its proportions from a laptop to an ultrawide: 17px and a
     44px button beside a 71px claim, ~21px and 56px beside 90px. The
     shell has one button size; this is the hero's own step up from it. */
  .hx-lede { font-size: clamp(17px, calc(var(--h1) * .235), 28px); line-height: 1.5; margin-top: calc(var(--h1) * .34); max-width: 40ch; }
  .hx-actions { margin-top: calc(var(--h1) * .45); gap: 8px calc(var(--h1) * .3); }
  .hx-btn { height: clamp(44px, calc(var(--h1) * .62), 64px); padding: 0 calc(var(--h1) * .25) 0 calc(var(--h1) * .28);
    font-size: clamp(15px, calc(var(--h1) * .19), 21px); line-height: 1.3; gap: .6em; }
  .hx-btn svg { width: 1em; height: 1em; }
  .hx-quiet { font-size: clamp(15px, calc(var(--h1) * .19), 21px); line-height: 1.3; }
  .hx-count { font-size: clamp(12px, calc(var(--h1) * .15), 16px); }
}

/* ── below 1240: the drawing becomes a drawing with a parts list.
   Numbered balloons in their own gutter, the words in a list under it,
   the detail of a lifted layer under its own row. ─────────────────── */
@media (max-width: 1239px) {
  .hx-rig { height: auto; --labw: 0px; --bottom: 0px; --gut: 36px; --s: .8; --g: calc(var(--s) * 64.7px);
    --cx: calc(var(--rail) + (100% - var(--rail) - var(--gut)) / 2); --cy: 50%; }
  .hx-field { position: relative; inset: auto; height: calc(var(--s) * 294px * 1.84 + 34px); }
  .hx-stage, .js .hx-stage { inset: 0; }
  .hx-leads, .hx-band { display: none; }
  .hx-balls { display: block; }
  .hx-labels { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; margin-top: 12px; }
  .hx-labels li, .js .hx-labels li { position: static; width: auto; transform: none !important; opacity: 1 !important; }
  .hx-lab { width: 100%; margin: 0; padding: 8px 12px; min-height: 44px; border-radius: var(--r-lg); }
  .hx-ldetail { display: block; padding: 0 12px; }
  .hx-ldetail:empty { display: none; }
  .hx-ldetail .hx-detail { padding: 8px 0 10px 25px; }
  .hx-ctrl { display: flex; align-items: center; justify-content: center; gap: 8px 20px; flex-wrap: wrap; margin-top: 6px; }
  .hx-dets { position: static; display: flex; flex-direction: row-reverse; width: max-content; padding: 3px; border-radius: 999px;
    box-shadow: inset 0 0 0 1px var(--rule); }
  .hx-dets button { position: static; margin: 0; height: 38px; padding: 0 16px; border-radius: 999px; transform: none !important; opacity: 1 !important; font-size: 11px; }
  .hx-dets button.is-on { background: var(--paper-3); }
  .hx-ctrl .hx-hint { width: auto; text-align: left; }
  .hx-ctrl .hx-hint .l { display: inline; }
}
/* 1024–1239: still two columns — the claim left, the drawing and its
   parts list right — so a laptop never gets a thumbnail */
@media (min-width: 1024px) and (max-width: 1239px) {
  .hx-in { align-items: start; min-height: 0; padding-top: 24px; }
  .hx-copy { padding-top: 40px; }
  .hx-ctrl { flex-direction: column; gap: 6px; }
  .hx-ctrl .hx-hint { text-align: center; }
  .home-selected { margin-top: 40px; }
}
/* below 1024: one column. The drawing starts clear of the actions row,
   so its box (and its focus ring) never reaches the buttons. */
@media (max-width: 1023px) {
  .hx { padding-top: 28px; }
  .hx-in { display: block; min-height: 0; }
  .hx-copy { padding-bottom: 0; max-width: 620px; }
  .hx-rig { margin-top: 20px; --s: .92; }
  .home-selected { margin-top: 48px; }
}
@media (max-width: 599px) {
  .hx { padding-top: 20px; }
  /* on a phone the width alone sets the scale, so the field's height is
     written the way the script computes it — (width − balloon gutter) ×
     the projected sheet's aspect, opened to its resting gap — and the
     script's first layout moves nothing (G13 holds CLS under 0.01) */
  .hx-rig { --rail: 0px; --s: .64; --g: calc(var(--s) * 52.9px); margin-top: 16px; container-type: inline-size; }
  .hx-field { height: calc((100cqw - 36px) * .99668 + 22px); }
  .hx-labels { grid-template-columns: minmax(0, 1fr); gap: 2px; margin-top: 10px; }
  .hx-lab { padding: 9px 10px; }
  .hx-lede { font-size: 16px; margin-top: 14px; }
  .hx-ctrl { flex-direction: column; gap: 8px; }
  .hx-ctrl .hx-hint { text-align: center; }
  .hx-dets button { height: 44px; padding: 0 18px; }
}
@media (max-width: 359px) { .hx-rig { --s: .5; } }

/* ── the specimen internals the sheets use ─────────────────────────
   The workspace internals live in css/previews.css, shared with /design;
   the outer box and the code colours are set here. Specimen-internal
   type, at the product's own sizes. */
.pv-app {
  display: grid; grid-template-columns: 104px minmax(0, 1fr);
  background: var(--paper); border: 1px solid var(--rule);
  box-shadow: var(--shadow-card); overflow: hidden; font-size: 11px;
}
.pv-code-body {
  padding: var(--s4) var(--s5) var(--s5); margin: 0; overflow-x: auto;
  font-family: var(--mono); font-size: 10.5px; line-height: 1.74; color: var(--code-text);
  white-space: pre;
}
.pv-code-body .pv-line { display: block; }
.pv-code-body i { font-style: normal; }
.pv-code-body .k { color: var(--code-key); }
.pv-code-body .f { color: var(--code-fn); }
.pv-code-body .s { color: var(--code-str); }
.pv-code-body .c { color: var(--code-com); }
.pv-code-body .p { color: var(--code-prop); }

/* ══ a section head ══════════════════════════════════════════════
   The heading on the left, one sentence and the way on on the right. No
   number, no eyebrow: the heading says what the section is. */
.home-head {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  column-gap: var(--s10); row-gap: var(--s4);
  align-items: end; margin-bottom: clamp(var(--s8), 4vw, var(--s10));
}
.home-head > h2 {
  grid-column: 1; grid-row: 1 / -1; align-self: end; max-width: 22ch;
  font-size: var(--t-section); font-weight: 550;
  line-height: 1.12; letter-spacing: var(--ls-heading);
}
.home-head > p {
  grid-column: 2; grid-row: 1; margin: 0; max-width: 44ch;
  color: var(--ink-2); font-size: var(--t-body); line-height: var(--lh-prose);
}
.home-head > .arrow { grid-column: 2; grid-row: 2; justify-self: start; }

/* ══ selected work: the films ═════════════════════════════════════
   Relay leads at full width — it is the product moment — and the other
   three sit under it in a row. Each is a poster until it is asked for:
   src/js/home-films.mjs runs the one most in view as a muted loop and the
   labelled cover switches that film to the real thing, with sound and
   native controls. */
.home-selected { padding-block: 0 clamp(var(--s10), 7vw, var(--s13)); scroll-margin-top: 100px; }
/* The hand-off. This section's opening is the hero's last line: it sits
   on the fold under a hairline, so the first screen ends on "there is
   more" rather than on a gap. Its heading is the same section heading as
   every other on the page (--t-section); the claim stays at least 1.6×
   it on the wide layout (G22 holds that ratio). */
.home-head-fold {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s6);
  border-top: 1px solid var(--rule-soft); padding-top: var(--s6); margin-bottom: var(--s5);
}
.home-head-fold > h2 { margin-right: auto; max-width: none; }
.home-head-side { display: flex; align-items: baseline; gap: var(--s2) var(--s6); flex-wrap: wrap; }
.home-head-side > p { margin: 0; color: var(--ink-2); font-size: var(--t-small); line-height: 22px; }
.home-film-lead { margin-bottom: clamp(var(--s8), 5vw, var(--s10)); }
.home-films { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s7) var(--s6); }
/* the second film is featured: it takes two columns and two rows beside the other four */
.home-film-second { grid-column: span 2; grid-row: span 2; }
.home-film { min-width: 0; }
.home-film-stage { overflow: hidden; background: var(--edition-indigo); }
.home-film-stage video { display: block; width: 100%; height: 100%; object-fit: contain; }
.home-film:has(:focus-visible) .home-film-stage { outline: 2px solid var(--focus); outline-offset: 4px; }

.home-film-link {
  display: flex; justify-content: space-between; align-items: start;
  gap: var(--s6); padding-top: var(--s5); text-decoration: none; color: var(--ink);
}
.home-film-link h3 {
  font-size: var(--t-title); font-weight: 550; letter-spacing: var(--ls-heading);
}
.home-film-what {
  display: block; margin-top: var(--s2); max-width: 44ch;
  color: var(--ink-2); font-size: var(--t-small); line-height: 1.6;
}
.home-link-arrow {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border: 1px solid var(--rule); border-radius: 50%;
  transition: color var(--d-hover) ease, background-color var(--d-hover) ease, border-color var(--d-hover) ease;
}
.home-link-arrow .arrow-glyph { width: 16px; height: 16px; margin-left: 0; }
.home-film-link:is(:hover, :focus-visible) .home-link-arrow {
  color: var(--accent-ink); background: var(--accent); border-color: var(--accent);
}

/* ══ the Archive strip ════════════════════════════════════════════
   A full-bleed contact sheet of forty featured pieces, drifting slowly.
   The rail clips; the page never does. Hover or a focused tile stops it,
   and under reduced motion it is a static row you can scroll by hand. */
.home-strip {
  padding-block: clamp(var(--s9), 6vw, var(--s12));
  background: var(--paper-2); border-block: 1px solid var(--rule-soft);
}
.home-strip-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s5) var(--s7); flex-wrap: wrap; margin-bottom: var(--s7);
}
.home-strip-count { margin: 0; font-family: var(--mono); font-size: var(--t-small); color: var(--ink-2); }

.strip-rail { display: flex; width: 100%; max-width: 100%; overflow: hidden; }
.strip-track {
  display: flex; flex: none; list-style: none; margin: 0;
  padding: 0 var(--s3) 0 0; gap: var(--s3);
}
.strip-tile { flex: none; width: clamp(128px, 13vw, 176px); }
.strip-tile > :is(a, span) {
  display: block; overflow: hidden; background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--r-lg);
}
.strip-tile img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
@media (hover: hover) and (pointer: fine) {
  .strip-tile > a:hover { border-color: var(--accent); }
}
.strip-tile > a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  /* Both tracks are identical and sit side by side, so translating each
     by exactly its own width — the trailing gap included — lands the
     second where the first began: one seamless cycle, 90 seconds. */
  .strip-track { animation: strip-drift 90s linear infinite; }
  .strip-rail:hover .strip-track,
  .strip-rail:focus-within .strip-track { animation-play-state: paused; }
}
@keyframes strip-drift { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .strip-rail { overflow-x: auto; }
  /* nothing drifts, so the second copy would only repeat itself */
  .strip-track[aria-hidden="true"] { display: none; }
}

/* ══ the design work: three doors ═════════════════════════════════ */
.home-design { padding-block: clamp(var(--s10), 7vw, var(--s13)); }
.home-cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s6); list-style: none; margin: 0; padding: 0;
}
.home-card { transition: border-color var(--d-hover) ease, box-shadow var(--d-hover) ease; }
.home-card > a {
  display: grid; grid-template-rows: auto 1fr; height: 100%;
  text-decoration: none; color: var(--ink);
}
.home-card-art {
  display: block; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--paper-2); border-bottom: 1px solid var(--rule);
}
.home-card-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-card-body { display: grid; align-content: start; gap: var(--s2); padding: var(--s6); }
.home-card-body strong {
  font-size: var(--t-title); font-weight: 550; letter-spacing: var(--ls-heading);
}
.home-card-line { color: var(--ink-2); font-size: var(--t-small); line-height: 1.6; }
.home-card-arrow { margin-top: var(--s3); color: var(--accent); }
.home-card-arrow .arrow-glyph { width: 16px; height: 16px; margin-left: 0; }
@media (hover: hover) and (pointer: fine) {
  .home-card:hover { border-color: var(--accent-line); box-shadow: var(--shadow-card); }
  .home-card:hover strong { color: var(--accent); }
}
.home-card:has(a:focus-visible) { border-color: var(--accent); }

/* All three design cards use authored 4:3 artwork with fixed dimensions.
   The approved type-atelier cover shares the image treatment above. */

/* ══ the close ════════════════════════════════════════════════════ */
/* No top padding of its own: the section above already ends on its own
   air, and the rule plus the block's padding-top is the separation. Two
   stacked paddings put 216px of nothing between the cards and the rule. */
.home-about { padding-block: 0 var(--s7); }
.home-about-in {
  display: grid; gap: var(--s6); max-width: 64ch;
  border-top: 1px solid var(--rule-soft); padding-top: var(--s9);
}
.home-about-in h2 {
  font-size: var(--t-section); font-weight: 550;
  line-height: 1.1; letter-spacing: var(--ls-display);
}
.home-about-in > p { margin: 0; color: var(--ink-2); font-size: var(--t-lede); line-height: var(--lh-prose); }
.home-about-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s6); }

/* ══ narrower ═════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .home-head { column-gap: var(--s7); }
  .home-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .home-films { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-film-second { grid-row: auto; }
}

@media (max-width: 720px) {
  .home-films { grid-template-columns: minmax(0, 1fr); gap: var(--s8); }
  .home-film-second { grid-column: auto; }
}

@media (max-width: 620px) {
  .home-head { grid-template-columns: minmax(0, 1fr); row-gap: var(--s4); }
  .home-head > :is(h2, p, .arrow) { grid-column: 1; grid-row: auto; }
  .home-cards { grid-template-columns: minmax(0, 1fr); }
  .home-film-link { gap: var(--s4); }
  .strip-tile { width: 132px; }
}

/* The three smaller films: a play label sized to their card, not to the lead. */
.home-films .film-play { padding: 12px; }
.home-films .film-play-label { min-height: 36px; padding: 7px 12px; font-size: 12px; gap: 9px; }