/* The Purpose One: site styles.
   Tokens come from DESIGN.md section 8. Mobile first; breakpoints at 48rem (768px) and 64rem (1024px). The nav collapses into the menu button below 48rem. */

/* ---------- fonts ---------- */
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-450.woff2") format("woff2");
  font-weight: 450;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-v2.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
/* Local fallbacks sized to the web fonts, so text does not reflow when they load */
@font-face {
  font-family: "Newsreader Fallback";
  src: local("Georgia");
  size-adjust: 95.99%;
  ascent-override: 76.57%;
  descent-override: 27.61%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Instrument Sans Fallback";
  src: local("Arial");
  size-adjust: 103.23%;
  ascent-override: 93.96%;
  descent-override: 24.22%;
  line-gap-override: 0%;
}

/* ---------- tokens ---------- */
:root {
  --ink: #0F2329;
  --paper: #F1F0EB;
  --sand: #E8E2D5;
  --harbour: #D6E3E8;
  --blue: #005B7F;                /* primary blue (logo kit): links, buttons, labels, everyday accent */
  --gold: #896B37;                /* primary gold (logo kit): used strategically, the logo and "what's next" marks only */
  --stone-700: #435158;
  --stone-500: #59656B;
  --stone-300: #C4C7C3;
  --stone-400: #B3B2A8;           /* hairlines on Sand */
  --on-ink: #F1F0EB;
  --on-ink-muted: #AAB6BA;
  --on-ink-rule: #2B3E44;
  --blue-light: #8CC5DA;          /* blue for text and links on the ink footer and dark band */

  --font-serif: "Newsreader", "Newsreader Fallback", Georgia, serif;
  --font-sans: "Instrument Sans", "Instrument Sans Fallback", Arial, sans-serif;
  --fs-display: clamp(2.75rem, 1.95rem + 3.4vw, 4.75rem);
  --fs-h1-page: clamp(2.375rem, 1.8rem + 2.4vw, 3.75rem);
  --fs-h2: clamp(2rem, 1.6rem + 1.7vw, 3.125rem);
  --fs-h3: clamp(1.4375rem, 1.3rem + .55vw, 1.8125rem);
  --fs-lead: clamp(1.125rem, 1.06rem + .28vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --fs-label: .8125rem;
  --track-label: .12em;

  --max: 82.5rem;
  --margin: clamp(1rem, 5vw, 4rem);
  --gutter: 1.5rem;
  --space-section: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --rule: 1px solid var(--stone-300);
  --radius: 2px;
  --offset: .875rem;               /* flat colour block behind photos */
}
@media (min-width: 64rem) {
  :root { --offset: 1.5rem; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 1.5rem; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--font-serif); font-weight: 450; margin: 0; text-wrap: balance; }
p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
table { border-collapse: collapse; width: 100%; }
strong { font-weight: 600; }

a { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; transition: text-decoration-thickness .12s ease, color .12s ease; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 1px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--margin); }

.skip {
  position: absolute; left: var(--margin); top: .75rem; z-index: 10;
  padding: .75rem 1rem; background: var(--blue); color: var(--paper); font-weight: 600; text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

.label {
  font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-label); line-height: 1.35;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--blue);
}
.lead { font-size: var(--fs-lead); line-height: 1.5; }
.muted { color: var(--stone-700); }
.small { font-size: var(--fs-small); line-height: 1.55; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* buttons and arrow links */
.btn {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 2.875rem; padding: .75rem 1.25rem;
  background: var(--blue); color: var(--paper); border-radius: var(--radius);
  font-weight: 600; font-size: var(--fs-small); line-height: 1.2; text-decoration: none;
  transition: background-color .12s ease;
}
.btn:hover { background: var(--ink); }
.arrow { display: inline-block; transition: transform .12s ease; }
a:hover .arrow { transform: translateX(3px); }
.go { font-weight: 500; display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; text-decoration: none; }
.go__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; transition: text-decoration-thickness .12s ease; }
.go:hover .go__t { text-decoration-thickness: 2px; }

/* ---------- header ---------- */
.site-header { border-bottom: var(--rule); }
.header-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  column-gap: 1.5rem; padding-block: 1rem;
}
.brand { display: block; flex: none; border-radius: var(--radius); }
.brand img { width: 125px; height: 52px; }
.site-nav { flex-basis: 100%; }
.site-nav ul { list-style: none; display: flex; flex-wrap: wrap; column-gap: 1.25rem; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  color: var(--ink); font-weight: 500; font-size: var(--fs-small); text-decoration: none;
}
.site-nav a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }

.menu-btn {
  display: none; align-items: center; gap: .65rem; min-height: 2.75rem; padding: .5rem .9rem;
  background: transparent; color: var(--ink); border: 1px solid var(--ink); border-radius: var(--radius);
  font: 500 var(--fs-small)/1 var(--font-sans); cursor: pointer;
}
.menu-btn__icon { position: relative; width: 1rem; height: .625rem; }
.menu-btn__icon::before, .menu-btn__icon::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
  transition: transform .15s ease;
}
.menu-btn__icon::before { top: 0; }
.menu-btn__icon::after { top: calc(100% - 1.5px); }
.menu-btn[aria-expanded="true"] .menu-btn__icon::before { transform: translateY(calc(.3125rem - .75px)) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__icon::after { transform: translateY(calc(.75px - .3125rem)) rotate(-45deg); }

@media (max-width: 47.99rem) {
  .js .menu-btn { display: inline-flex; }
  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: block; margin-top: .75rem; border-top: var(--rule); }
  .js .site-nav ul { flex-direction: column; }
  .js .site-nav li + li { border-top: var(--rule); }
  .js .site-nav a { display: flex; min-height: 3.25rem; font-size: var(--fs-body); }
}
@media (min-width: 48rem) {
  .header-bar { flex-wrap: nowrap; padding-block: 1.25rem; }
  .site-nav { flex-basis: auto; }
  .site-nav ul { column-gap: 2rem; }
}
@media (min-width: 64rem) {
  .brand img { width: 153px; height: 64px; }
}

/* ---------- shared section scaffolding ---------- */
.band { padding-block: var(--space-section); }
.band--sand { background: var(--sand); --rule: 1px solid var(--stone-400); }
.band--ink { background: var(--ink); color: var(--on-ink); --rule: 1px solid var(--on-ink-rule); }
.band--ink .label { color: var(--blue-light); }
.band--ink a { color: var(--blue-light); }
.band--ink :focus-visible { outline-color: var(--blue-light); }
.band--ink .head .intro { color: var(--on-ink-muted); }

.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gutter); }
.head { display: flex; flex-direction: column; gap: 1rem; }
.head h2 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -.01em; max-width: 20ch; }
.head .intro { color: var(--stone-700); max-width: 36rem; }
.head--split { gap: 1.25rem; }
.head__title { display: flex; flex-direction: column; gap: 1rem; }

@media (min-width: 64rem) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .head--split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
  .head--split > .head__title { grid-column: 1 / 7; }
  .head--split > .intro { grid-column: 8 / 13; }
}

/* photos with an offset flat block */
.photo { position: relative; isolation: isolate; }
.photo::before {
  content: ""; position: absolute; z-index: -1; background: var(--harbour);
  top: var(--offset); bottom: calc(-1 * var(--offset)); left: calc(-1 * var(--offset)); right: var(--offset);
}
.photo--sand::before { background: var(--sand); }
.photo--right::before { left: var(--offset); right: calc(-1 * var(--offset)); }
.photo img { width: 100%; }
.frame { display: block; overflow: hidden; }
.caption { margin-top: calc(var(--offset) + .85rem); font-size: var(--fs-small); line-height: 1.5; color: var(--stone-500); max-width: 40rem; }

/* small pill tags (information, never links) */
.tags { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; }
.tag { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .75rem; border: 1px solid var(--stone-300); border-radius: 999px; font-size: .875rem; line-height: 1.3; white-space: nowrap; }
.tag--held { color: var(--stone-500); }
.tag--next::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--gold); }
.band--ink .tag { border-color: var(--on-ink-rule); color: var(--on-ink-muted); }

/* ---------- hero ---------- */
.hero { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) clamp(3.5rem, 2rem + 5vw, 6rem); }
.hero__text { display: flex; flex-direction: column; gap: 1.5rem; }
.hero h1 { font-size: var(--fs-display); line-height: 1.03; letter-spacing: -.015em; max-width: 14ch; }
.hero .lead { max-width: 37rem; }
.hero__owner { padding-top: 1.25rem; border-top: var(--rule); max-width: 37rem; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem; padding-top: .25rem; }
.hero__figure { margin-top: 2.75rem; }

.figures { list-style: none; margin-top: clamp(3rem, 2rem + 4vw, 5.5rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.figures li { padding: 1.25rem 1rem 0 0; display: flex; flex-direction: column; gap: .35rem; }
.figures__n { font-family: var(--font-serif); font-size: clamp(2.5rem, 2rem + 2vw, 3.75rem); line-height: 1; letter-spacing: -.02em; }
.figures__t { color: var(--stone-700); font-size: var(--fs-small); max-width: 16rem; }

@media (min-width: 48rem) {
  .figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .figures li + li { padding-left: 1.25rem; border-left: var(--rule); }
}
@media (max-width: 47.99rem) {
  .figures li:nth-child(n + 3) { margin-top: 1.25rem; border-top: var(--rule); }
}
@media (min-width: 64rem) {
  .hero__text { grid-column: 1 / 7; grid-row: 1; padding-top: .5rem; }
  .hero { overflow-x: clip; --bleed: calc(var(--margin) + max(0px, (100vw - var(--max)) / 2)); }
  .hero__figure { grid-column: 8 / 13; grid-row: 1; margin-top: 0; margin-right: calc(-1 * var(--bleed)); }
  .hero__figure .caption { padding-right: var(--bleed); }
}

/* ---------- what we do (bento) ---------- */
.bento { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); display: grid; gap: var(--gutter); grid-template-columns: minmax(0, 1fr); }
.tile { display: flex; flex-direction: column; background: var(--paper); min-width: 0; }
.tile__body { padding: clamp(1.4rem, 1rem + 1vw, 2.25rem); display: flex; flex-direction: column; gap: .7rem; }
.tile h3 { font-family: var(--font-sans); font-weight: 600; font-size: clamp(1.1875rem, 1.1rem + .35vw, 1.4375rem); line-height: 1.25; letter-spacing: -.01em; max-width: 26ch; }
.tile p:not(.label) { color: var(--stone-700); max-width: 38rem; }
.tile__fig { position: relative; min-height: 15rem; overflow: hidden; }
.tile__fig img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.tile--ink { background: var(--ink); color: var(--on-ink); }
.tile--ink .label { color: var(--blue-light); }
.tile--ink p:not(.label) { color: var(--on-ink-muted); }
.tile--harbour { background: var(--harbour); }
.tile--harbour .label { color: var(--ink); }

@media (min-width: 48rem) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tile--summit, .tile--culture { grid-column: 1 / -1; }
  .tile--scholar { grid-column: 1 / 4; }
  .tile--visits { grid-column: 4 / 7; }
  .tile--services { grid-column: 1 / -1; }
  .tile--culture { flex-direction: row; }
  .tile--culture .tile__fig { flex: 0 0 48%; }
}
@media (min-width: 64rem) {
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .tile--summit { grid-column: 1 / 8; grid-row: 1 / 3; }
  .tile--summit .tile__fig { flex: 1 1 auto; min-height: 20rem; }
  .tile--scholar { grid-column: 8 / 13; grid-row: 1; }
  .tile--visits { grid-column: 8 / 13; grid-row: 2; }
  .tile--services { grid-column: 1 / 6; grid-row: 3; }
  .tile--culture { grid-column: 6 / 13; grid-row: 3; }
  .tile--culture .tile__fig { flex-basis: 46%; }
}

/* ---------- portfolio ---------- */
.series { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); list-style: none; border-top: 1px solid var(--ink); }
.series > li { display: grid; gap: .75rem 1.5rem; padding-block: 1.5rem; border-bottom: var(--rule); }
.series h3 { font-size: var(--fs-h3); line-height: 1.2; }
.series h3 span { display: block; font-family: var(--font-sans); font-size: var(--fs-small); color: var(--stone-500); margin-top: .3rem; }
.series__org { font-size: var(--fs-small); color: var(--stone-700); }
.series__org strong { display: block; color: var(--ink); font-weight: 600; }

.cases { margin-top: clamp(3.5rem, 2.5rem + 4vw, 6rem); display: grid; gap: clamp(3rem, 2rem + 3vw, 4rem) var(--gutter); }
.case { display: flex; flex-direction: column; gap: 1rem; }
.case figure { margin-bottom: calc(var(--offset) + .5rem); }
.case h3 { font-size: var(--fs-h3); line-height: 1.2; }
.case p:not(.label) { color: var(--stone-700); max-width: 34rem; }
.cases__more { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }

@media (min-width: 48rem) {
  .series > li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .series .tags { grid-column: 1 / -1; }
}
@media (min-width: 64rem) {
  .series > li { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 5fr); }
  .series .tags { grid-column: auto; }
  .cases { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .case--a { grid-column: 1 / 8; }
  .case--b { grid-column: 9 / 13; margin-top: clamp(4rem, 2rem + 6vw, 9rem); }
}

/* ---------- live events (dark band) ---------- */
.events { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); list-style: none; border-top: 1px solid var(--on-ink-muted); }
.event {
  position: relative; display: grid; gap: 1.25rem; padding: 1.75rem 0; border-bottom: var(--rule);
  transition: background-color .15s ease;
}
.event__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.event__date { display: flex; flex-direction: column; gap: .35rem; }
.event__days { font-family: var(--font-serif); font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3.25rem); line-height: 1; letter-spacing: -.02em; }
.event__month { font-size: var(--fs-small); color: var(--on-ink-muted); }
.event__body { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.event h3 { font-size: var(--fs-h3); line-height: 1.15; }
.event__cta { justify-self: start; white-space: nowrap; }
.event__cta::after { content: ""; position: absolute; inset: 0; }
.event__cta:focus-visible { outline: none; }
.event:hover .go__t { text-decoration-thickness: 2px; }
.event:focus-within { outline: 2px solid var(--blue-light); outline-offset: 4px; }
.event__desc { color: var(--on-ink-muted); max-width: 38rem; }
.event:hover .arrow { transform: translateX(3px); }
.events__note { margin-top: 1.5rem; font-size: var(--fs-small); color: var(--on-ink-muted); max-width: 46rem; }

@media (min-width: 48rem) {
  .event { grid-template-columns: 13rem minmax(0, 1fr); column-gap: 2rem; align-items: start; }
  .event__img { grid-row: 1 / 4; }
}
@media (min-width: 80rem) {
  .events { margin-inline: -1rem; }
  .event { grid-template-columns: 16rem 9.5rem minmax(0, 1fr) auto; column-gap: 2.25rem; align-items: center; padding-inline: 1rem; }
  .event__img { grid-row: auto; }
  .event:hover { background: #132C34; }
}

/* ---------- organisations ---------- */
.orgs__head { margin-bottom: clamp(3rem, 2rem + 3vw, 5rem); }
.initiative { row-gap: 2rem; }
.initiative + .initiative { margin-top: clamp(4.5rem, 3rem + 5vw, 8rem); }
.initiative__body { display: flex; flex-direction: column; gap: 1.25rem; }
.initiative__body h3 { font-size: var(--fs-h3); line-height: 1.2; }
.initiative__body h3 span { display: block; font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 500; color: var(--stone-500); margin-top: .35rem; letter-spacing: 0; }
.facts { border-top: var(--rule); }
.facts > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding-block: .75rem; border-bottom: var(--rule); font-size: var(--fs-small); }
.facts dt { color: var(--stone-500); }

.how { margin-top: clamp(4.5rem, 3rem + 5vw, 8rem); background: var(--harbour); padding: clamp(1.75rem, 1.25rem + 2vw, 3rem); display: grid; gap: 2rem; --rule: 1px solid #B5C7CE; }
.how__head h3 { font-size: var(--fs-h3); line-height: 1.2; margin-top: .6rem; max-width: 20ch; }
.how__head p:not(.label) { margin-top: .75rem; color: var(--stone-700); max-width: 30rem; }
.how .label { color: var(--ink); }
.roles { display: grid; gap: 2rem; }
.roles h4 { font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 600; margin: 0 0 .75rem; }
.roles ul { list-style: none; border-top: var(--rule); }
.roles li { padding-block: .7rem; border-bottom: var(--rule); padding-left: 1.5rem; position: relative; font-size: var(--fs-small); }
.roles li::before { content: ""; position: absolute; left: 0; top: 1.4em; width: .75rem; height: 1px; background: var(--blue); }

@media (min-width: 48rem) {
  .initiative .photo { max-width: 34rem; }
  .roles { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
}
@media (min-width: 64rem) {
  .initiative { align-items: center; }
  .initiative--cgad .initiative__figure { grid-column: 1 / 6; grid-row: 1; }
  .initiative--cgad .initiative__body { grid-column: 7 / 12; grid-row: 1; }
  .initiative--clgd .initiative__body { grid-column: 2 / 7; grid-row: 1; }
  .initiative--clgd .initiative__figure { grid-column: 8 / 13; grid-row: 1; }
  .initiative .photo { max-width: none; }
  .how { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 3rem; }
}

/* phones: shorter photo frames, so the page does not run long */
@media (max-width: 47.99rem) {
  .event { grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: 1.1rem; row-gap: 1rem; }
  .event__img { grid-column: 1; grid-row: 1; }
  .event__img img { aspect-ratio: 1 / 1; }
  .event__date { grid-column: 2; grid-row: 1; align-self: center; }
  .event__body, .event__cta { grid-column: 1 / -1; }
}
@media (max-width: 63.99rem) {
  .initiative--clgd .initiative__figure { order: -1; }
  .initiative .photo img { aspect-ratio: 4 / 3; object-fit: cover; }
  .initiative--cgad .photo img { aspect-ratio: 1 / 1; object-position: 50% 25%; }
}
@media (min-width: 64rem) {
  .initiative--cgad .photo img { aspect-ratio: 5 / 6; object-fit: cover; object-position: 50% 100%; }
}

/* ---------- events timeline ----------
   Phones and tablets: a vertical rail. From 64rem: a wave across the stage with the events on its centre line.
   The stage is 12:5 and the wave SVG fills it, so list items are placed in percentages of the stage. */
.timeline { margin-top: clamp(4.5rem, 3rem + 5vw, 8rem); }
.timeline__head { display: flex; flex-direction: column; gap: 1rem; margin-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); }
.timeline__head h3 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); line-height: 1.1; max-width: 22ch; }

.ill { display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ill .d { stroke-dasharray: 1; }
.ill .acc { stroke: var(--blue); }
.ill .fp { fill: var(--paper); }
.ill .tint { fill: var(--sand); stroke: none; }
.ill--porto .tint, .ill--geneva .tint { fill: var(--harbour); }
.ill .wheel { transform-box: fill-box; transform-origin: center; }

.tl__wave, .tl__drift { display: none; }
.tl__list { list-style: none; }
.tl__item { position: relative; display: grid; grid-template-columns: 2.25rem 5.5rem minmax(0, 1fr); column-gap: 1rem; align-items: start; padding-block: 1.25rem; }
.tl__item::before { content: ""; position: absolute; left: calc(1.125rem - 1px); top: 0; bottom: 0; width: 2px; background: var(--blue); transform-origin: 50% 0; }
.tl__item:first-child::before { top: 2rem; }
.tl__item:last-child::before { bottom: auto; height: 2rem; }
.tl__node { grid-column: 1; grid-row: 1; justify-self: center; margin-top: 1.25rem; position: relative; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--blue); border: 3px solid var(--paper); box-sizing: content-box; }
.tl__item--next .tl__node, .tl__item--upcoming .tl__node { background: var(--paper); border: 2.5px solid var(--gold); width: calc(1.125rem - 2px); height: calc(1.125rem - 2px); }
.tl__item--next .tl__node::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1.5px solid var(--gold); opacity: 0; }
.ill { grid-column: 2; grid-row: 1; }
.tl__text { grid-column: 3; grid-row: 1; display: flex; flex-direction: column; gap: .3rem; }
.tl__date { font-weight: 600; font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--blue); }
.tl__city { font-family: var(--font-serif); font-weight: 450; font-size: var(--fs-h3); line-height: 1.15; margin: 0; }
.tl__meta { font-size: var(--fs-small); color: var(--stone-700); line-height: 1.45; }
.tl__status { font-size: .875rem; color: var(--stone-500); }
.tl__item--next .tl__status, .tl__item--upcoming .tl__status { color: var(--ink); font-weight: 600; }
.tl__legend { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin-top: 1.5rem; font-size: var(--fs-small); color: var(--stone-700); }
.tl__key::before { content: ""; display: inline-block; width: .7rem; height: .7rem; margin-right: .5rem; border-radius: 50%; vertical-align: -.05em; background: var(--blue); }
.tl__key--upcoming::before { background: var(--paper); box-shadow: inset 0 0 0 2px var(--gold); }

@media (min-width: 64rem) {
  .timeline__stage { position: relative; aspect-ratio: 12 / 5; }
  .tl__wave { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
  .tl__track { fill: none; stroke: var(--stone-300); stroke-width: 1.5; }
  .tl__line { fill: none; stroke: var(--blue); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 1; }
  .tl__drift { display: block; position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
  .tl__drift::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 140%; background: url("../images/timeline-drift.svg") repeat-x left center / auto 100%; }
  .tl__list { position: absolute; inset: 0; }
  .tl__item { position: absolute; top: 0; bottom: 0; width: 19%; padding: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: 40% 20% 40%; justify-items: center; text-align: center; }
  .tl__item:nth-child(1) { left: .5%; }
  .tl__item:nth-child(2) { left: 20.5%; }
  .tl__item:nth-child(3) { left: 40.5%; }
  .tl__item:nth-child(4) { left: 60.5%; }
  .tl__item:nth-child(5) { left: 80.5%; }
  .tl__item::before { display: none; }
  .ill { grid-column: 1; grid-row: 1; align-self: end; width: min(88%, 11rem); }
  .tl__node { grid-column: 1; grid-row: 2; align-self: center; margin-top: 0; }
  .tl__text { grid-column: 1; grid-row: 3; align-self: start; align-items: center; padding-top: .5rem; }
  .timeline__head { margin-bottom: .5rem; }
  .tl__legend { justify-content: center; margin-top: -1.5rem; }
}

/* ---------- contact ---------- */
.contact__details { display: grid; gap: 0; border-top: 1px solid var(--ink); }
.contact__details > div { display: grid; gap: .25rem; padding-block: 1.1rem; border-bottom: var(--rule); }
.contact__details dt { color: var(--stone-500); font-size: var(--fs-small); }
.contact__details dd { font-size: var(--fs-lead); line-height: 1.45; overflow-wrap: anywhere; }
.contact__more { margin-top: 2.5rem; display: grid; gap: 1.5rem; }
.contact__more h3 { font-size: var(--fs-h3); line-height: 1.2; }
.contact__more ul { list-style: none; display: grid; gap: .25rem; }
.contact__details dd a, .contact__more a, .footer__col address a { display: inline-block; padding-block: .35rem; }

@media (min-width: 48rem) {
  .contact__details > div { grid-template-columns: 12rem minmax(0, 1fr); gap: 1.5rem; align-items: baseline; }
}
@media (min-width: 64rem) {
  .contact__head { grid-column: 1 / 5; }
  .contact__body { grid-column: 6 / 13; }
}

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: var(--on-ink); padding-block: clamp(3.5rem, 2.5rem + 3vw, 5rem) 2rem; font-size: var(--fs-small); }
.site-footer a { color: var(--blue-light); }
.site-footer :focus-visible { outline-color: var(--blue-light); }
.footer__grid { display: grid; gap: 2.5rem; }
.footer__brand img { width: 134px; height: 56px; }
.footer__brand p { margin-top: 1.25rem; color: var(--on-ink-muted); max-width: 26rem; }
.footer__col h2 { font-family: var(--font-sans); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--blue-light); margin-bottom: .9rem; }
.footer__col ul { list-style: none; display: grid; gap: .1rem; }
.footer__col li a { display: inline-flex; align-items: center; min-height: 2.25rem; }
.footer__col address { font-style: normal; color: var(--on-ink-muted); line-height: 1.6; }
.footer__col address span { display: block; }
.footer__col address span + span { margin-top: .35rem; }
.footer__base { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--on-ink-rule); display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; color: var(--on-ink-muted); }

@media (min-width: 48rem) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .footer__grid { grid-template-columns: 5fr 4fr 3fr 3fr; column-gap: 2.5rem; }
}

/* ---------- policy pages ---------- */
.page-head { padding-block: clamp(2.75rem, 1.5rem + 4vw, 5rem) clamp(2rem, 1.5rem + 2vw, 3rem); border-bottom: var(--rule); }
.page-head__inner { display: flex; flex-direction: column; gap: 1.25rem; max-width: 52rem; }
.page-head h1 { font-size: var(--fs-h1-page); line-height: 1.06; letter-spacing: -.01em; }
.page-head .meta { color: var(--stone-500); font-size: var(--fs-small); }

.policy { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) var(--space-section); }
.toc { font-size: var(--fs-small); margin-bottom: 2.5rem; }
.toc h2 { font-family: var(--font-sans); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--blue); margin-bottom: .75rem; }
.toc ol { list-style: none; border-top: var(--rule); counter-reset: toc; }
.toc li { border-bottom: var(--rule); counter-increment: toc; }
.toc a { display: flex; gap: .65rem; padding-block: .55rem; min-height: 2.75rem; align-items: center; color: var(--ink); text-decoration: none; }
.toc a::before { content: counter(toc); min-width: 1.4rem; color: var(--stone-500); font-variant-numeric: tabular-nums; }
.toc a:hover { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.prose { max-width: 42rem; }
.prose > * + * { margin-top: 1rem; }
.prose section + section { margin-top: 3rem; padding-top: 2.5rem; border-top: var(--rule); }
.prose h2 { font-size: var(--fs-h3); line-height: 1.2; margin-bottom: 1rem; }
.prose h2 .n { font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 600; color: var(--blue); display: block; margin-bottom: .35rem; font-variant-numeric: tabular-nums; }
.prose h3 { font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 600; margin-top: 1.5rem; }
.prose p + p, .prose p + ul, .prose ul + p, .prose h3 + p, .prose h3 + ul, .prose table + p, .prose p + table { margin-top: 1rem; }
.prose ul { list-style: none; display: grid; gap: .55rem; }
.prose ul li { padding-left: 1.5rem; position: relative; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .8em; width: .75rem; height: 1px; background: var(--blue); }
.prose table { font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: .75rem 1rem .75rem 0; border-bottom: var(--rule); }
.prose thead th { border-bottom: 1px solid var(--ink); font-weight: 600; }
.summary { background: var(--sand); padding: 1.5rem 1.5rem 1.75rem; margin-bottom: 2.5rem; --rule: 1px solid var(--stone-400); }
.summary h2 { font-size: var(--fs-h3); margin-bottom: 1rem; }
.summary ul { list-style: none; display: grid; gap: .7rem; }
.summary li { padding-left: 1.5rem; position: relative; }
.summary li::before { content: ""; position: absolute; left: 0; top: .8em; width: .75rem; height: 1px; background: var(--blue); }

@media (min-width: 48rem) and (max-width: 63.99rem) {
  .toc ol { columns: 2; column-gap: 2rem; }
  .toc li { break-inside: avoid; }
}

@media (min-width: 64rem) {
  .policy .grid { align-items: start; }
  .toc { grid-column: 1 / 4; grid-row: 1 / span 2; position: sticky; top: 1.5rem; margin-bottom: 0; max-height: calc(100vh - 3rem); overflow-y: auto; overscroll-behavior: contain; }
  .toc a:focus-visible { outline-offset: -2px; }
  .summary { grid-column: 5 / 12; grid-row: 1; margin-bottom: 1.5rem; }
  .prose { grid-column: 5 / 12; }
  .page-head__inner { margin-left: calc((100% + var(--gutter)) / 12 * 4); }
}


/* ---------- phones: section by section ---------- */
.swipe-hint { display: none; }
.toc-m { display: none; }
@media (max-width: 47.99rem) {
  /* What we do: a swipeable row of cards, the next one peeking in */
  .bento {
    display: flex; gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--margin);
    margin-inline: calc(-1 * var(--margin)); padding: 0 var(--margin) .5rem; margin-top: 1.25rem;
    scrollbar-width: none;
  }
  .bento::-webkit-scrollbar { display: none; }
  .bento:focus-visible { outline-offset: -2px; }
  .tile { flex: 0 0 min(84%, 21rem); scroll-snap-align: start; }
  .tile__fig { min-height: 11.5rem; }
  .swipe-hint { display: flex; align-items: center; gap: .45rem; margin-top: 1.5rem; font-size: var(--fs-small); color: var(--stone-500); }

  /* Roles: tighter rows */
  .roles li { padding-block: .55rem; }

  /* Footer: the two short link lists side by side */
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
  .footer__brand, .footer__col:nth-child(2) { grid-column: 1 / -1; }

  /* Policy pages: the contents list folds away */
  .toc { display: none; }
  .toc-m { display: block; margin-bottom: 2rem; border-block: var(--rule); font-size: var(--fs-small); }
  .toc-m summary { display: flex; align-items: center; justify-content: space-between; min-height: 3rem; cursor: pointer; list-style: none;
    font-weight: 600; font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--blue); }
  .toc-m summary::-webkit-details-marker { display: none; }
  .toc-m summary::after { content: ""; width: .5rem; height: .5rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; }
  .toc-m[open] summary::after { transform: translateY(2px) rotate(-135deg); }
  .toc-m ol { list-style: none; counter-reset: toc; padding-bottom: .5rem; }
  .toc-m li { counter-increment: toc; border-top: var(--rule); }
  .toc-m a { display: flex; gap: .65rem; align-items: center; min-height: 2.75rem; color: var(--ink); text-decoration: none; }
  .toc-m a::before { content: counter(toc); min-width: 1.4rem; color: var(--stone-500); font-variant-numeric: tabular-nums; }
}

/* ---------- 404 ---------- */
.notfound { padding-block: clamp(4rem, 3rem + 8vw, 9rem); }
.notfound__inner { display: flex; flex-direction: column; gap: 1.5rem; max-width: 40rem; }
.notfound h1 { font-size: var(--fs-display); line-height: 1.04; }
.notfound ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }

/* ---------- motion ----------
   CSS only, no script. Nothing is ever hidden or faded at rest:
   - on load, the hero copy rises in (the heading and lead move but never fade, so they paint at once)
     and the colour block behind the hero photo slides out;
   - while scrolling (scroll-driven, so it runs on the compositor and never on the main thread):
     text blocks rise into place, fading only in the last few rem at the bottom edge of the screen;
     event rows glide in from the side; photos drift slowly inside their frames (parallax); the colour
     blocks slide out from behind photos; a thin blue line along the top shows reading progress.
     Browsers without scroll-driven animations simply show the page still;
   - page-to-page navigation cross-fades (view transitions, where supported).
   All of it switches off for visitors who ask for reduced motion. */
@view-transition { navigation: auto; }

@keyframes rise { from { opacity: 0; translate: 0 14px; } }
@keyframes rise-text { from { translate: 0 14px; } }
@keyframes block-left { from { translate: var(--offset) calc(-1 * var(--offset)); } }
@keyframes block-right { from { translate: calc(-1 * var(--offset)) calc(-1 * var(--offset)); } }
@keyframes reveal { 0% { opacity: 0; translate: 0 32px; } 35% { opacity: 1; } 100% { opacity: 1; translate: 0 0; } }
@keyframes reveal-x { 0% { opacity: 0; translate: 48px 0; } 35% { opacity: 1; } 100% { opacity: 1; translate: 0 0; } }
@keyframes parallax { from { transform: translateY(calc(-1 * var(--px))) scale(var(--ps)); } to { transform: translateY(var(--px)) scale(var(--ps)); } }
@keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tl-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes tl-tint { from { opacity: 0; } to { opacity: 1; } }
@keyframes tl-pop { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes tl-rise { from { translate: 0 16px; } to { translate: 0 0; } }
@keyframes tl-rail { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes tl-spin { from { transform: rotate(-40deg); } to { transform: rotate(80deg); } }
@keyframes tl-drift { to { transform: translateX(-28.5714%); } }
@keyframes tl-pulse { from { opacity: .85; transform: scale(.7); } to { opacity: 0; transform: scale(2.1); } }
@keyframes menu-in { from { opacity: 0; translate: 0 -6px; } }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .hero__text > *, .page-head__inner > *, .notfound__inner > * { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .hero__text > :nth-child(2), .page-head__inner > :nth-child(2), .notfound__inner > :nth-child(2) { animation-delay: .06s; }
  .hero__text > :nth-child(3), .page-head__inner > :nth-child(3), .notfound__inner > :nth-child(3) { animation-delay: .12s; }
  .hero__text > :nth-child(4), .page-head__inner > :nth-child(4), .notfound__inner > :nth-child(4) { animation-delay: .18s; }
  .hero__text > :nth-child(5) { animation-delay: .24s; }
  .hero h1, .hero .lead, .page-head h1, .page-head .lead, .notfound h1, .notfound .lead { animation-name: rise-text; }
  .hero__figure .photo::before { animation: block-left .9s .3s cubic-bezier(.2, .7, .2, 1) both; }
  .figures li { animation: rise .7s .32s cubic-bezier(.2, .7, .2, 1) both; }
  .figures li:nth-child(2) { animation-delay: .38s; }
  .figures li:nth-child(3) { animation-delay: .44s; }
  .figures li:nth-child(4) { animation-delay: .5s; }

  .js .site-nav.is-open { animation: menu-in .22s ease-out both; }
  .tl__drift::before { animation: tl-drift 40s linear infinite; }
  .tl__item--next .tl__node::after { animation: tl-pulse 2.6s cubic-bezier(.2, .7, .2, 1) infinite; }

  .event__img { overflow: hidden; }
  .event__img img { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
  .event:hover .event__img img { transform: scale(1.04); }

  @supports (animation-timeline: view()) {
    /* text blocks: the fade finishes 2.8rem inside the screen edge, the rise by 8rem, whatever the block's height */
    .band .head, .tile, .series > li, .case, .initiative__body, .how, .cases__more {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 8rem;
    }
    .event { animation: reveal-x linear both; animation-timeline: view(); animation-range: entry 0% entry 10rem; }

    /* photos drift inside their clipping frame: slower than the page, never revealing an edge */
    .frame, .tile__fig { view-timeline: --media block; }
    .frame img, .tile__fig img { --px: 4%; --ps: 1.1; animation: parallax linear both; animation-timeline: --media; animation-range: cover 0% cover 100%; }
    .initiative .frame img { --px: 2%; --ps: 1.05; }

    /* colour blocks slide out from behind photos as they arrive (the hero has its own load animation) */
    .band .photo { view-timeline: --photo block; }
    .band .photo::before { animation: block-left linear both; animation-timeline: --photo; animation-range: entry 0% cover 40%; }
    .band .photo--right::before { animation-name: block-right; }

    /* timeline, phones and tablets: each event's rail, node and landmark draw as it scrolls in */
    @media (max-width: 63.99rem) {
      .tl__item { view-timeline: --item block; }
      .tl__item::before { animation: tl-rail linear both; animation-timeline: --item; animation-range: entry 0% cover 45%; }
      .tl__node { animation: tl-pop linear both; animation-timeline: --item; animation-range: entry 20% entry 70%; }
      .ill .d { animation: tl-draw linear both; animation-timeline: --item; animation-range: entry 10% cover 45%; }
      .ill .tint { animation: tl-tint linear both; animation-timeline: --item; animation-range: entry 30% cover 45%; }
    }
    /* timeline, desktop: the wave draws itself across the stage and each event appears as the line reaches it
       (the line reaches node k at (k + 1) / 6 of its length, i.e. at --c of the stage's scroll range) */
    @media (min-width: 64rem) {
      .timeline__stage { view-timeline: --tl block; }
      .tl__line { animation: tl-draw linear both; animation-timeline: --tl; animation-range: cover 18% cover 52%; }
      .tl__item:nth-child(1) { --c: 23.7%; }
      .tl__item:nth-child(2) { --c: 29.3%; }
      .tl__item:nth-child(3) { --c: 35%; }
      .tl__item:nth-child(4) { --c: 40.7%; }
      .tl__item:nth-child(5) { --c: 46.3%; }
      .tl__node { animation: tl-pop linear both; animation-timeline: --tl; animation-range: cover calc(var(--c) - 1%) cover calc(var(--c) + 3%); }
      .ill .d { animation: tl-draw linear both; animation-timeline: --tl; animation-range: cover calc(var(--c) - 1%) cover calc(var(--c) + 11%); }
      .ill .tint { animation: tl-tint linear both; animation-timeline: --tl; animation-range: cover calc(var(--c) + 4%) cover calc(var(--c) + 11%); }
      .tl__text { animation: tl-rise linear both; animation-timeline: --tl; animation-range: cover calc(var(--c) - 4%) cover calc(var(--c) + 4%); }
      .ill .wheel { animation: tl-spin linear both; animation-timeline: --tl; animation-range: cover 0% cover 100%; }
    }

    @media (max-width: 47.99rem) {
      .bento .tile, .bento .tile__fig img { animation: none; }
    }

    /* reading progress */
    body::before {
      content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 50; pointer-events: none;
      background: var(--blue); transform-origin: 0 50%;
      animation: progress linear both; animation-timeline: scroll(root);
    }
  }
}

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

/* ---------- print ---------- */
@media print {
  .site-header nav, .menu-btn, .skip, .toc, .hero__actions { display: none !important; }
  .band--ink, .tile--ink { background: #fff !important; color: #000 !important; }
  body { background: #fff; }
  .site-footer { background: #fff; color: #000; }
  .site-footer a, a { color: #000; }
  .photo::before { display: none; }
  body::before, .tl__drift { display: none !important; }
}