/* ==========================================================================
   Neurogenomics — neurogenomics.dk
   Single stylesheet, no build step, no external fonts (no third-party
   requests: visitors' IPs stay out of other people's logs).

   All colour lives in the two token blocks below. The accent is taken from
   logo.svg (#00a2f0); --accent-ink is a darkened variant used for text and
   links, because the logo cyan does not reach 4.5:1 contrast on white.
   ========================================================================== */

:root {
  --paper:      #ffffff;
  --paper-2:    #f3f7fa;
  --ink:        #10161c;
  --ink-2:      #4a5563;
  --line:       #dde4ec;
  --accent:     #00a2f0;
  --accent-ink: #00688f;
  --logo-bg:    #ffffff;

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  --wrap: 68rem;
  --bar: 4rem;               /* topbar height; anchors offset by this */
  --radius: 14px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #0c1116;
    --paper-2:    #121a21;
    --ink:        #e8eef5;
    --ink-2:      #9aa8b8;
    --line:       #223038;
    --accent:     #00a2f0;
    --accent-ink: #58c8ff;
    --logo-bg:    #0c1116;
  }
}

/* ── base ────────────────────────────────────────────────────────────────── */

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

img, svg { max-width: 100%; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 650;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h2 { font-size: clamp(1.6rem, 1.25rem + 1.6vw, 2.4rem); }
h3 { font-size: 1.1rem; letter-spacing: -0.01em; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.muted { color: var(--ink-2); }
.center { text-align: center; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.skip {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: top 150ms;
}
.skip:focus { top: 0.5rem; }

.logo-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── topbar ──────────────────────────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--bar);
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 250ms, background 250ms;
}
.topbar.is-stuck { border-bottom-color: var(--line); }

.topbar-logo {
  flex: none;
  display: flex;
  align-items: center;
  color: var(--ink);
}
/* Hidden until the hero has scrolled past — but only where JS can bring it back. */
.js .topbar-logo {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 350ms var(--ease), transform 350ms var(--ease);
  pointer-events: none;
}
.js .topbar.is-stuck .topbar-logo { opacity: 1; transform: none; pointer-events: auto; }
.topbar-logo svg { display: block; height: 1.6rem; width: auto; }

.topbar-nav {
  margin-left: auto;
  display: flex;
  gap: clamp(0.75rem, 2.2vw, 1.75rem);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* No hamburger: five items scroll sideways on narrow screens, faded at the
     edges so it reads as scrollable. The padding matches the fade distance, so
     the gradient eats blank space rather than the first and last labels. */
  padding-inline: var(--fade);
  --fade: 0.75rem;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
}
.topbar-nav::-webkit-scrollbar { display: none; }

.topbar-nav a {
  flex: none;
  padding: 0.35rem 0;
  color: var(--ink-2);
  font-size: 0.9rem;
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 180ms, border-color 180ms;
}
.topbar-nav a:hover { color: var(--ink); }
.topbar-nav a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--accent); }

/* ── hero ────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: calc(100vh - var(--bar));
  min-height: calc(100svh - var(--bar));   /* svh: ignores mobile browser chrome */
  display: grid;
  /* align-content, not place-items: centring on the inline axis too would stop
     the child stretching, size it to max-content, and overflow narrow screens. */
  align-content: center;
  padding: clamp(3rem, 8vh, 6rem) 0 5rem;
  background:
    radial-gradient(60rem 32rem at 50% -12%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    var(--paper);
}

.hero-inner { text-align: center; max-width: 44rem; }

.hero-logo {
  margin: 0 0 clamp(1.25rem, 4vh, 2.25rem);
  color: var(--ink);
  /* animate in on load rather than on scroll — it is already in view */
  animation: rise 900ms var(--ease) both;
}
.hero-logo svg { display: block; width: 100%; max-width: 34rem; height: auto; margin-inline: auto; }

.hero-tagline {
  font-size: clamp(1.15rem, 1rem + 1vw, 1.6rem);
  font-weight: 550;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.hero-lede { color: var(--ink-2); font-size: 1.05em; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1.75rem;
}

.btn {
  display: inline-block;
  padding: 0.7rem 1.35rem;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #04202c;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 180ms var(--ease), filter 180ms;
}
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

.btn-quiet {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.btn-quiet:hover { border-color: var(--accent); filter: none; }

.scroll-cue {
  position: absolute;
  bottom: 1.75rem;
  left: 50%;
  translate: -50% 0;
  width: 1.5rem;
  height: 2.5rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
}
.scroll-cue span {
  width: 2px;
  height: 0.6rem;
  border-radius: 2px;
  background: var(--accent);
  animation: cue 1.8s ease-in-out infinite;
}
@keyframes cue {
  0%, 100% { transform: translateY(-0.35rem); opacity: 0.25; }
  50%      { transform: translateY(0.35rem);  opacity: 1; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ── bands ───────────────────────────────────────────────────────────────── */

.band {
  padding-block: clamp(4rem, 11vh, 7.5rem);
  scroll-margin-top: var(--bar);
  border-top: 1px solid var(--line);
}
.band-alt { background: var(--paper-2); }

.eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.lede {
  max-width: 44rem;
  color: var(--ink-2);
  font-size: 1.05em;
}

/* ── research cards ──────────────────────────────────────────────────────── */

.cards {
  margin-top: clamp(2rem, 5vh, 3.25rem);
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.card {
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  transition: border-color 250ms, transform 250ms var(--ease);
}
.card:hover { border-color: var(--accent); transform: translateY(-2px); }
.card h3 { color: var(--ink); }
.card p { margin: 0; color: var(--ink-2); font-size: 0.96em; }

/* ── team ────────────────────────────────────────────────────────────────── */

.team {
  margin-top: clamp(2rem, 5vh, 3.25rem);
  display: grid;
  gap: 2.5rem 1.5rem;
  /* 15rem gives four columns at desktop width, so a six-person group breaks
     4 + 2 rather than stranding one person on a second row. */
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.person-photo {
  width: 100%;
  max-width: 10.5rem;      /* the column can grow; the portrait should not */
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  background: color-mix(in srgb, var(--accent) 12%, var(--paper));
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-ink);
}

.person h3 { margin: 0.9rem 0 0.15rem; font-size: 1rem; }
.person .role { margin: 0; font-size: 0.87rem; color: var(--accent-ink); font-weight: 550; }
.person .bio  { margin: 0.5rem 0 0; font-size: 0.87rem; color: var(--ink-2); line-height: 1.55; }

.person-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.55rem;
  font-size: 0.8rem;
}
.person-links a { text-decoration: none; border-bottom: 1px solid currentColor; }

/* ── alumni ──────────────────────────────────────────────────────────────── */

.alumni-heading {
  margin: clamp(2.75rem, 7vh, 4.5rem) 0 1.25rem;
  padding-top: clamp(2.75rem, 7vh, 4.5rem);
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.alumni {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem 2rem;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  font-size: 0.92rem;
}
.alumnus { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; }
.alumnus > a { text-decoration: none; border-bottom: 1px solid transparent; color: var(--ink); }
.alumnus > a:hover { border-bottom-color: var(--accent); }
.alumnus-role { color: var(--ink-2); font-size: 0.85em; }

/* ── publications ────────────────────────────────────────────────────────── */

.pubs { margin-top: clamp(2rem, 5vh, 3rem); }

.pub-year {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2.25rem 0 1rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink-2);
}
.pub-year::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.pubs > .pub-year:first-child { margin-top: 0; }

.pub {
  padding: 0.9rem 0 0.9rem 1rem;
  border-left: 2px solid var(--line);
  transition: border-color 200ms;
}
.pub:hover { border-left-color: var(--accent); }

.pub-title { display: block; margin-bottom: 0.2rem; color: var(--ink); font-weight: 550; text-decoration: none; }
.pub-title:hover { text-decoration: underline; }
.pub-meta { margin: 0; font-size: 0.86rem; color: var(--ink-2); }
.pub-meta em { font-style: italic; }
.pub-authors { margin: 0 0 0.15rem; font-size: 0.86rem; color: var(--ink-2); }
.pub-authors b { color: var(--ink); font-weight: 600; }
.pub-preprint {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
  vertical-align: 0.1em;
}

#pub-more-wrap { margin-top: 2.5rem; }

/* ── funders ─────────────────────────────────────────────────────────────── */

.funders {
  margin-top: clamp(2rem, 5vh, 3rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.funders a, .funders span { display: block; }
.funders img {
  height: 2.75rem;
  width: auto;
  max-width: 12rem;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter 250ms, opacity 250ms;
}
.funders a:hover img { filter: none; opacity: 1; }
.funder-text { font-weight: 550; color: var(--ink-2); }

/* ── contact ─────────────────────────────────────────────────────────────── */

.contact {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .contact { grid-template-columns: 1.3fr 1fr; }
}

.contact-list { margin: 0; }
.contact-list dt {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 1.5rem;
}
.contact-list dt:first-child { margin-top: 0; }
.contact-list dd { margin: 0.35rem 0 0; }

/* ── footer ──────────────────────────────────────────────────────────────── */

.foot {
  padding-block: 2.5rem;
  border-top: 1px solid var(--line);
  background: var(--paper-2);
  font-size: 0.88rem;
}
.foot-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
}
.foot p { margin: 0; }

/* ── scroll reveal ───────────────────────────────────────────────────────── */

/* Reveal only ever hides content once the head script has confirmed JS can put
   it back. Without JS the .js class is never set and everything stays visible. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 750ms var(--ease) var(--delay, 0ms),
    transform 750ms var(--ease) var(--delay, 0ms);
  will-change: opacity, transform;
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .hero-logo { animation: none; }
  .scroll-cue span { animation: none; opacity: 0.6; }
  .card:hover, .btn:hover, .topbar-logo { transform: none; }
  *, *::before, *::after { transition-duration: 1ms !important; }
}