/* ==========================================================================
   Kremsegg University — shared stylesheet
   Look & feel: warm parchment palette, serif display type (cf. buddhismandai.com)
   Layout: institutional structure with dropdown nav (cf. minerva.edu)
   Type: Noto Serif for headings — self-hosted (woff2 in /fonts), no third-party
         requests. Georgia stays in the stack as an instant-render fallback.
   ========================================================================== */

/* ---- Self-hosted Noto Serif (headings) ---------------------------------- */
/* font-display:swap → text paints immediately in Georgia, then upgrades to
   Noto Serif once the woff2 loads. unicode-range keeps the browser from
   downloading the latin-ext file unless the page actually uses those glyphs. */
@font-face {
  font-family: 'Noto Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/noto-serif-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Noto Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/noto-serif-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Noto Serif'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/noto-serif-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Noto Serif'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/noto-serif-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Noto Serif'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/noto-serif-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Noto Serif'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/noto-serif-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  --cream: #FFFFFF;
  --cream-2: #F3ECDC;
  --paper: #FDF9F0;
  --ink: #2A2118;
  --ink-soft: #4A3E30;
  --muted: #6E5F4D;
  --gold: #B98A4A;
  --gold-dark: #96702F;
  --gold-pale: #E4CFA4;
  --maroon: #7E2F21;
  --maroon-dark: #67251A;
  --brand-maroon: #782718;   /* subheader / eyebrow + outline-button accent */
  --border: #E5DAC3;
  --serif: 'Noto Serif', Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.2; color: var(--ink); margin: 0 0 .6em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); }
h3 {
  font-family: var(--sans); font-size: 1.05rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--brand-maroon);
}
h4 { font-size: 1.1rem; }
p { margin: 0 0 1.1em; }
a { color: var(--gold-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--maroon); }
:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 2px; }
/* No focus ring after taps/clicks — keyboard navigation keeps it via :focus-visible */
:focus:not(:focus-visible) { outline: none; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 1.25rem; }
.narrow { max-width: 780px; }

/* Site-wide subheader / label — maroon sans, wide 0.2em (200) tracking, caps */
.eyebrow {
  font-family: var(--sans); font-size: .78rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--brand-maroon);
  margin: 0 0 .9rem;
}
.lede { font-size: 1.2rem; color: var(--ink-soft); }
.muted { color: var(--muted); }

.rule {
  width: 64px; height: 2px; background: var(--gold); border: 0; margin: 1.4rem 0;
}
.rule--center { margin-left: auto; margin-right: auto; }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-block; font-family: var(--sans); font-size: .95rem; font-weight: 600;
  letter-spacing: .03em; text-decoration: none; border-radius: 999px;
  padding: .8rem 1.9rem; transition: background .15s, color .15s, border-color .15s;
}
.btn--gold { background: var(--gold-dark); color: #fff; border: 1px solid var(--gold-dark); }
.btn--gold:hover { background: var(--maroon); border-color: var(--maroon); color: #fff; }
.btn--ghost { background: transparent; color: var(--brand-maroon); border: 1px solid var(--brand-maroon); }
.btn--ghost:hover { background: var(--brand-maroon); color: #fff; border-color: var(--brand-maroon); }
.btn--light { background: var(--paper); color: var(--maroon); border: 1px solid var(--paper); }
.btn--light:hover { background: var(--gold-pale); border-color: var(--gold-pale); color: var(--maroon-dark); }

.arrow-link {
  font-family: var(--sans); font-weight: 600; font-size: .98rem; text-decoration: none;
  color: var(--gold-dark); border-bottom: 1px solid var(--gold-pale);
}
.arrow-link::after { content: " \2192"; }
.arrow-link:hover { color: var(--maroon); border-color: var(--maroon); }

/* ---- Eyebrow bar (top utility menu) -------------------------------------- */
.eyebrow-bar { background: var(--ink); }
.eyebrow-bar-inner {
  max-width: 1220px; margin: 0 auto; padding: .4rem 1.25rem;
  display: flex; justify-content: flex-end; align-items: center; gap: .9rem;
}
.eyebrow-bar a {
  color: var(--gold-pale); text-decoration: none;
  font-family: var(--sans); font-size: .82rem; font-weight: 600; letter-spacing: .06em;
}
.eyebrow-bar a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.eyebrow-sep { color: var(--gold); }

/* ---- Header / navigation ------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 246, 238, .97);
  border-bottom: 1px solid var(--border);
}
.header-bar { display: flex; align-items: center; gap: 1.5rem; padding: .65rem 1.25rem; max-width: 1220px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand img { width: 46px; height: 44px; }
.brand-name { font-family: var(--serif); font-size: 1.18rem; line-height: 1.15; }
.brand-name small { display: block; font-family: var(--sans); font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-dark); }

.nav { display: flex; align-items: center; gap: .25rem; }
.nav > ul { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.nav a { text-decoration: none; color: var(--ink); }
.nav-link, .nav-toggle-btn {
  display: block; font-family: var(--sans); font-size: .95rem; font-weight: 500;
  padding: .55rem .8rem; background: none; border: 0; cursor: pointer; color: var(--ink);
  border-bottom: 2px solid transparent;
}
.nav-link:hover, .nav-toggle-btn:hover { border-bottom-color: var(--gold); }
.nav-link[aria-current="page"] { border-bottom-color: var(--gold-dark); }

.has-dropdown { position: relative; }
.nav-toggle-btn::after { content: " \25BE"; font-size: .7em; color: var(--gold-dark); }
.dropdown {
  position: absolute; top: 100%; left: 0; min-width: 240px;
  background: var(--paper); border: 1px solid var(--border); border-top: 2px solid var(--gold);
  box-shadow: 0 10px 24px rgba(42, 33, 24, .12);
  list-style: none; margin: 0; padding: .4rem 0; display: none;
}
.has-dropdown.open .dropdown { display: block; }
.dropdown a { display: block; padding: .5rem 1.1rem; font-size: .92rem; }
.dropdown a:hover { background: var(--cream-2); }
.dropdown a[aria-current="page"] { color: var(--gold-dark); font-weight: 600; }
.dropdown .dd-head { padding: .5rem 1.1rem .2rem; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* Hamburger button: three bars that morph into an X when open */
.menu-btn {
  display: none; background: none; border: 0; padding: .6rem; cursor: pointer;
  flex-direction: column; justify-content: center; gap: 6px;
}
.menu-btn .bar {
  display: block; width: 26px; height: 2px; background: var(--ink); border-radius: 1px;
  transition: transform .35s ease, opacity .25s ease;
}
.menu-btn.open .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-btn.open .bar:nth-child(2) { opacity: 0; }
.menu-btn.open .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

body.menu-open { overflow: hidden; }

@media (max-width: 940px) {
  .menu-btn { display: flex; }

  /* Keep the brand and the hamburger/X above the full-screen overlay,
     which shares the header's stacking context */
  .brand, .menu-btn { position: relative; z-index: 60; }

  /* Full-screen overlay menu. Sits just beneath the sticky header (z-index 40 < 50)
     so the brand + hamburger stay visible and clickable on top of it. */
  .nav {
    display: block; position: fixed; inset: 0; z-index: 40;
    background: var(--cream);
    padding: 8.5rem 0 3rem; overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-14px);
    transition: opacity .4s ease, transform .4s ease, visibility 0s linear .4s;
  }
  .nav.open {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .4s ease, transform .4s ease;
  }
  .nav > ul { display: block; max-width: 640px; margin: 0 auto; padding: 0 1.6rem; }

  /* Menu items drift in one after another */
  .nav > ul > li {
    opacity: 0; transform: translateY(10px);
    transition: opacity .35s ease, transform .35s ease;
  }
  .nav.open > ul > li { opacity: 1; transform: none; }
  .nav.open > ul > li:nth-child(1) { transition-delay: .10s; }
  .nav.open > ul > li:nth-child(2) { transition-delay: .16s; }
  .nav.open > ul > li:nth-child(3) { transition-delay: .22s; }
  .nav.open > ul > li:nth-child(4) { transition-delay: .28s; }
  .nav.open > ul > li:nth-child(5) { transition-delay: .34s; }

  .nav-link, .nav-toggle-btn {
    width: 100%; text-align: left;
    font-family: var(--serif); font-size: 1.45rem; font-weight: 400;
    padding: .9rem .2rem; border-bottom: 1px solid var(--border);
  }
  /* Push the dropdown caret to the far right */
  .nav-toggle-btn { display: flex; justify-content: space-between; align-items: center; }
  .dropdown {
    position: static; border: 0;
    box-shadow: none; margin: .2rem 0 .6rem 1rem; background: transparent;
  }
  .dropdown a { font-size: 1.05rem; padding: .55rem 1rem; }
  .brand-name { font-size: 1rem; }
}

/* ---- Hero ---------------------------------------------------------------- */
.hero { padding: 4.5rem 0 4rem; text-align: center; background: radial-gradient(ellipse at 50% -20%, var(--paper) 0%, var(--cream) 65%); }
.hero .lede { max-width: 700px; margin: 0 auto 1.2em; }
/* Extra headline break shown only on narrow screens */
.br-mobile { display: none; }
@media (max-width: 640px) { .br-mobile { display: inline; } }
.hero-emblem { width: 130px; margin: 0 auto 1.6rem; }
.hero-actions { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; margin-top: 1.8rem; }

/* ---- Hero with background image ----------------------------------------- */
.hero--image {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 6rem 0 5.5rem;
  background: var(--cream-2); /* fallback colour before/without the image */
}
.hero--image .wrap { position: relative; z-index: 2; }

/* The image layer (shared by the hero, quote and CTA sections). Scaled up
   slightly so the parallax shift never exposes an edge. The blurred
   placeholder lives on this element's background. */
.parallax-bg {
  position: absolute;
  inset: min(-9%, -54px);     /* bleed for the drift; the px floor covers short banners */
  z-index: 0;
  background-size: cover;
  background-position: center;
  will-change: transform;
}
.parallax-bg .hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s ease;
}
.parallax-bg.loaded .hero-img { opacity: 1; }

/* Scrim for text legibility — a light wash that lifts the photo so dark
   text reads over it, strongest at the centre where the copy sits. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(253,249,240,.68) 0%, rgba(253,249,240,.5) 100%),
    linear-gradient(to bottom, rgba(253,249,240,.55) 0%, rgba(253,249,240,.4) 40%, rgba(253,249,240,.62) 100%);
}

/* Dark text over the lightened image */
.hero--image .eyebrow { color: var(--gold-dark); }
.hero--image h1,
.hero--image .lede { color: var(--ink); }
.hero--image h1 { text-shadow: 0 1px 14px rgba(253,249,240,.7); }
.hero--image .lede { text-shadow: 0 1px 8px rgba(253,249,240,.7); }
.hero--image .rule { border-color: rgba(150,112,47,.5); }
.hero--image .hero-emblem { filter: drop-shadow(0 2px 8px rgba(255,255,255,.6)); }
/* Ghost button styled for the light image */
.hero--image .btn--ghost { color: var(--ink); border-color: var(--gold-dark); }
.hero--image .btn--ghost:hover { background: var(--gold-dark); color: var(--paper); border-color: var(--gold-dark); }

@media (max-width: 640px) { .hero--image { padding: 4.5rem 0 4rem; } }

/* ---- Hero with a flowing animated gradient ------------------------------
   A warm, luminous gold gradient whose colours drift continuously. Dark
   ink/maroon text sits over it, lifted by a soft light centre vignette. */
.hero--gradient {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 6.5rem 0 6rem;
  color: var(--ink);
  background: #F3ECDC; /* fallback */
}
/* Static warm gradient: cream at the top, settling to gold at the base. */
.hero-gradient-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(to bottom,
    #FDF9F0 0%, #F3ECDC 50%, #E4CFA4 100%);
}
.hero--gradient .wrap { position: relative; z-index: 2; }

/* Dark text + accents over the pale gradient */
.hero--gradient .eyebrow { color: var(--brand-maroon); }
.hero--gradient h1 { color: var(--ink); }
.hero--gradient .lede { color: var(--ink-soft); }
.hero--gradient .rule { border-color: rgba(150,112,47,.55); }
.hero--gradient .hero-emblem { filter: drop-shadow(0 2px 8px rgba(120,80,20,.22)); }

@media (max-width: 640px) { .hero--gradient { padding: 4.75rem 0 4.25rem; } }

/* ---- Classic scroll parallax (quote + CTA) -------------------------------
   The image is pinned to the viewport (background-attachment: fixed) so the
   section scrolls over a still image. Same dark overlay as the hero via the
   ::before layer, so the light text pops identically. WebP is served through
   image-set() with a JPEG fallback, and a dark fallback colour keeps the text
   legible before/while the image arrives on slow connections. */
.scroll-parallax { position: relative; isolation: isolate; }
/* Compound selectors so these beat the base `.quote` / `.cta-band`
   `background: var(--maroon)` shorthand that appears later in the file. */
.quote.scroll-parallax,
.cta-band.scroll-parallax {
  background-color: var(--cream-2);           /* solid fallback until image loads */
  background-image:
    -webkit-image-set(
      url("../img/hero-1280.webp") type("image/webp"),
      url("../img/hero-1280.jpg")  type("image/jpeg"));
  background-image:
    image-set(
      url("../img/hero-1280.webp") type("image/webp"),
      url("../img/hero-1280.jpg")  type("image/jpeg"));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.scroll-parallax::before {           /* light overlay — identical to the hero */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(253,249,240,.68) 0%, rgba(253,249,240,.5) 100%),
    linear-gradient(to bottom, rgba(253,249,240,.55) 0%, rgba(253,249,240,.4) 40%, rgba(253,249,240,.62) 100%);
}
.scroll-parallax > * { position: relative; z-index: 1; }
/* Lift the dark text a touch for pop (CTA band only) */
.cta-band.scroll-parallax h2,
.cta-band.scroll-parallax p { color: var(--ink); text-shadow: 0 1px 8px rgba(253,249,240,.7); }
/* Quote band: dark ink text, no shadow */
.quote.scroll-parallax { color: var(--ink); }
.quote.scroll-parallax blockquote,
.quote.scroll-parallax cite { color: var(--ink); text-shadow: none; }

/* Buttons on the light CTA band — darker, solid colours so they don't wash
   out against the lightened photo. Primary is solid maroon; secondary is a
   gold-dark outline with maroon text. */
.cta-band.scroll-parallax .btn--light {
  background: var(--maroon); color: #fff; border-color: var(--maroon);
}
.cta-band.scroll-parallax .btn--light:hover {
  background: var(--maroon-dark); color: #fff; border-color: var(--maroon-dark);
}
.cta-band.scroll-parallax .btn--ghost {
  color: var(--maroon-dark); border-color: var(--gold-dark);
}
.cta-band.scroll-parallax .btn--ghost:hover {
  background: var(--gold-dark); color: #fff; border-color: var(--gold-dark);
}

/* background-attachment: fixed is janky/unsupported on most touch browsers,
   so fall back to a normal scrolling cover image there. */
@media (hover: none), (max-width: 768px) {
  .quote.scroll-parallax, .cta-band.scroll-parallax { background-attachment: scroll; }
}

/* Users who prefer reduced motion get no parallax movement of any kind */
@media (prefers-reduced-motion: reduce) {
  .parallax-bg { transition: none !important; transform: none !important; }
  .quote.scroll-parallax, .cta-band.scroll-parallax { background-attachment: scroll; }
}

.page-hero { padding: 3.6rem 0 3rem; text-align: center; border-bottom: 1px solid var(--border); background: radial-gradient(ellipse at 50% -20%, var(--paper) 0%, var(--cream) 65%); }
.page-hero .lede { max-width: 720px; margin: 0 auto; }
/* Hero subheader — a serif tagline that sits just beneath the main hero title */
.page-hero .hero-sub {
  font-family: var(--sans); font-weight: 600;
  font-size: 1rem; letter-spacing: .2em; text-transform: uppercase;
  line-height: 1.25; color: var(--brand-maroon); margin: 0 0 1rem;
}
/* Warm cream-to-gold gradient, matching the home hero */
.page-hero.page-hero--gradient {
  border-bottom: 0;
  background: linear-gradient(to bottom, #FDF9F0 0%, #F3ECDC 50%, #E4CFA4 100%);
}
.page-hero--gradient .eyebrow { color: var(--brand-maroon); }

/* ---- Subpage hero with background image (half the home hero's height) -----
   Reuses the home hero's parallax layer (.parallax-bg gets the cursor drift
   automatically), dark scrim and light text. */
.page-hero.page-hero--image {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 3rem 0 2.75rem;                 /* ~half the home hero */
  border-bottom: 0;
  background: var(--cream-2);               /* fallback before/without the image */
  color: var(--ink);
}
.page-hero--image .wrap { position: relative; z-index: 2; }
.page-hero--image .eyebrow { color: var(--gold-dark); }
.page-hero--image h1 { color: var(--ink); text-shadow: 0 1px 14px rgba(253,249,240,.7); }
.page-hero--image .lede { color: var(--ink); text-shadow: 0 1px 8px rgba(253,249,240,.7); }

/* Traditional scroll parallax — the image is pinned to the viewport
   (background-attachment: fixed) so the hero scrolls over a still image,
   matching the home-page quote band. */
.page-hero.page-hero--fixed {
  background-color: var(--cream-2);          /* fallback until the image loads */
  background-image:
    -webkit-image-set(
      url("../img/academics-1920.webp?v=2") type("image/webp"),
      url("../img/academics-1920.jpg?v=2")  type("image/jpeg"));
  background-image:
    image-set(
      url("../img/academics-1920.webp?v=2") type("image/webp"),
      url("../img/academics-1920.jpg?v=2")  type("image/jpeg"));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
/* fixed attachment is janky/unsupported on most touch browsers — fall back
   to a normal scrolling cover image there. */
@media (hover: none), (max-width: 768px) {
  .page-hero.page-hero--fixed { background-attachment: scroll; }
}

/* Vision hero — same fixed-attachment parallax as academics, but with a
   responsive background: the browser downloads the smallest file that covers
   the viewport (800 on phones, 1280 on tablets/laptops, 1920 on desktops). */
.page-hero.page-hero--fixed.hero-vision {
  background-image:
    -webkit-image-set(
      url("../img/thevision-1920.webp?v=2") type("image/webp"),
      url("../img/thevision-1920.jpg?v=2")  type("image/jpeg"));
  background-image:
    image-set(
      url("../img/thevision-1920.webp?v=2") type("image/webp"),
      url("../img/thevision-1920.jpg?v=2")  type("image/jpeg"));
}
@media (max-width: 1280px) {
  .page-hero.page-hero--fixed.hero-vision {
    background-image:
      -webkit-image-set(
        url("../img/thevision-1280.webp?v=2") type("image/webp"),
        url("../img/thevision-1280.jpg?v=2")  type("image/jpeg"));
    background-image:
      image-set(
        url("../img/thevision-1280.webp?v=2") type("image/webp"),
        url("../img/thevision-1280.jpg?v=2")  type("image/jpeg"));
  }
}
@media (max-width: 800px) {
  .page-hero.page-hero--fixed.hero-vision {
    background-image:
      -webkit-image-set(
        url("../img/thevision-800.webp?v=2") type("image/webp"),
        url("../img/thevision-800.jpg?v=2")  type("image/jpeg"));
    background-image:
      image-set(
        url("../img/thevision-800.webp?v=2") type("image/webp"),
        url("../img/thevision-800.jpg?v=2")  type("image/jpeg"));
  }
}

/* Left-flushed variant — keeps copy on the left so it clears a right-heavy image */
.page-hero--left { text-align: left; }
.page-hero--left .lede { margin-left: 0; margin-right: 0; max-width: 600px; }
.page-hero--left h1 { max-width: 660px; }
/* Darken the left (where the text sits), keep the right — where the image
   activity is — clearer. */
.page-hero--left .hero-scrim {
  background:
    linear-gradient(to right, rgba(253,249,240,.8) 0%, rgba(253,249,240,.58) 42%, rgba(253,249,240,.2) 100%),
    linear-gradient(rgba(253,249,240,.2), rgba(253,249,240,.2));
}

/* Parallax heroes (vision, academics): hold the copy in a ~500px column on the
   left, flush to the page gutter, so the fixed background image has room to
   breathe on the right. Caps each child so nothing runs wider than the column. */
.page-hero--fixed .wrap > * { max-width: 500px; margin-left: 0; margin-right: auto; }

/* ---- Sections ------------------------------------------------------------ */
.section { padding: 4rem 0; }
.section--alt { background: var(--cream-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section--tight { padding: 2.6rem 0; }
.section-head { text-align: center; max-width: 760px; margin: 0 auto 2.6rem; }

/* Alternating text/image rows */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3.2rem; align-items: center; margin-bottom: 3.5rem; }
.split:last-child { margin-bottom: 0; }
.split--flip .split-media { order: 2; }
@media (max-width: 800px) {
  .split { grid-template-columns: 1fr; gap: 1.6rem; margin-bottom: 2.8rem; }
  .split--flip .split-media { order: 0; }
}

/* Lightweight image placeholder (swap for real photos later) */
.ph {
  background: var(--paper); border: 1px solid var(--gold-pale); border-radius: 3px;
  aspect-ratio: 4 / 3; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .6rem; color: var(--muted); text-align: center; padding: 1rem;
}
.ph--portrait { aspect-ratio: 3 / 4; }
.ph--wide { aspect-ratio: 16 / 7; }
.ph svg { width: 54px; height: 54px; opacity: .9; }
.ph span { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.card {
  background: var(--paper); border: 1px solid var(--border); border-top: 3px solid var(--gold);
  padding: 1.8rem 1.6rem; display: flex; flex-direction: column;
}
.card h3 { margin-bottom: .5rem; }
.card p { flex: 1; color: var(--ink-soft); font-size: .98rem; }
.card .arrow-link { align-self: flex-start; }
a.card { text-decoration: none; transition: box-shadow .15s, transform .15s; }
a.card:hover { box-shadow: 0 8px 22px rgba(42,33,24,.1); transform: translateY(-2px); }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .cards, .cards--2 { grid-template-columns: 1fr; } }

/* Track / program blocks */
.track {
  background: var(--paper); border: 1px solid var(--border);
  padding: 2.4rem 2.2rem; margin-bottom: 1.6rem;
}
.track .degree { font-family: var(--sans); font-size: .8rem; font-weight: 700; letter-spacing: .14em; color: var(--maroon); text-transform: uppercase; }

/* Quote */
.quote { text-align: center; padding: 4rem 1.25rem; background: var(--maroon); color: var(--gold-pale); }
.quote blockquote { font-family: var(--serif); font-size: clamp(1.35rem, 3vw, 1.9rem); font-style: italic; line-height: 1.45; max-width: 820px; margin: 0 auto 1rem; }
.quote cite { font-style: normal; font-family: var(--sans); font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; }

/* Phases (campaign) */
.phase { display: grid; grid-template-columns: 200px 1fr; gap: 2rem; padding: 2.2rem 0; border-top: 1px solid var(--border); }
.phase:last-of-type { border-bottom: 1px solid var(--border); }
.phase-meta .amount { font-family: var(--serif); font-size: 2rem; color: var(--maroon); display: block; }
.phase-meta .years { color: var(--muted); font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 700px) { .phase { grid-template-columns: 1fr; gap: .6rem; } }

/* Definition-style lists */
.deflist { list-style: none; margin: 0; padding: 0; }
.deflist li { padding: 1.1rem 0 1.1rem 1.6rem; border-top: 1px solid var(--border); position: relative; }
.deflist li:last-child { border-bottom: 1px solid var(--border); }
.deflist li::before { content: ""; position: absolute; left: 0; top: 1.75rem; width: 8px; height: 8px; background: var(--gold); border-radius: 50%; }
.deflist strong { font-family: var(--serif); font-weight: 400; font-size: 1.12rem; }

/* People */
.person { display: grid; grid-template-columns: 280px 1fr; gap: 2.6rem; margin-bottom: 3.5rem; align-items: start; }
.person:last-child { margin-bottom: 0; }
.person .role { font-family: var(--sans); font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: .3rem; }
@media (max-width: 760px) { .person { grid-template-columns: 1fr; gap: 1.2rem; } .person .ph--portrait { max-width: 280px; } }

/* Roster — advisory council, consultants, collaborators */
.roster-group { font-family: var(--serif); font-size: 1.5rem; color: var(--ink); margin: 2.6rem 0 1.3rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border); }
.roster-group:first-child { margin-top: 0; }
.roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.6rem 2.2rem; }
.roster-item { break-inside: avoid; }
.roster-name { font-family: var(--serif); font-size: 1.18rem; line-height: 1.25; color: var(--ink); margin: 0 0 .15rem; }
.roster-role { font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dark); margin: 0 0 .5rem; }
.roster-item p { font-size: .95rem; line-height: 1.6; margin: 0; }
.roster-item p.todo { color: var(--muted); font-style: italic; }

/* Notice / note box */
.note {
  background: var(--paper); border: 1px solid var(--gold-pale); border-left: 4px solid var(--gold);
  padding: 1.4rem 1.6rem; font-size: .98rem; color: var(--ink-soft);
}

/* Gradient bands — quote + CTA, matching the home hero's cream-to-gold wash */
.quote.band--gradient,
.cta-band.band--gradient {
  background: linear-gradient(to bottom, var(--gold-pale) 0%, var(--gold) 100%);
  color: var(--ink);
}
.quote.band--gradient blockquote,
.quote.band--gradient cite,
.cta-band.band--gradient h2,
.cta-band.band--gradient p { color: var(--ink); text-shadow: none; }

/* Intro band — maroon strip beneath the hero */
.intro-band { background: var(--ink); color: #fff; text-align: center; padding: 3.4rem 0; }
.intro-band h2 {
  font-family: var(--serif); color: #fff; font-size: clamp(1.45rem, 3vw, 2rem);
  line-height: 1.3; max-width: 900px; margin: 0 auto .9rem;
}
.intro-band p { color: rgba(255,255,255,.9); font-size: 1.1rem; max-width: 760px; margin: 0 auto; }

/* CTA band */
.cta-band { background: var(--maroon); color: var(--paper); text-align: center; padding: 4rem 1.25rem; }
.cta-band h2 { color: var(--paper); }
.cta-band p { color: var(--gold-pale); max-width: 640px; margin: 0 auto 1.6rem; }
.cta-band .hero-actions { margin-top: 1.4rem; }

/* Prev/next pager for section subpages */
.pager { display: flex; justify-content: space-between; gap: 1rem; padding: 1.8rem 0; border-top: 1px solid var(--border); flex-wrap: wrap; }

/* ---- Footer -------------------------------------------------------------- */
.site-footer { background: #241C13; color: #CBBBA0; padding: 3.5rem 0 2rem; font-size: .95rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; margin-bottom: 2.5rem; }
.site-footer h4 { color: var(--gold-pale); font-family: var(--sans); font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-bottom: .9rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .45rem; }
.site-footer a { color: #CBBBA0; text-decoration: none; }
.site-footer a:hover { color: var(--gold-pale); text-decoration: underline; }
.footer-brand { display: flex; align-items: flex-start; gap: .8rem; }
.footer-brand img { width: 52px; height: 50px; }
.footer-brand .brand-name { color: var(--paper); }
.footer-brand .brand-name small { color: var(--gold); }
.footer-bottom { border-top: 1px solid #3B2F21; padding-top: 1.4rem; font-size: .84rem; color: #8F8069; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---- Utility ------------------------------------------------------------- */
.center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.small { font-size: .9rem; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--gold-dark); color: #fff; padding: .6rem 1rem; z-index: 100; }
.skip-link:focus { left: 0; }

/* ---- Page loader: turning dharma wheel ------------------------------------ */
/* Hidden unless JS is available (html.js set inline in <head>), so users
   without JS never get stuck behind it. Removed on window load. */
.page-loader { display: none; }
html.js .page-loader {
  display: flex; position: fixed; inset: 0; z-index: 200;
  background: var(--cream); align-items: center; justify-content: center;
  opacity: 1; transition: opacity .5s ease;
}
/* Returning within the same session: the wheel already greeted them, so skip
   it. `loader-seen` is set inline in <head> before paint, so there's no flash. */
html.loader-seen .page-loader { display: none !important; }
html.js .page-loader img { animation: dharma-spin 2.8s linear infinite; }
html.js .page-loader.done { opacity: 0; pointer-events: none; }
@keyframes dharma-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { html.js .page-loader img { animation: none; } }

/* ---- Scroll reveal animations -------------------------------------------- */
/* Elements get .reveal from js/main.js; .in-view is added when they scroll in.
   If JS is unavailable, nothing is hidden — content stays fully visible. */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; will-change: opacity, transform; }
.reveal.in-view { opacity: 1; transform: none; }
.reveal-stagger.in-view { transition-delay: var(--stagger, 0s); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---- Forms ---------------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }
label { display: block; font-family: var(--sans); font-size: .85rem; font-weight: 600; letter-spacing: .04em; margin-bottom: .35rem; color: var(--ink-soft); }
input, select, textarea {
  width: 100%; padding: .75rem .9rem; font: inherit; color: var(--ink);
  background: var(--paper); border: 1px solid var(--gold-pale); border-radius: 2px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--gold-dark); outline-offset: 1px; border-color: var(--gold-dark); }
textarea { min-height: 150px; resize: vertical; }
.form-card { background: var(--paper); border: 1px solid var(--border); border-top: 3px solid var(--gold); padding: 2.2rem 2rem; }

/* ---- Embeds (e.g. Mailchimp) ---------------------------------------------- */
.embed-frame { width: 100%; min-height: 620px; border: 1px solid var(--border); border-radius: 3px; background: var(--paper); }

@media print {
  .site-header, .site-footer, .cta-band, .menu-btn { display: none; }
}