/* Henry Moy shop (henrymoy.com): large type, high contrast, one column on phones.
   Class names are the shop engine's (engine/README.md); colours, type and look are this shop's own. */
/* The web fonts: Latin-only files (Fontsource 5.x, the subsets Google Fonts serves; OFL, see fonts/README.md). */
@font-face { font-family: "Literata"; src: url("/fonts/literata-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Literata"; src: url("/fonts/literata-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* The text shows at once in a system font sized to match Literata and Atkinson Hyperlegible, so little moves when the
   web fonts arrive (font-display: swap; the two most-used fonts are preloaded at low priority, so they don't hold up the
   stylesheet). size-adjust is each web font's width over the fallback's, measured per weight in Chromium on this page's
   own text (21 Oct): Times New Roman and Arial (Windows, Mac, iPhone; Liberation Serif and Sans on Linux have the same
   widths), Noto Serif and Roboto (Android). Vertical overrides use the shipped files' own metrics (Literata 1177/308,
   Atkinson Hyperlegible 950/290 per 1000), divided by the size-adjust. */
@font-face { font-family: "Literata Fallback Times"; src: local('Times New Roman Bold'), local('TimesNewRomanPS-BoldMT'), local('Liberation Serif Bold'), local('LiberationSerif-Bold'); font-weight: 600; font-style: normal; size-adjust: 112.83%; ascent-override: 104.31%; descent-override: 27.30%; line-gap-override: 0%; }
@font-face { font-family: "Literata Fallback Times"; src: local('Times New Roman Italic'), local('TimesNewRomanPS-ItalicMT'), local('Liberation Serif Italic'), local('LiberationSerif-Italic'); font-weight: 400; font-style: italic; size-adjust: 109.52%; ascent-override: 107.47%; descent-override: 28.12%; line-gap-override: 0%; }
@font-face { font-family: "Literata Fallback Noto"; src: local('Noto Serif Bold'), local('NotoSerif-Bold'); font-weight: 600; font-style: normal; size-adjust: 96.68%; ascent-override: 121.74%; descent-override: 31.86%; line-gap-override: 0%; }
@font-face { font-family: "Literata Fallback Noto"; src: local('Noto Serif Italic'), local('NotoSerif-Italic'); font-weight: 400; font-style: italic; size-adjust: 95.31%; ascent-override: 123.49%; descent-override: 32.31%; line-gap-override: 0%; }
@font-face { font-family: "Atkinson Fallback Arial"; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'); font-weight: 400; font-style: normal; size-adjust: 98.85%; ascent-override: 96.10%; descent-override: 29.34%; line-gap-override: 0%; }
@font-face { font-family: "Atkinson Fallback Arial"; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'); font-weight: 700; font-style: normal; size-adjust: 100.91%; ascent-override: 94.15%; descent-override: 28.74%; line-gap-override: 0%; }
@font-face { font-family: "Atkinson Fallback Roboto"; src: local('Roboto'), local('Roboto-Regular'); font-weight: 400; font-style: normal; size-adjust: 99.53%; ascent-override: 95.45%; descent-override: 29.14%; line-gap-override: 0%; }
@font-face { font-family: "Atkinson Fallback Roboto"; src: local('Roboto Bold'), local('Roboto-Bold'); font-weight: 700; font-style: normal; size-adjust: 108.05%; ascent-override: 87.92%; descent-override: 26.84%; line-gap-override: 0%; }

/* ---------- Henry's look: Linda's approved layout (Claude Design's Turn 2), in Henry's colours and type (SHOP-BRIEF section 1):
   kitchen green, takeout red, ink and warm cream on white; thin jade double frames, small lantern diamonds, an arched
   window with the cover in a warm stove glow, and a takeout awning over the footer. Type stays big, contrast strong. */
:root {
  --oxblood: #2F4A3A;   /* kitchen green: top bar, hero, closing band */
  --glow: #3D5E4A;
  --bar: #1F3328;
  --band: #7E2117;      /* takeout red, darker: button hover */
  --footer: #23382C;
  --burgundy: #9B2A1E;  /* takeout red: headings, prices, buttons */
  --button-edge: #64180F;
  --gold: #5E7D69;      /* jade: the thin double frames and rules */
  --gold-dark: #E9DFC9; /* light accents on the green */
  --gold-light: #F4EFE4;
  --gold-link: #F4EFE4;
  --cream: #F4EFE4;
  --cream-deep: #EAE2D2;
  --paper: #FFFFFF;
  --box: #FFFFFF;
  --ink: #1D1B18;
  --muted: #4E4A44;
  --struck: #6B655D;
  --line: #D9CFBC;
  --line-section: #E3DACA;
  --white: #ffffff;
  /* names the engine's shared rules use */
  --rose: var(--burgundy);
  --rose-dark: var(--band);
  --soft: var(--cream-deep);
  --radius: 12px;
  --measure: 700px;
  --serif: "Literata", "Literata Fallback Times", "Literata Fallback Noto", Georgia, serif;
  --sans: "Atkinson Hyperlegible", "Atkinson Fallback Arial", "Atkinson Fallback Roboto", "Segoe UI", Helvetica, Arial, sans-serif;
  --title: var(--serif);
  /* Henry's ornament: a small lantern diamond where Linda's look has a cross */
  --cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18'%3E%3Cpath d='M6 1 11 9 6 17 1 9z' fill='%239B2A1E'/%3E%3C/svg%3E");
  --cross-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18'%3E%3Cpath d='M6 1 11 9 6 17 1 9z' fill='%23E9DFC9'/%3E%3C/svg%3E");
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 20px;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
picture { display: contents; }
a { color: var(--burgundy); text-underline-offset: 3px; }
/* Focus rings: takeout red on the light sections, cream on the dark green ones. */
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--burgundy); outline-offset: 3px; }

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 20px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; color: var(--burgundy); line-height: 1.2; }
h1 { font-size: 44px; margin: 8px 0 14px; }
h2 { font-size: 32px; margin: 0 0 14px; }
h3 { font-size: 24px; margin: 0 0 6px; }
.lead { font-size: 23px; margin: 0 0 22px; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

section { padding: 48px 0; border-bottom: 1px solid var(--line-section); }
section:last-of-type { border-bottom: 0; }

/* Ornaments: rule, cross, rule above a centred heading; a short double rule under a left-aligned one. */
.set-section h2::before, .letter h2::before {
  content: ""; display: block; width: 144px; height: 18px; margin: 0 auto 14px;
  background: var(--cross) center / 12px 18px no-repeat, linear-gradient(var(--gold), var(--gold)) left center / 56px 1px no-repeat, linear-gradient(var(--gold), var(--gold)) right center / 56px 1px no-repeat;
}
.letter h2::before { width: 128px; background-size: 12px 18px, 48px 1px, 48px 1px; }
.faq-section h2::after, .about h2::after {
  content: ""; display: block; width: 56px; height: 5px; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); margin: 14px 0 20px;
}

/* The double gold frame of the cards */
.letter, .promise, .panel, .answer blockquote { position: relative; border: 1px solid var(--gold); }
.letter::before, .promise::before, .panel::before, .answer blockquote::before {
  content: ""; position: absolute; inset: 6px; border: 1px solid rgba(94, 125, 105, 0.5); border-radius: inherit; pointer-events: none;
}

/* ---------- Buttons ---------- */
.buy {
  display: block; width: 100%; text-align: center; text-decoration: none; cursor: pointer;
  min-height: 64px; padding: 16px 18px; border: 0; border-radius: 12px;
  background: var(--burgundy); color: #FFFFFF;
  font-family: var(--sans); font-size: 24px; font-weight: 700; line-height: 1.25;
  box-shadow: 0 3px 0 var(--button-edge), inset 0 0 0 3px var(--burgundy), inset 0 0 0 4px rgba(244, 239, 228, 0.75);
}
.buy:hover { background: var(--band); box-shadow: 0 3px 0 #4E130B, inset 0 0 0 3px var(--band), inset 0 0 0 4px rgba(244, 239, 228, 0.75); }
.buy:focus-visible { outline: 3px solid var(--burgundy); outline-offset: 3px; }
button.buy { font-family: var(--sans); }
.buy[disabled] { opacity: 0.7; cursor: progress; }
.buy.small { display: inline-block; width: auto; min-width: 0; min-height: 56px; font-size: 20px; padding: 14px 22px; }
.buy-form { margin: 0; width: 100%; }
.buttons { display: grid; gap: 14px; justify-items: center; }
.reassure { text-align: center; font-size: 18px; color: var(--muted); margin: 16px 0 0; }
.reassure.secure { margin-top: 6px; }
.product-note { margin: 10px auto 4px; font-size: 18px; color: var(--muted); max-width: 460px; text-align: center; }
.link-button { background: none; border: 0; color: var(--burgundy); text-decoration: underline; text-underline-offset: 3px; font: inherit; font-size: 19px; cursor: pointer; padding: 10px 14px; min-height: 48px; }

/* ---------- 1. Timer bar (sticky). At most 64 px on a phone (STORE-SPEC check 13): a little tighter than the
   handover's 82 px, with the same colours, boxes and 56-px button. ---------- */
.timer-bar { position: sticky; top: 0; z-index: 40; background: var(--bar); color: #F4EFE4; border-bottom: 1px solid var(--gold); box-shadow: 0 3px 0 var(--bar), 0 4px 0 rgba(94, 125, 105, 0.85); }
.timer-bar.aside { visibility: hidden; }
.bar-inner { max-width: 1160px; margin: 0 auto; padding: 3px 10px; display: flex; align-items: center; justify-content: center; gap: 10px 16px; }
.bar-text { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bar-label { font-size: 15px; font-weight: 700; line-height: 1.2; color: #F4EFE4; text-align: center; }
.bar-label strong { letter-spacing: 0.04em; color: var(--gold-light); }
.timer-bar .cd { display: inline-flex; gap: 4px; }
.timer-bar .cd-box { display: inline-flex; flex-direction: column; align-items: center; min-width: 42px; padding: 2px 4px 1px; border: 1px solid rgba(233, 223, 201, 0.6); border-radius: 8px; background: rgba(255, 243, 228, 0.06); box-shadow: none; }
.timer-bar .cd-box b { font-family: var(--serif); font-weight: 600; font-size: 18px; line-height: 1.05; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.timer-bar .cd-box small { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; line-height: 1.2; color: var(--gold-dark); }
.bar-button { flex: none; min-height: 56px; padding: 0 18px; white-space: nowrap; font-family: var(--sans); font-size: 18px; font-weight: 700; color: var(--bar); background: var(--gold-dark); border: 1px solid var(--gold-light); border-radius: 10px; cursor: pointer; }
.bar-button:hover { background: #FFFFFF; }
[data-pricebox] { scroll-margin-top: 72px; }

/* ---------- 2. Top bar and hero ---------- */
.topbar { background: var(--oxblood); }
.topbar .wrap { display: flex; align-items: center; justify-content: center; min-height: 52px; gap: 12px; }
.brand { display: inline-block; padding: 6px 4px; font-family: var(--serif); font-weight: 600; font-size: 17px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-dark); text-decoration: none; }
.topbar .small { font-size: 17px; color: var(--gold-light); }

.hero { position: relative; overflow: hidden; background-color: var(--oxblood); background-image: radial-gradient(110% 70% at 50% 45%, var(--glow) 0%, rgba(61, 94, 74, 0) 60%); color: #F4EFE4; padding: 0 20px 44px; border-bottom: 0; }
.hero .wrap { max-width: 1160px; padding: 0; text-align: center; }
.hero .portrait { width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 12px; border: 2px solid var(--gold-dark); box-shadow: 0 0 0 3px #22382C, 0 0 0 4px rgba(233, 223, 201, 0.7), 0 8px 20px rgba(0, 0, 0, 0.35); }
.hero h1 { font-family: var(--title); font-weight: 700; font-size: clamp(32px, 9vw, 35px); line-height: 1.12; letter-spacing: 0.01em; color: var(--gold-light); margin: 0 auto; max-width: 11em; text-wrap: balance; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); }
.hero h1::after {
  content: ""; display: block; width: 144px; height: 18px; margin: 12px auto 14px;
  background: var(--cross-dark) center / 12px 18px no-repeat, linear-gradient(var(--gold-dark), var(--gold-dark)) left center / 56px 1px no-repeat, linear-gradient(var(--gold-dark), var(--gold-dark)) right center / 56px 1px no-repeat;
}
.hero .lead { font-size: 23px; line-height: 1.6; color: #F4EFE4; margin: 26px 0 0; text-align: left; text-wrap: pretty; }
.hero-actions { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 20px 0 0; }
.hero .buy { width: 100%; display: flex; align-items: center; justify-content: center; background: var(--gold-dark); color: var(--bar); box-shadow: 0 3px 0 #BFB396, inset 0 0 0 3px var(--gold-dark), inset 0 0 0 4px rgba(29, 27, 24, 0.5); }
.hero .buy:hover { background: #FFFFFF; box-shadow: 0 3px 0 #BFB396, inset 0 0 0 3px #FFFFFF, inset 0 0 0 4px rgba(29, 27, 24, 0.5); }
.hero .buy:focus-visible, .hero a:focus-visible, .topbar a:focus-visible, .timer-bar button:focus-visible, .timer-bar a:focus-visible, .closing a:focus-visible { outline-color: var(--gold-light); }
.see-inside { display: inline-block; padding: 12px 8px; font-size: 20px; font-weight: 700; color: var(--gold-dark); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.see-inside:hover { color: var(--gold-light); }

/* The arched window with the cookbook's cover (Henry's partial): a warm stove glow under kitchen green, a wooden
   counter, steam drifting up. Positions are shares of the block. */
.hero-covers { position: relative; width: 100%; max-width: 410px; aspect-ratio: 0.8 / 1; margin: 0 auto; }
.hero-covers .window { position: absolute; left: 0; top: 0; width: 100%; height: 91%; border-radius: 999px 999px 6px 6px; overflow: hidden; border: 1px solid var(--gold-dark); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35); background: linear-gradient(180deg, #2A4334 0%, #34513F 30%, #6B3B26 58%, #B4532C 72%, #E39A55 84%, #F2C27A 92%); z-index: 0; }
.hero-covers .glow { position: absolute; left: 12%; width: 76%; top: 40%; aspect-ratio: 1 / 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 226, 168, 0.9) 0%, rgba(246, 181, 104, 0.55) 40%, rgba(214, 112, 58, 0) 70%); }
.hero-covers .counter { position: absolute; left: 0; right: 0; bottom: 0; height: 9%; background: linear-gradient(180deg, #8A5A36 0%, #6E4528 100%); border-top: 1px solid rgba(244, 239, 228, 0.35); }
.hero-covers .inner { position: absolute; inset: 7px; border-radius: 999px 999px 2px 2px; border: 1px solid rgba(244, 239, 228, 0.6); pointer-events: none; }
.hero-covers .lantern { position: absolute; left: 50%; top: 5%; transform: translateX(-50%); color: var(--gold-dark); }
.hero-covers .dust { position: absolute; inset: -26% -32% -4% -32%; overflow: hidden; pointer-events: none; z-index: 1; -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); }
.hero-covers .dust-a { position: absolute; top: 0; left: 0; right: 0; height: calc(100% + 220px); background-size: 220px 220px;
  background-image: radial-gradient(circle at 18px 26px, rgba(244,239,228,.85) 0, rgba(244,239,228,.85) .9px, rgba(244,239,228,0) 2.1px), radial-gradient(circle at 96px 12px, rgba(244,239,228,.7) 0, rgba(244,239,228,.7) .7px, rgba(244,239,228,0) 1.9px), radial-gradient(circle at 160px 60px, rgba(244,239,228,.8) 0, rgba(244,239,228,.8) 1.1px, rgba(244,239,228,0) 2.3px), radial-gradient(circle at 40px 120px, rgba(244,239,228,.6) 0, rgba(244,239,228,.6) .8px, rgba(244,239,228,0) 2px), radial-gradient(circle at 120px 150px, rgba(244,239,228,.9) 0, rgba(244,239,228,.9) 1.2px, rgba(244,239,228,0) 2.4px), radial-gradient(circle at 200px 110px, rgba(244,239,228,.55) 0, rgba(244,239,228,.55) .7px, rgba(244,239,228,0) 1.9px), radial-gradient(circle at 70px 190px, rgba(244,239,228,.75) 0, rgba(244,239,228,.75) 1px, rgba(244,239,228,0) 2.2px), radial-gradient(circle at 180px 200px, rgba(244,239,228,.65) 0, rgba(244,239,228,.65) .8px, rgba(244,239,228,0) 2px), radial-gradient(circle at 140px 96px, rgba(244,239,228,.5) 0, rgba(244,239,228,.5) .6px, rgba(244,239,228,0) 1.8px), radial-gradient(circle at 10px 170px, rgba(244,239,228,.6) 0, rgba(244,239,228,.6) .7px, rgba(244,239,228,0) 1.9px); }
.hero-covers .dust-sway { position: absolute; inset: 0; }
.hero-covers .dust-b { position: absolute; top: 0; left: 0; right: 0; height: calc(100% + 360px); background-size: 360px 360px;
  background-image: radial-gradient(circle at 40px 60px, rgba(244,239,228,.45) 0, rgba(244,239,228,0) 3.5px), radial-gradient(circle at 220px 30px, rgba(244,239,228,.35) 0, rgba(244,239,228,0) 4px), radial-gradient(circle at 300px 180px, rgba(244,239,228,.5) 0, rgba(244,239,228,0) 3px), radial-gradient(circle at 120px 240px, rgba(244,239,228,.3) 0, rgba(244,239,228,0) 4.5px), radial-gradient(circle at 260px 310px, rgba(244,239,228,.4) 0, rgba(244,239,228,0) 3.5px), radial-gradient(circle at 70px 330px, rgba(244,239,228,.35) 0, rgba(244,239,228,0) 3px); }
.hero-covers .float { position: absolute; z-index: 2; }
.hero-covers .tilt { transform: rotate(var(--rot, 0deg)); border-radius: 3px; overflow: hidden; line-height: 0; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(244, 239, 228, 0.18); }
.hero-covers .tilt img { width: 100%; height: auto; }
.hero-covers .float-book { left: 17%; top: 17%; width: 66%; z-index: 4; --dur: 7s; --rise: -7px; --delay: 0s; }

/* ---------- 3. Fact strip: the 1-px gaps draw the gold lines ---------- */
.facts { padding: 26px 0; background: var(--cream); }
.fact-strip { list-style: none; margin: 0 auto; padding: 0; max-width: 980px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: #BFCBBF; }
.fact-strip li { background: var(--cream); padding: 14px 8px 16px; text-align: center; }
.fact-strip b { display: block; font-family: var(--serif); font-weight: 600; font-size: 40px; line-height: 1.1; color: var(--burgundy); }
.fact-strip span { display: block; font-size: 17px; line-height: 1.35; color: var(--muted); }

/* ---------- 4. Price box: paper, double gold frame, an elliptical arched top ---------- */
.buy-section { background: var(--cream-deep); padding: 44px 0; }
.buy-section .wrap { max-width: 1008px; padding: 0 14px; }
.pricebox { position: relative; max-width: 980px; margin: 0 auto; background: var(--paper); border: 1px solid var(--gold); border-radius: 50% 50% 16px 16px / 92px 92px 16px 16px; padding: 42px 16px 26px; text-align: center; box-shadow: 0 22px 50px -28px rgba(29, 27, 24, 0.42), 0 2px 0 rgba(94, 125, 105, 0.25); }
.pricebox::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(94, 125, 105, 0.5); border-radius: 50% 50% 10px 10px / 86px 86px 10px 10px; pointer-events: none; }
.price-heading { font-size: 32px; color: var(--burgundy); margin: 0 0 14px; }
.price-heading::before { content: ""; display: block; width: 12px; height: 18px; margin: 0 auto 8px; background: var(--cross) center / 12px 18px no-repeat; }
.price-rows { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 1px; background: #CFC3AB; border-top: 1px solid #CFC3AB; border-bottom: 1px solid #CFC3AB; text-align: left; }
.price-rows > li { flex: 1 1 360px; display: block; background: var(--paper); padding: 22px 4px 20px; border: 0; }
.price-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.price-name { font-family: var(--serif); font-weight: 600; font-size: 24px; color: var(--ink); }
.price-amounts { white-space: nowrap; }
.price-next { color: var(--struck); font-size: 20px; margin-right: 8px; text-decoration-thickness: 2px; }
.price-now { font-family: var(--serif); font-weight: 600; font-size: 38px; line-height: 1; color: var(--burgundy); }
.per-page { margin: 2px 0 0; font-size: 17px; color: var(--muted); text-align: right; }
.includes-intro { margin: 10px 0 0; font-size: 19px; font-weight: 700; }
.includes { list-style: none; margin: 8px 0 4px; padding: 0; }
.includes li { position: relative; display: block; padding: 3px 0 3px 30px; font-size: 19px; line-height: 1.45; border: 0; }
.includes li::before { content: "\2713"; position: absolute; left: 4px; top: 3px; color: var(--burgundy); font-weight: 700; }
.includes b { color: var(--ink); }
.includes-note { margin: 8px 0 2px; font-size: 17px; line-height: 1.5; color: var(--muted); }
.price-change { margin: 18px 0; font-size: 18px; color: var(--muted); text-align: center; }
.pricebox .buttons { display: flex; flex-wrap: wrap; gap: 14px clamp(14px, 2.6vw, 34px); justify-items: stretch; }
.pricebox .buy-form { flex: 1 1 340px; }
.pricebox .buy { width: 100%; min-width: 0; }
.notice { background: var(--cream-deep); border: 1px solid var(--gold); box-shadow: inset 0 0 0 4px var(--cream-deep), inset 0 0 0 5px rgba(94, 125, 105, 0.6); border-radius: 12px; padding: 18px 20px; margin: 18px 0 0; font-size: 24px; font-weight: 700; color: var(--ink); text-align: center; }
.gift-note { margin: 14px 0 0; font-size: 19px; font-weight: 700; color: var(--burgundy); }
.buy-message { margin: 14px 0 0; background: #fff4d6; border: 1px solid #ecd9a0; color: #4a3800; border-radius: 10px; padding: 12px 14px; font-size: 19px; }

/* Countdown boxes: small arched windows. Digits change with no transition. */
.countdown { margin: 18px 0 18px; }
.countdown-label { margin: 0 0 10px; font-size: 20px; font-weight: 700; color: var(--ink); }
.cd { display: inline-flex; gap: 6px; justify-content: center; }
.cd-box { display: inline-flex; flex-direction: column; align-items: center; min-width: 56px; padding: 10px 4px 6px; background: var(--box); border: 1px solid var(--gold); border-radius: 28px 28px 8px 8px; box-shadow: inset 0 0 0 3px var(--box), inset 0 0 0 4px rgba(94, 125, 105, 0.45); }
.cd-box b { font-family: var(--serif); font-weight: 600; font-size: 28px; line-height: 1.05; color: var(--burgundy); font-variant-numeric: tabular-nums; }
.cd-box small { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; line-height: 1.2; color: var(--muted); }
.ends { margin: 10px 0 0; color: var(--muted); font-size: 18px; }

/* ---------- 5. The sections not drawn: the same system ---------- */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.steps li { counter-increment: step; position: relative; padding: 10px 0 10px 58px; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 8px; width: 42px; height: 42px; border-radius: 50%; background: var(--burgundy); color: #FFFFFF; font-weight: 700; font-size: 20px; display: flex; align-items: center; justify-content: center; }
.after { color: var(--muted); margin-top: 22px; }
.after.strong { color: var(--ink); font-weight: 700; }

.answer { margin: 26px 0 0; }
.answer h3 { font-size: 25px; margin: 0; color: var(--burgundy); }
.answer-ref { margin: 2px 0 10px; font-size: 17px; color: var(--muted); }
.answer blockquote { margin: 0; background: var(--paper); border-radius: 4px; padding: 18px 20px; }
.answer blockquote p { margin: 0; position: relative; }

.part { margin: 22px 0 0; }
.part h3 { font-size: 23px; color: var(--burgundy); }
.chapters { margin: 6px 0 0; padding-left: 2.2em; }
.chapters li { padding: 3px 0; }
.pg { color: var(--muted); white-space: nowrap; }
.back-matter { margin: 6px 0 0; padding-left: 1.2em; }
.back-matter li { padding: 3px 0; }

.checks { list-style: none; padding: 0; margin: 0; }
.checks li { padding: 6px 0 6px 36px; position: relative; }
.checks li::before { content: "\2713"; position: absolute; left: 4px; top: 5px; color: var(--burgundy); font-weight: 700; }

h3.sub { margin-top: 26px; font-size: 24px; color: var(--burgundy); }
.leads { padding-left: 1.1em; margin: 6px 0 0; }
.leads li { padding: 5px 0; }

.panel { background: var(--paper); border-radius: 4px; padding: 26px 24px; margin: 22px 0; }
.panel > * { position: relative; }
.contact { text-align: center; }
.contact h2 { margin-bottom: 8px; }
.contact p { margin: 0; }

/* Sample pages (Look inside and the set): white pages with a thin edge and a soft shadow */
.samples { display: grid; grid-template-columns: 1fr; gap: 28px 32px; max-width: 1040px; margin: 0 auto; }
.samples figure { margin: 0; }
.samples .enlarge { display: block; background: #fff; border: 1px solid var(--line); box-shadow: 0 16px 30px -18px rgba(29, 27, 24, 0.42); }
.samples figcaption { font-size: 18px; color: var(--muted); padding: 10px 0 0; }
.enlarge { display: block; }

/* Closing band */
.closing { background: var(--oxblood); border-bottom: 0; padding: 48px 0; }
.closing p { margin: 0; color: #F4EFE4; font-family: var(--serif); font-style: italic; font-size: 26px; line-height: 1.5; text-align: center; }
.closing p::before { content: ""; display: block; width: 12px; height: 18px; margin: 0 auto 14px; background: var(--cross-dark) center / 12px 18px no-repeat; }

/* Buy strips */
.buy-strip-section { padding: 26px 0; background: var(--cream-deep); }
.buy-strip { text-align: center; }
.buy-strip .reassure { margin-top: 12px; }

/* ---------- 6. The set: the framed picture, the two card pages, then the words ---------- */
.set-section .wrap { max-width: 1160px; }
.set-section h2 { text-align: center; }
.set-list { list-style: none; display: flex; flex-wrap: wrap; gap: 44px 32px; max-width: 1120px; margin: 28px auto 0; padding: 0; }
.set-list li { flex: 1 1 220px; font-size: 20px; line-height: 1.55; }
.set-list b { color: var(--burgundy); }
.niche { position: relative; display: block; width: 220px; margin: 0 auto; padding: 38px 24px 0; background: linear-gradient(180deg, #F7F2E8 0%, #EAE2D2 100%); border: 1px solid rgba(94, 125, 105, 0.8); border-bottom: 0; border-radius: 999px 999px 0 0; }
.niche::before { content: ""; position: absolute; inset: 6px 6px 0; border: 1px solid rgba(94, 125, 105, 0.45); border-bottom: 0; border-radius: 999px 999px 0 0; pointer-events: none; }
.niche::after { content: ""; position: absolute; top: 14px; left: 50%; width: 10px; height: 15px; margin-left: -5px; background: var(--cross) center / 10px 15px no-repeat; }
.niche img { position: relative; border-radius: 3px; box-shadow: 0 16px 30px -14px rgba(29, 27, 24, 0.45); }
.sill { display: block; width: 220px; height: 5px; margin: 0 auto 18px; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); }
.photo-frame { max-width: 960px; margin: 44px auto 0; padding: 6px; background: var(--paper); border: 1px solid var(--gold); box-shadow: 0 26px 50px -30px rgba(29, 27, 24, 0.5); }
.photo-frame img { width: 100%; margin: 0; border: 1px solid rgba(94, 125, 105, 0.7); border-radius: 0; box-shadow: none; }
.set-section .muted { text-align: center; color: var(--muted); margin: 36px 0 18px; }
.set-section .after { font-size: 20px; color: var(--muted); text-align: center; margin-top: 40px; }

/* ---------- 7. Questions ---------- */
.faq-section .wrap { max-width: 860px; }
details { border-top: 1px solid var(--line); }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 14px 0; cursor: pointer; list-style: none; font-size: 21px; font-weight: 700; line-height: 1.35; color: var(--ink); }
summary:hover { color: var(--burgundy); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--gold); background: var(--paper); font-family: var(--serif); font-weight: 600; font-size: 24px; line-height: 1; color: var(--burgundy); }
details[open] summary::after { content: "\2212"; }
details p { margin: 0 0 20px; padding-right: 14px; }

/* ---------- 8. Meet Henry: an arched window portrait ---------- */
.about-section .wrap { max-width: 1080px; }
.about { display: flex; flex-wrap: wrap; align-items: center; gap: 34px 72px; max-width: 1040px; margin: 0 auto; }
.about-photo { flex: 1 1 260px; max-width: 340px; margin: 0 auto; padding: 7px; background: var(--paper); border: 1px solid var(--gold); border-radius: 999px 999px 6px 6px; box-shadow: 0 26px 50px -30px rgba(29, 27, 24, 0.5); }
.about-photo img.portrait.large { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 30%; margin: 0; border-radius: 999px 999px 2px 2px; border: 1px solid rgba(94, 125, 105, 0.8); box-shadow: none; }
.about > div { flex: 1 1 420px; }
.about h2 { margin: 0; }
.about p:last-child { margin-bottom: 0; }

/* ---------- 9. Why I wrote this book: the signed letter ---------- */
.letter-section { background: var(--cream-deep); }
.letter-section .wrap { display: flex; flex-wrap: wrap; flex-direction: row-reverse; align-items: center; justify-content: center; gap: 30px 56px; max-width: 1160px; }
.letter-photo { flex: 1 1 300px; max-width: 440px; margin: 0; padding: 6px; background: var(--paper); border: 1px solid var(--gold); box-shadow: 0 24px 46px -26px rgba(29, 27, 24, 0.55); }
.letter-photo img { width: 100%; border: 1px solid rgba(94, 125, 105, 0.7); }
.letter { flex: 1 1 440px; max-width: 640px; background: var(--paper); border-radius: 4px; padding: 34px 22px 28px; box-shadow: 0 26px 50px -28px rgba(29, 27, 24, 0.45); }
.letter > * { position: relative; }
.letter h2 { text-align: center; margin: 0 0 18px; }
.letter p { font-size: 21px; line-height: 1.65; margin: 0 0 16px; } /* the body font: only Literata SemiBold and Italic are loaded */
.letter .signature { margin: 6px 0 0; font-family: var(--serif); font-style: italic; font-size: 26px; color: var(--burgundy); }

/* ---------- 10. The guarantee ---------- */
.promise-section { background: var(--cream); }
.promise { display: block; max-width: 820px; margin: 0 auto; background: var(--paper); border-radius: 4px; padding: 32px 22px; text-align: center; box-shadow: 0 22px 46px -30px rgba(29, 27, 24, 0.45); }
.promise-text { position: relative; }
.shield { display: block; width: 38px; height: 44px; color: #2F4A3A; margin: 0 auto 12px; }
.promise h2 { font-size: 27px; line-height: 1.3; max-width: 22em; margin: 0 auto 10px; text-wrap: balance; }
.promise p { margin: 0 auto; max-width: 34em; font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.55; }

/* ---------- 11. Footer: the awning, then the green band ---------- */
footer, .site-footer { background: var(--footer); color: #F4EFE4; border-top: 0; padding: 0 0 44px; font-size: 18px; line-height: 1.6; text-align: center; }
.footer-awning { position: relative; height: clamp(44px, 6vw, 70px); background: var(--cream-deep); filter: drop-shadow(0 3px 2px rgba(29, 27, 24, 0.18)); }
.footer-awning svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.site-footer .wrap { max-width: 760px; padding: 6px 20px 0; }
.site-footer .wrap::before { content: ""; display: block; width: 12px; height: 18px; margin: 0 auto 12px; background: var(--cross-dark) center / 12px 18px no-repeat; }
.site-footer p { margin: 0 0 10px; }
.site-footer a { color: var(--gold-link); text-underline-offset: 3px; }
.site-footer a:hover { color: #FFFFFF; }
.site-footer a:focus-visible { outline-color: var(--gold-light); }

/* ---------- 12. Buy bar at the bottom of a phone ---------- */
.buy-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--paper); border-top: 1px solid var(--gold); box-shadow: 0 -3px 0 var(--paper), 0 -4px 0 rgba(94, 125, 105, 0.85), 0 -6px 18px rgba(40, 20, 10, 0.16); }
.buy-bar[hidden] { display: none; }
.buy-bar-inner { max-width: 860px; margin: 0 auto; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.buy-bar .buy-form { margin: 0; }
.buy.bar-buy { display: block; width: 100%; min-width: 0; min-height: 56px; padding: 8px 6px; font-size: 18px; line-height: 1.2; }
body.has-buy-bar { padding-bottom: 96px; }

/* ---------- 13. The $10 gift pop-up ---------- */
/* The pop-up keeps the browser's own position: fixed for a modal dialog (position: relative would make it absolute,
   placed at the top of the page, and opening it would jump her back up). Its ::before frame works on a fixed box. */
.gift-popup { border: 1px solid var(--gold); padding: 0; max-width: min(560px, calc(100vw - 24px)); width: 100%; max-height: calc(100vh - 24px); overflow-y: auto; color: var(--ink); background: var(--paper); border-radius: 50% 50% 18px 18px / 84px 84px 18px 18px; box-shadow: 0 28px 70px rgba(12, 18, 14, 0.5); }
.gift-popup::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(94, 125, 105, 0.55); border-radius: 50% 50% 13px 13px / 78px 78px 13px 13px; pointer-events: none; }
.gift-popup::backdrop { background: rgba(22, 34, 27, 0.62); }
.gift-inner { position: relative; padding: 30px 18px 16px; text-align: center; }
.gift-inner .portrait { width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 6px; border: 2px solid var(--gold); box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px rgba(94, 125, 105, 0.6); }
.gift-inner h2 { font-size: 28px; margin: 6px 0 10px; text-wrap: balance; }
.gift-inner p { margin: 0 0 14px; font-size: 20px; }
.gift-code { white-space: nowrap; font-family: var(--serif); font-weight: 600; font-size: clamp(34px, 10vw, 44px); letter-spacing: 0.06em; color: var(--burgundy); background: var(--cream-deep); border: 1px solid var(--gold); border-radius: 12px; box-shadow: inset 0 0 0 4px var(--cream-deep), inset 0 0 0 5px rgba(94, 125, 105, 0.6); padding: 10px 12px; margin: 6px 0 14px !important; }
.gift-ends { color: var(--muted); margin: 0 0 14px; }
.gift-ends .cd { margin: 0 0 8px; }
.gift-ends p { margin: 0 !important; font-size: 18px !important; color: var(--muted); }
.gift-inner .buy { width: 100%; min-width: 0; }
.gift-inner .small { font-size: 17px !important; line-height: 1.5; color: var(--muted); margin-top: 14px; }
.gift-inner .link-button { font-size: 19px; color: var(--burgundy); }
.turnstile-box { position: fixed; right: 12px; bottom: 12px; z-index: 50; }

/* ---------- Other pages (thank-you, download, refund, privacy, terms, 404): the same chrome, cream pages ---------- */
.preview-banner { background: #fff4d6; color: #5a4300; text-align: center; font-size: 16px; padding: 8px 12px; border-bottom: 1px solid #ecd9a0; }
.download { display: block; text-align: center; text-decoration: none; background: var(--burgundy); color: #FFFFFF; font-weight: 700; font-size: 26px; padding: 22px; border-radius: 12px; box-shadow: 0 3px 0 var(--button-edge), inset 0 0 0 3px var(--burgundy), inset 0 0 0 4px rgba(244, 239, 228, 0.75); margin: 18px 0 8px; }
.download:hover { background: var(--band); }
.file-meta { text-align: center; font-size: 16px; color: var(--muted); margin: 0 0 6px; word-break: break-all; }
.tips { margin: 18px 0; }
.prose h2 { font-size: 26px; margin: 26px 0 6px; }
.prose p { margin: 0 0 12px; }
.legal { background: var(--cream-deep); border-radius: 12px; padding: 18px 20px; font-size: 19px; }

/* Admin (unchanged) */
.wrap.wide { max-width: 1100px; }
.admin h2 { margin-top: 30px; font-size: 26px; }
.admin table { border-collapse: collapse; width: 100%; font-size: 17px; background: var(--white); }
.admin th, .admin td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.admin .kv th { width: 210px; background: var(--cream-deep); }
.table-wrap { overflow-x: auto; }
.admin-inline { display: inline-block; margin: 6px 8px 6px 0; }
.admin-form { display: grid; gap: 12px; max-width: 420px; }
.admin input { font: inherit; padding: 10px 12px; border: 2px solid var(--line); border-radius: 10px; min-height: 52px; }
.ok { color: #1d6b33; font-weight: 700; }
.bad { color: #a01c1c; font-weight: 700; }

/* ---------- Henry's own pieces ---------- */
.hero-subtitle { margin: 4px auto 0; max-width: 18em; font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.35; color: var(--gold-dark); text-wrap: balance; }
.hero h1 + .hero-subtitle { margin-top: -2px; }
.hero .hero-subtitle::after { content: ""; display: block; width: 144px; height: 18px; margin: 12px auto 14px; background: var(--cross-dark) center / 12px 18px no-repeat, linear-gradient(var(--gold-dark), var(--gold-dark)) left center / 56px 1px no-repeat, linear-gradient(var(--gold-dark), var(--gold-dark)) right center / 56px 1px no-repeat; }
.hero h1::after { display: none; }
.kitchen-knows .checks li::before { content: ""; top: 15px; left: 8px; width: 12px; height: 18px; background: var(--cross) center / 12px 18px no-repeat; }
.feature-text { max-width: 38em; margin: 34px auto 0; font-size: 21px; text-align: center; }
.set-section .photo-frame { max-width: 620px; }
.letter-section .wrap { justify-content: center; }
.chapters { list-style: decimal; }
.chapter-items { list-style: none; margin: 4px 0 10px; padding: 0; }
.chapter-items li { position: relative; padding: 2px 0 2px 22px; font-size: 19px; line-height: 1.45; color: var(--muted); }
.chapter-items li::before { content: ""; position: absolute; left: 4px; top: 12px; width: 8px; height: 12px; background: var(--cross) center / 8px 12px no-repeat; }

/* ---------- Computers ---------- */
@media (min-width: 760px) {
  body { font-size: 21px; }
  h1 { font-size: 54px; }
  h2 { font-size: 40px; }
  section { padding: 64px 0; }
  .buy { display: inline-block; width: auto; min-width: 440px; }
  .buttons { justify-items: center; }

  .bar-inner { padding: 7px 12px; gap: 10px 18px; }
  .bar-text { flex-direction: row; gap: 4px 14px; }
  .bar-label { font-size: 18px; }
  .timer-bar .cd-box b { font-size: 20px; }
  .timer-bar .cd-box small { font-size: 11px; }

  .topbar { padding: 0 64px; }
  .page-sales .topbar .wrap, .topbar .wrap { max-width: 1160px; justify-content: flex-start; padding: 6px 0; margin: 0 auto; border-bottom: 1px solid rgba(233, 223, 201, 0.32); }
  .brand { font-size: 20px; padding: 8px 0; }
  .hero { padding: 34px 64px 56px; background-image: radial-gradient(70% 90% at 75% 45%, var(--glow) 0%, rgba(61, 94, 74, 0) 60%); }
  .hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 430px); grid-template-rows: 1fr auto auto auto auto 1fr; column-gap: clamp(32px, 5.6vw, 72px); align-items: center; margin: 0 auto; text-align: left; }
  .hero .wrap > * { grid-column: 1; }
  .hero .portrait { grid-row: 2; width: 104px; height: 104px; margin: 6px 0 22px 6px; box-shadow: 0 0 0 4px #22382C, 0 0 0 5px rgba(233, 223, 201, 0.7), 0 12px 30px rgba(0, 0, 0, 0.35); }
  .hero h1 { grid-row: 3; font-size: clamp(36px, 4.3vw, 56px); margin: 0; max-width: none; }
  .hero h1::after { width: 142px; margin: 18px 0 20px; background: var(--cross-dark) left center / 12px 18px no-repeat, linear-gradient(var(--gold-dark), var(--gold-dark)) right center / 120px 1px no-repeat; }
  .hero .lead { grid-row: 4; font-size: 24px; margin: 0; max-width: 30em; }
  .hero-actions { grid-row: 5; align-items: flex-start; margin: 0; }
  .hero-actions .buy { width: auto; min-width: 440px; margin: 18px 0 4px; }
  .hero .see-inside { padding: 12px 0; }
  .hero .wrap > .hero-covers { grid-column: 2; grid-row: 1 / -1; }

  .facts { padding: 40px 0; }
  .facts .wrap { max-width: 1108px; padding: 0 64px; }
  .fact-strip { grid-template-columns: repeat(4, 1fr); }
  .fact-strip b { font-size: 44px; }

  .buy-section { padding: 72px 0; }
  .buy-section .wrap { padding: 0 56px; max-width: 1092px; }
  .pricebox { border-radius: 50% 50% 16px 16px / 140px 140px 16px 16px; padding: 60px 52px 40px; }
  .pricebox::before { border-radius: 50% 50% 10px 10px / 134px 134px 10px 10px; }
  .price-heading { font-size: 40px; }
  .price-rows > li { padding: 22px 34px 20px; }
  .price-name { font-size: 27px; }
  .price-now { font-size: 44px; }
  .cd { gap: 8px; }
  .cd-box { min-width: 64px; }
  .cd-box b { font-size: 32px; }

  .samples { grid-template-columns: 1fr 1fr; }
  .samples.three { grid-template-columns: 1fr 1fr 1fr; } /* three pages in one row, none left alone */

  .set-list { margin-top: 44px; }
  .niche { width: 100%; padding: 46px 30px 0; }
  .sill { width: 100%; }
  .photo-frame { margin-top: 64px; }
  .set-section .muted { margin-top: 52px; }

  summary { font-size: 22px; }
  details p { padding-right: 50px; }

  .letter { padding: 52px 52px 44px; }
  .letter h2 { font-size: 36px; }
  .promise { padding: 46px 52px; }
  .promise h2 { font-size: 32px; }

  .closing p { font-size: 28px; }
  .site-footer .wrap { padding: 6px 64px 0; }

  .gift-inner { padding: 30px 36px 16px; }
  .gift-inner h2 { font-size: 32px; }
}
/* Henry's hero on computers: the subtitle gets its own row under the title. */
@media (min-width: 760px) {
  .hero .hero-subtitle { grid-row: 4; margin: 10px 0 0; max-width: 22em; font-size: 26px; text-align: left; }
  .hero .hero-subtitle::after { width: 142px; margin: 18px 0 20px; background: var(--cross-dark) left center / 12px 18px no-repeat, linear-gradient(var(--gold-dark), var(--gold-dark)) right center / 120px 1px no-repeat; }
  .hero .wrap { grid-template-rows: 1fr auto auto auto auto auto 1fr; }
  .hero .lead { grid-row: 5; }
  .hero-actions { grid-row: 6; }
}
@media (max-width: 759px) {
  .letter h2 { font-size: 30px; }
}
@media (min-width: 1600px) {
  body { font-size: 26px; }
  :root { --measure: 860px; }
  h1 { font-size: 64px; }
  .buy { font-size: 28px; }
  .pricebox .notice, .countdown { font-size: 26px; }
}

/* ---------- Calm motion: the hero's cover floats, steam drifts round it, a soft lift on hover on computers,
   and sections fade in once as she scrolls. Nothing moves near the buy buttons and nothing flashes. All of it stops
   when the device asks for reduced motion. ---------- */
@keyframes henryFloat { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, var(--rise, -6px), 0); } }
@keyframes henryRise220 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -220px, 0); } }
@keyframes henryRise360 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -360px, 0); } }
@keyframes henrySway { 0%, 100% { transform: translate3d(-12px, 0, 0); } 50% { transform: translate3d(12px, 0, 0); } }
@media (prefers-reduced-motion: no-preference) {
  .hero-covers .float { animation: henryFloat var(--dur, 7s) ease-in-out var(--delay, 0s) infinite; will-change: transform; }
  .hero-covers .dust-a { animation: henryRise220 46s linear infinite; will-change: transform; }
  .hero-covers .dust-sway { animation: henrySway 15s ease-in-out infinite; will-change: transform; }
  .hero-covers .dust-b { animation: henryRise360 80s linear infinite; will-change: transform; }
  .hero.is-offscreen .float, .hero.is-offscreen .dust-a, .hero.is-offscreen .dust-sway, .hero.is-offscreen .dust-b { animation-play-state: paused; }
  html.reveal-on .reveal:not(.is-in) { opacity: 0; transform: translate3d(0, 18px, 0); }
  .reveal { transition: opacity 900ms ease, transform 900ms var(--ease); }
  @media (hover: hover) and (pointer: fine) {
    .hero-covers .tilt { transition: transform 450ms var(--ease), box-shadow 450ms ease; }
    .hero-covers .float:hover .tilt { transform: rotate(var(--rot, 0deg)) translateY(-8px); box-shadow: 0 34px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(244, 239, 228, 0.35); }
    .pricebox { transition: transform 450ms var(--ease), box-shadow 450ms ease; }
    .buy-section .wrap:hover .pricebox { transform: translate3d(0, -4px, 0); box-shadow: 0 36px 70px -30px rgba(29, 27, 24, 0.55), 0 2px 0 rgba(94, 125, 105, 0.25); }
    .set-list img { transition: transform 450ms var(--ease), box-shadow 450ms ease; }
    .set-list li:hover img { transform: translate3d(0, -8px, 0); box-shadow: 0 30px 46px -16px rgba(29, 27, 24, 0.55); }
  }
}
@media print { .reveal { opacity: 1 !important; transform: none !important; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }