/* ==========================================================================
   Edulife IT School — Global stylesheet
   --------------------------------------------------------------------------
   Design tokens + component styles shared by every page.
   Palette : cream canvas · navy ink · teal primary · amber / coral accents
   Type    : Fraunces (display, editorial serif) + Manrope (UI sans)
   Loaded once from layouts/base.html — never add page-scoped <style> blocks.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root{
  --ink:#101B2D;
  --ink-2:#1B2A44;
  --ink-3:#2C3E5C;
  --cream:#FBF7F0;
  --paper:#FFFFFF;
  --teal:#0E7C6B;
  --teal-2:#0A5F52;
  --teal-soft:#E1F2EE;
  --amber:#F5A524;
  --amber-soft:#FDF0D8;
  --coral:#E4572E;
  --coral-soft:#FCE7DF;
  --muted:#5C6B80;
  --line:#E8E1D5;
  --line-2:#D9D0C0;
  --radius:22px;
  --radius-lg:34px;
  --shadow-sm:0 1px 2px rgba(16,27,45,.06),0 6px 18px -8px rgba(16,27,45,.14);
  --shadow-md:0 18px 40px -22px rgba(16,27,45,.35);
  --shadow-lg:0 40px 80px -40px rgba(16,27,45,.45);
  --maxw:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Manrope',system-ui,-apple-system,Segoe UI,sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--amber);color:var(--ink)}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.display{font-family:'Fraunces',Georgia,serif;font-weight:600;letter-spacing:-.02em;line-height:1.02}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal-2);
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--amber);border-radius:2px}
.eyebrow.on-dark{color:#8FD8C9}
.eyebrow.on-dark::before{background:var(--amber)}
.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}

/* --------------------------------------------------------------------------
   3. Scroll progress bar
   -------------------------------------------------------------------------- */
#progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:1200;
  background:linear-gradient(90deg,var(--teal),var(--amber));transition:width .1s linear}

/* --------------------------------------------------------------------------
   4. Header / navigation
   -------------------------------------------------------------------------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  transition:background .35s var(--ease),box-shadow .35s var(--ease),padding .35s var(--ease);
  padding:18px 0;
}
header.scrolled{
  background:rgba(251,247,240,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line),0 12px 30px -24px rgba(16,27,45,.5);
  padding:10px 0;
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:-.02em}
.brand .mark{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  overflow:hidden;flex:none;
}
.brand .mark img{width:100%;height:100%;object-fit:contain;display:block}
.brand .txt{display:flex;flex-direction:column;line-height:1.05}
.brand .txt b{font-size:16px}
.brand .txt span{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links a{
  font-size:13.5px;font-weight:600;color:var(--ink-3);padding:9px 12px;border-radius:999px;
  transition:color .2s,background .2s;position:relative;white-space:nowrap;
}
.nav-links a:hover{color:var(--ink);background:rgba(16,27,45,.05)}
.nav-links a.active{color:var(--teal-2);background:var(--teal-soft)}
.nav-cta{
  display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--cream);
  padding:11px 20px;border-radius:999px;font-size:14px;font-weight:700;white-space:nowrap;
  transition:transform .25s var(--ease),background .25s,box-shadow .25s;box-shadow:var(--shadow-sm);
}
.nav-cta:hover{transform:translateY(-2px);background:var(--teal-2);box-shadow:var(--shadow-md)}
.nav-cta svg{width:15px;height:15px}
.burger{display:none;width:44px;height:44px;border-radius:12px;background:var(--ink);color:var(--cream);place-items:center}
.burger svg{width:20px;height:20px}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;
  padding:15px 26px;border-radius:999px;transition:transform .25s var(--ease),box-shadow .25s,background .25s,color .25s;
  will-change:transform;
}
.btn svg{width:17px;height:17px;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translate(3px,-3px)}
.btn-primary{background:var(--ink);color:var(--cream);box-shadow:var(--shadow-md)}
.btn-primary:hover{transform:translateY(-3px);background:var(--teal-2)}
.btn-amber{background:var(--amber);color:var(--ink);box-shadow:0 18px 40px -22px rgba(245,165,36,.9)}
.btn-amber:hover{transform:translateY(-3px);background:#ffb63d}
.btn-ghost{border:1.5px solid var(--line-2);color:var(--ink);background:transparent}
.btn-ghost:hover{transform:translateY(-3px);border-color:var(--ink);background:var(--paper)}
.btn-light{background:var(--paper);color:var(--ink);box-shadow:var(--shadow-md)}
.btn-light:hover{transform:translateY(-3px)}
.btn-sm{padding:11px 20px;font-size:13.5px}

/* --------------------------------------------------------------------------
   6. Section rhythm & headings
   -------------------------------------------------------------------------- */
section{position:relative}
.pad{padding:96px 0}
.pad-sm{padding:70px 0}
.pad-top{padding-top:170px}
.sec-head{max-width:720px}
.sec-head h2{font-size:clamp(2rem,4vw,3.1rem);margin-top:18px;color:var(--ink)}
.sec-head h3{font-size:clamp(1.4rem,2.4vw,1.9rem);margin-top:16px;color:var(--ink)}
.sec-head p{margin-top:18px;color:var(--muted);font-size:1.05rem;max-width:60ch}
.sec-head.center{margin:0 auto;text-align:center}
.sec-head.center .eyebrow{justify-content:center}
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}

/* inner-page hero ---------------------------------------------------------- */
.page-hero{position:relative;padding:170px 0 56px;overflow:hidden}
.page-hero .blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.45;pointer-events:none}
.page-hero .b1{width:460px;height:460px;background:#BFE7DE;top:-190px;right:-120px}
.page-hero .b2{width:360px;height:360px;background:#FCE3B8;bottom:-200px;left:-140px;opacity:.5}
.page-hero .p-grid{
  position:absolute;inset:0;opacity:.45;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 60% 20%,#000 20%,transparent 75%);
  mask-image:radial-gradient(ellipse 80% 70% at 60% 20%,#000 20%,transparent 75%);
}
.page-hero .inner{position:relative;z-index:2;max-width:860px}
.page-hero h1{font-size:clamp(2.3rem,4.8vw,3.9rem);margin-top:20px;color:var(--ink)}
.page-hero p.lead{margin-top:20px;font-size:clamp(1.02rem,1.5vw,1.16rem);color:var(--muted);max-width:62ch}
.crumbs{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:6px}
.crumbs a{color:var(--muted);transition:color .2s}
.crumbs a:hover{color:var(--teal-2)}
.crumbs span{opacity:.5}

/* --------------------------------------------------------------------------
   7. Hero (home)
   -------------------------------------------------------------------------- */
.hero{position:relative;padding:150px 0 70px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-bg .blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5}
.hero-bg .b1{width:520px;height:520px;background:#BFE7DE;top:-160px;right:-120px}
.hero-bg .b2{width:420px;height:420px;background:#FCE3B8;bottom:-180px;left:-140px;opacity:.55}
.hero-grid{position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 20%,transparent 75%);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 20%,transparent 75%);
}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(2.6rem,5.6vw,4.6rem);margin:22px 0 0;color:var(--ink)}
.hero h1 .accent{color:var(--teal);position:relative;white-space:nowrap}
.hero h1 .accent::after{
  content:"";position:absolute;left:0;right:0;bottom:.06em;height:.16em;background:var(--amber);
  border-radius:4px;z-index:-1;transform:scaleX(0);transform-origin:left;animation:swipe 1s .5s var(--ease) forwards;
}
@keyframes swipe{to{transform:scaleX(1)}}
.hero p.lead{margin-top:24px;font-size:clamp(1.02rem,1.5vw,1.18rem);color:var(--muted);max-width:33ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.hero-tags span{
  font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  background:var(--paper);border:1px solid var(--line);padding:8px 14px;border-radius:999px;
}
.hero-visual{position:relative}
.hero-frame{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--teal-soft);
  padding:12px;box-shadow:var(--shadow-lg);
}
.hero-frame img{width:100%;aspect-ratio:1.05;object-fit:cover;border-radius:26px}
.float-card{
  position:absolute;background:var(--paper);border-radius:18px;padding:15px 20px;
  box-shadow:0 20px 44px -14px rgba(16,27,45,.30),0 2px 6px rgba(16,27,45,.08);
  border:1px solid rgba(16,27,45,.06);
  z-index:3;animation:floaty 6s ease-in-out infinite;
}
.float-card small{display:block;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.float-card b{display:block;font-size:15px;font-weight:800;margin-top:3px}
.fc-1{top:26px;left:-26px}
.fc-2{bottom:34px;right:-22px;background:var(--ink);color:var(--cream);animation-delay:-3s}
.fc-2 small{color:#8FD8C9}
.fc-3{bottom:-18px;left:34px;background:var(--amber);animation-delay:-1.5s}
.fc-3 small{color:rgba(16,27,45,.65)}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* --------------------------------------------------------------------------
   8. Marquee
   -------------------------------------------------------------------------- */
.marquee{background:var(--ink);color:var(--cream);padding:20px 0;overflow:hidden;position:relative;z-index:2}
.marquee-track{display:flex;gap:0;width:max-content;animation:scrollx 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{
  font-family:'Fraunces',serif;font-size:clamp(1.1rem,2.2vw,1.7rem);font-weight:500;
  padding:0 30px;display:inline-flex;align-items:center;gap:30px;white-space:nowrap;color:rgba(251,247,240,.92)
}
.marquee-track span::after{content:"✦";color:var(--amber);font-size:.8em}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* --------------------------------------------------------------------------
   9. Founder message
   -------------------------------------------------------------------------- */
.founder{background:var(--ink);color:var(--cream);border-radius:var(--radius-lg);overflow:hidden;position:relative}
.founder::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(14,124,107,.55),transparent 70%);top:-160px;right:-100px}
.founder-inner{position:relative;display:grid;grid-template-columns:.72fr 1.28fr;gap:56px;align-items:center;padding:64px}
.founder-photo{position:relative}
.founder-photo img{width:100%;aspect-ratio:.86;object-fit:cover;border-radius:26px;border:1px solid rgba(255,255,255,.14)}
.founder-photo .badge{
  position:absolute;bottom:-16px;right:-14px;background:var(--amber);color:var(--ink);
  padding:12px 18px;border-radius:16px;box-shadow:var(--shadow-md);
}
.founder-photo .badge small{display:block;font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.founder-photo .badge b{font-size:14px}
.founder h2{font-size:clamp(1.9rem,3.6vw,2.9rem);margin-top:16px;color:var(--cream)}
.founder h2 em{font-style:normal;color:var(--amber)}
.founder blockquote{margin-top:24px;font-size:1.12rem;line-height:1.75;color:rgba(251,247,240,.82);max-width:56ch}
.founder .sig{margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}
.founder .sig b{font-size:16px}
.founder .sig span{display:block;font-size:13px;color:#8FD8C9;margin-top:2px}

/* --------------------------------------------------------------------------
   10. Pillars
   -------------------------------------------------------------------------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.pillar{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:34px 30px;
  position:relative;overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s,border-color .4s;
}
.pillar:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);border-color:transparent}
.pillar .num{font-family:'Fraunces',serif;font-size:15px;font-weight:700;color:var(--teal);letter-spacing:.05em}
.pillar h3{font-size:1.35rem;margin-top:20px;font-weight:800;letter-spacing:-.02em}
.pillar p{margin-top:12px;color:var(--muted);font-size:.95rem}
.pillar .bar{display:block;width:46px;height:4px;border-radius:4px;background:var(--amber);margin-top:22px;transition:width .4s var(--ease)}
.pillar:hover .bar{width:80px}
.pillar .corner{position:absolute;top:0;right:0;width:78px;height:78px;border-bottom-left-radius:60px;background:var(--teal-soft);transition:background .4s}
.pillar:nth-child(2) .corner{background:var(--amber-soft)}
.pillar:nth-child(3) .corner{background:var(--coral-soft)}
.pillar:nth-child(2) .num{color:#B87A0E}
.pillar:nth-child(3) .num{color:var(--coral)}

/* --------------------------------------------------------------------------
   11. Feature cards
   -------------------------------------------------------------------------- */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.feature{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;
  transition:transform .4s var(--ease),box-shadow .4s,border-color .4s;position:relative;
}
.feature:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--teal)}
.feature .ic{
  width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:var(--teal-soft);color:var(--teal-2);
  transition:transform .4s var(--ease),background .4s,color .4s;
}
.feature:hover .ic{transform:rotate(-6deg) scale(1.06);background:var(--teal);color:#fff}
.feature .ic svg{width:24px;height:24px}
.feature h3{font-size:1.12rem;margin-top:20px;font-weight:800;letter-spacing:-.01em}
.feature p{margin-top:10px;color:var(--muted);font-size:.92rem}
.feature .idx{position:absolute;top:26px;right:28px;font-family:'Fraunces',serif;font-size:13px;font-weight:700;color:var(--line-2)}

/* --------------------------------------------------------------------------
   12. Gallery
   -------------------------------------------------------------------------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:16px;margin-top:52px}
.g-item{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--ink);cursor:pointer}
.g-item img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .5s}
.g-item:hover img{transform:scale(1.08)}
.g-item .cap{
  position:absolute;inset:auto 0 0 0;padding:22px 20px 18px;color:#fff;
  background:linear-gradient(to top,rgba(16,27,45,.9),transparent);
}
.g-item .cap small{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8FD8C9}
.g-item .cap b{display:block;font-size:1.05rem;margin-top:4px;font-weight:800}
.g-item.big{grid-column:span 2;grid-row:span 2}
.g-item.wide{grid-column:span 2}
.g-spacer{display:none}

/* lightbox ---------------------------------------------------------------- */
.lightbox{
  position:fixed;inset:0;z-index:1300;background:rgba(16,27,45,.94);
  display:flex;align-items:center;justify-content:center;padding:40px;
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox img{max-width:min(1100px,92vw);max-height:82vh;border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.lightbox .lb-cap{position:absolute;bottom:36px;left:0;right:0;text-align:center;color:#fff}
.lightbox .lb-cap b{display:block;font-size:1.05rem;font-weight:800}
.lightbox .lb-cap small{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8FD8C9}
.lightbox .lb-close{position:absolute;top:26px;right:26px;width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center}
.lightbox .lb-close svg{width:22px;height:22px}

/* --------------------------------------------------------------------------
   13. Teachers
   -------------------------------------------------------------------------- */
.teachers{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:52px}
.teacher{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s;
}
.teacher:hover{transform:translateY(-8px);box-shadow:var(--shadow-md)}
.teacher .ph{position:relative;aspect-ratio:.9;overflow:hidden;background:var(--teal-soft)}
.teacher .ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.teacher:hover .ph img{transform:scale(1.06)}
.teacher .campus{
  position:absolute;bottom:12px;left:12px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);
  font-size:10.5px;font-weight:800;color:var(--teal-2);padding:6px 12px;border-radius:999px;
}
.teacher .info{padding:20px}
.teacher .info h3{font-size:1.05rem;font-weight:800;letter-spacing:-.01em}
.teacher .info .role{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-top:5px}
.teacher .info p{font-size:.88rem;color:var(--muted);margin-top:12px}
.teacher.hidden{display:none}

/* filter chips ------------------------------------------------------------ */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.chip{
  font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  background:var(--paper);border:1.5px solid var(--line);padding:10px 18px;border-radius:999px;
  transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease);
}
.chip:hover{transform:translateY(-2px);border-color:var(--teal)}
.chip.active{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.empty{display:none;margin-top:40px;padding:40px;text-align:center;color:var(--muted);
  background:var(--paper);border:1px dashed var(--line-2);border-radius:var(--radius);font-weight:600}
.empty.show{display:block}

/* management team --------------------------------------------------------- */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.member{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px;text-align:center;
  transition:transform .4s var(--ease),box-shadow .4s}
.member:hover{transform:translateY(-8px);box-shadow:var(--shadow-md)}
.member img{width:120px;height:120px;border-radius:50%;object-fit:cover;margin:0 auto;border:4px solid var(--teal-soft)}
.member h3{font-size:1.15rem;font-weight:800;margin-top:20px}
.member .role{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-top:6px}
.member p{font-size:.9rem;color:var(--muted);margin-top:14px}

/* --------------------------------------------------------------------------
   14. Notice board & events
   -------------------------------------------------------------------------- */
.boards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:52px}
.board{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.board-head{display:flex;justify-content:space-between;align-items:center;padding:24px 28px;color:#fff}
.board-head.teal{background:var(--teal-2)}
.board-head.ink{background:var(--ink)}
.board-head small{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#8FD8C9}
.board-head h3{font-size:1.4rem;font-weight:800;margin-top:4px}
.board-head a{font-size:12px;font-weight:800;background:rgba(255,255,255,.16);padding:8px 14px;border-radius:999px;transition:background .25s,color .25s}
.board-head a:hover{background:#fff;color:var(--ink)}
.board-list{display:flex;flex-direction:column}
.board-item{display:flex;gap:18px;padding:22px 28px;border-bottom:1px solid var(--line);transition:background .25s}
.board-item:last-child{border-bottom:none}
.board-item:hover{background:var(--cream)}
.board-item .meta{width:78px;flex:none}
.board-item .meta b{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-2)}
.board-item .meta span{display:block;font-size:11px;color:var(--muted);margin-top:4px}
.board-item .body{border-left:2px solid var(--line);padding-left:18px}
.board-item .body h4{font-size:1rem;font-weight:800;line-height:1.4;transition:color .25s}
.board-item:hover .body h4{color:var(--teal-2)}
.board-item .body p{font-size:.88rem;color:var(--muted);margin-top:6px}
.date-chip{
  width:58px;height:58px;flex:none;border-radius:16px;background:var(--teal-soft);color:var(--teal-2);
  display:grid;place-items:center;text-align:center;line-height:1;
}
.date-chip b{font-size:1.3rem;font-weight:800;display:block}
.date-chip span{font-size:9px;font-weight:800;letter-spacing:.12em;margin-top:3px;display:block}
.board-item .ev h4{font-size:1rem;font-weight:800}
.board-item .ev .where{font-size:11.5px;font-weight:800;color:var(--teal);margin-top:5px}
.board-item .ev p{font-size:.88rem;color:var(--muted);margin-top:8px}

/* full-list page variants ------------------------------------------------- */
.stack{display:flex;flex-direction:column;gap:18px;margin-top:52px}
.row-card{
  display:grid;grid-template-columns:120px 1fr auto;gap:28px;align-items:center;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:28px 30px;
  transition:transform .35s var(--ease),box-shadow .35s,border-color .35s;
}
.row-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:transparent}
.row-card .stamp{text-align:center;border-right:1px solid var(--line);padding-right:24px}
.row-card .stamp b{display:block;font-family:'Fraunces',serif;font-size:2.1rem;font-weight:700;line-height:1;color:var(--teal-2)}
.row-card .stamp span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.row-card h3{font-size:1.22rem;font-weight:800;letter-spacing:-.01em}
.row-card .tag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--teal-2);background:var(--teal-soft);padding:6px 12px;border-radius:999px;margin-bottom:12px}
.row-card p{color:var(--muted);font-size:.94rem;margin-top:8px}
.row-card .go{width:48px;height:48px;border-radius:50%;background:var(--cream);display:grid;place-items:center;flex:none;
  transition:background .3s,color .3s,transform .3s var(--ease)}
.row-card:hover .go{background:var(--ink);color:var(--cream);transform:rotate(0) translate(2px,-2px)}
.row-card .go svg{width:18px;height:18px}
.row-card.hidden{display:none}

/* --------------------------------------------------------------------------
   15. Journal / blog
   -------------------------------------------------------------------------- */
.journal{background:var(--ink);color:var(--cream);border-radius:var(--radius-lg);padding:64px;position:relative;overflow:hidden}
.journal::before{content:"";position:absolute;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,165,36,.22),transparent 70%);bottom:-200px;left:-120px}
.journal .head-row{position:relative}
.journal h2{color:var(--cream)}
.journal .sec-head p{color:rgba(251,247,240,.7)}
.journal-grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:24px;margin-top:48px}
.j-feature{position:relative;border-radius:var(--radius);overflow:hidden;min-height:400px;display:flex;align-items:flex-end}
.j-feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.j-feature:hover img{transform:scale(1.06)}
.j-feature .ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(16,27,45,.95),rgba(16,27,45,.15) 60%,transparent)}
.j-feature .txt{position:relative;padding:34px;color:#fff}
.j-feature .txt .cat{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8FD8C9}
.j-feature .txt h3{font-size:1.7rem;font-weight:800;margin-top:12px;line-height:1.2;max-width:22ch}
.j-feature .txt p{font-size:.92rem;color:rgba(255,255,255,.78);margin-top:12px;max-width:44ch}
.j-list{display:flex;flex-direction:column;gap:14px}
.j-item{display:flex;gap:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:14px;transition:background .3s,transform .3s var(--ease)}
.j-item:hover{background:rgba(255,255,255,.13);transform:translateX(6px)}
.j-item img{width:96px;height:96px;border-radius:14px;object-fit:cover;flex:none}
.j-item .cat{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8FD8C9}
.j-item h4{font-size:1rem;font-weight:800;margin-top:6px;line-height:1.3}
.j-item .date{font-size:11px;color:rgba(255,255,255,.5);margin-top:8px}

/* blog index cards -------------------------------------------------------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
.post{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .4s var(--ease),box-shadow .4s}
.post:hover{transform:translateY(-8px);box-shadow:var(--shadow-md)}
.post .ph{aspect-ratio:1.5;overflow:hidden;background:var(--teal-soft)}
.post .ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.post:hover .ph img{transform:scale(1.06)}
.post .bd{padding:26px 26px 30px;display:flex;flex-direction:column;flex:1}
.post .cat{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
.post h3{font-size:1.2rem;font-weight:800;margin-top:12px;line-height:1.3}
.post p{font-size:.92rem;color:var(--muted);margin-top:12px;flex:1}
.post .meta{display:flex;align-items:center;gap:10px;font-size:11.5px;font-weight:700;color:var(--muted);margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.post.hidden{display:none}

/* --------------------------------------------------------------------------
   16. Admission
   -------------------------------------------------------------------------- */
.admission-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.steps{display:flex;flex-direction:column;gap:0;margin-top:40px}
.step{display:flex;gap:22px;padding-bottom:30px;position:relative}
.step:last-child{padding-bottom:0}
.step::before{content:"";position:absolute;left:23px;top:48px;bottom:0;width:2px;background:var(--line)}
.step:last-child::before{display:none}
.step .dot{
  width:48px;height:48px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--paper);border:2px solid var(--line);font-family:'Fraunces',serif;font-weight:700;color:var(--teal-2);
  transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease);z-index:1;
}
.step:hover .dot{background:var(--teal);color:#fff;border-color:var(--teal);transform:scale(1.08)}
.step h3{font-size:1.1rem;font-weight:800;padding-top:10px}
.step p{font-size:.9rem;color:var(--muted);margin-top:6px}

.form-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:40px;box-shadow:var(--shadow-md)}
.form-card h3{font-size:1.5rem;font-weight:800}
.form-card .sub{font-size:.9rem;color:var(--muted);margin-top:8px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:14.5px;color:var(--ink);background:var(--cream);
  border:1.5px solid var(--line);border-radius:13px;padding:13px 15px;transition:border-color .25s,background .25s,box-shadow .25s;
}
.field textarea{resize:vertical;min-height:96px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--teal);background:#fff;box-shadow:0 0 0 4px rgba(14,124,107,.12);
}
.form-card .btn{width:100%;justify-content:center;margin-top:24px}
.form-note{font-size:12px;color:var(--muted);margin-top:14px;text-align:center}
.form-success{
  display:none;margin-top:20px;background:var(--teal-soft);border:1px solid var(--teal);color:var(--teal-2);
  padding:16px 18px;border-radius:14px;font-size:14px;font-weight:700;
}
.form-success.show{display:block;animation:pop .4s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* --------------------------------------------------------------------------
   17. Stats
   -------------------------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:52px}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;text-align:center;transition:transform .4s var(--ease),box-shadow .4s}
.stat:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.stat b{font-family:'Fraunces',serif;font-size:2.6rem;font-weight:700;color:var(--ink);display:block;line-height:1}
.stat span{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-top:10px;letter-spacing:.02em}

/* --------------------------------------------------------------------------
   18. Trust / permits / press
   -------------------------------------------------------------------------- */
.trust{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:52px}
.permit{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s}
.permit:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.permit img{width:100%;height:280px;object-fit:cover;object-position:top;background:var(--cream)}
.permit .cap{padding:22px 26px}
.permit .cap h3{font-size:1.1rem;font-weight:800}
.permit .cap p{font-size:.88rem;color:var(--muted);margin-top:6px}
.press{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.press .p-item{display:flex;align-items:center;gap:12px;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:14px 20px;transition:transform .3s var(--ease),box-shadow .3s}
.press .p-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.press .p-item img{width:44px;height:44px;object-fit:contain;border-radius:8px}
.press .p-item b{font-size:.92rem;font-weight:800;display:block}
.press .p-item span{font-size:11px;color:var(--muted)}

/* --------------------------------------------------------------------------
   19. Contact page
   -------------------------------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start;margin-top:52px}
.info-list{display:flex;flex-direction:column;gap:16px;margin-top:34px}
.info-card{display:flex;gap:20px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;
  transition:transform .35s var(--ease),box-shadow .35s}
.info-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.info-card .ic{width:50px;height:50px;border-radius:14px;background:var(--teal-soft);color:var(--teal-2);display:grid;place-items:center;flex:none}
.info-card .ic svg{width:22px;height:22px}
.info-card h3{font-size:1.02rem;font-weight:800}
.info-card p{font-size:.92rem;color:var(--muted);margin-top:6px}
.info-card a{color:var(--teal-2);font-weight:700}
.campus-card{background:var(--ink);color:var(--cream);border-radius:var(--radius-lg);padding:38px;position:relative;overflow:hidden}
.campus-card::before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(14,124,107,.5),transparent 70%);top:-140px;right:-90px}
.campus-card h3{font-size:1.5rem;font-weight:800;margin-top:14px;position:relative}
.campus-card p{color:rgba(251,247,240,.78);font-size:.95rem;margin-top:12px;position:relative}
.campus-card .lines{margin-top:26px;display:flex;flex-direction:column;gap:14px;position:relative}
.campus-card .lines div{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:12px;font-size:.92rem}
.campus-card .lines div:last-child{border-bottom:none}
.campus-card .lines span:first-child{color:#8FD8C9;font-weight:700}

/* --------------------------------------------------------------------------
   20. Footer
   -------------------------------------------------------------------------- */
footer{background:var(--ink);color:rgba(251,247,240,.72);padding:70px 0 34px;margin-top:96px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.foot-brand .brand .mark{background:var(--cream);padding:3px}
.foot-brand p{margin-top:20px;font-size:.92rem;max-width:34ch;line-height:1.7}
.foot-col h4{color:var(--cream);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px}
.foot-col a{display:block;font-size:.92rem;padding:6px 0;transition:color .25s,transform .25s}
.foot-col a:hover{color:var(--amber);transform:translateX(4px)}
.foot-bottom{margin-top:52px;padding-top:26px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.85rem}

/* --------------------------------------------------------------------------
   21. Reveal animations
   -------------------------------------------------------------------------- */
.reveal{transition:opacity .8s var(--ease),transform .8s var(--ease)}
/* Content is visible by DEFAULT. It is only hidden once JS confirms it can
   reveal it again (.js is set by an inline script in layouts/base.html).
   Without this, a JS failure would leave the entire page body invisible. */
.js .reveal{opacity:0;transform:translateY(28px)}
.js .reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.32s}.reveal.d5{transition-delay:.4s}.reveal.d6{transition-delay:.48s}

/* --------------------------------------------------------------------------
   22. Back to top
   -------------------------------------------------------------------------- */
#toTop{
  position:fixed;right:24px;bottom:24px;width:50px;height:50px;border-radius:50%;background:var(--ink);color:var(--cream);
  display:grid;place-items:center;box-shadow:var(--shadow-md);z-index:900;opacity:0;pointer-events:none;
  transition:opacity .3s,transform .3s var(--ease);
}
#toTop.show{opacity:1;pointer-events:auto}
#toTop:hover{transform:translateY(-4px);background:var(--teal-2)}
#toTop svg{width:20px;height:20px}

/* --------------------------------------------------------------------------
   23. Mobile drawer
   --------------------------------------------------------------------------
   A right-anchored, full-height slide-in panel over a dimmed + blurred scrim.

   NOTE ON THE BUG THIS REPLACES: the previous rule was `.drawer a` with
   `padding` but no `display`. Anchor elements are inline, so `padding` could
   not stack them vertically and every pair of links landed on the SAME text
   row (measured: 9 links occupying only 5 rows), 6 of them pushed past the
   bottom of an unscrollable panel. Links are now real block-level flex rows.
   -------------------------------------------------------------------------- */

/* Dimmed, blurred backdrop. Sits under the panel (1090 < 1100) but over the
   page content, and over the tawk.to chat bubble. */
.drawer-scrim{
  position:fixed;inset:0;z-index:1090;background:rgba(16,27,45,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .34s var(--ease),visibility .34s;
}
.drawer-scrim.open{opacity:1;visibility:visible}

.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:1100;
  width:min(88vw,400px);max-width:100%;
  display:flex;flex-direction:column;
  background:var(--ink);color:var(--cream);
  box-shadow:var(--shadow-lg);
  transform:translateX(101%);visibility:hidden;
  transition:transform .48s var(--ease),visibility .48s;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}
.drawer.open{transform:none;visibility:visible}

/* --- panel header ------------------------------------------------------- */
.drawer-top{
  position:sticky;top:0;z-index:2;flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:18px 20px;background:var(--ink);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.drawer-top .brand .mark{background:var(--cream);padding:3px}
.drawer-top .brand .txt b{color:var(--cream)}
.drawer-top .brand .txt span{color:rgba(251,247,240,.55)}
.drawer-close{
  width:44px;height:44px;flex:0 0 auto;border-radius:50%;
  background:rgba(255,255,255,.2);color:var(--cream);
  border:1px solid rgba(255,255,255,.22);
  display:grid;place-items:center;
  transition:background .2s,transform .2s var(--ease);
}
.drawer-close:hover{background:rgba(255,255,255,.22);transform:rotate(90deg)}
.drawer-close svg{width:20px;height:20px}

/* --- nav links ---------------------------------------------------------- */
.drawer-nav{flex:1 1 auto;display:flex;flex-direction:column;padding:4px 18px 2px}
.drawer-link{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:46px;padding:9px 2px;
  font-family:'Fraunces',serif;font-size:1.32rem;font-weight:600;line-height:1.2;
  color:var(--cream);border-bottom:1px solid rgba(255,255,255,.1);
  transition:color .22s,padding-left .22s var(--ease);
}
.drawer-link svg{
  width:17px;height:17px;flex:0 0 auto;opacity:.34;
  transition:opacity .22s,transform .28s var(--ease);
}
.drawer-link:hover,.drawer-link:focus-visible{color:var(--amber);padding-left:8px}
.drawer-link:hover svg,.drawer-link:focus-visible svg{opacity:1;transform:translateX(3px)}
/* Clear, high-contrast marker for the page you are actually on. */
.drawer-link.active{color:var(--amber);padding-left:8px}
.drawer-link.active svg{opacity:1}
.drawer-link.active span::after{
  content:"";display:block;width:26px;height:2px;margin-top:7px;
  background:var(--amber);border-radius:2px;
}

/* --- stagger -----------------------------------------------------------
   Links cascade in from the right, one after another, only while opening.
   `--i` is written per link by build.js. */
.drawer.open .drawer-link{animation:drawerLink .46s var(--ease) both;
  animation-delay:calc(var(--i,0) * 42ms + 90ms)}
@keyframes drawerLink{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
.drawer.open .drawer-cta,.drawer.open .drawer-foot{
  animation:fadeUp .5s var(--ease) both;animation-delay:.46s}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* --- admission CTA ------------------------------------------------------ */
.drawer-cta{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:54px;margin:12px 18px;padding:11px 16px;border-radius:16px;
  background:var(--amber);color:#3A2704;font-weight:800;
  box-shadow:0 16px 32px -18px rgba(245,165,36,.9);
  transition:transform .24s var(--ease),filter .24s;
}
.drawer-cta:hover{transform:translateY(-2px);filter:brightness(1.06)}
.drawer-cta .dc-txt{display:flex;flex-direction:column;line-height:1.15}
.drawer-cta small{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;opacity:.78}
.drawer-cta b{font-size:1.05rem}
.drawer-cta svg{width:18px;height:18px;flex:0 0 auto}

/* --- contact + social --------------------------------------------------- */
.drawer-foot{
  flex:0 0 auto;padding:4px 18px 18px;border-top:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.03);
}
.drawer-contact{display:flex;flex-direction:column}
.dc-row{
  display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 0;
  color:rgba(251,247,240,.88);
}
.dc-row:hover .dc-ico{background:var(--amber);color:#3A2704}
.dc-ico{
  width:36px;height:36px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;
  background:rgba(255,255,255,.1);transition:background .22s,color .22s;
}
.dc-ico svg{width:17px;height:17px}
.dc-text{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.dc-text small{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(251,247,240,.5)}
.dc-text b{font-size:13.5px;font-weight:700;word-break:break-word}
.drawer-social{display:flex;gap:10px;margin-top:10px}
.drawer-social a{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.1);color:var(--cream);
  transition:background .22s,color .22s,transform .22s var(--ease);
}
.drawer-social a:hover{background:var(--teal);transform:translateY(-3px)}
.drawer-social svg{width:18px;height:18px}

/* Keyboard focus ring inside the dark panel. */
.drawer a:focus-visible,.drawer button:focus-visible{
  outline:2px solid var(--amber);outline-offset:3px;border-radius:8px;
}

/* Small phones: keep the back-to-top button clear of the chat bubble, which
   sits bottom-right. Moving it left removes any chance of overlap. */
@media(max-width:560px){
  #toTop{left:16px;right:auto;bottom:16px}
}

/* --------------------------------------------------------------------------
   24. 404
   -------------------------------------------------------------------------- */
.err-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:150px 24px 90px}
.err-inner{max-width:640px;position:relative;z-index:2}
.err-code{font-family:'Fraunces',serif;font-size:clamp(6rem,20vw,12rem);font-weight:900;line-height:.85;
  color:transparent;-webkit-text-stroke:2px var(--teal);letter-spacing:-.04em}
.err-wrap h1{font-size:clamp(1.9rem,4vw,2.9rem);margin-top:18px}
.err-wrap p{color:var(--muted);margin-top:18px;font-size:1.05rem}
.err-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}

/* --------------------------------------------------------------------------
   25b. Detail pages (blog post · notice · event)
   --------------------------------------------------------------------------
   One template, three families. Everything below is driven by the shared
   detail renderers in assets/js/renderers.js — no page-specific overrides.
   -------------------------------------------------------------------------- */

/* hero --------------------------------------------------------------------- */
.detail-hero{padding:158px 0 44px}
.detail-hero h1{font-size:clamp(2rem,4vw,3.3rem);margin-top:16px;max-width:20ch}
.detail-hero .lead{max-width:66ch}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip-static{
  display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--teal-2);
  background:var(--teal-soft);padding:7px 13px;border-radius:999px;
}
.chip-static svg{width:13px;height:13px}
.prio{
  display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;padding:7px 13px;border-radius:999px;
}
.prio svg{width:13px;height:13px}
.prio-normal{background:var(--teal-soft);color:var(--teal-2)}
.prio-important{background:var(--amber-soft);color:#96650B}
.prio-urgent{background:var(--coral-soft);color:#A93011}

/* byline (blog) */
.byline{
  display:flex;align-items:center;gap:14px;margin-top:26px;flex-wrap:wrap;
  background:var(--paper);border:1px solid var(--line);border-radius:999px;
  padding:10px 22px 10px 10px;box-shadow:var(--shadow-sm);width:max-content;max-width:100%;
}
.byline img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--teal-soft)}
.byline b{display:block;font-size:13.5px;font-weight:800;letter-spacing:-.01em}
.byline span{font-size:11.5px;font-weight:700;color:var(--muted)}
.byline .sep{width:1px;height:26px;background:var(--line-2);margin:0 4px}
.byline .stamp-date{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.02em}

/* fact rows (notice / event hero + sidebar) */
.fact-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.fact-row .fact{
  background:var(--paper);border:1px solid var(--line);border-radius:16px;
  padding:14px 20px;box-shadow:var(--shadow-sm);min-width:150px;
}
.fact span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.fact b{display:block;font-size:13.5px;font-weight:800;margin-top:5px;letter-spacing:-.01em}

/* cover --------------------------------------------------------------------- */
.article-cover-wrap{margin-top:-10px;padding-bottom:8px}
.article-cover-wrap .cover{margin:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);position:relative}
.article-cover-wrap .cover img{width:100%;aspect-ratio:2.35;object-fit:cover}

/* toolbar: back link + date ------------------------------------------------- */
.article-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-bottom:22px;border-bottom:1px solid var(--line);
}
.back-link{
  display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:800;
  letter-spacing:.02em;color:var(--teal-2);transition:gap .25s var(--ease),color .25s;
}
.back-link svg{width:15px;height:15px}
.back-link:hover{gap:13px;color:var(--ink)}
.toolbar-meta{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* two-column article layout ------------------------------------------------ */
.article-wrap{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:64px;align-items:start;margin-top:44px}
.article-main{min-width:0}

/* prose -------------------------------------------------------------------- */
.prose{max-width:none}
.prose .lead{
  font-family:'Fraunces',Georgia,serif;font-size:clamp(1.16rem,2vw,1.42rem);
  line-height:1.55;color:var(--ink-2);font-weight:500;letter-spacing:-.012em;
  padding-left:22px;border-left:3px solid var(--amber);
}
.prose p{margin-top:22px;font-size:1.045rem;line-height:1.78;color:var(--ink-3)}
.prose h2{
  font-family:'Fraunces',Georgia,serif;font-size:clamp(1.4rem,2.5vw,1.95rem);
  font-weight:600;letter-spacing:-.02em;color:var(--ink);margin-top:48px;line-height:1.15;
}
.prose h3{font-size:1.14rem;font-weight:800;color:var(--ink);margin-top:34px}
.prose ul{margin-top:22px;display:flex;flex-direction:column;gap:12px}
.prose ul li{position:relative;padding-left:32px;font-size:1.01rem;line-height:1.72;color:var(--ink-3)}
.prose ul li::before{
  content:"";position:absolute;left:4px;top:11px;width:11px;height:11px;border-radius:50%;
  background:var(--teal-soft);border:2px solid var(--teal);
}
.prose blockquote{
  margin-top:34px;background:var(--ink);color:var(--cream);border-radius:var(--radius);
  padding:38px 40px;position:relative;overflow:hidden;
}
.prose blockquote::before{
  content:"\201C";position:absolute;top:-26px;right:22px;font-family:'Fraunces',serif;
  font-size:9rem;line-height:1;color:rgba(245,165,36,.22);
}
.prose blockquote p{
  margin:0;font-family:'Fraunces',Georgia,serif;font-size:clamp(1.12rem,2vw,1.34rem);
  line-height:1.52;color:var(--cream);font-weight:500;position:relative;
}
.prose blockquote cite{
  display:block;margin-top:18px;font-style:normal;font-size:11.5px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:#8FD8C9;position:relative;
}
.prose .callout{
  margin-top:34px;background:var(--amber-soft);border-left:4px solid var(--amber);
  border-radius:0 20px 20px 0;padding:26px 30px;
}
.prose .callout b{
  display:block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#7A4E06;margin-bottom:10px;
}
.prose .callout p{margin:0;font-size:.99rem;line-height:1.7;color:var(--ink-2);font-weight:600}
.prose .fig{margin-top:38px}
.prose .fig img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow-md)}
.prose .fig figcaption{margin-top:12px;font-size:12.5px;color:var(--muted);text-align:center}

/* agenda (events) ---------------------------------------------------------- */
.agenda{margin-top:52px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:36px 38px;box-shadow:var(--shadow-sm)}
.agenda h2{font-family:'Fraunces',serif;font-size:1.6rem;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.agenda-list{list-style:none;margin-top:26px;display:flex;flex-direction:column}
.agenda-list li{
  display:grid;grid-template-columns:116px 1fr;gap:22px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--line);
}
.agenda-list li:last-child{border-bottom:none;padding-bottom:0}
.agenda-list .at{
  font-family:'Fraunces',serif;font-size:.96rem;font-weight:700;color:var(--teal-2);letter-spacing:.01em;
}
.agenda-list .ai{font-size:1rem;color:var(--ink-3);line-height:1.6}

/* share bar ---------------------------------------------------------------- */
.share-bar{
  margin-top:48px;padding-top:28px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.share-label{
  display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.share-label svg{width:15px;height:15px}
.share-btns{display:flex;gap:10px;flex-wrap:wrap}
.sh{
  display:inline-flex;align-items:center;gap:9px;background:var(--paper);
  border:1px solid var(--line);border-radius:999px;padding:10px 18px;
  font-size:12.5px;font-weight:800;color:var(--ink-2);
  transition:transform .25s var(--ease),border-color .25s,background .25s,color .25s;
}
.sh svg{width:15px;height:15px}
.sh:hover{transform:translateY(-3px);border-color:var(--teal);color:var(--teal-2);background:var(--teal-soft)}
.copy-note{font-size:12px;font-weight:800;color:var(--teal-2)}

/* sidebar ------------------------------------------------------------------ */
.article-side{display:flex;flex-direction:column;gap:20px;position:sticky;top:104px}
.side-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;box-shadow:var(--shadow-sm)}
.side-card h3{font-size:1.02rem;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.fact-list{margin-top:18px;display:flex;flex-direction:column}
.fact-list .fact{padding:12px 0;border-bottom:1px solid var(--line);min-width:0}
.fact-list .fact:last-child{border-bottom:none;padding-bottom:0}
.fact-list .fact span{font-size:9.5px}
.fact-list .fact b{font-size:13px;font-weight:700;color:var(--ink-3)}
.tag-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.side-actions{margin-top:22px;display:flex;flex-direction:column;gap:10px}
.btn-block{width:100%;justify-content:center}
.side-cta{background:var(--ink);border-color:transparent;color:var(--cream);text-align:left}
.side-cta h3{color:var(--cream);font-family:'Fraunces',serif;font-size:1.24rem;font-weight:600;letter-spacing:-.02em}
.side-cta p{margin-top:12px;font-size:.92rem;line-height:1.65;color:rgba(251,247,240,.78)}
.side-cta .btn{margin-top:20px}

/* pager -------------------------------------------------------------------- */
.pager{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:64px;
  padding-top:36px;border-top:1px solid var(--line);
}
.pager-cell{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 26px;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;
  display:block;min-width:0;
}
.pager-cell.is-empty{background:transparent;border-color:transparent;pointer-events:none}
.pager-cell:not(.is-empty):hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--teal)}
.pager-cell.next{text-align:right}
.pager-dir{
  display:block;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal-2);margin-bottom:9px;
}
.pager-cell b{font-size:1rem;font-weight:800;color:var(--ink);line-height:1.4;letter-spacing:-.01em}
.pager-cell.is-empty b{display:none}

/* related ------------------------------------------------------------------ */
.related-sec{border-top:1px solid var(--line)}
.related-sec .posts{margin-top:0}
.related-sec .stack{margin-top:0}

/* list-card affordances added for detail links ----------------------------- */
.pager-cell, .row-card, .post, .board-item{-webkit-tap-highlight-color:transparent}
.post .meta{justify-content:space-between}
.post .meta .more{display:inline-flex;align-items:center;gap:4px;color:var(--teal-2);font-weight:800}
.post .meta .more svg{width:14px;height:14px;transition:transform .25s var(--ease)}
.post:hover .meta .more svg{transform:translateX(4px)}
.row-card .prio{margin-left:8px;margin-bottom:12px;vertical-align:middle}

/* responsive --------------------------------------------------------------- */
@media(max-width:1024px){
  .article-wrap{grid-template-columns:1fr;gap:40px}
  .article-side{position:static}
  .side-card{padding:24px 22px}
  .detail-hero{padding:140px 0 38px}
}
@media(max-width:760px){
  .detail-hero{padding:126px 0 32px}
  .article-cover-wrap .cover img{aspect-ratio:1.5}
  .agenda{padding:26px 22px}
  .agenda-list li{grid-template-columns:1fr;gap:6px}
  .prose blockquote{padding:30px 26px}
  .pager{grid-template-columns:1fr;gap:14px}
  .pager-cell.next{text-align:left}
  .byline{width:100%;border-radius:22px;padding:14px}
  .fact-row .fact{min-width:0;width:100%}
  .share-bar{gap:14px}
}

/* --------------------------------------------------------------------------
   25. Closing admission section + initiatives  (homepage)
   --------------------------------------------------------------------------
   The homepage's final section pairs the five admission STEPS with the
   admission inquiry FORM, so a guardian can read the process and send an
   inquiry without leaving the page.

   The two columns MUST end on the same line. `.cta-cols` is a plain CSS grid
   with `align-items:stretch` (the grid default, stated here on purpose so
   nobody "optimises" it away) plus `height:100%` on each column, so both
   columns are sized by the TALLER one and the shorter one simply fills the
   extra space. Because the form is much taller than the step list, the LEFT
   column is the short one and its panel stretches down to the form's bottom
   edge. This holds at every viewport with no fixed height and no JS
   measurement. Below 860px the grid collapses to one column and equal height
   stops applying on purpose — once the columns are stacked there is nothing
   left to align, and forcing a shared height would only create dead space.

   The step and form markup reuses .step / .form-card / .field from section 16
   (the Admission page) rather than restating them: the SAME classes mean the
   homepage section and the Admission page cannot drift apart visually.
   -------------------------------------------------------------------------- */
.cta-sec{padding:70px 0 92px}

/* The equal-height mechanism. `grid` + `stretch` keeps both columns flush. */
.cta-cols{
  display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(28px,4vw,56px);
  align-items:stretch;              /* <- equal heights, stated deliberately */
}

/* LEFT — heading + the five steps. The PANEL (not the column) carries the
   surface, so the area the grid stretches reads as intentional padding rather
   than as an empty void under the last step. */
.cta-left{
  height:100%;display:flex;flex-direction:column;gap:26px;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:clamp(26px,3.2vw,42px);
  box-shadow:var(--shadow-sm);
}
.cta-cols h2{
  font-size:clamp(1.7rem,3.1vw,2.4rem);margin-top:16px;line-height:1.06;
}
.cta-text{color:var(--muted);font-size:1rem;margin-top:14px;max-width:46ch}
/* The flex gap already spaces the heading from the list; the base 40px would
   stack on top of it. */
.cta-left .steps{margin-top:6px;margin-bottom:0}

/* RIGHT — the admission form. `> .form-card` is intentional: the base
   .form-card rule (section 16) carries the card surface and this only makes it
   fill the stretched column. The card is a flex column so the submit block can
   be pushed to the bottom, which makes both columns finish on the same line
   instead of the button floating at mid-height. */
.cta-right{height:100%;display:flex;flex-direction:column}
.cta-right>.form-card{flex:1 1 auto;display:flex;flex-direction:column}
.cta-right .form-card form{display:flex;flex-direction:column;flex:1 1 auto}
.cta-right .form-foot{margin-top:auto}

/* --- initiatives strip --------------------------------------------------- */
.ini-sec{padding:0 0 30px}
.initiatives{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;
}
.initiative{
  display:flex;flex-direction:column;gap:18px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;min-height:186px;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;
}
.initiative:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:transparent}
.ini-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ini-mono{
  width:52px;height:52px;flex:0 0 auto;border-radius:15px;display:grid;place-items:center;
  font-family:'Fraunces',serif;font-weight:700;font-size:1.02rem;letter-spacing:.02em;
}
.ini-arrow{
  width:34px;height:34px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid var(--line);color:var(--ink-3);
  transition:background .25s,color .25s,border-color .25s,transform .3s var(--ease);
}
.ini-arrow svg{width:15px;height:15px}
.initiative:hover .ini-arrow{background:var(--ink);color:var(--cream);border-color:var(--ink);transform:translate(2px,-2px)}
.ini-body{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.ini-name{font-size:1.08rem;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.ini-tag{font-size:.88rem;color:var(--muted);line-height:1.6}
/* Three palette tones, assigned per initiative in data/site.json → tone. */
.initiative.tone-teal .ini-mono{background:var(--teal-soft);color:var(--teal-2)}
.initiative.tone-amber .ini-mono{background:var(--amber-soft);color:#8A5A00}
.initiative.tone-coral .ini-mono{background:var(--coral-soft);color:var(--coral)}

/* --- responsive: closing CTA + initiatives -------------------------------- */
@media(max-width:1024px){
  /* Tablet: initiatives go to two columns. */
  .initiatives{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  /* Stack the columns. Each keeps its NATURAL height here, so there is nothing
     left to align — the equal-height rule simply stops applying, which is the
     correct behaviour once the columns are no longer side by side. */
  .cta-cols{grid-template-columns:1fr;gap:30px}
  .cta-left,.cta-right{height:auto}
}
@media(max-width:620px){
  .initiatives{grid-template-columns:1fr;gap:14px}
  .cta-sec{padding:56px 0 76px}
  .ini-sec{padding-bottom:14px}
  .cta-left{border-radius:26px;padding:24px 22px 28px}
  .initiative{min-height:0;padding:22px}
}

/* --------------------------------------------------------------------------
   26. Classes we offer  (Admission page)
   --------------------------------------------------------------------------
   Seven class cards, one per level from Nursery to Class Five. The grid is
   explicit (4 → 2 → 1) rather than auto-fit, so the seven cards always break
   into tidy rows instead of leaving a single orphan on a wide screen.

   Each card carries a large Fraunces level mark tinted by `tone`, which makes
   the set read as a progression through the school rather than seven
   interchangeable tiles. The age chip holds the detail a parent scans for
   first; the focus line says what the year is actually for.
   -------------------------------------------------------------------------- */
.classes-sec{padding-top:20px}
.classes{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px;
}
.class-card{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:14px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px 28px;min-height:212px;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;
}
.class-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:transparent}
/* A hairline tone accent along the top edge — enough to group the cards by
   colour without turning them into seven loud tiles. */
.class-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--teal);opacity:.85;
}
.class-card.tone-amber::before{background:var(--amber)}
.class-card.tone-coral::before{background:var(--coral)}
.cc-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cc-mark{
  width:56px;height:56px;flex:0 0 auto;border-radius:16px;display:grid;place-items:center;
  font-family:'Fraunces',serif;font-weight:700;font-size:1.5rem;letter-spacing:-.01em;
  background:var(--teal-soft);color:var(--teal-2);
}
.class-card.tone-amber .cc-mark{background:var(--amber-soft);color:#8A5A00}
.class-card.tone-coral .cc-mark{background:var(--coral-soft);color:var(--coral)}
.cc-age{
  font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:6px 11px;
  white-space:nowrap;
}
/* Pushed to the bottom of the card so every card's text block starts on the
   same line regardless of how long the focus sentence runs. */
.cc-name{font-size:1.12rem;font-weight:800;letter-spacing:-.01em;color:var(--ink);margin-top:auto}
.cc-focus{font-size:.88rem;color:var(--muted);line-height:1.6}

/* --- responsive: classes -------------------------------------------------- */
@media(max-width:1024px){
  .classes{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  /* One column: at 375px two columns would squeeze the mark and the age chip
     onto the same row with no room to spare. */
  .classes{grid-template-columns:1fr;gap:14px;margin-top:34px}
  .class-card{min-height:0;padding:22px 20px 24px}
  .cc-mark{width:50px;height:50px;font-size:1.35rem;border-radius:14px}
}

/* --------------------------------------------------------------------------
   27. Responsive
   -------------------------------------------------------------------------- */
@media(max-width:1024px){
  .nav-links a{padding:9px 9px;font-size:13px}
  .hero-inner{grid-template-columns:1fr;gap:60px}
  .hero p.lead{max-width:52ch}
  .founder-inner{grid-template-columns:1fr;gap:40px;padding:44px}
  .founder-photo{max-width:340px}
  .pillars,.features{grid-template-columns:1fr 1fr}
  .teachers{grid-template-columns:1fr 1fr}
  .team{grid-template-columns:1fr 1fr}
  .posts{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .g-item.big{grid-column:span 2;grid-row:span 1}
  .journal{padding:44px}
  .journal-grid{grid-template-columns:1fr}
  .admission-grid{grid-template-columns:1fr;gap:44px}
  .contact-grid{grid-template-columns:1fr;gap:36px}
  .stats{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .nav-links{display:none}
  .nav-cta{display:none}
  .burger{display:grid}
}
@media(max-width:760px){
  .pad{padding:70px 0}
  .pad-top{padding-top:132px}
  .page-hero{padding:130px 0 40px}
  .pillars,.features,.teachers,.boards,.trust,.team,.posts{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr;grid-auto-rows:220px}
  .g-item.big,.g-item.wide{grid-column:span 1}
  .form-grid{grid-template-columns:1fr}
  .form-card{padding:28px}
  .foot-grid{grid-template-columns:1fr}
  .float-card{display:none}
  .fc-1{display:block;top:14px;left:14px}
  .fc-2{display:block;bottom:14px;right:14px}
  .fc-3{display:none}
  .hero{padding-top:120px}
  .row-card{grid-template-columns:1fr;gap:18px;padding:24px}
  .row-card .stamp{border-right:none;border-bottom:1px solid var(--line);padding:0 0 16px;text-align:left;display:flex;align-items:baseline;gap:12px}
  .row-card .go{display:none}
  .lightbox{padding:18px}
}

/* --------------------------------------------------------------------------
   28. Motion & print
   -------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .reveal,.js .reveal{opacity:1!important;transform:none!important}
}
@media print{
  header,.drawer,.drawer-scrim,#toTop,#progress,.marquee,.hero-bg,.p-grid,.blob,
  iframe[title*="chat" i],.tawk-min-container,#tawkchat-container{display:none!important}
  body{background:#fff}
  .reveal,.js .reveal{opacity:1!important;transform:none!important}
  a{text-decoration:none}
  .pad,.pad-sm{padding:22px 0}
}