/* ============================================================
   Mini Misfits Cafe — TheWayUp build  ·  v2 "MISFIT" reskin
   Black-forward, sticker/streetwear, cheeky-cat energy.
   Fonts: Anton (display) + Nunito (body)
   ============================================================ */

:root{
  --bg:#FFFFFF;          /* clean white — max contrast/legibility */
  --paper:#FFFFFF;       /* cards */
  --cream2:#F7F2E8;      /* warm alt section */
  --ink:#141210;         /* near-black — text & outlines */
  --black:#0D0B0A;       /* deepest panels */
  --ink-soft:#463F39;    /* secondary text (passes AA on white) */
  --yellow:#F5B301;      /* THE accent — their brand yellow */
  --yellow-deep:#D89C00; /* hover */
  --gold:#F5B301;        /* alias (sparkles) */
  --gray:#5F5952;        /* muted meta text */
  --line:#141210;
  --line-soft:#E3DCD0;
  --error:#C0233B;
  --success:#2E7D46;
  --hard:4px 4px 0 var(--ink);
  --hard-lg:7px 7px 0 var(--ink);
  --hard-yellow:4px 4px 0 var(--yellow);
  --ease:cubic-bezier(.34,1.3,.5,1);   /* springy */
  --ease-smooth:cubic-bezier(.4,0,.2,1);
  --radius:16px;
  --display:"Anton",Impact,sans-serif;
  --body:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --spark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 6.3 5.7 11.4 12 12-6.3.6-11.4 5.7-12 12-.6-6.3-5.7-11.4-12-12C6.3 11.4 11.4 6.3 12 0z'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--body);color:var(--ink);background:var(--bg);
  line-height:1.65;font-size:18px;font-weight:500;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font-family:inherit;cursor:pointer}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:4px solid var(--ink);outline-offset:3px}

body{opacity:0;transition:opacity .35s var(--ease-smooth)}
body.is-loaded{opacity:1}
@media (prefers-reduced-motion:reduce){body{opacity:1;transition:none}}

.wrap{width:min(1200px,92vw);margin-inline:auto}

/* headings */
h1,h2,h3,.display{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:.94}
/* accent = black text on a yellow highlight (readable; yellow text on white is not).
   inline-block + line-height:1 keeps the yellow box inside its own line so it can't
   clip the line above (an inline background paints the full font ascent and bleeds). */
h1 em,h2 em,h3 em{
  font-style:normal;color:var(--ink);background:var(--yellow);
  display:inline-block;line-height:1;padding:.1em .16em .14em;
  box-shadow:none;
}
.on-dark h1 em,.on-dark h2 em,.on-dark h3 em,.brand-band h1 em,.brand-band h2 em{color:var(--yellow);background:none;box-shadow:none}

/* ------------------------------------------------ header */
.site-header{
  position:sticky;top:0;z-index:50;background:var(--bg);
  border-bottom:3px solid var(--ink);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 0}
.nav-logo{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.nav-logo img{width:50px;height:50px;object-fit:contain;background:var(--black);padding:6px 7px 6px 3px;border-radius:13px;border:2.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.nav-logo span{font-family:var(--display);font-size:1.35rem;text-transform:uppercase;letter-spacing:.02em}
.nav-links{display:flex;align-items:center;gap:1.5rem;list-style:none}
.nav-links a{
  text-decoration:none;font-weight:800;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink);position:relative;padding:.3rem 0;
}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;height:4px;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-links a.nav-cta{
  background:var(--yellow);color:var(--ink)!important;padding:.95rem 2.4rem;border:3px solid var(--ink);border-radius:999px;
  box-shadow:3px 3px 0 var(--ink);transition:transform .2s var(--ease),box-shadow .2s var(--ease);
  line-height:1;white-space:nowrap;margin-left:.9rem;display:inline-flex;align-items:center;justify-content:center;
  font-size:.9rem;letter-spacing:.04em;
}
.nav-links a.nav-cta::after{display:none}
.nav-links a.nav-cta:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.cart-btn{
  background:var(--paper);border:2.5px solid var(--ink);border-radius:999px;padding:.5rem .9rem;
  display:flex;align-items:center;gap:.45rem;font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;
  box-shadow:2.5px 2.5px 0 var(--ink);transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.cart-btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.cart-count{background:var(--ink);color:#fff;font-size:.72rem;min-width:1.3rem;height:1.3rem;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--ink)}
.nav-toggle{display:none;background:none;border:none;width:44px;height:44px;position:relative}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:"";display:block;width:24px;height:3px;background:var(--ink);border-radius:2px;position:absolute;left:10px;transition:all .3s var(--ease-smooth)}
.nav-toggle span{top:21px}
.nav-toggle span::before{top:-8px;left:0}
.nav-toggle span::after{top:8px;left:0}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:rotate(45deg);top:0}
.nav-toggle[aria-expanded="true"] span::after{transform:rotate(-45deg);top:0}

/* ------------------------------------------------ sticker bits */
.spark{display:inline-block;width:1em;height:1em;flex-shrink:0;background:var(--gold);
  -webkit-mask:var(--spark) center/contain no-repeat;mask:var(--spark) center/contain no-repeat}
/* ============================================================
   CLICKABLE vs NOT — the rule for this site:
   • Clickable  = solid fill + black border + hard shadow + arrow + pointer
   • Not clickable = FLAT. no border, no shadow, no pill. never looks pressable.
   ============================================================ */

/* ---- LABELS (never clickable) — deliberately flat ---- */
.sticker,.label-flat{
  display:inline-flex;align-items:center;gap:.45rem;font-family:var(--display);text-transform:uppercase;
  font-size:.95rem;letter-spacing:.06em;color:var(--ink);
  background:none;border:0;border-radius:0;padding:0;box-shadow:none;transform:none;
  cursor:default;user-select:none;
}
.sticker .spark{background:var(--yellow)}

/* ------------------------------------------------ buttons (CLICKABLE) */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;font-family:var(--display);
  text-transform:uppercase;letter-spacing:.03em;font-size:1.25rem;padding:.95rem 2.1rem;border-radius:999px;
  border:3px solid var(--ink);box-shadow:var(--hard);cursor:pointer;min-height:56px;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .2s var(--ease-smooth);
}
.btn::after{content:"→";font-size:1.05em;line-height:1;transition:transform .18s var(--ease)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:var(--hard-lg)}
.btn:hover::after{transform:translateX(3px)}
.btn:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink)}
.btn-primary{background:var(--yellow);color:var(--ink)}
.btn-primary:hover{background:var(--yellow-deep)}
.btn-terra{background:var(--ink);color:#fff}
.btn-terra:hover{background:#000}
.btn-outline{background:#fff;color:var(--ink)}
.btn-outline:hover{background:var(--cream2)}
.btn.no-arrow::after{content:none}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none!important;box-shadow:var(--hard)!important}

/* ------------------------------------------------ hero */
.hero{padding:clamp(2.5rem,6vw,5rem) 0 clamp(2rem,5vw,3.5rem);position:relative}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
/* eyebrow LABEL — flat, with a yellow bar. cannot be mistaken for a button. */
.hero-kicker{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1.1rem;
  font-family:var(--display);text-transform:uppercase;font-size:1rem;letter-spacing:.08em;color:var(--ink-soft);
  background:none;border:0;border-left:6px solid var(--yellow);border-radius:0;padding:.1rem 0 .1rem .7rem;
  box-shadow:none;transform:none;cursor:default;user-select:none}
.hero-kicker .spark{background:var(--yellow)}
.hero h1{font-size:clamp(3rem,8.5vw,6.4rem);letter-spacing:-.005em}
.hero-sub{margin:1.4rem 0 2rem;font-size:clamp(1.15rem,1.5vw,1.35rem);color:var(--ink-soft);max-width:34em;font-weight:600}
.hero-actions{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center}
/* trust items = plain ticked facts. no chip, no shadow, no border. */
.trust-row{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin:1.8rem 0 0;padding:0}
.trust-chip{display:inline-flex;align-items:center;gap:.5rem;font-weight:800;font-size:1rem;letter-spacing:.01em;
  color:var(--ink);background:none;border:0;border-radius:0;padding:0;box-shadow:none;cursor:default;user-select:none}
.trust-chip::before{content:"✓";display:inline-flex;align-items:center;justify-content:center;
  width:1.5em;height:1.5em;border-radius:50%;background:var(--yellow);color:var(--ink);font-size:.8em;font-weight:900;flex-shrink:0}
.trust-chip .spark{display:none}
/* ---- how catering works: steps ---- */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;padding:0;margin:2.4rem 0 0}
.step{position:relative;background:var(--paper);border:2.5px solid var(--ink);border-radius:var(--radius);box-shadow:var(--hard);padding:2.6rem 1.5rem 1.6rem;margin-top:1.1rem;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.step:hover{transform:translate(-2px,-2px);box-shadow:var(--hard-lg)}
.step-num{position:absolute;top:-1.1rem;left:1.4rem;width:2.7rem;height:2.7rem;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:1.5rem;color:#fff;background:var(--ink);border:3px solid var(--ink);border-radius:999px;box-shadow:none;transform:none}
.step:nth-child(2) .step-num{background:var(--gold);color:var(--ink);transform:rotate(4deg)}
.step:nth-child(3) .step-num{transform:rotate(-3deg)}
.step h3{font-family:var(--display);text-transform:uppercase;font-size:1.18rem;letter-spacing:.01em;margin:.2rem 0 .5rem}
.step p{color:var(--ink-soft);font-weight:600;font-size:.98rem;margin:0}
.hero-img{position:relative}
.hero-img picture img{border-radius:var(--radius);border:3px solid var(--ink);box-shadow:var(--hard-lg);aspect-ratio:3/4;object-fit:cover}
.hero-stack{position:relative;aspect-ratio:3/4;border-radius:var(--radius);border:3px solid var(--ink);box-shadow:var(--hard-lg);overflow:hidden;background:var(--paper)}
.hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:heroCf 18s linear infinite;will-change:opacity}
.hero-slide:nth-child(1){animation-delay:-3.6s}
.hero-slide:nth-child(2){animation-delay:2.4s}
.hero-slide:nth-child(3){animation-delay:8.4s}
@keyframes heroCf{0%{opacity:0}5%{opacity:1}36%{opacity:1}42%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.hero-slide{animation:none}.hero-slide:nth-child(1){opacity:1}}
.hero-badge{
  position:absolute;bottom:-1.3rem;left:-1.2rem;background:var(--paper);border:2.5px solid var(--ink);border-radius:14px;
  padding:.85rem 1.1rem;box-shadow:var(--hard);font-size:.82rem;font-weight:600;line-height:1.35;max-width:230px;transform:rotate(-2deg)}
.hero-badge strong{font-family:var(--display);font-size:1.05rem;text-transform:uppercase;display:block;color:var(--ink)}
/* cat mascot — transparent cutout on a CSS-drawn sticker (no image seam) */
.hero-cat{position:absolute;width:clamp(112px,12vw,140px);height:auto;top:-34px;right:-14px;transform:rotate(7deg);z-index:4;pointer-events:none;
  object-fit:contain;background:var(--black);border:3px solid var(--ink);border-radius:18px;padding:16px 23px 16px 13px;box-shadow:var(--hard)}

/* ------------------------------------------------ marquee */
.marquee{border-block:3px solid var(--ink);padding:.7rem 0;overflow:hidden;background:var(--ink);white-space:nowrap}
.marquee-track{display:inline-block;animation:marquee 26s linear infinite}
.marquee span{font-family:var(--display);text-transform:uppercase;font-size:1.3rem;color:var(--bg);margin-right:1.4rem;letter-spacing:.02em}
.marquee span:nth-child(even){color:var(--gold)}
.marquee span::after{content:"✦";color:var(--yellow);margin-left:1.4rem}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ------------------------------------------------ chapters / editorial */
.chapter{padding:clamp(3rem,7vw,6rem) 0;position:relative}
.chapter-alt{background:var(--cream2);border-block:3px solid var(--ink)}
.chapter-head{max-width:660px;margin-bottom:clamp(2rem,4vw,3.5rem)}
/* section eyebrow LABEL — flat, yellow bar. not a button. */
.kicker{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1rem;font-family:var(--display);text-transform:uppercase;
  font-size:1rem;letter-spacing:.08em;color:var(--ink-soft);background:none;border:0;border-left:6px solid var(--yellow);
  border-radius:0;padding:.1rem 0 .1rem .7rem;box-shadow:none;transform:none;cursor:default;user-select:none}
.kicker .spark{background:var(--yellow)}
.chapter h2{font-size:clamp(2.2rem,5vw,3.6rem)}
.chapter-head p{margin-top:1rem;color:var(--ink-soft);font-weight:600;font-size:1.05rem}

.editorial{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2.5vw,2.4rem);align-items:center}
.editorial + .editorial{margin-top:clamp(3rem,6vw,5rem)}
.editorial-img-main{grid-column:1/8;position:relative}
.editorial-img-main img{border-radius:var(--radius);border:3px solid var(--ink);box-shadow:var(--hard-lg);width:100%;object-fit:cover;aspect-ratio:4/3}
.editorial-copy{grid-column:8/13}
.editorial.flip .editorial-img-main{grid-column:6/13;order:2}
.editorial.flip .editorial-copy{grid-column:1/6;order:1}
.editorial h3{font-size:clamp(1.7rem,3vw,2.5rem);margin-bottom:.8rem}
.editorial p{color:var(--ink-soft);margin-bottom:1rem;font-weight:600}
/* image caption LABEL — flat square tag, no shadow/pill. not a button. */
.editorial-tag{position:absolute;top:0;left:0;font-family:var(--display);text-transform:uppercase;font-size:.95rem;letter-spacing:.05em;
  background:var(--yellow);color:var(--ink);border:0;border-radius:0 0 10px 0;padding:.5rem 1rem;box-shadow:none;transform:none;
  cursor:default;user-select:none;z-index:2}

.pull-quote{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.7rem,4vw,3rem);line-height:1.05;text-align:center;
  max-width:900px;margin:clamp(3rem,7vw,5.5rem) auto;padding:0 1rem;color:var(--ink)}
.pull-quote em{color:var(--ink);font-style:normal;background:var(--yellow);box-shadow:.12em 0 0 var(--yellow),-.12em 0 0 var(--yellow)}
.pull-quote cite{display:block;font-family:var(--body);text-transform:none;font-style:normal;font-size:.9rem;font-weight:700;color:var(--gray);margin-top:1.1rem}

/* ------------------------------------------------ brand band */
.brand-band{position:relative;overflow:hidden;background:var(--black);color:var(--bg);text-align:center;
  padding:clamp(3.5rem,8vw,6rem) 1rem;border-block:3px solid var(--ink)}
.brand-band-inner{position:relative;z-index:2;max-width:760px;margin-inline:auto}
.brand-band img{width:clamp(210px,34vw,330px);margin:0 auto 1.4rem;display:block}
.brand-band p{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.6rem,4vw,2.6rem);line-height:1;color:var(--gold)}
.brand-band .band-sub{font-family:var(--body);text-transform:none;font-size:1rem;font-weight:600;color:#D8CFC5;margin-top:1.1rem;max-width:46ch;margin-inline:auto}
.brand-band .hero-actions{justify-content:center;margin-top:1.8rem}
.brand-band .btn-outline{background:transparent;color:#fff;border-color:#fff;box-shadow:4px 4px 0 var(--yellow)}
.brand-band .btn-outline:hover{background:var(--bg);color:var(--ink)}
.band-sparkles{position:absolute;inset:0;z-index:1;pointer-events:none}
.band-sparkles .spark{position:absolute;background:var(--gold);opacity:.6}
.band-sparkles .s1{top:14%;left:10%;width:26px;height:26px}
.band-sparkles .s2{top:20%;right:12%;width:34px;height:34px;opacity:.45}
.band-sparkles .s3{bottom:18%;left:15%;width:20px;height:20px;opacity:.5}
.band-sparkles .s4{bottom:22%;right:13%;width:28px;height:28px;opacity:.55}
.band-sparkles .s5{top:46%;left:6%;width:16px;height:16px;opacity:.4}
.band-sparkles .s6{top:52%;right:7%;width:18px;height:18px;opacity:.45}
@media (prefers-reduced-motion:no-preference){
  .band-sparkles .spark{animation:twinkle 4s ease-in-out infinite}
  .band-sparkles .s2{animation-delay:.8s}.band-sparkles .s3{animation-delay:1.5s}
  .band-sparkles .s4{animation-delay:.4s}.band-sparkles .s5{animation-delay:2s}.band-sparkles .s6{animation-delay:1.1s}
}
/* ---- micro-interactions ---- */
@keyframes wiggle{0%,100%{transform:rotate(0)}22%{transform:rotate(-9deg)}45%{transform:rotate(7deg)}68%{transform:rotate(-4deg)}85%{transform:rotate(2deg)}}
@keyframes catFloat{0%,100%{transform:rotate(7deg) translateY(0)}50%{transform:rotate(4.5deg) translateY(-7px)}}
@keyframes catFloat404{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(-1.5deg) translateY(-6px)}}
@media (prefers-reduced-motion:no-preference){
  .hero-cat{animation:catFloat 6s ease-in-out infinite}
  .nav-logo:hover img{animation:wiggle .55s ease}
  .notfound-cat{animation:catFloat404 5s ease-in-out infinite}
  .hero-kicker .spark{animation:twinkle 3.5s ease-in-out infinite}
  .step:hover .step-num{animation:wiggle .55s ease}
}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.8) rotate(0deg)}50%{opacity:.7;transform:scale(1.12) rotate(20deg)}}

/* ------------------------------------------------ masonry gallery */
.masonry{columns:3;column-gap:1.1rem}
.masonry a{display:block;margin-bottom:1.1rem;border-radius:14px;overflow:hidden;position:relative;border:3px solid var(--ink);box-shadow:var(--hard)}
.masonry img{width:100%;transition:transform .45s var(--ease-smooth)}
.masonry a:hover img{transform:scale(1.05)}
.masonry a::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(27,21,18,.3),transparent 45%);opacity:0;transition:opacity .3s}
.masonry a:hover::after{opacity:1}
.ig-cta{display:flex;justify-content:center;margin-top:2.2rem}

/* ------------------------------------------------ products / shop */
.demo-banner{background:var(--ink);color:var(--bg);text-align:center;font-size:.85rem;font-weight:700;padding:.6rem 1rem}
.demo-banner strong{color:var(--gold)}
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.3rem,2.5vw,2rem)}
.product{background:var(--paper);border:3px solid var(--ink);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--hard);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.product:hover{transform:translate(-3px,-3px);box-shadow:var(--hard-lg)}
.product-img{overflow:hidden;aspect-ratio:1;position:relative;border-bottom:3px solid var(--ink)}
.product-img img{width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease-smooth)}
.product:hover .product-img img{transform:scale(1.06)}
/* product LABEL — flat square tag. not a button. */
.product-flag{position:absolute;top:0;left:0;font-family:var(--display);text-transform:uppercase;font-size:.85rem;letter-spacing:.05em;
  background:var(--yellow);color:var(--ink);border:0;padding:.4rem .8rem;border-radius:0 0 10px 0;box-shadow:none;transform:none;
  cursor:default;user-select:none;z-index:2}
.product-body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.product h3{font-size:1.35rem}
.product p{font-size:.92rem;color:var(--ink-soft);flex:1;font-weight:600}
.product-row{display:flex;align-items:center;justify-content:space-between;margin-top:.4rem;gap:.6rem}
.price{font-family:var(--display);font-size:1.7rem;color:var(--ink)}
.price small{font-size:.68rem;color:var(--gray);font-family:var(--body);font-weight:700;text-transform:uppercase;display:block;letter-spacing:.03em}
.add-btn{background:var(--yellow);color:var(--ink);border:3px solid var(--ink);border-radius:999px;padding:.7rem 1.2rem;font-family:var(--display);
  text-transform:uppercase;font-size:1rem;letter-spacing:.03em;min-height:48px;cursor:pointer;
  box-shadow:3px 3px 0 var(--ink);transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.add-btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);background:var(--yellow-deep)}
.add-btn.added{background:var(--success);color:#fff;box-shadow:3px 3px 0 var(--ink)}
.merch-note{font-family:var(--display);text-transform:uppercase;font-size:.9rem;letter-spacing:.04em;color:var(--gray)}
.faq-list{max-width:780px;margin-inline:auto;display:flex;flex-direction:column;gap:.85rem}
.faq-item{border:3px solid var(--ink);border-radius:16px;background:var(--paper);box-shadow:var(--hard);overflow:hidden}
.faq-item summary{cursor:pointer;list-style:none;padding:1rem 1.2rem;font-family:var(--display);font-size:1.12rem;line-height:1.2;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:var(--display);font-size:1.5rem;line-height:1;color:var(--yellow-deep)}
.faq-item[open] summary::after{content:"–"}
.faq-item .faq-a{padding:0 1.2rem 1.1rem;color:var(--ink-soft);font-weight:600}
.faq-item .faq-a a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--yellow);text-underline-offset:2px}
.checkout-modal .modal{max-width:540px;width:100%;max-height:92vh;overflow-y:auto;text-align:left;padding:1.4rem 1.2rem}
#checkout{min-height:320px}
.product-flag.flag-soon{background:var(--ink);color:#fff}
.product-soon .product-img img{filter:grayscale(.2) contrast(.96)}

/* ------------------------------------------------ cart drawer */
.cart-overlay{position:fixed;inset:0;background:rgba(16,12,10,.5);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s;z-index:90}
.cart-overlay.open{opacity:1;pointer-events:auto}
.cart-drawer{position:fixed;top:0;right:0;height:100dvh;width:min(420px,94vw);background:var(--paper);z-index:95;transform:translateX(105%);
  transition:transform .38s var(--ease-smooth);display:flex;flex-direction:column;border-left:3px solid var(--ink)}
.cart-drawer.open{transform:translateX(0)}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.3rem;border-bottom:3px solid var(--ink)}
.cart-head h2{font-size:1.5rem}
.cart-close{background:none;border:none;font-size:1.6rem;line-height:1;color:var(--ink);padding:.3rem}
.cart-items{flex:1;overflow-y:auto;padding:1rem 1.3rem}
.cart-empty{color:var(--gray);text-align:center;margin-top:3rem;font-weight:600}
.cart-item{display:flex;gap:.9rem;padding:.9rem 0;border-bottom:2px solid var(--line-soft)}
.cart-item img{width:64px;height:64px;object-fit:cover;border-radius:10px;border:2px solid var(--ink)}
.cart-item-info{flex:1}
.cart-item-info h4{font-size:1rem;font-weight:800}
.qty{display:inline-flex;align-items:center;gap:.6rem;margin-top:.3rem}
.qty button{width:28px;height:28px;border-radius:8px;border:2px solid var(--ink);background:var(--paper);font-weight:900}
.cart-foot{padding:1.1rem 1.3rem;border-top:3px solid var(--ink)}
.cart-total{display:flex;justify-content:space-between;font-weight:800;margin-bottom:1rem;font-family:var(--display);text-transform:uppercase;font-size:1.2rem}
.cart-foot .btn{width:100%;justify-content:center}
.cart-note{font-size:.76rem;color:var(--gray);text-align:center;margin-top:.7rem;font-weight:600}

/* ------------------------------------------------ forms (Section 7b) */
.form-shell{background:var(--paper);border:3px solid var(--ink);border-radius:20px;padding:clamp(1.5rem,4vw,2.8rem);box-shadow:var(--hard-lg)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem 1.5rem}
.field{display:flex;flex-direction:column;gap:.4rem}
.field-full{grid-column:1/-1}
.field label{font-weight:800;font-size:.88rem}
.field label .req{color:var(--error)}
.field input[type=text],.field input[type=email],.field input[type=tel],.field input[type=date],.field input[type=number],.field textarea{
  font-family:var(--body);font-weight:600;font-size:.95rem;color:var(--ink);background:var(--bg);border:2.5px solid var(--ink);border-radius:12px;
  padding:.75rem 1rem;transition:box-shadow .2s var(--ease),transform .2s var(--ease);width:100%;appearance:none}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;box-shadow:var(--hard-yellow);transform:translate(-2px,-2px)}
.field.has-error input,.field.has-error textarea,.field.has-error .select-btn{border-color:var(--error);background:#FDECEE}
.field-error{display:none;font-size:.8rem;color:var(--error);font-weight:800}
.field.has-error .field-error{display:block;animation:slideDown .25s var(--ease)}
@keyframes slideDown{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

.select{position:relative}
.select-btn{width:100%;text-align:left;background:var(--bg);border:2.5px solid var(--ink);border-radius:12px;padding:.75rem 2.6rem .75rem 1rem;
  font-weight:700;font-size:.95rem;color:var(--ink);position:relative;transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.select-btn.placeholder{color:var(--gray)}
.select-btn::after{content:"";position:absolute;right:1rem;top:50%;width:9px;height:9px;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--ease)}
.select.open .select-btn::after{transform:translateY(-30%) rotate(-135deg)}
.select-btn:focus{outline:none;box-shadow:var(--hard-yellow);transform:translate(-2px,-2px)}
.select-list{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:30;background:var(--paper);border:2.5px solid var(--ink);border-radius:12px;
  box-shadow:var(--hard);max-height:230px;overflow-y:auto;list-style:none;padding:.4rem;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .2s,transform .2s var(--ease)}
.select.open .select-list{opacity:1;transform:none;pointer-events:auto}
.select-list li{padding:.6rem .8rem;border-radius:8px;font-size:.92rem;font-weight:700;cursor:pointer;transition:background .15s}
.select-list li:hover,.select-list li.active{background:var(--cream2)}
.select-list li[aria-selected="true"]{color:var(--ink);font-weight:900}

.check-group{display:flex;flex-wrap:wrap;gap:.6rem}
.check{position:relative}
.check input{position:absolute;opacity:0;inset:0;cursor:pointer}
.check span{display:inline-flex;align-items:center;gap:.5rem;border:2.5px solid var(--ink);border-radius:999px;padding:.5rem 1rem;font-size:.86rem;font-weight:700;background:var(--bg);transition:all .2s var(--ease);cursor:pointer}
.check span::before{content:"";width:16px;height:16px;border-radius:5px;border:2px solid var(--ink);background:var(--paper);transition:all .2s;flex-shrink:0}
.check input:checked + span{background:var(--gold);box-shadow:2px 2px 0 var(--ink)}
.check input:checked + span::before{background:var(--ink);border-color:var(--ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6' stroke='%23fff' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-size:12px;background-position:center;background-repeat:no-repeat}
.check input:focus-visible + span{outline:4px solid var(--ink);outline-offset:2px}

.form-actions{margin-top:1.6rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.submit-btn{position:relative;min-width:210px;justify-content:center}
.submit-btn .spinner{display:none;width:18px;height:18px;border-radius:50%;border:2.6px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite}
.submit-btn.loading .spinner{display:inline-block}
.submit-btn.loading .label{opacity:.7}
@keyframes spin{to{transform:rotate(360deg)}}
.form-privacy{font-size:.78rem;color:var(--gray);font-weight:600}

/* ------------------------------------------------ modal */
.modal-overlay{position:fixed;inset:0;background:rgba(16,12,10,.55);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;pointer-events:none;transition:opacity .3s;z-index:100}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal{background:var(--paper);border:3px solid var(--ink);border-radius:20px;max-width:460px;width:100%;padding:2.2rem;box-shadow:var(--hard-lg);position:relative;text-align:center;transform:translateY(16px) rotate(-1deg);transition:transform .3s var(--ease)}
.modal-overlay.open .modal{transform:none}
.modal-close{position:absolute;top:.8rem;right:.8rem;background:none;border:none;font-size:1.5rem;color:var(--ink);padding:.3rem;line-height:1}
.modal-icon{width:64px;height:64px;border-radius:50%;margin:0 auto 1.1rem;display:flex;align-items:center;justify-content:center;font-size:1.7rem;background:var(--gold);border:2.5px solid var(--ink);box-shadow:2.5px 2.5px 0 var(--ink)}
.modal-icon.info{background:var(--yellow)}
.modal h3{font-size:1.6rem;margin-bottom:.6rem}
.modal p{color:var(--ink-soft);font-size:.95rem;margin-bottom:1.4rem;font-weight:600}

/* ------------------------------------------------ toast */
.toast{position:fixed;bottom:1.4rem;left:50%;transform:translate(-50%,120%);background:var(--ink);color:var(--bg);padding:.85rem 1.5rem;border-radius:999px;
  font-weight:800;font-size:.9rem;border:2.5px solid var(--ink);box-shadow:var(--hard);z-index:110;transition:transform .4s var(--ease);max-width:92vw;text-align:center}
.toast.show{transform:translate(-50%,0)}
.toast.success{background:var(--success);color:#fff}

/* ------------------------------------------------ FAQ */
.faq{max-width:780px;margin-inline:auto}
.faq-item{border:2.5px solid var(--ink);border-radius:14px;background:var(--paper);margin-bottom:.9rem;box-shadow:3px 3px 0 var(--ink);overflow:hidden}
.faq-q{width:100%;background:none;border:none;text-align:left;font-family:var(--display);text-transform:uppercase;font-size:1.05rem;color:var(--ink);padding:1.1rem 2.6rem 1.1rem 1.1rem;position:relative}
.faq-q::after{content:"";position:absolute;right:1.1rem;top:50%;width:10px;height:10px;border-right:4px solid var(--ink);border-bottom:4px solid var(--ink);transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)}
.faq-item.open .faq-q::after{transform:translateY(-30%) rotate(-135deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease-smooth)}
.faq-a p{padding:0 1.1rem 1.2rem;color:var(--ink-soft);font-weight:600;font-size:.95rem}

/* ------------------------------------------------ reviews */
.reviews-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1rem;max-width:none;margin-bottom:clamp(1.8rem,4vw,3rem)}
.reviews-badge{font-family:var(--display);text-transform:uppercase;background:var(--gold);border:2.5px solid var(--ink);border-radius:14px;
  padding:.7rem 1.1rem;box-shadow:var(--hard);transform:rotate(2deg);text-align:center;line-height:1}
.reviews-badge b{display:block;font-size:2.4rem;color:var(--ink)}
.reviews-badge span{font-size:.8rem}
.review-grid{columns:3;column-gap:1.3rem}
.review-card{break-inside:avoid;margin-bottom:1.3rem;background:var(--paper);border:3px solid var(--ink);border-radius:16px;padding:1.3rem 1.4rem;box-shadow:var(--hard)}
.review-card:nth-child(3n+1){transform:rotate(-1deg)}
.review-card:nth-child(3n+2){transform:rotate(.6deg)}
.review-card:nth-child(3n){transform:rotate(1.2deg)}
.review-stars{display:flex;gap:.15rem;margin-bottom:.7rem}
.review-stars .spark{width:16px;height:16px;background:var(--gold)}
.review-card p{font-weight:600;color:var(--ink);font-size:.96rem;line-height:1.5;margin-bottom:.9rem}
.review-author{display:flex;align-items:center;gap:.5rem;font-weight:800;font-size:.9rem}
.review-author::before{content:"";width:26px;height:26px;border-radius:50%;background:var(--yellow);border:2px solid var(--ink);flex-shrink:0}
.review-author small{display:block;font-weight:700;color:var(--gray);font-size:.72rem}

/* ------------------------------------------------ meet the misfits (warm moment) */
.meet{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(1.5rem,4vw,3.4rem);align-items:center;
  background:var(--paper);border:3px solid var(--ink);border-radius:26px;padding:clamp(1.4rem,3.5vw,2.6rem);box-shadow:var(--hard-lg);position:relative}
.meet-photo{position:relative}
.meet-photo img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:18px;border:3px solid var(--ink);box-shadow:0 16px 34px rgba(107,74,47,.22)}
.meet-tag{position:absolute;bottom:0;left:0;background:var(--yellow);color:var(--ink);border:0;border-radius:0 10px 0 0;padding:.5rem 1rem;box-shadow:none;transform:none;cursor:default;user-select:none}
.meet-tag .spark{background:#fff}
.meet-copy h2{font-size:clamp(2rem,4.2vw,3.1rem);margin-bottom:.5rem}
.meet-copy p{color:var(--ink-soft);font-weight:600;margin-bottom:.9rem;line-height:1.6}
.meet-sign{font-family:var(--body);font-style:italic;font-weight:800;color:var(--ink);font-size:1.2rem;margin-top:.3rem}

/* hand-drawn doodle underline — used sparingly, opt-in via .doodle-h */
.doodle-h{position:relative;display:inline-block}
.doodle-h::after{content:"";position:absolute;left:1%;right:6%;bottom:-.34em;height:.26em;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12' preserveAspectRatio='none'%3E%3Cpath d='M4 7c40-5 76 4 118-1s78-5 114 2' fill='none' stroke='%23F5B301' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}

/* ------------------------------------------------ find us */
.findus{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(1.5rem,4vw,3rem);align-items:stretch}
.findus-info{display:flex;flex-direction:column;gap:1.2rem;justify-content:center}
.findus-info dl{display:grid;gap:1rem}
.findus-info dt{font-family:var(--display);text-transform:uppercase;font-size:.85rem;color:var(--ink);letter-spacing:.03em;margin-bottom:.2rem}
.findus-info dd{color:var(--ink-soft);font-weight:600}
.findus-info a{color:var(--ink);font-weight:800}
.map-frame{border-radius:var(--radius);overflow:hidden;border:3px solid var(--ink);box-shadow:var(--hard-lg);min-height:320px}
.map-frame iframe{width:100%;height:100%;min-height:320px;border:0;display:block}

/* ------------------------------------------------ footer */
.site-footer{background:var(--black);color:#D8CFC5;margin-top:0;border-top:3px solid var(--ink)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem;padding:clamp(2.5rem,5vw,4rem) 0 2rem}
.footer-brand img{width:200px;margin-bottom:1.1rem}
.footer-brand p{font-size:.9rem;max-width:26em;font-weight:600}
.footer-tag{font-family:var(--display);text-transform:uppercase;color:var(--gold);margin-top:.8rem;font-size:1.3rem}
.site-footer h4{color:var(--bg);font-family:var(--display);text-transform:uppercase;font-size:1rem;letter-spacing:.03em;margin-bottom:1rem}
.site-footer ul{list-style:none;display:grid;gap:.55rem;font-size:.92rem;font-weight:600}
.site-footer a{color:#D8CFC5;text-decoration:none;transition:color .2s}
.site-footer a:hover{color:var(--gold)}
.footer-bottom{border-top:2px solid rgba(251,243,230,.15);padding:1.2rem 0;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:space-between;font-size:.8rem;color:#9A8F86;font-weight:600}
.footer-bottom a{color:var(--gold)}

/* ------------------------------------------------ 404 */
.notfound{min-height:60vh;display:flex;align-items:center;text-align:center;padding:4rem 0}
.notfound-inner{max-width:620px;margin-inline:auto}
.notfound h1{font-size:clamp(3.2rem,10vw,6rem)}
.notfound h1 em{color:var(--ink)}
.notfound p{margin:1.2rem 0 2rem;color:var(--ink-soft);font-weight:600}
.notfound .hero-actions{justify-content:center}
.notfound-cat{width:190px;height:auto;object-fit:contain;margin:0 auto 1.6rem;background:var(--black);border:3px solid var(--ink);border-radius:22px;padding:18px 28px 18px 16px;box-shadow:var(--hard);transform:rotate(-4deg)}

/* ------------------------------------------------ reveal */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .5s var(--ease-smooth),transform .5s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.08s}.reveal-d2{transition-delay:.16s}.reveal-d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.masonry img,.product-img img,.btn,.product{transition:none}}

/* ------------------------------------------------ responsive */
@media (max-width:1023px){
  .products{grid-template-columns:repeat(2,1fr)}
  .masonry{columns:2}
  .review-grid{columns:2}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  /* right-side drawer — full height, sits under the sticky header so the X stays tappable */
  .nav-links{position:fixed;top:0;right:0;bottom:0;left:auto;height:100dvh;width:min(320px,82vw);
    background:var(--bg);flex-direction:column;justify-content:flex-start;align-items:flex-start;
    padding:6.5rem 1.6rem 2rem;gap:1.4rem;font-size:1.2rem;overflow-y:auto;
    transform:translateX(100%);transition:transform .35s var(--ease-smooth);z-index:45;
    border-left:3px solid var(--ink);box-shadow:-12px 0 34px rgba(0,0,0,.18)}
  .nav-links.open{transform:none}
  .nav-links a{font-size:1.2rem;padding:.2rem 0}
  .nav-links a.nav-cta{margin-left:0;margin-top:.5rem;padding:.9rem 1.8rem}
  /* keep the hamburger/X above the drawer so it stays tappable to close */
  .nav-toggle{z-index:60}
  .nav-logo{margin-right:auto}
  .cart-btn{order:2}
  .nav-toggle{display:block;order:3;margin-left:.55rem}
  .hero-grid{grid-template-columns:1fr}
  .hero-img{order:-1}
  .hero-stack,.hero-img picture img{aspect-ratio:4/3}
  .hero-cat{width:104px;right:4%;top:-30px}
  .hero-badge{left:.6rem;bottom:-1rem}
  .editorial,.editorial.flip{display:flex;flex-direction:column}
  .editorial .editorial-img-main,.editorial.flip .editorial-img-main{order:1;width:100%}
  .editorial .editorial-copy,.editorial.flip .editorial-copy{order:2;width:100%}
  .editorial-tag{top:-.8rem}
  .form-grid{grid-template-columns:1fr}
  .meet{grid-template-columns:1fr}
  .findus{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:1.7rem}
  .footer-grid{grid-template-columns:1fr;gap:1.8rem}
  .sticky-cta{position:fixed;bottom:0;left:0;right:0;z-index:60;display:flex;background:var(--paper);border-top:3px solid var(--ink);padding:.6rem .8rem;gap:.6rem}
  .sticky-cta .btn{flex:1;justify-content:center;padding:.75rem .4rem;font-size:1.05rem;box-shadow:2.5px 2.5px 0 var(--ink)}
  body{padding-bottom:70px}
}
@media (min-width:768px){.sticky-cta{display:none}}
@media (max-width:479px){
  .products{grid-template-columns:1fr}
  .masonry{columns:2;column-gap:.7rem}
  .masonry a{margin-bottom:.7rem}
  .review-grid{columns:1}
  .hero h1{font-size:clamp(2.6rem,13vw,4rem)}
}

/* ============================================================
   v3 — CAFE-FIRST. Location always visible. Cats. Black/white/yellow.
   ============================================================ */

/* ---- top bar: address + hours + phone. visible on every page, no scrolling ---- */
.site-topbar{background:var(--ink);color:#fff;border-bottom:3px solid var(--ink)}
.site-topbar .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem 1.8rem;padding:.7rem 0}
.topbar-item{display:inline-flex;align-items:center;gap:.5rem;font-weight:800;font-size:1rem;letter-spacing:.01em;color:#fff}
.topbar-item svg{width:1.1em;height:1.1em;fill:var(--yellow);flex-shrink:0}
.site-topbar a.topbar-item{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.site-topbar a.topbar-item:hover{color:var(--yellow)}

/* ---- hero: the container cafe, so nobody wonders what we are ---- */
.hero-cafe{position:relative;background:var(--black);color:#fff;overflow:hidden;border-bottom:4px solid var(--ink)}
.hero-cafe-bg{position:absolute;inset:0;z-index:0}
.hero-cafe-bg img{width:100%;height:100%;object-fit:cover;object-position:center 45%;opacity:.5}
.hero-cafe::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(13,11,10,.94) 0%,rgba(13,11,10,.86) 42%,rgba(13,11,10,.55) 100%)}
.hero-cafe-inner{position:relative;z-index:2;padding:clamp(2.4rem,6vw,4.5rem) 0 0}
.hero-cafe .hero-kicker{color:#fff;border-left-color:var(--yellow);margin-bottom:.9rem}
.hero-cafe h1{font-size:clamp(2.8rem,7.5vw,6rem);color:#fff;line-height:.9}
.hero-cafe h1 .yel{color:var(--yellow);background:none;box-shadow:none}
.hero-tagline{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.15rem,2.4vw,1.9rem);
  margin-top:.8rem;color:#fff;letter-spacing:.02em}
.hero-tagline em{font-style:normal;color:var(--yellow)}
.hero-cafe .lead{font-size:clamp(1.1rem,1.5vw,1.3rem);max-width:34em;color:#EFE9E1;margin-top:1.1rem;font-weight:600}

/* location + hours, right in the hero. nobody should scroll to find this. */
.hero-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.2rem;margin:1.8rem 0 0;max-width:820px}
.hero-fact{border-left:5px solid var(--yellow);padding-left:.9rem}
.hero-fact dt{font-family:var(--display);text-transform:uppercase;font-size:.92rem;letter-spacing:.07em;color:var(--yellow);margin-bottom:.15rem}
.hero-fact dd{font-size:1.12rem;font-weight:800;color:#fff;line-height:1.35}
.hero-fact a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.hero-fact a:hover{color:var(--yellow)}
.hero-cafe .hero-actions{margin-top:2rem}
.hero-cafe .btn-outline{background:transparent;color:#fff;border-color:#fff}
.hero-cafe .btn-outline:hover{background:#fff;color:var(--ink)}

/* the four misfits, lined up along the bottom of the hero */
.hero-cats{display:flex;justify-content:center;align-items:flex-end;gap:clamp(.3rem,2.2vw,2.4rem);
  margin-top:clamp(1.5rem,3vw,2.5rem);padding:0 .5rem}
.hero-cats img{height:clamp(96px,15vw,210px);width:auto;object-fit:contain;display:block}
@media (prefers-reduced-motion:no-preference){
  .hero-cats img{animation:catBob 5s ease-in-out infinite}
  .hero-cats img:nth-child(2){animation-delay:.5s}
  .hero-cats img:nth-child(3){animation-delay:1s}
  .hero-cats img:nth-child(4){animation-delay:1.5s}
}
@keyframes catBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* cats used as small accents elsewhere */
.cat-accent{width:clamp(70px,8vw,110px);height:auto;object-fit:contain}

@media (max-width:767px){
  .site-topbar .wrap{gap:.35rem 1rem;padding:.6rem 0}
  .topbar-item{font-size:.92rem}
  .hero-cafe::before{background:linear-gradient(180deg,rgba(13,11,10,.9) 0%,rgba(13,11,10,.86) 60%,rgba(13,11,10,.9) 100%)}
  .hero-facts{grid-template-columns:1fr 1fr;gap:1rem}
  .hero-cats{gap:.15rem}
}
@media (max-width:479px){
  .hero-facts{grid-template-columns:1fr}
}

/* cats in the dark brand band */
.band-cats{display:flex;justify-content:center;align-items:flex-end;gap:clamp(.4rem,2vw,1.8rem);margin-top:2.4rem}
.band-cats img{height:clamp(80px,11vw,150px);width:auto;object-fit:contain}

/* ---- accessibility: bigger, clearer, higher contrast ---- */
.nav-links a{font-size:1rem;letter-spacing:.05em}
.cart-btn{font-size:.95rem;padding:.65rem 1.1rem;min-height:48px}
.hero-sub,.chapter-head p,.editorial p,.product p{font-weight:600}
.chapter-head p{font-size:1.2rem}
.editorial p{font-size:1.1rem}
.product p{font-size:1.02rem}
a:not(.btn):not(.nav-logo):not(.topbar-item):not(.nav-cta):not(.add-btn){text-underline-offset:3px}
/* every real link/button gets a pointer + a visible focus ring */
a,button,.btn,.add-btn,summary{cursor:pointer}

/* fix: black button on a black band is invisible — go yellow on dark sections */
.brand-band .btn-terra{background:var(--yellow);color:var(--ink);border-color:var(--ink);box-shadow:4px 4px 0 rgba(255,255,255,.3)}
.brand-band .btn-terra:hover{background:var(--yellow-deep);box-shadow:6px 6px 0 rgba(255,255,255,.35)}

/* ============================================================
   v4 hero — matches Jess & Damion's reference: copy left, cats-at-the-cafe right
   ============================================================ */
.hero-cafe{position:relative;background:var(--black);color:#fff;overflow:hidden;border-bottom:4px solid var(--ink)}
.hero-cafe::before{content:none}          /* no overlay needed now — image sits beside the text */
.hero-cafe-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.15fr;
  gap:clamp(1.5rem,4vw,3.5rem);align-items:center;padding:clamp(2.5rem,5vw,4rem) 0}
.hero-copy{max-width:36rem}
.hero-scene{position:relative}
.hero-scene img{width:100%;height:auto;border-radius:18px;display:block}
/* soften the scene's edges into the black so it feels built-in, like the reference */
.hero-scene::after{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;
  box-shadow:inset 0 0 60px 20px var(--black)}
.hero-cafe .lead{color:#EFE9E1;max-width:30em}
.hero-cafe .hero-actions{margin-top:1.8rem}
.hero-cafe .hero-facts{margin-top:2rem;grid-template-columns:1fr 1fr;max-width:none}

@media (max-width:900px){
  .hero-cafe-grid{grid-template-columns:1fr;gap:1.8rem}
  .hero-scene{order:-1}                     /* picture first on mobile */
  .hero-cafe .hero-facts{grid-template-columns:1fr 1fr}
}
@media (max-width:479px){
  .hero-cafe .hero-facts{grid-template-columns:1fr}
}

/* the four misfits in the footer — so they're on every page, not just home */
.footer-cats{display:flex;justify-content:center;align-items:flex-end;gap:clamp(.5rem,3vw,2.5rem);
  margin:1rem 0 2rem;padding-top:1rem}
.footer-cats img{height:clamp(72px,9vw,120px);width:auto;object-fit:contain}
@media (max-width:479px){.footer-cats{gap:.3rem}.footer-cats img{height:64px}}

/* new lively cat lineup (Jess's updated artwork) — one grouped illustration */
.footer-cats{display:flex;justify-content:center;margin:1.2rem 0 2rem;padding-top:1rem}
.footer-cats img{width:min(520px,82%);height:auto;object-fit:contain}
.band-cats{display:flex;justify-content:center;margin-top:2.4rem}
.band-cats img{width:min(620px,90%);height:auto;object-fit:contain}
@media (max-width:479px){.footer-cats img{width:92%}.band-cats img{width:96%}}

/* hero now uses Jess's cafe illustration (light/cream) — soften the dark panel around it */
.hero-cafe{background:var(--black)}
.hero-scene img{border-radius:18px;background:#fff}
.hero-scene::after{box-shadow:none}   /* no dark vignette over a light illustration */

/* "this is what to look for" — the real container, so nobody drives past it */
.lookfor{margin:0 0 2.5rem;max-width:760px;margin-inline:auto}
.lookfor img{width:100%;height:auto;max-height:520px;object-fit:cover;object-position:center 42%;
  border-radius:var(--radius);border:3px solid var(--ink);box-shadow:var(--hard-lg)}
.lookfor figcaption{margin-top:.9rem;text-align:center;font-weight:800;font-size:1.05rem;color:var(--ink-soft)}

/* ============================================================
   v6 — REFERENCE THEME: black canvas, cream content panels floating on it.
   Reading content stays black-on-cream (critical for their older customers);
   the drama comes from the dark frame around it.
   ============================================================ */
body{background:var(--black);color:var(--ink)}

/* light content sections become inset cream panels on the black canvas */
.chapter{
  background:var(--cream2);
  border:3px solid var(--ink);
  border-radius:26px;
  width:min(1240px,94vw);
  margin:0 auto clamp(1.4rem,3vw,2.2rem);
  padding:clamp(2.4rem,5vw,4.2rem) clamp(1.3rem,3.5vw,3rem);
  box-shadow:0 0 0 1px rgba(255,255,255,.06);
}
.chapter-alt{background:#FFFFFF;border-block:3px solid var(--ink)}
.chapter > .wrap{width:100%;max-width:none}
main#page{padding-bottom:clamp(1.4rem,3vw,2.2rem)}

/* keep the dark blocks truly full-bleed against the canvas */
.brand-band,.marquee,.pull-quote,.hero-cafe{width:100%;border-radius:0}
.pull-quote{color:#fff}
.pull-quote em{color:var(--ink)}

/* sub-page heroes sit on the dark canvas → give them a cream panel too */
.hero:not(.hero-cafe){
  background:var(--cream2);border:3px solid var(--ink);border-radius:26px;
  width:min(1240px,94vw);margin:clamp(1.4rem,3vw,2.2rem) auto;
  padding:clamp(2.2rem,5vw,3.6rem) clamp(1.3rem,3.5vw,3rem);
}
.notfound{background:var(--cream2);border:3px solid var(--ink);border-radius:26px;
  width:min(1240px,94vw);margin:clamp(1.4rem,3vw,2.2rem) auto;padding:clamp(2.5rem,6vw,4.5rem) 1.5rem}

@media (max-width:767px){
  .chapter,.hero:not(.hero-cafe),.notfound{border-radius:18px;width:95vw;padding-left:1.1rem;padding-right:1.1rem}
}

/* ============================================================
   MENU PAGE — big, clear price lists (built for an older audience)
   ============================================================ */
.menu-jump{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:1.8rem}
.menu-jump .btn{font-size:1rem;padding:.7rem 1.4rem;min-height:48px}
.menu-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem)}
.menu-group h3{font-family:var(--display);text-transform:uppercase;font-size:1.5rem;letter-spacing:.01em;
  margin:0 0 .6rem;padding-bottom:.4rem;border-bottom:3px solid var(--ink)}
.menu-sub{font-family:var(--body);font-weight:800;font-size:.9rem;text-transform:none;color:var(--gray);letter-spacing:0}
.menu-row,.menu-row3{display:flex;align-items:baseline;gap:1rem;padding:.6rem 0;border-bottom:2px dotted var(--line-soft);font-size:1.15rem}
.menu-row3{display:grid;grid-template-columns:1fr 4.5rem 4.5rem;text-align:right}
.menu-row3 .name,.menu-row .name{text-align:left;font-weight:700;flex:1}
.menu-head{display:grid;grid-template-columns:1fr 4.5rem 4.5rem;text-align:right;font-family:var(--display);
  text-transform:uppercase;font-size:.9rem;color:var(--gray);padding-bottom:.2rem}
/* all prices share one style — Anton, same size — so nothing looks bolder than the rest */
.menu-row .price,.menu-row3 span:not(.name){font-family:var(--display);font-size:1.2rem;white-space:nowrap;color:var(--ink)}
.menu-row .price small,.menu-row3 small,.menu-row .name small{font-family:var(--body);font-weight:700;font-size:.8rem;color:var(--gray)}
.menu-row .name small.diet,.diet{font-weight:900;font-size:.72rem;color:var(--yellow-deep);text-transform:uppercase;letter-spacing:.03em;margin-left:.3rem}
.menu-note{margin-top:1rem;text-align:center;font-weight:800;font-size:1.05rem}
.menu-note strong{background:var(--yellow);padding:.1em .3em;border-radius:4px}
.menu-plain{font-weight:700;font-size:1.15rem}
.diet-key{margin-top:1.6rem;text-align:center;font-weight:700;color:var(--ink-soft)}
.diet-key strong{color:var(--yellow-deep)}
.menu-cta{margin-top:2rem;display:flex;justify-content:center}

/* cake pricing table */
.cake-table{border:3px solid var(--ink);border-radius:16px;overflow:hidden;background:var(--paper)}
.cake-row{display:grid;grid-template-columns:1fr 1.6fr 1fr .8fr;gap:.5rem;padding:.85rem 1.1rem;align-items:center;
  border-bottom:2px solid var(--line-soft);font-size:1.1rem;font-weight:700}
.cake-row:last-child{border-bottom:0}
.cake-row .price{font-family:var(--display);font-size:1.4rem;color:var(--ink);text-align:right}
.cake-head{background:var(--ink);color:#fff;font-family:var(--display);text-transform:uppercase;font-size:.95rem;letter-spacing:.02em}
.cake-head .price,.cake-head span{color:#fff}

@media (max-width:767px){
  .menu-cols{grid-template-columns:1fr;gap:2.2rem}
  .cake-row{grid-template-columns:1fr 1fr;grid-auto-rows:auto;row-gap:.15rem}
  .cake-row span:nth-child(2){grid-column:1/3;color:var(--ink-soft);font-weight:600;font-size:.95rem}
  .cake-row .price{text-align:left}
  .cake-head{display:none}
}

/* real cake gallery (Custom Orders) */
.cake-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.cake-gallery img{width:100%;aspect-ratio:1;object-fit:cover;border:3px solid var(--ink);border-radius:14px;box-shadow:var(--hard);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.cake-gallery img:hover{transform:translate(-2px,-2px);box-shadow:var(--hard-lg)}
@media (max-width:900px){.cake-gallery{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.cake-gallery{grid-template-columns:repeat(2,1fr);gap:.7rem}}

/* individual character cats as page accents (tasteful — one per page, hidden on small screens) */
.hero{position:relative;overflow:visible}
.hero-mascot{position:absolute;bottom:-3px;right:clamp(1rem,3vw,3rem);width:clamp(120px,13vw,185px);height:auto;
  pointer-events:none;z-index:1;filter:drop-shadow(3px 4px 0 rgba(0,0,0,.12))}
.hero-mascot.left{right:auto;left:clamp(1rem,3vw,3rem)}
@media (max-width:900px){.hero-mascot{display:none}}

/* menu hero — clean centred stack that clears the mascot on the right */
.menu-hero{text-align:center}
.menu-hero-inner{max-width:760px;margin-inline:auto;display:flex;flex-direction:column;align-items:center}
.menu-hero .hero-kicker{margin-bottom:1.1rem}
.menu-hero .hero-sub{margin-inline:auto}
.menu-hero .menu-jump{justify-content:center}
@media (max-width:900px){.menu-hero-inner{max-width:100%}}

/* ============================================================
   GALLERY PAGE — Instagram-style square grid
   ============================================================ */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1.5rem}
.gallery-grid img{width:100%;aspect-ratio:1;object-fit:cover;border:3px solid var(--ink);border-radius:14px;
  box-shadow:var(--hard);transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.gallery-grid img:hover{transform:translate(-2px,-2px);box-shadow:var(--hard-lg)}
@media (max-width:900px){.gallery-grid{grid-template-columns:repeat(3,1fr);gap:.8rem}}
@media (max-width:560px){.gallery-grid{grid-template-columns:repeat(2,1fr);gap:.6rem}}
.brand-band .band-sub{color:#EFE9E1}