/* ==========================================================================
   WORLD 00: BLACK ALBINISM
   The organisation itself. Editorial, warm, dignified. Ink on cream, with
   sunlight used as an accent rather than a threat.
   ========================================================================== */
:root{
  /* Palette taken straight from the Black Albinism logo:
     black letterforms, #FAB727 gold, #E61C2D red. */
  --ink:#141210;
  --paper:#FFFCF7;
  --surface:#F7F1E7;
  --surface-2:#EFE5D5;
  --muted:#5C554C;
  --line:rgba(20,18,16,.14);
  --brand:#FAB727;          /* logo gold, graphic use */
  --brand-ink:#141210;
  --red:#E61C2D;            /* logo red, graphic use */
  --accent:#C81422;         /* deepened red, safe for small text */
  --deep:#141210;
  --focus:#1C6DD0;
  --foot-bg:#141210;
  --foot-fg:#FFFCF7;

  --font-display:"Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
h1,h2,h3{ font-variation-settings:"SOFT" 0, "WONK" 1; }
.eyebrow,.link-arrow,.card__kicker{ color:var(--accent); }
::selection{ background:var(--brand); color:var(--brand-ink); }

/* ------------------------------------------------------------------ HERO */
.hero{
  position:relative; isolation:isolate;
  min-height:min(92svh, 860px);
  display:flex; flex-direction:column; justify-content:flex-end;
  color:#fff;
  padding-block:clamp(4rem,12vh,8rem) clamp(1.5rem,4vh,2.5rem);
  background:#191411;
}
/* Lighter than it was. The photograph is the point; the words only need
   enough shadow under them to stay readable. */
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to top, rgba(10,8,6,.88) 0%, rgba(10,8,6,.48) 34%, rgba(10,8,6,.10) 68%, rgba(10,8,6,.22) 100%);
}
.hero__in{ position:relative; z-index:2; width:100%; text-align:center; }
.hero__in::before{
  content:""; position:absolute; z-index:-1;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(1100px, 100%); height:min(760px, 128%);
  background:radial-gradient(60% 52% at 50% 46%, rgba(8,6,4,.62) 0%, rgba(8,6,4,.34) 52%, transparent 78%);
  pointer-events:none;
}
.hero .btn-row{ justify-content:center; }
/* The strapline, broken. "Greatness" is the only gold word and it sits on
   its own line so it never lands on top of a busy photograph. */
.hero__title{
  margin:0 0 1.1rem; font-weight:900; letter-spacing:-.04em;
  display:flex; flex-direction:column; align-items:center;
  line-height:.9; text-align:center;
}
.hero__title .l1{
  font-size:var(--step-3); font-weight:600; letter-spacing:-.01em;
  color:rgba(255,255,255,.92); margin-bottom:-.06em;
}
.hero__title .l2{
  font-size:var(--step-7); color:var(--brand); line-height:.84;
  font-variation-settings:"WONK" 1;
  text-shadow:0 8px 40px rgba(10,8,6,.75);
}
.hero__title .l3{
  font-size:var(--step-3); font-style:italic; font-weight:400;
  color:rgba(255,255,255,.9); margin-top:.1em;
  font-variation-settings:"WONK" 1;
}
.hero__title .l3 b{ font-style:normal; font-weight:600; color:var(--brand); }
.hero__lede{
  font-size:var(--step-1); max-width:46ch; color:rgba(255,255,255,.90);
  margin:0 auto var(--sp-5); text-align:center;
  text-shadow:0 2px 18px rgba(10,8,6,.6);
}
.hero__foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-5);
  justify-content:space-between; margin-top:var(--sp-7);
  padding-top:var(--sp-4); border-top:1px solid rgba(255,255,255,.2);
}
.hero__scroll{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:var(--step--2); letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.7); text-decoration:none; font-weight:700;
}
.hero__scroll i{
  width:26px; height:40px; border:1.5px solid rgba(255,255,255,.5); border-radius:14px;
  position:relative; display:inline-block;
}
.hero__scroll i::after{
  content:""; position:absolute; left:50%; top:8px; width:3px; height:7px; border-radius:2px;
  background:var(--brand); transform:translateX(-50%);
  animation:mouse 1.8s var(--ease) infinite;
}
@keyframes mouse{ 0%,100%{ transform:translate(-50%,0); opacity:1 } 60%{ transform:translate(-50%,12px); opacity:.2 } }

/* --------------------------------------------------------- OFFERS TICKER */
.offers{
  background:var(--ink); color:#fff; border:0;
  position:relative; z-index:3;
}
.offers .marquee__item{ border-right-color:rgba(255,255,255,.16); }
.offers .marquee__item strong{ color:var(--brand); }
.offers__cta{
  position:absolute; right:0; top:0; bottom:0; z-index:4;
  display:none; align-items:center; padding-inline:1.4rem;
  background:var(--brand); color:var(--brand-ink);
  font-weight:800; font-size:var(--step--2); letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none;
}
.offers__cta:hover{ filter:brightness(1.08); }
@media (min-width:720px){ .offers__cta{ display:flex; } }
.offers__wrap{ position:relative; overflow:hidden; }

/* ------------------------------------------------------------ DATA CARDS */
.datacard{
  background:linear-gradient(160deg,#1D1A16,#141210); color:#fff;
  border-radius:var(--r-lg); padding:clamp(1.5rem,3vw,2.4rem);
  display:grid; gap:1.4rem;
}
.datacard h3{ font-size:var(--step-1); margin:0; }
.dataline{ display:grid; gap:.5rem; }
.dataline__top{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; font-size:var(--step--1); }
.dataline__bar{ height:9px; border-radius:5px; background:rgba(255,255,255,.16); overflow:hidden; }
.dataline__bar i{ display:block; height:100%; background:var(--brand); border-radius:5px; width:var(--w,0%); }
.dataline__bar--empty{ background:repeating-linear-gradient(115deg, rgba(255,255,255,.16) 0 6px, transparent 6px 12px); }

/* --------------------------------------------------------------- REASONS */
/* Red into yellow, never black. The short red run is ours, the rest of the
   rule carries the gold across. */
.reason{
  position:relative; padding-top:var(--sp-5);
  border-top:2px solid var(--brand);
}
.reason::after{ content:""; position:absolute; top:-2px; left:0; width:3.2rem; height:2px; background:var(--red); }
.reason__n{ display:none; }
.reason h3{ font-size:var(--step-2); margin-bottom:.6rem; }
.reason p{ color:var(--muted); }

/* --------------------------------------------------------------- STORIES */
.storycard{
  /* Two rows, the picture at its own size and the words taking the rest.
     Without this the card stretches to match its tallest neighbour and
     splits the leftover space between both rows, which pushes the text
     of every shorter card down by half the difference. That is why no
     two titles ever lined up. */
  display:grid; grid-template-rows:auto 1fr; align-content:start;
  gap:0; text-decoration:none; position:relative;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.storycard:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.storycard .imgph{ border-radius:0; }
/* Category, headline, standfirst, link. The standfirst takes up the
   slack so the link sits on the floor of every card and the headlines
   all start on the same line. */
.storycard__body{
  padding:var(--sp-5);
  display:grid; grid-template-rows:auto auto 1fr auto; align-content:start;
}
.storycard__meta{
  display:flex; gap:.7rem; align-items:center; flex-wrap:wrap;
  font-size:var(--step--2); letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; color:var(--accent); margin-bottom:.7rem;
}
.storycard h3{ font-size:var(--step-2); margin-bottom:.5rem; align-self:start; }
.storycard__go{ margin:var(--sp-4) 0 0; align-self:end; }
.storycard p{ color:var(--muted); font-size:var(--step--1); }

/* -------------------------------------------------------------- PARTNERS */
.partners{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr)); }
.partner{
  background:var(--paper); min-height:118px;
  display:grid; place-items:center; gap:.5rem; padding:1.2rem; text-align:center;
}
.partner__slot{
  width:100%; max-width:130px; height:44px; border-radius:var(--r-sm);
  border:1.5px dashed var(--line);
  display:grid; place-items:center;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:color-mix(in srgb, var(--ink) 72%, transparent);
}

/* ---------------------------------------------------------------- PEOPLE */
/* Our people, in our own colours.

   The card is dark so the name can actually be gold. Gold type on cream is
   the kind of brand decision that quietly fails the people this site is
   for; on near-black it reads at about ten to one. The role sits under it
   in red. Nobody has to squint. */
.person{
  text-align:center; overflow:hidden; position:relative;
  background:var(--deep); color:#fff;
  border-radius:var(--r-lg);
  display:flex; flex-direction:column;
  border:1px solid transparent;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
/* The hover has to be felt, not guessed at: the card lifts, the gold
   edge arrives, and the portrait comes up out of the dark. */
.person:hover{
  transform:translateY(-6px); box-shadow:var(--shadow-lg);
  border-color:var(--brand);
}
.person .imgph{
  margin:0; border-radius:0;
  --ph-a:#C98A3E; --ph-b:#2B211A;
}
.person .imgph img{ transition:transform 1s var(--ease), filter var(--dur) var(--ease); }
.person:hover .imgph img{ transform:scale(1.045); filter:saturate(1.08) brightness(1.04); }
/* One block, one rhythm, so a two-line role never shunts a card out of
   line with the one beside it. */
.person__body{
  display:flex; flex-direction:column; gap:.35rem;
  padding:var(--sp-5) var(--sp-4) calc(var(--sp-5) + .2rem);
  flex:1;
}
.person h3{
  font-size:var(--step-1); margin:0; line-height:1.2;
  color:var(--brand);
}
.person .person__role{
  color:#FF5E6D; font-weight:800; margin:0;
  font-size:var(--step--1); letter-spacing:.06em;
  text-transform:uppercase; line-height:1.3;
}
.person p{ font-size:var(--step--1); color:rgba(255,255,255,.72); margin:.45rem 0 0; }
@media (prefers-reduced-motion: reduce){
  .person:hover .imgph img{ transform:none; }
}

/* ---------------------------------------------------------------- TRACKS */
.track{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:340px; padding:var(--sp-5);
  border-radius:var(--r-lg); color:#fff; text-decoration:none;
  background:var(--ink);
}
.track .imgph{ position:absolute; inset:0; z-index:-2; border-radius:0; }
.track::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(10,8,6,.9), rgba(10,8,6,.25) 62%, transparent);
  transition:background var(--dur) var(--ease);
}
.track:hover::after{ background:linear-gradient(to top, rgba(10,8,6,.94), rgba(10,8,6,.5) 70%, rgba(0,0,0,.15)); }
.track__n{ font-family:var(--font-mono); font-size:var(--step--2); letter-spacing:.2em; opacity:.75; }
.track h3{ font-size:var(--step-2); margin:.3rem 0 .4rem; }
.track p{ font-size:var(--step--1); opacity:.85; margin:0 0 .8rem; max-width:34ch; }

/* ------------------------------------------------------------ PULL QUOTE */
.pullquote{
  border-left:4px solid var(--brand);
  padding-left:clamp(1.2rem,3vw,2.2rem);
}
.pullquote .quote{ font-style:italic; }

/* --------------------------------------------------------------- BANDS */
.band-deep{ background:var(--deep); color:#fff; }
.band-deep .stat{ background:#1D1A16; }
.band-deep .lede{ color:rgba(255,255,255,.8); }
.band-deep .eyebrow{ color:var(--brand); }
.band-deep .card{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:#fff; }
.band-deep .stats{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.2); }
.band-deep .stat{ background:#1D1A16; color:#fff; }
.band-deep .stat__label{ color:rgba(255,255,255,.75); }
.band-deep .ni{ color:rgba(255,255,255,.8); }
.band-deep .ni-figure__slot,.band-deep .stat__val{ color:rgba(255,255,255,.5); }
.band-cream{ background:var(--surface); }
.band-ink{ background:var(--ink); color:#fff; }
.band-ink .lede,.band-ink p{ color:rgba(255,255,255,.8); }
.band-ink .eyebrow{ color:var(--brand); }

/* ----------------------------------------------------------- CTA CLOSER */
.closer{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--ink); color:#fff;
  padding-block:clamp(4rem,9vw,7rem);
}
.closer::before{
  content:""; position:absolute; z-index:-1; inset:-40% -10% auto auto;
  width:min(70vw,720px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(233,161,59,.42), transparent 62%);
}
.closer h2{ font-size:var(--step-5); max-width:16ch; }

/* --------------------------------------------------------------- FIGURE */
.figure-note{ font-size:var(--step--2); color:var(--muted); margin-top:.6rem; }
.two-col-text{ column-gap:var(--sp-7); }
@media (min-width:820px){ .two-col-text{ column-count:2; } }

/* ---------------------------------------------------------------- ARTICLE
   One story, read properly. Narrow measure, generous rhythm, pictures that
   keep their frame. Nothing here is decorative for its own sake: it all
   serves the sentence a reader is in the middle of.
   -------------------------------------------------------------------- */
.storycard__go{ margin:.9rem 0 0; }
.storycard__go .link-arrow{ font-size:var(--step--2); }
.storycard:hover .storycard__go .link-arrow{ text-decoration:underline; }

.artHead{ padding:calc(var(--sp-8) + 2.4rem) 0 var(--sp-5); }
.art__title{ font-size:var(--step-6); line-height:1.02; max-width:20ch; margin:.3rem 0 .9rem; }
.artHead .lede{ max-width:60ch; }
.art__byline{
  margin-top:1.2rem; font-size:var(--step--2); letter-spacing:.09em;
  text-transform:uppercase; font-weight:700; color:var(--muted);
}
.art__hero{ margin:0 0 var(--sp-7); }
.art__hero .imgph{ border-radius:0; }
.art__hero figcaption{
  max-width:var(--wrap-narrow); margin:.8rem auto 0; padding:0 var(--gutter);
  font-size:var(--step--2); color:var(--muted); line-height:1.5;
}
@media (min-width:900px){
  .art__hero .imgph{ border-radius:var(--r-lg); max-width:1180px; margin:0 auto; }
}

.art{ padding-top:0; }
.art__body{ font-size:var(--step-1); line-height:1.68; }
.art__body > * + *{ margin-top:1.15em; }
.art__body h2{ font-size:var(--step-3); line-height:1.15; margin-top:2em; }
.art__body h3{ font-size:var(--step-2); line-height:1.2; margin-top:1.8em; }
.art__body h4{ font-size:var(--step-1); margin-top:1.6em; }
.art__body ul, .art__body ol{ padding-left:1.3em; }
.art__body li + li{ margin-top:.5em; }
.art__body a{ color:inherit; text-underline-offset:.18em; text-decoration-thickness:2px; }
.art__body code{
  font-family:var(--font-mono); font-size:.85em;
  background:color-mix(in srgb, var(--ink) 7%, transparent);
  padding:.12em .4em; border-radius:var(--r-sm);
}
.art__body blockquote{
  margin:1.8em 0; padding:0 0 0 1.4rem;
  border-left:4px solid var(--brand);
  font-family:var(--font-display); font-size:var(--step-2);
  line-height:1.3; color:var(--ink);
}
.art__body blockquote p{ margin:0; }
.art__body hr{ border:0; border-top:1px solid var(--line); margin:2.2em 0; }
.art__fig{ margin:1.8em 0; }
.art__fig img{ width:100%; height:auto; display:block; border-radius:var(--r-md); }
.art__back{ margin-top:var(--sp-7); padding-top:var(--sp-5); border-top:1px solid var(--line); }

/* -------------------------------------------------- HEADS ON THE CENTRE LINE
   Some section heads used to sit in a row with a control or a link pushed to
   the far side. They stack now, so the head keeps the centre and whatever sat
   beside it sits under it.
   -------------------------------------------------------------------- */
.showcase__head{ flex-direction:column; align-items:center; text-align:center; }
.showcase__head .sec-head{ margin-bottom:var(--sp-4); }
.showcase__ctrl{ justify-content:center; }
.section .wrap > div[style*="space-between"]{
  flex-direction:column; align-items:center !important; text-align:center;
}
.sec-head .link-arrow{ justify-content:center; }
.hero__foot{ justify-content:center; }
.hero__scroll{ order:2; }

/* The picture we work against. Bars that fill as the panel arrives, and a
   first line that is a ratio rather than a bar, because one in a thousand
   drawn as a bar is a line nobody can see. */
.dataline__ratio{
  display:flex; align-items:baseline; gap:.5rem; margin:.1rem 0 .2rem;
  font-family:var(--font-display); font-weight:800; letter-spacing:-.02em;
}
.dataline__ratio b{ font-size:var(--step-4); color:var(--brand); line-height:1; }
.dataline__ratio span{ font-size:var(--step-0); opacity:.8; }
.dataline__note{
  font-size:var(--step--2); opacity:.72; margin:.35rem 0 0; line-height:1.45;
}
.datacard .dataline__bar i{
  transition:width 1.1s var(--ease) .15s;
}
@media (prefers-reduced-motion: reduce){
  .datacard .dataline__bar i{ transition:none; }
}

/* ------------------------------------------------------- MISSION, VISION
   Two statements, each given its own room, so neither one hides inside a
   paragraph about the other.
   -------------------------------------------------------------------- */
.stmt{
  position:relative; padding:var(--sp-6);
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg);
}
.stmt::before{
  content:""; position:absolute; left:0; top:var(--sp-6); bottom:var(--sp-6);
  width:4px; border-radius:4px; background:var(--brand);
}
.stmt__label{
  margin:0 0 .8rem; font-size:var(--step--2); font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
}
.stmt__body{ margin:0; font-size:var(--step-1); line-height:1.5; }

/* --------------------------------------------------- THEMATIC AREAS
   Each area sits over a photograph of the thing itself, drifting slowly,
   so the four outcomes are something you can see rather than only read.
   -------------------------------------------------------------------- */
.reason--photo{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:clamp(330px, 30vw, 420px); border-radius:var(--r-lg);
  padding:clamp(1.4rem, 2.4vw, 2rem); color:#fff;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:#171210; border-top:0;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.reason--photo::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:3;
  background:linear-gradient(to right, var(--brand) 0 38%, var(--red) 38% 62%, var(--brand) 62%);
}
/* Positive stacking, not negative. A drifting image is composited on its
   own layer, and a layer sitting at a negative index under an isolated
   parent was being painted behind that parent's own background, which is
   why these cards were four black rectangles. */
.reason--photo .reason__bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:0; opacity:.85;
  animation:drift 26s ease-in-out infinite alternate;
  transition:opacity var(--dur) var(--ease);
}
.reason--photo::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to top, rgba(10,8,6,.97) 0%, rgba(10,8,6,.93) 30%,
                            rgba(10,8,6,.74) 50%, rgba(10,8,6,.34) 72%,
                            rgba(10,8,6,.05) 95%);
}
.reason--photo > *:not(.reason__bg){ position:relative; z-index:2; }
.reason--photo:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.reason--photo:hover .reason__bg{ opacity:.95; }
/* Four areas deserve four rooms, not four columns. Two by two gives each
   one a photograph you can see and a line that does not break at four
   words. */
@media (min-width:760px){
  .grid--pairs{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.reason--photo h3, .reason--photo p, .reason--photo .reason__n{
  text-shadow:0 2px 16px rgba(10,8,6,.9);
}
.reason--photo h3{ color:#fff; margin:.2rem 0 .4rem; }
.reason--photo p{ color:rgba(255,255,255,.93); margin:0; }
.reason--photo .reason__n{ color:var(--brand); }
@keyframes drift{ from{ transform:scale(1.04) translate3d(0,0,0) } to{ transform:scale(1.14) translate3d(-2%,-2%,0) } }
@media (prefers-reduced-motion: reduce){
  .reason--photo .reason__bg{ animation:none; transform:scale(1.04); }
}

/* ------------------------------------------------------------- REACH ROW
   Three ways to reach a person, each one live. No form that goes nowhere.
   -------------------------------------------------------------------- */
.reachrow{
  display:grid; gap:var(--sp-4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
}
.reachcard{
  display:flex; flex-direction:column; gap:.3rem; text-decoration:none;
  padding:var(--sp-5); border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--paper); color:inherit;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.reachcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--ink); }
.reachcard__k{
  font-size:var(--step--2); font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent);
}
.reachcard__v{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1rem, 1.5vw, 1.22rem);
  overflow-wrap:anywhere; word-break:break-word; line-height:1.25;
}
.reachcard__n{ font-size:var(--step--1); color:var(--muted); }

/* The last thing on the page should not be the quietest. */
.closer--big{ padding-block:clamp(5rem,11vh,8.5rem); }
.closer--big .sec-head h2{ font-size:var(--step-6); max-width:22ch; }
.closer--big .sec-head .lede{ font-size:var(--step-2); max-width:46ch; }
.closer--big .btn--lg{ padding:1.25rem 2.5rem; min-height:66px; font-size:var(--step-1); }
@media (max-width:640px){
  .closer--big .sec-head h2{ font-size:var(--step-5); }
  .closer--big .sec-head .lede{ font-size:var(--step-1); }
}

/* One number, given the room a single proven number deserves. */
.bignum{
  display:flex; flex-direction:column; align-items:center; gap:.3rem;
  margin:var(--sp-6) 0 0;
}
.bignum b{
  font-family:var(--font-display); font-weight:900; letter-spacing:-.04em;
  font-size:var(--step-8); line-height:1.02; color:var(--brand);
}
.bignum span{
  font-size:var(--step--1); letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; color:rgba(255,255,255,.72); margin-top:.9rem;
}

/* In a two-column section the head belongs with its column, on the left.
   Centring is for a head that owns the full width of the band. */
/* A heading inside a column is part of that column's prose, not the lid on
   a whole band, so it keeps the shorter gap under it. */
.split .sec-head{ text-align:left; margin-inline:0; max-width:none; margin-bottom:var(--sp-4); }
.split .sec-head .eyebrow{ justify-content:flex-start; }
.split .sec-head h2, .split .sec-head p{ margin-inline:0; }
.split .sec-head h2{ font-size:var(--step-4); }

/* ------------------------------------------------------- THE LIVE UV CARD
   The reading itself on the home page, not a picture of a reading. It
   arrives, or it says plainly that it could not. It never shows a number
   it did not get.
   -------------------------------------------------------------------- */
.slide--uv{
  background:
    radial-gradient(120% 100% at 10% 0%, #10303c 0%, #081019 62%, #060C12 100%);
  justify-content:flex-end;
}
/* Nairobi stands behind the reading. Drawn, not photographed, so it is ours. */
.slide--uv::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:url("/assets/img/uploads/nairobi-skyline.jpg") 50% 100% / cover no-repeat;
  opacity:.62;
}
.slide--uv::after{
  background:linear-gradient(to top,
    rgba(5,14,21,.94) 0%, rgba(5,14,21,.80) 30%, rgba(5,14,21,.46) 58%, rgba(5,14,21,.18) 84%);
}
.uvc__now{
  font-size:var(--step--2); letter-spacing:.14em; text-transform:uppercase;
  font-weight:800; color:#2FD6E8; margin-bottom:.4rem;
}
.uvc__read{ display:flex; align-items:baseline; gap:.7rem; margin-bottom:.5rem; }
.uvc__read b{
  font-family:var(--font-display); font-weight:900; letter-spacing:-.04em;
  font-size:clamp(3.4rem, 7vw, 5rem); line-height:.9; color:#fff;
}
.uvc__read i{
  font-style:normal; font-size:var(--step-1); font-weight:700; color:#8FEAF6;
}
.slide--uv[data-uv-state="loading"] .uvc__read b{ opacity:.35; }
.slide--uv[data-uv-state="down"] .uvc__read{ display:none; }

/* ================================================= THE WALL BEHIND A NUMBER
   Five thousand is a number nobody feels. Faces are not. The wall holds
   two sets of photographs and moves slowly between them, so the number in
   front of it is standing on people rather than on a claim.
   ===================================================================== */
.wall{ position:relative; isolation:isolate; overflow:hidden; }
.wall__grid{
  position:absolute; inset:-2%; z-index:-2;
  display:grid; gap:2px;
  grid-template-columns:repeat(8, 1fr);
  grid-auto-rows:1fr;
}
@media (max-width:900px){ .wall__grid{ grid-template-columns:repeat(5, 1fr); } }
@media (max-width:560px){ .wall__grid{ grid-template-columns:repeat(4, 1fr); } }
.wall__cell{ position:relative; overflow:hidden; }
.wall__cell img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:saturate(.85);
}
.wall__cell img + img{ animation:wallSwap 14s ease-in-out infinite; }
@keyframes wallSwap{
  0%, 42%   { opacity:0 }
  50%, 92%  { opacity:1 }
  100%      { opacity:0 }
}
.wall::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(66% 58% at 50% 48%, rgba(10,8,6,.70) 0%, rgba(10,8,6,.90) 58%, rgba(10,8,6,.97) 100%);
}
@media (prefers-reduced-motion: reduce){
  .wall__cell img + img{ animation:none; opacity:0; }
}
.wall__in{ position:relative; z-index:1; }

/* The data panel: present, compact, and not shouting. */
.datacard{ padding:clamp(1.3rem,2.6vw,1.9rem); }
.datacard .dataline + .dataline{ margin-top:1.05rem; }
.datacard .dataline__top{ font-size:var(--step--1); }
.dataline__ratio b{ font-size:var(--step-3); }
.dataline__ratio span{ font-size:var(--step--1); }

/* ---------------------------------------------------- A PAGE HEAD, CENTRED
   The nav already says where you are, so the page does not repeat it. The
   title and its line sit on the centre, like every other head on the site.
   -------------------------------------------------------------------- */
.phead--center{ text-align:center; }
.phead--center h1{ max-width:22ch; margin-inline:auto; }
.phead--center .lede{ margin-inline:auto; }

/* ------------------------------------------------------------- VALUES
   Four promises, read left to right, each one standing on its own rather
   than hidden behind a click.
   -------------------------------------------------------------------- */
.values .value{
  position:relative; padding-top:var(--sp-5);
  border-top:2px solid var(--brand);
}
.values .value::after{
  content:""; position:absolute; top:-2px; left:0; width:3.2rem; height:2px;
  background:var(--red, #E01C2D);
}
.value__n{ display:none; }
.values h3{ font-size:var(--step-1); margin:0 0 .5rem; }
.values p{ font-size:var(--step--1); color:var(--muted); margin:0; }

/* A thematic area now leads somewhere. */
.reason__go{ margin:.9rem 0 0; }
.reason--photo .reason__go .link-arrow{ color:var(--brand); }

/* ============================================================== EDITIONS
   Five years of the same day, each one with its own argument. The year is
   the landmark, the theme is the claim, and the photographs are the proof.
   ===================================================================== */
.edition{ position:relative; padding-block:var(--sp-7); }
.edition + .edition{ border-top:2px solid var(--brand); }
.edition + .edition::before{
  content:""; position:absolute; top:-2px; left:0; width:3.2rem; height:2px;
  background:var(--red, #E01C2D);
}
/* The year used to be set three sizes larger than the title beside it and
   the whole block sat hard left, so arriving at a year meant hunting down
   the left edge of the page while everything above had been centred. The
   year is now a line over the title at a size that belongs with it, and
   the whole head reads down the middle like the rest of the site. */
.edition__head{
  display:flex; flex-direction:column; align-items:center; gap:.3rem;
  text-align:center; margin-bottom:var(--sp-4);
}
.edition__year{
  font-family:var(--font-display); font-weight:900; letter-spacing:.06em;
  font-size:var(--step-1); line-height:1; color:var(--accent);
}
.edition__theme{
  font-family:var(--font-display); font-weight:700;
  font-size:var(--step-3); line-height:1.15; margin:0 auto; max-width:26ch;
}
.edition__note{
  margin:.3rem auto var(--sp-5); max-width:62ch; color:var(--muted);
  text-align:center;
}
/* One shape, every time.

   The old grid gave the first photograph two columns and two rows, so the
   whole arrangement after it depended on how many pictures that year
   happened to have. Five years, five different layouts, and the worst of
   them full of holes. Now every tile is the same square, the column count
   never changes, and each gallery is trimmed to a multiple of three so no
   row is ever left half empty. */
.gallery{
  display:grid; gap:10px;
  grid-template-columns:repeat(3, minmax(0,1fr));
}
.gallery a, .gallery figure{ margin:0; }
.gallery img{
  width:100%; aspect-ratio:1/1; object-fit:cover; display:block;
  border-radius:var(--r-sm);
  border:1px solid color-mix(in srgb, var(--brand) 42%, transparent);
  transition:transform var(--dur) var(--ease), filter var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.gallery img:hover{
  transform:scale(1.03); filter:saturate(1.08); border-color:var(--brand);
}
@media (prefers-reduced-motion: reduce){ .gallery img:hover{ transform:none } }

/* An article opens with its name, who wrote it, then the picture. */
.artHead--center{ text-align:center; }
.artHead--center .art__title{ margin-inline:auto; max-width:24ch; }
.artHead--center .lede{ margin-inline:auto; }
.artHead--center .eyebrow{ justify-content:center; }
.artHead--center .art__byline{ margin:.9rem auto 1.1rem; }


/* ------------------------------------------------------------- FLOATING
   A picture that sits flat on the page reads as a diagram. Lift it off:
   a little rotation so it is not square to the grid, a real shadow so
   there is air underneath, and a slow rise and fall so it is never quite
   still. The movement is small on purpose; this is a page about reading.
   -------------------------------------------------------------------- */
.float .imgph{
  border-radius:var(--r-lg);
  box-shadow:0 26px 60px -18px rgba(20,12,4,.45), 0 8px 20px -10px rgba(20,12,4,.3);
  transform:rotate(-2deg);
  animation:floatDrift 9s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes floatDrift{
  from{ transform:rotate(-2deg) translate3d(0,-8px,0); }
  to{   transform:rotate(1.2deg) translate3d(0,10px,0); }
}
@media (prefers-reduced-motion: reduce){
  .float .imgph{ animation:none; transform:rotate(-2deg); }
}

/* ========================================================= THE FIVE TRACKS
   Alan's note: all five on one line, the work itself behind them, and the
   cards sitting half on that picture rather than beside it. The old grid
   put each track in its own photographed box, which meant five different
   heights and five competing images. This is one band of our own work,
   panning slowly, with five identical doors standing on it.

   Equal height is the whole point, so the card is a grid with fixed rows:
   number, title, line, link. A long title and a short one occupy the same
   shape, and every Open sits on the same floor.
   ===================================================================== */
.tracks{ padding-bottom:clamp(3.5rem, 7vh, 5.5rem); }

.tband{
  position:relative; overflow:hidden; isolation:isolate;
  height:clamp(200px, 23vw, 320px);
  margin-top:var(--sp-6);
  background:var(--deep);
}
.tband__track{
  display:flex; width:max-content; height:100%;
  animation:slide 90s linear infinite;
}
/* Every tile is the same shape whatever the photograph's own proportions
   are, and the shape is declared rather than discovered. A lazily loaded
   image with no reserved width is zero wide until it arrives, which made
   the track shorter than the loop assumed and let the background show
   through as a black gap. */
.tband__track img{
  height:100%; width:auto; aspect-ratio:3/2; object-fit:cover; display:block;
  background:#241a12;
}
.tband::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(10,8,6,.34) 0%, rgba(10,8,6,.52) 46%, rgba(10,8,6,.86) 100%);
}
@media (prefers-reduced-motion: reduce){ .tband__track{ animation:none; } }

/* The cards climb onto the lower half of the band. */
.tracks__rail{
  position:relative; z-index:2;
  margin-top:calc(-1 * clamp(104px, 12vw, 164px));
}
.trackrow{ display:grid; gap:var(--sp-4); grid-template-columns:repeat(5, minmax(0,1fr)); }

.tcard{
  display:grid; grid-template-rows:auto auto 1fr auto; align-content:start;
  position:relative; overflow:hidden;
  background:var(--deep); color:#fff; text-decoration:none;
  border:1px solid rgba(255,255,255,.12); border-radius:var(--r-lg);
  padding:calc(var(--sp-5) + .2rem) var(--sp-4) var(--sp-5);
  box-shadow:0 26px 54px -22px rgba(10,8,6,.66);
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.tcard::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(to right, var(--brand) 0 42%, var(--red) 42% 66%, var(--brand) 66%);
}
.tcard:hover{
  transform:translateY(-6px); border-color:var(--brand);
  box-shadow:0 34px 64px -22px rgba(10,8,6,.76);
}
.tcard__n{
  font-family:var(--font-mono); font-size:var(--step--2); letter-spacing:.2em;
  color:var(--brand); margin-bottom:.7rem;
}
.tcard h3{
  font-size:var(--step-1); line-height:1.15; margin:0 0 .5rem; color:#fff;
}
.tcard p{
  font-size:var(--step--1); line-height:1.5; margin:0;
  color:rgba(255,255,255,.78);
}
.tcard__go{
  display:inline-flex; align-items:center; gap:.45rem; align-self:end;
  margin-top:var(--sp-5);
  font-size:var(--step--2); font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--brand);
}
.tcard__go svg{ width:15px; height:15px; transition:transform var(--dur-fast) var(--ease); }
.tcard:hover .tcard__go svg{ transform:translateX(4px); }

/* Narrow screens cannot hold five, so the row becomes a reel you push. */
@media (max-width:1080px){
  .trackrow{
    grid-template-columns:none; grid-auto-flow:column;
    grid-auto-columns:minmax(230px, 74vw);
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scrollbar-width:none;
    padding-bottom:.4rem;
  }
  .trackrow::-webkit-scrollbar{ display:none; }
  .tcard{ scroll-snap-align:start; }
  .tcard:last-child{ scroll-snap-align:end; }
}

/* ====================================================== NOW RUNNING
   One band for the thing that is happening at the moment. It is the
   only place on the site that says "now", so it gets the live dot and
   nothing else does. When the project changes, this band changes; it is
   not a permanent fixture pretending to be news.
   ================================================================= */
.running{
  display:inline-flex; align-items:center; gap:.6rem; margin:0;
  font-size:var(--step--2); font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:var(--brand);
}
.running__dot{
  width:9px; height:9px; border-radius:50%; background:var(--red);
  box-shadow:0 0 0 0 color-mix(in srgb, var(--red) 70%, transparent);
  animation:runPulse 2.4s ease-out infinite;
}
@keyframes runPulse{
  0%{   box-shadow:0 0 0 0 color-mix(in srgb, var(--red) 65%, transparent); }
  70%{  box-shadow:0 0 0 11px rgba(0,0,0,0); }
  100%{ box-shadow:0 0 0 0 rgba(0,0,0,0); }
}
@media (prefers-reduced-motion: reduce){ .running__dot{ animation:none; } }

.nowband{
  position:relative; isolation:isolate; overflow:hidden;
  background:
    radial-gradient(70% 120% at 8% 0%, rgba(250,183,39,.14) 0%, transparent 62%),
    linear-gradient(150deg, #1A1208 0%, #0B0805 70%);
  color:#fff; padding-block:clamp(3.2rem, 7vh, 5rem);
  border-block:1px solid rgba(255,255,255,.1);
}
.nowband__in{ display:grid; gap:clamp(2rem,4vw,3.4rem); align-items:center; }
@media (min-width:900px){ .nowband__in{ grid-template-columns:1.15fr .85fr; } }
.nowband__text h2{
  font-size:var(--step-5); letter-spacing:-.02em; margin:1rem 0 .8rem; color:#fff;
}
.nowband__text h2 em{ font-style:normal; color:var(--brand); }
.nowband__text .lede{
  font-size:var(--step-1); line-height:1.5; color:rgba(255,255,255,.86);
  max-width:46ch; margin:0 0 var(--sp-5);
}
.nowband__meta{
  display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; margin:var(--sp-5) 0 0;
  font-size:var(--step--2); letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.6); font-weight:700;
}
.nowband__meta span{ display:inline-flex; align-items:center; gap:.6rem; }
.nowband__meta span + span::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--brand); opacity:.7;
}
.nowband__pic img{
  width:100%; height:auto; display:block; border-radius:var(--r-lg);
  aspect-ratio:4/3; object-fit:cover;
  box-shadow:0 30px 64px -24px rgba(0,0,0,.7);
}
@media (max-width:899px){ .nowband__pic{ order:-1; } }

/* ======================================================= RESOURCES
   Two toolkits and eleven films. A download card has to answer three
   questions before anyone clicks: what is this, who is it for, and how
   big is the file. So it answers all three on its face.
   ================================================================= */
.kits{ display:grid; gap:var(--sp-5); margin-top:var(--sp-6); }
.kit{
  display:grid; gap:clamp(1.3rem,3vw,2.4rem); align-items:start;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(1.3rem,3vw,2rem);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.kit:hover{ border-color:var(--brand); box-shadow:var(--shadow-md); }
@media (min-width:760px){ .kit{ grid-template-columns:200px 1fr; } }
.kit__cover img{
  width:100%; height:auto; display:block; border-radius:var(--r-md);
  border:1px solid var(--line); box-shadow:0 14px 30px -14px rgba(20,12,4,.4);
}
.kit__t{ font-size:var(--step-2); margin:0 0 .3rem; }
.kit__sub{ margin:0 0 .9rem; color:var(--accent); font-weight:600; font-size:var(--step--1); }
.kit__what{ margin:0 0 .8rem; color:var(--muted); }
.kit__who{
  margin:0 0 var(--sp-5); font-size:var(--step--2); color:var(--muted);
  padding-top:.8rem; border-top:1px solid var(--line);
}
.kit__size{
  margin-left:.6rem; padding-left:.6rem; border-left:1px solid currentColor;
  opacity:.65; font-weight:600; font-size:.86em;
}

.films{
  display:grid; gap:var(--sp-4); margin-top:var(--sp-6);
  grid-template-columns:repeat(auto-fit, minmax(min(100%,260px), 1fr));
}
.film{
  display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:center;
  padding:var(--sp-4); text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg);
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
             background var(--dur) var(--ease);
}
.film:hover{
  transform:translateY(-3px); border-color:var(--brand);
  background:color-mix(in srgb, var(--brand) 6%, var(--surface));
}
.film__play{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:var(--red); color:#fff; flex:none;
}
.film__play svg{ width:18px; height:18px; margin-left:2px; }
.film__body{ display:grid; gap:.2rem; }
.film__k{
  font-size:var(--step--2); letter-spacing:.12em; text-transform:uppercase;
  font-weight:700; color:var(--muted);
}
.film__t{ font-weight:700; line-height:1.3; }

.advs{
  display:grid; gap:var(--sp-5); margin-top:var(--sp-6);
  grid-template-columns:repeat(auto-fit, minmax(min(100%,180px), 1fr));
  max-width:760px; margin-inline:auto;
}
.adv{ text-align:center; }
.adv__pic{
  width:112px; height:112px; margin:0 auto .9rem; border-radius:50%;
  overflow:hidden; background:var(--deep); display:grid; place-items:center;
  border:2px solid var(--brand);
}
.adv__pic img{ width:100%; height:100%; object-fit:cover; }
.adv__mono{
  font-family:var(--font-display); font-size:var(--step-2); font-weight:800;
  color:var(--brand);
}
.adv__name{ margin:0; font-weight:800; }
.adv__where{ margin:.15rem 0 0; font-size:var(--step--1); color:var(--muted); }