/* Liu Lab theme — Ink & Amber: deep-ink navigation, hero and footer bands with a warm amber accent; bold grotesk headings. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root {
  --background:#f5f4ef; --surface:#ffffff; --surface-alt:#ebe9e2;
  --ink:#14202b; --ink-2:#1d2d3b; --ink-text:#f2f1ec; --ink-muted:#b7c2cc;
  --text:#14202b; --muted-text:#4b5661; --accent:#c8862a; --accent-dark:#9d6717;
  --accent-soft:#f7ecd8; --border:#d9d6cd; --border-light:#e5e2da;
  --font-heading:'Sora', 'IBM Plex Sans', -apple-system, sans-serif;
  --font-sans:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --shadow-sm:none; --shadow-md:0 18px 40px rgba(20,32,43,.28); --shadow-lg:none;
  --radius-sm:6px; --radius-md:8px; --radius-lg:10px;
}

/* Structure */
body { background:var(--background); color:var(--muted-text); font:16px/1.7 var(--font-sans); }
main.content { margin-top:0; }
#quarto-content { padding-top:0; }
main h2 { border-bottom:0; padding-bottom:0; }
.research-section .section-index, .opportunity-list .section-index { display:none; }
.page-shell { width:min(calc(100% - 48px),1080px); }
.page-hero, .research-section, .profile, .selected-publications, .recruiting-panel, .affiliation-section, .mechanisms, .contact-grid { padding-block:56px; }
.hero, .research-section, .profile, .selected-publications, .contact-grid, .affiliation-section { animation:none; }
.page-hero, .research-section, .profile, .recruiting-panel, .affiliation-section, .mechanisms, .selected-publications { border-color:var(--border-light); }

/* Type */
h1, h2, h3, h4, .modern-home h1, .modern-home h2, .modern-home h3,
body .page-hero h1, body .publication-header-flex h1, body .publication-header-flex h2, body .profile h1 {
  font-family:var(--font-heading); font-weight:600; text-transform:none; letter-spacing:-0.03em; color:var(--text);
}
h1, body .page-hero h1, body .publication-header-flex h1, body .profile h1, .modern-home h1 { font-size:clamp(2.1rem,3.8vw,3.1rem); line-height:1.1; }
h2, main h2, body .research-section__copy h2, .modern-home h2 { font-size:clamp(1.5rem,2.4vw,2rem); line-height:1.22; }
h3, main h3, .modern-home h3 { font-size:1.2rem; font-weight:600; line-height:1.4; }
.page-hero__lead, .affiliation-lead, .modern-home .hero-copy p { font-size:1.12rem; line-height:1.65; font-weight:400; color:var(--muted-text); }
.research-section__copy p:not(.eyebrow,.citation-note), .profile__copy > p:not(.eyebrow,.profile__role), .affiliation-section p:not(.eyebrow,.affiliation-lead), .modern-home p { font-size:1rem; line-height:1.7; }
.eyebrow { display:inline-flex; align-items:center; gap:.6rem; padding:0; margin-bottom:.9rem; background:none; border-radius:0; color:var(--accent-dark); font-family:var(--font-heading); font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.eyebrow::before { display:inline-block; content:''; width:22px; height:2px; border-radius:0; background:var(--accent); }
.profile__role { font-size:1rem; font-weight:500; line-height:1.6; color:var(--text); }
.research-section__copy .research-principle { color:var(--text) !important; border-left:3px solid var(--accent); padding-left:1rem; font-family:var(--font-heading); font-weight:500; font-size:1.02rem; }
a { color:var(--accent-dark); text-decoration-thickness:1.5px; text-underline-offset:.2em; }
a:hover { color:var(--ink); }

/* Navbar — ink */
.navbar { background:var(--ink) !important; padding-inline:0 !important; border-bottom:0; backdrop-filter:none; }
.navbar .container-fluid { width:min(calc(100% - 48px),1160px); padding:0; }
.navbar-brand-container { margin-left:0 !important; margin-right:auto !important; }
.navbar-brand { flex-direction:row; align-items:center; gap:16px; overflow:visible; white-space:normal; margin-right:0; }
.navbar-brand, .navbar-title { font-family:var(--font-heading); font-size:23px; font-weight:600; line-height:1.2; letter-spacing:-.03em; text-transform:none; color:#fff !important; }
.navbar-title { white-space:nowrap; }
.navbar-subtitle { display:block; max-width:none; white-space:nowrap; font:600 13px/1.4 var(--font-sans); letter-spacing:0; text-transform:none; padding-left:16px; border-left:1px solid rgba(255,255,255,.22); color:var(--ink-muted); }
.navbar-nav { gap:6px; }
.navbar-nav .nav-link { padding:.55rem .7rem !important; font-size:14px; font-weight:500; border-radius:0; color:var(--ink-muted) !important; background:none; box-shadow:none; }
.navbar-nav .nav-link:hover { color:#fff !important; background:none; }
.navbar-nav .nav-link.active { color:#fff !important; background:none; border-bottom:2px solid var(--accent); box-shadow:none; font-weight:600; }
.navbar .navbar-toggler { color:#fff; }
.navbar .navbar-toggler-icon { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23ffffff' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); }

/* Buttons & links */
.modern-home .button, .section-link, .page-hero .section-link { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:10px 22px; background:var(--accent); color:var(--ink); border:1px solid var(--accent); border-radius:var(--radius-sm); font-family:var(--font-heading); font-size:14px; font-weight:600; text-decoration:none; box-shadow:none; transform:none; }
.modern-home .button:hover, .section-link:hover { background:#d9962f; border-color:#d9962f; color:var(--ink); transform:none; box-shadow:none; }
.modern-home .text-link, .profile-links a, .affiliation-links a, .citation-note a, .research-paper a, .contact-address .institutional-link { display:inline-flex; align-items:center; gap:.4rem; background:none; border:0; border-radius:0; box-shadow:none; padding:8px 0; min-height:44px; color:var(--text); font-family:var(--font-heading); font-size:.9rem; font-weight:600; text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:2px; text-underline-offset:5px; transform:none; }
.modern-home .text-link:hover, .profile-links a:hover, .affiliation-links a:hover, .research-paper a:hover { color:var(--accent-dark); background:none; transform:none; box-shadow:none; border:0; }
.email-link { font-family:var(--font-heading); font-size:1.2rem; font-weight:600; color:var(--text); border-bottom:2px solid var(--accent); overflow-wrap:anywhere; }

/* Image frames */
.image-placeholder, .modern-home .art-placeholder { border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); color:var(--muted-text); box-shadow:none; overflow:hidden; }
.image-placeholder:has(img) { position:relative; padding:0; }
.image-placeholder img { display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* Homepage — ink hero band */
.modern-home .home-hero { background:var(--ink); box-shadow:0 0 0 100vmax var(--ink); clip-path:inset(0 -100vmax); padding-block:72px; }
.modern-home .home-hero h1 { color:#fff; }
.modern-home .home-hero .hero-kicker { color:var(--ink-muted); }
.modern-home .home-hero .hero-copy p { color:var(--ink-muted); }
.modern-home .home-hero .text-link { color:#fff; text-decoration-color:var(--accent); }
.modern-home .home-hero .text-link:hover { color:var(--accent); }
.modern-home .home-hero .eyebrow { color:var(--accent); }
.modern-home .hero-art { border:0; box-shadow:var(--shadow-md); border-radius:var(--radius-lg); }
.modern-home .home-section, .home-section { border-top:1px solid var(--border-light); }
.modern-home .home-approach { border-top:0; }
.modern-home .approach-items { border-top-color:var(--border); }
.modern-home .approach-items article { border-bottom-color:var(--border); }
.modern-home .approach-items h3 { font-family:var(--font-heading); }
.modern-home .future-statement { font-family:var(--font-heading); font-weight:600; color:var(--text); border-left:3px solid var(--accent); padding-left:18px; }

/* Build With Us — closing ink band that mirrors the hero */
.modern-home .home-build { background:var(--ink); box-shadow:0 0 0 100vmax var(--ink); clip-path:inset(0 -100vmax); border-top:0; }
.modern-home .home-build h2 { color:#fff; }
.modern-home .home-build .eyebrow { color:var(--accent); }
.modern-home .home-build p { color:var(--ink-muted); }
.modern-home .home-build .text-link { color:#fff; text-decoration-color:var(--accent); }
.modern-home .home-build .text-link:hover { color:var(--accent); }
.modern-home .build-art { border:0; box-shadow:var(--shadow-md); border-radius:var(--radius-lg); }
#quarto-content, .modern-home, main.content { margin-bottom:0; padding-bottom:0; }
/* Quarto reserves an empty 60px grid track above the footer; collapse it so the band meets the footer. */
.page-rows-contents { grid-template-rows:[content-top] minmax(max-content,1fr) [content-bottom] minmax(0,max-content) [page-bottom]; }

/* Research page — heading spans the full width; each step has its own figure arrangement */
.research-section { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px clamp(2rem,4vw,3.5rem); align-items:center; }
.research-section > .eyebrow, .research-section > h2 { grid-column:1 / -1; }
.research-section > .eyebrow { margin-bottom:2px; }
.research-section > h2 { margin-bottom:12px; }
.research-section .image-placeholder { background:#fff; }
/* Step 1 — paragraphs beside the principle callout, then a captioned pipeline of three figures */
.research-section--atlas { grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); column-gap:44px; align-items:center; }
.research-principle--aside { margin:0; color:var(--text); border-left:3px solid var(--accent); padding-left:18px; font-family:var(--font-heading); font-weight:500; font-size:1.15rem; line-height:1.45; }
.figure-strip--captioned { grid-column:1 / -1; display:grid; grid-template-columns:.948fr auto .948fr auto 1.096fr; gap:10px; align-items:center; margin-top:24px; width:min(100%,1054px); justify-self:center; }
.figure-strip--captioned figure { margin:0; }
.figure-strip--captioned .image-placeholder { width:100%; height:auto; }
.figure-strip--captioned figcaption { margin-top:10px; text-align:center; font-family:var(--font-heading); font-size:.82rem; font-weight:600; color:var(--text); }
.figure-arrow { color:var(--accent); font-family:var(--font-heading); font-size:1.5rem; line-height:1; padding-bottom:26px; }
/* Step 2 — portrait figure centered beside its text */
.research-section--reverse { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.research-section--reverse .image-placeholder { width:min(100%,300px); height:auto; justify-self:center; }
/* Step 3 — single figure centered beside its text */
.research-section--compact { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); }
.research-section--compact .image-placeholder { width:min(100%,360px); height:auto; justify-self:center; transform:translateY(-54px); }

/* People page — PI card (portrait, name, affiliation, contact) beside the labelled bio; profile links close the bio */
/* the card column takes the width of its longest line (the affiliation), and the portrait matches it */
.profile { grid-template-columns:max-content minmax(0,1fr); align-items:start; }
.profile__card { display:flex; flex-direction:column; align-items:flex-start; gap:0; }
.profile__card .image-placeholder--portrait { width:100%; margin:0; }
.profile .profile__card h1 { font-size:1.5rem; line-height:1.2; margin:18px 0 8px; }
.profile__card .profile__role { margin:0 0 10px; font-size:.95rem; line-height:1.55; }
.profile__contact { font-style:normal; font-size:.92rem; line-height:1.6; color:var(--muted-text); margin:0; }
.profile__contact a { color:var(--text); text-decoration-color:var(--accent); }
.profile__copy { align-self:start; padding-top:0; }
.profile__copy .eyebrow { margin-bottom:14px; }
.profile__copy .profile-links { display:flex; flex-direction:row; flex-wrap:wrap; gap:24px; margin-top:18px; padding-top:18px; border-top:1px solid var(--border-light); }
.profile__copy .profile-links a { min-height:36px; padding:4px 0; }

/* Join page — CSHL and Northwell photo banner under the affiliation heading */
.affiliation-photos { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:8px 0 30px; }
.affiliation-photo { margin:0; }
.affiliation-photo .image-placeholder { width:100%; height:auto; }
.affiliation-photo figcaption { margin-top:10px; font-family:var(--font-heading); font-size:.82rem; font-weight:600; color:var(--text); }

/* People page — recruiting text runs wide (two lines) beside a compact lab photo */
.recruiting-panel { grid-template-columns:minmax(0,1fr) 220px; gap:32px; align-items:center; }
.recruiting-panel .image-placeholder { width:100%; height:auto; justify-self:end; }
.recruiting-panel__copy p { font-size:.95rem; }
@media(max-width:900px) {
  .recruiting-panel { grid-template-columns:1fr; }
  .recruiting-panel .image-placeholder { height:auto; width:100%; justify-self:stretch; }
  .profile { grid-template-columns:1fr; }
  .affiliation-photos { grid-template-columns:1fr; gap:14px; }
  .profile__card .image-placeholder--portrait { max-width:340px; }
  .research-section--atlas, .research-section--reverse, .research-section--compact { grid-template-columns:1fr; }
  .figure-strip--captioned { grid-template-columns:1fr 1fr 1fr; gap:8px; }
  .figure-arrow { display:none; }
  .research-section--reverse .image-placeholder, .research-section--compact .image-placeholder { justify-self:start; transform:none; }
  /* phone order: label, photo card, bio */
  .profile__copy { display:contents; }
  .profile__copy > * { order:2; }
  .profile__copy > .eyebrow { order:0; margin-bottom:6px; }
  .profile__card { order:1; margin-bottom:22px; }
  .profile__copy > .profile-links { margin-top:12px; }
}

/* Research papers */
.research-paper-grid { gap:20px; }
.research-paper { padding:24px; border:1px solid var(--border); background:var(--surface); border-radius:var(--radius-md); border-top:3px solid var(--accent); }
.research-paper h3 { font-size:1.05rem; font-weight:600; line-height:1.45; }
.research-paper .paper-meta { color:var(--accent-dark); font-family:var(--font-heading); font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.research-paper .paper-authors { font-size:.88rem; }

/* Publications */
.publication-header-flex { align-items:center; }
.publication-list li { padding:22px 0 22px 52px; margin:0; background:none; border:0; border-top:1px solid var(--border-light); border-radius:0; box-shadow:none; font-size:.98rem; color:var(--muted-text); }
.publication-list li:hover { background:none; box-shadow:none; transform:none; border-color:var(--border-light); }
.publication-list li::before { left:0; top:24px; width:auto; height:auto; background:none; border-radius:0; color:var(--accent-dark); font-family:var(--font-heading); font-size:.85rem; font-weight:600; }
.publication-list strong { color:var(--text); font-weight:600; }
.contribution-note { font-weight:500; color:var(--accent-dark); }

/* Contact & misc */
.contact-grid { background:none; box-shadow:none; gap:24px; }
.contact-grid > div, .contact-primary, .contact-address { background:var(--surface); box-shadow:none; border:1px solid var(--border); border-top:3px solid var(--accent); border-radius:var(--radius-md); padding:32px; transform:none; }
.contact-grid > div:hover { border-color:var(--border); border-top-color:var(--accent); box-shadow:none; transform:none; }
.contact-primary h2 { font-size:1.4rem; }
.nav-footer { border-top:0; background:var(--ink); color:var(--ink-muted); font-size:.82rem; padding-block:36px; }
.nav-footer strong { color:#fff; }
.nav-footer a { color:#fff; text-decoration-color:var(--accent); }

@media(max-width:991px) {
  .navbar-brand-container { max-width:calc(100% - 56px) !important; }
  .navbar-brand { gap:14px; }
  .navbar-subtitle { padding-left:14px; }
  .navbar-toggler { order:2; margin-left:auto; }
  .navbar-collapse { order:3; }
  .navbar-collapse .nav-link { min-height:44px; }
}
@media(max-width:800px) { .modern-home .home-hero { padding-block:44px; } }
@media(max-width:600px) {
  .page-shell, .navbar .container-fluid { width:calc(100% - 32px); }
  .navbar-brand { gap:10px; }
  .navbar-title { font-size:21px; }
  .navbar-subtitle { padding-left:10px; font-size:11px; max-width:160px; line-height:1.4; white-space:normal; }
  .page-hero, .research-section, .profile, .selected-publications, .recruiting-panel, .affiliation-section, .mechanisms, .contact-grid { padding-block:36px; }
  .affiliation-photos, .affiliation-photo, .affiliation-photo .image-placeholder { min-width:0; max-width:100%; }
  .affiliation-photo { display:block; width:100%; }
  .publication-list li { padding-left:34px; }
  .profile-links { gap:8px 24px; }
}
@media(max-width:600px) {
  .figure-strip--captioned { grid-template-columns:1fr; gap:22px; }
  .figure-strip--captioned .image-placeholder { max-width:420px; margin-inline:auto; }
}