/* ============================================================================
   Logan Martin church of Christ — "Still Waters"
   Cool misted-water light mode / evening-lake dark mode. Newsreader (display)
   over Mulish (body). The signature is water: a slow wave surface under the
   hero and waterline dividers between sections. All motion respects
   prefers-reduced-motion.
   ========================================================================== */

/* ---- fonts (self-hosted variable woff2, latin) --------------------------- */
@font-face { font-family:'Newsreader'; src:url('/static/fonts/Newsreader.woff2') format('woff2');
  font-weight:200 800; font-style:normal; font-display:swap; }
@font-face { font-family:'Newsreader'; src:url('/static/fonts/Newsreader-Italic.woff2') format('woff2');
  font-weight:200 800; font-style:italic; font-display:swap; }
@font-face { font-family:'Mulish'; src:url('/static/fonts/Mulish.woff2') format('woff2');
  font-weight:300 900; font-style:normal; font-display:swap; }
@font-face { font-family:'Mulish'; src:url('/static/fonts/Mulish-Italic.woff2') format('woff2');
  font-weight:300 900; font-style:italic; font-display:swap; }

/* ---- tokens: light ("sunrise on the lake" — from the church's logo) ------- */
/* Brand: navy #1f3350 · coral sunrise #ee7440 · lake blue #54c3e6 */
:root{
  --mist:#eef3f7;        /* page background (cool misted water-white) */
  --mist-2:#e1eaf1;      /* recessed */
  --paper:#ffffff;       /* raised surfaces */
  --ink:#1b2a44;         /* navy text */
  --ink-soft:#4c5c78;    /* secondary text */
  --ink-faint:#8194ab;   /* captions */
  --cypress:#22406c;     /* primary deep lake-navy (accent/link/heading) */
  --cypress-deep:#182c48;/* dark band surface — stays dark in BOTH themes */
  --on-cypress:#f3f8fd;  /* text on a --cypress fill */
  --shallow:#2b93c6;     /* lake-blue accent (links, water) */
  --shallow-soft:#d3ebf7;
  --dawn:#ee7440;        /* coral sunrise (warm accent, from the logo) */
  --dawn-soft:#fbdfce;
  --line:#d2e0ec;        /* hairlines */
  --msg-err-bg:#fbeae7; --msg-err-ink:#a5382a;   /* status messages + badges */
  --msg-ok-ink:#182c48; --badge-on-ink:#12466a; --badge-gold-ink:#a24d22;
  --shadow:0 1px 2px rgba(16,40,36,.05), 0 8px 30px -12px rgba(16,40,36,.18);
  --shadow-lg:0 2px 4px rgba(16,40,36,.06), 0 26px 60px -22px rgba(16,40,36,.30);

  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Mulish',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --wrap:72rem;
  --gutter:clamp(1.25rem,5vw,4rem);
  --radius:14px;
  --ease:cubic-bezier(.22,.61,.36,1);

  color-scheme:light;
}
:root[data-theme="dark"]{
  --mist:#0b1420; --mist-2:#0f1c2c; --paper:#13212f; --ink:#e8eef5; --ink-soft:#9fb2c6;
  --ink-faint:#6d8299; --cypress:#5aa9dd; --cypress-deep:#0c1c2e; --on-cypress:#07131f; --shallow:#6ab8e0;
  --shallow-soft:#143247; --dawn:#f0895a; --dawn-soft:#3a2417; --line:#22364a;
  --msg-err-bg:#3a201c; --msg-err-ink:#f0a99d; --msg-ok-ink:#bfe4f6; --badge-on-ink:#bfe4f6; --badge-gold-ink:#f0895a;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 40px -16px rgba(0,0,0,.6);
  --shadow-lg:0 2px 6px rgba(0,0,0,.45), 0 30px 70px -24px rgba(0,0,0,.7);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --mist:#0b1420; --mist-2:#0f1c2c; --paper:#13212f; --ink:#e8eef5; --ink-soft:#9fb2c6;
    --ink-faint:#6d8299; --cypress:#5aa9dd; --cypress-deep:#0c1c2e; --on-cypress:#07131f; --shallow:#6ab8e0;
    --shallow-soft:#143247; --dawn:#f0895a; --dawn-soft:#3a2417; --line:#22364a;
    --msg-err-bg:#3a201c; --msg-err-ink:#f0a99d; --msg-ok-ink:#bfe4f6; --badge-on-ink:#bfe4f6; --badge-gold-ink:#f0895a;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 40px -16px rgba(0,0,0,.6);
    --shadow-lg:0 2px 6px rgba(0,0,0,.45), 0 30px 70px -24px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}

/* ---- reset-ish ----------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--mist); color:var(--ink);
  font-family:var(--sans); font-size:clamp(1rem,.55vw + .9rem,1.075rem);
  line-height:1.65; font-weight:400; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--serif); font-weight:500; line-height:1.08; letter-spacing:-.01em; margin:0 0 .5em}
h1{font-size:clamp(2.6rem,6vw,4.7rem)}
h2{font-size:clamp(2rem,4vw,3rem)}
h3{font-size:clamp(1.35rem,2.2vw,1.7rem); line-height:1.2}
p{margin:0 0 1.1em}
a{color:var(--cypress); text-decoration:none}
img{max-width:100%; display:block}
:focus-visible{outline:2.5px solid var(--shallow); outline-offset:3px; border-radius:4px}
::selection{background:var(--dawn-soft); color:var(--ink)}
hr{border:0; border-top:1px solid var(--line); margin:2.5rem 0}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)}
.narrow{max-width:44rem}
.eyebrow{font-family:var(--sans); font-size:.74rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--shallow); margin:0 0 1rem; display:flex; align-items:center; gap:.7rem}
.eyebrow::before{content:""; width:1.6rem; height:1px; background:currentColor; opacity:.6}
.center{text-align:center}
.center .eyebrow{justify-content:center}

/* ---- top chrome: wordmark + menu button (no tab bar) --------------------- */
.chrome{position:fixed; inset:0 0 auto 0; z-index:60; display:flex; justify-content:space-between;
  align-items:center; padding:clamp(.9rem,2vw,1.5rem) var(--gutter); pointer-events:none;
  transition:background .4s var(--ease), backdrop-filter .4s var(--ease)}
.chrome.solid{background:color-mix(in srgb, var(--mist) 86%, transparent); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.chrome > *{pointer-events:auto}
.wordmark{display:inline-flex; align-items:center; line-height:1}
.logo-badge{height:clamp(46px,6vw,58px); width:auto; aspect-ratio:1; border-radius:14px; background:#fff;
  padding:5px; box-shadow:0 2px 10px rgba(20,40,70,.14), 0 0 0 1px rgba(20,40,70,.05); object-fit:contain; display:block}

.menu-btn{display:inline-flex; align-items:center; gap:.6rem; font-family:var(--sans); font-weight:700;
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); padding:.6rem 1.05rem; border-radius:999px;
  cursor:pointer; box-shadow:var(--shadow); transition:transform .3s var(--ease), border-color .3s}
.menu-btn:hover{transform:translateY(-1px); border-color:var(--shallow)}
.menu-btn .bars{position:relative; width:16px; height:11px}
.menu-btn .bars i{position:absolute; left:0; right:0; height:1.7px; background:currentColor; border-radius:2px; transition:transform .35s var(--ease), opacity .25s}
.menu-btn .bars i:nth-child(1){top:0} .menu-btn .bars i:nth-child(2){top:4.5px} .menu-btn .bars i:nth-child(3){top:9px}

/* ---- fluid overlay menu -------------------------------------------------- */
.overlay{position:fixed; inset:0; z-index:70; background:var(--cypress-deep); color:#eaf4f1;
  clip-path:circle(0 at calc(100% - 3.5rem) 2.6rem); transition:clip-path .7s var(--ease);
  display:flex; visibility:hidden}
.overlay.open{clip-path:circle(150% at calc(100% - 3.5rem) 2.6rem); visibility:visible}
.overlay::after{content:""; position:absolute; inset:auto 0 0 0; height:38%;
  background:radial-gradient(120% 100% at 30% 100%, rgba(207,154,68,.16), transparent 60%); pointer-events:none}
.overlay-inner{margin:auto; width:100%; max-width:var(--wrap); padding:6rem var(--gutter) 3rem;
  display:grid; grid-template-columns:1.4fr 1fr; gap:3rem; align-items:center}
.overlay nav{display:flex; flex-direction:column; gap:.1rem}
.overlay nav a{font-family:var(--serif); font-size:clamp(2rem,5vw,3.4rem); color:#eaf4f1; font-weight:400;
  line-height:1.12; padding:.15em 0; width:max-content; position:relative; opacity:0; transform:translateY(18px);
  transition:color .25s}
.overlay nav a .idx{font-family:var(--sans); font-size:.68rem; font-weight:700; letter-spacing:.15em;
  color:var(--dawn); vertical-align:super; margin-right:.6rem; opacity:.85}
.overlay nav a:hover{color:var(--dawn)}
.overlay.open nav a{opacity:1; transform:none; transition:opacity .5s var(--ease), transform .5s var(--ease), color .25s}
.overlay.open nav a:nth-child(1){transition-delay:.12s} .overlay.open nav a:nth-child(2){transition-delay:.17s}
.overlay.open nav a:nth-child(3){transition-delay:.22s} .overlay.open nav a:nth-child(4){transition-delay:.27s}
.overlay.open nav a:nth-child(5){transition-delay:.32s} .overlay.open nav a:nth-child(6){transition-delay:.37s}
.overlay.open nav a:nth-child(7){transition-delay:.42s} .overlay.open nav a:nth-child(8){transition-delay:.47s}
.overlay .card-side{border-left:1px solid rgba(234,244,241,.18); padding-left:2.4rem}
.overlay .card-side .k{font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dawn); font-weight:700; margin-bottom:.4rem}
.overlay .card-side p{color:#cfe2dd; margin-bottom:1.4rem}
.overlay .card-side a.plain{color:#eaf4f1; border-bottom:1px solid rgba(234,244,241,.3)}
.overlay-close{position:absolute; top:clamp(.9rem,2vw,1.5rem); right:var(--gutter); background:transparent;
  border:1px solid rgba(234,244,241,.3); color:#eaf4f1; border-radius:999px; padding:.55rem 1.05rem;
  font-family:var(--sans); font-weight:700; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; cursor:pointer}
.overlay-close:hover{border-color:var(--dawn); color:var(--dawn)}

/* ---- buttons ------------------------------------------------------------- */
.btn{display:inline-flex; align-items:center; gap:.55rem; font-family:var(--sans); font-weight:700;
  font-size:.9rem; letter-spacing:.01em; padding:.8rem 1.5rem; border-radius:999px; cursor:pointer;
  border:1px solid transparent; transition:transform .25s var(--ease), box-shadow .25s, background .25s, color .25s}
.btn.primary{background:var(--cypress); color:var(--on-cypress); box-shadow:var(--shadow)}
.btn.primary:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg)}
.btn.ghost{background:transparent; border-color:var(--line); color:var(--ink)}
.btn.ghost:hover{border-color:var(--cypress); transform:translateY(-2px)}
.btn.gold{background:var(--dawn); color:#2a2110}
.btn.gold:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg)}
.btn.sm{padding:.5rem 1rem; font-size:.8rem}
.btn.danger{background:transparent; border-color:#c9584a; color:#c9584a}
.btn.danger:hover{background:#c9584a; color:#fff}

/* water-fill underline for inline text links */
.ln{color:var(--cypress); background-image:linear-gradient(var(--shallow),var(--shallow));
  background-size:0% 2px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .35s var(--ease); padding-bottom:2px}
.ln:hover{background-size:100% 2px}

/* ============================ HERO ======================================== */
.hero{position:relative; min-height:100svh; display:flex; align-items:center; isolation:isolate;
  padding:7rem 0 0; overflow:hidden}
.hero-bg{position:absolute; inset:0; z-index:-3; background:
  radial-gradient(120% 90% at 78% 8%, var(--dawn-soft) 0%, transparent 42%),
  linear-gradient(180deg, var(--mist) 0%, var(--mist-2) 62%, var(--cypress) 165%)}
.hero-bg.photo{background-size:cover; background-position:center}
.hero-bg.photo::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(9,26,24,.32), rgba(9,26,24,.55) 70%, var(--cypress) 140%)}
.hero.has-photo{color:#f4f8fd}
.hero.has-photo .hero-line, .hero.has-photo .scroll-cue{color:#dbe7f5}
.hero.has-photo .eyebrow{color:var(--dawn)}

/* background video (Southaven-style: autoplay muted loop, cover) */
.hero-media{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-3}
.hero-scrim{position:absolute; inset:0; z-index:-2;
  background:linear-gradient(180deg, rgba(10,22,38,.34), rgba(10,22,38,.60) 68%, var(--cypress-deep) 145%)}

/* the still-water surface at the base of the hero */
.waves{position:absolute; left:0; right:0; bottom:0; z-index:-2; width:100%; height:34vh; min-height:220px}
.waves svg{width:100%; height:100%}
.wave-layer path{fill:var(--cypress)}
.wave-layer{transform-origin:center}
.wave-a{opacity:.32; animation:drift 15s linear infinite}
.wave-b{opacity:.55; animation:drift 22s linear infinite reverse}
.wave-c{opacity:1; animation:drift 30s linear infinite}
@keyframes drift{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.hero-glow{position:absolute; z-index:-2; bottom:8vh; left:50%; transform:translateX(-50%);
  width:60vw; height:120px; background:radial-gradient(50% 100% at 50% 100%, rgba(207,154,68,.35), transparent 70%);
  filter:blur(6px)}

.hero-content{width:100%}
.hero h1{font-weight:400; max-width:15ch}
.hero h1 em{font-style:italic; color:var(--cypress)}
.hero.has-photo h1 em{color:var(--dawn)}
.hero-line{font-size:clamp(1.1rem,1.6vw,1.35rem); color:var(--ink-soft); max-width:40ch; margin-top:.4rem}
.hero-actions{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem}
.hero-times{margin-top:2.6rem; display:flex; flex-wrap:wrap; gap:1.8rem; font-size:.95rem}
.hero-times div{border-left:2px solid var(--dawn); padding-left:.85rem}
.hero-times .d{font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); font-weight:700}
.hero-times .t{font-family:var(--serif); font-size:1.15rem}
.hero.has-photo .hero-times .d{color:#bcd3ce}
.scroll-cue{position:absolute; bottom:1.4rem; left:50%; transform:translateX(-50%); z-index:1;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); font-weight:700;
  display:flex; flex-direction:column; align-items:center; gap:.5rem}
.scroll-cue .dot{width:1px; height:34px; background:linear-gradient(var(--dawn),transparent); animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%,100%{transform:scaleY(.4); opacity:.4} 50%{transform:scaleY(1); opacity:1}}

/* ---- generic sections ---------------------------------------------------- */
.section{padding:clamp(4rem,9vw,8rem) 0; position:relative}
.section.tint{background:var(--mist-2)}
.section.deep{background:var(--cypress-deep); color:#e9f4f1}
.section.deep .eyebrow{color:var(--dawn)} .section.deep h2, .section.deep h3{color:#f1f9f6}
.section.deep p{color:#c9ded9}
.section-head{max-width:38rem; margin-bottom:3rem}
.section-head.center{margin-inline:auto}

/* waterline divider — a thin mirrored gradient like the surface of water */
.waterline{height:2px; background:linear-gradient(90deg,transparent, var(--shallow) 20%, var(--dawn) 50%, var(--shallow) 80%, transparent); opacity:.5}

/* ---- verse band ---------------------------------------------------------- */
.verse{padding:clamp(4rem,8vw,7rem) 0; text-align:center; background:var(--mist-2)}
.verse blockquote{font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.5rem,3.4vw,2.6rem); line-height:1.32; max-width:24ch; margin:0 auto; color:var(--ink)}
.verse cite{display:block; margin-top:1.5rem; font-family:var(--sans); font-style:normal; font-weight:700;
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--shallow)}

/* ---- cards --------------------------------------------------------------- */
.grid{display:grid; gap:1.5rem}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--shadow); transition:transform .35s var(--ease), box-shadow .35s, border-color .35s}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--shallow-soft)}
.card .thumb{aspect-ratio:16/10; background:linear-gradient(135deg,var(--shallow-soft),var(--mist-2)); background-size:cover; background-position:center; position:relative}
.card .thumb .k{position:absolute; top:.8rem; left:.8rem; background:var(--paper); color:var(--cypress);
  font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:.3rem .65rem; border-radius:999px}
.card .body{padding:1.4rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.5rem; flex:1}
.card .meta{font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); font-weight:700}
.card h3{margin:0}
.card h3 a{color:var(--ink)} .card h3 a:hover{color:var(--cypress)}
.card p{color:var(--ink-soft); margin:0; font-size:.96rem}
.card .more{margin-top:auto; padding-top:.6rem; font-weight:700; font-size:.85rem; color:var(--cypress)}

/* worship schedule panel */
.worship{display:grid; grid-template-columns:1fr 1fr; gap:1.5rem}
.sched{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem; box-shadow:var(--shadow)}
.sched h3{display:flex; align-items:baseline; gap:.6rem}
.sched h3 small{font-family:var(--sans); font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--shallow)}
.sched ul{list-style:none; margin:1rem 0 0; padding:0}
.sched li{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.7rem 0; border-top:1px dashed var(--line)}
.sched li:first-child{border-top:0}
.sched li .lab{color:var(--ink-soft)}
.sched li .val{font-family:var(--serif); font-size:1.25rem; color:var(--ink); white-space:nowrap}

/* two-column feature */
.feature{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.feature .media-fig{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:4/3;
  background:linear-gradient(140deg,var(--cypress-deep),var(--shallow-soft)); position:relative}
.feature .media-fig img{width:100%; height:100%; object-fit:cover}

/* ---- prose (articles + pages) -------------------------------------------- */
.prose{font-size:1.09rem; line-height:1.75}
.prose h2{margin-top:2.2em} .prose h3{margin-top:1.8em}
.prose p{margin:0 0 1.2em}
.prose a{color:var(--cypress); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--shallow)}
.prose blockquote{margin:1.8em 0; padding:.2em 0 .2em 1.5rem; border-left:3px solid var(--dawn);
  font-family:var(--serif); font-style:italic; font-size:1.25em; color:var(--ink-soft)}
.prose ul,.prose ol{margin:0 0 1.2em; padding-left:1.3em} .prose li{margin:.3em 0}
.prose img{border-radius:10px; margin:1.5em 0}
.prose code{background:var(--mist-2); padding:.15em .4em; border-radius:5px; font-size:.9em}
.prose hr{margin:2.5em 0}
.article-head{padding:9rem 0 0}
.article-head .kicker{font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--shallow); font-weight:700}
.article-cover{aspect-ratio:21/9; border-radius:var(--radius); overflow:hidden; margin:2.5rem 0; box-shadow:var(--shadow-lg); background:var(--mist-2) center/cover}

/* media embeds */
.embed{position:relative; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; background:#000; box-shadow:var(--shadow)}
.embed iframe,.embed video{position:absolute; inset:0; width:100%; height:100%; border:0}

/* Facebook page-plugin feed */
.fb-embed{max-width:500px; margin-inline:auto; width:100%}
.fb-embed iframe{width:100%; max-width:500px; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:var(--paper)}

/* ---- footer -------------------------------------------------------------- */
.foot{background:var(--cypress-deep); color:#bcd6d0; padding:clamp(3.5rem,7vw,6rem) 0 2.5rem; position:relative}
.foot .waterline{position:absolute; top:0; left:0; right:0}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:2.5rem}
.foot h4{color:#eef7f4; font-family:var(--sans); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700; margin:0 0 1rem}
.foot .brand b{font-family:var(--serif); font-size:1.6rem; color:#fff; display:block; line-height:1.1}
.foot a{color:#bcd6d0; display:block; padding:.28rem 0} .foot a:hover{color:var(--dawn)}
.foot .bottom{margin-top:3rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.82rem; color:#8fb0aa}
.foot .bottom a{display:inline; color:#8fb0aa}
.foot-logo{width:132px; height:auto; aspect-ratio:1; border-radius:16px; background:#fff; padding:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.28); object-fit:contain}

/* ---- scroll reveal ------------------------------------------------------- */
/* Hidden only when JS is present (adds .js on <html>); without JS everything
   stays visible so content never depends on scripts. */
.js .reveal{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.js .reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.08s} .reveal.d2{transition-delay:.16s} .reveal.d3{transition-delay:.24s}

/* ---- flash toast --------------------------------------------------------- */
.flash{position:fixed; z-index:90; left:50%; bottom:1.5rem; transform:translateX(-50%);
  background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--shallow);
  box-shadow:var(--shadow-lg); border-radius:12px; padding:.9rem 1.3rem; font-weight:600; color:var(--ink);
  max-width:90vw; animation:pop .5s var(--ease)}
.flash.err{border-left-color:#c9584a}
@keyframes pop{from{opacity:0; transform:translate(-50%,14px)} to{opacity:1; transform:translate(-50%,0)}}

/* ---- theme toggle -------------------------------------------------------- */
.theme-tog{background:var(--paper); border:1px solid var(--line); width:2.5rem; height:2.5rem; border-radius:999px;
  display:inline-grid; place-items:center; cursor:pointer; color:var(--ink); box-shadow:var(--shadow); transition:transform .3s, border-color .3s}
.theme-tog:hover{transform:translateY(-1px); border-color:var(--shallow)}
.theme-tog svg{width:17px; height:17px}
.theme-tog .moon{display:none} :root[data-theme="dark"] .theme-tog .sun{display:none}
:root[data-theme="dark"] .theme-tog .moon{display:block}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .theme-tog .sun{display:none} :root:not([data-theme="light"]) .theme-tog .moon{display:block} }

/* ========================================================================== */
/*  APP CHROME: auth screens, member area, admin CMS                          */
/* ========================================================================== */
.plate{min-height:100svh; display:grid; place-items:center; padding:6rem var(--gutter) 3rem; position:relative}
.plate .hero-bg{position:fixed}
.panel{background:var(--paper); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-lg);
  width:100%; max-width:26rem; padding:2.4rem}
.panel h1{font-size:2rem; margin-bottom:.2rem}
.panel .sub{color:var(--ink-soft); margin-bottom:1.6rem}
.field{margin-bottom:1.1rem}
.field label{display:block; font-weight:700; font-size:.82rem; letter-spacing:.02em; margin-bottom:.4rem; color:var(--ink)}
.field .hint{font-weight:400; color:var(--ink-faint); font-size:.78rem}
.input,select.input,textarea.input{width:100%; font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:var(--mist); border:1px solid var(--line); border-radius:10px; padding:.7rem .85rem; transition:border-color .2s, background .2s}
.input:focus{border-color:var(--shallow); background:var(--paper); outline:none}
textarea.input{resize:vertical; min-height:8rem; line-height:1.6}
.form-note{font-size:.85rem; color:var(--ink-soft)}
.err-msg{background:var(--msg-err-bg); color:var(--msg-err-ink); border-radius:10px; padding:.7rem .9rem; font-size:.9rem; margin-bottom:1rem; font-weight:600}
.ok-msg{background:var(--shallow-soft); color:var(--msg-ok-ink); border-radius:10px; padding:.7rem .9rem; font-size:.9rem; margin-bottom:1rem; font-weight:600}

/* admin shell */
.admin{display:grid; grid-template-columns:16rem 1fr; min-height:100svh}
.side{background:var(--cypress-deep); color:#cfe2dd; padding:1.6rem 1.1rem; position:sticky; top:0; height:100svh; overflow:auto}
.side .brand{display:flex; gap:.6rem; align-items:center; color:#fff; margin-bottom:1.8rem; padding:.2rem .4rem}
.side .brand b{font-family:var(--serif); font-size:1.15rem}
.side .brand span{font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:#8fb0aa; display:block}
.side nav{display:flex; flex-direction:column; gap:.15rem}
.side nav .lbl{font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:#6f938c; font-weight:700; margin:1.1rem .6rem .4rem}
.side nav a{color:#cfe2dd; padding:.55rem .7rem; border-radius:9px; font-weight:600; font-size:.92rem; display:flex; justify-content:space-between; align-items:center; transition:background .2s, color .2s}
.side nav a:hover{background:rgba(255,255,255,.06); color:#fff}
.side nav a.active{background:var(--cypress); color:#fff}
.side nav a .pill{background:rgba(255,255,255,.12); color:#eaf4f1; font-size:.7rem; padding:.05rem .5rem; border-radius:999px; font-weight:700}
.side .whoami{margin-top:1.4rem; padding-top:1.1rem; border-top:1px solid rgba(255,255,255,.12); font-size:.8rem; color:#8fb0aa}
.side .whoami b{color:#eaf4f1; display:block; font-family:var(--sans)}
.main{padding:clamp(1.5rem,3vw,2.6rem); min-width:0}
.main-head{display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap; margin-bottom:1.8rem}
.main-head h1{font-size:2.1rem; margin:0}
.main-head .crumb{font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--shallow); font-weight:700; margin-bottom:.3rem}

.stat-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:1rem; margin-bottom:2rem}
.stat{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem 1.3rem; box-shadow:var(--shadow)}
.stat .n{font-family:var(--serif); font-size:2.2rem; line-height:1; color:var(--cypress)}
.stat .l{font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); font-weight:700; margin-top:.4rem}

.tbl{width:100%; border-collapse:collapse; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.tbl th{text-align:left; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); font-weight:700; padding:.85rem 1rem; background:var(--mist-2); border-bottom:1px solid var(--line)}
.tbl td{padding:.85rem 1rem; border-bottom:1px solid var(--line); vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:hover td{background:color-mix(in srgb,var(--shallow-soft) 30%, transparent)}
.tbl .t-title{font-family:var(--serif); font-size:1.1rem; color:var(--ink)}
.tbl .acts{display:flex; gap:.5rem; justify-content:flex-end}
.badge{display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.2rem .6rem; border-radius:999px}
.badge.on{background:var(--shallow-soft); color:var(--badge-on-ink)}
.badge.off{background:var(--mist-2); color:var(--ink-faint)}
.badge.gold{background:var(--dawn-soft); color:var(--badge-gold-ink)}

.editor-grid{display:grid; grid-template-columns:1fr 20rem; gap:1.5rem; align-items:start}
.card-box{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow); margin-bottom:1.5rem}
.card-box h3{font-size:1.15rem; margin-bottom:1rem}
/* ---- Trix WYSIWYG editor ------------------------------------------------- */
trix-toolbar .trix-button-row{flex-wrap:wrap}
trix-toolbar .trix-button-group{border-color:var(--line); background:var(--mist-2); border-radius:8px; overflow:hidden}
trix-toolbar .trix-button{border-bottom:0; background:transparent; color:var(--ink)}
trix-toolbar .trix-button:not(:first-child){border-left-color:var(--line)}
trix-toolbar .trix-button.trix-active{background:var(--shallow-soft)}
trix-toolbar .trix-button--icon::before{opacity:.85}
.rt-editor, trix-editor{min-height:11rem; background:var(--paper); border:1px solid var(--line); border-radius:10px;
  padding:.75rem .9rem; color:var(--ink); font-family:var(--sans); font-size:1rem; line-height:1.6}
trix-editor:focus{border-color:var(--shallow); outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--shallow) 22%, transparent)}
trix-editor h1{font-family:var(--serif); font-size:1.4rem; font-weight:600; margin:.4em 0 .2em}
trix-editor a{color:var(--cypress); text-decoration:underline}
trix-editor blockquote{border-left:3px solid var(--dawn); margin:.6em 0; padding-left:1rem; color:var(--ink-soft)}
/* dark: Trix's icons are dark SVGs — invert so they read on the dark toolbar */
:root[data-theme="dark"] trix-toolbar .trix-button--icon::before{filter:invert(1) hue-rotate(180deg) brightness(1.3)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) trix-toolbar .trix-button--icon::before{filter:invert(1) hue-rotate(180deg) brightness(1.3)} }
.trix-content{font-family:var(--sans)}

.md-toolbar{display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.5rem}
.md-toolbar button{font-family:var(--sans); font-weight:700; font-size:.82rem; background:var(--mist-2); border:1px solid var(--line); color:var(--ink-soft); border-radius:7px; padding:.35rem .6rem; cursor:pointer}
.md-toolbar button:hover{border-color:var(--shallow); color:var(--cypress)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.inline-actions{display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; margin-top:1.4rem}
.check{display:flex; align-items:center; gap:.6rem; font-weight:600}
.check input{width:1.15rem; height:1.15rem; accent-color:var(--cypress)}
.thumb-pick{aspect-ratio:16/10; border-radius:10px; background:var(--mist-2) center/cover; border:1px dashed var(--line); display:grid; place-items:center; color:var(--ink-faint); overflow:hidden; margin-bottom:.6rem}
.thumb-pick img{width:100%; height:100%; object-fit:cover}

.empty{text-align:center; padding:4rem 1rem; color:var(--ink-faint)}
.empty .big{font-family:var(--serif); font-size:1.5rem; color:var(--ink-soft); margin-bottom:.5rem}

.lib-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(9rem,1fr)); gap:1rem}
.lib-item{border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--paper)}
.lib-item .im{aspect-ratio:1; background:var(--mist-2) center/cover}
.lib-item .rn{padding:.5rem; font-size:.72rem; color:var(--ink-faint); display:flex; justify-content:space-between; gap:.4rem; align-items:center}
.copy{background:none; border:0; color:var(--cypress); cursor:pointer; font-weight:700; font-size:.72rem}

.resource-list{display:grid; gap:.8rem}
.resource{display:flex; gap:1rem; align-items:center; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:1rem 1.2rem; box-shadow:var(--shadow)}
.resource .ic{width:2.6rem; height:2.6rem; border-radius:9px; background:var(--shallow-soft); color:var(--cypress); display:grid; place-items:center; flex:none}
.resource .rt{flex:1; min-width:0}
.resource .rt b{font-family:var(--serif); font-size:1.15rem; font-weight:500}
.resource .rt p{margin:.1rem 0 0; color:var(--ink-soft); font-size:.9rem}

/* member portal hero */
.mem-hero{padding:9rem 0 2rem; background:var(--mist-2); border-bottom:1px solid var(--line)}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width:900px){
  .grid.c3{grid-template-columns:1fr 1fr}
  .worship{grid-template-columns:1fr}
  .feature{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .overlay-inner{grid-template-columns:1fr}
  .overlay .card-side{border-left:0; border-top:1px solid rgba(234,244,241,.18); padding:2rem 0 0}
  .editor-grid{grid-template-columns:1fr}
  .admin{grid-template-columns:1fr}
  .side{position:static; height:auto; display:grid; grid-template-columns:1fr; gap:.2rem}
  .side nav{flex-flow:row wrap} .side nav .lbl{width:100%}
}
@media (max-width:620px){
  .grid.c3,.grid.c2{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  .main-head{align-items:flex-start}
  .tbl thead{display:none}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block; width:100%}
  .tbl tr{border-bottom:1px solid var(--line); padding:.6rem 0}
  .tbl td{border:0; padding:.25rem 1rem}
  .tbl .acts{justify-content:flex-start; padding-bottom:.6rem}
}

/* ---- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .reveal{opacity:1; transform:none}
  .wave-a,.wave-b,.wave-c{animation:none}
  .overlay{transition:opacity .2s} .overlay:not(.open){opacity:0} .overlay.open{opacity:1}
}