/* Brooklyn School of Excellence — "Honor Roll" design system */
:root {
  --paper: #FAF7F5;
  --vellum: #F7ECEF;
  --ink: #292629;
  --ink-2: #4A4247;
  --ink-3: #6B6368;
  --rule: rgba(41, 38, 41, .14);
  --rule-2: rgba(41, 38, 41, .08);
  --crimson: #C22E49;   /* original BSE crimson (Ben, 2026-11-08: colors from the original site) */
  --crimson-d: #9E233B;
  --oxblood: #1F1416;   /* dark bands and footer: kept as before (Ben, 2026-11-08: the gray looked wrong) */
  --oxblood-2: #2C1D20;
  --on-ox: #FAF7F5;
  --on-ox-2: rgba(250, 247, 245, .76);
  --gilt: #F7ECEF;   /* accent ON DARK only: pale pink (no gold in the original) */
  --gilt-l: #FFFFFF;
  --rust: #C22E49;   /* section numbers and dates: crimson */
  --rust-d: #A9253E;   /* crimson, darker, for small text on paper */
  --night: #292629;

  --serif: "EB Garamond", Garamond, Georgia, serif;
  --sans: "EB Garamond", Garamond, Georgia, serif;

  --fs-hero: clamp(2.6rem, 5.4vw, 6rem);
  --fs-h1: clamp(2.5rem, 5.2vw, 4.9rem);
  --fs-h2: clamp(2rem, 3.4vw, 3.25rem);
  --fs-h3: clamp(1.2rem, 1.5vw, 1.4rem);
  --fs-lede: clamp(1.15rem, 1.5vw, 1.35rem);
  --fs-body: 1.0625rem;
  --fs-sm: .9rem;
  --fs-xs: .78rem;

  --gut: clamp(20px, 4.5vw, 64px);
  --max: 1200px;
  --r: 4px;
  --r-sm: 4px;
  --sp-1: .5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2.5rem; --sp-5: 4rem; --sp-6: clamp(4.5rem, 9vw, 8.5rem);

  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-1: 180ms;
  --t-2: 320ms;
  --t-3: 800ms;
  --hdr: 76px;
  color-scheme: light;
}

/* ───── base ───── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 24px); scrollbar-color: var(--crimson) var(--vellum); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; -webkit-tap-highlight-color: transparent; background: var(--paper); color: var(--ink); font: 400 var(--fs-body)/1.62 var(--sans); font-feature-settings: "kern"; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: clip; font-size-adjust: var(--fsa, .46); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); transition: color var(--t-1) var(--ease), text-decoration-color var(--t-1) var(--ease); }
a:hover { text-decoration-color: currentColor; }
:is(.flow p, .flow .list, .faq__a, dd, .person__bio, .evp__desc, .phero__lede) a:not(.btn) { color: var(--crimson-d); }
::selection { background: var(--crimson); color: var(--paper); }
input, textarea, select { caret-color: var(--crimson); }
:focus-visible { outline: 2px solid var(--crimson); outline-offset: 3px; border-radius: 3px; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; text-wrap: balance; }
h1, h2 { font-family: var(--serif); letter-spacing: -.015em; line-height: 1.04; font-size-adjust: none; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.25; font-weight: 650; letter-spacing: -.005em; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.wrap { width: min(var(--max), 100% - 2 * var(--gut)); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.anchor { position: relative; top: calc(-1 * var(--hdr)); display: block; height: 0; }
.skip { position: fixed; left: 12px; top: 12px; transform: translateY(-200%); z-index: 100; background: var(--ink); color: var(--paper); padding: .6em 1em; border-radius: var(--r-sm); }
.skip:focus { transform: none; }
.crest { width: 44px; height: auto; color: var(--crimson); flex: none; }

/* ───── buttons ───── */
.btn { --bh: 48px; display: inline-flex; align-items: center; gap: .6em; min-height: var(--bh); padding: 0 1.35em; border-radius: 999px; font: 600 .95rem/1 var(--sans); letter-spacing: .01em; text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background var(--t-1) var(--ease), color var(--t-1) var(--ease), border-color var(--t-1) var(--ease), transform var(--t-1) var(--ease); font-size-adjust: var(--fsa, .46); }
.cta-line .btn, .flow .btn { white-space: normal; text-align: left; line-height: 1.25; padding-block: .75em; max-width: 100%; }
.btn svg { flex: none; width: 18px; height: 18px; transition: transform var(--t-2) var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn--solid { background: var(--crimson); color: #fff; }
.btn--solid:hover { background: var(--crimson-d); }
.btn--line { border-color: var(--rule); color: var(--ink); background: transparent; }
.btn--line:hover { border-color: var(--ink); }
.btn--ghost { border-color: color-mix(in srgb, var(--on-ox) 35%, transparent); color: var(--on-ox); }
.btn--ghost:hover { border-color: var(--on-ox); }
.btn--gilt { background: var(--gilt); color: var(--night); }
.btn--gilt:hover { background: var(--gilt-l); }
.btn--text { padding-inline: .2em; color: var(--ink); text-decoration: underline; text-underline-offset: .3em; text-decoration-color: var(--rule); }
.btn--text:hover { text-decoration-color: var(--crimson); }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* ───── grade line (K → College) ───── */
.gl { display: flex; align-items: flex-end; width: 100%; gap: 0; }
.gl__m { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.gl__m i { display: block; width: 100%; height: 10px; border-left: 1px solid var(--ink-3); border-bottom: 1px solid var(--ink-3); }
.gl__m:last-child { flex: 1.6; }
.gl__m b { font: 600 var(--fs-xs)/1 var(--sans); color: var(--ink-3); letter-spacing: .04em; font-variant-numeric: lining-nums tabular-nums; font-size-adjust: var(--fsa, .46); }
.gl__m.is-on i { border-color: var(--crimson); border-bottom-width: 3px; }
.gl__m.is-on b { color: var(--crimson); }

/* ───── header ───── */
.hdr { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid transparent; transition: border-color var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease); view-transition-name: hdr; }
.hdr.is-scrolled { border-color: var(--rule); }
.hdr__bar { display: flex; align-items: center; gap: 2rem; height: var(--hdr); width: min(1480px, 100% - 2 * var(--gut)); margin-inline: auto; }
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; flex: none; }
.brand__name { display: flex; flex-direction: column; font: 600 .98rem/1.08 var(--serif); letter-spacing: .02em; text-transform: none; color: var(--ink); font-size-adjust: none; }
.brand__name b { font-weight: 600; }
.brand__name b:last-child { color: var(--crimson); }
.nav { margin-inline: auto; }
.nav > ul { display: flex; gap: .2rem; }
.nav__top { display: flex; align-items: center; gap: .3em; padding: .55em .8em; border-radius: 999px; font-weight: 600; font-size: .95rem; text-decoration: none; color: var(--ink); }
.nav__top svg { width: 14px; height: 14px; opacity: .5; transition: transform var(--t-2) var(--ease); }
.nav__top:hover, .nav__item.is-open .nav__top, .nav__top[aria-current] { background: var(--vellum); }
.nav__item.is-open .nav__top svg { transform: rotate(180deg); }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); box-shadow: 0 30px 60px -30px rgba(41, 38, 41, .25); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--t-1) var(--ease), transform var(--t-2) var(--ease), visibility 0s var(--t-2); }
.nav__item.is-open .mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mega__in { display: grid; grid-template-columns: 1.1fr repeat(3, 1fr); gap: 2.5rem; width: min(1480px, 100% - 2 * var(--gut)); margin-inline: auto; padding: 2.2rem 0 2.6rem; }
.mega__title { display: inline-flex; align-items: center; gap: .5em; font: 500 2.4rem/1 var(--serif); text-decoration: none; font-size-adjust: none; }
.mega__title span svg { width: 26px; height: 26px; color: var(--crimson); transition: transform var(--t-2) var(--ease); }
.mega__title:hover span svg { transform: translateX(5px); }
.mega__h { margin: 0 0 .9rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; text-transform: none; color: var(--ink-3); }
.mega__col li a { display: block; padding: .32rem 0; color: var(--ink); text-decoration: none; font-size: 1rem; }
.mega__col li a:hover { color: var(--crimson); }
.hdr__act { display: flex; align-items: center; gap: .6rem; flex: none; }
.hdr__link { display: inline-flex; align-items: center; gap: .45em; padding: .5em .6em; text-decoration: none; font-weight: 600; font-size: .92rem; }
.hdr__link svg { width: 18px; height: 18px; color: var(--crimson); }
.hdr__act .btn { --bh: 44px; }
.burger { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--rule); background: transparent; color: var(--ink); cursor: pointer; place-items: center; }
.burger svg { width: 22px; height: 22px; }
.hdr__progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.hdr__progress i { display: block; height: 100%; width: 100%; background: var(--crimson); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.sheet { position: fixed; inset: var(--hdr) 0 0 0; z-index: 49; background: var(--paper); overflow-y: auto; padding: 1rem var(--gut) 3rem; }
.sheet__grp { border-bottom: 1px solid var(--rule); }
.sheet__grp summary { display: flex; justify-content: space-between; align-items: center; padding: 1.05rem 0; font: 500 1.7rem/1 var(--serif); cursor: pointer; list-style: none; font-size-adjust: none; }
.sheet__grp summary::-webkit-details-marker { display: none; }
.sheet__grp summary svg { width: 22px; color: var(--crimson); transition: transform var(--t-2) var(--ease); }
.sheet__grp[open] summary svg { transform: rotate(45deg); }
.sheet__grp ul { padding: 0 0 1rem; columns: 2; column-gap: 1rem; }
.sheet__grp li a { display: block; padding: .45rem 0; text-decoration: none; break-inside: avoid; }
.sheet__cta { display: grid; gap: .6rem; margin-top: 1.6rem; }
.sheet__cta .btn { justify-content: center; }

@media (max-width: 1240px) { .hdr__tel span { display: none; } .hdr__link span { display: none; } .nav__top { padding-inline: .6em; } }
@media (max-width: 1060px) { .nav, .hdr__link { display: none; } .burger { display: grid; } .hdr__bar { justify-content: space-between; } }
@media (max-width: 520px) { :root { --hdr: 66px; } .brand__name { font-size: .82rem; } .crest { width: 38px; } .hdr__act .btn { display: none; } }

/* ───── hero ───── */
.hero { position: relative; padding-top: clamp(1.5rem, 3vw, 3rem); }
.hero__in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; min-height: min(calc(100svh - var(--hdr) - 120px), 820px); }
.hero__latin { margin: 0 0 1.4rem; font: italic 500 1.15rem/1 var(--serif); color: var(--crimson); font-size-adjust: none; }
.hero__h { font: 500 var(--fs-hero)/.98 var(--serif); letter-spacing: -.025em; font-size-adjust: none; }
.hero__h .ln { display: block; }
.hero__h em { font-style: italic; color: var(--crimson); }
.hero__lede { max-width: 36em; margin: 1.8rem 0 2rem; font-size: var(--fs-lede); line-height: 1.5; color: var(--ink-2); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.hero__rec { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: 2.4rem; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.hero__rec li { display: flex; align-items: center; gap: .55rem; }
.hero__rec li::before { content: ""; width: 7px; height: 7px; background: var(--gilt); transform: rotate(45deg); }
.hero__gl { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2rem; padding: 2.2rem 0 2.6rem; }
.hero__gl p { margin: 0; font: italic 500 1rem/1.2 var(--serif); color: var(--ink-2); font-size-adjust: none; }

.yb { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; height: min(78svh, 760px); overflow: hidden; border-radius: var(--r); -webkit-mask-image: linear-gradient(transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(transparent, #000 9%, #000 91%, transparent); }
.yb__col { overflow: hidden; }
.yb__track { display: flex; flex-direction: column; gap: 14px; }
.yb__col--1 .yb__track { transform: translateY(-50%); }
.yb figure { margin: 0; border-radius: var(--r); overflow: hidden; background: var(--vellum); aspect-ratio: 4 / 5; }
.yb figure:nth-child(3n + 2) { aspect-ratio: 1; }
.yb img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  .yb__col--0 .yb__track { animation: yb-up 70s linear infinite; }
  .yb__col--1 .yb__track { animation: yb-down 80s linear infinite; }
  .js .hero__h .ln, .js .hero__latin, .js .hero__lede, .js .hero__cta, .js .hero__rec { animation: rise var(--t-3) var(--ease) both; }
  .js .hero__h .ln:nth-child(2) { animation-delay: 70ms; } .js .hero__h .ln:nth-child(3) { animation-delay: 140ms; } .js .hero__h .ln:nth-child(4) { animation-delay: 210ms; }
  .js .hero__lede { animation-delay: 320ms; } .js .hero__cta { animation-delay: 400ms; } .js .hero__rec { animation-delay: 480ms; }
  .js .yb { animation: fade 1.2s var(--ease) both .2s; }
}
@keyframes yb-up { to { transform: translateY(-50%); } }
@keyframes yb-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@keyframes rise { from { opacity: .001; transform: translateY(.45em); } }
@keyframes fade { from { opacity: 0; } }
@media (max-width: 900px) {
  .hero__in { grid-template-columns: 1fr; min-height: 0; }
  .yb { height: 340px; grid-template-columns: 1fr 1fr 1fr; order: -1; }
  .yb__col--1 { display: block; }
  .yb::after { content: none; }
  .hero__gl { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 900px) { .yb { grid-template-columns: 1fr 1fr; height: 300px; } }

/* ───── report card (outcomes) ───── */
.rc { background: var(--oxblood); color: var(--on-ox); padding: var(--sp-6) 0 0; overflow: hidden; }
.rc__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: stretch; }
.rc__lead h2 { font-size: var(--fs-h2); margin-bottom: 1.4rem; }
.rc__lead { display: flex; flex-direction: column; align-self: stretch; }
.rc__lead p { color: var(--on-ox-2); font-size: var(--fs-sm); max-width: 34em; margin-bottom: 1.8rem; }
.rc__lead .btn { align-self: flex-start; }
.rc__img { flex: 1; min-height: 260px; margin: 2.4rem 0 0; border-radius: var(--r); overflow: hidden; position: relative; }
.rc__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rc__card { border-top: 1px solid color-mix(in srgb, var(--gilt) 60%, transparent); }
.rc__row { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: baseline; gap: 1.5rem; padding: 1.25rem 0; border-bottom: 1px solid color-mix(in srgb, var(--gilt) 30%, transparent); }
.rc__row b { font: 500 clamp(3.6rem, 8vw, 7rem)/.9 var(--serif); color: var(--gilt-l); letter-spacing: -.03em; font-variant-numeric: lining-nums; font-size-adjust: none; }
.rc__row span { font-size: 1.1rem; color: var(--on-ox); }
.rc__sub { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; padding-top: 1.5rem; }
.rc__sub > p { grid-column: 1 / -1; margin: 0; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; text-transform: none; color: var(--on-ox-2); }
.rc__row--sm { display: block; padding: 0; border: 0; }
.rc__row--sm b { display: block; font-size: clamp(2.2rem, 4vw, 3.2rem); margin-bottom: .35rem; }
.rc__row--sm span { font-size: var(--fs-sm); color: var(--on-ox-2); }
.mq { margin-top: var(--sp-5); border-top: 1px solid color-mix(in srgb, var(--gilt) 30%, transparent); padding: 1.3rem 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mq__track { display: flex; width: max-content; gap: 0; }
.mq li { display: flex; align-items: center; font: italic 500 clamp(1.3rem, 2.2vw, 1.9rem)/1 var(--serif); white-space: nowrap; color: var(--on-ox); padding-right: 2.4rem; font-size-adjust: none; }
.mq li::after { content: ""; width: 7px; height: 7px; margin-left: 2.4rem; background: var(--gilt); transform: rotate(45deg); }
@media (prefers-reduced-motion: no-preference) { .mq__track { animation: mq 60s linear infinite; } .mq:hover .mq__track { animation-play-state: paused; } }
@media (prefers-reduced-motion: reduce) { .mq__track { flex-wrap: wrap; width: auto; row-gap: 1rem; } .mq li[aria-hidden] { display: none; } }
@keyframes mq { to { transform: translateX(-50%); } }
@media (max-width: 900px) { .rc__in { grid-template-columns: 1fr; } .rc__row { grid-template-columns: 1fr; gap: .4rem; } .rc__sub { grid-template-columns: 1fr 1fr 1fr; gap: 1rem; } }

/* ───── statement + pillars ───── */
.st { padding: var(--sp-6) 0; }
.st__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.st__big { margin: 0 0 1.6rem; font: 500 clamp(1.75rem, 2.9vw, 2.75rem)/1.16 var(--serif); letter-spacing: -.01em; font-size-adjust: none; }
.js .rw { color: color-mix(in srgb, var(--ink) 22%, var(--paper)); transition: color .35s var(--ease); }
.js .rw.is-lit { color: var(--ink); }
.st__side { color: var(--ink-2); max-width: 34em; margin-bottom: 1.6rem; }
.st__art { position: relative; aspect-ratio: 1 / .92; }
.st__art figure { position: absolute; margin: 0; border-radius: var(--r); overflow: hidden; }
.st__art img { width: 100%; height: 100%; object-fit: cover; }
.st__a { inset: 0 18% 14% 0; }
.st__b { right: 0; bottom: 0; width: 44%; aspect-ratio: 4 / 5; border: 6px solid var(--paper); box-shadow: 0 24px 50px -24px rgba(41, 38, 41, .45); }
.st__cap { position: absolute; left: 1.2rem; bottom: 18%; margin: 0; padding: .7rem 1rem; background: var(--paper); border-radius: var(--r-sm); font: italic 500 1.15rem/1.2 var(--serif); color: var(--ink-2); font-size-adjust: none; }
.st__cap b { font-style: normal; font-weight: 600; color: var(--crimson); }
.pl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem; margin-top: var(--sp-5); }
.pl li { display: flex; flex-direction: column; }
.pl__img { margin: 0 0 1.1rem; aspect-ratio: 4 / 3; border-radius: var(--r-sm); overflow: hidden; background: var(--vellum); }
.pl__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.pl li:hover .pl__img img { transform: scale(1.04); }
.pl__n { display: block; font: italic 500 1rem/1 var(--serif); color: var(--crimson); margin-bottom: .55rem; font-size-adjust: none; }
.pl h3 { margin-bottom: .45rem; }
.pl p { color: var(--ink-2); font-size: .95rem; margin: 0; }
@media (max-width: 900px) { .st__in { grid-template-columns: 1fr; } .st__art { max-width: 560px; } .pl { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pl { gap: 1.6rem 1rem; } .pl h3 { font-size: 1.02rem; } .pl p { font-size: .86rem; } }

/* ───── pathway scroll scene ───── */
.pw { background: var(--vellum); padding: var(--sp-6) 0; }
.pw__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); }
.pw__stick { position: sticky; top: calc(var(--hdr) + 2rem); align-self: start; height: calc(100svh - var(--hdr) - 4rem); max-height: 780px; display: grid; grid-template-rows: auto 1fr; gap: 1.5rem; }
.pw__h { font-size: var(--fs-h2); }
.pw__vis { position: relative; }
.pw__marks { position: absolute; z-index: 2; pointer-events: none; }
.pw__imgs { position: relative; border-radius: var(--r); overflow: hidden; min-height: 280px; }
.pw__img { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.04); transition: opacity .7s var(--ease), transform 1.2s var(--ease); }
.pw__img.is-on { opacity: 1; transform: none; }
.pw__img img { width: 100%; height: 100%; object-fit: cover; }
.pw__stick { grid-template-rows: auto auto 1fr; }
.pw__marks { position: relative; height: clamp(5rem, 10vw, 9rem); overflow: hidden; }
.pw__mark { position: absolute; left: 0; top: 0; white-space: nowrap; font: italic 500 clamp(4.4rem, 8.4vw, 8rem)/1 var(--serif); color: var(--crimson); letter-spacing: -.04em; opacity: 0; transform: translateY(60%); transition: opacity var(--t-2) var(--ease), transform .6s var(--ease); font-size-adjust: none; }
.pw__mark.is-on { opacity: 1; transform: none; }
.pw__mark.is-past { transform: translateY(-60%); }
.pw__list { padding: 10vh 0; }
.pw__st { min-height: 54vh; display: flex; align-items: center; border-top: 1px solid var(--rule); }
.pw__st a { display: block; text-decoration: none; padding: 2rem 0; opacity: .35; transition: opacity var(--t-2) var(--ease); }
.pw__st.is-on a, .pw__st a:hover, .pw__st a:focus-visible { opacity: 1; }
.pw__range { display: block; font: 600 var(--fs-sm)/1 var(--sans); color: var(--crimson); letter-spacing: .04em; margin-bottom: 1rem; font-variant-numeric: lining-nums tabular-nums; font-size-adjust: var(--fsa, .46); }
.pw__st h3 { font: 500 clamp(2.2rem, 4vw, 3.6rem)/1 var(--serif); letter-spacing: -.02em; margin-bottom: 1.1rem; font-size-adjust: none; }
.pw__st p { color: var(--ink-2); max-width: 32em; font-size: 1.08rem; }
.pw__go { display: inline-flex; align-items: center; gap: .5em; font-weight: 600; border-bottom: 1px solid var(--crimson); padding-bottom: 2px; }
.pw__go svg { width: 17px; height: 17px; color: var(--crimson); transition: transform var(--t-2) var(--ease); }
.pw__st a:hover .pw__go svg { transform: translateX(4px); }
@media (max-width: 900px) {
  .pw__in { grid-template-columns: 1fr; }
  .pw__stick { position: static; height: auto; display: block; }
  .pw__marks, .pw__imgs { display: none; }
  .pw__list { padding: 1.5rem 0 0; }
  .pw__st { min-height: 0; }
  .pw__st a { opacity: 1; }
}

/* ───── student achievements ───── */
.hb { background: var(--oxblood); color: var(--on-ox); padding: var(--sp-6) 0; border-top: 1px solid color-mix(in srgb, var(--gilt) 25%, transparent); }
.hb__in { display: grid; gap: var(--sp-4); }
.hb__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: end; }
.hb__intro h2 { color: var(--on-ox); }
.hb__intro p { color: var(--on-ox-2); max-width: 32em; margin: 0; justify-self: end; }
.hb__board { display: grid; gap: 1.6rem; }
.hb__tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.hb__tab { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 4 / 5; padding: 1rem; border: 0; border-radius: var(--r); overflow: hidden; text-align: left; cursor: pointer; color: #fff; font: inherit; background: var(--oxblood-2); isolation: isolate; transition: transform var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease); }
.hb__ph { position: absolute; inset: 0; z-index: -1; }
.hb__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), filter var(--t-2) var(--ease); filter: saturate(.85) brightness(.92); }
.hb__ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgba(20, 12, 14, .88)); }
.hb__nm { font: 500 1.35rem/1.1 var(--serif); margin-bottom: .35rem; font-size-adjust: none; }
.hb__tab small { font-size: .8rem; line-height: 1.35; color: rgba(255, 255, 255, .82); }
.hb__tab:hover .hb__ph img { transform: scale(1.05); filter: none; }
.hb__tab[aria-selected="true"] { box-shadow: 0 0 0 2px var(--gilt), 0 22px 40px -20px rgba(0, 0, 0, .6); transform: translateY(-4px); }
.hb__tab[aria-selected="true"] .hb__ph img { filter: none; }
.hb__tab[aria-selected="true"] .hb__nm { color: var(--gilt-l); }
.hb__panels { background: var(--oxblood-2); border: 1px solid color-mix(in srgb, var(--gilt) 35%, transparent); border-radius: var(--r); padding: clamp(1.4rem, 3vw, 2.6rem); }
.hb__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.4rem; padding-bottom: 1.2rem; border-bottom: 1px solid color-mix(in srgb, var(--gilt) 30%, transparent); }
.hb__head h3 { font: 500 clamp(1.8rem, 3vw, 2.5rem)/1 var(--serif); color: var(--on-ox); font-size-adjust: none; }
.hb__years { display: flex; gap: .3rem; padding: 4px; border: 1px solid color-mix(in srgb, var(--gilt) 35%, transparent); border-radius: 999px; }
.hb__y { border: 0; background: transparent; color: var(--on-ox-2); font: 600 .85rem/1 var(--sans); padding: .6em 1em; border-radius: 999px; cursor: pointer; font-variant-numeric: lining-nums tabular-nums; font-size-adjust: var(--fsa, .46); }
.hb__y:hover { color: var(--on-ox); }
.hb__y.is-on { background: var(--gilt); color: var(--night); }
.hb__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.4rem; }
.hb__list li { padding: 1.1rem 0 1.1rem 2.4rem; border-bottom: 1px solid rgba(247, 236, 239, .18); position: relative; }
.hb__list li::before { content: ""; position: absolute; left: .3rem; top: 1.45rem; width: 9px; height: 9px; background: var(--gilt); transform: rotate(45deg); }
.hb__list h4 { font: 600 1.02rem/1.3 var(--sans); color: var(--gilt-l); margin-bottom: .35rem; font-size-adjust: var(--fsa, .46); }
.hb__list p { margin: 0; color: var(--on-ox-2); font-size: .95rem; line-height: 1.5; }
@media (prefers-reduced-motion: no-preference) { .hb__list:not([hidden]) li { animation: rise .5s var(--ease) both; } .hb__list li:nth-child(2) { animation-delay: 40ms; } .hb__list li:nth-child(3) { animation-delay: 80ms; } .hb__list li:nth-child(n + 4) { animation-delay: 120ms; } }
@media (max-width: 1100px) {
  .hb__tabs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 10px; margin: -6px -2px 0; scrollbar-width: none; }
  .hb__tabs::-webkit-scrollbar { display: none; }
  .hb__tab { flex: 0 0 clamp(170px, 30vw, 230px); scroll-snap-align: start; }
}
@media (max-width: 900px) { .hb__intro { grid-template-columns: 1fr; } .hb__intro p { justify-self: start; } .hb__list { grid-template-columns: 1fr; } .hb__tab { flex-basis: 62vw; aspect-ratio: 5 / 4; } }

/* ───── programs index ───── */
.px { padding: var(--sp-6) 0; }
.px__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: end; margin-bottom: var(--sp-4); }
.px__head p { color: var(--ink-2); max-width: 30em; margin: 0; justify-self: end; }
.px__list { border-top: 1px solid var(--ink); }
.px__list a { display: grid; grid-template-columns: 2.6rem 150px minmax(0, 1fr) minmax(0, 1fr) 28px; align-items: center; gap: 1.6rem; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.px__n { font: italic 500 1rem/1 var(--serif); color: var(--crimson); font-size-adjust: none; }
.px__th { width: 150px; aspect-ratio: 3 / 2; border-radius: var(--r-sm); overflow: hidden; background: var(--vellum); }
.px__th img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.px__t { font: 500 clamp(1.7rem, 2.8vw, 2.5rem)/1.05 var(--serif); letter-spacing: -.01em; transition: color var(--t-2) var(--ease); font-size-adjust: none; }
.px__d { color: var(--ink-2); font-size: .98rem; }
.px__list svg { width: 26px; height: 26px; color: var(--crimson); transition: transform var(--t-2) var(--ease); }
.px__n { grid-area: 1 / 1; } .px__th { grid-area: 1 / 2; } .px__t { grid-area: 1 / 3; } .px__d { grid-area: 1 / 4; } .px__list svg { grid-area: 1 / 5; }
.px__list a:hover .px__t, .px__list a:focus-visible .px__t { color: var(--crimson); }
.px__list a:hover .px__th img { transform: scale(1.06); }
.px__list a:hover svg { transform: translate(3px, -3px); }
@media (max-width: 900px) {
  .px__head { grid-template-columns: 1fr; } .px__head p { justify-self: start; }
  .px__list a { grid-template-columns: 90px minmax(0, 1fr); gap: .3rem 1rem; }
  .px__n, .px__list svg { display: none; }
  .px__th { grid-area: 1 / 1 / span 2 / 2; width: 90px; aspect-ratio: 1; }
  .px__t { grid-area: 1 / 2; align-self: end; } .px__d { grid-area: 2 / 2; align-self: start; font-size: .9rem; }
}

/* ───── school events cards + news ───── */
.evs { padding: 0 0 var(--sp-5); }
.evs__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2rem 1.6rem; }
.evc a { display: flex; flex-direction: column; text-decoration: none; height: 100%; }
.evc__img { display: block; aspect-ratio: 3 / 2; border-radius: var(--r); overflow: hidden; background: var(--vellum); margin-bottom: 1rem; }
.evc__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.evc a:hover .evc__img img { transform: scale(1.04); }
.evc__d { display: flex; align-items: baseline; gap: .45rem; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); margin-bottom: .35rem; }
.evc__d b { font: 500 1.6rem/1 var(--serif); color: var(--crimson); font-size-adjust: none; }
.evc__soon { display: none; margin-left: auto; font-style: normal; font-size: .72rem; letter-spacing: .04em; padding: .4em .65em; border-radius: 4px; background: #F7ECEF; color: #8D2036; }
.evc.is-soon .evc__soon { display: inline-block; }
.evc__t { font: 500 1.45rem/1.2 var(--serif); margin-bottom: .4rem; transition: color var(--t-1) var(--ease); font-size-adjust: none; }
.evc a:hover .evc__t { color: var(--crimson); }
.evc__x { font-size: .92rem; color: var(--ink-2); line-height: 1.5; }
.ups__h { font: 500 clamp(1.6rem, 2.4vw, 2.1rem)/1.1 var(--serif); font-size-adjust: none; }
.news { padding: 0 0 var(--sp-6); }
.news__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.6rem; }
.news__grid a { display: block; text-decoration: none; }
.news__grid h3 { font: 500 1.5rem/1.15 var(--serif); margin-bottom: .55rem; font-size-adjust: none; }
.news__grid a:hover h3 { color: var(--crimson); }
.news__grid p { color: var(--ink-2); font-size: .93rem; }
@media (max-width: 1000px) { .evs__grid, .news__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .evs__grid, .news__grid { grid-template-columns: 1fr; } }

/* ───── upcoming ───── */
.ups { padding: 0 0 var(--sp-6); }
.ups__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 2rem; }
.ups__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3rem; border-top: 1px solid var(--ink); }
.up a { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr) auto; gap: 1.2rem; align-items: center; padding: 1.25rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.up__d { display: flex; flex-direction: column; }
.up__d b { font: 500 2.1rem/1 var(--serif); letter-spacing: -.02em; font-variant-numeric: lining-nums; white-space: nowrap; font-size-adjust: none; }
.up__d i { font-style: normal; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; text-transform: none; color: var(--crimson); margin-top: .3rem; }
.up__t b { display: block; font-weight: 650; font-size: 1.05rem; line-height: 1.3; }
.up__t span { display: block; font-size: .88rem; color: var(--ink-2); line-height: 1.45; margin-top: .2rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.up a:hover .up__t b { color: var(--crimson); }
.up[hidden] { display: none; }
@media (max-width: 900px) { .ups__list { grid-template-columns: 1fr; } .up .tag { display: none; } .up a { grid-template-columns: 4.4rem minmax(0, 1fr); } }

.tag { display: inline-block; font: 600 .72rem/1 var(--sans); letter-spacing: .04em; padding: .45em .7em; border-radius: 4px; background: var(--vellum); color: var(--ink-2); white-space: nowrap; font-size-adjust: var(--fsa, .46); }
.tag--closed { background: #F7ECEF; color: #8D2036; }
.tag--parents, .tag--community { background: #E7E4F1; color: #3E3566; }
.tag--trip { background: #E1EDE6; color: #22513A; }
.tag--art, .tag--arts, .tag--music { background: #F6EAD3; color: #6E4B12; }
.tag--compete, .tag--exams, .tag--mark { background: #E3E9F1; color: #23426B; }

/* ───── admissions steps ───── */
.as { background: var(--vellum); padding: var(--sp-6) 0; }
.as__in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); }
.as__head p { color: var(--ink-2); margin: 1.2rem 0 1.8rem; max-width: 28em; }
.as__cta { display: flex; flex-wrap: wrap; gap: .6rem; }
.as__steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; counter-reset: s; }
.as__steps li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .2rem 1rem; padding: 1.4rem 0; border-top: 1px solid var(--rule); }
.as__n { grid-row: span 2; font: 500 2.6rem/.9 var(--serif); color: var(--crimson); font-size-adjust: none; }
.as__steps h3 { font-size: 1.12rem; }
.as__steps p { grid-column: 2; margin: 0; color: var(--ink-2); font-size: .96rem; }
@media (max-width: 900px) { .as__in { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .as__steps { grid-template-columns: 1fr; } }

/* ───── FAQ ───── */
.hfaq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); padding: var(--sp-6) 0; }
.faq { border-top: 1px solid var(--ink); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.25rem 0; cursor: pointer; list-style: none; font-weight: 650; font-size: 1.08rem; line-height: 1.35; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary svg { flex: none; width: 22px; height: 22px; color: var(--crimson); transition: transform var(--t-2) var(--ease); }
.faq__item[open] summary svg { transform: rotate(45deg); }
.faq__item summary:hover { color: var(--crimson-d); }
.faq__a { padding: 0 3rem 1.3rem 0; color: var(--ink-2); }
.faq__a p:last-child, .faq__a ul:last-child { margin-bottom: 0; }
@media (max-width: 900px) { .hfaq { grid-template-columns: 1fr; } }

/* ───── visit ───── */
.visit { background: var(--oxblood); color: var(--on-ox); }
.visit__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: var(--sp-6) 0; }
.visit__img { margin: 0; border-radius: var(--r); overflow: hidden; }
.visit__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.visit__txt h2 { margin-bottom: 1.2rem; }
.visit__txt > p { color: var(--on-ox-2); }
.visit__ways { margin-top: 1.8rem; border-top: 1px solid color-mix(in srgb, var(--gilt) 30%, transparent); }
.visit__ways a { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid color-mix(in srgb, var(--gilt) 30%, transparent); text-decoration: none; color: var(--on-ox); }
.visit__ways svg { width: 22px; height: 22px; color: var(--gilt); flex: none; }
.visit__ways span { display: flex; flex-direction: column; }
.visit__ways b { font-size: var(--fs-xs); letter-spacing: .02em; text-transform: none; color: var(--on-ox-2); }
.visit__ways a:hover span { color: var(--gilt-l); }
@media (max-width: 900px) { .visit__in { grid-template-columns: 1fr; } }

/* ───── page hero (inner pages) ───── */
.phero { padding: clamp(2rem, 5vw, 4.5rem) 0 clamp(2rem, 4vw, 3.5rem); border-bottom: 1px solid var(--rule); }
.phero__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.phero--img .phero__in { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; }
.phero h1 { font-size: var(--fs-h1); max-width: 15em; }
.phero__lede { margin: 1.5rem 0 0; max-width: 38em; font-size: var(--fs-lede); line-height: 1.5; color: var(--ink-2); }
.phero .gl { margin-top: 2.2rem; max-width: 640px; }
.phero__img { margin: 0; border-radius: var(--r); overflow: hidden; max-height: 560px; cursor: zoom-in; }
.phero__img img { width: 100%; height: 100%; max-height: 560px; object-fit: cover; }
.phero__cta { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.crumbs { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.4rem; font-size: var(--fs-sm); color: var(--ink-3); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--crimson); }
.crumbs span:last-child { display: none; }
@media (max-width: 900px) { .phero--img .phero__in { grid-template-columns: 1fr; } .phero__img, .phero__img img { max-height: 360px; } }

/* ───── long-form article ───── */
.article { padding: var(--sp-5) 0 var(--sp-6); }
.article--toc { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); }
.toc { position: sticky; top: calc(var(--hdr) + 2rem); align-self: start; max-height: calc(100svh - var(--hdr) - 4rem); overflow-y: auto; font-size: .88rem; scrollbar-width: thin; }
.toc p { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; text-transform: none; color: var(--ink-3); margin-bottom: .8rem; }
.toc a { display: block; padding: .38rem 0 .38rem .9rem; border-left: 1px solid var(--rule); color: var(--ink-2); text-decoration: none; line-height: 1.3; transition: color var(--t-1) var(--ease), border-color var(--t-1) var(--ease); }
.toc a:hover { color: var(--ink); }
.toc a.is-on { color: var(--crimson); border-left: 2px solid var(--crimson); padding-left: calc(.9rem - 1px); }
.flow { max-width: 780px; min-width: 0; overflow-wrap: break-word; }
.article:not(.article--toc) .flow { margin-inline: auto; }
.sec { padding-bottom: var(--sp-4); margin-bottom: var(--sp-4); border-bottom: 1px solid var(--rule-2); }
.sec:last-child { border-bottom: 0; }
.sec > h2 { font-size: clamp(1.9rem, 3vw, 2.7rem); margin-bottom: 1.4rem; }
.sec p { color: var(--ink-2); }
.sec > p:first-of-type { color: var(--ink); }
.sub { margin-top: 2rem; }
.sub > h3 { margin-bottom: .7rem; }
.sub--h4 > h4 { font: 700 1rem/1.3 var(--sans); margin: 0 0 .5rem; color: var(--ink); font-size-adjust: var(--fsa, .46); }
.sub--h4 { margin-top: 1.3rem; }
blockquote { margin: 1.5rem 0; padding: 0; font: italic 500 1.45rem/1.4 var(--serif); color: var(--ink); font-size-adjust: none; }
.cta-line { margin: 1.2rem 0; }
.cta-row { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.4rem 0; }
.list--cols { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .55rem 1.5rem; }
.list { margin: 0 0 1.2em; display: grid; gap: .5rem; }
.list li { position: relative; padding-left: 1.4rem; color: var(--ink-2); }
.list li::before { content: ""; position: absolute; left: 0; top: .68em; width: 6px; height: 6px; background: var(--crimson); transform: rotate(45deg); }
.numlist { display: grid; gap: 0; margin: 1rem 0 1.5rem; border-top: 1px solid var(--rule); }
.numlist li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); padding: .9rem 0; border-bottom: 1px solid var(--rule); }
.numlist .num { font: italic 500 1rem/1.6 var(--serif); color: var(--crimson); font-size-adjust: none; }
.numlist p { margin: 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.5rem; margin: 1.5rem 0 2rem; padding: 1.5rem 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.stat b { display: block; font: 500 clamp(2.4rem, 4vw, 3.4rem)/1 var(--serif); color: var(--crimson); letter-spacing: -.02em; margin-bottom: .4rem; font-size-adjust: none; }
.stat span { font-size: .92rem; color: var(--ink-2); }
.ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.4rem; margin-top: 1.6rem; border-top: 1px solid var(--ink); }
.ledger__item { padding: 1.4rem 0; border-bottom: 1px solid var(--rule); }
.ledger__n { display: block; font: italic 500 .95rem/1 var(--serif); color: var(--crimson); margin-bottom: .8rem; font-size-adjust: none; }
.ledger__item h3 { margin-bottom: .55rem; }
.ledger__item p { font-size: .97rem; margin-bottom: .6em; }
.ledger__item p:last-child { margin-bottom: 0; }
.steps { margin: 1.5rem 0; position: relative; }
.steps li { position: relative; padding: 0 0 1.8rem 4rem; }
.steps li::before { content: ""; position: absolute; left: 1.15rem; top: 2.6rem; bottom: .3rem; width: 1px; background: var(--rule); }
.steps li:last-child::before { display: none; }
.steps__n { position: absolute; left: 0; top: 0; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border: 1px solid var(--crimson); border-radius: 50%; font: 600 .85rem/1 var(--sans); color: var(--crimson); font-variant-numeric: lining-nums tabular-nums; background: var(--paper); font-size-adjust: var(--fsa, .46); }
.steps h3 { padding-top: .35rem; margin-bottom: .45rem; }
.steps p { margin-bottom: .5em; }
.fig { margin: 0 0 var(--sp-4); border-radius: var(--r); overflow: hidden; cursor: zoom-in; }
.fig img { width: 100%; max-height: 560px; object-fit: cover; }
.fig--tall { max-width: 460px; }
.fig--tall img { max-height: 640px; object-fit: contain; background: var(--vellum); }
.gallery { columns: 4 220px; column-gap: 14px; padding-bottom: var(--sp-5); }
.gallery figure { margin: 0 0 14px; break-inside: avoid; border-radius: var(--r-sm); overflow: hidden; cursor: zoom-in; background: var(--vellum); }
.gallery img { width: 100%; transition: transform .6s var(--ease); }
.gallery figure:hover img { transform: scale(1.03); }
@media (max-width: 1000px) { .article--toc { grid-template-columns: minmax(0, 1fr); } .toc { display: none; } .flow { margin-inline: 0; width: 100%; } }
@media (max-width: 640px) { .ledger { grid-template-columns: 1fr; } }

/* ───── CTA band ───── */
.band { background: var(--oxblood); color: var(--on-ox); }
.band__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 4rem; padding: var(--sp-5) 0; align-items: end; }
.band h2 { font-size: clamp(2.2rem, 4.4vw, 3.8rem); }
.band p { color: var(--on-ox-2); margin: 0; }
.band__cta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
@media (max-width: 800px) { .band__in { grid-template-columns: 1fr; } }

/* ───── forms ───── */
.inq { margin-top: 1.6rem; padding: clamp(1.2rem, 3vw, 2rem); background: var(--vellum); border-radius: var(--r); }
.inq__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.2rem; }
.fld { display: grid; gap: .4rem; }
.fld--wide { grid-column: 1 / -1; }
.fld span { font-size: var(--fs-sm); font-weight: 650; color: var(--ink); }
.fld input, .fld select, .fld textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-sm); padding: .8rem .9rem; transition: border-color var(--t-1) var(--ease), box-shadow var(--t-1) var(--ease); }
.fld input::placeholder, .fld textarea::placeholder { color: #6B6368; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--crimson); box-shadow: 0 0 0 3px rgba(194, 46, 73, .15); }
.fld.is-bad input { border-color: var(--crimson); }
.inq__err { color: var(--crimson-d); font-weight: 600; font-size: var(--fs-sm); margin: 1rem 0 0; }
.inq__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.4rem; }
.inq__note { margin: 0; font-size: .85rem; color: var(--ink-2); max-width: 34em; }
.inq.is-sent .inq__foot .btn { background: #2F6B4B; }
@media (max-width: 600px) { .inq__grid { grid-template-columns: 1fr; } }

/* ───── team ───── */
.roster__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 2rem 1.4rem; margin-top: 1.6rem; }
.face { display: block; text-decoration: none; }
.face__img { display: block; aspect-ratio: 3 / 4; border-radius: var(--r-sm); overflow: hidden; background: var(--vellum); margin-bottom: .8rem; }
.face__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter .5s var(--ease), transform .6s var(--ease); }
.face:hover .face__img img, .face:focus-visible .face__img img { filter: none; transform: scale(1.03); }
.face__name { display: block; font: 500 1.2rem/1.2 var(--serif); font-size-adjust: none; }
.face__role { display: block; font-size: .86rem; color: var(--ink-2); margin-top: .2rem; line-height: 1.35; }
.roster--mini { padding: 0 0 var(--sp-5); }
.roster--mini h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.person { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); padding: var(--sp-5) 0; align-items: start; }
.person__img { position: sticky; top: calc(var(--hdr) + 2rem); border-radius: var(--r); overflow: hidden; background: var(--vellum); }
.person__img img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.person__mono { aspect-ratio: 3 / 4; display: grid; place-items: center; font: italic 500 6rem/1 var(--serif); color: var(--crimson); font-size-adjust: none; }
.person h1 { font-size: var(--fs-h1); }
.person__role { font: italic 500 1.25rem/1.45 var(--serif); color: var(--crimson); margin: 1rem 0 2rem; font-size-adjust: none; }
.person__bio p { color: var(--ink-2); font-size: 1.08rem; }
.person__bio p:first-child { color: var(--ink); }
.person h2 { font-size: 1.6rem; margin: 2.4rem 0 1rem; }
.person__back { margin-top: 2.5rem; }
@media (max-width: 800px) { .person { grid-template-columns: 1fr; } .person__img { position: static; max-width: 420px; } }

/* ───── events ───── */
.evtools, .caltools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.6rem 0; position: sticky; top: var(--hdr); z-index: 5; background: var(--paper); border-bottom: 1px solid var(--rule); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { border: 1px solid var(--rule); background: transparent; color: var(--ink); font: 600 .88rem/1 var(--sans); padding: .65em 1em; border-radius: 999px; cursor: pointer; transition: background var(--t-1) var(--ease), color var(--t-1) var(--ease), border-color var(--t-1) var(--ease); font-size-adjust: var(--fsa, .46); }
.chip:hover { border-color: var(--ink); }
.chip.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.search { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--rule); border-radius: 999px; padding: 0 1rem; min-width: min(300px, 100%); background: var(--paper); }
.search svg { width: 18px; height: 18px; color: var(--ink-3); }
.search input { border: 0; background: transparent; font: inherit; padding: .7rem 0; width: 100%; outline: none; }
.search:focus-within { border-color: var(--crimson); }
.evwrap { padding: var(--sp-4) 0 var(--sp-6); }
.evgrp { margin-bottom: var(--sp-5); }
.evgrp h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); margin-bottom: 1.2rem; display: flex; align-items: baseline; gap: .8rem; }
.evgrp__n { font: 600 .9rem/1 var(--sans); color: var(--ink-3); font-size-adjust: var(--fsa, .46); }
.evlist { border-top: 1px solid var(--ink); }
.ev a { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 96px; gap: 1.5rem; align-items: center; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.ev[hidden] { display: none; }
.dt { display: flex; flex-direction: column; }
.dt b { font: 500 2.2rem/1 var(--serif); letter-spacing: -.02em; white-space: nowrap; font-size-adjust: none; }
.dt i { font-style: normal; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; text-transform: none; color: var(--crimson); margin-top: .35rem; }
.dt em { font-style: normal; font-size: var(--fs-xs); color: var(--ink-3); }
.dt--nd i { color: var(--ink-3); font-size: .74rem; letter-spacing: .04em; }
.ev__t b { display: block; font: 500 1.35rem/1.2 var(--serif); font-size-adjust: none; }
.ev__t span { display: block; font-size: .9rem; color: var(--ink-2); margin-top: .3rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ev__th { width: 96px; height: 96px; border-radius: var(--r-sm); overflow: hidden; background: var(--vellum); }
.ev__th { display: grid; place-items: center; overflow: hidden; }
.ev__th .crest { width: 42px; color: color-mix(in srgb, var(--crimson) 35%, var(--vellum)); }
.ev__th img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.ev a:hover .ev__t b { color: var(--crimson); }
.ev a:hover .ev__th { display: grid; place-items: center; overflow: hidden; }
.ev__th .crest { width: 42px; color: color-mix(in srgb, var(--crimson) 35%, var(--vellum)); }
.ev__th img { transform: scale(1.06); }
.empty { padding: 3rem 0; font: italic 500 1.4rem/1.3 var(--serif); color: var(--ink-2); font-size-adjust: none; }
.evp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 6vw, 6rem); padding: var(--sp-5) 0; align-items: start; }
.evp h1 { font-size: clamp(2.4rem, 4.6vw, 4.2rem); }
.evp__cat { font-size: var(--fs-sm); font-weight: 700; margin-bottom: 1rem; color: var(--ink-3); }
.evp__cat a { color: var(--crimson); text-decoration: none; }
.evp__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 1.5rem; margin: 2rem 0; border-top: 1px solid var(--ink); }
.evp__meta div { padding: .9rem 0; border-bottom: 1px solid var(--rule); }
.evp__meta dt { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; text-transform: none; color: var(--ink-3); margin-bottom: .3rem; }
.evp__meta dd { margin: 0; font-weight: 600; }
.evp__desc p { font-size: 1.1rem; color: var(--ink-2); }
.evp__ask { margin-top: 2.4rem; padding: 1.6rem; background: var(--vellum); border-radius: var(--r); }
.evp__ask h2 { font-size: 1.6rem; margin-bottom: .5rem; }
.evp__ask p { color: var(--ink-2); }
.evp__btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.poster { margin: 0; position: sticky; top: calc(var(--hdr) + 2rem); border-radius: var(--r); overflow: hidden; background: var(--vellum); box-shadow: 0 30px 60px -30px rgba(41, 38, 41, .35); cursor: zoom-in; }
.poster img { width: 100%; max-height: 78svh; object-fit: contain; }
.more { padding: 0 0 var(--sp-6); }
.more h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 1.2rem; }
.more > p { margin-top: 1.5rem; }
@media (max-width: 800px) { .evp { grid-template-columns: 1fr; } .poster { position: static; order: -1; } .ev a { grid-template-columns: 4.6rem minmax(0, 1fr) 64px; gap: 1rem; } .ev__th { width: 64px; height: 64px; } .dt b { font-size: 1.7rem; } .evtools, .caltools { position: static; } .ev__t b { font-size: 1.15rem; } }

/* ───── calendar ───── */
.calsum { display: flex; flex-wrap: wrap; gap: 1rem 3rem; margin-top: 2rem; }
.calsum b { display: block; font: 500 clamp(2.2rem, 4vw, 3.2rem)/1 var(--serif); color: var(--crimson); font-size-adjust: none; }
.calsum span { font-size: var(--fs-sm); color: var(--ink-2); }
.caljump { display: flex; flex-wrap: wrap; gap: .2rem; }
.caljump a { font-size: .85rem; font-weight: 700; text-decoration: none; padding: .45em .55em; border-radius: 4px; color: var(--ink-2); }
.caljump a:hover { background: var(--vellum); color: var(--ink); }
.cal { padding: var(--sp-4) 0 var(--sp-5); }
.cal__mo { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 2rem; padding: 2rem 0; border-bottom: 1px solid var(--rule); }
.cal__mo h2 { position: sticky; top: calc(var(--hdr) + 6rem); align-self: start; display: flex; flex-direction: column; }
.cal__mo h2 b { font: italic 500 clamp(3rem, 6vw, 5rem)/.9 var(--serif); color: var(--crimson); letter-spacing: -.03em; font-size-adjust: none; }
.cal__mo h2 span { font: 600 .9rem/1.2 var(--sans); color: var(--ink-2); margin-top: .5rem; font-size-adjust: var(--fsa, .46); }
.cal__it { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; padding: 1.1rem 0; border-top: 1px solid var(--rule-2); }
.cal__it:first-child { border-top: 0; }
.cal__it[hidden] { display: none; }
.cal__it.is-past { opacity: .5; }
.cal__d b { display: block; font: 500 2rem/1 var(--serif); white-space: nowrap; font-variant-numeric: lining-nums; font-size-adjust: none; }
.cal__d i { font-style: normal; font-size: .8rem; color: var(--ink-3); }
.cal__t b { display: block; font-weight: 650; font-size: 1.08rem; }
.cal__t span { display: block; color: var(--ink-2); font-size: .92rem; }
.cal__m { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; align-items: center; }
.cal__m em { font-style: normal; font-weight: 700; font-size: .85rem; margin-right: .4rem; font-variant-numeric: lining-nums tabular-nums; }
.calnote { color: var(--ink-3); font-size: var(--fs-sm); padding-bottom: var(--sp-5); }
@media (max-width: 800px) { .cal__mo { grid-template-columns: 1fr; gap: .5rem; } .cal__mo h2 { position: static; flex-direction: row; align-items: baseline; gap: 1rem; } .cal__it { grid-template-columns: 4.6rem minmax(0, 1fr); } .cal__m { grid-column: 2; justify-content: flex-start; } }

/* ───── contact ───── */
.ct { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); padding: var(--sp-5) 0 var(--sp-6); align-items: start; }
.ct__ways { border-top: 1px solid var(--ink); }
.way { display: grid; grid-template-columns: 28px 7rem minmax(0, 1fr); gap: 1rem; align-items: baseline; padding: 1.4rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.way svg { width: 22px; height: 22px; color: var(--crimson); align-self: center; }
.way b { font-size: var(--fs-xs); letter-spacing: .02em; text-transform: none; color: var(--ink-3); }
.way span { font: 500 clamp(1.3rem, 2vw, 1.7rem)/1.25 var(--serif); font-size-adjust: none; }
.way:hover span { color: var(--crimson); }
.ct__form h2 { font-size: clamp(2rem, 3.4vw, 2.9rem); margin-bottom: .8rem; }
.ct__form > p { color: var(--ink-2); }
@media (max-width: 900px) { .ct { grid-template-columns: 1fr; } .way { grid-template-columns: 28px minmax(0, 1fr); } .way b { grid-column: 2; } .way span { grid-column: 2; } .way svg { grid-row: span 2; align-self: start; } }

/* ───── journal ───── */
.jr { padding: var(--sp-5) 0 var(--sp-6); }
.jr ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 3rem 2rem; }
.jr a { display: block; text-decoration: none; }
.jr__img { display: block; aspect-ratio: 3 / 2; border-radius: var(--r); overflow: hidden; background: var(--vellum); margin-bottom: 1.2rem; }
.jr__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.jr a:hover .jr__img img { transform: scale(1.04); }
.jr h2 { font-size: 1.7rem; line-height: 1.12; margin-bottom: .7rem; }
.jr p { color: var(--ink-2); font-size: .96rem; }
.jr__go { display: inline-flex; align-items: center; gap: .4rem; font-weight: 650; color: var(--crimson); }
.jr__go svg { width: 16px; height: 16px; }

/* ───── chess puzzle ───── */
.board { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); width: min(440px, 100%); aspect-ratio: 1; border: 1px solid var(--ink); border-radius: 4px; overflow: hidden; margin: 1.4rem 0 1rem; user-select: none; }
.sq { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; aspect-ratio: 1; border: 0; padding: 0; font: 400 clamp(1.6rem, 6vw, 2.6rem)/1 "Segoe UI Symbol", "Apple Symbols", serif; cursor: default; background: #FAF2EF; color: var(--ink); }
.sq.d { background: #D9C5CA; }
.sq.w { cursor: pointer; }
.sq.is-sel { box-shadow: inset 0 0 0 3px var(--crimson); }
.sq.is-target::after { content: ""; width: 26%; height: 26%; border-radius: 50%; background: rgba(41, 38, 41, .22); }
.sq.is-win { background: #EBB5C0; }
.sq.is-miss { animation: shake .35s var(--ease); }
.sq .co { position: absolute; left: 3px; bottom: 2px; font: 600 9px/1 var(--sans); opacity: .55; font-size-adjust: var(--fsa, .46); }
.board__msg { font-weight: 600; color: var(--ink-2); min-height: 1.6em; }
.board__msg.is-win { color: #2F6B4B; }
@keyframes shake { 30% { transform: translateX(-4px); } 60% { transform: translateX(4px); } }

/* ───── footer ───── */
.ft { background: var(--oxblood); color: var(--on-ox); border-top: 1px solid color-mix(in srgb, var(--gilt) 30%, transparent); }
.band + .ft { border-top: 1px solid color-mix(in srgb, var(--gilt) 25%, transparent); }
.ft a { color: var(--on-ox); }
.ft__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); padding: var(--sp-5) 0; align-items: center; }
.think { border: 1px solid color-mix(in srgb, var(--gilt) 45%, transparent); border-radius: var(--r); padding: clamp(1.4rem, 3vw, 2.2rem); background: rgba(0, 0, 0, .12); }
.think__k { font: italic 500 1.5rem/1 var(--serif); color: var(--gilt-l); margin-bottom: .3rem; font-size-adjust: none; }
.think__band { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; text-transform: none; color: var(--on-ox-2); }
.think__q { font-size: 1.12rem; line-height: 1.5; min-height: 4.5em; }
.think__f { display: flex; gap: .5rem; }
.think__f input { flex: 1; min-width: 0; font: inherit; color: var(--on-ox); background: rgba(255, 255, 255, .06); border: 1px solid color-mix(in srgb, var(--gilt) 40%, transparent); border-radius: 999px; padding: 0 1.1rem; min-height: 48px; }
.think__f input::placeholder { color: #C5ACA7; }
.think__f input:focus { outline: none; border-color: var(--gilt-l); }
.think__r { min-height: 1.6em; margin: .9rem 0 .2rem; font-weight: 600; color: var(--gilt-l); }
.think__r.is-no { color: #F2B8C2; }
.think__tools { display: flex; gap: 1.2rem; }
.think__tools button { display: inline-flex; align-items: center; gap: .4rem; background: none; border: 0; color: var(--on-ox-2); font: 600 .88rem/1 var(--sans); cursor: pointer; padding: .3rem 0; font-size-adjust: var(--fsa, .46); }
.think__tools button:hover { color: var(--on-ox); }
.think__tools svg { width: 16px; height: 16px; }
.ft__latin { font: italic 500 clamp(3rem, 7vw, 6.4rem)/.95 var(--serif); color: var(--on-ox); letter-spacing: -.025em; margin: 0 0 1.2rem; font-size-adjust: none; }
.ft__en { color: var(--on-ox-2); max-width: 30em; }
.ft__cta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }
.ft__mid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2rem; padding: var(--sp-4) 0; border-top: 1px solid color-mix(in srgb, var(--gilt) 25%, transparent); }
.ft__h { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; text-transform: none; color: var(--gilt); margin-bottom: .9rem; }
.ft__col a { display: block; padding: .28rem 0; text-decoration: none; font-size: .92rem; color: var(--on-ox-2); }
.ft__col a:hover { color: var(--on-ox); }
.ft__base { display: grid; grid-template-columns: auto 1fr; gap: .6rem 2rem; padding: 2rem 0 2.6rem; border-top: 1px solid color-mix(in srgb, var(--gilt) 25%, transparent); font-size: .88rem; color: var(--on-ox-2); }
.ft__brand { display: flex; align-items: center; gap: .7rem; grid-row: span 3; text-decoration: none; font: 600 1rem/1.2 var(--serif); text-transform: none; letter-spacing: .03em; max-width: 14em; font-size-adjust: none; }
.ft__brand .crest { color: var(--on-ox); width: 52px; }
.ft address { font-style: normal; }
.ft__rec, .ft__copy { margin: 0; }
@media (max-width: 1000px) { .ft__mid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) { .ft__top { grid-template-columns: 1fr; } .ft__top .think { order: 2; } .ft__base { grid-template-columns: 1fr; } .ft__brand { grid-row: auto; } }
@media (max-width: 520px) { .ft__mid { grid-template-columns: 1fr 1fr; } }

/* ───── lightbox, 404 ───── */
.lb { position: fixed; inset: 0; z-index: 90; background: rgba(41, 38, 41, .92); display: grid; place-items: center; padding: 4vmin; cursor: zoom-out; }
.lb[hidden] { display: none; }
.lb img { max-width: 100%; max-height: 92svh; width: auto; height: auto; border-radius: var(--r-sm); }
.lb__x { position: absolute; top: 16px; right: 16px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center; }
.lb__x svg { width: 22px; }
@media (prefers-reduced-motion: no-preference) { .lb:not([hidden]) img { animation: zoomin .35s var(--ease) both; } }
@keyframes zoomin { from { opacity: 0; transform: scale(.96); } }
.nf { padding: var(--sp-6) 0; text-align: center; }
.nf__n { font: italic 500 clamp(6rem, 18vw, 14rem)/.9 var(--serif); color: var(--crimson); margin: 0; font-size-adjust: none; }
.nf h1 { font-size: var(--fs-h2); margin: 1rem 0; }
.nf p { color: var(--ink-2); }
.nf__links { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 2rem; }

/* ───── page transitions (same-origin navigations) ───── */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out .22s var(--ease) both; }
  ::view-transition-new(root) { animation: vt-in .42s var(--ease) both; }
}
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

@media print { .hdr, .ft, .band, .toc, .yb, .evtools, .caltools { display: none !important; } body { background: #fff; } }

/* ───── college advising page: content in layers instead of one long column ───── */

.jump { position: sticky; top: var(--hdr); z-index: 40; background: color-mix(in srgb, var(--paper) 94%, transparent); border-bottom: 1px solid var(--rule); }
.jump ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: safe center; gap: .6rem; overflow-x: auto; scrollbar-width: none; }
.jump ul::-webkit-scrollbar { display: none; }
.jump a { display: block; padding: 1rem 1rem; font-size: 1.02rem; font-weight: 600; color: var(--ink-2); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; transition: color var(--t-1) var(--ease), border-color var(--t-1) var(--ease); }
.jump a:hover, .jump a.is-on { color: var(--crimson-d); border-bottom-color: var(--crimson); }
html:has(.jump) { scroll-padding-top: calc(var(--hdr) + 72px); }

.cc-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 1rem 3rem; align-items: end; margin-bottom: clamp(1.8rem, 3vw, 2.8rem); }
.cc-head h2, .cc-intro h2, .cc-faq h2, .sch h2, .out h2, .begin h2 { font-size: var(--fs-h2); }
.cc-head p { margin: 0; color: var(--ink-2); font-size: 1.1rem; max-width: 30em; }

.cc-intro { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1.5rem 4rem; padding: var(--sp-5) 0; }
.cc-intro__txt p { margin: 0 0 1rem; font-size: 1.12rem; line-height: 1.6; color: var(--ink-2); max-width: 40em; }
.svc { grid-column: 1 / -1; list-style: none; padding: 0; margin: .6rem 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .8rem; }
.svc li { display: flex; align-items: center; gap: .8rem; padding: 1.1rem 1.2rem; background: var(--vellum); border-radius: 4px; font-weight: 650; line-height: 1.3; }
.svc svg { flex: none; width: 24px; height: 24px; color: var(--crimson); }

/* the 12 steps */
.proc { background: var(--vellum); padding: var(--sp-6) 0; }
.proc__box { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.proc__nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; position: sticky; top: calc(var(--hdr) + 72px); }
.proc__nav button { width: 100%; display: flex; align-items: center; gap: .85rem; padding: .62rem .8rem; border: 0; border-radius: 4px; background: transparent; font: 600 .95rem/1.25 var(--sans); color: var(--ink-2); text-align: left; cursor: pointer; transition: background var(--t-1) var(--ease), color var(--t-1) var(--ease); font-size-adjust: var(--fsa, .46); }
.proc__nav button:hover { background: color-mix(in srgb, #fff 60%, transparent); color: var(--ink); }
.proc__nav button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 6px 18px -10px rgba(41, 38, 41, .35); }
.proc__n { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--rule); font: 500 1rem/1 var(--serif); color: var(--crimson-d); font-variant-numeric: lining-nums tabular-nums; transition: background var(--t-1) var(--ease), color var(--t-1) var(--ease); font-size-adjust: none; }
.proc__nav button[aria-selected="true"] .proc__n { background: var(--crimson); border-color: var(--crimson); color: #fff; }
.proc__panel { background: #fff; border-radius: var(--r); box-shadow: 0 18px 40px -28px rgba(41, 38, 41, .4); }
.proc__panel:not(.is-open) { display: none; }
.proc__acc { display: none; }
.proc__body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 2.4rem; padding: clamp(1.5rem, 3vw, 2.6rem); }
.proc__t { display: flex; align-items: baseline; gap: .8rem; font: 500 clamp(1.7rem, 2.4vw, 2.3rem)/1.1 var(--serif); letter-spacing: -.01em; font-size-adjust: none; }
.proc__t span { font-size: .85em; color: var(--crimson); font-variant-numeric: lining-nums; }
.proc__tag { margin: .6rem 0 1.2rem; font: italic 400 1.3rem/1.35 var(--serif); color: var(--crimson-d); font-size-adjust: none; }
.proc__txt > p { font-size: 1.08rem; line-height: 1.6; color: var(--ink-2); margin: 0 0 .9rem; }
.proc__img { margin: 0; border-radius: 4px; overflow: hidden; align-self: stretch; min-height: 280px; max-height: 520px; }
.proc__img img { width: 100%; height: 100%; object-fit: cover; }
.proc__logos { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; align-content: start; }
.proc__logos span { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: .8rem; border: 1px solid var(--rule-2); border-radius: 4px; background: #fff; }
.proc__logos img { max-height: 70px; width: auto; object-fit: contain; }
.proc__stat { align-self: start; padding: 1.8rem; border-radius: 4px; background: var(--oxblood); color: var(--on-ox); }
.proc__stat b { display: block; font: 500 clamp(3rem, 5vw, 4.4rem)/1 var(--serif); color: var(--gilt-l); margin-bottom: .5rem; font-size-adjust: none; }
.proc__stat span { color: var(--on-ox-2); }
.proc__next { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.4rem; padding: 0; border: 0; background: none; font: 650 1rem/1.3 var(--sans); color: var(--crimson-d); text-align: left; cursor: pointer; text-decoration: none; font-size-adjust: var(--fsa, .46); }
.proc__next svg { width: 18px; height: 18px; flex: none; transition: transform var(--t-1) var(--ease); }
.proc__next:hover svg { transform: translateX(4px); }
@media (prefers-reduced-motion: no-preference) { .proc__panel.is-open .proc__body { animation: rise .45s var(--ease) both; } }

.ticks { list-style: none; padding: 0; margin: .2rem 0 1.1rem; display: grid; gap: .55rem; }
.ticks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1.6rem; }
.ticks li { display: flex; gap: .65rem; align-items: flex-start; font-size: 1.04rem; line-height: 1.45; }
.ticks svg { flex: none; width: 22px; height: 22px; padding: 4px; margin-top: 1px; border-radius: 50%; background: transparent; color: var(--crimson); stroke-width: 2.5; }
.outc { display: grid; gap: .2rem; margin: 1.2rem 0 0; padding: .95rem 1.15rem; border-radius: 4px; background: var(--vellum); color: var(--ink); font-size: 1.02rem; line-height: 1.45; }
.outc b { font-size: .8rem; letter-spacing: .02em; text-transform: none; color: var(--ink-2); }

/* when to start */
.when { padding: var(--sp-6) 0; }
.tl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; counter-reset: g; }
.tl li { position: relative; padding-top: 2.2rem; }
.tl li::before { content: ""; position: absolute; top: 9px; left: 0; right: -1.4rem; height: 2px; background: linear-gradient(90deg, var(--crimson), color-mix(in srgb, var(--crimson) 25%, transparent)); }
.tl li:last-child::before { right: 0; }
.tl li::after { content: ""; position: absolute; top: 2px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 3px solid var(--crimson); }
.tl__g { margin: 0 0 .4rem; font: 500 1.9rem/1 var(--serif); color: var(--crimson); font-size-adjust: none; }
.tl h3 { font: 650 1.12rem/1.3 var(--sans); margin-bottom: .55rem; font-size-adjust: var(--fsa, .46); }
.tl p:last-child { margin: 0; color: var(--ink-2); font-size: 1rem; line-height: 1.55; }

/* scholarships */
.sch { background: var(--oxblood); color: var(--on-ox); padding: var(--sp-6) 0; }
.sch__in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 2rem 5rem; }
.sch__tag { margin: 1rem 0 2rem; font: italic 400 1.35rem/1.35 var(--serif); color: var(--gilt-l); font-size-adjust: none; }
.sch__stat { padding-top: 1.4rem; border-top: 1px solid color-mix(in srgb, var(--gilt) 45%, transparent); }
.sch__stat b { display: block; font: 500 clamp(3.6rem, 7vw, 6rem)/.95 var(--serif); color: var(--gilt-l); letter-spacing: -.02em; font-size-adjust: none; }
.sch__stat span { color: var(--on-ox-2); }
.sch__body > p { color: var(--on-ox-2); font-size: 1.08rem; margin: 0 0 1rem; }
.sch .ticks li { color: var(--on-ox); }
.sch .ticks svg { background: color-mix(in srgb, var(--gilt) 22%, transparent); color: var(--gilt-l); }
.sch .outc { background: var(--oxblood-2); color: var(--on-ox); border: 1px solid color-mix(in srgb, var(--gilt) 30%, transparent); }
.sch .outc b { color: var(--gilt-l); }

/* pathways */
.paths { padding: var(--sp-6) 0; }
.paths__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.3rem; }
.pcard figure { margin: 0 0 1rem; aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; background: var(--vellum); }
.pcard img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.pcard:hover img { transform: scale(1.04); }
.pcard h3 { font: 500 1.4rem/1.15 var(--serif); margin-bottom: .5rem; font-size-adjust: none; }
.pcard p { margin: 0 0 .6rem; font-size: .98rem; line-height: 1.5; color: var(--ink-2); }
.pcard .pcard__note { font-size: .85rem; color: var(--ink-3); }

/* why BSE */
.why { background: var(--vellum); padding: var(--sp-6) 0; }
.why__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.why__grid li { padding: 1.5rem; background: #fff; border-radius: 4px; }
.why__grid svg { width: 26px; height: 26px; color: var(--crimson); margin-bottom: .9rem; }
.why__grid h3 { font: 650 1.12rem/1.3 var(--sans); margin-bottom: .45rem; font-size-adjust: var(--fsa, .46); }
.why__grid p { margin: 0; color: var(--ink-2); font-size: 1rem; line-height: 1.55; }

/* outcomes */
.out { background: var(--oxblood); color: var(--on-ox); padding: var(--sp-6) 0; }
.out__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: end; }
.out__top p { color: var(--on-ox-2); max-width: 34em; margin: 1rem 0 0; font-size: 1.05rem; }
.out__links { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; }
.out__stats { list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid color-mix(in srgb, var(--gilt) 45%, transparent); }
.out__stats li { padding: 1.4rem 1rem 1.4rem 0; border-bottom: 1px solid color-mix(in srgb, var(--gilt) 25%, transparent); }
.out__stats b { display: block; font: 500 clamp(2.4rem, 3.6vw, 3.4rem)/1 var(--serif); color: var(--gilt-l); margin-bottom: .4rem; font-variant-numeric: lining-nums; font-size-adjust: none; }
.out__stats span { font-size: .92rem; color: var(--on-ox-2); }
.out__cap { margin: 2.2rem 0 1rem; font-weight: 650; color: var(--on-ox); }
.out__logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: .6rem; }
.out__logos li { display: grid; place-items: center; aspect-ratio: 1; padding: .7rem; background: #fff; border-radius: 4px; }
.out__logos img { max-height: 64px; width: auto; object-fit: contain; }
.out__note { margin: 1.6rem 0 0; font-size: .82rem; color: var(--on-ox-2); max-width: 60em; }

/* FAQ + begin */
.cc-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 2rem 4rem; padding: var(--sp-6) 0; }
.cc-faq > div p { color: var(--ink-2); margin: 1rem 0 0; font-size: 1.05rem; }
.cc-faq > div a { color: var(--crimson-d); font-weight: 600; }
.pg-cc .faq__item summary { font-size: 1.12rem; }
.pg-cc .faq__a { font-size: 1.05rem; }
.begin { background: var(--vellum); padding: var(--sp-6) 0; }
.begin__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 2rem 4rem; align-items: start; }
.begin__lead > p { color: var(--ink-2); font-size: 1.08rem; margin: 1rem 0 0; max-width: 34em; }
.begin__ways { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; gap: .5rem; }
.begin__ways a { display: inline-flex; align-items: center; gap: .6rem; font-weight: 650; text-decoration: none; }
.begin__ways a:hover { color: var(--crimson-d); }
.begin__ways svg { width: 20px; height: 20px; color: var(--crimson); }
.begin__motto { margin-top: 2rem !important; font: italic 400 1.5rem/1.3 var(--serif) !important; color: var(--crimson-d) !important; font-size-adjust: none; }
.begin__form { background: #fff; border-radius: var(--r); padding: clamp(1.4rem, 3vw, 2.2rem); }
.begin__form h3 { font: 500 1.6rem/1.2 var(--serif); font-size-adjust: none; }
.begin__form .inq { margin-top: 1rem; padding: 0; background: none; }

@media (max-width: 1200px) { .svc { grid-template-columns: repeat(3, minmax(0, 1fr)); } .paths__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .out__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .out__logos { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1000px) {
  .proc__box { grid-template-columns: minmax(0, 1fr); }
  .proc__nav { display: none; }
  .proc__panels { display: grid; gap: .6rem; }
  .proc__panel:not(.is-open) { display: block; }
  .proc__acc { display: block; }
  .proc__acc button { width: 100%; display: flex; align-items: center; gap: .85rem; padding: 1rem 1.1rem; border: 0; background: none; font: 650 1.02rem/1.3 var(--sans); color: var(--ink); text-align: left; cursor: pointer; font-size-adjust: var(--fsa, .46); }
  .proc__acc button > span:nth-child(2) { flex: 1; }
  .proc__acc svg { flex: none; width: 22px; height: 22px; color: var(--crimson); transition: transform var(--t-2) var(--ease); }
  .proc__acc button[aria-expanded="true"] svg { transform: rotate(45deg); }
  .proc__acc button[aria-expanded="true"] .proc__n { background: var(--crimson); border-color: var(--crimson); color: #fff; }
  .proc__body { grid-template-columns: minmax(0, 1fr); padding: 0 1.1rem 1.4rem; gap: 1.2rem; }
  .proc__t { display: none; }
  .proc__tag { margin-top: 0; }
  .proc__img { min-height: 0; aspect-ratio: 16 / 10; order: -1; }
  .proc__logos { grid-template-columns: repeat(3, 1fr); order: -1; }
  .proc__stat { order: -1; }
  .cc-head, .cc-intro, .sch__in, .cc-faq, .begin__in, .out__top { grid-template-columns: minmax(0, 1fr); }
  .out__links { justify-content: flex-start; }
  .tl { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .tl li:nth-child(2)::before { right: 0; }
}
@media (max-width: 700px) {
  .paths__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; margin-inline: calc(-1 * var(--gut)); padding: 0 var(--gut) .6rem; scrollbar-width: none; }
  .paths__grid::-webkit-scrollbar { display: none; }
  .pcard { flex: 0 0 78%; scroll-snap-align: start; }
  .why__grid { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .why__grid li { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: .9rem; padding: 1.1rem 1.2rem; }
  .why__grid svg { grid-row: span 2; margin: 2px 0 0; }
  .out__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ticks--2 { grid-template-columns: minmax(0, 1fr); }
  .tl { grid-template-columns: minmax(0, 1fr); }
  .tl li::before { display: none; }
  .out__logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .svc { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .svc li { padding: .8rem 1rem; }
}
@media (max-width: 760px) { .jump ul { justify-content: flex-start; } }

/* ───── layered pages (long academic / program pages) ───── */
.lsec { padding: clamp(2.75rem, 5vw, 4.25rem) 0; }
.lsec--alt, .lsec--tabs { background: var(--vellum); }
.lsec--tabs + .lsec--tabs { border-top: 1px solid var(--rule-2); }
.lay p, .lay li { font-size: 1.06rem; line-height: 1.6; }
.lay p { margin: 0 0 1rem; color: var(--ink-2); max-width: 46em; }
.lay p a:not(.btn), .lay li a:not(.btn) { color: var(--crimson-d); }
.lay .cc-head { margin-bottom: clamp(1.4rem, 2.5vw, 2.2rem); }
.lay .cc-head p { margin: 0; }
.lay .cc-head:only-child, .lsplit__txt .cc-head { grid-template-columns: minmax(0, 1fr); }
.lay .list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 2rem; margin: .4rem 0 1.4rem; max-width: 980px; }
.lay .list--cols { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.lay .list li { padding-left: 2rem; color: var(--ink); }
.lay .list li::before { left: 0; top: .2em; width: 20px; height: 20px; transform: none; border-radius: 50%; background: #F7ECEF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239E233B' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.lay .stats { max-width: 980px; }

.lsplit { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.lsec__img { margin: 0; border-radius: var(--r); overflow: hidden; position: sticky; top: calc(var(--hdr) + 90px); cursor: zoom-in; aspect-ratio: 4 / 3; }
.lsec__img img { width: 100%; height: 100%; object-fit: cover; }

.lcards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.lcards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lcards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lcards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lcards > li { padding: 1.5rem 1.5rem 1.2rem; background: #fff; border-radius: 4px; box-shadow: 0 10px 30px -24px rgba(41, 38, 41, .45); }
.lsec--alt .lcards > li { background: #fff; }
.lsec:not(.lsec--alt) .lcards > li { background: var(--vellum); box-shadow: none; }
.lcards h3 { font: 500 1.35rem/1.2 var(--serif); margin-bottom: .55rem; color: var(--ink); font-size-adjust: none; }
.lcards p { font-size: 1rem; margin-bottom: .6rem; }
.lcards .list { grid-template-columns: minmax(0, 1fr); }

.lsteps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; counter-reset: s; }
.lsteps > li { position: relative; padding: 1.4rem; border-top: 3px solid var(--crimson); background: #fff; border-radius: 0 0 12px 12px; }
.lsec:not(.lsec--alt) .lsteps > li { background: var(--vellum); }
.lsteps__n { display: block; font: 500 2rem/1 var(--serif); color: var(--crimson); margin-bottom: .6rem; font-variant-numeric: lining-nums; font-size-adjust: none; }
.lsteps h3 { font: 650 1.08rem/1.3 var(--sans); margin-bottom: .5rem; font-size-adjust: var(--fsa, .46); }
.lsteps p { font-size: .98rem; }

.units { list-style: none; margin: .4rem 0 1.2rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1.6rem; }
.units li { display: flex; align-items: baseline; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid var(--rule-2); font-weight: 600; color: var(--ink); font-size: 1.02rem; }
.units span { flex: none; width: 1.8rem; font: 500 1.2rem/1 var(--serif); color: var(--crimson); font-variant-numeric: lining-nums; font-size-adjust: none; }
.lnote { padding: .95rem 1.15rem; border-radius: 4px; background: var(--vellum); color: var(--ink) !important; }

.proc__body--solo { grid-template-columns: minmax(0, 1fr); }
.proc__body--solo .proc__txt { max-width: 860px; }
.proc__body--solo .proc__t { margin-bottom: 1rem; }

.lsub { margin-top: 1.4rem; padding: 1.6rem; background: #fff; border-radius: 4px; }
.lsec:not(.lsec--alt) .lsub { background: var(--vellum); }
.lsub h3 { font: 500 1.45rem/1.2 var(--serif); margin-bottom: .6rem; font-size-adjust: none; }

.rmore { margin: .4rem 0 1rem; }
.rmore summary { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; list-style: none; font-weight: 650; color: var(--crimson-d); padding: .4rem 0; }
.rmore summary::-webkit-details-marker { display: none; }
.rmore summary svg { width: 18px; height: 18px; transition: transform var(--t-2) var(--ease); }
.rmore[open] summary svg { transform: rotate(180deg); }
.rmore__in { padding-top: .6rem; }

.lsec--faq .cc-faq { padding: 0; }
.lsec--form { padding: clamp(3.5rem, 7vw, 6rem) 0; }

.lstrip { padding: 0 0 clamp(3rem, 6vw, 5rem); }
.lstrip__row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gut) .4rem; scroll-padding-inline: var(--gut); scrollbar-width: thin; }
.lstrip figure { flex: 0 0 clamp(220px, 24vw, 340px); margin: 0; aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; scroll-snap-align: start; cursor: zoom-in; }
.lstrip img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1100px) { .lcards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .lsplit { grid-template-columns: minmax(0, 1fr); }
  .lsec__img { position: static; order: -1; aspect-ratio: 16 / 9; }
  .lsec__img img { max-height: none; }
  .lcards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .lcards--2, .lcards--3, .lcards--4, .lay .list, .units { grid-template-columns: minmax(0, 1fr); }
  .lstrip figure { flex-basis: 72vw; }
}

/* college page fixes after QA */
.cc-cognia { display: flex; gap: .7rem; align-items: flex-start; padding: 1rem 1.2rem; border-radius: 4px; background: var(--vellum); }
.cc-cognia svg { flex: none; width: 22px; height: 22px; color: var(--ink-2); margin-top: 2px; }
.cc-cognia a { color: var(--crimson-d); font-weight: 600; }
.out__sp { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: center; margin-top: 2.4rem; padding-top: 2rem; border-top: 1px solid color-mix(in srgb, var(--gilt) 35%, transparent); }
.out__sp h3 { font: 500 1.6rem/1.2 var(--serif); color: var(--on-ox); margin-bottom: .4rem; font-size-adjust: none; }
.out__sp p { margin: 0; color: var(--on-ox-2); }
.out__links .btn { white-space: normal; text-align: left; line-height: 1.25; }
.pcard .pcard__note { color: #5E565B; }
.pcard { align-self: start; }
.jump { background: var(--paper); }
@media (max-width: 1000px) {
  .out__sp { grid-template-columns: minmax(0, 1fr); }
  .paths__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; margin-inline: calc(-1 * var(--gut)); padding: 0 var(--gut) .6rem; scroll-padding-inline: var(--gut); scrollbar-width: none; }
  .paths__grid::-webkit-scrollbar { display: none; }
  .pcard { flex: 0 0 min(78%, 340px); scroll-snap-align: start; }
}
@media (max-width: 760px) { .jump .wrap { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); } }

.lcol { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1.5rem clamp(2rem, 5vw, 4.5rem); align-items: start; }
.lcol__head h2 { font-size: var(--fs-h2); }
.lcol__head p { margin: 1rem 0 0; }
.lcol__body > :first-child { margin-top: 0; }
.lcol .list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lcol .lsub { margin-top: 1rem; }
.months { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin: .4rem 0 1.2rem; }
.months div { padding: 1rem 1.1rem; border-radius: 4px; background: #fff; }
.lsec:not(.lsec--alt) .months div { background: var(--vellum); }
.months dt { font: 500 1.25rem/1.1 var(--serif); color: var(--crimson); margin-bottom: .3rem; font-size-adjust: none; }
.months dd { margin: 0; font-weight: 600; color: var(--ink); }
.phero__more { margin-top: 1.2rem; }
.phero__more p { margin: 0 0 .5rem; color: var(--ink-2); font-size: 1.05rem; }
.phero__more .list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }
.phero__more .cta-row { margin: 1rem 0 0; }
@media (max-width: 900px) { .lcol { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .lcol .list, .months, .phero__more .list { grid-template-columns: minmax(0, 1fr); } }
.lay .btn, .phero__more .btn { white-space: normal; max-width: 100%; text-align: left; line-height: 1.25; padding-block: .75em; }
.lay .btn span { min-width: 0; overflow-wrap: anywhere; }
.lwall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .7rem; }
.lwall li { display: grid; place-items: center; aspect-ratio: 1; padding: .8rem; background: #fff; border-radius: 4px; border: 1px solid var(--rule-2); }
.lwall img { max-height: 90px; width: auto; object-fit: contain; }
html:has(.jump) .anchor { top: 0; }
.lsteps--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lsteps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lsteps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .lsteps--3, .lsteps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .lsteps--2, .lsteps--3, .lsteps--4 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .lcards--3, .lcards--4 { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .8rem; margin-inline: calc(-1 * var(--gut)); padding: 0 var(--gut) .8rem; scroll-padding-inline: var(--gut); scrollbar-width: none; }
  .lcards--3::-webkit-scrollbar, .lcards--4::-webkit-scrollbar { display: none; }
  .lcards--3 > li, .lcards--4 > li { flex: 0 0 84%; scroll-snap-align: start; }
  .lsteps--3, .lsteps--4 { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .8rem; margin-inline: calc(-1 * var(--gut)); padding: 0 var(--gut) .8rem; scroll-padding-inline: var(--gut); scrollbar-width: none; }
  .lsteps--3 > li, .lsteps--4 > li { flex: 0 0 84%; scroll-snap-align: start; }
}
.inq__ok { margin: 0; padding: 1rem 1.2rem; border-radius: 4px; background: #E6F2EA; color: #1F5135; font-weight: 600; }
.btn[disabled] { opacity: .6; }
@media (max-width: 800px) { .poster img { max-height: 340px; } }
.search input:focus-visible { outline: 2px solid var(--crimson); outline-offset: 2px; }
.lsubh { font: 500 1.35rem/1.2 var(--serif); margin: 1.6rem 0 .6rem; color: var(--ink); font-size-adjust: none; }

/* ---------- Top strip: sister-school code tabs + Events/phone (build.py header(), family_bar.strip()) ----------
   Oxblood band, 36px at every width. The current school (BSOE) is a paper tab that runs into the paper header below;
   the other codes are quiet. First code lines up with the crest; utilities line up with the header's right edge. */
.tstrip { background: var(--oxblood); color: var(--on-ox-2); font: 600 12px/1 var(--sans); font-size-adjust: var(--fsa, .46); }
.tstrip__in { display: flex; align-items: stretch; justify-content: space-between; gap: 20px; height: 36px; width: min(1480px, 100% - 2 * var(--gut)); margin-inline: auto; }
.tstrip .fstrip { display: flex; flex: none; }
.tstrip .fstrip ul { display: flex; align-items: stretch; list-style: none; margin: 0 0 0 -12px; padding: 0; }
.tstrip .fstrip li { display: flex; }
.tstrip .fstrip a { display: flex; align-items: center; height: 32px; margin-top: 4px; padding: 2px 12px 0; border-radius: 4px 6px 0 0; color: var(--on-ox-2); text-decoration: none; letter-spacing: .1em; white-space: nowrap; transition: color var(--t-1, .15s) ease, background-color var(--t-1, .15s) ease; }
.tstrip .fstrip a:hover { color: var(--on-ox); background: rgba(255, 255, 255, .07); }
.tstrip .fstrip a[aria-current] { background: var(--paper); color: var(--oxblood); }
.tstrip .fstrip a:focus-visible { outline: 2px solid var(--gilt-l); outline-offset: -2px; }
.tstrip .fstrip a[aria-current]:focus-visible { outline: 2px solid var(--crimson); outline-offset: -4px; }
.fstrip__vh, .tstrip__util a > span.is-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tstrip__util { display: flex; align-items: center; gap: 6px; padding-top: 6px; }
.tstrip__util a { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 8px; border-radius: 4px; color: var(--on-ox); text-decoration: none; font-weight: 500; letter-spacing: .02em; white-space: nowrap; }
.tstrip__util a:last-child { margin-right: -8px; }
.tstrip__util a:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.tstrip__util a:focus-visible { outline: 2px solid var(--gilt-l); outline-offset: -2px; }
.tstrip__util svg { width: 15px; height: 15px; color: var(--gilt-l); }
@media (max-width: 600px) {
  .tstrip__util { gap: 0; }
  .tstrip__util a { width: 32px; height: 32px; padding: 0; justify-content: center; }
  .tstrip__util a > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tstrip__util a:last-child { margin-right: -6px; }
}
@media (max-width: 420px) {
  .tstrip__in { gap: 8px; }
  .tstrip .fstrip ul { margin-left: -9px; }
  .tstrip .fstrip a { padding: 2px 9px 0; letter-spacing: .02em; }
}
@media print { .tstrip { display: none; } }


/* ───── 2026-11 revision: palette accents, homepage route, results by class year, admissions form, recaps ───── */
.kick { display: flex; align-items: center; gap: .7rem; margin: 0 0 1rem; font: 700 var(--fs-xs)/1 var(--sans); letter-spacing: .02em; text-transform: none; color: var(--rust-d); font-size-adjust: var(--fsa, .46); }
.kick span { display: inline-grid; place-items: center; min-width: 2.1rem; height: 2.1rem; padding: 0 .4rem; border-radius: 999px; background: var(--rust); color: #fff; letter-spacing: .02em; font-size: .8rem; }
.kick--dark { color: var(--gilt-l); }
.kick--dark span { background: var(--gilt); color: var(--night); }

.route { padding: 2rem 0 2.6rem; }
.route ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.route li + li { border-left: 1px solid var(--rule); }
.route a { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: .25rem 1rem; align-items: baseline; height: 100%; padding: 1.3rem 1.4rem 1.4rem; text-decoration: none; transition: background var(--t-1) var(--ease); }
.route li:first-child a { padding-left: 0; }
.route a::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: var(--rust); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--t-2) var(--ease); }
.route a:hover::before, .route a:focus-visible::before { transform: scaleX(1); }
.route__n { grid-row: span 2; font: italic 500 2.2rem/1 var(--serif); color: var(--rust); font-size-adjust: none; }
.route b { font: 500 1.5rem/1.1 var(--serif); font-size-adjust: none; }
.route a > span:not(.route__n) { grid-column: 2; font-size: .92rem; color: var(--ink-2); line-height: 1.45; }
.route svg { grid-row: 1; grid-column: 3; width: 20px; height: 20px; color: var(--rust); transition: transform var(--t-2) var(--ease); }
.route a:hover svg { transform: translateX(4px); }
@media (max-width: 900px) { .route ol { grid-template-columns: 1fr; } .route li + li { border-left: 0; border-top: 1px solid var(--rule); } .route a, .route li:first-child a { padding: 1.1rem 0; } }

.pw__lede { max-width: 30em; margin: 1.2rem 0 0; color: var(--ink-2); font-size: 1.05rem; }
.pw__range { color: var(--rust-d); }

/* results, one panel per class */
.rc { padding-bottom: 0; }
.rc__in { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); align-items: start; }
.rc__lead { position: sticky; top: calc(var(--hdr) + 2rem); }
.rc__lead p:not(.kick) { color: var(--on-ox-2); font-size: 1.02rem; max-width: 26em; margin-bottom: 1.8rem; }
.rc__cohorts { display: grid; gap: 1.6rem; }
.co { border: 1px solid color-mix(in srgb, var(--gilt) 40%, transparent); border-radius: var(--r); padding: clamp(1.2rem, 2.6vw, 2rem); background: var(--oxblood-2); }
.co__h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1.2rem; padding-bottom: 1rem; margin-bottom: .4rem; border-bottom: 1px solid color-mix(in srgb, var(--gilt) 35%, transparent); }
.co__h h3 { font: 500 clamp(1.7rem, 2.6vw, 2.2rem)/1 var(--serif); color: #fff; font-size-adjust: none; }
.co__h p { margin: 0; font-size: var(--fs-sm); color: var(--on-ox-2); }
.co__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1.6rem; margin: 0; }
.co--2025 .co__stats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 1.2rem; }
.co__s { padding: 1rem 0 .4rem; }
.co__s dt b { display: block; font: 500 clamp(2.6rem, 4.4vw, 4rem)/.95 var(--serif); color: var(--gilt-l); letter-spacing: -.02em; font-variant-numeric: lining-nums; font-size-adjust: none; }
.co--2025 .co__s dt b { font-size: clamp(2rem, 2.8vw, 2.6rem); }
.co__s dt span { display: block; margin-top: .45rem; font-weight: 650; color: var(--on-ox); font-size: .98rem; line-height: 1.3; }
.co__s dd { margin: .35rem 0 0; font-size: .84rem; line-height: 1.45; color: var(--on-ox-2); }
.rc__note { padding-top: 1.6rem; }
.rc__note p { margin: 0; max-width: 62em; font-size: .82rem; color: var(--on-ox-2); }
.mq-wrap { margin-top: var(--sp-4); border-top: 1px solid color-mix(in srgb, var(--gilt) 30%, transparent); }
.mq-wrap .mq { margin-top: 0; border-top: 0; padding-top: .9rem; }
.mq__cap { margin: 1.3rem auto 0; font: 700 var(--fs-xs)/1 var(--sans); letter-spacing: .02em; text-transform: none; color: var(--gilt-l); font-size-adjust: var(--fsa, .46); }
@media (max-width: 1100px) { .co--2025 .co__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .rc__in { grid-template-columns: 1fr; } .rc__lead { position: static; } }
@media (max-width: 560px) { .co__stats, .co--2025 .co__stats { grid-template-columns: 1fr 1fr; } .co--2026 .co__s:last-child { grid-column: 1 / -1; } }

/* college page: stats grouped by class */
.out__yr { margin-top: 2.2rem; }
.out__yh { margin: 0; color: var(--on-ox-2); font-size: .95rem; }
.out__yh b { font: 500 1.5rem/1 var(--serif); color: #fff; margin-right: .6rem; font-size-adjust: none; }
.out__yr .out__stats { margin-top: 1rem; grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 700px) { .out__yr .out__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* admissions: steps + short form side by side */
.as__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.as__steps { grid-template-columns: 1fr; margin-top: 1.6rem; }
.as__n { color: var(--rust); }
.as__form { background: #fff; border-radius: var(--r); padding: clamp(1.4rem, 3vw, 2.2rem); border-top: 4px solid var(--gilt); scroll-margin-top: calc(var(--hdr) + 24px); }
.as__form h3 { font: 500 1.8rem/1.15 var(--serif); font-size-adjust: none; }
.as__form > p { color: var(--ink-2); margin: .6rem 0 0; }
.as__form .inq, .begin__form .inq--adm { margin-top: 1.2rem; padding: 0; background: none; }
.fld span i { font-style: normal; font-weight: 400; color: var(--ink-3); }
@media (max-width: 900px) { .as__in { grid-template-columns: 1fr; } }

/* coming up + recaps */
.ups { padding-top: var(--sp-5); }
.ups__btns { display: flex; flex-wrap: wrap; gap: .6rem; }
.ups__head--recap { margin: var(--sp-5) 0 1.4rem; }
.up__d b { color: var(--rust-d); }
.up__d i { color: var(--rust-d); }
.evc__d { color: var(--ink-2); }
.evc__recap { font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .02em; text-transform: none; padding: .35em .6em; border-radius: 4px; background: var(--vellum); color: var(--ink-2); }
.px__n { color: var(--rust-d); }

/* current families hub */
.fam { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 3rem; padding: var(--sp-5) 0 var(--sp-6); }
.fam__g h2 { font-size: 1.6rem; padding-bottom: .8rem; margin-bottom: .6rem; border-bottom: 2px solid var(--gilt); }
.fam__g a { display: block; padding: .5rem 0; border-bottom: 1px solid var(--rule-2); text-decoration: none; font-weight: 550; }
.fam__g a:hover { color: var(--crimson-d); }
.fam__g--next b { display: inline-block; min-width: 4.2rem; color: var(--rust-d); }
@media (max-width: 900px) { .fam { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fam { grid-template-columns: 1fr; } }
.fld input:focus-visible, .fld select:focus-visible, .fld textarea:focus-visible, .think__f input:focus-visible { outline: 2px solid var(--crimson); outline-offset: 2px; }
.out__stats small { display: block; margin-top: .35rem; font-size: .8rem; line-height: 1.4; color: var(--on-ox-2); opacity: .85; }

/* Phone menu: one column of sub-links on narrow phones (2 columns overflowed at 360px). */
@media (max-width: 380px) { .sheet__grp ul { columns: 1; } }

/* Phone: let footer grid items shrink so the motto and "Think first" box fit the screen. */
@media (max-width: 800px) { .ft__top > * { min-width: 0; } .think__f input { min-width: 0; } .ft__latin { overflow-wrap: anywhere; } }


/* =====================================================================
   Family "One House" layer (Direction A, 2026-11-06)
   Same header, family strip, footer, spacing and motion rules as the BK Excellence and Academic Tutoring
   builds: EB Garamond only (since 2026-11-07), ink + paper, burgundy used sparingly, mustard for emphasis on dark,
   burnt orange only for small numbers, flat 4px corners, hairline rules, fade-up only.
   ===================================================================== */
body { font: 400 17px/1.7 var(--sans); font-size-adjust: var(--fsa, .46); }
h1 em, h2 em { font-style: italic; font-weight: 400; color: var(--crimson); }

/* buttons: flat, square-ish, ink */
.btn { --bh: 50px; border-radius: 4px; padding: 0 24px; font: 600 15px/1 var(--sans); font-size-adjust: var(--fsa, .46); }
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--crimson); }
.btn--line { border-color: var(--rule); }
.btn--gilt { background: var(--paper); color: var(--ink); }
.btn--gilt:hover { background: var(--gilt); color: var(--ink); }
.btn--ghost { border-color: rgba(250, 247, 245, .42); color: var(--paper); }
.btn--ghost:hover { border-color: var(--paper); background: rgba(250, 247, 245, .08); }

/* family strip: dark ink, current tab runs into the header (identical to BK and AT) */
.tstrip { background: var(--ink); color: var(--on-ox-2); font: 600 11.5px/1 var(--sans); font-size-adjust: var(--fsa, .46); }
.tstrip__in { height: 38px; width: min(1200px, 100% - 2 * var(--gut)); }
.tstrip .fstrip ul { margin-left: -14px; }
.tstrip .fstrip a { height: 31px; margin-top: 7px; padding: 1px 14px 0; border-radius: 4px 4px 0 0; color: var(--on-ox-2); letter-spacing: .02em; box-shadow: none; }
.tstrip .fstrip a:hover { color: var(--paper); background: rgba(255, 255, 255, .08); }
.tstrip .fstrip a[aria-current] { background: var(--paper); color: var(--ink); box-shadow: none; }
.tstrip .fstrip a:focus-visible { outline: 2px solid var(--gilt); outline-offset: -2px; }
.tstrip__util a { font: 500 13px/1 var(--sans); letter-spacing: .02em; color: var(--paper); border-radius: 4px; font-size-adjust: var(--fsa, .46); }
.tstrip__util a:hover { background: rgba(255, 255, 255, .08); }
.tstrip__util svg { color: var(--gilt); }

/* header: crest + Garamond wordmark, underline nav */
.hdr { background: var(--paper); }
.hdr.is-scrolled { border-color: transparent; box-shadow: 0 1px 0 var(--rule); }
.hdr__bar { height: 88px; width: min(1200px, 100% - 2 * var(--gut)); }
.crest { width: 44px; color: var(--crimson); }
.brand__name { display: block; font: 500 25px/1.05 var(--serif); letter-spacing: -.01em; text-transform: none; color: var(--ink); font-size-adjust: none; }
.brand__name small { display: block; margin-top: 4px; font: 500 12.5px/1.3 var(--sans); letter-spacing: .02em; color: var(--ink-3); font-size-adjust: var(--fsa, .46); }
.nav > ul { gap: 1.6rem; }
.nav__top { position: relative; padding: .4rem 0; border-radius: 0; font: 500 15px/1 var(--sans); font-size-adjust: var(--fsa, .46); }
.nav__top:hover, .nav__item.is-open .nav__top, .nav__top[aria-current] { background: none; }
.nav__top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--crimson); transform: scaleX(0); transform-origin: left; transition: transform 350ms var(--ease); }
.nav__top:hover::after, .nav__item.is-open .nav__top::after, .nav__top[aria-current]::after { transform: scaleX(1); }
.mega__in { width: min(1200px, 100% - 2 * var(--gut)); }
.mega__h { text-transform: none; letter-spacing: .02em; font: 600 13px/1.3 var(--sans); color: var(--ink-3); font-size-adjust: var(--fsa, .46); }
.burger { border-radius: 4px; }
.hdr__progress { display: none; }

/* home hero: yearbook photos as the big picture on the right, dark wash, text left (as on bselearning.com) */
.hero--a { position: relative; padding: 0; background: var(--ink); color: var(--paper); overflow: hidden; }
.hero--a .yb { position: absolute; top: 0; right: 0; bottom: 0; width: 64%; height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border-radius: 0; -webkit-mask-image: none; mask-image: none; }
.hero--a .yb::after { content: none; }
.hero--a .yb figure { border-radius: 0; aspect-ratio: 4 / 5; }
.hero--a .yb figure:nth-child(3n + 2) { aspect-ratio: 4 / 5; }
.hero--a .yb__track { gap: 6px; animation: none !important; transform: none !important; }
.hero--a .yb__col--1 .yb__track { transform: translateY(-38%) !important; }
.hero--a::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(20, 12, 14, 1) 0%, rgba(20, 12, 14, .97) 34%, rgba(20, 12, 14, .6) 52%, rgba(20, 12, 14, .12) 78%),
    linear-gradient(0deg, rgba(20, 12, 14, .55), transparent 40%); }
.hero--a .hero__in { position: relative; z-index: 1; display: block; min-height: min(700px, calc(100svh - 126px)); padding: 72px 0 64px; }
.hero--a .hero__txt { max-width: 640px; }
.hero--a .hero__h { font-size: clamp(3rem, 1.6rem + 3.6vw, 5.2rem); line-height: .98; letter-spacing: -.022em; color: var(--paper); }
.hero--a .hero__h em { color: var(--gilt); }
.hero--a .hero__lede { color: var(--on-ox-2); max-width: 44ch; margin: 1.6rem 0 2.1rem; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.6; }
.hero--a .btn--text { color: var(--paper); text-decoration-color: rgba(250, 247, 245, .4); }
.hero--a .btn--text:hover { text-decoration-color: var(--gilt); }
.hero--a .hero__rec { margin-top: 2.4rem; padding-top: 1.3rem; border-top: 1px solid rgba(250, 247, 245, .22); color: var(--on-ox-2); font-size: 14px; font-weight: 500; max-width: 760px; }
.hero--a .hero__rec li::before { background: var(--gilt); }
.route { position: relative; z-index: 1; background: var(--paper); }

/* no all-caps labels; small labels use the sans */
.ft__h, .think__band, .rc__sub > p { text-transform: none; letter-spacing: .02em; }

/* outcomes: college list stays still (was a moving marquee) */
.mq { -webkit-mask-image: none; mask-image: none; }
.mq__track { animation: none !important; flex-wrap: wrap; width: auto; row-gap: 1rem; }
.mq li[aria-hidden] { display: none; }

/* footer: ink, like the sister sites */
.ft { background: var(--oxblood); border-top: 0; }
.ft__h { color: var(--paper); font: 600 13px/1.3 var(--sans); font-size-adjust: var(--fsa, .46); }
.ft__brand { font: 500 1.35rem/1.2 var(--serif); text-transform: none; letter-spacing: -.005em; font-size-adjust: none; }
.ft__brand .crest { color: var(--paper); }
.think { border-radius: 4px; border-color: rgba(250, 247, 245, .2); background: rgba(255, 255, 255, .03); }
.think__f input { border-radius: 4px; }

/* inputs and chips: flat */
input, select, textarea { border-radius: 4px; }

/* section numbers: quiet, no capsule or all caps */
.kick { gap: .6rem; font: 500 14px/1 var(--sans); letter-spacing: .02em; text-transform: none; color: var(--ink-3); font-size-adjust: var(--fsa, .46); }
.kick span { min-width: 0; height: auto; padding: 0; border-radius: 0; background: none; color: var(--rust); font: italic 500 1.6rem/1 var(--serif); letter-spacing: 0; font-size-adjust: none; }
.kick--dark { color: var(--on-ox-2); }
.kick--dark span { background: none; color: var(--gilt); }
.route { padding: 2.2rem 0 0; }
/* event tags: one quiet style */
.tag, .tag--closed, .tag--parents, .tag--community, .tag--trip, .tag--art, .tag--arts, .tag--music, .tag--compete, .tag--exams, .tag--mark {
  background: transparent; color: var(--ink-2); border: 1px solid var(--rule); border-radius: 4px; font: 600 12px/1 var(--sans); letter-spacing: .02em; font-size-adjust: var(--fsa, .46); }
.tag--closed { color: var(--crimson); border-color: color-mix(in srgb, var(--crimson) 35%, transparent); }
.ft .btn--gilt { color: var(--ink); }
.ft .btn--gilt:hover { color: var(--ink); }
.as__form { border-top: 0; border: 1px solid var(--rule-2); }
.hero--a .hero__in { padding: 56px 0 48px; min-height: min(709px, calc(100svh - 126px)); }
.hero--a .hero__txt { max-width: 780px; }
.hero--a .hero__h { font-size: clamp(3rem, 1.6rem + 3vw, 4.6rem); }
.hero--a .hero__lede { max-width: 50ch; margin: 1.4rem 0 1.9rem; }
.hero--a .hero__rec { margin-top: 2rem; }
.hero--a .hero__in { display: flex; align-items: center; }

/* flat controls and cards, like the sister sites */
.chip, .search, .hb__years, .hb__y { border-radius: 4px; }
.chip.is-on, .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.hb__y.is-on { background: var(--gilt); color: var(--ink); }
.proc__panel, .lcards > li, .tabs__panel, .tp, .card { box-shadow: none; border: 1px solid var(--rule-2); border-radius: 4px; }
.lcards > li { border-radius: 4px; }
.st__b { box-shadow: none; }
.ft__brand .crest { color: #931D1D; }
.proc__nav button[aria-selected="true"] { box-shadow: none; border: 1px solid var(--rule-2); border-radius: 4px; }
.hb__tab[aria-selected="true"] { box-shadow: 0 0 0 2px var(--gilt); }

/* QA round 1 (2026-11-06) */
/* 2 chess board in the family palette */
.chess { padding-inline: 0; }
.board { border-radius: 4px; border-color: var(--ink); }
.sq .co { color: var(--ink-2); opacity: .8; font: 600 10px/1 var(--sans); text-shadow: none; background: none; font-size-adjust: var(--fsa, .46); }
.sq.is-sel { box-shadow: inset 0 0 0 3px var(--crimson); }
.board__msg.is-win { color: var(--crimson); }
/* 3 college list: in the grid, still, no ornaments */
.mq-wrap { width: min(1200px, 100% - 2 * var(--gut)); margin-inline: auto; }
.mq__cap { width: auto; margin: 2rem 0 0; font: 600 14px/1.3 var(--sans); letter-spacing: .02em; color: var(--gilt); font-size-adjust: var(--fsa, .46); }
.mq { width: auto; margin-top: 1rem; padding: 1.2rem 0 1.6rem; overflow: visible; }
.mq__track { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem 2rem; width: auto; }
.mq li { padding: 0; white-space: normal; font: italic 400 clamp(1.15rem, 1rem + .5vw, 1.45rem)/1.25 var(--serif); font-size-adjust: none; }
.mq li::after { content: none; }
/* 4 honor board: names stay light and readable on the photos */
.hb__ph::after { background: linear-gradient(rgba(20, 12, 14, .15) 20%, rgba(20, 12, 14, .93) 78%); }
.hb__tab[aria-selected="true"] .hb__nm { color: var(--paper); }
.hb__tab[aria-selected="true"] { transform: none; }
.hb__tab small { color: rgba(255, 255, 255, .9); }
/* 5 on-this-page bar: show that it scrolls */
.jump ul { justify-content: flex-start; padding-right: 3rem; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 4rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 4rem), transparent); }
/* 7 heading followed straight by copy */
:where(h2, h3) + p { margin-top: .8rem; }
/* 8 calendar month jumps land below the sticky bars */
.cal__mo, [id] { scroll-margin-top: calc(var(--hdr) + 38px + 5.5rem); }
/* 14 long select values */
.fld select { padding-right: 2.2rem; text-overflow: ellipsis; font-size: .95rem; }
/* 15 past calendar rows stay readable */
.cal__it.is-past { opacity: 1; color: var(--ink-2); }
.cal__it.is-past .cal__d b, .cal__it.is-past .cal__t b { color: var(--ink-2); }
/* 16 calendar month caption */
.cal__mo h2 b { line-height: 1; }
.cal__mo h2 span { margin-top: .9rem; }
/* 17 one focus border on search, no native clear button */
.search input:focus, .search input:focus-visible { outline: none; box-shadow: none; }
.search:focus-within { border-color: var(--crimson); box-shadow: 0 0 0 3px rgba(194, 46, 73, .15); }
.search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
/* 6 leftovers */
.evc__recap { background: var(--vellum); color: var(--ink-2); border-radius: 4px; }
.lnote, .outc, .cc-cognia { background: var(--vellum); }
/* QA round 2 */
.begin__lead h2, .lsec--form h2, .ct__form h2, .begin h2 { margin-bottom: 1rem; }
.sq .co { border: 0; outline: 0; box-shadow: none; padding: 0; background: transparent; border-radius: 0; width: auto; height: auto; min-width: 0; }
/* hero: ONE full-bleed photo with the family wash (Ben, 2026-11-06: no photo wall) */
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.hero--a::after { background: linear-gradient(90deg, rgba(20, 12, 14, .9) 0%, rgba(20, 12, 14, .74) 40%, rgba(20, 12, 14, .2) 78%), linear-gradient(0deg, rgba(20, 12, 14, .55), transparent 50%); }
/* yearbook strip: the photos Nicky chose, at a size their files support */
.ybs { padding-top: var(--sp-6); }
.ybs__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.ybs figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; background: var(--vellum); }
.ybs img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
/* small source files are never stretched past their real width (Ben, 2026-11-06) */
.poster img, .person__img img, .fig img { max-width: var(--nw, 100%); margin-inline: auto; display: block; }
.fig { background: var(--vellum); }

/* ===== phone chrome (phone QA 2026-11-07). Kept last so it beats the One House header sizes above.
   build.py copies everything between the two markers into home-chrome.css too. ===== */
/* phone-chrome:start */
@media (max-width: 900px) {
  /* family bar: same look, 44px invisible hit area */
  .tstrip .fstrip a, .tstrip__util a { position: relative; }
  .tstrip .fstrip a::after { content: ""; position: absolute; inset: -7px 0 -6px; }
  .tstrip__util a::after { content: ""; position: absolute; inset: -6px; }
  .ft__col a { display: flex; align-items: center; min-height: 44px; padding-block: 0; font-size: 15px; }
  .ft__base { font-size: 15px; }
  .think__tools button { min-height: 44px; }
  .brand { min-height: 44px; }
}
@media (max-width: 520px) {
  .hdr, .sheet { --hdr: 66px; }
  .hdr__bar { height: 66px; gap: .75rem; }
  .brand { flex: 0 1 auto; min-width: 0; gap: .6rem; }
  .crest { width: 38px; flex: none; }
  .brand__name { min-width: 0; font-size: 19px; }
  .brand__name small { font-size: 11.5px; margin-top: 3px; }
}
@media (max-width: 400px) { .brand__name small { display: none; } }
@media (max-width: 374px) {
  .hdr__bar { gap: .5rem; }
  .brand { gap: .5rem; }
  .crest { width: 34px; }
  .brand__name { font-size: 17px; }
}
@media (max-width: 520px) { html.hdr-over { --hdr-over-h: 67px; } }
/* footer links on phones and touch tablets (QA 2026-11-09): 44px tap areas; inline contact links keep their line
   but get a taller invisible hit area */
@media (max-width: 1060px), (pointer: coarse) {
  .ft__col a { display: flex; align-items: center; min-height: 44px; padding-block: 0; }
  .ft address, .ft__copy { line-height: 2.4; }
  .ft address a, .ft__copy a { display: inline-block; padding-block: 10px; margin-block: -10px; }
}
/* phone-chrome:end */
@media (max-width: 900px) {
  .chip { min-height: 44px; }
  .caljump a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  .crumbs { align-items: center; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  .hb__y { min-height: 44px; }
  .begin__ways a, .proc__next { min-height: 44px; }
  .tag, .evc__recap, .evc__soon { font-size: 14px; }
  /* html scroll-padding already clears the header (+ jump nav); only a small breath on top */
  [id], .cal__mo { scroll-margin-top: 1rem; }
  /* long email buttons wrap instead of pushing the page wide */
  .cta-line .btn { max-width: 100%; height: auto; min-height: 44px; padding-block: .6rem; }
  .cta-line .btn span { min-width: 0; overflow-wrap: anywhere; text-align: left; }
  .cta-line .btn svg { flex: none; }
}

/* ===== Dark header (Ben, 2026-11-07): solid deep burgundy from the top and while scrolling, like bselearning.com.
   Desktop mega menu stays a light panel (as on bselearning.com); the phone sheet is dark. Copied to home-chrome.css by build.py. */
.hdr { background: #5A1521; color: var(--on-ox); border-bottom-color: transparent; }
.hdr.is-scrolled { border-color: transparent; box-shadow: 0 10px 28px -18px rgba(41, 38, 41, .6); }
.hdr .crest { color: #931D1D; } /* the real logo is red, never gold (Ben, 2026-11-08) */
.hdr .brand__name { color: var(--on-ox); }
.hdr .brand__name small { color: var(--on-ox-2); }
.hdr .nav__top { color: var(--on-ox); }
.hdr .nav__top svg { opacity: .7; }
.hdr .nav__top::after { background: var(--gilt); height: 2px; }
.hdr .nav__top[aria-current] { color: var(--gilt-l); }
.hdr .hdr__link { color: var(--on-ox); }
.hdr .hdr__link svg { color: var(--gilt); }
.hdr .hdr__act .btn--solid { background: var(--gilt); color: var(--night); }
.hdr .hdr__act .btn--solid:hover { background: var(--paper); color: var(--night); }
.hdr .burger { color: var(--on-ox); border-color: rgba(250, 247, 245, .38); }
.hdr .burger:hover { border-color: var(--on-ox); background: rgba(250, 247, 245, .08); }
.hdr .hdr__bar :focus-visible, .sheet :focus-visible { outline-color: var(--gilt); }
.hdr .mega { color: var(--ink); }
.sheet { background: #5A1521; color: var(--on-ox); }
.sheet .sheet__grp { border-bottom-color: rgba(250, 247, 245, .16); }
.sheet .sheet__grp summary { color: var(--on-ox); }
.sheet .sheet__grp summary svg { color: var(--gilt); }
.sheet .sheet__grp li a { color: var(--on-ox-2); }
.sheet .sheet__grp li a:hover, .sheet .sheet__grp li a[aria-current] { color: var(--on-ox); }
.sheet .sheet__cta .btn--solid { background: var(--gilt); color: var(--night); }
.sheet .sheet__cta .btn--solid:hover { background: var(--paper); color: var(--night); }
.sheet .sheet__cta .btn--line { color: var(--on-ox); border-color: rgba(250, 247, 245, .38); background: transparent; }
.sheet .sheet__cta .btn--line:hover { border-color: var(--on-ox); background: rgba(250, 247, 245, .08); }
.sheet .sheet__cta .btn--line svg { color: var(--gilt); }
/* visible keyboard focus on form fields (QA 2026-11-07): the soft glow alone was too faint */
.fld input:focus-visible, .fld select:focus-visible, .fld textarea:focus-visible { outline: 2px solid var(--crimson); outline-offset: 2px; }
.think__f input:focus-visible { outline: 2px solid var(--gilt-l); outline-offset: 2px; }

/* ---------- Header over the photo hero (Ben, 2026-11-07, like bselearning.com). site.js adds .hdr-over and --hdr-over-h only on
   pages that open with a photo hero, and .is-solid after 40px of scroll. The hero slides up under the header by exactly the
   header's height and pads its top by the same amount, so the hero text and photo framing stay where Ben approved them. ---------- */
.hdr-over-ready .hdr { transition: background-color var(--hdr-over-t, .3s) ease, box-shadow var(--hdr-over-t, .3s) ease; }
.hdr-over-ready .hdr::after { transition: opacity var(--hdr-over-t, .3s) ease; }
.hdr-over .hdr::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 56px); z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 12, 14, .62) 0%, rgba(20, 12, 14, .38) 55%, rgba(20, 12, 14, 0) 100%); opacity: 1; }
.hdr-over .hdr:not(.is-solid) { background-color: transparent; box-shadow: none; }
.hdr-over .hdr.is-solid::after { opacity: 0; }
.hdr-over main > .hero--a:first-child { margin-top: calc(-1 * var(--hdr-over-h, 0px)); padding-top: var(--hdr-over-h, 0px); }

.hdr-over .hdr:has(.nav__item.is-open), .hdr-over .hdr:has(.burger[aria-expanded="true"]) { background-color: #5A1521; }
.hdr-over .hdr:has(.nav__item.is-open)::after, .hdr-over .hdr:has(.burger[aria-expanded="true"])::after { opacity: 0; }
.hdr-over .hdr:not(.is-solid) .brand__name small { color: rgba(250, 247, 245, .9); }
/* first-paint height of the header (site.js then keeps it exact), so the hero is pulled up before any script runs */
.hdr-over { --hdr-over-h: 89px; }

/* ───────── Inner pages, 2026-11-07: photo hero without gaps, intro band, alternating photo bands, feature lists, two-box and club layouts ───────── */
.phero--fit .phero__in { align-items: stretch; }
.phero--fit .phero__txt { align-self: center; }
.phero--fit .phero__img { max-height: 600px; min-height: 420px; height: 100%; }
.phero--fit .phero__img img { height: 100%; max-height: none; }
.phero--long h1 { font-size: clamp(2.3rem, 3.7vw, 3.5rem); line-height: 1.06; max-width: 17em; }
.lsplit--flip { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
.lsplit--flip > .lsec__img { order: -1; }
.lsplit--solo { grid-template-columns: minmax(0, 1fr); max-width: 52rem; }
.lsec__img--tall { aspect-ratio: 4 / 5; }
.lsec--intro { padding-top: clamp(3rem, 6vw, 5rem); }
.lintro > p:first-child { font-size: 1.28rem; line-height: 1.55; color: var(--ink); }
.lintro p { font-size: 1.1rem; }
.lintro .list { margin-block: 1rem 1.4rem; }
.lhead { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 1.5rem clamp(2rem, 5vw, 4.5rem); align-items: center; margin-bottom: clamp(1.8rem, 3vw, 2.6rem); }
.lhead h2 { font-size: var(--fs-h2); }
.lhead__txt p { margin: 1rem 0 0; color: var(--ink-2); font-size: 1.1rem; max-width: 34em; }
.lhead__img { margin: 0; border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 10; cursor: zoom-in; }
.lhead__img img { width: 100%; height: 100%; object-fit: cover; }
.lfeats { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.4rem; }
.lfeats > li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: .9rem; padding: 1.15rem 0 1.05rem; border-top: 1px solid var(--rule); }
.lfeats__n { font: 500 1.05rem/1.6 var(--serif); color: var(--crimson-d); font-variant-numeric: lining-nums tabular-nums; letter-spacing: .04em; padding-top: .1rem; border-top: 2px solid var(--gilt); width: max-content; }
.lfeats h3 { font: 500 1.3rem/1.2 var(--serif); margin: 0 0 .3rem; color: var(--ink); font-size-adjust: none; }
.lfeats p { margin: 0; font-size: 1rem; color: var(--ink-2); }
.louter { margin-top: 1.8rem; max-width: 46rem; }
.louter p { color: var(--ink-2); }
.lduo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.lduo > li { padding: clamp(1.6rem, 3vw, 2.4rem); background: var(--vellum); border-radius: var(--r); border-top: 3px solid var(--crimson); display: flex; flex-direction: column; }
.lsec--alt .lduo > li { background: #fff; }
.lduo__ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: color-mix(in srgb, var(--gilt) 22%, transparent); color: var(--crimson); margin-bottom: 1rem; }
.lduo__ic svg { width: 22px; height: 22px; }
.lduo h3 { font: 500 1.55rem/1.2 var(--serif); margin: 0 0 .6rem; font-size-adjust: none; }
.lduo p { color: var(--ink-2); }
.lduo .cta-line { margin-top: auto; padding-top: .8rem; }
/* clubs */
.cfacts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.cfacts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cfacts > li { background: #fff; border-radius: var(--r); padding: 1.5rem 1.4rem 1.4rem; display: flex; flex-direction: column; gap: .35rem; }
.cfact__ic { color: var(--crimson); margin-bottom: .5rem; }
.cfact__ic svg { width: 26px; height: 26px; }
.cfact__lab { font: 600 .82rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.cfacts b { font: 500 1.45rem/1.25 var(--serif); color: var(--ink); }
.cfact__note { color: var(--ink-2); font-size: 1rem; }
.csess { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.csess > li { background: var(--vellum); border-top: 3px solid var(--gilt); border-radius: 0 0 var(--r) var(--r); padding: 1.5rem 1.4rem; display: flex; flex-direction: column; gap: .4rem; }
.csess__n { font: 600 .85rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--crimson); }
.csess b { font: 500 1.4rem/1.3 var(--serif); }
.lsec--pics { padding-top: 0; }
.cpics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.cpics figure { margin: 0; aspect-ratio: 3 / 2; border-radius: var(--r); overflow: hidden; cursor: zoom-in; }
.cpics img { width: 100%; height: 100%; object-fit: cover; }
.ccard { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1.5rem 3rem; align-items: center; background: #fff; border-radius: var(--r); padding: clamp(1.6rem, 4vw, 2.8rem); }
.ccard h2 { font-size: var(--fs-h2); }
.cways { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; }
.cways a { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; color: var(--crimson-d); font-weight: 600; text-decoration: none; }
.cways a:hover span { text-decoration: underline; }
.cways svg { width: 20px; height: 20px; }
.ccard .cta-line { margin: 1rem 0 0; }
@media (max-width: 1000px) { .cfacts, .cfacts--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .phero--fit .phero__img { min-height: 0; height: auto; max-height: 380px; }
  .phero--fit .phero__img img { max-height: 380px; }
  .lsplit--flip { grid-template-columns: minmax(0, 1fr); }
  .lsec__img--tall { aspect-ratio: 4 / 3; }
  .lhead, .ccard { grid-template-columns: minmax(0, 1fr); }
  .lhead__img { order: -1; }
  .csess { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .lfeats, .lduo, .cpics { grid-template-columns: minmax(0, 1fr); }
  .cfacts, .cfacts--3 { grid-template-columns: minmax(0, 1fr); }
}
.lsplit--mid { align-items: center; }
.lsplit--mid > .lsec__img { position: static; }
.lfaq__img { margin: 2rem 0 0; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3; cursor: zoom-in; position: sticky; top: calc(var(--hdr) + 90px); }
.lfaq__img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .lfaq__img { display: none; } }
.lay .lcards > li { border-top: 3px solid var(--gilt); border-radius: 0 0 var(--r) var(--r); }
.club .cfacts { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.csess__all { grid-column: 1 / -1; }
@media (max-width: 640px) { .club .cfacts { grid-template-columns: minmax(0, 1fr); } }
/* event write-ups: lede, small headings, fact lists */
.evp__desc .evlede { font-size: 1.2rem; line-height: 1.55; color: var(--ink); }
.evp__desc .evh { font: 500 1.35rem/1.25 var(--serif); margin: 1.6rem 0 .5rem; color: var(--ink); font-size-adjust: none; }
.evfacts { margin: 1rem 0 1.2rem; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.evfacts > div { display: grid; grid-template-columns: minmax(7rem, .35fr) minmax(0, 1fr); gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--rule); }
.evfacts dt { font-weight: 600; color: var(--ink); }
.evfacts dd { margin: 0; color: var(--ink-2); }
@media (max-width: 520px) { .evfacts > div { grid-template-columns: minmax(0, 1fr); gap: .15rem; } }
.lay + .lsec--pics { padding-top: clamp(2.5rem, 5vw, 4rem); }
.cpics--1 { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-inline: auto; }
.shub { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.shub a { display: flex; flex-direction: column; gap: .5rem; height: 100%; padding: 1.5rem 1.4rem; background: var(--vellum); border-top: 3px solid var(--gilt); border-radius: 0 0 var(--r) var(--r); text-decoration: none; color: var(--ink); transition: background var(--t-1) var(--ease); }
.shub a:hover { background: #fff; }
.shub__k { font: 600 .82rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--crimson); }
.shub b { font: 500 1.3rem/1.25 var(--serif); }
.shub svg { width: 20px; height: 20px; margin-top: auto; color: var(--crimson); }
.lay p, .lay li, .evp__desc p { overflow-wrap: anywhere; }
.phero--wide .phero__in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; }
.phero--wide .phero__img { min-height: 0; height: auto; max-height: none; aspect-ratio: 3 / 2; }
.phero--wide .phero__img img { height: 100%; max-height: none; object-position: 50% 60%; }
@media (max-width: 900px) { .phero--wide .phero__in { grid-template-columns: minmax(0, 1fr); } .phero--wide .phero__img, .phero--wide .phero__img img { max-height: none; } }
/* event page: title block, then poster, then the write-up (phones read breadcrumb and title first) */
.evp { grid-template-areas: "head poster" "txt poster"; row-gap: 0; }
.evp__head { grid-area: head; }
.evp__txt { grid-area: txt; }
.evp > .poster { grid-area: poster; }
.evp__h { font: 500 1.6rem/1.2 var(--serif); margin: 1.8rem 0 .8rem; font-size-adjust: none; }
@media (max-width: 800px) {
  .evp { grid-template-areas: "head" "poster" "txt"; row-gap: 1.6rem; }
  .evp > .poster { order: 0; }
}
/* flyers and printed lists: whole, never cropped */
.flyer { margin: 0; width: 100%; max-width: 560px; border-radius: var(--r); overflow: hidden; background: #fff; box-shadow: 0 24px 50px -30px rgba(41, 38, 41, .35); cursor: zoom-in; }
.flyer img { width: 100%; height: 100%; object-fit: contain; display: block; }
.flyer__open { margin: .8rem 0 0; }
.flyer__open a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; color: var(--crimson-d); font-weight: 600; }
.flyer__open svg { width: 18px; height: 18px; }
.flyer-wrap { display: flex; flex-direction: column; align-items: center; }
.flyer-wrap .flyer { max-width: 760px; }
.phero__flyer { justify-self: end; width: 100%; max-width: 520px; }
.phero--wide[class] .phero__img[style] { aspect-ratio: auto; }
.phero--wide .phero__img[style] img { object-fit: contain; background: #fff; }
@media (max-width: 900px) { .phero__flyer { justify-self: stretch; max-width: none; } }
/* music: days, hours, rate table */
.chips { list-style: none; margin: 1.2rem 0 .8rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li { padding: .45rem .9rem; border-radius: 999px; background: #fff; border: 1px solid var(--rule); font-weight: 600; }
.mhours { list-style: none; margin: 0 0 1rem; padding: .9rem 0 0; display: flex; justify-content: space-between; border-top: 2px solid var(--gilt); max-width: 34rem; font-variant-numeric: lining-nums; color: var(--ink-2); }
.rates__key { color: var(--ink-2); font-size: 1rem; }
.rates__wrap { overflow-x: auto; margin: .6rem 0 1.4rem; }
.rates { width: 100%; border-collapse: collapse; min-width: 30rem; background: #fff; border-radius: var(--r); }
.rates th, .rates td { text-align: left; padding: .9rem 1rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.rates thead th { font: 600 .82rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.rates tbody th span, .rates__p { display: block; color: var(--ink-2); font-size: .95rem; font-weight: 400; }
.rates__p b { font: 500 1.25rem/1.3 var(--serif); color: var(--ink); }
/* photos in bands: keep faces in frame (they sit in the upper part of most school photos) */
.lsec__img img, .lhead__img img, .lfaq__img img, .cpics img, .lstrip img { object-position: 50% 30%; }
/* card rows: no empty cell when 3 cards wrap to 2 columns; stacked on phones instead of a sideways scroller */
@media (max-width: 1000px) and (min-width: 641px) {
  :is(.lcards, .lsteps, .cfacts, .shub) > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .lcards--3, .lcards--4, .lsteps--3, .lsteps--4 { display: grid; grid-template-columns: minmax(0, 1fr); overflow: visible; margin-inline: 0; padding: 0; gap: .8rem; }
  .lcards--3 > li, .lcards--4 > li, .lsteps--3 > li, .lsteps--4 > li { flex: none; }
}
/* top strip: 44px hit areas */
.tstrip__in { height: 44px; }
.tstrip .fstrip a { height: 40px; }
.tstrip__util { padding-top: 0; }
.tstrip__util a { height: 44px; min-width: 44px; justify-content: center; }
@media (max-width: 760px) { .tstrip__util a { width: 44px; height: 44px; } }
.list--num li::before { display: none; } .list--num { padding-left: 0; } .list--num li { padding-left: 0; }
/* rate table → one card per lesson type on phones */
@media (max-width: 640px) {
  .rates__wrap { overflow: visible; }
  .rates, .rates tbody, .rates tr, .rates th, .rates td { display: block; min-width: 0; width: 100%; }
  .rates { background: none; }
  .rates thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rates tbody tr { background: #fff; border-radius: var(--r); border-top: 3px solid var(--gilt); margin-bottom: .8rem; padding: .4rem 0; }
  .rates tbody th { border-bottom: 1px solid var(--rule); }
  .rates td { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: .2rem 1rem; border-bottom: 1px solid var(--rule); }
  .rates td:last-child { border-bottom: 0; }
  .rates td::before { content: attr(data-label); grid-row: span 2; font-weight: 600; color: var(--ink); padding-top: .2rem; }
}
/* photographer's photo row (added 2026-11-08) */
.cpics--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cpics--3 figure { aspect-ratio: 4 / 5; }
.lsec--prorow { padding-top: clamp(2rem, 4vw, 3rem); }
@media (max-width: 640px) { .cpics--3 { grid-template-columns: minmax(0, 1fr); } .cpics--3 figure { aspect-ratio: 4 / 3; } }
/* photographer's photo row (added 2026-11-08) */
.cpics--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cpics--3 figure { aspect-ratio: 4 / 5; }
.lsec--prorow { padding-block: clamp(2rem, 4vw, 3rem); }
@media (max-width: 640px) { .cpics--3 { grid-template-columns: minmax(0, 1fr); } .cpics--3 figure { aspect-ratio: 4 / 3; } }
/* small phones: the 44px strip icons plus four tabs must fit even before the web font loads */
@media (max-width: 400px) {
  .tstrip__in { gap: 8px; }
  .tstrip .fstrip a { padding: 2px 8px 0; letter-spacing: .05em; }
  .tstrip__util a { width: 40px; min-width: 40px; }
  .tstrip__util a:last-child { margin-right: -4px; }
}

/* ===== Original BSE colors (Ben, 2026-11-08: "all colors same as her original Brooklyn School of Excellence").
   Crimson #C22E49 (hover #A9253E), text #292629, paper #FAF7F5, pale pink #F7ECEF, header #5A1521, dark bands and footer #1F1416 (homepage bands #3A0C17), as before. No gold anywhere.
   --gilt is now the pale pink accent for DARK backgrounds; the rules below put crimson where the old mustard sat on light. ===== */
.fam__g h2, .lfeats__n, .mhours { border-color: var(--crimson); }
.csess > li, .lay .lcards > li, .shub a { border-top-color: var(--crimson); }
.lduo__ic { background: color-mix(in srgb, var(--crimson) 10%, #fff); }
.hero:not(.hero--a) .hero__rec li::before { background: var(--crimson); }
@media (max-width: 760px) { .rates tbody tr { border-top-color: var(--crimson); } }
.btn--solid { background: var(--crimson); color: #fff; }
.btn--solid:hover { background: #A9253E; color: #fff; }
/* header and phone sheet: deep burgundy #5A1521 as before (Ben, 2026-11-08), crimson button with white text */
.hdr .hdr__act .btn--solid, .sheet .sheet__cta .btn--solid { background: var(--crimson); color: #fff; }
.hdr .hdr__act .btn--solid:hover, .sheet .sheet__cta .btn--solid:hover { background: #A9253E; color: #fff; }
.hdr .nav__top[aria-current] { color: #fff; }
.hdr .mega :focus-visible { outline-color: var(--crimson); }
/* full-screen homepage hero (Ben, 2026-11-08: "like the other 3, make the pic take up the screen"). The hero starts under the
   44px family strip and runs to the bottom of the screen, header over it, like BK, Academic Tutoring and bselearning. */
.hdr-over main > .hero--a:first-child { min-height: calc(100svh - 44px); display: flex; flex-direction: column; }
.hdr-over main > .hero--a:first-child > .hero__in { flex: 1 0 auto; min-height: 0; }
/* focus rings on dark surfaces: pale pink, since crimson on the dark bands fails contrast (QA 2026-11-08) */
.ft :focus-visible, .hero--a :focus-visible, .tstrip :focus-visible, .skip:focus-visible, .sheet :focus-visible, .hdr__bar :focus-visible { outline-color: var(--gilt); }
.band :focus-visible, .visit :focus-visible, .rc :focus-visible, .hb :focus-visible, .sch :focus-visible, .out :focus-visible, .proc__stat :focus-visible, .btn--ghost:focus-visible { outline-color: var(--gilt); }
/* family strip back to its warm near-black (Ben, 2026-11-08) */
.tstrip { background: #1F1416; }

/* ===== Phone + tablet touch fixes (QA 2026-11-09) ===== */
/* phone: download buttons (reading lists, packets) stack at one even width */
@media (max-width: 600px) {
  .cta-row .btn { flex: 1 1 100%; justify-content: space-between; }
}