/* ═══════════════════════════════════════════════════════════════
   SARAF EXPORTS — HOME v2
   Editorial, typographic, warm. Standalone stylesheet.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Jost:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap');

:root {
  /* ── Soft Minimal Luxury palette ── */
  --bg-primary:    #F7F4EF;   /* Warm Ivory */
  --bg-secondary:  #EDE6DC;   /* Soft Sand */
  --bg-dark:       #1A1614;   /* retained — dark hero / cities */
  --bg-deeper:     #0E0B09;
  --text-primary:  #2E2E2E;   /* Deep Graphite */
  --text-secondary:#6B6460;   /* warm mid-grey */
  --text-muted:    #B8ADA1;   /* Muted Taupe */
  --accent:        #C8A58C;   /* Dusty Clay — rules, dots, borders only */
  --accent-ink:    #8C6039;   /* Walnut — the accent when it has to be TEXT.
                                 4.98:1 on ivory; --accent itself is 2.08:1. */
  --accent-soft:   rgba(200,165,140,0.72);
  --accent-tint:   rgba(200,165,140,0.10);
  --accent-green:  #2E2E2E;   /* Deep Graphite — replaces forest green */
  --accent-light:  #D2B48C;   /* Natural Oak */
  --border:        #C8BEB5;   /* warm taupe */
  --border-soft:   rgba(46,46,46,0.08);
  --white:         #FFFFFF;

  /* ── Type ──
     Jost is a Futura revival: geometric, monoline, single-storey 'a' — the same
     construction as the SARAF lockup, so page and mark speak one voice. It sets
     smaller than Inter at the same px (shorter x-height), which the size
     corrections further down this file compensate for. */
  --f-display: 'Jost', 'Century Gothic', Futura, sans-serif;
  --f-body:    'Jost', 'Century Gothic', -apple-system, sans-serif;
  --f-mono:    'JetBrains Mono', 'Courier New', monospace;
  --f-script:  'Caveat', cursive;

  --pad-x:     clamp(20px, 4vw, 64px);
  --max-w:     1440px;

  --e-out: cubic-bezier(.22,1,.36,1);
  --e-in-out: cubic-bezier(.6,0,.4,1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--f-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 17.5px;
  line-height: 1.6;
  overflow-x: hidden;
}

::selection { background: var(--accent); color: var(--white); }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ───────────────────────────────────────────
   TYPOGRAPHY PRIMITIVES
──────────────────────────────────────────── */
.serif { font-family: var(--f-display); font-weight: 300; }
.mono {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.label {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ───────────────────────────────────────────
   LOADER
──────────────────────────────────────────── */
.loader {
  position: fixed;
  inset: 0;
  background: var(--bg-primary);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s var(--e-out), visibility 0.6s;
}
.loader.done { opacity: 0; visibility: hidden; }
.loader-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-display);
}
/* The brand mark, not a letter S. The ring keeps the loading motion; the mark
   itself is held upright — a rotating logo reads as a glitch, not a spinner.
   The ring also needed one accented segment: a plain circle is rotationally
   symmetric, so the old version was animating with nothing visible to show it. */
.loader-mark {
  position: relative;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
}
.loader-mark::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: loaderSpin 2s linear infinite;
}
.loader-mark span {
  display: block;
  width: calc(24px * 0.625);   /* mark aspect ratio, 165 × 264 */
  height: 24px;
  background-color: var(--text-primary);
  -webkit-mask: url('../assets/logo-mark.png') no-repeat center / contain;
          mask: url('../assets/logo-mark.png') no-repeat center / contain;
}
@keyframes loaderSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .loader-mark::before { animation: none; border-top-color: var(--border); }
}
.loader-text {
  font-size: 22px;
  font-weight: 300;
  letter-spacing: 0.08em;
  overflow: hidden;
}
.loader-text span { display: inline-block; animation: loaderType 1.4s var(--e-out) both; }
/* SARAF · EXPORT · PALACE — 19 spans. The interval is tightened from .05s to
   .03s so the longer name still lands inside the same ~.6s envelope the
   12-letter version used; the loader dismisses at 1.1s and won't wait. */
.loader-text span:nth-child(1){animation-delay:.0s}
.loader-text span:nth-child(2){animation-delay:.03s}
.loader-text span:nth-child(3){animation-delay:.06s}
.loader-text span:nth-child(4){animation-delay:.09s}
.loader-text span:nth-child(5){animation-delay:.12s}
.loader-text span:nth-child(6){animation-delay:.18s}   /* space */
.loader-text span:nth-child(7){animation-delay:.21s}
.loader-text span:nth-child(8){animation-delay:.24s}
.loader-text span:nth-child(9){animation-delay:.27s}
.loader-text span:nth-child(10){animation-delay:.30s}
.loader-text span:nth-child(11){animation-delay:.33s}
.loader-text span:nth-child(12){animation-delay:.36s}
.loader-text span:nth-child(13){animation-delay:.42s}  /* space */
.loader-text span:nth-child(14){animation-delay:.45s}
.loader-text span:nth-child(15){animation-delay:.48s}
.loader-text span:nth-child(16){animation-delay:.51s}
.loader-text span:nth-child(17){animation-delay:.54s}
.loader-text span:nth-child(18){animation-delay:.57s}
.loader-text span:nth-child(19){animation-delay:.60s}
@keyframes loaderType {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ───────────────────────────────────────────
   SIDE RAIL (fixed left column)
──────────────────────────────────────────── */
.rail {
  position: fixed;
  left: 0; top: 0;
  width: 48px; height: 100vh;
  background: var(--bg-primary);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  z-index: 90;
  writing-mode: vertical-rl;
}
.rail-top {
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: var(--text-primary);
}
.rail-center {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.rail-bottom {
  writing-mode: horizontal-tb;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--text-muted);
}
.rail-bottom .rail-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: railPulse 2.2s ease-in-out infinite;
}
@keyframes railPulse { 0%,100%{opacity:1}50%{opacity:.3} }
@media (max-width: 900px) { .rail { display: none; } }

/* ───────────────────────────────────────────
   TOP BAR
──────────────────────────────────────────── */
.bar {
  position: fixed;
  top: 0; left: 48px; right: 0;
  /* Tightened from 18px so the taller brand lockup doesn't push the bar down
     with it — the logo grew, the header height barely moved. */
  padding: 13px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 80;
  mix-blend-mode: difference;
  color: #F7F4EF;
}
.bar.scrolled {
  mix-blend-mode: normal;
  background: rgba(247, 244, 239, 0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}
@media (max-width: 900px) { .bar { left: 0; } }

/* ── Brand lockup ──
   The bar runs `mix-blend-mode: difference` until it scrolls, so the mark can't
   be a flat raster — it has to take the bar's own colour the way the wordmark
   used to. The PNG is an alpha mask (ink coverage only, no baked colour); the
   fill comes from currentColor, which inverts over the hero and turns graphite
   once .scrolled paints the ivory bar. Alpha carries the artwork's tonal step,
   so "export palace" stays lighter than SARAF in both states. */
.bar-logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.bar-logo-mark {
  display: block;
  width: calc(58px * 2.7143);   /* lockup aspect ratio, 456 × 168 */
  height: 58px;
  background-color: currentColor;
  -webkit-mask: url('../assets/logo-lockup.png') no-repeat center / contain;
          mask: url('../assets/logo-lockup.png') no-repeat center / contain;
}
/* Accessible name + SEO text, kept out of the visual bar */
.bar-logo-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* No mask support: fall back to the wordmark this replaced */
@supports not ((-webkit-mask: url('')) or (mask: url(''))) {
  .bar-logo-mark { display: none; }
  .bar-logo-text {
    position: static;
    width: auto; height: auto;
    margin: 0; overflow: visible;
    clip-path: none;
    font-family: var(--f-display);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.06em;
  }
}
@media (max-width: 900px) {
  .bar-logo-mark {
    width: calc(42px * 2.7143);
    height: 42px;
  }
}
.bar-nav {
  display: flex;
  gap: 36px;
  list-style: none;
}
.bar-nav a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  position: relative;
  padding: 4px 0;
  transition: opacity 0.3s;
}
.bar-nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--e-out);
}
.bar-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.bar-cta {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 22px;
  border: 1px solid currentColor;
  border-radius: 100px;
  transition: background 0.4s, color 0.4s, border-color 0.4s;
}
/* The fill and the label must be set independently. `background: currentColor`
   resolves against the element's own colour, and the hover rules change that
   colour too — so both moved together and the label vanished into the fill. */
.bar:not(.scrolled) .bar-cta:hover {
  background: var(--bg-primary);
  border-color: var(--bg-primary);
  color: #2C2C2C;
}
.bar.scrolled .bar-cta:hover {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--bg-primary);
}

.bar-menu-btn {
  display: none;
  width: 30px; height: 22px;
  position: relative;
  background: none; border: none;
  /* A button doesn't inherit colour, so currentColor fell back to the UA black —
     which the bar's difference blend turned ivory-on-ivory. Take the bar's colour
     like every other control in here. */
  color: inherit;
  cursor: pointer;
}
.bar-menu-btn span {
  position: absolute;
  left: 0; width: 100%; height: 1.5px;
  background: currentColor;
  transition: transform 0.4s, opacity 0.4s;
}
.bar-menu-btn span:nth-child(1) { top: 0; }
.bar-menu-btn span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.bar-menu-btn span:nth-child(3) { bottom: 0; }
/* The desktop nav is shown only where it genuinely fits.
   With six items it needs about 1200px before the row clears the logo
   and the CTA; below that the items ran together edge to edge. (Even at
   five items the 900–1024 band was already touching, so this fixes a
   squeeze that predates the Trade Fairs entry.) Everything the nav holds
   is in the menu, so handing those widths to the hamburger costs nothing. */
@media (max-width: 1180px) {
  .bar-nav, .bar-cta { display: none; }
  .bar-menu-btn { display: block; }
}
.bar-nav { gap: 28px; }

/* ═══════════════════════════════════════════
   01 · HERO
═══════════════════════════════════════════════ */
/* ═══════════════════════════════════════════
   01 · HERO — Slideshow
═══════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 132px var(--pad-x) 48px;
  padding-left: calc(var(--pad-x) + 48px);
  overflow: hidden;
  background: var(--bg-deeper);
  color: var(--bg-primary);
}

/* ── The hero photograph ──
   An <img> rather than a CSS background, so the picture can be swapped
   with nothing else changing; object-fit copes with either aspect ratio. */
/* The deep ground the photograph is held against. The image is
   deliberately transparent over it rather than full strength — the
   shelving units should register as a presence behind the headline,
   not compete with it. */
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background: var(--bg-deeper);
}
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Sits the four units in frame and keeps the tallest one clear of
     the headline block on the left. */
  object-position: 62% 52%;
  display: block;
  opacity: 0.42;
  animation: hero-drift 44s var(--e-in-out) infinite alternate;
}
/* Legibility scrim. The image already carries most of its own restraint
   through opacity, so this layer only does what type needs: a dark band
   under the nav, weight behind the headline, and a base for the figures. */
.hero-scrim {
  position: absolute; inset: 0;
  background:
    /* Top band: .bar uses mix-blend-mode:difference, which needs a dark,
       predictable ground. Without this the nav washes out over the photo. */
    linear-gradient(to bottom, rgba(14,11,9,0.82) 0%, rgba(14,11,9,0.30) 14%,
                               rgba(14,11,9,0) 26%),
    linear-gradient(100deg, rgba(14,11,9,0.72) 0%, rgba(14,11,9,0.44) 38%,
                            rgba(14,11,9,0.12) 70%, rgba(14,11,9,0) 100%),
    linear-gradient(to top, rgba(14,11,9,0.60) 0%, rgba(14,11,9,0) 40%);
}
@keyframes hero-drift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.10) translate3d(-1.2%, -1%, 0); }
}

.hero-headline { position: relative; z-index: 2; max-width: 940px; }

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(247, 244, 239, 0.66);
  margin-bottom: 20px;
}
.hero-kicker-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.hero-title {
  font-family: var(--f-display);
  font-weight: 300;
  /* Was clamp(52px, 9vw, 148px) — 130px at desktop, which filled the
     frame on its own. Brought down so the photograph has room to read. */
  font-size: clamp(38px, 6.1vw, 94px);
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--bg-primary);
  text-wrap: balance;
}
.hero-title em { font-style: italic; color: var(--accent); }

.hero-tagline {
  margin-top: 18px;
  max-width: 42ch;
  font-size: clamp(14px, 0.98vw, 16px);
  line-height: 1.7;
  color: rgba(247, 244, 239, 0.76);
  text-wrap: pretty;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
.hero .btn-pill { border-color: rgba(247, 244, 239, 0.44); color: var(--bg-primary); }
.hero .btn-pill:hover { border-color: var(--bg-primary); }
.hero .btn-pill-filled {
  background: var(--bg-primary);
  border-color: var(--bg-primary);
  color: var(--text-primary);
}
.hero .btn-pill-filled:hover { background: var(--accent); border-color: var(--accent); color: #211812; }

/* ── Marquee strip (below hero) ──
   Readability pass: the track was --text-muted on --bg-secondary, which is
   1.78:1 — far below the 4.5:1 WCAG AA needs, and worse in practice because
   the text is small, widely tracked and moving. Four changes: darker ink
   (4.69:1), a little more size, tighter tracking, and a slower scroll.
   Hovering pauses it so a figure can actually be read. */
.hero-marquee {
  width: 100%;
  height: 46px;
  overflow: hidden;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
}
.hero-marquee-track {
  display: flex;
  gap: 48px;
  white-space: nowrap;
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
  animation: marquee 64s linear infinite;
}
.hero-marquee:hover .hero-marquee-track,
.hero-marquee:focus-within .hero-marquee-track { animation-play-state: paused; }
.hero-marquee-track span { display: inline-flex; align-items: center; gap: 48px; }
.hero-marquee-track .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
@keyframes marquee { to { transform: translateX(-50%); } }

@media (max-width: 600px) {
  /* less tracking again on small screens, where the strip is busiest */
  .hero-marquee-track { font-size: 12px; letter-spacing: 0.12em; gap: 32px; }
  .hero-marquee-track span { gap: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-marquee-track { animation: none; }
  .hero-marquee { overflow-x: auto; }
}

/* ── Bottom bar: figures + scroll cue ──
   Static. The previous version sat at opacity:0 and was faded in by JS adding
   .revealed to .hero; with no timed reveal left, that gate would render this
   permanently invisible. */
.hero-bottom {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding-top: 64px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.hero-meta { display: flex; flex-wrap: wrap; gap: clamp(26px, 4vw, 62px); }
.hero-meta-num {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(20px, 1.85vw, 29px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--bg-primary);
  font-variant-numeric: tabular-nums;
}
.hero-meta-lbl {
  margin-top: 8px;
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(247, 244, 239, 0.52);
}
.hero-bottom-scroll {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(247, 244, 239, 0.52);
}
.hero-bottom-scroll-line {
  width: 62px; height: 1px;
  background: linear-gradient(to right, var(--accent), rgba(247, 244, 239, 0));
}

@media (max-width: 900px) {
  .hero { padding-left: var(--pad-x); padding-right: var(--pad-x); }
  .hero-bg img { object-position: 46% 42%; }
  /* Phone crop is a tall slice of a landscape frame, so the units
     read smaller — lift the image a little and let the gradient carry
     the type instead of the picture. */
  .hero-bg img { opacity: 0.46; object-position: 64% 54%; }
  .hero-scrim {
    background: linear-gradient(180deg,
      rgba(14,11,9,0.82) 0%,
      rgba(14,11,9,0.46) 15%,
      rgba(14,11,9,0.34) 40%,
      rgba(14,11,9,0.30) 60%,
      rgba(14,11,9,0.54) 80%,
      rgba(14,11,9,0.82) 100%);
  }
  .hero-bottom { padding-top: 46px; }
  .hero-bottom-scroll { display: none; }
}
/* 32px, not 34: "Hardwood furniture," measures 281px at 34px against the
   280px of column a 320px handset leaves, so it broke to a third line by
   a single pixel. */
@media (max-width: 360px) {
  .hero-title { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg img { animation: none; transform: scale(1.04); }
}

/* ═══════════════════════════════════════════
   02 · MANIFESTO
═══════════════════════════════════════════════ */
.manifesto {
  padding: clamp(120px, 18vh, 200px) var(--pad-x);
  padding-left: calc(48px + var(--pad-x));
  background: var(--bg-primary);
  position: relative;
}
@media (max-width: 900px){ .manifesto { padding-left: var(--pad-x); } }

.manifesto-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 60px;
}
.manifesto-head .num { font-family: var(--f-mono); font-size: 12px; color: var(--text-secondary); letter-spacing: 0.2em; }
.manifesto-head .dash { width: 48px; height: 1px; background: var(--border); }
.manifesto-head .label-txt {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
/* ── THE GRAIN — letters fill with wood ─────────────────── */
.manifesto-quote-wrap {
  position: relative;
  max-width: 1200px;
}

/* Base typographic rules shared by both layers */
.manifesto-quote {
  font-family: var(--f-display);
  font-size: clamp(34px, 6vw, 92px);
  line-height: 1.05;
  font-weight: 300;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 144;
  margin: 0;
}

/* ─ Layer 1 · Outline layer (the "draft") ───────────────── */
.mq-outline {
  position: relative;
  z-index: 1;
  color: transparent;
  -webkit-text-stroke: 0.022em var(--text-primary);
}
.mq-outline em {
  font-style: italic;
  font-weight: 400;
  color: transparent;
  -webkit-text-stroke: 0.022em var(--accent);
}
.mq-outline .struck {
  position: relative;
  color: transparent;
  -webkit-text-stroke: 0.022em var(--text-muted);
}

/* Strike-through bar — now fires AFTER grain fill completes */
.mq-outline .struck::after {
  content: '';
  position: absolute;
  top: 55%; left: -4%; right: -4%;
  height: 2px;
  background: var(--text-muted);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--e-out) 1.25s;
}
.manifesto.revealed .mq-outline .struck::after { transform: scaleX(1); }

/* ─ Layer 2 · Wood-grain fill, masked to rise ───────────── */
.mq-grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  color: transparent;

  /* Pale-oak grain for the non-accent words */
  background-image:
    /* Fine horizontal grain lines */
    repeating-linear-gradient(
      0deg,
      rgba(46, 28, 12, 0.18) 0px,
      rgba(46, 28, 12, 0.18) 1px,
      transparent 1px,
      transparent 6px
    ),
    /* Wider soft banding */
    repeating-linear-gradient(
      0deg,
      rgba(76, 52, 28, 0.10) 0px,
      rgba(76, 52, 28, 0.10) 2px,
      transparent 2px,
      transparent 14px
    ),
    /* Base tonal gradient — warm oak */
    linear-gradient(
      180deg,
      #D6B486 0%,
      #BC9860 30%,
      #946C38 65%,
      #6D4D22 100%
    );
  background-repeat: repeat;
  -webkit-background-clip: text;
          background-clip: text;

  /* Rising mask — transparent at top, opaque at bottom.
     At position 0% the transparent end is within the text (nothing shows).
     At position 100% the opaque end is within the text (full fill). */
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    transparent 46%,
    rgba(0,0,0,0.28) 50%,
    rgba(0,0,0,0.78) 54%,
    #000 58%,
    #000 100%
  );
          mask-image: linear-gradient(
    180deg,
    transparent 0%,
    transparent 46%,
    rgba(0,0,0,0.28) 50%,
    rgba(0,0,0,0.78) 54%,
    #000 58%,
    #000 100%
  );
  -webkit-mask-size: 100% 300%;
          mask-size: 100% 300%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 0% 0%;
          mask-position: 0% 0%;
  transition:
    mask-position 1.2s cubic-bezier(0.45, 0.08, 0.35, 1) 0.15s,
    -webkit-mask-position 1.2s cubic-bezier(0.45, 0.08, 0.35, 1) 0.15s;
}
.manifesto.revealed .mq-grain {
  -webkit-mask-position: 0% 100%;
          mask-position: 0% 100%;
}

/* Accent words fill with a richer, sheesham-dark grain */
.mq-grain em {
  font-style: italic;
  font-weight: 400;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(12, 4, 2, 0.32) 0px,
      rgba(12, 4, 2, 0.32) 1px,
      transparent 1px,
      transparent 5px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(30, 12, 6, 0.16) 0px,
      rgba(30, 12, 6, 0.16) 2px,
      transparent 2px,
      transparent 12px
    ),
    linear-gradient(
      180deg,
      #7A4428 0%,
      #56281A 35%,
      #311509 70%,
      #180702 100%
    );
  background-repeat: repeat;
  -webkit-background-clip: text;
          background-clip: text;
}

/* "manufacture" never fills — stays hollow, then gets struck */
.mq-grain .struck {
  background: none;
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .mq-grain {
    transition: none;
    -webkit-mask-position: 0% 100%;
            mask-position: 0% 100%;
  }
  .mq-outline .struck::after { transition: none; transition-delay: 0s; }
}
/* ── THE SIGNATURE — handwritten ink + wax seal ── */
.manifesto-sig {
  margin-top: 64px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(18px, 2.4vw, 32px);
}

/* Handwritten signature svg */
.sig-draw {
  width: clamp(280px, 34vw, 430px);
  height: auto;
  overflow: visible;
}

/* The signature text group — revealed by clip-path animating l→r */
.sig-group {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.15s cubic-bezier(0.45, 0.1, 0.3, 0.92) 1.5s;
}
.manifesto.revealed .sig-group {
  clip-path: inset(0 0 0 0);
}

.sig-text {
  font-family: var(--f-script);
  font-size: 56px;
  font-weight: 600;
  fill: #2E2E2E;
  letter-spacing: -0.5px;
}
.sig-sub {
  font-family: var(--f-script);
  font-size: 22px;
  font-weight: 400;
  fill: #6B6460;
  letter-spacing: 0.3px;
}

/* Ink bleed blobs — subtle dots of extra ink at pen lifts */
.sig-blob {
  fill: #2E2E2E;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.manifesto.revealed .sig-blob-a { opacity: 0.55; transition-delay: 2.0s; }
.manifesto.revealed .sig-blob-b { opacity: 0.45; transition-delay: 2.12s; }
.manifesto.revealed .sig-blob-c { opacity: 0.4;  transition-delay: 2.24s; }
.manifesto.revealed .sig-blob-d { opacity: 0.45; transition-delay: 2.34s; }

/* Letterpress wax seal — sits to the LEFT of the signature, sized to span both lines */
.sig-seal {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0.6) rotate(-18deg);
  transform-origin: 50% 50%;
  transition:
    opacity 0.5s ease 2.35s,
    transform 0.75s cubic-bezier(0.25, 1.55, 0.45, 1) 2.35s;
}
.manifesto.revealed .sig-seal {
  opacity: 1;
  transform: scale(1) rotate(-6deg);
}

/* One size variable drives both the ring SVG and the mark inside it, so they
   can't drift apart at a breakpoint. Colour moves up to the container so the
   masked mark inherits the same currentColor the rings use. */
.sig-seal {
  --seal-size: clamp(92px, 11vw, 128px);
  position: relative;
  color: #8B5E3C;
}
.sig-seal svg {
  width: var(--seal-size);
  height: var(--seal-size);
  color: inherit;
  filter: drop-shadow(0 3px 4px rgba(139,94,60,0.22));
}
/* The brand mark, replacing the "SE" letters. Sized to sit inside the inner
   ring (r=19 of a 64 viewBox ≈ 59% of the seal) with room to breathe. */
.seal-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--seal-size) * 0.175);   /* mark ratio 165 × 264 */
  height: calc(var(--seal-size) * 0.28);
  background-color: currentColor;
  -webkit-mask: url('../assets/logo-mark.png') no-repeat center / contain;
          mask: url('../assets/logo-mark.png') no-repeat center / contain;
}
.seal-outer,
.seal-inner,
.seal-hatch {
  fill: none;
  stroke: currentColor;
}
.seal-outer { stroke-width: 1.2; opacity: 0.85; }
.seal-inner { stroke-width: 0.6; opacity: 0.45; }
.seal-hatch { stroke-width: 1.1; opacity: 0.55; }
@media (max-width: 520px){
  .sig-text { font-size: 46px; }
  .sig-sub  { font-size: 18px; }
  .manifesto-sig { gap: 16px; }
  .sig-seal { --seal-size: 78px; }
}

@media (prefers-reduced-motion: reduce) {
  .sig-group,
  .sig-blob,
  .sig-seal {
    transition: none;
    clip-path: none;
    opacity: 1;
    transform: none;
  }
  .manifesto.revealed .sig-seal { transform: rotate(-5deg); }
}

/* ═══════════════════════════════════════════
   03 · RINGS — Timeline as tree rings
═══════════════════════════════════════════════ */
.rings {
  padding: clamp(80px, 10vh, 140px) var(--pad-x) clamp(120px, 14vh, 180px);
  padding-left: calc(48px + var(--pad-x));
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  position: relative;
  overflow: clip; /* clip ≠ hidden — clips visually without breaking sticky */
}
@media (max-width: 900px){ .rings { padding-left: var(--pad-x); } }

.rings-head {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  margin-bottom: 80px;
}
@media (max-width: 900px){ .rings-head { grid-template-columns: 1fr; gap: 24px; } }

.rings-title {
  font-family: var(--f-display);
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}
.rings-title em { font-style: italic; color: var(--accent); }
.rings-desc {
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--text-secondary);
  max-width: 520px;
}

.rings-body {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: start;
}
@media (max-width: 900px){ .rings-body { grid-template-columns: 1fr; } }

.rings-viz {
  position: sticky;
  top: 80px;
  aspect-ratio: 1;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}
.rings-viz svg {
  width: 100%; height: 100%;
  overflow: visible;
}
.rings-viz .ring-circle {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
  opacity: 0.25;
  transform-origin: center;
  transition: opacity 0.6s, stroke-width 0.6s;
}
.rings-viz .ring-circle.active {
  opacity: 1;
  stroke-width: 1.5;
}
.rings-viz .ring-core {
  fill: var(--accent);
  opacity: 0.9;
}
.rings-viz .ring-year-label {
  font-family: var(--f-display);
  font-size: 14px;
  font-style: italic;
  fill: var(--text-muted);
  opacity: 0;
  transition: opacity 0.4s;
}
.rings-viz .ring-year-label.active { opacity: 1; fill: var(--text-primary); }

.rings-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ring-item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 30px;
  padding: 22px 0 22px 18px;
  border-top: 1px solid var(--border-soft);
  border-left: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.5s var(--e-out), background 0.5s var(--e-out);
}
.ring-item:last-child { border-bottom: 1px solid var(--border-soft); }
.ring-item.active { border-left-color: var(--accent); background: var(--accent-tint); }
.ring-item:hover { border-left-color: var(--border); }
.ring-year {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  transition: color 0.5s var(--e-out);
}
/* The active milestone is marked by colour and the left rule, never by fading
   its siblings — the old opacity:0.45 dropped body copy to 1.89:1. */
.ring-item.active .ring-year { color: var(--accent-ink); font-style: italic; }

.ring-content h4 {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 6px;
  color: var(--text-primary);
}
.ring-content p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════════
   04 · WORKSHOP — sticky split with images
═══════════════════════════════════════════════ */
.workshop {
  padding: clamp(80px, 10vh, 140px) 0;
  background: var(--accent-green);
  color: #F7F4EF;
  position: relative;
  overflow: hidden;
}
.workshop-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "text figures"
    "media media";
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  padding-left: calc(48px + var(--pad-x));
  column-gap: 80px;
  row-gap: clamp(48px, 6vw, 88px);
}
@media (max-width: 900px){
  .workshop-inner {
    grid-template-columns: 1fr;
    grid-template-areas: "text" "figures" "media";
    column-gap: 0;
    row-gap: 40px;
    padding-left: var(--pad-x);
  }
}

.workshop-text {
  grid-area: text;
  align-self: start;
  padding: 40px 0;
}
.workshop-eyebrow {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.4);
  margin-bottom: 20px;
  display: flex; align-items: center; gap: 12px;
}
.workshop-eyebrow::before {
  /* Read '003' while every other section mark on the page reads '04', '05' … */
  content: '— 03';
}
.workshop-title {
  font-family: var(--f-display);
  font-size: clamp(34px, 4.8vw, 72px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: 30px;
  font-variation-settings: "opsz" 144;
}
.workshop-title em { font-style: italic; color: rgba(245,240,232,0.6); }
.workshop-desc {
  font-size: 16.5px;
  line-height: 1.85;
  color: rgba(245,240,232,0.65);
  max-width: 440px;
  margin-bottom: 0;
}

/* Figures sit in their own column, hung from the baseline of the text block
   rather than stacked under it — the film below needs the full width. */
.workshop-figures {
  grid-area: figures;
  align-self: end;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 40px;
  padding-bottom: 40px;
}
@media (max-width: 900px){
  .workshop-figures { align-self: start; padding-bottom: 0; gap: 24px; }
}
.wfig {
  border-top: 1px solid rgba(245,240,232,0.12);
  padding-top: 16px;
}
.wfig-n {
  font-family: var(--f-display);
  font-size: 44px;
  font-weight: 300;
  line-height: 1;
  color: #F7F4EF;
}
.wfig-n em { font-style: italic; }
.wfig-l {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.5);
  margin-top: 8px;
}

.workshop-media {
  grid-area: media;
  position: relative;
}

.wm-video {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(245,240,232,0.08);
}
.wm-video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: brightness(0.92) contrast(1.04);
  transition: filter 0.8s var(--e-out);
}
.wm-video:hover video { filter: brightness(1) contrast(1); }
/* Once the viewer commits to the film, every bit of our chrome gets out
   of its way — grade, scrim, caption and button all step aside. */
.wm-video.has-started video { filter: none; }

/* Graceful fallback while the <video> has no source loaded: the
   black container still reads as a considered "film" placeholder. */
.wm-video::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(245,240,232,0.04), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.5s var(--e-out);
}
/* ── Resting chrome, hidden once the film starts ──
   Reached directly rather than through a transition. A transition only
   arrives at its end value if the document's animation clock is running,
   and it is not always running: a backgrounded tab freezes it while media
   playback carries on regardless. In that state a transitioned hide leaves
   the play button and caption sitting at full opacity over a playing film.
   Setting the end state outright cannot be stranded that way. */
.wm-video.has-started::before { opacity: 0; transition: none; }

.wm-video-caption {
  position: absolute;
  left: 24px;
  bottom: 22px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #F7F4EF;
  text-shadow: 0 1px 12px rgba(0,0,0,0.5);
  transition: opacity 0.4s var(--e-out), visibility 0.4s;
}
/* The caption sits exactly where the native control bar appears */
.wm-video.has-started .wm-video-caption {
  opacity: 0;
  visibility: hidden;
  transition: none;
}
.wm-video-label {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.wm-video-sub {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 14px;
  color: rgba(245,240,232,0.7);
}

/* Play button overlay — centered, clickable, fades out while playing */
.wm-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 1px solid rgba(245,240,232,0.6);
  background: rgba(245,240,232,0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #F7F4EF;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.35s var(--e-out),
    border-color 0.35s var(--e-out),
    color 0.35s var(--e-out),
    transform 0.45s var(--e-out),
    opacity 0.4s var(--e-out),
    visibility 0.4s;
  box-shadow: 0 0 0 0 rgba(245,240,232,0.35);
  animation: wm-play-pulse 2.8s var(--e-out) infinite;
}
.wm-play svg {
  width: 28px;
  height: 28px;
  margin-left: 4px; /* optically centre the triangle */
}
.wm-play:hover {
  background: #F7F4EF;
  border-color: #F7F4EF;
  color: var(--accent);
  transform: translate(-50%, -50%) scale(1.05);
  animation: none;
}
.wm-video.has-started .wm-play {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
  /* Stops the infinite attract pulse; nothing here waits on the clock */
  animation: none;
}
@keyframes wm-play-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(245,240,232,0.35); }
  70%  { box-shadow: 0 0 0 22px rgba(245,240,232,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,240,232,0); }
}

/* Before it starts, the whole frame is the play affordance; after that the
   native controls take over and the default cursor is correct. */
.wm-video video { cursor: pointer; }
.wm-video.has-started video { cursor: default; }

/* ═══════════════════════════════════════════
   05 · THE HERBARIUM — Specimen cards
═══════════════════════════════════════════════ */
.herbarium {
  padding: clamp(100px, 14vh, 180px) var(--pad-x);
  padding-left: calc(48px + var(--pad-x));
  background: var(--bg-primary);
  position: relative;
}
@media (max-width: 900px){ .herbarium { padding-left: var(--pad-x); } }

.herbarium-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 96px;
  gap: 40px;
  flex-wrap: wrap;
}
.herbarium-head-left { max-width: 580px; }
.herbarium-title {
  font-family: var(--f-display);
  font-size: clamp(34px, 5vw, 72px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin-top: 18px;
}
.herbarium-title em { font-style: italic; color: var(--accent); }
.herbarium-desc {
  max-width: 460px;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--text-secondary);
}

/* ── Specimen grid — 2 x 2 museum archive ── */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}
@media (max-width: 900px){ .spec-grid { grid-template-columns: 1fr; gap: 28px; } }

/* The moisture figure was repeated identically on all four cards. It is the
   most consequential number in the section, so it is stated once instead. */
.spec-note {
  max-width: 720px;
  margin: 56px auto 0;
  text-align: center;
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--text-secondary);
  text-wrap: pretty;
}
.spec-note strong { color: var(--text-primary); font-weight: 500; }
@media (max-width: 600px) { .spec-note { text-align: left; margin-top: 36px; } }

/* ── Individual specimen card ── */
.spec {
  position: relative;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  padding: 34px 38px 32px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  transition:
    transform 0.55s var(--e-out),
    box-shadow 0.55s var(--e-out),
    border-color 0.5s var(--e-out),
    background 0.5s var(--e-out);
  overflow: hidden;
}

/* Subtle paper-watermark corner tick — like a mounting tab */
.spec::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 34px; height: 34px;
  background:
    linear-gradient(135deg, var(--bg-secondary) 0 50%, transparent 50% 100%);
  opacity: 0.9;
}
.spec::after {
  content: '';
  position: absolute;
  top: 8px; left: 8px;
  width: 14px; height: 14px;
  border: 1px solid var(--border);
  border-radius: 50%;
  opacity: 0.6;
  pointer-events: none;
}

.spec:hover {
  transform: translateY(-4px);
  box-shadow:
    0 22px 52px -18px rgba(46,30,18,0.22),
    0 2px 6px -1px rgba(46,30,18,0.05);
  border-color: var(--text-muted);
  background: #FBF8F2;
}

@media (max-width: 560px){
  .spec { padding: 26px 22px 24px; }
}

/* ── Header: specimen number, taxonomy ── */
.spec-top {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-soft);
}
.spec-no {
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-primary);
}
/* ── Specimen plate (the cross-section) ── */
.spec-plate {
  position: relative;
  background: var(--bg-secondary);
  border: 1px solid var(--border-soft);
  padding: 28px 28px 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 280px;
}
.spec-cross {
  width: clamp(200px, 28vw, 300px);
  height: auto;
  display: block;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.04));
  transition: transform 0.7s var(--e-out);
}
.spec:hover .spec-cross {
  transform: scale(1.02);
}

.spec-scale {
  position: absolute;
  left: 20px;
  bottom: 12px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.75;
}

/* ── Magnified grain detail — hidden until hover ── */
.spec-mag {
  position: absolute;
  right: 18px;
  top: 18px;
  width: 96px;
  opacity: 0;
  transform: translate(8px, -4px) scale(0.92);
  transition:
    opacity 0.45s var(--e-out),
    transform 0.55s var(--e-out);
  pointer-events: none;
  filter: drop-shadow(0 12px 24px rgba(46,30,18,0.25));
}
.spec-mag svg {
  display: block;
  width: 100%;
  height: auto;
}
.spec-mag figcaption {
  margin-top: 6px;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-primary);
  opacity: 0.75;
}
.spec:hover .spec-mag {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

@media (max-width: 560px){
  .spec-mag { width: 72px; right: 12px; top: 12px; }
}

/* ── Foot: names + measured data ── */
.spec-foot {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.spec-names {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.spec-name {
  font-family: var(--f-display);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.008em;
  color: var(--text-primary);
}

.spec-botanic {
  font-family: var(--f-body);
  font-size: 13px;
  font-style: italic;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
}
.spec-botanic em { font-style: italic; }

/* one plain sentence on how the wood behaves — replaces the taxonomy rows */
.spec-character {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* Measured properties — typographic data table */
.spec-data {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
}
.spec-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border-soft);
  align-items: baseline;
}
.spec-row:last-child { border-bottom: none; }
.spec-row dt {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.spec-row dd {
  font-family: var(--f-display);
  font-size: 14.5px;
  font-weight: 400;
  color: var(--text-primary);
  line-height: 1.3;
  letter-spacing: 0.005em;
}

@media (max-width: 420px){
  .spec-row { grid-template-columns: 80px 1fr; gap: 10px; }
  .spec-row dd { font-size: 13.5px; }
}

/* ═══════════════════════════════════════════
   06 · COLLECTIONS — Year numerals
═══════════════════════════════════════════════ */
.collections {
  padding: clamp(100px, 14vh, 180px) 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
}
.collections-head {
  padding: 0 var(--pad-x);
  padding-left: calc(48px + var(--pad-x));
  margin-bottom: 60px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 900px){
  .collections-head { grid-template-columns: 1fr; padding-left: var(--pad-x); gap: 24px; }
}
.collections-title {
  font-family: var(--f-display);
  font-size: clamp(34px, 5vw, 72px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin-top: 18px;
}
.collections-title em { font-style: italic; color: var(--accent); }
.collections-desc {
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--text-secondary);
  max-width: 480px;
  padding-top: 40px;
}

.collections-list {
  list-style: none;
  border-top: 1px solid var(--border);
}
.c-item {
  display: grid;
  grid-template-columns: 220px 1fr 1.2fr 1fr 60px;
  align-items: center;
  gap: 40px;
  padding: 38px var(--pad-x);
  padding-left: calc(48px + var(--pad-x));
  max-width: var(--max-w);
  margin: 0 auto;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.5s var(--e-out), padding 0.5s var(--e-out);
  position: relative;
}
@media (max-width: 900px){
  .c-item { grid-template-columns: 80px 1fr 40px; gap: 20px; padding-left: var(--pad-x); }
  .c-item .c-products, .c-item .c-desc { display: none; }
}
.c-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}
.c-item:hover::before { opacity: 0.04; }
.c-item:hover { padding-left: calc(48px + var(--pad-x) + 8px); }
@media (max-width: 900px){ .c-item:hover { padding-left: calc(var(--pad-x) + 6px); } }

.c-year {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--f-display);
  font-size: clamp(40px, 4.5vw, 80px);
  font-weight: 300;
  line-height: 1;
  color: var(--text-primary);
  font-variation-settings: "opsz" 144;
  transition: color 0.5s, font-style 0.5s;
}
.c-item:hover .c-year { color: var(--accent); font-style: italic; }

.c-name {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--text-primary);
}
.c-desc {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-secondary);
}
.c-products {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
  padding-right: 10px;
}
.c-products-num {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--text-primary);
  line-height: 1;
}
.c-products-lbl {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.c-arrow {
  width: 40px; height: 40px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: grid; place-items: center;
  transition: all 0.5s var(--e-out);
  justify-self: end;
}
.c-item:hover .c-arrow {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--white);
  transform: rotate(-45deg);
}
.c-arrow svg { width: 16px; height: 16px; }

.c-tag {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 3px 8px;
  border-radius: 2px;
  margin-left: 10px;
  vertical-align: middle;
}

/* ═══════════════════════════════════════════
   07 · CITIES — Global reach marquee
═══════════════════════════════════════════════ */
.cities {
  /* No bottom padding: the regions bar carries 44px below its own text, so a
     further 120px here just left a dead band before the next section. */
  padding: clamp(80px, 12vh, 140px) 0 0;
  background: var(--bg-dark);
  color: #F7F4EF;
  overflow: hidden;
  position: relative;
}
.cities-head {
  padding: 0 var(--pad-x);
  padding-left: calc(48px + var(--pad-x));
  max-width: var(--max-w);
  margin: 0 auto clamp(60px, 8vw, 100px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
}
@media (max-width: 900px){
  .cities-head { grid-template-columns: 1fr; padding-left: var(--pad-x); }
}
.cities-title {
  font-family: var(--f-display);
  font-size: clamp(40px, 6vw, 96px);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
}
.cities-title em { font-style: italic; color: var(--accent-light); }
.cities-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 380px;
}
.c-stat {
  border-top: 1px solid rgba(245,240,232,0.12);
  padding-top: 14px;
}
.c-stat-n {
  font-family: var(--f-display);
  font-size: 36px;
  font-weight: 300;
  color: var(--accent-light);
  line-height: 1;
}
.c-stat-l {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.5);
  margin-top: 6px;
}

.cities-marquee {
  white-space: nowrap;
  overflow: hidden;
  margin: 24px 0;
  padding: 18px 0;
  border-top: 1px solid rgba(245,240,232,0.12);
  border-bottom: 1px solid rgba(245,240,232,0.12);
}
.cities-marquee-track {
  display: inline-flex;
  gap: 48px;
  animation: marquee 60s linear infinite;
  font-family: var(--f-display);
  font-size: clamp(36px, 6vw, 90px);
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.01em;
}
.cities-marquee-track span {
  color: rgba(245,240,232,0.65);
  transition: color 0.3s;
}
.cities-marquee-track span:hover { color: #F7F4EF; }
.cities-marquee-track .sep {
  color: rgba(245,240,232,0.25);
  font-family: var(--f-display);
  font-style: normal;
}
.cities-marquee.slow .cities-marquee-track { animation-duration: 90s; animation-direction: reverse; }

.cities-regions {
  padding: 0 var(--pad-x);
  padding-left: calc(48px + var(--pad-x));
  max-width: var(--max-w);
  margin: clamp(60px, 8vw, 100px) auto 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid rgba(245,240,232,0.12);
}
@media (max-width: 900px){
  .cities-regions { grid-template-columns: repeat(2, 1fr); padding-left: var(--pad-x); }
}
.cr-cell {
  padding: 30px 24px;
  border-right: 1px solid rgba(245,240,232,0.12);
}
.cr-cell:last-child { border-right: none; }
.cr-lbl {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.6);
  margin-bottom: 10px;
}
.cr-n {
  font-family: var(--f-display);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 300;
  color: #F7F4EF;
  line-height: 1.05;
  margin-bottom: 8px;
}
.cr-list {
  font-size: 12px;
  line-height: 1.7;
  color: rgba(245,240,232,0.6);
}

/* ═══════════════════════════════════════════
   08 · THE JOINERY — Principles rendered as joints
═══════════════════════════════════════════════ */
.joinery {
  padding: clamp(100px, 14vh, 180px) var(--pad-x);
  padding-left: calc(48px + var(--pad-x));
  background: var(--bg-primary);
  position: relative;
}
@media (max-width: 900px){ .joinery { padding-left: var(--pad-x); } }

.joinery-head {
  max-width: 900px;
  margin-bottom: 96px;
}
.joinery-title {
  font-family: var(--f-display);
  font-size: clamp(34px, 5vw, 72px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin-top: 18px;
}
.joinery-title em { font-style: italic; color: var(--accent); }
.joinery-lede {
  max-width: 560px;
  margin-top: 28px;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--text-secondary);
}

.j-list {
  list-style: none;
  display: grid;
  gap: 0;
}
.j-item {
  display: grid;
  grid-template-columns: 120px 280px 1fr;
  gap: 56px;
  padding: 56px 0;
  border-top: 1px solid var(--border);
  align-items: center;
  transition: background 0.5s var(--e-out);
  color: var(--text-primary);
}
.j-item:last-child { border-bottom: 1px solid var(--border); }
.j-item:hover { background: rgba(200,165,140,0.04); }

@media (max-width: 1080px){
  .j-item { grid-template-columns: 90px 220px 1fr; gap: 36px; }
}
@media (max-width: 900px){
  .j-item {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 44px 0;
  }
  .j-item .j-visual { order: 2; max-width: 320px; }
  .j-item .j-copy   { order: 3; }
  .j-item .j-index  { order: 1; }
}

/* Index column */
.j-index {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 8px;
}
.j-num {
  font-family: var(--f-display);
  font-size: 30px;
  font-weight: 400;
  font-style: italic;
  color: var(--accent);
  line-height: 1;
}
.j-kind {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Visual column — the joint drawing */
.j-visual {
  position: relative;
  padding: 18px 14px;
  border: 1px solid var(--border-soft);
  background: var(--bg-secondary);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.j-svg {
  width: 100%;
  height: auto;
  color: var(--text-primary);
  display: block;
}
.j-spec {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  padding-top: 2px;
  border-top: 1px dashed var(--border-soft);
}

/* Copy column */
.j-copy {
  max-width: 560px;
}
.j-title {
  font-family: var(--f-display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--text-primary);
  margin-bottom: 14px;
}
.j-body {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-secondary);
}

/* ── Joint animations — assemble on scroll into view ── */
@keyframes j-slide-in-l {
  from { transform: translateX(-36px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes j-slide-in-r {
  from { transform: translateX(36px); opacity: 0; }
  to   { transform: translateX(0);   opacity: 1; }
}
@keyframes j-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes j-slide-in-up {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Default state — parts are offset, waiting to assemble */
.j-item .j-tails,
.j-item .j-tenon,
.j-item .j-finger-l,
.j-item .j-lap-upper {
  transform: translateX(-36px);
  opacity: 0;
}
.j-item .j-pins,
.j-item .j-mortise,
.j-item .j-finger-r,
.j-item .j-lap-lower {
  transform: translateX(36px);
  opacity: 0;
}
.j-item .j-cert,
.j-item .j-lap-peg,
.j-item .j-ticks {
  opacity: 0;
}

/* On enter — each pair slides together */
.j-item.is-in .j-tails,
.j-item.is-in .j-tenon,
.j-item.is-in .j-finger-l,
.j-item.is-in .j-lap-upper {
  animation: j-slide-in-l 1.1s var(--e-out) forwards;
}
.j-item.is-in .j-pins,
.j-item.is-in .j-mortise,
.j-item.is-in .j-finger-r,
.j-item.is-in .j-lap-lower {
  animation: j-slide-in-r 1.1s var(--e-out) forwards;
}
.j-item.is-in .j-cert,
.j-item.is-in .j-lap-peg,
.j-item.is-in .j-ticks {
  animation: j-fade-in 0.8s var(--e-out) 0.9s forwards;
}

/* Hover — micro "flex" of the joint */
.j-item:hover .j-tails,
.j-item:hover .j-tenon,
.j-item:hover .j-finger-l,
.j-item:hover .j-lap-upper {
  transform: translateX(-3px);
  transition: transform 0.6s var(--e-out);
}
.j-item:hover .j-pins,
.j-item:hover .j-mortise,
.j-item:hover .j-finger-r,
.j-item:hover .j-lap-lower {
  transform: translateX(3px);
  transition: transform 0.6s var(--e-out);
}

@media (prefers-reduced-motion: reduce) {
  .j-item .j-tails,
  .j-item .j-tenon,
  .j-item .j-finger-l,
  .j-item .j-lap-upper,
  .j-item .j-pins,
  .j-item .j-mortise,
  .j-item .j-finger-r,
  .j-item .j-lap-lower,
  .j-item .j-cert,
  .j-item .j-lap-peg,
  .j-item .j-ticks {
    transform: none;
    opacity: 1;
    animation: none;
  }
}

/* ═══════════════════════════════════════════
   09 · CLOSE — Final CTA
═══════════════════════════════════════════════ */
.close {
  padding: clamp(120px, 18vh, 200px) var(--pad-x);
  padding-left: calc(48px + var(--pad-x));
  background: var(--accent-green);
  color: #F7F4EF;
  position: relative;
  overflow: hidden;
}
@media (max-width: 900px){ .close { padding-left: var(--pad-x); } }

/* Watermark: the SARAF wordmark, as a real <img>.
   Previously this was a pseudo-element tinted through a CSS mask. That works,
   but the ink position depended on aspect-ratio resolving on an empty
   pseudo-element and on mask-size/position — and those did not agree between
   engines, so the letters floated above the footer rule in Safari while
   measuring flush in Chromium.
   An <img> has intrinsic dimensions: width + height:auto gives exactly the
   artwork's ratio with nothing to compute, and because the PNG is trimmed to
   the ink, the element's bottom edge IS the letter feet. bottom:0 therefore
   lands them on the footer border in every engine. */
.close-wm {
  position: absolute;
  bottom: 0;
  left: -1.5vw;
  width: min(90vw, 1400px);
  height: auto;
  display: block;
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.close-inner { position: relative; z-index: 1; }


.close-inner {
  position: relative;
  max-width: 1000px;
}
.close-eyebrow {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.5);
  margin-bottom: 24px;
  display: flex; align-items: center; gap: 14px;
}
.close-eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(245,240,232,0.15);
  max-width: 240px;
}
.close-title {
  font-family: var(--f-display);
  font-size: clamp(44px, 7vw, 120px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
  margin-bottom: 60px;
}
.close-title em { font-style: italic; color: rgba(245,240,232,0.55); }

.close-actions {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 30px;
  border: 1px solid rgba(245,240,232,0.3);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: all 0.4s var(--e-out);
  cursor: pointer;
  background: none;
  color: inherit;
  font-family: var(--f-body);
}
.btn-pill:hover {
  background: #F7F4EF;
  color: var(--accent-green);
  border-color: #F7F4EF;
}
.btn-pill-filled {
  background: #F7F4EF;
  border-color: #F7F4EF;
  color: var(--accent-green);
}
.btn-pill-filled:hover {
  background: transparent;
  border-color: #F7F4EF;
  color: #F7F4EF;
}
.btn-pill svg { width: 16px; height: 16px; transition: transform 0.3s; }
.btn-pill:hover svg { transform: translateX(3px); }

/* Two items now that the phone number is gone. Flex rather than a 3-column
   grid so they sit against the left edge instead of leaving a visible hole
   where the third column used to be. */
.close-meta {
  margin-top: 80px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px 72px;
  padding-top: 40px;
  border-top: 1px solid rgba(245,240,232,0.12);
}
@media (max-width: 900px){ .close-meta { flex-direction: column; gap: 24px; } }
.cm-item .cm-l {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.5);
  margin-bottom: 10px;
}
.cm-item .cm-v {
  font-family: var(--f-display);
  font-size: 19px;
  font-weight: 400;
  color: #F7F4EF;
}
.cm-item .cm-v a { transition: color 0.3s; }
.cm-item .cm-v a:hover { color: rgba(245,240,232,0.7); }

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════ */
.foot {
  background: var(--accent-green);
  color: rgba(247,244,239,0.55);
  padding: 40px var(--pad-x);
  padding-left: calc(48px + var(--pad-x));
  border-top: 1px solid rgba(247,244,239,0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
@media (max-width: 900px){ .foot { padding-left: var(--pad-x); } }
.foot a:hover { color: #F7F4EF; }
.foot-links { display: flex; gap: 30px; flex-wrap: wrap; }

/* ═══════════════════════════════════════════
   SCROLL REVEAL UTILITY
═══════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s var(--e-out), transform 1s var(--e-out);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }

/* ═══════════════════════════════════════════
   CURSOR
═══════════════════════════════════════════════ */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s, background 0.3s;
  mix-blend-mode: difference;
}
.cursor.grow { width: 32px; height: 32px; background: var(--accent-soft); }
@media (max-width: 900px), (pointer: coarse) { .cursor { display: none; } }
@media (pointer: fine) { html, body, a, button { cursor: none !important; } }

/* Progress bar */
.progress {
  position: fixed;
  top: 0; left: 48px; right: 0;
  height: 1px;
  background: transparent;
  z-index: 81;
}
@media (max-width: 900px){ .progress { left: 0; } }
.progress-fill {
  height: 100%;
  background: var(--accent);
  width: 0;
  transition: width 0.1s linear;
}

/* ═══════════════════════════════════════════
   WOOD PLATES — photography set into the editorial sections
   ═══════════════════════════════════════════ */
.wood-plate {
  margin: 72px 0 0;
  max-width: 520px;
}

.wood-plate--wide { max-width: 760px; }

.wood-plate img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--border);
}

.wood-plate figcaption {
  margin-top: 14px;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* .collections has no horizontal padding of its own — its list supplies it,
   so the plate needs the page gutter explicitly. */
.collections .wood-plate {
  margin-left: calc(48px + var(--pad-x));
  margin-right: var(--pad-x);
}

@media (max-width: 760px) {
  .wood-plate,
  .wood-plate--wide { margin-top: 48px; max-width: 100%; }
  .collections .wood-plate { margin-left: var(--pad-x); }
}

/* ═══════════════════════════════════════════
   06 · COLLECTIONS — one band standing for the whole run,
   pointing at the catalog. Replaces the six-row year list.
   ═══════════════════════════════════════════ */
.coll-band {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 72px;
  align-items: center;
  max-width: var(--max-w);
  margin: 0 auto 0 0;
  padding: 0 var(--pad-x);
  padding-left: calc(48px + var(--pad-x));
}

.coll-figure { margin: 0; }

.coll-figure img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--border);
}

.coll-eyebrow { margin-bottom: 20px; }

.coll-title {
  font-family: var(--f-display);
  font-size: clamp(38px, 4.4vw, 68px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0 0 26px;
}

.coll-title em { font-style: italic; color: var(--accent-ink); }

.coll-desc {
  font-size: 17px;
  line-height: 1.8;
  color: var(--text-secondary);
  max-width: 46ch;
  margin: 0 0 34px;
  text-wrap: pretty;
}

.coll-facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 44px;
  margin: 0 0 40px;
  padding: 26px 0 0;
  border-top: 1px solid var(--border);
}

.coll-facts li { display: flex; flex-direction: column; gap: 5px; }

.coll-facts b {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  color: var(--text-primary);
}

.coll-facts span {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

@media (max-width: 900px) {
  .coll-band {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-left: var(--pad-x);
  }
  .coll-figure { order: 2; }
  .coll-body   { order: 1; }
}

/* ═══════════════════════════════════════════════
   MOBILE MENU
   The hamburger used to fire window.alert(). This is the
   real thing: a full-height panel built at runtime from the
   page's own .bar-nav, so every page stays in sync and the
   current page is marked without per-page markup.
═══════════════════════════════════════════════ */
.mm-panel {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  background: var(--text-primary);
  color: var(--bg-primary);
  /* Closed state. visibility keeps it out of the tab order. */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--e-out), visibility 0.45s;
}
.mm-panel.is-open { opacity: 1; visibility: visible; }

.mm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px var(--pad-x);
  border-bottom: 1px solid rgba(247,244,239,0.12);
  flex: none;
}
.mm-brand {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(247,244,239,0.55);
}
.mm-close {
  width: 44px; height: 44px;
  margin-right: -10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
}
.mm-close svg { width: 20px; height: 20px; }

.mm-nav {
  list-style: none;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 24px var(--pad-x);
  margin: 0;
  overflow-y: auto;
}
.mm-nav li {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--e-out), transform 0.5s var(--e-out);
}
.mm-panel.is-open .mm-nav li { opacity: 1; transform: none; }
.mm-nav a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  /* 56px of height is the tap target; the type is what you see. */
  padding: 12px 0;
  min-height: 56px;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(30px, 8.5vw, 40px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--bg-primary);
}
.mm-num {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--accent);
  flex: none;
}
.mm-nav a.is-current { color: var(--accent); }
.mm-nav a.is-current .mm-num { color: rgba(247,244,239,0.4); }

.mm-foot {
  flex: none;
  padding: 24px var(--pad-x) calc(24px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(247,244,239,0.12);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mm-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 24px;
  border-radius: 100px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mm-meta {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(247,244,239,0.45);
  text-align: center;
}

/* Hamburger morphs to a close cross while the panel is open */
.bar-menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(10.25px) rotate(45deg); }
.bar-menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.bar-menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-10.25px) rotate(-45deg); }

/* The bar blends with difference against the page; over the panel that
   inverts the button to an unreadable smear. Opt out while open. */
body.mm-locked .bar { mix-blend-mode: normal; }

body.mm-locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .mm-panel, .mm-nav li { transition-duration: 0.01ms; }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE CORRECTIONS
   Found by measuring every page at 375 / 768 / 1024
   rather than by eye — each rule below fixes a specific
   measured failure, noted with it.
═══════════════════════════════════════════════ */

/* The signature holds a 280px floor while sitting in a flex row after
   the seal, so at 375px it pushed the document 19px wide. It may shrink. */
.sig-draw { max-width: 100%; }
@media (max-width: 560px) {
  .manifesto-sig { flex-wrap: wrap; gap: 20px; }
  .sig-draw { width: min(100%, 300px); }
}

/* ── Tap targets ──
   Pointer-coarse only: on a mouse these are correctly sized already,
   and padding them out would open gaps in the desktop layouts. */
@media (pointer: coarse) {
  /* Hamburger drew at 30×22 — the bars stay that size, the hit area grows */
  .bar-menu-btn {
    width: 44px; height: 44px;
    padding: 11px 7px;
    margin-right: -7px;
    box-sizing: border-box;
  }
  .bar-menu-btn span { width: calc(100% - 14px); left: 7px; }
  .bar-menu-btn span:nth-child(1) { top: 11px; }
  .bar-menu-btn span:nth-child(3) { bottom: 11px; }

  /* Footer nav sat at 19px tall, the contact email at 28px */
  .foot-links a,
  .cm-v a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .foot-links { gap: 8px 30px; }
}

/* ═══════════════════════════════════════════════
   06 · ON RECORD — VRIKSH & SEDEX
   The two credentials that decide whether a European or
   US buyer can purchase at all, so they get a section of
   their own rather than a line in a spec strip. Drawn
   seals rather than logo files: the page is an engraved
   record throughout, and vendor logos would break it.
═══════════════════════════════════════════════ */
.record {
  background: var(--bg-secondary);
  padding: clamp(80px, 10vh, 130px) 0;
  border-top: 1px solid var(--border-soft);
}
.record-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  padding-left: calc(48px + var(--pad-x));
}
@media (max-width: 900px) {
  .record-inner { padding-left: var(--pad-x); }
}

.record-head { max-width: 720px; }
.record-title {
  font-family: var(--f-display);
  font-size: clamp(32px, 4.4vw, 62px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}
.record-title em { font-style: italic; color: var(--text-secondary); }
.record-lead {
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--text-secondary);
  max-width: 620px;
}

.record-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 72px);
  margin-top: clamp(48px, 6vw, 80px);
}
@media (max-width: 860px) {
  .record-list { grid-template-columns: minmax(0, 1fr); }
}

.rec {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
@media (max-width: 620px) {
  /* The seal stops being an aside and becomes the opening mark */
  .rec { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

.rec-seal {
  color: var(--accent-ink);
  width: 148px;
  max-width: 100%;
}
.rec-seal svg { width: 100%; height: auto; display: block; }

.rec-kicker {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.rec-name {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.1;
  letter-spacing: 0.01em;
  margin-bottom: 14px;
}
.rec-what {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--text-primary);
  margin-bottom: 18px;
}
.rec-why {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text-secondary);
  padding-left: 16px;
  border-left: 1px solid var(--accent);
}
.rec-why span {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* 10px of accent-ink on the sand ground measured 4.41:1, under the 4.5
     small text needs. The accent stays on the rule at the left. */
  color: var(--text-primary);
  margin-bottom: 6px;
}

.record-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 32px;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.record-also {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 640px;
}
.record-also-l {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 10px;
}
.record-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-primary);
  white-space: nowrap;
}
.record-link svg { transition: transform 0.4s var(--e-out); }
.record-link:hover svg { transform: translateX(4px); }

@media (pointer: coarse) {
  .record-link { min-height: 44px; }
}

/* ═══════════════════════════════════════════════
   HERO — LIGHT TREATMENT  (.hero.hero--light)

   The alternative tone: the shelving photograph held on
   ivory rather than on near-black, with the type in
   graphite. Everything the dark hero states in cream is
   restated here in ink, so the two are a single class
   apart — see the switch comment in index.html.

   The picture sits a little stronger than in the dark
   version (0.55 vs 0.42): on a pale ground a knocked-back
   image goes chalky rather than quiet, so it needs more
   of itself to read as a photograph at all.
═══════════════════════════════════════════════ */
.hero--light {
  background: var(--bg-primary);
  color: var(--text-primary);
}
.hero--light .hero-bg { background: var(--bg-primary); }
.hero--light .hero-bg img { opacity: 0.55; }

/* Light scrim: milk rather than shadow. Same three jobs as the dark
   one — a band under the nav, weight behind the headline, a base for
   the figures — but lifting the picture toward the page instead of
   pushing it under. */
.hero--light .hero-scrim {
  background:
    linear-gradient(to bottom, rgba(247,244,239,0.92) 0%, rgba(247,244,239,0.42) 14%,
                               rgba(247,244,239,0) 26%),
    linear-gradient(100deg, rgba(247,244,239,0.90) 0%, rgba(247,244,239,0.66) 38%,
                            rgba(247,244,239,0.24) 72%, rgba(247,244,239,0.06) 100%),
    linear-gradient(to top, rgba(247,244,239,0.86) 0%, rgba(247,244,239,0) 40%);
}

.hero--light .hero-kicker { color: var(--text-secondary); }
.hero--light .hero-title { color: var(--text-primary); }
.hero--light .hero-title em { color: var(--accent-ink); }
.hero--light .hero-tagline { color: var(--text-secondary); }

/* Buttons invert: the filled pill becomes ink on ivory, the outline
   pill takes a warm taupe rule instead of a translucent cream one. */
/* Outline at rest. 0.38 rather than 0.28 on the rule: this sits over a
   photograph, not a flat ground, so a fainter edge broke up against the
   shelving behind it. On hover it fills to ink — a ghost button whose only
   hover state is a slightly darker outline reads as inert. */
.hero--light .btn-pill {
  border-color: rgba(46,46,46,0.38);
  color: var(--text-primary);
  background: none;
}
.hero--light .btn-pill:hover {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--bg-primary);
}
.hero--light .btn-pill-filled {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--bg-primary);
}
.hero--light .btn-pill-filled:hover {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
  color: var(--bg-primary);
}

.hero--light .hero-meta-num { color: var(--text-primary); }
.hero--light .hero-meta-lbl { color: var(--text-secondary); }
.hero--light .hero-bottom-scroll { color: var(--text-secondary); }
.hero--light .hero-bottom-scroll-line {
  background: linear-gradient(to right, var(--accent-ink), rgba(46,46,46,0));
}

/* .bar blends with difference against a dark hero. Over an ivory one
   that inverts the logo and nav to a muddy negative, so the blend is
   switched off and the bar simply takes ink while the light hero is
   at the top of the page. */
.hero--light ~ .bar,
body:has(.hero--light) .bar:not(.scrolled) {
  mix-blend-mode: normal;
  color: var(--text-primary);
}

/* ── Signature: never sit blank while it is on screen ──
   The manifesto plays as a sequence — grain, strike, signature, seal —
   and the signature is the last beat, at the bottom of a tall section.
   Someone scrolling at speed reaches it before its turn comes round and
   sees an empty space where a signature should be. When the signature
   itself enters the viewport, .sig-now collapses the remaining waits so
   it draws on arrival instead of on schedule. */
.manifesto.revealed.sig-now .sig-group  { transition-delay: 0.06s; }
.manifesto.revealed.sig-now .sig-blob-a { transition-delay: 0.62s; }
.manifesto.revealed.sig-now .sig-blob-b { transition-delay: 0.70s; }
.manifesto.revealed.sig-now .sig-blob-c { transition-delay: 0.78s; }
.manifesto.revealed.sig-now .sig-blob-d { transition-delay: 0.86s; }
.manifesto.revealed.sig-now .sig-seal   { transition-delay: 0.72s; }

@media (prefers-reduced-motion: reduce) {
  /* No drawing, no stamping — just present */
  .manifesto .sig-group { clip-path: inset(0 0 0 0); transition: none; }
  .manifesto .sig-seal  { opacity: 1; transform: rotate(-6deg); transition: none; }
  .manifesto .sig-blob  { opacity: 0.45; transition: none; }
}

/* ── Browse the Catalog: a filled pill on a light ground ──
   .btn-pill-filled is written for the dark closing panels: it rests as an
   ivory pill and hollows out to an ivory outline on hover. Both states
   assume something dark behind them. This one sits in .collections on soft
   sand, where ivory measures 1.13:1 against the ground — so the pill was
   barely a shape at rest, and on hover the label disappeared into the
   background entirely. On a light ground it inverts: ink at rest,
   deepening to walnut on hover, the same logic as the light hero. */
.collections .btn-pill-filled {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--bg-primary);
}
.collections .btn-pill-filled:hover {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
  color: var(--bg-primary);
}

/* ── Hero → factory tour ──
   The bar is fixed and 69px tall, so an anchor jump would tuck the
   section's opening line underneath it. scroll-margin-top parks the
   section clear of the header, with a little air on top. */
#factoryTour { scroll-margin-top: 88px; }

/* The single hero CTA carries a downward arrow rather than the rightward
   one used for navigation elsewhere — it moves you down this page, it
   does not leave it. */
.hero-actions .btn-pill svg { width: 15px; height: 15px; }
.hero-actions .btn-pill:hover svg { transform: translateY(3px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ═══════════════════════════════════════════════
   FAIR BAND — the next fair, under the opening

   Graphite against the ivory hero above it, so it registers
   as you scroll without another element being added to the
   hero itself. Three moving parts, all quiet: the band lifts
   in, the day count runs up, and a slow sheen crosses it.
   All three stop under prefers-reduced-motion.
═══════════════════════════════════════════════ */
.hf {
  position: relative;
  overflow: hidden;
  background: var(--accent-green);
  color: var(--bg-primary);
  border-top: 1px solid rgba(247,244,239,0.10);
  border-bottom: 1px solid rgba(247,244,239,0.10);
}
/* No entrance transition, deliberately.
   A fade or lift means the band's visibility depends on the document's
   animation clock — and that clock stops in a backgrounded tab while the
   rest of the page carries on. Anything gated on it can strand at its
   start value, which for an announcement means an invisible announcement.
   The band is simply present; the motion below is decoration that can
   fail without costing the reader anything. */
.hf[hidden] { display: none; }

/* A single slow pass of light. Long gap between sweeps on purpose —
   it should read as a sheen on a dark surface, not a loading bar. */
.hf::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -40%;
  width: 40%;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(247,244,239,0) 0%,
    rgba(247,244,239,0.055) 50%,
    rgba(247,244,239,0) 100%);
  animation: hf-sheen 7.5s ease-in-out 1.2s infinite;
}
@keyframes hf-sheen {
  0%        { left: -40%; }
  55%, 100% { left: 115%; }
}

.hf-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 26px var(--pad-x);
  padding-left: calc(48px + var(--pad-x));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(22px, 3.5vw, 56px);
}

/* ── The count ── */
.hf-count {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-right: clamp(22px, 3vw, 44px);
  border-right: 1px solid rgba(247,244,239,0.16);
}
.hf-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent-light);
  align-self: center;
  flex: none;
  /* Three things at once so it reads across the width of the band: the
     dot swells, a ring throws off it, and it dips before coming back.
     Faster cycle than the old 2.4s halo, which was too polite to notice. */
  animation: hf-pulse 1.7s var(--e-out) infinite;
}
@keyframes hf-pulse {
  0%   { transform: scale(1);    opacity: 1;    box-shadow: 0 0 0 0 rgba(210,180,140,0.85); }
  40%  { transform: scale(1.35); opacity: 1;    box-shadow: 0 0 0 15px rgba(210,180,140,0); }
  62%  { transform: scale(1);    opacity: 0.35; box-shadow: 0 0 0 0 rgba(210,180,140,0); }
  100% { transform: scale(1);    opacity: 1;    box-shadow: 0 0 0 0 rgba(210,180,140,0); }
}

/* While the fair is actually open the marker goes green and quickens */
.hf-count.is-live .hf-dot {
  background: #8FD277;
  animation-name: hf-pulse-live;
  animation-duration: 1.25s;
}
@keyframes hf-pulse-live {
  0%   { transform: scale(1);    opacity: 1;    box-shadow: 0 0 0 0 rgba(143,210,119,0.9); }
  40%  { transform: scale(1.4);  opacity: 1;    box-shadow: 0 0 0 16px rgba(143,210,119,0); }
  62%  { transform: scale(1);    opacity: 0.35; box-shadow: 0 0 0 0 rgba(143,210,119,0); }
  100% { transform: scale(1);    opacity: 1;    box-shadow: 0 0 0 0 rgba(143,210,119,0); }
}
.hf-num {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.hf-unit {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(247,244,239,0.72);
  white-space: nowrap;
}

/* ── The fair ── */
.hf-kicker {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(247,244,239,0.62);
  margin-bottom: 7px;
}
.hf-name {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(24px, 2.5vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
}
.hf-name em { font-style: italic; color: var(--accent); }
.hf-meta {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(247,244,239,0.72);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.hf-meta span::before { content: '· '; opacity: 0.5; }

/* ── The way through ── */
.hf-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  padding: 15px 26px;
  border-radius: 100px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--f-body);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.35s var(--e-out), color 0.35s var(--e-out);
}
.hf-cta svg { width: 15px; height: 15px; transition: transform 0.3s var(--e-out); }
.hf-cta:hover { background: var(--accent); color: #211812; }
.hf-cta:hover svg { transform: translateX(4px); }

@media (max-width: 1000px) {
  .hf-inner {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 20px;
  }
  .hf-cta { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 900px) {
  .hf-inner { padding-left: var(--pad-x); }
}
@media (max-width: 620px) {
  .hf-inner { grid-template-columns: minmax(0, 1fr); }
  .hf-count {
    border-right: 0;
    border-bottom: 1px solid rgba(247,244,239,0.16);
    padding-right: 0;
    padding-bottom: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hf { opacity: 1; transform: none; transition: none; }
  .hf::after { animation: none; opacity: 0; }
  .hf-dot { animation: none; }
}

/* ═══════════════════════════════════════════════
   HERO SLIDER

   The first slide is the hero itself — its markup and every rule
   above are untouched, and with one slide the section behaves
   exactly as it did before this existed. Extra slides are
   overlays laid on top, so nothing about slide one's layout is
   negotiated with the slider.
═══════════════════════════════════════════════ */

/* Slide 1 = the hero's own children. They step aside for an overlay. */
.hero.show-alt > .hero-bg,
.hero.show-alt > .hero-headline,
.hero.show-alt > .hero-bottom {
  opacity: 0;
  visibility: hidden;
}

.hero-alt {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Matches .hero's own padding so the overlay sits on the same grid */
  padding: 132px var(--pad-x) 48px;
  padding-left: calc(var(--pad-x) + 48px);
  opacity: 0;
  visibility: hidden;
}
.hero-alt.is-active {
  opacity: 1;
  visibility: visible;
  /* Transform only, never opacity — an animation frozen at its first
     frame must not be able to hide the slide it introduces. */
  animation: hero-alt-in 0.7s var(--e-out);
}
@keyframes hero-alt-in { from { transform: translateY(10px); } }

@media (max-width: 900px) {
  .hero-alt { padding-left: var(--pad-x); padding-right: var(--pad-x); }
}

/* The fair render is a dark photograph, so it still sits further back than
   the shelving does (0.55) — but at 0.30 the stand was barely legible as a
   stand. 0.42 lets the fascias, the signage and the room sets read while
   keeping the headline on a light enough ground. */
.hero--light .hero-alt .hero-bg img { opacity: 0.60; }

/* At 0.60 the stand and its signage read properly, but the type sits on
   the left and a ghosted SARAF mark landed right behind the headline. The
   scrim is therefore weighted harder to the left on this slide than on the
   brand one: calm under the words, open across the stand itself. */
.hero--light .hero-alt .hero-scrim {
  background:
    linear-gradient(to bottom, rgba(247,244,239,0.92) 0%, rgba(247,244,239,0.42) 14%,
                               rgba(247,244,239,0) 26%),
    linear-gradient(100deg, rgba(247,244,239,0.96) 0%, rgba(247,244,239,0.90) 26%,
                            rgba(247,244,239,0.42) 58%, rgba(247,244,239,0.10) 100%),
    linear-gradient(to top, rgba(247,244,239,0.88) 0%, rgba(247,244,239,0) 34%);
}

/* The kicker marker beats on a fair slide so the flag reads as news */
.hero-kicker-dot.is-beat { animation: hf-pulse 1.7s var(--e-out) infinite; }

/* ── Dots: on the right edge, clear of the headline and the figures ── */
.hero-nav {
  position: absolute;
  right: calc(var(--pad-x) - 4px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.hero-dot {
  width: 24px;
  height: 24px;
  padding: 11px 4px;
  border: 0;
  background: none;
  cursor: pointer;
  display: block;
}
.hero-dot-fill {
  display: block;
  width: 16px;
  height: 2px;
  background: rgba(46,46,46,0.3);
  transition: background 0.4s var(--e-out), width 0.4s var(--e-out);
}
.hero-dot.is-on .hero-dot-fill { background: var(--text-primary); width: 24px; }
.hero-dot:hover .hero-dot-fill { background: var(--accent-ink); }

.hero-play {
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  margin-top: 4px;
  border: 1px solid rgba(46,46,46,0.28);
  border-radius: 50%;
  background: none;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.35s var(--e-out);
}
.hero-play:hover { border-color: var(--text-primary); }
.hero-play-bars {
  width: 7px; height: 8px;
  border-left: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.hero.is-paused .hero-play-bars {
  width: 0; height: 0;
  border: 4px solid transparent;
  border-left: 7px solid currentColor;
  margin-left: 3px;
}

@media (pointer: coarse) {
  .hero-dot { width: 44px; height: 44px; padding: 21px 14px; }
  .hero-play { width: 44px; height: 44px; }
}
@media (max-width: 900px) {
  .hero-nav { right: 6px; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-alt.is-active { animation: none; }
  .hero-kicker-dot.is-beat { animation: none; }
}