/* ============================================================
   TOKENS — mirrors tokens.json in the design system.
   In the real build these come from one generated tokens.css
   shared by site, admin and email templates.
   ============================================================ */
:root[data-theme="dark"], [data-theme="dark"]{
  --indigo-50:#EFEFFD;--indigo-100:#DFDEF9;--indigo-200:#C1C1F0;--indigo-300:#9F9EE3;--indigo-400:#8585D6;
  --indigo-500:#6C6DCB;--indigo-600:#4847BD;--indigo-700:#373798;--indigo-800:#28276D;--indigo-900:#1A1945;--indigo-950:#11102A;
  --slate-200:#E4E4E7;--slate-300:#CBCBD2;--slate-400:#A8A8B3;--slate-500:#848494;--slate-600:#686878;--slate-900:#25252D;
  --white:#FFFFFF;
  --surface-page:#11102A; --surface-100:#1A1945; --surface-raised:#201F51; --surface-overlay:#27265E;
  --ink:#FFFFFF; --text-secondary:#CBCBD2; --text-tertiary:#A8A8B3; --text-on-fill:#FFFFFF;
  --link:#C1C1F0; --border-default:#39396A; --border-input:#A8A8B3; --focus-ring:#9F9EE3;
  --success-text:#47D18A; --success-surface:#1C402D; --success-border:#317251;
  --warning-text:#D19F47; --warning-surface:#40331C; --warning-border:#725A31;
  --error-text:#DC727B;   --error-surface:#401C1F;   --error-border:#723136;
  --info-text:#5AA2D6;    --info-surface:#1C3140;    --info-border:#315772;
  --track:#39396A;
}
:root[data-theme="light"], [data-theme="light"]{
  --indigo-50:#EFEFFD;--indigo-100:#DFDEF9;--indigo-200:#C1C1F0;--indigo-300:#9F9EE3;--indigo-400:#8585D6;
  --indigo-500:#6C6DCB;--indigo-600:#4847BD;--indigo-700:#373798;--indigo-800:#28276D;--indigo-900:#1A1945;--indigo-950:#11102A;
  --slate-200:#E4E4E7;--slate-300:#CBCBD2;--slate-400:#A8A8B3;--slate-500:#848494;--slate-600:#686878;--slate-900:#25252D;
  --white:#FFFFFF;
  --surface-page:#F6F6FA; --surface-100:#FFFFFF; --surface-raised:#FFFFFF; --surface-overlay:#FFFFFF;
  --ink:#25252D; --text-secondary:#686878; --text-tertiary:#848494; --text-on-fill:#FFFFFF;
  --link:#4847BD; --border-default:#E4E4E7; --border-input:#848494; --focus-ring:#4847BD;
  --success-text:#1D7C4B; --success-surface:#EAFBF2; --success-border:#ABE3C6;
  --warning-text:#8C6521; --warning-surface:#FBF4EA; --warning-border:#E3CEAB;
  --error-text:#BA2C37;   --error-surface:#FBEAEB;   --error-border:#E3ABB0;
  --info-text:#266FA3;    --info-surface:#EAF4FB;    --info-border:#ABCCE3;
  --track:#E4E4E7;
}
:root{
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;
  --radius-sm:2px;--radius-md:4px;--radius-lg:8px;
  --duration-fast:120ms;--duration-base:180ms;--duration-slow:280ms;
  --ease-out-snap:cubic-bezier(0.2,0,0,1);
}

/* ============================================================
   BASE
   ============================================================ */
*{box-sizing:border-box;}
[hidden]{display:none !important;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--surface-page); color:var(--ink);
  -webkit-font-smoothing:antialiased; font-size:16px; line-height:1.5;
}
a{color:var(--link);}
img{max-width:100%;}
h1,h2,h3,h4{font-family:'Big Shoulders Display','Inter',sans-serif;font-weight:900;text-transform:uppercase;margin:0;line-height:.95;}
:focus-visible{outline:3px solid var(--focus-ring); outline-offset:2px;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}

/* motifs */
.slant{ clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%); }
.slant-sm{ clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%); }
.stripes{ display:inline-flex; gap:5px; align-items:center; }
.stripes span{ display:block; width:26px; height:3px; transform:skewX(-18deg); background:var(--indigo-500); }
.stripes span:last-child{ background:var(--border-input); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:'Inter',sans-serif;font-weight:600;font-size:15px;line-height:1;
  padding:15px 28px;min-height:48px;border-radius:var(--radius-md);border:2px solid transparent;
  cursor:pointer;text-decoration:none;transition:background var(--duration-fast) var(--ease-out-snap),color var(--duration-fast) var(--ease-out-snap),border-color var(--duration-fast) var(--ease-out-snap);
}
.btn--primary{ background:var(--indigo-500); color:var(--indigo-950); }
.btn--primary:hover{ background:var(--indigo-400); }
.btn--secondary{ background:transparent; color:var(--ink); border-color:var(--border-input); }
.btn--secondary:hover{ border-color:var(--ink); }
.btn--ghost{ background:transparent; color:var(--link); padding-left:var(--space-3); padding-right:var(--space-3); }
.btn--ghost:hover{ background:var(--surface-overlay); }
.btn--sm{ min-height:40px; padding:11px 18px; font-size:14px; }
.btn--full{ width:100%; }
.btn[disabled], .btn[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-3) var(--space-8);
  background:var(--indigo-900); color:var(--text-on-fill);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.site-header__logo{ height:42px; width:auto; display:block; }
.site-header__icon{ height:36px; width:auto; display:none; }
.site-nav{ display:flex;align-items:center;gap:var(--space-8); }
.site-nav a{ color:var(--text-on-fill); opacity:.85; text-decoration:none; font-weight:600; font-size:15px; }
.site-nav a:hover{ opacity:1; }
.menu-btn{ display:none; background:transparent;border:0;color:var(--text-on-fill);font-size:22px;cursor:pointer;padding:8px 10px;line-height:1; }
.mobile-menu{ display:none; background:var(--indigo-950); padding:var(--space-4) var(--space-6) var(--space-6); flex-direction:column; gap:var(--space-4); }
.mobile-menu[data-open="true"]{ display:flex; }
.mobile-menu a{ color:var(--text-on-fill); text-decoration:none; font-weight:600; }

/* ============================================================
   LAYOUT
   ============================================================ */
.section{ padding:var(--space-16) var(--space-8) 88px; }
section[id], .event{ scroll-margin-top:84px; }
.section-inner{ max-width:1160px; margin:0 auto; }
.section-head{ margin-bottom:var(--space-12); max-width:62ch; }
.eyebrow{ font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-tertiary);margin:0 0 var(--space-3); }
.section-title{ font-size:clamp(34px,4.4vw,48px); }
.section-lede{ font-size:18px;line-height:1.6;color:var(--text-secondary);margin:var(--space-4) 0 0;max-width:56ch; }

/* HERO */
.hero{ padding:88px var(--space-8) 96px; background:var(--surface-page); }
.hero-inner{ max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1.15fr .85fr;gap:var(--space-16);align-items:center; }
.headline{ font-size:clamp(40px,5.6vw,74px); line-height:.92; letter-spacing:-.01em; margin:0 0 var(--space-6); }
.headline em{ font-style:italic; color:var(--indigo-300); }
[data-theme="light"] .headline em{ color:var(--indigo-600); }
.pitch{ font-size:19px;line-height:1.6;color:var(--text-secondary);max-width:46ch;margin:0 0 var(--space-8); }
.cta-row{ display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center; }
.hero-note{ margin:var(--space-6) 0 0; font-size:14px; color:var(--text-tertiary); }

/* CARD */
.card{
  background:var(--surface-raised); border:1px solid var(--border-default);
  border-radius:var(--radius-lg); padding:var(--space-6);
}
.card--flat{ border-radius:var(--radius-md); }
.k{ font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-tertiary);margin:0 0 var(--space-2); }
.event-meta{ font-size:14px;color:var(--text-secondary);margin:0 0 var(--space-4);display:flex;flex-direction:column;gap:var(--space-1); }

/* TAGS */
.tag{ display:inline-flex;align-items:center;padding:5px 12px;border-radius:var(--radius-sm);font-weight:600;font-size:13px;border:1px solid transparent;white-space:nowrap; }
.tag--warning{ background:var(--warning-surface);color:var(--warning-text);border-color:var(--warning-border); }
.tag--success{ background:var(--success-surface);color:var(--success-text);border-color:var(--success-border); }
.tag--error{ background:var(--error-surface);color:var(--error-text);border-color:var(--error-border); }
.tag--info{ background:var(--info-surface);color:var(--info-text);border-color:var(--info-border); }
.tag--neutral{ background:transparent;color:var(--text-secondary);border-color:var(--border-default); }

/* WHAT WE DO */
.cards3{ display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-8); }
.wwd-card{ position:relative;border-radius:var(--radius-md);padding:var(--space-8) var(--space-6) var(--space-6);overflow:hidden;background:var(--surface-raised);border:1px solid var(--border-default); }
.wwd-num{ font-family:'Big Shoulders Display',sans-serif;font-weight:900;font-size:96px;line-height:1;position:absolute;top:-10px;right:12px;z-index:0;color:var(--indigo-500);opacity:.18; }
.wwd-card h3{ font-size:26px;margin:0 0 var(--space-3);position:relative;z-index:1; }
.wwd-card p{ font-size:15px;line-height:1.6;color:var(--text-secondary);margin:0;position:relative;z-index:1; }

/* WHY IT MATTERS */
.stat-row{ display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-8);margin-bottom:var(--space-12); }
.stat{ border-left:3px solid var(--indigo-500);padding-left:var(--space-4); }
.stat .n{ font-family:'Big Shoulders Display',sans-serif;font-weight:900;font-size:56px;line-height:1;color:var(--ink);display:block; }
.stat .t{ font-size:14px;line-height:1.5;color:var(--text-secondary);margin-top:var(--space-2);display:block; }
.prose p{ font-size:17px;line-height:1.7;color:var(--text-secondary);max-width:64ch; }
.prose p strong{ color:var(--ink); }
.source-note{ font-size:13px;color:var(--text-tertiary);margin-top:var(--space-6);max-width:64ch; }
.source-note a{ color:var(--link); }

/* ============================================================
   EVENTS / SLOTS  (the centerpiece)
   ============================================================ */
.events{ display:flex;flex-direction:column;gap:var(--space-8); }
.event{ background:var(--surface-100);border:1px solid var(--border-default);border-radius:var(--radius-lg);overflow:hidden; }
[data-theme="light"] .event{ background:var(--white); }
.event__head{ padding:var(--space-6) var(--space-6) var(--space-4);border-bottom:1px solid var(--border-default);display:flex;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap;align-items:flex-start; }
.event__title{ font-size:32px;margin:0 0 var(--space-2); }
.event__desc{ font-size:15px;color:var(--text-secondary);margin:var(--space-3) 0 0;max-width:60ch; }
.roles{ list-style:none;margin:0;padding:0; }
.role{ border-bottom:1px solid var(--border-default); }
.role:last-child{ border-bottom:0; }
.role__row{ display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-6);flex-wrap:wrap; }
.role__main{ flex:1 1 260px;min-width:0; }
.role__name{ font-weight:600;font-size:16px;margin:0 0 var(--space-2);color:var(--ink); }
.role__names{ font-size:13px;color:var(--text-tertiary);margin:var(--space-2) 0 0; }
.slot-progress{ display:flex;gap:4px;align-items:center; }
.slot-progress span:not(.slot-count){ display:block;width:26px;height:8px;border-radius:1px;background:var(--track);transform:skewX(-18deg);flex:0 0 auto; }
.slot-progress span:not(.slot-count)[data-filled="true"]{ background:var(--indigo-500); }
.slot-count{ display:inline-block;font-size:13px;color:var(--text-secondary);margin-left:var(--space-3);white-space:nowrap;transform:none;width:auto;height:auto;background:none; }
.role__cta{ flex:0 0 auto; }

/* inline signup form inside a role */
.claim{ display:none;padding:0 var(--space-6) var(--space-6); }
.role[data-open="true"] .claim{ display:block; }
.claim__inner{ background:var(--surface-raised);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:var(--space-6); }
[data-theme="light"] .claim__inner{ background:var(--surface-page); }
.field{ margin-bottom:var(--space-4); }
.field label{ display:block;font-weight:600;font-size:14px;margin-bottom:var(--space-2);color:var(--ink); }
.field .hint{ font-weight:400;color:var(--text-tertiary); }
.input{
  width:100%;font-family:inherit;font-size:16px;padding:13px var(--space-4);
  background:transparent;color:var(--ink);border:1px solid var(--border-input);border-radius:var(--radius-md);min-height:48px;
}
.input::placeholder{ color:var(--text-tertiary); }
.input[aria-invalid="true"]{ border-color:var(--error-text);border-width:2px; }
.err{ display:none;color:var(--error-text);font-size:13px;margin-top:var(--space-2); }
.field[data-invalid="true"] .err{ display:block; }
.fields2{ display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4); }
.check{ display:flex;gap:var(--space-3);align-items:flex-start;margin-bottom:var(--space-3);cursor:pointer; }
.check input{ width:22px;height:22px;accent-color:var(--indigo-500);margin:0;flex:0 0 auto; }
.check span{ font-size:14px;color:var(--text-secondary);line-height:1.4; }
.claim__actions{ display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap;margin-top:var(--space-4); }

/* success + error states */
.state{ display:none;border-radius:var(--radius-md);padding:var(--space-6);border:1px solid; }
.state--success{ background:var(--success-surface);border-color:var(--success-border); }
.state--error{ background:var(--error-surface);border-color:var(--error-border); }
.role[data-state="success"] .claim__inner{ display:none; }
.role[data-state="success"] .state--success{ display:block; }
.role[data-state="error"] .state--error{ display:block;margin-top:var(--space-4); }
.state h4{ font-size:22px;margin:0 0 var(--space-2);color:var(--success-text); }
.state--error h4{ color:var(--error-text); }
.state p{ margin:0 0 var(--space-4);font-size:15px;color:var(--ink); }
.cal-row{ display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center; }
.cal-btn{
  display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
  padding:9px 14px;border-radius:var(--radius-sm);border:1px solid var(--border-default);
  background:var(--surface-raised);color:var(--ink);text-decoration:none;cursor:pointer;
}
.cal-btn:hover{ border-color:var(--ink); }

/* full / skeleton */
.role[data-full="true"] .role__cta .btn{ opacity:.5;cursor:not-allowed; }
.skeleton-card .sk{ background:linear-gradient(90deg,var(--track) 25%,var(--surface-overlay) 37%,var(--track) 63%);background-size:400% 100%;animation:sk 1.4s ease infinite;border-radius:var(--radius-sm); }
@keyframes sk{ 0%{background-position:100% 50%} 100%{background-position:0 50%} }

/* calendar subscribe strip */
.subscribe{
  margin-top:var(--space-8);display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);
  flex-wrap:wrap;padding:var(--space-6);border:1px dashed var(--border-default);border-radius:var(--radius-md);
}
.subscribe p{ margin:0;font-size:15px;color:var(--text-secondary);max-width:52ch; }

/* photo slot */
.photo-slot{
  border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-raised);
  min-height:160px;display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--space-6);
}
.photo-slot span{ font-size:14px;color:var(--text-tertiary);max-width:32ch; }

/* ============================================================
   JOIN THE LIST
   ============================================================ */
.join{ background:var(--indigo-900); }
[data-theme="light"] .join{ background:var(--indigo-900); }
.join .section-title, .join .eyebrow, .join label, .join .prose p{ color:var(--white); }
.join .eyebrow{ color:var(--indigo-200); }
.join-grid{ display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);align-items:start; }
.join .input{ color:var(--white);border-color:var(--indigo-400); }
.join .input::placeholder{ color:var(--indigo-200); }
.join .check span{ color:var(--indigo-100); }
.grade-row{ display:flex;gap:var(--space-3);flex-wrap:wrap; }
.grade{ position:relative; }
.grade input{ position:absolute;opacity:0;width:0;height:0; }
.grade span{
  display:inline-flex;align-items:center;justify-content:center;min-width:64px;min-height:48px;padding:0 var(--space-4);
  border:2px solid var(--indigo-400);border-radius:var(--radius-md);color:var(--white);font-weight:600;cursor:pointer;
}
.grade input:checked + span{ background:var(--indigo-500);border-color:var(--indigo-500);color:var(--indigo-950); }
.grade input:focus-visible + span{ outline:3px solid var(--focus-ring);outline-offset:2px; }
.privacy{ font-size:13px;color:var(--indigo-200);margin:var(--space-4) 0 0; }
#join-success{ display:none; }
.join[data-state="success"] #join-form{ display:none; }
.join[data-state="success"] #join-success{ display:block; }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ max-width:820px; }
.faq-item{ border-bottom:1px solid var(--border-default); }
.faq-q{
  width:100%;background:transparent;border:0;cursor:pointer;text-align:left;
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);
  padding:var(--space-6) 0;font-family:inherit;font-weight:600;font-size:18px;color:var(--ink);
}
.faq-icon{ position:relative;width:16px;height:16px;flex:0 0 auto; }
.faq-icon::before,.faq-icon::after{ content:"";position:absolute;background:var(--indigo-500);transition:transform var(--duration-base) var(--ease-out-snap); }
.faq-icon::before{ top:7px;left:0;width:16px;height:2px; }
.faq-icon::after{ left:7px;top:0;width:2px;height:16px; }
.faq-item[data-open="true"] .faq-icon::after{ transform:scaleY(0); }
.faq-a{ display:none;padding:0 0 var(--space-6);font-size:16px;line-height:1.7;color:var(--text-secondary);max-width:64ch; }
.faq-item[data-open="true"] .faq-a{ display:block; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--indigo-950);color:var(--indigo-100);padding:var(--space-16) var(--space-8) var(--space-12); }
.footer-inner{ max-width:1160px;margin:0 auto;display:flex;justify-content:space-between;gap:var(--space-12);flex-wrap:wrap; }
.site-footer a{ color:var(--indigo-200); }
.footer-nav{ display:flex;gap:var(--space-6);flex-wrap:wrap;font-size:15px; }
.disclaimer{ font-size:13px;color:var(--slate-400);margin:var(--space-12) 0 0;max-width:70ch;line-height:1.6; }
.theme-toggle{ background:transparent;border:1px solid var(--indigo-400);color:var(--indigo-100);border-radius:var(--radius-md);padding:10px 16px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .hero-inner{ grid-template-columns:1fr;gap:var(--space-12); }
  .cards3,.stat-row,.join-grid{ grid-template-columns:1fr;gap:var(--space-8); }
  .hero{ padding:var(--space-12) var(--space-4) var(--space-16); }
  .section{ padding:var(--space-12) var(--space-4) var(--space-16); }
  .site-footer{ padding:var(--space-12) var(--space-4); }
  .event__head{ padding:var(--space-6) var(--space-4) var(--space-4); }
  .role__row{ padding:var(--space-4); }
  .claim{ padding:0 var(--space-4) var(--space-4); }
  .fields2{ grid-template-columns:1fr; }
  .headline{ font-size:clamp(34px,10vw,48px); }
  .cta-row{ flex-direction:column;align-items:stretch; }
  .cta-row .btn{ width:100%; }
}