/* /websites round-2 option 1 — THE CASE AS THE PAGE.
   One case owns the screen at a time. Each chapter is a pinned stage holding one fixed canvas
   (1440x900 units on a landscape screen, 390x844 on a portrait one) that scales as a unit, the way
   the homepage rooms do, so the composition is the same on every screen of that shape.
   hub-1.js writes three numbers per chapter from the scroll — --g (the site grows to fill the
   screen), --r1 and --r2 (a panel rises over it) — and CSS does all the geometry with them.
   Nothing here paints a line: space, scale and the room colours separate things. */

.hub--1 { --room: #0e2b30; --acc: var(--sea); --n: 88; }
.hub--1 ul { list-style: none; }
.hub--1 .h1-dim { color: var(--dim); }
.hub--1 .h1-no { color: var(--acc); }

/* ── the chapter: a tall section, one sticky stage, the next chapter rising over it as a card ── */
.h1-ch { position: relative; height: var(--len); --g: 0; --r1: 0; --r2: 0; }
.h1-ch + .h1-ch { margin-top: -100vh; }
.h1-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--ink); }
.h1-cv { position: absolute; left: 50%; top: 50%; width: min(100vw, 160vh); aspect-ratio: 1440 / 900; transform: translate(-50%, -50%);
  --c: calc(min(100vw, 160vh) / 1440); }
.h1-cv > * { position: absolute; }

/* ── media: every box is its source's ratio; nothing is cropped ── */
.hub--1 video { display: block; width: 100%; height: 100%; background: var(--panel); }

/* ── OPENER: the site flush to the right edge under the nav, the title crossing its lower edge ──
   The site's box is always the WHOLE canvas (the screen's own ratio = the walk's ratio); --g only
   moves and scales it, from 1060u wide at (380, 100) to the largest true-ratio box that fits UNDER
   the nav, centred (the nav and the free visibility check stay on screen at every scroll position,
   so the client's own nav never sits under ours; the sides letterbox on the ink, nothing is cropped).
   --n is the nav's height in canvas units, written by hub-1.js (88 until then). */
.h1-site { left: 0; top: 0; width: 100%; height: 100%; z-index: 1; transform-origin: 0 0; will-change: transform;
  --s1: calc((900 - var(--n)) / 900);
  transform: translate(calc((380 + var(--g) * (1440 * (1 - var(--s1)) / 2 - 380)) * var(--c)), calc((100 + var(--g) * (var(--n) - 100)) * var(--c)))
    scale(calc(1060 / 1440 + var(--g) * (var(--s1) - 1060 / 1440))); }
.h1-site .h1-p { display: none; }

/* pointer-events: none like .h1-band: the column is a full-height transparent box, and on phones it
   lies over the whole site walk, which then read as covered and never played (no links inside). */
.h1-col { left: calc(40 * var(--c)); top: 0; width: calc(300 * var(--c)); height: 100%; z-index: 2;
  opacity: calc(1 - min(1, var(--g) * 3)); pointer-events: none; }
.h1-col > * { position: absolute; left: 0; }
.h1-col .h1-no { top: calc(134 * var(--c)); }
.h1-name { top: calc(160 * var(--c)); font-size: calc(58 * var(--c)); line-height: 1; color: var(--sea); white-space: nowrap;
  opacity: 0; transform: translateY(.3em); transition: opacity 1s var(--e-out) .6s, transform 1.2s var(--e-out) .6s; }
.go .h1-name { opacity: 1; transform: none; }
.h1-col .h1-place { top: calc(244 * var(--c)); color: var(--foam); white-space: nowrap; }
.h1-ch + .h1-ch .h1-col .h1-place { top: calc(162 * var(--c)); }
.h1-line { top: calc(478 * var(--c)); width: calc(296 * var(--c)); font-size: max(14px, calc(19 * var(--c))); line-height: 1.5; color: var(--dim); }

/* the title: one line across the whole measure; its letters rise from a clip on load and sink
   back into it as the site grows over the ink */
.h1-band { left: calc(40 * var(--c)); top: calc(632 * var(--c)); width: calc(1360 * var(--c)); z-index: 2;
  font-size: calc(262 * var(--c)); line-height: .8; white-space: nowrap; pointer-events: none; }
.h1-band--2 { top: calc(666 * var(--c)); font-size: calc(200 * var(--c)); }
.h1-band .ln { display: block; overflow: hidden; padding-bottom: .02em; }
.h1-band .t { display: inline-block; transform: translateY(calc(min(1, var(--g) * 2.6) * 112%)); }
.h1-band .ch, .h1-say .ch { transform: translateY(105%) rotate(6deg); transform-origin: 0 100%; transition: transform 1.2s var(--e-out); }
.go .h1-band .ch, .h1-pan.in .h1-say .ch { transform: none; }

/* ── PANELS: the room colour rises over the site as a card ── */
.h1-pan { position: absolute; inset: 0; z-index: 3; background: var(--room); will-change: transform;
  transform: translateY(calc((1 - var(--r1)) * 100%)); }
.h1-pan--2 { z-index: 4; --room: #2a1119; --acc: #f0a7b4; transform: translateY(calc((1 - var(--r2)) * 100%)); }
.h1-pan__k { left: calc(40 * var(--c)); top: calc(126 * var(--c)); }
.h1-pan__k .h1-no { margin-right: 1.4em; }
.h1-pan__see { right: calc(453 * var(--c)); top: calc(126 * var(--c)); color: var(--foam); transition: color .25s var(--e-ui); }
.h1-pan__see:hover { color: var(--acc); }

.h1-say { left: calc(40 * var(--c)); top: calc(250 * var(--c)); width: calc(947 * var(--c)); font-size: calc(186 * var(--c)); }
.h1-say__ln { display: block; line-height: .8; overflow: hidden; padding-bottom: .02em; white-space: nowrap; }
.h1-say__ln .t { display: inline-block; }
.h1-say em { display: block; margin-top: .45em; max-width: calc(760 * var(--c)); font-size: calc(54 * var(--c)); line-height: 1.08; color: var(--acc);
  opacity: 0; transform: translateY(.3em); transition: opacity 1s var(--e-out) .35s, transform 1.2s var(--e-out) .35s; }
.h1-pan.in .h1-say em { opacity: 1; transform: none; }

.h1-did { left: calc(40 * var(--c)); top: calc(760 * var(--c)); width: calc(947 * var(--c)); }
.h1-did ul { display: flex; flex-wrap: wrap; gap: 1em 2.4em; margin-top: 1.3em; color: var(--foam); }

.h1-other { margin: 0; }
.h1-other figcaption { margin-top: calc(12 * var(--c)); }
.h1-other--p { left: calc(1047 * var(--c)); top: calc(96 * var(--c)); width: calc(353 * var(--c)); }
.h1-other--p video { aspect-ratio: 780 / 1688; height: auto; }
.h1-other--d { display: none; }
.h1-other--d video { aspect-ratio: 1440 / 900; height: auto; }

/* the film held on the CHM site: the tall piece beside a column of three, 6u gutters like the wall.
   Heights: 770u total; the column is (770 - 12) / (1/2 + 1/2 + 408/960) = 531.9u wide. */
.h1-fill { left: calc(40 * var(--c)); top: calc(560 * var(--c)); width: calc(340 * var(--c)); font-size: calc(44 * var(--c)); line-height: 1.12; color: var(--acc); }
/* The studio's name is a link to its site (corpus 926): the light ink of the nav marks it, no rule under it. */
.h1-fill a { color: var(--foam); transition: color .25s var(--e-ui); } .h1-fill a:hover { color: var(--sea); }
.h1-held { left: calc(429 * var(--c)); top: calc(100 * var(--c)); height: calc(770 * var(--c)); display: flex; gap: calc(6 * var(--c)); }
.h1-held__col { width: calc(531.9 * var(--c)); display: flex; flex-direction: column; gap: calc(6 * var(--c)); }
.h1-tile { display: block; position: relative; aspect-ratio: var(--r); }
.h1-tile--a { height: 100%; }
.h1-tile--w { width: 100%; }
.h1-tile video { transition: transform .6s var(--e-out); }
.h1-held .h1-tile { overflow: hidden; }
.h1-tile:hover video { transform: scale(1.04); }

/* ── Q&A (shared component, collapsed) ── */
.h1-qa { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); padding: calc(130 * var(--u)) var(--m) 0; }
.h1-qa__h { grid-column: 1 / span 3; color: var(--dim); padding-top: 1.6em; }
.h1-qa__list { grid-column: 5 / span 8; counter-reset: q; }
.h1-qa__i { counter-increment: q; }
.h1-qa__q { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: .9em; padding: calc(20 * var(--u)) 0;
  font-size: max(16px, calc(20 * var(--u))); line-height: 1.35; letter-spacing: -.01em; transition: color .25s var(--e-ui); }
.h1-qa__q::-webkit-details-marker { display: none; }
/* each question carries its number in the display face (generated, so it is not counted as copy);
   it turns sea when that answer is open */
.h1-qa__q::before { content: counter(q, decimal-leading-zero); flex: none; min-width: 1.9em; font-family: Archivo; font-variation-settings: 'wdth' 62; font-weight: 800;
  font-size: 1.5em; line-height: .8; color: var(--dim); transition: color .25s var(--e-ui); }
.h1-qa__i[open] .h1-qa__q::before, .h1-qa__q:hover::before { color: var(--sea); }
.h1-qa__a { padding-left: calc(1.9 * 1.5 * max(16px, calc(20 * var(--u))) + .9 * max(16px, calc(20 * var(--u)))); }
.h1-qa__q:hover { color: var(--sea); }
.h1-qa__a { max-width: calc(820 * var(--u)); padding-bottom: calc(26 * var(--u)); font-size: max(15px, calc(19 * var(--u))); line-height: 1.5; color: var(--dim); }

/* ── THE CLOSE: the funnel, set like the homepage statement ── */
.h1-close { padding: calc(150 * var(--u)) var(--m) calc(130 * var(--u)); }
.h1-close > .lbl { margin-bottom: calc(30 * var(--u)); }
.h1-talk { display: inline-block; }
/* "Explore my options →" (voice a, corpus 875) is 8.8 em long where the old two-word close was 4: one line that
   fills the measure at 1440 (1302 of 1360 px) and scales with the screen, so phones never re-flow it. */
.h1-talk .disp { display: block; font-size: calc(148 * var(--u)); line-height: .8; white-space: nowrap; transition: color .3s var(--e-ui); }
.h1-talk .wrap { display: inline-block; overflow: hidden; padding-bottom: .02em; vertical-align: top; }
.h1-talk em { display: block; margin-top: .35em; font-size: calc(67 * var(--u)); color: var(--sea); }
.h1-talk:hover .disp { color: var(--sea); }

/* ── PORTRAIT SCREENS (phones): the same stage on a 390x844 canvas — exactly the phone walk's
   ratio, so here the PHONE walk is the site that fills the screen, and the panel carries the
   desktop walk. The three text blocks that sat in the 320u column sit under the title instead:
   scaled into an 84u column they would drop under 12px. ── */
@media (max-aspect-ratio: 1/1) {
  .h1-stage { height: 100svh; }
  .h1-cv { width: min(100vw, calc(100svh * 390 / 844)); aspect-ratio: 390 / 844; --c: calc(min(100vw, calc(100svh * 390 / 844)) / 390); }
  .hub--1 { --n: 60; }
  .h1-site { --s1: calc((844 - var(--n)) / 844);
    transform: translate(calc((100 + var(--g) * (390 * (1 - var(--s1)) / 2 - 100)) * var(--c)), calc((62 + var(--g) * (var(--n) - 62)) * var(--c)))
      scale(calc(290 / 390 + var(--g) * (var(--s1) - 290 / 390))); }
  .h1-site .h1-d { display: none; } .h1-site .h1-p { display: block; }
  .h1-col { left: calc(16 * var(--c)); width: calc(358 * var(--c)); }
  .h1-col .h1-no { top: calc(74 * var(--c)); }
  .h1-name { top: calc(716 * var(--c)); font-size: calc(30 * var(--c)); }
  .h1-col .h1-place { top: calc(752 * var(--c)); }
  .h1-ch + .h1-ch .h1-col .h1-place { top: calc(724 * var(--c)); }
  .h1-line { top: calc(772 * var(--c)); width: calc(358 * var(--c)); font-size: max(12px, calc(14 * var(--c))); line-height: 1.4; }
  .h1-band { left: calc(16 * var(--c)); top: calc(652 * var(--c)); width: calc(358 * var(--c)); font-size: calc(68 * var(--c)); }
  .h1-band--2 { top: calc(662 * var(--c)); font-size: calc(52 * var(--c)); }

  .h1-pan__k { left: calc(16 * var(--c)); top: calc(76 * var(--c)); }
  .h1-pan__see { right: calc(16 * var(--c)); top: calc(76 * var(--c)); }
  .h1-other--p { display: none; }
  .h1-other--d { display: block; left: 0; top: calc(104 * var(--c)); width: calc(390 * var(--c)); }
  .h1-other--d figcaption { margin-left: calc(16 * var(--c)); }
  .h1-say { left: calc(16 * var(--c)); top: calc(410 * var(--c)); width: calc(358 * var(--c)); font-size: calc(72 * var(--c)); }
  .h1-say em { max-width: none; font-size: max(16px, calc(24 * var(--c))); }
  .h1-did { left: calc(16 * var(--c)); top: calc(640 * var(--c)); width: calc(358 * var(--c)); }
  .h1-did ul { gap: .9em 1.6em; margin-top: 1em; }

  .h1-fill { left: calc(16 * var(--c)); top: calc(112 * var(--c)); width: calc(340 * var(--c)); font-size: max(18px, calc(34 * var(--c))); }
  /* the held film is the desktop arrangement scaled to the 358u measure (x 358/971) */
  .h1-held { left: calc(16 * var(--c)); top: calc(420 * var(--c)); height: calc(283.9 * var(--c)); gap: calc(3 * var(--c)); }
  .h1-held__col { width: calc(195 * var(--c)); gap: calc(3 * var(--c)); }
}
@media (max-width: 700px) {
  .h1-qa { grid-template-columns: 1fr; row-gap: 10px; padding-top: 80px; }
  .h1-qa__h, .h1-qa__list { grid-column: 1; }
  .h1-qa__q { padding: 16px 0; } .h1-qa__a { max-width: none; }
  .h1-close { padding: 90px var(--m) 80px; }
  .h1-talk em { font-size: max(18px, 6.4vw); }
}

/* Display type waits out of sight until the fonts are in (hub-1.js adds `go`), as on the homepage,
   so the swap from the fallback font is never seen and never counted as the page jumping. */
@media (prefers-reduced-motion: no-preference) {
  body:not(.go) .hub--1 :is(.h1-band, .h1-say) { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .h1-band .ch, .h1-say .ch, .h1-talk .w { transform: none !important; }
  .h1-name, .h1-say em { opacity: 1; transform: none; }
  .h1-band .t { transform: none; } .h1-band { opacity: calc(1 - min(1, var(--g) * 3)); }
}

/* The shared footer's wordmark is refitted by site.js once the fonts are in; behind <main> it was
   still counted as the page jumping (CLS 0.07 -> 0.025). Held out of sight until `go`. */
body:not(.go) main.hub--1 ~ .foot .foot__word { visibility: hidden; }

/* ── PHONE OPENER: THE TITLE FIRST, AS A BAND UNDER THE NAV; the walk below it; the text under the walk
   (Peter corpus 894 "way worse on mobile" -> 895 "p2 is the best", 2026-10-02; was ?ph=2 at 8ffee81c).
   Every upright screen, portrait iPads included (2026-10-05: fenced to phones, iPads kept the older stack where
   the walk box sat ON the title; the canvas is the same 390x844 units, so the iPad gets the phone's composition,
   scaled, centred on the ink); desktop and landscape untouched.
   The walk is the same right-flush box scaled at its own 390:844 ratio (nothing cropped). The title sits 10u
   under the nav (--n, the nav's height in canvas units, written by hub-1.js), the box 8u under the title; the
   text ends 2u above the screen's foot (at 390x844 /search, the tightest page, that leaves the box 598.8u =
   50.3 % of the first screen, brd_hub_check "work"). No letter of the title crosses the walk, so OLLIN's light
   footer strip never sits behind it.
   Units: --bt the box's top, --bh its height, --tt the title's top, --dy how far the text under the title
   moves. hub-1.js measures --t0 (the text's first top), --tx (its height: 2 or 3 lines, by the 12px floor) and
   --G (the title's line height) from the real layout; the values here are what it measures at 390x844 and only
   hold until it runs. --b0 is the title's own top (652u; CHM's name 662u). ── */
@media (max-aspect-ratio: 1/1) {
  .h1-open { --b0: 652; --t0: 716; --tx: 95.2; --G: 56;
    --tt: calc(var(--n) + 10); --bt: calc(var(--tt) + var(--G) + 8);
    --bh: min(627.6, 844 - 2 - var(--tx) - 8 - var(--bt));
    --dy: calc(var(--bt) + var(--bh) + 8 - var(--t0)); }
  :is(.hub--s, .hub--cv) .h1-open { --t0: 714; --tx: 107.2; }
  .h1-ch + .h1-ch .h1-open { --b0: 662; --t0: 724; --tx: 10; --G: 43; }
  /* ON SCROLL the opener holds still (Gemini video review 2026-10-02 of a human-pace Safari scroll: the walk
     growing to the nav's foot touched the nav, and the title sinking past OLLIN's light strip read as letters
     lost): the walk keeps its size and its gap under the nav, the title and the text keep their place and
     opacity, and the room's card rises over all of it. Until the fonts are in and hub-1.js has measured (`go`)
     the walk, the text and the title wait out of sight, so the measured placement is the first one painted. */
  .h1-open .h1-band .t { transform: none; }
  .h1-open :is(.h1-col, .h1-band) { opacity: 1; }
  body:not(.go) .h1-open :is(.h1-site, .h1-col, .h1-band) { visibility: hidden; }
  .h1-open .h1-site { transform: translate(calc((390 - 390 * var(--bh) / 844) * var(--c)), calc(var(--bt) * var(--c))) scale(calc(var(--bh) / 844)); }
  .h1-open .h1-col > .h1-no { translate: 0 calc((var(--bt) - 62) * var(--c)); }
  .h1-open .h1-col > :not(.h1-no) { translate: 0 calc(var(--dy) * var(--c)); }
  .h1-open .h1-band { translate: 0 calc((var(--tt) - var(--b0)) * var(--c)); }
}