/* ==========================================================================
   Archbishop Heerey Technical College, Ogidi
   ahtc.css — site stylesheet.

   Navy and white, the school colours, with a gold accent. Self-contained: no
   external framework or animation library is required.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  /* School colours */
  --navy-900:#061530;
  --navy-800:#0A1F44;
  --navy-700:#0E2A5C;
  --navy-600:#143873;
  --navy-500:#1D4A93;
  --navy-300:#7E9AC6;
  --navy-100:#E4EBF6;

  /* Accent, applied to rules, hover states and small marks */
  --gold-600:#A8801C;
  --gold-500:#C9A227;
  --gold-400:#E0BE55;
  --gold-100:#F6EDD4;

  /* Neutrals */
  --white:#FFFFFF;
  --paper:#F7F9FC;
  --paper-2:#EEF2F8;
  --line:#DFE5EF;
  --ink:#101827;
  --ink-2:#39435A;
  --ink-3:#6B7689;

  --danger:#C0392B;
  --success:#1E8449;

  /* Type */
  --font-display:"Playfair Display","Georgia","Times New Roman",serif;
  --font-body:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;

  /* Space */
  --gutter:clamp(1rem,4vw,2.5rem);
  --section-y:clamp(3.5rem,8vw,7rem);
  --maxw:1240px;
  --maxw-narrow:780px;

  /* Depth */
  --r-sm:6px;
  --r-md:12px;
  --r-lg:20px;
  --shadow-1:0 1px 2px rgba(10,31,68,.06),0 2px 8px rgba(10,31,68,.06);
  --shadow-2:0 4px 12px rgba(10,31,68,.08),0 12px 32px rgba(10,31,68,.10);
  --shadow-3:0 10px 24px rgba(10,31,68,.12),0 28px 60px rgba(10,31,68,.16);

  /* Motion */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --t-fast:.22s;
  --t-med:.45s;
  --t-slow:.8s;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:90px;
}
body{
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.7;
  color:var(--ink-2);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto;}
button,input,textarea,select{font:inherit;color:inherit;}
button{cursor:pointer;background:none;border:0;}
a{color:var(--navy-600);text-decoration:none;transition:color var(--t-fast) var(--ease-out);}
a:hover{color:var(--gold-600);}
ul,ol{list-style:none;padding:0;}
:focus-visible{outline:3px solid var(--gold-500);outline-offset:3px;border-radius:2px;}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  color:var(--navy-800);
  line-height:1.15;
  font-weight:700;
  letter-spacing:-.01em;
}
h1{font-size:clamp(2.1rem,5.2vw,3.7rem);}
h2{font-size:clamp(1.8rem,4vw,2.9rem);}
h3{font-size:clamp(1.3rem,2.4vw,1.8rem);}
h4{font-size:clamp(1.1rem,1.8vw,1.35rem);}
p{margin-bottom:1.1rem;}
p:last-child{margin-bottom:0;}

.eyebrow{
  font-family:var(--font-body);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-600);
  margin-bottom:.9rem;
  display:block;
}
.lead{font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--ink-2);}
.muted{color:var(--ink-3);}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
.wrap-narrow{max-width:var(--maxw-narrow);}
.section{padding-block:var(--section-y);position:relative;}
.section--paper{background:var(--paper);}
.section--navy{background:var(--navy-800);color:#C9D5E8;}
.section--navy h1,.section--navy h2,.section--navy h3,.section--navy h4{color:var(--white);}

.grid{display:grid;gap:clamp(1.25rem,3vw,2.25rem);}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));}

/* Section heading block */
.section-head{max-width:640px;margin:0 auto clamp(2.2rem,5vw,3.5rem);text-align:center;}
.section-head--left{margin-inline:0;text-align:left;}
.section-head h2{margin-bottom:1rem;}
.rule{
  width:72px;height:3px;margin:1.4rem auto 0;
  background:linear-gradient(90deg,var(--gold-500),var(--gold-400));
  border-radius:2px;
  transform:scaleX(0);transform-origin:center;
  transition:transform var(--t-slow) var(--ease-out) .15s;
}
.section-head--left .rule{margin-inline:0;transform-origin:left;}
.is-visible .rule,.reveal.is-visible .rule{transform:scaleX(1);}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn{
  --btn-bg:var(--navy-700);
  --btn-fg:var(--white);
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.9rem;
  font-family:var(--font-body);
  font-size:.82rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--btn-fg);background:var(--btn-bg);
  border-radius:var(--r-sm);
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform var(--t-fast) var(--ease-out),
             box-shadow var(--t-fast) var(--ease-out),
             color var(--t-fast) var(--ease-out);
}
/* Sweep fill */
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--gold-500);
  transform:translateY(101%);
  transition:transform var(--t-med) var(--ease-out);
}
.btn:hover{color:var(--navy-900);transform:translateY(-2px);box-shadow:var(--shadow-2);}
.btn:hover::after{transform:translateY(0);}
.btn:active{transform:translateY(0);}

.btn--gold{--btn-bg:var(--gold-500);--btn-fg:var(--navy-900);}
.btn--gold::after{background:var(--white);}
.btn--ghost{
  --btn-bg:transparent;--btn-fg:var(--white);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);
}
.btn--ghost::after{background:var(--white);}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--white);}
.btn--outline{
  --btn-bg:transparent;--btn-fg:var(--navy-700);
  box-shadow:inset 0 0 0 1.5px var(--navy-300);
}
.btn--sm{padding:.65rem 1.25rem;font-size:.72rem;}
.btn--block{width:100%;}

/* Text link with sliding arrow */
.link-arrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--navy-700);
}
.link-arrow i,.link-arrow svg{transition:transform var(--t-fast) var(--ease-out);}
.link-arrow:hover{color:var(--gold-600);}
.link-arrow:hover i,.link-arrow:hover svg{transform:translateX(5px);}

/* --------------------------------------------------------------------------
   6. Topbar
   -------------------------------------------------------------------------- */
.topbar{
  background:var(--navy-900);
  color:#9FB2D0;
  font-size:.8rem;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.topbar__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;min-height:44px;padding-block:.35rem;
}
.topbar__contact{display:flex;gap:1.6rem;flex-wrap:wrap;}
.topbar__contact a,.topbar__contact span{
  display:inline-flex;align-items:center;gap:.5rem;color:#9FB2D0;
}
.topbar__contact a:hover{color:var(--gold-400);}
.topbar__contact i{color:var(--gold-500);font-size:.85rem;}
.topbar__social{display:flex;gap:.45rem;}
.topbar__social a{
  width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  color:#9FB2D0;font-size:.75rem;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  transition:all var(--t-fast) var(--ease-out);
}
.topbar__social a:hover{
  background:var(--gold-500);color:var(--navy-900);
  box-shadow:inset 0 0 0 1px var(--gold-500);
  transform:translateY(-2px);
}

/* --------------------------------------------------------------------------
   7. Masthead — crest / identity band
   -------------------------------------------------------------------------- */
.masthead{
  background:
    radial-gradient(1200px 340px at 50% -40%,rgba(201,162,39,.10),transparent 70%),
    linear-gradient(180deg,var(--white),var(--paper));
  border-bottom:1px solid var(--line);
  position:relative;
}
.masthead::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;
  background:linear-gradient(90deg,var(--navy-800),var(--gold-500),var(--navy-800));
}
.masthead__inner{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:clamp(1rem,3vw,2.5rem);
  padding-block:clamp(1rem,2.5vw,1.6rem);
}
.masthead__crest img{
  width:clamp(58px,7vw,92px);
  height:clamp(58px,7vw,92px);
  object-fit:contain;
  filter:drop-shadow(0 4px 10px rgba(10,31,68,.18));
  transition:transform var(--t-med) var(--ease-out);
}
.masthead__crest:hover img{transform:scale(1.06) rotate(-2deg);}
.masthead__titles{text-align:center;min-width:0;}
.masthead__diocese{
  font-family:var(--font-body);
  font-size:clamp(.62rem,1.15vw,.8rem);
  font-weight:700;letter-spacing:.3em;text-transform:uppercase;
  color:var(--navy-600);
}
.masthead__basilica{
  font-size:clamp(.6rem,1vw,.72rem);
  color:var(--ink-3);letter-spacing:.04em;margin-top:.2rem;
}
.masthead__name{
  font-family:var(--font-display);
  font-size:clamp(1.05rem,2.85vw,2.15rem);
  font-weight:700;line-height:1.1;color:var(--navy-800);
  margin:.45rem 0 .3rem;
}
.masthead__sub{
  font-size:clamp(.6rem,1vw,.74rem);
  color:var(--ink-3);font-style:italic;
}
.masthead__motto{
  display:inline-flex;align-items:center;gap:.6rem;
  margin-top:.55rem;
  font-size:clamp(.6rem,1vw,.74rem);
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-600);
}
.masthead__motto::before,.masthead__motto::after{
  content:"";width:26px;height:1px;background:var(--gold-400);
}

/* --------------------------------------------------------------------------
   8. Navigation
   -------------------------------------------------------------------------- */
.nav{
  background:var(--navy-800);
  position:sticky;top:0;z-index:900;
  box-shadow:0 1px 0 rgba(255,255,255,.06);
  transition:box-shadow var(--t-med) var(--ease-out),background var(--t-med) var(--ease-out);
}
.nav.is-stuck{box-shadow:var(--shadow-2);background:rgba(6,21,48,.96);backdrop-filter:blur(10px);}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;}

.nav__brand{
  display:none;align-items:center;gap:.6rem;
  color:var(--white);font-family:var(--font-display);font-weight:700;font-size:1rem;
}
.nav.is-stuck .nav__brand{display:flex;}
.nav__brand img{width:32px;height:32px;border-radius:4px;object-fit:contain;}

.nav__list{display:flex;align-items:center;flex-wrap:wrap;}
.nav__list > li > a{
  position:relative;display:block;
  padding:1.05rem .95rem;
  font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#C6D3E8;
}
.nav__list > li > a::after{
  content:"";position:absolute;left:.95rem;right:.95rem;bottom:.6rem;
  height:2px;background:var(--gold-500);
  transform:scaleX(0);transform-origin:right;
  transition:transform var(--t-med) var(--ease-out);
}
.nav__list > li > a:hover,
.nav__list > li > a[aria-current="page"]{color:var(--white);}
.nav__list > li > a:hover::after,
.nav__list > li > a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left;}

/* Emphasised navigation link */
.nav__cta{
  margin-left:.5rem;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.6rem 1.1rem;border-radius:var(--r-sm);
  background:var(--gold-500);color:var(--navy-900)!important;
  font-size:.72rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  transition:all var(--t-fast) var(--ease-out);
}
.nav__cta::after{display:none;}
.nav__cta:hover{background:var(--white);transform:translateY(-2px);box-shadow:var(--shadow-2);}
.nav__cta .dot{
  width:7px;height:7px;border-radius:50%;background:var(--navy-800);
  animation:pulse 2s var(--ease-soft) infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:.35;transform:scale(.7);}
}

/* Hamburger */
.nav__toggle{
  display:none;width:44px;height:44px;
  align-items:center;justify-content:center;
  color:var(--white);
}
.nav__toggle span{
  display:block;width:22px;height:2px;background:currentColor;position:relative;
  transition:background var(--t-fast) var(--ease-out);
}
.nav__toggle span::before,.nav__toggle span::after{
  content:"";position:absolute;left:0;width:22px;height:2px;background:currentColor;
  transition:transform var(--t-med) var(--ease-out),top var(--t-fast) var(--ease-out);
}
.nav__toggle span::before{top:-7px;}
.nav__toggle span::after{top:7px;}
.nav__toggle[aria-expanded="true"] span{background:transparent;}
.nav__toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg);}
.nav__toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg);}

/* The scrim must rank BELOW .nav (z-index 900). The drawer is a descendant of
   .nav, and because .nav is a positioned element with a z-index it forms a
   stacking context: the drawer's own z-index is resolved inside that context,
   so the drawer can never paint above a sibling of .nav. A scrim ranked above
   .nav would therefore cover the drawer, blur it through backdrop-filter, and
   absorb the taps intended for its links. */
.nav__scrim{
  position:fixed;inset:0;background:rgba(6,21,48,.55);
  backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;z-index:890;
  transition:opacity var(--t-med) var(--ease-out),visibility var(--t-med);
}
.nav__scrim.is-open{opacity:1;visibility:visible;}

@media (max-width:980px){
  /* An element carrying backdrop-filter becomes the containing block for its
     position:fixed descendants, which would anchor the drawer to the bar
     instead of the viewport once the bar becomes stuck. A solid background
     reads the same here and avoids that. */
  .nav,
  .nav.is-stuck{backdrop-filter:none;}
  .nav.is-stuck{background:var(--navy-900);}

  /* The drawer is anchored to the right edge and so covers the toggle, which
     sits at the right of the bar. Raising the toggle within .nav keeps the
     close control reachable while the drawer is open; the drawer's top padding
     reserves the space it occupies. */
  .nav__toggle{display:flex;position:relative;z-index:970;}

  .nav__brand{display:flex;}
  .nav__list{
    position:fixed;top:0;right:0;bottom:0;
    width:min(86vw,340px);
    flex-direction:column;align-items:stretch;
    background:var(--navy-900);
    padding:5.5rem 1.5rem 2rem;
    gap:.15rem;z-index:960;
    transform:translateX(100%);
    transition:transform var(--t-med) var(--ease-out);
    overflow-y:auto;
  }
  .nav__list.is-open{transform:translateX(0);}
  .nav__list > li > a{
    padding:.95rem .5rem;font-size:.85rem;
    border-bottom:1px solid rgba(255,255,255,.07);
  }
  .nav__list > li > a::after{left:.5rem;right:auto;width:26px;bottom:.45rem;}
  .nav__cta{margin:1rem .5rem 0;justify-content:center;}
}

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  min-height:clamp(480px,82vh,820px);
  display:grid;
  isolation:isolate;
  background:var(--navy-900);
  overflow:hidden;
}
.hero__slide{
  grid-area:1/1;position:relative;
  opacity:0;visibility:hidden;
  transition:opacity 1.2s var(--ease-soft),visibility 1.2s;
}
.hero__slide.is-active{opacity:1;visibility:visible;}
.hero__slide img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
}
/* Slow scale and pan applied to the active slide */
.hero__slide.is-active img{animation:kenburns 14s var(--ease-soft) forwards;}
@keyframes kenburns{
  from{transform:scale(1.02) translate3d(0,0,0);}
  to{transform:scale(1.14) translate3d(-1.5%,-1.5%,0);}
}
.hero__slide::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(6,21,48,.55) 0%,rgba(6,21,48,.42) 42%,rgba(6,21,48,.88) 100%),
    linear-gradient(90deg,rgba(6,21,48,.72) 0%,rgba(6,21,48,.18) 65%);
}

.hero__content{
  grid-area:1/1;position:relative;z-index:2;
  display:flex;align-items:center;
  padding-block:clamp(4rem,10vh,7rem);
}
.hero__copy{max-width:740px;}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:.8rem;
  font-size:.74rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-400);margin-bottom:1.4rem;
}
.hero__eyebrow::before{content:"";width:40px;height:1.5px;background:var(--gold-500);}
.hero h1{
  color:var(--white);
  font-size:clamp(2.3rem,6.2vw,4.6rem);
  line-height:1.05;
  margin-bottom:1.4rem;
  text-shadow:0 2px 30px rgba(0,0,0,.35);
}
.hero h1 em{font-style:italic;color:var(--gold-400);}
.hero__text{
  color:#D3DEEF;font-size:clamp(1rem,1.7vw,1.18rem);
  max-width:56ch;margin-bottom:2.2rem;
}
.hero__actions{display:flex;gap:1rem;flex-wrap:wrap;}

/* Staggered entrance for the active slide's copy */
.hero__slide.is-active .anim{animation:heroIn .95s var(--ease-out) both;}
.hero__slide.is-active .anim:nth-child(1){animation-delay:.15s;}
.hero__slide.is-active .anim:nth-child(2){animation-delay:.3s;}
.hero__slide.is-active .anim:nth-child(3){animation-delay:.45s;}
.hero__slide.is-active .anim:nth-child(4){animation-delay:.6s;}
@keyframes heroIn{
  from{opacity:0;transform:translate3d(0,28px,0);}
  to{opacity:1;transform:none;}
}

/* Hero controls */
.hero__dots{
  position:absolute;left:0;right:0;bottom:2.2rem;z-index:3;
  display:flex;gap:.7rem;justify-content:center;
}
.hero__dots button{
  width:36px;height:4px;border-radius:2px;
  background:rgba(255,255,255,.3);
  transition:background var(--t-fast) var(--ease-out),width var(--t-med) var(--ease-out);
}
.hero__dots button[aria-selected="true"]{background:var(--gold-500);width:56px;}

.hero__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  color:var(--white);font-size:1rem;
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
  backdrop-filter:blur(6px);
  transition:all var(--t-fast) var(--ease-out);
}
.hero__arrow:hover{background:var(--gold-500);color:var(--navy-900);box-shadow:none;}
.hero__arrow--prev{left:clamp(.6rem,2vw,1.8rem);}
.hero__arrow--next{right:clamp(.6rem,2vw,1.8rem);}
@media (max-width:700px){.hero__arrow{display:none;}}

/* Scroll hint */
.hero__scroll{
  position:absolute;left:50%;bottom:5.5rem;transform:translateX(-50%);z-index:3;
  width:24px;height:38px;border-radius:12px;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4);
}
.hero__scroll::after{
  content:"";position:absolute;left:50%;top:8px;
  width:3px;height:7px;border-radius:2px;background:var(--gold-400);
  transform:translateX(-50%);
  animation:scrollDot 1.9s var(--ease-soft) infinite;
}
@keyframes scrollDot{
  0%{opacity:0;transform:translate(-50%,-4px);}
  40%{opacity:1;}
  100%{opacity:0;transform:translate(-50%,14px);}
}
@media (max-width:700px){.hero__scroll{display:none;}}

/* --------------------------------------------------------------------------
   10. Stat strip
   -------------------------------------------------------------------------- */
.stats{
  background:var(--navy-800);
  position:relative;
  border-block:1px solid rgba(255,255,255,.08);
}
.stats__inner{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
}
.stat{
  padding:clamp(1.8rem,4vw,2.8rem) 1rem;
  text-align:center;position:relative;
}
.stat + .stat::before{
  content:"";position:absolute;left:0;top:22%;bottom:22%;
  width:1px;background:rgba(255,255,255,.12);
}
.stat__num{
  font-family:var(--font-display);
  font-size:clamp(2rem,4.4vw,3.1rem);
  font-weight:700;color:var(--gold-400);line-height:1;
  display:block;
}
.stat__label{
  margin-top:.6rem;
  font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:#A9BCD8;
}

/* --------------------------------------------------------------------------
   11. News ticker (replaces deprecated <marquee>)
   -------------------------------------------------------------------------- */
.ticker{
  display:flex;align-items:stretch;
  background:var(--white);
  border:1px solid var(--line);
  border-left:4px solid var(--gold-500);
  border-radius:var(--r-sm);
  box-shadow:var(--shadow-1);
  overflow:hidden;
  margin-bottom:clamp(2rem,4vw,3rem);
}
.ticker__label{
  flex:0 0 auto;
  display:flex;align-items:center;gap:.6rem;
  padding:.9rem 1.3rem;
  background:var(--navy-800);color:var(--white);
  font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  white-space:nowrap;
}
.ticker__label .dot{
  width:8px;height:8px;border-radius:50%;background:var(--gold-500);
  animation:pulse 2s var(--ease-soft) infinite;
}
.ticker__viewport{
  flex:1 1 auto;min-width:0;
  display:flex;align-items:center;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 96%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 3%,#000 96%,transparent);
}
.ticker__track{
  display:flex;flex-shrink:0;gap:3rem;
  padding-left:3rem;
  white-space:nowrap;
  animation:ticker 42s linear infinite;
  font-size:.92rem;color:var(--ink-2);
}
.ticker__viewport:hover .ticker__track{animation-play-state:paused;}
.ticker__track b{color:var(--navy-700);}
.ticker__track span{display:inline-flex;align-items:center;gap:.7rem;}
.ticker__track span::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--gold-500);flex:0 0 auto;
}
@keyframes ticker{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(-50%,0,0);}
}
@media (max-width:640px){
  .ticker__label{padding:.75rem .9rem;font-size:.65rem;}
  .ticker__label .txt{display:none;}
}

/* --------------------------------------------------------------------------
   12. Cards — news / articles
   -------------------------------------------------------------------------- */
.card{
  display:flex;flex-direction:column;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  height:100%;
  transition:transform var(--t-med) var(--ease-out),
             box-shadow var(--t-med) var(--ease-out),
             border-color var(--t-med) var(--ease-out);
}
.card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-3);
  border-color:transparent;
}
.card__media{
  position:relative;overflow:hidden;
  aspect-ratio:16/10;background:var(--paper-2);
}
.card__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease-out);
}
.card:hover .card__media img{transform:scale(1.08);}
.card__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(6,21,48,.55));
  opacity:0;transition:opacity var(--t-med) var(--ease-out);
}
.card:hover .card__media::after{opacity:1;}

.card__tag{
  position:absolute;left:1rem;top:1rem;z-index:2;
  padding:.35rem .75rem;border-radius:3px;
  background:var(--gold-500);color:var(--navy-900);
  font-size:.64rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.card__body{
  display:flex;flex-direction:column;flex:1;
  padding:clamp(1.25rem,2.5vw,1.75rem);
}
.card__meta{
  display:flex;gap:1.2rem;flex-wrap:wrap;
  font-size:.76rem;color:var(--ink-3);margin-bottom:.85rem;
}
.card__meta span{display:inline-flex;align-items:center;gap:.4rem;}
.card__meta i{color:var(--gold-600);font-size:.75rem;}
.card__title{
  font-size:clamp(1.1rem,1.7vw,1.3rem);
  line-height:1.3;margin-bottom:.7rem;
}
.card__title a{
  color:var(--navy-800);
  background-image:linear-gradient(var(--gold-500),var(--gold-500));
  background-size:0 2px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size var(--t-med) var(--ease-out),color var(--t-fast);
}
.card:hover .card__title a{background-size:100% 2px;}
.card__excerpt{font-size:.94rem;color:var(--ink-2);margin-bottom:1.3rem;}
.card__body .link-arrow{margin-top:auto;align-self:flex-start;}

/* Featured lead card on the news index */
.card--feature{grid-column:1/-1;}
@media (min-width:860px){
  .card--feature{flex-direction:row;}
  .card--feature .card__media{flex:0 0 52%;aspect-ratio:auto;}
  .card--feature .card__body{justify-content:center;padding:clamp(1.8rem,3.5vw,3rem);}
  .card--feature .card__title{font-size:clamp(1.4rem,2.6vw,2.1rem);}
}

/* Compact list item — sidebar */
.mini{
  display:flex;gap:.9rem;align-items:stretch;
  padding:.55rem;border-radius:var(--r-sm);
  transition:background var(--t-fast) var(--ease-out);
}
.mini:hover{background:var(--paper);}
.mini__img{
  flex:0 0 76px;height:76px;border-radius:var(--r-sm);
  overflow:hidden;background:var(--paper-2);
}
.mini__img img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-med) var(--ease-out);}
.mini:hover .mini__img img{transform:scale(1.08);}
.mini__body{display:flex;flex-direction:column;justify-content:center;min-width:0;}
.mini__title{
  font-family:var(--font-display);font-size:.95rem;font-weight:600;line-height:1.35;
  color:var(--navy-800);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.mini:hover .mini__title{color:var(--gold-600);}
.mini__date{font-size:.72rem;color:var(--ink-3);margin-top:.3rem;}

/* --------------------------------------------------------------------------
   13. History / split feature
   -------------------------------------------------------------------------- */
.split{
  display:grid;gap:clamp(2rem,5vw,4rem);
  grid-template-columns:1fr;align-items:center;
}
@media (min-width:920px){
  .split{grid-template-columns:1.15fr .85fr;}
  .split--flip .split__media{order:-1;}
}
.split__media{position:relative;}
.split__media img{
  width:100%;border-radius:var(--r-lg);
  box-shadow:var(--shadow-3);
  position:relative;z-index:2;
}
.split__media::before{
  content:"";position:absolute;
  inset:-14px -14px 28px 28px;
  border:2px solid var(--gold-400);
  border-radius:var(--r-lg);
  z-index:1;
  transition:inset var(--t-slow) var(--ease-out);
}
.split__media.is-visible::before{inset:-18px -18px 22px 22px;}
.split__caption{
  margin-top:1rem;font-size:.8rem;color:var(--ink-3);
  font-style:italic;text-align:center;
}
.prose{text-align:justify;color:var(--ink-2);}
.prose p{margin-bottom:1.15rem;}
.prose--drop p:first-of-type::first-letter{
  float:left;
  font-family:var(--font-display);
  font-size:3.6rem;line-height:.82;
  font-weight:700;color:var(--navy-700);
  padding:.32rem .55rem 0 0;
}

/* Timeline */
.timeline{
  position:relative;
  padding-left:2.2rem;
  margin-top:2.2rem;
}
.timeline::before{
  content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,var(--gold-500),var(--navy-300),transparent);
  transform:scaleY(0);transform-origin:top;
  transition:transform 1.4s var(--ease-out);
}
.timeline.is-visible::before{transform:scaleY(1);}
.timeline li{position:relative;padding-bottom:1.5rem;}
.timeline li::before{
  content:"";position:absolute;left:-2.2rem;top:.55rem;
  width:16px;height:16px;border-radius:50%;
  background:var(--white);
  box-shadow:0 0 0 2px var(--gold-500);
  transition:transform var(--t-med) var(--ease-out),background var(--t-med) var(--ease-out);
}
.timeline li:hover::before{transform:scale(1.25);background:var(--gold-500);}
.timeline b{
  display:block;font-family:var(--font-display);
  color:var(--navy-800);font-size:1.05rem;
}
.timeline span{font-size:.92rem;color:var(--ink-3);}

/* --------------------------------------------------------------------------
   14. Departments
   -------------------------------------------------------------------------- */
.dept{
  position:relative;display:block;
  border-radius:var(--r-md);overflow:hidden;
  aspect-ratio:4/3;
  background:var(--navy-800);
  box-shadow:var(--shadow-1);
  transition:transform var(--t-med) var(--ease-out),box-shadow var(--t-med) var(--ease-out);
}
.dept:hover{transform:translateY(-6px);box-shadow:var(--shadow-3);}
.dept img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease-out),filter var(--t-med) var(--ease-out);
  filter:saturate(.85);
}
.dept:hover img{transform:scale(1.09);filter:saturate(1.05);}
.dept::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,21,48,.10) 30%,rgba(6,21,48,.92) 100%);
  transition:background var(--t-med) var(--ease-out);
}
.dept:hover::after{background:linear-gradient(180deg,rgba(6,21,48,.25) 10%,rgba(6,21,48,.95) 100%);}
.dept__body{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(1.1rem,2.5vw,1.6rem);
}
.dept__num{
  font-family:var(--font-display);font-size:.8rem;
  color:var(--gold-400);letter-spacing:.2em;margin-bottom:.4rem;display:block;
}
.dept__title{
  color:var(--white);font-size:clamp(1rem,1.7vw,1.22rem);
  line-height:1.25;margin:0;
}
.dept__line{
  height:2px;width:0;background:var(--gold-500);margin-top:.8rem;
  transition:width var(--t-med) var(--ease-out);
}
.dept:hover .dept__line{width:56px;}

/* --------------------------------------------------------------------------
   15. Mission / Vision pillars
   -------------------------------------------------------------------------- */
.pillar{
  position:relative;
  padding:clamp(2rem,4vw,3rem);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  height:100%;
  overflow:hidden;
  transition:transform var(--t-med) var(--ease-out),box-shadow var(--t-med) var(--ease-out);
}
.pillar::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--gold-500),var(--navy-600));
  transform:scaleY(0);transform-origin:top;
  transition:transform var(--t-med) var(--ease-out);
}
.pillar:hover{transform:translateY(-6px);box-shadow:var(--shadow-2);}
.pillar:hover::before{transform:scaleY(1);}
.pillar__icon{
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--navy-100);color:var(--navy-700);
  font-size:1.25rem;margin-bottom:1.3rem;
  transition:background var(--t-med) var(--ease-out),color var(--t-med) var(--ease-out),transform var(--t-med) var(--ease-out);
}
.pillar:hover .pillar__icon{background:var(--gold-500);color:var(--navy-900);transform:rotate(-8deg) scale(1.06);}
.pillar h3{margin-bottom:.9rem;}
.pillar p{color:var(--ink-2);}

/* --------------------------------------------------------------------------
   16. Team
   -------------------------------------------------------------------------- */
.person{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;height:100%;
  transition:transform var(--t-med) var(--ease-out),box-shadow var(--t-med) var(--ease-out);
}
.person:hover{transform:translateY(-8px);box-shadow:var(--shadow-3);}
.person__media{position:relative;overflow:hidden;aspect-ratio:3/3.6;background:var(--paper-2);}
.person__media img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform .9s var(--ease-out);
}
.person:hover .person__media img{transform:scale(1.06);}
.person__social{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;justify-content:center;gap:.5rem;
  padding:1rem;
  background:linear-gradient(180deg,transparent,rgba(6,21,48,.85));
  transform:translateY(100%);opacity:0;
  transition:transform var(--t-med) var(--ease-out),opacity var(--t-med) var(--ease-out);
}
.person:hover .person__social{transform:translateY(0);opacity:1;}
.person__social a{
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;font-size:.8rem;
  background:rgba(255,255,255,.14);color:var(--white);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
  transition:background var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out);
}
.person__social a:hover{background:var(--gold-500);color:var(--navy-900);box-shadow:none;}
.person__body{padding:1.3rem 1.1rem;text-align:center;border-top:3px solid var(--gold-500);}
.person__name{font-size:1.08rem;margin-bottom:.25rem;color:var(--navy-800);}
.person__role{
  font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);
}

/* --------------------------------------------------------------------------
   17. Page banner (interior pages)
   -------------------------------------------------------------------------- */
.pagehead{
  position:relative;
  background:var(--navy-800);
  padding-block:clamp(3rem,7vw,5rem);
  overflow:hidden;
  isolation:isolate;
}
.pagehead::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:var(--pagehead-img,none);
  background-size:cover;background-position:center;
  transform:scale(1.06);
  animation:kenburns 22s var(--ease-soft) alternate infinite;
}
.pagehead::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(6,21,48,.94),rgba(6,21,48,.72));
}
.pagehead h1{color:var(--white);margin-bottom:.8rem;}
.pagehead p{color:#C2D0E6;max-width:60ch;}

.crumbs{
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:#93A8C8;margin-bottom:1.1rem;
}
.crumbs a{color:var(--gold-400);}
.crumbs a:hover{color:var(--white);}
.crumbs li{display:flex;align-items:center;gap:.5rem;}
.crumbs li + li::before{content:"/";color:#5B7096;}

/* --------------------------------------------------------------------------
   18. Article layout
   -------------------------------------------------------------------------- */
.layout{
  display:grid;gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:1000px){
  .layout{grid-template-columns:minmax(0,1fr) 340px;}
}

.article__hero{
  width:100%;border-radius:var(--r-md);
  margin-bottom:2rem;box-shadow:var(--shadow-2);
  aspect-ratio:16/9;object-fit:cover;
}
.article__meta{
  display:flex;flex-wrap:wrap;gap:1.4rem;
  padding-bottom:1.3rem;margin-bottom:1.8rem;
  border-bottom:1px solid var(--line);
  font-size:.82rem;color:var(--ink-3);
}
.article__meta span{display:inline-flex;align-items:center;gap:.5rem;}
.article__meta i{color:var(--gold-600);}

.article__body{font-size:1.06rem;line-height:1.82;color:var(--ink-2);}
.article__body p{margin-bottom:1.35rem;}
.article__body h2,.article__body h3{margin:2.2rem 0 .9rem;}
.article__body img{
  border-radius:var(--r-md);margin:1.8rem 0;
  box-shadow:var(--shadow-2);
}
.article__body a{text-decoration:underline;text-underline-offset:3px;}
.article__body ul,.article__body ol{margin:0 0 1.35rem 1.4rem;}
.article__body ul li{list-style:disc;margin-bottom:.5rem;}
.article__body ol li{list-style:decimal;margin-bottom:.5rem;}
.article__body blockquote{
  margin:1.8rem 0;padding:1.2rem 1.6rem;
  border-left:4px solid var(--gold-500);
  background:var(--paper);border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-family:var(--font-display);font-size:1.15rem;font-style:italic;color:var(--navy-800);
}

/* Share row */
.share{
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  margin-top:2.5rem;padding-top:1.6rem;border-top:1px solid var(--line);
}
.share__label{
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
}
.share a{
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--paper);color:var(--navy-700);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:transform var(--t-fast) var(--ease-out),background var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out);
}
.share a:hover{background:var(--navy-800);color:var(--white);transform:translateY(-3px);box-shadow:none;}

/* --------------------------------------------------------------------------
   19. Sidebar
   -------------------------------------------------------------------------- */
.side{display:flex;flex-direction:column;gap:2.2rem;}
@media (min-width:1000px){.side{position:sticky;top:96px;}}
.side__block{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:1.4rem;
}
.side__title{
  font-size:1.05rem;margin-bottom:1.1rem;padding-bottom:.7rem;
  position:relative;color:var(--navy-800);
}
.side__title::after{
  content:"";position:absolute;left:0;bottom:0;width:42px;height:2px;background:var(--gold-500);
}
.side__list{display:flex;flex-direction:column;gap:.35rem;}

/* Search */
.searchbar{display:flex;gap:.5rem;}
.searchbar input{
  flex:1;min-width:0;
  padding:.85rem 1rem;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--white);
  transition:border-color var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out);
}
.searchbar input:focus{outline:none;border-color:var(--navy-500);box-shadow:0 0 0 3px var(--navy-100);}
.searchbar button{
  padding:.85rem 1.1rem;border-radius:var(--r-sm);
  background:var(--navy-800);color:var(--white);
  transition:background var(--t-fast) var(--ease-out);
}
.searchbar button:hover{background:var(--gold-500);color:var(--navy-900);}

/* Admissions callout */
.callout{
  background:linear-gradient(150deg,var(--navy-800),var(--navy-600));
  color:#D3DEEF;border-radius:var(--r-md);
  padding:1.8rem 1.5rem;text-align:center;
  position:relative;overflow:hidden;
}
.callout::before{
  content:"";position:absolute;top:-40%;right:-30%;
  width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,162,39,.35),transparent 65%);
}
.callout h3{color:var(--white);margin-bottom:.6rem;position:relative;}
.callout p{font-size:.9rem;margin-bottom:1.3rem;position:relative;}
.callout .btn{position:relative;}

/* --------------------------------------------------------------------------
   20. Comments
   -------------------------------------------------------------------------- */
.comment{display:flex;gap:1rem;padding-bottom:1.5rem;margin-bottom:1.5rem;border-bottom:1px solid var(--line);}
.comment:last-child{border-bottom:0;margin-bottom:0;}
.comment__avatar{
  flex:0 0 46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--navy-100);color:var(--navy-700);
  font-family:var(--font-display);font-weight:700;font-size:1.1rem;
}
.comment__name{font-family:var(--font-display);font-weight:700;color:var(--navy-800);font-size:1rem;}
.comment__date{font-size:.75rem;color:var(--ink-3);margin-left:.6rem;font-style:italic;}
.comment__text{margin-top:.35rem;font-size:.95rem;}

.formcard{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:clamp(1.5rem,3vw,2.4rem);
}
.field{display:flex;flex-direction:column;gap:.4rem;}
.field label{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);}
.field input,.field textarea{
  width:100%;padding:.9rem 1rem;
  background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-sm);
  transition:border-color var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out);
}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--navy-500);box-shadow:0 0 0 3px var(--navy-100);
}
.field textarea{resize:vertical;min-height:130px;}
.formgrid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));}
.formgrid .full{grid-column:1/-1;}

.alert{
  padding:.9rem 1.1rem;border-radius:var(--r-sm);
  font-size:.92rem;margin-bottom:1.2rem;
  animation:heroIn .4s var(--ease-out) both;
}
.alert--ok{background:#E7F5EC;color:var(--success);box-shadow:inset 0 0 0 1px #BCE3C9;}
.alert--err{background:#FBEAE8;color:var(--danger);box-shadow:inset 0 0 0 1px #F0C4BF;}

/* --------------------------------------------------------------------------
   21. Pagination
   -------------------------------------------------------------------------- */
.pager{display:flex;gap:.45rem;justify-content:center;flex-wrap:wrap;margin-top:3rem;}
.pager a,.pager span{
  min-width:44px;height:44px;padding-inline:.8rem;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);
  border:1px solid var(--line);
  font-size:.9rem;font-weight:600;color:var(--navy-700);
  transition:background var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out);
}
.pager a:hover{background:var(--navy-800);color:var(--white);border-color:var(--navy-800);}
.pager .is-current{background:var(--gold-500);color:var(--navy-900);border-color:var(--gold-500);}

/* --------------------------------------------------------------------------
   22. Footer
   -------------------------------------------------------------------------- */
.footer{
  background:var(--navy-900);
  color:#93A8C8;
  padding-top:clamp(3rem,6vw,4.5rem);
  position:relative;
}
.footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--navy-800),var(--gold-500),var(--navy-800));
}
.footer h4{
  color:var(--white);font-size:1.05rem;margin-bottom:1.2rem;
  position:relative;padding-bottom:.65rem;
}
.footer h4::after{
  content:"";position:absolute;left:0;bottom:0;width:36px;height:2px;background:var(--gold-500);
}
.footer__grid{
  display:grid;gap:clamp(1.8rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  padding-bottom:3rem;
}
.footer__about img{width:64px;height:64px;object-fit:contain;margin-bottom:1rem;border-radius:6px;}
.footer__about p{font-size:.92rem;}
.footer__links li{margin-bottom:.6rem;}
.footer__links a{
  color:#93A8C8;font-size:.92rem;
  display:inline-flex;align-items:center;gap:.55rem;
  transition:color var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out);
}
.footer__links a::before{content:"›";color:var(--gold-500);font-size:1.1rem;line-height:1;}
.footer__links a:hover{color:var(--white);transform:translateX(4px);}
.footer__contact li{
  display:flex;gap:.8rem;margin-bottom:.9rem;font-size:.92rem;align-items:flex-start;
}
.footer__contact i{color:var(--gold-500);margin-top:.35rem;flex:0 0 16px;}
.footer__contact a{color:#93A8C8;}
.footer__contact a:hover{color:var(--white);}

.footer__social{display:flex;gap:.6rem;margin-top:1.3rem;}
.footer__social a{
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;color:#93A8C8;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  transition:background var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out);
}
.footer__social a:hover{background:var(--gold-500);color:var(--navy-900);transform:translateY(-3px);box-shadow:none;}

.footer__bottom{
  border-top:1px solid rgba(255,255,255,.09);
  padding-block:1.5rem;
  display:flex;flex-wrap:wrap;gap:.8rem;
  align-items:center;justify-content:space-between;
  font-size:.82rem;
}
.footer__bottom a{color:#93A8C8;}
.footer__bottom a:hover{color:var(--gold-400);}

/* Back to top */
.totop{
  position:fixed;right:1.2rem;bottom:1.2rem;z-index:800;
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--navy-800);color:var(--white);
  box-shadow:var(--shadow-2);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity var(--t-med) var(--ease-out),visibility var(--t-med),transform var(--t-med) var(--ease-out),background var(--t-fast);
}
.totop.is-visible{opacity:1;visibility:visible;transform:none;}
.totop:hover{background:var(--gold-500);color:var(--navy-900);}

/* Reading progress bar (article pages) */
.progress{
  position:fixed;top:0;left:0;height:3px;z-index:1000;
  width:0;background:linear-gradient(90deg,var(--gold-500),var(--gold-400));
  transition:width .1s linear;
}

/* --------------------------------------------------------------------------
   23. Modal (student portal popup)
   -------------------------------------------------------------------------- */
.modal{
  position:fixed;inset:0;z-index:1100;
  display:grid;place-items:center;padding:1.2rem;
  background:rgba(6,21,48,.72);backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;
  transition:opacity var(--t-med) var(--ease-out),visibility var(--t-med);
}
.modal.is-open{opacity:1;visibility:visible;}
.modal__panel{
  width:min(100%,440px);
  background:var(--white);border-radius:var(--r-lg);
  padding:clamp(1.8rem,4vw,2.6rem);
  text-align:center;position:relative;
  box-shadow:var(--shadow-3);
  transform:translateY(24px) scale(.97);
  transition:transform var(--t-med) var(--ease-out);
  border-top:4px solid var(--gold-500);
}
.modal.is-open .modal__panel{transform:none;}
.modal__close{
  position:absolute;top:.8rem;right:.8rem;
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;color:var(--ink-3);font-size:1.3rem;line-height:1;
  transition:background var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out);
}
.modal__close:hover{background:var(--paper-2);color:var(--ink);}
.modal__panel h3{margin-bottom:.5rem;}
.modal__panel p{font-size:.94rem;margin-bottom:1.6rem;}
.modal__actions{display:flex;flex-direction:column;gap:.75rem;}

/* --------------------------------------------------------------------------
   24. Scroll reveal
   -------------------------------------------------------------------------- */
.reveal{
  opacity:0;
  transform:translate3d(0,34px,0);
  transition:opacity .85s var(--ease-out),transform .85s var(--ease-out);
  will-change:opacity,transform;
}
.reveal.is-visible{opacity:1;transform:none;}
.reveal--left{transform:translate3d(-40px,0,0);}
.reveal--right{transform:translate3d(40px,0,0);}
.reveal--zoom{transform:scale(.94);}
.reveal--fade{transform:none;}

/* Stagger children */
.stagger > *{
  opacity:0;transform:translate3d(0,28px,0);
  transition:opacity .75s var(--ease-out),transform .75s var(--ease-out);
}
.stagger.is-visible > *{opacity:1;transform:none;}
.stagger.is-visible > *:nth-child(1){transition-delay:.05s;}
.stagger.is-visible > *:nth-child(2){transition-delay:.15s;}
.stagger.is-visible > *:nth-child(3){transition-delay:.25s;}
.stagger.is-visible > *:nth-child(4){transition-delay:.35s;}
.stagger.is-visible > *:nth-child(5){transition-delay:.45s;}
.stagger.is-visible > *:nth-child(6){transition-delay:.55s;}
.stagger.is-visible > *:nth-child(7){transition-delay:.65s;}
.stagger.is-visible > *:nth-child(8){transition-delay:.75s;}
.stagger.is-visible > *:nth-child(9){transition-delay:.85s;}

/* Page load fade */
body{animation:pageIn .5s var(--ease-out) both;}
@keyframes pageIn{from{opacity:0;}to{opacity:1;}}

/* --------------------------------------------------------------------------
   25. Utilities
   -------------------------------------------------------------------------- */
.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;
}
.text-center{text-align:center;}
.mt-1{margin-top:.5rem;}.mt-2{margin-top:1rem;}.mt-3{margin-top:1.75rem;}
.mb-2{margin-bottom:1rem;}.mb-3{margin-bottom:1.75rem;}
.flex{display:flex;}
.gap-1{gap:.75rem;}
.wrap-flex{flex-wrap:wrap;}
.empty-state{
  padding:3rem 1rem;text-align:center;color:var(--ink-3);
  border:1px dashed var(--line);border-radius:var(--r-md);
}

/* Skip link */
.skip{
  position:absolute;left:-9999px;top:0;z-index:2000;
  background:var(--gold-500);color:var(--navy-900);
  padding:.8rem 1.2rem;font-weight:700;border-radius:0 0 var(--r-sm) 0;
}
.skip:focus{left:0;}

/* --------------------------------------------------------------------------
   26. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .reveal,.stagger > *{opacity:1!important;transform:none!important;}
  .rule{transform:scaleX(1)!important;}
  .timeline::before{transform:scaleY(1)!important;}
  .ticker__track{animation:none;}
}

/* --------------------------------------------------------------------------
   27. Print
   -------------------------------------------------------------------------- */
@media print{
  .topbar,.nav,.hero,.totop,.share,.side,.footer__grid,.formcard,.progress,.ticker{display:none!important;}
  body{color:#000;}
  .article__body{font-size:12pt;}
}

/* --------------------------------------------------------------------------
   28. Small-screen adjustments
   -------------------------------------------------------------------------- */

/* Applied to html only. On body it can clip position:fixed descendants such as
   the mobile drawer. overflow-x:clip is used in preference to hidden because it
   does not create a scroll container, which would break position:sticky. */
html{overflow-x:clip;}
@supports not (overflow:clip){
  html{overflow-x:hidden;}
}
body{max-width:100%;}

/* Permit long unbroken strings to wrap. The school email address is 41
   characters without a break opportunity and would otherwise exceed the
   viewport width on small screens. */
.topbar__contact a,.topbar__contact span,
.footer__contact a,.footer__contact span,
.card__title,.mini__title,.person__name,
.comment__name,.comment__text,
.article__body a{overflow-wrap:anywhere;}

/* Article content is supplied from the database and is constrained here. */
.article__body img{height:auto;}
.article__body iframe,.article__body video{max-width:100%;}
.article__body table{display:block;width:100%;overflow-x:auto;}
.article__body pre{overflow-x:auto;}

/* The decorative frame is offset 14px beyond the image and is removed at
   narrow widths, where it would extend past the viewport. */
@media (max-width:920px){
  .split__media::before{display:none;}
}

@media (max-width:900px){
  /* The masthead and topbar are hidden at this width. The navigation bar
     carries the crest and school name, and the contact details are available
     in the footer and on the contact page. */
  .topbar{display:none;}
  .masthead{display:none;}

  /* The navigation bar serves as the masthead at this width. */
  .nav__brand{display:flex;gap:.55rem;}
  .nav__brand img{width:36px;height:36px;}
  .nav__brand span{font-size:1rem;line-height:1.15;}
  .nav__inner{min-height:56px;}

  html{scroll-padding-top:64px;}
}

/* Reduced vertical spacing for small screens. */
@media (max-width:640px){
  :root{
    --section-y:clamp(2.5rem,7vw,3.5rem);
  }
  .pagehead{padding-block:clamp(2rem,7vw,3rem);}
  .hero{min-height:clamp(440px,76vh,620px);}
  .hero__content{padding-block:clamp(2.5rem,8vh,4rem);}
  .hero__dots{bottom:1.4rem;}
  .stat{padding:1.4rem .75rem;}
  .stat + .stat::before{top:16%;bottom:16%;}
  .article__meta{gap:.9rem;font-size:.78rem;}
  .share{gap:.5rem;}
  .footer__grid{padding-bottom:2rem;}
  .footer__bottom{justify-content:center;text-align:center;}
  .totop{right:.85rem;bottom:.85rem;width:44px;height:44px;}
}

/* Viewports below 380px. */
@media (max-width:380px){
  :root{--gutter:1rem;}
  .btn{padding:.85rem 1.2rem;font-size:.75rem;}
  .hero__actions{width:100%;}
  .hero__actions .btn{flex:1 1 100%;}
}