/* ============================================================
   Sky Rivers — Shared Stylesheet
   Used by: index.html, stories.html, the-remembering.html
   ============================================================ */

/* ---------- DESIGN TOKENS ---------- */
:root{
  --bg:#D9ECD2;
  --bg-panel:#D9ECD2;
  --line:rgba(244,236,227,0.14);
  --gold:#C89A56;
  --gold-soft:#e3c286;
  --copper:#C1614A;
  /*--cream:#F4ECE0;*/
  --cream:#fff9f0;
  --muted:#b7a8b4;
  --ink:#17111c;
  --serif:'Fraunces', serif;
  --sans:'Inter', sans-serif;
  --green: #728372;
  --green-soft: #abbfab;
  --white: #fffefa;
}

/* ---------- RESET / BASE ---------- */
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--cream);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
img,svg{
  display:block; 
  /* max-width:100%; */
}
.wrap{max-width:1120px; margin:0 auto; padding:0 32px; position:relative; z-index:1;}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}

/* ---------- NAV (shared) ---------- */
header{position:relative; z-index:10; padding:16px 0;}
nav.wrap{display:flex; align-items:center; justify-content:space-between; gap:20px;}
.wordmark{
  font-family:var(--serif); font-weight:500; font-size:1rem;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-soft);
}
.navlinks{display:flex; gap:36px; font-size:0.85rem; letter-spacing:0.04em;}
.navlinks a{color:var(--green); transition:color .2s;}
.navlinks a:hover, .navlinks a.current{color:var(--gold);}
.navcta{
  border:1px solid var(--green-soft); color:var(--green);
  padding:9px 18px; font-size:0.8rem; letter-spacing:0.06em;
}
.navcta:hover{border:1px solid var(--green);}

.nav-toggle{
  display:none; flex-direction:column; justify-content:space-between;
  width:26px; height:18px; background:none; border:none; cursor:pointer; padding:0;
}
.nav-toggle span{display:block; width:100%; height:2px; background:var(--green);}
.theme-dark .nav-toggle span{background:var(--cream);}

@media (max-width:820px){
  .nav-toggle{display:flex;}
  .navcta{display:none;}
  .navlinks{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; background:var(--bg);
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    padding:32px;
  }
  .navlinks.open{display:flex;}
  .navlinks a{padding:14px 0; border-bottom:1px solid var(--line);}
  .navlinks a:last-child{border-bottom:none;}
}

/* ---------- BUTTONS (shared) ---------- */
.btn{
  display:inline-block; padding:15px 30px;
  font-family:var(--sans); font-size:0.85rem; letter-spacing:0.06em;
  border:1px solid transparent; cursor:pointer;
}
.btn-primary{background:var(--gold); color:var(--ink);}
.btn-primary:hover{background:var(--gold-soft);}
.btn-ghost{border-color:var(--green-soft); color:var(--green);}
.btn-ghost:hover{border-color:var(--green);}
.theme-dark .btn-ghost{border-color:var(--line); color:var(--cream);}
.theme-dark .btn-ghost:hover{border-color:var(--gold);}

/* ---------- SECTION / TYPE RHYTHM (shared) ---------- */
section{padding:96px 0; position:relative;}

/* ---------- REUSABLE SECTION BACKGROUND IMAGE + LIGHT/DARK THEME ----------
   To give ANY section a background image (like the hero already has):

   <section class="theme-dark">              <!-- or class="theme-light" -->
     <div class="bg-image" aria-hidden="true"
          style="background-image:url('/assets/images/your-photo.jpg')"></div>
     <div class="wrap">
       ...your normal content...
     </div>
   </section>

   .theme-dark = light text, for a dark or dark-toned photo (this matches the
   site's default look, so it's mostly for clarity, but include it explicitly
   so it's obvious at a glance which mode a section is in).

   .theme-light = dark text, for a light or light-toned photo. Almost every
   text rule in this file already reads its color from --cream (default text)
   and --muted (secondary text), so this class works by locally redefining
   what those two variables MEAN inside that section, nothing else needs to
   change per-component. */

.bg-image{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  background-color:var(--bg-panel);
}
.bg-image::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(21,15,26,0.55), rgba(21,15,26,0.82));
}

.theme-dark .bg-image{background-image: url(/assets/images/hero-nature.jpg);}

.theme-dark{
  --cream:#F4ECE0;
  --muted:#b7a8b4;
  --line:rgba(244,236,227,0.14);
}

.theme-light{
  --cream:#17150F;
  --muted:#5C6B52;
  --line:rgba(23,21,15,0.15);
}
.theme-light .bg-image::after{
  background:linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.82));
}

mark {
  background-color: #fff9f0;
}

.max-width .wrap {max-width: 760px;}

.section-alt{
  background:
    url('/assets/images/bg-mint.png') center/cover no-repeat,
    var(--bg-panel);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.label{
  font-size:0.75rem; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--copper); margin-bottom:18px; display:block;
}
h2{
  font-family:var(--serif); font-weight:300; font-size:clamp(1.7rem,3.4vw,2.5rem);
  line-height:1.25; max-width:680px;
}
h2 em{font-style:italic; color:var(--gold); font-weight:300;}
.theme-dark h2 em {color:var(--gold-soft);}
.lede{max-width:640px; color:var(--ink); font-size:1.02rem; margin-top:22px; line-height:1.8;}
.theme-dark .lede {color:var(--muted);}

/* Page-level heading used by index.html (big hero) and the-remembering.html (program hero) */
h1.hero-title{
  position:relative; z-index:2;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.4rem, 5.6vw, 4.6rem);
  line-height:1.08;
  max-width:820px; margin:0 auto;
}
h1.hero-title em{font-style:italic; color:var(--gold-soft); font-weight:300;}

/* Lighter internal page header used by stories.html */
h1.page-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.1rem, 4.6vw, 3.4rem);
  line-height:1.15; max-width:760px; margin:0 auto;
}
h1.page-title em{font-style:italic; color:var(--gold-soft); font-weight:300;}

/* ---------- HERO (index.html + the-remembering.html) ---------- */
.hero{position:relative; padding:120px 0 130px; overflow:hidden; text-align:center;}

/* Placeholder for a real photo. Replace the url() below with your image path,
   e.g. url('images/hero-photo.jpg'). The gradient keeps hero text readable
   over the photo — keep it, or adjust the opacity values to taste. */
.hero-image{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(21,15,26,0.55), rgba(21,15,26,0.82)),
    url('/assets/images/hero-nature.jpg') center/cover no-repeat,
    var(--bg-panel);
}
.hero-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(21,15,26,0.55), rgba(21,15,26,0.82)),
    url('/assets/images/hero-nature.jpg') center/cover no-repeat,
    var(--bg-panel);
}

.portal{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-52%);
  width:800px; height:800px;
  pointer-events:none; z-index:1;
}
.portal svg{width:100%; height:100%;}
@media (prefers-reduced-motion:no-preference){
  .portal{animation:spin 150s linear infinite;}
}
@keyframes spin{to{transform:translate(-50%,-52%) rotate(360deg);}}

.eyebrow, .logo {
  position:relative; z-index:2;
  font-size:0.78rem; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--gold-soft); margin-bottom:26px;
}
.logo {margin-bottom:0;opacity:0.8;}
.logo:hover {opacity:1;}
.hero-sub{
  position:relative; z-index:2;
  max-width:680px; margin:26px auto 0;
  color:var(--muted); font-size:1.05rem; line-height:1.75;
  padding: 0 30px;
}
.hero-cta{
  position:relative; z-index:2;
  margin-top:42px; display:flex; justify-content:center; gap:16px; flex-wrap:wrap; align-items:center;
}
.hero-price{position:relative; z-index:2; margin-top:18px; font-size:0.85rem; color:var(--muted);}
.hero-price strong{color:var(--gold-soft); font-weight:500;}

/* ---------- PAGE HERO (stories.html — simpler, no portal) ---------- */
.page-hero{padding:90px 0 70px; text-align:center;}
.page-hero p{max-width:560px; margin:22px auto 0; color:var(--muted); font-size:1.02rem; line-height:1.75;}

/* ---------- INVITATION / CENTERED BLOCKS (index.html) ---------- */
.invitation{text-align:center;}
.invitation .wrap{max-width:760px;}
.invitation h2{margin:0 auto;}
.invitation .lede{margin-left:auto; margin-right:auto;}
.invitation .btn{margin-top:34px;}

/* ---------- VIDEO ---------- */
video {
  width:100%; display:block; margin:30px auto 0 auto; border:1px solid var(--line);
}


/* ---------- CENTERED BLOCKS (the-remembering.html) ---------- */
.centered .wrap{max-width:740px; text-align:center;}
.centered h2{margin:0 auto;}
.centered .lede{margin-left:auto; margin-right:auto;}

/* ---------- SPLIT SECTION (index.html) ---------- */
.split-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
@media (max-width:820px){.split-grid{grid-template-columns:1fr; gap:36px;}}
.split-visual{
  aspect-ratio:1/1; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.split-visual svg{width:62%;}

/* ---------- OFFERINGS (index.html) ---------- */
.offer-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:56px;text-align: center;}
@media (max-width:900px){.offer-grid{grid-template-columns:1fr;}}
.offer-card{
  border:1px solid var(--line); padding:38px 30px;
  display:flex; flex-direction:column; gap:16px;
  background:linear-gradient(180deg, rgba(244,236,227,0.02), transparent);
}
.offer-card .icon{font-size:1.6rem;}
.offer-card img{margin:auto;}
.offer-card h3{font-family:var(--serif); font-weight:500; font-size:1.3rem;}
.offer-card .price{color:var(--gold-soft); font-size:0.95rem; letter-spacing:0.02em;}
.offer-card p{color:var(--muted); font-size:0.94rem; line-height:1.7; flex-grow:1;}
.offer-card .btn{align-self:flex-start; margin:6px auto 0 auto;}
.offer-card .learn-more{
  font-size:0.82rem; color:var(--muted); align-self:flex-start;
  border-bottom:1px solid transparent; margin: auto;
}
.offer-card .learn-more:hover{color:var(--gold-soft);border-bottom-color:var(--gold-soft);}
.offer-card.featured{border-color:var(--gold); background:linear-gradient(180deg, rgba(200,154,86,0.08), transparent);}

/* ---------- ABOUT (index.html) ---------- */
.about-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:center;}
@media (max-width:820px){.about-grid{grid-template-columns:1fr;}}
.about-photo{aspect-ratio:4/5; overflow: hidden;box-shadow: 0 0 0 12px rgb(255 254 250 / 0.8)}
.about-photo img{height:100%; width:auto; max-width:auto; margin-left:-50px;}

/* ---------- TESTIMONIAL SLIDER (index.html) ---------- */
.testimonials .wrap{max-width:760px;}
.test-slider{position:relative; margin-top:56px; min-height:340px;}
.test-slide{display:none; text-align:center; opacity:0; animation:tfade .6s ease forwards;}
.test-slide.active{display:block;}
@media (prefers-reduced-motion:reduce){.test-slide{animation:none; opacity:1;}}
@keyframes tfade{from{opacity:0;} to{opacity:1;}}
.test-avatar{
  width:64px; height:64px; border-radius:50%; margin:0 auto 22px;
  background:linear-gradient(160deg, rgba(200,154,86,0.35), rgba(193,97,74,0.25));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:1rem; color:var(--gold-soft);
  background-size:cover; background-position:center; overflow:hidden;
}
.test-avatar img{width:100%; height:100%; object-fit:cover; display:block;}
.test-theme{font-size:0.75rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--copper); margin-bottom:18px;}
.test-quote{font-family:var(--serif); font-size:1.2rem; font-weight:200; line-height:1.55; color:var(--cream); max-width:640px; margin:0 auto;}
.test-author{margin-top:20px; font-size:0.85rem; letter-spacing:0.04em; color:var(--muted);}
.test-dots{display:flex; justify-content:center; gap:10px; margin-top:36px;}
.test-dot{
  width:8px; height:8px; border-radius:50%; border:1px solid var(--gold-soft);
  background:transparent; cursor:pointer; padding:0;
}
.test-dot.active{background:var(--gold-soft);}

/* ---------- SECTION HEAD / QUOTE GRID (stories.html) ---------- */
.section-head{max-width:640px; margin-bottom:52px;}
.section-sub{color:var(--muted); font-size:0.95rem; margin-top:14px; line-height:1.7;}

.quote-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:900px){.quote-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.quote-grid{grid-template-columns:1fr;}}
.quote-card{background:var(--cream); padding:28px 26px; display:flex; flex-direction:column; gap:16px;}
.avatar-row{display:flex; align-items:center; gap:12px;}
.avatar{
  width:42px; height:42px; border-radius:50%; overflow:hidden; flex-shrink:0;
  background:linear-gradient(160deg, rgba(200,154,86,0.35), rgba(193,97,74,0.25));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:0.75rem; color:var(--gold-soft);
}
.avatar img{width:100%; height:100%; object-fit:cover;}
.quote-name{font-size:0.88rem; color:var(--copper); letter-spacing:0.02em;}
.quote-card p.q{color:var(--ink); font-size:0.92rem; line-height:1.7; font-style:italic;}

/* ---------- DEEPER STORY BLOCKS (stories.html) ---------- */
.deep-grid{display:grid; grid-template-columns:1fr 1fr; gap:32px;}
@media (max-width:820px){.deep-grid{grid-template-columns:1fr;}}
.deep-card{border-left:2px solid var(--gold); padding:8px 0 8px 28px;}
.deep-theme{font-size:0.75rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--copper); margin-bottom:14px;}
.deep-quote{font-family:var(--serif); font-style:italic; font-size:1.08rem; line-height:1.75; color:var(--cream);}
.deep-author{margin-top:16px; font-size:0.85rem; color:var(--muted);}

.program-note{
  display:inline-block; font-size:0.78rem; color:var(--gold-soft);
  border:1px solid var(--line); padding:8px 16px; margin-bottom:36px;
}

.cta-band{text-align:center;}
.cta-band .wrap{max-width:600px;}
.cta-buttons{display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin-top:32px;}

/* ---------- PROGRAM PHASES (the-remembering.html) ---------- */
.phase-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
@media (max-width:900px){.phase-grid{grid-template-columns:1fr;}}

/* ---------- PHASE SLIDER (the-remembering.html — 12 phase-cards, 3 at a time on desktop, 1 at a time on mobile) ---------- */
.phase-slider{position:relative; margin-top:52px;}
.phase-card.is-hidden{display:none;}
.phase-dots{display:flex; justify-content:center; gap:10px; margin-top:36px; flex-wrap:wrap;}
.phase-dot{
  width:8px; height:8px; border-radius:50%; border:1px solid var(--gold-soft);
  background:transparent; cursor:pointer; padding:0;
}
.phase-dot.active{background:var(--gold-soft);}
.phase-card{background: var(--cream); padding:32px 28px;}
.theme-dark .phase-card{border:1px solid var(--line);}
.phase-weeks{font-size:0.75rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--copper)!important; margin-bottom:14px;}
.theme-dark .phase-weeks{color:var(--gold-soft)!important;}
.phase-card h3{font-family:var(--serif); color:var(--ink); font-weight:500; font-size:1.25rem; margin-bottom:12px;}
.theme-dark .phase-card h3{color:var(--cream);}
.phase-card p{color:var(--ink); font-size:0.92rem; line-height:1.7;}
.theme-dark .phase-card p{color:var(--muted);}
.phase-card .icon img{margin: auto;}

/* ---------- WHAT'S INCLUDED (the-remembering.html) ---------- */
.includes-list{margin-top:44px; display:grid; gap:18px; max-width:640px;}
.includes-item{display:flex; gap:16px; align-items:flex-start; padding-bottom:18px; border-bottom:1px solid var(--line);}
.includes-item:last-child{border-bottom:none;}
.includes-mark{color:var(--gold-soft); font-family:var(--serif); font-style:italic; font-size:1.1rem; flex-shrink:0;}
.includes-item p{color:var(--muted); font-size:0.96rem; line-height:1.7;}
.includes-item strong{color:var(--cream); font-weight:500;}

/* ---------- FIT SECTION (the-remembering.html) ---------- */
.fit-grid{display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:48px;}
@media (max-width:820px){.fit-grid{grid-template-columns:1fr;}}
.fit-card {background: var(--cream);padding: 32px 28px;}
.fit-card h3{font-family:var(--serif); font-weight:500; font-size:1.25rem; margin-bottom:12px; color:var(--ink);}
.fit-card ul{list-style:none; display:grid; gap:12px;}
.fit-card li{color:var(--ink); font-size:0.94rem; line-height:1.6; padding-left:20px; position:relative;}
.fit-card li::before{content:'✤'; position:absolute; left:0; color:var(--copper);}

/* ---------- BENEFITS (the-remembering.html) ---------- */
.benefit-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:52px;}
@media (max-width:900px){.benefit-grid{grid-template-columns:1fr;}}
.benefit-card{border:1px solid var(--line); padding:32px 30px;}
.benefit-card h3{font-family:var(--serif); font-weight:500; font-size:1.2rem; margin-bottom:14px; color:var(--gold-soft);}
.benefit-card p{color:var(--muted); font-size:0.94rem; line-height:1.75;}

/* ---------- PROGRAM TESTIMONIALS — renamed from .test-* to avoid
   colliding with the homepage testimonial slider above ---------- */
.rw-grid{display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:52px;}
@media (max-width:820px){.rw-grid{grid-template-columns:1fr;}}
.rw-card{border-left:2px solid var(--gold); padding:6px 0 6px 26px;}
.rw-quote{font-family:var(--serif); font-style:italic; font-size:1.08rem; line-height:1.75; color:var(--cream);}
.rw-author{margin-top:16px; font-size:0.85rem; color:var(--muted);}
.rw-context{margin-top:4px; font-size:0.78rem; color:var(--muted); opacity:0.75;}

/* ---------- PRICING (the-remembering.html) ---------- */
.price-band{text-align:center;}
.price-band h2{margin-left:auto; margin-right:auto;}
.price-box{
  max-width:520px; margin:48px auto 0; border:1px solid var(--gold); padding:44px 36px;
  background:linear-gradient(180deg, rgba(200,154,86,0.08), transparent);
}
.price-box .amount{font-family:var(--serif); font-size:2.6rem; color:var(--gold-soft); font-weight:400;}
.price-box .amount span{font-size:1.1rem; color:var(--muted);}
.price-box .welcome{margin-top:14px; font-size:0.85rem; color:var(--muted); line-height:1.7;}
.price-box .welcome strong{color:var(--cream);}
.price-box .btn{margin-top:26px;}
.footnote-outside{max-width:520px; margin:20px auto 0; text-align:center; font-size:0.82rem; color:var(--muted);}
.footnote-outside a{color:var(--gold-soft); text-decoration:underline; text-underline-offset:3px;}
.footnote-outside a:hover{color:var(--cream);}

/* ---------- BLOG (blog/index.html, blog posts) ---------- */
.blog-list{display:grid; gap:0; margin-top:52px; max-width:820px;}
.blog-card{
  padding:32px 0; border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:140px 1fr; gap:28px; align-items:baseline;
}
.blog-card:first-child{padding-top:0;}
.blog-date{font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted);}
.blog-card h3{font-family:var(--serif); font-weight:500; font-size:1.3rem; margin-bottom:10px;}
.blog-card h3 a{color:var(--cream); transition:color .2s;}
.blog-card h3 a:hover{color:var(--gold-soft);}
.blog-card p{color:var(--muted); font-size:0.95rem; line-height:1.7;}
.blog-card .read-more{display:inline-block; margin-top:10px; font-size:0.85rem; color:var(--gold-soft);}
.blog-card .read-more:hover{color:var(--cream);}
@media (max-width:620px){
  .blog-card{grid-template-columns:1fr; gap:8px;}
}

.post-body{max-width:700px; margin:56px auto 0;}
.post-body p{color:var(--cream); font-size:1.05rem; line-height:1.9; margin-bottom:26px;}
.post-body p.lede-open{font-family:var(--serif); font-style:italic; font-size:1.25rem; color:var(--gold-soft); line-height:1.7;}
.post-body h2{margin:48px 0 18px; max-width:none;}
.post-meta{max-width:700px; margin:0 auto 8px; color:var(--muted); font-size:0.85rem; letter-spacing:0.04em; text-align:center;}
.post-back{display:inline-block; margin-top:44px; font-size:0.85rem; color:var(--gold-soft);}
.post-back:hover{color:var(--cream);}
.post-cta{max-width:700px; margin:56px auto 0; padding:32px; border:1px solid var(--gold); text-align:center;}
.post-cta p{margin-bottom:18px;}

/* ---------- EVENTS MODAL (shared) ----------
   Used by: index.html ("Join Events" button), group-session.html
   ("Select a Date" / "Book Now" buttons). Loads online-events.html
   in an iframe inside a lightbox. Trigger with class="js-open-events"
   on any <a> or <button>. Markup + script to include on those pages
   is in /snippets/events-modal.html. ---------- */
.events-modal{position:fixed; inset:0; z-index:100; display:none;}
.events-modal.open{display:block;}
.events-modal-backdrop{position:absolute; inset:0; background:rgba(21,15,26,0.75); backdrop-filter:blur(2px);}
.events-modal-panel{
  position:relative; z-index:1; max-width:880px; width:92%; height:min(720px,86vh);
  margin:5vh auto 0; background:var(--bg); border:1px solid var(--line);
  display:flex; flex-direction:column; box-shadow:0 30px 80px rgba(0,0,0,0.45);
}
.events-modal-close{
  position:absolute; top:8px; right:12px; z-index:2;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  background:var(--bg); border:1px solid var(--line); color:var(--ink); font-size:1.4rem;
  cursor:pointer; line-height:1;
}
.events-modal-close:hover{color:var(--copper); border-color:var(--copper);}
.events-modal-panel iframe{flex:1; width:100%; height:100%; border:0;}
body.modal-open{overflow:hidden;}
@media (max-width:620px){
  .events-modal-panel{width:100%; height:100%; margin:0; max-width:none;}
}

/* ---------- EVENT LIST (online-events.html) ---------- */
.events-page{max-width:760px; margin:0 auto; padding:36px 24px 60px;}
.events-page-head{margin-bottom:36px;}
.events-page-head .label{margin-bottom:10px;}
.events-page-head h1{
  font-family:var(--serif); font-weight:400; color:var(--ink);
  font-size:clamp(1.5rem,3.4vw,2rem); line-height:1.25;
}
.events-page-head p{color:var(--ink); opacity:0.72; font-size:0.95rem; margin-top:10px;}
.event-list{display:grid; gap:0;}
.event-card{
  display:grid; grid-template-columns:100px 1fr auto; gap:20px; align-items:center;
  padding:22px 0; border-bottom:1px solid rgba(23,17,20,0.12);
}
.event-card:first-child{padding-top:0;}
.event-image{
  width:100px; height:100px; overflow:hidden; flex-shrink:0;
  background:linear-gradient(160deg, rgba(200,154,86,0.35), rgba(193,97,74,0.25));
}
.event-image img{width:100%; height:100%; object-fit:cover; display:block;}
.event-info h3{
  font-family:var(--serif); font-weight:500; color:var(--ink);
  font-size:1.1rem; margin-bottom:6px; line-height:1.3;
}
.event-meta{color:var(--ink); opacity:0.65; font-size:0.85rem; letter-spacing:0.01em;}
.event-meta .dot{margin:0 8px; opacity:0.6;}
.event-cta{white-space:nowrap;}
.event-cta .btn{padding:11px 20px; font-size:0.78rem;}
.events-empty{color:var(--ink); opacity:0.65; font-size:0.95rem; padding:40px 0; text-align:center;}
@media (max-width:560px){
  .event-card{grid-template-columns:64px 1fr; grid-template-rows:auto auto;}
  .event-image{width:64px; height:64px;}
  .event-cta{grid-column:1/-1; margin-top:14px;}
  .event-cta .btn{width:100%; text-align:center;}
}

/* ---------- LIGHTBOX (reusable — events list, opened from homepage + group-session.html) ---------- */
.lightbox-overlay{
  display:none; position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,0.65);
  align-items:center; justify-content:center; padding:24px;
}
.lightbox-overlay.active{display:flex;}
.lightbox-box{
  background:var(--bg); width:100%; max-width:900px; height:85vh; max-height:800px;
  position:relative; border:1px solid var(--line); box-shadow:0 24px 64px rgba(0,0,0,0.35);
}
.lightbox-box{max-width:700px;}
.lightbox-box iframe{width:100%; height:100%; border:none; display:block;}
.lightbox-close{
  position:absolute; top:-42px; right:0; background:none; border:none;
  color:#fff; font-size:1.8rem; line-height:1; cursor:pointer; padding:4px 10px;
}
.lightbox-close:hover{color:var(--gold-soft);}

/* ---------- FORM (contact.html) ---------- */

form {margin-top:40px;}
.form-field{margin-bottom:22px; text-align:left;}
.form-field label{
  display:block; font-size:0.8rem; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--green); margin-bottom:8px;
}
.form-field input,
.form-field textarea,
.form-field select{
  width:100%; padding:13px 16px; font-family:var(--sans); font-size:0.95rem;
  color:var(--ink); background:var(--cream); border:1px solid var(--cream);
}
.theme-dark .form-field input,
.theme-dark .form-field textarea,
.theme-dark .form-field select{color:var(--cream); background:transparent;}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus{outline:2px solid var(--gold); outline-offset:2px; border-color:var(--gold);}
.form-field textarea{resize:vertical; min-height:140px;}
.form-status{margin-top:18px; font-size:0.9rem;}
.form-status.success{color:var(--ink);padding:20px;border: 1px solid var(--green-soft);}
.form-status.error{color:var(--copper);}
.form-honeypot{position:absolute; left:-9999px; top:-9999px;}

.form-radio-group{display:flex; gap:24px;}
.form-radio-group label{
  display:flex; align-items:center; gap:8px; font-size:0.95rem;
  color:var(--ink); text-transform:none; letter-spacing:0; margin:0; cursor:pointer;
}
.form-radio-group input[type="radio"]{width:auto; accent-color:var(--gold); cursor:pointer;}

/* ---------- FOOTER (shared) ---------- */
footer{border-top:1px solid var(--line); padding:48px 0; text-align:center; background-color: #e2f3db;}
footer .foot-links{display:flex; justify-content:center; gap:24px; font-size:0.8rem; color:var(--green); margin-bottom:16px; flex-wrap:wrap;}
footer small{color:var(--green); font-size:0.75rem; letter-spacing:0.03em;}