/* =========================================================
   Laboratory of Lipid Biochemistry — Gachon University
   ========================================================= */

/* ---------- tokens ---------- */
:root {
  --font-display: "Space Grotesk", "Noto Sans KR", system-ui, sans-serif;
  --font-body: "Inter", "Noto Sans KR", system-ui, -apple-system, sans-serif;

  --acc-1: #35e0d0;   /* membrane teal  */
  --acc-2: #6ea8fe;   /* mid blue       */
  --acc-3: #7c6cf7;   /* violet         */
  --acc-warm: #ffb347;

  --grad: linear-gradient(105deg, var(--acc-1) 0%, var(--acc-2) 48%, var(--acc-3) 100%);

  --wrap: 1200px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --nav-h: 68px;
}

html[data-theme="dark"] {
  --bg:        #06080d;
  --bg-alt:    #090d15;
  --bg-3:      #0d1220;
  --surface:   rgba(255, 255, 255, .035);
  --surface-2: rgba(255, 255, 255, .06);
  --border:    rgba(255, 255, 255, .09);
  --border-2:  rgba(255, 255, 255, .16);
  --text:      #e9edf5;
  --text-2:    #b3bdcf;
  --muted:     #8492a8;
  --shadow:    0 24px 60px -20px rgba(0, 0, 0, .7);
  --glow:      0 0 0 1px rgba(53, 224, 208, .22), 0 18px 50px -22px rgba(53, 224, 208, .3);
}

html[data-theme="light"] {
  --bg:        #ffffff;
  --bg-alt:    #f5f7fb;
  --bg-3:      #eef2f8;
  --surface:   #ffffff;
  --surface-2: #f7f9fc;
  --border:    rgba(12, 20, 40, .1);
  --border-2:  rgba(12, 20, 40, .2);
  --text:      #0d1526;
  --text-2:    #3f4c63;
  --muted:     #64718a;
  --shadow:    0 20px 50px -24px rgba(15, 26, 48, .22);
  --glow:      0 0 0 1px rgba(43, 160, 150, .28), 0 18px 44px -24px rgba(43, 160, 150, .3);
}
html[data-theme="light"] { --acc-1: #12b5a6; --acc-3: #6355e8; }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--acc-1); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); }

.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: 200;
  background: var(--acc-1); color: #04140f; padding: 10px 16px;
  border-radius: var(--r-sm); font-weight: 600; transition: top .2s;
}
.skip-link:focus { top: 14px; }

/* ---------- bilingual switching (pure CSS) ---------- */
html[data-lang="en"] [data-lang="ko"] { display: none !important; }
html[data-lang="ko"] [data-lang="en"] { display: none !important; }
html[data-lang="ko"] body { --font-display: "Noto Sans KR", "Space Grotesk", system-ui, sans-serif; }
html[data-lang="ko"] .s-title,
html[data-lang="ko"] .hero__title { letter-spacing: -.01em; word-break: keep-all; }
html[data-lang="ko"] p, html[data-lang="ko"] li { word-break: keep-all; }

/* ---------- scroll progress ---------- */
.scroll-progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 120;
  background: transparent; pointer-events: none;
}
.scroll-progress span {
  display: block; height: 100%; width: 0%;
  background: var(--grad); box-shadow: 0 0 12px rgba(53, 224, 208, .6);
}

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 110;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background .35s var(--ease), border-color .35s, backdrop-filter .35s;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom-color: var(--border);
}
.nav__inner { display: flex; align-items: center; gap: 24px; }

.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand__mark { width: 30px; height: 30px; flex-shrink: 0; }
.brand__mark svg { width: 100%; height: 100%; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__text strong { font-family: var(--font-display); font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; }
.brand__text small { font-size: 11px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }

.nav__links { display: flex; gap: 4px; margin-left: auto; }
.nav__links a {
  position: relative; padding: 8px 13px; border-radius: 999px;
  font-size: 14.5px; font-weight: 500; color: var(--text-2);
  transition: color .2s, background .2s;
}
.nav__links a:hover { color: var(--text); background: var(--surface-2); }
.nav__links a.is-active { color: var(--text); }
.nav__links a.is-active::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px;
  height: 2px; border-radius: 2px; background: var(--grad);
}

.nav__tools { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.lang-switch {
  display: flex; align-items: center; gap: 2px; padding: 3px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
}
.lang-switch button {
  padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  color: var(--muted); letter-spacing: .02em; transition: all .22s var(--ease);
  white-space: nowrap;
}
.lang-switch button:hover { color: var(--text); }
.lang-switch button.is-active {
  background: var(--grad); color: #04120f; box-shadow: 0 3px 12px -4px rgba(53, 224, 208, .7);
}
html[data-theme="light"] .lang-switch button.is-active { color: #fff; }

.icon-btn {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 50%; background: var(--surface);
  color: var(--text-2); transition: all .22s var(--ease);
}
.icon-btn:hover { color: var(--text); border-color: var(--border-2); transform: translateY(-1px); }
.icon-btn svg { width: 17px; height: 17px; }
html[data-theme="dark"] .i-sun { display: none; }
html[data-theme="light"] .i-moon { display: none; }

/* ---------- nav over the hero ----------
   The hero is a dark photograph under a dark scrim in BOTH themes, so a
   transparent nav sitting on top of it must always use light ink. Theme
   colours only take over once the bar is stuck and has its own background.
   Without this the brand goes near-black on near-black in light theme.
   The open mobile panel is excluded — it has a solid themed background. */
.nav:not(.is-stuck) .brand__text strong { color: #f4f7fc; }
.nav:not(.is-stuck) .brand__text small { color: rgba(238, 243, 250, .62); }

.nav:not(.is-stuck) .nav__links:not(.is-open) a { color: rgba(238, 243, 250, .8); }
.nav:not(.is-stuck) .nav__links:not(.is-open) a:hover {
  color: #fff; background: rgba(255, 255, 255, .12);
}
.nav:not(.is-stuck) .nav__links:not(.is-open) a.is-active { color: #fff; }

.nav:not(.is-stuck) .icon-btn {
  color: rgba(238, 243, 250, .85);
  border-color: rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .08);
}
.nav:not(.is-stuck) .icon-btn:hover { color: #fff; border-color: rgba(255, 255, 255, .42); }

.nav:not(.is-stuck) .lang-switch {
  border-color: rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .08);
}
.nav:not(.is-stuck) .lang-switch button { color: rgba(238, 243, 250, .68); }
.nav:not(.is-stuck) .lang-switch button:hover { color: #fff; }

.nav__burger { display: none; flex-direction: column; gap: 4px; }
.nav__burger span { width: 16px; height: 1.8px; background: currentColor; border-radius: 2px; transition: transform .28s var(--ease), opacity .2s; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.8px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.8px) rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: center;
  padding: calc(var(--nav-h) + 48px) 0 96px;
  overflow: hidden; isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: -3; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 6, 12, .82) 0%, rgba(4, 6, 12, .68) 34%, rgba(4, 6, 12, .93) 88%, var(--bg) 100%),
    linear-gradient(96deg, rgba(4, 6, 12, .95) 8%, rgba(4, 6, 12, .42) 62%, rgba(4, 6, 12, .68) 100%);
}
.hero__canvas { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; opacity: .85; }
.hero__aurora {
  position: absolute; inset: -20% -10% auto -10%; height: 90%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(52% 42% at 78% 18%, rgba(53, 224, 208, .17), transparent 68%),
    radial-gradient(46% 40% at 12% 66%, rgba(124, 108, 247, .18), transparent 70%);
  filter: blur(14px);
}
.hero__inner { position: relative; }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 15px 6px 12px; margin-bottom: 26px;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px;
  background: rgba(255, 255, 255, .05); backdrop-filter: blur(8px);
  font-size: 12.5px; font-weight: 500; letter-spacing: .03em; color: #d3dbe9;
}
.hero__eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--acc-1);
  box-shadow: 0 0 0 3px rgba(53, 224, 208, .18);
  animation: pulse 2.6s var(--ease) infinite;
}
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(53,224,208,.18); } 50% { box-shadow: 0 0 0 7px rgba(53,224,208,0); } }

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7.4vw, 5.4rem);
  font-weight: 700; line-height: 1.03; letter-spacing: -.035em;
  color: #fff; max-width: 17ch;
}
.hero__title .grad {
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero__lede {
  margin-top: 26px; max-width: 60ch;
  font-size: clamp(1rem, 1.55vw, 1.18rem); color: #c3ccdb;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 24px; border-radius: 999px;
  font-size: 15px; font-weight: 600; letter-spacing: -.005em;
  transition: transform .25s var(--ease), box-shadow .25s, background .25s, border-color .25s;
}
.btn svg { width: 17px; height: 17px; transition: transform .28s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn--primary { background: var(--grad); color: #04120f; box-shadow: 0 12px 32px -12px rgba(53, 224, 208, .65); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(53, 224, 208, .8); }
html[data-theme="light"] .btn--primary { color: #fff; }
.btn--ghost { border: 1px solid rgba(255, 255, 255, .22); color: #eaeff7; background: rgba(255, 255, 255, .05); backdrop-filter: blur(8px); }
.btn--ghost:hover { border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .1); transform: translateY(-2px); }

.hero__stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; margin-top: 64px;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r-md);
  background: rgba(255, 255, 255, .1); overflow: hidden;
  max-width: 780px;
  backdrop-filter: blur(10px);
}
.hero__stats > div { padding: 18px 20px; background: rgba(8, 11, 18, .62); }
.hero__stats dt { font-size: 12px; color: #9dabbf; letter-spacing: .04em; text-transform: uppercase; }
.hero__stats dd {
  font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700; color: #fff; margin-top: 4px; line-height: 1;
}

.hero__scroll {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  width: 24px; height: 38px; border: 1.5px solid rgba(255, 255, 255, .28); border-radius: 999px;
  display: grid; place-items: start center; padding-top: 6px; z-index: 2;
}
.hero__scroll span { width: 3px; height: 7px; border-radius: 2px; background: var(--acc-1); animation: wheel 1.9s var(--ease) infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(16px); opacity: 0; } 100% { opacity: 0; } }

/* =========================================================
   SECTION SCAFFOLD
   ========================================================= */
.section {
  padding: clamp(72px, 10vw, 128px) 0;
  position: relative; z-index: 1;
  background: var(--bg);
}
.section--alt { background: var(--bg-alt); border-block: 1px solid var(--border); }
.hero, .footer { position: relative; z-index: 1; }
.hero { background: var(--bg); }

.s-head { max-width: 720px; margin-bottom: clamp(38px, 5vw, 62px); }
.s-head--sm { margin-bottom: 26px; }
.s-kicker {
  display: inline-block; font-family: var(--font-display);
  font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  margin-bottom: 14px;
}
.s-title {
  font-family: var(--font-display);
  font-size: clamp(1.95rem, 4.4vw, 3.1rem);
  font-weight: 700; line-height: 1.1; letter-spacing: -.03em;
}
.s-head--sm .s-title, .s-head--sm h3 {
  font-family: var(--font-display); font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  font-weight: 600; letter-spacing: -.02em;
}
.s-sub { margin-top: 16px; font-size: 1.06rem; color: var(--muted); max-width: 62ch; }
.lead { font-size: 1.09rem; color: var(--text-2); }
.section p + p { margin-top: 15px; }

/* =========================================================
   ABOUT — PI card reads as a CV
   ========================================================= */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.about__text p { color: var(--text-2); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.chips li {
  padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); font-size: 12.5px; font-weight: 500; color: var(--text-2);
  font-family: var(--font-display); letter-spacing: -.005em;
}

.pi {
  position: sticky; top: calc(var(--nav-h) + 24px);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow);
  overflow: hidden;
}
.pi::before { content: ""; display: block; height: 3px; background: var(--grad); }
.pi__photo { padding: 26px 26px 0; }
.pi__photo img {
  width: 118px; height: 118px; object-fit: cover; object-position: 50% 20%;
  border-radius: 18px; border: 1px solid var(--border-2);
}
.pi__body { padding: 20px 26px 28px; }
.pi__role {
  font-family: var(--font-display); font-size: 11.5px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--acc-1);
}
.pi__name {
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 700;
  letter-spacing: -.028em; margin-top: 6px; line-height: 1.15;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
}
.pi__ko { font-size: .95rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.pi__aff { margin-top: 9px; font-size: .95rem; color: var(--text-2); line-height: 1.55; }

/* the CV proper: a ruled year / position table */
.timeline { margin-top: 22px; border-top: 1px solid var(--border); padding-top: 6px; }
.timeline li {
  display: grid; grid-template-columns: 86px 1fr; gap: 14px;
  padding: 10px 0; position: relative;
}
.timeline li + li { border-top: 1px dashed var(--border); }
.tl__year {
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  letter-spacing: -.005em; color: var(--muted); padding-top: 3px;
  font-variant-numeric: tabular-nums;
}
.tl__what { font-size: 13.6px; color: var(--text-2); line-height: 1.5; }
.timeline em { font-style: italic; }
/* current appointments carry the accent and a marker */
.timeline li.is-now .tl__year { color: var(--acc-1); }
.timeline li.is-now .tl__year::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 5px; height: 5px; margin-right: 6px; border-radius: 50%;
  background: var(--acc-1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc-1) 22%, transparent);
}

/* =========================================================
   RESEARCH
   ========================================================= */
/* ---------- pillar jump index ---------- */
.pdex {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding-bottom: clamp(30px, 4vw, 48px);
  margin-bottom: clamp(10px, 2vw, 18px);
  border-bottom: 1px solid var(--border);
}
.pdex a {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 7px 14px 7px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  font-size: 13px; font-weight: 500; color: var(--text-2);
  transition: border-color .25s var(--ease), color .25s, background .25s, transform .25s var(--ease);
}
.pdex a b {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: .04em; color: var(--acc-1);
}
.pdex a:hover {
  color: var(--text); border-color: var(--border-2);
  background: var(--surface-2); transform: translateY(-2px);
}

/* ---------- the pillars ---------- */
.pillars { display: block; }

.pillar {
  position: relative;
  display: grid;
  grid-template-columns: 68px minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  padding: clamp(38px, 5vw, 62px) 0;
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.pillar + .pillar { border-top: 1px solid var(--border); }

/* the numbered spine, running the length of the section */
.pillar__rail { position: relative; }
.pillar__rail::before {
  content: ""; position: absolute; left: 21px; top: -80px; bottom: -80px;
  width: 1px; background: var(--border);
}
.pillar:first-child .pillar__rail::before { top: 24px; }
.pillar:last-child .pillar__rail::before { bottom: 50%; }
.pillar__num {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 43px; height: 43px; border-radius: 50%;
  border: 1px solid var(--border-2); background: var(--bg-alt);
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  letter-spacing: -.01em; color: var(--muted);
  transition: color .3s, border-color .3s, background .3s, box-shadow .3s;
}
.pillar:hover .pillar__num,
.pillar:focus-within .pillar__num {
  color: #04120f; border-color: transparent;
  background: var(--grad); box-shadow: 0 6px 20px -8px rgba(53, 224, 208, .7);
}
html[data-theme="light"] .pillar:hover .pillar__num { color: #fff; }

/* ---------- the figure ---------- */
.pillar__fig { margin: 0; }
.pillar__fig .dgm {
  width: 100%; height: auto;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--acc-1) 4%, transparent), transparent 60%),
    var(--surface);
  padding: 14px 16px;
  transition: border-color .35s var(--ease), background .35s;
}
.pillar:hover .pillar__fig .dgm { border-color: var(--border-2); }
.pillar__fig figcaption {
  margin-top: 11px; font-size: .78rem; line-height: 1.5; color: var(--muted);
  font-family: var(--font-display); letter-spacing: -.005em;
}
.pillar__fig figcaption i { font-style: italic; }

/* diagram design system — hairline schematic, two inks */
.dgm { color: var(--text-2); }
.dgm [class*="dgm__"], .dgm g, .dgm use, .dgm path, .dgm circle, .dgm rect, .dgm ellipse {
  vector-effect: non-scaling-stroke;
}
.dgm g, .dgm use, .dgm > path, .dgm > circle, .dgm > rect, .dgm > ellipse {
  fill: none; stroke: currentColor; stroke-width: 1.35;
  stroke-linecap: round; stroke-linejoin: round;
}
.dgm use, .dgm g path, .dgm g circle, .dgm g rect, .dgm g ellipse, .dgm g use {
  fill: none; stroke: currentColor; stroke-width: 1.35;
  stroke-linecap: round; stroke-linejoin: round;
}
.dgm .dgm--acc,
.dgm .dgm--acc path, .dgm .dgm--acc circle, .dgm .dgm--acc rect,
.dgm .dgm--acc ellipse, .dgm .dgm--acc use { stroke: var(--acc-1); }
.dgm .dgm__fillacc { fill: color-mix(in srgb, var(--acc-1) 26%, transparent); stroke: var(--acc-1); }
.dgm .dgm__node { fill: currentColor; stroke: none; }
.dgm .dgm--acc .dgm__node { fill: var(--acc-1); stroke: none; }
.dgm .dgm__web { stroke: currentColor; stroke-width: .55; opacity: .34; }
.dgm .dgm__hatch { stroke: currentColor; stroke-width: .7; opacity: .3; }
.dgm .dgm__rule { stroke: currentColor; stroke-width: 1; opacity: .28; }
.dgm .dgm__arrow { stroke: currentColor; stroke-width: 1.2; marker-end: none; }
.dgm .dgm--acc .dgm__arrow { stroke: var(--acc-1); }
.dgm .dgm__box { stroke: currentColor; stroke-width: 1; opacity: .55; fill: none; }
.dgm .dgm--accbox { stroke: var(--acc-1); opacity: 1; fill: color-mix(in srgb, var(--acc-1) 10%, transparent); }

/* diagram type */
.dgm text { stroke: none; }
.dgm .dgm__lbl {
  fill: currentColor; opacity: .55;
  font-family: var(--font-display); font-size: 8px; font-weight: 600;
  letter-spacing: .12em;
}
.dgm .dgm__tag {
  fill: currentColor; opacity: .85; text-anchor: middle;
  font-family: var(--font-display); font-size: 8.4px; font-weight: 600;
  letter-spacing: .06em;
}
.dgm .dgm--acctxt { fill: var(--acc-1); opacity: 1; }

/* stroke-draw reveal */
.dgm .dgm__draw { opacity: 0; transition: opacity .5s var(--ease); }
.dgm.is-drawn .dgm__draw { opacity: 1; }
.dgm.is-drawn .dgm__draw[data-order="1"] { transition-delay: .00s; }
.dgm.is-drawn .dgm__draw[data-order="2"] { transition-delay: .13s; }
.dgm.is-drawn .dgm__draw[data-order="3"] { transition-delay: .26s; }
.dgm.is-drawn .dgm__draw[data-order="4"] { transition-delay: .39s; }
.dgm.is-drawn .dgm__draw[data-order="5"] { transition-delay: .52s; }
.dgm.is-drawn .dgm__draw[data-order="6"] { transition-delay: .65s; }
.dgm.is-drawn .dgm__draw[data-order="7"] { transition-delay: .78s; }
.dgm.is-drawn .dgm__draw[data-order="8"] { transition-delay: .91s; }
.dgm .dgm__ink {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
}
.dgm.is-drawn .dgm__ink {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.15s var(--ease);
  transition-delay: inherit;
}
@media (prefers-reduced-motion: reduce) {
  .dgm .dgm__draw { opacity: 1; }
  .dgm .dgm__ink { stroke-dasharray: none; stroke-dashoffset: 0; }
}

/* ---------- the text ---------- */
.pillar__body { padding-top: 2px; }
.pillar__flag {
  display: inline-block; margin-bottom: 12px;
  padding: 3px 11px; border-radius: 999px;
  font-family: var(--font-display); font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--grad); color: #04120f;
}
html[data-theme="light"] .pillar__flag { color: #fff; }
.pillar__kicker {
  font-family: var(--font-display); font-size: 11.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 12px;
}
.pillar__body h3 {
  font-family: var(--font-display);
  font-size: clamp(1.22rem, 2.1vw, 1.62rem);
  font-weight: 600; line-height: 1.26; letter-spacing: -.024em;
  margin-bottom: 14px;
}
.pillar__body > p:not([class]) { font-size: .98rem; color: var(--text-2); }
.pillar__body em { font-style: italic; color: var(--text); }
.pillar__methods {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px;
  padding-top: 18px; border-top: 1px dashed var(--border);
}
.pillar__methods li {
  padding: 4px 11px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface-2);
  font-family: var(--font-display); font-size: 11.5px; font-weight: 500;
  letter-spacing: .01em; color: var(--muted);
}
.pillar--new .pillar__num { border-color: rgba(53, 224, 208, .5); color: var(--acc-1); }

/* figures */
.figure { margin-top: clamp(40px, 6vw, 72px); }
.figure--split {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(28px, 4vw, 54px); align-items: center;
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface);
}
.figure__media {
  border-radius: var(--r-md); overflow: hidden;
  background: #fff; padding: 14px;
  border: 1px solid var(--border);
}
.figure__media img { width: 100%; }
.figure__text h3 {
  font-family: var(--font-display); font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight: 600; letter-spacing: -.025em; margin-bottom: 12px;
}
.figure__text p { color: var(--text-2); }

.ticks { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.ticks li { position: relative; padding-left: 28px; font-size: .95rem; color: var(--text-2); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .3em;
  width: 17px; height: 17px; border-radius: 50%;
  background: linear-gradient(140deg, rgba(53, 224, 208, .22), rgba(124, 108, 247, .22));
  border: 1px solid rgba(53, 224, 208, .4);
}
.ticks li::after {
  content: ""; position: absolute; left: 5px; top: .62em;
  width: 6px; height: 3.4px; border-left: 1.7px solid var(--acc-1); border-bottom: 1.7px solid var(--acc-1);
  transform: rotate(-45deg);
}

.highlights { margin-top: clamp(48px, 7vw, 86px); }
.hl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.hl {
  padding: 20px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); transition: transform .3s var(--ease), border-color .3s;
}
.hl:hover { transform: translateY(-3px); border-color: var(--border-2); }
.hl__tag {
  display: inline-block; margin-bottom: 10px; padding: 3px 10px; border-radius: 999px;
  font-family: var(--font-display); font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  background: rgba(53, 224, 208, .12); color: var(--acc-1); border: 1px solid rgba(53, 224, 208, .28);
}
.hl p { font-size: .9rem; color: var(--text-2); line-height: 1.5; }

.figure--wide { margin-top: 22px; }
.figure--wide img {
  width: 100%; border-radius: var(--r-md);
  background: #fff; padding: 16px; border: 1px solid var(--border);
}
.figure figcaption { margin-top: 12px; font-size: .84rem; color: var(--muted); text-align: center; }

/* =========================================================
   PUBLICATIONS
   ========================================================= */
.pubs { display: flex; flex-direction: column; gap: 2px; }
.pub {
  display: grid; grid-template-columns: 96px 1fr; gap: 20px;
  padding: 24px 22px; border-radius: var(--r-md);
  border: 1px solid transparent;
  transition: background .3s, border-color .3s, transform .3s var(--ease);
}
.pub + .pub { border-top: 1px solid var(--border); }
.pub:hover { background: var(--surface); border-color: var(--border); transform: translateX(4px); }
.pub:hover + .pub { border-top-color: transparent; }
.pub__year {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 700;
  letter-spacing: -.01em; color: var(--muted); padding-top: 2px;
}
.pub:hover .pub__year { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pub__body h3 { font-size: 1.06rem; font-weight: 600; line-height: 1.42; letter-spacing: -.012em; }
.pub__body h3 a { transition: color .2s; background-image: linear-gradient(var(--acc-1), var(--acc-1)); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .3s var(--ease); }
.pub__body h3 a:hover { background-size: 100% 1px; }
.pub__authors { margin-top: 8px; font-size: .9rem; color: var(--text-2); }
.pub__venue { margin-top: 3px; font-size: .9rem; color: var(--muted); }
.pub__doi {
  margin-top: 8px; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: .78rem; color: var(--muted); opacity: .8;
}
.pub__badge {
  display: inline-block; margin-bottom: 8px; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(255, 179, 71, .12); color: var(--acc-warm); border: 1px solid rgba(255, 179, 71, .3);
}

/* =========================================================
   PEOPLE
   ========================================================= */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 18px; }
.person {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden;
  transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.person:hover { transform: translateY(-5px); border-color: var(--border-2); box-shadow: var(--glow); }
.person__photo { position: relative; aspect-ratio: 3 / 3.5; overflow: hidden; background: var(--bg-3); }
.person__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%;
  transition: transform .6s var(--ease), filter .45s;
  filter: saturate(.92);
}
.person:hover .person__photo img { transform: scale(1.045); filter: saturate(1.05); }
.person__photo::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 46%;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg-alt) 82%, transparent));
}
.person__meta { padding: 16px 18px 20px; }
.person__role { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--acc-1); }
.person__name { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; letter-spacing: -.02em; margin-top: 5px; }
.person__ko { font-size: .86rem; color: var(--muted); margin-top: 1px; }
.person__note { font-size: .82rem; color: var(--muted); margin-top: 8px; line-height: 1.5; }

/* the whole card is an ORCID link */
.person { display: block; color: inherit; }
.person__orcid {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  padding: 4px 11px 4px 5px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: .76rem; font-weight: 600; letter-spacing: .01em; color: var(--muted);
  transition: border-color .25s, color .25s, background .25s;
}
.orcid-mark { width: 15px; height: 15px; flex-shrink: 0; }
.person:hover .person__orcid,
.person:focus-visible .person__orcid {
  border-color: #a6ce39; color: var(--text); background: rgba(166, 206, 57, .12);
}
.person:focus-visible { outline: 2px solid var(--acc-1); outline-offset: 3px; }
/* the lead card's meta is a flex column, so the chip would stretch to the
   full column width — keep it sized to its own content like the small cards */
.person--lead .person__orcid { margin-top: 14px; align-self: flex-start; }

.person--lead { grid-column: span 2; }
.person--lead .person__photo { aspect-ratio: auto; height: 100%; min-height: 240px; }
.person--lead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.person--lead .person__meta { display: flex; flex-direction: column; justify-content: center; padding: 22px; }
.person--lead .person__name { font-size: 1.5rem; }
.person--lead::before { content: ""; position: absolute; }

/* =========================================================
   PARTNERS
   ========================================================= */
.logo-block + .logo-block { margin-top: clamp(40px, 5vw, 64px); }
.logo-block__title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; letter-spacing: -.015em; }
.logo-block__sub { font-size: .92rem; color: var(--muted); margin-top: 5px; }
.logos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px; margin-top: 22px;
}
.logos--sm { grid-template-columns: repeat(auto-fit, minmax(152px, 1fr)); }
.logos li {
  display: grid; place-items: center; min-height: 96px; padding: 18px 20px;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
  transition: border-color .3s, transform .3s var(--ease), background .3s, box-shadow .3s;
}
.logos li:hover { border-color: var(--border-2); transform: translateY(-3px); background: var(--surface-2); }
.logos img { max-height: 40px; width: auto; object-fit: contain; }

/* These logos were extracted from the source PDF and mostly have opaque white
   backgrounds rather than alpha. A monochrome filter therefore turns each one
   into a solid block, so in dark mode the tile gets a light plate instead and
   the marks are shown in their real brand colours. */
html[data-theme="dark"] .logos li {
  background: #eef1f7;
  border-color: rgba(255, 255, 255, .12);
}
html[data-theme="dark"] .logos li:hover {
  background: #fff;
  border-color: rgba(255, 255, 255, .3);
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .8);
}

/* =========================================================
   GALLERY
   ========================================================= */
.gallery { columns: 4 220px; column-gap: 14px; }
.gi {
  display: block; width: 100%; margin-bottom: 14px; padding: 0;
  border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden; background: var(--bg-3);
  break-inside: avoid;
  transition: transform .4s var(--ease), border-color .3s, box-shadow .35s;
}
/* width/height attributes on the source give the browser the aspect ratio, so
   the masonry reserves space and nothing jumps as lazy images arrive */
.gi img {
  width: 100%; height: auto;
  transition: transform .7s var(--ease), filter .4s;
  filter: saturate(.9) brightness(.94);
}
.gi:hover { transform: translateY(-4px) scale(1.008); border-color: var(--border-2); box-shadow: var(--shadow); }
.gi:hover img { transform: scale(1.05); filter: saturate(1.04) brightness(1); }

.lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  grid-template-columns: 72px 1fr 72px;
  background: rgba(3, 5, 9, .93); backdrop-filter: blur(10px);
  animation: fadeIn .22s var(--ease);
}
.lightbox[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.lightbox img {
  grid-column: 2; max-width: min(94vw, 1100px); max-height: 86vh;
  width: auto; border-radius: var(--r-md); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .9);
}
.lightbox__close {
  position: absolute; top: 18px; right: 22px; z-index: 2;
  width: 42px; height: 42px; font-size: 30px; line-height: 1; color: #fff;
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%;
  display: grid; place-items: center; transition: background .2s, transform .2s;
}
.lightbox__close:hover { background: rgba(255, 255, 255, .12); transform: rotate(90deg); }
.lightbox__nav {
  width: 46px; height: 46px; font-size: 30px; color: #fff;
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%;
  display: grid; place-items: center; transition: background .2s, transform .2s;
}
.lightbox__nav:hover { background: rgba(255, 255, 255, .12); }
.lightbox__nav--prev { grid-column: 1; justify-self: center; }
.lightbox__nav--next { grid-column: 3; justify-self: center; }
.lightbox__count {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-size: 13px; color: rgba(255, 255, 255, .6); letter-spacing: .08em;
}

/* =========================================================
   JOIN
   ========================================================= */
.section--join { background: var(--bg-alt); border-top: 1px solid var(--border); position: relative; overflow: hidden; }
.section--join::before {
  content: ""; position: absolute; inset: -40% -10% auto 40%; height: 130%;
  background: radial-gradient(46% 40% at 60% 30%, rgba(53, 224, 208, .1), transparent 68%),
              radial-gradient(40% 36% at 30% 70%, rgba(124, 108, 247, .12), transparent 70%);
  pointer-events: none;
}
.join { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.join__text p { color: var(--text-2); }
.join__text .lead { margin-top: 18px; }

.contact {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow);
  padding: 28px 26px; backdrop-filter: blur(10px);
}
.contact h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; margin-bottom: 4px; }
.contact__row { padding: 15px 0; }
.contact__row + .contact__row { border-top: 1px dashed var(--border); }
.contact__label {
  font-family: var(--font-display); font-size: 10.5px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.contact__val { font-size: .95rem; color: var(--text-2); line-height: 1.6; }
.contact__val b { color: var(--text); font-weight: 600; }
.contact__link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 7px;
  font-family: var(--font-display); font-size: .82rem; color: var(--muted);
  transition: color .22s;
}
.contact__link:hover { color: var(--text); }
.contact__mail {
  color: var(--acc-1); font-weight: 500;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .3s var(--ease);
}
.contact__mail:hover { background-size: 100% 1px; }
.contact__cta {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 20px;
  padding: 11px 20px; border-radius: 999px;
  border: 1px solid var(--border-2); background: var(--surface-2);
  font-size: .9rem; font-weight: 600;
  transition: border-color .25s, background .25s, transform .25s var(--ease);
}
.contact__cta svg { width: 17px; height: 17px; color: var(--acc-1); }
.contact__cta:hover {
  border-color: var(--acc-1); background: color-mix(in srgb, var(--acc-1) 10%, transparent);
  transform: translateY(-2px);
}

/* =========================================================
   LOCATION / MAP
   ========================================================= */
.section--map { background: var(--bg-alt); border-top: 1px solid var(--border); }
.s-head--center { max-width: 640px; margin-inline: auto; text-align: center; }

.mapblock {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden; background: var(--surface);
  box-shadow: var(--shadow);
}
.mapblock__frame { position: relative; margin: 0; min-height: clamp(340px, 48vh, 520px); background: var(--bg-3); }
.mapblock__frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0; display: block;
}
/* the embed ships light; in dark mode calm it down so it sits with the page */
html[data-theme="dark"] .mapblock__frame iframe { filter: invert(.9) hue-rotate(180deg) saturate(.7) contrast(.92); }

.mapblock__panel {
  padding: clamp(24px, 3vw, 34px);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.mapblock__meta { margin-top: 22px; }
.mapblock__meta > div { padding: 13px 0; }
.mapblock__meta > div + div { border-top: 1px dashed var(--border); }
.mapblock__meta dt {
  font-family: var(--font-display); font-size: 10.5px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px;
}
.mapblock__meta dd { font-size: .92rem; color: var(--text-2); line-height: 1.6; }
.mapblock__actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: auto; padding-top: 24px; }
.mapblock__actions .btn { font-size: .875rem; padding: 11px 18px; }
.mapblock__actions .btn svg { width: 16px; height: 16px; }
.mapcard__eyebrow {
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--acc-1);
}
.mapcard__title {
  font-family: var(--font-display); font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  font-weight: 600; letter-spacing: -.026em; margin-top: 6px;
}
.mapcard__sub { font-size: .94rem; color: var(--muted); margin-top: 6px; }
.mapcard__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.btn--quiet {
  border: 1px solid var(--border-2); color: var(--text-2); background: var(--surface-2);
}
.btn--quiet:hover { border-color: var(--acc-1); color: var(--text); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .mapcard__pin { animation: none; } }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { border-top: 1px solid var(--border); background: var(--bg); padding: 48px 0 40px; }
.footer__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 40px; align-items: center; }
.footer__brand { display: flex; align-items: center; gap: 18px; }
.footer__brand p { display: flex; flex-direction: column; line-height: 1.4; }
.footer__brand strong { font-family: var(--font-display); font-size: .98rem; font-weight: 600; letter-spacing: -.015em; }
.footer__brand span { font-size: .85rem; color: var(--muted); }
.footer__nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer__nav a { font-size: .88rem; color: var(--muted); transition: color .2s; }
.footer__nav a:hover { color: var(--text); }
.footer__copy { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--border); font-size: .82rem; color: var(--muted); }

/* =========================================================
   REVEAL
   ========================================================= */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__eyebrow .dot, .hero__scroll span { animation: none; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1080px) {
  .about, .join { grid-template-columns: 1fr; }
  /* figure above text once the two columns get cramped */
  .pillar {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 18px 22px;
  }
  .pillar__rail { grid-row: span 2; }
  .pillar__rail::before { left: 18px; }
  .pillar__num { width: 37px; height: 37px; font-size: 13px; }
  .pillar__body { padding-top: 4px; }
  .mapblock { grid-template-columns: 1fr; }
  .mapblock__panel { border-left: 0; border-top: 1px solid var(--border); }
  .mapblock__frame { min-height: clamp(280px, 40vh, 380px); }
  .pi { position: static; }
  .figure--split { grid-template-columns: 1fr; }
  .person--lead { grid-column: span 2; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
}

@media (max-width: 900px) {
  .nav__links {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; gap: 2px; padding: 16px clamp(20px, 5vw, 40px) 24px;
    background: color-mix(in srgb, var(--bg) 96%, transparent);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: transform .3s var(--ease), opacity .25s;
    margin-left: 0;
  }
  .nav__links.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .nav__links a { padding: 12px 14px; border-radius: var(--r-sm); font-size: 15.5px; }
  .nav__links a.is-active::after { left: 14px; right: auto; width: 22px; bottom: 6px; }
  .nav__burger { display: flex; }
  .nav__tools { margin-left: auto; }
  .hero__stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); max-width: 560px; }
  .gallery { columns: 3 180px; }
}


/* =========================================================
   MOBILE — nav bar fit
   At 375px the brand (209px) + tools (199px) + gap overflowed the
   viewport, pushing the theme toggle and burger off-screen entirely.
   The brand is allowed to shrink and wrap to two lines; the tools
   tighten up. Nothing is hidden, everything stays reachable.
   ========================================================= */
@media (max-width: 780px) {
  .nav__inner { gap: 10px; }
  .brand { flex-shrink: 1; min-width: 0; gap: 9px; }
  .brand__mark { width: 26px; height: 26px; }
  .brand__text { min-width: 0; }
  .brand__text strong { font-size: 13px; line-height: 1.16; }
  .nav__tools { gap: 6px; }
  .lang-switch { padding: 2px; }
  .lang-switch button { padding: 7px 8px; font-size: 11px; }
  .icon-btn { width: 34px; height: 34px; }
  .icon-btn svg { width: 16px; height: 16px; }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  .section { padding: clamp(58px, 11vw, 80px) 0; }
  .hero { min-height: auto; padding: calc(var(--nav-h) + 56px) 0 72px; }

  /* comfortable taps everywhere */
  a, button { -webkit-tap-highlight-color: rgba(53, 224, 208, .16); }

  /* stats read as a spec list rather than an awkward 2+1 grid */
  .hero__stats { grid-template-columns: 1fr; max-width: none; }
  .hero__stats > div {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 14px; padding: 13px 16px;
  }
  .hero__stats dd { margin-top: 0; font-size: 1.4rem; }

  /* pillar index becomes a swipeable strip, bleeding to the screen edges,
     instead of wrapping into five stacked rows */
  .pdex {
    flex-wrap: nowrap; overflow-x: auto;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * clamp(20px, 5vw, 40px));
    padding-inline: clamp(20px, 5vw, 40px);
    padding-bottom: 22px;
    scrollbar-width: none;
  }
  .pdex::-webkit-scrollbar { display: none; }
  .pdex a { flex: 0 0 auto; scroll-snap-align: start; padding: 9px 14px 9px 11px; }

  /* CV rows: give the description more of the line */
  .timeline li { grid-template-columns: 64px 1fr; gap: 10px; }
  .tl__year { font-size: 11.5px; }
  .tl__what { font-size: 13.2px; }
  .pi__photo { padding: 20px 20px 0; }
  .pi__photo img { width: 96px; height: 96px; }
  .pi__body { padding: 18px 20px 22px; }
  .pi__name { font-size: 1.42rem; }

  .contact { padding: 22px 20px; }
  .mapblock__panel { padding: 22px 20px; }

  /* pillars: drop the spine, stack cleanly */
  .pillar { grid-template-columns: 1fr; gap: 18px; padding: 34px 0; }
  .pillar__rail { grid-row: auto; }
  .pillar__rail::before { display: none; }
  .pillar__fig .dgm { padding: 10px 8px; }
  .pillar__fig figcaption { font-size: .74rem; }
  .pdex { gap: 5px; padding-bottom: 26px; }
  .pdex a { padding: 6px 11px 6px 8px; font-size: 12px; }
  .mapblock__actions .btn { width: 100%; justify-content: center; }

  .hero__title { max-width: none; }
  .hero__stats { margin-top: 44px; }
  .pub { grid-template-columns: 1fr; gap: 8px; padding: 20px 16px; }
  .pub__year { padding-top: 0; }
  .person--lead { grid-column: span 2; grid-template-columns: 1fr; }
  .person--lead .person__photo { min-height: 0; aspect-ratio: 16 / 10; }
  .person--lead .person__photo img { object-position: 50% 14%; }
  .people { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .gallery { columns: 2 140px; column-gap: 10px; }
  .gi { margin-bottom: 10px; }
  .lightbox { grid-template-columns: 1fr; }
  .lightbox__nav { position: absolute; bottom: 56px; }
  .lightbox__nav--prev { left: 22%; }
  .lightbox__nav--next { right: 22%; }
  .footer__inner { grid-template-columns: 1fr; }
  .brand__text small { display: none; }
}

@media (max-width: 420px) {
  .lang-switch button { padding: 5px 8px; font-size: 11.5px; }
  .people { grid-template-columns: 1fr 1fr; }
}

/* print */
@media print {
  .nav, .scroll-progress, .hero__canvas, .hero__scroll, .lightbox, .hero__cta { display: none !important; }
  body { background: #fff; color: #000; }
  .reveal { opacity: 1; transform: none; }
}