/* design.css , LAYOUT=design. LAYOUT for every designed page. The THEME is not here.
 *
 * ONE SYSTEM (2026-09-29, Andrew's ruling): the palette, the semantic tokens, dark mode and the page ground moved into
 * the kit, kit/gab-kit-v2.css ("THE r2 THEME"), which every page links FIRST, before this file. This file holds layout
 * only and never declares :root, body, h1-h4, .btn, .nav or a font. Read the kit's THEME CONTRACT before adding a rule:
 *   use the semantic tokens (--bg --surface --surface-soft --ink --ink-soft --heading --accent --line --on-accent --band
 *   --on-band --on-band-no --shadow-rgb --field-line, and the fixed --btn --cover --plate --scrim-* --on-photo), never a
 *   hex or rgba literal and never the raw palette. A new colour is a conversation about the kit.
 *
 * Copied, not written, in round 1 (the design session's sections folder: shell.html, parts/01-hero.html .. 08-footer.html,
 * pages-src/extras.css, make_pages.py). The section library in the vault was round 1; this file is now the canonical
 * layout source, edit it here.
 */
html{margin:0;background:var(--bg)}
/* ===== shared kit layer: every part uses these, none redefines them ===== */
.k-h1{font:400 clamp(40px,5.2vw,68px)/1.02 var(--display);color:var(--heading);margin:0;text-wrap:balance;letter-spacing:-.005em}
.k-h2{font:400 clamp(30px,3.4vw,44px)/1.08 var(--display);color:var(--heading);margin:0;text-wrap:balance}
.k-h3{font:400 24px/1.2 var(--display);color:var(--heading);margin:0;text-wrap:balance}
.k-lede{font-size:19px;line-height:1.55;color:var(--ink-soft);margin:0}
.k-small{font-size:14px;color:var(--ink-soft)}
.k-meta{font:700 13px/1.3 var(--body);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.k-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background-image:var(--btn);color:var(--on-accent);font:700 16px/1 var(--body);padding:16px 26px;border-radius:999px;border:0;text-decoration:none;cursor:pointer}
.k-btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:10px;color:var(--heading);font:700 16px/1 var(--body);text-decoration:none;padding:16px 26px;border-radius:999px;border:0;cursor:pointer}
.k-link{color:var(--heading);font-weight:700;text-decoration:none;border-bottom:1.5px solid color-mix(in srgb,var(--heading) 25%,transparent);transition:border-color .3s cubic-bezier(.2,.7,.2,1)}
.k-guest{border-radius:var(--r);object-fit:cover;aspect-ratio:4/5;width:100%}
.k-play{width:46px;height:46px;border-radius:50%;background-image:var(--btn);display:inline-grid;place-items:center;flex:none}
.k-play svg{width:16px;height:16px;fill:var(--on-accent);margin-left:3px}
.k-chip{display:inline-block;font:700 12px/1 var(--body);padding:7px 11px;border-radius:999px;background:var(--bg);color:var(--heading)}
.k-tag{display:inline-block;font:700 11px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;padding:6px 9px;border-radius:999px;background:var(--surface-soft);color:var(--heading)}
.k-mark{display:inline-block;width:40px;height:40px;flex:none;line-height:0}
/* NO WIDOWS (Andrew 09-29, the signup note ending on "any time." alone: "just looks ugly"). The kit sets p/li to
   text-wrap:pretty, and Chrome still leaves one word alone on short blocks, so every short block balances its lines
   (Chrome balances up to 6 lines; longer blocks fall back to pretty). The long reading columns keep pretty.
   Proof: node tools/widow-check.mjs <dist>. */
.dz :is(p,li,dd,dt,figcaption,blockquote,label,small,.k-small,.k-meta){text-wrap:balance}
.dz :is(.ar-body,.ep2-prose,.lg-text,.ar-qa-a) :is(p,li),.dz .ar-qa-a{text-wrap:pretty}
.dz .ar-body .ar-pull :is(p,blockquote){text-wrap:balance}
.nw{white-space:nowrap}
@media (max-width:560px){.dz :is(h1,h2) .nw{white-space:normal}}   /* a glued long name ("Susan&nbsp;Hardwick-Smith") is wider than a phone heading: let it wrap there (09-30) */
/* HOVER SYSTEM (Andrew 09-29: the topic tiles' hover is the good one, "why don't we have the same hover styling
   everywhere"). ONE motion language, four classes; nothing else invents a hover (buttons: the BUTTON SYSTEM below):
     .k-hov       the clickable thing (an <a>, or a card whose main link covers it). Its photo and title react together.
     .k-hov-ph    the box that crops the photo (radius + overflow hidden): the photo inside zooms to 1.06 over .6s.
     .k-hov-t     the title or name: takes the accent color.
     .k-hov-lift  add to a boxed card (surface ground): it also rises 1px and a soft shadow grows under it.
   (09-29: the 3px rise read as bouncing, so it is 1px. Then "more zoom on hover" and "move a lil faster": the photo zoom is 1.06, quick.)
   TEXT LINKS have their own two, same easing and same rules about hover and reduced motion:
     .k-hov-u     a link that is just words (nav links, footer links, the legal line): an accent underline draws in from the left
                  on hover and on keyboard focus. aria-current on the link keeps a quiet half-strength underline, so the current
                  page shows without a second color. Inside the dark footer band the underline takes the band's text color,
                  because the accent does not read on it.
     .k-link      the bold link inside a sentence or under a section: its underline goes from a quarter strength to full.
   Hover only where a real pointer hovers (hover:hover); reduced motion keeps the color change, drops the movement.
   Easing: cubic-bezier(.2,.7,.2,1), the same quick-then-soft curve as the BUTTON SYSTEM. */
.k-hov{transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .5s cubic-bezier(.2,.7,.2,1)}
.k-hov-ph{display:block;overflow:hidden}
.k-hov-ph img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.k-hov-t{transition:color .25s ease}
@media (hover:hover){
  .k-hov:hover .k-hov-ph img{transform:scale(1.06)}
  .k-hov:hover .k-hov-t{color:var(--accent)}
  .k-hov-lift:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(var(--shadow-rgb),.10)}
}
.k-hov-u{position:relative;display:inline-block;text-decoration:none;transition:color .25s ease}
.k-hov-u::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1.5px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:transform .4s cubic-bezier(.2,.7,.2,1),opacity .25s ease}
.k-hov-u[aria-current]{color:var(--heading)}
.k-hov-u[aria-current]::after{transform:scaleX(1);opacity:.5}
.k-hov-u:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.k-hov-u:focus-visible::after{transform:scaleX(1);opacity:1}
@media (hover:hover){
  .k-hov-u:hover{color:var(--heading)}
  .k-hov-u:hover::after{transform:scaleX(1);opacity:1}
  .k-link:hover{border-bottom-color:var(--heading)}
}
.k-link:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px;border-bottom-color:var(--heading)}
@media (prefers-reduced-motion:reduce){.k-hov,.k-hov-ph img{transition:color .25s ease}.k-hov:hover .k-hov-ph img,.k-hov-lift:hover{transform:none}.k-hov-u::after{transition:opacity .25s ease}}
/* BUTTON SYSTEM (Andrew 2026-09-29, third pass). The first pass copied Virtuo's moves (an arrow that swapped sides, a 2px lift,
   outline buttons flooding dark) and he ruled it "just too much": her reader is a woman in midlife who wants something elegant and
   premium to enjoy hovering over, so nothing travels. The second pass (a 1px rise and a still arrow, slow) he then saw live and
   ruled: "no arrows on these", "more zoom on hover", and "move a lil faster too so they really feel the hover and get a response".
   So a hover is a quick, gentle zoom in place plus color and light. Nothing slides, swaps sides or floods.
   Every button on the site is one of three kinds, and this block is the only place any of them gets a hover, a focus look or a press:
     PRIMARY    .k-btn, .ep2-btn, .ar-hear, the signup form's submit, the nav offer pill. The blend --btn-deep (red, raspberry, wine)
                rests on its red half and drifts to its middle, so the color deepens from red into raspberry; a warm glow
                (--btn-glow-hover) grows under it; it zooms to 1.04. White on every point of the blend clears 4.5:1 (kit item 2).
     SECONDARY  .k-btn-ghost, the nav "Work with me" pill, .pc-showmore, .tp-more-btn, the podcast page's listen links. It STAYS
                outlined: the 1.5px line goes from 40% to the full heading color and a 7% heading tint fills in. The label never
                changes color. It zooms to 1.04.
     ROUND      .k-play and .ep2-play: the same drift and glow, a soft halo (7px of accent at 16%) fades in, and it zooms to 1.08.
   NO ARROWS. Text-only buttons are just the words. A button that carries its own icon (play, listen) eases that icon 2px.
   MOTION: cubic-bezier(.2,.7,.2,1), a quick start that settles softly. The zoom .45s; color, glow, tint and halo .5s
   (Andrew, after .3s went live: "make button hover a bit slower"). Hover only
   where a real pointer hovers (hover:hover). Keyboard focus gets a 2px accent ring plus the hovered look. A press only deepens the
   color (a darker inset shade on a primary, a stronger tint on a secondary). Reduced motion keeps the color, glow, tint and halo
   and drops the zoom and the icon ease. */
.dz :is(.k-btn,.ep2-btn,.ar-hear,form.signup button,.hx-nav .pill,.k-play,.ep2-play){background-image:var(--btn-deep,var(--btn))}
.k-btn,.ep2-btn,.ar-hear,.dz form.signup button,.hx-nav .pill,.k-play,.ep2-play{background-size:200% 100%;background-position:0 0;box-shadow:0 6px 18px var(--btn-glow),inset 0 0 0 100vmax rgba(var(--shadow-rgb),0);transition:background-position .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s cubic-bezier(.2,.7,.2,1),transform .45s cubic-bezier(.2,.7,.2,1)}
.k-btn-ghost,.hx-nav .pill-ghost,.pc-morewrap .pc-showmore,.tp-more-eps .tp-more-btn,.pc-listen a{background-color:transparent;color:var(--heading);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--heading) 40%,transparent);transition:background-color .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s cubic-bezier(.2,.7,.2,1),transform .45s cubic-bezier(.2,.7,.2,1)}
.k-play,.ep2-play{position:relative}
.k-play::after,.ep2-play::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 16%,transparent);opacity:0;pointer-events:none;transition:opacity .5s cubic-bezier(.2,.7,.2,1)}
.k-btn svg,.k-btn-ghost svg,.ep2-btn .ep2-ico,.ar-hear svg{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
/* focus: the ring, and the hovered look (the movement follows below, outside reduced motion) */
.k-btn:focus-visible,.ep2-btn:focus-visible,.ar-hear:focus-visible,.dz form.signup button:focus-visible,.hx-nav .pill:focus-visible,.k-btn-ghost:focus-visible,.hx-nav .pill-ghost:focus-visible,.pc-morewrap .pc-showmore:focus-visible,.tp-more-eps .tp-more-btn:focus-visible,.pc-listen a:focus-visible,.ep2-play:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ft-b form.signup button:focus-visible{outline-color:var(--on-band)}
.k-btn:focus-visible,.ep2-btn:focus-visible,.ar-hear:focus-visible,.dz form.signup button:focus-visible,.hx-nav .pill:focus-visible,a:focus-visible .k-btn,.ep2-play:focus-visible,a:focus-visible .k-play,.k-hov:focus-within .k-play{background-position:50% 0;box-shadow:0 12px 30px var(--btn-glow-hover),inset 0 0 0 100vmax rgba(var(--shadow-rgb),0)}
.k-btn-ghost:focus-visible,.hx-nav .pill-ghost:focus-visible,.pc-morewrap .pc-showmore:focus-visible,.tp-more-eps .tp-more-btn:focus-visible,.pc-listen a:focus-visible{background-color:color-mix(in srgb,var(--heading) 7%,transparent);box-shadow:inset 0 0 0 1.5px var(--heading)}
.ep2-play:focus-visible::after,a:focus-visible .k-play::after,.k-hov:focus-within .k-play::after{opacity:1}
@media (hover:hover){
  .k-btn:hover,a:hover .k-btn,.ep2-btn:hover,.ar-hear:hover,.dz form.signup button:not(:disabled):hover,.hx-nav .pill:hover,.ep2-play:hover,a:hover .k-play,.k-hov:hover .k-play{background-position:50% 0;box-shadow:0 12px 30px var(--btn-glow-hover),inset 0 0 0 100vmax rgba(var(--shadow-rgb),0)}
  .k-btn-ghost:hover,.hx-nav .pill-ghost:hover,.pc-morewrap .pc-showmore:hover,.tp-more-eps .tp-more-btn:hover,.pc-listen a:hover{background-color:color-mix(in srgb,var(--heading) 7%,transparent);box-shadow:inset 0 0 0 1.5px var(--heading)}
  .ep2-play:hover::after,a:hover .k-play::after,.k-hov:hover .k-play::after{opacity:1}
}
@media (prefers-reduced-motion:no-preference){
  .k-btn:focus-visible,.ep2-btn:focus-visible,.ar-hear:focus-visible,.dz form.signup button:focus-visible,.hx-nav .pill:focus-visible,.k-btn-ghost:focus-visible,.hx-nav .pill-ghost:focus-visible,.pc-morewrap .pc-showmore:focus-visible,.tp-more-eps .tp-more-btn:focus-visible,.pc-listen a:focus-visible{transform:scale(1.04)}
  .ep2-play:focus-visible,a:focus-visible .k-play,.k-hov:focus-within .k-play{transform:scale(1.08)}
  .k-btn:focus-visible svg,.k-btn-ghost:focus-visible svg,.ep2-btn:focus-visible .ep2-ico,.ar-hear:focus-visible svg{transform:translateX(2px)}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .k-btn:hover,a:hover .k-btn,.ep2-btn:hover,.ar-hear:hover,.dz form.signup button:not(:disabled):hover,.hx-nav .pill:hover,.k-btn-ghost:hover,.hx-nav .pill-ghost:hover,.pc-morewrap .pc-showmore:hover,.tp-more-eps .tp-more-btn:hover,.pc-listen a:hover{transform:scale(1.04)}
  .ep2-play:hover,a:hover .k-play,.k-hov:hover .k-play{transform:scale(1.08)}
  .k-btn:hover svg,a:hover .k-btn svg,.k-btn-ghost:hover svg,.ep2-btn:hover .ep2-ico,.ar-hear:hover svg{transform:translateX(2px)}
}
/* the press: the color deepens (the zoom holds) */
.k-btn:active,.ep2-btn:active,.ar-hear:active,.dz form.signup button:active,.hx-nav .pill:active,.k-play:active,.ep2-play:active,a:active .k-play{box-shadow:0 6px 18px var(--btn-glow-hover),inset 0 0 0 100vmax rgba(var(--shadow-rgb),.14);transition-duration:.12s}
.k-btn-ghost:active,.hx-nav .pill-ghost:active,.pc-morewrap .pc-showmore:active,.tp-more-eps .tp-more-btn:active,.pc-listen a:active{background-color:color-mix(in srgb,var(--heading) 13%,transparent);transition-duration:.12s}
/* her face in a circle (images.mjs herFace): the span is the circle, the page sets its width; the img inside is placed by
   inline %, so no page rule for "X img" may size, round or crop it */
.k-face{display:inline-block;vertical-align:middle;flex:none;aspect-ratio:1;border-radius:50%;overflow:hidden;line-height:0;background:var(--surface-soft);box-shadow:0 0 0 1px var(--line)}
.k-face>.k-face-i{display:block;max-width:none;height:auto;aspect-ratio:auto;border-radius:0;object-fit:fill}
.k-mark svg,.k-ripple svg{width:100%;height:100%;display:block;overflow:visible}
/* overflow:visible is the fix for the clipped ring mark (Andrew 09-29: "the right side of the circles are cut off"). ringSVG draws the
   outermost ring so its stroke ends exactly on the edge of the 200-unit box, and an svg clips at that edge by default. On a screen
   where the box does not land on a whole device pixel (browser zoom, a non-integer pixel ratio, a window of odd width) the clip
   shaves the last sliver, right and bottom first. Nothing else in the box reaches past it, so letting the stroke finish is safe. */
.k-ripple{position:absolute;pointer-events:none;aspect-ratio:1/1;opacity:.16;z-index:0;color:var(--accent)}
.k-wm{font-family:var(--display);text-transform:uppercase;color:var(--heading);letter-spacing:.28em;font-size:15px;white-space:nowrap}
/* THE COVER (cover.mjs; Andrew 2026-09-29 picked the love letter with a heart seal). A 4:5 box: the cream Day 1 card stands in
   its top part, the wine envelope fills the bottom 54% and hides the card's lower half, the flap's point meets the seal, and the
   seal sits at the envelope's vertical center. Everything inside is sized in cqi (a share of the cover's own width), so the one
   piece reads the same at 124px over a photo and at 260px on the free guide. The page sets the width on its class. */
.k-letter{position:relative;display:block;aspect-ratio:4/5;container-type:inline-size;text-align:left}
.k-letter-card{position:absolute;left:12%;right:12%;top:4%;height:58%;display:flex;flex-direction:column;gap:3cqi;padding:9cqi 8cqi 0;border-radius:3cqi;background:color-mix(in srgb,var(--blush) 30%,var(--white));color:var(--wine);box-shadow:0 1.5cqi 5cqi rgba(var(--shadow-rgb),.14)}
.k-letter .d,.k-letter .a{font:700 max(4.4cqi,7px)/1.2 var(--body);letter-spacing:.18em;text-transform:uppercase}
.k-letter .d{color:var(--rasp)}
.k-letter .t{font:400 11.7cqi/1.02 var(--display);text-wrap:balance}
.k-letter-env{position:absolute;left:0;right:0;bottom:0;height:54%;border-radius:4cqi;background:linear-gradient(160deg,color-mix(in srgb,var(--wine) 85%,var(--rasp)) 0%,var(--wine-deep) 100%);box-shadow:0 7cqi 15cqi rgba(var(--shadow-rgb),.28)}
.k-letter-flap{position:absolute;left:0;right:0;top:0;height:70%;border-radius:4cqi 4cqi 0 0;background:linear-gradient(180deg,color-mix(in srgb,var(--wine) 70%,var(--rasp)) 0%,var(--wine) 100%);clip-path:polygon(0 0,100% 0,50% 78%)}
.k-letter-env .a{position:absolute;left:0;right:0;bottom:6%;text-align:center;color:var(--blush)}
.k-letter-seal{position:absolute;left:50%;top:73%;width:20%;aspect-ratio:1;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 38% 32%,color-mix(in srgb,var(--rasp) 18%,var(--blush)) 0%,color-mix(in srgb,var(--rasp) 34%,var(--blush)) 100%);box-shadow:0 .8cqi 2.4cqi rgba(var(--scrim-rgb),.35),inset 0 0 0 .6cqi color-mix(in srgb,var(--white) 25%,transparent)}
.k-letter-seal svg{width:58%;height:58%;margin-top:4%;fill:color-mix(in srgb,var(--rasp) 55%,var(--blush))}

/* shared nav used by all three heroes: wordmark left, five links, then two actions. "Get the mini book" is the primary pill,
   "Work with me" the quieter outlined one. Under 900px the links and both actions move into the phone menu. */
.hx-nav{display:flex;align-items:center;gap:28px;padding:22px 36px}
.hx-nav .brand{display:flex;align-items:center;gap:12px;margin-right:auto;color:var(--heading)}
.hx-nav .brand .k-mark{width:34px;height:34px}
.hx-nav .links{display:flex;gap:26px;font-size:15px}
.hx-nav .links a{color:var(--ink);padding:8px 0}
.hx-nav .links a::after{bottom:3px}
.hx-nav .acts{display:flex;align-items:center;gap:10px}
.hx-nav .pill,.hx-nav .pill-ghost{font:700 14px/1 var(--body);padding:12px 18px;border-radius:999px;text-decoration:none;white-space:nowrap}
.hx-nav .pill{color:var(--on-accent);background-image:var(--btn)}
.hx-nav .pill-ghost{color:var(--heading)}
@media (max-width:1180px){.hx-nav{gap:20px}.hx-nav .links{gap:20px}.hx-nav .k-wm{letter-spacing:.2em}}
/* the nav has five links and two actions, which stop fitting a little above 1000px; the menu takes over there, ahead of the page's 900px phone layout */
@media (max-width:1040px){.hx-nav .links,.hx-nav .acts{display:none}}
@media (max-width:900px){.hx-nav{padding:18px 20px}}
@media (max-width:560px){.hx-nav{gap:12px}.hx-nav .k-wm{font-size:12px;letter-spacing:.16em}.hx-nav .brand{gap:8px}.hx-nav .brand .k-mark{width:28px;height:28px}}

/* C: editorial calm */
.hC{background:var(--bg);position:relative;overflow:visible clip;padding-bottom:56px}
.hC .k-ripple{right:-70px;top:90px;width:470px;opacity:.14}
@media (max-width:900px){.hC .k-ripple{display:none}}
.hC .grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:56px;align-items:center;padding:40px 72px 0;position:relative}
.hC .txt{display:flex;flex-direction:column;gap:24px}
.hC .k-h1{font-size:clamp(44px,5.4vw,74px)}
.hC .creds{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;color:var(--ink-soft);padding-top:6px}
.hC .creds b{color:var(--heading);font-weight:700}
.hC .photo{position:relative}
.hC .photo img{border-radius:var(--r);aspect-ratio:4/5;width:100%;object-fit:cover;object-position:62% 30%}
.hC .ep{position:absolute;left:-48px;bottom:36px;background:var(--surface);border-radius:var(--r-sm);padding:14px 16px;display:flex;gap:12px;align-items:center;max-width:320px;box-shadow:0 18px 40px rgba(var(--shadow-rgb),.12)}
.hC .ep p{margin:0;font-size:14px;line-height:1.35}
@media (max-width:900px){.hC .grid{grid-template-columns:1fr;padding:24px 20px 0;gap:32px}.hC .ep{left:12px;right:12px;bottom:12px}}

/* E1: browse by theme */

.gw-nm{font:700 15px/1.25 var(--body);color:var(--ink);margin:0}
.gw-cr{font-size:13px;line-height:1.4;color:var(--ink-soft);margin:0}
.gw-rip{position:absolute;pointer-events:none}

/* A: expert board */
.gwA{background:var(--surface);padding:56px 48px 48px;position:relative;overflow:hidden;margin:24px 44px 0;border-radius:var(--r)}
.gwA .gw-rip{width:560px;right:-160px;top:-200px}
.gwA .lead{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,3vw,44px);align-items:center;max-width:900px}
/* her photo is as tall as the headline beside it: 200px at 1440 and up, scaling down with the window, 132px stacked on a phone */
.gwA .lead .k-face{width:clamp(120px,14vw,200px)}
.gwA .lead .k-h2{font-size:clamp(28px,3.2vw,42px)}
.gwA .who{margin:10px 0 0}
.gwA .row{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:44px}
.gwA .row a{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit}
.gwA .row a[hidden]{display:none}
.gwA .gw-ph{border-radius:var(--r);margin-bottom:8px}
.gwA .gw-ph .k-guest{display:block;border-radius:0}
.gwA .gw-foot{position:relative;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:36px}
@media (max-width:900px){.gwA{padding:32px 20px;margin:16px 16px 0}.gwA .lead{grid-template-columns:1fr;gap:16px}.gwA .lead .k-face{width:132px}.gwA .row{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:32px}}

@media (max-width:900px){.gw-rip{display:none}}

/* shared bits */
.su-note{font-size:14px;line-height:1.45;color:var(--ink-soft);margin:0}

/* A: one column, calm */
.su-a{background:var(--bg);position:relative;overflow:hidden;padding:128px 24px 88px}   /* Andrew 09-29: "needs more top padding" (was 72px; the rings nearly touched the section above) */
.su-a .su-rip{position:absolute;left:50%;top:88px;margin-left:-170px;width:340px;height:340px}
.su-a .su-col{position:relative;max-width:520px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.su-a .su-cover{width:210px;margin-bottom:16px}
.su-a .k-h1{font-size:clamp(38px,4.6vw,58px)}
.su-a form{width:100%;display:grid;gap:10px;margin-top:4px}
.su-a .k-btn{width:100%}
@media (max-width:900px){.su-a{padding:72px 20px 56px}.su-a .su-cover{width:180px}.su-a .su-rip{display:none}}

/* A: Hi, I'm Gabriella */
.abA{background:var(--bg);padding:40px 36px}
.abA .box{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);background:var(--surface);border-radius:var(--r);overflow:hidden}
.abA .pic{position:relative;min-height:600px}
.abA .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:32% 40%}
.abA .txt{padding:56px 52px;display:flex;flex-direction:column;justify-content:center;gap:20px}
.abA .txt p{margin:0}
.abA .acts{display:flex;gap:14px 22px;align-items:center;flex-wrap:wrap;margin-top:6px}
@media (max-width:900px){.abA{padding:20px 16px}.abA .box{grid-template-columns:1fr}.abA .pic{min-height:340px}.abA .txt{padding:28px 22px}}

/* shared */
.ft-legal{font-size:13px;line-height:1.5;color:var(--ink-soft);margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 20px}
.ft-legal a{color:inherit}

/* B: wine-deep, the lockup left aligned. Four columns (brand, Explore, Topics, Listen), then the signup row, then a bottom bar with
   the legal line on the left and the Appearance setting on the right. Space separates things, so no divider lines. */
/* the band runs to both window edges at any width (the page column stops at 1440); its content stays in the column */
.ft-b{background:var(--band);color:var(--on-band);padding:80px 64px 40px;box-shadow:0 0 0 100vmax var(--band);clip-path:inset(0 -100vmax)}
.ft-b .ft-top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:56px;align-items:start}
.ft-b .ft-lock{display:flex;flex-direction:column;align-items:flex-start;gap:18px;color:var(--on-band)}
.ft-b .ft-mark{width:64px;height:64px;display:block}
.ft-b .ft-name{font:400 26px/1.15 var(--display);text-transform:uppercase;letter-spacing:.28em;text-align:left}
.ft-b .ft-name span{display:block}
.ft-b .ft-tag{margin:22px 0 0;font-size:15px;line-height:1.55;color:color-mix(in srgb,var(--on-band) 72%,transparent);max-width:300px}
.ft-b h4{font:400 20px/1.2 var(--display);margin:0 0 18px;color:var(--on-band)}
.ft-b ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.ft-b ul a{color:color-mix(in srgb,var(--on-band) 78%,transparent);font-size:15px;padding:5px 0}
.ft-b .k-hov-u::after{background:var(--on-band);bottom:3px}
.ft-b .k-hov-u:hover,.ft-b .k-hov-u[aria-current]{color:var(--on-band)}
.ft-b .k-hov-u:focus-visible{outline-color:var(--on-band)}
.ft-b .ft-sign{margin-top:64px;background:color-mix(in srgb,var(--on-band) 7%,transparent);border-radius:var(--r);padding:28px 32px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px 40px;align-items:center}
.ft-b .ft-sign p{margin:0;font-size:16px;line-height:1.45;color:var(--on-band);text-wrap:balance}
.ft-b .ft-sign p i{font-style:italic}
.ft-b .ft-bot{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;margin-top:40px}
.ft-b .ft-legal{color:color-mix(in srgb,var(--on-band) 66%,transparent)}
.ft-b .ft-legal a{padding:6px 0}
/* Appearance: Auto / Light / Dark, one segmented control. It stays hidden until the script that saves the choice runs. */
.ft-appear{display:flex;align-items:center;gap:12px;font-size:13px;color:color-mix(in srgb,var(--on-band) 66%,transparent)}
.ft-appear[hidden]{display:none}
.ft-seg{display:inline-flex;padding:3px;border-radius:999px;background:color-mix(in srgb,var(--on-band) 10%,transparent)}
.ft-seg button{all:unset;box-sizing:border-box;cursor:pointer;font:700 13px/1 var(--body);color:color-mix(in srgb,var(--on-band) 78%,transparent);padding:9px 16px;border-radius:999px;transition:background-color .3s cubic-bezier(.2,.7,.2,1),color .25s ease}
.ft-seg button[aria-pressed="true"]{background:var(--on-band);color:var(--band)}
.ft-seg button:focus-visible{outline:2px solid var(--on-band);outline-offset:2px}
@media (hover:hover){.ft-seg button[aria-pressed="false"]:hover{color:var(--on-band);background:color-mix(in srgb,var(--on-band) 12%,transparent)}}
@media (max-width:1100px){.ft-b{padding:64px 40px 36px}.ft-b .ft-top{gap:40px 32px}}
@media (max-width:900px){
  .ft-b{padding:48px 22px 28px}
  .ft-b .ft-top{grid-template-columns:1fr 1fr;gap:36px 24px}
  .ft-b .ft-brand,.ft-b .ft-listen{grid-column:1/-1}
  .ft-b .ft-listen ul{display:flex;flex-wrap:wrap;gap:0 28px}
  .ft-b .ft-name{font-size:22px}
  .ft-b .ft-sign{grid-template-columns:1fr;margin-top:40px;padding:22px 18px}
  .ft-b form .k-btn{width:100%}
  .ft-b .ft-bot{flex-direction:column;align-items:flex-start;gap:20px;margin-top:32px}
  .ft-b .ft-legal span{flex:0 0 100%}   /* the copyright line stands alone, Privacy and Terms sit together under it */
}

/* BACKGROUND SECTIONS, THE RULE (Andrew 2026-10-03: "container can be there for content but bg sections need better logic ...
   we're not using rounded corners for sections with bg's. and footer and nav should extend to edges right?"):
   - Page content lives in the 1440 container (main.pg). The page background itself runs edge to edge (body.dz).
   - Any section with its OWN background inside the container is a rounded card: border-radius var(--r), the radius of the
     guest and topic hero cards. Never a square box clipped at the container edge.
   - Only the NAV bar background (the sticky .ar-top / .ep2-top grounds) and the FOOTER background (.ft-b) run to the screen
     edges; their logo, links and columns stay on the container line.
   Proof of the rule on a page: the 1920 scan in gab-status-1003/bg-logic/scan.cjs (no square own-background box as wide as
   the container). */
/* page-only pieces the section library didn't cover: press strip, doors, episode page header/answer/notes/host/related */
.pg{max-width:1440px;margin:0 auto}
.pg-sec{padding:72px 44px}
.pg-sec.tight{padding-top:24px}
@media (max-width:900px){.pg-sec{padding:44px 16px}}

/* press strip */
.px{padding:28px 44px 8px}
.px .row{background:var(--surface);border-radius:var(--r);padding:22px 32px;display:flex;align-items:center;gap:14px 40px;flex-wrap:wrap;justify-content:center}
.px .lbl{font-size:14px;color:var(--ink-soft);margin-right:8px}
.px .n{font:400 21px/1.1 var(--display);color:var(--heading);white-space:nowrap}
@media (max-width:900px){.px{padding:20px 16px 0}.px .row{padding:18px;gap:10px 22px}.px .n{font-size:17px}}
/* outlet logos (home): each is the outlet's own art as a one-colour mask, painted with a theme token so it sits in the palette in light and dark.
   --lw / --lh = the logo's display size in px at desktop (set in home.mjs so all six carry the same weight); --s scales them down on a phone. */
.px .row:has(.px-lg){gap:20px 56px;padding:26px 40px}
.px-lg{--s:1;flex:none;display:block;width:calc(var(--lw)*var(--s)*1px);height:calc(var(--lh)*var(--s)*1px);background:var(--ink-soft);-webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat}
/* phone and tablet: the label on its own line, then the six logos in an even grid (3 across, 2 across on a phone) so no logo is left alone on the last row */
@media (max-width:900px){.px .row:has(.px-lg){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));justify-items:center;align-items:center;gap:22px 16px;padding:24px 18px}.px-lg{--s:.8}.px .lbl:has(+.px-lg){grid-column:1/-1;margin:0 0 2px}}
@media (max-width:560px){.px .row:has(.px-lg){grid-template-columns:repeat(2,minmax(0,1fr))}}

/* doors */
.dr .head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.dr .head p{max-width:560px}
.dr .tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.dr .tiles a{position:relative;border-radius:var(--r-sm);overflow:hidden;aspect-ratio:3/4;display:block;text-decoration:none}
.dr .tiles img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dr .tiles .dr-ph{position:absolute;inset:0}
.dr .tiles a>span:not(.dr-ph){position:absolute;left:0;right:0;bottom:0;padding:48px 14px 14px;background:linear-gradient(180deg,rgba(var(--scrim-rgb),0) 0%,rgba(var(--scrim-rgb),.6) 45%,rgba(var(--scrim-rgb),.88) 100%);color:var(--on-photo);font:400 22px/1.1 var(--display)}
.dr .tiles small{display:block;font:700 12px/1.3 var(--body);opacity:.85;margin-top:4px}
@media (max-width:1000px){.dr .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.dr .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* episode page */
.ep-head{padding:24px 44px 0}
.ep-head .box{background:var(--surface);border-radius:var(--r);display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);overflow:hidden}
.ep-head .tx{padding:56px 56px 48px;display:flex;flex-direction:column;gap:20px}
.ep-head .k-h1{font-size:clamp(38px,4.4vw,60px)}
.ep-head .host{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--ink-soft)}
.ep-head .host .k-face{width:40px;height:40px;border-radius:50%;object-fit:cover}
.ep-head .host b{color:var(--ink)}
.ep-head .dph{position:relative;min-height:420px}
.ep-head .dph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:92% 12%}
@media (max-width:900px){.ep-head{padding:16px 16px 0}.ep-head .box{grid-template-columns:1fr}.ep-head .tx{padding:28px 22px}.ep-head .dph{min-height:300px;order:-1}}

.pull{position:relative;background:var(--surface);border-radius:var(--r);padding:48px 44px;overflow:hidden}
.pull q{display:block;font:400 clamp(30px,3.4vw,46px)/1.12 var(--display);color:var(--heading);quotes:"\201C" "\201D";text-wrap:balance;position:relative;z-index:1}
.pull .by{margin-top:14px;font-size:14px;color:var(--ink-soft);position:relative;z-index:1}
.pull .k-ripple{right:-120px;bottom:-140px;width:360px}
@media (max-width:1000px){.pull{padding:32px 24px}}

/* ===== ADAPTERS: hand-written. Real-data pieces the static targets faked. (Real links inherit instead of going browser blue: the kit's a rule does that.) ===== */

.hC .hc-acts{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hx-nav a.brand{text-decoration:none}
.hC a.ep{color:inherit;text-decoration:none}
.hC a.ep .k-meta{color:var(--ink-soft)}
.dr .tiles a{color:var(--on-photo)}

/* the real signup form (templates/plain/signup.mjs): labels are read by screen readers, the placeholders are what shows */
.dz form.signup{display:block;width:100%;margin:0}
.dz form.signup .signup-fields{display:flex;gap:10px;flex-wrap:wrap;width:100%}
.dz form.signup label{flex:1 1 220px;min-width:0;font-size:0;line-height:0;display:block}
.dz form.signup input[type=email],.dz form.signup input[type=text]{width:100%;min-width:0;border:1.5px solid var(--field-line);border-radius:999px;padding:15px 20px;font:400 16px/1.3 var(--body);color:var(--ink);background:var(--surface)}
.dz form.signup input::placeholder{color:var(--ink-soft);opacity:.85}
.dz form.signup button{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:10px;background-image:var(--btn);color:var(--on-accent);font:700 16px/1 var(--body);padding:16px 26px;border-radius:999px;border:0;cursor:pointer}
.dz form.signup button:disabled,.dz form.signup input:disabled{opacity:.55;cursor:not-allowed}
.dz form.signup .note{font-size:13px;line-height:1.4;color:var(--ink-soft);margin:0 0 10px;text-align:left}
.dz form.signup .signup-status{margin:10px 0 0;font-size:15px;font-weight:700;color:var(--yes)}
.dz form.signup[data-state=error] .signup-status{color:var(--no)}
.dz form.signup[hidden],.dz .signup-fields[hidden]{display:none}
/* kit isolation: the kit's own .signup (its wine footer form) matches this form's class name too. Put back what this form
   always had: no flex centring or wrap or gap on the form, no flex growth or transition on its inputs, and the browser's own
   focus ring instead of the kit's ring. */
.dz form.signup{align-items:normal;flex-wrap:nowrap;gap:normal}
.su-a form.signup{gap:10px}   /* the signup section's own gap (.su-a form) is 10px, kept */
.dz form.signup input{flex:initial;transition:initial}
.dz form.signup input:focus{outline:revert;box-shadow:none}
/* the signup section stacks its fields and runs the button full width */
.su-a form.signup .signup-fields{display:grid;gap:10px}
.su-a form.signup button{width:100%}
.su-a form.signup .note{text-align:center}
/* the footer asks for the email only (parts.mjs passes firstName:false): one field and the button on one row, the test-mode note under them */
.ft-b form.signup{display:flex;flex-direction:column}
.ft-b form.signup label{flex:1 1 240px}
.ft-b form.signup input[type=email]{border-color:transparent}
.ft-b form.signup .signup-status{order:1;color:var(--on-band)}
.ft-b form.signup[data-state=error] .signup-status{color:var(--on-band-no)}
.ft-b form.signup .note{order:2;margin:12px 0 0;font-size:12px;color:color-mix(in srgb,var(--on-band) 62%,transparent)}
@media (max-width:560px){.ft-b form.signup button{width:100%}.ft-b ul a{padding:9px 0}.ft-b .ft-legal a{padding:10px 0}.ft-seg button{padding:14px 18px}}

/* the header grid must be allowed to shrink below the native audio control's own width */
.ep-head .tx{min-width:0}
@media (max-width:900px){.ep-head .box{grid-template-columns:minmax(0,1fr)}}

/* phone menu: the five links, then the two actions (the offer as the button, Work with me as the quiet outlined one) */
.hx-menu{display:none;position:relative}
.hx-menu summary{list-style:none;cursor:pointer;width:44px;height:44px;border-radius:999px;background:var(--surface);display:grid;place-content:center;gap:5px}
.hx-menu summary::-webkit-details-marker{display:none}
.hx-menu summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.hx-menu summary span{display:block;width:18px;height:2px;border-radius:2px;background:var(--heading)}
.hx-menu-panel{position:absolute;right:0;top:54px;z-index:30;background:var(--surface);border-radius:var(--r-sm);box-shadow:0 18px 40px rgba(var(--shadow-rgb),.16);padding:10px;display:flex;flex-direction:column;min-width:240px}
.hx-menu-panel>a:not(.k-btn):not(.k-btn-ghost){color:var(--ink);text-decoration:none;padding:12px 14px;border-radius:10px;font-size:16px;display:block}
.hx-menu-panel>a:not(.k-btn):not(.k-btn-ghost)::after{display:none}
.hx-menu-panel>a[aria-current]{color:var(--heading);font-weight:700}
.hx-menu-panel>a:not(.k-btn):not(.k-btn-ghost):hover{background:var(--bg)}
.hx-menu-panel .k-btn{margin-top:6px;color:var(--on-accent)}
.hx-menu-panel .k-btn-ghost{margin-top:8px}
@media (max-width:1040px){.hx-menu{display:block}}

/* guest marquee under the home hero. Slow, continuous, never pauses (not on hover, not on focus: Andrew's rule).
   Reduced motion = a still row of the faces that fit. Real guest photos only, 4:5 rounded portraits, never circles. */
.gmq{padding:6px 0 0;--gmq-w:128px}
/* edge to edge: the section is as wide as the window at any width, while the page column stops at 1440 (body clips the sideways overflow).
   The label keeps the column's 44px edge, so it lines up with every section below it. */
.hm .gmq{width:100vw;margin-left:calc(50% - 50vw)}
.gmq-lbl{margin:0 0 14px;padding-inline:max(44px,calc(50vw - 676px));color:var(--ink-soft)}
.gmq-view{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,black 7%,black 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,black 7%,black 93%,transparent 100%)}
.gmq-track{display:flex;width:max-content;animation:gmq-slide var(--gmq-dur,120s) linear infinite;will-change:transform}
.gmq-set{display:flex;gap:18px;padding-right:18px;align-items:flex-start}
.gmq-item{flex:none;width:var(--gmq-w);display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit}
.gmq-ph{border-radius:var(--r);aspect-ratio:4/5;background:var(--surface)}
.gmq-ph img{display:block;width:100%;height:100%;object-fit:cover}
.gmq-nm{font:700 12px/1.25 var(--body);color:var(--ink-soft);text-wrap:balance}
@keyframes gmq-slide{to{transform:translateX(-50%)}}
@media (max-width:900px){.gmq{--gmq-w:104px}.gmq-lbl{margin:0 0 12px;padding-inline:20px}.gmq-ph{border-radius:18px}}
@media (prefers-reduced-motion:reduce){
  .gmq-track{animation:none;width:auto;justify-content:center;will-change:auto}
  .gmq-set{flex-wrap:wrap;justify-content:center;row-gap:60px;height:calc(var(--gmq-w)*1.25 + 44px);overflow:hidden;padding-right:0}
  .gmq-set[data-copy]{display:none}
  .gmq-view{-webkit-mask-image:none;mask-image:none}
}

/* HOME RHYTHM (Andrew 09-29: "a padding issue above it, a little crunched"). Before, every home section brought its own outer spacing
   (hero 56 below, marquee 6, press 28 and 8, episodes 24, doors 24 and 72, experts 24, story 40, signup 72) and the gaps came out
   62, 28, 32, 24, 96, 40 and 112px. Now the sections carry NO outer spacing and .hm sets ONE step between them: 72px, 48px on a phone.
   The signup section already opens with 72px (48 on a phone) of its own padding, which is the same step, so it takes no extra margin.
   Left and right edges: every box sits on the same 44px (16px on a phone) line. */
.hm{--hm-step:72px}
.hm>section~section{margin-top:var(--hm-step)}
.hm>[data-section=news],.hm>[data-section=foot]{margin-top:0}
.hm .hC{padding-bottom:0}
/* the hero ring pokes 70px past the column; under 1510px wide that is past the window and made the whole page scroll sideways (70px at 1440). Clip it there. */
@media (max-width:1510px){.hm .hC{overflow:clip}}
.hm .gmq{padding-top:0}
.hm .px{padding:0 44px}
.hm .pc-ep{padding-top:0;padding-bottom:0}
.hm .dr{padding:0 44px}
.hm .gwA{margin:0 44px}
.hm .abA{padding:0 44px}
@media (max-width:900px){
  .hm{--hm-step:48px}
  .hm .px{padding:0 16px}
  .hm .dr{padding:0 16px}
  .hm .gwA{margin:0 16px}
  .hm .abA{padding:0 16px}
}

/* ---- page: about.css ---- */
/* about page (prefix ab2-) */
.ab2-head .k-h1{font-size:clamp(38px,4.4vw,60px)}
.ab2-head .dph img{object-position:60% 30%}
.ab2-creds{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:15px;color:var(--ink-soft)}
.ab2-creds b{color:var(--heading)}
.ab2-acts{display:flex;gap:14px 24px;align-items:center;flex-wrap:wrap}

.ab2-story{padding-top:64px}
.ab2-grid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:64px;align-items:start}
.ab2-photo{position:sticky;top:24px}
.ab2-photo img{object-position:50% 20%}
.ab2-chapters{display:flex;flex-direction:column;gap:56px;max-width:720px}
.ab2-bolero q{display:block;font:400 clamp(30px,3.4vw,46px)/1.12 var(--display);color:var(--heading);quotes:"\201C" "\201D";text-wrap:balance}
.ab2-bolero p{margin:14px 0 0}
.ab2-ch{position:relative;padding-left:64px;display:flex;flex-direction:column;gap:14px}
.ab2-ch .n{position:absolute;left:0;top:-2px;font:400 44px/1 var(--display);color:var(--accent)}
.ab2-ch p{margin:0;font-size:18px;line-height:1.65;max-width:60ch}
.ab2-ch .lead{font:400 26px/1.2 var(--display);color:var(--ink)}

.ab2-idea{padding-top:16px}
.ab2-box{position:relative;overflow:hidden;background:var(--surface);border-radius:var(--r);padding:56px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.ab2-rip{left:-120px;bottom:-190px;width:340px}
.ab2-lead{display:flex;flex-direction:column;gap:20px;position:relative;z-index:1}
.ab2-list{position:relative;z-index:1;margin:0;padding:0;list-style:none;display:grid;gap:18px;counter-reset:t}
.ab2-list li{counter-increment:t;display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;font-size:17px;line-height:1.55}
.ab2-list li::before{content:counter(t);font:400 26px/1 var(--display);color:var(--accent)}
.ab2-list b{color:var(--heading)}

@media (max-width:900px){
  .ab2-story{padding-top:28px}
  .ab2-grid{grid-template-columns:1fr;gap:28px}
  .ab2-photo{position:static;max-width:320px}
  .ab2-chapters{gap:40px}
  .ab2-ch{padding-left:0}
  .ab2-ch .n{position:static;font-size:36px}
  .ab2-box{grid-template-columns:1fr;gap:28px;padding:30px 22px}
  .ab2-rip{display:none}
}
.ab2-px .row{gap:12px 28px}.ab2-px .n{font-size:19px}

/* ---- page: article.css ---- */
/* article page (prefix .ar-). r2: the Priority Living story page's structure in Gabriella's skin.
   THEME CONTRACT: semantic tokens only (--bg --surface --surface-soft --ink --ink-soft --heading --accent --line --on-accent
   --band --on-band --shadow-rgb) plus the fixed brand objects (--btn --plate --cover). No hex, so dark mode needs no extra rule. */

/* ---- sticky nav with the reading-progress bar under it ---- */
.ar-top{position:sticky;top:0;z-index:40;background:var(--bg)}
/* THE RULE (design.css BACKGROUND SECTIONS): the bar's ground, its shadow and the progress line run to the screen edges; the
   nav inside stays on the container line. (Also used by the round 4 episode page.) */
.ar-top::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);background:var(--bg);z-index:-1;transition:box-shadow .25s ease}
.ar-top.s::before{box-shadow:0 10px 24px -18px rgba(var(--shadow-rgb),.55)}
.ar-rbar{height:3px;margin:0 calc(50% - 50vw)}
.ar-rbar i{display:block;height:100%;background:var(--btn);transform:scaleX(0);transform-origin:0 50%}

/* ---- headline block ---- */
.ar-head{max-width:1240px;margin:0 auto;padding:40px 44px 12px}
.ar-crumb{margin:0 0 20px;font:700 13px/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.ar-crumb a{color:var(--accent);text-decoration:none}
.ar-crumb a:hover{text-decoration:underline;text-underline-offset:3px}
.ar-head h1{font:400 clamp(40px,5.4vw,76px)/1.02 var(--display);color:var(--heading);margin:0;max-width:26ch;text-wrap:balance;letter-spacing:-.005em}
.ar-dek{margin:22px 0 0;max-width:46ch;font-size:20px;line-height:1.5;color:var(--ink-soft)}
.ar-by{display:flex;align-items:center;gap:12px;margin:26px 0 0;font-size:15px;color:var(--ink-soft)}
.ar-by img,.ar-by .k-face{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.ar-by b{color:var(--ink);font-weight:700}
.ar-by span span{margin-left:8px}

/* ---- two columns: the article, and the sticky rail ---- */
.ar-wrap{max-width:1240px;margin:0 auto;padding:28px 44px 72px;display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,29vw,400px);gap:clamp(32px,4vw,60px);align-items:start}
.ar-main{min-width:0}
.ar-wrap [id]{scroll-margin-top:calc(var(--ar-navh,84px) + 24px)}
.ar-eyebrow{display:block;font:700 12px/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}

.ar-hero{margin:0 0 20px;border-radius:var(--r);overflow:hidden;aspect-ratio:16/9;background:var(--plate)}
.ar-hero img{width:100%;height:100%;object-fit:cover}

/* ---- quick answer + three tiles ---- */
.ar-qa{background:var(--surface);border-radius:var(--r);padding:32px 36px 34px;margin:0 0 16px;box-shadow:0 10px 30px -22px rgba(var(--shadow-rgb),.4)}
.ar-qa-a{margin:0;font-size:20px;line-height:1.6;color:var(--ink);text-wrap:pretty}
.ar-tldr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.ar-tile{background:var(--surface);border-radius:var(--r);padding:20px 20px 22px}
.ar-ic{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--surface-soft);color:var(--accent);flex:none}
.ar-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ar-tile .ar-ic{margin-bottom:14px}
.ar-tile .ar-eyebrow{margin-bottom:6px;font-size:11px}
.ar-tile p{margin:0;font:700 15.5px/1.4 var(--body);color:var(--ink)}
.ar-tile p i{font-weight:400}

/* ---- the reading body sits on the gray ground ---- */
.ar-body{margin-top:48px}
.ar-body>p,.ar-body li{font-size:18.5px;line-height:1.72;color:var(--ink)}
.ar-body p{margin:0 0 18px}
.ar-body p.ar-lead{font:400 clamp(25px,2.4vw,31px)/1.3 var(--display);color:var(--heading);margin-bottom:8px;text-wrap:balance}
.ar-body h2{font:400 clamp(30px,3.2vw,42px)/1.1 var(--display);color:var(--heading);margin:64px 0 18px;text-wrap:balance}
.ar-body h3{font:400 26px/1.2 var(--display);color:var(--heading);margin:32px 0 10px}
.ar-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.ar-body strong{color:var(--ink)}
.ar-body ul{margin:0 0 20px;padding-left:1.25em}
.ar-body li{margin:0 0 9px}
.ar-body li::marker{color:var(--accent)}
.ar-body em{font-style:italic}

/* ---- pull quote: the dark band. Who said it, which episode, when, and a link that plays it ---- */
.ar-pull{position:relative;overflow:hidden;margin:46px 0;padding:46px 42px 32px;background:var(--band);color:var(--on-band);border-radius:var(--r)}
.ar-pull::before{content:"";position:absolute;right:-20%;top:-70%;width:80%;height:170%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 38%,transparent),transparent);pointer-events:none}
.ar-pull blockquote{position:relative;margin:0}
.ar-pull blockquote p{margin:0;font:400 clamp(26px,2.7vw,37px)/1.17 var(--display);color:var(--on-band);text-wrap:balance}
.ar-pull.long blockquote p{font-size:clamp(21px,2vw,27px);line-height:1.3}
.ar-who{position:relative;display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:30px 0 0}
.ar-av{width:48px;height:48px;border-radius:50%;overflow:hidden;flex:none;background:var(--plate);display:inline-grid;place-items:center}
.ar-av img{width:100%;height:100%;object-fit:cover}
.ar-init{display:inline-grid;place-items:center;width:100%;height:100%;font:400 17px/1 var(--display);color:var(--on-band);background:var(--plate)}
.ar-name{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 230px;font-size:14.5px;line-height:1.35;color:color-mix(in srgb,var(--on-band) 78%,transparent)}
.ar-name b{color:var(--on-band);font-weight:700}
.ar-role{font-size:14px}
.ar-ctx{font-size:13px;font-style:italic}
.ar-when{font-weight:700;font-variant-numeric:tabular-nums;color:var(--on-band)}
.ar-wave{display:flex;align-items:center;gap:2px;height:22px;flex:0 1 150px;min-width:80px;opacity:.9}
.ar-wave i{flex:1;border-radius:2px;background:color-mix(in srgb,var(--on-band) 34%,transparent);min-width:2px}
.ar-wave i.h{background:var(--on-band)}
.ar-hear{display:inline-flex;align-items:center;gap:9px;background-image:var(--btn);color:var(--on-accent);font:700 14px/1 var(--body);padding:12px 18px;border-radius:999px;text-decoration:none;white-space:nowrap}   /* a PRIMARY button with an icon: hover, focus and press are the BUTTON SYSTEM's (design.css) */
.ar-hear svg{width:12px;height:12px;fill:currentColor}
.ar-body .ar-hear{color:var(--on-accent);text-decoration:none}

/* ---- the article's closing line, then FAQ, then the made card ---- */
.ar-sign{margin:56px 0 0;background:var(--surface-soft);border-radius:var(--r);padding:40px 44px}
.ar-sign p{margin:0;font:400 clamp(25px,2.4vw,32px)/1.25 var(--display);color:var(--heading);text-wrap:balance;max-width:28ch}
.ar-faq{margin-top:20px;background:var(--surface);border-radius:var(--r);padding:38px 40px 34px}
.ar-faq h2{font:400 clamp(30px,3vw,40px)/1.1 var(--display);color:var(--heading);margin:0 0 20px}
.ar-faq details{background:var(--bg);border-radius:var(--r-sm);padding:0 22px;margin:0 0 10px}
.ar-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:19px 0;font:700 17px/1.35 var(--body);color:var(--ink)}
.ar-faq summary::-webkit-details-marker{display:none}
.ar-faq summary i,.ar-made .ar-plus{flex:none;position:relative;width:30px;height:30px;border-radius:50%;background:var(--surface)}
.ar-faq summary i::before,.ar-faq summary i::after,.ar-made .ar-plus::before,.ar-made .ar-plus::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:2px;margin:-1px 0 0 -5.5px;background:var(--accent);border-radius:2px;transition:transform .3s ease}
.ar-faq summary i::after,.ar-made .ar-plus::after{transform:rotate(90deg)}
.ar-faq details[open] summary i::after,.ar-made[open] .ar-plus::after{transform:rotate(0)}
.ar-faq details p{margin:0;padding:0 0 22px;font-size:17px;line-height:1.65;color:var(--ink-soft);max-width:62ch}

.ar-made{margin-top:20px;background:var(--surface);border-radius:var(--r)}
.ar-made summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:18px;padding:26px 30px}
.ar-made summary::-webkit-details-marker{display:none}
.ar-made-h{flex:1 1 auto;min-width:0}
.ar-made-h h2{font:400 clamp(24px,2.3vw,30px)/1.15 var(--display);color:var(--heading);margin:0 0 4px}
.ar-made-h>span{display:block;font-size:15px;line-height:1.45;color:var(--ink-soft)}
.ar-made-chips{display:flex;gap:8px;flex-wrap:nowrap;justify-content:flex-end;flex:none}
.ar-made-chips span{font:700 12px/1 var(--body);padding:8px 11px;border-radius:999px;background:var(--surface-soft);color:var(--heading);white-space:nowrap}
.ar-made .ar-plus{background:var(--surface-soft)}
.ar-made-body{padding:4px 30px 32px}
.ar-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 20px}
.ar-facts div{background:var(--bg);border-radius:var(--r-sm);padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.ar-facts span{font:700 12px/1.3 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.ar-facts b{font:400 34px/1 var(--display);color:var(--heading)}
.ar-wave.big{height:34px;flex:none;width:100%;margin:0 0 26px}
.ar-made h3{font:700 13px/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:26px 0 12px}
.ar-made p{margin:0;font-size:16px;line-height:1.65;color:var(--ink-soft);max-width:62ch}
.ar-made-eps,.ar-clips{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ar-made-eps li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;background:var(--bg);border-radius:var(--r-sm);padding:12px 16px;font-size:15.5px;line-height:1.4}
.ar-made-eps a{color:var(--ink);text-decoration:none}
.ar-made-eps a b{color:var(--accent);margin-right:4px}
.ar-made-eps li>span{font:700 12px/1 var(--body);color:var(--ink-soft);white-space:nowrap}
.ar-clip{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:baseline;background:var(--bg);border-radius:var(--r-sm);padding:12px 16px;text-decoration:none;color:var(--ink)}
.ar-clip time{font:700 14px/1.3 var(--body);color:var(--accent);font-variant-numeric:tabular-nums}
.ar-clip q{display:block;quotes:none;font-size:15.5px;line-height:1.45}
.ar-clip em{display:block;margin-top:2px;font-size:13px;font-style:normal;color:var(--ink-soft)}

/* ---- the sticky rail: offer with a slow face marquee, then the tabs ---- */
.ar-rail{position:sticky;top:calc(var(--ar-navh,84px) + 24px);display:flex;flex-direction:column;gap:24px;min-width:0}
.ar-offer{position:relative;overflow:hidden;background:var(--band);color:var(--on-band);border-radius:var(--r);box-shadow:0 24px 50px -30px rgba(var(--shadow-rgb),.6)}
.ar-offer::before{content:"";position:absolute;right:-30%;top:-50%;width:90%;height:140%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 34%,transparent),transparent);pointer-events:none}
.ar-offer-in{position:relative;padding:26px 26px 18px}
.ar-offer .ar-eyebrow{color:color-mix(in srgb,var(--on-band) 72%,transparent)}
.ar-offer h3{font:400 clamp(24px,2vw,28px)/1.12 var(--display);color:var(--on-band);margin:0 0 10px;text-wrap:balance}
.ar-offer p{margin:0 0 16px;font-size:15px;line-height:1.5;color:color-mix(in srgb,var(--on-band) 82%,transparent)}
.ar-offer form.signup .signup-fields{display:grid;gap:10px}
.ar-offer form.signup label:has(input[type=text]),.ar-close form.signup label:has(input[type=text]){display:none}
.ar-offer form.signup input[type=email],.ar-close form.signup input[type=email]{border-color:transparent}
.ar-offer form.signup button,.ar-close form.signup button{width:100%}
.ar-offer form.signup .note,.ar-close form.signup .note{color:color-mix(in srgb,var(--on-band) 66%,transparent);font-size:12.5px}
.ar-offer form.signup .signup-status,.ar-close form.signup .signup-status{color:var(--on-band)}
.ar-faces{position:relative;overflow:hidden;padding:4px 0 14px;-webkit-mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent);mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent)}
.ar-ftrack{display:flex;gap:8px;width:max-content;animation:ar-fm 70s linear infinite}
.ar-ftrack img{width:48px;height:60px;border-radius:12px;object-fit:cover;flex:none}
@keyframes ar-fm{to{transform:translateX(calc(-50% - 4px))}}
@media (prefers-reduced-motion:reduce){.ar-ftrack{animation:none}}
.ar-faces-cap{position:relative;margin:0!important;padding:0 26px 24px;font-size:13.5px!important;line-height:1.4;color:color-mix(in srgb,var(--on-band) 66%,transparent)!important}

.ar-tabs{background:var(--surface);border-radius:var(--r);overflow:hidden}
.ar-tabs [role=tablist]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.ar-tabs [role=tab]{font:700 13.5px/1.2 var(--body);color:var(--ink-soft);background:var(--surface-soft);border:0;height:48px;cursor:pointer;transition:color .2s,background .2s}
.ar-tabs [role=tab]:hover{color:var(--ink)}
.ar-tabs [role=tab][aria-selected=true]{background:var(--surface);color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.ar-tabs [role=tab]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ar-tabs [role=tabpanel]{padding:14px 22px 20px}
.ar-toc{list-style:none;margin:0;padding:0}
.ar-toc a{display:flex;align-items:flex-start;gap:12px;padding:7px 0;font-size:14.5px;line-height:1.35;color:var(--ink-soft);text-decoration:none;transition:color .2s}
.ar-toc a::before{content:"";flex:none;width:8px;height:8px;margin-top:.42em;border-radius:50%;background:var(--line);transition:background .2s,transform .2s}
.ar-toc a:hover{color:var(--ink)}
.ar-toc a.done{color:var(--ink)}
.ar-toc a.done::before{background:color-mix(in srgb,var(--accent) 45%,var(--line))}
.ar-toc a.on{color:var(--ink);font-weight:700}
.ar-toc a.on::before{background:var(--accent);transform:scale(1.25)}
.ar-voices,.ar-epl{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ar-voices li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center}
.ar-voices img,.ar-voices .ar-init{width:44px;height:55px;border-radius:12px;object-fit:cover;background:var(--plate)}
.ar-voices li>span{display:flex;flex-direction:column;gap:1px;font-size:13.5px;line-height:1.35;color:var(--ink-soft);min-width:0}
.ar-voices b{color:var(--ink);font-size:15px}
.ar-voices a{color:inherit;text-decoration:none}
.ar-voices .ar-vf{border-radius:12px}
.ar-voices .ar-vf img{display:block;border-radius:0}
.ar-epl a{display:flex;flex-direction:column;gap:1px;text-decoration:none;font-size:14px;line-height:1.35;color:var(--ink-soft)}
.ar-epl a b{color:var(--accent);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.ar-none{margin:0;font-size:14.5px;color:var(--ink-soft)}

/* the offer as a card in the flow, shown only when the rail drops away (phones and small tablets) */
.ar-offer-m{display:none;margin:40px 0 0}
.ar-offer-m .ar-offer-in{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;align-items:start}
.ar-cover{width:100%}

/* ---- keep reading ---- */
.ar-keep{padding:0 44px 64px}
.ar-keep-in{max-width:1152px;margin:0 auto}
.ar-keep .head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.ar-keep h2{font:400 clamp(30px,3.4vw,44px)/1.08 var(--display);color:var(--heading);margin:0}
.ar-keep .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:26px}
.ar-keep a.c{background:var(--surface);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit}
.ar-keep .dph{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--plate)}
.ar-keep .dph img{width:100%;height:100%;object-fit:cover}
.ar-keep .tx{padding:22px 26px 26px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.ar-keep h3{font:400 25px/1.15 var(--display);color:var(--heading);margin:0;text-wrap:balance}
.ar-keep .tx p{margin:0;font-size:15px;line-height:1.5;color:var(--ink-soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ar-keep .meta{font:700 12.5px/1.3 var(--body);color:var(--ink-soft)}

/* ---- the closing mini book band ---- */
.ar-close{padding:0 44px 72px}
.ar-close-box{position:relative;overflow:hidden;max-width:1152px;margin:0 auto;background:var(--band);color:var(--on-band);border-radius:var(--r);padding:56px;display:grid;grid-template-columns:190px minmax(0,560px);gap:52px;align-items:center}
.ar-close-rip{right:-80px;top:-80px;width:340px}
.ar-close .ar-cover{position:relative;width:200px}
.ar-close .k-letter-env{box-shadow:0 7cqi 15cqi rgba(var(--shadow-rgb),.28),inset 0 0 0 1px color-mix(in srgb,var(--on-band) 22%,transparent)}   /* wine envelope on the wine band: a faint edge in the band's text color */
.ar-close-tx{position:relative;display:flex;flex-direction:column;gap:16px}
.ar-close h2{font:400 clamp(32px,3.6vw,48px)/1.06 var(--display);color:var(--on-band);margin:0;text-wrap:balance}
.ar-close-tx p{margin:0;font-size:17px;line-height:1.55;color:color-mix(in srgb,var(--on-band) 82%,transparent);max-width:46ch}
.ar-close form.signup .signup-fields{display:flex;flex-wrap:wrap}
.ar-close form.signup label{flex:1 1 240px}
.ar-close form.signup button{width:auto}

/* ---- tablet and phone ---- */
@media (max-height:760px){.ar-rail{position:static}}
@media (max-width:1000px){
  .ar-head{padding:28px 20px 6px}
  .ar-wrap{grid-template-columns:minmax(0,1fr);padding:20px 16px 48px}
  .ar-rail{display:none}
  .ar-offer-m{display:block}
  .ar-keep{padding:0 16px 48px}
  .ar-keep .cards{grid-template-columns:minmax(0,1fr)}
  .ar-close{padding:0 16px 48px}
  .ar-close-box{grid-template-columns:minmax(0,1fr);gap:28px;padding:36px 22px 32px;justify-items:start}
  .ar-close-rip{display:none}
  .ar-close .ar-cover{width:150px}
}
@media (max-width:640px){
  .ar-head h1{font-size:clamp(36px,10.4vw,46px)}
  .ar-dek{font-size:18px}
  .ar-qa{padding:24px 22px 26px}
  .ar-qa-a{font-size:18px}
  .ar-tldr{grid-template-columns:minmax(0,1fr);gap:10px}
  .ar-tile{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;padding:16px}
  .ar-tile .ar-ic{grid-row:span 2;margin:0}
  .ar-tile .ar-eyebrow{margin:0 0 3px}
  .ar-body{margin-top:36px}
  .ar-body>p,.ar-body li{font-size:17px}
  .ar-body h2{margin-top:48px}
  .ar-pull{padding:32px 22px 24px;margin:36px 0}
  .ar-who{gap:12px 14px}
  .ar-wave{display:none}
  .ar-sign{padding:30px 24px}
  .ar-faq{padding:26px 18px 22px}
  .ar-faq details{padding:0 16px}
  .ar-made summary{padding:22px 20px;display:grid;grid-template-columns:40px minmax(0,1fr) 30px;gap:12px 14px;align-items:start}
  .ar-made-chips{grid-column:1 / -1;grid-row:2;flex-wrap:wrap;justify-content:flex-start}
  .ar-made .ar-plus{grid-column:3;grid-row:1}
  .ar-made-body{padding:4px 20px 26px}
  .ar-facts{grid-template-columns:minmax(0,1fr)}
  .ar-facts div{flex-direction:row;justify-content:space-between;align-items:baseline}
  .ar-offer-m .ar-offer-in{grid-template-columns:minmax(0,1fr);gap:16px}
  .ar-offer-m .ar-cover{display:none}
  .ar-clip{grid-template-columns:54px minmax(0,1fr);gap:10px}
  .ar-close form.signup button{width:100%}
}

/* ---- page: contact.css ---- */
/* contact page (prefix ct-) */
.ct-head .k-h1{font-size:clamp(40px,4.8vw,66px);max-width:14ch}
.ct-head .dph img{object-position:50% 12%}
.ct-sign{margin:0;font:400 26px/1.2 var(--display);color:var(--heading)}
.ct-slot{font-style:italic;color:var(--ink-soft)}
.ct-head2{margin-bottom:28px}

.ct-doors{padding-top:56px;padding-bottom:40px}
.ct-four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (min-width:1001px){.ct-four:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}}   /* three doors while the guest pitch form is owed; phones keep the one-column rule below */
.ct-door{background:var(--surface);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit}
.ct-door img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ct-door .tx{padding:24px 24px 28px;display:flex;flex-direction:column;gap:10px;flex:1}
.ct-door p{margin:0;font-size:16px;line-height:1.55;color:var(--ink-soft)}
.ct-door .go{margin-top:auto;padding-top:8px;font:700 15px/1 var(--body);color:var(--heading)}
.ct-door .go::after{content:" \2192"}
.ct-door-slot p{font-style:italic}

.ct-formsec{padding-top:16px;padding-bottom:88px}
.ct-fbox{background:var(--surface);border-radius:var(--r);padding:48px 52px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:center}
.ct-fbox .tx{display:flex;flex-direction:column;gap:14px}
.ct-form{border:1.5px dashed color-mix(in srgb,var(--heading) 30%,transparent);border-radius:var(--r-sm);padding:44px 28px;font-size:17px}

@media (max-width:1000px){.ct-four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.ct-doors{padding-top:28px}.ct-fbox{grid-template-columns:1fr;gap:24px;padding:30px 22px}.ct-formsec{padding-bottom:44px}}
@media (max-width:560px){.ct-four{grid-template-columns:1fr}.ct-door img{aspect-ratio:16/9}}

/* ---- page: free-guide.css ---- */
/* free guide page (prefix .fg-) */
.fg-offer{padding:24px 44px 0}
.fg-box{background:var(--surface);border-radius:var(--r);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);overflow:hidden;min-height:560px}
.fg-tx{padding:56px 56px 52px;display:flex;flex-direction:column;gap:22px;justify-content:center;align-items:flex-start}
.fg-tx .k-h1{font-size:clamp(36px,4vw,54px)}
.fg-tx .k-lede{max-width:34em}
.fg-tx form.signup{max-width:560px}
.fg-tx form.signup .signup-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.fg-tx form.signup button{grid-column:1/-1;width:100%}
.fg-tx form.signup .note{margin:0 0 10px}
.fg-note{margin:-8px 0 0;font-size:14px;line-height:1.45;color:var(--ink-soft);max-width:560px}
/* the cover sits on a moody photo of her (Andrew 09-29: "cool moody image of gabriella behind the thing on right ... a moody
   blended image of her in vibey pose"; it replaced her ripple art plate the same night). Photo 01, black dress on a dark ground,
   laughing, placed by herImg so her head is never cut (09-30: photo 17 was used first, but its original crops the top and
   back of her head). It blends into the panel at its left edge, a wine wash
   rises from the foot, and the letter sits lower left so it never covers her face (top center). */
.fg-cover{position:relative;overflow:hidden;background:var(--band);display:grid;place-items:end start;padding:40px}
.fg-cover .fg-her{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:brightness(.78) saturate(.9) contrast(1.06)}
.fg-cover::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--surface) 0%,color-mix(in srgb,var(--surface) 0%,transparent) 32%),linear-gradient(0deg,rgba(var(--scrim-wine-rgb),.72) 0%,rgba(var(--scrim-wine-rgb),.12) 62%,rgba(var(--scrim-wine-rgb),0) 100%)}
.fg-cover .k-letter{position:relative;z-index:2;width:min(100%,230px)}
/* Andrew 09-30 (drew it on the page): on a wide screen the letter straddles the seam between the words and the photo,
   centered top to bottom, half over each side. The photo stays clipped by .fg-box; only the letter crosses. Under 1180px
   the text column needs that room, so the letter stays inside the photo, lower left. */
@media (min-width:1181px){.fg-cover{overflow:visible;place-items:center start;padding:40px 0}.fg-cover .k-letter{transform:translateX(-50%)}}
@media (max-width:900px){.fg-offer{padding:16px 16px 0}.fg-box{grid-template-columns:1fr;min-height:0}.fg-tx{padding:28px 22px 32px}.fg-cover{order:-1;padding:24px 20px;min-height:360px}.fg-cover::after{background:linear-gradient(0deg,var(--surface) 0%,color-mix(in srgb,var(--surface) 0%,transparent) 28%),linear-gradient(0deg,rgba(var(--scrim-wine-rgb),.55) 0%,rgba(var(--scrim-wine-rgb),0) 70%)}.fg-cover .k-letter{width:150px}.fg-tx form.signup .signup-fields{grid-template-columns:1fr}}

.fg-experts{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.fg-experts .k-lede{max-width:40em}
.fg-ways{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;width:100%}
.fg-ways li{background:var(--surface);border-radius:var(--r);padding:22px 22px 24px;display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;align-items:start}
.fg-ways img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 20%}
.fg-ways .fg-face{width:56px;height:56px;border-radius:50%}
.fg-ways .fg-face img{display:block}
.fg-ways li:not(:has(img)){grid-template-columns:1fr}
.fg-tip{margin:0 0 8px;font:400 23px/1.15 var(--display);color:var(--heading);text-wrap:balance}
.fg-by{margin:0;font-size:14px;line-height:1.4;color:var(--ink-soft)}
.fg-by b{color:var(--ink);font-weight:700}
.fg-by a{color:inherit;text-decoration:none}
@media (max-width:1000px){.fg-ways{grid-template-columns:1fr}}

/* ---- page: guest.css ---- */
/* guest page, prefix .gp- */
.gp-head{padding:24px 44px 0}
.gp-box{background:var(--surface);border-radius:var(--r);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:0;overflow:hidden;align-items:stretch}
.gp-tx{padding:64px 56px 56px;display:flex;flex-direction:column;gap:20px;justify-content:center}
.gp-crumb{margin:0;font-size:14px;color:var(--ink-soft)}
.gp-crumb a{color:var(--heading);font-weight:700;text-decoration:none}
.gp-head .k-h1{font-size:clamp(44px,5.4vw,76px)}
.gp-cred{font-size:22px}
.gp-bio{margin:0;font-size:17px;line-height:1.55;color:var(--ink-soft);max-width:36em}
.gp-host{margin:0;display:flex;align-items:center;gap:12px;font-size:15px;line-height:1.4;color:var(--ink-soft)}
.gp-host img,.gp-host .k-face{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.gp-host b{color:var(--ink)}
.gp-act{display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap;margin-top:6px}
.gp-ph{position:relative;min-height:460px;padding:24px 24px 24px 0}
.gp-ph img{width:100%;height:100%;border-radius:var(--r);object-fit:cover}
.gp-br{margin:0;font-size:17px;line-height:1.55;color:var(--heading);background:var(--surface-soft);border-radius:var(--r-sm);padding:14px 18px;max-width:60ch}
.gp-why{padding-bottom:0}
.gp-whybox{background:var(--surface);border-radius:var(--r);padding:28px;display:grid;grid-template-columns:160px minmax(0,1fr);gap:32px;align-items:center}
.gp-face{width:160px;height:200px;border-radius:18px;object-fit:cover}
.gp-whytx{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.gp-eps .gp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:24px}
.gp-card{background:var(--surface);border-radius:var(--r);padding:16px;display:grid;grid-template-columns:150px minmax(0,1fr);gap:22px;align-items:stretch}
.gp-card>.gp-plate{border-radius:16px}
.gp-plate img{display:block;width:100%;height:100%;min-height:200px;object-fit:cover}
.gp-ct{display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding:8px 8px 8px 0}
.gp-ct h3{font:400 24px/1.15 var(--display);color:var(--heading);margin:0;text-wrap:balance}
.gp-ct p{margin:0;font-size:16px;line-height:1.55;color:var(--ink-soft)}
.gp-ct h3 a{color:inherit;text-decoration:none}
.gp-ct .k-btn,.gp-ct .k-btn-ghost{margin-top:auto;align-self:flex-start}
.gp-quote{padding:0 44px}
.gp-quote .pull{max-width:none}
.gp-quote .pull .k-ripple{right:-120px;bottom:-140px;width:360px}
.gp-bookbox{background:var(--surface);border-radius:var(--r);padding:36px 40px;display:flex;justify-content:space-between;align-items:center;gap:24px 40px;flex-wrap:wrap}
.gp-bt{max-width:640px;display:flex;flex-direction:column;gap:10px}
.gp-relhead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.gp-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.gp-row a{text-decoration:none;color:inherit;display:block}
.gp-fr{border-radius:var(--r)}
.gp-row .k-guest{display:block;border-radius:0}
.gp-nm{margin:12px 0 0;font:400 22px/1.15 var(--display);color:var(--heading)}
.gp-cr{margin:4px 0 0;font-size:14px;line-height:1.4;color:var(--ink-soft)}
@media (max-width:1000px){.gp-eps .gp-grid{grid-template-columns:1fr}.gp-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
 .gp-head{padding:16px 16px 0}
 .gp-box{grid-template-columns:minmax(0,1fr)}   /* minmax(0,…): a bare 1fr let the longest unbreakable item push the text column 23px off a 390 screen (09-30 audit) */
 .gp-tx{padding:28px 22px 32px}
 .gp-ph{order:-1;min-height:0;padding:14px 14px 0;aspect-ratio:1/1}
 .gp-ph img{height:100%}
 .gp-whybox{grid-template-columns:1fr;padding:22px;gap:18px}
 .gp-face{width:110px;height:138px}
 .gp-card{grid-template-columns:1fr}
 .gp-plate img{min-height:0}
 .gp-card>.gp-plate{aspect-ratio:16/10}
 .gp-quote{padding:0 16px}
 .gp-bookbox{padding:26px 22px}
 .gp-quote .pull .k-ripple{display:none}
}
/* additions for real data (prefix .gp-) */
.gp-cred i{font-style:italic}
.gp-grid.gp-one{grid-template-columns:minmax(0,1fr)}
.gp-grid.gp-one .gp-card{grid-template-columns:260px minmax(0,1fr)}
.gp-tile-mono{aspect-ratio:4/5;border-radius:var(--r);background:var(--surface-soft);display:grid;place-items:center;font:400 56px/1 var(--display);color:var(--heading)}
.gp-quote .pull .by a{color:var(--heading);font-weight:700}
@media (max-width:900px){.gp-grid.gp-one .gp-card{grid-template-columns:1fr}}
.gp-ph.gp-noph{overflow:hidden}
.gp-ph.gp-noph .gp-mono{position:absolute;inset:24px 24px 24px 0;display:grid;place-items:center;border-radius:var(--r);background:linear-gradient(160deg,var(--surface-soft) 0%,var(--bg) 100%);box-shadow:inset 0 0 0 1.5px var(--line);font:400 clamp(72px,9vw,140px)/1 var(--display);color:var(--heading);letter-spacing:.02em}
.gp-grid .gp-plate img{min-height:0}
.gp-grid.gp-one .gp-plate{min-height:200px;max-height:260px}
@media (max-width:900px){.gp-ph.gp-noph .gp-mono{inset:14px 14px 0 14px}.gp-grid.gp-one .gp-plate{min-height:0;max-height:none;aspect-ratio:16/10}}
/* guest facts from the show notes: the known-for line, the links row, the book button */
.gp-kf{margin:0}
.gp-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.gp-links .k-meta{margin:0 4px 0 0}
.gp-links .k-chip{text-decoration:none}
.gp-kf2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:900px){.gp-links .k-chip{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}

/* ---- page: guests.css ---- */
/* guests page, prefix .gs- */
.gs-head{padding:24px 44px 0}
.gs-head .box{position:relative;overflow:hidden;background:var(--surface);border-radius:var(--r);padding:56px 56px 52px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:40px;align-items:center}
.gs-head .k-ripple{position:absolute;width:440px;right:-100px;top:-170px}
.gs-head .me{position:relative;width:132px;aspect-ratio:1;border-radius:50%;object-fit:cover}
.gs-head .tx{position:relative;display:flex;flex-direction:column;gap:16px;max-width:680px}
.gs-head .k-h1{font-size:clamp(40px,4.6vw,62px)}
.gs-head .k-meta{margin:0}
@media (max-width:900px){.gs-head{padding:16px 16px 0}.gs-head .box{grid-template-columns:1fr;gap:20px;padding:28px 22px}.gs-head .k-ripple{display:none}.gs-head .me{width:88px}}

.gs-wall{padding:32px 44px 24px}
.gs-wall .grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:32px 20px}
.gs-wall .grid a{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:inherit}
.gs-wall .gs-fr{border-radius:18px;margin-bottom:8px}
.gs-wall .k-guest{display:block;border-radius:0}
.gs-wall .gs-ph{display:grid;place-items:center;border-radius:18px;background:linear-gradient(160deg,var(--surface-soft) 0%,var(--surface) 100%);box-shadow:inset 0 0 0 1.5px var(--line);font:400 clamp(34px,4vw,52px)/1 var(--display);color:var(--heading);letter-spacing:.04em}
.gs-wall .grid a:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:18px}
.gs-nm{font:700 15px/1.25 var(--body);color:var(--ink);margin:0;overflow-wrap:break-word}
.gs-cr{font-size:13px;line-height:1.4;color:var(--ink-soft);margin:0}
@media (max-width:1100px){.gs-wall .grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:900px){.gs-wall{padding:24px 16px 16px}.gs-wall .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 12px}.gs-wall .gs-ph{display:grid;place-items:center;border-radius:18px;background:linear-gradient(160deg,var(--surface-soft) 0%,var(--surface) 100%);box-shadow:inset 0 0 0 1.5px var(--line);font:400 clamp(34px,4vw,52px)/1 var(--display);color:var(--heading);letter-spacing:.04em}
.gs-wall .grid a:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:18px}
.gs-nm{font-size:14px}.gs-cr{font-size:12px}}
/* known-for line under a guest's name, from their show notes; two lines at most */
.gs-kf{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:560px){.gs-wall .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}}   /* 09-30 audit: 3 columns at 390 ran names into each other and pushed the page 15px sideways */

/* ---- page: legal.css ---- */
/* legal pages (prefix .lg-) */
.lg-sec{padding-top:56px}
.lg-col{background:var(--surface);border-radius:var(--r);padding:56px 40px 64px;max-width:calc(68ch + 80px);margin:0 auto}
.lg-col .k-h1{font-size:clamp(34px,4vw,48px);margin-bottom:26px}
.lg-note{margin:-8px 0 26px;padding:10px 14px;border:1.5px dashed var(--line);border-radius:var(--r-sm);font-size:14px;line-height:1.45;color:var(--ink-soft)}
.lg-text{max-width:68ch}
.lg-text h2{font:400 26px/1.2 var(--display);color:var(--heading);margin:40px 0 12px;text-wrap:balance}
.lg-text p{margin:0 0 16px;font-size:17px;line-height:1.7;color:var(--ink);overflow-wrap:anywhere}
.lg-text ul{margin:0 0 16px;padding-left:22px;line-height:1.7}
@media (max-width:900px){.lg-sec{padding:24px 16px 40px}.lg-col{padding:32px 20px 40px}}

/* ---- page: newsletter.css ---- */
/* newsletter page (prefix .nl-) */
.nl-hero{padding:24px 44px 0}
.nl-hero .box{background:var(--surface);border-radius:var(--r);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);overflow:hidden}
.nl-hero .tx{padding:56px 56px 52px;display:flex;flex-direction:column;gap:22px}
.nl-hero .k-h1{font-size:clamp(38px,4.2vw,58px)}
.nl-hero .gets{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:14px;counter-reset:g}
.nl-hero .gets li{counter-increment:g;display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;font-size:17px;line-height:1.55}
.nl-hero .gets li::before{content:counter(g);font:400 26px/1 var(--display);color:var(--accent)}
.nl-hero .gets b{color:var(--heading)}
.nl-note{margin:-6px 0 0;font-size:14px;line-height:1.45;color:var(--ink-soft)}
.nl-hero .dph{position:relative;min-height:640px}
.nl-hero .dph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 8%}
.nl-cover{position:absolute;left:22px;bottom:22px;width:132px}
@media (max-width:900px){.nl-hero{padding:16px 16px 0}.nl-hero .box{grid-template-columns:1fr}.nl-hero .tx{padding:28px 22px 32px}.nl-hero .dph{order:-1;min-height:380px}.nl-cover{display:none}}

.nl-issue .cols{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start}
.nl-issue .left{display:flex;flex-direction:column;gap:18px}
.nl-issue .left .nl-more{margin-top:26px}
.nl-issue .item{display:grid;grid-template-columns:184px minmax(0,1fr);gap:22px;align-items:center;background:var(--surface);border-radius:var(--r);padding:16px 26px 16px 16px;text-decoration:none;color:inherit}
.nl-issue .item .k-hov-ph{width:184px;aspect-ratio:1;border-radius:16px}
.nl-issue .item img{display:block;width:100%;height:100%;object-fit:cover}
.nl-issue .item h3{font:400 26px/1.14 var(--display);color:var(--heading);margin:10px 0 6px;text-wrap:balance}
.nl-issue .item p{margin:0;font-size:16px;line-height:1.45;color:var(--ink-soft)}
.nl-mail{background:var(--surface);border-radius:var(--r);padding:26px 30px 30px;display:flex;flex-direction:column;gap:22px;box-shadow:0 24px 60px rgba(var(--shadow-rgb),.10);max-width:620px;margin-left:auto}
.nl-mail .hd{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.nl-mail .hd .k-mark{width:32px;height:32px}
.nl-mail .hd .k-chip{margin-left:auto;background:var(--surface-soft)}
.nl-mail .blk{background:var(--bg);border-radius:var(--r-sm);padding:22px 22px 24px;display:flex;flex-direction:column;gap:12px}
.nl-mail .nl-lp{border-radius:12px}
.nl-mail .lead{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.nl-mail h3{font:400 28px/1.12 var(--display);color:var(--heading);margin:2px 0 0;text-wrap:balance}
.nl-mail .blk>p{margin:0;font-size:16px;line-height:1.5;color:var(--ink-soft)}
.nl-mail .eps{display:grid;gap:14px}
.nl-mail .e{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:center}
.nl-mail .e .k-hov-ph{width:64px;aspect-ratio:1;border-radius:12px}
.nl-mail .e img{display:block;width:100%;height:100%;object-fit:cover}
.nl-mail .e p{margin:0;font:400 19px/1.2 var(--display);color:var(--heading);display:flex;flex-direction:column;gap:4px;text-wrap:balance}
.nl-mail .slot{border:1.5px dashed var(--line);border-radius:var(--r-sm);padding:18px 22px;font-size:15px;line-height:1.45;color:var(--ink-soft)}
@media (max-width:1000px){.nl-issue .cols{grid-template-columns:1fr;gap:36px}.nl-mail{margin:0;padding:20px 16px 22px}.nl-mail .blk{padding:18px 16px 20px}.nl-issue .item{grid-template-columns:96px minmax(0,1fr);padding:12px 16px 12px 12px}.nl-issue .item .k-hov-ph{width:96px}.nl-issue .item h3{font-size:20px}}

/* the real signup form: email and optional first name side by side, the button full width under them */
.nl-hero form.signup{margin-top:6px}
.nl-hero form.signup .signup-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.nl-hero form.signup button{grid-column:1/-1;width:100%}
.nl-hero form.signup .note{margin:0 0 10px}
@media (max-width:900px){.nl-hero form.signup .signup-fields{grid-template-columns:1fr}}


/* ---- page: notfound.css ---- */
/* 404 page (prefix .nf-) */
.nf-sec{padding:24px 44px 0}
.nf-box{background:var(--surface);border-radius:var(--r);min-height:min(560px,70vh);padding:64px 40px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:22px}
.nf-box .k-lede{max-width:30em}
.nf-mark{width:84px;height:84px}
.nf-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:6px}
@media (max-width:900px){.nf-sec{padding:16px 16px 0}.nf-box{padding:44px 22px}.nf-acts{flex-direction:column;align-items:stretch;width:100%;max-width:320px}.nf-acts a{justify-content:center}}

/* ---- page: podcast.css ---- */
/* podcast page, prefix .pc- */
.pc-head{padding:24px 44px 0}
.pc-head .box{background:var(--surface);border-radius:var(--r);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);overflow:hidden}
.pc-head .tx{padding:56px 56px 48px;display:flex;flex-direction:column;gap:22px;justify-content:center}
.pc-head .k-lede{max-width:34em}
.pc-head .host{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--ink-soft);margin:0}
.pc-head .host .k-face{width:44px;height:44px;border-radius:50%;object-fit:cover}
.pc-head .host b{color:var(--ink)}
.pc-latest{display:flex;align-items:center;gap:16px;background:var(--bg);border-radius:var(--r-sm);padding:14px 22px 14px 14px}
.pc-latest .k-play{width:54px;height:54px}
.pc-latest .t{font:400 22px/1.2 var(--display);color:var(--heading);margin:4px 0 0;text-wrap:balance}
.pc-head .dph{position:relative;min-height:440px}
.pc-head .dph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 12%}
@media (max-width:900px){.pc-head{padding:16px 16px 0}.pc-head .box{grid-template-columns:1fr}.pc-head .tx{padding:28px 22px}.pc-head .dph{min-height:300px;order:-1}.pc-latest .t{font-size:19px}}

.pc-listen{padding:16px 44px 0}
.pc-listen .row{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap}
.pc-listen .lbl{font-size:14px;color:var(--ink-soft);margin-right:6px}
.pc-listen a{font:700 13px/1 var(--body);padding:11px 16px;border-radius:999px;text-decoration:none}   /* SECONDARY buttons: look and hover from the BUTTON SYSTEM (design.css) */
@media (max-width:900px){.pc-listen{padding:14px 16px 0}}

/* ===== episode cards (episode-browser.mjs): the Podcast grid and the Home's newest four (.pc-ep.compact) =====
   One card, three lines of text: meta, the title as the hero, one short line. Space separates, no rules. A card lays
   itself out by its own width (container query): photo on top when narrow, side by side from 560px. The whole card is
   the link (the title's ::after covers it) and reacts with the hover system (.k-hov .k-hov-lift .k-hov-ph .k-hov-t). */
.pc-ep{padding:72px 44px 40px}
.pc-top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 32px;flex-wrap:wrap}
.pc-lede{margin-top:10px;max-width:34em}
.pc-themes{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;margin-top:28px}
.pc-chips{display:flex;flex-wrap:wrap;gap:8px}
.pc-chips[hidden]{display:none}
.pc-chips button{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;white-space:nowrap;font:700 14px/1 var(--body);color:var(--ink);background:var(--surface);padding:12px 18px;border-radius:999px;transition:color .25s ease,background-color .25s ease}
.pc-chips button.on{background:var(--heading);color:var(--surface)}
.pc-chips .pc-x{display:none}
.pc-chips.open .pc-x{display:inline-flex}
.pc-chips .pc-open{background:transparent;color:var(--heading)}
.pc-chips button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (hover:hover){.pc-chips button:not(.on):hover{color:var(--accent)}}
.pc-status{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:32px}
.pc-ep.compact .pc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:36px}
.pc-card{container-type:inline-size;min-width:0}
.pc-card[hidden]{display:none}
.pc-in{position:relative;height:100%;display:grid;grid-template-rows:auto 1fr;background:var(--surface);border-radius:var(--r);overflow:hidden}
.pc-in:has(a:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.pc-ph{position:relative;aspect-ratio:4/3;background:var(--surface-soft)}
.pc-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pc-ep:not(.compact) .pc-ph{aspect-ratio:3/2}   /* the Podcast grid is 20 cards deep: a slightly shorter photo keeps it light */
.pc-play{position:absolute;left:18px;bottom:18px;width:52px;height:52px}
.pc-play svg{width:17px;height:17px}
.pc-play::after{box-shadow:0 0 0 1.5px var(--on-photo)}   /* the play dot sits on a photo: its hover ring (BUTTON SYSTEM) is drawn in the on-photo color */
.pc-tx{display:flex;flex-direction:column;gap:10px;padding:24px 28px 30px}
.pc-meta{margin:0}
.pc-t{font:400 24px/1.22 var(--display);color:var(--heading);margin:0;text-wrap:balance}
.pc-t a{color:inherit;text-decoration:none;outline:none}
.pc-t a::after{content:"";position:absolute;inset:0;z-index:1}
.pc-line{margin:0;font-size:16px;line-height:1.55;color:var(--ink-soft)}
@container (min-width:560px){
  .pc-in{grid-template-columns:minmax(0,.85fr) minmax(0,1fr);grid-template-rows:none}
  .pc-ph{aspect-ratio:auto;min-height:340px}
  .pc-tx{justify-content:center;gap:14px;padding:40px 40px 40px 36px}
  .pc-t{font-size:var(--t-h3)}
  .pc-line{font-size:17px}
}
.pc-morewrap{margin:44px 0 0;text-align:center}
.pc-showmore{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:16px 30px;border-radius:999px;font:700 16px/1 var(--body)}   /* a SECONDARY button: the look and hover are the BUTTON SYSTEM's (design.css) */
.pc-showmore[hidden]{display:none}
@media (max-width:1100px){.pc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
@media (max-width:900px){.pc-ep{padding:48px 16px 24px}.pc-themes{margin-top:22px}.pc-ep.compact .pc-grid{gap:20px;margin-top:28px}}
@media (max-width:640px){
  .pc-grid,.pc-ep.compact .pc-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .pc-themes{flex-wrap:nowrap;overflow-x:auto;margin:20px -16px 0;padding:0 16px 4px;scrollbar-width:none}
  .pc-themes::-webkit-scrollbar{display:none}
  .pc-chips{flex-wrap:nowrap}
  .pc-chips .pc-x{display:inline-flex}
  .pc-chips .pc-open{display:none}
  .pc-ep.compact .pc-ph{aspect-ratio:3/2}
  .pc-tx{padding:20px 22px 24px}
  .pc-t{font-size:23px}
  /* the Podcast page on a phone: a calm list of wide cards, photo left, meta and title only */
  .pc-ep:not(.compact) .pc-grid{gap:12px;margin-top:24px}
  .pc-ep:not(.compact) .pc-in{grid-template-columns:112px minmax(0,1fr);grid-template-rows:none;border-radius:var(--r-sm)}
  .pc-ep:not(.compact) .pc-ph{aspect-ratio:4/5}
  .pc-ep:not(.compact) .pc-play{left:10px;bottom:10px;width:34px;height:34px}
  .pc-ep:not(.compact) .pc-play svg{width:12px;height:12px;margin-left:2px}
  .pc-ep:not(.compact) .pc-tx{justify-content:center;gap:6px;padding:14px 18px}
  .pc-ep:not(.compact) .pc-t{font-size:19px;line-height:1.25}
  .pc-ep:not(.compact) .pc-line{display:none}
  .pc-morewrap{margin-top:28px}
  .pc-showmore{width:100%;justify-content:center}
}

.pc-guest{padding:24px 44px 0}
.pc-gw{background:var(--surface);border-radius:var(--r);padding:56px 48px 48px;position:relative;overflow:hidden}
.pc-gw .k-ripple{position:absolute;width:560px;right:-160px;top:-200px}
/* her photo is sized to stand level with the two-line headline beside it (Andrew 09-29: "should be bigger") */
.pc-gw .lead{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:44px;align-items:center;max-width:1040px}
.pc-gw .lead .k-face{width:clamp(168px,14.5vw,212px)}
.pc-gw .lead .k-h2{font-size:clamp(28px,3.2vw,42px)}
.pc-gw .who{margin:10px 0 0}
.pc-gw .row{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:26px 20px;margin-top:44px}
.pc-gw .row a{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:inherit}
.pc-gw .row a[hidden]{display:none}
.pc-gph{aspect-ratio:4/5;border-radius:18px;margin-bottom:8px;background:var(--surface-soft)}
.pc-gph img{width:100%;height:100%;object-fit:cover}
.pc-nm{font:700 15px/1.25 var(--body);color:var(--ink);margin:0}
.pc-cr{font-size:13px;line-height:1.4;color:var(--ink-soft);margin:0}
.pc-gw .gw-foot{position:relative;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:40px}
@media (max-width:1100px){.pc-gw .row{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:900px){.pc-guest{padding:16px 16px 0}.pc-gw{padding:32px 20px}.pc-gw .k-ripple{display:none}.pc-gw .lead{grid-template-columns:1fr;gap:20px}.pc-gw .lead .k-face{width:132px}.pc-gw .row{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 12px;margin-top:32px}.pc-nm{font-size:14px}.pc-gw .gw-foot .k-btn{width:100%}}
/* the latest-episode link in the head is a card, not an underlined link */
.pc-latest{text-decoration:none;color:inherit}
/* known-for line under a guest's name, from their show notes; two lines at most */
.pc-kf{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---- page: speaking.css ---- */
/* speaking page (prefix sp-) */
.sp-head .k-h1{font-size:clamp(44px,5.2vw,72px)}
.sp-head .dph img{object-position:50% 24%}
.sp-acts{display:flex;gap:14px 24px;align-items:center;flex-wrap:wrap}
.sp-slot{font-style:italic;color:var(--ink-soft)}
.k-h3.sp-slot{font-style:normal;color:var(--ink-soft)}
.sp-head2{margin-bottom:28px;display:flex;flex-direction:column;gap:8px}

.sp-idea{padding-top:64px}
.sp-box{position:relative;overflow:hidden;background:var(--surface);border-radius:var(--r);padding:56px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.sp-rip{left:-150px;bottom:-250px;width:340px}
.sp-lead{display:flex;flex-direction:column;gap:20px;position:relative;z-index:1}
.sp-list{position:relative;z-index:1;margin:0;padding:0;list-style:none;display:grid;gap:18px;counter-reset:t}
.sp-list li{counter-increment:t;display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;font-size:17px;line-height:1.55}
.sp-list li::before{content:counter(t);font:400 26px/1 var(--display);color:var(--accent)}
.sp-list b{color:var(--heading)}

.sp-talks{padding-top:16px;padding-bottom:40px}
.sp-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.sp-talk{background:var(--surface);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.sp-talk img{width:100%;aspect-ratio:4/3;object-fit:cover}
.sp-talk .tx{padding:26px 28px 32px;display:flex;flex-direction:column;gap:10px}
.sp-talk .area{font:700 13px/1.3 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.sp-talk p{margin:0;font-size:17px;line-height:1.55}

.sp-press{padding-top:16px;padding-bottom:40px}
.sp-pbox{background:var(--surface);border-radius:var(--r);padding:48px 52px;display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:48px;align-items:center}
.sp-names{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.sp-names li{font:400 24px/1.15 var(--display);color:var(--heading);padding:16px 0;border-bottom:1px solid color-mix(in srgb,var(--heading) 14%,transparent)}

.sp-nums{padding-top:16px;padding-bottom:40px}
.sp-num{background:var(--surface);border-radius:var(--r);padding:34px 32px 36px;display:flex;flex-direction:column;gap:10px}
.sp-num b{font:400 clamp(52px,6vw,84px)/1 var(--display);color:var(--accent)}
.sp-num span{font-size:17px;line-height:1.5;color:var(--ink-soft)}
.sp-num-t b{font-size:clamp(34px,3.6vw,48px);line-height:1.08;color:var(--heading)}
.sp-num-t span{font:400 22px/1.2 var(--display);color:var(--heading)}

.sp-kit{padding-top:16px;padding-bottom:40px}
.sp-kbox{background:var(--surface);border-radius:var(--r);padding:48px 52px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:48px;align-items:start}
.sp-bio{display:flex;flex-direction:column;gap:14px}
.sp-bio p{margin:0;font-size:18px;line-height:1.65;max-width:62ch}
.sp-lbl{font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.sp-shots{background:var(--bg);border-radius:var(--r-sm);padding:26px 26px 30px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.sp-slotbtn{display:inline-flex;font-style:italic;color:var(--ink-soft);border:1.5px dashed color-mix(in srgb,var(--heading) 30%,transparent);border-radius:999px;padding:14px 22px;font-size:16px;line-height:1.3}

.sp-book{padding-top:32px;padding-bottom:88px}
.sp-inv{background:var(--band);color:var(--on-band);border-radius:var(--r);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);overflow:hidden}
.sp-inv .tx{padding:64px 56px;display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.sp-inv .k-h2{color:var(--on-band);max-width:16ch}
.sp-inv .k-lede{color:color-mix(in srgb,var(--on-band) 88%,transparent);max-width:52ch}
.sp-inv .sp-form{width:100%;max-width:520px;border:1.5px dashed color-mix(in srgb,var(--on-band) 40%,transparent);border-radius:var(--r-sm);padding:28px 26px;color:color-mix(in srgb,var(--on-band) 75%,transparent);font-size:16px}
.sp-inv .k-small{color:color-mix(in srgb,var(--on-band) 80%,transparent);margin:0}
.sp-inv .k-link{color:var(--on-band);border-bottom-color:color-mix(in srgb,var(--on-band) 40%,transparent)}
.sp-inv .dph{position:relative;min-height:420px}
.sp-inv .dph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}

@media (max-width:1000px){.sp-three{grid-template-columns:1fr}.sp-pbox,.sp-kbox{grid-template-columns:1fr;gap:26px;padding:30px 22px}}
@media (max-width:900px){
  .sp-idea{padding-top:28px}
  .sp-box{grid-template-columns:1fr;gap:28px;padding:30px 22px}
  .sp-rip{display:none}
  .sp-inv{grid-template-columns:1fr}.sp-inv .dph{order:-1;min-height:300px}.sp-inv .tx{padding:32px 22px}.sp-book{padding-bottom:44px}
}
@media (max-width:560px){.sp-names{grid-template-columns:1fr}.sp-talk img{aspect-ratio:16/9}.sp-talk .tx{padding:22px 20px 26px}}

/* ---- page: thank-you.css ---- */
/* thank-you page (prefix .ty-) */
.ty-head{padding:24px 44px 0}
.ty-box{background:var(--surface);border-radius:var(--r);padding:64px 40px 60px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
.ty-box .k-lede{max-width:32em}
.ty-mark{width:64px;height:64px}
.ty-start{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.ty-eps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;width:100%;margin:22px 0 14px}
.ty-ep{background:var(--surface);border-radius:var(--r);padding:12px 12px 22px;display:flex;flex-direction:column;gap:16px;text-decoration:none;color:inherit}
.ty-ep img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 20%;border-radius:14px}
.ty-ep>div{display:flex;flex-direction:column;gap:8px;padding:0 10px}
.ty-ep h3{margin:0;font:400 24px/1.16 var(--display);color:var(--heading);text-wrap:balance}
.ty-ep p{margin:0;font-size:15px;color:var(--ink-soft)}
.ty-go{display:flex;align-items:center;gap:10px;margin-top:6px}
.ty-go .k-play{width:40px;height:40px}
.ty-go b{font-size:14px;color:var(--heading)}
.ty-ep .ty-ph{border-radius:14px}
@media (max-width:1000px){.ty-eps{grid-template-columns:1fr}.ty-ep{flex-direction:row;align-items:flex-start;gap:14px;padding:12px}.ty-ep .ty-ph{width:84px;flex:none}.ty-ep img{aspect-ratio:1}.ty-ep>div{padding:0;min-width:0}.ty-ep h3{font-size:21px}}
@media (max-width:900px){.ty-head{padding:16px 16px 0}.ty-box{padding:40px 22px 38px}}
.ty-next{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:8px;max-width:34em;text-align:left;font-size:16px;line-height:1.55;color:var(--ink-soft)}
.ty-next li{padding-left:22px;position:relative}
.ty-next li::before{content:"";position:absolute;left:4px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--accent)}

/* ---- page: topic-c2.css ---- */
/* topic page, layout c2 "the answer page" (Andrew's pick 2026-10-03, canvas round 5 R5-C2), prefix .tc
   Layout only, kit tokens only. The hero reuses the topic page's .tp-head; the sticky bar and progress line are the
   article page's .ar-top / .ar-rbar (pages/article.css). */
.tc [id]{scroll-margin-top:calc(var(--ar-navh,84px) + 16px)}
.tc :is(.tc-p,.tc-a,.tc-list li span,.tc-steps li span,.tc-fql details p,.tc-pull blockquote,.tc-st-l){text-wrap:pretty}

/* ---------- hero: the answer block in place of the paragraph */
.tc .tp-tx{gap:20px}
.tc-qa{margin:0;font-size:19px;line-height:1.5;color:var(--ink);max-width:56ch}
.tc-qal{margin:0;padding:0;list-style:none;display:grid;gap:10px;max-width:58ch}
.tc-qal li{position:relative;padding-left:26px;font-size:17px;line-height:1.5;color:var(--ink-soft)}
.tc-qal li::before{content:'';position:absolute;left:4px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--coral)}
.tc-by{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--ink-soft);margin:0}
.tc-by .k-face{width:40px}
.tc-by b{color:var(--heading);font-weight:700}

/* ---------- experts: a slow marquee of small faces */
.tc-exp{padding:40px 0 8px}
.tc-exp-h{padding:0 44px;display:flex;align-items:baseline;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}
.tc-exp-t{margin:0;font:400 clamp(26px,2.4vw,32px)/1.15 var(--display);color:var(--heading);text-wrap:balance}
.tc-exp-h .k-small{margin:0}
.tc-mq{margin-top:18px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,var(--ink) 44px,var(--ink) calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,transparent,var(--ink) 44px,var(--ink) calc(100% - 44px),transparent)}
.tc-mq-track{display:flex;width:max-content;padding-left:38px;animation:tc-mq 420s linear infinite}
.tc-mq-set{display:flex;gap:12px;margin:0;padding:6px 12px 6px 0;list-style:none}
.tc-mq:hover .tc-mq-track,.tc-mq:focus-within .tc-mq-track{animation-play-state:paused}
@keyframes tc-mq{to{transform:translateX(calc(-50% + 19px))}}
.tc-face{display:flex;align-items:center;gap:12px;text-decoration:none;background:var(--surface);border-radius:999px;padding:6px 20px 6px 6px;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s cubic-bezier(.2,.7,.2,1)}
.tc-face:hover,.tc-face:focus-visible{transform:scale(1.03);box-shadow:0 10px 24px rgba(var(--shadow-rgb),.08)}
.tc-face:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.tc-face img,.tc-face .tc-ini{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 22%;flex:none;display:block}
.tc-face .tc-ini{display:grid;place-items:center;background:var(--bg);font:400 18px/1 var(--display);color:var(--heading)}
.tc-face>span{display:flex;flex-direction:column;gap:2px;white-space:nowrap}
.tc-face b{font:700 14px/1.2 var(--body);color:var(--heading)}
.tc-face i{font:400 13px/1.25 var(--body);font-style:normal;color:var(--ink-soft)}

/* ---------- source chips: the "learn more" link on every point */
.tc-srcs{display:flex;flex-wrap:wrap;gap:6px}
.tc-src{display:inline-flex;align-items:center;gap:7px;font:700 12.5px/1 var(--body);color:var(--heading);text-decoration:none;background:var(--bg);border-radius:999px;padding:7px 11px 7px 8px;white-space:nowrap;transition:background-color .5s cubic-bezier(.2,.7,.2,1)}
.tc-src svg{flex:none;color:var(--accent)}
.tc-src:hover,.tc-src:focus-visible{background:color-mix(in srgb,var(--heading) 8%,var(--bg))}
.tc-src:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tc-srow{margin:-6px 0 18px}
.tc-srow .tc-src{background:var(--surface)}

/* ---------- the answer, one column */
.tc-body{padding-top:56px}
.tc-col{max-width:780px;margin:0 auto}
.tc-sec{padding:40px 0 8px}
.tc-sec h2{margin:0 0 14px;font:400 clamp(30px,3vw,40px)/1.12 var(--display);color:var(--heading);text-wrap:balance}
.tc-a{margin:0 0 16px;font:700 20px/1.45 var(--body);color:var(--heading)}
.tc-p{margin:0 0 16px;font-size:18px;line-height:1.7;color:var(--ink)}
.tc-turn{margin:0 0 16px;font:italic 400 22px/1.4 var(--body);color:var(--heading)}
.tc-lh{margin:24px 0 10px;font:700 15px/1.3 var(--body);color:var(--heading)}
.tc-list{margin:0 0 20px;padding:0;list-style:none;display:grid;gap:10px}
.tc-list li{background:var(--surface);border-radius:var(--r-sm);padding:16px 20px;font-size:17px;line-height:1.55;color:var(--ink);display:flex;flex-direction:column;gap:8px}
.tc-list li small{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:700 13px/1.3 var(--body);color:var(--ink-soft)}
.tc-steps{margin:0 0 20px;padding:0;list-style:none;display:grid;gap:10px;counter-reset:tcs}
.tc-steps li{position:relative;padding:16px 20px 16px 64px;background:var(--surface);border-radius:var(--r-sm);font-size:17px;line-height:1.55;counter-increment:tcs;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.tc-steps li::before{content:counter(tcs);position:absolute;left:18px;top:14px;width:32px;height:32px;border-radius:50%;background-image:var(--btn);color:var(--on-accent);display:grid;place-items:center;font:700 15px/1 var(--body)}
.tc-pull{margin:28px -64px 32px;background:var(--surface);border-radius:var(--r);padding:34px 40px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 26px;align-items:start}
.tc-play{width:60px;height:60px;border-radius:50%;background-image:var(--btn);color:var(--on-accent);display:grid;place-items:center;box-shadow:0 12px 30px var(--btn-glow);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.tc-play svg{width:22px;height:22px;margin-left:3px}
.tc-play:hover,.tc-play:focus-visible{transform:scale(1.08)}
.tc-play:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.tc-pull blockquote{margin:0;font:400 clamp(24px,2.2vw,30px)/1.24 var(--display);color:var(--heading);text-wrap:balance}
.tc-pull blockquote::before{content:"\201C"}
.tc-pull blockquote::after{content:"\201D"}
.tc-pull figcaption{grid-column:2;display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap}
.tc-who{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--ink-soft)}
.tc-who b{display:block;color:var(--heading);font-size:15px}
.tc-who img.tc-pf{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 20%}
.tc-who .k-face{width:44px}
.tc-t{font:700 13px/1 var(--body);color:var(--heading);font-variant-numeric:tabular-nums;white-space:nowrap}
.tc-key{margin:40px 0 0;background:var(--surface-soft);border-radius:var(--r);padding:30px 34px}
.tc-key h2{margin:0 0 14px;font:400 30px/1.15 var(--display);color:var(--heading)}
.tc-key ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.tc-key li{position:relative;padding-left:28px;font-size:17px;line-height:1.5;color:var(--ink)}
.tc-key li::before{content:'';position:absolute;left:4px;top:.55em;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.tc-ver{margin:40px 0 0;background:var(--surface);border-radius:var(--r)}
.tc-ver summary{list-style:none;cursor:pointer;padding:22px 26px;display:flex;flex-direction:column;gap:10px}
.tc-ver summary::-webkit-details-marker{display:none}
.tc-ver summary b{font:400 24px/1.2 var(--display);color:var(--heading)}
.tc-sub{font-size:15px;color:var(--ink-soft)}
.tc-chips{display:flex;flex-wrap:wrap;gap:6px}
.tc-chips i{font:700 12px/1 var(--body);font-style:normal;color:var(--heading);background:var(--bg);border-radius:999px;padding:7px 11px}
.tc-ver div{padding:0 26px 24px;display:grid;gap:14px}
.tc-ver div p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-soft)}
.tc-ver div p b{display:block;color:var(--heading);font-size:14px}

/* ---------- FAQ, starters, related */
.tc-fq{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:28px 56px;align-items:start;background:var(--surface);border-radius:var(--r);padding:44px 52px}
.tc-fq .k-h2{font-size:clamp(30px,3vw,40px)}
.tc-fql{display:grid;gap:12px}
.tc-fql details{background:var(--bg);border-radius:var(--r-sm);padding:18px 22px}
.tc-fql summary{font:400 22px/1.25 var(--display);color:var(--heading);cursor:pointer}
.tc-fql details p{margin:12px 0 0;font-size:17px;line-height:1.65;color:var(--ink)}
.tc-fql details p.tc-fby{font-size:14px;color:var(--ink-soft)}
.tc-fql details p.tc-fby a{color:var(--heading);font-weight:700}
.tc-starts .k-h2{margin:0 0 8px}
.tc-starts .k-lede{margin:0}
.tc-sts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:24px}
.tc-st{background:var(--surface);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:14px;text-decoration:none;color:inherit}
.tc-st-ph{border-radius:16px;overflow:hidden;aspect-ratio:16/10;background:var(--bg);display:block}
.tc-st-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.tc-st-tx{display:flex;flex-direction:column;gap:8px;padding:0 8px 8px}
.tc-st h3{margin:0;font:400 23px/1.18 var(--display);color:var(--heading);text-wrap:balance}
.tc-st-l{font-size:16px;line-height:1.5;color:var(--ink-soft)}
.tc-go{display:inline-flex;align-items:center;gap:8px;font:700 14px/1 var(--body);color:var(--heading);margin-top:4px}
.tc-rel{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0}
.tc-rel .label{margin:0 8px 0 0;color:var(--ink-soft)}
.tc-rel a{font:700 15px/1 var(--body);color:var(--heading);text-decoration:none;background:var(--surface);border-radius:999px;padding:13px 18px}
.tc-relsec{padding-bottom:88px}

/* ---------- phone */
@media (max-width:760px){
  .tc .tp-ph{aspect-ratio:16/11}
  .tc-exp{padding:28px 0 4px}
  .tc-exp-h{padding:0 16px}
  .tc-exp-t{font-size:25px}
  .tc-mq{margin-top:14px;-webkit-mask-image:linear-gradient(90deg,transparent,var(--ink) 16px,var(--ink) calc(100% - 16px),transparent);mask-image:linear-gradient(90deg,transparent,var(--ink) 16px,var(--ink) calc(100% - 16px),transparent)}
  .tc-mq-track{padding-left:12px;animation-name:tc-mqm}
  @keyframes tc-mqm{to{transform:translateX(calc(-50% + 6px))}}
  .tc-face{padding:5px 16px 5px 5px;gap:10px}
  .tc-face img,.tc-face .tc-ini{width:44px;height:44px}
  .tc-face b{font-size:13.5px}
  .tc-face i{font-size:12.5px}
  .tc-qa{font-size:18px}
  .tc-body{padding-top:36px}
  .tc-sec h2{font-size:30px}
  .tc-a{font-size:19px}
  .tc-p{font-size:17px}
  .tc-pull{margin:24px 0 28px;grid-template-columns:1fr;padding:26px 22px}
  .tc-pull blockquote{font-size:23px}
  .tc-pull figcaption{grid-column:1}
  .tc-key{padding:24px 22px}
  .tc-fq{grid-template-columns:1fr;padding:26px 20px;gap:16px}
  .tc-fql summary{font-size:20px}
  .tc-sts{grid-template-columns:1fr}
  .tc-st{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:center;gap:14px;padding:10px}
  .tc-st-ph{aspect-ratio:1/1}
  .tc-st-tx{padding:0;gap:6px}
  .tc-st h3{font-size:19px}
  .tc-st-l{display:none}
  .tc-relsec{padding-bottom:56px}
}

/* last, so it wins over the phone rules: the marquee stands still and scrolls by hand */
@media (prefers-reduced-motion:reduce){
  .tc-mq{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .tc-mq-track{animation:none}
  .tc-mq-set[aria-hidden]{display:none}
}

/* ---- page: topic.css ---- */
/* topic page, prefix .tp- */
.tp-head{padding:24px 44px 0}
.tp-box{background:var(--surface);border-radius:var(--r);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);overflow:hidden}
.tp-tx{padding:56px 56px 52px;display:flex;flex-direction:column;gap:22px}
.tp-crumb{margin:0;font-size:14px;color:var(--ink-soft)}
.tp-crumb a{color:var(--heading);font-weight:700;text-decoration:none}
.tp-head .k-h1{font-size:clamp(38px,4.6vw,64px)}
.tp-ans{font-size:19px;max-width:60ch}
.tp-her{margin:0;background:var(--bg);border-radius:var(--r-sm);padding:18px 22px;display:flex;flex-direction:column;gap:6px;max-width:60ch}
.tp-her q{font:400 clamp(24px,2.4vw,30px)/1.15 var(--display);color:var(--heading);quotes:"\201C" "\201D";text-wrap:balance}
.tp-her span{font-size:14px;color:var(--ink-soft)}
.tp-act{display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap}
.tp-ph{position:relative;min-height:480px;padding:24px 24px 24px 0}
.tp-ph img{width:100%;height:100%;border-radius:var(--r);object-fit:cover}
.tp-br{margin:0;font-size:16px;line-height:1.55;color:var(--heading);background:var(--surface-soft);border-radius:var(--r-sm);padding:14px 18px;max-width:60ch}
.tp-vidbox{background:var(--surface);border-radius:var(--r);padding:20px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:36px;align-items:center}
.tp-player{aspect-ratio:16/9;border-radius:var(--r-sm);background:var(--band);display:grid;place-items:center;opacity:.92}
.tp-player .k-play{width:64px;height:64px}
.tp-vidtx{display:flex;flex-direction:column;gap:14px;align-items:flex-start;padding:8px 24px 8px 0}
.tp-exp .tp-explede{margin-top:8px}
.tp-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:26px}
.tp-row a{text-decoration:none;color:inherit;display:block}
.tp-fr{border-radius:var(--r)}
.tp-row .k-guest{display:block;border-radius:0}
.tp-nm{margin:10px 0 0;font:400 20px/1.15 var(--display);color:var(--heading)}
.tp-cr{margin:4px 0 0;font-size:13px;line-height:1.4;color:var(--ink-soft)}
.tp-more{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;align-items:center}
.tp-more .k-chip{background:var(--surface)}
.tp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:24px}
.tp-card{background:var(--surface);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:16px}
.tp-card>.tp-plate{border-radius:16px}
.tp-plate img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.tp-ct{display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding:0 8px 8px;flex:1}
.tp-ct h3{font:400 24px/1.15 var(--display);color:var(--heading);margin:0;text-wrap:balance}
.tp-ct p{margin:0;font-size:16px;line-height:1.55;color:var(--ink-soft)}
.tp-ct .k-btn-ghost{margin-top:auto}
.tp-artbox{background:var(--surface);border-radius:var(--r);overflow:hidden;display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}
.tp-artbox .k-hov-ph img{display:block;width:100%;height:100%;min-height:260px;object-fit:cover}
.tp-artx{padding:40px 44px;display:flex;flex-direction:column;gap:14px;justify-content:center}
.tp-faqbox{background:var(--surface);border-radius:var(--r);padding:40px 44px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;align-items:start}
.tp-qs{display:grid;gap:14px}
.tp-qs details{background:var(--bg);border-radius:var(--r-sm);padding:18px 22px}
.tp-qs summary{font:400 24px/1.2 var(--display);color:var(--heading);cursor:pointer}
.tp-qs details p{margin:14px 0 0;font-size:17px;line-height:1.65;color:var(--ink-soft)}
@media (max-width:1100px){.tp-row{grid-template-columns:repeat(3,minmax(0,1fr))}.tp-grid{grid-template-columns:1fr}.tp-card{display:grid;grid-template-columns:200px minmax(0,1fr)}.tp-plate img{height:100%;aspect-ratio:auto;min-height:180px}}
@media (max-width:900px){
 .tp-head{padding:16px 16px 0}
 .tp-box{grid-template-columns:1fr}
 .tp-tx{padding:26px 22px 30px}
 .tp-ph{order:-1;min-height:0;aspect-ratio:4/3;padding:14px 14px 0}
 .tp-vidbox{grid-template-columns:1fr;gap:18px;padding:14px}
 .tp-vidtx{padding:4px 8px 10px}
 .tp-row{grid-template-columns:repeat(2,minmax(0,1fr))}
 .tp-card{grid-template-columns:1fr}.tp-plate img{aspect-ratio:16/10;height:auto}
 .tp-artbox{grid-template-columns:1fr}.tp-artbox .k-hov-ph img{min-height:0;aspect-ratio:16/8}
 .tp-artx{padding:26px 22px}
 .tp-faqbox{grid-template-columns:1fr;padding:26px 22px;gap:20px}
}
/* additions for real data (prefix .tp- / .tpi-) */
.tp-crumb i{font-style:italic}
.tp-lede-count{font-size:19px;max-width:60ch}
.tp-quotes{display:grid;gap:20px}
.tp-quotes .pull{max-width:none}
.tp-quotes .pull .by a{color:var(--heading);font-weight:700}
.tp-grid.tp-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.tp-grid.tp-one{grid-template-columns:minmax(0,1fr)}
.tp-grid.tp-one .tp-card{display:grid;grid-template-columns:260px minmax(0,1fr)}
.tp-grid.tp-one .tp-plate img{height:100%;aspect-ratio:auto}
.tp-more-eps{margin-top:24px;background:var(--surface);border-radius:var(--r-sm);padding:18px 24px}
/* the disclosure is a SECONDARY button (BUTTON SYSTEM, design.css); its triangle is drawn in currentColor so it flips with the label */
.tp-more-btn{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:12px;font:700 16px/1 var(--body);padding:16px 26px 16px 22px;border-radius:999px;cursor:pointer}
.tp-more-btn::before{content:'';width:0;height:0;border-left:8px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.tp-more-btn[aria-expanded=true]::before{transform:rotate(90deg)}
.tp-more-eps ul[hidden]{display:none}
.tp-more-eps ul{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 32px}
.tp-more-eps li{font-size:16px;line-height:1.4;color:var(--ink-soft)}
.tp-more-eps a{color:var(--heading);font-weight:700;text-decoration:none}
.tp-more-eps .k-meta{display:block;margin-bottom:2px}
.tp-artbox+.tp-artbox{margin-top:20px}
.tp-qs details p a{color:var(--heading);font-weight:700}
.tpi-head{padding:56px 44px 0}
.tpi-head .k-h1{max-width:18ch}
.tpi-head .k-lede{margin-top:16px;max-width:60ch}
.tpi-head .tpi-crumb{margin:0 0 16px;font-size:14px;color:var(--ink-soft)}
.tpi-head .tpi-crumb i{font-style:italic}
/* Topics index, "Featured + list" (Andrew 2026-10-03): eight big topic cards with a guest face, then a plain list of the rest */
.tpi-sec{padding-top:36px}
.tpi-sec>.k-h2{margin-bottom:24px}
.tpi-feat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.tpi-feat .f{display:flex;flex-direction:column;background:var(--surface);border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit}
.tpi-feat .ph{border-radius:0;aspect-ratio:4/5;background:var(--plate)}
.tpi-feat .ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.tpi-feat .tx{display:flex;flex-direction:column;gap:6px;padding:18px 20px 20px;flex:1}
.tpi-feat .nm{font:400 28px/1.08 var(--display);color:var(--heading);text-wrap:balance}
.tpi-feat .ct{font:700 13px/1.3 var(--body);color:var(--ink-soft)}
.tpi-feat .ppl{display:flex;align-items:center;gap:10px;margin-top:10px}
.tpi-feat .fs{display:flex;flex:none}
.tpi-feat .fs i{display:block;width:34px;height:34px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px var(--surface);margin-right:-8px;background:var(--surface-soft)}
.tpi-feat .fs img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;transform:scale(1.35);transform-origin:50% 14%}
.tpi-feat .ppl .t{font-size:13px;line-height:1.35;color:var(--ink-soft);padding-left:6px}
.tpi-resth{margin:56px 0 18px;display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.tpi-list{list-style:none;margin:0;padding:0;columns:3;column-gap:56px}
.tpi-list li{break-inside:avoid}
.tpi-list a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0;text-decoration:none;color:var(--heading);font:400 22px/1.2 var(--display)}
.tpi-list small{font:700 13px/1.2 var(--body);color:var(--ink-soft);white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:1000px){.tp-grid.tp-two{grid-template-columns:1fr}.tp-more-eps ul{grid-template-columns:1fr}}
@media (max-width:900px){.tpi-feat{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.tpi-feat .ph{aspect-ratio:1/1}.tpi-feat .tx{padding:12px 14px 16px}.tpi-feat .nm{font-size:22px}.tpi-feat .ppl,.tpi-feat .ctg{display:none}.tpi-list{columns:2;column-gap:32px}}
@media (max-width:900px){.tpi-head{padding:32px 16px 0}.tp-grid.tp-one .tp-card{grid-template-columns:1fr}.tp-grid.tp-one .tp-plate{min-height:0}.tp-grid.tp-one .tp-plate img{aspect-ratio:16/10;height:auto}.tp-more-eps{padding:16px 18px}}
@media (max-width:560px){.tpi-list{columns:1}.tpi-list a{font-size:20px;padding:11px 0}.tpi-resth .k-small{display:none}.tpi-sec>.k-h2{margin-bottom:18px}.tpi-resth{margin-top:40px}}
.tp-ph img{position:absolute;inset:24px 24px 24px 0;width:calc(100% - 24px);height:calc(100% - 48px)}
.tp-grid.tp-one .tp-plate{min-height:200px;max-height:260px}
@media (max-width:1100px){.tp-grid.tp-one .tp-plate{max-height:none}}
@media (max-width:900px){.tp-ph img{inset:14px 14px 0 14px;width:calc(100% - 28px);height:calc(100% - 14px)}.tp-grid.tp-one .tp-plate{min-height:0}.tp-grid.tp-one .tp-plate img{height:auto;aspect-ratio:16/10}}
/* ===== T2 "Pick your situation" (Andrew 2026-10-03), topics listed in data/topic-layout.json. Ported from the round 2 board
   (design-r2-2026-10-03 r2.src.css, .r2-pick / .r2-sit / .r2-ep). Hover is the HOVER SYSTEM's (.k-hov, .k-hov-lift), never its own.
   The episode tile reads EPISODE above the number (Andrew: "put 'episode' above number not below"). ===== */
.tp-eyebrow{display:block;color:var(--accent);letter-spacing:.16em}
.tp-pick .k-h2,.tp-sit-h .k-h2,.tp-fq .k-h2{font-size:clamp(30px,2.7vw,38px);line-height:1.12}
.tp-pick .tp-eyebrow{margin-bottom:10px}
.tp-pick .k-h2{margin-bottom:var(--s2)}
.tp-pick .k-lede{max-width:62ch;margin-bottom:var(--s3)}
.tp-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.tp-tiles a{display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:170px;padding:24px 24px 22px;border-radius:var(--r);background:var(--surface);color:var(--heading)}
.tp-tiles a:nth-child(1){background:var(--wine);color:var(--on-photo)}
.tp-tiles a:nth-child(2){background:var(--rasp);color:var(--on-photo)}
.tp-tiles a:nth-child(3){background:var(--surface-soft)}
.tp-tiles a:nth-child(4){background:var(--wine-deep);color:var(--on-photo)}
.tp-tiles b{font:400 28px/1.12 var(--display);text-wrap:balance}
.tp-tiles span{font:700 13px/1.3 var(--body)}
.tp-tiles a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.tp-notsure{margin:var(--s2) 0 0;font-size:17px;line-height:1.5;color:var(--ink-soft);text-wrap:pretty}
.tp-sits{display:flex;flex-direction:column;gap:var(--s6)}
.tp-sit{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:48px;align-items:start;scroll-margin-top:24px}
.tp-sit-h{position:sticky;top:24px;display:flex;flex-direction:column;gap:12px}
.tp-sit-h .tp-eyebrow{color:var(--ink-soft)}
.tp-sit-h p:not(.label){margin:0;font-size:17px;line-height:1.55;color:var(--ink-soft);text-wrap:pretty}
.tp-sit-eps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.tp-ep{display:flex;flex-direction:column;gap:12px;background:var(--surface);border-radius:var(--r);padding:14px;color:inherit}
.tp-ep-top{display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;align-items:start}
.tp-ep-ph{aspect-ratio:4/5;border-radius:12px;background:var(--plate)}
.tp-ep-ph img{display:block;width:100%;height:100%;object-fit:cover}
.tp-eptile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;aspect-ratio:4/5;border-radius:12px;background:var(--wine);color:var(--on-photo)}
.tp-eptile span{font:700 10px/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase}
.tp-eptile b{font:400 38px/1 var(--display)}
.tp-ep-tx{display:flex;flex-direction:column;min-width:0}
.tp-ep h3{font:400 19px/1.2 var(--display);color:var(--heading);margin:0;text-wrap:balance}
.tp-ep .k-meta{display:block;margin-top:6px;font-size:12.5px}
.tp-ep p{margin:0;padding:0 6px 8px;font-size:15px;line-height:1.5;color:var(--ink-soft);text-wrap:pretty}
.tp-alleps .tp-more-eps{margin-top:0}
.tp-fq-list{display:flex;flex-direction:column;gap:10px;margin-top:var(--s2)}
.tp-fq details{background:var(--surface);border-radius:var(--r-sm);padding:0 24px}
.tp-fq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:64px;cursor:pointer;font:400 22px/1.25 var(--display);color:var(--heading)}
.tp-fq summary::-webkit-details-marker{display:none}
.tp-fq summary::after{content:"+";flex:none;font:400 30px/1 var(--body);color:var(--accent);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.tp-fq details[open] summary::after{transform:rotate(45deg)}
.tp-fq details>div{padding:0 0 22px}
.tp-fq details>div p{margin:0;font-size:17px;line-height:1.6;color:var(--ink);max-width:62ch;text-wrap:pretty}
.tp-fq details>div p+p{margin-top:10px}
.tp-fq .by{font-size:14px;color:var(--ink-soft)}
.tp-rel-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0}
.tp-rel-row .label{margin-right:8px;color:var(--ink-soft)}
.tp-rel-row a{display:inline-block;padding:12px 16px;border-radius:999px;background:var(--surface);color:var(--heading);font:700 var(--t-small)/1 var(--body)}
@media (max-width:1100px){.tp-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.tp-sit{grid-template-columns:minmax(0,1fr);gap:20px}.tp-sit-h{position:static}}
@media (max-width:760px){
 .tp-tiles{grid-template-columns:minmax(0,1fr);gap:12px}
 .tp-tiles a{min-height:128px;padding:20px 22px;gap:18px}
 .tp-tiles b{font-size:25px}
 .tp-sit-eps{grid-template-columns:minmax(0,1fr)}
 .tp-sits{gap:var(--s5)}
 .tp-fq details{padding:0 18px}
 .tp-fq summary{font-size:19px}
}

/* ---- page: work-with-me.css ---- */
/* work with me (prefix ww-) */
.ww-head .k-h1{font-size:clamp(44px,5.2vw,72px)}
.ww-head .dph img{object-position:30% 40%}
.ww-acts{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.ww-slot{font-style:italic;color:var(--ink-soft)}
.k-h3.ww-slot{font-style:normal;color:var(--ink-soft)}
.ww-head2{margin-bottom:28px;display:flex;flex-direction:column;gap:8px}
.ww-doors{padding-bottom:40px}
.ww-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.ww-tile{background:var(--surface);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.ww-tile img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ww-tile p{margin:0;padding:22px 22px 26px;font:400 23px/1.2 var(--display);color:var(--heading);text-wrap:balance}
.ww-steps{padding-top:32px;padding-bottom:40px}
.ww-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ww-step{background:var(--surface);border-radius:var(--r);padding:32px 32px 36px;display:flex;flex-direction:column;gap:12px}
.ww-step .n{font:400 44px/1 var(--display);color:var(--accent)}
.ww-step p{margin:0;font-size:17px;line-height:1.55;color:var(--ink-soft)}
.ww-quote{padding-top:32px;padding-bottom:40px}
.ww-quote .pull{max-width:none}
.ww-faq{padding-top:32px;padding-bottom:40px}
.ww-faqbox{background:var(--surface);border-radius:var(--r);padding:48px 52px;display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:48px;align-items:start}
.ww-qs{display:grid;gap:12px}
.ww-qs details{background:var(--bg);border-radius:var(--r-sm);padding:18px 22px}
.ww-qs summary{cursor:pointer;font:400 22px/1.25 var(--display);color:var(--heading);list-style:none;display:flex;justify-content:space-between;gap:16px}
.ww-qs summary::-webkit-details-marker{display:none}
.ww-qs summary::after{content:"+";font:400 26px/1 var(--display);color:var(--accent);flex:none}
.ww-qs details[open] summary::after{content:"\2212"}
.ww-qs details p{margin:12px 0 0;font-size:17px;line-height:1.6}
.ww-invite{padding-top:32px;padding-bottom:88px}
.ww-inv{background:var(--band);color:var(--on-band);border-radius:var(--r);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);overflow:hidden}
.ww-inv .tx{padding:64px 56px;display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.ww-inv .k-h2{color:var(--on-band);max-width:16ch}
.ww-inv .k-lede{color:color-mix(in srgb,var(--on-band) 88%,transparent);max-width:52ch}
.ww-inv .acts{display:flex;gap:12px 20px;align-items:center;flex-wrap:wrap}
.ww-inv .ww-slot{color:color-mix(in srgb,var(--on-band) 70%,transparent);font-size:14px}
.ww-inv .k-small{color:color-mix(in srgb,var(--on-band) 80%,transparent);margin:0}
.ww-inv .k-link{color:var(--on-band);border-bottom-color:color-mix(in srgb,var(--on-band) 40%,transparent)}
.ww-inv .dph{position:relative;min-height:420px}
.ww-inv .dph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
@media (max-width:1000px){.ww-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.ww-three{grid-template-columns:1fr}.ww-faqbox{grid-template-columns:1fr;gap:24px;padding:30px 22px}}
@media (max-width:900px){.ww-inv{grid-template-columns:1fr}.ww-inv .dph{order:-1;min-height:300px}.ww-inv .tx{padding:32px 22px}.ww-invite{padding-bottom:44px}.ww-step{padding:26px 22px}}
@media (max-width:560px){.ww-tiles{grid-template-columns:1fr}}
.ww-quote .pull q{quotes:none}
@media (max-width:560px){.ww-tile img{aspect-ratio:16/9}.ww-tile p{padding:18px 20px 22px}}

/* ---- page: writing.css ---- */
/* writing index (prefix .wi-). THEME CONTRACT: semantic tokens only (--bg --surface --surface-soft --ink --ink-soft --heading
   --accent --line --on-accent --shadow-rgb) plus the fixed brand objects (--btn --plate). No hex, no raw palette. */
.wi-head{padding:48px 44px 8px;display:flex;flex-direction:column;gap:14px;max-width:1240px;margin:0 auto}
.wi-head .k-h1{font-size:clamp(44px,5.4vw,76px)}
.wi-head .k-lede{margin:0;max-width:620px}
.wi-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.wi-chips-l{font:700 12px/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-right:6px}
.wi-chips a{font:700 13px/1 var(--body);padding:9px 14px;border-radius:999px;background:var(--surface);color:var(--heading);text-decoration:none;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s ease,color .2s ease}
.wi-chips a:hover{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent)}
.wi-chips a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.wi-feature{padding:24px 44px 0;max-width:1240px;margin:0 auto}
.wi-feature .lead{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);background:var(--surface);border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit}
.wi-feature .lead:not(:hover){box-shadow:0 24px 50px -34px rgba(var(--shadow-rgb),.55)}   /* resting shadow only: on hover the system lift (.k-hov-lift) supplies it */
.wi-feature .dph{display:block;position:relative;background:var(--plate);min-height:460px;overflow:hidden}
.wi-feature .dph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.wi-feature .dph .cap{position:absolute;left:16px;bottom:16px;background:var(--surface);color:var(--heading);border-radius:999px;padding:9px 14px;font:700 13px/1.2 var(--body)}
.wi-feature .tx{display:flex;flex-direction:column;gap:14px;align-items:flex-start;justify-content:center;padding:44px 48px}
.wi-eyebrow{font:700 12px/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.wi-feature h2{font:400 clamp(30px,3.2vw,46px)/1.06 var(--display);color:var(--heading);margin:0;text-wrap:balance}
.wi-feature p{margin:0;font-size:18px;line-height:1.55;color:var(--ink-soft)}
.wi-feature .meta,.wi-more .meta{font:700 12.5px/1.3 var(--body);color:var(--ink-soft)}
.wi-feature .k-btn{margin-top:6px}

.wi-more{padding:64px 44px 24px;max-width:1240px;margin:0 auto}
.wi-more .cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:26px}
.wi-more a.c{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;background:var(--surface);border-radius:var(--r);padding:14px;text-decoration:none;color:inherit}
.wi-more .dph{display:block;position:relative;aspect-ratio:3/4;border-radius:16px;overflow:hidden;background:var(--plate)}
.wi-more .dph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.wi-more .tx{padding:6px 8px 6px 0;display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.wi-more h3{font:400 25px/1.15 var(--display);color:var(--heading);margin:0;text-wrap:balance}
.wi-more .tx p{margin:0;font-size:15px;line-height:1.5;color:var(--ink-soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wi-more .meta{margin-top:auto;padding-top:4px}
.wi-more .who{font:700 12.5px/1.3 var(--body);color:var(--heading)}

@media (max-width:1000px){
  .wi-feature .lead{grid-template-columns:minmax(0,1fr)}
  .wi-feature .dph{min-height:0;aspect-ratio:4/3}
  .wi-feature .tx{padding:26px 24px 30px}
}
@media (max-width:900px){.wi-head{padding:28px 16px 4px}.wi-feature{padding:16px 16px 0}.wi-more{padding:44px 16px 16px}}
@media (max-width:1100px){.wi-more .cards{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .wi-more a.c{grid-template-columns:104px minmax(0,1fr);gap:14px}
  .wi-more h3{font-size:21px}
  .wi-chips{flex-wrap:nowrap;overflow-x:auto;margin:12px -16px 0;padding:2px 16px 8px;scrollbar-width:none}
  .wi-chips::-webkit-scrollbar{display:none}
  .wi-chips a,.wi-chips-l{flex:none;white-space:nowrap}
}