:root {
  --ink: #0B2140;
  --body: #3C5273;
  --secondary: #53688A;
  --muted: #5C7089;
  --faint: #6B7E96;
  --hairline: #E3E9F0;
  --hairline-strong: #D9E1EA;
  --rule: #EDF1F6;
  --page-bg: #F6F8FA;
  --surface: #FFFFFF;
  --recessed: #FBFCFD;
  --inert: #EDF2F7;
  --inert2: #F1F5F9;
  --accent: #0B79D0;
  --accent-ink: #08558F;
  --accent-soft: #E7F0FA;
  --accent-soft-border: #B9D5EE;
  --navy: #0B2140;
  --success: #1F6B47;
  --success-bg: #E6F3EC;
  --success-border: #CFE3D6;
  --warning: #B5792A;
  --warning-bg: #FBF0E4;
  --danger: #C0392B;
  --danger-border: #E2A8A0;
}

* { box-sizing: border-box; }

html { min-height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--page-bg);
  color: var(--body);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14.5px;
  line-height: 1.5;
}

.mono { font-family: 'IBM Plex Mono', monospace; }

h1, h2, h3, .serif { font-family: 'Newsreader', serif; color: var(--ink); font-weight: 500; }

a { color: var(--accent-ink); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 10px 16px;
  border-radius: 0 0 8px 0; font-size: 13px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, .chip-choice:focus-visible, .card[href]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

header.site {
  position: sticky; top: 0; z-index: 10;
  background: #FFFFFFEE; backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
  padding: 14px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

header.site .brand { display: flex; align-items: center; gap: 16px; }
header.site .brand img { height: 92px; }
header.site .brand .title { font-family: 'Newsreader', serif; font-size: 25px; font-weight: 600; color: var(--ink); line-height: 1.15; }
header.site .brand .title-expansion { font-size: 12px; color: var(--muted); margin-top: 1px; }
header.site .brand .sub { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-top: 3px; }
header.site nav a { margin-left: 18px; font-size: 13px; color: var(--body); text-decoration: none; }
header.site nav a:hover { color: var(--accent-ink); }

.shell { display: flex; flex-wrap: wrap; flex: 1 1 auto; }
main.content { flex: 999 1 480px; min-width: 320px; padding: 30px 28px 72px; max-width: 1120px; margin: 0 auto; width: 100%; }

.hero {
  border-radius: 18px; padding: 40px 34px; color: #fff;
  background: #0B2140;
  position: relative;
  overflow: hidden;
  margin-bottom: 26px;
}
.hero::before, .hero::after {
  content: ''; position: absolute; top: 50%; right: -90px;
  width: 320px; height: 320px; border-radius: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.hero::before { border: 34px solid rgba(255,255,255,0.05); }
.hero::after { border: 18px solid rgba(27,147,209,0.18); width: 230px; height: 230px; }
.hero > * { position: relative; z-index: 1; }
.hero .eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.16em; color: #B9CBE0; text-transform: uppercase; }
.hero h1 { color: #fff; font-weight: 500; font-size: clamp(30px, 4.4vw, 50px); line-height: 1.05; max-width: 20ch; margin: 10px 0 14px; }
.hero p { font-size: 15.5px; color: #D7E3F0; max-width: 56ch; margin: 0 0 22px; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; }

.btn { border-radius: 9px; padding: 11px 18px; font-size: 14px; font-weight: 600; border: 1px solid transparent; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-ink); }
.btn-primary.on-navy { background: #fff; color: var(--navy); }
.btn-ghost { background: transparent; color: #fff; border-color: #FFFFFF66; }
.btn-secondary { background: var(--inert); color: var(--body); border-color: var(--hairline); }
.btn-secondary:hover { border-color: #C9D5E2; color: var(--ink); }
.btn:disabled { opacity: 0.45; cursor: default; }

.card { background: var(--surface); border-radius: 14px; padding: 22px; border: 1px solid var(--hairline); }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 22px 0; }
.facts .card { padding: 18px; }
.facts .label { font-family: 'IBM Plex Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); }
.facts .value { font-family: 'Newsreader', serif; font-size: 25px; font-weight: 500; color: var(--ink); margin: 4px 0; }
.facts .note { font-size: 12.5px; color: var(--muted); }
.glance-card { position: relative; overflow: hidden; padding-top: 21px; }
.glance-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--dot, var(--accent)); }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid var(--hairline); border-radius: 9px; padding: 11px 12px;
  font-size: 14px; font-family: inherit; background: #fff; color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field input.invalid, .field select.invalid, .field textarea.invalid { border-color: var(--danger-border); }
.field .error { min-height: 14px; font-size: 12.5px; color: var(--danger); margin-top: 4px; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }

.chip-group { display: flex; gap: 10px; flex-wrap: wrap; }
.chip-choice {
  border-radius: 9px; padding: 10px 16px; font-size: 13.5px; font-weight: 500;
  border: 1px solid var(--hairline); background: #fff; color: var(--body); cursor: pointer;
}
.chip-choice.selected { background: var(--accent-soft); border-color: var(--accent-soft-border); color: var(--accent-ink); }

.word-count { font-family: 'IBM Plex Mono', monospace; font-size: 12px; margin-top: 6px; color: var(--muted); }
.word-count.warn { color: var(--warning); }
.word-count.over { color: var(--danger); }

.declaration-btn { display: flex; align-items: center; gap: 10px; border: 1px solid var(--hairline); border-radius: 9px; padding: 12px 14px; background: #fff; cursor: pointer; width: 100%; text-align: left; font-size: 13.5px; color: var(--body); }
.declaration-box { width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--hairline-strong); flex: none; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; }
.declaration-btn.checked .declaration-box { background: var(--accent); border-color: var(--accent); }

.success-card { border: 1px solid var(--success-border); border-radius: 14px; padding: 26px; background: #fff; }
.success-card .kicker { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.12em; color: var(--success); text-transform: uppercase; }
.success-card h2 { font-size: 26px; margin: 10px 0; }
.success-card .code { font-family: 'IBM Plex Mono', monospace; font-size: 15px; background: var(--inert); padding: 8px 12px; border-radius: 6px; display: inline-block; margin-top: 10px; }

.pill { display: inline-block; border-radius: 20px; padding: 4px 12px; font-size: 12px; font-weight: 600; }
.pill.accepted { background: var(--success-bg); color: var(--success); }
.pill.review { background: var(--accent-soft); color: var(--accent-ink); }

.theme-chip { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; text-transform: uppercase; border-radius: 4px; padding: 3px 8px; display: inline-block; }

.sub-list .row { padding: 16px 0; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sub-list .row:last-child { border-bottom: none; }

.lookup-form { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.lookup-form input { flex: 1 1 260px; }

footer.site {
  border-top: 1px solid var(--hairline-strong); background: var(--recessed);
  padding: 22px 28px; display: flex; justify-content: space-between; align-items: flex-start;
  font-size: 12px; color: var(--muted); flex-wrap: wrap; gap: 18px;
}
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-links a {
  font-size: 13px; font-weight: 500; color: var(--body); text-decoration: none;
  position: relative; padding-bottom: 3px;
}
.footer-links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--accent-ink); transition: right 0.2s ease;
}
.footer-links a:hover { color: var(--accent-ink); }
.footer-links a:hover::after { right: 0; }
.footer-links a.footer-link-strong { color: var(--accent-ink); font-weight: 600; }

.disclaimer { border: 1px dashed var(--hairline-strong); border-radius: 8px; padding: 10px 12px; font-size: 12px; color: var(--muted); margin-top: 18px; }

/* --- Motion & interactivity polish --- */
.card { transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease; }
.card:hover { box-shadow: 0 6px 18px rgba(11, 33, 64, 0.06); }
.sub-list .row { transition: background-color 0.15s ease; border-radius: 8px; }
.sub-list .row:hover { background-color: var(--recessed); }
.btn { transition: background-color 0.15s ease, transform 0.1s ease, border-color 0.15s ease; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.chip-choice { transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.theme-chip, .pill { transition: transform 0.15s ease; }
header.site nav a { transition: color 0.15s ease; position: relative; }
header.site nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -4px; height: 2px;
  background: var(--accent); transition: right 0.2s ease;
}
header.site nav a:hover::after { right: 0; }

/* --- Programme: hover-to-preview abstract --- */
.session-card { position: relative; cursor: default; z-index: 1; }
.session-card:hover, .session-card.popover-open {
  box-shadow: 0 10px 26px rgba(11, 33, 64, 0.1); transform: translateY(-1px); z-index: 50;
}
.session-card.has-preview { cursor: pointer; }
.session-abstract-popover {
  display: none;
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30;
  background: var(--ink); color: #EAF1FA;
  border-radius: 12px; padding: 16px 18px;
  box-shadow: 0 16px 32px rgba(11, 33, 64, 0.3);
  font-size: 13px; line-height: 1.55;
  max-height: 260px; overflow-y: auto;
}
.session-card:hover .session-abstract-popover,
.session-card.popover-open .session-abstract-popover { display: block; }
.session-abstract-popover .popover-kicker {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: #8FB3D9; margin-bottom: 6px;
}
.session-abstract-popover .popover-author { font-size: 12px; color: #B9CBE0; margin-bottom: 8px; }

/* --- Home: explore grid --- */
.explore-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 30px; }
.explore-card { text-decoration: none; display: flex; flex-direction: column; gap: 6px; }
.explore-card:hover { border-color: var(--accent-soft-border); }
.explore-card .explore-title { font-family: 'Newsreader', serif; font-weight: 600; font-size: 17px; color: var(--ink); }
.explore-card .explore-desc { font-size: 12.5px; color: var(--muted); flex: 1; line-height: 1.45; }
.explore-card .explore-arrow { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--accent-ink); margin-top: 4px; transition: transform 0.15s ease; display: inline-block; }
.explore-card:hover .explore-arrow { transform: translateX(4px); }

/* --- Home: Key updates carousel --- */
.updates-carousel { position: relative; min-height: 84px; }
.updates-slides { position: relative; }
.update-slide {
  display: none; opacity: 0; padding-left: 14px;
  transition: opacity 0.35s ease;
}
.update-slide.active { display: block; opacity: 1; }
.updates-dots { display: flex; gap: 7px; margin-top: 14px; }
.update-dot {
  width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0;
  background: var(--hairline-strong); cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.update-dot.active { background: var(--accent); transform: scale(1.35); }
.update-dot:hover { background: var(--accent-soft-border); }

/* --- Admin sub-nav --- */
.admin-nav {
  display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0 22px;
  border-bottom: 1px solid var(--hairline); padding-bottom: 2px;
}
.admin-nav a {
  font-size: 13px; font-weight: 500; color: var(--muted); text-decoration: none;
  padding: 8px 12px; border-radius: 8px 8px 0 0; border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.admin-nav a:hover { color: var(--ink); background: var(--recessed); }
.admin-nav a.active { color: var(--accent-ink); border-bottom-color: var(--accent); font-weight: 600; }

/* --- Photo hover zoom: news images, researcher headshots, gallery thumbs --- */
.photo-zoom, .gallery-thumb-wrap { overflow: hidden; border-radius: 10px; }
.photo-zoom img, .gallery-thumb { transition: transform 0.3s ease; display: block; }
.photo-zoom:hover img, .gallery-thumb-wrap:hover .gallery-thumb { transform: scale(1.06); }
.gallery-thumb-wrap { border-radius: 8px; }

#lightbox {
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
#lightbox.open { opacity: 1; pointer-events: auto; }
#lightbox img { transform: scale(0.96); transition: transform 0.2s ease; }
#lightbox.open img { transform: scale(1); }
#lightbox-close {
  position: absolute; top: 20px; right: 26px; color: #fff; font-size: 28px; line-height: 1;
  cursor: pointer; opacity: 0.75;
}
#lightbox-close:hover { opacity: 1; }

/* --- Responsive: tablet & phone --- */
@media (max-width: 860px) {
  header.site {
    flex-direction: column; align-items: flex-start; gap: 10px;
    padding: 12px 16px;
  }
  header.site .brand img { height: 56px; }
  header.site .brand .title { font-size: 19px; }
  header.site .brand .title-expansion { font-size: 11px; }
  header.site .brand .sub { font-size: 11px; }
  header.site nav {
    display: flex; flex-wrap: wrap; gap: 4px 16px;
    width: 100%; row-gap: 6px;
  }
  header.site nav a { margin-left: 0; font-size: 12.5px; }

  main.content { padding: 20px 16px 56px; }

  .hero { padding: 26px 20px; border-radius: 14px; }
  .hero h1 { font-size: clamp(24px, 7vw, 36px); }
  .hero .actions { flex-wrap: wrap; }
  .hero .actions .btn { flex: 1 1 auto; justify-content: center; }
  .hero::before, .hero::after { display: none; }

  footer.site {
    flex-direction: column; align-items: flex-start; gap: 14px;
    padding: 18px 16px;
  }

  .card { padding: 16px; }
}

@media (max-width: 480px) {
  header.site .brand { gap: 10px; }
  header.site .brand img { height: 46px; }
  .hero h1 { max-width: none; }
}