/* ==== 00-base.css ==== */
/* OWL NIGHTER — base: tokens, grounds, type, kit (NIGHT OWL FM). Parts never restyle these classes. */
:root {
  --night: #10141F; --night-2: #161B2A; --night-3: #232A3D;
  --paper: #F3EBDD; --paper-hi: #FBF6EC; --paper-lo: #E4D8C3;
  --ink: #1B1A17; --graphite: #5A554C; --mist: #A9B0C2;
  --lamp: #F2B45A; --tally: #B8301F; --tally-lt: #FF7A5C;
  --ring: var(--lamp); --em: var(--lamp);
  --serif: 'Trirong', Georgia, serif;
  --sans: 'Bai Jamjuree', system-ui, sans-serif;
  --cond: 'Smooch Sans', 'Arial Narrow', sans-serif;
  --hand: 'Annie Use Your Telescope', cursive;
  --m: 32px; --nav: 72px;
  --h1: clamp(46px, 8.8vw, 132px);
  --h2: min(clamp(32px, 4.4vw, 62px), calc(var(--h1) * .7));
  --h3: min(clamp(22px, 1.9vw, 28px), calc(var(--h1) * .5));
  color-scheme: dark;
}
@media (max-width: 699px) { :root { --m: 16px; --nav: 56px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav) + 8px); }
html.rm { scroll-behavior: auto; }
body { margin: 0; background: var(--night); color: var(--paper); font: 400 17px/1.6 var(--sans); overflow-x: hidden; }
body.lock { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--paper-hi); color: var(--ink); padding: 12px 18px; border-radius: 6px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- grounds ---------- */
.gd-night { background: var(--night); color: var(--paper); --em: var(--lamp); --ring: var(--lamp); }
.gd-studio { background: var(--night-2) radial-gradient(circle, rgba(169,176,194,.07) 1.2px, transparent 1.6px) 0 0 / 14px 14px; color: var(--paper); --em: var(--lamp); --ring: var(--lamp); }
.gd-paper { background: var(--paper) repeating-linear-gradient(0deg, transparent 0 31px, rgba(27,26,23,.05) 31px 32px); color: var(--ink); --em: var(--tally); --ring: var(--ink); }
.gd-dawn { background: var(--night); color: var(--paper); --em: var(--lamp); --ring: var(--lamp); position: relative; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: calc(1320px + 2 * var(--m)); margin: 0 auto; padding: 0 var(--m); }
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 699px) { .g12 { grid-template-columns: minmax(0, 1fr); } .g12 > * { grid-column: 1 / -1; } }
.sec { padding: 112px 0; position: relative; }
@media (max-width: 699px) { .sec { padding: 72px 0; } }

/* ---------- type (the hero H1 is the largest type on every screen) ---------- */
h1 { font: 300 var(--h1)/.98 var(--serif); letter-spacing: -.02em; }
h2 { font: 400 var(--h2)/1.06 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
h3 { font: 500 var(--h3)/1.2 var(--serif); }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 400; color: var(--em); }
.lbl { font: 700 17px/1.2 var(--cond); text-transform: uppercase; letter-spacing: .08em; }
.lead { font-size: 19px; line-height: 1.6; max-width: 40em; }
@media (max-width: 699px) { .lead { font-size: 17px; } }
.cap { font: italic 400 15px/1.45 var(--serif); color: var(--mist); }
.gd-paper .cap, .pcard .cap, .slip .cap { color: var(--graphite); }
.fine { font-size: 14px; line-height: 1.5; color: var(--mist); }
.gd-paper .fine { color: var(--graphite); }
.hand { font: 400 24px/1.25 var(--hand); }

/* ---------- kit: paper photo card ---------- */
.pcard { background: var(--paper-hi); color: var(--ink); padding: 10px; border: 1px solid rgba(27,26,23,.14); border-radius: 6px; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.gd-paper .pcard { box-shadow: 0 18px 40px rgba(0,0,0,.12); }
.pcard img { width: 100%; border-radius: 3px; }
.pcard .cap { padding: 10px 4px 2px; }

/* ---------- kit: slip (taped note) ---------- */
.slip { position: relative; background: var(--paper); color: var(--ink); border: 1px solid rgba(27,26,23,.14); border-radius: 3px; padding: 22px 18px 14px; box-shadow: 0 10px 24px rgba(0,0,0,.25); --ring: var(--ink); }
.slip::before { content: ""; position: absolute; left: 50%; top: -7px; width: 40px; height: 14px; margin-left: -20px; background: var(--paper-lo); opacity: .9; }
.slip .lbl { color: var(--graphite); }

/* ---------- kit: ON AIR sign ---------- */
.sign { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; background: var(--night-2); border: 2px solid var(--tally-lt); border-radius: 6px; color: var(--tally-lt); font: 800 24px/1 var(--cond); letter-spacing: .12em; white-space: nowrap; }
.sign-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tally-lt); flex: none; }
.sign.sm { height: 28px; padding: 0 10px; gap: 7px; font-size: 16px; border-width: 1.5px; }
.sign.sm .sign-dot { width: 8px; height: 8px; }
@keyframes ns-pulse { 50% { opacity: .7; } }
html.js:not(.rm) .sign, html.js:not(.rm) .sign-dot { animation: ns-pulse 2.4s ease-in-out infinite; }
html.pg-hid * { animation-play-state: paused !important; }

/* ---------- kit: the dial (tuning strip of night hours) ---------- */
.dial { background: var(--night-2); border: 1px solid var(--night-3); border-radius: 8px; padding: 10px 44px 8px; color: var(--mist); }
.dial-tr { position: relative; height: 44px; background: repeating-linear-gradient(90deg, var(--night-3) 0 1px, transparent 1px 14px) 0 100% / 100% 12px no-repeat; }
.dial-t li { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; color: var(--mist); font-size: 15px; }
.dial-t li:nth-child(1) { left: 0; } .dial-t li:nth-child(2) { left: 14.2857%; } .dial-t li:nth-child(3) { left: 28.5714%; }
.dial-t li:nth-child(4) { left: 42.8571%; } .dial-t li:nth-child(5) { left: 57.1429%; color: var(--tally-lt); }
.dial-t li:nth-child(6) { left: 71.4286%; } .dial-t li:nth-child(7) { left: 85.7143%; } .dial-t li:nth-child(8) { left: 100%; }
.dial-run { position: absolute; inset: 0; pointer-events: none; --x: .571429; }
.dial-needle { position: absolute; left: calc(var(--x) * 100%); top: 20px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--tally-lt); }
.dial-needle::before { content: ""; position: absolute; left: -3px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--tally-lt); }
.dial-now { margin-top: 6px; color: var(--lamp); font-size: 15px; }
@media (max-width: 699px) { .dial { padding: 10px 26px 8px; } .dial-t li { font-size: 15px; letter-spacing: .02em; } }
@keyframes ns-sweep { from { transform: translateX(-57.1429%); } to { transform: none; } }
@keyframes ns-drift { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
html.js:not(.rm) .dial-run { animation: ns-sweep 1.4s cubic-bezier(.2,.7,.2,1) .3s both; }
html.js:not(.rm) .dial-needle { animation: ns-drift 6s ease-in-out 1.7s infinite; }

/* ---------- kit: THE CALL-IN LINE ---------- */
.cl { background: var(--paper-hi); color: var(--ink); border: 1px solid rgba(27,26,23,.18); border-radius: 8px; box-shadow: inset 0 4px 0 var(--lamp), 0 18px 40px rgba(0,0,0,.35); padding: 18px 20px 14px; --ring: var(--ink); max-width: 560px; }
.gd-paper .cl { box-shadow: inset 0 4px 0 var(--lamp), 0 14px 32px rgba(0,0,0,.12); }
.cl-hd { display: flex; justify-content: space-between; gap: 12px; color: var(--ink); }
.cl-hd .lbl { font-size: 15px; }
.cl-st { color: var(--graphite); }
.cl-body { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-top: 10px; }
.cl .ca { font: 600 17px/1.35 var(--sans); color: var(--ink); overflow-wrap: anywhere; min-width: 0; flex: 1 1 220px; }
.cl-wait { font: italic 400 18px/1.35 var(--serif); color: var(--ink); flex: 1 1 200px; }
.cl-ft { margin-top: 10px; }
.cl .fine { color: var(--graphite); }
.cl[data-prelaunch] { cursor: pointer; }
@media (max-width: 699px) {
  .cl.sm { padding: 14px; max-width: none; }
  .cl.sm .cl-ft { display: none; }
  .cl.sm .cl-body { margin-top: 8px; gap: 8px 12px; }
  .cl.sm .ca { font-size: 15px; }
  .cl.sm .cl-wait { font-size: 17px; flex-basis: 100%; }
}

/* ---------- kit: pills, round buttons, marks, CTA rows ---------- */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 26px; border-radius: 999px; border: 0; font: 600 17px/1 var(--sans); text-decoration: none; white-space: nowrap; background: transparent; color: inherit; }
.pill.sm { min-height: 44px; padding: 0 18px; font-size: 15px; gap: 8px; }
.pill.buy { background: var(--tally); color: var(--paper-hi); }
.pill.ink { background: var(--ink); color: var(--paper-hi); }
.pill.line { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
.pill.line-l { box-shadow: inset 0 0 0 1.5px var(--paper); color: var(--paper); }
.pill:hover { filter: brightness(1.08); }
.pill.line:hover, .pill.line-l:hover { box-shadow: inset 0 0 0 2.5px currentColor; filter: none; }
.rnd { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border-radius: 50%; border: 0; background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; color: inherit; text-decoration: none; }
.rnd.lg { width: 56px; height: 56px; }
.mk { width: 20px; height: 20px; flex: none; }
.mk.inv { filter: invert(1); }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
@media (max-width: 699px) {
  .cta > .pill.buy { flex: 1 1 100%; }
  .cta > .pill:not(.buy) { flex: 1 1 0; }
}

/* ---------- chrome: header ---------- */
.hd { position: sticky; top: 0; z-index: 50; height: var(--nav); background: var(--night); border-bottom: 1px solid var(--night-3); color: var(--paper); --ring: var(--lamp); }
.hd-in { height: 100%; display: flex; align-items: center; gap: 16px; }
.hd-brand { display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; min-width: 0; }
.hd-brand img { width: 40px; height: 40px; border-radius: 50%; }
.hd-name { font: 500 20px/1 var(--serif); white-space: nowrap; }
.hd-tk { color: var(--mist); font-size: 15px; }
.hd-r { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.hd-nav { display: flex; gap: 4px; }
.hd-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; text-decoration: none; color: var(--mist); font-weight: 600; font-size: 15px; }
.hd-nav a:hover, .hd-nav a.here { color: var(--paper); }
.menu-btn { box-shadow: none; }
@media (max-width: 999px) { .hd-nav { display: none !important; } }
/* one ON AIR sign per screen: the header sign waits until the hero (and its own sign) has gone by; phones never show it - the Buy pill takes that spot */
@media (min-width: 700px) { html.js .hd .sign { visibility: hidden; opacity: 0; transition: opacity .35s ease, visibility 0s linear .35s; } html.js .hd.past .sign { visibility: visible; opacity: 1; transition: opacity .35s ease; } html.js:not(.rm) .hd:not(.past) .sign { animation: none; } html.rm .hd .sign { transition: none; } }
@media (max-width: 699px) { .hd .sign { display: none; } .hd-in { gap: 10px; } .hd-r { gap: 8px; } }
@media (max-width: 559px) { .hd-tk { display: none; } }
@media (max-width: 479px) { .hd-bw { display: none; } .hd .hd-buy { padding: 0 14px; } }
@media (max-width: 359px) { .hd-name { font-size: 18px; } .hd .hd-buy { padding: 0 16px; } .hd .hd-buy .mk { display: none; } }

/* ---------- chrome: menu drawer ---------- */
.hd-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(8,10,16,.66); }
.hd-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(420px, 100%); overflow-y: auto; background: var(--night-2); color: var(--paper); border-left: 1px solid var(--night-3); padding: 14px 24px 32px; --ring: var(--lamp); }
html.js:not(.rm) .hd-drawer { animation: ns-slide .28s ease-out both; }
@keyframes ns-slide { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.hd-dhd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.hd-dhd .lbl { color: var(--mist); }
.hd-drawer nav a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; border-bottom: 1px solid var(--night-3); text-decoration: none; font: 400 22px/1.2 var(--serif); }
.hd-drawer nav a .ic { color: var(--lamp); }
.hd-dcta { display: flex; flex-direction: column; gap: 12px; margin: 24px 0 18px; }
.hd-drow { display: flex; gap: 12px; }
.hd-drow > .pill { flex: 1 1 0; }

/* ---------- chrome: toast, footer shell, 404 ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 80; max-width: calc(100% - 32px); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--paper-hi); color: var(--ink); border: 1px solid rgba(27,26,23,.18); box-shadow: inset 0 3px 0 var(--lamp), 0 14px 34px rgba(0,0,0,.4); border-radius: 8px; padding: 14px 20px; font-weight: 600; font-size: 16px; text-align: center; transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.foot { position: relative; }
.e404 { min-height: 100vh; display: grid; place-content: center; gap: 18px; text-align: center; padding: 32px 16px; background: var(--night); color: var(--paper); }
.e404 h1 { font-size: min(clamp(46px, 8vw, 96px), var(--h1)); }
.e404 .cta { justify-content: center; }

/* ==== 10-hero.css ==== */
/* OWL NIGHTER — hero #top: the studio desk at 3 AM (tp-). The H1 is the largest type on every screen. */
.tp { position: relative; overflow: clip; padding: 28px 0 30px; }
.tp-g { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 24px;
  grid-template-areas: "row host" "name host" "beats host" "sub host" "cl host" "cta host" "dial dial" "fine fine";
  grid-template-rows: auto auto auto auto auto 1fr auto auto; align-items: start; }
.tp-row { grid-area: row; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.tp-kick { color: var(--lamp); }
.tp-name { grid-area: name; margin-top: 18px; }
.tp-name h1 { color: var(--paper-hi); }
.tp-tk { margin-top: 6px; color: var(--mist); font-size: 20px; }
.tp-beats { grid-area: beats; margin-top: 18px; font: 300 40px/1.12 var(--serif); color: var(--paper); }
.tp-beats em { font-style: italic; font-weight: 400; color: var(--em); }
.tp-sub { grid-area: sub; margin-top: 12px; font-size: 18px; color: var(--mist); max-width: 36em; }
.tp-cl { grid-area: cl; margin-top: 22px; }
.tp-cta { grid-area: cta; margin-top: 20px; }
.tp-dial { grid-area: dial; margin-top: 26px; }
.tp-fine { grid-area: fine; margin-top: 12px; }

/* the host: owl cut-out in front of a paper card, head over the card's top edge */
.tp-host { --ow: clamp(300px, 42vw, 600px); grid-area: host; position: relative; justify-self: center; width: calc(var(--ow) * .78); height: var(--ow); margin: 6px 0 34px; }
.tp-host::before { content: ""; position: absolute; left: -40%; right: -40%; top: -6%; bottom: -10%; background: radial-gradient(closest-side, rgba(242,180,90,.22), transparent); }
.tp-card { position: absolute; left: 0; right: 0; top: 18%; bottom: 0; background: var(--paper); border: 1px solid rgba(243,235,221,.25); border-radius: 8px; box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.tp-owl { position: absolute; bottom: 0; left: 50%; width: calc(var(--ow) * .83); height: var(--ow); margin-left: calc(var(--ow) * -.415); }
.tp-cut { width: 100%; height: 100%; }
.tp-steam { position: absolute; inset: 0; pointer-events: none; }
.tp-steam i { position: absolute; bottom: 47%; width: max(3px, calc(var(--ow) * .01)); height: calc(var(--ow) * .045); border-radius: 6px; background: var(--paper); opacity: .5; }
.tp-steam i:nth-child(1) { left: 41%; } .tp-steam i:nth-child(2) { left: 46%; } .tp-steam i:nth-child(3) { left: 51%; }
.tp-tag { position: absolute; left: 6%; bottom: -26px; display: flex; flex-direction: column; gap: 2px; background: var(--paper-hi); color: var(--ink); border: 1px solid rgba(27,26,23,.18); border-radius: 6px; padding: 8px 16px 10px; box-shadow: 0 12px 28px rgba(0,0,0,.35); }
.tp-tag .lbl { color: var(--graphite); font-size: 15px; }
.tp-tagt { font: italic 400 18px/1.3 var(--serif); }

/* motion (html.js and not reduced) */
@keyframes tp-rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tp-steam { 0% { transform: translateY(0); opacity: .5; } 100% { transform: translateY(-28px); opacity: 0; } }
html.js:not(.rm) .tp-owl { animation: tp-rise .7s ease-out both; }
html.js:not(.rm) .tp-steam i { opacity: 0; animation: tp-steam 3s ease-out infinite; }
html.js:not(.rm) .tp-steam i:nth-child(2) { animation-delay: 1s; }
html.js:not(.rm) .tp-steam i:nth-child(3) { animation-delay: 2s; }
.tp-off .tp-steam i, .tp-off .sign, .tp-off .sign-dot, .tp-off .dial-needle { animation-play-state: paused !important; }

/* tablet: smaller beats */
@media (min-width: 700px) and (max-width: 999px) { .tp-beats { font-size: 32px; } .tp-sub { font-size: 17px; } }

/* phone: name + owl side by side, then the line and the Buy */
@media (max-width: 699px) {
  .tp { padding: 14px 0 44px; }
  .tp-g { grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); column-gap: 0; grid-template-rows: none;
    grid-template-areas: "row row" "name host" "beats beats" "sub sub" "cl cl" "cta cta" "dial dial" "fine fine"; }
  .tp-sign { height: 28px; padding: 0 10px; gap: 7px; font-size: 16px; border-width: 1.5px; }
  .tp-sign .sign-dot { width: 8px; height: 8px; }
  .tp-kick { font-size: 15px; }
  .tp-name { align-self: center; margin-top: 0; }
  .tp-w { display: block; }
  .tp-tk { font-size: 17px; }
  .tp-host { --ow: 210px; margin: 10px 0 0; }
  .tp-tag { display: none; }
  .tp-beats { margin-top: 12px; font-size: 26px; }
  .tp-sub { margin-top: 8px; font-size: 16px; }
  .tp-cl { margin-top: 14px; }
  .tp-cta { margin-top: 14px; }
  .tp-dial { margin-top: 30px; }
}
@media (max-width: 699px) and (max-height: 700px) {
  .tp { padding-top: 10px; }
  .tp-sub { display: none; }
  .tp-host { --ow: 168px; margin-top: 6px; }
  .tp-beats { margin-top: 8px; font-size: 22px; }
  .tp-cl { margin-top: 10px; }
  .tp-cta { margin-top: 10px; gap: 10px; }
}
@media (max-width: 359px) { .tp-host { --ow: 170px; } }

/* ==== s01-02.css ==== */
/* Part A: #tonight (tn-), #refill (rf-), #bookclub (bc-). Kit classes are used, never restyled. */

/* ---------- #tonight: the rundown ---------- */
.tn-k, .bc-k { color: var(--ink); margin-bottom: 14px; }
.tn-h, .rf-h, .bc-h { margin-bottom: 20px; }
.tn-g { row-gap: 40px; }
.tn-fig { align-self: center; }
.tn-run { border-top: 1px solid var(--paper-lo); }
.tn-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 24px; align-items: center; gap: 16px; min-height: 64px; padding: 14px 10px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--paper-lo); }
.tn-row:hover { background: rgba(27, 26, 23, .04); }
.tn-t { color: var(--ink); }
.tn-w { display: block; min-width: 0; }
.tn-n { display: block; font: 500 22px/1.25 var(--serif); }
.tn-d { display: block; font-size: 16px; line-height: 1.5; color: var(--graphite); }
.tn-ar { width: 20px; height: 20px; }
@media (min-width: 700px) {
  .tn-hd { grid-column: 1 / 8; grid-row: 1; }
  .tn-run { grid-column: 1 / 8; grid-row: 2; }
  .tn-fig { grid-column: 8 / 13; grid-row: 1 / span 2; }
}
@media (max-width: 699px) {
  .tn-g { row-gap: 32px; }
  .tn-row { grid-template-columns: 58px minmax(0, 1fr) 20px; gap: 12px; padding: 14px 4px; }
  .tn-n { font-size: 20px; }
  .tn-d { font-size: 15px; }
}

/* ---------- #refill: two tilted cards + the host note ---------- */
#refill, #bookclub { overflow-x: clip; }
.rf-k { color: var(--lamp); margin-bottom: 14px; }
.rf-hd { max-width: 780px; margin-bottom: 64px; }
.rf-pics { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.rf-tilt { position: relative; transform: rotate(var(--rf-r, 0deg)); }
.rf-a { --rf-r: -1.5deg; }
.rf-b { --rf-r: 1deg; }
.rf-note { position: absolute; top: -52px; right: -34px; width: 204px; transform: rotate(3deg); z-index: 2; }
.rf-note .hand { margin-bottom: 6px; }
@media (max-width: 699px) {
  .rf-hd { margin-bottom: 48px; }
  .rf-pics { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .rf-note { position: relative; top: auto; right: auto; margin: -16px 6px 0 auto; width: 236px; }
}

/* ---------- #bookclub: the book by lamp light ---------- */
.bc-g { row-gap: 28px; }
.bc-fig { position: relative; }
.bc-fig::before { content: ""; position: absolute; inset: -16%; background: radial-gradient(closest-side, rgba(242, 180, 90, .22), transparent); pointer-events: none; }
.bc-tilt { position: relative; transform: rotate(var(--bc-r, -1deg)); }
.bc-list { position: relative; background: var(--paper-hi); color: var(--ink); border: 1px solid rgba(27, 26, 23, .14); border-radius: 6px; padding: 22px 26px 30px; box-shadow: 0 14px 32px rgba(0, 0, 0, .08); }
.bc-lt { color: var(--graphite); margin-bottom: 8px; }
.bc-ch li { font: 400 21px/1.35 var(--serif); padding: 10px 0; border-bottom: 1px solid var(--paper-lo); }
.bc-ch li:last-child { border-bottom: 0; }
.bc-mn { position: absolute; right: 18px; bottom: -20px; color: var(--tally); font-size: 28px; transform: rotate(-5deg); }
.bc-cta { margin-top: 12px; }
@media (min-width: 700px) {
  .bc-g { align-items: center; }
  .bc-fig { grid-column: 1 / 7; grid-row: 1 / span 3; padding-right: 24px; }
  .bc-hd { grid-column: 7 / 13; grid-row: 1; align-self: end; }
  .bc-list { grid-column: 7 / 12; grid-row: 2; }
  .bc-cta { grid-column: 7 / 13; grid-row: 3; align-self: start; }
}
@media (max-width: 699px) {
  .bc-fig::before { inset: -10%; }
  .bc-ch li { font-size: 19px; }
  .bc-mn { right: 10px; font-size: 26px; }
  .bc-cta { margin-top: 20px; }
}

/* ---------- motion: reveal once, only under html.js:not(.rm) ---------- */
html.js:not(.rm) .tn-run li { transition: opacity .5s ease, transform .5s ease; }
html.js:not(.rm) .tn-run:not(.tn-in) li { opacity: 0; transform: translateX(-12px); }
html.js:not(.rm) .tn-run li:nth-child(2) { transition-delay: 70ms; }
html.js:not(.rm) .tn-run li:nth-child(3) { transition-delay: 140ms; }
html.js:not(.rm) .tn-run li:nth-child(4) { transition-delay: 210ms; }
html.js:not(.rm) .tn-run li:nth-child(5) { transition-delay: 280ms; }
html.js:not(.rm) .tn-run li:nth-child(6) { transition-delay: 350ms; }
html.js:not(.rm) .tn-row .tn-ar { transition: transform .2s ease; }
html.js:not(.rm) .tn-row:hover .tn-ar { transform: translateX(4px); }

html.js:not(.rm) .rf-tilt, html.js:not(.rm) .bc-tilt { transition: transform .8s cubic-bezier(.2, .7, .2, 1), opacity .6s ease; }
html.js:not(.rm) .rf-b { transition-delay: .12s; }
html.js:not(.rm) .rf-pics:not(.rf-in) .rf-tilt, html.js:not(.rm) .bc-fig:not(.bc-in) .bc-tilt { transform: rotate(0deg); opacity: 0; }
html.js:not(.rm) .rf-note { transition: transform .5s ease .7s, opacity .4s ease .7s; }
html.js:not(.rm) .rf-pics:not(.rf-in) .rf-note { transform: translateY(-16px) rotate(3deg); opacity: 0; }
.bc-h em, .rf-h em, .tn-h em { white-space: nowrap; }

/* ==== s03-04.css ==== */
/* Part B: #crew (rq-), #tunein (tu-), #signoff (so-), #kit (kt-), footer (ft-) */

/* ---------- #crew: the request line ---------- */
.rq-k { color: var(--lamp); }
.rq-head { max-width: 920px; }
.rq-head h2 { margin-top: 14px; }
.rq-lead { margin-top: 20px; color: var(--paper); }
.rq-photo { --rot: -.6deg; margin-top: 56px; transform: rotate(var(--rot)); }
.rq-nk { margin-top: 72px; }
.rq-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 30px; align-items: start; }
.rq-n { transform: rotate(var(--rot)); }
.rq-n .hand { margin: 0; }
.rq-n .lbl { margin-top: 12px; font-size: 15px; }
.rq-n1 { --rot: -2deg; }
.rq-n2 { --rot: 1.5deg; margin-top: 18px; }
.rq-n3 { --rot: -1deg; }
.rq-fine { margin-top: 36px; }
@media (max-width: 699px) {
  .rq-photo { margin-top: 36px; }
  .rq-nk { margin-top: 48px; }
  .rq-notes { grid-template-columns: minmax(0, 1fr); gap: 26px; margin-top: 24px; padding: 0 6px; }
  .rq-n2 { margin-top: 0; }
}

/* ---------- #tunein: how to tune in ---------- */
.tu-main { grid-column: 1 / span 7; }
.tu-side { grid-column: 9 / span 4; align-self: center; }
.tu-main h2 { margin-top: 14px; }
.tu-steps { margin-top: 36px; display: grid; gap: 22px; }
.tu-steps li { display: grid; grid-template-columns: min(84px, calc(var(--h1) * .6)) minmax(0, 1fr); gap: 18px; align-items: start; }
.tu-n { font: 300 min(clamp(56px, 5.6vw, 80px), calc(var(--h1) * .6))/.9 var(--serif); color: var(--graphite); }
.tu-steps p { margin-top: 6px; max-width: 34em; }
.tu-cl { margin-top: 36px; }
.tu-cta { margin-top: 20px; }
.tu-fine { margin-top: 20px; }
.tu-pic { --rot: 2deg; transform: rotate(var(--rot)); max-width: 440px; margin-left: auto; }
@media (max-width: 699px) {
  .tu-main, .tu-side { grid-column: 1 / -1; }
  .tu-steps { margin-top: 28px; gap: 18px; }
  .tu-steps li { gap: 14px; }
  .tu-side { margin-top: 28px; }
  .tu-pic { max-width: 340px; margin: 0 auto; }
}

/* ---------- #signoff: the sunrise sign-off ---------- */
.so { padding-bottom: 112px; }
.so-img { width: 100%; height: min(72vh, 66.667vw); object-fit: cover; }
.so-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; }
.so-panel { position: relative; margin-top: -120px; max-width: 660px; padding: 40px 44px 44px; background: var(--night); border-radius: 8px; box-shadow: inset 0 4px 0 var(--lamp), 0 24px 48px rgba(0,0,0,.35); }
.so-k { color: var(--lamp); }
.so-panel h2 { margin-top: 14px; }
.so-p { margin-top: 18px; font-size: 18px; max-width: 34em; }
.so-cta { margin-top: 26px; }
.so-cap { margin-top: 16px; max-width: 320px; text-align: right; }
@media (max-width: 699px) {
  .so { padding-bottom: 72px; }
  .so-img { height: auto; }
  .so-row { flex-direction: column; gap: 0; }
  .so-panel { margin: 0 calc(-1 * var(--m)); max-width: none; padding: 32px var(--m) 8px; border-radius: 0; box-shadow: none; }
  .so-cap { order: -1; margin-top: 10px; max-width: none; text-align: left; }
}

/* ---------- #kit: take-home kit ---------- */
.kt-txt { grid-column: 1 / span 6; align-self: center; }
.kt-side { grid-column: 8 / span 5; }
.kt-k { color: var(--lamp); }
.kt-txt h2 { margin-top: 14px; }
.kt-dl { margin-top: 32px; max-width: 520px; border-top: 1px solid rgba(243,235,221,.18); }
.kt-row { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 6px; border-bottom: 1px solid rgba(243,235,221,.18); font-weight: 600; text-decoration: none; }
.kt-row .ic { color: var(--lamp); }
.kt-row:hover span { text-decoration: underline; text-underline-offset: 4px; }
.kt-sh { margin-top: 28px; }
.kt-pic { --rot: -2deg; transform: rotate(var(--rot)); max-width: 440px; margin-left: auto; }
@media (max-width: 699px) {
  .kt-txt, .kt-side { grid-column: 1 / -1; }
  .kt-side { margin-top: 36px; }
  .kt-pic { max-width: 340px; margin: 0 auto; }
  .kt-sh .pill { width: 100%; }
}

/* ---------- footer ---------- */
.foot { padding: 56px 0 44px; border-top: 1px solid var(--night-3); }
.ft-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; }
.ft-brand { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; text-decoration: none; }
.ft-brand img { border-radius: 50%; }
.ft-name { font: 500 24px/1.1 var(--serif); }
.ft-tk { color: var(--lamp); }
.ft-line { color: var(--mist); }
.ft-marks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.ft-bot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--night-3); }
.ft-legal .fine + .fine { margin-top: 4px; }
.ft-legal .fine:first-child { text-transform: uppercase; letter-spacing: .04em; color: var(--paper); }

/* ---------- motion (reveal once; final state without js or under .rm) ---------- */
html.js:not(.rm) .rq-photo, html.js:not(.rm) .tu-pic, html.js:not(.rm) .kt-pic { opacity: 0; transform: none; transition: transform .9s cubic-bezier(.2,.7,.2,1), opacity .6s ease; }
html.js:not(.rm) .rq-photo.in, html.js:not(.rm) .tu-pic.in, html.js:not(.rm) .kt-pic.in { opacity: 1; transform: rotate(var(--rot)); }
html.js:not(.rm) .rq-n { opacity: 0; transform: translateY(-16px) rotate(var(--rot)); transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .5s ease; }
html.js:not(.rm) .rq-n2 { transition-delay: .12s; }
html.js:not(.rm) .rq-n3 { transition-delay: .24s; }
html.js:not(.rm) .rq-notes.in .rq-n { opacity: 1; transform: rotate(var(--rot)); }
html.js:not(.rm) .so-panel { opacity: 0; transform: translateY(32px); transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .6s ease; }
html.js:not(.rm) .so-panel.in { opacity: 1; transform: none; }