/* T Shaw's Progressive Bluegrass — design system
 *
 * Direction (BUILD_BRIEF section 4): 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.
 *
 * This deliberately shares nothing with elbrink.com. Different site, different
 * owner, different feel.
 */

: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}
::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:28px}}

/* A text-led page is a narrower column, not a reading measure floating inside
   a wide frame with full-width elements stacked beneath it. Everything in a
   .narrow page shares one width, so nothing is left looking orphaned. */
.narrow{max-width:700px}
.narrow .prose{max-width:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.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}
.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}

/* ---- 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:52px 0 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:72px 0 56px}
  .hero .tagline{font-size:20px}
}

/* ---- section headers ---- */
.section{padding:40px 0}
/* 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:16px;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. 18 of 41 episodes carry their own artwork, so it is content now,
   not a bullet point. Square is kept deliberately: podcast art is square, and
   stretching it to match a variable row height would crop faces off it. */
.ep-art{width:112px;height:112px;border-radius:var(--radius);border:1px solid var(--rule);
  object-fit:cover;background:var(--paper-2)}
@media(max-width:600px){.ep-art{width:84px;height:84px}}
.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:20px 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{display:flex;gap:6px;flex-wrap:wrap}
.seasons 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{border-color:var(--ink);color:var(--ink)}
.seasons button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ---- video grid ---- */
.lede{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-muted);margin:10px 0 0}
.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}

.foot{border-top:1px solid var(--rule);margin-top:10px;padding:30px 0 44px;
  font-family:var(--sans);font-size:13px;color:var(--ink-muted)}
.foot p+p{margin-top:8px}

/* ---- 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}
#player .close{border:0;width:40px;height:40px;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 ---- */
#vdlg{border:0;padding:0;background:transparent;max-width:min(1120px,94vw);width:100%}
#vdlg::backdrop{background:rgba(26,23,20,.9)}
#vdlg .frame{position:relative;aspect-ratio:16/9;background:#000;
  border-radius:var(--radius);overflow:hidden}
#vdlg iframe{width:100%;height:100%;border:0;display:block}
#vdlg .bar{display:flex;align-items:center;gap:14px;padding:12px 2px;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}
/* 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}}

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