/* ============================================================
   The CityBuilders — Warri, Delta State
   Palette taken from the foundation's own graphics: warm bone,
   olive khaki and a deeper olive from the border pattern, with muted
   gold from the fabric. Desaturated throughout.
   ============================================================ */

:root {
  /* Read off the foundation's own graphics: a warm olive-khaki duotone,
     a deeper olive from the border pattern, muted gold from the fabric.
     Everything desaturated — nothing here is a bright green. */
  --bone:   #F2EEE4;
  --linen:  #E4DFD1;
  --khaki:  #6E6A54;
  --moss:   #465034;
  --bark:   #2A2A22;
  --taupe:  #9A9280;
  --gold:   #C6A02E;
  --ink:    #23211A;

  --ink-76: rgba(35, 33, 26, 0.76);
  --ink-68: rgba(35, 33, 26, 0.68);
  --ink-58: rgba(35, 33, 26, 0.68);
  --ink-42: rgba(35, 33, 26, 0.50);
  --ink-24: rgba(35, 33, 26, 0.24);
  --ink-14: rgba(35, 33, 26, 0.14);
  --ink-08: rgba(35, 33, 26, 0.08);
  --ink-05: rgba(35, 33, 26, 0.05);

  --bone-82: rgba(242, 238, 228, 0.82);
  --bone-68: rgba(242, 238, 228, 0.68);
  --bone-52: rgba(242, 238, 228, 0.52);
  --bone-30: rgba(242, 238, 228, 0.30);
  --bone-16: rgba(242, 238, 228, 0.16);

  --sans:  "Instrument Sans", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;

  --gutter: clamp(18px, 4.4vw, 68px);
  --measure: 1560px;
  --chapter: clamp(70px, 11vh, 150px);
  --mast: 76px;

  /* expo-out: fast to start, long soft landing — the one that reads as smooth */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease:      cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-mask: cubic-bezier(0.16, 0.84, 0.2, 1);
  --dur:       0.68s;
  --dur-slow:  1s;
}

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

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--olive); color: var(--bone); }

:focus-visible { outline: 2px solid var(--moss); outline-offset: 3px; }
.is-dark :focus-visible { outline-color: var(--gold); }

.u-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: var(--gutter); top: -60px; z-index: 300;
  background: var(--ink); color: var(--bone);
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 14px 18px;
  transition: top 0.18s ease;
}
.skip:focus { top: 12px; }

/* ---------- Motion ---------- */

@keyframes maskUp { from { clip-path: inset(108% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes rise   { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes ruleGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes frameOpen { from { clip-path: inset(0 14% 0 14%); } to { clip-path: inset(0 0 0 0); } }
@keyframes drawIn   { from { stroke-dashoffset: 760; } to { stroke-dashoffset: 0; } }
@keyframes liftIn   { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } }
@keyframes wipeUp   { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes settleIn { from { transform: scale(1.06); } to { transform: none; } }

/* --- scroll-linked transitions ---------------------------------
   Each section hands off to the next: its ground image drifts against
   the scroll, its contents lift in, its photographs wipe open. All of
   it is driven by scroll position, not time, so it tracks the reader. */
@keyframes drift   { from { transform: translate3d(0,-7%,0) scale(1.16); } to { transform: translate3d(0,7%,0) scale(1.16); } }
@keyframes liftIn  { from { transform: translate3d(0,54px,0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes wipeUp  { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes settleIn{ from { transform: scale(1.09); } to { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

.mask { overflow: hidden; display: block; }
.mask > span { display: block; }

/* Reveals are scroll-linked, and every one is behind @supports.

   Without that guard a browser lacking animation-timeline ignores the
   property but still runs the animation — on the document timeline, so the
   whole page fires at once on load and anything below the fold has finished
   before it is seen. That was the old bug.

   Nothing is hidden by a resting state outside the guard, so a browser that
   cannot animate simply shows the page. Progress tracks scroll position
   exactly, which is what makes it feel smooth; the timing function stays
   linear so it follows the finger rather than lagging behind it. */

@supports (animation-timeline: view()) {
  @media not (prefers-reduced-motion: reduce) {

    .lift, .stagger > * {
      animation: liftIn linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 75%;
    }
    /* a group's children trail one another slightly */
    .stagger > *:nth-child(2) { animation-range: entry 12% entry 82%; }
    .stagger > *:nth-child(3) { animation-range: entry 19% entry 89%; }
    .stagger > *:nth-child(4) { animation-range: entry 24% entry 94%; }
    .stagger > *:nth-child(5) { animation-range: entry 28% entry 98%; }
    .stagger > *:nth-child(6) { animation-range: entry 32% entry 100%; }

    .reveal {
      animation: liftIn linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 70%;
    }

    .wipe {
      animation: wipeUp linear both;
      animation-timeline: view();
      animation-range: entry 2% entry 80%;
    }

    .settle {
      animation: settleIn linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 28%;
    }

    .open {
      animation: frameOpen linear both;
      animation-timeline: view();
      animation-range: entry 2% entry 78%;
    }

    .mask > span {
      animation: maskUp linear both;
      animation-timeline: view();
      animation-range: entry 8% entry 82%;
    }

    .rule {
      animation: ruleGrow linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 70%;
    }

    .aside-note svg ellipse {
      stroke-dasharray: 760;
      animation: drawIn linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }
  }
}

/* ---------- The vertical rules that run the whole page ---------- */

.page {
  position: relative;
  max-width: 100%;
  overflow-x: clip;
}
.page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to right,
    var(--ink-05) 0 1px,
    transparent 1px calc(100% / 6)
  );
  background-size: 100% 100%;
}
.masthead, main, .footer { position: relative; z-index: 1; }

/* ---------- Primitives ---------- */

.chapter {
  padding: var(--chapter) var(--gutter);
  position: relative;
}
.chapter--linen  { background: var(--linen); }
.chapter--olive  { background: var(--olive);  color: var(--bone); }
.chapter--bark { background: var(--bark); color: var(--bone); }
.wrap { max-width: var(--measure); margin: 0 auto; }

.kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-58);
}
.is-dark .kicker { color: var(--bone-52); }
.kicker--moss { color: var(--moss); }

/* The serif italic aside, ringed like a margin note */
.aside-note {
  position: relative;
  display: inline-block;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17px, 1.7vw, 24px);
  color: var(--khaki);
  padding: 14px 30px;
}
.is-dark .aside-note { color: var(--taupe); }
.aside-note svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
}
.aside-note svg ellipse {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.5;
}

/* One display face everywhere: Instrument Serif, set in caps. A page head, a
   chapter head and the hero differ only in size — nothing switches family. */
.display {
  font-family: var(--serif);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1.02;
  font-size: clamp(28px, 4.6vw, 76px);
  text-wrap: balance;
}
.display--xl { font-size: clamp(31px, 5.4vw, 92px); line-height: 0.99; }
.display--sm { font-size: clamp(23px, 3.1vw, 47px); line-height: 1.06; }
.fade-tail {
  background: linear-gradient(to bottom, var(--ink) 0%, var(--ink) 42%, var(--ink-42) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.is-dark .fade-tail {
  background: linear-gradient(to bottom, var(--bone) 0%, var(--bone) 42%, var(--bone-52) 100%);
  -webkit-background-clip: text;
          background-clip: text;
}

.say {
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.62;
  color: var(--ink-76);
  text-wrap: pretty;
}
.is-dark .say { color: var(--bone-68); }
.say--lead { font-size: clamp(17px, 1.6vw, 24px); line-height: 1.5; color: var(--ink); }
.is-dark .say--lead { color: var(--bone); }

.prose { display: grid; gap: 18px; }

.note { font-size: 12px; line-height: 1.7; letter-spacing: 0.02em; color: var(--ink-58); }
.is-dark .note { color: var(--bone-52); }

.rule {
  display: block; height: 1px; background: var(--ink-14);
  transform-origin: left;
}
.is-dark .rule { background: var(--bone-16); }

/* A centred statement, the way a letter is set */
.statement {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.statement__quote {
  font-family: var(--serif);
  font-size: clamp(21px, 2.5vw, 36px);
  line-height: 1.34;
  color: var(--ink);
}
.is-dark .statement__quote { color: var(--bone); }
.statement__by { margin-top: clamp(22px, 3vh, 34px); }

.btn {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  border: 0;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn--olive { background: var(--olive); color: var(--bone); }
.btn--olive:hover { background: var(--ink); }
.btn--moss { background: var(--moss); color: var(--bone); }
.btn--moss:hover { background: var(--ink); }
.btn--line { border: 1px solid var(--ink-24); color: var(--ink); }
.btn--line:hover { border-color: var(--ink); background: var(--ink); color: var(--bone); }
.btn--light { border: 1px solid var(--bone-30); color: var(--bone); }
.btn--light:hover { background: var(--bone); color: var(--ink); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--moss);
}
.link-arrow:hover { color: var(--ink); }
.is-dark .link-arrow { color: var(--gold); }
.is-dark .link-arrow:hover { color: var(--bone); }
.link-arrow span { transition: transform 0.3s var(--ease); }
.link-arrow:hover span { transform: translateX(5px); }

/* ============================================================
   Masthead
   ============================================================ */

.masthead {
  position: sticky; top: 0; z-index: 60;
  background: rgba(244, 241, 232, 0.94);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--ink-08);
}
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 13px var(--gutter);
  max-width: var(--measure); margin: 0 auto;
}
.masthead__brand { display: flex; align-items: center; gap: 11px; }
.masthead__brand img { width: 30px; height: auto; }
.masthead__wordmark {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; line-height: 1.3;
}
.masthead__nav ul { display: flex; align-items: center; gap: clamp(12px, 1.7vw, 28px); }
.masthead__nav a {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-68);
  padding: 5px 0; border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.masthead__nav a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.masthead__nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--moss); }
.masthead__give {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--moss); color: var(--bone);
  padding: 12px 22px; min-height: 44px;
  display: inline-flex; align-items: center;
  white-space: nowrap;
  transition: background 0.2s ease;
}
.masthead__give:hover { background: var(--ink); }

@media (max-width: 1080px) {
  :root { --mast: 106px; }
  .masthead__inner { flex-wrap: wrap; gap: 12px; row-gap: 0; padding-bottom: 0; }
  .masthead__nav {
    order: 3; width: 100%;
    overflow-x: auto; scrollbar-width: none;
    border-top: 1px solid var(--ink-08);
  }
  .masthead__nav::-webkit-scrollbar { display: none; }
  .masthead__nav ul { flex-wrap: nowrap; gap: 20px; }
  .masthead__nav a { min-height: 44px; display: inline-flex; align-items: center; border-bottom: 0; }
  .masthead__nav a:hover, .masthead__nav a[aria-current="page"] { border-bottom: 0; }
  .masthead__nav a[aria-current="page"] { color: var(--moss); }
}

/* The standing invitation, pinned to the edge */
.sidetab {
  position: fixed;
  right: 0; top: 50%;
  transform: translateY(-50%);
  z-index: 55;
  writing-mode: vertical-rl;
  background: var(--moss); color: var(--bone);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 22px 13px;
  display: flex; align-items: center; gap: 12px;
  transition: background 0.25s ease;
}
.sidetab:hover { background: var(--ink); }
@media (max-width: 1080px) { .sidetab { display: none; } }

/* ============================================================
   Hero
   ============================================================ */

.hero {
  position: relative;
  min-height: min(calc(100svh - var(--mast)), 940px);
  display: grid;
  grid-template-rows: 1fr auto;
  padding: clamp(20px, 3.2vh, 50px) var(--gutter) clamp(14px, 2vh, 26px);
  overflow: hidden;
}
.hero__inner {
  position: relative;
  max-width: var(--measure); margin: 0 auto; width: 100%;
  min-height: 0;
  display: grid; align-content: center;
}
.hero__type { position: relative; z-index: 2; }
.hero__eyebrow { animation: fade 0.9s ease-out 0.1s both; }
.hero__headline {
  margin-top: clamp(10px, 1.6vh, 22px);
  font-family: var(--serif);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(26px, 5vw, 88px);
  line-height: 1.02;
  letter-spacing: 0.005em;
  /* the hard breaks in the markup set the lines; this only stops a very wide
     screen running the type under the cutout */
  max-width: min(100%, 1180px);
}
.hero__headline span.line { display: block; overflow: hidden; }
.hero__headline span.line > span { display: block; animation: maskUp 1s var(--ease-mask) both; }
.hero__headline .a { color: var(--ink-42); animation-delay: 0.14s; }
.hero__headline .b { animation-delay: 0.3s; }
.hero__say {
  max-width: 38ch;
  margin-top: clamp(14px, 2.2vh, 30px);
  animation: rise 0.9s ease-out 0.58s both;
}
.hero__actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: clamp(18px, 2.8vh, 38px);
  animation: rise 0.9s ease-out 0.7s both;
}
.hero__cutout {
  position: absolute; z-index: 1;
  right: clamp(-30px, -1vw, 0px); bottom: 0;
  width: clamp(260px, 33vw, 570px);
  height: auto; pointer-events: none;
  animation: rise 1.3s var(--ease) 0.24s both;
}
.hero__foot { position: relative; z-index: 3; max-width: var(--measure); margin: 0 auto; width: 100%; }
.hero__foot .rule { --d: 900ms; }
.hero__foot-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 20px; padding-top: 12px;
  animation: fade 1s ease-out 1.1s both;
}

@media (max-width: 940px) {
  .hero__inner { display: flex; flex-direction: column; }
  .hero__type { order: 1; flex: 0 0 auto; }
  .hero__headline { max-width: none; }
  .hero__cutout {
    order: 2; position: relative; right: auto; bottom: auto;
    flex: 1 1 auto; min-height: 0;
    width: min(112%, 560px); max-width: none; margin-left: -6%;
    height: 100%;
    margin-top: clamp(10px, 2vh, 26px);
    object-fit: contain; object-position: bottom center;
    animation: rise 1.1s var(--ease) 0.3s both;
  }
  .hero__foot-row { flex-direction: column; gap: 4px; }
}

/* Page heads on the inner pages */
.pagehead { padding: clamp(50px, 8vh, 110px) var(--gutter) clamp(38px, 6vh, 76px); }
.pagehead__inner { max-width: var(--measure); margin: 0 auto; }
.pagehead h1 { margin-top: 16px; max-width: 24ch; }
.pagehead__say { max-width: 46ch; margin-top: clamp(18px, 2.6vh, 30px); }

/* ============================================================
   Editorial blocks
   ============================================================ */

/* two columns: statement left, prose right */
.split {
  max-width: var(--measure); margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 96px);
  align-items: start;
}
.split--even { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.split__title { max-width: 15ch; margin-top: 16px; }
.split__body { max-width: 46ch; }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* a pair of definitions, e.g. vision and mission */
.pillars {
  max-width: var(--measure); margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(26px, 4vw, 72px);
}
.pillar { padding-top: 24px; border-top: 2px solid var(--moss); }
.pillar--muted { border-top-color: var(--ink-24); }
.is-dark .pillar--muted { border-top-color: var(--bone-30); }
.pillar h2, .pillar h3 {
  font-size: clamp(21px, 2.2vw, 31px);
  font-weight: 600; letter-spacing: -0.022em;
  margin-bottom: 13px;
}
.pillar p { max-width: 40ch; }

/* numbered programme entries */
.entries { max-width: var(--measure); margin: 0 auto; border-top: 1px solid var(--ink-24); }
.is-dark .entries { border-top-color: var(--bone-30); }
.entry {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(14px, 3vw, 52px);
  align-items: start;
  padding: clamp(26px, 4.4vh, 52px) 0;
  border-bottom: 1px solid var(--ink-14);
}
.is-dark .entry { border-bottom-color: var(--bone-16); }
.entry__no {
  font-family: var(--serif); font-size: 21px;
  color: var(--moss); line-height: 1;
}
.is-dark .entry__no { color: var(--gold); }
.entry h3 {
  font-size: clamp(22px, 2.5vw, 36px);
  font-weight: 600; letter-spacing: -0.025em; line-height: 1.08;
}
.entry p { max-width: 46ch; }
@media (max-width: 760px) {
  .entry { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* timeline for the story */
.timeline { max-width: var(--measure); margin: 0 auto; border-top: 1px solid var(--ink-24); }
.tl-row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: clamp(16px, 4vw, 64px);
  padding: clamp(22px, 3.4vh, 40px) 0;
  border-bottom: 1px solid var(--ink-14);
  align-items: baseline;
}
.tl-row__when {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 34px);
  color: var(--khaki);
  line-height: 1;
}
.tl-row__what { max-width: 62ch; }
@media (max-width: 700px) { .tl-row { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

/* figures */
.figures {
  max-width: var(--measure); margin: 0 auto;
  display: grid;
  /* Six figures. Fixed tracks rather than auto-fit, so the rows always come
     out even instead of leaving one orphan on the last line. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 3vw, 54px) clamp(22px, 3vw, 54px);
  padding-top: clamp(22px, 3vh, 34px);
  border-top: 1px solid var(--ink-24);
}
@media (max-width: 900px) { .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .figures { grid-template-columns: minmax(0, 1fr); } }
.is-dark .figures { border-top-color: var(--bone-30); }
.fig { display: grid; gap: 12px; align-content: start; }
.fig__n {
  font-weight: 600;
  font-size: clamp(44px, 5.6vw, 92px);
  letter-spacing: -0.045em; line-height: 0.88;
  font-variant-numeric: lining-nums tabular-nums;
}
.fig__label { font-size: clamp(13px, 1.05vw, 15px); line-height: 1.5; color: var(--ink-68); max-width: 26ch; }
.is-dark .fig__label { color: var(--bone-68); }

/* a full-bleed photographic band */
.band { position: relative; overflow: hidden; background: var(--bark); }
.band__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band__veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(42,42,34,0.9) 0%, rgba(42,42,34,0.35) 55%, rgba(42,42,34,0.55) 100%); }
.band__inner {
  position: relative;
  padding: clamp(60px, 12vh, 150px) var(--gutter);
  max-width: var(--measure); margin: 0 auto; width: 100%;
  color: var(--bone);
}

/* image + caption plate */
.plate img { width: 100%; height: auto; object-fit: cover; }
.plate figcaption { margin-top: 13px; }

/* portrait, for the director */
.person {
  max-width: var(--measure); margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  gap: clamp(26px, 5vw, 84px);
  align-items: end;
}
.person__shot img { width: 100%; height: auto; }
.person__who { padding-bottom: clamp(0px, 2vw, 28px); }
.person__role { margin-top: 14px; }
.person__name {
  font-size: clamp(24px, 2.9vw, 44px);
  font-weight: 600; letter-spacing: -0.025em;
  margin-top: 8px;
}
.person__bio { max-width: 42ch; margin-top: clamp(16px, 2.4vh, 26px); }
@media (max-width: 860px) {
  .person { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .person__shot { width: min(78%, 360px); }
}

/* ============================================================
   Media — the films
   ============================================================ */

.reel { width: calc(100% + var(--gutter) * 2); margin-left: calc(var(--gutter) * -1); }
.reel--top { margin-top: clamp(30px, 5vh, 66px); }
.reel__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.reel__track::-webkit-scrollbar { display: none; }
.reel__slide {
  flex: 0 0 100%; min-width: 0;
  scroll-snap-align: start;
  background: #000;
  height: clamp(215px, 49vw, 690px);
}
.reel__video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.reel__video p { color: var(--bone); padding: 20px; }
.reel__video a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

.reel__bar {
  max-width: var(--measure); margin: 0 auto;
  padding: 16px var(--gutter) 0;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.reel__caption { display: flex; align-items: baseline; gap: 14px; }
.reel__title { font-size: clamp(15px, 1.3vw, 19px); letter-spacing: -0.01em; }
.reel__controls { display: flex; align-items: center; gap: 12px; }
.reel__count { font-size: 12px; letter-spacing: 0.12em; color: var(--bone-52); min-width: 4ch; text-align: center; }
.reel__arrow {
  width: 46px; height: 46px;
  border: 1px solid var(--bone-30); background: transparent; color: var(--bone);
  cursor: pointer; font-size: 15px;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.reel__arrow:hover { background: var(--bone); color: var(--ink); }
.reel__arrow[disabled] { opacity: 0.3; cursor: default; }
.reel__arrow[disabled]:hover { background: transparent; color: var(--bone); }
.reel__foot { max-width: var(--measure); margin: 10px auto 0; padding: 0 var(--gutter); }

/* a still that links through to the media page */
.watch {
  max-width: var(--measure); margin: 0 auto;
  display: block; position: relative; overflow: hidden;
}
.watch img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; transition: transform 1.2s var(--ease); }
.watch:hover img { transform: scale(1.02); }
.watch__veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(42,42,34,0.82) 0%, rgba(42,42,34,0.12) 60%); }
.watch__label {
  position: absolute; left: clamp(18px, 4vw, 54px); bottom: clamp(18px, 4vw, 48px);
  display: flex; align-items: center; gap: 17px; color: var(--bone);
}
.watch__ring {
  width: clamp(52px, 5vw, 74px); height: clamp(52px, 5vw, 74px);
  border: 1px solid var(--bone-30); border-radius: 50%;
  display: grid; place-items: center; position: relative;
}
.watch__ring::after {
  content: ""; position: absolute; inset: 0;
  border: 1px solid var(--bone); border-radius: 50%;
  transform: scale(0.82); opacity: 0;
  transition: transform 0.55s var(--ease), opacity 0.55s ease;
}
.watch:hover .watch__ring::after { transform: scale(1.16); opacity: 1; }
.watch__ring i {
  width: 0; height: 0; font-style: normal;
  border-left: 11px solid var(--bone);
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
  margin-left: 4px;
}
.watch__text { font-size: 12px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; }

/* gallery on the media page */
.gallery {
  max-width: var(--measure); margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(10px, 1.4vw, 20px);
  grid-auto-rows: clamp(150px, 20vw, 300px);
}
.gallery figure { overflow: hidden; }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.g-a { grid-column: span 5; grid-row: span 2; }
.g-b { grid-column: span 4; }
.g-c { grid-column: span 3; }
.g-d { grid-column: span 3; }
.g-e { grid-column: span 4; }
.g-f { grid-column: span 5; }
@media (max-width: 760px) {
  .gallery { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 30vw; }
  .g-a { grid-column: span 6; grid-row: span 1; }
  .g-b, .g-c, .g-d, .g-e, .g-f { grid-column: span 3; }
}

/* ============================================================
   Account details
   ============================================================ */

.account { background: var(--bone); border: 1px solid var(--ink-14); padding: clamp(22px, 3vw, 38px); }
.account__head { padding-bottom: 16px; border-bottom: 1px solid var(--ink-14); }
.account__row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--ink-08);
}
.account__key { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-58); }
.account__val { margin-top: 7px; font-size: clamp(16px, 1.4vw, 20px); letter-spacing: -0.01em; }
.account__val--num { font-size: clamp(20px, 2vw, 27px); letter-spacing: 0.03em; font-variant-numeric: tabular-nums; }
.account__copy {
  flex: 0 0 auto; border: 1px solid var(--ink-24); background: transparent;
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 12px 15px; min-height: 44px; cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.account__copy:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.account__status { min-height: 20px; margin-top: 14px; font-size: 12px; color: var(--moss); }

.tiers { margin-top: clamp(24px, 4vh, 44px); border-top: 1px solid var(--ink-24); }
.tiers li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--ink-08);
}
.tiers b { font-size: clamp(18px, 1.9vw, 25px); font-weight: 500; letter-spacing: -0.02em; }
.tiers span { font-size: 13px; color: var(--ink-68); text-align: right; }

.contacts { display: grid; gap: 4px; margin-top: 20px; }
.contact-link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--moss);
  text-decoration: underline; text-underline-offset: 4px;
  word-break: break-word;
}
.contact-link:hover { color: var(--ink); }
.is-dark .contact-link { color: var(--gold); }
.is-dark .contact-link:hover { color: var(--bone); }

/* ============================================================
   Footer
   ============================================================ */

.footer { background: var(--bark); color: var(--bone); padding: clamp(52px, 8vh, 100px) var(--gutter) 26px; }
.footer__grid {
  max-width: var(--measure); margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(28px, 4vw, 66px);
  padding-bottom: clamp(32px, 5vh, 56px);
  border-bottom: 1px solid var(--bone-16);
}
.footer__logo { width: 38px; height: auto; }
.footer__blurb { margin-top: 18px; font-size: 15px; line-height: 1.6; color: var(--bone-68); max-width: 30ch; }
.footer__h { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bone-52); }
.footer__list { margin-top: 18px; display: grid; gap: 12px; }
.footer__list li, .footer__list a { font-size: 15px; line-height: 1.55; color: var(--bone-82); }
.footer__list a:hover { color: var(--gold); }
.footer__list a.wrapish { word-break: break-word; }
.footer__form { margin-top: 18px; display: flex; gap: 8px; flex-wrap: wrap; }
.footer__form input {
  flex: 1 1 170px; min-width: 0; background: transparent;
  border: 1px solid var(--bone-30); color: var(--bone);
  font-family: var(--sans); font-size: 14px; padding: 14px; min-height: 48px;
}
.footer__form input::placeholder { color: var(--bone-52); }
.footer__form button {
  background: var(--bone); color: var(--ink); border: 0;
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 14px 18px; min-height: 48px; cursor: pointer;
}
.footer__form button:hover { background: var(--gold); }
.footer__status { margin-top: 12px; font-size: 12px; line-height: 1.65; color: var(--bone-68); max-width: 32ch; }
.footer__colophon {
  max-width: var(--measure); margin: 0 auto;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-top: 20px;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-52);
}

@media (hover: none) {
  .footer__list a, .contact-link { min-height: 44px; display: inline-flex; align-items: center; }
  .footer__list { gap: 4px; }
}


/* ============================================================
   Section transitions
   ============================================================ */

/* Parallax is the one effect that genuinely needs a scroll timeline — it is
   continuous, not a one-shot reveal. Where that is unsupported the image
   simply sits still, which is a fine outcome. */
@supports (animation-timeline: view()) {
  @media not (prefers-reduced-motion: reduce) {
    .parallax {
      animation: drift linear;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}

/* the seam between two grounds, softened */
.seam { position: relative; }
.seam::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: clamp(40px, 7vh, 96px);
  background: linear-gradient(to bottom, var(--seam-from, transparent), transparent);
  pointer-events: none;
}

/* image + text pairs, the way the reference sets them */
.duo {
  max-width: var(--measure); margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 5vw, 90px);
  align-items: center;
}
.duo--offset { align-items: start; }
.duo--offset .duo__pic { padding-top: clamp(0px, 5vw, 84px); }
.duo__pic { position: relative; overflow: hidden; }
.duo__pic img { width: 100%; height: auto; object-fit: cover; }
.duo__pic--tall img { aspect-ratio: 3 / 4; }
.duo__pic--wide img { aspect-ratio: 4 / 3; }
.duo__words { max-width: 46ch; }
.duo--flip .duo__pic { order: 2; }
@media (max-width: 860px) {
  .duo { grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 5vw, 34px); }
  .duo--flip .duo__pic { order: 0; }
  .duo--offset .duo__pic { padding-top: 0; }
}

/* a caption tucked against the frame, reference-style */
.duo__cap {
  margin-top: 13px;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(14px, 1.2vw, 17px);
  color: var(--khaki);
}
.is-dark .duo__cap { color: var(--taupe); }

/* ============================================================
   Components introduced by the reworked pages
   ============================================================ */

.chapter--bark { background: var(--bark); color: var(--bone); }

.btn--gold { background: var(--gold); color: var(--bark); }
.btn--gold:hover { background: var(--bone); color: var(--ink); }

/* three programmes, each carrying its own photograph */
.trio {
  max-width: var(--measure); margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(24px, 3.4vw, 54px);
}
.trio__item { display: grid; gap: 16px; align-content: start; }
.trio__pic { overflow: hidden; }
.trio__pic img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.trio__item h3 {
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 600; letter-spacing: -0.022em;
  padding-top: 14px; border-top: 2px solid var(--moss);
}
.trio__item p { max-width: 38ch; }

/* the ledger states, no longer borrowing the numeral style */
.entry__state {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--moss);
}
.entry__state--mid  { color: var(--ink-58); }
.entry__state--goal { color: #6B5410; }
.is-dark .entry__state--mid  { color: var(--bone-52); }
.is-dark .entry__state--goal { color: var(--gold); }

/* what the school hopes to give — a plain list, set wide */
.gives {
  max-width: var(--measure); margin: clamp(30px, 4.6vh, 58px) auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 0 clamp(24px, 4vw, 64px);
  border-top: 1px solid var(--ink-24);
}
.gives li {
  padding: clamp(15px, 2vh, 22px) 0;
  border-bottom: 1px solid var(--ink-14);
  font-size: clamp(16px, 1.4vw, 21px);
  letter-spacing: -0.014em;
}
.is-dark .gives { border-top-color: var(--bone-30); }
.is-dark .gives li { border-bottom-color: var(--bone-16); }

/* the timeline sits on the dark ground now */
.is-dark .timeline { border-top-color: var(--bone-30); }
.is-dark .tl-row { border-bottom-color: var(--bone-16); }
.is-dark .tl-row__when { color: var(--taupe); }

/* the story band and the timeline below it are one dark run */
.band + .chapter--bark { padding-top: clamp(40px, 6vh, 90px); }

/* ============================================================
   Photography placement
   ============================================================ */

/* The only surviving pictures of the charity years are low-resolution.
   Rather than blow them up, they are set small and desaturated — read as
   archive, which is what they are. */
.archive { display: flex; gap: clamp(10px, 1.4vw, 16px); align-items: flex-start; margin-top: clamp(22px, 3vh, 32px); }
.archive figure { flex: 0 0 auto; width: clamp(96px, 11vw, 148px); }
.archive img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  filter: grayscale(1) contrast(1.06); opacity: 0.86;
}
.archive__cap { align-self: flex-end; max-width: 22ch; }

/* a wide plate that runs the measure, for the panoramic frames */
.plate-wide { max-width: var(--measure); margin: 0 auto; overflow: hidden; }
.plate-wide img { width: 100%; height: auto; object-fit: cover; }
.plate-wide--pano img { aspect-ratio: 21 / 9; }

/* the school, given its own weight on the homepage */
.school-call {
  max-width: var(--measure); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(26px, 5vw, 82px); align-items: center;
}
.school-call__pic { overflow: hidden; }
.school-call__pic img { width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; }
.school-call__facts { display: flex; gap: clamp(20px, 3vw, 44px); flex-wrap: wrap; margin-top: clamp(20px, 3vh, 30px); }
.school-call__fact b { display: block; font-size: clamp(28px, 3.2vw, 46px); font-weight: 600; letter-spacing: -0.035em; line-height: 1; }
.school-call__fact span { display: block; margin-top: 7px; font-size: 13px; color: var(--ink-68); }
.is-dark .school-call__fact span { color: var(--bone-68); }
@media (max-width: 860px) { .school-call { grid-template-columns: minmax(0, 1fr); } }

/* a programme with no photograph yet — carried by type instead */
.entry--type { background: var(--bark); color: var(--bone); padding: clamp(28px, 4vw, 52px); }
.entry--type h2 { color: var(--bone); }
.entry--type .say { color: var(--bone-68); }

/* the masthead settles once the page moves */
.masthead {
  transition: background 0.4s var(--ease-io), border-color 0.4s var(--ease-io),
              box-shadow 0.4s var(--ease-io);
}
.masthead.is-scrolled {
  background: rgba(242, 238, 228, 0.97);
  border-bottom-color: var(--ink-14);
  box-shadow: 0 1px 22px rgba(35, 33, 26, 0.05);
}

/* interactions get the same easing family as the reveals */
.btn, .masthead__give, .masthead__nav a, .link-arrow, .contact-link,
.account__copy, .reel__arrow, .sidetab {
  transition-timing-function: var(--ease-io);
  transition-duration: 0.32s;
}
.link-arrow span { transition: transform 0.4s var(--ease-out); }
.duo__pic img, .trio__pic img, .plate-wide img, .gallery img, .watch img {
  transition: transform 1.1s var(--ease-out);
}
.gallery figure:hover img, .duo__pic:hover img { transform: scale(1.025); }