/* LloydSmith Guyana, launch site. Editorial register, cinematic pass.
   Palette and type per docs/best-principles.md sections 3 and 4.
   Motion vocabulary carried over from the Group draft (rulings 5 to 7, 12):
   strict dark / light alternation with one hard-cut monumental plate, one pinned
   moment, live plate, curtain footer with contour linework, Lenis + ScrollTrigger.
   Every animation is decorative. The page reads fully with JS off and under
   prefers-reduced-motion (one still frame, no loops, no parallax). */

:root {
  --green: #0B3D2E;
  --green-hover: #062F23;
  --gold: #D5AD36;          /* decoration and light only, never text, never a lone separator */
  --red: #A32932;
  --ink: #101820;
  --ivory: #F6F5F2;
  --white: #FFFFFF;

  --rule: var(--green);
  --rule-soft: rgba(11, 61, 46, 0.32);
  --ivory-dim: rgba(246, 245, 242, 0.82);

  --sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* Scale: 13 / 18 / 22 standfirst / 29 / 64 / 80 hero. Three display sizes per viewport. */
  --fs-label: 0.8125rem;
  --fs-small: 0.875rem;
  --fs-body: 1.125rem;
  --fs-stand: clamp(1.3125rem, 1.15rem + 0.5vw, 1.5rem);  /* 21 to 24 */
  --fs-2: clamp(1.5rem, 1.05rem + 1.3vw, 1.8125rem);   /* 24 to 29 */
  --fs-3: clamp(2.5rem, 1.45rem + 3.4vw, 4rem);         /* 40 to 64 */

  --measure: 34rem;                                   /* about 65 characters at 18px */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --band: clamp(3.5rem, 9vw, 7rem);
  --grid-max: 80rem;                                  /* 1280px */
  --col-gap: clamp(1.5rem, 4vw, 4rem);
  --header-h: 80px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

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

html {
  font-size: 100%;
  scroll-behavior: smooth;
  caret-color: var(--green);
  accent-color: var(--green);
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--green);            /* the footer ground shows beneath the page curtain */
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--green); color: var(--white); }
.on-dark ::selection { background: var(--ivory); color: var(--green); }

img { max-width: 100%; height: auto; display: block; }
p, li, dd { text-wrap: pretty; }
a, button, summary { touch-action: manipulation; -webkit-tap-highlight-color: rgba(11, 61, 46, 0.12); }

h1, h2, h3, p, ul, ol, dl, figure { margin: 0; }

a {
  color: var(--green);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--rule-soft);
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
a:hover { color: var(--green-hover); text-decoration-color: currentColor; }

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
  border-radius: 1px;
}
.on-dark :focus-visible, .on-dark:focus-visible { outline-color: var(--ivory); }
/* programmatic landing points (skip link, section anchors) take focus without a ring */
main:focus, section:focus, main:focus-visible, section:focus-visible { outline: none; }
.num, .copy, .prose .meta { font-variant-numeric: tabular-nums; }

/* ---------- Skip link ---------- */
.skip {
  position: absolute;
  left: var(--gutter);
  top: -6rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--green);
  color: var(--white);
  font-weight: 500;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.skip:focus { top: 0.75rem; }

/* ---------- Containers ---------- */
.wrap {
  max-width: var(--grid-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--col-gap);
  row-gap: 1.5rem;
}
@media (min-width: 56em) {
  .cols { grid-template-columns: minmax(11rem, 1fr) minmax(0, 3fr); row-gap: 0; }
}

/* ---------- Header (fixed; ivory by default, clear over every dark surface) ----------
   Safe default is the ivory bar: it works with no JS and under reduced motion.
   motion.js adds body.header-clear while any dark band is behind it. */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: var(--ivory);
  border-bottom: 1px solid var(--rule);
  transition: background-color 350ms ease, border-color 350ms ease;
}
/* the masthead's gold hairline, 3px inside the green rule: decoration only */
.site-header::after {
  content: "";
  position: absolute;
  left: var(--gutter); right: var(--gutter); bottom: 3px;
  height: 1px;
  background: var(--gold);
  opacity: 1;
  transition: opacity 350ms ease;
}
.site-header .wrap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--header-h);
}
/* the clear state's scrim: measured so ivory nav text clears 7:1 over the brightest
   sky in any plate at text height (0.70 at 40px), then runs 40px past the bar so the
   edge never reads as a box */
.site-header::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: calc(var(--header-h) + 40px);
  pointer-events: none;
  background: linear-gradient(180deg, rgba(16,24,32,0.80) 0%, rgba(16,24,32,0.62) 66.7%, rgba(16,24,32,0) 100%);
  opacity: 0;
  transition: opacity 350ms ease;
}
body.header-clear .site-header {
  background-color: transparent;
  border-bottom-color: transparent;
}
body.header-clear .site-header::before { opacity: 1; }
body.header-clear .site-header::after { opacity: 0; }
body.header-clear .site-header .wordmark,
body.header-clear .site-header .nav a,
body.header-clear .site-header .nav-menu summary { color: var(--ivory); }
body.header-clear .site-header .wm-rule { background: var(--ivory); }
body.header-clear .site-header .nav-desktop a:hover { border-bottom-color: var(--ivory); }
body.header-clear .site-header :focus-visible { outline-color: var(--ivory); }

/* Wordmark in HTML/CSS: LLOYDSMITH, green hairline, GUYANA */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: var(--green);
  min-height: 44px;
  transition: color 350ms ease;
}
.wm-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 23px;
  line-height: 1;
  letter-spacing: 0.015em;
  text-transform: uppercase;
}
.wm-rule {
  width: 1px;
  height: 17px;
  background: var(--green);
  transition: background-color 350ms ease;
}
.wm-desc {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.34em;
  margin-right: -0.34em;
  text-transform: uppercase;
}
@media (max-width: 30em) {
  .wm-name { font-size: 18px; }
  .wm-desc { letter-spacing: 0.24em; font-size: 11px; }
}

/* Navigation */
.nav { display: flex; align-items: center; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem; }
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.75rem;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: color 350ms ease, border-color 200ms var(--ease-out);
}
.nav a:hover { color: var(--green-hover); }
.nav .nav-desktop { display: none; }
.nav-menu { position: relative; }
.nav-menu summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding-inline: 0.25rem;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  user-select: none;
  transition: color 350ms ease;
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.5; }
.nav-menu[open] summary .i-open { display: none; }
.nav-menu:not([open]) summary .i-close { display: none; }
.nav-menu ul {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 240px;
  flex-direction: column;
  gap: 0;
  padding: 0.25rem 0;
  background: var(--ivory);
  border: 1px solid var(--rule);
  transform-origin: top right;
  animation: panel-in 160ms var(--ease-out);
}
@keyframes panel-in { from { opacity: 0; transform: scale(0.97); } }
.nav-menu li + li { border-top: 1px solid var(--rule-soft); }
.nav-menu ul a { width: 100%; padding-inline: 1.25rem; min-height: 52px; color: var(--ink); }
.nav-menu ul a:hover { background: rgba(11,61,46,0.06); }

@media (min-width: 56em) {
  .nav .nav-menu { display: none; }
  .nav .nav-desktop { display: flex; }
  .nav-desktop a:hover { border-bottom-color: var(--green); }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.7rem 1.5rem;
  background: var(--green);
  color: var(--white);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 500;
  text-decoration: none;
  border-radius: 2px;
  border: 1px solid var(--green);
  transition: background-color 160ms ease, border-color 160ms ease, transform 140ms var(--ease-out);
}
.btn:hover { background: var(--green-hover); border-color: var(--green-hover); color: var(--white); }
.btn:active { transform: scale(0.97); }
.btn svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.5; fill: none; }

/* ---------- Page curtain: everything above the footer rides on this ---------- */
.page-over {
  position: relative;
  z-index: 2;
  background: var(--ivory);
  box-shadow: 0 30px 60px rgba(6, 20, 15, 0.38);
}

/* ---------- Photographic bands (full bleed, poster still first, motion as garnish) ---------- */
.band {
  position: relative;
  overflow: hidden;
  height: clamp(340px, 68vh, 760px);
  background: var(--green);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  isolation: isolate;
}
.band-media {
  position: absolute;
  left: 0; right: 0;
  top: -12%;
  height: 124%;                      /* headroom for the parallax drift */
  z-index: 0;
}
.band-media img,
.band-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.band-media video { z-index: 1; }
/* Living fog (Group ruling 43), now only inside the pinned centre band: two
   SVG-turbulence layers, screen blend, long alternating drifts so the pattern
   never reads as a loop. The monumental plate is a hard cut with no fog. */
.fog {
  position: absolute;
  top: -4%; bottom: -4%;
  left: -35%; width: 170%;
  z-index: 2;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='600'%3E%3Cfilter id='f' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0028 0.006' numOctaves='4' seed='11'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.93 0 0 0 0 0.95 0 0 0 0 0.93 0.9 0.9 0.9 0 -0.62'/%3E%3CfeGaussianBlur stdDeviation='14'/%3E%3C/filter%3E%3Crect width='1200' height='600' filter='url(%23f)'/%3E%3C/svg%3E") repeat-x;
  background-repeat: no-repeat;              /* one stretched tile: turbulence does not tile, so never repeat it */
  background-size: 100% 100%;
  mix-blend-mode: screen;
  will-change: transform;
}
.fog-a { opacity: 0.22; animation: fog-a 85s ease-in-out infinite alternate; }
.fog-b { opacity: 0.14; transform: scaleX(-1); animation: fog-b 133s ease-in-out infinite alternate; }
@keyframes fog-a { from { transform: translate3d(-7%, 1.5%, 0); } to { transform: translate3d(7%, -1.5%, 0); } }
@keyframes fog-b { from { transform: translate3d(6%, -1%, 0) scaleX(-1); } to { transform: translate3d(-6%, 1%, 0) scaleX(-1); } }

/* ---------- Chapters ---------- */
.chapter {
  position: relative;
  padding-block: calc(var(--band) * 0.8) var(--band);
  --draw: 1;                           /* the top hairline; JS draws it in from 0 */
}
/* editorial pacing: the light chapter after a dark band opens with more air (the release) */
.chapter-release { padding-top: calc(var(--band) * 1.25); }
.chapter::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--rule);
  transform: scaleX(var(--draw));
  transform-origin: left center;
}
.chapter-mark {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  color: var(--green);
}
.chapter-name {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.6;
}
@media (min-width: 56em) {
  .chapter-mark { flex-direction: column; gap: 0.6rem; position: sticky; top: calc(var(--header-h) + 2rem); }
}

.chapter h2, .centre h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-3);
  line-height: 1.06;
  letter-spacing: -0.025em;
  max-width: 18ch;
  text-wrap: balance;
  font-optical-sizing: auto;
}
/* one serif standfirst per chapter, then the Inter body */
.standfirst {
  font-family: var(--serif);
  font-size: var(--fs-stand);
  line-height: 1.5;
  font-optical-sizing: auto;
  max-width: var(--measure);
  margin-top: 1.75rem;
}
.chapter .body { max-width: var(--measure); margin-top: 1.5rem; }
.chapter .body p + p { margin-top: 1.25rem; }

/* Development lines (the Group's focus.html rows with contained texture tiles): head | text | tile */
.lines {
  list-style: none;
  padding: 0;
  margin-top: 3rem;
  border-top: 1px solid var(--rule-soft);
}
.lines li {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem 2rem;
  padding-block: 1.5rem;
  --draw: 1;
}
/* the hover ground, bleeding 1rem past the text so the hairlines stay on the column */
.lines li::before {
  content: "";
  position: absolute;
  inset: 0 -1rem;
  z-index: -1;
  background: rgba(11, 61, 46, 0);
}
.lines li::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--rule-soft);
  transform: scaleX(var(--draw));
  transform-origin: left center;
}
.line-head { display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; }
.lines h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-2);
  line-height: 1.15;
}
.lines p { max-width: var(--measure); }
.line-tile {
  display: none;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--rule-soft);
  background: var(--green);
}
.line-tile img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (pointer: fine) {
  .lines li::before { transition: background-color 200ms ease; }
  .lines li:hover::before { background: rgba(11, 61, 46, 0.04); }
  .lines h3 { transition: color 200ms ease; }
  .lines li:hover h3 { color: var(--green-hover); }
  .line-tile img, .route-plate img { transition: transform 400ms var(--ease-out); }
  .lines li:hover .line-tile img, .route:hover .route-plate img { transform: scale(1.03); }
}
.status {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
  line-height: 1.6;
}
@media (min-width: 40em) {
  .lines li { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; }
}
@media (min-width: 62em) {
  .lines li { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) minmax(180px, 240px); padding-block: 2rem; }
  .line-tile { display: block; }
}

/* Partnerships routes */
.routes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem var(--col-gap);
  margin-top: 3rem;
}
@media (min-width: 48em) {
  .routes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.route {
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}
/* the two contextual photographs, contained 4:3 on ivory (Group focus.html tile pattern) */
.route-plate {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--rule-soft);
  background: var(--green);
  margin-bottom: 1.5rem;
}
.route-plate img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) contrast(1.03); }
.route h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-2);
  line-height: 1.15;
}
.route p { margin-top: 1rem; max-width: 30rem; }
.route .go {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  min-height: 44px;
  font-weight: 500;
  text-decoration-thickness: 1px;
}
.route .go svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.5; fill: none; transition: transform 200ms var(--ease-out); }
.route .go:hover svg { transform: translateX(3px); }

/* Facts list */
.facts {
  margin-top: 3rem;
  border-top: 1px solid var(--rule-soft);
  max-width: var(--measure);
}
.facts div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.35rem 1rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--rule-soft);
}
@media (min-width: 40em) {
  .facts div { grid-template-columns: minmax(8rem, 1fr) minmax(0, 2fr); gap: 1rem; }
}
.facts dt {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
  line-height: 1.6;
  padding-top: 0.2rem;
}
.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.note {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink);
  max-width: 24rem;
}

/* ---------- Guyana at the centre: the pinned band (Group rulings 41 to 48, recoloured) ----------
   Measured scrim: never below 0.62 charcoal anywhere, so even over pure white mist the
   ground is at most rgb(107,110,115) and ivory text clears 4.8:1; at the stations (0.84+)
   it clears 9:1. */
.centre {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--ivory);
  background: var(--ink);
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: clamp(96px, 12vh, 140px) 0 clamp(48px, 6vh, 64px);
  border-top: 1px solid var(--rule);
}
.centre .band-media { z-index: 0; }
.grade-place img { filter: saturate(0.6) contrast(1.08) brightness(0.78); }
.centre .fog { z-index: 1; }
.centre::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(16,24,32,0.92) 0%, rgba(16,24,32,0.84) 34%, rgba(16,24,32,0.72) 60%, rgba(16,24,32,0.62) 100%);
}
.centre .wrap { position: relative; z-index: 3; width: 100%; }
.centre .chapter-mark { color: var(--ivory); position: static; flex-direction: row; }
.centre h2 { color: var(--ivory); margin-top: 1.5rem; }
.centre .lede { max-width: var(--measure); margin-top: 1.5rem; color: var(--ivory); }
.corridor-svg { display: block; width: 100%; height: auto; margin-top: clamp(28px, 4vw, 44px); }
.corridor-line { fill: none; stroke: rgba(246,245,242,0.62); stroke-width: 1.5; }
.corridor-node { fill: var(--ink); stroke: var(--ivory); stroke-width: 1.5; }
.stations {
  margin-top: clamp(18px, 2.5vw, 30px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
}
.station { padding-top: 8px; }
.station h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-2);
  line-height: 1.15;
  color: var(--ivory);
  margin-bottom: 0.75rem;
}
.station p { color: var(--ivory); max-width: 30rem; }
@media (max-width: 51.25em) {
  .centre { min-height: 0; padding-top: clamp(72px, 10vh, 96px); }
  .corridor-svg { display: none; }
  .stations { grid-template-columns: 1fr; gap: 0; }
  .station { padding: 24px 0 28px; border-top: 1px solid rgba(246,245,242,0.35); }
}

/* ---------- About: editorial split with the welder plate bleeding off the right edge (Group ruling 38) ---------- */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  max-width: none;
  padding-left: max(var(--gutter), calc((100vw - var(--grid-max)) / 2 + var(--gutter)));
  padding-right: 0;
}
.about-grid > .about-copy { padding-right: var(--gutter); }
.side-plate {
  position: relative;
  overflow: hidden;
  background: var(--green);
  height: min(56vw, 360px);
  margin-left: calc(-1 * var(--gutter));
}
.side-plate img {
  position: absolute;
  left: 0; top: -6%;
  width: 100%; height: 112%;
  object-fit: cover;
  object-position: 80% 58%;                 /* the tram and the street, not the nearest facade */
  filter: saturate(0.85) contrast(1.03);
}
@media (min-width: 56em) {
  .about-grid {
    grid-template-columns: minmax(11rem, 1fr) minmax(0, 3fr) minmax(320px, 38%);
    column-gap: var(--col-gap);
    row-gap: 0;
    align-items: stretch;
  }
  /* the historical plate keeps its proportion and rides beside the copy instead of stretching to it */
  .side-plate { height: auto; min-height: 0; aspect-ratio: 4 / 5; margin-left: 0; align-self: start; position: sticky; top: calc(var(--header-h) + 2rem); }
}

/* ---------- Contact on ivory with the green action (ed5 row 1, research 1) ---------- */
.contact { background: var(--white); }
.contact .actions { margin-top: 2.5rem; display: grid; gap: 0.9rem; justify-items: start; }
.contact .actions .note { max-width: var(--measure); }
.covers {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-soft);
  max-width: var(--measure);
}
.covers .status { display: block; }
.covers ul { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.covers li { padding: 0.7rem 0; border-bottom: 1px solid var(--rule-soft); }

/* ---------- Pause motion (WCAG 2.2.2): the pill itself is styled once, in the ruling 26 block ---------- */
html.motion-off .fog { animation: none !important; }
html.motion-off .band-media video { display: none; }

/* ---------- Footer: sticky curtain with contour linework (Group rulings 14, 23, 31, recoloured) ---------- */
.site-footer {
  position: sticky;
  bottom: 0;
  z-index: 1;
  overflow: hidden;
  color: var(--ivory);
  padding: clamp(64px, 8vw, 104px) 0 88px;   /* bottom air clears the fixed motion toggle */
  border-top: 1px solid rgba(246,245,242,0.10);
  /* Group draft's depth (ruling 9): near-black ground, deep green glow rising from the
     bottom, so the contour lines and the gold thread actually read. */
  background:
    radial-gradient(130% 100% at 50% 118%, rgba(24,74,59,0.72), rgba(24,74,59,0) 64%),
    linear-gradient(180deg, #141A16 0%, #1C2620 100%);
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.site-footer .wrap { position: relative; z-index: 1; }
.site-footer .contours {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 120px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%221440%22%20height%3D%22120%22%20viewBox%3D%220%200%201440%20120%22%3E%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%238FA098%22%20stroke-opacity%3D%220.28%22%20stroke-width%3D%221%22%20points%3D%220%2C41.2%2024%2C42.7%2048%2C43.9%2072%2C44.7%2096%2C45.1%20120%2C44.9%20144%2C44.2%20168%2C43.0%20192%2C41.2%20216%2C39.1%20240%2C36.6%20264%2C33.8%20288%2C30.8%20312%2C27.7%20336%2C24.6%20360%2C21.7%20384%2C19.0%20408%2C16.6%20432%2C14.6%20456%2C13.1%20480%2C12.1%20504%2C11.7%20528%2C11.9%20552%2C12.5%20576%2C13.7%20600%2C15.4%20624%2C17.4%20648%2C19.7%20672%2C22.2%20696%2C24.8%20720%2C27.4%20744%2C29.9%20768%2C32.1%20792%2C34.1%20816%2C35.7%20840%2C37.0%20864%2C37.7%20888%2C38.1%20912%2C38.0%20936%2C37.5%20960%2C36.7%20984%2C35.5%201008%2C34.2%201032%2C32.7%201056%2C31.2%201080%2C29.8%201104%2C28.4%201128%2C27.4%201152%2C26.6%201176%2C26.1%201200%2C26.0%201224%2C26.4%201248%2C27.1%201272%2C28.2%201296%2C29.6%201320%2C31.4%201344%2C33.3%201368%2C35.3%201392%2C37.4%201416%2C39.4%201440%2C41.2%22/%3E%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%238FA098%22%20stroke-opacity%3D%220.24%22%20stroke-width%3D%221%22%20points%3D%220%2C57.3%2024%2C56.4%2048%2C54.5%2072%2C51.8%2096%2C48.4%20120%2C44.8%20144%2C41.3%20168%2C38.3%20192%2C36.0%20216%2C34.8%20240%2C34.8%20264%2C36.0%20288%2C38.4%20312%2C41.7%20336%2C45.8%20360%2C50.2%20384%2C54.6%20408%2C58.6%20432%2C61.9%20456%2C64.3%20480%2C65.5%20504%2C65.5%20528%2C64.4%20552%2C62.3%20576%2C59.5%20600%2C56.3%20624%2C53.2%20648%2C50.3%20672%2C48.2%20696%2C46.9%20720%2C46.7%20744%2C47.6%20768%2C49.5%20792%2C52.2%20816%2C55.6%20840%2C59.2%20864%2C62.7%20888%2C65.7%20912%2C68.0%20936%2C69.2%20960%2C69.2%20984%2C68.0%201008%2C65.6%201032%2C62.3%201056%2C58.2%201080%2C53.8%201104%2C49.4%201128%2C45.4%201152%2C42.1%201176%2C39.7%201200%2C38.5%201224%2C38.5%201248%2C39.6%201272%2C41.7%201296%2C44.5%201320%2C47.7%201344%2C50.8%201368%2C53.7%201392%2C55.8%201416%2C57.1%201440%2C57.3%22/%3E%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%238FA098%22%20stroke-opacity%3D%220.20%22%20stroke-width%3D%221%22%20points%3D%220%2C82.5%2024%2C80.9%2048%2C79.3%2072%2C77.8%2096%2C76.3%20120%2C75.0%20144%2C74.0%20168%2C73.3%20192%2C72.9%20216%2C72.8%20240%2C73.1%20264%2C73.7%20288%2C74.5%20312%2C75.6%20336%2C76.9%20360%2C78.2%20384%2C79.5%20408%2C80.7%20432%2C81.8%20456%2C82.7%20480%2C83.2%20504%2C83.4%20528%2C83.1%20552%2C82.5%20576%2C81.4%20600%2C80.0%20624%2C78.1%20648%2C76.0%20672%2C73.6%20696%2C71.0%20720%2C68.4%20744%2C65.7%20768%2C63.2%20792%2C60.9%20816%2C58.9%20840%2C57.2%20864%2C56.0%20888%2C55.3%20912%2C55.1%20936%2C55.5%20960%2C56.4%20984%2C57.7%201008%2C59.5%201032%2C61.7%201056%2C64.3%201080%2C67.0%201104%2C69.9%201128%2C72.7%201152%2C75.5%201176%2C78.2%201200%2C80.5%201224%2C82.6%201248%2C84.3%201272%2C85.5%201296%2C86.3%201320%2C86.6%201344%2C86.5%201368%2C85.9%201392%2C85.0%201416%2C83.9%201440%2C82.5%22/%3E%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%23D5AD36%22%20stroke-opacity%3D%220.50%22%20stroke-width%3D%221%22%20points%3D%220%2C85.6%2024%2C86.0%2048%2C86.8%2072%2C88.0%2096%2C89.6%20120%2C91.3%20144%2C93.2%20168%2C95.1%20192%2C97.0%20216%2C98.6%20240%2C100.0%20264%2C101.1%20288%2C101.8%20312%2C102.0%20336%2C101.8%20360%2C101.2%20384%2C100.2%20408%2C98.8%20432%2C97.2%20456%2C95.4%20480%2C93.4%20504%2C91.5%20528%2C89.6%20552%2C88.0%20576%2C86.6%20600%2C85.7%20624%2C85.1%20648%2C85.1%20672%2C85.6%20696%2C86.6%20720%2C88.2%20744%2C90.2%20768%2C92.6%20792%2C95.3%20816%2C98.3%20840%2C101.4%20864%2C104.5%20888%2C107.6%20912%2C110.4%20936%2C112.9%20960%2C115.0%20984%2C116.5%201008%2C117.6%201032%2C118.0%201056%2C117.8%201080%2C117.0%201104%2C115.6%201128%2C113.8%201152%2C111.4%201176%2C108.8%201200%2C105.8%201224%2C102.8%201248%2C99.7%201272%2C96.7%201296%2C93.9%201320%2C91.4%201344%2C89.3%201368%2C87.6%201392%2C86.4%201416%2C85.8%201440%2C85.6%22/%3E%3C/svg%3E") bottom left / 1440px 120px repeat-x;
}
.fgrid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: 40px clamp(24px, 4vw, 64px);
}
.site-footer .fwm .wordmark { color: var(--ivory); display: block; }
.site-footer .fwm .wm-name { display: block; font: 500 26px/1 var(--serif); letter-spacing: 0.02em; text-transform: uppercase; }
.site-footer .fwm .wm-rule { display: none; }
.site-footer .fwm .wm-desc { display: block; font: 500 12px/1 var(--serif); letter-spacing: 0.32em; text-transform: uppercase; margin-top: 8px; }
.fwm p { color: var(--ivory-dim); font-size: 15px; margin-top: 22px; max-width: 34ch; }
.fcol .label {
  display: block;
  margin-bottom: 16px;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ivory-dim);
}
.fcol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fcol a { color: var(--ivory); text-decoration: none; font-size: 15px; min-height: 44px; display: inline-flex; align-items: center; }
.fcol a:hover { color: var(--ivory); text-decoration: underline; text-decoration-color: var(--ivory-dim); text-underline-offset: 0.3em; }
.fcol li { font-size: 15px; color: var(--ivory-dim); }
.fcol li b { color: var(--ivory); font-weight: 400; display: block; }
.fcol li .note { color: var(--ivory-dim); display: block; font-size: 14px; max-width: 26ch; }
.site-footer .copy {
  max-width: none;
  margin-top: clamp(44px, 6vw, 64px);
  padding-top: 26px;
  border-top: 1px solid rgba(246,245,242,0.14);
  font-size: var(--fs-label);
  line-height: 1.6;
  color: var(--ivory-dim);
}
@media (max-width: 56em) { .fgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 35em) { .fgrid { grid-template-columns: 1fr; } }

/* ---------- Privacy page ---------- */
.prose { padding-block: calc(var(--header-h) + var(--band)) var(--band); }
.prose h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-3);
  line-height: 1.12;
  letter-spacing: -0.01em;
  max-width: 20ch;
  text-wrap: balance;
}
.prose .body { max-width: var(--measure); margin-top: 1.75rem; }
.prose h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-2);
  line-height: 1.15;
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-soft);
}
.prose h2 + p { margin-top: 1rem; }
.prose p + p { margin-top: 1.25rem; }
.prose ul { padding-left: 1.25rem; margin-top: 1rem; }
.prose li + li { margin-top: 0.5rem; }
.prose .meta {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
  line-height: 1.6;
}

/* ---------- Hover gating and reduced motion ---------- */
@media (hover: none) {
  .route .go:hover svg { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .band-media video { display: none; }       /* one still frame, no loops */
  .fog { animation: none; }
  .btn:active { transform: none; }
}

/* Lenis hooks: the smooth scroller owns scrolling, so native smoothing is switched off */
html.lenis, html.lenis body { height: auto; }
html.lenis, .lenis.lenis-smooth { scroll-behavior: auto !important; }

/* ---------- Print: the words, the facts and the addresses; no motion, no plates ---------- */
@media print {
  html, body { background: #fff; color: #000; }
  .site-header, .skip, .motion-toggle, .band, .band-media, .fog, .side-plate, .line-tile,
  .route-plate, .corridor-svg, .contours, #terrain, video { display: none !important; }
  .page-over { box-shadow: none; background: none; }
  .lg-hero { background: none; color: #000; border: 0; }
  .lg-hero h1, .lg-hero__lead, .lg-hero__cta { color: #000; }
  .lg-hero__cta { background: none; border: 1px solid #000; }
  .lg-hero__wrap { min-height: 0; padding: 0 0 2rem; }
  .lg-rv > span, .lg-hero__lead, .lg-hero__actions { animation: none; transform: none; opacity: 1; }
  .centre { min-height: 0; background: none; color: #000; padding: 2rem 0; display: block; }
  .centre::after { display: none; }
  .centre h2, .centre .lede, .centre .chapter-mark, .station h3, .station p { color: #000; }
  .stations { grid-template-columns: 1fr; gap: 1rem; }
  .site-footer { position: static; background: none; color: #000; padding: 2rem 0 0; }
  .site-footer .fwm .wordmark, .fcol a, .fcol li, .fcol li b, .fcol .label, .fwm p, .site-footer .copy { color: #000; }
  .chapter-mark { position: static; }
  .wrap, .about-grid { max-width: none; padding: 0; }
  a { color: #000; }
}


/* ---------- Type system (ruling 15): the one Kathryn chose on the Group build.
   Source Serif 4 for display, leads, prose and nav. Schibsted Grotesk for UI, buttons, body.
   IBM Plex Mono for labels and numbers. ---------- */
body { font: 400 17px/1.7 var(--sans); font-feature-settings: "ss01" 1, "cv05" 1; }
.chapter p, .standfirst, .stations p, .station p, .route p, .prose p {
  font-family: var(--serif); font-size: 19px; line-height: 1.68; font-optical-sizing: auto; }
.standfirst { font-size: clamp(21px, 1.8vw, 24px); line-height: 1.5; }
.nav a, .nav-desktop a { font: 400 16.5px/1 var(--serif); letter-spacing: .01em; font-optical-sizing: auto; text-transform: none; }
.chapter-mark, .chapter-mark span, .status, .label, .fcol .label, dt {
  font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.btn, .go, button { font-family: var(--sans); font-weight: 600; font-size: 13.5px; letter-spacing: .09em; text-transform: uppercase; }
h1, h2, h3, .site-footer .fwm .wm-name, .site-footer .fwm .wm-desc { font-family: var(--serif); }
.site-footer .fwm .wm-name { font: 500 26px/1 var(--serif); letter-spacing: .02em; }
.site-footer .fwm .wm-desc { font: 500 12px/1 var(--serif); letter-spacing: .32em; margin-top: 8px; }
.site-footer .fcol .label { color: #C9CFC9; }
.site-footer .fcol ul { gap: 10px; }
.site-footer .fcol a:hover { text-decoration-color: var(--gold); }
.site-footer .copy { font: 400 13px/1.6 var(--sans); border-top-color: #242A26; }


/* ---------- History page (ruling 17) ----------
   Editorial, image-led, in the same system: serif display and prose, mono captions,
   contained plates on ivory and hard-cut full-bleed bands in the D/L rhythm. Every
   photograph carries a caption beneath it (place, date, source) on a solid surface;
   no small text ever sits over a photograph. */

/* page hero on ivory */
.hist-hero {
  position: relative;
  padding-block: calc(var(--header-h) + var(--band) * 0.9) calc(var(--band) * 0.9);
}
.hist-hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.625rem, 1.6rem + 4.2vw, 5.25rem);   /* 42 to 84 */
  line-height: 1.02;
  letter-spacing: -0.028em;
  max-width: 13ch;
  text-wrap: balance;
  font-optical-sizing: auto;
}
.hist-hero .since {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 2rem;
  color: var(--green);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.6;
}
.hist-hero .since::before { content: ""; width: 2.5rem; height: 1px; background: var(--green); }
.hist-hero .standfirst { margin-top: 1.75rem; }
.hist-hero .body { max-width: var(--measure); margin-top: 1.5rem; }
.hist-hero .body p + p { margin-top: 1.25rem; }
.hist-hero .body p, .hist-hero .standfirst, .hist-hero .lede {
  font-family: var(--serif); font-size: 19px; line-height: 1.68; font-optical-sizing: auto; }
.hist-hero .standfirst { font-size: clamp(21px, 1.8vw, 24px); line-height: 1.5; }
.hist-hero .names-line {
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-soft);
  max-width: var(--measure);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  line-height: 1.8;
}

/* chapter inner layout: copy at the measure, figure beside it on wide screens */
.hist-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem var(--col-gap);
  align-items: start;
}
.hist-split > .hist-copy { min-width: 0; }
.hist-copy .body { max-width: var(--measure); margin-top: 1.5rem; }
@media (min-width: 66em) {
  .hist-split { grid-template-columns: minmax(0, var(--measure)) minmax(16rem, 1fr); }
  .hist-split > .hist-figure { position: sticky; top: calc(var(--header-h) + 2rem); }
  .hist-split > .hist-figure.fig-wide { position: static; grid-column: 1 / -1; }
}
.hist-figure { margin: 0; min-width: 0; }
.hist-figure.fig-wide { margin-top: 0.5rem; }
.hist-plate {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--rule-soft);
  background: var(--green);
}
.fig-wide .hist-plate { aspect-ratio: 16 / 9; }
.fig-tall .hist-plate { aspect-ratio: 5 / 4; }
.hist-plate img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.82) contrast(1.04); }

/* captions: place and date in the label style, source beneath, all on the ivory surface */
.caption {
  display: grid;
  gap: 0.2rem;
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink);
}
.caption .cap-place { letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); }
.caption .cap-src { letter-spacing: 0.02em; color: #3A423F; }   /* 8.9:1 on ivory */
.caption a { color: inherit; text-decoration-color: var(--rule-soft); }
.caption a:hover { color: var(--green-hover); }

/* full-bleed bands carry their caption in a bar beneath, never over the picture */
.band.hist-band { border-bottom: 0; }
.band.hist-band .band-media img { filter: saturate(0.82) contrast(1.04); }
.band-cap {
  background: var(--ivory);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule-soft);
}
.band-cap .caption {
  margin: 0; padding: 0.9rem 0 1rem; border-top: 0;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 48em) {
  .band-cap .caption { grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem; align-items: baseline; }
}

/* the family names: one typographic moment on green */
.names {
  position: relative;
  background: var(--green);
  color: var(--ivory);
  padding-block: calc(var(--band) * 1.1);
  border-top: 1px solid var(--rule);
  overflow: hidden;
}
.names::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.names .wrap { position: relative; }
.names .chapter-mark { color: var(--ivory); position: static; flex-direction: row; }
.names-list {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: clamp(1rem, 2.4vw, 2rem);
  row-gap: 0.4rem;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 1.05rem + 3vw, 3.75rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-optical-sizing: auto;
}
.names-list li { display: inline-flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); }
.names-list li + li::before {
  content: "";
  width: 0.28em; height: 0.28em;
  border-radius: 50%;
  background: var(--gold);          /* decorative dot; the list structure carries the meaning */
  flex: none;
}
.names .standfirst { color: var(--ivory); margin-top: 2rem; }
.names ::selection { background: var(--ivory); color: var(--green); }

/* the timeline rail: a vertical line that draws down the page, dates in mono, notes in serif */
.rail {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  position: relative;
  max-width: var(--measure);
  --draw: 1;
}
.rail::before {
  content: "";
  position: absolute;
  left: 5.5rem;
  top: 0.55rem; bottom: 0.55rem;
  width: 1px;
  background: var(--rule);
  transform: scaleY(var(--draw));
  transform-origin: top center;
}
.rail li {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  column-gap: 2rem;
  padding: 0.55rem 0;
  align-items: baseline;
}
.rail li::before {
  content: "";
  position: absolute;
  left: calc(5.5rem - 4px);
  top: 1.05rem;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px var(--ivory);
}
.rail-date {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  line-height: 1.7;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.rail li p { font-family: var(--serif); font-size: 17px; line-height: 1.55; font-optical-sizing: auto; }
@media (max-width: 30em) {
  .rail::before { left: 3.75rem; }
  .rail li { grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1.5rem; }
  .rail li::before { left: calc(3.75rem - 4px); }
}

/* Guyana at the centre, on the history page: the same dark band, no pin, place names as type */
.hist-centre { min-height: 0; padding: clamp(96px, 12vh, 140px) 0; }
.hist-centre .lede, .hist-centre .body p { color: var(--ivory); }
.hist-centre .body { max-width: var(--measure); margin-top: 1.5rem; }
.hist-centre .body p + p { margin-top: 1.25rem; }
.hist-centre .body p { font-family: var(--serif); font-size: 19px; line-height: 1.68; font-optical-sizing: auto; }
.places {
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 1.5rem 0 0.5rem;
  border-top: 1px solid rgba(246,245,242,0.28);
  display: flex;
  flex-wrap: wrap;
  column-gap: clamp(1.25rem, 3vw, 2.5rem);
  row-gap: 0.35rem;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.75rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ivory);
  font-optical-sizing: auto;
}
.places li::after { content: "."; }
.hist-centre .caption { border-top-color: rgba(246,245,242,0.28); color: var(--ivory); margin-top: 2.5rem; max-width: var(--measure); }
.hist-centre .caption .cap-place { color: var(--ivory); }
.hist-centre .caption .cap-src { color: var(--ivory-dim); }
.hist-centre .caption a { color: var(--ivory); }

/* closing block: the wordmark statement, then the action */
.hist-close { padding-bottom: calc(var(--band) * 1.2); }
.hist-close .statement {
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--rule);
}
.hist-close .statement .wm-name {
  display: block;
  font: 500 clamp(28px, 2.4vw, 36px)/1 var(--serif);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--green);
}
.hist-close .statement .wm-desc {
  display: block;
  margin-top: 10px;
  font: 500 12px/1 var(--serif);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--green);
}
.hist-close .statement .standfirst { margin-top: 1.5rem; }
.hist-close .statement .lines-mono {
  margin-top: 1.5rem;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  line-height: 2;
}
.hist-close .actions { margin-top: 2.5rem; display: grid; gap: 0.9rem; justify-items: start; }
.hist-close .actions .note { max-width: var(--measure); }

/* the About chapter's link on the overview page, and any other inline arrow link */
.go {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  min-height: 44px;
  text-decoration-thickness: 1px;
}
.go svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.5; fill: none; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .go:hover svg { transform: translateX(3px); } }
/* the About plate now carries a caption on a solid bar at its foot */
.side-plate .caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 0.7rem var(--gutter) 0.8rem;
  background: var(--ivory);
  border-top: 1px solid var(--rule-soft);
}
@media (min-width: 56em) { .side-plate .caption { padding-inline: 1.25rem; } }

@media print {
  .hist-plate, .band-cap, .hist-figure, .names::before { display: none !important; }
  .names, .hist-centre { background: none; color: #000; }
  .names-list, .names .standfirst, .places, .hist-centre .lede, .hist-centre .body p { color: #000; }
}
/* the verified directory entries, in the facts style with a year for the term */
.facts.record { margin-top: 2.25rem; }
.facts.record dt { font-variant-numeric: tabular-nums; }
.hist-copy > .caption { max-width: var(--measure); border-top: 0; padding-top: 0; margin-top: 0.85rem; }
.fig-natural .hist-plate { aspect-ratio: 3 / 2; }
.hist-figures { display: grid; gap: 2rem; min-width: 0; }
/* history page: a narrower mark column so the plates get their width */
@media (min-width: 56em) {
  body.hist .cols { grid-template-columns: minmax(8.5rem, 0.62fr) minmax(0, 3.6fr); }
}


/* ---------- Footer spacing matched to the Group draft (ruling 19) ----------
   Group: .fgrid 2fr 1fr 1fr 1fr 1fr, gap 40px x clamp(24px,4vw,64px); links 15px in a 10px
   grid, label 16px below, wordmark blurb 22px below at 34ch, copy line 26px above a dark rule. */
.site-footer { padding: clamp(64px, 8vw, 104px) 0 40px; }
.site-footer .fgrid { grid-template-columns: 2fr 1fr 1fr 1.25fr; gap: 40px clamp(24px, 4vw, 64px); align-items: start; }
.site-footer .fwm p { margin-top: 22px; max-width: 34ch; font-size: 15px; line-height: 1.6; }
.site-footer .fcol .label { margin-bottom: 16px; }
.site-footer .fcol ul { display: grid; gap: 10px; }
.site-footer .fcol li { font-size: 15px; line-height: 1.5; }
.site-footer .fcol li b { display: block; margin-bottom: 2px; }
.site-footer .fcol a { display: inline; min-height: 0; font-size: 15px; line-height: 1.5;
  padding-block: 13px; margin-block: -13px; /* 45px hit box on the 15px visual rhythm; boxes overlap, the later one paints on top */ }
.site-footer .fcol li .note { margin-top: 6px; font-size: 13px; line-height: 1.5; max-width: 30ch; }
.site-footer .copy { margin-top: clamp(44px, 6vw, 64px); padding-top: 26px; }
@media (max-width: 900px) { .site-footer .fgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer .fgrid { grid-template-columns: 1fr; } }

/* ruling 19b: the Group footer's composition. 1240 wrap, five columns 2/1/1/1/2, quiet pill. */
.site-footer .wrap { max-width: 1240px; }
.site-footer .fgrid { grid-template-columns: 2fr 1fr 1fr 1fr 2fr; }
.site-footer .fgrid:not(:has(.fcol:nth-of-type(4))) { grid-template-columns: 2fr 1fr 1fr 2fr; }
.site-footer .fcol li b { font-weight: 400; color: var(--ivory); }
/* (the quiet pill of ruling 19b now lives in the ruling 26 block) */

/* ruling 20: button text never inherits the link hover colour */
.btn:hover, .btn:focus-visible, a.btn:hover { color: var(--white); }

/* ruling 22: chapter numbers as two-digit mono figures (the Group focus.html pattern), not
   a lone serif "I" that reads as a letter. */
.chapter-num { font-family: var(--mono); font-weight: 400; font-size: 12px; line-height: 1; letter-spacing: .16em; font-variant-numeric: tabular-nums; color: var(--green); opacity: .85; }
.chapter-mark { gap: 1.25rem; }

/* ruling 24: footer stacks on small screens. The 19b five-column rule was declared after the
   earlier breakpoints and won on phones; these breakpoints come last so they win. */
@media (max-width: 900px) {
  .site-footer .fgrid { grid-template-columns: 1fr 1fr; gap: 36px clamp(24px, 6vw, 48px); }
  .site-footer .fwm { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .site-footer { padding: 56px 0 32px; }
  .site-footer .fgrid { grid-template-columns: 1fr; gap: 28px; }
  .site-footer .fwm p { max-width: none; }
  .site-footer .fcol .label { margin-bottom: 12px; }
  .site-footer .fcol li .note { max-width: none; }
  .site-footer .copy { margin-top: 36px; padding-top: 20px; }
  .site-footer .contours { height: 80px; opacity: .8; }
}

/* ruling 25 (superseded by ruling 26): reserving the header's height above the footer could
   not work, because on phones the sticky footer is taller than the viewport, so its top is
   never on screen at end of scroll. The header now hides on scroll-down instead. */

/* ========== ruling 26 (Playwright review), 22 September 2026 ==========
   Findings and measurements in docs/BUILD-LOG.md. Nothing here reopens a settled ruling. */

/* 26.1 narrow screens: the header hides on scroll-down and returns on scroll-up (nav.js sets
   body.header-hidden), so nothing covers the footer at end of scroll. The open menu or keyboard
   focus inside the bar always brings it back. The 40px scrim tail travels with it. */
.site-header { transition: background-color 350ms ease, border-color 350ms ease, transform 280ms var(--ease-out); }
body.header-hidden .site-header { transform: translateY(calc(-100% - 40px)); }
body.header-hidden .site-header:focus-within { transform: none; }
/* on touch devices the ivory/clear switch must never read as a flash */
@media (hover: none) {
  .site-header { transition-duration: 120ms, 120ms, 240ms; }
  .site-header::before, .site-header::after, .site-header .wordmark, .site-header .wm-rule,
  .site-header .nav a, .site-header .nav-menu summary { transition-duration: 120ms; }
}
/* the menu panel is always ivory, so its links are always charcoal, whatever the bar is doing */
body.header-clear .site-header .nav-menu ul a { color: var(--ink); }
body.header-clear .site-header .nav-menu ul a:focus-visible { outline-color: var(--green); }

/* 26.2 the Pause-motion pill, styled once: quiet charcoal glass, 12px mono, 44px tall; icon only
   on phones (the label stays in the DOM for the accessible name); two-tone focus ring that reads
   over ivory and over the dark bands; steps aside while the footer is revealed (nav.js watches
   the .page-end sentinel, because the sticky footer is inside the viewport from load). */
.motion-toggle {
  position: fixed;
  right: max(var(--gutter), env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 14px;
  background: rgba(16, 24, 32, 0.84);   /* measured: the ivory label clears 9:1 over ivory pages, the .72 glass at .85 opacity gave 3.7 */
  color: var(--ivory);
  border: 1px solid rgba(246, 245, 242, 0.32);
  border-radius: 999px;
  font: 400 12px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 1;
  transition: opacity 200ms ease, background-color 160ms ease, transform 140ms var(--ease-out);
}
.motion-toggle:hover { background: rgba(16, 24, 32, 0.94); }
.motion-toggle:active { transform: scale(0.97); }
.motion-toggle:focus-visible { opacity: 1; outline: 3px solid var(--ivory); outline-offset: 2px; box-shadow: 0 0 0 5px var(--green); }
.motion-toggle svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.5; fill: none; flex: none; }
.motion-toggle .i-play { fill: currentColor; }
.motion-toggle[aria-pressed="true"] .i-pause,
.motion-toggle[aria-pressed="false"] .i-play { display: none; }
@media (max-width: 40em) {
  .motion-toggle { width: 44px; height: 44px; padding: 0; gap: 0; }
  .motion-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
body.footer-in-view .motion-toggle { opacity: 0; pointer-events: none; }
.page-end { height: 1px; margin-top: -1px; }
/* a footer taller than the viewport scrolls normally instead of sticking (nav.js measures it;
   with JS off the one-column footer under 560px, which is always taller than a phone, is static) */
body.footer-tall .site-footer { position: relative; }
@media (max-width: 560px) { .site-footer { position: relative; } }

/* 26.3 type: row titles read as titles (client: "eye reads it the same as the body"). Source
   Serif 4 at 500, 27 to 29px (at least 1.4x the 19px body), primary green on ivory (11.19:1),
   ivory on the dark band; the body beside them stays as ruling 15 set it, the stations' body
   drops to the dim ivory. A touch more air between title and body. */
.lines h3, .route h3, .station h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(27px, 1.5rem + 0.5vw, 29px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--green);
}
.lines li { gap: 1rem 2.5rem; }
.route h3 + p { margin-top: 1.1rem; }
.station h3 { color: var(--ivory); margin-bottom: 0.9rem; }
.station p { color: var(--ivory-dim); }
/* ruling 15 says leads are serif: the centre band's lede was still on the sans body */
.centre .lede { font-family: var(--serif); font-size: 19px; line-height: 1.68; font-optical-sizing: auto; }
/* labels are mono 12 tracked everywhere (ruling 15): the privacy and 404 meta, and the facts terms, were not */
.prose .meta, .facts dt { font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
/* notes are the small sans note, not body prose: the .chapter p rule had promoted them to 19px serif */
.chapter p.note, .hist-close .actions .note { font-family: var(--sans); font-size: 15px; line-height: 1.6; color: var(--ink); }
/* Schibsted is loaded at 400 and 600 only; nothing asks for the 500 the browser cannot have */
.skip { font-weight: 600; }
.nav-menu summary { font-weight: 600; }
.route .go { font-weight: 600; }
/* the main contact link gets a full-height hit box inside its facts row */
.facts dd > a { display: inline-block; padding-block: 11px; margin-block: -11px; }

/* 26.4 keyboard: a focused element scrolls to at least 14vh above the fold, so the once-only
   reveals that start at 88% have fired by the time the ring is drawn */
html { scroll-padding-bottom: 14vh; }

/* 26.5 plates on portrait screens: the full-bleed bands were tall crops of landscape pictures,
   upscaled 2 to 3x on phones. Shorter bands in portrait, and the srcset sizes below ask for the
   larger source there. */
@media (orientation: portrait) {
  .band { height: clamp(300px, 52vh, 560px); }
}

/* 26.6 design review (impeccable critique A + detector B, 22 September 2026). Within the
   settled rules only; see BUILD-LOG ruling 26, "Design review". */
/* the About chapter sat 102px left of every other chapter's text column: its mark column was
   176px against the 277.6px of .cols. Same first track as .cols, plate keeps its 38%. */
@media (min-width: 56em) {
  .about-grid { grid-template-columns: calc((min(100vw, var(--grid-max)) - 2 * var(--gutter) - var(--col-gap)) / 4) minmax(0, 1fr) minmax(320px, 38%); }
}
/* equal air above and below a chapter rule (was 112 / 89.6 at 1440); the release after a dark
   band keeps its 1.25 */
.chapter { padding-block: calc(var(--band) * 0.9); }
.chapter-release { padding-top: calc(var(--band) * 1.25); }
/* hero copy on the same gutter as the wordmark (was 16px inside it on desktop, 4px on phones) */
.lg-hero .lg-hero__wrap { padding-inline: var(--gutter); }   /* hero-terrain.css loads after this file, so the selector carries the weight */
/* the menu panel opened at y=72, cutting through the masthead's green rule and gold hairline at
   78 to 81; it now hangs flush beneath the bar */
.nav-menu ul { top: calc(100% + 19px); }
/* one button spec (the hero CTA's): the contact and closing buttons had 2px radii and 11px padding */
.btn { border-radius: 0; padding: 17px 32px; min-height: 0; line-height: 1; }
.btn svg { width: 16px; height: 16px; }
/* rows at the same level share the soft hairline; the route articles used the full rule */
.route { border-top-color: var(--rule-soft); }
/* every mono label tracks at .16em */
.caption .cap-place { letter-spacing: 0.16em; text-wrap: balance; }
.motion-toggle { letter-spacing: 0.16em; }
/* one grade for the historical plates (sources ranged from pure-grey to sepia, mean luminance
   99 to 199): a light sepia pull on all of them, the two pale prints taken down a step, the
   present-day Essequibo aerial kept in colour but muted; the two route plates cooled so they
   stop being the warmest pictures on the site */
.hist-plate img, .band.hist-band .band-media img, .side-plate img { filter: grayscale(0.35) sepia(0.14) saturate(0.85) contrast(1.06); }
.hist-plate img[src*="1839"], .hist-plate img[src*="1903"] { filter: grayscale(0.35) sepia(0.14) saturate(0.85) contrast(1.08) brightness(0.94); }
#next-chapter .hist-plate img { filter: saturate(0.7) contrast(1.04); }
.route-plate img { filter: saturate(0.6) contrast(1.05); }
/* the About plate on phones showed 133px of picture under its 86px caption bar */
@media (max-width: 56em) { .side-plate { height: min(84vw, 460px); } }
/* the family names break 3 + 3 on wide screens instead of leaving "Lloyd-Smith" alone with a dot */
@media (min-width: 56em) {
  .names-list { display: grid; grid-template-columns: repeat(3, max-content); align-items: start; }
  .names-list li + li::before { content: none; }
  .names-list li:not(:nth-child(3n + 1))::before { content: ""; width: 0.28em; height: 0.28em; border-radius: 50%; background: var(--gold); flex: none; }
}
/* the history h1 at 390 stacked five lines in 264px with 86px unused beside it */
@media (max-width: 40em) { .hist-hero h1 { max-width: none; } }

/* ruling 27: header stays put on phones (client). To keep the footer wordmark visible at end
   of scroll, the phone footer is compact: two columns, tighter air, so it fits beneath the header. */
@media (max-width: 560px) {
  .site-footer { padding: 44px 0 24px; }
  .site-footer .fgrid { grid-template-columns: 1fr 1fr; gap: 24px 20px; }
  .site-footer .fwm { grid-column: 1 / -1; }
  .site-footer .fwm p { margin-top: 14px; font-size: 14px; }
  .site-footer .fcol:nth-of-type(4) { grid-column: 1 / -1; }   /* Contact full width */
  .site-footer .fcol .label { margin-bottom: 10px; }
  .site-footer .fcol ul { gap: 8px; }
  .site-footer .fcol li, .site-footer .fcol a { font-size: 15px; }
  .site-footer .copy { margin-top: 24px; padding-top: 16px; font-size: 12px; }
  .site-footer .contours { height: 56px; }
}