/* Lamplit: the shared stylesheet of every redesigned page (home, books, book pages, radio, shop, links, free
   page, kitchen). Self-contained on purpose: it does NOT load tokens/base/components, so nothing here can leak
   onto the older pages (press, privacy, buy, 404, /grand/, recipe pages), which keep their own CSS and share ONLY
   lamplit-chrome.css. Tokens and the contrast pairs are from crew/initiatives/2026-10-15-site-brand-direction.md
   section 6; the pool recipe is the one on the shipped /grand/ page. Radius 2px everywhere; the pool glow is the
   one named gradient/glow exception. Rose never sits on night (2.51:1). */
/* Ground switched to warm brown [Stephen, 2026-10-15: 'I like the brown more']; was night #1d2335 / window #343d5a / dusk #aab4cc. */
:root {
  --night:#211712; --window:#3a2a20; --lamp:#fbe8c8; --lamp-edge:#e9c99a;
  --ink:#2b1c25; --dusk:#c8b79f; --flame:#eeba7f; --rose:#904b64; --thread:#6b5443;
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Literata','Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --font-typed:'Courier Prime','Courier New',monospace;
  --font-tag:'Caveat','Segoe Script',cursive;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--night); color: var(--lamp);
  font-family: var(--font-body); font-size: 17px; line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
.wrap { max-width: 1080px; margin: 0 auto; padding-inline: 16px; }
.prose { max-width: 66ch; }
a { color: var(--flame); }
h1, h2, h3 { font-family: var(--font-display); color: var(--lamp); font-weight: 600; }
h1 { font-size: clamp(34px, 8vw, 60px); line-height: 1.08; margin: 0 0 16px; }
h2 { font-size: 26px; line-height: 1.2; margin: 0 0 16px; }
h3 { font-size: 22px; line-height: 1.2; margin: 0 0 6px; }
p { margin: 0 0 16px; }
.label {
  font-family: var(--font-typed); font-size: 15px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--dusk); margin: 0 0 8px;
}
.lede { font-size: 20px; max-width: 60ch; }
section { padding-block: 40px; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--flame); outline-offset: 3px;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--flame); color: var(--ink); padding: 12px 16px; z-index: 10; }
.skip-link:focus { left: 8px; top: 8px; }

/* ---- The lamp pool (same recipe as /grand/). ---- */
.pool {
  position: relative; background: var(--lamp); color: var(--ink);
  border: 1px dashed var(--thread); outline: 6px solid var(--lamp); outline-offset: 0;
  border-radius: 2px; padding: 24px 20px;
  box-shadow: 0 0 120px 24px rgba(233, 201, 154, .28);
  margin: 6px;  /* room for the 6px outline so it is not clipped by the viewport */
}
@media (min-width: 760px) { .pool { padding: 40px 48px; } }
.pool h1, .pool h2, .pool h3 { color: var(--ink); }
.pool a { color: var(--rose); }
.pool .label { color: var(--thread); }
.tag { font-family: var(--font-tag); font-size: 22px; color: var(--thread); display: inline-block; transform: rotate(-2deg); margin: 0 0 8px; }
.fine { font-size: 15px; color: var(--thread); margin: 16px 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .pool { animation: comeon .25s ease-out both; }
  @keyframes comeon { from { opacity: 0; } to { opacity: 1; } }
}

/* ---- Buttons: rose, on lamp only. ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px;
  background: var(--rose); color: var(--lamp) !important; border: 0; border-radius: 2px;
  font-family: var(--font-body); font-size: 17px; font-weight: 600; text-decoration: none; cursor: pointer;
  text-align: center; line-height: 1.25;
}
.pool a.btn { color: var(--lamp); }
.btn[disabled] { cursor: not-allowed; }
.btn-flame { background: var(--flame); color: var(--ink) !important; }   /* the one button that may sit on night */

/* ---- Hero ---- */
.hero { padding-top: 24px; padding-bottom: 8px; }
.hero img { width: 100%; border-radius: 2px; margin-bottom: 24px; }
.hero .lede { margin-bottom: 8px; }
.ages-chip {
  display: inline-block; font-family: var(--font-typed); font-size: 15px; color: var(--ink);
  background: var(--flame); border-radius: 2px; padding: 2px 10px; margin: 0 0 16px;
}

/* ---- Email box ---- */
.gate-wrap { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 760px) { .gate-wrap { grid-template-columns: 240px 1fr; gap: 40px; } }
.gate-wrap .bundle { width: 150px; margin-inline: auto; transform: rotate(-2deg); box-shadow: 0 10px 24px -10px rgba(43,28,37,.45); }
@media (min-width: 760px) { .gate-wrap .bundle { width: 100%; max-width: 240px; } }
.gate-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 16px; }
.gate-row input[type="email"] {
  flex: 1 1 200px; min-width: 0; min-height: 44px; padding: 10px 14px;
  border: 1px solid var(--thread); border-radius: 2px; background: #fff; color: var(--ink);
  font-family: var(--font-body); font-size: 17px;
}
.gate-row input[disabled] { background: #f3ead9; }

/* ---- Door cards ---- */
.doors { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .doors { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .doors { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
.door {
  display: block; background: var(--window); color: var(--lamp); text-decoration: none;
  border-radius: 2px; overflow: hidden; border: 1px solid rgba(251,232,200,.12);
}
.door img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.door div { padding: 14px 18px 18px; }
.door h3 { color: var(--lamp); font-size: 24px; }
.door p { margin: 0; color: var(--dusk); font-size: 16px; }
.door:hover, .door:focus-visible { border-color: var(--flame); }

/* ---- Book cards (shelf) ---- */
.shelf { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); list-style: none; padding: 0; margin: 0; }
@media (min-width: 760px) { .shelf { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
@media (min-width: 1000px) { .shelf { grid-template-columns: repeat(5, 1fr); gap: 24px; } }
.bcard {
  background: var(--lamp); color: var(--ink); border: 1px dashed var(--thread); border-top: 8px solid var(--thread);
  border-radius: 2px; padding: 10px 10px 14px; height: 100%; display: flex; flex-direction: column;
  box-shadow: 0 0 60px 8px rgba(233,201,154,.22);
}
.bcard a.cover-link { display: block; }
.bcard img { width: 100%; box-shadow: 0 10px 24px -10px rgba(43,28,37,.45); }
.bcard h2 { font-size: 19px; margin: 12px 0 6px; line-height: 1.2; }
.bcard h2 a { color: var(--ink); text-decoration: none; display: inline-block; min-height: 44px; display: inline-flex; align-items: center; }
.bcard h2 a:hover { text-decoration: underline; }
.bcard p.line { font-size: 15px; margin: 0 0 12px; color: var(--ink); flex: 1; }
.ribbon {
  display: inline-block; font-family: var(--font-typed); font-size: 15px; border-radius: 2px;
  padding: 1px 8px; margin: 10px 0 0; align-self: flex-start;
}
.ribbon.out { background: var(--flame); color: var(--ink); }
.ribbon.soon { background: var(--window); color: var(--lamp); }
.bcard .btn { width: 100%; font-size: 16px; padding: 8px 10px; }
.bcard .btn.quiet { background: transparent; color: var(--rose) !important; border: 1px solid var(--rose); }

/* ---- Book page ---- */
.book-top { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 760px) { .book-top { grid-template-columns: 340px 1fr; gap: 40px; } }
.book-top .cover { width: 100%; max-width: 340px; margin-inline: auto; box-shadow: 0 10px 24px -10px rgba(43,28,37,.55); }
.specs { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 8px; }
.specs li { border-left: 3px solid var(--flame); padding-left: 12px; }
.spreads { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .spreads { grid-template-columns: 1fr 1fr; gap: 24px; } }
.spreads figure { margin: 0; }
.spreads img { width: 100%; box-shadow: 0 10px 24px -10px rgba(43,28,37,.45); }
.spreads figcaption { font-family: var(--font-typed); font-size: 15px; color: var(--thread); margin-top: 8px; }
.next-card { display: flex; gap: 16px; align-items: center; background: var(--window); color: var(--lamp); text-decoration: none; padding: 12px; border-radius: 2px; margin-top: 24px; min-height: 44px; }
.next-card img { width: 72px; flex: none; }
.next-card span { color: var(--dusk); font-size: 15px; display: block; }

/* ---- Radio ---- */
.radio-panel { background: var(--window); border: 1px solid rgba(251,232,200,.12); border-radius: 2px; padding: 24px 20px; }
.radio-panel h2, .radio-panel h3 { color: var(--lamp); }
.deck { display: flex; align-items: center; gap: 16px; margin: 16px 0; }
.play {
  flex: none; width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--flame); color: var(--ink);
  font-size: 22px; cursor: not-allowed;
}
.dial { flex: 1; border-top: 2px solid var(--dusk); position: relative; height: 2px; }
.dial::after { content: ""; position: absolute; left: 32%; top: -9px; width: 3px; height: 20px; background: var(--flame); }
.now { font-family: var(--font-typed); font-size: 15px; color: var(--dusk); margin: 0; }
.hours { display: grid; gap: 16px; grid-template-columns: 1fr; list-style: none; padding: 0; margin: 0; }
@media (min-width: 560px) { .hours { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .hours { grid-template-columns: repeat(4, 1fr); } }
.hour { background: var(--window); border: 1px solid rgba(251,232,200,.12); border-radius: 2px; overflow: hidden; height: 100%; }
.hour img, .hour .ph { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.hour .ph { background: var(--night); display: flex; align-items: center; justify-content: center; color: var(--dusk); font-family: var(--font-typed); font-size: 15px; border-bottom: 1px dashed var(--dusk); }
.hour div.body { padding: 14px 16px 18px; }
.hour h3 { font-size: 20px; }
.hour p { margin: 0 0 8px; font-size: 16px; color: var(--dusk); }
.hour .when { color: var(--flame); font-family: var(--font-typed); font-size: 15px; }
.hour a.go { display: inline-flex; align-items: center; min-height: 44px; }
.hour .live { display: inline-block; background: var(--flame); color: var(--ink); font-family: var(--font-typed); font-size: 15px; padding: 0 8px; border-radius: 2px; margin-bottom: 8px; }

/* ---- Shop ---- */
.shop-grid { display: grid; align-items: stretch; grid-auto-rows: 1fr; gap: 16px; grid-template-columns: repeat(2, 1fr); list-style: none; padding: 0; margin: 0; }  /* every row as tall as the tallest card [Stephen, 2026-10-16]: two-line names made some cards taller (was align-items: start) */
.shop-grid > li { display: flex; } .shop-grid > li > .scard { flex: 1; }
@media (min-width: 760px) { .shop-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
.scard { background: var(--lamp); color: var(--ink); border: 1px dashed var(--thread); border-radius: 2px; padding: 10px 10px 12px; height: 100%; box-shadow: 0 0 60px 8px rgba(233,201,154,.18); }
.scard img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; padding: 8px; background: #f6f1e7; box-sizing: border-box; box-shadow: 0 10px 24px -10px rgba(43,28,37,.45); }  /* [Stephen, 2026-10-16] one frame for every product: the source photos are 3:4, 1:1 and ~5:6, so cards had three heights. Contain, never crop: a sticker sheet must show every sticker. */
.scard h3 { color: var(--ink); font-size: 17px; margin: 10px 0 2px; }
.scard p { margin: 0; font-size: 15px; color: var(--thread); }
.cta-row { margin-top: 32px; }

/* ---- Kitchen (added 15 Oct, Rivet): static tin + recipe grid + recipe page ---- */
.tin { position: relative; border-radius: 2px; overflow: hidden; border: 1px solid rgba(251,232,200,.12); }
.tin img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.tin-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--window); padding: 10px 16px; }
.tin-name { font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--lamp); }
.tin-count { font-family: var(--font-typed); font-size: 15px; color: var(--dusk); }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tabs[hidden] { display: none; }
.tab { min-height: 44px; min-width: 44px; padding: 0 16px; border-radius: 2px; border: 1px solid var(--dusk); background: transparent; color: var(--lamp); font-family: var(--font-body); font-size: 16px; cursor: pointer; }
.tab[aria-pressed="true"] { background: var(--flame); color: var(--ink); border-color: var(--flame); font-weight: 600; }
.rgrid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); list-style: none; padding: 0; margin: 24px 0 0; }
@media (min-width: 760px) { .rgrid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
@media (min-width: 1000px) { .rgrid { grid-template-columns: repeat(4, 1fr); } }
.rgrid > li[hidden] { display: none; }
article.rcard { background: var(--lamp); color: var(--ink); border: 1px dashed var(--thread); border-top: 8px solid var(--thread); border-radius: 2px; padding: 10px 10px 8px; height: 100%; box-shadow: 0 0 60px 8px rgba(233,201,154,.18); }
.rcard .rimg { display: block; }
.rcard img { width: 100%; aspect-ratio: 560 / 520; object-fit: cover; box-shadow: 0 10px 24px -10px rgba(43,28,37,.45); }
.rcard h3 { font-size: 17px; line-height: 1.25; margin: 10px 0 4px; color: var(--ink); }
.rcard h3 a { color: var(--ink); text-decoration: none; display: flex; align-items: center; min-height: 44px; }
.rcard h3 a:hover { text-decoration: underline; }
.rcard .rmeta, .rcard .recipe-meta { font-size: 15px; font-style: italic; color: var(--thread); margin: 0 0 4px; }
.rcard .rwatch, .rcard .recipe-watch { margin: 0; }
.rcard .rwatch a, .rcard .recipe-watch a { display: inline-flex; align-items: center; min-height: 44px; color: var(--rose); font-size: 15px; }
.chips { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { font-family: var(--font-typed); font-size: 15px; color: var(--ink); background: var(--flame); border-radius: 2px; padding: 2px 10px; }
.rp-grid { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .rp-grid { grid-template-columns: 300px 1fr; gap: 40px; } }
.reel { margin: 0 auto; width: 100%; max-width: 300px; }
.facade { position: relative; display: block; width: 100%; padding: 0; border: 1px solid rgba(251,232,200,.2); border-radius: 2px; background: var(--window); cursor: pointer; aspect-ratio: 9 / 16; overflow: hidden; }
.facade img { width: 100%; height: 100%; object-fit: cover; }
.facade-play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; background: var(--flame); }
.facade-play::after { content: ""; position: absolute; left: 25px; top: 18px; border-left: 20px solid var(--ink); border-top: 14px solid transparent; border-bottom: 14px solid transparent; }
.facade-frame { width: 100%; aspect-ratio: 9 / 16; border: 0; border-radius: 2px; }
.reel figcaption { font-family: var(--font-typed); font-size: 15px; color: var(--dusk); margin-top: 8px; }
.reel figcaption a { display: inline-flex; align-items: center; min-height: 44px; }
.ing { list-style: none; padding: 0; margin: 0 0 12px; }
.ing li { position: relative; }
.ing label { display: flex; align-items: center; gap: 12px; min-height: 44px; }
/* The real checkbox is stretched over the whole row (44px high) so the tap target is the row, and it is
   invisible; .box draws the tick. Keeps keyboard + screen-reader behaviour of a native checkbox. */
.ing input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ing .box { flex: none; width: 22px; height: 22px; border: 2px solid var(--thread); border-radius: 2px; background: #fff; }
.ing input:checked + .box { background: var(--rose); border-color: var(--rose); box-shadow: inset 0 0 0 3px #fff; }
.ing input:checked ~ .t { text-decoration: line-through; color: var(--thread); }
.ing input:focus-visible + .box { outline: 2px solid var(--rose); outline-offset: 3px; }
.tools { font-size: 16px; } .tools b { font-family: var(--font-typed); font-weight: 400; text-transform: uppercase; font-size: 14px; letter-spacing: .04em; margin-right: 8px; color: var(--thread); }
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0 0 8px; }
.steps li { counter-increment: s; display: flex; gap: 14px; margin-bottom: 14px; }
.steps li::before { content: counter(s); flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--rose); color: var(--lamp); display: flex; align-items: center; justify-content: center; font-weight: 600; }
.more { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 24px; }
.more a { display: inline-flex; align-items: center; min-height: 44px; }
.tap { display: inline-flex; align-items: center; min-height: 44px; }

/* ---- Kitchen v2 (16 Oct, Rivet): email box above grid, Coming cards, "Your tin" strip, Cook mode, Add to tin ---- */
.rgrid { grid-template-columns: repeat(2, 1fr); gap: 12px; }  /* phones: 2 columns [Stephen-approved plan; 1 column made the page 11,425px tall at 375] */
@media (min-width: 480px) { .rgrid { grid-template-columns: repeat(2, 1fr); } }   /* phone landscape */
@media (min-width: 760px) { .rgrid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
@media (min-width: 1000px) { .rgrid { grid-template-columns: repeat(4, 1fr); } }
.rsoon .rcard { border-style: dashed; border-top-color: var(--dusk); background: #f3ead9; }
.rsoon-img { aspect-ratio: 560 / 520; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--thread); background: var(--lamp); }
.rsoon-img span { font-family: var(--font-tag); font-size: 26px; color: var(--thread); transform: rotate(-3deg); }
.rsoon-title { display: block; font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.25; margin: 4px 0; color: var(--ink); }
.rsoon .rmeta { display: block; }
.rtag { margin: 4px 0 0; font-family: var(--font-typed); font-size: 15px; color: var(--ink); background: var(--flame); display: inline-block; padding: 0 8px; border-radius: 2px; }
.tinstrip { background: var(--window); border: 1px solid rgba(251,232,200,.12); border-radius: 2px; padding: 16px; }
.tin-line { margin: 0 0 12px; font-size: 20px; }
.tin-line strong { font-family: var(--font-display); font-size: 28px; color: var(--flame); }
.slots { display: flex; gap: 3px; margin-bottom: 12px; }
.slot { flex: 1 1 0; max-width: 28px; height: 22px; border: 1px dashed var(--dusk); border-radius: 2px; }
.slot.soon { opacity: .5; }
.slot.is-got { background: var(--flame); border: 1px solid var(--flame); }
.tin-help { margin: 0 0 4px; }
.tinstrip .fine { color: var(--dusk); margin-top: 4px; }
.tinrow[hidden], .cookrow[hidden] { display: none; }
.tinrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 16px 0 0; }
.tinrow .btn { background: var(--flame); color: var(--ink) !important; }   /* on night, so flame not rose */
.tinrow .btn[disabled] { opacity: .85; cursor: default; }
.tinrow .fine { color: var(--dusk); margin: 0; }
.cookrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0 0 12px; }
.cookrow .fine { margin: 0; }
.btn-line { background: transparent; color: var(--rose) !important; border: 1px solid var(--rose); }
.cook-exit { display: none; }
.cook-status { margin: 0 0 12px; }
.cook-status:empty { display: none; }
/* Cook mode: the Method block itself becomes a full-screen, large-type view. The .pool ancestor has an opacity
   animation (a stacking context), so while open it is lifted above the header and its animation is dropped. */
body.cook-open { overflow: hidden; }
body.cook-open .pool.rp-body { animation: none; z-index: 100; }
.method.is-cook { position: fixed; inset: 0; z-index: 100; background: var(--lamp); color: var(--ink); overflow: auto; padding: 12px 20px 48px; }
.method.is-cook > * { max-width: 860px; margin-inline: auto; }
.method.is-cook .cook-exit { display: flex; position: sticky; top: 0; z-index: 2; width: 100%; max-width: 860px; min-height: 56px; margin-bottom: 8px; background: var(--lamp); }
.method.is-cook #cookrow { display: none; }
.method.is-cook .steps li { font-size: clamp(24px, 5.6vw, 34px); line-height: 1.4; margin-bottom: 30px; gap: 18px; }
.method.is-cook .steps li::before { width: 52px; height: 52px; font-size: 28px; }

/* ---- Tap-to-play facade (live assets/js/yt-facade.js copied byte for byte; CSS from live components.css with colours mapped to Lamplit tokens).
   The whole still is the <button> (tap target = full card width x 16:9, far over 44px); the play disc is decoration.
   The youtube-nocookie iframe is created only on tap. ---- */
.yt-facade, .yt-frame { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 0; padding: 0; overflow: hidden; background: var(--night); }
.yt-facade { border: 0; cursor: pointer; color: var(--lamp); }
.hour .yt-facade img { display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.yt-facade-play { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: rgba(33,23,18,.78); border: 2px solid var(--lamp); transition: background .15s; }
.yt-facade-play::after { content: ""; position: absolute; left: 28px; top: 20px; border-style: solid; border-width: 16px 0 16px 26px; border-color: transparent transparent transparent var(--lamp); }
.yt-facade:hover .yt-facade-play { background: var(--rose); }
.yt-facade:focus-visible { outline: 3px solid var(--flame); outline-offset: -3px; }
.yt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hour a.go.sub { font-size: 15px; }   /* 'Open it on YouTube' is the quiet secondary link; still 44px tall via a.go */

/* ---- /links/ chooser (phone-first). Rows are lamp cards so the rose button sits on lamp, as the brand sheet requires. ---- */
.links-top { padding-block: 16px 8px; }
.links-top .wrap, .links-books .wrap { max-width: 560px; }
.links-banner { display: block; width: 100%; height: 104px; object-fit: cover; object-position: center 45%; border-radius: 2px; margin: 0 0 12px; }
@media (min-width: 600px) { .links-banner { height: 180px; } }
.links-top h1 { margin: 0 0 4px; font-size: 32px; line-height: 1.15; }
.links-top .lede { font-size: 18px; margin: 0 0 4px; }
.links-books { padding-block: 8px; }
.lrows { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.lrow { display: flex; gap: 12px; align-items: flex-start; background: var(--lamp); color: var(--ink); border: 1px dashed var(--thread); border-radius: 2px; padding: 10px; }
.lthumb { flex: 0 0 auto; width: 76px; height: auto; box-shadow: 0 6px 14px -8px rgba(43,28,37,.5); }
.lcopy { flex: 1 1 auto; min-width: 0; }
.lcopy h2 { color: var(--ink); font-size: 20px; line-height: 1.2; margin: 0 0 2px; }
.lcopy p { margin: 0 0 8px; font-size: 15px; line-height: 1.4; }
.lcopy .btn { width: 100%; font-size: 16px; padding: 8px 10px; }
.lcopy .btn.quiet { background: transparent; color: var(--rose) !important; border: 1px solid var(--rose); }
.links-doors { padding-block: 24px 8px; }
.doors.doors-2 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.doors.doors-2 .door div { padding: 10px 12px 12px; }
.doors.doors-2 .door h3 { font-size: 20px; margin: 0 0 4px; }
.doors.doors-2 .door p { font-size: 14px; line-height: 1.35; }
@media (min-width: 1000px) { .doors.doors-2 { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.links-doors .wrap { max-width: 1112px; }

/* ================= REAL PLUMBING (staging build) ================= */
/* ---- Offer box (free-page.js): honeypot, live status, download button, no-JS fallback ---- */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gate-copy { margin: 0; }
.gate-status { margin: 12px 0 0; font-size: 16px; min-height: 1.4em; color: var(--ink); }
.gate[data-state="error"] .gate-status { color: #7a2a44; }
.gate-done { margin: 0; }
.gate-done .btn { margin-top: 8px; }
.gate-noscript { margin: 0; }
.gate-row .btn[disabled], .gate-row input[disabled] { opacity: .75; cursor: not-allowed; }
.gate-row .btn { flex: 0 0 auto; }
.form-msg { margin: 12px 0 0; font-size: 16px; min-height: 1.4em; color: var(--ink); }
.form-msg.bad { color: #7a2a44; }
.fine a { display: inline-flex; align-items: center; min-height: 44px; }
.note { font-size: 16px; color: var(--dusk); max-width: 62ch; }
.pool .note { color: var(--thread); }
.crumb { display: inline-flex; align-items: center; min-height: 44px; }

/* ---- Book pages: many-page grid for Little Rewind ---- */
.spreads.many { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .spreads.many { grid-template-columns: repeat(4, 1fr); gap: 16px; } }

/* ---- Radio: the live attic score (attic-radio.js) in the Lamplit panel ---- */
.radio-panel .deck { display: flex; align-items: center; gap: 14px; margin: 16px 0; }
.radio-panel .ar-play { flex: none; width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--flame); color: var(--ink); font-size: 22px; cursor: pointer; }
.radio-panel .ar-play[aria-pressed="true"] { background: var(--lamp); }
.radio-panel .ar-skip { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--lamp); color: var(--ink); font-size: 16px; cursor: pointer; }
.radio-panel .ar-now { flex: 1; min-width: 0; margin: 0; font-family: var(--font-typed); font-size: 15px; color: var(--dusk); }
.ar-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; }
.ar-list li { border-top: 1px dashed rgba(200,183,159,.35); padding: 2px 0; }
.ar-list button { display: flex; width: 100%; gap: 12px; align-items: baseline; justify-content: space-between; min-height: 44px; border: 0; background: none; padding: 8px 4px; cursor: pointer; color: var(--lamp); font-family: var(--font-body); font-size: 17px; text-align: left; }
.ar-list button:hover, .ar-list button[aria-current="true"] { color: var(--flame); }
.ar-list .n { flex: 1; font-weight: 600; }
.ar-list .d { font-family: var(--font-typed); font-size: 15px; color: var(--dusk); }
.ar-list .b { display: block; margin: 0 4px 8px; font-size: 15px; font-style: italic; color: var(--dusk); }
.hour .body .links { display: flex; flex-wrap: wrap; gap: 0 16px; }

/* ---- Kitchen: ONE cards box, Belle's hand-off clip, Coming cards as buttons, tin strip ---- */
.rsoon .rsoon-btn { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.rsoon .rsoon-btn:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
.rsoon .rcta { margin: 0 0 4px; font-size: 15px; color: var(--rose); text-decoration: underline; }
.waiting-line { margin: 12px 0 0; padding: 8px 12px; border: 1px dashed var(--thread); border-radius: 2px; background: #f3ead9; color: var(--ink); }
.waiting-line[hidden] { display: none; }
.waiting-line button { background: none; border: 0; padding: 0 4px; min-height: 44px; color: var(--rose); font: inherit; text-decoration: underline; cursor: pointer; }
.kd-handoff { margin: 12px 0 4px; }
.kd-handoff video, .kd-handoff img { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 714; border-radius: 2px; background: #2b2018; }
/* Phones: the full 16:9 frame left Belle ~80px tall at 375px (MEASURED by the reel chat, 15 Oct). A square
   crop on her side of the table (she sits right of centre, the candle just left of her) doubles her size.
   Same file, no second encode. */
@media (max-width: 600px) {
  .kd-handoff video, .kd-handoff img { aspect-ratio: 1 / 1; object-fit: cover; object-position: 88% 50%; }
}
@media (prefers-reduced-motion: reduce) { .pool { animation: none; } }
.tinstrip .tin-n { font-family: var(--font-display); font-size: 28px; color: var(--flame); font-weight: 600; }
.slot { cursor: default; }
.slot.is-got { cursor: pointer; }