/* First Baptist Church of Gold Hill — site styles (plain selectors) */
:root {
  --ink:#26261f; --ink-soft:#54503f;
  --pine:#1a4f82; --pine-deep:#0e3059;
  --gold:#a97c33; --gold-soft:#d8b878;
  --paper:#fbf8f1; --panel:#f2ecdc; --panel-green:#e5eef7;
  --line:#e2d7bf; --white:#fffdf8;
  --maxw:1120px;
}
* {box-sizing:border-box}
html {scroll-behavior:smooth}
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Mulish",system-ui,-apple-system,sans-serif;
  font-size:18px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4 {font-family:"Fraunces",Georgia,serif; line-height:1.12; color:var(--pine-deep); font-weight:500; margin:0 0 .4em}
h1 {font-size:clamp(2.3rem,5.5vw,3.7rem)}
h2 {font-size:clamp(1.7rem,3.6vw,2.5rem)}
h3 {font-size:1.35rem}
p {margin:0 0 1.1em; max-width:66ch}
a {color:var(--pine)}
img {max-width:100%;display:block}
.container {width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px}
.site-header {position:sticky; top:0; z-index:50; background:rgba(251,248,241,.92);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.nav-wrap {display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:74px}
/* ===== The beta site wears a warning =====
   Live and beta look identical, which is how an evening's work on the
   Wednesday lesson got uploaded to the wrong one. Red, across the top of
   every page, above the sticky header so it scrolls away rather than eating
   screen room for ever - the tab title and icon carry the warning once the
   band is off screen. */
.beta-bar {background:#c0261f; color:#fff; text-align:center; font-weight:700;
    font-size:.95rem; padding:8px 16px; letter-spacing:.02em}
.beta-bar a {color:#fff; text-decoration:underline; margin-left:6px; white-space:nowrap}
.beta-mark {border-radius:12px; box-shadow:0 2px 8px rgba(192,38,31,.35); flex:0 0 auto}
.beta-text {color:#c0261f; letter-spacing:.06em}
.beta-text small {color:#c0261f !important; opacity:.8}
/* A red hairline under the header, so the warning is still visible once the
   band has scrolled away. */
.site-header.is-beta {border-bottom:3px solid #c0261f}
@media (max-width:700px){
  .beta-bar {font-size:.85rem; padding:7px 12px}
  .beta-bar a {display:block; margin:2px 0 0}
}

.brand {display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--pine-deep)}
.brand-logo {width:48px; height:48px; border-radius:50%; object-fit:cover; border:2px solid var(--gold-soft); box-shadow:0 2px 8px rgba(14,48,89,.28)}
.brand-mark {flex:0 0 auto}
.brand-text {display:flex; flex-direction:column; font-family:"Fraunces",serif; font-weight:600; font-size:1.12rem; line-height:1.05}
.brand-text small {font-family:"Mulish",sans-serif; font-weight:600; font-size:.7rem; letter-spacing:.06em; color:var(--gold); text-transform:uppercase; margin-top:3px}
.nav {display:flex; align-items:center; gap:26px}
.nav a {text-decoration:none; color:var(--ink); font-weight:600; font-size:1rem; padding:6px 2px; border-bottom:2px solid transparent}
.nav a:hover {color:var(--pine); border-color:var(--gold-soft)}
.nav a[aria-current="page"] {color:var(--pine); border-color:var(--gold)}
.nav-phone {color:var(--pine)!important; border:1px solid var(--line)!important; border-radius:999px; padding:8px 16px!important}
.nav-phone:hover {background:var(--panel)}
.nav-toggle {display:none}
.nav-btn {display:none; cursor:pointer; font-size:1.5rem; line-height:1; color:var(--pine-deep); padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:var(--white)}
.btn {display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-weight:700;
  padding:13px 26px; border-radius:999px; font-size:1rem; transition:transform .12s ease, background .2s ease}
.btn-primary {background:var(--pine); color:var(--white)}
.btn-primary:hover {background:var(--pine-deep); transform:translateY(-1px)}
.btn-ghost {background:transparent; color:var(--pine); border:1.5px solid var(--pine)}
.btn-ghost:hover {background:var(--panel-green)}
.hero {padding:64px 0 40px}
.hero-grid {display:grid; grid-template-columns:1.15fr .85fr; gap:52px; align-items:center}
.hero .lede {font-size:1.2rem; color:var(--ink-soft); max-width:52ch}
.hero-cta {display:flex; flex-wrap:wrap; gap:14px; margin-top:26px}
.hero-art {position:relative; display:flex; justify-content:center}
.hero-art svg {width:100%; max-width:340px; filter:drop-shadow(0 18px 40px rgba(14,48,89,.18))}
.arch {border-radius:180px 180px 16px 16px}
section {padding:56px 0}
.section-tag {font-family:"Fraunces",serif; font-style:italic; color:var(--gold); font-size:1.05rem; margin-bottom:6px}
.welcome {background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.welcome-grid {display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center}
.welcome-photo {background:linear-gradient(160deg,#2a6aa2,#0e3059); aspect-ratio:4/3; display:grid; place-items:center; overflow:hidden}
.welcome-photo .ph-note {color:var(--gold-soft); font-family:"Fraunces",serif; font-style:italic; text-align:center; padding:20px; opacity:.85}
.verse {background:var(--pine-deep); color:#f3efe3; text-align:center}
.verse .container {padding-top:20px; padding-bottom:20px}
.verse blockquote {margin:0 auto; max-width:760px}
.verse p {font-family:"Fraunces",serif; font-size:clamp(1.5rem,3.2vw,2.15rem); line-height:1.3; color:#f6f2e6; max-width:none; margin:0 auto .5em}
.verse cite {color:var(--gold-soft); font-style:normal; font-weight:700; letter-spacing:.04em; font-size:1rem}
.visit-grid {display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:14px}
/* Two cards rather than three, and narrower, so a pair does not sit in a
   three-column grid with a hole where the third would be. */
.si-grid {display:grid; grid-template-columns:repeat(2,1fr); gap:24px;
    margin:14px auto 0; max-width:880px; text-align:left}
.card {background:var(--white); border:1px solid var(--line); border-radius:16px; padding:28px}
.card h3 {color:var(--pine); margin-bottom:.3em}
.card p {margin:0; color:var(--ink-soft); font-size:1rem}
.card .big {font-family:"Fraunces",serif; color:var(--pine-deep); font-size:1.15rem}
.center {text-align:center}
.mt {margin-top:34px}
.site-footer {background:var(--pine-deep); color:#e9e4d5; padding:52px 0 30px; margin-top:20px}
.foot-grid {display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px}
.site-footer h4 {color:var(--white); font-size:1.15rem; margin-bottom:.6em}
.site-footer a {color:#e9e4d5; text-decoration:none}
.site-footer a:hover {color:var(--gold-soft)}
.site-footer p {color:#cfc9b8; font-size:.98rem; max-width:40ch}
.foot-links {list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.socials {display:flex; gap:14px; margin-top:8px}
.socials a {display:inline-grid; place-items:center; width:42px; height:42px; border:1px solid rgba(255,255,255,.22); border-radius:50%}
.socials a:hover {background:rgba(255,255,255,.08); border-color:var(--gold-soft)}
.foot-bottom {border-top:1px solid rgba(255,255,255,.15); margin-top:36px; padding-top:20px; font-size:.85rem; color:#b7b2a1; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px}
:focus-visible {outline:3px solid var(--gold); outline-offset:3px; border-radius:4px}
.narrow {max-width:780px}
.page-head {background:var(--white); border-bottom:1px solid var(--line); padding:56px 0 44px}
.about-grid {display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:center}
.about-photo {background:linear-gradient(160deg,#2a6aa2,#0e3059); aspect-ratio:3/4; display:grid; place-items:center; overflow:hidden}
/* A picture that opens full size (includes/inc_lightbox.php). It is a LINK
   around the image, so the keyboard reaches it and it still works with no
   JavaScript - but a link is inline by default, which would leave a few pixels
   of gap under the picture and stop it filling its grid cell. block + width
   puts it back to behaving exactly as the bare <img> did. */
a.lb-zoom {display:block; width:100%; cursor:zoom-in; border-radius:inherit}
a.lb-zoom img {width:100%; height:auto; display:block; transition:opacity .15s ease}
a.lb-zoom:hover img {opacity:.92}
a.lb-zoom:focus-visible {outline:3px solid var(--pine); outline-offset:3px}
.about-photo .ph-note {color:var(--gold-soft); font-family:"Fraunces",serif; font-style:italic; text-align:center; padding:20px; opacity:.85}
.values {background:var(--panel-green); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.values-grid {display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:20px}
.value {background:var(--white); border:1px solid var(--line); border-radius:16px; padding:28px}
.value svg {color:var(--gold); margin-bottom:10px}
.value h3 {color:var(--pine); font-size:1.2rem}
.value p {margin:0; color:var(--ink-soft); font-size:1rem}
.expect ul {list-style:none; margin:18px 0 0; padding:0; display:grid; gap:14px}
.expect li {display:flex; gap:14px; align-items:flex-start; background:var(--white); border:1px solid var(--line); border-radius:14px; padding:18px 20px}
.expect li b {color:var(--pine-deep); font-family:"Fraunces",serif; font-weight:600}
.check {flex:0 0 auto; color:var(--gold); margin-top:2px}
.cta-band {text-align:center}
.rev-hero {background:linear-gradient(165deg,#124272,#0a2340); color:#f4efe1; padding:70px 0 62px; position:relative; overflow:hidden}
.rev-hero .container {position:relative; z-index:2; max-width:820px}
.rev-hero .section-tag {color:var(--gold-soft)}
.rev-hero h1 {color:#fff}
.rev-hero p {color:#d8d3c2; font-size:1.2rem; max-width:60ch}
.rev-hero .hero-cta {display:flex; flex-wrap:wrap; gap:14px; margin-top:26px}
.rev-hero .btn-ghost {color:#f4efe1; border-color:rgba(244,239,225,.55)}
.rev-hero .btn-ghost:hover {background:rgba(255,255,255,.08)}
.rev-hero .starfield {position:absolute; inset:0; z-index:1; opacity:.5}
.revverse {background:var(--white); text-align:center; border-bottom:1px solid var(--line)}
.revverse blockquote {margin:0 auto; max-width:800px}
.revverse p {font-family:"Fraunces",serif; font-size:clamp(1.4rem,3vw,2rem); line-height:1.34; color:var(--pine-deep); max-width:none; margin:0 auto .5em}
.revverse cite {color:var(--gold); font-style:normal; font-weight:700; letter-spacing:.04em; font-size:1rem}
.intro-grid {display:grid; grid-template-columns:1.1fr .9fr; gap:46px; align-items:start}
.aside {background:var(--panel-green); border:1px solid var(--line); border-radius:18px; padding:28px}
.aside h3 {margin-top:0}
.aside dl {margin:0}
.aside dt {font-weight:700; color:var(--pine-deep); font-family:"Fraunces",serif; margin-top:14px}
.aside dt:first-child {margin-top:0}
.aside dd {margin:2px 0 0; color:var(--ink-soft); font-size:1rem}
.topics {background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.topic-grid {display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:20px}
.topic {display:flex; gap:14px; background:var(--white); border:1px solid var(--line); border-radius:14px; padding:20px 22px}
.topic .dot {flex:0 0 auto; width:12px; height:12px; margin-top:9px; border-radius:50%; background:var(--gold)}
.topic h3 {margin:0 0 3px; font-size:1.12rem}
.topic p {margin:0; color:var(--ink-soft); font-size:.98rem}
.revslides {display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:20px}
.slide {position:relative; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:var(--white); box-shadow:0 10px 24px rgba(14,48,89,.08)}
.slide .frame {aspect-ratio:16/9; display:grid; place-items:center; text-align:center; padding:24px;
  background:radial-gradient(120% 80% at 50% 0%, rgba(216,184,120,.28), transparent 60%), linear-gradient(160deg,#2a6aa2,#0e3059)}
.slide .frame svg {color:var(--gold-soft); opacity:.9}
.slide figcaption {padding:14px 18px; font-family:"Fraunces",serif; color:var(--pine-deep); font-size:1.05rem; border-top:1px solid var(--line)}

/* ---- Slide thumbnail + corner "expand" icon ---- */
.slide-media{position:relative; line-height:0}
.slide-zoom{position:absolute; top:8px; right:8px; width:34px; height:34px; display:grid; place-items:center;
  border-radius:8px; background:rgba(14,48,89,.60); color:#fff; text-decoration:none; transition:background .15s, transform .15s}
.slide-zoom:hover{background:rgba(14,48,89,.88); transform:scale(1.06)}
.slide-zoom svg{width:18px; height:18px; display:block}


.hint {background:var(--panel-green); border:1px solid var(--line); border-radius:14px; padding:16px 20px; font-size:.98rem; color:var(--ink-soft); margin-top:20px}
.hint b {color:var(--pine-deep)}
.hint code {background:#fff; border:1px solid var(--line); border-radius:6px; padding:1px 6px; font-size:.9em}
.gallery {display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.tile {position:relative; overflow:hidden; border:1px solid var(--line); background:var(--white);
  border-radius:150px 150px 14px 14px; box-shadow:0 10px 24px rgba(14,48,89,.08)}
.tile .frame {aspect-ratio:3/4; display:grid; place-items:center; text-align:center; padding:26px;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(216,184,120,.35), transparent 60%),
    linear-gradient(165deg,#2a6aa2,#0e3059)}
.tile .frame svg {color:var(--gold-soft); opacity:.9}
.tile figcaption {position:absolute; left:0; right:0; bottom:0; padding:16px 18px;
  background:linear-gradient(transparent, rgba(15,32,23,.85)); color:#f6f2e6;
  font-family:"Fraunces",serif; font-size:1.05rem}
.contact-grid {display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:start}
.info .row {display:flex; gap:16px; align-items:flex-start; padding:20px 0; border-bottom:1px solid var(--line)}
.info .row:last-child {border-bottom:none}
.info .ic {flex:0 0 auto; width:44px; height:44px; display:grid; place-items:center; background:var(--panel-green); border-radius:12px; color:var(--pine)}
.info h3 {margin:0 0 3px}
.info p {margin:0; color:var(--ink-soft); font-size:1.02rem}
.info a {font-weight:600}
.map {margin-top:26px; border-radius:16px; overflow:hidden; border:1px solid var(--line); box-shadow:0 10px 24px rgba(14,48,89,.08)}
.map iframe {display:block; width:100%; height:300px; border:0}
.formcard {background:var(--white); border:1px solid var(--line); border-radius:20px; padding:34px}
.formcard h2 {margin-top:0}
.field {margin-bottom:18px}
.field label {display:block; font-weight:700; color:var(--pine-deep); margin-bottom:6px; font-size:.98rem}
/* A SELECT IS A FIELD CONTROL LIKE THE OTHER TWO. It belongs in this rule and
   not in a scoped copy of it: styling it only inside .formcard meant every
   form written without that class drew browser-default dropdowns next to
   properly styled text boxes. Scoped rules that want a different size - the
   admin filter bar, the family list - are more specific and still win. */
.field input,.field textarea,.field select {width:100%; padding:13px 15px; font:inherit; font-size:1rem; color:var(--ink); background:var(--paper); border:1.5px solid var(--line); border-radius:12px}
.field input:focus,.field textarea:focus,.field select:focus {outline:none; border-color:var(--pine); background:var(--white)}
.field textarea {min-height:130px; resize:vertical}
.formnote {font-size:.86rem; color:var(--ink-soft); margin:6px 0 0}
.status {margin-top:14px; font-weight:600; color:var(--pine); min-height:1.2em}
.lede {font-size:1.18rem; color:var(--ink-soft); max-width:62ch}
.meta {display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 6px}
.chip {display:inline-flex; align-items:center; background:var(--panel-green); border:1px solid var(--line); color:var(--pine-deep); font-weight:600; font-size:.92rem; padding:7px 15px; border-radius:999px}
.verse-inline {margin:22px 0 0; padding:16px 22px; border-left:4px solid var(--gold); background:var(--panel-green); border-radius:0 12px 12px 0}
.verse-inline p {font-family:"Fraunces",serif; font-size:1.2rem; color:var(--pine-deep); margin:0 0 4px; max-width:none}
.verse-inline cite {color:var(--gold); font-style:normal; font-weight:700; font-size:.95rem}
.keypoints {list-style:none; margin:24px 0 0; padding:0; display:grid; gap:12px}
.keypoints li {display:flex; gap:12px; align-items:flex-start; max-width:64ch}
.keypoints .check {flex:0 0 auto; color:var(--gold); margin-top:2px; font-weight:700}
.video-wrap {position:relative; width:100%; aspect-ratio:16/9; border-radius:16px; overflow:hidden; border:1px solid var(--line); box-shadow:0 12px 28px rgba(14,48,89,.12); background:#08131f}
.video-wrap iframe {position:absolute; inset:0; width:100%; height:100%; border:0}
.video-poster {position:absolute; inset:0; width:100%; height:100%; border:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; color:#fff; font-family:"Fraunces",serif; background:#08131f; overflow:hidden}
.video-poster .video-thumb {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.video-poster::after {content:""; position:absolute; inset:0; z-index:1; background:radial-gradient(120% 90% at 50% 45%, rgba(8,19,31,.10), rgba(8,19,31,.55)); transition:background .2s ease}
.video-poster:hover::after {background:radial-gradient(120% 90% at 50% 45%, rgba(8,19,31,.02), rgba(8,19,31,.42))}
.video-poster .play {position:relative; z-index:2; width:80px; height:80px; border-radius:50%; background:rgba(8,19,31,.45); border:2px solid var(--gold-soft); display:grid; place-items:center; transition:background .2s ease, transform .12s ease}
.video-poster .play svg {margin-left:5px}
.video-poster:hover .play {background:rgba(8,19,31,.62); transform:scale(1.04)}
.video-poster .poster-text {position:relative; z-index:2; font-size:1.25rem; text-shadow:0 2px 14px rgba(0,0,0,.7)}
.slides-grid {display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:20px}
.lesson-nav {display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:8px}
.slide-img {width:100%; aspect-ratio:16/9; object-fit:contain; background:#0e3059; display:block; cursor:zoom-in}
.slide-img:hover {opacity:.94}
.lightbox {position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(8,15,26,.9); cursor:zoom-out}
.lightbox.open {display:flex}
.lightbox img {max-width:96vw; max-height:92vh; width:auto; height:auto; border-radius:8px; box-shadow:0 24px 70px rgba(0,0,0,.55)}
.lightbox .lb-close {position:absolute; top:18px; right:22px; width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.45); background:rgba(255,255,255,.12); color:#fff; font-size:1.7rem; line-height:1; cursor:pointer; display:grid; place-items:center}
.lightbox .lb-close:hover {background:rgba(255,255,255,.24)}
.lightbox.loading::after {content:""; position:absolute; width:48px; height:48px; border-radius:50%; border:4px solid rgba(255,255,255,.25); border-top-color:#fff; animation:lbspin .8s linear infinite}


.backlink {display:inline-flex; align-items:center; gap:7px; font-weight:700; text-decoration:none; color:var(--pine); margin-bottom:16px}
.backlink:hover {color:var(--pine-deep)}
.downloadall {margin-top:20px}
.da-status {font-size:.9rem; color:var(--ink-soft); margin:10px 0 0; min-height:1.1em}
.steps {display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:22px}
.step {background:var(--white); border:1px solid var(--line); border-radius:14px; padding:22px 24px}
.step .n {font-family:"Fraunces",serif; color:var(--gold); font-size:1.7rem; font-weight:600; line-height:1}
.step h3 {font-size:1.1rem; color:var(--pine); margin:8px 0 4px}
.step p {margin:0; color:var(--ink-soft); font-size:.98rem}
.resource-list {display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:8px}
.resource {display:flex; gap:12px; align-items:center; background:var(--white); border:1px solid var(--line); border-radius:11px; padding:10px 14px}
.resource .doc {flex:0 0 auto; width:38px; height:38px; border-radius:9px; background:var(--panel-green); color:var(--pine); display:grid; place-items:center}
.resource-body {flex:1 1 auto; min-width:0}
.resource-body h3 {margin:0; font-size:1rem; line-height:1.25; color:var(--pine-deep)}
.resource .rdownload {flex:0 0 auto}
.btn-sm {padding:8px 14px; font-size:.9rem}
.page-nav {display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:32px}
@keyframes lbspin {to{transform:rotate(360deg)}}
@media (max-width:860px) {
  .nav-btn {display:inline-block}
  .nav {display:none; position:absolute; top:74px; left:0; right:0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line); padding:8px 0}
  .nav a {padding:14px 24px; border-bottom:1px solid var(--line); border-radius:0}
  .nav-phone {margin:12px 24px; text-align:center}
  .nav-toggle:checked ~ .nav {display:flex}
  .hero-grid,.welcome-grid,.foot-grid {grid-template-columns:1fr; gap:34px}
  .hero-art {order:-1}
  .visit-grid,.si-grid {grid-template-columns:1fr}
  .about-grid,.values-grid,.foot-grid {grid-template-columns:1fr; gap:30px}
  .about-photo {aspect-ratio:4/3}
  .intro-grid,.topic-grid,.revslides,.foot-grid {grid-template-columns:1fr; gap:26px}
  .gallery {grid-template-columns:repeat(2,1fr); gap:18px}
  .foot-grid {grid-template-columns:1fr; gap:30px}
  .contact-grid,.foot-grid {grid-template-columns:1fr; gap:32px}
  .slides-grid {grid-template-columns:repeat(2,1fr); gap:16px}
  .steps {grid-template-columns:1fr; gap:14px}
  .resource-list {grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce) {
  * {scroll-behavior:auto; transition:none!important}
}
@media (max-width:520px) {
  .gallery {grid-template-columns:1fr}
}
@media (max-width:560px) {
  .slides-grid {grid-template-columns:1fr}
}

/* ---- Lesson pager (tabbed pages of 6 slides + arrows) ---- */
.lesson-pager{margin-top:20px}
.lesson-page{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.lesson-page[hidden]{display:none}
.pager-controls{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:28px;flex-wrap:wrap}
.pager-tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pager-tab{min-width:40px;padding:8px 12px;border:1px solid var(--line);background:var(--white);color:var(--pine);border-radius:999px;font:inherit;font-weight:600;cursor:pointer}
.pager-tab:hover{background:var(--panel-green)}
.pager-tab.is-active{background:var(--pine);color:#fff;border-color:var(--pine)}
.pager-arrow{width:44px;height:44px;border:1px solid var(--line);background:var(--white);color:var(--pine);border-radius:999px;font-size:1.4rem;line-height:1;cursor:pointer}
.pager-arrow:hover:not(:disabled){background:var(--panel-green)}
.pager-arrow:disabled{opacity:.4;cursor:default}
@media (max-width:860px){.lesson-page{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.lesson-page{grid-template-columns:1fr}}


/* ===== Gallery: two wide, rounded album tiles that fill the content width ===== */
.container .gallery {grid-template-columns:repeat(2,1fr); gap:26px}   /* 2 across, filling the container */
@media (max-width:640px){ .container .gallery {grid-template-columns:1fr} }   /* stack on phones */
.gallery .tile {border-radius:14px}                                   /* rounded rectangle, not an arched window */
.gallery .tile-open {display:block; width:100%; padding:0; border:0; background:none; cursor:pointer; line-height:0; border-radius:inherit}
.gallery .tile-open img {display:block; width:100%; aspect-ratio:4/3; object-fit:cover}   /* wide landscape photo */
.gallery .tile-open .frame {aspect-ratio:4/3}      /* a study with no picture yet, same shape as one with */
.gallery .tile-open:focus-visible {outline:3px solid var(--gold); outline-offset:-3px}

/* ===== Lightbox slider (bigger arrows so they're easy to hit) ===== */
.lightbox .lb-stage {margin:0; display:flex; flex-direction:column; align-items:center; gap:12px; max-width:96vw; max-height:92vh}
.lightbox .lb-stage img {max-width:92vw; max-height:82vh}
.lightbox .lb-caption {color:#f6f2e6; font-family:"Fraunces",serif; font-size:1rem; text-align:center; cursor:auto}
.lightbox .lb-nav {position:absolute; top:50%; transform:translateY(-50%); width:72px; height:72px; border-radius:50%; border:1px solid rgba(255,255,255,.5); background:rgba(255,255,255,.16); color:#fff; font-size:2.6rem; line-height:1; cursor:pointer; display:grid; place-items:center; z-index:2; box-shadow:0 4px 18px rgba(0,0,0,.35)}
.lightbox .lb-nav:hover {background:rgba(255,255,255,.30)}
.lightbox .lb-prev {left:24px}
.lightbox .lb-next {right:24px}
@media (max-width:560px){
  .lightbox .lb-nav {width:60px; height:60px; font-size:2.1rem}
  .lightbox .lb-prev {left:10px}
  .lightbox .lb-next {right:10px}
}



/* ===== Sermons ===== */
/* Listing cards */
.sermon-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:22px; margin-top:8px}
.sermon-card{display:flex; flex-direction:column; gap:10px; padding:24px; background:var(--white); border:1px solid var(--line); border-radius:16px; text-decoration:none; color:inherit; transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease}
.sermon-card:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(14,48,89,.12); border-color:var(--gold-soft)}
.sermon-title{margin:0; font-size:1.3rem; color:var(--pine-deep)}
.sermon-summary{margin:0; color:var(--ink-soft); line-height:1.55}
.sermon-card .sermon-meta{margin-top:auto; display:flex; justify-content:space-between; gap:12px; padding-top:12px; border-top:1px solid var(--line); font-size:.92rem}
.sermon-card .sermon-speaker{font-weight:600; color:var(--pine)}
.sermon-card .sermon-date{color:var(--ink-soft)}

/* A video study's card carries a player.
   THE PICTURE SETS THE SHAPE, not the box around it. .video-poster was built
   to fill a wrapper, with the image absolute inside it - and a box whose only
   in-flow content is a 58px play button has no height of its own. aspect-ratio
   asked for 16:9, but a card is a flex column in a grid row as tall as its
   tallest neighbour, and the poster quietly absorbed the slack: a sermon whose
   title ran to one line got a taller, more cropped picture than the one beside
   it whose title ran to two. Putting the image back in the flow and giving IT
   the ratio makes the box exactly as tall as the picture, whatever the card
   around it is doing. */
.sermon-card .sermon-poster{position:relative; display:block; width:100%; height:auto;
                            aspect-ratio:auto; flex:0 0 auto; padding:0; border:0;
                            overflow:hidden; border-radius:10px; background:#08131f;
                            cursor:pointer; gap:0}
.sermon-card .sermon-poster .video-thumb{position:relative; inset:auto; display:block;
                            width:100%; height:auto; aspect-ratio:16/9; object-fit:cover}
.sermon-card .sermon-poster .play{position:absolute; top:50%; left:50%; margin:0;
                            width:58px; height:58px; transform:translate(-50%, -50%)}
.sermon-card .sermon-poster:hover .play{transform:translate(-50%, -50%) scale(1.04)}
/* THE PLAYER OPENS OVER THE PAGE, not inside the card. Three cards across a
   1280px screen leaves each poster 293x165, and YouTube's own controls at that
   size are too small to aim at. The card stays as it is - six on a screen is
   what makes a library worth looking through - and the player opens here, at
   1120px, which is the page's own width and nearly twice the player on a
   lesson page.

   THE THREE LIMITS ARE A min() AND NOT max-width PLUS max-height. A box with
   aspect-ratio:16/9 and a max-height does not keep its ratio - it loses the
   height and stays as wide as it was. So the height limit is expressed as a
   width instead: 86vh of 16:9 is 153vh across, and 150vh leaves a little room
   for the close button on a short, wide window. */
.video-lightbox{position:fixed; inset:0; z-index:100; display:none; align-items:center;
                justify-content:center; padding:24px; background:rgba(8,15,26,.93)}
.video-lightbox.open{display:flex}
.video-lightbox .vl-stage{width:min(1120px, 94vw, 150vh); aspect-ratio:16/9;
                border-radius:10px; overflow:hidden; background:#08131f;
                box-shadow:0 24px 70px rgba(0,0,0,.55)}
.video-lightbox .vl-stage iframe{display:block; width:100%; height:100%; border:0}
/* The only way out, so it is not subtle and it is not over the picture. */
.video-lightbox .vl-close{position:absolute; top:18px; right:22px; width:46px; height:46px;
                border-radius:50%; border:1px solid rgba(255,255,255,.45);
                background:rgba(255,255,255,.12); color:#fff; font-size:1.7rem; line-height:1;
                cursor:pointer; display:grid; place-items:center}
.video-lightbox .vl-close:hover{background:rgba(255,255,255,.24)}
.video-lightbox .vl-close:focus-visible{outline:3px solid var(--gold-soft); outline-offset:3px}
/* a card whose video id has not been filled in yet, but which has a picture */
.sermon-still{display:block; width:100%; aspect-ratio:16/9; border-radius:10px; overflow:hidden; background:#08131f}
.sermon-still img{width:100%; height:100%; object-fit:cover; display:block}
/* across the top of a study's own page - not the tile beside the other studies */
.study-banner{display:block; width:100%; height:auto; border-radius:16px; margin:0 0 6px}

/* Detail: speaker byline */
.sermon-byline{display:flex; align-items:center; gap:16px; margin-top:18px}
.sermon-byline .speaker-photo{width:64px; height:64px; border-radius:50%; object-fit:cover; border:2px solid var(--gold-soft); background:var(--panel-green)}
.sermon-byline .speaker-name{display:block; font-family:"Fraunces",serif; font-size:1.15rem; color:var(--pine-deep)}
.sermon-byline .sermon-date{display:block; color:var(--ink-soft); font-size:.95rem}

/* Detail: key points */
.sermon-points{margin:14px 0 0; padding-left:1.2em; display:flex; flex-direction:column; gap:12px}
.sermon-points li{line-height:1.6}
.sermon-points strong{color:var(--pine-deep)}

@media (max-width:760px){.sermon-grid{grid-template-columns:1fr}}


/* ---- Lesson prev/next arrows flanking the video ---- */
.video-row{
  display:flex;
  align-items:center;
  justify-content:center;
  /* Close to the video on purpose. At 22px the arrows read as two separate
     panels either side of the player rather than its controls; at about 9 they
     belong to it. Still a clamp, so a narrow window does not glue them on. */
  gap:clamp(4px, 0.7vw, 10px);
}
.video-row .video-wrap{ flex:1 1 auto; min-width:0; }

.lesson-arrow{
  flex:0 0 auto;
  width:clamp(34px, 3.6vw, 52px);
  height:clamp(140px, 26vw, 300px);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px solid rgba(27,58,107,.18);
  background:rgba(27,58,107,.05);
  color:var(--navy, #1b3a6b);
  font-size:clamp(22px, 2.4vw, 30px);
  line-height:1;
  text-decoration:none;
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.lesson-arrow:hover,
.lesson-arrow:focus-visible{
  background:var(--navy, #1b3a6b);
  border-color:var(--navy, #1b3a6b);
  color:#fff;
  transform:translateY(-1px);
}
.lesson-arrow:focus-visible{ outline:2px solid var(--gold, #b08d3f); outline-offset:2px; }

/* Keeps the player centered when there is no prior/next lesson */
.lesson-arrow.is-disabled{
  visibility:hidden;
  pointer-events:none;
}

/* Stack below the video on narrow screens (no gutter to sit in) */
@media (max-width:760px){
  .video-row{ flex-wrap:wrap; gap:10px; }
  .video-row .video-wrap{ order:-1; flex:0 0 100%; }
  .lesson-arrow{
    width:auto;
    height:46px;
    flex:1 1 0;
    font-size:20px;
  }
  .lesson-arrow.is-disabled{ visibility:hidden; }
}