/* Pacific Primary — main stylesheet
   Warm, calm, editorial-but-playful: Fraunces serif headings, white paper,
   cream panels, soft pastel pills, hand-drawn sun & squiggle accents. */

:root {
  --ink: #233a5c;          /* deep warm blue: headings, body emphasis */
  --ink-soft: #51607a;     /* secondary text */
  --orange: #e8762c;       /* hero display, warm accent */
  --orange-deep: #c95f1b;
  --sun: #f6c344;          /* button yellow */
  --sun-deep: #eab120;
  --sun-soft: #fdf3d9;
  --sun-text: #8a6512;     /* readable amber text on soft yellow */
  --orange-soft: #fbe8d6;
  --teal: #2e9e97;
  --teal-deep: #23807a;
  --leaf: #5f9e4a;
  --leaf-soft: #ecf5e8;
  --berry: #d9574a;
  --berry-soft: #fdeeec;
  --blue-soft: #eaf2fb;
  --blue-mid: #3b6db4;
  --cream: #fdf8ee;
  --paper: #ffffff;
  --line: #efe6d6;
  --line-soft: #f5efe3;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-soft: 0 6px 24px rgba(60, 50, 20, 0.07);
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Nunito', 'Avenir Next', sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--paper);
}

img {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 560;
  line-height: 1.18;
  color: var(--ink);
  margin: 0 0 0.5em;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--teal-deep);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2.5px;
}

a:hover {
  color: var(--orange-deep);
}

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 0.6rem 1rem;
  z-index: 100;
  border-radius: 0 0 8px 0;
}

.skip-link:focus {
  left: 0;
}

.icon {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
}

.squiggle {
  display: block;
  width: 64px;
  height: 11px;
  color: var(--teal);
  margin: 0.35rem 0 0;
}

.sun-face {
  width: 56px;
  height: 56px;
  color: var(--sun-deep);
}

/* ---------- Buttons & pills ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1rem;
  padding: 0.72rem 1.5rem;
  border-radius: 12px;
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(60, 50, 20, 0.14);
}

.btn-sun {
  background: var(--sun);
  color: var(--ink);
}

.btn-sun:hover {
  background: var(--sun-deep);
  color: var(--ink);
}

.btn-outline {
  background: var(--paper);
  border-color: var(--teal);
  color: var(--teal-deep);
}

.btn-outline:hover {
  border-color: var(--teal-deep);
  background: #f3faf9;
  color: var(--teal-deep);
}

.btn-sm {
  padding: 0.55rem 1.1rem;
  font-size: 0.95rem;
}

.btn-lg {
  font-size: 1.06rem;
  padding: 0.85rem 1.8rem;
}

.btn .icon {
  width: 1.05em;
  height: 1.05em;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 0.5rem 1.05rem;
  border-radius: 12px;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.pill:hover {
  filter: brightness(0.96) saturate(1.15);
  transform: translateY(-1px);
}

.pill-orange,
.pill-orange:hover {
  background: var(--orange-soft);
  color: var(--orange-deep);
}

.pill-blue,
.pill-blue:hover {
  background: var(--blue-soft);
  color: var(--blue-mid);
}

.pill-green,
.pill-green:hover {
  background: var(--leaf-soft);
  color: var(--leaf);
}

.pill-yellow,
.pill-yellow:hover {
  background: var(--sun-soft);
  color: var(--sun-text);
}

.pill-berry,
.pill-berry:hover {
  background: var(--berry-soft);
  color: var(--berry);
}

/* ---------- Header ---------- */

.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: 0;
  padding: 0.45rem 0.2rem;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
}

.menu-toggle:hover {
  color: var(--orange-deep);
}

.menu-bars {
  display: inline-flex;
  flex-direction: column;
  gap: 4.5px;
}

.menu-bars span {
  display: block;
  width: 22px;
  height: 2.6px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-toggle[aria-expanded='true'] .menu-bars span:nth-child(1) {
  transform: translateY(7.1px) rotate(45deg);
}

.menu-toggle[aria-expanded='true'] .menu-bars span:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded='true'] .menu-bars span:nth-child(3) {
  transform: translateY(-7.1px) rotate(-45deg);
}

.site-logo {
  margin-right: auto;
  display: flex;
}

.site-logo img {
  /* Target 320–350px (never below the 320×58 floor on normal screens). When the
     header gets tight the pills shed their icons (below) to keep this size. The
     viewport-relative max-width is a last-resort guard so the logo can never
     push the hamburger off-screen on a very narrow phone. */
  width: clamp(320px, 30vw, 350px);
  height: auto;
  /* Reserve room on both sides so the centred logo clears the menu button. */
  max-width: calc(100vw - 74px);
}

/* Below this width a 320px logo + five icon-and-label pills + the menu button no
   longer fit, so the header pills drop their icons to free space for the logo. */
@media (max-width: 1180px) {
  .header-actions .pill .icon {
    display: none;
  }

  .header-actions .pill {
    padding: 0.5rem 0.85rem;
  }
}

.header-actions {
  display: flex;
  gap: 0.55rem;
}

.menu-actions {
  display: none;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-top: 0.9rem;
  padding-bottom: 1rem;
}

/* Inside the cramped drawer the action pills drop their icons so the label can
   match the menu links' size (1rem) and still pack onto two rows (the three
   shortest on top, ParentSquare + Calendar below). The header pills keep icons. */
.menu-actions .pill {
  padding: 0.42rem 0.7rem;
  font-size: 1rem;
}

.menu-actions .pill .icon {
  display: none;
}

@media (max-width: 880px) {
  /* The logo is centred on screen; the menu button floats at the right edge
     (positioned absolutely below), so it doesn't shift the logo off-centre. */
  .header-inner {
    position: relative;
    gap: 0.5rem;
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }

  .site-logo {
    margin: 0 auto;
    flex: 0 1 auto;
    min-width: 0;
  }

  .site-logo img {
    width: 320px; /* capped by the base max-width on narrow phones */
    min-width: 0;
  }

  .menu-toggle {
    flex: none;
  }

  .menu-label {
    display: none;
  }

  .header-actions {
    display: none;
  }

  .menu-actions {
    display: flex;
  }
}

/* ---------- Drawer menu ---------- */

.site-menu {
  border-top: 1px solid var(--line-soft);
  background: var(--cream);
  box-shadow: 0 18px 30px rgba(60, 50, 20, 0.1);
}

/* Backdrop behind the mobile drawer; only shown on small screens (see below). */
.menu-scrim {
  display: none;
}

.site-menu[hidden] {
  display: none;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.8rem 2rem;
  padding-top: 2rem;
  padding-bottom: 2.2rem;
  animation: menu-in 0.22s ease both;
}

@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* On small screens the menu becomes an off-canvas drawer: a fixed, single
   scrollable column that slides in over a scrim, leaving the page in place. */
@media (max-width: 880px) {
  .menu-toggle {
    position: absolute;
    right: 0.3rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 70; /* stay above the open drawer so the close button is tappable */
  }

  .site-menu {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(86vw, 360px);
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    z-index: 60;
    border-top: 0;
    /* The pills/top section is white; the menu section below is cream (set on
       .menu-grid). The colour change replaces the old divider line. */
    background: var(--paper);
    box-shadow: -10px 0 34px rgba(60, 50, 20, 0.22);
    padding-top: 1rem; /* pills sit up near the close button, not far below it */
    animation: drawer-in 0.24s ease both;
  }

  .menu-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding-top: 1.5rem;
    padding-bottom: 1.6rem;
    background: var(--cream);
  }

  body.menu-open {
    overflow: hidden; /* lock the page behind the drawer */
  }

  body.menu-open .menu-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 40; /* below the header (z 50) so the logo + close button show through */
    background: rgba(40, 30, 10, 0.45);
    animation: scrim-in 0.2s ease both;
  }
}

@keyframes drawer-in {
  from {
    transform: translateX(100%);
  }

  to {
    transform: none;
  }
}

@keyframes scrim-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.menu-group h2 {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-deep);
  margin-bottom: 0.6rem;
}

.menu-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}

.menu-group a {
  display: inline-block;
  padding: 0.18rem 0;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  text-decoration: none;
}

.menu-group a:hover,
.menu-group a[aria-current='page'] {
  color: var(--teal-deep);
}

.menu-group .ext {
  font-size: 0.7em;
  margin-left: 0.25rem;
  opacity: 0.6;
}

/* ---------- Kickers & section scaffolding ---------- */

.kicker {
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: 0.4rem;
}

.kicker .squiggle {
  width: 56px;
}

.section {
  padding: 3.4rem 0;
}

/* The first section right after a page hero hugs closer to the lede, so the
   intro paragraph doesn't float far below the hero. Applies to every page that
   uses the pageHero + section template. */
.page-hero + .section {
  padding-top: 0.6rem;
}

.section-head {
  max-width: 720px;
  margin-bottom: 2rem;
}

.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-head.center .squiggle {
  margin-left: auto;
  margin-right: auto;
}

.section-head h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.section-head p {
  font-size: 1.1rem;
}

/* ---------- Hero ---------- */

.hero {
  padding: 2.2rem 0 1.2rem;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.4rem;
  align-items: stretch;
}

.hero-photo {
  position: relative;
}

.hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.hero-carousel img {
  opacity: 0;
  transition: opacity 0.9s ease;
}

.hero-carousel img.is-active {
  opacity: 1;
}

.hero h1 {
  font-size: clamp(2.3rem, 4.6vw, 3.3rem);
  font-weight: 640;
  color: var(--orange);
  margin-bottom: 0.35em;
}

.hero-sub {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: clamp(1.3rem, 2.3vw, 1.7rem);
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 0.8em;
}

.hero-body {
  max-width: 32em;
  margin-bottom: 1.6rem;
}

.hero-ctas {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
}

@media (max-width: 880px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  /* Give the photo a reliable 4:3-ish box using the percentage-padding
     technique (supported everywhere, no aspect-ratio dependency). The
     images stay absolutely positioned so they can never blow out the
     page width or push the copy off-screen. */
  .hero-photo {
    height: 0;
    padding-bottom: 70%;
  }
}

/* ---------- Value cards ---------- */

.value-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  padding: 0.8rem 0 0;
}

/* Reduced top padding for sections that follow a tight preceding block. */
.section.section-pt-sm {
  padding-top: 1.5rem;
}

/* .value-card shares its styling with .quick-card (see the quick-links section). */

.tint-sun { color: var(--sun-deep); }
.tint-orange { color: var(--orange); }
.tint-teal { color: var(--teal); }
.tint-blue { color: var(--blue-mid); }
.tint-leaf { color: var(--leaf); }
.tint-berry { color: var(--berry); }

/* ---------- Cream panel (about) ---------- */

.panel {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 4vw, 3.2rem);
}

.panel-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 2.6rem;
  align-items: stretch;
}

.panel h2 {
  font-size: clamp(1.55rem, 2.8vw, 2.15rem);
  max-width: 15em;
}

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  color: var(--blue-mid);
  text-decoration: none;
}

.arrow-link .icon {
  transition: transform 0.18s ease;
}

.arrow-link:hover {
  color: var(--teal-deep);
}

.arrow-link:hover .icon {
  transform: translateX(4px);
}

.collage-wrap {
  position: relative;
}

.collage {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0.9rem;
}

.collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}

.collage img:first-child {
  grid-row: 1 / 3;
}

@media (max-width: 880px) {
  .panel-grid {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  .collage-wrap {
    position: static;
  }

  .collage {
    position: static;
    height: auto;
    min-height: 280px;
  }
}

/* ---------- Quick-link cards ---------- */

.quick-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

/* The home "values" cards and "quick-link" cards share one look. The quick
   cards are whole-card links (<a>) so the hover-lift signals clickability; the
   value cards (<div>) reuse the same styling for visual consistency. */
.quick-card,
.value-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.3rem 1.1rem;
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.quick-card:hover,
.value-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
}

.quick-card .icon,
.value-card .icon {
  width: 1.7rem;
  height: 1.7rem;
}

.quick-card h3,
.value-card h3 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--ink);
  margin: 0.25rem 0 0;
}

.quick-card p,
.value-card p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.quick-card .card-arrow {
  margin-top: auto;
  align-self: flex-end;
  color: var(--ink-soft);
  transition: transform 0.16s ease, color 0.16s ease;
}

.quick-card:hover .card-arrow {
  transform: translateX(3px);
  color: var(--orange-deep);
}

/* ---------- Instagram module ---------- */

.ig-section {
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
}

.ig-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}

.ig-handle {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-display);
  font-weight: 560;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  color: var(--ink);
  text-decoration: none;
}

.ig-handle .icon {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--berry);
}

.ig-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.85rem;
}

.ig-post {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--cream);
}

.ig-post img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.ig-post:hover img {
  transform: scale(1.05);
}

.ig-post .ig-caption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 0.7rem;
  font-size: 0.82rem;
  line-height: 1.35;
  color: #fff;
  background: linear-gradient(transparent 35%, rgba(25, 30, 40, 0.85));
  opacity: 0;
  transition: opacity 0.2s ease;
}

.ig-post:hover .ig-caption,
.ig-post:focus .ig-caption {
  opacity: 1;
}

.ig-caption span {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ig-badge {
  position: absolute;
  left: 0.6rem;
  bottom: 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: rgba(25, 30, 40, 0.72);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
}

.ig-badge .icon {
  width: 0.7rem;
  height: 0.7rem;
}

.ig-note {
  margin-top: 0.8rem;
  font-size: 0.88rem;
}

@media (max-width: 980px) {
  .ig-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Feature trio (alumni / careers / give) ---------- */

.feature-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.1rem;
}

.feature-card {
  display: flex;
  gap: 1.1rem;
  align-items: center;
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--line);
  background: var(--paper);
}

.feature-card.bg-cream {
  background: var(--cream);
  border-color: transparent;
}

.feature-card.bg-blue {
  background: var(--blue-soft);
  border-color: transparent;
}

.feature-card img {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 3px solid #fff;
  box-shadow: var(--shadow-soft);
}

.feature-card h3 {
  font-size: 1.35rem;
  margin-bottom: 0.2em;
}

.feature-card p {
  margin: 0 0 0.5em;
  font-size: 0.93rem;
}

/* ---------- Page hero (interior pages) ---------- */

.page-hero {
  background: var(--cream);
  padding: 2.8rem 0 2rem;
}

.page-hero h1 {
  font-size: clamp(1.9rem, 3.8vw, 2.7rem);
  font-weight: 640;
  margin-bottom: 0.3em;
}

.page-hero .lede {
  font-size: 1.18rem;
  max-width: 46em;
  margin-bottom: 0;
}

/* ---------- Prose ---------- */

.prose {
  max-width: 760px;
}

.prose h2 {
  font-size: 1.65rem;
  margin-top: 1.8em;
  scroll-margin-top: 6rem;
}

.prose h3 {
  font-size: 1.25rem;
  margin-top: 1.5em;
  scroll-margin-top: 6rem;
}

/* A heading (or anything) that leads a prose block shouldn't add its own top
   margin on top of the section's padding — keeps section headings like
   "Summer Program" from floating far below the section top. */
.prose > :first-child {
  margin-top: 0;
}

.prose ul {
  padding-left: 1.3rem;
}

.prose li {
  margin-bottom: 0.4em;
}

.prose blockquote {
  border-left: 4px solid var(--sun);
  margin: 1.5em 0;
  padding: 0.4em 0 0.4em 1.2em;
  font-style: italic;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.8em 0;
  background: var(--paper);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 0.95rem;
}

.prose th,
.prose td {
  text-align: left;
  vertical-align: top;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
}

.prose thead th {
  background: var(--cream);
  font-weight: 800;
  font-family: var(--font-body);
  color: var(--ink);
}

/* Roadmap year labels: a Fraunces sub-heading with a sun underline, to break
   each table cell into clear year-by-year sections (see Strategic Plan). */
.prose .roadmap-year {
  display: block;
  margin: 1.6rem 0 0.7rem;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--sun);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.3;
  color: var(--ink);
}

.prose td > .roadmap-year:first-child {
  margin-top: 0;
}

/* Roadmap tactic lists sit snug under each year's Focus line; the next year
   label's own top margin provides the separation below. */
.prose td ul {
  margin: 0.45em 0 0;
}

/* Success indicators read as a checklist of things still to achieve: each item
   gets an empty checkbox drawn with a pseudo-element. */
.prose .indicator {
  display: block;
  position: relative;
  padding-left: 2em;
  margin: 0.55em 0;
}

.prose .indicator::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1.2em;
  height: 1.2em;
  border: 2px solid var(--teal);
  border-radius: 6px;
  background: var(--paper);
}

figure.inline-photo {
  margin: 2rem 0;
}

figure.inline-photo img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

figure.inline-photo figcaption {
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

/* ---------- Media rows, cards, photo grids ---------- */

.media-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.media-row + .media-row {
  margin-top: 3.2rem;
}

.media-row img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

/* A small two-photo gallery, stacked vertically, in a media row's image column. */
.img-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
}

.media-row.reverse .media-row-img {
  order: 2;
}

@media (max-width: 880px) {
  .media-row,
  .media-row.reverse {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }

  .media-row.reverse .media-row-img {
    order: 0;
  }
}

.section-alt {
  background: var(--cream);
}

/* GENERAL RULE: the last section of every page renders white so it always
   contrasts with the cream footer, overriding a tinted .section-alt /
   .section-sand / .cta-band when it happens to land at the bottom. New pages
   and appended sections get this automatically — no per-page class needed. */
main > section:last-child {
  background: var(--paper);
}

/* White breathing room above a tinted section so its background doesn't
   run right up to the cards above it, with a tighter top padding so the
   heading sits closer to the top of the tinted band. */
.section-gap-top {
  margin-top: 2.6rem;
  padding-top: 1.7rem;
}

.section-sand {
  background: var(--sun-soft);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.3rem;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink-soft);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

a.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}

.card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.card-body {
  padding: 1.2rem 1.3rem 1.4rem;
}

.card-body h3 {
  font-size: 1.25rem;
  margin-bottom: 0.35em;
}

.card-body p {
  margin: 0;
  font-size: 0.96rem;
}

.card-more {
  display: inline-block;
  margin-top: 0.7rem;
  font-weight: 800;
  font-size: 0.93rem;
  color: var(--blue-mid);
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

.photo-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}

/* ---------- Teachers & Staff ---------- */

.staff-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.staff-card .card-body {
  padding: 1rem 1.1rem 1.2rem;
}

.staff-card .card-body h3 {
  font-size: 1.15rem;
  margin-bottom: 0.2em;
}

.staff-names {
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.staff-pending {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background: var(--sun-soft);
  color: var(--ink-soft);
  text-align: center;
  font-weight: 700;
  font-size: 0.92rem;
}

.staff-pending-sun {
  font-size: 1.8rem;
}

/* ---------- Board of Directors ---------- */

.board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 0.9rem;
}

.board-member {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.95rem 1.1rem;
}

.board-member.is-officer {
  border-color: var(--sun);
  background: var(--sun-soft);
}

.board-member strong {
  display: block;
  color: var(--ink);
  font-size: 1.04rem;
}

.board-role {
  display: block;
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 700;
}

.board-status {
  display: block;
  color: var(--ink-soft);
  opacity: 0.72;
  font-size: 0.82rem;
}

.president-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 40em;
}

.president-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}

.pres-year {
  font-weight: 800;
  color: var(--orange);
  min-width: 5.5em;
}

.pres-name {
  color: var(--ink);
  font-weight: 700;
}

.pres-role {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.poster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.4rem;
}

.poster-grid figure {
  margin: 0;
}

.poster-grid img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--line);
  display: block;
}

.poster-grid figcaption {
  margin-top: 0.55rem;
  text-align: center;
  font-weight: 800;
  color: var(--ink);
}

/* ---------- Stats band (program page) ---------- */

.stats-band {
  background: var(--sun-soft);
  padding: 2.4rem 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem;
  text-align: center;
}

.stat .stat-number {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: clamp(1.9rem, 3.4vw, 2.5rem);
  font-family: var(--font-display);
  font-weight: 640;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  line-height: 1.05;
  color: var(--ink);
}

/* The full-day hours are a longer value; keep them on one line at a smaller
   size. The shared min-height above bottom-aligns every number so the labels
   beneath them line up across the row. */
.stat .stat-number.stat-number-time {
  font-size: clamp(1.1rem, 2.3vw, 1.5rem);
  white-space: nowrap;
}

.stat .stat-label {
  font-weight: 700;
  font-size: 0.93rem;
  color: var(--ink-soft);
}

/* ---------- Steps ---------- */

.steps {
  counter-reset: step;
  display: grid;
  gap: 1.2rem;
  padding: 0;
  margin: 2rem 0;
  list-style: none;
}

.steps li {
  counter-increment: step;
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem 1.4rem 4.6rem;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 1.3rem;
  top: 1.35rem;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: var(--sun);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 640;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.steps h3 {
  margin-bottom: 0.3em;
  font-size: 1.25rem;
}

.steps p {
  margin-bottom: 0.4em;
}

/* ---------- Accordion ---------- */

.accordion {
  max-width: 820px;
}

.accordion details {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 0.8rem;
  overflow: hidden;
}

.accordion summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.3rem;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--ink);
}

.accordion summary::-webkit-details-marker {
  display: none;
}

.accordion summary::after {
  content: '+';
  flex-shrink: 0;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--orange);
  transition: transform 0.2s ease;
}

.accordion details[open] summary::after {
  transform: rotate(45deg);
}

.accordion details > div {
  padding: 0 1.3rem 1.2rem;
}

.accordion .faq-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 0.8rem;
  padding: 1.1rem 1.3rem 1.2rem;
}

.accordion .faq-item h3 {
  margin: 0 0 0.45rem;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--ink);
}

.accordion .faq-item > div > :last-child {
  margin-bottom: 0;
}

.video-embed {
  max-width: 920px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.video-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.data.schedule th[scope='row'] {
  white-space: nowrap;
  width: 1%;
  color: var(--orange-deep);
}

.testimonial {
  margin: 0;
}

.testimonial blockquote {
  margin: 0 0 0.8rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--ink);
}

.testimonial figcaption {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

/* ---------- Tables ---------- */

.table-wrap {
  overflow-x: auto;
  margin: 1.5rem 0;
}

table.data {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 0.98rem;
}

table.data th,
table.data td {
  text-align: left;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--line);
}

table.data th {
  background: var(--cream);
  font-weight: 800;
  font-family: var(--font-body);
  color: var(--ink);
}

table.data tr:last-child td {
  border-bottom: 0;
}

/* Stacked label/number tables (e.g. the Diversity & Values "by the numbers"
   tables): a fixed number column so the label/value split lines up identically
   across every table, regardless of each table's label lengths. */
table.data-figures {
  table-layout: fixed;
  max-width: 26rem;
}

table.data-figures td {
  width: 5rem;
  text-align: center;
}

.fineprint {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: -0.6rem;
}

/* ---------- Document lists ---------- */

.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.9rem;
  padding: 0;
  margin: 1.5rem 0;
  list-style: none;
}

.doc-grid a {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  text-decoration: none;
  font-weight: 800;
  color: var(--ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.doc-grid a:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
  color: var(--orange-deep);
}

.doc-grid .doc-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--cream);
  color: var(--orange-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 800;
}

.doc-grid .doc-sub,
.doc-sub {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-soft);
}

/* ---------- Newsletter archive ---------- */

.nl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1.6rem 1.3rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.nl-card {
  display: block;
  text-decoration: none;
  text-align: center;
}

.nl-thumb {
  display: block;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 3px 12px rgba(60, 50, 20, 0.1);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.nl-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 480 / 621;
  object-fit: cover;
  object-position: top center;
}

.nl-card:hover .nl-thumb {
  transform: translateY(-5px) rotate(-0.6deg);
  box-shadow: var(--shadow-soft);
}

.nl-year {
  display: inline-block;
  margin-top: 0.65rem;
  font-family: var(--font-display);
  font-weight: 640;
  font-size: 1.1rem;
  color: var(--ink);
}

.nl-card:hover .nl-year {
  color: var(--orange-deep);
}

/* ---------- In the News ---------- */

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.9rem 1.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.news-card {
  display: block;
  text-decoration: none;
}

.news-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--cream);
  box-shadow: 0 3px 12px rgba(60, 50, 20, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-wordmark {
  padding: 1.2rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.15;
  text-align: center;
  color: var(--ink);
}

.news-card:hover .news-thumb {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}

.news-info {
  display: block;
  margin-top: 0.85rem;
}

.news-pub {
  display: block;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: 0.25rem;
}

.news-headline {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.08rem;
  line-height: 1.3;
  color: var(--ink);
}

.news-card:hover .news-headline {
  color: var(--orange-deep);
}

.news-date {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* ---------- Callout ---------- */

.callout {
  background: var(--cream);
  border-left: 5px solid var(--sun);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.3rem 1.6rem;
  margin: 2rem 0;
}

.callout.green {
  border-left-color: var(--leaf);
}

.callout h3 {
  margin-top: 0;
}

.callout :last-child {
  margin-bottom: 0;
}

/* ---------- CTA band (interior pages) ---------- */

.cta-band {
  background: var(--cream);
  padding: 3.4rem 0;
  text-align: center;
}

.cta-band h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  max-width: 22em;
  margin: 0 auto 0.6em;
}

.cta-band p {
  max-width: 38em;
  margin: 0 auto 1em;
}

.cta-band .btn {
  margin-top: 0.6rem;
}

/* ---------- Calendar ---------- */

.cal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}

.cal-nav {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.cal-nav button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 1.1rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.cal-nav button:hover {
  border-color: var(--teal);
  background: var(--cream);
}

.cal-title {
  font-family: var(--font-display);
  font-weight: 640;
  font-size: 1.5rem;
  color: var(--ink);
  min-width: 12rem;
  text-align: center;
}

.cal-export {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.calendar-month {
  margin-bottom: 2.5rem;
}

body.js .calendar-month {
  display: none;
  margin-bottom: 0;
}

body.js .calendar-month.is-active {
  display: block;
}

.calendar-month > h3 {
  font-size: 1.3rem;
}

body.js .calendar-month > h3 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.cal-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.cal-grid th {
  padding: 0.55rem 0.4rem;
  background: var(--cream);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}

.cal-grid td {
  vertical-align: top;
  height: 92px;
  padding: 0.35rem 0.4rem;
  border: 1px solid var(--line-soft);
  font-size: 0.85rem;
}

.cal-grid td.is-empty {
  background: #fcfaf5;
}

.cal-day-num {
  display: block;
  font-weight: 800;
  color: var(--ink-soft);
  margin-bottom: 0.25rem;
}

td.has-event .cal-day-num {
  color: var(--ink);
}

.cal-event {
  display: block;
  margin-bottom: 0.25rem;
  padding: 0.22rem 0.5rem;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.25;
}

.cal-admissions { background: var(--blue-soft); color: var(--blue-mid); }
.cal-celebration { background: #fcebdd; color: var(--orange-deep); }
.cal-giving { background: var(--leaf-soft); color: var(--leaf); }
.cal-program { background: #e7f4f3; color: var(--teal-deep); }
.cal-closure { background: var(--berry-soft); color: var(--berry); }

.cal-grid td.is-closed {
  background: #fdf1ef;
}

.cal-legend {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  font-weight: 700;
}

.cal-legend .cal-event {
  display: inline-block;
  margin: 0;
}

@media (max-width: 720px) {
  .cal-grid td {
    height: auto;
    min-height: 52px;
  }

  .cal-event {
    font-size: 0.65rem;
    padding: 0.16rem 0.3rem;
  }
}

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

@media (max-width: 880px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

.contact-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.8rem;
  margin-bottom: 1.2rem;
}

.contact-card h3 {
  margin-top: 0;
}

.map-embed {
  width: 100%;
  height: 380px;
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.streetview {
  margin: 0;
}

.streetview-embed {
  width: 100%;
  height: 440px;
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  display: block;
}

.streetview figcaption {
  margin-top: 0.85rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.streetview-attr {
  opacity: 0.65;
  font-size: 0.85rem;
}

/* ---------- Forms ---------- */

.signup-form {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.signup-form input[type='email'] {
  flex: 1 1 170px;
  padding: 0.6rem 0.95rem;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--ink);
}

.signup-form input[type='email']:focus {
  outline: 2px solid var(--sun);
  border-color: var(--sun);
}

/* ---------- Footer ---------- */

.site-footer {
  margin-top: 3rem;
  background: var(--cream);
  border-top: 1px solid var(--line);
}

.footer-sun {
  display: flex;
  justify-content: center;
  margin-top: -28px;
}

.footer-sun .sun-face {
  background: var(--paper);
  border-radius: 50%;
  padding: 6px;
  width: 56px;
  height: 56px;
}

.footer-tagline {
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink);
  margin: 0.5rem 1.25rem 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr 0.8fr;
  gap: 2.2rem;
  padding-top: 1.6rem;
  padding-bottom: 2.4rem;
}

.site-footer h2 {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.footer-school-name {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.footer-school-name.is-yellow .icon {
  color: var(--sun-deep);
}

.footer-school-name.is-orange .icon {
  color: var(--orange);
}

.site-footer p {
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
}

.footer-social {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.footer-social a:hover {
  color: var(--orange-deep);
  border-color: var(--orange);
}

.footer-social .icon {
  width: 1.2rem;
  height: 1.2rem;
}

.footer-bottom {
  border-top: 1px solid var(--line);
  padding: 1rem 0;
  font-size: 0.85rem;
}

.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-bottom nav {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
}

.footer-bottom a {
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 700;
}

.footer-bottom a:hover {
  color: var(--orange-deep);
}

.footer-bottom p {
  margin: 0;
}

@media (max-width: 880px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
}

/* ---------- Misc ---------- */

.center {
  text-align: center;
}

.mt-1 {
  margin-top: 1rem;
}

.mt-2 {
  margin-top: 2rem;
}

/* A subsection heading set a little further below the one above it. */
.subsection {
  margin-top: 2.2rem;
}

.lead {
  font-size: 1.16rem;
}

/* A constrained reading column, wider than the default .prose measure. */
.prose-wide {
  max-width: 48em;
}

/* A centered, constrained callout (e.g. the tuition / staff intro callouts). */
.callout-centered {
  max-width: 48em;
  margin-inline: auto;
  text-align: center;
}

.callout-lead {
  font-size: 1.12rem;
  margin: 0;
}

/* Calendar fine print under the legend. */
.cal-note {
  font-size: 0.92rem;
}

/* Action buttons sitting beneath a page-hero lede (e.g. Support). */
.page-hero .hero-ctas {
  margin-top: 1.4rem;
}

.text-sun {
  color: var(--sun);
}

.text-orange {
  color: var(--orange);
}

.text-berry {
  color: var(--berry);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}