/* =========================================================================
   Generationally Speaking, design system
   Colours and type lifted from the Elementor global kit on the WordPress
   site so the rebuild matches. Body text is darkened from the original
   #7A7A7A, which failed contrast on the cream ground.
   ========================================================================= */

:root {
  /* brand */
  --navy:        #052EA6;   /* primary. top bar, footer, headings */
  --navy-deep:   #01096C;   /* hero */
  --navy-mid:    #4260B8;   /* interior page title band */
  --teal:        #2AAFAE;   /* buttons, links, accents */
  --teal-dark:   #1F8E8D;
  --orange:      #FB8B24;   /* active nav, highlights */
  --ink:         #1F271B;
  --cream:       #F2F1EE;   /* page ground */
  --white:       #FFFFFF;
  --body:        #4A4A4A;   /* was #7A7A7A: 3.5:1, now 8.2:1 */
  --muted:       #6B6B6B;
  --line:        #DFDDD7;

  --ff-head: "Sofia Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ff-body: "Inria Sans", Georgia, system-ui, -apple-system, sans-serif;

  --wrap: 1180px;
  --gap: clamp(1.2rem, 3vw, 2.2rem);
  --radius: 4px;
  --shadow: 0 2px 14px rgba(5, 46, 166, 0.08);

  /* solid bands (top bar, footer, navy buttons) keep their own colour so
     they do not follow the heading token when it lifts for dark mode */
  --band:    #052EA6;
  --band-fg: #FFFFFF;
  --band-hi: #2AAFAE;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--body);
  font-family: var(--ff-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--teal-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--ff-head);
  color: var(--navy);
  line-height: 1.15;
  margin: 0 0 0.6em;
  font-weight: 700;
}
h1 { font-size: clamp(2rem, 4.4vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }
li { margin-bottom: 0.45em; }

.wrap { width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto; }
.narrow { width: min(100% - 2.4rem, 760px); margin-inline: auto; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: 0.7rem 1.1rem;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

/* ---------- top bar ---------- */
.topbar { background: var(--band); color: var(--band-fg); font-size: 0.85rem; }
.topbar .wrap { display: flex; justify-content: flex-end; align-items: center; gap: 1.2rem; padding: 0.4rem 0; }
.topbar a { color: var(--band-fg); display: inline-flex; align-items: center; gap: 0.45rem; }
.topbar svg { width: 14px; height: 14px; fill: currentColor; }

/* ---------- header ---------- */
.site-header { background: var(--cream); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 0.9rem 0; }
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 56px; width: auto; }
@media (max-width: 400px) {
  /* Keep the bigger 44px touch targets from crowding the header on narrow phones. */
  .brand img { height: 42px; }
  .header-actions { gap: 0.3rem; }
}

.nav-toggle {
  display: none; background: none; border: 1px solid var(--navy); border-radius: var(--radius);
  color: var(--navy); width: 44px; height: 44px; cursor: pointer;
  place-items: center;
}
.nav-toggle svg { width: 22px; height: 22px; fill: currentColor; display: block; }

.nav > ul { list-style: none; display: flex; align-items: center; gap: 0; margin: 0; padding: 0; }
.nav li { margin: 0; position: relative; }
.nav > ul > li + li::before { content: "|"; color: var(--navy); opacity: 0.45; margin: 0 0.55rem; }
.nav a {
  font-family: var(--ff-head); font-size: 0.98rem; color: var(--navy);
  padding: 0.35rem 0; display: inline-block;
}
.nav a:hover { color: var(--teal-dark); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--orange); }

.has-sub > a::after { content: "▾"; font-size: 0.75em; margin-left: 0.35rem; }
.nav ul.sub {
  display: none; position: absolute; left: 0; top: 100%;
  list-style: none; margin: 0;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  min-width: 200px; padding: 0.4rem 0; z-index: 50;
}
.nav ul.sub li { display: block; }
.nav ul.sub a { display: block; padding: 0.5rem 1rem; white-space: nowrap; }
.nav .has-sub:hover > ul.sub,
.nav .has-sub:focus-within > ul.sub { display: block; }

@media (max-width: 900px) {
  .nav-toggle { display: grid; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; padding: 0.5rem 1.2rem; }
  .nav li + li::before { content: none; }
  .nav a { padding: 0.7rem 0; border-top: 1px solid var(--line); width: 100%; }
  .nav li:first-child a { border-top: 0; }
  .nav ul.sub { position: static; display: block; border: 0; box-shadow: none; padding: 0 0 0 1rem; }
}

/* ---------- hero ---------- */
.hero { background: var(--navy-deep); color: #fff; text-align: center; padding: clamp(3rem, 8vw, 6rem) 0; }
.hero h1, .hero h2 { color: #fff; }
.hero p { color: rgba(255,255,255,0.92); font-size: clamp(1.05rem, 2vw, 1.4rem); max-width: 52rem; margin-inline: auto; }

/* ---------- interior page title band ----------
   A greyscale section photograph sits behind the title and is tinted to the
   brand blue in the browser, so one image serves both themes and the source
   file's own colour never matters. The scrim keeps the left of the band, where
   the title sits, dark enough for white text to stay well clear of AA. */
.page-title {
  background: var(--navy-mid); color: #fff;
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  position: relative; isolation: isolate; overflow: hidden;
}
.page-title .wrap { display: flex; align-items: center; gap: 1.1rem; position: relative; z-index: 1; }
.page-title h1 { color: #fff; margin: 0; border-left: 5px solid var(--teal); padding-left: 1.1rem; }

.page-title::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: var(--band-art, none);
  background-size: cover; background-position: center right;
  mix-blend-mode: luminosity; opacity: 0.55;
}
.page-title::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(5, 46, 166, 0.94) 0%, rgba(5, 46, 166, 0.82) 38%,
                           rgba(5, 46, 166, 0.55) 72%, rgba(5, 46, 166, 0.42) 100%);
}
/* The section art. One image per area of the site, so it caches across every
   page in that area rather than being fetched again per page. */
body[data-band="podcast"]     .page-title { --band-art: url(/static/img/band/podcast.3c7a773d.jpg); }
body[data-band="generations"] .page-title { --band-art: url(/static/img/band/generations.0036b501.jpg); }
body[data-band="about"]       .page-title { --band-art: url(/static/img/band/about.d93771f7.jpg); }
body[data-band="speaking"]    .page-title { --band-art: url(/static/img/band/speaking.66a495e3.jpg); }
body[data-band="consulting"]  .page-title { --band-art: url(/static/img/band/consulting.a186538a.jpg); }
body[data-band="research"]    .page-title { --band-art: url(/static/img/band/research.356e1895.jpg); }
body[data-band="news"]        .page-title { --band-art: url(/static/img/band/news.a3b96d9d.jpg); }
body[data-band="contact"]     .page-title { --band-art: url(/static/img/band/contact.08c00f8b.jpg); }
body[data-band="book"]        .page-title { --band-art: url(/static/img/band/book.24a093f0.jpg); }
body[data-band="default"]     .page-title { --band-art: url(/static/img/band/default.583ef626.jpg); }

/* A little more cover on narrow screens, where the title wraps across more of
   the band and there is less clear ground to the left of it. */
@media (max-width: 760px) {
  .page-title::before { opacity: 0.45; }
  .page-title::after {
    background: linear-gradient(90deg, rgba(5, 46, 166, 0.94) 0%, rgba(5, 46, 166, 0.80) 100%);
  }
}
:root[data-theme="dark"] .page-title::before { opacity: 0.4; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .page-title::before { opacity: 0.4; }
}
/* The print rule below already drops the band background; keep the art out too. */
@media print { .page-title::before, .page-title::after { display: none; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; background: var(--teal); color: #fff;
  font-family: var(--ff-head); font-size: 0.95rem; letter-spacing: 0.02em;
  padding: 0.7rem 1.5rem; border-radius: var(--radius); border: 2px solid var(--teal);
  cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { background: var(--teal-dark); border-color: var(--teal-dark); color: #fff; text-decoration: none; }
.btn--ghost { background: transparent; border-color: #fff; color: #fff; }
.btn--ghost:hover { background: #fff; color: var(--teal-dark); border-color: #fff; }
.btn--navy { background: var(--band); border-color: var(--band); color: var(--band-fg); }
.btn--navy:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: var(--band-fg); }

/* ---------- sections ---------- */
.section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.section--tight { padding: clamp(1.8rem, 4vw, 3rem) 0; }
.section--white { background: var(--white); }
.section-head { text-align: center; margin-bottom: 2.2rem; }
.section-head h2 { margin-bottom: 0.3rem; }
.section-head p { color: var(--muted); max-width: 46rem; margin-inline: auto; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.split--media-first img { border-radius: var(--radius); }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
@media (max-width: 760px) { .duo { grid-template-columns: 1fr; } }

/* ---------- cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--gap); }
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.card__media { aspect-ratio: 16 / 9; background: var(--cream); overflow: hidden; display: block; }
.card__media.is-fallback img { object-fit: contain; padding: 8%; background: var(--cream); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.card__meta { font-family: var(--ff-head); font-size: 0.75rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--teal-dark); margin-bottom: 0.5rem; }
.card__title { font-size: 1.12rem; margin-bottom: 0.5rem; }
.card__title a { color: var(--navy); }
.card__title a:hover { color: var(--teal-dark); text-decoration: none; }
.card__excerpt { font-size: 0.94rem; color: var(--body); margin-bottom: 1rem; }
.card__more { margin-top: auto; font-family: var(--ff-head); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-dark); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--teal); color: #fff; padding: clamp(2rem, 5vw, 3rem) 0; }
.cta-band .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.cta-band p { font-family: var(--ff-head); font-size: clamp(1.2rem, 2.6vw, 1.75rem); color: #fff; margin: 0; }

/* ---------- stat / quote ---------- */
.lede { font-size: clamp(1.05rem, 1.8vw, 1.2rem); color: var(--navy); }
.source { color: var(--teal-dark); font-style: italic; font-weight: 700; }

/* ---------- episode + article layout ---------- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
@media (max-width: 940px) { .layout { grid-template-columns: 1fr; } }

.prose h2 { margin-top: 1.8rem; }
.prose h3 { margin-top: 1.5rem; }
.prose img { border-radius: var(--radius); margin: 1.4rem 0; }
.prose ul li::marker { color: var(--teal); }

.sidebar { position: sticky; top: 96px; display: grid; gap: 1.6rem; }
.side-block { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.side-block h2, .side-block h3 { font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.9rem; }
.side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.side-list a { color: var(--navy); font-family: var(--ff-head); font-size: 0.95rem; line-height: 1.3; display: block; }
.side-list a:hover { color: var(--teal-dark); text-decoration: none; }
.side-list li { display: grid; grid-template-columns: 64px 1fr; gap: 0.7rem; align-items: start; margin: 0; }
.side-list img { border-radius: 3px; width: 64px; height: 64px; object-fit: cover; }
.side-list .thumb-fallback { width: 64px; height: 64px; border-radius: 3px; background: var(--navy); display: grid; place-items: center; color: #fff; font-family: var(--ff-head); font-size: 0.7rem; }

.share { display: flex; align-items: center; gap: 0.7rem; }
.share span { font-family: var(--ff-head); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.share a { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; color: var(--navy); }
.share a:hover { background: var(--navy); color: #fff; }
.share svg { width: 15px; height: 15px; fill: currentColor; }

/* ---------- media embeds ---------- */
.embed { position: relative; aspect-ratio: 16 / 9; background: var(--navy-deep); border-radius: var(--radius); overflow: hidden; margin: 1.2rem 0 1.8rem; cursor: pointer; }
.embed img { width: 100%; height: 100%; object-fit: cover; }
.embed[data-youtube]::after {
  content: ""; position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: 68px; height: 48px; border-radius: 12px; background: rgba(5,46,166,0.9);
  clip-path: none; pointer-events: none;
}
.embed[data-youtube]::before {
  content: ""; position: absolute; inset: 50% auto auto 50%; transform: translate(-40%, -50%);
  z-index: 2; border-style: solid; border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #fff; pointer-events: none;
}

/* ---------- short self-hosted clips (:::clip) ---------- */
.clip { margin: 1.6rem 0 2rem; }
.clip__v {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  border-radius: var(--radius); background: var(--navy-deep); object-fit: cover;
}
.clip figcaption { font-size: 0.9rem; color: var(--muted); margin-top: 0.6rem; line-height: 1.45; }
.clip__credit { display: inline-block; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); opacity: 0.75; margin-left: 0.15rem; }
/* Anyone who asks for less motion gets a still with controls instead of a loop. */
@media (prefers-reduced-motion: reduce) {
  .clip__v { animation: none; }
}
.embed[data-youtube]:hover::after { background: var(--teal); }
.embed[data-youtube]:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- audio player ---------- */
.player {
  display: flex; align-items: center; gap: 0.9rem;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 0.8rem 1rem; margin: 1.2rem 0 1.8rem;
}
.player__btn {
  position: relative;
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--teal); color: #fff; border: 0; cursor: pointer;
  transition: background 0.15s ease;
}
.player__btn:hover { background: var(--teal-dark); }
.player__btn svg {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 18px; height: 18px; fill: currentColor; pointer-events: none;
}
.player .i-play { opacity: 1; }
.player .i-pause { opacity: 0; }
.player.is-playing .i-play { opacity: 0; }
.player.is-playing .i-pause { opacity: 1; }
.player__bar { flex: 1; height: 6px; border-radius: 3px; background: var(--line); cursor: pointer; position: relative; overflow: hidden; min-width: 80px; }
.player__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--teal); border-radius: 3px; }
.player__time { font-family: var(--ff-head); font-size: 0.78rem; color: var(--body); flex: none; }
.player__speed {
  font-family: var(--ff-head); font-size: 0.78rem; font-weight: 700;
  background: none; border: 1px solid var(--line); border-radius: 3px;
  color: var(--navy); padding: 0.25rem 0.5rem; cursor: pointer; flex: none;
}
.player__speed:hover { border-color: var(--teal); color: var(--teal-dark); }
@media (max-width: 520px) {
  .player { flex-wrap: wrap; }
  .player__bar { order: 3; flex-basis: 100%; }
}

/* ---------- episode meta ---------- */
.ep-meta { font-family: var(--ff-head); font-size: 0.82rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--teal-dark); margin-bottom: 0.5rem; }
.ep-listen { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.2rem 0 0; }
.ep-listen a { font-family: var(--ff-head); font-size: 0.85rem; border: 1px solid var(--line); background: var(--white); border-radius: var(--radius); padding: 0.5rem 0.9rem; color: var(--navy); }
.ep-listen a:hover { border-color: var(--teal); color: var(--teal-dark); text-decoration: none; }

/* ---------- episode index ---------- */
.ep-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.ep-list li { margin: 0; }
.ep-list a { font-family: var(--ff-head); color: var(--navy); font-size: 1rem; }

/* ---------- forms ---------- */
.form-block { background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--teal); border-radius: var(--radius); padding: 1.4rem 1.4rem 1.6rem; }
.form-block h2, .form-block h3 { font-family: var(--ff-head); font-size: 1.3rem; color: var(--navy); text-transform: none; letter-spacing: 0; }
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: 0.82rem; color: var(--muted); margin-bottom: 0.3rem; }
.field input, .field textarea {
  width: 100%; font: inherit; color: var(--ink);
  border: 0; border-bottom: 1px solid var(--line); background: transparent;
  padding: 0.5rem 0.1rem;
}
.field textarea { min-height: 90px; resize: vertical; }
.field input:focus, .field textarea:focus { border-bottom-color: var(--teal); outline: none; }

/* ---------- footer ---------- */
.site-footer { background: var(--band); color: var(--band-fg); padding: clamp(2.2rem, 5vw, 3.4rem) 0 1.6rem; }
.site-footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.site-footer img { height: 54px; margin-bottom: 1rem; }
.site-footer h2 { font-family: var(--ff-head); font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--band-fg); opacity: 0.72; margin-bottom: 0.9rem; }
.site-footer a { color: var(--band-fg); }
.site-footer a:hover { color: var(--band-hi); text-decoration: none; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: 0.95rem; }
.site-footer li { margin: 0; }
.footer-social { display: flex; gap: 0.6rem; margin-top: 1rem; }
.footer-social a { width: 34px; height: 34px; border-radius: 50%; background: var(--band-fg); color: var(--band); display: grid; place-items: center; }
.footer-social a:hover { background: var(--band-hi); color: var(--band); }
.footer-social svg { width: 16px; height: 16px; fill: currentColor; }
.footer-credit { grid-column: 1 / -1; border-top: 1px solid var(--line); margin-top: 1rem; padding-top: 1.2rem; font-size: 0.82rem; color: var(--band-fg); opacity: 0.85; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem; }
@media (max-width: 760px) { .site-footer .wrap { grid-template-columns: 1fr; } }

/* ---------- pagination / misc ---------- */
.breadcrumb { font-size: 0.82rem; color: var(--muted); padding: 0.9rem 0 0; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--teal-dark); }

/* ---------- hero with the book ---------- */
.hero-split { display: grid; grid-template-columns: 1fr auto; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; text-align: left; }
.hero-split .btn { }
.hero-book { width: clamp(150px, 20vw, 260px); height: auto; filter: drop-shadow(0 18px 40px rgba(0,0,0,0.45)); }
@media (max-width: 760px) {
  .hero-split { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .hero-split p { margin-inline: auto; }
}
.hero .wrap.hero-split p { margin-inline: 0; }
@media (max-width: 760px) { .hero .wrap.hero-split p { margin-inline: auto; } }

/* ---------- portrait ---------- */
.portrait { border-radius: var(--radius); box-shadow: var(--shadow); }

/* ---------- contact block ---------- */
.contact-line { margin-bottom: 0.35rem; font-family: var(--ff-head); font-size: 1.02rem; }
.contact-line a { color: var(--navy); }
.contact-line a:hover { color: var(--teal-dark); }

/* =========================================================================
   Dark mode

   The brand pack has no dark palette, so this derives one: the navy becomes
   the ground rather than the ink, headings lift to a legible tint of the
   brand blue, and teal and orange carry over because both hold up on a dark
   background. Every colour is a token already, so this is a re-declaration
   rather than a second stylesheet.

   Three states: no attribute follows the system, data-theme pins it either
   way. Defined so the toggle wins in both directions.
   ========================================================================= */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --band:      #111A33;
    --band-fg:   #E4E9F5;
    --band-hi:   #4FD4D2;
    --navy:      #8AA6EE;   /* headings, lifted so they read on dark */
    --navy-deep: #070B18;   /* hero */
    --navy-mid:  #1B2547;   /* title band */
    --teal:      #2FBAB9;
    --teal-dark: #4FD4D2;   /* links: lighter than the fill on dark */
    --cream:     #0B1020;   /* page ground */
    --white:     #141A2E;   /* cards and surfaces */
    --body:      #C8CEDC;
    --muted:     #949CB0;
    --line:      #273150;
    --shadow:    0 2px 18px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --band:      #111A33;
  --band-fg:   #E4E9F5;
  --band-hi:   #4FD4D2;
  --navy:      #8AA6EE;
  --navy-deep: #070B18;
  --navy-mid:  #1B2547;
  --teal:      #2FBAB9;
  --teal-dark: #4FD4D2;
  --cream:     #0B1020;
  --white:     #141A2E;
  --body:      #C8CEDC;
  --muted:     #949CB0;
  --line:      #273150;
  --shadow:    0 2px 18px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

/* The logo is navy artwork, invisible on a dark ground, so swap in the
   reversed one that the footer already uses. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand img { content: url("/static/img/logo-white.ab51102a.png"); }
}
:root[data-theme="dark"] .brand img { content: url("/static/img/logo-white.ab51102a.png"); }

/* Card thumbnails and the book render are photographic; knock back the glare. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card__media img,
  :root:not([data-theme="light"]) .portrait { filter: brightness(0.92); }
}
:root[data-theme="dark"] .card__media img,
:root[data-theme="dark"] .portrait { filter: brightness(0.92); }

.theme-toggle {
  background: none; border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--navy); width: 38px; height: 38px; flex: none;
  display: grid; place-items: center; cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.theme-toggle:hover { border-color: var(--teal); color: var(--teal-dark); }
.theme-toggle svg { width: 18px; height: 18px; fill: currentColor; }
.theme-toggle .i-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: block; }
}

/* =========================================================================
   Header actions, search, mobile menu
   ========================================================================= */

.header-actions { display: flex; align-items: center; gap: 0.5rem; flex: none; }

.icon-btn {
  background: none; border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--navy); width: 38px; height: 38px; flex: none;
  display: grid; place-items: center; cursor: pointer;
}
.icon-btn:hover { border-color: var(--teal); color: var(--teal-dark); }
.icon-btn svg { width: 18px; height: 18px; fill: currentColor; }
/* Larger touch targets on mobile: WCAG recommends at least 44x44px. */
@media (max-width: 900px) {
  .theme-toggle, .icon-btn { width: 44px; height: 44px; }
}

/* search dialog */
.search-dialog {
  position: fixed; inset: 0; z-index: 90; display: none;
  background: rgba(2, 8, 24, 0.55); padding: max(6vh, 2rem) 1rem 2rem;
  backdrop-filter: blur(2px);
}
.search-dialog.is-open { display: block; }
.search-panel {
  background: var(--white); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  width: min(100%, 640px); margin-inline: auto; overflow: hidden;
}
.search-panel__head { display: flex; align-items: center; gap: 0.6rem; padding: 0.9rem 1rem; border-bottom: 1px solid var(--line); }
.search-panel__head svg { width: 18px; height: 18px; fill: var(--muted); flex: none; }
#search-input {
  flex: 1; font: inherit; font-size: 1.05rem; color: var(--ink);
  background: none; border: 0; outline: none; min-width: 0;
}
:root[data-theme="dark"] #search-input { color: var(--body); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #search-input { color: var(--body); } }
.search-hint { font-family: var(--ff-head); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 3px; padding: 0.2rem 0.4rem; }
.search-results { max-height: min(60vh, 30rem); overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.search-results li { margin: 0; border-bottom: 1px solid var(--line); }
.search-results li:last-child { border-bottom: 0; }
.search-results a { display: block; padding: 0.8rem 1rem; color: var(--body); }
.search-results a:hover, .search-results a:focus,
.search-results li.is-active a { background: var(--cream); text-decoration: none; }
.search-results .r-kind { font-family: var(--ff-head); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-dark); }
.search-results .r-title { font-family: var(--ff-head); color: var(--navy); font-size: 1.02rem; display: block; margin: 0.15rem 0 0.2rem; }
.search-results .r-snippet { font-size: 0.88rem; color: var(--muted); display: block; }
.search-results mark { background: rgba(251, 139, 36, 0.28); color: inherit; padding: 0 0.1em; border-radius: 2px; }
.search-empty { padding: 1.6rem 1rem; text-align: center; color: var(--muted); }

/* =========================================================================
   Reading progress
   ========================================================================= */
.progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--teal); z-index: 60; transition: width 0.08s linear;
}

/* =========================================================================
   Copy buttons
   ========================================================================= */
.copy-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.4rem 0 0; }
.copy-btn {
  font-family: var(--ff-head); font-size: 0.82rem;
  background: none; border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--navy); padding: 0.45rem 0.8rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.copy-btn:hover { border-color: var(--teal); color: var(--teal-dark); }
.copy-btn svg { width: 14px; height: 14px; fill: currentColor; }
.copy-btn.is-done { border-color: var(--teal); color: var(--teal-dark); }
.copy-btn.is-done .c-label::after { content: "ied"; }

/* =========================================================================
   Transcript
   ========================================================================= */
.transcript { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); margin: 2rem 0; }
.transcript > summary {
  cursor: pointer; padding: 1rem 1.2rem; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; list-style: none;
}
.transcript > summary::-webkit-details-marker { display: none; }
.transcript__label { font-family: var(--ff-head); font-size: 1.05rem; color: var(--navy); font-weight: 700; }
.transcript__label::before { content: "▸"; margin-right: 0.5rem; color: var(--teal); display: inline-block; transition: transform 0.15s ease; }
.transcript[open] .transcript__label::before { transform: rotate(90deg); }
.transcript__meta { font-family: var(--ff-head); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); flex: none; }
.transcript__body { padding: 0 1.2rem 1.4rem; border-top: 1px solid var(--line); }
.transcript__note { font-size: 0.84rem; color: var(--muted); font-style: italic; margin: 1rem 0 1.4rem; }
.turn { margin-bottom: 1rem; font-size: 0.96rem; }
.turn__who { display: block; font-family: var(--ff-head); font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-dark); margin-bottom: 0.15rem; }

/* =========================================================================
   Floating contact button
   ========================================================================= */
.fab {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 55;
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--teal); color: #fff; border: 0; border-radius: 999px;
  padding: 0.75rem 1.15rem; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  font-family: var(--ff-head); font-size: 0.92rem; cursor: pointer;
  transform: translateY(150%); transition: transform 0.25s ease, background 0.15s ease;
}
.fab.is-visible { transform: translateY(0); }
.fab:hover { background: var(--teal-dark); color: #fff; text-decoration: none; }
.fab svg { width: 17px; height: 17px; fill: currentColor; }
@media (max-width: 520px) { .fab .fab__label { display: none; } .fab { padding: 0.85rem; } }

/* =========================================================================
   Forms: validation states
   ========================================================================= */
.field.has-error input, .field.has-error textarea { border-bottom-color: #C0392B; }
.field__error { display: none; color: #C0392B; font-size: 0.8rem; margin-top: 0.25rem; }
.field.has-error .field__error { display: block; }
.form-status { border-radius: var(--radius); padding: 0.9rem 1rem; margin-top: 1rem; font-size: 0.92rem; display: none; }
.form-status.is-shown { display: block; }
.form-status--ok { background: rgba(42, 175, 174, 0.12); border: 1px solid var(--teal); color: var(--teal-dark); }
.form-status--bad { background: rgba(192, 57, 43, 0.1); border: 1px solid #C0392B; color: #C0392B; }
.btn[aria-busy="true"] { opacity: 0.7; pointer-events: none; }

/* =========================================================================
   Motion: honour the system setting rather than inventing loading states
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
  .fab { transform: none; }
}

/* Skeleton shimmer while the audio player reads its metadata */
.player:not(.is-ready) .player__bar { position: relative; overflow: hidden; }
.player:not(.is-ready) .player__bar::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(42,175,174,0.35), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* =========================================================================
   Print
   ========================================================================= */
@media print {
  .topbar, .site-header, .site-footer, .sidebar, .cta-band,
  .fab, .progress, .search-dialog, .consent, .ep-listen,
  .copy-row, .nav-toggle, .skip-link, .breadcrumb { display: none !important; }

  html, body { background: #fff !important; color: #000 !important; font-size: 11pt; }
  .wrap, .narrow { width: auto; max-width: none; }
  .layout { display: block; }
  .section { padding: 0; }
  .page-title { background: none !important; padding: 0 0 0.5rem; }
  .page-title h1 { color: #000 !important; border-left: 0; padding-left: 0; }
  h1, h2, h3, h4 { color: #000 !important; page-break-after: avoid; }
  a { color: #000 !important; text-decoration: underline; }
  /* a printed page has no links, so put the destination on the paper */
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  .embed, .player { display: none !important; }
  .card, .side-block, .form-block { border: 1px solid #ccc; box-shadow: none; }
  .transcript { border: 0; }
  .transcript > summary { display: none; }
  .transcript__body { border: 0; padding: 0; }
  .transcript[open] { page-break-before: always; }
  img { max-width: 100% !important; page-break-inside: avoid; }
  p, li { orphans: 3; widows: 3; }
}

/* =========================================================================
   Consent banner
   Self-hosted, replacing CookieYes. It has to actually gate the tags, so
   the JS in site.js is what does the work: this is only its clothes.
   ========================================================================= */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: var(--white); border-top: 3px solid var(--teal);
  box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.18);
}
.consent__inner {
  width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto;
  padding: 1rem 0; display: flex; align-items: center;
  justify-content: space-between; gap: 1.4rem; flex-wrap: wrap;
}
.consent__text { margin: 0; font-size: 0.94rem; max-width: 46rem; }
.consent__actions { display: flex; gap: 0.6rem; flex: none; }
.consent__actions .btn { padding: 0.55rem 1.2rem; font-size: 0.9rem; }
@media (max-width: 620px) {
  .consent__inner { flex-direction: column; align-items: stretch; }
  .consent__actions { justify-content: stretch; }
  .consent__actions .btn { flex: 1; text-align: center; }
}
/* the floating button must not sit under the banner */
body.has-consent .fab { bottom: 7.5rem; }

.linkish {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: inherit; text-decoration: underline;
}
.site-footer .linkish:hover { color: var(--band-hi); }

/* mobile menu: a real panel rather than a dropdown */
@media (max-width: 900px) {
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(86vw, 340px);
    background: var(--white); border-left: 1px solid var(--line);
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.22);
    transform: translateX(100%); transition: transform 0.22s ease;
    display: block; overflow-y: auto; padding-top: 4.5rem; z-index: 70;
  }
  .nav.is-open { transform: translateX(0); }
  .nav-backdrop {
    position: fixed; inset: 0; background: rgba(2, 8, 24, 0.45);
    z-index: 65; opacity: 0; pointer-events: none; transition: opacity 0.22s ease;
  }
  .nav-backdrop.is-open { opacity: 1; pointer-events: auto; }
  body.nav-locked { overflow: hidden; }

  /* The drawer lives inside the header, and the header is its own stacking
     context (position: sticky with a z-index), so the drawer's z-index only
     competes inside it. The backdrop sits on the body, so at 65 it painted
     over the whole header, drawer included, and swallowed every tap on a menu
     link. While the menu is open the header has to outrank it. The backdrop
     rises with it so everything behind the menu still dims. */
  body.nav-open .site-header { z-index: 85; }
  body.nav-open .nav-backdrop { z-index: 84; }
  .nav-close {
    position: absolute; top: 1rem; right: 1rem; background: none;
    border: 1px solid var(--line); border-radius: var(--radius);
    color: var(--navy); width: 44px; height: 44px; display: grid;
    place-items: center; cursor: pointer;
  }
  .nav-close svg { width: 18px; height: 18px; fill: currentColor; }
}
.nav-close { display: none; }
@media (max-width: 900px) { .nav-close { display: grid; } }

/* =========================================================================
   Content overhaul, September 2026: long-form guides, research pages,
   statistics, FAQs and the richer home page.
   ========================================================================= */

.kicker { font-family: var(--ff-head); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-dark); margin: 0 0 0.5rem; font-weight: 700; }
.kicker--light { color: var(--teal); }
.page-title--kind .kicker { color: #fff; opacity: 0.85; margin-bottom: 0.3rem; padding-left: calc(1.1rem + 5px); }
.page-title .wrap > div { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.2rem 0; }
.btn-row .btn { margin: 0; }
.hero .btn-row { justify-content: flex-start; }
@media (max-width: 760px) { .hero .btn-row { justify-content: center; } }

.hero-book-link { position: relative; display: block; text-decoration: none; }

.cred-bar { background: var(--white); border-bottom: 1px solid var(--line); }
.cred-bar .wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 2.4rem; padding: 0.9rem 0; font-family: var(--ff-head); font-size: 0.85rem; letter-spacing: 0.03em; color: var(--navy); text-align: center; }
.cred-bar span::before { content: "●"; color: var(--teal); margin-right: 0.55rem; font-size: 0.6em; vertical-align: middle; }

/* ---------- statistics ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--gap); margin: 1.6rem 0 2rem; }
.stat { background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--teal); border-radius: var(--radius); padding: 1.2rem 1.2rem 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.stat__n { font-family: var(--ff-head); font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1; color: var(--navy); font-weight: 700; }
.stat__c { color: var(--body); font-size: 0.98rem; line-height: 1.4; }
.stat__s { color: var(--muted); font-size: 0.78rem; margin-top: auto; padding-top: 0.4rem; }
.stat__s a { color: var(--muted); text-decoration: underline; }
.prose .stats { margin: 0 0 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 520px) { .prose .stats { grid-template-columns: 1fr; } }
.stats--home { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* ---------- callouts, quotes, CTAs ---------- */
.callout { background: var(--white); border-left: 5px solid var(--orange); border-radius: var(--radius); padding: 1.1rem 1.3rem; margin: 1.8rem 0; font-family: var(--ff-head); font-size: 1.12rem; color: var(--navy); line-height: 1.4; }
.callout p:last-child { margin-bottom: 0; }
.callout--links { font-size: 1rem; font-family: var(--ff-body); color: var(--body); }
.callout--links b { font-family: var(--ff-head); color: var(--navy); margin-right: 0.4rem; }
blockquote.pull { margin: 1.8rem 0; padding: 0.2rem 0 0.2rem 1.4rem; border-left: 4px solid var(--teal); font-family: var(--ff-head); font-size: 1.25rem; color: var(--navy); line-height: 1.4; }
blockquote.pull cite, .testimonial cite { display: block; font-style: normal; font-family: var(--ff-body); font-size: 0.88rem; color: var(--muted); margin-top: 0.5rem; }
.prose blockquote:not(.pull) { margin: 1.4rem 0; padding: 0.1rem 0 0.1rem 1.2rem; border-left: 3px solid var(--line); color: var(--body); font-style: italic; }
.cta-inline { background: var(--navy); color: #fff; border-radius: var(--radius); padding: 1.6rem 1.6rem; margin: 2.2rem 0 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; flex-wrap: wrap; }
.cta-inline p { margin: 0; font-family: var(--ff-head); font-size: 1.15rem; color: #fff; flex: 1 1 260px; }
.cta-inline .btn { flex: none; }
:root[data-theme="dark"] .cta-inline { background: var(--navy-mid); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cta-inline { background: var(--navy-mid); } }

.testimonials { display: grid; gap: var(--gap); }
.testimonials--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.testimonial { margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.4rem; position: relative; }
.testimonial::before { content: "\201C"; font-family: Georgia, serif; font-size: 3rem; color: var(--teal); position: absolute; top: 0.2rem; left: 1rem; line-height: 1; opacity: 0.6; }
.testimonial p { margin: 0.9rem 0 0; font-family: var(--ff-head); font-size: 1.05rem; color: var(--navy); line-height: 1.45; }
.prose .testimonials { margin: 1.4rem 0 2rem; }

/* ---------- FAQ ---------- */
.faq { margin: 2.4rem 0 1rem; }
.faq__item { border-top: 1px solid var(--line); padding: 1.1rem 0 0.4rem; }
.faq__item:last-child { border-bottom: 1px solid var(--line); padding-bottom: 1rem; }
.faq__q { font-size: 1.15rem; margin: 0 0 0.4rem; }
.faq__a p:last-child { margin-bottom: 0.6rem; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; margin: 1.4rem 0 1.8rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.table-wrap table { border-collapse: collapse; width: 100%; font-size: 0.93rem; min-width: 480px; }
.table-wrap th, .table-wrap td { padding: 0.55rem 0.8rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.table-wrap th { font-family: var(--ff-head); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); background: var(--cream); }
.table-wrap tr:last-child td { border-bottom: 0; }
.table-wrap td:not(:first-child), .table-wrap th:not(:first-child) { white-space: nowrap; }

/* ---------- byline, lede, toc ---------- */
.byline { display: flex; gap: 0.8rem; align-items: center; margin: 0.4rem 0 1.4rem; }
.byline img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.byline b { display: block; font-family: var(--ff-head); color: var(--navy); font-size: 0.98rem; }
.byline span { display: block; font-size: 0.82rem; color: var(--muted); line-height: 1.35; }
.byline__date { margin-top: 0.15rem; }
.byline__name { text-decoration: none; }
.byline__name:hover b, .byline__link:hover + div .byline__name b { text-decoration: underline; }
.prose--guide .lede { font-size: 1.15rem; line-height: 1.55; margin-bottom: 1.6rem; }
.toc ol { margin: 0; padding-left: 1.2em; font-size: 0.92rem; }
.toc li { margin-bottom: 0.4rem; }
.toc a { color: var(--navy); }
.toc--mobile { display: none; }
@media (max-width: 940px) { .toc--mobile { display: block; } }
.toc a:hover { color: var(--teal-dark); }
.toc--inline { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; margin: 0 0 2rem; }
.toc--inline b { display: block; font-family: var(--ff-head); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem; }
.toc--inline ol { columns: 2; column-gap: 2rem; }
@media (max-width: 640px) { .toc--inline ol { columns: 1; } }
.side-list--text li { display: block; }
.prose--guide h2 { scroll-margin-top: 90px; }
.prose--guide h3 { scroll-margin-top: 90px; }
.prose--guide figure { margin: 1.6rem 0; }
.prose--guide figcaption, .caption { font-size: 0.85rem; color: var(--muted); margin-top: 0.5rem; }
.prose--guide ol.steps { list-style: none; padding: 0; counter-reset: step; }
.prose--guide ol.steps li { counter-increment: step; position: relative; padding-left: 3rem; margin-bottom: 1.4rem; }
.prose--guide ol.steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--teal); color: #fff; font-family: var(--ff-head); font-weight: 700; display: grid; place-items: center; }
.prose--guide ol.steps h3 { margin: 0.2rem 0 0.4rem; font-size: 1.15rem; }
.rel-episodes { margin-top: 2.6rem; border-top: 1px solid var(--line); padding-top: 1.6rem; }
.card-grid--compact { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.card-grid--compact .card__excerpt { display: none; }
.tags { font-size: 0.88rem; margin: 1.2rem 0; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.tags span { color: var(--muted); font-family: var(--ff-head); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; margin-right: 0.3rem; }
.tags a { border: 1px solid var(--line); background: var(--white); border-radius: 999px; padding: 0.2rem 0.7rem; color: var(--navy); font-size: 0.85rem; }
.tags a:hover { border-color: var(--teal); text-decoration: none; color: var(--teal-dark); }
.ep-guest { font-size: 0.95rem; color: var(--body); margin-bottom: 1.2rem; }
.ep-guest b { color: var(--navy); font-family: var(--ff-head); }

/* ---------- link cards ---------- */
.lcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--gap); margin: 1.4rem 0 1.8rem; }
.lcards--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.lcard { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.4rem 1.2rem; color: var(--body); transition: transform 0.15s ease, box-shadow 0.15s ease; }
a.lcard:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow); }
.lcard h3 { margin: 0 0 0.5rem; font-size: 1.15rem; }
.lcard p { font-size: 0.95rem; margin-bottom: 0.9rem; }
.lcard__more { margin-top: auto; font-family: var(--ff-head); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-dark); }

.gen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.9rem; }
.gen-card { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1rem; color: var(--navy); display: flex; flex-direction: column; gap: 0.25rem; transition: transform 0.15s ease, background 0.15s ease; }
.gen-card b { font-family: var(--ff-head); font-size: 1.1rem; }
.gen-card span { font-size: 0.85rem; color: var(--muted); }
.gen-card:hover { text-decoration: none; background: var(--navy); color: #fff; transform: translateY(-2px); }
.gen-card:hover span { color: rgba(255,255,255,0.8); }
.gen-card--all { background: var(--teal); color: #fff; border-color: var(--teal); }
.gen-card--all span { color: rgba(255,255,255,0.85); }

/* ---------- guests ---------- */
.guest-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1.2rem var(--gap); }
.guest { display: grid; grid-template-columns: 72px 1fr; gap: 0.9rem; align-items: start; margin: 0; padding: 0.9rem; background: var(--cream); border-radius: var(--radius); border: 1px solid var(--line); }
.guest__img img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.guest__name { font-size: 1.05rem; margin: 0.1rem 0 0.2rem; }
.guest__name a { color: var(--navy); }
.guest__role { font-size: 0.88rem; color: var(--body); margin: 0 0 0.3rem; }
.guest__ep { font-size: 0.8rem; color: var(--muted); margin: 0; }

/* ---------- book band ---------- */
.book-band { background: var(--navy-deep); color: #fff; padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.book-band h2 { color: #fff; font-size: clamp(1.4rem, 2.6vw, 2rem); }
.book-band p { color: rgba(255,255,255,0.9); }
.book-band__cover { width: clamp(150px, 20vw, 240px); justify-self: center; filter: drop-shadow(0 18px 40px rgba(0,0,0,0.45)); }
.book-band .split { grid-template-columns: 1fr auto; }
@media (max-width: 820px) { .book-band .split { grid-template-columns: 1fr; } }

/* ---------- print ---------- */
@media print {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .cta-inline, .rel-episodes, .toc { display: none; }
}

/* Grid children default to min-width auto, so a wide table inside the prose
   column pushes the whole page wider than the phone. Cap them. */
.layout > *, .prose, .split > * { min-width: 0; }
.table-wrap { max-width: 100%; }