/* ==========================================================================
   Serenity High — design system
   Palette : deep evergreen ground, warm sand paper, honey accent, lake blue
   Type    : Fraunces (display) / Karla (text) / IBM Plex Mono (utility)
   ========================================================================== */

:root{
  /* --- neutrals: warm, green-biased --- */
  --paper:        #fcfbfd;
  --paper-2:      #ffffff;
  --sand:         #f3f0f8;
  --sand-deep:    #e6e0f0;
  --ink:          #1f1730;
  --ink-soft:     #4a4160;
  --ink-mute:     #6f6785;

  /* --- brand --- */
  --forest:       #452487;
  --forest-deep:  #2a1552;
  --forest-mid:   #5b36a8;
  --sage:         #7a6aa8;
  --sage-pale:    #e4ddf2;

  /* --- accents --- */
  --honey:        #6b46b0;
  --honey-soft:   #e4ddf2;
  --lake:         #4a5c86;
  --clay:         #8c5a9e;

  /* --- semantic --- */
  --bg:           var(--paper);
  --surface:      #FFFFFF;
  --surface-2:    var(--paper-2);
  --text:         var(--ink);
  --text-soft:    var(--ink-soft);
  --text-mute:    var(--ink-mute);
  --line:         rgba(31,23,48,.13);
  --line-strong:  rgba(31,23,48,.28);
  --link:         var(--forest);
  --accent:       var(--honey);
  --on-dark:      #efeaf8;
  --on-dark-mute: #bcb0d8;
  --shadow-sm:    0 1px 2px rgba(42,21,82,.06), 0 2px 8px rgba(42,21,82,.05);
  --shadow-lg:    0 24px 60px -28px rgba(42,21,82,.38), 0 2px 8px rgba(42,21,82,.06);

  /* --- type --- */
  --display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans:    "Karla", ui-sans-serif, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* --- rhythm --- */
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --wrap:   1180px;
  --wrap-narrow: 760px;
  --radius: 4px;
  --radius-lg: 10px;
  --section-y: clamp(3.5rem, 8vw, 7rem);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#150b2a; --paper-2:#1c1038; --sand:#1a0f34; --sand-deep:#281a4e;
    --ink:#f0ebf8; --ink-soft:#cfc6e4; --ink-mute:#9f93bd;
    --forest:#b9abdb; --forest-deep:#150a2c; --forest-mid:#8f7fc0; --sage:#a294c9; --sage-pale:#3b2569;
    --honey:#b9a3e8; --honey-soft:#33215c; --lake:#9fb0d6; --clay:#b783c4;
    --bg:var(--paper); --surface:#1e1240; --surface-2:#221545;
    --text:var(--ink); --text-soft:var(--ink-soft); --text-mute:var(--ink-mute);
    --line:rgba(240,235,248,.14); --line-strong:rgba(240,235,248,.3);
    --link:var(--forest); --accent:var(--honey);
    --on-dark:#f0ebf8; --on-dark-mute:#b0a3cd;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-lg:0 24px 60px -28px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --paper:#150b2a; --paper-2:#1c1038; --sand:#1a0f34; --sand-deep:#281a4e;
  --ink:#f0ebf8; --ink-soft:#cfc6e4; --ink-mute:#9f93bd;
  --forest:#b9abdb; --forest-deep:#150a2c; --forest-mid:#8f7fc0; --sage:#a294c9; --sage-pale:#3b2569;
  --honey:#b9a3e8; --honey-soft:#33215c; --lake:#9fb0d6; --clay:#b783c4;
  --bg:var(--paper); --surface:#1e1240; --surface-2:#221545;
  --text:var(--ink); --text-soft:var(--ink-soft); --text-mute:var(--ink-mute);
  --line:rgba(240,235,248,.14); --line-strong:rgba(240,235,248,.3);
  --link:var(--forest); --accent:var(--honey);
  --on-dark:#f0ebf8; --on-dark-mute:#b0a3cd;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-lg:0 24px 60px -28px rgba(0,0,0,.7);
}

/* ---------- reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@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;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:1.0625rem;line-height:1.7;
  font-feature-settings:"kern" 1;text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--honey);outline-offset:3px;border-radius:2px}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}

h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.1;text-wrap:balance;color:var(--text);margin:0}
h1{font-size:clamp(2.35rem,1.4rem + 3.9vw,4.1rem);letter-spacing:-.022em;font-variation-settings:"opsz" 120,"SOFT" 0,"WONK" 1}
h2{font-size:clamp(1.85rem,1.25rem + 2.3vw,2.85rem);letter-spacing:-.018em;font-variation-settings:"opsz" 60,"WONK" 1}
h3{font-size:clamp(1.22rem,1.05rem + .7vw,1.55rem);letter-spacing:-.01em;font-variation-settings:"opsz" 24}
h4{font-size:1.06rem;font-family:var(--sans);font-weight:700;letter-spacing:-.005em}
p{margin:0 0 1.15em}
strong{font-weight:700;color:var(--text)}

/* ---------- layout primitives ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:var(--wrap-narrow)}
.section{padding-block:var(--section-y)}
.section--tight{padding-block:clamp(2.5rem,5vw,4rem)}
.section--sand{background:var(--sand)}
.section--paper2{background:var(--surface-2)}
.section--forest{background:var(--forest-deep);color:var(--on-dark)}
.section--forest h1,.section--forest h2,.section--forest h3,.section--forest h4{color:var(--on-dark)}
.section--forest p,.section--forest li{color:var(--on-dark-mute)}
.section--forest a{color:var(--honey)}
.stack > * + *{margin-top:1.15em}
.lede{font-size:clamp(1.14rem,1.02rem + .5vw,1.34rem);line-height:1.62;color:var(--text-soft);max-width:62ch}
.measure{max-width:68ch}
.center{text-align:center;margin-inline:auto}

/* eyebrow: mono label + rule — used to mark every major section */
.eyebrow{
  font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-mute);
  display:flex;align-items:center;gap:.75rem;margin:0 0 1.1rem;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line);max-width:9rem}
.section--forest .eyebrow{color:var(--sage)}
.section--forest .eyebrow::after{background:rgba(240,235,248,.2)}
.eyebrow--center{justify-content:center}
.eyebrow--center::before{content:"";flex:1;height:1px;background:var(--line);max-width:5rem}
.eyebrow--center::after{max-width:5rem}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--sans);font-weight:700;font-size:.95rem;letter-spacing:.005em;
  padding:.85rem 1.6rem;border-radius:100px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--forest-deep);color:#f7f4fd;box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:var(--forest-mid);color:#fff}
.btn--honey{background:var(--honey);color:#2a1552}
.btn--honey:hover{background:var(--honey-soft);color:#1e0f3d}
.btn--ghost{border-color:var(--line-strong);color:var(--text);background:transparent}
.btn--ghost:hover{border-color:var(--forest);background:rgba(69,36,135,.06);color:var(--text)}
.section--forest .btn--ghost{border-color:rgba(240,235,248,.35);color:var(--on-dark)}
.section--forest .btn--ghost:hover{background:rgba(240,235,248,.1);color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}

/* ---------- top utility bar + header ---------- */
.utility{
  background:var(--forest-deep);color:var(--on-dark-mute);
  font-size:.82rem;font-family:var(--sans);
}
.utility .wrap{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;align-items:center;justify-content:space-between;padding-block:.5rem}
.utility a{color:var(--honey);text-decoration:none;font-weight:600}
.utility a:hover{text-decoration:underline}
.utility__crisis{display:inline-flex;align-items:center;gap:.5rem}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--honey);flex:none;box-shadow:0 0 0 0 rgba(107,70,176,.6);animation:pulse 2.6s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(107,70,176,0)}100%{box-shadow:0 0 0 0 rgba(107,70,176,0)}}

.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;gap:1rem;justify-content:space-between;padding-block:.7rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--text);min-width:0;flex:1 1 auto}
.brand__mark{width:38px;height:38px;flex:none}
.brand__name{font-family:var(--display);font-weight:600;font-size:1.22rem;line-height:1.05;letter-spacing:-.02em;font-variation-settings:"opsz" 30,"WONK" 1}
.brand__sub{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-mute);font-weight:500;margin-top:.15rem}

.nav{display:flex;align-items:center;gap:.15rem}
.nav a{
  font-size:.925rem;font-weight:600;color:var(--text-soft);text-decoration:none;
  padding:.5rem .68rem;border-radius:100px;white-space:nowrap;transition:background .15s ease,color .15s ease;
}
.nav a:hover{background:var(--sand);color:var(--text)}
.nav a[aria-current="page"]{color:var(--forest);background:var(--sand)}
.nav__cta{margin-left:.5rem}
.nav-toggle{display:none;background:none;border:1px solid var(--line-strong);border-radius:100px;padding:.5rem .9rem;font-family:var(--sans);font-weight:700;font-size:.88rem;color:var(--text);cursor:pointer;align-items:center;gap:.5rem}

@media (max-width: 1020px){
  .nav-toggle{display:inline-flex}
  .nav{
    position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;
    background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);
    padding:.6rem var(--gutter) 1.2rem;gap:.1rem;max-height:75vh;overflow:auto;
  }
  .nav[hidden]{display:none}
  .nav a{padding:.75rem .5rem;border-radius:var(--radius);font-size:1rem}
  .nav__cta{margin:.6rem 0 0}
  .nav__cta .btn{width:100%}
}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--forest-deep);color:var(--on-dark);isolation:isolate}
.hero__art{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover}
.hero .wrap{position:relative;padding-block:clamp(3.5rem,8vw,6.5rem)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4rem);align-items:end}
@media (max-width:900px){.hero__grid{grid-template-columns:1fr;align-items:start}}
.hero h1{color:#f7f4fd;max-width:16ch}
.hero__kicker{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--honey);margin:0 0 1.2rem;display:flex;align-items:center;gap:.7rem;
}
.hero__kicker::before{content:"";width:28px;height:1px;background:var(--honey)}
.hero__lede{color:#ded5f0;font-size:clamp(1.08rem,1rem + .55vw,1.3rem);max-width:52ch;margin-top:1.4rem}
.hero .btn-row{margin-top:2rem}

/* fact rail — the numbers that define the school */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border-block:1px solid var(--line)}
.facts__item{background:var(--bg);padding:1.5rem clamp(1rem,2.5vw,1.75rem)}
.facts__num{font-family:var(--display);font-size:clamp(1.9rem,1.5rem + 1.3vw,2.6rem);font-weight:600;line-height:1;color:var(--forest);font-variation-settings:"opsz" 60,"WONK" 1;font-variant-numeric:tabular-nums}
.facts__label{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-mute);margin-top:.6rem;line-height:1.5}

/* ---------- editorial split ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.split--sidebar{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.split--flip > :first-child{order:2}
@media (max-width:880px){
  .split,.split--sidebar{grid-template-columns:1fr}
  .split--flip > :first-child{order:0}
}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));gap:clamp(1rem,2.2vw,1.5rem)}
.cards--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1040px){.cards--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.cards--4{grid-template-columns:1fr}}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(1.35rem,2.4vw,1.9rem);display:flex;flex-direction:column;gap:.7rem;
}
.card h3{margin-bottom:.1rem}
.card p{margin:0;color:var(--text-soft);font-size:.985rem}
.card__icon{width:34px;height:34px;color:var(--forest);flex:none}
.card--link{text-decoration:none;color:inherit;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.card--link:hover{border-color:var(--forest);transform:translateY(-2px);box-shadow:var(--shadow-lg);color:inherit}
.card__more{margin-top:auto;font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--forest);font-weight:500;padding-top:.5rem}
.section--forest .card{background:rgba(255,255,255,.045);border-color:rgba(240,235,248,.16)}
.section--forest .card__icon{color:var(--sage)}
.section--forest .card__more{color:var(--honey)}

/* ---------- numbered steps (only where order is real) ---------- */
.steps{list-style:none;margin:0;padding:0;counter-reset:step;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.steps li{counter-increment:step;background:var(--bg);padding:clamp(1.3rem,2.5vw,1.8rem);display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.25rem;align-items:start}
.steps li::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.06em;color:var(--honey);
  border:1px solid var(--honey);border-radius:50%;width:2.4rem;height:2.4rem;
  display:grid;place-items:center;flex:none;
}
.steps h3{margin-bottom:.35rem}
.steps p{margin:0;color:var(--text-soft);font-size:.985rem}
.steps p + p{margin-top:.6rem}

/* ---------- day-in-the-life schedule ---------- */
.schedule{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface)}
.schedule__row{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:1.25rem;padding:1rem clamp(1rem,2.2vw,1.5rem);border-top:1px solid var(--line);align-items:baseline}
.schedule__row:first-child{border-top:0}
.schedule__time{font-family:var(--mono);font-size:.82rem;color:var(--forest);font-weight:500;font-variant-numeric:tabular-nums}
.schedule__what strong{display:block;font-size:1rem}
.schedule__what span{color:var(--text-soft);font-size:.94rem}
@media (max-width:520px){.schedule__row{grid-template-columns:1fr;gap:.25rem}}

/* ---------- definition list / spec table ---------- */
.spec{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:0;border-top:1px solid var(--line);margin:0}
.spec dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:var(--text-mute);padding:1rem 1rem 1rem 0;border-bottom:1px solid var(--line)}
.spec dd{margin:0;padding:1rem 0;border-bottom:1px solid var(--line);color:var(--text-soft)}
@media (max-width:620px){.spec{grid-template-columns:1fr}.spec dt{padding-bottom:.1rem;border-bottom:0}.spec dd{padding-top:.25rem}}

/* ---------- pull quote / news quote ---------- */
.quote{
  border-left:3px solid var(--honey);padding:.35rem 0 .35rem 1.6rem;margin:2rem 0;
  font-family:var(--display);font-size:clamp(1.25rem,1.05rem + .9vw,1.65rem);line-height:1.42;
  font-variation-settings:"opsz" 44,"WONK" 1;color:var(--text);
}
.quote cite{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;font-style:normal;color:var(--text-mute);margin-top:1rem;line-height:1.7}
.quote cite a{color:var(--text-mute)}

/* ---------- checklist ---------- */
.check{list-style:none;padding:0;margin:0;display:grid;gap:.85rem}
.check li{display:grid;grid-template-columns:1.4rem minmax(0,1fr);gap:.8rem;align-items:start;color:var(--text-soft)}
.check li::before{content:"";width:1.1rem;height:1.1rem;margin-top:.33rem;border-radius:50%;background:var(--sage-pale);
  box-shadow:inset 0 0 0 1px var(--forest);
  -webkit-mask:none;position:relative}
.check li strong{color:var(--text)}
.check--tight li{align-items:baseline}

/* ---------- photo placeholders (swap for real photography) ---------- */
.photo{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;background:
    radial-gradient(120% 90% at 20% 10%, rgba(107,70,176,.22), transparent 60%),
    linear-gradient(150deg, var(--forest-mid), var(--forest-deep) 70%);
  box-shadow:var(--shadow-lg);
}
.photo::after{
  content:attr(data-caption);position:absolute;left:0;right:0;bottom:0;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(247,242,231,.72);padding:.9rem 1rem;background:linear-gradient(transparent,rgba(8,19,16,.75));
}
.photo--tall{aspect-ratio:4/5}
.photo--wide{aspect-ratio:16/10}
.photo--square{aspect-ratio:1/1}
.photo svg{position:absolute;inset:0;width:100%;height:100%}

/* ---------- callout / alert ---------- */
.callout{
  background:var(--sand);border:1px solid var(--line);border-left:3px solid var(--honey);
  border-radius:var(--radius);padding:clamp(1.1rem,2.2vw,1.5rem);
}
.callout h3{font-size:1.1rem;margin-bottom:.45rem}
.callout p:last-child{margin-bottom:0}
.callout--urgent{border-left-color:var(--clay);background:color-mix(in srgb,var(--clay) 8%,var(--bg))}

/* ---------- resource list ---------- */
.resource{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;list-style:none;padding:0;margin:0}
.resource li{background:var(--bg);padding:1.15rem clamp(1rem,2.2vw,1.5rem);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:.4rem 1.5rem;align-items:baseline}
.resource strong{font-size:1.02rem;display:block}
.resource span{color:var(--text-soft);font-size:.94rem}
.resource .resource__meta{font-family:var(--mono);font-size:.8rem;color:var(--forest);letter-spacing:.02em}
@media (max-width:640px){.resource li{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.25rem 2.5rem 1.25rem 0;position:relative;
  font-family:var(--display);font-size:clamp(1.08rem,1rem + .35vw,1.3rem);font-weight:600;
  font-variation-settings:"opsz" 30,"WONK" 1;color:var(--text);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.35rem;top:1.15rem;font-family:var(--mono);font-size:1.4rem;color:var(--honey);transition:transform .2s ease;line-height:1}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--forest)}
.faq__body{padding:0 2.5rem 1.5rem 0;color:var(--text-soft);max-width:72ch}
.faq__body p:last-child{margin-bottom:0}

/* ---------- breadcrumbs ---------- */
.crumbs{font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--text-mute);padding-block:1.1rem;border-bottom:1px solid var(--line)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin:0;padding:0}
.crumbs li::after{content:"/";margin-left:.45rem;color:var(--line-strong)}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--text-mute);text-decoration:none}
.crumbs a:hover{color:var(--forest)}

/* ---------- page header (interior pages) ---------- */
.pagehead{background:var(--sand);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.pagehead .wrap{padding-block:clamp(2.5rem,6vw,4.5rem);position:relative}
.pagehead__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:end}
@media (max-width:860px){.pagehead__grid{grid-template-columns:1fr}}
.pagehead h1{max-width:20ch}

/* ---------- CTA band ---------- */
.cta-band{background:var(--forest-deep);color:var(--on-dark);position:relative;overflow:hidden}
.cta-band .wrap{padding-block:clamp(3rem,6vw,5rem);position:relative}
.cta-band h2{color:#f7f4fd;max-width:18ch}
.cta-band p{color:#bcb0d8;max-width:56ch}
.cta-band__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:2rem;align-items:center}
@media (max-width:820px){.cta-band__grid{grid-template-columns:1fr}}

/* ---------- forms ---------- */
.form{display:grid;gap:1.1rem}
.field{display:grid;gap:.4rem}
.field label{font-family:var(--mono);font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:var(--text-mute)}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:1rem;color:var(--text);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--radius);padding:.8rem .9rem;width:100%;
}
.field textarea{min-height:8rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--honey);outline-offset:1px;border-color:var(--forest)}
.field__hint{font-size:.85rem;color:var(--text-mute)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:620px){.form__row{grid-template-columns:1fr}}

/* ---------- tag / pill ---------- */
.pills{display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:0;list-style:none}
.pill{font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
  border:1px solid var(--line-strong);border-radius:100px;padding:.35rem .8rem;color:var(--text-soft);white-space:nowrap}
.pill--solid{background:var(--forest-deep);color:#f3eff9;border-color:transparent}
.section--forest .pill{border-color:rgba(240,235,248,.3);color:var(--on-dark-mute)}

/* ---------- footer ---------- */
.site-footer{background:var(--forest-deep);color:var(--on-dark-mute);font-size:.94rem;padding-block:clamp(3rem,6vw,4.5rem) 0}
.site-footer h4{color:#f2eefa;font-family:var(--mono);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;font-weight:500;margin-bottom:1rem}
.site-footer a{color:var(--on-dark-mute);text-decoration:none}
.site-footer a:hover{color:var(--honey)}
.footer__grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.5rem)}
@media (max-width:900px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer__grid{grid-template-columns:1fr}}
.footer__links{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.footer__brand .brand__name{color:#f4f0fb}
.footer__brand .brand__sub{color:var(--sage)}
.footer__note{color:var(--sage);font-size:.88rem;max-width:34ch;margin-top:1rem;line-height:1.65}
.footer__bottom{margin-top:clamp(2.5rem,5vw,3.5rem);border-top:1px solid rgba(240,235,248,.14);padding-block:1.5rem;
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;font-size:.82rem;color:var(--sage)}
.footer__bottom a{color:var(--sage)}

/* ---------- misc utilities ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--honey);color:#2a1552;padding:.75rem 1.25rem;z-index:200;font-weight:700;border-radius:0 0 var(--radius) 0}
.skip:focus{left:0}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mt-0{margin-top:0}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:clamp(1.25rem,3vw,2.5rem)}
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg)}
table{border-collapse:collapse;width:100%;min-width:34rem;font-size:.95rem}
th,td{text-align:left;padding:.85rem 1.1rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--mono);font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;color:var(--text-mute);font-weight:500;background:var(--surface-2)}
tbody tr:last-child td{border-bottom:0}

/* reveal on scroll — starts visible, animates only as a nicety */
.reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)}
  .js .reveal.is-in{opacity:1;transform:none}
}


/* ==========================================================================
   Dark-ground scopes, rhythm, and small-screen chrome
   (kept last so these intentionally win the cascade)
   ========================================================================== */

/* --- heading-to-paragraph rhythm --- */
h1 + p, h2 + p, h3 + p, h1 + .lede, h2 + .lede, h3 + .lede,
.eyebrow + h1, .eyebrow + h2{margin-top:.95rem}
.eyebrow + h1, .eyebrow + h2{margin-top:0}
h3 + ul, h3 + ol, h2 + ul, h2 + ol{margin-top:1.1rem}

/* --- everything that sits on a dark ground --- */
.hero, .section--forest, .cta-band{color:var(--on-dark)}
.hero :is(h1,h2,h3,h4),
.section--forest :is(h1,h2,h3,h4),
.cta-band :is(h1,h2,h3,h4){color:#f6f3fc}
.hero :is(p,li,dd,td,.lede,.card p,.schedule__what span),
.section--forest :is(p,li,dd,td,.lede,.card p,.check li,.schedule__what span),
.cta-band :is(p,li,dd,.lede,.card p){color:#bcb0d8}
.section--forest :is(th,.facts__label,.field__hint){color:var(--sage)}
.hero :is(strong),
.section--forest :is(strong),
.cta-band :is(strong){color:#f2eefa}
.section--forest :is(.check li::before){background:transparent;box-shadow:inset 0 0 0 1.5px var(--sage)}
.section--forest :is(table,.table-scroll){border-color:rgba(240,235,248,.2)}
.section--forest :is(th,td){border-bottom-color:rgba(240,235,248,.16)}
.section--forest :is(.quote){color:#eee9f7}

/* buttons and pills on dark grounds */
.hero .btn--ghost, .cta-band .btn--ghost, .section--forest .btn--ghost{
  border-color:rgba(240,235,248,.4);color:#efeaf8;background:transparent;
}
.hero .btn--ghost:hover, .cta-band .btn--ghost:hover, .section--forest .btn--ghost:hover{
  background:rgba(240,235,248,.12);border-color:rgba(240,235,248,.7);color:#fff;
}
.nav__cta .btn--primary{background:var(--forest-deep);color:#f7f4fd}
.nav__cta .btn--primary:hover{background:var(--forest-mid);color:#fff}
.hero .pill, .cta-band .pill{border-color:rgba(240,235,248,.32);color:#e2daf3;background:rgba(255,255,255,.04)}
.hero .pills{gap:.55rem}
.section--forest .card{background:rgba(255,255,255,.05);border-color:rgba(240,235,248,.18)}
.section--forest .card__more a, .cta-band .card__more a{color:var(--honey)}
.section--forest .photo, .hero .photo{box-shadow:none}

/* --- hero composition --- */
.hero__grid{align-items:end}
.hero__grid > :last-child{padding-bottom:.35rem}
@media (max-width:900px){
  .hero__grid > :last-child{padding-bottom:0}
  .hero .pills{margin-top:.5rem}
}

/* --- header at small widths --- */
@media (max-width:780px){
  .utility .wrap > span:last-child{display:none}
  .utility .wrap{justify-content:flex-start}
}
@media (max-width:560px){
  .brand__sub{display:none}
  .brand__name{font-size:1.1rem}
  .brand__mark{width:32px;height:32px}
}
@media (max-width:380px){
  .brand__name{font-size:1rem}
}

/* --- keep long words from forcing horizontal scroll --- */
h1,h2,h3,p,li,dd,td,th{overflow-wrap:break-word}

.brand__sub{white-space:nowrap}
.brand{flex:0 1 auto}

.utility__crisis{gap:0}
.utility__crisis .pulse{margin-right:.55rem}

/* ==========================================================================
   Photography layer
   ========================================================================== */

/* --- figures --- */
.fig{margin:0;position:relative}
.fig img{
  width:100%;height:100%;object-fit:cover;display:block;
  border-radius:var(--radius-lg);background:var(--sand-deep);
}
.fig--tall img{aspect-ratio:4/5}
.fig--wide img{aspect-ratio:16/10}
.fig--square img{aspect-ratio:1/1}
.fig--band img{aspect-ratio:21/9}
.fig figcaption{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-mute);margin-top:.85rem;line-height:1.6;max-width:42ch;
}
.section--forest .fig figcaption,.hero .fig figcaption,.cta-band .fig figcaption{color:var(--sage)}

/* warm offset frame — used once or twice per page, not everywhere */
.fig--frame{isolation:isolate}
.fig--frame::before{
  content:"";position:absolute;inset:auto -14px -14px auto;width:62%;height:62%;
  border:1px solid var(--honey);border-radius:var(--radius-lg);z-index:-1;opacity:.55;
}
.section--forest .fig--frame::before{border-color:var(--sage)}

/* photos sitting on dark grounds get pulled toward the brand greens */
.fig--toned img{filter:saturate(.82) contrast(1.04) brightness(.94)}
.fig--toned::after{
  content:"";position:absolute;inset:0;border-radius:var(--radius-lg);pointer-events:none;
  background:linear-gradient(200deg,rgba(42,21,82,.42),rgba(42,21,82,.05) 55%,rgba(107,70,176,.16));
  mix-blend-mode:multiply;
}

/* --- hero with a real photograph --- */
.hero{background:var(--forest-deep)}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__media img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.05)}
@media (prefers-reduced-motion:no-preference){
  .hero__media img{animation:kenburns 26s ease-out forwards;transform-origin:62% 40%}
}
@keyframes kenburns{from{transform:scale(1.045)}to{transform:scale(1)}}
.hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg, rgba(26,12,52,.96) 0%, rgba(28,13,56,.88) 34%, rgba(11,32,25,.6) 62%, rgba(12,36,28,.42) 100%),
    linear-gradient(to top, rgba(24,11,48,.92), rgba(24,11,48,0) 55%);
}
@media (max-width:900px){
  .hero__scrim{background:linear-gradient(to top, rgba(24,11,48,.97) 22%, rgba(28,13,56,.82) 62%, rgba(10,30,24,.7))}
}
.hero .wrap{padding-block:clamp(4rem,9vw,7.5rem)}

/* fine film grain — the thing that keeps flat color from looking cheap */
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.32;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.hero > .wrap,.band > .wrap,.cta-band > .wrap{position:relative;z-index:1}

/* --- full-bleed image band with text over it --- */
.band{position:relative;overflow:hidden;background:var(--forest-deep);color:var(--on-dark);isolation:isolate}
.band__media{position:absolute;inset:0;z-index:-2}
.band__media img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.05)}
.band__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(28,13,56,.94) 0%,rgba(28,13,56,.82) 45%,rgba(28,13,56,.42) 100%)}
.band .wrap{padding-block:clamp(3.5rem,8vw,6.5rem)}
.band :is(h2,h3){color:#f6f3fc}
.band :is(p,li,.lede){color:#c4b8dd}
.band__inner{max-width:52ch}
@media (max-width:760px){.band__scrim{background:linear-gradient(to top,rgba(28,13,56,.96) 30%,rgba(28,13,56,.78))}}

/* --- image card --- */
.imgcard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s ease,border-color .22s ease;
}
.imgcard img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:0;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.imgcard__body{padding:clamp(1.2rem,2.2vw,1.6rem);display:flex;flex-direction:column;gap:.55rem;flex:1}
.imgcard__body p{margin:0;color:var(--text-soft);font-size:.97rem}
.imgcard__media{overflow:hidden}
a.imgcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--forest);color:inherit}
a.imgcard:hover img{transform:scale(1.04)}
.section--forest .imgcard{background:rgba(255,255,255,.05);border-color:rgba(240,235,248,.18)}

/* --- editorial overlap: an image that breaks the section edge --- */
.overlap{margin-bottom:clamp(-6rem,-7vw,-3rem);position:relative;z-index:2}

/* --- stat plate laid over a photograph --- */
.plate{
  position:absolute;left:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);
  background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:1rem 1.25rem;max-width:min(88%,20rem);
  box-shadow:var(--shadow-lg);
}
.plate strong{display:block;font-family:var(--display);font-size:1.9rem;line-height:1;color:var(--forest);
  font-variation-settings:"opsz" 60,"WONK" 1;font-variant-numeric:tabular-nums}
.plate span{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-mute);margin-top:.5rem;line-height:1.55}

/* --- two-up image pair --- */
.figpair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.75rem,1.6vw,1.1rem);align-items:start}
.figpair .fig:nth-child(2){margin-top:clamp(1.5rem,4vw,3rem)}
@media (max-width:520px){.figpair{grid-template-columns:1fr}.figpair .fig:nth-child(2){margin-top:0}}

/* keep the old placeholder class harmless if any remain */
.photo{display:none}

/* cta band with a photograph behind it */
.cta-band--media .band__scrim{
  background:linear-gradient(90deg,rgba(28,13,56,.95) 0%,rgba(28,13,56,.86) 50%,rgba(28,13,56,.55) 100%);
}
@media (max-width:820px){
  .cta-band--media .band__scrim{background:linear-gradient(to top,rgba(28,13,56,.96) 35%,rgba(28,13,56,.8))}
}
.cta-band, .band{isolation:isolate}
.cta-band .band__media, .band .band__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.cta-band .band__media img, .band .band__media img{width:100%;height:100%;object-fit:cover}
.cta-band .band__media .fig, .band .band__media .fig{height:100%}
.cta-band .band__media img{border-radius:0}
.band .band__media img{border-radius:0}

/* imgcard uses spans, so make the inner figure behave */
.imgcard .fig, .imgcard__media{display:block;line-height:0}
.imgcard .fig img{border-radius:0;aspect-ratio:16/10}
.imgcard__body{line-height:1.7}
.imgcard__body .card__more{margin-top:auto;padding-top:.35rem}

/* utility bar reads as one sentence, so keep it inline (flex ate the word spaces) */
.utility__crisis{display:inline}
.utility__crisis .pulse{display:inline-block;vertical-align:middle;margin-right:.5rem;margin-bottom:.12em}

/* --- one grade across every photograph, so the set reads as one system --- */
.fig img, .hero__media img, .band__media img, .imgcard img{filter:saturate(.88) contrast(1.03)}
.imgcard__media{position:relative}
.imgcard__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(170deg,rgba(69,36,135,.14),rgba(107,70,176,.08));
  mix-blend-mode:multiply;
}

/* the offset frame would push past the gutter on small screens */
@media (max-width:640px){.fig--frame::before{display:none}}

/* ==========================================================================
   Header — the nav needs its own rail, real spacing, and an honest breakpoint
   ========================================================================== */

/* the header gets more room than the reading column */
.wrap--header{max-width:1340px}

.site-header .wrap{gap:clamp(1rem,3vw,2.5rem);flex-wrap:nowrap}
.brand{flex:0 1 auto;min-width:0}

/* nav: breathing room between items, and it must never be squeezed into the brand */
.nav{gap:.1rem;flex:0 1 auto;min-width:0;flex-wrap:nowrap;margin-left:auto}
.nav a{
  padding:.55rem .82rem;font-size:.9rem;font-weight:600;letter-spacing:.004em;
  border-radius:100px;
}
@media (min-width:1300px){
  .nav a{padding:.55rem 1rem;font-size:.935rem}
}

/* the call to action is a different kind of thing — separate it from the links */
.nav__cta{
  display:flex;align-items:center;margin-left:clamp(.6rem,1.4vw,1.15rem);
  padding-left:clamp(.6rem,1.4vw,1.15rem);border-left:1px solid var(--line);
}
.nav__cta .btn{padding:.72rem 1.3rem;font-size:.9rem;white-space:nowrap}

/* the desktop nav only appears when there is genuinely room for it */
@media (max-width:1180px){
  .nav-toggle{display:inline-flex}
  .site-header .wrap{gap:1rem}
  .nav{
    position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;
    flex-wrap:wrap;margin-left:0;
    background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);
    padding:.5rem var(--gutter) 1.25rem;gap:.1rem;max-height:75vh;overflow:auto;
  }
  .nav[hidden]{display:none}
  .nav a{padding:.8rem .6rem;border-radius:var(--radius);font-size:1.02rem;border-bottom:1px solid var(--line)}
  .nav a:last-of-type{border-bottom:0}
  .nav__cta{margin:.9rem 0 0;padding:0;border-left:0;display:block}
  .nav__cta .btn{width:100%;padding:.85rem 1.3rem}
}
@media (min-width:1181px){
  .nav{position:static;flex-direction:row;background:none;border:0;box-shadow:none;padding:0;max-height:none;overflow:visible}
  .nav a{border-bottom:0}
  .nav-toggle{display:none}
}

/* ==========================================================================
   REPOSITIONING PASS — this is a high school, not a treatment centre.
   Light grounds dominate; the dark evergreen is reserved for the footer and
   one closing moment. Everything below intentionally wins the cascade.
   ========================================================================== */

:root{
  --paper:#fcfbfd;
  --paper-2:#FFFFFF;
  --sand:#f3f0f8;
  --sand-deep:#e6e0f0;
  --ink:#1f1730;
  --ink-soft:#4a4160;
  --ink-mute:#6f6785;
  --surface:#FFFFFF;
  --line:rgba(31,23,48,.12);
  --line-strong:rgba(31,23,48,.26);
}

/* the stats/feature section that used to be a dark slab is now a light one */
.section--forest{background:var(--sand);color:var(--text)}
.section--forest :is(h1,h2,h3,h4){color:var(--text)}
.section--forest :is(p,li,dd,td,.lede,.card p,.check li,.schedule__what span){color:var(--text-soft)}
.section--forest :is(th,.facts__label,.field__hint){color:var(--text-mute)}
.section--forest :is(strong){color:var(--text)}
.section--forest .eyebrow{color:var(--text-mute)}
.section--forest .eyebrow::after{background:var(--line)}
.section--forest a{color:var(--link)}
.section--forest .card{background:var(--surface);border-color:var(--line)}
.section--forest .card__icon{color:var(--forest)}
.section--forest .card__more,.section--forest .card__more a{color:var(--forest)}
.section--forest :is(table,.table-scroll){border-color:var(--line)}
.section--forest :is(th,td){border-bottom-color:var(--line)}
.section--forest .btn--ghost{border-color:var(--line-strong);color:var(--text)}
.section--forest .btn--ghost:hover{background:rgba(69,36,135,.07);border-color:var(--forest);color:var(--text)}
.section--forest .pill{border-color:var(--line-strong);color:var(--text-soft)}
.section--forest .check li::before{background:var(--sage-pale);box-shadow:inset 0 0 0 1px var(--forest)}
.section--forest .quote{color:var(--text)}

/* a photo band on a light ground: image beside a card, not text over a dark scrim */
.band--light{background:var(--paper-2);color:var(--text);overflow:visible}
.band--light .band__media{position:relative;inset:auto;z-index:0;border-radius:var(--radius-lg);overflow:hidden}
.band--light .band__media img{border-radius:var(--radius-lg)}
.band--light .band__scrim{display:none}
.band--light .wrap{padding-block:var(--section-y)}
.band--light .band__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem);align-items:center}
@media (max-width:880px){.band--light .band__grid{grid-template-columns:1fr}}
.band--light :is(h2,h3){color:var(--text)}
.band--light :is(p,li,.lede){color:var(--text-soft)}
.band--light .band__inner{max-width:52ch}
.band--light .eyebrow{color:var(--text-mute)}
.band--light .eyebrow::after{background:var(--line)}
.band--light .btn--ghost{border-color:var(--line-strong);color:var(--text)}
.band--light .btn--ghost:hover{border-color:var(--forest);background:rgba(69,36,135,.07);color:var(--text)}

/* hero: brighter, less funereal. The photograph should still read as daylight. */
.hero__scrim{
  background:
    linear-gradient(100deg, rgba(26,12,52,.9) 0%, rgba(32,15,64,.76) 36%, rgba(38,19,76,.4) 66%, rgba(42,21,82,.18) 100%),
    linear-gradient(to top, rgba(12,32,25,.6), rgba(12,32,25,0) 58%);
}
@media (max-width:900px){
  .hero__scrim{background:linear-gradient(to top, rgba(12,32,25,.95) 26%, rgba(30,14,60,.78) 64%, rgba(32,15,64,.6))}
}
.hero__media img{filter:saturate(.95) contrast(1.02)}

/* utility bar is school information, not a crisis line */
.utility{background:var(--forest-deep);color:var(--on-dark-mute);font-size:.82rem}
.utility a{color:#cbb9ec}
.utility__sep{opacity:.4;margin-inline:.7rem}

/* the district's mark drops straight into this slot */
.brand__mark{width:40px;height:40px;flex:none;object-fit:contain}
.footer__brand .brand__mark{filter:brightness(0) saturate(100%) invert(93%) sepia(11%) saturate(268%) hue-rotate(4deg) brightness(102%) contrast(93%)}

/* ==========================================================================
   SERENITY HIGH BRAND PALETTE
   Sampled from the official wordmark: purple #452487, silver #9C9C9C, black.
   (The navy on the district's CMS shell is Apptegy platform chrome, not the
   school's identity.) The brand tokens below are remapped in place, so every
   component inherits the purple without being rewritten.
   ========================================================================== */

:root{
  /* brand scale, built around the wordmark purple */
  --forest:       #452487;   /* primary brand — links, headings accents */
  --forest-deep:  #2A1552;   /* deepest ground — footer, closing band */
  --forest-mid:   #5B36A8;
  --sage:         #A294C9;   /* muted lavender for type on dark grounds */
  --sage-pale:    #E4DDF2;

  /* accents */
  --honey:        #6B46B0;   /* accent violet: rules, step numbers, focus */
  --honey-soft:   #E4DDF2;
  --lake:         #4A5C86;
  --clay:         #8C5A9E;
  --silver:       #9C9C9C;   /* the butterfly's grey, for fine rules */

  /* neutrals warmed slightly toward the brand hue rather than pure grey */
  --paper:        #FCFBFD;
  --paper-2:      #FFFFFF;
  --sand:         #F3F0F8;
  --sand-deep:    #E6E0F0;
  --ink:          #1F1730;
  --ink-soft:     #4A4160;
  --ink-mute:     #6F6785;
  --surface:      #FFFFFF;
  --line:         rgba(31,23,48,.12);
  --line-strong:  rgba(31,23,48,.26);

  --on-dark:      #F0EBF8;
  --on-dark-mute: #BCB0D8;

  --shadow-sm:    0 1px 2px rgba(42,21,82,.07), 0 2px 8px rgba(42,21,82,.06);
  --shadow-lg:    0 24px 60px -28px rgba(42,21,82,.42), 0 2px 8px rgba(42,21,82,.07);
}

/* --- the wordmark carries the name, so the lockup is the logo plus a rule --- */
.brand{gap:.8rem;align-items:center}
.brand__mark{width:auto;height:46px;max-width:none}
.brand__sub{
  display:block;margin:0;padding-left:.85rem;border-left:1px solid var(--line-strong);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-mute);line-height:1.45;max-width:11rem;white-space:normal;
}
.brand--footer .brand__mark{height:52px}
.brand--footer .brand__sub{color:var(--sage);border-left-color:rgba(240,235,248,.28)}
.footer__brand .brand__mark{filter:none}
@media (max-width:1180px){.brand__mark{height:42px}}
@media (max-width:620px){
  .brand__sub{display:none}
  .brand__mark{height:40px}
}

/* --- purple scrims and washes replace the green ones --- */
.hero__scrim{
  background:
    linear-gradient(100deg, rgba(26,12,52,.92) 0%, rgba(32,15,64,.8) 36%, rgba(42,21,82,.46) 66%, rgba(48,25,92,.2) 100%),
    linear-gradient(to top, rgba(24,11,48,.62), rgba(24,11,48,0) 58%);
}
@media (max-width:900px){
  .hero__scrim{background:linear-gradient(to top, rgba(24,11,48,.95) 26%, rgba(30,14,60,.8) 64%, rgba(36,18,70,.62))}
}
.band__scrim{background:linear-gradient(90deg,rgba(28,13,56,.94) 0%,rgba(30,14,60,.84) 45%,rgba(36,18,72,.46) 100%)}
.cta-band--media .band__scrim{
  background:linear-gradient(90deg,rgba(28,13,56,.95) 0%,rgba(30,14,60,.88) 50%,rgba(36,18,72,.58) 100%);
}
@media (max-width:820px){
  .cta-band--media .band__scrim{background:linear-gradient(to top,rgba(28,13,56,.96) 35%,rgba(32,15,64,.82))}
}
@media (max-width:760px){
  .band__scrim{background:linear-gradient(to top,rgba(28,13,56,.96) 30%,rgba(32,15,64,.8))}
}
.imgcard__media::after{background:linear-gradient(170deg,rgba(69,36,135,.15),rgba(156,156,156,.07))}
.fig--toned::after{background:linear-gradient(200deg,rgba(42,21,82,.44),rgba(42,21,82,.05) 55%,rgba(107,70,176,.16))}

/* --- the primary call to action reads as white on purple --- */
.btn--honey{background:#FFFFFF;color:#2A1552}
.btn--honey:hover{background:var(--sand-deep);color:#1E0F3D}
.hero__kicker{color:#CBB9EC}
.hero__kicker::before{background:#CBB9EC}
.utility a{color:#CBB9EC}
.cta-band .eyebrow,.band:not(.band--light) .eyebrow{color:#BCB0D8}
.section--forest .facts__num,.facts__num{color:var(--forest)}

/* silver hairlines, straight off the butterfly */
.eyebrow::after,.eyebrow--center::before{background:linear-gradient(90deg,var(--silver),transparent)}
.section--forest .eyebrow::after{background:linear-gradient(90deg,var(--silver),transparent)}

/* let the photograph keep its own colour on the open side of the hero */
.hero__scrim{
  background:
    linear-gradient(100deg, rgba(26,12,52,.93) 0%, rgba(30,14,60,.78) 32%, rgba(38,19,76,.36) 58%, rgba(42,21,82,.06) 82%, rgba(42,21,82,0) 100%),
    linear-gradient(to top, rgba(24,11,48,.5), rgba(24,11,48,0) 46%);
}
.hero__media img{filter:saturate(1) contrast(1.02)}

/* --- photography graded toward the brand so cool and warm shots sit together --- */
.fig img,.imgcard img,.hero__media img,.band__media img{
  filter:saturate(.72) contrast(1.05) sepia(.14) hue-rotate(212deg);
}
.hero__media img{filter:saturate(.8) contrast(1.04) sepia(.1) hue-rotate(212deg)}
.imgcard__media::after{background:linear-gradient(170deg,rgba(69,36,135,.2),rgba(107,70,176,.1))}


/* --- the client's own brand tokens, taken from the HTML they supplied --- */
:root{
  --forest:#4A1D8C;      /* their --violet */
  --forest-mid:#7B5BB8;  /* their --violet-soft */
  --forest-deep:#2B1052;
  --honey:#6B46B0;
  --sand:#F2EEF7;        /* their --wash */
  --sand-deep:#E5DDF1;
  --ink:#1B1A22;         /* their --ink */
  --ink-soft:#56535F;    /* their --ink-soft */
  --paper:#FBFAF8;       /* their --paper */
  --line:#DFDBD5;        /* their --rule */
  --line-strong:rgba(27,26,34,.3);
}

/* --- ported editorial pages: a flat prose column with real rhythm --- */
.stack-page > * + *{margin-top:1.15rem}
.stack-page > h2{margin-top:2.75rem}
.stack-page > h3{margin-top:2rem}
.stack-page > .cards,.stack-page > .callout,.stack-page > .rule,
.stack-page > .table-scroll,.stack-page > .steps,.stack-page > .fig,
.stack-page > .quote,.stack-page > .spec{margin-top:2rem;margin-bottom:2rem}
.stack-page > .card{margin-top:1rem}
.stack-page .card h3{font-size:1.12rem}

/* the client's "rule statement" — the single sentence the page turns on */
.rule{
  border-left:3px solid var(--forest);background:var(--sand);
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  padding:clamp(1.2rem,2.6vw,1.8rem) clamp(1.2rem,2.6vw,2rem);
  font-family:var(--display);font-size:clamp(1.18rem,1.02rem + .8vw,1.5rem);
  line-height:1.45;font-variation-settings:"opsz" 44,"WONK" 1;color:var(--text);
}

/* plain numbered list for the "do this now" blocks */
.numlist{list-style:none;counter-reset:n;padding:0;margin:0;display:grid;gap:1rem}
.numlist li{counter-increment:n;display:grid;grid-template-columns:1.9rem minmax(0,1fr);gap:.9rem;
  align-items:start;color:var(--text-soft)}
.numlist li::before{content:counter(n);font-family:var(--mono);font-size:.74rem;font-weight:600;
  color:var(--forest);border:1px solid var(--line-strong);border-radius:50%;
  width:1.9rem;height:1.9rem;display:grid;place-items:center;margin-top:.1rem}
.numlist li strong{color:var(--text)}

/* their comparison tables carry a highlighted alternate row */
.stack-page table tr.hl td,.stack-page table tr.hl th{background:color-mix(in srgb,var(--sand) 60%,transparent)}
/* the footer now carries four link columns beside the brand block */
.footer__grid{grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.footer__grid{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:760px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer__grid{grid-template-columns:1fr}}
/* the client distinguishes "fit" from "not a fit" — keep that distinction */
.card--no .check li::before{background:transparent;box-shadow:inset 0 0 0 1px var(--line-strong)}
.card--no h3{color:var(--text-soft)}

/* ==========================================================================
   PHOTO TREATMENT — purple belongs in the UI, not on people's faces.
   Overlays are neutral black; photographs keep their own colour.
   ========================================================================== */

/* drop the hue-rotate grade entirely — it was tinting skin */
.fig img,.imgcard img,.hero__media img,.band__media img{
  filter:saturate(.96) contrast(1.03);
}

/* hero: black scrim, weighted to the text side and clearing the faces */
.hero__scrim{
  background:
    linear-gradient(100deg,
      rgba(0,0,0,.84) 0%,
      rgba(0,0,0,.72) 30%,
      rgba(0,0,0,.42) 54%,
      rgba(0,0,0,.14) 76%,
      rgba(0,0,0,0) 92%),
    linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0) 46%);
}
@media (max-width:900px){
  .hero__scrim{
    background:linear-gradient(to top, rgba(0,0,0,.9) 24%, rgba(0,0,0,.66) 58%, rgba(0,0,0,.35));
  }
}

/* the same rule for every other photo-backed band */
.band__scrim{
  background:linear-gradient(90deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.72) 44%,rgba(0,0,0,.3) 100%);
}
.cta-band--media .band__scrim{
  background:linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.76) 48%,rgba(0,0,0,.38) 100%);
}
@media (max-width:820px){
  .cta-band--media .band__scrim{background:linear-gradient(to top,rgba(0,0,0,.92) 32%,rgba(0,0,0,.7))}
}
@media (max-width:760px){
  .band__scrim{background:linear-gradient(to top,rgba(0,0,0,.92) 28%,rgba(0,0,0,.7))}
}

/* the card wash was tinting faces too — make it a plain contrast lift */
.imgcard__media::after{
  background:linear-gradient(170deg,rgba(0,0,0,.1),rgba(0,0,0,0) 55%);
  mix-blend-mode:normal;
}
.fig--toned img{filter:saturate(.92) contrast(1.04) brightness(.96)}
.fig--toned::after{background:linear-gradient(200deg,rgba(0,0,0,.3),rgba(0,0,0,.04) 60%)}

/* hero is a single column now: headline, standfirst, two actions, nothing fighting the photo */
.hero__grid{grid-template-columns:minmax(0,1fr)}
.hero h1{max-width:15ch}
.hero__lede{max-width:46ch}
.hero .wrap{padding-block:clamp(3.5rem,8vw,6rem)}
/* keep the headline clear of the faces on the right of the photograph */
.hero h1{max-width:13ch}
.hero__lede{max-width:44ch}
.hero__grid > div{max-width:min(100%,42rem)}
/* pills that are links need a hover state */
a.pill{text-decoration:none;transition:border-color .15s ease,background .15s ease,color .15s ease}
a.pill:hover{border-color:var(--forest);background:var(--sand);color:var(--forest)}

/* three-up photo gallery for the school's own photographs */
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.75rem,1.6vw,1.2rem)}
.gallery .fig img{aspect-ratio:16/10}
@media (max-width:760px){.gallery{grid-template-columns:1fr}}