/* Plated — portfolio stylesheet. Colour comes entirely from five variables that
   each dish overrides; the page cross-fades between them as you scroll. */

: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)) 88%, 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: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --fade: 1.1s;
}

* { 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 .25s linear, color .25s 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.01em; font-optical-sizing: auto; }
.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 ---------- */
main { scroll-snap-type: y proximity; }
section { position: relative; min-height: 100svh; scroll-snap-align: start; overflow: hidden; }
section .art { position: absolute; inset: -60px 0; z-index: 0; pointer-events: none; will-change: transform;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%); }
section .art svg { width: 100%; height: 100%; }
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.2rem, 8.4vw, 7.6rem); font-variation-settings: "opsz" 144; margin: 0 0 .12em; line-height: .96; letter-spacing: -0.015em; }
.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); }
.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%; will-change: transform; }
.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 { box-shadow: 0 30px 60px -30px color-mix(in oklab, var(--ink) 45%, transparent); transition: transform .8s var(--ease); }
.hero a:hover img { transform: scale(1.015); }
.hero .plate { position: absolute; inset: 0; background: transparent; }
.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 28px 34px color-mix(in oklab, var(--ink) 32%, transparent)); position: relative; z-index: 1; }
.hero.cutout::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 2%; height: 9%; border-radius: 50%; background: radial-gradient(ellipse at center, color-mix(in oklab, var(--sauce2) 28%, transparent), transparent 70%); }
body.anim section.live .hero.cutout img { animation: settle 1.4s var(--ease) .1s both; }
@keyframes settle { from { transform: translateY(-14px) scale(1.02); } 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; }
.gallery .count { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-left: 8px; font-weight: 500; }

.text { position: relative; }
.text::before { content: ""; position: absolute; inset: -8% -10%; z-index: -1; background: radial-gradient(ellipse at 50% 50%, var(--page, var(--plate)) 62%, var(--fade) 78%, transparent 94%); pointer-events: none; }
.cover-text { position: relative; }
.cover-text::before { content: ""; position: absolute; inset: -14% -18%; z-index: -1; background: radial-gradient(ellipse at 50% 50%, var(--page, var(--plate)) 62%, var(--fade) 78%, transparent 94%); pointer-events: none; }
.chapter .inner::before, .colophon .inner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 50%, var(--page, var(--plate)) 40%, var(--fade) 62%, transparent 85%); pointer-events: none; }
.chapter .inner, .colophon .inner { z-index: 1; }
.text .eyebrow { 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 { 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.6rem, 5vw, 4.8rem); margin: 0 0 .22em; font-variation-settings: "opsz" 144; 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(3rem, 9vw, 7.5rem); font-style: italic; font-variation-settings: "opsz" 144; 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 */
.lightbox { position: fixed; inset: 0; z-index: 50; background: color-mix(in oklab, var(--ink) 92%, black); display: grid; grid-template-rows: 1fr auto; }
.lightbox .stage { display: grid; place-items: center; padding: 56px 72px 12px; min-height: 0; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 130px); object-fit: contain; border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.lightbox button { position: absolute; 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; }
.lightbox button:hover { background: rgba(255, 255, 255, .22); }
.lightbox .close { top: 16px; right: 16px; }
.lightbox .prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox .next { right: 16px; top: 50%; transform: translateY(-50%); }
.lightbox .cap { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 24px 20px; color: #fff; }
.lightbox .cap .t { font-family: var(--serif); font-size: 1.2rem; }
.lightbox .cap .r { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }

/* ---------- reveal animations (screen only, opt-in via body.anim) ---------- */
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

body.anim section:not(.live) mask path { stroke-dasharray: 1; stroke-dashoffset: 1; }
body.anim section:not(.live) .dot, body.anim section:not(.live) .crumb, body.anim section:not(.live) .quenelle { transform: scale(0); opacity: 0; }
body.anim section:not(.live) .text > *, body.anim section:not(.live) .visual, body.anim section:not(.live) .cover-text > *, body.anim section:not(.live) .cover-index { opacity: 0; }

body.anim section.live mask path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw var(--t, 1.5s) var(--ease) var(--d, 0s) forwards; }
body.anim section.live .dot, body.anim section.live .crumb, body.anim section.live .quenelle {
  transform-box: fill-box; transform-origin: center; transform: scale(0); opacity: 0;
  animation: pop .55s cubic-bezier(.2, 1.5, .4, 1) var(--d, 0s) forwards;
}
body.anim section.live .text > *, body.anim section.live .cover-text > *, body.anim section.live .cover-index { animation: rise .9s var(--ease) both; }
body.anim section.live .text > :nth-child(1) { animation-delay: .1s; }
body.anim section.live .text > :nth-child(2) { animation-delay: .2s; }
body.anim section.live .text > :nth-child(3) { animation-delay: .3s; }
body.anim section.live .text > :nth-child(4) { animation-delay: .4s; }
body.anim section.live .text > :nth-child(5) { animation-delay: .5s; }
body.anim section.live .text > :nth-child(6) { animation-delay: .6s; }
body.anim section.live .text > :nth-child(7) { animation-delay: .7s; }
body.anim section.live .visual { animation: rise 1.1s var(--ease) .15s both; }
body.anim section.live .cover-text > :nth-child(2) { animation-delay: .15s; }
body.anim section.live .cover-text > :nth-child(3) { animation-delay: .3s; }
body.anim section.live .cover-text > :nth-child(4) { animation-delay: .45s; }
body.anim section.live .cover-text > :nth-child(5) { animation-delay: .6s; }
body.anim section.live .cover-index { animation-delay: .5s; }

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

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .cover .inner { grid-template-columns: 1fr; gap: 36px; padding-top: 96px; }
  .cover-index { padding: 20px 20px; }
}
@media (max-width: 860px) {
  .dish .inner, .dish:nth-of-type(even) .inner { grid-template-columns: 1fr; gap: 24px; padding-top: 84px; align-content: start; }
  .dish:nth-of-type(even) .visual { order: 0; }
  .visual { align-items: flex-start; }
  .hero, .hero.frame-round, .hero.frame-blob, .hero.frame-arch, .hero.frame-rect { width: 100%; aspect-ratio: 4 / 5; max-height: 60svh; }
  .hero.frame-round img, .hero.frame-blob img, .hero.frame-arch img, .hero.frame-rect img, .hero .plate { border-radius: 18px; }
  .gallery a { width: 64px; height: 64px; border-radius: 10px; }
  .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; }
  .cover h1, .text h2, .chapter h2, .colophon h2 { font-variation-settings: "opsz" 48, "wght" 500; letter-spacing: 0; }
  .cover .tagline, .text .sub, .index-list .row .t { font-variation-settings: "opsz" 36, "wght" 450; }
  .lightbox .stage { padding: 56px 12px 8px; }
  .lightbox .prev, .lightbox .next { display: none; }
}

/* =====================================================================
   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-"] .gallery .count, body[class*="format-"] .cover .cta, body[class*="format-"] .colophon .cta { display: none; }
body[class*="format-"] main { scroll-snap-type: none; }
body[class*="format-"] section { break-after: page; page-break-after: always; scroll-snap-align: none; background: var(--plate); color: var(--ink); }
body[class*="format-"] section:last-of-type { break-after: auto; page-break-after: auto; }
body[class*="format-"] .el { animation: none !important; opacity: 1; transform: none; }
body[class*="format-"] section .art { inset: 0; -webkit-mask-image: none; mask-image: none; transform: none !important; }
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 { 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; }
}