/* ============================================================
   GRAVY BOAT — a poutinerie
   ------------------------------------------------------------
   1. Tokens
   2. Base + utilities
   3. Header / navigation
   4. Hero
   5. The CSS poutine (artwork)
   6. Sections: build, menu, find, faq
   7. Forms + controls
   8. Footer
   9. Motion preferences
   ============================================================ */

/* ---------- 1. TOKENS ---------- */

:root{
  /* surfaces */
  --bg:#150f0b;
  --bg-alt:#1e150f;
  --surface:#2a1e16;
  --surface-hi:#372820;
  --line:#4a372b;

  /* ink — both text colours clear 7:1 on --bg and --bg-alt */
  --ink:#faf1e6;
  --ink-dim:#d3bda6;

  /* brand */
  --gold:#f5b93f;
  --gold-deep:#c98a1c;
  --red:#e05c55;
  --gravy:#8a5227;

  /* artwork */
  --fry-light:#ffcf63;
  --fry-mid:#eda434;
  --fry-deep:#c9781d;
  --fry-crisp:#9c5613;
  --curd-light:#fdf8e6;
  --curd-mid:#ede0bf;
  --curd-shade:#c9b68c;
  --gravy-light:#9c5f2e;
  --gravy-mid:#66381a;
  --gravy-deep:#3a1d0c;
  --paper:#fbf7ef;
  --check:#cf2f2b;
  --steam:255,244,232;

  /* scale */
  --wrap:72rem;
  --radius:14px;
  --shadow:0 1.4rem 3rem rgba(0,0,0,.45);

  --font:ui-rounded,"Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
}

/* ---------- 2. BASE ---------- */

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:clamp(1rem,.96rem + .2vw,1.125rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{line-height:1.15; text-wrap:balance; margin:0 0 .5em}
h1{font-size:clamp(2.1rem,1.4rem + 3.2vw,3.9rem); letter-spacing:-.02em}
h2{font-size:clamp(1.7rem,1.2rem + 2vw,2.6rem); letter-spacing:-.015em}
h3{font-size:clamp(1.1rem,1rem + .5vw,1.3rem)}

p{margin:0 0 1em}

a{color:var(--gold); text-underline-offset:.22em}
a:hover{color:#ffd478}

img,svg{max-width:100%; height:auto}

.wrap{
  width:min(100% - 2.5rem, var(--wrap));
  margin-inline:auto;
}
.wrap-narrow{width:min(100% - 2.5rem, 48rem)}

.visually-hidden{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* one focus treatment, applied everywhere */
:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:absolute;
  left:1rem;
  top:-4rem;
  z-index:100;
  padding:.7rem 1.1rem;
  background:var(--gold);
  color:#2a1608;
  font-weight:700;
  text-decoration:none;
  border-radius:0 0 var(--radius) var(--radius);
  transition:top .15s ease;
}
.skip-link:focus{top:0}

/* ---------- 3. HEADER ---------- */

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(21,15,11,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}

.header-inner{
  display:flex;
  align-items:center;
  gap:1rem;
  min-height:4.5rem;
}

.brand{
  display:flex;
  align-items:center;
  gap:.7rem;
  color:var(--ink);
  text-decoration:none;
  margin-inline-end:auto;
}

/* a tiny paper boat, drawn in CSS like everything else here */
.brand-mark{
  width:2.2rem;
  height:1.5rem;
  flex:none;
  clip-path:polygon(0% 0%, 100% 0%, 88% 62%, 76% 100%, 24% 100%, 12% 62%);
  background:
    linear-gradient(100deg, rgba(0,0,0,.3), transparent 40%, rgba(0,0,0,.3)),
    conic-gradient(var(--check) 25%, var(--paper) 0 50%, var(--check) 0 75%, var(--paper) 0);
  background-size:auto, 38% 46%;
}

.brand-text b{display:block; font-size:1.05rem; letter-spacing:.01em}
.brand-text small{
  display:block;
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-dim);
}

.site-nav ul{
  display:flex;
  gap:1.6rem;
  list-style:none;
  margin:0;
  padding:0;
}
.site-nav a{
  color:var(--ink);
  text-decoration:none;
  font-weight:600;
  font-size:.95rem;
  padding:.4rem 0;
  border-bottom:2px solid transparent;
}
.site-nav a:hover{border-bottom-color:var(--gold)}

/* The toggle is meaningless without a script to operate it. */
.nav-toggle{display:none}

@media (max-width:52rem){
  /* No JS: the header wraps and the nav stays a plain, visible list. */
  .header-inner{flex-wrap:wrap; padding-bottom:.5rem}

  .js .nav-toggle{
    display:inline-flex;
    align-items:center;
    gap:.55rem;
    font:inherit;
    font-size:.9rem;
    font-weight:700;
    color:var(--ink);
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:999px;
    padding:.5rem 1rem;
    cursor:pointer;
  }
  .nav-toggle-bars,
  .nav-toggle-bars::before,
  .nav-toggle-bars::after{
    display:block;
    width:1rem;
    height:2px;
    background:var(--gold);
    content:"";
  }
  .nav-toggle-bars{position:relative}
  .nav-toggle-bars::before{position:absolute; top:-5px}
  .nav-toggle-bars::after {position:absolute; top:5px}

  /* Only collapse the nav when JS is present to bring it back. */
  .js .site-nav{
    position:absolute;
    inset:100% 0 auto 0;
    background:var(--bg-alt);
    border-bottom:1px solid var(--line);
    padding:.5rem 1.25rem 1.25rem;
    display:none;
  }
  .js .site-nav[data-open="true"]{display:block}

  .site-nav{width:100%}
  .site-nav ul{flex-direction:column; gap:0}
  .site-nav li + li{border-top:1px solid var(--line)}
  .site-nav a{display:block; padding:.85rem 0}
}

/* ---------- 4. HERO ---------- */

.hero{
  padding:clamp(2.5rem,6vw,5rem) 0 clamp(3rem,7vw,6rem);
  background:
    radial-gradient(80% 60% at 78% 30%, rgba(122,69,32,.42), transparent 62%),
    radial-gradient(60% 50% at 10% 8%, rgba(245,185,63,.12), transparent 70%);
}

.hero-grid{
  display:grid;
  gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center;
  grid-template-columns:1fr;
}

@media (min-width:56rem){
  .hero-grid{grid-template-columns:1.05fr .95fr}
  .hero-art{order:2}
}

.eyebrow{
  font-size:.78rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--gold);
  margin-bottom:1rem;
}

.lede{
  font-size:clamp(1.02rem,.98rem + .3vw,1.2rem);
  color:var(--ink-dim);
  max-width:36em;
}

.cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
  margin:1.6rem 0 0;
}

.hero-art{display:grid; place-items:center}

/* ---------- 5. THE CSS POUTINE ----------
   Sizing: --u is the artwork's own edge length and --px is one
   hundredth of it, so every part scales as a single piece.
   -------------------------------------------------------- */

.scene{
  --u:min(84vw, 64vh, 560px);
  --px:calc(var(--u) / 100);
  --sauce-op:1;      /* driven by the gravy slider */
  --sauce-k:1;
  position:relative;
  width:var(--u);
  height:var(--u);
  isolation:isolate;
}

.scene::after{         /* warm light on the table */
  content:"";
  position:absolute;
  left:4%; right:4%;
  bottom:2%;
  height:14%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,190,110,.26), transparent 70%);
  filter:blur(calc(1 * var(--px)));
  z-index:0;
}

/* steam */
.steam{
  position:absolute;
  left:0; right:0; top:-16%;
  height:44%;
  z-index:1;
  filter:blur(calc(3 * var(--px)));
}
.steam i{
  position:absolute;
  left:var(--x);
  bottom:0;
  width:calc(var(--w) * var(--px));
  height:calc(var(--h) * var(--px));
  border-radius:50% 50% 46% 54% / 60% 58% 42% 40%;
  background:linear-gradient(to top,
    rgba(var(--steam),0) 0%,
    rgba(var(--steam),.52) 36%,
    rgba(var(--steam),.18) 76%,
    rgba(var(--steam),0) 100%);
  opacity:0;
  animation:rise var(--dur) ease-in-out var(--delay) infinite;
}
@keyframes rise{
  0%   {opacity:0;  transform:translate(-50%,25%) scale(.55) rotate(0deg)}
  18%  {opacity:.8}
  55%  {opacity:.5; transform:translate(calc(-50% + 2.2 * var(--px)),-40%) scale(1) rotate(6deg)}
  100% {opacity:0;  transform:translate(calc(-50% - 1.6 * var(--px)),-115%) scale(1.5) rotate(-5deg)}
}

/* the checkered paper boat */
.tray{
  position:absolute;
  left:12%; right:12%;
  top:63%;
  bottom:17%;
  z-index:2;
  clip-path:polygon(0% 0%, 100% 0%, 96% 44%, 90% 76%, 82% 93%, 73% 100%, 27% 100%, 18% 93%, 10% 76%, 4% 44%);
  background:
    linear-gradient(100deg, rgba(0,0,0,.36) 0%, transparent 24%, transparent 66%, rgba(0,0,0,.44) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.04), rgba(0,0,0,.30)),
    conic-gradient(var(--check) 25%, var(--paper) 0 50%, var(--check) 0 75%, var(--paper) 0);
  background-size:auto, auto, 10.2% 35%;
  background-position:0 0, 0 0, 50% 0;
  filter:saturate(.9);
}
.tray::before{        /* grease blooming through the paper */
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(24% 20% at 32% 30%, rgba(120,70,20,.34), transparent 70%),
    radial-gradient(19% 15% at 66% 50%, rgba(120,70,20,.28), transparent 70%),
    radial-gradient(15% 13% at 46% 76%, rgba(120,70,20,.24), transparent 70%);
  mix-blend-mode:multiply;
}
.tray::after{         /* folded creases */
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, transparent 11%, rgba(255,255,255,.45) 12.4%, transparent 13.8%),
    linear-gradient(90deg, transparent 86%, rgba(0,0,0,.24) 87.4%, transparent 88.8%);
}

.tray-mouth{
  position:absolute;
  left:12%; right:12%;
  top:58.5%;
  height:9%;
  z-index:2;
  border-radius:50%;
  background:linear-gradient(to bottom, #1e1209, #4a2c17 60%, #6b4227);
  box-shadow:inset 0 calc(.9 * var(--px)) calc(2 * var(--px)) rgba(0,0,0,.65);
}

/* near rim, drawn over the food so the pile sits *in* the tray */
.tray-rim{
  position:absolute;
  left:12%; right:12%;
  top:58.5%;
  height:9%;
  z-index:9;
  border-radius:50%;
  clip-path:polygon(-2% 50%, 102% 50%, 102% 104%, -2% 104%);
  background:
    linear-gradient(100deg, rgba(0,0,0,.32) 0%, transparent 28%, transparent 68%, rgba(0,0,0,.40) 100%),
    conic-gradient(var(--check) 25%, var(--paper) 0 50%, var(--check) 0 75%, var(--paper) 0);
  background-size:auto, 10.2% 86%;
  background-position:0 0, 50% 42%;
  box-shadow:inset 0 calc(-.5 * var(--px)) calc(1.2 * var(--px)) rgba(0,0,0,.36);
  filter:saturate(.9);
}

/* The pile box is wider than the scene on purpose: it spreads the --x
   values outward to fill the tray without distorting the fries, which
   are sized in --px rather than in pile percentages. */
.pile{
  position:absolute;
  left:-4%;
  top:10%;
  width:108%;
  height:58%;
  z-index:3;
}

.gravy-base{
  position:absolute;
  left:16%;
  top:52%;
  width:68%;
  height:48%;
  z-index:0;              /* must stay behind the fries, which are z-auto */
  opacity:var(--sauce-op);
  background:radial-gradient(52% 50% at 50% 42%,
    rgba(48,24,10,.95) 0%, rgba(48,24,10,.72) 46%, transparent 78%);
  filter:blur(calc(1.6 * var(--px)));
}

/* fries: --x/--y place it, --r rotates (0deg = on end),
   --l/--w size it, --s is how well done it is */
.fry{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:calc(var(--w) * var(--px));
  height:calc(var(--l) * var(--px));
  transform:translate(-50%,-50%) rotate(var(--r));
  border-radius:calc(var(--w) * .28 * var(--px));
  background:
    linear-gradient(100deg,
      rgba(255,255,255,.32) 0%, rgba(255,255,255,.08) 18%,
      rgba(255,255,255,0) 36%, rgba(0,0,0,.12) 74%, rgba(0,0,0,.34) 100%),
    linear-gradient(to bottom,
      color-mix(in oklab, var(--fry-crisp), var(--fry-deep) calc((1 - var(--s)) * 100%)) 0%,
      var(--fry-mid) 11%,
      var(--fry-light) 38%,
      var(--fry-mid) 76%,
      color-mix(in oklab, var(--fry-deep), var(--fry-crisp) calc(var(--s) * 100%)) 100%);
  box-shadow:
    0 calc(.4 * var(--px)) calc(.9 * var(--px)) rgba(40,18,4,.5),
    inset 0 0 calc(.6 * var(--px)) rgba(255,236,180,.35);
}
.fry::before,
.fry::after{
  content:"";
  position:absolute;
  left:7%; right:7%;
  height:6%;
  border-radius:inherit;
  background:linear-gradient(to bottom, rgba(120,60,10,.34), rgba(90,42,6,.5));
}
.fry::before{top:2%}
.fry::after {bottom:2%}
.fry.back{filter:brightness(.72) saturate(.88)}
.fry.mid {filter:brightness(.88)}

/* cheese curds */
.curd{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:calc(var(--d) * var(--px));
  height:calc(var(--d) * .68 * var(--px));
  transform:translate(-50%,-50%) rotate(var(--r));
  border-radius:var(--br,62% 38% 55% 45% / 48% 58% 42% 52%);
  background:radial-gradient(66% 60% at 36% 26%,
    var(--curd-light) 0%, var(--curd-mid) 54%, var(--curd-shade) 100%);
  box-shadow:
    inset calc(-.35 * var(--px)) calc(-.4 * var(--px)) calc(.8 * var(--px)) rgba(140,116,70,.55),
    inset calc(.2 * var(--px)) calc(.25 * var(--px)) calc(.5 * var(--px)) rgba(255,255,255,.6),
    0 calc(.35 * var(--px)) calc(.8 * var(--px)) rgba(40,18,4,.5);
}
.curd::before{        /* the squeaky highlight */
  content:"";
  position:absolute;
  left:24%; top:18%;
  width:30%; height:22%;
  border-radius:50%;
  background:rgba(255,255,255,.55);
  filter:blur(calc(.4 * var(--px)));
}
.curd.under{filter:brightness(.78) sepia(.3)}
.curd.melting::after{ /* a soft sagging skirt */
  content:"";
  position:absolute;
  left:16%; right:16%;
  bottom:-22%;
  height:40%;
  border-radius:0 0 60% 60% / 0 0 100% 100%;
  background:linear-gradient(to bottom, var(--curd-mid), rgba(217,201,164,.12));
  filter:blur(calc(.25 * var(--px)));
}

/* gravy, in patches rather than as a lid */
.sauce{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:calc(var(--w) * var(--px));
  height:calc(var(--h) * var(--px));
  transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(var(--sauce-k));
  opacity:var(--sauce-op);
  border-radius:var(--br, 54% 46% 38% 62% / 48% 56% 44% 52%);
  background:
    radial-gradient(58% 44% at 38% 26%, rgba(214,152,90,.62) 0%, transparent 78%),
    linear-gradient(155deg, var(--gravy-light) 0%, var(--gravy-mid) 52%, var(--gravy-deep) 100%);
  box-shadow:
    inset 0 calc(-.4 * var(--px)) calc(1 * var(--px)) rgba(0,0,0,.34),
    0 calc(.4 * var(--px)) calc(1.2 * var(--px)) rgba(30,12,2,.5);
  /* feathered edge, so it looks poured on rather than laid on */
  filter:blur(calc(.3 * var(--px)));
  mask-image:radial-gradient(closest-side, #000 58%, rgba(0,0,0,.55) 84%, transparent 100%);
  transition:opacity .3s ease, transform .3s ease;
  animation:settle var(--dur,7s) ease-in-out var(--delay,0s) infinite;
}
@keyframes settle{
  0%,100%{border-radius:54% 46% 38% 62% / 48% 56% 44% 52%}
  50%    {border-radius:46% 54% 52% 48% / 56% 44% 56% 44%}
}

/* Runnels live outside .sauce on purpose: the mask that feathers a
   patch's edge would erase a pseudo-element hanging below it. */
.runnel{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:calc(var(--w) * var(--px));
  height:calc(var(--h) * var(--px));
  z-index:8;
  opacity:var(--sauce-op);
  transform-origin:50% 0;
  transform:translate(-50%,0) rotate(var(--r));
  border-radius:50% 50% 46% 54% / 16% 16% 84% 84%;
  background:linear-gradient(to bottom, rgba(126,72,34,.98), var(--gravy-deep));
  box-shadow:inset calc(.25 * var(--px)) calc(.2 * var(--px)) calc(.5 * var(--px)) rgba(255,190,130,.28);
  animation:drip var(--dur,7s) ease-in-out var(--delay,0s) infinite;
}
@keyframes drip{
  0%,100%{transform:translate(-50%,0) rotate(var(--r)) scaleY(.72)}
  50%    {transform:translate(-50%,0) rotate(var(--r)) scaleY(1.16)}
}

/* the ribbon pouring in from off-canvas */
.pour{
  position:absolute;
  left:57%;
  top:-10%;
  width:calc(2.6 * var(--px));
  height:41%;
  z-index:7;
  opacity:var(--sauce-op);
  transform-origin:50% 0;
  border-radius:calc(1.3 * var(--px)) calc(1.3 * var(--px)) 46% 54% /
                calc(3 * var(--px)) calc(3 * var(--px)) 30% 30%;
  background:linear-gradient(to bottom,
    var(--gravy-mid) 0%, var(--gravy-light) 20%, var(--gravy-mid) 54%, var(--gravy-deep) 100%);
  box-shadow:
    inset calc(.4 * var(--px)) 0 calc(.7 * var(--px)) rgba(255,196,136,.42),
    inset calc(-.5 * var(--px)) 0 calc(.8 * var(--px)) rgba(0,0,0,.45);
  transition:opacity .3s ease;
  animation:pour-wobble 3.4s ease-in-out infinite;
}
.pour::after{         /* splash where the ribbon lands */
  content:"";
  position:absolute;
  left:50%;
  bottom:calc(-1 * var(--px));
  width:calc(7 * var(--px));
  height:calc(2.6 * var(--px));
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(60% 60% at 50% 34%, rgba(196,130,68,.85), transparent 76%);
  filter:blur(calc(.5 * var(--px)));
  animation:splash 3.4s ease-in-out infinite;
}
@keyframes pour-wobble{
  0%,100%{transform:scaleX(1)   skewX(0deg)}
  35%    {transform:scaleX(.86) skewX(2.5deg)}
  70%    {transform:scaleX(1.08) skewX(-2deg)}
}
@keyframes splash{
  0%,100%{transform:translateX(-50%) scale(1)}
  40%    {transform:translateX(-50%) scale(1.18,.84)}
}

.droplet{
  position:absolute;
  left:57%;
  top:-4%;
  width:calc(1.9 * var(--px));
  height:calc(2.8 * var(--px));
  z-index:7;
  border-radius:50% / 62% 62% 38% 38%;
  background:linear-gradient(to bottom, var(--gravy-light), var(--gravy-deep));
  transform:translateX(-50%);
  opacity:0;
  animation:fall 3.4s cubic-bezier(.45,0,.75,.4) var(--delay,0s) infinite;
}
@keyframes fall{
  0%      {opacity:0; transform:translate(-50%,0) scaleY(.8)}
  8%      {opacity:1}
  62%     {opacity:1; transform:translate(-50%,420%) scaleY(1.35)}
  72%,100%{opacity:0; transform:translate(-50%,500%) scaleY(.6)}
}

/* gravy levels, set by the slider */
.scene[data-gravy="0"]{--sauce-op:0;   --sauce-k:.6}
.scene[data-gravy="1"]{--sauce-op:.62; --sauce-k:.82}
.scene[data-gravy="2"]{--sauce-op:1;   --sauce-k:1}
.scene[data-gravy="3"]{--sauce-op:1;   --sauce-k:1.22}
.scene[data-gravy="0"] .pour,
.scene[data-gravy="0"] .droplet{opacity:0}

/* ---------- 6. SECTIONS ---------- */

.section{padding:clamp(3rem,7vw,6rem) 0}
.section-alt{background:var(--bg-alt)}

.section-lede{
  color:var(--ink-dim);
  max-width:44em;
  margin-bottom:2.5rem;
  font-size:1.05em;
}

/* --- how it's built --- */

.build-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
}
.build-list li{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.6rem;
}
.build-num{
  display:block;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.2em;
  color:var(--gold);
  margin-bottom:.4rem;
}
.build-list p{color:var(--ink-dim); margin:0}

/* --- menu --- */

.filters{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.6rem;
  margin-bottom:1rem;
}
.filters-title{
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-dim);
  margin:0 .5rem 0 0;
}

.chip{
  font:inherit;
  font-size:.9rem;
  font-weight:600;
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:999px;
  padding:.45rem 1.05rem;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.chip:hover{background:var(--surface-hi)}
.chip[aria-pressed="true"]{
  background:var(--gold);
  border-color:var(--gold);
  color:#2a1608;
}

.filter-status{
  color:var(--ink-dim);
  font-size:.9rem;
  margin:0 0 1.75rem;
}

.menu-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:1.1rem;
  grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));
}

.dish{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.4rem;
  display:grid;
  grid-template-columns:1fr auto;
  align-content:start;
  gap:.2rem 1rem;
}
.dish h3{grid-column:1; margin:0}
.dish .price{
  grid-column:2;
  grid-row:1;
  margin:0;
  font-weight:700;
  color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.dish > p:not(.price):not(.tags){
  grid-column:1 / -1;
  color:var(--ink-dim);
  margin:.35rem 0 .6rem;
  font-size:.95rem;
}
.dish .tags{grid-column:1 / -1; margin:0; display:flex; gap:.4rem; flex-wrap:wrap}

.tag{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:.22rem .6rem;
  border-radius:999px;
  border:1px solid currentColor;
}
.tag-veg  {color:#7fd39b}
.tag-spicy{color:#ff9a7a}
.tag-meat {color:#e8b57e}

.dish[hidden]{display:none}

.menu-empty{
  margin-top:1.5rem;
  color:var(--ink-dim);
}

.linkish{
  font:inherit;
  color:var(--gold);
  background:none;
  border:0;
  padding:0;
  text-decoration:underline;
  text-underline-offset:.22em;
  cursor:pointer;
}

/* --- find us --- */

.find-grid{
  display:grid;
  gap:clamp(1.75rem,4vw,3rem);
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:56rem){
  .find-grid{grid-template-columns:1.15fr .85fr}
}

.hours{
  width:100%;
  border-collapse:collapse;
  font-size:.95rem;
}
.hours th,.hours td{
  text-align:left;
  padding:.7rem .8rem;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.hours thead th{
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
}
.hours tbody th{font-weight:700; white-space:nowrap}
.hours td{color:var(--ink-dim)}

.signup-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(1.4rem,3vw,2rem);
  box-shadow:var(--shadow);
}
.signup-card > p{color:var(--ink-dim); font-size:.95rem}

/* --- faq --- */

details{
  border-bottom:1px solid var(--line);
  padding:.4rem 0;
}
summary{
  cursor:pointer;
  font-weight:700;
  font-size:1.05rem;
  padding:.9rem 0;
  list-style:none;
  display:flex;
  align-items:center;
  gap:.8rem;
}
summary::-webkit-details-marker{display:none}
summary::before{
  content:"";
  flex:none;
  width:.6rem; height:.6rem;
  border-right:2px solid var(--gold);
  border-bottom:2px solid var(--gold);
  transform:rotate(-45deg);
  transition:transform .2s ease;
}
details[open] summary::before{transform:rotate(45deg)}
details p{color:var(--ink-dim); margin:0 0 1rem; padding-left:1.4rem}

/* ---------- 7. FORMS + BUTTONS ---------- */

.btn{
  display:inline-block;
  font:inherit;
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.02em;
  padding:.8rem 1.5rem;
  border-radius:999px;
  border:2px solid transparent;
  text-decoration:none;
  cursor:pointer;
  transition:transform .12s ease, filter .12s ease;
}
.btn:active{transform:translateY(1px)}

.btn-primary{
  background:linear-gradient(to bottom, var(--gold), var(--gold-deep));
  color:#2a1608;
}
.btn-primary:hover{filter:brightness(1.07); color:#2a1608}

.btn-ghost{
  border-color:var(--line);
  color:var(--ink);
  background:transparent;
}
.btn-ghost:hover{border-color:var(--gold); color:var(--ink)}

.field{margin-bottom:1.1rem}
.field label{
  display:block;
  font-weight:700;
  font-size:.9rem;
  margin-bottom:.35rem;
}
.field input{
  width:100%;
  font:inherit;
  font-size:1rem;
  color:var(--ink);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:8px;
  padding:.7rem .9rem;
}
.field input:hover{border-color:#6a5040}

.hint{
  font-size:.83rem;
  color:var(--ink-dim);
  margin:.4rem 0 0;
}
.error{
  font-size:.87rem;
  font-weight:600;
  color:#ff9a90;
  margin:.4rem 0 0;
}
.field input[aria-invalid="true"]{border-color:#ff9a90}

.form-status{
  margin:.9rem 0 0;
  font-size:.9rem;
  font-weight:600;
  color:#7fd39b;
}

/* the gravy slider */
.gravy-control{
  margin-top:2.25rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line);
  max-width:24rem;
}
.gravy-control label{
  display:block;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:.6rem;
}
.gravy-control input[type="range"]{
  width:100%;
  accent-color:var(--gravy);
  cursor:pointer;
}
.gravy-control output{
  display:block;
  margin-top:.5rem;
  font-size:.9rem;
  color:var(--ink-dim);
}

/* ---------- 8. FOOTER ---------- */

.site-footer{
  border-top:1px solid var(--line);
  padding:2.5rem 0;
  background:var(--bg-alt);
}
.footer-inner{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 2rem;
  align-items:baseline;
  justify-content:space-between;
}
.footer-brand{margin:0}
.footer-note{
  margin:0;
  color:var(--ink-dim);
  font-size:.85rem;
  max-width:42em;
}

/* ---------- 9. MOTION PREFERENCES ---------- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  /* leave the artwork legible in its resting state */
  .steam i{opacity:.45; transform:translate(-50%,-40%) scale(1.1)}
  .droplet{opacity:1; transform:translate(-50%,300%)}
}