/* =====================================================================
   Round 3: glass nav, exact Figma heights, microinteractions
   ===================================================================== */
:root{
  --ease-out:cubic-bezier(.22,1,.36,1);
  --glass-bg:color-mix(in srgb,var(--surface-background) 62%,transparent);   /* was a raw Light value; now follows the Colors mode */
  --glass-border:color-mix(in srgb,var(--border-subtle) 90%,transparent);
  --nav-btn-bg:var(--button-palette-primary-base); --nav-btn-border:var(--button-palette-primary-border);
  --btn-inset:inset 0 -1px 2px rgba(0,0,0,.1),inset 0 1px 2px rgba(255,255,255,.4);
  --btn-drop:0 2px 2px rgba(0,0,0,.06),0 6px 12px -4px rgba(0,0,0,.08);
}
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:112px}

/* ---------- Nav: fixed, filled once scrolled (Figma 143:1456 Scrolled) ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;padding:var(--space-12) var(--space-48);display:block;background:none;box-shadow:none}
.nav.is-scrolled{background:none;box-shadow:none}
.nav__inner{width:100%;justify-content:center;border:1px solid transparent;border-radius:var(--radius-md);
  background:transparent;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);
  transition:background .35s var(--ease-out),border-color .35s,box-shadow .35s,backdrop-filter .35s,padding .35s var(--ease-out)}
.nav.is-scrolled .nav__inner{background:var(--surface-default);border-color:var(--border-subtle);padding-block:var(--space-16)}
.nav__logo img{height:32px;width:auto;transition:transform .3s var(--ease-out)}
.nav__logo:hover img{transform:scale(1.04)}
.nav__link{position:relative;transition:background .25s,color .25s}
.nav__link:hover{background:var(--accent-hover)}
.nav__link[aria-current="page"]{background:var(--accent-default);color:var(--accent-text)}   /* accent/text on the gold pill (was text/primary: unreadable in Dark) */
.nav__link[aria-current="page"]:hover{background:var(--accent-hover)}

/* ---------- Buttons ---------- */
  transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),background-color .2s,border-color .2s,color .2s}

/* ---------- Exact Figma heights ---------- */
.follow-banner{min-height:240px;padding:var(--space-32) 0}
.section-header{min-height:44px}
.originals-wrap{padding:var(--space-40) var(--space-80)}
.originals{padding:var(--space-80) 0;border-radius:var(--radius-lg)}
.originals__inner{width:min(1192px,100% - 48px)}
.worth__label{padding:var(--space-24) 0 var(--space-16)}

/* ---------- Event cards ---------- */

/* ---------- Follow pill ---------- */
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(1)}}

/* ---------- Newsletter ---------- */
.field{transition:box-shadow .25s,border-color .25s}
.field:focus-within{border-color:var(--accent-default);box-shadow:none}
.field.is-invalid{animation:shake .4s;border-color:var(--feedback-error)}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.issue-card{transition:transform .35s var(--ease-out),box-shadow .35s}
.issue-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-large-hover)}

/* ---------- Footer ---------- */

/* ---------- Modal ---------- */
.modal{display:flex;visibility:hidden;opacity:0;transition:opacity .25s,visibility 0s .25s;-webkit-backdrop-filter:blur(var(--blur-overlay));backdrop-filter:blur(var(--blur-overlay))}
.modal.is-open{visibility:visible;opacity:1;transition:opacity .25s}
.modal__panel{transform:translateY(16px) scale(.96);transition:transform .45s var(--ease-out)}
.modal.is-open .modal__panel{transform:none}
.modal__check{width:56px;height:56px;border-radius:50%;background:var(--accent-default);display:grid;place-items:center}
.modal__check svg{stroke:var(--neutral-900);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30}
.modal.is-open .modal__check svg{animation:draw .5s .2s var(--ease-out) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- Scroll reveal (only when JS is on) ---------- */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);transition-delay:calc(var(--i,0) * 70ms)}
.js .reveal.is-in{opacity:1;transform:none}
.nav__link,.btn{-webkit-tap-highlight-color:transparent}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js .reveal{opacity:1;transform:none}
}

/* ---------- Nav: hug content, spacing per Figma 143:1456 ---------- */
.nav{padding:var(--space-12) var(--space-48);display:flex;justify-content:center;pointer-events:none}
.nav__inner{pointer-events:auto;width:fit-content;max-width:100%;padding:var(--space-24) var(--space-28);gap:var(--space-24);justify-content:center}
.nav.is-scrolled .nav__inner{padding-block:var(--space-24)}
.nav__links{gap:var(--space-32)}
.nav__logo{flex:none}
@media (max-width:1279px){.nav{padding-inline:var(--space-16)}.nav__inner{padding-inline:var(--space-16);gap:var(--space-12)}.nav__links{gap:var(--space-12)}}
/* Early desktop: 48px outer padding leaves the pill short; use the 16px gutter until the bar has room */
@media (min-width:1280px) and (max-width:1400px){.nav{padding-inline:var(--space-16)}}

/* Figma strokes are inside the frame: use an inset ring so the bar is exactly 94px tall and hugs content */
.nav__inner{box-sizing:border-box;border:0;height:94px;padding:0 var(--space-28);box-shadow:none}
.nav.is-scrolled .nav__inner{padding-block:0;border:0;box-shadow:inset 0 0 0 1px var(--border-subtle)}