:root{
  --ground:#F3F6F7;--surface:#FFFFFF;--ink:#10222E;--muted:#55686F;--line:#D5DEE2;
  --lapis:#1B4B78;--deep:#0E2F4E;--glaze:#12807F;--brass:#A97A1F;--on-deep:#EAF2F6;--on-deep-muted:#A9C0CF;
  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"]){
  --ground:#0C161C;--surface:#13212A;--ink:#E5EDF0;--muted:#9CB0B9;--line:#273A45;
  --lapis:#8EBBE4;--deep:#0A2238;--glaze:#58C5C0;--brass:#E0B659;--on-deep:#EAF2F6;--on-deep-muted:#A9C0CF;}}
:root[data-theme="dark"]{
  --ground:#0C161C;--surface:#13212A;--ink:#E5EDF0;--muted:#9CB0B9;--line:#273A45;
  --lapis:#8EBBE4;--deep:#0A2238;--glaze:#58C5C0;--brass:#E0B659;--on-deep:#EAF2F6;--on-deep-muted:#A9C0CF;}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(3.8rem + env(safe-area-inset-top,0px));scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ground);color:var(--ink);font-family:"Readex Pro",Tahoma,"Segoe UI",system-ui,sans-serif;font-weight:300;line-height:1.85;font-size:1.02rem}
a{color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.wrap{max-width:74rem;margin:0 auto;padding-inline:1.25rem}

/* header */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--deep);color:var(--on-deep)}
.bar{border-top:1px solid rgba(255,255,255,.12)}
.bar .wrap{display:flex;justify-content:center;align-items:center;gap:.6rem;min-height:3.3rem}
.mast{background:var(--deep);color:var(--on-deep);text-align:center;position:relative}
.mast .wrap{padding-block:1.8rem 1.6rem;position:relative}
.mast a.home{text-decoration:none;display:inline-block}
.logo{width:8.5rem;height:8.5rem;display:block;margin:0 auto .9rem;border-radius:50%;box-shadow:0 0 0 1px rgba(224,182,89,.35),0 10px 30px rgba(0,0,0,.35)}
.mast .t{font-size:clamp(1.45rem,3.4vw,2.3rem);font-weight:600;line-height:1.5;margin:0}
.mast .u{font-weight:200;color:var(--on-deep-muted);margin:.1rem 0 0;font-size:1rem}
.langs{position:absolute;top:.8rem;inset-inline-end:1.25rem;display:flex;gap:.3rem}
.langs a{text-decoration:none;display:inline-block;line-height:1.7}
.langs button,.langs a{background:none;border:1px solid rgba(255,255,255,.28);color:var(--on-deep-muted);font:inherit;font-size:.85rem;font-weight:400;border-radius:2rem;padding:.12rem .85rem;cursor:pointer}
.langs a[aria-current="true"]{background:var(--on-deep);color:var(--deep);border-color:var(--on-deep)}
html[dir=ltr] body{line-height:1.65}
html[dir=ltr] .hero h1{line-height:1.25}
html[dir=ltr] .mast .t{line-height:1.3}
nav ul{list-style:none;display:flex;gap:.15rem;margin:0;padding:0;align-items:center}
nav li{position:relative}
nav a,nav button{display:block;padding:.55rem .75rem;border-radius:.4rem;text-decoration:none;background:none;border:0;color:inherit;font:inherit;font-weight:400;font-size:.93rem;cursor:pointer;white-space:nowrap}
nav a:hover,nav button:hover,nav li:focus-within>button{background:rgba(255,255,255,.1)}
nav .sub{position:absolute;inset-inline-start:0;top:100%;min-width:13rem;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:.6rem;padding:.35rem;display:none;flex-direction:column;box-shadow:0 12px 30px rgba(8,25,40,.22)}
nav li:hover>.sub,nav li:focus-within>.sub{display:flex}
nav .sub a:hover{background:var(--ground)}
nav .sec{border:1px solid var(--brass);color:var(--brass);margin-inline-start:.4rem}
nav .sec:hover{background:var(--brass);color:var(--deep)}
#menuBtn{display:none}
@media (max-width:70rem){
  #menuBtn{display:block;border:1px solid rgba(255,255,255,.3);color:var(--on-deep);background:none;border-radius:.4rem;padding:.4rem .8rem;font:inherit}
  nav{display:none;position:absolute;inset-inline:0;top:100%;background:var(--deep);padding:.5rem 1.25rem 1rem;max-height:75vh;overflow:auto}
  nav.open{display:block}
  nav ul{flex-direction:column;align-items:stretch}
  nav .sub{position:static;display:flex;background:transparent;color:inherit;border:0;box-shadow:none;padding-inline-start:1rem}
  nav .sub a:hover{background:rgba(255,255,255,.1)}
  nav .sec{margin:.5rem 0 0;text-align:center}
}

/* hero */
.hero{background:var(--deep);color:var(--on-deep);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.15fr 1fr;gap:2rem;align-items:center;padding-block:3.5rem 4rem}
.hero h1{font-size:clamp(1.7rem,3.6vw,2.7rem);font-weight:600;line-height:1.55;margin:0 0 1.2rem}
.hero .lead{color:var(--on-deep-muted);font-size:1.05rem;max-width:34rem;margin:0 0 1.8rem}
.cta{display:flex;flex-wrap:wrap;gap:.7rem}
.btn{display:inline-block;text-decoration:none;padding:.6rem 1.2rem;border-radius:.5rem;font-weight:500;border:1px solid rgba(255,255,255,.35)}
.btn.solid{background:var(--brass);border-color:var(--brass);color:#10222E}
.btn:hover{border-color:#fff}
.pattern{width:100%;max-width:30rem;margin-inline:auto;display:block}
.pattern .grid{stroke:rgba(169,192,207,.28);fill:none}
.pattern .lobe{fill:rgba(18,128,127,.38);stroke:#58C5C0;stroke-width:1.5}
.pattern .lobe.main{fill:rgba(169,122,31,.42);stroke:#E0B659}
.pattern text{fill:#EAF2F6;font-family:inherit;font-size:13px;font-weight:400}
.pattern .deg{fill:#A9C0CF;font-size:9px;font-weight:200}
.sweep{transform-origin:200px 200px;animation:sweep 14s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sweep{animation:none;opacity:0}}
@media (max-width:52rem){.hero .wrap{grid-template-columns:1fr;padding-block:2.5rem}}

section{padding-block:3.5rem}
h2{font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:600;margin:0 0 .4rem;line-height:1.5}
.intro{color:var(--muted);max-width:42rem;margin:0 0 2rem}

/* roadmap */
.road{display:grid;grid-template-columns:repeat(var(--cols,5),1fr);gap:0;border-top:3px solid var(--lapis);position:relative}
.yr{padding:1.2rem .9rem 0;border-inline-start:1px solid var(--line);position:relative}
.yr:first-child{border-inline-start:0}
.yr::before{content:"";position:absolute;top:-.55rem;inset-inline-start:.9rem;width:.85rem;height:.85rem;border-radius:50%;background:var(--ground);border:3px solid var(--lapis)}
.yr:last-child::before{background:var(--brass);border-color:var(--brass)}
.yr h3{font-size:1.9rem;font-weight:700;margin:0 0 .6rem;color:var(--lapis);line-height:1}
.yr:last-child h3{color:var(--brass)}
.yr ul{list-style:none;margin:0;padding:0;font-size:.92rem;line-height:1.7}
.yr li{padding:.45rem 0;border-bottom:1px dashed var(--line)}
.yr li:last-child{border-bottom:0}
.yr li span{display:block;font-size:.76rem;color:var(--glaze);font-weight:500}
@media (max-width:62rem){.road{grid-template-columns:1fr;border-top:0;border-inline-start:3px solid var(--lapis)}.yr{border-inline-start:0;padding:0 1.4rem 1.5rem}.yr::before{top:.35rem;inset-inline-start:-.6rem}}

/* domains */
.domains{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:.9rem;overflow:hidden}
.dom{background:var(--surface);padding:1.5rem}
.dom h3{margin:0 0 .6rem;font-size:1.1rem;font-weight:600}
.dom .freq{font-size:.8rem;color:var(--glaze);font-weight:500;letter-spacing:.02em;display:block}
.dom p{margin:0;color:var(--muted);font-size:.94rem}

/* profile */
.profile{background:var(--surface);border-block:1px solid var(--line)}
.profile .wrap{display:grid;grid-template-columns:15rem 1fr;gap:2.5rem;align-items:start}
.photo{aspect-ratio:4/5;border-radius:.9rem;background:#fff;overflow:hidden;border:1px solid var(--line);border-bottom:4px solid var(--brass)}
.photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.profile h2 small{display:block;font-size:.95rem;font-weight:300;color:var(--muted)}
.bio{max-width:46rem}
.ids{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.ids a{text-decoration:none;border:1px solid var(--line);border-radius:2rem;padding:.2rem .9rem;font-size:.85rem;font-weight:400}
.ids a:hover{border-color:var(--lapis);color:var(--lapis)}
@media (max-width:52rem){.profile .wrap{grid-template-columns:1fr}.photo{max-width:13rem}}

/* directory */
.dir{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.8rem}
.dir a{display:block;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:.7rem;padding:1rem 1.1rem;border-inline-start:4px solid var(--lapis)}
.dir a:hover{border-color:var(--lapis)}
.dir a.g{border-inline-start-color:var(--glaze)}
.dir a.b{border-inline-start-color:var(--brass)}
.dir strong{display:block;font-weight:500}
.dir span{color:var(--muted);font-size:.86rem}

footer{background:var(--deep);color:var(--on-deep);padding-block:2.5rem;margin-top:1rem}
footer p{margin:0 0 .4rem;max-width:48rem}
footer .fine{margin-top:1.5rem;font-size:.8rem;color:var(--on-deep-muted)}

/* ---------- inner pages ---------- */
.phead{background:var(--deep);color:var(--on-deep);padding-block:2.2rem;border-top:1px solid rgba(255,255,255,.12)}
.phead h1{margin:0;font-size:clamp(1.5rem,3vw,2.1rem);font-weight:600;line-height:1.5}
.phead p{margin:.3rem 0 0;color:var(--on-deep-muted)}
.crumbs{font-size:.85rem;color:var(--on-deep-muted);margin-bottom:.4rem}
.crumbs a{color:inherit}
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1.2rem}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:.9rem;overflow:hidden;border-bottom:4px solid var(--brass)}
.pcard .ph{aspect-ratio:4/4.4;background:var(--deep);display:grid;place-items:center;color:var(--on-deep-muted);font-size:2.6rem;font-weight:600}
.pcard .ph img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.pcard .tx{padding:1rem 1.1rem 1.2rem}
.pcard h3{margin:0;font-size:1.05rem;font-weight:600;line-height:1.6}
.pcard .role{color:var(--glaze);font-size:.88rem;font-weight:500}
.pcard .meta{color:var(--muted);font-size:.86rem;margin-top:.4rem;overflow-wrap:anywhere}
.pcard .meta a{color:var(--lapis)}
.group-h{font-size:1.15rem;font-weight:600;margin:2.2rem 0 1rem;padding-inline-start:.8rem;border-inline-start:4px solid var(--lapis)}
.group-h:first-child{margin-top:0}
.prose{background:var(--surface);border:1px solid var(--line);border-radius:.9rem;padding:1.6rem;max-width:60rem}
.prose img{max-width:100%;height:auto}
.prose table{border-collapse:collapse;width:100%}
.prose th,.prose td{border:1px solid var(--line);padding:.45rem .6rem;text-align:start}
.embed{width:100%;height:75vh;border:1px solid var(--line);border-radius:.9rem;background:var(--surface);margin-top:1.2rem}
.tablewrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:.9rem}
table.data{border-collapse:collapse;width:100%;font-size:.95rem}
table.data th{background:var(--ground);font-weight:500;text-align:start;padding:.7rem .9rem;border-bottom:1px solid var(--line);white-space:nowrap}
table.data td{padding:.7rem .9rem;border-bottom:1px solid var(--line);vertical-align:top}
table.data tr:last-child td{border-bottom:0}
.tag{display:inline-block;border-radius:1rem;padding:.05rem .7rem;font-size:.8rem;font-weight:500;background:var(--ground);border:1px solid var(--line)}
.tag.ok{color:var(--glaze);border-color:var(--glaze)}
.tag.off{color:var(--muted)}
.filebtn{display:inline-block;text-decoration:none;border:1px solid var(--lapis);color:var(--lapis);border-radius:.5rem;padding:.35rem .9rem;font-weight:500;margin-top:1rem}
.filebtn:hover{background:var(--lapis);color:var(--surface)}
.empty{color:var(--muted);background:var(--surface);border:1px dashed var(--line);border-radius:.9rem;padding:2rem;text-align:center}
.photo .fallback{display:grid;place-items:center;height:100%;background:var(--deep);color:var(--on-deep);font-size:3rem;font-weight:600}



/* ---------- justified paragraphs ---------- */
.lead,.intro,.bio,.dom p,.prose p,.prose li,footer p:not(.fine){text-align:justify;text-justify:inter-word}
html[dir=ltr] .lead,html[dir=ltr] .bio,html[dir=ltr] .dom p,html[dir=ltr] .prose p{hyphens:auto;-webkit-hyphens:auto}

/* ---------- full-height framed documents (registration handbook) ---------- */
.framebar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:.8rem}
.framebar p{margin:0;color:var(--muted);font-size:.92rem}
.framebar .filebtn{margin-top:0}
.embed.tall{height:calc(100vh - 5rem);min-height:32rem;margin-top:0}

/* ---------- curriculum page ---------- */
.years{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.2rem}
.years a{text-decoration:none;border:1px solid var(--line);background:var(--surface);border-radius:2rem;padding:.3rem 1rem;font-weight:500}
.years a[aria-current="true"]{background:var(--lapis);border-color:var(--lapis);color:#fff}
.years a:hover{border-color:var(--lapis)}
.curr{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:1rem;margin-bottom:1.2rem}
.curr a{display:block;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:.8rem;padding:1rem 1.1rem;border-inline-start:4px solid var(--glaze)}
.curr a:hover{border-color:var(--lapis)}
.curr strong{display:block;font-weight:500}
.curr span{color:var(--muted);font-size:.86rem}

/* ---------- MoU sorting ---------- */
.sortbar{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;margin-bottom:.9rem;font-size:.92rem;color:var(--muted)}
.sortlink{text-decoration:none;border:1px solid var(--line);background:var(--surface);border-radius:2rem;padding:.2rem .85rem;color:var(--ink);font-weight:500}
.sortlink:hover{border-color:var(--lapis)}
.sortlink.on{background:var(--lapis);border-color:var(--lapis);color:#fff}
.sortbar .counts{margin-inline-start:auto}
.tag.moc{color:var(--brass);border-color:var(--brass)}