/* ==========================================================================
   π Lab — Predictive Imaging Lab, University of Greenwich
   Design system: "Bench & Detector"

   The page ground is a cool lab bench; imaging surfaces are deep detector
   panels inset into it. The accent pair (teal / copper) is the two poles of
   a compressive/tensile strain map, so the brand gradient is a real
   scientific colormap rather than decoration.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root{
  --bench:#E9EDEA;
  --bench-2:#F3F5F2;
  --surface:#FDFDFC;
  --film:#080D0E;
  --film-2:#101819;
  --film-ink:#E7EDEA;
  --ink:#0F1516;
  --ink-2:#41504F;
  --ink-3:#6E7C7A;
  --line:rgba(15,21,22,.14);
  --line-2:rgba(15,21,22,.07);
  --teal:#0E6E76;
  --teal-soft:rgba(14,110,118,.10);
  --copper:#B85C25;
  --copper-soft:rgba(184,92,37,.10);
  --r:3px;
  --nav-h:69px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bench:#080D0E;
    --bench-2:#0D1415;
    --surface:#121A1B;
    --film:#05090A;
    --film-2:#0D1516;
    --film-ink:#E7EDEA;
    --ink:#E4EBE8;
    --ink-2:#A5B3B0;
    --ink-3:#768482;
    --line:rgba(228,235,232,.15);
    --line-2:rgba(228,235,232,.07);
    --teal:#4FBEC0;
    --teal-soft:rgba(79,190,192,.12);
    --copper:#E08A45;
    --copper-soft:rgba(224,138,69,.12);
  }
}
:root[data-theme="dark"]{
  --bench:#080D0E;
  --bench-2:#0D1415;
  --surface:#121A1B;
  --film:#05090A;
  --film-2:#0D1516;
  --film-ink:#E7EDEA;
  --ink:#E4EBE8;
  --ink-2:#A5B3B0;
  --ink-3:#768482;
  --line:rgba(228,235,232,.15);
  --line-2:rgba(228,235,232,.07);
  --teal:#4FBEC0;
  --teal-soft:rgba(79,190,192,.12);
  --copper:#E08A45;
  --copper-soft:rgba(224,138,69,.12);
}

/* ---------------------------------------------------------------- base -- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 23px)}
body{
  margin:0;
  background:var(--bench);
  color:var(--ink);
  font-family:"Newsreader",Georgia,serif;
  font-optical-sizing:auto;
  font-size:19.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.display{
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-variation-settings:"wdth" 118;
  font-weight:700;
  letter-spacing:-.015em;
  line-height:1.05;
  text-wrap:balance;
  margin:0;
}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px}

.mono{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* Sized for lowercase: caps carried the old 11px, sentence case needs more. */
  font-size:14.9px;
  /* Set as written. Wide tracking is for caps, so it stays tight here. */
  letter-spacing:.02em;
  font-weight:500;
}
.wrap{max-width:1357px;margin:0 auto;padding:0 32.2px}
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--copper);color:#120A04;padding:11.5px 18.4px;border-radius:var(--r);
  font-family:"Archivo",sans-serif;font-size:16.1px;font-weight:600;text-decoration:none;
}
.skip:focus{left:13.8px;top:13.8px}

/* -------------------------------------------------------------- top bar -- */
.topbar{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb, var(--bench) 88%, transparent);
  backdrop-filter:blur(11.5px);
  border-bottom:1px solid var(--line-2);
}
.topbar-in{display:flex;align-items:center;gap:32.2px;height:var(--nav-h)}
.mark{display:flex;align-items:center;gap:12.6px;text-decoration:none;margin-right:auto}
.mark-name{
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 112;
  font-weight:700;font-size:23px;letter-spacing:-.01em;
}
.mark-name span{color:var(--teal)}
.nav{display:flex;gap:25.3px}
.nav a{
  text-decoration:none;color:var(--ink-2);
  font-family:"Archivo",sans-serif;font-size:15.5px;font-weight:500;
  font-variation-settings:"wdth" 100;
  padding:4.6px 0;border-bottom:1px solid transparent;
}
.nav a:hover{color:var(--ink);border-bottom-color:var(--copper)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--copper)}
.themebtn{
  border:1px solid var(--line);background:transparent;color:var(--ink-2);
  border-radius:var(--r);width:34.5px;height:34.5px;padding:0;cursor:pointer;
  display:grid;place-items:center;
}
.themebtn:hover{color:var(--ink);border-color:var(--ink-3)}
/* Sun and moon share one grid cell and cross-fade, so the button never
   reflows. Which one shows must mirror the theme tokens above: the stored
   choice wins, otherwise the system preference decides. */
.themebtn svg{
  grid-area:1/1;width:18.4px;height:18.4px;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:opacity .25s ease, transform .25s ease;
}
.themebtn .i-sun{opacity:1;transform:none}
.themebtn .i-moon{opacity:0;transform:rotate(90deg) scale(.4)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .themebtn .i-sun{opacity:0;transform:rotate(-90deg) scale(.4)}
  :root:not([data-theme="light"]) .themebtn .i-moon{opacity:1;transform:none}
}
:root[data-theme="dark"] .themebtn .i-sun{opacity:0;transform:rotate(-90deg) scale(.4)}
:root[data-theme="dark"] .themebtn .i-moon{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .themebtn svg{transition:none} }

/* ------------------------------------------------------ home hero panel -- */
/* The hero runs full-bleed: no inset, and square corners so the panel meets
   the viewport edges cleanly rather than showing the page behind its radius. */
.hero{padding:0}
.panel{
  position:relative;background:var(--film);border-radius:0;overflow:hidden;
  min-height:min(80vh,828px);display:flex;flex-direction:column;justify-content:flex-end;
}
.panel canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg, rgba(5,9,10,.96) 0%, rgba(5,9,10,.86) 32%, rgba(5,9,10,.10) 66%, rgba(5,9,10,0) 100%),
    linear-gradient(to top, rgba(5,9,10,.88) 0%, rgba(5,9,10,0) 46%),
    rgba(5,9,10,.24);
}
.hero-wrap{position:relative}
.hero-copy{padding:0 0 39.1px;max-width:1035px}
.eyebrow{color:#7FA8A6;margin-bottom:25.3px}
.hero h1{
  font-size:clamp(43.7px,6.1vw,89.7px);
  color:var(--film-ink);
  font-variation-settings:"wdth" 122;
  font-weight:800;
  letter-spacing:-.03em;
}
.hero h1 em{
  font-family:"Newsreader",Georgia,serif;
  font-style:italic;font-weight:400;
  letter-spacing:-.01em;
  color:#F0C79B;
}
.lede{margin-top:27.6px;max-width:56ch;font-size:21.8px;line-height:1.6;color:#B9C7C4}
.cta-row{display:flex;flex-wrap:wrap;gap:13.8px;margin-top:36.8px}
.btn{
  display:inline-flex;align-items:center;gap:10.3px;text-decoration:none;
  font-family:"Archivo",sans-serif;font-size:16.1px;font-weight:600;
  padding:13.8px 23px;border-radius:var(--r);
}
/* Pinned rather than tracking --copper: the light theme's darker copper gives
   the near-black label only 4.29:1, under the 4.5:1 floor. This is the dark
   theme's warmer value, which reads at 7.37:1 and also sits better on the
   dark hero. The --copper token is unchanged for text, rules and focus. */
.btn-a{background:#E08A45;color:#120A04}
.btn-a:hover{background:#D9752F}
.btn-b{border:1px solid rgba(231,237,234,.32);color:#DDE6E3}
.btn-b:hover{border-color:#DDE6E3;background:rgba(231,237,234,.07)}
.btn-light{border:1px solid var(--line);color:var(--ink)}
.btn-light:hover{border-color:var(--ink-3);background:var(--bench-2)}
.hud{position:relative;border-top:1px solid rgba(231,237,234,.14)}
.hud-in{
  display:flex;flex-wrap:wrap;gap:9.2px 29.9px;align-items:center;
  padding-top:13.8px;padding-bottom:13.8px;color:#87A09D;
}
.hud .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:1px}
.hud .z{margin-left:auto;font-variant-numeric:tabular-nums;color:#B9C7C4}

/* ----------------------------------------------- interior page masthead -- */
.masthead{padding:clamp(55.2px,7vw,96.6px) 0 clamp(39.1px,4vw,55.2px);border-bottom:1px solid var(--line)}
.masthead .kicker{color:var(--copper);display:block;margin-bottom:18.4px}
.masthead h1{font-size:clamp(39.1px,5.2vw,71.3px);letter-spacing:-.028em}
.masthead p{margin-top:23px;max-width:62ch;color:var(--ink-2);font-size:21.8px}

/* ------------------------------------------------------ section scaffold -- */
section{padding:clamp(64.4px,8vw,119.6px) 0}
.grid{display:grid;grid-template-columns:minmax(0,257.6px) minmax(0,1fr);gap:clamp(32.2px,5vw,73.6px)}
.rail{position:sticky;top:calc(var(--nav-h) + 32.2px);align-self:start}
.rail .kicker{color:var(--copper);display:block;margin-bottom:11.5px}
.rail p{font-size:16.7px;line-height:1.5;color:var(--ink-3);margin-top:13.8px}
.rail h2{font-size:clamp(29.9px,2.5vw,36.8px)}
h2{font-size:clamp(32.2px,3.6vw,48.3px);letter-spacing:-.025em}
.section-sub{margin-top:18.4px;max-width:62ch;color:var(--ink-2);font-size:20.7px}
.section-sub a{color:var(--teal)}

/* ------------------------------------------------------------- thesis -- */
.thesis{border-bottom:1px solid var(--line-2)}
.statement{font-size:clamp(25.3px,2.7vw,35.6px);line-height:1.4;max-width:26ch;letter-spacing:-.015em}
.thesis .sub{font-size:20.1px;line-height:1.62;color:var(--ink-2);max-width:60ch;margin-top:29.9px}
.thesis .sub:first-child{margin-top:0}
.thesis .sub + .sub{margin-top:23px}
.thesis-cols{display:grid;grid-template-columns:0.8fr 1.2fr;gap:clamp(32.2px,5vw,64.4px)}

/* -------------------------------------------------------- instruments -- */
.instruments{
  display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
.inst{
  background:var(--surface);padding:29.9px 27.6px;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,276px);gap:27.6px;align-items:start;
}
.inst h3{font-size:21.8px;font-variation-settings:"wdth" 110;letter-spacing:-.01em}
.inst .vendor{color:var(--ink-3);margin-top:9.2px}
.inst p{color:var(--ink-2);font-size:19px;margin-top:11.5px;max-width:56ch}
.specs{display:flex;flex-direction:column;gap:8px}
.spec{display:flex;justify-content:space-between;gap:16.1px;border-bottom:1px dotted var(--line);padding-bottom:6.9px}
.spec b{color:var(--ink-3);font-weight:500}
.spec span{color:var(--ink);font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:.02em}
.flag{
  display:inline-block;margin-top:16.1px;padding:4.6px 10.3px;border-radius:2px;
  background:var(--copper-soft);color:var(--copper);
}

/* -------------------------------------------------------------- models -- */
.models{display:flex;flex-direction:column}
.model{
  display:grid;grid-template-columns:minmax(0,193.2px) minmax(0,1fr) minmax(0,241.5px);
  gap:29.9px;align-items:baseline;
  padding:29.9px 0;border-top:1px solid var(--line);
}
.model:last-child{border-bottom:1px solid var(--line)}
.model-name{
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 115;
  font-weight:700;font-size:25.3px;letter-spacing:-.02em;
}
.model-name .tag{display:block;margin-top:8px;color:var(--teal)}
.model p{color:var(--ink-2);font-size:19.5px}
.doi{
  text-decoration:none;color:var(--ink-3);display:block;text-align:right;overflow-wrap:anywhere;
  text-transform:none;letter-spacing:.02em;
}
.doi:hover{color:var(--copper)}
.doi .venue{
  display:block;color:var(--ink);text-transform:none;letter-spacing:0;
  font-family:"Newsreader",serif;font-size:17.2px;margin-bottom:5.8px;
  overflow-wrap:normal;text-wrap:balance;
}

/* ------------------------------------------------------------ projects -- */
.projects{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(299px,100%),1fr));gap:23px;
}
.proj{
  background:var(--surface);display:flex;flex-direction:column;transition:background .25s;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
.proj:hover{background:var(--bench-2)}
.proj-img{aspect-ratio:16/9;background:var(--film);position:relative;overflow:hidden}
.proj-img canvas{width:100%;height:100%;display:block}
.proj-img img{
  width:100%;height:100%;display:block;object-fit:cover;
  /* the source illustrations are far more saturated than the palette;
     damping them keeps the card grid reading as one system */
  filter:saturate(.72) contrast(1.04) brightness(.86);
  transition:filter .3s, transform .5s cubic-bezier(.2,.7,.3,1);
}
.proj:hover .proj-img img{filter:saturate(1) contrast(1) brightness(1);transform:scale(1.03)}
.proj-body{padding:23px 25.3px 27.6px;display:flex;flex-direction:column;gap:13.8px;flex:1}
.proj h3{font-size:20.1px;font-variation-settings:"wdth" 108;letter-spacing:-.01em;line-height:1.2}
.proj p{color:var(--ink-2);font-size:18.4px;flex:1}
.lead{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4.6px 10.3px;color:var(--ink-3);
  padding-top:13.8px;border-top:1px solid var(--line-2);
}
.lead b{color:var(--ink);font-weight:500;letter-spacing:.04em}

/* project detail rows (projects page) */
.proj-row{
  display:grid;grid-template-columns:minmax(0,345px) minmax(0,1fr);gap:clamp(23px,3vw,46px);
  padding:39.1px 0;border-top:1px solid var(--line);align-items:start;
}
.proj-row:first-child{border-top:0}
.proj-row:last-child{border-bottom:1px solid var(--line)}
.proj-row .media{background:var(--film);border-radius:var(--r);overflow:hidden;aspect-ratio:16/9}
.proj-row .media img{width:100%;height:100%;display:block;object-fit:cover;filter:saturate(.72) contrast(1.04) brightness(.86);transition:filter .3s}
.proj-row:hover .media img{filter:none}
.media canvas{width:100%;height:100%;display:block}
.proj-row h3{font-size:25.3px;font-variation-settings:"wdth" 112;letter-spacing:-.018em;text-wrap:pretty}
.proj-row p{color:var(--ink-2);margin-top:16.1px;text-wrap:pretty}
.meta-row{display:flex;flex-wrap:wrap;gap:11.5px;margin-top:20.7px}
.pill{
  border:1px solid var(--line);border-radius:100px;padding:5.8px 13.8px;
  color:var(--ink-3);background:var(--surface);
}
.pill b{color:var(--ink);font-weight:500}

/* ------------------------------------------------------------- chips -- */
.underway{display:flex;flex-wrap:wrap;gap:9.2px}
.chip{
  border:1px solid var(--line);border-radius:100px;padding:9.2px 17.2px;
  font-size:16.7px;color:var(--ink-2);background:var(--surface);
}
.chip:hover{border-color:var(--teal);color:var(--ink)}

/* ------------------------------------------------------------- people -- */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(193.2px,100%),1fr));gap:25.3px}
.person{display:flex;flex-direction:column;gap:13.8px}
.avatar{aspect-ratio:1;background:var(--film);border-radius:var(--r);overflow:hidden}
.avatar canvas{width:100%;height:100%;display:block}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar.ph-slot{background:var(--line-2)}
.avatar .ph{width:100%;height:100%;display:block;color:var(--ink-3);opacity:.5}
.avatar .ph use{fill:currentColor}
svg.sprite{position:absolute;width:0;height:0;overflow:hidden}
.person h3{font-size:19px;font-variation-settings:"wdth" 106;letter-spacing:-.005em}
.person .role{color:var(--ink-3);margin-top:5.8px}
.person .links{margin-top:9.2px;display:flex;gap:13.8px}
.person .links a{color:var(--teal);text-decoration:none;font-size:13.8px}
.person .links a:hover{text-decoration:underline}

.roster{display:flex;flex-direction:column;gap:0}
.roster-row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,161px);
  gap:25.3px;padding:20.7px 0;border-top:1px solid var(--line);align-items:baseline;
}
.roster-row:last-child{border-bottom:1px solid var(--line)}
.roster-row h3{font-size:19.5px;font-variation-settings:"wdth" 106}
.roster-row p{color:var(--ink-2);font-size:18.4px}
.roster-row .aff{color:var(--ink-3);text-align:right}
.roster-row .links{margin-top:6.9px;display:flex;gap:13.8px}
.roster-row .links a{color:var(--teal);text-decoration:none;font-size:13.8px}
.roster-row .links a:hover{text-decoration:underline}

/* ------------------------------------------------------- publications -- */
.pubyear{
  display:flex;align-items:baseline;gap:16.1px;
  margin:50.6px 0 4.6px;padding-bottom:11.5px;border-bottom:1px solid var(--line);
}
.pubyear h3{font-size:29.9px;font-variation-settings:"wdth" 118;letter-spacing:-.02em}
.pubyear span{color:var(--ink-3)}
.pub{padding:23px 0;border-bottom:1px solid var(--line-2)}
.pub h4{font-size:20.1px;font-variation-settings:"wdth" 104;line-height:1.32;letter-spacing:-.008em;text-wrap:pretty}
.pub .authors{color:var(--ink-2);font-size:17.8px;margin-top:8px}
.pub .authors b{color:var(--ink);font-weight:600}
.pub .venue{color:var(--ink-3);margin-top:8px;font-style:italic;font-size:17.8px}
/* The DOI sits inline, just ahead of the venue, rather than in a column of
   its own. Upright and teal so it reads as the link among the italics. */
.pub .venue .doi-inline{
  color:var(--teal);text-decoration:none;font-style:normal;
  margin-right:13.8px;
}
.pub .venue .doi-inline:hover{color:var(--copper);text-decoration:underline}

/* --------------------------------------------------------------- news -- */
.newslist{display:flex;flex-direction:column}
.newsitem{
  display:grid;grid-template-columns:minmax(0,172.5px) minmax(0,1fr);gap:29.9px;
  padding:29.9px 0;border-top:1px solid var(--line);align-items:start;
}
.newsitem:last-child{border-bottom:1px solid var(--line)}
.newsitem time{color:var(--ink-3);font-variant-numeric:tabular-nums}
.newsitem h3{font-size:21.8px;font-variation-settings:"wdth" 108;letter-spacing:-.012em}
.newsitem p{color:var(--ink-2);margin-top:11.5px;max-width:62ch;font-size:19px}
.newsitem .links{display:flex;flex-wrap:wrap;gap:16.1px;margin-top:13.8px}
.newsitem .links a{color:var(--teal);text-decoration:none}
.newsitem .links a:hover{color:var(--copper)}

.notice{
  border:1px solid var(--line);border-left:3px solid var(--copper);
  border-radius:var(--r);background:var(--surface);padding:32.2px 34.5px;
}
.notice h3{font-size:27.6px;font-variation-settings:"wdth" 112;letter-spacing:-.02em}
.notice p{color:var(--ink-2);margin-top:16.1px;max-width:62ch}
.notice .meta{
  display:flex;flex-wrap:wrap;gap:23px;margin-top:23px;
  padding-top:20.7px;border-top:1px solid var(--line-2);color:var(--ink-3);
}
.notice .meta b{color:var(--copper);font-weight:500}

/* ---------------------------------------------------------- join panel -- */
/* The panel follows the theme rather than staying dark: these tokens flip
   with it, so it reads as a raised surface in light mode and a deep one in
   dark. btn-b is drawn for a dark ground, so it is restated here to match. */
.join{
  background:var(--bench-2);border-radius:var(--r);padding:clamp(41.4px,6vw,82.8px);
  margin:0 16.1px;color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line);
}
.join h2{color:var(--ink);font-size:clamp(34.5px,4.4vw,59.8px)}
.join p{color:var(--ink-2);max-width:56ch;margin-top:23px;font-size:21.3px}
.join .cta-row{margin-top:36.8px}
.join .btn-b{border:1px solid var(--line);color:var(--ink)}
.join .btn-b:hover{border-color:var(--ink-3);background:var(--bench)}

/* contact / openings */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(287.5px,100%),1fr));gap:23px}
.card{
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  padding:27.6px 27.6px 29.9px;display:flex;flex-direction:column;gap:11.5px;
}
.card h3{font-size:20.7px;font-variation-settings:"wdth" 108}
.card p{color:var(--ink-2);font-size:18.4px}
.card .who{color:var(--ink-3);margin-top:auto;padding-top:16.1px;border-top:1px solid var(--line-2)}
.contact-list{display:flex;flex-direction:column;gap:16.1px}
.contact-list div{border-bottom:1px solid var(--line-2);padding-bottom:16.1px}
.contact-list .lbl{color:var(--ink-3);display:block;margin-bottom:6.9px}
.contact-list a{color:var(--teal);text-decoration:none}
.contact-list a:hover{color:var(--copper)}

/* ------------------------------------------------------------- footer -- */
footer{border-top:1px solid var(--line);background:var(--bench-2);padding:59.8px 0 50.6px}
.foot-grid{
  display:grid;grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr));
  gap:41.4px;padding-bottom:36.8px;border-bottom:1px solid var(--line-2);
}
.foot-about p{color:var(--ink-2);font-size:18.4px;margin-top:16.1px;max-width:44ch}
.foot-col h4{font-size:16.1px;color:var(--ink-3);margin-bottom:16.1px;
  font-family:"IBM Plex Mono",monospace;letter-spacing:.02em;font-weight:500}
.foot-col a{
  display:block;text-decoration:none;color:var(--ink-2);
  font-size:17.8px;padding:5.8px 0;
}
.foot-col a:hover{color:var(--ink)}
.foot-base{
  display:flex;flex-wrap:wrap;gap:20.7px;align-items:baseline;
  justify-content:space-between;padding-top:29.9px;color:var(--ink-3);font-size:16.7px;
}

/* ------------------------------------------------------------ reveals -- */
.rv{
  opacity:0;transform:translateY(16.1px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1);
}
.rv.in{opacity:1;transform:none}

/* ---------------------------------------------------------- responsive -- */
@media (max-width:990px){
  .grid{grid-template-columns:1fr;gap:27.6px}
  .rail{position:static}
  .thesis-cols{grid-template-columns:1fr}
  .inst{grid-template-columns:1fr}
  .model{grid-template-columns:1fr;gap:13.8px}
  .doi{text-align:left}
  .proj-row{grid-template-columns:1fr}
  .roster-row{grid-template-columns:1fr;gap:9.2px}
  .roster-row .aff{text-align:left}
  .newsitem{grid-template-columns:1fr;gap:11.5px}
  .foot-grid{grid-template-columns:1fr;gap:32.2px}
  /* The vertical padding is the only thing this needs to add; keeping the
     shorthand's horizontal value at the .wrap gutter stops the bar from
     running to the screen edges. */
  .topbar-in{height:auto;flex-wrap:wrap;padding:11.5px 32.2px;gap:11.5px 20.7px}
  /* Too many links for one row on a phone, so they wrap and centre rather
     than sliding off the edge in a scroller nothing signals is scrollable. */
  .nav{width:100%;order:3;flex-wrap:wrap;justify-content:center;gap:9.2px 18.4px}
  .nav a{white-space:nowrap}
  .join{margin:0 11.5px}
  .scrim{background:
    linear-gradient(to top, rgba(5,9,10,.94) 30%, rgba(5,9,10,.55) 70%, rgba(5,9,10,.25) 100%),
    rgba(5,9,10,.30)}
}
/* Below ~476px auto-fit cannot place two 193.2px tracks and collapses to one,
   giving a full-width portrait per person. Tablets still auto-fit 3 or more. */
@media (max-width:480px){
  .people{grid-template-columns:repeat(2,1fr);gap:18.4px}
}
/* ------------------------------------------------------- mobile drawer -- */
/* The six links stop fitting one row at 500px, and .topbar is sticky, so a
   wrapped nav would hold roughly a seventh of a phone screen for the whole
   scroll. Below 560px they move into an off-canvas panel instead. The button
   needs site.js, so if that never runs the footer carries a full set of links
   as the fallback. Breakpoint is mirrored by DRAWER_MAX in site.js. */
.navbtn{display:none}
.navscrim{display:none}

@media (max-width:560px){
  .navbtn{
    display:grid;place-items:center;
    border:1px solid var(--line);background:transparent;color:var(--ink-2);
    border-radius:var(--r);width:34.5px;height:34.5px;padding:0;cursor:pointer;
  }
  .navbtn:hover{color:var(--ink);border-color:var(--ink-3)}
  /* Bars and cross share one grid cell and cross-fade, so the button never
     reflows as the panel opens. */
  .navbtn svg{
    grid-area:1/1;width:18.4px;height:18.4px;
    fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;
    transition:opacity .2s ease, transform .2s ease;
  }
  .navbtn .i-x{opacity:0;transform:rotate(-90deg) scale(.5)}
  .nav-open .navbtn .i-bars{opacity:0;transform:rotate(90deg) scale(.5)}
  .nav-open .navbtn .i-x{opacity:1;transform:none}

  .topbar-in{flex-wrap:nowrap;gap:11.5px}
  /* backdrop-filter makes .topbar a containing block for fixed-position
     descendants, which would anchor the drawer to the bar instead of the
     viewport and crop it to the bar's height. The bar goes solid here so the
     panel can position against the viewport. */
  .topbar{backdrop-filter:none;background:var(--bench)}
  /* Above the scrim, so the bar stays lit while the panel is open. */
  .nav-open .topbar{z-index:70}
  /* The panel is a child of .topbar, so it shares that stacking context and
     would otherwise paint over its own close button. */
  .themebtn,.navbtn{position:relative;z-index:80}

  .navscrim{
    display:block;position:fixed;inset:0;z-index:50;
    background:rgba(5,9,10,.5);
    opacity:0;pointer-events:none;transition:opacity .32s ease;
  }
  .nav-open .navscrim{opacity:1;pointer-events:auto}

  .nav{
    position:fixed;top:0;right:0;bottom:0;left:auto;z-index:60;
    width:min(78vw,300px);
    flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;
    align-items:stretch;gap:0;
    padding:69px 27.6px 27.6px;
    background:var(--bench-2);border-left:1px solid var(--line);
    overflow-y:auto;overscroll-behavior:contain;
    transform:translateX(100%);
    /* visibility keeps the closed panel out of the tab order and the
       accessibility tree; it flips back only once the slide-out has run. */
    visibility:hidden;
    transition:transform .32s cubic-bezier(.2,.7,.3,1), visibility 0s linear .32s;
  }
  .nav-open .nav{
    transform:none;visibility:visible;
    transition:transform .32s cubic-bezier(.2,.7,.3,1), visibility 0s;
  }
  .nav a{
    font-size:19.5px;padding:13.8px 2px;
    border-bottom:1px solid var(--line-2);
  }
  .nav-open body{overflow:hidden}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}


/* ---------- photographic plates ---------- */
.plate{
  position:relative;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--film);margin-bottom:32.2px;
}
.plate img{width:100%;display:block}
.plate figcaption{
  display:flex;flex-wrap:wrap;gap:6.9px 20.7px;align-items:baseline;
  padding:13.8px 18.4px;background:var(--surface);border-top:1px solid var(--line);
  color:var(--ink-3);
}
.plate figcaption b{color:var(--ink);font-weight:500}
.plate-inline{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,368px);gap:27.6px;align-items:start}
@media (max-width:990px){.plate-inline{grid-template-columns:1fr}}