/* ============ Fellowship of the Rockies — redesign ============ */
/* Self-hosted. These were hot-linked from irp.cdn-website.com — the OLD site's
   CDN — so the day that site is shut off, every heading on this one would have
   fallen back to Helvetica. woff2 versions of the same files (~35 KB each). */
@font-face {
  font-family: "Articulat CF Demi Bold";
  src: url("/fonts/articulat-cf-demibold.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Articulat CF Normal";
  src: url("/fonts/articulat-cf-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
:root {
  --bg: #111111;
  --panel: #1c1c1c;
  --panel-2: #232323;
  --line: #2c2c2c;
  --text: #ffffff;
  --muted: #a3a3a3;
  --dim: #6b6b6b;
  --accent-blue: #5b9bdd;
  --brand-blue: #3d7fc4;
  --brand-purple: #7b2f9e;
  --brand-lime: #b0cc2a;
  --grad: linear-gradient(105deg, #4b8fd4 0%, #8a3bb0 48%, #b0cc2a 100%);
  --mission-grad: linear-gradient(100deg, #4b8fd4 0%, #8a3bb0 22%, #b0cc2a 40%, #4b8fd4 58%, #8a3bb0 78%, #b0cc2a 100%);
  --mission-floor: .16;   /* how far an unread word sinks into the background */
  /* ---- layout (UI-CONTRACT.md §1) ---- */
  --container: 1180px;         /* wide bands  */
  --container-watch: 1440px;   /* watch page: stream + notes side by side */
  --container-content: 980px;  /* content pages */
  --container-text: 640px;     /* text columns */
  --gutter: 24px;
  --measure: 62ch;

  /* ---- type scale (UI-CONTRACT.md §2): nine roles, nothing else ---- */
  --fs-h1:    clamp(38px, 5vw, 64px);
  --fs-h2:    clamp(30px, 3.6vw, 46px);
  --fs-h3:    clamp(26px, 3vw, 34px);
  --fs-lede:  19px;
  --fs-body:  17px;
  --fs-btn:   16px;   /* buttons only — see §3 */
  --fs-small: 15px;
  --fs-eyebrow: 14.5px;
  --fs-fine:  13.5px;
  --fs-label: 12.5px;

  /* ---- radius: 4 steps, nothing else ---- */
  --radius-xs: 4px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  /* ---- elevation: 3 steps, nothing else ---- */
  --shadow-sm: 0 8px 20px var(--card-shadow);
  --shadow-md: 0 14px 34px var(--card-shadow);
  --shadow-lg: 0 24px 50px var(--card-shadow);

  /* ---- scrims + media text ---- */
  --scrim: rgba(var(--scrim-rgb), .72);
  --scrim-soft: rgba(var(--scrim-rgb), .42);
  --on-media: #ffffff;
  --on-media-rgb: 255, 255, 255;
  --on-media-muted: #d9d9d9;
  --on-media-accent: #cfe0f5;
  --media-ground: #0b0d12;
  --overlay-purple: rgba(59, 33, 92, .92);
  --btn-media-bg1: #262626; --btn-media-bg2: #1c1c1c;
  --btn-media-bg1-h: #2e2e2e; --btn-media-bg2-h: #222222;
  --btn-media-border: #3d3d3d; --btn-media-border-h: #5a5a5a;

  /* one dark scrim base, varied by alpha — replaces 7 near-identical blacks */
  --scrim-rgb: 10, 12, 16;

  /* categorical palette (ministry / group / serve tags) */
  --cat-blue: #5b9bdd; --cat-purple: #8f7fd8; --cat-lime: #b0cc2a;
  --cat-orange: #e0954d; --cat-pink: #d98fb0; --cat-red: #e0524d;
  /* one rhythm for the whole page: every section boundary = --sec-gap total */
  --sec-gap: clamp(110px, 13vh, 170px);
  --sec-half: calc(var(--sec-gap) / 2);
  --head: "Articulat CF Demi Bold", "Helvetica Neue", Arial, sans-serif;
  --body: "Articulat CF Normal", "Helvetica Neue", Arial, sans-serif;
  --serif-i: "Articulat CF Demi Bold", "Helvetica Neue", Arial, sans-serif;

  /* themable component tokens */
  --btn-bg1: #262626; --btn-bg2: #1c1c1c;
  --btn-bg1-h: #2e2e2e; --btn-bg2-h: #222222;
  --btn-border: #3d3d3d; --btn-border-h: #5a5a5a; --btn-text: #ffffff;
  --btn-sheen: rgba(var(--on-media-rgb), .07);
  --nav-bg: rgba(22,22,22,.72); --nav-border: #3c3c3c;
  --nav-link: #d7d7d7; --nav-link-h: #ffffff; --nav-link-hbg: rgba(var(--on-media-rgb), .07);
  --menu-line: #8f8f8f;
  --drawer-bg: rgba(var(--on-media-rgb), .15); --drawer-border: rgba(var(--on-media-rgb), .1);
  --drawer-text: #ffffff; --drawer-muted: rgba(var(--on-media-rgb), .75);
  --drawer-icon: rgba(var(--on-media-rgb), .85); --drawer-hover: rgba(var(--on-media-rgb), .1);
  --card-bg1: #202020; --card-bg2: #191919;
  --card-border: #2c2c2c; --card-border-h: #3e3e3e;
  --fill-on: #ffffff; --fill-off: #4d4d4d;
  --flink: #6e6e6e;
  --img-shadow: rgba(var(--scrim-rgb), .55);
  --card-shadow: rgba(var(--scrim-rgb), .4);
  --footer-glow1: rgba(123,47,158,.28);
  --footer-glow2: rgba(61,127,196,.3);
}

html[data-theme="light"] {
  /* deeper stops + a higher floor so unread words stay legible on the light ground */
  --mission-grad: linear-gradient(100deg, #3d7fc4 0%, #7b2f9e 22%, #7ba318 40%, #3d7fc4 58%, #7b2f9e 78%, #7ba318 100%);
  --mission-floor: .38;
  --bg: #f5f3ef;
  --panel: #ffffff;
  --panel-2: #f1efeb;
  --line: #e2ded7;
  --text: #171717;
  --muted: #5f5d58;
  --dim: #97928a;
  --accent-blue: #2f6fb4;

  --btn-bg1: #ffffff; --btn-bg2: #f0ede7;
  --btn-bg1-h: #ffffff; --btn-bg2-h: #f7f5f1;
  --btn-border: #d8d4cc; --btn-border-h: #b8b3a9; --btn-text: #171717;
  --btn-sheen: rgba(var(--on-media-rgb), .9);
  --nav-bg: rgba(var(--on-media-rgb), .78); --nav-border: #dcd8d0;
  --nav-link: #4c4a45; --nav-link-h: #000000; --nav-link-hbg: rgba(var(--scrim-rgb), .05);
  --menu-line: #6f6c66;
  --drawer-bg: rgba(var(--on-media-rgb), .72); --drawer-border: rgba(var(--scrim-rgb), .08);
  --drawer-text: #171717; --drawer-muted: rgba(23,23,23,.7);
  --drawer-icon: rgba(23,23,23,.78); --drawer-hover: rgba(var(--scrim-rgb), .05);
  --card-bg1: #ffffff; --card-bg2: #faf8f4;
  --card-border: #e6e2da; --card-border-h: #d2ccc2;
  --fill-on: #171717; --fill-off: #c9c4bc;
  --flink: #8f8a80;
  --img-shadow: rgba(40,32,18,.22);
  --card-shadow: rgba(40,32,18,.12);
  --footer-glow1: rgba(176,204,42,.3);
  --footer-glow2: rgba(61,127,196,.24);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  transition: background .4s ease, color .4s ease;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--head); font-weight: 400; line-height: 1.08; }
/* base sizes for every heading level, so an unclassed <h3>/<h4> can never fall
   back to a browser default. Component rules may override deliberately. */
h3 { font-size: var(--fs-h3); line-height: 1.2; }
h4 { font-size: var(--fs-lede); line-height: 1.25; }
h1, h2 { letter-spacing: -.015em; }

/* brand gradient accent text — the only place the full palette appears.
   Static CSS gradient by default; grainient.js upgrades each em to an
   animated shader canvas (adds .grain-live) when WebGL2 is available. */
.grad-text, .join-title em, .sec-title em {
  font-family: var(--head); font-style: normal;
  display: inline-block; position: relative; white-space: nowrap;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.join-title em.grain-live, .sec-title em.grain-live { background: none; }
.grain-live > .grainient-canvas { opacity: 1; }

/* ============ Primitives (UI-CONTRACT.md §3) ============
   Every top-level band uses .section; every content width uses .container.
   Do not set section padding or layout max-width anywhere else. */
.section        { padding: var(--sec-half) var(--gutter); }
.section-tight  { padding: calc(var(--sec-half) * .6) var(--gutter); }
.container         { max-width: var(--container); margin-inline: auto; }
.container-content { max-width: var(--container-content); margin-inline: auto; }
.container-text    { max-width: var(--container-text); margin-inline: auto; }

/* spacing utilities — the only sanctioned alternative to an inline margin */
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }

.grid-auto { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grid-2    { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); }
.grid-3    { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.card {
  background: linear-gradient(180deg, var(--card-bg1), var(--card-bg2));
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-md);
  transition: border-color .25s ease, transform .25s ease;
}
.card:hover { border-color: var(--card-border-h); }

/* ============ Buttons ============
   ONE geometry. Variants change color only. The single sanctioned deviation is
   .btn-ghost's horizontal padding: a borderless button needs to optically align
   with the left edge of the prose above it, so it keeps .btn's vertical padding
   (heights match in a .cta-row) and narrows the inline padding. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--head); font-size: var(--fs-btn); color: var(--btn-text);
  background: linear-gradient(180deg, var(--btn-bg1), var(--btn-bg2));
  border: 1px solid var(--btn-border); border-radius: var(--radius-md);
  padding: 12px 24px; cursor: pointer;
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--btn-sheen);
  transition: transform .25s ease, border-color .25s ease, background .25s ease, gap .25s ease, color .25s ease;
}
.btn:hover { transform: translateY(-2px); border-color: var(--btn-border-h); background: linear-gradient(180deg, var(--btn-bg1-h), var(--btn-bg2-h)); }
.btn-solid { /* default skin — geometry comes from .btn */ }
.btn-ghost {
  background: none; border-color: transparent; box-shadow: none;
  color: var(--text); padding-inline: 8px;
}
.btn-ghost:hover { transform: none; border-color: transparent; background: none; gap: 12px; color: var(--accent-blue); }

/* ============ Header ============ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center;
  padding: 20px 32px; pointer-events: none;
}
.site-header > * { pointer-events: auto; }
.menu-btn {
  width: 44px; height: 40px; background: none; border: 0; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
}
.menu-btn span {
  height: 2.5px; border-radius: var(--radius-xs); background: var(--menu-line);
  transition: background .25s ease, width .25s ease;
}
.menu-btn span:nth-child(1) { width: 30px; }
.menu-btn span:nth-child(2) { width: 22px; }
.menu-btn span:nth-child(3) { width: 26px; }
.menu-btn:hover span { background: var(--text); width: 30px; }
.logo { margin-left: 24px; display: flex; align-items: center; }
/* horizontal lockup is ~5:1, so it needs far less height than the stacked mark */
.logo img { height: 40px; width: auto; opacity: .95; transition: opacity .2s ease; }
.logo:hover img { opacity: 1; }
html[data-theme="light"] .logo img { filter: invert(1); opacity: .88; }
.pill-nav {
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
  background: var(--nav-bg);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--nav-border); border-radius: var(--radius-md);
  padding: 8px 16px;
  box-shadow: var(--shadow-md);
}
.pill-nav a {
  font-family: var(--head); font-size: var(--fs-small); color: var(--nav-link);
  padding: 8px 12px; border-radius: var(--radius-sm);
  white-space: nowrap; flex: 0 0 auto;
  transition: color .2s ease, background .2s ease;
}
.pill-nav a:hover { color: var(--nav-link-h); background: var(--nav-link-hbg); }

.theme-btn {
  margin-left: 12px; flex: 0 0 auto;
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--nav-bg); color: var(--nav-link);
  border: 1px solid var(--nav-border); cursor: pointer;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-md);
  transition: color .25s ease, transform .35s ease, background .25s ease;
}
.theme-btn:hover { color: var(--nav-link-h); transform: rotate(20deg); }
.theme-btn .moon { display: none; }
html[data-theme="light"] .theme-btn .sun { display: none; }
html[data-theme="light"] .theme-btn .moon { display: block; }

/* ============ Drawer ============ */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(var(--scrim-rgb), .45);
  opacity: 0; pointer-events: none; transition: opacity .35s ease;
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
/* Glass panel, matching the Cornerstone Athens drawer:
   320px wide, flush to the top-left, 20px radius, translucent + blur. */
.drawer {
  position: fixed; z-index: 71; top: 0; bottom: 0; left: 0;
  width: 320px; overflow-y: auto; overscroll-behavior: contain;
  background: var(--drawer-bg);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--drawer-border); border-radius: var(--radius-md);
  padding: 24px 24px 20px;
  transform: translateX(-100%);
  transition: transform .45s cubic-bezier(.32,.72,.24,1);
  scrollbar-width: thin; scrollbar-color: rgba(var(--on-media-rgb), .25) transparent;
}
.drawer.open { transform: translateX(0); }
.drawer-close {
  position: absolute; top: 20px; right: 18px;
  background: none; border: 0; color: var(--drawer-text); cursor: pointer; opacity: .85;
  transition: transform .3s ease, opacity .2s ease;
}
.drawer-close:hover { opacity: 1; transform: rotate(90deg); }
.drawer-group { margin-bottom: 32px; }
.drawer-group h4 {
  font-family: var(--body); font-weight: 400; font-size: var(--fs-lede);
  color: var(--drawer-muted); margin-bottom: 16px;
}
.drawer-item {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 8px 8px; border-radius: var(--radius-sm);
  opacity: 0; transform: translateX(-14px);
  transition: opacity .5s ease, transform .5s ease, background .2s ease;
  transition-delay: var(--d, 0s);
}
.drawer.open .drawer-item { opacity: 1; transform: none; }
.drawer-item:hover { background: var(--drawer-hover); }
/* solid single-color icons (no gradient) */
.drawer-item .di-icon {
  flex: 0 0 auto; width: 29px; height: 29px; margin-top: 1px;
  color: var(--drawer-icon);
  transition: color .2s ease;
}
.drawer-item:hover .di-icon { color: var(--drawer-text); }
.drawer-item strong {
  display: block; font-family: var(--head); font-weight: 400;
  font-size: var(--fs-lede); line-height: 1.2; color: var(--drawer-text);
}
.drawer-item small {
  display: block; font-family: var(--body); font-size: var(--fs-fine);
  color: var(--drawer-muted); line-height: 1.35; margin-top: 4px;
}
.drawer-foot { border-top: 1px solid var(--drawer-border); padding-top: 16px; display: grid; gap: 8px; }
.drawer-foot > a { font-size: var(--fs-eyebrow); color: var(--drawer-muted); }
.drawer-foot > a:hover { color: var(--drawer-text); }
.drawer-social { display: flex; gap: 16px; padding: 4px 0; }
.drawer-social a { color: var(--drawer-muted); transition: color .2s ease, transform .2s ease; }
.drawer-social a:hover { color: var(--drawer-text); transform: translateY(-2px); }
.drawer-legal { display: flex; gap: 12px; }
.drawer-legal a { font-size: var(--fs-label); color: var(--drawer-muted); }
.drawer-legal a:hover { color: var(--drawer-text); }
.drawer-copy { font-size: var(--fs-label); color: var(--drawer-muted); opacity: .75; }

/* ============ Aurora (top-of-page background) ============ */
/* Sits behind everything at the very top; the hero card and sections (all
   positioned, later in the DOM) paint over it, so the aurora shows as an
   ambient glow behind the header and around the hero. Rendered by aurora.js;
   degrades to nothing (transparent) without WebGL2. */
/* Aurora now lives in the footer, glowing up from the bottom edge (replaces the
   old radial corner-glows). scaleY(-1) flips the shader so its curtains rise
   from the bottom; the mask then fades it out toward the top of the footer. */
.aurora-bottom {
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none; overflow: hidden;
  transform: scaleY(-1);
  -webkit-mask-image: linear-gradient(to bottom, #000 34%, transparent 90%);  /* ui-exempt: mask needs an opaque colour, not a theme colour */
  mask-image: linear-gradient(to bottom, #000 34%, transparent 90%);  /* ui-exempt: mask needs an opaque colour, not a theme colour */
}
.aurora-bottom canvas { position: absolute; inset: 0; display: block; }
/* Light theme uses brighter aurora colours (set in aurora.js) so they stay
   vivid on cream; a modest opacity keeps it from overpowering the page. */
html[data-theme="light"] .aurora-bottom { opacity: .55; }
/* keep footer content above the aurora */
.footer-inner, .footer-bar, .footer-copy { position: relative; z-index: 1; }

/* ============ Hero ============ */
/* Matches the Cornerstone Athens hero: near-full-bleed panel (20px gutters),
   40px radius, tall, with bare chevron arrows and pill pagination. */
.hero { position: relative; padding: 116px 20px 0; margin-bottom: var(--sec-half); }
.hero-track {
  position: relative; height: clamp(400px, 68vh, 560px);
  border-radius: var(--radius-lg); overflow: hidden;
}
.hero-slide {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: var(--radius-lg);
  opacity: 0; transform: scale(.985); pointer-events: none;
  transition: opacity .7s ease, transform .7s ease;
  background: var(--media-ground);
}
.hero-slide.is-active { opacity: 1; transform: none; pointer-events: auto; }
.hs-media, .hs-media video, .hs-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hs-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--scrim-rgb), .18) 0%, rgba(var(--scrim-rgb), .28) 45%, rgba(var(--scrim-rgb), .82) 100%),
              linear-gradient(100deg, rgba(var(--scrim-rgb), .55) 0%, rgba(var(--scrim-rgb), 0) 55%);
}
/* hero copy always sits over dark imagery — keep it light in both themes */
.hs-content {
  position: absolute; left: clamp(24px, 5vw, 70px); right: 24px; bottom: clamp(28px, 6vh, 64px);
  max-width: var(--container-text); color: var(--on-media);
}
.hs-content h1, .hs-content h2 { color: var(--on-media); }
.hs-eyebrow {
  font-family: var(--head); font-size: var(--fs-small); letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-media-muted); margin-bottom: 12px;
  opacity: 0; transform: translateY(18px);
}
.hs-content h1, .hs-content h2 {
  font-size: var(--fs-h1); margin-bottom: 16px;
  opacity: 0; transform: translateY(24px);
}
.hs-text {
  color: var(--on-media-muted); font-size: var(--fs-body); max-width: var(--container-text); margin-bottom: 24px;
  opacity: 0; transform: translateY(24px);
}
.hs-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; opacity: 0; transform: translateY(24px); }
.hs-actions .btn {
  background: linear-gradient(180deg, var(--btn-media-bg1), var(--btn-media-bg2));
  border-color: var(--btn-media-border); color: var(--on-media);
}
.hs-actions .btn:hover { border-color: var(--btn-media-border-h); background: linear-gradient(180deg, var(--btn-media-bg1-h), var(--btn-media-bg2-h)); }
.hs-actions .btn-ghost { color: var(--on-media); }
.hs-actions .btn-ghost:hover { color: var(--accent-blue); }
.hero-slide.is-active .hs-eyebrow { animation: rise .8s .15s cubic-bezier(.22,.7,.3,1) forwards; }
.hero-slide.is-active h1, .hero-slide.is-active h2 { animation: rise .8s .28s cubic-bezier(.22,.7,.3,1) forwards; }
.hero-slide.is-active .hs-text { animation: rise .8s .42s cubic-bezier(.22,.7,.3,1) forwards; }
.hero-slide.is-active .hs-actions { animation: rise .8s .55s cubic-bezier(.22,.7,.3,1) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* bare chevrons — no circular background, like Cornerstone */
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer;
  color: var(--on-media); opacity: .8;
  filter: drop-shadow(0 2px 6px rgba(var(--scrim-rgb), .55));
  transition: opacity .25s ease, transform .25s ease;
}
.hero-arrow:hover { opacity: 1; }
/* 30px inside the track (hero has 20px of its own padding) */
.hero-arrow.prev { left: 50px; }
.hero-arrow.next { right: 50px; }
.hero-arrow.prev:hover { transform: translateY(-50%) translateX(-3px); }
.hero-arrow.next:hover { transform: translateY(-50%) translateX(3px); }

.hero-dots { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; gap: 8px; z-index: 5; }
.hero-dots button {
  width: 8px; height: 8px; border-radius: var(--radius-xs); border: 0; cursor: pointer;
  background: var(--on-media); opacity: .2;
  transition: width .35s ease, opacity .35s ease;
}
.hero-dots button:hover { opacity: .5; }
.hero-dots button.is-active { width: 22px; opacity: 1; }
/* keep the 8px dot, but give thumbs a real target */
.hero-dots button { position: relative; }
.hero-dots button::after { content: ""; position: absolute; inset: -15px -7px; }

/* ============ Mission ============ */
.mission {
  position: relative;
  padding: var(--sec-half) 24px;
  min-height: clamp(560px, 82vh, 780px);
  overflow: clip;
  display: flex; align-items: center; justify-content: center;
}
.fill-text {
  max-width: 1280px; text-align: center; margin-inline: auto;  /* ui-exempt: component ramp, not a layout container */
  font-size: clamp(52px, 10.4vw, 168px); line-height: 1.02; letter-spacing: -.02em;  /* ui-exempt: display ramp */
  color: var(--fill-off);
  position: relative; z-index: 2;
}
/* Each word is filled with a slow-moving brand gradient, clipped to the glyphs so
   the section background shows through everywhere else. Words start nearly sunk
   into the background and rise to full colour as you scroll (--t set per word in JS). */
.fill-text .w {
  background-image: var(--mission-grad);
  background-size: 320% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  opacity: calc(var(--mission-floor) + var(--t, 0) * (1 - var(--mission-floor)));
  transition: opacity .12s linear;
  animation: mission-grad 20s linear infinite;
}
@keyframes mission-grad {
  from { background-position: 0% 50%; }
  to   { background-position: 320% 50%; }
}
/* WebGL upgrade: the masked canvas supplies the motion, so drop the CSS copy */
.fill-text.grain-live .w { background: none; animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fill-text .w { animation: none; } }


.float-img {
  position: absolute; z-index: 1;
  border-radius: var(--radius-md); object-fit: cover;
  box-shadow: var(--shadow-lg);
  will-change: transform;
}
/* balanced 2-left / 3-right composition hugging the edges, clear of the text */
.fl-1 { width: clamp(160px, 16vw, 280px); aspect-ratio: 3 / 2;    left: 2.5%;  top: 7%;  --rot: -6deg; }
.fl-2 { width: clamp(140px, 13vw, 220px); aspect-ratio: 4 / 5;    left: 5%;  top: 52%; --rot: 4.5deg; }
.fl-3 { width: clamp(170px, 17vw, 300px); aspect-ratio: 16 / 9;   right: 2.5%; top: 8%;  --rot: 5deg; }
.fl-4 { width: clamp(130px, 12vw, 200px); aspect-ratio: 1 / 1;    right: 3.5%; top: 40%; --rot: -4deg; }
.fl-5 { width: clamp(150px, 14vw, 230px); aspect-ratio: 5 / 4;    right: 10%; top: 66%; --rot: 3deg; }

/* ============ Join us sunday ============ */
.join { text-align: center; padding: var(--sec-half) 24px; }
.join-title { font-size: var(--fs-h1); }
.join-title em { padding-left: 4px; }
.join-text { color: var(--muted); max-width: var(--container-text); margin: 24px auto 28px; font-size: var(--fs-body); }
.join-times { display: flex; gap: 16px; justify-content: center; }

/* ============ Ministries ============ */
.ministries {
  max-width: var(--container); margin: 88px auto 0;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px;
  text-align: left;
}
.min-card { grid-column: span 2; }
.min-card.wide { grid-column: span 3; }
.min-card {
  background: linear-gradient(180deg, var(--card-bg1), var(--card-bg2));
  border: 1px solid var(--card-border); border-radius: var(--radius-lg);
  padding: 0 24px 28px;
  box-shadow: var(--shadow-lg);
  transition: transform .35s ease, border-color .35s ease;
}
.min-card:hover { transform: translateY(-6px); border-color: var(--card-border-h); }
.mc-img {
  margin: -18px 0 24px; border-radius: var(--radius-md); overflow: hidden;
  transform: rotate(-3.2deg); transform-origin: center;
  box-shadow: var(--shadow-md);
  transition: transform .45s cubic-bezier(.22,.7,.3,1);
  aspect-ratio: 16 / 10;
}
.min-card:not(.wide) .mc-img { aspect-ratio: 1 / 1.02; }
.mc-img.tilt-r { transform: rotate(3.2deg); }
.min-card:hover .mc-img { transform: rotate(0deg) scale(1.02); }
.mc-img img { width: 100%; height: 100%; object-fit: cover; }
.min-card h3 { font-size: var(--fs-h3); margin-bottom: 8px; }
.min-card p { color: var(--muted); font-size: var(--fs-small); margin-bottom: 16px; min-height: 44px; }

/* ============ Fan section ============ */
/* Not pinned — a pinned version needs ~1.5 viewports of height, which left a lot
   of dead space. The section is now only as tall as its content; the cards spread
   as it travels through the viewport (progress computed in script.js). */
.fan-section {
  position: relative;
  margin-top: var(--sec-half);
  margin-bottom: var(--sec-half);
}
.fan-sticky {
  position: relative; overflow: hidden;
  padding: 8px 0 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.fan {
  position: relative; width: min(1140px, 92vw); height: 285px;
  margin-bottom: 0;
}
.fan-card {
  position: absolute; left: 50%; top: 50%;
  width: 235px; height: 235px; margin: -117px 0 0 -117px;
  border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform: translate(var(--tx, 0), var(--ty, 0)) rotate(var(--rot, 0));
  z-index: var(--z, 1);
  transition: box-shadow .3s ease;
  will-change: transform;
}
.fan-card img { width: 100%; height: 100%; object-fit: cover; }
.fc-overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  padding: 16px;
  background: var(--overlay-purple);
  opacity: 0; transition: opacity .3s ease;
}
.fc-overlay strong { font-family: var(--head); font-weight: 400; font-size: var(--fs-lede); color: var(--on-media); }
.fc-overlay em { font-style: normal; font-size: var(--fs-eyebrow); color: var(--on-media-muted); }
.fan-card:hover .fc-overlay { opacity: 1; }

.coming-up { text-align: center; }
.coming-up h2 { font-size: var(--fs-h1); margin-bottom: 12px; }
.coming-up p { color: var(--muted); margin-bottom: 20px; }

/* ============ Footer ============ */
.footer {
  position: relative; z-index: 1; padding: var(--sec-half) 34px 30px;
  background: var(--bg);
  overflow: hidden;
  transition: background .4s ease;
}
.footer-inner {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: 1.15fr .9fr 1fr; gap: 40px;
  align-items: center; min-height: 480px;
}
.footer-links { display: flex; gap: 56px; position: relative; }
.footer-links a { white-space: nowrap; }
/* Grainient canvas (used by the headline accents only — the footer links are
   a flat solid colour, see .footer-links a below) */
.grainient-canvas {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity 1.2s ease .15s;
}
.fl-col { display: grid; gap: 16px; align-content: start; }
.footer-links a {
  font-family: var(--head); font-size: var(--fs-h2);
  letter-spacing: .02em; text-transform: uppercase; color: var(--flink);
  position: relative; width: fit-content;
  transition: color .3s ease;
}
.footer-links a::after {
  content: ""; position: absolute; left: 0; bottom: -3px;
  width: 100%; height: 2px; background: var(--text);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s ease;
}
.footer-links a:hover { color: var(--text); }
.footer-links a:hover::after { transform: scaleX(1); }

.footer-app { text-align: center; }
.footer-app h3 { font-size: var(--fs-h2); margin-bottom: 16px; }
.footer-app p { font-family: var(--head); color: var(--muted); font-size: var(--fs-lede); margin-bottom: 8px; }

.footer-phone { display: flex; justify-content: center; }
.footer-phone img {
  /* landscape card so the church exterior reads, not a cropped vertical slice */
  width: min(470px, 94%); aspect-ratio: 3 / 2; object-fit: cover; object-position: center 45%;
  border-radius: var(--radius-lg); transform: rotate(6deg);
  box-shadow: var(--shadow-lg);
  animation: phone-float 6s ease-in-out infinite;
}
@keyframes phone-float {
  0%, 100% { transform: rotate(6deg) translateY(0); }
  50% { transform: rotate(4.5deg) translateY(-12px); }
}

.footer-bar {
  max-width: var(--container); margin: 48px auto 0;
  padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
/* the footer sits on a coloured glow, so everything in the bottom bar stays white
   rather than the muted greys used elsewhere */
.fb-left { display: grid; gap: 4px; }
.fb-left a { color: var(--on-media); font-size: var(--fs-small); }
.fb-left a:hover { color: var(--on-media); opacity: .78; }
.fb-social { display: flex; gap: 16px; }
.fb-social a { color: var(--on-media); transition: opacity .2s ease, transform .2s ease; }
.fb-social a:hover { opacity: .78; transform: translateY(-3px); }
.fb-right { display: flex; gap: 20px; }
.fb-right a { color: var(--on-media); font-size: var(--fs-eyebrow); }
.fb-right a:hover { color: var(--on-media); opacity: .78; }
.footer-copy { text-align: center; color: var(--on-media); opacity: .8; font-size: var(--fs-fine); margin-top: 24px; }
/* the light theme's footer ground is cream, so flip the bar to ink there */
html[data-theme="light"] .fb-left a,
html[data-theme="light"] .fb-social a,
html[data-theme="light"] .fb-right a,
html[data-theme="light"] .footer-copy { color: #171717; }
/* On cream the aurora composites to a mid-tone (the purple band lands near
   L=.43), so --muted #5f5d58 sitemap links fell to ~2.5:1 there. Darker ink
   holds >=5:1 across every band while staying softer than the headings. */
/* The rules bracketing the footer sitemap are white on the dark ground; on
   cream a white hairline would disappear, so light theme keeps an ink line. */
.footer-bar { border-top-color: rgba(var(--on-media-rgb), .3); }
html[data-theme="light"] .footer-sitemap,
html[data-theme="light"] .footer-bar { border-top-color: rgba(23, 23, 23, .3); }
html[data-theme="light"] .footer-sitemap a { color: #2f2d29; }
html[data-theme="light"] .footer-sitemap a:hover { color: #000; }
html[data-theme="light"] .fb-left a:hover,
html[data-theme="light"] .fb-right a:hover { color: #171717; opacity: .7; }
.footer-copy a { text-decoration: underline; }

/* ============ Shared section headings ============ */
.sec-eyebrow {
  font-family: var(--head); font-size: var(--fs-eyebrow); letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-blue); margin-bottom: 12px;
}
.sec-title { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -.015em; }

/* ---- type scale (UI-CONTRACT.md §2) — the only nine text roles ---- */
.sub-title { font-family: var(--head); font-size: var(--fs-h3); line-height: 1.2; letter-spacing: 0; }  /* alias of the h3 role */
.lede      { font-size: var(--fs-lede); line-height: 1.5; color: var(--text); }
.small     { font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
.label     { font-family: var(--head); font-size: var(--fs-label); line-height: 1.25; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }

/* ============ Values strip ============ */
.values { text-align: center; padding: var(--sec-half) 24px; }
.values-row {
  max-width: var(--container); margin: 48px auto 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
}
.value-tile {
  background: linear-gradient(180deg, var(--card-bg1), var(--card-bg2));
  border: 1px solid var(--card-border); border-radius: var(--radius-md);
  padding: 24px 20px 24px; text-align: left;
  box-shadow: var(--shadow-md);
  transition: transform .35s ease, border-color .35s ease;
}
.value-tile:hover { transform: translateY(-6px); border-color: var(--card-border-h); }
.value-tile span {
  font-family: var(--head); font-size: var(--fs-label); letter-spacing: .1em;
  color: var(--accent-blue);
}
.value-tile h3 { font-size: var(--fs-lede); margin: 8px 0 8px; }
.value-tile p { color: var(--muted); font-size: var(--fs-fine); line-height: 1.5; }
/* the CTA lives in its own <p> after the copy — give it real breathing room */
.value-tile p + p { margin-top: 16px; }
/* covers the same case in prose blocks (e.g. Visit -> About Fellowship KIDS) */
.prose-block p:has(> .btn), .value-tile p:has(> .btn) { margin-top: 20px; }
.value-tile p .btn { margin-top: 4px; }

/* ============ Service time cards ============ */
.times-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.time-card {
  display: grid; gap: 4px; justify-items: center;
  min-width: 180px; padding: 20px 32px 16px;
  background: linear-gradient(180deg, var(--card-bg1), var(--card-bg2));
  border: 1px solid var(--card-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  transition: transform .3s ease, border-color .3s ease;
}
.time-card:hover { transform: translateY(-4px); border-color: var(--card-border-h); }
.time-card small { font-family: var(--head); font-size: var(--fs-eyebrow); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.time-card strong { font-family: var(--head); font-weight: 400; font-size: var(--fs-h3); color: var(--text); }
.time-card em { font-style: normal; font-size: var(--fs-fine); color: var(--accent-blue); }
.join-address { margin-top: 24px; color: var(--muted); font-size: var(--fs-small); display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.join-address svg { color: var(--accent-blue); }
.join-address a { color: var(--text); }
.join-address a:hover { color: var(--accent-blue); }

/* ============ Ministries rail (Apple "get to know" style) ============ */
.rail-section { padding: var(--sec-half) 0; }
.rail-head {
  max-width: var(--container); margin: 0 auto 32px; padding: 0 24px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
}
.rail-arrows { display: flex; gap: 8px; }
.rail-arrows button {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--btn-bg1), var(--btn-bg2));
  border: 1px solid var(--btn-border); color: var(--btn-text);
  transition: transform .25s ease, border-color .25s ease;
}
.rail-arrows button:hover { transform: scale(1.08); border-color: var(--btn-border-h); }
.rail-arrows button:disabled { opacity: .35; transform: none; cursor: default; }
.rail {
  display: flex; gap: 20px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 10px max(24px, calc((100vw - 1180px) / 2)) 26px;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail-card {
  position: relative; flex: 0 0 300px; height: 400px;
  border-radius: var(--radius-lg); overflow: hidden; scroll-snap-align: start;
  box-shadow: var(--shadow-lg);
  transition: transform .35s ease;
}
.rail-card:hover { transform: translateY(-6px); }
.rail-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.22,.7,.3,1);
}
.rail-card:hover img { transform: scale(1.05); }
.rc-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--scrim-rgb), .42) 0%, rgba(var(--scrim-rgb), 0) 35%, rgba(var(--scrim-rgb), .78) 100%);
}
.rc-eyebrow {
  position: absolute; top: 18px; left: 20px;
  font-family: var(--head); font-size: var(--fs-fine); letter-spacing: .15em;
  text-transform: uppercase; color: rgba(var(--on-media-rgb), .88);
}
.rc-body { position: absolute; left: 20px; right: 20px; bottom: 18px; display: grid; gap: 4px; }
.rc-body strong { font-family: var(--head); font-weight: 400; font-size: var(--fs-h3); color: var(--on-media); line-height: 1.1; }
.rc-body small { color: var(--on-media-muted); font-size: var(--fs-eyebrow); line-height: 1.45; }

/* ============ Events list rows ============ */
.events { max-width: var(--container-content); margin: 0 auto; padding: var(--sec-half) 24px; text-align: center; }
.event-rows { margin: 44px 0 0; display: grid; gap: 16px; text-align: left; }
.event-row {
  display: flex; align-items: center; gap: 20px;
  background: linear-gradient(180deg, var(--card-bg1), var(--card-bg2));
  border: 1px solid var(--card-border); border-radius: var(--radius-md);
  padding: 16px 24px;
  box-shadow: var(--shadow-md);
  transition: transform .3s ease, border-color .3s ease;
}
/* no row-shift on hover — the row now holds buttons, which need a stable target */
.event-row:hover { border-color: var(--card-border-h); }
/* main area (date + info) opens the details modal; actions sit at the end */
.ev-main { display: flex; align-items: center; gap: 20px; flex: 1; min-width: 0; cursor: pointer; }
.ev-actions { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.ev-more {
  display: inline-flex; align-items: center;
  font-family: var(--head); font-size: var(--fs-small); color: var(--text);
  background: none; border: 0; padding: 8px 0; cursor: pointer;
  transition: color .25s ease; white-space: nowrap;
}
.ev-more:hover { color: var(--accent-blue); }
.ev-register {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: var(--head); font-size: var(--fs-small); color: var(--btn-text);
  background: linear-gradient(180deg, var(--btn-bg1-h), var(--btn-bg2));
  border: 1px solid var(--btn-border); border-radius: var(--radius-sm);
  padding: 12px 20px;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, border-color .25s ease;
}
.ev-register:hover { transform: translateY(-2px); border-color: var(--btn-border-h); }
.ev-date {
  flex: 0 0 auto; width: 58px; height: 58px; border-radius: var(--radius-md);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--nav-link-hbg); border: 1px solid var(--card-border);
}
.ev-date strong { font-family: var(--head); font-weight: 400; font-size: var(--fs-h3); color: var(--text); line-height: 1; }
.ev-date small { font-size: var(--fs-label); letter-spacing: .14em; color: var(--accent-blue); margin-top: 4px; }
.ev-info { display: grid; gap: 4px; }
.ev-info strong { font-family: var(--head); font-weight: 400; font-size: var(--fs-lede); color: var(--text); }
.ev-info small { color: var(--muted); font-size: var(--fs-eyebrow); }

/* ============ Online + Give duo tiles ============ */
.duo { margin-top: 72px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; text-align: left; }
.duo-tile {
  background: linear-gradient(180deg, var(--card-bg1), var(--card-bg2));
  border: 1px solid var(--card-border); border-radius: var(--radius-lg);
  padding: 32px 32px 32px;
  box-shadow: var(--shadow-lg);
}
.duo-tile h3 { font-size: var(--fs-h3); margin-bottom: 12px; }
.duo-text { color: var(--muted); font-size: var(--fs-small); margin-bottom: 24px; }
.duo-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 24px; }
.duo-note { margin-top: 16px; color: var(--dim); font-size: var(--fs-fine); }
.live-dot {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--head); font-size: var(--fs-fine); letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-blue); margin-bottom: 8px;
}
.live-dot span {
  width: 8px; height: 8px; border-radius: 50%; background: var(--cat-red);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* ============ Events page ============ */
.page-hero {
  position: relative; padding: 116px 20px 0;
  margin-bottom: var(--sec-half);
}
.page-hero-banner {
  position: relative; height: clamp(300px, 44vh, 440px);
  border-radius: var(--radius-lg); overflow: hidden;
}
.page-hero-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--scrim-rgb), .2) 0%, rgba(var(--scrim-rgb), 0) 40%, rgba(var(--scrim-rgb), .8) 100%);
}
.page-hero-content {
  position: absolute; left: clamp(24px, 5vw, 56px); right: clamp(24px, 5vw, 56px);
  bottom: clamp(24px, 5vh, 44px); z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.page-hero-content .ph-eyebrow {
  font-family: var(--head); font-size: var(--fs-fine); letter-spacing: .16em;
  text-transform: uppercase; color: var(--on-media-accent); margin-bottom: 8px;
}
.page-hero-content h1 { color: var(--on-media); font-size: var(--fs-h1); }

.events-page { max-width: var(--container); margin: 0 auto; padding: 0 24px var(--sec-half); }
.events-page .sec-eyebrow { text-align: left; }
.events-page > .sec-title { margin-bottom: 44px; }
.event-cards {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px;
}
.event-card {
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--card-bg1), var(--card-bg2));
  border: 1px solid var(--card-border); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition: transform .35s ease, border-color .35s ease;
}
.event-card:hover { transform: translateY(-6px); border-color: var(--card-border-h); }
.ec-art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--media-ground); }
.ec-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22,.7,.3,1); }
.event-card:hover .ec-art img { transform: scale(1.04); }
.ec-datechip {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  display: grid; justify-items: center; gap: 1px;
  min-width: 54px; padding: 8px 12px; border-radius: var(--radius-sm);
  background: rgba(var(--scrim-rgb), .72); border: 1px solid rgba(var(--on-media-rgb), .14);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.ec-datechip strong { font-family: var(--head); font-weight: 400; font-size: var(--fs-lede); color: var(--on-media); line-height: 1; }
.ec-datechip small { font-size: var(--fs-label); letter-spacing: .14em; color: var(--on-media-accent); margin-top: 4px; }
.ec-body { padding: 24px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.ec-meta { font-family: var(--head); font-size: var(--fs-label); letter-spacing: .04em; text-transform: uppercase; color: var(--accent-blue); margin-bottom: 8px; }
.ec-body h3 { font-size: var(--fs-h3); margin-bottom: 12px; line-height: 1.12; }
.ec-desc {
  color: var(--muted); font-size: var(--fs-small); line-height: 1.55; margin-bottom: 20px;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
/* two distinct actions per card: Read More (details modal) and a direct link
   straight to that event's Church Center page — no extra click to register */
.ec-art { cursor: pointer; }
.ec-actions {
  margin-top: auto; padding-top: 4px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.ec-more {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--head); font-size: var(--fs-small); color: var(--text);
  background: none; border: 0; padding: 8px 0; cursor: pointer;
  transition: color .25s ease;
}
.ec-more:hover { color: var(--accent-blue); }
.ec-register {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--head); font-size: var(--fs-small); color: var(--btn-text);
  background: linear-gradient(180deg, var(--btn-bg1-h), var(--btn-bg2));
  border: 1px solid var(--btn-border); border-radius: var(--radius-sm);
  padding: 12px 20px;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, border-color .25s ease;
}
.ec-register:hover { transform: translateY(-2px); border-color: var(--btn-border-h); }
@media (max-width: 760px) {
  .event-cards { grid-template-columns: 1fr; }
  .page-hero { padding: 100px 16px 0; }
}

/* ============ Event detail modal ============ */
.ev-modal {
  position: fixed; inset: 0; z-index: 90;
  display: none; align-items: flex-start; justify-content: center;
  padding: 6vh 16px 5vh; overflow-y: auto;
}
.ev-modal.open { display: flex; }
.ev-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(var(--scrim-rgb), .66);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .3s ease;
}
.ev-modal.open .ev-modal-backdrop { opacity: 1; }
.ev-modal-card {
  position: relative; z-index: 1; margin: auto 0;
  width: min(920px, 100%);
  background: linear-gradient(180deg, var(--card-bg1), var(--card-bg2));
  border: 1px solid var(--card-border); border-radius: var(--radius-lg); overflow: hidden;
  display: grid; grid-template-columns: 1.02fr 1fr;
  box-shadow: var(--shadow-lg);
  transform: translateY(18px) scale(.985); opacity: 0;
  transition: transform .38s cubic-bezier(.22,.7,.3,1), opacity .38s ease;
}
.ev-modal.open .ev-modal-card { transform: none; opacity: 1; }
.ev-modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--scrim-rgb), .6); color: var(--on-media); cursor: pointer;
  border: 1px solid rgba(var(--on-media-rgb), .18);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform .3s ease, background .2s ease;
}
.ev-modal-close:hover { background: rgba(var(--scrim-rgb), .8); transform: rotate(90deg); }
.ev-modal-art { position: relative; min-height: 280px; background: var(--media-ground); }
.ev-modal-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ev-modal-datechip {
  position: absolute; top: 18px; left: 18px; z-index: 2;
  display: grid; justify-items: center; gap: 1px;
  min-width: 58px; padding: 8px 12px; border-radius: var(--radius-md);
  background: rgba(var(--scrim-rgb), .72); border: 1px solid rgba(var(--on-media-rgb), .14);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.ev-modal-datechip strong { font-family: var(--head); font-weight: 400; font-size: var(--fs-h3); color: var(--on-media); line-height: 1; }
.ev-modal-datechip small { font-size: var(--fs-label); letter-spacing: .14em; color: var(--on-media-accent); margin-top: 4px; }
.ev-modal-body { padding: 36px 36px 32px; }
.ev-modal-eyebrow {
  font-family: var(--head); font-size: var(--fs-label); letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-blue); margin-bottom: 8px;
}
.ev-modal-body h2 { font-size: var(--fs-h3); margin-bottom: 16px; line-height: 1.1; }
.ev-modal-meta { display: grid; gap: 8px; margin-bottom: 20px; }
.evm-row { display: flex; align-items: flex-start; gap: 12px; color: var(--muted); font-size: var(--fs-small); }
.evm-row svg { flex: 0 0 auto; margin-top: 4px; color: var(--accent-blue); }
.ev-modal-desc { color: var(--muted); font-size: var(--fs-small); line-height: 1.6; margin-bottom: 24px; }
.ev-modal-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 24px; }
.ev-modal-actions .btn { background: linear-gradient(180deg, var(--btn-bg1-h), var(--btn-bg2)); }
.ev-modal-free { font-size: var(--fs-fine); color: var(--dim); }
@media (max-width: 720px) {
  .ev-modal { padding: 0; }
  .ev-modal-card { grid-template-columns: 1fr; border-radius: 0; min-height: 100%; width: 100%; }
  .ev-modal-art { min-height: 220px; }
  .ev-modal-body { padding: 24px 24px 32px; }
}

/* ============ Reveal on scroll ============ */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s cubic-bezier(.22,.7,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-link { opacity: 0; transform: translateY(24px); transition: opacity .7s ease var(--d, 0s), transform .7s cubic-bezier(.22,.7,.3,1) var(--d, 0s); }
.reveal-link.in { opacity: 1; transform: none; }

/* ============ Responsive ============ */
@media (max-width: 1680px) {
  .fill-text { max-width: 1080px; font-size: clamp(48px, 9.4vw, 132px); }  /* ui-exempt: display ramp paired with its own max-width */
}
@media (max-width: 1280px) {
  .fl-2, .fl-5 { display: none; }
  .fill-text { max-width: 840px; font-size: clamp(44px, 8.6vw, 104px); }  /* ui-exempt: display ramp paired with its own max-width */
  .fl-1, .fl-3 { width: clamp(140px, 13vw, 210px); }
  .fl-4 { width: clamp(110px, 10vw, 160px); }
}
@media (max-width: 1024px) {
  .values-row { grid-template-columns: repeat(2, 1fr); }
  .value-tile:last-child { grid-column: span 2; }
  .duo { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; text-align: center; min-height: 0; gap: 56px; }
  .footer-links { justify-content: center; }
  .fl-col { justify-items: center; }
}
@media (max-width: 720px) {
  .hero { padding: 84px 16px 0; }
  .hero-track, .hero-slide { border-radius: var(--radius-lg); }
  .pill-nav { display: none; }
  .theme-btn { margin-left: auto; }
  /* the horizontal lockup is ~7:1, so it needs a shorter height on phones
     to clear the menu and theme buttons */
  .logo { margin-left: 16px; }
  .logo img { height: 26px; }
  .hero-arrow.prev { left: 10px; } .hero-arrow.next { right: 10px; }
  .mission { padding: 88px 24px; }
  .float-img { opacity: .35; }
  .fl-1 { left: -30px; }
  .fl-3, .fl-4 { right: -40px; }
  .values-row { grid-template-columns: 1fr; }
  .value-tile:last-child { grid-column: span 1; }
  .rail-card { flex-basis: 240px; height: 330px; }
  /* stack the row on small screens: main area, then actions full-width below */
  .event-row { flex-wrap: wrap; align-items: flex-start; }
  .ev-main { flex: 1 1 100%; }
  .ev-actions { flex: 1 1 100%; justify-content: space-between; padding-left: 80px; }
  /* The 80px indent lines the buttons up under the event text, but with both
     buttons unwrappable it needs ~390px — every phone narrower than that (iPhone
     SE/mini at 375, most Androids at 360) pushed the card past the screen edge. */
  .event-row { min-width: 0; }
  .fan-card { width: 168px; height: 168px; margin: -84px 0 0 -84px; }
  .fan { height: 230px; }
  .join-times { flex-wrap: wrap; }
  .footer { padding: 88px 20px 24px; }
  .footer-bar { justify-content: center; text-align: center; }
  .fb-left { justify-items: center; }
}

/* ============ REBUILD-ADDITIONS: utility bar, nav, tabs, content pages ============ */
.util-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 38px; z-index: 62;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 16px;
  background: rgba(var(--scrim-rgb), .82);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(var(--on-media-rgb), .07);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-label); letter-spacing: .08em;
}
html[data-theme="light"] .util-bar { background: rgba(250,249,246,.85); border-bottom: 1px solid rgba(var(--scrim-rgb), .08); }
.ub-clock { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-transform: uppercase; white-space: nowrap; }
.ub-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-blue); flex: 0 0 auto; }
.ub-dot.live { background: var(--cat-red); animation: pulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ub-dot.live { animation: none; } }
.ub-right { display: flex; align-items: center; gap: 16px; color: var(--muted); white-space: nowrap; }
.ub-dir { display: inline-flex; align-items: center; gap: 4px; color: var(--text); }
/* utility-bar links fill the bar height so they are thumb-tappable */
.ub-clock, .ub-dir { min-height: 38px; }
.ub-dir:hover { color: var(--accent-blue); }
.site-header { top: 38px; }
.hero, .page-hero { padding-top: 152px; }
@media (max-width: 760px) { .ub-addr { display: none; } .util-bar { font-size: var(--fs-label); } }
@media (max-width: 400px) { .logo img { height: 22px; } .logo { margin-left: 10px; } }
@media (max-width: 480px) {
  .util-bar { padding: 0 16px; gap: 8px; }
  .ub-clock { min-width: 0; }
  .ub-clock span:not(.ub-dot) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ub-right { flex: 0 0 auto; }
}

.pill-nav a[aria-current="page"] { color: var(--nav-link-h); background: var(--nav-link-hbg); }
/* keep the inline nav down to 1000px; it needs to tighten up to fit there */
/* Compact tier so the inline nav still fits between 1000px and 1200px.
   Bounded at BOTH ends: the phone rules above are earlier in the file, so an
   unbounded max-width:1200px block would override them at 375px. */
@media (min-width: 1000px) and (max-width: 1200px) {
  .pill-nav { gap: 0; padding: 8px 8px; }
  .logo { margin-right: 24px; }
  .pill-nav a { padding: 8px 8px; font-size: var(--fs-fine); }
  .logo img { height: 30px; }
  .theme-btn { margin-left: 8px; }
}
@media (max-width: 999.9px) { .pill-nav { display: none; } .theme-btn { margin-left: auto; } }

/* drawer compact sitemap links */
.drawer-link {
  display: block; padding: 8px 8px; border-radius: var(--radius-sm);
  font-family: var(--head); font-size: var(--fs-small); color: var(--drawer-text);
  transition: background .2s ease;
}
.drawer-link:hover { background: var(--drawer-hover); }

/* tabs */
.tabs-row {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 8px; margin: 0 auto 40px; max-width: max-content;
  background: var(--nav-bg); border: 1px solid var(--nav-border); border-radius: var(--radius-md);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.tabs-row::-webkit-scrollbar { display: none; }
.tab-pill {
  font-family: var(--head); font-size: var(--fs-small); color: var(--nav-link);
  background: none; border: 0; border-radius: var(--radius-sm); padding: 8px 16px;
  cursor: pointer; white-space: nowrap;
  transition: color .2s ease, background .2s ease;
}
.tab-pill:hover { color: var(--nav-link-h); background: var(--nav-link-hbg); }
.tab-pill[aria-selected="true"] { background: var(--fill-on); color: var(--bg); }
@media (max-width: 720px) { .tabs-row { max-width: 100%; } }

/* content pages */
.content-page { max-width: var(--container-content); margin: 0 auto; padding: 0 24px var(--sec-half); }
.content-page .sec-title { margin-bottom: 16px; }
.prose-block { margin: 0 0 56px; }
.prose-block:last-child { margin-bottom: 0; }
/* rhythm + measure apply to every paragraph; the muted colour applies only to
   UNCLASSED body copy, so typed roles (.sec-eyebrow, .lede, .meta-line, .fine)
   keep their own colour instead of being overridden by this more-specific rule. */
.prose-block > p { margin: 0 0 16px; max-width: var(--measure); }
.prose-block > p:not([class]) { color: var(--muted); }

.prose-block p a, .faq-a a, .care-list a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.prose-block p a:hover, .faq-a a:hover { color: var(--accent-blue); }
.meta-line { font-family: var(--head); color: var(--accent-blue); font-size: var(--fs-small); margin: 0 0 16px; }
.cta-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 32px; }
.fine { font-size: var(--fs-fine); line-height: 1.45; color: var(--dim); }
.addr-line { margin-top: 16px; }
.page-hero h1 em {
  font-style: normal; background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* accordions */
.faq {
  border: 1px solid var(--card-border); border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--card-bg1), var(--card-bg2));
  margin-bottom: 8px; overflow: hidden;
}
.faq summary {
  cursor: pointer; list-style: none;
  font-family: var(--head); font-size: var(--fs-body); color: var(--text);
  padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent-blue); font-size: var(--fs-lede); }
.faq[open] summary::after { content: "\2212"; }
.faq-a { padding: 0 20px 16px; color: var(--muted); }
.faq-a p { margin: 0 0 8px; }
.scripture-refs { font-size: var(--fs-label); color: var(--dim); }

/* grids */
.value-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 16px 0 8px; text-align: left; }
@media (max-width: 720px) { .value-grid { grid-template-columns: 1fr; } }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 720px) { .two-col { grid-template-columns: 1fr; } }
.two-col h3 { font-size: var(--fs-h3); margin-bottom: 8px; }
.two-col p { color: var(--muted); margin-bottom: 12px; }
/* the fixed utility bar + header must not cover a jumped-to anchor */
:root { --anchor-offset: 152px; }
@media (max-width: 900px) { :root { --anchor-offset: 136px; } }
[id]:not(html):not(body) { scroll-margin-top: var(--anchor-offset); }

/* ---- global search ---- */
.ub-search {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: none; border: 0; padding: 4px 4px; color: var(--text);
  font-family: inherit; font-size: inherit; letter-spacing: inherit;
}
.ub-search:hover { color: var(--accent-blue); }

.search-overlay {
  position: fixed; inset: 0; z-index: 200; display: flex; justify-content: center;
  padding: clamp(60px, 12vh, 140px) 16px 24px;
  background: rgba(var(--scrim-rgb), .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .18s ease;
}
.search-overlay.open { opacity: 1; }
.search-overlay[hidden] { display: none; }
.search-panel {
  width: min(660px, 100%); max-height: 100%; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--card-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); overflow: hidden;
  transform: translateY(-8px); transition: transform .18s ease;
}
.search-overlay.open .search-panel { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .search-overlay, .search-panel { transition: none; }
}
.search-inputrow {
  display: flex; align-items: center; gap: 12px; padding: 16px 16px;
  border-bottom: 1px solid var(--card-border); color: var(--muted); flex: 0 0 auto;
}
.search-inputrow input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  font-family: var(--body); font-size: var(--fs-body); color: var(--text);
}
.search-inputrow input::placeholder { color: var(--dim); }
.search-inputrow input::-webkit-search-cancel-button { filter: grayscale(1) opacity(.6); }
.search-close {
  flex: 0 0 auto; cursor: pointer; background: var(--panel-2); color: var(--muted);
  border: 1px solid var(--card-border); border-radius: var(--radius-sm); padding: 4px 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-label);
}
.search-close:hover { color: var(--text); }
.search-results { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.search-hit {
  display: block; padding: 12px 16px; border-bottom: 1px solid var(--card-border);
  color: var(--text); text-decoration: none;
}
.search-hit:last-child { border-bottom: 0; }
.search-hit:hover, .search-hit.is-active { background: var(--nav-link-hbg); }
.search-hit.is-active { outline: 2px solid var(--accent-blue); outline-offset: -2px; }
.sh-crumb {
  display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-bottom: 4px;
}
.sh-title { display: block; font-family: var(--head); font-size: var(--fs-small); line-height: 1.3; }
.sh-snip { display: block; color: var(--muted); font-size: var(--fs-label); line-height: 1.5; margin-top: 4px; }
.search-hit mark { background: transparent; color: var(--accent-blue); font-weight: 600; }
.search-empty { padding: 24px 16px; color: var(--muted); font-size: var(--fs-eyebrow); }
.search-empty a { color: var(--accent-blue); }
.search-hint {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 16px 16px; color: var(--dim); font-size: var(--fs-label); flex: 0 0 auto;
}
.search-hint[hidden] { display: none; }
.sq {
  cursor: pointer; background: var(--panel-2); color: var(--muted);
  border: 1px solid var(--card-border); border-radius: var(--radius-pill); padding: 4px 12px;
  font-family: inherit; font-size: var(--fs-label);
}
.sq:hover { color: var(--text); border-color: var(--card-border-h); }

@media (max-width: 620px) {
  /* icon only, but keep a thumb-sized hit area across the full bar height */
  .ub-search span { display: none; }
  .ub-search { min-width: 40px; height: 38px; justify-content: flex-end; padding: 0; }
  .search-overlay { padding: 0; }
  .search-panel { width: 100%; max-height: 100%; height: 100%; border-radius: 0; border: 0; }
  .search-inputrow { padding: 12px 16px; }
  .search-results { flex: 1; }
}

/* ---- mission image trail ---- */
.trail-layer { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.trail-img {
  position: absolute; display: block; pointer-events: none;
  width: clamp(140px, 13vw, 215px); aspect-ratio: 5 / 6; object-fit: cover;
  border-radius: var(--radius-sm);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), opacity .35s ease-out;
  will-change: transform, opacity;
}
.trail-img[data-status="active"] { transform: translate(-50%, -50%) scale(1); opacity: 1; }

/* the headline inverts against whatever passes behind it — white source under
   difference blending always resolves to the opposite of its backdrop, so it
   stays legible over both the page and any photo, in either theme */
.mission.has-trail .fill-text { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .trail-layer { display: none; } }

/* ---- hero video layer ---- */
.hs-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .9s ease; pointer-events: none;
}
.hs-video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hs-video { display: none; } }

/* ---- serve opportunities ---- */
.sv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.sv-card {
  padding: 16px 16px; border-radius: var(--radius-md); border: 1px solid var(--card-border);
  background: linear-gradient(180deg, var(--card-bg1), var(--card-bg2));
}
.sv-card[hidden] { display: none; }
.sv-area {
  display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-label); letter-spacing: .09em; text-transform: uppercase;
  padding: 4px 8px; border-radius: var(--radius-xs); color: var(--bg); margin-bottom: 8px;
}
.sv-weekend { background: var(--cat-blue); } .sv-groups { background: var(--cat-lime); }
.sv-care { background: var(--cat-pink); } .sv-creative { background: var(--cat-purple); } .sv-worship { background: var(--cat-orange); }
.sv-card h4 { font-size: var(--fs-body); line-height: 1.25; margin-bottom: 4px; }
.sv-when {
  display: block; font-size: var(--fs-label); color: var(--text); margin-bottom: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.sv-when.sv-flex { color: var(--dim); }
.sv-desc { font-size: var(--fs-fine); line-height: 1.55; color: var(--muted); }
.sv-note { font-size: var(--fs-label); line-height: 1.5; color: var(--dim); margin-top: 8px; }
.sv-note a { color: var(--accent-blue); }
@media (max-width: 560px) { .sv-grid { grid-template-columns: 1fr; } }

/* ---- class list ---- */
.cls-list { margin-top: 24px; }
.cls-count { color: var(--muted); font-size: var(--fs-label); margin-bottom: 16px; }
.cls-card {
  padding: 24px 24px; margin-bottom: 16px; border-radius: var(--radius-md);
  border: 1px solid var(--card-border);
  background: linear-gradient(180deg, var(--card-bg1), var(--card-bg2));
}
.cls-kind {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-label); letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 4px;
}
.cls-card h3 { font-size: var(--fs-h3); line-height: 1.2; margin-bottom: 8px; }
.cls-desc { color: var(--muted); font-size: var(--fs-small); line-height: 1.6; margin-bottom: 16px; max-width: 62ch; }
.cls-facts { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.cls-facts li { display: flex; gap: 12px; font-size: var(--fs-fine); align-items: baseline; }
.cls-facts b {
  flex: 0 0 54px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim); font-weight: 400;
}
.cls-note, .cls-x { font-size: var(--fs-fine); color: var(--muted); line-height: 1.55; margin-bottom: 12px; max-width: 62ch; }
.cls-x a { color: var(--accent-blue); }
@media (max-width: 560px) {
  .cls-card { padding: 16px 16px; }
  .cls-facts li { flex-direction: column; gap: 4px; }
  .cls-facts b { flex: none; }
}

/* ---- group finder ---- */
.gf { margin-top: 40px; }
.gf-h { font-size: var(--fs-h3); margin-bottom: 4px; }
.gf-sub { color: var(--muted); font-size: var(--fs-eyebrow); margin-bottom: 16px; }
.gf-filters { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
.gf-field { display: grid; gap: 8px; min-width: 178px; flex: 1 1 178px; max-width: 260px; }  /* ui-exempt: component ramp, not a layout container */
.gf-field > span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.gf-select {
  appearance: none; width: 100%; cursor: pointer;
  font-family: inherit; font-size: var(--fs-eyebrow); color: var(--text);
  padding: 12px 40px 12px 16px; min-height: 44px; border-radius: var(--radius-sm);
  border: 1px solid var(--card-border);
  background-color: var(--card-bg1);
  /* chevron drawn inline so it tints with the theme */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  transition: border-color .2s ease;
}
.gf-select:hover { border-color: var(--card-border-h); }
.gf-select:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
.gf-select option { background: var(--panel); color: var(--text); }

.gf-count { color: var(--muted); font-size: var(--fs-label); margin: 16px 0 12px; font-variant-numeric: tabular-nums; }
.gf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.gf-card {
  display: flex; flex-direction: column; gap: 4px; min-height: 132px;
  padding: 16px 16px; border-radius: var(--radius-md); text-decoration: none;
  border: 1px solid var(--card-border);
  background: linear-gradient(180deg, var(--card-bg1), var(--card-bg2));
  color: var(--text); transition: border-color .2s ease, transform .2s ease;
}
.gf-card:hover { border-color: var(--card-border-h); transform: translateY(-2px); }
.gf-card[hidden] { display: none; }
.gf-type {
  align-self: flex-start; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-label); letter-spacing: .09em; text-transform: uppercase;
  padding: 4px 8px; border-radius: var(--radius-xs); color: var(--bg); background: var(--accent-blue);
}
.gf-life { background: var(--cat-blue); } .gf-study { background: var(--cat-purple); }
.gf-interest { background: var(--cat-lime); } .gf-impact { background: var(--cat-orange); }
.gf-card strong { font-size: var(--fs-small); line-height: 1.3; }
.gf-card small { color: var(--muted); font-size: var(--fs-label); line-height: 1.45; }
.gf-go {
  margin-top: auto; padding-top: 8px; font-size: var(--fs-label); color: var(--accent-blue);
  display: inline-flex; align-items: center; gap: 4px;
}
.gf-empty { color: var(--muted); font-size: var(--fs-eyebrow); padding: 20px 4px; }
.gf-empty[hidden] { display: none; }
@media (max-width: 560px) { .gf-grid { grid-template-columns: 1fr; } }

/* ---- financial report year switcher ---- */
.fin-years { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.fin-yr {
  cursor: pointer; font-family: inherit; font-size: var(--fs-fine);
  padding: 8px 16px; min-height: 38px; border-radius: var(--radius-pill);
  border: 1px solid var(--card-border); background: var(--card-bg1); color: var(--muted);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.fin-yr:hover { color: var(--text); border-color: var(--card-border-h); }
.fin-yr[aria-pressed="true"] { background: var(--fill-on); color: var(--bg); border-color: var(--fill-on); }
.fin-panel[hidden] { display: none; }
.fin-intro { color: var(--muted); font-size: var(--fs-small); max-width: 62ch; }
.fin-pending h3 { font-size: var(--fs-h3); margin-bottom: 8px; }
.fin-pending p { color: var(--muted); font-size: var(--fs-small); line-height: 1.65; max-width: 62ch; }

/* ---- financials dashboard ---- */
:root { --fin-s1: #4b8fd4; --fin-s2: #87a01c; --fin-up: #0ca30c; }
html[data-theme="light"] { --fin-s1: #3d7fc4; --fin-s2: #7ba318; --fin-up: #006300; }

.fin-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 24px; }
.fin-kpi {
  padding: 16px 16px; border: 1px solid var(--card-border); border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--card-bg1), var(--card-bg2));
}
.fin-kpi small { display: block; color: var(--muted); font-size: var(--fs-label); margin-bottom: 8px; }
.fin-kpi strong { display: block; font-size: var(--fs-h3); line-height: 1.1; }
.fin-kpi em { display: block; font-style: normal; color: var(--muted); font-size: var(--fs-label); margin-top: 8px; }
.fin-kpi .up { color: var(--fin-up); font-weight: 600; font-size: var(--fs-label); }

.fin-chart { margin-top: 40px; }
.fin-chart h3 { font-size: var(--fs-lede); margin-bottom: 4px; }
.fin-sub { color: var(--muted); font-size: var(--fs-fine); margin-bottom: 16px; max-width: 60ch; }
.fin-legend { display: flex; gap: 16px; font-size: var(--fs-label); color: var(--muted); margin-bottom: 12px; }
.fin-legend span { display: inline-flex; align-items: center; gap: 8px; }
.sw { width: 11px; height: 11px; border-radius: var(--radius-xs); display: inline-block; }
.sw1 { background: var(--fin-s1); } .sw2 { background: var(--fin-s2); }

.fp-year { margin-bottom: 16px; }
.fp-year h4, .ff-row h4, .al-row h4 { font-size: var(--fs-label); color: var(--muted); font-weight: 600; margin: 0 0 4px; }
.fp-row { display: grid; grid-template-columns: 1fr max-content; align-items: center; gap: 8px; margin-bottom: 4px; min-height: 20px; }
.fp-bar {
  display: block; height: 18px; width: var(--w);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0; position: relative;
}
.fpb1 { background: var(--fin-s1); } .fpb2 { background: var(--fin-s2); }
.fp-val { font-size: var(--fs-label); color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* hover tooltip (also on keyboard focus via tabindex-free static labels — values are visible) */
.fp-bar:hover::after, .fa-col:hover::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 7px); transform: translateX(-50%);
  background: var(--panel-2); color: var(--text); border: 1px solid var(--card-border);
  padding: 4px 8px; border-radius: var(--radius-sm); font-size: var(--fs-label); white-space: nowrap; z-index: 5;
  box-shadow: var(--shadow-sm); pointer-events: none;
}

/* attendance columns */
.fa-plot { display: flex; gap: 32px; align-items: flex-end; height: 220px; padding: 8px 4px 0; border-bottom: 1px solid var(--card-border); }
.fa-group { display: flex; flex-direction: column; align-items: center; gap: 0; height: 100%; justify-content: flex-end; }
.fa-bars { display: flex; gap: 8px; align-items: flex-end; height: calc(100% - 24px); }
.fa-col { display: block; width: 24px; height: var(--h); border-radius: var(--radius-xs) var(--radius-xs) 0 0; position: relative; }
.fac1 { background: var(--fin-s1); } .fac2 { background: var(--fin-s2); }
.fa-col span { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: var(--fs-label); color: var(--muted); font-variant-numeric: tabular-nums; font-style: normal; }
.fa-group h4 { font-size: var(--fs-label); color: var(--muted); font-weight: 600; margin: 8px 0 0; }

/* faith fund */
.ff-row { display: grid; grid-template-columns: 44px 1fr 62px; gap: 8px; align-items: center; }
.ff-row h4 { margin: 0; }
.ff-track { position: relative; display: block; }
.ff-track .fp-bar { width: var(--w); }
.ff-goal {
  position: absolute; top: -3px; bottom: -3px; left: var(--x); width: 0;
  border-left: 2px dashed var(--muted); opacity: .7;
}

/* allocations — label, bar and description all share one left edge; value sits at the right */
.al-row { margin-bottom: 16px; }
.al-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 8px; }
.al-row h4 { margin: 0; }
.al-val { font-size: var(--fs-label); color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.al-track { display: block; }
.al-row .fp-bar { width: var(--w); }
.al-desc { color: var(--dim); font-size: var(--fs-label); margin: 8px 0 0; }

/* data tables */
.fin-table { margin: 16px 0 8px; }
.fin-table summary { cursor: pointer; color: var(--muted); font-size: var(--fs-label); }
.fin-table table { margin-top: 8px; border-collapse: collapse; font-size: var(--fs-fine); width: 100%; max-width: 480px; }  /* ui-exempt: component ramp, not a layout container */
.fin-table caption { text-align: left; color: var(--muted); font-size: var(--fs-label); margin-bottom: 8px; }
.fin-table th, .fin-table td { text-align: left; padding: 8px 16px 8px 0; border-bottom: 1px solid var(--card-border); font-variant-numeric: tabular-nums; }
.fin-table th { color: var(--muted); font-weight: 600; }

@media (max-width: 560px) {
  .fa-plot { gap: 16px; }
  .al-head { flex-wrap: wrap; gap: 4px 8px; }
  .fp-val { font-size: var(--fs-label); }
}

.min-photo {
  border-radius: var(--radius-md); overflow: hidden; margin-bottom: 24px;
  border: 1px solid var(--card-border);
}
.min-photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 8;
  object-fit: cover; object-position: center 38%;
}
.two-col .min-photo img { aspect-ratio: 4 / 3; }
@media (max-width: 720px) { .min-photo img { aspect-ratio: 4 / 3; } }

.team-h { font-size: var(--fs-h3); margin-bottom: 12px; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.team-cell {
  padding: 8px 8px 16px; border: 1px solid var(--card-border); border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--card-bg1), var(--card-bg2));
  color: var(--text); font-size: var(--fs-eyebrow); text-align: center;
}
.team-cell img, .team-avatar {
  display: block; width: 100%; height: auto; margin: 0 0 12px; aspect-ratio: 1;
  border-radius: var(--radius-sm); object-fit: cover;
  background: linear-gradient(180deg, var(--card-bg2), var(--card-bg1));
}
.team-avatar {
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-h3); font-weight: 700; letter-spacing: 1px; color: var(--muted); opacity: .85;
}
.team-cell strong { display: block; font-size: var(--fs-eyebrow); line-height: 1.25; }
.team-cell small { display: block; color: var(--muted); font-size: var(--fs-label); margin-top: 4px; }

/* embeds */
.map-embed iframe, .video-embed iframe, .cal-embed iframe { width: 100%; border: 0; border-radius: var(--radius-md); display: block; }
.map-embed { margin-top: 24px; }
.map-embed iframe { height: 340px; }
.video-embed iframe { aspect-ratio: 16 / 9; height: auto; }
/* ---- add to calendar links ---- */
.ev-cal {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 16px; font-size: var(--fs-label); color: var(--muted);
}
.ev-cal b {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-label); letter-spacing: .09em; text-transform: uppercase;
  font-weight: 400; color: var(--dim);
}
.ev-cal a {
  color: var(--text); text-decoration: none;
  border: 1px solid var(--card-border); border-radius: var(--radius-pill);
  padding: 8px 12px; min-height: 32px; display: inline-flex; align-items: center;
  transition: border-color .2s ease, color .2s ease;
}
.ev-cal a:hover { color: var(--accent-blue); border-color: var(--card-border-h); }
.ev-modal-cal { margin-top: 16px; }
.ev-modal-cal .ev-cal { margin-top: 0; }

/* ---- full calendar list (replaced the fixed-height Church Center iframe) ---- */
.cal-list { display: grid; gap: 8px; margin-top: 24px; }
.cal-row {
  display: grid; grid-template-columns: 62px 1fr auto auto; align-items: center; gap: 16px;
  padding: 16px 16px; border-radius: var(--radius-md); text-decoration: none; color: var(--text);
  border: 1px solid var(--card-border);
  background: linear-gradient(180deg, var(--card-bg1), var(--card-bg2));
  transition: border-color .2s ease, transform .2s ease;
}
.cal-row:hover { border-color: var(--card-border-h); transform: translateX(3px); }
.cal-date {
  display: grid; justify-items: center; gap: 1px; padding: 8px 0; border-radius: var(--radius-sm);
  background: var(--panel-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.cal-date small { font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cal-date strong { font-size: var(--fs-fine); line-height: 1; }
.cal-body { display: grid; gap: 4px; min-width: 0; }
.cal-body strong { font-size: var(--fs-small); line-height: 1.25; }
.cal-body small { color: var(--muted); font-size: var(--fs-label); }
.cal-tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-label);
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--card-border); border-radius: var(--radius-pill); padding: 4px 8px; white-space: nowrap;
}
.cal-go { color: var(--muted); display: inline-flex; }
.cal-row:hover .cal-go { color: var(--accent-blue); }
@media (max-width: 620px) {
  .cal-row { grid-template-columns: 52px 1fr; row-gap: 8px; padding: 12px 16px; }
  .cal-tag { grid-column: 2; justify-self: start; }
  .cal-go { display: none; }
}

/* lists */
.steps { margin: 16px 0 8px 20px; color: var(--muted); }
.steps li { margin-bottom: 8px; }
.care-list { margin: 8px 0 16px 20px; color: var(--muted); }
.care-list li { margin-bottom: 8px; }

/* prayer band (home) */
.prayer-band {
  max-width: var(--container); margin: 0 auto var(--sec-half); padding: 36px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  border: 1px solid var(--card-border); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--card-bg1), var(--card-bg2));
  box-shadow: var(--shadow-lg);
  position: relative; z-index: 1;
}
.prayer-band h2 { font-size: var(--fs-h3); margin-bottom: 8px; }
.prayer-band p { color: var(--muted); }

/* footer sitemap */
.footer-sitemap {
  max-width: var(--container); margin: 32px auto 0; padding-top: 28px;
  /* matches the bar rule below it; light theme flips to ink above */
  border-top: 1px solid rgba(var(--on-media-rgb), .3);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  position: relative; z-index: 1;
}
.footer-sitemap strong { display: block; font-family: var(--head); font-weight: 400; color: var(--text); font-size: var(--fs-small); margin-bottom: 8px; }
.footer-sitemap a { display: block; color: var(--muted); font-size: var(--fs-fine); padding: 4px 0; }
.footer-sitemap a:hover { color: var(--text); }
@media (max-width: 760px) { .footer-sitemap { grid-template-columns: repeat(2, 1fr); } }

/* The rules bracketing the footer sitemap. A 0.5px border does not work —
   Chrome rounds border-width back up to a whole device pixel — so the line is a
   pseudo-element that gets squashed with scaleY instead. On a 2x display that
   lands on exactly one device pixel: a genuine hairline. Standard-density
   screens keep the full 1px, where half a pixel would round away to nothing. */
.footer-sitemap, .footer-bar { border-top: 0; }
.footer-sitemap::before, .footer-bar::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: rgba(var(--on-media-rgb), .22);
  transform-origin: top;
}
html[data-theme="light"] .footer-sitemap::before,
html[data-theme="light"] .footer-bar::before { background: rgba(23, 23, 23, .22); }
@media (min-resolution: 2dppx) {
  .footer-sitemap::before, .footer-bar::before { transform: scaleY(.5); }
}

/* Live status above the Resi player on /watch. The dot is grey by default,
   blue inside the hour before a service, pulsing red while one is running. */
/* grid, not flex-wrap: when the text wraps on a phone the dot has to stay
   pinned to its first line rather than sitting alone on a row above it */
.live-status {
  display: grid; grid-template-columns: 8px 1fr; column-gap: 10px; row-gap: 4px; align-items: start;
  margin: 0 0 18px; font-family: var(--head); font-size: var(--fs-small); line-height: 1.45; color: var(--text);
}
.ls-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); margin-top: calc((1.45em - 8px) / 2); }
.ls-text { grid-column: 2; }
.ls-seg { white-space: nowrap; }
.live-status.is-soon .ls-dot { background: var(--accent-blue); }
.live-status.is-live .ls-dot { background: var(--cat-red); animation: pulse 1.6s ease-in-out infinite; }
.live-status.is-live .ls-text { color: var(--cat-red); }
/* the dark-theme red drops to ~4.2:1 on cream, so light theme takes a deeper one */
html[data-theme="light"] .live-status.is-live .ls-text { color: #b83a32; }
@media (prefers-reduced-motion: reduce) { .live-status.is-live .ls-dot { animation: none; } }

/* ============ Watch: video + "Welcome to Church" rail ============
   The Resi player beside four next-step cards, stacked on narrow screens.
   Cards are real links (Church Center, give, contact) so they work with no JS;
   script.js relabels / hides them from the studio's Online Service settings. */
/* The caption shares the video's column and the rail spans both rows, so the
   caption stays tucked under the video however tall the rail (or the open
   notes panel) grows — the 1fr second row takes the slack below it. */
.watch-layout {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
  grid-template-areas: "video rail" "caption rail"; grid-template-rows: auto 1fr;
  gap: 24px 32px; align-items: start; margin: 0 0 32px;
}
.watch-layout > .video-embed { grid-area: video; }
.watch-layout > .watch-rail { grid-area: rail; }
.watch-caption { grid-area: caption; margin: 0; color: var(--muted); max-width: var(--measure); }
@media (max-width: 900px) {
  .watch-layout { grid-template-columns: 1fr; grid-template-areas: "video" "rail" "caption"; grid-template-rows: auto; gap: 24px; }
}
.watch-rail-title { margin: 0 0 16px; padding: 0 0 12px; border-bottom: 1px solid var(--line); color: var(--text); }
.watch-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.watch-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  background: linear-gradient(180deg, var(--card-bg1), var(--card-bg2)); border: 1px solid var(--card-border);
  font-family: var(--head); font-size: var(--fs-body); color: var(--text); text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}
.watch-card:hover { border-color: var(--card-border-h); transform: translateY(-1px); }
.watch-card:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
.watch-card svg { flex: none; color: var(--muted); }
.watch-card[hidden] { display: none; }

/* ============ Message Notes, from Online Service ============ */
.notes-card { margin-top: 24px; }
.notes-card > .label { margin: 0 0 16px; }
.notes-card > .fine { margin: -8px 0 12px; }
.notes-body h3 { margin: 24px 0 8px; font-size: var(--fs-lede); line-height: 1.3; }
.notes-body h3:first-child { margin-top: 0; }
.notes-body p, .notes-body ul, .notes-body ol, .notes-body blockquote { margin: 0 0 16px; color: var(--muted); max-width: var(--measure); }
.notes-body h4 { margin: 20px 0 8px; font-size: var(--fs-body); line-height: 1.3; }
.notes-body h4:first-child { margin-top: 0; }
.notes-body b { color: var(--text); }
.notes-body blockquote { padding-left: 16px; border-left: 2px solid var(--accent-blue); font-style: italic; }
.notes-body p { white-space: pre-line; }
.notes-body ul, .notes-body ol { padding-left: 20px; }
.notes-body ol li { color: var(--text); }
.notes-body li { margin: 0 0 4px; }
.notes-body a { color: var(--accent-blue); }
.listener-sheet { white-space: pre-wrap; line-height: 2; color: var(--text); max-width: var(--measure); margin: 0; }
.blank {
  display: inline-block; vertical-align: baseline; height: 1.2em; margin: 0 4px; padding: 0;
  border: 0; border-bottom: 2px solid var(--accent-blue); border-radius: 0; background: transparent; cursor: pointer;
}
.blank:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
.blank-answer { font-family: var(--head); color: var(--accent-blue); }
.notes-textarea {
  width: 100%; min-height: 200px; padding: 16px; resize: vertical;
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); color: var(--text);
  font-family: var(--body); font-size: var(--fs-body); line-height: 1.5;
}
.notes-textarea:focus { outline: 2px solid var(--accent-blue); outline-offset: 2px; }

/* Take Notes, opened in place of the cards beside the video */
.watch-notes {
  background: linear-gradient(180deg, var(--card-bg1), var(--card-bg2)); border: 1px solid var(--card-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 16px 20px 20px;
}
.watch-notes-head { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 0 0 12px; border-bottom: 1px solid var(--line); }
.watch-notes-head .label { margin: 0; color: var(--text); }
.watch-notes-back {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--text); cursor: pointer;
}
.watch-notes-back:hover { background: var(--nav-link-hbg); }
.watch-notes-back:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
.watch-notes-empty { margin: 0; color: var(--muted); font-size: var(--fs-small); }
.notes-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 16px; }
.notes-pill {
  font-family: var(--head); font-size: var(--fs-small); color: var(--nav-link);
  background: none; border: 0; border-radius: var(--radius-sm); padding: 4px 12px; cursor: pointer; white-space: nowrap;
}
.notes-pill:hover { color: var(--nav-link-h); background: var(--nav-link-hbg); }
.notes-pill[aria-selected="true"] { background: var(--fill-on); color: var(--bg); }
.notes-pill:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
.watch-notes-body { overflow-y: auto; padding-right: 8px; }
.watch-notes-body .notes-body p, .watch-notes-body .notes-body ul { line-height: 1.6; }
.watch-notes-body .listener-sheet { line-height: 1.9; }
.watch-notes-body .cta-row { margin-top: 16px; }
.watch-notes-body .notes-textarea { min-height: 240px; }
.watch-cards[hidden], .watch-rail-title[hidden], .watch-cards li[hidden] { display: none; }

/* The watch page runs wide so the video and the notes both get room; the
   archive tab keeps the normal reading column. */
.content-wide { max-width: var(--container-watch); }
.content-wide #panel-sermons { max-width: var(--container-content); margin-inline: auto; }

/* Notes open: the rail widens to nearly half, and the panel is held to the
   viewport with its own scroll, so the stream never scrolls out of view. */
.watch-layout.is-notes-open { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.watch-layout.is-notes-open .watch-rail { position: sticky; top: 96px; }
.watch-layout.is-notes-open .watch-notes { display: flex; flex-direction: column; max-height: calc(100vh - 128px); padding: 20px 24px 24px; }
.watch-layout.is-notes-open .watch-notes-body { flex: 1; min-height: 0; }
@media (max-width: 900px) {
  .watch-layout.is-notes-open { grid-template-columns: 1fr; }
  .watch-layout.is-notes-open .watch-rail { position: static; }
  .watch-layout.is-notes-open .watch-notes { max-height: none; }
}

/* Recent notes (Sermon Archive tab): hidden until the feed has some. */
.notes-archive-block:not(.has-notes) { display: none; }
.notes-archive { display: grid; gap: 12px; margin-top: 24px; }
.notes-archive-item {
  background: linear-gradient(180deg, var(--card-bg1), var(--card-bg2)); border: 1px solid var(--card-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.notes-archive-item > summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 16px 20px; cursor: pointer; list-style: none; font-family: var(--head); color: var(--text);
}
.notes-archive-item > summary::-webkit-details-marker { display: none; }
.notes-archive-item > summary:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; border-radius: var(--radius-md); }
.notes-archive-item[open] > summary { border-bottom: 1px solid var(--line); }
.notes-archive-date { font-size: var(--fs-small); color: var(--muted); }
.notes-archive-content { padding: 20px; }
.notes-archive-content > .label { margin: 0 0 12px; }
.notes-archive-content > .label ~ .label { margin-top: 24px; }
.watch-notes-meta { margin: 0 0 12px; }

@media (max-width: 420px) {
  .ev-actions { padding-left: 0; }
}