/* ==========================================================================
   CARETTA — Design System (LOCKED tokens v1)
   Source: deliverables/caretta-design-system.md + design-system.html
   Type: Spectral (serif) + Inter (sans). Warm paper + oak material thread.
   Sea (#2E3C44) = orientation/chrome only (header banner, nav, links).
   Motif: thin cartographic rules, waypoints, coordinate micro-type.
   ========================================================================== */

/* Self-hosted, subsetted webfonts (latin + hebrew ranges actually used). font-display:swap. */
@font-face{ font-family:'Spectral'; font-style:normal; font-weight:300; font-display:swap; src:url(../fonts/spectral-300.woff2) format('woff2'); }
@font-face{ font-family:'Spectral'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/spectral-400.woff2) format('woff2'); }
@font-face{ font-family:'Spectral'; font-style:italic; font-weight:400; font-display:swap; src:url(../fonts/spectral-400-italic.woff2) format('woff2'); }
@font-face{ font-family:'Spectral'; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/spectral-500.woff2) format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/inter-400.woff2) format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/inter-500.woff2) format('woff2'); }
@font-face{ font-family:'Frank Ruhl Libre'; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/frank-ruhl-libre-500.woff2) format('woff2'); }
@font-face{ font-family:'Frank Ruhl Libre'; font-style:normal; font-weight:600; font-display:swap; src:url(../fonts/frank-ruhl-libre-600.woff2) format('woff2'); }
@font-face{ font-family:'Heebo'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/heebo-400.woff2) format('woff2'); }
@font-face{ font-family:'Heebo'; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/heebo-500.woff2) format('woff2'); }

:root{
  --paper:   #F4F2EC;
  --surface: #FBFAF7;
  --ink:     #232020;
  --muted:   #615C53;   /* darkened for WCAG AA on sand + paper */
  --line:    #E3DDD2;
  --oak:     #9D7C5A;   /* decorative material thread (swatch, underlines) */
  --oak-text:#75583A;   /* oak as TEXT/interactive (AA on paper) */
  --oak-grad: linear-gradient(180deg,#B2906E,#8A6949);
  --sea:     #2E3C44;
  --sand:    #E7DFD2;
  --clay:    #9C5A4A;
  /* Deep-Sea Night — founder-locked brand colour 2026-07-01 (the cinematic hero blue) */
  --night:   #0E1B23;
  --night-2: #11202A;
  --night-grad: linear-gradient(180deg,#11202A 0%,#0B1418 60%,#070D11 100%);
  --night-glow: radial-gradient(120% 78% at 50% 6%, rgba(220,230,234,.20), rgba(11,20,24,0) 44%);

  --serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', 'Helvetica Neue', Arial, system-ui, sans-serif;

  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --section: clamp(56px, 9vh, 96px);

  /* ====================================================================
     SEMANTIC LAYER — added 2026-07-25
     ====================================================================
     Everything above this line is a PRIMITIVE: the raw palette.
     Everything below is a ROLE.

     Why it exists: design_lock.py found 66 off-palette hexes in 22 shades.
     Taken apart, not one of them was somebody wanting something prettier —
     they were all "the token ran out": 18 status colours that had no token,
     17 dark steps, 16 greys, 13 paper variants. The palette ENDED, and the
     continuation was hand-sewn, hex by hex, one file at a time.

     RULE FOR THIS BLOCK: every value here is an existing hex lifted out of the
     code as it already renders. No new hue was invented, and no pixel moved.
     Each line names where it came from and how many places used it.
     ==================================================================== */

  /* — paper tier — */
  --paper-2: #F7F4EC;        /* ×9 · paper used as ink or fill ON night surfaces
                                (.closing.on-dark, .cmp2-mid, .hero-pause) */

  /* — ink tier — */
  --ink-2: #26221E;          /* ×3 · warm near-black for type over pale imagery
                                (.closing.on-light) — needs more weight than --ink */
  --ink-3: #1c1c1a;          /* ×5 · print ink: toner on white, deeper than --ink */

  /* — night tier · companions to --night / --night-2 — */
  --night-deep:     #0a141b; /* ×1 · the Compass canvas, one step below --night */
  --ink-on-night:   #eef1ec; /* ×1 · body type on that canvas */
  --muted-on-night: #9fb2bc; /* ×3 · secondary type on that canvas */

  /* — oak tier — */
  --oak-deep: #746546;       /* ×1 · Compass quote button; the darkest oak in use.
                                ⚠ ΔE ≈ 2 from --oak-text — a real consolidation
                                candidate, but merging it moves pixels, so it is
                                a colour call, not a refactor's. */

  /* — print greys — deliberately scoped to print. Generic web grey is the
       opposite of warm ivory and must never reach the screen UI; naming them
       --print-* is what stops them leaking. — */
  --print-coord: #555555;    /* ×1 · coordinate micro-type */
  --print-muted: #666666;    /* ×4 · labels, dt, fine print */
  --print-rule:  #cccccc;    /* ×5 · table and section rules */
  --print-hair:  #eeeeee;    /* ×2 · row hairlines */

  /* — status —
     ⚠ THE ONLY OFF-PALETTE HUES ON THIS SITE. A green and a pink-red reached
     certificates.html and contact.html (the post-submit banner) and eye.css.
     CARETTA's book says "colour = meaning, not decoration" and has no green.
     They are QUARANTINED here, at their exact current values, so that:
       (a) the count of unnamed drift goes to zero;
       (b) re-hueing them to the palette becomes a FOUR-LINE change instead of
           18 edits across 5 files.
     Not re-hued in this pass because that moves pixels, and this pass is a
     zero-diff refactor. Palette-native option, MEASURED, awaiting a colour decision:
       --ok-bg → var(--surface) · --ok-ink  → var(--sea)   = 10.90:1  AA ✔
       --err-bg → var(--surface) · --err-ink → var(--clay) =  5.06:1  AA ✔
     ⚠ --clay on --sand is only 4.00:1 — below AA for body text. If the banner
       ever moves onto sand, the ink has to darken. Today's values pass too:
       ok 7.97:1 · err 5.23:1. So this is a brand question, not an access one. — */
  --ok-bg:  #EEF3EE;
  --ok-ink: #2F5133;
  --err-bg: #F6ECE9;
  --err-ink: #9C4A3C;
  --wa-ink: #0b3d20;         /* ×1 · type on WhatsApp's own #25D366. An external
                                brand's pairing, quoted — not a CARETTA colour. */

  /* — motion —
     Measured before this block existed: 59 transition/animation declarations,
     20 distinct durations, 4 curves, zero tokens. IBM Carbon runs a whole design
     system on 6 and 6. CARETTA needs two, and they are already in the doctrine:
       RESPONSE — hover, focus, press. Fast enough to be invisible.
       ARRIVAL  — "every transition is arriving at a coast"
                  (knowledge/caretta-navigation-journey.md). The one brand idea
                  that lives only as code.
     Ambient loops (the ticker, the route flow, the gate breath) are periods, not
     transitions, and keep their own timing — converging them would break them. — */
  --t-fast:     150ms;
  --t-arrive:   700ms;
  --e-standard: cubic-bezier(.2,0,.38,.9);  /* Carbon standard-productive */
  --e-arrive:   cubic-bezier(.4,0,.2,1);    /* already the most-used curve here */
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; max-width:100%; }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
body{ font-family:var(--sans); color:var(--ink); background:var(--paper); font-size:17px; line-height:1.7; font-weight:400; overflow-x:clip; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
[id]{ scroll-margin-top:112px; }

.skip-link{ position:absolute; top:-48px; inset-inline-start:10px; z-index:200; background:var(--paper); color:var(--ink); padding:9px 16px; border-radius:4px; border:1px solid var(--ink); font-size:13px; transition:top var(--t-fast) var(--e-standard); }
.skip-link:focus{ top:10px; }
a:focus-visible,.btn:focus-visible,.nav-toggle:focus-visible,button:focus-visible,
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible,.coast:focus-visible{
  outline:2px solid var(--sea); outline-offset:3px; border-radius:3px; }
.site-head a:focus-visible,.nav-toggle:focus-visible,.hero-img a:focus-visible{ outline-color:var(--paper); }

/* — Type — */
.display{ font-family:var(--serif); font-weight:500; line-height:1.05; letter-spacing:-.01em; }
h1,.h1{ font-family:var(--serif); font-weight:500; font-size:clamp(40px,6.2vw,80px); line-height:1.06; letter-spacing:-.012em; }
h2,.h2{ font-family:var(--serif); font-weight:500; font-size:clamp(28px,4vw,46px); line-height:1.14; letter-spacing:-.008em; }
h3,.h3{ font-family:var(--serif); font-weight:500; font-size:clamp(19px,2.2vw,24px); line-height:1.3; }
.kicker{ font-family:var(--sans); font-size:11.5px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.lead{ font-size:clamp(18px,2vw,22px); line-height:1.55; color:var(--ink); font-weight:400; }
.muted{ color:var(--muted); }
.small{ font-size:14px; color:var(--muted); }
em{ font-style:italic; }

/* — Layout — */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section); }
.band{ background:var(--sand); }
.surface{ background:var(--surface); }
.rule{ height:1px; background:var(--line); border:0; }
.stack > * + *{ margin-top:1.05rem; }
.grid{ display:grid; gap:clamp(20px,3vw,40px); }
.grid > *{ min-width:0; }
.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.center{ text-align:center; }
.measure{ max-width:62ch; }
.measure-sm{ max-width:46ch; }

/* — Cartographic motif — */
.coord{ font-family:var(--sans); font-size:10.5px; letter-spacing:.18em; color:var(--muted); }
.chartline{ display:flex; align-items:center; gap:14px; color:var(--muted); }
.chartline::before,.chartline::after{ content:""; height:1px; background:var(--line); flex:1; }
.chartline .coord{ white-space:nowrap; }
.waypoint{ display:flex; flex-wrap:wrap; gap:10px 16px; align-items:flex-start; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.waypoint b{ color:var(--ink); font-weight:500; }
.waypoint .wp,.waypoint .wp-now{ display:inline-flex; flex-direction:column; gap:3px; }
.waypoint .wp-t{ line-height:1; }
.waypoint .wp-s{ font-size:9px; letter-spacing:.03em; text-transform:none; font-weight:400; font-style:normal; line-height:1.1; color:var(--muted); opacity:.82; }
.waypoint .node{ width:5px; height:5px; border:1px solid var(--oak); transform:rotate(45deg); margin-top:3px; }
html[dir="rtl"] .waypoint .wp-s{ font-family:'Heebo','Assistant',sans-serif; letter-spacing:0; }
/* live breadcrumb trail */
.breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:9px 12px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding-block:14px; }
.breadcrumb a{ color:var(--muted); } .breadcrumb a:hover{ color:var(--ink); }
.breadcrumb .here{ color:var(--ink); }
.breadcrumb .node{ width:5px; height:5px; border:1px solid var(--oak); transform:rotate(45deg); }

/* — Header — Deep Sea brand banner, white logo, large & clear — */
.site-head{ position:sticky; top:0; z-index:50; background:var(--sea); }
.site-head .wrap{ display:flex; align-items:center; justify-content:space-between; height:96px; }
.brand{ display:flex; align-items:center; height:100%; }
.brand img{ height:64px; width:auto; }
.nav{ display:flex; gap:clamp(18px,2.4vw,34px); align-items:center; }
.nav a{ font-size:13px; letter-spacing:.05em; color:rgba(244,242,236,.86); transition:color var(--t-fast) var(--e-standard); }
.nav a:hover{ color:#fff; }
.nav a[aria-current="page"]{ color:#fff; border-bottom:1px solid var(--oak); padding-bottom:4px; }
.nav .cta{ border:1px solid rgba(244,242,236,.6); padding:9px 18px; border-radius:8px; color:#fff; font-weight:500; }
.nav .cta:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.nav-toggle{ display:none; background:none; border:0; font-size:24px; color:var(--paper); cursor:pointer; line-height:1; padding:10px 12px; margin:-10px -12px; }

/* — Buttons — */
.btn{ display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:500; letter-spacing:.02em; padding:13px 24px; border-radius:8px; border:1px solid var(--ink); color:var(--ink); background:transparent; cursor:pointer; transition:all var(--t-fast) var(--e-standard); }
.btn:hover{ background:var(--ink); color:var(--paper); }
.btn-solid{ background:var(--ink); color:var(--paper); }
.btn-solid:hover{ background:var(--oak-text); border-color:var(--oak-text); }
.link-arrow{ font-size:14px; font-weight:500; letter-spacing:.02em; border-bottom:1px solid var(--oak); padding-bottom:3px; color:var(--oak-text); }
.link-arrow:hover{ color:var(--ink); border-color:var(--ink); }
.link-arrow::after{ content:" \2192"; }

/* — Hero — */
.hero{ border-bottom:1px solid var(--line); }
.hero .wrap{ padding-block:clamp(56px,12vh,128px); }
.hero h1{ max-width:17ch; }
.hero .lead{ max-width:48ch; margin-top:1.3rem; color:var(--muted); }
.hero .row{ display:flex; gap:16px; flex-wrap:wrap; margin-top:2rem; }
.hero-img{ position:relative; min-height:clamp(520px,80vh,820px); display:flex; align-items:flex-end; overflow:hidden; background:var(--sand); }
.hero-img > .hero-eager-pic{ position:absolute; inset:0; z-index:0; display:block; }
.hero-img .hero-eager{ width:100%; height:100%; object-fit:cover; object-position:center 32%; }
.hero-img .bg{ position:absolute; inset:0; z-index:1; background-size:cover; background-position:center; }
/* Hero scrim — MEASURED, not eyeballed (2026-07-25). The old ramp (.08 at 35% → .62) left the
   hero text over the plank photo below WCAG AA on the light floors: St Barth measured CR 2.60 on
   the coordinate line, 3.73 on the lead — failure class ① (text on image without enough scrim),
   and it tracked the floor's lightness, so it failed on 8 of 18 models and passed on the dark
   ones. The ramp now reaches its working density where the text block actually sits (48%), not
   at the very bottom. Re-measured on the rendered pixels behind each line, EN + HE, 375 px and
   1440 px: 0 failures on 18 of 18 models; worst case 5.24 (HE St Barth coordinate line), best
   12.23 (Havana). Final tone is a colour decision — the ratio is not negotiable, the mood is. */
.hero-img .bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(35,32,32,.05) 0%,rgba(35,32,32,.10) 26%,rgba(35,32,32,.60) 48%,rgba(35,32,32,.80) 100%); }
.hero-img .wrap{ position:relative; z-index:2; padding-block:clamp(40px,7vh,90px); width:100%; color:var(--paper); }
.hero-img h1{ color:var(--paper); text-shadow:0 2px 28px rgba(14,20,24,.60), 0 1px 4px rgba(14,20,24,.55); }
.hero-img .lead{ color:rgba(244,242,236,.92); text-shadow:0 2px 20px rgba(14,20,24,.60), 0 1px 3px rgba(14,20,24,.55); }
.hero-img .coord{ color:rgba(244,242,236,.85); text-shadow:0 1px 12px rgba(14,20,24,.6); }
/* model number beside the name — Capri 747 */
.mno{ font-family:var(--sans); font-size:.32em; font-weight:400; letter-spacing:.1em; color:rgba(244,242,236,.62); margin-inline-start:.55em; vertical-align:.42em; }
/* sticky model CTA — mobile only, restrained */
.model-bar{ display:none; }
@media (max-width:680px){
  .model-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--paper); border-top:1px solid var(--line); padding:10px var(--gutter); box-shadow:0 -4px 16px rgba(14,27,35,.10); }
  .model-bar .mb-name{ font-family:var(--serif); font-size:16px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .model-bar .btn{ padding:10px 18px; font-size:13px; white-space:nowrap; }
  body:has(.model-bar){ padding-bottom:64px; }
}
/* architect layer — expandable measured signature */
.arch-layer{ margin-top:16px; }
.arch-layer summary{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 24px; border:1px solid var(--oak); border-radius:4px; background:var(--sand); transition:background var(--t-fast) var(--e-standard), border-color var(--t-fast) var(--e-standard); }
.arch-layer summary:hover,.arch-layer[open] summary{ background:var(--oak-text); border-color:var(--oak-text); }
.arch-layer summary .coord{ font-size:12.5px; letter-spacing:.16em; color:var(--ink); }
.arch-layer summary:hover .coord,.arch-layer[open] summary .coord{ color:var(--paper); }
.arch-layer summary::-webkit-details-marker{ display:none; }
.arch-layer summary::after{ content:"\002B"; font-size:22px; line-height:1; color:var(--oak-text); }
.arch-layer summary:hover::after,.arch-layer[open] summary::after{ color:var(--paper); }
.arch-layer[open] summary::after{ content:"\2212"; }
.arch-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 32px; margin:24px 0 6px; }
.arch-grid dt{ font-family:var(--sans); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.arch-grid dd{ font-family:var(--serif); font-size:17px; color:var(--ink); margin-top:4px; }
html[dir="rtl"] .arch-grid dd{ font-family:'Heebo','Assistant',sans-serif; }
@media(max-width:680px){ .arch-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.arch-cta{ display:flex; gap:14px 28px; flex-wrap:wrap; margin-top:18px; }
/* Voyage · arrival moment — the coast's name + coordinates surface as you land */
@media (prefers-reduced-motion:no-preference){
  .hero-img .arrive > *{ animation:hero-arrive var(--t-arrive) var(--e-arrive) backwards; }
  .hero-img .arrive > *:nth-child(1){ animation-delay:.45s; }
  .hero-img .arrive > *:nth-child(2){ animation-delay:.57s; }
  .hero-img .arrive > *:nth-child(3){ animation-delay:.69s; }
  .hero-img .arrive > *:nth-child(4){ animation-delay:.81s; }
  @keyframes hero-arrive{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
}
.hero-img .btn{ border-color:rgba(244,242,236,.6); color:var(--paper); }
.hero-img .btn:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }

/* — Image slot + editorial PLATE (intentional empty state) — */
.imgslot{ position:relative; background:var(--sand); border:1px solid var(--line); aspect-ratio:4/3; overflow:hidden; border-radius:2px; }
.imgslot[data-ratio="3/4"]{ aspect-ratio:3/4; }
.imgslot[data-ratio="16/9"]{ aspect-ratio:16/9; }
.imgslot[data-ratio="1/1"]{ aspect-ratio:1/1; }
.imgslot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }


/* — Coast / world cards — */
.coast{ display:block; }
.coast .imgslot,.coast .plate{ aspect-ratio:3/4; }
.coast .meta{ display:flex; align-items:baseline; justify-content:space-between; margin-top:13px; padding-top:11px; border-top:1px solid var(--line); }
.coast .name{ font-family:var(--serif); font-weight:500; font-size:23px; }
.coast .loc{ font-size:11px; letter-spacing:.16em; color:var(--muted); }
.coast .lt{ font-size:12.5px; color:var(--muted); margin-top:3px; }
.coast:hover .name{ color:var(--oak-text); }

/* — Principle blocks — */
.principle{ border-top:1px solid var(--line); padding-top:16px; }
.principle .n{ font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--oak-text); }
.principle h2,.principle h3{ margin:9px 0 6px; font-size:clamp(19px,2.2vw,24px); line-height:1.3; letter-spacing:normal; }

/* — Spec table — */
.spec{ width:100%; border-collapse:collapse; }
.spec td{ padding:11px 4px; border-bottom:1px solid var(--line); vertical-align:top; font-size:15px; }
.spec td:first-child{ color:var(--muted); width:42%; }
.spec td:last-child{ font-weight:500; }

/* — Material DNA block — */

/* — Risk panel (clay — "consider carefully") — */

/* — Comparison block — */

/* — Continue the voyage — */
.voyage .grid{ margin-top:clamp(28px,4vh,48px); }

/* — Form — */
.form{ display:grid; gap:18px; }
.field{ display:grid; gap:7px; }
.field label{ font-size:13px; letter-spacing:.03em; color:var(--muted); }
.field input,.field select,.field textarea{ font-family:var(--sans); font-size:16px; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:13px 14px; width:100%; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--ink); }
.field textarea{ min-height:120px; resize:vertical; }

/* — Footer — */
.site-foot{ background:var(--ink); color:rgba(244,242,236,.74); padding-block:clamp(48px,7vh,88px); }
.site-foot a{ color:rgba(244,242,236,.74); }
.site-foot a:hover{ color:var(--paper); }
.site-foot .flogo{ height:48px; width:auto; }
.site-foot .cols{ display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:40px; }
.site-foot h2{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(244,242,236,.66); font-weight:500; margin-bottom:14px; }
.site-foot li{ margin-bottom:9px; font-size:14px; }
.site-foot .fine{ border-top:1px solid rgba(244,242,236,.18); margin-top:40px; padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.site-foot .fine .coord{ color:rgba(244,242,236,.6); }
.site-foot .coord,.site-foot .latin{ color:rgba(244,242,236,.62); }

.reveal{ opacity:0; transform:translateY(12px); transition:opacity var(--t-arrive) var(--e-arrive), transform var(--t-arrive) var(--e-arrive); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }
.print-mast{ display:none; }
.print-btn{ background:none; border:0; cursor:pointer; font:inherit; padding:0; }

/* — Gated technical spec pages — */
.spec-sheet{ background:#f4f2ec; }
.spec-page{ padding-top:72px; }
.spec-wrap{ max-width:980px; }
.spec-hero{ padding:clamp(58px,9vh,96px) 0 22px; }
.spec-actions{ display:flex; gap:14px 22px; flex-wrap:wrap; align-items:center; margin-top:22px; }
.spec-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:22px; align-items:start; }
.spec-figure,.spec-card{ background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 10px 28px rgba(14,27,35,.06); }
.spec-figure{ margin:0; padding:18px; grid-column:1 / -1; }
.spec-figure img{ display:block; width:100%; height:auto; aspect-ratio:1830/228; object-fit:cover; border:1px solid rgba(120,110,98,.2); }
.spec-figure figcaption{ margin-top:10px; font-family:var(--sans); font-size:12px; color:var(--muted); }
.spec-card{ padding:22px; break-inside:avoid; }
.spec-card h2{ font-size:22px; margin:0 0 14px; }
.spec-table{ width:100%; border-collapse:collapse; }
.spec-table th,.spec-table td{ text-align:start; vertical-align:top; padding:11px 0; border-bottom:1px solid var(--line); }
.spec-table th{ width:38%; padding-inline-end:18px; font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); }
.spec-table td{ font-weight:500; }
.spec-list{ margin:0; padding-inline-start:1.1em; }
.spec-list li{ margin:9px 0; line-height:1.55; }
.spec-palette{ margin-bottom:12px; }
@media (max-width:760px){ .spec-grid{ grid-template-columns:1fr; } .spec-page{ padding-top:68px; } .spec-card{ padding:18px; } }

/* — Architect spec sheet · clean A4 when printed / saved as PDF — */
@media print{
  @page{ margin:16mm 14mm; }
  *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  body{ background:#fff; color:var(--ink-3); font-size:11pt; }
  .reveal{ opacity:1!important; transform:none!important; }
  .site-head,.hero-cinema,.hero-pause,.ticker,.compass,.compass-top,.cmp-bezel,
  .palfan,.mr-cap,.actual,.closing,.voyage,.model-bar,.arch-cta,.breadcrumb,.waypoint,
  .site-foot .cols,.no-print,.hero-img .bg,.hero-img .row,.innature-strip,.nt-tag,
  .hero-img .stack > .lead,.hero-img .arrive > .lead{ display:none!important; }
  main{ padding:0!important; }
  section{ padding:0!important; margin:0 0 10mm!important; break-inside:avoid; }
  .print-mast{ display:flex!important; flex-direction:column; gap:3px; border-bottom:1.5pt solid var(--ink-3); padding-bottom:8px; margin-bottom:14px; }
  .print-mast .pm-brand{ font-family:var(--serif); font-size:20pt; letter-spacing:.02em; }
  .print-mast .pm-model{ font-family:var(--serif); font-size:15pt; }
  .print-mast .pm-model b{ font-family:var(--sans); font-weight:500; font-size:.7em; letter-spacing:.06em; }
  .print-mast .pm-coord{ font-family:var(--sans); font-size:8.5pt; letter-spacing:.08em; text-transform:uppercase; color:var(--print-coord); }
  .techbar{ background:#fff!important; color:var(--ink-3)!important; }
  .techbar .kicker,.techbar .display,.techbar .sub{ color:var(--ink-3)!important; }
  .techgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; border:1pt solid var(--print-rule); }
  .techgrid dt{ color:var(--print-muted)!important; font-size:8pt; }
  .techgrid dd,.techgrid .cell{ border-bottom:1pt solid var(--print-hair); padding:6px 10px!important; }
  .arch-layer{ margin-top:8mm!important; }
  .arch-layer > summary{ list-style:none; font-family:var(--sans); font-size:9pt; letter-spacing:.1em; text-transform:uppercase; color:var(--print-muted); border:0!important; background:none!important; padding:0 0 6px!important; }
  .arch-layer > summary::after,.arch-layer > summary::-webkit-details-marker{ display:none!important; }
  .arch-layer > *{ display:block!important; }        /* force the accordion open in print */
  .arch-grid{ display:grid!important; grid-template-columns:repeat(2,1fr); gap:0; border:1pt solid var(--print-rule); }
  .arch-grid > div{ padding:6px 10px; border-bottom:1pt solid var(--print-hair); }
  .arch-grid dt{ color:var(--print-muted)!important; font-size:8pt; } .arch-grid dd{ color:var(--ink-3)!important; }
  .tscale svg{ max-width:150mm; }
  .site-foot{ border-top:1pt solid var(--print-rule); padding-top:8px; }
  .site-foot .fine .coord{ color:var(--print-muted)!important; font-size:8pt; }
  a[href]::after{ content:""; }   /* no ugly URL expansion */
  .spec-sheet .site-head,.spec-sheet .spec-actions{ display:none!important; }
  .spec-sheet .spec-page{ padding:0!important; }
  .spec-sheet .spec-hero{ padding:0!important; margin:0 0 8mm!important; }
  .spec-sheet .spec-body{ margin:0!important; }
  .spec-sheet .spec-grid{ display:grid; grid-template-columns:1fr 1fr; gap:7mm; }
  .spec-sheet .spec-figure,.spec-sheet .spec-card{ box-shadow:none; border:1pt solid var(--print-rule); border-radius:0; padding:5mm; background:#fff; }
  .spec-sheet .spec-table th,.spec-sheet .spec-table td{ padding:5px 0; }
  .spec-sheet .spec-card h2{ font-size:13pt; }
  .spec-sheet .display{ font-size:25pt; }
}

/* — Responsive — */
@media (max-width:900px){ .cols-3,.cols-4{ grid-template-columns:repeat(2,minmax(0,1fr)); } .site-foot .cols{ grid-template-columns:repeat(2,minmax(0,1fr)); } .dna{ grid-template-columns:1fr; } .dna .chip{ max-width:120px; } }
@media (max-width:680px){
  body{ font-size:16px; }
  .kicker{ letter-spacing:.13em; }
  .waypoint{ letter-spacing:.1em; gap:8px 12px; }
  .breadcrumb{ letter-spacing:.1em; }
  .nav-toggle{ display:block; }
  .site-head .wrap{ height:68px; }
  .brand img{ height:44px; }
  .nav{ top:68px; }
  .nav{ display:none; position:absolute; top:96px; left:0; right:0; flex-direction:column; align-items:flex-start; gap:0; background:var(--sea); padding:8px var(--gutter) 22px; border-top:1px solid rgba(244,242,236,.12); }
  .nav.open{ display:flex; }
  .nav a{ padding:14px 0; width:100%; border-bottom:1px solid rgba(244,242,236,.12); font-size:15px; }
  .nav a[aria-current="page"]{ border-bottom:1px solid rgba(244,242,236,.12); padding-bottom:14px; }
  .nav .cta{ margin-top:14px; border-radius:8px; padding:12px 18px; }
  .cols-2,.cols-3,.cols-4{ grid-template-columns:minmax(0,1fr); }
  .site-foot .cols{ grid-template-columns:minmax(0,1fr); }
}

/* — Model scales (DNA bars) + navigation + companions — added for model pages v2 — */
.nav-from{ display:grid; gap:0; }
.nav-from a{ display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid var(--line); padding:11px 0; }
.nav-from a .dir{ color:var(--muted); font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.nav-from a .to{ font-family:var(--serif); font-size:18px; }
.nav-from a:hover .to{ color:var(--oak-text); }
.punch{ font-family:var(--serif); font-weight:500; font-size:clamp(22px,3.2vw,36px); line-height:1.15; color:var(--oak-text); letter-spacing:-.01em; }
@media (max-width:680px){ .companions{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* — Model page v2 — bold scales · palette · architect tech banner — */
.sc-nav:hover{ color:var(--oak-text); }
.sc-ar{ color:var(--oak); }
.palette{ display:flex; height:70px; border-radius:8px; overflow:hidden; border:1px solid var(--line); }
.palette span{ flex:1; box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -2px 4px rgba(0,0,0,.07); }
.statline{ display:flex; gap:26px; flex-wrap:wrap; margin-top:4px; }
.statline .stat .v{ font-family:var(--serif); font-weight:500; font-size:24px; line-height:1; }
.statline .stat .k{ font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-top:5px; }
.techbar{ background:var(--night) var(--night-grad); }
.techbar .kicker{ color:rgba(244,242,236,.62); }
.techbar h2{ color:var(--paper); }
.techbar .sub{ color:rgba(244,242,236,.82); }
.techgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(244,242,236,.16); border:1px solid rgba(244,242,236,.16); border-radius:12px; overflow:hidden; margin-top:30px; }
.techgrid .cell{ background:var(--sea); padding:18px 16px; }
.techgrid dt{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(244,242,236,.72); }
.techgrid dd{ font-family:var(--serif); font-weight:500; font-size:19px; color:var(--paper); margin-top:6px; line-height:1.12; }
.macro{ width:100%; border-radius:4px; border:1px solid var(--line); display:block; }
@media(max-width:900px){ .techgrid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:680px){ .techgrid{ grid-template-columns:repeat(2,1fr); } }

/* — Pairs-with · visual material scheme — */
.scheme{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.swatch{ position:relative; aspect-ratio:3/4; border-radius:12px; border:1px solid var(--line); display:flex; align-items:flex-end; overflow:hidden; transition:transform var(--t-fast) var(--e-standard); }
.swatch:hover{ transform:translateY(-4px); }
.swatch .lbl{ width:100%; padding:12px 13px 15px; font-size:12.5px; font-weight:500; line-height:1.28; }
.swatch .tag{ position:absolute; top:11px; left:13px; font-size:9px; letter-spacing:.16em; text-transform:uppercase; opacity:.72; }
.swatch.anchor{}
@media(max-width:900px){ .scheme{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:680px){ .scheme{ grid-template-columns:repeat(2,1fr); } }

/* — scheme v2 — small, subtle inspiration chips — */
.scheme{ display:flex; flex-wrap:wrap; gap:22px; }
.swatch{ width:auto; aspect-ratio:auto; border:0; border-radius:0; display:block; }
.swatch:hover{ transform:none; }
.swatch .chip{ width:74px; height:74px; border-radius:9px; border:1px solid var(--line); transition:transform var(--t-fast) var(--e-standard); box-shadow:inset 0 1px 0 rgba(255,255,255,.20), inset 0 -3px 7px rgba(0,0,0,.10); }
.swatch:hover .chip{ transform:translateY(-3px); }
.swatch.anchor .chip{ box-shadow:0 0 0 1px var(--line); }
.swatch.anchor .cap{ color:var(--ink); font-weight:500; }
.swatch .cap{ font-size:11px; color:var(--muted); margin-top:9px; line-height:1.3; max-width:90px; }

/* — Home: world / range cards with real floor imagery — */
.worldcard{ position:relative; aspect-ratio:3/4; overflow:hidden; border-radius:2px; border:1px solid var(--line); margin:0; background:var(--sand); }
.worldcard[data-ratio="16/9"]{ aspect-ratio:16/9; }
.worldcard img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform var(--t-fast) var(--e-standard); }
.coast:hover .worldcard img, a:hover > .worldcard img{ transform:scale(1.035); }
.worldcard figcaption{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:16px;
  background:linear-gradient(180deg,rgba(35,32,32,.52),rgba(35,32,32,.10) 36%,rgba(35,32,32,.50)); }
.worldcard .wc-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.worldcard .wc-word{ font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(244,242,236,.94); max-width:64%; line-height:1.4; text-shadow:0 1px 4px rgba(14,20,24,.7); }
.worldcard .wc-coord{ font-size:11px; letter-spacing:.13em; color:rgba(244,242,236,.82); text-align:right; white-space:nowrap; text-shadow:0 1px 4px rgba(14,20,24,.7); }
.worldcard .wc-name{ font-family:var(--serif); font-weight:500; font-size:clamp(22px,2.6vw,30px); color:var(--paper); line-height:1.05; }

/* — nav-from: one long thin plank running between direction and target — */
.nav-from a{ align-items:center; gap:20px; }
.nav-from a .dir{ flex:0 0 auto; }
.nav-from a .to{ flex:0 0 auto; white-space:nowrap; }
.nav-plank{ flex:1 1 auto; min-width:40px; height:13px; object-fit:cover; border-radius:0; border:1px solid var(--line); display:block; }
.nav-from a:hover .nav-plank{ filter:brightness(1.05); }

/* — Cinematic entrance hero: full-moon loggerhead arriving at the safe shore — */
.hero-cinema{ position:relative; min-height:clamp(560px,88vh,920px); min-height:clamp(560px,88svh,920px); display:flex; align-items:flex-end; overflow:hidden;
  background:var(--night) url(/assets/brand/hero-turtle-poster.jpg) center/cover no-repeat;
  background-image:image-set(url(/assets/brand/hero-turtle-poster.webp) type("image/webp"), url(/assets/brand/hero-turtle-poster.jpg) type("image/jpeg")); }
.hero-cinema::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(120% 78% at 50% 6%, rgba(220,230,234,.20), rgba(11,20,24,0) 44%),
             var(--night-grad); }
.hero-cinema .hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
/* founder-approved 21.7: mirror the sea in RTL — Hebrew headline lands on the dark side (11:1), moon path moves to the empty side */
html[dir="rtl"] .hero-cinema .hero-video{ transform:scaleX(-1); }
.hero-cinema-scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(8,14,18,.45),rgba(8,14,18,.18) 40%,rgba(8,14,18,.85)); }
.hero-cinema-inner{ position:relative; z-index:2; width:100%; padding-block:clamp(48px,9vh,112px); color:var(--paper); }
.hero-cinema-inner h1{ text-shadow:0 2px 30px rgba(14,20,24,.65), 0 1px 4px rgba(14,20,24,.6); }
.hero-cinema-inner .lead,.hero-cinema-inner .kicker{ text-shadow:0 2px 18px rgba(14,20,24,.6), 0 1px 3px rgba(14,20,24,.55); }
.hero-cinema-inner .kicker{ color:rgba(244,242,236,.80); }
.hero-cinema-inner h1{ color:var(--paper); max-width:21ch; margin-top:16px; text-wrap:balance; }
.hero-cinema-inner .lead{ color:rgba(244,242,236,.90); max-width:46ch; margin-top:1.3rem; }
.hero-cinema-inner .btn{ border-color:rgba(244,242,236,.55); color:var(--paper); }
.hero-cinema-inner .btn:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.hero-cinema-inner .btn-solid{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.hero-cinema-inner .btn-solid:hover{ background:var(--oak-text); border-color:var(--oak-text); color:var(--paper); }
@media (prefers-reduced-motion:reduce){ .hero-cinema .hero-video{ display:none; } }
@media (max-width:760px){ .hero-cinema{ min-height:clamp(560px,88svh,920px); background-position:20% center; }
  /* the video/poster element paints ABOVE the container background — it must carry the same 20% framing, or mobile crops at center and buries the composition (audit P1). In RTL the scaleX(-1) flip turns 20% into a visual 80% = the intended mirrored framing. */
  .hero-cinema .hero-video{ object-position:20% center; } }


/* — Deep-Sea Night surface (founder-locked brand colour) — */
.night-bg{ background:var(--night) var(--night-grad); color:var(--paper); }
.night-bg .night-glow{ position:absolute; inset:0; background:var(--night-glow); pointer-events:none; }

/* — Evidence: anticipated-record cards (deep-sea-night) — */
.ev-card{ position:relative; aspect-ratio:4/3; border-radius:2px; overflow:hidden; display:flex; background:var(--night) var(--night-grad); border:1px solid rgba(244,242,236,.12); }
.ev-card .ev-inner{ position:relative; z-index:2; display:flex; flex-direction:column; justify-content:space-between; padding:20px; width:100%; }
.ev-card .coord{ color:rgba(244,242,236,.55); }
.ev-card .ev-type{ font-family:var(--serif); font-weight:500; font-size:24px; color:var(--paper); line-height:1.1; }
.ev-card .ev-note{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(244,242,236,.62); }

/* — Arrival / threshold CTA in deep-sea-night — */
.cta-night{ background:var(--night) var(--night-grad); color:var(--paper); position:relative; overflow:hidden; }
.cta-night::before{ content:""; position:absolute; inset:0; background:var(--night-glow); pointer-events:none; }
.cta-night > .wrap{ position:relative; z-index:2; }
.cta-night .display, .cta-night h2{ color:var(--paper); }
.cta-night .muted, .cta-night p{ color:rgba(244,242,236,.80); }
.cta-night .kicker{ color:rgba(244,242,236,.70); }
.cta-night .btn{ border-color:rgba(244,242,236,.55); color:var(--paper); }
.cta-night .btn:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.cta-night .btn-solid{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.cta-night .btn-solid:hover{ background:var(--oak-text); border-color:var(--oak-text); color:var(--paper); }

/* — Collections: read-by-direction filter — */
/* The bar sits directly under the compass field and read as part of it. ~12px of this margin is
   absorbed above the bar, so the visible gap lands ~12 short — calibrated by measuring, not guessing. */
.filterbar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:clamp(38px,5vh,52px) 0 clamp(28px,4vh,44px); }
.chip{ font-family:var(--sans); font-size:13px; font-weight:500; letter-spacing:.04em; padding:9px 18px; border-radius:22px; border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; transition:all var(--t-fast) var(--e-standard); }
.chip:hover{ border-color:var(--ink); color:var(--ink); }
.chip.is-active{ background:var(--night) var(--night-grad); border-color:var(--night); color:var(--paper); }
.filtercount{ font-size:12px; color:var(--muted); margin-inline-start:auto; letter-spacing:.05em; }
.coast.is-hidden{ display:none; }

/* — Evidence: measured-colour record strip — */
.cgrid{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; }
.cswatch .cc{ aspect-ratio:1/1; border-radius:8px; border:1px solid var(--line); }
.cswatch .cmeta{ display:flex; flex-direction:column; margin-top:10px; }
.cswatch .cnm{ font-family:var(--serif); font-weight:500; font-size:15px; color:var(--ink); line-height:1.1; }
.cswatch .chx{ font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:11px; letter-spacing:.04em; color:var(--muted); margin-top:3px; }
@media(max-width:900px){ .cgrid{ grid-template-columns:repeat(4,1fr); } }
@media(max-width:680px){ .cgrid{ grid-template-columns:repeat(3,1fr); } }

/* — Model: found in nature (cartographic micro-legend) — */
.innature-strip{ display:flex; align-items:center; gap:14px 30px; flex-wrap:wrap; padding-block:clamp(30px,4.5vh,50px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.nt-tag{ display:inline-flex; align-items:center; gap:11px; font-family:var(--sans); font-size:11.5px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); transition:color var(--t-fast) var(--e-standard); }
.nt-tag:hover{ color:var(--ink); }
.nt-dot{ width:9px; height:9px; transform:rotate(45deg); border:1px solid var(--oak); display:inline-block; flex:0 0 auto; box-shadow:inset 0 1px 0 rgba(255,255,255,.30); }

/* — Collections: model-colour dot — */
.cdot.lg{ width:18px; height:18px; border-radius:4px; margin-inline-end:7px; vertical-align:-3px; }
.cdot{ display:inline-block; width:11px; height:11px; border-radius:3px; border:1px solid var(--line); margin-inline-end:9px; vertical-align:-1px; box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 2px rgba(0,0,0,.10); }

/* ============================================================
   Hebrew · RTL  (founder-locked typography 2026-07-01)
   Hebrew serif = Frank Ruhl Libre (pairs Spectral)
   Hebrew sans  = Heebo (pairs Inter)
   HE pages: <html lang="he" dir="rtl"> + load the Hebrew fonts.
   Proper names stay Latin → wrap in <span class="latin">.
   ============================================================ */
html[dir="rtl"] body{ font-family:'Heebo','Assistant',system-ui,sans-serif; }
html[dir="rtl"] .display,html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,
html[dir="rtl"] .h1,html[dir="rtl"] .h2,html[dir="rtl"] .h3,html[dir="rtl"] .punch,
html[dir="rtl"] .nav-from a .to,html[dir="rtl"] .pname,html[dir="rtl"] .worldcard .wc-name,
html[dir="rtl"] .coast .name,html[dir="rtl"] .sc-nm,html[dir="rtl"] .nt-type{
  font-family:'Frank Ruhl Libre',Georgia,serif; font-weight:600; letter-spacing:-.005em; }
html[dir="rtl"] body{ line-height:1.85; }
html[dir="rtl"] .lead{ line-height:1.7; }
html[dir="rtl"] .kicker,html[dir="rtl"] .coord{ letter-spacing:.02em; }
/* Latin proper names inside Hebrew text — original script, correct direction */
.latin{ font-family:'Spectral',Georgia,serif; direction:ltr; unicode-bidi:isolate; }
.latin-sans{ font-family:'Inter',system-ui,sans-serif; direction:ltr; unicode-bidi:isolate; }
/* language switch chip in the header */
.lang-switch{ font-size:12.5px; font-weight:500; letter-spacing:.06em; color:rgba(244,242,236,.92); border:1px solid rgba(244,242,236,.55); border-radius:8px; padding:6px 12px; margin-inline-start:6px; margin-inline-end:10px; transition:color var(--t-fast) var(--e-standard), border-color var(--t-fast) var(--e-standard), background var(--t-fast) var(--e-standard); }
.lang-switch:hover{ color:var(--night,#0e1b23); background:rgba(244,242,236,.92); border-color:transparent; }
/* directional glyphs mirror in RTL */
html[dir="rtl"] .link-arrow::after{ content:" \2190"; }

/* — Voyage · arrival — every page surfaces from Deep-Sea Night, so entering a page feels like arriving at a coast — */
@media (prefers-reduced-motion:no-preference){
  body::after{ content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; background:var(--night-grad); animation:voyage-arrive var(--t-arrive) var(--e-arrive) forwards; }
  @keyframes voyage-arrive{ 0%{ opacity:1; } 70%{ opacity:.55; } 100%{ opacity:0; visibility:hidden; } }
}



/* — CARETTA Compass · minimal preference field (cool↔warm × dark↔light) — */
.compass{ margin-top:clamp(30px,4vh,54px); }
/* The read-out sits on its OWN row, always — flex-basis:100%, never a text-driven break.
   Two rules ride on this and both are load-bearing:
   1. the mood text changes on every pointer move; if the break depended on its width the page
      below would jump a full row (~74px measured) as the words changed length;
   2. head + swatch + mood + link do not fit one row at common widths — forcing nowrap only
      truncated the floor's name ("Helsinki" → "nki…"). A forced break gives the text its room. */
.compass-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.cmp-head{ display:flex; flex-direction:column; gap:10px; flex:0 0 auto; }
.cmp-tabs{ display:inline-flex; gap:5px; }
.cmp-tab{ font-family:var(--sans); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); background:none; border:1px solid var(--line); border-radius:2px; padding:6px 12px; cursor:pointer; transition:color var(--t-fast) var(--e-standard), background var(--t-fast) var(--e-standard), border-color var(--t-fast) var(--e-standard); }
.cmp-tab:hover{ color:var(--ink); border-color:var(--ink); }
.cmp-tab.is-on{ color:var(--paper); background:var(--night) var(--night-grad); border-color:var(--night); }
html[dir="rtl"] .cmp-tab{ font-family:'Heebo',sans-serif; letter-spacing:.01em; }
/* Layout-stability law: this row must NEVER change size on hover — the swatch box is
   reserved at a fixed size and only changes its image. Any width/height/margin change here
   reflows the whole page under the pointer (the "screen jumps on mouse move" bug). */
.compass-read{ display:flex; align-items:center; flex-wrap:nowrap; gap:18px; font-family:var(--serif); font-size:clamp(19px,2.5vw,28px); color:var(--ink); line-height:1.2; min-height:calc(min(460px,52vw) * 23 / 183 + 8px); flex:1 1 100%; min-width:0; }
html[dir="rtl"] .compass-read{ font-family:'Heebo','Assistant',sans-serif; font-weight:600; }
.cmp-swatch{ flex:0 0 auto; width:min(460px,52vw); aspect-ratio:183/23; height:auto; border-radius:2px; background-color:rgba(14,27,35,.05); background-size:cover; background-position:center; border:1px solid var(--line); box-shadow:0 1px 6px rgba(14,27,35,.18); overflow:hidden; transition:background-image var(--t-fast) var(--e-standard); }
.cmp-mood{ flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.compass-read .cmp-go{ flex:0 0 auto; margin-inline-start:auto; display:inline-block; font-family:var(--sans); font-size:13px; letter-spacing:.03em; color:var(--oak-text); border-bottom:1px solid var(--oak); opacity:0; visibility:hidden; transform:translateY(2px); transition:opacity var(--t-fast) var(--e-standard), transform var(--t-fast) var(--e-standard), visibility var(--t-fast) var(--e-standard); pointer-events:none; }
html[dir="rtl"] .compass-read .cmp-go{ font-family:'Heebo',sans-serif; }
/* visibility must be reverted too — opacity alone left this CTA invisible & unclickable */
.compass-read .cmp-go.on{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
/* Move 5a — the "because" conclusion line under the compass reading */
.cmp-why{ margin:6px 0 0; font-family:var(--sans); font-size:14px; line-height:1.6; color:var(--muted); max-width:72ch; min-height:1.6em; opacity:0; transition:opacity var(--t-fast) var(--e-standard); }
html[dir="rtl"] .cmp-why{ font-family:'Heebo','Assistant',sans-serif; }
.cmp-why.on{ opacity:1; }
.cmp-bezel{ padding:0; border-radius:0; background:none; box-shadow:none; }
.cmp-field{ position:relative; width:100%; aspect-ratio:5/2.2; min-height:300px; border-radius:0; overflow:hidden; cursor:crosshair; touch-action:pan-y; background:var(--night); border:1px solid rgba(221,230,233,.18); }
.cmp-field::before{ display:none; }
.cmp-rose{ display:none; }
.cmp-grid{ position:absolute; inset:0; pointer-events:none; z-index:1; }
.cmp-grid::before,.cmp-grid::after{ content:""; position:absolute; background:rgba(221,230,233,.11); }
.cmp-grid::before{ left:50%; top:0; bottom:0; width:1px; }
.cmp-grid::after{ top:50%; left:0; right:0; height:1px; }
.cmp-ax{ position:absolute; font-family:var(--sans); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:rgba(221,230,233,.72); pointer-events:none; z-index:4; }
html[dir="rtl"] .cmp-ax{ font-family:'Heebo',sans-serif; letter-spacing:.02em; }
.cmp-ax.t{ top:10px; left:50%; transform:translateX(-50%); }
.cmp-ax.b{ bottom:10px; left:50%; transform:translateX(-50%); }
.cmp-ax.l{ left:12px; top:50%; transform:translateY(-50%); }
.cmp-ax.r{ right:12px; top:50%; transform:translateY(-50%); }
.cmp-dot{ position:absolute; width:10px; height:10px; margin:-5px; border-radius:50%; background:var(--c); border:1px solid rgba(255,255,255,.42); transform:scale(calc(.9 + var(--p,0) * .8)); transition:transform var(--t-fast) var(--e-standard); cursor:pointer; z-index:2; }
.cmp-dot::after{ content:""; position:absolute; inset:-7px; border-radius:50%; }  /* 24px touch target */
/* label scales by transform only — font-size on hover reflows text metrics */
.cmp-dot .lbl{ position:absolute; left:50%; bottom:150%; transform:translateX(-50%); transform-origin:bottom center; white-space:nowrap; font-family:var(--sans); font-size:11px; letter-spacing:.01em; color:rgba(240,245,247,.92); background:rgba(14,27,35,.82); padding:1px 7px 2px; border-radius:999px; text-shadow:0 1px 4px rgba(10,20,27,.95),0 0 2px rgba(10,20,27,.8); transition:color var(--t-fast) var(--e-standard), transform var(--t-fast) var(--e-standard); pointer-events:none; }
/* 25.7 (אודיט-סופי, כשל 2): scrim-pill קבוע מאחורי תווית-הקומפס — הניגודיות אינה תלויה עוד
   בצבע-הדגם/השדה שמתחת (15/18 נכשלו ב-AA כשהתווית ישבה על צבע-הדגם). נמדד: כל 18 ≥ 4.5:1. */
.cmp-dot.near .lbl,.cmp-dot:hover .lbl,.cmp-dot:focus-visible .lbl{ color:#fff; transform:translateX(-50%) scale(1.18); }
.cmp-dot.near{ box-shadow:0 0 0 3px var(--night),0 0 0 4px rgba(233,240,242,.85); z-index:5; }
.cmp-dot:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--night),0 0 0 4px rgba(233,240,242,.9); z-index:5; }
@media (max-width:680px){
  /* stacked: swatch / mood / link — each exactly one line, so the row height is constant
     and nothing reflows while a finger or pointer moves across the field */
  .compass-top{ flex-wrap:wrap; }              /* head and read stack — a fixed break, not a text-driven one */
  .compass-read{ flex-wrap:wrap; gap:12px; min-height:0; font-size:17px; flex:1 1 100%; }
  .cmp-swatch{ width:80vw; }
  .cmp-mood{ flex:1 1 100%; }
  .compass-read .cmp-go{ margin-inline-start:0; }
  .cmp-field{ aspect-ratio:auto; min-height:400px; }
  .cmp-dot{ width:14px; height:14px; margin:-7px; }              /* larger touch target */
  .cmp-dot .lbl{ display:block; font-size:9px; letter-spacing:0; }  /* keep names visible on small screens (founder note 21.7) */
  /* only the active coast names itself — at its own size, not the desktop scale-up */
  .cmp-dot.near .lbl,.cmp-dot:focus-visible .lbl{ display:block; font-size:13px; transform:translateX(-50%); }
}

/* — Moodroom · the palette shown as an abstract room elevation (wall / earth / accent / depth / metal on the real floor) — */
.mr-wall{ inset:0 0 26% 0; }
.mr-floor{ left:0; right:0; bottom:0; height:26%; background-size:cover; background-position:center bottom; box-shadow:inset 0 16px 22px -14px rgba(25,18,12,.45), 0 -1px 0 rgba(35,32,32,.16); }
.mr-light{ inset:0 0 26% 0; background:radial-gradient(115% 95% at 16% -5%, rgba(255,252,243,.6), rgba(255,252,243,0) 56%); pointer-events:none; z-index:1; }
.mr-earth{ bottom:26%; inset-inline-start:11%; width:30%; height:23%; z-index:2; box-shadow:0 10px 18px -8px rgba(35,32,32,.30); }
.mr-accent{ bottom:37%; inset-inline-start:15%; width:8.5%; height:10%; z-index:2; box-shadow:0 5px 9px -4px rgba(35,32,32,.28); }
.mr-depth{ top:11%; inset-inline-end:9%; width:9%; bottom:26%; z-index:2; box-shadow:0 12px 24px -10px rgba(35,32,32,.28); }
.mr-metal{ bottom:26%; inset-inline-start:48%; width:3px; height:27%; }
.mr-metal::after{ content:""; position:absolute; top:-7px; left:50%; transform:translateX(-50%); width:11px; height:7px; background:inherit; border-radius:2px 2px 0 0; }
.mr-metal::after{ content:""!important; }  /* keep the lamp head, label via its ::before instead */
.mr-metal::before{ content:attr(title); position:absolute; bottom:104%; inset-inline-start:-6px; white-space:nowrap; font-family:var(--sans); font-size:10.5px; color:var(--ink); background:rgba(244,242,236,.94); border:1px solid var(--line); border-radius:2px; padding:2px 7px; opacity:0; transition:opacity var(--t-fast) var(--e-standard); pointer-events:none; }
.mr-metal:hover::before{ opacity:1; }
.mr-cap{ margin-top:12px; font-size:13px; color:var(--muted); letter-spacing:.02em; }
@media (max-width:680px){ .moodroom{ aspect-ratio:16/9; } }

/* — Compare two floors — */
.cmp2-stage{ position:relative; }
.cmp2-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,7vw,110px); }
.cmp2-swatch{ width:100%; aspect-ratio:3/4; background-size:cover; background-position:center; border:1px solid var(--line); border-radius:4px; box-shadow:0 14px 40px rgba(14,27,35,.14); }
.cmp2-mid{ position:absolute; left:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:2px; background:var(--night); color:var(--paper-2); border-radius:50%; width:118px; height:118px; justify-content:center; text-align:center; box-shadow:0 10px 30px rgba(14,27,35,.35); pointer-events:none; }
.cmp2-vsw{ font-family:var(--serif); font-size:15px; opacity:.6; font-style:italic; }
html[dir="rtl"] .cmp2-vsw{ font-family:'Heebo',sans-serif; font-style:normal; }
.cmp2-de{ font-family:var(--sans); font-size:19px; letter-spacing:.02em; }
.cmp2-dev{ font-family:var(--sans); font-size:11.5px; color:var(--sand); }
html[dir="rtl"] .cmp2-dev{ font-family:'Heebo',sans-serif; }
.cmp2-dek{ display:none; }
.cmp2-rail{ margin-top:16px; }
.cmp2-hint{ font-family:var(--sans); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:9px; }
html[dir="rtl"] .cmp2-hint{ font-family:'Heebo',sans-serif; letter-spacing:0; font-size:12.5px; }
.cmp2-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.cmp2-chip{ width:30px; height:44px; border-radius:2px; border:1px solid var(--line); background-size:cover; background-position:center; cursor:pointer; padding:0; transition:transform var(--t-fast) var(--e-standard), box-shadow var(--t-fast) var(--e-standard); }
.cmp2-chip:hover{ transform:translateY(-3px); box-shadow:0 6px 14px rgba(14,27,35,.22); }
.cmp2-chip.is-on{ outline:2px solid var(--oak); outline-offset:2px; transform:translateY(-3px); }
.cmp2-name{ font-family:var(--serif); font-size:clamp(24px,3vw,32px); color:var(--ink); margin-top:18px; }
.cmp2-no{ font-family:var(--sans); font-size:.5em; letter-spacing:.08em; color:var(--muted); vertical-align:.3em; margin-inline-start:.3em; }
.cmp2-sub{ font-family:var(--sans); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:6px; }
.cmp2-evokes{ color:var(--muted); font-size:16px; line-height:1.55; margin-top:14px; min-height:3em; }
.cmp2-scales{ margin-top:18px; display:grid; gap:16px; }
.cmp2-blab{ display:flex; justify-content:space-between; align-items:baseline; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; }
.cmp2-blab b{ font-family:var(--sans); font-weight:500; color:var(--ink); letter-spacing:.12em; }
.cmp2-track{ position:relative; height:3px; background:var(--line); border-radius:2px; }
.cmp2-track i{ position:absolute; top:-3px; width:9px; height:9px; border-radius:50%; background:var(--oak); transform:translateX(-50%); }
.cmp2-actions{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:24px; }
.cmp2-chip{ }
@media(max-width:680px){ .cmp2-chip{ width:40px; height:56px; } .cmp2-grid{ grid-template-columns:1fr; } .cmp2-mid{ position:static; transform:none; margin:0 auto 26px; } .cmp2-stage{ display:flex; flex-direction:column; } .cmp2-mid{ order:-1; } }

/* — What this floor actually is · the customer layer (plain, paper, room-anchored) — */
.actual{ background:var(--paper); }
.actual-room,.actual-room figure{ margin:0; }
.actual-room .imgslot img{ border-radius:3px; }
.actual-cap{ display:block; margin-top:10px; }
.actual-cards{ display:grid; grid-template-columns:1fr 1fr; gap:24px 28px; margin:0; }
.ac{ display:flex; flex-direction:column; gap:4px; }
.ac-i{ display:block; height:26px; }
.ac-i svg{ width:26px; height:26px; stroke:var(--oak); stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.ac-plain{ font-family:var(--serif); font-weight:500; font-size:15.5px; line-height:1.34; color:var(--ink); margin:3px 0 0; }
.ac-basis{ font-family:var(--sans); font-size:12.5px; line-height:1.5; color:var(--muted); margin:0; }
.actual-consider{ margin-top:clamp(26px,4vh,44px); padding-top:16px; border-top:1px solid var(--line); }
.ac-tag{ font-family:var(--sans); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--oak-text); margin-inline-end:8px; }
html[dir="rtl"] .ac-plain{ font-family:'Spectral',serif; }
html[dir="rtl"] .ac-basis,html[dir="rtl"] .actual-consider,html[dir="rtl"] .ac-tag{ font-family:'Heebo',sans-serif; letter-spacing:.02em; }
@media (max-width:900px){ .actual-grid{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:560px){ .actual-cards{ grid-template-columns:1fr; } }

/* 26.7 (founder) — "make the picture a rectangle above the text, filling the whole width,
   edge to edge, so it looks big and they really understand what the parquet looks like."
   The image left the half-width column and became a full-bleed band above the copy.
   The height is fixed here, so the box never depends on the file: zero CLS, and the
   figure stays lazy (it sits far below the fold on every width, so LCP is untouched). */
.actual-room-full{ margin:0 0 clamp(28px,4.5vh,52px); width:100%; }
.actual-room-full img{ display:block; width:100%; height:clamp(300px,58vh,660px);
  object-fit:cover; object-position:center; border-block:1px solid var(--line); border-radius:0; }
.actual-room-full .actual-cap{ margin-top:12px; }
.actual-room-full .actual-cap .wrap{ display:block; }
/* five short facts read better as one row of columns under a wide image than as a 2-up block.
   auto-fit was tried first and left a 4 + 1 orphan at 1440; the count is fixed and known, so
   the track count is stated outright at each breakpoint. */
.actual-cards-wide{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:26px 28px; }
@media (max-width:1080px){ .actual-cards-wide{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px){ .actual-cards-wide{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:480px){ .actual-cards-wide{ grid-template-columns:1fr; } }

/* — Fan deck · eighteen real planks, cool to warm — */
.fandeck{ display:flex; gap:3px; height:clamp(170px,26vh,240px); }
.fd{ flex:1; min-width:0; background-size:cover; background-position:center; position:relative; border-radius:2px; overflow:hidden; transition:flex var(--t-fast) var(--e-standard); }
.fd::after{ content:""; position:absolute; inset:0; background:rgba(14,27,35,0); transition:background var(--t-fast) var(--e-standard); }
.fd:hover{ flex:3.2; }
.fd:hover::after{ background:rgba(14,27,35,.18); }
.fd .fd-nm{ position:absolute; left:50%; bottom:12px; transform:translateX(-50%); z-index:2; font-family:var(--serif); font-size:14px; color:#F4F2EC; text-shadow:0 1px 6px rgba(0,0,0,.8); white-space:nowrap; opacity:0; transition:opacity var(--t-fast) var(--e-standard) .06s; }
.fd .fd-nm i{ font-style:normal; font-family:var(--sans); font-size:9.5px; letter-spacing:.08em; opacity:.75; margin-inline-start:6px; }
.fd:hover .fd-nm,.fd:focus-visible .fd-nm{ opacity:1; }
@media (max-width:680px){ .fandeck{ flex-wrap:wrap; height:auto; gap:4px; } .fd{ flex:1 1 22%; height:88px; } .fd:hover{ flex:1 1 22%; } .fd .fd-nm{ display:block; opacity:1; bottom:6px; font-size:10px; } .fd .fd-nm i{ display:none; } }

/* — True scale · the plank as it is (architectural dimension drawing) — */
.tscale{ margin:26px 0 30px; }
.tscale svg{ width:100%; max-width:1100px; height:auto; display:block; }
/* Phone: the plank must READ as a plank. Forcing min-width:1000px inside a ~340px screen showed
   only its left third — a wood cube nobody scrolls past. So it scales to fit, and the labels and
   rules are scaled back UP in viewBox units (×~3.2) so they stay legible at that size. */
@media (max-width:680px){
  .tscale{ overflow-x:visible; }
  .tscale svg{ min-width:0; width:100%; }
  .tscale svg text{ font-size:34px; letter-spacing:0; }
  .tscale svg line{ stroke-width:3; }
  .tscale svg rect{ stroke-width:3; }
}

/* — Palette fan · designer's sample cards held in a hand — */
.palfan{ display:flex; justify-content:center; align-items:flex-end; padding:38px 10px 16px; }
.pf-card{ position:relative; width:clamp(96px,12.5vw,152px); aspect-ratio:5/7; border-radius:9px; background-size:cover; background-position:center; border:1px solid rgba(35,32,32,.15); box-shadow:0 12px 26px -12px rgba(35,32,32,.38); transform:rotate(var(--r)); transform-origin:50% 125%; margin-inline-start:-28px; transition:transform var(--t-fast) var(--e-standard), box-shadow var(--t-fast) var(--e-standard), z-index 0s; }
.pf-card:first-child{ margin-inline-start:0; }
.pf-card:hover{ transform:rotate(var(--r)) translateY(-20px); z-index:6; box-shadow:0 26px 40px -14px rgba(35,32,32,.42); }
.pf-card i{ position:absolute; left:50%; bottom:10px; transform:translateX(-50%); font-style:normal; font-family:var(--sans); font-size:10.5px; letter-spacing:.02em; color:var(--ink); background:rgba(244,242,236,.94); border:1px solid rgba(35,32,32,.08); border-radius:2px; padding:2px 8px; white-space:nowrap; }
.mr-cap.center{ text-align:center; }
@media (max-width:680px){ .pf-card{ width:15.2vw; margin-inline-start:-14px; } .pf-card i{ display:none; } .palfan{ padding-top:24px; } }

/* — Closing band · the last word bathed in the model's own colour — */
.closing .punch{ }
.closing.on-dark, .closing.on-dark .display{ color:var(--paper-2); }
.closing.on-dark .muted{ color:rgba(247,244,236,.85); }
.closing.on-dark .punch{ color:#FFFFFF; }
.closing.on-dark .btn{ border-color:rgba(247,244,236,.85); color:var(--paper-2); }
.closing.on-dark .btn:hover{ background:var(--paper-2); color:var(--ink); }
.closing.on-dark .btn-solid{ background:var(--paper-2); color:var(--ink); border-color:var(--paper-2); }
.closing.on-dark .btn-solid:hover{ background:transparent; color:var(--paper-2); }
.closing.on-light, .closing.on-light .display{ color:var(--ink-2); }
.closing.on-light .muted{ color:rgba(38,34,30,.82); }
.closing.on-light .punch{ color:var(--ink-2); }

/* — You-are-here waypoint on model pages — */
.wp-now{ color:var(--oak-text); }
.wp-now .wp-t{ border-bottom:1px solid var(--oak); padding-bottom:2px; }

/* card material grain */
.pf-card::after{ content:""; position:absolute; inset:0; border-radius:9px; background:url(../brand/card-grain.png); background-size:130px; opacity:.16; mix-blend-mode:overlay; pointer-events:none; }
.pf-card.pf-floor::after{ opacity:.05; }
/* closing on the real floor */
.closing{ position:relative; overflow:hidden; }
/* Scrim floor is MEASURED, not eyeballed: on the palest floors (1140-19 St Barth, p98 rgb 203/199/187)
   the old .34 top stop left the lead at CR 3.48 — below AA 4.5 on 7 of 18 models (14 pages).
   .56 is the minimum top stop at which every text row in the band clears 4.5 on all 18:
   coord 4.84 · lead 5.55 · pairline 7.56 · steps 7.14 (worst-case model, brightest 2% of the tile).
   The bottom stop is untouched — the floor's own colour still bathes the band. */
.closing-scrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(14,20,24,.56),rgba(14,20,24,.74)); }
.closing .wrap{ position:relative; z-index:2; }
.closing.on-dark .punch{ text-shadow:0 1px 14px rgba(0,0,0,.35); }
/* Beat 4 · the quiet pairing line (rational anchor). Never .reveal — a beat that JS can hide
   is a beat that was not delivered. Serif italic in Latin; RTL keeps upright, because
   Frank Ruhl Libre has no true italic and the browser would fake-slant Hebrew. */
.pairline{ font-family:var(--serif); font-style:italic; font-size:clamp(15px,1.5vw,18px);
  line-height:1.55; letter-spacing:.005em; margin-top:1.05rem; }
.closing.on-dark .pairline{ color:var(--paper-2); text-shadow:0 1px 12px rgba(0,0,0,.35); }
.closing.on-light .pairline{ color:var(--ink-2); text-shadow:none; }
html[dir="rtl"] .pairline{ font-family:'Frank Ruhl Libre',Georgia,serif; font-style:normal; line-height:1.7; }
/* — No synthetic oblique on Hebrew (whole class, found 25.7 while verifying beat 4) —
   Spectral ships a real italic file; Frank Ruhl Libre and Heebo do not. Every italic rule that
   also lands on Hebrew was therefore being faked by the browser as a slant — the same
   promise-vs-reality fault as a wrong font. Measured on /he: 18 closing headlines,
   19 <em> runs (the `evokes` line), 18 convergence captions.
   Latin names keep their own face; .latin sets its family explicitly. */
html[dir="rtl"] em,
html[dir="rtl"] .closing .display,
html[dir="rtl"] .convcap{ font-style:normal; }
/* hero: quieter headline */
.hero-cinema h1{ font-size:clamp(31px,5vw,62px); }

/* hero rotator crossfade */
.hero-cinema .hero-video{ transition:opacity var(--t-arrive) var(--e-arrive); }
.hero-cinema .hero-video-b{ opacity:0; }

/* closing: editorial type on the real floor */
.closing .coord{ color:rgba(247,244,236,.6); letter-spacing:.2em; }
.closing .display{ font-size:clamp(22px,2.9vw,34px); font-style:italic; font-weight:400; opacity:.95; }
.closing .lead{ font-size:clamp(16px,1.8vw,19px); }
.closing .punch{ font-size:clamp(32px,4.6vw,54px); line-height:1.12; }

/* — Coast ticker · a slow voyage line of the eighteen coasts — */
.ticker{ overflow:hidden; border-bottom:1px solid var(--line); background:var(--surface); direction:ltr; }
.tk-track{ display:inline-flex; align-items:center; gap:34px; white-space:nowrap; padding:11px 0; animation:tk 70s linear infinite; will-change:transform; }
.ticker:hover .tk-track{ animation-play-state:paused; }
.tk-track a{ font-family:var(--sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.tk-track a b{ font-weight:500; color:var(--ink); margin-inline-end:8px; }
.tk-track a:hover b{ color:var(--oak-text); }
.tk-dot{ width:5px; height:5px; border:1px solid var(--oak); transform:rotate(45deg); flex:none; }
@keyframes tk{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .tk-track{ animation:none; } }

/* — FAQ · straight answers — */
.faq{ border-bottom:1px solid var(--line); }
.faq summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 2px; font-family:var(--serif); font-size:18px; color:var(--ink); }
html[dir="rtl"] .faq summary{ font-family:'Heebo',sans-serif; font-weight:500; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"\002B"; color:var(--oak-text); font-size:20px; flex:none; }
.faq[open] summary::after{ content:"\2212"; }
.faq p{ padding:0 2px 18px; color:var(--muted); max-width:64ch; }

/* — Voyage route · one line instead of two word-sections — */
.vroute{ position:relative; display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin:clamp(46px,7vh,84px) auto 0; max-width:980px; padding-top:5px; }
.vroute::before{ content:""; position:absolute; top:10px; left:3%; right:3%; height:1px;
  background-image:linear-gradient(90deg, var(--oak) 0 6px, transparent 6px 14px); background-size:14px 1px; background-repeat:repeat-x;
  animation:vflow 2.6s linear infinite; opacity:.55; }
html[dir="rtl"] .vroute::before{ animation-direction:reverse; }
@keyframes vflow{ from{ background-position:0 0; } to{ background-position:14px 0; } }
@media (prefers-reduced-motion: reduce){ .vroute::before{ animation:none; } }
.vr-p{ position:relative; display:flex; flex-direction:column; align-items:center; gap:7px; flex:1; min-width:0; }
.vr-p i{ width:11px; height:11px; border-radius:50%; background:var(--paper); border:2px solid var(--oak); margin-top:-1px; }
.vr-p i.vr-plank{ width:64px; height:15px; border-radius:2px; border:1px solid var(--line); background-size:cover; background-position:center; margin-top:-3px; box-shadow:0 3px 8px rgba(14,27,35,.2); }
.vr-p b{ font-family:var(--serif); font-weight:500; font-size:clamp(15px,1.6vw,19px); color:var(--ink); margin-top:8px; }
html[dir="rtl"] .vr-p b{ font-family:'Heebo',sans-serif; font-weight:600; }
.vr-p small{ font-family:var(--sans); font-size:11.5px; color:var(--muted); letter-spacing:.02em; }
html[dir="rtl"] .vr-p small{ font-family:'Heebo',sans-serif; }
@media(max-width:680px){
  .vroute{ flex-direction:column; align-items:flex-start; gap:20px; padding-top:0; padding-inline-start:6px; }
  .vroute::before{ top:4px; bottom:4px; left:auto; right:auto; inset-inline-start:11px; width:1px; height:auto;
    background-image:linear-gradient(180deg, var(--oak) 0 6px, transparent 6px 14px); background-size:1px 14px; background-repeat:repeat-y; animation:none; }
  .vr-p{ flex-direction:row; align-items:center; gap:12px; }
  .vr-p i{ flex:none; margin:0; }
  .vr-p b{ margin:0; }
  .vr-p small{ margin-inline-start:2px; }
}

/* — The shelf · the whole collection in real planks, this model in place — */
.shelves{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(34px,5vh,54px); }
.shf-row{ min-width:0; }
.shf-row .lab{ display:flex; justify-content:space-between; align-items:baseline; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.shf-row .lab b{ font-family:var(--sans); font-weight:500; letter-spacing:.12em; color:var(--ink); }
html[dir="rtl"] .shf-row .lab, html[dir="rtl"] .shf-row .lab b{ font-family:'Heebo',sans-serif; letter-spacing:0; font-size:12px; }
.shf{ display:flex; align-items:flex-end; gap:5px; }
.shf-it{ position:relative; flex:1; min-width:0; display:block; }
.shf-strip{ display:block; height:52px; border-radius:2px; border:1px solid var(--line); background-size:cover; background-position:center; opacity:.62; filter:saturate(.92); transition:opacity var(--t-fast) var(--e-standard), transform var(--t-fast) var(--e-standard); }
.shf-it:hover .shf-strip{ opacity:1; transform:translateY(-3px); }
.shf-it.is-cur{ flex:1.9; }
.shf-it.is-cur .shf-strip{ height:72px; opacity:1; filter:none; outline:2px solid var(--oak); outline-offset:2px; box-shadow:0 8px 20px rgba(14,27,35,.22); }
.shf-lbl{ position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); font-family:var(--serif); font-size:14.5px; color:var(--ink); white-space:nowrap; }
.shf-row{ padding-top:26px; }
.shf-sent{ margin-top:14px; font-family:var(--serif); font-size:clamp(15.5px,1.8vw,18px); color:var(--ink); }
html[dir="rtl"] .shf-sent{ font-family:'Heebo',sans-serif; font-size:15.5px; }
@media(max-width:680px){ .shf{ gap:5px; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:8px; scroll-snap-type:x proximity; } .shf-it{ flex:0 0 34px; scroll-snap-align:center; } .shf-it.is-cur{ flex:0 0 60px; } .shf-strip{ height:46px; } .shf-it.is-cur .shf-strip{ height:60px; } .shf-lbl{ font-size:12.5px; } .lt-btn{ padding:10px 14px; } }

/* — hero video pause control — */
.hero-pause{ position:absolute; bottom:16px; inset-inline-end:16px; z-index:6; width:40px; height:40px; border-radius:50%; border:1px solid rgba(247,244,236,.4); background:rgba(14,27,35,.42); color:var(--paper-2); font-size:11px; letter-spacing:2px; cursor:pointer; display:grid; place-items:center; transition:background var(--t-fast) var(--e-standard); }
.hero-pause:hover{ background:rgba(14,27,35,.7); }
.hero-pause[aria-pressed="true"]::before{ content:"\25B6"; font-size:13px; }
.hero-pause[aria-pressed="true"]{ font-size:0; }
@media (prefers-reduced-motion: reduce){ .hero-pause{ display:none; } }

/* — Evidence registry table — */
.reg{ width:100%; border-collapse:collapse; font-family:var(--sans); margin-top:8px; }
.reg th{ text-align:start; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:500; padding:0 14px 10px; border-bottom:1px solid var(--ink); }
.reg td{ padding:13px 14px; border-bottom:1px solid var(--line); font-size:14.5px; color:var(--ink); vertical-align:top; }
.reg td:first-child{ color:var(--muted); width:34%; }
.reg td:last-child,.reg th:last-child{ font-size:12.5px; letter-spacing:.03em; color:var(--muted); white-space:nowrap; }
.reg tbody tr:last-child td{ border-bottom:0; }
html[dir="rtl"] .reg{ font-family:'Heebo',sans-serif; }
html[dir="rtl"] .reg td:last-child,html[dir="rtl"] .reg th:last-child{ font-family:var(--sans); direction:ltr; text-align:right; }
@media(max-width:680px){ .reg th:last-child,.reg td:last-child{ font-size:11px; white-space:normal; } .reg td{ padding:11px 8px; font-size:13.5px; } }

/* — Copy-paste specification clause — */
.spec-clause{ margin:26px 0 8px; padding:20px 22px; border:1px solid var(--line); border-inline-start:2px solid var(--oak); border-radius:3px; background:var(--sand); }
.clause-text{ margin:8px 0 14px; font-family:var(--sans); font-size:13.5px; line-height:1.7; color:var(--ink); }
html[dir="rtl"] .clause-text{ font-family:'Heebo',sans-serif; }
.clause-copy{ background:none; border:0; cursor:pointer; font:inherit; padding:0; }
@media print{ .spec-clause{ break-inside:avoid; background:#fff; border:1pt solid var(--print-rule); } .clause-text{ font-size:9.5pt; } }

/* — Arrival · surface from the floor's own locked tone (Navigation-as-Voyage) —
   Move 2 (NAV-DESIGN-TOKENS 2026-07-20): the veil is the model's darkened shade (--veil,
   set inline per-model); it surfaces in .88s (a breath of arrival, not a crossfade) and
   melts toward the pale --band of the landing strip below. Opacity only — no slide/zoom. */
.arrive-veil{ position:fixed; inset:0; z-index:9997; pointer-events:none; opacity:0;
  animation:arrive-surface var(--t-arrive) var(--e-arrive) forwards; }
@keyframes arrive-surface{ 0%{ opacity:.6; } 100%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){ .arrive-veil{ display:none; } }
@media print{ .arrive-veil{ display:none; } }

/* — Landing strip · a pale band of arrival above the origin image —
   colour comes from --band / --rule, set inline per model page.
   Text = --ink (13.5:1 on every model). A hairline --rule closes it. Restrained. */
.landing-strip{
  min-height: clamp(84px, 12vh, 124px);
  padding-block: clamp(18px, 3.2vh, 34px);
  padding-inline: var(--gutter);
  background: var(--band);
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  display: flex; flex-direction: column; gap: 6px; justify-content: center;
}
.landing-strip .ls-eyebrow{
  font-family: var(--sans); font-weight: 500; font-size: 12.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0;
}
.landing-strip .ls-place{
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(20px, 2.5vw, 27px); line-height: 1.25; color: var(--ink);
  letter-spacing: .005em; max-width: 34ch; margin: 0;
}
html[dir="rtl"] .landing-strip .ls-place{
  font-family: 'Frank Ruhl Libre', Georgia, serif; font-style: normal; font-weight: 500;
  max-width: 40ch;
}
.landing-strip .ls-coord{
  font-family: var(--sans); font-weight: 400; font-size: 12px;
  letter-spacing: .16em; color: var(--muted); font-variant-numeric: tabular-nums; margin: 0;
}
@media (prefers-reduced-motion: no-preference){
  .landing-strip .ls-place{ animation:ls-in var(--t-fast) var(--e-standard) .12s backwards; }
  @keyframes ls-in{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
}
@media print{ .landing-strip{ background:none; border-bottom:1px solid var(--line); } }

/* — Move 3 · Taste-gate · a quiet corner pill for the unsure visitor —
   chrome-orientation (sea family), never a model tone. Rest = low-contrast surface+muted;
   hover/open = filled sea+paper. Self-mounted by taste-gate.js; hidden where a compass exists. */
.taste-gate{
  position: fixed; inset-block-end: 20px; inset-inline-end: 20px; z-index: 55;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--line); color: var(--muted);
  font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: .01em;
  box-shadow: 0 2px 10px rgba(14,27,35,.06); cursor: pointer;
  transition: background var(--t-fast) var(--e-standard), color var(--t-fast) var(--e-standard), border-color var(--t-fast) var(--e-standard), box-shadow var(--t-fast) var(--e-standard), transform var(--t-fast) var(--e-standard);
}
.taste-gate::before{
  content:""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--sea); opacity: .55; flex: none;
}
@media (prefers-reduced-motion: no-preference){
  .taste-gate::before{ animation: tg-breathe 3.2s ease-in-out infinite; }
  @keyframes tg-breathe{ 0%,100%{ opacity:.35; } 50%{ opacity:.7; } }
}
.taste-gate:hover, .taste-gate:focus-visible{
  background: var(--sea); color: var(--paper); border-color: var(--sea);
  box-shadow: 0 4px 16px rgba(14,27,35,.16); transform: translateY(-1px);
}
.taste-gate:hover::before, .taste-gate:focus-visible::before{ background: var(--paper); opacity: 1; }
.taste-gate .tg-dismiss{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; margin-inline-start:2px; border:0; border-radius:50%;
  background:transparent; color:inherit; font-size:15px; line-height:1; cursor:pointer; opacity:.6;
}
.taste-gate .tg-dismiss:hover{ opacity:1; }
/* opened panel — in place, not full-screen */
.taste-gate-panel{
  position: fixed; inset-block-end: 20px; inset-inline-end: 20px; z-index: 56;
  width: min(300px, calc(100vw - 40px));
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 28px rgba(14,27,35,.16); padding: 20px 20px 18px;
  color: var(--ink); font-family: var(--sans);
}
@media (prefers-reduced-motion: no-preference){
  .taste-gate-panel{ animation:tg-open var(--t-fast) var(--e-standard) backwards; }
  @keyframes tg-open{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }
}
.taste-gate-panel .tgp-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.taste-gate-panel .tgp-q{ font-family:var(--serif); font-size:19px; line-height:1.25; color:var(--ink); margin:0; }
.taste-gate-panel .tgp-line{ font-size:13.5px; line-height:1.5; color:var(--muted); margin:10px 0 16px; }
.taste-gate-panel .tgp-go{
  display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:500;
  padding:11px 18px; border-radius:8px; background:var(--sea); color:var(--paper); border:1px solid var(--sea);
  transition:background var(--t-fast) var(--e-standard), border-color var(--t-fast) var(--e-standard);
}
.taste-gate-panel .tgp-go:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.taste-gate-panel .tgp-later{ display:block; margin-top:12px; padding:0;
  border:0; background:none; cursor:pointer;
  font-family:var(--sans); font-size:12.5px; color:var(--muted);
  border-bottom:1px solid transparent; transition:color var(--t-fast) var(--e-standard), border-color var(--t-fast) var(--e-standard); }
.taste-gate-panel .tgp-later:hover{ color:var(--ink); border-color:var(--line); }
.taste-gate-panel .tgp-close{
  border:0; background:transparent; color:var(--muted); font-size:20px; line-height:1;
  cursor:pointer; padding:0; margin:-2px -2px 0 0; flex:none;
}
.taste-gate-panel .tgp-close:hover{ color:var(--ink); }
@media (prefers-reduced-motion: reduce){
  .taste-gate{ transition: background .01s, color .01s; }
  .taste-gate:hover{ transform: none; }
}
.taste-gate .tg-short{ display:none; }
@media (max-width: 720px){
  /* mobile: a narrow pill with two words. It used to collapse to a 42px grey circle with
     the label clipped away — a dot with no word, which nobody has a reason to press. */
  .taste-gate{ inset-block-end: 78px; inset-inline-end: 16px; z-index: 61;
    width: auto; height: auto; padding: 12px 16px; gap: 8px;
    border-radius: 999px; justify-content: center; }
  .taste-gate .tg-label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .taste-gate .tg-short{ display:inline; font-size:13px; }
  .taste-gate::before{ width: 9px; height: 9px; }
  .taste-gate-panel{ inset-block-end: 78px; z-index: 62; }
}
@media print{ .taste-gate, .taste-gate-panel{ display:none !important; } }

.eye-card{ position:relative; display:block; width:100%; aspect-ratio:4/5; border:1px solid var(--line); border-radius:3px;
  overflow:hidden; cursor:pointer; padding:0; background:var(--surface);
  box-shadow:0 1px 0 rgba(0,0,0,.04), 0 18px 44px -22px rgba(35,32,32,.45);
  transition:transform var(--t-fast) var(--e-standard), box-shadow var(--t-fast) var(--e-standard); }
.eye-card:hover{ transform:translateY(-4px); box-shadow:0 1px 0 rgba(0,0,0,.04), 0 26px 54px -20px rgba(35,32,32,.5); }
.eye-card:active{ transform:translateY(-1px); }
.eye-card:focus-visible{ outline:2px solid var(--sea); outline-offset:3px; }
.ec-field,.ec-planks{ position:absolute; inset:0; }
.ec-wall{ position:absolute; top:0; left:0; right:0; height:56%; }
.ec-floor{ position:absolute; bottom:0; left:0; right:0; height:44%; }
.ec-planks{ display:flex; }
.ec-planks > i{ flex:1; height:100%; }

/* — the pair screen's BOX MODEL · moved here from eye.css on 2026-07-26 —
   Founder: "you click it and it jumps huge, then a second later it goes small."
   Measured in Chrome frame-by-frame (requestAnimationFrame + getBoundingClientRect):
   with eye.css blocked, a card renders 560x700; with it applied, 270x337.5. eye.css is
   loaded async on the home page (media=print swap) because making it render-blocking
   costs ~1.0s of LCP — so it must not own any geometry the home page renders. These are
   the rules that decide the SIZE of a pair screen; they now live in the render-blocking
   sheet and cannot lose a race. eye.css keeps only colour/typography/state.
   /eye.html loads site.css before eye.css, so that surface is byte-identical. */
.eye-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:12px; }
.eye-count{ font-family:var(--sans); font-size:11px; letter-spacing:.18em; color:var(--muted); font-variant-numeric:tabular-nums; }
.eye-bar{ height:2px; background:var(--line); border-radius:2px; overflow:hidden; margin-bottom:26px; }
.eye-bar > i{ display:block; height:100%; background:var(--ink); transition:width var(--t-fast) var(--e-standard); }
.eye-kicker{ font-family:var(--sans); font-size:12.5px; letter-spacing:.03em; color:var(--muted); margin:0 0 6px; }
.eye-ask{ font-family:var(--serif); font-size:clamp(19px,2.6vw,24px); margin:0 0 18px; }
html[dir="rtl"] .eye-ask{ font-family:'Frank Ruhl Libre',Georgia,serif; font-weight:500; }
.eye-pairing{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,3vw,20px);
  transition:opacity var(--t-fast) var(--e-standard), transform var(--t-fast) var(--e-standard); }
.eye-skip{ text-align:center; margin-top:22px; }
@media (prefers-reduced-motion:reduce){ .eye-pairing{ transition:none; } }

/* — CARETTA EYESIGHT · the first question, in the page (home-page entry, 2026-07-25) —
   Quiet by construction: no button, no counter, no progress bar. The cards ARE the
   entry. The slot reserves exactly the height the pair will occupy, so nothing jumps
   when it arrives. */
/* 25.7 — founder review: "two beige squares, off to one side, nobody understands what
   this is". Two failures, both fixed here as a class: (a) the block was left-aligned in a
   page whose every other feature block is centred, so it read as debris; (b) it asked a
   question with no statement of WHAT it is. The layout is centred, and .eyi-do names the
   affordance out loud, because an unlabelled colour field does not look tappable.
   25.7 (later, same day) — founder again: "you're digging a hole there for nothing".
   The fix above had over-corrected into three paragraphs of explaining-before-trying.
   The block is now capped at ONE line above the question (≤25 words, both languages):
   .eyi-open (what it is) · .eyi-q (the question) · .eyi-do (the affordance).
   .eyi-how and .eyi-note were removed from the markup, and their rules with them —
   a dead rule is how a design system starts drifting. */
.eye-inline{ padding-block:clamp(44px,7vh,84px); }
.eye-inline .wrap{ text-align:center; }
.eye-inline .eyi-open{ font-family:var(--sans); font-size:15px; line-height:1.6;
  color:var(--ink); max-width:46ch; margin:0 auto 24px; text-wrap:balance; }
.eye-inline .eyi-q{ font-family:var(--serif); font-weight:500;
  font-size:clamp(21px,3vw,30px); line-height:1.25; color:var(--ink);
  margin:0 auto 8px; max-width:26ch; text-wrap:balance; }
html[dir="rtl"] .eye-inline .eyi-q{ font-family:'Frank Ruhl Libre',Georgia,serif; }
.eye-inline .eyi-do{ font-family:var(--sans); font-size:13px; line-height:1.6;
  letter-spacing:.01em; color:var(--muted); margin:0 auto 20px; max-width:40ch; }
.eyi-stage{ display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(12px,3vw,20px); max-width:560px; margin-inline:auto; }
.eyi-slot{ grid-column:1 / -1; aspect-ratio:5/3; display:flex;
  align-items:center; justify-content:center; text-align:center; padding:20px;
  border:1px solid var(--line); border-radius:3px; background:var(--surface); }
@media (max-width:560px){ .eyi-stage{ max-width:none; } }
@media (prefers-reduced-motion:reduce){ .eyi-stage .eye-card{ transition:none; } }

/* 26.7 (founder) — "I don't want the entry page to jump to another page — I want everything
   operated from there. And it needs an explanation. Call it CARETTA EYESIGHT."
   .eyi-what is that explanation (≤25 words, both languages) and sits above the question.
   .eyi-run hosts the full reading, in place: once the first pair is answered the intro
   chrome is hidden and every following screen renders here. */
.eye-inline .eyi-what{ font-family:var(--sans); font-size:15px; line-height:1.6;
  color:var(--ink); max-width:52ch; margin:0 auto 10px; text-wrap:balance; }
.eye-inline .eyi-open{ margin-bottom:24px; }
.eye-inline.is-running .eyi-what,
.eye-inline.is-running .eyi-open,
.eye-inline.is-running .eyi-q,
.eye-inline.is-running .eyi-do,
.eye-inline.is-running .eyi-stage{ display:none; }
.eyi-run{ max-width:880px; margin-inline:auto; text-align:start; }
.eyi-run[hidden]{ display:none; }
.eye-inline.is-running .eyi-run{ text-align:center; }
/* 25.7 (founder) — "the cards grow and don't stay the same, it's odd". They did: the
   first pair sits in .eyi-stage (560px), and from the second onward in .eyi-run (880px),
   so every card jumped ~270px → ~430px wide on the first click. The pair grid is now
   pinned to the same 560px in BOTH hosts, so a card is the same size on all 14 steps.
   Only the pair is capped — the reading's prose and result keep the wider 880px. */
.eye-inline .eye-pairing{ max-width:560px; margin-inline:auto; }
/* 26.7 — the second half of the same founder report, measured on the live site at 1440,
   1920 and 390, EN and HE: on the first click the section collapsed 696px -> 167px to an
   EMPTY 880px box for the whole duration of the /api/eye round-trip, then sprang back.
   Locally that gap is ~60ms; on a cold serverless call it is the "second" the founder saw
   — a wide empty box opening, then a small pair dropping into it. And the smooth-scroll
   that runs at the same moment was measuring a collapsed layout, so it parked at the
   wrong offset too.
   Fix: the answered pair STAYS in place, faded, holding the section's height, until the
   next screen has actually painted. There is no empty state to see. This mirrors what
   /eye.html already did (.eye-fade on the outgoing pair) — the inline surface was the
   only one that tore its own content down before it had a replacement. */
.eyi-stage.eyi-handoff{ opacity:.38; pointer-events:none;
  transition:opacity var(--t-fast) var(--e-standard); }
@media (prefers-reduced-motion:reduce){ .eyi-stage.eyi-handoff{ transition:none; } }
/* .eye-ask is focused programmatically after each step so a screen reader hears the new
   question. It is not an interactive control, and Chrome was painting a full-width blue
   focus ring around the question on every mouse click. Silence the ring; the SR
   announcement (the reason for the focus) is unaffected. */
.eye-ask[tabindex="-1"]:focus,
.eye-ask[tabindex="-1"]:focus-visible{ outline:none; }

/* — Convergence mark · many readings, one lock — */
.convmark{ margin:22px 0 6px; max-width:340px; }
.convmark svg{ width:100%; height:auto; display:block; }
.convcap{ font-family:var(--serif); font-size:14px; color:var(--muted); margin-top:6px; font-style:italic; }
html[dir="rtl"] .convcap{ font-family:'Heebo',sans-serif; font-style:normal; }
@media print{ .convmark{ display:none; } }

/* — Light control · warm / natural / cool, an elegant sliding segmented control — */
.lightbox{ position:relative; display:flex; flex-direction:column; }
.lightbox .macro{ transition:filter var(--t-fast) var(--e-standard); border-radius:2px; }
.plankbox{ align-items:stretch; }
.plank-strip{ width:100%; height:clamp(122px,15vh,168px); object-fit:cover; object-position:center; border:1px solid var(--line); border-radius:3px; box-shadow:0 14px 40px rgba(14,27,35,.13); }
.plankbox .light-toggle{ align-self:center; }
.light-toggle{ position:relative; align-self:center; display:inline-flex; margin:0 0 16px; padding:4px; border:1px solid var(--line); border-radius:999px; background:var(--sand); }
.lt-slider{ position:absolute; top:0; left:0; z-index:0; border-radius:999px; background:var(--night) var(--night-grad); box-shadow:0 2px 8px rgba(14,27,35,.22); transition:transform var(--t-fast) var(--e-standard), width var(--t-fast) var(--e-standard), height var(--t-fast) var(--e-standard); }
.lt-btn{ position:relative; z-index:1; font-family:var(--sans); font-size:12px; letter-spacing:.02em; color:var(--muted); background:none; border:0; border-radius:999px; padding:9px 18px; cursor:pointer; transition:color var(--t-fast) var(--e-standard); white-space:nowrap; }
html[dir="rtl"] .lt-btn{ font-family:'Heebo',sans-serif; letter-spacing:0; }
.lt-btn.is-on{ color:var(--paper); }
.lt-note{ align-self:center; text-align:center; margin-top:12px; max-width:46ch; color:var(--muted); }
@media (prefers-reduced-motion:reduce){ .lt-slider,.lightbox .macro{ transition:none; } }
@media print{ .light-toggle,.lt-note{ display:none; } .lightbox .macro{ filter:none!important; } }
@media(max-width:680px){ .lt-btn{ padding:9px 13px; font-size:11.5px; } }

/* — Accessibility statement — */
.a11y-list{ margin:12px 0 0; padding-inline-start:1.2em; }
.a11y-list li{ margin:7px 0; line-height:1.6; }
.a11y-fill{ background:rgba(176,120,90,.14); color:var(--clay,#9c5a4a); border:1px dashed var(--clay,#9c5a4a); border-radius:3px; padding:1px 6px; font-size:.92em; }

/* — Evidence registry · honest status labels (P0-05/06) — */
.ev-status,.ev-req,.ev-pending,.ev-ok{ display:inline-block; padding:2px 9px; border-radius:999px; letter-spacing:.12em; white-space:nowrap; }
.ev-req{ color:var(--muted); border:1px solid rgba(120,110,98,.34); }
.ev-pending{ color:var(--clay); border:1px dashed rgba(165,98,63,.5); }
.ev-ok{ color:var(--ink); border:1px solid rgba(120,110,98,.28); }

/* — Robot 03 authority modules + specifier dock (P0-03/04/13) — */
.r03-list{ list-style:none; margin:0; padding:0; }
.r03-list li{ padding:7px 0 7px 18px; border-bottom:1px solid rgba(120,110,98,.16); position:relative; line-height:1.55; }
.r03-list li:before{ content:"—"; position:absolute; left:0; color:var(--muted); }
[dir=rtl] .r03-list li{ padding:7px 18px 7px 0; }
[dir=rtl] .r03-list li:before{ left:auto; right:0; }
.r03-truth .coord{ color:var(--muted); }
.spec-dock{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:16px 18px; border:1px solid rgba(120,110,98,.22); border-radius:8px; background:rgba(120,110,98,.04); }
.dock-lbl{ margin-inline-end:6px; }
.dock-a{ display:inline-block; padding:9px 15px; border:1px solid rgba(120,110,98,.34); border-radius:999px; font-size:14px; text-decoration:none; color:var(--ink); min-height:40px; line-height:1.5; }
.dock-a:hover{ border-color:var(--ink); }
.dock-a.is-disabled{ opacity:.5; cursor:default; }

/* — Evidence registry · three lanes (P0-05/06) — */
.ev-lanes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.5vw,34px); }
.ev-lane{ border:1px solid rgba(120,110,98,.18); border-radius:10px; padding:18px 18px 8px; }
.ev-lane .kicker{ margin-bottom:10px; }
.ev-lane .reg{ width:100%; border-collapse:collapse; }
.ev-lane .reg td{ padding:9px 0; border-bottom:1px solid rgba(120,110,98,.12); vertical-align:top; line-height:1.4; font-size:14px; }
.ev-lane .reg tr:last-child td{ border-bottom:none; }
.ev-lane .reg td:last-child{ text-align:end; white-space:nowrap; padding-inline-start:10px; }
@media (max-width:760px){ .ev-lanes{ grid-template-columns:1fr; } }

/* — Homepage decision screen + lead capture (P0-01/02/07/09/10/12) — */
.trust-strip{ list-style:none; display:flex; flex-wrap:wrap; gap:8px 10px; margin:20px 0 0; padding:0; }
.trust-strip li{ font-family:var(--sans); font-size:12px; letter-spacing:.04em; color:rgba(244,242,236,.9); border:1px solid rgba(244,242,236,.28); border-radius:999px; padding:5px 12px; }
.hero-routes{ margin-top:22px; display:flex; flex-wrap:wrap; gap:12px; }
.hero-explore{ margin-top:14px; }
.hero-explore .link-arrow, .link-arrow.on-dark{ color:rgba(244,242,236,.85); }
/* 25.7 (WEBOS hero move): the reservations below are FONT-SWAP guards, not layout.
   They were sized for a five-chip / five-button hero; with the calm hero they were
   reserving dead space and — worse — `min-height` on a nowrap flex row stretched the
   chips into 84px ovals. Measured at 375: h1 2 lines, lead 3 lines, chips 1 row,
   buttons 2 rows. Reserve exactly that, and never stretch a chip again. */
@media (max-width:760px){
  .hero-cinema-inner h1{ min-height:2.2em; }
  .hero-cinema-inner .lead{ min-height:3.4em; }
  .trust-strip{ min-height:34px; align-content:flex-start; align-items:flex-start; }
  .hero-routes{ min-height:112px; align-content:flex-start; }
  .hero-explore, .hero-explore .link-arrow{ font-size:12.8px; line-height:1.9; }
}
.btn-wa{ border-color:rgba(37,211,102,.6)!important; }
.btn-wa:hover{ border-color:#25D366!important; }

/* material strip — two priority models */
.mat-strip{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,3vw,40px); }
.mat-img{ display:block; overflow:hidden; border-radius:8px; }
.mat-img img{ width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover; transition:transform var(--t-fast) var(--e-standard); }
.mat-img:hover img{ transform:scale(1.02); }
.mat-head{ margin:16px 0 4px; }
.mat-code{ font-family:var(--sans); color:var(--muted); letter-spacing:.05em; }
.mat-name{ font-family:var(--serif,'Spectral',serif); font-size:22px; }
.mat-mood{ color:var(--muted); font-size:14px; margin:0 0 12px; }
.mat-cta{ display:flex; gap:22px; flex-wrap:wrap; }
@media (max-width:680px){ .mat-strip{ grid-template-columns:1fr; } }

/* contact route chips */
.route-controls{ border:none; margin:0 0 22px; padding:0; }
.route-controls legend{ padding:0; margin-bottom:10px; }
.route-chips{ display:flex; flex-wrap:wrap; gap:9px; }
.route-chip{ font-family:var(--sans); font-size:14px; padding:9px 15px; border:1px solid rgba(120,110,98,.34); border-radius:999px; background:transparent; cursor:pointer; color:var(--ink); min-height:40px; }
.route-chip.is-on{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* what happens next */
.next-steps{ margin:12px 0 0; padding-inline-start:1.1em; }
.next-steps li{ margin:9px 0; line-height:1.55; }
/* 26.7 — the "we come to measure" step was removed (founder: no measurement commitment).
   One step left is not a list; it is a sentence. Same optical weight as the old list item. */
.next-step-line{ margin:12px 0 0; line-height:1.55; }

/* mobile sticky action bar (WhatsApp · Samples · Quote) */
.mobile-cta{ position:fixed; left:0; right:0; bottom:0; z-index:60; display:none; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(120,110,98,.2); border-top:1px solid rgba(120,110,98,.25); }
.mobile-cta .mcta{ display:flex; align-items:center; justify-content:center; min-height:52px; background:var(--paper); color:var(--ink); text-decoration:none; font-family:var(--sans); font-size:14px; }
.mobile-cta .mcta.wa{ background:#25D366; color:var(--wa-ink); font-weight:500; }
@media (max-width:760px){ .mobile-cta{ display:grid; } body{ padding-bottom:52px; } }

/* Conversion trio · exact sample, reversible shortlist, honest SLA */
.model-conversion .sample-honesty{flex-basis:100%;max-width:56ch;margin:0;color:var(--muted);font-size:13px;line-height:1.55}
.shortlist-toggle{font-family:var(--sans);cursor:pointer;background:transparent}
.shortlist-toggle.is-saved{border-color:var(--oak-text);color:var(--oak-text)}
.shortlist-chip{position:fixed;z-index:58;inset-inline-end:clamp(14px,2vw,28px);inset-block-end:clamp(66px,7vw,88px);padding:10px 15px;border:1px solid rgba(120,110,98,.34);border-radius:999px;background:rgba(244,242,236,.94);color:var(--ink);box-shadow:0 8px 30px rgba(14,27,35,.14);text-decoration:none;font-size:13px;backdrop-filter:blur(10px)}
.shortlist-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,36px);min-height:280px}
.shortlist-card{border:1px solid var(--line);background:rgba(255,255,255,.25)}
.shortlist-card img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.shortlist-card-copy{padding:18px}.shortlist-card h2{font-family:var(--serif);font-weight:400;font-size:28px;margin:5px 0 14px}
.shortlist-card dl{margin:0}.shortlist-card dl div{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-top:1px solid var(--line)}
.shortlist-card dt{color:var(--muted)}.shortlist-card dd{margin:0;text-align:end}
.shortlist-card-actions{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:18px}.shortlist-card-actions button,#shortlist-clear{border:0;background:none;color:var(--muted);text-decoration:underline;cursor:pointer;padding:8px 0}
.shortlist-page-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:28px}
.sla-line{font-size:13px;color:var(--muted);margin:8px 0 0;flex-basis:100%}
.sample-flow .sample-extra,.sample-flow .route-controls{display:none!important}.sample-flow #quote-form>.grid.cols-2{grid-template-columns:1fr}.sample-flow #quote-form{max-width:520px}
@media(max-width:900px){.shortlist-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.shortlist-grid{grid-template-columns:1fr}.shortlist-chip{inset-block-end:66px}.shortlist-grid{min-height:420px}}

/* ── asset-protection layer (design-neutral): no drag, no long-press save, no select on imagery ── */
img, picture, video { -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; }
img { user-select: none; -webkit-user-select: none; }

/* webos 21.7: mobile minimum text size */
@media(max-width:640px){ .coord{ font-size:11.5px; } .worldcard .wc-word{ font-size:12px; } .worldcard .wc-coord{ font-size:11px; }
  /* 25.7 (אודיט-סופי, כשל 3): שורת-coord ארוכה בתוך chartline נחתכה ללא-גלילה במסך 375
     (nowrap בתוך overflow-x:clip). במובייל מתירים שבירת-שורה לכל המחלקה — לא פר-מופע. */
  .chartline .coord{ white-space:normal; text-align:center; } }

/* webos: closing section serves mobile-sized bg */
@media(max-width:640px){ .closing{ background-image:var(--close-bg-m, none) !important; } }

/* founder 21.7: calm hero CTAs — desktop 3, mobile 2; trust chips become one scroll row on mobile */
.hero-cinema .btn.cta-3{ display:none; }
.wp-below{ padding-block:12px 2px; border-bottom:1px solid var(--line); }
@media(max-width:680px){
  .hero-cinema .btn.cta-2{ display:none; }
  .hero-cinema .trust-strip{ display:flex; flex-wrap:nowrap; align-items:flex-start; overflow-x:auto; gap:8px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .hero-cinema .trust-strip::-webkit-scrollbar{ display:none; }
  .hero-cinema .trust-strip li{ flex:none; }
}

/* ══ Move 1 · 1:1 grain windows (WEBOS 25.7) ═══════════════════════════════════
   Closed by default → zero bytes, zero layout shift until asked for. The panes
   have a FIXED height, so the native-pixel images can never shift the page. */
.zoom1x{ margin-top:clamp(30px,4vh,44px); border-top:1px solid var(--line); }
.zoom1x>summary{ list-style:none; cursor:pointer; padding:16px 0 14px; display:flex;
  flex-wrap:wrap; align-items:baseline; gap:6px 16px; }
.zoom1x>summary::-webkit-details-marker{ display:none; }
.zoom1x>summary::after{ content:"+"; margin-inline-start:auto; font-family:var(--sans);
  font-size:19px; line-height:1; color:var(--oak-text); }
.zoom1x[open]>summary::after{ content:"\2212"; }
.zoom1x>summary:focus-visible{ outline:2px solid var(--oak-text); outline-offset:3px; }
.zoom1x .z1-sum{ font-family:var(--serif); font-size:clamp(17px,2vw,21px); color:var(--ink); }
.zoom1x .z1-body{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.4vw,30px); padding-bottom:8px; }
.z1-fig{ margin:0; min-width:0; }
.z1-pane{ max-height:clamp(300px,46vh,520px); overflow:auto; background:var(--sand);
  border:1px solid var(--line); border-radius:3px; -webkit-overflow-scrolling:touch;
  /* fit the real crop: a 486px window must not sit in a 507px box with a sand gap.
     No CLS — the <img> carries width/height, so the intrinsic box is known before load. */
  width:max-content; max-width:100%;
  /* the crop is not a language: start the pan at the rule, in both directions */
  direction:ltr; }
.z1-pane:focus-visible{ outline:2px solid var(--oak-text); outline-offset:2px; }
.z1-pane img{ display:block; max-width:none; width:auto; height:auto; }
.z1-cap{ font-family:var(--sans); font-size:12.5px; letter-spacing:.02em;
  color:var(--muted); margin-top:9px; }
.z1-note{ grid-column:1/-1; color:var(--muted); margin:2px 0 0; }
@media(max-width:820px){ .zoom1x .z1-body{ grid-template-columns:1fr; } }
@media(prefers-reduced-motion:no-preference){ .z1-pane{ scroll-behavior:smooth; } }

/* ══ Move 2 · true plank scale on Compare (WEBOS 25.7) ═════════════════════════
   One scale for both boards, in percentages of the longest board we make, so it
   holds at every viewport and mirrors correctly in RTL. The rule is real text. */
.tscale2{ max-width:900px; }
.ts2-row{ margin-bottom:clamp(16px,2.4vh,26px); }
.ts2-lab{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; margin:0 0 8px;
  font-family:var(--sans); font-size:13px; letter-spacing:.02em; }
.ts2-lab b{ font-family:var(--serif); font-weight:500; font-size:17px; letter-spacing:0; }
.ts2-no{ color:var(--muted); }
.ts2-dim{ margin-inline-start:auto; color:var(--muted); font-variant-numeric:tabular-nums; }
.ts2-track{ width:100%; }
.ts2-plank{ background-size:cover; background-position:center; border:1px solid var(--line);
  border-radius:2px; box-shadow:0 1px 0 rgba(0,0,0,.05); }
.ts2-rule{ position:relative; margin-top:10px; }
.ts2-ticks{ position:relative; height:11px; border-top:1px solid var(--line); }
.ts2-ticks i{ position:absolute; inset-block-start:0; width:1px; height:5px; background:rgba(97,92,83,.78); } /* 3.2:1 on --sand — WCAG 1.4.11, the rule must be readable */
.ts2-ticks i.is-major{ height:11px; background:var(--muted); }
.ts2-ticks i.is-end{ background:var(--ink); }
.ts2-nums span.is-end{ color:var(--ink); }
.ts2-nums{ position:relative; height:16px; }
.ts2-nums span{ position:absolute; inset-block-start:0; transform:translateX(-50%);
  font-family:var(--sans); font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; }
html[dir="rtl"] .ts2-nums span{ transform:translateX(50%); }
.ts2-unit{ margin:2px 0 0; font-family:var(--sans); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); }
.ts2-verdict{ margin:18px 0 0; font-family:var(--serif); font-size:clamp(17px,2.2vw,22px);
  line-height:1.35; color:var(--ink); border-inline-start:2px solid var(--clay);
  padding-inline-start:14px; max-width:52ch; }
.ts2-scans{ margin:10px 0 0; color:var(--muted); padding-inline-start:16px; }
@media(max-width:520px){ .ts2-nums span{ font-size:10px; } .ts2-lab{ font-size:12px; } }

/* ══ Move 4 · the same room, one floor changed (WEBOS 25.7) ════════════════════
   A real customer photograph with our floor visualised on it. The wipe is a
   native range input (keyboard-operable), the handle is drawn on the seam.
   The stage is dir=ltr in both languages: the photograph is not a language. */
.ba{ position:relative; aspect-ratio:1100/1467; border:1px solid var(--line); border-radius:3px;
  overflow:hidden; background:var(--sand); --x:52%; }
.ba img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ba-top{ position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--x)) 0 0); }
.ba-line{ position:absolute; inset-block:0; left:var(--x); width:2px; margin-left:-1px;
  background:rgba(244,242,236,.92); box-shadow:0 0 0 1px rgba(14,27,35,.25); pointer-events:none; }
.ba-line i{ position:absolute; inset-block-start:50%; left:50%; width:44px; height:44px;
  transform:translate(-50%,-50%); border-radius:50%; background:var(--paper);
  box-shadow:0 3px 14px rgba(14,27,35,.42); display:grid; place-items:center; }
.ba-line i::before{ content:"\2039\00a0\203A"; font-family:var(--sans); font-size:19px;
  line-height:1; color:var(--ink); letter-spacing:-.06em; }
.ba-range{ position:absolute; inset-inline:0; inset-block-start:50%; transform:translateY(-50%);
  width:100%; height:56px; margin:0; padding:0; background:transparent; -webkit-appearance:none;
  appearance:none; cursor:ew-resize; z-index:3; }
.ba-range::-webkit-slider-runnable-track{ background:transparent; height:56px; }
.ba-range::-moz-range-track{ background:transparent; height:56px; }
.ba-range::-webkit-slider-thumb{ -webkit-appearance:none; width:56px; height:56px;
  background:transparent; border:0; cursor:ew-resize; }
.ba-range::-moz-range-thumb{ width:56px; height:56px; background:transparent; border:0; cursor:ew-resize; }
.ba-range:focus{ outline:none; }
.ba-range:focus-visible ~ .ba-line i{ outline:3px solid var(--sea); outline-offset:2px; }
.ba-badge{ position:absolute; inset-block-end:10px; inset-inline-start:10px; z-index:2;
  font-family:var(--sans); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); background:rgba(244,242,236,.9); border-radius:2px; padding:5px 9px; }
.room-swap .stack{ gap:14px; }
@media(max-width:720px){ .ba{ aspect-ratio:4/5; } .ba-line i{ width:38px; height:38px; } }

/* — for-your-home · the FAQ diagrams (founder 26.7) —————————————————————————
   "Nobody likes getting a page full of letters with no quick understanding."
   One small drawing per answer that CAN be drawn. Strokes only, locked tokens,
   no new claim: every diagram restates a fact the answer already states.
   Pure inline SVG — no library, no request, nothing to fail. */
.dg-fig{ margin:16px 0 4px; }
svg.dg{ width:100%; max-width:340px; height:auto; display:block; overflow:visible; }
.dg-solid,.dg-base,.dg-thin,.dg-arrow,.dg-lead,.dg-floor,.dg-pipe,.dg-heat,.dg-pool,
.dg-ok,.dg-ok-t,.dg-no,.dg-hatch{ fill:none; stroke:var(--oak); stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round; }
.dg-base,.dg-thin,.dg-lead,.dg-floor,.dg-hatch{ stroke:var(--line); stroke-width:1; }
.dg-fill{ fill:rgba(122,106,85,.10); }
.dg-pool{ fill:rgba(122,106,85,.18); stroke:var(--oak); }
.dg-dot{ fill:var(--oak); stroke:none; }
.dg-no{ stroke:var(--err-ink); }   /* the locked clay; no literal fallback — an off-palette hex is a design-lock failure */
.dg-heat{ stroke-dasharray:3 3; }
.dg-t{ font-family:var(--sans); font-size:8px; letter-spacing:.06em; text-transform:uppercase;
  fill:var(--ink); stroke:none; }
.dg-mute{ fill:var(--muted); }
html[dir="rtl"] .dg-t{ font-family:'Heebo',sans-serif; letter-spacing:.02em; text-transform:none; font-size:8.5px; }
/* the drawings are direction-neutral by construction; only the label anchors would flip,
   and they are already placed at the two outer edges, so RTL needs no mirror. */
@media (max-width:560px){ svg.dg{ max-width:100%; } }
@media print{ .dg-fig{ break-inside:avoid; } }

/* ══ THE COLLECTION AS ONE FLOOR ═══════════════════════════════════════════════
   Founder, 2026-07-26: "think of this page as a floor we look at from above and
   scroll — planks joined to each other with the model name written on them ...
   always at least 2 or 3 planks joined so the customer really understands the
   parquet", and: "the zigzag is as if you joined the planks — 2410 and 239 one
   above the other and below that 229 joined too".

   So: not a grid of cards. One floor. Columns of planks run down the page; going
   down a column you cross all eighteen models. Every column carries its own head
   joint offset, so the boundary between one model and the next is an INTERLOCKED
   SEAM — there is not one straight horizontal line anywhere on the page.

   Three things this file must never do:
     · put a gap between two planks. What separates them is the real micro-bevel,
       already baked into all four edges of the calibrated -plank-hd asset.
     · stretch a plank. The aspect ratio comes from the image's own width/height
       attributes, which are the asset's true 1830x228 / 1830x230 / 1530x228.
       211 Rio really is the short plank, and here it really looks shorter.
     · reserve a box from the file. The ratio is known before a byte arrives, so
       CLS on this page is 0 by construction.
   Geometry, offsets and the model order are generated by
   tools/build_collections_floor.py; the column count lives in floor-cols.css. */

.floorsec{ margin-block-start:clamp(26px,4.5vh,52px); }

/* container-type gives us 1cqw = 1% of the floor's width, which is the ONLY way to
   express "one plank width" as a length that every column can share. Every column
   must shift by the SAME number of pixels at every band, or the columns come apart. */
.floor{ container-type:inline-size; overflow:hidden; background:var(--ink); }
.floor-in{
  display:grid; grid-template-columns:repeat(var(--cols),1fr);
  /* pull the lead-in row above the top edge — percentage margins resolve against the
     containing block's inline size, so this is exactly one plank length. It gives the
     floor a clean straight top edge while every seam below it stays ragged. */
  margin-block-start:calc(-1 * var(--r0) * 100cqw / var(--cols));
}
.fl-col{ min-inline-size:0; transform:translateY(calc(var(--o) * 100cqw / var(--cols))); }
.fl-plank{ display:block; position:relative; overflow:hidden; }
/* -0.5px closes the sub-pixel hairline that fractional plank heights open between two
   stacked images. It costs half a device pixel of bevel and buys a floor with no white
   threads running through it. */
.fl-plank + .fl-plank{ margin-block-start:-0.5px; }
.fl-plank img{ display:block; inline-size:100%; block-size:auto; }

/* the name, set into the head of the plank and running along it — a floor annotation,
   not a caption. Latin in both languages: model names never translate. */
.fl-nm{
  /* physical properties on purpose: the plate must be exactly as long as the glyphs.
     Sized as a % of the plank it left dark stripes hanging wherever the text itself had
     scrolled out of frame — they read as faults in the floor, not as labels. height:auto
     under vertical writing means "as long as the name", and nothing more. */
  position:absolute; top:0; left:0; right:0; height:auto;
  writing-mode:vertical-rl; text-orientation:mixed;
  /* EN<->HE parity: model names and codes are Latin in BOTH languages. Left to inherit
     direction:rtl from /he, the vertical inline axis reverses and the plate reads
     "626 CASCAIS" on the Hebrew page against "SITGES 1140-09" on the English one — the
     same floor labelled two different ways. Explicit bidi, isolated, on both surfaces. */
  direction:ltr; unicode-bidi:isolate;
  display:flex; align-items:center; justify-content:flex-start; gap:1.05em;
  padding:14px 0 30px; pointer-events:none; color:#F4F2EC;
  /* --sc is solved PER FLOOR by tools/build_collections_floor.py from that floor's own
     pixels: the smallest alpha that still holds paper text at >= 4.5:1 over the lightest
     thing under the glyphs. Havana takes 0.14, St Barth needs 0.57. A single blanket
     value would have to be St Barth's, and it would lie as black tape across the other
     seventeen floors. */
  background:linear-gradient(to bottom,
    rgba(14,27,35,var(--sc)) 0%, rgba(14,27,35,var(--sc)) 74%, rgba(14,27,35,0) 100%);
  /* the plate is masked to a soft column no wider than the glyphs, so it reads as a
     shadow falling on the plank rather than a label stuck to it. The mask is fully
     opaque across the middle 60%, which is where the text sits — the measured contrast
     above is therefore the contrast the visitor actually gets. */
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 26%, #000 74%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0%, #000 26%, #000 74%, transparent 100%);
}
.fl-nm b{ font-family:var(--sans); font-weight:500; font-size:10.5px; letter-spacing:.15em;
  text-transform:uppercase; }
.fl-nm i{ font-style:normal; font-family:var(--sans); font-size:9px; letter-spacing:.11em;
  color:#E6E2D9; }

/* hover: the founder asked for a tone lift OR an emphasised seam, never a size change.
   An emphasised seam it is — a colour-locked floor may not have its colour touched by a
   UI state, not even for 200ms. */
.fl-plank::after{ content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 0 rgba(244,242,236,0); }
@media (hover:hover){
  .fl-plank:hover{ z-index:2; }
  .fl-plank:hover::after{ box-shadow:inset 0 0 0 1px rgba(244,242,236,.62), inset 0 0 0 3px rgba(14,27,35,.30); }
}
.fl-plank:focus-visible{ outline:3px solid var(--paper); outline-offset:-3px; z-index:3; }
.fl-plank:focus-visible::after{ box-shadow:inset 0 0 0 4px rgba(14,27,35,.55); }
@media (prefers-reduced-motion:reduce){ .fl-plank, .fl-plank::after{ transition:none; } }

/* narrow screens: still a floor, only fewer columns. Never cards, never a carousel,
   and never a horizontal scrollbar — the grid is 1fr columns inside a clipped box. */
@media (max-width:560px){
  .fl-nm{ padding:11px 0 24px; gap:.9em; }
  .fl-nm b{ font-size:10px; letter-spacing:.13em; }
  .fl-nm i{ font-size:8.5px; }
}

.visually-hidden{ position:absolute; inline-size:1px; block-size:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }