/* ============================================================
   KRAMA'S JERKED BEEF — kraft paper rustic
   Shared by every page. v3, 2 Oct 2026 (built on the v2 look).
   ============================================================ */
/* Fonts are self-hosted (latin only) so no Google request blocks the first paint. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/archivo.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Kalam';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/kalam-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Rubik Dirt';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/rubik-dirt-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/space-mono-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/space-mono-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --kraft:        #bda184;
  --kraft-light:  #cdb699;
  --kraft-deep:   #a78b6c;
  --kraft-dark:   #8f7458;
  --ink:          #2b2620;
  --ink-soft:     #3d362e;
  --red:          #8e2a23;
  --red-deep:     #5a1813;   /* darkened 18 Oct 2026 so small red text passes WCAG AA on kraft */
  --red-light:    #c96b5d;   /* the red, lifted for dark backgrounds only */
  --brown:        #5f4124;
  --paper:        #f7f1e4;
  --paper-shadow: rgba(43,38,32,.28);
  --dash: rgba(43,38,32,.65);
  --nav-h: 70px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
section[id],header[id],main[id],details[id]{scroll-margin-top:calc(var(--nav-h) + 1rem)}
::selection{background:var(--red);color:var(--paper)}

body{
  font-family:'Archivo',system-ui,sans-serif;
  background-color:var(--kraft);
  color:var(--ink);
  overflow-x:clip;
  line-height:1.6;
  -webkit-text-size-adjust:100%;
}
main{position:relative;z-index:2}

h1,h2,h3{line-height:1.05}
.display{font-family:'Rubik Dirt',system-ui;font-weight:400;letter-spacing:.01em}
.hand{font-family:'Kalam',cursive;font-style:italic;font-weight:700}
.mono{font-family:'Space Mono',monospace}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}

/* skip link for keyboard users */
.skip{
  position:absolute;left:1rem;top:-4rem;z-index:300;
  background:var(--ink);color:var(--paper);padding:.7rem 1rem;font-weight:700;text-decoration:none;
}
.skip:focus{top:1rem}

/* the cow mark */
.cow{display:block;width:100%;height:auto}
.cow--light{filter:invert(1) sepia(.45) saturate(.7) brightness(1.02)}

/* long-dash rule, like the front label */
.dash-rule{
  height:3px;border:0;
  background:repeating-linear-gradient(90deg,var(--dash) 0 26px,transparent 26px 38px);
}

/* ============================================================
   TICKER
   ============================================================ */
.ticker{
  background:var(--ink);color:var(--kraft-light);
  overflow:hidden;white-space:nowrap;
  font-weight:700;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  padding:.55rem 0;position:relative;z-index:10;
}
.ticker__track{display:inline-block;animation:ticker 28s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker span{display:inline-block;padding:0 1.6rem}
.ticker .star{color:var(--red-light);transform:translateY(1px)}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   NAV  (+ mobile menu)
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:var(--nav-h);
  padding:.6rem clamp(1rem,4vw,2.5rem);
  background:var(--kraft);
  border-bottom:2px solid rgba(43,38,32,.25);
}
.nav__brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;min-height:44px}
.nav__brand .cow{width:40px}
.nav__brand b{font-family:'Rubik Dirt';font-weight:400;font-size:1.15rem;letter-spacing:.04em}
.nav__right{display:flex;align-items:center;gap:clamp(.6rem,3vw,1.6rem)}
.nav__links{display:flex;gap:clamp(.8rem,3vw,2rem);list-style:none}
.nav__links a{
  display:inline-block;text-decoration:none;font-weight:700;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.14em;
  padding:.6rem .2rem;position:relative;
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:.25rem;
  height:3px;background:var(--red);transition:right .25s ease;
}
.nav__links a:hover::after{right:0}

.nav__toggle{
  display:none;
  width:46px;height:46px;flex:0 0 46px;
  background:transparent;border:2px solid var(--ink);cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  box-shadow:2px 2px 0 var(--ink);
}
.nav__toggle span{display:block;width:20px;height:2.5px;background:var(--ink);transition:transform .25s ease,opacity .2s ease}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ============================================================
   BUTTONS  (Order is the one primary call to action)
   ============================================================ */
.btn-order{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;
  background:var(--red);color:var(--paper);
  font-family:inherit;font-weight:800;letter-spacing:.16em;text-transform:uppercase;font-size:.8rem;
  padding:.7rem 1.25rem;
  text-decoration:none;text-align:center;cursor:pointer;
  border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.btn-order:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.btn-order:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.btn-order--lg{font-size:.95rem;padding:1rem 1.9rem;letter-spacing:.18em;min-height:54px}
.btn-order--ghost{background:transparent;color:var(--ink)}
.btn-order--ghost:hover{background:var(--ink);color:var(--paper)}
.btn-order[disabled]{opacity:.7;cursor:wait}
/* no Stripe link pasted in -> "Coming soon", never a dead "#" */
.btn-order[aria-disabled="true"]{
  background:var(--kraft-deep);color:var(--ink);border-color:var(--kraft-dark);
  box-shadow:none;transform:none;cursor:not-allowed;pointer-events:none;
}

/* ============================================================
   HERO — words + Order on the left, the front-of-pack lockup on the right
   ============================================================ */
.hero{
  max-width:1180px;margin:0 auto;
  min-height:calc(100svh - var(--nav-h) - 34px);
  display:grid;grid-template-columns:.92fr 1.08fr;align-items:center;
  gap:clamp(2rem,5vw,4.5rem);
  padding:clamp(2.5rem,7vh,5rem) clamp(1.25rem,5vw,3rem) clamp(3rem,8vh,5rem);
}
.hero__copy .eyebrow{margin-bottom:1.2rem}
.hero__title{
  font-family:'Rubik Dirt';font-weight:400;
  font-size:clamp(2.35rem,5.4vw,4.1rem);
  line-height:1.02;margin-bottom:1.2rem;
}
.hero__title span{color:var(--red)}
.hero__lede{font-size:clamp(1.05rem,2.2vw,1.22rem);color:var(--ink-soft);max-width:44ch;margin-bottom:1.8rem}
.hero__cta{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.hero .ship-line{margin:1.6rem 0 0}

.hero__brand{text-align:center;display:flex;flex-direction:column;align-items:center}
.hero__logo{width:min(520px,100%);container-type:inline-size}
.arc-title{width:100%;overflow:visible;display:block}
.arc-title text{font-family:'Rubik Dirt';font-size:92px;fill:var(--ink)}
.hero__sub{
  font-family:'Rubik Dirt';font-size:13cqi;white-space:nowrap;
  color:var(--red);margin-top:-.4em;letter-spacing:.02em;transform:rotate(-1.2deg);
  line-height:1.1;
}
.hero__cow{width:clamp(120px,15vw,170px);margin:1.2rem auto .6rem}
.hero__tag{font-size:clamp(1.1rem,2.6vw,1.55rem);margin:.9rem auto .3rem}
.hero__brand .dash-rule{width:min(400px,86%);margin:.9rem auto}

/* anime.js entrance: the logo starts hidden while it loads; js/hero-wait.js
   removes the class on a timeout so nothing can get stuck hidden. The headline
   and buttons are never hidden, so they paint straight away. */
html.hero-wait .hero__logo,
html.hero-wait .hero__brand .dash-rule,
html.hero-wait .hero__tag{opacity:0}
.char{display:inline-block;white-space:pre}

/* ============================================================
   SECTION SHELL
   ============================================================ */
section{padding:clamp(3.5rem,9vw,7rem) clamp(1.25rem,5vw,3rem)}
.wrap{max-width:1120px;margin:0 auto}
.eyebrow{
  font-weight:800;font-size:.8rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--red-deep);display:flex;align-items:center;gap:.9rem;margin-bottom:1rem;
}
.eyebrow::before{content:"";width:42px;height:3px;background:var(--red);flex:0 0 42px}
.section-title{font-family:'Rubik Dirt';font-weight:400;font-size:clamp(2.2rem,6vw,3.8rem);margin-bottom:1.2rem}

/* reveal on scroll (individual transform properties so tilts survive) */
.reveal{
  opacity:0;translate:0 34px;
  transition:opacity .7s cubic-bezier(.2,.75,.25,1),
             translate .7s cubic-bezier(.2,.75,.25,1),
             scale .7s cubic-bezier(.2,.75,.25,1),
             rotate .7s cubic-bezier(.2,.75,.25,1);
}
.reveal.in{opacity:1;translate:0 0;scale:1;rotate:0deg}
.reveal--left {translate:-52px 0; rotate:-1.6deg}
.reveal--right{translate: 52px 0; rotate: 1.6deg}
.reveal--pop  {translate:0 14px; scale:.82; rotate:-3deg}
/* no JS = no reveal animation, everything just shows */
html:not(.js) .reveal{opacity:1;translate:none;scale:none;rotate:none}

/* ============================================================
   TAPED PHOTO FRAME  (flavours, bundles, subscribe, contact)
   ============================================================ */
.photo{
  position:relative;
  background:var(--paper);
  padding:12px 12px 16px;
  transform:rotate(-2.2deg);
  box-shadow:0 18px 40px -12px var(--paper-shadow), 0 4px 0 rgba(43,38,32,.15);
  transition:transform .4s ease,
             opacity .7s cubic-bezier(.2,.75,.25,1),
             translate .7s cubic-bezier(.2,.75,.25,1),
             scale .7s cubic-bezier(.2,.75,.25,1),
             rotate .7s cubic-bezier(.2,.75,.25,1);
}
.photo:hover{transform:rotate(-.6deg) scale(1.012)}
.photo::before,.photo::after{
  content:"";position:absolute;width:104px;height:32px;z-index:1;
  background:rgba(214,196,162,.85);
  box-shadow:0 1px 4px rgba(43,38,32,.25);
  transform:rotate(-45deg);
}
.photo::before{top:-12px;left:-34px}
.photo::after{bottom:-12px;right:-34px}
.photo img{width:100%;aspect-ratio:4/5;object-fit:cover}
.photo--r{transform:rotate(2.2deg)}
.photo--r:hover{transform:rotate(.6deg) scale(1.012)}
.photo--r::before{left:auto;right:-34px;transform:rotate(45deg)}
.photo--r::after{right:auto;left:-34px;transform:rotate(45deg)}
.photo figcaption{
  font-family:'Kalam';font-style:italic;font-weight:700;color:var(--brown);
  font-size:1rem;text-align:center;padding-top:.6rem;
}

/* ============================================================
   FLAVOURS
   ============================================================ */
.flavour__row{
  display:grid;grid-template-columns:minmax(280px,430px) 1fr;
  gap:clamp(2rem,6vw,5rem);align-items:center;
}
.flavour__row--flip{grid-template-columns:1fr minmax(280px,430px)}
.flavour__row--flip .photo{grid-column:2;grid-row:1}
.flavour__row--flip .flavour__copy{grid-column:1;grid-row:1}

.flavour__copy .section-title{margin-bottom:.4rem}
.flavour__kicker{font-size:clamp(1.05rem,2.6vw,1.3rem);color:var(--red-deep);margin-bottom:1.2rem}
.flavour__copy p{max-width:54ch;margin-bottom:1.1rem;font-size:1.02rem;color:var(--ink-soft)}
.flavour__split{margin:clamp(3rem,7vw,5rem) 0}

/* heat meter */
.heat{display:flex;align-items:center;gap:.7rem;margin:1.6rem 0 1.8rem;flex-wrap:wrap}
.heat__label{font-weight:800;font-size:.78rem;letter-spacing:.26em;text-transform:uppercase}
.heat svg{width:26px;height:26px}
.heat .on{fill:var(--red)}
.heat .off{fill:var(--ink);opacity:.25}
.heat__word{font-size:.95rem;color:var(--red-deep)}

/* fact chips */
.chips{display:flex;flex-wrap:wrap;gap:.7rem}
.chip{
  border:2px solid var(--ink);padding:.55rem .95rem;
  font-weight:800;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  background:var(--kraft-light);
  box-shadow:3px 3px 0 rgba(43,38,32,.55);
  transform:rotate(-.6deg);
}
.chip:nth-child(2n){transform:rotate(.8deg)}
.chip b{color:var(--red-deep)}

/* ---- "What's in it" — expands to the back-of-bag panels ---- */
.info{margin-top:clamp(2.2rem,5vw,3rem)}
.info > summary{
  list-style:none;cursor:pointer;
  display:flex;width:fit-content;max-width:100%;margin:0 auto;
  align-items:center;gap:.8rem;min-height:48px;
  padding:.7rem 1.1rem .7rem 1rem;
  background:var(--paper);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
  font-weight:800;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  transition:transform .15s ease,box-shadow .15s ease;
  user-select:none;
}
.info > summary::-webkit-details-marker{display:none}
.info > summary:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.info__icon{
  width:22px;height:22px;flex:0 0 22px;position:relative;
  background:var(--red);border-radius:50%;
}
.info__icon::before,.info__icon::after{
  content:"";position:absolute;left:50%;top:50%;width:10px;height:2.5px;background:var(--paper);
  translate:-50% -50%;transition:rotate .25s ease;
}
.info__icon::after{rotate:90deg}
.info[open] .info__icon::after{rotate:0deg}
.info__hide{display:none}
.info[open] .info__show{display:none}
.info[open] .info__hide{display:inline}

/* smooth open where the browser supports it; instant everywhere else */
@supports (interpolate-size:allow-keywords){
  .info{interpolate-size:allow-keywords}
  .info::details-content{
    block-size:0;overflow:hidden;
    transition:block-size .45s cubic-bezier(.2,.75,.25,1),content-visibility .45s allow-discrete;
  }
  .info[open]::details-content{block-size:auto}
}

.info__panels{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(1.6rem,4vw,3rem);align-items:start;
  padding:2.2rem 0 .8rem;
}

/* receipt-style panels, like the back-of-pack label */
.panel{
  background:var(--paper);
  padding:clamp(1.3rem,3.5vw,2rem);
  box-shadow:0 16px 36px -14px var(--paper-shadow);
  position:relative;
}
.panel--tilt-l{transform:rotate(-.6deg)}
.panel--tilt-r{transform:rotate(.5deg)}
.panel::before,.panel::after{content:"";position:absolute;left:0;right:0;height:10px;background:var(--paper)}
.panel::before{
  top:-9px;
  clip-path:polygon(0 100%,2.5% 0,5% 100%,7.5% 0,10% 100%,12.5% 0,15% 100%,17.5% 0,20% 100%,22.5% 0,25% 100%,27.5% 0,30% 100%,32.5% 0,35% 100%,37.5% 0,40% 100%,42.5% 0,45% 100%,47.5% 0,50% 100%,52.5% 0,55% 100%,57.5% 0,60% 100%,62.5% 0,65% 100%,67.5% 0,70% 100%,72.5% 0,75% 100%,77.5% 0,80% 100%,82.5% 0,85% 100%,87.5% 0,90% 100%,92.5% 0,95% 100%,97.5% 0,100% 100%);
}
.panel::after{
  bottom:-9px;
  clip-path:polygon(0 0,2.5% 100%,5% 0,7.5% 100%,10% 0,12.5% 100%,15% 0,17.5% 100%,20% 0,22.5% 100%,25% 0,27.5% 100%,30% 0,32.5% 100%,35% 0,37.5% 100%,40% 0,42.5% 100%,45% 0,47.5% 100%,50% 0,52.5% 100%,55% 0,57.5% 100%,60% 0,62.5% 100%,65% 0,67.5% 100%,70% 0,72.5% 100%,75% 0,77.5% 100%,80% 0,82.5% 100%,85% 0,87.5% 100%,90% 0,92.5% 100%,95% 0,97.5% 100%,100% 0);
}
.panel h3{
  font-family:'Space Mono';font-size:1rem;letter-spacing:.32em;
  text-transform:uppercase;border-bottom:3px solid var(--ink);
  padding-bottom:.55rem;margin-bottom:1.1rem;
}
.panel--ingredients p{
  font-family:'Space Mono';font-size:.8rem;line-height:1.75;
  text-transform:uppercase;letter-spacing:.02em;color:var(--ink-soft);
}
.panel--ingredients p + p{margin-top:.9rem}
.panel--ingredients .warn{font-weight:700;color:var(--red-deep)}
.serv-line{
  font-family:'Space Mono';font-size:.78rem;text-transform:uppercase;
  letter-spacing:.06em;display:flex;column-gap:1.6rem;row-gap:.2rem;flex-wrap:wrap;margin-bottom:1rem;
}
table.nutri{width:100%;border-collapse:collapse;font-family:'Space Mono';font-size:.8rem;text-transform:uppercase}
table.nutri caption{text-align:left}
table.nutri th{text-align:left;font-weight:700;letter-spacing:.06em;border-bottom:2px solid var(--ink);padding:.45rem .3rem}
table.nutri th:not(:first-child),table.nutri td:not(:first-child){text-align:right;white-space:nowrap}
table.nutri td{padding:.48rem .3rem;border-bottom:1px solid rgba(43,38,32,.22)}
table.nutri tbody th{font-weight:400;border-bottom:1px solid rgba(43,38,32,.22);letter-spacing:0}
table.nutri tr:last-child td,table.nutri tr:last-child th{border-bottom:0}
table.nutri .sub-row th{padding-left:1.1rem}
.nutri-note{font-family:'Space Mono';font-size:.68rem;letter-spacing:.04em;margin-top:.7rem;opacity:.8}

/* ============================================================
   PROCESS STRIP
   ============================================================ */
.process{background:var(--ink);color:var(--kraft-light);position:relative}
.process .eyebrow{color:var(--kraft-light)}
.process .section-title{color:var(--paper)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,3vw,2.5rem);margin-top:2.5rem}
.step{border:2px dashed rgba(205,182,153,.45);padding:1.8rem 1.4rem;position:relative}
.step__num{
  position:absolute;top:-1.05rem;left:1.1rem;
  background:var(--red);color:var(--paper);
  font-family:'Rubik Dirt';font-size:1.25rem;
  width:2.2rem;height:2.2rem;display:grid;place-items:center;transform:rotate(-4deg);
}
.step h3{font-family:'Rubik Dirt';font-weight:400;font-size:1.35rem;margin-bottom:.55rem;color:var(--paper)}
.step p{font-size:.95rem;opacity:.88}
.steps .step:nth-child(1){transition-delay:.05s}
.steps .step:nth-child(2){transition-delay:.19s}
.steps .step:nth-child(3){transition-delay:.33s}
.process__spine{
  position:absolute;left:clamp(.5rem,2.4vw,1.3rem);top:0;height:100%;width:3px;
  background:repeating-linear-gradient(to bottom,var(--kraft-light) 0 9px,transparent 9px 18px);
  opacity:.5;pointer-events:none;z-index:0;
}
.process .wrap{position:relative;z-index:1}

/* ============================================================
   SECTION HEADS WITH A PHOTO  (shop + subscribe)
   ============================================================ */
.split-head{
  display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(2rem,6vw,4.5rem);
  align-items:center;max-width:1000px;margin:0 auto 3.4rem;
}
.split-head--flip{grid-template-columns:.8fr 1.2fr}
.split-head--flip .photo{grid-column:1;grid-row:1}
.split-head--flip .split-head__text{grid-column:2;grid-row:1}
.split-head .photo{max-width:340px;justify-self:center;width:100%}
.lead{font-size:clamp(1.05rem,2.6vw,1.2rem);color:var(--ink-soft);max-width:52ch}

/* ============================================================
   SHOP
   ============================================================ */
.shop{background:var(--kraft-light)}
.shop__grid,.sub__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(1.4rem,3.5vw,2.2rem);max-width:1000px;margin:0 auto;align-items:stretch;
}
.sub__grid{max-width:720px}

.card{
  background:var(--paper);
  padding:1.6rem 1.5rem 1.5rem;
  display:flex;flex-direction:column;
  box-shadow:0 18px 40px -14px var(--paper-shadow),0 4px 0 rgba(43,38,32,.15);
  position:relative;
  transition:transform .35s ease,
             opacity .7s cubic-bezier(.2,.75,.25,1),
             translate .7s cubic-bezier(.2,.75,.25,1),
             scale .7s cubic-bezier(.2,.75,.25,1),
             rotate .7s cubic-bezier(.2,.75,.25,1);
}
.card:hover{transform:translateY(-4px)}
.card--feature{outline:3px solid var(--red);outline-offset:0}
.card__flag{
  position:absolute;top:-14px;right:14px;
  background:var(--red);color:var(--paper);
  font-weight:800;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.42rem .8rem;transform:rotate(-2deg);box-shadow:3px 3px 0 var(--ink);
}
.card__name{font-family:'Rubik Dirt';font-weight:400;font-size:1.5rem;line-height:1.1;margin-bottom:.15rem}
.card__sub{font-weight:800;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--brown);margin-bottom:.9rem}
.card__price{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.2rem;flex-wrap:wrap}
.card__price b{font-family:'Space Mono',monospace;font-size:1.9rem;font-weight:700;line-height:1}
.card__price span{font-size:.88rem;color:var(--ink-soft)}
.card__per{font-family:'Space Mono',monospace;font-size:.8rem;color:var(--ink-soft);margin-bottom:.9rem}
.card__note{font-size:.92rem;color:var(--ink-soft);margin-bottom:1.1rem}
.card__split{font-family:'Kalam';font-style:italic;font-weight:700;color:var(--red-deep);font-size:1.02rem;margin-top:.1rem}
.card__body{flex:1}
.card .dash-rule{margin:.9rem 0 1rem}
.card .btn-order{width:100%;min-height:50px}

/* live "Order now -> ships Wednesday ..." line */
.ship-line{
  display:inline-flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  margin-top:1.5rem;padding:.65rem 1.1rem;
  background:var(--paper);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
  font-weight:800;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  transform:rotate(-.8deg);
}
.ship-line__arrow{color:var(--red);font-size:1.05rem;line-height:1}
.ship-line b{color:var(--red-deep)}

/* "good to know" list */
.shop__foot{text-align:center;margin-top:2.8rem;font-size:.95rem;color:var(--ink-soft)}
.shop__foot a{font-weight:700}
.notes{
  list-style:none;text-align:left;max-width:640px;margin:0 auto 1.2rem;
  display:grid;gap:.55rem;font-size:.95rem;color:var(--ink-soft);
}
.notes li{position:relative;padding-left:1.4rem}
.notes li::before{content:"";position:absolute;left:0;top:.62em;width:13px;height:3px;background:var(--red)}
.notes b{color:var(--ink)}
.notes__title{font-weight:800;font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ink);margin-bottom:.8rem;text-align:center}

/* ============================================================
   SUBSCRIPTION
   ============================================================ */
.sub{background:var(--paper)}
.sub .card{background:var(--kraft-light)}
.sub .notes{margin-top:2.4rem}
.perks{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem;max-width:860px;margin:2.4rem auto 0}
.perk{background:var(--kraft-light);padding:1.1rem 1rem;border-left:5px solid var(--red)}
.perk b{display:block;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.3rem}
.perk span{font-size:.92rem;color:var(--ink-soft)}

/* ============================================================
   NEWSLETTER / NEXT BATCH
   ============================================================ */
.teaser{background:var(--ink);color:var(--kraft-light);text-align:center}
.teaser .eyebrow{color:var(--kraft-light);justify-content:center}
.teaser .section-title{color:var(--paper)}
.teaser__inner{max-width:680px}
.teaser__lead{font-size:clamp(1.05rem,2.6vw,1.22rem);opacity:.9;max-width:54ch;margin:0 auto 2rem}

.mystery{position:relative;width:min(280px,76%);margin:.4rem auto 2.3rem;transform:rotate(-2deg)}
.mystery__pouch{
  position:relative;overflow:hidden;
  background:var(--kraft);color:var(--ink);
  border:1px solid rgba(43,38,32,.25);
  padding:1.9rem 1.3rem 1.7rem;text-align:center;
  box-shadow:0 22px 46px -14px rgba(0,0,0,.6);
}
.mystery__q{position:absolute;inset:0;display:grid;place-items:center;font-family:'Rubik Dirt';font-size:13rem;line-height:1;color:rgba(43,38,32,.07);pointer-events:none}
.mystery__pouch .l-name{font-family:'Rubik Dirt';font-size:1.8rem;transform:rotate(-2deg);position:relative}
.mystery__pouch .l-sub{font-family:'Rubik Dirt';font-size:1.45rem;color:var(--red);margin-top:.1em;position:relative}
.mystery__pouch .cow{width:84px;margin:.7rem auto .5rem;position:relative}
.mystery__pouch .dash-rule{width:85%;margin:.6rem auto;position:relative}
.mystery__flav{font-family:'Rubik Dirt';font-size:2.2rem;color:var(--red);letter-spacing:.22em;line-height:1;position:relative}
.mystery__hint{font-weight:800;letter-spacing:.26em;text-transform:uppercase;font-size:.7rem;color:var(--brown);margin-top:.55rem;position:relative}
.mystery__band{
  position:absolute;left:-12%;right:-12%;top:60%;
  background:var(--red);color:var(--paper);
  font-weight:800;letter-spacing:.28em;text-transform:uppercase;text-align:center;
  font-size:.82rem;padding:.45rem 0;transform:rotate(-7deg);box-shadow:0 4px 12px rgba(0,0,0,.4);
}

.signup{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;max-width:560px;margin:0 auto;text-align:left}
.signup__field{flex:1 1 180px;display:flex;flex-direction:column;gap:.3rem}
.signup__field label{font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--kraft-light)}
.signup__input{
  width:100%;min-height:50px;
  background:var(--paper);color:var(--ink);
  border:2px solid var(--ink);
  padding:.8rem 1rem;font-family:'Archivo';font-weight:600;font-size:1rem;
}
.signup__input::placeholder{color:rgba(43,38,32,.55)}
.signup__input:focus{outline:3px solid var(--red-light);outline-offset:2px}
.signup__input[aria-invalid="true"]{border-color:var(--red-light);box-shadow:0 0 0 3px var(--red-light)}
.signup__err{min-height:1.2em;font-size:.85rem;font-weight:700;color:#f2b3a6}
.signup .btn-order{flex:1 0 100%;min-height:52px;border-color:var(--paper);box-shadow:3px 3px 0 var(--red-deep)}
.signup__consent{margin-top:1rem;font-size:.84rem;opacity:.85}
.signup__consent a{color:var(--paper)}
.signup__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.signup__msg{
  margin-top:1.3rem;min-height:1.4em;
  font-family:'Kalam';font-style:italic;font-weight:700;font-size:1.12rem;
  color:#e6b8af;
}
.signup__msg--ok{color:var(--paper)}
.signup__msg--error{color:#f2b3a6}

.teaser__follow{
  margin-top:1.9rem;display:flex;gap:.85rem;align-items:center;justify-content:center;
  flex-wrap:wrap;font-size:.98rem;opacity:.9;
}

/* social icon buttons (dark backgrounds) */
.social{
  width:46px;height:46px;display:inline-grid;place-items:center;
  border:2px solid currentColor;border-radius:50%;color:var(--kraft-light);
  transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease;
}
.social:hover{background:var(--red);border-color:var(--red);color:var(--paper);transform:translateY(-3px)}
.social svg{width:20px;height:20px}
.socials{display:flex;gap:1rem;justify-content:center;margin:.4rem 0 1.4rem}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{background:var(--kraft-deep)}
.contact .eyebrow{color:var(--ink)}
.contact .section-title{transform:rotate(-1deg)}
.contact__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,6vw,4rem);align-items:center;margin-top:2.4rem}
.contact__grid .photo{max-width:360px;justify-self:center;width:100%}
.contact__cards{display:grid;gap:1.2rem}
.contact-card{
  background:var(--paper);
  padding:1.3rem 1.4rem;
  display:grid;grid-template-columns:42px 1fr;column-gap:1rem;align-items:center;
  box-shadow:0 12px 28px -12px var(--paper-shadow);
  border-left:6px solid var(--red);
  transform:rotate(-.6deg);
  transition:transform .3s ease,
             opacity .7s cubic-bezier(.2,.75,.25,1),
             translate .7s cubic-bezier(.2,.75,.25,1),
             scale .7s cubic-bezier(.2,.75,.25,1),
             rotate .7s cubic-bezier(.2,.75,.25,1);
}
.contact-card:nth-child(2){transform:rotate(.5deg);border-left-color:var(--ink);transition-delay:0s,.12s,.12s,.12s,.12s}
.contact-card:nth-child(3){transform:rotate(-.3deg);border-left-color:var(--brown);transition-delay:0s,.24s,.24s,.24s,.24s}
.contact-card:hover{transform:rotate(0) translateY(-4px)}
.contact-card svg{width:38px;height:38px;grid-row:span 2;stroke:var(--ink)}
.contact-card h3{font-family:'Rubik Dirt';font-weight:400;font-size:1.25rem}
.contact-card p{font-size:.95rem;color:var(--ink-soft)}
.contact-card a{font-weight:700;text-decoration:none;border-bottom:2px solid var(--red);display:inline-block;padding:.35rem 0 .1rem}
.contact-card a:hover{color:var(--red-deep)}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  background:var(--ink);color:var(--kraft-light);
  text-align:center;padding:3rem 1.5rem 2.4rem;position:relative;z-index:2;
}
.f-home{display:inline-block;text-decoration:none}
footer .f-cow{width:60px;margin:0 auto 1rem;opacity:.92}
footer .f-name{font-family:'Rubik Dirt';font-size:1.4rem;letter-spacing:.04em}
footer .f-name span{color:var(--red-light)}
footer .f-tag{margin:.4rem 0 1.2rem;opacity:.9}
.f-links{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.2rem 1.4rem;margin:0 auto 1.2rem;max-width:640px}
.f-links a{display:inline-block;padding:.55rem .2rem;font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-bottom:2px solid transparent}
.f-links a:hover{border-bottom-color:var(--red-light)}
.f-contact{display:flex;flex-wrap:wrap;justify-content:center;gap:.2rem 1.4rem;margin-bottom:1.2rem;font-size:.95rem}
.f-contact a{display:inline-block;padding:.4rem 0;color:var(--paper)}
footer .f-ship{font-size:.86rem;opacity:.85;max-width:60ch;margin:0 auto 1.3rem;line-height:1.6}
footer .f-ship b{color:var(--paper)}
footer small{display:block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;opacity:.75;line-height:1.9}

/* ============================================================
   SIMPLE PAGES  (thanks, privacy, terms, 404)
   ============================================================ */
.page-head{text-align:center;padding:clamp(2.5rem,6vw,4rem) clamp(1.25rem,5vw,3rem) 0}
.page-head .eyebrow{justify-content:center}
.page-head .section-title{margin-bottom:0}
.lost__lead{margin:0 auto}

.thanks{background:var(--kraft);text-align:center;min-height:62vh;display:flex;align-items:center}
.thanks .wrap{width:100%}
.thanks .eyebrow{justify-content:center}
.thanks__title{font-size:clamp(2.6rem,8vw,5rem);transform:rotate(-1.2deg);margin-bottom:.6rem}
.thanks__tag{font-size:clamp(1.15rem,3.2vw,1.6rem);color:var(--red-deep);margin-bottom:2rem}
.thanks__cow{width:clamp(110px,18vw,150px);margin:0 auto 1rem}
.thanks .card{max-width:560px;margin:0 auto;text-align:left;transform:rotate(-.6deg)}
.thanks .card:hover{transform:rotate(-.6deg) translateY(-4px)}
.thanks .card__name{margin-bottom:.9rem}
.thanks .notes{margin:0}
.btn-row{margin-top:2.2rem;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

.legal{background:var(--kraft);padding-top:clamp(1.8rem,4vw,2.6rem)}
.legal .wrap{max-width:780px}
.legal__doc{
  background:var(--paper);padding:clamp(1.4rem,5vw,3rem);
  box-shadow:0 18px 40px -14px var(--paper-shadow);
}
.legal__doc h2{font-family:'Rubik Dirt';font-weight:400;font-size:clamp(1.35rem,3.6vw,1.75rem);margin:2.2rem 0 .7rem}
.legal__updated + h2{margin-top:0}
.legal__doc p,.legal__doc li{color:var(--ink-soft);font-size:1rem}
.legal__doc p + p{margin-top:.8rem}
.legal__doc ul{margin:.6rem 0 .6rem 1.2rem;display:grid;gap:.4rem}
.legal__doc a{color:var(--red-deep);font-weight:700}
.legal__updated{font-family:'Space Mono';font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--brown);margin-bottom:1.6rem}

.lost{min-height:70vh;display:flex;align-items:center;text-align:center}
.lost .wrap{width:100%}
.lost .cow{width:clamp(110px,18vw,150px);margin:0 auto 1.2rem;transform:rotate(-12deg)}
.lost__code{font-family:'Space Mono';font-weight:700;letter-spacing:.4em;color:var(--red-deep);margin-bottom:.6rem}

/* ============================================================
   SEO UPGRADE (18 Oct 2026): hero deal line, "more" links, FAQ,
   Who's Krama, breadcrumbs and the flavour / subscription / gifts / about pages
   ============================================================ */
.hero__deal{font-weight:700;font-size:1.02rem;margin:-.6rem 0 1.5rem;color:var(--ink)}
.hero__deal b{font-family:'Space Mono',monospace;color:var(--red-deep)}

.more-link{
  display:inline-block;margin-top:.4rem;padding:.35rem 0 .15rem;
  font-weight:800;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;border-bottom:2px solid var(--red);color:var(--ink);
}
.more-link:hover{color:var(--red-deep)}
.more-link::after{content:" \2192";color:var(--red)}

.crumbs{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1.4rem;color:var(--ink-soft)}
.crumbs a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--red)}
.crumbs span[aria-current]{color:var(--red-deep)}
.page-head .crumbs{display:flex;justify-content:center;gap:.6rem}

/* FAQ */
.faq{background:var(--kraft)}
.faq .wrap{max-width:860px}
.faq__list{display:grid;gap:.9rem;margin-top:2rem}
.faq__item{background:var(--paper);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.faq__item > summary{
  list-style:none;cursor:pointer;padding:1rem 3rem 1rem 1.2rem;position:relative;
  font-weight:800;font-size:1.02rem;
}
.faq__item > summary::-webkit-details-marker{display:none}
.faq__item > summary::after{
  content:"+";position:absolute;right:1.1rem;top:50%;translate:0 -50%;
  font-family:'Space Mono',monospace;font-weight:700;font-size:1.4rem;color:var(--red);
}
.faq__item[open] > summary::after{content:"\2212"}
.faq__item > summary h3{font:inherit;display:inline}
.faq__a{padding:0 1.2rem 1.15rem;color:var(--ink-soft);max-width:68ch}
.faq__a p + p{margin-top:.7rem}
.faq__a a{color:var(--ink);font-weight:700}

/* product / info pages */
.page-body{background:var(--kraft);padding-top:clamp(2rem,5vw,3rem)}
.page-body + .page-body{padding-top:0}
.page-intro{max-width:62ch;margin:1rem auto 0;text-align:center;color:var(--ink-soft);font-size:clamp(1.05rem,2.4vw,1.18rem)}
.prose{max-width:66ch}
.prose h2{font-family:'Rubik Dirt';font-weight:400;font-size:clamp(1.6rem,4.4vw,2.3rem);margin:2.4rem 0 .8rem}
.prose h2:first-child{margin-top:0}
.prose p{margin-bottom:1.05rem;color:var(--ink-soft)}
.prose p b{color:var(--ink)}
.prose ul{margin:0 0 1.2rem 1.2rem;color:var(--ink-soft)}
.prose li{margin-bottom:.45rem}
.buy{background:var(--kraft-light)}
.buy .eyebrow{justify-content:center}
.buy .section-title{text-align:center}
.buy .lead{margin:0 auto 2.2rem;text-align:center}
.buy .shop__grid{margin-top:0}
.cross{text-align:center}
.cross .btn-row{margin-top:1.4rem}
.cross .lead[data-gap]{margin:1.6rem auto 0}
[data-center]{text-align:center}
.perks[data-tight]{margin-top:0}
.sub__cards{margin-top:3rem}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .nav__toggle{display:inline-flex}
  .nav__links{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;gap:0;
    background:var(--kraft);border-bottom:2px solid rgba(43,38,32,.25);
    box-shadow:0 18px 30px -18px rgba(43,38,32,.55);
    padding:.4rem clamp(1rem,4vw,2.5rem) 1rem;
    display:none;
  }
  .nav__links.is-open{display:flex}
  .nav__links li{border-bottom:1px dashed rgba(43,38,32,.3)}
  .nav__links li:last-child{border-bottom:0}
  .nav__links a{display:block;padding:1rem .2rem;font-size:.95rem}
  .nav__links a::after{display:none}
}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;min-height:0;gap:2.6rem;padding-top:2.4rem}
  .hero__brand{max-width:320px;margin:0 auto;width:100%}
  .hero__cow{width:96px;margin-bottom:0}

  .flavour__row,.flavour__row--flip{grid-template-columns:1fr;gap:2.4rem}
  .flavour__row--flip .photo,.flavour__row--flip .flavour__copy{grid-column:1;grid-row:auto}
  .flavour__row .photo{max-width:380px;width:100%;margin:0 auto}
  .info__panels{grid-template-columns:1fr;gap:2.4rem}

  .steps{grid-template-columns:1fr}

  .split-head,.split-head--flip{grid-template-columns:1fr;gap:2rem;margin-bottom:2.6rem}
  .split-head--flip .photo,.split-head--flip .split-head__text{grid-column:1;grid-row:auto}
  .split-head .photo{max-width:420px}
  .split-head .photo img{aspect-ratio:4/3}

  .contact__grid{grid-template-columns:1fr}
  .contact__grid .photo img{aspect-ratio:4/3}
}

@media (max-width:720px){
  .shop__grid,.sub__grid{grid-template-columns:1fr;max-width:440px}
  .card .btn-order{min-height:54px;font-size:.88rem}
  .ship-line{font-size:.7rem;padding:.6rem .9rem}
}

@media (max-width:420px){
  .nav__brand b{font-size:1rem}
  .nav .btn-order{padding:.6rem .9rem;letter-spacing:.12em}
  .hero__cta .btn-order{flex:1 1 100%}
  .eyebrow{letter-spacing:.24em;font-size:.74rem}
  .eyebrow::before{width:28px;flex-basis:28px}
  .chip{font-size:.74rem;padding:.5rem .75rem}
  .info > summary{font-size:.74rem;letter-spacing:.1em}
  .photo::before,.photo::after{width:80px;height:26px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;translate:none;scale:none;rotate:none}
}

/* phones: keep the headline and the Order button on the first screen (18 Oct 2026) */
@media (max-width:600px){
  .hero{gap:1.4rem;padding-top:1.4rem}
  .hero__brand{max-width:210px}
  .hero__cow{width:70px;margin-top:.7rem}
  .hero__copy .eyebrow{margin-bottom:.8rem}
  .hero__title{margin-bottom:.9rem}
  .hero__lede{margin-bottom:1.2rem}
  .hero__deal{font-size:.95rem;margin:-.4rem 0 1.1rem}
}

/* ============================================================
   MERCH, MADE TO ORDER (merch.html) — reworked 22 Oct 2026
   ============================================================ */
.merch-how{background:var(--kraft-light);padding-top:clamp(2rem,5vw,3rem);padding-bottom:clamp(2rem,5vw,3rem)}
.merch-steps{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.2rem;max-width:1000px;margin:0 auto;counter-reset:step}
.merch-steps li{background:var(--paper);padding:1.1rem 1.2rem 1.2rem;box-shadow:3px 3px 0 var(--ink);counter-increment:step;font-size:.95rem;color:var(--ink-soft)}
.merch-steps li::before{content:counter(step);display:inline-grid;place-items:center;width:1.9rem;height:1.9rem;margin-bottom:.5rem;
  background:var(--red);color:var(--paper);font-family:'Space Mono',monospace;font-weight:700}
.merch-steps b{display:block;color:var(--ink);font-size:1rem;margin-bottom:.2rem}
.merch-close{text-align:center;margin-top:1.4rem;font-family:'Kalam';font-weight:700;font-style:italic;color:var(--red-deep);font-size:1.1rem}

.merch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:clamp(1.6rem,4vw,2.6rem);max-width:1120px;margin:0 auto}
.merch-card{background:var(--paper);box-shadow:0 18px 40px -14px var(--paper-shadow),0 4px 0 rgba(43,38,32,.15);display:flex;flex-direction:column;position:relative}
.merch-card__img{display:block;background:#ebe5db;border-bottom:2px solid var(--ink)}
.merch-card__img img{display:block;width:100%;height:auto;aspect-ratio:1200/679}
.merch-card__body{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.9rem;flex:1}
.merch-card__top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.merch-card__name{font-family:'Rubik Dirt';font-weight:400;font-size:1.55rem;line-height:1.1}
.merch-card__price{font-family:'Space Mono',monospace;font-weight:700;font-size:1.5rem}
.merch-card__blank{font-weight:800;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brown)}
.merch-card__blurb{font-size:.95rem;color:var(--ink-soft)}
.merch-card__meta{font-size:.88rem;color:var(--ink-soft);margin-top:auto}
.merch-card__meta a{color:var(--red-deep);font-weight:700}

.merch-colours{border:0;display:grid;gap:.45rem}
.merch-colours legend{font-weight:800;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);margin-bottom:.35rem}
.merch-colours legend span{font-weight:700;letter-spacing:.05em;text-transform:none;color:var(--red-deep);font-family:'Kalam';font-style:italic;font-size:1rem;margin-left:.3rem}
.swatches{display:flex;flex-wrap:wrap;gap:.55rem}
.swatch{position:relative}
.swatch input{position:absolute;opacity:0;inset:0;cursor:pointer}
.swatch span{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .7rem .4rem .45rem;border:2px solid var(--ink);background:var(--paper);font-size:.82rem;font-weight:700;cursor:pointer}
.swatch i{width:1.15rem;height:1.15rem;border:1.5px solid var(--ink);border-radius:50%;display:block}
.swatch input:checked + span{background:var(--ink);color:var(--paper);box-shadow:3px 3px 0 var(--red)}
.swatch input:focus-visible + span{outline:3px solid var(--red);outline-offset:2px}
.merch-card .btn-order{width:100%;min-height:52px;justify-content:center;text-align:center}
.btn-order--off{opacity:.55;cursor:not-allowed;pointer-events:none}
.mf-fine{font-size:.8rem;color:var(--ink-soft);text-align:center;margin-top:-.4rem}

/* Homepage merch section (index.html, built from merch.json) — added 23 Oct 2026 */
.merch-promo{background:var(--kraft-light)}
.merch-promo__inner{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(1.6rem,4vw,3rem);align-items:center;max-width:1120px;margin:0 auto}
.merch-promo__img{display:block;background:#ebe5db;border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.merch-promo__img img{display:block;width:100%;height:auto;aspect-ratio:1200/679}
.merch-promo__copy{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.merch-promo__copy p:not(.eyebrow){color:var(--ink-soft);font-size:1.05rem;max-width:34rem}
@media (max-width:860px){.merch-promo__inner{grid-template-columns:1fr}}