/* ============================================================
   phakir.re-mic.de  —  Static archive styles (Desktop primary)
   Original brand: medical-academic mid-blue + dark navy.
   ============================================================ */

:root {
  /* Palette extracted from the original Neve customizer settings */
  --c-brand: #005a87;       /* primary brand blue */
  --c-brand-hover: #00496e;
  --c-accent: #007cba;
  --c-dark: #1B2C3E;        /* dark navy used in hero panels & footer */
  --c-dark-2: #0f1d2c;
  --c-text: #2c2c2c;
  --c-text-light: #555;
  --c-muted: #777;
  --c-border: #dcdfe3;
  --c-bg: #ffffff;
  --c-bg-alt: #f5f7fa;
  --c-bg-tint: #e9eff5;
  --c-warn-bg: #fff7d6;
  --c-warn-border: #d7b400;
  --c-warn-text: #5a4900;

  --font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Helvetica Neue", Arial, sans-serif;
  --font-head: "Montserrat", "Open Sans", "Segoe UI", system-ui, sans-serif;

  --max-w: 1140px;

  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 20px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.08);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
}

/* Reset */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-size: 16px; }
body {
  margin: 0;
  font-family: var(--font-body);
  /* Live-original phakir.re-mic.de uses 16px body, line-height 1.7 */
  font-size: 16px;
  line-height: 1.7;
  color: var(--c-text);
  background: var(--c-bg);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-accent); text-decoration: none; }
a:hover { color: var(--c-brand-hover); text-decoration: underline; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--c-dark);
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 var(--space-4);
}
/* Headings sized to match live original (h3 28px/600, h4 24px/600) */
h1 { font-size: 35px; font-weight: 700; line-height: 1.25; }
h2 { font-size: 30px; font-weight: 700; line-height: 1.25; }
h3 { font-size: 28px; font-weight: 600; line-height: 1.4; }
h4 { font-size: 24px; font-weight: 600; line-height: 1.5; }
h5 { font-size: 20px; font-weight: 600; }
h6 { font-size: 16px; font-weight: 600; }
p { margin: 0 0 var(--space-4); }

.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  /* Phase 4.9: horizontales Padding halbiert (24px -> 12px) — spart
     besonders auf Mobile sichtbar Platz. Max-Width bleibt unverändert. */
  padding: 0 var(--space-3);
}

/* Archive banner (top of page) */
.archive-banner {
  background: var(--c-warn-bg);
  border-top: 2px solid var(--c-dark);
  border-bottom: 2px solid var(--c-dark);
  color: var(--c-warn-text);
  font-size: 0.85rem;
  padding: var(--space-2) 0;
  text-align: center;
}
.archive-banner a {
  color: var(--c-brand);
  text-decoration: underline;
}
.archive-banner a:hover {
  color: var(--c-brand-hover);
}

/* Header (brand row) */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--c-border);
  padding: var(--space-4) 0;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.site-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--c-dark);
  font-family: var(--font-head);
}
.site-brand:hover { text-decoration: none; }
.site-brand__logo {
  width: 90px;
  height: auto;
}
.site-brand__title {
  font-size: 1.3rem;
  font-weight: 600;
}
.site-header__miccai {
  height: 90px;
  width: auto;
}
.site-header__miccai-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: opacity 0.15s ease, filter 0.15s ease;
}
.site-header__miccai-link:hover,
.site-header__miccai-link:focus-visible {
  opacity: 0.85;
  filter: brightness(1.08);
}

/* Primary nav — sticks to the top of the viewport once scrolled past the
   site header. Opaque background so the page header doesn't bleed through,
   gentle drop shadow so it visually separates from the content below. */
.site-nav {
  background: var(--c-dark);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  /* Phase 6.4: kill subpixel-rounding gap between the sticky nav and the
     following .page-header during scroll. The nav's effective bottom edge
     can land on a non-integer y (e.g. 56.484375 px) while the following
     block is rendered at an integer row, leaving a 1 px white seam.
     margin-bottom: -1px overlaps the nav by 1 px with the next block;
     will-change: transform promotes the nav to its own compositor layer
     so the browser stops re-rounding it against the scrolling content
     each frame. The box-shadow stays intact (it draws outside the box,
     beyond the negative margin). */
  margin-bottom: -1px;
  will-change: transform;
}
.site-nav .container {
  /* Phase 4.6: center on desktop/tablet so the menu list sits horizontally
     in the middle of the nav bar. The mobile @media block below resets
     this to space-between so the brand-title sits left and the burger sits
     right. */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}
.site-nav__brand {
  /* Phase 4.5: the brand cell carries the dynamic page title
     ("Team", "Tasks", "Privacy Policy", ...) on sub-pages and "PhaKIR"
     on the home page. Hidden by default on desktop/tablet (>=769px) —
     the active menu item on the right already highlights the current
     page, so a second title-slot on the left is redundant. Re-enabled
     in the mobile breakpoint below (<=768px), where the inline menu
     collapses into the burger and the title is the only wayfinder. */
  display: none;
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: clamp(0.95rem, 2.2vw, 1.15rem);
  padding: var(--space-3) 0;
  margin-right: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 0 1 auto;
}
.site-nav__brand:hover { text-decoration: none; color: #fff; }
.site-nav__list {
  /* Phase 4.6: nav items horizontally centered in the bar on desktop/tablet
     (>=769px). The mobile drop-down panel resets this in the @media
     (max-width: 768px) block below (column layout, justify-content reset
     to flex-start so items start at the top of the panel). */
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}
.site-nav__list a {
  display: block;
  padding: var(--space-4) var(--space-5);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border-right: 1px solid rgba(255,255,255,0.08);
  transition: background 0.15s ease;
}
.site-nav__list li:last-child a { border-right: 0; }
.site-nav__list a:hover,
.site-nav__list a.active {
  background: var(--c-brand);
  text-decoration: none;
}

/* Mobile burger — hidden on desktop, replaces the inline menu below 769px. */
.site-nav__toggle {
  display: none;
  background: none;
  border: 0;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  margin-left: auto;
  width: 44px;
  height: 44px;
  position: relative;
}
.site-nav__bar {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  margin: 5px auto;
  transition: transform 0.25s ease, opacity 0.2s ease;
  transform-origin: center;
}
/* Burger -> X animation when the menu is open. */
.site-nav__toggle.is-active .site-nav__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-nav__toggle.is-active .site-nav__bar:nth-child(2) {
  opacity: 0;
}
.site-nav__toggle.is-active .site-nav__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
.site-nav__toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Page header (hero strip on sub-pages).
   Phase 3.2: rendered on desktop, hidden on mobile via @media below.
   particles-init.js targets .page-header and short-circuits on mobile via
   matchMedia, so no canvas is created when the band is hidden. The sticky
   nav still carries the dynamic page title on every breakpoint as a
   wayfinder while scrolling. */
.page-header {
  background: var(--c-dark);
  color: #fff;
  padding: var(--space-7) 0 var(--space-6);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-header > .container {
  position: relative;
  z-index: 2;
}
/* Canvas layer for the tsparticles animation (mirrors the original
   Smart Slider 3 particle effect: dots with linked lines). Purely
   decorative; the header stays a readable dark band without JS. */
.page-header__particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: auto;
}
.page-header__particles canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
@media (prefers-reduced-motion: reduce) {
  .page-header__particles { opacity: 0.5; }
}
.page-header h1 {
  color: #fff;
  font-size: 2.4rem;
  margin: 0;
  letter-spacing: 0.03em;
}
.page-header__sub {
  color: rgba(255,255,255,0.85);
  margin-top: var(--space-3);
  font-size: 1.1rem;
}

/* Main */
.site-main {
  padding: var(--space-7) 0;
}

/* ---------- Home page ---------- */
.page-home .site-main { padding-top: var(--space-6); }

/* Hero layout. Left = PhaKIR logo, right = headline + MICCAI badge.
   Phase 3.1: both sides MUST stay side-by-side at every viewport width —
   even 320px. flex-wrap: nowrap; flex-shrink: 1; on both columns, and
   clamp() min values are tuned so the smaller end still fits a 320px
   viewport without overflow. */
.home-hero {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(0.4rem, 2vw, var(--space-6));
  padding: var(--space-5) 0 var(--space-6);
}
.home-hero__media {
  flex: 0 1 auto;
  flex-shrink: 1;
  width: clamp(70px, 26vw, 320px);
  min-width: 0;
}
.home-hero__media img {
  display: block;
  width: 100%;
  height: auto;
}
.home-hero__copy {
  flex: 1 1 0;
  min-width: 0;
}
.home-hero__copy h1 {
  font-size: clamp(0.95rem, 3.4vw, 2.4rem);
  line-height: 1.15;
  margin: var(--space-2) 0 var(--space-4);
  word-break: normal;
  overflow-wrap: break-word;
}
.home-hero__copy h1 .hl {
  color: var(--c-accent);
  font-weight: 700;
}
.home-hero__eyebrow {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--c-text-light);
  font-size: clamp(0.7rem, 1.6vw, 1rem);
  margin: 0;
}
.home-hero__sub {
  color: var(--c-text-light);
  font-size: clamp(0.75rem, 1.8vw, 1.05rem);
}
.home-hero__miccai {
  margin-top: var(--space-5);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  color: var(--c-text-light);
  font-size: clamp(0.75rem, 1.6vw, 1rem);
}
.home-hero__miccai img {
  display: inline-block;
  vertical-align: middle;
  width: clamp(80px, 18vw, 220px);
  height: auto;
}
.home-hero__miccai-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: opacity 0.15s ease, filter 0.15s ease;
}
.home-hero__miccai-link:hover,
.home-hero__miccai-link:focus-visible {
  opacity: 0.85;
  filter: brightness(1.08);
}

.callout {
  background: var(--c-dark);
  color: #fff;
  border-radius: var(--radius-lg);
  /* Phase 4.10: horizontales Padding halbiert (48px -> 24px), analog zu
     .page-section in Phase 4.9. Vertikal unverändert. */
  padding: var(--space-6) var(--space-5);
  margin: var(--space-6) 0;
}
.callout h2 { color: #fff; }
.callout a { color: #93cdee; }
.callout a:hover { color: #fff; }
.callout strong { color: #fff; }
.callout__links {
  list-style: disc;
  padding-left: var(--space-5);
  margin: var(--space-4) 0 0;
}
.callout__links li { margin-bottom: var(--space-2); }

.home-section {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  /* Phase 4.10: horizontales Padding halbiert (48px -> 24px), analog zu
     .page-section in Phase 4.9. Vertikal unverändert. */
  padding: var(--space-6) var(--space-5);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.home-section h3,
.home-section h2 {
  color: var(--c-dark);
  margin-top: 0;
}
.home-section :first-child { margin-top: 0; }
.home-section ul, .home-section ol { padding-left: var(--space-5); }
.home-section li { margin-bottom: var(--space-2); }

/* Sub-pages (data, tasks, etc.) */
.page-section {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  /* Phase 4.9: horizontales Padding halbiert (48px -> 24px), vertikales
     Padding unverändert. Container-Padding wurde zusätzlich halbiert. */
  padding: var(--space-6) var(--space-5);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.page-section + .page-section { margin-top: 0; }
.page-section h2:first-child,
.page-section h3:first-child,
.page-section :first-child { margin-top: 0; }
.page-section img {
  border-radius: var(--radius-sm);
  margin: var(--space-4) 0;
}
.page-section ul, .page-section ol {
  padding-left: var(--space-5);
}
.page-section li { margin-bottom: var(--space-2); }

/* Phase 4.10: Long-URL-Overflow auf /, /data/, /tasks/ etc. — sehr lange
   arxiv-URLs, PDF-Dateinamen und ähnliche unbreakable strings ragten bei
   schmalen Viewports horizontal aus dem Container. `overflow-wrap: anywhere`
   erlaubt Umbruch innerhalb solcher Wörter — gezielt auf Anchor-Tags und
   List-Items in den Content-Sektionen, damit normale Texte nicht betroffen
   sind. */
.home-section a,
.page-section a,
.callout a,
.callout li,
.home-section li,
.page-section li {
  overflow-wrap: anywhere;
}

/* Bibliography references on /tasks/ (each [N] entry on its own line) */
.page-section .ref-item {
  margin: 0 0 var(--space-3);
  padding-left: 2.2em;
  text-indent: -2.2em;
  /* Phase 4.8: long author lists / DOIs would otherwise push the line
     past the viewport on narrow phones. Allow breaking inside long
     unbreakable runs so refs stay inside the section box. */
  overflow-wrap: anywhere;
}
.page-section .ref-item:last-child { margin-bottom: 0; }

/* ---------- Team page (rebuilt to match original layout) ----------
   Original uses the "Team Members Plugin" (tmm) with these visual props:
     - card: white, ~230px wide, 5px solid #b52424 (red) top border
     - photo: circular avatar (~137px) overlapping the top of the card,
              with its own 6px red border
     - name: 17.6px, dark grey (#222), centered
     - role: 16px, muted grey (#888), centered
     - affil: small italic links list under role
     - layout: 3 columns desktop, centered
   ------------------------------------------------------------- */
.team-section {
  margin: var(--space-7) 0 var(--space-6);
}
.team-section__title {
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  color: var(--c-dark);
  margin: 0 0 var(--space-7);
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Generous top gap so the overlapping avatar (-70px) doesn't clip the
     previous row */
  gap: 90px var(--space-6);
  margin: 0 auto;
  max-width: 900px;
  padding: 70px 0 var(--space-6);
  /* Phase 6.3: explizit — Cards in derselben Zeile sind gleich hoch (Default
     ist stretch, hier sichtbar gemacht). */
  align-items: stretch;
}
.team-card {
  background: #fff;
  border-top: 5px solid #b52424;
  /* Mild surrounding shadow rather than a hard border (closer to original) */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  padding: 80px var(--space-4) var(--space-4);
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Phase 6.3: min-height entfernt — Cards sollen ihre natürliche Höhe haben.
     Gleichhohe Karten pro Zeile entstehen durch align-items: stretch im Grid;
     Icons werden via margin-top: auto auf .team-card__socials nach unten
     gepinnt — kein künstliches Aufblasen. */
}
.team-card__photo {
  position: absolute;
  top: -70px;
  left: 50%;
  transform: translateX(-50%);
  width: 137px;
  height: 137px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: var(--c-bg-alt);
  /* Flat, evenly distributed red ring around the avatar — no 3D,
     no shadow depth, no gradient, no perspective. */
  border: 4px solid #b52424;
  box-shadow: none;
}
.team-card__name {
  font-family: var(--font-body);
  font-size: 17.6px;
  font-weight: 600;
  color: #222;
  line-height: 1.4;
  margin: 0 0 var(--space-2);
}
.team-card__role {
  color: #888;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 var(--space-3);
}
.team-card__affil {
  font-size: 14px;
  color: var(--c-text-light);
  text-align: center;
  line-height: 1.5;
}
.team-card__affil p { margin: 0 0 var(--space-2); }
.team-card__affil p:last-child { margin-bottom: 0; }
.team-card__affil a { color: var(--c-accent); }
.team-card__socials {
  /* Phase 6.3: margin-top: auto pinnt Icons ans untere Card-Ende. Damit landen
     in jeder Zeile (durch Grid align-items: stretch sind alle Cards gleich hoch)
     die Icons auf exakt derselben Y-Position. In kurzen Cards wandert der
     Whitespace zwischen Affiliation und Icons (oben), nicht zwischen Subtitle
     und Affiliation. Ersetzt Phase 6.2 (flex-grow auf .team-card__affil weg) —
     gleiche Wirkung gegen Rückert-Whitespace, plus Icons-Gleichausrichtung. */
  margin-top: auto;
  /* Mindestabstand zwischen Affiliation-Text und Icons (für lange Cards,
     bei denen margin-top: auto auf 0 kollabiert). */
  padding-top: var(--space-2);
  display: flex;
  gap: var(--space-3);
  justify-content: center;
}
.team-card__social {
  display: inline-flex;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-bg-alt);
  color: var(--c-brand);
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.team-card__social:hover {
  background: var(--c-brand);
  color: #fff;
  text-decoration: none;
}

/* Legal pages */
.page-legal .page-section {
  padding: var(--space-6) var(--space-7);
}
.page-legal h2 {
  color: var(--c-brand);
  margin-top: var(--space-5);
}

/* ---------- Forum ---------- */
.page-forum .site-main { padding: var(--space-6) 0; }

.forum-title {
  font-size: 2rem;
  text-align: center;
  margin-bottom: var(--space-3);
}
.forum-archive-note {
  background: var(--c-bg-tint);
  border-left: 4px solid var(--c-accent);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  color: var(--c-text-light);
  margin: var(--space-4) 0 var(--space-6);
  font-size: 0.95rem;
}

.forum-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-4);
}
.forum-list__link {
  display: block;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-dark);
  border-radius: var(--radius);
  padding: var(--space-5);
  color: var(--c-text);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.forum-list__link:hover {
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  border-left-color: var(--c-brand);
}
.forum-list__link h3 {
  margin: 0 0 var(--space-2);
  color: var(--c-dark);
}
.forum-list__count {
  margin: var(--space-3) 0 0;
  font-size: 0.85rem;
  color: var(--c-muted);
  display: inline-block;
}
.forum-list__count--empty {
  font-style: italic;
  opacity: 0.7;
}

.forum-crumbs {
  font-size: 0.85rem;
  color: var(--c-muted);
  margin-bottom: var(--space-4);
}
.forum-crumbs a { color: var(--c-accent); }

.forum-thread-list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0;
  border-top: 1px solid var(--c-border);
}
.forum-thread-list li {
  border-bottom: 1px solid var(--c-border);
}
.forum-thread-list a {
  display: block;
  padding: var(--space-4) var(--space-3);
  color: var(--c-text);
  font-weight: 500;
}
.forum-thread-list a:hover {
  background: var(--c-bg-alt);
  color: var(--c-brand);
  text-decoration: none;
}
.forum-thread-list li.empty {
  padding: var(--space-4);
  color: var(--c-muted);
  font-style: italic;
}

.forum-thread__title {
  font-size: 1.6rem;
  margin: var(--space-4) 0 var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--c-brand);
}

.forum-thread { margin-bottom: var(--space-5); }
.forum-post {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.forum-post__head {
  background: var(--c-bg-alt);
  border-bottom: 1px solid var(--c-border);
  padding: var(--space-3) var(--space-5);
  font-size: 0.85rem;
  color: var(--c-text-light);
}
.forum-post__author {
  font-weight: 600;
  color: var(--c-dark);
}
.forum-post__date::before { content: " "; }
.forum-post__body {
  padding: var(--space-5);
}
.forum-post__body p:last-child { margin-bottom: 0; }
.forum-post__body pre,
.forum-post__body code {
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  font-size: 0.9em;
  font-family: "SF Mono", Menlo, Consolas, monospace;
}
.forum-post__body pre {
  padding: var(--space-4);
  overflow-x: auto;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--c-dark);
  color: #d8dde3;
  margin-top: var(--space-8);
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-7);
  padding: var(--space-7) 0;
}
.site-footer h3 {
  color: #fff;
  font-size: 1rem;
  margin-bottom: var(--space-3);
  border-bottom: 2px solid var(--c-accent);
  display: inline-block;
  padding-bottom: var(--space-1);
}
.site-footer a { color: #93cdee; }
.site-footer a:hover { color: #fff; }
.site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer__links li { margin-bottom: var(--space-2); }
.site-footer__sponsor {
  max-width: 200px;
  background: #fff;
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}
.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: var(--space-4) 0;
  font-size: 0.85rem;
  text-align: center;
  color: rgba(255,255,255,0.6);
}
.site-footer__bottom p { margin: 0; }

/* ---------- Tables in content ---------- */
.page-section table,
.home-section table {
  border-collapse: collapse;
  width: 100%;
  margin: var(--space-4) 0;
}
.page-section td,
.page-section th,
.home-section td,
.home-section th {
  border: 1px solid var(--c-border);
  padding: var(--space-3) var(--space-4);
  vertical-align: top;
}
.page-section th,
.home-section th {
  background: var(--c-bg-alt);
  font-weight: 600;
  text-align: left;
}

/* Phase 4.9: Kleinere Tabellen-Schrift NUR auf /tasks/.
   Alle Tabellen auf der Tasks-Seite (Result-Tabellen + Award-Tabellen) bekommen
   verkleinerten Body-Text — Header bleibt minimal größer als die Body-Zellen.
   Scoping über body.page-tasks, damit /data/, /timeline/, /team/ unberührt
   bleiben. Cell-Padding leicht verkleinert für proportionale Dichte. */
body.page-tasks .page-section td {
  font-size: 0.85em;       /* ~13.6px bei 16px Body */
  padding: var(--space-2) var(--space-3);
}
body.page-tasks .page-section th {
  font-size: 0.9em;        /* ~14.4px — minimal größer als td */
  padding: var(--space-2) var(--space-3);
}

/* Phase 4.8: Horizontally scrollable table wrapper — used on /tasks/
   around the three "results"-tables only (build.py:_wrap_tasks_results_tables
   only wraps tables preceded by a "The results are as follows:" paragraph;
   award-money tables are left untouched). The wrapper establishes the
   scroll container; the table inside it is allowed to exceed the wrapper
   width on narrow viewports. */
.table-wrap {
  overflow-x: auto;
  /* New stacking context for the sticky-cell shadow */
  position: relative;
}
.table-wrap > .results-table {
  /* Force a sensible minimum width so the table actually overflows on
     phones (otherwise the inline `width:100%` would just squash it).
     640px is wide enough to keep the multi-column result tables readable
     while still allowing the wrapper to scroll horizontally. */
  min-width: 640px;
}

/* Misc inline image alignment fallbacks (replacing wp align* classes) */
img[align="center"],
img.aligncenter {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---------- Responsive (Phase 3) ---------- */
/* Tablet / small-laptop: collapse the side-by-side footer + slim team grid. */
@media (max-width: 900px) {
  .site-footer__inner { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; }
}

/* Mobile breakpoint: switch nav to burger + drop-down. */
@media (max-width: 768px) {
  .site-nav .container {
    justify-content: space-between;
  }
  /* Phase 4.5: re-enable the nav-brand title on mobile only. On desktop
     the inline menu's active highlight (e.g. "DATA" in brand colour on
     /data/) already names the page; on mobile that menu is collapsed
     into the burger, so the title is the only wayfinder. */
  .site-nav__brand { display: inline-block; }
  .site-nav__toggle { display: block; }
  .site-nav__list {
    /* Drop-down panel below the nav bar — hidden by default, revealed via JS.
       Phase 4.6: reset desktop centering (justify-content/margin) — on
       mobile this is a column-stacked panel where items must start at the
       top and span the full panel width. */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    justify-content: flex-start;
    margin: 0;
    background: var(--c-dark);
    box-shadow: 0 8px 16px rgba(0,0,0,0.18);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  .site-nav__list.is-open {
    max-height: 70vh;
  }
  .site-nav__list a {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    text-align: left;
  }
  .site-nav__list li:last-child a { border-bottom: 0; }

  /* Phase 3.2: hide the animated page-header band entirely on mobile.
     Saves vertical real estate; the sticky-nav brand still shows the
     current page title as a wayfinder. tsparticles also short-circuits
     in particles-init.js so no canvas work happens here. */
  .page-header { display: none; }
  .page-header h1 { font-size: clamp(1.4rem, 5vw, 1.9rem); }

  /* Compact site header on mobile — keep brand + miccai logo IN ROW
     (Phase 3.2 fix: previously flex-direction: column made MICCAI drop
     beneath PhaKIR-Challenge, which Alex flagged as "Hero wrap"). They
     stay side-by-side and shrink via the rules below. */
  .site-header { padding: var(--space-3) 0; }
  .site-header__inner {
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: nowrap;
  }
  .site-brand { flex: 1 1 auto; min-width: 0; }
  .site-brand__logo { width: clamp(40px, 12vw, 70px); }
  .site-brand__title { font-size: clamp(0.85rem, 3.2vw, 1.15rem); }
  .site-header__miccai {
    flex: 0 1 auto;
    min-width: 0;
    height: auto;
    width: clamp(70px, 22vw, 140px);
    max-width: 40%;
  }

  /* Phase 4.6: /data/ page — the three example-image table cells (the row
     directly under "...resulting methods and outcomes.") stack vertically
     on mobile. DOM order is preserved (original-left → top, mask-middle →
     middle, keypoints-right → bottom), no `order:` overrides. Scoped to
     body.page-data so other content tables (tasks/timeline result tables)
     keep their tabular layout. */
  .page-data .page-section table,
  .page-data .page-section tbody,
  .page-data .page-section tr {
    display: block;
    width: 100% !important;
    height: auto !important;
  }
  .page-data .page-section td {
    display: block;
    width: 100% !important;
    height: auto !important;
    border: 0;
    padding: var(--space-2) 0;
  }
  .page-data .page-section td img {
    width: 100%;
    height: auto;
    max-width: 100%;
    margin: 0 auto;
  }

  /* Phase 4.8: /tasks/ — sticky first column ("Team") on the result tables.
     The wrapper scrolls horizontally; the leftmost cell of each row stays
     pinned to the left edge so users always know which team a metric
     belongs to. Scoped to body.page-tasks .results-table so the timeline
     and other content tables (and the award tables that don't have the
     .results-table class) are unaffected. */
  body.page-tasks .results-table th:first-child,
  body.page-tasks .results-table td:first-child {
    position: sticky;
    left: 0;
    /* Deckende Hintergrundfarbe ist Pflicht, sonst scheint die
       horizontal scrollende Tabelle durch die sticky-Zelle. */
    background: var(--c-bg);
    z-index: 2;
    /* Subtiler Schatten als visueller Anker (zeigt, dass rechts mehr
       Inhalt folgt). */
    box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.15);
  }
  /* Header-Zeile bleibt auch beim Sticky-Verhalten der ersten Spalte
     visuell als Header erkennbar (gleicher Hintergrund wie andere th). */
  body.page-tasks .results-table tr:first-child td:first-child,
  body.page-tasks .results-table tr:first-child th:first-child {
    background: var(--c-bg-alt);
  }
}

/* Phase 3.1: the home hero NEVER wraps any more — items stay side-by-side
   even at 320px, only shrinking via clamp(). The previous <500px wrap
   rule has been removed. Below 500px we still single-column the team
   grid and reduce some padding for mobile readability. */
@media (max-width: 499px) {
  .team-grid { grid-template-columns: 1fr; }
  .home-hero {
    /* Tighter padding/gap on tiny phones so both items fit comfortably. */
    gap: 0.5rem;
    padding: var(--space-4) 0 var(--space-5);
  }
  .home-hero__miccai {
    margin-top: var(--space-3);
    gap: var(--space-2);
  }
}

/* prefers-reduced-motion: kill nav transitions too. */
@media (prefers-reduced-motion: reduce) {
  .site-nav__bar,
  .site-nav__list { transition: none; }
}