/* ===============================================================
   styles/phases.css — shared styles for phase pages.
   =============================================================== */

.phase-root {
  --phase: var(--ba-teal);
  --phase-dark: var(--ba-teal-dark);
  --phase-ink: var(--ba-navy);
}

/* ===============================================================
   1. BILLBOARD HERO
   Navy left → teal wedge right, italic display, students cutout
   bleeds to the bottom. Green italics removed (clashed with teal) —
   em tags now use a calm white instead.
   =============================================================== */
.phase-hero-billboard {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: var(--ba-navy);
  isolation: isolate;
}
.phase-hero-billboard::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(110deg, rgba(0,29,57,0.88) 0%, rgba(0,29,57,0.62) 38%, rgba(0,29,57,0) 52%),
    var(--phase-hero-img, none);
  background-size: cover;
  background-position: center right;
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 34% 100%);
  z-index: 0;
}
.phase-hero-billboard::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, var(--ba-navy) 0%, rgba(0,29,57,0.95) 34%, rgba(0,29,57,0) 50%);
  z-index: 1;
  pointer-events: none;
}

/* Inner grid — align the cutout against the section bottom, no gaps */
.phase-hero-billboard__inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 40px;
  padding: 64px 0 0;
  min-height: 620px;
}
.phase-hero-billboard__copy { padding-bottom: 96px; }

.phase-hero-billboard__eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  margin-bottom: 24px;
}
.phase-hero-billboard__display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 6.4vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
  color: #fff;
  text-wrap: balance;
}
.phase-hero-billboard__display em {
  font-style: italic;
  color: var(--ba-mint-light);
  font-weight: 400;
}
.phase-root--highschool .phase-hero-billboard__display em { color: var(--ba-red); }
/* High School is the red phase — remap every teal AND mint accent on the page to red */
.phase-root--highschool {
  --ba-teal: #E20630;
  --ba-teal-dark: #AF0626;
  --ba-mint: #E20630;
  --ba-mint-light: #E20630;
}
/* Philosophy / "Our approach" cards across all phase pages: grey-block surface,
   upright (non-italic) titles, reserved title height so paragraphs line up. */
.phase-philosophy .campus-card { background: rgba(0,29,57,0.05); }
.phase-philosophy .campus-card__name em { font-style: normal; }
.phase-philosophy .campus-card__name { font-size: 20px; text-wrap: balance; }
@media (min-width: 720px) {
  .phase-philosophy .campus-card__name { min-height: 2.4em; }
}
.phase-hero-billboard__display .line-1,
.phase-hero-billboard__display .line-2 { display: block; }

.phase-hero-billboard__lede {
  font-family: var(--font-serif);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55;
  max-width: 48ch;
  margin: 0 0 32px;
  color: rgba(255,255,255,0.82);
}
.phase-hero-billboard__meta {
  display: flex; gap: 48px; flex-wrap: wrap;
}
.phase-hero-billboard__meta-item {
  border-top: 1px solid rgba(255,255,255,0.35);
  padding-top: 12px;
  min-width: 140px;
}
.phase-hero-billboard__meta-label {
  font-family: var(--font-sans);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.6); margin-bottom: 6px;
}
.phase-hero-billboard__meta-value {
  font-family: var(--font-serif); font-size: 18px; color: #fff;
}
.phase-hero-billboard__meta-value em { font-style: italic; color: rgba(255,255,255,0.7); }

/* Cutout — bleeds straight to the bottom of the section */
.phase-hero-billboard__cutout {
  align-self: end; justify-self: end;
  display: flex; align-items: flex-end; justify-content: flex-end;
  width: 100%;
}
.phase-hero-billboard__cutout img {
  width: 100%;
  max-width: 560px;
  height: auto;
  display: block;
  margin-bottom: -1px; /* kill sub-pixel seam */
}

/* ---- Mobile ---- */
@media (max-width: 900px) {
  .phase-hero-billboard::before {
    /* horizontal band on top so the navy stays under the copy */
    clip-path: polygon(0 64%, 100% 48%, 100% 100%, 0 100%);
    background-position: center 30%;
  }
  .phase-hero-billboard::after {
    background: linear-gradient(180deg, var(--ba-navy) 0%, rgba(0,29,57,0.85) 40%, rgba(0,29,57,0) 62%);
  }
  .phase-hero-billboard__inner {
    grid-template-columns: 1fr;
    padding: 100px 0 0;
    min-height: 0;
    gap: 12px;
  }
  .phase-hero-billboard__copy { padding-bottom: 8px; }
  .phase-hero-billboard__display { font-size: clamp(44px, 10vw, 64px); }
  .phase-hero-billboard__cutout {
    justify-self: center;
    max-width: 380px;
    margin: 0 auto;
  }
}

/* Dandelion removed from hero — kept class no-op in case JSX references it */
.phase-hero-billboard__dandelion { display: none !important; }

/* ===============================================================
   1b. PHASE HERO VARIANTS (facilities-photo explorations)
   --------------------------------------------------------------
   Shared shell used by .phase-hero-v--duotone | --postcard | --portrait.
   Copy typography mirrors the billboard hero for continuity.
   =============================================================== */
.phase-hero-v {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: var(--ba-navy);
  isolation: isolate;
  min-height: 640px;
  display: flex;
  align-items: stretch;
}
.phase-hero-v__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 55%;
  z-index: 0;
}
.phase-hero-v__wash { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.phase-hero-v__frame {
  position: relative; z-index: 3;
  width: 100%;
  align-self: stretch;
  display: flex; align-items: stretch;
}
.phase-hero-v__inner {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: end;
  padding: 120px 0 0;
  min-height: 640px;
}
.phase-hero-v__copy { padding-bottom: 96px; max-width: 52ch; }

.phase-hero-v__eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  margin-bottom: 24px;
}
.phase-hero-v .phase-hero-billboard__display {
  /* reuse the existing display type */
  margin: 0 0 28px;
}
.phase-hero-v__lede {
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.55;
  max-width: 48ch;
  margin: 0;
  color: rgba(255,255,255,0.88);
}

.phase-hero-v__cutout {
  align-self: end; justify-self: end;
  display: flex; align-items: flex-end; justify-content: flex-end;
  width: 100%;
}
.phase-hero-v__cutout img {
  width: 100%;
  max-width: 540px;
  height: auto;
  display: block;
  margin-bottom: -1px;
}
.phase-hero-v__cutout--shadow img {
  filter: drop-shadow(-20px 30px 50px rgba(0,15,30,0.55));
}

/* ---- Variant: BRAND (navy + dandelion, matches the brand cover) ----
   No facilities photo. Solid navy field with a soft organic glow behind the
   cutout, and a large mint dandelion bursting from behind the kids on the
   right (the cover's left-side burst, flipped to suit copy-left / cutout-right). */
.phase-hero-v--brand { background: var(--ba-navy); }
.phase-hero-v--brand .phase-hero-v__bg { display: none; }
.phase-hero-v--brand .phase-hero-v__wash {
  background:
    radial-gradient(48% 62% at 70% 50%, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.018) 46%, rgba(0,0,0,0) 72%),
    linear-gradient(180deg, rgba(0,29,57,0) 60%, rgba(0,12,26,0.45) 100%);
}
.phase-hero-v--brand .phase-hero-v__cutout { position: relative; }
.phase-hero-v--brand .phase-hero-v__cutout img { position: relative; z-index: 1; max-width: 480px; }
/* Give the cutout column more width so the (single) HS figure reads larger,
   closer to the waist-cropped figures on the other phase pages. */
.phase-hero-v--brand .phase-hero-v__inner { grid-template-columns: 1fr 1.1fr; padding-top: 56px; min-height: 520px; }
/* HS lede is the longest of the phase ledes — give it a slightly smaller type
   size and wider measure so it settles to ~4 lines rather than 5. */
.phase-hero-v--brand .phase-hero-v__lede { font-size: clamp(1rem, 1.4vw, 1.08rem); max-width: 60ch; }
/* Uniform desktop height across all phase heroes (they're otherwise sized by
   their cutout figure, which varies). Matches the 700px main-page heroes. */
@media (min-width: 960px) { .phase-hero-v--brand { min-height: 700px; } }
.phase-hero-v__brand-shape { display: none; }
.phase-hero-v--brand .phase-hero-v__brand-shape {
  display: block;
  position: absolute;
  z-index: 1;
  top: 50%;
  right: -6%;
  height: 1150px;
  width: 1100px;
  max-width: 94%;
  transform: translateY(-50%) scaleX(-1);
  pointer-events: none;
}
.phase-hero-v--brand .phase-hero-v__brand-shape svg { width: 100%; height: 100%; display: block; }
.phase-hero-v__brand-spark { display: none; }
.phase-hero-v--brand .phase-hero-v__brand-spark {
  display: block;
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 623px;
  transform: translate(50%, -50%);
  width: 140px; height: 140px;
  pointer-events: none;
}
.phase-hero-v--brand .phase-hero-v__brand-spark .dandelion {
  width: 100% !important; height: 100% !important;
}
.phase-hero-v__brand-dandelion { display: none; }
.phase-hero-v--brand .phase-hero-v__brand-dandelion {
  display: block;
  position: absolute;
  z-index: 0;
  top: 18px;
  right: -10px;
  width: 540px; height: 540px;
  max-width: 96%;
  pointer-events: none;
}
.phase-hero-v--brand .phase-hero-v__brand-dandelion > .dandelion {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important;
}

/* ---- Variant: NATURAL ----
   Only a soft dark gradient on the left for headline legibility. */
.phase-hero-v--natural .phase-hero-v__bg {
  filter: saturate(1.05) contrast(1.02);
}
.phase-hero-v--natural .phase-hero-v__wash {
  background:
    linear-gradient(100deg, rgba(0,29,57,0.78) 0%, rgba(0,29,57,0.45) 28%, rgba(0,29,57,0.05) 50%, rgba(0,29,57,0) 70%),
    linear-gradient(180deg, rgba(0,29,57,0) 55%, rgba(0,29,57,0.45) 100%);
}

/* ---- Variant: DUOTONE ----
   Photo is pushed to a navy/teal duotone via a blend + tint stack so the
   architecture still reads but loses its colour cacophony. The cutout kids
   stay in full colour, which makes them pop without the composition
   feeling collaged. A top-left gutter label and a thin hairline anchor the
   whole thing so it feels intentionally framed. */
.phase-hero-v--duotone .phase-hero-v__bg {
  filter: grayscale(1) contrast(1.05) brightness(0.75);
}
.phase-hero-v--duotone .phase-hero-v__wash {
  background:
    linear-gradient(180deg, rgba(0,29,57,0.55) 0%, rgba(0,29,57,0.35) 40%, rgba(0,29,57,0.78) 100%),
    linear-gradient(110deg, rgba(0,29,57,0.92) 0%, rgba(0,29,57,0.55) 42%, rgba(3,156,172,0.35) 100%);
  mix-blend-mode: normal;
}
.phase-hero-v__gutter {
  position: absolute;
  top: 28px; left: 50%;
  transform: translateX(-50%);
  width: min(1200px, calc(100% - 48px));
  z-index: 4;
  display: flex; gap: 10px; align-items: center;
  font-family: var(--font-sans);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  pointer-events: none;
}
.phase-hero-v__gutter .dot { opacity: 0.6; }
.phase-hero-v--duotone::after {
  /* bottom hairline */
  content: "";
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 0;
  width: min(1200px, calc(100% - 48px));
  height: 1px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.35) 20%,
    var(--phase, #039CAC) 50%,
    rgba(255,255,255,0.35) 80%,
    rgba(255,255,255,0) 100%);
  z-index: 4;
}

/* ---- Variant: POSTCARD ----
   Full-bleed photo, kept mostly in its own colour but with a strong
   navy-from-left gradient so the copy side reads cleanly, plus a soft
   vignette to tame the sky. */
.phase-hero-v--postcard .phase-hero-v__bg {
  filter: saturate(0.9) contrast(1.02);
}
.phase-hero-v--postcard .phase-hero-v__wash {
  background:
    radial-gradient(120% 80% at 50% 120%, rgba(0,29,57,0.55) 0%, rgba(0,29,57,0) 55%),
    linear-gradient(110deg, rgba(0,29,57,0.95) 0%, rgba(0,29,57,0.75) 34%, rgba(0,29,57,0.15) 58%, rgba(0,29,57,0.05) 100%),
    linear-gradient(180deg, rgba(0,29,57,0.35) 0%, rgba(0,29,57,0) 30%);
}

/* ---- Variant: PORTRAIT ----
   Solid navy frame, photo contained in a rounded window on the right,
   cutout overlaps the window edge. */
.phase-hero-v--portrait {
  background: var(--ba-navy);
}
.phase-hero-v--portrait .phase-hero-v__inner {
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
  gap: 56px;
  padding: 120px 0 72px;
}
.phase-hero-v--portrait .phase-hero-v__copy {
  padding-bottom: 40px;
  align-self: end;
}
.phase-hero-v__window {
  position: relative;
  align-self: stretch;
  min-height: 520px;
  border-radius: 6px;
  overflow: hidden;
  isolation: isolate;
  background: #000;
}
.phase-hero-v__window-media {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.phase-hero-v__window::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,29,57,0) 40%, rgba(0,29,57,0.6) 100%);
  z-index: 1;
}
.phase-hero-v__window-label {
  position: absolute;
  left: 20px; top: 20px;
  z-index: 3;
  font-family: var(--font-sans);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  padding: 6px 10px;
  background: rgba(0,29,57,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 2px;
}
.phase-hero-v__cutout--overlap {
  position: absolute;
  right: -4%; bottom: 0;
  z-index: 4;
  width: 90%;
  justify-self: unset; align-self: unset;
}
.phase-hero-v__cutout--overlap img {
  max-width: 100%;
  filter: drop-shadow(-14px 20px 36px rgba(0,0,0,0.45));
}

/* ---- Mobile for the new variants ---- */
@media (max-width: 900px) {
  .phase-hero-v { min-height: 0; }
  .phase-hero-v__inner {
    grid-template-columns: 1fr;
    padding: 120px 0 0;
    min-height: 0;
    gap: 12px;
  }
  .phase-hero-v__copy { padding-bottom: 8px; }
  .phase-hero-v__cutout {
    justify-self: center;
    margin: 0 auto;
  }
  .phase-hero-v__cutout img { max-width: 360px; }
  .phase-hero-v__gutter { top: 14px; font-size: 9px; }

  .phase-hero-v--portrait .phase-hero-v__inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 120px 0 0;
  }
  .phase-hero-v__window {
    min-height: 340px;
    margin-top: 8px;
  }
  .phase-hero-v__cutout--overlap {
    position: absolute;
    right: -2%; bottom: 0;
    width: 80%;
  }
}

/* ---- Brand hero on mobile ----
   On phones the phase heroes drop the kid cutout (and its triangle + dandelion
   decorations) entirely and become a clean, solid lighter-navy block holding
   just the copy. Keeps every phase hero consistent and avoids the cutout
   crowding the headline on narrow screens. */
@media (max-width: 900px) {
  /* Mobile brand hero: copy on top, then a clean navy stage holding the
     triangle, the kids cutout and the dandelion spark (no photo background). */
  /* Uniform banner height across ALL age groups (Junior Prep is the reference).
     The hero is a fixed-height navy stage; the kids cutout is bottom-anchored
     and dropped below the fold so its bottom (waist) is cropped — letting the
     children render larger within the same banner height. */
  /* Banner fills exactly one view-window on load (≈ one frame tall). */
  .phase-hero-v--brand { background: var(--ba-navy); min-height: 0; height: 100vh; height: 100svh; }
  .phase-hero-v--brand .phase-hero-v__bg { display: none !important; }

  /* minmax(0,1fr) is critical: a plain 1fr is minmax(auto,1fr), which lets the
     big serif headline / cutout image push the grid track WIDER than the
     viewport, causing the copy to run off the right edge. */
  .phase-hero-v--brand .phase-hero-v__inner {
    display: flex !important;
    flex-direction: column;
    gap: 0 !important;
    padding: 86px 0 0 !important;
    min-height: 0 !important;
    height: 100%;
  }
  .phase-hero-v--brand .phase-hero-v__copy { padding-bottom: 14px; max-width: 100%; position: relative; z-index: 3; flex: 0 0 auto; }
  .phase-hero-v--brand .phase-hero-billboard__display {
    font-size: clamp(2.05rem, 8.4vw, 2.7rem);
    overflow-wrap: break-word;
  }
  .phase-hero-v--brand .phase-hero-v__lede { max-width: 100%; }

  /* Re-show the brand visuals that desktop hides */
  .phase-hero-v--brand .phase-hero-v__cutout,
  .phase-hero-v--brand .phase-hero-v__brand-shape,
  .phase-hero-v--brand .phase-hero-v__brand-spark { display: block !important; }
  .phase-hero-v--brand .phase-hero-v__brand-dandelion { display: none !important; }

  /* Kids cutout fills the space between the copy and the bottom edge, scaling
     with the viewport — flush under the text (no blank gap), grounded at the
     bottom, on any device. */
  /* Kids cutout fills the space between the copy and the bottom edge, scaling
     with the viewport — flush under the text (no blank gap), grounded at the
     bottom, on any device. The image is absolutely positioned inside so its
     intrinsic width can't widen the flex column (which pushed it off-centre). */
  .phase-hero-v--brand .phase-hero-v__cutout {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    margin: 0 !important;
    z-index: 2;
  }
  .phase-hero-v--brand .phase-hero-v__cutout img {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: auto;
    max-width: 100vw;
    max-height: none;
    object-fit: contain;
    object-position: center bottom;
    margin: 0 !important;
  }

  /* High School — fixed banner with the girl grounded at the bottom, sized to
     read comparably to the other phase cutouts (the tight-cropped portrait no
     longer needs the old "size it up" treatment). */
  .phase-root--highschool .phase-hero-v--brand { height: 800px; }
  .phase-root--highschool .phase-hero-v--brand .phase-hero-v__cutout {
    position: absolute;
    flex: none;
    bottom: 0;
    top: auto;
    left: 50%; right: auto;
    transform: translateX(-50%);   /* centre the HS cutout */
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: auto;
  }
  .phase-root--highschool .phase-hero-v--brand .phase-hero-v__cutout img {
    position: static;
    top: auto; bottom: auto; left: auto;
    transform: none;
    width: 320px !important;
    height: auto;
    max-width: none;
  }

  /* Triangle — bottom-RIGHT anchored, flush against the right edge of the
     frame, spanning ~50% of the screen width (height tracks the wedge's
     ~0.618 aspect so it fills without letterboxing), in a lighter navy. */
  .phase-hero-v--brand .phase-hero-v__brand-shape {
    top: auto;
    bottom: 0;
    left: auto;
    right: 0;
    width: 60vw;
    height: 97vw;
    max-width: none;
    transform: scaleX(-1);
    transform-origin: center bottom;
    opacity: 1;
  }
  .phase-hero-v--brand .phase-hero-v__brand-shape svg path { fill: var(--ba-navy-2); }

  /* Dandelion spark — enlarged 50%, centred horizontally on screen and
     layered BEHIND the children (cutout is z-index 2). */
  .phase-hero-v--brand .phase-hero-v__brand-spark {
    top: auto;
    bottom: 120px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 176px;
    height: 176px;
    z-index: 1;
  }
}

/* ===============================================================
   2. STICKY ANCHOR NAV
   =============================================================== */
.phase-nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,29,57,0.08);
  display: flex; justify-content: center; gap: 8px;
  padding: 14px 16px;
  overflow-x: auto; scrollbar-width: none;
}
.phase-nav::-webkit-scrollbar { display: none; }
.phase-nav a {
  font-family: var(--font-sans);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 500; color: var(--fg-2);
  text-decoration: none; border: 0;
  padding: 8px 16px; border-radius: 999px;
  white-space: nowrap;
  transition: background 200ms, color 200ms;
}
.phase-nav a:hover { color: var(--phase-dark); background: rgba(3,156,172,0.08); }
.phase-nav a.active { color: var(--phase-dark); background: rgba(3,156,172,0.1); }

/* ===============================================================
   3. SECTION SCAFFOLD
   =============================================================== */
.phase-section {
  padding: clamp(64px, 8vw, 112px) 0;
  position: relative;
}
.phase-section--tint { background: var(--ba-off-white); }
.phase-section__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 20px 0 48px;
  max-width: 22ch;
  color: var(--ba-navy);
  text-wrap: balance;
}
.phase-section__title em { font-style: italic; color: var(--phase-dark); }

/* ===============================================================
   4. PHILOSOPHY CARDS (reference style: rounded image + pill eyebrow + text below)
   Image rounded on its own (not clipped by a square container).
   Text sits below the image with generous breathing room.
   =============================================================== */
.phase-philosophy__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 960px) {
  .phase-philosophy__grid { grid-template-columns: 1fr; gap: 40px; }
}

.phil-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Image block: rounded corners, restrained aspect, no hard card background */
.phil-card__media {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: 24px;
  overflow: hidden;
  background: var(--bg-2);
}
.phil-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms var(--ease-natural);
}
.phil-card:hover .phil-card__media img { transform: scale(1.03); }

/* Pill eyebrow (white chip) floats on the image's top-left */
.phil-card__badge {
  position: absolute;
  top: 18px; left: 18px;
  background: #fff;
  color: var(--phase-dark);
  font-family: var(--font-sans);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: 999px;
  box-shadow: 0 2px 12px rgba(0,29,57,0.08);
}

.phil-card__body { padding: 0 4px; }
.phil-card__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  color: var(--ba-navy);
}
.phil-card__title em { font-style: italic; color: var(--phase-dark); }
.phil-card p {
  margin: 0;
  color: var(--fg-2);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
}

/* ===============================================================
   5. SUBJECTS
   =============================================================== */
.phase-subjects__grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 900px) {
  .phase-subjects__grid { grid-template-columns: 1fr; gap: 40px; }
}
/* HS subjects: split list into two equal columns; electives moved below, horizontal */
.phase-root--highschool .phase-subjects__grid--cols {
  grid-template-columns: 1fr 1fr;
  gap: 0 96px;
  align-items: start;
}
.phase-root--highschool .subject-schedule li { align-items: start; }
@media (max-width: 760px) {
  .phase-root--highschool .phase-subjects__grid--cols { grid-template-columns: 1fr; gap: 0; }
}
.phase-root--highschool .phase-subjects__aside--horizontal {
  margin-top: 72px;
  display: grid;
  grid-template-columns: 0.8fr 1.4fr;
  gap: 0;
  align-items: stretch;
  max-width: none;
  padding: 0;
  overflow: hidden;
}
.phase-root--highschool .phase-subjects__aside-head {
  position: relative;
  display: flex; align-items: flex-end;
  padding: 36px;
  min-height: 240px;
  overflow: hidden;
}
.phase-root--highschool .phase-subjects__aside-head img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  object-position: 62% center;
}
.phase-root--highschool .phase-subjects__aside-head-wash {
  position: absolute; inset: 0;
  background: linear-gradient(165deg, rgba(0,29,57,0.62) 0%, rgba(0,29,57,0.84) 100%);
}
.phase-root--highschool .phase-subjects__aside-head h3 {
  position: relative; z-index: 1;
  margin: 0; max-width: 16ch;
  color: #fff;
  font-style: normal;
}
.phase-root--highschool .phase-subjects__aside-head h3 em { color: #fff; font-style: normal; }
.phase-root--highschool .phase-subjects__aside-copy {
  padding: 36px;
  align-self: center;
}
.phase-root--highschool .phase-subjects__aside-copy p:last-of-type { margin-bottom: 0; }
@media (max-width: 760px) {
  .phase-root--highschool .phase-subjects__aside--horizontal { grid-template-columns: 1fr; }
}
.subject-list { display: none; } /* replaced by .phase-table */

/* ===============================================================
   PHASE TABLE — shared pattern used by Subjects + Need-to-Know.
   Visual language borrowed from the home page "schedule" table:
   border-top dividers, label on the left (serif italic), value on
   the right (sans), optional meta column aligned right. Dense but
   breathable.
   =============================================================== */
.phase-table {
  list-style: none; margin: 0; padding: 0;
  max-width: 100%;
}
.phase-table li {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) 1.2fr auto;
  gap: 24px; align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid rgba(0,29,57,0.14);
}
.phase-table li:last-child { border-bottom: 1px solid rgba(0,29,57,0.14); }
.phase-table__label {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 400;
  color: var(--ba-navy);
  line-height: 1.35;
}
.phase-table__value {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-2);
}
.phase-table__value em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--fg-2);
  font-size: 15px;
}
.phase-table__meta {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--phase-dark);
  font-weight: 500;
  white-space: nowrap;
  justify-self: end;
}

/* NTK variant: 2 columns (no meta), wider label column */
.phase-table--ntk li {
  grid-template-columns: minmax(180px, 0.9fr) 2fr;
}
.phase-table--ntk .phase-table__label {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--phase-dark);
  font-weight: 500;
  padding-top: 3px;
}
.phase-table--ntk .phase-table__value {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--ba-navy);
  line-height: 1.4;
}
.phase-table--ntk .phase-table__value em {
  font-style: italic;
  color: var(--phase-dark);
  font-size: 17px;
}

@media (max-width: 640px) {
  .phase-table li {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 16px 0;
  }
  .phase-table__meta { justify-self: start; }
  .phase-table--ntk li { gap: 2px; }
}

/* Kill the hover lift / card shell on old .ntk (still referenced elsewhere) */
.ntk-grid { display: none; }

/* ===============================================================
   Tighten vertical rhythm between Philosophy (white) and
   Subjects (tint). The default .phase-section padding produces
   a very large gap — halve the adjoining edges so the tint
   reads as a continuation rather than a floating block.
   =============================================================== */
.phase-philosophy { padding-bottom: clamp(40px, 5vw, 64px); }
.phase-section--subjects { padding-top: clamp(56px, 6vw, 88px); }

/* ===============================================================
   HS GALLERY — single-image slider with arrows, caption, dots.
   Replaces the old scroll-snap carousel.
   =============================================================== */
.hs-gallery {
  padding: clamp(72px, 9vw, 120px) 0;
  background:
    radial-gradient(80% 100% at 15% 100%, rgba(28,59,90,0.5) 0%, rgba(28,59,90,0) 55%),
    linear-gradient(180deg, var(--ba-navy) 0%, var(--ba-navy-2) 100%);
  color: #fff;
  overflow: hidden;
  position: relative;
}
.hs-gallery .eyebrow-txt { color: rgba(255,255,255,0.7); }
.hs-gallery .phase-section__title { color: #fff; }
.hs-gallery .phase-section__title em { color: var(--phase); }

.hs-gallery__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; margin-bottom: 40px; flex-wrap: wrap;
}
.hs-gallery__counter {
  font-family: var(--font-serif);
  display: flex; align-items: baseline; gap: 10px;
  color: rgba(255,255,255,0.85);
}
.hs-gallery__counter span:first-child {
  font-size: 42px; color: var(--phase); font-style: italic;
  line-height: 1;
}
.hs-gallery__counter-sep { font-size: 24px; opacity: 0.4; }
.hs-gallery__counter span:last-child { font-size: 18px; }

/* ---- Hero + filmstrip layout ---- */
/* ---- Editorial masonry grid ---- */
.hs-grid {
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  gap: 22px;
  align-items: stretch;
}
.hs-grid__col { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.hs-grid__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
/* bottom-right wide tile grows to align its base with the left column's last tile */
.hs-grid__col:last-child > .hs-grid__tile--wide:last-child { flex: 1 1 auto; min-height: 0; }
.hs-grid__col:last-child > .hs-grid__tile--wide:last-child img { aspect-ratio: auto; }

.hs-grid__tile {
  position: relative;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(0,0,0,0.35);
  box-shadow: 0 30px 60px -34px rgba(0,0,0,0.6);
  opacity: 0;
  transform: translateY(34px) scale(0.985);
  transition: opacity 820ms cubic-bezier(.2,.7,.2,1), transform 820ms cubic-bezier(.2,.7,.2,1);
}
.hs-grid__tile.is-in { opacity: 1; transform: none; }
/* gentle stagger within each column */
.hs-grid__col .hs-grid__tile:nth-child(2) { transition-delay: 90ms; }
.hs-grid__col .hs-grid__tile:nth-child(3) { transition-delay: 160ms; }
.hs-grid__pair .hs-grid__tile:nth-child(2) { transition-delay: 90ms; }
@media (prefers-reduced-motion: reduce) {
  .hs-grid__tile { opacity: 1; transform: none; transition: none; }
}
.hs-grid__tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 640ms cubic-bezier(.2,.0,.2,1);
}
.hs-grid__tile:hover img { transform: scale(1.045); }

.hs-grid__tile--tall img     { aspect-ratio: 10 / 13; }
.hs-grid__tile--tall .hs-grid__slot { display: block; width: 100%; aspect-ratio: 10 / 13; }
.hs-grid__tile--land img     { aspect-ratio: 11 / 8; }
.hs-grid__tile--wide img     { aspect-ratio: 16 / 8.6; }
.hs-grid__tile--portrait img { aspect-ratio: 7 / 9; }

/* Extra gallery row (when more than 7 images are supplied) */
.hs-grid-extra {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-top: 22px;
}
@media (min-width: 700px) { .hs-grid-extra { grid-template-columns: 1fr 1fr; } }
.hs-grid-extra .hs-grid__tile--land img { aspect-ratio: 16 / 9; }
/* Extra-row tiles live outside the reveal-observed .hs-grid, so the fade-in
   never fires on them — keep them visible instead of stuck at opacity:0. */
.hs-grid-extra .hs-grid__tile { opacity: 1; transform: none; }

/* Caption — fades up from a soft scrim on hover */
.hs-grid__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 30px 18px 16px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px; line-height: 1.3;
  color: #fff;
  background: linear-gradient(180deg, rgba(0,16,32,0) 0%, rgba(0,16,32,0.72) 100%);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 320ms ease, transform 320ms ease;
  pointer-events: none;
}
.hs-grid__tile:hover .hs-grid__cap,
.hs-grid__tile:focus-within .hs-grid__cap { opacity: 1; transform: translateY(0); }

@media (max-width: 760px) {
  .hs-grid { grid-template-columns: 1fr; gap: 16px; }
  .hs-grid__col { gap: 16px; }
  .hs-grid__pair { gap: 16px; }
  .hs-grid__cap { opacity: 1; transform: none; font-size: 15px; }
}

/* Mobile: filmstrip goes horizontal under the hero */
@media (max-width: 900px) {
  .hs-gallery__strip {
    flex-direction: row;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding-right: 0;
    padding-bottom: 4px;
  }
  .hs-gallery__thumb {
    width: 120px;
    aspect-ratio: 4 / 3;
    flex: 0 0 auto;
  }
}
.phase-subjects__aside {
  background: #fff;
  color: var(--ba-navy);
  padding: 40px 36px;
  border-radius: 16px;
  position: sticky; top: 100px;
  box-shadow: 0 24px 64px -28px rgba(0, 29, 57, 0.22), 0 2px 8px rgba(0, 29, 57, 0.04);
}
.phase-subjects__aside h3 {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 26px; line-height: 1.2;
  margin: 0 0 16px; color: var(--ba-navy);
}
.phase-subjects__aside h3 em { font-style: italic; color: var(--phase-dark, var(--ba-teal-dark)); }
.phase-subjects__aside p {
  color: var(--fg-2);
  margin: 0 0 14px;
  font-size: 15px; line-height: 1.6;
}
.phase-subjects__aside .small-note {
  margin-top: 20px;
  font-size: 12px;
  color: var(--fg-3);
  font-style: italic;
  border-top: 1px solid rgba(0, 29, 57, 0.10);
  padding-top: 14px;
}

/* ===============================================================
   6. TECHNOLOGY
   =============================================================== */
.phase-tech {
  background:
    radial-gradient(90% 120% at 85% 0%, rgba(28,59,90,0.6) 0%, rgba(28,59,90,0) 55%),
    linear-gradient(180deg, var(--ba-navy-2) 0%, var(--ba-navy) 55%, var(--ba-navy) 100%);
  color: #fff;
}
.phase-tech__grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 900px) {
  .phase-tech__grid { grid-template-columns: 1fr; gap: 36px; }
}
.phase-tech__title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(36px, 4.6vw, 56px);
  line-height: 1.05;
  margin: 20px 0 0;
  color: #fff;
  text-wrap: balance;
}
.phase-tech__title em { font-style: italic; color: var(--ba-mint-light); }
.phase-tech__lead { display: flex; flex-direction: column; }
.phase-tech__lead p {
  color: rgba(255,255,255,0.82);
  font-size: 16px; line-height: 1.65;
  margin: 0 0 18px; max-width: 46ch;
}
.phase-tech__lead p:first-of-type { margin-top: 8px; }
.phase-tech__lead p:last-of-type { margin-bottom: 0; }
.phase-tech__body { position: relative; }
/* Scroll "appear up" reveal */
.reveal-up {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity 760ms cubic-bezier(.2,.7,.2,1), transform 760ms cubic-bezier(.2,.7,.2,1);
}
.reveal-up.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal-up { opacity: 1; transform: none; transition: none; }
}
.phase-root--highschool .phase-tech__body { margin-top: 64px; }
@media (max-width: 900px) {
  .phase-root--highschool .phase-tech__body { margin-top: 0; }
}
.phase-tech__photo {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.25);
}
.phase-tech__photo img {
  width: 100%; height: 100%;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.phase-tech__photo::after {
  /* subtle navy glaze bottom so it anchors on the gradient bg */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,29,57,0) 38%, rgba(0,18,38,0.88) 100%);
  pointer-events: none;
}
@media (max-width: 900px) {
  .phase-tech__photo { margin-top: 0; }
  .phase-tech__photo img { aspect-ratio: 16 / 10; }
}
.phase-tech__body p {
  color: rgba(255,255,255,0.82);
  font-size: 16px; line-height: 1.65;
  margin: 0 0 18px;
}
.phase-tech__tools {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  z-index: 2;
}
@media (max-width: 900px) {
  .phase-tech__tools {
    position: static;
    left: auto; right: auto; bottom: auto;
    margin-top: 12px;
  }
}
.tech-chip {
  background: rgba(6,24,44,0.62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: none;
  border-radius: 14px;
  padding: 13px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.tech-chip__label {
  font-family: var(--font-sans);
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ba-mint-light); font-weight: 500;
}
.tech-chip__value {
  font-family: var(--font-serif);
  font-size: 19px; color: #fff; line-height: 1.2;
}

/* ===============================================================
   7. NEED TO KNOW — rounded pill cards (restored)
   =============================================================== */
.ntk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) { .ntk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ntk-grid { grid-template-columns: 1fr; } }

.ntk {
  background: var(--bg-2);
  border-radius: 20px;
  padding: 24px 24px 26px;
  transition: transform 260ms var(--ease-natural), box-shadow 260ms;
  border: 1px solid rgba(0,29,57,0.06);
}
.ntk:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -24px rgba(0,29,57,0.15);
}
.ntk__label {
  font-family: var(--font-sans);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--phase-dark); font-weight: 500;
  margin-bottom: 8px;
}
.ntk__value {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.4;
  color: var(--ba-navy);
}

/* ===============================================================
   8. QUOTE
   =============================================================== */
.phase-quote {
  background: var(--bg-1);
  padding: clamp(80px, 10vw, 140px) 0;
  position: relative;
  overflow: hidden;
}
.phase-quote__text {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.25;
  margin: 20px 0 32px;
  max-width: 30ch;
  color: var(--ba-navy);
  font-style: italic;
  text-wrap: balance;
}
.phase-quote__attribution {
  font-family: var(--font-sans);
  font-size: 13px; letter-spacing: 0.04em;
  color: var(--fg-2);
}

/* ===============================================================
   9. CTA with soccer image background
   =============================================================== */
.phase-cta-photo {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: clamp(80px, 10vw, 140px) 0;
  isolation: isolate;
}
.phase-cta-photo__bg {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover;
  background-position: center;
}
.phase-cta-photo::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(110deg, rgba(0,29,57,0.92) 0%, rgba(0,29,57,0.82) 45%, rgba(0,29,57,0.45) 100%);
}
.phase-cta-photo__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 900px) {
  .phase-cta-photo__grid { grid-template-columns: 1fr; gap: 28px; }
}
.phase-cta-photo__title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  margin: 0;
  color: #fff;
  text-wrap: balance;
}
.phase-cta-photo__title em { font-style: italic; color: var(--ba-mint-light); }
.phase-cta-photo__actions {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
}


/* ===============================================================
   SUBJECT GRID — card chips (replaces list view)
   =============================================================== */
.subject-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 720px) {
  .subject-grid { grid-template-columns: 1fr; }
}
.subject-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(0,29,57,0.10);
  border-radius: 14px;
  padding: 18px 20px 20px;
  transition: border-color 200ms, transform 200ms, box-shadow 200ms;
}
.subject-card:hover {
  border-color: var(--phase);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,29,57,0.06);
}
.subject-card__name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.3;
  color: var(--ba-navy);
  margin: 0 0 4px;
}
.subject-card__aside {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--fg-2);
  margin: 0;
  line-height: 1.4;
}
.subject-card__badge {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--phase-dark);
  font-weight: 500;
  padding: 3px 8px;
  border: 1px solid rgba(12,74,110,0.25);
  border-radius: 999px;
}

/* ===============================================================
   NEED-TO-KNOW — definition layout (dl/dt/dd), 2-col magazine
   =============================================================== */
.ntk-def {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 64px;
  border-top: 1px solid rgba(0,29,57,0.14);
}
@media (max-width: 820px) {
  .ntk-def { grid-template-columns: 1fr; gap: 0; }
}
.ntk-def__row {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) 2fr;
  gap: 24px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid rgba(0,29,57,0.14);
}
@media (max-width: 520px) {
  .ntk-def__row { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
}
.ntk-def dt {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--phase-dark);
  font-weight: 500;
  padding-top: 2px;
}
.ntk-def dd {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.4;
  color: var(--ba-navy);
}
.ntk-def dd em {
  font-style: italic;
  color: var(--phase-dark);
}
/* Stacked multi-value rows — list items above each other instead of using
   middot separators (Hours, Transport, etc.) */
.ntk-def dd .ntk-lines { display: flex; flex-direction: column; gap: 5px; }
/* High School: definition values in navy sans, no red italics */
.phase-root--highschool .ntk-def dd { font-family: var(--font-sans); color: var(--ba-navy); }
.phase-root--highschool .ntk-def dd em { font-style: normal; color: var(--ba-navy); }
/* Preschool: match High School need-to-know — navy sans values, no teal italics */
.phase-root--preschool .ntk-def dd { font-family: var(--font-sans); color: var(--ba-navy); }
.phase-root--preschool .ntk-def dd em { font-style: normal; color: var(--ba-navy); }


/* ===============================================================
   SUBJECT SCHEDULE — walkabout-schedule-inspired list
   Serif italic group label · serif name + italic aside · sans grade pill
   Cream tint context, navy text.
   =============================================================== */
.subject-schedule { list-style: none; padding: 0; margin: 0; }
.subject-schedule li {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 24px; align-items: center;
  padding: 20px 0;
  border-top: 1px solid rgba(0,29,57,0.14);
}
.subject-schedule li:last-child { border-bottom: 1px solid rgba(0,29,57,0.14); }
.subject-schedule__group {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 21px;
  color: var(--phase-dark);
  line-height: 1.2;
}
.subject-schedule__meta strong {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 18px;
  display: block;
  margin-bottom: 2px;
  color: var(--ba-navy);
  line-height: 1.3;
}
.subject-schedule__meta span {
  display: block;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 13px;
  color: var(--fg-2);
}
.subject-schedule__grade {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--phase-dark);
  font-weight: 500;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .subject-schedule li { grid-template-columns: 100px 1fr auto; gap: 14px; padding: 16px 0; }
  .subject-schedule__group { font-size: 16px; }
  .subject-schedule__meta strong { font-size: 16px; }
}

/* Hide the old subject-grid if it lingers */
.subject-grid { display: none; }

/* ===============================================================
   DAY RHYTHM — mobile swipe affordance (prev/next + dots)
   The strip is a 7-col grid on desktop (everything visible) and a
   horizontal snap-scroller on mobile; this nav only shows on mobile.
   It lives on the dark navy "A day in the life" band.
   =============================================================== */
.day-rhythm-nav {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 18px;
}
@media (max-width: 900px) {
  .day-rhythm-nav { display: flex; }
}
.day-rhythm-nav__arrow {
  flex: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.30);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  cursor: pointer;
  transition: background 160ms, border-color 160ms, opacity 160ms;
  -webkit-tap-highlight-color: transparent;
}
.day-rhythm-nav__arrow svg { width: 20px; height: 20px; }
.day-rhythm-nav__arrow:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.5); }
.day-rhythm-nav__arrow:disabled { opacity: 0.3; cursor: default; }
.day-rhythm-nav__dots {
  display: flex;
  align-items: center;
  gap: 10px;
}
.day-rhythm-nav__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.30);
  cursor: pointer;
  transition: background 200ms, transform 200ms, width 200ms;
  -webkit-tap-highlight-color: transparent;
}
.day-rhythm-nav__dot.is-active {
  width: 22px;
  border-radius: 999px;
  background: var(--phase, var(--ba-teal-bright));
}