/* Vendored from /Users/stephhamill/ham-product-house/design/house.css (B1, the house). Edit it there, then copy it here. */
/* ==========================================================================
   THE HOUSE: one design system for HAM's free library
   --------------------------------------------------------------------------
   Used by every build: the small library PDFs (B2), the HAM Method tool (B3),
   the Data Room Kit (B4), the public diagnostic (B5), the Speaker Kit (B6)
   and the house pages on stephhamill.com (B7).

   Extends the HAM Agency tokens in /Users/stephhamill/ham-agency-site/src/styles/01-tokens.css:
   same fonts, same paper and ink, same vermilion. Adds five shelf colours,
   the print scale, the cover, the interior page grammar and the gate.

   Fonts: Newsreader (Production Type) and Schibsted Grotesk (Schibsted), both
   SIL Open Font Licence 1.1, checked at source 11 Sep 2026. Free for web,
   print, PDF embedding and commercial use. Self-host the woff2 files on the
   site (copy from /Users/stephhamill/ham-agency-site/dist/fonts). Load from Google Fonts only
   in previews and artifacts.

   Contrast, all checked 11 Sep 2026 (WCAG 2.2): paper text on every shelf
   colour passes AA at any size. Ink on paper 14.7:1, muted on paper 6.1:1.
   Vermilion is for blocks and large type only; small vermilion text uses
   --accent-deep (6.5:1).

   Rules that keep it one system:
   1. Colour never carries meaning alone. Every shelf colour sits next to the
      shelf's printed name.
   2. Vermilion belongs to the house, never to a shelf: the release number
      prefix, links, the house wordmark.
   3. Bottle green means one thing: a Confirmed grade.
   4. Two faces only. Newsreader speaks (titles, ledes, quotes). Schibsted
      Grotesk works (body, labels, numbers, interface).
   5. No em dashes, tildes or unusual symbols in anything set in this system,
      including file names. No trade mark symbols.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
  /* Ground and ink (from HAM) */
  --paper: #F3EDE3;
  --stone: #E6DDD0;
  --field: #FFFDF9;
  --ink: #1F1B16;
  --muted: #5F574D;
  --rule: #C9BEAE;          /* decorative hairline only */
  --line: #1F1B16;          /* structural hairline, form borders */

  /* House colour (from HAM) */
  --accent: #B83A1B;        /* vermilion: the house mark, links, blocks */
  --accent-deep: #9A2F17;   /* vermilion for small text */
  --accent-soft: #EBC9BC;
  --support: #1F4D3C;       /* bottle green: Confirmed grades only */

  /* The five shelves. Paper text on each passes AA. */
  --shelf-start: #83550A;   /* ochre: I have an idea */
  --shelf-decide: #6B2C5C;  /* plum: I'm stuck on a choice */
  --shelf-raise: #4A5A14;   /* olive: I need money */
  --shelf-run: #2B4C6C;     /* slate: I have to deliver */
  --shelf-think: #1F1B16;   /* ink: Ask, I need someone to ask (decided 11 Sep 2026; token name kept) */

  --shelf: var(--accent);   /* set per release with data-shelf */
  --on-shelf: var(--paper);

  /* Type */
  --serif: 'Syne', 'Helvetica Neue', Arial, sans-serif;
  --sans: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;

  /* Web scale (same steps as ham.agency) */
  --fs-00: 0.75rem;
  --fs-0: 0.875rem;
  --fs-1: 1.0625rem;
  --fs-2: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem);
  --fs-3: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  --fs-4: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  --fs-5: clamp(2.625rem, 1.6rem + 4.6vw, 5.75rem);
  --fs-num: clamp(4.5rem, 2rem + 11vw, 11rem);

  /* Print scale, in points, for A4 */
  --p-label: 7pt;
  --p-small: 8pt;
  --p-body: 10pt;
  --p-lede: 13pt;
  --p-h3: 14pt;
  --p-h2: 26pt;
  --p-title: 46pt;
  --p-num: 150pt;

  /* Space (web) */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem;
  --wrap: 78rem;
  --gutter: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  --measure: 38rem;

  /* Print grid: A4, 12 columns */
  --page-w: 210mm;
  --page-h: 297mm;
  --m-top: 12mm;
  --m-side: 14mm;
  --m-foot: 12mm;
  --col-gap: 4mm;
}

[data-shelf="start"]  { --shelf: var(--shelf-start); }
[data-shelf="decide"] { --shelf: var(--shelf-decide); }
[data-shelf="raise"]  { --shelf: var(--shelf-raise); }
[data-shelf="run"]    { --shelf: var(--shelf-run); }
[data-shelf="think"],
[data-shelf="ask"]    { --shelf: var(--shelf-think); }

/* ------------------------------------------------------ 1. release number */
/* The catalogue number. "No" in Newsreader italic, digits in Schibsted 800.
   Written No 05, said "number five", filed No005. */
.release-no {
  display: inline-flex; align-items: flex-start; gap: 0.06em;
  font: 800 var(--fs-num)/0.8 var(--sans);
  letter-spacing: -0.055em;
  font-variant-numeric: lining-nums tabular-nums;
}
.release-no .no {
  font: italic 500 0.26em/1 var(--serif);
  letter-spacing: 0; margin-top: 0.12em;
}

/* ----------------------------------------------------------- 2. shelf strip */
/* The recurring device. Five equal segments, the current one filled. Footer
   of every PDF page, top of every house web page, bottom of every cover. */
.shelf-strip {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.25em;
  list-style: none; margin: 0; padding: 0;
  font: 700 var(--fs-00)/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase;
}
.shelf-strip li {
  padding: 0.55em 0.6em 0.5em; border-top: 0.25em solid var(--rule); color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: clip;
}
.shelf-strip li[aria-current="true"] { background: var(--shelf); border-top-color: var(--shelf); color: var(--on-shelf); }
.shelf-strip li[data-shelf] { --shelf-local: var(--shelf); }
.shelf-strip a { color: inherit; text-decoration: none; }

/* ----------------------------------------------------------------- 3. cover */
/* One object at every size: A4 PDF, a web card, a social tile. Container
   query units, so it scales with its box and keeps its proportions. */
.cover {
  container-type: inline-size;
  aspect-ratio: 210 / 297; width: 100%;
  background: var(--paper); color: var(--ink);
  display: grid; grid-template-rows: auto 1fr auto auto;
  overflow: hidden; position: relative;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.cover-top {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 4.5cqw 6.5cqw 3cqw;
  font: 700 1.75cqw/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase;
}
.cover-top .house { font: italic 500 2.6cqw/1 var(--serif); letter-spacing: 0; text-transform: none; }
.cover-top .from b { color: var(--accent-deep); }
.cover-block {
  background: var(--shelf); color: var(--on-shelf);
  padding: 5.5cqw 6.5cqw 9cqw;
  display: flex; flex-direction: column; justify-content: space-between;
  clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%);   /* the hard diagonal */
}
.cover-shelf { display: flex; justify-content: space-between; align-items: baseline; gap: 4cqw; }
.cover-shelf .name { font: 800 2.2cqw/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
.cover-shelf .problem { font: italic 400 4.4cqw/1.1 var(--serif); text-align: right; }
.cover-block .release-no { font-size: 36cqw; }
.cover-title { padding: 1cqw 6.5cqw 0; }
.cover-title h1 {
  font: 500 9.6cqw/0.98 var(--serif); letter-spacing: -0.02em; margin: 0 0 2.4cqw; text-wrap: balance;
  font-variation-settings: 'opsz' 72;
}
.cover-title p { font: 400 2.9cqw/1.35 var(--sans); margin: 0; max-width: 34ch; color: var(--ink); }
.cover-meta {
  display: flex; flex-wrap: wrap; gap: 0 5cqw; list-style: none;
  margin: 4.5cqw 6.5cqw 0; padding: 2cqw 0 0; border-top: 0.3cqw solid var(--ink);
  font: 700 1.6cqw/1.6 var(--sans); letter-spacing: 0.1em; text-transform: uppercase;
}
.cover-meta span { color: var(--muted); font-weight: 600; }
.cover-foot { padding: 4.5cqw 6.5cqw 4.5cqw; display: grid; gap: 2.2cqw; }
.cover-foot .shelf-strip { font-size: 1.45cqw; }
.cover-foot .licence-short { font: 400 1.5cqw/1.4 var(--sans); color: var(--muted); display: flex; justify-content: space-between; gap: 3cqw; }
.cover-foot .licence-short b { color: var(--ink); font-weight: 700; }

/* ------------------------------------------------------------ 4. gate (web) */
/* One field. Work email or WhatsApp number. States: ready, code sent,
   verified, error. Wording is counsel's, in gate/GATE-SPEC.md. */
.gate { max-width: 34rem; border-top: 3px solid var(--ink); padding-top: var(--s-4); }
.gate .label { display: block; font: 700 var(--fs-0)/1.3 var(--sans); margin-bottom: var(--s-2); }
.gate .hint { display: block; font: 400 var(--fs-0)/1.4 var(--sans); color: var(--muted); margin: 0 0 var(--s-3); }
.gate-row { display: flex; gap: 0; }
.gate-row input {
  flex: 1 1 auto; min-width: 0; font: 400 var(--fs-1)/1.4 var(--sans); color: var(--ink);
  background: var(--field); border: 1.5px solid var(--line); border-right: 0; border-radius: 0;
  padding: 0.75rem 0.85rem; min-height: 3rem;
}
.gate-row input.code { letter-spacing: 0.4em; font-variant-numeric: tabular-nums; font-weight: 700; }
.gate-row button, .btn {
  font: 700 var(--fs-0)/1 var(--sans); letter-spacing: 0.04em;
  background: var(--ink); color: var(--paper); border: 1.5px solid var(--ink); border-radius: 0;
  padding: 0 1.2rem; min-height: 3rem; cursor: pointer; white-space: nowrap;
}
.gate-row button:hover, .btn:hover { background: var(--accent); border-color: var(--accent); }
.gate .check { display: flex; gap: var(--s-3); align-items: flex-start; font: 400 var(--fs-0)/1.45 var(--sans); margin: var(--s-4) 0 0; }
.gate .check input { width: 1.25rem; height: 1.25rem; margin: 0.1rem 0 0; accent-color: var(--ink); flex: none; }
.gate .notice { font: 400 var(--fs-00)/1.5 var(--sans); color: var(--muted); margin: var(--s-4) 0 0; }
.gate .notice a { color: var(--ink); text-decoration-color: var(--accent); }
.gate-status { min-height: 1.5em; margin: var(--s-3) 0 0; font: 600 var(--fs-0)/1.4 var(--sans); }
.gate-status.is-error { color: var(--accent-deep); }
.gate-status.is-done { color: var(--support); }

/* ---------------------------------------------------------- 5. release card */
/* The shelf listing on the web. Mini cover left, facts right. Same edges on
   every card; the button always sits at the foot. */
.release-card {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--s-4);
  border-top: 3px solid var(--shelf); padding-top: var(--s-4);
}
.release-card .cover { box-shadow: 0 1px 0 var(--rule); }
.release-card .meta { display: flex; flex-direction: column; gap: var(--s-2); }
.release-card .kicker { font: 700 var(--fs-00)/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.release-card h3 { font: 500 var(--fs-2)/1.15 var(--serif); margin: 0; }
.release-card p { margin: 0; font-size: var(--fs-0); }
.release-card .btn { align-self: flex-start; margin-top: auto; min-height: 2.5rem; }

/* --------------------------------------------------------- 6. licence line */
.licence { font: 400 var(--fs-00)/1.5 var(--sans); color: var(--muted); border-top: 1px solid var(--rule); padding-top: var(--s-2); }
.licence b { color: var(--ink); }

/* ------------------------------------------------------------ 7. end band */
/* The close. Shelf colour, hard diagonal, one line. */
.end-band {
  background: var(--shelf); color: var(--on-shelf);
  clip-path: polygon(0 22%, 100% 0, 100% 100%, 0 100%);
  padding: 3.5rem var(--gutter) 1.75rem;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.end-band p { font: italic 500 var(--fs-4)/1 var(--serif); margin: 0; }

/* ======================================================= PRINT: A4 pages */
@page { size: A4; margin: 0; }
@media print { html, body { background: var(--paper); margin: 0; } }

.page {
  width: var(--page-w); height: var(--page-h);
  padding: var(--m-top) var(--m-side) var(--m-foot);
  background: var(--paper); color: var(--ink);
  display: grid; grid-template-rows: auto 1fr auto; row-gap: 7mm;
  break-after: page; overflow: hidden; position: relative;
  font: 400 var(--p-body)/1.48 var(--sans);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.page--landscape { width: var(--page-h); height: var(--page-w); }   /* Speaker Kit, deck handouts */
.page--cover { padding: 0; display: block; }
.page--cover .cover { width: var(--page-w); height: var(--page-h); aspect-ratio: auto; }

.running-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 2.5mm; border-bottom: 0.75pt solid var(--ink);
  font: 700 var(--p-label)/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase;
}
.running-head .no { font: italic 500 9pt/1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--accent-deep); }
.running-head .title { font: 500 9pt/1 var(--serif); letter-spacing: 0; text-transform: none; margin-left: 2mm; }

.page-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6mm; align-items: end; }
.page-foot .shelf-strip { font-size: 6.2pt; }
.page-foot .folio { font: 800 14pt/1 var(--sans); font-variant-numeric: tabular-nums; }
.page-foot .licence-short { grid-column: 1 / -1; font: 400 6.5pt/1.4 var(--sans); color: var(--muted); display: flex; justify-content: space-between; }

.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-content: start; }
.span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; } .span-12 { grid-column: 1 / -1; }

/* Zones. One visual job each. */
.z { margin-bottom: 7mm; }
.z-label { font: 700 var(--p-label)/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 3mm; }
.z-opener .sec { font: 800 54pt/0.8 var(--sans); letter-spacing: -0.05em; color: var(--shelf); margin: 0 0 4mm; }
.z-opener h2 { font: 500 var(--p-h2)/1.02 var(--serif); letter-spacing: -0.015em; margin: 0 0 4mm; text-wrap: balance; }
.z-opener .lede { font: 400 var(--p-lede)/1.4 var(--serif); margin: 0; }
.page p { margin: 0 0 2.6mm; }
.page h3 { font: 700 var(--p-h3)/1.2 var(--sans); margin: 0 0 2mm; }

.z-rows { list-style: none; margin: 0; padding: 0; border-top: 1.5pt solid var(--ink); counter-reset: row; }
.z-rows > li { counter-increment: row; display: grid; grid-template-columns: 12mm minmax(0, 1fr); gap: 4mm; padding: 3.5mm 0; border-bottom: 0.5pt solid var(--rule); }
.z-rows > li::before { content: counter(row); font: 800 20pt/0.9 var(--sans); color: var(--shelf); font-variant-numeric: tabular-nums; }
.z-rows h4 { font: 500 13pt/1.15 var(--serif); margin: 0 0 1.2mm; }
.z-rows p { margin: 0; }

.z-quote { font: italic 400 17pt/1.25 var(--serif); border-left: 2.5pt solid var(--accent); padding-left: 5mm; margin: 0; }

.z-fill { border-top: 1.5pt solid var(--ink); }
.z-fill .prompt { display: grid; grid-template-columns: 8mm minmax(0, 1fr); gap: 3mm; padding: 3mm 0 0; }
.z-fill .prompt b { font: 800 11pt/1 var(--sans); color: var(--shelf); }
.z-fill .prompt p { font: 500 11pt/1.3 var(--serif); margin: 0 0 1mm; }
.z-fill .lines { grid-column: 2; height: 17mm; background: repeating-linear-gradient(to bottom, transparent 0 7.6mm, var(--rule) 7.6mm 8.1mm); }

.z-check { list-style: none; margin: 0; padding: 0; border-top: 1.5pt solid var(--ink); }
.z-check li { display: grid; grid-template-columns: 6mm minmax(0, 1fr); gap: 3mm; padding: 2.4mm 0; border-bottom: 0.5pt solid var(--rule); }
.z-check li::before { content: ''; width: 3.6mm; height: 3.6mm; border: 1pt solid var(--ink); margin-top: 0.4mm; }

.z-example { background: var(--stone); padding: 5mm; }
.z-example .z-label { color: var(--ink); }

.z-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5mm; list-style: none; padding: 0; margin: 0; }
.z-stats li { border-top: 2pt solid var(--ink); padding-top: 2.5mm; }
.z-stats .n { font: 800 34pt/0.9 var(--sans); letter-spacing: -0.04em; display: block; }
.z-stats .grade { display: inline-block; font: 700 6pt/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; padding: 1mm 1.4mm 0.8mm; border: 0.75pt solid currentColor; margin-top: 1.5mm; }
.z-stats .grade.confirmed { background: var(--support); border-color: var(--support); color: var(--paper); }
.z-stats .grade.estimated { border-style: dashed; color: var(--muted); }

.page .end-band { margin: 0 calc(-1 * var(--m-side)); padding: 16mm var(--m-side) 8mm; }
.page .end-band p { font-size: 38pt; }

/* ==========================================================================
   The house pages on stephhamill.com: /shelf, each release, the licence,
   privacy and admin. Page chrome and layout around the components in
   house.css. Fonts are self-hosted. No third-party anything.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
body.house { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--fs-1)/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.house a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1.5px; }
.house a:hover { color: var(--accent-deep); }
.house :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.house h1, .house h2, .house h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.015em; margin: 0 0 var(--s-3); text-wrap: balance; }
.house h1 { font-size: var(--fs-5); line-height: 0.98; font-variation-settings: 'opsz' 72; }
.house h2 { font-size: var(--fs-4); line-height: 1.02; }
.house h3 { font-size: var(--fs-2); line-height: 1.15; }
.house p { margin: 0 0 var(--s-4); }
.house img { max-width: 100%; height: auto; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 10; background: var(--ink); color: var(--paper); padding: 0.7rem 1rem; font: 700 var(--fs-0)/1 var(--sans); }
.skip:focus { left: 1rem; top: 1rem; color: var(--paper); }

.kicker { font: 700 var(--fs-00)/1.3 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s-3); }
.lede { font: 400 var(--fs-3)/1.22 var(--serif); margin: 0 0 var(--s-5); max-width: 30ch; }
.muted { color: var(--muted); }

/* House bar and shelf strip: the top of every house page. */
.house-bar { border-bottom: 1.5px solid var(--ink); }
.house-bar-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding-block: var(--s-4) var(--s-3); }
.house .house-mark { text-decoration: none; color: var(--accent-deep); font: italic 500 var(--fs-2)/1 var(--serif); }
.house-mark span { font: 700 var(--fs-00)/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); margin-left: 0.5em; }
.house-mark b { color: var(--accent-deep); }
.house .house-home { font: 700 var(--fs-00)/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; }
.house-session { margin: 0 0 0 auto; font: 400 var(--fs-00)/1.4 var(--sans); color: var(--muted); text-align: right; }
.house-session .linkish { font-size: var(--fs-00); margin-left: var(--s-2); }
.count-switch { background: var(--stone); padding: var(--s-4); margin: 0 0 var(--s-5); }
.count-switch p { margin: 0 0 var(--s-3); }
.house-strip { padding-block: var(--s-3) 0; }
.house-strip .shelf-strip li { border-top-color: var(--shelf); }
.house-strip .shelf-strip li:not([aria-current="true"]) { color: var(--ink); }
.house-strip .shelf-strip a { display: block; text-decoration: none; }
.house-strip .shelf-strip li[aria-current="true"] a { color: var(--on-shelf); }

/* /shelf */
.house-intro { padding-block: var(--s-8) var(--s-7); }
.house-intro h1 { font-style: italic; }
.house-intro p:not(.lede):not(.kicker) { max-width: var(--measure); }

.house-shelf { border-top: 6px solid var(--shelf); padding-block: var(--s-6) var(--s-7); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-6); scroll-margin-top: var(--s-4); }
.house-shelf-head h2 { font: 800 var(--fs-0)/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--shelf); margin: 0 0 var(--s-3); }
.house-shelf-head .problem { font: italic 400 var(--fs-4)/1.02 var(--serif); margin: 0 0 var(--s-4); }
.house-shelf-head .blurb { color: var(--muted); max-width: 34ch; }
.house-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); }
.house-row { border-top: 1px solid var(--rule); padding-top: var(--s-3); }
.house-row h3 { margin-bottom: var(--s-2); }
.house-row p { margin: 0; font-size: var(--fs-0); color: var(--muted); }
.house-row .kicker { margin-bottom: var(--s-2); }
.release-card h3 a { text-decoration: none; }
.release-card .btn { text-decoration: none; }

/* The mini cover: decorative, so the title is a span, not a heading. */
.cover-title .t { display: block; font: 500 9.6cqw/0.98 var(--serif); letter-spacing: -0.02em; margin: 0 0 2.4cqw; text-wrap: balance; }
.cover-block .none { font: 800 12cqw/0.9 var(--sans); letter-spacing: -0.04em; opacity: 0.35; }

.house-how { padding-block: var(--s-7); }
.rows { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); counter-reset: row; max-width: 46rem; }
.rows li { counter-increment: row; display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--s-3); padding-block: var(--s-4); border-bottom: 1px solid var(--rule); }
.rows li::before { content: counter(row); font: 800 var(--fs-3)/1 var(--sans); color: var(--accent-deep); font-variant-numeric: tabular-nums; }

.house-release { padding-block: 0 var(--s-7); max-width: 46rem; }
.house-release .licence { margin-top: var(--s-5); }
.end-band { margin-top: var(--s-6); }

.house-foot { padding-block: var(--s-6) var(--s-7); font-size: var(--fs-0); color: var(--muted); }
.house-foot p { margin: 0 0 var(--s-3); max-width: 72ch; }
.house-foot nav { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }

/* A release page */
.crumbs { font: 600 var(--fs-00)/1.4 var(--sans); letter-spacing: 0.06em; padding-top: var(--s-5); color: var(--muted); }
.crumbs a { color: var(--muted); }
.release { padding-block: var(--s-6) var(--s-7); }
.release-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-7); align-items: start; }
.release-cover { position: sticky; top: var(--s-5); }
.release-main h1 { font-size: var(--fs-4); }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-2) var(--s-4); border-top: 1.5px solid var(--ink); padding-top: var(--s-3); margin: 0 0 var(--s-6); }
.facts dt { font: 700 var(--fs-00)/1.7 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; font-size: var(--fs-0); }
.release-body h2 { font-size: var(--fs-3); margin-top: var(--s-6); }
.release-body ol, .release-body ul { padding-left: 1.25em; }
.release-body li { margin-bottom: var(--s-2); }
.release-get { background: var(--stone); padding: var(--s-6); margin: var(--s-6) 0; scroll-margin-top: var(--s-4); }
.release-get h2 { font-size: var(--fs-3); }
.sources { font-size: var(--fs-0); color: var(--muted); }
.sources ul { padding-left: 1.1em; }

/* Gate additions (the component itself is in house.css). */
.gate-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.gate-status:empty { min-height: 0; margin: 0; }
.gate-links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: var(--s-3) 0 0; }
.linkish { background: none; border: 0; padding: 0; min-height: 24px; font: 600 var(--fs-0)/1.4 var(--sans); color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.18em; cursor: pointer; }
.btn { display: inline-flex; align-items: center; text-decoration: none; }
.house a.btn, .house a.btn:hover { color: var(--paper); }
.gate-deliver { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; margin: var(--s-3) 0 0; }
.gate[aria-busy="true"] button { opacity: 0.6; cursor: progress; }
.gate input:disabled, .gate button:disabled { opacity: 0.55; cursor: not-allowed; }
.gate [aria-invalid="true"] { border-color: var(--accent-deep); box-shadow: inset 0 0 0 1px var(--accent-deep); }

/* Privacy, licence and simple pages */
.prose { max-width: 46rem; padding-block: var(--s-7); }
.prose h2 { font-size: var(--fs-3); margin-top: var(--s-7); scroll-margin-top: var(--s-4); }
.prose h3 { margin-top: var(--s-5); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-0); margin: 0 0 var(--s-5); display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: var(--s-2) var(--s-3) var(--s-2) 0; border-bottom: 1px solid var(--rule); }
.prose th { font-weight: 700; border-bottom: 1.5px solid var(--ink); }
.status-note { background: var(--stone); padding: var(--s-4); font-size: var(--fs-0); }
.shelf-simple { padding-block: var(--s-7); max-width: 40rem; }

/* Admin */
.admin { padding-block: var(--s-7); max-width: 46rem; }
.admin section { border-top: 2px solid var(--ink); padding-top: var(--s-4); margin-top: var(--s-6); }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--s-4); margin: 0 0 var(--s-5); }
.admin-stats div { border-top: 1px solid var(--rule); padding-top: var(--s-2); }
.admin-stats dt { font: 700 var(--fs-00)/1.4 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.admin-stats dd { margin: 0; font: 800 var(--fs-3)/1 var(--sans); }
.admin .actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* The gated release, served by /api/shelf: made to print. */
.release-print .print-wrap { max-width: 46rem; padding-block: var(--s-6) var(--s-7); }
.release-print .running { display: flex; justify-content: space-between; gap: var(--s-4); border-bottom: 1.5px solid var(--ink); padding-bottom: var(--s-2); font: 700 var(--fs-00)/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; }
.release-print h1 { font-size: var(--fs-4); margin-top: var(--s-6); }
.release-print h2 { font-size: var(--fs-3); margin-top: var(--s-6); border-top: 1.5px solid var(--ink); padding-top: var(--s-3); }
.release-print li:has(> input[type="checkbox"]) { list-style: none; margin-left: -1.25em; }
.release-print input[type="checkbox"] { width: 1rem; height: 1rem; margin: 0 0.6rem 0 0; vertical-align: -0.15em; accent-color: var(--ink); }
.release-print table { width: 100%; border-collapse: collapse; font-size: var(--fs-0); }
.release-print th, .release-print td { text-align: left; padding: var(--s-2) var(--s-3) var(--s-2) 0; border-bottom: 1px solid var(--rule); vertical-align: top; }

@media (max-width: 760px) {
  .house-shelf, .release-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .release-cover { position: static; max-width: 15rem; }
  .house-bar-row { flex-wrap: wrap; }
  .release-card { grid-template-columns: 5.5rem minmax(0, 1fr); }
}
@media print {
  .no-print, .house-bar, .house-foot, .skip { display: none !important; }
  body.house { background: #fff; }
  .release-print .print-wrap { max-width: none; padding: 0; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }

/* ============================================================
   The house pages on the site's own ground. October 2026.
   house.css and shelf.css set the layout; this file, loaded last,
   moves the free tools, the licence and the privacy notice onto
   Steph's ground, lavender and faces, so the whole site reads as
   one. No serif is loaded: every rule that asks for one gets
   Syne. The printed tools keep a white page.
   ============================================================ */
@font-face { font-family:'Syne'; src:url('/fonts/syne-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Syne'; src:url('/fonts/syne-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Syne'; src:url('/fonts/syne-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'DM Sans'; src:url('/fonts/dm-sans-opsz.woff2') format('woff2-variations'); font-weight:100 1000; font-display:swap; }
@font-face { font-family:'DM Sans'; src:url('/fonts/dm-sans-opsz-italic.woff2') format('woff2-variations'); font-weight:100 1000; font-style:italic; font-display:swap; }
@font-face { font-family:'DM Mono'; src:url('/fonts/dm-mono-500.woff2') format('woff2'); font-weight:500; font-display:swap; }

:root {
  --paper:#0C0C0E; --stone:#131315; --field:#17171A;
  --ink:#EDEAE5; --muted:rgba(237,234,229,0.68);
  --rule:rgba(184,169,232,0.16); --line:rgba(237,234,229,0.5);
  --accent:#B8A9E8; --accent-deep:#B8A9E8; --accent-soft:rgba(184,169,232,0.16); --support:#6FBF93;
  /* The five shelves, lifted so they read on a dark ground. Dark text on each passes AA. */
  --shelf-start:#E0B45C; --shelf-decide:#D9A6CE; --shelf-raise:#B9C97A; --shelf-run:#9DBBDD; --shelf-think:#EDEAE5;
  --on-shelf:#0C0C0E;
  --serif:'Syne','Helvetica Neue',Arial,sans-serif;
  --sans:'DM Sans','Helvetica Neue',Arial,sans-serif;
  --mono:'DM Mono',ui-monospace,Menlo,monospace;
  --gutter:clamp(1.5rem, 0.6rem + 4.2vw, 5.5rem);
  --wrap:84rem;
  color-scheme:dark;
}
html { background:var(--paper); }
body.house { -webkit-font-smoothing:antialiased; line-height:1.65; }
.house h1, .house h2, .house h3 { font-family:var(--serif); font-weight:600; letter-spacing:-0.035em; font-style:normal; }
.house [class] { font-style:normal; }
.house em { font-style:italic; }
.house ::selection { background:var(--accent); color:#0C0C0E; }
.house :focus-visible { outline:2px solid var(--accent); outline-offset:4px; }

/* Labels move to the mono furniture face. */
.kicker, .house-mark span, .house .house-home, .crumbs, .facts dt, .admin-stats dt, .release-card .kicker, .shelf-strip a, .house-shelf-head h2 { font-family:var(--mono); font-weight:500; letter-spacing:0.11em; }
.house .house-mark { font:600 var(--fs-2)/1 var(--serif); letter-spacing:-0.03em; color:var(--ink); }
.house-shelf-head .problem, .lede, .cover-title .t, .cover-shelf .problem, .release-card h3, .end-band p { font-family:var(--serif); font-weight:500; letter-spacing:-0.03em; }
.house-bar { background:rgba(12,12,14,0.86); border-bottom:1px solid var(--rule); }

/* Buttons and fields: filled lavender for the one action, hairlines for the rest. */
.house a.btn, .house a.btn:hover, .house .btn { background:var(--accent); color:#0C0C0E; border-color:var(--accent); border-radius:4px; }
.gate input[type], .gate-row input { background:var(--field); color:var(--ink); border-color:var(--line); border-radius:4px 0 0 4px; }
.gate button[type='submit'], .gate-row button { background:var(--accent); color:#0C0C0E; border-color:var(--accent); border-radius:0 4px 4px 0; }
.cover { background:var(--stone); color:var(--ink); border:1px solid var(--rule); border-radius:4px; }
.end-band { background:var(--accent); color:#0C0C0E; }
.end-band p { color:#0C0C0E; }
.skip, .skip:focus { background:var(--accent); color:#0C0C0E; }
.status-note { color:var(--ink); border-color:var(--line); }

/* The tool itself, as delivered. On screen it sits on the site's ground; printed, it is ink on white. */
.release-print .print-wrap { max-width:64rem; }
.release-print input[type="checkbox"] { -webkit-appearance:none; appearance:none; width:0.95rem; height:0.95rem; border:1px solid var(--line); border-radius:3px; background:none; opacity:1; }
.tool-bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:2.75rem; margin:0 0 1.25rem; }
.tool-bar > a { white-space:nowrap; font:500 0.6875rem/1 var(--mono); letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); text-decoration:none; }
.tool-bar > a:hover { color:var(--ink); }
.tool-actions { display:inline-flex; align-items:center; gap:0.5rem; }
.house .tool-bar .btn { display:inline-flex; align-items:center; text-decoration:none; text-transform:none; letter-spacing:0; white-space:nowrap; min-height:2.75rem; padding:0 1.35rem; border:0; border-radius:999px; background:#EDEAE5; color:#0C0C0E; font:500 0.875rem/1 var(--sans); cursor:pointer; }
.house .tool-bar .btn-quiet { background:none; color:#EDEAE5; box-shadow:inset 0 0 0 1px rgba(237,234,229,0.28); }
.sheet, .sheet-notes { background:var(--stone); border:1px solid rgba(237,234,229,0.1); border-radius:1.75rem; padding:clamp(1.25rem, 4vw, 3rem); }
.sheet-notes { margin-top:1.25rem; }
.release-print .running { font:500 0.6875rem/1.3 var(--mono); letter-spacing:0.1em; border-bottom:1px solid var(--line); padding-bottom:0.75rem; margin:0; color:var(--muted); }
.release-print .running { align-items:center; }
.release-print .running-from { display:inline-flex; align-items:center; gap:0.9rem; color:inherit; text-decoration:none; }
.ham-mark { display:inline-flex; align-items:baseline; font:700 1.5rem/1 var(--serif); letter-spacing:-0.05em; text-transform:none; color:var(--ink); }
.ham-mark::after { content:""; width:0; height:0; border:0.14em solid #B8A9E8; margin-left:0.08em; }
.sheet h1 { font:600 clamp(2.5rem, 1.5rem + 4.5vw, 4.5rem)/0.95 var(--serif); letter-spacing:-0.05em; margin:clamp(1.5rem, 4vw, 2.5rem) 0 0.75rem; }
.sheet .lede { font:500 var(--fs-2)/1.25 var(--serif); letter-spacing:-0.03em; color:var(--muted); max-width:none; margin:0; }
.sheet-fill { display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 1fr); gap:1.25rem; margin:clamp(1.5rem, 4vw, 2.25rem) 0 0; }
.sheet-fill div { display:flex; align-items:flex-end; min-height:2.5rem; padding-bottom:0.5rem; border-bottom:1px solid var(--line); }
.sheet-fill dt, .box-n { font:500 0.6875rem/1 var(--mono); letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); }
.sheet-fill dd { margin:0; }
.boxes { list-style:none; margin:1.25rem 0 0; padding:0; display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:0.75rem; }
.box { grid-column:span 3; min-height:13rem; margin:0; padding:1.1rem 1.2rem; border:1px solid rgba(237,234,229,0.2); border-radius:1.1rem; }
.boxes-7 .box:nth-child(n+3):nth-child(-n+5) { grid-column:span 2; }
.release-print .box h2 { display:flex; align-items:baseline; gap:0.6rem; margin:0; padding:0; border:0; font:600 1.25rem/1.1 var(--serif); letter-spacing:-0.035em; }
.box-ask { margin:0.4rem 0 0; font:400 0.875rem/1.4 var(--sans); color:var(--muted); }
.sheet-foot { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0.5rem 2rem; margin-top:1.5rem; font:400 0.75rem/1.5 var(--sans); color:var(--muted); }
.sheet-foot p { margin:0; }
.sheet-foot b { color:var(--ink); font-weight:500; }
.release-print .sheet-notes h2 { border:0; padding:0; margin:clamp(1.75rem, 4vw, 2.5rem) 0 1rem; font:600 var(--fs-3)/1 var(--serif); letter-spacing:-0.04em; }
.sheet-how ol { margin:0; padding:0; list-style:none; counter-reset:how; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 2.5rem; }
.sheet-how li { counter-increment:how; display:flex; gap:0.9rem; padding:0.8rem 0; border-top:1px solid var(--rule); margin:0; }
.sheet-how li::before { content:counter(how); font:500 0.6875rem/1.9 var(--mono); color:var(--accent); }
.note-grid { columns:2; column-gap:2.5rem; }
.note { break-inside:avoid; border-top:1px solid var(--rule); padding:1rem 0 1.1rem; }
.note h3 { margin:0 0 0.5rem; font:600 1.125rem/1.2 var(--serif); letter-spacing:-0.03em; }
.note p { margin:0 0 0.6rem; color:var(--muted); }
.note ul { margin:0; padding:0; }
.release-print .note li:has(> input) { position:relative; margin:0.3rem 0; padding-left:1.7em; list-style:none; }
.release-print .note tr:last-child td { border-bottom:0; padding-bottom:0; }
.release-print .note li > input[type="checkbox"] { position:absolute; left:0; top:0.3em; margin:0; }
.release-print .note table { margin-top:0.25rem; font-size:inherit; }
.release-print .note td, .release-print .note th { padding:0.6rem 0; }
.note th { font:500 0.6875rem/1 var(--mono); letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); }
.note td:last-child, .note th:last-child { width:34%; }
.sheet-licence { margin-top:1.5rem; border-top:1px solid var(--line); font:400 0.75rem/1.55 var(--sans); color:var(--muted); }
.release-print .sheet-licence h2 { margin:1rem 0 0.4rem; font:500 0.6875rem/1 var(--mono); letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); }
.sheet-licence p { margin:0 0 0.5rem; }
@media (max-width:44rem) {
  .release-print .boxes .box:nth-child(n):nth-child(n) { grid-column:1 / -1; min-height:8.5rem; }
  .sheet-fill, .sheet-foot, .sheet-how ol { grid-template-columns:minmax(0, 1fr); }
  .note-grid { columns:1; }
  .release-print .running { flex-direction:column; align-items:flex-start; gap:0.6rem; }
}
/* Printed: A4, the boxes on page one, the notes on page two. The page margin is zero so the browser adds no
   address or date line of its own; each page carries its margin as padding. */
@media print {
  html:has(body.release-print) { background:#FFFFFF; }
  body.release-print { --paper:#FFFFFF; --stone:#FFFFFF; --field:#FFFFFF; --ink:#111111; --muted:#444444; --rule:#BBBBBB; --line:#111111; --accent:#111111; --accent-deep:#111111; background:#FFFFFF; color:#111111; color-scheme:light; font-size:9pt; }
  .release-print .sheet, .release-print .sheet-notes { box-sizing:border-box; width:210mm; margin:0; padding:12mm 13mm 9mm; border:0; border-radius:0; }
  .release-print .sheet { height:297mm; display:flex; flex-direction:column; overflow:hidden; break-after:page; }
  .release-print .sheet-notes { min-height:296mm; display:flex; flex-direction:column; }
  .release-print .sheet-licence { margin-top:auto; }
  .release-print .note td, .release-print .note th { padding:2mm 0; }
  .release-print .running { font-size:6.5pt; padding-bottom:2mm; color:#111111; }
  .ham-mark { font-size:15pt; }
  .release-print .running-from { gap:3mm; }
  .sheet h1 { font-size:34pt; margin:8mm 0 2mm; }
  .sheet .lede { font-size:12pt; color:#111111; }
  .sheet-fill { margin-top:5mm; gap:6mm; }
  .sheet-fill div { min-height:8mm; padding-bottom:1.5mm; border-bottom-width:0.6pt; }
  .sheet-fill dt, .box-n { font-size:6.5pt; }
  .boxes { flex:1; min-height:0; margin-top:5mm; gap:2.5mm; grid-template-rows:repeat(3, minmax(0, 1fr)); }
  .box { min-height:0; padding:3.5mm 4mm; border:0.6pt solid #111111; border-radius:2.5mm; }
  .release-print .box h2 { font-size:12.5pt; gap:2mm; }
  .box-ask { font-size:8.5pt; margin-top:1.2mm; }
  .sheet-foot { margin-top:4mm; gap:0 8mm; font-size:6.5pt; }
  .release-print .sheet-notes h2 { font-size:17pt; margin:8mm 0 3mm; }
  .sheet-how li { padding:2mm 0; }
  .sheet-how li::before, .note th { font-size:6.5pt; }
  .note { padding:3mm 0 3.5mm; }
  .note h3 { font-size:11pt; margin-bottom:1.5mm; }
  .note p { margin-bottom:1.5mm; }
  .release-print .note li:has(> input) { margin:1mm 0; }
  .release-print input[type="checkbox"] { width:3.2mm; height:3.2mm; border:0.6pt solid #111111; border-radius:0.6mm; }
  .sheet-licence { font-size:6.5pt; }
  .release-print .sheet-licence h2 { font-size:6.5pt; margin:3mm 0 1.5mm; }
  .release-print:not(.is-sheet) .print-wrap { padding:14mm; }
}

/* Motion, the same guard as the rest of the site: nothing is hidden without the script, with reduced motion, or if the script fails. */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.no-motion) [data-rise] { opacity:0; transform:translate3d(0, 26px, 0); transition:opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); transition-delay:calc(var(--i, 0) * 85ms); }
  html.js:not(.no-motion) [data-rise].is-in { opacity:1; transform:none; }
  html.js:not(.no-motion) [data-lift] { opacity:0; transform:translate3d(0, 48px, 0) scale(0.97); transition:opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.3s cubic-bezier(0.16, 1, 0.3, 1); }
  html.js:not(.no-motion) [data-lift].is-in { opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
.scroll-progress { position:fixed; top:0; left:0; right:0; height:2px; z-index:60; background:var(--accent); transform-origin:0 50%; transform:scaleX(var(--sp, 0)); pointer-events:none; }
.zline { display:none; }
.end-band p, .release-no .no, .running-head .no, .z-quote, .cover-top .house, .cover-shelf .problem { font-style:normal; }

/* ---------- The site's own menu, on the free tools pages too. Values are written out because this
   stylesheet's tokens are the shelf's, not the site's. Keep in step with the header rules in site.css. ---------- */
body.house { padding-top:5.25rem; }
body.release-print { padding-top:0; }
.site-header { position:fixed; top:0; left:0; right:0; z-index:60; padding:1rem 1rem 0; pointer-events:none; }
.nav-pill { position:relative; pointer-events:auto; max-width:66rem; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:3.5rem; padding:0.4rem 0.4rem 0.4rem 1.4rem; border-radius:999px; background:rgba(24,24,28,0.72); -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%); border:1px solid rgba(237,234,229,0.1); }
.house .brand { display:inline-flex; align-items:center; gap:0.55em; padding:0.5rem 0; text-decoration:none; font:600 1.125rem/1 'Syne','Helvetica Neue',Arial,sans-serif; letter-spacing:-0.045em; color:#EDEAE5; white-space:nowrap; }
.brand::before { content:""; width:1px; height:1.15em; background:linear-gradient(180deg, transparent, #fff 30%, #fff 70%, transparent); box-shadow:0 0 10px 1px #B8A9E8; transform:rotate(14deg); }
.site-nav ul { list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:0.25rem; }
.house .site-nav a { display:inline-flex; align-items:center; min-height:2.6rem; padding:0 0.95rem; border-radius:999px; font:400 0.875rem/1 'DM Sans','Helvetica Neue',Arial,sans-serif; color:rgba(237,234,229,0.64); text-decoration:none; white-space:nowrap; }
.house .site-nav a:hover { color:#EDEAE5; background:rgba(237,234,229,0.06); }
.house .site-nav a[aria-current='page'] { color:#EDEAE5; background:rgba(237,234,229,0.1); }
.house .site-nav .nav-cta { margin-left:0.5rem; background:#EDEAE5; color:#0C0C0E; font-weight:500; padding:0 1.25rem; }
.nav-toggle { display:none; align-items:center; min-height:2.75rem; padding:0 1.1rem; background:#EDEAE5; color:#0C0C0E; border:0; border-radius:999px; font:500 0.6875rem/1 'DM Mono',ui-monospace,Menlo,monospace; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; }
@media (max-width:63.99rem) {
  .nav-pill { flex-wrap:wrap; border-radius:1.75rem; padding-left:1.2rem; }
  .site-nav { width:100%; overflow-x:auto; scrollbar-width:none; }
  html.nav-js .nav-pill { flex-wrap:nowrap; border-radius:999px; }
  html.nav-js .nav-toggle { display:inline-flex; }
  html.nav-js .site-nav { display:none; position:absolute; top:calc(100% + 0.5rem); left:0; right:0; width:auto; overflow:visible; padding:1rem; border-radius:1.5rem; background:rgba(18,18,21,0.97); border:1px solid rgba(237,234,229,0.1); }
  html.nav-js .site-nav.is-open { display:block; }
  html.nav-js .site-nav ul { flex-direction:column; align-items:stretch; gap:0; }
  html.nav-js .site-nav li { border-bottom:1px solid rgba(237,234,229,0.1); }
  html.nav-js .site-nav li:last-child { border-bottom:0; padding-top:1rem; }
  html.nav-js .house .site-nav a, html.nav-js .site-nav a { display:flex; min-height:3.4rem; padding:0 0.75rem; font:500 1.5rem/1 'Syne','Helvetica Neue',Arial,sans-serif; letter-spacing:-0.04em; color:#EDEAE5; }
  html.nav-js .site-nav .nav-cta { margin:0; justify-content:center; font:500 1.0625rem/1 'DM Sans','Helvetica Neue',Arial,sans-serif; letter-spacing:0; min-height:3.25rem; color:#0C0C0E; }
}
@media (prefers-reduced-motion: no-preference) {
  .site-header { transition:transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
  .site-header.is-hidden { transform:translate3d(0, -140%, 0); }
}
.scroll-line { position:fixed; z-index:55; top:0; bottom:0; right:0.4rem; width:1px; pointer-events:none; background:rgba(237,234,229,0.1); }
.scroll-line::after { content:""; position:absolute; inset:0; background:#fff; box-shadow:0 0 12px 2px #B8A9E8; transform-origin:50% 0; transform:scaleY(var(--sp, 0)); }
.cursor-light, .spot { display:none; }
@media print { .site-header, .scroll-line { display:none !important; } body.house { padding-top:0; } }