/* Design system lifted from the Adventurers Log artifact (claude/page_template.html) — the
   owner did a lot of iterative design work there and asked for it to carry over. Kept
   faithfully: the full semantic token set, the three-way dark-mode pattern (bare :root,
   prefers-color-scheme, explicit [data-theme] so a manual toggle wins in both directions),
   the three typefaces, and the episode "bib" badge that makes an episode number look like a
   race number. */
:root{
  --bg:#F5F5FB; --surface:#FFFFFF; --surface-2:#FBEBD1;
  --ink:#403F79; --ink-soft:#6A6996; --ink-faint:#9997BE;
  --line:#E1DFF0; --line-strong:#C6C3E2;
  --accent:#F2A31E; --accent-ink:#2E2D63;
  --confirm:#2C6E58; --confirm-bg:#E4F0EA;
  --focus:#1B5FBF; --navy:#403F79;
  /* Review-state colours are declared here so the editing app and the public site share one
     palette file, but they are NEVER applied to a public page. The owner's rule: the editing
     side signals review state (light red = not yet reviewed, light green = reviewed); the
     public side is apricot and purple only, because a visitor has no use for our workflow. */
  --review-open:#F6D6D6; --review-open-ink:#8A2B2B; --review-open-line:#E9B3B3;
  --review-done:#D8EEDD; --review-done-ink:#245C38; --review-done-line:#AFD9BC;
  --shadow:0 1px 2px rgba(43,42,90,.08),0 4px 14px rgba(43,42,90,.07);
  --font-display:"Big Shoulders Display","Arial Narrow",sans-serif;
  --font-body:"Work Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#15141F; --surface:#1E1D33; --surface-2:#3D2C12;
    --ink:#ECEBF7; --ink-soft:#B4B2D6; --ink-faint:#7E7BA8;
    --line:#322F52; --line-strong:#453F6E;
    --accent:#FFB84D; --accent-ink:#241C08;
    --confirm:#57B896; --confirm-bg:#1D3830;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.28);
  }
}
:root[data-theme="dark"]{
  --bg:#15141F; --surface:#1E1D33; --surface-2:#3D2C12;
  --ink:#ECEBF7; --ink-soft:#B4B2D6; --ink-faint:#7E7BA8;
  --line:#322F52; --line-strong:#453F6E;
  --accent:#FFB84D; --accent-ink:#241C08;
  --confirm:#57B896; --confirm-bg:#1D3830;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html{text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
a{color:var(--accent)}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--accent-ink);
  padding:.6rem 1rem;z-index:20;font-weight:600}
.skip:focus{left:0}
header.site{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.top-inner{max-width:62rem;margin:0 auto;padding:12px 20px 10px;display:flex;
  align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brandwrap{display:flex;align-items:center;gap:11px;text-decoration:none}
.logo{border-radius:9px;border:1px solid var(--line);display:block;flex:0 0 44px}
.eyebrow{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);margin:0 0 2px;display:block}
.brand{font-family:var(--font-display);font-weight:800;font-size:1.35rem;line-height:1;
  letter-spacing:-.01em;margin:0;text-decoration:none;color:var(--ink);display:block}
header.site nav{max-width:62rem;margin:0 auto;padding:0 20px 9px;display:flex;gap:14px;
  flex-wrap:wrap;font-size:13px;font-weight:500}
header.site nav a{color:var(--ink-soft);text-decoration:none;border-bottom:2px solid transparent;padding-bottom:3px}
header.site nav a:hover,header.site nav a:focus-visible{color:var(--ink);border-bottom-color:var(--accent)}
header.site nav a[aria-current]{color:var(--ink);border-bottom-color:var(--accent)}
/* Link back to the rest of the 5kadventures.net apps, matching the sibling sites' convention.
   Pushed to the right so it reads as leaving this app, not as another section of it. */
header.site nav .offsite{margin-left:auto;color:var(--ink-faint)}
header.site nav .offsite:hover{color:var(--accent);border-bottom-color:transparent}
#theme-toggle{font:inherit;font-size:12px;padding:3px 10px;border-radius:999px;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-soft);cursor:pointer}
#theme-toggle:hover{color:var(--ink);border-color:var(--accent)}
main{max-width:62rem;margin:0 auto;padding:20px 20px 80px}
h1{font-family:var(--font-display);font-weight:800;font-size:clamp(1.5rem,3vw,2rem);line-height:1.05;
  letter-spacing:-.01em;margin:0 0 6px;text-wrap:balance}
h2{font-family:var(--font-display);font-weight:700;font-size:1.3rem;letter-spacing:-.005em;
  margin:2rem 0 .6rem;padding-bottom:.3rem;border-bottom:1px solid var(--line)}
h3{font-size:1rem;font-weight:600;margin:0 0 .25rem}
.dek{color:var(--ink-soft);font-size:13px;margin:0 0 1rem;max-width:62ch}
.meta{color:var(--ink-faint);font-size:12px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:.8rem 1rem;margin:.55rem 0;box-shadow:var(--shadow)}
.card h3 a{text-decoration:none;color:var(--ink)}
.card h3 a:hover{color:var(--accent)}
ul.clean{list-style:none;padding:0;margin:0}
/* episode row: the bib badge is the signature element — an episode number as a race number */
.row{display:flex;align-items:stretch;margin:.55rem 0}
.bib{flex:0 0 74px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:1.55rem;font-variant-numeric:tabular-nums;
  background:var(--accent);color:var(--navy);border-radius:8px 0 0 8px;border:1px solid var(--accent);
  letter-spacing:-.02em;text-decoration:none}
.bib small{font-size:.5em;font-family:var(--font-mono);font-weight:500;letter-spacing:.04em}
/* the one-off bonus episode: a star, not a number, so it never reads as episode 5959 */
.bib.special{flex-direction:row;gap:4px;background:var(--surface-2);color:var(--navy);
  border:1px dashed var(--line-strong);font-size:1.15rem}
.bib.special small{font-size:.62em}
.row:hover .bib.special{background:var(--navy);border-color:var(--navy);color:var(--accent)}
.row .card{flex:1 1 auto;border-left:none;border-radius:0 8px 8px 0;margin:0;box-shadow:none}
.row:hover .bib{background:var(--navy);border-color:var(--navy);color:var(--accent)}
.tag{display:inline-block;background:var(--surface-2);color:var(--ink);border:1px solid var(--line-strong);
  border-radius:999px;padding:.1rem .65rem;font-size:12px;margin:.15rem .25rem .15rem 0;text-decoration:none}
.tag:hover{border-color:var(--accent)}
.tag.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
/* Transcript availability tags. Two tiers, and the difference matters to the audience this
   site is for: "Transcript" is raw machine output with numbered speakers, "Enhanced
   transcript" has been through the editing pass — real names, sound cues, segment headings.
   The enhanced tag is filled so it reads as the stronger signal at a glance. */
.tag.tier{font-weight:600;letter-spacing:.01em}
.tag.tier-enhanced{background:var(--accent);color:var(--navy);border-color:var(--accent)}
.tag.tier-machine{background:transparent;color:var(--ink-soft);border-color:var(--line-strong);
  border-style:dashed}
.legend{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center;font-size:12px;
  color:var(--ink-soft);margin:.2rem 0 1rem}
.legend .tag{margin:0 .35rem 0 0}
/* Episode head: artwork left, show notes to its right, transcript below. Collapses to a
   single column on narrow screens, where the artwork leads. */
.ep-head{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:1.1rem;
  align-items:start;margin:.9rem 0 1.4rem}
@media (max-width:640px){.ep-head{grid-template-columns:1fr}}
.ep-art{margin:0}
.ep-art img{width:100%;height:auto;display:block;border-radius:10px;border:1px solid var(--line);
  box-shadow:var(--shadow);background:var(--surface-2)}
.ep-art figcaption{font-size:11px;color:var(--ink-faint);margin-top:.35rem}
/* No artwork for this episode: an on-brand placeholder rather than a broken frame or a
   stock image that says nothing. Purely decorative, so it carries no alt text. */
.ep-art .placeholder{aspect-ratio:1;border-radius:10px;border:1px solid var(--line-strong);
  background:var(--surface-2);display:flex;flex-direction:column;align-items:center;
  justify-content:center;color:var(--navy);font-family:var(--font-display);font-weight:800}
.ep-art .placeholder b{font-size:2.6rem;line-height:1;font-variant-numeric:tabular-nums}
.ep-art .placeholder span{font-family:var(--font-mono);font-weight:500;font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;margin-top:.3rem}
.ep-notes h2{margin-top:0}
.ep-notes h3.alt-notes{font-family:var(--font-display);font-weight:700;font-size:1.05rem;
  margin:1.3rem 0 .4rem;color:var(--ink-soft)}
/* Who was what in this episode. The label carries the meaning — the old version showed three
   apricot pills with nothing saying whether they were hosts, reporters or guests. */
/* Label above, names beneath. Side-by-side needed a fixed label column, which wasted a fifth
   of the width on a narrow screen and pushed the names into a ragged second column. */
.who-line{margin:0 0 .8rem}
.who-line .lbl{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 .3rem}
.who-line .tag{margin:0 .3rem .25rem 0}
/* the recurring closing song, set as lyrics rather than speech */
.lyrics{margin:1.2rem 0;padding:.7rem 1rem;border-left:3px solid var(--line-strong);
  background:var(--surface-2);border-radius:0 8px 8px 0}
.lyrics .sound{margin:0 0 .4rem}
.lyric{margin:0;font-style:italic;color:var(--ink);font-size:14px;line-height:1.7;max-width:60ch}
.ep-notes p{max-width:64ch}
.transcript-panel{border:1px solid var(--line);border-left:3px solid var(--accent);
  background:var(--surface);border-radius:0 10px 10px 0;padding:.9rem 1.1rem;margin:0 0 1.6rem;
  box-shadow:var(--shadow)}
.transcript-panel h2{margin:0 0 .3rem;border:none;padding:0;font-size:1.15rem}
.transcript-panel p{margin:.2rem 0;font-size:13.5px;color:var(--ink-soft)}
.transcript-panel .go{display:inline-block;margin-top:.55rem;background:var(--accent);
  color:var(--navy);font-weight:600;text-decoration:none;padding:.4rem .9rem;border-radius:999px;
  font-size:13px}
.transcript-panel .go:hover{background:var(--navy);color:var(--accent)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.6rem;margin:.6rem 0}
.grid .card{margin:0}
.row .card{display:flex;align-items:center;gap:.9rem}
.rowbody{flex:1 1 auto;min-width:0}
.rowbody .meta{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:.2rem 0 0}
.rowbody .meta .tag{margin:0}
.rowbody .when{font-variant-numeric:tabular-nums}
.thumb{flex:0 0 56px;width:56px;height:56px;object-fit:cover;border-radius:6px;
  border:1px solid var(--line);background:var(--surface-2)}
/* roving chip: location leads, reporter reads as a hint beneath — as designed in the artifact */
.roving-chip{display:inline-flex;flex-direction:column;gap:2px;padding:5px 10px;border-radius:10px;
  background:var(--surface-2);border:1px dashed var(--line-strong);font-size:12.5px;margin:.2rem .3rem 0 0}
.roving-chip.linked{border-style:solid;border-color:var(--accent)}
.roving-chip .loc{color:var(--ink);font-weight:600;text-decoration:none}
.roving-chip.linked .loc:hover{text-decoration:underline}
.roving-chip .rep{font-size:11px;color:var(--ink-soft)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:7px;overflow:hidden;margin:.8rem 0}
.stat{background:var(--surface);padding:8px 12px}
.stat b{display:block;font-family:var(--font-mono);font-size:1.1rem;font-weight:600;
  font-variant-numeric:tabular-nums;line-height:1.2}
.stat span{font-size:9.5px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.05em}
.stat.accent b{color:var(--accent)}
.stat.confirm b{color:var(--confirm)}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:.45rem .5rem;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--ink-faint);font-family:var(--font-mono);font-weight:500;font-size:10px;
  text-transform:uppercase;letter-spacing:.06em}
.wrap{overflow-x:auto}
input[type=search]{width:100%;padding:.6rem .8rem;font:inherit;border:1px solid var(--line-strong);
  border-radius:8px;background:var(--surface);color:var(--ink)}
/* transcript */
.turn{margin:0 0 1rem;max-width:70ch}
.turn .who{font-weight:600;color:var(--ink)}
.turn .who a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-strong)}
.turn .who a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.t{color:var(--ink-faint);font-family:var(--font-mono);font-size:10.5px;
  font-variant-numeric:tabular-nums;margin-right:.5rem}
.sound{color:var(--ink-soft);font-style:italic;margin:.9rem 0;font-size:14px}
.seghead{font-family:var(--font-display);font-weight:700;margin:2rem 0 .8rem;padding:.5rem .9rem;
  background:var(--surface-2);border-radius:8px;border:1px solid var(--line-strong);font-size:1.15rem}
.notice{border-left:3px solid var(--accent);background:var(--surface);padding:.7rem 1rem;
  margin:1rem 0;border-radius:0 8px 8px 0;box-shadow:var(--shadow);font-size:13.5px}
footer{max-width:62rem;margin:0 auto;padding:2rem 20px 3rem;color:var(--ink-faint);font-size:12px;
  border-top:1px solid var(--line)}
/* Names the network the site belongs to, and the non-affiliation line the other
   5kadventures.net properties carry — this one publishes transcripts of a podcast about
   parkrun, so being explicit that it is a fan project matters more here, not less. */
.colophon{margin-top:.9rem;padding-top:.7rem;border-top:1px solid var(--line)}
.colophon a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--line-strong)}
.colophon a:hover{color:var(--accent);border-bottom-color:var(--accent)}