/* ============================================================
   SWISS / INTERNATIONAL TYPOGRAPHIC STYLE — multi-page edition
   One face (Archivo), two inks (#000/#fff), hierarchy through
   size, weight, tracking, and hairline rules. Content runs the
   full width of the container; there is no label rail.
   ============================================================ */

:root{
  --ink:        #000000;
  --paper:      #ffffff;
  --mute:       #555555;   /* secondary text on white — 7.4:1  */
  --meta:       #6b6b6b;   /* tertiary meta on white — 5.4:1   */
  --rule:       #000000;   /* structural hairlines             */
  --rule-soft:  #d8d8d8;   /* repeated row hairlines           */
  --inv-mute:   #9a9a9a;   /* secondary text on black — 7.4:1  */
  --inv-rule:   #3a3a3a;
  --pad-x:      clamp(1rem, 2.5vw, 2rem);
  --wrap:       1640px;
  --header-h:   3.5rem;
  --key-col:    7rem;      /* shared key column: news dates, pub numbers,
                              contact keys, experience dates            */
  --size-mid:   clamp(1.0625rem, 1.6vw, 1.1875rem);
}

/* dark theme: the two inks swap, and the inverted contact block flips back.
   Light is the default; the toggle in the nav sets data-theme on <html>. */
html[data-theme="dark"]{
  color-scheme:dark;
  --ink:        #ffffff;
  --paper:      #000000;
  --mute:       #b5b5b5;   /* secondary text on black — 11:1  */
  --meta:       #9a9a9a;   /* tertiary meta on black — 7.4:1  */
  --rule:       #ffffff;
  --rule-soft:  #3a3a3a;
  --inv-mute:   #555555;
  --inv-rule:   #d8d8d8;
  --plate-ink:  #f2f2f2;
  --plate-line: rgba(0,0,0,0.35);
}

*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
  display:flex; flex-direction:column;
  transition:background-color .2s ease, color .2s ease;
}
main{ flex:1 0 auto; }

::selection{ background:var(--ink); color:var(--paper); }
.contact-block ::selection{ background:var(--paper); color:var(--ink); }

a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid currentColor; outline-offset:3px; }

img{ max-width:100%; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad-x); }

/* ---------- micro-label: the small-caps voice of the site ---------- */
.label{
  font-size:0.6875rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.22em;
  line-height:1.4;
}

/* ---------- skip link ---------- */
.skip{
  position:absolute; left:var(--pad-x); top:-4rem; z-index:100;
  background:var(--ink); color:var(--paper);
  padding:0.6rem 1rem; font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase;
  transition:top .15s ease;
}
.skip:focus{ top:0.75rem; }

/* ---------- header / nav ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.nav-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem 2rem; flex-wrap:wrap;
  min-height:var(--header-h); padding-block:0.75rem;
}
.brand{ font-weight:600; }
.brand .label{ letter-spacing:0.18em; }
nav ul{
  list-style:none;
  display:flex; flex-wrap:wrap; gap:0.6rem 1.6rem;
}
nav a{
  display:inline-block; padding-block:0.2rem;
  text-decoration:underline transparent 1px;
  text-underline-offset:6px;
  transition:text-decoration-color .15s ease;
}
nav a:hover{ text-decoration-color:var(--ink); }
nav a[aria-current="page"]{ text-decoration-color:var(--ink); font-weight:600; }

/* theme toggle: moon in light mode, sun in dark mode */
.theme-toggle{
  background:none; border:0; padding:0.2rem; margin:0; cursor:pointer;
  color:inherit; display:inline-flex; align-items:center; vertical-align:middle;
  transition:opacity .15s ease;
}
.theme-toggle:hover{ opacity:0.6; }
.theme-toggle svg{ width:1.1rem; height:1.1rem; display:block; }
.theme-toggle .sun{ display:none; }
html[data-theme="dark"] .theme-toggle .sun{ display:block; }
html[data-theme="dark"] .theme-toggle .moon{ display:none; }

/* ---------- page head (sub-pages) ---------- */
.page-head{
  display:flex; align-items:baseline; gap:1rem;
  padding-block:clamp(1.25rem, 2.5vw, 2rem) 0.9rem;
  border-bottom:1px solid var(--rule);
}
.page-head .idx{
  font-size:0.6875rem; font-weight:600; letter-spacing:0.08em;
  font-variant-numeric:tabular-nums;
  color:var(--meta);
}
.page-head h1, .page-head h2{
  font-size:clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight:600; line-height:1.1; letter-spacing:-0.02em;
}
/* a section head that follows other content on the same page */
.page-head.sub{ border-top:1px solid var(--rule); margin-top:1rem; }
.content{ padding-block:0 3rem; }
.content.avail{ padding-top:1.5rem; }

/* ---------- home / hero ---------- */
/* the About block is the whole first screen; research sits below the fold */
.hero{
  padding-block:clamp(1rem, 2vh, 2rem) 0.75rem;
  /* fill the first screen, but never stretch past 1400px on very tall displays */
  min-height:min(calc(100vh - var(--header-h)), 1400px);
  display:flex; flex-direction:column;
}
#research{ scroll-margin-top:calc(var(--header-h) + 1rem); }

/* scroll cue: an arrow pinned to the bottom of the first screen */
.scroll-cue{
  margin-top:auto; align-self:center;
  padding:clamp(0.75rem, 1.6vh, 1.5rem) 1rem 0.25rem;
  color:var(--ink);
}
.scroll-cue svg{
  width:2.5rem; height:2.5rem; display:block;
  fill:none; stroke:currentColor; stroke-width:1.6;
  animation:cue-bounce 1.6s ease-in-out infinite;
}
@keyframes cue-bounce{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(9px); } }

/* research reveals as it scrolls into view; only when the script runs */
html.js .reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
html.js .reveal.in{ opacity:1; transform:none; }

.hero-meta{
  display:flex; justify-content:space-between; gap:0.5rem 2rem; flex-wrap:wrap;
  padding-bottom:0.9rem; border-bottom:1px solid var(--rule);
}
.hero-meta .label{ font-size:0.8125rem; }
.hero-meta .label:last-child{ color:var(--mute); margin-right:-0.22em; }

/* name row: the name at a display size that sits with the rest of the page,
   one line, with the GitHub, Scholar and LinkedIn marks at the row's right end */
.name-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:0.75rem 2rem; flex-wrap:wrap;
  padding-block:clamp(0.8rem, 2vh, 1.75rem) clamp(0.6rem, 1.6vh, 1.4rem);
}
h1.name{
  font-size:clamp(2rem, min(4.6vw, 7.2vh), 4.25rem);  /* scales with screen height too */
  font-weight:600;
  line-height:1;
  letter-spacing:-0.025em;
  text-transform:uppercase;
  white-space:nowrap;
}
h1.name .l{ display:inline; }
.social{ list-style:none; display:flex; align-items:center; gap:1rem; }
.social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.6rem; height:2.6rem;
  color:var(--ink);
  transition:opacity .15s ease;
}
.social a:hover{ opacity:0.5; }
.social svg{ width:2.125rem; height:2.125rem; display:block; fill:currentColor; }

/* a row = small-caps label above full-width content, on a hairline */
.row{
  border-top:1px solid var(--rule);
  padding-block:clamp(0.7rem, 1.4vh, 1rem) clamp(0.9rem, 1.9vh, 1.4rem);
}
.row > .label{ display:block; color:var(--meta); margin-bottom:0.7rem; font-size:0.8125rem; }

.tagline{
  font-size:clamp(1.2rem, min(2.1vw, 3.3vh), 1.9rem);
  font-weight:500;
  line-height:1.4;
}
.tagline .sep{ color:var(--meta); padding-inline:0.25em; font-weight:400; }

/* availability: sentence left, action chips pinned to the right end of the row */
.avail{ display:grid; grid-template-columns:minmax(0, 1fr) auto; column-gap:3rem; align-items:end; }
.avail > .label{ grid-column:1 / -1; }
.avail p{ grid-column:1; font-weight:500; }
.avail .chips{ grid-column:2; margin-top:0; }
.hero .avail p{ font-size:clamp(1.05rem, min(1.5vw, 2.4vh), 1.4rem); line-height:1.5; }
.hero .chip{ font-size:0.8125rem; padding:0.45rem 0.9rem; }
.avail a, .bio a, .exp-list a{
  text-decoration:underline solid var(--ink) 1px;
  text-underline-offset:4px;
}
.avail a:hover, .bio a:hover, .exp-list a:hover{ text-decoration-thickness:2px; }
/* hero grid: the portrait fills the left column and stretches to the height
   of the three rows beside it, so the block is solid from edge to edge */
.hero-grid{
  flex:1 1 auto;                       /* take the rest of the first screen */
  display:grid;
  grid-template-columns:clamp(220px, min(40vh, 32%), 520px) minmax(0, 1fr);
  column-gap:3rem;
  align-items:stretch;
}
/* the three rows share the block's height as equal bands, content centred,
   so the screen is filled with no gap left at the bottom */
.hero-rows{ min-width:0; display:flex; flex-direction:column; }
.hero-rows .row{ flex:1 1 0; display:flex; flex-direction:column; justify-content:center; }
.hero-rows .avail{ display:grid; align-content:center; }
.bio p{ font-size:clamp(1.05rem, min(1.6vw, 2.6vh), 1.5rem); line-height:1.5; }
.bio .aff{ font-weight:600; }

.portrait{ margin:0; position:relative; min-height:200px; }
.portrait-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center top;
  display:block;
}

/* ---------- news ---------- */
.news-list{ list-style:none; }
.news-list li{
  display:grid;
  grid-template-columns:5.5rem 1fr;   /* "Oct 2026" with tracking */
  column-gap:1.5rem;
  padding-block:1.05rem;
  border-bottom:1px solid var(--rule-soft);
}
.news-list time{
  font-size:0.75rem; font-weight:500;
  text-transform:uppercase; letter-spacing:0.16em;
  font-variant-numeric:tabular-nums;
  color:var(--mute);
  padding-top:0.2rem;
}
.news-list p{ max-width:none; }
.news-list .hl{ font-weight:600; }

/* ---------- chips (shared) ---------- */
.chips{ margin-top:1rem; display:flex; flex-wrap:wrap; gap:0.5rem; }
.chip{
  display:inline-block;
  border:1px solid var(--ink);
  padding:0.32rem 0.7rem;
  font-size:0.6875rem; font-weight:500;
  text-transform:uppercase; letter-spacing:0.16em;
  transition:background-color .15s ease, color .15s ease;
}
.chip:hover{ background:var(--ink); color:var(--paper); }
.chip:focus-visible{ outline-offset:2px; }

/* ---------- research: one block per first-author paper ---------- */
/* each project is a grid: index and title span the row; venue + links sit in a
   left column beside the description, which fills the rest as two text columns;
   the gallery spans the full row beneath */
.project{
  display:grid;
  grid-template-columns:minmax(16rem, 22%) minmax(0, 1fr);
  grid-template-areas:
    "idx     idx"
    "title   title"
    "venue   desc"
    "chips   desc"
    "gallery gallery";
  column-gap:3rem;
  align-content:start;
  padding-block:1.6rem 2rem;
  border-bottom:1px solid var(--rule-soft);
}
.project:last-child{ border-bottom:0; }
.project .idx{
  grid-area:idx;
  display:block;
  font-size:0.6875rem; font-weight:500; letter-spacing:0.14em;
  font-variant-numeric:tabular-nums;
  color:var(--meta);
  margin-bottom:0.7rem;
}
.project h3{
  grid-area:title;
  font-size:clamp(1.125rem, 1.7vw, 1.375rem);
  font-weight:600; line-height:1.3; letter-spacing:-0.01em;
  margin-bottom:0.8rem;
}
.project .venue{
  grid-area:venue;
  font-size:0.6875rem; font-weight:500;
  text-transform:uppercase; letter-spacing:0.16em;
  line-height:1.6;
}
.project .venue .note{ color:var(--meta); }
.project .desc{
  grid-area:desc;
  font-size:1rem; color:var(--mute);
}
.project .chips{ grid-area:chips; align-self:start; margin-top:0.9rem; }
.project > .gallery, .project > .galleries{ grid-area:gallery; }

/* grouped galleries (Dance2Hesitate): a small label above each group */
.gallery-label{
  margin-top:1.4rem; margin-bottom:0.6rem;
  font-size:0.6875rem; font-weight:600;
  text-transform:uppercase; letter-spacing:0.18em;
  color:var(--ink);
}
.galleries .gallery{ margin-top:0; }
.gallery[data-cols="2"]{ grid-template-columns:repeat(2, 1fr); }
.gallery[data-cols="4"]{ grid-template-columns:repeat(4, 1fr); }

/* gallery: full container width, tiles as large as the row allows.
   Clips autoplay muted and loop. A small script pauses the ones that are
   scrolled out of view so only the visible rows decode. */
.gallery{
  margin-top:1.25rem;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:1.25rem;
}
.gallery[data-cols="3"]{ grid-template-columns:repeat(auto-fill, minmax(380px, 1fr)); }
.clip{ margin:0; }
.clip video{
  display:block; width:100%;
  aspect-ratio:16 / 9;
  object-fit:contain;
  background:var(--paper);
  border:1px solid var(--rule-soft);
}
.gallery[data-ratio="1"]   .clip video{ aspect-ratio:1 / 1; }
.gallery[data-ratio="4-3"] .clip video{ aspect-ratio:4 / 3; }
.clip figcaption{
  margin-top:0.45rem;
  font-size:0.6875rem; text-transform:uppercase; letter-spacing:0.14em;
  color:var(--meta);
}

/* ---------- publications ---------- */
.pub-list{ list-style:none; counter-reset:pub; }
.pub{
  display:grid;
  grid-template-columns:2.75rem 220px minmax(0, 1fr);  /* counter, thumbnail, text */
  column-gap:1.5rem;
  padding-block:1.6rem;
  border-bottom:1px solid var(--rule-soft);
}
/* thumbnail: the paper's first figure at its own proportions, nothing cropped */
.pub-thumb{
  grid-column:2;
  display:block; width:100%; height:auto;
  border:1px solid var(--rule-soft);
  background:var(--paper);
}
.pub::before{
  counter-increment:pub;
  content:counter(pub, decimal-leading-zero);
  font-size:0.75rem; font-weight:500; letter-spacing:0.08em;
  font-variant-numeric:tabular-nums;
  color:var(--meta);
  padding-top:0.35rem;
}
/* ledger layout: title / authors / venue on the left, summary + links on the right */
.pub > div{
  grid-column:3;
  display:grid;
  grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-areas:
    "title   tldr"
    "authors tldr"
    "venue   chips";
  column-gap:3rem;
  align-content:start;
}
.pub h3{
  grid-area:title;
  font-size:var(--size-mid);
  font-weight:600; line-height:1.35; letter-spacing:-0.01em;
}
.pub .authors{ grid-area:authors; margin-top:0.55rem; font-size:0.875rem; color:var(--mute); }
.pub .authors .me{ font-weight:700; color:var(--ink); }
.pub .venue{
  grid-area:venue;
  margin-top:0.45rem;
  font-size:0.6875rem; font-weight:500;
  text-transform:uppercase; letter-spacing:0.16em;
  color:var(--ink);
}
.pub .venue .note{ color:var(--meta); }
.pub .tldr{ grid-area:tldr; font-size:0.875rem; color:var(--mute); }
.pub .chips{ grid-area:chips; align-self:end; margin-top:0.6rem; }

.pub-foot{
  display:flex; justify-content:space-between; gap:0.75rem 2rem; flex-wrap:wrap;
  padding-top:1.1rem;
  font-size:0.75rem; letter-spacing:0.06em; color:var(--meta);
}
.pub-foot a{
  color:var(--ink); font-weight:500;
  text-decoration:underline solid var(--ink) 1px; text-underline-offset:4px;
}
.pub-foot a:hover{ text-decoration-thickness:2px; }

/* ---------- contact page ---------- */
.contact-block{
  background:var(--ink);
  color:var(--paper);
  padding-block:clamp(2rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem);
}
.contact-list{ list-style:none; border-top:1px solid var(--paper); }
.contact-list li{ border-bottom:1px solid var(--inv-rule); }
.contact-list a{
  display:grid;
  grid-template-columns:6.5rem 1fr auto;  /* "LINKEDIN" */
  column-gap:1.5rem;
  align-items:baseline;
  padding-block:1.15rem;
}
.contact-list .k{
  font-size:0.6875rem; font-weight:500;
  text-transform:uppercase; letter-spacing:0.2em;
  color:var(--inv-mute);
}
.contact-list .v{
  font-size:clamp(1rem, 1.8vw, 1.25rem); font-weight:500;
  text-decoration:underline transparent 1px; text-underline-offset:5px;
  transition:text-decoration-color .15s ease;
}
.contact-list .arrow{
  font-size:0.875rem; color:var(--inv-mute);
  transition:transform .15s ease, color .15s ease;
}
.contact-list a:hover .v{ text-decoration-color:var(--paper); }
.contact-list a:hover .arrow{ transform:translate(0.15em, -0.15em); color:var(--paper); }

/* ---------- site footer (every page, one line) ---------- */
.site-foot{
  margin-top:auto;
  border-top:1px solid var(--rule);
  padding-block:0.9rem 1.2rem;
  display:flex; justify-content:space-between; gap:0.4rem 2rem; flex-wrap:wrap;
  font-size:0.6875rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--meta);
}
.site-foot a{ text-decoration:underline transparent 1px; text-underline-offset:4px; }
.site-foot a:hover{ text-decoration-color:var(--ink); color:var(--ink); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px){
  /* four marks still fit beside the name on a 1024px screen */
  h1.name{ font-size:clamp(2rem, min(4.2vw, 7.2vh), 4.25rem); }
  .name-row{ gap:0.75rem 1.25rem; }
  .social{ gap:0.75rem; }
  .social a{ width:2.25rem; height:2.25rem; }
  .social svg{ width:1.75rem; height:1.75rem; }
}

@media (max-width: 900px){
  .hero-grid{ grid-template-columns:clamp(160px, 24%, 240px) minmax(0, 1fr); column-gap:2rem; }
  .avail{ display:block; }
  .avail .chips{ margin-top:0.9rem; }
  .project{
    grid-template-columns:1fr;
    grid-template-areas:"idx" "title" "venue" "desc" "chips" "gallery";
  }
  .project .desc{ margin-top:0.6rem; }
  .pub > div{ display:block; }
  .pub .tldr{ margin-top:0.6rem; }
  /* three wide columns no longer fit; two is better than one giant tile */
  .gallery[data-cols="3"]{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width: 760px){
  header{ position:static; }
  .hero-meta{ display:block; }
  .hero-meta .label{ display:block; }
  .hero-meta .label + .label{ margin-top:0.35rem; }

  .hero-grid{ grid-template-columns:1fr; flex:0 0 auto; }
  .hero-rows .row{ flex:0 0 auto; }
  .portrait{ order:2; max-width:280px; aspect-ratio:3 / 4; min-height:0; margin-top:1rem; }
  .news-list li{ grid-template-columns:5.5rem 1fr; column-gap:1rem; }
  .pub{ grid-template-columns:2.5rem 1fr; column-gap:1rem; row-gap:0.9rem; }
  .pub-thumb{ grid-column:2; max-width:280px; }
  .pub > div{ grid-column:2; }
  .contact-list a{ grid-template-columns:6.5rem 1fr auto; column-gap:1rem; }
  .contact-list .v{ overflow-wrap:anywhere; }

  .gallery, .gallery[data-cols="2"], .gallery[data-cols="3"], .gallery[data-cols="4"]{
    grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:0.8rem;
  }
}

@media (max-width: 600px){
  /* the one-line name no longer fits beside the marks, so let it wrap here */
  h1.name{ white-space:normal; font-size:clamp(1.75rem, 8.5vw, 2.4rem); line-height:0.98; }
  h1.name .l{ display:block; }
}

@media (max-width: 430px){
  nav ul{ gap:0.5rem 1.1rem; }
  .news-list li{ grid-template-columns:1fr; row-gap:0.25rem; }
  .contact-list a{ grid-template-columns:1fr auto; }
  .contact-list .k{ grid-column:1 / -1; margin-bottom:0.15rem; }
}

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

/* ============================================================
   PRINT — plain paper, no full-bleed ink
   ============================================================ */
@media print{
  .skip, header, .site-foot{ display:none; }
  body{ font-size:11pt; }
  a{ text-decoration:none; }
  .gallery, .gallery-label{ display:none; }
  .contact-block{ background:#fff; color:#000; }
  .contact-list{ border-top:1px solid #000; }
  .contact-list li{ border-bottom:1px solid #d8d8d8; }
  .contact-list .k{ color:#555; }
  .contact-list .arrow{ display:none; }
  .chip{ transition:none; }
}