/* Solving America's Problems — 1b Split-Wash. Tokens per build spec §3/§4. */

@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('/assets/fonts/instrument-sans-variable.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/ibm-plex-mono-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* colour */
  --field: #0f1319;
  --surface: #171c24;
  --bone: #ece7dd;
  --warm-wash: #b8722e;
  --warm-accent: #e8b478;
  --cool-wash: #2b4152;
  --cool-accent: #9dc0da;
  --action-red: #c8102e;

  /* space (4/8/12/16/20/26/34/48/72) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 26px; --sp-7: 34px; --sp-8: 48px; --sp-9: 72px;
  --gutter: 20px;

  /* radius */
  --r-pill: 999px;
  --r-card: 14px;
  --r-media: 10px;

  /* fonts */
  --f-display: 'Archivo', system-ui, sans-serif;
  --f-body: 'Instrument Sans', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

@media (min-width: 1024px) { :root { --gutter: 56px; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--field);
  color: var(--bone);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--warm-accent); text-decoration: none; }

h1, h2, h3 { margin: 0; font-family: var(--f-display); text-wrap: pretty; }

.h1 {
  font-size: 25px;
  line-height: 1.12;
  letter-spacing: -.03em;
  font-variation-settings: 'wght' 640;
}
@media (min-width: 1024px) {
  .h1 { font-size: 46px; line-height: 1.05; }
}
.h1 .soft { font-variation-settings: 'wght' 280; opacity: .6; }

.h2 {
  font: 400 25px/1.15 var(--f-display);
  font-variation-settings: 'wght' 600;
  letter-spacing: -.025em;
  margin: var(--sp-8) 0 var(--sp-2);
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(236,231,221,.18);
}

.kicker {
  font: 600 10px/1 var(--f-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--warm-accent);
  margin: 0 0 var(--sp-3);
}

.section-label {
  font: 600 10px/1 var(--f-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(236,231,221,.5);
}

.lead { font: 400 17px/1.6 var(--f-body); color: rgba(236,231,221,.74); }
p { font: 400 14.5px/1.62 var(--f-body); color: rgba(236,231,221,.72); }
b, strong { color: var(--bone); font-weight: 600; }

/* buttons */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  min-height: 44px;
  border-radius: var(--r-pill);
  font: 600 18px var(--f-body);
  border: none;
  cursor: pointer;
}
@media (min-width: 1024px) { .btn { font-size: 26px; } }
.btn-primary { background: var(--action-red); color: #fff; }
.btn-primary:active { transform: scale(.97); transition: transform 120ms; }
.btn-primary:focus-visible { outline: 2px solid var(--warm-accent); outline-offset: 2px; }
/* Side by side, same footprint, Apple first then Spotify (Dave's call). Apple's badge
   artwork itself is still never resized/recolored/distorted (their identity guidelines) —
   it just sits centered inside a slot sized to match Spotify's button, same as the badge
   would be centered in any layout. Spotify's button is styled black-on-white-icon to sit
   at equal visual weight next to Apple's own black badge, instead of the cream pill that
   read as a mismatched, oversized sibling. */
.chooser-sheet__buttons { display: flex; flex-direction: row; gap: 10px; }
.btn-platform, .btn-platform-badge {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  height: 54px;
  border-radius: var(--r-pill);
}
.btn-platform {
  gap: 8px;
  background: #000; color: #fff;
  font: 600 13.5px var(--f-body);
}
.btn-platform img { width: 22px; height: 22px; flex: none; }
.btn-platform-badge img { height: 40px; width: auto; max-width: 100%; }

/* nav pill — the one fixed object, one glass surface */
.nav-pill {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 14px);
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  z-index: 90;
}
.nav-pill__inner {
  width: max-content;
  max-width: calc(100% - 40px);
  height: 44px;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 14px 0 8px;
  border-radius: var(--r-pill);
  background: rgba(236,231,221,.12);
  border: 1px solid rgba(236,231,221,.22);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 1px 2px rgba(0,0,0,.4);
}
@supports not (backdrop-filter: blur(1px)) {
  .nav-pill__inner { background: rgba(23,28,36,.92); }
}
@media (prefers-reduced-transparency: reduce) {
  .nav-pill__inner { background: rgba(23,28,36,.92); }
}
@media (min-width: 1024px) { .nav-pill__inner { height: 52px; } }
.nav-pill__logo { width: 28px; height: 28px; flex: none; border-radius: 50%; }
@media (min-width: 1024px) { .nav-pill__logo { width: 34px; height: 34px; } }
.nav-pill__links {
  display: flex;
  gap: 11px;
  flex: none;
  font: 600 9px var(--f-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.nav-pill__links a {
  flex: none;
  white-space: nowrap;
  color: rgba(236,231,221,.62);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 160ms;
}
.nav-pill__links a:hover,
.nav-pill__links a.is-current { color: var(--bone); }
.nav-pill__links a.is-current { border-bottom-color: var(--warm-accent); }
.nav-pill__links .nav-full { display: none; }
.nav-pill__links .nav-short { display: inline; }
@media (min-width: 1024px) {
  .nav-pill__links .nav-full { display: inline; }
  .nav-pill__links .nav-short { display: none; }
}
section[id] { scroll-margin-top: 60px; }

/* sticky listen bar — opaque, appears once hero scrolls out; not glass */
.sticky-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px var(--gutter);
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: var(--field);
  border-top: 1px solid rgba(236,231,221,.14);
  box-shadow: 0 -14px 40px rgba(0,0,0,.5);
  transform: translateY(110%);
  transition: transform 220ms ease;
}
.sticky-bar.is-visible { transform: translateY(0); }
.sticky-bar__btn {
  flex: 1;
  height: 48px;
  border-radius: var(--r-pill);
  background: var(--action-red);
  color: #fff;
  font: 600 15px var(--f-body);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 1024px) {
  .sticky-bar__btn { max-width: 440px; margin: 0 auto; }
}

/* hero */
.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hero__diptych { position: absolute; inset: 0; display: flex; }
.hero__pane { width: 50%; position: relative; overflow: hidden; }
.hero__pane img { width: 100%; height: 100%; object-fit: cover; }
/* Source files are now pre-cropped and centered on each face (see optimize-images.mjs),
   so a plain center position is correct rather than the guessed percentages this used
   to carry against uncropped, mismatched-aspect source images. */
.hero__pane--jerremy img { object-position: center 30%; filter: saturate(1.15); }
.hero__pane--dave img { object-position: center 30%; }
.hero__wash { position: absolute; inset: 0; }
.hero__pane--jerremy .hero__wash { background: linear-gradient(180deg, rgba(184,114,46,.34), rgba(15,19,25,.92)); }
.hero__pane--dave .hero__wash { background: linear-gradient(180deg, rgba(43,65,82,.4), rgba(15,19,25,.93)); }
.hero__seam {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 1px;
  background: linear-gradient(180deg, rgba(236,231,221,0), rgba(236,231,221,.75), rgba(236,231,221,0));
  /* Always a plain time-based sway. A scroll-linked variant used to take over here in
     browsers that support animation-timeline:scroll() (current Chrome included) — but
     that ties motion to scroll position, so it's frozen solid while sitting still on the
     hero, which is exactly where people actually look at it. Dave wants visible motion
     at rest, so: one continuous animation, no scroll dependency, in every browser. */
  animation: sap-seam-drift 11s ease-in-out infinite alternate;
}
@keyframes sap-seam-drift { 0% { transform: translateX(-7px); } 100% { transform: translateX(7px); } }
@media (prefers-reduced-motion: reduce) {
  .hero__seam { animation: none; transform: translateX(0); }
}
.hero__names {
  position: absolute; left: 0; right: 0; top: min(340px, 40svh);
  display: flex; justify-content: space-between;
  padding: 0 16px;
  font: 600 9px var(--f-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hero__names .jerremy { color: var(--warm-accent); max-width: 122px; line-height: 1.45; }
.hero__names .dave { color: var(--cool-accent); text-align: right; max-width: 122px; line-height: 1.45; }
.hero__names em { font-style: normal; opacity: .72; }
.hero__copy {
  position: relative;
  margin-top: auto;
  padding: 0 var(--gutter) var(--sp-8);
  max-width: 900px;
}
.hero__ask {
  position: sticky;
  bottom: 0;
  z-index: 10;
  padding: var(--sp-4) var(--gutter);
  padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
  background: var(--field);
  border-top: 1px solid rgba(236,231,221,.14);
  box-shadow: 0 -14px 40px rgba(0,0,0,.5);
}
.hero__ask .btn-primary { width: 100%; }
@media (min-width: 1024px) {
  .hero__ask .btn-primary { max-width: 440px; margin: 0 auto; }
}

/* generic section shell */
.section {
  padding: var(--sp-8) var(--gutter);
  max-width: 640px;
  margin: 0 auto;
}
.section + .section { border-top: 1px solid rgba(236,231,221,.14); }
.section--raised { background: var(--surface); max-width: none; }
.section--raised > * { max-width: 640px; margin-left: auto; margin-right: auto; }

/* this week */
.episode-row {
  padding: var(--sp-4) 0;
  border-top: 1px solid rgba(236,231,221,.16);
  background: none;
  border-left: none; border-right: none; border-bottom: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.episode-row:first-of-type { border-top: none; }
.episode-row__type { font: 600 9.5px var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(236,231,221,.5); margin: 0 0 6px; }
.episode-row__type.is-bonus { color: var(--action-red); }
.episode-row__title { font-family: var(--f-display); font-size: 18px; line-height: 1.2; letter-spacing: -.02em; color: var(--bone); font-variation-settings: 'wght' 580; margin: 0 0 7px; }
.episode-row__meta { font: 400 10.5px var(--f-mono); letter-spacing: .08em; color: rgba(236,231,221,.5); margin: 0; }
.elsewhere-link { display: inline-block; font: 400 11px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(232,180,120,.85); border-bottom: 1px solid rgba(232,180,120,.4); padding-bottom: 2px; margin-top: var(--sp-4); }

/* chooser sheet */
.chooser-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.55);
  display: none;
}
.chooser-backdrop.is-open { display: block; }
.chooser-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 101;
  max-width: 480px; margin: 0 auto;
  background: var(--field);
  border-top: 1px solid rgba(236,231,221,.18);
  border-radius: 20px 20px 0 0;
  padding: 14px 20px calc(24px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 240ms cubic-bezier(.32,.72,0,1);
}
.chooser-backdrop.is-open .chooser-sheet { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .chooser-sheet { transition: none; }
}
.chooser-sheet__grip { width: 38px; height: 4px; border-radius: 99px; background: rgba(236,231,221,.3); margin: 0 auto 18px; }
.chooser-sheet__kicker { font: 600 9.5px var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(236,231,221,.5); margin: 0 0 4px; }
.chooser-sheet__title { font-family: var(--f-display); font-size: 16px; line-height: 1.2; color: var(--bone); font-variation-settings: 'wght' 560; margin: 0 0 18px; }

/* do one thing */
.act-card { border-radius: var(--r-card); background: linear-gradient(160deg, rgba(184,114,46,.34), rgba(43,65,82,.34)); border: 1px solid rgba(236,231,221,.2); padding: var(--sp-6) var(--sp-5); }
.act-card__title { font-family: var(--f-display); font-size: 26px; line-height: 1.08; letter-spacing: -.03em; color: var(--bone); font-variation-settings: 'wght' 660; margin: 0 0 var(--sp-3); }

/* hosts */
.host-card { border-radius: var(--r-card); overflow: hidden; background: var(--field); border: 1px solid rgba(236,231,221,.18); margin-bottom: var(--sp-5); }
.host-card__photo { position: relative; }
/* aspect-ratio (not a fixed px height) so the crop stays consistent as the card's width
   changes with viewport — a fixed height against a fluid width was shifting the effective
   framing at different widths. Ratio matches the 4:5 pre-crop baked into the source files. */
.host-card__photo img { width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; object-position: center; display: block; }
.host-card__wash { position: absolute; inset: 0; }
.host-card--jerremy .host-card__wash { background: linear-gradient(180deg, rgba(184,114,46,.3), rgba(15,19,25,.86)); }
.host-card--dave .host-card__wash { background: linear-gradient(180deg, rgba(43,65,82,.34), rgba(15,19,25,.86)); }
.host-card__id { position: absolute; left: 20px; bottom: 14px; }
.host-card__name { font-family: var(--f-display); font-size: 21px; letter-spacing: -.025em; color: var(--bone); font-variation-settings: 'wght' 620; margin: 0 0 3px; }
.host-card__role { font: 600 9.5px var(--f-mono); letter-spacing: .16em; text-transform: uppercase; margin: 0; }
.host-card--jerremy .host-card__role { color: var(--warm-accent); }
.host-card--dave .host-card__role { color: var(--cool-accent); }
.host-card__body { padding: 16px 20px 20px; }
.longbio-toggle { font: 600 10.5px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid; padding-bottom: 2px; cursor: pointer; background: none; border-top: none; border-left: none; border-right: none; }
.host-card--jerremy .longbio-toggle { color: var(--warm-accent); border-color: rgba(232,180,120,.4); }
.host-card--dave .longbio-toggle { color: var(--cool-accent); border-color: rgba(157,192,218,.4); }
details.longbio > summary { list-style: none; cursor: pointer; }
details.longbio > summary::-webkit-details-marker { display: none; }
details.longbio[open] .longbio-toggle .chev { transform: rotate(180deg); }
.longbio-toggle .chev { display: inline-block; transition: transform 220ms; }
.longbio-body { margin-top: var(--sp-3); }

/* when you're ready (email) */
.form-field {
  height: 52px;
  border-radius: 12px;
  border: 1px solid rgba(236,231,221,.24);
  background: rgba(15,19,25,.6);
  color: var(--bone);
  padding: 0 16px;
  font: 400 14px var(--f-body);
  width: 100%;
}
.form-field::placeholder { color: rgba(236,231,221,.45); }
.form-stack { display: flex; flex-direction: column; gap: 10px; }
.legal-line { margin: var(--sp-3) 0 0; font: 400 10.5px/1.5 var(--f-mono); color: rgba(236,231,221,.42); }
.form-success { display: none; }
.form-success.is-visible { display: block; }
.form-success.is-visible ~ form { display: none; }

/* social — small icon-only buttons in a row, not a labeled grid */
.social-row { display: flex; gap: 10px; }
.social-row a {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  border: 1px solid rgba(236,231,221,.2);
  color: rgba(236,231,221,.8);
  transition: color 160ms, border-color 160ms;
}
.social-row a:hover { color: var(--bone); border-color: rgba(236,231,221,.4); }
.social-row svg { width: 20px; height: 20px; fill: currentColor; }

/* before you ask */
.qa { border-top: 1px solid rgba(236,231,221,.16); padding: 14px 0; }
.qa:last-child { border-bottom: none; }
.qa__q { margin: 0 0 5px; font: 600 13.5px var(--f-body); color: var(--bone); }
.qa__a { margin: 0; font: 400 13px/1.5 var(--f-body); color: rgba(236,231,221,.68); }

/* footer */
.footer { padding: var(--sp-6) var(--gutter) calc(var(--sp-8) + 70px); max-width: 640px; margin: 0 auto; }
.footer__logo { width: 40px; height: 40px; margin-bottom: 14px; }
.footer__links { margin: 0 0 12px; font: 400 11.5px/1.7 var(--f-body); color: rgba(236,231,221,.55); }
.footer__legal { margin: 0; font: 400 11px/1.6 var(--f-mono); color: rgba(236,231,221,.4); }

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