/* ==========================================================================
   Keren Jia — Personal Homepage
   A quiet, editorial style for an academic physician-scientist.
   ========================================================================== */

/* ---------- Local fonts (self-hosted, no Google Fonts) ----------
   Variable woff2 subsets (latin) downloaded once into assets/fonts/. The
   font-weight blocks below mirror what the site references: Inter 400/500/600
   and Source Serif 4 400/600 — both are variable fonts, so the two files cover
   all of those weights. font-display: swap matches the previous Google Fonts
   behaviour, but with local files the swap is effectively instant. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/source-serif-4-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/source-serif-4-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #1b2530;            /* primary text */
  --ink-2: #46535f;          /* secondary text */
  --muted: #84929e;          /* tertiary text */
  --line: #e5e9ef;           /* hairlines */
  --bg: #ffffff;
  --bg-soft: #f6f8fa;
  --accent: #1b4d78;         /* deep academic blue */
  --accent-2: #2f7db3;
  --accent-soft: #eaf1f7;
  --serif: "Source Serif 4", "Songti SC", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --radius: 14px;
  --maxw: 1100px;
  --shadow-soft: 0 18px 40px -22px rgba(23, 45, 74, 0.35);
  --header-bg: rgba(255, 255, 255, 0.86);  /* sticky header backdrop */
  --line-strong: #cdd8e4;                  /* card hover border */
}

/* ---------- Dark theme ---------- */
html[data-theme="dark"] {
  --ink: #e8eef5;
  --ink-2: #b9c4d1;
  --muted: #7d8ba0;
  --line: #26303f;
  --bg: #0e1420;
  --bg-soft: #18202e;
  --accent: #8ab4f8;
  --accent-2: #a8c8f5;
  --accent-soft: #1c2a3d;
  --shadow-soft: 0 18px 40px -22px rgba(0, 0, 0, 0.65);
  --header-bg: rgba(14, 20, 32, 0.86);
  --line-strong: #33415a;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--accent-soft); color: var(--accent); }
a { color: var(--accent); text-decoration: none; transition: color .18s ease; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 4px; }
img { max-width: 100%; display: block; }
.container { max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }

/* ---------- Top accent bar ---------- */
.topline {
  height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 55%, transparent 100%);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 16px;
}
.brand {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.24rem;
  color: var(--ink);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.brand:hover { text-decoration: none; color: var(--accent); }
.brand-group {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* ---------- Theme toggle ---------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink-2);
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent-2);
  transform: translateY(-1px);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
}
.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  transition: opacity .3s ease, transform .45s cubic-bezier(.6, -0.28, .27, 1.4);
}
.theme-toggle .icon-moon {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
}
.theme-toggle .icon-sun {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-90deg) scale(.7);
}
html[data-theme="dark"] .theme-toggle .icon-moon {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg) scale(.7);
}
html[data-theme="dark"] .theme-toggle .icon-sun {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
}
.flag {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-style: normal;
  margin-right: 6px;
}
.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2px;
}
.nav a {
  display: block;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: color .18s ease, background-color .18s ease;
}
.nav a:hover { color: var(--accent); background: var(--bg-soft); text-decoration: none; }
.nav a.active {
  color: var(--accent);
  background: var(--accent-soft);
  font-weight: 600;
}

/* ---------- Hero (home) ---------- */
.hero { padding: 72px 0 40px; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 340px) 1fr;
  gap: 56px;
  align-items: center;
}
.hero-photo {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  background: var(--bg-soft);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.4rem, 5vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.kicker {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}
.role {
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 6px;
}
.affil { color: var(--muted); font-size: 0.95rem; margin: 0 0 20px; }
.hero-blurb { color: var(--ink-2); max-width: 58ch; margin: 0 0 22px; }

/* ---------- Social icons ---------- */
.socials { display: flex; gap: 10px; margin: 0 0 26px; }
.socials a {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-2);
  transition: color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.socials a:hover {
  color: var(--accent);
  border-color: var(--accent-2);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px -12px rgba(27, 77, 120, 0.5);
  text-decoration: none;
}
.socials svg { width: 18px; height: 18px; }

/* ---------- Buttons ---------- */
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  display: inline-block;
  padding: 11px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  font-family: var(--sans);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  box-shadow: 0 10px 20px -14px rgba(27, 77, 120, 0.6);
}
.btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn-ghost {
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn-ghost:hover { border-color: var(--accent-2); color: var(--accent); }

/* ---------- Sections ---------- */
section.block { padding: 48px 0; border-top: 1px solid var(--line); }
.eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 6px;
}
.badge {
  display: inline-block;
  vertical-align: 3px;
  margin-left: 10px;
  padding: 3px 10px;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  border-radius: 999px;
}
h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}
.section-intro { color: var(--ink-2); max-width: 72ch; margin: 0 0 26px; }

/* ---------- Subpage hero ---------- */
.page-hero { padding: 60px 0 8px; }
.page-hero h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 2.8rem);
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
.page-hero .lede { color: var(--ink-2); max-width: 74ch; margin: 0; }

/* ---------- Card grid ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 30px -22px rgba(23, 45, 74, 0.28);
  border-color: var(--line-strong);
}
.card .num { font-family: var(--serif); font-weight: 600; color: var(--accent); font-size: 0.9rem; }
.card h3 { font-size: 1.05rem; font-weight: 600; margin: 8px 0 8px; line-height: 1.4; }
.card p { color: var(--ink-2); font-size: 0.94rem; margin: 0; }

/* ---------- Publication list ---------- */
.pub-list { list-style: none; margin: 0; padding: 0; }
.pub-list li { padding: 20px 0; border-bottom: 1px solid var(--line); }
.pub-list li:last-child { border-bottom: 0; }
.pub-authors { margin: 0 0 4px; font-size: 0.95rem; color: var(--ink-2); }
.pub-authors strong.author {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.pub-title { margin: 0 0 4px; font-size: 1.05rem; font-weight: 500; line-height: 1.45; }
.pub-journal { margin: 0; color: var(--muted); font-size: 0.93rem; }
.pub-journal em { color: var(--ink-2); font-style: italic; }
.year-head {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  margin: 44px 0 0;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ink);
  display: inline-block;
}
.year-head:first-of-type { margin-top: 0; }
.footnote { color: var(--muted); font-size: 0.88rem; margin: 16px 0 0; }

.travel-list {
  list-style: none;
  margin: 8px 0 26px;
  padding: 14px 0 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px 28px;
}
.travel-list li {
  font-size: 0.95rem;
  color: var(--ink-2);
}

/* ---------- Photo gallery (Beyond) ---------- */
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  margin: 4px 0 20px;
}
.photo-gallery--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.photo-gallery--triple {
  /* Three photos in one row at a common height: the track widths follow the
     images' aspect ratios (landscape 4:3 vs portrait 3:4 → 16fr : 9fr), so
     the fr order must match the order of the <figure> elements in the HTML. */
  grid-template-columns: 16fr 9fr 9fr;
}
.photo-item {
  margin: 0;
}
.photo-item--wide {
  grid-column: 1 / -1;
}
.photo-item a.photo-link {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-soft);
  box-shadow: var(--shadow-soft);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.photo-item a.photo-link:hover,
.photo-item a.photo-link:focus-visible {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  text-decoration: none;
}
.photo-item img {
  width: 100%;
  height: auto;
  display: block;
}
.photo-item figcaption {
  margin-top: 10px;
  font-size: 0.88rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.55;
}

/* ---------- Video embed (Beyond) ---------- */
.video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-soft);
}
.video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.video-caption {
  margin: 10px 0 26px;
  font-size: 0.88rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.55;
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 6vh 5vw;
  background: rgba(9, 13, 20, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.lightbox.is-open { display: flex; }
.lightbox figure { margin: 0; position: relative; }
.lightbox-img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 8px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
  object-fit: contain;
  transition: opacity .18s ease;
}
.lightbox-img--loading { opacity: 0; }
/* While the large image is loading, the <img> has no intrinsic size yet, so
   the <figure> collapses to just the caption and the absolutely centered
   spinner (top:50%) would sit on top of the caption text. Hiding the caption
   during the loading state keeps the spinner centered on the (still empty)
   image area, clear of the caption that reappears once loading finishes. */
.lightbox-img--loading ~ .lightbox-caption { display: none; }
.lightbox-img--error { opacity: .25; filter: grayscale(1); }
.lightbox-caption {
  margin-top: 14px;
  text-align: center;
  color: #dfe7f1;
  font-size: 0.92rem;
  line-height: 1.55;
}
.lightbox-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: lightbox-spin .8s linear infinite;
  display: none;
}
.lightbox-spinner.is-visible { display: block; }
@keyframes lightbox-spin { to { transform: rotate(360deg); } }
.lightbox-btn {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s ease;
  z-index: 2;
}
.lightbox-btn:hover { background: rgba(255, 255, 255, 0.18); }
.lightbox-close { top: 22px; right: 22px; }
.lightbox-fullscreen { bottom: 22px; right: 22px; }
.lightbox-fullscreen svg { width: 18px; height: 18px; display: block; }
.lightbox-fullscreen .icon-compress { display: none; }
.lightbox:fullscreen .lightbox-fullscreen .icon-expand { display: none; }
.lightbox:fullscreen .lightbox-fullscreen .icon-compress { display: block; }
/* Fullscreen: immersive photo view — hide the caption and let the photo fill
   the screen (object-fit: contain keeps it intact). On touch devices the
   buttons are hidden too (a tap on the photo exits/dismisses the lightbox);
   on desktop the buttons stay so the user can exit fullscreen explicitly. */
.lightbox:fullscreen { padding: 0; }
.lightbox:fullscreen .lightbox-img { max-width: 100vw; max-height: 100vh; }
.lightbox:fullscreen .lightbox-caption { display: none; }
@media (pointer: coarse) {
  .lightbox:fullscreen .lightbox-btn { display: none; }
}
.lightbox:-webkit-full-screen .lightbox-fullscreen .icon-expand { display: none; }
.lightbox:-webkit-full-screen .lightbox-fullscreen .icon-compress { display: block; }
.lightbox:-webkit-full-screen { padding: 0; }
.lightbox:-webkit-full-screen .lightbox-img { max-width: 100vw; max-height: 100vh; }
.lightbox:-webkit-full-screen .lightbox-caption { display: none; }
@media (pointer: coarse) {
  .lightbox:-webkit-full-screen .lightbox-btn { display: none; }
}
.lightbox-prev, .lightbox-next { display: none; top: 50%; transform: translateY(-50%); }
.lightbox.lightbox-multi .lightbox-prev { display: flex; left: 16px; }
.lightbox.lightbox-multi .lightbox-next { display: flex; right: 16px; }
body.lightbox-open { overflow: hidden; }

/* ---------- Highlights (home news) ---------- */

/* ---------- Highlights (home news) ---------- */
.highlights { list-style: none; margin: 0; padding: 0; }
.highlights li {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.highlights li:last-child { border-bottom: 0; }
.highlights .when { font-size: 0.85rem; color: var(--muted); font-weight: 500; padding-top: 2px; }
.highlights .text { color: var(--ink-2); font-size: 0.96rem; margin: 0; }
.highlights .text a { font-weight: 600; }

/* ---------- Contact page ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 18px;
}
.contact-card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}
.contact-card .label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}
.contact-card p { margin: 4px 0; color: var(--ink-2); font-size: 0.95rem; }
.contact-card a { font-weight: 500; word-break: break-word; }
.map-card {
  grid-column: span 2;
  min-height: 380px;
}
.map-card iframe {
  width: 100%;
  height: 320px;
  border: 0;
  border-radius: 10px;
  display: block;
  background: var(--bg-soft);
}
.team-card {
  grid-column: 1 / -1;
}
.team-card .team-credit {
  margin: 12px 0 0;
  text-align: right;
  font-size: 0.88rem;
  color: var(--muted);
}

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 28px 0 40px; color: var(--muted); font-size: 0.88rem; }
.site-footer .container { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--accent); }

/* ---------- Theme switch transition (added only while toggling) ---------- */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: background-color .4s ease, color .4s ease, border-color .4s ease,
              box-shadow .4s ease, fill .4s ease !important;
}

/* ---------- Reveal animation (progressive enhancement) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 30px; text-align: center; }
  .hero-photo { max-width: 300px; margin-inline: auto; }
  .hero-blurb { margin-inline: auto; }
  .socials, .btn-row { justify-content: center; }
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .photo-gallery--pair, .photo-gallery--triple { grid-template-columns: 1fr; }
  .site-header .container { height: auto; flex-direction: column; padding-block: 12px; gap: 10px; }
  .brand-group { justify-content: center; }
  .nav { width: 100%; }
  .nav ul { flex-wrap: wrap; justify-content: center; }
  .nav a { white-space: nowrap; font-size: 0.88rem; padding: 6px 11px; }
  .contact-grid { grid-template-columns: 1fr; }
  .map-card, .team-card { grid-column: auto; }
}