/* ============================================================
   Antonios Nathanail — Relativistic Astrophysics
   Deep-space ground from "Powering the Transient Sky".
   void #04060f · deep #0b1026 · starlight #e9efff · muted #93a0c4
   v5: COSMOS group site — COmpact objects, Strong Magnetized Outflows & Simulations
   ============================================================ */
@font-face{font-family:"Exo 2";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/Exo2-var.woff2) format("woff2")}
@font-face{font-family:"Exo 2";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/Exo2-italic.woff2) format("woff2")}
@font-face{font-family:"Lilita One";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/LilitaOne.woff2) format("woff2")}

:root{
  color-scheme:dark;
  --void:#04060f;
  --deep:#0b1026;
  --panel:rgba(14,20,44,.62);
  --edge:rgba(120,160,255,.2);
  --edge-strong:rgba(150,200,255,.42);
  --star:#e9efff;
  --text:#d3dcf5;
  --muted:#93a0c4;
  --cyan:#dfe5f7;
  --line:rgba(233,239,255,.55);
  --glass-white:rgba(233,239,255,.14);
  --gold:#ffc94a;
  --violet:#b48cff;
  --ember:#ff8a5c;
  --mint:#5dffb0;
  --sticker:rgba(251,250,246,.88);
  --sticker-ink:#0f1222;
  --display:"Exo 2","Segoe UI",system-ui,sans-serif;
  --body:"Exo 2","Segoe UI",system-ui,-apple-system,sans-serif;
  --bgtoggle:0;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sticker-face:"Lilita One","Exo 2",system-ui,sans-serif;
  --ease:cubic-bezier(.22,.9,.24,1);
  --wrap:1180px;
  --gutter:clamp(16px,4vw,40px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--void)}
body{
  background:var(--void);color:var(--text);
  font-family:var(--body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;min-height:100%;
  overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:var(--star);text-decoration-color:rgba(233,239,255,.45);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:#fff}
:focus-visible{outline:2px solid var(--line);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--display);color:var(--star);text-wrap:balance;line-height:1.1}
sub,sup{line-height:0}
.mono{font-family:var(--mono);font-size:.78rem;letter-spacing:.02em}

/* ---------- deep-space canvas ---------- */
#space{
  position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:
    radial-gradient(1200px 800px at 80% 12%, rgba(64,44,120,.30), transparent 60%),
    radial-gradient(1000px 700px at 8% 78%, rgba(20,60,110,.26), transparent 60%),
    linear-gradient(180deg,#03040c 0%, #060a1c 55%, #04060f 100%);
}
.starlayer{position:absolute;inset:-20%}
.starlayer i{position:absolute;border-radius:50%;background:#fff}
.starlayer i.tw{animation:twinkle 4s ease-in-out infinite}
#stars-a{animation:driftA 260s linear infinite}
#stars-b{animation:driftB 170s ease-in-out infinite}
#stars-c{animation:driftC 110s ease-in-out infinite}
@keyframes driftA{to{transform:rotate(360deg)}}
@keyframes driftB{50%{transform:translate3d(1.5%,1%,0)}}
@keyframes driftC{50%{transform:translate3d(-1%,-1.5%,0)}}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}
#meteors{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.meteor{
  position:absolute;width:150px;height:2px;border-radius:3px;opacity:0;
  background:linear-gradient(90deg,rgba(255,255,255,0),#fff 82%,#fff);
  filter:drop-shadow(0 0 6px rgba(180,225,255,.9));
  animation:shoot 1.4s ease-in forwards;
}
@keyframes shoot{0%{opacity:0;transform:translate(0,0) rotate(var(--ang))}8%{opacity:.85}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--ang))}}

.page{position:relative;z-index:2}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:50;
  background:linear-gradient(180deg,rgba(4,6,15,.92),rgba(4,6,15,.72));
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--edge);
}
.topbar .inner{
  max-width:1400px;margin:0 auto;padding:14px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;flex-direction:column;text-decoration:none;color:var(--star);line-height:1.15}
.brand b{font-family:var(--display);font-weight:800;font-size:1.02rem;letter-spacing:.14em;text-transform:uppercase}
.brand span{font-family:var(--mono);font-size:.68rem;color:var(--muted);letter-spacing:.04em;margin-top:3px}
.brand:hover{color:#fff}
.nav{display:flex;align-items:center;gap:2px;list-style:none}
.nav a{
  display:block;padding:11px 17px;border-radius:999px;
  font-family:var(--display);font-weight:700;font-size:1.06rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;transition:color .2s,background .2s;
}
.nav a:hover{color:var(--star);background:rgba(120,160,255,.08)}
.nav a[aria-current="page"]{color:var(--star);background:var(--glass-white);box-shadow:inset 0 0 0 1px rgba(233,239,255,.22)}
.menu-btn{
  display:none;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--edge-strong);background:rgba(10,14,34,.6);color:var(--star);cursor:pointer;
  align-items:center;justify-content:center;
}
.menu-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
@media (max-width:1240px){
  .menu-btn{display:inline-flex}
  .nav{
    position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;
    padding:8px var(--gutter) 16px;background:rgba(4,6,15,.97);border-bottom:1px solid var(--edge);
    display:none;
  }
  .nav.open{display:flex}
  .nav a{padding:14px 8px;border-radius:8px;font-size:1.15rem}
}

/* ---------- views (hash routed; all visible without JS) ---------- */
.js .view{display:none}
.js .view.active{display:block;animation:viewIn .55s var(--ease)}
@keyframes viewIn{from{opacity:.001;transform:translateY(8px)}to{opacity:1;transform:none}}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(48px,7vw,88px)}
.section + .section{padding-top:0}

.eyebrow{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#b9c3e0;
  display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.7}
.section-head{display:grid;gap:12px;margin-bottom:clamp(28px,4vw,44px);max-width:760px}
.section-head h2{font-size:clamp(1.8rem,3.6vw,2.7rem);font-weight:800;letter-spacing:.01em}
.section-head p{color:var(--text);max-width:64ch}
.page-head{padding-block:clamp(44px,7vw,84px) clamp(20px,3vw,32px)}
.page-head h1{font-size:clamp(2.3rem,5.4vw,4rem);font-weight:800;letter-spacing:.01em;margin-top:12px}
.page-head p{margin-top:16px;max-width:64ch;font-size:1.08rem}

/* ---------- hero ---------- */
.hero{padding-block:clamp(40px,6vw,76px) clamp(40px,6vw,64px)}
.hero .grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,5vw,72px);align-items:center}
.hero h1{
  font-size:clamp(2.8rem,7.4vw,5.9rem);font-weight:800;letter-spacing:-.01em;line-height:.95;
  text-transform:uppercase;margin-top:18px;
}
.hero h1 .thin{display:block;font-weight:300;letter-spacing:.06em;color:var(--muted);font-size:.42em;margin-top:.5em;text-transform:none}
.hero .thesis{margin-top:26px;font-size:clamp(1.05rem,1.6vw,1.22rem);max-width:56ch;color:var(--text)}
.hero .thesis b{color:var(--star);font-weight:600}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:999px;
  font-family:var(--display);font-weight:600;font-size:.84rem;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;color:var(--star);border:1px solid var(--edge-strong);background:rgba(10,16,40,.55);
  transition:border-color .25s,box-shadow .25s,transform .15s,color .2s;cursor:pointer;
}
.btn:hover{border-color:var(--line);box-shadow:0 0 22px rgba(233,239,255,.12);transform:translateY(-1px);color:#fff}
.btn.primary{background:rgba(233,239,255,.12);border-color:rgba(233,239,255,.4)}
.btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.portal{position:relative;justify-self:center;width:min(100%,380px)}
.portal .frame{
  position:relative;aspect-ratio:624/800;border-radius:999px;overflow:hidden;background:#05081a;
  box-shadow:0 0 0 1px rgba(140,180,255,.2),0 0 80px rgba(220,228,255,.18),0 0 140px rgba(255,201,74,.08);
}
.portal .frame video,.portal .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.portal .frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 70% at 50% 50%,transparent 58%,rgba(3,6,18,.7) 100%);
}
.portal .ring{position:absolute;inset:-12px;border-radius:999px;border:1px dashed rgba(220,228,255,.32);pointer-events:none}
.portal figcaption{
  margin-top:18px;text-align:center;color:var(--muted);font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;line-height:1.55;
}
.portal figcaption b{color:var(--gold);font-weight:500}

/* ---------- stickers (kremala-style highlights) ---------- */
.stickers{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px 22px;align-items:start}
.sticker{
  position:relative;background:var(--sticker);color:var(--sticker-ink);
  border-radius:10px;padding:18px 20px 20px;
  box-shadow:0 12px 34px rgba(0,0,0,.5);
  transition:transform .3s var(--ease),box-shadow .3s;
  display:flex;flex-direction:column;gap:10px;text-decoration:none;
}
.sticker:nth-child(4n+1){transform:rotate(-1.4deg)}
.sticker:nth-child(4n+2){transform:rotate(1.1deg)}
.sticker:nth-child(4n+3){transform:rotate(-.6deg)}
.sticker:nth-child(4n+4){transform:rotate(1.6deg)}
.sticker:hover{transform:rotate(0) translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.6)}
.sticker .when{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#5b6180}
.sticker h3{font-family:var(--sticker-face);font-weight:400;font-size:1.55rem;line-height:1.08;color:var(--sticker-ink);letter-spacing:.01em}
.sticker p{font-size:.95rem;line-height:1.5;color:#2a2f45}
.sticker p b{color:#b4540f}
.sticker .more{font-family:var(--display);font-weight:700;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:#8a4a08;margin-top:auto}
.sticker.gold{background:rgba(255,201,74,.86)}
.sticker.gold .when{color:#6b4d00}
.sticker.gold p{color:#2d2408}
.sticker.gold p b{color:#7a2e00}
.sticker{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.sticker.gold .more{color:#3b2a00}
.sticker.ink{background:#101428;color:var(--star);box-shadow:0 0 0 1px var(--edge-strong),0 12px 34px rgba(0,0,0,.5)}
.sticker.ink h3{color:var(--star)}
.sticker.ink p{color:var(--text)}
.sticker.ink p b{color:var(--gold)}
.sticker.ink .when{color:var(--muted)}
.sticker.ink .more{color:var(--gold)}
.sticker p a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(0,0,0,.35)}
.sticker .more a{color:inherit;text-decoration:none}
.sticker .more.links{display:flex;flex-wrap:wrap;gap:6px 18px}
.sticker .more a:hover,.sticker p a:hover{text-decoration:underline}
.sticker.ink p a{text-decoration-color:rgba(255,201,74,.55)}
.sticker .tape{
  position:absolute;top:-10px;left:50%;width:74px;height:20px;transform:translateX(-50%) rotate(-3deg);
  background:rgba(233,239,255,.35);border-left:1px dashed rgba(0,0,0,.08);border-right:1px dashed rgba(0,0,0,.08);
}

/* ---------- orbit of research themes ---------- */
.orbit{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,2.4vw,30px)}
.node{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
  text-decoration:none;color:inherit;
}
.node .disc{
  position:relative;width:100%;aspect-ratio:1;border-radius:50%;overflow:visible;
  animation:float 9s ease-in-out infinite;
}
.node:nth-child(2) .disc{animation-delay:-2s}.node:nth-child(3) .disc{animation-delay:-4s}
.node:nth-child(4) .disc{animation-delay:-6s}.node:nth-child(5) .disc{animation-delay:-8s}
@keyframes float{50%{transform:translateY(-10px)}}
.node .disc img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;background:#070b1c;
  box-shadow:0 0 0 1px rgba(140,180,255,.18),0 0 40px var(--glow);transition:box-shadow .4s;
}
.node .disc::before{
  content:"";position:absolute;inset:-8px;border-radius:50%;border:1px dashed var(--glow);
  animation:spin 40s linear infinite;
}
.node .disc::after{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 44%,transparent 52%,rgba(3,6,18,.55) 100%);
}
@keyframes spin{to{transform:rotate(360deg)}}
.node:hover .disc img{box-shadow:0 0 0 1px rgba(255,255,255,.5),0 0 70px var(--glow)}
.node b{font-family:var(--display);font-weight:700;font-size:.86rem;letter-spacing:.1em;text-transform:uppercase;color:var(--star)}
.node span{display:block;font-size:.84rem;color:var(--muted);line-height:1.4;margin-top:4px}
@media (max-width:900px){.orbit{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.orbit{grid-template-columns:repeat(2,1fr)}}

/* ---------- intro split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.prose p + p{margin-top:1em}
.prose p{max-width:64ch}
.prose b{color:var(--star);font-weight:600}
.facts{display:grid;gap:0;border-top:1px solid var(--edge)}
.facts div{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--edge)}
.facts dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.facts dd{color:var(--star)}
@media (max-width:820px){.split{grid-template-columns:1fr}.hero .grid{grid-template-columns:1fr}.portal{width:min(100%,300px)}}
@media (max-width:460px){.facts div{grid-template-columns:1fr;gap:4px}}

/* ---------- funding strip ---------- */
.funders{
  display:flex;flex-wrap:wrap;align-items:center;gap:18px 34px;padding:22px 0;
  border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);
}
.funders .label{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:auto}
.funders img{height:34px;width:auto;border-radius:4px}
.funders img.oscars{height:40px;background:#fff;padding:4px 8px}

/* ---------- research ---------- */
.theme{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:center;
  padding-block:clamp(36px,5vw,60px);border-top:1px solid var(--edge);
  scroll-margin-top:90px;
}
.theme:nth-of-type(even) .media{order:2}
.theme .media{position:relative}
.theme h3{font-size:clamp(1.5rem,2.6vw,2.05rem);font-weight:800;margin:10px 0 14px}
.theme .tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#b9c3e0}
.theme .prose p{font-size:1rem}
.eq{
  display:inline;padding:2px 8px;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  font-family:var(--mono);font-size:.86rem;white-space:nowrap;color:var(--star);background:rgba(220,228,255,.07);border:1px solid var(--edge);
}
.cite{
  margin-top:16px;font-family:var(--mono);font-size:.74rem;line-height:1.6;color:var(--muted);
  border-left:2px solid var(--accent);padding:4px 0 4px 12px;
}
@media (max-width:820px){.theme{grid-template-columns:1fr}.theme:nth-of-type(even) .media{order:0}}

.media-frame{
  position:relative;border-radius:14px;overflow:hidden;background:#05081a;
  border:1px solid var(--edge);box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.media-frame video,.media-frame img{width:100%;height:auto}
.media-frame.round{border-radius:50%;aspect-ratio:1;max-width:420px;margin-inline:auto;box-shadow:0 0 0 1px rgba(140,180,255,.18),0 0 60px var(--glow)}
.media-frame.round img{height:100%;object-fit:cover}
.badge{
  position:absolute;left:10px;top:10px;z-index:2;padding:5px 11px;border-radius:999px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--star);
  background:rgba(6,10,26,.8);border:1px solid var(--edge-strong);
}
.caption{margin-top:10px;font-family:var(--mono);font-size:.72rem;color:var(--muted);line-height:1.55}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.panel{
  background:var(--panel);border:1px solid var(--edge);border-radius:16px;padding:24px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.panel h3{font-size:1.2rem;font-weight:700;margin-bottom:8px}
.panel p{font-size:.95rem}
.panel .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:10px}

/* ---------- grant feature ---------- */
.grant{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,44px);align-items:start;
  padding:clamp(24px,4vw,40px);border-radius:20px;
  background:linear-gradient(135deg,rgba(255,201,74,.10),rgba(14,20,44,.7) 45%);
  border:1px solid rgba(255,201,74,.35);
}
.grant .logo{background:#fff;border-radius:12px;padding:12px 16px;width:180px}
.grant h3{font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:800}
.grant .meta{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.chip{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;padding:5px 10px;border-radius:999px;
  border:1px solid var(--edge-strong);color:var(--star);background:rgba(10,16,40,.5);white-space:nowrap;
}
.chip.gold{border-color:rgba(255,201,74,.55);color:var(--gold)}
@media (max-width:640px){.grant{grid-template-columns:1fr}}

/* ---------- people ---------- */
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.person{display:flex;flex-direction:column;gap:12px}
.avatar{
  width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:1.3rem;letter-spacing:.04em;color:var(--void);
  background:radial-gradient(circle at 35% 30%,#fff,#9aa7d6 45%,#2a3163);
}
.person.lead .avatar{background:radial-gradient(circle at 35% 30%,#fff,var(--gold) 45%,#8a4a10)}
.person h3{font-size:1.15rem;font-weight:700}
.person .role{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.person p{font-size:.92rem}
.lead-card{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,40px);align-items:start}
.lead-card .avatar{width:110px;height:110px;font-size:2rem}
@media (max-width:560px){.lead-card{grid-template-columns:1fr}}

/* ---------- publications ---------- */
.pubs{list-style:none;display:grid;border-top:1px solid var(--edge)}
.pubs li{display:grid;grid-template-columns:70px 1fr;gap:18px;padding:18px 0;border-bottom:1px solid var(--edge)}
.pubs .yr{font-family:var(--mono);font-size:.9rem;color:var(--gold);font-variant-numeric:tabular-nums;padding-top:2px}
.pubs .t{color:var(--star);font-weight:600;font-size:1.02rem;line-height:1.4}
.pubs .a{font-size:.9rem;color:var(--muted);margin-top:4px}
.pubs .a u{text-decoration:none;color:var(--text);font-weight:600}
.pubs .j{font-family:var(--mono);font-size:.74rem;color:var(--muted);margin-top:4px}
.pubs .status{color:var(--ember)}
.linkrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
@media (max-width:520px){.pubs li{grid-template-columns:1fr;gap:4px}}

/* ---------- outreach ---------- */
.games{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.game{border-top:2px solid var(--accent);padding-top:16px}
.game .code{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;color:#b9c3e0}
.game h3{font-size:1.15rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin:6px 0 8px}
.game p{font-size:.93rem}
.bring-title{font-family:var(--sticker-face);font-weight:400;font-size:clamp(2.6rem,7vw,4.6rem);letter-spacing:.03em;line-height:1;color:var(--gold);margin-top:12px}

/* ---------- gallery ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.filters button{
  font-family:var(--display);font-weight:600;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
  padding:8px 16px;border-radius:999px;border:1px solid var(--edge-strong);background:transparent;color:var(--muted);cursor:pointer;
}
.filters button[aria-pressed="true"]{background:var(--glass-white);color:var(--star);border-color:rgba(233,239,255,.4)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.tile{
  position:relative;display:flex;flex-direction:column;border-radius:12px;overflow:hidden;cursor:pointer;
  background:#05081a;border:1px solid var(--edge);text-align:left;color:inherit;font:inherit;padding:0;
  transition:border-color .25s,transform .25s var(--ease);
}
.tile:hover{border-color:var(--line);transform:translateY(-3px)}
.tile .thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:#05081a}
.tile .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.tile.light .thumb img{object-fit:contain;background:#fff}
.tile:hover .thumb img{transform:scale(1.04)}
.tile .play{
  position:absolute;right:10px;bottom:10px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(6,10,26,.82);border:1px solid var(--edge-strong);
}
.tile .play svg{width:14px;height:14px;fill:var(--star);margin-left:2px}
.tile .cap{padding:12px 14px 14px}
.tile .cap b{display:block;font-family:var(--display);font-weight:700;color:var(--star);font-size:.98rem}
.tile .cap span{display:block;font-family:var(--mono);font-size:.7rem;color:var(--muted);margin-top:4px}
.tile[hidden]{display:none}

#lightbox{
  position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;flex-direction:column;gap:14px;
  padding:max(20px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom));
  background:rgba(2,4,12,.94);backdrop-filter:blur(6px);
}
#lightbox.open{display:flex}
#lightbox .stage{max-width:min(1400px,100%);max-height:80vh;display:flex;justify-content:center}
#lightbox .stage img,#lightbox .stage video{max-height:80vh;width:auto;max-width:100%;border-radius:10px}
#lightbox .lb-cap{max-width:80ch;text-align:center;color:var(--text);font-size:.95rem}
#lightbox .lb-cap .mono{display:block;color:var(--muted);margin-top:4px}
#lightbox .close{position:absolute;top:max(14px,env(safe-area-inset-top));right:16px}

/* ---------- contact ---------- */
address{font-style:normal}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--edge);margin-top:clamp(40px,6vw,72px);padding-block:32px 40px;background:rgba(4,6,15,.6)}
.site-footer .inner{display:flex;flex-wrap:wrap;gap:20px 40px;justify-content:space-between;align-items:flex-start}
.site-footer .id b{font-family:var(--display);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--star)}
.site-footer .id span{display:block;font-size:.88rem;color:var(--muted);margin-top:4px}
.site-footer .small{font-family:var(--mono);font-size:.7rem;color:var(--muted);max-width:52ch;line-height:1.6}
.site-footer nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.site-footer nav a{font-size:.86rem;color:var(--text);text-decoration:none}
.site-footer nav a:hover{color:#fff}

.note{font-family:var(--mono);font-size:.72rem;color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

.roles{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.roles li{font-size:.88rem;color:var(--star);padding:6px 12px;border-radius:999px;background:var(--glass-white);border:1px solid rgba(233,239,255,.2)}
.roles li b{color:var(--gold);font-weight:700}
.roles li span{color:var(--muted);font-family:var(--mono);font-size:.72rem;margin-left:4px}

/* ---------- grants: two equal compact cards ---------- */
.grants{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.grant{grid-template-columns:1fr;gap:14px;padding:22px 24px}
.grant .logo{width:130px;padding:8px 12px;border-radius:10px}
.grant h3{font-size:1.18rem;line-height:1.25}
.grant p{font-size:.93rem}
.grant .meta{margin:10px 0}
.grant.elidek{background:linear-gradient(135deg,rgba(200,140,110,.12),rgba(14,20,44,.7) 45%);border-color:rgba(200,150,120,.38)}
.grant.elidek .logo{background:#8a7d74;padding:6px 10px}

/* ---------- background switch ---------- */
.bg-switch{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;cursor:pointer;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);background:transparent;border:1px solid var(--edge-strong);white-space:nowrap;
}
.bg-switch:hover{color:var(--star)}
.bg-switch i{width:12px;height:12px;border-radius:50%;background:linear-gradient(90deg,#0b1026 50%,#ebe8e0 50%);box-shadow:0 0 0 1px var(--edge-strong)}
.top-right{display:flex;align-items:center;gap:12px}

/* =========================================================
   LIGHT BACKGROUND — warm light grey, ink stars
   ========================================================= */
html[data-bg="light"]{
  color-scheme:light;
  --void:#ebe8e0;
  --deep:#dedad0;
  --panel:rgba(255,255,255,.55);
  --edge:rgba(30,34,60,.14);
  --edge-strong:rgba(30,34,60,.30);
  --star:#141828;
  --text:#2c3148;
  --muted:#626882;
  --cyan:#3a4160;
  --line:rgba(20,24,40,.5);
  --glass-white:rgba(20,24,40,.08);
  --gold:#a86b00;
  --sticker:rgba(255,255,255,.72);
}
html[data-bg="light"] a{text-decoration-color:rgba(20,24,40,.35)}
html[data-bg="light"] a:hover,html[data-bg="light"] .brand:hover,html[data-bg="light"] .btn:hover,html[data-bg="light"] .site-footer nav a:hover{color:#000}
html[data-bg="light"] #space{
  background:
    radial-gradient(1200px 800px at 80% 12%, rgba(190,178,150,.35), transparent 60%),
    radial-gradient(1000px 700px at 8% 78%, rgba(170,178,196,.30), transparent 60%),
    linear-gradient(180deg,#efece5 0%, #e7e4dc 55%, #ebe8e0 100%);
}
html[data-bg="light"] .starlayer i{background:#1b1e2c!important;transform:scale(1.25)}
html[data-bg="light"] .meteor{background:linear-gradient(90deg,rgba(20,22,34,0),#1b1e2c 82%,#1b1e2c);filter:none}
html[data-bg="light"] .topbar{background:linear-gradient(180deg,rgba(235,232,224,.94),rgba(235,232,224,.8))}
html[data-bg="light"] .nav a:hover{background:rgba(20,24,40,.06)}
html[data-bg="light"] .nav a[aria-current="page"]{box-shadow:inset 0 0 0 1px rgba(20,24,40,.18)}
html[data-bg="light"] .menu-btn{background:rgba(255,255,255,.6)}
@media (max-width:1240px){html[data-bg="light"] .nav{background:rgba(235,232,224,.98)}}
html[data-bg="light"] .eyebrow,html[data-bg="light"] .theme .tag,html[data-bg="light"] .game .code{color:#555c78}
html[data-bg="light"] .btn{background:rgba(255,255,255,.5)}
html[data-bg="light"] .btn.primary{background:rgba(20,24,40,.08);border-color:rgba(20,24,40,.35)}
html[data-bg="light"] .btn:hover{box-shadow:0 6px 18px rgba(20,24,40,.12)}
html[data-bg="light"] .portal .frame{box-shadow:0 0 0 1px rgba(20,24,40,.2),0 24px 60px rgba(20,24,40,.25)}
html[data-bg="light"] .portal .ring{border-color:rgba(20,24,40,.3)}
html[data-bg="light"] .sticker{box-shadow:0 10px 28px rgba(40,36,20,.18)}
html[data-bg="light"] .sticker:hover{box-shadow:0 16px 36px rgba(40,36,20,.24)}
html[data-bg="light"] .sticker.ink{background:#141828;box-shadow:0 10px 28px rgba(20,24,40,.25)}
html[data-bg="light"] .sticker.ink h3{color:#f1f0ea}
html[data-bg="light"] .sticker.ink p{color:#d3d7e6}
html[data-bg="light"] .sticker.ink p b,html[data-bg="light"] .sticker.ink .more{color:#ffc94a}
html[data-bg="light"] .sticker.ink .when{color:#a3aac4}
html[data-bg="light"] .sticker .tape{background:rgba(120,110,90,.22)}
html[data-bg="light"] .node .disc img{box-shadow:0 0 0 1px rgba(20,24,40,.15),0 14px 34px rgba(20,24,40,.25)}
html[data-bg="light"] .node .disc::before{border-color:rgba(20,24,40,.25)}
html[data-bg="light"] .eq{background:rgba(20,24,40,.05)}
html[data-bg="light"] .media-frame{box-shadow:0 14px 36px rgba(20,24,40,.2)}
html[data-bg="light"] .media-frame.round{box-shadow:0 0 0 1px rgba(20,24,40,.15),0 18px 44px rgba(20,24,40,.25)}
html[data-bg="light"] .badge{color:#e9efff}
html[data-bg="light"] .grant{background:linear-gradient(135deg,rgba(214,160,40,.14),rgba(255,255,255,.55) 50%);border-color:rgba(168,107,0,.35)}
html[data-bg="light"] .grant.elidek{background:linear-gradient(135deg,rgba(160,110,90,.14),rgba(255,255,255,.55) 50%);border-color:rgba(140,100,80,.35)}
html[data-bg="light"] .chip{background:rgba(255,255,255,.6)}
html[data-bg="light"] .avatar{color:#141828}
html[data-bg="light"] .person .avatar{background:radial-gradient(circle at 35% 30%,#fff,#b9bfd6 50%,#6a7194)}
html[data-bg="light"] .person.lead .avatar{background:radial-gradient(circle at 35% 30%,#fff,#e5b04a 50%,#9a5a10)}
html[data-bg="light"] .tile{background:rgba(255,255,255,.6)}
html[data-bg="light"] .tile .thumb{background:#05081a}
html[data-bg="light"] .tile .play svg{fill:#e9efff}
html[data-bg="light"] #lightbox .lb-cap,html[data-bg="light"] #lightbox .lb-cap b{color:#e9efff}
html[data-bg="light"] #lightbox .close{color:#e9efff;border-color:rgba(233,239,255,.4);background:rgba(10,16,40,.55)}
html[data-bg="light"] .site-footer{background:rgba(255,255,255,.35)}
html[data-bg="light"] .funders img.oscars{box-shadow:0 0 0 1px rgba(20,24,40,.12)}
html[data-bg="light"] .roles li{border-color:rgba(20,24,40,.15)}

/* ---------- Researchers' Night ---------- */
.night-grid{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:clamp(24px,5vw,60px);align-items:center}
.poster{width:100%;max-width:380px;justify-self:center}
.poster img.poster-file{width:100%;height:auto;border-radius:10px;box-shadow:0 22px 60px rgba(0,0,0,.5)}
.poster-art{
  position:relative;aspect-ratio:1/1.414;border-radius:10px;overflow:hidden;background:#05060d;
  box-shadow:0 0 0 1px rgba(233,239,255,.18),0 22px 60px rgba(0,0,0,.5);transform:rotate(-1.2deg);
}
.poster-art > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.poster-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,6,13,.15) 30%,rgba(5,6,13,.92) 78%)}
.poster-text{position:absolute;inset:auto 0 0 0;z-index:2;padding:26px 24px;display:flex;flex-direction:column;gap:6px;color:#f3f1ea}
.p-kicker{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#d9dcea}
.p-title{font-family:var(--sticker-face);font-size:3.3rem;line-height:.9;color:#ffc94a;letter-spacing:.02em}
.p-sub{font-family:var(--display);font-weight:600;font-size:1rem;color:#f3f1ea}
.p-date{margin-top:10px;font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:.06em;text-transform:uppercase;color:#fff}
.p-venue{font-family:var(--mono);font-size:.72rem;color:#c9cde0}
@media (max-width:760px){.night-grid{grid-template-columns:1fr}}
html[data-bg="light"] .poster-art{box-shadow:0 0 0 1px rgba(20,24,40,.15),0 22px 50px rgba(20,24,40,.3)}

/* ---------- drifting simulation cut-outs (only over empty space) ---------- */
#drifters{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.drifter{
  position:absolute;left:0;top:0;will-change:transform,opacity;opacity:0;
  transition:opacity .9s ease;filter:drop-shadow(0 6px 14px rgba(0,0,0,.18));
}
.drifter.on{opacity:.9}
html[data-bg="dark"] .drifter{filter:none}
html[data-bg="dark"] .drifter.on{opacity:.8}
@media (prefers-reduced-motion:reduce){#drifters{display:none}}

/* ---------- funded work: compact ---------- */
.grants.small{gap:14px}
.grants.small .grant{padding:16px 18px;gap:10px;border-radius:14px}
.grants.small .grant .logo{width:92px;padding:5px 8px;border-radius:8px}
.grants.small .grant h3{font-size:.9rem;line-height:1.3;margin-top:6px!important}
.grants.small .grant p{font-size:.78rem;line-height:1.55}
.grants.small .chip{font-size:.6rem;padding:3px 8px}
.grants.small .meta{gap:6px;margin:8px 0}
.grants.small .btn{font-size:.66rem;padding:7px 12px;letter-spacing:.1em}
.grants.small .linkrow{gap:8px;margin-top:10px!important}

/* ---------- portrait + switch ---------- */
.portrait-wrap{display:flex;flex-direction:column;align-items:center;gap:10px}
.portrait{position:relative;width:132px;height:132px;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 35% 30%,#fff,#e5b04a 50%,#9a5a10);
  box-shadow:0 0 0 3px rgba(255,201,74,.55),0 10px 30px rgba(0,0,0,.25)}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s ease,transform .6s var(--ease)}
.portrait .initials{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:2.2rem;color:#141828}
.portrait .strange{opacity:0;transform:scale(1.15) rotate(-8deg)}
.portrait[data-mode="strange"] .strange{opacity:1;transform:none}
.portrait[data-mode="strange"] .real{opacity:0}
.portrait.no-real .real{display:none}
.photo-switch{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  padding:6px 12px;border-radius:999px;border:1px solid var(--edge-strong);background:var(--glass-white);color:var(--star);
}
.photo-switch:hover{border-color:var(--line)}

/* ---------- more info tab ---------- */
.more-info{margin-top:18px;border-top:1px solid var(--edge);padding-top:12px}
.more-info summary{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  padding:6px 12px;border-radius:999px;border:1px solid var(--edge-strong);
}
.more-info summary::-webkit-details-marker{display:none}
.more-info summary::after{content:"+";font-size:.9rem}
.more-info[open] summary::after{content:"–"}
.more-info summary:hover{color:var(--star)}
.more-info .roles{margin-top:12px}

/* ---------- poster & programme ---------- */
.zoomable{display:block;padding:0;border:0;background:none;cursor:zoom-in;border-radius:10px;overflow:hidden;width:100%}
.poster .poster-file{transform:rotate(-1deg)}
.poster .caption{text-align:center}
.programme{margin-top:clamp(28px,4vw,44px);display:grid;gap:14px}
.programme-pages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:700px){.programme-pages{grid-template-columns:1fr}}
.programme-pages img{width:100%;height:auto;border-radius:10px;box-shadow:0 12px 34px rgba(0,0,0,.22);transition:transform .3s var(--ease)}
.programme-pages .zoomable:hover img{transform:translateY(-3px)}

.talks{list-style:none;margin-top:16px;border-top:1px solid var(--edge)}
.talks li{display:grid;grid-template-columns:64px 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--edge);font-size:.95rem}
.talks .t-time{font-family:var(--mono);font-size:.82rem;color:var(--gold);font-variant-numeric:tabular-nums;padding-top:2px}
.programme-pages .wide{grid-column:1/-1}

/* ---------- COSMOS identity ---------- */
.hero h1.cosmos-title{font-size:clamp(3.6rem,11vw,8.4rem);letter-spacing:.06em;line-height:.9}
.hero h1.cosmos-title .thin{letter-spacing:.04em;font-size:.3em;margin-top:.6em}
.acronym{margin-top:14px;font-family:var(--mono);font-size:clamp(.78rem,1.2vw,.92rem);letter-spacing:.06em;color:var(--muted)}
.acronym b{color:var(--gold);font-weight:500;font-size:1.15em}
.brand b{letter-spacing:.24em}

/* ---------- student projects ---------- */
.levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.level{padding:20px 22px;border-radius:14px;background:var(--panel);border:1px solid var(--edge)}
.level .lv-gr{font-family:var(--body);font-weight:600;font-size:.82rem;letter-spacing:.02em;color:var(--gold)}
.level h3{font-size:1.2rem;font-weight:800;margin:6px 0 8px}
.level p{font-size:.93rem}
.topics-title{font-size:1rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:36px 0 14px}
.topics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 28px}
.topic{display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--edge)}
.topic img{width:64px;height:64px;object-fit:contain}
.topic h4{font-size:1.08rem;font-weight:700;margin-bottom:3px}
.topic p{font-size:.9rem;color:var(--text)}
@media (max-width:760px){.levels,.topics{grid-template-columns:1fr}}

/* ---------- falling-stars switch ---------- */
.star-switch i{background:none;box-shadow:none;width:14px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,currentColor);transform:rotate(-30deg)}
.star-switch[aria-pressed="false"]{opacity:.75}
.star-switch[aria-pressed="false"] i{background:currentColor;opacity:.35}
html[data-meteors="off"] #meteors{display:none}
@media (max-width:560px){.bg-switch span{display:none}.bg-switch{padding:9px}}
.brand span{white-space:nowrap}

/* switches stacked, to give the tabs room */
.switches{display:flex;flex-direction:column;gap:5px;align-items:stretch}
.switches .bg-switch{padding:5px 12px;font-size:.66rem;justify-content:flex-start}
@media (max-width:560px){.switches{flex-direction:row}.switches .bg-switch{padding:9px}}

/* ---------- people groups ---------- */
.people-group{font-size:1.2rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.person .avatar{position:relative;overflow:hidden}
.person .avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tag-eht,.tag-past{display:inline-block;margin-top:8px;font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;padding:3px 9px;border-radius:999px;border:1px solid var(--edge-strong)}
.tag-eht{color:var(--gold);border-color:rgba(168,107,0,.45)}
.tag-past{color:var(--muted)}
.person h3 + .role{display:block}

/* ---------- grants below the cards, tiny ---------- */
.grants.tiny{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.grants.tiny .grant{padding:12px 14px;gap:6px;border-radius:12px}
.grants.tiny .grant .logo{width:70px;padding:4px 6px}
.grants.tiny .grant h3{font-size:.8rem}
.grants.tiny .grant p{font-size:.72rem;line-height:1.5}
.grants.tiny .chip{font-size:.56rem;padding:2px 7px}
.grants.tiny .btn{font-size:.6rem;padding:5px 10px}
.grants.small.tiny{grid-template-columns:repeat(auto-fill,minmax(240px,330px));justify-content:start}
.grants.tiny .grant{align-content:start}

.person .work{margin-top:8px;font-size:.86rem;line-height:1.5;color:var(--text)}
.orbit{grid-template-columns:repeat(6,1fr)}
@media (max-width:900px){.orbit{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.orbit{grid-template-columns:repeat(2,1fr)}}
.theme .media-frame img{width:100%;height:auto;background:#fff}
.game h3 a{color:inherit;text-decoration-color:rgba(20,24,40,.3)}
.game h3 a:hover{text-decoration-color:currentColor}

/* ---------- project tags on people cards ---------- */
.tag-proj{display:inline-block;margin:8px 6px 0 0;font-family:var(--mono);font-size:.64rem;letter-spacing:.04em;padding:3px 9px;border-radius:999px;border:1px solid var(--edge-strong);color:var(--text)}
.tag-proj.elidek{border-color:rgba(150,90,70,.5);color:#8a4a38}
.tag-proj.mexane{border-color:rgba(110,80,170,.5);color:#5b3fa0}
.tag-proj.leventis{border-color:rgba(40,110,120,.5);color:#23707a}
.tag-proj.bring{border-color:rgba(168,107,0,.5);color:#8a5a00}
html[data-bg="dark"] .tag-proj.elidek{color:#e0a590}
html[data-bg="dark"] .tag-proj.mexane{color:#c3aaff}
html[data-bg="dark"] .tag-proj.leventis{color:#8fd6de}
html[data-bg="dark"] .tag-proj.bring{color:#ffc94a}
.person .tag-eht{margin-right:6px}
.tag-proj.cost{border-color:rgba(40,90,160,.5);color:#285aa0}
html[data-bg="dark"] .tag-proj.cost{color:#9cc0ff}
.person-link{color:inherit;text-decoration:underline;text-decoration-color:rgba(20,24,40,.3);text-underline-offset:4px}
.person-link:hover{text-decoration-color:currentColor}
html[data-bg="dark"] .person-link{text-decoration-color:rgba(233,239,255,.4)}
.profile-link{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:6px 12px;border-radius:999px;border:1px solid var(--edge-strong);color:var(--star)}
.profile-link:hover{background:var(--glass-white);border-color:var(--line)}

/* ---------- treehouse (private group pages) link ---------- */
.site-footer nav a.treehouse-link{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:2px 10px;border:1px solid var(--edge);border-radius:999px}
.site-footer nav a.treehouse-link svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}