/* 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 opened wall tile.

   The wall is the flagship, so this is where the detail belongs: click a tile
   and it widens across its row, the one you clicked keeps playing at full
   size, and the rest of the wall blurs back around it. It is a stop on the way
   to the episode, not a replacement for it, so the artwork stays a live link:
   first click opens, a click on the picture after that goes to the episode. */
.wall .cell{transition:filter .3s ease,opacity .3s ease;}
.wall.focused .cell:not(.live){filter:blur(3px);opacity:.3;pointer-events:none;}
/* dense, so the tiles the widened one displaces fill the gaps it leaves
   rather than stranding holes halfway down the wall */
.wall.focused{grid-auto-flow:row dense;}

/* grid-column and grid-row are set inline by wallpanel.js, which knows where
   the tile sits and which way it can grow; the span here is only what applies
   if the script never runs. */
.cell.live{grid-column:span 3;aspect-ratio:auto;position:relative;z-index:3;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:22px;
  align-items:center;}
/* the picture is square and the panel is taller, so centre it against the
   panel rather than letting it sit at the top of a half empty column */
/* Both pinned to row 1. Auto-placement never goes backwards, so the mirrored
   layout, which asks for the picture in column 2 and the panel in column 1,
   put the panel on a second row underneath instead of beside it. */
.cell.live .t{aspect-ratio:1/1;grid-column:1;grid-row:1;
  align-self:center;height:auto;}
.cell.live .wexp{grid-column:2;grid-row:1;}
/* Mirrored, for a tile with no room to its right: the panel opens into the
   cells on its LEFT and the picture stays in the cell that was clicked. */
.cell.live.rev{grid-template-columns:minmax(0,2fr) minmax(0,1fr);}
.cell.live.rev .t{grid-column:2;grid-row:1;}
.cell.live.rev .wexp{grid-column:1;grid-row:1;}
.cell.live .t:hover,.cell.live .t:focus-visible{transform:none;}
/* the hover caption said the title and the corner label said the guest; the
   panel says both, larger, so the tile goes back to being just the picture */
.cell.live .cap,.cell.live .lab{display:none;}
/* a mark tile IS the logo, so the panel does not repeat it */
.cell.live .t.mark ~ .wexp .exlogo{display:none;}

.wexp{min-width:0;padding-right:6px;}
.wexp .wguest{display:block;
  font-variation-settings:'wght' 800,'wdth' 80;font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--teal);}
.wexp .wtitle{margin:10px 0 0;color:var(--head);
  font-variation-settings:'wght' 700,'wdth' 100;
  font-size:clamp(20px,2.1vw,29px);line-height:1.14;letter-spacing:-.015em;}
.wexp .exlogo{margin:16px 0 0;}
.wexp .expoints{margin-top:16px;}
.wexp .expoints li{font-size:14.5px;margin-bottom:7px;}
.wexp .exacts{margin-top:16px;}
/* Top right of the whole block in both directions. Mirrored, that lands on
   the picture's corner rather than the panel's, which is where a close belongs
   anyway; moving it to the left put it on top of the guest's name. */
.wshut{position:absolute;top:6px;right:6px;z-index:5;width:38px;height:38px;
  border-radius:100px;border:1px solid rgba(255,255,255,.28);
  background:rgba(2,34,45,.72);backdrop-filter:blur(6px);
  color:var(--text2);cursor:pointer;font-size:16px;line-height:1;
  font-family:var(--sans);}
.wshut:hover{color:var(--head);border-color:var(--teal);}

@media (max-width:1080px){
  .cell.live{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:16px;}
  .cell.live.rev{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);}
}
@media (max-width:760px){
  /* On a phone the opened tile is a SHEET, not a widened cell. Reflowing the
     grid worked and still swallowed the screen: picture, title and bullets all
     arrived at once in a bare column with no frame around them and no way to
     tell what had happened. A sheet off the bottom is a shape a phone already
     knows, it leaves the wall visible behind it so you can see where you came
     from, and it puts the actions under a thumb. */
  .wall.focused .cell:not(.live){filter:none;opacity:.34;}
  .wall.focused::after{content:"";position:fixed;inset:0;z-index:60;
    background:rgba(2,34,45,.62);}
  .cell.live{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:70;
    grid-column:auto !important;grid-row:auto !important;
    display:block;max-height:86dvh;overflow:auto;
    background:var(--bg2);border-radius:18px 18px 0 0;padding:16px 18px 26px;
    box-shadow:0 -18px 50px rgba(0,0,0,.55);
    animation:sheetup .34s cubic-bezier(.2,.8,.2,1);}
  @keyframes sheetup{from{transform:translateY(16%);opacity:.3;}}
  /* the grab handle: says where this came from and where it goes back to */
  .cell.live::before{content:"";display:block;width:40px;height:4px;
    margin:0 auto 14px;border-radius:100px;background:var(--line);}
  .cell.live .t,.cell.live.rev .t{width:112px;max-width:112px;float:left;
    margin:2px 14px 10px 0;aspect-ratio:1/1;}
  .cell.live .wexp,.cell.live.rev .wexp{display:block;padding:0;}
  .wexp .wtitle{font-size:21px;}
  .wexp .expoints{clear:both;padding-top:6px;}
  .wexp .exnav{width:100%;margin-left:0;}
  .cell.live .wshut{top:12px;right:12px;}
}


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


/* ================= 1. HERO =================
   A24's model: one full-bleed still with the episode list stacked over it.
   Hovering a title cross-fades to that episode's image; the list is the whole
   navigation. Three text treatments ride on a body class so they can be
   compared against each other rather than argued about. */
/* Acquired pins the hero and lets the page slide up over it. Measured on their
   site: the hero's inner element is position:fixed and never moves, while the
   next block climbs from +1170 to -1030 as you scroll.
   Only the HERO pins. An earlier attempt made every section sticky, which
   forced each one to be exactly one viewport and is what squashed the wall
   into a rail. Nothing below is constrained here. */
.hero{position:relative;background:var(--deep);
  height:clamp(600px,88vh,940px);}
.hinner{position:absolute;inset:0;overflow:hidden;z-index:0;
  display:flex;flex-direction:column;justify-content:flex-end;}
@media (min-width:821px){
  .hinner{position:fixed;top:0;left:0;right:0;
    height:clamp(600px,88vh,940px);}
  /* everything after the hero rides over it, so each needs its own opaque ground */
  /* Every section below the hero has to be lifted above it, because the hero
     is position:fixed at z-index 0 and anything left on the default stacking
     level shows it through. .subrow was added later and missed this, which is
     why the subscribe block read as transparent. */
  .wallsec,.thesis,.eps,.band,.subrow,.note,footer{position:relative;z-index:2;}
}
.hstage{position:absolute;inset:0;}
.hstage picture{display:contents;}
/* the active episode's own line, sitting above the list */
.hdescs{position:relative;margin-bottom:24px;max-width:58ch;}
/* whose photograph it is, small, in the corner, the way Acquired credits theirs */
.hcreds{position:absolute;right:32px;bottom:22px;z-index:3;text-align:right;}
.hcr{display:none;margin:0;font-variation-settings:'wght' 500,'wdth' 84;font-size:9.5px;
  letter-spacing:.13em;text-transform:uppercase;color:rgba(238,246,248,.42);}
.hcr.on:not(:empty){display:block;}
.hdx{display:none;margin:0;font-size:15.5px;line-height:1.56;color:var(--text2);}
.hdx.on{display:block;}
.hl{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .75s ease;}
.hl.on{opacity:1;}
/* Weighted off the LOCAL worst case, not the band average. The average passed
   on every still, but a bright patch behind a stroke is what the eye catches:
   the light shaft on the tap-water plate put the description at 3.62 against a
   4.5 requirement. These stops take the worst case to 6.65. */
.hscrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(2,34,45,.97) 0%,rgba(2,34,45,.93) 26%,
             rgba(2,34,45,.74) 48%,rgba(2,34,45,.30) 70%,rgba(2,34,45,.40) 100%);}

.hfoot{position:relative;z-index:2;width:100%;max-width:var(--wrap);
  margin:0 auto;padding:0 32px 54px;
  display:flex;flex-direction:column;align-items:flex-start;}

/* the episode list */
.hlist{list-style:none;margin:0;padding:0;width:100%;}
.hrow{display:flex;align-items:baseline;gap:14px;padding:3px 0;}
.hrow a{font-variation-settings:'wght' 500,'wdth' 108;
  /* sized so the longest title still sits on one line, now that the date has
     gone and given the line its width back */
  font-size:clamp(18px,2.85vw,38px);line-height:1.13;letter-spacing:-.024em;
  color:rgba(238,246,248,.42);transition:color .3s ease;}
.hrow.on a,.hrow:hover a{color:var(--head);}
/* hierarchy comes from colour and size, never from a second weight */
.hplay{width:0;opacity:0;overflow:hidden;flex:none;height:26px;align-self:center;
  display:grid;place-items:center;border-radius:50%;background:var(--teal);
  color:#02222d;transition:width .3s ease,opacity .3s ease,margin .3s ease;}
.hplay svg{width:9px;height:9px;fill:currentColor;margin-left:2px;}
/* A 26px control is under the 44px a thumb needs. Rather than grow it and
   change the look, it gets an invisible 44px hit area centred on it, which
   costs nothing in layout. The .sbtn half of this rule moved to bar.css when
   the bar became shared, or the archive's search button would not have one. */
.hplay::before,.hdots button::before{content:"";position:absolute;top:50%;left:50%;
  width:44px;height:44px;transform:translate(-50%,-50%);}
.hdots button{position:relative;}
.hrow.on .hplay,.hrow:hover .hplay{width:26px;opacity:1;margin-right:2px;}
.hplay:hover{background:var(--tealsoft);}

.hbig{position:absolute;z-index:2;left:0;right:0;top:0;
  max-width:var(--wrap);margin:0 auto;padding:96px 32px 0;
  color:var(--head);}
/* The wordmark is the real asset, never the name re-typeset. Setting it in Mona
   at any weight is a lockup we invented, and the logo's own face is the thing
   that identifies the show. Capped at its native 600px so it never softens. */
/* the real artwork is 222px wide. Past that it is upscaling, so this sits
   just above native and the softness is held to about 1.2x. */
.hh1{margin:0;font-size:0;line-height:0;}
.hlogo{display:block;width:clamp(190px,20vw,268px);height:auto;}
/* the name, then one plain line saying what it is. Epidemic Sound's shape, and
   the answer to a first-time visitor rather than a slogan at them. */
.hsub{display:block;margin-top:16px;
  font-variation-settings:'wght' 500,'wdth' 100;
  font-size:clamp(14px,1.35vw,18px);line-height:1.45;letter-spacing:0;
  color:var(--text2);}
/* C gives width to the sentence, so the titles come down a step rather than wrap */


/* the hero advances on its own; the dots say how far through and give a phone
   something to tap, since there is no hover there */
.hdots{display:none;gap:7px;margin-top:20px;}
.hdots button{width:26px;height:3px;border-radius:2px;background:rgba(255,255,255,.22);
  padding:0;position:relative;overflow:hidden;}
.hdots button span{position:absolute;inset:0;width:0;background:var(--teal);}
.hdots button.on span{width:100%;transition:width linear;}
.hdots button.on.hold span{transition:none;width:100%;}

@media (max-width:820px){
  /* Netflix's shape: the art on top, everything else below it on solid ground.
     A list over the image cannot survive a portrait frame. */
  .hero{height:auto;display:block;}
  .hinner{position:static;display:block;overflow:visible;}
  .hstage{position:relative;height:40vh;min-height:270px;}
  .hscrim{height:40vh;min-height:270px;
    background:linear-gradient(to top,var(--deep) 1%,rgba(2,34,45,.72) 26%,
               rgba(2,34,45,.34) 52%,rgba(2,34,45,.06) 78%);}
  .hfoot{position:relative;align-items:stretch;
    padding:18px 20px 30px;background:var(--deep);}
  /* the sticky nav already shows the mark at this size, so the hero shows the
     line only; two identical logos 320px apart reads as a bug on a phone */
  .hbig{position:absolute;top:auto;bottom:0;left:0;right:0;z-index:3;margin:0;
    padding:0 20px 16px;}
  .hlogo{display:none;}
  .hsub{margin-top:0;font-size:15px;color:var(--head);}
  .hdescs{margin-bottom:14px;}
  .hcreds{right:20px;bottom:auto;top:calc(40vh - 20px);}
  .hdx{font-size:14.5px;}
  .hlist{position:relative;}
  .hrow{position:relative;align-items:center;gap:0;
    padding:0 0 0 34px;border-top:1px solid var(--line2);}
  .hrow:first-child{border-top:0;}
  /* the padding belongs to the LINK, not the row: with it on the row, two
     thirds of every row was dead space that looked tappable and was not */
  .hrow a{display:block;padding:14px 0;
    font-size:clamp(19px,5.3vw,25px);line-height:1.18;}
  .hplay{position:absolute;left:0;top:50%;margin-top:-13px!important;width:26px;opacity:1;margin:0;align-self:auto;}
  .hdots{display:flex;}
  .hrow:not(.on) .hplay{opacity:.34;}
}



/* ================= 2. THE WALL: faces and marks =================
   Acquired's wall is two tile types and neither is episode artwork: a flat
   brand colour carrying the real logo, and a face from the actual interview.
   Deliberate holes in the lattice, not a filled mosaic, which is what makes the
   tiles read as objects. Ours is the same idea with the ratio inverted, because
   these episodes are about people more than companies. */
/* the wall had a top pad and no bottom one, so the last row of tiles sat hard
   against the next section and read as cropped rather than finished */
.wallsec{background:var(--bg);padding-top:64px;padding-bottom:72px;}
.filters{display:flex;flex-wrap:wrap;gap:0 14px;margin:18px 0 0;
  font-variation-settings:'wght' 800,'wdth' 106;
  font-size:clamp(24px,3.1vw,40px);line-height:1.12;letter-spacing:-.022em;}
.filters a{color:rgba(159,185,192,.36);transition:color .25s ease;}
.filters a:hover{color:var(--text2);}
.filters a.on{color:var(--head);}

/* wider than the 1240 reading column on purpose, but still a contained block:
   flush to the window edge read as accidental rather than bled. */
/* minmax(0,1fr), never 1fr: a track's default min-width is auto, so the
   opened tile's panel can stretch its column and push the whole wall wider
   than the window. */
.wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;
  max-width:1560px;margin:0 auto;padding:0 32px;}
/* No entrance animation. On Acquired the wall IS the hero, so revealing it on
   scroll is the first thing you see; here it sits BELOW the hero, and a wall
   that fades in only once you reach it gives no reason to go looking. It is
   simply there, so the page reads as having more below the fold. */
.cell{aspect-ratio:1/1;}

.t{position:relative;display:block;width:100%;height:100%;border-radius:6px;
  overflow:hidden;background:var(--bg2);
  transition:transform .42s cubic-bezier(.2,.75,.2,1),box-shadow .42s ease;}
.t:hover,.t:focus-visible{transform:translateY(-7px);
  box-shadow:0 20px 44px rgba(0,0,0,.5);}
.t img,.t video{width:100%;height:100%;object-fit:cover;display:block;}
/* Video only. Where a phone refuses to autoplay, under Low Power Mode or with
   Safari's Auto-Play set to Never, the tiles hold their poster frame. That is
   the trade for not carrying a second 780KB rendition of every clip. */
/* a face tile with no footage still has to answer the cursor, or it reads
   as broken next to the ones that move */
.t.face img{transition:transform .8s cubic-bezier(.2,.7,.2,1);}
.t.face:hover img{transform:scale(1.06);}

/* mark tiles: flat ground, the real reverse art, generous breathing room */
.g1{background:#02222d;} .g2{background:#032b39;} .g3{background:#08414f;}
.lite{background:#eef4f6;}
.t.mark{display:grid;place-items:center;}  /* no padding: the width % is of the tile */
.t.mark img{height:auto;max-height:64%;object-fit:contain;}  /* width set per mark */

/* the one always-on label, Acquired's move: small, quiet, top right */
.lab{position:absolute;top:11px;right:12px;z-index:3;max-width:74%;text-align:right;
  font-variation-settings:'wght' 600,'wdth' 82;font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(255,252,245,.66);}
.lite .lab{color:rgba(2,34,45,.52);text-shadow:none;}
/* a mark sits on flat colour, a face sits on a photo that may be bright */
.face .lab{text-shadow:0 1px 7px rgba(2,34,45,.85),0 0 2px rgba(2,34,45,.6);}

/* the title stays out of the way until you reach for the tile */
/* a band at the foot of the tile, not a cover: you hover to see the face move */
.cap{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:44px 12px 12px;
  background:linear-gradient(to top,rgba(2,34,45,.97) 26%,rgba(2,34,45,.72) 62%,transparent);
  transform:translateY(101%);opacity:0;
  transition:transform .42s cubic-bezier(.2,.75,.2,1),opacity .3s ease;}
.t:hover .cap,.t:focus-visible .cap{transform:translateY(0);opacity:1;}
.cap .ti{display:block;font-variation-settings:'wght' 700,'wdth' 98;font-size:13px;
  line-height:1.2;letter-spacing:-.008em;color:var(--head);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
.cap .og{display:block;margin-top:6px;font-variation-settings:'wght' 700,'wdth' 80;
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);}

.seeall{display:flex;justify-content:space-between;align-items:center;
  gap:20px;flex-wrap:wrap;margin-top:46px;padding-top:26px;
  border-top:1px solid var(--line2);}
.seeall a.big{font-variation-settings:'wght' 800,'wdth' 92;font-size:clamp(20px,2.4vw,30px);
  letter-spacing:-.015em;color:var(--head);}
.seeall a.big:hover{color:var(--tealsoft);}

/* ================= 4. RECENT EPISODES =================
   Acquired shows two or three playable cards and then sends you to the archive,
   rather than listing the catalogue. The player is the point: you can hear the
   episode without leaving the page. */
.eps{background:var(--bg2);border-top:1px solid var(--line2);}
/* The whole card is the link: the anchor on the title stretches over the card,
   so the artwork and the date go to the episode too. The play button and the
   explicit link sit above it so they keep their own jobs. */
.ecard{position:relative;}
.ecard .ecover::after{content:"";position:absolute;inset:0;z-index:1;}
.ecard .ecover{color:inherit;}
.ecard:hover .ecover{color:var(--tealsoft);}
/* z-index only on the play button: it is already absolutely positioned and
   centred on the artwork, and making it relative dropped it out of the art
   entirely. The link below the title is static, so it does need a position
   to sit above the stretched anchor. */
.ecard .pbtn{z-index:2;}
.ecard .epage{position:relative;z-index:2;}
.eps .wrap{padding-top:72px;padding-bottom:78px;}
.ehead{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-bottom:30px;}
.ehead .big{font-variation-settings:'wght' 800,'wdth' 92;font-size:clamp(19px,2.2vw,27px);
  letter-spacing:-.015em;color:var(--head);}
.ehead .big:hover{color:var(--tealsoft);}
.ecards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.ecard{display:flex;flex-direction:column;}
.ecard .art{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:4px;
  background:var(--deep);}
.ecard .art img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.ecard:hover .art img{transform:scale(1.04);}
.pbtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  background:rgba(2,34,45,.6);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.3);color:var(--head);
  transition:background .25s ease,transform .25s ease,border-color .25s ease;}
.pbtn svg{width:16px;height:16px;fill:currentColor;margin-left:3px;}
.pbtn:hover{background:var(--teal);border-color:var(--teal);color:#02222d;
  transform:translate(-50%,-50%) scale(1.07);}
.ecard .emeta{margin:16px 0 0;font-variation-settings:'wght' 600,'wdth' 82;
  font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);}
.ecard h3{margin:9px 0 0;font-variation-settings:'wght' 700,'wdth' 102;
  font-size:19px;line-height:1.18;letter-spacing:-.014em;color:var(--head);}
.ecard .epage{display:inline-block;margin-top:13px;align-self:flex-start;}
.ecard h3{flex:1;}
.ecard .epage{
  font-variation-settings:'wght' 700,'wdth' 84;font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--teal);}
.ecard .epage:hover{color:var(--tealsoft);}

/* ================= 3. THESIS ================= */
/* every section that rides over the pinned hero needs its own opaque ground,
   or the hero shows through it */
.thesis{background:var(--bg2);border-bottom:1px solid var(--line2);}
.thesis .wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:64px;
  align-items:center;padding-top:84px;padding-bottom:84px;}
.thesis h2 b{color:var(--teal);font-weight:inherit;font-variation-settings:'wght' 800,'wdth' 112;}
.thesis h2{margin:20px 0 0;font-variation-settings:'wght' 800,'wdth' 112;
  font-size:clamp(36px,5.6vw,80px);line-height:.95;letter-spacing:-.028em;
  color:var(--head);text-wrap:balance;}
.thesis .sub{margin:26px 0 0;max-width:46ch;font-size:17.5px;line-height:1.6;color:var(--text2);}
.thesis .sub b{color:var(--head);font-variation-settings:'wght' 700,'wdth' 100;}
.thesis .who{margin-top:18px;display:flex;gap:22px;flex-wrap:wrap;align-items:center;}
/* padded to a thumb's height rather than sized to the text */
.thesis .who a{display:inline-flex;align-items:center;min-height:44px;}
.thesis .who a{font-variation-settings:'wght' 700,'wdth' 84;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--teal);}
.portrait .ph{aspect-ratio:1/1;border-radius:2px;}
/* The mirroring is baked into img/ravi-asking.jpg, NOT done here: the parallax
   writes img.style.transform on every frame and an inline style beats a rule in
   the sheet, so a scaleX(-1) in CSS lasts exactly until the first scroll. The
   frame as shot is kept beside it as ravi-asking-src.jpg. He is looking
   frame-right in it, which on a text-left layout is looking off the page. */
.portrait .cap{margin-top:12px;font-variation-settings:'wght' 500,'wdth' 82;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}

/* ================= 4. CUT AND SLICE ================= */
.hubs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line2);
  border:1px solid var(--line2);margin-top:6px;}
.hubc{background:var(--bg);padding:26px 22px 24px;display:flex;flex-direction:column;
  gap:9px;min-height:172px;}
.hubc:hover{background:var(--raise);}
/* .hn/.hd, not .t/.d: `.t` is already the WALL TILE, which carries
   background:var(--bg2) and a radius, so a theme name wearing it rendered with
   a dark slab behind the words. Same trap as the newsletter form and `.cap`. */
.hubc .hn{font-variation-settings:'wght' 600,'wdth' 102;font-size:19px;
  color:var(--head);line-height:1.2;}
.hubc .hd{font-size:14.5px;line-height:1.5;color:var(--text2);
  font-variation-settings:'wght' 400,'wdth' 96;}
/* the archive card closes the grid rather than leaving the eighth cell showing
   the grid's own ground, which read as a tile that had failed to load */
.hubc.all .hn{color:var(--tealsoft);}
.hubc.all::after{content:"\2192";margin-top:auto;color:var(--tealsoft);font-size:18px;}
.hubc:hover .t{color:var(--tealsoft);}
.orglab{font-variation-settings:'wght' 700,'wdth' 84;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--teal);margin:44px 0 18px;}
.orglist{display:flex;flex-wrap:wrap;align-items:baseline;
  font-variation-settings:'wght' 600,'wdth' 96;font-size:clamp(15px,1.7vw,21px);
  line-height:1.5;color:var(--text2);}
.orglist span{white-space:nowrap;}
.orglist i{font-style:normal;color:var(--muted);padding:0 12px;}


/* ================= persistent player =================
   Acquired's rides the bottom of every page once you start something. One
   audio element for the whole document, so the hero taster and a card can
   never play over each other. */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(2,34,45,.94);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  transform:translateY(0);transition:transform .38s cubic-bezier(.2,.75,.2,1);}
.dock[hidden]{display:block;transform:translateY(102%);pointer-events:none;}
.din{max-width:1560px;margin:0 auto;padding:11px 32px;
  display:flex;align-items:center;gap:18px;}
.dart{width:46px;height:46px;border-radius:3px;object-fit:cover;flex:none;background:var(--bg2);}
.dtxt{display:flex;flex-direction:column;gap:4px;min-width:0;width:23%;}
.dt{font-variation-settings:'wght' 700,'wdth' 98;font-size:13.5px;color:var(--head);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dm{font-variation-settings:'wght' 600,'wdth' 80;font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;}
.dscrubwrap{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;}
.dscrub{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;
  background:rgba(255,255,255,.16);cursor:pointer;}
.dscrub::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;
  background:var(--teal);border:0;cursor:pointer;}
.dscrub::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--teal);border:0;}
.dtime{display:flex;justify-content:space-between;
  font-variation-settings:'wght' 500,'wdth' 80;font-size:10px;letter-spacing:.11em;
  color:var(--muted);font-variant-numeric:tabular-nums;}
.dctl{display:flex;align-items:center;gap:12px;flex:none;}
.dctl button{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  color:var(--text2);transition:color .2s ease,background .2s ease;}
.dctl button:hover{color:var(--head);background:var(--raise);}
.dctl svg{width:19px;height:19px;fill:currentColor;}
.dplay{width:42px!important;height:42px!important;background:var(--teal)!important;
  color:#02222d!important;}
.dplay svg{width:14px;height:14px;}
.dplay:hover{background:var(--tealsoft)!important;}
.dclose{flex:none;color:var(--muted);font-size:20px;line-height:1;padding:4px 2px;}
.dclose:hover{color:var(--head);}
body.docked{padding-bottom:70px;}

/* show-level subscribe, in the hero and again in the footer */
.subs.foot{margin-bottom:40px;padding-bottom:34px;border-bottom:1px solid var(--line2);}
.fsubs{padding-left:32px;padding-right:32px;}

@media (max-width:860px){
  .dtxt{display:none;}
  .din{padding:10px 18px;gap:12px;}
  .dctl{gap:6px;}
}

@media (max-width:1100px){
  .wall{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:0 24px;}
  .ecards{grid-template-columns:repeat(2,1fr);gap:20px;}
  .feat .body{grid-template-columns:1fr;gap:34px;}
  .feat .cover{max-width:380px;}
  .thesis .wrap{grid-template-columns:1fr;gap:40px;}
  .portrait{max-width:360px;}
  .hubs{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:620px){
  /* flex-wrap left the two link columns hanging off the brand block at
     whatever width they happened to be; a grid lands them on a shared axis */
  .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:34px 24px;}
  .fb{grid-column:1 / -1;}
  .subs.foot{gap:10px;}
  .subs.foot .lbl{flex-basis:100%;margin-bottom:2px;}
  /* two columns puts "Climate, Energy & Agriculture" on three lines in a 160px
     card; one column gives each theme a readable measure */
  .hubs{grid-template-columns:1fr;}
  .hubc{min-height:0;padding:22px 20px;}
  /* the search used to be dropped entirely below this width; it now collapses
     to the icon in the bar instead, because it is meant to become the way in
     to the catalogue rather than a decoration that phones can do without */
  /* the two ends of the scrubber label collide at this width */
  .ptime{flex-direction:column;align-items:flex-start;gap:5px;}
  .feat .wrap{padding-top:44px;padding-bottom:50px;}
  .wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 20px;}
  .ecards{grid-template-columns:1fr;gap:26px;}
  .heroacts{gap:16px;}
}