/* LiaoLab — Editorial Microscopy
   Shared styles. Tokens live in CSS vars so direct edits are cheap. */

:root {
  /* ===== LOAF-INSPIRED SYSTEM — pure white ground, near-black ink, one bold grotesque ===== */
  --paper: #f2f0e9;
  --paper-deep: #e7e4da;
  --paper-card: #faf9f5;
  --ink: #0c0c0c;
  --ink-soft: #6b6b6b;
  --ink-read: #45423c;
  --ink-muted: #a3a3a3;
  --rule: #e6e6e4;
  --rule-soft: #f0f0ee;
  --navy: #0c0c0c;
  --navy-deep: #000000;
  /* accents (green removed — strictly monochrome ink) */
  --gfp: #0c0c0c;
  --gfp-deep: #0c0c0c;
  --gfp-on-dark: #ffffff;  /* emphasis on dark panels = white */
  --cfp: #0c0c0c;
  --rfp: #0c0c0c;
  --amber: #0c0c0c;
  --bg-indigo: #0c0c0c;
  --bg-indigo-deep: #000000;
  --bg-indigo-light: #1a1a1a;
  /* type system */
  --font-display: 'Hanken Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-sans: 'Hanken Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'Hanken Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }

/* ===== TYPE — Hanken Grotesk (variable) =====
   The whole site adopts one confident bold grotesque, Loaf-style.
   Every legacy family name used across the codebase ('Serotiva',
   'Newsreader', 'Sora', 'JetBrains Mono') is aliased to the SAME variable
   font file, so inline fontFamily references convert with zero edits. */
@font-face {
  font-family: 'PlayfairHeading';
  src: url('https://cdn.jsdelivr.net/npm/@fontsource-variable/playfair-display@5/files/playfair-display-latin-wght-normal.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('https://cdn.jsdelivr.net/npm/@fontsource-variable/hanken-grotesk@5/files/hanken-grotesk-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Serotiva';
  src: url('https://cdn.jsdelivr.net/npm/@fontsource-variable/hanken-grotesk@5/files/hanken-grotesk-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('https://cdn.jsdelivr.net/npm/@fontsource-variable/hanken-grotesk@5/files/hanken-grotesk-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sora';
  src: url('https://cdn.jsdelivr.net/npm/@fontsource-variable/hanken-grotesk@5/files/hanken-grotesk-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('https://cdn.jsdelivr.net/npm/@fontsource-variable/hanken-grotesk@5/files/hanken-grotesk-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--paper);
  background-image: none;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* grain removed — Loaf ground is clean, flat white */
body::before { content: none; }

/* Sections now sit flush on the beige paper bg — no gutter, no card shadow */
section { background: transparent; position: relative; }
.page-enter {
  padding: 0;
  display: block;
}
.page-enter > section {
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}

/* =====================================================================
   Hie Lab–inspired layout primitives (hl-* utility namespace).
   Restrained editorial flow: single column, lots of whitespace,
   serif headlines, hairline rules between sections.
   ===================================================================== */
.hl-container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px;
}

/* HERO ----------------------------------------------------------------- */
.hl-hero {
  position: relative;
  height: calc(100vh - 78px);
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  color: var(--paper);
  padding: 0 32px;
}
.hl-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('assets/hero-plants.jpg') center/cover no-repeat;
  filter: brightness(0.50) saturate(0.85);
}
.hl-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(8, 14, 11, 0.35) 0%, rgba(8, 14, 11, 0.20) 40%, rgba(8, 14, 11, 0.55) 100%);
}
.hl-h1 {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 4.6vw, 72px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin: 0;
  max-width: 18ch;
  text-shadow: 0 4px 32px rgba(0, 0, 0, 0.4);
}
.hl-h1 em { font-style: normal; font-weight: 700; }
.hl-tagline { display: none; }

.hl-hero-cycle {
  position: relative;
  display: inline-block;
  margin-left: 6px;
  padding: 0 4px 4px;
  border-bottom: 4px solid rgba(244, 237, 224, 0.85);
  min-width: 6ch;
}
.hl-hero-cycle .word {
  display: inline-block;
  animation: hl-cycle-in 0.5s ease-out;
}
@keyframes hl-cycle-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hl-subnav {
  display: flex;
  gap: 56px;
  padding: 24px 48px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.hl-subnav a {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -0.005em;
  transition: color 0.2s;
}
.hl-subnav a:hover { color: var(--navy); }
.hl-subnav a.active { color: #d9266c; }

/* hide old jump links inside hero */
.hl-jump { display: none; }

/* SECTION SHELL -------------------------------------------------------- */
.hl-section {
  padding: 96px 0 112px;
  border-bottom: 1px solid var(--rule);
}
.hl-section:last-of-type { border-bottom: none; }

.hl-h2 {
  font-family: 'Newsreader', serif;
  font-weight: 400;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 56px;
}
.hl-h3 {
  font-family: 'Newsreader', serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 80px 0 36px;
}
.hl-h4 {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.hl-section-foot {
  margin-top: 48px;
  text-align: right;
}
.hl-link, .hl-link-inline {
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.hl-link:hover, .hl-link-inline:hover {
  color: var(--navy);
  border-color: var(--navy);
}

/* RESEARCH FOCUS — 3 columns ------------------------------------------ */
.hl-focus-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.hl-focus-image {
  width: 100%;
  margin-bottom: 28px;
}
.hl-focus-image .img-cover,
.hl-focus-image > div { border-radius: 6px; }
.hl-focus-title {
  font-family: 'Newsreader', serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 14px;
}
.hl-focus-desc {
  font-family: 'Newsreader', serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}

/* PUBLICATIONS — horizontal list ------------------------------------- */
.hl-pub-list {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.hl-pub {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  align-items: start;
}
.hl-pub-cover .img-cover,
.hl-pub-cover > div { border-radius: 4px; }
.hl-pub-title {
  font-family: 'Newsreader', serif;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 14px;
}
.hl-pub-title a {
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.hl-pub-title a:hover { border-color: var(--ink); }
.hl-pub-authors {
  font-family: 'Sora', sans-serif;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.hl-pub-venue {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0;
}

/* TEAM ---------------------------------------------------------------- */
.hl-pi {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 56px;
  margin-bottom: 0;
  align-items: start;
}
.hl-pi-photo .img-cover,
.hl-pi-photo > div { border-radius: 4px; }
.hl-pi-role {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.hl-pi-name {
  font-family: 'Newsreader', serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 24px;
}
.hl-pi-bio {
  font-family: 'Newsreader', serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  max-width: 64ch;
}
.hl-team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 32px;
}
.hl-member-photo {
  margin-bottom: 16px;
}
.hl-member-photo .img-cover,
.hl-member-photo > div { border-radius: 4px; }
.hl-member-role {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.hl-member-name {
  font-family: 'Newsreader', serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 6px;
}
.hl-member-affil {
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0;
}

/* CONTACT ------------------------------------------------------------ */
.hl-contact-lead {
  font-family: 'Newsreader', serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 60ch;
  margin: 0 0 56px;
}
.hl-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  align-items: start;
}
.hl-contact-addr p {
  font-family: 'Sora', sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0;
}
.hl-contact-map {
  width: 100%;
  height: 320px;
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
}

/* RESPONSIVE QUICK-FIXES */
@media (max-width: 880px) {
  .hl-focus-grid { grid-template-columns: 1fr; gap: 56px; }
  .hl-pub { grid-template-columns: 1fr; gap: 24px; }
  .hl-pi { grid-template-columns: 1fr; gap: 32px; }
  .hl-team-grid { grid-template-columns: repeat(2, 1fr); }
  .hl-contact-grid { grid-template-columns: 1fr; }
}

.welcome-strip {
  position: relative;
  height: calc(100vh - 78px); /* fills viewport minus nav */
  min-height: 620px;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  color: var(--paper);
  border-bottom: 1px solid var(--rule);
  background: #0a0a18;
}
.welcome-strip .grp {
  position: absolute; inset: 0;
  background-image: url('assets/hero-lab.jpg');
  background-size: cover; background-position: center;
  z-index: 0;
}
.welcome-strip::after {
  /* dark gradient overlay for legibility */
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(8,8,22,0.55) 0%, rgba(8,8,22,0.25) 30%, rgba(8,8,22,0.25) 70%, rgba(8,8,22,0.75) 100%),
    radial-gradient(ellipse at center, transparent 30%, rgba(8,8,22,0.45) 100%);
  pointer-events: none;
}

.welcome-strip-top {
  position: relative;
  z-index: 2;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 32px 48px 0;
}
.welcome-strip-logo {
  display: flex; align-items: center; gap: 14px;
}
.welcome-strip-logo .mark {
  width: 44px; height: 44px; border-radius: 50%;
  background:
    radial-gradient(circle at 38% 35%, var(--gfp) 0%, rgba(63,201,122,0.45) 30%, transparent 70%),
    var(--ink);
  position: relative;
  box-shadow: 0 0 24px rgba(63, 201, 122, 0.45);
}
.welcome-strip-logo .mark::after {
  content: ''; position: absolute; inset: 8px; border-radius: 50%;
  border: 1px solid rgba(63,201,122,0.4);
}
.welcome-strip-logo .wordmark {
  display: flex; flex-direction: column; line-height: 1.15;
}
.welcome-strip-logo .wordmark .name {
  font-family: 'Newsreader', serif; font-style: italic;
  font-size: 22px; font-weight: 500; color: var(--paper);
}
.welcome-strip-logo .wordmark .sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.16em;
  color: rgba(244,237,224,0.6); text-transform: uppercase;
}
.welcome-strip-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244,237,224,0.7);
  display: flex; align-items: center; gap: 10px;
  margin-top: 4px;
}
.welcome-strip-tag::before {
  content: ''; width: 28px; height: 1px; background: rgba(244,237,224,0.6);
}
.welcome-strip-center {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 0 48px;
  gap: 28px;
}
.welcome-strip-headline {
  font-family: 'Newsreader', serif;
  font-weight: 300;
  font-size: clamp(64px, 11vw, 168px);
  line-height: 0.94;
  letter-spacing: -0.035em;
  color: var(--paper);
  margin: 0;
  text-shadow: 0 4px 32px rgba(0, 0, 0, 0.35);
}
.welcome-strip-headline em {
  font-style: italic;
  font-weight: 300;
}
.welcome-strip-sub {
  font-family: 'Newsreader', serif;
  font-size: 22px; font-weight: 300; font-style: italic;
  line-height: 1.45;
  color: rgba(244,237,224,0.9);
  max-width: 640px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.45);
}
.welcome-strip-bottom {
  position: relative; z-index: 2;
  padding: 0 48px 40px;
  display: flex; justify-content: space-between; align-items: end;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.2em;
  color: rgba(244,237,224,0.65);
  text-transform: uppercase;
}
.welcome-strip-caption {
  display: flex; align-items: center; gap: 10px;
  background: rgba(8,8,22,0.55);
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(244,237,224,0.18);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: rgba(244,237,224,0.85);
}
.welcome-strip-caption .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--gfp);
  box-shadow: 0 0 10px var(--gfp);
  animation: pulse 2.4s infinite;
}
.welcome-strip-scroll {
  display: flex; align-items: center; gap: 12px;
  letter-spacing: 0.22em;
}
.welcome-strip-scroll .arrow {
  display: inline-flex; align-items: center; gap: 6px;
}

#root { min-height: 100vh; }

a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
button { font: inherit; cursor: pointer; }

/* ---------- type families ---------- */
.t-serif   { font-family: 'Serotiva', 'Newsreader', Georgia, serif; }
.t-serif em, .h-display em, .lede em { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-weight: 400; }
.t-sans    { font-family: 'Sora', system-ui, sans-serif; }
.t-mono    { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* ---------- nav (now an MIT-Media-Lab-style tall photo hero) ---------- */
.nav.nav-hero {
  position: relative;
  display: block;
  padding: 0;
  height: 110vh;
  min-height: 820px;
  margin-bottom: 35px;
  border-bottom: none;
  overflow: hidden;
  isolation: isolate;
  color: var(--paper);
  background: #000;
}
.nav-hero-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('assets/hero-plants.jpg') center/cover no-repeat;
  filter: brightness(0.55) saturate(0.85);
  will-change: transform, filter;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}
.nav-hero-titleblock {
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.nav-hero-curtain {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.45) 0%,
      rgba(0, 0, 0, 0.10) 25%,
      rgba(0, 0, 0, 0.15) 55%,
      rgba(0, 0, 0, 0.55) 80%,
      rgba(0, 0, 0, 0.92) 95%,
      rgba(0, 0, 0, 1) 100%);
  will-change: opacity;
}
/* extra overlay used by scroll-driven darkening — fades the photo to black */
.nav-hero-darken {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}
.nav-hero-inner {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
  padding: 36px 56px 64px;
  column-gap: 32px;
  row-gap: 0;
}
.nav-hero .nav-logo {
  grid-column: 1;
  grid-row: 1;
}
.nav-burger {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  width: 56px;
  height: 56px;
  background: transparent;
  border: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
  z-index: 60;
  padding: 0;
}
.nav-burger:hover { background: rgba(244, 237, 224, 0.10); border-radius: 999px; }
.nav-burger span {
  display: block;
  width: 28px;
  height: 3px;
  background: var(--paper);
  border-radius: 3px;
  transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
}
.nav-burger.is-open span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; width: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* ---------- persistent fixed top bar (logo + hamburger) ---------- */
.nav-fixed {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 70 !important;
  height: 88px;
  padding: 0 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none; /* let scroll events through; children re-enable */
  --bar-fg: #f4ede0;     /* paper white over the photo */
  --bar-bg: transparent;
  background: var(--bar-bg);
  transition: background 0.35s ease, height 0.35s ease, padding 0.35s ease, border-color 0.35s ease;
  border-bottom: 1px solid transparent;
}
.nav-fixed.is-dark {
  --bar-fg: #1a1714;     /* ink */
  --bar-bg: rgba(244, 237, 224, 0.92);
  height: 64px;
  border-bottom-color: var(--rule);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
.nav-fixed-logo, .nav-fixed-burger { pointer-events: auto; }

.nav-fixed-logo {
  display: block;
  height: 56px;
  width: 240px;
  transition: height 0.35s ease, width 0.35s ease;
}
.nav-fixed.is-dark .nav-fixed-logo {
  height: 38px;
  width: 160px;
}
.nav-fixed-mark {
  width: 100%;
  height: 100%;
  background: url('assets/academia-sinica-full.png') left center/contain no-repeat;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
  transition: filter 0.35s ease;
}
.nav-fixed.is-dark .nav-fixed-mark {
  /* invert from white to dark — original logo file is white-on-transparent */
  filter: invert(1) brightness(0.18) drop-shadow(0 1px 4px rgba(0, 0, 0, 0.12));
}

.nav-fixed-burger {
  width: 56px;
  height: 56px;
  background: transparent;
  border: none;
  border-radius: 999px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s ease, width 0.35s ease, height 0.35s ease;
}
.nav-fixed-burger:hover { background: rgba(244, 237, 224, 0.10); border-radius: 999px; }
.nav-fixed.is-dark .nav-fixed-burger { width: 44px; height: 44px; }
.nav-fixed.is-dark .nav-fixed-burger:hover { background: rgba(26, 23, 20, 0.08); }
.nav-fixed-burger span {
  display: block;
  width: 28px;
  height: 3px;
  background: var(--bar-fg);
  border-radius: 3px;
  transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease, background 0.35s ease;
}
.nav-fixed.is-dark .nav-fixed-burger span { width: 22px; height: 2.5px; }
.nav-fixed-burger.is-open span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.nav-fixed-burger.is-open span:nth-child(2) { opacity: 0; width: 0; }
.nav-fixed-burger.is-open span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* ---------- inline horizontal nav inside the fixed bar ---------- */
.nav-fixed-links {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 30px;
}
.nav-fixed-links a {
  position: relative;
  padding: 4px 0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}
.nav-fixed-label {
  font-family: 'Sora', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.004em;
  color: var(--bar-fg);
  transition: color 0.35s ease, font-size 0.35s ease;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.18);
}
.nav-fixed.is-dark .nav-fixed-label {
  font-size: 15px;
  text-shadow: none;
}
/* dim the rest on hover for a focus effect */
.nav-fixed-links:hover a { opacity: 0.45; }
.nav-fixed-links a:hover { opacity: 1; }
.nav-fixed-links a.active .nav-fixed-label { color: var(--bar-fg); }
.nav-fixed-links a.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 2px;
  background: var(--gfp);
  border-radius: 2px;
}
.nav-fixed-div {
  width: 1px;
  height: 22px;
  background: var(--bar-fg);
  opacity: 0.4;
  transition: background 0.35s ease;
}

/* hamburger is a narrow-screen fallback now */
.nav-fixed-burger { display: none !important; }
@media (max-width: 1100px) {
  .nav-fixed-links { display: none; }
  .nav-fixed-burger { display: flex !important; }
}

/* single-page anchored sections clear the fixed top bar when scrolled to */
.lab-section { scroll-margin-top: 80px; }

/* hide old hero-inline logo/burger styles since we moved them to nav-fixed */
.nav-hero .nav-logo, .nav-hero .nav-burger { display: none; }
.nav-banner {
  position: fixed !important;
  top: 0;
  left: 0; right: 0;
  z-index: 70 !important;
  height: 64px;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(8, 10, 14, 0.86);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid rgba(244, 237, 224, 0.08);
  color: var(--paper);
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.35s ease;
  pointer-events: none;
}
.nav-banner.is-on {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.nav-banner-left {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--paper);
}
.nav-banner-mark {
  width: 120px;
  height: 32px;
  background: url('assets/academia-sinica-full.png') left center/contain no-repeat;
}
.nav-banner-title {
  font-family: 'Newsreader', serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--paper);
  padding-left: 16px;
  border-left: 1px solid rgba(244, 237, 224, 0.25);
}
.nav-banner-burger {
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  border-radius: 999px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s ease;
}
.nav-banner-burger:hover { background: rgba(244, 237, 224, 0.10); }
.nav-banner-burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--paper);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
}
.nav-banner-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-banner-burger.is-open span:nth-child(2) { opacity: 0; width: 0; }
.nav-banner-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-hero-titleblock {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: center;
  justify-self: center;
  text-align: center;
  max-width: 1100px;
}

/* Drawer menu */
.nav-menu-scrim {
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 16, 0.45);
  backdrop-filter: blur(2px);
  z-index: 55;
  animation: navScrimIn 0.25s ease both;
}
@keyframes navScrimIn { from { opacity: 0; } to { opacity: 1; } }

.nav-menu {
  position: fixed !important;
  top: 0;
  right: 0;
  width: min(440px, 90vw);
  height: 100vh;
  background: rgba(10, 14, 18, 0.92);
  backdrop-filter: blur(28px) saturate(1.2);
  -webkit-backdrop-filter: blur(28px) saturate(1.2);
  border-left: 1px solid rgba(244, 237, 224, 0.15);
  padding: 132px 56px 48px;
  z-index: 80 !important;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  display: flex;
  flex-direction: column;
}
.nav-menu.is-open { transform: translateX(0); }

.nav-menu-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav-menu-list a {
  display: flex;
  align-items: baseline;
  gap: 22px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(244, 237, 224, 0.10);
  font-family: 'Newsreader', serif;
  color: var(--paper);
  transition: color 0.2s ease, transform 0.4s ease, opacity 0.4s ease;
  opacity: 0;
  transform: translateX(28px);
}
.nav-menu.is-open .nav-menu-list a {
  opacity: 1;
  transform: translateX(0);
}
.nav-menu-list a:hover .nav-menu-label {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1.5px;
}
.nav-menu-list a.active .nav-menu-label {
  font-style: italic;
  color: var(--gfp);
}
.nav-menu-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(244, 237, 224, 0.45);
  min-width: 28px;
}
.nav-menu-label {
  font-size: 30px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.nav-hero .nav-mark {
  background: url('assets/academia-sinica-full.png') left center/contain no-repeat;
  width: 300px; height: 64px;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.5));
}
.nav-hero .nav-name .name {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  color: var(--paper);
  text-shadow: 0 2px 12px rgba(0,0,0,0.45);
}
.nav-hero-titleblock {
  align-self: center;
  justify-self: center;
  max-width: 1100px;
  text-align: center;
}
.nav-hero-title {
  font-family: 'Serotiva', 'Newsreader', serif;
  font-weight: 400;
  font-size: clamp(64px, 9vw, 144px);
  line-height: 0.94;
  letter-spacing: -0.034em;
  color: var(--paper);
  margin: 0 0 12px;
  text-shadow: 0 4px 36px rgba(0,0,0,0.4);
}
.nav-hero-tagline {
  font-family: 'JetBrains Mono', monospace;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.22em;
  line-height: 1.4;
  color: rgba(244, 237, 224, 0.85);
  margin: 0 auto;
  max-width: 40ch;
  text-shadow: 0 2px 14px rgba(0,0,0,0.4);
  text-transform: uppercase;
}
.nav-hero-rule {
  display: none;
}
.nav-hero .nav-links { display: none; }
.nav-hero .nav-links a {
  position: relative;
  padding: 4px 0;
  color: var(--paper);
  border: none;
  border-radius: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  font-family: 'Sora', sans-serif;
  font-size: 15px;
  letter-spacing: 0.01em;
  transition: border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.nav-hero .nav-links:hover a { opacity: 0.55; }
.nav-hero .nav-links a:hover {
  opacity: 1;
  color: var(--paper);
  border-bottom-color: var(--paper);
  background: transparent;
}
.nav-hero .nav-links a.active {
  border-bottom-color: var(--paper);
}
.nav-hero .nav-links a.active::after { content: none; }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 48px;
  border-bottom: 1px solid var(--rule);
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  position: sticky;
  top: 0;
  background: rgba(244, 237, 224, 0.92);
  backdrop-filter: blur(14px);
  z-index: 50;
}
.nav-logo { display: flex; align-items: center; gap: 14px; }
.nav-mark {
  width: 42px; height: 42px; border-radius: 50%;
  background: url('assets/academia-sinica-logo.png') center/cover no-repeat;
  position: relative;
  flex-shrink: 0;
}
.nav-mark::after { content: none; }
.nav-name { line-height: 1.15; }
.nav-name .name {
  font-family: 'Newsreader', serif; font-style: italic;
  font-size: 18px; font-weight: 500;
}
.nav-name .sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.14em;
  color: var(--ink-soft); text-transform: uppercase;
}
.nav-links { display: flex; gap: 28px; }
.nav-links a {
  position: relative;
  padding: 6px 14px;
  color: var(--ink);
  border: 1px solid transparent;
  border-radius: 999px;
  transition: color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease, background 0.25s ease;
}
.nav-links:hover a {
  opacity: 0.35;
}
.nav-links a:hover {
  opacity: 1;
  color: var(--ink);
  border-color: var(--ink);
  background: rgba(26, 23, 20, 0.04);
}
.nav-links a.active { color: var(--ink); }
.nav-links a.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--gfp);
}
.nav-status, .nav-dot { display: none !important; }
.nav-status {
  display: flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; color: var(--ink-soft);
  letter-spacing: 0.12em;
}
.nav-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gfp);
  box-shadow: 0 0 8px var(--gfp);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}

/* ---------- shared bits ---------- */
.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::before {
  content: ''; width: 36px; height: 1px;
  background: var(--ink); display: inline-block;
}

.section-head {
  display: flex; justify-content: space-between; align-items: end;
  padding-top: 22px; margin-bottom: 44px;
  gap: 32px;
}

.section-no {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 0.18em;
  color: var(--ink-soft); text-transform: uppercase;
  margin-bottom: 14px;
}

.h-display {
  font-family: 'Serotiva', 'Newsreader', serif;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 0.96;
  color: var(--ink);
}

.lede {
  font-family: 'Serotiva', 'Newsreader', serif;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink);
}

.btn {
  padding: 12px 22px;
  border-radius: 999px;
  font-family: 'Sora', sans-serif;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  cursor: pointer;
}
.btn-primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn-primary:hover { background: var(--navy); border-color: var(--navy); }
.btn-ghost {
  background: transparent; color: var(--ink); border-color: var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-text {
  font-family: 'Sora', sans-serif; font-size: 13.5px;
  border-bottom: 1px solid var(--ink); padding-bottom: 2px;
  display: inline-block; transition: color 0.2s ease;
}
.btn-text:hover { color: var(--navy); border-color: var(--navy); }

/* placeholders */
.img-ph {
  width: 100%; height: 100%;
  background: repeating-linear-gradient(135deg, var(--paper-deep) 0 14px, var(--paper) 14px 28px);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 14px;
}
.img-cover {
  width: 100%; height: 100%;
  background-size: cover; background-position: center;
}

/* ---------- footer ---------- */
.footer {
  background: var(--ink); color: var(--paper);
  padding: 72px 48px 32px;
  font-family: 'Sora', sans-serif; font-size: 13px;
  margin-top: 80px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
}
.footer-brand .name {
  font-family: 'Newsreader', serif; font-style: italic;
  font-size: 30px; line-height: 1;
}
.footer-brand p {
  margin-top: 14px; color: rgba(244,237,224,0.7);
  max-width: 320px; line-height: 1.5;
}
.footer-brand .addr {
  margin-top: 18px;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  color: rgba(244,237,224,0.55); line-height: 1.8;
}
.footer-col h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.16em;
  color: var(--gfp); text-transform: uppercase;
  margin-bottom: 14px; font-weight: 400;
}
.footer-col ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 9px;
  color: rgba(244,237,224,0.85);
}
.footer-col li { cursor: pointer; transition: color 0.2s; }
.footer-col li:hover { color: var(--gfp); }
.footer-rule {
  border-top: 1px solid rgba(244,237,224,0.15);
  padding-top: 22px;
  display: flex; justify-content: space-between;
  color: rgba(244,237,224,0.45);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
}

/* utility */
.container { padding: 0 48px; }
.section { padding: 80px 48px; }
.section-tight { padding: 56px 48px; }
.divider { height: 1px; background: var(--rule); width: 100%; }
.divider-strong { height: 1px; background: var(--ink); width: 100%; }

.fade-in {
  animation: fadeIn 0.5s ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* fluorescent dot/disc element */
.fluor {
  width: var(--s, 16px); height: var(--s, 16px);
  border-radius: 50%; display: inline-block; position: relative;
  background: radial-gradient(
    circle at 38% 35%,
    rgba(255,255,255,0.9) 0%,
    var(--c, var(--gfp)) 10%,
    var(--c, var(--gfp)) 22%,
    color-mix(in srgb, var(--c, var(--gfp)) 65%, transparent) 40%,
    color-mix(in srgb, var(--c, var(--gfp)) 30%, transparent) 62%,
    transparent 80%
  );
  mix-blend-mode: screen;
  vertical-align: middle;
}

/* tag pills */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
}
.tag-solid {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.tag-gfp { background: var(--gfp); color: var(--ink); border-color: var(--gfp); }
.tag-rfp { background: var(--rfp); color: white; border-color: var(--rfp); }
.tag-cfp { background: var(--cfp); color: var(--ink); border-color: var(--cfp); }
.tag-navy { background: var(--navy); color: var(--paper); border-color: var(--navy); }

/* ---------- title page (subtle on light beige) ---------- */
.title-glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0)) !important;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.title-glass::before, .title-glass::after { content: none; }
/* keep nav legible — flat paper-toned glass (only when not the photo hero) */
.nav:not(.nav-hero) { background: rgba(244, 237, 224, 0.85); backdrop-filter: blur(14px) saturate(1.1); }
.bg-flux {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  transition: filter 0.6s linear;
  opacity: 0.35;
}
.bg-flux-blob {
  position: absolute;
  width: 60vw;
  height: 60vw;
  border-radius: 50%;
  filter: blur(70px);
  mix-blend-mode: multiply;
  opacity: 0.55;
  will-change: transform;
  transition: transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.bg-flux-blob.b1 {
  background: radial-gradient(circle at 35% 35%, rgba(63, 201, 122, 0.45), transparent 65%);
  animation: flux-drift-1 26s ease-in-out infinite;
}
.bg-flux-blob.b2 {
  background: radial-gradient(circle at 35% 35%, rgba(232, 84, 107, 0.32), transparent 65%);
  animation: flux-drift-2 32s ease-in-out infinite;
  width: 55vw; height: 55vw;
}
.bg-flux-blob.b3 {
  background: radial-gradient(circle at 35% 35%, rgba(94, 201, 212, 0.38), transparent 65%);
  animation: flux-drift-3 38s ease-in-out infinite;
  width: 50vw; height: 50vw;
}
.bg-flux-blob.b4 {
  background: radial-gradient(circle at 35% 35%, rgba(217, 158, 58, 0.30), transparent 65%);
  animation: flux-drift-4 30s ease-in-out infinite;
  width: 45vw; height: 45vw;
}
.bg-flux-blob.b5 {
  background: radial-gradient(circle at 35% 35%, rgba(63, 201, 122, 0.28), transparent 65%);
  animation: flux-drift-5 44s ease-in-out infinite;
  width: 70vw; height: 70vw;
}
@keyframes flux-drift-1 {
  0%, 100% { translate: 0 0; }
  33%      { translate: 8vw 6vh; }
  66%      { translate: -4vw 12vh; }
}
@keyframes flux-drift-2 {
  0%, 100% { translate: 0 0; }
  50%      { translate: -10vw -8vh; }
}
@keyframes flux-drift-3 {
  0%, 100% { translate: 0 0; }
  40%      { translate: -6vw 10vh; }
  80%      { translate: 12vw -4vh; }
}
@keyframes flux-drift-4 {
  0%, 100% { translate: 0 0; }
  50%      { translate: 8vw -10vh; }
}
@keyframes flux-drift-5 {
  0%, 100% { translate: 0 0; }
  25%      { translate: -8vw 4vh; }
  75%      { translate: 6vw -8vh; }
}
.bg-flux-grain {
  position: absolute;
  inset: -20%;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(0,0,0,0.04) 0%, transparent 35%),
    radial-gradient(circle at 75% 75%, rgba(0,0,0,0.03) 0%, transparent 35%);
  mix-blend-mode: multiply;
  opacity: 0.5;
}
@media (prefers-reduced-motion: reduce) {
  .bg-flux-blob { animation: none !important; }
  .bg-flux { transition: none; }
}

/* navy bottom strip — sits below the main footer */
.footer-strip {
  background: var(--navy-deep);
  color: rgba(244, 237, 224, 0.85);
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  padding: 24px 48px 22px;
  text-align: center;
  position: relative;
  z-index: 2;
}
.footer-strip-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  letter-spacing: 0.01em;
}
.footer-strip-row + .footer-strip-row {
  margin-top: 10px;
}
.footer-strip-row-quiet {
  color: rgba(244, 237, 224, 0.55);
  font-size: 12.5px;
}
.footer-strip-sep {
  opacity: 0.4;
}

/* lift content above the flux layer */
.nav, .footer, .footer-strip, .page-enter, #root > * { position: relative; z-index: 1; }
.nav.nav-hero { z-index: 1; }

/* ---------- recent-publications carousel ---------- */
.lf-pubpanel {
  background: #0a0a0a; border-radius: clamp(22px, 3vw, 40px);
  padding: clamp(44px, 5vw, 76px) clamp(24px, 4vw, 64px) clamp(32px, 4vw, 56px);
}
.lf-joinpanel {
  background: #0a0a0a; border-radius: clamp(22px, 3vw, 40px);
  padding: clamp(56px, 7vw, 104px) clamp(28px, 4vw, 72px) clamp(48px, 6vw, 88px);
}

/* ---------- recent-publications: arrow-driven centre deck ---------- */
.pub-deck { position: relative; width: 100%; outline: none; }
.pub-deck-stage {
  position: relative;
  width: 100%;
  height: clamp(360px, 58vh, 560px);
  margin-top: clamp(84px, 12vh, 148px);   /* clear the heading above so the fanned cards don't overlap it */
}
.pub-deck-card {
  position: absolute;
  left: 50%; top: 50%;
  transform-origin: 50% 50%;
  width: min(760px, 100%);
  height: clamp(330px, 56vh, 520px);
  display: grid;
  grid-template-columns: minmax(0, 50%) 1fr;
  align-items: stretch;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  border: none;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 22px 50px -24px rgba(0,0,0,0.4);
  will-change: transform, filter;
  transition: transform 0.78s cubic-bezier(0.22, 1, 0.36, 1), filter 0.78s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Laptop/desktop only: widen the card + image column so the figure's caption is legible.
   Mobile (≤760px) overrides grid-template-columns to 1fr, so it's unaffected. */
@media (min-width: 761px) {
  .pub-deck-stage { height: clamp(440px, 66vh, 660px); }
  .pub-deck-card { width: min(900px, 100%); height: clamp(420px, 64vh, 640px); grid-template-columns: minmax(0, 62%) 1fr; }
}
.pub-deck-ctrl {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 2vw, 26px);
  margin-top: clamp(20px, 3vw, 36px);
}
.pub-deck-arrow {
  appearance: none; cursor: pointer;
  width: auto; height: auto; border-radius: 0;
  background: none; border: none;
  color: rgba(255,255,255,0.55); font-size: 28px; line-height: 1;
  padding: 6px 10px;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.25s ease, opacity 0.25s ease, transform 0.2s ease;
}
.pub-deck-arrow:hover:not(:disabled) { background: none; color: #fff; border-color: transparent; transform: scale(1.12); }
.pub-deck-arrow:disabled { opacity: 0.28; cursor: default; }
.pub-deck-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.pub-deck-dots {
  display: flex; align-items: center; gap: 10px;
}.pub-deck-dot {
  appearance: none; border: none; background: none;
  padding: 9px 5px; margin: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.pub-deck-dot::before {
  content: ""; display: block;
  width: 8px; height: 8px; border-radius: 999px;
  background: rgba(255,255,255,0.3);
  transition: background 0.3s ease, width 0.3s ease;
}
.pub-deck-dot:hover::before { background: rgba(255,255,255,0.6); transform: none; }
.pub-deck-dot.on::before { background: #fff; width: 8px; transform: none; box-shadow: none; }
.pub-deck-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 50%; }
.pub-stk-fig {
  position: relative;
  overflow: hidden;
  background: transparent;
  min-height: 200px;
}
.pub-stk-fig.is-contain .img-cover {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-origin: content-box;
  padding: clamp(18px, 2.4vw, 40px);
}
.pub-stk-body {
  padding: clamp(22px, 2.6vw, 40px) clamp(22px, 2.6vw, 44px);
  display: flex; flex-direction: column;
  gap: clamp(10px, 1.2vw, 16px);
  min-width: 0;
}
.pub-stk-mast {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 12px; border-bottom: 1px solid var(--ink);
}
.pub-stk-title {
  font-size: clamp(18px, 2vw, 29px); line-height: 1.12;
  font-weight: 500; letter-spacing: -0.015em; margin: 0;
}
.pub-stk-sub { font-weight: 300; font-style: italic; color: var(--ink-soft); }
.pub-stk-authors {
  font-size: clamp(12px, 1.1vw, 14px); color: var(--ink-soft); line-height: 1.5; margin: 0;
}
.pub-stk-desc {
  font-size: clamp(13px, 1.05vw, 15px); line-height: 1.5; font-weight: 300; color: var(--ink); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.pub-stk-foot {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--rule);
  display: flex; justify-content: flex-end; align-items: flex-end; gap: 14px;
}
.pub-stk-meta {
  font-size: 12px; color: var(--ink-soft); letter-spacing: 0.06em;
  text-transform: uppercase; line-height: 1.3;
}
.pub-stk-cite { font-size: clamp(11px, 1vw, 13px); color: var(--ink-soft); letter-spacing: 0.02em; line-height: 1.45; margin: 4px 0 0; }
.pub-stk-read { font-size: 12px; color: var(--ink); letter-spacing: 0.08em; white-space: nowrap; }
@media (max-width: 720px) {
  .pub-stk { grid-template-columns: 1fr; }
  .pub-stk-fig { min-height: 150px; border-right: none; border-bottom: 1px solid var(--rule); }
  .pub-stk-desc { -webkit-line-clamp: 3; }
}

/* ====================== HERO: ANIMATED GRADIENT BG + CURVED OVERLAP ====================== */
.lf-herobg { background: #000000; }
.lf-herobg-grad {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(125deg, #000000 0%, #0a0a12 26%, #161020 50%, #0a0e1a 74%, #000000 100%);
  background-size: 320% 320%;
  animation: lf-heroflow 22s ease-in-out infinite;
}
@keyframes lf-heroflow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.lf-herobg-photo {
  position: absolute; left: 0; right: 0; top: -18%; height: 136%; z-index: 1; pointer-events: none;
  background: url("assets/hero-group.png?v=3") center 32% / cover no-repeat;
  transform: translateY(0) scale(1.06);
  will-change: transform;
}
.lf-herobg-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(7,11,34,0.30) 0%, rgba(7,11,34,0.08) 32%, rgba(7,11,34,0.45) 64%, rgba(3,5,16,0.86) 88%, #04050f 100%);
}
.lf-herobg-glow {
  position: absolute; z-index: 1; pointer-events: none;
  width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
  right: -10%; top: -20%; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(120,140,220,0.20) 0%, rgba(70,60,140,0.10) 38%, transparent 68%);
  filter: blur(40px);
  animation: lf-heroglow 16s ease-in-out infinite alternate;
}
@keyframes lf-heroglow {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.9; }
  100% { transform: translate(-12vw, 10vh) scale(1.25); opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
  .lf-herobg-grad, .lf-herobg-glow { animation: none; }
}
.lf-hero-headline { font-family: var(--font-display); font-weight: 700; color: #ffffff; }
.lf-hero-headline .lf-rise-word { color: inherit; }

/* ---- hero kicker + tagline ---- */
.lf-hero-kicker {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(12px, 1.1vw, 15px); letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(200,214,255,0.85); margin: 0 0 clamp(14px, 1.8vw, 22px); text-align: center;
  animation: lf-rise 0.7s cubic-bezier(0.22,0.61,0.36,1) both;
}
.lf-hero--split .lf-hero-kicker { text-align: left; }
.lf-hero-tagline {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(17px, 1.7vw, 26px); line-height: 1.35; color: rgba(214,224,255,0.92);
  margin: clamp(20px, 2.4vw, 30px) 0 0; max-width: 30ch;
  animation: lf-rise 0.8s cubic-bezier(0.22,0.61,0.36,1) 0.5s both;
}

/* ---- FRAMED: contained rounded photo panel ---- */
.lf-hero-frame {
  position: relative; z-index: 2;
  margin: clamp(18px, 2.4vw, 32px) auto 0;
  width: 100%; max-width: 920px;
  border-radius: clamp(18px, 2.4vw, 30px);
  overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(4,8,30,0.75), 0 0 0 1px rgba(255,255,255,0.08) inset;
  aspect-ratio: 16 / 9;
}
.lf-hero-frame-photo {
  position: absolute; inset: 0;
  background: url("assets/hero-group.png?v=5") center center / cover no-repeat;
}
/* ---- SPLIT ---- */
.lf-hero-split-grid {
  display: flex; flex-wrap: wrap; gap: clamp(24px, 3vw, 52px);
  align-items: center; justify-content: center;
}
.lf-hero-split-copy { flex: 0 1 auto; margin-left: clamp(16px, 5vw, 90px); }
.lf-hero-frame--split { margin-top: 0; flex: 0 1 640px; max-width: 640px; width: 100%; aspect-ratio: 16 / 9; }
@media (max-width: 860px) {
  .lf-hero-split-grid { gap: clamp(16px, 4vw, 28px); }
  .lf-hero-frame--split { aspect-ratio: 16 / 9; }
  .lf-hero-split-copy { margin-left: 0 !important; text-align: center; width: 100%; }
  .lf-hero-split-copy .lf-hero-headline { text-align: center !important; }
  .lf-hero--split { padding-top: clamp(54px, 13vw, 74px) !important; padding-bottom: clamp(60px, 12vw, 110px) !important; }
}

/* ---- variant switcher ---- */
.lf-hero-switch {
  position: absolute; z-index: 5; left: 50%; bottom: clamp(20px, 3vw, 34px);
  transform: translateX(-50%);
  display: flex; gap: 4px; padding: 4px;
  background: rgba(12,18,46,0.55); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 999px;
}
.lf-hero-switch-btn {
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  color: rgba(220,228,255,0.78); background: transparent; border: 0;
  padding: 7px 16px; border-radius: 999px; cursor: pointer; transition: all 0.2s ease;
}
.lf-hero-switch-btn:hover { color: #fff; }
.lf-hero-switch-btn.is-on { background: #fff; color: #131a36; }

/* research-focus panel curves up over the dark hero */
.lf-curve-top {
  background: var(--paper);
  border-top-left-radius: clamp(28px, 4vw, 56px);
  border-top-right-radius: clamp(28px, 4vw, 56px);
  margin-top: clamp(-72px, -6vw, -40px);
  position: relative;
  z-index: 3;
}
.pub-carousel { outline: none; margin-top: 4px; }
.pub-stage {
  position: relative;
  height: clamp(330px, 46vh, 400px);
  perspective: 1800px;
  overflow: hidden;
}
.pub-slot {
  position: absolute;
  left: 50%;
  top: 0;
  width: 280px;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
              filter 0.55s ease, opacity 0.55s ease;
  will-change: transform, opacity, filter;
}
.pub-card {
  display: flex;
  flex-direction: column;
  width: 280px;
  height: auto;
  background: var(--paper);
  color: var(--ink);
  border: none;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.14);
  transition: box-shadow 0.4s ease;
}
.pub-slot.is-active .pub-card {
  box-shadow: 0 36px 90px rgba(0, 0, 0, 0.22), 0 10px 26px rgba(0, 0, 0, 0.12);
}
.pub-card-fig {
  position: relative;
  height: 150px;
  flex-shrink: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-deep);
}
.pub-card-figtag {
  position: absolute; top: 10px; left: 10px;
  background: var(--paper); color: var(--ink);
  padding: 3px 8px; border-radius: 4px;
  font-size: 9px; letter-spacing: 0.12em;
}
.pub-card-metric { position: absolute; bottom: 10px; right: 10px; background: var(--ink) !important; color: var(--paper) !important; border-color: var(--ink) !important; }
.pub-card-body {
  flex: 1;
  min-height: 0;
  padding: 14px 18px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.pub-card-meta {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
}
.pub-card-title {
  font-size: 18px; line-height: 1.2; font-weight: 500; letter-spacing: -0.01em;
}
.pub-card-sub { font-weight: 300; font-style: italic; color: var(--ink-soft); }
.pub-card-authors {
  font-size: 11.5px; color: var(--ink-soft);
  line-height: 1.45;
}
.pub-card-summary {
  font-size: 13px; line-height: 1.45; font-weight: 300; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pub-card-foot {
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
.pub-card-cite { font-size: 10px; color: var(--ink-soft); letter-spacing: 0.04em; line-height: 1.3; }
.pub-card-read { font-size: 10px; color: var(--gfp); letter-spacing: 0.08em; white-space: nowrap; }
.pub-slot:not(.is-active) .pub-card-read { opacity: 0; }

.pub-controls {
  display: flex; align-items: center; justify-content: center; gap: 24px;
  margin-top: 44px;
}
.pub-arrow {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  font-size: 17px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.pub-arrow:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.pub-arrow:disabled { opacity: 0.28; cursor: default; }
/* arrows sit on the black publications panel — render them light */
.lf-pubpanel .pub-arrow { border-color: rgba(255,255,255,0.45); color: #fff; }
.lf-pubpanel .pub-arrow:hover:not(:disabled) { background: #fff; color: var(--ink); border-color: #fff; }
.pub-dots { display: flex; gap: 8px; align-items: center; }
.pub-dot {
  width: 8px; height: 8px; border-radius: 50%; padding: 0;
  border: none; background: var(--rule); cursor: pointer;
  transition: background 0.25s ease, width 0.25s ease, border-radius 0.25s ease;
}
.pub-dot.is-active { width: 26px; border-radius: 4px; background: var(--gfp); }

/* =====================================================================
   ░░  LOAF OVERRIDES  ░░
   White ground, near-black ink, one bold grotesque, oversized editorial
   type, generous whitespace, hairline rules, circle-arrow affordances,
   scroll-reveal motion. These rules win by source order.
   ===================================================================== */

/* kill synthetic italics site-wide → every legacy <em>/italic renders
   upright in the grotesque (Loaf has no italics). Real weights still load. */
* { font-synthesis: none; }

/* --- type families: everything is the grotesque --- */
.t-serif, .h-display, .lede, .t-sans, .t-mono,
.hl-h1, .hl-h2, .hl-h3, .hl-h4, .hl-focus-title, .hl-pub-title, .hl-pub-authors,
.hl-pi-name, .hl-pi-role, .hl-pi-bio, .hl-member-name, .hl-member-role, .hl-member-affil,
.hl-contact-lead, .hl-link, .hl-link-inline, .nav-hero-title, .nav-hero-tagline,
.welcome-strip-headline, .welcome-strip-sub, .eyebrow, .section-no, .tag, .btn,
.footer, .footer-strip, .pub-card-title, .pub-card-meta {
  font-family: var(--font-display) !important;
}
/* emphasis in titles + subtitles render in the elegant serif italic — the
   "Sales, Engineered" pairing: bold grotesque + high-contrast serif italic */
.t-serif em, .h-display em, .lede em, .hl-h1 em, .hl-h2 em, .hl-h3 em,
.welcome-strip-headline em, .nav-hero-title em, .pub-card-sub,
.lf-title em, h1 em, h2 em, h3 em {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em;
}
.ap-title em { font-family: var(--font-serif) !important; font-style: italic !important; font-weight: 500 !important; }

/* emphasis words carry the green accent in the major section headings.
   (publication-dial subtitles override back to ink-soft below, so they
   are unaffected) */
.lf-gradtext em { color: var(--gfp-deep); }
.lf-pubpanel h2 em,
.lf-acc-h em,
.lf-joinpanel h2 em { color: var(--gfp-on-dark); }

/* any <em> across the site = the elegant serif italic accent */
em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
}
/* subtitle / lede voice = serif italic, slightly larger for the editorial feel */
.lf-sub {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

/* headlines — bold, tight, confident */
.h-display { font-weight: 700; letter-spacing: -0.032em; line-height: 0.98; text-wrap: balance; }
.lede { font-weight: 400; }
.t-serif { font-weight: 500; }

/* small tracked labels stay tracked but lose the techno-mono flavor */
.t-mono { letter-spacing: 0.14em; }
/* ============ Research Focus — Option D (split, green accent) ============ */
.lf-rf2 {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 92px);
  align-items: start; max-width: 1180px; margin: 0 auto;
}
.lf-rf2-eyebrow, .lf-rf2-mlabel {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.lf-rf2-eyebrow { color: var(--gfp-deep); margin-bottom: clamp(20px, 2.4vw, 30px); }
.lf-rf2-mlabel { color: var(--ink); margin: clamp(30px, 4vw, 46px) 0 4px; }
.lf-rf2-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gfp); flex-shrink: 0; }
.lf-rf2-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(32px, 3.6vw, 52px); line-height: 1.05;
  letter-spacing: -0.032em; color: var(--ink); margin: 0; text-wrap: pretty;
}
.lf-rf2-title em { color: var(--gfp-deep); letter-spacing: -0.008em; }
/* one-time typewriter */
.lf-rf2-title .tw-hidden { opacity: 0; }
.lf-rf2-title .tw-cursor { position: relative; }
.lf-rf2-title .tw-cursor::after {
  content: ''; position: absolute; right: -0.08em; top: 0.1em; bottom: 0.06em;
  width: 0.06em; background: var(--gfp); border-radius: 1px;
  animation: tw-blink 0.9s steps(1) infinite;
}
@keyframes tw-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .lf-rf2-title .tw-hidden { opacity: 1; }
  .lf-rf2-title .tw-cursor::after { display: none; }
}
.lf-rf2-body {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(16px, 1.4vw, 19px); line-height: 1.62; color: var(--ink-read);
  margin: 0; text-align: justify; -webkit-hyphens: none; hyphens: none;
}
.lf-rf2-body strong { color: inherit; font-weight: inherit; }
.lf-rf2-missions { display: flex; flex-direction: column; }
.lf-rf2-m {
  display: flex; align-items: center; gap: 18px;
  padding: clamp(15px, 1.6vw, 19px) 0; border-top: 1px solid var(--rule);
}
.lf-rf2-m:last-child { border-bottom: 1px solid var(--rule); }
.lf-rf2-ic {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: rgba(12,12,12,0.05); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.lf-rf2-ic svg { width: 25px; height: 25px; stroke-width: 1.5; }
.lf-rf2-mt {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(15px, 1.3vw, 17px); line-height: 1.28;
  letter-spacing: -0.005em; color: var(--ink);
}
.lf-rf2-mt br { display: none; }
@media (max-width: 900px) {
  .lf-rf2 { grid-template-columns: 1fr; gap: clamp(30px, 6vw, 44px); }
  .lf-rf2-body { text-align: left; }
}

.eyebrow { font-weight: 600; letter-spacing: 0.18em; }
.eyebrow::before { background: var(--ink); }
.section-no { font-weight: 600; color: var(--ink-soft); }

/* --- links: clean underline-reveal --- */
a { color: inherit; }

/* --- buttons: flat, confident --- */
.btn { font-weight: 600; letter-spacing: 0.01em; border-radius: 999px; }
.btn-text { font-weight: 600; }

/* --- tags: strip all colour, minimal mono pill --- */
.tag {
  border-color: var(--ink); color: var(--ink);
  background: transparent; font-weight: 600; letter-spacing: 0.14em;
}
.tag-solid, .tag-gfp, .tag-rfp, .tag-cfp, .tag-navy {
  background: var(--ink) !important; color: var(--paper) !important; border-color: var(--ink) !important;
}

/* fluorescent discs / particle bg / flux — all gone in a flat white world */
.bg-flux, .fluor { display: none !important; }

/* ====================== FIXED TOP BAR (Loaf) ====================== */
.lf-bar {
  position: fixed !important; top: clamp(12px, 1.6vw, 22px); left: clamp(12px, 2.2vw, 30px); right: clamp(12px, 2.2vw, 30px); z-index: 90 !important;
  height: 66px; padding: 0 clamp(16px, 2.2vw, 30px);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: rgba(250, 249, 245, 0.78);
  -webkit-backdrop-filter: saturate(1.4) blur(18px); backdrop-filter: saturate(1.4) blur(18px);
  border: 1px solid rgba(12,12,12,0.07);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.07);
  transition: height 0.3s ease, box-shadow 0.3s ease, top 0.3s ease, background 0.3s ease;
}
.lf-bar.is-scrolled { height: 58px; box-shadow: 0 14px 36px rgba(0,0,0,0.13); background: rgba(250, 249, 245, 0.9); }

/* transparent over the dark hero — text only, white */
.lf-bar.on-hero {
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-color: transparent;
  box-shadow: none;
}
.lf-bar.on-hero .lf-logo-img { filter: brightness(0) invert(1); }
.lf-bar.on-hero .lf-logo-word { color: #fff; border-left-color: rgba(255,255,255,0.3); }
.lf-bar.on-hero .lf-nav a { color: #fff; }
.lf-bar.on-hero .lf-nav a::after { background: #fff; }
.lf-bar.on-hero .lf-nav a.active::after { background: var(--gfp-on-dark); }
.lf-bar.on-hero .lf-nav:hover a { opacity: 0.5; }
.lf-bar.on-hero .lf-nav a:hover { opacity: 1; }

/* ---- Hamburger button ---- */
.lf-burger {
  margin-left: auto; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  background: transparent; border: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lf-burger-box {
  position: relative; display: block; width: 26px; height: 16px;
}
.lf-burger-line {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: var(--ink);
  transition: transform 0.34s cubic-bezier(0.22,0.61,0.36,1), opacity 0.2s ease, background 0.3s ease, width 0.34s cubic-bezier(0.22,0.61,0.36,1);
}
.lf-burger-line:nth-child(1) { top: 0; }
.lf-burger-line:nth-child(2) { top: 7px; width: 70%; }
.lf-burger-line:nth-child(3) { top: 14px; }
.lf-burger:hover .lf-burger-line:nth-child(2) { width: 100%; }
.lf-bar.on-hero .lf-burger-line { background: #fff; }
/* open → X */
.lf-burger.is-open .lf-burger-line:nth-child(1) { top: 7px; transform: rotate(45deg); }
.lf-burger.is-open .lf-burger-line:nth-child(2) { opacity: 0; width: 0; }
.lf-burger.is-open .lf-burger-line:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* ---- Slide-out drawer (expands to the left) ---- */
.lf-scrim {
  position: fixed; inset: 0; z-index: 86;
  background: rgba(10,10,10,0.34); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: opacity 0.34s ease, visibility 0.34s ease;
}
.lf-scrim.is-open { opacity: 1; visibility: visible; }
.lf-drawer {
  position: fixed; top: 0; right: 0; z-index: 88;
  height: 100%; width: 100vw; max-width: 100vw;
  background: #faf9f5;
  transform: translateX(105%);
  transition: transform 0.42s cubic-bezier(0.16,0.84,0.30,1);
  overflow-y: auto;
}
.lf-drawer.is-open { transform: translateX(0); }
.lf-drawer-inner {
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  padding: clamp(96px, 13vh, 132px) clamp(28px, 5vw, 48px) 40px;
}
.lf-drawer-link {
  display: block; text-decoration: none; color: var(--ink); text-align: center;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(22px, 3.4vw, 28px); letter-spacing: -0.02em;
  line-height: 1.18; padding: 11px 0;
  opacity: 0; transform: translateX(18px);
  transition: opacity 0.2s ease, color 0.18s ease;
}
.lf-drawer.is-open .lf-drawer-link {
  opacity: 1; transform: translateX(0);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16,0.84,0.30,1), color 0.18s ease;
}
.lf-drawer-link:hover { color: var(--gfp, #3fc97a); }
.lf-drawer-link.active { color: var(--gfp, #3fc97a); }
.lf-drawer-sub {
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  margin: 2px 0 6px; padding-left: 0; text-align: center;
}
.lf-drawer-sublink {
  text-decoration: none; color: var(--ink-soft, #5b524a);
  font-family: var(--font-display); font-weight: 500; font-size: 15.5px;
  padding: 7px 0; transition: color 0.16s ease;
}
.lf-drawer-sublink:hover { color: var(--ink); }
/* stagger the link reveal */
.lf-drawer.is-open .lf-drawer-inner > *:nth-child(1) .lf-drawer-link,
.lf-drawer.is-open .lf-drawer-inner > a:nth-child(1) { transition-delay: 0.06s; }
.lf-drawer.is-open .lf-drawer-inner > *:nth-child(2) .lf-drawer-link,
.lf-drawer.is-open .lf-drawer-inner > a:nth-child(2) { transition-delay: 0.11s; }
.lf-drawer.is-open .lf-drawer-inner > *:nth-child(3) .lf-drawer-link,
.lf-drawer.is-open .lf-drawer-inner > a:nth-child(3) { transition-delay: 0.16s; }
.lf-drawer.is-open .lf-drawer-inner > *:nth-child(4) .lf-drawer-link,
.lf-drawer.is-open .lf-drawer-inner > a:nth-child(4) { transition-delay: 0.21s; }
.lf-drawer.is-open .lf-drawer-inner > *:nth-child(5) .lf-drawer-link,
.lf-drawer.is-open .lf-drawer-inner > a:nth-child(5) { transition-delay: 0.26s; }
.lf-drawer.is-open .lf-drawer-inner > *:nth-child(6) .lf-drawer-link,
.lf-drawer.is-open .lf-drawer-inner > a:nth-child(6) { transition-delay: 0.31s; }
@media (prefers-reduced-motion: reduce) {
  .lf-drawer, .lf-drawer-link { transition: none !important; }
  .lf-drawer-link { opacity: 1; transform: none; }
}

/* Academia Sinica logo lockup */
.lf-logo {
  display: inline-flex; align-items: center; gap: 14px;
  text-decoration: none; color: var(--ink); cursor: pointer; flex-shrink: 0;
}
.lf-logo-img {
  height: 42px; width: auto; display: block;
  filter: invert(1) brightness(0.12);
  transition: height 0.3s ease;
}
.lf-bar.is-scrolled .lf-logo-img { height: 34px; }
.lf-logo-word {
  font-family: var(--font-display); font-weight: 500; font-size: 22px;
  letter-spacing: -0.03em; line-height: 1; color: var(--ink);
  padding-left: 14px; border-left: 1px solid var(--rule); white-space: nowrap;
}
@media (max-width: 600px) { .lf-logo-word { display: none; } }

/* inline horizontal nav links */
.lf-nav {
  display: flex; align-items: center; gap: clamp(14px, 1.8vw, 30px);
  flex-wrap: wrap; justify-content: flex-end;
}
.lf-nav a {
  position: relative; text-decoration: none; color: var(--ink);
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  letter-spacing: -0.005em; white-space: nowrap; padding: 4px 0;
  transition: opacity 0.2s ease;
}
.lf-nav:hover a { opacity: 0.4; }
.lf-nav a:hover { opacity: 1; }
.lf-nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -1px; height: 2px;
  background: var(--ink); transition: right 0.28s cubic-bezier(0.22,0.61,0.36,1);
}
.lf-nav a:hover::after { right: 0; }
.lf-nav a.active::after { right: 0; background: var(--gfp); }
.lf-nav a.active { opacity: 1; }

/* ---- Members dropdown ---- */
.lf-navgroup { position: relative; }
.lf-nav .lf-navgroup-trigger { display: inline-flex; align-items: center; gap: 5px; }
.lf-navgroup-caret { font-size: 10px; line-height: 1; transition: transform 0.24s ease; opacity: 0.85; }
.lf-navgroup:hover .lf-navgroup-caret { transform: rotate(180deg); }
.lf-dropdown {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 220px; padding: 8px;
  background: var(--paper, #f3f1ea); border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px; box-shadow: 0 18px 40px -16px rgba(0,0,0,0.28);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 60;
}
/* bridge the gap so hover doesn't drop */
.lf-dropdown::before { content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.lf-navgroup:hover .lf-dropdown,
.lf-navgroup:focus-within .lf-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.lf-dropdown a {
  display: block; padding: 11px 14px; border-radius: 10px;
  font-family: var(--font-display); font-weight: 500; font-size: 14.5px;
  letter-spacing: 0; color: var(--ink); white-space: nowrap; opacity: 1;
  transition: background 0.16s ease, color 0.16s ease;
}
.lf-dropdown a::after { display: none; }
.lf-dropdown a:hover { background: var(--ink); color: var(--paper, #f3f1ea); opacity: 1; }
.lf-nav:hover .lf-dropdown a { opacity: 1; }
/* keep dropdown legible while over the dark hero (panel stays light) */
.lf-bar.on-hero .lf-dropdown a { color: var(--ink); }
.lf-bar.on-hero .lf-dropdown a:hover { color: var(--paper, #f3f1ea); }
@media (max-width: 760px) {
  .lf-dropdown { position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto; box-shadow: none; min-width: 0; padding: 4px 0 4px 14px; background: transparent; border: none; }
  .lf-navgroup-caret { display: none; }
}
@media (max-width: 1080px) {
  .lf-nav { gap: 12px 16px; }
  .lf-nav a { font-size: 13.5px; }
}
@media (max-width: 760px) {
  .lf-bar { padding: 0 clamp(16px, 4vw, 30px); }
}

/* welcome headline motion — words rise + fade with stagger */
@keyframes lf-rise {
  from { opacity: 0; transform: translateY(0.5em) rotate(1.5deg); }
  to   { opacity: 1; transform: translateY(0) rotate(0); }
}
.lf-rise-word { display: inline-block; opacity: 0; animation: lf-rise 0.9s cubic-bezier(0.22,0.61,0.36,1) forwards; }
@media (prefers-reduced-motion: reduce) { .lf-rise-word { animation: none; opacity: 1; } }

/* hero picture cinematic intro + parallax hooks */
@keyframes lf-imgzoom { from { transform: scale(1.12); } to { transform: scale(1); } }
.lf-hero-pic { position: relative; width: 100%; overflow: hidden; }
.lf-hero-pic .img-cover { animation: lf-imgzoom 1.6s cubic-bezier(0.22,0.61,0.36,1) both; }
.lf-hero-cap {
  position: absolute; left: 0; bottom: 0; display: flex; align-items: center; gap: 12px;
  background: var(--paper); padding: 12px 18px;
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft);
}

/* publications carousel cards — flatten to the monochrome system */
.pub-card { box-shadow: 0 1px 0 var(--rule), 0 24px 50px rgba(0,0,0,0.10) !important; border: 1px solid var(--rule) !important; border-radius: 22px !important; }
.pub-slot.is-active .pub-card { box-shadow: 0 1px 0 var(--rule), 0 36px 80px rgba(0,0,0,0.16) !important; }
.pub-card-fig { border-radius: 22px 22px 0 0 !important; }
.pub-card-figtag, .pub-card-metric { border-radius: 0 !important; }
.pub-card-read { color: var(--ink) !important; }
.pub-dot.is-active { background: var(--ink); }
.pub-arrow { border-radius: 0; }

/* work-row hover affordances */
.lf-work-row:hover .lf-work-title { transform: translateX(14px); }
.lf-work-row:hover .lf-work-arrow { opacity: 1; }
.lf-news-card .img-cover, .lf-member .img-cover { transition: transform 0.5s cubic-bezier(0.22,0.61,0.36,1); }
.lf-news-card:hover .img-cover, .lf-member:hover .img-cover { transform: scale(1.05); }

/* news page: in-the-press cards */
.press-card .press-card-read { transition: color 0.2s ease; }
.press-card:hover .press-card-read { color: var(--ink); }
.press-card:hover .press-card-title { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lf-bigrow:hover .lf-bigrow-arrow { transform: translateX(16px); }

/* compact rounded-rectangle pill button */
.lf-pillbtn {
  display: inline-flex; align-items: center; gap: 16px;
  padding: 14px 16px 14px 26px;
  border: 1.5px solid var(--ink); border-radius: 999px;
  text-decoration: none; color: var(--ink); background: transparent;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(15px, 1.4vw, 18px);
  letter-spacing: -0.01em;
  transition: background 0.3s ease, color 0.3s ease;
}
.lf-pillbtn-arrow {
  width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
  transition: transform 0.3s cubic-bezier(0.22,0.61,0.36,1), background 0.3s ease, color 0.3s ease;
}
.lf-pillbtn:hover { background: var(--ink); color: #fff; }
.lf-pillbtn:hover .lf-pillbtn-arrow { background: #fff; color: var(--ink); transform: translateX(4px); }
.lf-pillbtn-sm { padding: 11px 13px 11px 22px; gap: 12px; font-size: clamp(14px, 1.2vw, 16px); }
.lf-pillbtn-sm .lf-pillbtn-arrow { width: 30px; height: 30px; font-size: 15px; }
.lf-arrowlink {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink);
  font-family: var(--font-display); font-weight: 600; font-size: clamp(15px, 1.4vw, 18px);
  letter-spacing: -0.01em; border-bottom: 1.5px solid var(--ink); padding-bottom: 4px;
  transition: gap 0.25s ease, opacity 0.2s ease;
}
.lf-arrowlink:hover { opacity: 0.6; gap: 16px; }
.lf-arrowlink-a { transition: transform 0.25s cubic-bezier(0.22,0.61,0.36,1); }
.lf-arrowlink:hover .lf-arrowlink-a { transform: translateX(5px); }
.lf-arrowlink.on-dark { color: #fff; border-bottom-color: rgba(255,255,255,0.55); }
.lf-arrowlink.on-dark:hover { opacity: 0.7; }

/* news cards sit on black → dark image panels with light labels */
.lf-news-card .img-ph {
  background: repeating-linear-gradient(135deg, #161616 0 14px, #0c0c0c 14px 28px);
  color: rgba(255,255,255,0.55);
  border-radius: 0;
}

/* ====================== MEMBER FLIP CARDS ====================== */
.lf-flip { perspective: 1300px; cursor: pointer; outline: none; }
.lf-flip-inner {
  position: relative; width: 100%;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lf-flip-inner.is-flipped { transform: rotateY(180deg); }
.lf-flip-front, .lf-flip-back {
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  overflow: hidden; display: flex; flex-direction: column;
  border-radius: 22px;
}
/* Front sits in normal flow and defines the card height (4:6 photo + caption);
   back is absolutely overlaid for the flip. */
.lf-flip-front { position: relative; background: #fff; border: 1px solid var(--rule); padding: 0 14px; box-shadow: 0 12px 30px -10px rgba(0,0,0,0.12); }
.lf-flip-back { position: absolute; inset: 0; }
.lf-flip-photo { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 16px; margin-top: 14px; }
.lf-flip-photo > div { width: 100%; height: 100%; }
.lf-flip-photo .img-cover { transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); }
.lf-flip:hover .lf-flip-front .img-cover { transform: scale(1.05); }
.lf-flip-cap { padding: 14px 4px 14px; }
.lf-flip-cap .nm { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; line-height: 1.05; }
.lf-flip-cap .meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--rule); }
.lf-flip-cap .meta .rl { font-family: var(--font-display); font-weight: 500; font-size: 12px; color: var(--ink-soft); }
.lf-flip-cap .meta .idx { font-family: var(--font-display); font-weight: 600; font-size: 12px; color: var(--ink-muted); letter-spacing: 0.04em; flex-shrink: 0; }
.lf-flip-badge {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.92); color: var(--ink); font-size: 15px; line-height: 1;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18); transition: transform 0.4s ease;
}
.lf-flip:hover .lf-flip-badge { transform: rotate(180deg); }
.lf-flip-back { transform: rotateY(180deg); background: #0c0c0c; color: #fff; padding: 22px 20px 18px; border-radius: 22px; }
.lf-flip-back .nm { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; }
.lf-flip-back .rl { font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-top: 6px; }
.lf-flip-back ul { list-style: none; margin: 14px 0 0; padding: 0; flex: 1; min-height: 0; overflow: auto; }
.lf-flip-back li { font-family: var(--font-display); font-weight: 400; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.85); padding-left: 14px; position: relative; margin-bottom: 9px; }
.lf-flip-back li::before { content: '\2014'; position: absolute; left: 0; color: rgba(255,255,255,0.5); }
.lf-flip-hint { font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.5); padding-top: 10px; }
@media (prefers-reduced-motion: reduce) { .lf-flip-inner { transition: none; } }

/* ====================== MORPHING ARABIDOPSIS BLOBS (hero) ====================== */
.lf-blobs {
  position: relative;
  height: clamp(220px, 40vh, 480px);
  margin: clamp(8px, 2vw, 24px) 0 clamp(20px, 3vw, 36px);
}
.lf-blob {
  position: absolute;
  background-image: url('assets/hero-plants.jpg');
  background-size: cover;
  background-position: center;
  will-change: border-radius, transform;
  box-shadow: 0 24px 60px rgba(0,0,0,0.12);
}
.lf-blob.b1 {
  width: clamp(190px, 24vw, 360px); aspect-ratio: 1; left: 0; top: 4%;
  animation: lf-morph-a 13s ease-in-out infinite, lf-float-a 17s ease-in-out infinite;
}
.lf-blob.b2 {
  width: clamp(150px, 18vw, 280px); aspect-ratio: 1; left: clamp(140px, 17vw, 260px); top: 28%;
  animation: lf-morph-b 11s ease-in-out infinite, lf-float-b 15s ease-in-out infinite;
  animation-delay: -3s, -2s;
}
.lf-blob.b3 {
  width: clamp(120px, 14vw, 220px); aspect-ratio: 1; left: clamp(280px, 33vw, 500px); top: 2%;
  animation: lf-morph-a 15s ease-in-out infinite, lf-float-b 19s ease-in-out infinite;
  animation-delay: -6s, -5s;
}
@keyframes lf-morph-a {
  0%, 100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
  34%      { border-radius: 64% 36% 41% 59% / 57% 62% 38% 43%; }
  67%      { border-radius: 38% 62% 56% 44% / 63% 41% 59% 37%; }
}
@keyframes lf-morph-b {
  0%, 100% { border-radius: 58% 42% 38% 62% / 52% 38% 62% 48%; }
  34%      { border-radius: 39% 61% 62% 38% / 41% 59% 41% 59%; }
  67%      { border-radius: 62% 38% 47% 53% / 60% 50% 50% 40%; }
}
@keyframes lf-float-a {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(3%, -5%) rotate(10deg); }
}
@keyframes lf-float-b {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(-4%, 4%) rotate(-12deg); }
}
@media (prefers-reduced-motion: reduce) {
  .lf-blob { animation: none !important; border-radius: 48% 52% 56% 44% / 50% 46% 54% 50%; }
}
@media (max-width: 600px) {
  .lf-blobs { height: 240px; }
  .lf-blob.b3 { display: none; }
}

/* metaball hero stage: text layer + mouse-driven gooey arabidopsis reveal on top */
.lf-hero-stage { position: relative; }
.lf-hero-stage > h1 { position: relative; z-index: 1; }
.lf-meta { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }

/* ====================== NEWS 3D FAN CAROUSEL ====================== */
.lf-fan { perspective: 1700px; }
.lf-fan-stage {
  position: relative; height: clamp(360px, 52vh, 520px);
  transform-style: preserve-3d;
}
.lf-fan-card {
  position: absolute; left: 50%; top: 50%;
  width: clamp(220px, 22vw, 300px); height: clamp(300px, 42vh, 420px);
  margin-left: clamp(-150px, -11vw, -110px); margin-top: clamp(-210px, -21vh, -150px);
  border: none; padding: 0; cursor: pointer; border-radius: 16px; overflow: hidden;
  background: #161616; transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.22,0.61,0.36,1), filter 0.6s ease, opacity 0.6s ease;
  box-shadow: 0 30px 70px rgba(0,0,0,0.55);
}
.lf-fan-card.is-active { box-shadow: 0 44px 100px rgba(0,0,0,0.7); }
.lf-fan-img { position: absolute; inset: 0; }
.lf-fan-img > div { width: 100%; height: 100%; }
.lf-fan-img .img-ph {
  border-radius: 0;
  background: repeating-linear-gradient(135deg, #1f1f1f 0 16px, #131313 16px 32px);
  color: rgba(255,255,255,0.4);
}
.lf-fan-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,0.82) 100%);
}
.lf-fan-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22px 20px; text-align: left; }
.lf-fan-cap .d { display: block; font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.62); margin-bottom: 8px; }
.lf-fan-cap .t { display: block; font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1.2; letter-spacing: -0.01em; color: #fff; }
.lf-fan-ctrl { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: clamp(28px, 4vw, 48px); }
.lf-fan-ctrl button {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.4);
  background: transparent; color: #fff; cursor: pointer; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.lf-fan-ctrl button:hover:not(:disabled) { background: #fff; color: #0a0a0a; }
.lf-fan-ctrl button:disabled { opacity: 0.3; cursor: default; }
.lf-fan-count { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.1em; color: rgba(255,255,255,0.6); }

/* ====================== RESEARCH-FOCUS READER (scroll word-darken) ====================== */
.lf-reader { max-width: 1000px; margin-left: auto; margin-right: auto; text-align: center; }
.lf-reader-p {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(18px, 2.05vw, 30px); line-height: 1.3; letter-spacing: -0.02em;
  margin: 0 0 0.7em; text-wrap: pretty;
}
.lf-reader-p:last-child { margin-bottom: 0; }
.lf-reader-p span { color: var(--ink); }
.lf-caret {
  display: inline-block; width: 0.06em; height: 0.92em;
  background: var(--ink); margin: 0 0.02em -0.12em 0;
  vertical-align: baseline; animation: lf-blink 0.9s steps(1) infinite;
}
@keyframes lf-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lf-caret { display: none; } }

/* ====================== PUBLICATIONS ROTATING DIAL ====================== */
.lf-dial { position: relative; }
.lf-dialcontent {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px);
  align-items: center; animation: lf-dial-in 0.5s ease both;
}
@keyframes lf-dial-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }
.lf-dial-fig { position: relative; }
.lf-dial-fig > div { border-radius: 10px; overflow: hidden; }
.lf-dial-fig .big {
  position: absolute; top: -30px; left: -16px; z-index: 2;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(54px, 6vw, 104px);
  letter-spacing: -0.04em; line-height: 1; color: var(--ink);
}
.lf-dial-info { min-width: 0; }
.lf-dial-info .yr { font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 14px; }
.lf-dial-info h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.3vw, 32px); line-height: 1.12; letter-spacing: -0.025em; margin: 0 0 16px; }
.lf-dial-info h3 em { color: var(--ink-soft); }
.lf-dial-info .au { font-family: var(--font-display); font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--ink-soft); margin: 0 0 8px; }
.lf-dial-info .ve { font-family: var(--font-serif); font-style: italic; font-size: 15px; color: var(--ink); margin: 0 0 20px; }
.lf-dial-info .rd { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.04em; border-bottom: 1px solid var(--ink); padding-bottom: 2px; display: inline-block; }
@media (max-width: 900px) {
  .lf-dialcontent { grid-template-columns: 1fr; gap: 22px; animation: none; }
  .lf-dial-fig .big { top: -22px; }
}

/* dial prev/next controls */
.lf-dial-controls { display: flex; align-items: center; gap: 22px; margin-top: clamp(32px, 4vw, 52px); }
.lf-dial-arrow {
  width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid var(--ink);
  background: transparent; color: var(--ink); cursor: pointer; font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.3s ease, color 0.3s ease;
}
.lf-dial-arrow:hover { background: var(--ink); color: #fff; }
.lf-dial-count { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(22px, 2.4vw, 34px); color: var(--ink); }

/* ====================== NEWS BENTO GRID ====================== */
.lf-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: "a a b" "c d d";
  gap: clamp(14px, 1.4vw, 22px);
}
.lf-bento-card {
  position: relative; overflow: hidden; border-radius: 20px;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(240px, 22vw, 320px); text-decoration: none;
  border: 1px solid rgba(255,255,255,0.1);
}
.lf-bento-card.is-image { color: #fff; }
.lf-bento-card.is-text { background: #fff; color: var(--ink); padding: clamp(22px, 2vw, 34px); border: 1px solid var(--rule); }
.lf-bento-photo { position: absolute; inset: 0; z-index: 0; }
.lf-bento-photo .img-ph { background: repeating-linear-gradient(135deg, #1c1c1c 0 16px, #121212 16px 32px); color: rgba(255,255,255,0.5); border-radius: 0; }
.lf-bento-card.is-image::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.05) 100%); }
.lf-bento-body { position: relative; z-index: 2; }
.lf-bento-card.is-image .lf-bento-body { padding: clamp(22px, 2vw, 34px); }
.lf-bento-meta { display: flex; gap: 16px; font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 12px; }
.lf-bento-card.is-image .lf-bento-meta { color: rgba(255,255,255,0.6); }
.lf-bento-card.is-text .lf-bento-meta { color: var(--ink-soft); }
.lf-bento-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 1.9vw, 28px); line-height: 1.1; letter-spacing: -0.02em; margin: 0; }
.lf-bento-desc { font-family: var(--font-display); font-weight: 400; font-size: 14px; line-height: 1.5; margin: 12px 0 0; max-width: 46ch; }
.lf-bento-card.is-image .lf-bento-desc { color: rgba(255,255,255,0.66); }
.lf-bento-card.is-text .lf-bento-desc { color: var(--ink-soft); }
.lf-bento-photo .img-cover { transition: transform 0.6s cubic-bezier(0.22,0.61,0.36,1); }
.lf-bento-card.is-image:hover .img-cover { transform: scale(1.05); }
.lf-bento-card.is-text:hover { background: #fbfbf9; border-color: var(--ink); }
@media (max-width: 820px) {
  .lf-bento { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c" "d"; }
}

/* ====================== NEWS — expanding flex accordion ====================== */
.lf-acc-section { color: #fff; }
.lf-acc-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.82fr) 1.7fr;
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
  max-width: 1540px; margin: 0 auto;
}
.lf-acc-eyebrow {
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); margin-bottom: clamp(18px, 2.4vw, 28px);
}
.lf-acc-h {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(34px, 4.2vw, 62px); line-height: 1.02;
  letter-spacing: -0.035em; margin: 0; color: #fff;
}
.lf-acc-h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; margin-left: -0.04em; }
.lf-acc-more {
  display: inline-flex; align-items: center; gap: 18px;
  margin-top: clamp(28px, 3.4vw, 48px);
  text-decoration: none; color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
}
.lf-acc-more-circ {
  width: 56px; height: 56px; flex: 0 0 auto;
  border-radius: 999px; border: 1px solid rgba(255,255,255,0.4);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  transition: background 0.2s ease, color 0.2s ease, transform 0.25s ease;
}
.lf-acc-more:hover .lf-acc-more-circ { background: #fff; color: #0a0a0a; transform: translateX(5px); }

.lf-hc-head {
  display: block;
  max-width: 1540px; margin: 0 auto clamp(18px, 2.2vw, 30px);
}
.lf-hc-more { margin-top: clamp(22px, 2.6vw, 34px); }
.lf-hc-window { width: 100%; overflow: hidden; position: relative; }
.lf-hc-window::before, .lf-hc-window::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: clamp(120px, 17vw, 320px);
  z-index: 4; pointer-events: none;
}
.lf-hc-window::before { left: 0; background: linear-gradient(to right, #0a0a0a 18%, rgba(10,10,10,0) 100%); }
.lf-hc-window::after { right: 0; background: linear-gradient(to left, #0a0a0a 18%, rgba(10,10,10,0) 100%); }
.lf-hc-track {
  display: flex; align-items: center;
  gap: clamp(16px, 1.7vw, 30px);
  padding: clamp(16px, 1.9vw, 28px) 0 clamp(10px, 1.2vw, 16px);
  transition: transform 0.62s cubic-bezier(0.22,0.61,0.36,1);
  will-change: transform;
}
.lf-hc-card {
  position: relative; flex: 0 0 auto;
  width: clamp(340px, 35vw, 600px);
  height: clamp(238px, 23.5vw, 410px);
  border-radius: 20px; overflow: hidden; text-decoration: none;
  box-shadow: 0 26px 54px -26px rgba(0,0,0,0.9);
  transform: none; opacity: 1; filter: none;
  transition: transform 0.62s cubic-bezier(0.22,0.61,0.36,1);
  cursor: pointer;
}
.lf-hc-card.is-active {
  transform: none; opacity: 1; filter: none;
  box-shadow: 0 26px 54px -26px rgba(0,0,0,0.9);
}
.lf-hc-photo {
  position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px);
  object-fit: cover; object-position: center; display: block;
}
.lf-hc-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.42) 30%, rgba(0,0,0,0.05) 58%, rgba(0,0,0,0) 100%);
}
.lf-hc-cta {
  position: absolute; top: clamp(16px, 1.5vw, 22px); left: clamp(18px, 1.6vw, 26px); z-index: 3;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px 9px 13px; border-radius: 999px;
  background: rgba(255,255,255,0.16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.32); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  white-space: nowrap;
  opacity: 0; transform: translateY(-8px);
  transition: opacity 0.42s ease 0.18s, transform 0.42s ease 0.18s, background 0.2s ease;
}
.lf-hc-card .lf-hc-cta { opacity: 0; transform: translateY(-8px); }
.lf-hc-card:hover .lf-hc-cta { opacity: 1; transform: none; }
.lf-hc-card:hover .lf-hc-cta:hover { background: rgba(255,255,255,0.28); }
.lf-acc-cta-a { font-size: 15px; line-height: 1; }
.lf-acc-photo-ph { background: repeating-linear-gradient(135deg, #1c1c1c 0 16px, #141414 16px 32px); }
.lf-hc-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: clamp(20px, 1.7vw, 32px);
}
.lf-hc-date {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px; letter-spacing: 0.18em; color: rgba(255,255,255,0.78);
  margin-bottom: 9px;
}
.lf-hc-title {
  font-family: var(--font-display, 'Hanken Grotesk', sans-serif);
  font-weight: 700; font-style: normal;
  font-size: clamp(20px, 1.7vw, 28px); line-height: 1.14;
  letter-spacing: -0.025em; margin: 0; color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,0.55);
  display: inline; 
}
.lf-hc-title-a {
  display: inline-block; margin-left: 12px;
  font-size: 0.86em; font-weight: 600; vertical-align: baseline;
  transition: transform 0.25s ease;
}
.lf-hc-card:hover .lf-hc-title-a { transform: translate(3px, -3px); }
.lf-hc-controls {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(18px, 2.2vw, 32px);
  max-width: 1540px; margin: clamp(12px, 1.5vw, 22px) auto 0;
}
.lf-hc-arrow {
  width: auto; height: auto; flex: 0 0 auto;
  border-radius: 0; border: none;
  background: transparent; color: rgba(255,255,255,0.55); font-size: 28px; line-height: 1; cursor: pointer;
  padding: 6px 10px;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}
.lf-hc-arrow:hover:not(:disabled) { background: transparent; color: #fff; transform: translateX(0) scale(1.12); }
.lf-hc-arrow:disabled { opacity: 0.22; cursor: default; }
.lf-hc-dots { display: flex; align-items: center; gap: 10px; }
.lf-hc-dot {
  width: 8px; height: 8px; border-radius: 999px; padding: 0;
  border: none; background: rgba(255,255,255,0.3); cursor: pointer;
  transition: background 0.2s ease, width 0.3s ease;
}
.lf-hc-dot:hover { background: rgba(255,255,255,0.6); }
.lf-hc-dot.is-active { background: #fff; width: 8px; }
@media (max-width: 760px) {
  .lf-hc-card { width: 72vw; max-width: 380px; height: 48vw; max-height: 250px; transform: none; }
  .lf-hc-card.is-active { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lf-hc-track, .lf-hc-card, .lf-hc-cta { transition: none; }
}

/* ====================== PUBLICATIONS ARC NAVIGATOR ====================== */
.lf-arc { position: relative; height: clamp(440px, 60vh, 640px); }
.lf-arc-rail { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lf-arc-num {
  position: absolute; background: none; border: none; padding: 6px; cursor: pointer;
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: clamp(26px, 3.2vw, 50px); color: var(--ink); opacity: 0.3;
  transition: opacity 0.25s ease; white-space: nowrap; line-height: 1;
}
.lf-arc-num:hover { opacity: 0.65; }
.lf-arc-num.is-active { opacity: 0.92; }
.lf-arc-dot {
  position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--ink);
  transform: translate(-50%, -50%);
  transition: left 0.55s cubic-bezier(0.22,0.61,0.36,1), top 0.55s cubic-bezier(0.22,0.61,0.36,1);
}
.lf-arc-content {
  position: absolute; left: 32%; right: 0; top: 50%; transform: translateY(-50%);
  display: flex; gap: clamp(20px, 3vw, 56px); align-items: center;
  animation: lf-arc-in 0.5s ease both;
}
@keyframes lf-arc-in { from { opacity: 0; transform: translate(14px, -50%); } to { opacity: 1; transform: translate(0, -50%); } }
.lf-arc-bignum { font-family: var(--font-display); font-weight: 700; font-size: clamp(80px, 12vw, 190px); line-height: 0.82; letter-spacing: -0.04em; color: var(--ink); flex-shrink: 0; }
.lf-arc-info { max-width: 540px; }
.lf-arc-info .yr { font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 14px; }
.lf-arc-info h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.12; letter-spacing: -0.025em; margin: 0 0 16px; }
.lf-arc-info h3 em { color: var(--ink-soft); }
.lf-arc-info .au { font-family: var(--font-display); font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--ink-soft); margin: 0 0 8px; }
.lf-arc-info .ve { font-family: var(--font-serif); font-style: italic; font-size: 15px; color: var(--ink); margin: 0 0 20px; }
.lf-arc-info .rd { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.04em; border-bottom: 1px solid var(--ink); padding-bottom: 2px; display: inline-block; }
@media (max-width: 820px) {
  .lf-arc { height: auto; }
  .lf-arc-rail, .lf-arc-dot { display: none; }
  .lf-arc-num { position: static !important; transform: none !important; display: inline-block; margin: 0 16px 10px 0; }
  .lf-arc-content { position: static; transform: none; flex-direction: column; align-items: flex-start; gap: 18px; animation: none; margin-top: 28px; }
}

/* ====================== OVERLAY MENU ====================== */
.lf-menu {
  position: fixed; inset: 0; z-index: 85;
  background: var(--paper);
  display: flex; flex-direction: column; justify-content: center;
  padding: 96px clamp(24px, 7vw, 120px) 64px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.lf-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.lf-menu-list { display: flex; flex-direction: column; gap: 2px; }
.lf-menu-item {
  display: flex; align-items: baseline; gap: clamp(16px, 3vw, 44px);
  padding: clamp(4px, 1.1vh, 14px) 0;
  text-decoration: none; color: var(--ink);
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22,0.61,0.36,1), color 0.2s ease;
  border: none;
}
.lf-menu.is-open .lf-menu-item { opacity: 1; transform: translateY(0); }
.lf-menu-num {
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  letter-spacing: 0.1em; color: var(--ink-muted); min-width: 42px;
}
.lf-menu-label {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(40px, 7.5vw, 104px); line-height: 0.98; letter-spacing: -0.035em;
  transition: transform 0.3s cubic-bezier(0.22,0.61,0.36,1);
  display: inline-block;
}
.lf-menu-item:hover .lf-menu-label { transform: translateX(18px); }
.lf-menu-item:hover .lf-menu-num { color: var(--ink); }
.lf-menu-foot {
  margin-top: clamp(28px, 5vh, 56px); display: flex; flex-wrap: wrap; gap: 8px 40px;
  font-family: var(--font-display); font-weight: 500; font-size: 14px; color: var(--ink-soft);
}
.lf-menu-foot a { border-bottom: 1px solid var(--rule); padding-bottom: 1px; }
.lf-menu-foot a:hover { color: var(--ink); border-color: var(--ink); }

/* ====================== CIRCLE-ARROW BUTTON (Loaf signature) ====================== */
.lf-circle {
  display: inline-flex; align-items: center; gap: 22px;
  text-decoration: none; color: var(--ink); cursor: pointer;
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em;
  font-size: clamp(18px, 1.6vw, 24px);
}
.lf-circle .ring {
  width: clamp(60px, 6vw, 92px); height: clamp(60px, 6vw, 92px);
  border-radius: 50%; border: 1.5px solid currentColor;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.lf-circle .ring svg { width: 38%; height: 38%; transition: transform 0.3s ease; }
.lf-circle:hover .ring { background: var(--ink); color: var(--paper); }
.lf-circle:hover .ring svg { transform: translateX(4px); }
.lf-circle.on-dark, .lf-circle.on-dark .ring { color: var(--paper); }
.lf-circle.on-dark:hover .ring { background: var(--paper); color: var(--ink); }

/* ====================== SCROLL REVEAL ====================== */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.8s cubic-bezier(0.22,0.61,0.36,1), transform 0.8s cubic-bezier(0.22,0.61,0.36,1); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } }

/* footer: dark anchor, light tracked labels */
.footer-col h4 { color: rgba(255,255,255,0.5); }

/* ---- Site footer (clean responsive) ---- */
.lf-footer {
  background: #0a0a0a; color: #fff;
  font-family: var(--font-display);
  padding: clamp(30px, 4vw, 46px) clamp(24px, 5vw, 64px) clamp(26px, 3vw, 34px);
}
.lf-footer-inner {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 14px 48px;
  max-width: 1200px; margin: 0 auto;
}
.lf-footer-addr {
  font-size: 15px; font-weight: 400; line-height: 1.55;
  color: rgba(255,255,255,0.82); max-width: 38ch;
}
.lf-footer-meta {
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.92);
}
.lf-footer-k {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.45);
  margin-right: 7px;
}
.lf-footer-meta a {
  color: #fff; border-bottom: 1px solid rgba(255,255,255,0.4);
  padding-bottom: 1px; transition: border-color 0.18s ease;
}
.lf-footer-meta a:hover { border-bottom-color: #fff; }
.lf-footer-copy {
  max-width: 1200px; margin: clamp(20px, 2.4vw, 30px) auto 0;
  padding-top: clamp(16px, 2vw, 22px); border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 13px; letter-spacing: 0.01em; color: rgba(255,255,255,0.5);
}
@media (max-width: 680px) {
  .lf-footer-inner { flex-direction: column; gap: 18px; }
  .lf-footer-meta { flex-direction: column; gap: 7px; }
}

/* page wrapper clears the floating bar */
.lf-page { padding-top: clamp(94px, 11vw, 104px); background: var(--paper); }

/* ===================================================================
   SECTION ENTRANCE TRANSITIONS (ride on the existing .reveal/.in)
   =================================================================== */
.reveal.rv-curtain { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1.05s cubic-bezier(.76,0,.24,1); }
.reveal.rv-curtain.in { clip-path: inset(0 0 0 0); }

.reveal.rv-diag { opacity: 1; transform: none; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); transition: clip-path 1.1s cubic-bezier(.76,0,.24,1); }
.reveal.rv-diag.in { clip-path: polygon(0 0, 140% 0, 100% 100%, 0 100%); }

.reveal.rv-tilt { opacity: 0; transform: perspective(1300px) rotateX(14deg) translateY(54px); transform-origin: center bottom; transition: opacity .8s ease, transform 1s cubic-bezier(.16,.84,.3,1); }
.reveal.rv-tilt.in { opacity: 1; transform: none; }

.rv-blinds { position: absolute; inset: 0; z-index: 5; pointer-events: none; display: flex; flex-direction: column; opacity: 1 !important; transform: none !important; clip-path: none !important; }
.rv-blinds span { flex: 1; background: var(--paper); transform-origin: left; transform: scaleX(1); transition: transform .72s cubic-bezier(.76,0,.24,1); }
.rv-blinds span:nth-child(1){transition-delay:0s;}
.rv-blinds span:nth-child(2){transition-delay:.06s;}
.rv-blinds span:nth-child(3){transition-delay:.12s;}
.rv-blinds span:nth-child(4){transition-delay:.18s;}
.rv-blinds span:nth-child(5){transition-delay:.24s;}
.rv-blinds span:nth-child(6){transition-delay:.30s;}
.rv-blinds.in span { transform: scaleX(0); }

.reveal.rv-line { opacity: 1; transform: none; position: relative; padding-left: 30px; }
.reveal.rv-line::before { content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 2px; background: currentColor; opacity: 0.45; transform: scaleY(0); transform-origin: top; transition: transform .9s cubic-bezier(.76,0,.24,1); }
.reveal.rv-line.in::before { transform: scaleY(1); }
.reveal.rv-line > * { opacity: 0; transform: translateY(22px); transition: opacity .7s ease .2s, transform .8s cubic-bezier(.16,.84,.3,1) .2s; }
.reveal.rv-line.in > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal.rv-curtain, .reveal.rv-diag { clip-path: none !important; }
  .reveal.rv-tilt { opacity: 1 !important; transform: none !important; }
  .rv-blinds { display: none !important; }
  .reveal.rv-line > * { opacity: 1 !important; transform: none !important; }
  .reveal.rv-line::before { transform: scaleY(1) !important; }
}

/* (scroll-driven gradient text removed — titles render in solid ink) */

/* Join CTA: heading left, circled arrow on the right of the panel */
.lf-join-cta {
  text-decoration: none; color: inherit;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(20px, 4vw, 56px);
}
.lf-join-cta-ring {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(56px, 8vw, 88px); height: clamp(56px, 8vw, 88px);
  border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.85); color: #fff;
  transition: background 0.3s ease, color 0.3s ease;
}
.lf-join-cta-ring svg { width: 38%; height: 38%; transition: transform 0.3s ease; }
.lf-join-cta:hover .lf-join-cta-ring { background: #fff; color: #0a0a0a; }
.lf-join-cta:hover .lf-join-cta-ring svg { transform: translateX(3px); }
/* mobile-only copyright (under the map); inline one shows on desktop */
.lf-copy-mobile { display: none; }

/* ============================================================
   RESPONSIVE / MOBILE  — one site, adapts to phone
   ============================================================ */

/* off-canvas drawer must never create horizontal scroll */
html { overflow-x: clip; }
body { overflow-x: clip; }

/* ---- NAV: swap inline links for burger + drawer on narrow screens ---- */
/* #root > * sets position:relative AND z-index:1 (id specificity) — the page
   content paints over the drawer unless we force fixed + a higher z-index. */
.lf-scrim { position: fixed !important; z-index: 86 !important; }
.lf-drawer { position: fixed !important; z-index: 88 !important; }
.lf-drawer.is-open { transform: translateX(0) !important; }
.lf-scrim.is-open { opacity: 1 !important; visibility: visible !important; }
/* menu open: force logo + X dark over the cream full-screen drawer */
.lf-bar.is-menu-open {
  background: transparent !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border-color: transparent !important; box-shadow: none !important;
}
.lf-bar.is-menu-open .lf-logo-img { filter: invert(1) brightness(0.12) !important; }
.lf-bar.is-menu-open .lf-logo-word { color: var(--ink) !important; }
.lf-bar.is-menu-open .lf-burger-line { background: var(--ink) !important; }
.lf-burger { display: none; }
@media (min-width: 881px) {
  .lf-scrim, .lf-drawer { display: none; }
}
@media (max-width: 880px) {
  .lf-nav { display: none; }
  .lf-burger { display: inline-flex; }
  .lf-bar { padding: 0 clamp(16px, 5vw, 26px); }
  .lf-logo-img { height: 34px; }
  .lf-bar.is-scrolled .lf-logo-img { height: 30px; }
  .lf-logo-word { font-size: 19px; padding-left: 11px; }
}
@media (max-width: 380px) { .lf-logo-word { display: none; } }

/* "The Team" divider — mobile only */
.lf-mdivider { display: none; }

/* "List of alumni" link, centered below the member grid */
.lf-members-foot { display: flex; justify-content: center; margin-top: clamp(30px, 4vw, 52px); }

/* PI name as a link to the History page — pill-outlined, arrow button on the right */
.lf-pi-namelink {
  display: inline-flex; align-items: center; justify-content: center;
  gap: clamp(14px, 1.6vw, 24px); text-decoration: none; color: var(--ink);
  max-width: 100%;
  border: 1.5px solid var(--ink); border-radius: 100px;
  padding: clamp(10px, 1.1vw, 16px) clamp(12px, 1.1vw, 16px) clamp(10px, 1.1vw, 16px) clamp(20px, 2.2vw, 34px);
  transition: background 0.22s ease, color 0.22s ease;
}
.lf-pi-namelink h3 { transition: color 0.2s ease; }
.lf-pi-namearrow {
  flex: 0 0 auto;
  width: clamp(40px, 4.2vw, 56px); height: clamp(40px, 4.2vw, 56px);
  border-radius: 50%; background: var(--ink); color: #fff;
  display: grid; place-items: center;
  font-size: clamp(17px, 1.8vw, 24px); line-height: 1;
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), background 0.2s ease, color 0.2s ease;
}
.lf-pi-namelink:hover { background: var(--ink); color: #fff; }
.lf-pi-namelink:hover h3 { color: #fff; }
.lf-pi-namelink:hover .lf-pi-namearrow { background: #fff; color: var(--ink); transform: translateX(4px); }

/* ============================================================ */
@media (max-width: 760px) {
  /* floating top bar a touch tighter */
  .lf-bar { top: 10px; left: 10px; right: 10px; height: 60px; }

  /* ---------- HERO ---------- */
  .lf-herobg {
    padding-top: clamp(108px, 27vw, 150px) !important;
    padding-bottom: clamp(72px, 18vw, 112px) !important;
    min-height: 86vh !important;
  }
  .lf-hero-headline { font-size: clamp(44px, 15vw, 66px) !important; line-height: 0.95 !important; }
  .lf-reader { text-align: left; }
  .lf-reader-p { font-size: clamp(20px, 5.2vw, 26px); line-height: 1.34; letter-spacing: -0.018em; }

  /* ---------- RESEARCH FOCUS (mixed alignment) ---------- */
  /* "Research Focus" + "Our research focuses on…" = centered */
  .lf-rf2-head { text-align: center; }
  .lf-rf2-eyebrow { justify-content: center; }
  .lf-rf2-title { font-size: clamp(25px, 7vw, 36px) !important; text-align: center; }
  /* "We use metabolic engineering…" paragraph = justified, inset a bit */
  .lf-rf2-body {
    font-size: 15px !important; line-height: 1.62 !important;
    text-align: justify !important; -webkit-hyphens: auto; hyphens: auto;
    padding-left: 14px; padding-right: 14px;
  }
  /* "Our Mission" label = centered */
  .lf-rf2-mlabel { display: flex; justify-content: center; }
  /* the three mission items = left-aligned */
  .lf-rf2-mt { font-size: 15px; text-align: left; }
  .lf-rf2-m { gap: 13px; padding: 13px 0; justify-content: flex-start; }
  .lf-rf2-ic { width: 38px; height: 38px; }
  .lf-rf2-ic svg { width: 21px; height: 21px; }

  /* PI feature: name + label on top, photo below */
  .lf-pi-feature { grid-template-columns: 1fr !important; gap: 24px !important; }
  .lf-pi-feature > div:first-child { order: 2; }
  .lf-pi-feature > div:last-child { order: 1; }
  /* trim the empty cream gap at the top of the Team panel */
  #team { padding-top: clamp(44px, 11vw, 72px) !important; }
  /* trim the cream gap below the publications panel */
  #publications { padding-bottom: clamp(34px, 8vw, 56px) !important; }
  /* trim the cream gap below the "We are hiring" panel */
  #join { padding-bottom: clamp(26px, 6vw, 40px) !important; }

  /* ---------- CURRENT MEMBERS: heading centered ---------- */
  .lf-members-head { flex-direction: column; align-items: center; text-align: center; gap: 14px; margin-top: clamp(44px, 11vw, 72px); }

  .lf-member-grid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto; overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px !important;
    padding: 4px 0 14px;
    scrollbar-width: none;
  }
  .lf-member-grid::-webkit-scrollbar { display: none; }
  .lf-member-grid > .lf-flip {
    flex: 0 0 64%; scroll-snap-align: center; min-width: 0;
  }
  .lf-flip-front { padding: 0 11px; }
  .lf-flip-cap { padding: 12px 3px; }
  .lf-flip-cap .nm { font-size: 16px; }
  .lf-flip-photo { margin-top: 11px; }
  .lf-flip-back { padding: 18px 16px 14px; }
  .lf-flip-back .nm { font-size: 16px; }
  .lf-flip-back .rl { font-size: 10px; }
  .lf-flip-back li { font-size: 12px; line-height: 1.45; margin-bottom: 7px; padding-left: 13px; }

  /* contact: stack the two columns */
  .lf-contact-grid { grid-template-columns: 1fr !important; gap: 30px !important; }

  /* ---------- RECENT PUBLICATIONS: centred heading + vertical card ---------- */
  .lf-pubpanel { padding: clamp(34px, 8vw, 56px) clamp(18px, 5vw, 30px) clamp(28px, 7vw, 44px); }
  .lf-pubpanel h2 { font-size: clamp(28px, 8vw, 42px) !important; }
  .lf-pub-head {
    flex-direction: column; align-items: center !important;
    text-align: center; gap: 16px !important;
  }
  .pub-deck-stage { margin-top: clamp(22px, 3.4vh, 40px); height: clamp(410px, 58vh, 470px); }
  .pub-deck-card {
    grid-template-columns: 1fr !important;
    grid-template-rows: 188px 1fr;
    width: min(79vw, 336px);
    height: clamp(400px, 56vh, 458px);
  }
  .pub-stk-fig { min-height: 0; border-right: none !important; border-bottom: 1px solid var(--rule); }
  .pub-stk-body { padding: 18px 24px 16px; gap: 7px; }
  .pub-stk-title { font-size: 17px !important; line-height: 1.18; }
  .pub-stk-authors {
    font-size: 12px !important; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .pub-stk-cite { font-size: 11px !important; }
  .pub-stk-foot { margin-top: auto !important; padding-top: 12px !important; }
  .pub-stk-read { font-size: 11px; }
  /* phone: swipe to change cards, hide arrows (desktop keeps them) */
  .pub-deck-arrow { display: none !important; }
  .pub-deck-ctrl { justify-content: center !important; gap: 0 !important; }

  /* ---------- FEATURED NEWS (smaller so neighbours peek; ratio keeps text visible) ---------- */
  .lf-hc-card { width: 77vw; max-width: 344px; height: 50vw; max-height: 224px; }
  .lf-hc-window::before, .lf-hc-window::after { width: 26px; }
  .lf-hc-track { gap: 14px; }
  .lf-hc-title { font-size: clamp(19px, 5.4vw, 24px); }
  .lf-acc-h { font-size: clamp(31px, 8.4vw, 48px); }
  .lf-hc-more { margin-top: 18px; }
  /* phone: swipe to change news, hide arrows */
  .lf-hc-arrow { display: none !important; }
  .lf-hc-controls { justify-content: center !important; }

  /* ---------- TEAM / JOIN headings ---------- */
  .lf-joinpanel { padding: clamp(44px, 11vw, 80px) clamp(22px, 6vw, 44px) clamp(40px, 9vw, 64px); }
  .lf-joinpanel h2 { font-size: clamp(30px, 8.5vw, 46px) !important; }

  /* ---------- JOIN PAGE: roles accordion ---------- */
  .lf-join-head {
    grid-template-columns: 16px 1fr 26px !important;
    gap: 12px !important; padding: 20px 16px !important;
  }
  .lf-join-level { display: none !important; }
  .lf-join-title { font-size: 21px !important; }
  .lf-join-focus { font-size: 14px !important; margin-top: 5px !important; }
  .lf-join-detail { grid-template-columns: 1fr !important; gap: 26px !important; }
  /* details panel: smaller values so long emails fit cleanly */
  .lf-join-dval { font-size: 12px !important; overflow-wrap: anywhere; }
  /* apply button: center the wrapping label */
  .lf-join-apply { text-align: center; justify-content: center; }

  /* ---------- RESEARCH PAGE: featured programme ---------- */
  .lf-research-feature { grid-template-columns: 1fr !important; }
  .lf-research-feature > div:first-child { border-right: none !important; border-bottom: 1px solid var(--ink); }
  .lf-research-feature-sec { padding-left: 20px !important; padding-right: 20px !important; }
  .lf-research-feature-body { padding: 26px 20px !important; }
  .lf-research-feature-h { font-size: 30px !important; margin-bottom: 16px !important; }
  .lf-research-feature-body p { font-size: 15px !important; line-height: 1.55 !important; }

  /* ---------- JOIN PAGE: tighter side gutters ---------- */
  .lf-join-sec { padding-left: 20px !important; padding-right: 20px !important; }
  /* intro block centered */
  .lf-join-intro { text-align: center; }
  .lf-join-eyebrow, .lf-openpos-label { display: none !important; }
  .lf-join-intro h1, .lf-join-intro p { margin-left: auto !important; margin-right: auto !important; }
  .lf-join-intro > div:last-child > div:last-child { justify-content: center; }

  /* ---------- SITE FOOTER (compact: address 1 line, email+tel 1 line) ---------- */
  .lf-footer { padding: 28px 14px 24px; }
  .lf-footer-inner { align-items: center; text-align: center; gap: 12px; }
  .lf-footer-addr { font-size: 10.5px; max-width: none; }
  .lf-footer-meta { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px; font-size: 10.5px; }
  .lf-footer-meta > span:first-child { flex-basis: 100%; }
  .lf-footer-copy { font-size: 10.5px; text-align: center; line-height: 1.5; }
  /* standalone-page footer (Alumni / History / All Publications) */
  .ll-sfooter { padding: 28px 14px 26px !important; }
  .ll-sfooter > div { font-size: 11px !important; line-height: 1.6 !important; }
  .ll-sfooter > div:last-child { font-size: 10.5px !important; margin-top: 9px !important; }
  .ll-sf-break { display: block !important; width: 100% !important; height: 0 !important; }

  /* copyright moves below the map */
  .lf-copy-inline { display: none; }
  .lf-copy-mobile { display: block; text-align: center; padding: 0 24px; margin-top: 14px !important; }
}

@media (max-width: 400px) {
  .lf-hero-headline { font-size: clamp(40px, 14vw, 56px) !important; }
}