/* ============================================================
   WINERY-SYSTEM — the ONE canonical design system for every
   Barbazza page. Tokens, base reset, shared type, nav-header,
   heroes, buttons, colour grounds, bottom-nav, the block grammar
   (bogen / stone-course / wine-row) and the fat footer all live
   here ONCE. barbazza.css and barbazza-winery.css hold ONLY the
   page-specific content of their clusters — nothing here is
   duplicated in them. Where they used to drift, THIS file is
   canonical (flagship = Barbazza Winery). Every page loads this
   file LAST, so it wins the cascade.
   ============================================================ */

/* ============================================================
   TOKENS  (colours identical across all pages; fonts + measure
   from the Barbazza Winery flagship, plus the full display-cut
   vocabulary the block grammar and the History pages need)
   ============================================================ */
:root{
  /* colour */
  --cream:      #F2E8D0;
  --cream-2:    #F7F0DD;
  --paper:      #ECE1C4;
  --ink:        #1A1410;
  --ink-soft:   #2C2318;
  --indigo:     #262660;   /* brand indigo — accents */
  --indigo-dark:#1d1d49;   /* dark section ground */
  --dark-cold:  #131330;   /* dark cold — the deepest ground (footer, dropdowns) */
  --gold:       #A6842F;     /* gold for text on cream (legible) */
  --gold-br:    #D5AE55;     /* bright gold for on-dark */
  --red:        #BE1E2D;
  --red-dark:   #9E1826;
  --black:      #000;          /* scrim base — shadows derive from this */
  --dark-warm:       #261c0a;       /* dark warm — document/room brown ground */
  --rule:       rgba(26,20,16,.55);
  --rule-lt:    rgba(242,232,208,.34);

  /* type */
  --serif:   'Libre Caslon Text', 'Bookman Old Style', serif;
  --disp:    'Founders Caslon', 'Libre Caslon Text', serif;            /* 30pt cut — mid display */
  --disp-sc: 'Founders Caslon 42 SC', 'Founders Caslon Display', 'Libre Caslon Text', serif;
  --disp-it: 'Founders Caslon 42 Italic Alt', 'Founders Caslon Display', 'Libre Caslon Text', serif;
  --disp-12: 'Founders Caslon 12', 'Founders Caslon', 'Libre Caslon Text', serif;
  --it:      'Founders Caslon 42 Italic Alt', serif;
  --disp-xl: var(--disp-sc);   /* hero + article headlines (small-caps) */
  --disp-h2: var(--disp-12);
  --mono:    'IBM Plex Mono', 'Courier New', monospace;

  /* layout */
  --maxw:  1500px;
  --pad:   clamp(20px, 5vw, 72px);
  --bleed: calc(var(--pad) + max(0px, (100vw - var(--maxw)) / 2));
  --ease:  cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   BASE RESET
   ============================================================ */
*{ box-sizing:border-box; }
/* Founders Caslon is single-weight — force 400 so the UA bold default
   never triggers faux-bold. Mono class rules opt back into 700. */
h1, h2, h3, h4, h5, h6{ font-weight:400; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
/* Lenis momentum scaffolding (locomotive.js) */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }
.lenis.lenis-smooth iframe{ pointer-events:none; }
html.loco .reveal{ transition:none !important; }
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--serif); font-size:19px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--gold-br); color:var(--ink); }

/* ============================================================
   SHARED TYPE
   ============================================================ */
.kicker{ font-family:var(--mono); font-size:12px; letter-spacing:.34em;
  text-transform:uppercase; font-weight:700; }
.disp{ font-family:var(--disp); line-height:1.04; letter-spacing:-.005em; }
/* Founders Caslon ships 400 only — never fake a bold or an italic */
h1, h2, .disp, .claim .ct{ font-synthesis:none; }
.disp em, h1 em, h2 em, .ct em{ font-family:var(--disp); font-style:italic; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }

/* article label: ARTICLE III — THE SEAL */
.artlabel{ display:flex; align-items:center; gap:18px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.3em;
  text-transform:uppercase; font-weight:700; color:var(--gold); margin:0 0 26px; }
.artlabel .num{ color:var(--red); }
.artlabel::before{ content:""; width:38px; height:2px; background:var(--gold); }
.on-dark .artlabel{ color:var(--gold-br); }
.on-dark .artlabel .num{ color:var(--gold-br); }
.on-dark .artlabel::before{ background:var(--gold-br); }
.on-red .artlabel{ color:var(--gold-br); }               /* red ground: red .num would vanish — use gold-br */
.on-red .artlabel .num{ color:var(--gold-br); }
.on-red .artlabel::before{ background:var(--gold-br); }

/* footnotes */
sup.fn{ font-family:var(--mono); font-size:.62em; color:var(--red); font-weight:700;
  vertical-align:super; padding-left:1px; }
.on-dark sup.fn{ color:var(--gold-br); }
.footnotes{ margin-top:54px; padding-top:22px; border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:13.5px; line-height:1.7; color:var(--ink-soft);
  display:grid; gap:14px; max-width:760px; }
.footnotes .fni{ display:grid; grid-template-columns:26px 1fr; gap:10px; }
.footnotes .fni b{ color:var(--red); font-weight:700; }
.on-dark .footnotes{ border-top-color:var(--rule-lt); color:color-mix(in srgb, var(--cream) 78%, transparent); }
.on-dark .footnotes .fni b{ color:var(--gold-br); }

/* ============================================================
   NAV-HEADER — canonical site-chrome CSS. Moved here from
   shared-header.js (which now injects only markup + wiring).
   Uses design-system tokens; --hdr-pad and the header glass tint
   (rgba(8,10,24,.1)) are the only header-specific values with no
   token equivalent.
   ============================================================ */
header.site{
  --hdr-pad: clamp(20px, 4vw, 60px);
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:14px var(--hdr-pad);
  /* same frosted treatment as the bottom nav — blur for legibility, NO dark tint */
  background:transparent;
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  border-bottom:1px solid color-mix(in srgb, var(--gold) 32%, transparent);
  box-sizing:border-box;
}
header.site, header.site *, header.site *::before, header.site *::after{ box-sizing:border-box; }
/* the header does NOT change on scroll — .solid is inert by design */
header.site.solid{ background:transparent; }

header.site .brand{ display:flex; align-items:center; gap:16px; position:relative; text-decoration:none; }
header.site .brand .crest{ width:58px; height:auto; }
header.site .brand .word{ height:53px; width:auto; }
header.site .brand img{ filter:drop-shadow(0 2px 9px color-mix(in srgb, var(--black) 45%, transparent)); }

header.site nav{ display:flex; gap:22px; flex-wrap:nowrap; }
header.site nav a{
  font-family:var(--disp-sc);
  font-size:clamp(1.05rem,1.6vw,1.5rem); letter-spacing:.02em; font-weight:400;
  color:var(--gold-br); text-decoration:none;
  transition:color .2s; white-space:nowrap;
}
header.site nav a:hover, header.site nav a[aria-current="page"]{ color:var(--cream-2); }

header.site .hdr-right{ display:flex; align-items:center; gap:14px; }

header.site .navbtn{
  font-family:var(--mono);
  font-size:11.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink); background:var(--gold-br);
  padding:11px 20px; border:2px solid var(--gold-br);
  text-decoration:none; transition:all .2s var(--ease);
  white-space:nowrap; cursor:pointer;
}
header.site .navbtn:hover{ background:transparent; color:var(--gold-br); }

header.site .menu-toggle{
  display:none; align-items:center; justify-content:center;
  background:none; border:0; cursor:pointer;
  color:var(--gold-br); font-size:24px; line-height:1; padding:2px 4px;
}

/* language switcher — Caslon SC row, underline grows from center (no layout shift) */
header.site .langwrap{ position:relative; display:flex; align-items:center; }
header.site .lang-toggle{
  display:none; align-items:center; gap:5px;
  background:none; border:0; cursor:pointer;
  font-family:var(--mono);
  font-size:11px; font-weight:700; letter-spacing:.14em;
  color:var(--gold-br); padding:4px 2px;
}
header.site .lang-toggle .lt-caret{ transition:transform .25s var(--ease); display:inline-block; }
header.site .langwrap.open .lang-toggle .lt-caret{ transform:rotate(180deg); }
header.site .langsw{ display:inline-flex; align-items:baseline; gap:16px; margin-right:18px; }
header.site .langsw a{
  position:relative;
  font-family:var(--disp-sc);
  font-size:15px; letter-spacing:.02em; font-weight:400;
  color:var(--gold-br);
  background:none; border:0; cursor:pointer; padding:2px 0;
  text-decoration:none;
  transition:color .2s var(--ease);
  text-shadow:0 1px 8px color-mix(in srgb, var(--black) 55%, transparent), 0 1px 2px color-mix(in srgb, var(--black) 50%, transparent);
}
header.site .langsw a::after{
  content:""; position:absolute; left:50%; right:50%; bottom:-2px; height:1px;
  background:var(--gold-br); transition:left .25s var(--ease), right .25s var(--ease);
}
header.site .langsw a:hover{ color:var(--gold-br); }
header.site .langsw a:hover::after,
header.site .langsw a.on::after{ left:0; right:0; }
header.site .langsw a.on{ color:var(--cream-2); }
header.site .langsw .sep{ display:none; }

/* ≤1023 — language collapses to dropdown */
@media (max-width:1023px){
  header.site .lang-toggle{ display:inline-flex; }
  header.site .langsw{
    display:none; position:absolute; top:calc(100% + 10px); right:0; z-index:5;
    flex-direction:column; align-items:flex-end; gap:4px; padding:10px 14px; margin-right:0;
    background:var(--dark-cold);
    border:1px solid color-mix(in srgb, var(--gold-br) 30%, transparent); border-radius:6px;
    box-shadow:0 18px 40px -18px color-mix(in srgb, var(--black) 60%, transparent);
  }
  header.site .langwrap.open .langsw{ display:flex; }
  header.site .langsw a{ font-size:14px; padding:3px 2px; }
  header.site .langsw a::after{ display:none; }
}

/* ≤760 — nav folds into hamburger, brand shrinks */
@media (max-width:760px){
  header.site .menu-toggle{ display:inline-flex; }
  header.site nav{ display:none; }
  header.site nav.open{
    display:flex; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background:var(--dark-cold); border-top:1px solid color-mix(in srgb, var(--gold-br) 30%, transparent);
    box-shadow:0 18px 40px -18px color-mix(in srgb, var(--black) 60%, transparent); padding:8px 0;
  }
  header.site nav.open a{
    padding:14px var(--hdr-pad);
    border-bottom:1px solid color-mix(in srgb, var(--gold-br) 12%, transparent);
    font-size:18px;
  }
  header.site nav.open a:last-child{ border-bottom:0; }
  header.site .brand .crest{ width:42px; }
  header.site .brand .word{ height:38px; }
  header.site .navbtn{ padding:10px 14px; font-size:10.5px; letter-spacing:.16em; }
  header.site{ gap:12px; }
  header.site .hdr-right{ gap:10px; }
}

/* ============================================================
   SECTIONS + COLOUR GROUNDS
   Text sits on cream (body), red (--red-dark), indigo (--indigo),
   indigo-dark (--indigo-dark) or indigo-footer. .on-dark / .on-red
   flip accents to bright gold.
   ============================================================ */
section{ position:relative; }
.sec{ padding:clamp(72px,11vh,140px) 0; overflow-x:clip; }
.sec.on-dark{ background:var(--indigo-dark); color:var(--cream); }
.sec.on-red{ background:var(--red-dark); color:var(--cream); }
.sec h2{ font-family:var(--disp-xl); margin:0;
  font-size:clamp(2rem,4.6vw,3.9rem); line-height:1.02; letter-spacing:-.015em; text-wrap:balance; }
.sec h2 em{ font-family:'Founders Caslon 42 Italic Alt','Founders Caslon Display'; font-style:italic; color:var(--gold); }
.on-dark h2 em, .on-red h2 em{ color:var(--gold-br); }
.lead{ font-size:clamp(1.1rem,1.5vw,1.32rem); line-height:1.55; max-width:none; }
.muted{ opacity:.82; }

/* ============================================================
   PICTURE-HERO / TEXT-HERO
   One hero that supports both the video/seal treatment (Winery)
   and the photo/warm document treatment (History). Shared
   elements use the flagship values.
   ============================================================ */
/* Text hero is content-driven. Photo + video heroes fill the viewport
   (the media needs the space to read as a hero). */
.hero{ position:relative; background:var(--indigo); color:var(--cream);
  display:flex; flex-direction:column; justify-content:center;
  padding:140px var(--pad) 140px; overflow:hidden; }
.hero.photo, .hero:has(> video){ min-height:100svh; }
/* photo hero (History) */
.hero .hero-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:0; opacity:.5; filter:saturate(.92) contrast(1.02); }
.hero.photo::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:color-mix(in srgb, var(--indigo-dark) 58%, transparent); }
.hero.photo .inner, .hero.photo .herofoot{ position:relative; z-index:3; }
.hero.warm{ background:var(--dark-warm); }
.hero.warm .hero-photo{ opacity:.66; filter:saturate(1.08) contrast(1.3); }
.hero.photo.warm::after{ background:color-mix(in srgb, var(--dark-warm) 33%, transparent); }
.hero .bg-grain{ position:absolute; inset:0; opacity:.5; mix-blend-mode:soft-light;
  background:
    radial-gradient(120% 90% at 80% 10%, color-mix(in srgb, var(--gold-br) 16%, transparent), transparent 55%),
    radial-gradient(90% 80% at 10% 100%, color-mix(in srgb, var(--red) 30%, transparent), transparent 60%);
  pointer-events:none; }
/* video hero (Winery) */
.hero .bg-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; pointer-events:none; }
.hero .bg-seal{ position:absolute; right:-13vw; top:50%; transform:translateY(-50%);
  width:min(70vw,720px); opacity:.07; pointer-events:none; filter:saturate(0); z-index:2; }
/* shared */
.hero .inner{ position:relative; z-index:3; max-width:1080px; margin:0 auto; width:100%; }
.hero .topline{ color:var(--gold-br); margin:0 0 30px;
  display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; }
.hero .topline .dot{ color:color-mix(in srgb, var(--cream) 40%, transparent); }
.hero h1{ font-family:var(--disp-xl); margin:0;
  font-size:clamp(2.4rem, 7vw, 100px); line-height:.98; letter-spacing:-.018em; }
.hero h1 > span{ display:block; white-space:nowrap; }   /* each line atomic — DIRECT CHILD only */
.hero h1 em{ font-family:'Founders Caslon 42 Italic Alt','Founders Caslon Display'; font-style:italic; color:var(--gold-br); }
.hero .sub{ font-size:clamp(1.05rem,1.7vw,1.45rem); line-height:1.5; color:var(--cream);
  max-width:min(100%, 968px); margin:30px 0 0; font-weight:400; }
.hero .cta{ display:flex; flex-wrap:wrap; gap:16px; margin-top:42px; }
/* text-shadows exist only to keep text legible over a MEDIA hero (photo or video) — solid-ground text heroes stay clean */
.hero.photo .topline, .hero:has(video) .topline{ text-shadow:0 1px 8px color-mix(in srgb, var(--black) 70%, transparent); }
.hero.photo h1, .hero:has(video) h1{ text-shadow:0 2px 26px color-mix(in srgb, var(--black) 60%, transparent), 0 1px 4px color-mix(in srgb, var(--black) 55%, transparent); }
.hero.photo .sub, .hero:has(video) .sub{ text-shadow:0 1px 12px color-mix(in srgb, var(--black) 70%, transparent), 0 1px 3px color-mix(in srgb, var(--black) 60%, transparent); }
.hero .herofoot{ position:absolute; z-index:3; left:var(--pad); right:var(--pad); bottom:26px;
  display:flex; justify-content:space-between; align-items:flex-end; gap:20px;
  font-family:var(--mono); font-size:12px; color:color-mix(in srgb, var(--cream) 60%, transparent); letter-spacing:.06em; }
.hero .herofoot .scroll{ display:flex; align-items:center; gap:10px; }
.hero .herofoot .scroll .line{ width:50px; height:1px; background:color-mix(in srgb, var(--cream) 50%, transparent); position:relative; overflow:hidden; }
.hero .herofoot .scroll .line::after{ content:""; position:absolute; inset:0; background:var(--gold-br);
  animation:slide 2.2s var(--ease) infinite; }
@keyframes slide{ 0%{transform:translateX(-100%)} 60%,100%{transform:translateX(100%)} }
.hero h1, .hero h1.disp{ font-family:var(--disp-xl); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{ font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  padding:17px 30px; border:2px solid var(--gold-br); transition:all .18s var(--ease); cursor:pointer; }
.btn.solid{ background:var(--gold-br); color:var(--ink); }
.btn.solid:hover{ transform:translate(-2px,-2px); }
.btn.ghost{ background:transparent; color:var(--gold-br); }
.btn.ghost:hover{ background:var(--gold-br); color:var(--ink); }

/* ============================================================
   GENERIC LAYOUT + SHARED COMPONENTS (split, plate, claims)
   .split is the 2-col base every page's page-specific CSS extends
   (barbazza-winery.css overrides it for #claims, etc). Lives here
   because Barbazza pages do NOT load barbazza.css.
   ============================================================ */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center; }
.split.wide-l{ grid-template-columns:1.15fr .85fr; }
.split.wide-r{ grid-template-columns:.85fr 1.15fr; }
.stack > * + *{ margin-top:20px; }

/* framed photo (ink frame, no shadow, no fill) + stamp caption */
.plate{ position:relative; border:3px solid var(--ink); }
.plate.red, .plate.indigo{ box-shadow:none; }
.on-dark .plate{ border-color:var(--ink); }
.plate img{ width:100%; height:100%; object-fit:cover; filter:contrast(1.04) saturate(1.02); }
.plate .cap{ position:absolute; left:-2px; bottom:14px; background:var(--cream); color:var(--ink);
  border:2px solid var(--ink); border-left:none; padding:7px 14px;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; max-width:80%; }
.plate .cap b{ color:var(--red); }

/* THE CLAIMS (hook, footnoted) */
.claims{ display:grid; gap:0; margin-top:46px; border-top:2px solid var(--rule); }
.on-dark .claims{ border-top-color:var(--rule-lt); }
.claim{ display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,4vw,56px);
  align-items:baseline; padding:34px 0; border-bottom:1px solid var(--rule); }
.on-dark .claim{ border-bottom-color:var(--rule-lt); }
.claim .cn{ font-family:var(--mono); font-size:13px; font-weight:700; color:var(--gold); letter-spacing:.1em; padding-top:.7em; }
.on-dark .claim .cn{ color:var(--gold-br); }
.claim .ct{ font-family:var(--disp); font-size:clamp(1.6rem,3.6vw,2.9rem); line-height:1.04; letter-spacing:-.01em; }
.claim .ct em{ font-style:italic; color:var(--gold); }
.on-dark .claim .ct em{ color:var(--gold-br); }

/* shared block frame */
/* Block height is CONTENT-driven, never viewport. Photo cells get a content
   floor (matches index.html's #record .row__media clamp). The spine stretches
   to match via grid align-items:stretch. */
.wsb{ position:relative; }
.wsb .ws-photo{ position:relative; overflow:hidden; }
.wsb .ws-photo img{ width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.075); transition:transform 1.5s var(--ease); will-change:transform; }
.wsb.reveal.in .ws-photo img,
.wsb .ws-photo.reveal.in img{ transform:scale(1); }

.ws-kick{ font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.26em;
  text-transform:uppercase; color:var(--gold); margin:0; }
.ws-line{ font-family:var(--disp); letter-spacing:.01em; line-height:1.04;
  font-size:clamp(2rem, 4vw, 3rem); margin:0; color:var(--ink); }
.ws-line em{ font-family:var(--it); font-style:italic; color:var(--gold); }
/* body-copy emphasis italics carry the gold accent, like the headline em (light grounds) */
.ws-sub em, .ws-sub i, .craft-lead em, .fam-bio em{ font-style:italic; color:var(--gold); }
.ws-sub{ font-family:var(--serif); font-size:19px; line-height:1.58; color:var(--ink-soft);
  max-width:46ch; margin:0; }
.ws-reg{ font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink); margin:0; }
.ws-reg b{ color:var(--red); }

/* ─────────── LEFT / RIGHT · Der Bogen spine ─────────── */
/* height is content-driven (the picture matches the amount of spine text) — never viewport */
.wsb.bogen{ display:grid; align-items:stretch; }
.wsb.bogen.left{ grid-template-columns:minmax(340px,36%) 1fr; }
.wsb.bogen.right{ grid-template-columns:1fr minmax(340px,36%); }
.wsb.bogen.right .spine{ order:2; }
/* Photo cell has its own content floor — height-only (rem-derived, NOT viewport).
   The spine cell stretches to match via grid align-items:stretch. */
.wsb.bogen .ws-photo{ min-height:clamp(340px, 45rem, 720px); }
.wsb.bogen .ws-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* photo object-position modifiers — replaces inline style="object-position:...;" */
.ws-photo.top    img { object-position:center top;    }
.ws-photo.bottom img { object-position:center bottom; }


.spine{ position:static; background:var(--cream); color:var(--ink);
  display:flex; flex-direction:column;
  padding:clamp(80px,7vw,110px) clamp(30px,3.2vw,56px) clamp(44px,5vw,72px); }
/* the numeral lives INSIDE the picture, top corner (seam side) — cream overlay, legible on the photo */
.wsb.bogen .ws-photo .sp-num{ position:absolute; top:clamp(6px,1.6vh,22px); z-index:3; margin:0;
  color:var(--cream); text-shadow:0 3px 22px color-mix(in srgb, var(--indigo-dark) 60%, transparent); pointer-events:none; white-space:nowrap;
  font-family:var(--disp-sc); font-size:clamp(78px,8vw,124px); line-height:.86; }
.wsb.bogen.left .ws-photo .sp-num{ left:clamp(18px,3vw,52px); }
.wsb.bogen.right .ws-photo .sp-num{ right:clamp(18px,3vw,52px); }
.spine .sp-foot{ display:flex; flex-direction:column; gap:16px; margin-top:auto; }

/* ── LEFT/RIGHT refinements ──────────────────────────────────
   Headline larger (4rem cap); more air under the breadcrumb; the
   breadcrumb gets the same preceding rule as the article eyebrow;
   the registrar crumb moves INTO the photo (bottom outer corner). */
.wsb.bogen .ws-line{ font-size:clamp(2rem, 4vw, 4rem); margin-top:14px; }
.wsb.bogen .ws-kick::before{ content:""; display:inline-block; width:26px; height:2px;
  background:currentColor; opacity:.55; vertical-align:middle; margin:-2px 12px 0 0; }
/* registrar crumb belongs to the PICTURE, never a bottom line of text.
   split → spine is static, so it anchors to .wsb over the full-height photo;
   center → picture is on top, so lift it above the cream (bottom:100%) into the photo.
   Pure CSS → works on every page (Winery, History v2 …) with no markup change. */
.wsb.bogen .ws-reg{ position:absolute; bottom:clamp(16px,3vw,40px); z-index:4; }
.wsb.bogen.right .ws-reg{ left:clamp(18px,3vw,48px); }
.wsb.bogen.left  .ws-reg{ right:clamp(18px,3vw,48px); }
.wsb.center .ws-reg{ position:absolute; bottom:calc(100% + clamp(16px,2.5vh,30px)); z-index:6; }
.wsb.center.cl .ws-reg{ left:clamp(24px,5vw,80px); }    /* numeral on the right → crumb left  */
.wsb.center.cr .ws-reg{ right:clamp(24px,5vw,80px); }   /* numeral on the left  → crumb right */
/* Canonical frosted crumb — warm brown (hero-ground), cream text, forced to one line.
   Standard everywhere: bogen + center registrar crumbs, and any other frosted chip. */
.wsb.bogen .ws-reg, .wsb.center .ws-reg{
  background:color-mix(in srgb, var(--dark-warm) 45%, transparent); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  padding:6px 12px; border-radius:3px; color:var(--cream-2);
  text-shadow:0 1px 6px color-mix(in srgb, var(--dark-warm) 42%, transparent);
  white-space:nowrap; max-width:none; }
.wsb.bogen .ws-reg b, .wsb.center .ws-reg b{ color:var(--gold-br); }

/* ─────────── TRANSLITERATION blockquote — document transcriptions on the
   decree pages (History, Winery System). Base + SC line + dark-ground variant;
   the .hero and .wsb.center.cr modifiers are just below. ─────────── */
.translit{ font-family:var(--serif); font-style:italic; font-size:1.04rem; line-height:1.55;
  padding:6px 0 6px 22px; border-left:3px solid var(--gold); margin:0 0 18px; color:var(--ink-soft); }
.translit.sc-line{ font-family:var(--disp-sc); font-style:normal; font-size:1.32rem; letter-spacing:.02em; }
.translit.sc-line sup{ font-size:.6em; vertical-align:super; letter-spacing:.04em; }
.on-dark .translit, .on-red .translit{ border-left-color:var(--gold-br); color:color-mix(in srgb, var(--cream) 84%, transparent); }

/* ─────────── HERO details (quote inside a hero, 2-col hero body) ─────────── */
.hero .translit{ border-left-color:var(--gold-br); color:color-mix(in srgb, var(--cream) 84%, transparent); max-width:640px; }
.hero .sub-cols{ column-count:2; column-gap:clamp(28px,4vw,64px); max-width:940px; }
@media (max-width:720px){ .hero .sub-cols{ column-count:1; } }

/* ─────────── CENTER-LEFT / CENTER-RIGHT · Stone Course: picture TOP, cream text BOTTOM,
   monumental numeral straddling the horizontal seam — OVER the photo AND the cream ─────────── */
.wsb.center{ display:grid; grid-template-rows:auto auto; }
/* fixed height (not min-height) — otherwise a portrait img would expand the
   container by its intrinsic aspect, blowing the section vertical budget. */
.wsb.center .ws-photo{ height:clamp(340px, 45rem, 720px); }
.wsb.center .spine{ position:relative; z-index:2; gap:18px;
  padding:clamp(64px,6vw,104px) clamp(34px,5vw,80px) clamp(64px,6vw,104px); }
.wsb.center.cl .spine{ align-items:flex-start; text-align:left; }
.wsb.center.cr .spine{ align-items:flex-end;  text-align:right; }
/* stone-course body spans the full cream panel — not the 46ch reading column the bogen blocks use */
.wsb.center .ws-sub{ max-width:none; }
/* the numeral sits on the top edge of the cream (the seam) and is lifted 50% so it
   hangs up over the photo; biased to one side; z-index lifts it OVER both surfaces */
.wsb.center .sp-num.up{ position:absolute; top:0; transform:translateY(-64%); z-index:8;
  font-family:var(--disp-sc); line-height:.78; pointer-events:none;
  font-size:clamp(7rem,20vw,17rem); text-shadow:0 4px 26px color-mix(in srgb, var(--dark-cold) 60%, transparent); color:var(--red); }
.wsb.center.cl .sp-num.up{ right:clamp(24px,7vw,120px); }       /* number on the right */
.wsb.center.cr .sp-num.up{ left:clamp(24px,7vw,120px); }        /* number on the left  */
.wsb.center.cr .translit{ border-left:none; border-right:3px solid var(--gold); padding:6px 22px 6px 0; }

/* ─────────── FIXED BOTTOM NAV — .yearnav (History) + .botnav (elsewhere).
   Canonical home. Was ALSO injected by shared-header.js (which won); that
   copy has been removed, this is now the single source. ─────────── */
.yearnav, .botnav{ position:fixed; left:0; right:0; bottom:0; z-index:56;
  display:flex; flex-wrap:nowrap; align-items:center;
  border-top:1px solid color-mix(in srgb, var(--gold) 32%, transparent); padding:12px var(--pad) 13px;
  overflow-x:auto; scrollbar-width:none;
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); }
.yearnav::-webkit-scrollbar, .botnav::-webkit-scrollbar{ display:none; }
.yearnav a, .botnav a{ font-family:var(--disp-sc); font-size:clamp(1.05rem,1.6vw,1.5rem); line-height:1;
  color:color-mix(in srgb, var(--gold) 72%, transparent); padding:6px 6px; white-space:nowrap; flex:1 1 0; text-align:center; text-decoration:none;
  transition:color .2s var(--ease); text-shadow:0 1px 2px color-mix(in srgb, var(--black) 14%, transparent); }
.yearnav a:first-child, .botnav a:first-child{ text-align:left; } .yearnav a:last-child, .botnav a:last-child{ text-align:right; }
.yearnav a:hover, .botnav a:hover{ color:var(--gold-br); }
.yearnav a.lit, .botnav a.lit{ color:var(--gold-br); text-decoration:underline; text-decoration-color:var(--gold-br);
  text-underline-offset:5px; text-decoration-thickness:2px; }
/* keep the last section + footer clear of the fixed bottom nav */
body:has(.yearnav) footer.site, body:has(.botnav) footer.site{ padding-bottom:96px; }

/* keep block content clear of the fixed header/footer */
.wsb.bogen, .wsb.center{ scroll-margin-top:80px; }

@media (max-width:860px){
  .wsb.bogen.left, .wsb.bogen.right{ grid-template-columns:1fr; }
  .wsb.bogen .ws-photo, .wsb.center .ws-photo{ min-height:340px; }
  .wsb.bogen.right .spine{ order:0; }
  .wsb.center .sp-num.up{ font-size:clamp(5rem,24vw,9rem); }
}
@media (max-width:720px){
  .yearnav a, .botnav a{ flex:0 0 auto; text-align:center; font-size:clamp(1.05rem,4vw,1.3rem); padding:6px 15px; }
  .yearnav a:first-child, .botnav a:first-child, .yearnav a:last-child, .botnav a:last-child{ text-align:center; }
}
@media (prefers-reduced-motion:reduce){
  .wsb .ws-photo img{ transform:none !important; }
}

/* ============================================================
   WINE — editorial alternating rows, one .wsb variant.
   Reuses .ws-photo/.spine/.ws-line/.ws-kick/.ws-sub from the shared block
   vocabulary. Wine-only decor: .ws-gloss, .ws-flav, .ws-chip.
   ============================================================ */
.wlist{ margin-top:clamp(40px,6vh,72px); }
.wsb.wine{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,88px);
  align-items:center; padding:clamp(46px,7vh,92px) 0; border-top:1px solid var(--rule-lt); }
.wsb.wine:first-child{ border-top:none; padding-top:0; }
.wsb.wine.flip .ws-photo{ order:2; }
.wsb.wine .ws-photo.bottle img{ position:static; aspect-ratio:4/5; object-fit:contain; background:transparent; }

/* wine-variant overrides on the shared classes (dark ground, tighter typography) */
.wsb.wine .ws-line{ font-family:var(--disp); font-size:clamp(2.2rem,4.6vw,3.7rem);
  line-height:.98; letter-spacing:-.005em; color:var(--cream); }
.wsb.wine .ws-line em{ font-style:italic; color:var(--gold-br); }
.wsb.wine .ws-kick{ color:var(--gold-br); margin:0 0 18px; }
.wsb.wine .ws-sub{ font-family:var(--serif); font-size:19px; line-height:1.7;
  color:color-mix(in srgb, var(--cream) 76%, transparent); margin:0 0 26px; max-width:48ch; }
.wsb.wine .ws-sub strong{ color:var(--gold-br); font-weight:700; }

/* wine-only decor — the gloss, flavour line, and chip strip */
.ws-gloss{ display:block; font-family:var(--disp); font-style:italic; font-size:.4em;
  letter-spacing:0; color:var(--gold-br); margin-top:12px; }
.ws-flav{ font-family:var(--disp); font-style:italic; line-height:1.45;
  font-size:clamp(1.05rem,1.7vw,1.35rem); color:var(--gold-br); margin:22px 0 18px; }
.ws-chips{ display:flex; flex-wrap:wrap; gap:9px; }
.ws-chip{ font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; padding:6px 11px; border:1px solid var(--gold-br); color:var(--gold-br); }
.ws-chip.solid{ background:var(--red); border-color:var(--red); color:var(--cream); }

@media (max-width:860px){
  .wsb.wine{ grid-template-columns:1fr; gap:30px; padding:clamp(40px,6vh,60px) 0; }
  .wsb.wine.flip .ws-photo{ order:0; }
}

/* ============================================================
   STATS COUNTER — production-register count-up band (4 figures)
   ============================================================ */
.stats-band{ background:var(--ink); padding:clamp(46px,6.5vh,74px) 0; }
.stats-inner{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.stats-row{ display:grid; grid-template-columns:repeat(4,1fr); align-items:start; }
.stat-block{ text-align:center; padding:0 clamp(12px,1.6vw,26px); border-right:1px solid color-mix(in srgb, var(--gold) 30%, transparent); }
.stat-block:last-child{ border-right:none; }
/* fixed-height number zone, baseline-aligned — all four labels share one baseline */
.stat-number{ display:flex; align-items:flex-end; justify-content:center;
  min-height:clamp(50px,6.6vw,80px); white-space:nowrap;
  font-family:var(--disp); line-height:.9;
  font-size:clamp(2.5rem,3.6vw,4.2rem); color:var(--cream); letter-spacing:-.01em; }
.stat-label{ display:block; margin:16px auto 0; max-width:210px; font-family:var(--mono);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; line-height:1.55; color:var(--gold-br); }
@media(max-width:880px){ .stats-row{ grid-template-columns:repeat(2,1fr); row-gap:48px; } .stat-block:nth-child(2n){ border-right:none; } }
@media(max-width:430px){ .stats-row{ grid-template-columns:1fr; row-gap:40px; } .stat-block{ border-right:none; } }

/* .stats-band.three — 3-column variant for the ranking counter inside a today block.
   Same design language as the 4-col production band; only column count differs. */
.stats-band.three .stats-row{ grid-template-columns:repeat(3,1fr); }
@media(max-width:880px){ .stats-band.three .stats-row{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:430px){ .stats-band.three .stats-row{ grid-template-columns:1fr; } }

/* .stats-band nested inside a .wsb.center spine — drop the ink bg, add gold rules
   top+bottom (matches the canonical .standings from Ralph's screenshot reference).
   The spine is a flex column with align-items:flex-start, so the band must be
   width:100% to span the spine — otherwise it collapses to intrinsic width. */
.wsb.center .stats-band{ background:transparent; width:100%;
  padding:clamp(18px,2vw,26px) 0;
  margin-top:clamp(28px,3vw,42px);
  border-top:2px solid var(--gold-br);
  border-bottom:2px solid var(--gold-br); }
/* nested — the row spans the full band, no inherited page-wrap constraints */
.wsb.center .stats-band .stats-inner{ max-width:none; padding:0; }

/* ─────────── ROOMS — a block's cream text-panel flips to a dark ground (indigo-footer
   or red-dark) with gold accents. Unscoped: applies to .wsb.bogen, .wsb.center and heroes.
   Canonical home — was triplicated + specificity-drifted across index / history / Cellar inline. ─────────── */
/* dark ground is per block type: bogen → warm brown (beside the sepia documents),
   stone-course → cold indigo (the full panel below the photo — warm looks awful there) */
.room-indigo .spine{ color:var(--cream); }
.wsb.bogen.room-indigo .spine{ background:var(--dark-warm); }
.wsb.center.room-indigo .spine{ background:var(--indigo); }
.wsb.center.room-indigo.deep .spine{ background:var(--indigo-dark); }   /* TODAY blocks — the deeper ground */
.room-red .spine{ background:var(--red-dark); color:var(--cream); }
.room-red.hero{ background:var(--red-dark); }
.room-indigo .ws-kick, .room-red .ws-kick{ color:var(--gold-br); }
.room-indigo .ws-line, .room-red .ws-line{ color:var(--cream); }
.room-indigo .ws-line em, .room-red .ws-line em{ color:var(--gold-br); }
/* body italics on dark grounds take the brighter gold */
.room-indigo .ws-sub em, .room-indigo .ws-sub i, .room-red .ws-sub em, .room-red .ws-sub i,
.on-dark .ws-sub em, .on-red .ws-sub em, .hero .sub em, .hero .sub i{ color:var(--gold-br); }
.room-indigo .ws-sub, .room-red .ws-sub{ color:color-mix(in srgb, var(--cream) 87%, transparent); }
.room-indigo .ws-reg, .room-red .ws-reg{ color:color-mix(in srgb, var(--cream) 72%, transparent); }
.room-indigo .ws-reg b, .room-red .ws-reg b{ color:var(--gold-br); }
.room-indigo .translit, .room-red .translit{ border-left-color:var(--gold-br); color:color-mix(in srgb, var(--cream) 85%, transparent); }
.room-indigo.center.cr .translit, .room-red.center.cr .translit{ border-right-color:var(--gold-br); }
/* center monumental numeral: gold on a room ground (must out-specify .wsb.center .sp-num.up's cream-ground red) */
.room-indigo.center .sp-num.up, .room-red.center .sp-num.up{ color:var(--gold-br); }
.room-indigo .u-close, .room-red .u-close{ color:var(--cream); }
.room-indigo .u-close em, .room-red .u-close em{ color:var(--gold-br); }
.room-indigo .u-zivjeli, .room-red .u-zivjeli{ color:var(--gold-br); }

/* .u-close + .u-zivjeli — closing typography inside a today block.
   Italic deadpan line + Živjeli flourish. Hoisted from Barbazza Winery's
   inline #record scope so both pages render identically. */
.u-close{ font-family:var(--disp); font-style:italic; font-size:clamp(1.1rem, 1.45vw, 1.4rem);
  line-height:1.5; color:var(--ink); margin-top:18px; max-width:none; }
.u-close em{ color:var(--gold); font-style:italic; }
.u-zivjeli{ font-family:var(--disp); font-style:italic;
  font-size:64px; color:var(--gold); margin-top:14px; }

/* ============================================================
   4-STEP PROCESS — image-led plates with mono step numbers
   ============================================================ */
.process{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,26px); margin-top:clamp(36px,5vw,64px); }
.pstep .pimg{ position:relative; border:2px solid var(--ink); overflow:hidden; aspect-ratio:3/4; background:var(--indigo-dark); }
.pstep .pimg img{ width:100%; height:100%; object-fit:cover; filter:contrast(1.04) saturate(1.02); }
.pstep .pnum{ position:absolute; top:0; left:0; z-index:2; background:var(--red); color:var(--cream);
  font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:.14em; padding:6px 12px; }
.pstep h4{ font-family:var(--disp); font-size:1.3rem; line-height:1.08; margin:16px 0 8px; }
.pstep p{ font-family:var(--mono); font-size:12px; line-height:1.6; color:var(--ink-soft); }
@media(max-width:880px){ .process{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .process{ grid-template-columns:1fr; } }

/* ============================================================
   SUMMONS — shared red visit/summons ground (index + The Cellar)
   ============================================================ */
.summons{ background:var(--red-dark); color:var(--cream); }
.summons h2 em{ color:var(--gold-br); }

/* ============================================================
   PLATE — a bordered grid of 2–4 portrait entries (photo · name ·
   role · body) with an optional roster strip beneath. Entries may
   be static (<div>) or linked (<a class="plate-entry" href>). Set
   data-entries="2"|"4" for column count (default 3). First used for
   Article V (Personnel) and the Record's two ways in.
   ============================================================ */
/* Grid rules scoped to plates that hold .plate-entry cards — so the older
   photo-frame .plate (single img + .cap) is never turned into a grid. */
.plate:has(> .plate-entry){ display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  background:var(--ink); margin-top:52px; border:3px solid var(--ink); }
.plate:has(> .plate-entry):has(+ .plate-roster){ border-bottom:none; }   /* a following roster completes the frame */
.plate[data-entries="2"]{ grid-template-columns:repeat(2,1fr); }
.plate[data-entries="2"] .plate-img{ aspect-ratio:3/2; }   /* 2-up: wide columns, so keep the images low, not tall */
.plate[data-entries="4"]{ grid-template-columns:repeat(4,1fr); }
@media(max-width:820px){ .plate:has(> .plate-entry){ grid-template-columns:1fr; } }
.plate-entry{ background:var(--cream-2); display:flex; flex-direction:column; color:inherit; text-decoration:none; }
a.plate-entry{ transition:transform .2s var(--ease); }
a.plate-entry:hover{ transform:translateY(-4px); }
.plate-img{ aspect-ratio:1/1; overflow:hidden; border-bottom:2px solid var(--ink); }
.plate-img img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(.12) sepia(.06) contrast(1.04); }
.plate-body{ padding:26px 26px 30px; flex:1; }
.plate-name{ font-family:var(--disp); font-size:1.7rem; line-height:1; color:var(--ink); }
.plate-role{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; color:var(--gold); margin:9px 0 14px; text-transform:uppercase; }
.plate-bio{ font-family:var(--serif); font-size:19px; line-height:1.6; color:var(--ink-soft); }
.plate-bio em{ font-style:italic; color:var(--gold); }
.plate-roster{ background:var(--indigo-dark); color:color-mix(in srgb, var(--cream) 82%, transparent);
  border:3px solid var(--ink); border-top:none;
  padding:30px clamp(24px,4vw,44px); font-family:var(--mono); font-size:13px; line-height:1.7; }
.plate-roster strong{ color:var(--gold-br); font-weight:700; }

/* ============================================================
   FAT-FOOTER
   ============================================================ */
footer.site{ background:var(--dark-cold); color:color-mix(in srgb, var(--cream) 70%, transparent); padding:52px var(--pad) 40px; }
footer.site .ftop{ display:grid; grid-template-columns:1.4fr 0.9fr 1.1fr; gap:40px; align-items:start; }
footer.site .word{ height:30px; width:auto; margin-bottom:16px; }
footer.site .ftag{ max-width:380px; font-size:15px; line-height:1.6; margin:0 0 4px; }
footer.site .fcol h5{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-br); margin:0 0 14px; }
footer.site .fcol a, footer.site .fcol p{ display:block; font-size:15px; margin:0 0 8px; color:color-mix(in srgb, var(--cream) 72%, transparent); }
footer.site .fcol a:hover{ color:var(--gold-br); }
footer.site .fbot{ margin-top:42px; padding-top:22px; border-top:1px solid var(--rule-lt);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; color:color-mix(in srgb, var(--cream) 55%, transparent); }
footer.site .qmark{ border:1.5px solid var(--gold-br); color:var(--gold-br); padding:5px 11px; letter-spacing:.14em; }
/* contact block, map, live FB feed, Google rating */
footer.site .fcontact{ display:grid; gap:7px; margin:14px 0 18px; }
footer.site .fcontact a{ margin:0; width:fit-content; }
footer.site .fmap{ margin-top:4px; border-radius:8px; overflow:hidden;
  border:1px solid color-mix(in srgb, var(--gold) 26%, transparent); line-height:0; }
footer.site .fmap iframe{ display:block; width:100%; height:170px; border:0;
  filter:grayscale(.12) contrast(.96); }
footer.site .ffeed{ margin-top:28px; max-width:360px; }
footer.site .ffeed h5{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-br); margin:0 0 12px; }
/* latest Facebook post — our own card (post visible immediately, no FB chrome) */
footer.site .ffpost{ display:block; max-width:360px; text-decoration:none; border:1px solid var(--rule-lt);
  border-radius:7px; overflow:hidden; background:color-mix(in srgb, var(--cream) 3%, transparent);
  transition:border-color .2s var(--ease), transform .2s var(--ease); }
footer.site .ffpost:hover{ border-color:var(--gold-br); transform:translateY(-2px); }
footer.site .ffpost-media{ display:block; position:relative; aspect-ratio:760/460; overflow:hidden; }
footer.site .ffpost-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease); }
footer.site .ffpost:hover .ffpost-media img{ transform:scale(1.04); }
footer.site .ffpost-body{ display:block; padding:14px 16px 15px; }
footer.site .ffpost-meta{ display:flex; align-items:center; gap:6px; margin-bottom:7px; }
footer.site .ffpost-fb{ color:var(--gold-br); flex:none; }
footer.site .ffpost-by{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-br); }
footer.site .ffpost-date{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:color-mix(in srgb, var(--cream) 50%, transparent); }
footer.site .ffpost-txt{ display:block; font-size:14.5px; line-height:1.5; color:color-mix(in srgb, var(--cream) 82%, transparent); margin-bottom:11px; }
footer.site .ffpost-cta{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:color-mix(in srgb, var(--cream) 72%, transparent); transition:color .15s; }
footer.site .ffpost:hover .ffpost-cta{ color:var(--gold-br); }

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } html{ scroll-behavior:auto; } }

/* ============================================================
   RESPONSIVE (footer, generic layout)
   Header/nav/langsw breakpoints live in the NAV-HEADER block above.
   Page-specific breakpoints live in each page's own stylesheet.
   ============================================================ */
@media (max-width:900px){
  body{ font-size:18px; }
  footer.site .ftop{ grid-template-columns:1fr; }
  .plate{ box-shadow:none; }
}
@media (max-width:560px){
  .navbtn{ padding:10px 14px; font-size:10.5px; letter-spacing:.16em; }
  .claim{ grid-template-columns:1fr; gap:10px; }
  .hero .herofoot{ font-size:10px; }
}

/* ============================================================
   LIGHTBOX · click any content image → full-screen (all pages).
   GPU-safe: opaque backdrop + heavy layers pulled from paint while open.
   Behaviour lives in locomotive.js (shared).
   ============================================================ */
img.zoomable{ cursor:zoom-in; }
.lightbox{ position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center;
  background:#080c14; padding:clamp(16px,4vw,56px); cursor:zoom-out; opacity:0; transition:opacity .28s var(--ease); }
.lightbox.open{ display:flex; opacity:1; }
.lightbox img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.lightbox .lb-cap{ position:absolute; left:0; right:0; bottom:max(16px,2.2vw); text-align:center;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:color-mix(in srgb, var(--cream) 70%, transparent); padding:0 24px; pointer-events:none; }
.lightbox .lb-close{ position:absolute; top:max(14px,2vw); right:max(16px,2.4vw); background:none; border:0;
  color:var(--gold-br); font-family:var(--mono); font-size:26px; line-height:1; cursor:pointer; padding:8px; z-index:2; }
@media(prefers-reduced-motion:reduce){ .lightbox{ transition:none; } }
.lightbox .lb-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  background:rgba(8,12,20,.4); border:1px solid color-mix(in srgb, var(--gold-br) 30%, transparent); color:var(--gold-br);
  font-family:var(--serif); font-size:38px; line-height:1; cursor:pointer; padding:6px 20px;
  transition:background .2s var(--ease), border-color .2s var(--ease); }
.lightbox .lb-nav:hover{ background:rgba(8,12,20,.75); border-color:var(--gold-br); }
.lightbox .lb-prev{ left:max(10px,2vw); }
.lightbox .lb-next{ right:max(10px,2vw); }
@media(max-width:600px){ .lightbox .lb-nav{ font-size:28px; padding:5px 13px; } }
/* while open: lock scroll + take the GPU-heavy layers (autoplay video + blurred header) out of paint */
html.lb-on{ overflow:hidden; }
html.lb-on .bg-video{ display:none !important; }
html.lb-on header.site{ display:none !important; }

/* ============================================================
   FEEDBACK — the "Leave word" contact form (Article VIII on index; canonical here)
   ============================================================ */
.feedback{ background:var(--indigo); color:var(--cream); }
.feedback h2 em{ color:var(--gold-br); }
.fbform{ max-width:none; margin-top:clamp(26px,3.4vw,42px); display:flex; flex-direction:column; gap:20px; }
.fb-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }
/* subject = segmented switch */
.fb-cat{ display:flex; flex-direction:column; gap:11px; }
.fb-cat .fb-tolbl{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--cream); }
.fb-switch{ display:flex; flex-wrap:wrap; gap:8px; }
.fb-opt{ position:relative; cursor:pointer; }
.fb-opt input{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.fb-opt span{ display:inline-block; font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:12px 20px; border:1px solid color-mix(in srgb, var(--cream) 22%, transparent); color:var(--cream);
  transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease); }
.fb-opt:hover span{ border-color:var(--gold-br); color:var(--gold-br); }
.fb-opt.is-on span, .fb-opt:has(input:checked) span{ background:var(--gold-br); border-color:var(--gold-br); color:var(--ink); }
.fb-opt input:focus-visible + span{ outline:2px solid var(--gold-br); outline-offset:2px; }
.fb-status{ font-family:var(--mono); font-size:12px; letter-spacing:.05em; margin:0; }
.fb-status.ok{ color:var(--gold-br); }
.fb-status.err{ color:#e98a7a; }
.fb-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media(max-width:640px){ .fb-row{ grid-template-columns:1fr; } }
.fb-field{ display:flex; flex-direction:column; gap:8px; }
.fb-field > span{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--cream); }
.fb-field input, .fb-field textarea{
  font-family:var(--serif); font-size:16px; color:var(--cream); background:color-mix(in srgb, var(--cream) 5%, transparent);
  border:1px solid color-mix(in srgb, var(--gold-br) 35%, transparent); padding:12px 14px; transition:border-color .2s var(--ease), background .2s var(--ease); }
.fb-field input:focus, .fb-field textarea:focus{ outline:none; border-color:var(--gold-br); background:color-mix(in srgb, var(--cream) 8%, transparent); }
.fb-field textarea{ resize:vertical; min-height:128px; line-height:1.55; }
.fbform .btn.solid{ align-self:flex-start; }
.fb-note{ font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:var(--cream); margin:0; }