/* The Cookie Dough Kid — site.css
   Tokens sampled from the client's real artwork + the gold standard posters.
   Self-hosted fonts: zero third-party requests, so the site sets no cookies. */

@import url("/assets/fonts/fonts.css");

/* ---------- Tokens ---------- */
:root{
  --cream:        oklch(94.5% 0.018 70);
  --cream-deep:   oklch(90.5% 0.028 74);
  --cream-edge:   oklch(85.0% 0.035 75);
  --choc:         oklch(23.5% 0.045 55);
  --choc-soft:    oklch(33.0% 0.050 58);
  --choc-deep:    oklch(16.5% 0.035 50);
  --gold:         oklch(55.0% 0.125 55);
  --gold-lift:    oklch(66.0% 0.120 62);
  --gold-pale:    oklch(80.0% 0.070 68);

  --ff-display: "Bowlby One", system-ui, sans-serif;
  --ff-body:    "Montserrat", system-ui, sans-serif;

  --t-hero:  clamp(2.05rem, 0.9rem + 4.3vw, 3.9rem);
  --t-h2:    clamp(1.75rem, 1rem + 2.6vw, 3rem);
  --t-h3:    clamp(1.15rem, 0.95rem + 0.9vw, 1.5rem);
  --t-body:  clamp(1rem, 0.96rem + 0.16vw, 1.08rem);

  --gap:   clamp(1rem, 0.6rem + 1.5vw, 1.75rem);
  --bay:   clamp(3.75rem, 2rem + 6.5vw, 7.5rem);
  --bay-t: clamp(2.25rem, 1.3rem + 3vw, 3.75rem);
  --edge:  clamp(1.15rem, 0.4rem + 3vw, 3.5rem);
  --maxw:  1240px;

  --ease: cubic-bezier(.16,1,.3,1);
  --radius: 16px;

  --shadow-lo: 0 2px 10px -4px oklch(23.5% .045 55 / .18);
  --shadow-md: 0 18px 40px -24px oklch(23.5% .045 55 / .45);
  --shadow-hi: 0 34px 70px -32px oklch(23.5% .045 55 / .55);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--choc-soft);
  font-family:var(--ff-body);font-size:var(--t-body);line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;cursor:pointer}

h1,h2,h3{
  font-family:var(--ff-display);font-weight:400;color:var(--choc);
  line-height:1.05;letter-spacing:.004em;
  text-wrap:balance;text-wrap:pretty;margin:0;
}
p{text-wrap:pretty}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--edge)}
.gold-txt{color:var(--gold)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.skip{
  position:absolute;left:var(--edge);top:-4em;z-index:100;
  background:var(--choc);color:var(--cream);padding:.75em 1.2em;
  border-radius:0 0 10px 10px;text-decoration:none;font-weight:700;
  transition:top .2s var(--ease);
}
.skip:focus{top:0}
:where(a,button,input,textarea,summary):focus-visible{
  outline:3px solid var(--gold);outline-offset:3px;border-radius:5px;
}

/* ---------- Fail-open reveal ---------- */
.html-js .reveal{opacity:0;transform:translateY(20px)}
.html-js .reveal.in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}
.html-js .reveal[data-d="1"].in{transition-delay:.09s}
.html-js .reveal[data-d="2"].in{transition-delay:.18s}
.html-js .reveal[data-d="3"].in{transition-delay:.27s}
.html-js .reveal[data-d="4"].in{transition-delay:.36s}

/* ---------- Confetti ---------- */
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.confetti i{position:absolute;display:block}
.confetti i.chip{width:12px;height:9px;background:var(--choc);border-radius:60% 40% 55% 45%}
.confetti i.sprinkle{width:15px;height:4px;background:var(--gold);border-radius:3px}
.confetti i.sprinkle.dk{background:var(--choc)}
.confetti i.spark{width:14px;height:14px;background:var(--gold);
  clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%)}
.confetti i.spark.dk{background:var(--choc)}
.confetti i.heart{width:12px;height:11px;background:var(--gold);
  clip-path:path("M6 11S0 7 0 3.2A3.2 3.2 0 0 1 6 1.6 3.2 3.2 0 0 1 12 3.2C12 7 6 11 6 11Z")}
/* on dark grounds the chips must be light, not brown-on-brown */
.on-dark .confetti i.chip{background:oklch(45% .04 55)}
.on-dark .confetti i.spark.dk{background:var(--gold-lift)}

/* ---------- Header ---------- */
.hdr{
  position:sticky;top:0;z-index:40;
  background:color-mix(in oklab, var(--cream) 90%, transparent);
  backdrop-filter:saturate(1.15) blur(8px);
  border-bottom:1px solid transparent;
  transition:border-color .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease);
}
.hdr.stuck{border-bottom-color:var(--cream-edge);background:var(--cream);box-shadow:var(--shadow-lo)}
.hdr-in{display:flex;align-items:center;gap:var(--gap);padding-block:.6rem}
.brand{flex:0 0 auto;line-height:0}
.brand img{width:98px;height:auto;transition:transform .4s var(--ease)}
.brand:hover img{transform:scale(1.04) rotate(-1.5deg)}

.nav{margin-left:auto;display:flex;gap:clamp(.9rem,2vw,1.9rem);align-items:center}
.nav a{
  text-decoration:none;font-weight:700;font-size:.79rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--choc);padding-block:.4rem;position:relative;white-space:nowrap;
}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--gold);transition:right .4s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}

.hdr-cta{
  display:inline-flex;align-items:center;gap:.45rem;
  background:var(--choc);color:var(--cream);text-decoration:none;
  padding:.68em 1.15em;border-radius:9px;font-weight:700;font-size:.75rem;
  letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
  transition:background .25s,transform .3s var(--ease);
}
.hdr-cta:hover{background:var(--gold);transform:translateY(-2px)}
.hdr-cta svg{flex:0 0 auto}

.burger{display:none;background:none;border:0;padding:.4rem;color:var(--choc);line-height:0;margin-left:auto}

@media (max-width:940px){
  .burger{display:block}
  .nav{
    position:fixed;top:100%;left:0;right:0;
    flex-direction:column;align-items:flex-start;
    background:var(--cream);padding:var(--edge);gap:1.1rem;margin:0;
    border-bottom:1px solid var(--cream-edge);box-shadow:var(--shadow-md);
    transform:translateY(-14px);opacity:0;visibility:hidden;
    transition:opacity .32s var(--ease),transform .32s var(--ease),visibility .32s;
  }
  .nav.open{opacity:1;visibility:visible;transform:none}
  .nav a{font-size:1.05rem}
  .hdr-cta{display:none}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:1em 1.95em;border-radius:10px;text-decoration:none;
  font-weight:700;font-size:.81rem;letter-spacing:.11em;text-transform:uppercase;
  border:2px solid transparent;
  transition:transform .35s var(--ease),background .25s,color .25s,border-color .25s,box-shadow .35s var(--ease);
}
.btn:hover{transform:translateY(-3px)}
.btn-solid{background:var(--choc);color:var(--cream);box-shadow:var(--shadow-md)}
.btn-solid:hover{background:var(--choc-deep);box-shadow:var(--shadow-hi)}
.btn-ghost{border-color:var(--gold);color:var(--gold)}
.btn-ghost:hover{background:var(--gold);color:var(--cream)}
.btn-gold{background:var(--gold);color:var(--cream);box-shadow:var(--shadow-md)}
.btn-gold:hover{background:var(--gold-lift)}
.btn-cream{background:var(--cream);color:var(--choc)}
/* WhatsApp CTA. Deliberately NOT WhatsApp green: raw #25D366 fights the cream
   and chocolate palette and reads cheap. The brand carries the button, the
   green mark inside it carries the signal. */
.btn-wa{background:var(--choc);color:var(--cream);box-shadow:var(--shadow-md)}
.btn-wa:hover{background:var(--choc-deep);box-shadow:var(--shadow-hi)}
.btn-wa svg{color:#3FD16E}
.btn-gold .btn-wa svg{color:inherit}
.btn-sm{padding:.75em 1.4em;font-size:.71rem}

/* ---------- Hero ---------- */
/* Generous room top and bottom so the section breathes and the image plus its
   spinning emblem never crowd the sticky header. Breathing room lives HERE, on
   the section, independent of how the image and text align inside the grid. */
.hero{position:relative;padding-block:clamp(3.25rem, 2rem + 4vw, 5.75rem) var(--bay)}
.hero-grid{position:relative;z-index:1;display:grid;gap:clamp(1.75rem,4vw,3.5rem);
  grid-template-columns:1fr;align-items:center}
@media (min-width:900px){
  .hero-grid{grid-template-columns:1.1fr 1fr;align-items:start}
}
.hero-grid > *{min-width:0}

.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;margin:0 0 1.1rem;
  font-size:.72rem;font-weight:800;letter-spacing:.19em;text-transform:uppercase;color:var(--gold);
}
.eyebrow::before{content:"";width:26px;height:2px;background:currentColor;border-radius:2px}

.hero h1{font-size:var(--t-hero)}
.hero h1 .l2{display:block;color:var(--gold)}
.hero p{max-width:37ch;margin:1.4rem 0 2rem;font-size:1.06rem}
/* Keep the eyebrow flush to the top of its column so the image, top-aligned to
   the column, shares a clean top line with "Handmade in Leeds". Everything else
   keeps its natural spacing: breathing room is the SECTION's padding, never
   stripped-out text margins. */
.hero .eyebrow{margin-top:0}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.cta-note{
  margin:1.15rem 0 0;font-size:.78rem;letter-spacing:.02em;
  color:var(--choc-soft);opacity:.85;max-width:34ch;
}

.hero-media{position:relative}
.hero-media img{width:100%;border-radius:var(--radius);aspect-ratio:1/1;object-fit:cover;
  box-shadow:var(--shadow-hi)}
/* stacked layouts: a square hero image eats the entire fold on a phone or an
   iPad in portrait. Go letterbox until the two-column layout kicks in. */
@media (max-width:899px){ .hero-media img{aspect-ratio:4/3} }
/* Two-column: the image keeps its own square ratio and top-aligns to the
   eyebrow (align-items:start on the grid). A max-height stops it growing into a
   slab on wide screens, which is what made it "scale weirdly" before. Breathing
   room around it is the section padding, not a stretched image. */
@media (min-width:900px){
  .hero-media img{aspect-ratio:1/1;max-height:clamp(440px,52vh,560px);margin-inline:auto}
}
/* The spinning CDK circle emblem, pinned to the BOTTOM-right of the hero photo.
   It used to overhang the TOP, which put it right under the sticky header and
   made it look like it spun into the nav as the page scrolled. Bottom-right is
   the furthest point from the header, and it matches where the badge sits on the
   gold standard posters. */
.stamp{
  position:absolute;bottom:-18px;right:-12px;
  width:clamp(88px,11vw,120px);aspect-ratio:1;
  filter:drop-shadow(0 14px 26px oklch(23.5% .045 55 / .5));
  z-index:2;
}
.stamp img{width:100%;height:100%;border-radius:50%;display:block}
.html-js .stamp img{animation:spin 26s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Dappled light ----------
   The single biggest premium cue in the gold standard posters is the soft
   leaf-shadow falling across the cream background. It turns a flat colour into
   a lit room. Rebuilt here as blurred organic shapes, very low opacity. */
.dapple{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  opacity:.55;
}
.dapple::before,.dapple::after{
  content:"";position:absolute;border-radius:44% 56% 62% 38% / 48% 42% 58% 52%;
  background:oklch(23.5% .045 55 / .085);
  filter:blur(26px);
}
.dapple::before{width:46%;height:70%;top:-18%;left:-8%;transform:rotate(-14deg)}
.dapple::after{width:30%;height:48%;top:38%;left:14%;transform:rotate(22deg);filter:blur(34px)}
.dapple i{
  position:absolute;display:block;border-radius:50% 50% 46% 54% / 55% 45% 55% 45%;
  background:oklch(23.5% .045 55 / .07);filter:blur(20px);
}
.dapple i:nth-child(1){width:16%;height:24%;top:6%;left:26%;transform:rotate(30deg)}
.dapple i:nth-child(2){width:11%;height:17%;top:56%;left:2%;transform:rotate(-24deg)}
.dapple i:nth-child(3){width:13%;height:20%;top:74%;left:30%;transform:rotate(12deg)}
@media (prefers-reduced-motion:no-preference){
  .html-js .dapple{animation:sway 18s ease-in-out infinite alternate}
}
@keyframes sway{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(10px,6px,0) scale(1.03)}
}

/* ---------- Trust bar ---------- */
.trust{border-block:1px solid var(--cream-edge);background:var(--cream-deep)}
.trust ul{list-style:none;margin:0;padding:1.5rem 0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(158px,100%),1fr));gap:1.1rem 1.4rem}
.trust li{display:flex;align-items:center;gap:.8rem;
  font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--choc);line-height:1.45}
.trust li + li{border-left:1px solid var(--cream-edge);padding-left:1.4rem}
@media (max-width:760px){ .trust li + li{border-left:0;padding-left:0} }
.trust svg{flex:0 0 auto;color:var(--gold)}

/* ---------- THE DRIP ----------
   USE IT SPARINGLY. The rule (Miles, 2026-07-14): a drip only ever pours from a
   LIGHT section into a DARK one. Cream melting onto chocolate reads as chocolate.
   Chocolate dripping up onto cream reads as clutter, and a drip on the bottom of
   every single section makes the whole page look cheap. Low-contrast joins
   (cream into cream) get a clean straight edge instead. Three on the homepage.

   The signature device. It is NOT a band between two sections: that reads as a
   stray bar and looks disjointed. It is the UPPER section's own edge melting
   DOWN INTO the section below.

   So: the drip lives INSIDE the lower section, pinned to its top, and is filled
   with the colour of the section ABOVE it. Its solid top edge seals the seam
   invisibly against the section above, and the teardrops hang down into the new
   colour. The two sections genuinely bleed into each other. */
.dripping{position:relative}
.drip{
  position:absolute;top:0;left:0;width:100%;
  display:block;z-index:3;pointer-events:none;
  height:clamp(42px,5.15vw,72px);
  /* `fill` is an INHERITED property, so it flows into the <use> shadow content.
     A `.drip path` rule cannot: the path lives inside the <symbol>, not inside
     .drip, so it never matches and the drip silently renders black. */
  fill:currentColor;
}
/* taller than before: the long teardrops need the room, otherwise the whole
   thing squashes back into the uniform cloud shape we were trying to escape */
.drip-sm{height:clamp(38px,4.7vw,67px)}
.drip-lg{height:clamp(65px,8vw,116px)}

/* Two colours sit above the treats section, so one continuous drip carries a
   hard 50/50 gradient: chocolate melts out of the left panel, gold out of the
   right, with no seam where they meet. */
.drip-split{fill:url(#splitfill)}
@media (max-width:879px){
  /* stacked: only the gold panel is directly above now, so it all drips gold */
  .drip-split{fill:var(--gold-lift)}
}

/* When the split stacks, the chocolate panel sits directly above the gold one,
   so it must melt into it too. Side by side, there is no boundary to drip over. */
.drip-stack{display:none;fill:var(--choc)}
@media (max-width:879px){ .drip-stack{display:block} }

/* The footer drip must be the colour of whatever sits above it, and that is
   NOT the same on every page: gold on the homepage, cream on the legal pages. */
.ftr .drip{color:var(--cream)}
.home .ftr .drip{color:var(--gold-lift)}

/* content must clear the overhanging drip */
.dripping > .wrap,
.dripping > .panel-in{position:relative;z-index:1}

/* The drips hang DOWN into these sections. Content must start BELOW the full
   drip, or the two overlap and the drip looks clipped by the content. Each
   section's top padding = the drip height + normal breathing room. */
:root{ --drip-lg-h:clamp(65px,8vw,116px); --drip-sm-h:clamp(38px,4.7vw,67px); }
.split.dripping > .panel{ padding-top:calc(var(--drip-lg-h) + clamp(1.75rem,3vw,3rem)); }
.order.dripping{ padding-top:calc(var(--drip-lg-h) + var(--bay-t)); }
.ftr.dripping{ padding-top:calc(var(--drip-sm-h) + clamp(1.6rem,3vw,2.6rem)); }

/* ---------- Split promos ---------- */
.split{display:grid;grid-template-columns:1fr}
@media (min-width:880px){ .split{grid-template-columns:1fr 1fr} }
.panel{position:relative;overflow:hidden;padding:var(--bay) var(--edge)}
.panel-in{position:relative;z-index:1;max-width:540px;margin-inline:auto;display:grid;gap:1.15rem}
.panel .kicker{font-size:.71rem;font-weight:800;letter-spacing:.19em;text-transform:uppercase;margin:0}
.panel h2{font-size:var(--t-h2)}
.panel h2 em{font-style:normal;display:block}
.panel p{margin:0;max-width:40ch}
.panel img{border-radius:var(--radius);width:100%;aspect-ratio:10/7;object-fit:cover;box-shadow:var(--shadow-md)}
.panel .btn{justify-self:start;margin-top:.5rem}

.panel-dark{background:var(--choc);color:oklch(86% .022 72)}
.panel-dark h2{color:var(--cream)}
.panel-dark h2 em{color:var(--gold-lift)}
.panel-dark .kicker{color:var(--gold-lift)}
.panel-dark p{line-height:1.75}

.panel-gold{background:var(--gold-lift);color:oklch(27% .05 55)}
.panel-gold h2{color:var(--choc)}
.panel-gold h2 em{color:var(--cream)}
.panel-gold .kicker{color:var(--choc)}

/* ---------- Sections ---------- */
.sec{padding-block:var(--bay);position:relative}
.sec-head{text-align:center;margin-bottom:clamp(2.2rem,4vw,3.4rem);position:relative;z-index:1}
.sec-head h2{font-size:var(--t-h2)}
.sec-head p{margin:.85rem auto 0;max-width:44ch}
.crown{display:block;margin:0 auto .8rem;color:var(--gold)}
.hr-heart{display:flex;align-items:center;justify-content:center;gap:.7rem;
  margin:.95rem auto 0;max-width:220px;color:var(--gold)}
.hr-heart::before,.hr-heart::after{content:"";height:1px;flex:1;background:currentColor;opacity:.5}

/* ---------- Product cards ---------- */
.cards{display:grid;gap:var(--gap);position:relative;z-index:1;
  grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr))}
.card{
  background:var(--cream-deep);border-radius:var(--radius);
  padding:.8rem .8rem 1.4rem;display:flex;flex-direction:column;text-align:center;
  box-shadow:var(--shadow-lo);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow-hi)}
/* overflow stays on the inner shot so the zoom is clipped, while the price badge
   is free to overhang the corner exactly as it does on the posters */
.card-img{position:relative;margin-bottom:2.1rem}
.card-shot{display:block;overflow:hidden;border-radius:11px}
.card-img img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .8s var(--ease)}
.card:hover .card-img img{transform:scale(1.06)}

.pricetag{
  position:absolute;right:-.35rem;bottom:-1.35rem;z-index:2;
  width:clamp(64px,5.4vw,74px);aspect-ratio:1;border-radius:50%;
  background:var(--cream);color:var(--gold);
  border:2px solid var(--gold);
  display:grid;place-content:center;justify-items:center;gap:1px;
  font-family:var(--ff-display);font-size:.95rem;line-height:1;
  box-shadow:var(--shadow-md);
  transition:transform .45s var(--ease),background .25s,color .25s;
}
.card:hover .pricetag{transform:scale(1.07) rotate(-4deg);background:var(--gold);color:var(--cream)}
.tag{
  position:absolute;top:.6rem;left:.6rem;z-index:1;
  background:var(--choc);color:var(--cream);
  font-size:.6rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  padding:.42em .75em;border-radius:6px;
}
.card h3{font-family:var(--ff-body);font-weight:800;color:var(--choc);
  font-size:.85rem;letter-spacing:.055em;text-transform:uppercase;line-height:1.45;margin:0 0 .5rem}
.card .desc{font-size:.79rem;margin:0 0 .8rem;color:var(--choc-soft);opacity:.9;line-height:1.5}
.price{font-family:var(--ff-display);color:var(--gold);font-size:1.4rem;line-height:1;margin:0 0 1.05rem}
.card .btn{margin-top:auto;align-self:center}

/* ---------- Story ---------- */
.story{background:var(--cream-deep);position:relative}
.story-grid{display:grid;gap:clamp(1.75rem,4vw,3.5rem);align-items:center;
  grid-template-columns:1fr;position:relative;z-index:1}
@media (min-width:880px){ .story-grid{grid-template-columns:.85fr 1fr} }
.story-grid > *{min-width:0}
.story img{border-radius:var(--radius);box-shadow:var(--shadow-md);aspect-ratio:1/1;object-fit:cover;width:100%}
.story h2{font-size:var(--t-h2);margin-bottom:1.1rem}
.story p{max-width:52ch}
.story .triad{
  margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.55rem 1.5rem;
  font-size:.76rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);
}

/* ---------- Order band (WhatsApp) ---------- */
.order{background:var(--choc);color:oklch(86% .022 72);position:relative;overflow:hidden}
.order-in{position:relative;z-index:1;padding-block:var(--bay-t);text-align:center;display:grid;gap:1.15rem;justify-items:center}
.order h2{color:var(--cream);font-size:var(--t-h2)}
.order p{margin:0;max-width:46ch}
.order .btn{margin-top:.4rem}
.order .small{font-size:.76rem;opacity:.75;margin:0}
/* a chocolate button would vanish on a chocolate ground: go gold here */
.order .btn-wa{background:var(--gold);color:var(--cream)}
.order .btn-wa:hover{background:var(--gold-lift)}
.order .btn-wa svg{color:var(--cream)}

/* ---------- Newsletter ---------- */
.club{background:var(--gold-lift);position:relative;overflow:hidden}
.club-in{position:relative;z-index:1;display:grid;gap:1.6rem 2.5rem;align-items:center;padding-block:var(--bay-t)}
@media (min-width:860px){ .club-in{grid-template-columns:1fr minmax(410px,.9fr)} }
.club h2{font-size:clamp(1.5rem,1rem + 1.7vw,2.1rem);color:var(--choc)}
.club p{margin:.55rem 0 0;color:oklch(29% .05 55);max-width:44ch}
.club form{display:flex;gap:.6rem;flex-wrap:wrap}
.club input{flex:1 1 235px;min-width:0;padding:1em 1.15em;border:2px solid transparent;border-radius:10px;
  background:var(--cream);color:var(--choc);font-family:var(--ff-body);font-size:.95rem}
.club input::placeholder{color:oklch(57% .02 60)}
.club input:focus{outline:none;border-color:var(--choc)}
.club .note{font-size:.74rem;margin-top:.75rem;color:oklch(27% .05 55);font-weight:600}
.club .msg{font-weight:800;color:var(--choc);margin-top:.7rem;font-size:.85rem}

/* ---------- Footer ---------- */
.ftr{background:var(--choc-deep);color:oklch(78% .022 72);padding-block:var(--bay-t) 1.7rem;position:relative}
.ftr-grid{display:grid;gap:2.4rem;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));align-items:start}
.ftr-brand img{width:128px}
.ftr h3{font-family:var(--ff-body);font-weight:800;color:var(--cream);
  font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;margin:0 0 1.05rem}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.ftr a{text-decoration:none;font-size:.87rem;transition:color .2s}
.ftr a:hover{color:var(--gold-lift)}
.socials{display:flex;gap:.6rem;margin-top:1.25rem}
.socials a{width:38px;height:38px;border-radius:50%;border:1px solid oklch(42% .03 60);
  display:grid;place-content:center;color:var(--cream);
  transition:background .25s var(--ease),border-color .25s,transform .3s var(--ease)}
.socials a:hover{background:var(--gold);border-color:var(--gold);transform:translateY(-3px)}
.made{text-align:center}
.made p{font-size:.66rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--cream);margin:.5rem 0 0;line-height:1.65}
.legal{margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid oklch(32% .03 55);
  display:flex;flex-wrap:wrap;gap:.7rem 1.5rem;justify-content:space-between;
  font-size:.73rem;color:oklch(64% .02 65)}
.legal a{text-decoration:none}
.legal a:hover{color:var(--gold-lift)}

/* ---------- Sticky mobile order bar ---------- */
.wa-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;
  padding:.65rem var(--edge) calc(.65rem + env(safe-area-inset-bottom));
  background:color-mix(in oklab, var(--cream) 94%, transparent);
  backdrop-filter:blur(10px);border-top:1px solid var(--cream-edge);
}
.wa-bar .btn{width:100%}
@media (max-width:940px){ .wa-bar{display:block} body{padding-bottom:76px} }

/* ---------- Legal pages ---------- */
.doc{padding-block:var(--bay-t) var(--bay);position:relative}
.doc-in{max-width:74ch;margin-inline:auto}
.doc h1{font-size:clamp(1.9rem,1.2rem + 2.4vw,2.9rem);margin-bottom:.6rem}
.doc .updated{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold);font-weight:800;margin:0 0 2.2rem}
.doc h2{font-size:clamp(1.1rem,.95rem + .7vw,1.4rem);margin:2.4rem 0 .8rem}
.doc p,.doc li{font-size:.98rem}
.doc ul{padding-left:1.2rem;display:grid;gap:.45rem}
.doc a{color:var(--gold);font-weight:600}
.doc .callout{
  background:var(--cream-deep);border-radius:12px;padding:1.2rem 1.4rem;margin:1.6rem 0;
  box-shadow:var(--shadow-lo);
}
.doc .callout p:last-child{margin-bottom:0}
.doc .callout strong{color:var(--choc)}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .html-js .reveal{opacity:1 !important;transform:none !important}
  .html-js .stamp{animation:none}
}