/* ============================================================
   BAMBOVIA — Core System
   Design tokens, reset, typography, chrome, motion primitives
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Typefaces */
  --f-display:'Bodoni Moda','Didot','Playfair Display',Georgia,serif;
  --f-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --f-label:'Jost','Futura','Century Gothic',sans-serif;
  --f-deva:'Tiro Devanagari Hindi',serif;

  /* Ground — neutral near-blacks, no colour cast */
  --ink-000:#070706;
  --ink-050:#0A0A09;
  --ink-100:#101010;
  --ink-200:#171716;
  --ink-300:#20201E;
  --ink-400:#2B2B28;
  --line:rgba(239,235,228,.09);
  --line-strong:rgba(239,235,228,.19);

  /* Forest — surfaces and shadow only, never a bright accent */
  --bam-900:#1B2318;
  --bam-700:#28331F;
  --bam-500:#44553F;
  --bam-300:#6E8266;
  --bam-200:#8A9C82;
  --bam-100:#B3C0AC;

  /* Kiln — burnt umber, not neon */
  --ember-600:#8F421D;
  --ember-500:#A85327;
  --ember-400:#C9622E;
  --ember-300:#DE8A55;

  /* Aubergine — the ninth roast */
  --amy-700:#3E2446;
  --amy-500:#5E3E6B;
  --amy-400:#7E5C8C;
  --amy-300:#B99BC4;

  /* Champagne — the single metallic. Muted, never yellow. */
  --gold-600:#9A8770;
  --gold-500:#C6B295;
  --gold-300:#DCCDB4;

  /* Neutral / type */
  --bone:#EFEBE4;
  --bone-dim:#C3BEB4;
  --muted:#8A857B;
  --muted-2:#615D56;

  /* Roast identity — white, grey, pink-lavender, deep purple/charcoal */
  --r1:#EDE9E0;
  --r3:#A5A29B;
  --r6:#C9A2BE;
  --r9:#43254A;

  /* Type scale (fluid) */
  --fs-mono:clamp(.66rem,.62rem + .18vw,.76rem);
  --fs-xs:clamp(.78rem,.75rem + .15vw,.86rem);
  --fs-sm:clamp(.88rem,.84rem + .2vw,.96rem);
  --fs-base:clamp(1rem,.95rem + .25vw,1.09rem);
  --fs-lg:clamp(1.15rem,1.05rem + .5vw,1.4rem);
  --fs-xl:clamp(1.5rem,1.25rem + 1.1vw,2.1rem);
  --fs-2xl:clamp(2rem,1.5rem + 2.2vw,3.4rem);
  --fs-3xl:clamp(2.6rem,1.7rem + 3.9vw,5.6rem);
  --fs-4xl:clamp(3.2rem,1.6rem + 6.6vw,8.4rem);

  /* Space — generous enough to feel composed, tight enough to feel edited. */
  --gut:clamp(1.25rem,.7rem + 2.6vw,4rem);
  --sec:clamp(3.5rem,2rem + 5.2vw,7.5rem);
  --maxw:1400px;
  --readw:62ch;

  /* Motion */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.76,0,.24,1);
  --e-spring:cubic-bezier(.34,1.56,.64,1);

  /* Radius */
  --r-sm:6px; --r-md:14px; --r-lg:24px; --r-xl:34px; --r-full:999px;

  --nav-h:78px;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scrollbar-color:var(--bam-700) var(--ink-050);
  /* Reserve the scrollbar track permanently. Locking scroll sets
     overflow:hidden, which removes the bar and shifts the whole page sideways
     unless the gutter is already held open. */
  scrollbar-gutter:stable;
  /* base colour lives here so the fixed #bg-field (z-index:-2) can show
     through the body rather than being painted over by it */
  background:var(--ink-050);
}
body{
  background:transparent;
  color:var(--bone-dim);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:var(--fs-base);
  line-height:1.65;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto;background:var(--ink-200)}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:none}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--gold-500);outline-offset:3px;border-radius:2px}
::selection{background:var(--amy-500);color:#fff}

/* Scrollbar (WebKit) */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--ink-000)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--bam-700),var(--bam-500));border-radius:99px;border:2px solid var(--ink-000)}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(var(--bam-500),var(--bam-300))}

/* ---------- 3. TYPOGRAPHY ---------- */
h1,h2,h3,h4,h5{
  font-family:var(--f-display);
  font-weight:400;                 /* Didone hairlines — weight comes from scale, not bold */
  font-optical-sizing:auto;
  line-height:1.06;
  letter-spacing:-.012em;
  color:var(--bone);
}
h1,h2{font-weight:400;letter-spacing:-.018em}
h3,h4,h5{font-weight:500}
h1{font-size:var(--fs-3xl)}
h2{font-size:var(--fs-2xl)}
h3{font-size:var(--fs-xl);line-height:1.14}
h4{font-size:var(--fs-lg);line-height:1.25}
p{max-width:var(--readw)}
strong{color:var(--bone);font-weight:600}

.display{font-size:var(--fs-4xl);line-height:.94;letter-spacing:-.026em}
.serif{font-family:var(--f-display)}
.deva{font-family:var(--f-deva);font-weight:400}
.mono{
  font-family:var(--f-label);
  font-weight:300;
  font-size:var(--fs-mono);
  letter-spacing:.3em;
  text-transform:uppercase;
}
.lede{font-size:var(--fs-lg);line-height:1.55;color:var(--bone-dim)}
.dim{color:var(--muted)}
.gold{color:var(--gold-300)}
.amy{color:var(--amy-300)}
.bam{color:var(--bam-200)}
.ember{color:var(--ember-400)}

.grad-gold{
  background:linear-gradient(100deg,var(--bone) 0%,var(--gold-300) 55%,var(--gold-600) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.grad-amy{
  background:linear-gradient(100deg,var(--bone) 0%,var(--amy-300) 50%,var(--amy-500) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* Eyebrow */
.eyebrow{
  display:inline-flex;align-items:center;gap:1em;
  font-family:var(--f-label);font-weight:300;
  font-size:var(--fs-mono);letter-spacing:.4em;text-transform:uppercase;
  color:var(--gold-600);margin-bottom:2rem;
}
.eyebrow::before{
  content:'';width:clamp(24px,4vw,56px);height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-700,var(--gold-600)));
}

/* ---------- 4. LAYOUT ---------- */
.wrap{width:min(100% - var(--gut)*2,var(--maxw));margin-inline:auto}
.wrap-narrow{width:min(100% - var(--gut)*2,980px);margin-inline:auto}
.section{padding-block:var(--sec);position:relative}
.grid{display:grid;gap:clamp(1.25rem,2.5vw,2.5rem)}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.center{text-align:center}
.center p{margin-inline:auto}

/* Hairline divider */
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--line-strong),transparent);border:0}

/* ---------- 5. CUSTOM CURSOR ---------- */
/* A champagne arrow, drawn as the real system pointer so it never lags,
   plus a canvas trail of salt grains behind it. */
@media (hover:hover) and (pointer:fine){
  body.cursor-on,
  body.cursor-on *{
    cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cpath d='M4 2L4 19.5L8.6 15.3L11.5 21.6L14.4 20.2L11.5 14L17.2 14Z' fill='%23DCCDB4' stroke='%230A0A09' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2,auto;
  }
  body.cursor-on a,body.cursor-on button,body.cursor-on [data-cur],
  body.cursor-on label,body.cursor-on select,body.cursor-on summary{
    cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cpath d='M4 2L4 19.5L8.6 15.3L11.5 21.6L14.4 20.2L11.5 14L17.2 14Z' fill='%23F0E7D8' stroke='%230A0A09' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2,pointer;
  }
  body.cursor-on input,body.cursor-on textarea{cursor:text}
}
#cur-trail{position:fixed;inset:0;pointer-events:none;z-index:9997;opacity:.9}
@media (hover:none),(pointer:coarse){#cur-trail{display:none}}

/* ---------- 6. PRELOADER ---------- */
#preloader{
  position:fixed;inset:0;z-index:10000;
  background:var(--ink-000);
  display:grid;place-items:center;
  transition:opacity .7s var(--e-out),visibility .7s;
}
#preloader.done{opacity:0;visibility:hidden;pointer-events:none}
.pl-inner{display:grid;place-items:center;gap:2.8rem;width:min(84vw,460px)}
.pl-rule{width:100%;height:1px;background:rgba(239,235,228,.10);position:relative;overflow:hidden}
.pl-rule i{position:absolute;inset:0;width:0;background:var(--gold-500);transition:width .3s linear}
.pl-meta{display:flex;justify-content:space-between;width:100%;align-items:baseline}
.pl-word{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.25rem,4vw,1.95rem);letter-spacing:.52em;text-indent:.52em;
  color:var(--bone);text-transform:uppercase;white-space:nowrap;
}
.pl-word span{display:inline-block;opacity:0;translate:0 .55em;animation:plLetter .9s var(--e-out) forwards}
@keyframes plLetter{to{opacity:1;translate:0 0}}
.pl-pct{font-family:var(--f-label);font-size:.68rem;color:var(--gold-500);letter-spacing:.2em}
.pl-status{font-family:var(--f-label);font-size:.54rem;letter-spacing:.32em;color:var(--muted-2);text-transform:uppercase}

/* ---------- 7. PAGE TRANSITION ----------
   Native cross-document View Transitions. The browser freezes the outgoing
   page, loads the incoming one and animates between them as a single atomic
   operation — so there is no window in which a half-loaded page can show
   through, and no JS timing to get wrong.

   The hand-rolled curtain this replaces had five moving parts spread across
   two documents (outgoing animation, navigation commit, incoming first paint,
   incoming JS mounting the curtain, cloak clearing). Any one of them running
   late produced the flash. This cannot: the browser owns the whole handoff.

   Browsers without support simply navigate instantly — no animation, but
   never a broken one.                                                        */
@view-transition{ navigation:auto }

body.loading{overflow:hidden}

/* One continuous upward motion: the outgoing page lifts and dissolves while
   the incoming one wipes up from below. Old and new share the direction, so it
   reads as a single sweep rather than a close followed by an open. */
::view-transition-group(root){ animation-duration:.60s }
::view-transition-old(root){
  animation:bvPageOut .44s var(--e-io) both;
  mix-blend-mode:normal;
}
::view-transition-new(root){
  animation:bvPageIn .60s var(--e-io) both;
  mix-blend-mode:normal;
}
@keyframes bvPageOut{
  from{ transform:translateY(0);      opacity:1 }
  to  { transform:translateY(-5vh);   opacity:0 }
}
@keyframes bvPageIn{
  from{ clip-path:inset(100% 0 0 0);  transform:translateY(3vh) }
  to  { clip-path:inset(0 0 0 0);     transform:translateY(0) }
}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){ animation:none }
}

/* ---------- 8. NAV ---------- */
#topbar{
  position:fixed;top:0;left:0;right:0;z-index:900;
  transition:transform .45s var(--e-io);
}
#topbar.hide{transform:translateY(-105%)}
.nav{
  position:relative;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background .5s var(--e-out),backdrop-filter .5s,border-color .5s,height .4s var(--e-out);
  border-bottom:1px solid transparent;
}
.nav.solid{
  background:rgba(8,11,7,.82);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  border-bottom-color:var(--line);
  height:66px;
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:2rem;width:min(100% - var(--gut)*2,1600px)}
/* ---- Wordmark. Type only — no emblem, no container.
   The negative right margin cancels the trailing letter-space so the
   sub-line optically centres under the wordmark. ---- */
.nav-logo{display:inline-block;flex-shrink:0;line-height:1;text-align:center}
.logo-word{
  display:block;
  font-family:var(--f-display);
  font-optical-sizing:auto;
  font-weight:400;
  font-size:clamp(1.02rem,1.5vw,1.32rem);
  letter-spacing:.42em;
  margin-right:-.42em;
  color:var(--bone);
  text-transform:uppercase;
  transition:color .45s var(--e-out);
}
.nav-logo:hover .logo-word{color:var(--gold-300)}
.logo-sub{
  display:block;margin-top:.5em;margin-right:-.42em;
  font-family:var(--f-label);font-weight:300;
  font-size:.48rem;letter-spacing:.42em;
  text-transform:uppercase;color:var(--muted-2);
}
.footer .logo-word{font-size:clamp(1.3rem,2.2vw,1.9rem)}
.footer .logo-sub{font-size:.54rem}
@media(max-width:560px){
  .logo-word{font-size:.92rem;letter-spacing:.3em;margin-right:-.3em}
  .logo-sub{display:none}
}
.nav-links{display:flex;align-items:center;gap:clamp(1.1rem,2.1vw,2.3rem)}
.nav-link{
  position:relative;font-size:var(--fs-xs);letter-spacing:.09em;
  text-transform:uppercase;color:var(--bone-dim);padding:.55rem 0;
  transition:color .3s;font-weight:500;
}
.nav-link::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--gold-300);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--e-out);
}
.nav-link:hover{color:var(--bone)}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1);transform-origin:left}
.nav-link.active{color:var(--gold-300)}
.nav-right{display:flex;align-items:center;gap:.85rem}

.cart-btn{
  position:relative;display:flex;align-items:center;gap:.55rem;
  padding:.6rem 1.15rem;border:1px solid var(--line-strong);border-radius:var(--r-full);
  font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;
  transition:border-color .35s,background .35s,color .35s;
}
.cart-btn:hover{border-color:var(--gold-500);background:rgba(201,162,39,.09);color:var(--bone)}
.cart-count{
  min-width:19px;height:19px;padding:0 5px;border-radius:99px;
  background:var(--gold-500);color:var(--ink-000);
  font-size:10px;font-weight:800;display:grid;place-items:center;line-height:1;
  transition:transform .35s var(--e-spring);
}
.cart-count.pop{transform:scale(1.45)}

.burger{
  display:none;width:44px;height:44px;border:1px solid var(--line-strong);
  border-radius:50%;place-items:center;gap:5px;flex-direction:column;
}
.burger span{width:17px;height:1.5px;background:var(--bone);border-radius:2px;transition:.4s var(--e-out)}
body.menu-open .burger span:nth-child(1){transform:translateY(3.25px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){transform:translateY(-3.25px) rotate(-45deg)}

/* Mobile drawer */
#mobile-menu{
  position:fixed;inset:0;z-index:880;background:var(--ink-000);
  padding:calc(var(--nav-h) + 2rem) var(--gut) 3rem;
  display:flex;flex-direction:column;justify-content:center;gap:.3rem;
  clip-path:inset(0 0 100% 0);transition:clip-path .75s var(--e-io);
  overflow-y:auto;
}
body.menu-open #mobile-menu{clip-path:inset(0 0 0 0)}
#mobile-menu a{
  font-family:'Fraunces',serif;font-size:clamp(1.9rem,7vw,3rem);
  color:var(--bone);padding:.32em 0;border-bottom:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  opacity:0;transform:translateY(26px);transition:opacity .5s var(--e-out),transform .5s var(--e-out),color .3s;
}
body.menu-open #mobile-menu a{opacity:1;transform:none}
#mobile-menu a:hover{color:var(--gold-300)}
#mobile-menu a i{font-style:normal;font-family:var(--f-label);font-size:.6rem;color:var(--muted-2);letter-spacing:.2em}

@media(max-width:1080px){
  .nav-links{display:none}
  .burger{display:flex}
  .cart-btn span.cart-word{display:none}
}

/* ---------- 9. BUTTONS ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  padding:1.02rem 2.1rem;border-radius:var(--r-full);
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  overflow:hidden;isolation:isolate;transition:color .4s var(--e-out),border-color .4s,transform .3s var(--e-out);
  border:1px solid transparent;white-space:nowrap;
}
.btn::before{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;
  transform:translateY(101%);transition:transform .52s var(--e-io);
}
.btn:hover::before{transform:translateY(0)}
.btn:active{transform:scale(.97)}

.btn-gold{background:linear-gradient(100deg,var(--gold-300),var(--gold-500));color:var(--ink-000)}
.btn-gold::before{background:var(--bone)}
.btn-gold:hover{color:var(--ink-000)}

.btn-ghost{border-color:var(--line-strong);color:var(--bone)}
.btn-ghost::before{background:linear-gradient(100deg,var(--gold-300),var(--gold-500))}
.btn-ghost:hover{color:var(--ink-000);border-color:var(--gold-300)}

.btn-bamboo{background:linear-gradient(100deg,var(--bam-500),var(--bam-700));color:var(--bone)}
.btn-bamboo::before{background:linear-gradient(100deg,var(--bam-300),var(--bam-500))}
.btn-bamboo:hover{color:var(--ink-000)}

.btn-amy{background:linear-gradient(100deg,var(--amy-400),var(--amy-700));color:#fff}
.btn-amy::before{background:linear-gradient(100deg,var(--amy-300),var(--amy-400))}
.btn-amy:hover{color:var(--ink-000)}

.btn-sm{padding:.72rem 1.4rem;font-size:.68rem}
.btn-lg{padding:1.2rem 2.7rem}
.btn[disabled]{opacity:.45;pointer-events:none}

/* Text link with arrow */
.tlink{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-300);font-weight:600;position:relative;padding-bottom:.35rem;
}
.tlink::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;opacity:.35;transform-origin:right;transition:transform .45s var(--e-out)}
.tlink:hover::after{transform:scaleX(0)}
.tlink .arw{transition:transform .4s var(--e-out)}
.tlink:hover .arw{transform:translateX(6px)}

/* Magnetic wrapper */
.mag{display:inline-block;will-change:transform}

/* ---------- 10. REVEAL / MOTION PRIMITIVES ---------- */
[data-rv]{opacity:0;will-change:transform,opacity}
[data-rv="up"]{transform:translateY(42px)}
[data-rv="down"]{transform:translateY(-32px)}
[data-rv="left"]{transform:translateX(-46px)}
[data-rv="right"]{transform:translateX(46px)}
[data-rv="scale"]{transform:scale(.9)}
[data-rv="blur"]{filter:blur(14px);transform:translateY(26px)}
[data-rv].seen{
  opacity:1;transform:none;filter:none;
  transition:opacity .95s var(--e-out),transform 1.05s var(--e-out),filter .95s var(--e-out);
  transition-delay:var(--d,0ms);
}

/* Clip reveal for images */
.clip-rv{clip-path:inset(0 0 100% 0);transition:clip-path 1.25s var(--e-io);transition-delay:var(--d,0ms)}
.clip-rv.seen{clip-path:inset(0 0 0 0)}

/* Split text */
.split .ln{display:block;overflow:hidden}
.split .ln > span{display:block;transform:translateY(105%);transition:transform 1.05s var(--e-out);transition-delay:var(--d,0ms)}
.split.seen .ln > span{transform:none}

/* Char stagger */
.chars .ch{display:inline-block;opacity:0;transform:translateY(.5em) rotate(4deg);
  transition:opacity .6s var(--e-out),transform .7s var(--e-out)}
.chars.seen .ch{opacity:1;transform:none}

/* Parallax */
[data-px]{will-change:transform}

/* Marquee */
.marquee{overflow:hidden;display:flex;gap:0;user-select:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee ul{display:flex;flex-shrink:0;align-items:center;gap:clamp(1.6rem,4vw,4rem);padding-right:clamp(1.6rem,4vw,4rem);animation:mq var(--mq,42s) linear infinite}
.marquee:hover ul{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-100%)}}
.marquee li{display:flex;align-items:center;gap:clamp(1.6rem,4vw,4rem);white-space:nowrap}

/* ---------- 11. SURFACES ---------- */
.card{
  background:linear-gradient(165deg,var(--ink-200),var(--ink-100) 60%);
  border:1px solid var(--line);border-radius:var(--r-lg);
  position:relative;overflow:hidden;
  transition:border-color .5s var(--e-out),transform .6s var(--e-out),box-shadow .6s var(--e-out);
}
.card:hover{border-color:var(--line-strong);transform:translateY(-5px);box-shadow:0 26px 60px -24px rgba(0,0,0,.85)}
.card-pad{padding:clamp(1.5rem,2.6vw,2.4rem)}

.glass{
  background:rgba(19,26,16,.55);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--line);
}

/* Noise + grain overlay */
.grain::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
/* Ambient light field — slow drifting warmth behind everything, plus a glow
   that follows the cursor. Keeps large dark passages from reading as dead. */
#bg-field{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.9}
#bg-veil{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(65% 50% at 50% 0%,rgba(198,178,149,.045),transparent 72%);
}
#grain-global{
  position:fixed;inset:0;pointer-events:none;z-index:8000;opacity:.055;
  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='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 8s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,1%)}100%{transform:translate(0,0)}
}

/* Vignette */
.vig::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(120% 80% at 50% 40%,transparent 35%,rgba(5,7,3,.72) 100%);
}

/* Image frame */
.imgf{position:relative;overflow:hidden;border-radius:var(--r-md);background:var(--ink-200)}
.imgf img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--e-out),filter 1s}
.imgf:hover img{transform:scale(1.055)}
.imgf.tall{aspect-ratio:3/4}
.imgf.wide{aspect-ratio:16/9}
.imgf.sq{aspect-ratio:1}

/* Caption */
.cap{
  font-family:var(--f-label);font-size:var(--fs-mono);
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);
  margin-top:.9rem;display:flex;gap:.7rem;align-items:center;
}
.cap::before{content:'';width:16px;height:1px;background:var(--bam-500);flex-shrink:0}

/* Badge */
.badge{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.38rem .85rem;border-radius:var(--r-full);
  border:1px solid var(--line-strong);
  font-family:var(--f-label);font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dim);
}
.badge .dot{width:6px;height:6px;border-radius:50%;background:var(--bam-300)}

/* ---------- 12. CART DRAWER ---------- */
#cart-scrim{
  position:fixed;inset:0;z-index:940;background:rgba(3,5,2,.72);
  backdrop-filter:blur(5px);opacity:0;visibility:hidden;transition:.5s var(--e-out);
}
body.cart-open #cart-scrim{opacity:1;visibility:visible}
#cart{
  position:fixed;top:0;right:0;bottom:0;z-index:950;
  width:min(100%,470px);background:var(--ink-100);
  border-left:1px solid var(--line-strong);
  transform:translateX(101%);transition:transform .68s var(--e-io);
  display:flex;flex-direction:column;
}
body.cart-open #cart{transform:none}
.cart-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.6rem var(--gut);border-bottom:1px solid var(--line);flex-shrink:0;
}
.cart-body{flex:1;overflow-y:auto;padding:1.4rem var(--gut)}
.cart-foot{padding:1.5rem var(--gut) 2rem;border-top:1px solid var(--line);flex-shrink:0;background:var(--ink-200)}
.cart-line{display:flex;gap:1rem;padding:1.15rem 0;border-bottom:1px solid var(--line)}
.cart-line img{width:76px;height:92px;object-fit:cover;border-radius:var(--r-sm);flex-shrink:0}
.cart-line .info{flex:1;min-width:0}
.cart-line h5{font-size:.98rem;margin-bottom:.2rem}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line-strong);border-radius:var(--r-full);margin-top:.6rem}
.qty button{width:28px;height:28px;display:grid;place-items:center;color:var(--bone-dim);transition:color .25s}
.qty button:hover{color:var(--gold-300)}
.qty span{min-width:26px;text-align:center;font-family:var(--f-label);font-size:.78rem}
.cart-empty{text-align:center;padding:4rem 1rem;color:var(--muted)}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);transition:.3s}
.icon-btn:hover{border-color:var(--gold-500);color:var(--gold-300);rotate:90deg}

/* ---------- 13. FOOTER ---------- */
.footer{position:relative;background:var(--ink-000);border-top:1px solid var(--line);overflow:hidden}
.footer-top{padding-block:clamp(3.5rem,7vw,6.5rem)}
.footer-grid{display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}
.footer h6{
  font-family:var(--f-label);font-size:.66rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-500);margin-bottom:1.3rem;font-weight:500;
}
.footer-grid a{display:block;padding:.36rem 0;color:var(--muted);font-size:var(--fs-sm);transition:color .3s,transform .3s var(--e-out)}
.footer-grid a:hover{color:var(--bone);transform:translateX(5px)}
.footer-bot{
  border-top:1px solid var(--line);padding-block:1.5rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center;
  font-size:var(--fs-xs);color:var(--muted-2);
}
.footer-mark{
  font-family:'Fraunces',serif;
  font-size:clamp(3.5rem,15vw,13rem);line-height:.8;letter-spacing:-.045em;
  color:transparent;-webkit-text-stroke:1px rgba(196,222,163,.11);
  text-align:center;padding-bottom:.15em;user-select:none;
}
.socials{display:flex;gap:.6rem}
.socials a{
  width:40px;height:40px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;color:var(--muted);
  transition:.4s var(--e-out);
}
.socials a:hover{border-color:var(--gold-500);color:var(--gold-300);transform:translateY(-3px)}

/* Newsletter */
.nl-form{display:flex;gap:.6rem;flex-wrap:wrap;max-width:440px}
.nl-form input{
  flex:1;min-width:180px;padding:.95rem 1.2rem;
  background:var(--ink-200);border:1px solid var(--line-strong);
  border-radius:var(--r-full);color:var(--bone);font-size:var(--fs-sm);
  transition:border-color .3s;
}
.nl-form input:focus{outline:none;border-color:var(--gold-500)}
.nl-form input::placeholder{color:var(--muted-2)}
.form-note{font-size:var(--fs-xs);margin-top:.7rem;min-height:1.2em}
.form-note.ok{color:var(--bam-200)}
.form-note.err{color:var(--ember-400)}

/* ---------- 14. ANNOUNCEMENT BAR ---------- */
/* One statement at a time, cross-fading. Never wraps, never crowds. */
.announce{
  background:var(--ink-000);
  border-bottom:1px solid var(--line);
  position:relative;overflow:hidden;height:38px;
}
.announce .wrap{height:100%;position:relative}
.announce-line{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;gap:1.1rem;
  font-family:var(--f-label);font-size:.6rem;font-weight:400;
  letter-spacing:.34em;text-transform:uppercase;color:var(--muted);
  opacity:0;transform:translateY(60%);
  transition:opacity .7s var(--e-out),transform .7s var(--e-out);
  white-space:nowrap;pointer-events:none;
}
.announce-line.on{opacity:1;transform:none;pointer-events:auto}
.announce-line.out{opacity:0;transform:translateY(-60%)}
.announce-line b{color:var(--gold-300);font-weight:400}
.announce-line::before,.announce-line::after{
  content:'';width:3px;height:3px;rotate:45deg;
  background:var(--gold-600);flex-shrink:0;opacity:.7;
}
@media(max-width:640px){
  .announce{height:34px}
  .announce-line{font-size:.52rem;letter-spacing:.22em}
  .announce-line::before,.announce-line::after{display:none}
}

/* ---------- 15. UTILITIES ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{
  position:absolute;top:-100px;left:1rem;z-index:10001;padding:.8rem 1.4rem;
  background:var(--gold-500);color:var(--ink-000);border-radius:0 0 var(--r-sm) var(--r-sm);
  font-weight:700;font-size:var(--fs-xs);transition:top .3s;
}
.skip:focus{top:0}
.mt-0{margin-top:0}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.6rem}
.mt-4{margin-top:2.4rem}.mt-5{margin-top:3.4rem}.mt-6{margin-top:4.5rem}
.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.6rem}.mb-4{margin-bottom:2.4rem}.mb-5{margin-bottom:3.4rem}
.nowrap{white-space:nowrap}

/* ---------- 16. REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  [data-rv]{opacity:1 !important;transform:none !important;filter:none !important}
  .clip-rv{clip-path:none !important}
  .split .ln > span{transform:none !important}
  .chars .ch{opacity:1 !important;transform:none !important}
  .cur,#cur-trail,#grain-global{display:none !important}
  .marquee ul{animation:none}
}

/* ---------- 17. PRINT ---------- */
@media print{
  .nav,.footer,#preloader,.cur,#grain-global,#cart,#cart-scrim{display:none !important}
  body{background:#fff;color:#000}
}