/* ============================================================
   King of KraPOW — demo site stylesheet
   Design source: Claude Design export "king-of-krapow export-v3"
   (_ds/king-of-krapow-design-system-3ff60caa… tokens + the four v3
    canvases: Home / Menu / About / Contact).
   The token blocks below are encoded VERBATIM from the export's
   tokens/*.css. AA-safe variants are declared afterwards, each with a
   comment recording the measured ratio and why the variant exists.
   ============================================================ */

/* ---------- tokens/colors.css (verbatim, sampled from brand artwork) ---------- */
:root{
  --red-50:#fdeceb;--red-100:#fbd2ce;--red-200:#f4a49c;--red-300:#ee7568;--red-400:#e85342;
  --red-500:#e23a2e;--red-600:#cf2c20;--red-700:#bc162a;--red-800:#96121f;--red-900:#650c15;
  --gold-50:#fff9e6;--gold-100:#ffefbf;--gold-200:#fbdf87;--gold-300:#f9d45c;--gold-400:#f7ca39;
  --gold-500:#f0b21f;--gold-600:#e59a00;--gold-700:#b87700;--gold-800:#8a5900;
  --yolk-300:#ffb066;--yolk-400:#ff8c33;--yolk-500:#ff6622;--yolk-600:#ef4915;
  --basil-50:#eef6ef;--basil-100:#d3e8d6;--basil-200:#a6d0ac;--basil-300:#79b881;--basil-400:#5aa062;
  --basil-500:#3f8348;--basil-600:#2f6537;--basil-700:#234c29;--basil-800:#16301a;
  --cream-50:#fffaf0;--cream-100:#fff4e2;--cream-200:#ffeebb;--cream-300:#f2dcb4;--cream-400:#dcc49a;
  --char-100:#8b8279;--char-200:#6b625a;--char-300:#4a423b;--char-400:#332c26;
  --char-500:#221d19;--char-600:#1a1613;--char-700:#0f0c0a;
  --white:#ffffff;

  --surface-page:var(--cream-100);
  --surface-page-dark:var(--char-600);
  --surface-raised:var(--cream-50);
  --surface-card:#fffdf6;              /* the canvases' photo-mount paper */
  --surface-band:#f4e3c4;              /* torn page-head band */
  --surface-inset:#ecd6ab;             /* dashed instruction panel */
  --surface-gold:var(--gold-400);
  --surface-gold-deep:var(--gold-600);

  --text-heading:var(--char-700);
  --text-body:var(--char-400);
  --text-muted:var(--char-300);
  --text-faint:var(--char-200);
  --text-on-dark:var(--cream-200);
  --text-on-dark-muted:var(--cream-400);
  --text-on-gold:var(--char-700);

  --border-ink:var(--char-700);
  --whatsapp:#25d366;                  /* official WhatsApp green — never re-themed */
}

/* ---------- tokens/typography.css + fonts.css (verbatim) ---------- */
:root{
  --font-brand:"Baloo 2","Trebuchet MS",system-ui,sans-serif;      /* logo lettering */
  --font-display:"Anton","Arial Narrow",Impact,sans-serif;         /* promo headline caps */
  --font-body:"Hanken Grotesk","Segoe UI",system-ui,sans-serif;    /* running copy */
  --font-mono:"Courier Prime",ui-monospace,"Courier New",monospace;/* hawker-ticket voice */

  --text-2xs:.6875rem;--text-xs:.8125rem;--text-sm:.9375rem;--text-base:1.0625rem;
  --text-lg:1.25rem;--text-xl:1.5rem;--text-2xl:1.875rem;--text-3xl:2.5rem;--text-4xl:3.25rem;
  --leading-tight:.92;--leading-snug:1.08;--leading-heading:1.15;--leading-body:1.55;
  --tracking-shout:.02em;--tracking-tag:.14em;
}

/* ---------- tokens/spacing.css + radius.css + motion.css (verbatim) ---------- */
:root{
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;
  --space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;
  --space-20:5rem;--space-24:6rem;
  --page-max:1200px;--gutter:clamp(18px,4vw,40px);
  --radius-pill:999px;
  --ink-1:2px 2px 0 var(--border-ink);--ink-2:4px 4px 0 var(--border-ink);--ink-3:6px 6px 0 var(--border-ink);
  --ease-pop:cubic-bezier(.34,1.8,.5,1);--ease-snap:cubic-bezier(.5,0,.1,1);
  --dur-fast:140ms;--dur-base:220ms;
}

/* ---------- Declared AA variants (deviations from the export tokens)
   Every value below is a deliberate substitution for an export token that
   fails WCAG AA at the size it is used. Ratios are computed against the
   surface named in each comment.
   ---------------------------------------------------------------- */
:root{
  /* --red-500 #e23a2e as a BUTTON FILL under --cream-50 #fffaf0 text = 4.14:1 → FAILS.
     --red-600 #cf2c20 under the same text = 5.00:1 → passes. Red-500 is kept for
     display type ≥40px and decorative fills only. */
  --action-primary:var(--red-600);          /* 5.00:1 vs #fffaf0 */
  --action-primary-hover:var(--red-800);    /* 8.40:1 vs #fffaf0 */

  /* --red-600 #cf2c20 as small TEXT: 4.78:1 on --cream-100, 5.11:1 on --surface-card
     (both pass) but only 4.12:1 on --surface-band and 3.66:1 on --surface-inset
     (both FAIL). --red-800 #96121f is the only red allowed as small text on those
     two darker grounds: 6.92:1 on the band, 6.15:1 on the inset. */
  --text-link:var(--red-600);               /* 4.78:1 on #fff4e2 */
  --text-link-hover:var(--red-800);         /* 8.03:1 on #fff4e2 */
  --text-link-onband:var(--red-800);        /* 6.92:1 on #f4e3c4, 6.15:1 on #ecd6ab */

  /* --char-100 #8b8279 (the canvases' row numerals) = 3.47:1 on #fff4e2 → FAILS.
     --char-200 #6b625a = 5.48:1 on #fff4e2, 4.72:1 on #f4e3c4 → passes.
     #8b8279 IS kept for footer column heads, where it sits on #1a1613 at 4.77:1. */
  --text-faint-aa:var(--char-200);

  /* WhatsApp green #25d366 under WHITE text = 1.98:1 → FAILS badly. The official
     green is kept as the fill (brand recognition) and paired with ink text instead:
     #0f0c0a on #25d366 = 9.84:1. */
  --text-on-whatsapp:var(--char-700);

  /* --focus-ring --yolk-500 #ff6622 = 2.69:1 against #fff4e2 → below the 3:1 floor for
     a focus indicator. Ink is used instead: 17.93:1 on the page, 5.4:1 on the dark band. */
  --focus-ring:var(--char-700);
  --focus-ring-on-dark:var(--gold-400);     /* 11.52:1 on #1a1613 */

  --scrim:rgba(15,12,10,.55);
  --tape:rgba(255,238,187,.85);
  --dotline:rgba(15,12,10,.3);
  --rule-on-dark:rgba(255,238,187,.28);
  --grain:radial-gradient(rgba(15,12,10,.055) .5px,transparent .6px);
  --dots-warm:radial-gradient(rgba(120,80,20,.06) 1px,transparent 1.2px);
  --dots-inset:radial-gradient(rgba(120,80,20,.07) 1px,transparent 1.2px);
}

/* ============================================================
   Base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--surface-page);color:var(--text-body);
  font:400 var(--text-base)/var(--leading-body) var(--font-body);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;color:var(--text-heading);text-wrap:pretty}
p{margin:0;text-wrap:pretty}
img{max-width:100%}
ul{margin:0}
a{color:var(--text-link);text-underline-offset:3px}
a:hover{color:var(--text-link-hover)}
::selection{background:var(--gold-400);color:var(--char-700)}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.site-footer :focus-visible,.ticker :focus-visible{outline-color:var(--focus-ring-on-dark)}
.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}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--char-700);color:var(--cream-100);padding:12px 18px;font-weight:700;font-family:var(--font-brand)}
.skip-link:focus{left:0}

.container{width:100%;max-width:var(--page-max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}

/* The paper grain that sits over the whole page in every canvas.
   pointer-events:none so it never eats a tap; sits under the drawer. */
.grain{position:fixed;inset:0;z-index:45;pointer-events:none;background-image:var(--grain);background-size:3px 3px}

/* ---------- Type helpers ---------- */
.tag{
  display:inline-block;padding:6px 12px;border:2px solid var(--border-ink);
  background:rgba(255,250,240,.55);
  font:700 var(--text-2xs)/1.4 var(--font-mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-body);
}
.tag--plain{background:transparent}
.eyebrow{
  font:700 var(--text-2xs)/1.4 var(--font-mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-muted);
}
.shout{
  font:clamp(30px,4.4vw,52px)/.96 var(--font-display);
  text-transform:uppercase;letter-spacing:var(--tracking-shout);color:var(--text-heading);
}
.brandhead{font:800 clamp(24px,3.2vw,34px)/1.15 var(--font-brand);color:var(--text-heading)}
.lede{font:400 var(--text-lg)/1.55 var(--font-body);color:var(--text-body);max-width:54ch}
.body{font:400 18px/1.6 var(--font-body);color:var(--text-body);max-width:46ch}
.mono{font:400 var(--text-sm)/1.5 var(--font-mono);color:var(--text-muted)}
.mono--faint{color:var(--text-faint-aa)}
.flag{font-weight:700;color:var(--text-link-onband)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:0 26px;border:2px solid var(--border-ink);border-radius:var(--radius-pill);
  font:800 19px/1 var(--font-brand);text-decoration:none;cursor:pointer;
  box-shadow:var(--ink-2);
  transition:transform var(--dur-fast) var(--ease-snap),box-shadow var(--dur-fast) var(--ease-snap),background-color var(--dur-fast) linear;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:var(--ink-3)}
.btn:active{transform:translate(2px,2px);box-shadow:var(--ink-1)}
.btn--primary{background:var(--action-primary);color:var(--cream-50)}
.btn--primary:hover{background:var(--action-primary-hover);color:var(--cream-50)}
.btn--ghost{background:var(--cream-50);color:var(--char-700)}
.btn--ghost:hover{background:var(--cream-200);color:var(--char-700)}
.btn--wa{background:var(--whatsapp);color:var(--text-on-whatsapp)}
.btn--wa:hover{background:#1fbb59;color:var(--text-on-whatsapp)}
.btn--sm{min-height:46px;padding:0 20px;font-size:17px}
.btn--block{width:100%}
.btn svg{flex:none}

.arrowlink{
  display:inline-block;font:800 19px/1.25 var(--font-brand);text-decoration:none;
  color:var(--text-link-onband);border-bottom:4px solid rgba(226,58,46,.55);padding-bottom:2px;
}
.arrowlink:hover{color:var(--red-900);border-bottom-color:var(--red-800)}

/* ---------- Paper photo mount (the canvases' taped print) ---------- */
.paper{position:relative;display:block;background:var(--surface-card);padding:12px 12px 14px;box-shadow:4px 5px 0 rgba(15,12,10,.75)}
/* height:auto is load-bearing. With height:100% the photo's height resolves against
   the mount, which in a stretched grid row is the height of the TALLEST sibling — so a
   long caption on one card silently stretched the photos on the others. Ratios come from
   the .ratio-* classes (or the file's own dimensions), never from a neighbour. */
.paper > img{display:block;width:100%;height:auto;object-fit:cover}
.paper .cap{display:block;margin-top:10px;font:400 var(--text-sm)/1.4 var(--font-mono);color:var(--text-muted)}
.paper::before{
  content:"";position:absolute;top:-13px;left:24%;width:92px;height:27px;background:var(--tape);
  border-left:1px dashed rgba(15,12,10,.2);border-right:1px dashed rgba(15,12,10,.2);
  transform:rotate(-6deg);box-shadow:0 1px 2px rgba(15,12,10,.18);z-index:2;
}
.paper--notape::before{display:none}
.ratio-4-5 > img{aspect-ratio:4/5}
.ratio-3-4 > img{aspect-ratio:3/4}
.ratio-16-10 > img{aspect-ratio:16/10}
.ratio-1-1 > img{aspect-ratio:1/1}

.tilt-a{transform:rotate(-1.5deg)}
.tilt-b{transform:rotate(1.6deg)}
.tilt-c{transform:rotate(-.7deg)}
.tilt-d{transform:rotate(.6deg)}

/* ---------- Photo-needed placeholder (house honesty rule) ---------- */
.photo-needed{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:var(--surface-inset);background-image:var(--dots-inset);background-size:6px 6px;
  border:2px dashed var(--border-ink);padding:20px;text-align:center;
}
.photo-needed .lab{font:700 var(--text-2xs)/1.4 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-link-onband)}
.photo-needed .sub{font:400 var(--text-sm)/1.5 var(--font-body);color:var(--text-muted);max-width:26ch}

/* ============================================================
   Header / nav
   ============================================================ */
.site-header{position:sticky;top:0;z-index:40;background:var(--surface-raised);border-bottom:3px solid var(--border-ink)}
.hdr{display:flex;align-items:center;gap:20px;padding-top:9px;padding-bottom:9px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none;min-width:0}
.brand img{height:50px;width:50px;display:block;flex:none}
/* The wordmark rides beside the badge at EVERY width. The badge alone carries the
   name only as ~8px lettering inside a 50px image, which no customer can read. */
.brand-names{display:flex;flex-direction:column;gap:1px;min-width:0}
.brand-name{font:800 20px/1.1 var(--font-brand);color:var(--char-700);white-space:nowrap}  /* #0f0c0a on #fffaf0 = 18.7:1 */
.brand-name .pow{color:var(--red-600)}                                                     /* #cf2c20 on #fffaf0 = 5.05:1 */
.brand-sub{font:400 var(--text-2xs)/1.35 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint-aa);white-space:nowrap}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:6px}
.nav-links a{
  position:relative;display:flex;align-items:center;height:46px;padding:0 11px;
  font:800 18px/1 var(--font-brand);color:var(--char-700);text-decoration:none;
}
.nav-links a:hover{color:var(--text-link)}
.nav-links a[aria-current="page"]{color:var(--text-link)}
/* the canvases' hand-drawn highlighter swipe under the current page */
.nav-links a[aria-current="page"]::before{
  content:"";position:absolute;left:6px;right:6px;bottom:9px;height:7px;
  background:var(--gold-400);transform:rotate(-1deg);z-index:-1;
}
.nav-wa{flex:none;min-height:46px;padding:0 18px;font-size:17px}
.nav-toggle{
  display:none;align-items:center;gap:9px;margin-left:auto;min-height:46px;padding:0 16px;
  background:var(--cream-50);border:2px solid var(--border-ink);border-radius:var(--radius-pill);
  box-shadow:var(--ink-1);font:800 17px/1 var(--font-brand);color:var(--char-700);cursor:pointer;
}
.nav-toggle .bars{display:inline-flex;flex-direction:column;gap:3px}
.nav-toggle .bars span{display:block;width:17px;height:2.5px;background:var(--char-700)}

/* Mobile drawer — hides IN PLACE with opacity/visibility.
   Never translateX: an off-screen transformed drawer creates horizontal
   overflow at phone widths. */
.nav-backdrop{
  position:fixed;inset:0;z-index:60;background:var(--scrim);
  opacity:0;visibility:hidden;transition:opacity var(--dur-base) var(--ease-snap),visibility var(--dur-base) var(--ease-snap);
}
.nav-backdrop[data-open="true"]{opacity:1;visibility:visible}
.nav-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:61;width:min(330px,88vw);
  background:var(--surface-raised);border-left:3px solid var(--border-ink);
  padding:16px 22px 26px;display:flex;flex-direction:column;overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity var(--dur-base) var(--ease-snap),visibility var(--dur-base) var(--ease-snap);
}
.nav-drawer[data-open="true"]{opacity:1;visibility:visible}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.drawer-head img{height:44px;width:44px}
.drawer-close{background:none;border:none;font-size:32px;line-height:1;color:var(--text-muted);cursor:pointer;padding:4px 10px}
.drawer-link{
  display:block;padding:14px 2px;font:800 20px/1.2 var(--font-brand);
  color:var(--char-700);text-decoration:none;border-bottom:2px dotted var(--dotline);
}
.drawer-link[aria-current="page"]{color:var(--text-link)}
.drawer-cta{margin-top:20px;display:grid;gap:10px}
.drawer-note{font:400 var(--text-xs)/1.5 var(--font-body);color:var(--text-muted);text-align:center}

/* ============================================================
   Page-head band (torn bottom edge)
   ============================================================ */
.torn{
  position:relative;overflow:hidden;background:var(--surface-band);
  background-image:var(--dots-warm);background-size:7px 7px;
  clip-path:polygon(0 0,100% 0,100% 96.5%,96% 99.2%,92% 97%,88% 99.5%,84% 97.6%,80% 99.7%,76% 97.2%,72% 99.3%,68% 97.1%,64% 99.6%,60% 97.7%,56% 99.2%,52% 96.9%,48% 99.5%,44% 97.4%,40% 99.7%,36% 96.9%,32% 99.1%,28% 97.8%,24% 99.6%,20% 97%,16% 99.3%,12% 97.3%,8% 99.5%,4% 97.1%,0 99.2%);
}
.torn .container{position:relative;padding-top:var(--space-12);padding-bottom:var(--space-16)}
.page-head{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.page-head h1{
  font:clamp(38px,7.2vw,88px)/.9 var(--font-display);text-transform:uppercase;
  letter-spacing:var(--tracking-shout);color:var(--char-700);
  text-shadow:4px 4px 0 rgba(226,58,46,.22);
}

/* ============================================================
   Home — hero
   ============================================================ */
.hero{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);gap:44px;align-items:center;padding-top:var(--space-12);padding-bottom:var(--space-16)}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0}
.hero-kingof{
  font:800 clamp(30px,4.6vw,56px)/.98 var(--font-brand);color:var(--red-600);
  transform:rotate(-.8deg);text-shadow:2px 2px 0 rgba(247,202,57,.75);
}
/* The KRA-P-(yolk)-W lockup. Sizes are capped so the row can never exceed the
   hero column: at 1900px the column is ~624px and the lockup measures ~500px;
   at 360px the lockup measures ~209px inside a 324px content box. */
.krapow{display:flex;align-items:center;gap:2px;margin:-4px 0 0 -4px;font-weight:400;min-width:0}
.krapow span{
  font:clamp(56px,9.2vw,132px)/.84 var(--font-display);text-transform:uppercase;
  letter-spacing:.01em;color:var(--char-700);
}
.krapow .red{color:var(--red-500);text-shadow:-3px 3px 0 rgba(247,202,57,.85)}
.krapow .ink{text-shadow:4px 4px 0 rgba(226,58,46,.3)}
.krapow .yolk{
  position:relative;width:clamp(37px,6.1vw,87px);height:clamp(37px,6.1vw,87px);
  margin:0 5px;border-radius:50%;overflow:hidden;border:4px solid var(--char-700);flex:none;
  box-shadow:3px 3px 0 rgba(226,58,46,.3);
}
.krapow .yolk img{width:100%;height:100%;object-fit:cover;display:block}
.hero-sub{font:clamp(22px,4vw,46px)/.96 var(--font-display);text-transform:uppercase;letter-spacing:var(--tracking-shout);color:var(--text-body)}
.hero-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:10px}
.hero-actions .mono{max-width:32ch}
.hero-visual{position:relative;justify-self:center;max-width:340px;width:100%}

/* ============================================================
   Dark ticker band
   ============================================================ */
.ticker{background:var(--surface-page-dark);padding:16px 0}
.ticker .rail{
  border-top:1px dashed var(--rule-on-dark);border-bottom:1px dashed var(--rule-on-dark);
  padding:11px 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  font:700 17px/1.5 var(--font-mono);letter-spacing:.04em;color:var(--text-on-dark);
}
.ticker b{color:var(--gold-400);font-weight:700}
/* The separator lives INSIDE the item before it, so a wrap can never start a line
   with a stray middot. */
.ticker .dot{color:var(--char-100);margin-left:14px}
.ticker .lab{color:var(--yolk-400)}

/* ============================================================
   Split section (photo + dashed instruction panel)
   ============================================================ */
.split{display:grid;gap:52px;align-items:center;padding-top:var(--space-16);padding-bottom:var(--space-8)}
.split--photoleft{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
.split--photoright{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
.split .shot{justify-self:center;max-width:360px;width:100%}
/* Matched gallery pair: two source files with very different native ratios, so both
   get one fixed ratio + object-fit:cover — neither photo's height depends on the other. */
.gallery2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:32px}
.gallery2 .paper > img{aspect-ratio:4/5}

.panel{
  position:relative;background:var(--surface-inset);background-image:var(--dots-inset);background-size:6px 6px;
  border:2px dashed var(--border-ink);padding:30px 32px 32px;
}
.panel h2{margin-top:10px}
.steps{display:flex;flex-direction:column;gap:16px;margin-top:22px}
.step{display:flex;align-items:baseline;gap:18px}
.step .n{font:42px/.85 var(--font-display);color:var(--red-800);flex:none;width:38px}
.step .t{display:flex;flex-direction:column;gap:3px}
.step .t b{font:800 21px/1.2 var(--font-brand);color:var(--char-700)}
.step .t span{font:400 16px/1.5 var(--font-body);color:var(--text-muted);max-width:42ch}

/* ============================================================
   Outlets
   ============================================================ */
.outlets{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px}
.outlet{
  display:flex;flex-direction:column;background:var(--surface-card);
  border:2px solid var(--border-ink);box-shadow:var(--ink-2);
}
.outlet .shot{aspect-ratio:16/10;overflow:hidden;border-bottom:2px solid var(--border-ink)}
.outlet .photo-needed{aspect-ratio:16/10;border:0;border-bottom:2px dashed var(--border-ink)}
.outlet .shot img{display:block;width:100%;height:100%;object-fit:cover}
/* pulls a tall source photo's crop window up so the subject stays in the 16:10 frame */
.op-high{object-position:50% 34%}
.outlet .txt{display:flex;flex-direction:column;gap:7px;padding:18px 20px 20px}
.outlet h3{font:800 22px/1.2 var(--font-brand);color:var(--char-700)}
.outlet .addr{font:400 16px/1.5 var(--font-body);color:var(--text-muted)}
.outlet .meta{font:400 var(--text-sm)/1.5 var(--font-mono);color:var(--text-faint-aa)}
.outlet .since{
  align-self:flex-start;background:var(--gold-400);color:var(--text-on-gold);
  border:2px solid var(--border-ink);padding:3px 10px;
  font:700 var(--text-2xs)/1.4 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;
}

/* ============================================================
   Story timeline
   ============================================================ */
.storysec{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:start}
.storycopy{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.timeline{display:flex;flex-direction:column;font:400 16px/1.5 var(--font-mono);color:var(--text-body)}
.timeline div{display:flex;align-items:baseline;gap:14px;padding:14px 0;border-bottom:2px dotted var(--dotline)}
.timeline b{font:700 22px/1 var(--font-mono);color:var(--red-600);flex:none;width:98px}

/* stat trio (About) */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:32px;font:400 16px/1.5 var(--font-mono);color:var(--text-body)}
.stat{display:flex;flex-direction:column;gap:8px;padding-top:16px;border-top:3px solid var(--border-ink)}
.stat .n{font:52px/.86 var(--font-display);color:var(--red-600)}
.stat span{max-width:28ch}

/* ============================================================
   Menu board
   ============================================================ */
.board{display:block}
.board-head,.board-row{display:grid;grid-template-columns:minmax(0,1fr) 92px 92px 92px;gap:0 14px;align-items:center}
.board-head{padding-bottom:10px;border-bottom:3px solid var(--border-ink)}
.board-head span{font:700 var(--text-2xs)/1.4 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);text-align:right}
.board-head span:first-child{text-align:left;letter-spacing:.18em}
.board-head .hot{color:var(--red-800)}
.board-row{position:relative;padding:18px 0;border-bottom:2px dotted var(--dotline)}
.board-row .dish{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;min-width:0}
.board-row .num{font:700 var(--text-sm)/1 var(--font-mono);color:var(--text-faint-aa);flex:none;width:26px}
.board-row .nm{font:800 clamp(19px,2.4vw,26px)/1.2 var(--font-brand);color:var(--char-700)}
.board-row .note{font:700 var(--text-2xs)/1.4 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--red-800)}
.board-row .p{font:700 20px/1 var(--font-mono);color:var(--text-muted);text-align:right}
/* The egg-tier label travels with each price so the number is never announced bare.
   Hidden on desktop (the column head carries it visually), shown above the number
   once the row reflows on a phone. */
.board-row .tier{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.board-row .p--hot{color:var(--red-600)}          /* 4.78:1 on #fff4e2 */
.board-row .p--none{color:var(--text-muted)}      /* 9.04:1 on #fff4e2 */
/* highlighter swipe behind the chicken row */
.board-row .swipe{position:absolute;left:-10px;right:-10px;top:14%;height:68%;background:rgba(247,202,57,.55);transform:rotate(-.5deg);pointer-events:none;z-index:-1}
/* The swipe lightens that row's ground to roughly #fbdd85, where --red-600 falls to
   3.91:1 for the price. --red-800 restores it to 6.56:1. */
.board-row .swipe ~ .p--hot{color:var(--red-800)}
.board-foot{display:flex;flex-wrap:wrap;gap:6px 28px;padding-top:16px;font:400 var(--text-sm)/1.5 var(--font-mono);color:var(--text-muted)}

/* dish photo strip */
.dishstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:26px}
.dishstrip .paper{padding:10px 10px 12px}
.dishstrip .paper > img,.dishstrip .photo-needed{aspect-ratio:4/5}
.dishcap{display:flex;justify-content:space-between;gap:10px;margin-top:9px;font:400 var(--text-sm)/1.4 var(--font-mono);color:var(--text-body)}
.dishcap b{font-weight:700;color:var(--red-600)}

/* ============================================================
   Cards: delivery / press / info
   ============================================================ */
.card{
  position:relative;background:var(--surface-card);border:2px solid var(--border-ink);
  box-shadow:5px 5px 0 rgba(15,12,10,.75);padding:28px 30px 30px;
}
.card--split{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px}
.card--split > div{min-width:0}
.pricelist{display:flex;flex-direction:column;gap:6px;font:400 16px/1.5 var(--font-mono);color:var(--text-body);min-width:min(100%,280px)}
.pricelist span{display:flex;justify-content:space-between;gap:12px;border-bottom:2px dotted var(--dotline);padding-bottom:4px}
.pricelist b{color:var(--red-600)}
.btnrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

.quotecard p{margin-top:12px;font:800 clamp(21px,2.7vw,30px)/1.28 var(--font-brand);color:var(--char-700)}
.quotecard cite{display:block;margin-top:14px;font:400 var(--text-sm)/1.5 var(--font-mono);color:var(--text-muted);font-style:normal}

.mascotrow{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.mascotrow img{height:230px;width:auto;display:block}
.mascotrow .t{display:flex;flex-direction:column;gap:7px;min-width:min(100%,210px);flex:1}
.mascotrow .t b{font:800 24px/1.2 var(--font-brand);color:var(--char-700)}
.mascotrow .t span{font:400 16px/1.5 var(--font-body);color:var(--text-muted);max-width:26ch}

/* ============================================================
   Contact
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:52px;align-items:start}
.info{display:flex;flex-direction:column}
.info-block{display:flex;flex-direction:column;gap:7px;padding:20px 0;border-bottom:2px dotted var(--dotline)}
.info-block:first-child{padding-top:0}
.info-block h2{font:700 var(--text-2xs)/1.4 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted)}
.info-block .big{display:flex;align-items:center;gap:10px;font:800 clamp(19px,2.3vw,25px)/1.28 var(--font-brand);color:var(--char-700)}
.info-block .sub{font:400 16px/1.55 var(--font-body);color:var(--text-muted)}
.info-block .dot{width:11px;height:11px;border-radius:50%;background:var(--basil-500);flex:none}
.info-block a{font-weight:600}
.info-links{display:flex;flex-direction:column;gap:10px}
.info-links a{font:800 20px/1.3 var(--font-brand);text-decoration:none;color:var(--text-link)}
.info-links a:hover{color:var(--text-link-hover);text-decoration:underline}
/* The details column runs roughly twice the height of the map column; sticking the map
   keeps it beside whatever you are reading instead of stranding empty page beside it. */
.map-mount{position:relative;position:sticky;top:88px;align-self:start}
.map-mount .paper{padding:12px 12px 14px}
.map-frame{display:block;width:100%;height:440px;border:0}
.maprow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}

/* ============================================================
   FAQ
   ============================================================ */
.faq{display:grid}
.faq-item{border-top:2px dotted var(--dotline);padding:20px 0}
.faq-item:last-child{border-bottom:2px dotted var(--dotline)}
.faq-item h3{font:800 21px/1.25 var(--font-brand);color:var(--char-700);margin-bottom:8px}
.faq-item p{font:400 16.5px/1.65 var(--font-body);color:var(--text-muted);max-width:68ch}

/* ============================================================
   Sections
   ============================================================ */
.section{padding-top:var(--space-16);padding-bottom:var(--space-16)}
.section--tight{padding-top:var(--space-10);padding-bottom:var(--space-10)}
.section-head{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:var(--space-10)}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{position:relative;background:var(--surface-page-dark);color:var(--text-on-dark);border-top:3px solid var(--border-ink)}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr) minmax(0,1.1fr) minmax(0,1.1fr);gap:40px;padding-top:var(--space-12);padding-bottom:var(--space-6)}
.footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:13px}
.footer-brand img{height:76px;width:76px;display:block}
.footer-brand .slogan{font:700 var(--text-2xs)/1.4 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-400)}
.footer-brand p{font:400 var(--text-sm)/1.6 var(--font-body);color:var(--text-on-dark-muted);max-width:32ch}
.footer-col{display:flex;flex-direction:column;gap:9px}
.footer-col .head{font:700 var(--text-2xs)/1.4 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--char-100)}
.footer-col a{font:800 18px/1.25 var(--font-brand);color:var(--text-on-dark);text-decoration:none}
.footer-col a:hover{color:var(--gold-400);text-decoration:underline}
.footer-col address{font:400 var(--text-sm)/1.6 var(--font-body);color:var(--text-on-dark-muted);font-style:normal}
.footer-col .line{font:400 var(--text-sm)/1.6 var(--font-body);color:var(--text-on-dark)}
.footer-col .ig{font:700 var(--text-sm)/1.6 var(--font-mono);color:var(--gold-400);text-decoration:none}
.footer-bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;
  padding-top:16px;padding-bottom:20px;border-top:1px solid var(--rule-on-dark);
  font:400 var(--text-xs)/1.6 var(--font-body);color:var(--text-on-dark-muted);
}
.footer-band{background:var(--surface-gold-deep);border-top:3px solid var(--border-ink)}
.footer-band .container{display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:space-between;padding-top:11px;padding-bottom:11px;font:800 15px/1.5 var(--font-brand);color:var(--text-on-gold)}

/* Sticky mobile contact bar */
.mobile-bar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:44;gap:10px;padding:10px 14px;
  background:var(--surface-raised);border-top:3px solid var(--border-ink);
}
.mobile-bar .btn{flex:1;min-height:48px;padding:0 10px;font-size:16px;box-shadow:var(--ink-1)}
.mobile-bar .btn:hover{transform:none;box-shadow:var(--ink-1)}

/* ============================================================
   Responsive — checked at 360 / 414 / 768 / 1280 / 1900
   ============================================================ */
@media (max-width:1040px){
  .hero{grid-template-columns:1fr;gap:36px}
  .hero-visual{max-width:420px;justify-self:start}
  .split--photoleft,.split--photoright{grid-template-columns:1fr;gap:36px}
  .split .shot{justify-self:start;max-width:440px}
  .split--photoleft .shot{order:2}
  .storysec{grid-template-columns:1fr;gap:34px}
  .contact-grid{grid-template-columns:1fr;gap:36px}
  .map-mount{position:static}
  .map-frame{height:360px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:900px){
  .nav-links,.nav-wa{display:none}
  .nav-toggle{display:inline-flex}
  .mobile-bar{display:flex}
  body{padding-bottom:70px}
  .section{padding-top:var(--space-12);padding-bottom:var(--space-12)}
  .torn .container{padding-top:var(--space-10);padding-bottom:var(--space-12)}
  .card{padding:24px 22px 26px}
  .panel{padding:26px 22px 28px}
}
@media (max-width:760px){
  /* Kill the decorative tilts: a rotated block can push its corner past the
     viewport edge and cause horizontal scroll at phone widths. */
  .tilt-a,.tilt-b,.tilt-c,.tilt-d,.hero-kingof,.tag{transform:none}
  .mascotrow img{height:190px}
  .split{padding-top:var(--space-12)}
  .stats{gap:24px}
  .stat .n{font-size:44px}
  .timeline b{width:82px;font-size:19px}
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .dishstrip{gap:22px}
}
/* The four-column board row (dish + three prices) is unreadable on a phone.
   Below 640px the dish name takes a full row and the three tiers become three
   labelled columns underneath, so every price keeps a visible tier label. */
@media (max-width:640px){
  /* the ticker becomes one item per line here, so the separators have no job
     and would otherwise dangle at the end of every line */
  .ticker .dot{display:none}
  .ticker .rail{gap:6px 14px}
  .board-head{display:none}
  .board-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px;padding:16px 0}
  .board-row .dish{grid-column:1/-1}
  .board-row .p{
    display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;
  }
  .board-row .tier{
    position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;
    font:700 var(--text-2xs)/1.4 var(--font-mono);letter-spacing:.12em;
    text-transform:uppercase;color:var(--text-faint-aa);
  }
  .board-row .swipe{left:-8px;right:-8px;top:8%;height:84%}
}
@media (max-width:560px){
  .brand-sub{display:none}
  .brand-name{font-size:18px}
  .brand img{height:44px;width:44px}
  .hero-actions{gap:14px}
  .hero-actions .btn{width:100%}
  .hero-actions .mono{max-width:none}
  .card--split{gap:20px}
  .btnrow .btn{flex:1 1 auto}
  .mascotrow{gap:14px}
  .mascotrow img{height:160px}
}
@media (max-width:400px){
  .brand-name{font-size:16.5px}
  .brand{gap:9px}
  .nav-toggle{padding:0 13px;font-size:16px}
  .mobile-bar .btn{font-size:15px;padding:0 6px}
  .step{gap:12px}
  .step .n{width:30px;font-size:36px}
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
  .btn:hover,.btn:active{transform:none}
}