/* ==========================================================================
   NEWSOUL YOUTH — stylesheet
   Direction A ("Church Family") + full dark theme.
   Brand red #FF2600 is lifted straight from newsoulchurch.com.

   Change the brand here and it changes everywhere — every color in the
   site is one of these tokens. Nothing below hardcodes a hex.
   ========================================================================== */

:root{
  /* --- brand ---------------------------------------------------------- */
  --red:        #FF2600;   /* the church's red — accents, chips, rules      */
  --red-deep:   #E01F00;   /* solid fills that carry white text (AA 4.8:1)  */
  --red-soft:   rgba(255,38,0,.09);
  --red-glow:   rgba(255,38,0,.22);

  /* --- event-type accents ---------------------------------------------
     Not decoration. Each kind of event owns a hue, so the calendar and the
     list can be read at a glance — a retreat should never look like a
     regular Friday night. Red stays the brand anchor and belongs to youth
     nights, the most common thing on the calendar.
     Light-theme values are darkened enough to stay legible on white.      */
  --t-youth:      #FF2600;
  --t-highschool: #2563EB;   /* blue     */
  --t-special:    #7C3AED;   /* violet   */
  --t-outreach:   #0E7490;   /* cyan     */
  --t-serve:      #05966A;   /* green    */
  --t-trip:       #B45309;   /* amber    */
  --t-fundraiser: #4D7C0F;   /* lime     */

  /* Each hue needs two values. The vivid one above is for bars, dots and
     fills, where 3:1 is the bar. Small text needs 4.5:1, and vivid red and
     green only reach ~3.8 on white — so text uses these darker inks. */
  --t-youth-ink:      #B81800;
  --t-highschool-ink: #1D4ED8;
  --t-special-ink:    #6D28D9;
  --t-outreach-ink:   #0C6072;
  --t-serve-ink:      #04674A;
  --t-trip-ink:       #92400E;
  --t-fundraiser-ink: #3F6212;

  /* --- surfaces ------------------------------------------------------- */
  --bg:         #ffffff;
  --bg-2:       #f5f5f5;
  --bg-3:       #ebebeb;
  --surface:    #ffffff;
  --inverse-bg: #000000;   /* black cards inside a light page               */
  --inverse-tx: #ffffff;
  /* Accent for text sitting ON an inverted surface. The next-up card and the
     footer flip with the theme, so the red on them has to flip the opposite
     way or it drops to ~3.6:1. Light page => black card => bright red.      */
  --inverse-accent: #FF3A1A;

  /* --- ink ------------------------------------------------------------ */
  --text:       #000000;
  --text-2:     #4d4d4d;
  --text-3:     #757575;
  --line:       #e3e3e3;
  --line-2:     #d2d2d2;

  --shadow-sm:  0 1px 2px rgba(0,0,0,.05);
  --shadow:     0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:  0 18px 48px rgba(0,0,0,.16);

  /* --- type ----------------------------------------------------------- */
  --display: "Inter Tight", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --body:    Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* --- motion --------------------------------------------------------- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out-back: cubic-bezier(.34,1.4,.64,1);
  --dur: .32s;

  --radius: 14px;
  --radius-sm: 9px;
  --maxw: 1140px;
  --header-h: 68px;

  color-scheme: light;
}

[data-theme="dark"]{
  --red:        #FF3A1A;   /* lifted a touch so it stays legible on black   */
  --red-deep:   #FF2600;
  --red-soft:   rgba(255,58,26,.14);
  --red-glow:   rgba(255,58,26,.30);

  /* Lifted on dark so every one of them clears AA against near-black. */
  --t-youth:      #FF3A1A;
  --t-highschool: #60A5FA;
  --t-special:    #A78BFA;
  --t-outreach:   #22D3EE;
  --t-serve:      #34D399;
  --t-trip:       #FBBF24;
  --t-fundraiser: #A3E635;

  /* On dark the vivid values already clear 4.5:1 against near-black, so ink
     and vivid are the same. Keeping the token means every rule below works
     in both themes without a single theme-specific override. */
  --t-youth-ink:      #FF3A1A;
  --t-highschool-ink: #60A5FA;
  --t-special-ink:    #A78BFA;
  --t-outreach-ink:   #22D3EE;
  --t-serve-ink:      #34D399;
  --t-trip-ink:       #FBBF24;
  --t-fundraiser-ink: #A3E635;

  --bg:         #0b0b0c;
  --bg-2:       #121214;
  --bg-3:       #1a1a1d;
  --surface:    #141416;
  --inverse-bg: #ffffff;   /* the flip: white cards inside a dark page      */
  --inverse-tx: #000000;
  --inverse-accent: #E01F00;   /* dark page => white card => deep red */

  --text:       #ffffff;
  --text-2:     #b4b7be;
  --text-3:     #8a8d95;
  --line:       rgba(255,255,255,.11);
  --line-2:     rgba(255,255,255,.2);

  --shadow-sm:  0 1px 2px rgba(0,0,0,.5);
  --shadow:     0 4px 18px rgba(0,0,0,.55);
  --shadow-lg:  0 18px 52px rgba(0,0,0,.7);

  color-scheme: dark;
}

/* ==========================================================================
   RESET
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:86px}
body{
  margin:0;
  font-family:var(--body);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  font-size:16px;
  overflow-x:hidden;
  transition:background-color .45s var(--ease), color .45s var(--ease);
}
img{max-width:100%;display:block}
h1,h2,h3,h4,h5{margin:0;font-family:var(--display);letter-spacing:-.03em;line-height:1.05}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--red-deep);color:#fff;
  padding:11px 18px;border-radius:8px;font-weight:700;font-size:14px;transition:top .2s}
.skip:focus{top:12px}

/* ==========================================================================
   SCROLL PROGRESS  (micro-interaction: red rule fills as you read)
   ========================================================================== */
.progress{
  position:fixed;top:0;left:0;height:3px;width:100%;z-index:120;
  background:var(--red);
  background:linear-gradient(90deg,
    var(--t-youth) 0%, var(--t-trip) 22%, var(--t-fundraiser) 42%,
    var(--t-serve) 62%, var(--t-outreach) 80%, var(--t-special) 100%);
  transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;pointer-events:none;
}

/* ==========================================================================
   HEADER  (condenses on scroll)
   ========================================================================== */
.hdr{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:saturate(1.7) blur(14px);
  -webkit-backdrop-filter:saturate(1.7) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.hdr.is-stuck{border-bottom-color:var(--line)}
.hdr-in{display:flex;align-items:center;gap:16px;height:var(--header-h);
  transition:height var(--dur) var(--ease)}
.hdr.is-stuck .hdr-in{height:58px}

.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
/* The real NS monogram, painted with currentColor via a mask so it flips
   black/white with the theme from a single file. Mask has ~98% support; the
   @supports block below swaps in two plain images everywhere else. */
.brand-mark{
  width:40px;height:31px;flex:none;
  background-color:currentColor;
  -webkit-mask:url(images/logo-mark-black.png) no-repeat center/contain;
          mask:url(images/logo-mark-black.png) no-repeat center/contain;
  transition:transform var(--dur) var(--ease-out-back);
}
@supports not ((-webkit-mask-image:url("#")) or (mask-image:url("#"))){
  .brand-mark{
    background-color:transparent;
    background:url(images/logo-mark-black.png) no-repeat center/contain;
  }
  [data-theme="dark"] .brand-mark{background-image:url(images/logo-mark-white.png)}
}
.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.08)}
.brand-txt{font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:-.035em;
  text-transform:uppercase;line-height:1;white-space:nowrap}
.brand-txt em{font-style:normal;color:var(--red);display:block;font-size:9.5px;
  letter-spacing:.16em;font-weight:700;margin-top:2px}

.nav{display:flex;gap:2px;margin-left:auto;align-items:center}
.nav a{
  position:relative;text-decoration:none;font-size:14px;font-weight:600;
  padding:8px 13px;border-radius:8px;color:var(--text-2);
  transition:color .2s var(--ease), background-color .2s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px;
  background:var(--red);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .3s var(--ease);
}
.nav a:hover{color:var(--text)}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}
.nav a.is-active{color:var(--text)}
@media(max-width:820px){ .nav{display:none} }

/* --- header Instagram ------------------------------------------------------
   Sits outside .nav on purpose. The nav collapses below 820px, and Instagram
   is the channel a student is most likely to actually want — it should not
   disappear on the phones this site is mostly read on. */
.hdr-ig{
  display:grid;place-items:center;flex:none;
  width:36px;height:36px;border-radius:9px;margin-left:8px;
  color:var(--text-2);
  transition:color .2s var(--ease), background-color .2s var(--ease),
             transform .25s var(--ease-out-back);
}
.hdr-ig:hover{color:var(--text);background:var(--bg-2);transform:translateY(-2px)}
.hdr-ig svg{width:19px;height:19px}
/* nav is hidden here, so this becomes the element that pushes the group right */
@media(max-width:820px){ .hdr-ig{margin-left:auto} }

/* --- theme toggle --------------------------------------------------------- */
.theme{
  margin-left:8px;display:flex;align-items:center;gap:7px;flex:none;
  border:1px solid var(--line);border-radius:99px;padding:5px 12px 5px 7px;
  font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--text-2);
  transition:border-color .2s,color .2s,background-color .2s;
  white-space:nowrap;
}
.theme:hover{border-color:var(--line-2);color:var(--text);background:var(--bg-2)}
.theme svg{width:16px;height:16px;flex:none;overflow:visible}
.theme .ic-sun,.theme .ic-moon,.theme .ic-auto{
  transition:opacity .28s var(--ease), transform .4s var(--ease-out-back);
  transform-origin:center;
}
/* only one icon shows at a time, they cross-fade + rotate */
.theme[data-mode="auto"]  .ic-sun,
.theme[data-mode="auto"]  .ic-moon,
.theme[data-mode="light"] .ic-auto,
.theme[data-mode="light"] .ic-moon,
.theme[data-mode="dark"]  .ic-auto,
.theme[data-mode="dark"]  .ic-sun{opacity:0;transform:rotate(-90deg) scale(.4);position:absolute}
.theme-ic{position:relative;width:16px;height:16px;display:grid;place-items:center}
.theme-ic svg{position:absolute}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-size:14.5px;font-weight:700;letter-spacing:-.005em;
  padding:13px 24px;border-radius:10px;text-decoration:none;
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .18s var(--ease), box-shadow .25s var(--ease),
             background-color .25s var(--ease), color .25s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--text);opacity:0;transition:opacity .25s var(--ease);
}
.btn:active{transform:translateY(1px) scale(.985)}

.btn-solid{background:var(--red-deep);color:#fff;box-shadow:0 4px 14px var(--red-glow)}
.btn-solid:hover{box-shadow:0 8px 26px var(--red-glow);transform:translateY(-2px)}

.btn-ghost{box-shadow:inset 0 0 0 1.6px var(--text);color:var(--text)}
.btn-ghost:hover{background:var(--text);color:var(--bg);transform:translateY(-2px)}

.btn-quiet{background:var(--bg-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
.btn-quiet:hover{background:var(--bg-3)}

/* Check-in gets its own treatment rather than being a third identical ghost
   button — students walking past check-in is the actual problem it exists to
   solve, so it needs to read as a distinct action, not more chrome. */
/* Background stays transparent on purpose. A red-tinted fill dropped the label
   to 4.16:1 — under the 4.5 needed for 14.5px bold — because the tint lifts the
   background toward the text colour. Outline only keeps it at 4.81 light /
   5.51 dark while still reading as a distinct accent button. */
.btn-checkin{
  background:transparent;color:var(--red-deep);
  box-shadow:inset 0 0 0 1.6px var(--red-deep);
}
[data-theme="dark"] .btn-checkin{color:var(--red);box-shadow:inset 0 0 0 1.6px var(--red)}
.btn-checkin:hover{background:var(--red-deep);color:#fff;transform:translateY(-2px);
  box-shadow:inset 0 0 0 1.6px var(--red-deep), 0 8px 22px var(--red-glow)}
[data-theme="dark"] .btn-checkin:hover{color:#fff}

.btn-sm{font-size:13px;padding:9px 16px;border-radius:8px}

/* the check that swaps in after "add to calendar" */
.btn .done{display:none;align-items:center;gap:7px}
.btn.is-done .lbl{display:none}
.btn.is-done .done{display:inline-flex}
.btn.is-done{background:var(--text);color:var(--bg);box-shadow:none}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;overflow:hidden;
  padding:clamp(52px,9vw,104px) 0 clamp(48px,7vw,84px);
  border-bottom:1px solid var(--line);
}
/* cursor-following red glow — desktop only, disabled for reduced motion */
.hero-glow{
  position:absolute;width:640px;height:640px;border-radius:50%;
  left:0;top:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle, var(--red-glow) 0%, transparent 68%);
  transition:opacity .6s var(--ease);
  will-change:transform;
}
.hero-in{position:relative;display:grid;gap:clamp(34px,5vw,60px);align-items:center}
@media(min-width:940px){ .hero-in{grid-template-columns:1.08fr .92fr} }

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  color:var(--red);margin-bottom:18px;
}
.eyebrow::before{
  content:"";width:26px;height:2px;flex:none;border-radius:2px;
  background:var(--red);
  background:linear-gradient(90deg, var(--t-youth), var(--t-special));
}

.hero h1{
  font-size:clamp(46px,9.2vw,92px);font-weight:800;letter-spacing:-.042em;
  text-transform:uppercase;line-height:.93;margin-bottom:20px;
}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln > span{display:block}
.hero-sub{font-size:clamp(16px,2vw,19px);color:var(--text-2);max-width:40ch;margin-bottom:26px}

.meta-row{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:30px}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:600;padding:8px 15px;border-radius:99px;
  background:var(--bg-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line);
}
.pill b{font-weight:800}
.pill i{width:6px;height:6px;border-radius:50%;background:var(--red);flex:none;font-style:normal}

.hero-cta{display:flex;flex-wrap:wrap;gap:12px}

/* ==========================================================================
   NEXT-UP CARD  (the hero's right side)
   ========================================================================== */
.nextup{
  background:var(--inverse-bg);color:var(--inverse-tx);
  border-radius:var(--radius);padding:28px;position:relative;overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.nextup::after{
  content:"";position:absolute;top:0;right:0;width:150px;height:150px;
  background:radial-gradient(circle at 100% 0, var(--red-glow), transparent 70%);
  pointer-events:none;
}
.nextup-lbl{
  font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--inverse-accent);margin-bottom:16px;display:flex;align-items:center;gap:8px;
}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--inverse-accent);flex:none;
  animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{
  0%,100%{opacity:1;box-shadow:0 0 0 0 var(--red-glow)}
  50%{opacity:.65;box-shadow:0 0 0 7px transparent}
}
.nextup h3{font-size:clamp(26px,3.6vw,34px);font-weight:800;letter-spacing:-.035em;
  text-transform:uppercase;margin-bottom:10px}
.nextup .when{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--inverse-accent);margin-bottom:6px}
.nextup .where{font-size:14px;opacity:.72;margin-bottom:20px}

/* live countdown */
.countdown{display:flex;gap:8px;margin-bottom:22px}
.cd-unit{
  background:rgba(128,128,128,.16);border-radius:10px;padding:10px 6px;
  text-align:center;min-width:60px;flex:1;
}
.cd-num{font-family:var(--display);font-size:24px;font-weight:800;letter-spacing:-.04em;
  line-height:1;display:block;font-variant-numeric:tabular-nums}
/* the digit that just changed rolls up into place */
.cd-num.is-rolling{animation:digitRoll .42s var(--ease)}
@keyframes digitRoll{
  0%  {transform:translateY(60%);opacity:0}
  60% {opacity:1}
  100%{transform:none;opacity:1}
}
.cd-lbl{font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  opacity:.6;margin-top:5px;display:block}
.nextup-cta{display:flex;flex-wrap:wrap;gap:10px}
.nextup .btn-ghost{box-shadow:inset 0 0 0 1.6px currentColor;color:var(--inverse-tx)}
.nextup .btn-ghost:hover{background:var(--inverse-tx);color:var(--inverse-bg)}

/* ==========================================================================
   TICKER
   ========================================================================== */
.ticker{
  background:var(--red-deep);color:#fff;overflow:hidden;
  padding:11px 0;border-bottom:1px solid var(--line);
}
.ticker-track{display:flex;width:max-content;animation:slide 34s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker span{
  font-family:var(--display);font-size:14px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;padding:0 22px;display:flex;align-items:center;gap:22px;
  white-space:nowrap;
}
.ticker span::after{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;
  opacity:.55;flex:none}
@keyframes slide{ to{ transform:translateX(-50%) } }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.sec{padding:clamp(56px,8vw,96px) 0}
.sec-alt{background:var(--bg-2)}
.sec-head{max-width:620px;margin-bottom:38px}
.sec-head h2{font-size:clamp(30px,4.6vw,46px);font-weight:800;letter-spacing:-.038em;
  text-transform:uppercase;margin-bottom:14px}
.sec-head p{color:var(--text-2);font-size:16.5px}

/* --- recurring / weekly rhythm ------------------------------------------- */
.rhythm{display:grid;gap:16px}
@media(min-width:720px){ .rhythm{grid-template-columns:1fr 1fr} }
.rcard{
  background:var(--surface);border-radius:var(--radius);padding:26px;
  box-shadow:inset 0 0 0 1px var(--line);position:relative;overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.rcard::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--red);
  transform:scaleY(0);transform-origin:50% 0;transition:transform .38s var(--ease);
}
.rcard:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow)}
.rcard:hover::before{transform:scaleY(1)}
.rcard .grade{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red);margin-bottom:9px}
.rcard h3{font-size:25px;font-weight:800;letter-spacing:-.03em;text-transform:uppercase;
  margin-bottom:12px}
.rcard .rw{display:flex;align-items:baseline;gap:9px;font-size:15px;margin-bottom:4px}
.rcard .rw b{font-weight:700}
.rcard .rw span{color:var(--text-2)}
.rcard .note{font-size:13.5px;color:var(--text-3);margin-top:12px;padding-top:12px;
  border-top:1px solid var(--line)}

/* ==========================================================================
   EVENTS
   ========================================================================== */

/* Anything carrying data-type gets --accent set once, here. Every component
   below just reads var(--accent) and stops caring what kind of event it is. */
[data-type]                { --accent: var(--red);            --accent-ink: var(--red-deep) }
[data-type="youth-night"]  { --accent: var(--t-youth);         --accent-ink: var(--t-youth-ink) }
[data-type="high-school"]  { --accent: var(--t-highschool);    --accent-ink: var(--t-highschool-ink) }
[data-type="special"]      { --accent: var(--t-special);       --accent-ink: var(--t-special-ink) }
[data-type="outreach"]     { --accent: var(--t-outreach);      --accent-ink: var(--t-outreach-ink) }
[data-type="serve"]        { --accent: var(--t-serve);         --accent-ink: var(--t-serve-ink) }
[data-type="trip"]         { --accent: var(--t-trip);          --accent-ink: var(--t-trip-ink) }
[data-type="fundraiser"]   { --accent: var(--t-fundraiser);    --accent-ink: var(--t-fundraiser-ink) }
.ev-bar{display:flex;flex-wrap:wrap;gap:16px;align-items:center;
  justify-content:space-between;margin-bottom:26px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  font-size:12.5px;font-weight:700;padding:8px 15px;border-radius:99px;
  background:var(--bg);color:var(--text-2);box-shadow:inset 0 0 0 1px var(--line);
  transition:color .22s var(--ease), box-shadow .22s var(--ease),
             background-color .22s var(--ease), transform .22s var(--ease-out-back);
}
.sec-alt .chip{background:var(--surface)}
.chip:hover{color:var(--text);transform:translateY(-2px)}
.chip.is-on{background:var(--text);color:var(--bg);box-shadow:none}
/* An active type filter wears its own colour, so the filter and the events
   it produced are visibly the same thing. --bg flips the label light/dark
   with the theme, which is what keeps it readable in both. */
.chip[data-type].is-on{background:var(--accent-ink);color:var(--bg)}
.chip .n{opacity:.55;margin-left:5px;font-variant-numeric:tabular-nums}

.view-tog{display:flex;background:var(--bg-3);border-radius:99px;padding:4px;gap:2px;flex:none}
.view-tog button{
  font-size:12.5px;font-weight:700;padding:7px 16px;border-radius:99px;color:var(--text-3);
  transition:color .22s,background-color .22s;
}
.view-tog button.is-on{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}

/* --- event list ---------------------------------------------------------- */
.ev-list{display:grid;gap:12px}
.ev{
  display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;
  background:var(--surface);border-radius:var(--radius);padding:18px 22px;
  box-shadow:inset 0 0 0 1px var(--line);position:relative;overflow:hidden;
  text-align:left;width:100%;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease);
}
.ev::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--accent, var(--red));
  transform:scaleY(0);transform-origin:50% 0;transition:transform .34s var(--ease);
}
.ev:hover{transform:translateX(4px);box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow)}
.ev:hover::before{transform:scaleY(1)}
.ev.is-open{box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow)}
.ev.is-open::before{transform:scaleY(1)}

.ev-date{
  display:block;text-align:center;flex:none;min-width:58px;
  border-right:1px solid var(--line);padding-right:18px;
}
.ev-mo{font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent-ink, var(--red-deep));display:block}
.ev-dy{font-family:var(--display);font-size:30px;font-weight:800;letter-spacing:-.05em;
  line-height:1.05;display:block;font-variant-numeric:tabular-nums}
.ev-wd{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-3);display:block}

.ev-body{display:block;min-width:0}
.ev-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:7px}
.tag{
  font-size:9.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  padding:4px 9px;border-radius:4px;
  background:var(--red-soft);color:var(--red-deep);                   /* fallback */
  background:color-mix(in srgb, var(--accent, var(--red)) 12%, transparent);
  color:var(--accent-ink, var(--red-deep));
}
.tag.slip{background:var(--bg-3);color:var(--text-2)}
.tag.cost{background:var(--bg-3);color:var(--text-2)}
.ev h3,.ev-title{display:block;font-family:var(--display);font-size:20px;font-weight:800;
  letter-spacing:-.028em;margin-bottom:5px;line-height:1.15}
.ev .line{font-size:13.5px;color:var(--text-2);display:flex;flex-wrap:wrap;gap:5px 14px}
/* --- collapsed weekly series ---------------------------------------------- */
.ev-next{color:var(--accent-ink, var(--red-deep));font-weight:700}
.series-dates{margin:0 0 16px}
.series-lbl{font-size:12.5px;font-weight:700;color:var(--text-2);margin:0 0 9px}
.series-chips{display:flex;flex-wrap:wrap;gap:6px}
.series-chip{
  font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:99px;
  background:var(--bg);color:var(--text-2);box-shadow:inset 0 0 0 1px var(--line);
  white-space:nowrap;
}
.sec-alt .series-chip{background:var(--surface)}

.ev-chev{
  flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg-2);color:var(--text-2);
  transition:transform .34s var(--ease), background-color .22s, color .22s;
}
.ev:hover .ev-chev{background:var(--accent, var(--red));color:#fff}
.ev.is-open .ev-chev{transform:rotate(180deg);background:var(--accent, var(--red));color:#fff}

/* expanding detail panel */
.ev-detail{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .42s var(--ease);
  background:var(--bg-2);border-radius:0 0 var(--radius) var(--radius);
  margin-top:-8px;
}
.ev-detail.is-open{grid-template-rows:1fr}
.ev-detail > div{overflow:hidden}
.ev-detail-in{padding:22px 22px 22px 98px}
@media(max-width:640px){ .ev-detail-in{padding:20px} }
.ev-detail p{font-size:14.5px;color:var(--text-2);margin-bottom:14px;max-width:62ch}
.ev-facts{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:16px}
.fact{font-size:12.5px;background:var(--surface);padding:7px 13px;border-radius:8px;
  box-shadow:inset 0 0 0 1px var(--line)}
.fact b{font-weight:700}
.ev-acts{display:flex;flex-wrap:wrap;gap:9px}

@media(max-width:640px){
  .ev{grid-template-columns:auto 1fr;gap:14px;padding:16px}
  .ev-chev{display:none}
  .ev-date{min-width:48px;padding-right:14px}
  .ev-dy{font-size:25px}
}

/* --- date-not-set events --------------------------------------------------
   Deliberately understated next to the dated list above it -- no date tile,
   no hover-slide, no accent bar. The visual language is "this is real, just
   not pinned to a day yet," not "here's another event to plan around." */
.tbd-wrap{margin-top:34px;padding-top:26px;border-top:1px dashed var(--line)}
.tbd-lbl{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:14px}
.tbd-grid{display:grid;gap:12px}
@media(min-width:640px){ .tbd-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))} }
.tbd-card{
  background:var(--surface);border-radius:var(--radius-sm);padding:16px 18px;
  box-shadow:inset 0 0 0 1px var(--line);
}
.tbd-card h4{font-size:16px;font-weight:800;letter-spacing:-.02em;
  margin:9px 0 3px;color:var(--text)}
.tbd-when{font-size:12.5px;font-weight:700;color:var(--accent-ink, var(--red-deep));margin-bottom:6px}
.tbd-desc{font-size:13.5px;color:var(--text-2);margin:0}

/* ==========================================================================
   FUNDRAISER TILE
   Sits between the events and the footer. Deliberately warmer and more
   inviting than an event row — it's an ask, not a listing — but it uses the
   fundraiser accent already in the type palette so it stays in the family.
   ========================================================================== */
.fund-sec{padding-top:0}
.fund{
  display:grid;gap:22px;align-items:center;
  background:var(--surface);border-radius:var(--radius);padding:clamp(22px,4vw,32px);
  box-shadow:inset 0 0 0 1px var(--line);position:relative;overflow:hidden;
}
@media(min-width:760px){ .fund{grid-template-columns:1fr auto} }
/* accent bar down the leading edge, matching the event-row language */
.fund::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--accent, var(--red));
}
.fund-eyebrow{
  font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent-ink, var(--red-deep));margin-bottom:10px;
}
.fund-title{
  font-family:var(--display);font-size:clamp(22px,3.4vw,30px);font-weight:800;
  letter-spacing:-.03em;margin-bottom:8px;
}
.fund-for{font-size:16px;font-weight:600;color:var(--text);margin-bottom:8px}
.fund-desc{font-size:14.5px;color:var(--text-2);max-width:60ch;margin:0}
.fund-action{display:grid;gap:10px;justify-items:start}
@media(min-width:760px){ .fund-action{justify-items:end;text-align:right} }
.fund-memo{font-size:12.5px;color:var(--text-3);max-width:30ch;margin:0}

.empty{
  text-align:center;padding:52px 20px;color:var(--text-3);
  background:var(--surface);border-radius:var(--radius);
  box-shadow:inset 0 0 0 1px var(--line);
}
.empty b{display:block;font-family:var(--display);font-size:19px;color:var(--text);
  margin-bottom:6px;letter-spacing:-.02em}

/* --- calendar view -------------------------------------------------------- */
.cal{background:var(--surface);border-radius:var(--radius);padding:22px;
  box-shadow:inset 0 0 0 1px var(--line)}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.cal-head h3{font-size:22px;font-weight:800;letter-spacing:-.03em;text-transform:uppercase}
.cal-nav{display:flex;gap:7px}
.cal-nav button{
  width:36px;height:36px;border-radius:9px;display:grid;place-items:center;
  background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line);
  transition:background-color .2s,transform .2s var(--ease-out-back);
}
.cal-nav button:hover{background:var(--bg-3);transform:scale(1.06)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-dow{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);text-align:center;padding:6px 0}
.cal-cell{
  aspect-ratio:1;border-radius:9px;padding:6px;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  font-size:13px;color:var(--text-2);overflow:hidden;
  transition:background-color .2s var(--ease);
}
.cal-num{line-height:1.2}
.cal-cell.pad{opacity:.28}
.cal-cell.today{box-shadow:inset 0 0 0 1.6px var(--text)}
.cal-cell.has{background:var(--red-soft);color:var(--text);font-weight:700;cursor:pointer}
.cal-cell.has:hover{background:var(--red);color:#fff}
.cal-dots{display:flex;gap:3px;margin-top:3px;flex-wrap:wrap;justify-content:center}
.cal-dot{width:5px;height:5px;border-radius:50%;background:var(--accent, var(--red))}
.cal-cell.has:hover .cal-dot{background:#fff}

/* Event titles inside the grid. Hidden by default — below ~700px a cell is
   under 90px wide and a title is unreadable, so the dots carry it there and
   the month list underneath does the explaining. */
.cal-ev{display:none}
@media(min-width:700px){
  .cal-cell{aspect-ratio:auto;min-height:82px;align-items:stretch;justify-content:flex-start;gap:3px}
  .cal-num{text-align:left;padding-left:2px}
  .cal-dots{display:none}
  .cal-ev{
    display:block;font-size:10px;font-weight:700;line-height:1.25;
    padding:2px 5px;border-radius:4px;text-align:left;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    background:color-mix(in srgb, var(--accent, var(--red)) 18%, transparent);
    color:var(--accent-ink, var(--red-deep));
  }
  .cal-cell.has:hover .cal-ev{background:rgba(255,255,255,.22);color:#fff}
}

/* Month list — always present, always spells out what's on. This is what
   makes the calendar usable on a phone. */
.cal-list{
  display:grid;gap:6px;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--line);
}
.cal-li{
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  width:100%;text-align:left;padding:9px 12px;border-radius:9px;
  background:var(--bg-2);cursor:pointer;
  transition:background-color .2s var(--ease), transform .2s var(--ease);
}
.sec-alt .cal-li{background:var(--bg)}
.cal-li:hover{transform:translateX(3px);background:var(--bg-3)}
.cal-li-date{
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent-ink, var(--red-deep));min-width:52px;
}
.cal-li-title{font-size:14.5px;font-weight:700;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-li-time{font-size:12.5px;color:var(--text-3);white-space:nowrap}
.cal-none{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  color:var(--text-3);font-size:14px}
.cal-anim{animation:calIn .34s var(--ease)}
@keyframes calIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* ==========================================================================
   ACCORDION  (First time?)
   ========================================================================== */
.acc{display:grid;gap:10px;max-width:780px}
.acc-item{background:var(--surface);border-radius:var(--radius-sm);
  box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.acc-btn{
  width:100%;display:flex;align-items:center;gap:14px;padding:18px 20px;text-align:left;
  font-family:var(--display);font-size:17.5px;font-weight:700;letter-spacing:-.02em;
  transition:background-color .2s var(--ease);
}
.acc-btn:hover{background:var(--bg-2)}
.acc-btn .ix{
  flex:none;width:26px;height:26px;border-radius:50%;background:var(--red-soft);color:var(--red);
  display:grid;place-items:center;font-family:var(--body);font-size:12px;font-weight:800;
  transition:background-color .25s,color .25s;
}
.acc-item.is-open .acc-btn .ix{background:var(--red);color:#fff}
.acc-btn .pm{margin-left:auto;flex:none;transition:transform .34s var(--ease-out-back)}
.acc-item.is-open .pm{transform:rotate(135deg)}
.acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.acc-item.is-open .acc-panel{grid-template-rows:1fr}
.acc-panel > div{overflow:hidden}
.acc-panel p{padding:0 20px 20px 60px;color:var(--text-2);font-size:15px;max-width:64ch}
@media(max-width:560px){ .acc-panel p{padding-left:20px} }

/* ==========================================================================
   PARENTS
   ========================================================================== */
.par{display:grid;gap:18px}
@media(min-width:860px){ .par{grid-template-columns:1.15fr .85fr} }
.par-card{background:var(--surface);border-radius:var(--radius);padding:28px;
  box-shadow:inset 0 0 0 1px var(--line)}
.trust{display:grid;gap:14px;margin-bottom:6px}
.trust li{display:flex;gap:13px;align-items:flex-start;list-style:none}
.trust .ic{
  flex:none;width:30px;height:30px;border-radius:9px;background:var(--red-soft);color:var(--red);
  display:grid;place-items:center;
}
.trust b{display:block;font-size:15px;font-weight:700;margin-bottom:2px}
.trust span{font-size:14px;color:var(--text-2)}
.trust ul{margin:0;padding:0}

/* [CONFIRM] placeholders — loud on purpose so none of them ship by accident */
.trust li.todo{
  border:1.5px dashed var(--red);border-radius:var(--radius-sm);
  padding:13px;background:var(--red-soft);
}
.trust li.todo b{color:var(--red)}

.addr{font-size:15.5px;line-height:1.65;margin-bottom:16px}
.addr b{font-weight:700}
.copybtn{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;
  color:var(--red);transition:opacity .2s}
.copybtn:hover{opacity:.7}

/* ==========================================================================
   FORM
   ========================================================================== */
.form{display:grid;gap:14px;max-width:560px}
.field label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-2);margin-bottom:7px}
.field input,.field textarea{
  width:100%;font:inherit;font-size:15px;padding:13px 15px;border-radius:var(--radius-sm);
  background:var(--bg);color:var(--text);border:1.5px solid var(--line);
  transition:border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.sec-alt .field input,.sec-alt .field textarea{background:var(--surface)}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--red);box-shadow:0 0 0 4px var(--red-soft);
}
.field textarea{resize:vertical;min-height:118px}
.form-note{font-size:12.5px;color:var(--text-3);max-width:52ch}
.form-note a{color:var(--red)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ftr{background:var(--inverse-bg);color:var(--inverse-tx);padding:52px 0 30px;margin-top:0}

/* Brush lockup band. Line art on transparency, painted with currentColor via
   a mask so a single file reads correctly on a footer that inverts with the
   theme. No vignette, no scrim — those were for the photo that used to sit
   here; on flat artwork they'd just fog the strokes. */
.ftr-lockup{
  width:100%;max-width:560px;aspect-ratio:1496/961;
  margin:0 auto clamp(30px,4vw,46px);
  background-color:currentColor;
  -webkit-mask:url(images/lockup-tagline-black.png) no-repeat center/contain;
          mask:url(images/lockup-tagline-black.png) no-repeat center/contain;
}
@supports not ((-webkit-mask-image:url("#")) or (mask-image:url("#"))){
  .ftr-lockup{
    background-color:transparent;
    background:url(images/lockup-tagline-white.png) no-repeat center/contain;
  }
  [data-theme="dark"] .ftr-lockup{background-image:url(images/lockup-tagline-black.png)}
}
.ftr-in{display:grid;gap:30px}
@media(min-width:760px){ .ftr-in{grid-template-columns:1.4fr 1fr 1fr} }
.ftr h4{font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--inverse-accent);margin-bottom:14px}
.ftr a{text-decoration:none;opacity:.75;font-size:14.5px;display:block;margin-bottom:9px;
  transition:opacity .2s,transform .2s var(--ease)}
.ftr a:hover{opacity:1;transform:translateX(3px)}

/* Instagram — the handle reads as a handle, so it gets the glyph beside it
   rather than sitting in the list looking like another text link. */
.ftr-ig{display:inline-flex !important;align-items:center;gap:9px;font-weight:700;opacity:.9 !important}
.ftr-ig svg{width:19px;height:19px;flex:none}
.ftr-ig:hover{opacity:1 !important}
.ftr .big{font-family:var(--display);font-size:30px;font-weight:800;letter-spacing:-.038em;
  text-transform:uppercase;line-height:1;margin-bottom:12px}

/* The NS mark only, not the full lockup — the brush band above already spells
   out "NEW SOUL YOUTH", and running the wordmark twice in one footer reads as
   a stutter. Same currentColor mask, which matters here because the footer
   inverts with the theme. */
.ftr-logo{
  display:block;width:58px;aspect-ratio:908/700;margin:0 0 16px;
  background-color:currentColor;
  -webkit-mask:url(images/logo-mark-black.png) no-repeat left top/contain;
          mask:url(images/logo-mark-black.png) no-repeat left top/contain;
}
@supports not ((-webkit-mask-image:url("#")) or (mask-image:url("#"))){
  .ftr-logo{
    background-color:transparent;
    background:url(images/logo-mark-white.png) no-repeat left top/contain;
  }
  [data-theme="dark"] .ftr-logo{background-image:url(images/logo-mark-black.png)}
}
.ftr .tag-line{font-size:14px;opacity:.6;max-width:34ch}
.ftr-btm{margin-top:34px;padding-top:20px;border-top:1px solid rgba(128,128,128,.28);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-size:12.5px;opacity:.55}

/* ==========================================================================
   TOAST
   ========================================================================== */
.toast{
  position:fixed;left:50%;bottom:26px;z-index:300;
  transform:translate(-50%,120%);
  background:var(--text);color:var(--bg);
  padding:13px 22px;border-radius:99px;font-size:14px;font-weight:700;
  box-shadow:var(--shadow-lg);pointer-events:none;
  display:flex;align-items:center;gap:9px;max-width:calc(100vw - 32px);
  transition:transform .48s var(--ease-out-back), opacity .3s;
  opacity:0;
}
.toast.is-up{transform:translate(-50%,0);opacity:1}

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.rv{opacity:0;transform:translateY(22px);
  transition:opacity .62s var(--ease), transform .62s var(--ease)}
.rv.is-in{opacity:1;transform:none}
.rv-d1{transition-delay:.07s} .rv-d2{transition-delay:.14s} .rv-d3{transition-delay:.21s}

/* Per-row stagger for the event list. Set as a custom property from JS and
   capped there, so an 11-row list doesn't take a second and a half to finish
   arriving. */
.ev-item.rv{transition-delay:var(--rv-delay,0s)}

/* ==========================================================================
   ON-LOAD ENTRANCE
   The hero assembles instead of appearing all at once. Everything is a
   transform/opacity pair so it stays on the compositor.
   ========================================================================== */
@keyframes riseIn{ to{ transform:none } }
@keyframes fadeUp{ to{ opacity:1; transform:none } }
@keyframes markIn{ to{ opacity:1; transform:none } }

/* hero lines rise in on load */
.hero h1 .ln > span{transform:translateY(105%);animation:riseIn .85s var(--ease) forwards}
.hero h1 .ln:nth-child(2) > span{animation-delay:.09s}

/* the rest of the hero follows the headline up */
.hero .eyebrow,
.hero .hero-sub,
.hero .meta-row,
.hero .hero-cta{
  opacity:0;transform:translateY(14px);
  animation:fadeUp .7s var(--ease) forwards;
}
.hero .eyebrow  {animation-delay:.04s}
.hero .hero-sub {animation-delay:.30s}
.hero .meta-row {animation-delay:.38s}
.hero .hero-cta {animation-delay:.46s}

/* header mark settles in rather than snapping */
.brand-mark{opacity:0;transform:translateY(-6px) scale(.9);
  animation:markIn .6s var(--ease-out-back) .1s forwards}

/* ==========================================================================
   NEXT-UP CARD TILT
   The transform is composed from custom properties that initTilt() writes, so
   the card can keep its entrance animation and its tilt without the two
   fighting over the transform property.
   ========================================================================== */
/* The card also carries .rv, and `.rv.is-in{transform:none}` (0,2,0) outranks
   a bare `.nextup` (0,1,0) — it silently blanked the tilt. Rather than fight
   over the property, the reveal slide and the tilt live in ONE transform
   chain: the reveal drives --rv-y, the pointer drives --tilt-*. The #nextUp
   prefix (1,1,0) is what keeps it ahead of the .rv rules. */
#nextUp .nextup{
  transform:translateY(var(--rv-y,22px))
            perspective(900px)
            rotateX(var(--tilt-x,0deg))
            rotateY(var(--tilt-y,0deg));
  transition:transform .5s var(--ease), opacity .62s var(--ease);
  will-change:transform;
}
#nextUp .nextup.is-in{--rv-y:0px}
#nextUp.is-tilting .nextup{transition:transform .08s linear}

/* ==========================================================================
   FOOTER LOCKUP WIPE
   clip-path composes with the mask that paints the artwork, so the lettering
   can wipe on without touching the mask that gives it its shape.
   ========================================================================== */
.ftr-lockup.rv-wipe{
  opacity:1;transform:none;                 /* override .rv's fade/slide */
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.15s var(--ease);
}
.ftr-lockup.rv-wipe.is-in{clip-path:inset(0 0 0 0)}

/* ==========================================================================
   REDUCED MOTION — everything decorative stands still
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }

  /* Zeroing the durations above is NOT enough on its own. Anything whose
     resting state is hidden — opacity:0, a clipped-away clip-path — would
     simply stay hidden forever rather than "appearing instantly", because
     there's no animation left to move it to its visible state. Every
     hidden-by-default rule added above needs an explicit reset here. */
  .rv{opacity:1;transform:none}
  .hero h1 .ln > span{transform:none}

  .hero .eyebrow,
  .hero .hero-sub,
  .hero .meta-row,
  .hero .hero-cta{opacity:1;transform:none;animation:none}

  .brand-mark{opacity:1;transform:none;animation:none}

  .ftr-lockup.rv-wipe,
  .ftr-lockup.rv-wipe.is-in{clip-path:none}

  /* tilt is also disabled in JS via the reduceMotion flag; this covers the
     case where the preference changes after load without a reload.
     Needs the #nextUp prefix to outrank the tilt rule's specificity. */
  #nextUp .nextup{transform:none}

  .ticker-track{animation:none}
  .hero-glow{display:none}
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print{
  .hdr,.progress,.ticker,.hero-glow,.toast,.view-tog,.chips,.skip{display:none !important}
  body{background:#fff;color:#000}
  .sec{padding:18px 0;break-inside:avoid}
  .ev{box-shadow:none;border-bottom:1px solid #ccc;border-radius:0}
}