/* ==========================================================================
   indoo: shared stylesheet
   Extracted from the original single-page build so every page shares one
   cached file. Edit here, not in the HTML.
   ========================================================================== */

:root{
  --green:#166244; --deep:#0E3D2B; --saffron:#FE8946; --cream:#FDF1E4; --chilli:#B4441A;
  --herb:#3E9A68; --rice:#F3E2CC;
  --bg-light:var(--cream); --ink-light:var(--deep); --accent-ink:var(--chilli); --head-light:var(--green);
  --line-light:rgba(14,61,43,.16);
  --font-head:"Outfit","Outfit Fallback","Trebuchet MS",system-ui,sans-serif;
  --font-body:"DM Sans","DM Sans Fallback","Helvetica Neue",Arial,system-ui,sans-serif;
  --wrap:1240px; --pad:clamp(20px,5vw,64px);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  background:var(--green);
}

/* Fallback metrics tuned to the webfonts so swapping in Outfit / DM Sans
   does not shift layout. Protects CLS while fonts load. */
@font-face{
  font-family:"Outfit Fallback";
  src:local("Trebuchet MS"),local("Arial");
  size-adjust:97%;
  ascent-override:95%;
  descent-override:25%;
  line-gap-override:0%;
}
@font-face{
  font-family:"DM Sans Fallback";
  src:local("Helvetica Neue"),local("Arial");
  size-adjust:100%;
  ascent-override:97%;
  descent-override:24%;
  line-gap-override:0%;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg-light:#0B3324; --ink-light:var(--cream); --accent-ink:var(--saffron); --head-light:var(--cream);
    --line-light:rgba(253,241,228,.16); --rice:#E9D6BC;
  }
}
:root[data-theme="dark"]{
  --bg-light:#0B3324; --ink-light:var(--cream); --accent-ink:var(--saffron); --head-light:var(--cream);
  --line-light:rgba(253,241,228,.16); --rice:#E9D6BC;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 84px)}
body{margin:0;background:var(--green);color:var(--cream);font-family:var(--font-body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
img{height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--saffron);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* skip link: keyboard users land on content, not the nav */
.skip{position:absolute;left:12px;top:-60px;z-index:60;background:var(--saffron);color:var(--deep);font-family:var(--font-head);font-weight:700;padding:12px 20px;border-radius:0 0 14px 14px;text-decoration:none;transition:top .18s}
.skip:focus{top:0}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;font-family:var(--font-head);font-weight:700;font-size:18px;text-decoration:none;border:0;cursor:pointer;transition:transform .15s ease,background-color .15s ease}
.btn:active{transform:scale(.97)}
.btn-order{background:var(--saffron);color:var(--deep)}
.btn-order:hover{background:#FF9A5E}
.btn-ghost{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 2px rgba(253,241,228,.55)}
.btn-ghost:hover{box-shadow:inset 0 0 0 2px var(--cream)}
.btn-dark{background:var(--deep);color:var(--cream)}
.btn-dark:hover{background:#082a1d}
.light .btn-ghost{color:var(--ink-light);box-shadow:inset 0 0 0 2px var(--line-light)}
.light .btn-ghost:hover{box-shadow:inset 0 0 0 2px var(--ink-light)}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--green);transition:box-shadow .2s}
.top.scrolled{box-shadow:0 6px 18px -10px rgba(5,25,17,.55)}
.top-in{display:flex;align-items:center;gap:28px;height:76px}
.brand{display:block;line-height:0}
.brand svg{width:112px;height:auto}
.nav{display:flex;gap:26px;margin-left:auto;font-family:var(--font-head);font-weight:600;font-size:17px}
.nav a{text-decoration:none;opacity:.9;padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover{opacity:1;border-color:var(--saffron)}
.nav a[aria-current="page"]{opacity:1;border-color:var(--saffron)}
.top .btn{min-height:44px;padding:0 22px;font-size:16px}

/* mobile nav: the original hid navigation entirely below 720px, which left
   phone users (most of the traffic) with no way to reach other pages. */
.nav-toggle{display:none;appearance:none;border:0;background:transparent;color:var(--cream);padding:10px;min-height:44px;min-width:44px;cursor:pointer;border-radius:12px}
.nav-toggle svg{width:24px;height:24px;display:block}
.nav-toggle[aria-expanded="true"] .i-open,.nav-toggle[aria-expanded="false"] .i-close{display:none}
@media (max-width:860px){
  .nav-toggle{display:grid;place-items:center;order:3;margin-left:6px}
  .top .btn-order{order:2;margin-left:auto}
  .nav{position:fixed;inset:calc(env(safe-area-inset-top,0px) + 76px) 0 auto 0;margin:0;flex-direction:column;gap:0;background:var(--deep);padding:8px var(--pad) 24px;font-size:20px;box-shadow:0 20px 30px -18px rgba(0,0,0,.6);max-height:calc(100dvh - 76px);overflow:auto}
  .nav[hidden]{display:none}
  .nav a{padding:16px 0;border-bottom:1.5px solid rgba(253,241,228,.14)}
  .nav a:hover,.nav a[aria-current="page"]{border-color:rgba(253,241,228,.14);color:var(--saffron)}
  .brand svg{width:96px}
}
@media (min-width:861px){.nav[hidden]{display:flex}}

/* hero: home */
.hero{position:relative;overflow:hidden;padding:clamp(28px,6vw,72px) 0 clamp(44px,6vw,80px)}
.hero h1{margin:0;font-family:var(--font-head);font-weight:700;color:var(--cream);letter-spacing:-.02em}
.hero .lead-in{display:block;font-size:clamp(26px,4.6vw,66px);line-height:1.02;font-weight:600;max-width:15ch}
/* the display line measures about 4.02em: the logo mark (2.317em) plus the
   gap (.18em) plus "you" (about 1.52em at this tracking). the divisor is
   4.15 rather than 4.02 to leave roughly 3% of slack, which covers the two
   ways the line can end up wider than the box it has to fit:
     - 100vw includes the classic desktop scrollbar but the .wrap it sits in
       does not, so the formula sees up to ~17px more room than really exists
     - if Outfit has not loaded yet, "you" is set in a fallback face that may
       be wider than 1.52em
   if you ever change the slogan, retune the divisor to the new line width
   plus that slack so the line still fills one row without wrapping. */
.hero .word{display:flex;align-items:baseline;gap:.18em;font-size:min(calc((min(100vw, 1240px) - 2 * var(--pad)) / 4.15), 290px);line-height:.86;letter-spacing:-.055em;margin-top:.06em;white-space:nowrap}
/* the word "indoo" is the logo itself. the logo art is 787x265, and the
   letter baseline sits 1.9% above the bottom of that box, so the mark is
   nudged down by that much to sit on the same baseline as "you".
   height .78em makes the logo x-height match Outfit's, which lands the
   width at 2.317em: the same width the text "indoo" occupied, so the
   divisor above still fills the row. */
.hero .word-mark{flex:none;height:.78em;width:2.317em;transform:translateY(.015em)}
.hero .word-you{flex:none}
.hero .kicker,.phero .kicker{display:block;margin:0 0 14px;font-family:var(--font-head);font-weight:600;font-size:clamp(15px,1.4vw,18px);letter-spacing:.14em;text-transform:uppercase;color:var(--saffron)}
.bowl{display:inline-block;width:.6em;height:.6em;margin-left:.015em;vertical-align:-.02em;transform-origin:50% 50%}
.bowl + .bowl{margin-left:.03em}
.hero-foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px;margin-top:clamp(28px,4vw,48px)}
.hero-foot p{margin:0;max-width:34ch;font-size:clamp(18px,1.7vw,22px);line-height:1.45;color:rgba(253,241,228,.92)}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
@media (prefers-reduced-motion:no-preference){
  .bowl{animation:bowl-in .9s cubic-bezier(.2,.9,.25,1.15) both}
  .bowl + .bowl{animation-delay:.12s}
  @keyframes bowl-in{from{transform:scale(.4) rotate(-120deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
}

/* hero: inner pages */
.phero{padding:clamp(24px,4vw,44px) 0 clamp(40px,6vw,68px)}
.phero h1{margin:0;font-family:var(--font-head);font-weight:700;font-size:clamp(42px,7.4vw,104px);line-height:.95;letter-spacing:-.035em;color:var(--cream);max-width:20ch}
.phero h1 span{color:var(--saffron)}
.phero .standfirst{margin:clamp(20px,2.4vw,28px) 0 0;max-width:46ch;font-size:clamp(18px,1.8vw,23px);line-height:1.45;color:rgba(253,241,228,.92)}
.phero .ctas{margin-top:clamp(26px,3vw,36px)}

/* breadcrumbs */
.crumbs{font-family:var(--font-head);font-weight:600;font-size:15px;padding:18px 0 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;color:rgba(253,241,228,.7)}
.crumbs li{display:flex;align-items:center;gap:8px}
.crumbs li+li::before{content:"/";opacity:.5}
.crumbs a{text-decoration:none;border-bottom:2px solid transparent}
.crumbs a:hover{border-color:var(--saffron)}
.crumbs [aria-current="page"]{color:var(--saffron)}
.light .crumbs ol{color:rgba(14,61,43,.65)}
.light .crumbs [aria-current="page"]{color:var(--accent-ink)}

/* ticker
   the loop is two identical .ticker-set children scrolled to -50%, so the
   second set is exactly under the first when the cycle restarts and the
   jump back is invisible. the 34px internal gap is matched across the seam
   by 17px of right padding plus 17px of left padding, so the spacing never
   changes as it wraps. keep both of those numbers in step.

   the transform is promoted to its own compositor layer (translate3d,
   will-change, backface-visibility) so the browser rasterises the strip
   once instead of re-painting the text on every cycle. without this the
   strip stutters at the wrap point after a few rotations. contain:paint
   tells the browser nothing inside can affect layout outside the strip. */
.ticker{background:var(--saffron);color:var(--deep);overflow:hidden;border-block:3px solid var(--deep);contain:paint}
.ticker-track{display:flex;width:max-content;gap:0;will-change:transform;backface-visibility:hidden;transform:translate3d(0,0,0)}
.ticker-set{display:flex;align-items:center;gap:34px;padding:16px 17px;font-family:var(--font-head);font-weight:700;font-size:clamp(20px,2.4vw,30px);white-space:nowrap}
.ticker-set svg{width:22px;height:24px;flex:none}
@media (prefers-reduced-motion:no-preference){
  .ticker-track{animation:tick 38s linear infinite}
  @keyframes tick{
    from{transform:translate3d(0,0,0)}
    to{transform:translate3d(-50%,0,0)}
  }
}

/* light sections */
.light{background:var(--bg-light);color:var(--ink-light)}
.section{padding:clamp(64px,9vw,120px) 0}
.section-sm{padding:clamp(44px,6vw,80px) 0}
.h2{margin:0;font-family:var(--font-head);font-weight:700;font-size:clamp(40px,6vw,80px);line-height:.98;letter-spacing:-.03em}
.light .h2{color:var(--head-light)}
.h3{margin:0;font-family:var(--font-head);font-weight:700;font-size:clamp(26px,3vw,38px);line-height:1.05;letter-spacing:-.02em}
.light .h3{color:var(--head-light)}
.lede{font-size:clamp(18px,1.7vw,22px);line-height:1.5;max-width:46ch}

/* menu */
.menu-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:24px 48px}
.menu-head p{margin:14px 0 0;max-width:42ch;font-size:18px}
.tabs{display:flex;flex-wrap:wrap;gap:8px;background:rgba(22,98,68,.08);padding:6px;border-radius:999px}
.tab{white-space:nowrap;appearance:none;border:0;background:transparent;color:inherit;font-family:var(--font-head);font-weight:600;font-size:17px;padding:10px 20px;border-radius:999px;cursor:pointer;min-height:44px}
.tab[aria-selected="true"]{background:var(--green);color:var(--cream)}
.tab:not([aria-selected="true"]):hover{background:rgba(22,98,68,.12)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tabs{background:rgba(253,241,228,.08)} :root:not([data-theme="light"]) .tab[aria-selected="true"]{background:var(--saffron);color:var(--deep)}}
:root[data-theme="dark"] .tabs{background:rgba(253,241,228,.08)}
:root[data-theme="dark"] .tab[aria-selected="true"]{background:var(--saffron);color:var(--deep)}
@media (max-width:820px){.menu-head{grid-template-columns:1fr}.tabs{justify-self:start;max-width:100%;flex-wrap:wrap;border-radius:26px}}

.panel{margin-top:clamp(36px,5vw,56px)}
.panel[hidden]{display:none}
.star{display:grid;grid-template-columns:auto 1fr auto;gap:12px 36px;align-items:center;background:var(--green);color:var(--cream);border-radius:28px;padding:clamp(24px,3.4vw,40px);margin-bottom:12px}
.star .bowl-lg{width:clamp(96px,11vw,140px);height:auto}
.star h3{margin:0;font-family:var(--font-head);font-weight:700;font-size:clamp(28px,3.4vw,42px);line-height:1.05;letter-spacing:-.02em}
.star h3 span{color:var(--saffron)}
.star p{margin:8px 0 0;max-width:46ch;color:rgba(253,241,228,.9)}
.star .price{font-family:var(--font-head);font-weight:700;font-size:clamp(28px,3vw,38px)}
.light .star .heat i{border-color:var(--saffron)}
.star .heat{margin-top:8px}
@media (max-width:640px){.star{grid-template-columns:1fr}.star .bowl-lg{width:88px}.star > div:last-child{display:flex;align-items:center;gap:16px}.star .heat{margin-top:0}.tab{padding:10px 11px;font-size:15px}.tabs{gap:0;padding:5px}
.hero{padding:40px 0 52px}.hero .lead-in{font-size:32px}}

.items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:56px}
@media (max-width:820px){.items{grid-template-columns:1fr}}
.item{align-content:start;display:grid;grid-template-columns:1fr auto;gap:4px 20px;padding:22px 0;border-bottom:1.5px dashed var(--line-light)}
.item h3{margin:0;font-family:var(--font-head);font-weight:600;font-size:22px;line-height:1.2}
.item .price{font-family:var(--font-head);font-weight:700;font-size:22px}
.item p{grid-column:1/-1;margin:0;font-size:16px;opacity:.85;max-width:48ch}
.meta{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:6px}
.tag{font-family:var(--font-head);font-weight:600;font-size:13px;padding:3px 10px;border-radius:999px;box-shadow:inset 0 0 0 1.5px currentColor;color:var(--accent-ink)}
.light .tag.vg,.light .tag.v{color:var(--head-light)}
.heat{display:inline-flex;gap:4px;align-items:center}
.heat i{width:14px;height:14px;border-radius:50%;border:3.5px solid var(--saffron);display:block;opacity:.3}
.heat i.on{opacity:1}
.light .heat i{border-color:var(--chilli)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .light .heat i{border-color:var(--saffron)}}
:root[data-theme="dark"] .light .heat i{border-color:var(--saffron)}
.menu-notes{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 32px;margin-top:40px;font-size:16px}
.menu-notes strong{font-family:var(--font-head);font-size:20px;color:var(--accent-ink)}
.menu-notes .key{display:flex;flex-wrap:wrap;gap:16px;align-items:center;opacity:.85}

.opts{font-family:var(--font-head);font-weight:600;font-size:15px;color:var(--accent-ink);margin-right:6px}
.choices{grid-column:1/-1;margin-top:4px}
.star .opts{color:var(--saffron);font-size:17px}
.star .choices{margin-top:10px}
.combo{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:12px;padding:18px 24px;border-radius:20px;background:var(--saffron);color:var(--deep);font-size:17px}
.combo strong{font-family:var(--font-head);font-size:22px}
.panel-intro{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-bottom:8px}
.panel-intro h3{margin:0;font-family:var(--font-head);font-weight:700;font-size:clamp(26px,3vw,36px);color:var(--head-light);letter-spacing:-.01em}
.badge{font-family:var(--font-head);font-weight:700;font-size:14px;padding:6px 14px;border-radius:999px;background:var(--saffron);color:var(--deep)}

/* menu page: full sections stacked, no tabs (every dish crawlable without JS) */
.course{padding-top:clamp(44px,6vw,72px)}
.course:first-of-type{padding-top:0}
.course > h2{margin:0 0 6px}
.course > p.lede{margin:0 0 8px}

/* story */
.story{background:var(--deep);color:var(--cream);position:relative;overflow:hidden}
.story-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.story .h2{color:var(--cream)}
.story .h2 span{color:var(--saffron)}
.story p{font-size:clamp(18px,1.6vw,21px);max-width:44ch;margin:0 0 18px;color:rgba(253,241,228,.9)}
.voice{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.voice li{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline;font-family:var(--font-head);font-weight:600;font-size:clamp(22px,2.4vw,30px);line-height:1.2;padding-bottom:14px;border-bottom:1.5px solid rgba(253,241,228,.14)}
.voice li span{font-size:15px;font-weight:600;color:var(--saffron);min-width:96px}
@media (max-width:860px){.story-grid{grid-template-columns:1fr}}

/* find us */
.find-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,56px);margin-top:clamp(36px,5vw,56px)}
.find-grid h2,.find-grid h3{margin:0 0 10px;font-family:var(--font-head);font-weight:700;font-size:22px;color:var(--accent-ink)}
.find-grid p{margin:0 0 6px;font-size:18px}
.hours{margin:0;display:grid;grid-template-columns:auto auto;justify-content:start;gap:4px 24px;font-size:18px}
.hours dt{font-weight:500}
.hours dd{margin:0}
.textlink{font-family:var(--font-head);font-weight:600;text-decoration:none;border-bottom:2px solid var(--saffron);padding-bottom:1px}
.textlink:hover{border-bottom-color:currentColor}
@media (max-width:820px){.find-grid{grid-template-columns:1fr}}

/* map embed: lazy, no layout shift */
.map{margin-top:clamp(32px,4vw,48px);border-radius:26px;overflow:hidden;border:3px solid var(--line-light);aspect-ratio:16/9;background:rgba(22,98,68,.08)}
.map iframe{display:block;width:100%;height:100%;border:0}
@media (max-width:700px){.map{aspect-ratio:4/3}}

/* cards grid: used for delivery areas, blog index, related links */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:clamp(16px,2vw,24px);margin-top:clamp(32px,4vw,48px);list-style:none;padding:0}
/* four-across variant: forces one row on desktop regardless of tile min-width */
.grid.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1040px){.grid.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.grid.grid-4{grid-template-columns:1fr}}
/* every li in a .grid holds exactly one .tile. the li already stretches to
   the full height of its grid row, but the anchor inside it did not, so a
   tile with less copy came out shorter than the ones beside it. making the
   li a flex container and letting the tile grow fills the row, which gives
   every tile in a row the same height and lines the "more" links up along
   the bottom edge (that is what margin-top:auto on .more is for). */
.grid > li{display:flex;min-width:0}
.tile{flex:1 1 auto;display:flex;flex-direction:column;gap:10px;background:rgba(22,98,68,.07);border-radius:24px;padding:clamp(22px,2.6vw,30px);text-decoration:none}
.tile:hover{background:rgba(22,98,68,.13)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tile{background:rgba(253,241,228,.07)}:root:not([data-theme="light"]) .tile:hover{background:rgba(253,241,228,.12)}}
:root[data-theme="dark"] .tile{background:rgba(253,241,228,.07)}
:root[data-theme="dark"] .tile:hover{background:rgba(253,241,228,.12)}
.tile h2,.tile h3{margin:0;font-family:var(--font-head);font-weight:700;font-size:23px;line-height:1.15;color:var(--head-light)}
.tile p{margin:0;font-size:16px;opacity:.85}
.tile .more{margin-top:auto;font-family:var(--font-head);font-weight:700;font-size:16px;color:var(--accent-ink)}
.tile time{font-family:var(--font-head);font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink)}

/* prose: article and long-form copy */
.prose{max-width:68ch;font-size:18px}
.prose > * + *{margin-top:1.1em}
.prose h2{margin-top:2em;font-family:var(--font-head);font-weight:700;font-size:clamp(28px,3.2vw,40px);line-height:1.08;letter-spacing:-.02em;color:var(--head-light)}
.prose h3{margin-top:1.6em;font-family:var(--font-head);font-weight:700;font-size:clamp(21px,2.2vw,26px);line-height:1.2;color:var(--head-light)}
.prose p,.prose li{line-height:1.65}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:.5em}
.prose a{font-weight:500;text-decoration:underline;text-decoration-color:var(--saffron);text-decoration-thickness:2px;text-underline-offset:3px}
.prose a:hover{text-decoration-color:currentColor}
.prose strong{font-weight:700}
.prose blockquote{margin:1.6em 0;padding:4px 0 4px 24px;border-left:4px solid var(--saffron);font-family:var(--font-head);font-weight:600;font-size:1.15em;line-height:1.35}
.prose table{width:100%;border-collapse:collapse;font-size:17px}
.prose th,.prose td{text-align:left;padding:12px 14px;border-bottom:1.5px solid var(--line-light)}
.prose th{font-family:var(--font-head);font-weight:700;color:var(--head-light)}
.byline{font-family:var(--font-head);font-weight:600;font-size:15px;color:var(--accent-ink);margin:0}

/* Q&A accordion */
.qa{margin-top:clamp(28px,3.4vw,44px);max-width:80ch}
.qa details{border-bottom:1.5px solid var(--line-light)}
.qa summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-family:var(--font-head);font-weight:600;font-size:clamp(18px,1.9vw,22px);line-height:1.3;color:var(--head-light)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-size:1.4em;line-height:1;color:var(--accent-ink);flex:none}
.qa details[open] summary::after{content:"\2013"}
.qa .answer{padding:0 0 22px;max-width:68ch}
.qa .answer > * {margin:0 0 .9em}
.qa .answer > *:last-child{margin-bottom:0}

/* notice strip: launch status, allergen note, etc. */
.notice{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;background:rgba(22,98,68,.1);border-radius:20px;padding:18px 24px;font-size:17px;margin-top:clamp(28px,3vw,40px)}
.notice strong{font-family:var(--font-head);font-size:19px;color:var(--accent-ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .notice{background:rgba(253,241,228,.09)}}
:root[data-theme="dark"] .notice{background:rgba(253,241,228,.09)}

/* closing */
.close{padding:clamp(72px,10vw,140px) 0 48px;text-align:left}
.close .big{margin:0;font-family:var(--font-head);font-weight:700;font-size:clamp(52px,9.5vw,148px);line-height:.92;letter-spacing:-.04em;color:var(--cream)}
.close .big span{color:var(--saffron)}
.close .ctas{margin-top:36px}
.foot{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:28px;margin-top:clamp(64px,9vw,120px);padding-top:28px;border-top:1.5px solid rgba(253,241,228,.18);font-size:15px;color:rgba(253,241,228,.8)}
.foot svg{width:96px;height:auto}
.foot nav{display:flex;flex-wrap:wrap;gap:22px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--cream);text-decoration:underline}
.foot-nap{display:grid;gap:4px;font-style:normal}
.foot-nap a{text-decoration:underline}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--deep);color:var(--cream);padding:14px 22px;border-radius:16px;font-weight:500;box-shadow:0 14px 30px -12px rgba(0,0,0,.5);z-index:50;max-width:calc(100% - 40px);transition:opacity .2s,transform .2s;border:2px solid var(--saffron)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* print: people print takeaway menus */
@media print{
  .top,.ticker,.close .ctas,.nav-toggle,.skip,.toast,.map{display:none!important}
  body,.light,.story{background:#fff!important;color:#000!important}
  .h2,.h3,.prose h2,.prose h3,.tile h2,.tile h3{color:#000!important}
  .panel[hidden]{display:block!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em}
}