:root{
  --ink:#131019;--void:#0A0810;--paper:#F1EFE9;--paper-2:#E7E3D9;
  --violet:#6A5CF0;--violet-d:#4f42cf;--coral:#FF5236;--coral-d:#b5371f;
  --gold:#FFB02E;--gold-d:#e8961a;--white:#FCFBF7;--mist:#9A93A7;
  /* AA-safe pairs: --mute is muted text on cream, --coral-t is coral as text
     on cream, --coral-s is coral as a surface carrying white text.
     Both are tuned against --paper-2, the darkest cream, so they clear AA
     on every light surface the site uses. */
  --mute:#676370;--coral-t:#bb321c;--coral-s:#cc422b;
  --line-l:#d8d2c6;--line-d:#2a2433;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Manrope',system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:800;line-height:.98;letter-spacing:-.03em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--coral);color:#fff}
/* skip link: off-screen until a keyboard user tabs to it */
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--gold);color:var(--ink);font-weight:800;padding:.7rem 1.1rem;border-radius:10px;transition:top .15s}
.skip:focus{top:1rem}
main:focus{outline:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.eq{display:inline-flex;align-items:flex-end;gap:4px;height:26px}
.eq i{width:5px;border-radius:3px;display:block}
.eq i:nth-child(1){height:46%;background:var(--violet)}
.eq i:nth-child(2){height:100%;background:var(--coral)}
.eq i:nth-child(3){height:64%;background:var(--gold)}
.eq i:nth-child(4){height:84%;background:var(--violet)}
.eq i:nth-child(5){height:40%;background:var(--coral)}

header{position:sticky;top:0;z-index:60;background:rgba(10,8,16,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-d)}
nav{max-width:1240px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:1rem 1.6rem;gap:1rem}
.brand{display:flex;align-items:center;gap:.7rem;font-family:'Bricolage Grotesque';font-weight:800;font-size:1.15rem;letter-spacing:-.03em;color:var(--white)}
.brand .eq{height:26px}.brand .eq i{width:4px}
.brand .btext{display:flex;flex-direction:column;line-height:1}
.brand .present{font-family:'Manrope',sans-serif;font-weight:800;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:3px}
.brand .bname{font-family:'Bricolage Grotesque';font-weight:800;font-size:1.12rem;letter-spacing:-.03em}
.nav-links{display:flex;align-items:center;gap:1.8rem;list-style:none}
.nav-links a{font-weight:600;font-size:.95rem;color:#c4bdd2}
.nav-links a:hover{color:var(--white)}
.nav-links a.active{color:var(--white)}
.nav-cta{background:var(--coral-s);color:var(--white)!important;padding:.55rem 1.15rem;border-radius:999px;font-weight:700!important}
.nav-cta:hover{background:var(--coral-d)}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;background:none;border:0;cursor:pointer;width:44px;height:40px;padding:0}
.nav-toggle span{display:block;width:24px;height:2.5px;border-radius:2px;background:var(--white);transition:transform .25s,opacity .2s}
header.nav-open .nav-toggle span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
header.nav-open .nav-toggle span:nth-child(2){opacity:0}
header.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* hero (home) */
.hero{background:var(--void);color:var(--white);position:relative;overflow:hidden}
.hero-in{max-width:1240px;margin:0 auto;padding:4.5rem 1.6rem 3.5rem}
.kick{display:inline-flex;align-items:center;gap:.6rem;font-weight:800;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem}
.hero h1{font-size:clamp(2.6rem,6vw,5rem);letter-spacing:-.04em;max-width:16ch;margin-bottom:1.2rem}
.hero h1 em{font-style:normal;color:var(--coral)}
.hero .lead{color:var(--mist);font-weight:500;font-size:clamp(1.05rem,2vw,1.3rem);max-width:44ch;margin-bottom:2.4rem}
.feature{display:grid;grid-template-columns:1.5fr 1fr;gap:1.6rem;align-items:stretch}
.fvid{aspect-ratio:16/9;border-radius:22px;background:linear-gradient(135deg,#2a2350,#130f25);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--line-d)}
.fvid .play{width:82px;height:82px;border-radius:50%;background:var(--coral);border:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.fvid .play:hover{background:var(--coral-d)}
.fvid .cap{position:absolute;left:1.2rem;bottom:1.2rem;right:1.2rem;font-weight:600;font-size:.9rem;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);padding:.7rem .9rem;border-radius:12px}
.fside{display:flex;flex-direction:column;gap:1rem;justify-content:center}
.ftag{display:inline-block;align-self:flex-start;background:var(--gold);color:var(--ink);font-weight:800;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;padding:.35rem .8rem;border-radius:6px}
.fside h2{font-size:1.7rem;letter-spacing:-.025em}
.fside p{color:var(--mist);font-weight:500}
.fside .meta{display:flex;gap:1.5rem;margin-top:.4rem}
.fmore{align-self:flex-start;font-weight:800;font-size:.9rem;color:var(--gold);border-bottom:2px solid currentColor;padding-bottom:1px}
.hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:2.4rem}
.hero-guide{flex:0 0 260px;margin-top:.6rem;display:flex;flex-direction:column;gap:.45rem;padding:1.3rem 1.3rem 1.4rem;border:1px solid var(--line-d);border-radius:18px;background:rgba(255,255,255,.03);transition:border-color .2s,transform .2s}
.hero-guide:hover{border-color:var(--gold);transform:translateY(-3px)}
.hero-guide .hg-k{font-weight:800;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.hero-guide b{font-family:'Bricolage Grotesque';font-size:1.35rem;letter-spacing:-.02em;line-height:1.1}
.hero-guide .hg-p{color:var(--mist);font-weight:500;font-size:.92rem;line-height:1.5}
.hero-guide .hg-go{font-weight:800;font-size:.85rem;color:var(--gold);margin-top:.2rem}
@media(max-width:820px){.hero-top{flex-direction:column;gap:0}.hero-guide{flex:none;width:100%;margin:-1rem 0 2rem;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:.3rem .7rem;padding:.9rem 1.1rem}.hero-guide .hg-k,.hero-guide .hg-p{display:none}.hero-guide b{font-size:1.05rem}}
.fside .meta b{font-family:'Bricolage Grotesque';font-size:1.5rem;display:block;color:var(--white)}
.fside .meta span{font-size:.74rem;color:var(--mist);font-weight:600;text-transform:uppercase;letter-spacing:.05em}

/* press strip - guest credits at the foot of the hero.
   No bullets or dots between the names, deliberately. Any separator drawn
   between wrapped flex items ends up stranded at the end of a line, and CSS
   cannot tell which item is last on a line, so on a phone every single row
   finished with a dangling dot. The wide column gap does the same job. */
.press{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line-d)}
.press-lab{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);margin-bottom:.95rem}
.press-list{list-style:none;display:flex;flex-wrap:wrap;gap:.55rem 2.1rem}
.press-list li{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:800;font-size:clamp(.95rem,1.5vw,1.15rem);letter-spacing:-.015em;color:var(--white)}

/* subscribe strip */
.subs{background:var(--violet-d)}
.subs-in{max-width:1240px;margin:0 auto;padding:1.9rem 1.6rem;display:flex;align-items:center;justify-content:space-between;gap:1.4rem 3rem;flex-wrap:wrap}
.subs-lead{display:flex;flex-direction:column;gap:.55rem;max-width:46ch;min-width:0}
.subs-actions{display:flex;flex-direction:column;align-items:flex-end;gap:.75rem;min-width:0}
.subs-lead>b{color:var(--white);font-family:'Bricolage Grotesque';font-weight:800;font-size:1.5rem;letter-spacing:-.02em;line-height:1.1;max-width:15ch}
.subs .btns{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:flex-end}
.sbtn{background:rgba(255,255,255,.14);color:var(--white);font-weight:700;font-size:.9rem;padding:.6rem 1.1rem;border-radius:999px;border:1px solid rgba(255,255,255,.25);display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap}
.sbtn svg{width:17px;height:17px;flex:none}
.sbtn:hover{background:var(--white);color:var(--violet-d)}

/* generic section */
.sec{max-width:1240px;margin:0 auto;padding:4rem 1.6rem}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:2rem}
.sec-h h2{font-size:clamp(1.9rem,4vw,3rem);letter-spacing:-.03em}
.sec-h p{color:#544d5e;font-weight:500;max-width:34ch}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.card{background:var(--white);border:1px solid var(--line-l);border-radius:22px;overflow:hidden;transition:transform .2s}
.card:hover{transform:translateY(-6px)}
.thumb{aspect-ratio:16/10;position:relative;display:flex;align-items:center;justify-content:center}
/* The gradient stays underneath as a fallback if a photo fails to load.
   The scrim keeps the badges and play button readable over a bright shot. */
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.thumb::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,8,16,.45),rgba(10,8,16,.04) 46%,rgba(10,8,16,.30))}
.thumb .ep,.thumb .soon-tag,.thumb .pl{z-index:2}
.thumb .pl{position:relative}
.thumb.v{background:linear-gradient(135deg,#6A5CF0,#3a2f9e)}
.thumb.c{background:linear-gradient(135deg,#FF5236,#b52c1a)}
.thumb.g{background:linear-gradient(135deg,#FFB02E,#c77f10)}
.thumb .pl{width:54px;height:54px;border-radius:50%;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center}
.thumb .ep{position:absolute;top:.9rem;left:.9rem;background:rgba(0,0,0,.72);color:#fff;font-weight:800;font-size:.72rem;letter-spacing:.04em;padding:.3rem .6rem;border-radius:6px}
.card-b{padding:1.3rem 1.4rem 1.5rem}
.card-b .inst{font-weight:800;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--violet-d)}
.card-b h3{font-size:1.35rem;margin:.35rem 0 .5rem;letter-spacing:-.02em}
.card-b p{color:#544d5e;font-weight:500;font-size:.95rem}

/* ---- episodes not out yet: no link, no lift, muted artwork ---- */
.card.soon{opacity:.72}
.card.soon:hover{transform:none}
.card.soon .thumb{filter:saturate(.45)}
.card.soon .thumb .soon-tag{position:absolute;top:.9rem;left:.9rem;background:rgba(0,0,0,.72);color:#fff;
  font-weight:800;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .6rem;border-radius:6px}
.card.soon .card-b .inst{color:#6b6577}

/* Photo credit on a guest card. Added 28 Oct for Tim Oliver, whose pictures
   come from three different photographers and were supplied on the condition
   that each is credited. Deliberately quiet: it is an obligation, not a
   design feature. */
.photocred{font-size:.72rem;font-weight:600;color:var(--mute);margin-top:.55rem;letter-spacing:.01em}

/* ---- guest named on themes/instruments pages but episode not out yet ---- */
.soon-link{opacity:.62;cursor:default}
.soon-link::after{content:"soon";margin-left:.45em;font-size:.66em;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--coral-t);opacity:.85;vertical-align:.08em}

/* ================================================================
   ONGOING-SERIES STRIP
   Sits under the episode grid so the page reads as a continuing
   series rather than a closed set.
   ================================================================ */
.ongoing{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;
  margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid var(--line-l)}
.ongoing p{margin:0;flex:1 1 22rem;color:#544d5e;font-weight:500;font-size:.98rem;line-height:1.5}
.ongoing p b{color:var(--ink)}
.ongoing-cta{flex:0 0 auto;font-weight:800;font-size:.92rem;color:var(--coral-t);
  text-decoration:none;border-bottom:2px solid transparent;transition:border-color .18s}
.ongoing-cta:hover,.ongoing-cta:focus-visible{border-bottom-color:var(--coral-d)}

/* small equaliser used inline; animation defined in the motion block below */
.eq-mini{display:inline-flex;align-items:flex-end;gap:3px;height:18px;flex:0 0 auto}
.eq-mini i{width:4px;border-radius:2px;display:block;transform-origin:bottom}
.eq-mini i:nth-child(1){height:46%;background:var(--violet)}
.eq-mini i:nth-child(2){height:100%;background:var(--coral)}
.eq-mini i:nth-child(3){height:64%;background:var(--gold)}
.eq-mini i:nth-child(4){height:84%;background:var(--violet)}
.eq-mini i:nth-child(5){height:40%;background:var(--coral)}

/* ================================================================
   MOTION
   Three things move, each for a reason:
   1. the equaliser marks  - the logo is an audio meter, so it reads
                             as audio rather than decoration
   2. scroll reveals       - sequence, so cards arrive as you reach them
   3. hero entrance        - arrival, one time on load
   Everything collapses to static under prefers-reduced-motion.
   ================================================================ */

@keyframes tn-eq{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.5)}}
@keyframes tn-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion: no-preference){

  /* 1. equaliser bars breathe - brand mark and the eq-mini strip */
  .eq i,.eq-mini i{animation:tn-eq 1.5s ease-in-out 3}
  .eq i:nth-child(1),.eq-mini i:nth-child(1){animation-delay:0s}
  .eq i:nth-child(2),.eq-mini i:nth-child(2){animation-delay:.12s}
  .eq i:nth-child(3),.eq-mini i:nth-child(3){animation-delay:.24s}
  .eq i:nth-child(4),.eq-mini i:nth-child(4){animation-delay:.36s}
  .eq i:nth-child(5),.eq-mini i:nth-child(5){animation-delay:.48s}

  /* 2. scroll reveal - .reveal starts hidden, JS adds .in when it enters.
        Scoped to .js-reveal, which reveal.js puts on <html> as it runs, so if
        the script never loads nothing is ever hidden and the page still works. */
  .js-reveal .reveal{opacity:0;transform:translateY(18px);
    transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1)}
  .js-reveal .reveal.in{opacity:1;transform:none}
  /* stagger within a grid */
  .grid .reveal:nth-child(2){transition-delay:.06s}
  .grid .reveal:nth-child(3){transition-delay:.12s}
  .grid .reveal:nth-child(4){transition-delay:.18s}
  .grid .reveal:nth-child(5){transition-delay:.24s}
  .grid .reveal:nth-child(6){transition-delay:.30s}

  /* 3. hero entrance, once, on load */
  .hero-in>*{animation:tn-rise .7s cubic-bezier(.16,1,.3,1) both}
  .hero-in>*:nth-child(2){animation-delay:.08s}
  .hero-in>*:nth-child(3){animation-delay:.16s}
  .hero-in>*:nth-child(4){animation-delay:.24s}
}

/* Static fallback: no animation, nothing hidden. */
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none}
}

/* themes */
/* how to use the site - numbered rows, deliberately not the card grid
   used by .sec above or the chip row used by .themes below */
.pnote{margin-top:.9rem;font-size:.9rem;font-weight:600;color:var(--mist)}
.pnote a{color:var(--white);font-weight:800;border-bottom:2px solid rgba(252,251,247,.35);transition:border-color .18s}
.pnote a:hover,.pnote a:focus-visible{border-bottom-color:var(--white)}
.howto{background:var(--paper-2);border-top:1px solid var(--line-l)}
.howto-in{max-width:1240px;margin:0 auto;padding:4rem 1.6rem}
.howto-in h2{font-size:clamp(1.9rem,4vw,2.8rem);letter-spacing:-.03em;margin-bottom:.6rem}
.howto-sub{color:#544d5e;font-weight:500;max-width:52ch;margin-bottom:2.6rem}
.howto-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem 3.6rem}
.howto-lab{font-family:'Manrope',system-ui,sans-serif;font-size:.78rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mute);padding-bottom:.8rem;margin-bottom:.4rem;border-bottom:1px solid var(--line-l)}
.howto-row{display:flex;gap:1rem;padding:1.4rem 0;border-bottom:1px solid var(--line-l)}
.howto-row:last-child{border-bottom:0;padding-bottom:0}
.howto-n{flex:none;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--violet-d);color:var(--white);
  font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:800;font-size:.9rem;
  display:flex;align-items:center;justify-content:center;margin-top:.1rem}
.howto-body{min-width:0}
.howto-body h4{font-size:1.15rem;letter-spacing:-.02em;margin-bottom:.4rem}
.howto-body p{color:#3a3442;font-weight:500;font-size:.96rem;margin-bottom:.55rem}
.howto-go{display:inline-block;margin-top:.2rem;font-weight:800;font-size:.92rem;color:var(--coral-t);
  border-bottom:2px solid transparent;transition:border-color .18s}
.howto-go:hover,.howto-go:focus-visible{border-bottom-color:var(--coral-t)}
.howto-try{font-size:.78rem!important;font-weight:800!important;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mute)!important;margin:.9rem 0 .5rem!important}
/* the two live examples: real links, styled exactly as they appear on a guest page */
.howto-chap{display:inline-flex;align-items:baseline;gap:.7rem;background:var(--white);border:1px solid var(--line-l);
  border-radius:12px;padding:.7rem .95rem;font-weight:700;font-size:.92rem;transition:border-color .18s}
.howto-chap:hover{border-color:var(--violet)}
.howto-chap b{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:800;color:var(--violet-d);
  font-variant-numeric:tabular-nums}
.howto-chap span{color:#3a3442;font-weight:600}
.howto-demo{display:flex;gap:.4rem;align-items:stretch;max-width:22rem}
.howto-demo>a:first-child{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;
  background:var(--white);border:1px solid var(--line-l);border-radius:12px;padding:.7rem .9rem;font-weight:700;font-size:.92rem;transition:border-color .18s}
.howto-demo>a:first-child span{color:var(--mute);font-weight:600;font-size:.8rem;padding-left:.5rem}
.howto-demo>a:first-child:hover{border-color:var(--violet)}
.howto-at{flex:none;display:flex;align-items:center;justify-content:center;background:var(--white);
  border:1px solid var(--line-l);border-radius:12px;padding:.7rem .85rem;font-weight:800;font-size:.85rem;
  color:var(--violet-d);font-variant-numeric:tabular-nums;transition:border-color .18s}
.howto-at:hover{border-color:var(--violet)}

.themes{background:var(--ink);color:var(--white)}
.themes-in{max-width:1240px;margin:0 auto;padding:4rem 1.6rem}
.themes-in h2{font-size:clamp(1.9rem,4vw,2.8rem);letter-spacing:-.03em;max-width:20ch;margin-bottom:.6rem}
.themes-in .sub{color:var(--mist);font-weight:500;margin-bottom:2rem;max-width:46ch}
.chips{display:flex;flex-wrap:wrap;gap:.8rem}
.chip{border:1px solid var(--line-d);border-radius:999px;padding:.8rem 1.4rem;font-weight:700;font-size:1rem;background:#1c1825;transition:border-color .18s,transform .18s;color:var(--white)}
.chip:hover{transform:translateY(-3px)}
.chip:nth-child(6n+1):hover{border-color:var(--violet)}
.chip:nth-child(6n+2):hover{border-color:var(--coral)}
.chip:nth-child(6n+3):hover{border-color:var(--gold)}
.chip:nth-child(6n+4):hover{border-color:var(--violet)}
.chip:nth-child(6n+5):hover{border-color:var(--coral)}
.chip:nth-child(6n):hover{border-color:var(--gold)}

/* about */
.about-in{max-width:1240px;margin:0 auto;padding:4.5rem 1.6rem;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.about-in h2{font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-.03em;margin-bottom:1.1rem}
.about-in h2 em{font-style:normal;color:var(--coral)}
.about-in p{color:#3a3442;font-weight:500;font-size:1.08rem;margin-bottom:1rem}
.about-art{background:var(--void);border-radius:26px;min-height:280px;display:flex;align-items:center;justify-content:center}
/* The brand mark at display size. Reuses .eq so it can never drift from the
   logo used in the header, the avatar and the podcast cover, and it inherits
   the same bob animation. */
.eq-hero{height:168px;gap:20px}
.eq-hero i{width:24px;border-radius:999px}
@media (max-width:620px){.eq-hero{height:120px;gap:14px}.eq-hero i{width:17px}}

/* founders / who we are */
.whowe{background:var(--ink);color:var(--white)}
.whowe-lbl{font-family:'Manrope';font-weight:800;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:.9rem}
.founders{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.fcardp{background:#1c1825;border:1px solid var(--line-d);border-radius:20px;padding:1.7rem 1.8rem}
.fcardp h3{font-size:1.55rem;color:var(--white);letter-spacing:-.02em}
.fcardp .frole{color:var(--gold);font-weight:700;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;margin:.35rem 0 .9rem}
.fcardp p{color:#c4bdd2;font-weight:500;font-size:.98rem;margin-bottom:.7rem}

/* page hero (interior pages) */
.phero{background:var(--void);color:var(--white)}
.phero-in{max-width:1240px;margin:0 auto;padding:3.4rem 1.6rem 2.6rem}
.crumb{font-weight:700;font-size:.8rem;letter-spacing:.05em;color:var(--mist);text-transform:uppercase;margin-bottom:1.1rem}
.crumb a:hover{color:var(--white)}
.phero h1{font-size:clamp(2.2rem,5vw,3.6rem);letter-spacing:-.03em;margin-bottom:.7rem}
.phero h1 em{font-style:normal;color:var(--coral)}
.phero .plead{color:var(--mist);font-weight:500;font-size:1.1rem;max-width:52ch}

/* episode page */
.eptag{display:inline-flex;gap:.6rem;align-items:center;margin-bottom:1rem}
.eptag span{font-weight:800;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:.3rem .7rem;border-radius:6px}
.epnum{background:var(--gold);color:var(--ink)}
.epinst{background:rgba(255,255,255,.12);color:var(--white);border:1px solid rgba(255,255,255,.2)}
/* why page film. Thirteen minutes, so it sits at the foot of the page and not
   the top: by this point the reader has been through the whole argument and is
   the right person to ask for that long. The runtime is stated in the copy for
   the same reason - an unlabelled thirteen minute embed ambushes people. */
.whyfilm{max-width:760px;margin:0 auto;padding-top:1.8rem;border-top:1px solid var(--line-l)}
.whyfilm-lbl{font-family:'Bricolage Grotesque';font-weight:800;font-size:.95rem;letter-spacing:.05em;text-transform:uppercase;color:var(--coral-t);margin:0 0 1rem}
.whyfilm h2{font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.03em;margin-bottom:.6rem}
.whyfilm-note{color:var(--mute);font-weight:600;margin-bottom:1.4rem}
.whyfilm-note b{color:var(--ink);font-weight:800}

.embed{position:relative;aspect-ratio:16/9;border-radius:22px;background:linear-gradient(135deg,#2a2350,#130f25);border:1px solid var(--line-d);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;color:var(--mist);margin-top:.4rem;overflow:hidden}
.embed .play{width:82px;height:82px;border-radius:50%;background:var(--coral);border:0;display:flex;align-items:center;justify-content:center}
.embed small{font-weight:600;letter-spacing:.02em}
/* The iframe is taken out of the flex flow and pinned to the card.
   As a flex item it was sized from its intrinsic 300x150 on iOS Safari rather
   than stretching, so on an iPhone the video came out narrower than the card
   and sat off to one side. Found on an iPhone 14, 6 Nov 2026. */
.fvid iframe,.embed iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}

/* Click to play. video.js swaps each embed for this still plus our own play
   button, so YouTube's title bar stops covering the quote on the artwork. */
/* video.js sets the layout inline, so a stale cached stylesheet cannot break
   the poster. What is left here is the polish. */
/* The facade is a div, not a button, because the player is laid inside it.
   It stays in normal flow for the life of the page: it is the only thing
   holding the video card open. video.js has the full note. */
.yt-fac{overflow:hidden;display:block;position:relative;width:100%}
.yt-fac .yt-poster{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.yt-fac iframe{position:absolute;left:0;top:0;width:100%;height:100%;border:0;display:block}
.yt-fac .yt-play{transition:background .2s,transform .2s}
.yt-fac:hover .yt-play{background:var(--coral-d);transform:translate(-50%,-50%) scale(1.06)}
/* 72%, not dead centre, because every thumbnail we make puts the pull quote on
   the left and the photo on the right. Centred, the button sat on the words. */
.yt-fac:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
@media(max-width:620px){.yt-fac .yt-play{width:62px;height:62px}.yt-fac .yt-play svg{width:20px;height:22px}}
.ep-wrap{max-width:1240px;margin:0 auto;padding:3.2rem 1.6rem;display:grid;grid-template-columns:1.6fr .9fr;gap:2.6rem;align-items:start}
.ep-main h2{font-size:1.5rem;margin:2rem 0 .8rem;letter-spacing:-.02em}
.ep-main h2:first-child{margin-top:0}
.ep-main p{color:#3a3442;font-weight:500;font-size:1.05rem;margin-bottom:1rem}
.tlist{list-style:none;display:flex;flex-direction:column;gap:.2rem}
.tlist li{display:flex;gap:.9rem;padding:.85rem 0;border-bottom:1px solid var(--line-l)}
.tlist li b{font-family:'Bricolage Grotesque';font-weight:800;color:var(--violet-d);min-width:2.2rem}
.tlist li span{font-weight:500;color:#3a3442}
.tlist li em{font-style:normal;font-weight:700;color:var(--ink);display:block}
/* Chapter list. Every row jumps to that theme in the guest's video, so the
   marker is the timecode rather than a number. Scoped to .chapters so the
   plain .tlist on other pages is untouched. */
.tnote{color:var(--mute);font-size:.88rem;margin:.1rem 0 .6rem}
.tlist.chapters li{padding:0}
.tlist.chapters li a{display:flex;gap:.9rem;width:100%;padding:.85rem .7rem .85rem .2rem;
  border-radius:10px;transition:background .15s}
.tlist.chapters li a:hover{background:var(--paper)}
.tlist.chapters li a:hover em{color:var(--violet-d)}
.tlist.chapters li b{min-width:4rem;font-variant-numeric:tabular-nums}
.tlist.chapters li a::after{content:"\25B8";margin-left:auto;align-self:center;
  color:var(--mute);font-size:.85rem}
.tlist.chapters li a:hover::after{color:var(--violet-d)}
.side{background:var(--white);border:1px solid var(--line-l);border-radius:22px;padding:1.6rem;position:sticky;top:90px}
.side h3,.side h4{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#706a7b;margin:1.2rem 0 .7rem}
.side h3:first-child,.side h4:first-child{margin-top:0}
.side .lk{display:flex;flex-direction:column;gap:.5rem}
.side .lk a{display:flex;align-items:center;gap:.6rem;background:var(--paper);border:1px solid var(--line-l);border-radius:12px;padding:.7rem .9rem;font-weight:700;font-size:.92rem}
.side .lk a svg{width:16px;height:16px;flex:none}
.side .lk a:hover{border-color:var(--violet)}
.side .lk a span{color:var(--mute);font-weight:600;font-size:.8rem;margin-left:auto;padding-left:.5rem}
/* Two links per row: the name goes out to their site, the timecode jumps to
   the moment Matt says it. .side .lk a is (0,2,1) so these have to be at least
   as specific or the pill inherits the full-width row styling. */
.side .lk-timed .row{display:flex;gap:.4rem;align-items:stretch}
.side .lk-timed .row>a:first-child{flex:1;min-width:0}
.side .lk-timed .at{flex:none;display:flex;align-items:center;justify-content:center;
  min-width:4.4rem;padding:.7rem .45rem;background:var(--paper);border:1px solid var(--line-l);
  border-radius:12px;font-weight:700;font-size:.78rem;color:var(--violet-d);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.side .lk-timed .at:hover{border-color:var(--violet);background:#fff}
/* A listening platform we are not on yet. Looks like the real thing,
   deliberately flat and unclickable, so a missing link can never ship
   as a broken one. */
.side .lk .soon{display:flex;align-items:center;justify-content:space-between;
  background:var(--paper);border:1px dashed var(--line-l);border-radius:12px;
  padding:.7rem .9rem;font-weight:700;font-size:.92rem;opacity:.55;cursor:default}
.side .lk .soon span{color:var(--mute);font-weight:600;font-size:.8rem}
.sbtn.soon{opacity:.5;cursor:default;border-style:dashed}
/* RSS copies the feed address rather than opening raw XML. */
.sbtn.copied{background:var(--white);color:var(--violet-d)}
.subs-note{margin:0;font-size:.88rem;line-height:1.5;color:var(--white)}
.subs-note b{color:var(--white);font-weight:700;font-family:inherit;font-size:inherit}
.subs-live{font-size:.85rem;color:var(--gold);font-weight:700;min-height:0;margin:0}
.fact{font-weight:500;color:#3a3442;font-size:.95rem}
.pill{display:inline-block;background:var(--paper-2);border-radius:999px;padding:.3rem .8rem;font-weight:700;font-size:.8rem;margin:.25rem .25rem 0 0}
.epnav{max-width:1240px;margin:0 auto;padding:0 1.6rem 4rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.epnav a{background:var(--white);border:1px solid var(--line-l);border-radius:14px;padding:.9rem 1.3rem;font-weight:700}
/* the 404 reuses .epnav for four ways back in, so the cards need an even
   grid rather than the two content-width cards of a prev/next pair */
.epnav-grid{display:grid;grid-template-columns:repeat(4,1fr);align-items:stretch}
.epnav-grid a{display:flex;flex-direction:column;justify-content:center}
@media(max-width:820px){.epnav-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.epnav-grid{grid-template-columns:1fr}}
.epnav a:hover{border-color:var(--coral)}
.epnav a small{display:block;color:var(--mute);font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}

/* themes page blocks */
.tblock{border-top:1px solid var(--line-l);padding:2.4rem 0}
.tblock:first-of-type{border-top:0}
.tblock .tnum{font-family:'Bricolage Grotesque';font-weight:800;color:var(--coral-t);font-size:.9rem;letter-spacing:.05em}
.tblock h3{font-size:1.7rem;margin:.2rem 0 .5rem;letter-spacing:-.02em}
.tblock p{color:#544d5e;font-weight:500;max-width:60ch;margin-bottom:1rem}
.grow{display:flex;flex-wrap:wrap;gap:.6rem}
/* The pill has to cover .soon-link too. A guest whose episode is not out
   yet is a <span>, not an <a>, so an "a"-only selector left James, Tim,
   Holly and Nadie as bare text sitting next to a row of pills. Same pill,
   no hover, dimmed by .soon-link below. */
.grow a,.grow .soon-link{background:var(--white);border:1px solid var(--line-l);border-radius:999px;padding:.5rem 1rem;font-weight:700;font-size:.9rem}
.grow a:hover{border-color:var(--violet)}
.grow a small,.grow .soon-link small{color:var(--mute);font-weight:600}
/* A theme button that jumps to its chapter on YouTube. The arrow says
   the link leaves the site, which a plain pill does not. */
.grow a.chap::after{content:"\25B8";margin-left:.45rem;color:var(--coral);font-size:.8em}
.grow a.chap:hover{border-color:var(--coral)}

/* footer */
footer{background:var(--ink);color:var(--mist)}
.fcta{background:var(--coral-s);color:var(--white)}
.fcta-in{max-width:1240px;margin:0 auto;padding:2.6rem 1.6rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.fcta h3{color:var(--white);font-size:1.8rem;letter-spacing:-.03em}
.fcta p{color:var(--white);font-weight:500;margin-top:.3rem}
.subform input::placeholder{color:#6f6a78;opacity:1}
.subform{display:flex;gap:.5rem;flex-wrap:wrap}
.subform input{border:0;background:var(--white);color:var(--ink);border-radius:999px;padding:.7rem 1.1rem;font-family:inherit;font-weight:600;min-width:220px}
.subform button{background:var(--white);color:var(--coral-t);border:0;border-radius:999px;padding:.7rem 1.3rem;font-weight:800;font-family:inherit;cursor:pointer}
.subform button[disabled]{opacity:.6;cursor:default}
.submsg{flex-basis:100%;text-align:right;font-weight:700;font-size:.9rem;margin:.6rem 0 0}
.fcta .submsg.ok{color:var(--white)}
.fcta .submsg.err{color:#2A1108}
.fmain{max-width:1240px;margin:0 auto;padding:3rem 1.6rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.fmain .brand{color:var(--white)}
.flinks{display:flex;flex-wrap:wrap;gap:.7rem 1.6rem;font-weight:600;font-size:.95rem}
.flinks a{color:#c4bdd2;display:inline-block;padding:.35rem 0}
.flinks a:hover{color:var(--white)}
.fsocial{display:flex;justify-content:center;gap:.7rem;padding:.2rem 1.6rem 1.5rem}
.fsocial a{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-d);display:flex;align-items:center;justify-content:center;color:#c4bdd2;transition:background .18s,color .18s,border-color .18s}
.fsocial a:hover{color:#fff;background:var(--coral);border-color:var(--coral)}
.fnote{font-size:.8rem;color:#807a8f;text-align:center;padding:0 1.6rem 2rem}

@media(max-width:1160px){
  /* the nav needs more room than the layout grids do, so it breaks earlier.
     Raised from 1080 to 1160 on 19 Oct when "Why" became "Why we made it":
     the longer label wrapped the bar onto two lines between 1080 and 1150,
     which is a real window on a small laptop. The hamburger now takes over
     before that can happen. */
  .nav-toggle{display:flex}
  /* Opaque, not rgba(...,.98). Two per cent of a near-white display heading
     still reads through as legible text behind the menu, and the blur never
     applied to it because the sticky header is already a backdrop root. */
  .nav-links{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--void);border-bottom:1px solid var(--line-d);max-height:0;overflow:hidden;opacity:0;pointer-events:none;padding:0 1.6rem;visibility:hidden;transition:max-height .28s ease,opacity .2s,padding .28s,visibility 0s .28s}
  header.nav-open .nav-links{max-height:80vh;opacity:1;pointer-events:auto;visibility:visible;transition:max-height .28s ease,opacity .2s,padding .28s,visibility 0s;padding:.3rem 1.6rem 1.1rem}
  .nav-links li{width:100%}
  .nav-links a{display:block;padding:.9rem .1rem;font-size:1.05rem;color:#e7e3ef;border-bottom:1px solid rgba(255,255,255,.07)}
  .nav-links a.active{color:var(--white)}
  /* Needs its own padding: '.nav-links a' above is more specific than
     '.nav-cta', so without this the pill inherits .9rem/.1rem and comes out
     55px tall with 1.6px either side of the word. */
  .nav-links a.nav-cta{display:inline-block;width:auto;margin-top:1rem;border-bottom:0;color:var(--white)!important;padding:.7rem 1.6rem;font-size:1rem}
}

@media(max-width:820px){
  .submsg{text-align:left}
  .feature,.about-in,.grid,.ep-wrap,.founders{grid-template-columns:1fr}
  .howto-grid{grid-template-columns:1fr;gap:1.6rem}
  .subs-in{flex-direction:column;align-items:flex-start;gap:1rem}
  .subs-lead>b{font-size:1.3rem;max-width:none}
  .subs-actions{align-items:flex-start;width:100%}
  .subs .btns{justify-content:flex-start}
  .subs-lead{max-width:none}
  .side{position:static}
}

/* link from each theme block to its section on the-numbers page */
.tblock .tnums{display:inline-block;margin:-.3rem 0 1.1rem;font-weight:800;font-size:.88rem;color:var(--coral-t);border-bottom:2px solid var(--gold)}
.tblock .tnums:hover{color:var(--ink)}

/* ---------- theme colour system ----------
   The eight themes carry a fixed colour wherever they appear, so The Money is
   gold on the themes page and gold on the numbers page. Violet, coral and gold
   rotate in order, which keeps any two neighbours apart without anyone having
   to remember an assignment.

   Gold is a fill, never a word. #FFB02E on cream is about 1.9:1, nowhere near
   AA, so every gold element is a solid chip or a bar carrying dark text. Violet
   and coral have darkened variants for the times a word does need colouring.

     --th       bright fill, decorative only, never carries text
     --th-surf  a surface that can carry --th-on text at AA
     --th-ink   the colour a word can safely be on cream
     --th-on    the text colour that sits on --th-surf                         */
.c-v{--th:var(--violet);--th-surf:var(--violet-d);--th-ink:var(--violet-d);--th-on:var(--white);--th-bg:#ECEAFB}
.c-c{--th:var(--coral); --th-surf:var(--coral-s); --th-ink:var(--coral-t); --th-on:var(--white);--th-bg:#FBEAE5}
.c-g{--th:var(--gold);  --th-surf:var(--gold);    --th-ink:var(--ink);     --th-on:var(--ink);  --th-bg:#FCF2DE}

/* --th-bg is a tint of the theme colour, not the colour itself. Eight blocks of
   full-strength violet, coral and gold would be unreadable under a page of
   statistics. These are pulled back far enough that body text clears AA on all
   three (the worst pair is the muted source line at 4.9:1) while staying
   obviously different from each other: the closest two are 8.2 apart in CIELAB,
   where anything over 5 reads as an obvious change of colour. */

/* the numbered chip that replaces a repeated eyebrow label */
.thchip{display:inline-flex;align-items:baseline;gap:.5rem;background:var(--th-surf);
  color:var(--th-on);border-radius:999px;padding:.32rem .85rem .36rem;
  font-weight:800;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.thchip b{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-size:.95rem;
  letter-spacing:.02em;font-weight:800}

/* the theme list uses the same chip and the same colour as the numbers page,
   so a theme looks the same wherever you meet it */
.tblock{position:relative}
.tblock .tnum{margin-bottom:.55rem}
.tblock h3{color:var(--ink);max-width:24ch}  /* same reason as the numbers page: gold is not a word colour */
.grow a:hover{border-color:var(--th,var(--violet))}

/* the theme list becomes colour blocks too, so the two pages feel like one
   place. No wrapper divs were added: each child of a block is given the measure
   directly, which keeps the markup as it was. Only blocks that carry a theme
   colour go full bleed, so instruments.html, which uses .tblock without one,
   is untouched. */
/* padding:0, not just the sides. .sec carries 4rem top and bottom, and leaving
   it on put a 64px band of bare cream between the black hero and the first
   colour block, and another above the footer CTA. The blocks carry their own
   padding, so the colour should run edge to edge and seam to seam. */
.sec:has(> .tblock[class*="c-"]){max-width:none;padding:0}
.tblock[class*="c-"]{background:var(--th-bg);border-top:0;padding:2.8rem 1.6rem 3rem;
  display:grid;grid-template-columns:minmax(0,1188px);justify-content:center}
/* a centred grid column rather than auto margins on each child: the "see the
   numbers" link is inline-block, and auto margins centre an inline-block on
   itself, which threw it out to the page edge */
.tblock[class*="c-"]>.tnums{width:fit-content}
.tblock[class*="c-"]::after{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--th)}

/* ---------- the bars grow to their value ----------
   The only motion worth adding to a page of statistics: a bar that travels to
   its number says the number, which a bar that is simply there does not.

   Written so the width is correct by default and only collapses while the
   script is actually running. If reveal.js throws it strips .js-reveal from
   <html>, this rule stops matching, and every bar is at its true width. The
   figure can never depend on an animation having run. */
@media (prefers-reduced-motion: no-preference){
  .js-reveal .tn-bars .tn-fill{transition:width 1s cubic-bezier(.16,1,.3,1) .12s}
  .js-reveal .tn-bars.reveal:not(.in) .tn-fill{width:0}
  .js-reveal .tn-bars .tn-bar:nth-child(2) .tn-fill{transition-delay:.22s}
  .js-reveal .tn-bars .tn-bar:nth-child(3) .tn-fill{transition-delay:.32s}

  /* the tiles arrive as a pair rather than together with everything else */
  .js-reveal .tn-duo.reveal>*:nth-child(2){transition-delay:.1s}
}