
:root{
  --red:#d7001b; --ink:#111827; --grey:#6b6b6b; --line:#e3e3e3;
  --bg:#ffffff; --soft:#f6f6f7; --eu:#1f3f93;
  --font:"Commissioner","Segoe UI",Calibri,Arial,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--ink:#f1f1f1;--grey:#a9a9a9;--line:#333;--bg:#141416;--soft:#1d1d20;--red:#ff4d5e;--eu:#8fa8ff}
}
:root[data-theme="dark"]{--ink:#f1f1f1;--grey:#a9a9a9;--line:#333;--bg:#141416;--soft:#1d1d20;--red:#ff4d5e;--eu:#8fa8ff}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.6}
img{max-width:100%}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--eu);outline-offset:3px;border-radius:4px}
.wrap{max-width:980px;margin:0 auto;padding:0 20px}
.prose{max-width:70ch}

/* top bar (inner pages) */
.bar{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
.bar .wrap{display:flex;align-items:center;gap:18px;min-height:60px;flex-wrap:wrap}
.bar .brand{font-weight:800;color:var(--red);text-decoration:none;letter-spacing:.01em}
.bar nav{display:flex;gap:18px;margin-left:auto;flex-wrap:wrap}
.bar nav a{text-decoration:none;font-weight:600;padding:4px 0;border-bottom:2px solid transparent}
.bar nav a[aria-current="page"]{border-color:var(--red)}

/* logos */
.logos{display:flex;align-items:center;justify-content:center;gap:34px;flex-wrap:wrap;padding:26px 0 8px}
.logos img{height:64px;width:auto;object-fit:contain}
.logo-fallback{display:inline-flex;align-items:center;height:64px;padding:0 16px;border:1px dashed var(--grey);color:var(--grey);font-weight:600;font-size:15px;border-radius:6px}

/* home hero – as in the reference slide */
.hero{text-align:center;padding:30px 0 10px}
.hero h1{color:var(--red);font-weight:800;font-size:clamp(34px,6.4vw,62px);line-height:1.18;margin:14px 0 34px;letter-spacing:.01em}
.hero .acc{color:var(--grey);font-size:clamp(19px,2.7vw,28px);line-height:1.45;margin:0}
.hero .acc span{display:block}
.pillars{display:flex;justify-content:center;gap:clamp(24px,7vw,80px);flex-wrap:wrap;margin:46px 0 16px}
.pillars a{font-size:clamp(24px,3.8vw,36px);font-weight:700;text-decoration:none;color:var(--ink);padding-bottom:4px;border-bottom:3px solid transparent;transition:border-color .2s}
.pillars a:hover{border-color:var(--red)}

/* home program index */
.index{padding:40px 0 60px}
.index h2{font-size:24px;margin:0 0 6px}
.index>p{color:var(--grey);margin:0 0 22px}
.proj{border-top:2px solid var(--ink);padding:18px 0 8px}
.proj .code{font-size:14px;color:var(--grey);font-variant-numeric:tabular-nums}
.proj h3{margin:2px 0 8px;font-size:19px}
.flows{list-style:none;margin:0;padding:0}
.flows li{border-top:1px solid var(--line)}
.flows a{display:grid;grid-template-columns:1fr auto;gap:4px 20px;padding:12px 0;text-decoration:none}
.flows .t{font-weight:600}
.flows .m{color:var(--grey);font-size:15px}
.flows .place{grid-row:span 2;align-self:center;color:var(--red);font-weight:700;text-align:right}
.flows a:hover .t{text-decoration:underline}

/* inner pages */
.page{padding:36px 0 70px}
.page h1{font-size:clamp(28px,4.5vw,40px);line-height:1.2;margin:0 0 10px}
.lede{color:var(--grey);font-size:19px;margin:0 0 30px}
.goal{padding:22px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:56px 1fr;gap:0 16px}
.goal .n{font-size:40px;font-weight:800;color:var(--red);line-height:1}
.goal h2{font-size:20px;margin:0 0 8px;line-height:1.35}
.goal p{margin:0 0 10px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.chip{font-size:14px;padding:4px 10px;border:1px solid var(--eu);color:var(--eu);border-radius:999px;text-decoration:none;font-weight:600}
.chip:hover{background:var(--eu);color:var(--bg)}
.phase{padding:26px 0;border-top:2px solid var(--ink)}
.phase h2{font-size:22px;margin:0 0 12px;display:flex;gap:14px;align-items:baseline}
.phase h2 .r{color:var(--red);font-weight:800;min-width:2.2em}
.phase ul{padding-left:1.2em}
.phase li{margin-bottom:6px}
.toc{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 20px}
.toc a{font-size:15px;text-decoration:none;padding:6px 12px;background:var(--soft);border-radius:6px}

/* program page */
.crumb{font-size:15px;color:var(--grey);margin-bottom:14px}
.crumb a{color:var(--grey)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;border-top:2px solid var(--ink);border-bottom:1px solid var(--line);margin:22px 0 30px}
.facts div{padding:12px 16px 12px 0}
.facts dt{font-size:14px;color:var(--grey)}
.facts dd{margin:0;font-weight:600}
.course{padding:16px 0;border-top:1px solid var(--line)}
.course h3{margin:0 0 4px;font-size:18px}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0}
.btn{display:inline-block;padding:11px 18px;border-radius:6px;background:var(--red);color:#fff;text-decoration:none;font-weight:700}
.btn.alt{background:transparent;border:2px solid var(--ink);color:var(--ink)}
.btn[aria-disabled="true"]{background:var(--soft);color:var(--grey);border:1px dashed var(--grey);pointer-events:none}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin:14px 0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;display:block}
.empty{background:var(--soft);padding:16px 18px;border-radius:6px;color:var(--grey)}
.pager{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);margin-top:40px;padding-top:18px;flex-wrap:wrap}
.pager a{text-decoration:none;font-weight:600}

footer{border-top:1px solid var(--line);color:var(--grey);font-size:14px;padding:22px 0 30px}
footer .wrap{display:flex;gap:20px;justify-content:space-between;flex-wrap:wrap}
@media (max-width:560px){
  .flows a{grid-template-columns:1fr}
  .flows .place{grid-row:auto;text-align:left}
  .goal{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.word p{margin:0 0 12px}
.word ul,.word ol{padding-left:1.3em}
.word h2{scroll-margin-top:80px}
.goal-block{border-top:1px solid var(--line);padding:22px 0 10px}
.goal-block h2{color:var(--red);font-size:22px;margin:0 0 8px}
.goal-block h2 u{text-decoration:none}
.phase-h{border-top:2px solid var(--ink);padding-top:22px;margin-top:30px;font-size:22px}
.intro-phases a{font-weight:600}
.related{margin:4px 0 8px;font-size:15px;color:var(--grey)}
