/* ==========================================================================
   Cottage Industry · site.css
   Direction C, "General Store": a periwinkle shop wall with one loud shelf.
   The page stays quiet (one field colour, cocoa ink, giant light lowercase,
   one filled pill). The bags, stickers and photos do the shouting.

   Ground order, top to bottom (no two neighbours share a tone):
     crimp + header + hero ... sky
     shop ...................... curd
     statement + marquee ....... sky
     our kitchen ............... curd
     photo split ............... sky
     in the wild ............... curd
     the fine print ............ sky
     find us ................... curd
     stay crunchy .............. tomato   (the one tomato ground)
     footer + bottom crimp ..... bark     (the one bark ground on this page)
   "In the wild" sits between the split and the stickers so that the two
   photo-led bands (split, wild) land on different grounds, and so find us
   (curd) can sit directly on the tomato close without a clash.
   ========================================================================== */

:root{
  color-scheme: light;

  /* ---- brand: three colours and one neutral --------------------------- */
  /* Nudged off Montauk's #96C3F0 / #3A1E10 so the field is ours:           */
  /* sky is 8° toward periwinkle and 6 points lighter; bark is redder.      */
  --sky:      #ADC8F7;  /* periwinkle milk-glass: the painted shop wall. header, hero, statement, split, fine print */
  --sky-deep: #9CB9F0;  /* sky one step down: the top crimp only, so the ribs read as a pressed seal */
  --curd:     #FFF8EA;  /* the colour of the curd: alternating grounds, the bag drawer, every sticker's kiss-cut */
  --field:    #FFFCF5;  /* curd pushed toward white: form fields on curd (Meadow Lane's paper-cut field) */
  --bark:     #4C2317;  /* warm cocoa ink: every word on sky + curd, the one filled pill, the footer ground */
  --bark-hi:  #3A190F;  /* bark one step darker: pill hover only */
  --tomato:   #F04E2E;  /* the one accent: sticker hits, marquee marks, the closing ground. never behind small text */

  /* ---- per-ground text (WCAG ratios measured against the ground) ------ */
  --on-sky:    var(--bark);  /* 7.9:1 on sky */
  --on-sky-2:  #5A3526;      /* muted cocoa on sky, 6.3:1 */
  --on-curd:   var(--bark);  /* 12.7:1 on curd */
  --on-curd-2: #6E4F40;      /* muted cocoa on curd, 7.0:1 */
  --on-bark:   var(--curd);  /* 12.7:1 on bark */
  --on-bark-2: #D6BFAE;      /* oat on bark, 7.6:1 */
  --on-tomato: var(--curd);  /* 3.4:1: display type 40px+ only */

  /* ---- hairlines, never shadows --------------------------------------- */
  --rule-sky:   rgba(76, 35, 23, .28);    /* bark at 28% on sky */
  --rule-curd:  rgba(76, 35, 23, .16);    /* bark at 16% on curd */
  --rule-curd-2:rgba(76, 35, 23, .34);    /* bark at 34% on curd: form field + qty outlines */
  --rule-bark:  rgba(255, 248, 234, .18); /* curd at 18% on bark */
  --scrim:      rgba(76, 35, 23, .34);    /* bark at 34%: the drawer backdrop */
  --wash:       rgba(173, 200, 247, .45); /* sky at 45%: a fresh line in the bag flashes this */
  --contact:    rgba(76, 35, 23, .24);    /* bark at 24%: the one shadow, a contact pool under a cut-out */

  /* ---- pack palette: bags, flavor tiles, stickers. never a page ground  */
  --salt:   #2350D6;  /* sea salt, cobalt. curd ink 6.2:1 */
  --bagel:  #F6B42C;  /* everything bagel, marigold. bark ink 7.4:1 */
  --pickle: #B8D441;  /* dill pickle, brine chartreuse. bark ink 8.0:1 */
  --honey:  #FF8DB8;  /* hot honey, bubblegum. bark ink 6.3:1 */

  /* ---- food colours: the inline crisp doodle only --------------------- */
  --crisp: #F3C262;   /* baked cottage cheese, golden */
  --toast: #D08A3A;   /* the toasted lace on the crisp */

  /* ---- type ------------------------------------------------------------ */
  --ff-display: "Montserrat Alternates", "Avenir Next", system-ui, sans-serif;
  --ff-sans:    "Inter Tight", "Helvetica Neue", Arial, sans-serif;

  --fs-giant:     clamp(84px, 11vw, 200px);
  --fs-close:     clamp(72px, 13.5vw, 240px);
  --fs-marquee:   clamp(56px, 8.4vw, 144px);
  --fs-h2:        clamp(34px, 4.2vw, 62px);
  --fs-statement: clamp(28px, 3.3vw, 50px);
  --fs-lede:      clamp(20px, 1.8vw, 27px);
  --fs-h3:        clamp(20px, 1.6vw, 24px);
  --fs-body:      17px;
  --fs-small:     14px;
  --fs-label:     11.5px;

  /* ---- space ----------------------------------------------------------- */
  --gutter:  clamp(16px, 4vw, 56px);
  --section: clamp(104px, 12vw, 200px);
  --wrap:    1240px;

  /* ---- motion (zeroed at :root under reduced motion) ------------------- */
  --dur-1: 180ms;
  --dur-2: 320ms;
  --dur-3: 640ms;
  --mq-dur: 64s;                              /* marquee: about .8 em per second at every size */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-in:  cubic-bezier(.5, 0, .75, 0);
  --reveal-y: 28px;
}

@media (prefers-reduced-motion: reduce){
  :root{ --dur-1: 0s; --dur-2: 0s; --dur-3: 0s; --mq-dur: 0s; --reveal-y: 0px; }
}

/* ==========================================================================
   Base
   ========================================================================== */
*,*::before,*::after{ box-sizing: border-box; }
html{
  background: var(--sky);
  -webkit-text-size-adjust: 100%;
}
html[data-bag="open"]{ overflow: hidden; }           /* scroll lock while the bag drawer is open */

body{
  margin: 0;
  background: var(--sky);
  color: var(--on-sky);
  font: 400 var(--fs-body)/1.55 var(--ff-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
a{ color: inherit; }
img, svg{ display: block; }
img{ max-width: 100%; }
h1, h2, h3, p, figure, fieldset{ margin: 0; }
ul, ol{ list-style: none; margin: 0; padding: 0; }
button, input{ font: inherit; color: inherit; }
button{ cursor: pointer; }
.sr-only{
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.nw{ white-space: nowrap; }
p{ text-wrap: pretty; }
.sprite{ position: absolute; width: 0; height: 0; overflow: hidden; }

:focus-visible{ outline: 2px solid var(--bark); outline-offset: 4px; border-radius: 2px; }
.site-footer :focus-visible{ outline-color: var(--curd); }
[tabindex="-1"]:focus{ outline: none; }       /* programmatic focus targets (headings, main) */

.skip{
  position: absolute; left: var(--gutter); top: 10px; z-index: 50;
  padding: 10px 16px; border-radius: 999px;
  background: var(--bark); color: var(--curd);
  font: 500 14px/1 var(--ff-sans); text-decoration: none;
  translate: 0 -200%;
}
.skip:focus{ translate: 0 0; }

/* ==========================================================================
   Typographic unit: tracked caps eyebrow -> lowercase light display -> sans body
   ========================================================================== */
.eyebrow{
  font: 600 var(--fs-label)/1.2 var(--ff-sans);
  letter-spacing: .22em;
  text-transform: uppercase;
}
.h2{
  font: 300 var(--fs-h2)/1.02 var(--ff-display);
  letter-spacing: -.035em;
  text-wrap: balance;
  max-width: 16ch;
}
.sec-head{
  display: grid;
  justify-items: center;
  gap: clamp(18px, 2vw, 26px);
  text-align: center;
  margin: 0 auto clamp(64px, 8vw, 120px);
}
.sec-head .h2{ margin-inline: auto; }
.sec-head--left{ justify-items: start; text-align: left; max-width: 1180px; }
.sec-head--left .h2{ margin-inline: 0; }

/* ---- the one filled pill. everything else is a quiet link ----------- */
.pill{
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: 17px 30px 18px;
  border: 0; border-radius: 999px;
  background: var(--bark); color: var(--curd);
  font: 500 15px/1 var(--ff-sans); letter-spacing: .01em;
  text-decoration: none;
  transition: transform var(--dur-1) ease, background-color var(--dur-1) ease;
}
.pill:hover{ transform: translateY(-1px); background: var(--bark-hi); }
.pill:focus-visible{ outline-color: var(--bark); }

.quiet{
  display: inline-block;
  padding: 8px 0;
  border: 0; background: none;
  font: 600 var(--fs-label)/1 var(--ff-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
  color: inherit;
}
.quiet:hover{ text-decoration-thickness: 2px; }

/* ==========================================================================
   The crimp: the bag's heat seal opens and closes the page (and nothing else)
   ========================================================================== */
.crimp{
  height: 24px;
  background:
    repeating-linear-gradient(90deg,
      rgba(0, 0, 0, .12) 0 2px,           /* dark rib */
      transparent 2px 4px,
      rgba(255, 255, 255, .26) 4px 5.5px, /* light rib */
      transparent 5.5px 8px),
    var(--crimp, var(--sky-deep));
  -webkit-mask: conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) 0 0 / 18px 100%;
          mask: conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) 0 0 / 18px 100%;
}
.crimp--bottom{ --crimp: var(--bark); }

/* ==========================================================================
   1 · Header (sky): lockup left, comma sentence right
   ========================================================================== */
.site-header{
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px var(--gutter) 0;
}
.brand{ display: block; color: var(--bark); text-decoration: none; }
.lockup{ width: clamp(188px, 16vw, 236px); height: auto; overflow: visible; }
.lockup text{ fill: currentColor; }
.lk-word{ font-family: var(--ff-display); font-weight: 500; font-size: 88px; letter-spacing: -2.64px; }
.lk-eyebrow{ font-family: var(--ff-sans); font-weight: 600; font-size: 36px; }

.nav{
  font: 600 12px/1.2 var(--ff-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: right;
}
.nav a{ text-decoration: none; }
.nav a:hover{ text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.nav__bag[data-bump]{ animation: bump var(--dur-2) var(--ease-out); display: inline-block; }
@keyframes bump{ 40%{ transform: translateY(-3px); } }

/* ==========================================================================
   2 · Hero (sky): crispy [bag] chips
   ========================================================================== */
.hero{ padding: clamp(8px, 1.6vw, 24px) var(--gutter) clamp(88px, 9vw, 136px); }
.stage{ position: relative; display: grid; place-items: center; max-width: 1440px; margin-inline: auto; }
.hero__title{
  position: absolute; inset: 0;
  font: 300 var(--fs-giant)/.86 var(--ff-display);
  letter-spacing: -.05em;
  pointer-events: none;
}
.giant{ position: absolute; white-space: nowrap; }
.giant--a{ left: 0; top: 50%; transform: translateY(-86%); }
.giant--b{ right: .06em; top: 50%; transform: translateY(12%); }  /* .06em pays back the trailing negative tracking */

.hero__bag{
  position: relative; z-index: 1;
  width: clamp(220px, min(28vw, (100svh - 330px) * .667), 430px);
  rotate: -3.5deg;
}
.hero__bag img{ width: 100%; height: auto; aspect-ratio: 2 / 3; }
.hero__bag::after{          /* the one shadow: a contact pool under the cut-out */
  content: ""; position: absolute; z-index: -1;
  left: 14%; right: 14%; bottom: 1%; height: 6%;
  background: radial-gradient(closest-side, var(--contact), transparent);
  filter: blur(3px);
}
.hero__seal{
  position: absolute; z-index: 2;
  width: 34%; left: -15%; top: 1%;
}
.hero__foot{
  display: grid; justify-items: center; gap: 28px;
  margin-top: clamp(28px, 3vw, 44px);
  text-align: center;
}
.lede{
  font: 300 var(--fs-lede)/1.3 var(--ff-display);
  letter-spacing: -.015em;
  max-width: 26ch;
  text-wrap: balance;
}

/* ==========================================================================
   3 · Shop (curd): four bags on one shelf line, then the sampler tile
   ========================================================================== */
.shop{
  background: var(--curd); color: var(--on-curd);
  padding: var(--section) var(--gutter);
  border-top: 1px solid var(--rule-sky);
}
.shelf{
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: var(--wrap); margin-inline: auto;
}
[data-flavor="salt"]  { --pack-tone: var(--salt); }
[data-flavor="bagel"] { --pack-tone: var(--bagel); }
[data-flavor="pickle"]{ --pack-tone: var(--pickle); }
[data-flavor="honey"] { --pack-tone: var(--honey); }

.card{ text-align: center; }
.card__form{ display: grid; justify-items: center; height: 100%; }
.card__bag{
  position: relative; width: 100%;
  padding: 0 clamp(14px, 2.4vw, 38px) clamp(26px, 2.8vw, 38px);
  border-bottom: 1px solid var(--rule-curd);                 /* the shelf: one continuous hairline */
}
.card__lift{
  position: relative; max-width: 250px; margin-inline: auto;
  transition: transform var(--dur-2) var(--ease-out);
}
.card__lift img{ width: 100%; height: auto; aspect-ratio: 2 / 3; }
.card__bag::after{
  content: ""; position: absolute; z-index: 0;
  left: 26%; right: 26%; bottom: calc(clamp(26px, 2.8vw, 38px) - 6px); height: 12px;
  background: radial-gradient(closest-side, var(--contact), transparent);
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) ease;
}
.card__lift{ z-index: 1; }
@media (hover: hover){
  .card:hover .card__lift{ transform: translateY(-12px) rotate(-2deg); }
  .card:hover .card__bag::after{ transform: scale(.78); opacity: .55; }
}
.card:focus-within .card__lift{ transform: translateY(-12px) rotate(-2deg); }

/* stickers slapped on a bag: over the bag's edge, never over type */
.bag-sticker{
  position: absolute; z-index: 2; pointer-events: none;
  width: 50%; right: -16%; top: 50%;
  rotate: var(--tilt, 10deg);
  overflow: visible;
}

.card__body{
  display: grid; justify-items: center;
  padding: clamp(22px, 2.2vw, 30px) 10px 0;
}
.card__name{
  font: 300 var(--fs-h3)/1.1 var(--ff-display);
  letter-spacing: -.02em;
  text-wrap: balance;
}
.card__note{
  margin-top: 8px;
  font-size: var(--fs-small); line-height: 1.4;
  color: var(--on-curd-2);
  max-width: 24ch; text-wrap: balance;
}

/* size toggle: radios rendered as quiet pills-as-text; :has(:checked) draws the state */
.size{
  display: inline-flex; gap: 2px;
  margin-top: 22px; padding: 0; border: 0; min-inline-size: 0;
}
.size label{ position: relative; display: block; cursor: pointer; }
.size input{
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.size span{
  display: block;
  padding: 7px 13px 8px;
  border: 1px solid transparent; border-radius: 999px;
  font: 500 13px/1 var(--ff-sans); letter-spacing: .02em;
  color: var(--on-curd-2);
  transition: border-color var(--dur-1) ease, color var(--dur-1) ease;
}
.size label:hover span{ color: var(--on-curd); }
.size label:has(:checked) span{ border-color: var(--bark); color: var(--on-curd); }
.size label:has(:focus-visible) span{ outline: 2px solid var(--bark); outline-offset: 2px; }

.buy{
  display: flex; align-items: baseline; justify-content: center; gap: .45em;
  min-height: 1.4em; margin-top: 14px;
  font-size: 15px; line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.buy__price{ font-weight: 500; }
.buy__per{ color: var(--on-curd-2); font-size: 13.5px; }
.buy__price:not(:empty) ~ .buy__per::before{ content: "·"; margin-right: .45em; }
[data-show="four"]{ display: none; }
.card:has(input[value="four"]:checked) [data-show="four"]{ display: inline; }
.card:has(input[value="four"]:checked) [data-show="single"]{ display: none; }
.card__form .quiet{ margin-top: 10px; }

/* the sampler: Pop Up Grocer's product-on-colour tile, kept Montauk-calm */
.sampler{
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center;
  gap: clamp(24px, 4vw, 64px);
  max-width: var(--wrap); margin: clamp(88px, 9vw, 140px) auto 0;
  padding: clamp(28px, 4vw, 64px) clamp(28px, 5vw, 80px);
  border-radius: 28px;
  background: var(--sky); color: var(--on-sky);
}
.sampler__img img{ width: 100%; height: auto; aspect-ratio: 3 / 2; }
.sampler__body{ display: grid; justify-items: start; gap: 0; }
.sampler__name{
  margin-top: 18px;
  font: 300 var(--fs-h2)/1.02 var(--ff-display);
  letter-spacing: -.035em;
  text-wrap: balance; max-width: 11ch;
}
.sampler__note{ margin-top: 18px; max-width: 30ch; color: var(--on-sky-2); }
.sampler .buy{ justify-content: flex-start; margin-top: 26px; }
.sampler .buy__per{ color: var(--on-sky-2); }
.sampler .quiet{ margin-top: 8px; }

/* ==========================================================================
   4 · Statement + marquee (sky)
   ========================================================================== */
.promise{ padding: var(--section) 0 0; text-align: center; }
.promise__inner{ display: grid; justify-items: center; gap: clamp(26px, 2.6vw, 36px); padding-inline: var(--gutter); }
.statement{
  font: 300 var(--fs-statement)/1.2 var(--ff-display);
  letter-spacing: -.03em;
  max-width: 25ch;
  text-wrap: balance;
}
.doodle{
  display: inline-block;
  width: 1.18em; height: 1.18em;
  margin: 0 .04em 0 .2em;
  vertical-align: -.24em;
  overflow: visible;
  rotate: var(--tilt, 0deg);
}
/* doodle paint: ink line plus one flat fill, Pop Up Wrkout style */
.dd-line { stroke: var(--bark); stroke-linejoin: round; stroke-linecap: round; }
.dd-curd { fill: var(--curd); }
.dd-tomato{ fill: var(--tomato); }
.dd-bark { fill: var(--bark); }
.dd-crisp{ fill: var(--crisp); }
.dd-toast{ fill: var(--toast); }
.dd-none { fill: none; }

.mq{
  margin-top: var(--section);
  overflow: hidden;
  border-top: 1px solid var(--rule-sky);
  padding-block: clamp(10px, 1.2vw, 18px) clamp(18px, 2vw, 28px);
}
.mq__track{ display: flex; width: max-content; animation: mq var(--mq-dur) linear infinite; }
.mq[data-run="off"] .mq__track,
.mq:hover .mq__track{ animation-play-state: paused; }
.mq__run{ display: flex; align-items: center; flex: none; }
.mq__item{
  font: 300 var(--fs-marquee)/1.08 var(--ff-display);
  letter-spacing: -.045em;
  white-space: nowrap;
  padding-inline: .32em;
}
.mq__mark{ width: .5em; height: .5em; flex: none; color: var(--tomato); font-size: var(--fs-marquee); }
@keyframes mq{ to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .mq__track{ animation: none; } }

/* ==========================================================================
   5 · Our kitchen (curd): three inset photographs, huge margins
   ========================================================================== */
.kitchen{
  background: var(--curd); color: var(--on-curd);
  padding: var(--section) var(--gutter) calc(var(--section) * .9);
  border-top: 1px solid var(--rule-sky);
}
.steps{
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start;
  column-gap: clamp(32px, 6vw, 104px);
  max-width: 1180px; margin-inline: auto;
}
.step:nth-child(2){ margin-top: clamp(0px, 9vw, 140px); }
.step:nth-child(3){ margin-top: clamp(0px, 4.5vw, 70px); }
.photo{
  width: 100%; height: auto;
  object-fit: cover;
  background: var(--ph, var(--sky));   /* readable before the photograph lands */
}
.photo--portrait{ aspect-ratio: 2 / 3; }
.photo--land{ aspect-ratio: 3 / 2; }
.step__cap{ margin-top: clamp(20px, 2vw, 28px); }
.step__name{ font: 300 var(--fs-h3)/1.1 var(--ff-display); letter-spacing: -.02em; }
.step__line{ margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--on-curd-2); max-width: 30ch; }

/* ==========================================================================
   6 · Photo split (sky): one photograph, one small heading, nothing else
   ========================================================================== */
.split{
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start;
  column-gap: clamp(24px, 3.2vw, 48px);
  padding: var(--section) var(--gutter);
  border-top: 1px solid var(--rule-curd);
}
.split__media{ grid-column: 1 / span 7; }
.split .photo{ --ph: var(--curd); }
.split__text{ grid-column: 9 / span 4; display: grid; justify-items: start; }
.split__title{
  margin-top: 18px;
  font: 300 clamp(26px, 2.5vw, 38px)/1.12 var(--ff-display);
  letter-spacing: -.025em;
  max-width: 16ch; text-wrap: balance;
}
.split__body{ margin-top: 18px; max-width: 36ch; color: var(--on-sky-2); }
.split .quiet{ margin-top: 22px; }

/* ==========================================================================
   7 · In the wild (curd): one row, centered overlay labels
   ========================================================================== */
.wild{
  background: var(--curd); color: var(--on-curd);
  padding: var(--section) var(--gutter);
  border-top: 1px solid var(--rule-sky);
}
.wild__row{
  display: grid; grid-template-columns: 2fr 4.5fr 2fr;   /* 2:3, 3:2, 2:3 at one shared height */
  gap: clamp(12px, 1.6vw, 24px);
  max-width: 1320px; margin-inline: auto;
}
.tile{ margin: 0; display: flex; flex-direction: column; min-width: 0; }
.tile .photo{ width: 100%; height: auto; object-fit: cover; }
/* Captions sit under the photo, not on it: every "in the wild" frame has a
   labelled bag in it, and an overlay label would land on the bag's own type. */
.tile__label{
  margin-top: clamp(12px, 1.2vw, 18px);
  font: 300 var(--fs-h3)/1.2 var(--ff-display);
  letter-spacing: -.015em;
  color: var(--on-curd);
  text-align: center;
}

/* ==========================================================================
   8 · The fine print (sky): the sticker drawer
   ========================================================================== */
.fine{
  padding: var(--section) var(--gutter);
  border-top: 1px solid var(--rule-curd);
}
.fine__grid{
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(20px, 3vw, 44px) clamp(16px, 3vw, 44px);
  max-width: 1300px; margin-inline: auto;
}
.sticker{ height: auto; overflow: visible; transition: transform var(--dur-2) var(--ease-out); }
.fine .sticker{ transform: translateY(var(--dy, 0)) rotate(var(--tilt, 0deg)); }
@media (hover: hover){
  .fine .sticker:hover{ transform: translateY(var(--dy, 0)) rotate(0deg) scale(1.05); }
}
.fine .s-tag    { width: clamp(210px, 21vw, 310px); --tilt: -8deg;  --dy: 8px; }
.fine .s-lid    { width: clamp(150px, 14vw, 210px); --tilt: 9deg;   --dy: -30px; }
.fine .s-ticket { width: clamp(200px, 19vw, 280px); --tilt: -4deg;  --dy: 22px; }
.fine .s-cottage{ width: clamp(140px, 13vw, 190px); --tilt: 7deg;   --dy: -14px; }
.fine .s-burst  { width: clamp(160px, 15vw, 222px); --tilt: -11deg; --dy: 6px; }
.fine .s-oval   { width: clamp(180px, 17vw, 250px); --tilt: 6deg;   --dy: -24px; }
.fine .s-bubble { width: clamp(180px, 16vw, 236px); --tilt: -6deg;  --dy: 14px; }
.fine__note{
  margin: clamp(56px, 6vw, 96px) auto 0;
  text-align: center; font-size: var(--fs-small); color: var(--on-sky-2); max-width: 40ch;
}

/* sticker paint. colours ride custom properties through <use> */
.st-cut   { fill: var(--curd); stroke: var(--curd); stroke-linejoin: round; }
.st-fill  { fill: var(--st-fill); stroke: var(--st-fill); stroke-linejoin: round; }
.st-ink   { fill: var(--st-ink); }
.st-line  { fill: none; stroke: var(--st-ink); stroke-linecap: round; stroke-linejoin: round; }
.st-key   { fill: none; stroke: var(--st-ink); stroke-linejoin: round; opacity: .55; }
.st-curd  { fill: var(--curd); }
.st-bark  { fill: var(--bark); }
.st-tomato{ fill: var(--tomato); }
.st-rib   { fill: none; stroke: rgba(0, 0, 0, .18); }   /* black at 18%: the ribbed rim of the tub lid */
.st-string{ fill: none; stroke: var(--bark); stroke-linecap: round; }
.st-dash  { fill: none; stroke: var(--bark); stroke-linecap: round; opacity: .7; }
.st-edge  { stroke: var(--curd); }
.st-ring  { fill: none; stroke: var(--curd); opacity: .5; }
.st-seal-mark{ color: var(--curd); }
.st-type  { font-family: var(--ff-display); font-weight: 700; }
.st-mid   { font-family: var(--ff-display); font-weight: 500; }
.st-caps  { font-family: var(--ff-sans); font-weight: 600; }

.s-tag    { --st-fill: var(--salt);   --st-ink: var(--curd); }
.s-ticket { --st-fill: var(--bagel);  --st-ink: var(--bark); }
.s-cottage{ --st-fill: var(--honey);  --st-ink: var(--bark); }
.s-burst  { --st-fill: var(--tomato); --st-ink: var(--curd); }
.s-oval   { --st-fill: var(--pickle); --st-ink: var(--bark); }
.s-bubble { --st-fill: var(--curd);   --st-ink: var(--bark); }
.s-oval--inked{ --st-fill: var(--bark); --st-ink: var(--curd); }   /* on the pickle bag: invert, never pop on pop */

/* ==========================================================================
   9 · Find us (curd): the quiet form
   ========================================================================== */
.find{
  background: var(--curd); color: var(--on-curd);
  padding: var(--section) var(--gutter);
  border-top: 1px solid var(--rule-sky);
  text-align: center;
}
.find__title{
  margin-top: 18px;
  font: 300 clamp(44px, 4.6vw, 68px)/1.1 var(--ff-display);
  letter-spacing: -.03em;
}
.find__line{ margin: 20px auto 0; max-width: 52ch; color: var(--on-curd-2); }
.find__line span{ display: block; text-wrap: balance; }
.find__form{ width: min(480px, 100%); margin: clamp(48px, 5vw, 72px) auto 0; }
.find__fields{ display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 18px; text-align: left; }
.field{ display: grid; gap: 8px; font-size: 14px; color: var(--on-curd); }
.field input{
  width: 100%; height: 46px; padding: 0 14px;
  border: 1px solid var(--rule-curd-2); border-radius: 0;
  background: var(--field);
  font: 400 16px/1.4 var(--ff-sans); color: var(--on-curd);
  transition: border-color var(--dur-1) ease;
}
.field input:hover{ border-color: var(--bark); }
.field input:focus-visible{ outline: 1px solid var(--bark); outline-offset: 0; border-color: var(--bark); }
.find__form .quiet{ margin-top: 26px; }
.done{ display: none; }
[data-state="sent"] .done{ display: block; }
[data-state="sent"] [data-fields]{ display: none; }
.find .done{
  margin-inline: auto; max-width: 26ch;
  font: 300 clamp(22px, 2vw, 28px)/1.3 var(--ff-display); letter-spacing: -.015em;
  text-wrap: balance;
}
.done:focus{ outline: none; }

/* ==========================================================================
   10 · Stay crunchy (tomato, once)
   ========================================================================== */
.close{
  background: var(--tomato); color: var(--on-tomato);
  padding: clamp(112px, 13vw, 210px) var(--gutter);
  text-align: center;
}
.close__line{
  font: 300 var(--fs-close)/.9 var(--ff-display);
  letter-spacing: -.055em;
  text-wrap: balance;
}

/* ==========================================================================
   11 · Footer (bark, the one anchor ground)
   ========================================================================== */
.site-footer{
  background: var(--bark); color: var(--on-bark);
  padding: clamp(88px, 9vw, 136px) var(--gutter) 0;
}
.footer__grid{
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(48px, 6vw, 96px);
  max-width: var(--wrap); margin: 0 auto;
}
.footer__eyebrow{ color: var(--on-bark-2); }
.footer__title{
  margin-top: 20px;
  font: 300 clamp(28px, 2.8vw, 40px)/1.1 var(--ff-display);
  letter-spacing: -.03em; max-width: 16ch; text-wrap: balance;
}
.news{
  display: flex; align-items: center; gap: 20px;
  max-width: 440px; margin-top: 32px; padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-bark);
  transition: border-color var(--dur-1) ease;
}
.news:focus-within{ border-bottom-color: var(--on-bark); }
.news input{
  flex: 1; min-width: 0; padding: 8px 0;
  border: 0; background: transparent;
  font: 400 16px/1.4 var(--ff-sans); color: var(--on-bark);
}
.news input::placeholder{ color: var(--on-bark-2); opacity: 1; }
.news input:focus{ outline: none; }
.news .quiet{ color: var(--on-bark); }
.site-footer .done{ margin-top: 32px; max-width: 30ch; color: var(--on-bark-2); }

.footer__links{
  display: grid; grid-template-columns: repeat(2, auto); justify-content: end; align-content: start;
  gap: clamp(40px, 6vw, 96px);
  font-size: 15px;
}
.footer__links li + li{ margin-top: 12px; }
.footer__links a{ text-decoration: none; color: var(--on-bark-2); }
.footer__links a:hover{ color: var(--on-bark); text-decoration: underline; text-underline-offset: 4px; }

.footer__sign{ max-width: var(--wrap); margin: clamp(88px, 10vw, 150px) auto 0; color: var(--on-bark); }
.footer__sign svg{ width: 100%; height: auto; }
.footer__base{
  display: flex; justify-content: space-between; gap: 20px;
  max-width: var(--wrap); margin: 28px auto 0; padding: 22px 0 30px;
  border-top: 1px solid var(--rule-bark);
  font-size: 13px; color: var(--on-bark-2);
}

/* ==========================================================================
   The bag drawer (<dialog>). Only [open] gets a display value: the UA
   stylesheet hides a closed dialog, and a bare display rule would undo that.
   ========================================================================== */
.cart{
  position: fixed; inset: 0 0 0 auto;
  width: min(440px, 100vw); max-width: 100vw;
  height: 100dvh; max-height: 100dvh;
  margin: 0; padding: 0; border: 0;
  border-left: 1px solid var(--rule-curd);
  background: var(--curd); color: var(--on-curd);
  overscroll-behavior: contain;
}
.cart[open]{ display: flex; animation: cart-in var(--dur-3) var(--ease-out); }
.cart[data-state="closing"]{ animation: cart-out var(--dur-2) var(--ease-in) forwards; }
.cart::backdrop{ background: var(--scrim); }
.cart[open]::backdrop{ animation: fade-in var(--dur-2) ease; }
.cart[data-state="closing"]::backdrop{ animation: fade-out var(--dur-2) ease forwards; }
@keyframes cart-in { from{ translate: 100% 0; } }
@keyframes cart-out{ to  { translate: 100% 0; } }
@keyframes fade-in { from{ opacity: 0; } }
@keyframes fade-out{ to  { opacity: 0; } }

.cart__panel{ display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cart__head{
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 30px 28px 24px;
  border-bottom: 1px solid var(--rule-curd);
}
.cart__title{ font: 300 clamp(28px, 2.4vw, 34px)/1 var(--ff-display); letter-spacing: -.03em; }
.cart__title:focus{ outline: none; }
.cart__body{ flex: 1; min-height: 0; overflow-y: auto; padding: 0 28px; }

.line{
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 16px; align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule-curd);
}
.line[data-fresh]{ animation: fresh 1.4s var(--ease-out); }
@keyframes fresh{ from{ background: var(--wash); } }
.line__thumb{
  display: grid; place-items: center;
  width: 72px; height: 88px; border-radius: 12px;
  background: var(--sky);
}
.line__thumb img{ width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.line__name{ font: 300 20px/1.15 var(--ff-display); letter-spacing: -.02em; }
.line__size{ margin-top: 4px; font-size: 13.5px; color: var(--on-curd-2); }
.qty{
  display: inline-flex; align-items: center;
  margin-top: 12px;
  border: 1px solid var(--rule-curd-2); border-radius: 999px;
}
.qty button{
  width: 34px; height: 32px; padding: 0;
  border: 0; border-radius: 999px; background: none;
  font: 400 17px/1 var(--ff-sans);
}
.qty button:disabled{ opacity: .35; cursor: default; }
.qty output{ min-width: 2ch; text-align: center; font: 500 14px/1 var(--ff-sans); font-variant-numeric: tabular-nums; }
.line__end{ display: grid; justify-items: end; gap: 10px; }
.line__price{ font: 500 15px/1.2 var(--ff-sans); font-variant-numeric: tabular-nums; }
.line__remove{ padding: 4px 0; color: var(--on-curd-2); }

.cart__empty{ display: none; padding: 56px 0; }
.cart[data-empty="true"] .cart__empty{ display: grid; justify-items: start; gap: 22px; }
.cart[data-empty="true"] .cart__lines,
.cart[data-empty="true"] .cart__foot{ display: none; }
.cart__empty p{ font: 300 clamp(24px, 2.2vw, 30px)/1.2 var(--ff-display); letter-spacing: -.02em; max-width: 14ch; }

.cart__foot{
  display: grid; gap: 14px;
  padding: 22px 28px calc(26px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule-curd);
}
.cart__sub{ display: flex; align-items: baseline; justify-content: space-between; }
.cart__sub output{ font: 300 26px/1 var(--ff-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cart__ship{ font-size: 13.5px; color: var(--on-curd-2); }
.pill--block{ width: 100%; margin-top: 6px; }

/* ==========================================================================
   Reveal on scroll: armed by JS only, so the no-JS page is complete
   ========================================================================== */
[data-reveal="armed"]{ opacity: 0; translate: 0 var(--reveal-y); }
[data-reveal="in"]{
  opacity: 1; translate: 0 0;
  transition: opacity var(--dur-3) var(--ease-out), translate var(--dur-3) var(--ease-out);
}
.shelf > [data-reveal]:nth-child(2), .steps > [data-reveal]:nth-child(2), .wild__row > [data-reveal]:nth-child(2){ transition-delay: 90ms; }
.shelf > [data-reveal]:nth-child(3), .steps > [data-reveal]:nth-child(3), .wild__row > [data-reveal]:nth-child(3){ transition-delay: 180ms; }
.shelf > [data-reveal]:nth-child(4){ transition-delay: 270ms; }

/* Images that have not landed yet (JS marks them). Keeps the layout legible. */
img[data-state="missing"]{ color: transparent; }
.card__lift img[data-state="missing"],
.hero__bag img[data-state="missing"]{
  background: var(--pack-tone, var(--rule-curd)) content-box;
  padding: 5% 6% 4%; border-radius: 8px;
}
.sampler__img img[data-state="missing"]{ background: var(--rule-sky) content-box; padding: 16% 6% 6%; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px){
  .split__media{ grid-column: 1 / span 7; }
  .split__text{ grid-column: 8 / span 5; }
}

@media (max-width: 900px){
  .shelf{ grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 72px; }
  .sampler{ grid-template-columns: 1fr; padding: 28px 24px 40px; border-radius: 22px; }
  .sampler__body{ justify-items: center; text-align: center; }
  .sampler__name{ margin-inline: auto; }
  .sampler .buy{ justify-content: center; }
  .steps{ grid-template-columns: 1fr; row-gap: 64px; max-width: 560px; }
  .step{ width: 76%; }
  .step:nth-child(2){ margin-top: 0; justify-self: end; }
  .step:nth-child(3){ margin-top: 0; }
  .split{ grid-template-columns: 1fr; row-gap: 36px; }
  .split__media, .split__text{ grid-column: 1; }
  .footer__grid{ grid-template-columns: 1fr; }
  .footer__links{ justify-content: start; }
}

@media (max-width: 820px){
  /* the hero stacks: crispy / bag / chips */
  :root{ --fs-giant: clamp(76px, 24vw, 132px); }
  .stage{ padding-block: calc(var(--fs-giant) * .98) calc(var(--fs-giant) * .86); }
  .giant--a{ left: 0; top: 0; transform: none; }
  .giant--b{ right: .06em; top: auto; bottom: 0; transform: none; }
  .hero{ padding-top: 30px; }
  .hero__bag{ width: min(60vw, 300px); }
  .hero__seal{ width: 36%; left: -12%; top: -2%; }
}

@media (max-width: 640px){
  .nav__more{ display: none; }
  .site-header{ gap: 16px; }
  .lockup{ width: clamp(150px, 50vw, 196px); }
  .wild__row{ grid-template-columns: 1fr 1fr; grid-template-areas: "land land" "a b"; }
  .tile--land{ grid-area: land; }
  .tile--a{ grid-area: a; }
  .tile--b{ grid-area: b; }
  .fine__grid{ gap: 28px 14px; }
  .fine .s-tag{ width: 50vw; }     .fine .s-lid{ width: 33vw; }
  .fine .s-ticket{ width: 53vw; }  .fine .s-cottage{ width: 31vw; }
  .fine .s-burst{ width: 37vw; }   .fine .s-oval{ width: 44vw; }
  .fine .s-bubble{ width: 46vw; }
  .fine .sticker{ --dy: 0px; }
  .find__fields{ grid-template-columns: 1fr; }
  .footer__base{ flex-direction: column; gap: 6px; }
  .cart__head, .cart__foot{ padding-inline: 20px; }
  .cart__body{ padding-inline: 20px; }
}

@media (max-width: 360px){
  .nav{ letter-spacing: .08em; }
}

@media (max-width: 420px){
  .card__bag{ padding-inline: 10px; }
  .size span{ padding: 7px 10px 8px; }
  .bag-sticker{ width: 54%; right: -12%; }
}