/* 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 opened row.
   Not an overlay. The row you click rises out of the list, its portrait comes
   back into colour, and everything else blurs back. Next and previous move
   DOWN the list rather than cycling in a modal, so the page works like a
   jukebox: the same rail, the same rows, one of them lifted and playing. */

/* ---- everything else recedes ---- */
.arch.focused .rail,
.arch.focused .ahead,
.arch.focused .erow:not(.live){
  filter:blur(3px);opacity:.38;
  transition:filter .3s ease,opacity .3s ease;
  pointer-events:none;}
.arch .rail,.arch .ahead,.arch .erow{transition:filter .3s ease,opacity .3s ease;}
.arch.focused .erow.live{position:relative;z-index:3;}

/* ---- the row itself ---- */
.erow.live{background:var(--bg2);border-radius:12px;border-bottom-color:transparent;
  box-shadow:0 26px 60px rgba(0,0,0,.45);
  transform:translateY(-4px);
  transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s ease;}
/* The portrait grows when the row opens, and its GRID COLUMN has to grow with
   it. It did not, so the 92px picture overflowed a 64px track, ate the 18px
   gap and sat on the first letter of the guest's name. */
/* The close button is absolutely positioned over this header and nothing
   reserved room for it, so the title ran underneath it: 38px of overlap at
   375 wide, straight through "Utilities Are Careful for a | Reason". The
   portrait is its own grid track, so padding the link only moves the text
   column, which is the one that collides. */
.erow.live > a{padding:24px 72px 14px 24px;grid-template-columns:92px minmax(0,1fr);}
.erow.live .eport{width:92px;height:92px;}
.erow > a{transition:grid-template-columns .3s ease;}
.eport{transition:width .3s ease,height .3s ease;}
/* the portrait comes back to life */
.erow.live .eport img{content:var(--colour,none);}
.erow.live .etitle{color:var(--head);}
.erow.live .eblurb{display:none;}

/* ---- what unfolds under it ---- */
.exp{overflow:hidden;max-height:0;opacity:0;
  transition:max-height .36s cubic-bezier(.2,.8,.2,1),opacity .22s ease;}
/* a fallback only: panel.js measures the panel and overrides this inline,
   so a tall one is never clipped. Scripts off, the content still shows. */
.erow.live .exp{max-height:none;opacity:1;}
.exp-in{padding:4px 24px 26px 134px;}
/* Constrained on BOTH axes, not height alone. Burnt Island Ventures is a
   three-line stacked wordmark at 937x588; pinned to a 26px height it
   became 41px wide and the three lines were unreadable. Capping width
   lets a squat mark stand taller and a wide one stay short. */
.exlogo{max-height:44px;max-width:170px;height:auto;width:auto;
  margin-bottom:16px;opacity:.92;display:block;}
.expoints{margin:0;padding:0;list-style:none;max-width:62ch;}
.expoints li{position:relative;padding-left:18px;margin-bottom:9px;
  font-size:15.5px;line-height:1.55;color:var(--text);}
.expoints li::before{content:"";position:absolute;left:0;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--teal);}
.exacts{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:20px;}
.exacts a,.exacts button{font-family:var(--sans);cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  border:1px solid var(--line);border-radius:100px;padding:11px 18px;
  background:none;color:var(--text2);font-size:12.5px;
  font-variation-settings:'wght' 700,'wdth' 86;letter-spacing:.11em;
  text-transform:uppercase;white-space:nowrap;}
.exacts a:hover,.exacts button:hover{color:var(--head);border-color:var(--teal);}
.exacts .prime{background:var(--teal);border-color:var(--teal);color:var(--deep);}
.exacts .prime:hover{background:var(--tealsoft);color:var(--deep);}
.exnav{display:flex;gap:8px;margin-left:auto;}
.exnav button{width:44px;height:44px;padding:0;justify-content:center;font-size:15px;}
.exshut{position:absolute;top:14px;right:16px;z-index:4;width:38px;height:38px;
  border-radius:100px;border:1px solid var(--line);background:rgba(2,34,45,.5);
  color:var(--text2);cursor:pointer;font-size:16px;line-height:1;
  font-family:var(--sans);}
.exshut:hover{color:var(--head);border-color:var(--teal);}
.exaud{width:100%;max-width:430px;margin-top:16px;height:36px;display:none;}
.erow.live .exaud.on{display:block;}

@media (max-width:820px){
  .erow.live > a{padding:18px 62px 12px 16px;grid-template-columns:72px minmax(0,1fr);}
  .exp-in{padding:2px 16px 22px;}
  .erow.live .eport{width:72px;height:72px;}
  .exacts{gap:8px;}
  .exacts a,.exacts button{padding:10px 14px;font-size:11.5px;}
  .exnav{margin-left:0;width:100%;}
  .arch.focused .erow:not(.live){filter:blur(2px);opacity:.3;}
}

/* ---------- 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;}
}


.arch{display:grid;grid-template-columns:232px minmax(0,1fr);gap:56px;
  padding-top:52px;padding-bottom:88px;align-items:start;}

/* ---------- left rail ---------- */
.rail{position:sticky;top:90px;display:flex;flex-direction:column;gap:30px;}
.rgrp{display:flex;flex-direction:column;gap:2px;}
.rgrp .h{font-variation-settings:'wght' 700,'wdth' 80;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin-bottom:9px;}
.rgrp a{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:7px 10px;border-radius:3px;
  font-variation-settings:'wght' 500,'wdth' 92;font-size:13.5px;color:var(--text2);
  transition:background .2s,color .2s;}
.rgrp a:hover{background:var(--raise);color:var(--head);}
.rgrp a.on{background:var(--raise2);color:var(--head);
  font-variation-settings:'wght' 700,'wdth' 92;}
.rgrp a .n{font-variation-settings:'wght' 700,'wdth' 78;font-size:11.5px;
  color:var(--gold);font-variant-numeric:tabular-nums;flex:none;}

/* ---------- rows ----------
   Name first, then what they said. No thumbnail: the back catalogue's art is
   16:9 title cards with the type burned in, so a square crop cuts the title,
   and the styles are unrelated episode to episode. No blurb either: the Ghost
   excerpts ran 145-183 characters and were what made each row 263px tall. */
.ahead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid var(--line);}
.erow{border-bottom:1px solid var(--line2);}
.erow > a{display:grid;grid-template-columns:64px minmax(0,1fr);gap:18px;
  align-items:start;padding:22px 16px 22px 0;}
.eport{width:64px;height:64px;border-radius:3px;overflow:hidden;flex:none;
  background:var(--bg2);display:block;}
.eport img{width:100%;height:100%;object-fit:cover;display:block;}
/* the guests we have no portrait of yet: same size, same shape, deliberate */
.eport.mono{display:flex;align-items:center;justify-content:center;
  background:var(--raise);color:var(--muted);
  font-variation-settings:'wght' 700,'wdth' 84;font-size:17px;letter-spacing:.04em;}
.etext{display:block;min-width:0;}
.erow:hover{background:var(--raise);}
.eguest{display:block;margin-bottom:9px;
  font-variation-settings:'wght' 800,'wdth' 80;font-size:11px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--teal);}
.etitle{display:block;font-variation-settings:'wght' 600,'wdth' 104;
  font-size:clamp(20px,2.3vw,27px);line-height:1.16;letter-spacing:-.014em;
  color:var(--head);}
.erow:hover .etitle{color:var(--tealsoft);}
/* two lines, clamped: enough to judge the episode from the list, not enough
   to set the height of the row */
.eblurb{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;margin-top:8px;font-size:14.5px;line-height:1.5;
  color:var(--text2);max-width:74ch;}
.emeta{display:block;margin-top:10px;
  font-variation-settings:'wght' 600,'wdth' 84;font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);}
.emeta .nb{white-space:nowrap;}

@media (max-width:900px){
  /* minmax(0,1fr), not 1fr: a grid track's default min-width is auto, so the
     scrolling chip row stretched the column to the width of all eight chips
     and took the whole page with it (viewport read 1432px on a 375px phone). */
  .arch{grid-template-columns:minmax(0,1fr);gap:26px;padding-top:28px;}
  .rail,.rgrp{min-width:0;max-width:100%;}
  /* The rail was a 326px vertical list that pushed the first episode to y=461,
     so a phone scrolled a screen and a half before reaching any content. It
     becomes one scrolling line of chips. */
  .rail{position:static;}
  .rgrp{flex-direction:row;gap:8px;overflow-x:auto;padding-bottom:6px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .rgrp::-webkit-scrollbar{display:none;}
  .rgrp .h{display:none;}
  .rgrp a{flex:none;border:1px solid var(--line);border-radius:100px;
    padding:9px 15px;gap:7px;white-space:nowrap;}
  .rgrp a.on{border-color:var(--teal);}
}
@media (max-width:620px){
  .erow > a{padding:18px 0;}
}

/* the archive's list without its rail */
.arch.solo{grid-template-columns:minmax(0,1fr);}
.arch.solo .ahead{margin-bottom:6px;}