/* ══════════════════════════════════════════════════════════════════
   os.css — SCHĪR OS chrome + the book (Plan 3A-2 Task 4).
   Every value below is LIFTED from scripts/research/gate1_canvas_build.mjs
   (the Gate-1 number source — the approved round-3 boards) and tokens.css v4.
   Do not restyle; where a value had to become fluid for real viewports
   (the artboards were fixed 1440/390) the change is noted inline.

   Model: html.js = the fixed one-window rendition (nothing scrolls on /);
   no .js = the GROW rendition (the window grows, the page scrolls — the
   no-JS truth, §0.2 #19/#26/#23). Loaded only on `osShell: true` routes —
   the old front end never sees this file (Phase 4 migrates the rest).
   ══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto}
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{height:100%}
/* flow-root: overflow:clip (below) does NOT establish a BFC the way hidden
   did — without it child margins (the grow rendition's .win headroom band)
   collapse through body. flow-root contains margins in the grow/no-JS model
   with no scroll-container semantics; html.js overrides to the flex column. */
body.os{position:relative;min-height:100vh;display:flow-root;background:#dbe6ee;color:var(--ink);font-family:var(--system);font-size:20px;line-height:1}
/* overflow:CLIP, not hidden (3B Task 9 fix): a hidden-overflow body is still
   programmatically scrollable, and the browser's scroll-to-fragment step
   (which re-fires at load completion, AFTER the engine's reset) scrolled it
   85px on /#the-idea deep links — the menubar left the frame. A clip
   container cannot be scrolled at all; the below-floor grow block overrides
   back to auto. */
html.js{overflow:clip}
/* min-height:0 (92.5.1 review CR-01): the base rule's min-height:100vh
   otherwise wins the used-height resolution (max(height,min-height)) on real
   mobile where 100vh = the LARGE viewport > 100dvh — the body lays out taller
   than the visible viewport and the dock lands below the fold, unreachable
   under overflow:clip. Chromium emulation has vh == dvh, so the rig cannot
   see this; the reset makes the used height exactly the declared dvh/vh
   fallback chain. The grow block below restores 100vh as its page-minimum. */
html.js body.os{display:flex;flex-direction:column;min-height:0;height:100vh;height:100dvh;overflow:clip} /* D-01: the shell column — menubar / stage / dock */
/* mobile-first-load-glitch (2026-09-01): iOS Safari can resolve the dvh pair
   above against a stale toolbar state at FIRST PAINT (WebKit 242758/261185
   family) — the shell lays out against a viewport Safari isn't actually
   showing: menubar behind the URL bar, canvas band below the dock, healed
   only on first tap (the clipped root never scrolls, so Safari's normal
   settle-on-scroll never runs). plate.js measures the real layout viewport
   on TOUCH devices and pins it here as --shell-vvh px, re-measured on every
   settle signal (resize / visualViewport resize / pageshow / load+1s).
   Where JS hasn't set the var — every desktop; the sync is touch-gated —
   the fallback is the unchanged 100dvh, so this rule is inert outside the
   bug's habitat. @supports guard: an engine with custom properties but no
   dvh would cascade this var() decl over the vh fallback above and then
   compute height to AUTO — guarded, such engines never see the rule.
   Placement is load-bearing: this sits BEFORE the short-viewport grow
   stand-down (height:auto, same specificity, later in file) so grow still
   wins below the floor. */
@supports (height:100dvh){
  html.js body.os{height:var(--shell-vvh,100dvh)}
}
a{color:var(--alpine);text-decoration:none}
a:hover{color:var(--rust)}
.skip-link{position:absolute;left:-9999px;top:0;z-index:1100;background:var(--panel);border:var(--line);padding:8px 12px;font-family:var(--system-sm);font-size:15px;letter-spacing:0}
.skip-link:focus{left:8px;top:8px}
.sr-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* screen-reader-only content (Phase 4 Task 5 fix): the migrated documents carry
   sr-only headings (e.g. /beverages "Why this drink") that the retired interior
   stylesheet used to clip — os.css never shipped the utility, so the heading rendered
   visibly. Same technique as .sr-live. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── type (build-script .sys/.sm/.doc/.wm, verbatim) ─────────────────────── */
.sys{font-family:var(--system);font-size:20px;letter-spacing:1px;line-height:1}
.sm{font-family:var(--system-sm);font-size:15px;letter-spacing:0;line-height:1}
.doc{font-family:var(--display);font-variation-settings:"SOFT" 100,"WONK" 1;font-weight:400;line-height:1}
.wm{font-family:var(--display);font-variation-settings:"SOFT" 100,"WONK" 1;font-weight:400;text-transform:uppercase;letter-spacing:-1px;line-height:1;display:inline-block;white-space:nowrap}
.wm-i{position:relative;display:inline-block}
/* the macron (#35): em-relative bar; over artwork it carries the glyphs' bevel */
.wm-macron{position:absolute;left:50%;top:-0.06em;transform:translateX(-50%);width:.6em;height:.06em;background:currentColor}
.art .copy .wm .wm-macron{box-shadow:2px 2px 0 var(--ink);top:-0.02em} /* display-size nudge — comp hugs the I's apex ~2-3px (audit item 8) */

/* ── menu bar (32px, three balanced zones; dock owns navigation) ─────────── */
.menubar{flex:none;height:32px;background:#f5eee1;border-bottom:var(--line);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;z-index:var(--z-chrome);position:relative} /* Phase 93: structural centering, independent of side-cell width */
.menubar .cell{display:flex;align-items:center;gap:8px;padding:0 var(--cell-compact-x);white-space:nowrap}
.menubar .cell.mark{justify-self:start;background:var(--ink);color:var(--panel);padding:0 8px;border-right:var(--line)}
.menubar .cell.mark .wm{display:none} /* Phase 93: preserve pinned horn SVG bytes while the public wordmark moves to the independent center cell */
/* the mark cell is a real CONTROL now (D-11, 92.5.3-03 Task 3) — an <a> that
   plate.js upgrades into the About dialog's opener. It keeps the .cell
   anatomy exactly; these three lines only undo what `a{}` would otherwise do
   to it (the alpine link colour and the a:hover recolor). */
.menubar a.cell.mark{color:var(--panel);cursor:pointer}
.menubar a.cell.mark:hover{color:var(--paper)}
.menubar a.cell.mark:focus-visible{outline:2px solid var(--panel);outline-offset:-3px}
/* ≥44px effective hit on coarse pointers (the --hit floor). The DIRECTION rule
   is 92.5.2-01's, applied to the top-seated menubar: upward from a bar at the
   top of the viewport lands outside the clip and is unhittable, so this one
   grows DOWNWARD, ~12px past the bar and over the top of the plate window.
   That band is real, not hypothetical, which is why plate_sweep asserts with
   elementFromPoint what it actually covers, where it stops, and that no
   control of the window below has its centre inside it.
   z-index lifts the hit plane; --z-chrome (100) already sits above --z-window
   (10), so the overhang wins the hit test over the window it hangs across.
   THE NUMBER IS 13, NOT 12, AND THAT IS MEASURED. `.menubar{height:32px}` is
   border-box and the bar carries a 1px bottom border, so the CELL the visitor
   actually taps is 31px tall, not 32 — 31+12 gives a 43px target and misses
   the floor by one pixel. The statusbar glyph extensions above are the same
   arithmetic done right (24px bar − 2 borders = 22px cell, +22 = 44). */
@media (pointer:coarse){
  .menubar a.cell.mark{position:relative;z-index:2}
  .menubar a.cell.mark::after{content:"";position:absolute;top:0;bottom:-13px;left:0;right:0}
}
/* Phase 93 three-zone shell: horn/Home left, public identity centered, Denver
   time right. The center column is auto-sized between equal flexible columns,
   so the wordmark remains geometrically centered regardless of side widths. */
.menubar .menu-wordmark{justify-self:center;font-size:20px;border-left:var(--line);border-right:var(--line)}
/* the centered wordmark is a second Home link (apparel funnel fix, 2026-08-31).
   Ink-on-paper cell: these lines only undo the global a{} alpine colour and
   a:hover rust recolor (the div had no hover state — same look), plus the
   menubar's own inset-outline focus pattern, ink where the mark's is panel. */
.menubar a.cell.menu-wordmark{color:var(--ink)}
.menubar a.cell.menu-wordmark:hover{color:var(--ink)}
.menubar a.cell.menu-wordmark:focus-visible{outline:2px solid var(--ink);outline-offset:-3px}
.menubar .cell.r{justify-self:end;border-left:var(--line)}

/* ── the stage + the window (D-01): the window FILLS the stage minus the
      --ring gutter. The grow rendition keeps the ring as its page gutter. ── */
.stage{padding:var(--ring)}
html.js .stage{flex:1;min-height:0;display:flex}
.win{position:relative;width:auto;margin:0;background:#fffaf0;border:1px solid #2b261f;box-shadow:8px 8px 0 rgba(24,21,18,.92);z-index:var(--z-window)}
html.js .win{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
html:not(.js) .win{margin-bottom:120px} /* grow rendition bottom headroom (92.5.1-02): the dock is a static in-flow block at document end now, so the old 192px overlay-dock clearance is oversized — 120px is a breathing band before the dock, a feel value (ruled range 96–144) */
.titlebar{flex:none;height:28px;border-bottom:var(--line);display:flex;align-items:center;padding:0 6px;gap:6px;background:#f5eee1;color:var(--ink)}
.glyph{width:16px;height:16px;border:var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink)}
.titlebar .wm{margin:auto;font-size:17px}
.titlebar>.wm{opacity:0}
.titlebar .wm .wm-macron{width:8px;height:1px;top:0}
.win-main{margin-right:16px} /* the 16px scrollbar column */
html.js .win-main{flex:1;min-height:0;display:flex;flex-direction:column}
.viewport{position:relative;overflow-y:auto;overflow-x:hidden;scrollbar-width:none} /* W-01: scroll authority lives here — the viewport pane scrolls, the root never does (P4-D2). D-02: hidden scrollbar (decoration thumb drives the visual) */
.viewport::-webkit-scrollbar{display:none} /* D-02: webkit mirror of scrollbar-width:none */
html.js .viewport{flex:1;min-height:0}
.book{position:relative}
/* W-01/W-01a (92.6.2): the book is a VERTICAL COLUMN. Plates stack and the
   viewport pane scrolls. D-12's horizontal row + translateX stepping is
   SUPERSEDED — no transform, no will-change, no transition. */
html.js .book{display:block}
/* 92.6.4 (D-01): continuous scroll — sections flow at natural height.
   Sections that need flex column layout have their own specific rules. */
html.js [data-screen]{display:block}
html.js .plate-i .grid{flex:1;min-height:0} /* W-01: inner scroller retired — viewport scrolls */

/* ── the cover art ───────────────────────────────────────────────────────── */
.art{position:relative;overflow:hidden;background:var(--teal-deep)}
.art picture{display:contents}
.art img{display:block;width:100%;height:100%;object-fit:cover}
html.js .cover-art{max-height:70vh;overflow:hidden;min-height:120px} /* 92.6.4 (D-01): cover constrained ~60-70vh so THE IDEA peeks below the fold */
/* D-14 (92.5.3) aspect-ratio audit, recorded so the absence is a DECISION and
   not an oversight: every <img> under a [data-screen] already ships width and
   height attributes, from which the UA derives `aspect-ratio: attr(w)/attr(h)`
   — the box is reserved before a byte of image arrives. The cover cannot pop
   either: its img is width:100%/height:100%/object-fit:cover inside a box the
   flex column sizes. An explicit `aspect-ratio` on .cover-art would NOT be
   inert here — with flex-basis:auto it would change the content-based base
   size and redistribute the pane, which is the D-01 geometry 92.5.1 exists to
   protect. Measured, not assumed: the CLS gate reads under 0.01 on both books
   without it. */
.art .copy{position:absolute;left:32px;bottom:28px;color:var(--cream);text-shadow:var(--bevel-text)}
.art .copy .wm{font-size:72px}
.art .copy .sub{font-family:var(--display);font-variation-settings:"SOFT" 100,"WONK" 1;font-size:22px;line-height:1;margin:10px 0 16px}
.art .copy .btn{text-shadow:none}

/* ── buttons (32px; .tall 44px — both heights kept, GATE-1 #11) ──────────── */
.btn{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border:var(--line);background:var(--panel);color:var(--ink);font-family:var(--system);font-size:20px;letter-spacing:0;line-height:1;box-shadow:var(--bevel);white-space:nowrap;cursor:pointer}
.btn.primary{background:var(--alpine);color:var(--cream)}
.btn.cream{background:var(--cream);color:var(--ink)}
.btn.cta{background:var(--cta);color:var(--panel)} /* 92.6.4 (D-24): Sumac Vermilion CTA */
.btn.cta:hover{background:var(--cta-hover);color:var(--panel)}
.btn.tall{height:44px;padding:0 16px}

/* ── status bar (24px; nav glyphs 23px — REAL step buttons, audit item 2) ── */
.statusbar{height:24px;border-top:var(--line);border-bottom:var(--line);display:flex;align-items:stretch;background:#f5eee1;color:var(--ink)}
.statusbar .nav{display:flex}
.statusbar .nav .glyph{width:23px;height:100%;border:0;border-right:var(--line);background:var(--panel);padding:0;cursor:pointer}
html:not(.js) .statusbar .nav{display:none} /* as buttons they'd be dead no-JS no-ops */
/* ≥44px effective hit on coarse pointers (audit item 2, AMENDED): a pure
   ::after extension cannot work here — the prev glyph sits flush against the
   viewport's overflow clip (left extension unhittable) and the statusbar
   bottom is the clip edge (no room below). So under coarse pointers the two
   cells become REAL 44px-wide touch targets (23px pixel SVG stays centered,
   anatomy unchanged) and an ::after grows each 22px over the neighbouring
   content (22px content height + 22 = 44). z-index lifts the hit plane above
   the art. Direction follows the bar's seat (92.5.2-01): the cover's bar sits
   at the BOTTOM of its stop, so its extension grows upward; a `.caption` bar
   sits at the TOP (page sections, back matter), where upward is outside the
   viewport clip and unhittable — those grow downward instead. */
@media (pointer:coarse){
  .statusbar .nav .glyph{width:44px;position:relative;z-index:2}
  .statusbar .nav .glyph::after{content:"";position:absolute;top:-22px;bottom:0;left:0;right:0}
  .statusbar.caption .nav .glyph::after{top:0;bottom:-22px}
}
.statusbar .file{padding:0 10px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center}
.statusbar .size{padding:0 10px;border-left:var(--line);display:flex;align-items:center;white-space:nowrap}
.statusbar.caption{border-top:0}

/* ── section-header bars + panels (92.6.3, D-03) ──────────────────────────────
   Poolsuite-derived visual vocabulary: dark --ink bar (centered uppercase
   monospace label) + cream --panel content area below. The border IS the
   design — no shadows, no gradients, no rounded corners.
   Source: .planning/research/poolsuite-design-analysis.md (card anatomy). */
.sec-bar{background:var(--ink);color:var(--panel);text-align:center;padding:8px 12px;border:var(--line);font-family:var(--system-sm);font-size:15px;letter-spacing:0;line-height:1;text-transform:uppercase}
.sec-panel{background:var(--panel);border:var(--line);border-top:0;padding:var(--s-2)}
@media (max-height:750px) and (max-width:500px){.sec-bar-tablet{display:none}}

/* ── the pager RETIRED (92.6.4, D-02) + the INDEX cell (92.5.2-01, D-13) ─────
      Pager (Roman readout + tick strip) RETIRED — components/pager.njk now
      renders nothing. CSS rules removed. The INDEX cell remains for /apparel. ── */
.statusbar .idx{padding:0 10px;border:0;border-left:var(--line);display:flex;align-items:center;gap:8px;white-space:nowrap;background:var(--panel);color:var(--ink);font-family:var(--system-sm);font-size:15px;letter-spacing:0;line-height:1;cursor:pointer}
[data-index-toggle].is-open svg{transform:scaleY(-1)} /* INDEX ⌄ → ⌃ while open */
/* ≥44px effective hit for the INDEX cell on coarse pointers — the `.nav` glyph
   mechanism, same direction rule (a caption bar grows downward). */
@media (pointer:coarse){
  .statusbar .idx{position:relative;z-index:2}
  .statusbar .idx::after{content:"";position:absolute;top:-22px;bottom:0;left:0;right:0}
  .statusbar.caption .idx::after{top:0;bottom:-22px}
}
/* no enabled-looking no-op controls (audit item 3): dimmed + inert-to-clicks
   via plate.js; .45 mirrors the dither texture opacity */
.statusbar .nav .glyph[aria-disabled="true"],
.tray .slot[aria-disabled="true"]{opacity:.45;cursor:default}

/* ── scrollbar column (decoration, aria-hidden) ──────────────────────────── */
.scroll{position:absolute;top:29px;right:0;bottom:0;width:16px;border-left:var(--line);background:var(--panel);display:flex;flex-direction:column}
.scroll .a{height:16px;border-bottom:var(--line);display:flex;align-items:center;justify-content:center}
.scroll .a.b{border-bottom:0;border-top:var(--line);margin-top:auto}
.scroll .track{flex:1;background:repeating-conic-gradient(var(--ink-40) 0 25%,transparent 0 50%) 0 0/4px 4px}
.scroll .thumb{position:absolute;left:0;right:0;background:var(--panel);border-top:var(--line);border-bottom:var(--line)}
html:not(.js) .scroll .thumb{top:17px!important;bottom:17px!important;height:auto!important} /* grow rendition: full thumb */
/* ── ONE scroll authority (D-02, Pitfall 8): every NATIVE bar inside the
      window is hidden — the dithered .scroll proxy above is the ONLY visible
      bar on desktop; the phone model hides the proxy too, so touch scrolls
      the pane bare. The shipped .tray/.dock .strip pair, applied to every
      vertical pane. ──────────────────────────────────────────────────────── */
html.js .docbody,html.js .plate-i .grid,html.js .idea,html.js .sups,html.js .colophon,html.js .tray-band,html.js .story-i,html.js .story-iii,html.js .sup-body{scrollbar-width:none}
html.js .docbody::-webkit-scrollbar,html.js .plate-i .grid::-webkit-scrollbar,html.js .idea::-webkit-scrollbar,html.js .sups::-webkit-scrollbar,html.js .colophon::-webkit-scrollbar,html.js .tray-band::-webkit-scrollbar,html.js .story-i::-webkit-scrollbar,html.js .story-iii::-webkit-scrollbar,html.js .sup-body::-webkit-scrollbar{display:none}

/* ── dock (Gate 1 Light Registration; seven 96×72 real-route cells) ──────── */
.dock{flex:none;align-self:center;display:flex;background:#f5eee1;color:var(--ink);border:1px solid #2b261f;border-bottom:0;box-shadow:6px 6px 0 rgba(24,21,18,.92);z-index:var(--z-chrome)}
.dock .strip{display:grid;grid-template-columns:repeat(7,96px);width:672px;max-width:100%;overflow:visible;background:#f5eee1}
.dock .item{position:relative;width:96px;min-width:96px;height:72px;min-height:72px;border:0;border-right:1px solid #2b261f;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:#f5eee1;color:var(--ink);box-shadow:none;transform:none;filter:none;transition:none}
.dock .item:last-child{border-right:0}
.dock .item .ico{width:32px;height:32px;padding:0;border:0;display:flex;align-items:center;justify-content:center;background:#f5eee1;color:var(--ink);box-shadow:none;filter:none;transform:none}
.dock .ico img{display:block;width:32px;height:32px;max-width:none;max-height:none;object-fit:contain;filter:none;transform:none;animation:none;transition:none}
.dock .item:hover,.dock .item:focus,.dock .item:focus-visible,.dock .item[aria-current="page"]{background:#fffaf0;color:var(--ink);filter:none}
.dock .item:hover .ico img,.dock .item:focus .ico img,.dock .item:focus-visible .ico img,.dock .item[aria-current="page"] .ico img{filter:none;transform:none}
.dock .item[aria-current="page"]{box-shadow:inset 1px 1px 0 rgba(43,38,31,.58),inset -1px -1px 0 rgba(255,250,240,.95)}
.dock .item[aria-current="page"] .ico{transform:translateY(1px)}
.dock .item[aria-current="page"]::after{content:"";position:absolute;left:9px;right:9px;bottom:2px;height:2px;background:var(--alpine);border-top:1px solid #2b261f}
.dock .item[aria-current="page"]>span:last-child{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.dock .item:focus-visible{outline:2px solid #2b261f;outline-offset:-3px}

/* ── book sections ───────────────────────────────────────────────────────── */
.plate{background:var(--panel)}
.plate-i .grid{display:grid;grid-template-columns:430px minmax(0,1fr);gap:0;border-bottom:var(--line)}
.well{position:relative;width:430px;height:538px;border-right:var(--line);background:#fff;overflow:hidden}
.well img{display:block;width:100%;height:100%;object-fit:cover}
.well .flip-img{position:absolute;inset:0;opacity:0;transition:opacity var(--t-flip) var(--ease)}
.well.is-flipped .flip-img{opacity:1}
@media (hover:hover) and (pointer:fine){ /* hover preview only where hover exists (audit item 4) */
  .well:hover .flip-img{opacity:1}
}
.well .flip-btn{position:absolute;right:8px;top:8px;width:44px;height:44px;border:var(--line);background:var(--panel);color:var(--ink);font-family:var(--system-sm);font-size:15px;letter-spacing:0;box-shadow:var(--bevel);display:flex;align-items:center;justify-content:center;cursor:pointer}
html:not(.js) .flip-btn{display:none} /* a dead control without the JS toggle (audit item 8) */
.plate-i .col{padding:24px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.plate-i .col h2{font-size:40px;line-height:1;letter-spacing:0}
.plate-i .col .price{color:var(--alpine)}
.plate-i .col hr{width:100%;border:0;border-top:var(--line);margin:8px 0}

/* ── INDEX tray (working default: stepped snap; transient, no hash) ──────── */
/* composition (audit item 6): flex column; the two auto margins split the free
   band height so the caption+strip group centers between band top and the
   footer, which sits at the bottom */
.tray-band{background:var(--panel);display:flex;flex-direction:column}
html.js .tray-band{min-height:100%} /* fill the pane when open (D-01: fluid, was the stepped viewport) */
.tray-band .statusbar.caption{margin-top:auto;border-top:var(--line)} /* floats mid-band now — restore its top rule */
.tray-arrows{display:flex;gap:12px}
.tray-arrows button{border:0;background:none;padding:0;color:var(--ink);cursor:pointer;display:flex;align-items:center}
.tray-foot{margin-top:auto;border-bottom:0}
.tray-foot-bar{display:block;width:96px;height:10px;background:repeating-linear-gradient(90deg,var(--alpine) 0 6px,var(--panel) 6px 8px)}
.tray{display:flex;overflow-x:auto;border-bottom:var(--line);scroll-snap-type:x mandatory;scrollbar-width:none}
.tray::-webkit-scrollbar{display:none}
.tray .slot{flex:none;width:188px;border:0;border-right:var(--line);scroll-snap-align:start;background:var(--panel);padding:0;color:var(--ink);text-align:left;cursor:pointer}
.tray .slot:hover{color:var(--ink)} /* slots are anchors now — guard the a:hover recolor */
.tray .slot .img{display:block;width:188px;height:225px;overflow:hidden;background:#fff;border-bottom:var(--line)}
.tray .slot .img img{display:block;width:100%;height:100%;object-fit:cover}
.tray .slot .lab{padding:8px 10px;display:flex;flex-direction:column;gap:6px;white-space:nowrap;overflow:hidden}
.tray .slot .lab .p{color:var(--alpine)}
.tray .slot.lit .img{outline:2px solid var(--alpine);outline-offset:-2px}

/* ── THE IDEA — paper document (build-script .idea, verbatim) ────────────── */
.idea{background:var(--paper)}
.idea picture{display:contents}
.idea img{display:block;width:100%;height:auto}
.idea .text{padding:24px;display:flex;flex-direction:column;gap:16px;align-items:flex-start;border-bottom:var(--line)}
.idea .q{font-size:32px;line-height:36px;max-width:780px;text-wrap:pretty}

/* ── THE SUPPLEMENTS — alpine surface (build-script .sups, verbatim) ─────── */
.sups{background:var(--alpine);color:var(--cream)}
.sups .grid{display:grid;grid-template-columns:431px minmax(0,1fr);border-bottom:var(--line)}
.sups .pic{border-right:var(--line)}
.sups .pic picture{display:contents}
.sups .pic img{display:block;width:100%;height:auto}
.sups .col{padding:24px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.sups h2{font-size:40px;line-height:1;color:var(--cream)}
:is(.sups,.os-kl) .lead{letter-spacing:0} /* P4-D3 widening — the interior waitlist lead shares the treatment */
.sups .note{color:var(--cream)} /* FULL cream — cream-80 on alpine fails AA at 15px (ratified) */

/* Klaviyo include reskin — OVERRIDES ONLY (the include itself is never
   edited; its inline styles force !important here). Board contract: radius 0,
   44px controls, cream input, cream button/ink text, rust hover; tokens v4
   already aliases the include's --white/--gold to cream.
   Phase 4 (P4-D3): each selector widened .sups → :is(.sups,.os-kl) so the
   interior windows' waitlist scope shares the reskin — :is() keeps class
   specificity, the .sups computed values are untouched. .os-kl IS the
   alpine waitlist band (surface rules in the document-windows section), so
   every cream value below reads correctly on interiors too. */
:is(.sups,.os-kl) .kl-form-host{width:100%}
:is(.sups,.os-kl) .kl-form-inner{max-width:100%!important;margin:0!important}
:is(.sups,.os-kl) #kl-form{justify-content:flex-start!important;gap:8px!important}
:is(.sups,.os-kl) #kl-email{background:var(--cream)!important;border:var(--line)!important;color:var(--ink)!important;border-radius:0!important;height:44px;padding:0 12px!important;font-family:var(--system)!important;font-size:20px!important;letter-spacing:0;box-shadow:none}
:is(.sups,.os-kl) #kl-email::placeholder{color:var(--ink-70)}
:is(.sups,.os-kl) .submit-btn{height:44px;border:var(--line)!important;border-radius:0!important;background:var(--cta)!important;color:var(--panel)!important;font-family:var(--system)!important;font-size:20px!important;letter-spacing:0!important;text-transform:none!important;padding:0 16px!important;box-shadow:var(--bevel);cursor:pointer} /* 92.6.4: Sumac Vermilion CTA */
:is(.sups,.os-kl) .submit-btn:hover{background:var(--cta-hover)!important;color:var(--panel)!important}
:is(.sups,.os-kl) #kl-msg{font-family:var(--system-sm)!important;font-size:15px!important;letter-spacing:0!important;text-transform:none!important;color:var(--cream)!important;margin-top:8px!important}
:is(.sups,.os-kl) #kl-err{font-family:var(--system-sm)!important;font-size:15px!important;opacity:1!important;color:var(--cream)!important;margin-top:8px!important}

/* ── /story — the THREE-PLATE STEPPED BOOK (D-17, 92.5.3-02 Task 2) ────────
   Markup and surface rules only; the engine is untouched (92.5.2-01 proved a
   second book costs zero, and this is the third). Every stop fills the pane
   exactly by the mechanism the home back matter already uses: a flex column
   with ONE flexible element and internal overflow past it — which is also why
   both stops below join the D-02 single-scroll-authority list. */
html.js .story-i,html.js .story-iii{display:flex;flex-direction:column} /* W-01: height:100% + inner scroller retired — viewport scrolls */
html.js .story-i>.statusbar,html.js .story-iii>.statusbar{flex:none}
/* the picture is the flexible element (THE IDEA / cover mechanism): it gives
   up height so the locked line is ALWAYS composed, never pushed under. */
.story-art{aspect-ratio:862/486} /* grow + no-JS: the box is reserved before a byte of image arrives (.drink-hold precedent) */
html.js .story-i .story-art{flex:1 1 auto;min-height:120px;aspect-ratio:auto}
html.js .story-i .story-locked{flex:none}
.story-art .copy h1{font-size:40px;line-height:1} /* .doc-plate .copy h1, lifted */
/* II — the letter. The 430px art column is the shipped .plate-i grid's first
   track; the photo fills whatever height the letter needs (object-fit:cover),
   so the sheet drives the plate rather than a fixed well height. */
.story-ii .art-col{border-right:var(--line);overflow:hidden;background:var(--teal-deep)}
.story-ii .art-col picture{display:contents}
.story-ii .art-col img{display:block;width:100%;height:100%;object-fit:cover}
.story-ii .col{align-items:stretch}
/* the typed-paper card: the .doc-quote paper ground given a sheet's anatomy
   (1px rule + the shipped bevel), with the tray footer's own 96×10 alpine
   stripe run full width as the carriage band at its head. */
.story-ii .letter{background:var(--paper);border:var(--line);box-shadow:var(--bevel);padding:0 24px 20px;display:flex;flex-direction:column;gap:12px}
.story-ii .letter::before{content:"";display:block;height:10px;margin:0 -24px 8px;background:repeating-linear-gradient(90deg,var(--alpine) 0 6px,var(--panel) 6px 8px);border-bottom:var(--line)}
.story-ii .letter-body{display:flex;flex-direction:column;gap:12px}
.story-ii .letter .sign{margin-top:4px;border-top:var(--line);padding-top:12px;display:flex;flex-direction:column;gap:8px}
/* III — the trail ahead. .doc-sec composition; the auto margins centre the
   stop in a tall pane exactly as .sups .grid does, and collapse to 0 when the
   content is taller than the band. */
.story-iii .inner{padding:24px;display:flex;flex-direction:column;gap:16px;align-items:flex-start;margin:auto 0}
.story-iii .q{font-size:32px;line-height:36px;max-width:780px;text-wrap:pretty} /* .doc-quote .q, verbatim */
.story-iii .sub{max-width:70ch}
.story-iii .trail{align-self:stretch}
/* the list-view rows are the .etym idiom turned into ONE line each — state
   word beside its tab, the same dictionary-line move the specimen card makes.
   They are anchors, so the a:hover recolor is guarded the way .tray .slot is. */
.story-iii .trail .etym{padding:12px 0;flex-direction:row;align-items:baseline;gap:14px;color:var(--ink)}
.story-iii .trail .etym:first-child{border-top:0}
.story-iii .trail .etym:hover{color:var(--rust)}

/* ── /supplements — THE FOUR-PLATE BOOK (D-18, 92.5.3-03 Task 1) ───────────
   The site's FOURTH book, on the shipped engine, with one anatomy no other
   book has: an FDA RAIL that must be resident at every stop.

   THE RESIDENCY MECHANISM, and why it is not the /story shape: a Story stop is
   `overflow-y:auto` on the STOP, so a tall stop scrolls as a whole. Do that
   here and the rail — the last child — scrolls out of view, which is exactly
   what D-18 forbids. So the stop is a flex column that does NOT scroll
   (`overflow:hidden`), its `.sup-body` is the single flexible scroller, and
   the rail sits OUTSIDE that scroller at `flex:none`. The rail can therefore
   never be scrolled past; only the plate's content moves under it.
   Below the #36 floor all of this stands down (see the grow mirror at the end
   of the file): the plates flow as one page and the rail is PRESENT in each
   plate's flow instead of pinned in a pane. */
html.js .sup-i,html.js .sup-ii,html.js .sup-iii,html.js .sup-iv{display:flex;flex-direction:column;height:100%;overflow:hidden}
html.js .book:has(> .sup-i){height:100%}
html.js .sup-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto}
.fda-rail{flex:none;border-top:var(--line);background:var(--panel);padding:8px 24px}
/* the rail's voice is the .os-kl note's, on the panel ground: legal small print
   (values lifted from .sm + the shipped .os-kl .fda rule) */
.fda-rail .fda{font-family:var(--system-sm);font-size:15px;letter-spacing:0;line-height:1.4;color:var(--ink-70)}
/* I — the hero. The picture is the flexible element (the THE IDEA / story-i
   mechanism): it gives up height so the descriptor is ALWAYS composed. */
.sup-art{aspect-ratio:862/486} /* grow + no-JS: the box is reserved before a byte of image arrives */
html.js .sup-i .sup-art{flex:none;min-height:120px;max-height:40vh;overflow:hidden} /* W-11: materially smaller than the old full-pane hero */
.sup-art .copy h1{font-size:40px;line-height:1} /* .doc-plate .copy h1, lifted */
.sup-lede{flex:none;padding:24px}
.sup-lede>p{max-width:70ch}
/* II — THE FIVE. The .etym rules-separated row idiom as ONE line each (the
   specimen card's own move), centred in a tall pane by the auto margins .sups
   .grid and .story-iii .inner already use. */
.sup-list{align-self:stretch;margin:auto 0}
.sup-list .etym{padding:14px 24px;display:grid;grid-template-columns:auto minmax(10ch,auto) auto minmax(24ch,1fr);align-items:start;gap:8px 14px}
.sup-list .etym:first-child{border-top:0}
.sup-list .etym .word{flex:1 1 auto}
.sup-public-copy{display:flex;flex-direction:column;gap:4px;line-height:1.35}
.sup-public-copy [data-sku-fact]{color:var(--ink-70)}
/* the chips (D-18: the FIRST chip on Base, the LEMON-LIME flavour chip) — the
   statusbar cell's chrome, lifted from the shipped .drink-chip. */
.sup-chip{flex:none;border:var(--line);background:var(--panel);color:var(--ink);padding:0 10px;line-height:24px;box-shadow:var(--bevel)}
/* III — the Base dossier: a specimen card. .spec composition, lifted; the pack
   sprite sits in the .well's white ground so a 1-bit mark reads as artwork. */
.sup-dossier{margin:auto 0;padding:24px;display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.sup-pack{flex:none;border:var(--line);background:#fff;box-shadow:var(--bevel);padding:12px;display:flex;color:var(--ink)}
.sup-facts{flex:1 1 20ch;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.sup-facts .word{font-size:28px;line-height:1.1} /* .docbody h2 / .etym .word size */
.sup-format{line-height:1.35}
/* IV — THE LIST: the OS dialog pastiche. The window chrome (border, bevel, the
   shipped .titlebar) is drawn HERE, outside the frozen Klaviyo include; the
   body keeps the .os-kl alpine treatment so the include's own reskin overrides
   (the :is(.sups,.os-kl) block above) apply unchanged. */
.sup-dialog{margin:auto;max-width:560px;width:100%;border:var(--line);background:var(--panel);box-shadow:var(--bevel)}
.sup-dialog .titlebar{border-bottom:var(--line)}
.sup-dialog-body{align-self:auto}

/* ── COLOPHON — deep teal (build-script .colophon, verbatim) ─────────────── */
.colophon{background:var(--teal-deep);color:var(--cream)}
.colophon .inner{padding:24px}
.colophon .wm{font-size:96px;color:var(--cream)}
.colophon .wm .wm-macron{width:18px;height:3px;top:6px} /* size-specific apex nudge (audit item 8 pattern): the board's -2px floats ~11px clear of the I at 96px with the self-hosted Fraunces; +6px restores the comp's 2-3px hug */
.colophon .cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:24px}
.colophon .cols h3{font-family:var(--system);font-size:20px;letter-spacing:1px;line-height:1;text-transform:uppercase;font-weight:400;margin-bottom:10px;color:var(--cream)}
.colophon .cols ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.colophon .cols a{color:var(--cream)}
.colophon .legal{margin-top:24px;border-top:1px solid var(--cream-80);padding-top:12px;display:flex;flex-direction:column;gap:8px;color:var(--cream-80)}

/* ── ABOUT DIALOG RETIRED (W-03, 92.6.1). Dialog element, aboutDialog() IIFE,
   and all os-about styles removed. Content moved to colophon. ─────────── */

/* ── boot splash (home only, once per session — GR-boot 92.6.2; progress bar
      restored D-08 amended, 92.6.4) ──────────────────────────────────────── */
.boot{position:fixed;inset:0;background:var(--ground);z-index:var(--z-boot);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.boot-splash{color:var(--ink-70);letter-spacing:0.12em}
.boot-bar{width:200px;height:3px;background:var(--ink-40);overflow:hidden}
.boot-bar-fill{width:0;height:100%;background:var(--ink)}
@keyframes boot-fill{from{width:0}to{width:100%}}
html.js .boot-bar-fill{animation:boot-fill var(--t-boot) linear forwards}

/* ── registration (§2) — one plane-settle on first paint ─────────────────── */
@keyframes os-register{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes os-fade{from{opacity:0}to{opacity:1}}
html.js.is-registered body.os .win{animation:os-register var(--t-register) var(--ease) 1}
html.js.is-registered body.os .menubar,
html.js.is-registered body.os .dock{animation:os-fade var(--t-register) var(--ease) 1}

/* ── pixel-art rendering (covers/idea/sups/boot ONLY — never product jpgs) ─ */
.pixelart{image-rendering:pixelated}

/* ── phone model (≤1200px — #36: 768–1200 widths run the phone model).
      Values from the build script's .m rules + PHONE geometry; the artboard's
      fixed 372px body becomes the fluid window body (window = viewport − 8px
      insets; exactly 372 at the 390 board width). ─────────────────────────── */
@media (max-width:1200px){
  .win{box-shadow:4px 4px 0 rgba(24,21,18,.92)}
  .menubar .cell{padding:0 10px}
  /* (the phone city cell used to be display:none here — Pitfall 6. D-07 makes
     the city the POINT of this cell, and the phone is the primary cold-traffic
     surface, so hiding it there hid the feature from almost everyone who would
     ever see it. The ≤640px block below carries the Q4 phone layout instead.) */
  .win-main{margin-right:0}
  .scroll{display:none}
  .art .copy{left:16px;bottom:18px}
  .art .copy .wm{font-size:48px}
  .art .copy .sub{font-size:18px;margin:8px 0 12px}
  .dock{align-self:stretch;margin:0 8px;display:flex;align-items:stretch}
  /* D-10 closure (92.5.2-02): all seven cells share the row instead of sliding
     inside an overflow strip — 7 equal-basis cells fill the dock's width at
     every phone-model rig. Height is UNCHANGED at 70px: the shell geometry
     (--ring gaps, window height, cover band steps) is calibrated against it. */
  .dock .strip{display:grid;grid-template-columns:repeat(7,minmax(44px,1fr));width:100%}
  .dock .item{width:auto;min-width:44px;height:70px;min-height:70px;padding:3px 1px 4px;gap:2px}
  .dock .item>span:last-child{display:block;max-width:100%;font-size:7px;line-height:8px;letter-spacing:0;white-space:normal;overflow-wrap:anywhere;text-align:center}
  .dock .item[aria-current="page"]::after{left:5px;right:5px}
  .plate-i .grid{grid-template-columns:minmax(0,1fr)}
  .well{width:100%;height:465px;border-right:0;border-bottom:var(--line)}
  .plate-i .col{padding:16px}
  .plate-i .col h2{font-size:28px}
  /* back matter — build-script .m rules, verbatim */
  .idea .text{padding:16px}
  .idea .q{font-size:28px;line-height:32px}
  .sups .grid{grid-template-columns:minmax(0,1fr)}
  .sups .pic{border-right:0;border-bottom:var(--line)}
  .sups .col{padding:16px}
  .sups h2{font-size:28px}
  :is(.sups,.os-kl) #kl-form{flex-direction:column} /* board .m .sups .form — stacked controls (P4-D3 widening) */
  /* flex:none!important (Task 7 fix, sweep v3 catch): the include's inline
     flex:1 makes the input a COLUMN flex item with basis 0 once the form
     stacks — the 44px control collapsed to a 22px line box (board contract:
     44px controls; the include itself is never edited, override-only). */
  :is(.sups,.os-kl) #kl-email{width:100%;flex:none!important}
  /* GR-2: cover form stacks on phone (input above button, full width) —
     mirrors the existing :is(.sups,.os-kl) phone stacking above */
  .cover-kl #kl-form{flex-direction:column}
  .cover-kl #kl-email{width:100%;flex:none!important}
  .colophon .inner{padding:16px}
  .colophon .wm{font-size:56px}
  .colophon .wm .wm-macron{width:11px;height:2px;top:3px} /* 56px apex nudge — same eye rule as the 96px form */
  .colophon .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* (the .desk-only/.phone-only swap helpers retired with the size/colour
   readout — D-08, 92.5.2-02: the three home statusbar cells were their only
   carriers in src/, so both rules and the min-width:1201px block that held
   the desktop half became unreferenced.) */

/* ── dock icon-only band (D-10 closure, 92.5.2-02 Task 1, recorded Q3 ruling)
      — BREAKPOINT PICK: 640px. Ruled range was ~620–700; 640 is the narrowest
      value that still clears the labelled row at the rigs above it (tablet768
      and small1024 both have room for seven "Supplements"-width cells) and it
      is the conventional small-screen boundary already used by the site's
      max-height:639px grow rules, so the file grows no new magic number.
      Below it the label spans hide and the seven cells run icon-only: at 390px
      the dock is 390 − 2×8px margin = 374px, so each of the 7 cells is ~53px
      wide × 70px tall — comfortably past the 44px --hit floor, with all seven
      inside the first viewport. The 32px .ico is untouched. ──────────────── */
/* ── phone dock (W-04a, 92.6.1) — labels RESTORED as two-line cells.
      At 390px the dock is 374px → ~53px per cell. Jersey 15 at 15px is too
      wide for "Supplements" (11 chars) in 53px; font-size:12px fits.
      Two-line wrapping: "The Name" → "The / Name", "Supplements" → wraps
      at font boundary. Hit floor cannot fail: 7×44=308<374. ──────────── */
@media (max-width:640px){
  .dock .item{gap:2px;min-width:44px;text-align:center}
  .dock .item .ico{width:32px;height:32px}
  .dock .item > span:not(.ico){font-size:11px;line-height:1.05;max-width:100%;white-space:normal;overflow-wrap:anywhere;overflow:hidden;text-overflow:clip}
}
@media (max-width:340px){
  .dock{margin-left:4px;margin-right:4px}
}

/* ── back matter in the FIXED model (Task 8, D-01 fluid pane): every
      back-matter section fills the pane EXACTLY — a section shorter than
      the pane would let the next section bleed into the frame, a taller
      one already crops. Mechanisms, in board vocabulary:
      · THE IDEA — the picture is the flexible element (the #36 cover
        mechanism): it gives up height so the quote + sign-off + The story →
        are always composed; object-position keeps the headland + pines
        (bottom weight), trimming sky — 1:1 pixels, vertical crop only.
        min-height guards a legible strip; overflow scrolls only past it.
      · THE SUPPLEMENTS — content centres in the alpine plate via auto
        margins (they collapse to 0 and the section scrolls if a step is
        ever shorter than the form).
      · COLOPHON — a document: centres when it fits, scrolls internally when
        the band is shorter (the tray/dock strips already sanction internal
        strip scroll; the root never scrolls). ─────────────────────────────── */
html.js .idea>.statusbar,html.js .sups>.statusbar,html.js .colophon>.statusbar{flex:none}
html.js .idea{display:flex;flex-direction:column} /* W-01: inner scroller retired — viewport scrolls */
html.js .idea img{flex:1 1 auto;min-height:96px;height:auto;object-fit:cover;object-position:50% 100%}
html.js .idea .text{flex:none}
html.js .sups{display:flex;flex-direction:column} /* W-01: inner scroller retired — viewport scrolls */
html.js .sups .grid{margin:auto 0}
html.js .colophon{display:flex;flex-direction:column} /* W-01: inner scroller retired — viewport scrolls */
html.js .colophon .inner{margin:auto 0}
/* Phone model (≤1200): the sups grid stacks, so the fluid-width picture
   would balloon past the band (752px body → 376px pic at 768×1024) and push
   the FORM below the fold. Same mechanism as THE IDEA: the picture is the
   flexible element, the form is always composed; object-position keeps the
   trail + range (centre weight). */
@media (max-width:1200px){
  html.js .sups .grid{display:flex;flex-direction:column;flex:1;min-height:0;margin:0}
  html.js .sups .pic{flex:1 1 auto;min-height:80px;overflow:hidden;border-bottom:var(--line)}
  html.js .sups .pic img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
  html.js .sups .col{flex:none}
}

/* ── #36 below the ~640px floor: the GROW rendition engages under html.js —
      root scroll is permitted ONLY here; mirrors the html:not(.js) rules.
      W-01 (92.6.2): many of these overrides are now REDUNDANT — the global
      rules above already do what grow used to override. This block is kept as
      a harmless specificity layer; the few unique grow rules (min-height:100vh
      on body.os, cover-art fixed height) still serve a purpose below the
      floor. ── */
@media (max-height:639px){
  html.js{overflow:auto}
  html.js body.os{display:flow-root;height:auto;min-height:100vh;overflow:visible} /* the shell column stands down — grow is a flowing page; min-height restores the base page-minimum the CR-01 reset removed */
  html.js .stage{display:block}
  html.js .win,html.js .win-main{display:block}
  html.js [data-screen]{height:auto;display:revert;overflow:visible}
  html.js .viewport{height:auto}
  html.js .book{height:auto}
  html.js .book{display:block} /* D-12 (92.5.3): the grow rendition is a FLOWING PAGE — the horizontal row stands down here or the below-floor page becomes a sideways strip and the Q7 grow floor breaks */
  html.js .book{transform:none!important} /* beats the inline transform */
  html.js .win{margin-bottom:120px} /* #36 mirror of the no-JS grow headroom (92.5.1-02: 120px, same in-flow-dock re-expression) */
  html.js .scroll .thumb{top:17px!important;bottom:17px!important;height:auto!important} /* #36 mirror: full thumb */
  html.js .statusbar .nav{display:none} /* #36 mirror: step buttons are no-ops in grow */
  html.js .cover-art{height:486px} /* grow shows the full band again */
  html.js .cover-art img{object-position:50% 50%}
  html.js .tray-band{min-height:0}
  /* #36 mirror: back matter returns to natural document height in grow */
  html.js .idea,html.js .sups,html.js .colophon{height:auto;display:block;overflow:visible}
  html.js .idea img{min-height:0;object-position:50% 50%}
  html.js .sups .grid{display:grid;margin:0}
  html.js .sups .pic{min-height:0}
  html.js .sups .pic img{height:auto;object-position:50% 50%}
}
@media (max-width:640px){
  .sup-list .etym{grid-template-columns:auto minmax(0,1fr) auto}
  .sup-public-copy{grid-column:2 / -1;min-width:0;overflow-wrap:anywhere}
  .spec-foot .q{flex:1 1 100%;min-width:0;max-width:100%;overflow-wrap:anywhere}
}

/* ── Phase 92.6.5 Home: identity siblings → current apparel commerce ── */
.home-cover{display:flex;flex-direction:column;border-bottom:var(--line)}
.home-cover .cover-art{position:relative}
.home-cover .cover-art picture,.home-cover .cover-art img{display:block;width:100%;height:auto}
.home-wordmark{position:absolute;left:24px;bottom:20px;color:var(--cream);font-size:72px;line-height:.9;text-shadow:2px 2px 0 var(--ink)}
.home-wordmark .wm-macron{box-shadow:1px 1px 0 var(--ink)}
.brand-categories{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:var(--line)}
.brand-category{min-width:0;padding:20px;border-right:var(--line);display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.brand-category:last-child{border-right:0}
.brand-category h2{font-family:var(--display);font-variation-settings:var(--display-variation);font-size:30px;line-height:1;margin:0}
.brand-category p{margin:0;line-height:1.25}
.home-shop{position:relative;border-bottom:var(--line)}
.home-collections{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:var(--line)}
.home-collections a{padding:14px;text-align:center;border-right:var(--line);font-family:var(--system-sm);font-size:15px}
.home-collections a:last-child{border-right:0}
.home-anchor{position:absolute;scroll-margin-top:32px}
.home-product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--ink);gap:2px}
.home-product{min-width:0;background:var(--panel)}
.home-product a{display:grid;grid-template-columns:1fr auto;align-items:center;color:var(--ink)}
.home-product img{grid-column:1/-1;display:block;width:100%;height:auto;background:#000}
.home-product-name,.home-product-price{padding:10px;font-family:var(--system-sm);font-size:14px;line-height:1.2}
.home-use{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:var(--line)}
.home-use a{border-right:var(--line);background:#000}
.home-use a:last-child{border-right:0}
.home-use img{display:block;width:100%;height:auto}
@media (max-width:800px){
  .home-wordmark{left:16px;bottom:14px;font-size:52px}
  .brand-categories{grid-template-columns:1fr}
  .brand-category{border-right:0;border-bottom:var(--line)}
  .brand-category:last-child{border-bottom:0}
  .home-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-use{grid-template-columns:1fr}
  .home-use a{border-right:0;border-bottom:var(--line)}
}
@media (max-width:1200px) and (max-height:639px){
  html.js .cover-art{height:470px} /* phone art full band */
}

/* ── document windows (Phase 4) ──────────────────────────────────────────────
      The dock's other documents (P4-D1/D2): interior windows carry the title
      bar + a caption statusbar only — no transport, no panel. Text documents
      scroll INSIDE the window body — the mechanism is the one the colophon
      already ships (a flex:1 pane + internal overflow), so every interior
      inherits the D-01 fluid pane and the below-640px grow fallback for
      free. All values lifted or pattern-reused, none invented. ─────────────── */
html.js .docbody{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;background:var(--panel);padding-bottom:var(--statusbar-clear)} /* D-02/D-03: document routes (sizing/returns/privacy/contact) scroll inside the docbody pane, NOT the viewport — books scroll the viewport, documents scroll their own body */
html:not(.js) .docbody{height:auto;overflow:visible} /* grow rendition: natural height, the page scrolls */
/* document type defaults (visual-authority working defaults: Fraunces 20/1.5
   at ≤70ch, h2 28px, section padding 24/16 — executor-tunable by eye) */
.docbody{font-family:var(--display);font-variation-settings:"SOFT" 100,"WONK" 1;font-weight:400;font-size:20px;line-height:1.5}
.doc-sec{padding:24px;display:flex;flex-direction:column;gap:16px;align-items:flex-start} /* .plate-i .col composition, lifted */
.doc-sec>*{max-width:70ch}
.docbody h2{font-size:28px;line-height:1.1}
.docbody h1{font-size:40px;line-height:1}
/* plate band — the window's opening picture; the .art .copy overlay is reused
   as-is for plate-top titles (cream + bevel, the established treatment).
   Height is the image's own (fluid), unlike the fixed cover band. */
.doc-plate img{display:block;width:100%;height:auto}
.doc-plate .copy h1{font-size:40px;line-height:1} /* .plate-i h2 desktop size, lifted */
/* pull-quote band — the .idea paper surface, liftable inside a docbody
   (the .idea class itself carries fixed-model viewport-height rules and can
   never be reused on an interior). Values verbatim from .idea/.idea .text/.q. */
.doc-quote{background:var(--paper);padding:24px}
.doc-quote .q{font-size:32px;line-height:36px;max-width:780px;text-wrap:pretty}
/* the interior waitlist band — .os-kl is BOTH the Klaviyo override scope
   (P4-D3 :is() widening above) and the alpine surface it sits on; every
   value lifted from .sups/.sups .col/.sups .note (the home waitlist look,
   one treatment everywhere) */
.os-kl{background:var(--alpine);color:var(--cream);padding:24px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.os-kl h2{color:var(--cream)}
.os-kl .note{color:var(--cream)} /* FULL cream — cream-80 on alpine fails AA at 15px (ratified) */
/* document tables (Task 6 consumers): full width, the mandated 1px rules,
   all-Fraunces (tables are document content, not chrome), Jersey-15 captions */
.doc-table{width:100%;border-collapse:collapse}
.doc-table th,.doc-table td{border:var(--line);padding:8px 10px;text-align:left;font-weight:400}
.doc-table caption{font-family:var(--system-sm);font-size:15px;letter-spacing:0;line-height:1;text-align:left;padding:0 0 8px}
/* ── /sizing (D-20, 92.5.3-02 Task 3) — dithered alternating rows under a
   sticky key. The texture is the site's OWN dither idiom (the scrollbar
   track's repeating-conic-gradient), stepped from 4px to 2px so it reads as a
   tint behind text rather than as a pattern.
   CONTRAST, computed rather than eyeballed: the checker is 50% coverage of
   --ink-40 (rgba(26,22,16,.40)) over --panel #FAFAFA. Worst case is a text
   pixel sitting on a FULL dither pixel — ground ≈ #A09E9C, luminance ≈ .362 —
   which is 7.0:1 against --ink #1a1610. That clears AA (4.5:1) and AAA (7:1)
   on the dithered ground as well as on the plain one. */
.doc-table tbody tr:nth-child(even) th,
.doc-table tbody tr:nth-child(even) td{background:repeating-conic-gradient(var(--ink-40) 0 25%,transparent 0 50%) 0 0/2px 2px}
/* the sticky key: the pane it sticks inside is the docbody (the ONE scroll
   authority on this route) — nothing new scrolls. Opaque panel ground, because
   the charts pass underneath it. */
.size-key{position:sticky;top:0;z-index:1;background:var(--panel);border-bottom:var(--line)}
/* THE NAME hero (Task 4, P4-D4 — one macron technique everywhere): the OS .wm
   pattern at the two already-eye-tuned sizes with the ratified apex nudges.
   Every value verbatim from the colophon wordmark (audit item 8 pattern). */
.name-hero .wm{font-size:96px}
.name-hero .wm .wm-macron{width:18px;height:3px;top:6px} /* colophon 96px apex nudge, verbatim */
/* etymology entries (Task 4, design §4 captioned entries): a rules-separated
   list — language caption Jersey 15, word + meaning Fraunces; the `now` entry
   keeps its distinction on the paper ground (the .idea surface, lifted). */
.etym{border-top:var(--line);padding:24px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.etym>*{max-width:70ch}
.etym .word{font-size:28px;line-height:1.1} /* .docbody h2 size — the word is the entry's heading */
/* (`.etym.now` and `.keeper-actions` retired with the sections that carried
   them — D-16, 92.5.3-02: the `now` entry renders in the specimen card's
   footer rather than as a fourth list row, and the keeper section's two
   buttons left with the section. Neither rule had another carrier in src/.) */

/* ── THE NAME — the dictionary specimen card (D-16, 92.5.3-02 Task 1) ──────
   ONE condensed screen: headword · say-it field row · three meanings · the
   footer rule · one door. Every value is LIFTED from shipped vocabulary
   (§P6 — no new primitives): the .doc-sec composition, the #kl-email control's
   own field look, the .etym row idiom, the .doc-quote paper band.
   The D-03 statusbar-clear padding STANDS DOWN here, for the same reason the
   held screen stands it down (D-19): it exists so a SCROLLING document's last
   line clears the caption bar, and this screen does not scroll. At the 375×667
   rig it was 54px of a budget the card must fit inside. The /story and /sizing
   padding gates are route-scoped and unaffected. */
html.js .docbody.specimen{padding-bottom:0;justify-content:center}
.spec{padding:24px;display:flex;flex-direction:column;gap:16px;align-items:flex-start} /* .doc-sec composition, lifted */
/* the headword line: the specimen's word and how to say it, side by side —
   the dictionary form, and the 44px+gap of height a card that must hold ONE
   screen cannot spend stacking them (MEASURED: without this the card is 31px
   over budget at the 1280×720 rig, where the 96px wordmark alone is a fifth
   of the pane). Reading order is unchanged: headword, then pronunciation. */
.spec-head{align-self:stretch;display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap}
/* the say-it row: an OS text field. Values are the shipped #kl-email control's
   (cream ground, 1px rule, 44px tall, 0 12px) — the site's one text-field look
   — composed as a menubar-style row of cells. */
.spec-row{display:flex}
.spec-row .cell{border:var(--line);background:var(--cream);color:var(--ink);height:44px;padding:0 12px;display:flex;align-items:center;white-space:nowrap}
/* the list-view: .etym rows, tightened to the card's own measure. The rows
   keep their rules-separated anatomy (the class is the contract the build gate
   counts); only the outer padding becomes the card's, since the card supplies
   the 24px gutter its parent .doc-sec used to. */
.spec-list{align-self:stretch;display:flex;flex-direction:column;gap:var(--s-2)}
/* D-04 (92.6.3): each etymology entry as a section-header card — dark bar
   with language name, bordered panel with word + definition. The .sec-bar
   inside a card shares the outer border (border:0 + border-bottom only). */
.etym-card{border:var(--line)}
.etym-card .sec-bar{border:0;border-bottom:var(--line)}
.etym-card .sec-panel{display:flex;flex-direction:column;gap:8px}
.etym-card .sec-panel .meaning{line-height:1.35}
.name-source{align-self:flex-start;text-decoration:underline;text-underline-offset:3px}
/* the footer rule: the shipped paper pull-quote band, with the living fifth
   definition set beside it rather than under it. */
.spec-foot{align-self:stretch;display:flex;gap:24px;align-items:baseline;flex-wrap:wrap}
.spec-foot .q{flex:none}
.spec-foot .spec-now{flex:1 1 24ch;min-width:24ch;line-height:1.35}
@media (max-width:640px){
  .spec-foot .q{flex:1 1 100%;min-width:0;max-width:100%;overflow-wrap:anywhere}
}
/* the D-25 door line — one small on-style link. Underline treatment lifted
   from the shipped .drink-door (92.5.3-01); the document face is inherited, so
   every door on the site reads in the same voice. */
.door a{text-decoration:underline;text-underline-offset:3px}

/* ── /contact — the OS MAIL WINDOW (D-20, 92.5.3-02 Task 3) ────────────────
   One screen, no scroll, composed from shipped vocabulary: the menubar's
   row-of-cells idiom for the header fields, the #kl-email control's own field
   look for the empty ones, the .btn double-border for the OS default button,
   and the .glyph 16px box for the link row. The D-03 statusbar-clear padding
   stands down for the same reason it does on the specimen card — this pane
   does not scroll. */
html.js .docbody.mail{padding-bottom:0;justify-content:center}
.mail{padding:24px;display:flex;flex-direction:column;gap:16px;align-items:flex-start;max-width:100%;box-sizing:border-box} /* .doc-sec composition, lifted */
.mail-head{align-self:stretch;border:var(--line);background:var(--panel)}
.mail-head .row{display:flex;align-items:stretch;border-bottom:var(--line);min-height:36px}
.mail-head .row:last-child{border-bottom:0}
.mail-head .cell{display:flex;align-items:center;padding:0 12px;border-right:var(--line);white-space:nowrap} /* .menubar .cell, lifted */
.mail-head .cell:last-child{border-right:0}
.mail-head .lab{color:var(--ink-70);min-width:9ch}
.mail-head .val{font-family:var(--display);font-variation-settings:var(--display-variation)}
.mail-head .addr{min-width:0;overflow:hidden;text-overflow:ellipsis;display:block;line-height:36px} /* the menubar city cell's shrink idiom — a long address ellipsizes instead of pushing the row into overflow */
/* W-13 (92.6.2): .mail-head .field rule REMOVED — From/Subject fake-input rows are gone */
/* 92.6.4 (D-16): Poolsuite contact restyle — bordered rows, monospace,
   generous padding between sections. overflow-x:hidden fixes D-10. */
.mail-body{align-self:stretch;display:flex;flex-direction:column;gap:0;font-family:var(--system-sm);font-size:15px;letter-spacing:0;line-height:1.5}
.mail-body>p{max-width:100%;padding:24px 0;border-bottom:2px solid var(--ink);box-sizing:border-box}
.mail-body>p:last-child{border-bottom:0}
.mail-foot{align-self:stretch;display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:8px}
/* SEND is the OS DEFAULT button — the period double-border treatment, drawn
   with the shipped bevel token rather than a new shadow value. */
.btn.default{box-shadow:var(--bevel),0 0 0 2px var(--panel),0 0 0 3px var(--ink)}
.mail-glyphs{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-left:auto}
.mail-glyphs a{display:flex;align-items:center;gap:6px}
/* the FDA line inside the interior waitlist band (Task 4, P4-D8/D9): legal
   small print in the band's note voice — values lifted from .sm + .os-kl .note */
.os-kl .fda{font-family:var(--system-sm);font-size:15px;letter-spacing:0;line-height:1.4;color:var(--cream)}
/* GR-2: cover form compact mode — the Klaviyo form on the home cover sits
   INSIDE the .copy overlay, transparent (no alpine box), tighter padding,
   max-width matched to the cover copy block. The form controls themselves
   still get the cream-bg reskin from the :is(.sups,.os-kl) selectors. */
.cover-kl.os-kl{background:transparent;padding:16px 0 0;gap:8px;width:100%;max-width:320px;text-shadow:none}
.cover-kl .note{color:var(--cream);opacity:0.7}
/* the utility documents' table strip (Task 6): the old .size-scroll pattern
   as an internal overflow-x strip, sanctioned like the tray (#31) — the strip
   scrolls, the root never does (P4-D2). max-width:100% overrides the
   .doc-sec>* 70ch measure (tables are full-width by the visual-authority
   ruling; equal specificity, later in the file wins). */
.doc-scroll{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none} /* D-02 (92.5.1 review WR-01): classic-scrollbar desktops would render a native horizontal bar inside the window when the table overflows — hidden like every other pane */
.doc-scroll::-webkit-scrollbar{display:none}
/* the 404 window (Task 6): ONE centered band in the docbody — the ibex mark
   at document scale (menubar IBEX_ROWS, currentColor ink), the OS wordmark
   (colophon sizes + apex nudges, verbatim — P4-D4), the line, two exits.
   min-height:100% centers against the fixed band; collapses to natural
   height in grow/no-JS (the #36/no-JS truth, inherited from .docbody). */
.doc-404{min-height:100%;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px;color:var(--ink)}
.doc-404 .wm{font-size:96px}
.doc-404 .wm .wm-macron{width:18px;height:3px;top:6px} /* colophon 96px apex nudge, verbatim */
.doc-404 .line{font-size:32px;line-height:36px;max-width:24ch;text-wrap:pretty} /* .doc-quote .q values; 24ch = the old page's measure */
.doc-404 .exits{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
/* ── THE DRINK — the ONE HELD SCREEN (D-19, 92.5.3-01 Task 3) ─────────────
   The Phase-4 film OBJECT — its own bordered window-in-window with a file
   strip, a poster face, a 44px play control, an honest weight row and a
   period transport — RETIRED here with its click-to-play contract. D-19 rules
   one held screen: the film is the plate's background now. (The retired
   object's data attribute is not spelled anywhere in this file on purpose —
   the sweep negative-greps it across src/ and scripts/, and a comment must
   never be the thing that fails a machine gate someone re-runs later.)

   `held` on the document body is the modifier window-open.njk stamps: the
   screen FILLS the pane and nothing scrolls, so the D-03 statusbar-clear
   padding (which exists for scrolling text) is stood down with it. Under the
   grow / no-JS rendition the box keeps its own aspect ratio instead, so it
   reserves its space before a frame of video arrives. */
html.js .docbody.held{display:flex;overflow:hidden;padding-bottom:0}
/* D-11 (92.6.4): held screen fills the full window width — the scrollbar
   gutter on the right showed as a black rectangle because the scroll column
   decoration is meaningless on a non-scrolling held screen. Hiding the column
   and removing the win-main margin lets the drink film fill edge-to-edge. */
html.js .win:has(.docbody.held) .win-main{margin-right:0}
html.js .win:has(.docbody.held) .scroll{display:none}
/* IN-07 (92.5.3 review) — the reserved box is sized to the POSTER (862×485,
   measured on drink-poster-862-16c.webp), while the film's intrinsic size is
   862×470 (measured via videoWidth/videoHeight; the width/height attributes on
   the element correctly match the FILM). With object-fit:cover the film is
   therefore cropped ~3% vertically inside a box reserved for the still, and
   this is the only place in the file that departs from the site-wide 862/486
   plate ratio. RECORDED, not changed: the box exists to reserve the still's
   space before a frame of video arrives (D-14, zero CLS), so it is the poster
   that it must match. Re-encoding the poster to 862×470 is the other half of
   the fix and it belongs with the art lane, beside D-26's carried item. */
.drink-hold{position:relative;background:var(--teal-deep);overflow:hidden;aspect-ratio:862/485}
/* D-11 scrim (92.6.4, GR stated assumptions): gradient overlay so copy reads
   over the film. Positioned above the film, below the copy (z-index 0 vs 1). */
.drink-hold::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 40%,transparent 70%);z-index:0;pointer-events:none}
html.js .docbody.held>.drink-hold{flex:1;min-width:0;min-height:0;aspect-ratio:auto}
.drink-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* the copy layer — the shipped .art .copy treatment (cream over artwork with
   the established bevel text-shadow), lifted, widened to a right edge so the
   line wraps inside the frame at every rig. z-index:1 sits above the scrim. */
.drink-copy{position:absolute;left:32px;right:32px;bottom:28px;color:var(--cream);text-shadow:var(--bevel-text);display:flex;flex-direction:column;align-items:flex-start;gap:12px;z-index:1}
.drink-copy .drink-line{font-family:var(--display);font-variation-settings:var(--display-variation);font-size:32px;line-height:36px;max-width:24ch;text-wrap:pretty} /* .doc-quote .q / .doc-404 .line values, lifted */
.drink-copy .drink-chip{border:var(--line);background:var(--panel);color:var(--ink);padding:0 10px;line-height:26px;box-shadow:var(--bevel);text-shadow:none} /* statusbar cell chrome, lifted */
.drink-copy .drink-door a{color:var(--cream);text-decoration:underline;text-underline-offset:3px}
.drink-copy .drink-door a:hover{color:var(--paper)}
/* THE FILM'S TRANSPORT (92.5.3 review WR-07 — WCAG 2.2.2, Level A).
   The film is 5.04s, looped, and presented under the page's own copy, which is
   over the "more than five seconds, in parallel with other content" threshold —
   so a mechanism to pause, stop or hide it is REQUIRED, and the Phase-4
   transport was retired with the film object.

   It is MOUNTED BY plate.js, never SSR, and that is deliberate on three counts:
   (1) the no-JS and reduced-motion renditions never start the film at all now,
   so a control there would be an affordance for nothing; (2) an SSR control
   would put new rendered COPY on a route whose migration is gated by a
   rendered-text diff captured with JS disabled; (3) it keeps D-19's held screen
   exactly as ruled in every rendition a visitor without JS can reach.

   Look: the titlebar's own window-button chrome, at the --hit floor, parked in
   the plate's top-right corner rather than in the copy stack — the copy rhythm
   D-19 rules (one line, one chip, one door) is untouched. */
.drink-pause{position:absolute;top:16px;right:16px;z-index:2;width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;border:var(--line);background:var(--panel);color:var(--ink);box-shadow:var(--bevel);text-shadow:none;cursor:pointer}
.drink-pause:hover{background:var(--paper)}
.drink-pause:focus-visible{outline:2px solid var(--ink);outline-offset:2px} /* the UA ring is unreadable over a photograph */
/* PAUSE — two bars. PLAY (when already paused) — one triangle. Drawn in CSS so
   the control carries no text node and depends on no font. */
.drink-pause .glyph{display:block;width:14px;height:14px;border-left:4px solid currentColor;border-right:4px solid currentColor}
.drink-pause.is-paused .glyph{width:0;height:0;border:0;border-left:14px solid currentColor;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:3px}
@media (max-width:1200px){
  .doc-sec{padding:16px}
  .doc-plate .copy h1{font-size:28px} /* phone h2 size, lifted */
  .os-kl{padding:16px} /* .sups .col phone padding, lifted */
  .doc-quote{padding:16px}
  .doc-quote .q{font-size:28px;line-height:32px} /* .m .idea .q, verbatim */
  .etym{padding:16px}
  /* the specimen card takes the same phone gutter step every other interior
     takes at this breakpoint (.doc-sec 24 → 16). */
  .spec{padding:16px;gap:10px}
  .spec-head{gap:16px}
  .spec-foot{gap:8px}
  /* the Story stops take the same phone gutter step every other surface takes
     at this breakpoint; the letter's art column stacks above the sheet. */
  .story-art .copy h1{font-size:28px} /* phone h2 size, lifted */
  .story-ii .art-col{border-right:0;border-bottom:var(--line);height:280px}
  .story-ii .letter{padding:0 16px 16px}
  .story-ii .letter::before{margin:0 -16px 8px}
  .story-iii .inner{padding:16px}
  .story-iii .q{font-size:28px;line-height:32px} /* .m .idea .q, verbatim */
  /* the supplements plates take the same phone gutter step every other surface
     takes at this breakpoint (24 → 16), the FDA rail included — the rail is
     legal small print and must never be the widest thing on a 390px screen. */
  html.js .sup-i .sup-art{max-height:50vh} /* W-11: phone hero taller relative share */
  .sup-art .copy h1{font-size:28px} /* phone h2 size, lifted */
  .sup-lede{padding:16px}
  .sup-list .etym{padding:12px 16px}
  .sup-dossier{padding:16px;gap:16px}
  .sup-facts .word{font-size:24px}
  .fda-rail{padding:8px 16px}
  /* the mail window takes the same phone gutter step; its SEND row stacks
     under the glyph row rather than sharing a 317px line. */
  .mail{padding:16px;gap:12px}
  .mail-body{gap:0}
  .mail-body>p{padding:12px 0;border-bottom-width:1px} /* 92.6.4: phone gutter step for bordered rows */
  .mail-glyphs{margin-left:0;gap:12px}
  /* the held screen's copy layer follows the phone gutter (.art .copy phone
     form) and drops to the phone quote size, the same step every other
     interior takes at this breakpoint */
  .drink-copy{left:16px;right:16px;bottom:16px;gap:10px}
  .drink-copy .drink-line{font-size:28px;line-height:32px}
  .drink-pause{top:12px;right:12px} /* the phone gutter step, same as every other interior */
  .name-hero .wm{font-size:56px}
  .name-hero .wm .wm-macron{width:11px;height:2px;top:3px} /* 56px apex nudge — colophon phone form, verbatim */
  .doc-404{padding:16px}
  .doc-404 .wm{font-size:56px}
  .doc-404 .wm .wm-macron{width:11px;height:2px;top:3px} /* 56px apex nudge, verbatim */
  .doc-404 .line{font-size:28px;line-height:32px} /* .m .idea .q, verbatim */
}
/* #36 mirror — below the grow floor the document returns to natural height
   (root scroll is the sanctioned truth down here, same as the colophon) */
@media (max-height:639px){
  html.js .docbody{height:auto;overflow:visible}
  /* CR-01 (92.5.3 review) — THE HELD SCREEN MIRRORS THE SAME STAND-DOWN.
     The mirror above is `html.js .docbody` (0,2,1). The held-screen rules at
     :814/:816 are `html.js .docbody.held` (0,3,1) and
     `html.js .docbody.held>.drink-hold` (0,4,1), so they win on SPECIFICITY
     regardless of order and SURVIVED the stand-down: `.docbody.held` became a
     height:auto row flex whose only item carried flex:1 / aspect-ratio:auto,
     and whose only two children are both position:absolute. Zero in-flow
     content + a cancelled aspect ratio + an auto cross-size = a box that
     resolves to ZERO. Measured at 844×390 (any phone in landscape):
     docbodyH 0 — titlebar, "THE DRINK" statusbar, and nothing else.
     Restoring the reserved aspect box is exactly what the base rule at :815
     and the comment at :812-813 always intended; these two rows sit HERE,
     after the base rules, for the same specificity reason the Story and
     supplements mirrors below do. Machine-gated by the "below-floor grow —
     every docWindow route" pass in plate_sweep.mjs, which is the coverage
     hole that let this ship green. */
  html.js .docbody.held{display:block;overflow:visible}
  html.js .docbody.held>.drink-hold{flex:none;aspect-ratio:862/485}
  /* the Story stops mirror the back matter's own grow stand-down. They sit
     HERE, after their base rules, because both sides read `html.js .story-i`
     at equal specificity — in the earlier grow block the base rules would win
     and the below-floor page would keep a fixed-height stop. */
  html.js .story-i,html.js .story-iii{height:auto;display:block;overflow:visible}
  html.js .story-i .story-art{flex:none;aspect-ratio:862/486}
  /* the supplements plates mirror the same grow stand-down, and for the same
     specificity reason. Below the floor the four plates flow as ONE page: the
     stop is a block, its body is a block, and the FDA rail is PRESENT in each
     plate's flow with its own height rather than pinned in a pane. That is
     what "resident" has to mean where there is no pane (Q7, ruled). */
  html.js .sup-i,html.js .sup-ii,html.js .sup-iii,html.js .sup-iv{height:auto;display:block;overflow:visible}
  html.js .sup-body{display:block;overflow:visible}
  html.js .sup-i .sup-art{flex:none;aspect-ratio:862/486}
  .sup-list,.sup-dossier{margin:0}
}

/* ── reduced motion: boot skipped in JS; everything else still here ──────── */
@media (prefers-reduced-motion: reduce){
  body.os,body.os *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ── Phase 93.1 · neutral Home / Apparel / PDP route structure ────────────
   These selectors establish flow, controls, image containment and the single
   `.viewport` scroll authority only. Route color and emblem decisions belong
   to Phase 93.2 and are intentionally absent from this block. */
.home-route,.apparel-route,.pdp-route{background:var(--panel);color:var(--ink)}
html.js .home-route,html.js .apparel-route,html.js .pdp-route{min-height:100%}
.home-route>section,.home-doors,.apparel-route,.pdp-route{border-bottom:var(--line)}
.home-cover{min-height:calc(100vh - 32px - 28px - 72px - (2 * var(--ring)));min-height:calc(100dvh - 32px - 28px - 72px - (2 * var(--ring)));display:flex;flex-direction:column}
.home-cover .cover-art{flex:1;max-height:none;min-height:0}
.home-wordmark{position:absolute;left:32px;bottom:28px;color:var(--cream);font-size:72px;text-shadow:var(--bevel-text)}
.home-categories{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.home-identity{grid-column:1/-1;padding:16px 24px;border-bottom:var(--line);font-family:var(--system-sm);font-size:15px;line-height:1.2}
.home-category{min-width:0;padding:24px;display:flex;flex-direction:column;align-items:flex-start;gap:16px;border-right:var(--line)}
.home-category:last-child{border-right:0}
.home-garments,.home-edit{padding:24px;display:flex;flex-direction:column;gap:16px}
.home-collections{display:flex;flex-wrap:wrap;gap:8px}
.home-collections a,.home-doors a{min-height:44px;padding:0 12px;border:var(--line);display:inline-flex;align-items:center;color:var(--ink)}
.home-product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.home-product,.apparel-card{min-width:0;border:var(--line);background:var(--panel)}
.home-product>a,.apparel-card-link{height:100%;padding:12px;display:flex;flex-direction:column;gap:8px;color:var(--ink)}
.home-product img,.apparel-card-image img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:contain;background:#fff}
.home-view-all{align-self:flex-start}
.home-doors{padding:24px;display:flex;flex-wrap:wrap;gap:8px}

.apparel-route,.pdp-route{padding:24px;display:flex;flex-direction:column;gap:24px}
.apparel-header{display:flex;align-items:center;justify-content:space-between;gap:16px}
.apparel-controls{display:grid;grid-template-columns:2fr minmax(180px,1fr) minmax(180px,1fr);gap:16px;padding:16px;border:var(--line)}
.apparel-filter-group{min-width:0;display:flex;flex-direction:column;gap:8px}
.apparel-filter-group h2{font-family:var(--system-sm);font-size:15px;line-height:1}
.apparel-filter-row{display:flex;flex-wrap:wrap;gap:8px}
.apparel-filter-row button,.apparel-filter-toggle,.apparel-filter-group select{min-height:44px;border:var(--line);border-radius:0;background:var(--panel);color:var(--ink);font:inherit;padding:0 12px;cursor:pointer}
.apparel-filter-row button[aria-pressed="true"]{background:var(--ink);color:var(--panel)}
.apparel-filter-row button:focus-visible,.apparel-filter-toggle:focus-visible,.apparel-filter-group select:focus-visible,.apparel-card-link:focus-visible,.pdp-buy:focus-visible,.pdp-swatch:focus-visible,.pdp-thumb:focus-visible,.pdp-size-pill:focus-visible{outline:3px double var(--ink);outline-offset:2px}
.apparel-filter-toggle{display:none}
.apparel-results{min-height:1em;font-family:var(--system-sm);font-size:15px}
.apparel-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.apparel-card-name{margin-top:auto}
.apparel-card-price,.pdp-price{font-family:var(--system-sm);font-size:15px}
.apparel-card-variant,.apparel-card-state{font-family:var(--system-sm);font-size:15px;color:var(--ink-70)}

.pdp-header{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.pdp-header>a,.pdp-recovery a,.pdp-size-guide a{min-height:44px;display:inline-flex;align-items:center;text-decoration:underline;text-underline-offset:3px}
.pdp-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(240px,1fr);gap:24px;align-items:start}
/* DOM puts the GALLERY first (Toby, 2026-08-31 polish: the product photo leads
   the page at phone widths — title/price, hero, then color/size/BUY). Explicit
   placement pins the desktop columns gallery-left/commerce-right regardless of
   source order; the ≤900px reset below restores one-column DOM flow. */
.pdp-layout>.pdp-gallery{grid-column:1;grid-row:1}
.pdp-layout>.pdp-commerce{grid-column:2;grid-row:1}
/* Two-axis PDP (Vuori pattern, quick 260831-vz4): one hero + lazy thumb strip;
   a color swatch row with a real JS hero swap; size pills are real Fourthwall
   variant links (quick 260901-o5r) — anchors with an href for the combinations
   that exist, href-less and struck for the ones that do not. Swatch/thumb
   cursor only advertises interactivity under html.js — the no-JS rendition
   stays an honest static document. */
.pdp-gallery{display:flex;flex-direction:column;gap:16px}
.pdp-hero{display:block;width:100%;height:auto;max-height:75vh;object-fit:contain;background:#fff;border:var(--line)}
.pdp-thumbs{display:flex;flex-wrap:wrap;gap:6px}
.pdp-thumb{width:56px;border:var(--line);background:#fff}
.pdp-thumb img{display:block;width:100%;height:auto}
.pdp-commerce{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.pdp-axis-label{font-family:var(--system-sm);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.pdp-swatches{display:flex;flex-wrap:wrap;gap:6px}
/* 32px CSS swatches: the phone grow rendition scales the plate up, so the
   rendered tap target stays comfortably past 44px physical; desktop is a
   pointer surface. Compact per Toby 2026-08-31 ("slightly too big"). */
.pdp-swatch{width:32px;height:32px;border:var(--line);background:var(--swatch,#fff)}
.pdp-swatch.is-selected,.pdp-thumb.is-selected{outline:3px double var(--ink);outline-offset:2px}
html.js .pdp-swatch,html.js .pdp-thumb{cursor:pointer}
.pdp-sizes{display:flex;flex-wrap:wrap;gap:6px}
.pdp-size-pill{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;font-family:var(--system-sm);font-size:13px;padding:3px 9px;border:var(--line);text-decoration:none;color:var(--ink)}
.pdp-size-pill.is-selected{outline:3px double var(--ink);outline-offset:2px}
.pdp-size-pill[data-available="false"]{color:var(--ink-70);text-decoration:line-through;pointer-events:none}
.pdp-buy[aria-disabled="true"]{opacity:.55;cursor:not-allowed;box-shadow:none}
.pdp-variant-note{font-family:var(--system-sm);font-size:15px}
.pdp-buy{align-self:flex-start;min-height:44px}
.pdp-state,.pdp-facts,.pdp-size-guide,.pdp-recovery{padding:16px;border:var(--line)}
.pdp-facts{display:flex;flex-direction:column;gap:12px}
.pdp-facts ul{padding-left:24px;display:flex;flex-direction:column;gap:8px}
.pdp-recovery{display:flex;flex-wrap:wrap;gap:16px}

@media (max-width:900px){
  .home-product-grid,.apparel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .apparel-controls{grid-template-columns:1fr 1fr}
  .apparel-filter-group:first-child{grid-column:1/-1}
  .pdp-layout{grid-template-columns:1fr}
  /* one-column reset: a stale grid-column:2 here would mint an implicit second
     column — auto placement restores DOM order (gallery above commerce). */
  .pdp-layout>.pdp-gallery,.pdp-layout>.pdp-commerce{grid-column:auto;grid-row:auto}
  /* keep the hero tall enough to lead but short enough that color/size/BUY
     land within the next half-screen of scroll */
  .pdp-hero{max-height:58vh}
}
@media (max-width:640px){
  .home-cover{min-height:calc(100vh - 32px - 28px - 72px - (2 * var(--ring)));min-height:calc(100dvh - 32px - 28px - 72px - (2 * var(--ring)))}
  .home-wordmark{left:16px;bottom:16px;font-size:56px}
  .home-categories{grid-template-columns:1fr}
  .home-identity{padding:12px 16px}
  .home-category{padding:16px;border-right:0;border-bottom:var(--line)}
  .home-category:last-child{border-bottom:0}
  .home-garments,.home-edit,.home-doors,.apparel-route,.pdp-route{padding:16px}
  .home-product-grid,.apparel-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .home-product>a,.apparel-card-link{padding:8px}
  .apparel-filter-toggle{display:inline-flex;align-items:center}
  html.js .apparel-route.has-mobile-filter .apparel-controls:not(.is-open){display:none}
  .apparel-controls{grid-template-columns:1fr;padding:12px}
  .apparel-filter-group:first-child{grid-column:auto}
}
@media (max-width:360px){
  .home-product-grid,.apparel-grid{grid-template-columns:1fr}
}

/* The six Phase 93.1 acceptance rigs include 320×568. Keep the modern Home,
   catalog and PDP on the same fixed shell there; legacy book/document routes
   retain the older below-640px grow rendition above. */
@media (max-height:639px){
  html.js:has(.home-route,.apparel-route,.pdp-route){overflow:clip}
  html.js body.os:has(.home-route,.apparel-route,.pdp-route){display:flex;flex-direction:column;height:100vh;height:100dvh;min-height:0;overflow:clip}
  html.js .stage:has(.home-route,.apparel-route,.pdp-route){flex:1;min-height:0;display:flex}
  html.js .win:has(.home-route,.apparel-route,.pdp-route){flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;margin-bottom:0}
  html.js .win:has(.home-route,.apparel-route,.pdp-route) .win-main{flex:1;min-height:0;display:flex;flex-direction:column}
  html.js .win:has(.home-route,.apparel-route,.pdp-route) .viewport{flex:1;min-height:0;height:auto;overflow-y:auto;overflow-x:hidden}
  html.js .win:has(.home-route) .cover-art{height:auto}
}

/* mobile-first-load-glitch (2026-09-01): the measured-viewport pin for the two
   rules the base @supports block (top of file, beside the shell column rule)
   cannot reach — the short-viewport modern shell above (its :has() selector
   outranks the plain shell pin) and .home-cover (whose ≤640px re-declaration
   sits later in the file than the base rule). Same touch-gated --shell-vvh,
   same inert 100dvh fallback everywhere JS hasn't measured. */
@supports (height:100dvh){
  @media (max-height:639px){
    html.js body.os:has(.home-route,.apparel-route,.pdp-route){height:var(--shell-vvh,100dvh)}
  }
  .home-cover{min-height:calc(var(--shell-vvh,100dvh) - 32px - 28px - 72px - (2 * var(--ring)))}
}

/* Phase 93.1 Plan 02 — neutral Supplements field-guide structure.
   Content remains final-position SSR; route color and emblem treatment stay
   outside this block for Phase 93.2. */
.supplements-field-guide{display:flex;flex-direction:column;background:var(--panel);color:var(--ink)}
.supp-guide-opening{display:grid;grid-template-columns:minmax(0,42fr) minmax(280px,58fr);border-bottom:var(--line)}
.supp-guide-visual{min-width:0;background:var(--paper)}
.supp-guide-visual picture{display:block;height:100%}
.supp-guide-visual img{display:block;width:100%;height:100%;object-fit:cover}
.supp-guide-index{padding:24px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.supp-guide-index ol{width:100%;list-style:none;display:flex;flex-direction:column;border-top:var(--line)}
.supp-guide-index li{border-bottom:var(--line)}
.supp-guide-index li a{min-height:44px;padding:8px 0;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--ink)}
.supp-jump{min-height:44px;padding:0 12px;border:var(--line);display:inline-flex;align-items:center;color:var(--ink)}
.supp-state-chip{padding:3px 8px;border:var(--line);background:var(--panel);color:var(--ink)}
.supp-atlas{display:flex;flex-direction:column}
.supp-product-band{min-height:420px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-bottom:var(--line);scroll-margin-top:16px}
.supp-product-band:nth-child(even) .supp-product-art{order:2}
.supp-product-band:nth-child(even) .supp-product-copy{order:1}
.supp-product-art{min-width:0;min-height:320px;background:var(--paper);overflow:hidden}
.supp-product-art img{display:block;width:100%;height:100%;object-fit:contain}
.supp-product-copy{min-width:0;padding:32px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:16px;border-left:var(--line)}
.supp-product-band:nth-child(even) .supp-product-copy{border-left:0;border-right:var(--line)}
.supp-product-copy header{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.supp-product-copy>p{max-width:56ch}
.supp-product-details{padding:12px 0;border-top:var(--line);border-bottom:var(--line)}
.supp-waitlist{border-bottom:var(--line)}
.supp-waitlist .os-kl{min-height:240px;justify-content:center}
.supplements-field-guide>.fda-rail{border-top:0}

@media (max-width:760px){
  .supp-guide-opening{grid-template-columns:minmax(0,1fr)}
  .supp-guide-visual{height:clamp(190px,38vh,320px)}
  .supp-guide-index{padding:16px}
  .supp-product-band{min-height:0;grid-template-columns:1fr}
  .supp-product-band:nth-child(even) .supp-product-art,.supp-product-band:nth-child(even) .supp-product-copy{order:initial}
  .supp-product-art{min-height:0;aspect-ratio:1/1}
  .supp-product-copy,.supp-product-band:nth-child(even) .supp-product-copy{padding:20px 16px;border-left:0;border-right:0;border-top:var(--line)}
}

@media (max-width:420px){
  .supp-guide-index h1{font-size:34px}
}

/* Phase 93.1 Plan 02 — neutral Name proof, Story editorial and Drink copy
   structure. Route color and emblem treatment remain Phase 93.2-owned. */
.name-proof,.story-editorial{display:flex;flex-direction:column;background:var(--panel);color:var(--ink)}
.name-proof-head{padding:32px;display:flex;flex-direction:column;gap:12px;border-bottom:var(--line)}
.name-proof-head>p{max-width:64ch}
.name-definitions{padding:32px;display:flex;flex-direction:column;gap:20px;border-bottom:var(--line)}
.name-records{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.name-record{min-width:0;padding:24px;border:var(--line);display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.name-language{text-transform:uppercase;letter-spacing:1px}
.name-spelling{font-size:38px}
.name-relationship{font-family:var(--system-sm);font-size:15px;letter-spacing:0;line-height:1.4}
.name-spelling,.name-meaning,.name-relationship{overflow-wrap:anywhere}
.name-source{margin-top:auto;min-height:44px;display:inline-flex;align-items:center;text-decoration:underline;text-underline-offset:3px}
.name-colophon{padding:24px 32px;border-bottom:var(--line);background:var(--paper)}

.story-headland{border-bottom:var(--line)}
.story-media{background:var(--paper)}
.story-media img{display:block;width:100%;height:auto;object-fit:cover}
.story-headland .story-media img{aspect-ratio:862/486}
.story-headland h1{padding:24px 32px}
.story-locked{padding:32px;border-bottom:var(--line);background:var(--paper)}
.story-letter-section{display:grid;grid-template-columns:minmax(280px,42fr) minmax(0,58fr);border-bottom:var(--line)}
.story-founder-media{min-width:0;border-right:var(--line)}
.story-founder-media picture{display:block;height:100%}
.story-founder-media img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.story-letter-copy{min-width:0;padding:32px;display:flex;align-items:center}
.story-letter-copy .letter{width:100%;max-width:62ch;margin:0}
.story-trail-inner{padding:32px;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.story-trail-inner h2{max-width:38ch}

@media (max-width:760px){
  .name-proof-head,.name-definitions,.name-colophon{padding:20px 16px}
  .name-records{grid-template-columns:1fr;gap:16px}
  .name-record{padding:16px}
  .name-spelling{font-size:28px}
  .story-headland h1,.story-locked,.story-letter-copy,.story-trail-inner{padding:20px 16px}
  .story-letter-section{grid-template-columns:1fr}
  .story-founder-media{border-right:0;border-bottom:var(--line)}
  .story-founder-media img{aspect-ratio:862/486}
}

/* Phase 93.1 Plan 03 — accessible progressive Contact form. Provider
   operations stay outside CSS and fail closed until the later operations gate. */
.contact-document{min-width:0}
.contact-layout{display:grid;grid-template-columns:minmax(0,4fr) minmax(360px,6fr);align-items:start;min-width:0}
.contact-context{min-width:0;padding:24px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.contact-context>p{max-width:64ch;overflow-wrap:anywhere}
.contact-context a{min-height:44px;display:inline-flex;align-items:center;overflow-wrap:anywhere;text-decoration:underline;text-underline-offset:3px}
.contact-form{min-width:0;padding:24px;border-left:var(--line);display:flex;flex-direction:column;gap:16px;box-sizing:border-box}
.contact-field{min-width:0;display:flex;flex-direction:column;gap:6px}
.contact-field label{font-family:var(--system);font-size:18px;line-height:1.2}
.contact-field input,.contact-field textarea{display:block;width:100%;min-width:0;min-height:44px;padding:10px 12px;border:var(--line);border-radius:0;box-sizing:border-box;background:var(--paper);color:var(--ink);font:inherit;line-height:1.3}
.contact-field textarea{min-height:156px;resize:vertical}
.contact-field input:focus-visible,.contact-field textarea:focus-visible,.contact-status:focus-visible{outline:3px double var(--ink);outline-offset:2px}
.contact-field [aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--ink)}
.contact-honeypot{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.contact-turnstile:empty{display:none}
.contact-status{min-height:44px;display:flex;align-items:center;max-width:64ch;overflow-wrap:anywhere}
.contact-status:empty{min-height:0}
.contact-status[data-state="validation"],.contact-status[data-state="unavailable"],.contact-status[data-state="delivery"]{font-weight:700}
.contact-form .btn{align-self:flex-start;min-width:88px;min-height:44px;height:auto;justify-content:center}
.contact-form .btn:disabled{cursor:not-allowed;opacity:.65}

@media (max-width:1200px){
  .contact-layout{grid-template-columns:1fr}
  .contact-context,.contact-form{padding:16px}
  .contact-form{border-left:0;border-top:var(--line)}
}