:root {
  /* Neon night palette — deep navy/black, electric light-blue, violet, magenta.
     Legacy token names (--teal*) are kept so the whole site retints in one place. */
  --ink:       #ecedff;   /* light primary text on dark */
  --teal:      #5b8cff;   /* bright light-blue — primary accent (was teal) */
  --cyan:      #38d6f0;   /* cyan glow highlight */
  --violet:    #9a5bff;   /* purple */
  --teal-deep: #150c3c;   /* deep violet-navy surfaces / gradient ends */
  --teal-soft: #2c2560;   /* soft fill + visible hairline borders */
  --accent:    #38d6f0;   /* cyan / light green-blue — primary accent for buttons & accent text */
  --bg:        #06031a;   /* dark navy-black page background */
  --paper:     #120b32;   /* card / panel surface — lifted off the bg */
  --paper-2:   #1a1244;   /* slightly brighter panel / hover */
  --muted:     #a7abda;   /* muted light text / captions */
  --line:      rgba(255,255,255,.08); /* faint dividers */
  --maxw: 1200px;
  --radius: 18px;
  --shadow: 0 24px 55px -30px rgba(0,0,0,.8);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* deep, layered neon glows so the dark never reads as flat black */
  background:
    radial-gradient(900px 640px at 2% -12%,  rgba(91,140,255,.18), transparent 60%),
    radial-gradient(760px 560px at 108% 2%,  rgba(255,84,196,.13), transparent 58%),
    radial-gradient(880px 780px at 96% 108%, rgba(154,91,255,.16), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
/* faint dot-grid texture drifting under everything */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.5px);
  background-size: 30px 30px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.1));
          mask-image: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.1));
}

h1, h2, h3 { font-family: "Fraunces", Georgia, serif; line-height: 1.12; font-weight: 600; letter-spacing: -0.01em; }
a { color: #86a9ff; text-decoration-color: rgba(134,169,255,.42); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
img { max-width: 100%; display: block; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
section { padding: 84px 0; }
.eyebrow {
  font-family: "Inter", sans-serif; font-size: .8rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--teal);
  margin: 0 0 14px;
}
.lead { font-size: 1.12rem; color: var(--muted); max-width: 62ch; }

/* ---------- NAV ---------- */
header.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(8,4,26,.82);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { white-space: nowrap; display: flex; align-items: center; gap: 12px; font-family: "Fraunces", serif; font-weight: 600; font-size: 1.2rem; color: var(--ink); text-decoration: none; }
.brand svg { flex: 0 0 auto; }
.nav-links { display: flex; gap: 15px; align-items: center; }
.nav-links a { font-size: .84rem; font-weight: 500; color: var(--ink); text-decoration: none; position: relative; white-space: nowrap; }
.nav-links a:hover { color: var(--accent); }
.nav-links a.active { color: var(--teal); }
.nav-links a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--accent); border-radius: 2px; }
.nav-toggle { display: none; background: none; border: 0; color: var(--ink); cursor: pointer;
  padding: 6px; line-height: 0; }

/* ---------- HERO (home) ---------- */
.hero { position: relative; overflow: hidden; color: #eef0ff; min-height: calc(100vh - 72px); display: flex; align-items: center;
  background:
    radial-gradient(115% 120% at 12% 8%,  rgba(102,74,224,.55) 0%, transparent 55%),
    radial-gradient(120% 120% at 92% 96%, rgba(255,84,196,.30) 0%, transparent 55%),
    radial-gradient(120% 120% at 96% 8%,  rgba(56,214,240,.22) 0%, transparent 50%),
    linear-gradient(158deg, #0a0526 0%, #0d0736 52%, #12093f 100%); }
.hero-inner { position: relative; z-index: 2; max-width: 940px; pointer-events: none; }
.hero-inner a, .hero-inner .chip, .hero-inner .hero-stamp { pointer-events: auto; }
.hero h1 { font-size: clamp(2.5rem, 6vw, 4.3rem); color: #ffffff; margin: 0 0 8px; font-weight: 600;
  text-shadow: 0 0 42px rgba(91,140,255,.45); }
.hero .tag { display: inline-block; font-family: "Inter", sans-serif; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: #b9c4ff; margin-bottom: 22px; }
.hero .crossroads-line { font-family: "Fraunces", serif; font-style: italic; font-size: clamp(1.3rem,2.4vw,1.7rem); color: var(--accent); margin: 0 0 18px; }
.hero p.mission { font-size: 1.18rem; color: #d7dbff; max-width: 60ch; margin: 0 0 34px; }
.cell-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; display: block; }
.hero-vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 95% at 50% 42%, rgba(10,6,40,0) 42%, rgba(4,2,18,.62) 100%); }
.hero-chips { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.chip { backdrop-filter: blur(8px); background: rgba(255,255,255,.07); border: 1px solid rgba(140,160,255,.28); padding: 9px 15px; border-radius: 13px; font-size: .82rem; color: #dfe3ff; }
.chip strong { color: #fff; font-weight: 600; }

.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }
.btn { display: inline-block; padding: 13px 24px; border-radius: 999px; font-weight: 600; font-size: .96rem; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.btn-primary { background: var(--accent); color: #042028; }
.btn-primary:hover { color: #042028; transform: translateY(-2px); box-shadow: 0 14px 34px -12px rgba(56,214,240,.7); }
.btn-ghost { border: 1.5px solid rgba(180,190,255,.55); color: #eef0ff; }
.btn-ghost:hover { color: #fff; border-color: #fff; }
.btn-teal { background: var(--teal); color: #050b28; }
.btn-teal:hover { color: #050b28; transform: translateY(-2px); box-shadow: 0 14px 34px -14px rgba(91,140,255,.7); }

/* ---------- SUBPAGE HEADER BAND ---------- */
.page-head { position: relative; overflow: hidden; color: #eef0ff;
  background:
    radial-gradient(110% 130% at 8% 0%, rgba(102,74,224,.5) 0%, transparent 58%),
    radial-gradient(120% 130% at 100% 100%, rgba(255,84,196,.24) 0%, transparent 60%),
    linear-gradient(155deg, #0a0526 0%, #0e0838 60%, #130a42 100%); padding: 70px 0 60px; }
.page-head .ph-motif { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .42; pointer-events: none; }
.page-head .wrap { position: relative; z-index: 2; }
.page-head .eyebrow { color: #8fb0ff; }
.page-head h1 { font-size: clamp(2rem, 4.6vw, 3rem); color: #fff; margin: 0 0 12px; }
.page-head p { color: #d7dbff; max-width: 60ch; margin: 0; font-size: 1.08rem; }

/* ---------- HOME EXPLORE CARDS ---------- */
.explore-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.xcard { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--paper);
  border: 1px solid var(--teal-soft); border-radius: var(--radius); padding: 30px 28px; box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease; }
.xcard:hover { transform: translateY(-4px); border-color: var(--teal); box-shadow: 0 28px 64px -26px rgba(0,0,0,.8); color: inherit; }
.xcard .xicon { width: 46px; height: 46px; color: var(--teal); margin-bottom: 16px; }
.xcard h3 { margin: 0 0 8px; font-size: 1.25rem; }
.xcard p { margin: 0 0 16px; color: var(--muted); font-size: .96rem; flex: 1; }
.xcard .go { color: var(--accent); font-weight: 600; font-size: .9rem; }
@media (max-width: 820px) { .explore-grid { grid-template-columns: 1fr; } }

/* ---------- HOME MISSION ---------- */
.mission-section { padding-bottom: 96px; }
.goal-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.goal { position: relative; background: var(--paper); border: 1px solid var(--teal-soft); border-radius: var(--radius);
  padding: 30px 28px; box-shadow: var(--shadow); }
.goal-num { font-family: "Fraunces", serif; font-size: 1.05rem; font-weight: 600; color: var(--accent); letter-spacing: .06em; }
.goal h3 { margin: 8px 0 10px; font-size: 1.25rem; }
.goal p { margin: 0; color: var(--muted); font-size: .96rem; }
@media (max-width: 820px) { .goal-grid { grid-template-columns: 1fr; } }

/* ---------- RESEARCH FEATURE ROWS ---------- */
.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head h2 { font-size: clamp(2rem, 4vw, 2.9rem); margin: 0 0 14px; }
.research-rows { display: flex; flex-direction: column; gap: 28px; }
.rrow { display: grid; grid-template-columns: 1.02fr 1fr; background: var(--paper);
  border: 1px solid var(--teal-soft); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); }
.rrow:nth-child(even) .rmedia { order: 2; }
.rmedia { margin: 0; position: relative; min-height: 300px; }
.rmedia svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rtext { padding: 44px 46px; align-self: center; }
.rkicker { display: inline-flex; align-items: center; gap: 9px; font-size: .76rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--teal); margin-bottom: 14px; }
.rkicker svg { width: 22px; height: 22px; flex: 0 0 auto; }
.rtext h3 { font-size: 1.7rem; margin: 0 0 12px; }
.rtext p { color: var(--muted); margin: 0; font-size: 1.02rem; }
.stamp-key { display: inline-block; margin-top: 14px; font-size: .82rem; color: #bfeef2; background: var(--teal-soft); padding: 4px 12px; border-radius: 999px; font-weight: 600; }
@media (max-width: 820px) {
  .rrow { grid-template-columns: 1fr; }
  .rrow:nth-child(even) .rmedia { order: 0; }
  .rmedia { min-height: 200px; }
  .rtext { padding: 30px 28px; }
}

/* ---------- GALLERY ---------- */
.gallery { background: linear-gradient(165deg, #0a0526, var(--teal-deep)); color: #eef0ff; }
.gallery .eyebrow { color: #8fb0ff; }
.gallery h2 { color: #fff; }
.gallery .lead { color: #c6ccff; }
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 8px; }
.tile { aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; position: relative; box-shadow: var(--shadow); border: 1px solid rgba(255,255,255,.12); background: #0a0524; margin: 0; }
.tile svg { width: 100%; height: 100%; display: block; transition: transform .5s ease; }
.tile:hover svg { transform: scale(1.07); }
.tile figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 10px; font-size: .76rem; letter-spacing:.02em; background: linear-gradient(transparent, rgba(6,3,24,.92)); }
.gallery-note { margin-top: 20px; font-size: .86rem; color: #a7abda; }
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- PEOPLE ---------- */
.pi { display: grid; grid-template-columns: 280px 1fr; gap: 44px; align-items: start; }
.headshot { width: 280px; height: 340px; border-radius: var(--radius); background: var(--teal-soft); object-fit: cover; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; color: var(--muted); text-align: center; font-size: .85rem; padding: 16px; }
.headshot.photo { padding: 0; background: var(--teal-soft); }
.pi h3 { font-size: 1.8rem; margin: 0 0 4px; }
.pi .pi-role { color: var(--accent); font-weight: 600; margin: 0 0 18px; }
.placeholder { color: #9a3a12; background: #fdeee4; border: 1px dashed #e2864a; border-radius: 8px; padding: 2px 8px; font-size: .9rem; font-weight: 600; }
.trainees { margin-top: 64px; }
.trainees h3 { font-size: 1.4rem; }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 22px; }
.person-card { background: var(--paper); border: 1px solid var(--teal-soft); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.person-card .pphoto { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--teal-soft); display: flex; align-items: center; justify-content: center; color: var(--teal); text-align: center; font-size: .82rem; padding: 12px; }
.person-card .pbody { padding: 18px 20px 22px; }
.person-card h4 { margin: 0 0 2px; font-family: "Fraunces", serif; font-weight: 600; font-size: 1.16rem; }
.person-card .role { color: var(--accent); font-weight: 600; font-size: .9rem; margin: 0 0 9px; }
.person-card .blurb { margin: 0; font-size: .92rem; color: var(--muted); }
@media (max-width: 920px) { .team-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .team-grid { grid-template-columns: 1fr; } }

/* trainee profiles — photo + structured facts */
.trainee-list { display: flex; flex-direction: column; gap: 26px; margin-top: 26px; }
.trainee-card { --tphoto-w: 320px;
  display: grid; grid-template-columns: var(--tphoto-w) 1fr; gap: 32px; background: var(--paper);
  border: 1px solid var(--teal-soft); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.trainee-card .tphoto { width: var(--tphoto-w); height: 100%; min-height: 280px; object-fit: cover; object-position: center top; background: var(--teal-soft); }
.trainee-card .tbody { padding: 30px 32px 30px 0; }
.trainee-card h4 { margin: 0 0 2px; font-family: "Fraunces", serif; font-weight: 600; font-size: 1.35rem; }
.trainee-card .role { color: var(--accent); font-weight: 600; font-size: .95rem; margin: 0 0 16px; }
.trainee-card .tbio { margin: 0 0 18px; color: var(--muted); font-size: 1rem; }
.tfacts { margin: 0; display: grid; grid-template-columns: max-content 1fr; column-gap: 22px; row-gap: 10px; align-items: baseline; }
.tfacts dt { font-size: .72rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--teal); }
.tfacts dd { margin: 0; color: var(--muted); font-size: .95rem; }
/* A card carrying a blurb runs it across the full width, then sets the photo
   beside the fact list rather than down the whole card. Because the photo and
   the fact list share a grid row, the photo takes that row's height, so it
   comes out short and wide instead of a tall narrow strip. The bottom padding
   sits on the card rather than on the fact list, so the two stay exactly the
   same height. */
.trainee-card.bio-top { --tphoto-w: 430px; --card-pad: 32px; padding-bottom: 30px;
  grid-template-columns: calc(var(--card-pad) + var(--tphoto-w)) 1fr;
  grid-template-areas: "head head" "photo facts"; }
.trainee-card.bio-top .thead  { grid-area: head; padding: 30px var(--card-pad) 0; }
.trainee-card.bio-top .thead .tbio:last-child { margin-bottom: 0; }
/* the photo no longer meets any card edge, so it takes a corner radius of its own */
.trainee-card.bio-top .tphoto-frame { grid-area: photo; position: relative; min-height: 0;
  margin-left: var(--card-pad); border-radius: 14px; overflow: hidden; }
.trainee-card.bio-top .tphoto { position: absolute; inset: 0;
  width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.trainee-card.bio-top .tbody  { grid-area: facts; padding: 0 var(--card-pad) 0 0; }
@media (max-width: 820px) {
  .trainee-card.bio-top { padding-bottom: 0; grid-template-areas: "head" "photo" "facts"; }
  /* the grid gap is 0 here, so the header carries the space itself */
  .trainee-card.bio-top .thead { padding: 26px 26px 24px; }
  /* .trainee-card.bio-top out-specifies the single-column rule above, so the
     stacked layout has to restate it or the card keeps two columns. */
  .trainee-card.bio-top { --card-pad: 26px; grid-template-columns: 1fr; }
  .trainee-card.bio-top .tphoto-frame { aspect-ratio: 4 / 3;
    margin: 0 var(--card-pad); }
  .trainee-card.bio-top .tbody { padding: 22px 26px 30px; }
}
@media (max-width: 820px) {
  .trainee-card { grid-template-columns: 1fr; gap: 0; }
  .trainee-card .tphoto { width: 100%; height: auto; aspect-ratio: 4 / 3; min-height: 0; object-fit: cover; }
  .trainee-card .tbody { padding: 26px 26px 30px; }
  .tfacts { grid-template-columns: 1fr; row-gap: 4px; }
  .tfacts dt { margin-top: 10px; }
}

/* ---------- PUBLICATIONS ---------- */
.pub-list { list-style: none; margin: 0; max-width: 920px; background: var(--paper); border: 1px solid var(--teal-soft); border-radius: var(--radius); padding: 6px 30px; box-shadow: var(--shadow); }
.pub-list li { padding: 22px 0; border-bottom: 1px solid var(--line); display: flex; gap: 20px; }
.pub-list li:last-child { border-bottom: 0; }
.pub-bullet { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); margin-top: 8px; }
.pub-list .title { font-weight: 600; }
.pub-list .meta { color: var(--muted); font-size: .94rem; }
.pub-list .meta em { font-style: italic; color: var(--ink); }
.pub-list .meta a { font-size: .88rem; }
.cofirst { color: var(--accent); font-weight: 700; }
.pub-heading-link { color: inherit; text-decoration: none; }
.pub-heading-link:hover { color: var(--accent); }
.pub-subhead { font-size: 1.4rem; margin: 48px 0 6px; }
.scholar-cta { margin-top: 36px; }

/* ---------- NEWS ---------- */
.news-list { list-style: none; margin: 0; max-width: 820px; background: var(--paper); border: 1px solid var(--teal-soft); border-radius: var(--radius); padding: 6px 30px; box-shadow: var(--shadow); }
.news-list li { display: flex; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.news-list li:last-child { border-bottom: 0; }
.news-list time { flex: 0 0 120px; font-weight: 600; color: var(--teal); font-size: .92rem; }
.news-list .body { color: var(--ink); }

.news-feature .body h3 { margin: 0 0 8px; font-size: 1.3rem; }
.news-feature .body p { margin: 0 0 18px; color: var(--muted); }
.news-figure { margin: 0; }
.news-photo { aspect-ratio: 16 / 10; border-radius: 14px; background: var(--teal-soft);
  border: 1px dashed var(--teal); display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 18px; }
.news-figure figcaption { margin-top: 10px; font-size: .86rem; color: var(--muted); }
.news-figure img { width: 100%; max-height: 460px; object-fit: cover; border-radius: 14px; border: 1px solid var(--teal-soft); }
.news-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0; }
.news-gallery figure { margin: 0; }
.news-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; border: 1px solid var(--teal-soft); }
.news-gallery figcaption { margin-top: 7px; font-size: .78rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--teal); }
.news-gallery.news-pair { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .news-gallery, .news-gallery.news-pair { grid-template-columns: 1fr 1fr; } }

/* ---------- PHILOSOPHY ---------- */
.phil-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.phil-card { background: var(--paper); border: 1px solid var(--teal-soft); border-radius: var(--radius);
  padding: 30px 30px 32px; box-shadow: var(--shadow); position: relative; }
.phil-num { font-family: "Fraunces", serif; font-size: 2.1rem; color: var(--teal-soft);
  line-height: 1; display: block; margin-bottom: 10px; }
.phil-card h3 { margin: 0 0 10px; font-size: 1.3rem; }
.phil-card p { margin: 0; color: var(--muted); }
@media (max-width: 820px) { .phil-grid { grid-template-columns: 1fr; } }

/* ---------- MEMBERS AREA ---------- */
.nav-lock { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px;
  border: 1px solid var(--teal-soft); border-radius: 999px; color: var(--muted) !important; }
.nav-lock svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.nav-lock:hover { color: var(--accent) !important; border-color: var(--accent); }
.nav-lock.active { color: var(--teal) !important; border-color: var(--teal); }
.nav-lock.active::after { display: none; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gate-card { max-width: 460px; margin: 0 auto; text-align: center; background: var(--paper);
  border: 1px solid var(--teal-soft); border-radius: var(--radius); padding: 42px 36px; box-shadow: var(--shadow); }
.gate-lock { width: 42px; height: 42px; color: var(--teal); margin: 0 auto 16px; display: block; }
.gate-card h2 { margin: 0 0 10px; font-size: 1.55rem; }
.gate-card p { color: var(--muted); font-size: .95rem; }
.gate-card form { display: flex; gap: 10px; margin: 24px 0 0; }
.gate-card input { flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--teal-soft);
  color: var(--ink); border-radius: 999px; padding: 12px 20px; font: inherit; font-size: .95rem; }
.gate-card input:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.gate-card .btn { border: 0; cursor: pointer; font-family: inherit; }
.gate-error { color: var(--accent); font-weight: 600; font-size: .9rem; margin: 16px 0 0; }
.gate-note { font-size: .85rem; margin: 18px 0 0; }

.member-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; padding: 14px 20px; margin-bottom: 40px; background: var(--paper);
  border: 1px solid var(--teal-soft); border-radius: 999px; }
.member-badge { font-size: .85rem; color: var(--teal); font-weight: 600; }
.linkbtn { background: none; border: 0; color: var(--accent); font: inherit; font-size: .85rem;
  font-weight: 600; cursor: pointer; padding: 0; }
.linkbtn:hover { text-decoration: underline; }

.res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.res-card { background: var(--paper); border: 1px solid var(--teal-soft); border-radius: var(--radius);
  padding: 28px 26px 30px; box-shadow: var(--shadow); }
.res-icon { width: 40px; height: 40px; color: var(--teal); margin-bottom: 14px; }
.res-card h3 { margin: 0 0 8px; font-size: 1.2rem; }
.res-card > p { margin: 0 0 16px; color: var(--muted); font-size: .94rem; }
.res-links { list-style: none; margin: 0; padding: 0; }
.res-links li { padding: 7px 0; border-top: 1px solid var(--line); font-size: .9rem; }
.res-footnote { margin-top: 34px; font-size: .86rem; color: var(--muted); max-width: 70ch; }
@media (max-width: 1020px) { .res-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .res-grid { grid-template-columns: 1fr; } .gate-card form { flex-direction: column; } }

/* ---------- JOIN ---------- */
.join-card { background: linear-gradient(150deg, #1a0f4a 0%, #3a1670 55%, #7a2a9e 100%); color: #eef0ff; border-radius: 24px; padding: 50px 46px; box-shadow: var(--shadow); }
.join-card .eyebrow { color: #9cc4ff; }
.join-card h2 { color: #fff; font-size: clamp(1.9rem,3.5vw,2.6rem); margin: 0 0 16px; }
.join-card p { color: #e4e6ff; max-width: 62ch; }
.join-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-top: 30px; }
.join-cols h4 { font-family: "Inter", sans-serif; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; color: #9cc4ff; margin: 0 0 10px; }
.join-cols ul { margin: 0; padding-left: 18px; color: #e4e6ff; }
.join-cols li { margin-bottom: 8px; }

/* ---------- CONTACT ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.contact-info { background: var(--paper); border: 1px solid var(--teal-soft); border-radius: var(--radius); padding: 28px 30px; box-shadow: var(--shadow); }
.contact-info dl { margin: 0; }
.contact-info dt { font-weight: 600; color: var(--teal); font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; margin-top: 20px; }
.contact-info dd { margin: 4px 0 0; font-size: 1.05rem; }
.map-frame { border: 0; width: 100%; height: 360px; border-radius: var(--radius); box-shadow: var(--shadow); }

/* ---------- FOOTER ---------- */
footer { background: #050216; border-top: 1px solid var(--line); color: #a7abda; padding: 40px 0; text-align: center; font-size: .92rem; }
footer a { color: #eef0ff; }
.foot-mark { width: 46px; height: 46px; margin: 0 auto 14px; display: block; }

/* ---------- LOGO MARK ---------- */
.brandmark { width: 40px; height: 40px; flex: 0 0 auto; }

/* ---------- SCROLL FADE ---------- */
.reveal { opacity: 0; transform: translateY(46px); will-change: opacity, transform;
  transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); }
.reveal.visible { opacity: 1; transform: none; }
/* staggered cascade for the home "explore" cards as they scroll into view */
.explore-grid.reveal.visible .xcard { animation: cardIn .7s cubic-bezier(.22,.61,.36,1) both; }
.explore-grid.reveal.visible .xcard:nth-child(2) { animation-delay: .1s; }
.explore-grid.reveal.visible .xcard:nth-child(3) { animation-delay: .2s; }
@keyframes cardIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 920px) {
  .explore-grid { grid-template-columns: 1fr; }
  .pi { grid-template-columns: 1fr; }
  .headshot { width: 100%; max-width: 320px; }
  .join-cols, .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 940px) {
  .nav-links { display: none; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; align-items: flex-start; background: var(--paper); padding: 18px 24px; gap: 16px; border-bottom: 1px solid var(--teal-soft); }
  .nav-links.open { display: flex; }
  .nav-links a.active::after { display: none; }
  .nav-toggle { display: block; }
}
@media (max-width: 640px) {
  section { padding: 60px 0; }
  .news-list li { flex-direction: column; gap: 4px; }
  .news-list time { flex-basis: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .explore-grid.reveal.visible .xcard { animation: none; }
}

/* ==========================================================
   INTERACTION NETWORKS (Philosophy / People)
   The .net-items list is the real content and the only thing
   narrow-screen and reduced-motion visitors ever see. network.js
   lifts that same content into .net-stage on wide screens.
   ========================================================== */
.netgraph { margin-top: 30px; }
.net-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.net-item { background: var(--paper); border: 1px solid var(--teal-soft); border-radius: var(--radius);
  padding: 26px 28px 28px; box-shadow: var(--shadow); }
.net-item h3, .net-item h4 { margin: 0 0 6px; font-family: "Fraunces", serif; font-weight: 600; font-size: 1.24rem; }
.net-item .role { color: var(--accent); font-weight: 600; font-size: .92rem; margin: 0 0 14px; }
.net-item p { color: var(--muted); font-size: .96rem; }
.net-item img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; float: right; margin: 0 0 10px 14px; }
.net-item dl { margin: 0; }
.net-item dt { font-weight: 600; color: var(--teal); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .1em; margin-top: 14px; }
.net-item dd { margin: 3px 0 0; font-size: .9rem; }
.netgraph.is-enhanced .net-items { display: none; }

.net-stage { position: relative; width: 100%; height: 620px; touch-action: none; }
.net-edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.net-edge { stroke: #7fa3ff; stroke-linecap: round; transition: stroke .3s ease; }
.net-edge.is-live { stroke: var(--accent); }

.net-node { position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: 2; }
.net-node.is-open { z-index: 6; }
.net-inner { position: absolute; top: 0; left: 0; transform-style: preserve-3d;
  transition: transform .58s cubic-bezier(.2,.86,.24,1); }
.net-node.is-open .net-inner { transform: rotateY(180deg); }

.net-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }

/* the bubble */
.net-front { position: absolute; top: 0; left: 0; margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1);
  width: calc(var(--r) * 2); height: calc(var(--r) * 2); border-radius: 50%; border: 0; cursor: grab;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.34), transparent 58%), var(--bub);
  color: var(--bub-ink); font-family: "Inter", sans-serif; font-weight: 600; font-size: .8rem;
  line-height: 1.24; padding: 10px; display: flex; align-items: center; justify-content: center; text-align: center;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 10px 26px rgba(4,2,18,.62), 0 0 30px -6px var(--bub);
  transition: box-shadow .25s ease, filter .3s ease, opacity .3s ease; }
.net-front:hover { filter: brightness(1.08); box-shadow: 0 0 0 1px rgba(255,255,255,.28), 0 12px 30px rgba(4,2,18,.7), 0 0 44px -4px var(--bub); }
.net-name { display: block; }
/* the role sits just under the bubble, so a long name never has to share
   space with it; it is inside the front face, so it flips away with it */
.net-role-cap { position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%);
  width: 168px; font-size: .62rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  line-height: 1.3; color: rgba(219,224,255,.9); text-shadow: 0 1px 9px rgba(4,2,18,.95);
  pointer-events: none; }
.net-front:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.net-node.is-dragging .net-front { cursor: grabbing; filter: brightness(1.12); }
.net-node.is-open .net-front { pointer-events: none; }
/* while one card is open the rest recede, so attention lands on the card */
.netgraph.has-open .net-node:not(.is-open) .net-front { filter: saturate(.72) brightness(.82); opacity: .9; }

/* the card — sized to its own content by network.js, never a fixed box */
.net-back { position: absolute; top: 0; left: 0;
  width: var(--cw, 336px); height: var(--ch, auto);
  margin: calc(var(--ch, 300px) / -2) 0 0 calc(var(--cw, 336px) / -2);
  opacity: 0; pointer-events: none; overflow: hidden;
  background: var(--paper); border: 1px solid var(--bub); border-radius: 18px;
  box-shadow: 0 18px 50px rgba(3,1,16,.8), 0 0 40px -12px var(--bub);
  transform: rotateY(180deg) scale(.94);
  transition: opacity .26s ease .16s, transform .5s cubic-bezier(.2,.86,.24,1) .06s; }
.net-node.is-open .net-back { opacity: 1; pointer-events: auto; transform: rotateY(180deg) scale(1); }
.net-body { height: 100%; overflow: auto; padding: 22px 24px 20px; }
.net-body > *:last-child { margin-bottom: 0; }
.net-body h3, .net-body h4 { margin: 0 0 4px; font-family: "Fraunces", serif; font-weight: 600; font-size: 1.14rem; padding-right: 26px; }
.net-body .role { color: var(--accent); font-weight: 600; font-size: .86rem; margin: 0 0 10px; }
.net-body p { color: var(--muted); font-size: .89rem; margin: 0 0 10px; }
.net-body dl { margin: 0; }
.net-body dt { font-weight: 600; color: var(--teal); font-size: .64rem; text-transform: uppercase;
  letter-spacing: .1em; margin-top: 11px; }
.net-body dd { margin: 2px 0 0; font-size: .85rem; }
.net-body img { width: 66px; height: 66px; border-radius: 50%; object-fit: cover; float: right; margin: 0 0 8px 12px; }
/* photo-only card: the portrait is the card */
.net-back.is-photo .net-body { padding: 0; }
.net-back.is-photo .net-body img { float: none; width: 100%; height: auto;
  border-radius: 0; margin: 0; display: block; }
.net-back.is-photo .net-body h3 { padding: 14px 18px 0; }
.net-back.is-photo .net-body .role { padding: 0 18px 16px; margin: 0; }
/* only fade the foot when there is genuinely more text below */
.net-back.is-scrolling::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 40px;
  border-radius: 0 0 17px 17px; pointer-events: none;
  background: linear-gradient(to top, var(--paper), rgba(18,11,50,0)); }
.net-close { position: absolute; top: 6px; right: 8px; z-index: 2; background: none; border: 0; cursor: pointer;
  font-size: 1.4rem; line-height: 1; color: var(--muted); padding: 4px 8px; border-radius: 8px; }
.net-close:hover { color: var(--ink); background: rgba(255,255,255,.07); }

.net-caption { margin-top: 22px; text-align: center; color: var(--muted); font-size: .84rem; opacity: .8; }

@media (max-width: 900px) { .net-items { grid-template-columns: 1fr; } }

/* ---------- HOME: stripped back to the hero ---------- */
.hero-affil { margin: 0 0 4px; color: var(--muted); font-size: .92rem; }
.hero-affil i { font-style: normal; opacity: .42; padding: 0 7px; }
.canvas-note { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 3; text-align: center;
  color: rgba(236,237,255,.66); font-size: .7rem; letter-spacing: .02em; padding: 0 24px;
  text-shadow: 0 1px 10px rgba(4,2,18,.95), 0 0 3px rgba(4,2,18,.9); }
@media (max-width: 640px) { .canvas-note { font-size: .62rem; bottom: 12px; } .hero-affil { font-size: .8rem; } }

/* ---------- EVENTS: calendar ---------- */
.cal-frame { border: 0; width: 100%; height: 620px; border-radius: var(--radius);
  box-shadow: var(--shadow); background: var(--paper); }
.cal-placeholder { background: var(--paper); border: 1px dashed var(--teal-soft);
  border-radius: var(--radius); padding: 32px 30px; }
.cal-placeholder p { color: var(--muted); margin: 0 0 10px; max-width: 74ch; }
.cal-placeholder p:last-child { margin: 0; }

/* ---------- RESEARCH FOCUS: art beside the blurb ---------- */
.rmedia.pending { display: flex; align-items: center; justify-content: center; background: var(--paper);
  border: 1px dashed var(--teal-soft); min-height: 260px; }
.rmedia.pending > span { color: var(--muted); font-size: .8rem; text-align: center; padding: 20px; }
.rmedia.pending .pend-label { display: block; margin-top: 12px; }
.rrow .rtext p { max-width: 68ch; }

/* Images fill their whole panel edge to edge, and a two-up panel has its
   images touching with no seam. Captions ride on a scrim over the artwork. */
.rmedia.gallery { display: grid; gap: 0; padding: 0; background: #08041e; }
.rmedia.gallery.two { grid-template-rows: 1fr 1fr; }
/* A portrait photo in a media panel. The cell's shape is pinned rather than
   left to the image, because .rshot img is height:100% and that falls back to
   the image's intrinsic height against an auto-height grid -- a tall photo
   would stretch the row far past its siblings. The photo fills the cell and
   crops, anchored bottom-right, so whatever has to go is taken off the top and
   the left. */
.rmedia.gallery.portrait .rshot { aspect-ratio: 4 / 5; }
.rmedia.gallery.portrait .rshot img { object-position: right 72%; }
@media (max-width: 900px) { .rmedia.gallery.portrait .rshot { aspect-ratio: 1 / 1; } }
.rshot { position: relative; margin: 0; min-height: 0; overflow: hidden; }
.rshot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rshot figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 16px 10px;
  font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; text-align: center;
  color: rgba(240,241,255,.92); pointer-events: none;
  background: linear-gradient(to top, rgba(4,2,18,.88), rgba(4,2,18,.45) 45%, rgba(4,2,18,0)); }
@media (max-width: 860px) {
  .rmedia.gallery { min-height: 440px; }
}
}

/* ---------- NAV: 11 items, so squeeze before handing over to the drawer ---------- */
@media (max-width: 1150px) and (min-width: 941px) {
  .nav-links { gap: 11px; }
  .nav-links a { font-size: .78rem; }
  .nav-lock { padding: 6px 10px !important; }
}

/* ---------- hero stamp: the artwork logo, click to invert ----------
   The spin and the fill are sequential on purpose. The lower bulb wipes in
   downward from the neck only once the spin has landed, because that is the
   instant the two artworks are in register; fading them mid-turn would show
   both at once, 180 degrees apart. Reversing runs the wipe out first. */
.hero-stamp { display: block; width: 122px; margin: 0 0 26px; padding: 0; border: 0;
  background: none; cursor: pointer; line-height: 0; border-radius: 10px;
  --turn: 0deg; --wipe: -200px; --spinDur: 1s; --spinDel: .32s; --wipeDur: .3s; --wipeDel: 0s; }
.hero-stamp svg { display: block; width: 100%; height: auto; }
.hero-stamp:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.hero-stamp.turned { --turn: 180deg; --wipe: 0px; --spinDel: 0s; --wipeDur: .7s; --wipeDel: 1.05s; }
.hero-stamp .spin { transition: transform var(--spinDur) cubic-bezier(.6,.02,.24,1) var(--spinDel);
  transform: translate(100px,130px) rotate(var(--turn)) translate(-100px,-130px); }
.hero-stamp .wipe { transition: transform var(--wipeDur) ease var(--wipeDel);
  transform: translateY(var(--wipe)); }
@media (prefers-reduced-motion: reduce) {
  .hero-stamp { --spinDur: 0s; --wipeDur: 0s; --spinDel: 0s; --wipeDel: 0s; }
}
@media (max-width: 720px) { .hero-stamp { width: 96px; margin-bottom: 20px; } }

/* ---------- request a change: the unlisted form on request.html ----------
   Fields are deliberately large and stacked one per row rather than packed
   into columns: this page is used rarely, by one person, often on a phone. */
.reqform { margin-top: 8px; }
.req-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 26px; }
.req-row label { font-family: "Inter", sans-serif; font-size: .78rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
.req-row input, .req-row select, .req-row textarea {
  width: 100%; background: var(--bg); color: var(--ink);
  border: 1px solid var(--teal-soft); border-radius: 12px;
  padding: 13px 15px; font-family: inherit; font-size: 1rem; line-height: 1.5; }
.req-row textarea { resize: vertical; min-height: 150px; }
.req-row input::placeholder, .req-row textarea::placeholder { color: #6f74a8; }
.req-row input:focus, .req-row select:focus, .req-row textarea:focus {
  outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.req-hint { margin: 0; font-size: .84rem; color: var(--muted); }
.req-examples { background: rgba(0,0,0,.22); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 18px; font-size: .88rem; color: var(--muted); }
.req-examples p { margin: 0 0 8px; font-weight: 600; color: #cdd6ff; }
.req-examples ul { margin: 0; padding-left: 20px; }
.req-examples li { margin-bottom: 5px; }
.req-examples li:last-child { margin-bottom: 0; }
.req-actions { margin-top: 4px; }
.req-actions .btn { border: 0; cursor: pointer; font-family: inherit; }
.req-actions .btn[disabled] { opacity: .55; cursor: default; transform: none; box-shadow: none; }
.req-status { margin: 18px 0 0; font-size: .92rem; color: var(--muted); }
.req-status.is-error { color: #ffb4d8; }
/* ---------- review.html: one card per change awaiting publication ---------- */
.rev-card { background: var(--paper); border: 1px solid var(--teal-soft);
  border-radius: var(--radius); padding: 26px 28px; margin-bottom: 22px;
  box-shadow: var(--shadow); }
.rev-request { margin: 10px 0 18px; padding: 12px 18px; border: 0;
  border-left: 3px solid var(--teal); background: rgba(0,0,0,.22);
  border-radius: 0 12px 12px 0; }
.rev-request p { margin: 0; white-space: pre-wrap; }
.rev-h { font-family: "Inter", sans-serif; font-size: .78rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--teal);
  margin: 0 0 8px; }
.rev-summary { margin: 0 0 22px; white-space: pre-wrap; }
.rev-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.rev-actions .btn { border: 0; cursor: pointer; font-family: inherit; }
.rev-actions .btn-ghost { background: transparent; border: 1.5px solid rgba(180,190,255,.55); }
.rev-actions .btn[disabled] { opacity: .55; cursor: default; transform: none; box-shadow: none; }
.rev-building { font-size: .88rem; color: var(--muted); }
.rev-note { margin: 16px 0 0; font-size: .84rem; color: var(--muted); }
.rev-done { margin: 0; font-weight: 600; color: var(--accent); }
@media (max-width: 620px) { .rev-actions { flex-direction: column; align-items: stretch; }
  .rev-actions .btn { text-align: center; } }

.req-done h2 { margin-top: 0; }
/* .btn-ghost was written for <a>, so it sets a border and no background. On a
   real <button> the UA's default light background shows through behind its
   near-white text, so clear it and keep the border that carries the shape. */
.req-done .btn { cursor: pointer; font-family: inherit; }
.req-done .btn-ghost { background: transparent; }