/* VERSION: v6 — bigger logo, display-face menu, INSITES. If you cannot find the text
   `height: 56px` in this file, it is the wrong copy. */
/* ============================================================
   OHODNICKI LAB — SITE STYLES
   Built to the Web Brand Brief.

   CONTENTS
   1.  TOKENS      - colours, fonts, spacing (edit here first)
   2.  BASE        - resets, headings, links
   3.  LAYOUT      - bands, wraps, the split label/content grid
   4.  BUTTONS
   5.  MOTION      - reveal-on-scroll
   6.  NAV + LOGO
   7.  HERO
   8.  STATS
   9.  RESEARCH TILES
   10. SLIDESHOW
   11. PROSE
   12. TABS
   13. CARDS
   14. INTERIOR PAGES
   15. FOOTER
   16. RESPONSIVE

   To restyle the whole site, change section 1 and nothing else.
   ============================================================ */


/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
  /* --- Brand colours (Web Brand Brief) --- */
  --blue:        #003594;   /* Pitt Royal Blue - primary */
  --accent:      #FFB81C;   /* Pitt Gold - accent only, never body text */
  --accent-soft: #FFD277;

  /* Brighter blues. To return to the brief's Deep Navy hero,
     set --blue-bright and --blue-deep both to #0A1633. */
  --blue-bright: #0A4BC2;   /* the lift in every blue gradient */
  --blue-deep:   #002766;   /* footer, nav when scrolled, stat cells */

  /* --- Neutrals --- */
  --ink:        #1B1F2A;    /* body text on light */
  --slate:      #5B6474;    /* secondary text, captions, metadata */
  --cloud:      #EEF2F8;    /* alternating section tint */
  --mist:       #F5F7FB;    /* card and panel background */
  --hairline:   #E4E7EE;    /* borders, dividers */
  --white:      #ffffff;

  --on-blue:      #ffffff;
  --on-blue-mute: #c9d6ee;
  --hair-on-blue: rgba(255,255,255,0.22);

  /* --- Type (Web Brand Brief) --- */
  --display: "Space Grotesk", "Inter", "Helvetica Neue", Arial, sans-serif;
  --body:    "Inter", system-ui, "Helvetica Neue", Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --size-hero: clamp(40px, 6.6vw, 72px);  /* homepage title only */
  --size-disp: clamp(30px, 4.4vw, 48px);  /* page titles         */
  --size-h2:   clamp(21px, 2.4vw, 28px);  /* section titles      */
  --size-h3:   20px;

  /* --- Spacing: 8px scale --- */
  --xs: 8px; --sm: 12px; --md: 16px; --lg: 24px;
  --xl: 32px; --xxl: 48px; --huge: 64px; --mega: 96px;

  /* --- Shapes --- */
  --r-sm: 6px; --r-md: 8px; --r-pill: 999px;

  /* --- Layout --- */
  --measure: 74ch;
  --page: 1140px;
  --nav-h: 82px;
  --rail: 210px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* ============================================================
   2. BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, video, iframe, svg { display: block; max-width: 100%; }

a { color: var(--blue); text-decoration: none; border-bottom: 1px solid transparent; transition: color .2s var(--ease), border-color .2s var(--ease); }
a:hover { border-bottom-color: currentColor; }

/* Headings: Space Grotesk, tight leading, slight negative tracking */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; margin: 0; }
h1 { font-size: var(--size-disp); line-height: 1.1; }
h2 { font-size: var(--size-h2);   line-height: 1.2; }
h3 { font-size: var(--size-h3);   line-height: 1.3; font-weight: 600; }

/* Eyebrow: mono, uppercase, wide tracking - the lab's data voice */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 var(--sm);
  display: flex;
  align-items: center;
  gap: var(--sm);
}
.eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--accent); flex: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }


/* ============================================================
   3. LAYOUT
   ============================================================ */
.wrap { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 var(--lg); }

.band { padding: var(--mega) 0; position: relative; }
.band--light { background: var(--white); }
.band--mist  { background: var(--mist); }
.band--cloud { background: var(--cloud); }
.band--tight { padding: var(--xxl) 0; }

/* Blue bands carry the brightened gradient */
.band--blue {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-bright) 100%);
  color: var(--on-blue);
}
.band--blue.band--tight { border-top: 1px solid var(--hair-on-blue); }
.band--blue a { color: var(--accent); }
.band--blue a:hover { color: var(--accent-soft); }
.band--blue .eyebrow { color: var(--on-blue-mute); }

/* THE SIGNATURE: a sticky label rail on the left, content on the right.
   Both columns start on the same line, which is what gives the pages
   their strong vertical alignment. */
.split { display: grid; grid-template-columns: var(--rail) 1fr; gap: var(--huge); align-items: start; }
.split__label { position: sticky; top: calc(var(--nav-h) + var(--lg)); }
/* Wider left column, for when it holds real content such as postal
   addresses rather than just a heading */
.split--wide { grid-template-columns: 300px 1fr; }
/* Gold rule under a section heading */
.rule-gold { display: block; width: 100%; max-width: 190px; height: 4px; background: var(--accent); margin: var(--md) 0 0; }

/* Decorative motifs taken from the lab mark: hexagonal lattice (the
   materials), a gold wave (the signal) and a sensor-node network. Kept
   quiet, as the brand brief asks. */
.motif { width: 100%; max-width: 190px; margin-top: var(--xxl); overflow: visible; }
.motif .hex  { fill: none; stroke: var(--blue); stroke-opacity: .20; stroke-width: 1.2; }
.motif .wave { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round;
               stroke-dasharray: 60 320; animation: travel 9s linear infinite; }
.motif .link { stroke: var(--blue); stroke-opacity: .28; stroke-width: 1; }
.motif .node { fill: var(--blue); fill-opacity: .5; }
@keyframes travel { from { stroke-dashoffset: 380; } to { stroke-dashoffset: 0; } }

.split__note { font-family: var(--mono); font-size: 12.5px; color: var(--slate); margin: var(--sm) 0 0; }
.band--blue .split__note { color: var(--on-blue-mute); }

.head { margin: 0 0 var(--xxl); }
.head p { color: var(--slate); max-width: var(--measure); margin: var(--sm) 0 0; }

[id] { scroll-margin-top: calc(var(--nav-h) + var(--lg)); }


/* ============================================================
   4. BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--xs);
  padding: 14px var(--lg);
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  background: var(--blue);
  color: var(--white);
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); background: #00276e; color: var(--white); }

/* On dark: gold pill with navy text */
.btn--gold { background: var(--accent); color: #0A1633; }
.btn--gold:hover { background: var(--accent-soft); color: #0A1633; }

/* Secondary: navy outline on light, white outline on dark */
.btn--outline { background: transparent; border-color: var(--blue); color: var(--blue); }
.btn--outline:hover { background: var(--blue); color: var(--white); }
.band--blue .btn--outline, .hero .btn--outline { border-color: var(--on-blue); color: var(--on-blue); }
.band--blue .btn--outline:hover, .hero .btn--outline:hover { background: rgba(255,255,255,.14); color: var(--on-blue); }


/* ============================================================
   5. MOTION
   Elements with class="reveal" fade up when scrolled into view.
   lab.js adds .is-in. If the script never runs, content still shows.
   ============================================================ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: .06s; }
.reveal:nth-child(3) { transition-delay: .12s; }
.reveal:nth-child(4) { transition-delay: .18s; }
.no-js .reveal { opacity: 1; transform: none; }


/* ============================================================
   6. NAV + LOGO
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: var(--lg);
  padding: var(--sm) var(--xl);
  background: transparent;
  transition: background .3s var(--ease), padding .3s var(--ease);
}
.nav.is-scrolled {
  background: rgba(0, 39, 102, 0.92);
  backdrop-filter: blur(14px);
  padding: var(--xs) var(--xl);
  border-bottom: 1px solid var(--hair-on-blue);
}

.nav__brand { display: flex; align-items: center; gap: var(--sm); border: 0; }
.nav__brand:hover { border: 0; }
/* The lab mark, reversed for dark backgrounds */
.nav__logo { height: 56px; width: auto; transition: height .3s var(--ease); }
.nav.is-scrolled .nav__logo { height: 38px; }
.nav__word {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--on-blue);
  white-space: nowrap;
}

.nav__list { list-style: none; display: flex; align-items: center; gap: var(--md); margin: 0 0 0 auto; padding: 0; }
.nav__list li { position: relative; }
.nav__list a {
  display: block;
  padding: var(--xs) 2px;
  color: var(--on-blue);
  font-family: var(--display);        /* same face as the page titles */
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-bottom: 2px solid transparent;
}
.nav__list a:hover, .nav__list a.is-active { color: var(--on-blue); border-bottom-color: var(--accent); }

.nav__sub {
  list-style: none;
  position: absolute;
  top: calc(100% + 8px);
  left: -14px;
  min-width: 290px;
  margin: 0;
  padding: var(--xs) 0;
  background: var(--blue-deep);
  border: 1px solid var(--hair-on-blue);
  border-radius: var(--r-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
li:hover > .nav__sub, li:focus-within > .nav__sub { opacity: 1; visibility: visible; transform: none; }
.nav__sub a { padding: 10px var(--md); font-family: var(--display); font-size: 14px; font-weight: 400; border-bottom: 0; }
.nav__sub a:hover { background: var(--blue); border-bottom: 0; }

.nav__check { display: none; }
.nav__burger {
  display: none;
  margin-left: auto;
  padding: 9px var(--md);
  color: var(--on-blue);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 1px solid var(--hair-on-blue);
  border-radius: var(--r-pill);
  cursor: pointer;
}


/* ============================================================
   7. HERO
   A fixed-height band of rotating photographs under a transparent
   black mask. Left column: title and subtitle. Right column: the
   description of whichever photograph is showing.
   ============================================================ */
.hero {
  position: relative;
  height: 640px;                 /* fixed height - photographs are cropped to fit */
  display: flex;
  align-items: center;
  padding: var(--nav-h) 0 0;
  background: var(--blue-deep);
  color: var(--on-blue);
  overflow: hidden;
}

/* --- the photographs --- */
.hero__media { position: absolute; inset: 0; }
.hero__img {
  position: absolute;
  will-change: opacity;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  /* First number = how long the cross-fade takes. Second = the slow
     zoom while a photo is on screen. Lower numbers are faster. */
  transition: opacity .55s var(--ease), transform 5s linear;
}
.hero__img.is-active { opacity: 1; transform: scale(1); }

/* --- the transparent black mask ---
   Three layers, so text stays readable over a photograph of any
   brightness: heaviest behind the title on the left, eased in the middle
   so the picture reads, lifted again under the caption on the right, plus
   a darker strip at the top for the menu bar. --- */
.hero__mask {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(3,8,20,.92) 0%, rgba(3,8,20,.68) 44%, rgba(3,8,20,.88) 100%),
    linear-gradient(rgba(3,8,20,.72) 0%, rgba(3,8,20,0) 20%),
    linear-gradient(rgba(3,8,20,.18), rgba(3,8,20,.42));
}

.hero .wrap { position: relative; z-index: 1; width: 100%; }
/* Belt and braces: a soft shadow keeps every glyph legible even if a
   photograph turns out to be very bright behind it. */
.hero__eyebrow, .hero__title, .hero__lede,
.hero__count, .hero__desc-title, .hero__desc-text { text-shadow: 0 2px 18px rgba(2,6,16,.6); }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--huge); align-items: center; }

/* --- left column --- */
.hero__eyebrow { color: var(--accent-soft); }   /* lighter gold: 12px text needs the extra contrast */
.hero__title { font-size: var(--size-hero); line-height: 1.02; letter-spacing: -0.03em; max-width: 20ch; }
.hero__title span { display: block; }
.hero__title span:nth-child(2) { color: var(--accent); }
.hero__lede {
  margin: var(--lg) 0 0;
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.5;
  max-width: 42ch;
  color: #e8eefc;              /* lighter than the usual muted blue, for
                                  contrast over an unpredictable photo */
}
.hero__cta { margin-top: var(--xl); display: flex; flex-wrap: wrap; gap: var(--sm); }

/* Load sequence for the left column */
.hero__title span, .hero__lede, .hero__cta { animation: rise .9s var(--ease) both; }
.hero__title span:nth-child(1) { animation-delay: .05s; }
.hero__title span:nth-child(2) { animation-delay: .16s; }
.hero__lede { animation-delay: .3s; }
.hero__cta  { animation-delay: .42s; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* --- right column: caption for the current photograph --- */
.hero__caption { border-left: 2px solid var(--accent); padding-left: var(--lg); }
.hero__count {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 2px;
  color: #ffffff;
  margin: 0 0 var(--sm);
}
/* All captions sit in the same place; only the active one shows, so the
   layout never jumps when a longer description comes round */
.hero__descs { position: relative; min-height: 10em; }
.hero__desc {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  pointer-events: none;
}
.hero__desc.is-active { opacity: 1; transform: none; }
.hero__desc-title {
  font-family: var(--display);
  font-size: clamp(21px, 2.2vw, 28px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--on-blue);
  margin: 0 0 var(--xs);
}
.hero__desc-text {
  margin: 0;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.5;
  color: #e8eefc;
  max-width: 46ch;
}

.hero__controls { display: flex; align-items: center; gap: var(--md); margin: var(--lg) 0 0; }
.hero__dots { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.hero__pause {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 50%;
  background: rgba(3,8,20,.4);
  color: #fff;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.hero__pause:hover { background: rgba(3,8,20,.7); border-color: var(--accent); }
.hero__dot {
  width: 20px; height: 3px;
  border: 0; padding: 0;
  background: rgba(255,255,255,.35);
  cursor: pointer;
  transition: background .25s var(--ease);
}
.hero__dot:hover { background: var(--on-blue); }
.hero__dot.is-active { background: var(--accent); }


/* ============================================================
   8. STATS   (numbers count up - see lab.js)
   ============================================================ */
.statbar { background: var(--blue-deep); }   /* edge to edge, no margins */
.stats {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;                                  /* the gap shows as a hairline */
  background: var(--hair-on-blue);
}
.stat { padding: var(--xl) var(--lg); background: var(--blue-deep); }
.stat__num { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3.8vw, 48px); line-height: 1; letter-spacing: -0.03em; color: var(--accent); }
.stat__label { display: block; margin-top: var(--xs); font-family: var(--mono); font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--on-blue-mute); }


/* ============================================================
   9. RESEARCH TILES
   ============================================================ */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 2px; background: var(--blue-deep); }

.tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 320px;
  padding: var(--lg);
  border: 0;
  overflow: hidden;
  background: var(--blue-deep);
  color: var(--on-blue);
}
.tile:hover { border: 0; color: var(--on-blue); }
.tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* the photograph is graded rather than covered with a scrim */
  filter: brightness(.44) saturate(.85);
  transition: filter .5s var(--ease), transform .8s var(--ease);
}
.tile:hover img, .tile:focus-visible img { filter: brightness(.64) saturate(1); transform: scale(1.06); }

.tile__body { display: block; position: relative; z-index: 1; width: 100%; }
.tile__name { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(19px, 1.9vw, 25px); line-height: 1.2; letter-spacing: -0.02em; }
.tile__rule { display: block; width: 30px; height: 3px; margin-top: var(--md); background: var(--accent); transition: width .4s var(--ease); }
.tile:hover .tile__rule { width: 84px; }


/* ============================================================
   10. GALLERY  ("In the Lab")
   Same mechanism as the hero: full-width photographs that cross-fade
   in place. Nothing is ever set to display:none, which is what used
   to make the old version flicker on each change.
   ============================================================ */
.gallery {
  position: relative;
  height: 560px;                /* fixed height - photographs are cropped to fit */
  display: flex;
  align-items: flex-end;
  padding-bottom: var(--xl);
  background: var(--blue-deep);
  color: var(--on-blue);
  overflow: hidden;
}
.gallery__media { position: absolute; inset: 0; }
.gal__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  will-change: opacity;
  transition: opacity .6s var(--ease);
}
.gal__img.is-active { opacity: 1; }

/* Dark at the foot, where the caption sits; clear at the top so the
   photograph reads */
.gallery__mask {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(3,8,20,.30) 0%, rgba(3,8,20,.20) 35%, rgba(3,8,20,.92) 100%);
}
.gallery .wrap { position: relative; z-index: 1; }
.gallery__title { text-shadow: 0 2px 18px rgba(2,6,16,.6); }

/* Captions stack in one place and cross-fade, so the layout never jumps */
.gal__caps { position: relative; min-height: 5.4em; margin-top: var(--lg); }
.gal__cap {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  pointer-events: none;
}
.gal__cap.is-active { opacity: 1; transform: none; }
.gal__num { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 2px; color: #fff; margin-bottom: var(--xs); }
.gal__cap p {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.5;
  color: #e8eefc;
  text-shadow: 0 2px 18px rgba(2,6,16,.6);
}

.gallery__controls { display: flex; align-items: center; gap: var(--md); margin-top: var(--md); }
.gal__dots { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.gal__dot {
  width: 26px; height: 3px;
  border: 0; padding: 0;
  background: rgba(255,255,255,.4);
  cursor: pointer;
  transition: background .25s var(--ease);
}
.gal__dot:hover { background: #fff; }
.gal__dot.is-active { background: var(--accent); }


/* ============================================================
   11. PROSE
   ============================================================ */
.prose { max-width: var(--measure); }
.prose p { margin: 0 0 var(--lg); }
.prose p:last-child { margin-bottom: 0; }
.prose--lead > p:first-child { font-size: 19px; line-height: 1.6; }


/* ============================================================
   12. TABS
   ============================================================ */
.tabs { display: flex; flex-wrap: wrap; gap: var(--xs); margin: 0 0 var(--xl); border-bottom: 1px solid var(--hairline); }
.tab {
  padding: var(--sm) var(--md);
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  color: var(--slate);
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--blue); border-bottom-color: var(--accent); }
.tab__count { font-family: var(--mono); font-size: 11px; vertical-align: super; margin-left: 4px; color: var(--slate); }

.panel[hidden] { display: none; }
.more { margin-top: var(--xl); text-align: center; }


/* ============================================================
   13. CARDS
   ============================================================ */
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--lg); }

.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.card:hover { transform: translateY(-4px); border-color: var(--blue); }
.card.is-hidden { display: none; }

.card__thumb { display: block; border: 0; overflow: hidden; background: var(--cloud); }
.card__thumb:hover { border: 0; }
.card__thumb img { width: 100%; height: auto; transition: transform .6s var(--ease); }
.card:hover .card__thumb img { transform: scale(1.04); }

.card__media { display: block; aspect-ratio: 16 / 9; background: var(--blue-deep); }
.card__media > * { width: 100%; height: 100%; object-fit: cover; border: 0; }

.card__body { padding: var(--lg); font-size: 15.5px; line-height: 1.55; }
.card__date {
  display: block;
  margin-top: var(--md);
  padding-top: var(--sm);
  border-top: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--slate);
}
.jrnl { font-style: italic; font-weight: 700; }

.band--blue .card { background: rgba(255,255,255,.07); border-color: var(--hair-on-blue); color: var(--on-blue); }
.band--blue .card:hover { border-color: var(--accent); }
.band--blue .card__date { color: var(--on-blue-mute); border-top-color: var(--hair-on-blue); }


/* ============================================================
   14. INTERIOR PAGES
   ============================================================ */
.page-hero {
  position: relative;
  padding: calc(var(--nav-h) + var(--huge)) 0 var(--huge);
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-bright) 100%);
  color: var(--on-blue);
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  top: -40%; right: -5%;
  width: 46vw; height: 46vw;
  background: radial-gradient(circle, rgba(30,99,232,.65) 0%, rgba(30,99,232,0) 62%);
  pointer-events: none;
}
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero h1 { max-width: 26ch; }
.page-hero__lede { margin: var(--lg) 0 0; max-width: var(--measure); color: var(--on-blue-mute); font-size: 18px; }
.page-hero__lede a { color: var(--accent); }
/* The call-to-action sits outside the lede on purpose: the rule above
   would paint gold text onto a gold button and make it vanish. */
.page-hero__cta { margin-top: var(--lg); }
.page-hero .eyebrow { color: var(--accent); }
/* The mark, watermarked into the right edge */
.page-hero__mark {
  position: absolute;
  right: 2%; top: 50%;
  transform: translateY(-50%);
  width: min(24vw, 200px);
  opacity: .22;
  pointer-events: none;
}

/* Side jump list */
.side { position: sticky; top: calc(var(--nav-h) + var(--lg)); }
.side__title { font-family: var(--display); font-size: 15px; font-weight: 700; margin: 0 0 var(--sm); }
.side__lockup { width: 150px; margin-bottom: var(--lg); }
/* Jump lists only. Scoped to nav.side so that aside.side (the contact
   details and Paul's page) keeps normal inline links. */
nav.side ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--hairline); }
nav.side a {
  display: block;
  padding: 9px var(--md);
  margin-left: -1px;
  border: 0;
  border-left: 2px solid transparent;
  color: var(--slate);
  font-size: 14px;
  line-height: 1.35;
}
nav.side a:hover { color: var(--blue); border-left-color: var(--accent); background: var(--mist); }

/* Fact list */
.facts { list-style: none; margin: 0; padding: 0; font-size: 15px; border-left: 2px solid var(--hairline); }
.facts li { padding: var(--sm) 0 var(--sm) var(--lg); border-bottom: 1px solid var(--hairline); }
.facts li:last-child { border-bottom: 0; }
.facts a { font-weight: 600; }

/* Content section */
.section + .section { margin-top: var(--huge); padding-top: var(--huge); border-top: 1px solid var(--hairline); }
.section__title { font-family: var(--display); font-weight: 700; font-size: var(--size-h2); line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 var(--sm); }
.section__title::after { content: ""; display: block; width: 48px; height: 3px; background: var(--accent); margin-top: var(--md); }
.section__meta { font-family: var(--mono); color: var(--slate); font-size: 13.5px; margin: 0 0 var(--lg); }
.section p { max-width: var(--measure); }

/* People */
.group + .group { margin-top: var(--mega); }
.group-title { font-family: var(--display); font-weight: 700; font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -0.02em; margin: 0 0 var(--xl); padding-bottom: var(--sm); border-bottom: 3px solid var(--accent); }
.people { display: grid; gap: var(--xxl); }
.person { display: grid; grid-template-columns: 200px 1fr; gap: var(--xl); align-items: start; }
.person--text { grid-template-columns: 1fr; }
.person__photo { width: 100%; border-radius: var(--r-md); border: 1px solid var(--hairline); background: var(--mist); }
.person__name { font-family: var(--display); font-size: var(--size-h3); font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.person__mail { display: inline-block; margin-top: 2px; font-family: var(--mono); font-size: 13px; }
.person p { margin: var(--sm) 0 0; max-width: var(--measure); }

/* Figures */
.figure { margin: 0 0 var(--lg); }
.figure img { width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid var(--hairline); }
.figure figcaption { margin-top: var(--sm); font-size: 13px; font-style: italic; color: var(--slate); max-width: var(--measure); }

/* Equipment specs - sensor-node dots from the mark */
.spec { list-style: none; margin: var(--md) 0 0; padding: 0; max-width: var(--measure); }
.spec li { position: relative; padding: 5px 0 5px var(--lg); }
.spec li::before { content: ""; position: absolute; left: 0; top: .8em; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }

/* Publications */
.pub { display: grid; grid-template-columns: 88px 1fr; gap: var(--xl); align-items: start; padding: var(--lg) 0; border-top: 1px solid var(--hairline); }
.pub:last-child { border-bottom: 1px solid var(--hairline); }
.pub__logo { width: 100%; height: auto; }
.pub p { margin: 0; max-width: var(--measure); }

/* Embeds */
.embed { aspect-ratio: 16 / 10; border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; margin-bottom: var(--lg); }
.embed iframe { width: 100%; height: 100%; border: 0; }

/* Contact details with icons */
.contact-list {
  list-style: none;
  margin: var(--lg) 0 0;
  padding: 0;
  display: grid;
  gap: var(--md);
  border-left: 2px solid var(--hairline);
}
.contact-list > li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--sm);
  align-items: start;
  padding-left: var(--lg);      /* keeps the icons clear of the rail */
  padding-bottom: var(--md);
  border-bottom: 1px solid var(--hairline);
  font-size: 15px;
  line-height: 1.5;
}
.contact-list > li:last-child { border-bottom: 0; padding-bottom: 0; }
/* Icons stand in for bullet points, so they sit at text size and line up
   with the first line rather than sitting in a badge */
.contact-list__icon { display: block; color: var(--blue); margin-top: .22em; }
.contact-list__icon svg { width: 15px; height: 15px; fill: currentColor; }
.contact-list strong { font-family: var(--display); font-weight: 700; letter-spacing: -0.01em; }
.contact-list a { font-weight: 600; }

/* Open positions - the loudest thing on the contact page */
.positions__intro { max-width: var(--measure); font-size: 18px; margin: 0 0 var(--xl); }
.postings { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--md); }
.posting a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--md);
  align-items: center;
  padding: var(--lg);
  border: 1px solid var(--hair-on-blue);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.07);
  color: var(--on-blue);
  transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.posting a:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  background: rgba(255,255,255,.13);
  color: var(--on-blue);
}
.posting__tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 1.5px;
  padding: 5px 9px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: #0A1633;
  align-self: start;
}
.posting__title { font-size: 16px; line-height: 1.45; }
.posting__go { font-size: 22px; color: var(--accent); transition: transform .25s var(--ease); }
.posting a:hover .posting__go { transform: translateX(5px); }

/* Position adverts */
.docs { list-style: none; margin: var(--lg) 0 0; padding: 0; }
.docs li { border-top: 1px solid var(--hairline); }
.docs li:last-child { border-bottom: 1px solid var(--hairline); }
.docs a { display: block; padding: var(--md) 0; border: 0; font-weight: 600; transition: padding .25s var(--ease); }
.docs a:hover { color: var(--blue-bright); padding-left: var(--xs); border: 0; }


/* ============================================================
   15. FOOTER
   ============================================================ */
.footer { background: var(--blue-deep); color: var(--on-blue); padding: var(--huge) 0 var(--xl); }
.footer__top { display: flex; flex-wrap: wrap; gap: var(--lg); align-items: center; justify-content: space-between; padding-bottom: var(--lg); border-bottom: 1px solid var(--hair-on-blue); }
.footer__brand { display: flex; align-items: center; gap: var(--md); }
.footer__logo { height: 54px; width: auto; }
.footer__word { font-family: var(--display); font-size: clamp(20px, 2.6vw, 30px); font-weight: 700; letter-spacing: -0.02em; }
.footer__icons { list-style: none; display: flex; gap: var(--sm); margin: 0; padding: 0; }
.footer__icons a { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--hair-on-blue); border-radius: 50%; color: var(--on-blue); }
.footer__icons a:hover { border-color: var(--accent); color: var(--accent); background: rgba(255,255,255,.06); }
.footer__icons svg { width: 18px; height: 18px; fill: currentColor; }
.footer__legal { list-style: none; display: flex; flex-wrap: wrap; gap: var(--md); margin: var(--lg) 0 0; padding: 0; font-family: var(--mono); font-size: 11.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--on-blue-mute); }


/* ============================================================
   16. RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  :root { --rail: 170px; --huge: 48px; --mega: 72px; }
  .nav { padding: var(--sm) var(--md); flex-wrap: wrap; }
  .nav.is-scrolled { padding: var(--xs) var(--md); }
  .nav__burger { display: block; }
  .nav__list { display: none; width: 100%; margin: 0; padding: var(--xs) 0 var(--sm); border-top: 1px solid var(--hair-on-blue); }
  /* The full menu is 19 rows once the sub-menus are showing, which is
     taller than a phone screen. The bar is position:fixed, so without a
     height limit the last few items sit off-screen with no way to reach
     them. Cap it to the viewport and let it scroll. */
  .nav__check:checked ~ .nav__list {
    display: block;
    max-height: calc(100vh - 4rem);
    max-height: calc(100dvh - 4rem);   /* dvh copes with phone toolbars */
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .nav__list > li { width: 100%; }
  .nav__list a { padding: 11px 0; }
  .nav__sub { position: static; opacity: 1; visibility: visible; transform: none; min-width: 0; padding: 0 0 var(--xs) var(--md); background: transparent; border: 0; }
  .nav__sub a { color: var(--on-blue-mute); padding: 8px 0; }
  .nav.is-open { background: rgba(0,39,102,.97); backdrop-filter: blur(14px); }
}

@media (max-width: 860px) {
  .split, .split--wide { grid-template-columns: 1fr; gap: var(--xl); }
  /* Both column types must stop sticking here. In one column the side
     column sits above the content, and a sticky element paints over its
     in-flow siblings - which is what made the text run underneath
     Paul's photograph and the jump lists. */
  .split__label,
  .side { position: static; }
  .motif { display: none; }        /* no spare space to fill on a phone */
  .hero { height: auto; min-height: 620px; padding: calc(var(--nav-h) + var(--xxl)) 0 var(--xxl); align-items: flex-start; }
  .hero__grid { grid-template-columns: 1fr; gap: var(--xl); }
  .hero__descs { min-height: 9em; }
  .gallery { height: auto; min-height: 520px; padding-top: var(--xxl); }
  .gal__caps { min-height: 7em; }
  .person { grid-template-columns: 1fr; }
  .person__photo { max-width: 200px; }
  .pub { grid-template-columns: 60px 1fr; gap: var(--md); }
  .posting a { grid-template-columns: auto 1fr; row-gap: var(--xs); }
  .posting__go { display: none; }
  .page-hero__mark { display: none; }
  .footer__top { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .reveal { opacity: 1; transform: none; }
  /* The photographs still rotate, but swap instantly instead of
     cross-fading and drifting. */
  .hero__img { transition: none; transform: none; }
  .hero__img.is-active { transform: none; }
  .gal__img { transition: none; }
}