/* ==========================================================================
   Dr. Jane Doe — Cardiometabolic Research — Branding Page Stylesheet
   Plain CSS, no preprocessor, no framework. Mobile-first (min-width queries).
   Breakpoints used throughout: 768px (tablet+), 1200px (desktop+).
   ========================================================================== */

/* === Base / Reset === */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body,
h1, h2, h3, h4, h5, h6,
p, ul, ol, dl, dd,
figure {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

input,
textarea,
select {
  font: inherit;
}

/* Visually hidden but still read by screen readers. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Visible focus state for keyboard users, applied globally */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* === Design Tokens === */

:root {
  /* Color palette — "Clinical Trust", warmed slightly toward the editorial,
     less-clinical-feeling neutrals of the reference (noblehandkraft.com)
     while keeping our own navy/teal/coral identity rather than its gold. */
  --color-navy: #0B2A4A;
  --color-navy-light: #14406B;
  --color-bg: #F8F6F2;
  --color-surface: #FFFFFF;
  --color-text: #16232E;
  --color-muted: #5B6B7A;
  --color-accent: #2E86AB;
  --color-donate: #E5533C;
  --color-donate-dark: #C43F2B;
  --color-border: #E7E2D9;

  /* Shape */
  --radius: 12px;

  /* Spacing scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 5rem;

  /* Typography -- serif display paired with a clean grotesque body,
     matching the reference site's editorial pairing (Playfair Display +
     Inter) rather than a single system-font stack. */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ls-heading: -0.02em;
  --ls-label: 0.18em;

  /* Responsive type scale */
  --h1-size: clamp(2rem, 1.5rem + 2.2vw, 3.5rem);
  --h2-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.5rem);
  --h3-size: clamp(1.15rem, 1.05rem + 0.6vw, 1.5rem);

  --shadow-sm: 0 1px 2px rgba(11, 42, 74, 0.06), 0 1px 3px rgba(11, 42, 74, 0.08);
  --shadow-md: 0 4px 10px rgba(11, 42, 74, 0.08), 0 2px 4px rgba(11, 42, 74, 0.06);
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* lining-nums: Playfair's default old-style "1" reads as an "i" in
   headings like "Runx1". */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-navy);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: var(--ls-heading);
  font-variant-numeric: lining-nums;
  text-wrap: balance;
}

h1 {
  font-size: var(--h1-size);
}

h2 {
  font-size: var(--h2-size);
}

h3 {
  font-size: var(--h3-size);
}

p {
  color: var(--color-text);
}

/* Section eyebrow label + thin accent divider -- an editorial pairing used
   ahead of each major section heading for a consistent, refined rhythm. */
.section__label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.section__divider {
  width: 60px;
  height: 2px;
  background-color: var(--color-accent);
  margin-top: var(--space-2);
  margin-bottom: var(--space-3);
}

/* === Layout Primitives (.container, .section, .grid, .btn) === */

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-3);
}

/* 3rem top/bottom on phones (5rem from tablets up) -- the full desktop
   padding left ~160px of empty space between sections on small screens. */
.section {
  padding-block: var(--space-5);
  background-color: var(--color-surface);
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--space-6);
  }
}

/* Alternating tinted background for visual rhythm between sections */
.section--alt {
  background-color: var(--color-bg);
}

/* Donate CTA — the most visually prominent section on the page */
.section--cta {
  background-color: var(--color-donate);
  color: #FFFFFF;
}

.section--cta h1,
.section--cta h2,
.section--cta h3,
.section--cta p {
  color: #FFFFFF;
}

/* Grid system — mobile-first, collapses to 1 column under 768px */
.grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

/* Long labels ("Full list of publications on ORCID") may wrap on the
   narrowest phones instead of running past the screen edge. */
.btn {
  max-width: 100%;
}

@media (max-width: 359px) {
  .btn {
    white-space: normal;
    text-align: center;
    line-height: 1.3;
  }
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background-color: var(--color-navy);
  border-color: var(--color-navy);
  color: #FFFFFF;
}

.btn--primary:hover {
  background-color: var(--color-navy-light);
  border-color: var(--color-navy-light);
}

.btn--secondary {
  background-color: transparent;
  border-color: var(--color-navy);
  color: var(--color-navy);
}

.btn--secondary:hover {
  background-color: var(--color-navy);
  color: #FFFFFF;
}

/* Donate button — distinct from --color-accent, high-contrast call to action */
.btn--donate {
  background-color: var(--color-donate);
  border-color: var(--color-donate);
  color: #FFFFFF;
  box-shadow: var(--shadow-sm);
}

.btn--donate:hover {
  background-color: var(--color-donate-dark);
  border-color: var(--color-donate-dark);
  box-shadow: var(--shadow-md);
}

/* Donate button placed on the CTA section itself needs contrast against the
   donate-colored background, so it flips to a light surface. */
.section--cta .btn--donate {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--color-donate-dark);
}

.section--cta .btn--donate:hover {
  background-color: var(--color-bg);
  border-color: var(--color-bg);
  color: var(--color-donate-dark);
}

.btn--sm {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

/* === Header / Nav === */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-2);
}

.nav__brand {
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color-navy);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.25rem;
  color: var(--color-navy);
  border-radius: var(--radius);
}

.nav__toggle:hover {
  background-color: var(--color-bg);
}

.nav__list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  gap: 0;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  padding: var(--space-2) var(--space-3);
}

.nav__list--open {
  display: flex;
}

.nav__list li {
  width: 100%;
}

.nav__link {
  display: block;
  padding: var(--space-2) 0;
  font-weight: 500;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  transition: color 0.15s ease;
}

.nav__list li:last-child .nav__link {
  border-bottom: none;
}

.nav__link:hover {
  color: var(--color-accent);
}

/* Current-section highlight */
.nav__link--active {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* .btn.nav__link (Donate, in the list) should not inherit generic link styles */
.nav__list .btn {
  border-bottom: none;
  margin-top: var(--space-1);
}

/* Full link row from 960px: with seven links, anything narrower (e.g.
   768px tablets) squeezed the brand onto three lines, so tablets keep
   the menu button. */
@media (min-width: 960px) {
  .nav__toggle {
    display: none;
  }

  .nav__list {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
    background: none;
    border-bottom: none;
    box-shadow: none;
    padding: 0;
    width: auto;
  }

  .nav__list li {
    width: auto;
  }

  .nav__link {
    padding: var(--space-1) 0;
    border-bottom: none;
  }

  .nav__list .btn {
    margin-top: 0;
  }
}

/* === Hero === */

.hero {
  padding-block: var(--space-5);
}

.hero .container {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  grid-template-columns: 1fr;
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  order: 2;
}

/* Full width on phones: the hero photo is a landscape group shot, so a
   narrow portrait-sized frame would make the people too small. */
.hero__image {
  order: 1;
  justify-self: center;
  width: 100%;
}

.hero__image img,
.hero__image svg {
  border-radius: var(--radius);
}

.hero__eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-accent);
}

.hero__title {
  margin-top: var(--space-1);
}

.hero__subtitle {
  color: var(--color-muted);
  font-size: 1.125rem;
  max-width: 46ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* When the two buttons can't share a line (phones, and the narrow text
   column on tablets) each grows to the full width, so they stack as an
   aligned pair instead of two ragged widths. */
.hero__actions .btn {
  flex: 1 1 220px;
}

@media (min-width: 1024px) {
  .hero__actions .btn {
    flex: 0 0 auto;
  }
}

@media (min-width: 768px) {
  .hero .container {
    grid-template-columns: 1fr 1fr;
  }

  .hero__content {
    order: 1;
  }

  .hero__image {
    order: 2;
    justify-self: end;
    width: 100%;
  }
}

/* === Stats === */

/* A quiet tinted band between hero and About: two editorial figures in
   the serif display face, separated by a hairline, each with the same
   short accent rule used under section headings. */
.stats {
  padding-block: var(--space-5);
  background-color: var(--color-bg);
  border-block: 1px solid var(--color-border);
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: var(--space-2);
}

.stat + .stat {
  border-left: 1px solid var(--color-border);
}

.stat__number {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 1.9rem + 2.4vw, 4rem);
  font-weight: 700;
  font-variant-numeric: lining-nums;
  letter-spacing: var(--ls-heading);
  color: var(--color-navy);
  line-height: 1;
}

.stat__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--color-muted);
}

.stat__label::before {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  margin: var(--space-2) auto;
  background-color: var(--color-accent);
}

/* === Funders ticker === */

/* Kopper House-style running strip under the stats band: funder logo +
   name in small spaced capitals, separated by dots, scrolling right to
   left. White background because the supplied logos are JPEGs on white.
   The track holds ten identical groups and moves by exactly half its
   width, so the loop has no visible seam. */
.funders {
  position: relative;
  padding-block: var(--space-2);
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

/* Small label tucked into the band's top padding (taken out of the flow),
   so the logos sit exactly in the vertical middle of the white band and
   the strip runs the full width of the screen. */
.funders__label {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  z-index: 1;
  padding-inline: var(--space-3);
  text-align: center;
  font-size: 0.625rem;
  line-height: 1.4;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--color-accent);
  white-space: nowrap;
}

.funders__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent);
}

.funders__track {
  display: flex;
  width: max-content;
  animation: funders-scroll 60s linear infinite;
}

.funders__viewport:hover .funders__track {
  animation-play-state: paused;
}

.funders__group {
  display: flex;
  align-items: center;
}

.funder {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-block: var(--space-2);
}

.funder::after {
  content: "\00b7";
  margin-inline: var(--space-4);
  color: var(--color-muted);
}

.funder img {
  width: auto;
  height: 48px;
}

.funder span {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--color-text);
  white-space: nowrap;
}

@keyframes funders-scroll {
  to {
    transform: translateX(-50%);
  }
}

/* Reduced motion: no scrolling -- show one set of funders, centred. */
@media (prefers-reduced-motion: reduce) {
  .funders__track {
    width: auto;
    justify-content: center;
    animation: none;
  }

  .funders__group + .funders__group {
    display: none;
  }

  .funders__group {
    flex-wrap: wrap;
    justify-content: center;
  }

  .funders__viewport {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .funder:last-child::after {
    content: none;
  }
}

/* === About === */

.about__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  align-items: start;
}

.about__image img,
.about__image svg {
  border-radius: var(--radius);
  width: 100%;
}

.about__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.about__body p {
  color: var(--color-muted);
}

/* Higher specificity than ".about__body p" (which sets a muted color for
   ordinary paragraphs) so this credentials line keeps its own ink color. */
.about__body .about__titles {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-navy);
}

/* Photo + links stacked in the left column on wide screens, bio on the
   right. On mobile: photo, bio, then links. */
.about__grid {
  grid-template-areas:
    "image"
    "body"
    "links";
}

.about__image {
  grid-area: image;
}

.about__body {
  grid-area: body;
}

.about__links {
  grid-area: links;
  border-top: 1px solid var(--color-border);
}

@media (min-width: 768px) {
  .about__grid {
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "image body"
      "links body";
    row-gap: var(--space-3);
  }
}

/* === Research === */

.research-intro {
  font-size: 1.125rem;
  color: var(--color-text);
}

/* Three parallel, co-equal research questions -- deliberately not numbered
   (01/02/03), since numbering implies a sequence and these three themes are
   concurrent facets of one research program, not ordered steps. */
.research-questions {
  margin-top: var(--space-4);
}

/* No bordered box -- a bounded card kept creating left/right padding
   fights with the plain paragraph text around it. Matches the plain,
   box-free typography used elsewhere (About, Philosophy): just a thin
   top rule to separate the four questions, text flows naturally at the
   same left position as everything else in the section. */
.research-question {
  border-top: 3px solid var(--color-accent);
  padding-top: var(--space-3);
}

.research-question__title {
  font-size: var(--h3-size);
}

.research-question__body {
  margin-top: var(--space-2);
  color: var(--color-muted);
}

.research-outro {
  margin-top: var(--space-4);
  color: var(--color-muted);
}

/* === Publications === */

/* Grouped by research theme, box-free like the research questions: each
   theme gets the same 3px accent top rule, papers are separated by
   hairlines. On wide screens the figure sits left and the theme title
   + papers sit right, so the title lines up with the top of the figure.
   Every figure gets the same fixed-ratio frame (object-fit: contain), so
   differently shaped source figures still read as one consistent set. */
.pub-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-4);
}

.pub-group {
  display: grid;
  grid-template-areas:
    "title"
    "figure"
    "papers";
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 3px solid var(--color-accent);
}

@media (min-width: 900px) {
  .pub-group {
    grid-template-columns: 400px 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "figure title"
      "figure papers";
    column-gap: var(--space-5);
    align-items: start;
  }
}

.pub-group__title {
  grid-area: title;
  font-size: var(--h3-size);
}

/* Capped at 520px when stacked (phones/tablets) so the figure doesn't
   balloon to full tablet width; the desktop column is 400px anyway. */
.pub-group__figure {
  grid-area: figure;
  min-width: 0;
  max-width: 520px;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: #FFFFFF;
}

.pub-group__figure a {
  display: block;
  cursor: zoom-in;
}

/* The image box itself is fixed at 3:2 and the figure is scaled to fit
   inside it (object-fit: contain). Sizing from the image rather than
   with percentage heights inside an aspect-ratio box keeps every frame
   identical in Safari/iOS too, where % heights there are unreliable. */
.pub-group__figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  transition: opacity 0.15s ease;
}

.pub-group__figure a:hover img {
  opacity: 0.9;
}

.pub-list {
  grid-area: papers;
}

.pub-item {
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.pub-item:first-child {
  padding-top: 0;
}

.pub-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.pub-item__title {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-navy);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s ease;
}

.pub-item__title:hover {
  text-decoration-color: currentColor;
}

/* Non-breaking space keeps the arrow glued to the last word of the title. */
.pub-item__title::after {
  content: "\00a0\2197";
  content: "\00a0\2197" / "";
  color: var(--color-accent);
}

.pub-item__authors {
  margin-top: var(--space-1);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-muted);
}

.pub-item__authors strong {
  font-weight: 600;
  color: var(--color-text);
}

.pub-item__note {
  margin-top: 0.25rem;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--color-muted);
}

.pub-more {
  margin-top: var(--space-5);
}

/* === Media === */

.media__intro {
  color: var(--color-muted);
  max-width: 60ch;
  margin-top: var(--space-2);
  margin-bottom: var(--space-4);
}

/* Two tiles (Press, Podcast) side by side at every width, capped so
   they don't balloon on desktop. */
.press-grid {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(2, 1fr);
  max-width: 720px;
}

.press-tile {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.press-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.press-tile__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.press-tile__label {
  padding: var(--space-1) 0.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-navy);
  text-align: center;
}

@media (min-width: 768px) {
  .press-grid {
    gap: var(--space-4);
  }

  .press-tile__label {
    padding: var(--space-2) var(--space-3);
    font-size: 1rem;
  }
}

/* === Press & Events page (press.html) ===
   A photo wall in CSS columns so portrait and landscape shots keep their
   natural shape (nothing cropped -- several are posters/certificates).
   Each photo opens full size; event label + caption sit underneath. */
.press-page .breadcrumb {
  margin-bottom: var(--space-3);
}

.press-page__title {
  font-size: var(--h2-size);
}

.press-page__intro {
  max-width: 60ch;
  color: var(--color-muted);
}

.press-gallery {
  margin-top: var(--space-4);
  column-gap: var(--space-4);
}

@media (min-width: 640px) {
  .press-gallery {
    columns: 2;
  }
}

@media (min-width: 1024px) {
  .press-gallery {
    columns: 3;
  }
}

.press-item {
  break-inside: avoid;
  margin-bottom: var(--space-4);
}

/* Featured item above the photo wall: the largest image on the page,
   with its caption beside it from tablets up. */
.press-item--featured {
  margin-top: var(--space-4);
  margin-bottom: var(--space-5);
}

@media (min-width: 768px) {
  .press-item--featured {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
    column-gap: var(--space-5);
    align-items: center;
  }

  .press-item--featured figcaption {
    margin-top: 0;
  }

  .press-item--featured .press-item__text {
    margin-top: var(--space-1);
    font-family: var(--font-heading);
    font-size: var(--h3-size);
    font-variant-numeric: lining-nums;
    line-height: 1.35;
    color: var(--color-navy);
  }
}

/* Direct child only: the photo link. Caption links stay plain. */
.press-item > a {
  display: block;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: zoom-in;
}

.press-item img {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

.press-item > a:hover img {
  transform: scale(1.02);
}

.press-item figcaption {
  margin-top: var(--space-2);
}

.press-item__event {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--color-accent);
}

.press-item__text {
  margin-top: 0.35rem;
  font-size: 0.9rem;
  line-height: 1.55;
}

/* Optional outbound link under a caption (e.g. the event's website). */
.press-item__link {
  display: inline-block;
  margin-top: var(--space-1);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-accent);
  text-underline-offset: 3px;
}

.press-item__link::after {
  content: "\00a0\2197";
  content: "\00a0\2197" / "";
}

.press-item__link:hover {
  text-decoration: underline;
}

/* === Podcast & Interviews page (podcast.html) ===
   Box-free list like the publication themes: 3px accent rule per item,
   small meta line, show name, serif title, description, then a button. */
.episodes {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-4);
}

.episode {
  max-width: 72ch;
  padding-top: var(--space-3);
  border-top: 3px solid var(--color-accent);
}

.episode__meta {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--color-accent);
}

.episode__show {
  margin-top: var(--space-1);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-muted);
}

.episode__title {
  margin-top: 0.25rem;
  font-size: var(--h3-size);
}

.episode__text {
  margin-top: var(--space-2);
}

.episode__link {
  margin-top: var(--space-3);
}

/* === Team ===
   Each person is a full-width row: photo left, name/title/bio/contact right
   (stacked on mobile) -- rather than a compact card grid, so there's room
   for a real biography per person once one is supplied. */

.people-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-4);
}

.person-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

/* Large, edge-to-edge editorial photo -- deliberately square-cornered
   (unlike the site's rounded cards/buttons) so it reads as a photograph,
   not a UI card. At desktop width it stretches to match the height of
   the bio text beside it (grid row stretch), not a fixed thumbnail. */
.person-row__photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 0;
  display: block;
}

/* Tablets get a narrower photo column (240px) so the bio column keeps
   a readable width; the full 360px photo returns on desktop. */
@media (min-width: 700px) {
  .person-row {
    grid-template-columns: 240px 1fr;
    gap: var(--space-4);
    align-items: stretch;
  }

  .person-row__photo {
    height: 100%;
    aspect-ratio: auto;
  }

  /* No top padding: the name starts level with the top of the photo. */
  .person-row__body {
    padding-bottom: var(--space-2);
  }
}

@media (min-width: 1024px) {
  .person-row {
    grid-template-columns: 360px 1fr;
    gap: var(--space-5);
  }
}

.person-row__name {
  font-size: var(--h3-size);
}

.person-row__title {
  color: var(--color-muted);
  margin-top: 0.2rem;
}

.person-row__bio {
  color: var(--color-text);
  margin-top: var(--space-2);
  max-width: 65ch;
}

.person-row__bio em {
  color: var(--color-muted);
}

.person-row__contact {
  margin-top: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.person-row__contact a {
  color: var(--color-accent);
  font-weight: 600;
}

.person-row__contact a:hover {
  text-decoration: underline;
}

/* Former members: same profile-row format, introduced by the 3px accent
   rule used for the research-question and publication-theme headings. */
.team-alumni {
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: 3px solid var(--color-accent);
}

.team-alumni__title {
  font-size: calc(var(--h3-size) * 1.25);
}

/* === Philosophy === */

/* Heading left, text right on wide screens, so the section fills the
   same frame width as Research and Publications while lines stay a
   readable length. Same 3px accent rule as the other subsections. */
.philosophy__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-4);
}

.philosophy__block {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 3px solid var(--color-accent);
}

@media (min-width: 900px) {
  .philosophy__block {
    grid-template-columns: 1fr 2fr;
    column-gap: var(--space-5);
    align-items: start;
  }
}

.philosophy__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.philosophy__body p {
  color: var(--color-text);
}

/* === Join === */

.join {
  text-align: center;
}

.join__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  max-width: 60ch;
  margin-inline: auto;
  margin-top: var(--space-4);
}

.join__body p {
  color: var(--color-muted);
}

.join__body a:not(.btn) {
  color: var(--color-accent);
  font-weight: 600;
}

.join__body a:not(.btn):hover {
  text-decoration: underline;
}

/* === Photos ===
   Uniform grid, no captions -- matches kosurilab.com/photos's plain
   gallery-grid treatment. Every tile is a fixed square via object-fit,
   so mixed portrait/landscape source photos still form a clean grid. */

.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* 2 columns on phones, 4 from tablets up: 16 photos fill every row
   exactly (a 3-column step left one photo alone on the last row). */
@media (min-width: 768px) {
  .photo-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.photo-grid__item {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.photo-grid__item:hover {
  transform: scale(1.03);
  box-shadow: var(--shadow-md);
}

/* === Donate === */

.donate__panel {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.donate__blurb {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.92);
}

.donate__progress {
  width: 100%;
  height: 14px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.25);
  overflow: hidden;
}

.donate__progress-bar {
  height: 100%;
  width: 62%; /* placeholder progress value; override inline with style="width: X%" */
  border-radius: 999px;
  background-color: #FFFFFF;
}

.donate .hero__actions,
.donate__panel .btn {
  align-self: center;
}

/* === Contact === */

/* Two columns on wide screens: email + profile links on the left, the
   message form as a white card on the right. Profile links are rows with
   a logo tile, name and handle, separated by hairlines (same rhythm as the
   publication list) rather than loose accent-coloured text links. */
.contact__grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

/* Columns stretch to the same height, so the form card's top and bottom
   line up with the intro text and the last profile row; the message box
   grows to take up the extra height. */
@media (min-width: 960px) {
  .contact__grid {
    grid-template-columns: 5fr 7fr;
    align-items: stretch;
  }

  .contact-form__field--message {
    flex: 1;
  }

  .contact-form__field--message textarea {
    flex: 1;
    min-height: 8rem;
  }
}

.contact__intro {
  max-width: 44ch;
}

.contact__email {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: var(--space-2);
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  font-variant-numeric: lining-nums;
  color: var(--color-navy);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.15s ease;
}

.contact__email:hover {
  text-decoration-color: var(--color-accent);
}

.contact__email-icon {
  flex: none;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact__label {
  margin-top: var(--space-5);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--color-muted);
}

.contact__links {
  margin-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.contact-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--color-border);
}

.contact-link::after {
  content: "\2197";
  content: "\2197" / "";
  margin-left: auto;
  padding-left: var(--space-1);
  color: var(--color-muted);
  transition: color 0.15s ease, transform 0.15s ease;
}

.contact-link:hover::after {
  color: var(--color-accent);
  transform: translate(2px, -2px);
}

.contact-link[href^="mailto:"]::after {
  content: none;
}

/* White tile behind each mark -- LinkedIn asks for its logo on white. */
.contact-link__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background-color: var(--color-surface);
  transition: border-color 0.15s ease;
}

.contact-link:hover .contact-link__icon {
  border-color: var(--color-accent);
}

/* 22px keeps the LinkedIn [in] above its 21px on-screen minimum. */
.contact-link__icon svg {
  width: 22px;
  height: 22px;
}

.contact-link__icon--linkedin svg {
  fill: #0A66C2;
}

.contact-link__icon--x svg {
  fill: #000000;
}

.contact-link__icon--orcid svg {
  fill: #A6CE39;
}

.contact-link__icon--outline svg {
  fill: none;
  stroke: var(--color-navy);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-link__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.contact-link__name {
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.35;
  text-underline-offset: 3px;
}

.contact-link:hover .contact-link__name {
  text-decoration: underline;
}

.contact-link__meta {
  font-size: 0.875rem;
  color: var(--color-muted);
  overflow-wrap: anywhere;
}

/* === Contact Form === */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-surface);
}

@media (min-width: 640px) {
  .contact-form {
    padding: var(--space-4);
  }
}

.contact-form h3 {
  font-size: var(--h3-size);
}

.contact-form__row {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .contact-form__row {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.contact-form__field label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-navy);
}

.contact-form__field input,
.contact-form__field textarea {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-text);
  /* Tinted fields read clearly against the white form card. */
  background-color: var(--color-bg);
  resize: vertical;
}

.contact-form__field input:focus-visible,
.contact-form__field textarea:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 1px;
}

/* Honeypot: invisible to real visitors, still present in the DOM for bots
   that don't execute CSS -- a standard spam-filter trick for static forms. */
.contact-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form__status {
  font-size: 0.9rem;
  font-weight: 600;
}

.contact-form__status[data-state="success"] {
  color: #1a7f4e;
}

.contact-form__status[data-state="error"] {
  color: var(--color-donate-dark);
}

/* Button and status message share one row, so the empty status line
   doesn't leave a gap at the bottom of the card. */
.contact-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}

/* === Detail Pages (research articles & team profiles) === */

.breadcrumb {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-muted);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: var(--space-2);
}

.breadcrumb:hover {
  color: var(--color-accent);
}

.article-hero {
  padding-block: var(--space-5) var(--space-2);
}

.article-hero__eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-top: var(--space-3);
}

.article-hero__image {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border-radius: var(--radius);
  margin-top: var(--space-4);
}

.article-body {
  max-width: 70ch;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.article-body p {
  color: var(--color-text);
}

.article-body ul,
.profile-body ul {
  list-style: disc;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.article-cta {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.profile-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  padding-block: var(--space-5) var(--space-4);
}

.profile-hero__photo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--color-surface);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-1);
}

.profile-hero__role {
  color: var(--color-muted);
  font-size: 1.05rem;
}

.profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-1);
}

.profile-meta__tag {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-navy);
}

.profile-body {
  max-width: 65ch;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: left;
}

/* === Footer === */

.site-footer {
  background-color: var(--color-navy);
  color: rgba(255, 255, 255, 0.8);
  padding-block: var(--space-4);
}

.site-footer p {
  color: inherit;
}

.site-footer .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}

/* Wraps on very narrow phones (320px) rather than overflowing. */
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-3);
}

.site-footer__links a {
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.15s ease;
}

.site-footer__links a:hover {
  color: #FFFFFF;
  text-decoration: underline;
}

@media (min-width: 768px) {
  .site-footer .container {
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: var(--space-2);
    justify-content: space-between;
    text-align: left;
  }
}

/* === Responsive / Media Queries === */
/* Cross-cutting adjustments that aren't owned by a single section block. */

@media (min-width: 768px) {
  .container {
    padding-inline: var(--space-4);
  }

  .section {
    padding-block: var(--space-6);
  }
}

@media (min-width: 1200px) {
  .container {
    padding-inline: var(--space-5);
  }
}

@media (max-width: 374px) {
  .container {
    padding-inline: var(--space-2);
  }

  .btn {
    padding: 0.7rem 1.2rem;
  }
}