/* ============================================================
   TOSS Calgary — Design tokens
   Palette pulled from the TOSS ring mark: signal red, deep navy,
   sky/ocean blue, marigold orange, leaf green.
   Type: Poppins (display, warm + geometric, big & legible for a
   senior-facing audience) / Source Sans 3 (body, high-legibility).
   ============================================================ */
:root{
  --navy-900:#0c2140;
  --navy-800:#0f2a52;
  --navy-700:#163863;
  --navy-600:#204c82;
  --red-700:#b8151a;
  --red-600:#e31e24;
  --red-500:#f0383d;
  --blue-600:#1c9ce0;
  --blue-800:#123e7c;
  --orange-500:#f7941d;
  --green-600:#3aae33;
  --paper:#ffffff;
  --bg:#f6f8fb;
  --bg-warm:#fbfaf7;
  --ink:#16233b;
  --ink-soft:#4a5670;
  --line:#e3e7ef;
  --ring-shadow:0 18px 40px -18px rgba(15,42,82,.35);
  --radius-lg:22px;
  --radius-md:14px;
  --radius-sm:9px;
  --font-display:'Poppins',system-ui,sans-serif;
  --font-body:'Source Sans 3','Source Sans Pro',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{font-size:112.5%; scroll-behavior:smooth; overflow-x:clip; overscroll-behavior-x:contain;} /* ~18px base — legible for all ages */
/* overscroll-behavior-x:contain — the sideways page gesture in
   assets/js/nav-swipe.js is ours; without this Chromium reads the same
   flick as its own back-swipe and both fire at once. */
/* overflow-x:clip (not hidden) — clips the off-canvas mobile nav and any
   full-bleed sections without turning html/body into a scroll container,
   which is what was silently breaking position:sticky on the header. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  overscroll-behavior-x:contain;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--navy-800);
  line-height:1.18;
  margin:0 0 .5em;
  font-weight:700;
}
h1{font-size:clamp(2.1rem,4.4vw,3.4rem); letter-spacing:-.01em;}
h2{font-size:clamp(1.6rem,3vw,2.3rem);}
h3{font-size:1.3rem;}
p{margin:0 0 1em;}
a{color:var(--red-600); text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%; display:block;}
ul{padding-left:1.2em;}
:focus-visible{outline:3px solid var(--orange-500); outline-offset:3px; border-radius:4px;}
.container{max-width:1180px; margin:0 auto; padding:0 24px;}
.eyebrow{
  display:inline-flex;
  font-family:var(--font-display); font-weight:600; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--red-600);
  margin-bottom:14px;
}
.section{padding:72px 0;}
.section[id]{scroll-margin-top:90px;}
.section-tight{padding:48px 0;}
.section-alt{background:var(--paper);}
.center{text-align:center;}
.lede{font-size:1.14rem; color:var(--ink-soft); max-width:62ch;}
.center .lede{margin-left:auto; margin-right:auto;}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-display); font-weight:600; font-size:1rem;
  padding:13px 26px; border-radius:999px; border:2px solid transparent;
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  text-decoration:none; line-height:1;
}
.btn:hover{ text-decoration:none; transform:translateY(-2px);}
.btn-primary{background:var(--red-600); color:#fff; box-shadow:0 12px 24px -10px rgba(227,30,36,.55);}
.btn-primary:hover{background:var(--red-700); color:#fff;}
.btn-outline{background:transparent; border-color:rgba(255,255,255,.7); color:#fff;}
.btn-outline:hover{background:rgba(255,255,255,.12); color:#fff;}
.btn-navy{background:var(--navy-800); color:#fff;}
.btn-navy:hover{background:var(--navy-900); color:#fff;}
.btn-ghost{background:transparent; border-color:var(--navy-800); color:var(--navy-800);}
.btn-ghost:hover{background:var(--navy-800); color:#fff;}
.btn-sm{padding:9px 18px; font-size:.9rem;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.5; cursor:not-allowed; transform:none;}

/* ============ Header ============ */
.site-header{
  position:sticky; top:0; z-index:60; min-height:73px;
  background:rgba(12,33,64,.96);
  border-bottom:3px solid var(--red-600);
}
/* The blur lives on a pseudo-element rather than directly on .site-header
   because backdrop-filter on an element makes it a containing block for its
   position:fixed descendants (.main-nav, .nav-backdrop). That was trapping
   the mobile menu inside the header's box instead of the viewport, so once
   you scrolled down the "fixed" menu opened up off-screen above the fold. */
.site-header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 24px; max-width:1180px; margin:0 auto;}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; min-width:0;}
.brand img{width:52px; height:52px; border-radius:50%; background:#fff; flex:none;}
.brand-text{display:flex; flex-direction:column; line-height:1.15; min-width:0;}
.brand-text strong{font-family:var(--font-display); color:#fff; font-size:1.05rem; letter-spacing:.01em; white-space:nowrap;}
.brand-text span{color:#b9c6de; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.main-nav{display:flex; align-items:center; gap:4px;}
.main-nav a{
  color:#e7ecf6; font-family:var(--font-display); font-weight:500; font-size:.97rem;
  padding:10px 14px; border-radius:8px; text-decoration:none; transition:background .15s, color .15s;
}
.main-nav a:hover{background:rgba(255,255,255,.1); color:#fff;}
.main-nav a.active{color:#fff; background:var(--red-600);}
.nav-brand{display:none;}   /* only heads the drawer — see the 900px block */
.nav-toggle{
  display:none; background:none; border:0; color:#fff; padding:10px; margin:-10px;
  cursor:pointer; border-radius:8px; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; flex:none; z-index:80; position:relative;
  transition:background .15s ease;
}
.nav-toggle:hover{background:rgba(255,255,255,.1);}
.nav-toggle-box{position:relative; width:24px; height:18px; display:inline-block;}
.nav-toggle-box span, .nav-toggle-box span::before, .nav-toggle-box span::after{
  position:absolute; left:0; width:24px; height:3px; border-radius:3px; background:#fff;
  transition:transform .3s cubic-bezier(.4,0,.2,1), opacity .2s ease, top .3s cubic-bezier(.4,0,.2,1);
}
.nav-toggle-box span{top:8px;}
.nav-toggle-box span::before{content:""; top:-8px;}
.nav-toggle-box span::after{content:""; top:8px;}
.nav-toggle[aria-expanded="true"] .nav-toggle-box span{background:transparent;}
.nav-toggle[aria-expanded="true"] .nav-toggle-box span::before{top:0; transform:rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle-box span::after{top:0; transform:rotate(-45deg);}
.nav-backdrop{
  display:none; position:fixed; inset:0; background:rgba(9,17,34,.55); backdrop-filter:blur(2px); z-index:59;
  opacity:0; transition:opacity .32s ease; pointer-events:none;
}
.nav-backdrop.open{display:block; opacity:1; pointer-events:auto;}

/* ---- Nav dropdown (About > sections) ---- */
.nav-item{position:relative; display:flex; align-items:center;}
.nav-caret{
  background:none; border:0; color:#e7ecf6; cursor:pointer; padding:8px; margin-left:-8px;
  border-radius:8px; display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; min-height:36px; transition:background .15s ease;
}
.nav-caret:hover{background:rgba(255,255,255,.1);}
.nav-caret svg{width:14px; height:14px; transition:transform .25s cubic-bezier(.4,0,.2,1); pointer-events:none;}
.nav-item.open .nav-caret svg{transform:rotate(180deg);}
.nav-dropdown{
  position:absolute; top:100%; left:0; margin-top:6px; min-width:210px;
  background:#0c2140; border:1px solid rgba(255,255,255,.12); border-radius:12px;
  box-shadow:0 18px 40px -14px rgba(0,0,0,.55); padding:8px; display:flex; flex-direction:column; gap:1px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  z-index:75;
}
.nav-item.open .nav-dropdown{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity .2s ease, transform .2s ease;
}
.main-nav .nav-dropdown a{padding:10px 12px; border-radius:8px; font-size:.92rem; white-space:nowrap;}

@media (max-width: 900px){
  .nav-toggle{display:inline-flex;}
  .brand-text span{display:none;}
  .header-inner{padding:10px 16px;}
  .brand img{width:42px; height:42px;}
  .main-nav{
    position:fixed; inset:0 0 0 auto; right:0; width:min(320px, 84vw); height:100vh;
    background:var(--navy-900); box-shadow:-18px 0 40px -20px rgba(0,0,0,.5);
    flex-direction:column; align-items:stretch; padding:14px 16px 24px; gap:2px;
    transform:translateX(100%); visibility:hidden; overflow-y:auto; z-index:70; will-change:transform;
    transition:transform .35s cubic-bezier(.4,0,.2,1), visibility 0s linear .35s;
  }
  .main-nav.open{
    transform:translateX(0); visibility:visible;
    transition:transform .35s cubic-bezier(.4,0,.2,1), visibility 0s linear;
  }
  .main-nav a{
    padding:15px 16px; font-size:1.08rem;
  }
  /* Sits in the same band as the close button, which floats above the
     drawer at the top right — hence the padding held clear on that side. */
  .nav-brand{
    display:flex; align-items:center; gap:12px; text-decoration:none;
    padding:8px 54px 16px 8px; margin-bottom:8px;
    border-bottom:1px solid rgba(255,255,255,.14);
  }
  .nav-brand:hover{background:none;}   /* not one of the nav links */
  .nav-brand img{width:46px; height:46px; border-radius:50%; background:#fff; flex:none;}
  .nav-brand strong{font-family:var(--font-display); font-size:1rem; color:#fff; line-height:1.25;}
  .nav-brand > span > span{
    display:block; color:#b9c6de; font-size:.66rem; letter-spacing:.06em;
    text-transform:uppercase; line-height:1.3; margin-top:2px;
  }

  .main-nav > a, .main-nav > .nav-item{
    opacity:0; transform:translateX(16px);
    transition:opacity .3s ease, transform .3s ease;
  }
  .main-nav.open > a, .main-nav.open > .nav-item{opacity:1; transform:translateX(0);}
  .main-nav.open > *:nth-child(1){transition-delay:.06s;}   /* the brand */
  .main-nav.open > *:nth-child(2){transition-delay:.1s;}
  .main-nav.open > *:nth-child(3){transition-delay:.14s;}
  .main-nav.open > *:nth-child(4){transition-delay:.18s;}
  .main-nav.open > *:nth-child(5){transition-delay:.22s;}
  .main-nav.open > *:nth-child(6){transition-delay:.26s;}
  .main-nav.open > *:nth-child(7){transition-delay:.3s;}

  .nav-item{flex-wrap:wrap;}
  .nav-item .nav-link{flex:1; min-width:0;}
  .nav-dropdown{
    position:static; width:100%; flex:0 0 100%; order:3;
    background:rgba(255,255,255,.05); border:0; box-shadow:none; border-radius:8px;
    margin:0; padding:0; opacity:1; visibility:visible; transform:none;
    max-height:0; overflow:hidden;
    transition:max-height .3s ease, padding .3s ease;
  }
  .nav-item.open .nav-dropdown{max-height:320px; padding:4px 0 8px 12px;}
  .main-nav .nav-dropdown a{padding:12px; font-size:1rem;}
}
@media (max-width:380px){
  .brand img{width:36px; height:36px;}
  .brand-text strong{font-size:.92rem;}
}
body.nav-locked{overflow:hidden; overscroll-behavior:none;}

/* ============ Hero ============ */
.hero{
  position:relative; overflow:hidden; color:#fff;
  background:radial-gradient(circle at 82% 18%, rgba(227,30,36,.35), transparent 42%),
             linear-gradient(150deg, var(--navy-900) 0%, var(--navy-800) 45%, var(--navy-700) 100%);
  padding:88px 0 60px;
}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center;}
.hero-eyebrow{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.12); padding:7px 16px; border-radius:999px; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; font-family:var(--font-display); font-weight:600; margin-bottom:18px;}
.hero h1{color:#fff; margin-bottom:.4em;}
.hero p.lede{color:#d7dfef; font-size:1.18rem;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:28px;}
.hero-stats{display:flex; gap:28px; margin-top:40px; flex-wrap:wrap;}
.hero-stats div strong{display:block; font-family:var(--font-display); font-size:1.7rem; color:#fff;}
.hero-stats div span{color:#a9b7d1; font-size:.85rem;}

/* Ring graphic (signature element echoing the logo's broken ring) */
.ring-graphic{position:relative; width:100%; max-width:400px; margin:0 auto; aspect-ratio:1/1;}
.ring-graphic svg{width:100%; height:100%;}
.ring-center{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center;}
.ring-center strong{font-family:var(--font-display); font-size:2.6rem; color:#fff;}
.ring-center span{color:#c3cee4; font-size:.85rem; letter-spacing:.06em; text-transform:uppercase;}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .ring-graphic{max-width:260px;}
}

/* ============ Pillars / cards ============ */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; min-height:220px;}
/* No per-card accent colour: the three pillars are equal parts of one idea,
   and tinting them separately implied a grouping or a ranking that isn't
   there. Neutral card, same hairline border the rest of the site uses. */
.pillar-card{
  background:var(--paper); border-radius:var(--radius-lg); padding:32px 28px;
  border:1px solid var(--line); box-shadow:var(--ring-shadow);
  transition:transform .22s ease, box-shadow .22s ease;
}
.pillar-card .num{font-family:var(--font-display); font-weight:700; color:var(--ink-soft); font-size:.85rem; letter-spacing:.12em;}


/* Matches the lift .card uses elsewhere, a touch deeper since these already
   carry a shadow at rest. Pointer devices only — on a touch screen :hover
   sticks after a tap. */
@media (hover:hover){
  .pillar-card:hover{transform:translateY(-6px); box-shadow:0 28px 52px -22px rgba(15,42,82,.45);}
}
.pillar-icon{width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--accent, var(--red-600)) 14%, white); margin-bottom:16px;}
.pillar-icon svg{width:26px; height:26px; stroke:var(--accent, var(--red-600));}

@media (max-width:820px){ .pillars{grid-template-columns:1fr;} }

/* ============ Generic grid / card system ============ */
.grid{display:grid; gap:24px; min-height:260px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:980px){ .grid-3{grid-template-columns:repeat(2,1fr);} .grid-4{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .grid-2, .grid-3, .grid-4{grid-template-columns:1fr;} }

.card{display:block; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; transition:transform .18s ease, box-shadow .18s ease; color:inherit; text-decoration:none;}
.card:hover{transform:translateY(-4px); box-shadow:var(--ring-shadow);}
.card-body{padding:22px;}
.card-tag{
  display:inline-block; font-family:var(--font-display); font-weight:600; font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--accent,var(--navy-700));
  padding:4px 11px; border-radius:999px; margin-bottom:10px;
}
.card-media{aspect-ratio:16/10; background:var(--bg); overflow:hidden;}
.card-media img{width:100%; height:100%; object-fit:cover;}
.card h3{margin-bottom:.3em; font-size:1.15rem;}
.card-meta{color:var(--ink-soft); font-size:.9rem; margin-bottom:8px; display:flex; gap:14px; flex-wrap:wrap;}
.card-meta span{display:inline-flex; align-items:center; gap:5px;}
.card-meta svg{width:15px; height:15px; flex:none; stroke:var(--ink-soft);}

.empty-state{
  border:2px dashed var(--line); border-radius:var(--radius-md); padding:44px 24px; text-align:center; color:var(--ink-soft); background:var(--paper);
}

/* ============ Side rail =============================================
   The narrow column that sits beside the main content: Upcoming Events
   on the Programs page, and the News/Resources list on the Resources
   page. Both are the same component — only the ratio of the surrounding
   layout differs (2:1 for programs, 3:1 for resources), so the rail
   itself is styled once here.
   ==================================================================== */
.programs-layout{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:24px; align-items:start;}
.resource-layout{display:grid; grid-template-columns:minmax(0,3fr) minmax(0,1fr); gap:24px; align-items:start;}
@media (max-width:980px){
  .programs-layout{grid-template-columns:1fr;}
  /* Stacked, the rail would otherwise sit ~3400px down, below all five
     program cards, where nobody scrolling for a program finds it. */
  .programs-layout .side-rail{order:-1;}
}
/* Stacked, the list of posts goes above the write-up — otherwise the page
   opens on one article with no sign that there are others below it. */
@media (max-width:900px){
  .resource-layout{grid-template-columns:1fr;}
  .resource-layout .side-rail{order:-1;}
}
/* Long write-ups shouldn't scroll the list of posts off the screen. */
@media (min-width:901px){
  .resource-layout .side-rail{position:sticky; top:92px; max-height:calc(100vh - 116px); overflow-y:auto;}
}

.side-rail{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:24px 20px; box-shadow:var(--ring-shadow);
}
.rail-head{margin-bottom:14px;}
.rail-head .eyebrow{margin-bottom:8px;}
.rail-head h2{font-size:1.35rem; margin-bottom:.2em;}
.rail-head p{color:var(--ink-soft); font-size:.9rem; margin:0;}
.rail-list{list-style:none; padding:0; margin:0;}
.rail-list li + li{border-top:1px solid var(--line);}
.rail-link{
  display:flex; flex-direction:column; gap:4px; width:100%; text-align:left; cursor:pointer;
  background:none; border:0; border-left:3px solid transparent; padding:13px 12px;
  font-family:var(--font-body); font-size:1rem; color:inherit;
  transition:background .15s ease, border-color .15s ease;
}
.rail-link.active{background:#fdecec; border-left-color:var(--red-600);}
@media (hover:hover){
  .rail-link:hover{background:#fdecec; border-left-color:var(--red-600);}
}
.rail-title{
  font-family:var(--font-display); font-weight:600; color:var(--red-600);
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
}
@media (hover:hover){ .rail-link:hover .rail-title{color:var(--red-700);} }
.rail-link.active .rail-title{color:var(--red-700); text-decoration:none;}
.rail-meta{display:flex; align-items:center; gap:6px; color:var(--ink-soft); font-size:.86rem;}
.rail-meta svg{width:14px; height:14px; flex:none; stroke:var(--ink-soft);}
.rail-empty{
  color:var(--ink-soft); font-size:.94rem; text-align:center;
  border:2px dashed var(--line); border-radius:var(--radius-sm); padding:22px 16px;
}

/* ============ Resources: reading pane ============ */
.resource-pane{min-height:260px;}
.resource-article{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:34px 34px 30px; box-shadow:var(--ring-shadow);
}
.resource-article h2{margin-bottom:.3em;}
.resource-article .card-meta{margin-bottom:20px;}
.resource-image{
  width:100%; max-height:420px; object-fit:cover; margin-bottom:22px;
  border:1px solid var(--line); border-radius:var(--radius-md);
}
/* Written as plain text in the dashboard, so the admin's own line and
   paragraph breaks are what shape it here. */
.resource-body{white-space:pre-line; margin-bottom:22px;}
.resource-body:last-child{margin-bottom:0;}
@media (max-width:620px){ .resource-article{padding:24px 20px;} }

/* ---- Touch targets: phones AND tablets ----
   These all cleared 44px at desktop type sizes but not once the layout
   narrows, so the heights are asserted rather than left to the padding. */
@media (max-width:900px){
  .rail-link{padding:15px 12px; min-height:44px;}
  /* A full-width attachment button is easier to hit than an inline one. */
  .resource-article .btn{display:block; width:100%; text-align:center; padding:13px 18px;}
  .program-join{min-height:46px;}
}
/* Phones only: claw back some horizontal room inside the rail. */
@media (max-width:620px){
  .side-rail{padding:20px 16px;}
}

/* ============ Team ============ */
.team-card{text-align:center; padding:32px 22px;}
/* .card sets display:block, which beats the browser's own [hidden] rule —
   so a hidden card would still be drawn. main.js filters the Executive
   Team by term with the hidden attribute rather than by rebuilding the
   list (which re-fetched every photo on each click), so this rule is what
   makes that filtering actually hide anything. */
.team-card[hidden]{display:none;}
/* The 'no members in this term' notice sits inside the same grid, so it
   has to span the row rather than sit in one column. */
#execTeamGrid .empty-state{grid-column:1/-1;}
.team-photo{
  width:148px; height:148px; border-radius:50%; margin:0 auto 18px; object-fit:cover;
  border:5px solid var(--bg); box-shadow:0 8px 20px -8px rgba(9,17,34,.3), 0 0 0 3px var(--accent, var(--red-600));
  transition:transform .25s ease, box-shadow .25s ease;
}
.team-card:hover .team-photo{transform:scale(1.05); box-shadow:0 12px 26px -8px rgba(9,17,34,.35), 0 0 0 3px var(--accent, var(--red-600));}
.team-card h3{margin-bottom:2px; font-size:1.05rem;}
.team-role{color:var(--red-600); font-family:var(--font-display); font-weight:600; font-size:.85rem; letter-spacing:.03em;}
.team-email{display:block; margin-top:6px; font-size:.85rem; color:var(--ink-soft); word-break:break-word;}
.team-email:hover{color:var(--red-600); text-decoration:underline;}
@media (max-width:620px){
  #execTeamGrid.grid-3{gap:16px;}
  .team-card{padding:24px 16px;}
  .team-photo{width:104px; height:104px; margin-bottom:14px;}
  .team-card h3{font-size:1rem;}
  .team-role{font-size:.8rem;}
  .team-email{font-size:.82rem;}
}

/* ============ Timeline (reports / history) ============ */
.timeline{border-left:3px solid var(--line); margin-left:10px; padding-left:28px; display:flex; flex-direction:column; gap:26px;}
.timeline-item{position:relative;}
.timeline-item::before{content:""; position:absolute; left:-34px; top:4px; width:14px; height:14px; border-radius:50%; background:var(--red-600); box-shadow:0 0 0 4px #fce9e9;}
.timeline-item h4{margin-bottom:4px;}
.timeline-date{color:var(--ink-soft); font-size:.85rem; font-family:var(--font-display); font-weight:600;}

/* ============ Split section ============ */
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
@media (max-width:900px){ .split{grid-template-columns:1fr; gap:32px;} }
.split img{border-radius:var(--radius-lg); box-shadow:var(--ring-shadow);}

/* ============ Banner / CTA ============ */
.cta-band{
  background:linear-gradient(120deg, var(--red-700), var(--red-600) 60%, var(--orange-500));
  color:#fff; border-radius:var(--radius-lg); padding:48px; text-align:center;
}
.cta-band h2{color:#fff;}
.cta-band p{color:#ffe3e2; max-width:56ch; margin-left:auto; margin-right:auto;}

/* ============ Gallery ============ */
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.gallery-grid figure{margin:0; border-radius:var(--radius-md); overflow:hidden; aspect-ratio:1/1; background:var(--bg); cursor:zoom-in; position:relative;}
.gallery-grid img{width:100%; height:100%; object-fit:cover; transition:transform .3s ease;}
.gallery-grid figure:hover img{transform:scale(1.06);}
@media (max-width:900px){ .gallery-grid{grid-template-columns:repeat(2,1fr);} }
.lightbox{
  position:fixed; inset:0; background:rgba(9,17,34,.92); display:none;
  align-items:center; justify-content:center; z-index:200; padding:24px;
  touch-action:pan-y pinch-zoom; overscroll-behavior:contain;
}
.lightbox.open{display:flex;}
/* The photo on screen is the middle of three slides sitting on a track, so
   a swipe carries one photo out as the next comes in instead of swapping
   the picture in place. .sliding is only on for the animation that finishes
   a swipe — while a finger is down the track follows it with no transition,
   which is what makes the drag feel attached to the finger. */
.lightbox-viewport{position:absolute; inset:0; overflow:hidden; touch-action:pan-y pinch-zoom;}
.lightbox-track{display:flex; height:100%; transform:translate3d(-100%,0,0); will-change:transform;}
.lightbox-track.sliding{transition:transform .22s cubic-bezier(.22,.61,.36,1);}
.lightbox-slide{flex:0 0 100%; height:100%; display:flex; align-items:center; justify-content:center; padding:24px;}
.lightbox img{max-width:min(900px,92vw); max-height:86vh; border-radius:12px; user-select:none; -webkit-user-drag:none;}
.lightbox-close{position:absolute; top:22px; right:26px; background:none; border:0; color:#fff; font-size:2rem; cursor:pointer; line-height:1; z-index:2;}
.lightbox-cap, .lightbox-count{
  position:absolute; left:50%; transform:translateX(-50%);
  max-width:min(680px, calc(100% - 140px)); width:max-content;
  background:rgba(9,17,34,.62); border-radius:999px; padding:7px 18px; text-align:center;
}
.lightbox-cap{bottom:26px; color:#dbe2f0;}
.lightbox-cap:empty, .lightbox-count:empty{display:none;}
.lightbox-count{top:26px; color:#c3cee4; font-size:.88rem; letter-spacing:.04em;}
/* Paging arrows. Sit over the backdrop rather than in the flex row, so the
   photo stays centred no matter how wide it is. */
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:52px; height:52px; border-radius:50%; border:0; padding:0;
  background:rgba(255,255,255,.16); color:#fff; font-size:2rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .2s ease;
}
.lightbox-nav[hidden]{display:none;}
.lightbox-nav:hover{background:rgba(255,255,255,.34);}
.lightbox-nav.prev{left:18px;}
.lightbox-nav.next{right:18px;}
@media (max-width:620px){
  /* Tucked to the bottom corners so they don't cover the photo itself —
     swiping is the main gesture here, the arrows are the fallback. */
  .lightbox-nav{width:46px; height:46px; font-size:1.7rem; top:auto; bottom:18px; transform:none;}
  .lightbox-cap{bottom:78px; max-width:calc(100% - 32px); padding:7px 14px;}
}

/* ============ Home gallery slider ============ */
.home-slider{position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--ring-shadow); aspect-ratio:16/9; background:var(--bg);}
.home-slider-track{display:flex; height:100%; transition:transform .6s cubic-bezier(.65,0,.35,1);}
.home-slide{flex:0 0 100%; height:100%; position:relative;}
.home-slide img{width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in;}
.home-slide-cap{position:absolute; left:0; right:0; bottom:0; padding:34px 20px 16px; color:#fff; font-weight:500;
  background:linear-gradient(transparent, rgba(9,17,34,.72));}
.home-slider-nav{position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%;
  border:0; background:rgba(9,17,34,.45); color:#fff; font-size:1.4rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .2s ease;}
.home-slider-nav:hover{background:rgba(9,17,34,.75);}
.home-slider-nav.prev{left:14px;}
.home-slider-nav.next{right:14px;}
.home-slider-dots{position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:8px; flex-wrap:wrap; justify-content:center; max-width:88%;}
.home-slider-dots button{width:9px; height:9px; border-radius:50%; border:0; padding:0; background:rgba(255,255,255,.55); cursor:pointer; transition:width .2s ease, background .2s ease;}
.home-slider-dots button.active{background:#fff; width:24px; border-radius:5px;}
@media (max-width:620px){ .home-slider{aspect-ratio:1/1;} .home-slider-nav{width:34px; height:34px; font-size:1.2rem;} }

/* ============ Filters ============ */
.filter-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:32px;}
.chip{
  font-family:var(--font-display); font-weight:600; font-size:.88rem; padding:9px 18px;
  border-radius:999px; border:2px solid var(--line); background:#fff; color:var(--ink-soft); cursor:pointer; transition:all .15s ease;
}
.chip.active, .chip:hover{border-color:var(--red-600); color:var(--red-600); background:#fdecec;}

/* Filter rail: content on the left, one filter per line down the right,
   rather than a row of chips above it. Used by the Executive Team for
   terms and by the Gallery for albums. */
.filter-layout{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:28px; align-items:start;}
.filter-rail{display:flex; flex-direction:column; gap:10px;}
.filter-rail .chip{white-space:nowrap; text-align:center;}
/* Nothing to filter by — the column is empty, so don't reserve room for it. */
.filter-layout:has(.filter-rail:empty){grid-template-columns:1fr;}
/* Narrower windows keep the right-hand column — the chips just get
   smaller — so the layout doesn't quietly turn back into a row on a
   half-width or zoomed-in desktop window. */
@media (max-width:900px){
  .filter-layout{gap:18px;}
  /* Narrow enough to leave the content room, tall enough to tap. */
  .filter-rail .chip{padding:12px 13px; min-height:44px; font-size:.82rem;}
}
/* Only at true phone widths does a side column stop making sense: there
   isn't room for content beside it, so the filters go above as a wrapping row. */
@media (max-width:560px){
  .filter-layout{grid-template-columns:1fr; gap:24px;}
  .filter-rail{flex-direction:row; flex-wrap:wrap; justify-content:center; order:-1;}
  .filter-rail .chip{padding:12px 20px;}   /* room to breathe once they're a row */
}
@media (max-width:400px){
  .filter-rail{gap:8px;}
  .filter-rail .chip{padding:7px 14px; font-size:.82rem;}
}

/* ============ Page-to-page swipe ============
   Dragging sideways walks the header's pages as one horizontal strip.
   assets/js/nav-swipe.js drives it, sliding <body> under the finger and
   setting --swipe-p on <html> as it goes: 0→1 progress towards the point
   where letting go navigates.

   Reduced motion is handled three ways: the pre-paint <head> script never
   marks the arriving page, nav-swipe.js navigates without moving anything,
   and the media query at the foot of this block flattens the view-transition
   pseudos — the site-wide reduce rule near the top of this file uses a
   universal selector, which doesn't reach into that pseudo tree. */
:root{--nav-ms:340ms;}

/* --- while the finger is down --- */
/* Claiming the sideways gesture. The touch listeners are passive, so they
   never preventDefault, and without this the browser is free to read a
   horizontal drag as a pan or an overscroll part-way through — it takes the
   gesture over and cancels the touch sequence out from under them, so the
   page springs back mid-swipe with the pill stranded half in and nothing
   navigates. pan-y leaves ordinary vertical scrolling native and on the
   compositor; pinch-zoom keeps the page zoomable, which matters for the
   readers this site is for. The gallery viewer already does the same for its
   own swipe — see .lightbox-viewport above.

   Scoped to a class nav-swipe.js puts on, rather than plain body, because
   this sheet is shared with the admin screens, and touch-action restricted on
   an ancestor cannot be widened again lower down — a blanket rule here would
   take horizontal panning away from admin.css .table-scroll. For the same
   reason, any horizontally scrolling element added to a public page will need
   its own touch-action:auto and a parent that does not say pan-y. */
body.nav-swipeable{touch-action:pan-y pinch-zoom;}

body.nav-springing{transition:transform .26s cubic-bezier(.22,.61,.36,1);}

.swipe-hint{
  position:fixed; top:50%; z-index:90; display:none; align-items:center; gap:11px;
  max-width:62vw; padding:13px 20px;
  font-family:var(--font-display); font-weight:600; font-size:.95rem; line-height:1.2;
  color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:rgba(12,33,64,.58);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 18px 44px -20px rgba(3,10,24,.75);
  pointer-events:none; opacity:var(--swipe-p,0);
  will-change:transform, opacity;
  /* Colour eases into the armed state; transform must not — it is tracking a
     finger, and a transition there would leave it lagging behind. */
  transition:background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.swipe-hint.on{display:flex;}
/* Rides in from its own edge as --swipe-p fills, fully clear of the screen
   at 0. nav-swipe.js parents the pill to <html> so the page sliding past
   underneath leaves it where it is. */
.swipe-hint[data-edge="left"]{
  left:0; border-left:0; border-radius:0 999px 999px 0; padding-left:16px;
  transform:translateY(-50%) translateX(calc((var(--swipe-p,0) - 1) * 108%));
}
.swipe-hint[data-edge="right"]{
  right:0; border-right:0; border-radius:999px 0 0 999px; padding-right:16px;
  transform:translateY(-50%) translateX(calc((1 - var(--swipe-p,0)) * 108%));
}
.swipe-hint-arrow{font-size:1.3rem; line-height:1; opacity:.8;}
.swipe-hint.armed{
  background:rgba(227,30,36,.9); border-color:rgba(255,255,255,.55);
  box-shadow:0 18px 44px -18px rgba(227,30,36,.85);
}
.swipe-hint.armed .swipe-hint-arrow{opacity:1;}
/* Rides back out with the page rather than blinking off. */
.swipe-hint.settling{
  transition:transform .26s cubic-bezier(.22,.61,.36,1), opacity .26s ease,
             background-color .16s ease, border-color .16s ease;
}

/* --- the hand-off, for browsers without cross-document view transitions --- */
/* Starting the leave from --nav-from, the offset the finger left off at, is
   what lets nav-swipe.js drop its inline transform and set the phase in the
   same breath without a jump. */
@keyframes nav-leave-next{
  from{transform:translate3d(var(--nav-from,0px),0,0); opacity:1;}
  to{transform:translate3d(-100%,0,0); opacity:.35;}
}
@keyframes nav-leave-prev{
  from{transform:translate3d(var(--nav-from,0px),0,0); opacity:1;}
  to{transform:translate3d(100%,0,0); opacity:.35;}
}
@keyframes nav-enter-next{from{transform:translate3d(100%,0,0);} to{transform:none;}}
@keyframes nav-enter-prev{from{transform:translate3d(-100%,0,0);} to{transform:none;}}

html[data-nav-phase="leave"][data-nav-dir="next"] body{animation:nav-leave-next var(--nav-ms) cubic-bezier(.4,0,1,1) forwards;}
html[data-nav-phase="leave"][data-nav-dir="prev"] body{animation:nav-leave-prev var(--nav-ms) cubic-bezier(.4,0,1,1) forwards;}
/* data-nav-vt marks a document that expects the browser to do the arriving
   for it, so these two stay out of the way there. */
html[data-nav-phase="enter"][data-nav-dir="next"]:not([data-nav-vt]) body{animation:nav-enter-next var(--nav-ms) cubic-bezier(.22,.61,.36,1);}
html[data-nav-phase="enter"][data-nav-dir="prev"]:not([data-nav-vt]) body{animation:nav-enter-prev var(--nav-ms) cubic-bezier(.22,.61,.36,1);}

/* --- cross-document view transitions, where they exist --- */
@view-transition{navigation:auto;}

@keyframes nav-vt-in-next{from{transform:translateX(100%);}}
@keyframes nav-vt-in-prev{from{transform:translateX(-100%);}}
/* The page being left only drifts a quarter of the way, and fades, while the
   arriving one covers the whole distance. That difference in speed is what
   makes the new page read as arriving on top of the old rather than the two
   sliding past as one strip. */
@keyframes nav-vt-out-next{to{transform:translateX(-24%); opacity:.4;}}
@keyframes nav-vt-out-prev{to{transform:translateX(24%); opacity:.4;}}

::view-transition-old(root), ::view-transition-new(root){
  animation-duration:var(--nav-ms); animation-timing-function:cubic-bezier(.22,.61,.36,1);
  mix-blend-mode:normal;   /* the default plus-lighter washes out the overlap */
}
html[data-nav-dir="next"]::view-transition-old(root){animation-name:nav-vt-out-next; z-index:1;}
html[data-nav-dir="next"]::view-transition-new(root){animation-name:nav-vt-in-next;  z-index:2;}
html[data-nav-dir="prev"]::view-transition-old(root){animation-name:nav-vt-out-prev; z-index:1;}
html[data-nav-dir="prev"]::view-transition-new(root){animation-name:nav-vt-in-prev;  z-index:2;}

@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*), ::view-transition-image-pair(*),
  ::view-transition-old(*), ::view-transition-new(*){animation-duration:.001ms !important;}
}

/* ============ Reveal on scroll ============
   Blocks rise into place as they are scrolled to, rather than the whole page
   arriving flat. main.js picks the targets — section content, and the cards
   inside a grid rather than the grid itself — and only ever adds .reveal-pre
   where there is an observer standing by to take it off again, so a browser
   without one shows everything outright instead of a page of blanks.

   An animation, not a transition: the stagger below is an animation-delay, and
   as a transition-delay it would also sit in front of every later hover or
   state change on the same element. It fills backwards so a block holds still
   through its delay and is then left on its own styles — a forwards fill would
   pin transform at the end frame and hovers would have nothing left to move.

   Reduced motion is covered site-wide by the rule near the top of this file,
   which flattens every animation to nothing: blocks simply appear. */
@keyframes toss-rise{
  from{opacity:0; transform:translateY(20px);}
  to{opacity:1; transform:none;}
}
/* The two numbers worth touching. --reveal-wait is the beat a block holds
   still after being scrolled to, before it starts; --reveal-rise is how long
   the fade-up itself then takes. Everything below is derived from them, so
   the whole site retimes from here. */
:root{
  --reveal-wait:.2s;
  --reveal-rise:.55s;
}

.reveal-pre{opacity:0;}
.reveal-in{animation:toss-rise var(--reveal-rise) cubic-bezier(.22,.61,.36,1) var(--reveal-wait) backwards;}

/* Siblings arrive in turn, so a row of cards fills in rather than landing as
   one slab. Each is the wait plus its place in the row — added on rather than
   replacing it, or the stagger would cancel the beat out. Capped at the
   seventh: past that the tail is longer than anyone waits, and a long grid
   would still be dealing itself out after the reader has scrolled on. */
.reveal-in:nth-child(2){animation-delay:calc(var(--reveal-wait) + .07s);}
.reveal-in:nth-child(3){animation-delay:calc(var(--reveal-wait) + .14s);}
.reveal-in:nth-child(4){animation-delay:calc(var(--reveal-wait) + .21s);}
.reveal-in:nth-child(5){animation-delay:calc(var(--reveal-wait) + .28s);}
.reveal-in:nth-child(6){animation-delay:calc(var(--reveal-wait) + .35s);}
.reveal-in:nth-child(n+7){animation-delay:calc(var(--reveal-wait) + .42s);}

/* ============ Contact ============ */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px;}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr;} }
.info-list{list-style:none; padding:0; display:flex; flex-direction:column; gap:18px;}
.info-list li{display:flex; gap:14px; align-items:flex-start;}
.info-ic{width:42px; height:42px; flex:none; border-radius:11px; background:#fdecec; display:flex; align-items:center; justify-content:center;}
.info-ic svg{width:20px; height:20px; stroke:var(--red-600);}
.form-field{margin-bottom:18px;}
.form-field label{display:block; font-family:var(--font-display); font-weight:600; font-size:.92rem; margin-bottom:6px; color:var(--navy-800);}
.form-field input, .form-field textarea, .form-field select{
  width:100%; padding:12px 14px; border-radius:10px; border:2px solid var(--line);
  font-family:var(--font-body); font-size:1rem; background:#fff; color:var(--ink);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{border-color:var(--red-600); outline:none;}
/* The rule above outranks the global :focus-visible outline (0,2,1 beats
   0,1,0), so it was silently stripping the focus ring from every field on
   the site and in the admin — leaving keyboard users with only a border
   colour change to go on. Re-assert the ring for keyboard focus; a mouse
   click still gets the quieter red border on its own. */
.form-field input:focus-visible, .form-field textarea:focus-visible, .form-field select:focus-visible{
  outline:3px solid var(--orange-500); outline-offset:3px;
}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:560px){ .form-row{grid-template-columns:1fr;} }
.hp-field{position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden;}
.rsvp-toggle{margin-top:4px;}
.rsvp-form{margin-top:14px; padding-top:14px; border-top:1px solid var(--line);}
.rsvp-form .form-field{margin-bottom:12px;}
.map-wrap{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--ring-shadow); border:0;}
.map-wrap iframe{width:100%; height:320px; border:0; display:block;}
.form-note{font-size:.85rem; color:var(--ink-soft); margin-top:10px;}
.toast{
  position:fixed; bottom:24px; right:24px; background:var(--navy-900); color:#fff; padding:14px 20px;
  border-radius:12px; box-shadow:0 20px 40px -14px rgba(0,0,0,.4); display:flex; gap:10px; align-items:center;
  transform:translateY(140%); transition:transform .3s ease; z-index:300; max-width:340px;
}
.toast.show{transform:translateY(0);}
.toast.error{background:var(--red-700);}

/* ============ Footer ============ */
.site-footer{background:var(--navy-900); color:#c4cee2; padding:56px 0 22px; margin-top:64px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:36px;}
@media (max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .footer-grid{grid-template-columns:1fr;} }
.footer-brand{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.footer-brand img{width:46px; height:46px; border-radius:50%; background:#fff;}
.footer-brand strong{color:#fff; font-family:var(--font-display); font-size:1.05rem;}
.site-footer h4{color:#fff; font-family:var(--font-display); font-size:.95rem; letter-spacing:.04em; text-transform:uppercase; margin-bottom:16px;}
.site-footer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px;}
.site-footer a{color:#c4cee2;}
.site-footer a:hover{color:#fff;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12); margin-top:40px; padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.85rem; color:#8fa0c2;}
.social-row{display:flex; gap:10px;}
.social-row a{width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center;}
.social-row svg{width:18px; height:18px; stroke:#fff;}
.social-row a:hover{background:var(--red-600);}

/* ============ Page hero (interior pages) ============ */
.page-hero{
  background:linear-gradient(150deg, var(--navy-900), var(--navy-700));
  color:#fff; padding:64px 0 46px;
}
.page-hero h1{color:#fff; margin-bottom:.25em;}
.breadcrumb{color:#a9b7d1; font-size:.9rem;}
.breadcrumb a{color:#cdd8ec;}

/* Skip link */
.skip-link{position:absolute; left:-999px; top:0; background:#fff; color:var(--navy-900); padding:12px 18px; z-index:999; border-radius:0 0 10px 0;}
.skip-link:focus{left:0;}

@media (max-width:640px){
  .section{padding:52px 0;}
  .section-tight{padding:34px 0;}
  .hero{padding:40px 0 44px;}
  .cta-band{padding:34px 22px;}
  .page-hero{padding:44px 0 34px;}
  .container{padding:0 18px;}
}

/* Alt icons badges */
.badge-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px;}
.badge{background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:6px 14px; font-size:.82rem; color:var(--ink-soft); font-family:var(--font-display); font-weight:600;}

/* ============ Payments: fee badges, join card, checkout modal ============ */
.card-tag-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px;}
.card-tag-row .card-tag{margin-bottom:0;}
.fee-badge{
  display:inline-block; font-family:var(--font-display); font-weight:700; font-size:.74rem;
  letter-spacing:.04em; padding:4px 11px; border-radius:999px; white-space:nowrap;
}
.fee-badge.paid{background:#fdecec; color:var(--red-700); border:1px solid #f6c9ca;}
.fee-badge.free{background:#e8f6e7; color:#227a1d; border:1px solid #c3e6c0;}
.program-join{margin-top:14px; width:100%;}

/* "Become a member" block on the About page */
.join-card{
  background:linear-gradient(135deg, var(--navy-900), var(--navy-700));
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--ring-shadow);
}
.join-card-body{padding:44px 40px; color:#fff; text-align:center;}
.join-card-body h2{color:#fff;}
.join-card-body .lede{color:#d7dfef; margin-left:auto; margin-right:auto;}
.join-card-body .eyebrow{color:#ff9a9d;}
.join-price{display:flex; align-items:baseline; justify-content:center; gap:9px; margin:22px 0 26px;}
.join-price strong{font-family:var(--font-display); font-size:2.5rem; color:#fff; line-height:1;}
.join-price span{color:#a9b7d1; font-size:.92rem;}
@media (max-width:640px){ .join-card-body{padding:32px 22px;} }

/* Checkout modal
   Every form popup on the site — program registration, event RSVP, the
   Get involved / membership form — is built from this overlay, so the
   entrance timing here is the only place that controls all of them.
   Programs and events added later pick it up with no extra work.
   The backdrop dims straight away so the click feels registered, then the
   panel rises in: --popup-delay is the beat before it moves, --popup-in
   how long it takes to settle (~1s end to end). The delay lives only on
   the .open rule, so closing snaps back with no pause. */
.pay-overlay{
  --popup-delay:.35s;
  --popup-in:.6s;
  --popup-ease:cubic-bezier(.16,.86,.42,1);
  position:fixed; inset:0; z-index:200; background:rgba(9,17,34,.66); backdrop-filter:blur(3px);
  display:flex; align-items:flex-start; justify-content:center; padding:min(8vh,70px) 18px 24px;
  opacity:0; pointer-events:none; transition:opacity .28s ease; overflow-y:auto;
}
.pay-overlay.open{opacity:1; pointer-events:auto;}
.pay-panel{
  position:relative; background:#fff; width:100%; max-width:480px; border-radius:var(--radius-lg);
  box-shadow:0 34px 80px -22px rgba(0,0,0,.55); padding:34px 32px 30px;
  opacity:0; transform:translateY(24px) scale(.965);
  transition:opacity .16s ease, transform .16s ease;
}
.pay-overlay.open .pay-panel{
  opacity:1; transform:translateY(0) scale(1);
  transition:opacity var(--popup-in) var(--popup-ease) var(--popup-delay),
             transform var(--popup-in) var(--popup-ease) var(--popup-delay);
}
/* The global reduce-motion rule zeroes durations but not delays. */
@media (prefers-reduced-motion: reduce){
  .pay-overlay.open .pay-panel{transition-delay:0s;}
}
.pay-close{
  position:absolute; top:12px; right:14px; background:none; border:0; font-size:1.9rem; line-height:1;
  color:var(--ink-soft); cursor:pointer; padding:6px 10px; border-radius:8px;
}
.pay-close:hover{background:var(--bg); color:var(--ink);}
.pay-title{font-size:1.5rem; margin-bottom:.2em;}
.pay-sub{color:var(--ink-soft); margin-bottom:20px; font-size:1rem;}
.pay-amount-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--bg); border:1px solid var(--line); border-radius:12px;
  padding:14px 18px; margin-bottom:22px;
}
.pay-amount-row span{color:var(--ink-soft); font-size:.95rem;}
.pay-amount-row strong{font-family:var(--font-display); font-size:1.4rem; color:var(--navy-800);}
.pay-amount-row.paid strong{color:#227a1d;}
.pay-free-badge{
  display:inline-block; background:#e8f6e7; color:#227a1d; border:1px solid #c3e6c0;
  font-family:var(--font-display); font-weight:600; font-size:.85rem;
  padding:7px 16px; border-radius:999px; margin-bottom:22px;
}
.pay-form .form-field{margin-bottom:15px;}
.pay-element{margin-bottom:18px; min-height:44px;}
.pay-error{
  background:#fdecec; border:1px solid #f6c9ca; color:#8a1216; border-radius:10px;
  padding:11px 14px; font-size:.92rem; margin-bottom:16px;
}
.pay-secure-note{
  display:flex; align-items:center; justify-content:center; gap:7px;
  color:var(--ink-soft); font-size:.82rem; margin:14px 0 0; text-align:center;
}
.pay-lock{width:15px; height:15px; flex:none;}

/* Result screens */
.pay-result{text-align:center; padding:8px 0 0;}
.pay-result-icon{
  width:66px; height:66px; border-radius:50%; margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center;
}
.pay-result-icon svg{width:32px; height:32px;}
.pay-result-icon.success{background:#e8f6e7; color:#227a1d;}
.pay-result-icon.failure{background:#fdecec; color:var(--red-700);}
.pay-result .pay-title{margin-bottom:.3em;}
.pay-result-note{color:var(--ink-soft); font-size:.96rem; margin-bottom:18px;}
.pay-result-note.subtle{font-size:.87rem; margin-top:-8px;}

/* Membership application: type picker, review screen */
.pay-radio-group{display:flex; flex-direction:column; gap:10px;}
.pay-radio-option{
  display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; cursor:pointer; font-size:.95rem; transition:border-color .15s ease, background .15s ease;
}
.pay-radio-option:has(input:checked){border-color:var(--red-600); background:#fdf3f3;}
.pay-radio-option input{flex:none; width:16px; height:16px;}
.pay-radio-option span{display:flex; flex:1; align-items:center; justify-content:space-between; gap:10px;}
.pay-review-list{
  background:var(--bg); border:1px solid var(--line); border-radius:12px;
  padding:6px 18px; margin-bottom:20px;
}
.pay-review-list > div{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:11px 0; border-bottom:1px solid var(--line); font-size:.92rem;
}
.pay-review-list > div:last-child{border-bottom:0;}
.pay-review-list span{color:var(--ink-soft);}
.pay-review-list strong{color:var(--navy-800); text-align:right;}

/* Get Involved section (Home page) */
.get-involved-card .card-body{text-align:center;}
.get-involved-card h3{margin-top:4px;}
.get-involved-card p{color:var(--ink-soft); margin-bottom:16px; min-height:44px;}