/* Liquid Assets: shared base. Mona Sans only; the width axis carries the hierarchy. */
@font-face{
  font-family:'Mona Sans';
  src:url('/assets/fonts/Mona-Sans.woff2') format('woff2-variations');
  font-weight:200 900; font-stretch:75% 125%; font-display:swap;
}
:root{
  --bg:#043546; --bg2:#032b39; --deep:#02222d; --raise:rgba(255,255,255,.05);
  --raise2:rgba(255,255,255,.085); --line:rgba(255,255,255,.14); --line2:rgba(255,255,255,.09);
  --head:#eef6f8; --text:#cfe0e4; --text2:#9fb9c0; --muted:#7c9aa4;
  --teal:#3fb9c9; --tealsoft:#7fd3de; --gold:#e0a63a;
  --sans:'Mona Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --wrap:1240px;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;}
a{color:var(--tealsoft);text-decoration:none;}
a:focus-visible,button:focus-visible{outline:2px solid var(--teal);outline-offset:3px;}
img{max-width:100%;display:block;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px;}

/* iOS Safari ZOOMS THE PAGE IN whenever a text field with a computed
   font-size under 16px is focused, and it never zooms back out. Our search
   box was 14px and the two subscribe fields 15px, so one tap on search left
   the whole site enlarged and panned sideways: the logo cut off at the left,
   MENU cut off at the right, and every screen after that looking broken for
   a reason that had nothing to do with the layout. 16px on touch devices,
   and the smaller size kept where there is a real pointer. */
@media (pointer: coarse){
  input[type="search"],input[type="email"],input[type="text"],textarea,select{
    font-size:16px;}
}

/* --- type roles --- */
.kicker{font-variation-settings:'wght' 700,'wdth' 82;font-size:11.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--teal);margin:0;}
/* every small arrow link is a tap target before it is a label */
a.meta,a.big,a.epage{display:inline-flex;align-items:center;min-height:44px;}
.meta{font-variation-settings:'wght' 500,'wdth' 84;font-size:12.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
h1,h2.sec{font-variation-settings:'wght' 800,'wdth' 110;letter-spacing:-.022em;}
h2.sec{margin:0;font-size:clamp(26px,3.3vw,40px);line-height:1.05;
  color:var(--head);text-wrap:balance;}

/* --- photo treatment --- */
.ph{position:relative;overflow:hidden;background:var(--bg2);}
.ph img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,rgba(14,122,140,.46),rgba(2,34,45,.34));
  mix-blend-mode:color;transition:opacity .45s ease;}
.ep:hover .ph::after,.erow:hover .ph::after{opacity:0;}
.ep:hover .ph img,.erow:hover .ph img{transform:scale(1.035);}

/* --- topbar --- */
.topbar{border-bottom:1px solid var(--line2);position:sticky;top:0;z-index:30;
  background:rgba(4,53,70,.93);backdrop-filter:blur(10px);}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;gap:24px;}
.topbar .brand img{height:18px;width:auto;}
.nav{display:flex;gap:30px;}
.nav a{font-variation-settings:'wght' 600,'wdth' 84;font-size:12px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--text2);}
.nav a:hover,.nav a.on{color:var(--teal);}

/* --- play control --- */
.play{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;flex:none;color:var(--head);
  transition:background .25s,border-color .25s,color .25s;}
.play svg{width:13px;height:13px;fill:currentColor;margin-left:2px;}
.play:hover{background:var(--teal);border-color:var(--teal);color:#02222d;}
.play.lg{width:58px;height:58px;background:var(--teal);border-color:var(--teal);color:#02222d;}
.play.lg svg{width:17px;height:17px;}
.play.lg:hover{background:var(--tealsoft);border-color:var(--tealsoft);}

/* --- subscribe row --- */
.subs{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.subs .lbl{font-variation-settings:'wght' 700,'wdth' 82;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}
.subs a{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-variation-settings:'wght' 600,'wdth' 86;font-size:12.5px;
  letter-spacing:.06em;color:var(--text2);
  border:1px solid var(--line2);border-radius:100px;padding:7px 15px 7px 12px;
  transition:border-color .25s,color .25s,background .25s;}
.subs a:hover{color:var(--head);border-color:var(--teal);background:var(--raise);}
.subs svg{width:14px;height:14px;fill:currentColor;flex:none;}

/* --- utility row on an episode --- */
.util{display:flex;gap:16px;flex-wrap:wrap;}
.util a{font-variation-settings:'wght' 600,'wdth' 84;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.util a:hover{color:var(--teal);}

/* --- bands --- */
.band{background:var(--bg);padding:84px 0;border-top:1px solid var(--line2);}
.bhead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  flex-wrap:wrap;margin-bottom:40px;}
.bhead .l{display:flex;flex-direction:column;gap:13px;}

/* --- footer --- */
footer{background:var(--deep);border-top:1px solid var(--line2);padding:66px 0 48px;}
.fgrid{display:flex;justify-content:space-between;gap:44px;flex-wrap:wrap;align-items:flex-start;}
.fb img{height:22px;width:auto;margin-bottom:17px;}
.fb p{margin:0;max-width:33ch;font-size:14.5px;line-height:1.6;color:var(--text2);}
.fc{display:flex;flex-direction:column;gap:11px;}
.fc .h{font-variation-settings:'wght' 700,'wdth' 82;font-size:10.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--muted);margin-bottom:4px;}
.fc a{font-size:14.5px;color:var(--text2);display:inline-flex;align-items:center;
  min-height:44px;}
.fc a:hover{color:var(--head);}
/* The footer's own subscribe column. Wider than a link column because it
   holds a field, and it wraps to full width before the field gets squeezed. */
.fbrief{max-width:320px;min-width:260px;flex:1 1 280px;gap:0;}
.fbrief p{margin:0 0 14px;font-size:14px;line-height:1.55;color:var(--text2);}
.fbot{margin-top:54px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;}

/* --- mockup note --- */
.note{background:var(--bg2);border-top:1px solid var(--line2);padding:32px 0;}
.note .wrap{display:flex;gap:16px;align-items:flex-start;}
.note .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);margin-top:8px;flex:none;}
.note p{margin:0;font-size:13.5px;line-height:1.65;color:var(--muted);max-width:94ch;}
.note b{color:var(--text2);font-variation-settings:'wght' 700,'wdth' 100;}

@media (max-width:640px){
  .wrap{padding:0 20px;}
  .nav{display:none;}
  .band{padding:58px 0;}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;}}

/* ================= topbar ================= */
.wallbar{position:sticky;top:0;z-index:40;background:rgba(4,53,70,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line2);}
.wallbar .in{display:flex;align-items:center;gap:26px;max-width:var(--wrap);
  margin:0 auto;padding:0 32px;height:74px;}
/* sized off the INK, not the canvas: the old asset was 600x72 with only
   222x42 of artwork in it, so a 24px box rendered a 14px mark */
.wallbar .brand img{height:21px;width:auto;}
.search{flex:1;max-width:460px;margin:0 auto;position:relative;}
.search input{width:100%;background:rgba(255,255,255,.07);border:1px solid var(--line2);
  border-radius:100px;padding:11px 18px 11px 42px;color:var(--head);
  font-family:var(--sans);font-variation-settings:'wght' 500,'wdth' 96;font-size:14px;}
.search input::placeholder{color:var(--muted);}
.search input:focus{outline:none;border-color:var(--teal);background:rgba(255,255,255,.1);}
/* 44px hit areas on the two controls that are visually smaller than a thumb.
   Invisible, so nothing in the layout moves. */
.sbtn::before,.wallbar .brand::before{content:"";position:absolute;top:50%;left:50%;
  width:44px;height:44px;transform:translate(-50%,-50%);}
.wallbar .brand{position:relative;}
#menubtn,#listenbtn{min-height:44px;}
/* the Menu pill turns into the close when its panel is open */
#menubtn .lshut{display:none;}
#menubtn[aria-expanded="true"] .lopen{display:none;}
#menubtn[aria-expanded="true"] .lshut{display:inline;}
#menubtn .lshut{font-size:15px;line-height:1;letter-spacing:0;}
#menubtn .ctxt{font-size:11.5px;letter-spacing:.16em;}
@media (max-width:820px){#menubtn .ctxt{display:none;}}
.sbtn{position:absolute;left:16px;top:50%;transform:translateY(-50%);
  display:flex;background:none;border:0;padding:0;cursor:pointer;}
.hplay{position:relative;}
.sbtn svg{width:15px;height:15px;fill:none;stroke:var(--muted);stroke-width:2;}
.wallbar .pill{font-variation-settings:'wght' 700,'wdth' 84;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text2);
  border:1px solid var(--line);border-radius:100px;padding:9px 18px;white-space:nowrap;}
.wallbar .pill:hover{color:var(--head);border-color:var(--teal);}
.wallbar .pill[aria-expanded="true"]{color:var(--head);border-color:var(--teal);
  background:var(--raise);}
.navact{position:relative;display:flex;gap:10px;flex:none;}
button.pill{background:none;cursor:pointer;font-family:var(--sans);}

/* Acquired never hides its mark, but their hero has no wordmark in it: the bar
   is the only place the name appears. Ours puts the logo in the hero at 20vw,
   so at the top of the page we would render the same mark twice, 60px apart.
   The bar's copy fades in as the hero's scrolls out. Default is VISIBLE, and
   JS hides it, so a script that never runs leaves the name on screen. */
@media (min-width:821px){
  .wallbar .brand{transition:opacity .35s ease,transform .35s ease;}
  body.herologo .wallbar .brand{opacity:0;transform:translateY(-4px);
    pointer-events:none;}
}

/* ---- the panels ---- */
.pop{position:absolute;left:0;right:0;top:100%;background:var(--bg2);
  border-bottom:1px solid var(--line2);
  box-shadow:0 24px 48px rgba(0,0,0,.42);}
.pop[hidden]{display:none;}
/* The menu sheet is a sibling of the header, NOT a child of it. .wallbar sets
   backdrop-filter, and a backdrop-filter makes an element the containing block
   for its fixed descendants: a sheet inside it with bottom:0 pins to the bottom
   of the 60px BAR and grows off the top of the screen, which is what happened.
   So it lives outside and pins to the viewport itself. */
/* Measured on Acquired: the menu is not a drop panel, it is a card that takes
   the screen. Theirs is fixed below the bar, inset 16px left and right, running
   to 24px off the bottom, on a solid fill with the page showing at the edges.
   The links are spread down the full height rather than stacked at the top. */
.menupanel{position:fixed;top:86px;left:16px;right:16px;bottom:24px;
  border:1px solid var(--line);border-radius:14px;overflow:auto;z-index:41;}
.menupanel .mp{height:100%;max-width:1160px;align-items:stretch;
  padding:40px 44px 44px;}
/* Acquired fills this height with SEVEN links. Stretching our three to do the
   same job leaves 220px of nothing between each one, so the links keep their
   natural height and the column is closed off at the bottom instead. */
.menupanel .mcol{display:flex;flex-direction:column;height:100%;}
.menupanel .mlinks a{font-size:clamp(34px,3.6vw,52px);padding:22px 4px;}
.menupanel .mfoot{margin-top:auto;padding-top:26px;display:flex;gap:22px;}
.menupanel .mfoot a{font-variation-settings:'wght' 700,'wdth' 84;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text2);}
.menupanel .mfoot a:hover{color:var(--teal);}
.menupanel .mrail{display:flex;flex-direction:column;justify-content:center;}
.menupanel .msubs{display:block;margin-top:34px;}
.menupanel .msubs .subs{display:block;}
.menupanel .msubs .subs a{display:flex;width:100%;margin-top:8px;}
/* the page stays visible at the edges, dimmed, the way theirs does */
.scrim{position:fixed;inset:0;background:rgba(2,34,45,.55);
  backdrop-filter:blur(3px);z-index:39;}
.scrim[hidden]{display:none;}
/* Hung off the button group, not the bar. The bar runs the full width while
   .in is capped at --wrap and centred, so pinning the popup 32px from the
   viewport edge left it stranded far to the right of the pill on a wide
   screen. */
.listenpop{top:calc(100% + 10px);left:auto;right:0;width:280px;
  border:1px solid var(--line);border-radius:10px;padding:8px;}
.listenpop .subs{display:block;}
.listenpop .subs .lbl{display:block;padding:8px 12px 10px;}
.listenpop .subs a{display:flex;width:100%;border:0;border-radius:6px;
  padding:11px 12px;font-size:14.5px;}
.listenpop .subs a:hover{background:var(--raise);}

.mp{max-width:var(--wrap);margin:0 auto;padding:34px 32px 40px;
  display:grid;grid-template-columns:1.4fr .9fr;gap:56px;}
.mlinks{display:flex;flex-direction:column;}
.mlinks a{display:block;padding:18px 4px;color:var(--head);
  border-bottom:1px solid var(--line2);
  font-variation-settings:'wght' 500,'wdth' 104;font-size:30px;line-height:1.1;}
.mlinks a:first-child{border-top:1px solid var(--line2);}
.mlinks a:hover{color:var(--teal);}
.mrail .lbl{margin:0;font-variation-settings:'wght' 700,'wdth' 82;font-size:10.5px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--muted);}
.mrail p.mh{margin:12px 0 0;color:var(--head);
  font-variation-settings:'wght' 600,'wdth' 106;font-size:clamp(21px,2vw,26px);
  line-height:1.2;}
.mrail p.mr{margin:10px 0 20px;font-size:15.5px;line-height:1.55;color:var(--text2);}
/* NOT .cap: that class is already the wall tile's caption, which is absolutely
   positioned and translated out of view until hover. A form wearing it renders
   invisible. */
.subform{display:flex;gap:8px;}
.subform input{flex:1;min-width:0;background:rgba(255,255,255,.07);
  border:1px solid var(--line);border-radius:100px;padding:13px 18px;
  color:var(--head);font-family:var(--sans);font-size:15px;
  font-variation-settings:'wght' 500,'wdth' 98;}
.subform input::placeholder{color:var(--muted);}
.subform input:focus{outline:none;border-color:var(--teal);
  background:rgba(255,255,255,.1);}
.subform .cta{flex:none;border:0;cursor:pointer;font-family:var(--sans);}
@media (max-width:820px){.subform{flex-direction:column;}}
.mrail .cta,.subform .cta{display:block;text-align:center;background:var(--teal);color:var(--deep);
  border-radius:100px;padding:13px 20px;
  font-variation-settings:'wght' 700,'wdth' 88;font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;}
.mrail .cta:hover{background:var(--tealsoft);}
.msubs{display:none;margin-top:26px;}

/* ---- search results ---- */
.sres{position:absolute;left:0;right:0;top:calc(100% + 8px);background:var(--bg2);
  border:1px solid var(--line);border-radius:10px;padding:6px;
  box-shadow:0 24px 48px rgba(0,0,0,.42);max-height:60vh;overflow:auto;z-index:2;}
.sres[hidden]{display:none;}
/* A result carries the guest's face, what the episode is and the line of
   transcript that matched, because a bare list of titles makes you open all
   eight to find out which one meant it. */
.sres a{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;
  padding:10px 12px;border-radius:8px;color:var(--head);
  font-size:14.5px;line-height:1.35;align-items:start;}
.sres a:hover,.sres a.on{background:var(--raise);}
.spic{width:52px;height:52px;border-radius:4px;overflow:hidden;
  background:var(--bg2);display:block;}
.spic img{width:100%;height:100%;object-fit:cover;display:block;}
.spic.mono{display:flex;align-items:center;justify-content:center;
  background:var(--raise);color:var(--muted);font-size:14px;
  font-variation-settings:'wght' 700,'wdth' 84;letter-spacing:.04em;}
.sbody{min-width:0;}
.st{display:block;font-variation-settings:'wght' 600,'wdth' 98;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;}
.sres .sg{display:block;margin-top:4px;font-size:10.5px;color:var(--teal);
  letter-spacing:.1em;text-transform:uppercase;
  font-variation-settings:'wght' 700,'wdth' 80;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* the line of transcript that actually matched */
.sres .ss{display:block;margin-top:5px;font-size:12.5px;line-height:1.45;
  color:var(--text2);font-variation-settings:'wght' 400,'wdth' 96;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;}
.sres .ss mark{background:rgba(63,185,201,.22);color:var(--head);
  border-radius:2px;padding:0 1px;}
/* ---- grouped results ---- */
.sgrp{padding:13px 12px 5px;color:var(--muted);font-size:10px;
  letter-spacing:.17em;text-transform:uppercase;
  font-variation-settings:'wght' 700,'wdth' 80;}
.sgrp i{font-style:normal;color:var(--line);margin-left:3px;}
.sres a.mini{grid-template-columns:38px minmax(0,1fr);gap:10px;padding:8px 12px;}
.spic.sm{width:38px;height:38px;}
.sres a.mini .st{font-size:14px;-webkit-line-clamp:1;}

/* The question, under everything. A different shape from a result because it
   is a different kind of answer: not one of the 68, but all of them. */
/* Stuck to the bottom of the panel. It is the last row in the list and the
   list scrolls, so without this the one thing the panel is offering sat below
   the fold of its own dropdown. */
.sask{position:sticky;bottom:-6px;z-index:2;
  display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;
  align-items:center;margin:6px -6px -6px;padding:11px 18px;
  border-radius:0 0 11px 11px;border-top:1px solid var(--line);
  background:var(--bg2);box-shadow:0 -10px 18px rgba(3,43,57,.9);}
.sask:hover,.sask.on{background:var(--raise);}
.saski{width:38px;height:38px;border-radius:100px;display:flex;
  align-items:center;justify-content:center;background:var(--teal);
  color:var(--deep);font-size:15px;
  font-variation-settings:'wght' 800,'wdth' 90;}
.sask .st{display:block;color:var(--head);font-size:14.5px;
  font-variation-settings:'wght' 700,'wdth' 96;}
.sask .sg{display:block;margin-top:2px;font-size:10.5px;color:var(--muted);
  letter-spacing:.09em;text-transform:uppercase;
  font-variation-settings:'wght' 600,'wdth' 82;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.mtop{display:none;}

.sres .none{padding:14px 12px;color:var(--muted);font-size:14px;}
.sres .sfoot{padding:9px 12px 5px;color:var(--muted);font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;
  font-variation-settings:'wght' 700,'wdth' 80;border-top:1px solid var(--line2);
  margin-top:4px;}

/* ================= MOBILE =================
   The menu and the search both become their own screen rather than a panel
   hanging off a 60px bar. On a phone a sheet that covers the bar also covers
   the control that opened it, so each one carries its own close; and a results
   list that has to share the screen with a keyboard needs the whole screen,
   not 60% of a viewport unit that does not know the keyboard is there. */
@media (max-width:820px){
  .wallbar .in{gap:12px;padding:0 16px;height:60px;}
  /* A full-width search row would make the sticky bar two storeys tall, which
     is 13% of a phone screen spent on chrome. Acquired collapses it to an icon
     and so do we: tapping it takes over the bar, Escape or blur gives it back. */
  .search{flex:none;width:36px;max-width:none;}
  .search input{width:0;padding:0;border-color:transparent;background:none;}
  .sbtn{left:0;}
  body.searching .search{flex:1;width:auto;}
  body.searching .search input{width:100%;padding:9px 14px 9px 38px;
    border-color:var(--teal);background:rgba(255,255,255,.1);}
  body.searching .sbtn{left:13px;}
  body.searching .wallbar .brand,body.searching #menubtn{display:none;}
  /* Full width under the bar, and as tall as the screen actually leaves:
     panel.js measures the VISUAL viewport, which is the only thing that knows
     the keyboard is up. NOT position:fixed, however much it looks like the
     right answer here: the bar carries a backdrop-filter, which makes it the
     containing block for any fixed descendant, so a fixed results panel gets
     trapped inside a 60px bar and resolves to 5px tall. */
  /* one line of transcript, not two: four results with a two-line snippet
     each is a wall of type on a phone */
  .sres .ss{-webkit-line-clamp:1;}
  .sres a{padding:9px 10px;}
  .sres{left:-16px;right:-16px;max-height:none;
    border-radius:0;border-left:0;border-right:0;
    padding:4px 10px 0;box-shadow:0 20px 40px rgba(2,34,45,.6);
    background:var(--bg);}
  #listenbtn{display:none;}          /* folded into the sheet, as Acquired does */

  /* the menu takes the screen, with a close big enough to hit without aiming */
  .menupanel{position:fixed;left:0;right:0;top:0;bottom:0;
    border-radius:0;border:0;height:auto;max-height:none;
    overflow:auto;background:var(--bg);-webkit-backdrop-filter:none;
    backdrop-filter:none;display:flex;flex-direction:column;}
  .mtop{display:flex;align-items:center;justify-content:space-between;
    padding:14px 16px 6px;position:sticky;top:0;background:var(--bg);z-index:2;}
  .mlab{font-variation-settings:'wght' 700,'wdth' 80;font-size:11px;
    letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}
  .mshut{width:46px;height:46px;border-radius:100px;border:1px solid var(--line);
    color:var(--head);font-size:22px;line-height:1;font-family:var(--sans);
    display:flex;align-items:center;justify-content:center;}
  .mshut:active{background:var(--raise);}
  /* the bar is behind the sheet now, so its own controls are not the way out */
  body.menuopen .wallbar{display:none;}
  .menupanel .mp{height:auto;}
  .menupanel .mcol{height:auto;}
  .menupanel .mlinks a{font-size:24px;padding:15px 2px;}
  .menupanel .mfoot{margin-top:18px;padding-top:0;}
  /* The sheet has to fit the screen, not scroll. Measured at 375x812 it ran
     862px of content in a 698px sheet, 164px over. Two cuts close it: the
     newsletter paragraph goes (the headline already makes the offer, and four
     lines of supporting copy is a desktop luxury), and the four listen links
     pair up instead of stacking. That is 214px back, landing around 650. */
  .menupanel .mrail .mr{display:block;}
  .menupanel .mrail .mh{margin-bottom:16px;}
  .menupanel .msubs{margin-top:22px;}
  .menupanel .msubs .subs{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .menupanel .msubs .subs a{margin-top:0;}
  .menupanel .msubs .subs .lbl{grid-column:1 / -1;}
  .mp{gap:22px;}
  .mp{grid-template-columns:1fr;gap:28px;padding:22px 20px 32px;}
  .mlinks a{font-size:24px;padding:15px 2px;}
  .msubs{display:block;}
  .msubs .subs{display:block;}
  .msubs .subs a{display:flex;width:100%;margin-top:8px;}
}

/* ---------- the inline block ---------- */
.subrow{background:var(--bg2);border-top:1px solid var(--line2);
  border-bottom:1px solid var(--line2);}
.subrow .wrap{padding:40px 32px;}
.subrow-in{display:flex;align-items:center;justify-content:space-between;
  gap:34px;flex-wrap:wrap;}
.subrow .lbl{margin:0;font-variation-settings:'wght' 700,'wdth' 82;font-size:10.5px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--muted);}
/* clamp(20px, 2.2vw, 27px) was stuck at its FLOOR on every phone, because
   2.2vw is 9px at 430 wide: the headline never grew while the rest of the
   mobile type did, so the one place the page asks for an email read as the
   smallest thing on the screen. The middle term has to do work at the width
   it is actually read at. */
.subrow .subh{margin:9px 0 0;color:var(--head);
  font-variation-settings:'wght' 600,'wdth' 104;
  font-size:clamp(22px,5.2vw,28px);
  line-height:1.16;letter-spacing:-.012em;max-width:20ch;}
.subrow .subform{flex:1;min-width:280px;max-width:430px;}

/* ---------- the dismissible bar ---------- */
.subbar{position:fixed;left:0;right:0;bottom:0;z-index:45;
  background:rgba(3,43,57,.96);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  transform:translateY(100%);transition:transform .34s cubic-bezier(.2,.8,.2,1);}
.subbar.up{transform:none;}
/* The menu sheet carries its own subscribe form and covers the screen, so a
   second one pinned under it was two asks at once over the same fold. */
body.panelopen .subbar,
.subbar.yield{transform:translateY(100%);}
.subbar[hidden]{display:none;}
.subbar-in{display:flex;align-items:center;gap:20px;max-width:var(--wrap);
  margin:0 auto;padding:14px 32px;}
.subbar p{margin:0;font-size:15px;color:var(--text2);}
.subbar p b{color:var(--head);font-variation-settings:'wght' 700,'wdth' 100;}
.subbar .subform{margin-left:auto;max-width:400px;flex:1;min-width:260px;}
.subx{flex:none;background:none;border:1px solid var(--line);border-radius:100px;
  width:40px;height:40px;color:var(--text2);cursor:pointer;font-size:17px;
  line-height:1;font-family:var(--sans);}
.subx:hover{color:var(--head);border-color:var(--teal);}

@media (max-width:820px){
  .subrow .wrap{padding:30px 16px;}
  .subrow-in{gap:18px;}
  /* flex-BASIS 100%, not width. `flex:1` leaves the basis at 0, so the form
     shrank to share the row with the headline instead of wrapping under it,
     and the field and the button were cut off the right edge of the phone. */
  .subrow .subform{max-width:none;min-width:0;flex:1 0 100%;}
  /* on a phone the bar is one line of text, a field and the dismiss; the
     headline goes, because three stacked rows pinned to the bottom is the
     pattern everyone hates */
  .subbar-in{padding:11px 16px;gap:10px;}
  .subbar p{display:none;}
  .subbar .subform{flex-direction:row;min-width:0;}
  .subbar .subform .cta{padding:13px 16px;}
}


/* ================= ASK =================
   One column, the question at the top, the answer arriving under it and the
   episodes it came from at the bottom. Deliberately not a chat: there is no
   model here, so a conversation UI would be promising something the page
   cannot do. It is a question and what the archive says about it. */
.ask{padding:120px 0 90px;min-height:70vh;}
.ask .wrap{max-width:760px;}
.back{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  color:var(--muted);font-variation-settings:'wght' 700,'wdth' 82;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;}
.back:hover{color:var(--tealsoft);}
#qline{margin:14px 0 0;color:var(--head);
  font-variation-settings:'wght' 700,'wdth' 104;
  font-size:clamp(26px,4vw,42px);line-height:1.12;letter-spacing:-.022em;}
#stat{margin:18px 0 0;color:var(--teal);
  font-variation-settings:'wght' 700,'wdth' 80;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;min-height:17px;}
#ans{margin:26px 0 0;}
#ans p{margin:0 0 20px;font-size:17px;line-height:1.68;color:var(--text);}
#ans p:first-child{color:var(--text2);font-size:15.5px;}
#ans b{color:var(--head);font-variation-settings:'wght' 700,'wdth' 100;}
/* the caret, so the page reads as still writing */
#ans p:last-child::after{content:"";display:inline-block;width:8px;height:1.05em;
  margin-left:3px;vertical-align:-.18em;background:var(--teal);
  animation:blink 1s steps(1) infinite;}
#ans.done p:last-child::after{display:none;}
@keyframes blink{50%{opacity:0;}}

#cites{margin:34px 0 0;padding-top:22px;border-top:1px solid var(--line2);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;}
#cites[hidden]{display:none;}
.cite{display:flex;gap:11px;align-items:center;border:1px solid var(--line2);
  border-radius:10px;padding:10px 12px;background:var(--bg2);
  opacity:0;transform:translateY(10px);
  transition:opacity .34s ease,transform .34s cubic-bezier(.2,.8,.2,1);}
.cite.in{opacity:1;transform:none;}
.cite:hover{border-color:var(--teal);}
.cpic{width:40px;height:40px;border-radius:4px;overflow:hidden;flex:none;
  background:var(--raise);}
.cpic img{width:100%;height:100%;object-fit:cover;}
.cite b{display:block;color:var(--head);font-size:13.5px;line-height:1.25;
  font-variation-settings:'wght' 600,'wdth' 98;}
.cite i{display:block;margin-top:3px;color:var(--muted);font-size:10px;
  font-style:normal;letter-spacing:.1em;text-transform:uppercase;
  font-variation-settings:'wght' 700,'wdth' 80;}

.again{margin:40px 0 0;}
.again .lbl{margin:0 0 10px;color:var(--muted);
  font-variation-settings:'wght' 700,'wdth' 82;font-size:10.5px;
  letter-spacing:.17em;text-transform:uppercase;}
.again form{display:flex;gap:9px;}
.again input{flex:1;min-width:0;background:var(--raise);
  border:1px solid var(--line);border-radius:100px;padding:13px 18px;
  color:var(--head);font:inherit;font-size:15px;}
.again input:focus{outline:none;border-color:var(--teal);}
.again button{border:1px solid var(--teal);background:var(--teal);
  border-radius:100px;padding:13px 22px;color:var(--deep);
  font-variation-settings:'wght' 800,'wdth' 86;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;}
.honest{margin:30px 0 0;color:var(--muted);font-size:13px;line-height:1.6;
  max-width:58ch;}
@media (max-width:820px){
  .ask{padding:92px 0 60px;}
  .again form{flex-direction:column;}
}