/* Jame Ul Uloom Residential School — shared design system */
/* 1. Tokens & reset */
:root {
  color-scheme: light;
  --paper: #f6f1e7;
  --paper-2: #ede5d6;
  --surface: #fffdf7;
  --surface-strong: #ffffff;
  --ink: #17221c;
  --muted: #647068;
  --forest: #123c2e;
  --forest-2: #1c5c45;
  --gold: #b88745;
  --gold-pale: #e7d3aa;
  --line: rgba(23, 34, 28, .15);
  --shadow: 0 24px 70px rgba(28, 43, 34, .13);
  --shadow-soft: 0 12px 36px rgba(28, 43, 34, .09);
  --display: "Iowan Old Style", "Palatino Linotype", Baskerville, Georgia, serif;
  --body: Aptos, "Segoe UI", Candara, sans-serif;
  --radius-sm: .8rem;
  --radius: 1.4rem;
  --radius-lg: 2.4rem;
  --header-h: 5rem;
  --max: 76rem;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0d1310;
  --paper-2: #111b16;
  --surface: #17221c;
  --surface-strong: #1c2922;
  --ink: #f2eee3;
  --muted: #afbbb3;
  --forest: #8bc7a7;
  --forest-2: #a6d7bd;
  --gold: #ddb66f;
  --gold-pale: #55472f;
  --line: rgba(242, 238, 227, .16);
  --shadow: 0 24px 70px rgba(0, 0, 0, .34);
  --shadow-soft: 0 12px 36px rgba(0, 0, 0, .25);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  transition: background-color .3s ease, color .3s ease;
}
/* Film grain: a plain low-opacity layer. mix-blend-mode: soft-light on a full-screen fixed layer made the browser blend the whole page again on every frame. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .05;
  z-index: 20;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
::selection { background: var(--gold-pale); color: var(--ink); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.skip-link {
  position: fixed; top: .6rem; left: .6rem; z-index: 1000;
  transform: translateY(-150%); background: var(--ink); color: var(--paper);
  padding: .75rem 1rem; border-radius: .5rem; text-decoration: none;
}
.skip-link:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.container { width: min(calc(100% - 2.2rem), var(--max)); margin-inline: auto; }
.narrow { width: min(calc(100% - 2.2rem), 52rem); margin-inline: auto; }
.eyebrow { margin: 0 0 .8rem; color: var(--gold); font-size: .76rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.kicker { color: var(--forest-2); font-weight: 760; }
.source-note { color: var(--muted); font-size: .82rem; border-left: 2px solid var(--gold); padding-left: .9rem; }
.muted { color: var(--muted); }
.rule { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
.prose p { margin: 0 0 1.25rem; }
.prose p:last-child { margin-bottom: 0; }
/* 2. Header & navigation */
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(20px) saturate(140%);
}
.nav-shell { height: 100%; display: flex; align-items: center; gap: 1rem; }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
.brand img { width: 12.6rem; height: 3.35rem; object-fit: contain; object-position: left center; }
.desktop-nav { margin-left: auto; display: flex; align-items: center; gap: .2rem; }
.desktop-nav > a, .nav-group > summary {
  min-height: 2.65rem; display: inline-flex; align-items: center; gap: .35rem;
  padding: .55rem .65rem; border-radius: 2rem; color: var(--muted);
  font-size: .83rem; font-weight: 720; text-decoration: none; cursor: pointer;
  list-style: none; white-space: nowrap;
}
.desktop-nav > a:hover, .desktop-nav > a[aria-current="page"], .nav-group > summary:hover { color: var(--ink); background: var(--surface); }
.nav-group { position: relative; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::after { content: ""; width: .38rem; height: .38rem; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-.12rem); }
.nav-group[open] > summary::after { transform: rotate(225deg) translate(-.12rem,-.12rem); }
.drop-menu {
  position: absolute; top: calc(100% + .65rem); left: 50%; min-width: 14rem;
  transform: translateX(-50%) translateY(-.35rem); padding: .55rem;
  border: 1px solid var(--line); border-radius: 1.1rem; background: var(--surface-strong);
  box-shadow: var(--shadow); opacity: 0; animation: menu-in .18s ease forwards;
}
.drop-menu::before { content: ""; position: absolute; inset: -.7rem 0 auto; height: .7rem; }
.drop-menu a { display: block; padding: .6rem .75rem; color: var(--muted); border-radius: .65rem; font-size: .88rem; font-weight: 650; text-decoration: none; }
.drop-menu a:hover, .drop-menu a[aria-current="page"] { color: var(--ink); background: var(--paper-2); }
@keyframes menu-in { to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.icon-button {
  width: 2.7rem; height: 2.7rem; flex: 0 0 auto; display: inline-grid; place-items: center;
  padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface);
  cursor: pointer; transition: transform .2s ease, background-color .2s ease;
}
.icon-button:hover { transform: translateY(-2px); background: var(--paper-2); }
.icon-button svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: block; }
.menu-toggle { display: none; }
.mobile-drawer {
  width: min(30rem, 100%); max-width: none; height: 100dvh; max-height: none;
  margin: 0 0 0 auto; padding: 0; border: 0; border-left: 1px solid var(--line);
  background: var(--paper); color: var(--ink); transform: translateX(100%);
  transition: transform .28s cubic-bezier(.2,.7,.2,1), display .28s allow-discrete, overlay .28s allow-discrete;
}
.mobile-drawer[open] { transform: none; }
@starting-style { .mobile-drawer[open] { transform: translateX(100%); } }
.mobile-drawer::backdrop { background: rgba(3, 10, 6, .64); opacity: 0; transition: opacity .28s ease, display .28s allow-discrete, overlay .28s allow-discrete; }
.mobile-drawer[open]::backdrop { opacity: 1; }
@starting-style { .mobile-drawer[open]::backdrop { opacity: 0; } }
.drawer-head { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; padding: 0 1.1rem; border-bottom: 1px solid var(--line); }
.drawer-nav { padding: 1rem 1.1rem 3rem; }
.drawer-nav > a, .drawer-nav summary { display: flex; justify-content: space-between; padding: .9rem .35rem; color: var(--ink); border-bottom: 1px solid var(--line); text-decoration: none; font-family: var(--display); font-size: 1.3rem; cursor: pointer; }
.drawer-nav details > div { padding: .4rem 0 .8rem 1rem; border-bottom: 1px solid var(--line); }
.drawer-nav details a { display: block; padding: .55rem .25rem; color: var(--muted); text-decoration: none; }
/* 3. Layout & typography */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.06; letter-spacing: -.025em; }
h1 { margin: 0; font-size: clamp(3.1rem, 8vw, 7rem); }
h2 { margin: 0 0 1rem; font-size: clamp(2.25rem, 5vw, 4.5rem); }
h3 { margin: 0 0 .65rem; font-size: clamp(1.45rem, 2.2vw, 2rem); }
h4 { margin: 0 0 .4rem; font-size: 1.2rem; }
.section { padding: clamp(4.5rem, 9vw, 8rem) 0; position: relative; }
.section-tint { background: var(--paper-2); }
.section-dark { background: #102d23; color: #fffaf0; }
:root[data-theme="dark"] .section-dark { background: #07110d; }
.section-head { max-width: 48rem; margin-bottom: 3rem; }
.section-head .lede, .lede { color: var(--muted); font-size: clamp(1.08rem, 2vw, 1.35rem); line-height: 1.55; }
.section-dark .lede, .section-dark .muted { color: #bfcbc4; }
.button-row { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin-top: 1.7rem; }
.button {
  min-height: 3rem; display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .75rem 1.15rem; border: 1px solid var(--forest); border-radius: 999px;
  background: var(--forest); color: var(--paper); font-size: .88rem; font-weight: 780;
  text-decoration: none; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
:root[data-theme="dark"] .button { color: #07110d; }
.button:hover { transform: translateY(-2px); box-shadow: 0 8px 22px color-mix(in srgb, var(--forest) 22%, transparent); }
.button-secondary { background: transparent; color: var(--forest); }
.button-quiet { border-color: var(--line); background: var(--surface); color: var(--ink); }
.text-link { color: var(--forest-2); font-weight: 760; text-decoration-thickness: .08em; text-underline-offset: .22em; }
.hero {
  display: block; position: relative; overflow: hidden; isolation: isolate; color: #fffaf1;
  background: radial-gradient(120% 90% at 15% 0%, #1c5c45 0%, #123c2e 45%, #0d241b 100%);
}
/* The campus banner is always shown in full: the frame has the banner's own proportions and the image is "contain"ed. */
/* Slideshow backdrop: blurred, enlarged copy of the current gallery photograph under a dark-green overlay. */
.hero-backdrop { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-backdrop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: blur(20px) saturate(1.15); opacity: 0; transition: opacity 1.4s ease; }
.hero-backdrop img.is-active { opacity: 1; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(8,38,27,.93) 0%, rgba(12,52,37,.84) 42%, rgba(8,34,24,.9) 100%); }
.hero-banner { position: relative; z-index: 2; padding-bottom: clamp(1.5rem, 4vw, 3rem); }
.hero-media {
  display: block; width: 100%; padding: 0; border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius);
  aspect-ratio: 13 / 4; overflow: hidden; background: transparent; cursor: zoom-in; position: relative;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.hero-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; opacity: 0; transition: opacity 1.2s ease; }
.hero-media img.is-active { opacity: 1; }
.hero-media img.is-changing { opacity: .25; }
.hero-copy { position: relative; z-index: 2; max-width: 76rem; padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(1.8rem, 4vw, 3rem); }
.hero-copy > * { max-width: 49rem; }
.hero-copy h1 { text-wrap: balance; }
.hero-copy .eyebrow { color: #f1c67b; }
.hero-copy .lede { max-width: 39rem; margin: 1.35rem 0 0; color: #e4e7e2; }
.hero .button { border-color: #fffaf1; background: #fffaf1; color: #123c2e; }
.hero .button-secondary { background: transparent; color: #fffaf1; }
.page-hero { padding: clamp(4.5rem, 9vw, 8.5rem) 0 clamp(3.5rem, 7vw, 6rem); overflow: hidden; position: relative; }
.page-hero::before { content: ""; position: absolute; width: min(52vw, 42rem); aspect-ratio: 1; right: -18rem; top: -24rem; border: 1px solid var(--gold-pale); border-radius: 50%; box-shadow: 0 0 0 4rem color-mix(in srgb, var(--gold-pale) 18%, transparent), 0 0 0 8rem color-mix(in srgb, var(--gold-pale) 9%, transparent); }
.page-hero .crumbs { margin: 0 0 2rem; color: var(--muted); font-size: .8rem; font-weight: 720; }
.crumbs a { text-decoration: none; }
.page-hero h1 { max-width: 11ch; font-size: clamp(3rem, 7vw, 6rem); }
.page-hero .lede { max-width: 44rem; margin-top: 1.2rem; }
.split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(18rem, .95fr); gap: clamp(2rem, 7vw, 6rem); align-items: center; }
.split.reverse > :first-child { order: 2; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.stat { padding: 1.6rem; background: var(--surface); }
.stat strong { display: block; font-family: var(--display); color: var(--forest); font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 600; line-height: 1; }
.stat span { display: block; margin-top: .55rem; color: var(--muted); font-size: .84rem; }
.quote-block { max-width: 62rem; }
.quote-block blockquote { margin: 0; font-family: var(--display); font-size: clamp(2.4rem, 6vw, 5.5rem); line-height: 1.02; letter-spacing: -.035em; }
.quote-block cite { display: block; margin-top: 1.5rem; color: #c6d1ca; font-style: normal; }
.site-footer { padding: 4.5rem 0 2rem; background: #0b2119; color: #f6f1e7; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2.5rem; }
.footer-brand img { width: 15rem; height: auto; filter: brightness(0) invert(1); opacity: .92; }
.footer-brand p { max-width: 27rem; color: #b9c6be; }
.footer-grid h2 { font-family: var(--body); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #ddb66f; }
.footer-grid a { display: block; margin: .45rem 0; color: #d9e0dc; font-size: .88rem; text-decoration: none; }
.footer-grid a:hover { color: white; text-decoration: underline; text-underline-offset: .2rem; }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 3.5rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.15); color: #9fb0a6; font-size: .78rem; }
/* 4. Cards, media & galleries */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.card-grid.four { grid-template-columns: repeat(4, 1fr); }
.card {
  min-height: 18rem; display: flex; flex-direction: column; padding: 1.45rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  box-shadow: var(--shadow-soft); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.card .card-index { margin-bottom: auto; color: var(--gold); font-family: var(--display); font-size: 2.6rem; }
.card p { margin: 0; color: var(--muted); }
.card .text-link { margin-top: 1.2rem; align-self: flex-start; }
.photo-card { position: relative; min-height: 0; justify-content: flex-start; color: var(--ink); border: 1px solid var(--line); padding: 0; background: var(--surface); }
.card-media { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: #0b2119; }
/* Blurred copy of the same photo fills the letterbox; the sharp copy is never cropped. */
.card-media .fit-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(16px) brightness(.62) saturate(1.1); }
.card-media .fit { position: relative; grid-area: 1 / 1; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.photo-card .card-content { position: relative; z-index: 2; padding: 1.25rem 1.4rem 1.5rem; }
.photo-card p { color: var(--muted); }
.media-frame { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.media-frame img { display: block; width: 100%; height: auto; }
.media-frame.is-portrait img { width: auto; max-width: 100%; max-height: min(78vh, 52rem); margin-inline: auto; }
.media-frame.is-small img { width: auto; max-width: 100%; margin-inline: auto; }
.media-frame.is-portrait, .media-frame.is-small { background: var(--paper-2); }
.caption { margin: .7rem .2rem 0; color: var(--muted); font-size: .8rem; }
.mosaic { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-content: start; }
.mosaic .legacy-photo figcaption { display: none; }
.mosaic .media-frame { border-radius: var(--radius); }
.profile-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--line); }
.profile { padding: 1.25rem; background: var(--surface); }
.profile strong { display: block; font-family: var(--display); font-size: 1.25rem; font-weight: 600; }
.profile span { color: var(--muted); font-size: .83rem; }
.gallery-filters { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 2rem; }
.filter-button { padding: .55rem .85rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); cursor: pointer; font-size: .8rem; font-weight: 760; }
.filter-button:hover, .filter-button.is-active { border-color: var(--forest); background: var(--forest); color: var(--paper); }
:root[data-theme="dark"] .filter-button:hover, :root[data-theme="dark"] .filter-button.is-active { color: #07110d; }
.gallery-grid { columns: 3 18rem; column-gap: 1rem; }
.gallery-item { break-inside: avoid; margin: 0 0 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-soft); }
.gallery-item[hidden] { display: none; }
.gallery-item button { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; overflow: hidden; }
.gallery-item button::after { content: "+"; position: absolute; right: .8rem; bottom: .8rem; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; background: rgba(7,17,13,.72); color: white; font-size: 1.2rem; backdrop-filter: blur(8px); opacity: 0; transform: scale(.8); transition: .25s ease; }
.gallery-item button:hover::after, .gallery-item button:focus-visible::after { opacity: 1; transform: scale(1); }
.gallery-item img { display: block; width: 100%; height: auto; transition: transform .45s ease; }
.gallery-item img.is-small { width: auto; max-width: 100%; margin-inline: auto; }
.gallery-item button { background: var(--paper-2); }
.gallery-item button:hover img { transform: scale(1.025); }
.gallery-item figcaption { padding: .85rem 1rem 1rem; }
.gallery-item strong { display: block; font-family: var(--display); font-size: 1.05rem; }
.gallery-item span { display: block; color: var(--muted); font-size: .76rem; }
.contact-list { display: grid; gap: .8rem; }
.contact-item { padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.contact-item span { display: block; color: var(--muted); font-size: .76rem; font-weight: 760; letter-spacing: .1em; text-transform: uppercase; }
.contact-item a, .contact-item address { display: block; margin-top: .35rem; font-family: var(--display); font-size: 1.25rem; font-style: normal; text-decoration: none; }
.source-panel { padding: clamp(1.4rem, 4vw, 2.4rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.legacy-scan { background: #efe9dc; padding: clamp(.5rem, 2vw, 1.2rem); }
:root[data-theme="dark"] .legacy-scan { background: #c9c0af; }
.legacy-scan img { max-height: 72rem; width: auto; margin-inline: auto; }
/* 5. Dialogs & controls */
.lightbox {
  width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0;
  border: 0; background: rgba(5, 10, 7, .94); color: white; opacity: 0; transform: scale(.985);
  transition: opacity .24s ease, transform .24s ease, display .24s allow-discrete, overlay .24s allow-discrete;
}
.lightbox[open] { display: grid; grid-template-rows: auto 1fr auto; opacity: 1; transform: none; }
@starting-style { .lightbox[open] { opacity: 0; transform: scale(.985); } }
.lightbox::backdrop { background: #050a07; }
.lightbox-toolbar { min-height: 4rem; display: flex; align-items: center; justify-content: flex-end; padding: .5rem 1rem; }
.lightbox .icon-button { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.08); }
.lightbox-stage { min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 0 1rem; }
.lightbox-stage img { max-width: 100%; max-height: calc(100dvh - 10rem); margin: auto; object-fit: contain; border-radius: .4rem; box-shadow: 0 20px 70px rgba(0,0,0,.5); }
.lightbox-nav { width: 3rem; height: 3rem; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; background: rgba(255,255,255,.08); color: white; cursor: pointer; font-size: 1.45rem; }
.lightbox-caption { min-height: 5rem; padding: 1rem 5rem 1.5rem; text-align: center; color: #cbd4cf; }
.lightbox-caption strong { display: block; color: white; font-family: var(--display); font-size: 1.2rem; }
.back-top { position: fixed; right: 1rem; bottom: 1rem; z-index: 30; opacity: 0; transform: translateY(.7rem); pointer-events: none; transition: .2s ease; }
.back-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }

/* 6. Responsive & motion */
.js .reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.65,.2,1); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .stagger > * { opacity: 0; transform: translateY(1.2rem); transition: opacity .6s ease, transform .6s ease; }
.js .stagger.is-visible > * { opacity: 1; transform: none; }
.js .stagger.is-visible > *:nth-child(2) { transition-delay: .08s; }
.js .stagger.is-visible > *:nth-child(3) { transition-delay: .16s; }
.js .stagger.is-visible > *:nth-child(4) { transition-delay: .24s; }
.js .stagger.is-visible > *:nth-child(5) { transition-delay: .32s; }
.js .stagger.is-visible > *:nth-child(6) { transition-delay: .4s; }

@media (max-width: 70rem) {
  .desktop-nav { display: none; }
  .menu-toggle { display: inline-grid; }
  .theme-toggle { margin-left: auto; }
  .card-grid.four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 54rem) {
  :root { --header-h: 4.4rem; }
  .brand img { width: 10rem; height: 2.9rem; }
  .split { grid-template-columns: 1fr; }
  .split.reverse > :first-child { order: initial; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .profile-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 38rem) {
  .container, .narrow { width: min(calc(100% - 1.35rem), var(--max)); }
  h1 { font-size: clamp(2.8rem, 15vw, 4.7rem); }
  h2 { font-size: clamp(2.1rem, 12vw, 3.4rem); }
  .section { padding: 4.2rem 0; }
  .hero-media { border-radius: var(--radius-sm); }
  .card-grid, .card-grid.four { grid-template-columns: 1fr; }
  .card { min-height: 15rem; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding: 1.1rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.3rem; }
  .footer-brand { grid-column: 1 / -1; }
  .profile-list { grid-template-columns: 1fr; }
  .lightbox-stage { grid-template-columns: 1fr; padding: 0 .6rem; }
  .lightbox-stage .lightbox-nav { position: fixed; bottom: 5.5rem; z-index: 2; }
  .lightbox-stage .prev { left: 1rem; }
  .lightbox-stage .next { right: 1rem; }
  .lightbox-caption { padding-inline: 4.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .js .reveal, .js .stagger > * { opacity: 1; transform: none; }
}

/* Additional presentation rules for the completed static migration. */
.section-soft { background: var(--paper-2); }
.section-heading { max-width: 48rem; margin: 0 auto 2.6rem; text-align: center; }
.section-heading .eyebrow { color: var(--gold); }
.section-heading p:not(.eyebrow) { color: var(--muted); }
.hero .hero-bottom { position: relative; z-index: 3; display: flex; justify-content: space-between; gap: 1rem; padding: 1rem max(1.1rem, calc((100vw - var(--max))/2)); border-top: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.78); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
.hero-copy em { color: #f1c67b; font-style: normal; }
.hero .button-secondary { border-color: rgba(255,255,255,.8); }
.photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.2rem; align-items: start; }
.photo-grid.single { grid-template-columns: minmax(0, 1fr); max-width: 60rem; margin-inline: auto; }
/* Lone page photographs are shown at their natural size (never enlarged), centred. */
.photo-grid.single .media-frame img { width: auto; max-width: 100%; margin-inline: auto; }
.legacy-photo { min-width: 0; margin: 0; }
.legacy-photo .media-frame { display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; }
.legacy-photo figcaption { padding: .6rem .15rem 0; color: var(--muted); font-size: .85rem; }
.source-copy { padding: clamp(1.4rem, 4vw, 3rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.source-copy h2 { margin-top: 1.7rem; font-size: clamp(1.6rem, 3vw, 2.5rem); }
.source-copy h2:first-child { margin-top: 0; }
.source-copy p { color: var(--muted); }
.source-quote { border-left: 4px solid var(--gold); padding: .6rem 1.3rem; margin: 1.5rem 0; font-family: var(--display); font-size: 1.4rem; }
.featured-strip { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; margin-bottom: 2rem; align-items: start; }
.center { text-align: center; }
.contact-cta { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(1.5rem, 5vw, 3.5rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-soft); }
.contact-cta h2 { max-width: 12ch; }
.contact-cta p:not(.eyebrow) { color: var(--muted); }
.trust-image img { width: 100%; max-height: 34rem; object-fit: contain; border-radius: var(--radius); background: rgba(255,255,255,.06); }
.gallery-note { color: var(--muted); font-size: .8rem; margin-top: 1.5rem; }
.table-wrap { overflow-x: auto; }
.table-wrap table { width: 100%; border-collapse: collapse; }
.table-wrap td { padding: .8rem; border: 1px solid var(--line); }
@media(max-width: 54rem) { .photo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .featured-strip { grid-template-columns: repeat(2,minmax(0,1fr)); } .contact-cta { align-items: flex-start; flex-direction: column; } }
@media(max-width: 38rem) { .photo-grid { grid-template-columns: 1fr; } .hero .hero-bottom { display: none; } .featured-strip { grid-template-columns: 1fr; } }

/* 7. Glass surfaces & motion enhancements */
:root {
  --glass: color-mix(in srgb, var(--surface) 58%, transparent);
  --glass-strong: color-mix(in srgb, var(--surface-strong) 74%, transparent);
  --glass-edge: rgba(255, 255, 255, .55);
  --glass-blur: blur(18px) saturate(160%);
  --orb-a: rgba(184, 135, 69, .28);
  --orb-b: rgba(28, 92, 69, .24);
  --orb-c: rgba(231, 211, 170, .5);
}
:root[data-theme="dark"] {
  --glass: color-mix(in srgb, var(--surface) 52%, transparent);
  --glass-strong: color-mix(in srgb, var(--surface-strong) 70%, transparent);
  --glass-edge: rgba(255, 255, 255, .1);
  --orb-a: rgba(221, 182, 111, .16);
  --orb-b: rgba(139, 199, 167, .14);
  --orb-c: rgba(28, 92, 69, .32);
}

/* Ambient drifting colour behind the glass panels (injected by app.js). */
.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
/* Soft-edged gradient discs instead of filter: blur(70px): animating a big blurred layer repaints it every frame (about 80 ms per frame in tests);
   a gradient disc is painted once and then only moved by the compositor. */
.ambient span { position: absolute; width: 54vmax; aspect-ratio: 1; border-radius: 50%; animation: orb-drift 26s ease-in-out infinite alternate; will-change: transform; }
.ambient span:nth-child(1) { top: -12vmax; left: -10vmax; background: radial-gradient(closest-side, var(--orb-a) 30%, transparent); }
.ambient span:nth-child(2) { top: 30vh; right: -14vmax; background: radial-gradient(closest-side, var(--orb-b) 30%, transparent); animation-duration: 32s; animation-delay: -8s; }
.ambient span:nth-child(3) { bottom: -18vmax; left: 25vw; background: radial-gradient(closest-side, var(--orb-c) 30%, transparent); animation-duration: 38s; animation-delay: -16s; }
@keyframes orb-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(8vw, 6vh, 0) scale(1.12); }
  100% { transform: translate3d(-6vw, 10vh, 0) scale(.94); }
}
.section-soft, .section-tint { background: color-mix(in srgb, var(--paper-2) 62%, transparent); }

/* Scroll progress bar (injected by app.js). */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 3px; transform-origin: 0 50%; transform: scaleX(var(--progress, 0)); background: linear-gradient(90deg, var(--forest-2), var(--gold), var(--gold-pale)); pointer-events: none; }

/* Header becomes a floating glass bar once the page scrolls. */
.site-header { background: color-mix(in srgb, var(--paper) 62%, transparent); transition: background-color .3s ease, box-shadow .3s ease; }
.site-header.is-scrolled { background: color-mix(in srgb, var(--paper) 48%, transparent); box-shadow: 0 10px 34px rgba(0, 0, 0, .08), inset 0 -1px 0 var(--glass-edge); }
.desktop-nav > a, .nav-group > summary { transition: color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.desktop-nav > a:hover, .desktop-nav > a[aria-current="page"], .nav-group > summary:hover { background: var(--glass-strong); box-shadow: inset 0 0 0 1px var(--glass-edge); }

/* Shared glass treatment. */
.drop-menu, .card:not(.photo-card), .stats, .contact-item, .source-panel, .source-copy, .contact-cta,
.profile-list, .gallery-item, .icon-button, .filter-button, .button-quiet, .mobile-drawer {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: color-mix(in srgb, var(--line) 60%, var(--glass-edge));
  box-shadow: var(--shadow-soft), inset 0 1px 0 var(--glass-edge);
}
.drop-menu { background: var(--glass-strong); box-shadow: var(--shadow), inset 0 1px 0 var(--glass-edge); }
.mobile-drawer { background: var(--glass-strong); }
.stat, .profile { background: transparent; }
.stats, .profile-list { background: var(--glass); }
.stat, .profile { box-shadow: inset 0 0 0 .5px var(--line); }
.drop-menu a { transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.drop-menu a:hover { transform: translateX(3px); background: color-mix(in srgb, var(--paper-2) 70%, transparent); }
.filter-button { transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .2s ease; }
.filter-button:hover { transform: translateY(-2px); }
.filter-button:hover, .filter-button.is-active { background: var(--forest); }

/* Pointer spotlight on glass cards (position set by app.js). */
.card, .contact-item, .gallery-item, .contact-cta { position: relative; }
.card:not(.photo-card)::before, .contact-item::before, .contact-cta::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--gold) 18%, transparent), transparent 60%);
  transition: opacity .35s ease;
}
.card:hover::before, .contact-item:hover::before, .contact-cta:hover::before { opacity: 1; }
.card { transition: opacity .65s ease, transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; }
.card:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); }
.contact-item { transition: transform .25s ease, box-shadow .25s ease; }
.contact-item:hover { transform: translateY(-3px); box-shadow: var(--shadow), inset 0 1px 0 var(--glass-edge); }

/* Media frames: glossy sheen on hover. */
.media-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 48%, transparent 64%); transform: translateX(-120%); transition: transform .9s ease; }
.media-frame:hover::after, .legacy-photo .media-frame:focus-visible::after { transform: translateX(120%); }
.media-frame img { transition: transform .7s cubic-bezier(.2,.65,.2,1); }
.media-frame:hover img { transform: scale(1.015); }

/* Buttons: light sweep and glass secondary style. */
.button { position: relative; overflow: hidden; isolation: isolate; }
.button::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.35) 50%, transparent 75%); transform: translateX(-130%); transition: transform .7s ease; }
.button:hover::before { transform: translateX(130%); }
.button:active { transform: translateY(0) scale(.98); }
.hero .button-secondary { background: rgba(255,255,255,.1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.button-secondary { background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.icon-button { transition: transform .25s ease, background-color .2s ease, box-shadow .25s ease; }
.icon-button:hover { transform: translateY(-2px) rotate(-8deg); box-shadow: var(--shadow-soft), 0 0 0 4px color-mix(in srgb, var(--gold) 16%, transparent); }
.theme-toggle svg { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.theme-toggle:active svg { transform: rotate(90deg) scale(.8); }

/* Homepage hero: entrance choreography, Ken Burns drift, glass footer strip. */
.hero-copy > * { opacity: 0; animation: rise-in .9s cubic-bezier(.2,.7,.2,1) forwards; }
.hero-copy > :nth-child(1) { animation-delay: .1s; }
.hero-copy > :nth-child(2) { animation-delay: .25s; }
.hero-copy > :nth-child(3) { animation-delay: .45s; }
.hero-copy > :nth-child(4) { animation-delay: .6s; }
.hero-copy em { background: linear-gradient(90deg, #f1c67b, #fff1cf, #f1c67b); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 6s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.hero .hero-bottom { background: rgba(6, 18, 12, .28); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); opacity: 0; animation: fade-in 1s ease .9s forwards; }
@keyframes rise-in { from { opacity: 0; transform: translateY(1.6rem); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes fade-in { to { opacity: 1; } }

/* Sub-page heroes: rotating rings and animated heading. */
.page-hero::before { animation: ring-spin 40s linear infinite; }
.page-hero::after { content: ""; position: absolute; width: 18rem; aspect-ratio: 1; left: -6rem; bottom: -9rem; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--gold) 22%, transparent), transparent 70%); animation: orb-drift 18s ease-in-out infinite alternate; pointer-events: none; }
@keyframes ring-spin { to { transform: rotate(360deg) scale(1.04); } }
.page-hero h1 { animation: rise-in 1s cubic-bezier(.2,.7,.2,1) both .1s; }
.page-hero .container { position: relative; z-index: 1; }

/* Richer reveals: slight scale (no blur filter: it repainted whole blocks while they faded in). */
.js .reveal { transform: translateY(1.8rem) scale(.985); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.65,.2,1); }
.js .reveal.is-visible { transform: none; }
.js .stagger > * { transform: translateY(1.4rem) scale(.97); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1); }
.js .stagger.is-visible > *:nth-child(7) { transition-delay: .48s; }
.js .stagger.is-visible > *:nth-child(8) { transition-delay: .56s; }
.js .stagger.is-visible > *:nth-child(9) { transition-delay: .64s; }
.js .stagger.is-visible > *:nth-child(n+10) { transition-delay: .72s; }
/* After the entrance, cards hand transforms back to hover/tilt with no delay. */
.js .stagger.is-settled > * { transition-delay: 0s !important; }

/* Gallery: animated filtering and glass captions. */
.gallery-item { transition: transform .35s ease, box-shadow .35s ease; }
.gallery-item:hover { transform: translateY(-4px); box-shadow: var(--shadow), inset 0 1px 0 var(--glass-edge); }
.gallery-item.is-entering { animation: pop-in .45s cubic-bezier(.2,.7,.2,1) both; }
@keyframes pop-in { from { opacity: 0; transform: translateY(1rem) scale(.96); } to { opacity: 1; transform: none; } }

/* Lightbox: frosted backdrop and image zoom-in. */
.lightbox { background: rgba(5, 10, 7, .7); -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%); }
.lightbox::backdrop { background: rgba(5, 10, 7, .5); }
.lightbox-stage img.is-swapping { animation: lightbox-in .35s cubic-bezier(.2,.7,.2,1); }
@keyframes lightbox-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.lightbox-nav { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background-color .2s ease, transform .2s ease; }
.lightbox-nav:hover { background: rgba(255,255,255,.18); transform: scale(1.08); }

/* Footer: glass divider glow. */
.site-footer { position: relative; overflow: hidden; }
.site-footer::before { content: ""; position: absolute; width: 36rem; aspect-ratio: 1; right: -12rem; top: -18rem; border-radius: 50%; background: radial-gradient(circle, rgba(221,182,111,.16), transparent 70%); animation: orb-drift 24s ease-in-out infinite alternate; pointer-events: none; }
.site-footer > * { position: relative; }
.back-top { background: var(--glass-strong); }

/* Graceful fallback where backdrop-filter is unsupported. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .drop-menu, .card:not(.photo-card), .stats, .contact-item, .source-panel, .source-copy, .contact-cta,
  .profile-list, .gallery-item, .icon-button, .filter-button, .button-quiet, .mobile-drawer { background: var(--surface); }
}
@media (prefers-reduced-motion: reduce) {
  .ambient span, .page-hero::before, .page-hero::after, .site-footer::before, .hero-copy em { animation: none !important; }
  .hero-copy > *, .hero .hero-bottom { opacity: 1; }
  .card, .card:hover { transform: none; }
}
@media (max-width: 38rem) {
  /* On phones the three blurred orbs stay in place instead of drifting: the endless animation of large blurred
     layers roughly halved the frame rate in our mobile tests, while a still orb looks the same at rest. */
  .ambient span { animation: none; will-change: auto; }
}

/* ---- Image zoom: photographs enlarge 20% when hovered, focused or touched ----
   Frames no longer clip the zoom, so the enlarged picture is shown whole (never cropped). */
:root { --img-zoom: 1.2; }
.media-frame, .gallery-item, .gallery-item button, .card-media, .hero-media, .photo-card { overflow: visible; }
.media-frame::after { display: none; }
.media-frame img { border-radius: inherit; }
.gallery-item img { border-radius: var(--radius) var(--radius) 0 0; }
.card-media { border-radius: var(--radius) var(--radius) 0 0; }
.card-media .fit-bg { clip-path: inset(0 round var(--radius) var(--radius) 0 0); }
.hero-media img { border-radius: inherit; }
.legacy-photo, .gallery-item, .photo-card, .trust-image, .hero-banner { position: relative; }
.media-frame img, .gallery-item img, .card-media .fit, .trust-image img {
  position: relative; transform-origin: center; backface-visibility: hidden;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
}
.hero-media img { transition: opacity 1.2s ease, transform .35s cubic-bezier(.2, .8, .2, 1); }
@media (hover: hover) {
  .media-frame:hover img, .gallery-item button:hover img, .photo-card:hover .card-media .fit,
  .hero-media:hover img, .trust-image:hover img { transform: scale(var(--img-zoom)); }
}
.media-frame:focus-visible img, .media-frame:active img, .media-frame.is-zoomed img,
.gallery-item button:focus-visible img, .gallery-item button:active img, .gallery-item button.is-zoomed img,
.photo-card:active .card-media .fit, .photo-card.is-zoomed .card-media .fit,
.hero-media:focus-visible img, .hero-media:active img, .hero-media.is-zoomed img,
.trust-image:active img, .trust-image.is-zoomed img { transform: scale(var(--img-zoom)); }
.legacy-photo:hover, .legacy-photo:focus-within, .legacy-photo:active, .legacy-photo:has(.is-zoomed),
.gallery-item:hover, .gallery-item:focus-within, .gallery-item:has(.is-zoomed),
.photo-card:hover, .photo-card:active, .photo-card.is-zoomed,
.trust-image:hover, .trust-image.is-zoomed, .hero-banner:hover, .hero-banner:has(.is-zoomed) { z-index: 30; }
.media-frame:hover img, .gallery-item button:hover img, .photo-card:hover .card-media .fit, .hero-media:hover img { box-shadow: 0 18px 45px rgba(0, 0, 0, .35); }
@media (prefers-reduced-motion: reduce) {
  .media-frame img, .gallery-item img, .card-media .fit, .trust-image img, .hero-media img { transition-duration: .01ms; }
}

/* ---- Hero: adapts to phones, tablets and PCs; the whole photograph always stays visible ---- */
.hero-copy { padding-block: clamp(1.5rem, min(7vw, 6vh), 6rem) clamp(1.1rem, min(3.5vw, 2.6vh), 2.6rem); }
.hero-copy h1 { font-size: clamp(2.35rem, min(8.4vw, 8.4vh), 5.4rem); overflow-wrap: break-word; }
.hero-copy .lede, .hero-copy .hero-lede { margin-top: clamp(.7rem, 2vh, 1.35rem); }
.hero .button-row { margin-top: clamp(1rem, 2.6vh, 1.7rem); }
/* Keep the whole campus photograph on screen: on short windows the photo frame narrows (same proportions) instead of falling below the fold. */
.hero-banner { max-width: clamp(28rem, calc((100svh - 27rem) * 3.25), 76rem); }
:root[data-theme="dark"] .hero .button-secondary { color: #fffaf1; }
@media (max-width: 48rem) {
  .hero-banner { padding-inline: 0; max-width: none; padding-bottom: 1.2rem; }
  .hero-media { border-radius: 0; border-inline: 0; box-shadow: none; }
}
@media (max-width: 30rem) {
  .hero .button-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: .65rem; }
  .hero .button-row .button { width: 100%; justify-content: center; text-align: center; }
  .hero-copy .lede, .hero-copy .hero-lede { font-size: 1.02rem; }
}
@media (min-width: 48.01rem) and (max-height: 34rem) { .hero-copy { padding-block: 2rem 1.2rem; } }
@media (prefers-reduced-motion: reduce) { .hero-backdrop img, .hero-media img { transition-duration: .01ms; } }

/* ---- Logos: original logo1.png (675x180, transparent), correct ratio at every width ---- */
.brand img { width: clamp(9.4rem, 48vw, 12.6rem); height: auto; aspect-ratio: 675 / 180; object-fit: contain; }
.footer-brand img { width: min(100%, 17rem); height: auto; aspect-ratio: 675 / 180; box-sizing: border-box; padding: .7rem 1rem; border-radius: var(--radius-sm); background: #fffaf1; filter: none; opacity: 1; }
:root[data-theme="dark"] .brand img { padding: .3rem .55rem; border-radius: .7rem; background: #fffaf1; box-sizing: content-box; }

/* Light theme contrast: the small gold labels and the link inside a dark band were about 2.8:1 and 1.9:1; darker gold on cream, light gold on the dark band (dark theme and photo heroes unchanged) */
:where(:root[data-theme="light"]) .eyebrow, :where(:root[data-theme="light"]) .section-heading .eyebrow { color: #8a621a; }
.section-dark .eyebrow, .section-dark .section-heading .eyebrow { color: #e0b96e; }
.section-dark .text-link { color: #f1c67b; }

/* Dark theme: the gold-button rule above sets dark text on every .button; secondary and quiet buttons are glass, so they keep light text */
:root[data-theme="dark"] .button-secondary { color: var(--forest-2); }
:root[data-theme="dark"] .button-quiet { color: var(--ink); }
:root[data-theme="dark"] .page-connect .button-secondary { color: var(--cx-ink); }

/* ---- Main-portal additions (Jamia Masjid portal + sibling institution pages) ---- */
.brand-text { display: inline-flex; flex-direction: column; line-height: 1.1; text-decoration: none; color: var(--forest); font-family: var(--display); font-weight: 650; font-size: 1.35rem; letter-spacing: -.01em; }
.brand-text small { margin-top: .2rem; color: var(--muted); font-family: var(--body); font-size: .7rem; font-weight: 760; letter-spacing: .14em; text-transform: uppercase; }
.footer-brand .brand-text { color: #f6f1e7; font-size: 1.6rem; }
.footer-brand .brand-text small { color: #ddb66f; }
.portal-content { padding-top: clamp(2rem, 5vw, 3.5rem); }
.portal-content > .container > :first-child { margin-top: 0; }
.portal-content h2 { margin: 2.6rem 0 1rem; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.portal-content .prose { max-width: 52rem; }
.page-hero h1 { max-width: 16ch; }
.page-hero .crumbs a { color: inherit; }
ul.portal-cards { list-style: none; margin: 1.2rem 0; padding: 0; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.portal-cards .card { min-height: 0; }
.portal-cards .card h3 { margin: 0 0 .5rem; font-size: 1.3rem; }
.portal-cards .card p + p { margin-top: .3rem; }
.portal-cards .card a:not(.go) { color: var(--forest-2); font-weight: 700; }
.card a.go { display: inline-block; margin-top: 1.1rem; align-self: flex-start; color: var(--forest-2); font-weight: 760; text-underline-offset: .22em; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .7rem 1.8rem; margin: 1.6rem 0; padding: 1.4rem 1.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--glass); box-shadow: var(--shadow-soft), inset 0 1px 0 var(--glass-edge); }
.facts dt { color: var(--muted); font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding-top: .25rem; }
.facts dd { margin: 0; font-family: var(--display); font-size: 1.15rem; }
.facts a { color: var(--forest-2); }
.times { list-style: none; margin: 1rem 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .8rem; }
.times li { padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--glass); box-shadow: var(--shadow-soft), inset 0 1px 0 var(--glass-edge); color: var(--muted); font-size: .9rem; }
.times strong { display: block; color: var(--ink); font-family: var(--display); font-size: 1.25rem; font-weight: 600; }
.ann { margin: 1rem 0; padding: 0; list-style: none; counter-reset: ann; display: grid; gap: .6rem; }
.ann li { counter-increment: ann; display: flex; gap: 1rem; align-items: baseline; padding: .9rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--glass); }
.ann li::before { content: counter(ann, decimal-leading-zero); color: var(--gold); font-family: var(--display); font-size: 1.4rem; }
.ann a { color: var(--ink); font-weight: 650; text-underline-offset: .22em; }
.table-wrap { margin: 1.5rem 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--glass); box-shadow: var(--shadow-soft), inset 0 1px 0 var(--glass-edge); }
table.cal { width: 100%; border-collapse: collapse; font-size: .96rem; min-width: 38rem; }
table.cal th, table.cal td { text-align: left; vertical-align: top; padding: .85rem 1.1rem; border-bottom: 1px solid var(--line); }
table.cal th { color: var(--forest); font-family: var(--display); font-size: 1.05rem; border-bottom: 2px solid var(--gold); white-space: nowrap; }
table.cal tr:last-child td { border-bottom: 0; }
table.cal tbody tr:hover { background: color-mix(in srgb, var(--gold) 9%, transparent); }
.subnav { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0 0 2rem; }
.subnav a { padding: .55rem .95rem; border: 1px solid var(--line); border-radius: 999px; background: var(--glass); color: var(--muted); font-size: .82rem; font-weight: 760; text-decoration: none; transition: background-color .25s ease, color .25s ease, transform .2s ease; }
.subnav a:hover, .subnav a:focus-visible { background: var(--forest); border-color: var(--forest); color: var(--paper); transform: translateY(-2px); }
:root[data-theme="dark"] .subnav a:hover, :root[data-theme="dark"] .subnav a:focus-visible { color: #07110d; }
.portal-hero .hero-copy { padding-block: clamp(4rem, 10vw, 8rem) clamp(3rem, 6vw, 5rem); }
.portal-hero .hero-copy h1 { max-width: 16ch; }
.portal-hero .hero-bottom { margin-top: 1rem; }
@media (max-width: 54rem) { .times { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .times { grid-template-columns: repeat(2, minmax(0, 1fr)); } .facts { grid-template-columns: 1fr; gap: .2rem; } .facts dd { margin-bottom: .8rem; } }
.footer-grid a.brand-text { display: inline-flex; margin: 0 0 1rem; }
.footer-grid a.brand-text small { display: block; }
.page-hero h1 { max-width: 22ch; font-size: clamp(2.3rem, 5vw, 4rem); }

/* ==== Photographic sections & Institutions directory (prefix pf-) ==== */
/* Hero shortcut icon */
.button .btn-icon { width: 1.1rem; height: 1.1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Scroll reveal: items are hidden only when scripting is active (html.js), so content is never lost without JS. */
.js .pf-reveal { opacity: 0; transform: translateY(1.2rem); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.65,.2,1); }
.js .pf-reveal.is-visible { opacity: 1; transform: none; }
.js .pf-stagger > * { opacity: 0; transform: translateY(1.2rem); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.65,.2,1); }
.js .pf-stagger.is-visible > * { opacity: 1; transform: none; }
.js .pf-stagger.is-visible > :nth-child(2) { transition-delay: .07s; }
.js .pf-stagger.is-visible > :nth-child(3) { transition-delay: .14s; }
.js .pf-stagger.is-visible > :nth-child(4) { transition-delay: .21s; }
.js .pf-stagger.is-visible > :nth-child(5) { transition-delay: .28s; }
.js .pf-stagger.is-visible > :nth-child(n+6) { transition-delay: .35s; }
.js .pf-stagger.is-settled > * { transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  .js .pf-reveal, .js .pf-stagger > * { opacity: 1; transform: none; transition: none; }
}

/* Sections */
.pf-section { padding: clamp(3rem, 7vw, 5.5rem) 0; position: relative; }
.pf-tint { background: color-mix(in srgb, var(--paper-2) 70%, transparent); }
.pf-section h2 { margin: 0 0 1rem; font-size: clamp(1.8rem, 3.6vw, 2.8rem); text-wrap: balance; }
.pf-head { max-width: 44rem; margin-bottom: 2rem; }
.pf-head p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 1.08rem; }
.pf-more { margin: 2rem 0 0; }

/* Intro split + emblem */
.pf-intro { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.pf-intro p:not(.eyebrow) { color: var(--muted); font-size: 1.08rem; }
.pf-intro p .button { color: var(--paper); }
:root[data-theme="dark"] .pf-intro p .button { color: #07110d; }
.pf-emblem { padding: clamp(1.4rem, 3vw, 2.2rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(160deg, #123c2e, #0b2119); color: #f6f1e7; box-shadow: var(--shadow); text-align: center; }
.pf-emblem img { display: block; width: min(11rem, 55%); height: auto; aspect-ratio: 1; margin: 0 auto 1.4rem; border-radius: 50%; background: #fffaf1; padding: .6rem; box-shadow: 0 0 0 .35rem rgba(221,182,111,.35); }
.pf-emblem dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: 0; }
.pf-emblem dt { color: #ddb66f; font-size: .64rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.pf-emblem dd { margin: .15rem 0 0; font-family: var(--display); font-size: 1.15rem; }

/* Photo area: whole photograph over its own blurred copy, never cropped */
/* --pad: breathing room so the sharp photo stays clear of the clipping, rounded frame */
.pf-media { --pad: .55rem; position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #0b2119; }
.pf-media .fit-bg { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; filter: blur(18px) brightness(.6) saturate(1.1); }
.pf-media .fit { position: absolute; inset: var(--pad); display: block; width: calc(100% - 2 * var(--pad)); height: calc(100% - 2 * var(--pad)); max-width: none; max-height: none; object-fit: contain; filter: drop-shadow(0 5px 10px rgba(0,0,0,.45)); transition: filter .3s ease; }
.pf-note { margin: 0; padding: .35rem .9rem; background: #0b2119; border-top: 1px solid rgba(255,255,255,.12); color: #ddb66f; font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
/* Hover: the photograph is never scaled (it would be clipped); shadow + border + card lift instead. */
/* Hover: photographs are never scaled (that would clip them); gold edge, deeper shadow and card lift instead. */
.pf-card:hover .pf-media .fit, .pf-card:focus-within .pf-media .fit, .pf-tile:hover .pf-media .fit, .pf-tile:focus-within .pf-media .fit, .pf-feature:hover .pf-media .fit { filter: drop-shadow(0 0 1.5px var(--gold)) drop-shadow(0 12px 16px rgba(0,0,0,.55)); }
/* The scroll-reveal rule sets transform:none with higher specificity; restore the hover lift above it. */
.js .pf-stagger.is-visible > .pf-card:hover, .js .pf-stagger.is-visible > .pf-card:focus-within { transform: translateY(-5px); }
.js .pf-stagger.is-visible > .pf-tile:hover, .js .pf-stagger.is-visible > .pf-tile:focus-within { transform: translateY(-4px); }
.js .pf-stagger.is-visible > .pf-link:hover, .js .pf-stagger.is-visible > .pf-link:focus-visible { transform: none; }

/* Institution cards */
.pf-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1.4rem; }
.pf-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-soft); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.pf-card:hover, .pf-card:focus-within { transform: translateY(-5px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
.pf-body { display: flex; flex: 1; flex-direction: column; padding: 1.2rem 1.35rem 1.4rem; }
.pf-tag { margin: 0 0 .35rem; color: var(--gold); font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.pf-body h3 { margin: 0 0 .5rem; font-size: 1.28rem; line-height: 1.2; }
.pf-body p:not(.pf-tag) { margin: 0; color: var(--muted); font-size: .95rem; }
.pf-go { margin-top: auto; padding-top: 1.1rem; align-self: flex-start; color: var(--forest-2); font-weight: 760; text-decoration: none; }
.pf-go::after { content: ""; position: absolute; inset: 0; } /* whole card is the click target */
.pf-go span { display: inline-block; transition: transform .25s ease; }
.pf-card:hover .pf-go span, .pf-go:focus-visible span { transform: translateX(4px); }
.pf-go:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: .3rem; }
.pf-credit { margin: 2rem 0 0; color: var(--muted); font-size: .85rem; max-width: 46rem; }

/* Brand panel for institutions with no photograph yet */
.pf-brand { display: grid; place-items: center; background: radial-gradient(circle at 78% 18%, rgba(221,182,111,.22), transparent 55%), linear-gradient(145deg, #123c2e, #0b2119); }
.pf-brand::before { content: ""; position: absolute; width: 14rem; aspect-ratio: 1; right: -4rem; bottom: -6rem; border: 1px solid rgba(221,182,111,.35); border-radius: 50%; box-shadow: 0 0 0 1.4rem rgba(221,182,111,.07); }
.pf-initials { position: relative; color: #e9c98d; font-family: var(--display); font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 600; letter-spacing: .02em; }
.pf-brand-sub { position: absolute; left: 1rem; bottom: .8rem; color: rgba(246,241,231,.7); font-size: .64rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.pf-card:nth-child(3n+2) .pf-brand { background: radial-gradient(circle at 20% 80%, rgba(221,182,111,.2), transparent 55%), linear-gradient(145deg, #1c5c45, #0f3427); }
.pf-card:nth-child(3n) .pf-brand { background: radial-gradient(circle at 50% 0%, rgba(221,182,111,.2), transparent 60%), linear-gradient(145deg, #0e2f24, #174c3a); }

/* Institutions page: tighter heading-to-grid spacing */
.page-hero-compact { padding-bottom: clamp(1.2rem, 3vw, 2rem); }
.portal-content-tight { padding-top: clamp(1rem, 2.5vw, 1.8rem); }
.page-hero-compact .lede { margin-bottom: 0; }

/* Facilities mosaic */
.pf-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.pf-tile { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); transition: transform .3s ease, box-shadow .3s ease; }
.pf-tile:hover, .pf-tile:focus-within { transform: translateY(-4px); box-shadow: var(--shadow); }
.pf-tile { background: linear-gradient(150deg, #123c2e, #0b2119); }
.pf-tile a { position: relative; display: block; color: #fffaf1; text-decoration: none; }
.pf-cap { display: flex; flex-direction: column; padding: .7rem 1.1rem .95rem; }
.pf-tile .pf-media { aspect-ratio: 3 / 2; }
.pf-cap strong { font-family: var(--display); font-size: 1.2rem; font-weight: 600; }
.pf-cap small { color: #ddb66f; font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.pf-tile a:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }

/* Residential School feature */
.pf-feature { display: grid; grid-template-columns: 1fr; overflow: hidden; border-radius: var(--radius-lg); background: linear-gradient(150deg, #123c2e, #0b2119); color: #f6f1e7; box-shadow: var(--shadow); }
.pf-feature-media { --pad: .9rem; aspect-ratio: 1399 / 405; width: 100%; } /* the photograph's own proportions: shown whole, no letterbox */
.pf-feature-copy { display: flex; flex-direction: column; justify-content: center; max-width: 52rem; padding: clamp(1.6rem, 4vw, 3rem); }
.pf-feature-copy h2 { margin: 0 0 1rem; color: #fffaf1; font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.pf-feature-copy .eyebrow { color: #f1c67b; }
.pf-feature-copy p { color: #d6dfd9; }
.pf-feature-copy .button { border-color: #fffaf1; background: #fffaf1; color: #123c2e; }
.pf-feature-copy .button-secondary { background: transparent; color: #fffaf1; border-color: rgba(255,255,255,.7); }

/* Further exploration links */
.pf-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1rem; }
.pf-link { position: relative; display: flex; flex-direction: column; gap: .3rem; height: 100%; padding: 1.2rem 3rem 1.2rem 1.3rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); text-decoration: none; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.pf-link strong { font-family: var(--display); font-size: 1.15rem; font-weight: 600; }
.pf-link span { color: var(--muted); font-size: .88rem; line-height: 1.45; }
.pf-link i { position: absolute; right: 1.1rem; top: 1.2rem; color: var(--gold); font-style: normal; font-size: 1.2rem; transition: transform .25s ease; }
.pf-link:hover, .pf-link:focus-visible { transform: translateY(-3px); border-color: var(--gold); box-shadow: var(--shadow-soft); }
.pf-link:hover i, .pf-link:focus-visible i { transform: translateX(4px); }

@media (max-width: 62rem) {
  .pf-intro { grid-template-columns: 1fr; }
  .pf-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 36rem) {
  .pf-tiles { grid-template-columns: 1fr; }
}

/* home.html additions */
.pf-home-intro { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: clamp(1.6rem, 4vw, 3.5rem); align-items: start; }
.pf-home-intro .prose { max-width: none; }
.pf-home-intro .pf-emblem { position: sticky; top: calc(var(--header-h) + 1rem); }
.pf-home-feature { margin: 2.8rem 0 0; }
.pf-lede { margin: -.4rem 0 1.4rem; max-width: 46rem; color: var(--muted); font-size: 1.08rem; }
.portal-content .pf-tiles { margin-top: 0; }
.portal-content .pf-more { margin-top: 1.4rem; }
@media (max-width: 62rem) { .pf-home-intro { grid-template-columns: 1fr; } .pf-home-intro .pf-emblem { position: static; max-width: 26rem; } }
@media (max-width: 36rem) { .pf-media { --pad: .5rem; } .pf-feature { border-radius: var(--radius); } .pf-feature-media { --pad: .6rem; } }
.pf-home-intro .pf-emblem dd { font-size: 1rem; }

/* ==== Premium layer: header logo, hero photography, glass (all prefixed pf-, main portal only) ==== */
/* Header logo: logo1.png at its own 675:180 proportions, never cropped or stretched */
.site-header .brand-logo { display: inline-flex; align-items: center; flex: none; }
.site-header .brand img { width: clamp(8.4rem, 40vw, 12.4rem); height: auto; aspect-ratio: 675 / 180; object-fit: contain; }
/* Tighter logo where the 9-item desktop menu is close to full width, so nothing overlaps */
@media (min-width: 70.01rem) and (max-width: 82rem) { .site-header .brand img { width: 8.6rem; } }
@media (max-width: 30rem) { .site-header .brand img { width: clamp(8.4rem, 48vw, 10.4rem); } }

/* Hero background: three decorative photographs cross-fade slowly (opacity only) under a navy wash; see the splash-hero theme block at the end of this file */
.pf-hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.pf-hbg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; opacity: 0; filter: saturate(.85) blur(1.5px); transform: none; animation: pf-hero-fade 30s ease-in-out infinite; will-change: opacity; }
.pf-hbg.a { animation-delay: -3s; } .pf-hbg.b { animation-delay: 7s; } .pf-hbg.c { animation-delay: 17s; }
@keyframes pf-hero-fade { 0% { opacity: 0; } 9% { opacity: .9; } 33% { opacity: .9; } 42% { opacity: 0; } 100% { opacity: 0; } }

/* Glass: translucent surface, restrained blur, soft highlight edge */
.pf-glass { border: 1px solid rgba(255,255,255,.3); border-radius: var(--radius); background: linear-gradient(145deg, rgba(255,255,255,.17), rgba(255,255,255,.06)); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); box-shadow: 0 20px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35); }
.pf-hero-card { display: none; color: #fffaf1; text-decoration: none; }
@media (min-width: 80rem) {
  .pf-hero-card { display: flex; flex-direction: column; gap: .7rem; position: absolute; z-index: 3; right: max(1.1rem, calc((100vw - var(--max)) / 2)); bottom: 5.4rem; width: 21rem; padding: .6rem; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
  .pf-hero-card img { display: block; width: 100%; height: auto; border-radius: .7rem; }
  .pf-hero-card span { display: flex; flex-direction: column; padding: 0 .4rem .4rem; }
  .pf-hero-card small { color: #f1c67b; font-size: .66rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
  .pf-hero-card strong { font-family: var(--display); font-size: 1.1rem; font-weight: 600; line-height: 1.25; }
  .pf-hero-card:hover, .pf-hero-card:focus-visible { transform: translateY(-4px); border-color: rgba(241,198,123,.8); box-shadow: 0 26px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.45); }
}

/* Decorative translucent photographs behind sections: blurred, masked to fade out, very slow drift. Never content. */
.pf-section { overflow: hidden; }
.pf-section > .container { position: relative; z-index: 1; }
.pf-bgwrap { position: relative; isolation: isolate; }
.pf-bgwrap > :not(.pf-bgphoto) { position: relative; z-index: 1; }
.pf-bgphoto { position: absolute; top: 0; bottom: 0; z-index: 0; width: min(62%, 56rem); overflow: hidden; pointer-events: none; opacity: .16; }
.pf-bg-right { right: 0; -webkit-mask-image: linear-gradient(to left, #000 25%, transparent); mask-image: linear-gradient(to left, #000 25%, transparent); }
.pf-bg-left { left: 0; -webkit-mask-image: linear-gradient(to right, #000 25%, transparent); mask-image: linear-gradient(to right, #000 25%, transparent); }
.pf-bgphoto img { display: block; width: 100%; height: 100%; object-fit: cover; filter: blur(2px) saturate(.8); animation: pf-drift 44s ease-in-out infinite alternate; }
@keyframes pf-drift { from { transform: scale(1.06) translateX(-2%); } to { transform: scale(1.12) translateX(2%); } }
:root[data-theme="dark"] .pf-bgphoto { opacity: .12; }
@media (max-width: 48rem) { .pf-bgphoto { width: 100%; opacity: .12; } .pf-bgphoto img { animation: none; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pf-bgphoto img { animation: none; transform: none; } }

/* Glass treatment for the existing panels (same classes as before; photos inside stay uncropped and untransformed) */
.pf-card, .pf-link { background: color-mix(in srgb, var(--surface) 72%, transparent); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); box-shadow: var(--shadow-soft), inset 0 1px 0 var(--glass-edge); }
.pf-tile { background: linear-gradient(150deg, rgba(18,60,46,.84), rgba(11,33,25,.8)); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.18); }
.pf-emblem { background: linear-gradient(160deg, rgba(18,60,46,.86), rgba(11,33,25,.8)); border-color: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.22); }
.pf-feature { background: linear-gradient(150deg, rgba(18,60,46,.92), rgba(11,33,25,.9)); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.2); }
.pf-link:hover, .pf-link:focus-visible { background: color-mix(in srgb, var(--surface) 88%, transparent); }

/* Recognitions gallery (renders only when real photographs are supplied): whole photographs at their own aspect ratio */
.pf-gallery { list-style: none; margin: 1.2rem 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: 1.2rem; align-items: start; }
.pf-fig figure { margin: 0; padding: .6rem; border: 1px solid var(--line); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 72%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--shadow-soft), inset 0 1px 0 var(--glass-edge); }
.pf-fig img { display: block; width: 100%; height: auto; border-radius: .5rem; }
.pf-fig figcaption { padding: .7rem .3rem .2rem; color: var(--muted); font-size: .9rem; }

/* Nine menu items + logo need ~75rem; below that use the hamburger menu (portal only; base.css untouched) */
@media (min-width: 70.01rem) and (max-width: 75rem) {
  .desktop-nav { display: none; }
  .menu-toggle { display: inline-grid; }
  .theme-toggle { margin-left: auto; }
}

/* ==== Recognitions glass gallery (prefix rg-) ==== */
.rg-panel { --rg-cream: #f6f1e7; --rg-gold: #ddb66f; position: relative; margin: 2.4rem 0 1rem; padding: clamp(1.2rem, 3.2vw, 2.6rem); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); color: var(--rg-cream);
  background: radial-gradient(60rem 28rem at 85% -10%, rgba(221,182,111,.20), transparent 60%), radial-gradient(40rem 24rem at 0% 100%, rgba(60,150,115,.22), transparent 60%), linear-gradient(155deg, #123c2e, #0a1f17);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.14); }
.rg-head { max-width: 42rem; margin: 0 0 clamp(1.4rem, 3vw, 2.2rem); }
.rg-eyebrow { margin: 0 0 .4rem; color: var(--rg-gold); font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.rg-panel h2 { margin: 0 0 .6rem; color: var(--rg-cream); font-size: clamp(1.7rem, 3.4vw, 2.5rem); text-wrap: balance; }
.rg-head p:not(.rg-eyebrow) { margin: 0; color: rgba(246,241,231,.74); font-size: 1rem; }

.rg-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); align-items: start; }
.rg-item { min-width: 0; position: relative; }
.rg-item:hover, .rg-item:focus-within, .rg-item:has(.is-active) { z-index: 2; }

.rg-card { position: relative; display: flex; flex-direction: column; margin: 0; padding: .6rem .6rem .2rem; overflow: visible; isolation: isolate;
  border: 1px solid rgba(255,255,255,.16); border-radius: 1.2rem;
  background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.04) 55%, rgba(255,255,255,.07));
  -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 10px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(255,255,255,.05);
  transition: transform .45s cubic-bezier(.2,.65,.2,1), box-shadow .45s ease, border-color .35s ease, background-color .35s ease; }
/* diagonal highlight sheen (decorative, sits behind the photo) */
.rg-card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: .55; transition: opacity .4s ease;
  background: linear-gradient(115deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 38%), radial-gradient(circle at 100% 0%, rgba(221,182,111,.22), transparent 45%); }

/* Photo: shown whole at its own ratio. No object-fit, no zoom, no radius clipping the artwork. */
.rg-photo { display: block; line-height: 0; background: #fffdf7; border-radius: 3px; outline-offset: 3px; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.rg-photo img { display: block; width: 100%; height: auto; max-width: 100%; border-radius: 3px; }
.rg-photo:focus-visible, .rg-open:focus-visible { outline: 3px solid var(--rg-gold); }

.rg-card figcaption { display: flex; flex-direction: column; gap: .15rem; padding: .75rem .35rem .65rem; }
.rg-name { color: var(--rg-cream); font-family: var(--display); font-size: 1.05rem; font-weight: 650; line-height: 1.2; }
.rg-role { min-height: 2.4em; color: rgba(246,241,231,.72); font-size: .8rem; line-height: 1.2; }
/* Reserved row: revealed in place, so nothing below it moves */
.rg-more { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem .6rem; min-height: 1.5rem; margin-top: .25rem; padding-top: .45rem; border-top: 1px solid rgba(221,182,111,.35);
  opacity: 0; transform: translateY(-.35rem); visibility: hidden; transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s; }
.rg-date { color: var(--rg-gold); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.rg-open { margin-left: auto; color: var(--rg-cream); font-size: .78rem; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(221,182,111,.6); }
.rg-open:hover { color: var(--rg-gold); }

/* Hover / keyboard focus / tap-activated state: whole card scales, never the image alone */
.rg-card:hover, .rg-card:focus-within, .rg-card.is-active {
  transform: translateY(-6px) scale(1.04); border-color: rgba(221,182,111,.75);
  background: linear-gradient(160deg, rgba(255,255,255,.2), rgba(255,255,255,.07) 55%, rgba(255,255,255,.12));
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  box-shadow: 0 26px 50px rgba(0,0,0,.42), 0 0 0 1px rgba(221,182,111,.35), 0 0 26px rgba(221,182,111,.18), inset 0 1px 0 rgba(255,255,255,.4); }
.rg-card:hover::before, .rg-card:focus-within::before, .rg-card.is-active::before { opacity: 1; }
.rg-card:hover .rg-more, .rg-card:focus-within .rg-more, .rg-card.is-active .rg-more { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }

/* Light theme: the same glass gallery on a paper panel (layout, hover lift, sheen and entrance animation are unchanged; only colours differ) */
:root[data-theme="light"] .rg-panel { --rg-cream: #14281e; --rg-gold: #8a621a; border-color: rgba(20,40,30,.14);
  background: radial-gradient(60rem 28rem at 85% -10%, rgba(221,182,111,.28), transparent 60%), radial-gradient(40rem 24rem at 0% 100%, rgba(60,150,115,.14), transparent 60%), linear-gradient(155deg, #fdfaf3, #efe8d8);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.8); }
:root[data-theme="light"] .rg-head p:not(.rg-eyebrow) { color: rgba(20,40,30,.78); }
:root[data-theme="light"] .rg-role { color: rgba(20,40,30,.74); }
:root[data-theme="light"] .rg-card { border-color: rgba(20,40,30,.13);
  background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(255,255,255,.7) 55%, rgba(255,255,255,.82));
  box-shadow: 0 10px 26px rgba(40,30,10,.14), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(20,40,30,.05); }
:root[data-theme="light"] .rg-card::before { opacity: .4; background: linear-gradient(115deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 38%), radial-gradient(circle at 100% 0%, rgba(221,182,111,.25), transparent 45%); }
:root[data-theme="light"] .rg-photo { box-shadow: 0 2px 10px rgba(40,30,10,.25); }
:root[data-theme="light"] .rg-more { border-top-color: rgba(138,98,26,.4); }
:root[data-theme="light"] .rg-open { border-bottom-color: rgba(138,98,26,.6); }
:root[data-theme="light"] .rg-card:hover, :root[data-theme="light"] .rg-card:focus-within, :root[data-theme="light"] .rg-card.is-active {
  border-color: rgba(138,98,26,.6); background: linear-gradient(160deg, #fff, rgba(255,255,255,.86) 55%, rgba(255,255,255,.95));
  box-shadow: 0 24px 46px rgba(40,30,10,.26), 0 0 0 1px rgba(138,98,26,.3), 0 0 26px rgba(221,182,111,.3), inset 0 1px 0 #fff; }

/* Entrance: each card fades up as it enters the viewport, staggered by column position */
.js .rg-item { opacity: 0; transform: translateY(1.4rem); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.65,.2,1); }
.js .rg-item.is-in { opacity: 1; transform: none; }
.js .rg-item.is-in:nth-child(4n+2) { transition-delay: .08s; }
.js .rg-item.is-in:nth-child(4n+3) { transition-delay: .16s; }
.js .rg-item.is-in:nth-child(4n+4) { transition-delay: .24s; }

@media (max-width: 70rem) { .rg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 52rem) { .rg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .js .rg-item.is-in:nth-child(n) { transition-delay: 0s; } .js .rg-item.is-in:nth-child(2n) { transition-delay: .1s; } }
@media (max-width: 34rem) {
  .rg-grid { grid-template-columns: minmax(0, 1fr); max-width: 26rem; margin-inline: auto; }
  .js .rg-item.is-in:nth-child(n) { transition-delay: 0s; }
  .rg-card:hover, .rg-card:focus-within, .rg-card.is-active { transform: translateY(-3px) scale(1.02); }
}
/* Touch screens: no hover, so the date and the full-size link are always printed under the picture, and one tap on the picture opens it */
@media (hover: none) {
  .rg-card:hover { transform: none; }
  .rg-more { opacity: 1; transform: none; visibility: visible; transition: none; }
  .rg-card:active { transform: scale(.985); transition-duration: .1s; }
}
@media (prefers-reduced-motion: reduce) {
  .js .rg-item, .js .rg-item.is-in { opacity: 1; transform: none; transition: none; }
  .rg-card, .rg-card::before, .rg-more { transition: none; }
  .rg-card:hover, .rg-card:focus-within, .rg-card.is-active, .rg-card.is-active:hover { transform: none; }
  .rg-more { transform: none; }
}

/* ==== Splash hero: two-photograph panel below the heading and buttons (follows the Residential School hero's framed-photo layout) ==== */
.portal-hero .hero-copy { padding-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.pf-hp-wrap { position: relative; z-index: 2; padding-bottom: 1.4rem; }
.pf-hp { display: flex; gap: .7rem; padding: .7rem; border-radius: 1.6rem; box-shadow: 0 24px 60px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.35); }
/* flex-grow equals each photo's aspect ratio, so both share one height and neither is cropped or stretched */
.pf-hp-fig { display: flex; flex-direction: column; gap: .5rem; min-width: 0; color: #fffaf1; text-decoration: none; }
.pf-hp-a { flex: 3.455 1 0; } .pf-hp-b { flex: 3.457 1 0; }
.pf-hp-fig img { display: block; width: 100%; height: auto; border-radius: .6rem; box-shadow: 0 6px 18px rgba(0,0,0,.35); transition: box-shadow .3s ease; }
.pf-hp-fig span { padding: 0 .3rem .1rem; color: #f1c67b; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.pf-hp-fig:hover img, .pf-hp-fig:focus-visible img { box-shadow: 0 0 0 2px rgba(241,198,123,.85), 0 12px 28px rgba(0,0,0,.45); }
.pf-hp-fig:focus-visible { outline: 3px solid #f1c67b; outline-offset: 3px; border-radius: .7rem; }

/* ==== Homepage hero: "Modern Overlay" - one authentic photograph revealed through a navy gradient, text on the left ==== */
/* Navy is deepest on the left behind the text and fades to almost nothing on the right, so the photograph keeps its natural colour there.
   The photograph is a decorative backdrop (the same picture is not repeated as content), so cover-fit is fine. */
.portal-hero {
  --hx-navy: #071a4d; --hx-navy-2: #0a2a72; --hx-gold: #e6c06a; --hx-gold-2: #c99a3b; --hx-sky: #8cc8f0;
  display: flex; align-items: center;
  min-height: clamp(34rem, 50vw, 48rem);
  background: var(--hx-navy);
  text-align: left;
}
.portal-hero .pf-hbg { object-fit: cover; object-position: 60% 50%; opacity: 1; filter: none; transform: none; animation: none; }
.portal-hero::before {
  background:
    radial-gradient(42% 55% at 88% 6%, rgba(140, 200, 240, .22), transparent 72%),
    linear-gradient(0deg, rgba(6, 20, 62, .5) 0%, transparent 34%),
    linear-gradient(90deg, rgba(6, 18, 56, .95) 0%, rgba(7, 26, 77, .9) 30%, rgba(9, 38, 98, .62) 52%, rgba(14, 58, 130, .2) 76%, rgba(14, 58, 130, 0) 100%);
}
.portal-hero .hero-copy { padding-block: clamp(3rem, 6vw, 5.5rem); }
.portal-hero .hero-copy > * { max-width: 36rem; margin-inline: 0; opacity: 0; animation: hx-rise 1s cubic-bezier(.22, .7, .2, 1) forwards; }
.portal-hero .hero-copy > :nth-child(1) { animation-delay: .05s; }
.portal-hero .hero-copy > :nth-child(2) { animation-delay: .15s; }
.portal-hero .hero-copy > :nth-child(3) { animation-delay: .25s; }
.portal-hero .hero-copy > :nth-child(4) { animation-delay: .32s; }
.portal-hero .hero-copy > :nth-child(5) { animation-delay: .4s; }
.portal-hero .hero-copy > :nth-child(6) { animation-delay: .5s; }
.portal-hero .hero-copy > :nth-child(7) { animation-delay: .62s; }
@keyframes hx-rise { from { opacity: 0; transform: translateY(.9rem); } to { opacity: 1; transform: none; } }

.portal-hero .hx-kicker { margin: 0 0 clamp(.7rem, 1.6vw, 1.1rem); color: var(--hx-gold); font-size: clamp(.68rem, .55vw + .5rem, .82rem); font-weight: 600; letter-spacing: .3em; text-transform: uppercase; }
.portal-hero .hero-copy > h1 { max-width: 44rem; margin: 0; color: #fff; font-family: var(--display); font-size: clamp(2.6rem, 5.6vw + .4rem, 5.6rem); font-weight: 600; line-height: 1; letter-spacing: -.01em; text-transform: uppercase; text-shadow: 0 2px 28px rgba(3, 12, 44, .55); }
.portal-hero .hx-gold { background: linear-gradient(180deg, #f6dd95 0%, var(--hx-gold) 45%, var(--hx-gold-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.portal-hero .hx-label { margin: clamp(.7rem, 1.4vw, 1rem) 0 0; color: #fff; font-size: clamp(.72rem, .6vw + .5rem, .95rem); font-weight: 500; letter-spacing: .26em; text-transform: uppercase; }
.portal-hero .hx-rule { display: block; width: min(100%, 22rem); height: 1px; margin-top: clamp(1rem, 2vw, 1.4rem); background: linear-gradient(90deg, var(--hx-gold), rgba(230, 192, 106, .15)); }
.portal-hero .hero-copy > .hero-lede { max-width: 30rem; margin-top: clamp(1rem, 2vw, 1.4rem); color: rgba(255, 255, 255, .92); font-size: clamp(1rem, .5vw + .85rem, 1.25rem); line-height: 1.6; text-shadow: 0 1px 14px rgba(3, 12, 44, .6); }
.portal-hero .hero-copy > .button-row { max-width: 46rem; }
.portal-hero .button-row { justify-content: flex-start; gap: .8rem; margin-top: clamp(1.3rem, 2.6vw, 2rem); }

/* buttons: gold primary with navy text, translucent ghost secondary with a thin white border */
.hero.portal-hero .button-row .button { min-height: 3.2rem; padding: .8rem 1.3rem; border-radius: .45rem; font-size: .84rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease, filter .25s ease; }
.hero.portal-hero .button-row .button::before { display: none; }
.hero.portal-hero .button-row .hx-btn-gold { border: 1px solid #e9c46e; background: linear-gradient(180deg, #f3d489 0%, #d9ac4d 100%); color: var(--hx-navy); }
.hero.portal-hero .button-row .button:hover, .hero.portal-hero .button-row .button:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(3, 12, 44, .5); }
.hero.portal-hero .button-row .hx-btn-gold:hover, .hero.portal-hero .button-row .hx-btn-gold:focus-visible { filter: brightness(1.07); }
.hero.portal-hero .button-row .button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.portal-hero .button .btn-icon { stroke: currentColor; }

/* highlights: four existing site areas, line icons, thin vertical separators */
.portal-hero .hx-points { max-width: 36rem; margin: clamp(1.8rem, 4vw, 3rem) 0 0; padding: 0; list-style: none; display: flex; }
.portal-hero .hx-points li { flex: 1 1 0; padding-inline: clamp(.5rem, 1.4vw, 1.1rem); border-left: 1px solid rgba(255, 255, 255, .28); }
.portal-hero .hx-points li:first-child { padding-left: 0; border-left: 0; }
.portal-hero .hx-points a { display: flex; flex-direction: column; align-items: center; gap: .5rem; color: #fff; font-size: clamp(.62rem, .35vw + .5rem, .74rem); letter-spacing: .12em; line-height: 1.35; text-align: center; text-transform: uppercase; text-decoration: none; transition: color .25s ease; }
.portal-hero .hx-points a:hover, .portal-hero .hx-points a:focus-visible { color: var(--hx-gold); }
.portal-hero .hx-points a:focus-visible { outline: 2px solid var(--hx-gold); outline-offset: 4px; border-radius: 2px; }
.portal-hero .hx-points svg { width: 1.7rem; height: 1.7rem; fill: none; stroke: var(--hx-gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 40rem) {
  .portal-hero { min-height: 0; }
  .portal-hero .pf-hbg { object-position: 72% 50%; }
  /* phones: the navy runs top to bottom behind the text instead of left to right */
  .portal-hero::before {
    background:
      radial-gradient(70% 40% at 90% 0%, rgba(140, 200, 240, .2), transparent 70%),
      linear-gradient(180deg, rgba(6, 18, 56, .9) 0%, rgba(7, 26, 77, .84) 55%, rgba(9, 38, 98, .62) 100%);
  }
  .portal-hero .hero-copy { padding-block: 2.6rem 2.2rem; }
  .portal-hero .hx-kicker { letter-spacing: .2em; }
  .portal-hero .hx-label { letter-spacing: .16em; }
  .portal-hero .button-row { flex-direction: column; align-items: stretch; width: min(100%, 20rem); }
  .hero.portal-hero .button-row .button { width: 100%; justify-content: center; }
  .portal-hero .hx-points { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 0; max-width: 20rem; }
  .portal-hero .hx-points li, .portal-hero .hx-points li:first-child { padding: 0 .6rem; border-left: 0; }
  .portal-hero .hx-points li:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .28); }
  .portal-hero .hx-points a { flex-direction: row; gap: .6rem; text-align: left; }
  .portal-hero .hx-points a br { display: none; }
  .portal-hero .hx-points svg { width: 1.4rem; height: 1.4rem; flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .portal-hero .hero-copy > * { opacity: 1; animation: none; transform: none; }
  .hero.portal-hero .button-row .button, .portal-hero .hx-points a { transition: none; }
}

/* Institutions page on phones: 14 cards stack in one column, and each card used to run its own live blur
   (backdrop-filter plus a blurred photo), which made scrolling lag. This is scoped to the long card list
   (.pf-grid-long) and to small screens, so the desktop look and every other page are unchanged. */
@media (max-width: 48rem) {
  .pf-grid-long > .pf-card {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    content-visibility: auto; contain-intrinsic-size: auto 29rem; /* skip painting cards that are far off screen */
  }
  .pf-grid-long .pf-media .fit-bg { filter: blur(8px) brightness(.6) saturate(1.1); }
}

/* Bayanath page styles (video cards, speaker card, navy glass layout) now live in bayanath.css, loaded by Bayanath.html only. */

/* ==== Interior-page photograph galleries (prefix pv-): whole photographs, caption below, same card language as the rest of the portal ==== */
.pv-section { margin: clamp(2rem, 4vw, 3rem) 0 1.2rem; }
.pv-head { max-width: 42rem; margin: 0 0 1.2rem; }
.pv-head h2 { margin: 0 0 .4rem; }
.pv-head p { margin: 0; color: var(--muted); }
.pv-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1.2rem; align-items: start; }
.pv-card { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-soft); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.pv-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
.pv-media { aspect-ratio: 3 / 2; }
.pv-card figcaption { display: flex; flex-direction: column; gap: .15rem; padding: .85rem 1rem 1rem; border-top: 1px solid var(--line); }
.pv-card figcaption strong { font-family: var(--display); font-size: 1.05rem; line-height: 1.25; }
.pv-card figcaption span { color: var(--muted); font-size: .85rem; }
@media (prefers-reduced-motion: reduce) { .pv-card { transition: none; } .pv-card:hover { transform: none; } }

/* ==== Homepage dark mode: navy, neutral and gold (scoped to body.page-home in dark mode only; light mode and every other page are untouched) ==== */
/* Tokens: the homepage's green dark palette is replaced by navy surfaces with gold accents. Everything that already reads these
   variables (links, kickers, cards, panels, prayer times, announcements) follows automatically; hard-coded greens are overridden below. */
:root[data-theme="dark"] .page-home {
  --paper: #070e27; --paper-2: #0c1738; --surface: #0f1a3d; --surface-strong: #15234f;
  --ink: #f5f2ea; --muted: #b8c2d8;
  --forest: #e6c06a; --forest-2: #e6c06a; --gold: #e6c06a; --gold-pale: rgba(230, 192, 106, .24);
  --line: rgba(255, 255, 255, .13);
  --shadow: 0 24px 70px rgba(0, 0, 0, .45); --shadow-soft: 0 12px 36px rgba(0, 0, 0, .32);
  --glass: color-mix(in srgb, var(--surface) 62%, transparent); --glass-strong: color-mix(in srgb, var(--surface-strong) 72%, transparent); --glass-edge: rgba(255, 255, 255, .08);
  --orb-a: rgba(230, 192, 106, .1); --orb-b: rgba(90, 150, 230, .16); --orb-c: rgba(20, 56, 150, .3);
  --hx-navy: #071a4d; --hx-navy-deep: #060d27;
}
/* sections: a slightly lighter navy band for the tinted sections keeps the page from reading as one flat colour */
:root[data-theme="dark"] .page-home .pf-tint { background: linear-gradient(180deg, #0d1a40, #0a1534); }
:root[data-theme="dark"] .page-home .pf-section h2 { color: #fff; }
:root[data-theme="dark"] .page-home .pf-section em { color: var(--gold); }
:root[data-theme="dark"] .page-home .pf-bgphoto { opacity: .1; }
/* panels that used a hard-coded green gradient */
:root[data-theme="dark"] .page-home .pf-tile { background: linear-gradient(150deg, #101d47, #0a1332); border-color: rgba(255, 255, 255, .12); }
:root[data-theme="dark"] .page-home .pf-emblem { background: linear-gradient(160deg, #111f4b, #0a1332); border-color: rgba(255, 255, 255, .14); }
:root[data-theme="dark"] .page-home .pf-feature { background: linear-gradient(150deg, #112050, #0a1332); border-color: rgba(255, 255, 255, .14); }
:root[data-theme="dark"] .page-home .pf-feature-copy p { color: #c9d3e6; }
:root[data-theme="dark"] .page-home .pf-feature-copy .eyebrow, :root[data-theme="dark"] .page-home .pf-cap small, :root[data-theme="dark"] .page-home .pf-emblem dt { color: var(--gold); }
:root[data-theme="dark"] .page-home .pf-media, :root[data-theme="dark"] .page-home .pf-note { background: #0a1330; }
:root[data-theme="dark"] .page-home .pf-brand { background: radial-gradient(circle at 78% 18%, rgba(230, 192, 106, .2), transparent 55%), linear-gradient(145deg, #112050, #0a1332); }
:root[data-theme="dark"] .page-home .pf-card:nth-child(3n+2) .pf-brand { background: radial-gradient(circle at 20% 80%, rgba(230, 192, 106, .18), transparent 55%), linear-gradient(145deg, #0f2a66, #091433); }
:root[data-theme="dark"] .page-home .pf-card:nth-child(3n) .pf-brand { background: radial-gradient(circle at 50% 0%, rgba(230, 192, 106, .18), transparent 60%), linear-gradient(145deg, #0b1b45, #13306e); }
/* footer */
:root[data-theme="dark"] .page-home .site-footer { background: #050b20; border-top: 1px solid rgba(230, 192, 106, .22); }
:root[data-theme="dark"] .page-home .footer-brand p { color: #b8c2d8; }
:root[data-theme="dark"] .page-home .footer-bottom { color: #98a4bd; }

/* buttons: transparent with a restrained border; gold type for primary actions, white type for secondary ones (every surface is dark, so no black type) */
:root[data-theme="dark"] .page-home .button, :root[data-theme="dark"] .page-home .pf-intro p .button, :root[data-theme="dark"] .page-home .pf-feature-copy .button {
  border: 1px solid rgba(230, 192, 106, .65); background: rgba(255, 255, 255, .03); color: var(--gold);
}
:root[data-theme="dark"] .page-home .button:hover, :root[data-theme="dark"] .page-home .button:focus-visible { background: rgba(230, 192, 106, .12); border-color: var(--gold); box-shadow: none; }
:root[data-theme="dark"] .page-home .button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
:root[data-theme="dark"] .page-home .pf-feature-copy .button-secondary, :root[data-theme="dark"] .page-home .button-secondary { color: #fff; border-color: rgba(255, 255, 255, .55); }
:root[data-theme="dark"] .page-home .hero.portal-hero .button-row .hx-btn-gold { border: 1px solid rgba(230, 192, 106, .7); background: rgba(255, 255, 255, .03); color: var(--gold); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
:root[data-theme="dark"] .page-home .hero.portal-hero .button-row .hx-btn-gold:hover, :root[data-theme="dark"] .page-home .hero.portal-hero .button-row .hx-btn-gold:focus-visible { background: rgba(230, 192, 106, .14); border-color: var(--gold); filter: none; box-shadow: none; }
:root[data-theme="dark"] .page-home .hero.portal-hero .button-row .button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* hero: same Modern Overlay photograph and navy gradient, plus a soft shade along the top edge so the clear header stays readable */
:root[data-theme="dark"] .page-home .portal-hero::before {
  background:
    linear-gradient(180deg, rgba(4, 10, 34, .6) 0%, rgba(4, 10, 34, 0) 26%),
    radial-gradient(42% 55% at 88% 6%, rgba(140, 200, 240, .16), transparent 72%),
    linear-gradient(0deg, rgba(6, 20, 62, .5) 0%, transparent 34%),
    linear-gradient(90deg, rgba(6, 18, 56, .95) 0%, rgba(7, 26, 77, .9) 30%, rgba(9, 38, 98, .6) 52%, rgba(14, 58, 130, .16) 76%, rgba(14, 58, 130, 0) 100%);
}
:root[data-theme="dark"] .page-home .portal-hero .hero-copy { padding-top: calc(var(--header-h) + clamp(1.5rem, 3vw, 3rem)); }
@media (max-width: 40rem) {
  :root[data-theme="dark"] .page-home .portal-hero::before {
    background:
      linear-gradient(180deg, rgba(4, 10, 34, .6) 0%, rgba(4, 10, 34, 0) 18%),
      radial-gradient(70% 40% at 90% 0%, rgba(140, 200, 240, .16), transparent 70%),
      linear-gradient(180deg, rgba(6, 18, 56, .9) 0%, rgba(7, 26, 77, .84) 55%, rgba(9, 38, 98, .62) 100%);
  }
  :root[data-theme="dark"] .page-home .portal-hero .hero-copy { padding-top: calc(var(--header-h) + 1.4rem); }
}

/* header: clear glass floating over the hero photograph. Neutral 3-5% fill and a light blur, no colour, no border, no shadow.
   The hero slides underneath it (negative margin) and has matching top padding, so the headline and buttons are never covered. */
:root[data-theme="dark"] .page-home .site-header {
  margin-bottom: calc(var(--header-h) * -1);
  background: rgba(255, 255, 255, .03); border-bottom: 0; box-shadow: none;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
:root[data-theme="dark"] .page-home .site-header.is-scrolled { background: rgba(255, 255, 255, .05); box-shadow: none; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
/* browsers without backdrop-filter get a plain dark scrim instead, so the navigation stays readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-theme="dark"] .page-home .site-header, :root[data-theme="dark"] .page-home .site-header.is-scrolled { background: rgba(7, 14, 39, .6); }
}
:root[data-theme="dark"] .page-home .site-header .desktop-nav > a, :root[data-theme="dark"] .page-home .site-header .nav-group > summary { color: rgba(255, 255, 255, .92); text-shadow: 0 1px 10px rgba(0, 0, 0, .55); }
:root[data-theme="dark"] .page-home .site-header .desktop-nav > a:hover, :root[data-theme="dark"] .page-home .site-header .nav-group > summary:hover { color: #fff; background: rgba(255, 255, 255, .1); box-shadow: none; }
:root[data-theme="dark"] .page-home .site-header .desktop-nav > a[aria-current="page"] { color: var(--gold); background: rgba(255, 255, 255, .08); box-shadow: none; }
:root[data-theme="dark"] .page-home .site-header .icon-button { border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .06); color: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
:root[data-theme="dark"] .page-home .site-header .icon-button:hover { background: rgba(255, 255, 255, .14); }
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="dark"] .page-home .button, :root[data-theme="dark"] .page-home .site-header { transition: none; }
}

/* Homepage Jamia Masjid card and hero button icon */
.pf-ico { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; margin-right: .4rem; }
.button .pf-ico { margin-right: .5rem; width: 1.15rem; height: 1.15rem; }
.pf-card-masjid .pf-tag { color: var(--gold); }

/* Light theme contrast: the gold card tags were about 2.8:1 on the cream cards */
:where(:root[data-theme="light"]) .pf-tag, :root[data-theme="light"] .pf-card-masjid .pf-tag { color: #8a621a; }
/* ==== Recovered original content (prefix rc-). Uses only the existing design tokens; light and dark follow the theme. ==== */

/* Photograph galleries: every picture is shown whole at its own proportions (never cropped), caption below. */
.rc-gallery { list-style: none; margin: 1.4rem 0 2rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 1.2rem; align-items: start; }
.rc-gallery.rc-wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.rc-gallery.rc-narrow { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
.rc-fig { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-soft); }
.rc-fig a { display: block; background: #0b2119; }
.rc-fig img { display: block; width: 100%; height: auto; }
.rc-fig figcaption { padding: .8rem 1rem .95rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .86rem; line-height: 1.45; }
.rc-fig figcaption strong { display: block; margin-bottom: .1rem; color: var(--ink); font-family: var(--display); font-size: 1.02rem; font-weight: 600; line-height: 1.25; }
.rc-single { max-width: 34rem; margin: 1.4rem 0 2rem; }
.rc-single.rc-big { max-width: 52rem; }
.rc-float { max-width: 22rem; }
.rc-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); gap: clamp(1.2rem, 3vw, 2.4rem); align-items: start; }
.rc-split > .rc-single { margin: 0; }
.rc-split.rc-flip { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); }
@media (max-width: 52rem) { .rc-split, .rc-split.rc-flip { grid-template-columns: minmax(0, 1fr); } }
.rc-split > *, .rc-letter > * { min-width: 0; }
.rc-logo { max-width: 20rem; margin: 0 0 1.2rem; }
.rc-logo img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }

/* Scanned letters and image-only pages */
.rc-letters { list-style: none; margin: 1.6rem 0; padding: 0; display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); }
.rc-letter { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: clamp(1.1rem, 3vw, 2.2rem); align-items: start; padding: clamp(1rem, 2.5vw, 1.6rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--glass); box-shadow: var(--shadow-soft), inset 0 1px 0 var(--glass-edge); }
.rc-letter h2 { margin: 0 0 .2rem; font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.rc-letter .rc-by { margin: 0 0 1rem; color: var(--muted); font-size: .88rem; font-weight: 700; letter-spacing: .04em; }
.rc-letter .rc-scan { margin: 0; }
.rc-letter .rc-scan img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.rc-letter .rc-scan figcaption { margin-top: .5rem; color: var(--muted); font-size: .8rem; }
@media (max-width: 52rem) { .rc-letter { grid-template-columns: minmax(0, 1fr); } .rc-letter .rc-scan { max-width: 24rem; } }

/* Transcriptions: text typed from the original, shown with its source */
.rc-text { max-width: 52rem; }
.rc-text blockquote { margin: 0 0 1.25rem; padding: .2rem 0 .2rem 1.1rem; border-left: 3px solid var(--gold); }
.rc-text blockquote p { margin: 0 0 1rem; }
.rc-text blockquote p:last-child { margin-bottom: 0; }
.rc-sign { margin: .4rem 0 0; font-family: var(--display); font-size: 1.05rem; line-height: 1.35; }
.rc-sign small { display: block; color: var(--muted); font-family: var(--body); font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rc-illegible { color: var(--muted); font-style: italic; }
.rc-info { margin: 1rem 0; color: var(--muted); font-size: .92rem; line-height: 1.55; }

/* Documents (PDF) */
.rc-docs { list-style: none; margin: 1.4rem 0 2rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: 1rem; }
.rc-doc { display: flex; flex-direction: column; gap: .35rem; padding: 1.2rem 1.3rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-soft); }
.rc-doc h3 { margin: 0; font-size: 1.2rem; }
.rc-doc p { margin: 0; color: var(--muted); font-size: .9rem; }
.rc-doc .rc-meta { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rc-doc .button-row { margin-top: .8rem; }

/* Tables that stack into labelled rows on a phone */
.rc-table-wrap { margin: 1.5rem 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--glass); box-shadow: var(--shadow-soft), inset 0 1px 0 var(--glass-edge); overflow-x: auto; }
table.rc-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.rc-table caption { padding: .9rem 1.1rem .2rem; text-align: left; color: var(--muted); font-size: .84rem; }
table.rc-table th, table.rc-table td { text-align: left; vertical-align: top; padding: .75rem 1rem; border-bottom: 1px solid var(--line); }
table.rc-table th { color: var(--forest); font-family: var(--display); font-size: 1rem; border-bottom: 2px solid var(--gold); }
table.rc-table tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 40rem) {
  table.rc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.rc-table, table.rc-table tbody, table.rc-table tr, table.rc-table td { display: block; width: 100%; }
  table.rc-table tr { padding: .6rem 0; border-bottom: 2px solid var(--line); }
  table.rc-table tbody tr:last-child { border-bottom: 0; }
  table.rc-table td { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .6rem; padding: .35rem 1rem; border: 0; }
  table.rc-table td::before { content: attr(data-label); color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding-top: .2rem; }
}

/* Lists inside prose, numbered rules and sub-headings */
.rc-prose h2, .rc-prose h3 { max-width: 52rem; }
.rc-prose h3 { margin: 2rem 0 .6rem; font-size: 1.35rem; }
.rc-prose ol, .rc-prose ul { max-width: 52rem; margin: 0 0 1.25rem; padding-left: 1.4rem; }
.rc-prose li { margin-bottom: .55rem; }
.rc-prose ol ol { margin: .5rem 0 0; list-style: lower-alpha; }
.rc-twocol { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1rem 2rem; max-width: 62rem; }
.rc-twocol ul { margin: 0; padding-left: 1.2rem; }
.rc-vision { counter-reset: v; list-style: none; padding: 0; margin: 1.2rem 0 2rem; display: grid; gap: .7rem; max-width: 52rem; }
.rc-vision li { counter-increment: v; display: flex; gap: 1rem; align-items: baseline; padding: .95rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--glass); }
.rc-vision li::before { content: counter(v); color: var(--gold); font-family: var(--display); font-size: 1.5rem; line-height: 1; }
.rc-people { list-style: none; margin: 1.2rem 0 2rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: .8rem; }
.rc-people li { padding: .9rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.rc-people strong { display: block; font-family: var(--display); font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.rc-people span { color: var(--muted); font-size: .84rem; }
.rc-sources { margin: 2rem 0 0; color: var(--muted); font-size: .84rem; max-width: 52rem; }
@media (prefers-reduced-motion: reduce) { .rc-fig, .rc-letter { transition: none; } }

/* Institution pages are wider than the 52rem reading column; text blocks keep the reading width. */
.portal-content .prose.rc-wideprose { max-width: none; }
.rc-wideprose > p, .rc-wideprose > ol, .rc-wideprose > ul:not(.rc-gallery):not(.rc-people):not(.rc-docs) { max-width: 52rem; }
.rc-wideprose > h2, .rc-wideprose > h3 { max-width: 52rem; }

/* Footnote under the emblem facts (plain sentence, not the uppercase photo-credit style) */
.pf-intro .pf-emblem p.rc-emblem-note { margin: 1rem 0 0; color: rgba(246,241,231,.82); font-size: .8rem; line-height: 1.5; text-align: center; }
.pf-intro .pf-emblem p.rc-emblem-note a { color: #ddb66f; text-underline-offset: .2em; }

/* A printed caption typed out verbatim */
.rc-quote-plain { margin: 1rem 0; padding: .8rem 1.1rem; max-width: 52rem; border-left: 3px solid var(--gold); font-family: var(--display); font-size: 1.05rem; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
/* Motion layer. Shared by the root pages (concatenated into portal.css) and the Residential School pages
   (assets/css/motion.css). Written in the style of the original site: 4 spaces, "selector{" and one declaration per line.
   Rules for everything below:
   - only transform and opacity are animated (no top/left/width, no filter on large areas);
   - the hidden "before" states exist only while motion.js has switched them on (html.mo-on), so a failed script never hides content;
   - prefers-reduced-motion switches every effect off at the bottom of this file. */

:root{
    --mo-ease: cubic-bezier(.2, .7, .2, 1);
    --mo-dist: 1.25rem;
}
@media (max-width: 46rem){
    :root{
        --mo-dist: .8rem;
    }
}

/* the original hero entrance also blurred its text while it rose; on phones the blur is dropped (it repaints whole blocks) */
@media (max-width: 46rem){
    @keyframes rise-in{
        from{
            opacity: 0;
            transform: translateY(1.2rem);
        }
        to{
            opacity: 1;
            transform: none;
        }
    }
}

/* ---- 1. page entrance: crumbs, heading and lead sentence follow each other (CSS only, plays once per page load) ---- */
@keyframes mo-rise{
    from{
        opacity: 0;
        transform: translate3d(0, var(--mo-dist), 0);
    }
    to{
        opacity: 1;
        transform: none;
    }
}
.page-hero .crumbs{
    animation: mo-rise .6s var(--mo-ease) both;
}
.page-hero h1{
    animation: mo-rise .85s var(--mo-ease) .08s both;
}
.page-hero .lede{
    animation: mo-rise .85s var(--mo-ease) .2s both;
}
.page-hero .button-row{
    animation: mo-rise .85s var(--mo-ease) .3s both;
}

/* ---- 2. scroll reveals: motion.js adds mo-pre to blocks that start below the fold, mo-in when they come into view ---- */
html.mo-on .mo-pre{
    opacity: 0;
    transform: translate3d(0, var(--mo-dist), 0);
    transition: opacity .7s var(--mo-ease) var(--mo-d, 0s), transform .8s var(--mo-ease) var(--mo-d, 0s);
    will-change: opacity, transform;
}
html.mo-on .mo-pre.mo-left{
    transform: translate3d(calc(var(--mo-dist) * -2), 0, 0);
}
html.mo-on .mo-pre.mo-right{
    transform: translate3d(calc(var(--mo-dist) * 2), 0, 0);
}
html.mo-on .mo-pre.mo-scale{
    transform: scale(.96);
}
html.mo-on .mo-pre.mo-in{
    opacity: 1;
    transform: none;
}
@media (max-width: 52rem){
    html.mo-on .mo-pre.mo-left,
    html.mo-on .mo-pre.mo-right{
        transform: translate3d(0, var(--mo-dist), 0);
    }
    html.mo-on .mo-pre.mo-in{
        transform: none;
    }
}

/* groups (galleries, people lists, document lists, footer columns): the children enter one after another */
html.mo-on .mo-group > *{
    transition: opacity .6s var(--mo-ease), transform .7s var(--mo-ease);
}
html.mo-on .mo-group:not(.mo-in) > *{
    opacity: 0;
    transform: translate3d(0, var(--mo-dist), 0) scale(.97);
}
html.mo-on .mo-group.mo-in > :nth-child(2){
    transition-delay: .07s;
}
html.mo-on .mo-group.mo-in > :nth-child(3){
    transition-delay: .14s;
}
html.mo-on .mo-group.mo-in > :nth-child(4){
    transition-delay: .21s;
}
html.mo-on .mo-group.mo-in > :nth-child(5){
    transition-delay: .28s;
}
html.mo-on .mo-group.mo-in > :nth-child(6){
    transition-delay: .35s;
}
html.mo-on .mo-group.mo-in > :nth-child(n+7){
    transition-delay: .42s;
}

/* section headings get a short gold line that draws itself in when the heading appears */
.mo-heading::after{
    content: "";
    display: block;
    width: 3.2rem;
    height: 3px;
    margin-top: .7rem;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--gold), var(--gold-pale, var(--gold)));
}
html.mo-on .mo-heading::after{
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .8s var(--mo-ease) .15s;
}
html.mo-on .mo-heading.mo-in::after{
    transform: none;
}

/* ---- 3. navigation: underline that draws itself, dropdown that fades out as well as in, drawer items that arrive in turn ---- */
.desktop-nav > a,
.nav-group > summary{
    position: relative;
}
.desktop-nav > a::before,
.nav-group > summary::before{
    content: "";
    position: absolute;
    left: .8rem;
    right: .8rem;
    bottom: .3rem;
    height: 2px;
    border-radius: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: 50% 50%;
    transition: transform .3s var(--mo-ease);
    pointer-events: none;
}
.desktop-nav > a:hover::before,
.desktop-nav > a:focus-visible::before,
.desktop-nav > a[aria-current="page"]::before,
.nav-group > summary:hover::before,
.nav-group[open] > summary::before{
    transform: scaleX(1);
}
@keyframes mo-menu-out{
    to{
        opacity: 0;
        transform: translateX(-50%) translateY(-.35rem);
    }
}
.nav-group.is-closing .drop-menu{
    animation: mo-menu-out .16s ease forwards;
    pointer-events: none;
}
.drop-menu a{
    transition: color .2s ease, background-color .2s ease, transform .2s var(--mo-ease);
}
.drop-menu a:hover{
    transform: translateX(3px);
}
@keyframes mo-item-in{
    from{
        opacity: 0;
        transform: translate3d(1.2rem, 0, 0);
    }
    to{
        opacity: 1;
        transform: none;
    }
}
.mobile-drawer[open] .drawer-nav > *{
    animation: mo-item-in .45s var(--mo-ease) both;
}
.mobile-drawer[open] .drawer-nav > :nth-child(1){
    animation-delay: .05s;
}
.mobile-drawer[open] .drawer-nav > :nth-child(2){
    animation-delay: .09s;
}
.mobile-drawer[open] .drawer-nav > :nth-child(3){
    animation-delay: .13s;
}
.mobile-drawer[open] .drawer-nav > :nth-child(4){
    animation-delay: .17s;
}
.mobile-drawer[open] .drawer-nav > :nth-child(5){
    animation-delay: .21s;
}
.mobile-drawer[open] .drawer-nav > :nth-child(6){
    animation-delay: .25s;
}
.mobile-drawer[open] .drawer-nav > :nth-child(7){
    animation-delay: .29s;
}
.mobile-drawer[open] .drawer-nav > :nth-child(8){
    animation-delay: .33s;
}
.mobile-drawer[open] .drawer-nav > :nth-child(n+9){
    animation-delay: .37s;
}
.drawer-nav summary span{
    transition: transform .3s var(--mo-ease);
}
.drawer-nav details[open] > summary span{
    transform: rotate(45deg);
}

/* ---- 4. buttons and touch feedback: every control answers at once, on a phone as well as with a pointer ---- */
a,
button,
summary,
label{
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.button,
.icon-button,
.filter-button,
.back-top,
.mp-chips a,
.mp-home,
.mp-more summary{
    transition: transform .2s var(--mo-ease), box-shadow .25s ease, background-color .25s ease, border-color .25s ease, color .25s ease;
}
.button:active,
.icon-button:active,
.filter-button:active,
.back-top:active,
.mp-chips a:active,
.mp-home:active,
.mp-more summary:active{
    transform: translateY(0) scale(.97);
    box-shadow: none;
    transition-duration: .08s;
}
.button[disabled],
.button[aria-disabled="true"]{
    opacity: .55;
    pointer-events: none;
}
.card:active,
.pf-card:active,
.pf-tile:active,
.rc-doc:active{
    transform: scale(.985);
    transition: transform .1s ease;
}
.rc-fig a:active img,
.mp-ph:active img{
    transform: scale(.985);
}
.text-link,
.rc-prose a{
    transition: color .2s ease, text-decoration-color .2s ease;
}
:focus-visible{
    transition: outline-offset .15s ease;
}
/* the back-to-top control slides in instead of popping */
.back-top{
    transition: opacity .3s ease, transform .3s var(--mo-ease), background-color .25s ease;
}

/* ---- 5. photographs: a quiet zoom inside the frame for people with a pointer (touch screens get the pressed state above) ---- */
@media (hover: hover) and (pointer: fine){
    .rc-fig a,
    .mp-ph{
        overflow: hidden;
    }
    .rc-fig a img,
    .mp-ph img{
        transition: transform .7s var(--mo-ease);
    }
    .rc-fig a:hover img,
    .rc-fig a:focus-visible img,
    .mp-ph:hover img,
    .mp-ph:focus-visible img{
        transform: scale(1.035);
    }
    .rc-fig{
        transition: transform .35s var(--mo-ease), box-shadow .35s ease, border-color .35s ease;
    }
    .rc-fig:hover{
        transform: translateY(-3px);
        border-color: var(--gold);
        box-shadow: var(--shadow);
    }
    .rc-doc,
    .rc-people li,
    .rc-letter{
        transition: transform .3s var(--mo-ease), box-shadow .3s ease, border-color .3s ease;
    }
    .rc-doc:hover,
    .rc-people li:hover{
        transform: translateY(-3px);
        border-color: var(--gold);
        box-shadow: var(--shadow-soft);
    }
}
/* a figure caption never depends on hover: it is always printed under the picture */

/* ---- 6. numbers that count up once (only elements marked data-count, final value is already in the HTML) ---- */
.mo-count{
    font-variant-numeric: tabular-nums;
}

/* ---- 7. expandable sections: height and content ease open where the browser supports it (elsewhere they simply open) ---- */
@supports (interpolate-size: allow-keywords){
    :root{
        interpolate-size: allow-keywords;
    }
}
@supports selector(details::details-content){
    .mp-more::details-content,
    .rc-prose details::details-content{
        block-size: 0;
        overflow: clip;
        opacity: 0;
        transition: block-size .4s var(--mo-ease), opacity .3s ease, content-visibility .4s allow-discrete;
    }
    .mp-more[open]::details-content,
    .rc-prose details[open]::details-content{
        block-size: auto;
        opacity: 1;
    }
}

/* ---- 8. lightbox for photographs that open as plain image links (created by motion.js on first use) ---- */
.mo-lb{
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    overflow: hidden;
    overscroll-behavior: contain;
    opacity: 0;
    transition: opacity .25s ease, display .25s allow-discrete, overlay .25s allow-discrete;
}
.mo-lb[open]{
    opacity: 1;
}
@starting-style{
    .mo-lb[open]{
        opacity: 0;
    }
}
.mo-lb::backdrop{
    background: rgba(4, 8, 22, .86);
    opacity: 0;
    transition: opacity .3s ease, display .3s allow-discrete, overlay .3s allow-discrete;
}
.mo-lb[open]::backdrop{
    opacity: 1;
}
@starting-style{
    .mo-lb[open]::backdrop{
        opacity: 0;
    }
}
.mo-lb-stage{
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 4rem 1rem 4.6rem;
    touch-action: pan-y pinch-zoom;
}
.mo-lb-img{
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: .6rem;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .6);
    opacity: 0;
    transform: scale(.94);
    transition: opacity .3s ease, transform .35s var(--mo-ease);
    user-select: none;
    -webkit-user-drag: none;
}
.mo-lb[open] .mo-lb-img.is-ready{
    opacity: 1;
    transform: none;
}
.mo-lb-img.is-out-left{
    opacity: 0;
    transform: translate3d(-3rem, 0, 0);
}
.mo-lb-img.is-out-right{
    opacity: 0;
    transform: translate3d(3rem, 0, 0);
}
.mo-lb-cap{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: .9rem 4.5rem 1.1rem;
    text-align: center;
    font-size: .92rem;
    line-height: 1.4;
    color: #e6ecfa;
    background: linear-gradient(0deg, rgba(4, 8, 22, .75), transparent);
    pointer-events: none;
}
.mo-lb-btn{
    position: absolute;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    background: rgba(10, 17, 44, .6);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: transform .2s var(--mo-ease), background-color .2s ease;
}
.mo-lb-btn:hover{
    background: rgba(10, 17, 44, .9);
}
.mo-lb-btn:active{
    transform: scale(.94);
}
.mo-lb-btn:focus-visible{
    outline: 3px solid #e6c78a;
    outline-offset: 2px;
}
.mo-lb-close{
    top: .8rem;
    right: .8rem;
}
.mo-lb-prev,
.mo-lb-next{
    top: 50%;
    margin-top: -1.5rem;
}
.mo-lb-prev{
    left: .8rem;
}
.mo-lb-next{
    right: .8rem;
}
.mo-lb-count{
    position: absolute;
    top: 1.2rem;
    left: 1.2rem;
    font-size: .85rem;
    color: #c9d3ee;
}
@media (max-width: 40rem){
    .mo-lb-stage{
        padding: 3.6rem .4rem 4.2rem;
    }
    .mo-lb-prev,
    .mo-lb-next{
        top: auto;
        bottom: .7rem;
        margin-top: 0;
    }
    .mo-lb-cap{
        padding: .8rem 4.2rem 1.2rem;
    }
}

/* ---- 9. light cost on every device ----
   A glass card that blurs what is behind it costs a re-computation every time the page scrolls past it, and a page can hold dozens
   (the Institutions page has 14). Repeated cards, tiles and lists therefore keep their translucent tint and lose only the blur; the
   header, the hero panels, the dropdown, the drawer and the lightbox (one element each) keep theirs. On a touch screen, a narrow window,
   or a device motion.js measured as slow (html.mo-lite), the single glass panels lose the blur too. */
.card:not(.photo-card),
.pf-card,
.pf-tile,
.pf-link,
.rg-card,
.gallery-item,
.contact-item,
.source-panel,
.source-copy,
.profile-list,
.stats,
.filter-button,
.button-quiet{
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
@media (hover: none), (max-width: 62rem){
    .contact-cta,
    .icon-button,
    .pf-glass,
    .pf-emblem,
    .pf-feature,
    .pf-fig figure,
    .button-secondary{
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}
@media (max-width: 46rem){
    .site-header,
    .page-home .site-header.is-scrolled,
    .hero .hero-bottom{
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    body::before{
        display: none;
    }
}
html.mo-lite .card:not(.photo-card),
html.mo-lite .stats,
html.mo-lite .contact-item,
html.mo-lite .source-panel,
html.mo-lite .source-copy,
html.mo-lite .contact-cta,
html.mo-lite .profile-list,
html.mo-lite .gallery-item,
html.mo-lite .icon-button,
html.mo-lite .filter-button,
html.mo-lite .button-quiet,
html.mo-lite .pf-glass,
html.mo-lite .pf-tile,
html.mo-lite .pf-emblem,
html.mo-lite .pf-feature,
html.mo-lite .pf-fig figure,
html.mo-lite .rg-card,
html.mo-lite .button-secondary,
html.mo-lite .site-header,
html.mo-lite .hero .hero-bottom{
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
html.mo-lite .ambient span,
html.mo-lite .page-hero::before,
html.mo-lite .page-hero::after,
html.mo-lite .site-footer::before{
    animation: none;
    will-change: auto;
}
html.mo-lite body::before{
    display: none;
}
/* a hidden tab or a window that is not visible paints nothing, so its endless animations stop too */
html.mo-away .ambient span,
html.mo-away .bz-au > i{
    animation-play-state: paused;
}

/* ---- 10. page-to-page transition: a short cross-fade where the browser supports it (no script, history and speed unaffected) ---- */
@media (prefers-reduced-motion: no-preference){
    @view-transition{
        navigation: auto;
    }
    ::view-transition-old(root){
        animation: mo-vt-out .14s ease both;
    }
    ::view-transition-new(root){
        animation: mo-vt-in .24s ease both;
    }
}
@keyframes mo-vt-out{
    to{
        opacity: 0;
    }
}
@keyframes mo-vt-in{
    from{
        opacity: 0;
    }
}

/* ---- 11. reduced motion, print ---- */
@media (prefers-reduced-motion: reduce){
    .page-hero .crumbs,
    .page-hero h1,
    .page-hero .lede,
    .page-hero .button-row,
    .mobile-drawer[open] .drawer-nav > *{
        animation: none;
    }
    html.mo-on .mo-pre,
    html.mo-on .mo-group > *,
    html.mo-on .mo-heading::after{
        opacity: 1;
        transform: none;
        transition: none;
    }
    .desktop-nav > a::before,
    .nav-group > summary::before,
    .mo-lb-img,
    .rc-fig a img,
    .mp-ph img{
        transition: none;
    }
    .drop-menu a:hover,
    .rc-fig:hover,
    .rc-doc:hover,
    .rc-people li:hover{
        transform: none;
    }
    .nav-group.is-closing .drop-menu{
        animation: none;
    }
}
@media print{
    html.mo-on .mo-pre,
    html.mo-on .mo-group > *{
        opacity: 1 !important;
        transform: none !important;
    }
    .mo-lb{
        display: none;
    }
}

/* ---- Home hero: "Watch Bayanath" - full-width frosted-glass button (the only animated button) ----
   Width: on tablets and PCs the button row becomes a three-column grid sized to its own buttons and this button spans all three columns,
   so it runs from the left edge of "Jamia Masjid" to the right edge of "Residential School" on its own line. No fixed width is involved.
   Phones keep the one-column stack, where every button is already the full width. The height stays the shared 3.2rem of the hero buttons.
   Look: light = frosted white, navy text and icon, champagne-gold edge; dark = translucent navy, white text, gold icon and edge.
   Motion: a narrow reflection crosses the button, fades and pauses (::before, one background-position animation); a gold glow breathes
   (::after, opacity only). Both sit behind the text. Hover and tap feedback is 180 ms ease-out. prefers-reduced-motion switches it all off.
   This replaces the earlier .hx-btn-ghost rules (white outline, light and dark variants and the phone blur reset), which this block
   overrides in every state. */
@media (min-width: 40.0625rem) {
  .page-home .hero.portal-hero .button-row { display: grid; grid-template-columns: repeat(3, max-content); justify-content: start; }
  .page-home .hero.portal-hero .button-row .hx-btn-ghost { grid-column: 1 / -1; }
}
.page-home .hero.portal-hero .button-row .hx-btn-ghost {
  position: relative; overflow: visible; isolation: isolate; transform: none;
  transition: transform .18s ease-out, box-shadow .18s ease-out, background-color .18s ease-out, border-color .18s ease-out;
}
.page-home .hero.portal-hero .button-row .hx-btn-ghost::before {
  display: block; content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 44%, var(--ju-flank) 47%, var(--ju-core) 50%, var(--ju-flank) 53%, transparent 56%) 110% 0 / 220% 100% no-repeat;
  transform: none; transition: none;
  animation: ju-glass-sweep 4.6s ease-in-out infinite;
}
.page-home .hero.portal-hero .button-row .hx-btn-ghost::after {
  content: ""; position: absolute; inset: -1px; z-index: -2; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 26px 4px var(--ju-glow);
  animation: ju-glass-glow 4s ease-in-out infinite;
}
@keyframes ju-glass-sweep {
  0%, 40% { background-position: 110% 0; opacity: 0; }
  46%, 74% { opacity: 1; }
  80%, 100% { background-position: -10% 0; opacity: 0; }
}
@keyframes ju-glass-glow {
  0%, 100% { opacity: .3; }
  50% { opacity: 1; }
}
:root:not([data-theme="dark"]) .page-home .hero.portal-hero .button-row .hx-btn-ghost {
  --ju-core: rgba(255, 252, 240, .98); --ju-flank: rgba(226, 180, 88, .5); --ju-glow: rgba(214, 170, 82, .62);
  color: #071a4d; border: 1px solid rgba(214, 177, 99, .95);
  background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 252, 244, .87));
  box-shadow: inset 0 1px 0 #fff, inset 0 -10px 18px rgba(214, 170, 82, .12), 0 6px 20px rgba(214, 170, 82, .24);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
}
:root[data-theme="dark"] .page-home .hero.portal-hero .button-row .hx-btn-ghost {
  --ju-core: rgba(255, 238, 196, .5); --ju-flank: rgba(230, 192, 106, .3); --ju-glow: rgba(230, 192, 106, .5);
  color: #fff; border: 1px solid rgba(230, 192, 106, .65);
  background: linear-gradient(180deg, rgba(16, 44, 112, .66), rgba(7, 26, 77, .58));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 1px rgba(230, 192, 106, .1), 0 6px 20px rgba(3, 12, 44, .35);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
}
.page-home .hero.portal-hero .button-row .hx-btn-ghost .btn-icon { stroke: currentColor; }
:root[data-theme="dark"] .page-home .hero.portal-hero .button-row .hx-btn-ghost .btn-icon { stroke: var(--hx-gold); }
.page-home .hero.portal-hero .button-row .hx-btn-ghost:focus-visible { transform: translateY(-1px); }
:root:not([data-theme="dark"]) .page-home .hero.portal-hero .button-row .hx-btn-ghost:focus-visible {
  border-color: #d6b163; box-shadow: inset 0 1px 0 #fff, inset 0 -10px 18px rgba(214, 170, 82, .12), 0 10px 26px rgba(214, 170, 82, .38);
}
:root[data-theme="dark"] .page-home .hero.portal-hero .button-row .hx-btn-ghost:focus-visible {
  border-color: var(--hx-gold); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 0 0 1px rgba(230, 192, 106, .25), 0 10px 26px rgba(3, 12, 44, .45);
}
@media (hover: hover) {
  .page-home .hero.portal-hero .button-row .hx-btn-ghost:hover { transform: translateY(-1px); }
  :root:not([data-theme="dark"]) .page-home .hero.portal-hero .button-row .hx-btn-ghost:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 252, 244, .93));
    border-color: #d6b163; box-shadow: inset 0 1px 0 #fff, inset 0 -10px 18px rgba(214, 170, 82, .12), 0 10px 26px rgba(214, 170, 82, .38);
  }
  :root[data-theme="dark"] .page-home .hero.portal-hero .button-row .hx-btn-ghost:hover {
    background: linear-gradient(180deg, rgba(22, 56, 134, .74), rgba(9, 32, 92, .66));
    border-color: var(--hx-gold); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 0 0 1px rgba(230, 192, 106, .25), 0 10px 26px rgba(3, 12, 44, .45);
  }
}
.page-home .hero.portal-hero .button-row .hx-btn-ghost:active { transform: scale(.985); }
@media (max-width: 46rem) {
  :root:not([data-theme="dark"]) .page-home .hero.portal-hero .button-row .hx-btn-ghost { background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 252, 244, .92)); -webkit-backdrop-filter: none; backdrop-filter: none; }
  :root[data-theme="dark"] .page-home .hero.portal-hero .button-row .hx-btn-ghost { background: linear-gradient(180deg, rgba(16, 44, 112, .78), rgba(7, 26, 77, .72)); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .page-home .hero.portal-hero .button-row .hx-btn-ghost { transition: none; }
  .page-home .hero.portal-hero .button-row .hx-btn-ghost::before { animation: none; opacity: 0; }
  .page-home .hero.portal-hero .button-row .hx-btn-ghost::after { animation: none; opacity: .55; }
  .page-home .hero.portal-hero .button-row .hx-btn-ghost:hover, .page-home .hero.portal-hero .button-row .hx-btn-ghost:focus-visible, .page-home .hero.portal-hero .button-row .hx-btn-ghost:active { transform: none; }
}