/* ==========================================================================
   food.fast - design system
   A dark editorial layer: deep roast browns and charcoal, cream type, and a
   paprika-ember accent with a mustard second. The palette comes from the food
   rather than from fast-food branding - no primary red-and-yellow, because
   this is a publication about chain food, not a chain.
   Layout language follows a magazine: wide gutters, hairline rules, a serif
   for display type and a grotesque for everything functional.
   ========================================================================== */

:root {
  /* Ground */
  --bg:          #14110f;
  --bg-2:        #1a1613;
  --panel:       #1f1a16;
  --panel-2:     #272019;
  --line:        #362c24;
  --line-2:      #4a3c30;

  /* Type */
  --text:        #f8f2e8;
  --soft:        #cdc0ae;
  --muted:       #a0917f;
  --faint:       #7d7063;

  /* Accent - ember on the left of the scale, mustard on the right */
  --flame:       #ff6d33;
  --flame-2:     #ff8b5c;
  --flame-dim:   rgba(255,109,51,.13);
  --mustard:     #f2c14e;
  --mustard-dim: rgba(242,193,78,.12);
  --leaf:        #86c99b;
  --leaf-dim:    rgba(134,201,155,.12);

  /* Semantic */
  --warn:        #f2c14e;
  --bad:         #e2452f;

  --serif:  Georgia, "Times New Roman", serif;
  --sans:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono:   ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radius:    10px;
  --crumb-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6'/%3E%3C/svg%3E");
  --radius-sm: 6px;
  --radius-lg: 18px;
  --nav-h:     78px;

  --shadow:    0 14px 40px rgba(0,0,0,.42);

  --gutter: 40px;
  --max:    1380px;
  /* Reading measure. The page may be 1380px wide; a line of prose may not.
     At full width a paragraph ran to 123 characters - the eye loses its place
     on the return sweep past about 90, which is what made these pages feel
     like a wall.

     44rem is about 80 characters: generous, still inside the range that reads
     without effort. The first attempt at 36rem was correct as a measure and
     wrong as a layout - it left 416px of dead column beside every paragraph,
     which reads as a broken page rather than a considered one. The columns
     below are sized from this, so the text fills its column exactly and the
     leftover width goes to the margins where it belongs. */
  --measure: 44rem;
}

* { box-sizing: border-box; }
html {
  max-width: 100%; overflow-x: clip;
  scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0; max-width: 100%; overflow-x: clip;
  background: var(--bg); color: var(--text);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
/* While the menu is open the header has to be fixed rather than sticky.
   `overflow: hidden` on body makes body the scroll container, and a sticky
   element inside a scroll container sticks to *that* container - so the
   header quietly dropped back to its document position, which is scrolled
   off-screen, leaving page content showing in the strip above the panel. */
body.menu-open .header { position: fixed; top: 0; left: 0; right: 0; }

a { color: inherit; text-decoration: none; }
p a, .prose a, .rich a {
  color: var(--flame-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(255,139,92,.45);
}
p a:hover, .prose a:hover, .rich a:hover { text-decoration-color: var(--flame-2); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a, button, input, select, summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--mustard); outline-offset: 3px; border-radius: 3px;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0 0 .6rem; font-weight: 600; line-height: 1.18; }
h1, h2 { letter-spacing: -.028em; }
p { margin: 0 0 1rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
::selection { background: var(--flame); color: #1a0d06; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 400;
  background: var(--flame); color: #1a0d06; padding: .7rem 1.1rem;
  font-weight: 700; border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus { left: 0; }
.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;
}

/* ---------- layout -------------------------------------------------- */
.container { width: calc(100% - var(--gutter) * 2); max-width: var(--max); margin-inline: auto; }
.container-md { width: calc(100% - var(--gutter) * 2); max-width: var(--max); margin-inline: auto; }
.container-sm { width: calc(100% - var(--gutter) * 2); max-width: var(--max); margin-inline: auto; }
.section { padding-block: 3.5rem; }
.section-sm { padding-block: 2.25rem; }
.section + .section { border-top: 1px solid var(--line); }

.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -.03em; }
.lede { font-size: 1.1rem; line-height: 1.68; color: var(--soft); }
.muted { color: var(--muted); }
.small { font-size: .8rem; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- header --------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 200;
  height: var(--nav-h); display: flex; align-items: center; gap: 28px;
  padding: 0 var(--gutter);
  background: rgba(20,17,15,.94); backdrop-filter: blur(10px);
}
.brand { display: flex; align-items: center; gap: 11px; flex: none; }
.brand img { width: 38px; height: 38px; border-radius: 9px; }
.brand-word {
  font: 600 24px/1 var(--sans); letter-spacing: -.055em; white-space: nowrap;
}
.brand-dot { color: var(--flame); }
.brand-tag {
  display: block; margin-top: 3px;
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}

.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-menu { position: relative; }
.nav-trigger, .nav-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: .55rem .7rem; border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 550; color: var(--soft);
}
.nav-trigger:hover, .nav-link:hover,
.nav-trigger.active, .nav-link.active { color: var(--text); background: var(--panel-2); }
.nav-trigger svg { transition: transform .16s ease; }
.nav-menu:hover .nav-trigger svg, .nav-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

.mega {
  position: absolute; top: calc(100% + 10px); left: -12px; z-index: 210;
  width: 620px; padding: 1.15rem; opacity: 0; visibility: hidden;
  transform: translateY(-6px); transition: opacity .15s ease, transform .15s ease, visibility .15s;
  background: var(--panel); border: 1px solid var(--line-2);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.nav-menu:hover .mega, .nav-menu:focus-within .mega {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.mega-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: .7rem; margin-bottom: .8rem; border-bottom: 1px solid var(--line);
}
.mega-head strong { font-size: .92rem; }
.mega-head a { font-size: .74rem; color: var(--flame); font-weight: 650; }
.mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem .9rem; }
.mega-item {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .6rem;
  padding: .5rem .55rem; border-radius: var(--radius-sm);
}
.mega-item:hover, .mega-item:focus-within, .mega-item.active { background: var(--panel-2); }
.mega-title { display: block; font-size: .84rem; font-weight: 600; }
.mega-sub { display: block; margin-top: 1px; font-size: .71rem; color: var(--muted); line-height: 1.4; }
.mega-item:hover .mega-title, .mega-item:focus-within .mega-title { color: var(--flame-2); }
.mega-foot {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: .85rem; padding-top: .7rem; border-top: 1px solid var(--line);
  font-size: .7rem; color: var(--faint);
}

.header-search {
  display: flex; align-items: center; gap: .5rem; flex: 1 1 auto; max-width: 340px;
  margin-left: auto; padding: .38rem .38rem .38rem .8rem;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
}
.header-search input {
  flex: 1; min-width: 0; padding: .3rem 0; border: 0; outline: 0;
  background: transparent; font-size: 13px;
}
.header-search input::placeholder { color: var(--faint); }
.header-search button {
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: var(--radius-sm); background: var(--flame); color: #1a0d06;
}
.header-actions {
  display: flex; align-items: center; gap: .5rem; flex: none;
  /* Hold the right edge whatever else in the header is hidden. */
  margin-left: auto;
}
.btn-ghost {
  padding: .5rem .85rem; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  font-size: 12.5px; font-weight: 600; color: var(--soft);
}
.btn-ghost:hover { border-color: var(--flame); color: var(--text); }

.hamburger {
  display: none; align-items: center; gap: .5rem; height: 40px;
  padding: 0 .2rem 0 .7rem; color: var(--soft); border-left: 1px solid var(--line-2);
}
/* With the other header items hidden the button stands alone on the right,
   and a leading divider then has nothing to divide. */
.header-actions .btn-ghost:not([hidden]) + .hamburger { border-left: 1px solid var(--line-2); }
.hamburger-label { font-size: 10.5px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.hamburger-mark { position: relative; display: block; width: 21px; height: 18px; }
.hamburger-mark i {
  position: absolute; right: 0; display: block; height: 1.6px; background: currentColor;
  transition: top .18s ease, width .18s ease, transform .18s ease;
}
.hamburger-mark i:first-child { top: 5px; width: 21px; }
.hamburger-mark i:last-child  { top: 12px; width: 13px; }
.hamburger.open { color: var(--flame); }
.hamburger.open .hamburger-mark i { top: 9px; width: 19px; }
.hamburger.open .hamburger-mark i:first-child { transform: rotate(45deg); }
.hamburger.open .hamburger-mark i:last-child  { transform: rotate(-45deg); }

/* ---------- mobile panel (GTA6.free pattern) -------------------------- */
.mobile-panel {
  display: none; position: fixed; inset: var(--nav-h) 0 0; z-index: 190;
  padding: 1.25rem 0 5rem; overflow-y: auto;
  background: var(--bg-2); border-top: 1px solid var(--line);
  overscroll-behavior: contain;
}
.mobile-panel.open { display: block; }
.mobile-panel-inner { max-width: 940px; }
.mobile-menu-head {
  display: flex; justify-content: space-between; align-items: end; gap: 1rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--line);
}
.mobile-menu-head strong { font-size: 1.1rem; }
.mobile-menu-head p { margin: .3rem 0 0; font-size: .74rem; color: var(--muted); line-height: 1.5; }
.mobile-menu-note { font-size: .64rem; color: var(--flame); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; }
.mobile-search {
  display: grid; grid-template-columns: 1fr auto; gap: .55rem;
  margin-top: 1rem; padding: .4rem .4rem .4rem .85rem;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius);
}
.mobile-search input { min-width: 0; padding: .45rem 0; border: 0; outline: 0; background: transparent; font-size: .9rem; }
.mobile-search input::placeholder { color: var(--faint); }
.mobile-search button {
  padding: .5rem .9rem; border-radius: var(--radius-sm);
  background: var(--flame); color: #1a0d06; font-size: .74rem; font-weight: 800;
}
.mobile-featured {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1.4rem;
  margin-top: 1.1rem; border-block: 1px solid var(--line);
}
.mobile-featured .mf-item {
  display: grid; grid-template-columns: 30px 1fr; column-gap: .65rem;
  align-items: center; padding: .85rem .1rem;
}
.mobile-featured .mf-item + .mf-item { border-left: 1px solid var(--line); padding-left: 1.2rem; }
.mobile-featured .mf-item > span:first-child {
  grid-row: 1 / 3; display: grid; place-items: center; width: 30px; height: 30px;
  border-left: 2px solid var(--flame); color: var(--mustard);
}
.mobile-featured strong, .mobile-featured small { display: block; }
.mobile-featured strong { font-size: .8rem; }
.mobile-featured small { font-size: .65rem; color: var(--muted); }
.mobile-featured .mf-item:hover strong, .mobile-featured .mf-item:focus-within strong { color: var(--flame-2); }
.mobile-nav-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; margin-top: 1.6rem; }
.mob-head {
  margin-bottom: .35rem; padding-bottom: .4rem; border-bottom: 1px solid var(--line-2);
  font-size: .66rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--flame);
}
.mob-link {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  padding: .62rem .15rem; border-bottom: 1px solid var(--line);
  font-size: .8rem; font-weight: 550; color: var(--soft);
}
.mob-link:hover, .mob-link.active { color: var(--flame-2); }
.mob-link span.count { font-size: .68rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.mobile-utility {
  display: flex; flex-wrap: wrap; gap: .45rem 1.1rem;
  margin-top: 1.6rem; padding: 1rem; border: 1px solid var(--line-2);
  border-radius: var(--radius); background: var(--panel);
}
.mobile-utility a { font-size: .72rem; font-weight: 650; color: var(--soft); }
.mobile-utility a:hover { color: var(--flame-2); }

/* ---------- breadcrumbs ---------------------------------------------- */
.crumb-bar { background: transparent; }
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .1rem;
  min-height: 46px; margin: 0; padding: .5rem 0; list-style: none;
  font-size: .76rem; color: var(--muted);
}
/* The separator is the same arrow the buttons use, drawn as a mask so it
   takes its colour from the crumb bar and stays crisp at any zoom. */
.crumbs li + li::before {
  content: ""; display: inline-block; width: .74em; height: .74em;
  margin-inline: .5rem; vertical-align: -.05em; background-color: var(--line-2);
  -webkit-mask: var(--crumb-arrow) center / contain no-repeat;
          mask: var(--crumb-arrow) center / contain no-repeat;
}
.crumbs a:hover { color: var(--flame-2); }
.crumbs li:last-child { color: var(--soft); }

/* ---------- buttons --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .72rem 1.25rem; border-radius: var(--radius-sm);
  font-size: .85rem; font-weight: 700; letter-spacing: -.01em;
  background: var(--flame); color: #1a0d06; border: 1px solid var(--flame);
  transition: background .14s ease, transform .1s ease;
}
.btn:hover { background: var(--flame-2); border-color: var(--flame-2); }
.btn:active { transform: translateY(1px); }
.btn-outline { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn-outline:hover { background: var(--panel-2); border-color: var(--flame); color: var(--text); }
/* A button inside prose is still a button. `.prose a` carries a class and a
   type (0,1,1) where `.btn` carries only a class (0,1,0), so the link colour
   was winning and painting flame text on a flame background - a contrast
   ratio of about 1.3:1, which is unreadable. Same trap for every button that
   sits in a paragraph anywhere on the site, so it is fixed here once. */
p a.btn, .prose a.btn, .rich a.btn { color: #1a0d06; text-decoration: none; }
p a.btn-outline, .prose a.btn-outline, .rich a.btn-outline,
p a.btn-ghost, .prose a.btn-ghost, .rich a.btn-ghost { color: var(--text); }
.btn-sm { padding: .5rem .9rem; font-size: .78rem; }
.btn-block { width: 100%; }

.pill {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .28rem .6rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line-2); background: var(--panel);
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.pill-flame { border-color: rgba(255,109,51,.4); background: var(--flame-dim); color: var(--flame-2); }
.pill-mustard { border-color: rgba(242,193,78,.4); background: var(--mustard-dim); color: var(--mustard); }
.pill-leaf { border-color: rgba(134,201,155,.4); background: var(--leaf-dim); color: var(--leaf); }

/* ---------- cards ----------------------------------------------------- */
.card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); transition: border-color .15s ease, transform .15s ease;
}
.card:hover, .card:focus-within { border-color: var(--line-2); transform: translateY(-2px); }
.card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--panel-2); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.card:hover .card-media img, .card:focus-within .card-media img { transform: scale(1.035); }
.card-badge {
  position: absolute; top: .6rem; left: .6rem;
  padding: .22rem .55rem; border-radius: var(--radius-sm);
  background: rgba(20,17,15,.86); backdrop-filter: blur(4px);
  font-size: .62rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--mustard);
}
.card-save {
  position: absolute; bottom: .6rem; right: .6rem;
  padding: .25rem .55rem; border-radius: var(--radius-sm);
  background: rgba(134,201,155,.92); color: #0d1a11;
  font-size: .66rem; font-weight: 800;
}
.card-body { flex: 1; display: flex; flex-direction: column; padding: .95rem 1rem 1.05rem; }
.card-kicker { font-size: .66rem; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; color: var(--flame); margin-bottom: .35rem; }
.card-title { font-size: 1rem; font-weight: 600; line-height: 1.3; margin-bottom: .4rem; }
.card:hover .card-title, .card:focus-within .card-title { color: var(--flame-2); }
.card-text { margin: 0; font-size: .82rem; line-height: 1.55; color: var(--muted); }
.card-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .8rem;
  margin-top: auto; padding-top: .75rem;
  font-size: .71rem; color: var(--faint); font-variant-numeric: tabular-nums;
}
.card-meta span { display: inline-flex; align-items: center; gap: .3rem; }

.grid { display: grid; gap: 1.1rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

.section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1.5rem; margin-bottom: 1.5rem;
}
.section-head h2 { font-size: 1.65rem; margin: 0; }
.section-head p { margin: .45rem 0 0; font-size: .88rem; color: var(--muted); }
.section-link { flex: none; font-size: .78rem; font-weight: 700; color: var(--flame); white-space: nowrap; }
.section-link:hover { color: var(--flame-2); }

/* ---------- home hero ------------------------------------------------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(900px 420px at 88% 8%, rgba(255,109,51,.13), transparent 62%),
              radial-gradient(700px 400px at 5% 90%, rgba(242,193,78,.07), transparent 60%);
}
.hero-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap: 3.5rem; align-items: center; padding-block: 4rem 3.5rem;
}
.hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.5rem); line-height: 1.06; margin-bottom: 1.1rem; }
.hero h1 em { font-style: normal; color: var(--flame); }
.hero p.lede { margin-bottom: 1.7rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 2rem; }
.hero-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-2);
}
.hero-stats div { padding: .9rem .2rem 0; }
.hero-stats strong { display: block; font: 600 1.45rem/1 var(--serif); color: var(--mustard); }
.hero-stats span { display: block; margin-top: .3rem; font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.hero-media { position: relative; }
.hero-media img { width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.hero-caption {
  position: absolute; left: 1rem; bottom: 1rem; right: 1rem;
  padding: .6rem .85rem; border-radius: var(--radius-sm);
  background: rgba(20,17,15,.88); backdrop-filter: blur(6px);
  font-size: .72rem; color: var(--soft); line-height: 1.45;
}

/* ---------- strips ---------------------------------------------------- */
.value-strip { background: var(--panel); border-block: 1px solid var(--line); padding-block: 2.4rem; }
/* The heading lines up with the text inside the first cell rather than with
   the container edge, which is what made it read as a separate, floating
   element rather than a label for the row beneath it. */
.value-head { margin: 0 0 1.3rem; padding-inline: 1.4rem; font-size: 1.35rem; }
.value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); overflow: hidden; }
.value-grid > div { padding: 1.6rem 1.4rem; box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); }
.value-grid h3 { font-size: .95rem; margin-bottom: .4rem; }
.value-grid p { margin: 0; font-size: .8rem; line-height: 1.6; color: var(--muted); }
.value-mark { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: .8rem;
  border-radius: 9px; background: var(--flame-dim); color: var(--flame); }

/* ---------- article / prose ------------------------------------------ */
.article-layout {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  gap: 3.5rem; align-items: start;
}
.prose { font-size: 1.06rem; line-height: 1.75; }

/* Text blocks are held to the measure; figures, tables and anything else that
   is not read line by line keep the full column.

   This governs prose that has nothing beside it - the price pages, the about
   pages - where an unconstrained paragraph would otherwise run the full
   1380px, about 155 characters. Where a sidebar already narrows the column,
   the grid decides and the cap is lifted below, because a cap inside a column
   that is already narrower than the page just puts the dead space back. */
/* The reading measure is opt-in, not the default.
 *
 * It used to be the default, and it was wrong in both directions. Every
 * long-form page on this site - recipes, guides, blog posts, chain pages,
 * tools, collections, author pages - sits inside `.recipe-layout` or
 * `.article-layout`, both of which lifted the cap anyway. So the only pages
 * it ever reached were the ones where it was least wanted: listing intros,
 * the price tracker, the recipe box, confirmation pages. It capped
 * paragraphs at 704px inside a 1345px column and left the rest empty.
 *
 * Now the few blocks that genuinely are a wall of text ask for it. */
.prose-measure > p, .prose-measure > ul, .prose-measure > ol,
.prose-measure > dl, .prose-measure > blockquote,
.prose-measure > h2, .prose-measure > h3, .prose-measure > h4 { max-width: var(--measure); }

/* Nothing to lift any more - the cap is opt-in. Kept as the explicit
   statement that these layouts set their own width. */
.recipe-layout .prose > *, .article-layout .prose > * { max-width: none; }
/* Prose that fills its column instead of holding to the reading measure.
   The measure is for pages that are mostly text and read top to bottom. A
   short note under a list is not one of those, and a 704px paragraph sitting
   in a 1345px column reads as a mistake rather than as a choice. */
/* `prose-wide` is the default now and needs no rule. The class is gone from
   the templates; this comment is here so the next person who greps for it
   knows it was removed rather than lost. */
/* A 70% column runs longer than the ideal measure, so the type carries a
   little more size to compensate: bigger glyphs mean fewer characters on the
   same line, which is the other half of the same lever. */
.recipe-layout .prose, .article-layout .prose { font-size: 1.12rem; }

/* Spacing is set as a bottom margin on each block rather than with a
   `> * + *` owl rule. The owl was here and did nothing: `.prose p` is one
   specificity point heavier (class+type beats class+universal) and its
   `margin: 0` silently won, so every paragraph on the site ran flush into
   the next at exactly the line-height and the body copy read as one
   undifferentiated block. Explicit margins cannot be cancelled that way by
   an element rule added later. */
.prose > * { margin: 0 0 1.35rem; }
.prose > :last-child { margin-bottom: 0; }
.prose p { color: var(--soft); text-wrap: pretty; }

/* Headings take far more space above than below, so each one binds to the
   text it introduces instead of floating between two blocks. `balance`
   stops a long heading dropping one orphaned word onto its second line. */
.prose h2 {
  margin: 3rem 0 .75rem; font-family: var(--serif); font-size: 1.62rem;
  line-height: 1.24; color: var(--text); text-wrap: balance;
}
/* A short rule above every section heading. Three unbroken screens of grey
   paragraphs give a reader no sense of where one idea ends and the next
   begins; this is the cheapest possible marker that one has. */
.prose h2::before {
  content: ""; display: block; width: 2.25rem; height: 2px; margin-bottom: .95rem;
  background: var(--flame); border-radius: 2px;
}
.prose h2:first-child { margin-top: 0; }
/* ...but each section of a recipe is its own `.prose` block with the heading
   as its first child, so that exception was removing the space before every
   heading on the page. Consecutive blocks put it back. Without this the new
   rule above each heading sat directly under the previous paragraph and read
   as an underline on it. */
.prose + .prose { margin-top: 2.9rem; }
.prose h3 {
  margin: 2.1rem 0 .55rem; font-size: 1.14rem; color: var(--mustard);
  line-height: 1.35; text-wrap: balance;
}
.prose h4 { margin: 1.6rem 0 .4rem; font-size: .97rem; color: var(--text); }
.prose ul, .prose ol { margin: 0 0 1.25rem; padding-left: 1.3rem; color: var(--soft); }
.prose li > ul, .prose li > ol { margin: .45rem 0 0; }
.prose li { margin-bottom: .45rem; }
.prose li:last-child { margin-bottom: 0; }
.prose li::marker { color: var(--flame); }
.prose strong { color: var(--text); font-weight: 650; }
.prose blockquote {
  margin: 1.6rem 0; padding: .3rem 0 .3rem 1.2rem;
  border-left: 3px solid var(--flame); color: var(--soft); font-style: italic;
}
.prose code {
  padding: .12rem .35rem; border-radius: 4px; background: var(--panel-2);
  font: 500 .86em var(--mono); color: var(--mustard);
}
.prose figure { margin: 1.8rem 0; }
.prose figure img { border-radius: var(--radius); border: 1px solid var(--line-2); }
.prose figcaption { margin-top: .55rem; font-size: .75rem; color: var(--faint); line-height: 1.5; }

.aside { position: sticky; top: calc(var(--nav-h) + 20px); display: flex; flex-direction: column; gap: 1.1rem; }
.aside-box { padding: 1.1rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.aside-box h3 {
  margin-bottom: .75rem; padding-bottom: .55rem; border-bottom: 1px solid var(--line);
  font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--flame);
}
.aside-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.aside-list li + li { border-top: 1px solid var(--line); }
.aside-list a { display: block; padding: .6rem 0; font-size: .82rem; line-height: 1.45; color: var(--soft); }
.aside-list a:hover { color: var(--flame-2); }
.aside-note { font-size: .76rem; line-height: 1.6; color: var(--muted); margin: 0; }

.toc { counter-reset: toc; }
.toc a { display: flex; gap: .6rem; padding: .5rem 0; font-size: .8rem; color: var(--soft); border-top: 1px solid var(--line); }
.toc a:first-child { border-top: 0; }
.toc a::before { counter-increment: toc; content: counter(toc, decimal-leading-zero); color: var(--flame); font-weight: 700; font-size: .7rem; padding-top: .1rem; }
.toc a:hover { color: var(--flame-2); }

/* ---------- tables ---------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
table.data { width: 100%; border-collapse: collapse; font-size: .85rem; }
table.data caption {
  padding: .9rem 1rem; text-align: left; font-size: .78rem; color: var(--muted);
  border-bottom: 1px solid var(--line); line-height: 1.55;
}
table.data th, table.data td { padding: .68rem .9rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data thead th {
  font-size: .67rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--flame); background: var(--panel-2); white-space: nowrap;
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover td { background: rgba(255,255,255,.017); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data tfoot td { font-weight: 700; background: var(--panel-2); }
.table-title { margin: 2.4rem 0 .5rem; font-size: 1.05rem; color: var(--text); }

/* ---------- recipe page ---------------------------------------------- */
.recipe-hero { border-bottom: 1px solid var(--line); background: var(--bg-2); }
.recipe-hero-inner { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,460px); gap: 3rem; align-items: center; padding-block: 2.6rem; }
.recipe-hero h1 { font-size: clamp(1.9rem, 3.5vw, 2.7rem); line-height: 1.1; margin-bottom: .9rem; }
.recipe-hero .lede { margin-bottom: 1.3rem; }
.recipe-byline { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; font-size: .76rem; color: var(--muted); }
.recipe-byline img { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); }
.recipe-byline a { color: var(--soft); font-weight: 600; }
.recipe-byline a:hover { color: var(--flame-2); }
.recipe-hero-media img { width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--line-2); box-shadow: var(--shadow); }

/* The fact bar holds four, five or six cells depending on whether the recipe
   rests and whether it carries a calorie figure - 54 of 82 recipes have six.
   Two things follow.

   The column count is not fixed. `repeat(5, 1fr)` wrapped the sixth cell onto
   a second row on most of the site; auto-fit fits as many as the width allows
   and collapses the empty tracks, so six cells sit on one row on a desktop
   and fold to two on a phone without a media query deciding it.

   The dividers are box-shadows, not borders. A border has to know which cell
   ends a row, which is why the old rules hand-listed `:nth-child(3)` and
   `:nth-child(n+4)` per breakpoint - and why the desktop case, where nobody
   had written the matching rule, lost the line above the wrapped row. A
   shadow is drawn outside the cell and takes no space, so every cell can
   carry the same one and `overflow: hidden` on the container clips the ones
   that land on the outer edge. Correct for any count, any wrap, no list. */
.factbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.factbar > div { padding: .95rem 1rem; box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); }
.factbar dt { font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: .3rem; }
.factbar dd { margin: 0; font-size: .95rem; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.factbar dd small { display: block; margin-top: .15rem; font-size: .68rem; font-weight: 400; color: var(--muted); }

/* Seven parts text to three parts ingredients, spanning the container: the
   proportion is the brief, and the two columns still start and end on the
   same lines as the fact bar and the jump nav above them. */
.recipe-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: 3.5rem; align-items: start; }

.ing-panel { background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; }
.ing-controls { padding: .9rem 1rem; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.ctl-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.ctl-row + .ctl-row { margin-top: .7rem; }
.ctl-label { font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.segmented { display: inline-flex; padding: 2px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--bg); }
.segmented button {
  padding: .34rem .7rem; border-radius: var(--radius-sm); font-size: .74rem; font-weight: 700;
  color: var(--muted); transition: background .12s ease, color .12s ease;
}
.segmented button[aria-pressed="true"] { background: var(--flame); color: #1a0d06; }
.segmented button:hover:not([aria-pressed="true"]) { color: var(--text); }

.ing-group + .ing-group { border-top: 1px solid var(--line); }
.ing-group h3 {
  margin: 0; padding: .8rem 1rem .1rem; font-size: .78rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--mustard);
}
.ing-group-note { margin: .25rem 1rem .5rem; font-size: .75rem; color: var(--muted); line-height: 1.5; }
.ing-list { margin: 0; padding: .3rem .4rem .9rem; list-style: none; }
.ing-list li { display: grid; grid-template-columns: auto 1fr; gap: .6rem; padding: .48rem .6rem; border-radius: var(--radius-sm); }
.ing-list li:hover { background: var(--panel-2); }
.ing-check { appearance: none; width: 17px; height: 17px; margin: 3px 0 0; border: 1.5px solid var(--line-2); border-radius: 4px; flex: none; cursor: pointer; }
.ing-check:checked { background: var(--flame); border-color: var(--flame); }
.ing-check:checked + .ing-text { color: var(--faint); text-decoration: line-through; text-decoration-color: var(--line-2); }
.ing-text { font-size: .87rem; line-height: 1.5; color: var(--soft); }
.ing-amount { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.ing-note { display: block; margin-top: .1rem; font-size: .73rem; color: var(--faint); }
.ing-optional { font-size: .66rem; color: var(--mustard); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.ing-foot { padding: .8rem 1rem; border-top: 1px solid var(--line); background: var(--panel-2); font-size: .73rem; color: var(--muted); line-height: 1.55; }

.steps { counter-reset: step; margin: 0; padding: 0; list-style: none; }
.step { position: relative; padding: 0 0 1.5rem 3.1rem; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: -2px; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(255,109,51,.4); background: var(--flame-dim);
  font: 700 .85rem/1 var(--sans); color: var(--flame-2); font-variant-numeric: tabular-nums;
}
.step::after {
  content: ""; position: absolute; left: 17px; top: 38px; bottom: .35rem;
  width: 1px; background: linear-gradient(var(--line-2), transparent);
}
.step:last-child::after { display: none; }
.step h4 { margin: .3rem 0 .4rem; font-size: 1rem; color: var(--text); }
.step p { margin: 0; font-size: .92rem; line-height: 1.68; color: var(--soft); }
.step-tip {
  display: flex; gap: .5rem; margin-top: .7rem; padding: .65rem .8rem;
  border-left: 2px solid var(--mustard); background: var(--mustard-dim);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .81rem; line-height: 1.6; color: var(--soft);
}
.step-tip strong { color: var(--mustard); }
.step-time { display: inline-block; margin-top: .5rem; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.step-group-head {
  margin: 2rem 0 1.2rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line-2);
  font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--flame);
}
.step-group-head:first-child { margin-top: 0; }

.callout {
  display: grid; grid-template-columns: auto 1fr; gap: .85rem;
  margin: 1.8rem 0; padding: 1rem 1.15rem;
  border: 1px solid var(--line-2); border-left: 3px solid var(--flame);
  border-radius: 0 var(--radius) var(--radius) 0; background: var(--panel);
}
.callout-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--flame-dim); color: var(--flame); font-weight: 800; font-size: .9rem; }
.callout h4 { margin: .15rem 0 .35rem; font-size: .92rem; color: var(--text); }
.callout p { margin: 0; font-size: .85rem; line-height: 1.65; color: var(--soft); }
.callout-warn { border-left-color: var(--warn); }
.callout-warn .callout-mark { background: var(--mustard-dim); color: var(--mustard); }
.callout-safety { border-left-color: var(--bad); }
.callout-safety .callout-mark { background: rgba(226,69,47,.14); color: var(--bad); }

.cost-compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; padding: 1.3rem; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--panel); }
.cost-side { text-align: center; }
.cost-side strong { display: block; font: 600 1.9rem/1 var(--serif); font-variant-numeric: tabular-nums; }
.cost-side span { display: block; margin-top: .35rem; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.cost-home strong { color: var(--leaf); }
.cost-out strong { color: var(--soft); }
.cost-arrow { font-size: 1.1rem; color: var(--line-2); }
.cost-verdict { grid-column: 1 / -1; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted); line-height: 1.6; text-align: center; }
.cost-verdict b { color: var(--leaf); }

.tshoot { display: grid; gap: .1rem; }
.tshoot details { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); overflow: hidden; }
.tshoot details + details { margin-top: .5rem; }
.tshoot summary { padding: .8rem 1rem; font-size: .88rem; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.tshoot summary::-webkit-details-marker { display: none; }
.tshoot summary::after { content: "+"; color: var(--flame); font-weight: 700; flex: none; }
.tshoot details[open] summary::after { content: "\2212"; }
.tshoot details[open] summary { border-bottom: 1px solid var(--line); background: var(--panel-2); }
.tshoot-body { padding: .9rem 1rem; font-size: .85rem; line-height: 1.65; color: var(--soft); }
.tshoot-body dt { font-size: .66rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); margin-bottom: .2rem; }
.tshoot-body dd { margin: 0 0 .8rem; }
.tshoot-body dd:last-child { margin-bottom: 0; }

.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { padding: .95rem 0; font-size: .95rem; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--flame); flex: none; }
.faq-list details[open] summary::after { content: "\2212"; }
.faq-answer { padding: 0 0 1.1rem; font-size: .88rem; line-height: 1.7; color: var(--soft); }

.nutrition-panel { border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.nutrition-panel h3 { margin: 0; padding: .85rem 1rem; border-bottom: 2px solid var(--line-2); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }
.nutrition-row { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 1rem; border-bottom: 1px solid var(--line); font-size: .83rem; }
.nutrition-row:last-of-type { border-bottom: 0; }
.nutrition-row b { font-variant-numeric: tabular-nums; }
.nutrition-row.major { background: var(--panel-2); font-weight: 650; }
.nutrition-note { padding: .8rem 1rem; border-top: 1px solid var(--line); font-size: .72rem; line-height: 1.6; color: var(--faint); }

.equipment-list { margin: 0; padding: 0; list-style: none; }
.equipment-list li { display: grid; grid-template-columns: auto 1fr; gap: .7rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.equipment-list li:last-child { border-bottom: 0; }
.equipment-list .eq-mark { width: 7px; height: 7px; margin-top: .45rem; border-radius: 50%; background: var(--flame); }
.equipment-list strong { display: block; font-size: .87rem; }
.equipment-list span { display: block; margin-top: .2rem; font-size: .77rem; color: var(--muted); line-height: 1.55; }

.jump-nav { display: flex; flex-wrap: wrap; gap: .4rem; padding: .9rem 0; border-block: 1px solid var(--line); margin-bottom: 2rem; }
.jump-nav a {
  padding: .38rem .75rem; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  font-size: .74rem; font-weight: 600; color: var(--soft);
}
.jump-nav a:hover { border-color: var(--flame); color: var(--flame-2); }

/* ---------- menu tables ---------------------------------------------- */
.market-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.5rem; }
.market-tabs a { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .85rem; border: 1px solid var(--line-2); border-radius: var(--radius-sm); font-size: .78rem; font-weight: 600; color: var(--soft); }
.market-tabs a.active { background: var(--flame); border-color: var(--flame); color: #1a0d06; }
.market-tabs a:hover:not(.active) { border-color: var(--flame); }
.menu-cat { margin-bottom: 2.4rem; }
.menu-cat h3 { padding-bottom: .55rem; border-bottom: 1px solid var(--line-2); font-size: 1.1rem; color: var(--mustard); }
.menu-item-name { font-weight: 600; }
.menu-item-desc { display: block; margin-top: .2rem; font-size: .76rem; color: var(--muted); line-height: 1.5; }
.recipe-flag { display: inline-flex; align-items: center; gap: .3rem; margin-top: .35rem; padding: .2rem .5rem; border-radius: var(--radius-sm); background: var(--flame-dim); border: 1px solid rgba(255,109,51,.3); font-size: .68rem; font-weight: 700; color: var(--flame-2); }

/* ---------- footer ---------------------------------------------------- */
.footer { margin-top: 3rem; border-top: 1px solid var(--line); background: var(--bg-2); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 2.5rem; padding-block: 3rem 2.2rem; }
.footer-brand .brand { margin-bottom: .9rem; }
.footer-brand p { font-size: .82rem; line-height: 1.65; color: var(--muted); }
.footer-slogan { margin-top: .9rem; font-family: var(--serif); font-size: 1.05rem; color: var(--mustard); }
.footer h2.footer-head, .footer h4 { margin-bottom: .8rem; font-size: .66rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--flame); }
.footer ul { margin: 0; padding: 0; list-style: none; }
.footer li { margin-bottom: .48rem; }
.footer li a { font-size: .81rem; color: var(--soft); }
.footer li a:hover { color: var(--flame-2); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 1.2rem; border-top: 1px solid var(--line); font-size: .74rem; color: var(--faint); }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.footer-disclosure { width: 100%; margin-top: .4rem; line-height: 1.65; }

/* ---------- misc ------------------------------------------------------ */
.page-head { padding-block: 2.6rem 1.8rem; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.page-head h1 { font-size: clamp(1.85rem, 3.4vw, 2.6rem); margin-bottom: .7rem; }

.hub-head { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,420px); gap: 2.5rem; align-items: center; }
/* Direct child only. As a descendant selector this also caught the 72px
   chain logo nested inside the head, stretching it across the column. */
.hub-head > img { width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.empty { padding: 3rem 1rem; text-align: center; color: var(--muted); border: 1px dashed var(--line-2); border-radius: var(--radius); }
.tag-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.count-badge { font-size: .68rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.anchor-target { scroll-margin-top: calc(var(--nav-h) + 24px); }

/* ---------- print ----------------------------------------------------- */
@media print {
  .header, .mobile-panel, .footer, .crumb-bar, .aside, .jump-nav, .no-print { display: none !important; }
  body { background: #fff; color: #111; font-size: 11pt; }
  .container, .container-md, .container-sm { width: 100%; max-width: none; padding: 0; }
  .recipe-layout, .article-layout { grid-template-columns: 1fr; }
  a { color: #111; text-decoration: none; }
  .step::before { border-color: #999; background: #eee; color: #111; }
  .ing-panel, .card, table.data, .aside-box { border-color: #ccc; background: #fff; }
  .prose p, .ing-text, .step p { color: #222; }
}

/* ---------- responsive ------------------------------------------------ */
@media (max-width: 1180px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .header { gap: 16px; }
  .header-search { max-width: 260px; }
  .article-layout, .recipe-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .aside { position: static; flex-direction: row; flex-wrap: wrap; }
  .aside-box { flex: 1 1 280px; }
  .grid-4 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 960px) {
  :root { --gutter: 28px; }
  .hero-inner { grid-template-columns: 1fr; gap: 2.5rem; padding-block: 3rem 2.5rem; }
  .hub-head { grid-template-columns: 1fr; gap: 1.6rem; }
  .recipe-hero-inner { grid-template-columns: 1fr; gap: 2rem; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .header-search { display: none; }
}
@media (max-width: 680px) {
  :root { --gutter: 20px; --nav-h: 66px; }
  body { font-size: 15.5px; }
  .section { padding-block: 2.5rem; }
  .brand img { width: 34px; height: 34px; }
  .brand-word { font-size: 21px; }
  .brand-tag { display: none; }
  .header-actions .btn-ghost { display: none; }
  /* Nothing to its left any more, so the divider goes too. */
  .hamburger { border-left: 0; padding-left: 0; }
  .hero h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .hero-stats { grid-template-columns: 1fr 1fr; gap: 0; }
  .hero-stats div:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: .8rem; padding-top: .8rem; }
  .grid-2, .grid-3, .grid-4, .grid-auto { grid-template-columns: 1fr; }
  .mobile-featured, .mobile-nav-grid { grid-template-columns: 1fr; }
  .mobile-featured .mf-item + .mf-item { border-left: 0; border-top: 1px solid var(--line); padding-left: .1rem; }
  .mobile-menu-note { display: none; }
  .section-head { flex-direction: column; align-items: flex-start; gap: .8rem; }
  .cost-compare { grid-template-columns: 1fr; }
  .cost-arrow { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.8rem; }
  .footer-brand { grid-column: 1 / -1; }
  .step { padding-left: 2.6rem; }
  .step::before { width: 29px; height: 29px; font-size: .78rem; }
  .step::after { left: 14px; top: 33px; }

  /* Data tables become cards. A five-column price table at 360px is
     unreadable however far it scrolls, so each row becomes a labelled
     block using the data-label attribute the template already writes. */
  .table-wrap { overflow: visible; border: 0; border-radius: 0; background: transparent; }
  table.data { display: block; }
  table.data caption { padding: 0 0 .8rem; border: 0; }
  table.data thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  table.data tbody { display: grid; gap: .7rem; }
  table.data tbody tr { display: block; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); overflow: hidden; }
  table.data tbody td { display: grid; grid-template-columns: minmax(86px, 38%) 1fr; gap: .8rem; padding: .6rem .8rem; text-align: left; }
  table.data tbody td.num { text-align: left; }
  table.data tbody td::before { content: attr(data-label); font-size: .62rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--flame); line-height: 1.6; }
  table.data tfoot { display: block; margin-top: .7rem; }
  table.data tfoot tr { display: block; border: 1px solid var(--line-2); border-radius: var(--radius-sm); }
  table.data tfoot td { display: grid; grid-template-columns: minmax(86px, 38%) 1fr; gap: .8rem; padding: .6rem .8rem; }
  table.data tfoot td::before { content: attr(data-label); font-size: .62rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--mustard); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .card:hover, .card:focus-within { transform: none; }
  .card:hover .card-media img, .card:focus-within .card-media img { transform: none; }
}

/* ---------- tool cards ------------------------------------------------ */
/* The icon is drawn from the same inline set as the rest of the site, so it
   inherits the theme colour and stays sharp at any zoom. A generated raster
   would need a request each and could not follow the text colour. */
.tool-card { display: flex; gap: 1rem; align-items: flex-start; }
.tool-icon {
  flex: none; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: var(--radius-sm);
  background: var(--flame-dim); border: 1px solid rgba(255,109,51,.3);
  color: var(--flame-2);
}

/* ---------- currency switcher ----------------------------------------- */
.currency-bar { margin-top: 1.3rem; }
.currency-label {
  display: block; margin-bottom: .45rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .04em; color: var(--muted);
}
.currency-bar .segmented { flex-wrap: wrap; max-width: 100%; }
.currency-bar .seg {
  border: 0; background: transparent; color: var(--soft); cursor: pointer;
  font: inherit; font-size: .74rem; font-weight: 700;
  padding: .34rem .6rem; border-radius: var(--radius-sm);
}
.currency-bar .seg.active { background: var(--flame); color: #1a0d06; }
.currency-note { margin: .55rem 0 0; font-size: .74rem; color: var(--faint); line-height: 1.55; }

/* ---------- deck ------------------------------------------------------- */
/* The editorial headline, demoted from H1. It still opens the piece; it is
   no longer the only heading on the page that says what the page is. */
.deck {
  margin: .5rem 0 0; font-family: var(--serif); font-size: 1.22rem;
  line-height: 1.34; color: var(--mustard); font-weight: 400;
}

/* ---------- ingredients named inside a method step -------------------- */
/* Marked, not shouted: a dotted underline reads as "there is more here"
   without turning the method into a field of links. */
.ing-ref {
  border-bottom: 1px dashed var(--flame);
  color: var(--text); cursor: help; font-weight: 500;
}
.ing-ref:hover, .ing-ref:focus {
  background: var(--flame-dim); border-bottom-style: solid; outline: none;
}
.ing-ref:focus-visible { outline: 2px solid var(--flame); outline-offset: 2px; }
.ing-tip {
  position: absolute; z-index: 400; max-width: 17rem;
  padding: .45rem .7rem; border-radius: var(--radius-sm);
  background: var(--flame); color: #1a0d06;
  font-size: .82rem; font-weight: 700; line-height: 1.35;
  box-shadow: 0 6px 20px rgba(0,0,0,.45); pointer-events: none;
}
@media print { .ing-ref { border-bottom: 0; } .ing-tip { display: none; } }

/* ---------- chain logos ------------------------------------------------ */
/* Small, unmodified, and only ever beside that chain's own name - the use
   the trademarks page describes. The tile is neutral rather than branded so
   a logo with a white lockup is still legible on a dark background. */
.brand-logo {
  width: 48px; height: 48px; flex: none; object-fit: contain;
  padding: 6px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.92);
}
.brand-logo-lg { width: 72px; height: 72px; padding: 8px; }
.brand-card-head { display: flex; align-items: flex-start; gap: .85rem; margin-bottom: .55rem; }
.brand-card-head > div { min-width: 0; }
.brand-card-head .card-title, .brand-card-head .card-kicker { margin-bottom: .15rem; }
.brand-head { display: flex; align-items: flex-start; gap: 1.1rem; }
.brand-head > div { min-width: 0; }
@media (max-width: 680px) {
  .brand-logo-lg { width: 56px; height: 56px; }
  .brand-head { gap: .8rem; }
}

/* ---------- how-to block on tool pages -------------------------------- */
.howto-block { margin: 2rem 0; padding: 1.2rem 1.3rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.howto-block h2 { font-size: 1.05rem; margin: 0 0 .8rem; }
.howto-steps { margin: 0; padding-left: 1.2rem; display: grid; gap: .7rem; }
.howto-steps li { color: var(--soft); font-size: .88rem; line-height: 1.6; }
.howto-steps strong { display: block; color: var(--text); margin-bottom: .15rem; }
.howto-steps li::marker { color: var(--flame); font-weight: 700; }

/* ---------- recipe primary actions ------------------------------------ */
/* The thing a reader came for sits below the hero image, which on a phone is
   a lot of scrolling before anything is actionable. These are plain jump
   links, so they work with JavaScript off. */
.recipe-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  margin-top: 1.2rem;
}
.recipe-actions-note { font-size: .78rem; color: var(--muted); }
@media (max-width: 560px) {
  .recipe-actions .btn, .recipe-actions .btn-outline { flex: 1 1 100%; justify-content: center; }
  .recipe-actions-note { width: 100%; }
}
/* A jumped-to section should not sit under the sticky header. */
.anchor-target, #ingredients { scroll-margin-top: calc(var(--nav-h) + 16px); }

/* ---------- print view action bar -------------------------------------- */
.print-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem;
  margin-bottom: 1.6rem; padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
}

/* ---------- floating quick access -------------------------------------- */
/* Sits under the mobile drawer (which is 300) so an open menu covers it,
   and clear of the safe-area inset on phones with a home indicator. */
.quick-access {
  position: fixed; z-index: 180;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: flex-end;
}
.quick-access-toggle {
  position: relative; display: grid; place-items: center;
  width: 52px; height: 52px; padding: 0; cursor: pointer;
  border: 1px solid rgba(255,109,51,.45); border-radius: 50%;
  background: var(--flame); color: #1a0d06;
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
  transition: transform .18s ease, background .18s ease;
}
.quick-access-toggle:hover, .quick-access-toggle:focus-visible {
  background: var(--flame-2); transform: translateY(-2px);
}
.quick-access-toggle:focus-visible { outline: 2px solid var(--mustard); outline-offset: 3px; }
.quick-access.is-open .quick-access-toggle { background: var(--panel-2); color: var(--flame); }
.quick-access-panel {
  position: absolute; right: 0; bottom: 64px;
  width: min(330px, calc(100vw - 36px));
  max-height: calc(100dvh - 130px); overflow-y: auto;
  border: 1px solid var(--line-2); border-radius: var(--radius-lg);
  background: var(--panel); box-shadow: 0 22px 58px rgba(0,0,0,.5);
  animation: quick-access-in .18s ease both;
}
.quick-access-panel[hidden] { display: none; }
@keyframes quick-access-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .quick-access-panel { animation: none; }
  .quick-access-toggle { transition: none; }
}
.quick-access-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .95rem 1rem .75rem; border-bottom: 1px solid var(--line);
}
.quick-access-head span { display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--flame); font-weight: 800; }
.quick-access-head strong { font-size: .95rem; }
.quick-access-head button { background: none; border: 0; color: var(--muted); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 .2rem; }
.quick-access-head button:hover { color: var(--text); }
.quick-access-links { display: grid; padding: .5rem; }
.quick-access-links + .quick-access-links { border-top: 1px solid var(--line); }
.quick-access-links .qa-item {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .6rem .65rem; border-radius: var(--radius-sm); color: var(--soft);
}
.quick-access-links .qa-item:hover, .quick-access-links .qa-item:focus-within { background: var(--panel-2); color: var(--text); }
.quick-access-links .qa-item > svg { flex: none; margin-top: .15rem; color: var(--flame); }
.quick-access-links b { display: block; font-size: .87rem; color: var(--text); font-weight: 650; }
.quick-access-links small { display: block; font-size: .75rem; color: var(--muted); line-height: 1.45; }
@media print { .quick-access { display: none; } }

/* ---------- competitor row on chain pages ------------------------------ */
.competitor-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .7rem; margin-top: 1.3rem;
}
.competitor {
  display: flex; align-items: center; gap: .8rem;
  padding: .75rem .85rem; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--panel); color: var(--soft);
}
.competitor:hover, .competitor:focus-within { border-color: var(--line-2); background: var(--panel-2); }
.competitor img {
  width: 40px; height: 40px; flex: none; object-fit: contain;
  padding: 5px; border-radius: var(--radius-sm); background: rgba(255,255,255,.92);
}
.competitor b { display: block; font-size: .9rem; color: var(--text); font-weight: 650; }
.competitor small { display: block; font-size: .75rem; color: var(--muted); }

/* ---------- price alert form ------------------------------------------- */
/* The form fills its column. Capped at 640px it stopped 318px short of the
   aside beside it, which read as an unfinished layout rather than as a
   measure - and the chain list is a grid of short labels, not prose, so it
   gains a fourth column from the extra width instead of longer lines. */
.alert-form { display: grid; gap: 1rem; }
.alert-form label strong { font-size: .92rem; }
/* The one thing that should not stretch: a full-column text input invites
   an address longer than any address. */
.alert-form input[type="email"] { max-width: 34rem; }
.alert-form input[type="email"] {
  width: 100%; padding: .75rem .9rem; font: inherit;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text);
}
.alert-form fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; margin: 0; }
.alert-form legend { padding: 0 .4rem; font-size: .85rem; font-weight: 650; }
.alert-brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .45rem; margin-top: .6rem; }
.alert-brands label { display: flex; align-items: center; gap: .45rem; font-size: .84rem; color: var(--soft); }
.alert-form .btn { justify-self: start; }

/* ---------- recipe box -------------------------------------------------- */
.saved-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.saved-list li {
  display: flex; align-items: center; gap: .8rem;
  padding: .75rem .9rem; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--panel);
}
.saved-list li a { flex: 1 1 auto; font-weight: 600; color: var(--text); }
.saved-list li small { color: var(--muted); font-size: .76rem; }
.saved-remove { background: none; border: 0; color: var(--muted); font-size: .78rem; cursor: pointer; padding: .2rem .3rem; }
.saved-remove:hover { color: var(--flame); }
[data-save-recipe].is-saved { border-color: var(--flame); color: var(--flame); }

/* ---------------------------------------------------------------- charts */
/* The SVG is drawn by app/charts.py. Everything it needs to look like part
   of the site is here rather than in fill= attributes, so a theme change is
   one file and not two languages. */
.chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart .c-bar { fill: var(--flame); opacity: .85; transition: opacity .12s ease; }
.chart .c-bar:hover { opacity: 1; }
.chart .c-bar-over { fill: var(--mustard); opacity: .7; }
.chart .c-axis { stroke: var(--line-2); stroke-width: 1; }
.chart .c-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.chart .c-line { fill: none; stroke: var(--flame); stroke-width: 2.5;
                 stroke-linejoin: round; stroke-linecap: round; }
.chart .c-dot { fill: var(--flame); stroke: var(--bg); stroke-width: 2; }
.chart .c-tick { fill: var(--muted); font: 11px/1 var(--sans); }
.chart .c-count { fill: var(--soft); font: 11px/1 var(--sans); }
.chart .c-axis-title { fill: var(--faint); font: 11px/1 var(--sans);
                       letter-spacing: .04em; }

.chart-figure { margin: 1.4rem 0 0; padding: 1.1rem 1.1rem .8rem;
                background: var(--panel); border: 1px solid var(--line);
                border-radius: var(--radius); }
.chart-figure figcaption { margin-top: .7rem; color: var(--muted);
                           font-size: .84rem; line-height: 1.5; }

/* -------------------------------------------------------- order builder */
.builder { margin-top: 3rem; }
.builder-grid { display: grid; gap: 1.4rem; margin-top: 1.3rem;
                grid-template-columns: minmax(0, 1fr) 21rem; align-items: start; }

.builder-tools { display: flex; align-items: center; gap: .8rem;
                 margin-bottom: .8rem; flex-wrap: wrap; }
.builder-search { display: flex; align-items: center; gap: .5rem; flex: 1 1 12rem;
                  padding: .55rem .8rem; background: var(--panel);
                  border: 1px solid var(--line); border-radius: 999px;
                  color: var(--muted); }
.builder-search input { flex: 1; min-width: 0; border: 0; background: none;
                        color: var(--text); font: inherit; outline: none; }
.builder-count { font-size: .85rem; white-space: nowrap; }

.builder-group { border: 1px solid var(--line); border-radius: var(--radius);
                 background: var(--panel); margin-bottom: .6rem; overflow: hidden; }
.builder-group > summary { display: flex; align-items: center; gap: .6rem;
                           padding: .75rem .9rem; cursor: pointer;
                           font-weight: 600; list-style: none; }
.builder-group > summary::-webkit-details-marker { display: none; }
.builder-group > summary:hover { background: var(--panel-2); }
.builder-group .bg-ico { display: grid; place-items: center; width: 30px;
                         height: 30px; border-radius: 8px; color: var(--flame);
                         background: var(--flame-dim); flex: none; }
.builder-group .bg-name { flex: 1; }
.builder-group .bg-n { color: var(--faint); font-size: .8rem;
                       font-variant-numeric: tabular-nums; }
.builder-group[open] > summary { border-bottom: 1px solid var(--line); }

.builder-items { list-style: none; margin: 0; padding: 0; }
.builder-row { border-bottom: 1px solid var(--line); }
.builder-row:last-child { border-bottom: 0; }

.bi { display: flex; align-items: center; gap: .7rem; padding: .6rem .9rem;
      cursor: default; }
.bi-check { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bi-box { display: none; place-items: center; width: 20px; height: 20px;
          flex: none; border: 1.5px solid var(--line-2); border-radius: 5px;
          color: transparent; transition: all .12s ease; }
.bi-ico { display: grid; place-items: center; width: 34px; height: 34px;
          flex: none; border-radius: 9px; background: var(--bg-2);
          border: 1px solid var(--line); color: var(--soft); }
.bi-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.bi-name { line-height: 1.3; }
.bi-tag { display: inline-flex; align-items: center; gap: .25rem; align-self: flex-start;
          padding: .08rem .4rem; border-radius: 4px; font-size: .68rem;
          letter-spacing: .02em; color: var(--flame); background: var(--flame-dim); }
.bi-price { display: flex; align-items: baseline; gap: .3rem; flex: none;
            font-variant-numeric: tabular-nums; font-weight: 600; }
.bi-from { font-size: .68rem; font-weight: 400; color: var(--faint); }

/* Only once basket.js has taken over does any of this become clickable. */
.builder.is-live .bi { cursor: pointer; }
.builder.is-live .bi-box { display: grid; }
.builder.is-live .bi:hover { background: var(--panel-2); }
.builder.is-live .bi:hover .bi-box { border-color: var(--flame); }
.builder.is-live .bi-check:focus-visible + .bi-box { outline: 2px solid var(--flame);
                                                     outline-offset: 2px; }
.builder.is-live .bi.is-picked { background: var(--flame-dim); }
.builder.is-live .bi.is-picked .bi-box { background: var(--flame);
                                         border-color: var(--flame); color: #201007; }
.builder.is-live .bi.is-picked .bi-ico { color: var(--flame);
                                         border-color: var(--flame); }

.bi-sizes { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0 .9rem .6rem 4.3rem; }
.bi-size { position: relative; }
.bi-size input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bi-size span { display: inline-block; padding: .2rem .55rem; font-size: .76rem;
                border: 1px solid var(--line-2); border-radius: 6px;
                color: var(--muted); cursor: pointer; }
.bi-size input:checked + span { border-color: var(--flame); color: var(--flame);
                                background: var(--flame-dim); }
.bi-size input:focus-visible + span { outline: 2px solid var(--flame); outline-offset: 2px; }

.builder-none { padding: 1.2rem; color: var(--muted); text-align: center; }

/* The basket. Sticky so a long menu does not leave the total off screen. */
.builder-basket { position: sticky; top: calc(var(--nav-h) + 1rem); }
.basket-card { background: var(--panel); border: 1px solid var(--line);
               border-radius: var(--radius); padding: 1rem;
               /* Stop short of the bottom-right corner. The floating quick
                  access button is fixed there at z-index 180 and was sitting
                  on top of the saving figure - the one number on the panel
                  worth reading. The clearance is the button (52px), its
                  offset, and a gap: a sticky panel cannot simply be scrolled
                  out from under it, so the space has to be reserved. A long
                  basket scrolls inside the card instead. */
               max-height: calc(100vh - var(--nav-h) - 7.5rem);
               overflow-y: auto; }
.basket-head { display: flex; align-items: center; justify-content: space-between;
               gap: .6rem; margin-bottom: .7rem; }
.basket-head h3 { display: flex; align-items: center; gap: .45rem; margin: 0;
                  font-size: 1rem; }
.basket-clear { display: inline-flex; align-items: center; gap: .3rem;
                padding: .2rem .5rem; font-size: .75rem; color: var(--muted);
                background: none; border: 1px solid var(--line); border-radius: 6px;
                cursor: pointer; }
.basket-clear:hover { color: var(--bad); border-color: var(--bad); }
.basket-empty { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.55; }

.basket-list { list-style: none; margin: 0 0 .8rem; padding: 0; }
.basket-item { display: flex; align-items: center; gap: .5rem;
               padding: .45rem 0; border-bottom: 1px solid var(--line); }
.basket-item-text { flex: 1; min-width: 0; font-size: .85rem; line-height: 1.3; }
.basket-item-text small { display: block; color: var(--faint); font-size: .72rem; }
.basket-item-price { font-variant-numeric: tabular-nums; font-size: .85rem;
                     font-weight: 600; flex: none; }
.basket-drop { flex: none; width: 22px; height: 22px; line-height: 1;
               background: none; border: 0; color: var(--faint); cursor: pointer;
               font-size: 1rem; border-radius: 5px; }
.basket-drop:hover { color: var(--bad); background: var(--bg-2); }

.qty { display: flex; align-items: center; gap: .1rem; flex: none; }
.qty-btn { width: 22px; height: 22px; display: grid; place-items: center;
           background: var(--bg-2); border: 1px solid var(--line);
           border-radius: 5px; color: var(--soft); cursor: pointer;
           font-size: .85rem; line-height: 1; padding: 0; }
.qty-btn:hover { border-color: var(--flame); color: var(--flame); }
.qty-n { min-width: 1.4rem; text-align: center; font-size: .8rem;
         font-variant-numeric: tabular-nums; }

.basket-row { display: flex; align-items: center; justify-content: space-between;
              gap: .6rem; padding: .35rem 0; font-size: .88rem; }
.basket-row span { display: inline-flex; align-items: center; gap: .4rem;
                   color: var(--muted); }
.basket-row strong { font-variant-numeric: tabular-nums; }
.basket-row-home strong { color: var(--leaf); }
.basket-row-save { border-top: 1px solid var(--line); margin-top: .25rem;
                   padding-top: .5rem; }
.basket-row-save strong { color: var(--flame); font-size: 1.05rem; }

.basket-chart { margin: .8rem 0 .4rem; display: flex; flex-direction: column; gap: .5rem; }
.bar-head { display: flex; justify-content: space-between; gap: .5rem;
            font-size: .76rem; margin-bottom: .2rem; }
.bar-label { color: var(--muted); overflow: hidden; text-overflow: ellipsis;
             white-space: nowrap; }
.bar-value { font-variant-numeric: tabular-nums; }
.bar-track { height: 8px; background: var(--bg-2); border-radius: 999px;
             overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; transition: width .2s ease; }
.bar-out { background: var(--flame); }
.bar-home { background: var(--leaf); }
.bar-note { font-size: .72rem; color: var(--faint); margin-top: .15rem; }

.basket-caveat { margin: .6rem 0 0; }
.basket-actions { display: flex; flex-direction: column; gap: .35rem; margin-top: .7rem; }
.basket-action { display: block; padding: .45rem .6rem; font-size: .82rem;
                 text-align: center; border-radius: 7px; text-decoration: none;
                 color: var(--flame); background: var(--flame-dim);
                 border: 1px solid transparent; }
.basket-action:hover { border-color: var(--flame); }
.basket-note { margin: .8rem 0 0; line-height: 1.5; }

@media (max-width: 900px) {
  .builder-grid { grid-template-columns: minmax(0, 1fr); }
  /* On a phone the basket goes first: it is the thing that changes as you
     tick, and a total below two hundred menu rows is a total nobody sees.
     It does not stick here. A pinned panel on a 780px-tall screen eats half
     the menu it is meant to help you pick from, and its bottom edge parks
     permanently under the floating button. Static, it scrolls clear. */
  .builder-basket { order: -1; position: static; }
  .basket-card { max-height: none; overflow-y: visible; }
  .bi-sizes { padding-left: .9rem; }
}

/* The `hidden` attribute is a UA rule of `display: none`, so any author rule
   that sets display - `.basket-clear { display: inline-flex }` - silently
   beats it and the element stays on screen. That put a "Clear" button on an
   empty basket. One declaration fixes it everywhere rather than requiring
   every new component to remember. */
[hidden] { display: none !important; }

/* --------------------------------------------------------- price tracker */
.price-cards { display: grid; gap: .6rem; margin-top: 1.2rem;
               grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); }
.price-card { display: flex; align-items: center; gap: .8rem; padding: .8rem .9rem;
              background: var(--panel); border: 1px solid var(--line);
              border-radius: var(--radius); text-decoration: none; color: var(--text); }
.price-card:hover, .price-card:focus-within { border-color: var(--flame); background: var(--panel-2); }
.price-card-ico { display: grid; place-items: center; width: 44px; height: 44px;
                  border-radius: 9px; background: var(--bg-2); color: var(--muted); flex: none; }
.price-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.price-card-body small { color: var(--faint); font-size: .76rem; }
.price-card-num { text-align: right; flex: none; display: flex; flex-direction: column; }
.price-card-num b { font-variant-numeric: tabular-nums; }
.price-card-num small { color: var(--faint); font-size: .7rem; }

.price-movers { display: grid; gap: .8rem; margin-top: 1.2rem;
                grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }
.price-mover { padding: .9rem; background: var(--panel);
               border: 1px solid var(--line); border-radius: var(--radius); }
.price-mover-head { display: flex; align-items: center; gap: .55rem; margin-bottom: .5rem; }
.price-mover-head strong { flex: 1; min-width: 0; font-size: .9rem; }
.price-delta { font-variant-numeric: tabular-nums; font-size: .8rem;
               padding: .1rem .4rem; border-radius: 5px; }
.price-delta.up { color: var(--bad); background: rgba(226,69,47,.12); }
.price-delta.down { color: var(--leaf); background: var(--leaf-dim); }

/* A paragraph that opens with a bold phrase is a list item in disguise; the
   markdown filter marks them. Hanging a dot beside them means a reader
   scanning "what does the rest actually do" sees three things rather than
   four paragraphs, without the editorial having to be rewritten as a list. */
.prose p.keyed { position: relative; padding-left: 1.3rem; }
.prose p.keyed::before {
  content: ""; position: absolute; left: .18rem; top: .66em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--flame);
}
.prose p.keyed + p.keyed { margin-top: -.35rem; }
.prose p.keyed > strong:first-of-type { color: var(--flame-2); font-weight: 700; }

/* The opening paragraph carries the page. At the same size and colour as the
   forty that follow it, there is nothing to start on. */
.prose-lead > p:first-child {
  font-size: 1.2rem; line-height: 1.62; color: var(--text);
}

/* ---------- chain strip on the home page ------------------------------ */
/* Thirty-five links in a block that stays readable: auto-fit rather than a
   fixed column count, because the list grows as chains are added and a
   hand-set count would strand the last row. */
.chain-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); gap: .55rem; }
.chain-chip {
  display: flex; align-items: center; gap: .65rem; min-width: 0;
  padding: .6rem .75rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); text-decoration: none; color: var(--text);
  transition: border-color .15s ease, background .15s ease;
}
.chain-chip:hover, .chain-chip:focus-within { border-color: var(--flame); background: var(--panel-2, var(--panel)); }
.chain-chip img { flex: none; border-radius: 6px; background: #fff; object-fit: contain; }
.chain-chip span { display: grid; min-width: 0; }
.chain-chip b { font-size: .92rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chain-chip small { font-size: .74rem; color: var(--muted); }
@media (max-width: 680px) {
  .chain-strip { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
}

/* ---------- cross-market price comparison ----------------------------- */
/* Eleven numeric columns. Tabular figures so the decimal points line up,
   and a tight column width so the table fits without horizontal scroll on a
   laptop - .table-wrap handles the phone case. */
.compare-table { font-variant-numeric: tabular-nums; }
.compare-table th.num, .compare-table td.num { white-space: nowrap; padding-inline: .55rem; }
.compare-table .market-code { font-size: .68rem; color: var(--muted); letter-spacing: .04em; }
.compare-table .cell-low { color: var(--leaf); font-weight: 650; }
.compare-table .cell-high { color: var(--flame-2); font-weight: 650; }
.compare-table .menu-item-name { white-space: normal; }

/* ---------- the lead item in a mega menu ------------------------------ */
/* One offer per menu can be the reason the menu was opened. The price
   alert is that for Prices; it gets a full-width row above the grid rather
   than a cell inside it, because a cell reads as one option among eight. */
.mega-item-lead {
  margin-bottom: .55rem; border: 1px solid var(--flame);
  background: color-mix(in srgb, var(--flame) 9%, transparent);
}
.mega-item-lead .mega-title { color: var(--flame-2); }
.mega-item-lead .mega-sub { white-space: normal; }
@supports not (background: color-mix(in srgb, red 9%, transparent)) {
  .mega-item-lead { background: var(--panel); }
}

/* ---------- the savings ledger ---------------------------------------- */
/* The site's whole argument is a subtraction, and a reader could only ever
   see it one recipe at a time. This totals it across the box. */
.ledger { margin-bottom: 2rem; padding: 1.5rem 1.6rem; border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: var(--panel); }
.ledger-head h2 { font-size: 1.15rem; margin: 0 0 .25rem; }
.ledger-head p { margin: 0 0 1.2rem; color: var(--muted); font-size: .9rem; }
.ledger-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem; }
.ledger-grid > div { display: grid; gap: .2rem; align-content: start; }
.ledger-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); }
.ledger-value { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ledger-keep .ledger-value { color: var(--leaf); }
.ledger-pct { font-size: .76rem; color: var(--muted); }
.ledger-note { margin: 1.3rem 0 0; font-size: .8rem; color: var(--muted); line-height: 1.6; }

/* ---------- price movement on a recipe page --------------------------- */
/* The join the site exists to make: a monthly price series on one side, a
   recipe for the same thing on the other. */
.movement { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .5rem; }
.movement b { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.movement span { font-size: .84rem; color: var(--muted); }
.movement-up b { color: var(--flame-2); }
.movement-down b { color: var(--leaf); }
.movement-flat b { color: var(--soft); font-size: 1.15rem; }

/* ---------- the next-recipe line -------------------------------------- */
/* A publication with a stated rhythm is a reason to come back; a site that
   silently gains a page is not. */
.upnext { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; margin-top: 1.2rem; padding: .7rem .95rem; font-size: .88rem; color: var(--soft); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.upnext b { color: var(--text); font-weight: 650; }
.upnext svg { color: var(--flame); flex: none; }

/* ---------- inline alert prompt --------------------------------------- */
/* Placed where the price data is, not in a modal and not on every page.
   An offer is worth making next to the thing it is about. */
.alert-inline { display: flex; gap: .7rem; align-items: flex-start; margin-top: 1.4rem; padding: .95rem 1.1rem; font-size: .9rem; line-height: 1.6; color: var(--soft); background: var(--panel); border: 1px solid var(--line-2); border-left: 3px solid var(--flame); border-radius: var(--radius); }
.alert-inline b { color: var(--text); }
.alert-inline svg { color: var(--flame); flex: none; margin-top: .15rem; }

/* ---------- save-to-box on a card ------------------------------------- */
/* Revealed on hover, and on keyboard focus, and permanently once the recipe
   is in the box - a saved card has to look saved when nobody is pointing at
   it. Hover alone would make this invisible to a keyboard and to a touch
   screen, which has no hover at all; the `is-saved` state and :focus-visible
   are what make it reachable by both. */
.card.has-save { position: relative; }
.card-save-btn {
  position: absolute; top: .6rem; right: .6rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .42rem .6rem; font: inherit; font-size: .74rem; font-weight: 650;
  color: var(--text); background: rgba(20, 17, 15, .82);
  border: 1px solid var(--line-2); border-radius: 999px; cursor: pointer;
  backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, border-color .14s ease, color .14s ease;
}
.card:hover .card-save-btn,
.card:focus-within .card-save-btn,
.card-save-btn:focus-visible,
.card-save-btn.is-saved { opacity: 1; transform: none; }
.card-save-btn:hover { border-color: var(--flame); color: var(--flame-2); }
.card-save-btn.is-saved { color: var(--leaf); border-color: var(--leaf); }
.card-save-btn svg { flex: none; }
/* A touch screen has no hover: never hide it there. */
@media (hover: none) {
  .card-save-btn { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .card-save-btn { transition: none; }
}

/* ---------- the header currency chip ---------------------------------- */
/* Symbol and code together: five of the eleven currencies use a dollar sign,
   so "$" alone tells a reader they can change it without telling them what
   they are looking at - which was the actual complaint. */
.currency-chip { position: relative; }
.currency-chip-toggle {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .34rem .7rem .34rem .58rem; font: inherit; font-size: .78rem;
  font-weight: 650; color: var(--soft); background: transparent;
  border: 1px solid var(--line-2); border-radius: 999px; cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.currency-chip-toggle:hover,
.currency-chip-toggle[aria-expanded="true"] { border-color: var(--flame); color: var(--text); }
.currency-chip-toggle .ccy-sym { color: var(--flame); font-weight: 700; }
.currency-chip-toggle .ccy-code { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

.currency-chip-menu {
  position: absolute; top: calc(100% + .5rem); right: 0; z-index: 240;
  width: 16.5rem; padding: .8rem; background: var(--panel);
  border: 1px solid var(--line-2); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.currency-chip-head { margin: 0 0 .55rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); }
.currency-chip-list { display: grid; gap: .1rem; max-height: 17rem; overflow-y: auto; }
.currency-chip-item {
  display: grid; grid-template-columns: 2.1rem 2.7rem 1fr; align-items: center;
  gap: .4rem; width: 100%; padding: .42rem .45rem; font: inherit;
  font-size: .82rem; text-align: left; color: var(--soft);
  background: transparent; border: 0; border-radius: 8px; cursor: pointer;
}
.currency-chip-item:hover { background: var(--panel-2, rgba(255,255,255,.04)); color: var(--text); }
.currency-chip-item .ccy-sym { color: var(--flame); font-weight: 700; }
.currency-chip-item .ccy-code { font-weight: 650; }
.currency-chip-item .ccy-name { color: var(--muted); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.currency-chip-item[aria-pressed="true"] { background: rgba(255, 109, 51, .12); color: var(--text); }
.currency-chip-item[aria-pressed="true"] .ccy-code { color: var(--flame-2); }
.currency-chip-note { margin: .7rem 0 0; padding-top: .6rem; border-top: 1px solid var(--line); font-size: .72rem; line-height: 1.5; color: var(--muted); }

@media (max-width: 900px) {
  /* The hamburger already owns this corner on a phone; the chip moves into
     the panel it opens rather than competing for the same 40px. */
  .header-actions .currency-chip { display: none; }
}

/* ---------- filtered, grouped lists ----------------------------------- */
.list-filter-input {
  width: 100%; max-width: 26rem; padding: .6rem .85rem; font: inherit;
  font-size: .9rem; color: var(--text); background: var(--panel);
  border: 1px solid var(--line-2); border-radius: var(--radius);
}
.list-filter-input:focus { outline: 2px solid var(--flame); outline-offset: 2px; }
.list-filter-count { margin: .55rem 0 0; font-size: .8rem; color: var(--muted); }
.price-group { margin-top: 1.8rem; }
.price-group-head {
  display: flex; align-items: center; gap: .6rem; margin: 0 0 .7rem;
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--flame);
}
.price-group-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.price-group-head .count-badge { order: 3; }

/* ---------- jump-to-section chips ------------------------------------- */
.jump-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.jump-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .34rem .7rem; font-size: .78rem; font-weight: 600;
  color: var(--soft); text-decoration: none; background: var(--panel);
  border: 1px solid var(--line); border-radius: 999px;
  transition: border-color .15s ease, color .15s ease;
}
.jump-chip:hover, .jump-chip:focus-visible { border-color: var(--flame); color: var(--text); }
.jump-chip .count-badge { color: var(--faint); }

/* ---------- one column grid across every section table ---------------- */
/* Each menu section is its own <table>, so each was sizing its columns from
   its own content: "Latest price" landed at a different x in every section
   and the numbers stepped left and right down the page. Fixed layout with
   declared widths makes ten tables read as one list. */
.price-group table.data { table-layout: fixed; }
.price-group table.data th:nth-child(1),
.price-group table.data td:nth-child(1) { width: auto; }
.price-group table.data th:nth-child(2),
.price-group table.data td:nth-child(2) { width: 9.5rem; }
.price-group table.data th:nth-child(3),
.price-group table.data td:nth-child(3) { width: 7rem; }
.price-group table.data th:nth-child(4),
.price-group table.data td:nth-child(4) { width: 8rem; }
.price-group table.data td:nth-child(1) { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  /* The stacked card layout the .data table falls back to on a phone has no
     columns to align. */
  .price-group table.data { table-layout: auto; }
  .price-group table.data th, .price-group table.data td { width: auto; }
}

/* ---------- inline price-alert signup --------------------------------- */
/* Placed where the prices are, not at the bottom under the methodology. The
   form is the offer; a link to a form is an errand. */
.alert-signup {
  margin: 2.4rem 0; padding: 1.5rem 1.6rem;
  background: var(--panel); border: 1px solid var(--line-2);
  border-left: 3px solid var(--flame); border-radius: var(--radius-lg);
}
.alert-signup-copy h2 { font-size: 1.15rem; margin: 0 0 .4rem; }
.alert-signup-copy p { margin: 0 0 1.1rem; font-size: .92rem; line-height: 1.65; color: var(--soft); }
.alert-signup-form { display: flex; flex-wrap: wrap; gap: .6rem; }
.alert-signup-form input[type="email"] {
  flex: 1 1 18rem; min-width: 0; padding: .7rem .9rem; font: inherit;
  font-size: .92rem; color: var(--text); background: var(--bg, #14110f);
  border: 1px solid var(--line-2); border-radius: var(--radius);
}
.alert-signup-form input[type="email"]:focus { outline: 2px solid var(--flame); outline-offset: 2px; }
.alert-signup-form .btn { flex: 0 0 auto; }
.alert-signup-note { margin: .85rem 0 0; font-size: .78rem; line-height: 1.6; color: var(--muted); }

/* ---------- the human sitemap ----------------------------------------- */
/* .aside-list makes its anchors display:block, which is right for a column
   of single links and wrong for a row that carries a chain plus its menu and
   its price history - those became three stacked lines. */
.sitemap-list { margin: 0; padding: 0; list-style: none; }
.sitemap-list li {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem;
  padding: .5rem 0; border-top: 1px solid var(--line);
}
.sitemap-list li:first-child { border-top: 0; }
.sitemap-primary { font-size: .86rem; color: var(--soft); }
.sitemap-primary:hover { color: var(--flame-2); }
.sitemap-secondary {
  font-size: .72rem; color: var(--muted); padding: .1rem .45rem;
  border: 1px solid var(--line); border-radius: 999px;
}
.sitemap-secondary:hover { color: var(--flame-2); border-color: var(--flame); }
.sitemap-note { margin-left: auto; font-size: .72rem; color: var(--faint); }

/* ---------- the recipe box chip in the header ------------------------- */
.box-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .34rem .6rem .34rem .55rem; font-size: .78rem; font-weight: 650;
  color: var(--soft); text-decoration: none;
  border: 1px solid var(--line-2); border-radius: 999px;
  transition: border-color .15s ease, color .15s ease;
}
.box-chip:hover { border-color: var(--flame); color: var(--text); }
.box-chip svg { color: var(--flame); flex: none; }
.box-chip-count {
  min-width: 1.15rem; padding: 0 .25rem; text-align: center;
  font-variant-numeric: tabular-nums; font-size: .72rem; line-height: 1.35;
  color: #1a0d06; background: var(--flame); border-radius: 999px;
}
/* One short pulse when something lands in it, so the eye follows the thing
   that just moved rather than hunting for it. */
@keyframes box-pop {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}
.box-chip.just-saved { animation: box-pop .34s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .box-chip.just-saved { animation: none; }
}
@media (max-width: 900px) {
  /* The hamburger owns this corner on a phone; the box lives in the panel. */
  .header-actions .box-chip { display: none; }
}

/* ---------- local-only warning ---------------------------------------- */
/* The one way this list disappears, said where it will be read rather than
   in a paragraph at the bottom of the page. */
.local-warning {
  display: flex; gap: .7rem; align-items: flex-start;
  margin: 0 0 1.8rem; padding: .9rem 1.1rem;
  font-size: .88rem; line-height: 1.6; color: var(--soft);
  background: var(--panel); border: 1px solid var(--line-2);
  border-left: 3px solid var(--mustard, var(--flame)); border-radius: var(--radius);
}
.local-warning b { color: var(--text); }
.local-warning svg { color: var(--mustard, var(--flame)); flex: none; margin-top: .15rem; }

/* ---------- cards that link only their title --------------------------- */
/* The anchor text of a card is its title, not title + description + CTA.
   The title link's ::after stretches over the card (the nearest positioned
   box), so the whole card is still one click target. */
.has-card-link { position: relative; }
.card-link { color: inherit; text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: 0; }