/* Public sermon library. Built on the same brand tokens as the staff side,
   but this is the one part of the system a member ever sees -- so it leads
   with the message, not the machinery. */

.tclc-public { margin: 0; color: var(--tclc-text); }

/* Header ------------------------------------------------------------------ */

.pub-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  padding: 16px clamp(18px, 4vw, 48px);
  background: rgba(1, 7, 29, .72);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid rgba(255, 192, 0, .18);
}
.pub-brand img { height: 40px; width: auto; display: block; }
.pub-nav a {
  color: var(--tclc-text-muted); text-decoration: none;
  font-weight: 600; font-size: var(--tclc-fs-body);
  padding: 8px 16px; border-radius: 999px;
  transition: color .2s ease, background .2s ease;
}
.pub-nav a:hover { color: var(--tclc-gold-300); background: rgba(255,192,0,.1); }
.pub-nav { display: flex; gap: 2px; flex-wrap: wrap; }

/* ==========================================================================
   The welcome page.

   The church's front door: the first thing anyone given the address sees.
   It carries the logo animation -- which had been sitting unused in the
   repository since the dial replaced it on the dashboard -- and exactly one
   photograph, the one with nobody in frame but the pastor.

   Nothing here is fed by the membership, giving or pastoral tables. The only
   query behind the page is for published sermons.
   ========================================================================== */

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(36px, 7vw, 88px) clamp(18px, 4vw, 40px) clamp(30px, 5vw, 56px);
}
.home-hero-words h1 {
  font-family: var(--tclc-display);
  font-size: clamp(40px, 7vw, 82px);
  line-height: .94;
  letter-spacing: .012em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 18px;
  text-wrap: balance;
}
.home-hero-words h1 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--tclc-gold-300), var(--tclc-gold-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.home-eyebrow {
  display: block;
  font-size: var(--tclc-fs-micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--tclc-gold-300);
  margin: 0 0 14px;
}
.home-lead {
  font-size: var(--tclc-fs-lead);
  line-height: 1.6;
  color: var(--tclc-text-muted);
  max-width: 46ch;
  margin: 0 0 28px;
}

.home-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.home-btn {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: var(--tclc-fs-body);
  color: var(--tclc-text);
  border: 1px solid rgba(255, 255, 255, .22);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.home-btn:hover { background: rgba(255, 255, 255, .07); transform: translateY(-2px); }
.home-btn-gold {
  background: linear-gradient(160deg, var(--tclc-gold-300), var(--tclc-gold-500));
  border-color: transparent;
  color: #0A1020;
}
.home-btn-gold:hover {
  background: linear-gradient(160deg, #FFF0B0, var(--tclc-gold-400));
  transform: translateY(-2px);
}

/* The animation sits on a white field, so it is blended onto the navy rather
   than boxed. Same treatment the dashboard used before the dial replaced it. */
.home-hero-mark { display: grid; place-items: center; }
.home-hero-mark video {
  width: min(420px, 100%);
  height: auto;
  display: block;
  mix-blend-mode: screen;
  filter: contrast(1.06) saturate(1.12);
}

/* ==========================================================================
   The welcome form.

   Filled in by somebody standing in a church hall on their own phone, often
   on a poor connection, sometimes by a person who does not fill in forms
   often. So: large targets, one column, plain words, and only three fields
   that actually have to be answered.
   ========================================================================== */

.wel-wrap {
  max-width: 640px; margin: 0 auto;
  padding: clamp(28px, 6vw, 64px) clamp(18px, 4vw, 32px) clamp(40px, 8vw, 80px);
}
.wel-intro h1 {
  font-family: var(--tclc-display);
  font-size: clamp(34px, 6vw, 58px); line-height: .98;
  text-transform: uppercase; letter-spacing: .012em;
  color: #fff; margin: 0 0 14px;
}
.wel-lead {
  color: var(--tclc-text-muted); font-size: var(--tclc-fs-lead);
  line-height: 1.6; margin: 0 0 28px;
}

.wel-form { display: grid; gap: 16px; }
.wel-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wel-field { display: grid; gap: 6px; }
.wel-field > span {
  font-size: var(--tclc-fs-small); font-weight: 600;
  color: var(--tclc-text-muted);
}
.wel-field > span b { color: var(--tclc-gold-300); }
.wel-field input,
.wel-field textarea {
  width: 100%; padding: 14px 15px; border-radius: 12px;
  /* 16px exactly: anything smaller and iOS zooms the page on focus, which
     on a form this long throws the visitor's place away. */
  font-size: 16px; font-family: inherit;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .18);
  color: var(--tclc-text);
}
.wel-field input:focus,
.wel-field textarea:focus {
  outline: 2px solid var(--tclc-gold-400); outline-offset: 1px;
  background: rgba(255, 255, 255, .09);
}
.wel-field em {
  font-style: normal; font-size: var(--tclc-fs-small); color: #FCA5A5;
}

/* Clipped rather than display:none -- some automated submitters skip hidden
   inputs, but almost none skip one that is merely invisible.

   Clipped rather than shoved to left:-9999px, too: a negative offset that
   large counts toward the document's width, and the whole page then scrolls
   sideways on a phone. Measured that happening. This pattern occupies no
   space in any direction. */
.wel-hp {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.wel-consent {
  display: grid; grid-template-columns: auto 1fr; gap: 12px;
  align-items: start; padding: 16px;
  border-radius: 12px; margin-top: 6px;
  background: rgba(255, 192, 0, .07);
  border: 1px solid rgba(255, 192, 0, .3);
  color: var(--tclc-text-muted); line-height: 1.55;
  font-size: var(--tclc-fs-small);
}
.wel-consent input { width: 22px; height: 22px; margin-top: 2px; }
.wel-consent-bad { border-color: rgba(248, 113, 113, .55); }
.wel-error { color: #FCA5A5; font-size: var(--tclc-fs-small); margin: 0; }
.wel-error-top {
  padding: 14px 16px; border-radius: 12px; margin: 0 0 18px;
  background: rgba(248, 113, 113, .12);
  border: 1px solid rgba(248, 113, 113, .45);
  color: #FCA5A5;
}

.wel-submit { justify-self: start; margin-top: 4px; padding: 15px 32px; }
.wel-small {
  font-size: var(--tclc-fs-small); color: var(--tclc-text-dim);
  margin: 0; line-height: 1.55;
}

.wel-thanks { text-align: center; }
.wel-thanks .wel-lead { margin-inline: auto; max-width: 44ch; }
.wel-thanks-actions { justify-content: center; }

@media (max-width: 560px) {
  .wel-row { grid-template-columns: 1fr; }
  .wel-submit { justify-self: stretch; text-align: center; }
}

/* Portrait ---------------------------------------------------------------- */

.home-portrait {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(30px, 6vw, 72px) clamp(18px, 4vw, 40px);
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.home-portrait figure { margin: 0; position: relative; }
.home-portrait img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  border: 1px solid rgba(255, 192, 0, .22);
  box-shadow: var(--tclc-lift-3);
}
.home-portrait figcaption {
  display: grid;
  gap: 2px;
  margin-top: 16px;
  font-size: var(--tclc-fs-small);
  color: var(--tclc-text-dim);
}
.home-portrait figcaption strong {
  font-size: var(--tclc-fs-lead);
  color: #fff;
  font-weight: 700;
  letter-spacing: -.01em;
}
.home-portrait-words h2,
.home-section-head h2 {
  font-family: var(--tclc-display);
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.02;
  letter-spacing: .012em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 16px;
}
.home-portrait-words p {
  color: var(--tclc-text-muted);
  line-height: 1.68;
  max-width: 54ch;
  margin: 0 0 14px;
}

/* Connect ----------------------------------------------------------------- */

.home-connect {
  max-width: 1180px; margin: 0 auto;
  padding: clamp(28px, 5vw, 60px) clamp(18px, 4vw, 40px);
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.home-connect-lead {
  color: var(--tclc-text-muted); line-height: 1.6;
  max-width: 58ch; margin: 0 0 26px;
}
.home-podcast {
  padding: clamp(20px, 4vw, 34px);
  border-radius: 20px; margin-bottom: 26px;
  background:
    radial-gradient(600px 260px at 90% 0%, rgba(255,192,0,.14), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255, 192, 0, .26);
}
.home-podcast h3 {
  font-family: var(--tclc-display); text-transform: uppercase;
  font-size: clamp(22px, 3vw, 34px); line-height: 1.04;
  letter-spacing: .012em; color: #fff; margin: 0 0 10px;
  text-wrap: balance;
}
.home-podcast p {
  color: var(--tclc-text-muted); margin: 0 0 20px; max-width: 52ch;
}

/* The footer's link row. Words rather than logos: hand-drawn brand marks
   would be chances to render somebody's trademark badly, and a label is
   unambiguous at any size.

   Plain text rather than the coloured pills this used to be. The home page
   carries the full platform section now, and a footer that shouts as loudly
   as the section above it just makes the page noisier. The brand colour is
   held back for hover, where it confirms what you are about to tap. */
.soc {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 2px 20px;
}
.soc-link {
  display: inline-block; padding: 10px 2px;
  font-size: var(--tclc-fs-small); font-weight: 600;
  text-decoration: none; color: var(--tclc-text-muted);
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.soc-link:hover, .soc-link:focus-visible {
  color: var(--soc, var(--tclc-gold-400));
  border-bottom-color: color-mix(in srgb,
    var(--soc, var(--tclc-gold-400)) 55%, transparent);
}
.soc-youtube   { --soc: #FF0033; }
.soc-instagram { --soc: #E1306C; }
.soc-facebook  { --soc: #1877F2; }
.soc-tiktok    { --soc: #25F4EE; }
.soc-x         { --soc: #FFFFFF; }
.soc-whatsapp  { --soc: #25D366; }
.soc-telegram  { --soc: #29A9EB; }
.soc-all       { --soc: var(--tclc-gold-400); }

.pub-footer .soc { justify-content: center; margin: 16px 0 14px; }

/* Plan your visit ---------------------------------------------------------
   The practical block: when, where, and one tap to directions. */

.home-visit {
  max-width: 1180px; margin: 0 auto;
  padding: clamp(28px, 5vw, 60px) clamp(18px, 4vw, 40px);
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.visit-next {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 22px; padding: 9px 16px; border-radius: 999px;
  font-size: var(--tclc-fs-small); font-weight: 700;
  color: var(--tclc-gold-300);
  background: rgba(255, 192, 0, .1);
  border: 1px solid rgba(255, 192, 0, .3);
}
.visit-next::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--tclc-gold-400); flex: 0 0 auto;
}
.visit-next.is-now {
  color: var(--tclc-good);
  background: rgba(52, 211, 153, .1);
  border-color: rgba(52, 211, 153, .38);
}
.visit-next.is-now::before {
  background: var(--tclc-good);
  animation: reelPulse 2s ease-in-out infinite;
}

.visit-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.visit-card {
  padding: clamp(18px, 3vw, 26px);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .1);
}
.visit-card .home-eyebrow { margin: 0 0 10px; }
.visit-time {
  font-family: var(--tclc-display); text-transform: uppercase;
  font-size: clamp(34px, 5vw, 48px); line-height: 1;
  color: #fff; margin: 0;
}
.visit-ampm {
  font-size: .45em; margin-left: .18em; color: var(--tclc-gold-400);
}
.visit-until {
  margin: 6px 0 12px; color: var(--tclc-text-dim);
  font-size: var(--tclc-fs-small);
}
.visit-note {
  margin: 0; color: var(--tclc-text-muted);
  font-size: var(--tclc-fs-small); line-height: 1.55;
}
.visit-where {
  background:
    radial-gradient(500px 220px at 90% 0%, rgba(255, 192, 0, .13), transparent 65%),
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  border-color: rgba(255, 192, 0, .26);
}
.visit-place {
  font-family: var(--tclc-display); text-transform: uppercase;
  font-size: clamp(22px, 3vw, 30px); line-height: 1.05;
  color: #fff; margin: 0 0 6px;
}
.visit-address {
  margin: 0 0 18px; color: var(--tclc-text-muted);
  font-size: var(--tclc-fs-small); line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .visit-next.is-now::before { animation: none; }
}

/* The reel ----------------------------------------------------------------
   Snippets of the church's YouTube uploads, playing when the page opens.
   Muted, because every browser refuses to autoplay audio -- the Unmute
   control is the whole point of the bar underneath. */

.reel { margin: 0 0 26px; }

.reel-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 20px; overflow: hidden;
  background:
    radial-gradient(700px 300px at 50% 0%, rgba(255, 192, 0, .14), transparent 70%),
    #000;
  border: 1px solid rgba(255, 192, 0, .26);
  box-shadow: var(--tclc-lift-2);
}
/* The API replaces the div with an iframe carrying the same id, so both
   need to fill the frame. */
.reel-slot, .reel-frame iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

.reel-poster {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px;
  width: 100%; border: 0; cursor: pointer; text-decoration: none;
  color: var(--tclc-text); font: inherit; text-align: center;
  background: linear-gradient(180deg, rgba(1, 7, 29, .55), rgba(1, 7, 29, .85));
}
.reel-poster-mark {
  display: grid; place-items: center;
  width: 62px; height: 62px; border-radius: 50%;
  font-size: 22px; color: var(--tclc-navy-900);
  background: var(--tclc-gold-400);
  box-shadow: 0 0 0 10px rgba(255, 192, 0, .14);
}
.reel-poster-text { font-weight: 700; font-size: var(--tclc-fs-lead); }
.reel-poster-note { color: var(--tclc-text-dim); font-size: var(--tclc-fs-micro); }
.reel-poster:hover .reel-poster-mark { transform: scale(1.06); }
.reel-poster-mark { transition: transform .15s ease; }

.reel-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  padding: 12px 4px 0;
}
.reel-now {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--tclc-fs-micro); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--tclc-text-dim);
}
.reel-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--tclc-text-dim);
}
.reel.is-live .reel-dot {
  background: var(--tclc-good);
  animation: reelPulse 2s ease-in-out infinite;
}
.reel.is-live .reel-now { color: var(--tclc-good); }
@keyframes reelPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .5); }
  50%      { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); }
}
.reel-title {
  flex: 1 1 220px; min-width: 0;
  color: var(--tclc-text); font-size: var(--tclc-fs-small); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.reel-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.reel-btn {
  min-height: 38px; padding: 8px 14px; border-radius: 999px;
  font: inherit; font-size: var(--tclc-fs-micro); font-weight: 700;
  color: var(--tclc-text); text-decoration: none; cursor: pointer;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  transition: background .15s ease, border-color .15s ease;
}
.reel-btn:hover {
  background: rgba(255, 192, 0, .16);
  border-color: rgba(255, 192, 0, .45);
}
.reel-btn-out { border-color: rgba(255, 192, 0, .35); }

/* Find us wherever you are -------------------------------------------------
   Cards rather than the footer's pill bar: each destination gets a line
   saying what is actually there, because "Telegram" alone tells a visitor
   nothing about whether it is worth the tap. */

.connect-tools {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin: 0 0 16px;
}
.connect-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.connect-filter {
  min-height: 38px; padding: 8px 15px; border-radius: 999px;
  font: inherit; font-size: var(--tclc-fs-micro); font-weight: 700;
  color: var(--tclc-text-muted); cursor: pointer;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .16);
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.connect-filter:hover { color: var(--tclc-text); border-color: rgba(255, 192, 0, .4); }
.connect-filter.is-on {
  color: var(--tclc-navy-900); background: var(--tclc-gold-400);
  border-color: var(--tclc-gold-400);
}
.connect-share {
  min-height: 38px; padding: 8px 15px; border-radius: 999px;
  font: inherit; font-size: var(--tclc-fs-micro); font-weight: 700;
  color: var(--tclc-text); cursor: pointer;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
}
.connect-share:hover { border-color: rgba(255, 192, 0, .45); }
.connect-share.is-done { color: var(--tclc-good); border-color: var(--tclc-good); }

.connect-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.connect-item.is-off { display: none; }
.connect-item { animation: connectIn .26s ease both; }

/* The platform colour arrives from the .soc-* class each card also carries,
   and is read here through a var() fallback rather than declared as a
   default. Declaring `--soc` on .connect-card looks equivalent and is not:
   the .soc-* rules above have the same specificity, so the later rule wins
   and every card comes out gold. */
.connect-card {
  display: flex; align-items: center; gap: 12px;
  min-height: 68px; padding: 12px 14px;
  border-radius: 14px; text-decoration: none; color: var(--tclc-text);
  border: 1px solid color-mix(in srgb,
    var(--soc, var(--tclc-gold-400)) 34%, transparent);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.connect-card:hover, .connect-card:focus-visible {
  transform: translateY(-3px);
  border-color: color-mix(in srgb,
    var(--soc, var(--tclc-gold-400)) 70%, transparent);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--soc, var(--tclc-gold-400)) 16%, transparent),
      rgba(255, 255, 255, .03));
}
.connect-mark {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px;
  font-family: var(--tclc-display); font-size: 15px; letter-spacing: .02em;
  color: var(--soc, var(--tclc-gold-400));
  background: color-mix(in srgb,
    var(--soc, var(--tclc-gold-400)) 16%, transparent);
  border: 1px solid color-mix(in srgb,
    var(--soc, var(--tclc-gold-400)) 34%, transparent);
}
.connect-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.connect-name { font-weight: 700; font-size: var(--tclc-fs-body); }
.connect-note {
  color: var(--tclc-text-dim); font-size: var(--tclc-fs-micro);
  line-height: 1.35;
}
.connect-go {
  margin-left: auto; color: var(--soc, var(--tclc-gold-400)); font-size: 18px;
  opacity: .0; transform: translateX(-4px);
  transition: opacity .15s ease, transform .15s ease;
}
.connect-card:hover .connect-go, .connect-card:focus-visible .connect-go {
  opacity: 1; transform: translateX(0);
}

.connect-copy {
  margin: 6px 0 0 52px; padding: 6px 12px; min-height: 32px;
  border-radius: 999px; cursor: pointer;
  font: inherit; font-size: var(--tclc-fs-micro); font-weight: 600;
  color: var(--tclc-text-dim); background: transparent;
  border: 1px dashed rgba(255, 255, 255, .2);
}
.connect-copy:hover { color: var(--tclc-text); border-color: rgba(37, 211, 102, .5); }
.connect-copy.is-done { color: var(--tclc-good); border-color: var(--tclc-good); }

.connect-count {
  margin: 14px 0 0; color: var(--tclc-text-dim);
  font-size: var(--tclc-fs-micro);
}

@keyframes connectIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reel.is-live .reel-dot { animation: none; }
  .connect-item { animation: none; }
  .connect-card, .connect-go, .reel-poster-mark { transition: none; }
  .connect-card:hover, .connect-card:focus-visible { transform: none; }
  .connect-go { opacity: 1; transform: none; }
}

/* Recent messages --------------------------------------------------------- */

.home-sermons {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 56px) clamp(18px, 4vw, 40px) clamp(40px, 8vw, 88px);
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.home-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.home-section-head h2 { margin: 0; }
.home-section-head a {
  color: var(--tclc-gold-300);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.home-section-head a:hover { text-decoration: underline; }

.home-sermon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 14px;
}
.home-sermon {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 20px;
  border-radius: 16px;
  text-decoration: none;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255, 255, 255, .1);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.home-sermon:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 192, 0, .4);
  background: linear-gradient(180deg, rgba(255,192,0,.08), rgba(255,255,255,.02));
}
.home-sermon strong {
  font-size: var(--tclc-fs-lead);
  color: #fff;
  line-height: 1.25;
  font-weight: 700;
}
.home-sermon .home-eyebrow { margin: 0; }
.home-sermon-by { color: var(--tclc-text-muted); font-size: var(--tclc-fs-small); }
.home-sermon-ref { color: var(--tclc-gold-300); font-size: var(--tclc-fs-small); }

@media (max-width: 860px) {
  .home-hero,
  .home-portrait { grid-template-columns: 1fr; }
  /* The mark leads on a phone: it is the church's face, and the headline
     reads better underneath it than squeezed beside it. */
  .home-hero-mark { order: -1; }
  .home-hero-mark video { width: min(300px, 78%); }
}

/* Hero -------------------------------------------------------------------- */

/* The portrait behind the hero is the one with nobody else in the frame.
   This page is the church's public face -- anyone with the link reaches it
   without signing in -- so it carries only a photograph whose subject has
   asked for it to be used. The rays echo the mark without repeating it. */
.pub-hero {
  position: relative;
  max-width: 1180px; margin: 0 auto;
  padding: clamp(46px, 8vw, 92px) clamp(18px, 4vw, 40px) 30px;
  text-align: center;
  isolation: isolate;
}
.pub-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 0 0 28px 28px;
  background:
    radial-gradient(60% 100% at 50% 0%, rgba(255, 192, 0, .16), transparent 70%),
    linear-gradient(180deg, rgba(3, 6, 15, .58) 0%, rgba(3, 6, 15, .92) 62%,
      var(--tclc-ground) 100%),
    url("../brand/photos/word-bw.41c83d13bae6.jpg") center 18% / cover no-repeat;
}
.pub-hero h1 {
  font-family: var(--tclc-display);
  font-size: clamp(38px, 6.8vw, 72px);
  line-height: .96; margin: 0 0 16px; color: #fff;
  text-transform: uppercase; letter-spacing: .012em;
  text-wrap: balance;
}
.pub-hero h1 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--tclc-gold-300), var(--tclc-gold-500));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pub-hero p {
  color: var(--tclc-text-muted);
  font-size: var(--tclc-fs-lead);
  max-width: 56ch; margin: 0 auto; line-height: 1.6;
}

/* Search and filters ------------------------------------------------------ */

.pub-tools {
  max-width: 1180px; margin: 0 auto 30px;
  padding: 0 clamp(18px, 4vw, 40px);
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}
.pub-search {
  flex: 1 1 280px; display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border-color);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.pub-search:focus-within {
  border-color: var(--tclc-gold-500);
  box-shadow: 0 0 0 3px var(--tclc-gold-glow);
}
.pub-search input {
  flex: 1; background: none; border: none; outline: none;
  color: #fff; font-size: var(--tclc-fs-body); font-family: var(--tclc-sans);
}
.pub-search input::placeholder { color: var(--tclc-text-dim); }
.pub-search button {
  background: none; border: none; color: var(--tclc-gold-400);
  cursor: pointer; font-size: 17px; padding: 0 2px;
}

.pub-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.pub-chip {
  padding: 9px 17px; border-radius: 999px; text-decoration: none;
  font-size: var(--tclc-fs-small); font-weight: 600;
  color: var(--tclc-text-muted);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border-color);
  transition: all .18s ease;
  white-space: nowrap;
}
.pub-chip:hover { color: #fff; border-color: rgba(255,192,0,.45); }
.pub-chip.active {
  background: linear-gradient(135deg, var(--tclc-gold-600), var(--tclc-gold-400));
  color: var(--tclc-ink); border-color: transparent;
}

/* Featured ---------------------------------------------------------------- */

.pub-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(18px,4vw,40px) 80px; }

.pub-featured {
  display: grid; grid-template-columns: minmax(0, 320px) 1fr;
  gap: clamp(22px, 4vw, 44px); align-items: center;
  padding: clamp(22px, 3vw, 36px);
  border-radius: 26px; margin-bottom: 42px;
  border: 1px solid rgba(255,192,0,.24);
  background:
    radial-gradient(560px 300px at 82% 18%, rgba(255,192,0,.17), transparent 64%),
    linear-gradient(135deg, #050E2E, #10214F 50%, #1B2F72);
  box-shadow: var(--tclc-lift-3);
  position: relative; overflow: hidden;
}
.pub-featured::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent,
    rgba(255,203,0,.9) 35%, rgba(255,255,255,.8) 50%, rgba(255,203,0,.9) 65%, transparent);
}
.pub-eyebrow {
  color: var(--tclc-gold-300); font-size: var(--tclc-fs-micro);
  letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
  margin: 0 0 10px;
}
.pub-featured h2 {
  font-family: var(--tclc-display); font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.02; margin: 0 0 12px; color: #fff;
  text-transform: uppercase; letter-spacing: .012em;
}
.pub-meta {
  color: var(--tclc-text-muted); font-size: var(--tclc-fs-small);
  display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 14px;
}
.pub-meta span { display: inline-flex; align-items: center; gap: 6px; }
.pub-summary {
  color: #C7D2EC; font-size: var(--tclc-fs-body);
  line-height: 1.62; margin: 0 0 20px; max-width: 60ch;
}

/* Artwork ----------------------------------------------------------------- */

.pub-art {
  aspect-ratio: 1; border-radius: 20px; overflow: hidden;
  display: grid; place-items: center; position: relative;
  background: linear-gradient(150deg, #0C1A45, #01071D);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: var(--tclc-lift-2);
}
.pub-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pub-art .fallback {
  width: 62%; height: 62%; opacity: .92;
  background: url("../brand/logo-on-dark-mark.db352282c145.png") center/contain no-repeat;
}
/* Concentric rings echoing the mark, so a sermon with no artwork still
   looks intentional rather than empty. */
.pub-art::after {
  content: ""; position: absolute; inset: 8%;
  border-radius: 50%;
  border: 1px solid rgba(255,192,0,.16);
  box-shadow: 0 0 0 14px rgba(255,192,0,.05), inset 0 0 40px rgba(255,192,0,.07);
  pointer-events: none;
}

/* Grid -------------------------------------------------------------------- */

.pub-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.pub-card {
  display: flex; flex-direction: column;
  border-radius: 20px; overflow: hidden; text-decoration: none;
  border: 1px solid var(--border-color);
  background: linear-gradient(165deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  backdrop-filter: blur(12px);
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease,
              border-color .25s ease;
}
.pub-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,192,0,.42);
  box-shadow: var(--tclc-lift-2);
}
.pub-card .pub-art { border-radius: 0; border: none; box-shadow: none; }
.pub-card-body { padding: 18px 18px 20px; }
.pub-card h3 {
  font-family: var(--tclc-serif); font-size: 20px; line-height: 1.22;
  margin: 0 0 8px; color: #fff;
}
.pub-card .pub-meta { margin-bottom: 0; font-size: var(--tclc-fs-small); }

.pub-play {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 26px; border-radius: 999px; text-decoration: none;
  font-weight: 700; font-size: var(--tclc-fs-body);
  color: var(--tclc-ink);
  background: linear-gradient(135deg, var(--tclc-gold-600), var(--tclc-gold-400));
  box-shadow: 0 8px 24px rgba(255,192,0,.3);
  transition: transform .15s ease, box-shadow .25s ease;
  border: none; cursor: pointer;
}
.pub-play:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(255,192,0,.44); }

/* Detail page ------------------------------------------------------------- */

.pub-detail {
  display: grid; grid-template-columns: minmax(0, 340px) 1fr;
  gap: clamp(24px, 4vw, 48px); align-items: start;
  margin: 34px 0 48px;
}
.pub-detail h1 {
  font-family: var(--tclc-display); font-size: clamp(30px, 4.6vw, 50px);
  line-height: 1; margin: 0 0 14px; color: #fff;
  text-transform: uppercase; letter-spacing: .012em;
}

/* Player ------------------------------------------------------------------ */

.pub-player {
  margin: 24px 0 8px; padding: 22px;
  border-radius: 20px;
  border: 1px solid rgba(255,192,0,.22);
  background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
  backdrop-filter: blur(14px);
}
.pub-player audio { width: 100%; display: block; }
.pub-player-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 14px;
}
.pub-speed {
  display: flex; gap: 6px; align-items: center;
  color: var(--tclc-text-muted); font-size: var(--tclc-fs-small);
}
.pub-speed button {
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.06); color: var(--tclc-text-muted);
  border: 1px solid var(--border-color);
  font-size: var(--tclc-fs-micro); font-weight: 600;
  transition: all .15s ease;
}
.pub-speed button:hover { color: #fff; border-color: rgba(255,192,0,.4); }
.pub-speed button.active {
  background: var(--tclc-gold-500); color: var(--tclc-ink); border-color: transparent;
}
.pub-download {
  color: var(--tclc-gold-300); text-decoration: none;
  font-size: var(--tclc-fs-small); font-weight: 600;
}
.pub-download:hover { text-decoration: underline; }

/* Footer ------------------------------------------------------------------ */

.pub-footer {
  text-align: center; padding: 48px 20px 60px;
  border-top: 1px solid var(--border-color);
  margin-top: 40px;
}
.pub-footer img { opacity: .85; margin-bottom: 12px; }
.pub-tagline {
  font-family: var(--tclc-serif); color: var(--tclc-gold-300);
  font-size: var(--tclc-fs-lead); margin: 0 0 6px;
}
.pub-copy { color: var(--tclc-text-dim); font-size: var(--tclc-fs-small); margin: 0; }

.pub-empty {
  text-align: center; padding: 70px 20px;
  color: var(--tclc-text-muted); font-size: var(--tclc-fs-lead);
}

@media (max-width: 820px) {
  .pub-featured, .pub-detail { grid-template-columns: 1fr; }
  .pub-featured .pub-art, .pub-detail .pub-art { max-width: 300px; margin: 0 auto; }
}