/* ------------------------------------------------------------------
   Celebrating the Sistas — 2026 BRAND BRIDGE
   Drop-in replacement for brand-real.css: same class + token API the
   section components already use, values remapped to the 2026 brand
   book (tokens/colors.css etc. via styles.css). Also squares corners,
   removes serif/italic, and swaps typed "S" glyphs + wordmark for art.
------------------------------------------------------------------ */
:root{
  --cts-ink:var(--cts-midnight-deep);
  --cts-bg:var(--cts-midnight);
  --cts-bg-warm:var(--cts-midnight-raised);
  --cts-bg-cool:#1C1624;
  --cts-card:var(--cts-midnight-raised);
  --cts-card-hi:#352B42;
  --cts-line:rgba(255,255,255,.14);
  --cts-lav:var(--cts-ripple-lilac);
  --cts-lav-dim:rgba(164,127,241,.72);
  --cts-violet:var(--cts-ember);
  --cts-violet-2:#6C2779;
  --cts-magenta:#93399F;
  --cts-white:#FFFFFF;
  --cts-off:rgba(255,255,255,.74);
  --cts-soft:rgba(255,255,255,.52);
  --cts-serif:var(--font-primary);
  --cts-sans:var(--font-web);
}
.cts-light{
  --cts-ink:#FFFFFF;
  --cts-bg:#FFFFFF;
  --cts-bg-warm:var(--cts-blossom);
  --cts-bg-cool:var(--cts-blossom);
  --cts-card:#FFFFFF;
  --cts-card-hi:var(--cts-blossom);
  --cts-line:rgba(33,26,41,.12);
  --cts-lav:var(--cts-ember);
  --cts-lav-dim:rgba(126,47,141,.72);
  --cts-violet:var(--cts-ember);
  --cts-violet-2:#6C2779;
  --cts-magenta:#6C2779;
  --cts-white:var(--cts-midnight);
  --cts-off:rgba(33,26,41,.74);
  --cts-soft:rgba(33,26,41,.52);
  width:100%;display:block;
}
html,body{margin:0;padding:0;background:var(--cts-midnight)}
body{font-family:var(--font-web)}

/* Section ground: Midnight with the Eclipse bloom in the corner, no magenta glow */
.cts-section{background:var(--cts-bg);color:var(--cts-white);font-family:var(--cts-sans);position:relative;overflow:hidden;width:100%;padding:0;box-sizing:border-box}
.cts-section::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 55% 60% at 0% 100%,rgba(126,47,141,.32),rgba(76,53,135,.18) 40%,transparent 72%)}
.cts-light .cts-section::before{background:radial-gradient(ellipse 70% 70% at 100% 100%,rgba(123,93,168,.14),transparent 70%)}
.cts-section>*{position:relative;z-index:1}

/* Wordmark → the real logo (white on dark, black on light) */
.cts-wordmark{display:block;width:240px;height:80px;font-size:0!important;line-height:0!important;letter-spacing:0;background:url('assets/brand/logo-primary-light.webp') left center/contain no-repeat;color:transparent!important}
.cts-wordmark *{display:none}
.cts-light .cts-wordmark{filter:brightness(0)}

/* Typed S glyph → S art */
.cts-s-mark{display:inline-block;width:.78em;height:1em;color:transparent!important;font-style:normal!important;background:url('assets/brand/s-mark-ember.webp') center/contain no-repeat;line-height:1;user-select:none}
.cts-light .cts-s-mark{background-image:url('assets/brand/s-mark-midnight.webp')}

/* Type roles */
.cts-eyebrow{font-family:var(--font-primary);font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--cts-lav)}
.cts-h1{font-family:var(--font-primary);font-weight:300;font-size:clamp(48px,5vw,84px);line-height:.98;letter-spacing:-.01em;color:var(--cts-white);margin:0}
.cts-h1 em{font-family:var(--font-primary);font-style:normal;font-weight:700;letter-spacing:0}
.cts-body{font-family:var(--font-web);font-weight:400;font-size:18px;line-height:1.55;color:var(--cts-off)}
#root h1,#root h2,#root h3{font-family:var(--font-primary)!important}
#root [style*="Mulish"]{font-family:var(--font-primary)!important}
#root em,#root [style*="italic"]{font-style:normal!important}
#root em{font-weight:700}
#root [style*="italic"][style*="font-weight: 400"],#root [style*="italic"][style*="font-weight: 500"]{font-weight:500!important}

/* CTA — pill, Ember */
.cts-cta{display:inline-flex;align-items:center;gap:10px;background:var(--cts-ember);color:#fff;font-family:var(--font-primary);font-weight:500;font-size:14px;letter-spacing:.08em;text-transform:uppercase;padding:14px 26px;border-radius:999px;text-decoration:none;border:none;cursor:pointer;transition:background .15s ease,transform .15s ease}
.cts-cta:hover{background:var(--cts-magenta);color:#fff;transform:translateY(-1px);text-decoration:none}
.cts-cta.ghost{background:transparent;border:1px solid var(--cts-lav);color:var(--cts-lav)}
.cts-cta.ghost:hover{background:var(--cts-ember-10);color:var(--cts-white)}
#root a.cts-cta,#root a.cts-cta:hover{color:#fff}
#root a.cts-cta.ghost{color:var(--cts-lav)}#root a.cts-cta.ghost:hover{color:var(--cts-white)}

/* Cards — flat, square */
.cts-card{background:var(--cts-card);border:1px solid var(--cts-line);border-radius:0;overflow:hidden;position:relative}
#root [style*="border-radius: 12px"],#root [style*="border-radius: 14px"],#root [style*="border-radius: 16px"],#root [style*="border-radius: 18px"],#root [style*="border-radius: 20px"],#root [style*="border-radius: 22px"],#root [style*="border-radius: 24px"],#root [style*="border-radius: 26px"],#root [style*="border-radius: 28px"],#root [style*="border-radius: 30px"],#root [style*="border-radius: 32px"]{border-radius:0!important}
.ab-card-padding{border-radius:0!important}
/* Sponsors panel (class-level styles injected by sponsors-section.jsx) */
#root .spx-card{border-radius:0!important;background:var(--cts-midnight-raised)!important;border-color:var(--cts-line)!important}
#root .spx-tier+.spx-tier{border-top-color:var(--cts-line)!important}
#root .spx-sec{background:var(--cts-midnight-deep)!important}
#root .spx-panel{background:var(--cts-midnight-raised)!important}

/* Overlays — Midnight veils, never purple */
.cts-img-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(33,26,41,0) 0%,rgba(33,26,41,.15) 45%,rgba(33,26,41,.88) 100%);pointer-events:none}
.cts-poster-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(33,26,41,.7) 0%,rgba(76,53,135,.18) 60%,rgba(33,26,41,0) 100%);pointer-events:none}

.cts-play{width:64px;height:64px;border-radius:999px;background:rgba(33,26,41,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1.5px solid rgba(255,255,255,.7);display:inline-flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;transition:transform .2s ease,background .2s ease}
.cts-play:hover{transform:scale(1.08);background:rgba(126,47,141,.6)}
.cts-play svg{width:22px;height:22px;margin-left:3px}

.cts-rule{width:64px;height:1px;background:var(--cts-aura);margin:28px 0 0;border:none}

/* Chip → recognition-label language: outlined, 6px */
.cts-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-primary);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cts-lav);padding:6px 10px;border-radius:6px;background:transparent;border:1px solid var(--cts-lav)}
.cts-chip::before{display:none}

/* Advisory letter overrides carried from the Light page */
.cts-light [data-screen-label="Advisory Board Letter"] p{color:rgba(33,26,41,.74)!important}
.cts-light [data-screen-label="Advisory Board Letter"] p:last-child{color:var(--cts-midnight)!important}
.ab-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.ab-section-padding{padding:32px 48px 36px}.ab-card-padding{padding:34px 44px 38px}
@media (max-width:860px){.ab-grid{grid-template-columns:repeat(2,1fr);gap:20px}.ab-section-padding{padding:24px 20px 28px}.ab-card-padding{padding:24px 20px 28px}}
@media (max-width:480px){.ab-grid{gap:14px}.ab-section-padding{padding:16px 12px 20px}.ab-card-padding{padding:18px 14px 22px}}
@media (max-width:768px){.ripples-grid{grid-template-columns:1fr!important;gap:40px!important;padding:60px 24px!important}}

@keyframes cts-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:768px){.cts-hero-video-iframe{width:177.78vh!important;min-width:177.78vh;height:100vh!important;min-height:100vh}}

/* Mobile fixes */
@media (max-width:767px){
  #root .cts-section[data-screen-label="The First Four Years of Impact (Mobile)"]{--cts-bg:#FFFFFF;--cts-card:#FFFFFF;--cts-white:var(--cts-midnight);--cts-off:rgba(33,26,41,.74);--cts-lav:var(--cts-ember);--cts-line:rgba(33,26,41,.12);background:#FFFFFF!important;color:var(--cts-midnight)}
  #root .cts-section[data-screen-label="The First Four Years of Impact (Mobile)"]::before{display:none}
  #root [data-screen-label="The First Four Years of Impact (Mobile)"] h2,#root [data-screen-label="The First Four Years of Impact (Mobile)"] h2 em{color:var(--cts-midnight)!important}
  #root [data-screen-label="The First Four Years of Impact (Mobile)"] hr{background:var(--cts-ember)!important}
  #root [data-screen-label="The First Four Years of Impact (Mobile)"] button[style*="rgba(214, 184, 255, 0.06)"]{background:#FFFFFF!important;border-color:rgba(33,26,41,.18)!important;color:var(--cts-midnight)!important}
  #root [data-screen-label="The First Four Years of Impact (Mobile)"] button[style*="var(--cts-violet)"]{box-shadow:none!important}
  #root [data-screen-label="The First Four Years of Impact (Mobile)"] [style*="rgba(214, 184, 255, 0.18)"]{border-color:rgba(33,26,41,.12)!important}
  #root{overflow-x:clip}
  .ab-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
  .ab-grid>*{min-width:0}
  .ab-headshot{width:100%!important}
  .recap-wrap{padding:64px 14px 72px!important}
  .recap-frame{margin-top:30px!important}
  .cts-foot-row{padding:36px 20px 32px!important;flex-direction:column!important;flex-wrap:wrap!important;gap:24px!important;align-items:flex-start!important}
}