/* ==========================================================================
   0. BASE LAYOUT — scoped to Phase 2A pages only (body.inst-page)
   --------------------------------------------------------------------------
   Legacy pages each carry their own inline <style> with these primitives and
   must not be disturbed. Phase 2A pages have no inline design system, so the
   primitives live here, scoped so they cannot leak onto a legacy page.
   ========================================================================== */
.inst-page *, .inst-page *::before, .inst-page *::after { box-sizing: border-box; }

.inst-page {
  margin: 0;
  padding-top: 78px;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.68;
}

.inst-page img, .inst-page svg, .inst-page video { max-width: 100%; }
/* The skip link is excluded deliberately. This rule is (0,2,0) and beat
   premium.css's `.skip-link { color: var(--paper) }` (0,1,0), so on every page
   carrying `inst-page` the skip link inherited the body's ink over its own ink
   background — 1:1 contrast, a solid dark rectangle with invisible text, as the
   first thing a keyboard user reaches. `:where()` adds no specificity, so the
   weight of this rule is unchanged for every other link on the page. */
.inst-page a:where(:not(.skip-link)) { color: inherit; text-decoration: none; }

/* ---------------------------------------------------------------------------
   Phase 2E — the canonical content width.

   Taken from the homepage, which is the visual authority: 1200px with 24px
   gutters (16px below 640px). It was previously scoped to `.inst-page`, so the
   eleven legacy pages fell back to inline copies ranging from 900px to no limit
   at all - enrolment.html rendered a 1392px form against the homepage's 1200px
   content. Unscoped here so one rule governs the whole site.

   Deliberate exceptions keep their own width: the homepage hero slider
   (.hero-slider-container), full-bleed sections, and the prose measure used for
   long-form reading (.content), which is narrower on purpose.
   --------------------------------------------------------------------------- */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.inst-page .navbar {
  position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 1000;
  background: var(--paper); border-bottom: 1px solid var(--rule);
}

.inst-page .nav-container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; height: 78px;
}

.inst-page .nav-brand-group { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.inst-page .brand { display: inline-flex; align-items: center; gap: 11px; min-width: 0; }

/* Applies site-wide: the 192px logo asset must render at navbar scale. */
.brand img { width: 38px !important; height: 38px !important; object-fit: contain; flex: 0 0 auto; }

.inst-page .drawer-toggle-btn,
.inst-page .theme-toggle-btn {
  width: 40px; height: 40px; display: inline-flex; align-items: center;
  justify-content: center; background: transparent; border: 1px solid var(--rule);
  border-radius: var(--radius); color: var(--ink-soft); cursor: pointer; flex: 0 0 auto;
}

.inst-page .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  cursor: pointer; border: 1px solid transparent; white-space: nowrap; text-align: center;
}

.inst-page .page-header { text-align: center; }
.inst-page .page-header h1 { margin: 0; }

/* ---------------------------------------------------------------------------
   Phase 2 — the one canonical footer.

   These rules were previously scoped to `.inst-page`, so the eleven legacy
   pages fell back to six different inline copies with different column widths
   and gaps. They are deliberately unscoped now: one footer, one set of rules,
   every public page. institutional.css loads after every page's inline <style>
   block, so these win on order without needing !important.
   --------------------------------------------------------------------------- */
footer { background: var(--navy-deep); color: #ffffff; }
.footer-grid {
  display: grid;
  /* Five columns: brand/contact, The School, Admissions, Connect, Quick Inquiry.
     The track is sized so all five sit on one row in the 1200px container
     instead of leaving the form orphaned on a second row, and auto-fit reflows
     to 3, 2 and 1 columns as the viewport narrows. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 36px 32px;
  margin-bottom: 0;
}
.footer-col h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; }
.contact-list { display: flex; flex-direction: column; gap: 11px; }
.contact-list a { display: flex; align-items: center; gap: 10px; }
.footer-bottom { text-align: center; }
.footer-bottom p { margin: 0; }

/* Quick Inquiry: email + message + send. Labels are visible, not sr-only. */
.footer-form { display: flex; flex-direction: column; gap: 8px; }
.footer-form label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.72);
}
.footer-form label + input,
.footer-form label + textarea { margin-bottom: 6px; }
.footer-form input,
.footer-form textarea {
  /* donate.html has no global border-box reset, so width:100% plus the 28px of
     horizontal padding pushed these fields past the viewport. Stated here so
     the shared footer measures the same on every page. */
  box-sizing: border-box;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-size: 0.95rem;
  font-family: inherit;
  outline: none;
}
.footer-form input::placeholder,
.footer-form textarea::placeholder { color: rgba(255, 255, 255, 0.42); }
.footer-form input:focus,
.footer-form textarea:focus {
  border-color: var(--accent, #2f6b43);
  background: rgba(255, 255, 255, 0.11);
}
.footer-form textarea { resize: vertical; min-height: 84px; }
.footer-form-intro {
  margin: 0 0 14px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.66);
}
.footer-form-intro a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* The homepage leadership portrait keeps the square corners premium.css sets
   deliberately for media; only the crop focus is set here, so the face sits in
   the frame rather than being centred on the full 5132x4000 landscape photo. */
img.leadership-avatar { object-position: center 30%; }

/* ---------------------------------------------------------------------------
   Phase 2 — drawer account card.

   The homepage used to carry a second drawer of its own containing this card.
   It duplicated four element ids with the shared drawer, so the homepage
   hamburger opened a different panel from every other page. The card moved into
   the one shared drawer and these rules, previously inline on the homepage, moved
   here so all twenty-four pages render it identically. It continues the dark
   header band, as the previous drawer did.
   --------------------------------------------------------------------------- */
.drawer-account { padding: 0 16px 16px; }
.drawer-user { display: flex; align-items: center; gap: 12px; min-width: 0; }
.drawer-user-info-link {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  padding: 8px;
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease;
}
a.drawer-user-info-link:hover,
a.drawer-user-info-link:focus-visible { background: rgba(255, 255, 255, 0.1); }
.drawer-avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1rem;
}
.drawer-user-details { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.drawer-user-name {
  font-weight: 700;
  font-size: 0.96rem;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drawer-user-sub {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drawer-user-chevron {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.82rem;
  transition: transform 0.2s ease, color 0.2s ease;
}
a.drawer-user-info-link:hover .drawer-user-chevron { color: #ffffff; transform: translateX(3px); }

.drawer-admin-item i { color: var(--navy); }
:root.dark-theme .drawer-admin-item i,
body.dark-theme .drawer-admin-item i { color: #60a5fa; }

.drawer-footer {
  margin-top: auto;
  padding: 14px 22px 20px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.drawer-logout-btn {
  width: 100%;
  min-height: 40px;
  padding: 10px;
  background: rgba(168, 33, 43, 0.08);
  border: 1px solid rgba(168, 33, 43, 0.3);
  border-radius: var(--radius);
  color: var(--ember);
  font-weight: 600;
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.drawer-logout-btn:hover { background: var(--ember); color: #ffffff; }

/* The drawer button is visible at every width since Phase 2D. The legacy pages
   never sized it, so above 400px it collapsed to its glyph (14x18) - below the
   24x24 minimum in WCAG 2.2 SC 2.5.8. Sized once, for every page. */
.drawer-toggle-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
}

/* ---------------------------------------------------------------------------
   Phase 2E — page wrappers conform to the canonical width.

   Three wrappers escaped the content width:

     * `.nav-container` was capped at 1000px on enrolment.html and 1100px on
       tehf.html, so the shared header rendered narrower on those two pages than
       on the other twenty-two.
     * `site-professional.css` sets `.site-page .form-container,
       .site-page .main-container { max-width: calc(100% - 32px) }` at (0,2,0),
       which beat the pages' own 1000px rules at (0,1,0). enrolment.html
       therefore rendered a 1392px form against a 1200px site.
     * apply.html relied on a page-specific `.container` override for its form
       width, which is gone now that `.container` is defined once globally.

   The `.site-page`-prefixed selectors below are repeated deliberately: they
   match the specificity of the rule in site-professional.css and load after it,
   so they win on order rather than on !important.
   --------------------------------------------------------------------------- */
:root { --content-max: 1200px; --form-max: 900px; }

/* donate.html is the one page with no global border-box reset, so its 1200px
   container rendered 1248px once the 24px gutters were added on top. Stating it
   here keeps every page measuring the same thing. */
.container,
.nav-container,
.site-page .nav-container {
  box-sizing: border-box;
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

.site-page .form-container,
.site-page .main-container,
.form-container,
.main-container,
.form-wrapper,
.deletion-form-container {
  box-sizing: border-box;
  max-width: var(--form-max);
  margin-left: auto;
  margin-right: auto;
}

/* The page ribbon stays full-bleed; only the content inside it is measured. */
.page-ribbon > .container,
.site-page .page-ribbon > .container { max-width: var(--content-max); }

@media (max-width: 960px) {
  .site-page .form-container,
  .site-page .main-container,
  .form-container,
  .main-container,
  .form-wrapper,
  .deletion-form-container { max-width: 100%; }
}

/* ---------------------------------------------------------------------------
   Phase 2F — header alignment, drawer surface, full-bleed hero.
   --------------------------------------------------------------------------- */

/* Removing the 140px portal control from the header moved the primary nav to
   the right, so the last group's dropdown ran past the viewport and three pages
   gained a horizontal scrollbar. The final dropdown is anchored to the right
   edge of its own item instead of the left, which keeps it on screen whatever
   the nav's width. */
.nav-links > .nav-item:last-child .dropdown {
  left: auto;
  right: 0;
}
html[dir="rtl"] .nav-links > .nav-item:last-child .dropdown {
  right: auto;
  left: 0;
}

/* The homepage hero slideshow runs edge to edge. Scoped to its own section id
   so no other container is affected: it is the one deliberate full-bleed block.
   The rounded corners and side gutters that framed it inside a 1440px box are
   dropped, since there is no longer a box to frame. */
#hero-slider-section > .hero-slider-container {
  max-width: none;
  width: 100%;
  padding: 0;
  margin: 0;
  position: relative;
}
#hero-slider-section .hero-slider-viewport {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* The slide grows to fill the screen below the header. Previously it stopped
   at 640px and the dots and pause button sat in a 75px white strip underneath;
   both now sit over the image, so the photograph runs to the bottom edge. */
#hero-slider-section .hero-slide {
  min-height: clamp(520px, calc(100vh - var(--header-h)), 880px) !important;
}
/* The slide-position dots are not shown. The prev/next arrows provide the same
   navigation, so nothing is lost. */
#hero-slider-section .hero-slider-dots { display: none !important; }

/* The pause control. The carousel advances itself every 5.5 seconds and
   WCAG 2.2.2 (Level A) requires a mechanism to stop it.

   It used to be 1×1 at opacity 0, visible only once it had keyboard focus —
   which left mouse and touch users no way to pause at all, and made it the
   71st stop in the tab order for everyone else. It is now the third button in
   the existing prev/next cluster, sharing their exact size, shape, background
   and border, so it is discoverable without adding any new furniture to the
   hero: no strip, no badge, no panel. It sits at 70% until hovered or
   focused. */
#hero-slider-section .hero-autoplay-toggle {
  position: absolute !important;
  top: auto !important;
  bottom: 40px;
  right: 172px;
  z-index: 7;
  width: 46px;
  height: 46px;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: rgba(12, 16, 22, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.34);
  color: #ffffff;
  font-size: 0.85rem;
  opacity: 0.7;
  transition: opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
#hero-slider-section .hero-autoplay-toggle:hover {
  opacity: 1;
  background: rgba(12, 16, 22, 0.75);
  border-color: rgba(255, 255, 255, 0.6);
}
#hero-slider-section .hero-autoplay-toggle:focus-visible {
  opacity: 1;
  background: rgba(12, 16, 22, 0.85);
  border-color: rgba(255, 255, 255, 0.6);
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}
html[dir="rtl"] #hero-slider-section .hero-autoplay-toggle { right: auto; left: 172px; }

/* index.html hides the prev/next arrows at <=768px. The pause control stays —
   the carousel still moves, so the mechanism to stop it still has to be there —
   but right:172px was a slot measured against arrows that are no longer
   beside it. On its own it takes the corner slot the "next" arrow had. */
@media (max-width: 768px) {
  #hero-slider-section .hero-autoplay-toggle { right: 48px; }
  html[dir="rtl"] #hero-slider-section .hero-autoplay-toggle { right: auto; left: 48px; }
}

@media (max-width: 640px) {
  #hero-slider-section .hero-autoplay-toggle { bottom: 24px; }
}

#hero-slider-section .hero-slider-arrow { bottom: 40px !important; }

@media (max-width: 640px) {
  #hero-slider-section .hero-slider-arrow { bottom: 24px !important; }
}

/* ---------------------------------------------------------------------------
   Back to top — one button, every page.
   --------------------------------------------------------------------------- */
.back-to-top {
  --btt-size: 48px;
  position: fixed;
  bottom: 26px;
  right: 24px;
  width: var(--btt-size);
  height: var(--btt-size);
  border-radius: 50%;
  background: rgba(22, 48, 95, 0.92);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  box-shadow: 0 8px 25px rgba(15, 23, 42, 0.28);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 1200;
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--navy-deep); }
.back-to-top:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
html[dir="rtl"] .back-to-top { right: auto; left: 24px; }
@media (prefers-reduced-motion: reduce) { .back-to-top { transition: none; } }

/* An empty drawer group must not draw a rule. The language group renders
   nothing on a page whose i18n runtime has not loaded, and the portal group is
   hidden until a role is known; either left a stray line in the drawer. */
.drawer-group:empty,
.drawer-language:not(:has(*)) { display: none; }


/* The burger sat 19px above centre on ten legacy pages because
   `.nav-brand-group` was never declared a flex container there (computed
   `align-items: normal`, `gap: normal`), so the button and the crest stacked
   instead of sitting side by side. donate.html went further and had
   `.nav-container { display: block }`. Declared once, for every page, matching
   the homepage. */
/* One header height, shared by the bar and its container. premium.css pins
   `.nav-container` to 78px with no media query, which overrode the pages' own
   mobile rule while `@media (max-width: 768px) .navbar { height: 70px }` still
   applied - a 70px bar wrapping a 78px container, so the crest and the burger
   sat 4px below centre. Both now read the same token. */
:root { --header-h: 78px; }
@media (max-width: 768px) { :root { --header-h: 70px; } }
@media (max-width: 640px) { :root { --header-h: 68px; } }

.navbar,
.site-page .navbar { height: var(--header-h); }

.nav-container,
.site-page .nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--header-h);
}
.nav-brand-group {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }

/* The drawer's dark band must not follow `--navy-deep`: that token inverts to
   #d7e3f7 in dark mode, which put white text on pale blue at 1.29:1 — the
   account card was effectively invisible. These two surfaces stay dark in both
   themes, because the text on them is always white. */
:root { --drawer-band: #0f2345; }
:root.dark-theme, body.dark-theme { --drawer-band: #0b1220; }

.drawer-header,
.site-page .drawer-header,
body.dark-theme .drawer-header,
:root.dark-theme .drawer-header,
.site-page.dark-theme .drawer-header { background: var(--drawer-band) !important; }
.drawer-account { background: var(--drawer-band); padding: 0 16px 16px; }
.drawer-account .drawer-user-name { color: #ffffff; }
.drawer-account .drawer-user-sub { color: rgba(255, 255, 255, 0.78); }
.drawer-account .drawer-avatar { background: rgba(255, 255, 255, 0.16); color: #ffffff; }

/* The signed-in portal entry. Present in markup on every page, revealed only
   once a role is known. */
/* The portal button spans the drawer rather than shrink-wrapping its label, so
   it reads as the primary action for a signed-in visitor. */
.drawer-portal-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--rule-strong, #cfc5b2);
  border-radius: var(--radius);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.82rem;
  color: var(--navy);
}
.drawer-portal-item:hover { background: var(--paper-sunk, rgba(0,0,0,0.04)); border-color: var(--navy); }
.drawer-portal-item i { color: var(--green); }
:root.dark-theme .drawer-portal-item,
body.dark-theme .drawer-portal-item { color: #cbd5e1; }

/* The language selector lost its group heading, so the group only needs the
   separating rule. */
/* One divider before the language selector, not two: the menu's own gap plus a
   border on both neighbours read as a double rule. */
/* Each drawer group carried a border-bottom and 14px of padding, and the menu
   adds a 26px gap on top of that, so every boundary read as two rules with an
   empty band between them. The groups are now separated by spacing alone, with
   a single divider above the language selector. */
/* The menu already insets its contents by 22px; the groups added another 22px
   of their own, which is what stopped the portal button reaching the full
   width of the drawer. Spacing now comes from the menu alone. */
/* The inset lives on the menu, matching the 22px used by the drawer header and
   the signed-in footer, so the brand, the links, the portal button and Settings
   all share one left edge. The groups contribute spacing only. */
.drawer-menu {
  padding-left: 22px !important;
  padding-right: 22px !important;
}
.drawer-menu > .drawer-group {
  border: 0 !important;
  padding: 0 !important;
}
/* Hidden, like the homepage: language is set from the Settings page. The mount
   stays in the DOM so the i18n runtime still has a consistent target. */
.drawer-language[hidden] { display: none !important; }
.drawer-avatar#user-avatar-fallback { font-weight: 700; font-size: 1.05rem; }

/* ---------------------------------------------------------------------------
   Phase 2E — drawer simplification and footer de-navigation.
   --------------------------------------------------------------------------- */

/* The theme toggle now sits where the close (X) button used to be. It is styled
   as a header control rather than a bolted-on extra. */
.drawer-header .drawer-theme-toggle,
body.dark-theme .drawer-header .drawer-theme-toggle,
:root.dark-theme .drawer-header .drawer-theme-toggle {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
}
.drawer-header .drawer-theme-toggle {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.drawer-header .drawer-theme-toggle:hover { background: rgba(255, 255, 255, 0.24); }
.drawer-header .drawer-theme-toggle:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* "School" in the brand green inside the drawer's dark header needs the lighter
   value: #2f6b43 on navy is 2.47:1 and would fail. */
.drawer-brand .brand-school { color: #74b98c !important; }

.drawer-menu { padding: 22px; display: flex; flex-direction: column; gap: 26px; }
.drawer-language .drawer-group-title { margin-bottom: 12px; }


/* Footer: two columns and room to breathe, not a sitemap. */
.footer-grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 56px 64px;
}
.footer-blurb {
  margin: 0 0 20px;
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.92rem;
  line-height: 1.65;
}
.footer-identity .contact-list { gap: 10px; }
.footer-identity .brand-school { color: #74b98c; font-weight: 600; }
.footer-social { display: flex; gap: 12px; margin-top: 22px; }
.footer-social a {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.82);
}
.footer-social a:hover { background: rgba(255, 255, 255, 0.12); color: #ffffff; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
}
.footer-legal { display: flex; align-items: center; gap: 10px; margin: 0; }
.footer-legal a { color: rgba(255, 255, 255, 0.72); }
.footer-legal a:hover { color: #ffffff; }

@media (max-width: 860px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .footer-bottom { justify-content: center; text-align: center; }
}

/* ---------------------------------------------------------------------------
   Phase 2 — header chrome.

   Home, the language selector, the dark-mode toggle and the "Visit the School"
   button left the desktop header for the drawer. What stays is portal access.
   --------------------------------------------------------------------------- */

.nav-portal-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 6px 14px 6px 6px;
  border: 1px solid var(--rule-strong, #cfc5b2);
  border-radius: 999px;
  color: var(--ink, #141a24);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  background: transparent;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.nav-portal-link:hover,
.nav-portal-link:focus-visible {
  border-color: var(--navy, #16305f);
  background: rgba(22, 48, 95, 0.06);
}
.nav-portal-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--navy, #16305f);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  overflow: hidden;
  flex: 0 0 28px;
}
.nav-portal-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
:root.dark-theme .nav-portal-link,
body.dark-theme .nav-portal-link { color: #f1f5f9; border-color: rgba(255, 255, 255, 0.24); }
:root.dark-theme .nav-portal-link:hover,
body.dark-theme .nav-portal-link:hover { background: rgba(255, 255, 255, 0.08); }

/* Below 560px the label is dropped and the avatar alone is the control. It
   stays a 40x40 target, above the 24x24 WCAG 2.2 SC 2.5.8 minimum. */
@media (max-width: 560px) {
  .nav-portal-link {
    padding: 5px;
    border-radius: 50%;
    min-width: 40px;
    justify-content: center;
  }
  .nav-portal-label { display: none; }
}

/* Drawer preferences: the new home of the language selector and dark mode. */
.drawer-pref-row .theme-toggle-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--rule-strong, #cfc5b2);
  border-radius: 50%;
  background: transparent;
  color: var(--ink, #141a24);
  cursor: pointer;
}
:root.dark-theme .drawer-pref-row .theme-toggle-btn,
body.dark-theme .drawer-pref-row .theme-toggle-btn {
  color: #f1f5f9;
  border-color: rgba(255, 255, 255, 0.24);
}

@media (max-width: 640px) {
  .container { padding: 0 16px; }
  .inst-page { padding-top: 68px; }
}

/* ==========================================================================
   AVECINA — INSTITUTIONAL PAGE LAYER (Phase 2A)
   --------------------------------------------------------------------------
   Loads after premium.css and inherits every token from it. Adds only the
   layout primitives the new institutional pages need.

   No gradients, no glassmorphism, no card-grid default, no pills, no badges.
   Editorial typography, hairline rules and real photography carry the pages.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. NAVIGATION — shared across every public page
   -------------------------------------------------------------------------- */
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item { position: relative; }

.nav-item > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
}

.nav-item > a:hover,
.nav-item > a[aria-current="true"] { color: var(--ink); }

.nav-item > a[aria-current="true"] { box-shadow: inset 0 -2px 0 var(--ember); }

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 262px;
  padding: 10px 0;
  margin: 0;
  list-style: none;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 14px 34px -20px rgba(20, 26, 36, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  z-index: 1200;
}

.nav-item:hover > .dropdown,
.nav-item:focus-within > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown a {
  display: block;
  padding: 9px 20px;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.dropdown a:hover,
.dropdown a:focus-visible { color: var(--ink); background: var(--paper-sunk); }

/* Phase 2: `.nav-visit-cta` and `.nav-home-link` were removed from the header
   markup entirely, so the rules that sized them and the media queries that hid
   them on small screens are gone with them. Both destinations live in the
   drawer. Sizing for what remains is declared once, above. */

@media (max-width: 1100px) {
  .nav-links { display: none; }
}

/* Phase 2: the drawer button stays on desktop. It used to be hidden above
   1100px, which was fine while the header carried its own language selector and
   dark-mode button. Those now live only in the drawer, so hiding the button
   here would put both out of reach of every desktop visitor. */

/* Drawer */
.site-drawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: min(340px, 86vw);
  background: var(--paper);
  border-right: 1px solid var(--rule);
  transform: translateX(-102%);
  transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.site-drawer.open { transform: translateX(0); }

.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 20, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.26s ease, visibility 0.26s;
  z-index: 1900;
}

.drawer-overlay.open { opacity: 1; visibility: visible; }

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
}

.drawer-brand {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: #ffffff;
}

.drawer-close {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius);
  color: #ffffff;
  width: 32px; height: 32px;
  cursor: pointer;
}

.drawer-menu { padding: 8px 0 32px; }

.drawer-group { padding: 14px 22px; border-bottom: 1px solid var(--rule); }

.drawer-group-title {
  margin: 0 0 10px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.drawer-nav-item {
  display: block;
  padding: 9px 0;
  font-size: 0.94rem;
  color: var(--ink-soft);
}

.drawer-nav-item:hover { color: var(--ink); }

.drawer-cta {
  color: var(--green) !important;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   2. PAGE HEADER
   -------------------------------------------------------------------------- */
.page-eyebrow {
  margin: 0 0 16px;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.page-standfirst {
  max-width: 62ch;
  margin: 18px auto 0;
  font-size: 1.06rem;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   3. SECTIONS
   -------------------------------------------------------------------------- */
.inst-section { padding: 88px 0; border-top: 1px solid var(--rule); }
.inst-section:first-child { border-top: 0; }
.inst-section-tint { background: var(--paper-sunk); }

.inst-prose {
  max-width: 68ch;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--ink-soft);
  margin-bottom: 18px;
}

.statement-lead {
  max-width: 34ch;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink);
}

/* Honest disclosure of what the school has not yet published. Deliberately
   reads as an editorial note, never as institutional policy. */
.note-block {
  max-width: 68ch;
  margin-top: 28px;
  padding: 18px 22px;
  border-left: 2px solid var(--rule-strong);
  background: transparent;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

.note-block strong { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   4. EDITORIAL SPLIT (image + copy)
   -------------------------------------------------------------------------- */
.inst-split,
.stage-block,
.activity-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 44px 0;
  border-top: 1px solid var(--rule);
}

.inst-split:first-of-type,
.stage-block:first-of-type,
.activity-block:first-of-type { border-top: 0; padding-top: 0; }

.inst-split.reverse .inst-media { order: 2; }

.inst-media { margin: 0; }

.inst-media img {
  width: 100%;
  height: 100%;
  max-height: 380px;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}

.inst-copy h2,
.inst-copy h3 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 14px;
}

.inst-copy p { color: var(--ink-soft); max-width: 56ch; }

.stage-eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 12px;
}

.stage-points { list-style: none; margin: 18px 0 0; padding: 0; }

.stage-points li {
  position: relative;
  padding: 7px 0 7px 20px;
  font-size: 0.94rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule);
}

.stage-points li:first-child { border-top: 0; }

.stage-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 17px;
  width: 8px; height: 1px;
  background: var(--green);
}

/* --------------------------------------------------------------------------
   5. NUMBERED LISTS (principles, reasons, journey)
   -------------------------------------------------------------------------- */
.principle-list,
.reason-list,
.journey-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.principle-entry,
.reason-entry,
.journey-step {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
}

.principle-figure,
.reason-figure,
.journey-figure {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 300;
  line-height: 1;
  color: var(--numeral);
}

.principle-entry h3,
.reason-entry h3,
.journey-step h3 {
  font-family: var(--font-display);
  font-size: 1.14rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 8px;
}

.principle-entry p,
.reason-entry p,
.journey-step p { color: var(--ink-soft); max-width: 62ch; font-size: 0.97rem; }

.reason-evidence {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  font-size: 0.82rem !important;
  letter-spacing: 0.04em;
  color: var(--ink-faint) !important;
}

/* --------------------------------------------------------------------------
   6. PRINCIPAL / LEADERSHIP
   -------------------------------------------------------------------------- */
.principal-feature,
.leader-profile {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 52px;
  align-items: start;
}

.principal-portrait { margin: 0; text-align: center; }

/* Neutral placeholder. No likeness is manufactured; this is replaced by the
   school's own photograph when supplied. */
.portrait-placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--rule-strong);
  font-size: 3rem;
}

.principal-portrait img {
  width: 100%;
  /* The portrait carries width/height attributes so the box is reserved before
     it loads. Without `height: auto` the height attribute becomes a
     presentational hint and wins over aspect-ratio, rendering the image at its
     intrinsic 4000px height. */
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 30%;
  border-radius: var(--radius);
  display: block;
}

.principal-portrait figcaption {
  display: block;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}

.principal-role {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 5px;
}

.principal-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.08rem;
  color: var(--ink);
}

.principal-quote {
  margin: 0 0 26px;
  padding: 0;
  border: 0;
  font-family: var(--font-display);
  font-size: clamp(1.18rem, 2vw, 1.48rem);
  font-style: italic;
  line-height: 1.52;
  color: var(--ink);
  max-width: 60ch;
}

.leader-role {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 20px;
}

/* --------------------------------------------------------------------------
   7. FACT LIST / CONTACT GRID
   -------------------------------------------------------------------------- */
.fact-list {
  margin: 40px 0 0;
  border-top: 1px solid var(--rule);
  max-width: 640px;
}

.fact-list > div {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule);
}

.fact-list dt {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 3px;
}

.fact-list dd { margin: 0; color: var(--ink); }

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 36px;
  border-top: 1px solid var(--rule);
  padding-top: 32px;
}

.contact-grid h3 {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 12px;
}

.contact-grid p { margin-bottom: 7px; color: var(--ink-soft); font-size: 0.96rem; }
.contact-grid a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   8. POLICIES
   -------------------------------------------------------------------------- */
.policy-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }

.policy-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}

.policy-entry h3 {
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 4px;
}

.policy-entry p { margin: 0; font-size: 0.93rem; color: var(--ink-soft); max-width: 60ch; }
.policy-entry a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

.policy-status {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  padding-left: 14px;
  border-left: 2px solid var(--green);
}

.policy-status-request { color: var(--ink-faint); border-left-color: var(--rule-strong); }

/* --------------------------------------------------------------------------
   9. CTA + RELATED
   -------------------------------------------------------------------------- */
.inst-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 40px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-raised);
}

.inst-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 8px;
}

.inst-cta p { color: var(--ink-soft); max-width: 54ch; margin: 0; }
.inst-cta-actions { display: flex; gap: 12px; flex: 0 0 auto; flex-wrap: wrap; }

.visit-actions-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }

.inst-related h2 {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-family: var(--font-body) !important;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}

.inst-related ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0 32px;
}

.inst-related li { border-bottom: 1px solid var(--rule); }

.inst-related a {
  display: block;
  padding: 15px 0;
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--ink);
}

.inst-related a:hover { color: var(--green); }

.tertiary-link {
  display: inline-block;
  margin-right: 22px;
  font-size: 0.9rem;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.tertiary-link:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   10. IMPORTED BLOCKS (verbatim fee / transport / term markup)
   -------------------------------------------------------------------------- */
.imported-block table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 0.94rem;
}

.imported-block th,
.imported-block td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--rule);
}

.imported-block thead th {
  background: var(--navy-deep);
  /* --navy-deep inverts to a pale blue in dark mode; a hardcoded #ffffff here
     made the fee, menu and transport column headings 1.29:1. */
  color: var(--on-navy-deep, #ffffff);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.imported-block h3 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  margin: 34px 0 12px;
}

.imported-block h4 { color: var(--ink); margin: 22px 0 10px; }
.imported-block p, .imported-block li { color: var(--ink-soft); }
.imported-block ul { margin: 14px 0 14px 20px; }
.imported-block li { padding: 5px 0; }

/* --------------------------------------------------------------------------
   11. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .inst-section { padding: 56px 0; }
  .inst-split, .stage-block, .activity-block,
  .principal-feature, .leader-profile { grid-template-columns: 1fr; gap: 28px; }
  .inst-split.reverse .inst-media { order: 0; }
  .principal-portrait { max-width: 230px; }
  .inst-cta { flex-direction: column; align-items: flex-start; padding: 28px; }
  .principle-entry, .reason-entry, .journey-step { grid-template-columns: 54px 1fr; gap: 16px; }
  .fact-list > div { grid-template-columns: 1fr; gap: 4px; }
  .policy-entry { flex-direction: column; align-items: flex-start; gap: 10px; }
  .policy-status { padding-left: 0; border-left: 0; border-top: 2px solid var(--green); padding-top: 6px; }
  .policy-status-request { border-top-color: var(--rule-strong); }
}

@media (max-width: 640px) {
  .imported-block table { display: block; overflow-x: auto; white-space: nowrap; }
  .visit-actions-row .btn { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   12. NARROW-VIEWPORT NAV SAFETY
   Applies to every page (legacy and Phase 2A): the shared navbar must never
   force horizontal page scroll.
   -------------------------------------------------------------------------- */
.nav-container { min-width: 0; }
.nav-brand-group { min-width: 0; }

.brand span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .brand .brand-school { display: none; }
}

@media (max-width: 400px) {
  .brand span { font-size: 0.95rem; }
  .brand img { width: 32px !important; height: 32px !important; }
  .drawer-toggle-btn { width: 34px !important; height: 34px !important; }
}

/* --------------------------------------------------------------------------
   13. FEE / TERM YEAR NOTICE
   Restrained institutional note. Distinguishes the published historical
   schedule from current-year confirmation without altering any figure.
   -------------------------------------------------------------------------- */
.fee-year-notice {
  margin: 0 0 32px;
  padding: 20px 24px;
  border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--ember);
  border-radius: var(--radius);
  background: var(--paper-raised);
  max-width: 72ch;
}

.fee-year-notice p { margin: 0; color: var(--ink-soft); font-size: 0.96rem; line-height: 1.6; }
.fee-year-notice strong { color: var(--ink); font-weight: 600; }

.fee-year-actions { margin-top: 12px !important; display: flex; gap: 22px; flex-wrap: wrap; }
.fee-year-actions a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   14. LANGUAGE AVAILABILITY NOTICE
   Shown only when a non-English locale is active on an English-only
   institutional page.
   -------------------------------------------------------------------------- */
.lang-availability {
  background: var(--paper-sunk);
  border-bottom: 1px solid var(--rule);
  padding: 12px 0;
}

.lang-availability p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.lang-availability[hidden] { display: none; }