/* conversations.html styles — added Oct 2, 2026 for the "Conversations with
   Mike" interviews page. The base tokens, header, page hero, headings,
   eyebrow and footer below are copied unchanged from about.css (every page
   carries its own copy of these, see _headers for why styles are external
   per-page files). Page-specific rules start at "Conversation entries". */
:root {
  /* Theme locked July 9, 2026 — "Super, Natural North Van" (see theme-preview.html) */
  --evergreen: #17362b;
  --pine: #2f5d4a;
  --glacier: #2c7f94;
  --glacier-dark: #1f6376;
  --lake: #24586e;
  --pale-pine: #9fc7bd;
  --ice: #eceee6;
  --snow: #f8f6f1;
  --white: #ffffff;
  --ink: #2b3a36;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Newsreader', Georgia, serif;
  --font-ui: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--snow);
  line-height: 1.6;
  text-wrap: pretty;
}
header {
  /* Sticky/blurred header — Phase 1 redesign pass, Sept 2026. Updated to
     match the approved design package's actual header treatment: a light,
     translucent paper background (not dark evergreen), pill-shaped nav
     links, and a persistent Ask Mike / Donate pill CTA pair. */
  position: sticky; top: 0; z-index: 100;
  background: rgba(248, 246, 241, 0.92);
  backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(23, 54, 43, 0.08);
}
.header-inner {
  /* Sept 2026: nav left-aligned next to the logo (was justify-content:
     space-between, which left too little room on the right once "Next
     North Van" was added to #site-nav, wrapping Volunteer/Donate to a
     second line). .header-cta gets margin-left:auto below to pin it right. */
  max-width: 1200px; margin: 0 auto; padding: 0 2rem;
  display: flex; justify-content: flex-start; align-items: center;
  height: 84px; flex-wrap: wrap; gap: 1.25rem; /* gap trimmed from 1.75rem Oct 2, 2026 so the nav plus "Interviews" fits beside Volunteer/Donate */
}
.wordmark {
  display: flex; align-items: center; gap: .45rem;
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 600;
  letter-spacing: -.01em; color: var(--evergreen); text-decoration: none;
  /* Same opsz fix as h1/h2 (see h1 comment) - "Mayor" has a y that can show
     the same small-text curl otherwise. */
  font-optical-sizing: none;
  font-variation-settings: 'opsz' 20, 'WONK' 0;
}
.wordmark .mark { color: var(--glacier); font-size: 1.1rem; }
.wordmark span { font-weight: 400; font-style: italic; color: var(--pine); }

#site-nav { display: flex; align-items: center; gap: 2px; }
/* Oct 2, 2026: the Donate text link was dropped from the desktop nav to make
   room for "Interviews" (the solid Donate button beside it stays). It still
   shows inside the collapsed hamburger menu, where the buttons are hidden. */
nav a.nav-menu-only { display: none; }
nav a {
  color: var(--ink); text-decoration: none;
  font-family: var(--font-ui); font-size: .9rem; font-weight: 500;
  padding: .55rem .65rem; border-radius: 999px;
  transition: background .15s ease, color .15s ease;
}
nav a:hover { background: var(--ice); }
nav a.active { color: var(--evergreen); font-weight: 600; }

.header-cta { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.hdr-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-size: .9rem; font-weight: 600;
  padding: .65rem 1.15rem; border-radius: 999px; text-decoration: none;
  border: 1.5px solid transparent;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.hdr-btn:hover { transform: translateY(-1px); }
.hdr-btn.ghost { background: transparent; border-color: rgba(23,54,43,.14); color: var(--evergreen); }
.hdr-btn.ghost:hover { background: var(--ice); }
.hdr-btn.solid { background: var(--glacier); color: var(--white); }
.hdr-btn.solid:hover { background: var(--glacier-dark); }

/* Mobile hamburger menu (added July 13, 2026; restyled Sept 2026 for the
   light header — icon + toggle chip now dark-on-light) */
.nav-toggle {
  display: none;
  background: none; border: 1px solid rgba(23,54,43,.14); border-radius: 10px;
  cursor: pointer; width: 42px; height: 42px; padding: 0;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--evergreen); border-radius: 2px; }
/* Oct 2, 2026: the menu now collapses to the hamburger below 1240px (was
   760px). The full nav plus the Volunteer/Donate buttons needs about 1,225px,
   so on 13" laptops and iPads in landscape the buttons used to wrap onto a
   second line under the nav. Between 761px and 1240px the Volunteer/Donate
   buttons stay visible beside the hamburger; below 760px they hide as
   before (see the separate 760px block just after this one). */
@media (max-width: 1240px) {
  .header-inner { height: auto; padding: .85rem 1.25rem; }
  .nav-toggle { display: flex; }
  .header-cta { order: 2; }
  #site-nav { order: 3; display: none; width: 100%; flex-direction: column; gap: .15rem; margin-top: .5rem; }
  #site-nav.open { display: flex; }
  nav a { padding: .65rem 1rem; }
  nav a.nav-menu-only { display: block; }
}
@media (max-width: 760px) {
  /* Sept 2026: drop the persistent mobile Donate pill — Mike's read is that
     a solid CTA glued next to the hamburger on every page feels pushy on a
     phone. Donate and Ask Mike are already regular items inside #site-nav,
     so mobile now shows just the wordmark + hamburger, matching the live
     site's header. */
  .header-cta .hdr-btn { display: none; }
}

/* Page hero band — Phase 1 redesign pass, Sept 2026. Full-bleed light band
   sitting between the header and <main>, matching the approved design
   package's actual page-hero treatment. */
.page-hero {
  background: var(--ice);
  border-bottom: 1px solid rgba(23, 54, 43, .08);
}
.page-hero-inner {
  max-width: 1060px; margin: 0 auto; padding: 4rem 1.5rem 3.5rem;
}



h1 {
  font-family: var(--font-display); color: var(--evergreen);
  font-size: clamp(2.6rem, 4.6vw, 4.2rem); font-weight: 500;
  line-height: 1.12; letter-spacing: -.01em; margin-bottom: 1.25rem;
  /* Sept 2026 fix: Fraunces is a variable font with an optical-size (opsz)
     axis - low values are the small-text cut, with much more exaggerated
     curled/twisted details on letters like j, g, y; high values are the
     cleaner display cut meant for headline sizes. Browsers are supposed to
     auto-interpolate opsz to match font-size, but that isn't reliable
     everywhere (Safari in particular). Pinning it explicitly here avoids
     small-text letterforms showing up distorted at headline size. */
  font-optical-sizing: none;
  font-variation-settings: 'opsz' 130, 'WONK' 0;
}

/* h2 bumped again Sept 2026: 1.4rem -> 1.6rem -> clamp(1.9rem,3vw,2.6rem),
   matching mcgraw-site-redesign-2's actual global h2 size exactly (the
   screenshot comparison showed ours reading noticeably smaller). */
h2 {
  font-family: var(--font-display); color: var(--pine); font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 500; margin-bottom: .6rem;
  /* Same opsz fix as h1 above, bumped up to match the larger size. */
  font-optical-sizing: none;
  font-variation-settings: 'opsz' 90, 'WONK' 0;
}

.kicker {
  font-family: var(--font-ui); font-size: .78rem; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; color: var(--glacier);
  margin-bottom: .6rem; display: flex; align-items: center; gap: .55rem;
}
.kicker::before {
  content: ""; display: inline-block; width: 18px; height: 2px;
  background: currentColor; opacity: .65; flex-shrink: 0;
}
.kicker.on-dark { color: var(--pale-pine); }

/* Footer — Phase 1 redesign pass, Sept 2026: matches the approved design
   package's site-wide footer (brand blurb, Site nav, Connect column, and a
   bottom bar with the authorization statement + election-day line). Connect
   uses text links rather than icons: clearer for voters who might not
   recognize a Facebook/Instagram glyph at a glance, and consistent with the
   Site column's plain-text treatment. */
.site-footer {
  background: var(--evergreen); color: var(--pale-pine);
  padding: 3.5rem 1.5rem 1.75rem;
  margin-top: 3rem;
}
.foot-grid {
  max-width: 1160px; margin: 0 auto 2.75rem;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem;
}
.site-footer .wordmark { color: var(--white); }
.site-footer .wordmark .mark, .site-footer .wordmark span { color: var(--pale-pine); }
.foot-brand p { margin-top: 1rem; max-width: 32ch; color: var(--pale-pine); font-size: .95rem; }
.foot-col h4 {
  color: var(--white); font-family: var(--font-ui); font-size: .78rem;
  letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; margin-bottom: 1rem;
}
.foot-col ul { list-style: none; }
.foot-col li { margin-bottom: .6rem; }
.foot-col a { color: var(--pale-pine); text-decoration: none; font-family: var(--font-ui); font-size: .92rem; }
.foot-col a:hover { color: var(--white); }
/* YouTube footer link: live since Oct 2, 2026 (was hidden until the
   channel had content). */
.foot-bottom {
  max-width: 1160px; margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,.14); padding-top: 1.5rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .75rem;
  font-family: var(--font-ui); font-size: .82rem; color: rgba(255,255,255,.55);
}
.foot-bottom a { color: rgba(255,255,255,.7); text-decoration: underline; text-underline-offset: 2px; }
.foot-bottom a:hover { color: var(--white); }
/* Authorization statement (LECFA) — restored to its exact required wording
   Sept 2026: "Authorized by Mike McGraw, financial agent,
   campaign@mcgraw4mayor.ca" must appear verbatim (name of financial agent +
   a B.C. contact method), so it can never be edited down for a redesign.
   Copyright and Privacy each get their own flex segment so nothing crowds
   the authorization statement; .foot-bottom's justify-content:space-between
   spaces all four segments evenly. */
.foot-copyright { margin: 0 1rem; }
.foot-privacy { margin: 0 1rem; }
@media (max-width: 760px) {
  .foot-grid { grid-template-columns: 1fr; gap: 2rem; }
  /* Mobile footer bottom bar — Sept 2026: stack instead of space-between,
     which left a lopsided gap between the copyright and Privacy items on
     narrow screens. Flush-left column keeps all four segments legible. */
  .foot-bottom { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .foot-copyright, .foot-privacy { margin: 0; }
}

main { max-width: 1060px; margin: 0 auto; padding: 3rem 1.5rem 4rem; }
.page-hero .intro {
  font-size: 1.2rem; max-width: 40rem; color: var(--ink);
}

/* ===== Conversation entries =====
   One .convo per interview, newest first. A YouTube interview gets the
   click-to-play player below (nothing loads from YouTube until a visitor
   clicks; youtube-nocookie, end-screen suggestions suppressed, same pattern
   as the welcome video on about.html). An interview hosted somewhere that
   can't be embedded should use the same .convo wrapper with a linked
   thumbnail and a "Watch on ..." button instead of .player-frame. */
.convo { padding-bottom: 3rem; margin-bottom: 3rem; border-bottom: 1px solid rgba(23,54,43,.12); }
.convo:last-of-type { border-bottom: none; margin-bottom: 0; }
.convo-meta {
  font-family: var(--font-ui); font-size: .9rem; color: var(--pine);
  margin-bottom: 1rem;
}
.convo-intro { font-size: 1.2rem; max-width: 46rem; margin-bottom: 1.75rem; }

.convo-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 2.25rem; align-items: start; }

.player-frame {
  position: relative; display: block; width: 100%;
  aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden;
  background: var(--evergreen); border: none; padding: 0; cursor: pointer;
}
.player-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.player-frame iframe { width: 100%; height: 100%; border: none; display: block; }
/* Play button sits in the thumbnail's empty lower-right green area rather
   than dead centre, where it covered the word "Mike" in the title art. */
.play-button {
  position: absolute; top: 82%; left: 86%; transform: translate(-50%, -50%);
  width: 76px; height: 76px; border-radius: 50%;
  background: rgba(44,127,148,.92); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(23,54,43,.35);
  transition: background .15s;
}
.player-frame:hover .play-button,
.player-frame:focus-visible .play-button { background: var(--glacier-dark); }
.play-button svg { fill: var(--white); margin-left: 4px; }
.player-note {
  font-family: var(--font-ui); font-size: .85rem; opacity: .8; margin-top: .6rem;
}
.player-note a { color: var(--glacier); }

/* Chapter list: each row starts the video at that point. */
.chapters h3 {
  font-family: var(--font-ui); font-size: .78rem; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; color: var(--glacier);
  margin-bottom: .75rem;
}
.chapters ol { list-style: none; border-top: 1px solid var(--ice); }
.chapters li { border-bottom: 1px solid var(--ice); }
.chapters button {
  display: flex; gap: .9rem; align-items: baseline; width: 100%;
  background: none; border: none; cursor: pointer; text-align: left;
  padding: .55rem .25rem; color: var(--ink);
  font-family: var(--font-ui); font-size: .95rem;
}
.chapters button:hover, .chapters button:focus-visible { background: var(--ice); color: var(--evergreen); }
.chapters .ts {
  font-variant-numeric: tabular-nums; color: var(--glacier-dark);
  font-weight: 600; min-width: 3.1rem;
}

/* Transcript: collapsed by default so the page stays short, but it's real
   page text (good for search and screen readers). */
.transcript {
  margin-top: 2.25rem; background: var(--white);
  border: 1px solid var(--ice); border-radius: 6px;
}
.transcript summary {
  cursor: pointer; padding: 1.1rem 1.5rem;
  font-family: var(--font-ui); font-weight: 600; font-size: 1rem; color: var(--evergreen);
}
.transcript summary:hover { color: var(--glacier-dark); }
.transcript-body { padding: .5rem 1.5rem 1.75rem; max-width: 46rem; }
.transcript-body h3 {
  font-family: var(--font-display); font-weight: 500; color: var(--pine);
  font-size: 1.35rem; margin: 2rem 0 .75rem;
  font-optical-sizing: none; font-variation-settings: 'opsz' 40, 'WONK' 0;
}
.transcript-body h3 .ts {
  font-family: var(--font-ui); font-size: .85rem; font-weight: 600;
  color: var(--glacier-dark); margin-right: .5rem; font-variant-numeric: tabular-nums;
}
.transcript-body p { font-size: 1.1rem; margin-bottom: 1rem; }
.transcript-body .speaker {
  font-family: var(--font-ui); font-size: .8rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--evergreen);
  margin-right: .35rem;
}
.transcript-body .correction { color: var(--glacier-dark); font-style: italic; }
.transcript-notes {
  margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--ice);
  font-family: var(--font-ui); font-size: .9rem;
}
.transcript-notes p { font-size: .9rem; margin-bottom: .6rem; }

.convo-cta {
  margin-top: 2.25rem; background: var(--evergreen); color: var(--ice);
  border-radius: 6px; padding: 2rem 2.25rem;
  display: flex; gap: 1.5rem; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.convo-cta p { font-size: 1.2rem; max-width: 34rem; }
.convo-cta a {
  flex-shrink: 0; font-family: var(--font-ui); font-size: 1rem; font-weight: 600;
  text-decoration: none; background: var(--glacier); color: var(--white);
  padding: .85rem 1.7rem; border-radius: 999px;
}
.convo-cta a:hover { background: var(--glacier-dark); }

@media (max-width: 900px) {
  .convo-grid { grid-template-columns: 1fr; gap: 1.75rem; }
}
@media (max-width: 560px) {
  .play-button { width: 56px; height: 56px; }
  .play-button svg { width: 22px; height: 22px; }
  .transcript-body { padding: .25rem 1.1rem 1.5rem; }
  .convo-cta { padding: 1.6rem 1.4rem; }
}