/* =========================================================
   Professional, minimal, image-first design  — CLEANED
   ======================================================= */

/* ---------------- Core tokens ---------------- */
* { box-sizing: border-box }
:root{
  --hero-height: 102vh;
  --gap: clamp(16px, 4vw, 28px);
  --radius: 22px;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-head: "Space Grotesk", var(--font-sans);
  --font: 17px/1.65 var(--font-sans);

  /* Palette */
  --bg: #F4EFE7;
  --text: #223127;
  --muted: #5D6B62;
  --accent: #2F4A3A;
  --accent-2: #E5D4C4;
  --border: #E6E2DA;

  /* Overlay/surface */
  --card: #FFFFFF;
  --scrim: rgba(0,0,0,.36);
  --hero-raise: -18vh;

  /* JS-enhanced reveal origin */
  --reveal-x: 50vw;
  --reveal-y: 50vh;

  /* Optional banner zoom for AI hero image (0.8–1.0 pleasant range) */
  --ai-zoom: 1;
}

/* Mobile URL bar safe units */
@supports (height: 1dvh) {
  :root { --hero-height: 102dvh; }
}

/* Lock page scroll when any overlay is open */
body:has(.overlay:target){ overflow: hidden; }

/* ---------------- Base ---------------- */
html, body { height: 100% }
body{
  margin: 0;
  color: var(--text);
  font: var(--font);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img{ max-width: 100%; display: block }

/* Screen-reader only helper */
.sr-only{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------------- HERO (landing) ---------------- */
.hero{
  position: relative;
  min-height: var(--hero-height);
  display: grid;
  place-items: center;
  isolation: isolate;
  padding: clamp(16px, 4vw, 28px);
}
.hero-bg{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 99% 75%;
  filter: saturate(105%);
  z-index: -2;
}
.hero::after{
  content:"";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.0), rgba(0,0,0,.10) 60%, rgba(0,0,0,.18));
  z-index: -1;
}

/* Tagline pill */
.tagline {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: center;
  justify-items: center;
  gap: 0;
  background: color-mix(in oklab, var(--accent-2), white 50%);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .5rem .8rem;
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
  max-width: 720px;
  margin-inline: auto;
}
.tagline .sep { display: none; }
.tagline a {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  padding: .25rem .4rem;
}
.tagline a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
@media (max-width: 480px){
  .tagline {
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
    row-gap: .35rem;
  }
}

/* HERO text (smaller, balanced, responsive) */
.hero .hero-name{
  margin: 0 0 .8rem;
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.05;
  text-wrap: balance;        /* nicer line breaks on 2-line titles */
  color: var(--accent-2);
  text-shadow:
    0 8px 28px rgba(0,0,0,.35),
    0 2px 6px rgba(0,0,0,.25);

  /* ~35–53px across common viewports */
  font-size: clamp(2.2rem, 1.2rem + 4.5vw, 3.3rem);
}

/* Optional: cap it a hair on very large desktops */
@media (min-width: 1280px){
  .hero .hero-name{ font-size: 3.1rem; }
}

.hero-content{ position: relative; transform: translateY(var(--hero-raise)); text-align: center; }

/* Only true hero images should cover */
.sheet > img,
.sub-hero img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); }

/* In content areas, never force images to full height */
.sheet-header img,
.sheet-body img { width: 100%; height: auto; object-fit: contain; transform: none; }

/* ---------------- OVERLAYS (full-screen panels) ---------------- */
.overlay{
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  pointer-events: none; opacity: 0;
  clip-path: circle(0 at var(--reveal-x) var(--reveal-y));
  transition: clip-path .8s cubic-bezier(.22,1,.36,1), opacity .45s ease;
  background: var(--scrim);
  padding: 0;
}
.overlay__backdrop{ position:absolute; inset:0; z-index:0; }
.overlay:target{
  pointer-events: auto; opacity: 1;
  clip-path: circle(150% at var(--reveal-x) var(--reveal-y));
}

/* Panel frame */
.sheet{
  position: relative;
  width: 100vw; height: 100vh;
  background: var(--card);
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 20px 80px rgba(0,0,0,.20);
  display: flex; flex-direction: column;
  z-index: 1;
}
@supports (height: 1dvh){ .sheet{ height: 100dvh; } }

/* Sticky close */
.overlay .close{ display: none; }
.overlay:target .close{ display: grid; }
.close{
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(0,0,0,.45);
  color: #fff; text-decoration: none; font-size: 28px; line-height: 1;
  backdrop-filter: blur(4px);
  z-index: 100;
}

/* Overlay layout/scroll fix: keep sheet as the scroller container */
.overlay { place-items: stretch !important; }
.overlay > .sheet{
  width: 100vw !important; height: 100vh !important;
  min-width: 0 !important; min-height: 0 !important;
  display: flex !important; flex-direction: column !important;
  overflow: hidden !important;        /* scrolling happens in .sheet-body */
}
@supports (height: 1dvh){
  .overlay > .sheet{ height: 100dvh !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .overlay{ transition: opacity .2s ease !important; clip-path: none !important; }
  .overlay:target{ opacity: 1; }
}

/* ---------------- Footer ---------------- */
.site-footer{
  display: flex; gap: .8rem; justify-content: center; align-items: center;
  padding: 28px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg), white 8%);
}
.site-footer .social{ color: var(--accent); text-decoration: none; font-weight: 600; }
.site-footer .social:hover{ text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }

/* ---------------- Generic sheet sections ---------------- */
.sheet-header{ position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.sheet-header img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.sheet-title{
  position: absolute; left: 14px; bottom: 12px;
  padding: .6rem .8rem; border-radius: 12px;
  color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.35));
  text-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.sheet-title h2{
  margin: 0; font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.25rem, .9rem + 1.4vw, 1.6rem);
}
.sheet-title .kicker{ margin:.15rem 0 0; color: color-mix(in oklab, white, black 15%); font-size:.95rem; }

.sheet-body{
  min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch;
  padding: 16px 20px 22px; color: var(--text); background: var(--card);
}
.sheet-body p{ margin: 0 0 1rem; }

/* Unified overlay titles — big & consistent */
#uzh .split-uzh__title h2,
#neutrinos .split-nu__title h2,
#dark-matter .sheet-title h2,
#ai-methods .sub-hero__title h2{
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.1;
  font-size: clamp(1.8rem, 1.1rem + 2.4vw, 2.6rem);
}
#uzh .split-uzh__title .kicker,
#neutrinos .split-nu__title .kicker,
#dark-matter .sheet-title .kicker,
#ai-methods .sub-hero__title .kicker{
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.15rem);
}

/* Lists, galleries, link styles */
.bullets{ margin: 0 0 1rem 1rem; color: var(--muted); }
.bullets li{ margin: .25rem 0; }
.more{ margin-top: .5rem; }
.more a{ color: var(--accent); font-weight: 600; text-decoration: none; }
.more a:hover{ text-decoration: underline; text-underline-offset: 3px; }
.gallery{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px; margin: .5rem 0 1rem;
}
.gallery img{ width: 100%; display: block; border-radius: 12px; object-fit: cover; }
.gallery figcaption{ margin-top: .35rem; font-size: .85rem; color: var(--muted); }

/* Consistent 16:9 thumbnails for the Neutrino experiments grid */
#neutrinos .nu-chunk .gallery img{
  width: 100%; aspect-ratio: 16 / 9; height: auto;
  object-fit: cover; display: block; border-radius: 12px;
}

/* =========================================================
   SECTION: Particle Physicist (#uzh) — Split layout
   ======================================================= */
#uzh .sheet.sheet--split-uzh{
  display: grid !important;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  grid-template-rows: 1fr;
  gap: clamp(16px, 3vw, 28px);
  width: 100vw; height: 100vh;
  padding: clamp(16px, 3vw, 28px);
  border-radius: 0; box-shadow: none; background: var(--card);
}
@supports (height: 1dvh){ #uzh .sheet.sheet--split-uzh{ height: 100dvh; } }
#uzh .split-uzh__left, #uzh .split-uzh__right{ min-height: 0; align-self: stretch; }
#uzh .split-uzh__left{ display:flex; flex-direction:column; }
#uzh .split-uzh__left .sheet-body{ flex:1 1 auto; overflow:auto; -webkit-overflow-scrolling:touch; padding:.5rem 0 0; }
#uzh .split-uzh__title{ margin: 0 0 .6rem; }
#uzh .split-uzh__title h2{
  margin: 0; font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem);
}
#uzh .split-uzh__title .kicker{ margin:.2rem 0 0; color:var(--muted); font-size:.95rem; }
#uzh .split-uzh__right{
  margin: 0; border-radius: clamp(12px, 1.2vw, 16px); overflow: hidden; display: grid; place-items: center;
}
#uzh .split-uzh__right img{ width: 100%; height: 100%; object-fit: cover; object-position: 100% 100%; transform: none; }

/* Cream theme to match the pill */
#uzh .sheet.sheet--split-uzh{
  background: color-mix(in oklab, var(--accent-2), white 50%); color: var(--accent);
}
#uzh .split-uzh__left .sheet-body{ background: transparent; color: inherit; }
#uzh .sheet-title{ left: clamp(10px, 2vw, 18px); bottom: clamp(10px, 2vw, 18px); padding: .55rem .75rem; }

/* =========================================================
   SECTION: Neutrinos (#neutrinos) — Split + Figure stack
   ======================================================= */
#neutrinos .sheet.sheet--split-nu{
  display: grid !important;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  grid-template-rows: 1fr;
  gap: clamp(16px, 3vw, 28px);
  width: 100vw; height: 100vh;
  padding: clamp(16px, 3vw, 28px);
  border-radius: 0; box-shadow: none;
  background: color-mix(in oklab, var(--accent-2), white 50%); color: var(--accent);
}
@supports (height: 1dvh){ #neutrinos .sheet.sheet--split-nu{ height: 100dvh; } }

/* Left column */
#neutrinos .split-nu__left, #neutrinos .split-nu__right{ min-height: 0; align-self: stretch; }
#neutrinos .split-nu__left{ display:flex; flex-direction:column; }
#neutrinos .split-nu__left .sheet-body{
  flex:1 1 auto; overflow:auto; -webkit-overflow-scrolling:touch; padding:.5rem 0 0;
  background: transparent; color: inherit;
}
#neutrinos .split-nu__title{ margin: 0 0 .6rem; }
#neutrinos .split-nu__title .kicker{ color: color-mix(in oklab, var(--accent), black 25%); }

/* Right column (figure stack container) */
#neutrinos .split-nu__right{
  margin: 0; border-radius: clamp(12px, 1.2vw, 16px);
  overflow: hidden; background: color-mix(in oklab, var(--accent-2), white 50%);
  position: relative;
}
#neutrinos .nu-fig-stack{ position:absolute; inset:0; }

/* Figures (stacked, fade in/out) */
#neutrinos .nu-fig{
  position:absolute; inset:0;
  display:grid; grid-template-rows: 1fr auto; place-items:center;
  margin:0; padding:0;
  background: color-mix(in oklab, var(--accent-2), white 50%);
  opacity:0; pointer-events:none; transition: opacity .35s ease;
}
#neutrinos .nu-fig.is-active{ opacity:1; pointer-events:auto; }

/* Images & inline SVGs fill the slot */
#neutrinos .nu-fig img,
#neutrinos .nu-fig svg{
  width: 100%; height: 100%; object-fit: contain; object-position: center;
}

/* Caption overlays the image (doesn’t consume space) */
#neutrinos .nu-fig figcaption{
  position:absolute; left:10px; right:10px; bottom:10px;
  padding:.55rem .75rem; border-radius:10px;
  background: rgba(0,0,0,.45); color:#fff; font-size:.92rem;
}
#neutrinos .nu-fig .credit{ opacity:.85; font-weight:600; margin-left:.35rem; }

/* Smooth left-column reading */
#neutrinos .split-nu__left .sheet-body{ scroll-snap-type: y proximity; }
#neutrinos .nu-chunk{ scroll-snap-align: start; }

/* Mobile stack */
@media (max-width: 900px){
  #neutrinos .sheet.sheet--split-nu{
    grid-template-columns: 1fr;
    grid-template-rows: 42vh 1fr;
  }
  #neutrinos .split-nu__right{ border-radius: 12px; }
}

/* Collapsible boxes */
#neutrinos .details-box{
  margin:.6rem 0 1rem; padding:.65rem .75rem;
  border:1px solid var(--border); border-radius:12px;
  background: color-mix(in oklab, var(--accent-2), white 55%);
}
#neutrinos .details-box summary{
  cursor:pointer; font-weight:700; color:var(--accent); list-style:none;
}
#neutrinos .details-box summary::-webkit-details-marker{ display:none; }
#neutrinos .details-box[open] summary{ margin-bottom:.35rem; }

/* =========================================================
   SECTION: Dark Matter variant
   ======================================================= */
#dark-matter .sheet--full{ background: #14231b; color: #fff; }
#dark-matter .mini-card{
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.15);
}
#dark-matter a{ color: #fff; text-decoration: underline; text-underline-offset: 2px; }

/* =========================================================
   SECTION: AI Methods (#ai-methods)
   ======================================================= */



/* AI Methods uses the same header pattern as Dark Matter */
#ai-methods .sheet--full { background: var(--card); color: var(--text); }

/* Optional: use a wider hero ratio like 21:9 (Dark Matter is 16:9 by default) */

#ai-methods .sheet-header { aspect-ratio: 16 / 9; }


/* Ensure the banner image behaves like DM’s hero */
#ai-methods .sheet-header img{
  object-fit: cover;
  object-position: 50% 50%;   /* adjust focal point if needed */
}


/* AI body */
#ai-methods .sub-body{
  min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch;
  padding: 16px 20px 22px;
}
#ai-methods h3{ margin: 1.2rem 0 .5rem; font-family: var(--font-head); }

/* ANN/graphics defaults */
#ai-methods .ai-fig{ margin: .5rem 0 1rem; }
#ai-methods .ai-fig .ai-pdf,
#ai-methods .ai-fig img{
  width: 100%; height: auto; display: block; margin: 0 auto;
  border: 1px solid var(--border); border-radius: 12px; background: var(--card);
}

/* Specifically scale the ANN to ~70% of content width */
#ai-methods .ai-fig img.ann{
  width: min(30%, 900px);
  height: auto;
  display: block;
  margin: .5rem auto 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
}
@media (max-width: 640px){
  #ai-methods .ai-fig img.ann{ width: 100%; }
}

/* Two-column explainer on wide screens */
#ai-methods .ai-two{ display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 860px){ #ai-methods .ai-two{ grid-template-columns: 1fr 1fr; } }

/* Math blocks */
#ai-methods .math{
  margin: .35rem 0 .65rem; padding: .6rem .7rem; border-radius: 10px;
  background: color-mix(in oklab, var(--accent-2), white 55%);
  font: 600 .95rem ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--accent); white-space: pre-wrap;
}
#ai-methods .muted{ color: var(--muted); }

/* Pills + cards */
.pills{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.35rem 0 1rem; }
.pills span{
  display:inline-block; padding:.35rem .6rem; border-radius:999px;
  border:1px solid var(--border);
  background: color-mix(in oklab, var(--accent-2), white 60%);
  color: var(--text); font-weight: 600; font-size:.95rem;
}
.card-grid{
  display:grid; gap:12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin: .4rem 0 1.1rem;
}
.mini-card{
  display:block; padding:.9rem 1rem; border:1px solid var(--border);
  background: var(--card); border-radius:14px; text-decoration:none;
  color: var(--text); box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.mini-card h4{ margin:.1rem 0 .25rem; font-family: var(--font-head); }
.mini-card p{ margin:0; color: var(--muted); }
.mini-card:hover{ outline: 2px solid color-mix(in oklab, var(--accent) 28%, transparent); }

/* =========================================================
   UNIFIED OVERLAY TYPOGRAPHY + SPACING (drop-in override)
   Applies to: Particle Physicist, Neutrinos, Dark Matter, AI Methods
   Put this at the VERY END of styles.css
   ======================================================= */

.overlay .sheet{
  /* one place to tune spacing & typography */
  --pad-x: clamp(16px, 3vw, 28px);
  --pad-y: clamp(16px, 3vw, 28px);
  --h2-size: clamp(1.8rem, 1.1rem + 2.4vw, 2.6rem);
  --h3-size: clamp(1.15rem, 0.9rem + 1.4vw, 1.5rem);
  --kicker-size: clamp(1rem, 0.9rem + 0.4vw, 1.15rem);
  --body-size: 17px;
  --line: 1.65;
}

/* Titles (both “split” headers and image-banner headers) */
.overlay h2,
.overlay .sheet-title h2{
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.1;
  font-size: var(--h2-size);
}

/* Subtitles (“kicker”) */
.overlay .kicker{
  margin: .2rem 0 0;
  font-size: var(--kicker-size);
}

/* Body text rhythm (all overlays) */
.overlay .sheet .sheet-body,
#ai-methods .sub-body{ /* AI section uses .sub-body */
  padding: var(--pad-y) var(--pad-x) calc(var(--pad-y) + 6px) !important;
  font-size: var(--body-size);
  line-height: var(--line);
  background: transparent;
  color: inherit;
}

/* Section headings inside bodies */
.overlay .sheet .sheet-body h3{
  margin: 1.1rem 0 .55rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--h3-size);
  color: var(--accent);
}

/* Paragraphs & lists */
.overlay .sheet .sheet-body p{ margin: 0 0 1rem; }
.overlay .sheet .sheet-body .bullets{ margin: 0 0 1rem 1rem; color: var(--muted); }
.overlay .sheet .sheet-body .bullets li{ margin: .25rem 0; }

/* Make split-layout titles use same spacing across sections */
#uzh .split-uzh__title,
#neutrinos .split-nu__title{ margin: 0 0 .6rem !important; }

/* Ensure split-left scrollers inherit the unified padding */
#uzh .split-uzh__left .sheet-body,
#neutrinos .split-nu__left .sheet-body{ 
  padding: var(--pad-y) var(--pad-x) calc(var(--pad-y) + 6px) !important;
}

/* Make both “split” sheets use the same outer padding */
#uzh .sheet.sheet--split-uzh,
#neutrinos .sheet.sheet--split-nu{
  padding: var(--pad-y) var(--pad-x) !important;
}

/* Ensure banner-style headers (Dark Matter & AI Methods) behave the same */
#dark-matter .sheet-header,
#ai-methods .sheet-header{
  aspect-ratio: 16 / 9;            /* same crop */
}
#dark-matter .sheet-header img,
#ai-methods  .sheet-header img{
  object-fit: cover;
  object-position: 50% 50%;
}

/* === Bullet Cluster banner: make it taller and ensure the image fills === */
#dark-matter .sheet-header{
  /* Taller hero: adjust middle value to taste */
  block-size: clamp(46vh, 60vh, 70vh);
  aspect-ratio: auto;               /* override earlier 16:9 cap */
  position: relative;
  overflow: hidden;
}

#dark-matter .sheet-header img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 45%;         /* nudge framing: a bit higher */
}

/* Slightly shorter on small phones */
@media (max-width: 640px){
  #dark-matter .sheet-header{ block-size: 44vh; }
}


/* Optional: unify card/pill text scale in subpages */
.mini-card h4{ font-family: var(--font-head); font-weight: 700; }
.pills span{ font-size: .95rem; }

/* ================= UNIFY OVERLAY PADDING & TITLE ALIGNMENT ================ */
.overlay .sheet{
  /* one place to tune spacing everywhere */
  --pad-x: clamp(14px, 2.6vw, 22px);
  --pad-y: clamp(14px, 2.6vw, 22px);
  --h2-size: clamp(1.8rem, 1.1rem + 2.4vw, 2.6rem);
  --h3-size: clamp(1.15rem, 0.9rem + 1.4vw, 1.5rem);
  --kicker-size: clamp(1rem, 0.9rem + 0.4vw, 1.15rem);
}

.overlay .sheet .sheet-body,
#ai-methods .sub-body{                /* make AI match others */
  padding: var(--pad-y) var(--pad-x) calc(var(--pad-y) + 6px) !important;
  font-size: 17px; line-height: 1.65; background: transparent; color: inherit;
}

/* Title overlay boxes (image banners) align with the same side padding */
.sheet-title{
  left: var(--pad-x) !important;
  bottom: var(--pad-y) !important;
}

/* Section headings inside bodies */
.overlay .sheet .sheet-body h3{
  margin: 1.1rem 0 .55rem;
  font-family: var(--font-head); font-weight: 700; font-size: var(--h3-size);
  color: var(--accent);
}

/* Make split layout titles use the same top rhythm */
#uzh .split-uzh__title, #neutrinos .split-nu__title{ margin: 0 0 .6rem !important; }

/* Make the split sheets use the same outer padding */
#uzh .sheet.sheet--split-uzh,
#neutrinos .sheet.sheet--split-nu{
  padding: var(--pad-y) var(--pad-x) !important;
}

/* ===================== AI HEADER = DARK-MATTER STYLE ====================== */
/* Your global rule scales .sub-hero img by 1.02; turn that off just for AI */
#ai-methods .sub-hero img{ transform: none !important; }

/* Give AI the same "banner" feel and comfortable height */
#dark-matter .sheet-header,
#ai-methods .sub-hero{
  /* Use a height-driven banner so both feel equally tall */
  block-size: clamp(46vh, 56vh, 64vh);
  position: relative; overflow: hidden;
}

/* Ensure AI banner image covers just like Dark Matter */
#ai-methods .sub-hero img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}

/* Make AI title overlay match Dark Matter title overlay */
#ai-methods .sub-hero__title{
  position: absolute;
  left: var(--pad-x); bottom: var(--pad-y);
  padding: .55rem .75rem; border-radius: 12px; color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.35));
  text-shadow: 0 1px 4px rgba(0,0,0,.35);
}

/* Unify H2 sizing across all overlays (works for AI title too) */
#uzh .split-uzh__title h2,
#neutrinos .split-nu__title h2,
#dark-matter .sheet-title h2,
#ai-methods .sub-hero__title h2{
  font-family: var(--font-head); font-weight: 800; letter-spacing: -0.015em; line-height: 1.1;
  font-size: var(--h2-size) !important;
}

#uzh .split-uzh__title .kicker,
#neutrinos .split-nu__title .kicker,
#dark-matter .sheet-title .kicker,
#ai-methods .sub-hero__title .kicker{
  font-size: var(--kicker-size);
}

/* ============================ MOBILE POLISH =============================== */
@media (max-width: 640px){
  /* Tighter body padding so content doesn't feel cramped */
  .overlay .sheet .sheet-body,
  #ai-methods .sub-body{
    padding: 14px 14px 18px !important;
  }

  /* Slightly shorter banners on small phones */
  #dark-matter .sheet-header,
  #ai-methods .sub-hero{
    block-size: 42vh;
  }
}



/* Publications list */
#uzh .pubs { margin-left: 1rem; }
#uzh .pubs li { margin: .25rem 0; }
#uzh .pubs a { font-weight: 600; }

/* Books & Movies section */
#uzh .media-grid{
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  margin: .4rem 0 1.1rem;
}
@media (min-width: 860px){
  #uzh .media-grid{ grid-template-columns: 1fr 1fr; }
}
#uzh .media-col{
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in oklab, var(--accent-2), white 60%);
  padding: .8rem .9rem;
}
#uzh .media-sub{
  margin: 0 0 .4rem;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--accent);
  font-size: clamp(1.02rem, .9rem + .4vw, 1.15rem);
}
#uzh .media-list{
  list-style: none; margin: 0; padding: 0;
}
#uzh .media-list li{
  padding: .45rem 0;
  border-top: 1px dashed color-mix(in oklab, var(--border), black 5%);
}
#uzh .media-list li:first-child{ border-top: 0; }
#uzh .media-list .title{
  display: block; font-weight: 700;
}
#uzh .media-list .note{
  display: block; color: var(--muted); font-size: .95rem;
}

/* ================= MOBILE FIX: #uzh (Particle Physicist) ================= */
@media (max-width: 900px){
  /* Stack image + content (image first, like a banner) */
  #uzh .sheet.sheet--split-uzh{
    grid-template-columns: 1fr;
    grid-template-rows: min(42vh, 52dvh) 1fr;  /* tall enough to look like a hero */
    padding: var(--pad-y) var(--pad-x) !important;
  }

  /* Put the image block first, round corners */
  #uzh .split-uzh__right{
    order: -1;
    border-radius: 12px;
    overflow: hidden;
    /* ensure the right pane behaves like a banner */
    display: block;
  }

  /* Make the image fill the banner nicely (no weird crop to bottom-right) */
  #uzh .split-uzh__right img{
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;          /* reserves space to avoid layout jump */
    object-fit: cover;
    object-position: 50% 50%;      /* center the focal point on mobile */
    transform: none;
  }

  /* Comfortable spacing for the text column */
  #uzh .split-uzh__left{
    display: flex; flex-direction: column; min-height: 0;
  }
  #uzh .split-uzh__left .sheet-body{
    padding: 14px 14px 18px !important;
    overflow: auto; -webkit-overflow-scrolling: touch;
  }
}

/* Short landscape screens: keep a bit more image while not stealing all the space */
@media (max-height: 560px) and (max-width: 900px){
  #uzh .sheet.sheet--split-uzh{
    grid-template-rows: 36vh 1fr;
  }
}

/* ========= Neutrinos figure/caption fixes ========= */

/* 1) Default: make the figure a vertical stack (image then caption) */
#neutrinos .nu-fig {
  display: flex !important;
  flex-direction: column;
  min-height: 0;           /* prevents weird overflow in flex parents */
}

/* Image/SVG fills available space; can shrink on small screens */
#neutrinos .nu-fig img,
#neutrinos .nu-fig svg {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;      /* no cropping in the default mode */
}

/* Caption sits BELOW the image with a solid readable background */
#neutrinos .nu-fig figcaption {
  flex: 0 0 auto;
  margin: 0;
  padding: .6rem .8rem;
  font-size: .95rem;
  line-height: 1.3;
  color: var(--muted, currentColor);
  background: color-mix(in oklab, var(--accent-2), white 70%);
  border-top: 1px solid var(--border);
  text-wrap: balance;
}

/* 2) For figures explicitly marked to fill/cover the panel, 
      turn the caption into a bottom overlay with a gradient. */
#neutrinos .nu-fig[data-fit="cover"] {
  position: absolute;       /* you already use absolute; keep it */
  inset: 0;
  display: block !important;
}

#neutrinos .nu-fig[data-fit="cover"] img,
#neutrinos .nu-fig[data-fit="cover"] svg {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* allow tasteful cropping for dramatic images */
}

#neutrinos .nu-fig[data-fit="cover"] figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  border-top: 0;
  padding: .7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
  color: #fff;
  background:
    linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.25), transparent);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

/* Tidy up the small credit line */
#neutrinos .nu-fig figcaption .credit {
  display: block;
  opacity: .85;
  font-size: .88em;
  margin-top: .2rem;
}

/* 3) Phone tweaks: slightly smaller caption text and tighter spacing */
@media (max-width: 640px) {
  #neutrinos .nu-fig figcaption {
    font-size: .9rem;
    line-height: 1.25;
    padding: .55rem .7rem calc(.55rem + env(safe-area-inset-bottom));
  }
}

/* 4) Safety: avoid any accidental overlap from previous rules */
@supports (overflow: clip) {
  #neutrinos .nu-fig { overflow: clip; } /* prevents hidden scrollbars on iOS */
}

/* ===================== DARK MATTER — Bullet Cluster palette ===================== */
/* Scoped tokens just for the #dark-matter overlay */
#dark-matter{
  --dm-bg0: #0b1020;   /* deep space navy */
  --dm-bg1: #121a33;   /* cooler indigo */
  --dm-bg2: #1a1332;   /* purple-indigo */
  --dm-text: #eef0ff;  /* soft white/blue text */
  --dm-muted: #c7cbea; /* muted lavender for body/notes */
  --dm-accent: #7cc3ff;/* lensing blue for links */
  --dm-pink: #ec85b9;  /* X-ray pink highlight */
  --dm-border: rgba(255,255,255,.14);
}

/* Background: deep indigo gradient with gentle blue/pink glow nods */
#dark-matter .sheet--full{
  color: var(--dm-text);
  background:
    radial-gradient(900px 520px at 18% 8%, rgba(124,195,255,.18), transparent 65%),
    radial-gradient(900px 520px at 82% 4%, rgba(236,133,185,.14), transparent 65%),
    linear-gradient(180deg, var(--dm-bg1), var(--dm-bg2));
}

/* Text & links tuned for contrast on dark */
#dark-matter .sheet-body{ color: var(--dm-text); }
#dark-matter .sheet-body p{ color: var(--dm-text); }
#dark-matter .sheet-body .bullets{ color: var(--dm-muted); }
#dark-matter a{
  color: var(--dm-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Header banner stays tall; overlay title readable on bright regions */
#dark-matter .sheet-header{
  block-size: clamp(46vh, 60vh, 70vh);
  aspect-ratio: auto;
  position: relative;
  overflow: hidden;
}
#dark-matter .sheet-header img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
#dark-matter .sheet-title{
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.45));
}
#dark-matter .sheet-title .kicker{
  color: color-mix(in oklab, var(--dm-text), var(--dm-accent) 35%);
}

/* Details/reference boxes on dark */
#dark-matter .details-box,
#dark-matter .details-box.references{
  background: rgba(255,255,255,.05);
  border-color: var(--dm-border);
}
#dark-matter .details-box summary{ color: var(--dm-accent); }

/* Optional: small accents using X-ray pink */
#dark-matter .mini-card{
  background: rgba(255,255,255,.06);
  border-color: var(--dm-border);
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}
#dark-matter .mini-card h4{
  /* subtle pink underline on hover feels on-theme */
  border-bottom: 2px solid transparent;
}
#dark-matter .mini-card:hover h4{
  border-bottom-color: color-mix(in oklab, var(--dm-pink), white 25%);
}

/* Mobile: keep it comfy */
@media (max-width: 640px){
  #dark-matter .sheet-header{ block-size: 44vh; }
}

/* ===================== DARK MATTER — all text white ===================== */
#dark-matter{
  /* make all text tokens white */
  --dm-text: #fff;
  --dm-muted: #fff;
  --dm-accent: #fff;
  --dm-border: rgba(255,255,255,.25);
}

/* Force white on typical text elements */
#dark-matter .sheet--full,
#dark-matter .sheet-body,
#dark-matter .sheet-body p,
#dark-matter .sheet-body li,
#dark-matter .sheet-body .bullets,
#dark-matter figcaption,
#dark-matter .sheet-title,
#dark-matter .sheet-title h2,
#dark-matter .sheet-title .kicker,
#dark-matter .sheet .sheet-body h3{
  color: #fff !important;
}

/* Links: white + underline for clarity on dark bg */
#dark-matter a{
  color: #fff !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 2px;
}

/* Reference/Details boxes stay readable on dark */
#dark-matter .details-box,
#dark-matter .details-box.references{
  background: rgba(255,255,255,.06);
  border-color: var(--dm-border);
}
#dark-matter .details-box summary{ color: #fff !important; }


/* AI Methods banner: left-aligned, slightly lower, smaller */
#ai-methods .sheet-header { position: relative; }

#ai-methods .sheet-header > img {
  width: 100%;
  height: clamp(280px, 42vh, 520px);
  object-fit: cover;
  display: block;
}

#ai-methods .sheet-header .sheet-title {
  position: absolute;
  left: clamp(16px, 6vw, 64px);   /* keep to the left */
  right: auto;
  top: 52%;                       /* sit a bit lower than center */
  transform: translateY(-50%);    /* vertical centering around that top */
  text-align: left;
  display: block;                 /* no centering grid/flex */
  max-width: min(46ch, 60%);      /* don’t let it sprawl */
}

#ai-methods .sheet-header .sheet-title > * {
  margin: 0;                      /* remove default h2/p margins */
  line-height: 1.1;
}

#ai-methods #ai-title {
  font-size: clamp(1.5rem, 2.2vw + 1rem, 2.4rem); /* smaller than before */
  font-weight: 700;
}

#ai-methods .sheet-header .kicker {
  font-size: clamp(.95rem, .6vw + .8rem, 1.1rem);
  opacity: .9;
  margin-top: .35rem;
}

/* Tweak for small screens: push a touch lower and allow wider text */
@media (max-width: 720px) {
  #ai-methods .sheet-header .sheet-title {
    top: 58%;
    max-width: 90%;
  }
}


/* Smaller variants for figures in AI section */
.ai-fig img { width: 70%; height: auto; }   /* keep responsiveness */

.ai-fig--sm img { max-width: 640px; }        /* ~small */
.ai-fig--xs img { max-width: 480px; }        /* even smaller */

/* keep them left-aligned (not centered) */
.ai-fig--sm,
.ai-fig--xs { margin-left: 0; margin-right: 0; }