/* ==========================================================================
   Louder Lab — shared stylesheet

   Dark theme throughout. The page background is a near-black pulled from the
   chromatin render, so the hero movie dissolves into the page rather than
   sitting on it as a panel.

   Edit the tokens in :root to restyle the whole site at once.
   ========================================================================== */

:root {
  /* --- Surfaces (dark) --- */
  --paper:          #04100d;   /* page background: near-black, faintly teal */
  --paper-tint:     #0a1a16;   /* slightly lifted, for alternating sections */
  --paper-sunk:     #020a08;   /* footer, deeper than the page */
  --line:           #1c2f2a;   /* hairline borders */

  /* --- Text --- */
  --ink:            #e9f1ee;   /* body text          16.8:1 on --paper */
  --ink-soft:       #9ab0aa;   /* secondary text      8.4:1 on --paper */

  /* --- Accents, sampled from the render (nucleosomes ~165deg hue) --- */
  --accent:         #5fd3b8;   /* links, buttons     10.6:1 on --paper */
  --accent-deep:    #8ee5cf;   /* hover: brighter, not darker, on a dark bg */
  --accent-glow:    #5fd3b8;
  --warm:           #f0a860;   /* amber from the histone cores */

  /* --- Typography --- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;

  /* --- Layout --- */
  --measure: 68ch;     /* comfortable reading width */
  --wide: 1180px;      /* max width of wide containers */
  --nav-h: 68px;

  --radius: 10px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 10px rgba(0, 0, 0, .35);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, .55), 0 16px 40px rgba(0, 0, 0, .45);

  --ease: cubic-bezier(.22, .61, .36, 1);

  color-scheme: dark;   /* native form controls and scrollbars follow suit */
}

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
  -webkit-text-size-adjust: 100%;
  background: var(--paper);   /* prevents white flash on overscroll */
}

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

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

a {
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  text-underline-offset: 3px;
  transition: color .18s var(--ease);
}
a:hover { color: var(--accent-deep); text-decoration-color: currentColor; }

h1, h2, h3, h4 {
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 .5em;
  font-weight: 650;
  color: #fff;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.18rem; }

p { margin: 0 0 1.1em; }

.lede {
  font-size: 1.18rem;
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* Secondary note beneath a lede — smaller, dimmer, still readable. */
.lede--note {
  font-size: .95rem;
  color: #7f958f;
  margin-top: -.4rem;
}

/* Screen-reader-only text (skip links, labels) */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -60px; left: 12px; z-index: 200;
  background: var(--accent); color: #04100d;
  font-weight: 600;
  padding: 10px 16px; border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.skip-link:focus { top: 12px; }

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

::selection { background: var(--accent); color: #04100d; }

/* --------------------------------------------------------------------------
   Layout containers
   -------------------------------------------------------------------------- */

.wrap {
  width: min(100% - 2.5rem, var(--wide));
  margin-inline: auto;
}

.section {
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
  border-top: 1px solid var(--line);
}
.section--tint { background: var(--paper-tint); }
.section--plain { border-top: 0; }   /* for a section that continues the hero */
.section:first-of-type { border-top: 0; }

/* On the landing page this label carries the research section on its own —
   there is no heading beneath it — so it is sized up to do that work.
   Tracking is eased off slightly: wide letter-spacing that reads as elegant
   at 12px starts to look stretched once the type gets bigger. */
.section__label {
  font-size: clamp(.95rem, 1.5vw, 1.15rem);
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.3rem;
}

/* --------------------------------------------------------------------------
   Header / navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(4, 16, 13, .78);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}

/* Transparent header over the video hero, until the user scrolls. */
.site-header--over-hero {
  background: transparent;
  border-bottom-color: transparent;
}

.site-header__inner {
  width: min(100% - 2.5rem, var(--wide));
  margin-inline: auto;
  display: flex; align-items: center; gap: 1.5rem;
}

.brand {
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -.01em;
  color: #fff;
  text-decoration: none;
  margin-right: auto;
  white-space: nowrap;
}
.brand span { color: var(--accent); }

.nav { display: flex; gap: 1.6rem; align-items: center; }

.nav a {
  position: relative;
  color: var(--ink);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
  padding: .35rem 0;
}
.nav a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s var(--ease);
}
.nav a:hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); }

/* Hamburger, mobile only */
.nav-toggle {
  display: none;
  background: none; border: 0; cursor: pointer;
  width: 40px; height: 40px; padding: 9px;
  flex-direction: column; justify-content: space-between;
}
.nav-toggle span {
  display: block; height: 2px; width: 100%;
  background: var(--ink); border-radius: 2px;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

@media (max-width: 800px) {
  .nav-toggle { display: flex; }
  .nav {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(4, 16, 13, .97);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    padding: .5rem 1.25rem 1.25rem;
    transform: translateY(-130%);
    transition: transform .3s var(--ease);
  }
  .nav[data-open="true"] { transform: translateY(0); }
  .nav a { padding: .85rem 0; border-bottom: 1px solid var(--line); }
  .nav a::after { display: none; }
}

/* --------------------------------------------------------------------------
   Hero with looping chromatin video
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  margin-top: calc(var(--nav-h) * -1);
  display: grid;
  align-items: center;
  overflow: hidden;
  background: #000;   /* shows while the video buffers */
  color: #fff;
  isolation: isolate;
}

.hero__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* Scrim, tuned to this particular movie.

   Measured luminance across the frame (left -> right, 8 columns):
     66  73  41  13  11  25  67  62
   So the render is bright at both edges with a dark valley through the
   middle. The headline is left-aligned and therefore sits on the brightest
   part of the image — hence a directional scrim that is heavy on the left
   and releases toward the right, where the chromatin stays fully visible.
   A second vertical pass darkens under the nav and fades into the page. */
.hero__scrim {
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(95deg,
      rgba(4,16,13,.94) 0%,
      rgba(4,16,13,.86) 26%,
      rgba(4,16,13,.55) 48%,
      rgba(4,16,13,.18) 68%,
      rgba(4,16,13,.10) 100%),
    linear-gradient(180deg,
      rgba(4,16,13,.55) 0%,
      rgba(4,16,13,0)   18%,
      rgba(4,16,13,0)   55%,
      rgba(4,16,13,1)   100%);
}

/* Narrow screens: text spans the full width, so the sideways gradient is
   no longer useful — even it out instead. */
@media (max-width: 780px) {
  .hero__scrim {
    background:
      linear-gradient(180deg,
        rgba(4,16,13,.80) 0%,
        rgba(4,16,13,.62) 40%,
        rgba(4,16,13,.74) 70%,
        rgba(4,16,13,1)   100%);
  }
}

.hero__inner {
  width: min(100% - 2.5rem, var(--wide));
  margin-inline: auto;
  padding: calc(var(--nav-h) + 3rem) 0 6rem;
  max-width: 62rem;
}

.hero h1 {
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .6);
  margin-bottom: .6em;
}
/* Amber rather than teal: the footage behind is teal, so a teal highlight
   would sink into it. The amber echoes the histone cores instead. */
.hero h1 em {
  font-style: normal;
  color: var(--warm);
}

.hero__summary {
  font-size: clamp(1.05rem, 1.9vw, 1.28rem);
  line-height: 1.62;
  color: rgba(255, 255, 255, .94);
  max-width: 58ch;
  text-shadow: 0 1px 22px rgba(0, 0, 0, .6);
}

.hero__eyebrow {
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 1.2rem;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.2rem; }

/* Bouncing scroll hint at the bottom of the hero */
.scroll-hint {
  position: absolute; bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .8);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
}
.scroll-hint:hover { color: #fff; }
.scroll-hint::after {
  content: "";
  width: 11px; height: 11px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  animation: nudge 2.1s var(--ease) infinite;
}
@keyframes nudge {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: .55; }
  50%      { transform: rotate(45deg) translate(4px, 4px); opacity: 1; }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .72rem 1.4rem;
  border-radius: 100px;
  font-size: .95rem; font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .18s var(--ease), background .18s var(--ease),
              border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); }

/* On a dark theme the filled button needs dark text on a bright fill. */
.btn--primary {
  background: var(--accent); color: #04100d;
  box-shadow: 0 4px 20px rgba(95, 211, 184, .22);
}
.btn--primary:hover { background: var(--accent-deep); color: #04100d; }

.btn--ghost {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .34);
  color: #fff;
  backdrop-filter: blur(6px);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Research focus blocks (alternating text / figure)
   -------------------------------------------------------------------------- */

.focus {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.focus + .focus { margin-top: clamp(4rem, 8vw, 7rem); }

/* Every second block puts the figure on the left. */
.focus:nth-of-type(even) .focus__figure { order: -1; }

/* Stacked variant: body then figure, both at full content width. For very
   wide figures, which lose all their detail in a half-width column. */
.focus--stacked { grid-template-columns: 1fr; gap: 2.5rem; }
.focus--stacked .focus__figure { order: 0 !important; width: 100%; }
.focus--stacked .focus__body { max-width: var(--measure); }

/* Uneven split, favouring the figure. For panoramic figures that stay beside
   the text but need more width than half to stay legible. The figure sits in
   the first column on even-numbered blocks, hence the order of the values. */
.focus--figure-wide { grid-template-columns: 1.15fr 0.85fr; }
.focus--figure-wide:nth-of-type(odd) { grid-template-columns: 0.85fr 1.15fr; }

@media (max-width: 780px) {
  .focus--figure-wide,
  .focus--figure-wide:nth-of-type(odd) { grid-template-columns: 1fr; }
}

.focus__body { max-width: var(--measure); }

/* The theme title is an <h2>: on the landing page it is the first heading
   inside the research section, so making it an h3 would skip a level. Sized
   smaller than a normal h2 because it heads a block, not a whole section. */
.focus__body h2 {
  font-size: clamp(1.3rem, 2.3vw, 1.65rem);
  margin-bottom: .7em;
  text-wrap: balance;
}

/* With no section heading between them, the eyebrow label would otherwise
   sit almost on top of the first theme block. */
.section__label + .focus { margin-top: 2.4rem; }

.focus__figure {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-tint);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.focus__figure img,
.focus__figure video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.focus__figure figcaption {
  padding: .75rem 1rem;
  font-size: .84rem;
  color: var(--ink-soft);
  background: var(--paper-tint);
  border-top: 1px solid var(--line);
}

/* Frameless variant, for figures that are themselves transparent PNGs. The
   card background and border would only box in something already designed to
   sit on black, so both are stripped and the image keeps its own proportions. */
.focus__figure--bare {
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
.focus__figure--bare img { aspect-ratio: auto; object-fit: contain; height: auto; }
.focus__figure--bare figcaption {
  background: none;
  border-top: 0;
  padding: .9rem 0 0;
}

.tile--bare {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: opacity .2s var(--ease), filter .2s var(--ease);
}
.tile--bare:hover {
  transform: none;
  box-shadow: none;
  border-color: transparent;
  filter: brightness(1.12);   /* hover cue without a frame to highlight */
}
.tile--bare img { aspect-ratio: auto; object-fit: contain; }

/* Placeholder shown until a real figure exists — a labelled empty frame
   rather than a broken image. Remove the class when you add the graphic. */
.focus__figure--pending {
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(-45deg,
      rgba(95,211,184,.05) 0 12px, transparent 12px 24px),
    var(--paper-tint);
  color: var(--ink-soft);
  font-size: .86rem;
  text-align: center;
  padding: 1.5rem;
}

@media (max-width: 780px) {
  .focus { grid-template-columns: 1fr; }
  .focus:nth-of-type(even) .focus__figure { order: 0; }
}

/* Small "keyword" pills under a focus description */
.tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.4rem; padding: 0; list-style: none; }
.tags li {
  font-size: .8rem;
  padding: .28rem .75rem;
  border-radius: 100px;
  background: rgba(95, 211, 184, .12);
  border: 1px solid rgba(95, 211, 184, .22);
  color: var(--accent);
  font-weight: 500;
}

/* Address block: no heading above it, so it carries slightly more weight
   than body copy to hold the section on its own. */
.contact-block {
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0;
}
.contact-block strong { color: var(--ink); }

/* --------------------------------------------------------------------------
   Card grids (people cards)
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  padding: 0; margin: 2.5rem 0 0; list-style: none;
}
.grid--wide { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.card {
  background: var(--paper-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease),
              border-color .2s var(--ease);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(95, 211, 184, .35);
}

.card__photo {
  width: 100%; aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--paper-sunk);
}
.card__body { padding: 1.1rem 1.2rem 1.3rem; }
.card__body h3 { margin-bottom: .15em; font-size: 1.05rem; }
.card__role {
  font-size: .84rem; font-weight: 600;
  color: var(--accent); text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: .6rem;
}
.card__body p { font-size: .93rem; color: var(--ink-soft); margin-bottom: .7rem; }
.card__links { display: flex; gap: .9rem; font-size: .85rem; }

/* --------------------------------------------------------------------------
   Publications
   -------------------------------------------------------------------------- */

.pub-year {
  font-size: 1.05rem; font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: .04em;
  margin: 2.6rem 0 1rem;
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--line);
}
.pub-list { list-style: none; padding: 0; margin: 0; }

.pub {
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: .3rem;
}
.pub__title { font-weight: 600; font-size: 1.02rem; line-height: 1.4; color: #fff; }
.pub__authors { font-size: .93rem; color: var(--ink-soft); }
.pub__authors strong { color: var(--ink); font-weight: 650; }
.pub__venue { font-size: .93rem; font-style: italic; color: var(--ink-soft); }
.pub__links { display: flex; flex-wrap: wrap; gap: .8rem; font-size: .85rem; margin-top: .35rem; }
.pub__links a {
  text-decoration: none;
  padding: .18rem .65rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.pub__links a:hover {
  border-color: var(--accent);
  background: rgba(95, 211, 184, .10);
}

/* Citation count, written in by tools/update_citations.py. Deliberately not
   a link and not pill-shaped, so it reads as a statistic rather than another
   button sitting in the row of links. */
.pub__cites {
  padding: .18rem 0 .18rem .2rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: help;
}
.pub__cites::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-right: .5rem;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
  opacity: .7;
}

/* --------------------------------------------------------------------------
   Media tiles + lightbox
   -------------------------------------------------------------------------- */

.tile {
  position: relative;
  display: block;
  background: #000;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease),
              border-color .2s var(--ease);
  color: inherit;
  text-decoration: none;
}
.tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(95, 211, 184, .35);
}
.tile img, .tile video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* 16:9 tile, for widescreen movies whose framing must not be cropped. */
.tile--wide img, .tile--wide video { aspect-ratio: 16 / 9; }

/* Play badge, so a still thumbnail reads unmistakably as a video. */
.tile__play {
  position: absolute; top: 0; left: 0; right: 0;
  aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  pointer-events: none;
}
.tile--wide .tile__play::before {
  content: "";
  width: 62px; height: 62px;
  border-radius: 50%;
  background: rgba(4, 16, 13, .55);
  border: 2px solid rgba(255, 255, 255, .85);
  backdrop-filter: blur(3px);
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.tile__play::after {
  content: "";
  position: absolute;
  width: 0; height: 0;
  border-left: 19px solid #fff;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  margin-left: 6px;   /* optical centring of the triangle in the circle */
}
.tile:hover .tile__play::before {
  background: rgba(95, 211, 184, .85);
  transform: scale(1.06);
}
.tile:hover .tile__play::after { border-left-color: #04100d; }

.tile__caption {
  padding: .85rem 1rem 1rem;
  background: var(--paper-tint);
  border-top: 1px solid var(--line);
}
.tile__caption h3 { font-size: .98rem; margin-bottom: .2em; }
.tile__caption p { font-size: .86rem; color: var(--ink-soft); margin: 0; }

dialog.lightbox {
  border: 0; padding: 0;
  max-width: min(94vw, 1100px);
  max-height: 92vh;
  background: transparent;
  overflow: visible;
  color: var(--ink);
}
dialog.lightbox::backdrop { background: rgba(0, 0, 0, .92); backdrop-filter: blur(5px); }
.lightbox__inner {
  background: var(--paper-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.lightbox__inner img, .lightbox__inner video { max-height: 74vh; width: auto; margin-inline: auto; }

/* Light matting for figures that are themselves mostly white — without it
   the video's white background collides with the dark dialog. Set by
   data-frame="light" on the tile. */
.lightbox__media--light {
  background: #fff;
  padding: clamp(.4rem, 1.4vw, 1rem);
}
/* Caption content is lifted from the figure, so it may be bare prose rather
   than a heading plus paragraph. Style the container itself. */
.lightbox__caption {
  padding: 1rem 1.25rem;
  color: var(--ink-soft);
  font-size: .92rem;
  line-height: 1.55;
}
.lightbox__caption h3 { margin-bottom: .2em; }
.lightbox__caption p { margin: 0; color: var(--ink-soft); font-size: .92rem; }
.lightbox__close {
  position: absolute; top: -14px; right: -14px;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); cursor: pointer;
  background: var(--paper-tint); color: var(--ink);
  font-size: 1.3rem; line-height: 1;
  box-shadow: var(--shadow-md);
}
.lightbox__close:hover { background: var(--accent); color: #04100d; }

/* --------------------------------------------------------------------------
   Interior page banner (non-hero pages)
   -------------------------------------------------------------------------- */

.page-head {
  padding: clamp(3.5rem, 8vw, 5.5rem) 0 clamp(2rem, 4vw, 3rem);
  background:
    radial-gradient(ellipse 70% 120% at 15% 0%, rgba(95,211,184,.10), transparent 70%),
    var(--paper);
  border-bottom: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--paper-sunk);
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  padding: 3rem 0 2.5rem;
  font-size: .92rem;
}
.site-footer a { color: var(--accent); }
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
}
.site-footer h2 {
  color: #fff; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .12em;
  margin-bottom: .8rem;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .4rem; }
.site-footer__legal {
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: .84rem; color: #6f8580;
}

/* --------------------------------------------------------------------------
   Scroll-reveal animation
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Respect reduced-motion preferences: freeze the hero video, drop animations
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero__media { display: none; }   /* poster image shows through instead */
  .hero {
    background: #000 url("../img/hero-poster.jpg?v=859d7693") center / cover no-repeat;
  }
}

/* Print: force legible black-on-white, hide chrome */
@media print {
  :root { --ink: #000; --ink-soft: #333; --paper: #fff; --line: #ccc; }
  body { background: #fff; color: #000; font-size: 11pt; }
  h1, h2, h3, h4, .pub__title { color: #000; }
  .site-header, .site-footer, .scroll-hint, .hero__media, .hero__scrim { display: none; }
  .hero { min-height: auto; background: none; color: #000; }
  .hero h1, .hero__summary { color: #000; text-shadow: none; }
}