/* ==========================================================================
   Genesis Research Trust
   Design system. Derived from the existing brand:
   display serif (was DidotLTStd, now Bodoni Moda), sans (was Gotham, now
   Montserrat), brand orange #F34E30. Neutrals carry a warm bias toward the
   accent rather than sitting on flat grey.
   ========================================================================== */

/* ---------- fonts, self-hosted ---------- */
@font-face { font-family: "Bodoni Moda"; src: url("../fonts/bodoni-moda-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("../fonts/bodoni-moda-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("../fonts/bodoni-moda-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("../fonts/bodoni-moda-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- tokens ---------- */
/* Values measured from the live old site on 10 Sep 2026, not invented.
   The old site has no dark mode, so neither does this one. */
:root {
  /* Two oranges, because the old site used two: the Donate pill is #F34E30
     and the slide band and its buttons are #FF4713. Kept as they were found
     rather than normalised, so the rebuild matches. */
  --orange:        #F34E30;
  --orange-bright: #FF4713;
  --orange-deep:   #D63C21;
  --band:          rgba(255, 71, 19, 0.5);   /* the slide heading band */

  /* The second accent the old site uses for section headings and their rules. */
  --teal:          #009579;

  --ink:           #2E2A28;
  --body:          #666666;                  /* GothamBook body colour */
  --muted:         rgba(0, 0, 0, 0.6);       /* nav links */
  --hairline:      #E4DEDB;

  --paper:         #FFFFFF;
  --stone:         #F6F6F6;                  /* the grey statement band */
  --stone-deep:    #EDE8E5;

  --header-h:      75px;
  --shell:         1180px;                   /* the tile rows */
  --prose:         900px;                    /* the text rows */
  --measure:       68ch;
  --gutter:        clamp(20px, 5vw, 56px);

  /* The old site is fixed-size: 56px slide headings, 45px tile labels,
     34px statement and section headings, 14px body. Those become fluid here,
     topping out at the original value, which is the responsive part. */
  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.83rem);
  --step-0:  clamp(0.9rem, 0.87rem + 0.15vw, 0.95rem);
  --step-1:  clamp(1.1rem, 1.02rem + 0.4vw, 1.3rem);
  --step-2:  clamp(1.4rem, 1.2rem + 0.9vw, 2.125rem);   /* 34px */
  --step-3:  clamp(1.7rem, 1.3rem + 1.9vw, 2.8125rem);  /* 45px */
  --step-4:  clamp(2rem, 1.4rem + 3.1vw, 3.5rem);       /* 56px */

  color-scheme: light;
}

/* ---------- reset ---------- */
/* Components below set display:grid / display:flex, which beats the browser's
   own [hidden] rule. Anything toggled by the Worker or by JS relies on this. */
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font: 400 var(--step-0)/1.7 "Montserrat", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, .display {
  font-family: "Bodoni Moda", "Didot", "Times New Roman", serif;
  color: var(--ink);
  font-weight: 500;          /* 500 not 400: Bodoni hairlines survive small sizes */
  line-height: 1.08;
  letter-spacing: -0.005em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
p  { margin: 0; }

:where(a, button, summary, input):focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 3px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- primitives ---------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.shell--prose { max-width: var(--prose); }

.eyebrow {
  font: 600 var(--step--1)/1 "Montserrat", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
}

/* The Donate pill, as it was: 20px radius, #F34E30, uppercase. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font: 600 1rem/1 "Montserrat", sans-serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .85em 2.5em;
  border-radius: 20px;
  background: var(--orange);
  color: #fff;
  border: 0;
  cursor: pointer;
  transition: background .18s ease;
}
.btn:hover { background: var(--orange-deep); }
.btn--ghost {
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--hairline);
}
.btn--ghost:hover { background: transparent; box-shadow: inset 0 0 0 1.5px var(--orange); color: var(--orange); }

/* The square buttons used on the slides, a different orange and no radius. */
.btn--square {
  border-radius: 0;
  background: var(--orange-bright);
  font-size: .875rem;
  padding: .75em 2.15em;
}
.btn--square:hover { background: var(--orange-deep); }

/* Centred section heading in teal with a rule running out either side.
   The old site did this with an h3 followed by an <hr>. */
.section-heading {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 34px);
  margin: 0 0 clamp(26px, 4vw, 44px);
}
.section-heading::before,
.section-heading::after {
  content: ""; flex: 1 1 0; height: 1px; background: var(--teal);
}
.section-heading h2, .section-heading h3 {
  font: 500 var(--step-2)/1.1 "Bodoni Moda", Georgia, serif;
  color: var(--teal); margin: 0; text-align: center; flex: 0 1 auto;
}

/* ---------- header ---------- */
.masthead {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}
.masthead__inner {
  min-height: var(--header-h);
  display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(14px, 2vw, 30px);
}
.brand { flex: none; line-height: 0; }
.brand img { width: clamp(130px, 14vw, 165px); height: auto; }

.nav { margin-inline: auto; }
.nav__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: clamp(10px, 1.4vw, 22px);
}
.nav__list a {
  font: 500 0.75rem/1 "Montserrat", sans-serif;
  letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; white-space: nowrap;
}
.nav__list a:hover, .nav__list a[aria-current="page"] { color: var(--orange); }

.burger {
  display: none; flex: none; margin-left: auto;
  width: 44px; height: 44px; padding: 10px;
  background: none; border: 0; cursor: pointer;
}
.burger span { display: block; height: 2px; background: var(--ink); margin-block: 4px; }

@media (max-width: 980px) {
  .burger { display: block; }
  .masthead__inner > .btn { order: 2; padding: .7em 1.6em; font-size: .8rem; }
  .nav {
    order: 3; flex: 1 0 100%; width: 100%; min-width: 0; margin: 0;
    display: grid; overflow: hidden;
    grid-template-rows: 0fr; transition: grid-template-rows .25s ease;
  }
  .nav[data-open="true"] { grid-template-rows: 1fr; }
  .nav__list {
    flex-direction: column; align-items: stretch; gap: 0;
    min-height: 0; padding-bottom: 10px;
  }
  .nav__list a {
    display: block; padding: .95em 0; font-size: .875rem;
    border-top: 1px solid var(--hairline);
  }
}

/* ---------- hero slideshow ---------- */
/* Six slides, auto-advancing every 6.6 seconds with no pagination dots, which
   is what the old site's slider was set to (auto_speed 6600, pagination off).
   Without JavaScript the first slide simply stays put. */
.hero {
  position: relative;
  min-height: clamp(360px, 62vh, 720px);
  background: var(--ink);
  overflow: hidden;
}
.hero__slide {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: clamp(30px, 6vw, 70px) var(--gutter);
  opacity: 0; visibility: hidden;
  transition: opacity .8s ease;
}
.hero__slide[data-active="true"] { opacity: 1; visibility: visible; }
.hero__slide img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%;
}
.hero__copy { position: relative; text-align: center; max-width: 900px; }
.hero__copy h1, .hero__copy h2 {
  /* One rectangle around the whole heading, which is what the old site had.
     An inline background with box-decoration-break gives a box per line, and
     on a two-line heading those boxes overlap and read as two stacked blocks. */
  display: inline-block;
  font: 300 var(--step-4)/1.15 "Bodoni Moda", Georgia, serif;
  color: #fff;
  background: var(--band);
  padding: clamp(14px, 2.2vw, 30px) clamp(18px, 3vw, 34px);
  margin: 0;
  text-wrap: balance;
}
.hero__actions { margin-top: clamp(20px, 3vw, 34px); }

/* only shown when JS is running, since they do nothing without it */
.hero__nav { position: absolute; inset: auto 0 18px; display: none; justify-content: center; gap: 8px; }
.hero[data-js="true"] .hero__nav { display: flex; }
.hero__dot {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.45); cursor: pointer;
}
.hero__dot[aria-current="true"] { background: #fff; }

@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
}

/* ---------- statement band ---------- */
/* Centred Bodoni at 34px on the #F6F6F6 band, in a 900px column. */
.statement { background: var(--stone); }
.statement__inner {
  max-width: var(--prose);
  padding-block: clamp(36px, 6vw, 64px);
  text-align: center;
}
.statement p {
  font: 500 var(--step-2)/1.35 "Bodoni Moda", Georgia, serif;
  color: var(--ink); margin: 0;
}

/* ---------- tiles ---------- */
/* Two across then one full width, as the old site had them: a photo with a
   centred white uppercase label and a square chevron in the bottom corner. */
.tiles {
  display: grid; gap: 6px;
  grid-template-columns: minmax(0, 1fr);
  margin-block: clamp(34px, 6vw, 60px);
}
@media (min-width: 760px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile--wide { grid-column: 1 / -1; }
}
.tile {
  position: relative; display: grid; place-items: center;
  min-height: clamp(200px, 26vw, 293px);
  overflow: hidden; text-decoration: none;
}
.tile--wide { min-height: clamp(220px, 30vw, 341px); }
.tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%;
  transition: transform .5s ease;
}
.tile:hover img { transform: scale(1.03); }
.tile__label {
  position: relative; z-index: 1;
  font: 600 var(--step-3)/1.15 "Montserrat", sans-serif;
  text-transform: uppercase; text-align: center; color: #fff;
  text-shadow: 0 1px 14px rgba(0,0,0,.45);
  padding-inline: 18px;
}
.tile__note {
  position: relative; z-index: 1;
  font: 500 var(--step-0)/1.4 "Montserrat", sans-serif; color: #fff;
  text-shadow: 0 1px 12px rgba(0,0,0,.5); margin-top: 6px; text-align: center;
}
.tile__chev {
  position: absolute; right: 0; bottom: 0; z-index: 1;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--orange-bright); color: #fff;
  font: 600 .9rem/1 "Montserrat", sans-serif;
}
.tile--teal .tile__chev { background: var(--teal); }

/* ---------- recent post ---------- */
.recent { margin-block: clamp(30px, 5vw, 52px); }
.recent__item { display: grid; gap: 10px; text-align: center; }
.recent__item h3 { font: 500 var(--step-1)/1.25 "Bodoni Moda", Georgia, serif; margin: 0; }
.recent__item h3 a { text-decoration: none; color: var(--ink); }
.recent__item h3 a:hover { color: var(--orange); }
.recent__item time {
  font: 600 var(--step--1)/1 "Montserrat", sans-serif;
  letter-spacing: .08em; color: var(--muted); text-transform: uppercase;
}
.recent__item p { color: var(--body); margin: 0; }

/* ---------- contact block ---------- */
.contact-block { background: var(--stone); }
.contact-block__inner { padding-block: clamp(40px, 6vw, 70px); }
.contact-block h2 {
  font: 500 var(--step-2)/1.2 "Bodoni Moda", Georgia, serif;
  color: var(--ink); text-align: center; margin: 0 0 clamp(24px, 4vw, 40px);
}
.cform {
  display: grid; gap: clamp(20px, 3.5vw, 44px);
  grid-template-columns: minmax(0, 1fr);
  max-width: 960px; margin-inline: auto;
}
@media (min-width: 760px) {
  .cform { grid-template-columns: 1fr 1fr; align-items: start; }
  /* The message column stretches so both columns finish level, instead of the
     three short fields on the left leaving the right side hanging. */
  .cform__col--message { display: grid; grid-template-rows: auto 1fr auto; height: 100%; }
}
.cform__col { display: grid; gap: 20px; align-content: start; }
.cform__field { display: grid; }
.cform label {
  display: block;
  font: 600 var(--step--1)/1 "Montserrat", sans-serif;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 8px;
}
.cform input, .cform textarea {
  width: 100%; font: 400 var(--step-0)/1.5 "Montserrat", sans-serif;
  color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid #CFC9C6; padding: .55em 0;
}
.cform textarea {
  min-height: 132px; height: 100%; resize: vertical;
  border: 1px solid #CFC9C6; background: var(--paper); padding: .8em 1em;
}
.cform input:focus, .cform textarea:focus { outline: none; border-color: var(--orange); }
.cform__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.cform__msg {
  grid-column: 1 / -1;
  padding: .9em 1.1em; border-left: 3px solid var(--orange);
  background: var(--paper); font-size: var(--step--1);
}
.cform__hint { grid-column: 1 / -1; font-size: var(--step--1); color: var(--muted); line-height: 1.6; }

/* ---------- notice ---------- */
.notice {
  border: 1.5px solid var(--orange);
  background: color-mix(in srgb, var(--orange) 7%, var(--paper));
  padding: clamp(22px, 3.4vw, 34px);
  display: grid; gap: 12px;
  margin-block: clamp(36px, 5vw, 60px);
}
.notice .btn { justify-self: start; }
.notice h3 { color: var(--ink); }
.notice p { max-width: var(--measure); }

/* A picture that used to be hotlinked from another site is now a credit line
   pointing at the source instead. Quiet, but findable. */
.credit {
  font-size: var(--step--1);
  color: var(--muted);
  border-left: 2px solid var(--hairline);
  padding-left: 14px;
  margin-block: 18px;
}
.credit a { color: var(--orange); }

/* Shown in place of the contact form while the trust is taking messages
   through a Google Form instead. Sits in the same column the form did. */
/* Centred, because the 'Contact us' heading above it is centred and this
   block is a single short column rather than the form's two. */
.cform__away { display: grid; gap: 16px; justify-items: center; text-align: center;
  max-width: var(--measure); margin-inline: auto; }

/* ---------- partners ---------- */
/* The three supplied logos are solid white PNGs with transparency, so they are
   invisible on white. The old site got away with it because they sat above the
   dark footer; here they go on the same brown so they read properly. */
.partners-band { background: #483729; }
.partners { padding-block: clamp(30px, 4vw, 50px); }
.partners h2 {
  font: 500 var(--step-2)/1.2 "Bodoni Moda", Georgia, serif;
  color: #fff; text-align: center; margin: 0 0 clamp(20px, 3vw, 34px);
}
.partners__row {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: clamp(26px, 5vw, 70px);
}
.partners__row a { line-height: 0; }
.partners__row img {
  height: clamp(34px, 4vw, 52px); width: auto;
  opacity: .92; transition: opacity .2s ease;
}
.partners__row a:hover img { opacity: 1; }

/* ---------- footer ---------- */
/* Dark brown with white links, as the old site has it, and carrying the
   charity and company registration numbers, which are a legal requirement. */
.foot { background: #483729; color: rgba(255,255,255,.82); }
.foot a { color: #fff; text-decoration: none; }
.foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot__inner {
  padding-block: clamp(38px, 6vw, 64px);
  display: grid; gap: clamp(28px, 4vw, 56px);
  grid-template-columns: minmax(0, 1fr);
}
/* Three columns rather than two stacks of text: links, the address, then the
   ways to reach the trust. */
@media (min-width: 700px) { .foot__inner { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .foot__inner { grid-template-columns: 1fr 1.3fr 1fr; } }
.foot h2 {
  font: 600 var(--step--1)/1 "Montserrat", sans-serif;
  letter-spacing: .14em; text-transform: uppercase;
  color: #fff; margin: 0 0 16px;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot address { font-style: normal; display: grid; gap: 2px; line-height: 1.55; }
.foot__contact { margin-top: 16px; display: grid; gap: 6px; }
.foot__news { margin-top: 18px; }
.foot__news a {
  display: inline-block;
  font: 600 var(--step--1)/1 "Montserrat", sans-serif;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .85em 1.6em; background: var(--orange); border-radius: 20px;
}
.foot__news a:hover { background: var(--orange-deep); text-decoration: none; }
.foot__legal {
  border-top: 1px solid rgba(255,255,255,.18);
  padding-block: 22px;
  font-size: var(--step--1); line-height: 1.7;
  color: rgba(255,255,255,.72);
}

/* ================= interior pages ================= */
.skip {
  position: absolute; left: -9999px;
  background: var(--orange); color: #fff; padding: .8em 1.2em; z-index: 100;
  font: 600 .9rem/1 "Montserrat", sans-serif; text-decoration: none;
}
.skip:focus { left: 12px; top: 12px; }

.page-head {
  background: var(--stone); border-bottom: 1px solid var(--hairline);
  padding-block: clamp(34px, 5vw, 64px);
}
.page-head h1 { max-width: 26ch; margin-top: 10px; }
.page__standfirst {
  margin-top: 16px; max-width: 52ch; font-size: var(--step-1);
  line-height: 1.5; color: var(--body);
}

.prose-wrap { padding-block: clamp(30px, 5vw, 56px); }
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: var(--step-2); margin-top: 2em; }
.prose h3 { margin-top: 1.7em; }
.prose p, .prose li { font-size: var(--step-0); line-height: 1.75; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .5em; }
.prose a { color: var(--orange); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--orange-deep); }
.prose img { height: auto; margin-block: 1.6em; }
.prose blockquote {
  margin: 1.6em 0; padding-left: 1.2em; border-left: 3px solid var(--orange);
  font-family: "Bodoni Moda", Didot, serif; font-size: var(--step-1); color: var(--ink);
}
.prose-foot { margin-top: clamp(28px, 4vw, 44px); }

/* byline: the E-E-A-T signal the old site never had */
.byline {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0 22px; margin-bottom: 8px;
  border-bottom: 1px solid var(--hairline);
}
.byline__name {
  font: 600 var(--step-0)/1.3 "Montserrat", sans-serif; color: var(--ink);
}
.byline__name a { text-decoration: none; }
.byline__name a:hover { color: var(--orange); }
.byline__role { font-size: var(--step--1); color: var(--muted); margin-top: 3px; }

/* video */
/* A 16:9 poster across the full 1180px row is 600px tall and swamps the
   copy it belongs to. */
.video { margin: 0 0 clamp(22px, 3vw, 34px); max-width: 720px; }
.video img { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--stone-deep); }
.video iframe { width: 100%; aspect-ratio: 16/9; border: 0; display: block; }
.video__play {
  position: relative; display: block; width: 100%; padding: 0;
  border: 0; background: none; cursor: pointer;
}
.video__icon {
  position: absolute; inset: 0; display: grid; place-content: center;
  color: #fff; font-size: 3rem; text-shadow: 0 2px 20px rgba(0,0,0,.5);
}
.video--pending figcaption {
  padding: 10px 0; font-size: var(--step--1); color: var(--muted);
}
.video--pending img { opacity: .82; border: 1px solid var(--hairline); }

/* Ask Robert archive */
.qa-search { margin-block: clamp(20px, 3vw, 34px); max-width: 620px; }
.qa-search__label {
  display: block; font: 600 var(--step--1)/1 "Montserrat", sans-serif;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.qa-search__input {
  width: 100%; padding: .95em 1.1em; font: 400 var(--step-0) "Montserrat", sans-serif;
  color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--hairline); border-radius: 4px;
}
.qa-search__input:focus { border-color: var(--orange); outline: none; }
.qa-search__count { margin-top: 10px; font-size: var(--step--1); color: var(--muted); }

.qa-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.qa-item { border-bottom: 1px solid var(--hairline); }
.qa-item a {
  display: grid; gap: 4px; padding: 1.05em 0; text-decoration: none;
}
.qa-item a:hover .qa-item__q { color: var(--orange); }
.qa-item__q {
  font: 500 var(--step-1)/1.35 "Bodoni Moda", Didot, serif; color: var(--ink);
}
.qa-item__x { font-size: var(--step--1); color: var(--muted); line-height: 1.55; }
.qa-empty { padding: 2em 0; color: var(--muted); }

/* news / stories cards */
.card-row {
  list-style: none; margin: clamp(24px,4vw,44px) 0 0; padding: 0;
  display: grid; gap: clamp(14px, 2vw, 22px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.card-row__item a {
  display: grid; gap: 8px; height: 100%; padding: clamp(18px,2.4vw,26px);
  text-decoration: none; background: var(--stone);
  border: 1px solid var(--hairline);
  transition: border-color .18s ease, transform .18s ease;
}
.card-row__item a:hover { border-color: var(--orange); transform: translateY(-2px); }
.card-row__item h3 { font-size: var(--step-1); }
.card-row__item p { font-size: var(--step--1); color: var(--body); line-height: 1.6; }
.card-row__item time {
  font: 600 var(--step--1)/1 "Montserrat", sans-serif;
  letter-spacing: .08em; color: var(--muted); margin-top: auto;
}

/* ================= donation form ================= */
/* Hidden until the Worker confirms donations are live. The [hidden] attribute
   is honoured by the global reset, so no JS is needed to keep it closed. */
.give {
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: var(--paper);
  padding: clamp(22px, 4vw, 44px);
  margin-block: clamp(28px, 5vw, 56px);
  max-width: 720px;
}
.give { scroll-margin-top: 96px; }
.give__title { font-size: var(--step-2); margin: .2em 0 1.2em; }
.give__group { border: 0; padding: 0; margin: 0 0 clamp(22px, 3vw, 32px); }
.give__group legend {
  font: 600 var(--step--1)/1 "Montserrat", sans-serif;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); padding: 0; margin-bottom: 12px;
}
.give__chips, .give__seg { display: flex; flex-wrap: wrap; gap: 10px; }
.give__chip {
  font: 600 var(--step--1)/1 "Montserrat", sans-serif;
  letter-spacing: .06em;
  padding: .95em 1.5em;
  border: 1.5px solid var(--hairline);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.give__chip:hover { border-color: var(--orange); }
.give__chip[aria-pressed="true"] {
  background: var(--orange); border-color: var(--orange); color: #fff;
}
.give__chip:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

.give__label {
  display: block; margin: 20px 0 8px;
  font: 600 var(--step--1)/1 "Montserrat", sans-serif;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.give__money { display: flex; align-items: stretch; max-width: 240px; }
.give__money > span {
  display: grid; place-items: center; width: 3ch;
  border: 1.5px solid var(--hairline); border-right: 0; border-radius: 4px 0 0 4px;
  background: var(--stone); color: var(--muted); font-weight: 600;
}
.give__money input { border-radius: 0 4px 4px 0; }
.give input[type="text"] {
  width: 100%; max-width: 420px;
  padding: .85em 1em;
  font: 400 var(--step-0)/1.4 "Montserrat", sans-serif;
  color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--hairline); border-radius: 4px;
}
.give input[type="text"]:focus { border-color: var(--orange); outline: none; }

.give__check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.give__check input { width: 1.15rem; height: 1.15rem; margin-top: .18rem; accent-color: var(--orange); flex: none; }
.give__check span { font-size: var(--step-0); color: var(--ink); }
.give__declaration {
  font-size: var(--step--1); line-height: 1.6; color: var(--muted);
  margin-top: 12px; padding-left: 14px; border-left: 2px solid var(--hairline);
}
.give__hint { font-size: var(--step--1); color: var(--muted); margin-top: 12px; line-height: 1.6; }
.give__actions {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding-top: clamp(8px, 2vw, 16px); border-top: 1px solid var(--hairline);
}
.give__total {
  font: 600 var(--step-0)/1 "Montserrat", sans-serif;
  letter-spacing: .06em; color: var(--ink);
}
.give__error {
  margin-top: 16px; padding: .9em 1.1em;
  border-left: 3px solid var(--orange); background: var(--stone);
  font-size: var(--step--1); color: var(--ink);
}
.give__row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.give[aria-busy="true"] { opacity: .6; pointer-events: none; }

@media (max-width: 520px) {
  .give__chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .give__chip { padding: .95em 1em; }
  .give__actions > .btn { width: 100%; }
}

/* ================= research programme ================= */
/* The old page kept its history in a Divi accordion, eight panels by decade.
   Stripping the shortcodes lost the panels, so the whole thing arrived as one
   column of text with portraits floated into it at nine different sizes. These
   rules put the decades back as labelled sections and give every portrait the
   same width and the same 3:4 crop. */

.milestones { padding-block: clamp(28px, 4vw, 52px); }

.era-nav {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: clamp(20px, 3vw, 32px) 0 clamp(28px, 4vw, 44px);
  justify-content: center;
}
.era-nav a {
  font: 600 var(--step--1)/1 "Montserrat", sans-serif;
  letter-spacing: .06em;
  padding: 9px 15px; text-decoration: none; color: var(--ink);
  border: 1px solid var(--hairline); background: var(--paper);
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.era-nav a:hover { border-color: var(--teal); color: var(--teal); }

.timeline { display: grid; gap: clamp(30px, 4vw, 52px); }

.era { scroll-margin-top: calc(var(--header-h) + 16px); }
.era__decade {
  display: block;
  font: 500 var(--step-2)/1 "Bodoni Moda", Georgia, serif;
  color: var(--teal);
}
.era__title {
  font: 600 var(--step-1)/1.35 "Montserrat", sans-serif;
  color: var(--ink); margin: 0 0 1em;
  max-width: 60ch;
}
.era__body { max-width: 68ch; }
.era__body > * + * { margin-top: 1.1em; }
.era__body p { font-size: var(--step-0); line-height: 1.75; }
.era__body a { color: var(--orange); text-decoration: underline; text-underline-offset: 2px; }
.era__body em { font-style: italic; color: var(--body); }

/* One width, one aspect ratio, whichever side the sentence says. The old page
   had these anywhere from 90x120 to 169x224, which is what made the column
   look ragged. */
.portrait {
  width: 132px; aspect-ratio: 3 / 4; height: auto;
  object-fit: cover; object-position: 50% 20%;
  background: var(--stone);
  border: 1px solid var(--hairline);
  margin-block: 4px 14px;
}
.portrait--left  { float: left;  margin-right: clamp(16px, 2vw, 24px); }
.portrait--right { float: right; margin-left:  clamp(16px, 2vw, 24px); }
.era__body::after { content: ""; display: block; clear: both; }

.era__figure {
  display: block; width: auto; height: auto; max-width: 100%;
  margin-block: 1.6em; border: 1px solid var(--hairline);
}

@media (min-width: 860px) {
  .era {
    display: grid; grid-template-columns: 150px minmax(0, 1fr);
    gap: clamp(24px, 3vw, 44px);
  }
  .era__marker {
    border-top: 2px solid var(--teal);
    padding-top: 10px;
    position: sticky; top: calc(var(--header-h) + 20px);
    align-self: start;
  }
}
@media (max-width: 859px) {
  .era__marker { border-top: 2px solid var(--teal); padding-top: 8px; margin-bottom: 6px; }
  .portrait { width: 112px; }
}
/* display:contents means the wrapper is invisible to layout on a wide screen,
   so the portraits inside it float exactly as they did before. */
.portraits { display: contents; }

/* On a phone there is not enough width to wrap text around a portrait: two of
   them side by side leave a four-word column. Below this width they stop
   floating and sit above the paragraph as a row, in the left-to-right order
   the copy refers to. */
@media (max-width: 640px) {
  .portraits {
    display: flex; flex-wrap: wrap; gap: 10px; max-width: 100%;
    margin: 0 0 14px;
  }
  .portrait, .portrait--left, .portrait--right {
    float: none; display: block; margin: 0;
    flex: 0 1 150px; min-width: 0; width: auto; max-width: 100%;
  }
}

/* ---- the eleven Principal Investigators ---- */
.people-band {
  background: var(--stone);
  padding-block: clamp(36px, 6vw, 72px);
  margin-top: clamp(36px, 6vw, 72px);
}
.people__lead {
  max-width: 60ch; margin: clamp(14px, 2vw, 20px) auto clamp(26px, 4vw, 40px);
  text-align: center; font-size: var(--step-0); line-height: 1.7;
}
.people {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(16px, 2.4vw, 28px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
}
.person { margin: 0; text-align: center; }
.person img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 25%;
  background: var(--stone-deep);
}
.person__name {
  font: 600 var(--step--1)/1.4 "Montserrat", sans-serif;
  color: var(--ink); margin: 12px 0 0;
  /* Two names run to two lines. A floor keeps every cell the same height so
     the rows below do not shift. */
  min-height: 2.8em;
}

.research-support { padding-block: clamp(32px, 5vw, 60px); }
.research-support h2 { font-size: var(--step-2); }
.research-support p { font-size: var(--step-0); line-height: 1.75; margin-top: 1em; }
.research-support a:not(.btn) { color: var(--orange); text-decoration: underline; }

/* ================= news cards with a picture ================= */
/* One image per story, cropped 3:2 in the build so no card is taller than its
   neighbour. A story with no image of its own keeps the plain card. */
.card-row__item--media a { padding: 0; gap: 0; grid-template-rows: auto 1fr; }
.card__media { display: block; overflow: hidden; background: var(--stone-deep); }
.card__media img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover;
}
.card__text {
  display: grid; gap: 8px; height: 100%;
  padding: clamp(16px, 2.2vw, 24px);
}
.card-row__item--media a:hover .card__media img { opacity: .92; }

.subjects { padding-top: clamp(28px, 4vw, 48px); }
.subjects .card-row { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }

/* A story with no picture of its own. Keeps the row even without borrowing a
   photograph from somewhere it does not belong. */
.card__media--mark {
  display: grid; place-items: center;
  aspect-ratio: 3 / 2; background: var(--stone-deep);
}
.card__media--mark img {
  width: 58%; max-width: 200px; height: auto;
  aspect-ratio: auto; object-fit: contain; opacity: .45;
}