/* =========================================================
   MOSSARY — Botanical Infusions
   Dark-glasshouse aesthetic · moss green + citrus yellow
   ========================================================= */

/* ---------- TOKENS ---------- */
:root{
  --ink:        #04100C;
  --ink-2:      #071A12;
  --ink-3:      #0B241A;
  --moss:       #1C4A31;
  --moss-lit:   #4E8C58;
  --citrus:     #E4F455;
  --citrus-dp:  #C6DC2B;
  --amber:      #F7B733;
  --bone:       #F4F3EA;
  --haze:       rgba(244,243,234,.56);
  --hair:       rgba(244,243,234,.16);
  --hair-soft:  rgba(244,243,234,.08);

  --f-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-mono:    'Martian Mono', ui-monospace, 'SFMono-Regular', monospace;
  --f-serif:   'Instrument Serif', Georgia, serif;

  --gut: clamp(18px, 4vw, 64px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--f-display);
  font-variation-settings:'wdth' 100;
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--citrus); color:var(--ink); }

/* ---------- TYPE HELPERS ---------- */
.display{
  font-family:var(--f-display);
  font-variation-settings:'wdth' 122;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:-.022em;
  line-height:.86;
  margin:0;
  font-size:clamp(2.6rem,6.2vw,6.2rem);
}
.display em{
  font-family:var(--f-serif);
  font-style:italic;
  font-variation-settings:normal;
  text-transform:none;
  letter-spacing:-.01em;
  color:var(--citrus);
}
.display.xl{ font-size:clamp(3.6rem,11vw,10rem); }

.eyebrow{
  display:inline-block;
  font-family:var(--f-mono);
  font-size:.62rem;
  font-weight:400;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--citrus);
  margin-bottom:1.4rem;
}
.lede{
  max-width:46ch;
  color:var(--haze);
  font-size:clamp(.95rem,1.12vw,1.06rem);
  line-height:1.62;
}

/* ---------- BUTTONS ---------- */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.7em;
  font-family:var(--f-mono);
  font-size:.66rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:1.05em 1.6em;
  border-radius:0;
  overflow:hidden;
  isolation:isolate;
  transition:color .45s var(--ease), border-color .45s var(--ease);
}
.btn i{
  width:16px; height:1px; background:currentColor; display:block;
  transition:width .45s var(--ease);
}
.btn:hover i{ width:26px; }
.btn::before{
  content:''; position:absolute; inset:0; z-index:-1;
  transform:translateY(101%); transition:transform .5s var(--ease-out);
}
.btn:hover::before{ transform:translateY(0); }

.btn--solid{ background:var(--citrus); color:var(--ink); }
.btn--solid::before{ background:var(--bone); }
.btn--ghost{ border:1px solid var(--hair); color:var(--bone); }
.btn--ghost::before{ background:var(--citrus); }
.btn--ghost:hover{ color:var(--ink); border-color:var(--citrus); }
.btn--full{ width:100%; justify-content:center; }

/* ---------- GRAIN + CURSOR ---------- */
.grain{
  position:fixed; inset:-50%; z-index:9998; pointer-events:none;
  opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 6s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}    20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-4%)} 60%{transform:translate(-3%,-2%)}
  80%{transform:translate(4%,2%)}  100%{transform:translate(0,0)}
}

.cursor{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; mix-blend-mode:difference; }
.cursor__dot{
  position:absolute; width:6px; height:6px; margin:-3px 0 0 -3px;
  background:var(--bone); border-radius:50%;
}
.cursor__ring{
  position:absolute; width:34px; height:34px; margin:-17px 0 0 -17px;
  border:1px solid rgba(244,243,234,.5); border-radius:50%;
  transition:width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), border-color .35s;
}
.cursor.is-link .cursor__ring{ width:58px; height:58px; margin:-29px 0 0 -29px; border-color:var(--citrus); }
@media (hover:none),(pointer:coarse){ .cursor{ display:none; } }

/* ---------- LOADER ---------- */
.loader{
  position:fixed; inset:0; z-index:10000; background:var(--ink);
  display:grid; place-items:center;
  transition:opacity .7s var(--ease), visibility .7s;
}
.loader.is-done{ opacity:0; visibility:hidden; }
.loader__inner{ text-align:center; }
.loader__mark{
  display:block; font-family:var(--f-mono); font-size:.72rem;
  letter-spacing:.6em; text-indent:.6em; color:var(--citrus); margin-bottom:1.2rem;
}
.loader__bar{ display:block; width:170px; height:1px; background:var(--hair); overflow:hidden; }
.loader__bar i{ display:block; height:100%; width:0; background:var(--citrus); transition:width .2s linear; }

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; padding:1.15rem var(--gut);
  border-bottom:1px solid transparent;
  transition:background .5s var(--ease), border-color .5s var(--ease), padding .5s var(--ease);
}
.nav.is-stuck{
  background:rgba(4,16,12,.72);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--hair-soft);
  padding-top:.85rem; padding-bottom:.85rem;
}
.nav__brand{ display:flex; align-items:center; gap:.7rem; font-family:var(--f-mono);
  font-size:.78rem; font-weight:500; letter-spacing:.2em; }
.nav__glyph{ width:26px; height:26px; color:var(--bone); transition:color .4s; }
.nav__brand:hover .nav__glyph{ color:var(--citrus); }

.nav__links{ display:flex; gap:clamp(1.1rem,3vw,3.2rem); }
.nav__links a{
  position:relative; font-family:var(--f-mono); font-size:.64rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--haze);
  padding-bottom:3px; transition:color .35s;
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--citrus); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease-out);
}
.nav__links a:hover{ color:var(--bone); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }

.nav__actions{ display:flex; align-items:center; gap:1.1rem; }
.nav__shop,.nav__cart{
  font-family:var(--f-mono); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
}
.nav__shop{ color:var(--haze); transition:color .35s; }
.nav__shop:hover{ color:var(--citrus); }
.nav__cart{ display:flex; align-items:center; gap:.5rem; padding:.6rem .95rem; border:1px solid var(--hair);
  transition:border-color .4s, color .4s; }
.nav__cart:hover{ border-color:var(--citrus); color:var(--citrus); }
.nav__count{
  display:grid; place-items:center; min-width:18px; height:18px; padding:0 4px;
  background:var(--citrus); color:var(--ink); font-size:.58rem; border-radius:9px;
}
.nav__count.is-pop{ animation:pop .45s var(--ease-out); }
@keyframes pop{ 0%{transform:scale(1)} 40%{transform:scale(1.45)} 100%{transform:scale(1)} }

.nav__burger{ display:none; flex-direction:column; gap:5px; width:26px; }
.nav__burger i{ display:block; height:1px; width:100%; background:var(--bone); transition:transform .4s var(--ease); }
.nav__burger[aria-expanded="true"] i:first-child{ transform:translateY(3px) rotate(45deg); }
.nav__burger[aria-expanded="true"] i:last-child{ transform:translateY(-3px) rotate(-45deg); }

.menu{
  position:fixed; inset:0; z-index:880; background:var(--ink-2);
  display:flex; flex-direction:column; justify-content:center; gap:.4rem;
  padding:0 var(--gut);
  clip-path:inset(0 0 100% 0); transition:clip-path .7s var(--ease-out);
}
.menu.is-open{ clip-path:inset(0 0 0 0); }
.menu a{
  font-family:var(--f-display); font-variation-settings:'wdth' 120; font-weight:500;
  text-transform:uppercase; font-size:clamp(2rem,9vw,3.4rem); line-height:1.08;
  border-bottom:1px solid var(--hair-soft); padding:.35em 0;
}
.menu a:hover{ color:var(--citrus); }

/* =========================================================
   01 · HERO
   ========================================================= */
.hero{ position:relative; min-height:100svh; overflow:hidden; isolation:isolate; }

.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.2s var(--ease);
}
.hero__video.is-ready{ opacity:1; }

/* fallback atmosphere — carries the hero until the video can play */
.hero__video.is-ready ~ .hero__fallback{ opacity:0; }
.hero__fallback{
  position:absolute; inset:0; transition:opacity 1.4s var(--ease);
  background:
    radial-gradient(120% 90% at 50% 8%, #0E2C1D 0%, transparent 62%),
    radial-gradient(80% 70% at 82% 88%, #1B4A2E 0%, transparent 60%),
    radial-gradient(70% 60% at 10% 78%, #123723 0%, transparent 58%),
    linear-gradient(180deg,#06170F 0%,#04100C 55%,#061A11 100%);
}
.orb{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; }
.orb--a{ width:46vw; height:46vw; left:-8vw; top:-10vw; background:#1E5C34; animation:float 17s ease-in-out infinite; }
.orb--b{ width:38vw; height:38vw; right:-6vw; top:14vh; background:#2C7A3F; opacity:.34; animation:float 21s ease-in-out infinite reverse; }
.orb--c{ width:52vw; height:34vw; left:26vw; bottom:-16vw; background:#7E9E2A; opacity:.28; animation:float 25s ease-in-out infinite; }
@keyframes float{ 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(3vw,-4vh,0)} }

.leaf{
  position:absolute; top:-4vh; width:20vw; height:22vh;
  background:radial-gradient(60% 70% at 50% 20%, #2C6B37 0%, #123A20 70%, transparent 74%);
  filter:blur(2px); opacity:.85;
  border-radius:0 0 60% 60%;
}
.leaf--1{ left:4vw;  transform:rotate(8deg);  animation:sway 11s ease-in-out infinite; }
.leaf--2{ left:38vw; width:26vw; height:26vh; transform:rotate(-6deg); animation:sway 14s ease-in-out infinite reverse; }
.leaf--3{ right:6vw; width:24vw; transform:rotate(12deg); animation:sway 13s ease-in-out infinite; }
@keyframes sway{ 0%,100%{transform:rotate(6deg) translateY(0)} 50%{transform:rotate(-2deg) translateY(1.6vh)} }

.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(4,16,12,.72) 0%, rgba(4,16,12,.12) 32%, rgba(4,16,12,.55) 78%, var(--ink) 100%),
    radial-gradient(90% 70% at 50% 46%, transparent 30%, rgba(4,16,12,.5) 100%);
}

.hero__grid{
  position:relative; z-index:3; min-height:100svh;
  padding:clamp(90px,13vh,150px) var(--gut) clamp(28px,5vh,54px);
  display:grid; grid-template-rows:auto 1fr auto;
}

.hero__title{ margin:0; pointer-events:none; }
.hero__line{
  display:block; overflow:hidden;
  font-family:var(--f-display); font-variation-settings:'wdth' 125;
  font-weight:500; text-transform:uppercase;
  font-size:clamp(2.7rem,7.2vw,8.4rem);
  line-height:.84; letter-spacing:-.035em;
}
.hero__line .rise{ display:block; transform:translateY(105%); }
.hero__line--a{ text-align:left; }
.hero__line--b{ position:absolute; top:clamp(90px,13vh,150px); right:var(--gut); }
.hero__line--c{
  position:absolute; right:var(--gut); bottom:clamp(26px,5vh,58px); text-align:right;
}

/* annotations — pinned to the edges of the cup in the footage.
   The film is 3852x2152 and object-fit:cover, so the cup's on-screen size is driven by
   whichever axis wins the cover scale. The cup body measures 593px wide and spans
   y 0.38–0.76 of the frame, centred; these offsets from the middle of the hero are that
   geometry expressed in vw/vh, so the labels stay welded to it at any window ratio. */
.hero{
  --cup-x:    max(7.9vw, 14.2vh);   /* half the cup's width */
  --cup-cx:   max(0.52vw, 0.93vh);  /* the cup sits marginally left of frame centre */
  --cup-up:   max(4.5vw,  8.0vh);   /* where the upper leader meets the cup */
  --cup-down: max(10vw,  18.0vh);   /* where the lower leader meets the cup */
  --anno-w:   clamp(96px, 11vw, 210px);   /* leader run, horizontal */
  --anno-h:   clamp(54px, 7.5vh, 104px);  /* leader run, vertical */
}
.anno{ position:absolute; opacity:0; z-index:4; display:flex; }
.anno__line{ flex:0 0 auto; width:var(--anno-w); height:var(--anno-h); overflow:visible; }
.anno__chip{
  position:relative; display:inline-block;
  background:var(--bone); color:var(--ink);
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.62em .95em;
}
.anno__chip i{ position:absolute; width:8px; height:8px; border:1px solid rgba(244,243,234,.85); }
.anno__chip i:nth-child(1){ top:-6px; left:-6px; border-right:0; border-bottom:0; }
.anno__chip i:nth-child(2){ top:-6px; right:-6px; border-left:0; border-bottom:0; }
.anno__chip i:nth-child(3){ bottom:-6px; left:-6px; border-right:0; border-top:0; }
.anno__chip i:nth-child(4){ bottom:-6px; right:-6px; border-left:0; border-top:0; }

/* left: the leader's TOP-RIGHT corner is the contact point, so the box's top-right
   corner is pinned to the cup's left edge and the chip trails below-left of it */
.anno--left{
  align-items:flex-end;
  left:auto; right:calc(50% + var(--cup-x) + var(--cup-cx));
  top:calc(50% + var(--cup-down));
}
/* right: the leader's BOTTOM-LEFT corner is the contact point, so the box is lifted
   by its own height and the chip sits above-right */
.anno--right{
  align-items:flex-start;
  left:calc(50% + var(--cup-x) - var(--cup-cx));
  top:calc(50% - var(--cup-up) - var(--anno-h));
}

.hero__note{
  position:relative; z-index:5; align-self:end; margin:0;
  font-family:var(--f-mono); font-size:.66rem; line-height:1.9;
  letter-spacing:.08em; text-transform:uppercase; color:var(--bone);
  max-width:22ch;
}
.hero__seal{ width:62px; height:26px; color:var(--haze); margin-bottom:1rem; }

/* =========================================================
   TICKER
   ========================================================= */
.ticker{
  position:relative; z-index:6; overflow:hidden;
  background:var(--citrus); color:var(--ink);
  border-top:1px solid var(--ink); border-bottom:1px solid var(--ink);
  padding:.85rem 0;
}
.ticker__track{ display:flex; align-items:center; gap:2.4rem; white-space:nowrap; will-change:transform; }
.ticker span{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; }
.ticker em{ font-style:normal; opacity:.55; }

/* =========================================================
   02 · PRODUCT
   ========================================================= */
.product{
  position:relative;
  display:grid; grid-template-columns:1fr 1fr;
  gap:var(--gut);
  padding:clamp(80px,12vh,160px) var(--gut) clamp(80px,12vh,160px);
  background:
    radial-gradient(70% 50% at 18% 30%, rgba(28,74,49,.42) 0%, transparent 62%),
    var(--ink);
}
.product__sticky{ position:relative; }
.product__visual{
  position:sticky; top:0; height:100svh;
  display:grid; place-items:center;
}
/* specimen frame — the same footage, cropped tall and annotated */
.frame{
  position:relative; margin:0; z-index:2;
  width:clamp(220px,26vw,380px); aspect-ratio:3/4.4;
  overflow:hidden; will-change:transform;
  box-shadow:0 50px 90px rgba(0,0,0,.55);
}
.frame__shot{
  position:absolute; inset:-6% 0; width:100%; height:112%;
  object-fit:cover; filter:saturate(1.02) contrast(1.03);
  /* transform belongs to the GSAP parallax — only opacity is animated here */
  opacity:0; transition:opacity .85s var(--ease); will-change:opacity;
}
.frame__shot.is-on{ opacity:1; }
.frame__grid{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(244,243,234,.14) 1px, transparent 1px) 33.33% 0/33.33% 100%,
    linear-gradient(180deg, rgba(244,243,234,.14) 1px, transparent 1px) 0 33.33%/100% 33.33%;
  mix-blend-mode:overlay;
}
.frame__c{ position:absolute; width:14px; height:14px; border:1px solid var(--citrus); }
.frame__c--tl{ top:10px; left:10px; border-right:0; border-bottom:0; }
.frame__c--tr{ top:10px; right:10px; border-left:0; border-bottom:0; }
.frame__c--bl{ bottom:10px; left:10px; border-right:0; border-top:0; }
.frame__c--br{ bottom:10px; right:10px; border-left:0; border-top:0; }
.frame__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:1.4rem 1.1rem .95rem;
  display:flex; flex-direction:column; gap:.3rem;
  background:linear-gradient(180deg,transparent,rgba(4,16,12,.9));
  font-family:var(--f-mono); text-transform:uppercase;
}
.frame__cap span{ font-size:.64rem; letter-spacing:.14em; }
.frame__cap em{ font-style:normal; font-size:.52rem; letter-spacing:.16em; color:var(--citrus); }
.halo{
  position:absolute; inset:0; margin:auto; border-radius:50%;
  width:clamp(240px,34vw,460px); height:clamp(240px,34vw,460px);
  background:radial-gradient(50% 50% at 50% 50%, rgba(228,244,85,.16) 0%, transparent 70%);
  filter:blur(24px);
}
.product__ring{
  position:absolute; inset:0; margin:auto; border-radius:50%;
  width:clamp(220px,31vw,420px); height:clamp(220px,31vw,420px);
  border:1px solid var(--hair-soft);
}
.product__ring::after{
  content:''; position:absolute; inset:12%; border-radius:50%; border:1px dashed rgba(228,244,85,.18);
  animation:spin 42s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }
.product__index{
  position:absolute; left:0; bottom:14vh;
  font-family:var(--f-display); font-variation-settings:'wdth' 122; font-weight:600;
  font-size:clamp(4rem,10vw,9rem); line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(244,243,234,.18);
}

.product__rail{ display:flex; flex-direction:column; gap:clamp(70px,11vh,150px); padding-top:14vh; }
.sec-head .display{ margin-bottom:1.6rem; }
.sec-head--center{ text-align:center; }
.sec-head--center .lede{ margin-inline:auto; }

.spec{ position:relative; padding-top:2rem; border-top:1px solid var(--hair-soft); max-width:34rem; }
.spec__num{
  display:block; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.2em;
  color:var(--citrus); margin-bottom:1.1rem;
}
.spec h3{
  margin:0 0 .8rem; font-size:clamp(1.4rem,2.4vw,2.1rem); font-weight:500;
  font-variation-settings:'wdth' 112; letter-spacing:-.015em; line-height:1.06;
  text-transform:uppercase;
}
.spec p{ margin:0 0 1.5rem; color:var(--haze); max-width:40ch; }
.spec__meta{ display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; }
.spec__meta li{
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--moss-lit);
}
.spec.is-active .spec__num{ color:var(--citrus); }

/* =========================================================
   03 · RITUAL (horizontal)
   ========================================================= */
.ritual{ background:var(--ink-2); }
.ritual__pin{ height:100svh; overflow:hidden; display:flex; align-items:center; }
.ritual__track{ display:flex; align-items:stretch; will-change:transform; }

.panel{
  flex:0 0 auto; width:clamp(330px,44vw,660px);
  padding:clamp(28px,4vw,64px) clamp(24px,3.4vw,60px);
  border-right:1px solid var(--hair-soft);
  display:flex; flex-direction:column; justify-content:center; gap:1.1rem;
  min-height:66vh;
}
.panel--intro{ width:clamp(340px,50vw,760px); padding-left:var(--gut); }
.panel--intro .display{ margin:.4rem 0 1.4rem; }
.panel__hint{
  margin-top:1.6rem; font-family:var(--f-mono); font-size:.6rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--citrus);
  animation:nudge 2.6s var(--ease) infinite;
}
@keyframes nudge{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(9px)} }

.step{ position:relative; }
.step__num{
  font-family:var(--f-serif); font-style:italic; font-size:clamp(3rem,6vw,5.6rem);
  line-height:.9; color:var(--citrus); opacity:.9;
}
.step h3{
  margin:.3rem 0 .4rem; font-size:clamp(1.6rem,3vw,2.6rem); font-weight:500;
  text-transform:uppercase; font-variation-settings:'wdth' 115; letter-spacing:-.02em; line-height:1.02;
}
.step p{ margin:0; color:var(--haze); max-width:36ch; }
.step__time{
  margin-top:1.8rem; font-family:var(--f-mono); font-size:.6rem;
  letter-spacing:.2em; color:var(--moss-lit);
  padding-top:1rem; border-top:1px solid var(--hair-soft);
}
.panel--cta{ align-items:flex-start; gap:2.4rem; background:linear-gradient(180deg,transparent,rgba(28,74,49,.28)); }
.panel--cta .display{ font-size:clamp(2.2rem,5vw,4.4rem); }

/* =========================================================
   04 · ORIGINS
   ========================================================= */
.origins{ padding:clamp(90px,14vh,180px) var(--gut); }
.origins .sec-head{ margin-bottom:clamp(48px,7vh,90px); }

.origins__grid{
  display:grid; gap:clamp(12px,1.4vw,22px);
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(150px,20vh,230px);
}
.plot{ margin:0; position:relative; overflow:hidden; grid-row:span 1; }
.plot--tall{ grid-row:span 2; }
.plot--wide{ grid-column:span 2; }
.plot__img{
  position:absolute; inset:-12% 0; background-size:cover; background-position:center;
  will-change:transform; transition:transform 1.1s var(--ease-out), filter .8s var(--ease);
  filter:saturate(.85);
}
.plot:hover .plot__img{ transform:scale(1.06); filter:saturate(1.15); }
/* the wash keeps four separately-shot frames reading as one series and
   holds the caption legible over whatever lands in the bottom corner */
.plot__img{
  --wash:linear-gradient(180deg,
    rgba(4,16,12,.58) 0%, rgba(4,16,12,.10) 38%,
    rgba(4,16,12,.30) 72%, rgba(4,16,12,.86) 100%);
}
.plot__img--1{ background-image:var(--wash), url('../assets/plots/north-ridge.jpg'); }
.plot__img--2{ background-image:var(--wash), url('../assets/plots/sphagnum-bed.jpg'); }
.plot__img--3{ background-image:var(--wash), url('../assets/plots/lower-terraces.jpg'); }
.plot__img--4{ background-image:var(--wash), url('../assets/plots/glasshouse.jpg'); }
.plot figcaption{
  position:absolute; left:0; bottom:0; right:0; z-index:2;
  padding:1.1rem 1.2rem;
  display:flex; flex-direction:column; gap:.25rem;
  background:linear-gradient(180deg,transparent,rgba(4,16,12,.82));
}
.plot figcaption span{
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
}
.plot figcaption em{
  font-style:normal; font-family:var(--f-mono); font-size:.55rem;
  letter-spacing:.12em; color:var(--haze);
}
.reveal-clip{ clip-path:inset(0 0 100% 0); }

.stats{
  margin-top:clamp(60px,9vh,120px);
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,48px);
  border-top:1px solid var(--hair-soft); padding-top:clamp(32px,5vh,60px);
}
.stat b{
  display:block; font-family:var(--f-display); font-variation-settings:'wdth' 118;
  font-weight:500; font-size:clamp(2.6rem,5.4vw,5rem); line-height:1;
  color:var(--citrus); letter-spacing:-.03em; margin-bottom:.8rem;
}
.stat span{
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--haze); line-height:1.9;
}

/* =========================================================
   PLEDGE
   ========================================================= */
.pledge{ background:var(--moss); color:var(--bone); overflow:hidden; }
.pledge__marq{ overflow:hidden; border-bottom:1px solid rgba(4,16,12,.25); padding:1.4rem 0; }
.pledge__track{ display:flex; white-space:nowrap; will-change:transform; }
.pledge__track span{
  font-family:var(--f-display); font-variation-settings:'wdth' 120; font-weight:500;
  text-transform:uppercase; font-size:clamp(2rem,5vw,4.4rem); letter-spacing:-.02em;
  color:transparent; -webkit-text-stroke:1px rgba(244,243,234,.42);
}
.pledge__body{
  display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:2.4rem;
  padding:clamp(46px,7vh,90px) var(--gut);
}
.pledge__body p{
  margin:0; max-width:52ch; font-size:clamp(1.05rem,1.8vw,1.5rem); line-height:1.5;
  font-variation-settings:'wdth' 104;
}
.pledge__body em{ font-family:var(--f-serif); font-style:italic; color:var(--citrus); font-size:1.12em; }

/* =========================================================
   05 · SHOP
   ========================================================= */
.shop{ padding:clamp(90px,14vh,180px) var(--gut); }
.shop .sec-head{ margin-bottom:clamp(46px,7vh,86px); }
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,26px); }

.card{
  position:relative; border:1px solid var(--hair-soft); overflow:hidden;
  transition:border-color .5s var(--ease), transform .6s var(--ease-out);
  background:linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}
.card:hover{ border-color:var(--hair); transform:translateY(-6px); }
/* square art — the can renders are shot 1:1 and centred, so don't crop them */
.card__art{ position:relative; aspect-ratio:1/1; overflow:hidden; }
.card__shot{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease-out), filter .6s var(--ease);
  filter:saturate(1.02);
}
.card:hover .card__shot{ transform:scale(1.05); filter:saturate(1.12); }

.card__label{
  position:absolute; top:.7rem; left:.9rem; z-index:2;
  font-family:var(--f-display); font-variation-settings:'wdth' 122;
  font-weight:600; font-size:clamp(1.6rem,2.6vw,2.4rem); line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(244,243,234,.45);
  transition:-webkit-text-stroke-color .6s var(--ease);
}
.card:hover .card__label{ -webkit-text-stroke-color:var(--citrus); }

.card__flag{
  position:absolute; top:.95rem; right:.95rem; z-index:2;
  font-family:var(--f-mono); font-size:.5rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); background:var(--citrus); padding:.45em .7em;
}
.card--feature{ border-color:var(--hair); }
.card--feature .card__body{ background:linear-gradient(180deg, rgba(28,74,49,.22), transparent); }
.card__body{ padding:1.6rem 1.5rem 1.5rem; border-top:1px solid var(--hair-soft); }
.card__body h3{
  margin:0 0 .5rem; font-size:1.25rem; font-weight:500; text-transform:uppercase;
  font-variation-settings:'wdth' 112; letter-spacing:-.01em;
}
.card__body p{ margin:0 0 1.6rem; color:var(--haze); font-size:.92rem; }
.card__foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.price{ font-family:var(--f-mono); font-size:1.05rem; letter-spacing:.02em; }
.price em{ display:block; font-style:normal; font-size:.54rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--haze); margin-top:.35rem; }

/* =========================================================
   FOOTER
   ========================================================= */
.foot{
  position:relative; border-top:1px solid var(--hair-soft); overflow:hidden;
  background:linear-gradient(180deg, var(--ink) 0%, var(--ink-3) 100%);
}
.foot__top{
  display:grid; grid-template-columns:1fr 1.25fr; gap:clamp(40px,6vw,90px);
  padding:clamp(60px,9vh,120px) var(--gut) clamp(40px,6vh,70px);
}
.foot__news .display{ font-size:clamp(2rem,3.6vw,3.4rem); margin-bottom:1.8rem; }
.field{ display:flex; border-bottom:1px solid var(--hair); max-width:26rem; }
.field input{
  flex:1; background:none; border:0; outline:none; color:var(--bone);
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; padding:.9rem 0;
}
.field input::placeholder{ color:rgba(244,243,234,.35); }
.field button{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--citrus); padding:.9rem 0 .9rem 1.4rem;
}
.field button i{ width:16px; height:1px; background:currentColor; transition:width .4s var(--ease); }
.field button:hover i{ width:26px; }
.field__msg{ min-height:1.2em; margin:.8rem 0 0; font-family:var(--f-mono); font-size:.58rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--citrus); }
.foot__fine{ margin:1.4rem 0 0; max-width:34ch; color:var(--haze); font-size:.82rem; }

.foot__cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; }
.foot__cols h4{
  margin:0 0 1.3rem; font-family:var(--f-mono); font-size:.6rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--citrus);
}
.foot__cols a{
  display:block; padding:.34rem 0; color:var(--haze); font-size:.86rem;
  transition:color .3s, transform .4s var(--ease);
}
.foot__cols a:hover{ color:var(--bone); transform:translateX(5px); }

.foot__mark{
  font-family:var(--f-display); font-variation-settings:'wdth' 125; font-weight:600;
  font-size:clamp(3.4rem,17.6vw,17rem); line-height:.8; letter-spacing:-.035em;
  text-align:center; padding:0 var(--gut);
  color:transparent; -webkit-text-stroke:1px rgba(244,243,234,.2);
  user-select:none; white-space:nowrap;
}
.foot__legal{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  padding:clamp(24px,4vh,40px) var(--gut);
  border-top:1px solid var(--hair-soft); margin-top:clamp(24px,4vh,48px);
  font-family:var(--f-mono); font-size:.56rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--haze);
}
.foot__legal a:hover{ color:var(--citrus); }

/* =========================================================
   CART
   ========================================================= */
.cart{
  position:fixed; top:0; right:0; bottom:0; width:min(420px,92vw); z-index:950;
  background:var(--ink-2); border-left:1px solid var(--hair-soft);
  display:flex; flex-direction:column;
  transform:translateX(102%); transition:transform .65s var(--ease-out);
}
.cart.is-open{ transform:translateX(0); }
.cart__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.6rem; border-bottom:1px solid var(--hair-soft);
}
.cart__head .eyebrow{ margin:0; }
.cart__head button{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--haze); }
.cart__head button:hover{ color:var(--citrus); }
.cart__list{ flex:1; overflow-y:auto; padding:.6rem 1.6rem; }
.cart__list li{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.1rem 0; border-bottom:1px solid var(--hair-soft);
}
.cart__list h5{ margin:0 0 .35rem; font-size:.95rem; font-weight:500; text-transform:uppercase;
  font-variation-settings:'wdth' 110; }
.cart__list small{ font-family:var(--f-mono); font-size:.56rem; letter-spacing:.14em; color:var(--haze); }
.cart__qty{ display:flex; align-items:center; gap:.75rem; font-family:var(--f-mono); font-size:.7rem; }
.cart__qty button{ color:var(--citrus); font-size:.9rem; line-height:1; }
.cart__empty{ padding:1.4rem 1.6rem; color:var(--haze); font-size:.86rem; }
.cart__foot{ padding:1.4rem 1.6rem 1.8rem; border-top:1px solid var(--hair-soft); }
.cart__row{ display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; }
.cart__row b{ font-size:1.3rem; letter-spacing:0; color:var(--citrus); }
.cart__note{ margin:.7rem 0 1.4rem; font-size:.7rem; color:var(--haze); }

.scrim{
  position:fixed; inset:0; z-index:940; background:rgba(4,16,12,.6);
  backdrop-filter:blur(3px); opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease), visibility .5s;
}
.scrim.is-on{ opacity:1; visibility:visible; }

/* ---------- REVEAL DEFAULTS ---------- */
.reveal{ opacity:0; transform:translateY(34px); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
  .product{ grid-template-columns:1fr; }
  .product__visual{ height:62svh; }
  .product__rail{ padding-top:0; }
  .product__index{ display:none; }
  .foot__top{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); row-gap:clamp(28px,5vh,50px); }
  .cards{ grid-template-columns:1fr 1fr; }
}

@media (max-width:760px){
  .hero__line--b{ position:static; text-align:right; }
  .hero__line--c{ position:static; text-align:right; }
  /* the cup nearly fills a phone screen, so there is no "outside" to sit in —
     the labels overlap its edges instead and the ticks come off */
  .anno--left{ left:4%; right:auto; top:66%; }
  .anno--right{ left:46%; top:31%; }
  .anno__line{ display:none; }
  .anno__chip{ font-size:.5rem; padding:.5em .7em; }
  .hero__note{ font-size:.58rem; }
  .origins__grid{ grid-template-columns:repeat(2,1fr); }
  .plot--wide{ grid-column:span 2; }
  .cards{ grid-template-columns:1fr; }
  .foot__cols{ grid-template-columns:1fr 1fr; gap:2.2rem 1rem; }
  /* no pinned horizontal run on small screens — the panels simply stack */
  .ritual__pin{ height:auto; display:block; overflow:visible; }
  .ritual__track{ flex-direction:column; }
  .panel,.panel--intro{
    width:100%; min-height:auto; padding:clamp(38px,9vw,60px) var(--gut);
    border-right:0; border-bottom:1px solid var(--hair-soft);
  }
  .panel__hint{ display:none; }
}

@media (max-width:520px){
  .stats{ grid-template-columns:1fr; }
  .foot__legal{ flex-direction:column; gap:.6rem; }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
  .reveal-clip{ clip-path:none; }
  .hero__line .rise{ transform:none; }
  .anno{ opacity:1; }
}