/*
Theme Name: Mission Lutheran
Theme URI: https://missionlutheran.org
Author: Built for Mission Lutheran Church & School
Description: Custom theme for Mission Lutheran Church & School, Laguna Niguel. Sage #82A7A8 taken from the church's own logo file; all photography and copy sourced from the church's own site and media library.
Version: 0.2.1
Requires at least: 6.4
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: mission-lutheran
*/

/* PROVENANCE
   Colour: sage #82A7A8 sampled from MLC_IconSage.png in this site's
   media library. Every accent derived against that value and checked
   to 4.5:1 for text.
   Photography: only images already in this site's media library, and
   only those that passed visual review. Stock imagery excluded.
*/

:root{
  /* ===== SAGE — brand value #82A7A8 verified from MLC_IconSage.png ===== */
  --sage-50:#F3F8F8;
  --sage-100:#E5EFEF;
  --sage-200:#C8DEDE;
  --sage-300:#A6C6C7;
  --sage:#82A7A8;          /* the logo colour */
  --sage-600:#5E8384;
  --sage-700:#456264;
  --sage-800:#2C4546;
  --sage-900:#1B2C2D;

  /* ===== WARM SAND — the warmth this palette was missing ===== */
  --sand-50:#FDFBF7;
  --sand-100:#F8F2E8;
  --sand-200:#EFE4D3;

  /* ===== ACCENTS — each one has exactly one job ===== */
  --terra-100:#F7E3DA;     /* action: buttons, Give, CTAs */
  --terra-300:#DC9075;
  --terra:#BE5A38;
  --terra-btn:#B75432;  /* fill that clears 4.5:1 with white */
  --terra-700:#9C4526;

  --gold-200:#F6E0AB;      /* emphasis: numerals, rules, highlights */
  --gold:#D9A227;
  --gold-700:#8F6708;   /* text-safe */

  --coral-100:#FBE1DA;     /* children, family, school */
  --coral:#E9836B;
  --coral-700:#A94A33;  /* text-safe */

  --berry-100:#F5E2EA;     /* care and support */
  --berry:#9B3560;

  --ink:#1E2524;           /* warmed off pure black */
  --soft:#4F5A59;
  --paper:#FFFFFF;
  --rule:#E1E8E6;

  /* aliases kept so the rest of the stylesheet reads cleanly */
  --deep:var(--sage-800);
  --mid:var(--sage-700);  /* sage-600 fails 4.5:1 at label sizes */
  --tint:var(--sage-100);
  --tint2:var(--sand-100);
  --terra-d:var(--terra-700);

  --disp:"Fraunces",Georgia,serif;
  --body:"Karla",system-ui,sans-serif;
  --wrap:1180px;
  --gut:clamp(20px,5vw,56px);
  --arch:170px 170px 16px 16px;
  --r:22px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

h1,h2,h3{font-family:var(--disp);font-weight:600;line-height:1.06;letter-spacing:-.015em;margin:0;
  font-variation-settings:"SOFT" 50,"WONK" 0}
h1{font-size:clamp(2.5rem,5.6vw,4.15rem)}
h2{font-size:clamp(2rem,4.1vw,3.05rem)}
h3{font-size:1.3rem;line-height:1.24}
h4{font-family:var(--body);font-size:1.02rem;font-weight:700;margin:0}
p{margin:0 0 1.05rem}
p:last-child{margin-bottom:0}
.lede{font-size:1.17rem;color:var(--soft)}

.eyebrow{font-size:.79rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--mid);margin:0 0 .85rem}
.eyebrow--l{color:rgba(255,255,255,.72)}

/* the house device: comma lists, taken from their own staff bios */
.beads{font-family:var(--disp);font-style:italic;font-size:1.12rem;color:var(--mid);
  font-variation-settings:"SOFT" 50,"WONK" 0;margin:0}

.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--body);font-weight:700;
  font-size:.94rem;text-decoration:none;padding:.85rem 1.6rem;border-radius:999px;
  border:2px solid transparent;cursor:pointer;
  transition:background-color .18s,color .18s,border-color .18s,transform .18s}
.btn:hover{transform:translateY(-2px)}
.btn--fill{background:var(--terra-btn);color:#fff}
.btn--fill:hover{background:var(--terra-d)}
.btn--sage{background:var(--deep);color:#fff}
.btn--sage:hover{background:#1D3132}
.btn--out{border-color:var(--deep);color:var(--deep)}
.btn--out:hover{background:var(--tint)}
.btn--light{border-color:rgba(255,255,255,.55);color:#fff}
.btn--light:hover{background:rgba(255,255,255,.14)}
.btn--white{background:#fff;color:var(--terra-d)}
a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ---------- util bar ---------- */
.util{background:var(--deep);color:rgba(255,255,255,.82);font-size:.8rem}
.util__in{max-width:var(--wrap);margin:0 auto;padding:.5rem var(--gut);display:flex;
  align-items:center;justify-content:space-between;gap:1rem}
.util a{text-decoration:none}
.util a:hover{color:#fff;text-decoration:underline}
.util__l{display:flex;align-items:center;gap:1.2rem}
.util .dot{opacity:.4}
.soc{display:flex;gap:.8rem;align-items:center}
.soc a{display:grid;place-items:center;width:22px;height:22px}
.soc svg{width:15px;height:15px;fill:rgba(255,255,255,.8)}
.soc a:hover svg{fill:#fff}

/* ---------- nav ---------- */
.bar{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.bar__in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);display:flex;align-items:center;
  justify-content:space-between;gap:1.4rem;min-height:80px}
.logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none}
.logo img{height:42px;width:auto}
.logo__fb{display:none;align-items:center;gap:.6rem}
.logo.fallback img{display:none}
.logo.fallback .logo__fb{display:flex}
.logo__badge{width:38px;height:38px;border-radius:50%;background:var(--sage);color:#fff;
  display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:1.05rem}
.logo__t{display:flex;flex-direction:column;line-height:1}
.logo__n{font-family:var(--disp);font-weight:700;font-size:1.08rem}
.logo__s{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin-top:.3rem}

.nav{display:flex;align-items:center;gap:.1rem}
.nav__i{position:static}
.nav__b{display:inline-flex;align-items:center;gap:.34rem;font-size:.93rem;font-weight:600;
  text-decoration:none;color:var(--ink);padding:.6rem .82rem;background:none;border:0;
  cursor:pointer;border-radius:999px;font-family:var(--body)}
.nav__b:hover{color:var(--terra)}
.nav__b svg{width:9px;height:9px;opacity:.5}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--paper);
  border-bottom:1px solid var(--rule);box-shadow:0 20px 44px rgba(21,25,26,.11);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s,transform .16s,visibility .16s;z-index:70}
.nav__i:hover .mega,.nav__i:focus-within .mega{opacity:1;visibility:visible;transform:none}
.mega__in{max-width:var(--wrap);margin:0 auto;padding:2.2rem var(--gut) 2.5rem;display:grid;
  grid-template-columns:290px 1fr;gap:clamp(2rem,5vw,4rem)}
.mega__pitch h3{font-size:1.4rem;margin-bottom:.5rem}
.mega__pitch p{font-size:.92rem;color:var(--soft);margin-bottom:1rem}
.mega__shot{aspect-ratio:4/3;background:none;border-radius:var(--arch);margin-bottom:1.1rem;
  display:grid;place-items:center;font-size:.72rem;color:var(--mid);text-align:center;
  padding:0;overflow:hidden}
.mega__shot img{width:100%;height:100%;object-fit:cover;display:block}
/* Photos fill their frame everywhere (Sep 29 2026). The pale tint and
   padding now appear only on an EMPTY slot, which is what they were
   built for. This replaces four one-off patches (page banners, ministry
   cards, menu dropdowns, I'm New) that each stripped them back out. */
.mega__shot:not(:has(img)){background:var(--tint);padding:1.4rem}
.mega__links{display:grid;grid-template-columns:repeat(3,1fr);gap:.15rem 2rem;align-content:start}
.mega__links a{display:block;padding:.62rem 0;text-decoration:none;font-size:.95rem;font-weight:600;
  border-bottom:1px solid var(--rule)}
.mega__links a:hover{color:var(--terra)}
.mega__links a span{display:block;font-size:.78rem;color:var(--soft);font-weight:400;margin-top:.12rem}

.burger{display:none;background:none;border:0;padding:.6rem;cursor:pointer}
.burger span{display:block;width:23px;height:2px;background:var(--ink);margin:4.5px 0}
.drawer{display:none;background:var(--paper);border-bottom:1px solid var(--rule);
  max-height:78vh;overflow:auto}
.drawer.open{display:block}
.drawer__in{max-width:var(--wrap);margin:0 auto;padding:.6rem var(--gut) 1.8rem}
.drawer a{display:block;padding:.78rem 0;text-decoration:none;font-weight:600;
  border-bottom:1px solid var(--rule)}
.drawer a.sub{padding-left:1.1rem;font-weight:400;font-size:.93rem;color:var(--soft)}
.drawer .btn{margin-top:1.3rem;width:100%;justify-content:center}

.view{display:none}
.view.on{display:block}

/* ---------- hero ---------- */
.hero{background:var(--deep)}
/* width:100% is load-bearing. With aspect-ratio alone, max-height:70vh clamps the
   height and the ratio then back-computes a NARROWER width (446px tall -> 1040px
   wide on a 1440 viewport), leaving bars beside the video. Explicit width wins;
   aspect-ratio then only sets height, and max-height crops via overflow:hidden.
   The video is object-fit:cover, so cropping is safe. Don't remove. */
.hero__f{position:relative;width:100%;aspect-ratio:21/9;min-height:340px;max-height:70vh;
  overflow:hidden;background:var(--deep);display:grid;place-items:center}
.hero__f video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__ph{position:relative;text-align:center;color:rgba(255,255,255,.6);padding:2rem;max-width:520px}
.hero__ph b{display:block;font-family:var(--disp);font-size:1.15rem;color:rgba(255,255,255,.9);margin-bottom:.4rem}
.hero__ph span{font-size:.84rem;line-height:1.5}
.hero__tag{position:absolute;left:var(--gut);bottom:1.3rem;z-index:2;font-size:.69rem;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;color:rgba(255,255,255,.85);
  text-shadow:0 1px 12px rgba(0,0,0,.55)}
.hero__edge{height:5px;background:var(--terra)}

/* ---------- times ---------- */
.times{padding:clamp(3.2rem,6.5vw,5rem) 0;position:relative;
  background:radial-gradient(115% 85% at 12% 0%,var(--sand-100) 0%,rgba(248,242,232,0) 62%)}
.times__g{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:end}
.times__big{font-family:var(--disp);font-weight:600;font-size:clamp(2.6rem,7.2vw,5.3rem);
  line-height:.98;letter-spacing:-.025em;margin:0 0 1rem;font-variation-settings:"SOFT" 50,"WONK" 0}
.times__big em{font-style:normal;color:var(--sage)}
.times__cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem}
.times__dl{border-top:2px solid var(--deep);padding-top:1.2rem;margin:0;display:grid;gap:.9rem}
.times__row{display:flex;gap:1rem;align-items:baseline}
.times__row dt{flex:none;width:5.4rem;font-size:.7rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--soft)}
.times__row dd{margin:0;font-size:1rem}

/* ---------- find your place picker ---------- */
.fyp{background:var(--tint2);padding:clamp(3rem,6vw,4.6rem) 0;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule)}
.fyp h2{margin-bottom:.6rem}
.fyp__sub{color:var(--soft);margin-bottom:1.6rem;max-width:52ch}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.8rem}
.chip{font-family:var(--body);font-size:.93rem;font-weight:600;padding:.68rem 1.25rem;
  border-radius:999px;border:2px solid var(--rule);background:var(--paper);color:var(--ink);
  cursor:pointer;transition:border-color .16s,background-color .16s,color .16s,transform .16s}
.chip:hover{border-color:var(--sage);background:var(--sand-50);transform:translateY(-2px)}
.chip[aria-pressed="true"]{background:var(--deep);border-color:var(--deep);color:#fff}
.fyp__out{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;min-height:1px}
.fyp__card{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);
  padding:1.5rem;text-decoration:none;display:block;transition:transform .18s,box-shadow .18s}
.fyp__card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(21,25,26,.08)}
.fyp__k{font-size:.69rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--terra);margin:0 0 .5rem}
.fyp__card h3{font-size:1.15rem;margin-bottom:.35rem}
.fyp__card p{font-size:.92rem;color:var(--soft);margin:0}
.fyp__empty{color:var(--soft);font-size:.95rem;grid-column:1/-1}

/* ---------- top three ---------- */
.three{padding:clamp(3.2rem,6.5vw,5rem) 0}
.three__h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;
  gap:1.4rem;margin-bottom:2rem}
.three__h p.n{font-size:.84rem;color:var(--soft);max-width:30ch;margin:0}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:320px;
  padding:1.8rem;text-decoration:none;color:#fff;overflow:hidden;background:var(--deep);
  border-radius:var(--r);transition:transform .2s}
.tile:hover{transform:translateY(-5px)}
.tile:nth-child(2){background:var(--terra)}
.tile:nth-child(3){background:var(--sage-700)}
.tile__n{position:absolute;top:1.1rem;left:1.8rem;font-family:var(--disp);font-weight:700;
  font-size:2.6rem;line-height:1;color:var(--gold-200);opacity:.85}
.tile__ph{position:absolute;inset:0;display:grid;place-items:center;font-size:.72rem;
  color:rgba(255,255,255,.32);text-align:center;padding:3rem 1.4rem 9rem}
.tile h3{color:#fff;margin-bottom:.4rem;position:relative}
.tile p{font-size:.92rem;color:rgba(255,255,255,.82);margin:0;position:relative}
.tile__go{margin-top:.9rem;font-size:.77rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold);position:relative}
.tile:nth-child(2) .tile__go{color:#fff}

/* ---------- welcome ---------- */
.wel{padding:clamp(3.2rem,6.5vw,5rem) 0;
  background:linear-gradient(145deg,var(--sage-100) 0%,var(--sand-50) 90%)}
.wel__g{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.wel h2{margin-bottom:1.1rem;max-width:20ch}
.sig{margin-top:1.4rem;font-family:var(--disp);font-weight:600;font-size:1.08rem}
.sig span{display:block;font-family:var(--body);font-weight:400;font-size:.77rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--soft);margin-top:.3rem}
.vf{position:relative;aspect-ratio:4/5;background:var(--deep);display:grid;place-items:center;
  cursor:pointer;overflow:hidden;border-radius:var(--arch)}
.vf__ph{text-align:center;color:rgba(255,255,255,.62);padding:1.6rem;font-size:.81rem;line-height:1.5}
.vf__ph b{display:block;font-family:var(--disp);font-size:1.02rem;color:rgba(255,255,255,.9);margin-bottom:.35rem}
.play{width:66px;height:66px;border-radius:50%;background:var(--terra);display:grid;place-items:center;
  margin:0 auto 1rem;transition:transform .2s,background-color .2s}
.play::after{content:"";width:0;height:0;border-left:18px solid #fff;
  border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px}
.vf:hover .play,.card:hover .play{transform:scale(1.08);background:var(--terra-d)}

/* ---------- services ---------- */
.srv{padding:clamp(3.2rem,6.5vw,5rem) 0}
.srv__h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;
  gap:1.5rem;margin-bottom:2rem}
.srv__h p.n{font-size:.84rem;color:var(--soft);max-width:36ch;margin:.6rem 0 0}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.7rem}
.card{text-decoration:none;display:block}
.card__t{position:relative;aspect-ratio:16/9;background:var(--tint);border-radius:var(--r);
  display:grid;place-items:center;margin-bottom:.85rem}
.card__t .play{width:50px;height:50px;margin:0}
.card__t .play::after{border-left-width:14px;border-top-width:8px;border-bottom-width:8px}
.card__d{font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--soft);margin:0 0 .3rem}
.card h3{margin-bottom:.25rem}
.card:hover h3{color:var(--terra)}
.card__s{font-size:.88rem;color:var(--soft);margin:0}

/* ---------- THE PEOPLE WALL (signature) ---------- */
.us{padding:clamp(3.2rem,6.5vw,5rem) 0;color:#fff;overflow:hidden;
  background:var(--sage-900);
  background-image:radial-gradient(90% 70% at 78% 8%,rgba(217,162,39,.20) 0%,rgba(217,162,39,0) 60%),
    radial-gradient(80% 70% at 8% 100%,rgba(190,90,56,.16) 0%,rgba(190,90,56,0) 62%)}
.us h2{color:#fff;max-width:20ch;margin-bottom:.8rem}
.us__intro{color:rgba(255,255,255,.75);max-width:50ch;margin-bottom:2.2rem}
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:1rem}
.face{position:relative;aspect-ratio:1;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.09);
  border:0;padding:0;cursor:pointer;display:grid;place-items:center;
  transition:transform .22s}
.face:hover,.face.open{transform:scale(1.05)}
.face img{width:100%;height:100%;object-fit:cover}
.face__ph{font-size:.63rem;color:rgba(255,255,255,.4);text-align:center;padding:.5rem;line-height:1.35}
.face__veil{position:absolute;inset:0;background:rgba(42,65,66,.93);color:#fff;display:grid;
  align-content:center;padding:.9rem;opacity:0;transition:opacity .22s;pointer-events:none}
.face:hover .face__veil,.face.open .face__veil{opacity:1}
.face__n{font-family:var(--disp);font-weight:600;font-size:.86rem;line-height:1.2;margin-bottom:.25rem}
.face__b{font-size:.63rem;line-height:1.35;color:rgba(255,255,255,.8);font-style:italic}
.us__foot{margin-top:2rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;
  justify-content:space-between}
.us__hint{font-size:.8rem;color:rgba(255,255,255,.55)}
.quote{margin-top:2.6rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.16);
  display:grid;grid-template-columns:auto 1fr;gap:1.6rem;align-items:center}
.quote__f{width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.1);flex:none;
  display:grid;place-items:center;font-size:.58rem;color:rgba(255,255,255,.4);text-align:center;
  overflow:hidden}
.quote__f img{width:100%;height:100%;object-fit:cover}
.quote p{font-family:var(--disp);font-style:italic;font-size:clamp(1.05rem,2vw,1.35rem);
  line-height:1.42;color:#fff;margin:0 0 .6rem;font-variation-settings:"SOFT" 50,"WONK" 0}
.quote cite{font-style:normal;font-size:.76rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold)}

/* ---------- mission go ---------- */
.mgo{padding:clamp(3.2rem,6.5vw,5rem) 0}
.mgo__g{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.mgo__q{font-family:var(--disp);font-weight:500;font-size:clamp(1.5rem,3.2vw,2.25rem);
  line-height:1.2;margin:0 0 1.3rem;font-variation-settings:"SOFT" 50,"WONK" 0}
.mgo__q span{color:var(--terra)}
.pills{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.4rem;padding:0;list-style:none}
.pills li{font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:.45rem 1rem;border-radius:999px;background:var(--tint);color:var(--deep)}
.mgo__ph{aspect-ratio:4/5;background:var(--tint);border-radius:var(--arch);display:grid;
  place-items:center;text-align:center;padding:1.8rem;font-size:.84rem;color:var(--mid);line-height:1.55}

/* ---------- give ---------- */
.give{background:linear-gradient(100deg,var(--terra-700) 0%,var(--terra) 62%,#C9683F 100%);color:#fff;padding:clamp(2.5rem,5vw,3.6rem) 0}
.give__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem}
.give h2{color:#fff;font-size:clamp(1.55rem,3vw,2.1rem);max-width:26ch}
.give p{font-size:.9rem;color:rgba(255,255,255,.85);margin:.5rem 0 0;max-width:44ch}

/* ---------- inner pages ---------- */
.ph{padding:clamp(2.6rem,5.5vw,4.2rem) 0;
  background:linear-gradient(160deg,var(--sage-100) 0%,var(--sand-100) 100%)}
.ph h1{max-width:22ch;margin-bottom:.9rem}
.ph .lede{max-width:56ch}
.sec{padding:clamp(2.8rem,6vw,4.6rem) 0}
.sec--alt{background:var(--tint2)}
.sec h2{margin-bottom:1.3rem}
.prose{max-width:66ch}

/* ---- page banner ---------------------------------------------------------
   page.php reuses .mega__shot for its banner photo, but that class was built
   for the nav dropdown thumbnails: 1.4rem padding plus a placeholder
   background, so the photo got a pale frame, the arch radius sat on the
   WRAPPER while the image stayed square, and it ran ~467px tall - heading,
   gap and giant photo filling the first screen before any words.
   .sec .mega__shot only ever matches the page banner, never the nav. */
.sec .wrap > .mega__shot{padding:0;background:none;aspect-ratio:auto;
  height:clamp(190px,26vw,330px);margin:0 0 2rem;border-radius:var(--arch)}
.sec .wrap > .mega__shot img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.prose h3{margin:1.9rem 0 .6rem}
.prose ul{padding-left:1.1rem;margin:0 0 1.05rem}
.prose li{margin-bottom:.42rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,3.6rem);align-items:start}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem}
.box{border:1px solid var(--rule);border-radius:var(--r);padding:1.6rem;background:var(--paper);
  text-decoration:none;display:block;transition:transform .18s,box-shadow .18s}
a.box:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(21,25,26,.08)}
.box h3{margin-bottom:.45rem}
.box p{font-size:.93rem;color:var(--soft);margin:0}
.box__k{font-size:.76rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mid);margin:0 0 .55rem}
.box--sage{border-color:var(--sage);border-width:2px;background:var(--sage-100)}
.box--sage .box__k{color:var(--sage-700)}
.box--coral{border-color:var(--coral);border-width:2px;background:var(--coral-100)}
.box--coral .box__k{color:var(--coral-700)}
.box--berry{border-color:var(--berry);border-width:2px;background:var(--berry-100)}
.box--berry .box__k{color:var(--berry)}
.box--gold{border-color:var(--gold);border-width:2px;background:var(--sand-100)}
.box--gold .box__k{color:var(--gold-700)}

.person__img{aspect-ratio:1;background:var(--tint);border-radius:50%;margin-bottom:.9rem;
  overflow:hidden;display:grid;place-items:center;font-size:.7rem;color:var(--mid);
  text-align:center;padding:.7rem}
.person__img img{width:100%;height:100%;object-fit:cover}
.person h4{margin-bottom:.15rem}
.person .role{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--terra);margin:0 0 .45rem}
.person .bio{font-family:var(--disp);font-style:italic;font-size:.93rem;color:var(--soft);margin:0}

.ev{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1.1rem,3vw,2.4rem);align-items:center;
  padding:1.5rem 0;border-top:1px solid var(--rule)}
.ev:last-of-type{border-bottom:1px solid var(--rule)}
.ev__when{font-family:var(--disp);font-weight:600;font-size:.98rem;color:var(--mid);min-width:8.6rem;line-height:1.3}
.ev h3{margin-bottom:.22rem}
.ev p{font-size:.92rem;color:var(--soft);margin:0}
.ev__go{font-size:.77rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--terra);white-space:nowrap;text-decoration:none}

.note{background:var(--sand-100);border-left:3px solid var(--gold);border-radius:0 var(--r) var(--r) 0;
  padding:1.1rem 1.3rem;font-size:.89rem;color:var(--soft);margin:1.6rem 0 0}

/* ---------- footer ---------- */
.foot{background:var(--sage-900);color:rgba(255,255,255,.7);padding:clamp(3rem,6vw,4.4rem) 0 1.8rem;font-size:.93rem}
.foot__g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(1.8rem,4vw,3rem)}
.foot h4{color:#fff;font-size:.71rem;letter-spacing:.15em;text-transform:uppercase;margin-bottom:1rem}
.foot a{text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.56rem}
.foot img.mark{height:38px;width:auto;margin-bottom:1rem;filter:brightness(0) invert(1)}
.foot .fb{font-family:var(--disp);font-weight:700;font-size:1.3rem;color:#fff;margin-bottom:.9rem}
.foot .soc svg{fill:rgba(255,255,255,.72)}
.apps{display:flex;gap:.6rem;margin-top:1rem;flex-wrap:wrap}
.apps span{font-size:.71rem;border:1px solid rgba(255,255,255,.28);border-radius:999px;
  padding:.4rem .8rem;color:rgba(255,255,255,.65)}
.foot__b{margin-top:2.8rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.13);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:.77rem;
  color:rgba(255,255,255,.45)}

.draft{background:var(--gold);color:#3A2A00;font-size:.77rem;font-weight:700;text-align:center;
  padding:.55rem var(--gut);line-height:1.4}

/* Reveal-on-scroll is an ENHANCEMENT, never a precondition for seeing content.
   These rules only bite once site.js adds .rv-js to <html>. Previously .rv was
   opacity:0 by default, so any element whose observer failed to fire stayed
   invisible forever - which is how the Mission:Go! photo column ended up
   showing "only text". If the JS never runs, everything is simply visible. */
.rv-js .rv{opacity:0;transform:translateY(14px);transition:opacity .55s,transform .55s}
.rv-js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv-js .rv{opacity:1;transform:none;transition:none}
  .btn:hover,.tile:hover,.face:hover,.box:hover,.fyp__card:hover{transform:none}}

@media (max-width:1040px){
  .nav,.bar>.bar__in>.btn--fill{display:none}
  .burger{display:block}
  .foot__g{grid-template-columns:1fr 1fr}
  .util__l .hide{display:none}
}
@media (max-width:900px){
  .times__g,.wel__g,.mgo__g,.grid2{grid-template-columns:1fr}
  .times__g{align-items:start}
  .tiles,.cards,.grid3,.fyp__out{grid-template-columns:1fr}
  .grid4{grid-template-columns:1fr 1fr}
  .hero__f{aspect-ratio:4/3;min-height:0}
  .vf,.mgo__ph{aspect-ratio:4/3}
  :root{--arch:120px 120px 16px 16px}
}
@media (max-width:600px){
  body{font-size:17px}
  .util__l{gap:.75rem;font-size:.74rem}
  .ev{grid-template-columns:1fr;row-gap:.35rem}
  .ev__when{min-width:0}
  .foot__g,.grid4{grid-template-columns:1fr}
  .quote{grid-template-columns:1fr}
  .wall{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:.7rem}
}

/* palette page */
.ramp{display:grid;grid-template-columns:repeat(9,1fr);border-radius:14px;overflow:hidden;
  margin-bottom:.6rem}
.ramp div{aspect-ratio:1/1.5;display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:.5rem;font-size:.6rem;font-family:var(--body);font-weight:700}
.ramp--3{grid-template-columns:repeat(3,1fr)}
.ramp-lbl{display:flex;justify-content:space-between;font-size:.8rem;color:var(--soft);
  margin-bottom:2rem;gap:1rem}
.ramp-lbl strong{color:var(--ink);font-size:.92rem}
.job{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:center;padding:1.1rem 0;
  border-top:1px solid var(--rule)}
.job:last-child{border-bottom:1px solid var(--rule)}
.job__sw{width:52px;height:52px;border-radius:14px;flex:none}
.job h4{margin-bottom:.15rem}
.job p{font-size:.9rem;color:var(--soft);margin:0}
.job code{font-family:ui-monospace,monospace;font-size:.78rem;color:var(--soft)}
@media (max-width:600px){.ramp{grid-template-columns:repeat(5,1fr)}}

/* ---- skip link ---- */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--sage-900);color:#fff;
  padding:.8rem 1.2rem;border-radius:0 0 10px 0;font-weight:700;font-size:.9rem}
.skip:focus{left:0}

/* ---- live / next service badge ---- */
.now{display:inline-flex;align-items:center;gap:.6rem;padding:.5rem 1.1rem;border-radius:999px;
  background:var(--sand-100);border:1px solid var(--sand-200);font-size:.86rem;font-weight:600;
  color:var(--ink);margin-bottom:1.2rem}
.now__dot{width:9px;height:9px;border-radius:50%;background:var(--sage-600);flex:none}
.now.is-live{background:var(--terra-100);border-color:var(--terra-300);color:var(--terra-700)}
.now.is-live .now__dot{background:var(--terra);animation:pulse 1.9s ease-in-out infinite}
.now a{color:inherit;font-weight:700}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}
@media (prefers-reduced-motion:reduce){.now.is-live .now__dot{animation:none}}

/* ---- nav: click + keyboard, and active state ---- */
.nav__i.open .mega{opacity:1;visibility:visible;transform:none}
.nav__b[aria-current="page"]{color:var(--terra-700)}
.nav__b[aria-current="page"]::after{content:"";position:absolute;left:.82rem;right:.82rem;
  bottom:.15rem;height:2px;background:var(--terra);border-radius:2px}
.nav__b{position:relative}
.nav__i.open .nav__b svg{transform:rotate(180deg)}
.nav__b svg{transition:transform .18s}
.drawer a[aria-current="page"]{color:var(--terra-700)}

/* ---- Sunday timeline ---- */
.tl{list-style:none;margin:0;padding:0;position:relative}
.tl::before{content:"";position:absolute;left:11px;top:14px;bottom:22px;width:2px;
  background:linear-gradient(var(--sage-300),var(--sand-200))}
.tl li{position:relative;padding:0 0 1.6rem 2.6rem}
.tl li:last-child{padding-bottom:0}
.tl__dot{position:absolute;left:0;top:4px;width:24px;height:24px;border-radius:50%;
  background:var(--paper);border:2px solid var(--sage);display:grid;place-items:center}
.tl__dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--sage-600)}
.tl li.hi .tl__dot{border-color:var(--terra)}
.tl li.hi .tl__dot::after{background:var(--terra)}
.tl__t{font-family:var(--body);font-size:.72rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--sage-700);margin:0 0 .2rem}
.tl h3{font-size:1.1rem;margin-bottom:.2rem}
.tl p{font-size:.93rem;color:var(--soft);margin:0}

/* ---- accordion ---- */
.acc{border-top:1px solid var(--rule)}
.acc__i{border-bottom:1px solid var(--rule)}
.acc__b{width:100%;background:none;border:0;text-align:left;cursor:pointer;padding:1.15rem 2.4rem 1.15rem 0;
  font-family:var(--disp);font-size:1.12rem;font-weight:600;color:var(--ink);position:relative;
  font-variation-settings:"SOFT" 50,"WONK" 0}
.acc__b:hover{color:var(--terra-700)}
.acc__b::after{content:"";position:absolute;right:.4rem;top:50%;width:11px;height:11px;
  border-right:2px solid var(--sage-700);border-bottom:2px solid var(--sage-700);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.acc__b[aria-expanded="true"]::after{transform:translateY(-30%) rotate(225deg)}
.acc__p{display:none;padding:0 0 1.3rem;color:var(--soft);font-size:.97rem;max-width:60ch}
.acc__i.open .acc__p{display:block}

/* ---- filter chips (events / watch tabs) ---- */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.8rem}
.filters .chip{font-size:.86rem;padding:.55rem 1.1rem}
.tabs{display:flex;gap:.4rem;border-bottom:1px solid var(--rule);margin-bottom:2rem;flex-wrap:wrap}
.tab{background:none;border:0;border-bottom:3px solid transparent;padding:.85rem 1.1rem;
  font-family:var(--body);font-weight:700;font-size:.94rem;color:var(--soft);cursor:pointer;
  margin-bottom:-1px}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--terra-700);border-bottom-color:var(--terra)}
.tabp{display:none}.tabp.on{display:block}
.soon{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:var(--sand-200);color:var(--ink);padding:.22rem .55rem;border-radius:999px;margin-left:.5rem}

/* ---- people wall entrance ---- */
.face{opacity:0;transform:scale(.86)}
.wall.lit .face{opacity:1;transform:scale(1);
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.3,1)}
.wall.lit .face:hover,.wall.lit .face.open{transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){.face{opacity:1;transform:none}}

/* ---- mobile action bar ---- */
.mab{display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--paper);
  border-top:1px solid var(--rule);box-shadow:0 -6px 22px rgba(30,37,36,.10);
  padding:.5rem .6rem calc(.5rem + env(safe-area-inset-bottom))}
.mab__in{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem}
.mab a{display:flex;flex-direction:column;align-items:center;gap:.22rem;text-decoration:none;
  padding:.5rem .3rem;border-radius:12px;font-size:.72rem;font-weight:700;color:var(--sage-700)}
.mab a svg{width:19px;height:19px;fill:currentColor}
.mab a.acc-give{background:var(--terra-btn);color:#fff}
@media (max-width:900px){
  .mab{display:block}
  body{padding-bottom:78px}
}

/* ---- video facade: a still until clicked, so the hero stays the only
   moving thing on the page and we load no YouTube code up front ---- */
.vfacade{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;
  background:var(--sage-900)}
.vfacade img,.vfacade iframe{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border:0}
.vfacade__b{position:absolute;inset:0;width:100%;border:0;cursor:pointer;
  background:linear-gradient(to top,rgba(27,44,45,.72) 0%,rgba(27,44,45,.10) 55%,rgba(27,44,45,.28) 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;
  transition:background-color .2s}
.vfacade__b:hover{background-color:rgba(27,44,45,.18)}
.vfacade__t{font-family:var(--disp);font-weight:600;font-size:1.15rem;color:#fff;
  text-shadow:0 1px 14px rgba(0,0,0,.55);font-variation-settings:"SOFT" 50,"WONK" 0}
.vfacade.playing .vfacade__b,.vfacade.playing img{display:none}

/* ============================================================
   v0.1.5 — stopgaps folded in from Customizer Additional CSS,
   plus inner-page polish. Additional CSS is now empty on purpose:
   every fix lives here so theme updates are never fought by
   stale overrides again.
   ============================================================ */

/* Skip link: keep it off-canvas without creating horizontal scroll. */
.skip:not(:focus){position:absolute!important;left:auto!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip:focus{left:0!important;width:auto;height:auto;clip:auto;clip-path:none}

/* Grid safety: boxes may not force tracks wider than the viewport. */
.box{min-width:0;overflow:hidden}
.sec .box .mega__shot{height:auto;max-width:none}
.sec .box .mega__shot img{width:100%;height:100%;object-fit:cover}

/* Grids collapse cleanly on small screens. */
@media (max-width:900px){
  .grid3,.tiles,.cards,.fyp__out{grid-template-columns:1fr}
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Video cards: thumbnails carry the weight, titles stay quiet.
   Fixes the Watch page grid where long dated titles wrapped into
   towers of serif type beside small thumbnails. */
.cards .card h3{font-family:inherit;font-size:.98rem;font-weight:600;line-height:1.4;letter-spacing:0}

/* Editors' internal notes: the PHP filter strips these for visitors;
   logged-in editors see an amber card so unfinished copy is obvious. */
.ml-note{border:1px dashed var(--gold-700,#8F6708);background:var(--gold-200,#F6E0AB);border-radius:var(--r,14px);padding:1rem 1.2rem;margin:1.8rem 0}
.ml-note__k{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-700,#8F6708);margin-bottom:.4rem;font-weight:700}
.ml-note p{margin:0;color:var(--sage-900,#1B2C2D)}

/* Pull-quotes inside page prose. */
.prose blockquote{margin:2.2rem 0;padding:0 0 0 1.4rem;border-left:4px solid var(--terra,#BE5A38)}
.prose blockquote p{font-family:var(--serif,Georgia,serif);font-size:1.35rem;line-height:1.5;color:var(--sage-800,#2C4546)}

/* The Events Calendar, dressed in the site's own palette. */
:root{
  --tec-color-accent-primary:var(--terra-btn,#B75432);
  --tec-color-accent-primary-hover:var(--terra-700,#9C4526);
  --tec-color-button-primary:var(--terra-btn,#B75432);
  --tec-color-button-primary-hover:var(--terra-700,#9C4526);
  --tec-color-link-accent:var(--terra-700,#9C4526);
  --tec-color-link-accent-hover:var(--terra,#BE5A38);
  --tec-font-family-sans-serif:inherit;
  --tec-font-family-base:inherit;
}
.tribe-events .tribe-events-c-search__button,
.tribe-common .tribe-common-c-btn,
.tribe-common a.tribe-common-c-btn{background-color:var(--terra-btn,#B75432)!important;border-radius:999px}
.tribe-events .tribe-events-c-search__button:hover,
.tribe-common .tribe-common-c-btn:hover{background-color:var(--terra-700,#9C4526)!important}

/* Homepage: upcoming-events fallback strip (shown when no Top-3 posts). */
.evs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;margin-top:2rem}
.evs__card{display:flex;gap:1rem;align-items:flex-start;background:#fff;border:1px solid var(--rule,#dfe7e5);border-radius:var(--r,14px);padding:1.2rem 1.3rem;text-decoration:none;color:inherit;transition:transform .18s ease,box-shadow .18s ease}
.evs__card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(27,44,45,.10)}
.evs__date{flex:0 0 auto;text-align:center;background:var(--sage-100,#E5EFEF);border-radius:12px;padding:.55rem .8rem}
.evs__m{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--terra-700,#9C4526);font-weight:700}
.evs__d{display:block;font-size:1.45rem;font-weight:700;line-height:1.1;color:var(--sage-900,#1B2C2D)}
.evs__t{margin:0 0 .25rem;font-size:1.02rem;font-weight:600;line-height:1.35}
.evs__w{margin:0;font-size:.88rem;color:var(--soft,#5E8384)}
@media (max-width:900px){.evs{grid-template-columns:1fr}}


/* ============================================================
   v0.1.7 - Phase 2 visual changes (Sarah Ortiz's Sep 3, 2026 list
   and Brooke Luong's Sep 17, 2026 notes). Selectors are one step
   more specific than the Sep 2 rules in Customizer Additional CSS
   so these win without !important.
   ============================================================ */

/* Top green bar and main menu in all caps, sized after calvaryalex.org
   (small, bold, letter-spaced capitals). */
.util__l a{text-transform:uppercase;letter-spacing:.12em;font-weight:600}
.bar .nav__b{text-transform:uppercase;letter-spacing:.09em;font-size:14px;font-weight:700;padding:.6rem .7rem}
.bar .bar__in > .btn--fill{text-transform:uppercase;letter-spacing:.12em;font-size:14px}
.drawer .btn--fill{text-transform:uppercase;letter-spacing:.12em}

/* Horizontal logo, top left. The file is the church's white horizontal
   mark; brightness(0) renders it solid black on the white bar. */
.bar .logo img{height:30px;width:auto;filter:brightness(0)}
@media (max-width:1180px){.bar .logo img{height:27px}}
@media (max-width:600px){.bar .logo img{height:24px}}
@media (max-width:380px){.bar .logo img{height:20px}}

/* Homepage section subtitles larger: Join us this Sunday, This week at
   Mission, A welcome from our pastor, Watch, This is us, Mission:Go! */
.home .eyebrow{font-size:1.02rem;letter-spacing:.15em}

/* Page heading bar: solid sage instead of the sage-to-sand gradient. */
.ph{background:var(--sage)}
.ph .eyebrow,.ph .lede{color:var(--sage-900)}

/* Mustard boxes (About Us, Mission:Go!, Music). */
.box--gold{background:var(--gold);border-color:var(--gold)}
.box--gold .box__k{color:var(--sage-900)}
.box--gold h3,.box--gold p{color:var(--ink)}

/* Photos fill their shapes: team circles, the About us / Ministries
   dropdown photos, and page banner photos across the full column. */
.person__img{padding:0}
.sec .wrap > .mega__shot{width:100%;display:block}
.sec .wrap > .mega__shot img{height:100%}
/* Sanctuary entrance banner (About us, Mission:Go!): frame the doors and
   cross, keep the red curb at the bottom of the photo out of view. */
.sec .wrap > .mega__shot img[src*="church-entrance"]{object-position:50% 55%}

/* Homepage Mission:Go! photo of the sanctuary entrance: enlarged so the
   red curb at the bottom of the photo is cropped out (Brooke, Sep 17). */
.mgo__ph img{transform:scale(1.2);transform-origin:50% 22%}


/* v0.1.9 - Phase 3. Ministries page: photos fill the top of each card
   (no pale frame), and linked cards show they are clickable. */
.grid3 a.box h3{transition:color .18s}
.grid3 a.box:hover h3{color:var(--terra)}


/* Ministries grid (Brooke, Sep 28 2026): every card is white, and hovering
   a card fills it terracotta so it reads as a button. All seven cards link
   to their own page, so the hover never promises a click that goes nowhere.
   .grid3.mincards outranks the older ".grid3 a.box:hover h3" rule, which
   turned titles terracotta and would vanish on a terracotta card. */
.grid3.mincards .box{background:#fff;
  transition:transform .18s,box-shadow .18s,background-color .18s,border-color .18s}
.grid3.mincards a.box:hover,.grid3.mincards a.box:focus-visible{
  background:var(--terra-btn);border-color:var(--terra-btn)}
.grid3.mincards a.box:hover h3,.grid3.mincards a.box:focus-visible h3,
.grid3.mincards a.box:hover p,.grid3.mincards a.box:focus-visible p,
.grid3.mincards a.box:hover .box__k,.grid3.mincards a.box:focus-visible .box__k{color:#fff}
.grid3.mincards a.box:focus-visible{outline:3px solid var(--terra-700);outline-offset:3px}