/* ============ Easy-to-change settings ============ */
:root {
  --font: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --text: #222731;
  --muted: #5d6472;
  --accent: #001E3E;        /* dark blue: links, labels */
  --accent-hover: #0B3A6E;
  --line: #e3e6ec;
  --soft: #f6f7f9;          /* light panel background */
  --bg: #ffffff;
  --maxw: 1100px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--font); font-size: 18px; line-height: 1.6; color: var(--text); background: var(--bg); }
img { max-width: 100%; display: block; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ============ Nav ============ */
.site-nav { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(6px); }
.site-nav .container { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.site-name { font-weight: 700; font-size: 20px; color: var(--text); text-decoration: none; }
.site-name:hover { color: var(--accent); }
.nav-links { list-style: none; display: flex; gap: 26px; margin: 0; padding: 0; }
.nav-links a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 16px; }
.nav-links a:hover { color: var(--accent); }
.nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; font: inherit; font-size: 15px; color: var(--text); cursor: pointer; }

/* ============ Hero ============ */
.hero { padding: 64px 0 56px; }
.hero .container { display: grid; grid-template-columns: 260px 1fr; gap: 48px; align-items: start; }
.hero-photo { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: var(--soft); }
.hero h1 { font-size: 44px; line-height: 1.1; margin: 0 0 10px; font-weight: 700; }
.hero-title { margin: 0 0 20px; color: var(--muted); font-size: 19px; line-height: 1.5; }
.hero-title em { color: var(--text); }
.hero p { max-width: 68ch; margin: 0 0 14px; }
.hero-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.btn { display: inline-block; padding: 8px 16px; border: 1px solid var(--line); border-radius: 6px; font-weight: 600; font-size: 16px; text-decoration: none; color: var(--text); background: #fff; }
.btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-hover); color: #fff; }

/* ============ Sections ============ */
.section { padding: 72px 0; border-top: 1px solid var(--line); }
.section-label { font-size: 15px; font-weight: 700; color: var(--accent); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 6px; }
.section h2 { font-size: 32px; line-height: 1.2; margin: 0 0 16px; font-weight: 700; }
.section-intro { max-width: 72ch; margin: 0 0 36px; }
.section h3.sub { font-size: 21px; margin: 40px 0 16px; font-weight: 700; }
.section h3.sub:first-of-type { margin-top: 0; }

/* ============ Research cards ============ */
.research-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.research-card { display: flex; flex-direction: column; text-align: left; font: inherit; color: inherit; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; padding: 0; cursor: pointer; }
.research-card:hover { border-color: #c5cad4; }
.research-card[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.research-img { aspect-ratio: 16 / 9; background: var(--soft) center / cover no-repeat; border-bottom: 1px solid var(--line); }
.research-body { padding: 18px 22px 20px; }
.research-body h3 { margin: 0 0 8px; font-size: 21px; font-weight: 700; }
.research-body p { margin: 0 0 12px; color: var(--muted); font-size: 17px; }
.research-more { color: var(--accent); font-weight: 600; font-size: 16px; }
.research-card[aria-expanded="true"] .research-more .open { display: none; }
.research-card[aria-expanded="false"] .research-more .close { display: none; }
.research-panel { grid-column: 1 / -1; background: var(--soft); border-radius: 10px; padding: 28px 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.research-panel[hidden] { display: none; }
.research-panel h4 { margin: 0 0 10px; font-size: 18px; font-weight: 700; }
.research-panel p { margin: 0 0 12px; font-size: 17px; }
.research-panel ul { margin: 0; padding-left: 20px; }
.research-panel li { margin-bottom: 10px; font-size: 16.5px; }

/* ============ Publications ============ */
.pub-list { list-style: none; margin: 0; padding: 0; }
.pub-list li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.pub-list li:last-child { border-bottom: 0; }
.pub-title { font-weight: 700; font-size: 18px; }
.pub-title a { color: var(--text); text-decoration: none; }
.pub-title a:hover { color: var(--accent); text-decoration: underline; }
.pub-meta { color: var(--muted); font-size: 16.5px; }
.pub-meta b { color: var(--text); font-weight: 600; }
.pub-links { font-size: 15.5px; margin-top: 4px; }
.pub-links a { margin-right: 14px; font-weight: 600; }
.badge { display: inline-block; font-size: 14px; font-weight: 600; background: #fff4d6; color: #7a5a00; padding: 1px 8px; border-radius: 4px; margin-left: 4px; }

/* ============ Year lists (awards, education) ============ */
.year-list { list-style: none; margin: 0; padding: 0; }
.year-list > li { display: grid; grid-template-columns: 100px 1fr; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.year-list > li:last-child { border-bottom: 0; }
.year-list .year { font-weight: 700; color: var(--accent); }
.year-list .item + .item { margin-top: 10px; }
.year-list .what { font-weight: 600; }
.year-list .where { color: var(--muted); font-size: 16.5px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }

/* ============ Footer ============ */
footer { border-top: 1px solid var(--line); padding: 28px 0; color: var(--muted); font-size: 15.5px; }

/* ============ Responsive ============ */
@media (max-width: 860px) {
  .hero .container { grid-template-columns: 1fr; gap: 28px; }
  .hero-photo { max-width: 220px; }
  .research-grid, .two-col { grid-template-columns: 1fr; }
  .research-panel { grid-template-columns: 1fr; gap: 20px; padding: 22px; }
  .research-grid > [data-order="1"] { order: 1; } .research-grid > [data-order="2"] { order: 2; }
  .research-grid > [data-order="3"] { order: 3; } .research-grid > [data-order="4"] { order: 4; }
  .research-grid > [data-order="5"] { order: 5; } .research-grid > [data-order="6"] { order: 6; }
  .research-grid > [data-order="7"] { order: 7; } .research-grid > [data-order="8"] { order: 8; }
  .nav-toggle { display: block; }
  .nav-links { display: none; position: absolute; top: 60px; left: 0; right: 0; flex-direction: column; gap: 0; background: #fff; border-bottom: 1px solid var(--line); padding: 8px 24px 16px; }
  .nav-links.open { display: flex; }
  .nav-links a { display: block; padding: 10px 0; }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
  .hero h1 { font-size: 36px; }
  .section { padding: 52px 0; }
  .year-list > li { grid-template-columns: 1fr; gap: 4px; }
}

/* ============ Multi-page additions ============ */
.nav-links a.active { color: var(--accent); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
main > .section:first-child { border-top: 0; padding-top: 48px; }

/* ============ Research: three columns ============ */
.research-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.research-panel .venue { display: block; color: var(--muted); font-size: 15px; }
@media (max-width: 860px) { .research-grid { grid-template-columns: 1fr; } }
.badge.preprint { background: #e5eaf1; color: #001E3E; }

/* ============ Heading font ============ */
:root { --heading-font: "Linux Libertine", "Linux Libertine O", "Libertinus Serif", Georgia, "Times New Roman", serif; }
h1, h2, h3, h4, .site-name { font-family: var(--heading-font); letter-spacing: 0; }

/* ============ Soft shadows ============ */
.site-nav { box-shadow: 0 2px 10px rgba(20, 30, 55, 0.08); }
.hero-photo { box-shadow: 0 6px 20px rgba(20, 30, 55, 0.14); }
.research-card { transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.research-card:hover { box-shadow: 0 8px 22px rgba(20, 30, 55, 0.12); transform: translateY(-2px); }
.research-card[aria-expanded="true"]:hover { box-shadow: 0 0 0 1px var(--accent), 0 8px 22px rgba(20, 30, 55, 0.12); }
@media (prefers-reduced-motion: reduce) { .research-card:hover { transform: none; } }

/* ============ Research cards: smooth click (no shadow flash) ============ */
/* Every state uses the same two shadow layers (outline ring + soft drop shadow),
   so the browser fades between them instead of morphing one into the other. */
.research-card { box-shadow: 0 0 0 1px transparent, 0 8px 22px rgba(20, 30, 55, 0); }
.research-card:hover { box-shadow: 0 0 0 1px transparent, 0 8px 22px rgba(20, 30, 55, 0.12); }
.research-card[aria-expanded="true"] { box-shadow: 0 0 0 1px var(--accent), 0 8px 22px rgba(20, 30, 55, 0); }
.research-card[aria-expanded="true"]:hover { box-shadow: 0 0 0 1px var(--accent), 0 8px 22px rgba(20, 30, 55, 0.12); }

/* ============ Footer layout ============ */
footer .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; }

/* ============ Dark blue menu bar and footer ============ */
.site-nav { background: var(--accent); border-bottom: 0; backdrop-filter: none; }
.site-name, .site-name:hover { color: #fff; }
.nav-links a { color: rgba(255, 255, 255, 0.82); text-underline-offset: 6px; text-decoration-thickness: 2px; }
.nav-links a:hover, .nav-links a:focus-visible { color: #fff; text-decoration: underline; }
.nav-links a.active { color: #fff; text-decoration: underline; }
.nav-toggle { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.site-nav :focus-visible { outline-color: #fff; }
@media (max-width: 860px) { .nav-links { background: var(--accent); border-bottom: 0; } }
footer { background: var(--accent); color: #fff; border-top: 0; }

/* Keep the footer at the bottom of the window on short pages */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > footer { margin-top: auto; }

/* ============ Stronger shadows for the dark bars ============ */
.site-nav { box-shadow: 0 3px 12px rgba(20, 30, 55, 0.28); }
footer { position: relative; box-shadow: 0 -3px 12px rgba(20, 30, 55, 0.22); }

/* ============ Button icons ============ */
.btn { display: inline-flex; align-items: center; gap: 8px; }
.btn-icon { width: 18px; height: 18px; flex: none; }

/* ============ Home page buttons: white by default, dark blue on hover ============ */
.hero-links .btn, .hero-links .btn.primary {
  background: #fff; color: var(--text); border-color: var(--line);
  box-shadow: 0 2px 8px rgba(0, 30, 62, 0.12);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.hero-links .btn:hover, .hero-links .btn:focus-visible,
.hero-links .btn.primary:hover, .hero-links .btn.primary:focus-visible {
  background: var(--accent); color: #fff; border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(0, 30, 62, 0.25); text-decoration: none;
}

/* Home buttons: no shadow at rest (same shadow shape, fully transparent, so hover fades in smoothly) */
.hero-links .btn, .hero-links .btn.primary { box-shadow: 0 4px 14px rgba(0, 30, 62, 0); }

/* Name in the menu bar: underline only on hover (never as a "current page" marker) */
.site-name { text-decoration: none; text-underline-offset: 6px; text-decoration-thickness: 2px; }

/* Title lines under the name on the home page: slightly lighter than the header/footer blue */
.hero-title, .hero-title em { color: #1F3F63; }

/* Paper titles on the Publications page: regular weight */
.pub-title { font-weight: 400; }

/* Short italic description under a publications section heading */
.sub-note { margin: -8px 0 12px; color: var(--muted); font-style: italic; font-size: 17px; }

/* Footer: single centered line */
footer .container { justify-content: center; text-align: center; }

/* Publications: title / authors / venue on separate lines */
.pub-authors { color: var(--muted); font-size: 16.5px; }
.pub-authors b { color: var(--text); font-weight: 600; }
.pub-venue { color: var(--muted); font-size: 16.5px; font-style: italic; }

/* Linked paper titles: faint underline at rest, stronger on hover */
.pub-title a { text-decoration: underline; text-decoration-color: rgba(0, 30, 62, 0.28); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color .15s ease; }
.pub-title a:hover, .pub-title a:focus-visible { color: var(--accent); text-decoration-color: var(--accent); }

/* ============ Heading font: Times New Roman ============ */
:root { --heading-font: "Times New Roman", Times, "Liberation Serif", "TeX Gyre Termes", serif; }

/* Highlighted phrase in the home page bio */
.bio-highlight { color: var(--accent); }

/* Clearer blue for blue body text (title lines under the name + job-market highlight) */
:root { --blue-text: #1D4F91; }
.hero-title, .hero-title em, .bio-highlight { color: var(--blue-text); }

/* All text links turn the lighter blue on hover */
a:hover, a:focus-visible { color: var(--blue-text); }
.pub-title a:hover, .pub-title a:focus-visible { color: var(--blue-text); text-decoration-color: var(--blue-text); }

.nowrap { white-space: nowrap; }

/* Name heading now sits directly above the bio */
.hero h1 { margin-bottom: 20px; }

/* ============ Research page: featured privacy card + two-column highlights ============ */
.featured-grid { grid-template-columns: 1fr; }
.two-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.research-card.featured { flex-direction: row; }
.research-card.featured .research-img { flex: 0 0 46%; aspect-ratio: auto; min-height: 280px; border-bottom: 0; border-right: 1px solid var(--line); }
.research-card.featured .research-body { padding: 32px 36px; align-self: center; }
.research-card.featured h3 { font-size: 28px; margin-bottom: 12px; }
.research-card.featured p { font-size: 18.5px; }
.research-subhead { margin-top: 56px !important; }
@media (max-width: 860px) {
  .two-grid { grid-template-columns: 1fr; }
  .research-card.featured { flex-direction: column; }
  .research-card.featured .research-img { flex: none; aspect-ratio: 16 / 9; min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .research-card.featured .research-body { padding: 18px 22px 20px; }
  .research-card.featured h3 { font-size: 22px; }
}

/* ============ Publications note, poster tags, bolded bio line, CV viewer ============ */
.pubs-note { color: var(--muted); font-style: italic; }
.pub-extras { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 8px; }
.pub-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 600; font-style: normal; padding: 3px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--accent); background: #fff; text-decoration: none; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.pub-tag:hover, .pub-tag:focus-visible { background: var(--accent); border-color: var(--accent); color: #fff; text-decoration: none; }
.tag-icon { width: 14px; height: 14px; flex: none; }
.hero strong { font-weight: 700; }
.cv-frame { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; height: 85vh; min-height: 560px; box-shadow: 0 6px 20px rgba(0, 30, 62, 0.10); }
.cv-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Job-market line: semibold italic */
.hero strong { font-weight: 600; font-style: italic; }
/* Small external-site icon next to "Lab" */
.ext-icon { width: 12px; height: 12px; margin-left: 4px; vertical-align: 0; display: inline-block; }
.nav-links a:has(.ext-icon) { white-space: nowrap; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Lab icon: glyph fills its box, sized to the letters' height */
.ext-icon { width: 0.72em; height: 0.72em; margin-left: 5px; vertical-align: 0; }

/* Job-market line: header dark blue */
.hero strong { color: var(--accent); }

/* =====================================================================
   Wider side margins + everything slightly smaller (about 8%)
   ===================================================================== */
:root { --maxw: 1000px; }
.container { padding: 0 48px; }
body { font-size: 16.5px; }
.site-name { font-size: 19px; }
.nav-links a { font-size: 15px; }
.hero { padding: 56px 0 48px; }
.hero .container { grid-template-columns: 230px 1fr; gap: 44px; }
.hero h1 { font-size: 40px; }
.btn { font-size: 15px; padding: 7px 14px; }
.btn-icon { width: 16px; height: 16px; }
.section { padding: 64px 0; }
main > .section:first-child { padding-top: 44px; }
.section-label { font-size: 14px; }
.section h2 { font-size: 29px; }
.section h3.sub { font-size: 19.5px; }
.sub-note { font-size: 15.5px; }
.research-body h3 { font-size: 19.5px; }
.research-body p { font-size: 15.5px; }
.research-more { font-size: 15px; }
.research-card.featured h3 { font-size: 25px; }
.research-card.featured p { font-size: 17px; }
.research-panel h4 { font-size: 16.5px; }
.research-panel p { font-size: 15.5px; }
.research-panel li { font-size: 15px; }
.research-panel .venue { font-size: 14px; }
.pub-title { font-size: 16.5px; }
.pub-authors, .pub-venue { font-size: 15px; }
.badge { font-size: 13px; }
.pub-tag { font-size: 13px; }
footer { font-size: 14.5px; }
@media (max-width: 860px) { .container { padding: 0 28px; } }
@media (max-width: 560px) {
  body { font-size: 16px; }
  .container { padding: 0 20px; }
  .hero h1 { font-size: 33px; }
}

/* =====================================================================
   CV viewer: a little shorter, with a small margin at the top inside the window
   ===================================================================== */
.cv-frame { height: 72vh; min-height: 460px; }

/* Over-scrolling (the bounce past the top or bottom) shows dark blue, matching the header and footer */
html { background: var(--accent); }
body { background: #fff; }

/* =====================================================================
   Phone fixes
   ===================================================================== */
/* Main page: stack the photo above the text on phones and small tablets */
@media (max-width: 860px) {
  .hero .container { grid-template-columns: 1fr; gap: 28px; }
  .hero-photo { max-width: 200px; }
  .research-card.featured h3 { font-size: 21px; }
  .research-card.featured p { font-size: 15.5px; }
}
/* CV page: keep the embedded PDF inside the page width */
.cv-frame iframe { width: 1px; min-width: 100%; }

/* CV on phones: fit-to-width page preview instead of the embedded window */
.cv-pages { display: none; }
@media (max-width: 860px) {
  .cv-frame { display: none; }
  .cv-pages { display: block; height: 72vh; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--soft); border: 1px solid var(--line); border-radius: 10px; padding: 10px; box-shadow: 0 6px 20px rgba(0, 30, 62, 0.10); }
  .cv-pages canvas { display: block; margin: 0 auto 10px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); }
  .cv-loading, .cv-open { margin: 6px 4px; font-size: 15px; color: var(--muted); text-align: center; }
}

/* =====================================================================
   iPhone Safari fixes
   ===================================================================== */
/* Over-scroll: a tall dark-blue band above the header and below the footer.
   Drawn as extra shadows, so it never adds scrolling or covers content. */
.site-nav { box-shadow: 0 3px 12px rgba(20, 30, 55, 0.28), 0 -50vh 0 50vh var(--accent); }
footer { box-shadow: 0 -3px 12px rgba(20, 30, 55, 0.22), 0 50vh 0 50vh var(--accent); }

/* Research pictures: size the image area with a method every browser supports
   (some iPhone Safari versions give the previous method zero height) */
.research-img { display: block; width: 100%; flex: none; aspect-ratio: auto; height: 0; padding-top: 56.25%; }
@media (min-width: 861px) {
  .research-card.featured .research-img { width: auto; flex: 0 0 46%; height: auto; padding-top: 0; min-height: 280px; }
}

/* Over-scroll, attempt 3: make the page body itself dark blue (some Safari versions use the
   body color for the bounce area) and give the page content its own white background.
   The content stretches to fill the screen, so no blue shows between it and the footer. */
body { background: var(--accent); }
body > header, body > main, body > .page:not([hidden]) { background: #fff; flex: 1 0 auto; }

/* =====================================================================
   Poster lightbox: poster floats over a blurred, greyed page
   ===================================================================== */
.lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 56px 20px 28px; background: rgba(15, 22, 35, 0.45); -webkit-backdrop-filter: blur(6px) grayscale(60%); backdrop-filter: blur(6px) grayscale(60%); opacity: 0; transition: opacity .2s ease; }
.lightbox[hidden] { display: none; }
.lightbox.is-visible { opacity: 1; }
.lightbox-figure { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; max-width: 100%; max-height: 100%; }
.lightbox-img { display: block; max-width: min(92vw, 1400px); max-height: calc(100vh - 130px); width: auto; height: auto; border-radius: 6px; background: #fff; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 4px 14px rgba(0, 0, 0, 0.25); opacity: 0; transform: scale(.98); transition: opacity .25s ease, transform .25s ease; }
.lightbox-img.is-loaded { opacity: 1; transform: none; }
.lightbox-loading { color: #fff; margin: 0; font-size: 16px; }
.lightbox-loading[hidden] { display: none; }
.lightbox figcaption { margin: 0; }
.lightbox-full { color: #fff; font-size: 15px; font-weight: 600; text-underline-offset: 4px; }
.lightbox-full:hover, .lightbox-full:focus-visible { color: #fff; text-decoration-thickness: 2px; }
.lightbox-close { position: absolute; top: 12px; right: 14px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--accent); font-size: 20px; line-height: 32px; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); }
.lightbox-close:hover, .lightbox-close:focus-visible { background: #fff; }
html.lightbox-open, html.lightbox-open body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .lightbox, .lightbox-img { transition: none; } }