/* ====================================================================
   BARGOT - shared site stylesheet (Aurora method)
   Seed: #B08060 (rose-gold cap metal) -> token map per BUILD-SPEC §2.
   Dark graphite is the DEFAULT theme; a complete light theme lives
   under :root[data-theme="light"]. The base stays COOL graphite dark /
   clean near-white; rose-gold is a scalpel accent only. Never a cream,
   beige, tan or brown page background. Never a serif face.

   Cache key: pages load this as assets/site.css?v=N - bump N on every
   shared-asset change, on BOTH tags, on EVERY page.

   Blur budget (guide §9): max ~6 backdrop-filter elements in viewport;
   stepped down or removed at <=760px (see the responsive section).
   Animate transform / opacity / filter only.

   Contents:
   01 Tokens (dark default + light theme)
   02 Reset + base
   03 A11y: skip link, focus ring, selection, sr-only
   04 Ambient shell: mesh blobs, cursor spotlight, film grain
   05 Scroll progress bar
   06 Nav + mobile sheet
   07 Buttons
   08 Chips
   09 Glass tiers + cards
   10 Section scaffolding + type helpers
   11 Theme-swapped product image (.pshot)
   12 CTA band + interest form + inputs
   13 Toast
   14 Footer
   15 Reveal primitives (.rv)
   16 Utilities
   17 Responsive: 1024 / 860 / 768 / 760 blur step / 420
   19 Scroll scenes (before 18 so reduced motion overrides it)
   18 Reduced motion
==================================================================== */

/* --------------------------------------------------------------
   01 TOKENS
-------------------------------------------------------------- */
:root{
  color-scheme:dark;

  /* accent family derived from seed #B08060 - values fixed by BUILD-SPEC §2 */
  --accent:#D39369;
  --accent-hi:#E7B48F;
  --accent-2:#A26A44;
  --accent-t:#D39369;              /* body-size accent text, AA on --bg */
  --accent-soft:rgba(211,147,105,.12);
  --accent-line:rgba(211,147,105,.30);
  --blob1:rgba(211,147,105,.30);
  --blob2:rgba(211,147,105,.18);
  --blob3:rgba(107,74,114,.22);    /* neighbouring plum: royal night depth */
  --spot:rgba(231,180,143,.08);
  --grad-h1:linear-gradient(92deg,var(--accent-hi),var(--accent) 58%,#B8825C);

  /* neutrals - Aurora, byte-identical across projects */
  --bg:#0E0E11;
  --surface:#17171D;
  --fg:#F5F5F7;
  --muted:#A0A0AA;
  --faint:#6E6E78;
  --line:rgba(255,255,255,.08);

  /* status semantics (fixed, muted; rarely used on this brand site) */
  --ok:#2FD48A;   --ok-t:#2FD48A;
  --deny:#FF5A6A; --deny-t:#FF5A6A;
  --warn:#F5C542; --warn-t:#F5C542;
  --info:#5B8DEF; --info-t:#5B8DEF;

  /* glass recipe pieces */
  --glass1-bg:color-mix(in srgb,var(--surface) 58%,transparent);
  --glass2-bg:color-mix(in srgb,var(--surface) 78%,transparent);
  --glass-sheen:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 40%);
  --inset-hi:inset 0 1px 0 rgba(255,255,255,.055);
  --shadow-1:0 14px 40px rgba(0,0,0,.35);
  --shadow-2:0 24px 70px rgba(0,0,0,.5);
  --field-bg:color-mix(in srgb,var(--surface) 72%,transparent);

  /* inverse pill (the white CTA) + primary button ink */
  --pill-bg:#F5F5F7;
  --pill-ink:#131316;
  --primary-ink:#17110B;

  /* type + radius */
  --font-ui:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,"Cascadia Code",Consolas,monospace;
  --r-lg:16px; --r-md:12px; --r-sm:9px;

  --grain-o:.032;
}

/* UNUSED - the brand went DARK-ONLY (client decision 2026-07-27).
   No page sets data-theme="light" and the nav toggle was removed, so
   this whole block is dormant. Kept intact as cheap insurance in case
   the client reverses; do not build on it. */
/* Light theme - fully designed, not an afterthought.
   Light accent = seed darkened for white contrast (BUILD-SPEC §2).
   --accent-hi doubles as eyebrow ink, so on light it is the AA-safe
   #8A5324 (6.0:1 on #FAFAFB, verified). */
:root[data-theme="light"]{
  color-scheme:light;

  --accent:#A0632F;
  --accent-hi:#8A5324;
  --accent-2:#7E4A1E;
  --accent-t:#8A5324;
  --accent-soft:rgba(160,99,47,.10);
  --accent-line:rgba(160,99,47,.32);
  --blob1:rgba(160,99,47,.16);
  --blob2:rgba(160,99,47,.10);
  --blob3:rgba(107,74,114,.12);
  --spot:rgba(160,99,47,.055);
  --grad-h1:linear-gradient(92deg,#8A5324,#A0632F 58%,#6E421C);

  --bg:#FAFAFB;
  --surface:#FFFFFF;
  --fg:#17171B;
  --muted:#5B5B66;
  --faint:#8A8A94;
  --line:rgba(17,17,20,.09);

  --ok:#12A366;   --ok-t:#0E7E4F;
  --deny:#E23B4C; --deny-t:#C22F3E;
  --warn:#C98A08; --warn-t:#9A6A06;
  --info:#3B6FD4; --info-t:#2F58A8;

  --glass1-bg:color-mix(in srgb,#FFFFFF 66%,transparent);
  --glass2-bg:color-mix(in srgb,#FFFFFF 84%,transparent);
  --glass-sheen:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0) 46%);
  --inset-hi:inset 0 1px 0 rgba(255,255,255,.75);
  --shadow-1:0 14px 40px rgba(23,23,27,.08);
  --shadow-2:0 24px 70px rgba(23,23,27,.12);
  --field-bg:#FFFFFF;

  --pill-bg:#17171B;   /* the "white pill" inverts to max-contrast dark on light */
  --pill-ink:#FAFAFB;
  --primary-ink:#FFFFFF;

  --grain-o:.02;
}

/* --------------------------------------------------------------
   02 RESET + BASE
-------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100svh;overflow-x:clip;
  background:var(--bg);color:var(--fg);
  font:400 16px/1.6 var(--font-ui);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
b,strong{font-weight:600}
[id]{scroll-margin-top:96px}

/* --------------------------------------------------------------
   03 A11Y
-------------------------------------------------------------- */
.skip{
  position:fixed;left:14px;top:14px;z-index:120;
  transform:translateY(-300%);
  padding:.7em 1.2em;border-radius:999px;
  background:var(--surface);color:var(--fg);border:1px solid var(--line);
  font-size:.85rem;box-shadow:var(--shadow-1);
  transition:transform .2s ease;
}
.skip:focus-visible{transform:none}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

::selection{background:color-mix(in srgb,var(--accent) 30%,transparent);color:var(--fg)}

.sr-only{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap;
}

/* --------------------------------------------------------------
   04 AMBIENT SHELL
   Three blurred blobs behind everything, hue-rotated slowly by
   scroll via --meshHue (site.js). Spotlight follows the cursor on
   fine pointers only; without JS it stays parked offscreen.
-------------------------------------------------------------- */
.mesh{
  position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;
  filter:hue-rotate(var(--meshHue,0deg));
}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;will-change:transform}
.b1{
  width:max(460px,44vw);height:max(460px,44vw);left:-10%;top:-14%;
  background:radial-gradient(circle at 36% 36%,var(--blob1),transparent 62%);
  animation:drift1 96s ease-in-out infinite alternate;
}
.b2{
  width:max(400px,36vw);height:max(400px,36vw);right:-12%;top:18%;
  background:radial-gradient(circle at 60% 40%,var(--blob2),transparent 60%);
  animation:drift2 110s ease-in-out infinite alternate;
}
.b3{
  width:max(430px,40vw);height:max(430px,40vw);left:22%;bottom:-22%;
  background:radial-gradient(circle at 50% 45%,var(--blob3),transparent 62%);
  animation:drift3 74s ease-in-out infinite alternate;
}
@keyframes drift1{to{transform:translate3d(8vw,6vh,0) scale(1.07)}}
@keyframes drift2{to{transform:translate3d(-7vw,9vh,0) scale(1.12)}}
@keyframes drift3{to{transform:translate3d(6vw,-7vh,0) scale(1.05)}}

.spot{
  position:fixed;left:0;top:0;width:640px;height:640px;margin:-320px 0 0 -320px;
  z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,var(--spot) 0%,transparent 62%);
  opacity:0;transform:translate3d(-120vw,-120vh,0);
  transition:opacity .5s ease;
}
html.spot-on .spot{opacity:1}
@media (pointer:coarse){.spot{display:none}}

.grain{
  position:fixed;inset:0;z-index:88;pointer-events:none;
  mix-blend-mode:overlay;opacity:var(--grain-o);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* --------------------------------------------------------------
   05 SCROLL PROGRESS
-------------------------------------------------------------- */
.progress{
  position:fixed;top:0;left:0;width:100%;height:2px;z-index:90;pointer-events:none;
  background:linear-gradient(90deg,var(--accent-2),var(--accent) 55%,var(--accent-hi));
  transform:scaleX(0);transform-origin:0 50%;
}

/* --------------------------------------------------------------
   06 NAV + MOBILE SHEET
   Transparent over the hero; condenses to glass tier 1 on scroll
   (saves the blur budget at the top of the page).
-------------------------------------------------------------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:80;
  padding:18px 0;border-bottom:1px solid transparent;
  transition:padding .35s ease,background-color .35s ease,border-color .35s ease;
}
.nav.scrolled{
  padding:10px 0;
  background-color:var(--glass1-bg);
  background-image:var(--glass-sheen);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  backdrop-filter:blur(18px) saturate(1.3);
  border-bottom-color:var(--line);
  box-shadow:var(--inset-hi);
}
.nav-inner{display:flex;align-items:center;gap:30px}

.brand{display:inline-flex;align-items:center;gap:12px;color:var(--fg)}
.brand img{width:24px;height:auto;transition:width .3s ease}
.nav.scrolled .brand img{width:20px}
.brand-name{font:600 .82rem/1 var(--font-ui);letter-spacing:.38em;text-transform:uppercase}

.nlinks{display:flex;align-items:center;gap:26px;margin-left:auto}
.nlink{
  position:relative;display:inline-block;padding:8px 2px;
  font:500 .82rem/1 var(--font-ui);letter-spacing:.04em;color:var(--muted);
  transition:color .25s ease;
}
.nlink::after{
  content:"";position:absolute;left:2px;right:100%;bottom:2px;height:1px;
  background:var(--accent-hi);transition:right .3s ease;
}
.nlink:hover{color:var(--fg)}
.nlink:hover::after{right:2px}
.nlink[aria-current="page"]{color:var(--fg)}
.nlink[aria-current="page"]::after{right:2px}

.nav-actions{display:flex;align-items:center;gap:12px}

.tgl{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);color:var(--muted);
  transition:color .25s ease,border-color .25s ease;
}
.tgl:hover{color:var(--fg);border-color:var(--accent-line)}
.tgl svg{width:17px;height:17px}
.tgl .ic-moon{display:none}
:root[data-theme="light"] .tgl .ic-sun{display:none}
:root[data-theme="light"] .tgl .ic-moon{display:block}

.nav-burger{
  display:none;position:relative;width:42px;height:42px;
  border:1px solid var(--line);border-radius:var(--r-md);
  transition:border-color .25s ease;
}
.nav-burger:hover{border-color:var(--accent-line)}
.nav-burger i{
  position:absolute;left:12px;right:12px;height:2px;border-radius:2px;
  background:var(--fg);transition:transform .3s ease,top .3s ease;
}
.nav-burger i:first-child{top:16px}
.nav-burger i:last-child{top:24px}
.nav-burger[aria-expanded="true"] i:first-child{top:20px;transform:rotate(45deg)}
.nav-burger[aria-expanded="true"] i:last-child{top:20px;transform:rotate(-45deg)}

.sheet{
  position:absolute;top:calc(100% + 10px);left:14px;right:14px;z-index:75;
  display:flex;flex-direction:column;gap:4px;padding:18px;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background-color:var(--glass1-bg);background-image:var(--glass-sheen);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:var(--inset-hi),var(--shadow-2);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .3s ease,transform .3s ease,visibility .3s;
}
.sheet.open{opacity:1;visibility:visible;transform:none}
.sheet .nlink{padding:12px 10px;font-size:1rem}
.sheet .btn{margin-top:10px;justify-content:center}

/* --------------------------------------------------------------
   07 BUTTONS
   .btn.white  = the hero pill: white with dark label on dark theme,
                 inverts to near-black with light label on light theme
                 (max-contrast pill in both worlds).
   .btn.primary = accent gradient, per-theme ink.
   .btn.ghost   = hairline outline.
-------------------------------------------------------------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  height:50px;padding:0 26px;border-radius:999px;border:1px solid transparent;
  font:600 .92rem/1 var(--font-ui);letter-spacing:.01em;white-space:nowrap;
  cursor:pointer;user-select:none;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease,
             background-color .25s ease,border-color .25s ease,color .25s ease;
}
.btn:active{transform:scale(.985)}
.btn.sm{height:40px;padding:0 18px;font-size:.85rem}

.btn.white{
  background:var(--pill-bg);color:var(--pill-ink);
  box-shadow:0 12px 30px -12px rgba(0,0,0,.55);
}
.btn.white:hover{transform:translateY(-1px);box-shadow:0 16px 36px -12px rgba(0,0,0,.6)}

.btn.primary{
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  color:var(--primary-ink);
  box-shadow:0 12px 30px -10px color-mix(in srgb,var(--accent) 45%,transparent),var(--inset-hi);
}
.btn.primary:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 38px -10px color-mix(in srgb,var(--accent) 55%,transparent),var(--inset-hi);
}

.btn.ghost{
  border-color:var(--line);color:var(--fg);
  background:color-mix(in srgb,var(--surface) 30%,transparent);
}
.btn.ghost:hover{border-color:var(--accent-line);color:var(--accent-t)}

/* --------------------------------------------------------------
   08 CHIPS
-------------------------------------------------------------- */
.chip{
  display:inline-flex;align-items:center;gap:.6em;
  padding:.55em 1.05em;border-radius:999px;
  border:1px solid var(--line);
  background:color-mix(in srgb,var(--surface) 55%,transparent);
  font:500 .68rem/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;
}
.chip .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}

/* --------------------------------------------------------------
   09 GLASS TIERS + CARDS
   Tier 1 = chrome (nav, CTA band, sheet, forms). Tier 2 = cards.
   Dense mock content is SOLID, never glass (.card.solid).
-------------------------------------------------------------- */
.glass1,.glass2{
  border:1px solid var(--line);border-radius:var(--r-lg);
  background-image:var(--glass-sheen);
  box-shadow:var(--inset-hi),var(--shadow-1);
}
.glass1{
  background-color:var(--glass1-bg);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  backdrop-filter:blur(18px) saturate(1.3);
}
.glass2{
  background-color:var(--glass2-bg);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  backdrop-filter:blur(16px) saturate(1.3);
}

.card{
  position:relative;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background-color:var(--glass2-bg);background-image:var(--glass-sheen);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:var(--inset-hi),var(--shadow-1);
  padding:clamp(22px,3vw,30px);
}
.card.solid{background-color:var(--surface);background-image:none;-webkit-backdrop-filter:none;backdrop-filter:none}
@media (hover:hover) and (pointer:fine){
  .card{transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s ease}
  .card:hover{transform:translateY(-3px);border-color:var(--accent-line)}
}

/* --------------------------------------------------------------
   10 SECTION SCAFFOLDING + TYPE
-------------------------------------------------------------- */
.wrap{max-width:1200px;margin-inline:auto;padding-inline:clamp(18px,4vw,32px)}
.sec{position:relative;padding-block:clamp(84px,13vh,160px)}
main>.sec:first-child{padding-top:clamp(120px,18vh,180px)}

.sec-head{max-width:660px;margin:0 auto 48px;text-align:center}
.sec-head .lede{margin-top:14px}

.eyebrow{
  display:block;margin:0 0 14px;
  font:500 .72rem/1.4 var(--font-mono);letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent-hi);
}

/* Scale doctrine (polish pass 28.07): EXTREME size contrast. A huge
   display, tiny mono eyebrows, and almost nothing in between - that
   jump is what reads as designed rather than generated. Accent is
   made with size and letter-spacing, never with a serif. */
.display{
  font-size:clamp(3.4rem,2rem + 7vw,10.5rem);
  line-height:.9;font-weight:800;letter-spacing:-.02em;text-transform:uppercase;
}
.sec-title{
  font-size:clamp(2.2rem,1.2rem + 4vw,5.6rem);
  line-height:1.02;font-weight:700;letter-spacing:-.02em;
  text-wrap:balance;
}
.lede{
  font-size:clamp(1rem,.95rem + .3vw,1.1rem);
  line-height:1.6;color:var(--muted);font-weight:400;
}

/* ONE gradient headline per page */
.grad-text{color:var(--accent)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .grad-text{
    background:var(--grad-h1);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
  }
}

.hairline{height:1px;border:0;background:var(--line)}

.link{
  color:var(--accent-t);border-bottom:1px solid var(--accent-line);
  transition:border-color .2s ease;
}
.link:hover{border-bottom-color:var(--accent-t)}

/* --------------------------------------------------------------
   11 THEME-SWAPPED PRODUCT IMAGE (.pshot)
   The bottle cut-outs exist twice: shot on a dark set and on a
   light set (transparent glass carries the light it was shot on).
   Stack both inside one wrapper; CSS shows the right one per
   [data-theme]. No filter hacks, no layout shift: the DARK image
   is the layout master (it stays in flow and only flips
   visibility), the LIGHT image sits absolutely on top with
   object-fit:contain, anchored to the bottom edge so both read as
   standing on the same ground line.

   Usage:
     <div class="pshot" style="width:min(300px,40vw)">
       <img class="pshot-dark"  src="assets/img/his-dark-b-400.webp"
            width="400" height="1060" alt="His Majesty flacon" decoding="async">
       <img class="pshot-light" src="assets/img/his-blush-b-346.webp"
            width="346" height="915" alt="His Majesty flacon" decoding="async">
     </div>

   Notes:
   - <picture class="pshot-dark"> / <picture class="pshot-light">
     as the direct child works too.
   - Give BOTH twins the same alt: visibility:hidden removes the
     inactive one from the a11y tree, so exactly one is announced.
   - Both variants load in both themes (that is what makes the
     theme flip instant); lazy-load below-the-fold shots as usual.
-------------------------------------------------------------- */
.pshot{position:relative;display:block;line-height:0}
.pshot > .pshot-dark{display:block;width:100%}
img.pshot-dark{height:auto}
.pshot > picture.pshot-dark img{display:block;width:100%;height:auto}
.pshot > .pshot-light{
  position:absolute;inset:0;width:100%;height:100%;
  visibility:hidden;opacity:0;
}
img.pshot-light{object-fit:contain;object-position:50% 100%}
.pshot > picture.pshot-light img{
  display:block;width:100%;height:100%;
  object-fit:contain;object-position:50% 100%;
}
:root[data-theme="light"] .pshot > .pshot-dark{visibility:hidden;opacity:0}
:root[data-theme="light"] .pshot > .pshot-light{visibility:visible;opacity:1}

/* --------------------------------------------------------------
   12 CTA BAND + INTEREST FORM + INPUTS
-------------------------------------------------------------- */
.ctaband{
  position:relative;overflow:hidden;text-align:center;
  padding:clamp(40px,6vw,64px) clamp(22px,5vw,56px);
  border:1px solid var(--line);border-radius:var(--r-lg);
  background-color:var(--glass1-bg);background-image:var(--glass-sheen);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:var(--inset-hi),var(--shadow-1);
}
.ctaband::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(560px 240px at 50% 0%,var(--accent-soft),transparent 70%);
}
.ctaband>*{position:relative}
.ctaband .lede{margin-top:10px}

.iform{display:flex;gap:10px;max-width:480px;margin:26px auto 0}
.iform .input{flex:1;min-width:0}

.input{
  width:100%;height:50px;border-radius:999px;padding:0 22px;
  background:var(--field-bg);border:1px solid var(--line);color:var(--fg);
  font:500 .95rem/1 var(--font-ui);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.input::placeholder{color:var(--faint)}
.input:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.input.err{border-color:var(--deny);box-shadow:0 0 0 3px color-mix(in srgb,var(--deny) 14%,transparent)}

/* --------------------------------------------------------------
   13 TOAST (lazy DOM from site.js, aria-live polite)
-------------------------------------------------------------- */
.toast-region{
  position:fixed;right:18px;bottom:18px;z-index:95;
  display:flex;flex-direction:column;gap:10px;align-items:flex-end;
  pointer-events:none;max-width:min(380px,calc(100vw - 36px));
}
.toast{
  pointer-events:auto;width:100%;
  border:1px solid var(--line);border-left:2px solid var(--accent);
  border-radius:var(--r-md);
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  padding:13px 18px 14px;box-shadow:var(--shadow-2);
  opacity:0;transform:translateY(12px);
  transition:opacity .35s ease,transform .35s ease;
}
.toast.show{opacity:1;transform:none}
.toast.out{opacity:0;transform:translateY(6px)}
.toast b{display:block;font:600 .86rem/1.4 var(--font-ui)}
.toast span{display:block;font:400 .8rem/1.5 var(--font-ui);color:var(--muted);margin-top:2px}

/* --------------------------------------------------------------
   14 FOOTER
-------------------------------------------------------------- */
.footer{
  position:relative;border-top:1px solid var(--line);
  padding:48px 0 56px;margin-top:clamp(40px,8vh,90px);
}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.f-brand{display:inline-flex;align-items:center;gap:11px}
.f-brand img{width:20px;height:auto}
.f-brand span{font:600 .78rem/1 var(--font-ui);letter-spacing:.38em;text-transform:uppercase}
.f-line{color:var(--muted);font-size:.9rem}
/* --muted, not --faint: this is readable text, and --faint is 3.82:1
   on the dark bg (fails AA; --faint is for hairlines and decor only) */
.f-legal{color:var(--muted);font:500 .72rem/1 var(--font-mono);letter-spacing:.08em}

/* --------------------------------------------------------------
   15 REVEAL PRIMITIVES
   Hidden ONLY under html.js (set by the shared head script), so
   no-JS visitors see everything. site.js adds .in via IO with a
   sweep failsafe and an absolute 5s reveal-all.
   Stagger: style="--d:.12s"
-------------------------------------------------------------- */
html.js .rv{
  opacity:0;transform:translateY(18px);
  transition:opacity .75s cubic-bezier(.2,.6,.2,1),transform .75s cubic-bezier(.2,.6,.2,1);
  transition-delay:var(--d,0s);
}
html.js .rv.in{opacity:1;transform:none}

/* --------------------------------------------------------------
   16 UTILITIES
-------------------------------------------------------------- */
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.center{text-align:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}

/* --------------------------------------------------------------
   17 RESPONSIVE
   Base is designed at 1440; clamps carry 1024. Nav collapses at
   860. Grids stack at 768. Blur budget steps down at 760. Fine
   tuning at 420 keeps 360 clean with no horizontal scroll.
-------------------------------------------------------------- */
@media (max-width:1024px){
  .nlinks{gap:20px}
  .nav-inner{gap:22px}
}

@media (max-width:860px){
  .nlinks{display:none}
  .nav-burger{display:inline-flex;align-items:center;justify-content:center}
}
@media (min-width:861px){
  .sheet{display:none}
}

@media (max-width:768px){
  .grid2{grid-template-columns:1fr}
  .sec{padding-block:clamp(52px,9vh,84px)}
  main>.sec:first-child{padding-top:clamp(104px,16vh,150px)}
  .sec-head{margin-bottom:36px}
}

@media (max-width:760px){
  .card,.glass2{
    -webkit-backdrop-filter:none;backdrop-filter:none;
    background-color:color-mix(in srgb,var(--surface) 94%,transparent);
  }
  .ctaband,.glass1{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .nav.scrolled{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .sheet{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  .blob{filter:blur(60px)}
  .toast-region{left:12px;right:12px;bottom:12px;max-width:none}
}

@media (max-width:600px){
  .nav-actions>.btn{display:none} /* the sheet carries the CTA */
}

@media (max-width:420px){
  .wrap{padding-inline:16px}
  .btn{padding:0 20px}
  .brand-name{letter-spacing:.3em;font-size:.76rem}
  .iform{flex-direction:column}
  /* flex:1 1 0% is the ROW sizing; in the column stack it takes over
     the MAIN (vertical) axis and squashes the 50px field to content
     height (measured 21px on 390) - reset the basis in the column */
  .iform .input{flex:0 0 auto}
  .iform .btn{width:100%}
}
@media (max-width:520px){
  .iform{flex-direction:column}
  .iform .input{flex:0 0 auto}
  .iform .btn{width:100%}
}

/* --------------------------------------------------------------
   19 SCROLL SCENES (scroll-choreography pages)
   .scene > .scene-stage. BARGOT.initScenes() writes the wrapper's
   0..1 scroll progress to --p on the scene; page CSS maps --p to
   transforms via calc(). Pinning exists ONLY under html.scenes-on
   (engine alive + motion allowed + viewport >= 761px). Without the
   class every scene is a normal static section showing its designed
   frame - no JS required to read the page.
-------------------------------------------------------------- */
.scene{position:relative;--p:1}
.scene-stage{position:relative;min-height:100svh}
html.scenes-on .scene{height:var(--len,200vh)}
html.scenes-on .scene-stage{
  position:sticky;top:0;height:100svh;min-height:0;overflow:clip;
}

/* --------------------------------------------------------------
   20 CART (badge + drawer, both injected by site.js initCart -
   the shared shell markup carries none of this)
-------------------------------------------------------------- */
.cart-btn{
  display:inline-flex;align-items:center;gap:.55em;
  height:40px;padding:0 16px;border-radius:999px;
  border:1px solid var(--line);color:var(--fg);
  font:600 .82rem/1 var(--font-ui);letter-spacing:.02em;cursor:pointer;
  transition:border-color .25s ease,color .25s ease;
}
.cart-btn:hover{border-color:var(--accent-line);color:var(--accent-t)}
.cart-n{
  min-width:20px;height:20px;padding:0 5px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:var(--primary-ink);
  font:600 .68rem/1 var(--font-mono);
}
/* author display beats the [hidden] UA style - make hidden explicit,
   or a "closed" drawer still covers and intercepts the nav */
.cart-veil[hidden],.cart-drawer[hidden]{display:none}
.cart-veil{
  position:fixed;inset:0;z-index:96;
  background:rgba(10,10,13,.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:97;
  width:min(420px,92vw);display:flex;flex-direction:column;
  border-left:1px solid var(--line);
  background-color:color-mix(in srgb,var(--surface) 96%,transparent);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:var(--shadow-2);outline:none;
  padding:22px 22px 26px;overflow-y:auto;
}
.cart-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.cart-head h2{font-size:1.25rem;font-weight:700;letter-spacing:-.01em}
.cart-x{
  font:500 .72rem/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);cursor:pointer;padding:8px 2px;
}
.cart-x:hover{color:var(--fg)}
.cart-empty{padding:34px 0;text-align:center}
.cart-empty p{color:var(--muted)}
.cart-empty p + p{margin-top:14px;display:flex;gap:18px;justify-content:center}
.cart-lines{display:flex;flex-direction:column}
.cart-line{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--line);
}
.cl-info b{display:block;font-size:.95rem}
.cl-info span{display:block;margin-top:3px;font:500 .68rem/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cl-info .cl-price{color:var(--accent-t)}
.cl-ctl{display:flex;align-items:center;gap:8px}
.cl-step{
  width:30px;height:30px;border-radius:50%;border:1px solid var(--line);
  color:var(--fg);font:600 .9rem/1 var(--font-ui);cursor:pointer;
  transition:border-color .2s ease;
}
.cl-step:hover{border-color:var(--accent-line)}
.cl-qty{min-width:18px;text-align:center;font:600 .9rem/1 var(--font-mono)}
.cl-rm{
  margin-left:6px;font:500 .64rem/1 var(--font-mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);cursor:pointer;padding:6px 2px;
}
.cl-rm:hover{color:var(--deny-t)}
.cart-foot{margin-top:auto;padding-top:20px}
.cart-total{
  display:flex;align-items:baseline;justify-content:space-between;
  padding:14px 2px;border-top:1px solid var(--line);
  font-weight:600;
}
.cart-total .ph{color:var(--accent-t)}
.cart-go{width:100%;justify-content:center;margin-top:12px}
@media (max-width:520px){
  .cart-btn{padding:0 12px}
}

/* --------------------------------------------------------------
   18 REDUCED MOTION
   Designed static frames: keyframes killed, reveals shown,
   spotlight gone. Sims freeze to their baked frame via
   BARGOT.isReduced() on the JS side.
-------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001s!important;
    animation-iteration-count:1!important;
    transition-duration:.001s!important;
  }
  .spot{display:none!important}
  html.js .rv{opacity:1!important;transform:none!important;transition:none!important}
}