/* Plated — portfolio stylesheet (v2). Colour comes entirely from five variables that
   each dish overrides; the page cross-fades between them as you scroll.
   v2: sauce work flows across section seams (no clipping, no edge masks), reveals are
   transitions rather than pops, photos sit on plates, new type pairing. */
:root {
  --plate: #f4efe6;
  --ink: #241b16;
  --sauce: #8a5a3c;
  --sauce2: #3b241a;
  --garnish: #d9b98c;
  --sauce-text: var(--sauce);
  --ink-soft: color-mix(in oklab, var(--ink) 72%, var(--plate));
  --page: var(--plate);
  --fade: color-mix(in oklab, var(--page, var(--plate)) 72%, transparent);
  --line: color-mix(in oklab, var(--ink) 16%, var(--plate));
  --panel: color-mix(in oklab, var(--plate) 82%, white);
  --plate-rim: color-mix(in oklab, var(--plate) 70%, white);
  --serif: "EB Garamond", "Cormorant Garamond", Georgia, serif;
  --sans: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --plate-shadow: color-mix(in oklab, var(--ink) 30%, transparent);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--plate);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  transition: background-color .3s linear, color .3s linear;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }
a { color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; line-height: 1; letter-spacing: -0.005em; }
.lbl { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; }

/* ---------- top bar ---------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 28px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.topbar .brand { transition: opacity .5s var(--ease), transform .5s var(--ease); font-family: var(--serif); text-transform: none; letter-spacing: 0; font-size: 20px; text-decoration: none; padding: 6px 12px; margin-left: -12px; border-radius: 999px; background: color-mix(in oklab, var(--plate) 70%, transparent); backdrop-filter: blur(6px); }
.topbar .actions { display: flex; gap: 10px; align-items: center; }
body.on-cover .topbar .brand { opacity: 0; transform: translateY(-6px); pointer-events: none; }
.btn {
  font: inherit; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  background: color-mix(in oklab, var(--plate) 86%, transparent); color: var(--ink); border: 1px solid var(--line); backdrop-filter: blur(6px);
  border-radius: 999px; padding: 9px 18px; transition: background .3s, color .3s, border-color .3s; display: inline-flex; align-items: center;
}
.btn:hover { background: var(--ink); color: var(--plate); border-color: var(--ink); }
.btn.primary { background: var(--ink); color: var(--plate); border-color: var(--ink); }
.btn.primary:hover { background: var(--sauce); border-color: var(--sauce); }
.print-wrap { position: relative; }
.print-menu {
  position: absolute; right: 0; top: 46px; min-width: 280px; padding: 8px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: 0 20px 50px color-mix(in oklab, var(--ink) 22%, transparent);
  display: flex; flex-direction: column; gap: 2px; text-transform: none; letter-spacing: 0;
}
.print-menu button { font: inherit; text-align: left; background: none; border: 0; cursor: pointer; padding: 10px 12px; border-radius: 9px; display: flex; flex-direction: column; gap: 2px; color: var(--ink); }
.print-menu button:hover { background: color-mix(in oklab, var(--ink) 8%, transparent); }
.print-menu b { font-family: var(--serif); font-weight: 400; font-size: 17px; }
.print-menu span { font-size: 12px; color: var(--ink-soft); }

/* ---------- nav dots ---------- */
.nav-dots {
  position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 20;
  display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; align-items: flex-end;
}
.nav-dots a { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-dots i { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); opacity: .22; transition: opacity .3s, transform .3s; }
.nav-dots .lab { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink); opacity: 0; transform: translateX(6px); transition: opacity .3s, transform .3s; white-space: nowrap; pointer-events: none; background: var(--page, var(--plate)); padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); }
.nav-dots a.active i { opacity: 1; transform: scale(1.45); }
.nav-dots a:hover .lab { opacity: 1; transform: none; }
.nav-dots a:hover i { opacity: .6; }

/* ---------- sections ---------- */
/* Sections no longer clip. Each section's sauce work sits on the seam with the next one and is allowed
   to run past the bottom edge; main clips only the very last spill at the end of the page. */
main { overflow: clip; }
section { position: relative; min-height: 100svh; overflow: visible; }
section .art { position: absolute; inset: -60px 0; z-index: 0; pointer-events: none; }
section .art svg { width: 100%; height: 100%; overflow: visible; }
section > .inner { position: relative; z-index: 1; isolation: isolate; }

/* cover: name on the left, the index on the right */
.cover .inner { min-height: 100svh; display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; padding: clamp(90px, 12vh, 130px) clamp(24px, 6vw, 96px) 70px; max-width: 1500px; margin: 0 auto; }
.cover .kicker { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 .6em; }
.cover h1 { font-size: clamp(3.4rem, 8.8vw, 8rem); margin: 0 0 .12em; line-height: .94; letter-spacing: -0.01em; }
.cover .tagline { font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 2.4vw, 2rem); color: var(--ink-soft); margin: 0; }
.cover .lead { max-width: 40ch; margin: 1.6em 0 0; color: var(--ink-soft); }
.cover .cta { display: flex; align-items: center; gap: 14px; margin-top: 2.2em; }
.cover .cta .or { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.cover .cta .contents { display: none; }
.scroll-cue { display: none; }

/* index list: shared by the cover panel and the overlay */
.index-list { display: flex; flex-direction: column; gap: 22px; }
.index-list .chap { display: flex; flex-direction: column; gap: 2px; }
.index-list .head { display: flex; align-items: baseline; gap: 12px; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.index-list .head .k { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--sauce-text); }
.index-list .head .title { font-family: var(--serif); font-style: italic; font-size: 1.55rem; }
.index-list .head .cnt { margin-left: auto; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.index-list .row { display: flex; align-items: baseline; gap: 14px; padding: 4px 6px; margin: 0 -6px; border-radius: 8px; text-decoration: none; transition: background .25s; }
.index-list .row:hover { background: color-mix(in oklab, var(--ink) 7%, transparent); }
.index-list .row .n { font-family: var(--serif); font-style: italic; font-size: 12px; color: var(--sauce-text); width: 22px; flex: none; }
.index-list .row .t { font-family: var(--serif); font-size: 1.15rem; line-height: 1.25; }
.index-list .row .y { margin-left: auto; font-size: 10px; letter-spacing: .14em; color: var(--ink-soft); flex: none; }
.cover-index { padding: 26px 30px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }

/* index overlay */
.index { position: fixed; inset: 0; z-index: 40; background: color-mix(in oklab, var(--plate) 92%, transparent); backdrop-filter: blur(14px); overflow-y: auto; padding: 24px; }
.index-inner { max-width: 720px; margin: 0 auto; padding: 8px 0 60px; }
.index-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.index-head .brand { font-family: var(--serif); font-size: 26px; }
.index .index-list .row .t { font-size: 1.5rem; }
.index .index-list .row { padding: 8px 8px; }

/* dish */
.dish .inner {
  min-height: 100svh; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 80px);
  align-items: center; padding: clamp(80px, 9vh, 110px) clamp(24px, 6vw, 96px) 13svh;
  max-width: 1500px; margin: 0 auto;
}
.dish:nth-of-type(even) .inner { grid-template-columns: 1fr 1.05fr; }
.dish:nth-of-type(even) .visual { order: 2; }
.visual { display: flex; flex-direction: column; align-items: center; gap: 16px; justify-self: center; width: 100%; }
.hero { margin: 0; position: relative; aspect-ratio: 1; width: min(100%, 54svh); }
.hero a { position: absolute; inset: 0; display: block; }
.hero img, .hero .plate { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero.frame-blob img, .hero.frame-blob .plate { border-radius: 46% 54% 52% 48% / 44% 42% 58% 56%; }
.hero.frame-round img, .hero.frame-round .plate { border-radius: 50%; }
.hero.frame-arch img, .hero.frame-arch .plate { border-radius: 999px 999px 28px 28px; }
.hero.frame-rect img, .hero.frame-rect .plate { border-radius: 16px; }
.hero img { position: relative; z-index: 1; box-shadow: 0 34px 60px -32px var(--plate-shadow), inset 0 0 0 1px color-mix(in oklab, var(--ink) 10%, transparent); transition: transform .8s var(--ease); }
.hero a:hover img { transform: scale(1.012); }
/* how many photos there are, on the photo: tells the reader it opens */
.hero .count { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); z-index: 3; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: #fff; background: rgba(20, 16, 14, .55); backdrop-filter: blur(6px); padding: 6px 12px; border-radius: 999px; white-space: nowrap; pointer-events: none; transition: background .3s; }
.hero a:hover .count { background: rgba(20, 16, 14, .75); }
.hero.cutout .count { bottom: 2%; }
/* the phone-only eyebrow above the photo (see the 860px rules); it gets the same soft halo as the copy */
.visual .eyebrow-top { display: none; position: relative; }
.visual .eyebrow-top::before { content: ""; position: absolute; inset: -60% -8%; z-index: -1; background: radial-gradient(ellipse farthest-side at 30% 50%, var(--page, var(--plate)) 40%, var(--fade) 70%, transparent 100%); pointer-events: none; }
/* the plate: a ceramic disc a shade lighter than the page, sitting a little behind the photo */
.hero::before { content: ""; position: absolute; inset: -5.5%; z-index: 0; border-radius: inherit; background: radial-gradient(circle at 42% 36%, var(--plate-rim), color-mix(in oklab, var(--plate) 90%, white) 62%, color-mix(in oklab, var(--plate) 88%, var(--ink)) 100%); box-shadow: 0 18px 40px -18px var(--plate-shadow), inset 0 -2px 6px color-mix(in oklab, var(--ink) 10%, transparent), inset 0 1px 0 rgba(255,255,255,.5); }
.hero.frame-blob::before { border-radius: 46% 54% 52% 48% / 44% 42% 58% 56%; }
.hero.frame-round::before { border-radius: 50%; }
.hero.frame-arch::before { border-radius: 999px 999px 34px 34px; }
.hero.frame-rect::before { border-radius: 22px; }
.hero .plate { position: absolute; inset: 0; background: transparent; z-index: 1; }
.hero:has(.plate)::before { display: none; }
.hero .plate svg { width: 100%; height: 100%; }

/* background-removed cutouts float on the page instead of sitting in a frame */
.hero.cutout img { object-fit: contain; border-radius: 0; box-shadow: none; filter: drop-shadow(0 26px 30px color-mix(in oklab, var(--ink) 34%, transparent)); position: relative; z-index: 2; }
/* cutouts sit on a shallow plate seen from a low angle, with a sauce drag painted under the food */
.hero.cutout::before { content: ""; position: absolute; inset: auto -4% 0 -4%; height: 34%; z-index: 0; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, var(--plate-rim), color-mix(in oklab, var(--plate) 92%, white) 60%, color-mix(in oklab, var(--plate) 86%, var(--ink)) 100%); box-shadow: 0 16px 30px -14px var(--plate-shadow), inset 0 -3px 6px color-mix(in oklab, var(--ink) 12%, transparent), inset 0 1px 0 rgba(255,255,255,.55); }
.hero.cutout::after { content: ""; position: absolute; left: 14%; right: 6%; bottom: 8%; height: 14%; z-index: 1; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; transform: rotate(-6deg); background: linear-gradient(90deg, var(--sauce) 0 38%, color-mix(in oklab, var(--sauce) 70%, transparent) 70%, transparent 100%); -webkit-mask: linear-gradient(90deg, #000 0 30%, #000 60%, transparent 100%); mask: linear-gradient(90deg, #000 0 30%, #000 60%, transparent 100%); opacity: .9; }
body.anim section.live .hero.cutout img { animation: settle 1.6s var(--ease) .1s both; }
@keyframes settle { from { transform: translateY(-10px); } to { transform: none; } }

/* the other finished photos, under the hero */
.gallery { display: flex; align-items: center; gap: 10px; }
.gallery a { display: block; width: 84px; height: 84px; border-radius: 14px; overflow: hidden; transition: transform .4s var(--ease); }
.gallery a:hover { transform: translateY(-3px); }
.gallery img { width: 100%; height: 100%; object-fit: cover; }

.text { position: relative; }
/* legibility halos: farthest-side ellipses so the fade reaches zero before the box edge and never draws a rectangle */
.text::before { content: ""; position: absolute; inset: -10% -12%; z-index: -1; background: radial-gradient(ellipse farthest-side at 50% 50%, var(--page, var(--plate)) 42%, var(--fade) 64%, transparent 100%); pointer-events: none; }
.cover-text { position: relative; }
.cover-text::before { content: ""; position: absolute; inset: -12% -16%; z-index: -1; background: radial-gradient(ellipse farthest-side at 50% 50%, var(--page, var(--plate)) 40%, var(--fade) 62%, transparent 100%); pointer-events: none; }
.chapter .inner::before, .colophon .inner::before { content: ""; position: absolute; inset: -14% -10%; z-index: -1; background: radial-gradient(ellipse farthest-side at 50% 50%, var(--page, var(--plate)) 36%, var(--fade) 60%, transparent 100%); pointer-events: none; }
.chapter .inner, .colophon .inner { z-index: 1; }
.text .eyebrow, .visual .eyebrow-top { display: flex; gap: 18px; align-items: baseline; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 1.1em; font-weight: 500; }
.text .num, .eyebrow-top .num { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--sauce-text); letter-spacing: 0; text-transform: none; }
.text h2 { font-size: clamp(2.8rem, 5.3vw, 5.1rem); margin: 0 0 .22em; text-wrap: balance; }
.text .sub { font-family: var(--serif); font-style: italic; font-size: 1.3rem; line-height: 1.35; color: var(--ink-soft); margin: 0 0 1.1em; }
.text .desc { max-width: 56ch; margin: 0 0 1.4em; }
.text .meta { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 1.4em; display: flex; gap: 1.6em; flex-wrap: wrap; }

details.ingredients { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: .2em 0; max-width: 60ch; }
details.ingredients summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 14px; padding: .8em 0; }
details.ingredients summary::-webkit-details-marker { display: none; }
details.ingredients summary .preview { font-family: var(--serif); font-style: italic; font-size: .98rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
details.ingredients summary::after { content: "+"; font-family: var(--serif); font-size: 1.5rem; line-height: 0; transition: transform .35s var(--ease); }
details.ingredients[open] summary::after { transform: rotate(45deg); }
details.ingredients[open] summary .preview { visibility: hidden; }
details.ingredients .groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1em 2em; padding: .2em 0 1.2em; }
details.ingredients h3 { font-style: italic; font-size: 1.05rem; margin-bottom: .4em; color: var(--sauce-text); }
details.ingredients ul { margin: 0; padding: 0; list-style: none; font-size: .95rem; color: var(--ink-soft); }
details.ingredients li { padding: .1em 0; }

.tags { display: flex; gap: .5em; flex-wrap: wrap; list-style: none; padding: 0; margin: 1.4em 0 0; }
.tags li { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--line); border-radius: 999px; padding: .35em .9em; color: var(--ink-soft); background: color-mix(in oklab, var(--plate) 70%, transparent); }

/* prep / process photos: a quiet strip under the entry, never the hero */
.process { display: flex; align-items: center; gap: 8px; margin-top: 1.5em; flex-wrap: wrap; }
.process .lbl { margin-right: 8px; }
.process a { display: block; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; transition: transform .4s var(--ease); }
.process a:hover { transform: translateY(-3px); }
.process img { width: 100%; height: 100%; object-fit: cover; opacity: .92; }
.process a.more { display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); font-size: 12px; color: var(--ink-soft); text-decoration: none; }

/* chapter dividers */
.chapter { min-height: 62svh; display: grid; place-items: center; text-align: center; }
.chapter .inner { padding: 10vh 6vw; }
.chapter .num { display: block; margin-bottom: .6em; }
.chapter h2 { font-size: clamp(3.2rem, 9.4vw, 8rem); font-style: italic; margin-bottom: .15em; }
.chapter .sub { margin-bottom: .6em; }
.chapter .meta { justify-content: center; }

/* colophon */
.colophon { display: grid; place-items: center; text-align: center; min-height: 70svh; }
.colophon .inner { padding: 12vh 6vw; }
.colophon .num { display: block; margin-bottom: .8em; }
.colophon h2 { font-size: clamp(2.4rem, 6vw, 5rem); margin-bottom: .2em; }
.colophon .sub { margin-bottom: .8em; }
.colophon .contact { font-family: var(--serif); font-size: 1.3rem; text-decoration: none; border-bottom: 1px solid var(--line); }
.colophon .cta { display: flex; justify-content: center; gap: 12px; margin-top: 2.4em; }

/* lightbox: top strip (counter, close), the photo, then a bottom bar (previous, caption, next).
   The buttons stay on phones; gestures come on top of them, never instead of them. */
.lightbox { position: fixed; inset: 0; z-index: 50; background: rgb(18 16 15 / var(--dim, 1)); color: #fff; display: grid; grid-template-rows: auto 1fr auto; overscroll-behavior: contain; -webkit-user-select: none; user-select: none; }
.lightbox .top { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 22px; padding-top: max(12px, env(safe-area-inset-top)); }
.lightbox .r { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.lightbox .stage { display: grid; place-items: center; min-height: 0; padding: 0 16px; touch-action: none; cursor: default; overflow: hidden; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); transition: transform .28s var(--ease), opacity .3s; will-change: transform; -webkit-user-drag: none; }
.lightbox.loading img { opacity: .35; }
.lightbox.zoomed .stage { cursor: grab; }
.lightbox.zoomed .stage:active { cursor: grabbing; }
.lightbox.zoomed img { border-radius: 0; box-shadow: none; }
.lightbox button { background: rgba(255, 255, 255, .1); color: #fff; border: 0; width: 44px; height: 44px; border-radius: 50%; font-size: 26px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background .3s; flex: none; }
.lightbox button:hover, .lightbox button:focus-visible { background: rgba(255, 255, 255, .24); outline: none; }
.lightbox .bar { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 14px; padding: 12px 12px 18px; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
.lightbox .cap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; min-width: 0; }
.lightbox .cap .t { font-family: var(--serif); font-size: 1.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.lightbox .cap .hint { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .45; }
@media (hover: hover) and (pointer: fine) { .lightbox .cap .hint { display: none; } }
@media (min-width: 861px) {
  /* desktop: arrows float beside the photo, caption sits under it */
  .lightbox .stage { padding: 0 80px; }
  .lightbox .bar { grid-template-columns: 1fr; padding: 10px 24px 22px; }
  .lightbox .bar .prev, .lightbox .bar .next { position: absolute; top: 50%; transform: translateY(-50%); }
  .lightbox .bar .prev { left: 18px; }
  .lightbox .bar .next { right: 18px; }
}

/* ---------- reveal (screen only, opt-in via body.anim) ----------
   Nothing pops. Sauce is already half-laid when a section arrives and finishes its stroke; dots and
   crumbs settle from 60% to full; text and photo drift up a few pixels. Everything is a transition, so
   it also eases back out when app.js re-arms a section. */
body.anim mask path { stroke-dasharray: 1; stroke-dashoffset: .3; transition: stroke-dashoffset calc(var(--t, 1.6s) * .6) var(--ease) calc(var(--d, 0s) * .5); }
body.anim section.live mask path { stroke-dashoffset: 0; }
body.anim .dot, body.anim .crumb, body.anim .quenelle {
  transform-box: fill-box; transform-origin: center; transform: scale(.6); opacity: 0;
  transition: transform .6s cubic-bezier(.2, 1.2, .4, 1) calc(var(--d, 0s) * .5), opacity .45s var(--ease) calc(var(--d, 0s) * .5);
}
body.anim section.live .dot, body.anim section.live .crumb, body.anim section.live .quenelle { transform: scale(1); opacity: 1; }
body.anim .text > *, body.anim .cover-text > *, body.anim .cover-index { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
body.anim section.live .text > *, body.anim section.live .cover-text > *, body.anim section.live .cover-index { opacity: 1; transform: none; }
/* app.js drives .visual's transform for parallax, so the photo only fades */
body.anim .visual { opacity: 0; transition: opacity .5s var(--ease); }
body.anim section.live .visual { opacity: 1; }
body.anim .text > :nth-child(1) { transition-delay: .02s; }
body.anim .text > :nth-child(2) { transition-delay: .06s; }
body.anim .text > :nth-child(3) { transition-delay: .1s; }
body.anim .text > :nth-child(4) { transition-delay: .14s; }
body.anim .text > :nth-child(5) { transition-delay: .18s; }
body.anim .text > :nth-child(6) { transition-delay: .22s; }
body.anim .text > :nth-child(7) { transition-delay: .26s; }
body.anim .cover-text > :nth-child(2) { transition-delay: .06s; }
body.anim .cover-text > :nth-child(3) { transition-delay: .12s; }
body.anim .cover-text > :nth-child(4) { transition-delay: .18s; }
body.anim .cover-text > :nth-child(5) { transition-delay: .24s; }
body.anim .cover-index { transition-delay: .2s; }


@media (prefers-reduced-motion: reduce) { body.anim * { animation-duration: .01s !important; animation-delay: 0s !important; transition-duration: .01s !important; transition-delay: 0s !important; } }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  /* the cover is a short opening card on small screens, not a full empty screen */
  .cover { min-height: 0; }
  .cover .inner { grid-template-columns: 1fr; gap: 36px; padding: 96px 24px 64px; min-height: 0; }
  /* phones and small tablets: the dish list collapses behind a Contents button (opens the index overlay) */
  .cover-index { display: none; }
  .cover .cta .or { display: none; }
  .cover .cta .contents { display: inline-flex; }
}
@media (max-width: 860px) {
  /* phones: no SVG blur filters (they re-rasterise on every reveal frame at 3x density) */
  .plating [filter] { filter: none; }
  /* phones: photos, text and cutouts are simply there; the sauce work still draws itself in */
  body.anim .visual, body.anim .text > *, body.anim .cover-text > *, body.anim .cover-index { opacity: 1; transform: none; transition: none; }
  body.anim section.live .hero.cutout img { animation: none; }
  /* each dish is its own page: a hairline rule and clear air above it, the eyebrow first, then the photo */
  .dish { min-height: 0; }
  .dish .inner, .dish:nth-of-type(even) .inner { grid-template-columns: 1fr; gap: 26px; padding: 92px 20px 52px; align-content: start; min-height: 0; }
  .dish + .dish::before { content: ""; position: absolute; top: 0; left: 20px; right: 20px; height: 1px; background: var(--line); z-index: 2; }
  section .art { inset: -24px 0; }
  .dish:nth-of-type(even) .visual { order: 0; }
  .visual { align-items: stretch; gap: 14px; }
  .visual .eyebrow-top { margin: 0 0 2px; }
  .text .eyebrow { display: none; }
  .hero, .hero.frame-round, .hero.frame-blob, .hero.frame-arch, .hero.frame-rect { width: 100%; aspect-ratio: 4 / 5; max-height: 58svh; }
  .hero.frame-round img, .hero.frame-blob img, .hero.frame-arch img, .hero.frame-rect img, .hero .plate { border-radius: 18px; }
  /* the plate rim follows the photo's rounded shape instead of a disc peeking out behind the corners */
  .hero::before, .hero.frame-round::before, .hero.frame-blob::before, .hero.frame-arch::before, .hero.frame-rect::before { inset: -3.5%; border-radius: 26px; }
  .hero .count { bottom: 12px; left: auto; right: 12px; transform: none; }
  .hero.cutout .count { bottom: 4px; }
  /* thumbnails: one row that scrolls sideways, never wraps */
  .gallery { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 4px 0; margin: 0 -20px; padding-inline: 20px; scroll-padding-inline: 20px; }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery a { width: 72px; height: 72px; border-radius: 10px; flex: none; }
  .gallery a:hover { transform: none; }
  /* the fixed bar gets a soft fade so copy scrolling under it stays readable */
  .topbar::before { content: ""; position: absolute; inset: 0 0 -24px; z-index: -1; background: linear-gradient(to bottom, var(--page, var(--plate)) 30%, transparent); opacity: .92; pointer-events: none; }
  .nav-dots { display: none; }
  .topbar { padding: 14px 18px; }
  .text .desc { max-width: none; }
  details.ingredients summary .preview { display: none; }
  .index-list .row .t { font-size: 1.05rem; }
  .lightbox .stage { padding: 0 8px; }
  .lightbox img { border-radius: 6px; }
}

/* =====================================================================
   PRINT / EXPORT FORMATS
   ===================================================================== */
body[class*="format-"] { transition: none; background: var(--plate); }
body[class*="format-"] .topbar, body[class*="format-"] .nav-dots, body[class*="format-"] .index, body[class*="format-"] .lightbox, body[class*="format-"] .hero .count, body[class*="format-"] .eyebrow-top, body[class*="format-"] .cover .cta, body[class*="format-"] .colophon .cta { display: none; }
body[class*="format-"] main { overflow: visible; }
body[class*="format-"] section { break-after: page; page-break-after: always; overflow: hidden; background: var(--plate); color: var(--ink); }
body[class*="format-"] section:last-of-type { break-after: auto; page-break-after: auto; }
body[class*="format-"] .el, body[class*="format-"] .text > *, body[class*="format-"] .cover-text > *, body[class*="format-"] .cover-index, body[class*="format-"] .visual { animation: none !important; transition: none !important; opacity: 1; transform: none; }
body[class*="format-"] section .art { inset: 0; transform: none !important; }
body[class*="format-"] .hero::before { box-shadow: none; }
body[class*="format-"] .visual { transform: none !important; }
body[class*="format-"] mask path { stroke-dashoffset: 0 !important; }
body[class*="format-"] details.ingredients summary { pointer-events: none; }
body[class*="format-"] details.ingredients summary::after { display: none; }
body[class*="format-"] .hero img { box-shadow: none; }
body[class*="format-"] .btn, body[class*="format-"] .topbar .brand { backdrop-filter: none; }
body[class*="format-"] .hero.cutout img { filter: none; }

/* book: A4 portrait */
body.format-book section { width: 210mm; height: 297mm; min-height: 0; margin: 0 auto; }
body.format-book .cover .inner { grid-template-columns: 1fr; gap: 12mm; padding: 26mm 18mm 20mm; min-height: 0; height: 100%; align-content: start; }
body.format-book .cover h1 { font-size: 58pt; }
body.format-book .cover .lead { display: none; }
body.format-book .cover-index { padding: 6mm 8mm; }
body.format-book .index-list { gap: 5mm; }
body.format-book .index-list .row { padding: 1px 4px; }
body.format-book .index-list .row .t { font-size: 11pt; }
body.format-book .index-list .head .title { font-size: 15pt; }
body.format-book .dish .inner, body.format-book .dish:nth-of-type(even) .inner {
  grid-template-columns: 1fr; grid-template-rows: 100mm 1fr; gap: 6mm; padding: 14mm 18mm 48mm; min-height: 0; height: 100%; align-items: start;
}
body.format-book .visual, body.format-book .dish:nth-of-type(even) .visual { order: 0; flex-direction: row; align-items: center; justify-content: center; gap: 8mm; height: 100mm; }
body.format-book .hero { width: 100mm; height: 100mm; aspect-ratio: auto; max-height: none; flex: none; }
body.format-book .gallery { flex-direction: column; gap: 4mm; }
body.format-book .gallery a { width: 28mm; height: 28mm; border-radius: 3mm; }
body.format-book .text h2 { font-size: 30pt; }
body.format-book .text .sub { font-size: 13pt; margin-bottom: .6em; }
body.format-book .text .desc { font-size: 10pt; margin-bottom: .8em; }
body.format-book details.ingredients { max-width: none; }
body.format-book details.ingredients summary .preview { display: none; }
body.format-book details.ingredients ul { font-size: 8.5pt; }
body.format-book details.ingredients .groups { grid-template-columns: repeat(4, 1fr); gap: .6em 1.6em; padding-bottom: .4em; }
body.format-book .tags { display: none; }
body.format-book .process a { width: 16mm; height: 16mm; }
body.format-book .chapter { height: 297mm; min-height: 0; }
body.format-book .chapter h2 { font-size: 56pt; }
body.format-book .colophon .inner { padding: 60mm 18mm; }

/* cards: A5 landscape */
body.format-cards section { width: 210mm; height: 148mm; min-height: 0; margin: 0 auto; }
body.format-cards .cover .inner { grid-template-columns: 1fr; padding: 20mm 14mm; min-height: 0; height: 100%; align-content: center; }
body.format-cards .cover h1 { font-size: 44pt; }
body.format-cards .cover-index, body.format-cards .cover .lead { display: none; }
body.format-cards .dish .inner, body.format-cards .dish:nth-of-type(even) .inner {
  grid-template-columns: 1fr 1.15fr; gap: 8mm; padding: 16mm 14mm 22mm; min-height: 0; height: 100%; align-items: center;
}
body.format-cards .visual, body.format-cards .dish:nth-of-type(even) .visual { order: 0; }
body.format-cards .hero { width: 100mm; height: 100mm; aspect-ratio: auto; max-height: none; flex: none; }
body.format-cards .gallery, body.format-cards .process, body.format-cards .tags { display: none; }
body.format-cards .text h2 { font-size: 22pt; }
body.format-cards .text .sub { font-size: 11pt; margin-bottom: .5em; }
body.format-cards .text .desc { font-size: 8.5pt; margin-bottom: .6em; }
body.format-cards details.ingredients summary .preview { display: none; }
body.format-cards details.ingredients ul { font-size: 7pt; }
body.format-cards details.ingredients .groups { grid-template-columns: repeat(3, 1fr); gap: .4em 1.2em; padding-bottom: .4em; }
body.format-cards details.ingredients h3 { font-size: .9rem; margin-bottom: .2em; }
body.format-cards details.ingredients summary { padding: .4em 0; }
body.format-cards .smear, body.format-cards .crumbs { display: none; }
body.format-cards .colophon { display: none; }

/* sheet: A4 portrait, single page */
body.format-sheet section { width: 210mm; min-height: 0; margin: 0 auto; break-after: auto; page-break-after: auto; }
body.format-sheet .cover { height: 60mm; }
body.format-sheet .cover .inner { grid-template-columns: 1fr; padding: 12mm 14mm; min-height: 0; }
body.format-sheet .cover h1 { font-size: 34pt; }
body.format-sheet .cover .lead, body.format-sheet .cover .kicker, body.format-sheet .cover-index { display: none; }
body.format-sheet .sheet { height: 237mm; }
body.format-sheet .sheet .inner { height: 100%; }
body.format-sheet .sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6mm 5mm; padding: 4mm 14mm 10mm; }
body.format-sheet .sheet-grid .cell .thumb { aspect-ratio: 1; border-radius: 50%; overflow: hidden; margin-bottom: 3mm; }
body.format-sheet .sheet-grid .cell img, body.format-sheet .sheet-grid .cell svg { width: 100%; height: 100%; object-fit: cover; display: block; }
body.format-sheet .sheet-grid .cell .thumb img.cutout { object-fit: contain; }
body.format-sheet .sheet-grid .cell .thumb:has(img.cutout) { border-radius: 0; }
body.format-sheet .sheet-grid .cell h3 { font-size: 12pt; }
body.format-sheet .sheet-grid .cell p { font-size: 7.5pt; color: var(--ink-soft); margin: .2em 0 0; }
body.format-sheet .sheet-grid .cell .swatches { display: flex; gap: 2px; margin-top: 2mm; }
body.format-sheet .sheet-grid .cell .swatches i { width: 5mm; height: 3mm; border-radius: 2px; display: block; }
body.format-sheet .sheet-foot { padding: 6mm 14mm 0; display: flex; justify-content: space-between; font-size: 8pt; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
body.format-sheet .dish, body.format-sheet .colophon, body.format-sheet .chapter { display: none; }

@media print {
  html, body { background: var(--plate); }
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .topbar, .nav-dots, .index, .lightbox, .no-print { display: none !important; }
  section { break-inside: avoid; }
}