/* ==========================================================================
   IU CPLE — Center for Professional Learning & Excellence
   Brand colours are sampled from the department logo (#2F4B81 / #9D9FA2).
   All tokens live in :root — change them here to re-skin the whole site.
   ========================================================================== */

:root{
  /* Brand navy */
  --navy-900:#192743;
  --navy-800:#1F3256;
  --navy-700:#263D69;
  --navy:    #2F4B81;
  --navy-400:#577BC2;
  --navy-100:#D2DCEF;
  --navy-50: #E5EBF5;
  --header-bg:#E9EDF7;   /* light blue chrome, tinted from the logo navy */

  /* Accent — gold. Carries the contrast against the navy. */
  --gold:    #E9A227;
  --gold-400:#F4BC55;
  --gold-700:#9C6B08;
  --gold-50: #FDF4E3;

  /* Support */
  --teal:    #686B6E;
  --grey:    #9D9FA2;

  /* Neutrals */
  --paper:   #F5F7FB;
  --white:   #FFFFFF;
  --text:    #0E1727;
  --muted:   #56617A;
  --line:    #E1E7F1;
  --line-2:  #C8D2E4;

  /* Type */
  --display:"Newsreader","Iowan Old Style",Georgia,serif;
  --body:   "IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:   "IBM Plex Mono",ui-monospace,"Courier New",monospace;

  /* Layout */
  --wrap:1220px;
  --gutter:clamp(20px,5vw,40px);
  --r:6px;
  --section-y:clamp(66px,8vw,112px);
  --shadow-sm:0 2px 8px rgba(11,23,41,.06);
  --shadow:0 18px 40px -24px rgba(11,23,41,.34);
  --shadow-lg:0 34px 70px -34px rgba(11,23,41,.46);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }

body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--body); font-size:1.0625rem; line-height:1.68;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--navy); text-underline-offset:3px; }
a:hover{ color:var(--navy-700); }
:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
.skip{ position:absolute; left:-9999px; top:0; z-index:300; background:var(--navy-900); color:#fff; padding:12px 18px; }
.skip:focus{ left:0; }

/* ---------------------------------------------------------------- typography */

h1,h2,h3,h4{ font-family:var(--display); font-weight:500; letter-spacing:-.014em; line-height:1.12; margin:0 0 .6em; color:var(--navy-900); }
h1 em,h2 em,h3 em{ font-style:italic; color:var(--navy); }

.eyebrow{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-700); margin:0 0 16px; display:flex; align-items:center; gap:12px; font-weight:500;
}
.eyebrow::before{ content:""; width:30px; height:2px; background:var(--gold); flex:none; }
.eyebrow--light{ color:var(--gold-400); }
.center .eyebrow{ justify-content:center; }

.lede{ font-size:1.18rem; color:var(--muted); max-width:58ch; margin:0 0 32px; }
.mono{ font-family:var(--mono); }

/* ------------------------------------------------------------------ buttons */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--body); font-size:.95rem; font-weight:600; letter-spacing:.005em;
  padding:15px 28px; border:2px solid transparent; border-radius:var(--r);
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn--gold{ background:var(--gold); color:#22160A; box-shadow:0 12px 26px -12px rgba(233,162,39,.75); }
.btn--gold:hover{ background:var(--gold-400); color:#22160A; box-shadow:0 18px 34px -14px rgba(233,162,39,.85); }
.btn--navy{ background:var(--navy); color:#fff; }
.btn--navy:hover{ background:var(--navy-700); color:#fff; }
.btn--outline{ background:transparent; color:var(--navy); border-color:var(--line-2); }
.btn--outline:hover{ border-color:var(--navy); color:var(--navy); }
.btn--light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.btn--light:hover{ background:rgba(255,255,255,.14); border-color:#fff; color:#fff; }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; }

.textlink{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--navy); display:inline-flex; align-items:center; gap:8px; font-weight:500;
}
.textlink span{ transition:transform .2s ease; }
.textlink:hover span{ transform:translateX(5px); }
.textlink--gold{ color:var(--gold-700); }

/* ---------------------------------------------------------------- structure */

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y); position:relative; }
.section--tight{ padding-block:clamp(48px,6vw,76px); }
.section--white{ background:var(--white); }
.section--paper{ background:var(--paper); }
.section--navy{ background:var(--navy-900); color:#BCC8DE; }
.section--navy h2,.section--navy h3{ color:#fff; }
.section--navy .lede{ color:#9AA8C4; }

.section-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,25rem); gap:clamp(20px,5vw,64px); align-items:end; margin-bottom:52px; }
.section-head h2{ font-size:clamp(2.1rem,3.9vw,3rem); margin:0; }
.section-head p{ margin:0; color:var(--muted); }
.section--navy .section-head p{ color:#96A3BE; }
@media (max-width:860px){ .section-head{ grid-template-columns:1fr; align-items:start; gap:14px; } }

.section-head--center{ display:block; text-align:center; max-width:60ch; margin-inline:auto; }
.section-head--center .eyebrow{ justify-content:center; }
.section-head--center p{ margin-top:14px; }

/* image-backed section */
.section--image{ background-size:cover; background-position:center; position:relative; color:#C4CFE4; }
.section--image::before{ content:""; position:absolute; inset:0; background:linear-gradient(102deg,rgba(25,39,67,.95) 0%,rgba(25,39,67,.92) 52%,rgba(25,39,67,.89) 100%); }
.section--image > .wrap{ position:relative; z-index:1; }
/* Softer overlay for bands that carry only large text, so the photograph reads. */
.section--image--soft::before{ background:linear-gradient(102deg,rgba(25,39,67,.84) 0%,rgba(25,39,67,.78) 52%,rgba(25,39,67,.74) 100%); }
.section--image h2,.section--image h3{ color:#fff; }

/* ====================================================================== header */

.topbar{ background:var(--navy); color:#BCC7DD; font-family:var(--mono); font-size:.73rem; letter-spacing:.04em; }
.topbar__inner{ display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:40px; flex-wrap:wrap; }
.topbar a{ color:#E4EAF6; text-decoration:none; }
.topbar a:hover{ color:var(--gold-400); }
.topbar__set{ display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
.topbar__social{ display:flex; gap:14px; }
.topbar__social a{ display:inline-flex; }
.topbar__social svg{ width:14px; height:14px; fill:currentColor; }
@media (max-width:700px){ .topbar__set--right{ display:none; } }

.masthead{ background:var(--header-bg); position:sticky; top:0; z-index:200; box-shadow:0 1px 0 rgba(47,75,129,.16); }
/* The full lockup needs 72px to keep its tagline readable, which makes a tall
   sticky bar. Once the user scrolls past it, shrink back to a compact header.
   Purely additive: if the script never runs, the header simply stays full size. */
.masthead__inner,.logo img{ transition:min-height .22s ease, height .22s ease; }
.masthead.is-compact .masthead__inner{ min-height:70px; }
.masthead.is-compact .logo img{ height:44px; }
@media (prefers-reduced-motion:reduce){ .masthead__inner,.logo img{ transition:none; } }
.masthead::after{ content:""; display:block; height:3px; background:linear-gradient(90deg,var(--navy) 0%,var(--navy) 42%,var(--gold) 42%,var(--gold) 100%); }
.masthead__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:104px; }

.logo{ display:inline-flex; align-items:center; }
.logo img{ height:72px; width:auto; }   /* below ~64px the tagline stops being readable */
.logo--footer{ background:var(--header-bg); padding:14px 18px; border-radius:var(--r); display:inline-block; }
.logo--footer img{ width:220px; height:auto; }

.nav{ display:flex; align-items:center; gap:2px; }
.nav a{ font-size:.94rem; font-weight:500; color:var(--text); text-decoration:none; padding:11px 14px; border-radius:4px; transition:background .16s ease,color .16s ease; }
.nav a:hover{ background:var(--white); color:var(--navy); }
.nav a[aria-current="page"]{ color:var(--navy); box-shadow:inset 0 -3px 0 var(--gold); border-radius:0; }
.nav > .btn{ display:none; }
.masthead .btn{ padding:13px 24px; }

.navtoggle{
  display:none; background:var(--navy); border:0; border-radius:4px; padding:12px 14px; cursor:pointer;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#fff;
}
@media (max-width:1060px){
  .navtoggle{ display:block; }
  .masthead__inner > .btn{ display:none; }
  .nav > .btn{ display:inline-flex; }
  .logo img{ height:64px; }
  .masthead__inner{ min-height:96px; }
  .nav{ display:none; position:absolute; left:0; right:0; top:100%; background:var(--header-bg); flex-direction:column; align-items:stretch; gap:0; padding:8px var(--gutter) 22px; box-shadow:0 22px 34px -24px rgba(11,23,41,.5); }
  .nav.is-open{ display:flex; }
  .nav a{ padding:15px 4px; border-bottom:1px solid var(--line); border-radius:0; }
  .nav a[aria-current="page"]{ box-shadow:none; color:var(--gold-700); }
  .nav .btn{ margin-top:18px; }
}

/* ============================================================== hero carousel */

.hero{ position:relative; background:var(--navy-900); }
.slides{ position:relative; height:clamp(500px,72vh,680px); }
.slide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .9s ease, visibility .9s ease;
  display:flex; align-items:center;
}
.slide.is-active{ opacity:1; visibility:visible; }
.slide__bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transform:scale(1.06); transition:transform 9s linear;
}
.slide.is-active .slide__bg{ transform:scale(1); }
.slide__scrim{
  position:absolute; inset:0;
  background:linear-gradient(97deg,rgba(25,39,67,.62) 0%,rgba(25,39,67,.52) 42%,rgba(25,39,67,.26) 74%,rgba(25,39,67,.10) 100%);
}
.slide__inner{ position:relative; z-index:2; width:100%; }
.slide__content{ max-width:660px; padding-block:40px 96px; }
.slide__content .eyebrow{ color:var(--gold-400); }
.slide__content .eyebrow::before{ background:var(--gold-400); }
.slide h1,.slide h2{
  color:#fff; font-size:clamp(2.4rem,5vw,4rem); line-height:1.06; margin:0 0 20px; text-wrap:balance;
}
.slide h1 em,.slide h2 em{ color:var(--gold-400); font-style:italic; }
.slide p{ color:#C9D4E8; font-size:clamp(1.02rem,1.5vw,1.2rem); max-width:52ch; margin:0 0 32px; }

@media (prefers-reduced-motion:no-preference){
  .slide.is-active .slide__content > *{ opacity:0; transform:translateY(18px); animation:slideUp .7s cubic-bezier(.2,.7,.3,1) forwards; }
  .slide.is-active .slide__content > *:nth-child(2){ animation-delay:.1s; }
  .slide.is-active .slide__content > *:nth-child(3){ animation-delay:.2s; }
  .slide.is-active .slide__content > *:nth-child(4){ animation-delay:.3s; }
}
@keyframes slideUp{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .slide,.slide__bg{ transition:none; }
  .slide__bg{ transform:none; }
}

.slider-ui{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding-bottom:96px; pointer-events:none;
}
.slider-ui__inner{ display:flex; justify-content:space-between; align-items:center; gap:20px; pointer-events:auto; }
.dots{ display:flex; gap:10px; align-items:center; }
.dot{
  width:44px; height:4px; border:0; padding:0; cursor:pointer; border-radius:2px;
  background:rgba(255,255,255,.3); transition:background .2s ease;
}
.dot[aria-selected="true"]{ background:var(--gold); }
.dot:hover{ background:rgba(255,255,255,.6); }
.arrows{ display:flex; gap:10px; }
.arrow{
  width:50px; height:50px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.34); color:#fff;
  display:grid; place-items:center; transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.arrow:hover{ background:var(--gold); border-color:var(--gold); color:#22160A; transform:translateY(-2px); }
.arrow svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.progress{ position:absolute; left:0; top:0; height:2px; width:100%; background:transparent; }
.progress i{ display:block; height:100%; width:0; background:var(--gold); }
@media (max-width:880px){ .slider-ui{ padding-bottom:80px; } }
@media (max-width:900px){
  /* 'cover' on a tall viewport throws away the sides, and the subject of every
     hero photo sits in the right third - so shift the crop and run the scrim
     top-to-bottom instead of left-to-right. */
  .slide__bg{ background-position:68% center; }
  .slide__scrim{ background:linear-gradient(180deg,rgba(25,39,67,.58) 0%,rgba(25,39,67,.76) 55%,rgba(25,39,67,.90) 100%); }
}
@media (max-width:620px){
  .arrows{ display:none; }
  .slider-ui__inner{ justify-content:center; }
  .slides{ height:min(88vh,660px); }
  .slide__content{ padding-block:28px 104px; }
  .slide h1,.slide h2{ font-size:2rem; }
  .slide p{ font-size:1rem; margin-bottom:26px; }
  .slide .btn{ width:100%; }
}

/* ------------------------------------------------------- quick action cards */

.quick{ position:relative; z-index:5; margin-top:-64px; }
.quick__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.qcard{
  background:#fff; border-radius:var(--r); padding:30px 28px 28px;
  box-shadow:var(--shadow); text-decoration:none; color:inherit;
  border-top:4px solid var(--navy); display:flex; flex-direction:column;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.qcard:nth-child(2){ border-top-color:var(--gold); }
.qcard:nth-child(3){ border-top-color:var(--teal); }
.qcard:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); color:inherit; }
.qcard__icon{ width:52px; height:52px; border-radius:var(--r); background:var(--navy-50); color:var(--navy); display:grid; place-items:center; margin-bottom:18px; }
.qcard:nth-child(2) .qcard__icon{ background:var(--gold-50); color:var(--gold-700); }
.qcard:nth-child(3) .qcard__icon{ background:#EDEEF0; color:#4C4F52; }
.qcard__icon svg{ width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.qcard h3{ font-size:1.32rem; margin:0 0 8px; }
.qcard p{ margin:0 0 20px; color:var(--muted); font-size:.95rem; }
.qcard .textlink{ margin-top:auto; }
@media (max-width:880px){ .quick__grid{ grid-template-columns:1fr; } .quick{ margin-top:-48px; } }

/* -------------------------------------------------------------------- stats */

.stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:rgba(255,255,255,.16); border-radius:var(--r); overflow:hidden; }
.stat{ background:var(--navy-800); padding:32px 26px; text-align:center; }
.stat b{ display:block; font-family:var(--display); font-size:clamp(2.4rem,4.4vw,3.4rem); font-weight:500; color:var(--gold-400); line-height:1; }
.stat span{ font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:#93A2BF; }
@media (max-width:760px){ .stats{ grid-template-columns:1fr 1fr; } }

/* -------------------------------------------------------------- about split */

.split{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(30px,5vw,72px); align-items:center; }
.split--flip .split__media{ order:2; }
.split__media{ position:relative; }
.split__media img{ width:100%; aspect-ratio:9/10; object-fit:cover; border-radius:var(--r); box-shadow:var(--shadow); }
.split__badge{
  position:absolute; right:-18px; bottom:-18px; background:var(--gold); color:#22160A;
  border-radius:var(--r); padding:18px 22px; box-shadow:var(--shadow); max-width:200px;
}
.split__badge b{ display:block; font-family:var(--display); font-size:2rem; line-height:1; }
.split__badge span{ font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; }
@media (max-width:880px){ .split{ grid-template-columns:1fr; } .split--flip .split__media{ order:0; } }

.checklist{ list-style:none; margin:0 0 32px; padding:0; display:grid; gap:14px; }
.checklist li{ display:flex; gap:14px; align-items:flex-start; }
.checklist svg{ width:22px; height:22px; flex:none; margin-top:3px; fill:none; stroke:var(--gold); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.checklist b{ display:block; color:var(--navy-900); font-family:var(--display); font-size:1.14rem; font-weight:600; }
.checklist p{ margin:2px 0 0; color:var(--muted); font-size:.96rem; }

/* ------------------------------------------------------ programme categories */

.catgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:22px; }
.cat{
  background:#fff; border-radius:var(--r); padding:30px 28px 28px; display:flex; flex-direction:column;
  border:1px solid var(--line); position:relative; overflow:hidden;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.cat::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
.cat:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent; }
.cat:hover::before{ transform:scaleX(1); }
.cat__icon{ width:56px; height:56px; border-radius:var(--r); background:var(--navy-50); color:var(--navy); display:grid; place-items:center; margin-bottom:20px; transition:background .25s ease,color .25s ease; }
.cat:hover .cat__icon{ background:var(--navy); color:var(--gold-400); }
.cat__icon svg{ width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.cat__no{ font-family:var(--mono); font-size:.65rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-700); display:block; margin-bottom:8px; }
.cat h3{ font-size:1.36rem; margin:0 0 10px; }
.cat p{ margin:0 0 18px; color:var(--muted); font-size:.94rem; }
.chips{ display:flex; flex-wrap:wrap; gap:7px; margin:0 0 22px; padding:0; list-style:none; }
.chips li{ font-family:var(--mono); font-size:.67rem; background:var(--paper); border:1px solid var(--line); padding:5px 10px; border-radius:20px; color:#3C4A66; }
.cat .textlink{ margin-top:auto; }

/* -------------------------------------------------------------------- board */

.board{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16); border-radius:var(--r); padding:8px 24px 22px; backdrop-filter:blur(3px); }
.board__cols,.board__row{ display:grid; grid-template-columns:minmax(0,2.4fr) minmax(0,1fr) minmax(0,.85fr) minmax(0,.75fr); gap:16px; align-items:center; }
.board__cols{ font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:#9EACC6; padding:16px 6px 10px; }
.board__row{ padding:17px 6px; border-top:1px solid rgba(255,255,255,.12); text-decoration:none; color:inherit; border-left:3px solid transparent; transition:background .18s ease,border-color .18s ease,padding-left .18s ease; }
.board__row:hover{ background:rgba(255,255,255,.06); border-left-color:var(--gold); padding-left:14px; color:inherit; }
.board__title{ font-family:var(--display); font-size:1.14rem; color:#fff; line-height:1.28; }
.board__meta{ font-family:var(--mono); font-size:.72rem; color:#A6B3CC; }
.board__date{ font-family:var(--mono); font-size:.86rem; color:var(--gold-400); font-weight:500; }
.board__seats{ font-family:var(--mono); font-size:.72rem; text-align:right; color:#93A2BF; }
.board__seats.is-low{ color:#F09B7E; }
@media (max-width:640px){
  .board__cols{ display:none; }
  .board__row{ grid-template-columns:1fr auto; gap:6px 14px; }
  .board__title{ grid-column:1 / -1; }
  .board__seats{ text-align:left; }
}

/* --------------------------------------------------------------- facilities */

.fgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px; }
.fcard{
  position:relative; border-radius:var(--r); overflow:hidden; min-height:340px; display:flex;
  align-items:flex-end; text-decoration:none; color:#fff; box-shadow:var(--shadow);
  transition:transform .25s ease,box-shadow .25s ease;
}
.fcard:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); color:#fff; }
.fcard img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.fcard:hover img{ transform:scale(1.06); }
.fcard__grad{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(25,39,67,0) 28%,rgba(25,39,67,.68) 62%,rgba(25,39,67,.96) 100%); }
.fcard__body{ position:relative; z-index:2; padding:26px 26px 24px; width:100%; }
.fcard__cap{ font-family:var(--mono); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-400); display:block; margin-bottom:8px; }
.fcard h3{ color:#fff; font-size:1.42rem; margin:0 0 10px; }
.fcard__specs{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.fcard__specs li{ font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; border:1px solid rgba(255,255,255,.38); border-radius:20px; padding:4px 11px; color:#E1E8F5; }

/* detailed facility rows (facilities page) */
.facility{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(26px,4vw,56px); align-items:center; padding-block:clamp(34px,4vw,52px); }
.facility + .facility{ border-top:1px solid var(--line); }
.facility:nth-of-type(even) .facility__media{ order:2; }
.facility__media img{ border-radius:var(--r); box-shadow:var(--shadow); width:100%; aspect-ratio:4/3; object-fit:cover; }
.facility h2,.facility h3{ font-size:1.8rem; margin:0 0 12px; }
.facility p{ color:var(--muted); margin:0 0 22px; }
.specs{ list-style:none; margin:0 0 22px; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(124px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.specs li{ background:#fff; padding:16px; }
.specs b{ display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); font-weight:400; margin-bottom:5px; }
.specs span{ font-family:var(--display); font-size:1.42rem; font-weight:600; color:var(--navy); }
@media (max-width:860px){ .facility{ grid-template-columns:1fr; } .facility:nth-of-type(even) .facility__media{ order:0; } }

/* -------------------------------------------------------------- posts/video */

.postgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:26px; }
.post{ background:#fff; border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; text-decoration:none; color:inherit; border:1px solid var(--line); transition:transform .22s ease,box-shadow .22s ease; }
.post:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); color:inherit; }
.post__media{ position:relative; overflow:hidden; }
.post__media img{ width:100%; aspect-ratio:16/9; object-fit:cover; transition:transform .6s ease; }
.post:hover .post__media img{ transform:scale(1.06); }
.post__tag{ position:absolute; top:14px; left:14px; background:var(--gold); color:#22160A; font-family:var(--mono); font-size:.63rem; letter-spacing:.14em; text-transform:uppercase; padding:6px 11px; border-radius:3px; font-weight:500; }
.post__body{ padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; }
.post__date{ font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 10px; }
.post h3{ font-size:1.26rem; margin:0 0 10px; line-height:1.26; }
.post p{ margin:0 0 20px; color:var(--muted); font-size:.94rem; }
.post .textlink{ margin-top:auto; }

.videogrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:24px; }
.video{ border-radius:var(--r); overflow:hidden; text-decoration:none; color:inherit; display:block; background:var(--navy-800); border:1px solid rgba(255,255,255,.14); transition:transform .22s ease,border-color .22s ease; }
.video:hover{ transform:translateY(-6px); border-color:var(--gold); color:inherit; }
.video__frame{ position:relative; aspect-ratio:16/9; overflow:hidden; }
.video__frame img{ width:100%; height:100%; object-fit:cover; opacity:.72; transition:opacity .3s ease,transform .6s ease; }
.video:hover .video__frame img{ opacity:.9; transform:scale(1.05); }
.video__play{ position:absolute; inset:0; margin:auto; width:60px; height:60px; border-radius:50%; background:var(--gold); color:#22160A; display:grid; place-items:center; box-shadow:0 10px 26px -8px rgba(0,0,0,.6); transition:transform .25s ease; }
.video:hover .video__play{ transform:scale(1.1); }
.video__play svg{ width:20px; height:20px; fill:currentColor; margin-left:3px; }
.video__body{ padding:20px 22px 24px; }
.video__body h3{ font-size:1.1rem; margin:0 0 8px; color:#fff; }
.video__body p{ margin:0; font-family:var(--mono); font-size:.67rem; letter-spacing:.12em; text-transform:uppercase; color:#9EACC6; }

/* --------------------------------------------------------------- quotes */

.quotes{ position:relative; }
.quote{ display:none; }
.quote.is-active{ display:block; }
@media (prefers-reduced-motion:no-preference){ .quote.is-active{ animation:slideUp .6s cubic-bezier(.2,.7,.3,1) both; } }
.quote__text{ font-family:var(--display); font-size:clamp(1.35rem,2.5vw,1.95rem); line-height:1.42; color:var(--navy-900); margin:0 0 28px; max-width:44ch; }
.quote__who{ display:flex; align-items:center; gap:16px; }
.quote__who img{ width:56px; height:56px; border-radius:50%; object-fit:cover; }
.quote__who b{ display:block; font-family:var(--display); font-size:1.1rem; color:var(--navy-900); }
.quote__who span{ font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.quote-mark{ font-family:var(--display); font-size:6rem; line-height:.6; color:var(--gold); display:block; margin-bottom:8px; }
.quotes__nav{ display:flex; gap:10px; margin-top:34px; }
.quotes__nav .arrow{ background:#fff; border-color:var(--line-2); color:var(--navy); }
.quotes__nav .arrow:hover{ background:var(--gold); border-color:var(--gold); color:#22160A; }

/* ------------------------------------------------------------------ calendar */

.calbar{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding-bottom:22px; border-bottom:2px solid var(--line); }
.calbar h2{ margin:0; font-size:1.9rem; }
.filters{ display:flex; gap:8px; flex-wrap:wrap; }
.filter{ font-family:var(--mono); font-size:.67rem; letter-spacing:.13em; text-transform:uppercase; background:#fff; border:1px solid var(--line-2); color:#3C4A66; padding:10px 14px; border-radius:20px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:background .16s ease,color .16s ease,border-color .16s ease; }
.filter:hover{ border-color:var(--navy); }
.filter[aria-pressed="true"]{ background:var(--navy); border-color:var(--navy); color:#fff; }
.filter i{ width:8px; height:8px; border-radius:50%; flex:none; }
.filter svg{ width:14px; height:14px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.dot--program{ background:var(--navy); }
.dot--dept{ background:var(--gold); }
.dot--workshop{ background:var(--teal); }

.cal{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); background:var(--line); gap:1px; border:1px solid var(--line); border-top:0; border-radius:0 0 var(--r) var(--r); overflow:hidden; }
.cal__dow{ background:var(--navy-900); padding:14px 10px; color:#A6B4CE; font-family:var(--mono); font-size:.63rem; letter-spacing:.16em; text-transform:uppercase; text-align:center; }
.cal__day{ background:#fff; min-height:120px; padding:11px 11px 13px; }
.cal__day--out{ background:#FAFBFE; }
.cal__num{ font-family:var(--mono); font-size:.73rem; color:var(--muted); display:block; margin-bottom:9px; }
.ev{ display:block; text-decoration:none; color:var(--text); font-size:.77rem; line-height:1.3; padding:8px 10px; margin-bottom:6px; border-radius:4px; border-left:3px solid var(--line-2); background:var(--paper); transition:background .16s ease,transform .16s ease; }
.ev:hover{ background:var(--navy-50); transform:translateX(2px); color:var(--navy-900); }
.ev b{ display:block; font-family:var(--mono); font-size:.63rem; color:var(--muted); font-weight:400; }
.ev--program{ border-left-color:var(--navy); }
.ev--dept{ border-left-color:var(--gold); }
.ev--workshop{ border-left-color:var(--teal); }
.ev.is-hidden{ display:none; }
@media (max-width:780px){
  .cal{ grid-template-columns:1fr; border-top:1px solid var(--line); }
  .cal__dow{ display:none; }
  .cal__day{ min-height:0; display:flex; gap:14px; align-items:flex-start; }
  .cal__day--out,.cal__day--empty{ display:none; }
  .cal__day:not(:has(.ev)){ display:none; }
  .cal__num{ margin:0; min-width:26px; padding-top:2px; }
  .cal__events{ flex:1; }
}

.agenda{ list-style:none; margin:0; padding:0; }
.agenda li{ display:grid; grid-template-columns:126px minmax(0,1fr) auto; gap:24px; align-items:center; padding:20px 18px; border-radius:var(--r); background:#fff; border:1px solid var(--line); margin-bottom:10px; transition:border-color .18s ease,transform .18s ease; }
.agenda li:hover{ border-color:var(--navy-400); transform:translateX(3px); }
.agenda time,.agenda .dur{ font-family:var(--mono); font-size:.78rem; color:var(--gold-700); font-weight:500; }
.agenda h3{ margin:0 0 4px; font-size:1.16rem; }
.agenda p{ margin:0; font-family:var(--mono); font-size:.67rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.agenda li.is-hidden{ display:none; }
@media (max-width:700px){ .agenda li{ grid-template-columns:1fr; gap:10px; } }

/* ---------------------------------------------------------------- page head */

.pagehead{ background:var(--navy-900) center/cover; position:relative; padding-block:clamp(64px,8vw,104px); color:#B9C6DE; }
.pagehead::before{ content:""; position:absolute; inset:0; background:linear-gradient(100deg,rgba(25,39,67,.86) 0%,rgba(25,39,67,.74) 55%,rgba(25,39,67,.56) 100%); }
.pagehead .wrap{ position:relative; z-index:1; }
.pagehead h1{ color:#fff; font-size:clamp(2.3rem,5vw,3.7rem); margin:0 0 18px; max-width:24ch; }
.pagehead h1 em{ color:var(--gold-400); }
.pagehead p{ margin:0; max-width:60ch; color:#A9B6D0; font-size:1.08rem; }
.crumbs{ font-family:var(--mono); font-size:.69rem; letter-spacing:.15em; text-transform:uppercase; color:#B4C0D7; margin-bottom:22px; }
.crumbs a{ color:#DCE3F1; text-decoration:none; }
.crumbs a:hover{ color:var(--gold-400); }

/* ------------------------------------------------------------------ contact */

.reach{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.reach li{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:20px 22px; display:flex; gap:16px; align-items:flex-start; }
.reach__icon{ width:42px; height:42px; border-radius:var(--r); background:var(--gold-50); color:var(--gold-700); display:grid; place-items:center; flex:none; }
.reach__icon svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.reach b{ display:block; font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:400; margin-bottom:4px; }
.reach a,.reach p{ color:var(--navy-900); text-decoration:none; font-size:1.02rem; margin:0; }
.reach a:hover{ color:var(--navy); text-decoration:underline; }

.socials{ display:flex; gap:10px; flex-wrap:wrap; }
.socials a{ display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; border:1px solid rgba(255,255,255,.4); color:#fff; text-decoration:none; padding:11px 15px; border-radius:24px; transition:background .18s ease,border-color .18s ease,transform .18s ease; }
.socials a:hover{ background:var(--gold); border-color:var(--gold); color:#22160A; transform:translateY(-2px); }
.socials svg{ width:15px; height:15px; fill:currentColor; flex:none; }
.socials--dark a{ border-color:var(--line-2); color:var(--navy); }
.socials--dark a:hover{ color:#22160A; }

.formcard{ background:#fff; border-radius:var(--r); border:1px solid var(--line); padding:clamp(26px,4vw,40px); box-shadow:var(--shadow); }
.formgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field--full{ grid-column:1 / -1; }
.field label{ font-family:var(--mono); font-size:.67rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.field input,.field select,.field textarea{ font-family:var(--body); font-size:1rem; color:var(--text); background:var(--paper); border:1px solid var(--line-2); border-radius:4px; padding:14px 15px; width:100%; transition:border-color .16s ease,background .16s ease; }
.field textarea{ min-height:140px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ background:#fff; border-color:var(--navy); outline:2px solid rgba(47,75,129,.18); outline-offset:0; }
.field small{ color:var(--muted); font-size:.82rem; }
@media (max-width:700px){ .formgrid{ grid-template-columns:1fr; } }

.note{ background:var(--gold-50); border:1px solid #F0DEB4; border-left:4px solid var(--gold); border-radius:0 var(--r) var(--r) 0; padding:18px 20px; font-size:.93rem; color:#6A4B08; }

/* ------------------------------------------------------------------- footer */

.footer{ background:var(--navy-900); color:#9EACC6; padding-block:clamp(56px,6vw,80px) 0; }
.footer__grid{ display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:clamp(26px,4vw,48px); padding-bottom:48px; }
.footer .footcol{ color:#fff; font-family:var(--mono); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; font-weight:400; margin:0 0 20px; }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.footer a{ color:#A0AECB; text-decoration:none; font-size:.94rem; transition:color .16s ease; }
.footer a:hover{ color:var(--gold-400); }
.footer p{ font-size:.94rem; margin:18px 0 22px; color:#9EACC6; max-width:36ch; }
.footer__legal{ border-top:1px solid rgba(255,255,255,.12); padding-block:24px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; color:#8B99B6; }
@media (max-width:900px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:540px){ .footer__grid{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------- utilities */

.prose p{ max-width:66ch; color:#33405A; }
.prose h3{ font-size:1.5rem; margin-top:1.8em; }
.center{ text-align:center; }
.center .lede{ margin-inline:auto; }
.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; }

/* Phones: the full lockup's tagline is illegible below ~64px, so swap to the
   badge crop (handled by <picture> in the markup) and size it to fit. */
@media (max-width:700px){
  .masthead__inner{ min-height:80px; }
  .logo img{ height:40px; }
}