/* Navigation font is local and never blocks visible menu text. */
@font-face{font-family:'Google Sans Navigation';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/google-sans-nav-700.ttf') format('truetype')}

/* ============================================================
   ASEL — "VOID" theme
   Mission-control viewport into deep space.
   Monochrome: off-white technical type on absolute black.
   No accent colour, no fill, no shadow, no elevation.
   ============================================================ */

:root{
  /* ---- colour ---- */
  --void-black:#000000;
  --star-white:#f0f0fa;
  --dim-steel:#545457;      /* strokes only: secondary outlines */
  --dark-gunmetal:#404040;  /* structural hairlines */
  /* Dim TEXT is the one foreground colour at lower luminance, not a grey ink —
     #545457 type on black sits at ~3:1 and fails WCAG AA at these sizes. */
  --text-dim:rgba(240,240,250,.64);
  --label-dim:rgba(240,240,250,.58);

  /* ---- type ---- */
  /* Latin uses Google Sans, Japanese a gothic (Noto Sans JP).
     Both stacks end in system sans faces, so nothing falls back to a serif even
     before the webfonts arrive. --font-display is kept as a name so the heading
     rules read clearly, but it is the same sans as everything else. */
  --font-din:'Google Sans','Noto Sans JP',sans-serif;
  --font-jp:'Noto Sans JP','Google Sans',sans-serif;
  --font-display:var(--font-din);

  /* One step up from the reference's 10/12/13/16/48: at its own sizes the Latin
     labels were 10px and Japanese prose 14px, too small to read comfortably. */
  --text-caption:12px;
  --text-body-sm:14px;
  --text-body:15px;
  --text-body-lg:18px;
  --text-headline:56px;

  --track-label:.10em;   /* the signature: nav, labels, buttons */
  --track-nano:.09em;    /* 10px labels */
  --track-headline:.02em;
  --track-jp:.06em;      /* CJK prose — the same voice, kept readable */

  /* ---- spacing ---- */
  --s4:4px;  --s10:10px; --s12:12px; --s13:13px; --s15:15px;
  --s18:18px; --s20:20px; --s24:24px; --s30:30px; --s40:40px; --s60:60px;
  --section-gap:60px;
  --element-gap:18px;
  --gutter:clamp(20px,4.5vw,60px);
  --stack-w:540px;       /* text block ≈ left third */

  /* ---- shape ---- */
  --radius:4px;
  --radius-pill:32px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* Reserve the scrollbar width even on short pages and while dialogs are open. */
html{scrollbar-gutter:stable}
@supports not (scrollbar-gutter:stable){html{overflow-y:scroll}}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Guard against stray horizontal overflow — but on `html`, never on `body`.
   `overflow-x` on body alone promotes BODY to the scroll container, which
   pins window.scrollY at 0 and silently kills every scroll-driven effect
   (header scrim, back-to-top, the starfield's scroll fade). */
html{overflow-x:clip}
@supports not (overflow-x:clip){html{overflow-x:hidden}}

body{
  margin:0;
  background:var(--void-black);
  color:var(--star-white);
  font-family:var(--font-din);
  font-size:var(--text-body);
  font-weight:400;
  line-height:1.7;
  letter-spacing:var(--track-label);
  font-feature-settings:"tnum" on,"ss01" on;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

::selection{background:var(--star-white);color:var(--void-black)}

:focus-visible{outline:1px solid var(--star-white);outline-offset:3px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  padding:var(--s10) var(--s20);border:1px solid var(--star-white);
  background:var(--void-black);font-size:var(--text-body-sm);
  text-transform:uppercase;letter-spacing:var(--track-label);font-weight:700;
}
.skip:focus{left:var(--gutter);top:var(--s12)}

/* ============================================================
   STARFIELD — the void itself. Sits behind every section.
   ============================================================ */
#space{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
}
/* Every inner page keeps the same subdued background from the first frame. */
body:not(.home-page) #space{opacity:.32}

/* ============================================================
   TOP NAVIGATION — naked on the void
   ============================================================ */
#siteHeader{
  position:fixed;inset:0 0 auto 0;z-index:100;
  padding:var(--s13) var(--gutter);
}
/* The nav sits naked on the void — but the research figures keep their own colour,
   so a white figure scrolling past would swallow the white nav type. This is not a
   bar, a blur, or a state change on scroll: it is Void Black itself thickening under
   the nav and fading out over ~120px. Against black it is invisible; against a
   figure it keeps the readout legible. CSS only — no scroll listener to miss. */
#siteHeader::before{
  content:"";position:absolute;z-index:-1;
  inset:0 0 auto 0;height:calc(100% + 52px);
  background:linear-gradient(to bottom,
    var(--void-black) 0,
    var(--void-black) 34%,
    rgba(0,0,0,.72) 62%,
    transparent 100%);
}
.header-inner{
  display:flex;align-items:center;gap:var(--s24);
}

/* Logo — the full lockup, tagline included. The lab name is not typed out
   beside it: the artwork already says it, and two versions of the same words
   compete. Plain <img>, not a CSS mask: a mask that fails to load leaves the
   element sized but fully transparent, so the logo vanishes with no fallback. */
.brand{display:flex;align-items:center;margin-right:auto}
.brand-mark{width:138px;height:auto}
@media (max-width:1080px){.brand-mark{width:120px}}
@media (max-width:860px){.brand-mark{width:min(110px,58vw)}}

#nav{display:flex;align-items:center;gap:var(--element-gap)}
#nav a{
  font-family:'Google Sans Navigation',Arial,sans-serif;
  font-size:var(--text-body-sm);font-weight:700;
  text-transform:uppercase;letter-spacing:var(--track-label);
  line-height:1;padding:var(--s10) 0;
  color:var(--star-white);opacity:.72;
  transition:opacity .2s linear;
}
#nav a:hover,#nav a:focus-visible{opacity:1}
#nav a.active{opacity:1;box-shadow:inset 0 -1px 0 var(--star-white)}

/* mobile menu */
.menu-toggle{
  display:none;position:relative;z-index:120;
  width:40px;height:40px;padding:0;
  background:none;border:1px solid var(--star-white);border-radius:var(--radius);
  cursor:pointer;
}
.menu-toggle span{
  display:block;position:absolute;left:11px;width:16px;height:1px;
  background:var(--star-white);transition:transform .22s ease,opacity .18s linear;
}
.menu-toggle span:nth-child(1){top:14px}
.menu-toggle span:nth-child(2){top:19.5px}
.menu-toggle span:nth-child(3){top:25px}
.menu-toggle.open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.menu-toggle.open span:nth-child(2){opacity:0}
.menu-toggle.open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

@media (max-width:860px){
  .menu-toggle{display:block;margin-left:auto}
  /* Full-screen overlay menu. Toggled with display, not visibility: a
     transitioned visibility leaves the panel unreachable in some engines. */
  #nav{
    display:none;
    position:fixed;inset:0;z-index:110;
    flex-direction:column;justify-content:center;align-items:flex-start;
    gap:var(--s24);padding:var(--gutter);
    background:var(--void-black);
  }
  #nav.show{display:flex;animation:navIn .2s linear both}
  @keyframes navIn{from{opacity:0}to{opacity:1}}
  #nav a{font-size:28px;letter-spacing:.06em;opacity:1;padding:0}
  #nav a.active{box-shadow:none;color:var(--text-dim)}
}

/* ============================================================
   SECTIONS — type left, figure right. The void carries the page.
   ============================================================ */
main{position:relative;z-index:1}

.bleed{
  position:relative;
  padding:var(--section-gap) var(--gutter);
  display:flex;align-items:center;
}
.bleed>.stack{position:relative;z-index:2}

.bleed--hero{min-height:100svh;padding-top:140px;padding-bottom:110px}
.bleed--page{padding-top:150px;padding-bottom:var(--s40);align-items:flex-end}
.bleed--flow{display:block}

/* Text block in the left third, figure beside it. */
.bleed--split{
  display:grid;
  grid-template-columns:minmax(0,var(--stack-w)) minmax(0,1fr);
  gap:var(--s60);align-items:center;
  min-height:72svh;
}

/* ============================================================
   FIGURES
   Shown at their own size and in their own colour. Never scaled
   up past the source: the research plots are as small as 691px
   wide, and enlarging them past that only makes them soft.

   A restrained instrument-frame separates the white plot exports
   from the star field without recolouring or cropping the data.
   ============================================================ */
.fig{
  margin:0;justify-self:center;max-width:100%;
  padding:clamp(8px,1.2vw,14px);
  border:1px solid rgba(240,240,250,.18);
  background:rgba(7,7,8,.88);
}
.fig img{
  width:auto;height:auto;display:block;
  max-width:100%;max-height:56svh;
  /* Keep the scientific figure untouched: no filter, crop or rounded corners. */
}
.fig figcaption{
  margin-top:var(--s10);padding-top:var(--s10);
  border-top:1px solid rgba(240,240,250,.12);
  font-size:var(--text-caption);font-weight:700;
  text-transform:uppercase;letter-spacing:var(--track-nano);
  color:var(--label-dim);
}

@media (max-width:860px){
  /* Single column: figure above its text, still at its own size. */
  .bleed--split{grid-template-columns:1fr;gap:var(--s24);min-height:0}
  .bleed--split>.fig{order:-1;justify-self:start}
  .fig img{max-height:44svh}
  .bleed--hero{padding-top:120px}
  .bleed--page{padding-top:118px}
}

/* ============================================================
   TYPE
   ============================================================ */
.stack{max-width:var(--stack-w);display:flex;flex-direction:column;gap:var(--element-gap);align-items:flex-start}
.stack--wide{max-width:860px}
.stack--full{max-width:none}


.eyebrow{
  margin:0;font-size:var(--text-caption);font-weight:700;
  text-transform:uppercase;letter-spacing:var(--track-nano);line-height:1.5;
  color:var(--label-dim);
}
.eyebrow--lit{color:var(--star-white)}

/* Section headlines: bold, uppercase, tight tracking — the loudest element on
   any screen, as the SpaceX reference sets them. */
.headline{
  margin:0;font-family:var(--font-display);font-weight:700;line-height:1.08;
  font-size:clamp(34px,6.4vw,var(--text-headline));
  letter-spacing:var(--track-headline);
  text-transform:uppercase;
}
.headline .thin{font-weight:400;color:var(--text-dim)}
.headline--jp{font-family:var(--font-jp);font-weight:700}
#about .headline{font-size:clamp(26px,4vw,34px);line-height:1.45}
/* Japanese wraps at any character by default, so a 48px headline splits mid-word
   (「小天体まわりの軌道 / 力学」). auto-phrase breaks at phrase boundaries instead.
   `balance` is gated behind it: on its own (Firefox) it makes the breaks worse. */
.headline--jp{text-transform:none;letter-spacing:.01em;line-height:1.2;word-break:auto-phrase;overflow-wrap:anywhere}
@supports (word-break:auto-phrase){.headline--jp{text-wrap:balance}}

.subhead{
  margin:0;font-family:var(--font-display);font-size:20px;font-weight:700;
  text-transform:uppercase;letter-spacing:var(--track-label);line-height:1.4;
}
.subhead--jp{font-family:var(--font-jp);text-transform:none;
  letter-spacing:var(--track-jp);font-weight:500}

.copy{
  margin:0;font-size:var(--text-body);line-height:1.7;
  letter-spacing:var(--track-label);color:var(--star-white);
}
.copy--jp{font-family:var(--font-jp);font-size:16px;letter-spacing:var(--track-jp);line-height:1.85}
.copy--mute{color:var(--text-dim)}
.copy strong,.copy b{font-weight:700}
.copy a.inline{box-shadow:inset 0 -1px 0 var(--dim-steel)}
.copy a.inline:hover{box-shadow:inset 0 -1px 0 var(--star-white)}

.t-code{
  margin:0;font-size:var(--text-caption);font-weight:700;
  text-transform:uppercase;letter-spacing:var(--track-nano);
  color:var(--text-dim);
}

/* ============================================================
   BUTTONS — hairline outlines, never filled
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:var(--s10);
  border:1px solid var(--star-white);border-radius:var(--radius);
  padding:var(--s12) var(--s20);
  font-size:var(--text-body-sm);font-weight:700;
  text-transform:uppercase;letter-spacing:var(--track-label);line-height:1;
  color:var(--star-white);background:transparent;
  cursor:pointer;transition:background-color .2s linear;
}
.btn:hover,.btn:focus-visible{background:rgba(240,240,250,.08)}
.btn--secondary{border-color:var(--text-dim);color:var(--text-dim)}
.btn--secondary:hover{border-color:var(--text-dim);background:rgba(84,84,87,.14);color:var(--star-white)}
.btn--sm{padding:var(--s10) var(--s15);font-size:var(--text-caption);letter-spacing:var(--track-nano)}
.btn--jp{letter-spacing:var(--track-jp);text-transform:none}
.btn .ar{font-size:13px;line-height:1;transition:transform .2s ease}
.btn:hover .ar{transform:translateX(3px)}

.btn-row{display:flex;flex-wrap:wrap;gap:var(--s12)}

/* pill — compact selectors / toggles only */
.pill{
  display:inline-flex;align-items:center;
  border:1px solid var(--dim-steel);border-radius:var(--radius-pill);
  padding:var(--s10) var(--s18);
  font-size:var(--text-caption);font-weight:700;
  text-transform:uppercase;letter-spacing:var(--track-nano);line-height:1;
  color:var(--text-dim);background:transparent;cursor:pointer;
  transition:color .2s linear,border-color .2s linear;
}
.pill:hover{color:var(--star-white);border-color:var(--star-white)}
.pill.on{color:var(--star-white);border-color:var(--star-white)}
.pill-row{display:flex;flex-wrap:wrap;gap:var(--s10)}

/* keyword markers — typographic, not chips */
.kw{display:flex;flex-wrap:wrap;gap:0;list-style:none;margin:0;padding:0}
.kw li{
  font-size:var(--text-caption);font-weight:700;
  text-transform:uppercase;letter-spacing:var(--track-nano);line-height:1.5;
  color:var(--text-dim);
}
.kw li+li::before{content:"／";margin:0 var(--s10);color:var(--dark-gunmetal)}

/* ============================================================
   STRUCTURAL HAIRLINES
   ============================================================ */
.rule{border:0;border-top:1px solid var(--dark-gunmetal);margin:0}

.sec-head{
  display:flex;align-items:center;gap:var(--s20);
  margin-bottom:var(--s30);
}
.sec-head .rule{flex:1}

/* ============================================================
   LISTS — dates, rosters, publications. Hairlines, no cards.
   ============================================================ */
.rowlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--dark-gunmetal)}
.rowlist>li{border-bottom:1px solid var(--dark-gunmetal)}
.rowlist a,.rowlist .row{
  display:grid;grid-template-columns:110px 1fr auto;
  align-items:baseline;gap:var(--s20);
  padding:var(--s18) 0;
  transition:opacity .2s linear;
}
.rowlist--news a,.rowlist--news .row{grid-template-columns:110px 1fr}
.news-group+.news-group{margin-top:var(--s60)}
.news-year{margin:0 0 var(--s20);font-size:26px;font-weight:700;letter-spacing:.04em}
#news .rowlist--news a,#news .rowlist--news .row{grid-template-columns:70px minmax(0,1fr)}
.rowlist a:hover{opacity:.62}
.row-date{
  font-size:var(--text-body-sm);font-weight:700;letter-spacing:var(--track-label);
  color:var(--text-dim);white-space:nowrap;
}
.row-title{
  font-family:var(--font-jp);font-size:16px;line-height:1.7;
  letter-spacing:var(--track-jp);
}
.row-cat{
  font-size:var(--text-caption);font-weight:700;
  text-transform:uppercase;letter-spacing:var(--track-nano);
  color:var(--text-dim);white-space:nowrap;
}
@media (max-width:720px){
  .rowlist a,.rowlist .row{grid-template-columns:1fr;gap:var(--s10)}
  #news .rowlist--news a,#news .rowlist--news .row{grid-template-columns:1fr}
  .row-cat{order:-1}
}

/* ============================================================
   MEMBERS
   ============================================================ */
.pi{
  display:grid;grid-template-columns:300px minmax(0,1fr);
  gap:var(--s40);align-items:start;
}
/* the portrait, in its own colour and its own 1691x2002 proportion */
.pi-photo img{width:100%;height:auto;border-radius:var(--radius)}
.pi-body{display:flex;flex-direction:column;gap:var(--element-gap);align-items:flex-start}
.pi-name{margin:0;font-size:28px;font-weight:700;line-height:1.2;letter-spacing:.02em;
  font-family:var(--font-jp)}
.pi-name .en{display:block;font-family:var(--font-display);font-size:15px;
  font-weight:700;text-transform:uppercase;letter-spacing:var(--track-label);
  color:var(--text-dim);margin-top:var(--s10)}
.affil{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4)}
.affil li{font-family:var(--font-jp);font-size:var(--text-body-sm);line-height:1.7;
  letter-spacing:var(--track-jp);color:var(--text-dim)}
.affil li::before{content:"—";margin-right:var(--s10);color:var(--dark-gunmetal)}
.extlinks{display:flex;flex-wrap:wrap;gap:var(--s10)}
@media (max-width:860px){.pi{grid-template-columns:1fr;gap:var(--s24)}
  .pi-photo{max-width:220px}}

/* Student cards: portrait like the faculty photo, then year / name / topic. */
.people{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:40px 28px}
.person{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.person-photo{width:100%;aspect-ratio:1/1;overflow:hidden;margin-bottom:8px;border-radius:var(--radius);border:1px solid var(--dark-gunmetal)}
.person-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 15%}
.person-blank{display:flex;width:100%;height:100%;align-items:center;justify-content:center;
  font-size:44px;line-height:1;opacity:.22;background:rgba(255,255,255,.06)}
@media (max-width:720px){.people{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
  .person-blank{font-size:32px}}
.roster{list-style:none;margin:0;padding:0;border-top:1px solid var(--dark-gunmetal)}
.roster li{
  border-bottom:1px solid var(--dark-gunmetal);
  display:grid;grid-template-columns:70px 170px minmax(0,620px);
  align-items:baseline;gap:var(--s20);padding:var(--s18) 0;
}
.roster .r-role,.people .r-role{font-size:var(--text-caption);font-weight:700;text-transform:uppercase;
  letter-spacing:var(--track-nano);color:var(--text-dim)}
.roster .r-name,.people .r-name{font-family:var(--font-jp);font-size:var(--text-body-lg);font-weight:500;
  letter-spacing:.04em;line-height:1.4}
.roster .r-topic,.people .r-topic{font-family:var(--font-jp);font-size:var(--text-body-sm);line-height:1.7;
  letter-spacing:var(--track-jp);color:var(--text-dim)}
@media (max-width:720px){
  .roster li{grid-template-columns:1fr;gap:var(--s4)}
  .roster .r-role{order:-1}
}

.group-head{
  display:flex;align-items:baseline;gap:var(--s12);
  margin:var(--s40) 0 var(--s15);
}
.group-head .g-en{font-family:var(--font-display);font-size:18px;font-weight:700;
  text-transform:uppercase;letter-spacing:var(--track-label)}
.group-head .g-ja{font-family:var(--font-jp);font-size:var(--text-caption);
  letter-spacing:var(--track-jp);color:var(--text-dim)}

/* ============================================================
   PUBLICATIONS
   ============================================================ */
.pub-year{
  display:flex;align-items:center;gap:var(--s20);
  margin:var(--s40) 0 0;
  font-family:var(--font-display);font-size:26px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
}
.pub-year .rule{flex:1}
.publist{list-style:none;margin:0;padding:0}
.publist li{
  display:grid;grid-template-columns:120px minmax(0,900px);gap:var(--s20);
  padding:var(--s18) 0;border-bottom:1px solid var(--dark-gunmetal);
}
.p-cat{font-size:var(--text-caption);font-weight:700;text-transform:uppercase;
  letter-spacing:var(--track-nano);color:var(--text-dim);line-height:1.8}
.p-title{display:block;font-size:var(--text-body);font-weight:700;line-height:1.55;
  letter-spacing:.03em}
.p-meta{display:block;margin-top:var(--s10);font-size:var(--text-body-sm);line-height:1.7;
  letter-spacing:.04em;color:var(--text-dim)}
.p-meta strong{color:var(--star-white);font-weight:700}
.p-links{display:flex;flex-wrap:wrap;gap:var(--s10);margin-top:var(--s10)}
.p-links a{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:40px;padding:8px 14px;border:1px solid var(--dim-steel);border-radius:var(--radius);
  color:var(--star-white);font-size:14px;font-weight:700;line-height:1.4;
  letter-spacing:.04em;transition:border-color .2s linear,background .2s linear}
.p-links a:hover{border-color:var(--star-white);background:rgba(255,255,255,.08)}
.p-links a:focus-visible{outline:2px solid var(--star-white);outline-offset:3px}
@media (max-width:720px){.publist li{grid-template-columns:1fr;gap:var(--s10)}}

/* ============================================================
   CONTACT
   ============================================================ */
.info{margin:0;border-top:1px solid var(--dark-gunmetal)}
.info>div{
  display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--s20);
  padding:var(--s18) 0;border-bottom:1px solid var(--dark-gunmetal);
}
.info dt{font-size:var(--text-caption);font-weight:700;text-transform:uppercase;
  letter-spacing:var(--track-nano);color:var(--text-dim);line-height:1.8}
.info dd{margin:0;font-family:var(--font-jp);font-size:var(--text-body);line-height:1.8;
  letter-spacing:var(--track-jp)}
.info dd a{box-shadow:inset 0 -1px 0 var(--dim-steel)}
.info dd a:hover{box-shadow:inset 0 -1px 0 var(--star-white)}
.info dd #mail{font-family:var(--font-din);letter-spacing:.04em}
@media (max-width:720px){.info>div{grid-template-columns:1fr;gap:var(--s4)}}

.two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:var(--s60)}

/* Constrained to a figure width. Full-bleed, the embed is a ~1320x460 light band
   across the void — by area the brightest surface on the site. */
.map{width:100%;max-width:760px;height:min(56vh,460px);border:1px solid var(--dark-gunmetal);
  border-radius:var(--radius)}

/* ============================================================
   ARTICLES (news)
   ============================================================ */

.article{max-width:740px}
.article .copy--jp+.copy--jp{margin-top:var(--s20)}
.article-notice{
  display:block;padding:var(--s20);border-left:3px solid var(--star-white);
  background:rgba(240,240,250,.08);border-radius:0 var(--radius) var(--radius) 0;
}
.article-notice strong{display:block;font-size:clamp(20px,2.4vw,24px);line-height:1.5;letter-spacing:.02em}
.article-notice>span{display:block;margin-top:var(--s10);font-size:var(--text-body-sm);color:var(--text-dim)}

/* Align article headings with the reading column. */
body.article-page .bleed--page{align-items:center}
body.article-page .bleed--page>.stack{
  width:100%;max-width:740px;margin-inline:auto;align-items:flex-start;text-align:left;
}
body.article-page h1.headline--jp{font-size:34px;line-height:1.45;text-wrap:pretty}
body.article-page .article{margin-inline:auto}
@media(max-width:600px){
  body.article-page h1.headline--jp{font-size:26px}
  .news-title-phrase{white-space:nowrap}
}
.a-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s12);
  margin-top:var(--s40);padding-top:var(--s24);border-top:1px solid var(--dark-gunmetal)}

/* News bodies carry inline links written into the content itself, so they cannot
   opt in with a class the way .copy a.inline does. Without a rule they inherit
   the body colour and lose every affordance — indistinguishable from prose. */
.article .copy a{box-shadow:inset 0 -1px 0 var(--dim-steel)}
.article .copy a:hover,.article .copy a:focus-visible{box-shadow:inset 0 -1px 0 var(--star-white)}

/* Article figure — capped at the width the source site published it at, so a
   photograph is never enlarged past its own resolution. */
.fig--article{margin:0 0 var(--s30)}
.fig--article img{max-height:none}
.fig--article figcaption{margin-top:var(--s10);text-transform:none;letter-spacing:var(--track-nano)}

/* Citation — a paper or talk quoted inside an article. Same voice as the
   publications page: the reference recedes, the DOI is a tracked label. */
.cite{
  margin:var(--s20) 0;padding:var(--s18) 0;
  border-top:1px solid var(--dark-gunmetal);border-bottom:1px solid var(--dark-gunmetal);
  font-size:var(--text-body-sm);line-height:1.8;letter-spacing:.04em;
  color:var(--text-dim);
}
/* consecutive references read as one block, not as two boxed rules */
.cite+.cite{margin-top:calc(var(--s20) * -1);border-top:0}
.cite strong{color:var(--star-white);font-weight:700}
.cite a{
  display:inline-block;margin-left:var(--s10);color:var(--star-white);
  font-size:var(--text-caption);font-weight:700;letter-spacing:var(--track-nano);
  word-break:break-all;box-shadow:inset 0 -1px 0 var(--dark-gunmetal);
}
.cite a:hover{box-shadow:inset 0 -1px 0 var(--star-white)}

/* Related links — the hairline row vocabulary, one column inside the article. */
.rellist{list-style:none;margin:0;padding:0;border-top:1px solid var(--dark-gunmetal)}
.rellist li{border-bottom:1px solid var(--dark-gunmetal)}
.rellist a{
  display:block;padding:var(--s15) 0;
  font-family:var(--font-jp);font-size:var(--text-body-sm);line-height:1.7;
  letter-spacing:var(--track-jp);transition:opacity .2s linear;
}
.rellist a:hover{opacity:.62}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  position:relative;z-index:1;
  margin-top:var(--section-gap);
  padding:var(--s30) var(--gutter);
  border-top:1px solid var(--dark-gunmetal);
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:var(--s15);
  font-size:var(--text-caption);font-weight:700;
  text-transform:uppercase;letter-spacing:var(--track-nano);
  color:var(--text-dim);
}
/* The lab mark is identity, not supporting text: full foreground colour, never
   dimmed with the surrounding legal line. */
footer .f-mark{width:96px;height:auto}
footer a:hover{color:var(--star-white)}

/* CSS-only entrance for above-the-fold type: never waits on JS */
.bleed--hero>.stack>*,.bleed--page>.stack>*{animation:voidIn .7s cubic-bezier(.22,.61,.36,1) both}
.bleed--hero>.stack>*{animation-delay:var(--d,0s)}
@keyframes voidIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .bleed--hero>.stack>*,.bleed--page>.stack>*{animation:none}
}

/* ============================================================
   REVEAL — opacity only. No motion vocabulary beyond a fade.
   ============================================================ */
.js .reveal{opacity:0;transform:translateY(10px);
  transition:opacity .6s linear var(--d,0s),transform .6s cubic-bezier(.22,.61,.36,1) var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .btn .ar{transition:none}
}

/* Keep the news heading clear of the fixed navigation. */
#news{scroll-margin-top:110px}

/* Research gallery: figures remain uncropped and in their original colours. */
.research-gallery{padding:var(--s20) var(--gutter) var(--section-gap)}
.research-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 24px;list-style:none;margin:0;padding:0}
.research-card{min-width:0}
.research-card-button{display:block;width:100%;padding:0;border:0;background:none;color:var(--star-white);font:inherit;text-align:left;cursor:pointer}
.research-card-image{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;padding:12px;background:#fff;border:1px solid var(--dark-gunmetal);transition:border-color .2s linear}
.research-card-image img{width:100%;height:100%;object-fit:contain}
.research-card-title{display:block;margin-top:16px;font-family:var(--font-jp);font-size:16px;font-weight:500;line-height:1.7;text-underline-offset:5px}
.research-card-button:hover .research-card-image{border-color:var(--star-white)}
.research-card-button:hover .research-card-title{text-decoration:underline}
.research-card-button:focus-visible{outline:2px solid var(--star-white);outline-offset:6px}
.research-detail{width:min(880px,calc(100% - 40px));max-height:calc(100svh - 48px);margin:auto;padding:28px;border:1px solid var(--dim-steel);border-radius:var(--radius);background:#0b0b0e;color:var(--star-white);overscroll-behavior:contain}
.research-detail::backdrop{background:rgba(0,0,0,.82)}
.research-detail-toolbar{display:flex;justify-content:flex-end;margin:0 0 20px}
.research-close{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--dim-steel);border-radius:var(--radius);background:none;color:inherit;font:inherit;font-size:14px;cursor:pointer}
.research-close span{font-size:24px;line-height:1}
.research-close:hover{border-color:var(--star-white)}
.research-close:focus-visible{outline:2px solid var(--star-white);outline-offset:3px}
.research-detail-image{display:flex;justify-content:center;margin:0 0 28px;padding:16px;background:#fff}
.research-detail-image img{width:auto;height:auto;max-width:100%;max-height:42svh;object-fit:contain}
.research-detail h2{margin:0 0 20px;font-family:var(--font-jp);font-size:clamp(22px,3vw,30px);line-height:1.5}
.research-detail-copy{font-family:var(--font-jp);font-size:16px;line-height:1.9}
.research-detail-copy p{margin:0 0 16px}
.research-detail-copy p:last-child{margin-bottom:0}
.research-author{margin:0 0 20px;color:var(--text-dim);font-size:14px}
html.research-modal-open{overflow:hidden}
@media(max-width:1099px){.research-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}}
@media(max-width:560px){.research-grid{grid-template-columns:1fr;gap:32px}.research-detail{padding:20px;width:calc(100% - 24px);max-height:calc(100svh - 24px)}.research-detail-image{padding:8px}}

/* Keep the shell visible; show new content only with settled font metrics. */
html.fonts-pending main{visibility:hidden}
html.is-navigating,html.is-navigating #nav a{cursor:progress}
#main:focus{outline:none}

/* Keep each student's year beside their name, separate from the degree heading. */
.people .r-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.people .r-year{font-family:var(--font-din);font-size:14px;font-weight:400;line-height:1.4;letter-spacing:.04em;color:var(--text-dim);white-space:nowrap}

/* Mobile landing: celestial scene above, title and actions near the bottom. */
@media(max-width:860px){
  body.home-page .bleed--hero{align-items:flex-end;min-height:100svh;padding-top:50svh;padding-bottom:max(40px,env(safe-area-inset-bottom))}
  body.home-page .bleed--hero>.stack{width:100%;max-width:620px}
  body.home-page .bleed--hero .headline{font-size:clamp(27px,7.2vw,48px);line-height:1.08;letter-spacing:.005em}
  body.home-page .bleed--hero .eyebrow{max-width:34em;font-size:12px;line-height:1.6}
}

/* Use the full mobile background height without following the browser toolbar. */
@media(max-width:860px){#space{bottom:auto;height:100lvh}}

.latest-news-more{margin-top:var(--s20)}

.hero-lab-name{white-space:nowrap}
@media(max-width:860px){.home-page .hero-lab-name{display:block}}

@media(max-width:860px){.home-page .hero-affiliation-separator{display:none}}

/* External destinations share a northeast arrow, including inline references. */
a[target="_blank"]::after{content:"";display:inline-block;flex-shrink:0;width:.8em;height:.8em;margin-left:.4em;vertical-align:baseline;background-color:currentColor;-webkit-mask:url('images/branding/external-link.svg') center/contain no-repeat;mask:url('images/branding/external-link.svg') center/contain no-repeat}
.btn[target="_blank"]::after,.p-links a[target="_blank"]::after{margin-left:0}