/* ═══ BEECAT ═══════════════════════════════════════════════════════════
   Palette sampled from the actual delivered assets (magick -unique-colors),
   not eyeballed: honey gold + chocolate + warm cream.

   Deliberately avoided, per _tools/css_traps.py (failures this studio has shipped):
   · no `animation-timeline`            → reveals use IntersectionObserver instead
   · no `color-mix(var(--x),transparent)` → shipped invisible text once
   · no `aspect-ratio` + `min-height` on one element → grows the WIDTH
   · no `height: clamp(...vh...)`       → ratio swings per visitor
   · no page-level `overflow-x: clip`   → makes overflow probes report FALSE CLEAN
   · `--s-*` scale is strictly monotonic
   Also: every <img> carries width/height attrs for CLS, so each gets height:auto,
   or the attrs silently defeat the CSS ratio (shipped a 182x760 "square" grid once).
   ═══════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Bricolage Grotesque';src:url('../fonts/bricolage-latin.woff2') format('woff2');
  font-weight:200 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Bricolage Grotesque';src:url('../fonts/bricolage-latin-ext.woff2') format('woff2');
  font-weight:200 800;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Onest';src:url('../fonts/onest-latin.woff2') format('woff2');
  font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Onest';src:url('../fonts/onest-latin-ext.woff2') format('woff2');
  font-weight:100 900;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  /* Three grounds, not one wash: clean gallery white, a saturated canola band,
     and deep cocoa. A warm-cream page background was the first pass and
     `impeccable detect` correctly flagged it as the reflex "tasteful AI" surface,
     so the colour now comes from the material instead of the backdrop. */
  --paper:#FFFFFF; --paper-2:#F1E6D2; --paper-3:#E4D6BC;
  --ink:#2A1B10; --ink-2:#6B5340;
  --honey:#E8B424; --honey-band:#F0B92B; --honey-deep:#7A5406; --amber:#E89A2B;
  --cocoa:#33210F; --cocoa-2:#4A3524;

  --ff-d:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  --ff-b:'Onest',ui-sans-serif,system-ui,sans-serif;

  /* strictly monotonic */
  --s-1:.5rem; --s-2:.75rem; --s-3:1rem; --s-4:1.5rem; --s-5:2rem;
  --s-6:3rem; --s-7:4.5rem; --s-8:7rem; --s-9:10rem;

  --wrap:78rem; --r:18px;
  --ease:cubic-bezier(.16,.84,.34,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ff-b);font-weight:400;font-size:clamp(1rem,.94rem + .3vw,1.15rem);
  line-height:1.6;-webkit-font-smoothing:antialiased;
}
img,video{display:block;max-width:100%;height:auto}
h1,h2,h3{margin:0;font-family:var(--ff-d);font-weight:800;line-height:.95;letter-spacing:-.02em}
p{margin:0}
a{color:inherit}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:var(--s-2) var(--s-3);z-index:99}
.skip:focus{left:var(--s-3);top:var(--s-3)}
:focus-visible{outline:3px solid var(--honey-deep);outline-offset:3px;border-radius:4px}

.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}

/* ── type ─────────────────────────────────────────── */
.eyebrow{font-family:var(--ff-d);font-weight:700;font-size:.78rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--honey-deep);margin-bottom:var(--s-3)}
.eyebrow--light{color:var(--honey)}
.h2{font-size:clamp(2.4rem,1.5rem + 4.2vw,5rem);font-variation-settings:'wdth' 88,'opsz' 96}
.h2--light{color:var(--paper)}
.h3{font-size:clamp(1.35rem,1.1rem + .9vw,1.9rem);font-variation-settings:'wdth' 92}
.lede{font-size:clamp(1.25rem,1rem + 1.1vw,1.85rem);line-height:1.4;font-weight:500;text-wrap:pretty}
.note{margin-top:var(--s-3);color:var(--ink-2);max-width:46ch;text-wrap:pretty}
.note--light{color:#D8C9B2}

/* ── hero ─────────────────────────────────────────── */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;
  align-items:flex-end;overflow:hidden;background:var(--cocoa);isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__video{width:100%;height:100%;object-fit:cover}
.hero__wash{position:absolute;inset:0;
  /* the wordmark sits over live video and lands on bright white fur on some
     frames; this floor keeps it legible regardless of where the loop is. */
  background:linear-gradient(to top,rgba(24,14,6,.93) 0%,rgba(24,14,6,.80) 20%,rgba(24,14,6,.46) 42%,rgba(24,14,6,.06) 70%,rgba(24,14,6,.26) 100%)}
.hero__body{position:relative;z-index:1;width:min(100% - 2.5rem,var(--wrap));
  margin-inline:auto;padding-block:var(--s-6) clamp(4rem,10vh,7rem)}
.wordmark{
  font-size:clamp(4.2rem,1rem + 18vw,15rem);color:var(--paper);
  font-variation-settings:'wdth' 79,'opsz' 96;letter-spacing:-.035em;
  text-shadow:0 4px 40px rgba(20,12,4,.35)}
.hero__line{margin-top:var(--s-3);color:var(--paper);font-size:clamp(1.1rem,.9rem + 1vw,1.7rem);
  font-weight:500;max-width:24ch;text-wrap:balance}

.sound{position:absolute;z-index:2;right:var(--s-4);top:var(--s-4);display:inline-flex;
  align-items:center;gap:.55rem;padding:.6rem .95rem;border-radius:999px;cursor:pointer;
  font-family:var(--ff-b);font-size:.82rem;font-weight:600;color:var(--paper);
  background:rgba(30,19,9,.5);border:1px solid rgba(251,246,234,.35);
  backdrop-filter:blur(8px);transition:background .25s var(--ease),transform .25s var(--ease)}
.sound:hover{background:rgba(30,19,9,.72);transform:translateY(-1px)}
.sound__icon{display:grid;place-items:center}
.sound .sound__wave{opacity:0;transition:opacity .2s}
.sound .sound__slash{opacity:1;transition:opacity .2s}
.sound[aria-pressed="true"] .sound__wave{opacity:1}
.sound[aria-pressed="true"] .sound__slash{opacity:0}

.cue{position:absolute;z-index:2;left:50%;bottom:var(--s-4);translate:-50% 0;
  width:26px;height:42px;border:2px solid rgba(251,246,234,.5);border-radius:14px;display:grid;place-items:start center;padding-top:7px}
.cue span{width:4px;height:8px;border-radius:2px;background:var(--paper);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}70%{opacity:1;transform:translateY(12px)}100%{opacity:0;transform:translateY(14px)}}

/* ── sections ─────────────────────────────────────── */
.sect{padding-block:clamp(4rem,9vw,var(--s-9));padding-inline:var(--s-4);position:relative}
.sect--intro{padding-block:clamp(3rem,6vw,var(--s-7))}
.sect--dark{background:var(--cocoa);color:var(--paper)}
.sect--end{padding-top:0}
/* the canola band: colour from the material, carrying the intro */
.sect--honey{background:var(--honey-band);color:var(--ink)}
.sect--honey .eyebrow{color:var(--ink)}
.sect--honey .stats{border-top-color:rgba(42,27,16,.28)}
.sect--honey .stat{border-bottom-color:rgba(42,27,16,.28)}
.sect--honey .stat dt{color:#5C4212}
.head{max-width:52rem}
.head--center{margin-inline:auto;text-align:center}
.head--center .note{margin-inline:auto}

.grid-intro{display:grid;gap:clamp(2rem,5vw,var(--s-7));align-items:start;
  grid-template-columns:1fr}
@media(min-width:900px){.grid-intro{grid-template-columns:1.35fr .85fr}}

.stats{margin:0;display:grid;gap:0;border-top:2px solid var(--paper-3)}
.stat{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);
  padding:var(--s-3) var(--s-2);border-bottom:2px solid var(--paper-3)}
.stat dt{font-family:var(--ff-d);font-weight:700;font-size:.8rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2)}
.stat dd{margin:0;font-family:var(--ff-d);font-weight:700;font-size:1.05rem;text-align:right;
  font-variation-settings:'wdth' 90}

/* ── plates ───────────────────────────────────────── */
.plate{margin:0}
.plate img,.plate video{width:100%;border-radius:var(--r);
  box-shadow:0 22px 48px -26px rgba(42,27,16,.5)}
.plate--bleed{margin-block:clamp(2rem,5vw,var(--s-7));padding-inline:clamp(1rem,3vw,var(--s-5))}
.plate--bleed img{border-radius:clamp(12px,2vw,26px)}
.plate figcaption{margin-top:var(--s-3);font-size:.9rem;color:var(--ink-2);text-wrap:pretty}
.sect--dark .plate figcaption{color:#D8C9B2}
.plate--film video{background:var(--cocoa)}

.pair{margin-top:clamp(2rem,5vw,var(--s-6));display:grid;gap:clamp(1.5rem,4vw,var(--s-6));
  grid-template-columns:1fr;align-items:start}
@media(min-width:820px){
  .pair{grid-template-columns:1.25fr .75fr}
  .pair--sticker{grid-template-columns:1fr 1fr}
}

/* ── duties ───────────────────────────────────────── */
.duties{list-style:none;margin:clamp(2.5rem,6vw,var(--s-7)) 0 0;padding:0;
  display:grid;gap:clamp(3rem,7vw,var(--s-8))}
.duty{display:grid;gap:clamp(1.25rem,3vw,var(--s-5));align-items:center;grid-template-columns:1fr}
@media(min-width:820px){
  .duty{grid-template-columns:1.15fr .85fr}
  .duty--flip .plate{order:2}
}
.duty__text{border-top:3px solid var(--honey);padding-top:var(--s-3)}
.duty__text p{margin-top:var(--s-2);color:var(--ink-2);max-width:38ch;text-wrap:pretty}

/* ── divider ──────────────────────────────────────── */
.divider{position:relative;height:60px;overflow:hidden}
.divider__svg{width:100%;height:60px;display:block}
.divider__path{fill:none;stroke:var(--paper-3);stroke-width:2;stroke-dasharray:7 9;stroke-linecap:round}
.divider__bee{position:absolute;top:6px;left:0;display:block;will-change:transform}

/* ── footer ───────────────────────────────────────── */
.foot{background:var(--cocoa);color:var(--paper);padding-block:clamp(3rem,7vw,var(--s-8))}
.foot__in{display:grid;gap:var(--s-3);justify-items:center;text-align:center}
.foot__mark{font-family:var(--ff-d);font-weight:800;font-size:clamp(2.5rem,8vw,5rem);
  font-variation-settings:'wdth' 80,'opsz' 96;letter-spacing:-.03em;line-height:1}
.foot__note{color:#D8C9B2;max-width:44ch;text-wrap:pretty}
.foot__meta a{color:var(--honey);text-underline-offset:4px}

/* ── reveal (JS-gated so no-JS still shows everything) ─ */
.js .reveal{opacity:0;transform:translateY(22px);
  transition:opacity .75s var(--ease),transform .75s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .cue span{animation:none}
  .divider__bee{display:none}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}