/* The Cook's Book — static pages (welcome, index, recipes, menus, lessons).
   Same identity as the reader: enamel paper, ink, cobalt stoneware, tomato only for time.
   The one bold thing is the contents page: chapter numbers in the margin, dotted leaders, times on the right.
   Generated pages: _private/kokeboka/tools/build_site.py. No framework, no JS. */
:root {
  --bg: #f7f6f1; --surface: #fffefb; --ink: #1b1e24; --muted: #646a74; --line: #e2e0d8;
  --cobalt: #2340a0; --cobalt-wash: #e7ebf7; --tomato: #c8402a; --stone: #ebe8e1;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --display: "Fraunces", Georgia, serif;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: 20px; --max: 1120px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14161b; --surface: #1c1f26; --ink: #ecebe6; --muted: #9aa0aa; --line: #2c3039;
    --cobalt: #8fa6ff; --cobalt-wash: #232a44; --tomato: #ff7a5c; --stone: #22252c; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #14161b; --surface: #1c1f26; --ink: #ecebe6; --muted: #9aa0aa; --line: #2c3039;
  --cobalt: #8fa6ff; --cobalt-wash: #232a44; --tomato: #ff7a5c; --stone: #22252c; color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 18px/1.62 var(--serif); font-variant-numeric: lining-nums; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--cobalt); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2.5px solid var(--cobalt); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: 6px; font: 600 15px var(--ui); z-index: 9; }
.skip:focus { left: 8px; }
.muted { color: var(--muted); }

/* ---- Top bar and footer ---- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: var(--max); margin: 0 auto; padding: 12px var(--gutter); }
.brand { font: 400 20px/1 var(--display); color: var(--ink); text-decoration: none; letter-spacing: -0.01em; white-space: nowrap; }
.top nav { display: flex; align-items: center; gap: 16px; font: 500 15px var(--ui); white-space: nowrap; }
.top nav a { color: var(--ink); text-decoration: none; }
.top nav a.open { color: var(--cobalt); border: 1.5px solid currentColor; border-radius: 999px; padding: 7px 14px; }
@media (max-width: 420px) { .brand { font-size: 18px; } .top nav a:not(.open) { display: none; } }
.foot { max-width: var(--max); margin: 72px auto 0; padding: 0 var(--gutter) 48px; font: 400 14.5px/1.55 var(--ui); color: var(--muted); }
.foot p { margin: 0 0 10px; max-width: 60ch; }
.foot .foot-book { border-top: 1px solid var(--line); padding-top: 28px; max-width: none; }
.foot p:last-child { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot a { color: var(--muted); }
.foot .foot-book a { color: var(--ink); }

/* ---- Buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border-radius: 999px;
  border: 0; background: var(--cobalt); color: var(--surface); font: 600 16px var(--ui); text-decoration: none; cursor: pointer; }
.btn.ghost { background: transparent; color: var(--cobalt); border: 1.5px solid currentColor; }
.btn small { font: 500 13px var(--ui); opacity: .78; }
.btn:disabled { opacity: .5; cursor: progress; }

/* ---- Breadcrumbs, prev/next ---- */
main { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.crumbs ol { list-style: none; margin: 4px 0 20px; padding: 0; display: flex; flex-wrap: wrap; font: 400 14px/1.4 var(--ui); color: var(--muted); }
.crumbs li + li::before { content: "/"; margin: 0 8px; color: var(--line); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--cobalt); text-decoration: underline; }
.recipe .crumbs li[aria-current], .prose-page .crumbs li[aria-current] { display: none; }
.crumbs li[aria-current] { color: var(--ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 56px 0 0; border-top: 1px solid var(--line); padding-top: 20px; }
.pn a { text-decoration: none; color: var(--ink); font: 400 19px/1.25 var(--display); }
.pn a span { display: block; font: 500 13px/1.6 var(--ui); color: var(--muted); }
.pn a:hover { color: var(--cobalt); }
.pn .next { text-align: right; }
.where { font: 500 14.5px/1.4 var(--ui); color: var(--muted); margin: 0 0 6px; display: flex; gap: 14px; flex-wrap: wrap; }
.where a { color: var(--cobalt); text-decoration: none; }

/* ---- Welcome: the cover ---- */
.hero { position: relative; display: grid; margin: 0 calc(-1 * var(--gutter)); }
.hero-photo { position: relative; background: #e9e5df; }
.hero-photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
/* Printed on the cover, in ink in both themes: the photograph's top third is calm stone. */
.hero h1 { position: absolute; top: clamp(18px, 5.5vw, 44px); left: var(--gutter); right: var(--gutter); z-index: 1; color: #1b1e24;
  font-size: clamp(60px, 17.5vw, 132px); font-weight: 300; line-height: .88; letter-spacing: -0.045em; font-variation-settings: "opsz" 144; }
.hero h1 span { display: block; }
.hero h1 span + span { padding-left: .5em; font-style: italic; letter-spacing: -0.03em; }
.hero-text { padding: 22px var(--gutter) 0; }
.promise { font: italic 300 clamp(22px, 5.8vw, 30px)/1.3 var(--display); margin: 0 0 22px; max-width: 26ch; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.actions .btn { flex: 1 1 140px; white-space: nowrap; padding: 0 16px; }
.pdf { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pdf .btn { min-height: 46px; padding: 6px 10px; flex-direction: column; gap: 0; border-width: 1px; border-color: var(--line); color: var(--ink); font-size: 14.5px; line-height: 1.25; border-radius: 12px; }
.pdf .btn small { color: var(--muted); opacity: 1; font-size: 12.5px; }
.pdf-msg { grid-column: 1 / -1; font: 400 14px/1.45 var(--ui); color: var(--muted); margin: 2px 0 0; min-height: 1px; }

/* ---- Welcome: what is in it ---- */
.inside { margin-top: 56px; }
.inside h2, .sec-h h2 { font-size: clamp(32px, 8.4vw, 52px); font-weight: 300; letter-spacing: -0.025em; margin-bottom: 14px; }
.inside-text { max-width: 36em; }
.inside .big { font: 400 clamp(21px, 5.2vw, 25px)/1.42 var(--display); letter-spacing: -0.005em; }
.specimen { margin: 28px 0 0; }
.spec-in { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 22px 20px 20px; color: var(--ink); text-decoration: none;
  box-shadow: 0 1px 0 var(--line), 0 26px 50px -36px rgba(27, 30, 36, .5); transform: rotate(-0.6deg); }
.spec-where { display: block; font: 500 13px var(--ui); color: var(--cobalt); }
.spec-t { display: block; font: 350 32px/1.05 var(--display); letter-spacing: -0.03em; margin: 4px 0 2px; }
.spec-s { display: block; font: italic 400 16px/1.4 var(--serif); color: var(--muted); margin-bottom: 14px; }
.spec-in .ing { margin-bottom: 14px; }
.spec-in .ing li { grid-template-columns: 4.2em 1fr; font-size: 16px; padding: 6px 0; }
.spec-in .ing .us { font-size: 14px; }
.spec-step, .spec-why { display: block; font-size: 15.5px; line-height: 1.5; margin-top: 10px; }
.spec-step b { font: 400 20px var(--display); color: var(--cobalt); margin-right: 4px; }
.spec-why { background: var(--cobalt-wash); padding: 10px 12px; border-radius: 4px; }
.specimen figcaption { font: 400 14px/1.45 var(--ui); color: var(--muted); margin-top: 14px; max-width: 46ch; }

/* ---- Welcome: contents ---- */
.contents { margin-top: 72px; }
.sec-h { margin-bottom: 8px; }
.sec-h p { color: var(--muted); font: 400 16px/1.5 var(--ui); margin: 0; }
.part { margin-top: 44px; }
.part-t { font: italic 300 clamp(26px, 6.6vw, 38px)/1.1 var(--display); color: var(--cobalt); letter-spacing: -0.02em; }
.part-n { color: var(--muted); font-size: 16.5px; margin: 4px 0 0; max-width: 46ch; }
.toc-ch { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 16px; }
.toc-ch header { display: grid; grid-template-columns: 40px 1fr auto; align-items: baseline; column-gap: 8px; }
.toc-ch .no { font: italic 300 30px/1 var(--display); color: var(--muted); font-variant-numeric: oldstyle-nums; }
.toc-ch h3 { font-size: clamp(24px, 6.2vw, 30px); font-weight: 400; letter-spacing: -0.02em; }
.toc-ch h3 a { color: var(--ink); text-decoration: none; }
.toc-ch h3 a:hover { color: var(--cobalt); }
.toc-ch .cnt { font: 500 13.5px var(--ui); color: var(--muted); white-space: nowrap; }
.ci { margin: 4px 0 14px 48px; font-size: 16px; line-height: 1.5; color: var(--muted); max-width: 52ch; }
.strip { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: 38vw; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 10px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.card { scroll-snap-align: start; }
.card a { display: block; color: var(--ink); text-decoration: none; }
.card img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 6px; background: var(--stone); }
.card .ct { display: block; font: 400 17px/1.2 var(--display); margin-top: 8px; letter-spacing: -0.01em; }
.card .cs { display: block; font-size: 14.5px; line-height: 1.35; color: var(--muted); margin-top: 3px; }
.strip .cs { display: none; }
.card .cm { display: block; font: 500 13px var(--ui); color: var(--muted); margin-top: 4px; }
.card a:hover .ct { color: var(--cobalt); }
details { margin-top: 6px; }
summary { cursor: pointer; font: 500 15.5px var(--ui); color: var(--cobalt); padding: 8px 0; list-style: none; display: flex; align-items: center; gap: 8px; }
summary::-webkit-details-marker { display: none; }
summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
details[open] summary::before { transform: rotate(45deg); }

/* Dotted leaders: the title, a row of dots, the time. Read like a printed contents page. */
.leaders { list-style: none; margin: 4px 0 0; padding: 0; }
.leaders a { display: flex; align-items: baseline; gap: 6px; padding: 7px 0; color: var(--ink); text-decoration: none; font-size: 17px; line-height: 1.3; }
.leaders .lt { flex: 0 1 auto; }
.leaders .ld { flex: 1 1 24px; min-width: 24px; border-bottom: 1.5px dotted color-mix(in srgb, var(--muted) 55%, transparent); transform: translateY(-4px); }
.leaders .lm { flex: none; font: 500 13.5px var(--ui); color: var(--muted); font-variant-numeric: tabular-nums; }
.leaders a:hover .lt { color: var(--cobalt); }
.lessons { margin: 4px 0 0; padding: 0; list-style: none; counter-reset: l; }
.lessons li { counter-increment: l; }
.lessons a { display: grid; grid-template-columns: 2em 1fr; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
ol.lessons a::before { content: counter(l); font: italic 300 20px/1.2 var(--display); color: var(--cobalt); }
ul.lessons a { grid-template-columns: 1fr; }
.lessons .lt { font: 400 21px/1.25 var(--display); }
.lessons .ls { grid-column: 2; font-size: 15.5px; color: var(--muted); line-height: 1.45; margin-top: 2px; }
ul.lessons .ls { grid-column: 1; }
.lessons.compact a { font-size: 17.5px; padding: 7px 0; }
.lessons a:hover { color: var(--cobalt); }

/* ---- Welcome: indexes ---- */
.azsec, .bying { margin-top: 72px; }
.letters { display: flex; flex-wrap: wrap; gap: 2px; margin: 14px 0 18px; font: 500 15px var(--ui); }
.letters a { min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; text-decoration: none; background: var(--surface); border: 1px solid var(--line); }
.az { columns: 2; column-gap: 20px; }
.az-g { break-inside: avoid; margin-bottom: 16px; }
.az-g h3 { font: italic 300 26px/1 var(--display); color: var(--cobalt); margin-bottom: 4px; }
.az ul { list-style: none; margin: 0; padding: 0; }
.az li { font-size: 15.5px; line-height: 1.3; padding: 3px 0; }
.az li a { color: var(--ink); text-decoration: none; }
.az li a:hover { color: var(--cobalt); text-decoration: underline; }
.az .m { font: 500 11.5px var(--ui); color: var(--muted); }
.ixs { margin-top: 18px; }
.ix { margin: 0 0 14px; padding-left: 1em; text-indent: -1em; font-size: 16px; line-height: 1.55; break-inside: avoid; }
.ix h3, .ix p { display: inline; }
.ix h3 { font: 600 16px var(--serif); margin-right: 6px; }
.ix h3::after { content: ""; }
.ix a { color: var(--ink); text-decoration-color: color-mix(in srgb, var(--muted) 40%, transparent); }
.ix a:hover { color: var(--cobalt); }

/* ---- Recipe and menu pages ---- */
.rhead { display: flex; flex-direction: column; }
.rtitle { display: contents; }
.rhead .where { display: none; }
.rhead h1 { order: 2; font-size: clamp(40px, 10.5vw, 68px); font-weight: 350; letter-spacing: -0.03em; line-height: 1.02; font-variation-settings: "opsz" 120; margin-bottom: 8px; }
.rhead .sub { order: 3; font: italic 400 19px/1.4 var(--serif); color: var(--muted); margin: 0 0 16px; max-width: 34ch; }
.facts { order: 4; display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0 0 20px; font-family: var(--ui); }
.facts div { padding: 0 16px 0 0; margin-right: 16px; border-right: 1px solid var(--line); }
.facts div:last-child { border-right: 0; }
.facts dt { font-size: 12.5px; color: var(--muted); }
.facts dd { margin: 0; font-size: 15.5px; font-weight: 600; }
.rhead .hero-photo { order: 5; margin: 0 calc(-1 * var(--gutter)) 20px; background: var(--stone); }
.rhead .hero-photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.rhead .intro { order: 6; font-size: 19px; line-height: 1.6; max-width: 36em; }
.cta { order: 7; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin: 4px 0 8px; }
.cta .btn { width: 100%; }
.cta p { font: 400 14px/1.45 var(--ui); color: var(--muted); margin: 10px 2px 0; }

.method { margin-top: 36px; }
.inmenus h2 { font-size: 22px; font-weight: 450; margin-bottom: 6px; }
.method h2, .courses-wrap h2, .plan h2, .shop h2, .related h2 { font-size: 30px; font-weight: 400; letter-spacing: -0.02em; margin-bottom: 12px; }
.ingredients h3 { font: 600 15px var(--ui); margin: 18px 0 4px; color: var(--muted); }
.ing { list-style: none; margin: 0; padding: 0; }
.ing li { display: grid; grid-template-columns: 4.4em 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 17px; line-height: 1.4; }
.ing .q { font: 600 15px/1.55 var(--ui); font-variant-numeric: tabular-nums; text-align: right; }
.ing .us { color: var(--muted); font-size: 15px; white-space: nowrap; }
.ing .n { display: block; color: var(--muted); font-size: 15px; font-style: italic; }
.labels { margin: 20px 0 0; font: 400 14.5px/1.45 var(--ui); }
.labels div { display: grid; grid-template-columns: 5.6em 1fr; gap: 10px; padding: 4px 0; }
.labels dt { color: var(--muted); text-align: right; }
.labels dd { margin: 0; }
.method-steps { margin-top: 40px; }
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; }
.steps li { counter-increment: s; position: relative; padding: 0 0 18px 46px; font-size: 18px; max-width: 36em; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: -4px; width: 34px; text-align: right; font: 400 28px/1 var(--display); color: var(--cobalt); font-variant-numeric: lining-nums; }
.timer { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font: 600 13.5px/1 var(--ui); color: var(--tomato); vertical-align: 1px; margin-left: 2px; }
.timer::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid currentColor; }
.why { background: var(--cobalt-wash); border-radius: 4px; padding: 18px 20px; margin: 24px 0; max-width: 38em; }
.why h2 { font-size: 24px; font-style: italic; font-weight: 400; color: var(--cobalt); margin-bottom: 6px; }
.why p { margin: 0; }
.box { margin: 26px 0 0; max-width: 38em; }
.box h2 { font-size: 22px; font-weight: 450; margin-bottom: 6px; }
.box ul { margin: 0; padding-left: 1.1em; }
.box li { margin-bottom: 8px; }
.box li::marker { color: var(--muted); }
.vars dt { font-weight: 600; margin-top: 8px; }
.vars dd { margin: 2px 0 0; }
.locked { margin: 28px 0 0; padding: 20px; border: 1.5px dashed var(--line); border-radius: 14px; max-width: 38em; }
.locked h2 { font-size: 24px; margin-bottom: 6px; }

.related, .inmenus { margin-top: 56px; }
.related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px 28px; }
.related a, .courses .course-link { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; padding: 8px 0; color: var(--ink); text-decoration: none; }
.th { width: 56px; height: 70px; object-fit: cover; border-radius: 4px; background: var(--stone); }
.th.ph { display: block; background: linear-gradient(135deg, var(--stone), color-mix(in srgb, var(--cobalt-wash) 70%, var(--stone))); }
.rt { display: block; font: 400 19px/1.2 var(--display); }
.rs { display: block; font-size: 14.5px; color: var(--muted); line-height: 1.35; margin-top: 2px; }
.related a:hover .rt, .course-link:hover .rt { color: var(--cobalt); }
.inmenus ul { margin: 0; padding-left: 1.1em; }

/* Menus */
.courses-wrap { margin-top: 36px; }
.courses { list-style: none; margin: 0; padding: 0; }
.courses li { border-bottom: 1px solid var(--line); padding: 6px 0 10px; }
.courses .course-link { grid-template-columns: 72px 1fr; }
.courses .th { width: 72px; height: 90px; }
.cc { display: block; font: 500 13px var(--ui); color: var(--cobalt); }
.cn { margin: 2px 0 0 86px; font-size: 15.5px; color: var(--muted); line-height: 1.45; }
.plan { margin-top: 44px; }
.timeline { list-style: none; margin: 14px 0 0; padding: 0; border-left: 2px solid var(--line); }
.timeline li { position: relative; padding: 0 0 18px 20px; max-width: 38em; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--bg); border: 2px solid var(--cobalt); }
.timeline li:last-child::before { background: var(--cobalt); }
.tt { display: block; font: 600 14px var(--ui); color: var(--cobalt); font-variant-numeric: tabular-nums; }
.timeline p { margin: 2px 0 0; }
.shop { margin-top: 44px; }
.shop-cols { columns: 1; column-gap: 32px; }
.shop-cols > div { break-inside: avoid; margin-bottom: 16px; }
.shop h3 { font: 600 15px var(--ui); color: var(--muted); margin-bottom: 4px; }
.shop ul { margin: 0; padding-left: 1.1em; font-size: 16.5px; }

/* ---- Chapter pages ---- */
.chead h1 { font-size: clamp(42px, 11vw, 76px); font-weight: 300; letter-spacing: -0.035em; line-height: 1; font-variation-settings: "opsz" 144; margin-bottom: 14px; }
.chead .intro { font-size: 19px; max-width: 36em; }
.count { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font: 500 15px var(--ui); color: var(--muted); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 10px 0; margin: 20px 0 28px; }
.count .btn { min-height: 42px; font-size: 14.5px; padding: 0 16px; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 14px; }
.also { font-size: 26px; margin: 44px 0 6px; }

/* ---- Lessons and reference ---- */
.prose { max-width: 40em; }
.phead h1 { font-size: clamp(38px, 10vw, 62px); font-weight: 350; letter-spacing: -0.03em; line-height: 1.04; margin-bottom: 22px; }
.prose h2 { font-size: 28px; margin: 34px 0 10px; }
.prose h3 { font-size: 22px; margin: 26px 0 8px; }
.prose h4 { font: 600 17px var(--ui); margin: 22px 0 6px; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin-bottom: 6px; }
.prose table { width: 100%; border-collapse: collapse; font: 400 14.5px/1.4 var(--ui); margin: 8px 0 22px; display: block; overflow-x: auto; }
.prose th { text-align: left; font-weight: 600; border-bottom: 2px solid var(--ink); padding: 6px 10px 6px 0; }
.prose td { border-bottom: 1px solid var(--line); padding: 6px 10px 6px 0; vertical-align: top; }
.prose strong { font-weight: 600; }

/* ---- Wider screens ---- */
@media (min-width: 640px) {
  :root { --gutter: 32px; }
  .strip { grid-auto-columns: 172px; }
  .az { columns: 3; }
  .cards { grid-template-columns: repeat(3, 1fr); gap: 34px 22px; }
  .shop-cols { columns: 2; }
  .prose table { display: table; }
  .related ul { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 64px; margin: 12px 0 0; align-items: end; }
  .hero .hero-photo { order: 2; border-radius: 4px; overflow: hidden; box-shadow: 0 1px 0 var(--line), 0 40px 70px -40px rgba(27, 30, 36, .5); }
  .hero h1 { position: static; color: var(--ink); font-size: clamp(88px, 9.6vw, 128px); margin-bottom: 30px; }
  .hero-text { padding: 0 0 8px; }
  .promise { font-size: 31px; }
  .actions .btn { flex: 0 0 auto; }
  .pdf { max-width: 460px; }
  .inside { margin-top: 112px; }
  .inside-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 72px; align-items: start; }
  .specimen { margin-top: 6px; }
  .contents { margin-top: 112px; }
  .part { display: grid; grid-template-columns: 250px minmax(0, 1fr); column-gap: 56px; margin-top: 72px; }
  .part-h { position: sticky; top: 24px; align-self: start; }
  .part-b > .toc-ch:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
  .toc-ch > .strip { margin-left: 64px; }
  .toc-ch header { grid-template-columns: 56px 1fr auto; }
  .toc-ch .no { font-size: 38px; }
  .toc-ch h3 { font-size: 34px; }
  .ci { margin-left: 64px; }
  .toc-ch > details, .toc-ch > .lessons, .toc-ch > .leaders { margin-left: 64px; }
  .strip { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); overflow: visible; margin: 0; padding: 4px 0 10px; gap: 22px 16px; }
  .strip .ct { font-size: 15.5px; }
  .leaders { columns: 2; column-gap: 40px; }
  .leaders li { break-inside: avoid; }
  .leaders a { font-size: 16px; padding: 5px 0; }
  .az { columns: 4; }
  .ixs { columns: 2; column-gap: 48px; }

  .rhead { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 0 56px; align-items: start; }
  .recipe:not(.has-photo) .rhead { grid-template-columns: minmax(0, 1fr); }
  .rtitle { display: block; padding-top: 12px; }
  .rhead .hero-photo { order: 5; margin: 0; border-radius: 4px; overflow: hidden; }
  .rhead h1 { font-size: clamp(52px, 5.6vw, 72px); }
  .cta { display: flex; align-items: center; gap: 18px; margin-top: 18px; max-width: 36em; }
  .cta .btn { width: auto; flex: none; }
  .cta p { margin: 0; }
  .method { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 64px; margin-top: 64px; }
  .ingredients { position: sticky; top: 20px; align-self: start; }
  .method-steps { margin-top: 0; }
  .ing li { font-size: 16.5px; }
  .chead { max-width: 820px; }
  .cards { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-text > :not(h1) { animation: rise .8s ease both .15s; }
  @keyframes rise { from { opacity: 0; } }
}
@media print {
  .top, .foot, .cta, .pn, .crumbs, .related, .inmenus { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
}