/* The Sunday Pot. The look is the cover's: cream paper, the pot's enamel red for the title's "Pot", the key word
   in each line and every action, Playfair Display (italic and bold, as on the cover) with Montserrat in spaced
   caps. The paper warms half a shade at a time from midday cream to early-evening amber at the buy moment, then
   eases back to cream for the quiet end, so the page reads as one Sunday afternoon. */

@font-face { font-family: Playfair; src: url(/assets/fonts/playfair.woff2) format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: Playfair; src: url(/assets/fonts/playfair-italic.woff2) format('woff2'); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: Montserrat; src: url(/assets/fonts/montserrat.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
	--paper: #f1e2cd;
	--paper-2: #eedbc0;
	--paper-3: #ebd2b1;
	--paper-4: #e8c9a2;
	--amber: #e4bd8d;
	--red: #c24620;
	--red-deep: #862908;
	--red-hi: #d2683e;
	--spoon: #d9a679;
	--linen: #b69d87;
	--stripe: #b4553c;
	--ink: #2f1e14;
	--ink-soft: #5d4637;
	--serif: Playfair, Georgia, 'Times New Roman', serif;
	--sans: Montserrat, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--wrap: min(1180px, calc(100vw - 48px));
}

* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
.still html, html.still { scroll-behavior: auto; }
body { margin: 0; font: 400 1.0625rem/1.6 var(--sans); }
/* The towel runs off the right edge on purpose; clip (not hidden) keeps the pinned scene's sticky stage working. */
main { overflow-x: clip; }
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; font-weight: 700; }
p { margin: 0; }
a { color: inherit; }
cite { font-style: italic; }
em { font-style: inherit; color: var(--red); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Placeholders look like placeholders: a dashed tag in the page's own type. */
.ph-tag {
	display: inline-block; padding: 0.15em 0.55em; border: 1px dashed #8a7564; border-radius: 3px;
	font: 600 0.66rem/1.4 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: #6a5545; background: #fff8ee99;
	font-style: normal; vertical-align: 0.15em;
}
.ph { color: #7a6455; font-size: 0.95rem; }
.ph .ph-tag { margin-right: 0.45em; }

/* Buttons. Red is the reader's colour. */
.btn {
	display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0.85rem 1.6rem;
	font: 600 0.8rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
	border: 1.5px solid var(--red); border-radius: 999px; cursor: pointer; white-space: nowrap; transition: transform 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s;
}
.btn-red { background: var(--red); color: #fff7ee; box-shadow: 0 6px 18px -8px #86290899; }
.btn-red:hover { background: var(--red-deep); border-color: var(--red-deep); transform: translateY(-1px); }
.btn-line { background: transparent; color: var(--red); }
.btn-line:hover { background: #c246200f; }
.btn-sm { min-height: 38px; padding: 0.5rem 1rem; font-size: 0.7rem; }
.btn-lg { min-height: 58px; padding: 1rem 2.2rem; font-size: 0.86rem; }
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible { outline: 3px solid var(--red-deep); outline-offset: 3px; }

.label { font: 600 0.74rem/1.2 var(--sans); letter-spacing: 0.3em; text-transform: uppercase; color: var(--red); margin-bottom: 0.9rem; }
.h2 { font: 700 clamp(2rem, 4vw, 3.2rem)/1.08 var(--serif); letter-spacing: -0.01em; }
.h3 { font: 700 clamp(1.5rem, 2.6vw, 2.1rem)/1.15 var(--serif); }

/* Top bar: the title mark and a small buy control that stays all the way down. */
.bar {
	position: fixed; z-index: 40; inset: 0 0 auto; height: 60px; display: flex; align-items: center; justify-content: space-between;
	padding: 0 max(20px, env(safe-area-inset-left)); background: #f1e2cdd9; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid #2f1e1414; transition: background 0.6s;
}
.mark { font: 400 1.3rem/1 var(--serif); text-decoration: none; }
.mark i { font-style: italic; }
.mark b { color: var(--red); font-weight: 800; }
.bar-nav { display: flex; gap: 1.2rem; align-items: center; }
.bar-link { font: 600 0.72rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; color: var(--ink-soft); }
.bar-link:hover { color: var(--red); }
.skip { position: absolute; left: 12px; top: -60px; background: var(--ink); color: var(--paper); padding: 0.6rem 1rem; z-index: 50; }
.skip:focus { top: 10px; }

/* The tea towel's two thin red stripes: rules for the problem lines, and the last lines of the page. */
.stripes { height: 9px; background: linear-gradient(var(--stripe) 0 2px, transparent 2px 6px, var(--stripe) 6px 8px, transparent 8px); opacity: 0.75; }

/* 1. The promise */
.hero {
	position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center;
	gap: 2rem; width: var(--wrap); margin: 0 auto; padding: 92px 0 40px;
}
.proof { margin-bottom: 1.6rem; font-size: 0.85rem; }
.author-line { font: 600 0.82rem/1.5 var(--sans); letter-spacing: 0.32em; text-transform: uppercase; }
.author-line span { display: block; letter-spacing: 0.08em; text-transform: none; font-weight: 500; color: var(--ink-soft); font-size: 0.9rem; }
.title { margin: 1.1rem 0 0.4rem; font-family: var(--serif); line-height: 0.86; }
.title i { display: block; font-weight: 400; font-size: clamp(3rem, 6.4vw, 5.6rem); letter-spacing: -0.01em; }
.title b { display: block; font-weight: 800; font-size: clamp(6.2rem, 14vw, 12.5rem); color: var(--red); letter-spacing: -0.02em; margin-left: 0.04em; }
.subtitle { font: 500 1.15rem/1.4 var(--sans); color: var(--ink-soft); margin: 0.6rem 0 1.4rem; }
.promise { font: italic 400 clamp(1.5rem, 2.4vw, 2rem)/1.25 var(--serif); max-width: 22em; }
.promise em { font-weight: 700; }
.actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }

.hero-stage { position: relative; height: min(76svh, 720px); }
.towel { position: absolute; left: -6%; right: -18%; bottom: 0; width: 124%; max-width: none; height: auto; }
.hero-book { position: absolute; inset: 0 6% 9% 10%; margin: 0; }
.hero-book img[data-book-fallback] { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 26px 30px #5d2a1240); }
.steam { position: absolute; pointer-events: none; }
.hero-steam { left: 32%; top: 0; width: 40%; height: 55%; }
.stripes-run { position: absolute; left: calc(50% - 50vw); right: calc(50% - 50vw); bottom: 0; }

/* 2. The problem */
.problem { position: relative; width: var(--wrap); margin: 0 auto; padding: 14vh 0 0; }
.ruled { max-width: 860px; }
.ruled p {
	font: 400 clamp(1.6rem, 3.2vw, 2.6rem)/1.3 var(--serif); padding: 1.2rem 0 1.25rem;
	background: linear-gradient(var(--stripe) 0 2px, transparent 2px 6px, var(--stripe) 6px 8px, transparent 8px) left bottom / 100% 9px no-repeat;
	background-color: transparent;
}
.ruled p:nth-child(2) { padding-left: 8%; }
.ruled p:nth-child(3) { padding-left: 16%; font-style: italic; }
.slower { margin: 3.2rem 0 0; font: 600 0.86rem/1 var(--sans); letter-spacing: 0.3em; text-transform: uppercase; color: var(--red); }
.rim { height: 22vh; overflow: hidden; margin-top: 4vh; display: flex; justify-content: center; }
.rim img { width: min(720px, 80vw); height: auto; align-self: flex-start; transform: translateY(8%); }
.js .rim { display: none; }

/* Lines that fade up once, plainly, the first time they are seen. */
.js:not(.still) .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.9s ease, transform 0.9s ease; }
.js:not(.still) .reveal.seen { opacity: 1; transform: none; }

/* 3. The key idea: one pinned scene, three screens. */
.method { position: relative; }
.method-skip {
	position: absolute; z-index: 5; right: max(20px, calc(50vw - 590px)); top: 76px; font: 600 0.7rem/1 var(--sans);
	letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); padding: 0.6rem 0.2rem;
}
.method-track { display: none; }
.pinned .method-track { display: block; height: 400vh; }
.pinned .steps { display: none; }
.method-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.clock {
	position: absolute; left: 50%; top: 84px; transform: translateX(-50%); width: min(720px, 86vw); margin: 0; padding: 0 0 14px;
	list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); text-align: center;
	font: 600 0.7rem/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft);
	border-bottom: 1px solid #2f1e1440;
}
.clock li { opacity: 0.55; transition: opacity 0.3s, color 0.3s; }
.clock li.on { opacity: 1; color: var(--red); }
.clock-mark {
	position: absolute; bottom: -6px; left: 12.5%; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%;
	background: var(--red); box-shadow: 0 0 0 4px var(--paper);
}
.light {
	position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: 0;
	background: linear-gradient(105deg, transparent 20%, #fff6e0 38%, #ffe6b0 48%, transparent 66%);
	background-size: 260% 100%; background-position: 100% 0;
}
.scene { position: absolute; left: 50%; bottom: 0; width: min(1000px, 92vw, (100svh - 250px) * 1.4); aspect-ratio: 1400 / 1000; transform: translateX(-50%); }
.scene > img, .scene > div, .scene > canvas { position: absolute; }
.sc-open { left: 14%; bottom: 0; width: 72%; height: auto; }
.sc-closed { left: 12%; bottom: 3%; width: 76%; height: auto; opacity: 0; filter: drop-shadow(0 24px 22px #5d2a1238); }
.sc-ing { width: 14%; height: auto; opacity: 0; top: 0; }
.sc-chicken { left: 34%; width: 15%; }
.sc-beans { left: 50%; width: 11%; }
.sc-tomato { left: 42%; width: 12%; }
.sc-herbs { left: 56%; width: 14%; }
.method-steam { left: 30%; top: 0; width: 40%; height: 60%; opacity: 0; }
.sc-table { inset: auto 0 3%; height: 97%; opacity: 0; overflow: hidden; border-radius: 16px; box-shadow: 0 30px 60px -30px #5d2a1288; }
.sc-table img { width: 100%; height: 100%; object-fit: cover; }
.sc-left { right: -4%; bottom: 4%; width: 26%; height: auto; opacity: 0; }
.lines { position: absolute; left: 50%; top: calc(84px + 3.4rem); transform: translateX(-50%); width: min(900px, 90vw); text-align: center; }
.line { position: absolute; inset: 0 0 auto; opacity: 0; font: 400 clamp(1.7rem, 3.4vw, 2.9rem)/1.2 var(--serif); }
.line p { margin: 0; }
.line em { font-weight: 700; }
.line .small, .steps .small { font: 500 0.95rem/1.4 var(--sans); color: var(--ink-soft); margin-top: 0.7rem; }

/* Without the pinned scene (phones, reduced motion, no JavaScript): the same four steps as a list. */
.steps { list-style: none; margin: 0 auto; padding: 12vh 0 4vh; width: var(--wrap); display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
.steps li { display: grid; align-content: start; gap: 0.5rem; }
.steps img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--paper-2); }
.steps .t { font: 600 0.7rem/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--red); margin-top: 0.4rem; }
.steps p { font: 400 1.35rem/1.25 var(--serif); }
.steps em { font-weight: 700; }
.js:not(.still) .steps.play li { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js:not(.still) .steps.play.seen li { opacity: 1; transform: none; }
.steps.play.seen li:nth-child(2) { transition-delay: 0.45s; }
.steps.play.seen li:nth-child(3) { transition-delay: 0.9s; }
.steps.play.seen li:nth-child(4) { transition-delay: 1.35s; }

/* 4. Inside the book: the light moves on, the paper warms half a shade. */
.inside { padding: 14vh max(24px, calc(50vw - 590px)) 12vh; background: linear-gradient(var(--paper), var(--paper-2)); }
.seasons { margin-top: 2.4rem; }
.season-tabs { display: none; }
.season { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2rem; align-items: end; margin-bottom: 2rem; }
.season img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; }
.season h3 { font: italic 400 2.4rem/1 var(--serif); margin-bottom: 1rem; }
.js .season-tabs { display: flex; gap: 0.4rem; border-bottom: 1px solid #2f1e1426; margin-bottom: 1.6rem; }
.js .season-tabs button {
	appearance: none; border: 0; background: none; padding: 0.9rem 1.2rem; cursor: pointer; color: var(--ink-soft);
	font: 600 0.78rem/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.js .season-tabs button[aria-selected="true"] { color: var(--red); border-bottom-color: var(--red); }
.js .season { margin: 0; }
.js .season[hidden] { display: none; }
.js .season img { animation: crossfade 0.45s ease; }
@keyframes crossfade { from { opacity: 0.2; } }
.list-title { font: 700 1.6rem/1.2 var(--serif); margin: 4rem 0 1.2rem; }
.gives { margin: 0; padding: 0; list-style: none; counter-reset: g; columns: 2; column-gap: 3rem; max-width: 980px; }
.gives li { counter-increment: g; break-inside: avoid; display: grid; grid-template-columns: 2.4rem 1fr; padding: 0.75rem 0; border-top: 1px solid #2f1e1420; font-size: 1.08rem; }
.gives li::before { content: counter(g); font: 700 1.25rem/1.2 var(--serif); color: var(--red); }

/* 5. A word from other cooks */
.word { padding: 10vh max(24px, calc(50vw - 590px)); background: linear-gradient(var(--paper-2), var(--paper-3)); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.card { margin: 0; padding: 1.6rem; background: #fff7ec80; border: 1px dashed #8a756480; border-radius: 10px; }
.card p { font: italic 400 1.3rem/1.35 var(--serif); color: #6a5545; margin: 1rem 0; }
.card footer { font: 600 0.72rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: #7a6455; }
.mini-buy { display: flex; align-items: center; gap: 1.6rem; margin-top: 3rem; padding: 1.2rem 1.6rem; border-top: 1px solid #2f1e1426; border-bottom: 1px solid #2f1e1426; }
.mini-buy img { width: 64px; height: auto; box-shadow: 0 10px 20px -10px #5d2a1280; }
.mini-buy div { flex: 1; }
.mini-buy h3 { font: 700 1.6rem/1.2 var(--serif); }

/* 6. The cook */
.author { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: 4rem; align-items: center; padding: 12vh max(24px, calc(50vw - 520px)); background: linear-gradient(var(--paper-3), var(--paper-3)); }
.portrait { position: relative; margin: 0; padding: 14px; }
.portrait img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }
.portrait .frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.portrait .frame rect { fill: none; stroke: var(--stripe); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 0; }
.portrait figcaption { position: absolute; left: 26px; bottom: 26px; }
.js:not(.still) .portrait:not(.seen) img { filter: blur(8px); opacity: 0.7; }
.js:not(.still) .portrait:not(.seen) .frame rect { stroke-dashoffset: 100; }
.portrait img { transition: filter 0.8s ease, opacity 0.8s ease; }
.portrait .frame rect { transition: stroke-dashoffset 0.9s cubic-bezier(.6,.1,.3,1); }
.role { font: italic 400 1.4rem/1.3 var(--serif); margin: 0.6rem 0 1.4rem; }
.author-copy .ph { margin-top: 0.9rem; }

/* 7. Try one first: a recipe card pulled from the book. */
.recipe { padding: 4vh max(24px, calc(50vw - 520px)) 12vh; background: linear-gradient(var(--paper-3), var(--paper-4)); }
.card-recipe { position: relative; background: #fffaf2; border-radius: 6px; padding: clamp(1.6rem, 4vw, 3.4rem); box-shadow: 0 30px 60px -30px #5d2a1266; border-top: 9px solid transparent;
	border-image: linear-gradient(var(--stripe) 0 2px, transparent 2px 6px, var(--stripe) 6px 8px, transparent 8px) 9 0 0 0 / 9px 0 0 0; }
.from { font: 600 0.72rem/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); }
.card-recipe h2 { font: 700 clamp(1.8rem, 3.6vw, 2.8rem)/1.1 var(--serif); margin: 0.8rem 0 1rem; max-width: 18em; }
.recipe-body { display: grid; grid-template-columns: 1fr 1.4fr; gap: 2.4rem; margin: 2rem 0; padding: 2rem 0; border-top: 1px solid #2f1e1420; border-bottom: 1px solid #2f1e1420; }
.recipe-body h3 { font: 600 0.76rem/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--red); margin-bottom: 1rem; }
.signup label { display: block; font: 700 1.3rem/1.2 var(--serif); margin-bottom: 0.8rem; }
.field { display: flex; gap: 0.6rem; flex-wrap: wrap; max-width: 560px; }
.field input { flex: 1 1 220px; min-height: 50px; padding: 0 1.1rem; border: 1.5px solid #2f1e1440; border-radius: 999px; background: #fff; font: 500 1rem var(--sans); color: var(--ink); }
.note { font-size: 0.86rem; color: var(--ink-soft); margin-top: 0.7rem; }
.sample-msg { margin-top: 0.8rem; font-size: 0.92rem; color: var(--red-deep); }
.print { position: absolute; right: clamp(1.6rem, 4vw, 3.4rem); top: clamp(1.6rem, 4vw, 3.4rem); background: none; border: 0; padding: 0.4rem 0; cursor: pointer; font: 600 0.7rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 4px; }

/* 8. The buy moment, at early-evening amber. */
.buy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 2rem; padding: 12vh max(24px, calc(50vw - 590px)); background: linear-gradient(var(--paper-4), var(--amber) 40%, var(--amber) 70%, var(--paper-2)); }
.buy-sub { margin: 0.8rem 0 1.8rem; color: var(--ink-soft); }
.formats { border: 0; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.formats legend { font: 600 0.7rem/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.7rem; }
.formats label { position: relative; }
.formats input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.formats span { display: inline-block; padding: 0.7rem 1.1rem; border: 1.5px solid #2f1e1440; border-radius: 999px; font: 600 0.78rem/1 var(--sans); letter-spacing: 0.08em; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.formats input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.formats input:focus-visible + span { outline: 3px solid var(--red-deep); outline-offset: 2px; }
.price { margin-bottom: 1.6rem; }
.stores { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; }
.more-stores summary { list-style: none; cursor: pointer; font: 600 0.74rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; padding: 1rem 0.4rem; color: var(--ink-soft); }
.more-stores summary::-webkit-details-marker { display: none; }
.more-stores summary::after { content: " +"; }
.more-stores[open] summary::after { content: " \2212"; }
.store-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.store { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; border: 1.5px solid var(--red); border-radius: 999px; color: var(--red); text-decoration: none; font: 600 0.78rem/1 var(--sans); letter-spacing: 0.06em; }
.store:hover { background: #c246200f; }
.wide-stores .more-stores summary { display: none; }
.sample-note { margin-top: 1.6rem; padding: 1rem 1.2rem; border-left: 3px solid var(--red); background: #fff7ec8c; font-size: 0.95rem; max-width: 34em; }
.sample-note:target, .sample-note.flash { animation: flash 1.2s ease; }
@keyframes flash { 30% { background: #fff7ec; } }
.buy-stage { position: relative; aspect-ratio: 1.05; }
.buy-pot, .buy-lid { position: absolute; left: 2%; top: 14%; width: 96%; height: auto; }
.buy-pot { filter: drop-shadow(0 24px 22px #5d2a1240); }
.buy-steam { left: 25%; top: 0; width: 50%; height: 50%; }
.buy-book { position: absolute; left: 30%; right: 18%; top: 34%; bottom: -4%; margin: 0; }
.buy-book img[data-book-fallback] { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 22px 26px #5d2a1250); }

/* 9 to 11. The quiet end, back on plain cream. */
.groups { padding: 10vh max(24px, calc(50vw - 520px)) 6vh; background: var(--paper-2); }
.groups .ph { margin-top: 1rem; }
.faq { padding: 6vh max(24px, calc(50vw - 520px)) 10vh; background: linear-gradient(var(--paper-2), var(--paper)); }
.faq details { border-top: 1px solid #2f1e1426; }
.faq details:last-of-type { border-bottom: 1px solid #2f1e1426; }
.faq summary { cursor: pointer; padding: 1.2rem 2rem 1.2rem 0; font: 700 1.3rem/1.3 var(--serif); list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0.2rem; top: 1.1rem; font: 400 1.5rem/1 var(--sans); color: var(--red); }
.faq details[open] summary::after { content: "\2212"; }
.faq details > p { padding: 0 0 1.3rem; max-width: 40em; }
.end { padding: 4vh max(24px, calc(50vw - 520px)) 3rem; background: var(--paper); }
.end .stripes { margin-bottom: 3rem; }
.letters .ph { margin-bottom: 1rem; }
.links { margin-top: 2.4rem; }
.notice { margin-top: 1.4rem; font-size: 0.86rem; color: var(--ink-soft); max-width: 46em; }
.foot-title { margin-top: 3rem; font: 400 2rem/1 var(--serif); }
.foot-title i { font-style: italic; }
.foot-title b { color: var(--red); font-weight: 800; }
.has-preview-notice .end { padding-bottom: calc(3rem + 46px + env(safe-area-inset-bottom)); }

/* Tablets */
@media (max-width: 1100px) {
	.hero { grid-template-columns: 1fr 0.9fr; }
	.steps { grid-template-columns: repeat(2, 1fr); }
	.author { gap: 2.4rem; }
}

/* Upright tablets and phones: one column. */
@media (max-width: 900px) {
	.hero { grid-template-columns: 1fr; gap: 0; padding-top: 84px; min-height: 0; }
	.hero-stage { order: -1; height: 46svh; max-height: 520px; width: 100%; max-width: 560px; margin: 0 auto; }
	.hero-copy { text-align: center; }
	.proof { display: none; }
	.title { margin-top: 0.6rem; }
	.title i { font-size: clamp(2.6rem, 9vw, 4rem); }
	.title b { font-size: clamp(5rem, 22vw, 8.5rem); }
	.promise { margin: 0 auto; }
	.actions { justify-content: center; margin-top: 1.4rem; }
	.stripes-run { position: relative; left: auto; right: auto; margin: 3rem calc(50% - 50vw) 0; }
	.cards { grid-template-columns: 1fr; }
	.author { grid-template-columns: 1fr; }
	.portrait { max-width: 420px; }
	.buy { grid-template-columns: 1fr; }
	.buy-stage { order: -1; max-width: 560px; width: 100%; margin: 0 auto; }
	.season { grid-template-columns: 1fr; gap: 1rem; }
	.gives { columns: 1; }
}

/* Phones: the promise and one buy button come before a smaller book. */
@media (max-width: 600px) {
	:root { --wrap: calc(100vw - 36px); }
	body { font-size: 1rem; }
	.bar { height: 54px; }
	.bar-link { display: none; }
	.mark { font-size: 1.15rem; }
	.hero { padding-top: 66px; }
	.hero-stage { order: 0; height: 40svh; margin-top: 1.2rem; }
	.author-line { font-size: 0.72rem; }
	.author-line span { font-size: 0.82rem; }
	.subtitle { font-size: 1rem; margin: 0.4rem 0 0.9rem; }
	.promise { font-size: 1.35rem; }
	.actions .btn { flex: 1 1 140px; padding-inline: 1rem; letter-spacing: 0.1em; }
	.problem { padding-top: 10vh; }
	.ruled p { font-size: 1.45rem; }
	.ruled p:nth-child(2), .ruled p:nth-child(3) { padding-left: 0; }
	.steps { grid-template-columns: 1fr; gap: 1.4rem; padding-top: 8vh; }
	.steps li { grid-template-columns: 42% 1fr; column-gap: 1rem; align-items: center; }
	.steps img { grid-row: span 3; }
	.steps p { font-size: 1.2rem; }
	.js .season-tabs { overflow-x: auto; }
	.js .season-tabs button { padding: 0.8rem 0.7rem; letter-spacing: 0.14em; font-size: 0.7rem; }
	.mini-buy { flex-wrap: wrap; padding: 1.2rem 0; }
	.mini-buy .btn { width: 100%; }
	.recipe-body { grid-template-columns: 1fr; gap: 1.2rem; }
	.print { position: static; margin-top: 1.2rem; }
	.store-main { width: 100%; }
}

/* Reduced motion: every step is still there, nothing moves. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.btn, .portrait img, .portrait .frame rect { transition: none; }
	.js .season img { animation: none; }
}

@media print {
	body > *:not(main), main > *:not(.recipe), .recipe > .label, .signup, .print, .preview-notice { display: none !important; }
	.recipe { padding: 0; background: none; }
	.card-recipe { box-shadow: none; }
}

/* Concept-preview tape. The server adds it to the page (lib/preview-notice.mjs).
   Slim and translucent at the bottom so it never takes space from the page; only its controls take clicks. */
.preview-notice {
  position: fixed; z-index: 45; inset: auto 0 0;
  height: calc(44px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  pointer-events: none;
  background: #f3cf45ed; color: #111;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid #111;
}
.preview-notice::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: repeating-linear-gradient(115deg, #111 0 12px, transparent 12px 22px);
}
.preview-tape {
  position: absolute; inset: 4px 260px auto 0; height: 39px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 25px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 25px), transparent);
}
.preview-notice[data-preview-notice="neutral"] .preview-tape { right: 64px; }
.preview-tape-track { display: flex; width: max-content; animation: preview-tape-flow 34s linear infinite; }
.preview-tape-group { display: flex; flex-shrink: 0; }
.preview-tape-group > span {
  display: flex; align-items: center; gap: 1.8rem; padding-right: 1.8rem; height: 39px; white-space: nowrap;
  font: 700 0.74rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase;
}
.preview-tape-group i { font-style: normal; font-size: 0.9rem; }
@keyframes preview-tape-flow { to { transform: translateX(-50%); } }
.preview-tape-controls {
  position: absolute; top: 0; right: max(12px, env(safe-area-inset-right));
  display: flex; gap: 0.5rem; align-items: center; pointer-events: auto;
}
.preview-tape-controls a, .preview-tape-pause {
  display: inline-flex; justify-content: center; gap: 0.65rem; align-items: center;
  min-height: 44px; padding: 0.4rem 0.65rem; border: 0; background: transparent; color: #111;
  text-decoration: none; font: 700 0.78rem/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
}
.preview-tape-controls a { border-left: 1px solid #1115; }
.preview-cta-copy { display: flex; flex-direction: column; gap: 4px; }
.preview-cta-copy small { font: 500 0.66rem/1 var(--sans); letter-spacing: 0.08em; }
.preview-tape-controls a:hover, .preview-tape-pause:hover { background: #1111; }
.preview-tape-controls a:focus-visible, .preview-tape-pause:has(input:focus-visible) { outline: 2px solid #111; outline-offset: -4px; }
.preview-tape-pause { position: relative; width: 44px; }
.preview-tape-pause svg { fill: currentColor; }
.preview-tape-pause input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.preview-tape-pause .i-play, .preview-notice:has(input:checked) .i-pause { display: none; }
.preview-notice:has(input:checked) .i-play { display: inline; }
.preview-notice:has(input:checked) .preview-tape-track { animation-play-state: paused; }
@media (max-width: 760px) {
  .preview-tape { right: 195px; }
  .preview-notice[data-preview-notice="neutral"] .preview-tape { right: 52px; }
  .preview-tape-group > span { font-size: 0.66rem; gap: 1.2rem; padding-right: 1.2rem; }
  .preview-tape-controls { right: max(4px, env(safe-area-inset-right)); gap: 0; }
  .preview-tape-controls a { font-size: 0.7rem; padding-inline: 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .preview-tape-track { animation: none; }
  .preview-tape-pause { display: none; }
}