/*
 * Port-specific CSS overrides.
 * Classes here carry `!important` declarations moved out of inline
 * styles during the Django template -> JSX conversion (JSX inline
 * `style` objects cannot express `!important`).
 */

/* templates/pages/history_page.html:4, mission_page.html:4, principal_page.html:5 */
.min-vh-70-port {
  min-height: 70vh !important;
}

/* templates/pages/alumni.html:7 */
.min-vh-90-port {
  min-height: 90vh !important;
}

/* Public gallery: timeline, album tiles and lightbox (components/gallery). */
.g-page { --g-navy: #121428; --g-line: rgba(18, 20, 40, 0.14); --g-accent: #c9861a; }

.g-back { display: inline-block; margin-bottom: 12px; color: var(--g-accent); font-weight: 500; }

.g-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.g-chips button {
  background: none; border: 1px solid var(--g-line); border-radius: 4px;
  padding: 4px 12px; font-size: 0.9rem; color: inherit;
}
.g-chips button[aria-pressed="true"] { background: #fbefd8; border-color: var(--g-accent); color: var(--g-navy); }

.g-era { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid var(--g-line); margin-top: 16px; }
.g-era > h3 { font-family: "Josefin Sans", sans-serif; font-weight: 300; font-size: 1.8rem; margin: 0; }
.g-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px 14px; align-items: start; }
/* The album page has the full width, so its photos are larger. */
.g-strip-lg { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (max-width: 575px) {
  .g-era { grid-template-columns: 1fr; }
  .g-strip { grid-template-columns: repeat(2, 1fr); }
}

.g-tile { margin: 0; }
.g-tile figcaption { font-size: 0.8rem; line-height: 1.35; color: #5b5f7a; padding-top: 6px; }
.g-photo { display: block; width: 100%; padding: 0; border: 0; background: #e6e7ee; border-radius: 6px; overflow: hidden; cursor: zoom-in; }
.g-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%; transition: transform 0.3s; }
.g-photo:hover img { transform: scale(1.04); }
.g-photo:focus-visible, .g-album:focus-visible, .g-chips button:focus-visible { outline: 3px solid var(--g-accent); outline-offset: 2px; }

/* auto-fit + a capped width keeps one or two albums centred instead of stranded on the left. */
.g-albums { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 340px)); justify-content: center; gap: 28px 22px; --g-accent: #c9861a; }
/* Home page: the gallery tiles keep to this narrower, centred width, so they
   are not overly wide on a large screen. */
.home-row { margin-left: auto; margin-right: auto; }
@media (min-width: 768px) {
  /* 86% trims the cards on a laptop; 1000px stops them growing on a big monitor. */
  .home-row { max-width: min(1000px, 86%); }
}

/* Home page gallery row: three columns with a 1.5rem gutter. */
.g-albums-home { grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) {
  .g-albums-home { grid-template-columns: repeat(3, 1fr); }
}
.g-album { display: flex; flex-direction: column; gap: 4px; color: inherit; }
.g-album:hover { color: inherit; }
.g-album b { font-family: "Josefin Sans", sans-serif; font-weight: 400; font-size: 1.1rem; color: #121428; margin-top: 8px; }
.g-album small { color: #5b5f7a; }
.g-album-cover { position: relative; display: block; aspect-ratio: 4 / 3; }
.g-album-cover > * {
  position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 6px;
  border: 3px solid #fff; box-shadow: 0 1px 4px rgba(10, 12, 40, 0.25); background: #d9dbe6;
  transition: transform 0.25s;
}
.g-album-cover img { object-fit: cover; }
.g-album-cover-single img { object-position: center 30%; }
.g-album > small:nth-child(2) { margin-top: 8px; }
.g-album-cover span:nth-child(1) { transform: rotate(-4deg) translate(-4px, 2px); }
.g-album-cover span:nth-child(2) { transform: rotate(3deg) translate(5px, 0); }
.g-album:hover .g-album-cover span:nth-child(1) { transform: rotate(-7deg) translate(-9px, 2px); }
.g-album:hover .g-album-cover span:nth-child(2) { transform: rotate(6deg) translate(10px, 0); }

.g-lightbox { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; background: rgba(6, 7, 18, 0.96); color: #fff; }
.g-lightbox-top { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; font-variant-numeric: tabular-nums; }
.g-lightbox-top button, .g-lightbox-nav {
  flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 1.2rem; line-height: 1;
}
.g-lightbox-top button:hover, .g-lightbox-nav:hover { background: rgba(255, 255, 255, 0.28); }
.g-lightbox button:focus-visible { outline: 3px solid #e9a93c; outline-offset: 2px; }
.g-lightbox-stage { flex: 1; min-height: 0; display: flex; align-items: center; gap: 8px; padding: 0 8px; }
.g-lightbox-stage img { flex: 1; min-width: 0; height: 100%; object-fit: contain; }
.g-lightbox-caption { margin: 0; padding: 10px 20px; text-align: center; }
.g-lightbox-thumbs { display: flex; gap: 6px; overflow-x: auto; padding: 4px 16px 14px; justify-content: safe center; }
.g-lightbox-thumbs button { flex: none; padding: 0; border: 0; background: none; opacity: 0.45; border-radius: 3px; overflow: hidden; }
.g-lightbox-thumbs button.is-current { opacity: 1; outline: 2px solid #e9a93c; }
.g-lightbox-thumbs img { display: block; width: 56px; height: 42px; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
  .g-photo img, .g-album-cover > * { transition: none; }
}

#galleryModal .modal-content {
  background-color: rgba(0, 0, 0, 0.9) !important;
}

/* Alumni page: school photo hero and the "keep in touch" links (app/(site)/alumni). */
.al-page { --al-navy: #121428; --al-accent: #e9a93c; --al-line: rgba(18, 20, 40, 0.14); }
.al-page .container { max-width: 1180px; padding-left: 24px; padding-right: 24px; }

.al-hero { position: relative; display: flex; align-items: flex-end; min-height: 72vh; background: var(--al-navy); color: #fff; overflow: hidden; }
.al-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 75%; }
/* Navy wash: solid behind the text on the left, clearing to show the students on the right. */
.al-hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(18, 20, 40, 0.85), rgba(18, 20, 40, 0) 55%),
    linear-gradient(to right, rgba(18, 20, 40, 0.9) 0%, rgba(18, 20, 40, 0.6) 50%, rgba(18, 20, 40, 0.2) 100%);
}
.al-hero-inner { position: relative; z-index: 1; padding-top: 96px; padding-bottom: 64px; }
.al-title { font-family: "Josefin Sans", sans-serif; font-size: clamp(2.3rem, 5.6vw, 4.5rem); line-height: 1.08; max-width: 15ch; margin: 0 0 20px; text-wrap: balance; }
.al-lead { font-size: 1.15rem; line-height: 1.6; max-width: 52ch; margin: 0 0 28px; color: rgba(255, 255, 255, 0.88); }
.al-cta {
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; border-radius: 6px;
  background: var(--al-accent); color: var(--al-navy); font-weight: 500; font-size: 1.05rem; transition: background 0.2s;
}
.al-cta i { font-size: 1.3rem; }
.al-cta:hover { background: #f4bd5c; color: var(--al-navy); }
.al-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.al-connect { padding-top: 56px; padding-bottom: 72px; }
.al-heading { font-family: "Josefin Sans", sans-serif; font-size: 1.8rem; color: var(--al-navy); margin: 0 0 20px; }
.al-channels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; column-gap: 40px; }
@media (min-width: 768px) {
  .al-channels { grid-template-columns: 1fr 1fr; }
}
.al-channel { display: flex; align-items: center; gap: 16px; padding: 18px 8px; border-top: 1px solid var(--al-line); color: var(--al-navy); transition: background 0.2s; }
.al-channel:hover { background: rgba(18, 20, 40, 0.05); color: var(--al-navy); }
.al-channel:focus-visible { outline: 3px solid #c9861a; outline-offset: 2px; }
.al-channel-icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: #fff; font-size: 1.3rem; }
.al-channel-text { flex: 1; display: flex; flex-direction: column; }
.al-channel-text b { font-weight: 500; font-size: 1.1rem; }
.al-channel-text small { color: #5b5f7a; font-size: 0.92rem; }
.al-channel-out { color: #8a8da3; font-size: 0.9rem; }

@media (prefers-reduced-motion: reduce) {
  .al-cta, .al-channel { transition: none; }
}
/* On a phone the text spans the full width, so the wash has to be even across it. */
@media (max-width: 767px) {
  .al-hero::after { background: linear-gradient(to top, rgba(18, 20, 40, 0.92) 0%, rgba(18, 20, 40, 0.75) 60%, rgba(18, 20, 40, 0.3) 100%); }
}

/* Site footer (components/Footer.tsx): school name and motto, page links, contact details. */
.ft { --ft-accent: #e9a93c; --ft-line: rgba(255, 255, 255, 0.14); --ft-soft: rgba(255, 255, 255, 0.72); color: #fff; }
.ft-inner { max-width: 1180px; margin: 0 auto; padding: 64px 24px 0; }
.ft-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr; gap: 48px 56px; padding-bottom: 56px; }
.ft a { color: inherit; transition: color 0.2s; }
.ft a:hover { color: var(--ft-accent); }
.ft a:focus-visible { outline: 2px solid var(--ft-accent); outline-offset: 3px; border-radius: 2px; }

.ft-school { display: inline-flex; align-items: center; gap: 14px; font-family: "Josefin Sans", sans-serif; font-size: 1.25rem; line-height: 1.2; }
.ft-school img { border-radius: 50%; flex: none; }
.ft-school small { display: block; margin-top: 4px; font-family: Roboto, sans-serif; font-size: 0.85rem; color: var(--ft-soft); }
.ft-about { max-width: 34ch; margin: 24px 0 24px; color: var(--ft-soft); font-size: 0.95rem; line-height: 1.6; }

.ft-social, .ft-links, .ft-contact { list-style: none; margin: 0; padding: 0; }
.ft-social { display: flex; gap: 10px; }
.ft-social a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--ft-line); border-radius: 50%; font-size: 1rem; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.ft-social a:hover { background: var(--ft-accent); border-color: var(--ft-accent); color: #121428; }

.ft-heading { font-family: "Josefin Sans", sans-serif; font-size: 1.15rem; font-weight: 400; margin: 0 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--ft-line); }
.ft-links { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 20px; }
.ft-links a { display: block; padding: 7px 0; color: var(--ft-soft); font-size: 0.95rem; }

.ft-contact li { display: flex; gap: 14px; margin-bottom: 16px; color: var(--ft-soft); font-size: 0.95rem; line-height: 1.55; }
.ft-contact i { flex: none; width: 16px; margin-top: 4px; text-align: center; color: #fff; }
.ft-contact address { margin: 0; font-style: normal; }
.ft-contact a { display: block; overflow-wrap: anywhere; }

.ft-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 20px 0 24px; border-top: 1px solid var(--ft-line); color: var(--ft-soft); font-size: 0.85rem; }
.ft-bottom a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 991px) {
  .ft-grid { grid-template-columns: 1fr 1fr; }
  .ft-brand { grid-column: 1 / -1; }
}
@media (max-width: 575px) {
  .ft-inner { padding: 48px 16px 0; }
  .ft-grid { grid-template-columns: 1fr; gap: 40px; padding-bottom: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .ft a, .ft-social a { transition: none; }
}

/* Site nav (components/Nav.tsx): see-through over the home photo, solid navy once scrolled and on every other page. */
.nv { --nv-navy: #121428; --nv-accent: #e9a93c; --nv-line: rgba(255, 255, 255, 0.14); --nv-soft: rgba(255, 255, 255, 0.72); position: sticky; top: 0; z-index: 1030; color: #fff; }
/* Zero height lets the bar lie on top of the photo instead of pushing it down. */
.nv--overlay { height: 0; }
.nv-bar { background: linear-gradient(to bottom, rgba(18, 20, 40, 0.85), rgba(18, 20, 40, 0)); padding-bottom: 28px; transition: background 0.3s, padding 0.3s; }
.nv.is-solid .nv-bar { background: linear-gradient(to right, rgba(18, 20, 40, 1), rgb(12, 3, 43)); padding-bottom: 0; }
.nv-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; max-width: 1180px; min-height: 84px; margin: 0 auto; padding: 0 24px; transition: min-height 0.3s; }
.nv.is-solid .nv-in { min-height: 68px; }
.nv a, .nv button { color: inherit; }
.nv a:focus-visible, .nv button:focus-visible { outline: 2px solid var(--nv-accent); outline-offset: 3px; border-radius: 2px; }

.nv-brand { display: flex; align-items: center; gap: 14px; font-family: "Josefin Sans", sans-serif; font-size: 1.3rem; line-height: 1.15; }
.nv-brand:hover { color: #fff; }
.nv-brand img { border-radius: 50%; flex: none; }
.nv-brand small { display: block; margin-top: 4px; font-family: Roboto, sans-serif; font-size: 0.8rem; color: var(--nv-soft); }

.nv-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; font-family: "Josefin Sans", sans-serif; font-size: 1.05rem; }
.nv-links > li { position: relative; }
.nv-links > li > a, .nv-links > li > button { display: block; padding: 10px 14px 8px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; cursor: pointer; transition: color 0.2s, border-color 0.2s; }
.nv-links > li > a:hover, .nv-links > li > button:hover { color: var(--nv-accent); }
.nv-links > li > a[aria-current="page"], .nv-links > li > button.is-current { border-bottom-color: var(--nv-accent); }
.nv-links .fa-chevron-down { margin-left: 4px; font-size: 0.65em; transition: transform 0.2s; }
.nv-links button[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }

.nv-sub { display: none; position: absolute; top: calc(100% + 8px); left: 0; min-width: 210px; margin: 0; padding: 8px 0; list-style: none; background: #fff; color: var(--nv-navy); border-top: 3px solid var(--nv-accent); box-shadow: 0 12px 30px rgba(18, 20, 40, 0.25); font-family: Roboto, sans-serif; font-size: 0.95rem; }
.nv-sub.is-open { display: block; }
.nv-sub a { display: block; padding: 9px 18px; }
.nv-sub a:hover, .nv-sub a[aria-current="page"] { background: #fbefd8; color: var(--nv-navy); }

.nv-burger { display: none; width: 44px; height: 44px; border: 1px solid var(--nv-line); border-radius: 4px; background: none; font-size: 1.1rem; cursor: pointer; }

/* Below the desktop width the links drop into a panel under the bar. */
@media (max-width: 991px) {
  .nv-in { min-height: 68px; padding: 0 16px; }
  /* Padding, not the row's min-height, keeps the bar 68px tall once the open panel wraps below it. */
  .nv-brand { padding: 10px 0; font-size: 1.05rem; }
  .nv-brand img { width: 48px; height: 48px; }
  .nv-burger { display: block; }
  .nv-panel { display: none; width: 100%; max-height: calc(100vh - 68px); overflow-y: auto; padding: 8px 0 16px; border-top: 1px solid var(--nv-line); }
  .nv-panel.is-open { display: block; }
  .nv-links { flex-direction: column; align-items: stretch; gap: 0; }
  .nv-links > li > a, .nv-links > li > button { width: 100%; padding: 12px 4px; border-bottom: 0; text-align: left; }
  .nv-links > li > a[aria-current="page"], .nv-links > li > button.is-current { color: var(--nv-accent); }
  .nv-sub { position: static; min-width: 0; padding: 0 0 8px 16px; border-top: 0; background: none; box-shadow: none; color: var(--nv-soft); }
  .nv-sub a { padding: 9px 4px; }
  .nv-sub a:hover, .nv-sub a[aria-current="page"] { background: none; color: var(--nv-accent); }
}
@media (prefers-reduced-motion: reduce) {
  .nv-bar, .nv-in, .nv-links > li > a, .nv-links > li > button, .nv-links .fa-chevron-down { transition: none; }
}

/* Home photo carousel (components/home/HeroFade.tsx): photos fade into each other, with the motto on the photo. */
.hc { --hc-navy: #121428; --hc-accent: #e9a93c; position: relative; background: var(--hc-navy); color: #fff; overflow: hidden; }
.hc-arrow { width: 46px; height: 46px; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 50%; background: rgba(18, 20, 40, 0.35); color: #fff; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.hc-arrow:hover { background: var(--hc-accent); border-color: var(--hc-accent); color: var(--hc-navy); }
.hc button:focus-visible { outline: 2px solid var(--hc-accent); outline-offset: 3px; }

.hc-fade { height: 92vh; min-height: 480px; }
.hc-fade-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; opacity: 0; transform: scale(1.08); transition: opacity 1.4s ease, transform 7s ease-out; }
.hc-fade-img.is-active { opacity: 1; transform: scale(1); }
.hc-fade-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(18, 20, 40, 0.9), rgba(18, 20, 40, 0) 45%); }
/* Like the old site: the motto on one centred line along the bottom of the
   slide, with the controls just above it. */
.hc-fade-foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column-reverse; align-items: center; gap: 18px; padding: 0 24px 28px; text-align: center; }
.hc-fade-motto { margin: 0; font-family: "Jost", sans-serif; font-weight: 300; font-size: clamp(1.3rem, 2.4vw, 2.2rem); line-height: 1.2; text-transform: uppercase; letter-spacing: 0.03em; }
.hc-fade-controls { display: flex; align-items: center; justify-content: center; }
.hc-arrow-prev, .hc-arrow-next { position: absolute; top: 50%; transform: translateY(-50%); }
.hc-arrow-prev { left: 24px; }
.hc-arrow-next { right: 24px; }
.hc-bars { display: flex; gap: 6px; }
.hc-bars button { position: relative; width: 34px; height: 20px; padding: 0; border: 0; background: none; }
.hc-bars button::before, .hc-bars button span { content: ""; position: absolute; left: 0; top: 9px; height: 3px; border-radius: 2px; }
.hc-bars button::before { width: 100%; background: rgba(255, 255, 255, 0.35); }
.hc-bars button span { width: 100%; background: var(--hc-accent); transform-origin: left; animation: hc-fill linear forwards; }
@keyframes hc-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 700px) {
  .hc-fade { height: 78vh; }
  .hc-bars button { width: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .hc-fade-img { transition: none; transform: none; }
  .hc-bars button span { animation: none; }
}

/* Home page "Latest information" (app/(site)/page.tsx): heading on the left, a ruled list of notices on the right. */
.hn { --hn-navy: #121428; --hn-accent: #e9a93c; --hn-accent-deep: #a86c0c; --hn-soft: #5d6075; --hn-line: rgba(18, 20, 40, 0.14); background: #fff; padding: 64px 0; }
.hn-in { display: grid; grid-template-columns: minmax(220px, 1fr) 2.4fr; gap: 24px 56px; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.hn-side h2 { font-family: "Josefin Sans", sans-serif; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.05; color: var(--hn-navy); margin: 0 0 12px; }
.hn-side p { margin: 0 0 20px; color: var(--hn-soft); font-size: 0.95rem; }
.hn-all { display: inline-block; padding: 10px 20px; border-radius: 999px; background: var(--hn-navy); color: #fff; font-weight: 500; font-size: 0.92rem; transition: background 0.2s, color 0.2s; }
.hn-all:hover { background: var(--hn-accent); color: var(--hn-navy); }
.hn-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--hn-navy); }
.hn-list a { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 20px; padding: 18px 8px; border-bottom: 1px solid var(--hn-line); color: var(--hn-navy); transition: background 0.2s; }
.hn-list a:hover { background: #fbf3e2; }
.hn-list a:focus-visible, .hn-all:focus-visible { outline: 2px solid var(--hn-accent-deep); outline-offset: 3px; }
.hn-date { text-align: center; font-family: "Josefin Sans", sans-serif; line-height: 1; }
.hn-date b { display: block; font-weight: 400; font-size: 2rem; }
.hn-date span { font-size: 0.85rem; color: var(--hn-accent-deep); white-space: nowrap; }
/* min-width: 0 lets a long heading wrap inside the grid instead of pushing the row wider. */
.hn-text { min-width: 0; }
.hn-title { display: block; font-size: 1.12rem; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.hn-sub { display: block; font-size: 0.92rem; color: var(--hn-soft); overflow-wrap: anywhere; }
.hn-new { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--hn-accent); font-size: 0.72rem; vertical-align: 2px; }
.hn-chev { color: var(--hn-soft); transition: transform 0.2s, color 0.2s; }
.hn-list a:hover .hn-chev { transform: translateX(4px); color: var(--hn-accent-deep); }
@media (max-width: 760px) {
  .hn { padding: 44px 0; }
  .hn-in { grid-template-columns: 1fr; }
  .hn-list a { grid-template-columns: 64px 1fr; gap: 14px; }
  .hn-chev { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hn-list a, .hn-chev, .hn-all { transition: none; }
}

/* About pages (our-mission, history, principal-desk, faculty, governing-board): title band and page layouts. */
.ab-page { --ab-navy: #121428; --ab-accent: #e9a93c; --ab-accent-deep: #a86c0c; --ab-soft: #5d6075; --ab-line: rgba(18, 20, 40, 0.14); background: #fff; color: var(--ab-navy); min-height: 70vh; }

/* Same width and gutter as the nav bar and footer, so the title lines up under the school name. */
.ab-in { max-width: 1180px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

.ab-head { padding: 64px 0 0; }
.ab-head .ab-in::after { content: ""; display: block; width: 72px; height: 3px; margin-top: 28px; background: var(--ab-accent); }
.ab-title { font-family: "Josefin Sans", sans-serif; font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.08; margin: 0; text-wrap: balance; }
.ab-lead { font-size: 1.15rem; line-height: 1.6; max-width: 56ch; margin: 14px 0 0; color: var(--ab-soft); }

.ab-body { padding-top: 48px; padding-bottom: 88px; }
.ab-body p { font-size: 1.08rem; line-height: 1.75; margin: 0 0 1.2em; }
.ab-prose { max-width: 68ch; }
.ab-heading { font-family: "Josefin Sans", sans-serif; font-size: 1.45rem; line-height: 1.2; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--ab-line); }
.ab-heading small { font-family: Roboto, sans-serif; font-size: 0.9rem; color: var(--ab-soft); margin-left: 6px; }

/* Our mission: one reading column, with a plain heading over the mission and the vision. */
.ab-subheading { font-family: "Josefin Sans", sans-serif; font-size: 1.45rem; line-height: 1.2; margin: 40px 0 12px; }

/* History: the year in the left column, a line with a gold dot running down beside the text. */
/* The opening paragraphs sit in the same column as the timeline text. */
.ab-intro { margin-left: 237px; }
.ab-timeline { list-style: none; margin: 48px 0 0; padding: 0; }
.ab-event { display: grid; grid-template-columns: 200px minmax(0, 68ch); }
.ab-year { font-family: "Josefin Sans", sans-serif; font-size: 3.2rem; line-height: 1; color: var(--ab-accent-deep); margin: 0; padding-top: 2px; }
.ab-event-text { position: relative; border-left: 1px solid var(--ab-line); padding: 0 0 40px 36px; }
.ab-event-text::before { content: ""; position: absolute; left: -7px; top: 16px; width: 13px; height: 13px; border-radius: 50%; background: var(--ab-accent); border: 3px solid #fff; }
.ab-event:last-child .ab-event-text { padding-bottom: 0; }
.ab-event-text p:last-child { margin-bottom: 0; }

/* Principal's desk: the portrait stays in view on the left while the letter scrolls past it. */
.ab-letter { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 68ch); gap: 40px 64px; align-items: start; }
.ab-portrait { position: sticky; top: 120px; margin: 0; }
.ab-portrait img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ab-portrait figcaption { display: flex; flex-direction: column; padding-top: 14px; margin-top: 14px; border-top: 3px solid var(--ab-accent); }
.ab-portrait b, .ab-sign b { font-family: "Josefin Sans", sans-serif; font-weight: 400; font-size: 1.25rem; }
.ab-portrait span, .ab-sign span { color: var(--ab-soft); font-size: 0.95rem; }
.ab-body .ab-opening { font-family: "Josefin Sans", sans-serif; font-size: 1.5rem; line-height: 1.4; }
.ab-sign { display: flex; flex-direction: column; margin-top: 40px; }
.ab-sign img { width: 170px; height: auto; margin-bottom: 4px; }

/* Faculty: departments flow down newspaper-style columns so short and long lists pack together. */
.ab-departments { columns: 3 260px; column-gap: 56px; }
.ab-department { break-inside: avoid; margin-bottom: 48px; }
.ab-department ul, .ab-members ul { list-style: none; margin: 0; padding: 0; }
.ab-department li, .ab-members li { font-size: 1.05rem; padding: 7px 0; }

/* Governing board: office bearers with their post above the name, then the plain members. */
.ab-officers { list-style: none; margin: 0 0 64px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 32px 40px; }
.ab-officers li { display: flex; flex-direction: column; gap: 4px; }
.ab-officers span { color: var(--ab-accent-deep); font-size: 0.95rem; font-weight: 500; }
.ab-officers b { font-family: "Josefin Sans", sans-serif; font-weight: 400; font-size: 1.45rem; line-height: 1.2; }
.ab-members ul { columns: 3 220px; column-gap: 40px; }

@media (max-width: 767px) {
  .ab-in { padding-left: 16px; padding-right: 16px; }
  .ab-head { padding: 40px 0 0; }
  .ab-body { padding-top: 36px; padding-bottom: 64px; }
  .ab-letter { grid-template-columns: 1fr; }
  .ab-portrait { position: static; max-width: 340px; }
  .ab-intro { margin-left: 0; }
  .ab-event { grid-template-columns: 1fr; }
  .ab-year { font-size: 2rem; margin-bottom: 12px; }
  .ab-event-text { border-left: 0; padding-left: 0; }
  .ab-event-text::before { display: none; }
}