/* ==========================================================================
   Steven Halpern — Inner Peace Music
   Vibe: Soft Structuralism (white, airy, floating, diffused ambient light)
   Layout: Asymmetrical Bento (categories) · refined-in-place elsewhere

   Direction: "White gallery, luminous objects." The client's photography is
   near-black; rather than bleaching it or darkening the site, dark imagery is
   framed as objects floating in generous white space — album art on a gallery
   wall. Display type is massive in scale but LIGHT in weight: house evidence
   in this niche shows bold/serif display reads as dated, thin geometric sans
   reads as elegant.
   ========================================================================== */

/* ================ Fonts ================ */
/* Display: Jost (variable 200–500) — geometric, modernist, calm */
@font-face{
  font-family:Jost;font-style:normal;font-weight:200 500;font-display:swap;
  src:url(../fonts/jost-var-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Body: Figtree — retained from the brand, highly legible */
@font-face{font-family:Figtree;font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/figtree-400.woff2) format("woff2")}
@font-face{font-family:Figtree;font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/figtree-500.woff2) format("woff2")}
@font-face{font-family:Figtree;font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/figtree-600.woff2) format("woff2")}
@font-face{font-family:Figtree;font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/figtree-700.woff2) format("woff2")}
@font-face{font-family:Figtree;font-weight:400;font-style:italic;font-display:swap;src:url(../fonts/figtree-400i.woff2) format("woff2")}

/* ================ Tokens ================ */
:root{
  /* Surfaces — warm white, spiritual register */
  --paper:#FFFFFF;
  --paper-warm:#FBF9F5;
  --mist:#F8F6F1;
  --footer-bg:#F4F1EA;
  --quiet-deep:#5A6570;
  --tone-fade:64px;

  /* Ink — all verified against WCAG AA on white */
  --ink:#0C1013;      /* display type      ~19:1 */
  --slate:#454F58;    /* body              ~8.4:1 */
  --quiet:#6B7680;    /* secondary         ~4.6:1  (fixes the old 4.24 failure) */

  /* Brand — client's committed blue, retained */
  --cyan:#007FAE;
  --cyan-deep:#005E82; /* text links — darker for small-text contrast */
  --cyan-wash:rgba(0,127,174,.06);

  /* Signature accent — sampled from the golden waveform in the client's own
     category artwork. Used ONLY for the waveform motif. One accessory. */
  --gold:#C79A4B;

  /* Hairlines — never a flat 1px grey */
  --line:rgba(12,16,19,.08);
  --line-soft:rgba(12,16,19,.05);
  --line-strong:rgba(12,16,19,.14);

  /* Ambient light — highly diffused, never harsh */
  --shadow-rest:0 1px 2px rgba(12,16,19,.03), 0 6px 16px rgba(12,16,19,.04);
  --shadow-float:0 1px 2px rgba(12,16,19,.04), 0 10px 28px rgba(12,16,19,.055), 0 28px 68px rgba(12,16,19,.06);
  --shadow-lift:0 2px 6px rgba(12,16,19,.05), 0 18px 44px rgba(12,16,19,.08), 0 44px 96px rgba(12,16,19,.09);
  --shadow-glass:0 1px 1px rgba(12,16,19,.03), 0 8px 30px rgba(12,16,19,.07);
  /* contained: max reach ~38px, so it never crosses a section boundary */
  --shadow-panel:0 1px 2px rgba(12,16,19,.04), 0 6px 14px rgba(12,16,19,.05), 0 12px 26px rgba(12,16,19,.055);

  /* Squircle radii */
  --r-xs:10px; --r-sm:14px; --r-md:20px; --r-lg:28px; --r-xl:36px; --r-pill:999px;

  /* Layout — wider gutters, heavier breathing room */
  --page:1360px;
  --outer:clamp(24px,5vw,72px);
  --gap:clamp(18px,2.2vw,34px);
  --nav-h:64px;

  /* Rhythm — macro whitespace */
  --sp-section:clamp(68px,7vw,112px);     /* standard inner gap, all sections */
  --sp-section-end:calc(var(--sp-section) + 64px);  /* + the fade band */
  --sp-tight:var(--sp-section);           /* nothing sits tighter than standard */

  /* Type */
  --font-display:Jost,"Figtree",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-body:Figtree,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --t-hero:clamp(2.7rem,5.4vw,6.6rem);
  --t-h1:clamp(2.6rem,5.4vw,4.6rem);
  --t-h2:clamp(2rem,4vw,3.4rem);
  --t-h3:clamp(1.45rem,2.2vw,2.05rem);
  --t-quote:clamp(1.6rem,3.1vw,2.9rem);
  --t-lead:clamp(1.02rem,1.25vw,1.18rem);
  --t-body:1.0625rem;   /* 17px — retained, legible for the audience */
  --t-sm:0.9375rem;
  --t-xs:0.8125rem;
  --t-eyebrow:0.6875rem;

  /* Optical tracking — follows the size curve rather than one blanket value.
     Negative at body sizes, ~0 at the very top of the display range. */
  /* Apple's SF Pro table runs POSITIVE at display sizes, but that compensates
     for SF Pro's optical sizing (Display is drawn tighter). Jost has no optical
     sizing, so the general rule applies instead: a geometric sans spreads as it
     grows and needs tightening. Body sits near zero; small caps get the
     positive tracking, set locally on .eyebrow. */
  --track-hero:-.018em;   /* ~105px */
  --track-h1:-.014em;     /* ~74px */
  --track-h2:-.008em;     /* ~54px */
  --track-h3:-.002em;     /* ~33px */
  --track-body:-.004em;

  /* Display weight steps — thin is only safe at large sizes */
  --fw-display:200;       /* hero / h1 */
  --fw-display-mid:250;   /* h2 */
  --fw-display-sm:320;    /* h3 and smaller display */

  /* Motion — real mass, never linear */
  --ease:cubic-bezier(.32,.72,0,1);
  --ease-soft:cubic-bezier(.22,.61,.36,1);
  --d-fast:.32s; --d-med:.55s; --d-slow:.85s;
}

/* ================ Reset ================ */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{
  -webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 34px);
  color-scheme:light;
}
/* Removes the 300ms double-tap delay and the default blue flash on touch */
a,button,summary,[role="button"]{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
body{
  margin:0;background:var(--paper);color:var(--slate);
  font-family:var(--font-body);font-size:var(--t-body);font-weight:400;line-height:1.65;
  letter-spacing:var(--track-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,h6,p,figure,blockquote{margin:0}
::selection{background:var(--cyan);color:#fff}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
/* Cards carry their own radius, so a ring with a fixed 4px radius sat proud of
   the corners. Use a shadow ring that inherits the shape instead. */
.writing:focus-visible,.product-item:focus-visible,.video-card:focus-visible,
.cat:focus-visible,.press-shell:focus-visible{
  outline:none;box-shadow:var(--shadow-float),0 0 0 2px var(--cyan);
}

/* ================ Typography ================ */
.skip-link{
  position:absolute;left:16px;top:-64px;z-index:200;
  padding:12px 20px;border-radius:var(--r-pill);
  background:var(--ink);color:#fff;font-size:var(--t-sm);font-weight:500;
  transition:top var(--d-fast) var(--ease);
}
.skip-link:focus{top:16px}
#main:focus{outline:none}

.display,h1,h2,h3{
  font-family:var(--font-display);
  font-weight:200;
  color:var(--ink);
  letter-spacing:var(--track-h1);
  line-height:1.06;
  text-wrap:balance;
}
h2{font-weight:var(--fw-display-mid);letter-spacing:var(--track-h2)}
/* HIG: avoid Ultralight/Thin/Light — thin geometric sans breaks down below
   ~28px on low-DPI screens, so smaller headings step up in weight. */
h3{font-weight:var(--fw-display-sm);letter-spacing:var(--track-h3);line-height:1.2}

.eyebrow{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--font-body);
  font-size:var(--t-eyebrow);font-weight:600;
  text-transform:uppercase;letter-spacing:.2em;
  color:var(--quiet);
}
.eyebrow--pill{
  padding:7px 14px;border-radius:var(--r-pill);
  background:var(--paper);border:1px solid var(--line);
  box-shadow:var(--shadow-rest);color:var(--slate);
}
.eyebrow--ondark{color:rgba(255,255,255,.82)}

.lead{font-size:var(--t-lead);line-height:1.6;color:var(--slate)}
.muted{color:var(--quiet)}
.text-center{text-align:center}

.rte p + p{margin-top:1.15em}
.rte a{color:var(--cyan-deep);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.rte a:hover{color:var(--cyan)}
.rte strong{font-weight:600;color:var(--ink)}
.rte em{font-style:italic}

/* ================ Layout ================ */
.wrapper{max-width:var(--page);margin:0 auto;padding:0 var(--outer)}
.wrapper--narrow{max-width:840px;margin:0 auto;padding:0 var(--outer)}
.wrapper--bleed{max-width:1840px;margin:0 auto;padding-inline:clamp(20px,3.6vw,76px)}
.section{padding-block:var(--sp-section) var(--sp-section-end)}
.section--tight{padding-block:var(--sp-section) var(--sp-section-end)}
/* A section that follows a page header still owns a tone, so it needs real
   inner space — zeroing the top padding left content flush to the colour edge. */
.section--after-head{padding-top:clamp(52px,5.4vw,92px)}
.section--warm{background:var(--paper-warm)}
.section--mist{background:var(--mist)}
.section--accent{background:var(--mist)}

/* Each section is painted as a gradient that begins in the PREVIOUS section's
   tone and ends in the NEXT one's, so chapter changes read as a soft dissolve
   rather than a hard seam. The three stops are injected per section at build
   time, so reordering sections keeps the blend correct. */
section[style*="--tone-self"]{
  /* Fade at the BOTTOM edge only. Fading both edges made each section end on
     its neighbour's colour while the neighbour began on its own — the two
     gradients met out of step and drew a visible line at the seam. Handing
     off in one direction keeps the boundary continuous. */
  background:linear-gradient(to bottom,
    var(--tone-self) 0,
    var(--tone-self) calc(100% - var(--tone-fade)),
    var(--tone-to) 100%);
}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.section-head{max-width:720px;margin:0 auto clamp(38px,5vw,72px);text-align:center}
.section-head__title{font-size:var(--t-h2);margin-top:16px}
.section-head__sub{margin-top:18px;font-size:var(--t-lead);color:var(--quiet)}

/* ================ Waveform — the signature ================ */
/* Drawn from the sound-wave ribbon in the client's own hero photograph and the
   golden waveform in his category artwork. Structure, not decoration. */
.waveform{display:block;width:100%;height:34px;overflow:visible;opacity:.5}
.waveform path{
  fill:none;stroke:var(--gold);stroke-width:1.15;stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
.waveform--cyan path{stroke:var(--cyan)}
.wave-rule{
  display:flex;align-items:center;gap:22px;
  max-width:560px;margin-inline:auto;
}
.wave-rule::before,.wave-rule::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-strong),transparent);
}
.wave-rule .waveform{width:150px;flex:none}

/* Scroll progress — the waveform doubles as the reading indicator */
.scroll-line{
  position:fixed;inset:0 0 auto 0;height:2px;z-index:80;
  background:linear-gradient(90deg,var(--gold),var(--cyan));
  transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;
}

/* ================ Buttons ================ */
.btn{
  --btn-bg:var(--ink); --btn-fg:#fff; --btn-chip:rgba(255,255,255,.16);
  position:relative;display:inline-flex;align-items:center;gap:14px;
  padding:13px 13px 13px 26px;
  background:var(--btn-bg);color:var(--btn-fg);
  border-radius:var(--r-pill);
  font-family:var(--font-body);font-size:var(--t-sm);font-weight:500;
  letter-spacing:.005em;line-height:1;
  box-shadow:var(--shadow-rest);
  transition:transform var(--d-fast) var(--ease),box-shadow var(--d-fast) var(--ease),background-color var(--d-fast) var(--ease);
}
.btn__chip{
  display:grid;place-items:center;flex:none;
  width:30px;height:30px;border-radius:var(--r-pill);
  background:var(--btn-chip);
  transition:transform var(--d-fast) var(--ease),background-color var(--d-fast) var(--ease);
}
.btn__chip svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.3;fill:none}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-float)}
.btn:hover .btn__chip{transform:translate(2px,-2px) scale(1.06)}
.btn:active{transform:scale(.985)}
/* text-only pill (no chip) */
.btn--plain{padding:13px 26px;min-height:44px}

.btn--light{--btn-bg:#fff;--btn-fg:var(--ink);--btn-chip:rgba(12,16,19,.07);border:1px solid var(--line)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-chip:rgba(12,16,19,.07);border:1px solid var(--line-strong);box-shadow:none}
.btn--ghost:hover{background:var(--mist)}
.btn--glass{
  --btn-bg:rgba(255,255,255,.14);--btn-fg:#fff;--btn-chip:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
}
.btn--glass:hover{--btn-bg:rgba(255,255,255,.24)}
.btn--cyan{--btn-bg:var(--cyan);--btn-fg:#fff;--btn-chip:rgba(255,255,255,.22)}
.btn--cyan:hover{--btn-bg:var(--cyan-deep)}

.link-arrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:var(--t-sm);font-weight:500;color:var(--ink);
}
.link-arrow svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.25;fill:none;transition:transform var(--d-fast) var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}

/* ================ Floating glass nav ================ */
.nav-shell{
  position:fixed;inset:0 0 auto 0;z-index:90;pointer-events:none;
  padding:calc(18px + env(safe-area-inset-top)) calc(var(--outer) + env(safe-area-inset-right)) 0 calc(var(--outer) + env(safe-area-inset-left));
}
.nav{
  pointer-events:auto;
  max-width:var(--page);margin:0 auto;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:0 10px 0 24px;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.6);
  border-radius:var(--r-pill);
  box-shadow:var(--shadow-glass);
  transition:background-color var(--d-med) var(--ease),box-shadow var(--d-med) var(--ease),transform var(--d-med) var(--ease);
}
.nav[data-scrolled="true"]{background:rgba(255,255,255,.88);box-shadow:var(--shadow-float)}
/* Scroll edge effect: content softly resolves into the control layer instead of
   sliding under a hard band. Not decorative — it separates the two planes. */
.nav-shell::before{
  content:"";position:absolute;inset:0 0 auto 0;height:calc(var(--nav-h) + 46px);
  background:linear-gradient(to bottom,
    var(--scrim-1,rgb(255 255 255 / .92)) 0%,
    var(--scrim-2,rgb(255 255 255 / .6)) 52%,
    var(--scrim-0,rgb(255 255 255 / 0)) 100%);
  opacity:0;transition:opacity var(--d-med) var(--ease);pointer-events:none;z-index:-1;
}
.nav-shell[data-scrolled="true"]::before{opacity:1}
.nav__logo{display:flex;align-items:center;flex:none;min-height:44px}
.nav__logo img{width:206px;height:auto}
.nav__menu{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav__link{
  position:relative;padding:9px 15px;border-radius:var(--r-pill);
  font-size:var(--t-xs);font-weight:500;color:var(--ink);letter-spacing:.006em;
  transition:color var(--d-fast) var(--ease),background-color var(--d-fast) var(--ease);
}
.nav__link:hover{color:var(--ink);background:rgba(12,16,19,.045)}
.nav__item{position:relative}
.nav__dropdown{
  position:absolute;top:calc(100% + 12px);left:50%;
  transform:translateX(-50%) translateY(-6px) scale(.98);
  min-width:206px;padding:8px;
  background:rgba(255,255,255,.985);
  border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-float);
  opacity:0;visibility:hidden;pointer-events:none;filter:blur(3px);
  transition:opacity var(--d-fast) var(--ease),transform var(--d-fast) var(--ease),
             filter var(--d-fast) var(--ease),visibility var(--d-fast);
}
.nav__dropdown::before{
  content:"";position:absolute;left:0;right:0;bottom:100%;height:16px;
}
.nav__item:hover .nav__dropdown,.nav__item:focus-within .nav__dropdown{
  opacity:1;visibility:visible;pointer-events:auto;filter:blur(0);
  transform:translateX(-50%) translateY(0) scale(1);
}
.nav__dropdown a{
  display:block;padding:10px 14px;border-radius:var(--r-xs);
  font-size:var(--t-xs);font-weight:500;color:var(--slate);white-space:nowrap;
  transition:background-color var(--d-fast) var(--ease),color var(--d-fast) var(--ease);
}
.nav__dropdown a:hover{background:var(--mist);color:var(--ink)}
.nav__icons{display:flex;align-items:center;gap:2px;flex:none}
.nav__icon{
  display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r-pill);
  color:var(--slate);transition:background-color var(--d-fast) var(--ease),color var(--d-fast) var(--ease);
}
.nav__icon:hover{background:rgba(12,16,19,.045);color:var(--ink)}
.nav__icon svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.25;fill:none}
.nav__burger{display:none}
/* Two real bars so they can rotate into an X, rather than one icon swapping
   for another — the morph is the point. */
.nav__burger__box{position:relative;display:block;width:19px;height:12px}
.nav__burger__box i{
  position:absolute;left:0;width:100%;height:1.5px;border-radius:2px;
  background:currentColor;
  transition:transform var(--d-med) var(--ease),opacity var(--d-fast) var(--ease);
}
.nav__burger__box i:first-child{top:0}
.nav__burger__box i:last-child{bottom:0}
.nav__burger[aria-expanded="true"] .nav__burger__box i:first-child{transform:translateY(5.25px) rotate(45deg)}
.nav__burger[aria-expanded="true"] .nav__burger__box i:last-child{transform:translateY(-5.25px) rotate(-45deg)}

/* ================ Hero — contained cinematic panel ================ */
/* The photograph is dark; it is framed as a luminous object on white rather
   than flattened under a scrim. Gradient is directional, over the type side
   only, so the blue shirt and crystal bowl keep their richness. */
.hero{padding-top:calc(var(--nav-h) + 40px);padding-bottom:var(--sp-section-end)}
/* Same-tone neighbours: no boundary is drawn between them, so the one above
   drops its fade allowance (there is no fade to clear) and the one below drops
   its top padding. The pair then reads as a single standard gap. */
.section--joined-below{padding-bottom:var(--sp-section)}
.section--joined-above{padding-top:0}
.hero__frame{
  position:relative;overflow:hidden;
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-lift);
  isolation:isolate;
}
.hero__media{position:relative;width:100%;height:min(43.5vw,880px);max-height:78svh}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:58% 50%}
.hero__veil{
  position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 0%,transparent 28%,rgba(4,7,10,.30) 48%,rgba(4,7,10,.62) 72%,rgba(4,7,10,.74) 100%);
}
.hero__content{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:flex-end;justify-content:center;
  text-align:right;padding:0 clamp(24px,5vw,76px);color:#fff;
}
.hero__text{max-width:min(44%,760px)}
.hero__title{
  font-size:var(--t-hero);font-weight:var(--fw-display);color:#fff;
  letter-spacing:var(--track-hero);line-height:.98;margin-top:18px;
}
.hero__sub{
  margin-top:20px;font-size:var(--t-sm);font-weight:400;
  color:rgba(255,255,255,.86);letter-spacing:.01em;
}
/* Researcher / journalist line — demoted below the main credential line and
   linked to the published writing, per Steven's note. */
.hero__credit{margin-top:9px;font-size:var(--t-xs);letter-spacing:.05em}
.hero__credit a{
  color:rgba(255,255,255,.72);
  border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:2px;
  transition:color var(--d-fast) var(--ease),border-color var(--d-fast) var(--ease);
}
.hero__credit a:hover{color:#fff;border-color:rgba(255,255,255,.7)}
.hero__cta{margin-top:32px}

/* Fifty-year badge. Type on a ring rather than an image, so it stays sharp and
   needs no asset. Sits top-right where the veil is heaviest — good contrast, and
   clear of the figure at the keyboard on the left. */
.hero__badge{
  position:absolute;bottom:clamp(20px,3vw,38px);left:clamp(20px,3vw,38px);z-index:2;
  width:clamp(84px,8vw,112px);aspect-ratio:1;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:#fff;
  background:rgba(4,7,10,.42);
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.34),inset 0 0 0 4px rgba(199,154,75,.34),
             0 8px 26px rgba(4,7,10,.28);
}
.hero__badge__num{
  font-family:var(--font-display);font-weight:var(--fw-display);
  font-size:clamp(1.85rem,2.5vw,2.5rem);line-height:1;letter-spacing:-.02em;
}
.hero__badge__cap{
  margin-top:6px;font-size:clamp(.47rem,.58vw,.545rem);line-height:1.42;
  text-transform:uppercase;letter-spacing:.16em;color:var(--gold);
}
@media (prefers-reduced-transparency:reduce){
  .hero__badge{background:rgba(4,7,10,.72);backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (max-width:600px){ .hero__badge{width:74px} }

/* Accolades strip — sits tight under the hero panel as a quiet credentials
   line, not a section of its own. */
/* Steven's award sentence — the specific claim, directly under the hero. */
/* The award is the strongest single claim on the page, so it is set as a
   statement — display face, ruled marker — not as body copy on white. */
.hero-award{
  margin:clamp(34px,3.8vw,58px) auto 0;padding-inline:clamp(14px,2.2vw,44px);
  text-align:center;
}
.hero-award__rule{
  display:flex;align-items:center;justify-content:center;gap:16px;
  color:var(--gold);margin-bottom:clamp(20px,2.2vw,30px);
}
/* hairlines fade outward so the rule reads as light, not as a divider */
.hero-award__rule i{
  display:block;height:1px;width:clamp(46px,7vw,104px);
  background:linear-gradient(to right,transparent,var(--gold));opacity:.5;
}
.hero-award__rule i:last-child{background:linear-gradient(to left,transparent,var(--gold))}
.hero-award__line{
  max-width:34ch;margin-inline:auto;
  font-family:var(--font-display);font-weight:var(--fw-display-mid);
  font-size:clamp(1.16rem,1.85vw,1.62rem);line-height:1.5;
  letter-spacing:var(--track-h3);color:var(--slate);text-wrap:balance;
}
.hero-award__line em{
  display:block;margin:.18em 0;font-style:normal;
  font-size:clamp(1.42rem,2.5vw,2.15rem);font-weight:var(--fw-display-sm);
  line-height:1.16;letter-spacing:var(--track-h2);color:var(--ink);
}
@media (max-width:620px){ .hero-award__line em{margin:.3em 0} }

/* ================ Why it works ================ */
/* Five parallel mechanisms in a 4-column bento: the signature idea takes a
   double-width card, the rest pair off. Each card leads with a diagram that
   actually depicts its mechanism, so the visual carries the explanation and
   the copy can stay to a line. */
.why__grid{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(12px,1.1vw,18px);
}
.why__item{
  display:flex;flex-direction:column;
  padding:7px;border-radius:var(--r-md);
  background:var(--paper);border:1px solid var(--line-soft);
  box-shadow:var(--shadow-rest);
  transition:transform var(--d-med) var(--ease),box-shadow var(--d-med) var(--ease);
}
.why__item:hover{transform:translateY(-4px);box-shadow:var(--shadow-float)}

.why__viz{
  position:relative;display:grid;place-items:center;
  height:clamp(74px,6vw,92px);
  border-radius:calc(var(--r-md) - 7px);
  background:linear-gradient(170deg,var(--mist),var(--paper-warm));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.9),inset 0 0 0 1px var(--line-soft);
  overflow:hidden;
}
.why__viz svg{width:88%;height:auto;overflow:visible}
.why__viz .ln{fill:none;stroke:var(--ink);stroke-width:1.1;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.32}
.why__viz .gold{stroke:var(--gold);stroke-width:1.6;opacity:1}
.why__viz .faint{opacity:.16}
.why__viz .tick{stroke:var(--ink);stroke-width:1.1;opacity:.28;stroke-linecap:round;vector-effect:non-scaling-stroke}
.why__viz text{font-family:var(--font-body);font-size:7px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;fill:var(--quiet)}

.why__body-wrap{padding:16px 13px 6px;display:flex;flex-direction:column;flex:1}
.why__title{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(.98rem,1.05vw,1.1rem);line-height:1.22;
  letter-spacing:var(--track-h3);color:var(--ink);
}
.why__body{margin-top:7px;font-size:var(--t-xs);line-height:1.5;color:var(--quiet)}

.why__note{
  margin-top:clamp(30px,3.4vw,52px);padding-top:26px;border-top:1px solid var(--line);
  display:flex;gap:clamp(20px,4vw,60px);flex-wrap:wrap;
  align-items:baseline;justify-content:center;
}
.why__stat{display:flex;gap:12px;align-items:baseline}
/* why 1975 didn't land — the timing story behind the first-album claim */
.why__timing{
  margin:clamp(22px,2.4vw,34px) auto 0;max-width:70ch;text-align:center;
  font-size:var(--t-sm);line-height:1.65;color:var(--quiet-deep);text-wrap:balance;
}
.why__timing a{
  display:inline-block;margin-left:.35em;color:var(--cyan-deep);
  border-bottom:1px solid var(--cyan-wash);padding-bottom:1px;
  transition:border-color var(--d-fast) var(--ease);
}
.why__timing a:hover{border-color:var(--cyan-deep)}
.why__stat b{
  font-family:var(--font-display);font-weight:var(--fw-display-mid);
  font-size:clamp(1.5rem,2.2vw,2rem);color:var(--ink);
  letter-spacing:var(--track-h2);font-variant-numeric:tabular-nums;
}
.why__stat span{font-size:var(--t-xs);color:var(--quiet);max-width:16ch;line-height:1.4}

@media (max-width:1180px){ .why__grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:820px){ .why__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .why__grid{grid-template-columns:1fr} }

/* ── Accent band: light beige, so the cards read as white on warm ───────── */
.section--accent .why__item{
  background:var(--paper);border-color:var(--line-soft);
  box-shadow:0 1px 2px rgba(12,16,19,.04),0 8px 22px rgba(12,16,19,.05);
}
.section--accent .why__item:hover{box-shadow:var(--shadow-float)}
.section--accent .why__viz{background:linear-gradient(170deg,var(--paper-warm),var(--mist))}

/* ================ Awards ================ */
.awards__grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(30px,5vw,80px);
  max-width:1060px;margin-inline:auto;
}
.award{
  display:flex;gap:clamp(18px,2vw,30px);align-items:baseline;
  padding:22px 0;border-top:1px solid var(--line);
}
.award__year{
  flex:none;width:4.5ch;
  font-family:var(--font-display);font-weight:var(--fw-display-mid);
  font-size:clamp(1.05rem,1.4vw,1.3rem);color:var(--gold);
  letter-spacing:var(--track-h3);font-variant-numeric:tabular-nums;
}
.award__name{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.02rem,1.25vw,1.18rem);line-height:1.3;
  letter-spacing:var(--track-h3);color:var(--ink);
}
.award__detail{margin-top:6px;font-size:var(--t-xs);line-height:1.5;color:var(--quiet)}
.awards__lead{
  max-width:640px;margin:0 auto clamp(34px,4vw,56px);text-align:center;
}

/* ================ Writings ================ */
.writings-rail{
  display:grid;grid-auto-flow:column;
  padding:14px 6px 24px;margin:-14px -6px -24px;
  grid-auto-columns:clamp(240px,26vw,320px);
  gap:var(--gap);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;
}
.writings-rail::-webkit-scrollbar{display:none}
.writing{
  scroll-snap-align:start;
  display:flex;flex-direction:column;gap:10px;
  min-height:190px;padding:26px;
  border-radius:var(--r-md);background:var(--paper);
  border:1px solid var(--line-soft);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.9),0 1px 2px rgba(12,16,19,.04),0 8px 22px rgba(12,16,19,.05);
  transition:transform var(--d-med) var(--ease),box-shadow var(--d-med) var(--ease);
}
.writing:hover{transform:translateY(-4px);box-shadow:var(--shadow-float)}
.writing:active{transform:translateY(-1px) scale(.995)}
.writing__year{
  font-size:var(--t-eyebrow);font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);
}
.writing__title{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.08rem,1.35vw,1.28rem);line-height:1.28;
  letter-spacing:var(--track-h3);color:var(--ink);
}
.writing__go{
  margin-top:auto;display:inline-flex;align-items:center;gap:.5em;
  font-size:var(--t-eyebrow);font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--quiet);
}
.writing__go svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.3;fill:none;transition:transform var(--d-fast) var(--ease)}
.writing:hover .writing__go svg{transform:translateX(4px)}
.writings-wall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}

/* video rail on the homepage reuses the draggable rail behaviour */
.video-rail{
  display:grid;grid-auto-flow:column;
  padding:14px 6px 24px;margin:-14px -6px -24px;
  grid-auto-columns:clamp(280px,30vw,420px);
  gap:var(--gap);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;
}
.video-rail::-webkit-scrollbar{display:none}
.video-rail > .video-card{scroll-snap-align:start;grid-column:auto}
@media (hover:hover) and (pointer:fine){
  .writings-rail[data-rail],.video-rail[data-rail]{cursor:grab}
  .writings-rail[data-rail].is-dragging,.video-rail[data-rail].is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
  .writings-rail[data-rail].is-dragging *,.video-rail[data-rail].is-dragging *{pointer-events:none;user-select:none}
}

@media (max-width:900px){
  .awards__grid{grid-template-columns:1fr}
  .writings-wall{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){ .writings-wall{grid-template-columns:1fr} }

/* ================ Quote ================ */
/* Same tray-and-plate construction as the newsletter, so the two "stated"
   moments on the page read as the same kind of object. */
.quote__shell{
  max-width:880px;margin-inline:auto;
  padding:9px;border-radius:var(--r-xl);
  background:var(--mist);border:1px solid var(--line-soft);
  box-shadow:var(--shadow-panel);
}
.quote__panel{
  border-radius:calc(var(--r-xl) - 9px);
  background:var(--paper);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.9),inset 0 0 0 1px var(--line-soft);
  --quote-pad-y:clamp(46px,6.4vw,76px);
  padding:var(--quote-pad-y) clamp(24px,5vw,64px);
  text-align:center;
}
.quote__mark{
  display:block;width:38px;height:38px;margin:0 auto 22px;
  color:var(--gold);opacity:.85;
}
.quote__text{
  margin-inline:auto;text-align:center;text-wrap:balance;
  font-family:var(--font-display);font-size:clamp(1.24rem,2.05vw,1.72rem);
  font-weight:var(--fw-display-mid);
  line-height:1.34;letter-spacing:var(--track-h2);color:var(--ink);
}
.quote__line{display:block;text-wrap:balance}
.quote__line + .quote__line{margin-top:.28em}
.quote__line--strong{font-weight:500;color:var(--ink)}
.quote__cite{margin-top:32px;text-align:center;font-size:var(--t-body);color:var(--ink);font-weight:500}
.quote__cite small{display:block;margin-top:8px;font-size:var(--t-sm);color:var(--quiet);font-weight:400}

/* ================ Product rail ================ */
.rail__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:26px;
  margin-bottom:clamp(30px,4vw,54px);flex-wrap:wrap;
}
.rail__tabs{display:inline-flex;gap:5px;padding:5px;background:var(--mist);border-radius:var(--r-pill)}
.rail__tab{
  display:inline-flex;align-items:center;min-height:44px;
  padding:10px 20px;border-radius:var(--r-pill);
  font-size:var(--t-xs);font-weight:500;color:var(--quiet);
  transition:background-color var(--d-fast) var(--ease),color var(--d-fast) var(--ease),box-shadow var(--d-fast) var(--ease);
}
.rail__tab:hover{color:var(--ink)}
.rail__tab[aria-selected="true"]{background:var(--paper);color:var(--ink);box-shadow:var(--shadow-rest)}
.rail__nav{display:flex;gap:8px}
.rail__arrow{
  display:grid;place-items:center;width:42px;height:42px;border-radius:var(--r-pill);
  border:1px solid var(--line);color:var(--ink);background:var(--paper);
  transition:transform var(--d-fast) var(--ease),box-shadow var(--d-fast) var(--ease),background-color var(--d-fast) var(--ease);
}
.rail__arrow:hover{box-shadow:var(--shadow-float);transform:translateY(-1px)}
.rail__arrow:active{transform:scale(.94)}
.nav__link:active,.nav__icon:active,.nav__burger:active{transform:scale(.94)}
.rail__tab:active{transform:scale(.97)}
.variant-btn:active,.collection-sort:active{transform:scale(.98)}
.product-item:active .product-item__shell,
.cat:active,.video-card:active .video-card__shell,.press-item:active{transform:translateY(-2px) scale(.995)}
.footer__social a:active{transform:scale(.92)}
.faq__q:active{opacity:.72}
.rail__arrow svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.25;fill:none}

.product-grid{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:calc((100% - 3 * var(--gap)) / 4);
  gap:var(--gap);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  padding:14px 6px 24px;margin:-14px -6px -24px;
}
.product-grid--wall{padding:0;margin:0}
.product-grid::-webkit-scrollbar{display:none}
.product-grid--wall{
  grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-columns:auto;overflow:visible;scroll-snap-type:none;
  row-gap:clamp(34px,4vw,58px);
}
.product-item{scroll-snap-align:start;display:flex;flex-direction:column}
@media (hover:hover) and (pointer:fine){
  .product-grid[data-rail]{cursor:grab}
  .product-grid[data-rail].is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
  /* while a drag is committed the pointer owns the gesture — nothing else claims it */
  .product-grid[data-rail].is-dragging *{pointer-events:none;user-select:none}
}

/* Double-bezel: outer tray + inner plate */
.product-item__shell{
  padding:7px;border-radius:var(--r-lg);
  background:var(--paper);border:1px solid var(--line-soft);
  box-shadow:var(--shadow-rest);
  transition:transform var(--d-med) var(--ease),box-shadow var(--d-med) var(--ease);
}
.product-item:hover .product-item__shell{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.product-item__media{
  position:relative;aspect-ratio:1/1;overflow:hidden;
  border-radius:calc(var(--r-lg) - 7px);
  background:var(--mist);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.15);
}
.product-item__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--d-slow) var(--ease)}
.product-item:hover .product-item__media img{transform:scale(1.045)}
.product-item__badges{position:absolute;top:11px;left:11px;display:flex;gap:5px;z-index:2}
.product-item__badge{
  padding:5px 10px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.94);
  color:var(--ink);font-size:.625rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;
}
.product-item__quickadd{
  position:absolute;left:11px;right:11px;bottom:11px;z-index:2;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.96);
  color:var(--ink);font-size:var(--t-xs);font-weight:500;
  transition:opacity var(--d-med) var(--ease),transform var(--d-med) var(--ease);
}
/* Hidden-until-hover ONLY where a real pointer exists. Touch devices get it
   permanently visible rather than invisible-but-tappable. */
@media (hover:hover) and (pointer:fine){
  .product-item__quickadd{opacity:0;transform:translateY(8px)}
  .product-item:hover .product-item__quickadd,
  .product-item:focus-within .product-item__quickadd{opacity:1;transform:translateY(0)}
}
.product-item__quickadd svg{flex:none;width:13px;height:13px;stroke:currentColor;stroke-width:1.4;fill:none}

/* Safety net: any inline icon that slips through without a size rule is capped
   rather than falling back to the 300x150 browser default. */
.product-item__quickadd svg,.cat__go svg,.writing__go svg,
.link-arrow svg,.btn__chip svg{max-width:16px;max-height:16px}
.product-item__info{padding:18px 6px 0}
.product-item__title{
  font-family:var(--font-display);font-size:1.0625rem;font-weight:400;
  color:var(--ink);line-height:1.28;letter-spacing:var(--track-h3);
}
.product-item__desc{
  margin-top:7px;font-size:var(--t-xs);line-height:1.5;color:var(--quiet);
  /* two lines max so a long line can't unbalance a row of cards */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.section--mist .product-item__desc,.section--accent .product-item__desc{color:var(--quiet-deep)}
.product-item__price{margin-top:7px;font-size:var(--t-xs);color:var(--ink);font-weight:500}

/* ================ Categories — asymmetrical bento ================ */
.bento{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:clamp(180px,17vw,244px);
  gap:var(--gap);
}
.cat{
  position:relative;
  border-radius:var(--r-lg);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(20px,2vw,30px);
  color:#fff;isolation:isolate;
  box-shadow:var(--shadow-rest);
  transition:transform var(--d-med) var(--ease);
}
.cat:hover{transform:translateY(-5px)}
/* Lift shadow cross-fades instead of animating box-shadow — opacity composites,
   box-shadow repaints. */
.cat::before{
  content:"";position:absolute;inset:0;z-index:-3;
  border-radius:inherit;box-shadow:var(--shadow-lift);
  opacity:0;transition:opacity var(--d-med) var(--ease);pointer-events:none;
}
.cat:hover::before{opacity:1}
.cat__bg{position:absolute;inset:0;z-index:-2;overflow:hidden;border-radius:inherit}
.cat__bg img{
  width:100%;height:100%;object-fit:cover;object-position:center top;
  /* own compositor layer, so the zoom is a GPU transform not a clipped repaint */
  transform:translateZ(0);backface-visibility:hidden;
  transition:transform var(--d-med) var(--ease);
}
.cat:hover .cat__bg img{transform:translateZ(0) scale(1.06)}
/* Directional veil — bottom-weighted so the artwork stays rich up top */
.cat::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(to top,rgba(4,7,10,.88) 0%,rgba(4,7,10,.52) 42%,rgba(4,7,10,.14) 74%,transparent 100%);
}
.cat--lightsrc::after{
  background:linear-gradient(to top,rgba(4,7,10,.94) 0%,rgba(4,7,10,.72) 44%,rgba(4,7,10,.42) 74%,rgba(4,7,10,.24) 100%);
}
.cat__title{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.2rem,1.65vw,1.65rem);
  text-shadow:0 1px 18px rgba(4,7,10,.34);
  line-height:1.14;letter-spacing:var(--track-h3);color:#fff;
}
/* Sentence case, not uppercase — 70-char lines in caps were unreadable */
.cat__desc{
  margin-top:9px;font-size:var(--t-xs);line-height:1.5;
  color:rgba(255,255,255,.78);max-width:42ch;
  transition:opacity var(--d-med) var(--ease),transform var(--d-med) var(--ease);
}
.cat__go{
  margin-top:14px;display:inline-flex;align-items:center;gap:.55em;
  font-size:var(--t-eyebrow);font-weight:600;text-transform:uppercase;letter-spacing:.18em;
  color:#fff;
}
.cat__go svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.3;fill:none;transition:transform var(--d-fast) var(--ease)}
.cat:hover .cat__go svg{transform:translateX(4px)}
/* Bento spans — breaks the monotony of nine equal squares */
.cat--wide{grid-column:span 2}
.cat--tall{grid-row:span 2}
.cat--hero{grid-column:span 2;grid-row:span 2}

/* ================ Feature / double ================ */
.feature__inner{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,86px);align-items:center}
.feature__frame{padding:8px;border-radius:var(--r-xl);background:var(--paper);border:1px solid var(--line-soft);box-shadow:var(--shadow-float)}
.feature__media{position:relative;aspect-ratio:645/560;overflow:hidden;border-radius:calc(var(--r-xl) - 8px);background:var(--mist)}
.feature__media img{width:100%;height:100%;object-fit:cover;object-position:center 28%}
.feature__title{font-size:var(--t-h1);margin-top:18px}
.feature__body{margin-top:24px;font-size:var(--t-lead);color:var(--slate)}
.feature__cta{margin-top:36px}
.feature__stats{display:flex;gap:clamp(24px,3vw,48px);margin-top:40px;padding-top:32px;border-top:1px solid var(--line)}
.stat__n{font-family:var(--font-display);font-size:clamp(1.9rem,3vw,2.7rem);font-weight:var(--fw-display-mid);color:var(--ink);line-height:1;letter-spacing:var(--track-h2);font-variant-numeric:tabular-nums}
.stat__l{margin-top:9px;font-size:var(--t-xs);color:var(--quiet);line-height:1.4}

/* ================ FAQ ================ */
.faq__list{max-width:860px;margin-inline:auto}
.faq__item{
  border:1px solid var(--line-soft);border-radius:var(--r-md);
  background:var(--paper);margin-bottom:12px;overflow:hidden;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.9),0 1px 2px rgba(12,16,19,.03);
  transition:box-shadow var(--d-med) var(--ease),border-color var(--d-med) var(--ease);
}
.faq__item:has(.faq__q[aria-expanded="true"]){box-shadow:var(--shadow-float);border-color:transparent}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:24px clamp(20px,2.4vw,32px);text-align:left;
  font-family:var(--font-display);font-size:clamp(1.05rem,1.5vw,1.3rem);font-weight:300;
  color:var(--ink);line-height:1.35;
}
.faq__icon{position:relative;flex:none;width:20px;height:20px;color:var(--quiet)}
.faq__icon::before,.faq__icon::after{
  content:"";position:absolute;background:currentColor;border-radius:2px;
  transition:transform var(--d-med) var(--ease),opacity var(--d-med) var(--ease);
}
.faq__icon::before{left:0;top:50%;width:20px;height:1.5px;transform:translateY(-50%)}
.faq__icon::after{top:0;left:50%;height:20px;width:1.5px;transform:translateX(-50%)}
.faq__q[aria-expanded="true"] .faq__icon::after{transform:translateX(-50%) rotate(90deg);opacity:0}
.faq__a{
  display:grid;grid-template-rows:0fr;overflow:hidden;
  transition:grid-template-rows var(--d-med) var(--ease);
}
.faq__q[aria-expanded="true"] + .faq__a{grid-template-rows:1fr}
.faq__a > *{overflow:hidden;min-height:0}
.faq__a__inner{padding:0 clamp(20px,2.4vw,32px);color:var(--slate);max-width:70ch}
.faq__a__inner > :last-child{margin-bottom:26px}

/* ================ Newsletter ================ */
/* Double-bezel: machined tray holding a distinct inner plate. Inner radius is
   the outer minus the tray padding so the curves stay concentric. */
.newsletter__shell{
  padding:9px;border-radius:var(--r-xl);
  background:var(--mist);border:1px solid var(--line-soft);
  box-shadow:var(--shadow-panel);
}
.newsletter__panel{
  position:relative;overflow:hidden;
  border-radius:calc(var(--r-xl) - 9px);
  background:var(--paper);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.9),inset 0 0 0 1px var(--line-soft);
  padding:clamp(40px,6vw,84px) clamp(24px,5vw,72px);
  text-align:center;
}
.newsletter__title{font-size:var(--t-h2)}
.newsletter__sub{margin-top:16px;color:var(--quiet);font-size:var(--t-lead)}
.newsletter__form{
  display:flex;gap:9px;margin:34px auto 0;max-width:520px;
  padding:7px;border-radius:var(--r-pill);
  background:var(--mist);border:1px solid var(--line-soft);
}
.newsletter__input{
  flex:1;min-width:0;padding:13px 22px;border:0;background:transparent;
  font-family:var(--font-body);font-size:var(--t-sm);color:var(--ink);
}
.newsletter__input::placeholder{color:var(--quiet)}
.newsletter__input:focus{outline:none}
.newsletter__form:focus-within{border-color:var(--cyan);box-shadow:0 0 0 4px var(--cyan-wash)}

/* ================ Research archive ================ */
.research{display:flex;flex-direction:column;gap:clamp(44px,4.6vw,72px)}
.research__heading{
  font-family:var(--font-display);font-weight:var(--fw-display-sm);
  font-size:var(--t-h3);letter-spacing:var(--track-h3);color:var(--ink);
}
.research__note{margin-top:10px;font-size:var(--t-sm);line-height:1.6;color:var(--quiet-deep);max-width:64ch}
.research__list{margin-top:24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
/* Same plate as the writing cards, so the archive reads as one family with them. */
.research-item{
  display:flex;flex-direction:column;gap:9px;min-height:172px;padding:24px;
  border-radius:var(--r-md);background:var(--paper);
  border:1px solid var(--line-soft);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.9),0 1px 2px rgba(12,16,19,.04),0 8px 22px rgba(12,16,19,.05);
  transition:transform var(--d-med) var(--ease),box-shadow var(--d-med) var(--ease);
}
.research-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-float)}
.research-item:active{transform:translateY(-1px) scale(.995)}
.research-item__title{
  font-family:var(--font-display);font-weight:400;font-size:1.0625rem;
  line-height:1.28;letter-spacing:var(--track-h3);color:var(--ink);
}
.research-item__note{font-size:var(--t-xs);line-height:1.55;color:var(--quiet)}
.research-item__go{
  margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:.55em;
  font-size:var(--t-eyebrow);font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--ink);
}
.research-item__go svg{transition:transform var(--d-fast) var(--ease)}
.research-item:hover .research-item__go svg{transform:translateX(4px)}
@media (max-width:900px){ .research__list{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .research__list{grid-template-columns:1fr} }

/* ================ Social ================ */
/* Beige plates on the white ground — the inverse of the card treatment used on
   the beige sections, so the two never read as the same component. */
.social-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.social-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(32px,3.4vw,46px) clamp(20px,2.4vw,32px);
  border-radius:var(--r-lg);
  background:var(--mist);border:1px solid var(--line-soft);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7);
  transition:transform var(--d-med) var(--ease),box-shadow var(--d-med) var(--ease),
             background-color var(--d-med) var(--ease);
}
.social-card:hover{transform:translateY(-5px);background:var(--paper);box-shadow:var(--shadow-float)}
.social-card:active{transform:translateY(-1px) scale(.995)}
.social-card__icon{
  width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;flex:none;
  background:var(--paper);color:var(--ink);
  box-shadow:0 1px 2px rgba(12,16,19,.05),0 6px 16px rgba(12,16,19,.06);
  transition:color var(--d-med) var(--ease),transform var(--d-med) var(--ease);
}
.social-card:hover .social-card__icon{color:var(--gold);transform:scale(1.06)}
.social-card__icon svg{width:23px;height:23px}
.social-card__name{
  margin-top:22px;font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.16rem,1.5vw,1.4rem);letter-spacing:var(--track-h3);color:var(--ink);
}
.social-card__handle{
  margin-top:6px;font-size:var(--t-xs);letter-spacing:.04em;color:var(--gold);
}
.social-card__note{
  margin-top:14px;font-size:var(--t-sm);line-height:1.6;color:var(--quiet-deep);max-width:30ch;
}
.social-card__go{
  margin-top:auto;padding-top:22px;
  display:inline-flex;align-items:center;gap:.55em;
  font-size:var(--t-eyebrow);font-weight:600;text-transform:uppercase;letter-spacing:.18em;
  color:var(--ink);
}
.social-card__go svg{transition:transform var(--d-fast) var(--ease)}
.social-card:hover .social-card__go svg{transform:translateX(4px)}
@media (max-width:860px){ .social-row{grid-template-columns:1fr} .social-card__note{max-width:46ch} }

/* ================ Footer ================ */
.footer{background:var(--footer-bg);border-top:1px solid var(--line);padding-block:clamp(56px,7vw,96px) 0}
.footer__top{
  display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,.55fr) minmax(0,.55fr);
  gap:clamp(32px,6vw,96px);padding-bottom:clamp(40px,5vw,68px);
}
.footer__statement{
  font-family:var(--font-display);font-weight:var(--fw-display-sm);
  font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1.2;
  letter-spacing:var(--track-h3);color:var(--ink);max-width:20ch;margin-bottom:22px;
}
.footer__logo img{width:216px;height:auto;margin-bottom:20px}
.footer__blurb{font-size:var(--t-sm);color:var(--quiet-deep);max-width:34ch}
.footer__ttl{font-size:var(--t-eyebrow);font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:var(--ink);margin-bottom:18px}
.footer__list li + li{margin-top:2px}
.footer__list a{
  display:inline-block;padding-block:13px;
  font-size:var(--t-sm);color:var(--quiet-deep);
  transition:color var(--d-fast) var(--ease);
}
.footer__list a:hover{color:var(--ink)}
@media (hover:hover) and (pointer:fine){
  .footer__list a{padding-block:6px}
  .footer__list li + li{margin-top:0}
  .footer__top{padding-bottom:clamp(32px,3.4vw,52px)}
  .footer{padding-block:clamp(44px,5vw,68px) 0}
}

.footer__bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-block:26px;border-top:1px solid var(--line);
}
.footer__copy{font-size:var(--t-xs);color:var(--quiet-deep)}
.footer__social{display:flex;gap:6px}
.footer__social a{
  display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-pill);
  color:var(--quiet-deep);border:1px solid var(--line);background:var(--paper);
  transition:color var(--d-fast) var(--ease),transform var(--d-fast) var(--ease),box-shadow var(--d-fast) var(--ease);
}
.footer__social a:hover{color:var(--ink);transform:translateY(-2px);box-shadow:var(--shadow-rest)}
.footer__social svg{width:16px;height:16px}

/* ================ Page templates ================ */
.page-head{padding-bottom:var(--sp-section-end);text-align:center}
/* First section of an inner page: no breadcrumb above it now, so it sits
   under the floating nav and carries that clearance itself. Its own tone
   then runs clean to the top edge — no pale strip behind the nav. */
.section--top{padding-top:calc(var(--nav-h) + 80px)}
.page-head__title{font-size:var(--t-h1);margin-top:16px}
.page-head__sub{margin-top:20px;font-size:var(--t-lead);color:var(--quiet);max-width:62ch;margin-inline:auto}
/* Secondary text needs a deeper tone on the darker grounds to clear AA. */
.section--mist .page-head__sub,.section--mist .section-head__sub,
.section--mist .muted,.section--mist .collection-count{color:var(--quiet-deep)}

/* Collection listing */
.collection-layout{display:grid;grid-template-columns:214px minmax(0,1fr);gap:clamp(30px,4vw,64px);align-items:start}
.rail-title{font-size:var(--t-eyebrow);font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:var(--ink);margin-bottom:18px}
.rail-list a{
  display:block;padding:12px 14px;border-radius:var(--r-xs);
  font-size:var(--t-xs);color:var(--quiet);
  transition:background-color var(--d-fast) var(--ease),color var(--d-fast) var(--ease);
}
.rail-list a:hover{background:var(--mist);color:var(--ink)}
.rail-list a[aria-current="page"]{background:var(--cyan-wash);color:var(--cyan-deep);font-weight:500}
.collection-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-bottom:32px}
.collection-count{font-size:var(--t-xs);color:var(--quiet)}
.collection-sort{
  min-height:44px;
  border:1px solid var(--line);border-radius:var(--r-pill);
  padding:10px 18px;background:var(--paper);font-size:var(--t-xs);color:var(--ink);
}
.banner__frame{
  padding:8px;border-radius:var(--r-xl);
  background:var(--paper);border:1px solid var(--line-soft);
  box-shadow:var(--shadow-lift);
}
.collection-banner{
  position:relative;aspect-ratio:1340/560;overflow:hidden;
  border-radius:calc(var(--r-xl) - 8px);
}
.collection-banner img{width:100%;height:100%;object-fit:cover;object-position:center top}
.collection-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(4,7,10,.7),rgba(4,7,10,.2) 60%,rgba(4,7,10,.05))}
.collection-banner__content{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:0 32px}
.collection-banner__title{font-size:var(--t-h2);color:#fff}
.collection-banner__desc{margin-top:14px;max-width:60ch;font-size:var(--t-sm);color:rgba(255,255,255,.85)}

/* Product page */
.product__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(32px,5vw,80px);align-items:start}
.product__frame{padding:8px;border-radius:var(--r-xl);background:var(--paper);border:1px solid var(--line-soft);box-shadow:var(--shadow-lift)}
.product__media{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:calc(var(--r-xl) - 8px);background:var(--mist)}
.product__media img{width:100%;height:100%;object-fit:cover}
.product__title{font-size:var(--t-h2);margin-top:14px}
.product__subtitle{
  margin-top:14px;font-size:var(--t-lead);line-height:1.5;color:var(--quiet);max-width:46ch;
}
.product__price{margin-top:20px;font-family:var(--font-display);font-size:clamp(1.6rem,2.2vw,2.1rem);font-weight:300;color:var(--ink)}
.product__options{margin-top:34px}
.product__option-label{font-size:var(--t-eyebrow);font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:var(--quiet)}
.product__variants{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.variant-btn{
  padding:13px 24px;border:1px solid var(--line);border-radius:var(--r-pill);
  font-size:var(--t-xs);font-weight:500;color:var(--slate);background:var(--paper);
  transition:border-color var(--d-fast) var(--ease),color var(--d-fast) var(--ease),box-shadow var(--d-fast) var(--ease);
}
.variant-btn:hover{border-color:var(--line-strong);color:var(--ink)}
.variant-btn[aria-pressed="true"]{border-color:var(--ink);color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.product__actions{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.product__actions .btn{flex:1 1 210px;justify-content:center}
.product__desc{margin-top:38px;padding-top:32px;border-top:1px solid var(--line)}
.tracklist{margin-top:32px}
/* Each row is the sample control. The number swaps to a play glyph on hover or
   focus, so the affordance appears without adding a second element per row. */
.track{
  width:100%;display:flex;align-items:center;gap:16px;
  padding:13px 10px;margin-inline:-10px;
  border-bottom:1px solid var(--line-soft);
  font-size:var(--t-sm);text-align:left;color:var(--slate);
  border-radius:var(--r-xs);
  transition:background-color var(--d-fast) var(--ease);
}
.track:hover,.track:focus-visible{background:var(--mist)}
.track:active{transform:scale(.995)}
.track__cue{position:relative;flex:none;width:26px;height:26px;display:grid;place-items:center}
.track__num{
  font-size:var(--t-xs);color:var(--quiet);font-variant-numeric:tabular-nums;
  transition:opacity var(--d-fast) var(--ease);
}
.track__icon{
  position:absolute;inset:0;display:grid;place-items:center;
  opacity:0;transition:opacity var(--d-fast) var(--ease);
}
.track__icon svg{width:20px;height:20px;fill:var(--ink)}
.track:hover .track__num,.track:focus-visible .track__num,
.track[aria-pressed="true"] .track__num{opacity:0}
.track:hover .track__icon,.track:focus-visible .track__icon,
.track[aria-pressed="true"] .track__icon{opacity:1}
.track__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.track__name{color:var(--ink)}
.track__sub{font-size:var(--t-xs);color:var(--quiet);line-height:1.4}
.track__time{margin-left:auto;align-self:center;color:var(--quiet);font-size:var(--t-xs);font-variant-numeric:tabular-nums}
.tracklist__note{margin-top:14px;font-size:var(--t-xs);color:var(--quiet)}

/* Album PDF — a document link, styled as a quiet secondary action */
.product__pdf{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:22px;padding:13px 22px;
  border:1px solid var(--line-strong);border-radius:var(--r-pill);
  font-size:var(--t-sm);font-weight:500;color:var(--ink);
  transition:background-color var(--d-fast) var(--ease),border-color var(--d-fast) var(--ease);
}
.product__pdf:hover{background:var(--mist);border-color:var(--ink)}
.product__pdf:active{transform:scale(.985)}
.product__pdf svg{flex:none;width:16px;height:16px;stroke:currentColor;stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* Contact */
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,76px);align-items:start}
.form-field{margin-bottom:20px}
.form-field label{display:block;margin-bottom:9px;font-size:var(--t-eyebrow);font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:var(--quiet)}
.form-field input,.form-field textarea{
  width:100%;padding:14px 18px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--paper);font-family:var(--font-body);font-size:var(--t-sm);color:var(--ink);
  transition:border-color var(--d-fast) var(--ease),box-shadow var(--d-fast) var(--ease);
}
.form-field textarea{min-height:172px;resize:vertical;border-radius:var(--r-md)}
.form-field input:focus,.form-field textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 4px var(--cyan-wash)}

/* Videos */
/* Six-column bed so a featured card can take the full width and the rest
   sit as halves — an even 3-up row is the layout the brief bans. */
.video-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gap);align-items:start}
.video-card{grid-column:span 2}
.video-grid--featured > .video-card:first-child{grid-column:span 6}
.video-grid--featured > .video-card:first-child .video-card__media{aspect-ratio:21/9}
.video-grid--featured > .video-card:first-child .video-card__media img{object-position:center 22%}
.video-grid--featured > .video-card:first-child .video-card__title{font-size:clamp(1.35rem,2vw,1.8rem)}
.video-grid--featured > .video-card:not(:first-child){grid-column:span 3}
.video-grid--pair > .video-card{grid-column:span 3}
.video-card__shell{padding:7px;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line-soft);box-shadow:var(--shadow-rest);transition:transform var(--d-med) var(--ease),box-shadow var(--d-med) var(--ease)}
.video-card:hover .video-card__shell{transform:translateY(-5px);box-shadow:var(--shadow-lift)}
.video-card__media{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:calc(var(--r-lg) - 7px);background:var(--mist)}
.video-card__media img{width:100%;height:100%;object-fit:cover;object-position:center 32%;transition:transform var(--d-slow) var(--ease)}
.video-card:hover .video-card__media img{transform:scale(1.05)}
.video-card__play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(4,7,10,.22);transition:background-color var(--d-med) var(--ease)}
.video-card:hover .video-card__play{background:rgba(4,7,10,.34)}
.video-card__play span{
  display:grid;place-items:center;width:58px;height:58px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.95);
  color:var(--ink);transition:transform var(--d-med) var(--ease);
}
.video-card:hover .video-card__play span{transform:scale(1.07)}
.video-card__play svg{width:17px;height:17px;fill:currentColor;margin-left:2px}
.video-card__title{margin-top:18px;font-family:var(--font-display);font-size:1.2rem;font-weight:400;color:var(--ink);line-height:1.28}
.video-card__desc{margin-top:8px;font-size:var(--t-xs);color:var(--quiet);line-height:1.5}

/* Press */
.press-list{max-width:880px;margin-inline:auto}
.press-shell{
  padding:7px;border-radius:var(--r-lg);margin-bottom:14px;
  background:var(--mist);border:1px solid var(--line-soft);
  transition:transform var(--d-med) var(--ease),box-shadow var(--d-med) var(--ease);
}
.press-shell:hover{transform:translateY(-3px);box-shadow:var(--shadow-float)}
.press-item{
  padding:28px clamp(22px,2.4vw,32px);
  border-radius:calc(var(--r-lg) - 7px);background:var(--paper);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.9),inset 0 0 0 1px var(--line-soft),
             0 1px 2px rgba(12,16,19,.04),0 8px 22px rgba(12,16,19,.05);
}
.press-item__date{font-size:var(--t-eyebrow);text-transform:uppercase;letter-spacing:.18em;color:var(--quiet);font-weight:600}
.press-item__title{margin-top:12px;font-size:var(--t-h3)}
.press-item__excerpt{margin-top:12px;color:var(--slate);font-size:var(--t-sm)}
.press-item__more{margin-top:12px}
.press-item__more .link-arrow{padding-block:12px}

/* About */
.about__frame{padding:8px;border-radius:var(--r-xl);background:var(--paper);border:1px solid var(--line-soft);box-shadow:var(--shadow-lift)}
.about__hero{position:relative;aspect-ratio:1340/520;overflow:hidden;border-radius:calc(var(--r-xl) - 8px)}
.about__hero img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.about__body{max-width:750px;margin-inline:auto;font-size:var(--t-lead)}
.about__body h2{font-size:var(--t-h3);margin:52px 0 8px}
.about__body .eyebrow{margin-bottom:18px}
.about__body p + p{margin-top:1.15em}

/* ================ Film grain ================ */
/* Fixed and pointer-events:none by design — a noise layer attached to
   scrolling content would repaint continuously. */
body::after{
  content:"";position:fixed;inset:0;z-index:300;pointer-events:none;
  opacity:.03;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

/* ================ Motion ================ */
/* Hidden only once JS confirms it can reveal them again — without the
   .js guard a script failure would leave the page permanently blank. */
.js [data-reveal]{
  opacity:0;transform:translateY(22px);
  animation:revealSafety 1ms linear 4s forwards;
}
@keyframes revealSafety{to{opacity:1;transform:none}}
/* Grids animate their children, not themselves — a whole grid fading in as one
   block reads mechanical; a stagger reads authored. */
/* `.stagger` opts a container into animating its children instead of itself.
   Grids get it implicitly; anything else adds the class. */
.js .stagger[data-reveal],
.js .product-grid[data-reveal],.js .bento[data-reveal],
.js .video-grid[data-reveal],.js .press-list[data-reveal]{
  opacity:1;transform:none;filter:none;
}
.js .stagger[data-reveal] > *,
.js .product-grid[data-reveal] > *,
.js .bento[data-reveal] > *,
.js .video-grid[data-reveal] > *,
.js .press-list[data-reveal] > *{
  opacity:0;transform:translateY(20px);
  animation:revealSafety 1ms linear 4s forwards;
}
.js .stagger[data-reveal].is-in > *,
.js .product-grid[data-reveal].is-in > *,
.js .bento[data-reveal].is-in > *,
.js .video-grid[data-reveal].is-in > *,
.js .press-list[data-reveal].is-in > *{
  animation:none;
  opacity:1;transform:none;
  transition:opacity .72s var(--ease),transform .72s var(--ease);
}
/* Shorter throw for smaller groups (footer columns, FAQ rows) */
.js .stagger--soft[data-reveal] > *{transform:translateY(14px)}
.js .stagger--soft[data-reveal].is-in > *{transition-duration:.6s}
.js [data-reveal].is-in > :nth-child(1){transition-delay:.02s}
.js [data-reveal].is-in > :nth-child(2){transition-delay:.09s}
.js [data-reveal].is-in > :nth-child(3){transition-delay:.16s}
.js [data-reveal].is-in > :nth-child(4){transition-delay:.23s}
.js [data-reveal].is-in > :nth-child(5){transition-delay:.30s}
.js [data-reveal].is-in > :nth-child(6){transition-delay:.37s}
.js [data-reveal].is-in > :nth-child(7){transition-delay:.44s}
.js [data-reveal].is-in > :nth-child(8){transition-delay:.51s}
.js [data-reveal].is-in > :nth-child(n+9){transition-delay:.58s}

/* Entrance choreography — pure CSS.
   Deliberately NOT gated on a class added by main.js: a stale cached script
   would then leave these elements at opacity 0 forever. The `.js` flag comes
   from an inline <script> in <head>, which can never be independently cached,
   so no-JS users still see content immediately. */
@keyframes riseIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes settleIn{from{opacity:0;transform:scale(1.012)}to{opacity:1;transform:none}}

.js .hero__frame,
.js .banner__frame,
.js .about__frame,
.js .product__frame{animation:settleIn 1.2s var(--ease) .05s both}

.js .hero__text > *{animation:riseIn .95s var(--ease) both}
.js .hero__text > :nth-child(1){animation-delay:.22s}
.js .hero__text > :nth-child(2){animation-delay:.34s}
.js .hero__text > :nth-child(3){animation-delay:.46s}
.js .hero__text > :nth-child(4){animation-delay:.58s}

.js .page-head .wrapper > *{animation:riseIn .9s var(--ease) both}
.js .page-head .wrapper > :nth-child(1){animation-delay:.18s}
.js .page-head .wrapper > :nth-child(2){animation-delay:.28s}
.js .page-head .wrapper > :nth-child(3){animation-delay:.38s}

.js [data-reveal].is-in{
  animation:none;
  opacity:1;transform:none;
  transition:opacity var(--d-slow) var(--ease),transform var(--d-slow) var(--ease);
  transition-delay:var(--reveal-delay,0ms);
}

/* ================ Cart — slide-out panel ================ */
.cart-scrim{
  position:fixed;inset:0;z-index:95;background:rgba(12,16,19,.34);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;
  transition:opacity var(--d-med) var(--ease),visibility var(--d-med);
}
.cart-scrim[data-open="true"]{opacity:1;visibility:visible}

.cart{
  position:fixed;inset:0 0 0 auto;z-index:96;
  width:min(440px,92vw);display:flex;flex-direction:column;
  background:var(--paper);box-shadow:-24px 0 60px rgba(12,16,19,.14);
  transform:translateX(101%);
  transition:transform var(--d-med) var(--ease);
}
.cart[data-open="true"]{transform:none}

.cart__head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 22px 18px;border-bottom:1px solid var(--line);
}
.cart__title{
  font-size:var(--t-eyebrow);font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink);
}
.cart__count{color:var(--quiet)}
.cart__close{
  display:grid;place-items:center;width:44px;height:44px;margin:-8px -8px -8px 0;
  border-radius:var(--r-pill);color:var(--slate);
  transition:background-color var(--d-fast) var(--ease);
}
.cart__close:hover{background:var(--mist)}
.cart__close:active{transform:scale(.94)}
.cart__close svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round}

.cart__body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:8px 22px}

.cart__empty{
  height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:22px;text-align:center;padding:40px 0;
}
.cart__empty h3{font-size:var(--t-h3);font-weight:var(--fw-display-sm)}
.cart__empty-mark{
  display:grid;place-items:center;width:96px;height:96px;border-radius:var(--r-pill);
  border:1px solid var(--line);color:var(--quiet);
}
.cart__empty-mark svg{width:34px;height:34px;stroke:currentColor;stroke-width:1.1;fill:none;stroke-linecap:round;stroke-linejoin:round}

.cart__line{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line-soft)}
.cart__thumb{
  flex:none;width:74px;height:74px;border-radius:var(--r-sm);overflow:hidden;
  background:var(--mist);border:1px solid var(--line-soft);
}
.cart__thumb img{width:100%;height:100%;object-fit:cover}
.cart__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.cart__name{
  font-family:var(--font-display);font-weight:400;font-size:1rem;line-height:1.25;
  letter-spacing:var(--track-h3);color:var(--ink);
}
.cart__meta{font-size:var(--t-xs);color:var(--quiet)}
.cart__row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-pill)}
.qty button{
  width:34px;height:34px;display:grid;place-items:center;
  color:var(--slate);border-radius:var(--r-pill);
  transition:background-color var(--d-fast) var(--ease);
}
.qty button:hover{background:var(--mist);color:var(--ink)}
.qty button:active{transform:scale(.92)}
.qty span{min-width:26px;text-align:center;font-size:var(--t-xs);font-variant-numeric:tabular-nums}
.cart__price{font-size:var(--t-sm);color:var(--ink);font-variant-numeric:tabular-nums}
.cart__remove{
  align-self:flex-start;font-size:var(--t-xs);color:var(--quiet);
  text-decoration:underline;text-underline-offset:.2em;padding:6px 0;
}
.cart__remove:hover{color:var(--ink)}

.cart__foot{padding:20px 22px calc(22px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--paper)}
.cart__subtotal{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.cart__subtotal b{font-family:var(--font-display);font-weight:var(--fw-display-mid);font-size:1.5rem;color:var(--ink);font-variant-numeric:tabular-nums}
.cart__note{font-size:var(--t-xs);color:var(--quiet);margin-bottom:16px}
.cart__foot .btn{width:100%;justify-content:center}

/* count badge on the nav trigger */
.nav__icon{position:relative}
.cart-badge{
  position:absolute;top:5px;right:4px;min-width:17px;height:17px;padding:0 4px;
  display:none;place-items:center;border-radius:var(--r-pill);
  background:var(--cyan);color:#fff;
  font-size:9px;font-weight:600;font-variant-numeric:tabular-nums;
}
.cart-badge[data-count]:not([data-count="0"]){display:grid}

@media (prefers-reduced-motion:reduce){
  .cart{transition:opacity var(--d-fast) var(--ease);transform:none;opacity:0;visibility:hidden}
  .cart[data-open="true"]{opacity:1;visibility:visible}
}

/* ================ Menu — full-screen glass expansion ================ */
.menu{
  position:fixed;inset:0;z-index:85;
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--nav-h) + 60px) var(--outer) var(--outer);
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(34px) saturate(180%);backdrop-filter:blur(34px) saturate(180%);
  opacity:0;visibility:hidden;
  transition:opacity var(--d-med) var(--ease),visibility var(--d-med);
}
.menu[data-open="true"]{opacity:1;visibility:visible}
.menu__nav{display:flex;flex-direction:column;gap:2px;max-width:var(--page);width:100%;margin-inline:auto}
.menu__link{
  display:flex;align-items:baseline;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--line-soft);
  font-family:var(--font-display);font-weight:var(--fw-display-sm);
  font-size:clamp(2rem,7vw,3.4rem);line-height:1.1;
  letter-spacing:var(--track-h2);color:var(--ink);
  opacity:0;transform:translateY(26px);
}
.menu[data-open="true"] .menu__link{
  opacity:1;transform:none;
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  transition-delay:calc(var(--i,0) * 60ms + 120ms);
}
.menu__link em{
  font-family:var(--font-body);font-style:normal;font-weight:600;
  font-size:var(--t-eyebrow);letter-spacing:.2em;text-transform:uppercase;
  color:var(--quiet);
}
.menu__link:hover{color:var(--cyan-deep)}
.menu__foot{
  max-width:var(--page);width:100%;margin:clamp(30px,5vw,56px) auto 0;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center;
  opacity:0;transform:translateY(18px);
}
.menu[data-open="true"] .menu__foot{
  opacity:1;transform:none;
  transition:opacity .6s var(--ease) .46s,transform .6s var(--ease) .46s;
}
.menu__tag{font-size:var(--t-sm);color:var(--quiet);max-width:34ch}

/* ================ Responsive ================ */
@media (max-width:1100px){
  .nav__menu{display:none}
  .nav__burger{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r-pill);color:var(--slate)}
  .nav__burger svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.3;fill:none}
  .nav{padding-inline:16px 10px}
  .nav__logo img{width:178px}
  .product-grid{grid-auto-columns:calc((100% - 2 * var(--gap)) / 3)}
  .product-grid--wall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .video-grid > .video-card,
  .video-grid--featured > .video-card:not(:first-child){grid-column:span 3}
  .collection-layout{grid-template-columns:1fr}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cat--hero,.cat--wide{grid-column:span 2}
  .cat--tall{grid-row:span 1}
  .feature__inner,.product__inner,.contact__grid{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  :root{--nav-h:60px}
  /* At 375px the logo + four 38px icons measured 336px into 309px of usable
     nav — the cart was clipped and only overflow-x:hidden concealed it.
     Drop the secondary account icon, size the rest to the 44px touch minimum. */
  .nav{padding-inline:14px 8px}
  .nav__logo img{width:146px}
  .nav__icon,.nav__burger{width:44px;height:44px}
  .nav__icon svg{width:19px;height:19px}
  .nav__icon--account{display:none}
  .product-grid{grid-auto-columns:calc((100% - var(--gap)) / 2)}
  .product-grid--wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .video-grid > .video-card,
  .video-grid--featured > .video-card:first-child,
  .video-grid--featured > .video-card:not(:first-child),
  .video-grid--pair > .video-card{grid-column:span 6}
  .video-grid--featured > .video-card:first-child .video-card__media{aspect-ratio:16/9}
  .bento{grid-template-columns:1fr;grid-auto-rows:clamp(200px,52vw,260px)}
  .cat--hero,.cat--wide{grid-column:span 1}
  .hero__media{aspect-ratio:4/5}
  .hero__media img{object-position:38% 50%}
  .hero__veil{background:linear-gradient(to top,rgba(4,7,10,.82) 0%,rgba(4,7,10,.45) 46%,rgba(4,7,10,.12) 100%)}
  .hero__content{align-items:flex-start;text-align:left;justify-content:flex-end;padding-bottom:38px}
  .footer__top{grid-template-columns:1fr;gap:34px}
  .footer__bar{justify-content:center;text-align:center}
  .rail__head{flex-direction:column;align-items:stretch}
  .rail__nav{display:none}
  .cat__desc{opacity:1;transform:none}
}

/* Translucency is a preference, not a given — honour the opt-out. */
@media (prefers-reduced-transparency:reduce){
  .nav,.nav__dropdown,.drawer,.btn--glass,.product-item__badge,
  .product-item__quickadd,.video-card__play span{
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  }
  .nav{background:#fff}
  .drawer{background:#fff}
  .btn--glass{background:rgba(10,14,18,.72)}
  .nav-shell::before{display:none}
}
@media (prefers-contrast:more){
  :root{--quiet:#4A555F;--line:rgba(12,16,19,.24);--line-soft:rgba(12,16,19,.18)}
  .nav{background:#fff;border-color:var(--line)}
  .btn--ghost,.variant-btn,.collection-sort{border-color:var(--ink)}
  .product-item__shell,.faq__item,.press-item{border-color:var(--line)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  /* Reduced motion must still show content */
  .js [data-reveal]{opacity:1!important;transform:none!important;filter:none!important}
  .js [data-reveal] > *,.js .hero__text > *,.js .page-head .wrapper > *,
  .js .hero__frame,.js .banner__frame,.js .about__frame,.js .product__frame{
    opacity:1!important;transform:none!important;
    transition-delay:0ms!important;animation:none!important}
  .cat__desc,.product-item__quickadd{opacity:1!important;transform:none!important}
  .menu__link,.menu__foot{transform:none!important;transition-delay:0ms!important}
  .nav-shell::before{transition:none}
}