/* GENERATED by tools/build.py — edit css/salesianum.css, not this file */
/* ============================================================
   DAIDRA FOUNDATION — the quality floor every build starts from
   v1.0 · 2026-08-06 · sources: live-verified extractions in
   knowledge/websites-enterprise.md (Stripe et al.) + DESIGN.md

   HOW TO USE (per project):
   1. Copy this file into the project as the base of site.css.
   2. Skin ONLY the "BRAND SLOTS" block — fonts, hues, radius,
      heading weight. Everything below the slots is the standard;
      it should survive the skin untouched.
   3. The specimen page (index.html beside this file) shows every
      token and primitive in every state — rebuild it mentally
      against your skin before building pages.

   Rules encoded here (don't fight them):
   - Spacing lives on an 8px grid. Type lives on the clamp() scale.
   - Two easings, four durations. Nothing animates off-system.
   - Never `transition: all`. Hover moves ≥2 properties.
   - :focus-visible is a designed brand element, not a default.
   - Content never touches the viewport edge (--px gutter).
   - .section uses LONG-HAND padding (shorthand resets .wrap).
   - prefers-reduced-motion gets designed static states, not
     frozen half-animations.
   ============================================================ */

/* ----------------------------------------------------------
   1. BRAND SLOTS — the only block a project should edit
   ---------------------------------------------------------- */
:root {
  /* Type: one display face, one text face (or one variable font
     for both — preload it, font-display: block if <80KB). */
  --font-display: "Oswald", "Oswald Fallback", "Arial Narrow", sans-serif;
  --font-body: "Crimson Text", "Crimson Fallback", Georgia, serif;
  --font-mono: "Oswald", "Oswald Fallback", sans-serif;

  /* Enterprise voice = light-weight large type. 300–400 display
     weight reads expensive; 700 reads template. */
  --weight-display: 500;
  --weight-body: 400;
  --weight-medium: 500;   /* the heaviest weight most UIs need */

  /* Brand hues. --brand-h drives the neutral tint below — the
     single cheapest "expensive" trick: neutrals tinted toward the
     brand hue instead of pure gray. */
  --brand-h: 258;                       /* Salesianum navy #00275D = oklch(.286 .106 258) */
  --accent: #00275D;
  --accent-strong: #001A40;

  /* Geometry personality: 4px = precise/enterprise (Stripe),
     8-12px = friendly SaaS, 999px pills = consumer. Pick ONE. */
  --radius: 0px;
  --radius-lg: 0px;
}

/* ----------------------------------------------------------
   2. NEUTRALS — brand-tinted ramp (never pure gray)
   ---------------------------------------------------------- */
:root {
  --n-50:  oklch(0.985 0.004 var(--brand-h));
  --n-100: oklch(0.96  0.006 var(--brand-h));
  --n-200: oklch(0.91  0.008 var(--brand-h));
  --n-300: oklch(0.83  0.010 var(--brand-h));
  --n-500: oklch(0.60  0.020 var(--brand-h));
  --n-700: oklch(0.40  0.028 var(--brand-h));
  --n-900: oklch(0.25  0.030 var(--brand-h));
  --n-950: oklch(0.17  0.025 var(--brand-h));
}

/* ----------------------------------------------------------
   3. SEMANTIC COLOR + SECTION MODES
   Components consume ONLY these slots. Sections switch skin by
   mode class — components are never restyled per section.
   ---------------------------------------------------------- */
:root, .mode-light {
  --surface: #fff;
  --surface-2: var(--n-50);
  --text: var(--n-900);
  --text-2: var(--n-500);
  --line: var(--n-200);
  --link: var(--accent-strong);
}
.mode-tint {
  --surface: var(--n-50);
  --surface-2: #fff;
}
.mode-dark {
  --surface: var(--n-950);
  --surface-2: var(--n-900);
  --text: var(--n-50);
  --text-2: var(--n-300);
  --line: oklch(0.32 0.03 var(--brand-h));
  --link: oklch(0.75 0.12 var(--brand-h));
}

/* ----------------------------------------------------------
   4. SPACE — 8px grid + the edge gutter
   ---------------------------------------------------------- */
:root {
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-6: 48px; --s-8: 64px; --s-12: 96px; --s-16: 128px; --s-20: 160px;
  --px: clamp(24px, 5vw, 96px);        /* viewport edge gutter */
  --measure: 68ch;                      /* body copy max width */
  --wrap: 1200px;
}

/* ----------------------------------------------------------
   5. TYPE SCALE — clamp()-fluid, tracking tightens as size grows
   ---------------------------------------------------------- */
:root {
  --text-xs: 0.75rem;                               /* 12 — labels */
  --text-sm: 0.875rem;                              /* 14 — UI */
  --text-md: 1rem;                                  /* 16 — body */
  --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-2xl: clamp(2rem, 1.5rem + 2vw, 3rem);
  --text-hero: clamp(2.5rem, 1.75rem + 3.5vw, 4.5rem);
}

/* ----------------------------------------------------------
   6. MOTION — the closed system. Two easings, four durations.
   ---------------------------------------------------------- */
:root {
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);        /* easeOutQuart — default */
  --ease-inout: cubic-bezier(0.45, 0.05, 0.55, 0.95); /* panels, nav */
  --dur-1: 150ms;   /* feedback: press, toggle */
  --dur-2: 240ms;   /* hover, small reveals */
  --dur-3: 450ms;   /* panels, section transitions */
  --dur-4: 800ms;   /* card lifts, entrances */
  --stagger: 70ms;  /* sibling choreography interval */
}

/* ----------------------------------------------------------
   7. ELEVATION + FOCUS — designed, tokenized
   ---------------------------------------------------------- */
:root {
  --shadow-soft: 0 20px 40px -20px rgb(0 0 0 / 0.12);
  --shadow-lift: 0 32px 64px -24px rgb(0 0 0 / 0.18);
  --focus-ring: 0 0 0 3px oklch(0.55 0.19 var(--brand-h) / 0.18);
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius);
}

/* ----------------------------------------------------------
   8. BASE
   ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--text);
  background: var(--surface);
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: 1.1;
  margin: 0 0 var(--s-3);
  text-wrap: balance;
}
h1 { font-size: var(--text-hero); letter-spacing: -0.022em; line-height: 1.05; }
h2 { font-size: var(--text-2xl); letter-spacing: -0.018em; }
h3 { font-size: var(--text-xl); letter-spacing: -0.012em; }
h4 { font-size: var(--text-lg); letter-spacing: -0.008em; font-weight: var(--weight-medium); }
p { margin: 0 0 var(--s-2); max-width: var(--measure); text-wrap: pretty; }
img, svg, video { max-width: 100%; height: auto; display: block; }
/* UA margins on figure/blockquote (40px sides) shoved media past the phone edge and inflated cards —
   Bully's 2026-09-28, earlier TGA/Richardson review cards. Reset in the floor, never per project. */
figure, blockquote { margin: 0; }
/* UA stylesheets give form controls their own `font` shorthand, which resets
   font-variant-numeric for every descendant — Shaftesbury Glen 2026-10-01: a root
   lining-nums rule never reached the 18 hole labels inside <button> cards. */
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--link); }

/* Eyebrow / utility label — mono, tracked wide, the "instrument" voice */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* ----------------------------------------------------------
   9. LAYOUT — section + wrap (long-hand padding, always)
   ---------------------------------------------------------- */
.section {
  /* LONG-HAND on purpose: `padding: X 0` here silently resets
     .wrap's gutters when combined (documented failure). */
  padding-top: var(--s-12);
  padding-bottom: var(--s-12);
  background: var(--surface);
  color: var(--text);
}
.section--hero {
  min-height: 72vh;              /* never 100vh — next section peeks */
  display: flex;
  align-items: center;
}
.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-left: var(--px);
  padding-right: var(--px);
}

/* ----------------------------------------------------------
   10. PRIMITIVES — one spec each, reused verbatim on every page
   ---------------------------------------------------------- */

/* Button — asymmetric vertical padding (optical balance),
   transitions name their properties, hover moves ≥2. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 13px 24px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: var(--weight-medium) var(--text-md) / 1 var(--font-body);
  color: #fff;
  background: var(--accent);
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
}
.btn:hover, .btn:focus-visible {
  background: var(--accent-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}
.btn:active { transform: translateY(0); transition-duration: var(--dur-1); }
.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}
.btn--ghost:hover, .btn--ghost:focus-visible {
  background: var(--surface-2);
  border-color: var(--text-2);
  transform: translateY(-1px);
  box-shadow: none;
}
.btn[disabled] { opacity: 0.45; pointer-events: none; }

/* The one-variable hover engine — parent flips --hover, children
   consume it. Focus replays the full hover choreography for free. */
.hoverable { --hover: 0; }
.hoverable:hover, .hoverable:focus-visible, .hoverable:focus-within { --hover: 1; }

/* Link-arrow — title + arrow whose shaft draws in on hover */
.link-arrow {
  --hover: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--weight-medium);
  color: var(--link);
  text-decoration: none;
}
.link-arrow:hover, .link-arrow:focus-visible { --hover: 1; }
.link-arrow .arrow { transition: transform var(--dur-2) var(--ease-out); }
.link-arrow .arrow .shaft {
  opacity: var(--hover);
  transition: opacity var(--dur-2) var(--ease-out);
}
.link-arrow:hover .arrow, .link-arrow:focus-visible .arrow { transform: translateX(3px); }

/* Card — soft negative-spread shadow, lift on hover */
.card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s-4);
  transition:
    transform var(--dur-4) var(--ease-out),
    box-shadow var(--dur-4) var(--ease-out),
    border-color var(--dur-2) var(--ease-out);
}
.card:hover, .card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: var(--n-300);
}
.card > :last-child { margin-bottom: 0; }

/* Stat — big number, smaller unit, mono label underneath */
.stat { display: grid; gap: 4px; }
.stat b {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-display);
  letter-spacing: -0.018em;
  line-height: 1;
}
.stat b small { font-size: 0.55em; font-weight: var(--weight-medium); }
.stat .eyebrow { margin-top: 2px; }

/* Dom-graphic scaffold — product UI as scaled live HTML.
   Design the mock at a fixed px width, scale the block. */
.dom-graphic {
  --gw: 320px;        /* design width */
  --gs: 1;            /* scale (set per placement / media query) */
  width: calc(var(--gw) * var(--gs));
  pointer-events: none;
  user-select: none;
}
.dom-graphic > .dg-frame {
  width: var(--gw);
  transform: scale(var(--gs));
  transform-origin: top left;
}

/* ----------------------------------------------------------
   11. REVEAL CHOREOGRAPHY — IO adds .in; siblings stagger.
   JS contract (site.js):
     const io = new IntersectionObserver(es => es.forEach(e => {
       if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); }
     }), { threshold: 0.15, rootMargin: '0px 0px -8% 0px' });
     document.querySelectorAll('.reveal').forEach(el => io.observe(el));
   Fail-safe: .reveal without JS must still be readable — the
   `no-js` class (set in <head>, removed by JS) keeps opacity 1.
   ---------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-4) var(--ease-out),
    transform var(--dur-4) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ----------------------------------------------------------
   12. REDUCED MOTION — designed static states, not freezes
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .btn--ghost, .card, .link-arrow .arrow, .link-arrow .arrow .shaft {
    transition: none;
  }
  .card:hover { transform: none; }
  .btn:hover { transform: none; }
  /* Per-project: every animated signature block MUST add its own
     designed fallback here (static frame, final state, or swap-in
     element) — never leave it half-animated. */
}


/* ===== DAIDRA elements.css ===== */
/* ============================================================
   DAIDRA ELEMENTS — the reusable section/element library.
   Elementor-style reuse, engineered: include AFTER foundation.css
   and the project's brand-slot skin. Every element consumes only
   foundation tokens (--accent, --green, --paper, --navy, --s-*,
   --dur-*, easings) so one skin restyles the whole library.
   Behaviors attach from elements.js by class contract (README.md).
   Advanced-CSS register: masks, conic gradients, blend modes,
   clip-path chrome, pointer-var lighting. 2026-08-07.
   ============================================================ */

/* Library-local slots with safe fallbacks (projects override) */
:root {
  --el-ink: var(--ink, #16181d);
  --el-navy: var(--navy, #0b1826);
  --el-green: var(--green, #58b765);
  --el-paper: var(--paper, #fbfaf7);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout-hard: cubic-bezier(0.83, 0, 0.17, 1);
}

/* ============ el-aurora — canvas mesh field ============ */
.el-aurora {
  position: absolute; inset: 0; width: 100%; height: 100%;
  --el-aurora-1: var(--accent); --el-aurora-2: var(--el-green);
  --el-aurora-3: #2a6fb8;
  filter: blur(60px) saturate(1.15);
  opacity: 0.85;
  pointer-events: none;
}

/* ============ el-marquee — infinite ticker ============ */
.el-marquee { overflow: hidden; position: relative; }
.el-marquee-track {
  display: flex; align-items: center; gap: var(--s-8);
  width: max-content;
  animation: el-mq var(--el-mq-dur, 30s) linear infinite;
}
.el-marquee:hover .el-marquee-track { animation-play-state: paused; }
@keyframes el-mq { to { transform: translateX(-50%); } }
.el-marquee--fade {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* photo strip variant */
.el-marquee--photos .el-marquee-track { gap: var(--s-2); }
.el-marquee--photos img {
  height: clamp(160px, 22vw, 260px); width: auto; border-radius: var(--radius-lg);
  object-fit: cover; aspect-ratio: 3/2;
}

/* ============ el-orbit — rotating arc ring (SVG) ============ */
.el-orbit { animation: el-spin 60s linear infinite; transform-origin: center; }
.el-orbit--rev { animation-direction: reverse; animation-duration: 90s; }
@keyframes el-spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .el-orbit, .el-marquee-track { animation: none !important; }
}

/* ============ el-shine — pointer-lit card ============ */
.el-shine { position: relative; --mx: 50%; --my: 50%; }
.el-shine::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: radial-gradient(220px circle at var(--mx) var(--my),
    rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.06) 45%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity var(--dur-2) var(--ease-out);
}
.el-shine:hover::before, .el-shine:focus-within::before { opacity: 1; }
.el-shine::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(340px circle at var(--mx) var(--my),
    rgb(255 255 255 / 0.08), transparent 60%);
  opacity: 0; transition: opacity var(--dur-2) var(--ease-out);
}
.el-shine:hover::after, .el-shine:focus-within::after { opacity: 1; }

/* ============ el-glow — cursor glow for dark sections ============ */
.el-glow { position: relative; --gx: 50%; --gy: 40%; }
.el-glow > .el-glow-layer {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(520px circle at var(--gx) var(--gy),
    rgb(88 183 101 / 0.10), rgb(1 90 163 / 0.07) 45%, transparent 70%);
  transition: opacity var(--dur-3) var(--ease-out);
}
@media (hover: none) { .el-glow > .el-glow-layer { display: none; } }

/* ============ el-magnetic — cursor-lean CTA ============ */
.el-magnetic { transition: transform var(--dur-2) var(--ease-out); will-change: transform; }

/* ============ el-notch-panel — Terminal tab-notch media panel ==== */
.el-notch { position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.el-notch::before {
  content: ""; position: absolute; top: 0; right: 48px; z-index: 3;
  width: 120px; height: 14px; background: var(--el-notch-bg, var(--el-paper));
  border-radius: 0 0 12px 12px;
}

/* ============ el-knockout — photo etched through display type ==== */
.el-knockout {
  background-image: var(--el-knockout-img);
  background-size: cover; background-position: center;
  -webkit-background-clip: text; background-clip: text;
  color: rgb(255 255 255 / 0.14);
  filter: drop-shadow(0 2px 24px rgb(0 0 0 / 0.35));
}
@supports not (background-clip: text) { .el-knockout { color: #fff; } }

/* ============ el-grain — feTurbulence paper/film grain ============ */
.el-grain { position: relative; }
.el-grain::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.14 0 0 0 0 0.12 0 0 0 0 0.13 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ el-ghost-mark — viewport-scale watermark ============ */
.el-ghost-mark {
  position: absolute; left: 50%; bottom: -0.24em; transform: translateX(-50%);
  z-index: 1; pointer-events: none; user-select: none;
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: 12.2vw; line-height: 1; letter-spacing: -0.01em;
  color: var(--el-ghost-color, rgb(143 193 234 / 0.07)); white-space: nowrap;
}

/* ============ el-dive — split whole-panel CTA pair ============ */
.el-dive { display: grid; grid-template-columns: 1fr 1fr; }
.el-dive a {
  display: flex; align-items: center; gap: var(--s-3);
  padding: clamp(48px, 7vw, 96px) var(--px);
  text-decoration: none; color: #fff;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  transition: background-color var(--dur-3) var(--ease-out);
}
.el-dive a:first-child { background: var(--accent); }
.el-dive a:first-child:hover, .el-dive a:first-child:focus-visible { background: var(--accent-strong); }
.el-dive a:last-child { background: var(--el-ink); }
.el-dive a:last-child:hover, .el-dive a:last-child:focus-visible { background: #000; }
.el-dive .darr { flex: none; transition: transform var(--dur-3) var(--ease-out); }
.el-dive a:hover .darr, .el-dive a:focus-visible .darr { transform: translate(6px, 6px); }
@media (max-width: 860px) { .el-dive { grid-template-columns: 1fr; } }

/* ============ el-chip-pill — mono chip (nav/filters) ============ */
.el-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px 11px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; color: var(--el-ink);
  background: #fff; border: 1px solid rgb(0 0 0 / 0.14);
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-out);
}
.el-chip:hover, .el-chip:focus-visible { border-color: var(--accent); transform: translateY(-1px); }
.el-chip--green { background: var(--el-green); border-color: var(--el-green); color: #06250c; }
.el-chip[aria-pressed="true"] { background: var(--el-green); border-color: var(--el-green); color: #06250c; }

/* ============ el-metric-chip — floating stat chip ============ */
.el-metric {
  display: inline-flex; flex-direction: column; gap: 2px;
  padding: 14px 20px; border-radius: var(--radius-lg);
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.16);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: #fff;
  box-shadow: 0 24px 48px -24px rgb(0 0 0 / 0.5);
}
.el-metric b {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1; letter-spacing: -0.02em;
}
.el-metric b sup { font-size: 0.55em; font-weight: 500; }
.el-metric .micro { color: rgb(255 255 255 / 0.65); }

/* ============ el-ring-conic — conic progress ring ============ */
.el-ring-conic {
  border-radius: 50%;
  background:
    radial-gradient(closest-side, var(--el-rc-hole, var(--el-navy)) 79%, transparent 80% 100%),
    conic-gradient(var(--el-green) calc(var(--p, 0) * 1%), rgb(255 255 255 / 0.12) 0);
}

/* ============ el-mosaic — two-row photo marquee band ============ */
.el-mosaic { display: grid; gap: var(--s-2); }

/* ============ el-quote-ghost — testimonial w/ giant glyph ======== */
.el-quote-ghost { position: relative; }
.el-quote-ghost::before {
  content: "\201C"; position: absolute; top: -0.18em; left: -0.06em;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(8rem, 18vw, 16rem); line-height: 1;
  color: var(--accent); opacity: 0.08; pointer-events: none;
}

/* ============ Scene stepping visuals (used with [data-el-scene]) == */
.el-scene .svc-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transform: scale(1.04);
  transition: opacity 700ms var(--ease-out-expo), transform 900ms var(--ease-out-expo);
}
.el-scene .svc-media img.active { opacity: 1; transform: scale(1); }
.el-scene .svc-desc { position: relative; }
.el-scene .svc-desc p {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; transform: translateY(10px);
  transition: opacity 500ms var(--ease-out-expo), transform 500ms var(--ease-out-expo);
}
.el-scene .svc-desc p.active { opacity: 1; transform: none; }
.el-scene .scene-bar { height: 2px; overflow: hidden; }
.el-scene .scene-bar i { display: block; height: 100%; background: var(--el-green); transform-origin: left; transform: scaleX(0); }

/* ============ Reduced motion: designed static states ============ */
@media (prefers-reduced-motion: reduce) {
  .el-shine::before, .el-shine::after, .el-glow > .el-glow-layer { display: none; }
  .el-magnetic { transition: none; }
  .el-scene .svc-media img, .el-scene .svc-desc p { transition: none; }
}

/* ============ el-field — branded form controls (input/select/textarea) ==== */
/* Contract: <div class="el-field"><label for=X>…</label><input|select|textarea id=X>
   <span class="el-field-err">message</span></div>. Add .err on the wrapper to show
   the error state. Selects get a token-colored SVG chevron (appearance:none);
   labels tint to --accent on focus-within. Never ship native-chrome fields. */
.el-field { display: grid; gap: 6px; }
.el-field label {
  font-size: var(--text-sm); font-weight: 700; color: var(--el-ink, var(--ink, #232830));
  transition: color var(--dur-2) var(--ease-out);
}
.el-field:focus-within label { color: var(--accent); }
.el-field input, .el-field select, .el-field textarea {
  border: 1px solid var(--n-300, #C5CAD3); border-radius: var(--radius);
  padding: 12px 14px; font: 400 var(--text-md) var(--font-body);
  color: var(--el-ink, var(--ink, #232830));
  background: #fff; width: 100%; min-height: 48px;
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.el-field input:hover, .el-field select:hover, .el-field textarea:hover {
  border-color: color-mix(in oklab, var(--accent) 45%, #fff);
}
.el-field input::placeholder, .el-field textarea::placeholder { color: #7A8398; }
.el-field select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  /* chevron inherits --accent via mask so it always matches the skin */
  background-image: none; padding-right: 40px; position: relative;
}
.el-field .el-field-sel { position: relative; }
.el-field .el-field-sel::after {
  content: ""; position: absolute; right: 14px; top: 50%;
  width: 12px; height: 8px; transform: translateY(-50%);
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 8px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 8px no-repeat;
  pointer-events: none;
}
.el-field textarea { resize: vertical; min-height: 120px; }
.el-field input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px #fff inset;
  -webkit-text-fill-color: var(--el-ink, var(--ink, #232830));
}
.el-field input:focus, .el-field select:focus, .el-field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--focus-ring);
}
.el-field.err input, .el-field.err select { border-color: var(--el-red, #D33); }
.el-field.err input:focus, .el-field.err select:focus {
  border-color: var(--el-red, #D33);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--el-red, #D33) 15%, transparent);
}
.el-field .el-field-err { display: none; font-size: var(--text-xs); color: var(--el-red, #D33); }
.el-field.err .el-field-err { display: block; }

/* ── el-device: scrolling site-in-frame mockups (desktop browser + phone) ──
   Origin: sharkdig.com case studies 2026-08-11. Feed each viewport a full-page
   capture (desktop ~1200w, mobile 390w@2x). Frames are user-scrollable. */
.el-device-pair { display: grid; grid-template-columns: minmax(0,1fr) 292px; gap: clamp(18px,2.5vw,28px); align-items: stretch; }
.el-browser { border: 1px solid var(--rule, #dde4ee); border-radius: 12px; overflow: hidden; box-shadow: 0 24px 60px -30px rgba(6,27,49,.4); }
.el-browser .bar { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; background: var(--card, #fff); border-bottom: 1px solid var(--rule, #dde4ee); }
.el-browser .bar i { width: 11px; height: 11px; border-radius: 50%; background: #d3dce8; }
.el-browser .view { height: clamp(420px,62vh,640px); overflow-y: auto; overflow-x: hidden; background: var(--card, #fff); -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
.el-browser .view img { display: block; width: 100%; height: auto; }
.el-phone { position: relative; display: flex; flex-direction: column; height: calc(clamp(420px,62vh,640px) + 40px); border: 10px solid #10151d; border-radius: 44px; background: #10151d; box-shadow: 0 24px 60px -30px rgba(6,27,49,.5), inset 0 0 0 2px rgba(255,255,255,.06); }
.el-phone::before { content: ""; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 86px; height: 22px; border-radius: 12px; background: #10151d; z-index: 3; }
.el-phone .view { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; background: var(--card, #fff); border-radius: 34px; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; scrollbar-width: none; }
.el-phone .view::-webkit-scrollbar { display: none; }
.el-phone .view img { display: block; width: 100%; height: auto; }
@media (max-width: 880px) {
  .el-device-pair { grid-template-columns: 1fr; }
  .el-phone { width: min(320px,82vw); height: 560px; margin: 0 auto; }
}

/* ============ el-menu — mobile navigation drawer, done right (2026-09-16) ============
   Born from Beach Bookshop: a fixed #menu INSIDE a header with backdrop-filter was
   positioned against the header (filters create containing blocks), so it opened
   40px low, then rendered with negative height and "didn't work" on X's phone.
   Contract (markup lives OUTSIDE <header>):
     <button class="chrome-burger" aria-expanded="false" aria-controls="menu" aria-label="Open menu"><span></span></button>
     <dialog id="menu" class="el-menu" aria-label="Menu">
       <div class="el-menu-bar"><a class="brand" href="/">…</a><button class="el-menu-close" aria-label="Close menu"></button></div>
       <nav class="el-menu-nav"><ol><li><a href>…</a></li>…</ol></nav>
       <div class="el-menu-foot">…hours / address / CTAs / socials…</div>
     </dialog>
   Engine (elements.js): showModal() → top layer (immune to z-index, overflow, filter
   containing blocks); iOS-proof scroll lock; Esc/backdrop/link/resize close; focus in
   and back to the burger; staggered link rise via --i. Slots: --el-menu-bg, --el-menu-fg,
   --el-menu-accent, --el-menu-bp (px, close when the viewport grows past it). */
.el-menu { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--el-menu-bg, var(--el-navy)); color: var(--el-menu-fg, #fff); overflow: auto; -webkit-overflow-scrolling: touch;
  opacity: 0; transition: opacity var(--dur-3, 450ms) var(--ease-out, ease); }
.el-menu[open] { display: grid; grid-template-rows: auto 1fr auto; }
.el-menu.in { opacity: 1; }
.el-menu::backdrop { background: transparent; }
html.el-menu-lock { overflow: hidden; }
html.el-menu-lock body { position: fixed; width: 100%; overflow: hidden; }
.el-menu-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 76px; padding: 0 var(--px, 20px); }
.el-menu-bar .brand { min-height: 48px; display: inline-flex; align-items: center; }
.el-menu-close { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgb(255 255 255 / 0.22); background: rgb(255 255 255 / 0.06); color: inherit; cursor: pointer; position: relative; flex: none; }
.el-menu-close::before, .el-menu-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); }
.el-menu-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.el-menu-nav { padding: 8px var(--px, 20px) 24px; align-self: center; }
.el-menu-nav ol { list-style: none; margin: 0; padding: 0; counter-reset: m; }
.el-menu-nav li { counter-increment: m; border-bottom: 1px solid rgb(255 255 255 / 0.12); }
.el-menu-nav a { display: grid; grid-template-columns: 2.4ch minmax(0, 1fr) auto; align-items: baseline; gap: 12px; min-height: 60px; padding: 14px 0; color: inherit; text-decoration: none;
  font-family: var(--font-display); font-weight: var(--weight-display, 500); font-size: clamp(1.75rem, 7.5vw, 2.6rem); line-height: 1; letter-spacing: -0.02em;
  opacity: 0; transform: translateY(14px); transition: opacity var(--dur-3, 450ms) var(--ease-out, ease), transform var(--dur-3, 450ms) var(--ease-out, ease); transition-delay: calc(80ms + var(--i, 0) * 55ms); }
.el-menu-nav a::before { content: counter(m, decimal-leading-zero); font-family: var(--font-body); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; color: var(--el-menu-accent, var(--accent)); align-self: center; }
.el-menu-nav a::after { content: "\2192"; font-family: var(--font-body); font-size: 1.1rem; color: var(--el-menu-accent, var(--accent)); opacity: 0.7; align-self: center; }
.el-menu-nav a[aria-current="page"] { color: var(--el-menu-accent, var(--accent)); }
.el-menu.in .el-menu-nav a { opacity: 1; transform: none; }
.el-menu-foot { padding: 20px var(--px, 20px) max(28px, env(safe-area-inset-bottom)); border-top: 1px solid rgb(255 255 255 / 0.12); display: grid; gap: 16px; font-size: 0.9375rem;
  opacity: 0; transform: translateY(10px); transition: opacity var(--dur-3, 450ms) var(--ease-out, ease) 420ms, transform var(--dur-3, 450ms) var(--ease-out, ease) 420ms; }
.el-menu.in .el-menu-foot { opacity: 1; transform: none; }
.el-menu-foot .el-menu-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.el-menu-foot .el-menu-ctas .btn { justify-content: center; }
.el-menu-foot .el-menu-meta { display: grid; gap: 4px; color: rgb(255 255 255 / 0.78); }
.el-menu-foot .el-menu-meta b { color: var(--el-menu-accent, var(--accent)); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; font-family: var(--font-body); }
.el-menu-foot a { color: inherit; }
@media (prefers-reduced-motion: reduce) {
  .el-menu, .el-menu-nav a, .el-menu-foot { transition: none; }
  .el-menu[open] { opacity: 1; } .el-menu[open] .el-menu-nav a, .el-menu[open] .el-menu-foot { opacity: 1; transform: none; }
}

/* ============ el-summon — hover-intent card (2026-09-16) ============
   `.summon-host` > `[data-summon]` + `.summon`. The card is hidden by transform/opacity/
   visibility, becomes interactive when `.on`, and carries an invisible bridge above it
   so the pointer can cross the gap from the trigger without "leaving". Engine: elements.js. */
.summon { --el-summon-grace: 420; position: absolute; z-index: 30; opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform var(--dur-3, 450ms) var(--ease-out, ease), opacity var(--dur-3, 450ms) var(--ease-out, ease), visibility 0s linear var(--dur-3, 450ms); }
.summon.on { opacity: 1; visibility: visible; pointer-events: auto; transition: transform var(--dur-3, 450ms) var(--ease-out, ease), opacity var(--dur-3, 450ms) var(--ease-out, ease); }
.summon::before { content: ""; position: absolute; left: -24px; right: -24px; top: -28px; height: 28px; }
@media (hover: none), (pointer: coarse) { .summon { display: none; } }
@media (prefers-reduced-motion: reduce) { .summon { transition: none; } }


/* ===== salesianum.css ===== */
/* ============================================================
   SALESIANUM — brand + page layer (sits on foundation + elements)
   References: loyola.edu / upenn.edu / jhu.edu (rsmi.md, motion.md)
   Heritage: salesianum.org navy/gold, Oswald + Crimson Text,
   the slanted panel and the gold corner notch.
   Micro-gesture (every page): Oswald head with ONE Crimson italic
   phrase (.h-mix em) + eyebrow led by a gold slanted tick.
   Signature (one per site): the Virtue Blade — scroll-driven
   slanted wipe with a gold blade on its leading edge.
   ============================================================ */

/* ---------- metric-matched fallbacks (kill swap CLS) ---------- */
@font-face { font-family: "Oswald Fallback"; src: local("Arial Narrow"), local("Arial"); size-adjust: 81%; ascent-override: 148%; descent-override: 36%; }
@font-face { font-family: "Crimson Fallback"; src: local("Georgia"); size-adjust: 88%; ascent-override: 104%; descent-override: 26%; }

:root {
  /* brand palette — measured from salesianum.org computed styles 2026-10-04 */
  --navy: #00275D;          /* 14.5:1 on white */
  --navy-deep: #001A40;     /* footer / numbers band */
  --navy-2: #0B3473;        /* raised navy surfaces */
  --gold: #FFD559;          /* FILL + text on navy only (10.3:1 on --navy) */
  --gold-deep: #E8B931;     /* gold hover fill; 7.9:1 on --navy */
  --gold-ink: #7A5900;      /* gold as TEXT on light surfaces — 6.45:1 on white, 6.0:1 on --paper */
  --paper: #F6F7FA;         /* light tint section */
  --ink-2: #5B6B85;         /* muted text on white — 5.4:1 (small text OK) */
  --on-navy-2: #C9D3E6;     /* muted text on navy — 9.6:1 */

  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.14);  /* JHU rail overshoot — tabs only */
  --ease-blade: cubic-bezier(0.65, 0, 0.35, 1);           /* virtue wipe settle */
  --head-h: 88px;
  --util-h: 38px;
  --slant: 7%;              /* the Salesianum slant, as a share of panel width */
  --notch: 12px;            /* gold corner notch on buttons */
}

/* ---------- base overrides on the skinned foundation ---------- */
html { scroll-padding-top: calc(var(--head-h) + 16px); }
body { font-size: 1.1875rem; line-height: 1.55; font-variant-numeric: lining-nums; overflow-x: clip; }
h1, h2, h3, h4 { font-weight: 500; text-transform: none; }
h2 { font-size: clamp(2rem, 1.35rem + 2.2vw, 3rem); line-height: 1.04; letter-spacing: -0.01em; }
h3 { font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem); line-height: 1.12; letter-spacing: 0; }
p { max-width: 62ch; }
.wrap { --wrap: 1280px; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--gold); color: var(--navy); padding: 12px 18px; font: 500 0.875rem/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: top var(--dur-2) var(--ease-out); }
.skip:focus-visible { top: 12px; }
.mode-dark :focus-visible, .on-dark :focus-visible { outline-color: var(--gold); box-shadow: 0 0 0 3px rgb(255 213 89 / .25); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- micro-gesture: mixed-face heads + slanted-tick eyebrow ---------- */
.h-mix em { font-family: var(--font-body); font-style: italic; font-weight: 600; letter-spacing: -0.01em; color: var(--gold-ink); }
.mode-dark .h-mix em, .on-dark .h-mix em { color: var(--gold); }
.eyebrow { font-family: var(--font-display); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.16em; line-height: 1.5; color: var(--gold-ink); display: block; margin: 0 0 var(--s-2); max-width: 46ch; }
.eyebrow::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 12px; vertical-align: -1px; background: currentColor; clip-path: polygon(40% 0, 100% 0, 60% 100%, 0 100%); }
.mode-dark .eyebrow, .on-dark .eyebrow { color: var(--gold); }

/* ---------- buttons: square, gold corner notch (salesianum.org heritage) ---------- */
.btn { position: relative; border-radius: 0; font: 500 0.9375rem/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; padding: 17px 26px 18px 30px; background: var(--navy); color: #fff; border: 1px solid var(--navy); isolation: isolate;
  transition: background-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.btn::before { content: ""; position: absolute; left: -1px; top: -1px; width: var(--notch); height: var(--notch); background: var(--gold); clip-path: polygon(0 0, 100% 0, 0 100%); transition: width var(--dur-2) var(--ease-out), height var(--dur-2) var(--ease-out); }
.btn:hover, .btn:focus-visible { background: var(--navy-deep); transform: translateY(-2px); box-shadow: 0 18px 30px -16px rgb(0 26 64 / .55); }
.btn:hover::before, .btn:focus-visible::before { width: 18px; height: 18px; }
.btn:active { transform: translateY(0); box-shadow: none; transition-duration: var(--dur-1); }
.btn .ico { width: 18px; height: 18px; transition: transform var(--dur-2) var(--ease-out); }
.btn:hover .ico, .btn:focus-visible .ico { transform: translateX(3px); }
.btn--gold { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.btn--gold::before { background: var(--navy); }
.btn--gold:hover, .btn--gold:focus-visible { background: var(--gold-deep); color: var(--navy-deep); }
.btn--line { background: transparent; color: var(--navy); border-color: rgb(0 39 93 / .35); }
.btn--line:hover, .btn--line:focus-visible { background: var(--navy); color: #fff; border-color: var(--navy); }
.on-dark .btn--line, .mode-dark .btn--line { color: #fff; border-color: rgb(255 255 255 / .4); }
.on-dark .btn--line:hover, .mode-dark .btn--line:hover, .on-dark .btn--line:focus-visible { background: #fff; color: var(--navy); border-color: #fff; }
.btn[disabled], .btn.is-loading { opacity: .5; pointer-events: none; }

.link-arrow { font: 500 0.875rem/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); gap: 10px; padding: 10px 0; position: relative; }
.link-arrow::after { content: ""; position: absolute; left: 0; right: 28px; bottom: 2px; height: 2px; background: var(--gold); transform: scaleX(calc(.25 + var(--hover) * .75)); transform-origin: left; transition: transform var(--dur-2) var(--ease-out); }
.link-arrow .ico { width: 18px; height: 18px; transition: transform var(--dur-2) var(--ease-out); }
.link-arrow:hover .ico, .link-arrow:focus-visible .ico { transform: translateX(4px); }
.on-dark .link-arrow, .mode-dark .link-arrow { color: #fff; }

/* ---------- utility bar + header (Penn two-tier; condenses on scroll) ---------- */
.site-head { position: fixed; inset: 0 0 auto 0; z-index: 60; color: #fff; background-color: rgb(0 26 64 / .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transform: translateY(0); transition: transform var(--dur-3) var(--ease-inout), background-color var(--dur-3) var(--ease-inout), box-shadow var(--dur-3) var(--ease-inout); }
.site-head::before { content: ""; position: absolute; inset: 0 0 -60px 0; background: linear-gradient(180deg, rgb(0 18 45 / .78), rgb(0 18 45 / 0)); pointer-events: none; transition: opacity var(--dur-3) var(--ease-inout); }
.util { position: relative; height: var(--util-h); background: rgb(0 18 45 / .5); border-bottom: 1px solid rgb(255 255 255 / .12); }
.util .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.util-note { font: 400 0.8125rem/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-navy-2); margin: 0; max-width: none; }
.util-note b { color: var(--gold); font-weight: 500; }
.util nav { display: flex; gap: 22px; }
.util nav a { font: 400 0.8125rem/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: #fff; text-decoration: none; padding: 12px 0; opacity: .86; transition: opacity var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.util nav a:hover, .util nav a:focus-visible { opacity: 1; color: var(--gold); }
.head-main { position: relative; height: var(--head-h); }
.head-main .wrap { height: 100%; display: flex; align-items: center; gap: 32px; }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 48px; }
.brand img { height: 46px; width: auto; transition: height var(--dur-3) var(--ease-inout); }
.nav { display: flex; align-items: stretch; height: 100%; margin-left: auto; }
.nav > .summon-host { position: static; display: flex; }
.nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; height: 100%; font: 500 1rem/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: #fff; text-decoration: none; position: relative; background: none; border: 0; cursor: pointer; }
.nav-link .chev { width: 14px; height: 14px; transition: transform var(--dur-2) var(--ease-out); }
.nav-link[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav-link::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 22px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-2) var(--ease-out); }
.nav-link:hover::after, .nav-link:focus-visible::after, .nav-link[aria-expanded="true"]::after { transform: scaleX(1); }
.head-search { position: relative; display: flex; align-items: center; }
.head-search input { width: 150px; height: 42px; padding: 0 14px 0 38px; border: 1px solid rgb(255 255 255 / .35); background: rgb(255 255 255 / .08); color: #fff; font: 400 1rem/1 var(--font-body); border-radius: 0; transition: width var(--dur-3) var(--ease-out), background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
.head-search input::placeholder { color: rgb(255 255 255 / .82); }
.head-search input:focus { width: 260px; outline: none; background: #fff; color: var(--navy); border-color: var(--gold); }
.head-search input:focus::placeholder { color: var(--ink-2); }
.head-search .ico { position: absolute; left: 12px; width: 18px; height: 18px; pointer-events: none; color: currentColor; }
.head-search:focus-within .ico { color: var(--navy); }
.search-results { position: absolute; top: calc(100% + 8px); right: 0; width: 380px; max-height: 420px; overflow: auto; background: #fff; color: var(--navy); box-shadow: 0 30px 60px -20px rgb(0 26 64 / .45); border-top: 3px solid var(--gold); padding: 8px 0; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.search-results.on { opacity: 1; transform: none; pointer-events: auto; }
.search-results a { display: grid; gap: 2px; padding: 12px 18px; text-decoration: none; color: var(--navy); transition: background-color var(--dur-1) var(--ease-out); }
.search-results a:hover, .search-results a:focus-visible, .search-results a.kb { background: var(--paper); }
.search-results a b { font: 500 1rem/1.2 var(--font-display); letter-spacing: .02em; }
.search-results a small { font: 400 .875rem/1.3 var(--font-body); color: var(--ink-2); }
.search-results .none { padding: 14px 18px; color: var(--ink-2); font-size: 1rem; margin: 0; }
.give { flex: 0 0 auto; min-width: max-content; }
.chrome-burger { display: none; margin-left: auto; width: 48px; height: 48px; border: 1px solid rgb(255 255 255 / .62); background: transparent; color: #fff; cursor: pointer; align-items: center; justify-content: center; transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); }
.chrome-burger:hover, .chrome-burger:focus-visible { background: rgb(255 255 255 / .12); border-color: var(--gold); }
.chrome-burger .ico { width: 24px; height: 24px; }

.site-head.is-solid { transform: translateY(calc(var(--util-h) * -1)); background: var(--navy); box-shadow: 0 10px 30px -18px rgb(0 0 0 / .6); }
.site-head.is-solid::before { opacity: 0; }
.site-head.is-solid .brand img { height: 40px; }

/* mega panels (el-summon) */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; color: var(--navy); border-top: 3px solid var(--gold); box-shadow: 0 40px 80px -30px rgb(0 26 64 / .5); opacity: 0; pointer-events: none; transition: opacity var(--dur-2) var(--ease-out); }
.mega.on { opacity: 1; pointer-events: auto; }
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -26px; height: 24px; }
.mega-inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr) minmax(0, 1.2fr); gap: var(--s-6); padding-top: var(--s-6); padding-bottom: var(--s-6); transform: translateY(-8px); transition: transform var(--dur-3) var(--ease-out); }
.mega.on .mega-inner { transform: none; }
.mega-intro h2 { font-size: 2rem; margin-bottom: var(--s-2); }
.mega-intro p { font-size: 1.0625rem; color: var(--ink-2); }
.mega-intro h2 a { color: inherit; text-decoration: none; background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 2px no-repeat; transition: background-size var(--dur-3) var(--ease-out); }
.mega-intro h2 a:hover, .mega-intro h2 a:focus-visible { background-size: 100% 2px; }
.mega-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 32px; align-content: start; list-style: none; margin: 0; padding: 0; }
.mega-cols a { display: block; padding: 11px 0; border-bottom: 1px solid var(--n-200); font: 500 1.0625rem/1.25 var(--font-display); letter-spacing: .02em; color: var(--navy); text-decoration: none; transition: color var(--dur-1) var(--ease-out), padding-left var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
.mega-cols a:hover, .mega-cols a:focus-visible { color: var(--gold-ink); border-color: var(--gold); padding-left: 8px; }
.mega-cols .sub { padding-left: 14px; font-weight: 400; font-size: 1rem; }
.mega-feature { display: block; text-decoration: none; color: var(--navy); }
.mega-feature figure { aspect-ratio: 4 / 3; overflow: hidden; clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%); }
.mega-feature img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform var(--dur-4) var(--ease-out); }
.mega-feature:hover img, .mega-feature:focus-visible img { transform: scale(1.07); }
.mega-feature span { display: block; margin-top: 12px; font: 500 .875rem/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; }

/* ---------- right action rail (JHU french fries → Salesianum Inquire/Visit/Give) ---------- */
.rail { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 55; display: grid; gap: 6px; list-style: none; margin: 0; padding: 0; }
.rail a { display: flex; align-items: center; gap: 10px; min-width: 132px; padding: 13px 18px 13px 16px; background: var(--navy); color: #fff; text-decoration: none; font: 500 0.875rem/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; box-shadow: inset 4px 0 0 var(--gold), -8px 10px 24px -14px rgb(0 0 0 / .55);
  transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); }
.rail a .ico { width: 18px; height: 18px; color: var(--gold); }
.rail a:hover, .rail a:focus-visible { transform: translateX(-12px); background: var(--navy-2); box-shadow: inset 8px 0 0 var(--gold), -12px 14px 28px -14px rgb(0 0 0 / .6); }
.rail a:active { transform: translateX(-6px); transition-duration: var(--dur-1); }

/* ---------- hero: film + mixed H1 (Loyola video, JHU two-tone, Penn bottom-left) ---------- */
.hero { position: relative; min-height: max(600px, 78vh); display: flex; align-items: flex-end; color: #fff; background: var(--navy-deep); overflow: hidden; isolation: isolate; }
.hero-media, .hero-media video, .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-media { z-index: -2; background: var(--navy-deep) url("../assets/video/salesianum-home-film-poster.jpg") 50% 40% / cover no-repeat; }
.hero-media video { opacity: 0; transition: opacity var(--dur-4) var(--ease-out); }
.hero-media video.playing { opacity: 1; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgb(0 18 45 / .9) 0%, rgb(0 18 45 / .74) 34%, rgb(0 18 45 / .2) 62%, rgb(0 18 45 / 0) 78%),
  linear-gradient(0deg, rgb(0 18 45 / .8) 0%, rgb(0 18 45 / 0) 50%); }
.hero-copy { position: relative; padding-bottom: clamp(150px, 15vw, 210px); padding-top: calc(var(--head-h) + var(--util-h) + 48px); width: 100%; }
.hero-h1 .eyebrow { display: block; color: var(--gold); text-shadow: 0 1px 12px rgb(0 0 0 / .5); text-transform: uppercase; font-size: 0.8125rem; line-height: 1.5; letter-spacing: .16em; margin-bottom: var(--s-3); max-width: 46ch; }
.hero-h1 { font-size: clamp(2.75rem, 1.5rem + 4.4vw, 4.5rem); line-height: .98; letter-spacing: -0.005em; font-weight: 500; text-transform: uppercase; max-width: 15ch; margin-bottom: var(--s-2); text-shadow: 0 2px 30px rgb(0 0 0 / .35); }
.hero-h1 .ln { display: block; }
.hero-h1 em { display: block; font-family: var(--font-body); font-style: italic; font-weight: 600; text-transform: none; color: var(--gold); font-size: 1.12em; line-height: 1; letter-spacing: -0.02em; }
.hero-dek { font: italic 400 clamp(1.25rem, 1.05rem + .7vw, 1.625rem)/1.35 var(--font-body); color: #fff; margin: 0; max-width: 34ch; text-shadow: 0 1px 16px rgb(0 0 0 / .5); }
.hero-h1 .ln, .hero-h1 em, .hero-dek, .hero-h1 .eyebrow { opacity: 0; transform: translateY(26px); animation: rise var(--dur-4) var(--ease-out) forwards; }
.hero-h1 .eyebrow { animation-delay: 120ms; }
.hero-h1 .ln:nth-child(1) { animation-delay: 220ms; }
.hero-h1 .ln:nth-child(2) { animation-delay: 300ms; }
.hero-h1 em { animation-delay: 380ms; }
.hero-dek { animation-delay: 520ms; }
@keyframes rise { to { opacity: 1; transform: none; } }
.film-toggle { position: absolute; right: var(--px); top: calc(var(--head-h) + var(--util-h) + 28px); width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .5); background: rgb(0 18 45 / .45); color: #fff; display: grid; place-items: center; cursor: pointer; z-index: 2; transition: background-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
.film-toggle:hover, .film-toggle:focus-visible { background: var(--gold); color: var(--navy); border-color: var(--gold); transform: scale(1.06); }
.film-toggle .ico { width: 24px; height: 24px; }
.film-toggle .i-play { display: none; }
.film-toggle[aria-pressed="true"] .i-play { display: block; }
.film-toggle[aria-pressed="true"] .i-pause { display: none; }

/* ---------- intro panel straddling the hero edge (Loyola overlap) ---------- */
.intro { position: relative; z-index: 3; margin-top: calc(clamp(110px, 11vw, 160px) * -1); }
.intro-card { background: #fff; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); padding: clamp(32px, 4.5vw, 64px); box-shadow: 0 40px 80px -40px rgb(0 26 64 / .45); position: relative; }
.intro-card::before { content: ""; position: absolute; left: 0; top: 0; width: 120px; height: 6px; background: var(--gold); }
.intro-lede { font: 400 clamp(1.5rem, 1.2rem + 1vw, 2.125rem)/1.28 var(--font-body); color: var(--navy); margin: 0; max-width: 24ch; }
.intro-lede b { font-weight: 600; }
.intro-side p { color: var(--n-700); margin-bottom: var(--s-3); }

/* ---------- route cards ---------- */
.routes { padding-top: var(--s-8); }
.route-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.route { position: relative; display: flex; flex-direction: column; color: #fff; text-decoration: none; background: var(--navy); overflow: hidden; isolation: isolate; box-shadow: 0 30px 50px -36px rgb(0 26 64 / .6); transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); }
.route img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; transform: scale(1.0); transition: transform var(--dur-4) var(--ease-out); }
.route .route-media.fit { background: radial-gradient(120% 100% at 50% 0%, var(--navy-2), var(--navy-deep)); }
.route .route-media.fit img { object-fit: contain; }
.route .route-media { display: block; overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 22px)); }
.route-body { position: relative; padding: clamp(22px, 2.4vw, 32px); padding-top: clamp(14px, 1.6vw, 20px); flex: 1; display: flex; flex-direction: column; }
.route .route-h { font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 8px; color: #fff; }
.route p { font-size: 1.125rem; line-height: 1.4; color: var(--on-navy-2); margin: 0 0 18px; max-width: 30ch; }
.route .go { margin-top: auto; display: inline-flex; align-items: center; gap: 10px; font: 500 .8125rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.route .go .ico { width: 18px; height: 18px; transition: transform var(--dur-2) var(--ease-out); }
.route .bar { position: absolute; left: 0; bottom: 0; height: 6px; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-3) var(--ease-out); }
.route:hover, .route:focus-visible { transform: translateY(-4px); box-shadow: 0 40px 60px -34px rgb(0 26 64 / .7); }
.route:hover img, .route:focus-visible img { transform: scale(1.06); }
.route:hover .bar, .route:focus-visible .bar { transform: scaleX(1); }
.route:hover .go .ico, .route:focus-visible .go .ico { transform: translateX(5px); }

/* ---------- St. Francis quote + crest seal (Loyola shield entrance) ---------- */
.quote-band { position: relative; overflow: hidden; }
.quote-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.seal { position: absolute; left: calc(var(--px) * -0.2); top: 50%; width: clamp(320px, 34vw, 520px); aspect-ratio: 1; translate: 0 -50%; opacity: 0; transform: scale(.75); pointer-events: none; z-index: 0; }
.seal img { width: 100%; height: 100%; object-fit: contain; opacity: .14; }
.quote-band.in .seal { animation: seal-in 1.1s var(--ease-out) forwards; }
@keyframes seal-in { 0% { opacity: 0; transform: scale(.75); } 60% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }
.quote { position: relative; z-index: 1; }
.quote blockquote p { font: italic 400 clamp(1.75rem, 1.2rem + 1.9vw, 2.875rem)/1.22 var(--font-body); color: var(--navy); max-width: 26ch; margin: 0 0 var(--s-3); text-indent: -0.4em; }
.quote blockquote p::before { content: "\201C"; color: var(--gold-ink); }
.quote blockquote p::after { content: "\201D"; color: var(--gold-ink); }
.quote cite { font: 500 .9375rem/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; font-style: normal; color: var(--gold-ink); display: inline-flex; gap: 12px; align-items: center; }
.quote cite::before { content: ""; width: 48px; height: 2px; background: var(--gold); }
.quote-photo { position: relative; display: block; z-index: 1; }
.quote-photo figure { aspect-ratio: 4 / 5; overflow: hidden; clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%); }
.quote-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform var(--dur-4) var(--ease-out); }
.quote-photo:hover img, .quote-photo:focus-visible img { transform: scale(1.09); }
.quote-photo .cap { position: absolute; right: 0; bottom: -18px; background: var(--navy); color: #fff; font: 500 .8125rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; padding: 14px 18px; transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.quote-photo:hover .cap, .quote-photo:focus-visible .cap { background: var(--gold); color: var(--navy); }

/* ---------- mission head ---------- */
.mission-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: end; margin-bottom: var(--s-8); }
.mission-head h2 { margin: 0; }
.mission-head h2 em { display: block; }
.mission-head p { color: var(--n-700); }

/* ---------- SIGNATURE: the Virtue Blade ---------- */
.virtues { position: relative; height: calc(var(--n, 7) * 64vh + 100vh); }
.v-stage { position: sticky; top: 0; height: 100vh; min-height: 620px; display: grid; grid-template-columns: minmax(280px, 0.8fr) minmax(0, 2fr); background: radial-gradient(120% 80% at 0% 100%, var(--navy-2) 0%, var(--navy-deep) 60%); color: #fff; overflow: hidden; }
.v-list { list-style: none; margin: 0; padding: calc(var(--head-h) + 40px) clamp(24px, 3vw, 48px) 48px var(--px); display: flex; flex-direction: column; justify-content: center; gap: 2px; counter-reset: v; position: relative; z-index: 2; }
.v-list li { counter-increment: v; }
.v-list a { display: grid; grid-template-columns: 3ch 1fr; gap: 12px; align-items: baseline; padding: 10px 0; color: rgb(255 255 255 / .6); text-decoration: none; font: 400 clamp(1rem, .85rem + .45vw, 1.25rem)/1.2 var(--font-display); letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid rgb(255 255 255 / .1); transition: color var(--dur-2) var(--ease-out), padding-left var(--dur-3) var(--ease-out); }
.v-list a::before { content: counter(v, decimal-leading-zero); font-size: .75rem; letter-spacing: .14em; color: rgb(255 213 89 / .7); }
.v-list a:hover, .v-list a:focus-visible { color: #fff; }
.v-list li.active a { color: #fff; padding-left: 10px; }
.v-list li.active a::before { color: var(--gold); }
.v-shots { position: relative; overflow: hidden; }
.v-shot { position: absolute; inset: 0; display: block; --t: 0; clip-path: polygon(calc((1 - var(--t)) * 125% - 25%) 0, 100% 0, 100% 100%, calc((1 - var(--t)) * 125%) 100%); }
.v-shot:first-child { --t: 1; }
.v-shot img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.14 - var(--t) * .14)); }
.v-shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(0 18 45 / .85) 0%, rgb(0 18 45 / 0) 45%), linear-gradient(90deg, rgb(0 18 45 / .55) 0%, rgb(0 18 45 / 0) 30%); }
.v-blade { position: absolute; inset: 0; z-index: 3; pointer-events: none; --b: 0; background: var(--gold); clip-path: polygon(calc((1 - var(--b)) * 125% - 25%) 0, calc((1 - var(--b)) * 125% - 25% + 10px) 0, calc((1 - var(--b)) * 125% + 10px) 100%, calc((1 - var(--b)) * 125%) 100%); opacity: var(--bo, 0); }
.v-cap { position: absolute; left: clamp(28px, 4vw, 64px); right: clamp(28px, 4vw, 64px); bottom: clamp(40px, 7vh, 80px); z-index: 4; pointer-events: none; }
.v-cap .count { font: 500 .875rem/1 var(--font-display); letter-spacing: .2em; color: var(--gold); margin: 0 0 14px; }
.v-cap h3 { margin: 0; font-size: clamp(3rem, 1.8rem + 4.4vw, 6.25rem); line-height: .92; text-transform: uppercase; letter-spacing: -0.005em; font-weight: 500; }
.v-cap h3 em { display: block; font: italic 600 clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem)/1.1 var(--font-body); text-transform: none; color: var(--gold); margin-top: 6px; letter-spacing: -0.01em; }
.v-cap .w { display: block; transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.v-cap.swap .w { opacity: 0; transform: translateY(14px); }
.v-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgb(255 255 255 / .12); z-index: 5; }
.v-progress i { position: absolute; inset: 0; background: var(--gold); transform: scaleX(var(--p, 0)); transform-origin: left; }

/* ---------- numbers (Loyola outcomes band) ---------- */
.numbers { background: var(--navy-deep); color: #fff; position: relative; overflow: hidden; }
.numbers::before { content: ""; position: absolute; right: -6%; top: -10%; width: 46%; height: 120%; background: var(--navy); clip-path: polygon(22% 0, 100% 0, 78% 100%, 0 100%); opacity: .55; }
.numbers-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); gap: clamp(32px, 5vw, 80px); }
.numbers-head h2 { margin-bottom: var(--s-3); }
.numbers-head h2 em { display: block; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; border-top: 1px solid rgb(255 213 89 / .35); }
.stat-cell { padding: clamp(22px, 2.6vw, 36px) clamp(16px, 2vw, 28px) clamp(22px, 2.6vw, 36px) 0; border-bottom: 1px solid rgb(255 213 89 / .35); position: relative; display: grid; align-content: start; gap: 10px; }
.stat-cell:not(:nth-child(3n+1)) { padding-left: clamp(16px, 2vw, 28px); border-left: 1px solid rgb(255 255 255 / .1); }
.stat-cell .num { font: 500 clamp(2.75rem, 2rem + 2.6vw, 4.5rem)/0.95 var(--font-display); letter-spacing: -0.01em; color: #fff; display: flex; align-items: baseline; gap: 2px; font-variant-numeric: tabular-nums; }
.stat-cell .num small { font-size: .5em; color: var(--gold); font-weight: 500; }
.stat-cell .lbl { font-size: 1.0625rem; line-height: 1.35; color: var(--on-navy-2); margin: 0; max-width: 24ch; }
.stat-cell .lbl b { font: 500 .875rem/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 4px; }
.stat-cell .icon { position: absolute; right: clamp(12px, 1.4vw, 22px); top: clamp(22px, 2.6vw, 36px); width: 40px; height: 40px; opacity: .45; }

/* ---------- life at Salesianum: featured story + Instagram strip ---------- */
.life-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: var(--s-6); flex-wrap: wrap; }
.life-head h2 { margin: 0; }
.story { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; }
.story-photo { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.story-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-4) var(--ease-out); }
.story-photo:hover img, .story-photo:focus-visible img { transform: scale(1.05); }
.story-card { background: var(--navy); color: #fff; padding: clamp(28px, 3.6vw, 56px); margin-left: clamp(-120px, -8vw, -40px); position: relative; z-index: 1; box-shadow: 0 40px 70px -40px rgb(0 18 45 / .7); }
.story-card h3 { font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.25rem); line-height: 1.12; margin-bottom: var(--s-3); }
.story-card h3 a { color: inherit; text-decoration: none; background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 2px no-repeat; transition: background-size var(--dur-3) var(--ease-out); }
.story-card h3 a:hover, .story-card h3 a:focus-visible { background-size: 100% 2px; }
.ig { margin-top: var(--s-8); }
.ig-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: var(--s-3); }
.ig-head a { display: inline-flex; align-items: center; gap: 10px; color: var(--navy); text-decoration: none; font: 500 1rem/1 var(--font-display); letter-spacing: .08em; }
.ig-head a .ico { width: 22px; height: 22px; color: var(--gold-ink); }
.ig-head a:hover, .ig-head a:focus-visible { color: var(--gold-ink); }
.ig-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; list-style: none; margin: 0; padding: 0; }
.ig-tile { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--navy); color: #fff; text-decoration: none; }
.ig-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-4) var(--ease-out), opacity var(--dur-3) var(--ease-out); }
.ig-tile .badge { position: absolute; left: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgb(0 18 45 / .7); display: grid; place-items: center; transition: background-color var(--dur-2) var(--ease-out); }
.ig-tile .badge .ico { width: 18px; height: 18px; }
.ig-tile .txt { position: absolute; inset: 0; padding: 16px; display: flex; align-items: flex-end; padding-bottom: 54px; background: linear-gradient(0deg, rgb(0 18 45 / .94), rgb(0 18 45 / .55)); font-size: .9375rem; line-height: 1.35; opacity: 0; transform: translateY(10px); transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.ig-tile:hover img, .ig-tile:focus-visible img { transform: scale(1.06); }
.ig-tile:hover .txt, .ig-tile:focus-visible .txt { opacity: 1; transform: none; }
.ig-tile:hover .badge, .ig-tile:focus-visible .badge { background: var(--gold); color: var(--navy); }

/* ---------- events (Penn date flags) ---------- */
.events { position: relative; background: var(--paper); }
.mission { padding-bottom: 0; }
.el-menu-meta a { color: inherit; display: flex; align-items: center; min-height: 44px; }
.events-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.events-side h2 { margin-bottom: var(--s-3); }
.events-photo { display: block; margin-top: var(--s-6); position: relative; }
.events-photo figure { aspect-ratio: 3 / 2; overflow: hidden; clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%); }
.events-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-4) var(--ease-out); }
.events-photo:hover img, .events-photo:focus-visible img { transform: scale(1.05); }
.event-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.event { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 18px 22px 18px 18px; background: #fff; border: 1px solid var(--n-200); text-decoration: none; color: var(--navy); position: relative;
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
.event:hover, .event:focus-visible { transform: translateY(-3px); box-shadow: 0 24px 40px -26px rgb(0 26 64 / .45); border-color: var(--gold); }
.flag { display: grid; justify-items: center; align-content: center; height: 96px; background: var(--navy); color: #fff; position: relative; }
.flag::before { content: ""; position: absolute; left: 0; top: 0; width: 14px; height: 14px; background: var(--gold); clip-path: polygon(0 0, 100% 0, 0 100%); }
.flag .m { font: 500 .8125rem/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.flag .d { font: 500 2.75rem/1 var(--font-display); letter-spacing: -0.01em; }
.event h3 { font-size: 1.375rem; margin: 0 0 4px; }
.event p { margin: 0; color: var(--ink-2); font-size: 1.0625rem; }
.event .more { font: 500 .8125rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); display: inline-flex; align-items: center; gap: 8px; }
.event .more .ico { width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease-out); }
.event:hover .more .ico, .event:focus-visible .more .ico { transform: translateX(4px); }

/* ---------- graduates (logo marquees) ---------- */
.grads { background: var(--navy); color: #fff; position: relative; overflow: hidden; clip-path: polygon(0 clamp(24px, 4vw, 64px), 100% 0, 100% calc(100% - clamp(24px, 4vw, 64px)), 0 100%); padding-top: calc(var(--s-12) + 32px); padding-bottom: calc(var(--s-12) + 32px); }
.grads-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: end; margin-bottom: var(--s-6); }
.grads-head h2 { margin: 0; }
.grads-head p { color: var(--on-navy-2); }
.mq { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mq + .mq { margin-top: 18px; }
.mq-track { display: flex; gap: 18px; width: max-content; animation: mq var(--mq-dur, 40s) linear infinite; }
.mq.rev .mq-track { animation-direction: reverse; }
.mq:hover .mq-track, .mq:focus-within .mq-track { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-50%); } }
.mq-label { font: 500 .8125rem/1 var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin: var(--s-6) 0 var(--s-2); }
.home-logo { display: grid; place-items: center; width: 240px; height: 96px; border: 1px solid rgb(255 255 255 / .16); position: relative; transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.home-logo img { max-height: 52px; max-width: 190px; width: auto; transition: opacity var(--dur-2) var(--ease-out); }
.home-logo .hv { position: absolute; opacity: 0; }
.home-logo:hover, .home-logo:focus-visible { border-color: var(--gold); background: rgb(255 255 255 / .05); transform: translateY(-2px); }
.home-logo:hover .df, .home-logo:focus-visible .df { opacity: 0; }
.home-logo:hover .hv, .home-logo:focus-visible .hv { opacity: 1; }
.college { display: block; width: 220px; height: 124px; background: #fff; overflow: hidden; transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.college img { width: 100%; height: 100%; object-fit: contain; }
.college:hover, .college:focus-visible { transform: translateY(-3px); box-shadow: 0 0 0 3px var(--gold); }
.grads-cta { margin-top: var(--s-6); display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------- voices (JHU circle-framed quote stage) ---------- */
.voices { background-color: var(--paper); background-image: linear-gradient(rgb(0 39 93 / .06) 1px, transparent 1px), linear-gradient(90deg, rgb(0 39 93 / .06) 1px, transparent 1px); background-size: 28px 28px; position: relative; overflow: hidden; }
.voices-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.ring { position: relative; aspect-ratio: 1; max-width: 520px; width: 100%; justify-self: center; display: block; }
.ring::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 2px solid var(--gold); }
.ring::after { content: ""; position: absolute; left: -26px; top: 18%; width: 62%; height: 72%; border: 2px solid var(--navy); z-index: -1; }
.ring-photo { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.ring-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-4) var(--ease-out); }
.ring-photo img.on { opacity: 1; transform: none; }
.thumbs { position: absolute; inset: 0; pointer-events: none; }
.thumbs img { position: absolute; width: 22%; aspect-ratio: 1; object-fit: cover; border: 4px solid #fff; box-shadow: 0 16px 30px -18px rgb(0 26 64 / .6); }
.thumbs img:nth-child(1) { right: -6%; top: -2%; }
.thumbs img:nth-child(2) { right: -12%; bottom: 14%; width: 18%; }
.thumbs img:nth-child(3) { left: -4%; bottom: -4%; width: 20%; }
.slides { position: relative; display: grid; }
.slide { grid-area: 1 / 1; background: #fff; padding: clamp(28px, 3.6vw, 56px); border-left: 6px solid var(--gold); box-shadow: 0 30px 60px -36px rgb(0 26 64 / .45); opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3); }
.slide.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.slide p { font: italic 400 clamp(1.3125rem, 1.1rem + .7vw, 1.75rem)/1.4 var(--font-body); color: var(--navy); margin: 0 0 var(--s-3); max-width: 40ch; }
.slide footer { font: 500 .875rem/1.3 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
.slide footer b { display: block; color: var(--navy); font-size: 1.125rem; letter-spacing: .06em; }
.slide-ctrl { display: flex; align-items: center; gap: 12px; margin-top: var(--s-3); }
.slide-ctrl button { width: 52px; height: 52px; border: 1px solid rgb(0 39 93 / .3); background: #fff; color: var(--navy); cursor: pointer; display: grid; place-items: center; transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.slide-ctrl button:hover, .slide-ctrl button:focus-visible { background: var(--navy); color: var(--gold); border-color: var(--navy); }
.slide-ctrl button:active { transform: scale(.94); }
.slide-ctrl button .ico { width: 20px; height: 20px; }
.slide-ctrl .prev .ico { transform: rotate(180deg); }
.slide-ctrl .count { font: 500 .875rem/1 var(--font-display); letter-spacing: .16em; color: var(--ink-2); margin-left: 8px; }

/* ---------- visit (Penn navy card over full-bleed photo, Loyola photo window) ---------- */
.visit { position: relative; overflow: hidden; min-height: 760px; display: flex; align-items: flex-end; padding-bottom: var(--s-12); color: #fff; isolation: isolate; background: var(--navy-deep); }
.visit > .wrap { width: 100%; }
.visit-bg { position: absolute; inset: -8% 0 -4%; z-index: -2; display: block; }
.visit-bg img { width: 100%; height: 100%; object-fit: cover; }
.visit::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(0 18 45 / .5), rgb(0 18 45 / .05) 60%); pointer-events: none; }
.visit-card { background: var(--navy); padding: clamp(32px, 4.5vw, 64px) clamp(32px, 6vw, 96px) clamp(32px, 4.5vw, 64px) clamp(32px, 4.5vw, 64px); max-width: 720px; clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%); box-shadow: 0 40px 80px -40px rgb(0 0 0 / .6); }
.visit-card h2 em { display: inline; }
.visit-card p { color: var(--on-navy-2); font-size: 1.25rem; }
.visit-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s-4); }

/* ---------- footer (Penn duotone building) ---------- */
.site-foot { position: relative; color: #fff; background: var(--navy-deep); isolation: isolate; overflow: hidden; }
.site-foot::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("../assets/img/footer-campus-front.jpg") center 42% / cover no-repeat; opacity: .26; filter: grayscale(1); }
.site-foot::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(0 26 64 / .82), rgb(0 26 64 / .97)); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); padding-top: var(--s-12); padding-bottom: var(--s-8); }
.foot-id { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 24px; align-items: start; }
.foot-id img { width: 112px; height: auto; }
.foot-id h2 { font-size: 1.75rem; margin-bottom: 10px; }
.foot-id address { font-style: normal; font-size: 1.125rem; line-height: 1.5; color: var(--on-navy-2); }
.foot-id a { color: #fff; text-decoration-color: rgb(255 213 89 / .6); text-underline-offset: 4px; transition: color var(--dur-1) var(--ease-out), text-decoration-color var(--dur-1) var(--ease-out); }
.foot-id a:hover, .foot-id a:focus-visible { color: var(--gold); text-decoration-color: var(--gold); }
.foot-links h3, .foot-connect h3 { font: 500 .875rem/1 var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--s-2); }
.foot-links ul { list-style: none; margin: 0; padding: 0; }
.foot-links a { display: block; padding: 9px 0; color: #fff; text-decoration: none; font: 400 1.0625rem/1.2 var(--font-display); letter-spacing: .04em; border-bottom: 1px solid rgb(255 255 255 / .1); transition: color var(--dur-1) var(--ease-out), padding-left var(--dur-2) var(--ease-out); }
.foot-links a:hover, .foot-links a:focus-visible { color: var(--gold); padding-left: 6px; }
.socials { display: flex; gap: 10px; list-style: none; margin: 0 0 var(--s-4); padding: 0; flex-wrap: wrap; }
.socials a { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / .3); color: #fff; transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.socials a:hover, .socials a:focus-visible { background: var(--gold); color: var(--navy); border-color: var(--gold); transform: translateY(-2px); }
.socials .ico { width: 20px; height: 20px; }
.foot-ctas { display: grid; gap: 10px; justify-items: start; }
.accred { display: flex; gap: 28px; align-items: center; margin-top: var(--s-4); }
.accred a { display: grid; place-items: center; position: relative; min-height: 44px; }
.accred img { height: 30px; width: auto; transition: opacity var(--dur-2) var(--ease-out); }
.accred .hv { position: absolute; opacity: 0; }
.accred a:hover .df, .accred a:focus-visible .df { opacity: 0; }
.accred a:hover .hv, .accred a:focus-visible .hv { opacity: 1; }
.foot-legal { border-top: 1px solid rgb(255 255 255 / .12); padding-top: var(--s-4); padding-bottom: var(--s-6); display: grid; grid-template-columns: minmax(0, 2fr) auto; gap: 32px; align-items: end; }
.foot-legal p { font-size: .9375rem; color: var(--on-navy-2); margin: 0; max-width: 90ch; }
.foot-legal small { font: 400 .8125rem/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--on-navy-2); }

/* ---------- mobile menu skin (library el-menu) ---------- */
.el-menu { background-image: radial-gradient(90% 60% at 100% 0%, rgb(11 52 115 / .9), rgb(0 26 64 / 0) 70%); --el-menu-bg: var(--navy-deep); --el-menu-fg: #fff; --el-menu-accent: var(--gold); --el-menu-bp: 1100; }
.el-menu-nav a { font-family: var(--font-display); font-size: 1.625rem; text-transform: uppercase; letter-spacing: .04em; }
.el-menu-bar .brand img { height: 36px; }
.el-menu .el-menu-close { border-color: rgb(255 255 255 / .62); }
.el-menu .el-menu-close:hover, .el-menu .el-menu-close:focus-visible { border-color: var(--gold); background: rgb(255 255 255 / .12); }

/* ---------- reveal: never strand content ---------- */
.reveal { transform: translateY(24px); }

/* ---------- responsive ---------- */
@media (max-width: 1240px) {
  .head-search input { width: 120px; }
  .nav-link { padding: 0 11px; }
  .nav-link::after { left: 11px; right: 11px; }
}
@media (max-width: 1100px) {
  .nav, .head-search, .give, .util nav, .rail { display: none; }
  .chrome-burger { display: inline-flex; }
  .util-note { font-size: .75rem; }
  .mission-head, .numbers-grid, .grads-head, .events-grid, .quote-grid, .voices-stage, .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quote-photo { max-width: 520px; }
  .seal { left: auto; right: -20%; }
  .virtues { height: auto; }
  .v-stage { position: relative; height: auto; min-height: 0; display: block; background: var(--navy-deep); }
  .v-list { display: none; }
  .v-shots { display: grid; gap: 4px; }
  .v-shot { position: relative; inset: auto; aspect-ratio: 4 / 3; --t: 1; clip-path: none; }
  .v-shot img { transform: none; position: absolute; inset: 0; }
  .v-blade, .v-progress, .v-cap--stage { display: none; }
  .v-shot .v-cap-m { display: block; }
}
@media (min-width: 1101px) { .v-cap-m { display: none; } }
.v-cap-m { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; color: #fff; }
.v-cap-m .count { font: 500 .75rem/1 var(--font-display); letter-spacing: .2em; color: var(--gold); margin: 0 0 6px; }
.v-cap-m b { display: block; font: 500 clamp(2rem, 1.4rem + 3vw, 3rem)/.95 var(--font-display); text-transform: uppercase; }
.v-cap-m em { font: italic 600 1.25rem/1.2 var(--font-body); color: var(--gold); }
@media (max-width: 820px) {
  :root { --head-h: 72px; --util-h: 0px; }
  .util { display: none; }
  .brand img { height: 36px; }
  .util-note .long { display: none; }
  .intro-card { grid-template-columns: minmax(0, 1fr); }
  .route-grid { grid-template-columns: minmax(0, 1fr); }
  .story { grid-template-columns: minmax(0, 1fr); }
  .story-card { margin-left: 0; margin-top: -40px; margin-right: 16px; }
  .ig-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-cell:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .stat-cell:nth-child(2n) { padding-left: 16px; border-left: 1px solid rgb(255 255 255 / .1); }
  .event { grid-template-columns: 76px minmax(0, 1fr); gap: 16px; }
  .event .more { grid-column: 2; }
  .flag { height: 80px; }
  .flag .d { font-size: 2.25rem; }
  .visit { min-height: 0; padding-top: var(--s-12); padding-bottom: var(--s-12); }
  .visit-card { clip-path: none; padding-right: clamp(28px, 6vw, 48px); }
  .foot-id { grid-template-columns: minmax(0, 1fr); }
  .foot-legal { grid-template-columns: minmax(0, 1fr); }
  .hero::after { background: linear-gradient(0deg, rgb(0 18 45 / .94) 0%, rgb(0 18 45 / .82) 45%, rgb(0 18 45 / .62) 100%); }
  .film-toggle { bottom: auto; top: calc(var(--head-h) + var(--util-h) + 16px); width: 48px; height: 48px; }
  .thumbs img:nth-child(2) { right: -4%; }
  .ring::after { left: -12px; }
  .grads-head { grid-template-columns: minmax(0, 1fr); }
  .section { padding-top: var(--s-8); padding-bottom: var(--s-8); }
}
@media (max-width: 480px) {
  .ig-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-h1 { font-size: clamp(2.5rem, 1.2rem + 7vw, 3rem); }
  .event { padding: 14px; }
  .home-logo { width: 190px; }
  .college { width: 180px; height: 101px; }
}
@media (pointer: coarse), (max-width: 1024px) { input, select, textarea { font-size: 16px; } }

/* ---------- reduced motion: designed static states ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-h1 .ln, .hero-h1 em, .hero-dek, .hero-h1 .eyebrow { opacity: 1; transform: none; animation: none; }
  .seal { opacity: 1; transform: none; animation: none !important; }
  .mq-track { animation: none; flex-wrap: wrap; width: auto; }
  .mq { -webkit-mask-image: none; mask-image: none; }
  .v-shot img { transform: none; }
  .v-blade { display: none; }
  .route img, .story-photo img, .ig-tile img, .events-photo img, .mega-feature img { transition: none; }
  .rail a, .btn, .event, .college, .home-logo, .socials a { transition: none; }
  .rail a:hover, .btn:hover, .event:hover { transform: none; }
  .hero-media video { display: none; }
  .slide, .ring-photo img { transition: none; }
}

/* foundation hero class: never a flat flood if used */
.section--hero { background-image: linear-gradient(180deg, var(--navy-deep), var(--navy)); }


/* ===== inner.css ===== */
/* ============================================================
   SALESIANUM inner pages — ported from the SSPP v2 inner grammar
   (projects/sspp-high-school/_inner.css, 2026-10-04) per X: "redesign it
   just like the saints peter and paul site". Salesianum tokens only.
   ============================================================ */
:root { --header-h: calc(var(--head-h) + var(--util-h)); --cobalt: var(--navy); --alice: var(--paper); --line: #DCE3EE; --text-2: var(--ink-2); }
.mode-dark { --line: rgb(255 255 255 / 0.14); --text-2: var(--on-navy-2); }
.imglink { display: block; position: relative; overflow: hidden; color: inherit; isolation: isolate; }
.imglink img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-4) var(--ease-out); }
.imglink::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-3) var(--ease-out); z-index: 2; }
.imglink:hover img, .imglink:focus-visible img, a:hover > .imglink img, a:focus-visible > .imglink img { transform: scale(1.05); }
.imglink:hover::after, .imglink:focus-visible::after, a:hover > .imglink::after, a:focus-visible > .imglink::after { transform: scaleX(1); }
.imglink.fit { background: radial-gradient(120% 100% at 50% 0%, var(--navy-2), var(--navy-deep)); }
.imglink.fit img { object-fit: contain; }
.film-play { position: absolute; left: 50%; top: 50%; z-index: 3; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; border: 0; background: var(--gold); color: var(--navy); cursor: pointer; display: grid; place-items: center; box-shadow: 0 0 0 0 rgb(255 213 89 / .5); transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); }
.film-play svg { width: 28px; height: 28px; fill: currentColor; margin-left: 5px; }
.film-play:hover, .film-play:focus-visible { transform: scale(1.12); box-shadow: 0 0 0 14px rgb(255 213 89 / .25); }

/* logo tab — X (SSPP, 2026-10-04): "logo should be bigger, it can hang over the header, then shrink it after scroll" */
.brand { align-self: flex-start; position: relative; z-index: 2; padding: 18px 24px 22px; margin-left: -24px; background: var(--navy); box-shadow: 0 22px 34px -20px rgb(0 0 0 / .55);
  transition: padding var(--dur-3) var(--ease-inout), box-shadow var(--dur-3) var(--ease-inout); }
.brand::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--gold); transform-origin: left; transition: transform var(--dur-3) var(--ease-inout); }
.brand img { height: 66px; }
.site-head.is-solid .brand { padding: 12px 24px; box-shadow: none; }
.site-head.is-solid .brand::after { transform: scaleX(0); }
.site-head.is-solid .brand img { height: 40px; }
@media (max-width: 1340px) { .head-search input { width: 120px; } .nav-link { padding: 0 10px; } .nav-link::after { left: 10px; right: 10px; } }
@media (max-width: 820px) { .brand { padding: 12px 16px 14px; margin-left: -16px; } .brand img { height: 42px; } .site-head.is-solid .brand { padding: 8px 16px; } .site-head.is-solid .brand img { height: 34px; } }
@media (prefers-reduced-motion: reduce) { .brand, .brand::after, .brand img { transition: none; } }
/* ============================================================
   SSPP — inner pages v2 (2026-10-04), Salesianum inner grammar:
   photo hero with a mixed Oswald/Garamond-italic H1, a sticky white
   section bar (section label + sibling pages + reading rule), full-
   width alternating bands, slanted photos, navy "learn more" cards,
   and the visit band before the footer.
   ============================================================ */

/* ---------- page hero ---------- */
.ihero { position: relative; min-height: max(440px, 58vh); display: flex; align-items: flex-end; color: #fff; overflow: hidden; isolation: isolate; background: var(--navy-deep);
  padding-top: calc(var(--header-h) + 110px); padding-bottom: clamp(56px, 6vw, 88px); }
.ihero-media { position: absolute; inset: -10% 0; z-index: -2; background-color: var(--navy-deep); background-size: cover; background-repeat: no-repeat; }
.ihero-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ihero::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgb(0 18 45 / .92) 0%, rgb(0 18 45 / .78) 40%, rgb(0 18 45 / .35) 72%, rgb(0 18 45 / .15) 100%),
  linear-gradient(0deg, rgb(0 18 45 / .7) 0%, rgb(0 18 45 / 0) 55%); }
.ihero-crest { position: absolute; z-index: -1; right: 6vw; bottom: -8%; width: clamp(180px, 20vw, 300px); height: auto; aspect-ratio: 111.2 / 170.338; opacity: .1; pointer-events: none; }
.crumbs { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 var(--s-3); font: 400 .8125rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--on-navy-2); }
.crumbs a { color: #fff; text-decoration: none; }
.crumbs a:hover, .crumbs a:focus-visible { color: var(--gold); }
.crumbs span[aria-hidden] { color: var(--gold); }
.ihero h1 { color: #fff; font-size: clamp(2.5rem, 1.5rem + 3.4vw, 4.25rem); line-height: 1; letter-spacing: -0.005em; max-width: 20ch; margin: 0 0 var(--s-2); text-shadow: 0 2px 30px rgb(0 0 0 / .35); }
.ihero h1 em { display: block; font-family: var(--font-body); font-style: italic; font-weight: 600; color: var(--gold); letter-spacing: -0.01em; }
.ihero .lede { color: #E6ECF6; max-width: 46rem; margin: 0; }
.ihero .eyebrow, .ihero h1, .ihero .lede, .crumbs { opacity: 0; transform: translateY(22px); animation: rise var(--dur-4) var(--ease-out) forwards; }
.crumbs { animation-delay: 60ms; } .ihero .eyebrow { animation-delay: 140ms; } .ihero h1 { animation-delay: 220ms; } .ihero .lede { animation-delay: 340ms; }

/* ---------- sticky section bar ---------- */
.subnav { position: relative; z-index: 40; background: #fff; box-shadow: 0 1px 0 var(--line), 0 14px 30px -26px rgb(0 18 45 / .35); }
.subnav .wrap { max-width: 1440px; display: flex; align-items: center; gap: 28px; min-height: 58px; overflow-x: auto; scrollbar-width: none; }
.subnav .wrap::-webkit-scrollbar { display: none; }
.subnav .sec { flex: none; font: 500 .9375rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); text-decoration: none; padding: 20px 0; position: relative; }
.subnav .sec::after { content: ""; position: absolute; left: 0; right: 0; bottom: 12px; height: 2px; background: var(--gold); }
.subnav nav { display: flex; gap: 22px; }
.subnav nav a { flex: none; font: 400 .9375rem/1 var(--font-display); letter-spacing: .04em; color: var(--navy); text-decoration: none; padding: 20px 0; position: relative; white-space: nowrap; transition: color var(--dur-1) var(--ease-out); }
.subnav nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 12px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-2) var(--ease-out); }
.subnav nav a:hover, .subnav nav a:focus-visible, .subnav nav a[aria-current="page"] { color: var(--gold-ink); }
.subnav nav a:hover::after, .subnav nav a:focus-visible::after, .subnav nav a[aria-current="page"]::after { transform: scaleX(1); }
.readbar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.readbar i { position: absolute; inset: 0; background: var(--gold); transform: scaleX(var(--p, 0)); transform-origin: left; }
.site-head.is-solid ~ main .subnav { top: calc(var(--head-h)); }

/* ---------- bands ---------- */
.band { padding-top: var(--s-12); padding-bottom: var(--s-12); background: var(--surface); color: var(--text); position: relative; scroll-margin-top: calc(var(--head-h) + 60px); }
.band.mode-tint { background: var(--paper); }
.band.mode-dark { background: radial-gradient(120% 90% at 100% 0%, var(--navy-2) 0%, var(--navy) 55%, var(--navy-deep) 100%); }
.band.grid-paper { background-color: var(--paper); background-image: linear-gradient(rgb(0 39 93 / .06) 1px, transparent 1px), linear-gradient(90deg, rgb(0 39 93 / .06) 1px, transparent 1px); background-size: 28px 28px; }
.band .wrap > h2, .band-head h2 { margin-bottom: var(--s-3); }
.band-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: end; margin-bottom: var(--s-6); }
.band-head p { color: var(--text-2); margin: 0; }
.prose { max-width: 68ch; }
.prose p { color: var(--text-2); margin-bottom: var(--s-2); }
.prose h3 { margin: var(--s-4) 0 var(--s-2); }
.prose h4 { font-size: 1.25rem; margin: var(--s-3) 0 var(--s-1); text-transform: uppercase; letter-spacing: .04em; }
.prose ul, .prose ol { color: var(--text-2); padding-left: 1.2em; margin: 0 0 var(--s-3); }
.prose li { margin-bottom: 6px; }
.prose li::marker { color: var(--gold-ink); }
.mode-dark .prose p, .mode-dark .prose li { color: var(--on-navy-2); }
.prose a { color: var(--cobalt); text-underline-offset: 3px; }
.mode-dark .prose a { color: var(--gold); }

.split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.split.flip > :first-child { order: 2; }
.split .imglink { aspect-ratio: 4 / 3; }
.split .tall .imglink { aspect-ratio: 4 / 5; }
.split .media .imglink, .split .tall .imglink { clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%); }
.split .media .imglink::after, .split .tall .imglink::after { display: none; }
.statement { font: italic 400 clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem)/1.26 var(--font-body); color: var(--navy); margin: 0 0 var(--s-4); max-width: 34ch; }
.statement::before { content: "\201C"; color: var(--gold-ink); }
.statement::after { content: "\201D"; color: var(--gold-ink); }
.mode-dark .statement { color: #fff; }
.mode-dark .statement::before, .mode-dark .statement::after { color: var(--gold); }

/* numbered hallmark list (roman, like the Salesian hallmarks band) */
.numlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); counter-reset: n; }
.numlist li { counter-increment: n; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--s-2); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.numlist li::before { content: counter(n, upper-roman); font: 500 1rem/1.6 var(--font-display); letter-spacing: .1em; color: var(--gold-ink); }
.mode-dark .numlist li::before { color: var(--gold); }
.numlist p { margin: 0; color: var(--text); font-size: 1.125rem; }
.numlist h3 { font-size: 1.375rem; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 6px; }
.numlist h3 + p { color: var(--text-2); }
.numlist.one { grid-template-columns: minmax(0, 1fr); }

/* "Learn more" navy cards */
.ways { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: clamp(16px, 2vw, 24px); }
.way { position: relative; display: flex; flex-direction: column; color: #fff; text-decoration: none; background: var(--navy); overflow: hidden; isolation: isolate; box-shadow: 0 30px 50px -36px rgb(0 18 45 / .6); transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); }
.way .imglink { aspect-ratio: 3 / 2; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 18px)); }
.way .imglink::after { display: none; }
.way-b { padding: 18px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.way h3 { color: #fff; font-size: 1.5rem; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 8px; }
.way p { color: var(--on-navy-2); font-size: 1.0625rem; line-height: 1.4; margin: 0 0 16px; }
.way-f { margin-top: auto; display: inline-flex; align-items: center; gap: 10px; font: 500 .8125rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.way-f svg { width: 18px; height: 12px; transition: transform var(--dur-2) var(--ease-out); }
.way::after { content: ""; position: absolute; left: 0; bottom: 0; height: 5px; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-3) var(--ease-out); }
.way:hover, .way:focus-visible { transform: translateY(-4px); box-shadow: 0 40px 60px -34px rgb(0 18 45 / .7); }
.way:hover::after, .way:focus-visible::after { transform: scaleX(1); }
.way:hover .imglink img, .way:focus-visible .imglink img { transform: scale(1.06); }
.way:hover .way-f svg, .way:focus-visible .way-f svg { transform: translateX(5px); }

/* document cards — first page of the school's own PDF */
.docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s-3); margin-top: var(--s-3); }
.doc { display: grid; gap: 14px; color: var(--navy); text-decoration: none; }
.doc .imglink { aspect-ratio: 8.5 / 11; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 30px -22px rgb(0 18 45 / .45); transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); }
.doc .imglink img { object-fit: contain; object-position: top center; }
.doc b { font: 500 1.125rem/1.2 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.doc small { display: inline-flex; gap: 8px; align-items: center; font: 500 .75rem/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); }
.doc small svg { width: 16px; height: 12px; flex: none; }
.doc:hover .imglink, .doc:focus-visible .imglink { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 30px 40px -24px rgb(0 18 45 / .55); }
.doc:hover b, .doc:focus-visible b { color: var(--cobalt); }
.mode-dark .doc { color: #fff; } .mode-dark .doc small { color: var(--gold); }

/* photo strip (el-marquee --photos; one track, cloned in JS) */
.strip { margin: var(--s-8) 0 0; }
.strip .el-marquee-track { gap: 12px; }
.strip .cell { flex: none; display: block; height: clamp(170px, 20vw, 260px); aspect-ratio: 3 / 2; }
.strip .cell.port { aspect-ratio: 3 / 4; }
.strip .imglink { height: 100%; }
.strip .cell:nth-child(odd) .imglink { clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); }

/* video card */
.yt { position: relative; aspect-ratio: 16 / 9; background: var(--navy); overflow: hidden; }
.yt .imglink { height: 100%; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 4; }
.yt[data-state="playing"] .film-play { display: none; }
.cap { font-size: 1rem; color: var(--text-2); margin-top: 12px; }

/* accordion */
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s-2); align-items: center; padding: 20px 0; cursor: pointer; font: 500 1.375rem/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .02em; color: var(--navy); transition: color var(--dur-1) var(--ease-out), padding-left var(--dur-2) var(--ease-out); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: ""; width: 12px; height: 12px; border-right: 2px solid var(--gold-ink); border-bottom: 2px solid var(--gold-ink); transform: rotate(45deg) translate(-3px, -3px); transition: transform var(--dur-2) var(--ease-inout); }
.acc details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.acc summary:hover, .acc summary:focus-visible { color: var(--gold-ink); padding-left: 6px; }
.acc summary small { font: italic 400 1rem/1 var(--font-body); text-transform: none; letter-spacing: 0; color: var(--text-2); }
.acc .acc-b { padding: 0 0 var(--s-4); }
.acc .acc-b p { color: var(--text-2); }

.coach { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.coach:first-child { border-top: 0; }
.coach .imglink { width: 96px; height: 96px; border-radius: 50%; background: var(--alice); }
.coach .imglink::after { display: none; }
.coach h4 { font: 500 1.25rem/1.2 var(--font-display); text-transform: uppercase; margin: 0 0 2px; }
.coach .role { font: 500 .75rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 8px; }
.coach p { font-size: 1.0625rem; }
.coach.noimg { grid-template-columns: minmax(0, 1fr); }
.ig { display: inline-flex; align-items: center; gap: 8px; font: 500 .9375rem/1 var(--font-display); letter-spacing: .06em; color: var(--cobalt); text-decoration: none; }
.ig svg { width: 18px; height: 18px; fill: currentColor; }
.mode-dark .ig { color: var(--gold); }

/* people grid */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s-4) var(--s-3); margin-top: var(--s-4); }
.person { color: var(--navy); text-decoration: none; display: grid; gap: 10px; align-content: start; }
.person .imglink { aspect-ratio: 1; border-radius: 50%; background: var(--alice); box-shadow: 0 0 0 0 var(--gold); transition: box-shadow var(--dur-2) var(--ease-out); }
.person .imglink::after { display: none; }
.person b { font: 500 1.1875rem/1.15 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.person small { color: var(--text-2); font-size: 1rem; line-height: 1.35; display: block; }
.person:hover .imglink, .person:focus-visible .imglink { box-shadow: 0 0 0 4px var(--gold); }
.person:hover b, .person:focus-visible b { color: var(--gold-ink); }
.mode-dark .person { color: #fff; } .mode-dark .person small { color: var(--on-navy-2); }
.biz-logo { aspect-ratio: 16 / 10 !important; border-radius: 0 !important; background: #fff !important; border: 1px solid var(--line); display: grid !important; place-items: center; padding: 18px; }
.biz-logo img { width: 100%; height: 100%; object-fit: contain !important; }
.bio-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.bio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.bio h3 { font-size: 1.5rem; text-transform: uppercase; margin: 0 0 4px; }
.bio .role { font: 500 .8125rem/1.3 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); margin: 0; }
.bio p { color: var(--text-2); }

/* tables */
.levels { width: 100%; border-collapse: collapse; margin-top: var(--s-3); }
.levels th, .levels td { text-align: left; padding: 16px 12px 16px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.levels th { font: 500 .8125rem/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.levels td:first-child { font: 500 1.1875rem/1.3 var(--font-display); color: var(--navy); }
.levels td { color: var(--text-2); }
.levels tbody tr { transition: background-color var(--dur-1) var(--ease-out); }
.levels tbody tr:hover { background: var(--paper); }
.table-wrap { overflow-x: auto; }

/* quote card */
.pull { position: relative; padding: clamp(28px, 3.6vw, 56px); background: #fff; border-left: 6px solid var(--gold); box-shadow: 0 30px 60px -36px rgb(0 18 45 / .45); }
.pull blockquote { font: italic 400 clamp(1.3125rem, 1.1rem + .7vw, 1.75rem)/1.4 var(--font-body); color: var(--navy); margin: 0 0 var(--s-3); }
.pull cite { font: 500 .875rem/1.3 var(--font-display); letter-spacing: .14em; text-transform: uppercase; font-style: normal; color: var(--gold-ink); }

/* routes + map + clubs + calendar + form handoff */
.routes-list { list-style: none; margin: var(--s-3) 0 0; padding: 0; }
.routes-list li { padding: 14px 0; border-top: 1px solid var(--line); font: 500 1rem/1.4 var(--font-display); letter-spacing: .06em; color: var(--navy); }
.map { background: var(--alice); padding: var(--s-4); clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%); }
.map img { width: 100%; height: auto; }
.crest-link { display: block; }
.clubs { list-style: none; margin: var(--s-3) 0 0; padding: 0; columns: 3 240px; column-gap: var(--s-4); }
.clubs li { break-inside: avoid; border-top: 1px solid var(--line); }
.clubs a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; color: var(--navy); text-decoration: none; font: 500 1.0625rem/1.25 var(--font-display); letter-spacing: .02em; transition: color var(--dur-1) var(--ease-out), padding-left var(--dur-2) var(--ease-out); }
.clubs a:hover, .clubs a:focus-visible { color: var(--gold-ink); padding-left: 6px; }
.cal { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--line); background: #fff; }
.cal iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.handoff { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; padding: clamp(28px, 4vw, 56px); background: var(--navy); color: #fff; clip-path: polygon(0 0, 100% 0, calc(100% - 4%) 100%, 0 100%); }
.handoff h3 { color: #fff; text-transform: uppercase; }
.handoff ol { margin: 0; padding-left: 1.2em; color: var(--on-navy-2); }
.handoff li { margin-bottom: 6px; }
.handoff li::marker { color: var(--gold); font-family: var(--font-display); }
.post-meta { display: flex; flex-wrap: wrap; gap: 18px; font: 500 .8125rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--on-navy-2); margin: var(--s-2) 0 0; }
.post-meta b { color: var(--gold); font-weight: 500; }
.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(16px, 2vw, 24px); }
.post-card .way-b small { font: 500 .75rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; display: block; }
.gap-top { margin-top: var(--s-4); }
.leagues-row { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.leagues-row a { display: grid; place-items: center; width: 200px; height: 100px; background: #fff; border: 1px solid var(--line); }
.leagues-row img { max-height: 64px; max-width: 160px; width: auto; height: auto; }

@media (max-width: 960px) {
  .split, .band-head, .handoff, .bio { grid-template-columns: minmax(0, 1fr); }
  .split.flip > :first-child { order: 0; }
  .numlist { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .ihero { min-height: 62svh; }
  .subnav { top: var(--head-h); }
  .subnav .wrap { gap: 18px; min-height: 52px; }
  .coach { grid-template-columns: 64px minmax(0, 1fr); }
  .coach .imglink { width: 64px; height: 64px; }
  .handoff { clip-path: none; }
  .levels td:first-child { font-size: 1.0625rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ihero .eyebrow, .ihero h1, .ihero .lede, .crumbs { animation: none; opacity: 1; transform: none; }
  .ihero-media { transform: none !important; }
  .ihero-vid { display: none; }
  .readbar i { transform: none; }
  .doc .imglink, .way, .acc summary::after { transition: none; }
}
/* parent-page content pieces carried from v1 bodies */
.offer { list-style: none; margin: var(--s-3) 0 var(--s-4); padding: 0; }
.offer li { display: flex; gap: 14px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line); font: 500 1.25rem/1.3 var(--font-display); letter-spacing: .02em; text-transform: uppercase; color: var(--navy); }
.offer li:last-child { border-bottom: 1px solid var(--line); }
.offer svg { flex: none; width: 10px; height: 14px; fill: var(--gold-ink); }
.mode-dark .offer li { color: #fff; } .mode-dark .offer svg { fill: var(--gold); }
.faith-list { list-style: none; margin: var(--s-4) 0 0; padding: 0; }
.faith-list li { border-top: 1px solid var(--line); padding: var(--s-3) 0; }
.faith-list h3 { font-size: 1.375rem; text-transform: uppercase; margin: 0 0 var(--s-1); }
.faith-list p { margin: 0; color: var(--text-2); }
.contain .imglink img, .imglink.contain img { object-fit: contain !important; background: #fff; }
.crest-fig.small { width: min(100%, 220px); margin: 0 auto; }
.crest-fig.small img { width: 100%; height: auto; }
.levels-split { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.film-frame.wide, .chaps .film-frame, .band .film-frame { aspect-ratio: 16 / 9; }
.band .film-frame .imglink { height: 100%; }
.band .wins-mq { margin-top: var(--s-4); }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: var(--s-4); }
.gallery-grid .imglink { aspect-ratio: 4 / 3; }
.bio-id { display: grid; gap: 8px; align-content: start; }
.bio-id .imglink { width: 120px; aspect-ratio: 1; border-radius: 50%; background: var(--alice); }
.bio-id .imglink::after { display: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s-3); }
.strip-band { padding-top: var(--s-6); padding-bottom: var(--s-6); }
.strip-band .strip { margin: 0; }
.legal { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.legal .crest-fig { position: sticky; top: 140px; }
@media (max-width: 760px) { .legal { grid-template-columns: minmax(0, 1fr); } .legal .crest-fig { position: static; width: 120px; } }
.prose .btn, .band .btn { color: #fff; text-decoration: none; }
.prose .btn--gold, .band .btn--gold { color: var(--navy); }
.prose .btn--line, .band .btn--line { color: var(--navy); }
.mode-dark .prose .btn--line, .mode-dark .btn--line { color: #fff; }
.doc small svg, .doc small .arrow svg { width: 16px; height: 12px; }
@media (max-width: 760px) { .ihero { padding-top: calc(var(--header-h) + 76px); } }
.panel { padding: clamp(28px, 4vw, 56px); background: var(--surface); color: var(--text); }
.panel.mode-dark { background: var(--navy); }
.panel.tip { clip-path: polygon(0 0, 100% 0, calc(100% - 4%) 100%, 0 100%); }
.panel.mode-dark p { color: var(--on-navy-2); }
.panel.mode-dark a { color: var(--gold); }
.band.mode-dark { background-color: var(--navy); }
.media-band { margin-bottom: var(--s-4); }
.media-band .imglink { aspect-ratio: 21 / 8; clip-path: polygon(0 0, 100% 0, calc(100% - 4%) 100%, 0 100%); }
.media-band .imglink::after { display: none; }
/* v3 (focal-gate): static photo mosaic replaces the moving strip */
.strip.mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: 12px; margin: var(--s-6) 0 0; }
.strip.mosaic .cell { height: auto; aspect-ratio: 3 / 2; }
.strip.mosaic .cell.port { grid-row: span 2; aspect-ratio: auto; }
.strip.mosaic .cell .imglink, .strip.mosaic .cell:nth-child(odd) .imglink { clip-path: none; height: 100%; }
@media (max-width: 760px) { .strip.mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* v3 (focal-gate): the section bar no longer sticks — fixed header + sticky bar covered the photos
   under them. Reading progress lives on the header's bottom edge instead. */
.site-head .readbar { position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; pointer-events: none; }
.site-head .readbar i { position: absolute; inset: 0; background: var(--gold); transform: scaleX(var(--p, 0)); transform-origin: left; }

/* ---------- Salesianum generator extras ---------- */
.ways-h { font-size: 1.375rem; text-transform: uppercase; letter-spacing: .04em; margin: var(--s-6) 0 var(--s-3); }
.person-mono { display: grid !important; place-items: center; aspect-ratio: 1; border-radius: 50%; background: var(--navy); color: var(--gold); }
.person-mono b { font: 500 2.25rem/1 var(--font-display); letter-spacing: .04em; }
.way .person-mono, .post-card .person-mono { border-radius: 0; aspect-ratio: 3 / 2; }
.news-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--s-6); }
.chip-btn { font: 500 .875rem/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--navy); background: #fff; border: 1px solid var(--line); padding: 14px 20px; min-height: 44px; cursor: pointer; transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
.chip-btn:hover, .chip-btn:focus-visible { border-color: var(--gold); }
.chip-btn[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.post-card[hidden] { display: none; }
.sitemap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-6) var(--s-4); }
.sitemap-grid h3 { font-size: 1.25rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--s-2); }
.sitemap-grid .clubs { columns: 1; }
.form-embed { position: relative; background: #fff; border: 1px solid var(--line); }
.form-embed iframe { display: block; width: 100%; height: 1600px; border: 0; }
.band .event-list { margin-top: var(--s-3); }
.band .numlist .link-arrow { margin-top: 8px; }
.split .media .cap { font-size: .9375rem; }
.explore-band .ways { margin-top: var(--s-4); }
.nav-link { white-space: nowrap; }
@media (max-width: 400px) {
  .head-main .wrap { gap: 12px; }
  .brand { padding: 10px 12px 12px; margin-left: -12px; }
  .brand img { height: 32px; }
}
.split > *, .band-head > * { min-width: 0; }
.prose, .numlist, .acc-b, .person small, .way p { overflow-wrap: anywhere; }
/* header fit with the logo tab (same breakpoint as SSPP) */
.head-main .wrap { gap: 24px; }
.nav-link { padding: 0 12px; font-size: .9375rem; }
.nav-link::after { left: 12px; right: 12px; }
.head-search input { width: 112px; }
.head-search input:focus { width: 240px; }
@media (max-width: 1340px) {
  .nav, .head-search, .rail { display: none; }
  .chrome-burger { display: inline-flex; margin-left: 0; }
  .give { margin-left: auto; display: inline-flex; }
}
@media (max-width: 480px) { .give { padding: 14px 16px 15px 20px; } }
.util nav a { white-space: nowrap; }
@media (max-width: 1340px) { .util nav a[href^="tel:"], .util nav a[href*="salesianumstore"] { display: none; } }
.ihero .eyebrow { text-shadow: 0 1px 2px rgb(0 0 0 / .8), 0 0 18px rgb(0 0 0 / .6); }
.ihero::before { background:
  linear-gradient(90deg, rgb(0 18 45 / .94) 0%, rgb(0 18 45 / .84) 40%, rgb(0 18 45 / .45) 72%, rgb(0 18 45 / .25) 100%),
  linear-gradient(0deg, rgb(0 18 45 / .75) 0%, rgb(0 18 45 / 0) 55%); }
@media (max-width: 820px) { .ihero::before { background: linear-gradient(0deg, rgb(0 18 45 / .95) 0%, rgb(0 18 45 / .82) 55%, rgb(0 18 45 / .7) 100%); } }
.split .media .imglink.natural, .gallery-grid .imglink.natural { clip-path: none; height: auto; }
.split .media .imglink.natural img, .gallery-grid .imglink.natural img { height: auto; object-fit: contain; }
.gallery-grid { align-items: start; }
.person .person-mono, .way .person-mono { background: var(--navy); color: var(--gold); }
.chrome-burger { flex: 0 0 48px; min-width: 48px; }
.el-menu { --el-menu-bp: 1340; }
/* split photos never crop: the frame takes the photo's own proportions (focal-gate, 2026-10-04) */
.split .media .imglink { aspect-ratio: auto; height: auto; }
.split .media .imglink img { height: auto; object-fit: contain; }

/* ===== header + mega v2 (2026-10-05, X: "header logo alignment issue and mega menus need work") ===== */
/* logo tab: logo centred on the nav line (head-main 88px, logo 52px → 18px above), tab hangs 18px below the bar,
   and paints ABOVE an open mega panel so the hang is never cut. Nothing in the bar may shrink. */
.brand { padding: 18px 24px 36px; z-index: 5; }
.brand img { height: 52px; }
.site-head.is-solid .brand { padding: 12px 24px; }
.site-head.is-solid .brand img { height: 40px; }
.nav-link, .nav-link .chev, .head-search, .give { flex: none; }
.nav-link { padding: 0 9px; gap: 4px; }
.nav-link::after { left: 9px; right: 9px; bottom: 24px; }
.nav-link .chev { width: 12px; height: 12px; }

/* mega panel: compact, intro | grouped links | feature */
.mega, .summon.mega { z-index: 1; border-top: 3px solid var(--gold); box-shadow: 0 30px 60px -30px rgb(0 18 45 / .45); }
.mega-inner { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: start;
  padding-top: 40px; padding-bottom: 44px; }
.mega-inner.has-feature { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) 280px; }
.mega-intro { padding-top: 22px; border-top: 1px solid var(--n-200); }
.mega-intro .mega-h { font: 500 2rem/1.05 var(--font-display); letter-spacing: -0.005em; margin: 0 0 12px; color: var(--navy); }
.mega-intro .mega-h a { color: inherit; text-decoration: none; background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 2px no-repeat; transition: background-size var(--dur-3) var(--ease-out); }
.mega-intro .mega-h a:hover, .mega-intro .mega-h a:focus-visible { background-size: 100% 2px; }
.mega-intro p:not(.mega-h) { font-size: 1.0625rem; line-height: 1.5; color: var(--ink-2); margin: 0 0 18px; }
.mega-cols { display: grid; gap: 0 clamp(24px, 3vw, 48px); align-content: start; }
.mega-cols.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mega-cols.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega-col { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--n-200); }
.mega-col > li { border-bottom: 1px solid var(--n-200); }
.mega-col a { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--navy); text-decoration: none;
  opacity: 0; transform: translateY(6px);
  transition: color var(--dur-1) var(--ease-out), padding-left var(--dur-2) var(--ease-out), opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
  transition-delay: 0s, 0s, calc(var(--i, 0) * 22ms), calc(var(--i, 0) * 22ms); }
.mega.on .mega-col a { opacity: 1; transform: none; }
.mega-col a.mega-top { min-height: 48px; padding: 12px 0; font: 500 1.0625rem/1.25 var(--font-display); letter-spacing: .02em; }
.mega-col a.mega-top::after { content: ""; flex: none; width: 8px; height: 8px; border-top: 2px solid var(--gold-ink); border-right: 2px solid var(--gold-ink); transform: rotate(45deg) translateX(-4px); opacity: 0; transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.mega-col a:hover, .mega-col a:focus-visible { color: var(--gold-ink); padding-left: 6px; }
.mega-col a.mega-top:hover::after, .mega-col a.mega-top:focus-visible::after { opacity: 1; transform: rotate(45deg) translateX(0); }
.mega-sub { list-style: none; margin: -4px 0 12px; padding: 0 0 0 14px; border-left: 2px solid var(--gold); }
.mega-sub a { min-height: 36px; padding: 7px 0; font: 400 1rem/1.25 var(--font-body); }
.mega-feature { display: grid; gap: 12px; text-decoration: none; color: var(--navy); }
.mega-feature-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%); }
.mega-feature-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform var(--dur-4) var(--ease-out); }
.mega-feature:hover img, .mega-feature:focus-visible img { transform: scale(1.07); }
.mega-feature-cap { display: inline-flex; align-items: center; gap: 8px; font: 500 .8125rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.mega-feature-cap .ico { width: 16px; height: 16px; color: var(--gold-ink); transition: transform var(--dur-2) var(--ease-out); }
.mega-feature:hover .mega-feature-cap .ico { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .mega-col a { opacity: 1; transform: none; transition: none; } }
.mega-inner > * { min-width: 0; }
.mega-feature { grid-template-columns: minmax(0, 1fr); width: 100%; }
.mega-feature-img { width: 100%; }
/* root cause (2026-10-05): `.head-main .wrap{display:flex;align-items:center}` also matched the mega panel's
   inner `.wrap` (the panel lives inside .head-main), so the panel laid out as a flex row and never as a grid. */
.head-main .mega-inner { display: grid; height: auto; align-items: start; }
.mega-feature { align-self: start; border-top: 1px solid var(--n-200); padding-top: 12px; }
.mega-feature-cap { display: flex; white-space: nowrap; }
.mega-feature .mega-feature-cap { display: flex; margin: 0; white-space: nowrap; }
.mega-feature .mega-feature-img { margin: 0; }
/* responsive header — must stay AFTER the v2 base rules above (they were appended later and beat the old @media overrides) */
@media (max-width: 1340px) { .head-main .wrap { gap: 16px; } }
@media (max-width: 820px) {
  .brand { padding: 12px 16px 20px; margin-left: -16px; }
  .brand img { height: 38px; }
  .site-head.is-solid .brand { padding: 9px 16px; }
  .site-head.is-solid .brand img { height: 32px; }
}
@media (max-width: 600px) {
  .give { display: none !important; }
  .brand { padding: 10px 12px 16px; margin-left: -12px; }
  .brand img { height: 32px; }
}
@media (max-width: 600px) { .chrome-burger { margin-left: auto; } }
/* headshots fill the circle (X 2026-10-05: "profile images arent full circles") — cover-cropped, centred on the face
   (heads sit in the upper third of these 3:4 portraits), never letterboxed */
.person .imglink.headshot { aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--navy); }
.person .imglink.headshot img, .contain .imglink.headshot img, .imglink.headshot img { object-fit: cover !important; object-position: 50% 22% !important; background: none; }

/* logo centring v3 (2026-10-05, X: "the logo vertical alignment issue is after scroll down").
   One formula for every state and width: the logo is centred on the bar ((bar − logo) / 2 above it); the resting
   tab hangs --hang below the bar; the scrolled tab hangs 0. Replaces the fixed 12px scrolled padding that sat the
   logo 12px above the nav line. Proof: qa/logo-align.js (|Δ| ≤ 1.5px at 1440/1366/1024/768/390, top + scrolled). */
.brand { --logo-h: 52px; --hang: 18px;
  padding: calc((var(--head-h) - var(--logo-h)) / 2) 24px calc((var(--head-h) - var(--logo-h)) / 2 + var(--hang)); }
.brand img { height: var(--logo-h); }
.site-head.is-solid .brand { --logo-h: 40px; --hang: 0px; padding: calc((var(--head-h) - var(--logo-h)) / 2) 24px; }
.site-head.is-solid .brand img { height: var(--logo-h); }
@media (max-width: 820px) {
  .brand { --logo-h: 38px; --hang: 12px; padding-left: 16px; padding-right: 16px; }
  .site-head.is-solid .brand { --logo-h: 32px; --hang: 0px; padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 600px) {
  .brand { --logo-h: 32px; --hang: 10px; padding-left: 12px; padding-right: 12px; }
  .site-head.is-solid .brand { --logo-h: 30px; padding-left: 12px; padding-right: 12px; }
}