/* ==========================================================================
   The Whole Truth — landing page
   Components below are CSS translations of the design system's React
   components (components/core, components/podcast). Values are unchanged;
   only the delivery mechanism differs, so the static site carries no
   framework runtime.
   ========================================================================== */

/* --- Reset / base ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--text-body-md);
  line-height:var(--leading-body);
  color:var(--text-body);
  background:var(--surface-page);
}
img{display:block;max-width:100%;height:auto}
/* .episodes__list sets display:flex, which would otherwise beat the UA rule
   for [hidden] and leave a hidden tab panel on screen. */
[hidden]{display:none !important}
h1,h2,h3,p{margin:0}
a{color:var(--link);text-decoration:none;transition:color var(--motion-fast),opacity var(--motion-fast)}
a:hover{color:var(--link-hover)}
button{font:inherit}

:where(a,button,input,summary):focus-visible{
  outline:2px solid var(--navy-700);
  outline-offset:3px;
}
.on-dark :where(a,button,input,summary):focus-visible{
  outline-color:var(--paper-0);
}

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

.skip-link{
  position:absolute;left:var(--space-4);top:-100px;z-index:100;
  background:var(--paper-0);color:var(--ink-900);
  padding:var(--space-3) var(--space-4);
  font-family:var(--font-label);text-transform:uppercase;
  letter-spacing:var(--tracking-label);font-size:var(--text-caption);
}
.skip-link:focus{top:var(--space-4)}

/* --- Layout primitives -------------------------------------------------- */
.wrap{
  max-width:var(--page-max);
  margin:0 auto;
  padding-inline:var(--page-gutter);
}
.section{padding-block:var(--space-9)}
/* Where to listen belongs to the episode list above it — close the gap so the
   two read as one block rather than two unrelated sections. The top is pulled
   in too: the hero ends on a hard dark/white edge, and a full section's worth
   of white under it left the page looking like it had stalled. */
#episodes{padding-top:var(--space-7);padding-bottom:var(--space-6)}
#listen{padding-top:var(--space-7)}
.on-dark{color:var(--text-inverse)}
.on-dark :where(a){color:var(--text-inverse)}
.on-dark :where(a:not(.btn)):hover{opacity:.8;color:var(--text-inverse)}

/* Paper/plaster grain — the source artwork is heavily textured, so dark
   full-bleed grounds carry a low-opacity noise field rather than flat fill. */
.textured{position:relative;isolation:isolate}
.textured::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:.14;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* The deep treatment: fine grain over a low-frequency mottle, the heavier
   paper/plaster look from the cover art. Used on About and the footer. The
   hero was left clean — the figures are doing the work there, and the
   texture read as noise behind them, especially on a phone. */
.textured--deep::before{
  opacity:.42;
  mix-blend-mode:soft-light;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='5'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23p)'/%3E%3C/svg%3E");
  background-size:200px 200px, 600px 600px;
}

/* Section heading with the 3px anchor rule */
.rule-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-5);
  border-bottom:var(--rule-heavy);
  padding-bottom:var(--space-3);
  margin-bottom:var(--space-6);
}
.rule-head.is-inverse{border-bottom-color:rgba(255,255,255,.55)}
.section-title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:var(--text-h2);
  line-height:var(--leading-tight);
  text-transform:uppercase;
  color:var(--text-heading);
}
.on-dark .section-title{color:var(--text-inverse)}
.eyebrow{
  font-family:var(--font-label);
  font-weight:500;
  font-size:var(--text-label);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
}
.link-label{
  font-family:var(--font-label);
  font-size:var(--text-caption);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  white-space:nowrap;
}

/* Tabs — display-face words sitting on the section's own 3px anchor rule. */
.tabs{display:flex;gap:var(--space-6);align-items:baseline}
.tab{
  font-family:var(--font-display);
  font-weight:400;
  font-size:var(--text-h2);
  line-height:var(--leading-tight);
  text-transform:uppercase;
  color:var(--text-muted);
  background:none;
  border:none;
  border-bottom:3px solid transparent;
  padding:0 0 var(--space-3);
  margin-bottom:-15px;
  cursor:pointer;
  transition:color var(--motion-base);
}
.tab:hover{color:var(--accent-hover)}
.tab[aria-selected="true"]{color:var(--text-heading);border-bottom-color:var(--navy-700)}
.panel-status{
  font-family:var(--font-label);
  font-size:var(--text-caption);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--text-muted);
  padding:var(--space-5) 0;
}
.panel-status a{text-decoration:underline}

/* --- Button (components/core/Button.jsx) -------------------------------- */
.btn{
  font-family:var(--font-label);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:var(--tracking-label);
  font-size:13px;
  padding:11px 24px;
  border:none;
  border-radius:var(--radius-0);
  cursor:pointer;
  transition:background var(--motion-fast),color var(--motion-fast),opacity var(--motion-fast);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
}
.btn--sm{font-size:12px;padding:8px 16px}
.btn--lg{font-size:15px;padding:14px 32px}
.btn--primary{background:var(--accent);color:var(--text-inverse)}
.btn--primary:hover{background:var(--accent-hover)}
.btn--secondary{background:transparent;color:var(--accent);border:1px solid var(--accent)}
.btn--secondary:hover{background:var(--accent);color:var(--text-inverse)}
.btn--ghost{background:transparent;color:var(--accent)}
.btn--ghost:hover{opacity:.7}
.btn--inverse{background:var(--paper-0);color:var(--ink-800)}
.btn--inverse:hover{opacity:.85}
.btn--outline-light{background:transparent;color:var(--paper-0);border:1px solid rgba(255,255,255,.5)}
.btn--outline-light:hover{background:var(--paper-0);color:var(--ink-800)}
.btn[disabled]{opacity:.45;cursor:default}
.btn .icon{flex:none}

/* --- Badge (components/core/Badge.jsx) ---------------------------------- */
.badge{
  font-family:var(--font-label);
  font-weight:500;
  font-size:11px;
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  padding:4px 10px;
  display:inline-block;
}
.badge--navy{background:var(--navy-700);color:var(--paper-0)}
.badge--outline{background:transparent;color:var(--navy-700);border:1px solid var(--navy-700)}
.badge--inverse{background:rgba(255,255,255,.14);color:var(--paper-0);border:1px solid rgba(255,255,255,.35)}
.badge--muted{background:var(--fog-100);color:var(--ink-800)}

/* --- Input (components/core/Input.jsx) ---------------------------------- */
.field{display:flex;flex-direction:column;gap:6px;font-family:var(--font-body)}
.field__label{
  font-family:var(--font-label);
  font-size:12px;font-weight:500;
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--text-muted);
}
.field__input{
  font-family:var(--font-body);
  font-size:15px;
  padding:11px 14px;
  color:var(--ink-800);
  background:var(--paper-0);
  border:1px solid var(--fog-200);
  border-radius:var(--radius-0);
  outline:none;
  transition:border-color var(--motion-fast);
  width:100%;
}
.field__input:focus{border-color:var(--navy-700)}
.field--dark .field__label{color:rgba(255,255,255,.7)}
.field--dark .field__input{
  color:var(--paper-0);
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.3);
}
.field--dark .field__input::placeholder{color:rgba(255,255,255,.45)}
.field--dark .field__input:focus{border-color:var(--paper-0)}

/* --- Duotone photo treatment -------------------------------------------- */
.duotone{position:relative;overflow:hidden;background:var(--ink-900)}
.duotone img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.duotone::after{content:"";position:absolute;inset:0;background:var(--duotone-overlay)}

/* --- Masthead ------------------------------------------------------------ */
.masthead{background:var(--ink-800);color:var(--text-inverse)}
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);
  padding-block:var(--space-5);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.nav__home{display:flex;align-items:center;padding:var(--space-1) 0}
.nav__mark{height:40px;width:auto}
.nav__links{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-5);
  font-family:var(--font-label);
  font-size:13px;
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
}
/* Nav sits quiet until you reach for it: light grey, going white with a rule
   under it on hover. --gray-400 on --ink-800 is 4.9:1, so it still passes AA
   at this size. */
/* :not(.btn-subscribe) matters — the button is a direct child of .nav__links,
   and without it this rule overrode the button's bottom padding and bottom
   border, knocking the label off-centre and erasing one side of its edge. */
.nav__links > a:not(.btn-subscribe){
  color:var(--gray-400);
  padding-bottom:3px;
  border-bottom:1px solid transparent;
  transition:color var(--motion-fast),border-color var(--motion-fast);
}
.nav__links > a:not(.btn-subscribe):hover,
.nav__links > a:not(.btn-subscribe):focus-visible{
  color:var(--paper-0);
  border-bottom-color:var(--paper-0);
}
.nav__social{display:flex;align-items:center;gap:var(--space-4)}
.nav__social a{display:flex;opacity:.85}
.nav__social a:hover{opacity:1}
/* Subscribe — the masthead's one call to action, in the footer's deep blue so
   it reads as a solid block against the lighter masthead navy, inverting to
   white on hover. line-height:1 keeps the label optically centred between the
   equal paddings. */
.btn-subscribe{
  display:inline-flex;align-items:center;gap:var(--space-2);
  font-family:var(--font-label);
  font-weight:500;
  font-size:12px;
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  line-height:1;
  color:var(--paper-0);
  background:var(--ink-900);
  border:1px solid var(--ink-900);
  border-radius:var(--radius-0);
  padding:13px 22px;
  transition:background var(--motion-base),color var(--motion-base),
             border-color var(--motion-base);
}
.btn-subscribe .icon{flex:none;transition:inherit}
.btn-subscribe:hover,
.btn-subscribe:focus-visible{
  background:var(--paper-0);
  color:var(--ink-900);
  border-color:var(--paper-0);
}
/* .on-dark paints every link white; the hover state needs ink. */
.on-dark a.btn-subscribe:hover{color:var(--ink-900);opacity:1}

/* Donate — one per country. Outlined so Subscribe keeps the weight; the flag
   carries the country, the word stays "Donate" on both. */
/* The pair travels together, side by side at every width. */
.nav__donate{display:flex;align-items:center;gap:var(--space-3)}

.btn-donate{
  display:inline-flex;align-items:center;gap:var(--space-2);
  font-family:var(--font-label);
  font-weight:500;
  font-size:12px;
  line-height:1;
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--paper-0);
  background:transparent;
  border:1px solid rgba(255,255,255,.45);
  border-radius:var(--radius-0);
  padding:13px 16px;
  transition:background var(--motion-base),color var(--motion-base),
             border-color var(--motion-base);
}
/* Real flag art, greyscaled to stay inside the monochrome palette. The
   hairline keeps the white field readable against both button states. */
.btn-donate__flag{flex:none;display:block;box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.btn-donate:hover .btn-donate__flag,
.btn-donate:focus-visible .btn-donate__flag{box-shadow:0 0 0 1px rgba(11,31,58,.3)}
.btn-donate:hover,
.btn-donate:focus-visible{
  background:var(--paper-0);
  color:var(--ink-900);
  border-color:var(--paper-0);
}
.on-dark a.btn-donate:hover{color:var(--ink-900);opacity:1}

.nav__toggle{
  display:none;
  background:transparent;border:1px solid rgba(255,255,255,.4);
  color:var(--paper-0);padding:8px 10px;cursor:pointer;
}

/* --- Hero ---------------------------------------------------------------- */
.hero{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:var(--space-7);
  align-items:center;
  padding-block:var(--space-8) var(--space-9);
}
.hero__eyebrow{opacity:.7;margin-bottom:var(--space-4)}
/* The hero carries the supplied horizontal lockup (wordmark + tagline) as
   artwork, not as set type — the real faces are not in hand, so the PNG is
   the only faithful rendering of the trademark. */
.hero__lockup{margin:0 0 var(--space-4)}
.hero__logo{width:min(100%,600px);height:auto}
/* The tagline is set as type rather than taken from the lockup: heavier and
   larger than the hairline in the artwork, so it holds its own under the
   wordmark. */
.hero__tagline{
  font-family:var(--font-label);
  font-weight:600;
  font-size:clamp(17px,1.9vw,23px);
  line-height:1.25;
  letter-spacing:var(--tracking-tagline);
  text-transform:uppercase;
  margin-bottom:var(--space-6);
}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}
/* Host figures. Each photo is screened over the navy so its near-black
   background disappears into the ground, then masked to an ellipse so the
   frame edges dissolve instead of ending in a hard rectangle. */
.hero__figures{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  max-width:780px;
  margin-inline:auto;
}
.hero__figure{
  width:58%;
  height:auto;
  filter:grayscale(1) contrast(1.12) brightness(1.08);
  /* lighten, not screen: with the navy as the base, every pixel darker than
     the navy resolves to exactly the navy, so the black studio backgrounds
     disappear with no haze and no cut-out needed. */
  mix-blend-mode:lighten;
  -webkit-mask-image:radial-gradient(ellipse 58% 66% at 50% 42%,
    #000 46%, rgba(0,0,0,.6) 74%, transparent 100%);
  mask-image:radial-gradient(ellipse 58% 66% at 50% 42%,
    #000 46%, rgba(0,0,0,.6) 74%, transparent 100%);
}
.hero__figure--tim{z-index:2}
/* lighten resolves per pixel, so the brighter photo wins wherever the frames
   cross — it cannot occlude. Michael keeps his size and position; instead the
   mug he is holding sits at x 7-27%, y 60-73% of his frame,
   and it landed square on Tim's nose. A third mask layer punches that one
   spot out; the arm holding it stays. Measured, not eyeballed — dimming the
   whole band was not enough, and cutting the band removed the arm too. */
.hero__figure--mike{
  z-index:1;
  /* His subject sits further back in its frame than Tim's, so matching the
     rendered widths made him read smaller. He is scaled up to even them out;
     58 + 66 - 24 = 100, so the pair still fits the container exactly and
     nothing spills into a horizontal scrollbar. */
  width:66%;
  margin-left:-24%;
  margin-bottom:7%;
  -webkit-mask-image:
    radial-gradient(ellipse 58% 66% at 50% 42%,
      #000 46%, rgba(0,0,0,.6) 74%, transparent 100%),
    linear-gradient(to bottom,
      #000 74%, rgba(0,0,0,.4) 86%, transparent 95%),
    radial-gradient(ellipse 26% 14% at 17% 66%,
      transparent 60%, rgba(0,0,0,.4) 82%, #000 100%);
  mask-image:
    radial-gradient(ellipse 58% 66% at 50% 42%,
      #000 46%, rgba(0,0,0,.6) 74%, transparent 100%),
    linear-gradient(to bottom,
      #000 74%, rgba(0,0,0,.4) 86%, transparent 95%),
    radial-gradient(ellipse 26% 14% at 17% 66%,
      transparent 60%, rgba(0,0,0,.4) 82%, #000 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}

/* --- Episode card (components/podcast/EpisodeCard.jsx) ------------------- */
.episodes__list{display:flex;flex-direction:column;gap:var(--space-4)}
.episode{
  display:flex;gap:var(--space-5);
  background:var(--surface-card);
  border:1px solid var(--fog-200);
  color:var(--text-body);
  padding:var(--space-5);
  font-family:var(--font-body);
  transition:border-color var(--motion-base),box-shadow var(--motion-base);
}
.episode:hover{border-color:var(--navy-700);box-shadow:var(--shadow-card)}
/* Episode art is the podcast cover — shown as it is, in full colour. The
   duotone is for photography, and washing the artwork made it unreadable. */
.episode__art{width:110px;height:110px;flex-shrink:0;overflow:hidden}
.episode__art img{width:100%;height:100%;object-fit:cover}
.episode__body{min-width:0;display:flex;flex-direction:column;gap:var(--space-2)}
.episode__meta{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}
.episode__stamp{
  font-size:12px;color:var(--text-muted);
  font-family:var(--font-label);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
}
.episode__title{
  font-family:var(--font-label);
  font-weight:500;font-size:20px;
  line-height:var(--leading-tight);
  text-transform:uppercase;
  color:var(--text-heading);
}
.episode__desc{font-size:14px;line-height:1.5}
.episode.is-playing{border-left:3px solid var(--navy-700)}
.episode.is-openable{cursor:pointer}

/* Article card — the episode card's bones with a landscape crop, since the
   source images are wide editorial photography rather than square art. */
.article__art{width:180px;height:120px;flex-shrink:0}
/* Editorial photography keeps the duotone, pulled back from the full-strength
   wash so the image still reads at card size. */
.article__art::after{background:linear-gradient(rgba(37,60,80,.5),rgba(27,42,54,.58))}
.article__stamp{
  font-size:12px;color:var(--text-muted);
  font-family:var(--font-label);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
}

/* --- About / hosts -------------------------------------------------------- */
.about{background:var(--ink-800);color:var(--text-inverse)}
.about__grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:var(--space-7);align-items:start;
}
.about__lede{font-size:var(--text-body-lg);line-height:var(--leading-body);opacity:.85;max-width:52ch}
.about__lede--lead{
  font-family:var(--font-label);font-weight:500;
  font-size:clamp(20px,2vw,25px);line-height:var(--leading-tight);
  text-transform:uppercase;letter-spacing:var(--tracking-tagline);
  opacity:1;
}
.about__lede + .about__lede{margin-top:var(--space-4)}
/* The three pillars sit directly under the section title as cards that
   invert on hover — the brand is monochrome, so contrast reversal is the
   only emphasis move available. */
.about__pillars{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--space-4);
  margin-bottom:var(--space-8);
}
.pillar{
  border:1px solid rgba(255,255,255,.28);
  border-top:3px solid rgba(255,255,255,.55);
  padding:var(--space-5);
  background:transparent;
  transition:background var(--motion-base),color var(--motion-base),
             border-color var(--motion-base);
}
.pillar:hover,.pillar:focus-within{
  background:var(--paper-0);
  color:var(--ink-900);
  border-color:var(--paper-0);
  border-top-color:var(--navy-700);
}
.pillar__title{
  font-family:var(--font-display);font-weight:400;
  font-size:var(--text-h3);text-transform:uppercase;
  line-height:var(--leading-tight);margin-bottom:var(--space-2);
}
.pillar__text{font-size:14px;line-height:1.5;opacity:.8;transition:opacity var(--motion-base)}
.pillar:hover .pillar__text,.pillar:focus-within .pillar__text{opacity:1}
.hosts{display:flex;flex-direction:column;gap:var(--space-4)}
.host{
  display:flex;gap:var(--space-4);align-items:center;
  background:var(--slate-500);padding:var(--space-4);
  transition:background var(--motion-base);
}
/* Only a host with a bio gets the affordance. */
.host.is-openable{cursor:pointer}
.host.is-openable:hover,
.host.is-openable:focus-visible{background:var(--steel-600)}
.host.is-openable:hover .host__name{text-decoration:underline;text-underline-offset:3px}
.host__body{min-width:0}
.host__portrait{width:96px;height:96px;flex-shrink:0}
/* Portraits are framed on the card's own colour, so a cut-out PNG with a
   transparent background sits on navy rather than on a black box. */
.host .duotone{background:var(--slate-500)}
/* The full-strength duotone is tuned for large imagery; at 96px it buries a
   face, so portraits take a lighter pass of the same navy. */
.host .duotone::after{background:linear-gradient(rgba(37,60,80,.32),rgba(27,42,54,.42))}
.host__portrait img{object-position:50% 12%}   /* keep faces out of the crop */
.host__name{
  font-family:var(--font-label);font-weight:500;font-size:16px;
  letter-spacing:var(--tracking-label);text-transform:uppercase;
}
.host__role{font-size:13px;opacity:.75;margin-top:2px}
.scripture{
  margin-top:var(--space-5);
  border-left:3px solid rgba(255,255,255,.55);
  padding-left:var(--space-5);
}
.scripture__text{
  font-family:var(--font-display-light);font-weight:300;font-style:italic;
  font-size:clamp(22px,2.4vw,30px);line-height:1.25;text-transform:uppercase;
  /* Around 1440 both quotes stranded their last word ("lion.", "him.") on a
     third line. Balancing evens the lines instead of filling greedily, so the
     block stays a tidy rectangle at every width. Degrades to normal wrapping
     where it is unsupported. */
  text-wrap:balance;
}
.scripture__ref{
  margin-top:var(--space-3);
  font-family:var(--font-label);font-size:var(--text-caption);
  letter-spacing:var(--tracking-label);text-transform:uppercase;opacity:.7;
}

/* --- Platforms ------------------------------------------------------------ */
.platforms{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
.platform{
  display:flex;align-items:center;gap:var(--space-3);
  border:1px solid var(--fog-200);padding:var(--space-4) var(--space-5);
  color:var(--text-heading);
  transition:border-color var(--motion-base),background var(--motion-base);
}
.platform:hover{border-color:var(--navy-700);background:var(--fog-100);color:var(--text-heading)}
.platform__name{
  font-family:var(--font-label);font-weight:500;font-size:13px;
  letter-spacing:var(--tracking-label);text-transform:uppercase;
}
.platform .icon{color:var(--navy-700)}

/* --- Sermons -------------------------------------------------------------- */
.sermons{display:grid;grid-template-columns:1.55fr 1fr;gap:var(--space-5);align-items:start}

/* The player is a facade: the poster frame and a play control, with the
   Vimeo iframe only inserted on click. Nothing third-party loads until
   someone actually asks for the video. */
.sermon-stage{position:relative;background:var(--ink-900);aspect-ratio:16/9;overflow:hidden}
.sermon-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.sermon-stage__poster{
  position:absolute;inset:0;width:100%;height:100%;
  padding:0;border:none;cursor:pointer;background:none;
  display:block;
}
/* The featured sermon runs in full colour — it is the live one, and the
   colour is what separates it from the archive below. */
.sermon-stage__poster img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
/* No wash at rest; a light navy veil only on hover, for feedback. */
.sermon-stage__poster::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(rgba(37,60,80,.35),rgba(27,42,54,.45));
  opacity:0; transition:opacity var(--motion-base);
}
.sermon-stage__poster:hover::after{opacity:1}
.sermon-stage__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:2;width:66px;height:66px;
  border:1px solid rgba(255,255,255,.7);
  display:flex;align-items:center;justify-content:center;
  color:var(--paper-0);pointer-events:none;
  transition:background var(--motion-base),color var(--motion-base);
}
.sermon-stage__poster:hover .sermon-stage__play{background:var(--paper-0);color:var(--ink-900)}
.sermon-stage__caption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:var(--space-5);pointer-events:none;
  background:linear-gradient(transparent, rgba(16,24,31,.85));
  color:var(--paper-0);
}
.sermon-stage__title{
  font-family:var(--font-label);font-weight:500;font-size:18px;
  line-height:var(--leading-tight);text-transform:uppercase;
}
.sermon-stage__meta{
  margin-top:6px;font-family:var(--font-label);font-size:var(--text-caption);
  letter-spacing:var(--tracking-label);text-transform:uppercase;opacity:.75;
}

.sermon-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.sermon{
  display:flex;gap:var(--space-4);width:100%;
  text-align:left;background:none;cursor:pointer;
  border:none;border-top:1px solid var(--border-subtle);
  padding:var(--space-3) 0;
  transition:opacity var(--motion-fast);
}
.sermon-list li:last-child .sermon{border-bottom:1px solid var(--border-subtle)}
.sermon:hover{opacity:.7}
.sermon[aria-current="true"]{opacity:1}
.sermon[aria-current="true"] .sermon__title{color:var(--accent)}
/* The archive sits back under the brand duotone. */
.sermon__thumb{width:104px;flex-shrink:0;aspect-ratio:16/9;position:relative;overflow:hidden}
.sermon__thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.sermon__thumb::after{
  content:"";position:absolute;inset:0;background:var(--duotone-overlay);
  transition:opacity var(--motion-base);
}
/* The whole archive stays duotone, including the one currently loaded —
   the navy title already marks which that is. Colour is reserved for the
   featured stage. */
.sermon__body{min-width:0}
.sermon__title{
  font-family:var(--font-body);font-weight:500;font-size:14px;
  line-height:1.3;color:var(--text-heading);
}
.sermon__meta{
  margin-top:4px;font-family:var(--font-label);font-size:12px;
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text-muted);
}

/* --- Chapel band ---------------------------------------------------------- */
.chapel{background:var(--fog-100)}
.chapel__lede{
  max-width:60ch;margin-bottom:var(--space-6);
  font-size:var(--text-body-lg);line-height:var(--leading-body);
}
.chapel .platform{background:var(--paper-0)}
.chapel .platform:hover{background:var(--paper-0);border-color:var(--navy-700)}

/* --- Newsletter ----------------------------------------------------------- */
.newsletter{background:var(--slate-500);color:var(--text-inverse)}
.newsletter__grid{
  display:grid;grid-template-columns:1fr 380px;
  gap:var(--space-7);align-items:center;
}
.newsletter__title{
  font-family:var(--font-display);font-weight:400;
  font-size:var(--text-h2);text-transform:uppercase;
  line-height:var(--leading-tight);
  margin:var(--space-3) 0 var(--space-3);
}
.newsletter__text{opacity:.85;max-width:48ch}
.newsletter__form{display:flex;flex-direction:column;gap:var(--space-3)}
.newsletter__note{font-size:var(--text-caption);opacity:.7}
.form-status{
  font-family:var(--font-label);font-size:var(--text-caption);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
}

/* --- Footer --------------------------------------------------------------- */
.footer{background:var(--ink-900);color:var(--text-inverse)}
.footer__top{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--space-6);padding-block:var(--space-7);
}
.footer__col{display:flex;flex-direction:column;gap:var(--space-4)}
.footer__col--end{align-items:flex-end}

/* One social row per mark, so each set of links sits with the thing it
   belongs to rather than in a single ambiguous pile. */
.footer__social{
  display:flex;align-items:center;gap:var(--space-4);
  list-style:none;margin:0;padding:0;
}
.footer__social a{
  display:flex;align-items:center;
  color:var(--paper-0);opacity:.6;
  transition:opacity var(--motion-fast);
}
.footer__social a:hover{opacity:1;color:var(--paper-0)}
.footer__rumble{height:17px;width:auto;filter:brightness(0) invert(1)}
/* The chapel lockup is one link out to royalspringchapel.com. */
.footer__chapel{
  display:flex;align-items:center;gap:18px;
  transition:opacity var(--motion-fast);
}
.footer__chapel:hover{opacity:.75}
.footer__chapel:hover .footer__org{text-decoration:underline;text-underline-offset:3px}
.footer__seal{height:72px;filter:brightness(0) invert(1);opacity:.9}
.footer__org{
  display:block;
  font-family:var(--font-label);font-size:14px;font-weight:500;
  letter-spacing:var(--tracking-label);text-transform:uppercase;
}
.footer__motto{display:block;font-size:13px;opacity:.6;margin-top:4px}
/* The two marks are very different heights — the chapel lockup is 72px of
   seal, the wordmark 34px. Both rows are held to the taller of the two and
   centred, so the marks sit on one line and the social rows below them line
   up with each other too. */
.footer__lockup,
.footer__chapel{min-height:72px}
.footer__lockup{display:flex;align-items:center}
.footer__mark{height:34px;opacity:.85;width:auto;display:block}
/* Caps to match the tagline everywhere else on the page. */
.footer__tagline{
  font-family:var(--font-label);
  font-weight:500;
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
}
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.12);
  padding-block:var(--space-5);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  font-size:var(--text-caption);opacity:.6;
}
/* Copyright and build credit are both attribution, so they cluster left and
   leave the tagline on the right where it was. */
.footer__legal{
  display:flex;align-items:center;flex-wrap:wrap;
  column-gap:var(--space-4);row-gap:4px;
}
/* The bar is the only place on the page where a link sits in a run of plain
   text, so it carries a resting underline rather than relying on colour — the
   whole bar is already dimmed to .6. Hovering brightens; the inherited
   .on-dark hover dims, which would be backwards here. */
.footer__credit a{
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(255,255,255,.4);
  transition:text-decoration-color var(--motion-fast),opacity var(--motion-fast);
}
.on-dark .footer__credit a:hover{opacity:1;text-decoration-color:var(--paper-0)}

/* --- Article reader ------------------------------------------------------- */
.reader{
  width:min(100% - 2rem, 900px);
  max-height:calc(100vh - 4rem);
  padding:0;
  border:none;
  border-top:6px solid var(--navy-700);
  border-radius:var(--radius-0);
  background:var(--paper-0);
  color:var(--text-body);
  box-shadow:var(--shadow-lift);
  overflow:hidden;
}
.reader::backdrop{background:rgba(16,24,31,.82)}
.reader[open]{display:flex;flex-direction:column}

.reader__bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-4) var(--space-6);
  border-bottom:var(--rule-thin);
  background:var(--paper-0);
  flex:none;
}
.reader__close{
  background:transparent;border:1px solid var(--border-subtle);
  color:var(--text-heading);cursor:pointer;
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  transition:border-color var(--motion-fast),background var(--motion-fast);
}
.reader__close:hover{border-color:var(--navy-700);background:var(--fog-100)}

.reader__sheet{
  overflow-y:auto;
  padding:var(--space-7) var(--space-7) var(--space-6);
  -webkit-overflow-scrolling:touch;
}
.reader__head{
  display:flex;align-items:center;gap:var(--space-5);
  border-bottom:var(--rule-heavy);padding-bottom:var(--space-4);margin-bottom:var(--space-6);
}
.reader__headtext{min-width:0}
/* Same framing as the host card: Tim's portrait is a cut-out PNG, so it needs
   the navy behind it rather than the sheet's paper, and the same lighter
   duotone pass that keeps a face readable at small sizes. */
.reader__portrait{
  flex:none;width:112px;height:112px;
  background:var(--slate-500);
}
.reader__portrait::after{background:linear-gradient(rgba(37,60,80,.32),rgba(27,42,54,.42))}
.reader__portrait img{object-position:50% 12%}
.reader__title{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(28px,3.4vw,var(--text-h1));
  line-height:var(--leading-tight);
  text-transform:uppercase;
  color:var(--text-heading);
}
.reader__byline{
  margin-top:var(--space-3);
  font-family:var(--font-label);font-size:var(--text-caption);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text-muted);
}
.reader__foot{
  display:flex;align-items:center;justify-content:flex-end;gap:var(--space-4);
  flex-wrap:wrap;
  margin-top:var(--space-7);
  border-top:var(--rule-thin);
  padding-top:var(--space-5);
}

/* Prose — the article body as it comes out of the feed. */
.prose{max-width:68ch;font-size:var(--text-body-lg);line-height:var(--leading-body)}
.prose > * + *{margin-top:var(--space-5)}
.prose h2,.prose h3,.prose h4{
  font-family:var(--font-label);font-weight:500;
  text-transform:uppercase;letter-spacing:var(--tracking-tagline);
  line-height:var(--leading-tight);
  color:var(--text-heading);
  margin-top:var(--space-7);
}
.prose h2{font-size:var(--text-h3)}
.prose h3{font-size:18px}
.prose figure{margin:var(--space-6) 0}
.prose img{width:100%;height:auto}
.prose figcaption{
  margin-top:var(--space-2);
  font-size:var(--text-caption);color:var(--text-muted);
}
.prose ul,.prose ol{padding-left:1.3em}
.prose li + li{margin-top:var(--space-2)}
.prose blockquote{
  border-left:3px solid var(--navy-700);
  padding-left:var(--space-5);
  font-style:italic;
  color:var(--text-heading);
}
.prose a{text-decoration:underline}
.prose hr{border:none;border-top:var(--rule-thin);margin:var(--space-6) 0}

body.reader-open{overflow:hidden}

/* --- Player bar (components/podcast/PlayerBar.jsx) ------------------------ */
.player{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;align-items:center;gap:var(--space-4);
  background:var(--ink-800);color:var(--text-inverse);
  padding:12px 20px;
  font-family:var(--font-body);
  box-shadow:0 -4px 20px rgba(16,24,31,.4);
  transform:translateY(100%);
  transition:transform var(--motion-base);
}
.player.is-open{transform:translateY(0)}
.player__toggle{
  width:40px;height:40px;flex-shrink:0;
  border:1px solid rgba(255,255,255,.5);
  background:transparent;color:var(--paper-0);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background var(--motion-fast),color var(--motion-fast);
}
.player__toggle:hover{background:var(--paper-0);color:var(--ink-800)}
.player__body{min-width:0;flex:1}
.player__title{
  font-family:var(--font-label);font-size:13px;font-weight:500;
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.player__track{display:flex;align-items:center;gap:10px;margin-top:6px}
.player__time{font-size:11px;opacity:.7;font-variant-numeric:tabular-nums}
.player__scrub{
  flex:1;height:3px;background:rgba(255,255,255,.2);
  border:none;padding:0;cursor:pointer;position:relative;display:block;
}
.player__scrub:hover{height:5px;transition:height var(--motion-fast)}
.player__fill{display:block;height:100%;width:0;background:var(--paper-0)}
.player__close{
  background:transparent;border:none;color:var(--paper-0);
  opacity:.6;cursor:pointer;padding:6px;flex-shrink:0;
}
.player__close:hover{opacity:1}
body.has-player{padding-bottom:var(--player-height)}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width:1040px){
  .about__grid,.newsletter__grid,.sermons{grid-template-columns:1fr}
  .platforms{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .section{padding-block:var(--space-8)}
  #episodes{padding-top:var(--space-6);padding-bottom:var(--space-5)}
  #listen{padding-top:var(--space-6)}
  .hero{grid-template-columns:1fr;padding-block:var(--space-6) var(--space-7)}
  .hero__figures{order:-1;max-width:400px}
  .nav__toggle{display:inline-flex}
  .nav__links{
    display:none;width:100%;order:3;
    flex-direction:column;align-items:flex-start;gap:var(--space-4);
    padding-block:var(--space-5);
  }
  .nav__links.is-open{display:flex}
  .nav{flex-wrap:wrap}
  .nav__mark{height:34px}
  .about__pillars{grid-template-columns:1fr}
  .tabs{gap:var(--space-5)}
  .tab{font-size:var(--text-h3)}
  .footer__top{flex-direction:column;align-items:flex-start;gap:var(--space-7)}
  .footer__col--end{align-items:flex-start}
  /* Stacked, the shared row height is just dead space. */
  .footer__lockup,
  .footer__chapel{min-height:0}
}
@media (max-width:700px){
  .reader{width:100%;max-width:none;max-height:100vh;height:100vh;margin:0}
  .reader__sheet{padding:var(--space-5) var(--space-5) var(--space-6)}
  .prose{font-size:var(--text-body-md)}
  .reader__head{gap:var(--space-4)}
  .reader__portrait{width:80px;height:80px}
}
@media (max-width:560px){
  .episode{flex-direction:column}
  /* The cover is square and is the artwork itself — keep it whole rather
     than cropping a wide band through the wordmark. Article photography can
     still run full width. */
  .episode__art{width:150px;height:150px}
  .article__art{width:100%;height:200px}
  .platforms{grid-template-columns:1fr}
  .footer__bottom{flex-direction:column;align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0ms !important;animation-duration:0ms !important}
}

@media print{
  .player,.nav__social,.skip-link{display:none}
  body{background:#fff;color:#000}
}