/* Self hosted so the site never waits on a third party font server ---------- */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;
  src:url('anton-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Mulish';font-style:normal;font-weight:400;font-display:swap;
  src:url('mulish-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Mulish';font-style:normal;font-weight:600;font-display:swap;
  src:url('mulish-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Mulish';font-style:normal;font-weight:700;font-display:swap;
  src:url('mulish-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Mulish';font-style:normal;font-weight:800;font-display:swap;
  src:url('mulish-latin-800-normal.woff2') format('woff2')}

/* ==========================================================================
   Fri Kitchn : design system
   Display  Anton      block capitals, matches the logo wordmark
   Body     Mulish     open, highly readable at small sizes
   ========================================================================== */
:root{
  --font-display:'Anton',Impact,'Arial Narrow Bold',sans-serif;
  --font-body:'Mulish',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem;
  --text-xl:1.25rem; --text-2xl:1.5rem; --text-3xl:2rem; --text-4xl:2.75rem;
  --text-5xl:3.5rem;

  --leading-none:1; --leading-tight:1.14; --leading-snug:1.35;
  --leading-normal:1.6; --leading-relaxed:1.75;

  --weight-regular:400; --weight-medium:500; --weight-semibold:600;
  --weight-bold:700; --weight-black:800;

  --tracking-tight:-.025em; --tracking-normal:0em; --tracking-wide:.05em;
  --tracking-widest:.14em;

  /* Brand, taken from the Fri Kitchn logo */
  --yellow:hsl(44 93% 54%);   --yellow-bright:hsl(46 96% 62%); --yellow-deep:hsl(40 92% 45%);
  --orange:hsl(28 90% 50%);   --orange-deep:hsl(22 88% 44%);
  --red:hsl(4 79% 47%);       --red-deep:hsl(2 76% 38%);

  /* Warm charcoal ladder, saturated so it never reads as flat grey */
  --ink-950:hsl(30 10% 4%);  --ink-900:hsl(30 9% 7%);   --ink-850:hsl(28 8% 10%);
  --ink-800:hsl(28 8% 13%);  --ink-700:hsl(28 7% 18%);  --ink-600:hsl(26 6% 26%);
  --ink-500:hsl(26 6% 36%);

  /* Warm sand ladder for text on dark and for the light bands */
  --sand-50:hsl(38 44% 97%);  --sand-100:hsl(36 34% 93%); --sand-200:hsl(35 26% 87%);
  --sand-300:hsl(34 18% 76%); --sand-400:hsl(33 13% 62%); --sand-500:hsl(32 10% 50%);
  --sand-700:hsl(30 12% 28%);

  --text-primary:var(--sand-50);
  --text-secondary:var(--sand-300);
  --text-tertiary:var(--sand-400);

  --space-1:.25rem; --space-2:.5rem;  --space-3:.75rem; --space-4:1rem;
  --space-6:1.5rem; --space-8:2rem;   --space-12:3rem;  --space-16:4rem;
  --space-24:6rem;  --space-32:8rem;

  --section-y:var(--space-24);
  --container-max:1180px;
  --content-max:66ch;
  --gap-cards:var(--space-6);
  --btn-x:var(--space-6); --btn-y:var(--space-3);

  --radius-sm:4px; --radius-md:8px; --radius-full:9999px;

  --shadow-xs:0 1px 2px hsl(20 30% 3% / .18);
  --shadow-sm:0 1px 4px hsl(20 30% 3% / .22),0 1px 2px hsl(20 30% 3% / .16);
  --shadow-md:0 4px 12px hsl(20 30% 3% / .26),0 2px 4px hsl(20 30% 3% / .18);
  --shadow-lg:0 12px 32px hsl(20 30% 3% / .32),0 4px 8px hsl(20 30% 3% / .2);
  --shadow-xl:0 24px 64px hsl(20 30% 3% / .38),0 8px 16px hsl(20 30% 3% / .22);
  --bar-h:60px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:104px}
html,body{overflow-x:clip}
body{
  margin:0;background:var(--ink-900);color:var(--text-secondary);
  font-family:var(--font-body);font-size:var(--text-base);
  line-height:var(--leading-normal);font-weight:var(--weight-regular);
  -webkit-font-smoothing:antialiased;
}
img,svg,iframe{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4{margin:0;color:var(--text-primary)}
p{margin:0}
a{color:inherit}
ul{margin:0;padding:0;list-style:none}

/* Anton is a single weight face, so hierarchy comes from size and colour */
.d1,.d2,.d3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  letter-spacing:var(--tracking-tight);line-height:var(--leading-none)}
.d1{font-size:var(--text-4xl)}
.d2{font-size:var(--text-3xl)}
.d3{font-size:var(--text-2xl)}
@media(min-width:768px){
  .d1{font-size:var(--text-5xl)}
  .d2{font-size:var(--text-4xl)}
  .d3{font-size:var(--text-3xl)}
}
.kicker{font-size:var(--text-xs);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--yellow);
  display:flex;align-items:center;gap:var(--space-2)}
.kicker::before{content:"";width:22px;height:3px;border-radius:var(--radius-full);
  background:linear-gradient(90deg,var(--red),var(--orange),var(--yellow))}
.lede{font-size:var(--text-lg);line-height:var(--leading-snug);color:var(--text-secondary);
  max-width:var(--content-max)}
.prose{max-width:var(--content-max)}
.prose p+p{margin-top:var(--space-4)}

.swoosh{width:180px;height:26px;overflow:visible}
.sprite{position:absolute;width:0;height:0}

/* ---------------------------------------------------------------- layout -- */
.wrap{width:100%;max-width:var(--container-max);margin-inline:auto;
  padding-inline:var(--space-6)}
.band{padding-block:var(--space-16);position:relative}
@media(min-width:768px){.band{padding-block:var(--section-y)}}
.band--dark{background:var(--ink-900)}
.band--darker{background:var(--ink-950)}
.band--light{background:var(--sand-50);color:var(--sand-700)}
.band--light h1,.band--light h2,.band--light h3,.band--light h4{color:var(--ink-900)}
.band--light .lede{color:var(--sand-700)}
.band--light .kicker{color:var(--orange-deep)}
/* Faint dot texture so no surface is a flat fill */
.band--dark::before,.band--darker::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;
  background-image:radial-gradient(hsl(38 40% 60% / .06) 1px,transparent 1px);
  background-size:22px 22px}
.band>*{position:relative}
.head{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-12)}

/* --------------------------------------------------------------- buttons -- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;text-decoration:none;
  padding:var(--btn-y) var(--btn-x);border-radius:var(--radius-sm);border:2px solid transparent;
  cursor:pointer;min-height:48px;
  transition:transform .12s ease,box-shadow .12s ease,background-color .18s ease,
             color .18s ease,border-color .18s ease;
}
.btn .ico{width:18px;height:18px}
.btn--primary{background:var(--yellow);color:var(--ink-950);box-shadow:var(--shadow-sm);
  border-color:var(--yellow-bright)}
.btn--primary:hover{background:var(--yellow-bright);transform:translateY(-2px);
  box-shadow:var(--shadow-md)}
.btn--primary:active{transform:translateY(1px);box-shadow:var(--shadow-xs);
  background:var(--yellow-deep)}
.btn--ghost{background:transparent;color:var(--sand-50);border-color:var(--ink-600)}
.btn--ghost:hover{border-color:var(--yellow);color:var(--yellow);transform:translateY(-2px)}
.btn--ghost:active{transform:translateY(1px)}
.band--light .btn--ghost{color:var(--ink-900);border-color:var(--sand-200)}
.band--light .btn--ghost:hover{border-color:var(--orange-deep);color:var(--orange-deep)}
.btn--dark{background:var(--ink-900);color:var(--sand-50);border-color:var(--ink-900)}
.btn--dark:hover{background:var(--ink-800);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn--dark:active{transform:translateY(1px)}
.btn--lg{font-size:var(--text-base);padding:var(--space-4) var(--space-8);min-height:56px}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-3)}

:where(a,button,summary,input,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--yellow-bright);outline-offset:3px;border-radius:var(--radius-sm)}
.band--light :where(a,button):focus-visible{outline-color:var(--orange-deep)}

.skip{position:absolute;left:var(--space-4);top:-100px;z-index:200;background:var(--yellow);
  color:var(--ink-950);padding:var(--space-3) var(--space-4);font-weight:var(--weight-bold);
  border-radius:var(--radius-sm);transition:top .2s ease}
.skip:focus{top:var(--space-4)}

/* ---------------------------------------------------------------- header -- */
.hdr{position:sticky;top:0;z-index:100;background:hsl(30 9% 7% / .92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--ink-700)}
.hdr__in{display:flex;align-items:center;gap:var(--space-4);min-height:72px}
.brand{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;
  margin-right:auto;padding-block:var(--space-2)}
.brand img{width:44px;height:44px;border-radius:var(--radius-full)}
.brand__name{font-family:var(--font-display);font-size:var(--text-xl);color:var(--sand-50);
  text-transform:uppercase;letter-spacing:var(--tracking-tight);line-height:1}
.brand__tag{display:block;font-family:var(--font-body);font-size:10px;
  letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--yellow);
  font-weight:var(--weight-bold);margin-top:3px}
.nav{display:none;align-items:center;gap:var(--space-6)}
@media(min-width:900px){.nav{display:flex}}
.nav a{position:relative;text-decoration:none;color:var(--text-secondary);
  font-size:var(--text-sm);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;padding-block:var(--space-2);
  transition:color .2s ease}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;
  border-radius:var(--radius-full);
  background:linear-gradient(90deg,var(--red),var(--orange),var(--yellow));
  transition:width .25s ease}
.nav a:hover{color:var(--sand-50)}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%}
.nav a[aria-current="page"]{color:var(--sand-50)}
.hdr .btn--primary{display:none}
@media(min-width:900px){.hdr .btn--primary{display:inline-flex}}
.burger{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;
  background:transparent;border:2px solid var(--ink-600);border-radius:var(--radius-sm);
  color:var(--sand-50);cursor:pointer;transition:border-color .2s ease,color .2s ease}
.burger:hover{border-color:var(--yellow);color:var(--yellow)}
.burger .ico{width:24px;height:24px}
@media(min-width:900px){.burger{display:none}}

.drawer{position:fixed;inset:0;z-index:150;background:var(--ink-950);
  display:flex;flex-direction:column;padding:var(--space-6);
  transform:translateY(-100%);visibility:hidden;transition:transform .32s ease,visibility .32s}
.drawer[data-open="true"]{transform:translateY(0);visibility:visible}
.drawer__top{display:flex;justify-content:flex-end}
.drawer__nav{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-8)}
.drawer__nav a{font-family:var(--font-display);font-size:var(--text-3xl);
  text-transform:uppercase;letter-spacing:var(--tracking-tight);text-decoration:none;
  color:var(--sand-50);padding-block:var(--space-3);border-bottom:1px solid var(--ink-800)}
.drawer__nav a[aria-current="page"]{color:var(--yellow)}
.drawer__foot{margin-top:auto;display:grid;gap:var(--space-3)}

/* ------------------------------------------------------------------ hero -- */
.hero{position:relative;overflow:hidden;background:var(--ink-950);
  padding-block:var(--space-16) var(--space-16)}
@media(min-width:768px){.hero{padding-block:var(--space-24)}}
/* Animated warm glow. Stands in for a background video until footage exists. */
.hero__glow{position:absolute;inset:-30% -10% auto -10%;height:120%;pointer-events:none;
  background:
    radial-gradient(48% 42% at 22% 32%,hsl(28 90% 50% / .30),transparent 70%),
    radial-gradient(40% 36% at 78% 18%,hsl(44 93% 54% / .22),transparent 70%),
    radial-gradient(52% 46% at 62% 82%,hsl(4 79% 47% / .24),transparent 72%);
  background-size:200% 200%;animation:glowDrift 18s ease-in-out infinite}
@keyframes glowDrift{0%{background-position:0% 50%}50%{background-position:100% 50%}
  100%{background-position:0% 50%}}
.hero__in{display:grid;gap:var(--space-12);align-items:center}
@media(min-width:900px){.hero__in{grid-template-columns:1.15fr .85fr;gap:var(--space-16)}}
.hero__copy{display:flex;flex-direction:column;gap:var(--space-6);align-items:flex-start}
.hero h1{font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  letter-spacing:var(--tracking-tight);line-height:.94;font-size:clamp(2.75rem,11vw,3.25rem)}
@media(min-width:768px){.hero h1{font-size:clamp(3.5rem,6.4vw,5rem)}}
.hero h1 .accent{color:var(--yellow);display:block}
.hero .swoosh{width:220px;margin-top:calc(var(--space-2) * -1)}
.hero__facts{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.chip{display:inline-flex;align-items:center;gap:var(--space-2);
  background:hsl(30 8% 13% / .9);border:1px solid var(--ink-700);
  color:var(--text-secondary);border-radius:var(--radius-full);
  padding:var(--space-2) var(--space-4);font-size:var(--text-sm);
  font-weight:var(--weight-semibold)}
.chip .ico{width:16px;height:16px;color:var(--yellow)}
.chip--open{border-color:var(--yellow-deep);color:var(--sand-50)}

/* Photo card sits at its native pixel size so nothing is upscaled */
.hero__art{justify-self:center;position:relative;width:min(100%,368px)}
.hero__art img{width:100%;border-radius:var(--radius-md);box-shadow:var(--shadow-xl);
  border:1px solid var(--ink-700)}
.hero__art::after{content:"";position:absolute;inset:auto -14px -14px auto;width:64%;height:58%;
  border-right:4px solid var(--yellow);border-bottom:4px solid var(--yellow);
  border-radius:0 0 var(--radius-md) 0;z-index:-1}
/* Second photo breaks the frame for depth. Desktop only so mobile stays clean. */
.hero__art2{display:none}
@media(min-width:1100px){
  .hero__art2{display:block;position:absolute;left:-84px;bottom:-56px;width:172px;
    border:5px solid var(--ink-950);border-radius:var(--radius-md);overflow:hidden;
    box-shadow:var(--shadow-xl);transform:rotate(-3deg)}
  .hero__art2 img{width:100%;height:auto;display:block}
}
.hero__badge{position:absolute;left:-12px;top:-16px;background:var(--red);color:var(--sand-50);
  font-family:var(--font-display);text-transform:uppercase;font-size:var(--text-sm);
  letter-spacing:var(--tracking-wide);padding:var(--space-2) var(--space-4);
  border-radius:var(--radius-sm);box-shadow:var(--shadow-md);transform:rotate(-4deg)}

/* --------------------------------------------------------------- marquee -- */
.ticker{background:var(--yellow);color:var(--ink-950);overflow:hidden;
  padding-block:var(--space-3);border-block:3px solid var(--ink-950)}
.ticker__track{display:flex;width:max-content;animation:slide 38s linear infinite}
.ticker__set{display:flex;align-items:center;flex-shrink:0}
.ticker span{font-family:var(--font-display);text-transform:uppercase;
  font-size:var(--text-lg);letter-spacing:var(--tracking-wide);padding-inline:var(--space-4);
  display:inline-flex;align-items:center;gap:var(--space-4);white-space:nowrap}
.ticker span::after{content:"";width:9px;height:9px;border-radius:var(--radius-full);
  background:var(--red)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker:hover .ticker__track{animation-play-state:paused}

/* ----------------------------------------------------------------- cards -- */
.grid{display:grid;gap:var(--gap-cards);grid-template-columns:1fr}
@media(min-width:600px){.grid--3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.grid--3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:600px){.grid--2{grid-template-columns:repeat(2,1fr)}}

.card{background:var(--ink-850);border:1px solid var(--ink-700);border-radius:var(--radius-md);
  overflow:hidden;display:flex;flex-direction:column;text-decoration:none;
  box-shadow:var(--shadow-sm);position:relative;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--red),var(--orange),var(--yellow));
  opacity:0;transition:opacity .25s ease;z-index:2}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--ink-600)}
.card:hover::before{opacity:1}
.card__media{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--ink-800)}
.card__media img{width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease,filter .5s ease;filter:saturate(1.04)}
.card:hover .card__media img{transform:scale(1.05)}
.card__body{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-2);
  flex:1}
.card__title{font-family:var(--font-display);font-size:var(--text-xl);text-transform:uppercase;
  letter-spacing:var(--tracking-tight);color:var(--sand-50)}
.card__text{font-size:var(--text-sm);color:var(--text-tertiary);
  line-height:var(--leading-snug)}
.card__more{margin-top:auto;padding-top:var(--space-3);font-size:var(--text-xs);
  font-weight:var(--weight-bold);letter-spacing:var(--tracking-widest);text-transform:uppercase;
  color:var(--yellow);display:inline-flex;align-items:center;gap:var(--space-2)}
.card__more .ico{width:15px;height:15px;transition:transform .25s ease}
.card:hover .card__more .ico{transform:translateX(4px)}

/* Branded tiles for items with no photograph supplied yet */
.tile{border-radius:var(--radius-md);border:1px solid var(--ink-700);
  background:
    repeating-linear-gradient(135deg,hsl(30 8% 13%) 0 12px,hsl(30 8% 15%) 12px 24px);
  padding:var(--space-8) var(--space-6);display:flex;flex-direction:column;
  gap:var(--space-3);align-items:flex-start;justify-content:center;min-height:150px}
.tile__name{font-family:var(--font-display);font-size:var(--text-xl);text-transform:uppercase;
  letter-spacing:var(--tracking-tight);color:var(--sand-50)}
.tile__note{font-size:var(--text-xs);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--orange)}

/* ----------------------------------------------------------------- story -- */
.split{display:grid;gap:var(--space-12);align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;gap:var(--space-16)}}
.split__art img{width:100%;border-radius:var(--radius-md);border:1px solid var(--ink-700);
  box-shadow:var(--shadow-lg)}
.band--light .split__art img{border-color:var(--sand-200)}
.quote{border-left:5px solid var(--yellow);padding-left:var(--space-6);
  font-family:var(--font-display);font-size:var(--text-2xl);text-transform:uppercase;
  letter-spacing:var(--tracking-tight);line-height:var(--leading-tight);color:var(--sand-50)}
.band--light .quote{color:var(--ink-900);border-left-color:var(--orange)}

/* -------------------------------------------------------------- location -- */
.loc{display:grid;gap:var(--space-8)}
@media(min-width:900px){.loc{grid-template-columns:1fr 1.1fr;gap:var(--space-12);
  align-items:start}}
.panel{background:var(--sand-100);border:1px solid var(--sand-200);
  border-radius:var(--radius-md);padding:var(--space-8);box-shadow:var(--shadow-sm)}
.band--dark .panel{background:var(--ink-850);border-color:var(--ink-700)}
.panel__row{display:flex;gap:var(--space-4);padding-block:var(--space-4);
  border-bottom:1px solid var(--sand-200)}
.band--dark .panel__row{border-bottom-color:var(--ink-700)}
.panel__row:last-of-type{border-bottom:0}
.panel__row .ico{width:20px;height:20px;flex-shrink:0;margin-top:2px;color:var(--orange-deep)}
.band--dark .panel__row .ico{color:var(--yellow)}
.panel__label{font-size:var(--text-xs);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--sand-500);
  margin-bottom:2px}
.panel__value{font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--ink-900);
  text-decoration:none;line-height:var(--leading-snug)}
a.panel__value{display:inline-flex;align-items:center;min-height:44px;padding-block:var(--space-1)}
.band--dark .panel__value{color:var(--sand-50)}
a.panel__value{transition:color .2s ease}
a.panel__value:hover{color:var(--orange-deep)}
.band--dark a.panel__value:hover{color:var(--yellow)}

.hours{width:100%;border-collapse:collapse;font-size:var(--text-base)}
.hours th{text-align:left;font-weight:var(--weight-semibold);color:var(--sand-700);
  padding:var(--space-2) 0;font-size:var(--text-base)}
.band--dark .hours th{color:var(--text-secondary)}
.hours td{text-align:right;padding:var(--space-2) 0;font-variant-numeric:tabular-nums;
  color:var(--ink-900);font-weight:var(--weight-semibold)}
.band--dark .hours td{color:var(--sand-50)}
.hours tr+tr th,.hours tr+tr td{border-top:1px solid var(--sand-200)}
.band--dark .hours tr+tr th,.band--dark .hours tr+tr td{border-top-color:var(--ink-700)}
.hours .closed{color:var(--red)}
.map{border:0;width:100%;aspect-ratio:4/3;border-radius:var(--radius-md);
  background:var(--ink-800);filter:saturate(.9)}
.map-frame{border:1px solid var(--sand-200);border-radius:var(--radius-md);overflow:hidden;
  box-shadow:var(--shadow-sm)}
.band--dark .map-frame{border-color:var(--ink-700)}

/* ---------------------------------------------------------------- social -- */
.photos{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}
@media(min-width:700px){.photos{grid-template-columns:repeat(3,1fr)}}
.photos img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius-md);
  border:1px solid var(--ink-700);transition:transform .3s ease,filter .3s ease}
.photos a{display:block;border-radius:var(--radius-md)}
.photos a:hover img{transform:scale(1.03);filter:brightness(1.08)}

/* ------------------------------------------------------------- cta ribbon -- */
.ribbon{background:linear-gradient(105deg,var(--red-deep),var(--red) 42%,var(--orange) 100%);
  color:var(--sand-50);text-align:center;padding-block:var(--space-16);position:relative;
  overflow:hidden}
.ribbon::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:repeating-linear-gradient(115deg,hsl(0 0% 100% / .05) 0 2px,
    transparent 2px 16px)}
.ribbon .wrap{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:var(--space-6)}
.ribbon h2{color:var(--sand-50)}
.ribbon p{color:hsl(38 70% 94%);max-width:52ch}
.ribbon .btn--primary{border-color:var(--sand-50)}

/* ---------------------------------------------------------------- footer -- */
.ftr{background:var(--ink-950);border-top:1px solid var(--ink-800);
  padding-block:var(--space-16) var(--space-8)}
.ftr__grid{display:grid;gap:var(--space-8)}
@media(min-width:760px){.ftr__grid{grid-template-columns:1.4fr 1fr 1fr}}
.ftr h3{font-family:var(--font-display);font-size:var(--text-base);text-transform:uppercase;
  letter-spacing:var(--tracking-wide);color:var(--sand-50);margin-bottom:var(--space-4)}
.ftr a{color:var(--text-tertiary);text-decoration:none;transition:color .2s ease}
/* Comfortable thumb targets for the footer link lists */
.ftr ul a{display:inline-block;padding-block:10px;min-height:24px}
.ftr a:hover{color:var(--yellow)}
.ftr li+li{margin-top:2px}
.ftr__brand{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}
.ftr__brand img{width:52px;height:52px;border-radius:var(--radius-full)}
.socials{display:flex;gap:var(--space-3);margin-top:var(--space-4)}
.socials a{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border:1px solid var(--ink-700);border-radius:var(--radius-sm);color:var(--sand-300);
  transition:all .2s ease}
.socials a:hover{border-color:var(--yellow);color:var(--yellow);transform:translateY(-2px)}
.socials .ico{width:20px;height:20px}
.ftr__base a{display:inline-block;padding-block:6px}
.ftr__base{margin-top:var(--space-12);padding-top:var(--space-6);
  border-top:1px solid var(--ink-800);display:flex;flex-wrap:wrap;gap:var(--space-3);
  justify-content:space-between;font-size:var(--text-sm);color:var(--sand-500)}

/* ------------------------------------------------------------ action bar -- */
.actionbar{position:fixed;left:0;right:0;bottom:0;z-index:120;display:grid;
  grid-template-columns:repeat(3,1fr);background:var(--ink-950);
  border-top:1px solid var(--ink-700);box-shadow:var(--shadow-lg);
  padding-bottom:env(safe-area-inset-bottom)}
.actionbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;min-height:var(--bar-h);text-decoration:none;color:var(--sand-300);
  font-size:11px;font-weight:var(--weight-bold);letter-spacing:var(--tracking-wide);
  text-transform:uppercase;transition:color .2s ease,background-color .2s ease}
.actionbar a+a{border-left:1px solid var(--ink-800)}
.actionbar a:hover,.actionbar a:active{color:var(--yellow);background:var(--ink-900)}
.actionbar .ico{width:21px;height:21px}
@media(min-width:900px){.actionbar{display:none}}
@media(max-width:899px){body{padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom))}}

/* ------------------------------------------------------------ page header -- */
.phead{background:var(--ink-950);padding-block:var(--space-12) var(--space-12);
  position:relative;overflow:hidden;border-bottom:1px solid var(--ink-800)}
.phead::before{content:"";position:absolute;inset:0;opacity:.55;
  background:radial-gradient(60% 90% at 82% 20%,hsl(28 90% 50% / .22),transparent 70%)}
.phead .wrap{position:relative;display:flex;flex-direction:column;gap:var(--space-3);
  align-items:flex-start}
.crumb{font-size:var(--text-xs);letter-spacing:var(--tracking-widest);text-transform:uppercase;
  color:var(--sand-500);font-weight:var(--weight-bold)}
.crumb a{color:var(--sand-400);text-decoration:none;display:inline-block;padding:8px 2px}
.crumb a:hover{color:var(--yellow)}

/* ------------------------------------------------------------- menu page -- */
.catnav{position:sticky;top:72px;z-index:80;background:hsl(30 10% 4% / .96);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--ink-800);
  padding-block:var(--space-3)}
.catnav__scroll{display:flex;gap:var(--space-2);overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
.catnav__scroll::-webkit-scrollbar{display:none}
.catnav a{flex-shrink:0;text-decoration:none;font-size:var(--text-sm);
  font-weight:var(--weight-bold);letter-spacing:var(--tracking-wide);text-transform:uppercase;
  color:var(--text-tertiary);border:1px solid var(--ink-700);border-radius:var(--radius-full);
  padding:var(--space-2) var(--space-4);min-height:40px;display:inline-flex;align-items:center;
  transition:all .2s ease}
.catnav a:hover{color:var(--ink-950);background:var(--yellow);border-color:var(--yellow)}

.mgroup+.mgroup{margin-top:var(--space-16)}
.mgroup__head{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-2)}
.mgroup__thumb{width:72px;height:72px;object-fit:cover;border-radius:var(--radius-md);
  border:1px solid var(--ink-700);flex-shrink:0}
@media(min-width:768px){.mgroup__thumb{width:92px;height:92px}}
.mgroup__note{font-size:var(--text-sm);color:var(--text-tertiary)}
.mgroup .swoosh{width:140px;margin-bottom:var(--space-8)}
.mcards{display:grid;gap:var(--gap-cards);grid-template-columns:1fr}
@media(min-width:640px){.mcards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.mcards{grid-template-columns:repeat(3,1fr)}}
.mcard{background:var(--ink-850);border:1px solid var(--ink-700);
  border-radius:var(--radius-md);padding:var(--space-6);box-shadow:var(--shadow-sm);
  border-top:4px solid var(--orange)}
.mcard__label{font-family:var(--font-display);font-size:var(--text-2xl);
  text-transform:uppercase;letter-spacing:var(--tracking-tight);color:var(--yellow);
  margin-bottom:var(--space-1)}
.mcard__sub{font-size:var(--text-xs);color:var(--text-tertiary);margin-bottom:var(--space-4);
  line-height:var(--leading-snug)}
.mrow{display:flex;align-items:baseline;gap:var(--space-3);padding-block:var(--space-3)}
.mrow+.mrow{border-top:1px solid var(--ink-800)}
.mrow__name{font-weight:var(--weight-semibold);color:var(--sand-100);font-size:var(--text-base)}
.mrow__dots{flex:1;border-bottom:1px dotted var(--ink-600);transform:translateY(-4px)}
.mrow__price{font-family:var(--font-display);font-size:var(--text-lg);color:var(--sand-50);
  font-variant-numeric:tabular-nums;letter-spacing:var(--tracking-normal)}
.sauces{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.sauce{display:inline-flex;align-items:center;gap:var(--space-2);border-radius:var(--radius-full);
  border:1px solid var(--ink-600);padding:var(--space-2) var(--space-4);
  font-weight:var(--weight-semibold);color:var(--sand-100);font-size:var(--text-sm)}
.notice{border-left:4px solid var(--yellow);background:var(--ink-850);
  padding:var(--space-4) var(--space-6);border-radius:0 var(--radius-md) var(--radius-md) 0;
  font-size:var(--text-sm);color:var(--text-secondary);margin-top:var(--space-8)}
.band--light .notice{background:var(--sand-100);color:var(--sand-700);
  border-left-color:var(--orange)}

/* ------------------------------------------------------------- reveals ----- */
/* Hidden only when scripting is available, so a no JS visitor still sees
   every section. The .js class is set by an inline script in the head. */
.js .reveal{opacity:0;transform:translateY(30px);
  transition:opacity .6s ease,transform .6s ease}
.js .reveal.visible{opacity:1;transform:none}
.js .reveal-group>*{opacity:0;transform:translateY(30px);
  transition:opacity .6s ease,transform .6s ease}
.js .reveal-group.visible>*{opacity:1;transform:none}
.js .reveal-group.visible>*:nth-child(1){transition-delay:0s}
.js .reveal-group.visible>*:nth-child(2){transition-delay:.08s}
.js .reveal-group.visible>*:nth-child(3){transition-delay:.16s}
.js .reveal-group.visible>*:nth-child(4){transition-delay:.24s}
.js .reveal-group.visible>*:nth-child(5){transition-delay:.32s}
.js .reveal-group.visible>*:nth-child(6){transition-delay:.4s}

/* Parallax layers, driven by main.js and switched off on small screens */
.par{will-change:transform}

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