/* T Shaw's Progressive Bluegrass — design system
 *
 * Direction: warm paper, letterpress, a concert poster
 * stapled to a barn wall. Confident and quiet. Cues taken from Trevor's badge:
 * fine engraved line work, dotted arcs, condensed wood-type caps, a waveform,
 * and "SINCE 2010" set between rules.

 */

:root{
  /* Paper */
  --paper:#F5F0E6;
  --paper-2:#EBE4D6;
  --paper-3:#E2D9C7;
  --rule:#D6CBB8;

  /* Ink */
  --ink:#1A1714;
  --ink-2:#4A423A;
  /* Was #7A6F62, which measured 4.32:1 on paper and 3.88:1 on paper-2, both
     below the 4.5:1 needed for body text. This carries dates, durations and
     every section label, so it is real text, not decoration. */
  --ink-muted:#6E6458;

  /* Accent */
  --accent:#9C4A2F;
  --accent-deep:#7E3A23;
  --brass:#C08A3E;

  /* Stage: the player and any dark band */
  --stage:#211C17;
  --stage-text:#F0E9DC;

  /* Nearly square. Rounded corners read as software; this is printed matter. */
  --radius:3px;
  --bar-h:74px;

  --display:'Oswald','Arial Narrow',Impact,sans-serif;
  --serif:'Source Serif 4',Georgia,'Iowan Old Style','Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  --measure:68ch;
  --gut:20px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px));
}
body.has-player{padding-bottom:calc(var(--bar-h) + 28px + env(safe-area-inset-bottom,0px))}

img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-underline-offset:2px}
a:hover{color:var(--accent-deep)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}
::selection{background:var(--brass);color:var(--stage)}

h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.06;
  letter-spacing:.01em;text-transform:uppercase}

.wrap{max-width:940px;margin:0 auto;padding:0 var(--gut)}
/* Interior pages started flush under the nav rule. The homepage never showed
   it because its first child is the hero, which carries its own padding. */
#page > .wrap{padding-top:40px}
@media(max-width:600px){#page > .wrap{padding-top:36px}}

/* A text-led page. Until 2026-09-14 the whole page was a 700px column centred
   under a 940px nav, so its left edge sat 120px in from every other page's.
   Now the frame, labels, rules and tables share the nav's width like every
   other page, and only running text keeps the 660px reading measure, hung off
   the same left edge. Full width would put about 115 characters on a line. */
.narrow .prose{max-width:660px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--paper-2);padding:12px 18px;min-height:44px;
  display:inline-flex;align-items:center;z-index:200;
  border:1px solid var(--ink);border-radius:var(--radius)}

/* ---- the badge's engraved label: text set between hairlines ---- */
/* Left-aligned, with a single rule running to the right. Previously both
   pseudo-elements had flex:1, which centred the label text while every heading
   beneath it stayed left. That mismatch was the thing that made the page feel
   arbitrarily aligned. One rule now: the hero is centred because it is the
   poster; everything else is left because it is reading material. */
.label{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-muted);
  display:flex;align-items:center;gap:14px;
  /* The label had no default gap, so at the top of a page it sat almost
     against the h1 beneath it. Sections already override this. */
  margin-bottom:16px}
.label::after{content:"";height:1px;background:var(--rule);flex:1}
.label.plain::after{display:none}

/* Dotted arc motif from the badge, used as a quiet divider. */
.dotrule{height:1px;background-image:radial-gradient(circle,var(--rule) 1px,transparent 1px);
  background-size:6px 1px;background-repeat:repeat-x;margin:0}

.meta{font-family:var(--sans);font-size:13px;color:var(--ink-muted);letter-spacing:.01em}

/* ---- masthead ---- */
.sitenav{border-bottom:1px solid var(--rule);background:var(--paper)}
.sitenav .inner{max-width:940px;margin:0 auto;padding:0 var(--gut);
  display:flex;align-items:center;gap:26px;min-height:56px}
.sitenav a{font-family:var(--display);font-size:14px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;color:var(--ink-2);
  display:inline-flex;align-items:center;min-height:44px}
.sitenav a:hover{color:var(--ink)}
.sitenav a[aria-current="page"]{color:var(--accent);font-weight:600}
/* A section page, not the page itself: /guests/ is a tab under Podcast. Same
   accent so the visitor can see where they are, without the weight, so it never
   reads as loudly as the current page does. */
.sitenav a[aria-current="true"]{color:var(--accent)}

/* ---- season menu on the Podcast item ---- */
.navgroup{position:relative;display:inline-flex;align-items:center;gap:5px}
.navcaret{display:inline-flex;align-items:center;justify-content:center;
  width:28px;min-height:44px;padding:0;border:0;background:transparent;
  color:var(--ink-muted);cursor:pointer}
.navcaret:hover{color:var(--ink)}
.navcaret svg{width:10px;height:6px;transition:transform .12s}
.navcaret[aria-expanded="true"] svg{transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){.navcaret svg{transition:none}}
.navmenu{position:absolute;top:100%;left:0;z-index:40;margin:0;padding:6px 0;
  list-style:none;min-width:172px;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  box-shadow:0 6px 20px rgba(26,23,20,.13)}
.navmenu a{display:flex;width:100%;padding:0 16px;min-height:40px;
  font-size:13px;letter-spacing:.1em;color:var(--ink-2)}
.navmenu a:hover{background:var(--paper-2);color:var(--ink)}
.navmenu a[aria-current="page"]{color:var(--ink-2);font-weight:500}

/* Narrow screens.
 *
 * No carets. On a phone the destinations already are the menus: Videos opens
 * the chooser, Podcast opens a page whose season filter is the first thing on
 * it. A caret there buys nothing, costs 56px across two of them, and reads as
 * an unexplained mark.
 *
 * The row wraps rather than scrolls. Scrolling would hide nav items off the
 * right edge, where nobody would know to look. Two visible lines beat one line
 * with a secret. */
@media(max-width:700px){
  /* .14em tracking is generous by design, and on a phone it is the difference
     between four nav items and five. .08em is still letterspaced, still reads
     as the display face, and fits Home Podcast Videos Mortgages About on one
     line at 375px with room to spare. Shortening the words was the other
     option; Videos stays plural because that is what Trevor's badge says. */
  .sitenav a{letter-spacing:.08em}
  .sitenav .inner{gap:8px 16px;flex-wrap:wrap;padding-top:4px;padding-bottom:4px}
  .sitenav .inner > a,.sitenav .navgroup{flex:0 0 auto}
  .navcaret{display:none}
}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--display);font-size:14px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;
  min-height:48px;padding:0 24px;cursor:pointer;
  border:1px solid var(--ink);border-radius:var(--radius);
  background:transparent;color:var(--ink);transition:background .14s,color .14s}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.solid{background:var(--ink);color:var(--paper)}
.btn.solid:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn svg{width:15px;height:15px;fill:currentColor}
@media(prefers-reduced-motion:reduce){.btn{transition:none}}

.status{font-family:var(--sans);font-size:14px;color:var(--ink-muted);padding:20px 0}

/* ---- hero ---- */
.hero{text-align:center;padding-block:52px 40px}
.hero .badge{width:min(340px,74vw);margin:0 auto 26px;mix-blend-mode:multiply}
.hero .tagline{font-size:18px;line-height:1.55;color:var(--ink-2);
  max-width:52ch;margin:0 auto 28px}
.hero .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
@media(min-width:700px){
  .hero{padding-block:72px 56px}
  .hero .tagline{font-size:20px}
}

/* ---- section headers ---- */
.section{padding-block:34px}
/* No border here. The label's own rule is the divider; having both produced
   two hairlines a few pixels apart. */
.section > .label{margin-bottom:22px}
.section h2.big{font-size:clamp(30px,6vw,46px);margin-bottom:6px}

/* ---- latest episode feature ---- */
.feature{display:grid;gap:22px;align-items:start}
@media(min-width:720px){.feature{grid-template-columns:236px 1fr;gap:30px}}
.feature .art{border:1px solid var(--rule);border-radius:var(--radius);
  box-shadow:0 1px 0 var(--paper-3);background:var(--paper-2);aspect-ratio:1;object-fit:cover}
.feature h2{font-size:clamp(26px,5vw,38px);margin:8px 0 10px}
.feature .desc{color:var(--ink-2);margin:14px 0 20px;max-width:60ch}
.feature .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ---- compact episode rows ---- */
.eplist{border-top:1px solid var(--rule)}
.ep{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
  padding:20px 0;border-bottom:1px solid var(--rule)}
.ep[data-current="true"]{background:linear-gradient(90deg,rgba(192,138,62,.14),transparent 62%)}
/* Was 66px, then 112px. 18 of 41 episodes carry their own artwork, so it is
   content, not a bullet point.

   Sizes are measured against the text beside them, and the two lists differ.
   The homepage rows are compact, three lines of meta and no description, and
   their text block is 116px. The full episode list carries a title, meta, a
   three-line description and a play button, which is 194px, and 34 of the 41
   episodes clamp to exactly that.

   Still square in both. Stretching square podcast art to whatever height a row
   happened to be would crop its sides, which on the default show art means
   slicing through the badge. A uniform square is what squares up: the seven
   shorter rows in the full list grow to meet the art rather than shrinking it,
   so every row carries an identically sized image.

   These numbers are measured, not chosen. If the row internals change (title
   size, the clamp, the play button height) they go stale and the bottoms
   drift. Re-measure rather than nudging by eye. */
.ep-art{width:116px;height:116px;border-radius:var(--radius);border:1px solid var(--rule);
  object-fit:cover;background:var(--paper-2)}
#episodes .ep-art{width:194px;height:194px}
@media(max-width:860px){#episodes .ep-art{width:150px;height:150px}}
/* 98px on a phone, up from 84. Unlike the desktop list there is no size that
   squares every row, because what varies is the title: it wraps to one, two or
   three lines, which puts the second line of meta at 93, 118 or 143px. 118 is
   the most common at 17 of 41, so 98px art finishes level with the meta on
   those rows and sits close on the rest. */
@media(max-width:600px){.ep-art,#episodes .ep-art{width:98px;height:98px}}
.ep h2,.ep h3{font-family:var(--serif);font-weight:600;text-transform:none;letter-spacing:0;
  font-size:19px;line-height:1.34;margin-bottom:5px}
.ep p{font-size:15.5px;color:var(--ink-2);margin-top:7px;
  /* Some show notes run to a wall of links. Clamp so one long episode cannot
     wreck the rhythm of the list. */
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ep .meta{margin-top:5px}

/* 48px to match .btn exactly. They sit side by side in the latest-episode row
   and a 4px height difference reads as a misalignment. */
.play{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;
  font-family:var(--display);font-size:12px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;padding:0 18px;min-height:48px;min-width:104px;cursor:pointer;
  border:1px solid var(--ink);border-radius:var(--radius);background:transparent;color:var(--ink)}
/* In the feature row .play sits beside .btn in a centred flex line, where its
   own margin-top pushed it 8px lower than its neighbour. The margin exists for
   episode rows, where the button follows a paragraph; it is wrong here. */
.feature .row .play{margin-top:0}
.play:hover{background:var(--ink);color:var(--paper)}
.play[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.play svg{width:13px;height:13px;fill:currentColor}

.rowbar{height:2px;background:var(--rule);margin-top:12px;overflow:hidden;display:none}
.ep[data-current="true"] .rowbar{display:block}
.rowbar i{display:block;height:100%;background:var(--accent);width:0}
/* Brass measured 1.89:1 against the rule track. A progress indicator conveys
   state, so it needs 3:1. Accent gives 3.81:1. Brass stays on the dark player
   bar, where it reads at 5.59:1. */

/* ---- controls ---- */
.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:26px 0 10px}
.controls input[type=search]{font-family:var(--serif);font-size:16px;padding:12px 14px;
  border:1px solid var(--rule);border-radius:var(--radius);background:#FBF8F1;
  color:var(--ink);flex:1 1 240px;min-width:0}
.controls input[type=search]:focus{border-color:var(--ink)}
.seasons,.chips{display:flex;gap:6px;flex-wrap:wrap}
.lbl-short{display:none}
@media(max-width:700px){.lbl-long{display:none}.lbl-short{display:inline}}

/* The year picker. Chips on a wide screen, a native select on a phone, where
   eighteen of them ran to four rows and about 200px of controls before the
   first video. Only one is ever visible; both drive the same state. */
.yrsel{display:none;align-items:center;gap:10px;margin:24px 0 4px}
.yrsel label{font-family:var(--display);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-muted)}
.yrsel select{font-family:var(--display);font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);background:var(--paper-2);
  border:1px solid var(--rule);border-radius:var(--radius);
  min-height:44px;padding:0 12px;flex:1 1 auto;max-width:220px}
.yrsel select:focus{border-color:var(--ink)}
@media(max-width:700px){
  #videos .chips{display:none}
  .yrsel{display:flex}
}
.chips{margin:24px 0 4px}
.seasons button,.chips button{font-family:var(--display);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;padding:0 14px;min-height:44px;cursor:pointer;
  border:1px solid var(--rule);border-radius:var(--radius);
  background:transparent;color:var(--ink-2)}
.seasons button:hover,.chips button:hover{border-color:var(--ink);color:var(--ink)}
.seasons button[aria-pressed="true"],.chips button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ---- mortgages ---- */
.mort-head{margin-top:26px}
@media(min-width:720px){
  .mort-head{display:grid;grid-template-columns:210px 1fr;gap:30px;align-items:start}
  /* With no portrait yet the grid would leave a 240px hole, so the single
     child simply spans. The page reads finished while it waits. */
  .mort-head > .portrait[hidden] + .prose{grid-column:1 / -1}
  /* The bio's first paragraph carries an 18px top margin. Match it so the
     photo's top edge lines up with the first line of text. */
  .mort-head > .portrait{margin-top:18px}
}
.portrait img{width:100%;height:auto;display:block;border:1px solid var(--rule);border-radius:var(--radius)}
/* Below the grid the column is a phone's full width, and a 210px headshot
   stretched to 375px goes soft. Held to its slot size at every width. */
.portrait{max-width:210px}
.cta{margin-top:34px}
/* Compliance furniture, required by Alameda Mortgage. Deliberately quiet and
   deliberately subordinate to Trevor's voice above it: it should read as a
   legal footer, because it is one. */
.disclosure{margin-top:30px;padding-top:18px;border-top:1px solid var(--rule);text-align:center}
.disclosure p{font-family:var(--sans);font-size:12px;line-height:1.6;color:var(--ink-muted);margin:0}
.disclosure .eho{font-weight:500;letter-spacing:.08em;text-transform:uppercase;font-size:11px;
  color:var(--ink);margin-bottom:12px}
/* Pipe-separated rows that wrap rather than overflow. The separator hangs off
   the END of each item except the last, not off the front of the next one.
   Both draw the same pipes on one line, but ::before puts the pipe in the next
   item's box, so a row that wraps on a phone starts its new line with a
   dangling "|". Trailing it keeps every pipe glued to the item it follows. */
.disclosure ul{list-style:none;margin:0 0 8px;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:2px 0}
.disclosure li{font-family:var(--sans);font-size:12px;line-height:1.6;color:var(--ink-muted)}
.disclosure li:not(:last-child)::after{content:"|";padding:0 8px;color:var(--rule)}
.disclosure a{color:var(--ink-muted);text-decoration:underline;text-underline-offset:2px}
.disclosure a:hover{color:var(--ink)}
.disclosure .legal{margin-top:12px;font-size:11px;line-height:1.7;max-width:52ch;
  margin-inline:auto}

/* ---- the archive chooser ---- */
.chooser{display:grid;gap:14px;margin-top:34px}
@media(min-width:720px){.chooser{grid-template-columns:repeat(3,1fr)}}
.tile{display:flex;flex-direction:column;gap:9px;padding:24px;text-decoration:none;
  border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper-2);
  color:var(--ink);transition:border-color .14s,background .14s}
a.tile:hover{border-color:var(--ink);background:var(--paper)}
.tile b{font-family:var(--display);font-size:19px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;line-height:1.1}
.tile span{font-family:var(--serif);font-size:15px;line-height:1.5;color:var(--ink-2)}
.tile.off{opacity:.5;background:transparent;border-style:dashed}
@media(prefers-reduced-motion:reduce){.tile{transition:none}}

/* A show is not a complete concert, so the page says what it is before the
   grid does. */
.note{font-family:var(--serif);font-size:16px;line-height:1.6;color:var(--ink-2);
  max-width:62ch;margin:22px 0 0}

/* ---- video grid ---- */
.lede{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-muted);margin:14px 0 0;line-height:1.5}
.sec{margin-top:38px}
.sec > h2{font-family:var(--display);font-size:15px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-2);
  border-bottom:1px solid var(--rule);padding-bottom:10px;margin-bottom:18px}
.vgrid{display:grid;gap:26px 18px;grid-template-columns:repeat(auto-fill,minmax(224px,1fr))}
.vcard{display:flex;flex-direction:column;text-align:left;padding:0;border:0;
  background:transparent;color:inherit;cursor:pointer;font:inherit}
.vcard .shot{position:relative;aspect-ratio:16/9;background:var(--paper-2);
  border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
.vcard .shot img{width:100%;height:100%;object-fit:cover}
.vcard .dur{position:absolute;right:7px;bottom:7px;background:rgba(26,23,20,.88);color:#fff;
  font-family:var(--sans);font-size:11px;font-weight:600;padding:2px 6px;border-radius:2px}
.vcard .n{position:absolute;left:7px;bottom:7px;background:var(--brass);color:var(--stage);
  font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.06em;
  padding:2px 8px;border-radius:2px}
.vcard b{font-family:var(--serif);font-size:16px;font-weight:600;line-height:1.34;margin-top:10px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.vcard span{font-family:var(--sans);font-size:12px;color:var(--ink-muted);margin-top:5px}
.vcard:hover .shot{border-color:var(--ink)}
.vcard:hover b{color:var(--accent)}

.back{display:inline-flex;align-items:center;gap:7px;min-height:44px;background:transparent;
  border:0;padding:0;cursor:pointer;color:var(--accent);font-family:var(--display);
  font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.more{display:block;margin:30px auto 0;min-height:48px;padding:0 28px;cursor:pointer;
  font-family:var(--display);font-size:13px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;border:1px solid var(--ink);border-radius:var(--radius);
  background:transparent;color:var(--ink)}
.more:hover{background:var(--ink);color:var(--paper)}
.more[disabled]{opacity:.4;cursor:default}
.more[disabled]:hover{background:transparent;color:var(--ink)}

/* ---- follow + footer ---- */
.follow{display:flex;flex-wrap:wrap;gap:10px}
.follow a{display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:0 18px;
  font-family:var(--display);font-size:13px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);
  border:1px solid var(--rule);border-radius:var(--radius)}
.follow a:hover{border-color:var(--ink);background:var(--paper-2)}
.follow svg{width:16px;height:16px;fill:currentColor}

/* 40px above the rule, not 10. Every page carried a footer from 2026-09-11,
   and the three that gained one end in a bare div of runtime content with no
   section padding of its own, so the rule sat almost against the last line.
   The pages that already had a footer end in a section or the compliance block,
   which bring their own space, and read fine with the extra room. */
.foot{border-top:1px solid var(--rule);margin-top:40px;padding-block:30px 44px;
  font-family:var(--sans);font-size:13px;color:var(--ink-muted)}
.foot p+p{margin-top:8px}
/* The site credit. It sits below the copyright, lighter and smaller than it,
   so it reads as a credit and not a billboard. */
.foot .credit{margin-top:14px;font-size:12px;color:var(--ink-muted)}
.foot .credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.foot .credit a:hover{color:var(--ink)}

/* A section that holds nothing but one button. The homepage "More about all
   this" block lost its prose on 2026-09-11 and kept the button, so there is no
   heading above it to hang the spacing off. */
.section.onlybtn{text-align:center;padding-block:10px 34px}

/* ---- docked player ---- */
#player{position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--stage);color:var(--stage-text);
  border-top:1px solid rgba(255,255,255,.14);
  padding-bottom:env(safe-area-inset-bottom,0px);
  transform:translateY(115%);transition:transform .2s ease}
#player[data-active="true"]{transform:none}
/* 24px of grabbable height, not 16. The visible track stays 3px; the rest is
   hit area. On a phone the skip buttons are hidden, so dragging this is the
   only way to seek, and 16px was too thin to be the sole means. 24px is the
   WCAG 2.2 AA target minimum. Only 6px overhangs the bar, so it does not
   swallow taps on the content above. */
#player .seek{-webkit-appearance:none;appearance:none;width:100%;height:24px;
  margin:-6px 0 -6px;background:transparent;display:block;cursor:pointer;
  position:relative;z-index:1}
#player .seek::-webkit-slider-runnable-track{height:3px;background:rgba(255,255,255,.2)}
#player .seek::-moz-range-track{height:3px;background:rgba(255,255,255,.2)}
#player .seek::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;
  border-radius:50%;background:var(--brass);margin-top:-5px}
#player .seek::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:var(--brass)}
#player .inner{display:flex;align-items:center;gap:13px;max-width:940px;margin:0 auto;
  padding:10px var(--gut);height:var(--bar-h)}
#player img{width:48px;height:48px;border-radius:2px;flex:none}
#player .txt{flex:1;min-width:0}
#player .txt b{display:block;font-family:var(--serif);font-size:15px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#player .txt span{font-family:var(--sans);font-size:12px;color:rgba(240,233,220,.62)}
#player button{background:transparent;border:1px solid rgba(255,255,255,.3);color:inherit;
  border-radius:50%;width:44px;height:44px;flex:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center}
#player button:hover{border-color:var(--brass)}
#player button.pp{width:48px;height:48px;background:var(--brass);border-color:var(--brass);color:var(--stage)}
#player button.pp:hover{background:#D09A48}
#player button.sm{width:40px;height:40px;font-family:var(--sans);font-size:10px;font-weight:700}
#player svg{width:18px;height:18px;fill:currentColor}
/* 44px, matching every other touch target on the site. It was 40. */
#player .close{border:0;width:44px;height:44px;font-size:20px;line-height:1;color:rgba(240,233,220,.55)}
#player .close:hover{color:var(--stage-text)}
@media(max-width:640px){
  #player .inner{gap:10px;padding:9px 13px}
  #player .hide-sm{display:none}
}
@media(prefers-reduced-motion:reduce){#player{transition:none}}

/* ---- video lightbox ---- */
/* margin:auto is what centres a native <dialog>. The universal reset at the
   top of this file sets margin:0 on everything, which killed it, so the modal
   was pinned to the top-left corner with its title and Close button lying
   directly over the page behind it. That is what made playback feel like it
   had thrown you somewhere else.
   The panel also needs its own ground: with a transparent dialog the bar text
   had nothing behind it. */
#vdlg{border:0;margin:auto;padding:10px;background:var(--stage);
  border-radius:var(--radius);max-width:min(1120px,94vw);width:100%;
  box-shadow:0 18px 50px rgba(0,0,0,.5)}
#vdlg::backdrop{background:rgba(26,23,20,.92)}
#vdlg .frame{position:relative;aspect-ratio:16/9;background:#000;
  border-radius:2px;overflow:hidden}
#vdlg iframe{width:100%;height:100%;border:0;display:block}
#vdlg .bar{display:flex;align-items:center;gap:14px;padding:12px 4px 4px;color:var(--stage-text)}

#vdlg .bar b{font-family:var(--serif);font-size:16px;font-weight:600;flex:1;min-width:0}
#vdlg .x{background:transparent;border:1px solid rgba(255,255,255,.35);color:var(--stage-text);
  border-radius:var(--radius);min-height:44px;padding:0 18px;cursor:pointer;
  font-family:var(--display);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
#vdlg .x:hover{border-color:var(--brass);color:var(--brass)}

/* Decorative waveform from the badge. Static by necessity, not by choice:
   Web Audio needs CORS and the enclosure redirect sends none. */
.waverule{display:flex;align-items:center;gap:16px;padding:6px 0}
.waverule::before,.waverule::after{content:"";height:1px;background:var(--rule);flex:1}
.wave{fill:var(--brass);opacity:.55;max-width:100%;height:26px}
.feature .desc{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}

/* The badge is the h1. Strip the heading's default box so wrapping it in a
   heading changes semantics without changing the layout. */
.hero h1{margin:0;font-size:0;line-height:0}

/* ---- prose (about) ---- */
.prose{max-width:62ch}
.prose > :first-child{margin-top:18px}
/* A two-sentence block at a 62ch measure leaves most of the column empty and
   reads as a half-filled table cell. Wider measure for the short homepage
   block; the long-form About page keeps the tighter, more readable measure. */
.prose.wide{max-width:none}
.aboutgrid{display:grid;gap:26px;align-items:start}
/* Two columns ONLY once a portrait actually exists. Declaring the second
   column unconditionally would reserve 260px of empty space and make the
   half-filled look worse, not better. */
@media(min-width:760px){
  .aboutgrid:has(img){grid-template-columns:1fr 260px;gap:38px}
}
.aboutgrid img{border:1px solid var(--rule);border-radius:var(--radius);width:100%}
.prose h2{font-size:clamp(22px,4vw,30px);margin:38px 0 12px}
.prose h2:first-of-type{margin-top:26px}
.prose p{margin-bottom:16px}
.prose p:last-child{margin-bottom:0}
.lead{font-size:19px;line-height:1.55}
@media(min-width:700px){.lead{font-size:21px}}

/* Photographs inside the prose. Same hairline rule and near-square corner as
   the mortgage portrait, so a picture on this site reads as something pasted
   onto the page rather than a card floating above it.

   .tall is the standing portrait, held to 400px so it never becomes the whole
   column, and so a 1x screen pulls the 400px file rather than the 800px one.
   The landscape runs the full measure; its stage is the point and cropping or
   shrinking it loses the band. */
.photo{margin:30px 0}
.photo img{border:1px solid var(--rule);border-radius:var(--radius);width:100%}
/* Floated into the prose so the text wraps, which is the whole point of the
   re-crop. 300px leaves roughly a 40-character measure beside it in the 660px
   column: narrow, but it is a few paragraphs, not a chapter.
   Below 640px the column cannot spare the width, so it stops floating and runs
   full bleed like any other figure. */
/* Left. Trevor faces right in the photo, so on the right he
   looked off the page. On the left he looks into the text. */
.photo.float{float:left;width:300px;margin:6px 28px 20px 0}
.photo.float img{margin:0}
@media(max-width:640px){
  .photo.float{float:none;width:auto;margin:24px 0}
}
.photo figcaption{font-family:var(--sans);font-size:13px;color:var(--ink-muted);
  margin-top:9px}

/* ---- guests ---- */
.guests{width:100%;border-collapse:collapse;margin-top:18px}
.guests caption{text-align:left;font-family:var(--sans);font-size:13px;
  color:var(--ink-muted);padding-bottom:12px}
.guests th{font-family:var(--display);font-size:12px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-muted);text-align:left;
  border-bottom:1px solid var(--rule);padding:0 12px 8px 0}
.guests td{padding:13px 12px 13px 0;border-bottom:1px solid var(--rule);vertical-align:top;
  font-size:16px}
.guests td:first-child{font-weight:600;white-space:nowrap}
.guests .aff{font-family:var(--sans);font-size:13.5px;color:var(--ink-2)}
.guests .eps{display:flex;gap:6px;flex-wrap:wrap}
.guests .eps a{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 10px;text-decoration:none;
  border:1px solid var(--rule);border-radius:var(--radius);
  font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink)}
.guests .eps a:hover{border-color:var(--ink);background:var(--paper-2);color:var(--accent)}
@media(max-width:620px){
  .guests thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .guests tr{display:block;border-bottom:1px solid var(--rule);padding:14px 0}
  .guests td{display:block;border:0;padding:0 0 6px}
  .guests td:first-child{white-space:normal;font-size:17px}
}

/* Watch-on-video affordance next to Listen. */
.watch{margin-left:8px}
/* The feature row is a flex line with its own 12px gap, so the margin above
   stacks on top of it and the Play/Watch gap reads 8px wider than the
   Watch/Episode page gap beside it. The margin is for episode rows, which are
   not flex. */
.feature .row .watch{margin-left:0}


/* ---------------------------------------------------------------------------
   PHONE OVERRIDES — keep at the end of this file.
   These were previously declared above the base rules they override. Media
   queries add no specificity, so every one of them lost to a later plain rule
   and silently did nothing: the section padding, the feature gap, the feature
   heading size and the description margins were all dead.
   --------------------------------------------------------------------------- */
@media(max-width:600px){
  /* The compliance footer is dense legal text by design, but four of its items
     are real links, and a 14px-tall tap target on a phone is not usable. Pad
     them to 44px of touch height without changing the type size, which is what
     keeps the block reading as legal furniture rather than navigation. The rows
     get taller here and only here; on a mouse it stays compact. */
  /* A 14px-tall link is not a usable tap target. Padding buys the height
     without touching the type size that keeps the credit quiet.
     Unlike the compliance footer, the negative margin pulls the layout back:
     this is one isolated link with only plain text above and below it, so the
     overhang cannot steal a tap from anything. The compliance rows have four
     links side by side and would have overlapped each other. */
  .foot .credit a{display:inline-block;padding-block:15px;margin-block:-15px}

  .disclosure ul{gap:0}
  .disclosure a{display:inline-block;padding-block:15px}
  .disclosure li:not(:has(a)){padding-block:15px}
  .disclosure li:not(:last-child)::after{align-self:center}

  .hero{padding-block:22px 26px}
  .hero .badge{width:min(340px,62vw);margin-bottom:18px}
  .hero .tagline{font-size:17px;margin-bottom:20px}

  /* Paid twice between sections, so 24 reads as 48px of separation. */
  .section{padding-block:24px}
  .section h2.big{font-size:28px}

  /* Artwork above the text, far smaller than the 236px square it started as.
     Beside the text it squeezed the column to 217px, which broke the title
     over four lines: a narrow column costs more height in wrapped text than
     the image saves by moving out of the way. */
  .feature{grid-template-columns:1fr;gap:12px}
  .feature .art{width:110px}
  .feature h2{font-size:23px;margin:4px 0 8px}
  .feature .desc{margin:10px 0 14px}
  .feature .row{gap:10px}

  /* Portrait phones: take the width back, and stack so a long band name does
     not squeeze Close down to nothing. */
  #vdlg{max-width:96vw;padding:8px}
  #vdlg .bar{flex-direction:column;align-items:stretch;gap:10px;padding:10px 2px 2px}
  #vdlg .bar b{font-size:15px}
  #vdlg .x{width:100%}
}