/* =========================================================================
   HOMEPAGE - THE APPROVED DIRECTION
   (agreed 13 October 2026; confirmed as the final homepage 19 October 2026,
   promoted from Alternative F)
   -------------------------------------------------------------------------
   Opening:  Direction 2, "Through the Letters" (Act 1, as designed).
   Body:     Direction 1, "The Lightbox" (full-screen wipes, same timings).
   Content:  the website version of the strategy.

   Homepage only: loaded by index.html alone, never by the chapter pages.
   Everything is scoped to html.page-home / .af. Voices has its own sheet
   (css/voices.css); the script is js/home.js; photos are in images/home/.
   Shared, site-wide styling stays in css/style.css.

   The opening's rules keep Direction 2's class names (tl-*) and the body's
   keep Direction 1's (lb-*), so either can still be compared line by line
   with alt-b/alt-b.css and alt-a/alt-a.css (kept for reference, see
   alternatives.html). New pieces are af-*.

   Two layouts share one set of markup:
   1. STILL (the default, and what reduced-motion visitors get): the lockup
      filled with the chapel photograph on white, then the sections as
      white-mounted panels and plain blocks on a navy wall.
   2. MOTION (html.af-on, set in the <head> of index.html): one pinned stage
      driven from the scroll position by js/home.js. Only clip-path,
      transform and opacity are animated (plus the opening's font-size, as
      in Direction 2).

   VI keys: navy + white (other colour comes from the photographs, plus
   four muted section colours on the numbers board only), outlined caps for display, solid bold for straplines,
   sentence-case eyebrows and labels (no tracked capitals - 19 October 2026,
   to match the chapter pages), a white mount with square corners.
   ========================================================================= */

html.page-home {
  --lb-navy: #1D1A3B;
  --lb-navy-deep: #15122E;
  --lb-scrim: 18, 14, 44;
  --lb-display: var(--font-outline);   /* "Arial Black", "Arial Bold", Arial - from css/style.css */
  --lb-text: var(--font-body);
  --lb-pad: clamp(20px, 6.5vw, 104px);
  --lb-bw: 12px;                 /* white mount thickness */
  --lb-safe-b: 0px;              /* set by js/home.js: large minus small viewport height */
  --af-rail: 0px;                /* room kept clear for the contents rail on the right (wide screens) */
  /* Direction 2's names for the same values */
  --tl-navy: var(--lb-navy);
  --tl-navy-deep: var(--lb-navy-deep);
  --tl-scrim: var(--lb-scrim);
  --tl-pad: var(--lb-pad);
  --tl-safe-b: var(--lb-safe-b);
}
@media (max-width: 700px) { html.page-home { --lb-bw: 8px; } }
@media (min-width: 701px) { html.page-home { --af-rail: 300px; } }

html.page-home body { background: var(--lb-navy); }

.af { background: var(--lb-navy); color: #fff; font-family: var(--lb-text); }
.af h1, .af h2, .af h3, .af p, .af figure, .af blockquote, .af ul { margin: 0; }
.af p { max-width: none; }
.af h1, .af h2, .af h3 { font-family: var(--lb-text); font-weight: 700; color: inherit; -webkit-text-stroke: 0; letter-spacing: 0; text-transform: none; line-height: 1.15; text-wrap: balance; }
.af :focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 0; box-shadow: 0 0 0 7px rgba(var(--lb-scrim), 0.9); }
.af .tl-open :focus-visible { outline-color: var(--lb-navy); box-shadow: 0 0 0 7px rgba(255,255,255,0.9); }

/* ---- Outlined display type (one rule for both directions) ---- */
.af .lb-ol, .af .tl-ol, .af .tl-cut {
  font-family: var(--lb-display);
  font-weight: 900; font-style: normal;
  text-transform: uppercase;
  line-height: 0.98;
  letter-spacing: 0.01em;
}
.af .lb-ol { color: #fff; }
.af .lb-ol > span { display: block; }
.af .tl-ol { color: var(--lb-navy); }
@supports (-webkit-text-stroke: 1px #fff) {
  .af .lb-ol { color: transparent; -webkit-text-stroke: max(1.5px, 0.022em) #fff; }
  .af .tl-ol { color: transparent; -webkit-text-stroke: max(1.5px, 0.022em) var(--lb-navy); }
}
@media (forced-colors: active) { .af .lb-ol, .af .tl-ol { color: CanvasText; -webkit-text-stroke: 0; } }

.lb-eyebrow, .tl-eyebrow { font-size: 1rem; font-weight: 700; letter-spacing: 0; line-height: 1.4; }
.tl-eyebrow { text-transform: uppercase; letter-spacing: 0.04em; }   /* OUR STRATEGY 2027-2032 */
.tl-values { font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; }
.tl-values .sep { margin: 0 0.55em; font-weight: 400; }

/* Links: one quiet style for every "Learn more" (and the two buttons that
   open panels, which look the same). A fine underline keeps them clearly
   links without shouting; it firms up on hover and focus. Real buttons are
   kept for the three links out at the end. */
html.page-home .af a.lb-link, html.page-home .af a.tl-link, html.page-home .af .af-textbtn {
  color: inherit; font-weight: 700; font-size: 0.95rem;
  text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 5px !important;
  text-decoration-color: rgba(255,255,255,0.55) !important;
  transition: text-decoration-color 0.2s ease;
}
html.page-home .af a.tl-link { text-decoration-color: rgba(29,26,59,0.45) !important; }
html.page-home .af a.lb-link:hover, html.page-home .af a.tl-link:hover, html.page-home .af .af-textbtn:hover,
html.page-home .af a.lb-link:focus-visible, html.page-home .af .af-textbtn:focus-visible { color: inherit; text-decoration-color: currentColor !important; text-decoration-thickness: 2px !important; }
html.page-home .af .af-textbtn { background: none; border: 0; padding: 0; margin: 0; font-family: inherit; line-height: inherit; color: #fff; cursor: pointer; }
html.page-home .af .af-textbtn[hidden] { display: none; }
html.page-home .af a.af-inline { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
html.page-home .af a.af-inline:hover { text-decoration-thickness: 3px; }
html.page-home .af .lb-button {
  display: inline-block; border: 2px solid #fff; padding: 0.9em 1.4em; color: #fff; background: transparent;
  font: inherit; font-weight: 700; font-size: 0.95rem; line-height: 1.2; text-decoration: none !important; cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
html.page-home .af .lb-button:hover { background: #fff; color: var(--lb-navy); }
html.page-home .af .lb-button[hidden] { display: none; }
.lb-cap, .tl-cap { white-space: pre-line; font-size: 0.72rem; line-height: 1.4; letter-spacing: 0.02em; }
.lb-cap { color: rgba(255,255,255,0.85); text-shadow: 0 1px 8px rgba(var(--lb-scrim), 0.8); }

/* ---- Photographs ---- */
.lb-plate { position: absolute; inset: 0; overflow: hidden; background: var(--lb-navy-deep); }
.lb-plate img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lb-plate picture { display: block; width: 100%; height: 100%; }
.lb-plate::after { content: ""; position: absolute; inset: 0; background: rgba(var(--lb-scrim), var(--lb-dim, 0.42)); pointer-events: none; }
.lb-plate-wall { background: var(--lb-navy); }
.lb-plate-wall::after { display: none; }
html:not(.af-on) .lb-plate-wall { display: none; }   /* still layout: the navy wall is the page itself */

/* ---- Copy shared by both layouts ---- */
.lb-head { font-size: clamp(1.15rem, 0.85rem + 0.9vw, 1.55rem); line-height: 1.25; }
.lb-text { font-size: clamp(0.98rem, 0.9rem + 0.25vw, 1.08rem); line-height: 1.5; margin-top: 0.6em !important; }
.af-statement { font-size: clamp(1.3rem, 0.9rem + 1.5vw, 2.1rem); line-height: 1.2; text-wrap: balance; }
.af-statement strong { font-weight: 700; }
.af-beat p + p { margin-top: 0.9em; }
.af-lead { font-weight: 700; font-size: clamp(1.15rem, 0.85rem + 1vw, 1.65rem); line-height: 1.3; text-wrap: balance; }
.af-para { font-size: clamp(1rem, 0.92rem + 0.3vw, 1.12rem); line-height: 1.55; }
.af-para + .af-para { margin-top: 0.8em; }
.af-para-lg { font-size: clamp(1.05rem, 0.9rem + 0.55vw, 1.35rem); line-height: 1.45; }
.af-actions { margin-top: 1.5em !important; }
.af-principle p { line-height: 1.55; }
.af-principle p strong { font-weight: 700; }
.af-principles-intro strong { font-weight: 700; }
.af-wedgwood { font-weight: 700; font-size: clamp(1.1rem, 0.85rem + 0.9vw, 1.6rem); line-height: 1.35; text-wrap: balance; }
.af-accept { font-size: clamp(2.4rem, 1rem + 6vw, 7.6rem); margin-top: 0.35em !important; }
.af-ctas { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(24px, 4vh, 44px) !important; }
.af-ctas li { margin: 0; }

/* =========================================================================
   1. STILL LAYOUT (default / reduced motion / no JS driver)
   ========================================================================= */
.tl-wall, .tl-scrim, .tl-inside, .tl-cue,
.lb-mount, .lb-wall, .lb-edge, .lb-title, .lb-index, .af-probe { display: none; }

/* -- the opening, as Direction 2's still version: on white, the letters already filled -- */
.tl-open { display: flex; flex-direction: column; background: #fff; color: var(--lb-navy); padding: clamp(40px, 9vh, 110px) var(--lb-pad) clamp(40px, 7vw, 90px); }
.tl-lockup { order: 1; text-align: center; --lk: clamp(2rem, 9.6vw, 9rem); }
.tl-lockup h1 { font-size: var(--lk); margin: calc(var(--lk) * 0.2) 0 0; }
.tl-lockup h1 > span { display: block; }
html:not(.af-on) .tl-lockup h1.tl-ol {
  background: var(--lb-navy) url("../images/home/chapel-1600.jpg") 50% 36% / cover no-repeat;
  -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 0; color: transparent; -webkit-text-fill-color: transparent;
}
@media (forced-colors: active) { html:not(.af-on) .tl-lockup h1.tl-ol { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; } }
.tl-lock-strap { font-weight: 700; line-height: 1.14; font-size: calc(var(--lk) * 0.25); margin-top: calc(var(--lk) * 0.24) !important; }
.tl-lockup .tl-values { font-size: max(0.6rem, calc(var(--lk) * 0.105)); margin-top: calc(var(--lk) * 0.32); }
.tl-lock-cta { margin-top: calc(var(--lk) * 0.34) !important; }
.tl-photo { order: 2; margin-top: clamp(36px, 7vw, 90px) !important; }
.tl-photo img { display: block; width: 100%; height: min(74vh, 56vw); min-height: 240px; object-fit: cover; }
.tl-photo .tl-cap { margin-top: 0.8em; color: #4a4763; }

/* -- the body, as the Lightbox's still version: a column of panels on a navy wall -- */
.af-body {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
  max-width: 96rem;
  margin: 0 auto;
  padding: clamp(20px, 3vw, 44px) clamp(16px, 4vw, 56px) clamp(48px, 8vw, 110px);
}
.lb-scene { position: relative; grid-column: 1 / -1; min-width: 0; }

/* framed panels: anything over a photograph */
.lb-world, .af-photo {
  border: var(--lb-bw) solid #fff;
  display: grid; align-content: center;
  container-type: inline-size;
  isolation: isolate;
}
.lb-world > *, .af-photo > * { position: relative; z-index: 1; }
.lb-world > .lb-plate, .af-photo > .lb-plate { position: absolute; z-index: 0; }

.af-ambition { padding: clamp(40px, 8vw, 96px) 0 clamp(8px, 2vw, 24px); }
.af-ambition-title { font-size: clamp(2.2rem, 8vw, 7rem); }
.af-ambition .af-beats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: clamp(24px, 4vw, 64px); margin-top: clamp(24px, 4vw, 48px); max-width: 76rem; }
.af-ambition .af-beat p:not(.af-statement) { font-size: 1.05rem; line-height: 1.55; max-width: 36rem; }

.lb-inter { padding: clamp(40px, 8vw, 96px) 0 clamp(8px, 2vw, 24px); }
.lb-inter > .lb-plate { display: none; }
.lb-inter h2.lb-ol { font-size: clamp(2.2rem, 8.6vw, 8rem); margin-top: 0.22em; }
.lb-inter-text { font-weight: 700; font-size: clamp(1.1rem, 0.8rem + 1.1vw, 1.6rem); line-height: 1.32; max-width: 40rem; margin-top: 1em !important; text-wrap: balance; }

.lb-world { min-height: min(74vh, 720px); padding: 9cqw 6cqw 14cqw; text-align: center; justify-items: center; }
@media (min-width: 1040px) { .lb-world { grid-column: span 2; min-height: 640px; padding: 7cqw 6cqw 12cqw; } }
.lb-world .lb-plate { --lb-dim: 0.5; }
.lb-world-title.lb-ol { font-size: min(9.6cqw, 6rem); margin-top: 0.3em; }
.lb-world-title > span { overflow-wrap: normal; }
.lb-world .lb-body { margin-top: 1.3em; max-width: 28rem; }
.lb-world .lb-link { display: inline-block; margin-top: 1.2em; }
.lb-world .lb-cap, .af-photo .lb-cap { position: absolute; left: 12px; right: 12px; bottom: 8px; text-align: left; }

/* text panels, quotes, figures: plain blocks, or framed when over a photo */
.af-text, .af-vslide, .af-numbers, .af-principles, .af-finale { padding: clamp(32px, 6vw, 80px) 0; }
.af-photo { padding: clamp(40px, 7vw, 96px) clamp(20px, 6vw, 96px) clamp(56px, 8vw, 110px); min-height: min(80vh, 760px); }
.af-photo .lb-plate { --lb-dim: 0.58; }
.af-text .lb-copy { max-width: 46rem; }
.af-title { font-size: clamp(2rem, 6.4vw, 6rem); margin-bottom: 0.45em !important; }
.af-principles h2 { font-size: clamp(1.4rem, 1rem + 1.6vw, 2.1rem); }
.af-principles-intro { margin-top: 0.7em !important; max-width: 44rem; color: rgba(255,255,255,0.88); line-height: 1.5; }
.af-principles-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(24px, 4vw, 56px); margin-top: clamp(28px, 4vw, 52px); }
.af-principle { container-type: inline-size; }
.af-principle h3.lb-ol { font-size: min(9.2cqw, 3rem); }
.af-principle p { margin-top: 0.9em; font-size: 1rem; max-width: 24rem; }
.af-finale .lb-copy { max-width: 70rem; }
.af-finale .af-wedgwood { max-width: 46rem; }

.lb-film { padding-top: clamp(24px, 5vw, 64px); }
.lb-film > .lb-plate { display: none; }
.lb-film-col { max-width: 64rem; margin: 0 auto; }
.lb-film-slot { position: relative; aspect-ratio: 16 / 9; width: 100%; background: var(--lb-navy-deep) var(--lb-poster, none) 50% 38% / cover; border: var(--lb-bw) solid #fff; }
.lb-film-slot iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.lb-play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: rgba(var(--lb-scrim), 0.3); color: #fff; cursor: pointer; display: grid; place-items: center; font: inherit; transition: background-color 0.25s ease; }
.lb-play:hover { background: rgba(var(--lb-scrim), 0.12); }
.lb-play-ring { width: clamp(64px, 7vw, 96px); aspect-ratio: 1; border: 2px solid #fff; border-radius: 50%; display: grid; place-items: center; transition: transform 0.25s ease, background-color 0.25s ease; }
.lb-play-ring svg { width: 42%; height: 42%; margin-left: 6%; }
.lb-play:hover .lb-play-ring { transform: scale(1.06); background: rgba(255,255,255,0.14); }
.lb-play-badge { position: absolute; left: 14px; top: 14px; font-size: 0.85rem; font-weight: 700; background: #fff; color: var(--lb-navy); padding: 0.4em 0.75em; }
.lb-film-note { margin-top: 0.9em !important; font-size: 0.78rem; color: rgba(255,255,255,0.8); line-height: 1.45; }


/* =========================================================================
   2. MOTION (scroll-driven): one pinned stage, one timeline
   ========================================================================= */
html.af-on .af-track {
  position: relative;
  height: calc((var(--af-total, 30) + 1) * 100vh);
  height: calc((var(--af-total, 30) + 1) * 100lvh);
  margin-top: calc(-1 * var(--bar-h));   /* the stage runs up behind the site header */
  background: var(--lb-navy);
}
html.af-on .af-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100lvh;
  overflow: hidden; overflow: clip;
  background: var(--lb-navy);
  contain: layout paint;
  isolation: isolate;
}
html.af-on .af-probe { display: block; position: absolute; left: 0; top: 0; width: 0; height: 100vh; height: 100svh; visibility: hidden; pointer-events: none; }
html.af-on .af-body { display: contents; }
/* soft top shade so the site header stays legible over any photograph (once we are inside the photographs) */
html.af-on .af-stage::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 150px; z-index: 40; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--lb-scrim), 0.6), rgba(var(--lb-scrim), 0));
  opacity: 0; transition: opacity 0.4s ease;
}
html.af-on.af-dark .af-stage::after { opacity: 1; }

/* Before js/home.js has laid the stage out (it adds html.af-live), every scene
   sits stacked in the same frame and would flash up as a jumble of text on
   navy. Hold a plain white frame - the opening's own wall - until then; the
   lockup then draws in as designed. If home.js never starts, the failsafe in
   the <head> of index.html drops back to the still layout, which shows. */
html.af-on:not(.af-live) .af-track { background: #fff; }
html.af-on:not(.af-live) .af-stage { visibility: hidden; background: #fff; }
/* Speed (20 Oct): the Voices screens are taken out of layout until then too,
   so the browser's lazy-loading doesn't fetch all their photos on arrival
   (every scene sits in the viewport at once). js/home.js holds those photos
   and releases them two scenes ahead, as it does the section photos. */
html.af-on:not(.af-live) .vx-scene { display: none; }

/* ======== the opening (Direction 2, Act 1) ======== */
html.af-on .tl-open { position: absolute; inset: 0; display: block; padding: 0; background: #fff; isolation: isolate; pointer-events: none; }
html.af-on .tl-open.is-active a { pointer-events: auto; }
html.af-on .tl-open[data-off] > * { visibility: hidden; }
html.af-on .tl-open[data-off] > .tl-lockup { visibility: visible; opacity: 0 !important; }
html.af-on .tl-photo { position: absolute; inset: 0; margin: 0 !important; order: 0; }
html.af-on .tl-photo img { width: 100%; height: 100%; min-height: 0; will-change: opacity, transform; }
html.af-on .tl-scrim { display: block; position: absolute; inset: 0; background: rgba(var(--lb-scrim), 0.56); opacity: 0; }
html.af-on .tl-wall { display: block; position: absolute; inset: 0; background: #fff; mix-blend-mode: screen; overflow: hidden; }
html.af-on .tl-cut, html.af-on .tl-lockup h1 {
  position: absolute; left: 0; top: 0; margin: 0; width: max-content; white-space: nowrap; text-align: center;
  transform-origin: 0 0; font-size: 100px;
}
html.af-on .tl-cut { color: #000; }
html.af-on .tl-cut > span, html.af-on .tl-lockup h1 > span { display: block; }
html.af-on .tl-lockup { position: absolute; inset: 0; order: 0; pointer-events: none; }
html.af-on .tl-lock-top, html.af-on .tl-lock-bottom { position: absolute; left: 0; right: 0; text-align: center; will-change: opacity, transform; }
html.af-on .tl-lock-strap { font-size: calc(var(--tl-fs, 100px) * 0.25); margin-top: 0 !important; }
html.af-on .tl-lockup .tl-values { font-size: max(0.6rem, calc(var(--tl-fs, 100px) * 0.105)); margin-top: calc(var(--tl-fs, 100px) * 0.3); }
/* The scroll-driven opening has no "Start reading" link: the arrow leads on through the homepage first. The link stays for the static / no-JavaScript version. */
html.af-on .tl-lock-cta { display: none; }
/* z-index lifts the credit above .tl-scrim and .tl-wall, which come later in the markup and would otherwise dim it with the photo */
html.af-on .tl-photo .tl-cap { position: absolute; z-index: 1; right: var(--lb-pad); bottom: calc(var(--lb-safe-b) + 18px); margin: 0; max-width: 30rem; text-align: right; color: #fff; text-shadow: 0 1px 8px rgba(var(--lb-scrim), 0.8); opacity: 0; }
html.af-on .tl-inside {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  position: absolute; left: var(--lb-pad); right: max(var(--lb-pad), var(--af-rail)); top: 0; height: 100vh; height: 100svh; color: #fff; opacity: 0; will-change: opacity, transform;
}
/* centred in the space left of the rail; the strapline sized to fit it */
html.af-on .tl-inside .tl-inside-strap { font-size: min(6.4vw, 12vh); font-size: min(6.4vw, 12svh); }
.tl-inside-strap { font-weight: 700; line-height: 1.06; font-size: min(7.4vw, 13vh); letter-spacing: -0.01em; text-wrap: balance; }
.tl-words { display: none; }
html.af-on .tl-words { display: flex; flex-direction: column; align-items: center; gap: 0.06em; margin-top: 0.7em; }
html.af-on .tl-word { display: block; font-size: min(5.6vw, 9.4vh); font-size: min(5.6vw, 9.4svh); line-height: 1; opacity: 0; will-change: transform, opacity; }
html.af-on .tl-cue {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  position: absolute; left: 50%; bottom: calc(var(--lb-safe-b) + var(--tl-shift, 0px) + 18px); transform: translateX(-50%);
  color: var(--lb-navy); font-size: 0.85rem; font-weight: 700; text-decoration: none !important; padding: 6px 12px;
}
html.af-on .tl-cue svg { width: 18px; height: 18px; animation: tl-nudge 2.2s ease-in-out infinite; }
@keyframes tl-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ======== the Lightbox scenes ======== */
html.af-on .lb-scene {
  position: absolute; inset: 0;
  display: block; border: 0; padding: 0; min-height: 0; text-align: left;
  container-type: normal;
  pointer-events: none;
  isolation: auto;
}
html.af-on .lb-scene > * { z-index: auto; }
html.af-on .lb-scene.is-active a,
html.af-on .lb-scene.is-active button,
html.af-on .lb-scene.is-active iframe { pointer-events: auto; }
html.af-on .lb-scene[data-off] > .lb-plate,
html.af-on .lb-scene[data-off] > .lb-edge,
html.af-on .lb-scene[data-off] > .lb-mount,
html.af-on .lb-scene[data-off] > .lb-wall { visibility: hidden !important; }
html.af-on .lb-scene[data-off] > .lb-copy,
html.af-on .lb-scene[data-off] > .lb-cap { opacity: 0 !important; }

html.af-on .lb-plate { display: block; position: absolute; inset: 0; z-index: auto; will-change: clip-path; }
html.af-on .lb-plate img { will-change: transform; transform-origin: 50% 50%; }
html.af-on .lb-mount, html.af-on .lb-edge { display: block; position: absolute; inset: 0; background: #fff; will-change: clip-path; }
html.af-on .lb-wall { display: block; position: absolute; inset: 0; background: var(--lb-navy); }
html.af-on .lb-copy, html.af-on .lb-cap { will-change: opacity, transform; }
html.af-on .lb-cap { position: absolute; left: auto; right: var(--lb-pad); bottom: calc(var(--lb-safe-b) + 18px); text-align: right; max-width: 26rem; }

/* ---- the handover: our ambition, over the chapel photograph ---- */
html.af-on .af-ambition > .lb-copy { position: absolute; left: var(--lb-pad); right: max(var(--lb-pad), var(--af-rail)); bottom: calc(var(--lb-safe-b) + 9vh); }
html.af-on .af-ambition-title { font-size: min(6.4vw, 12vh); font-size: min(6.4vw, 12svh); will-change: opacity, transform; }
html.af-on .af-ambition .af-beats { display: block; margin-top: clamp(16px, 2.6vh, 32px); max-width: 42rem; }
html.af-on .af-ambition .af-beat { will-change: opacity, transform; }
html.af-on .af-ambition .af-beat + .af-beat { margin-top: clamp(16px, 2.6vh, 28px); }
html.af-on .af-ambition .af-beat p:not(.af-statement) { font-size: clamp(1rem, 0.9rem + 0.3vw, 1.12rem); line-height: 1.5; }
html.af-on .af-ambition .af-statement { font-size: clamp(1.4rem, 0.9rem + 1.3vw, 2.2rem); line-height: 1.18; }
html.af-on .af-ambition .af-statement + p { margin-top: 0.8em; }
/* a quiet shade under the words, rising with them */
html.af-on .af-ambition::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 75%; pointer-events: none;
  background: linear-gradient(0deg, rgba(var(--lb-scrim), 0.72), rgba(var(--lb-scrim), 0));
  opacity: var(--af-shade, 0);
}
/* ...but not over the photo credit along the bottom, where there are no words
   (wide screens; on phones the credit steps aside for this copy) */
@media (min-width: 701px) {
  html.af-on .af-ambition::before {
    -webkit-mask-image: linear-gradient(to top, transparent calc(var(--lb-safe-b) + 52px), #000 calc(var(--lb-safe-b) + 100px));
            mask-image: linear-gradient(to top, transparent calc(var(--lb-safe-b) + 52px), #000 calc(var(--lb-safe-b) + 100px));
  }
}

/* ---- interludes ---- */
html.af-on .lb-inter > .lb-plate { display: block; }
html.af-on .lb-inter > .lb-copy,
html.af-on .af-text > .lb-copy,
html.af-on .af-numbers > .lb-copy,
html.af-on .af-finale > .lb-copy {
  position: absolute; left: var(--lb-pad); right: var(--lb-pad);
  top: calc(var(--bar-h) + (100vh - var(--lb-safe-b) - var(--bar-h)) / 2);
  top: calc(var(--bar-h) + (100svh - var(--bar-h)) / 2);
  transform: translateY(calc(-50% + var(--lb-y, 0px)));
  max-width: none;
}
html.af-on .lb-inter > .lb-copy { right: max(var(--lb-pad), var(--af-rail)); }
html.af-on .lb-inter h2.lb-ol { font-size: min(7.2vw, 17vh); font-size: min(7.2vw, 17svh); }

/* ---- worlds (the six sections) ---- */
html.af-on .lb-world .lb-plate { --lb-dim: 0; }
html.af-on .lb-world .lb-plate::after,
html.af-on .af-text:not(.af-wall) .lb-plate::after {
  background:
    linear-gradient(90deg, rgba(var(--lb-scrim), var(--lb-near, 0.86)) 0%, rgba(var(--lb-scrim), var(--lb-mid, 0.56)) 42%, rgba(var(--lb-scrim), var(--lb-far, 0.14)) 82%),
    linear-gradient(0deg, rgba(var(--lb-scrim), 0.5), rgba(var(--lb-scrim), 0) 30%);
}
html.af-on .lb-world > .lb-copy { position: absolute; inset: 0; transform: translateY(var(--lb-y, 0px)); }
html.af-on .lb-world .lb-eyebrow { position: absolute; left: var(--lb-pad); top: var(--lb-eb-top, 20vh); white-space: nowrap; }
/* the decorative title is shown by the rolling title; the real heading is the h3 */
html.af-on .lb-world-title { display: none; }
html.af-on .lb-world .lb-body { position: absolute; left: var(--lb-pad); top: var(--lb-body-top, 60vh); width: min(36rem, calc(100% - 2 * var(--lb-pad))); margin: 0; max-width: none; }
html.af-on .lb-world .lb-link { display: inline-block; margin-top: 1.1em; }
/* keep the copy clear of the index on the right */
@media (min-width: 701px) { html.af-on .lb-world .lb-body { width: min(36rem, calc(100% - var(--lb-pad) - var(--af-rail))); } }

html.af-on .lb-title {
  display: block; position: absolute; left: var(--lb-pad); top: var(--lb-title-top, 26vh); z-index: 30;
  pointer-events: none; will-change: opacity;
}
html.af-on .lb-our, html.af-on .lb-roll-in > span { display: block; width: max-content; padding: 0.02em 0; }
html.af-on .lb-roll { display: block; position: relative; will-change: clip-path; }
html.af-on .lb-roll-in { display: block; will-change: transform; }
html.af-on .lb-roll-in > span > span { display: block; width: max-content; }

/* ---- index of the six sections ---- */
html.af-on .lb-index { display: block; position: absolute; right: clamp(16px, 2.6vw, 40px); top: 50%; transform: translateY(-50%); z-index: 35; will-change: opacity; }
html.af-on .lb-index:focus-within { opacity: 1 !important; pointer-events: auto !important; }
.lb-index ol { list-style: none; margin: 0; padding: 0; }
.lb-index li { margin: 0; }
html.page-home .af .lb-index a {
  text-shadow: 0 1px 6px rgba(var(--lb-scrim), 0.9), 0 0 2px rgba(var(--lb-scrim), 0.6);
  display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 7px 0;
  color: #fff; opacity: 0.6; text-decoration: none !important;
  font-size: 0.85rem; font-weight: 700;
  transition: opacity 0.25s ease;
}
.lb-index a::after { display: none; }
/* the marker: one line per chapter; the current chapter's line opens to full
   length and, when the chapter has several screens, splits into segments that
   fill as you go */
.af-mark { flex: none; width: 44px; height: 2px; display: flex; gap: 0; transform: scaleX(0.32); transform-origin: right center; transition: transform 0.35s ease, gap 0.35s ease; }
.af-mark i { flex: 1; height: 100%; background: #fff; opacity: 1; transition: opacity 0.3s ease; }
.lb-index a[aria-current] .af-mark { transform: none; gap: 3px; }
.lb-index a[aria-current] .af-mark i:not(.on) { opacity: 0.32; }
html.page-home .af .lb-index a:hover, html.page-home .af .lb-index a[aria-current] { opacity: 1; }
html.page-home .af .lb-index a.is-done { opacity: 0.9; }
/* Accessibility (20 Oct): the rail's labels sit over bright parts of some
   photographs (windows, sky). A soft local shade behind the rail, and less
   dimming of the other chapters, keep them readable (WCAG 1.4.3) without a
   visible panel. Wide screens only: on tablets the label has its own navy box,
   on phones the rail is bars. */
@media (min-width: 1100px) {
  html.page-home .af .lb-index a { opacity: 0.88; }
  html.page-home .af .lb-index a.is-done { opacity: 0.94; }
  html.af-on .lb-index::before { content: ""; position: absolute; z-index: -1; inset: -64px -48px -64px -120px; pointer-events: none;
    background: radial-gradient(closest-side, rgba(var(--lb-scrim), 0.72), rgba(var(--lb-scrim), 0.5) 62%, rgba(var(--lb-scrim), 0)); }
}
@media (max-height: 760px) and (min-width: 701px) { html.page-home .af .lb-index a { padding: 4px 0; } }

/* ---- text panels ---- */
html.af-on .af-text > .lb-copy { width: min(44rem, calc(100% - var(--lb-pad) - max(var(--lb-pad), var(--af-rail)))); right: auto; }
html.af-on .af-text .af-title { font-size: min(6.2vw, 12.5vh); font-size: min(6.2vw, 12.5svh); }
html.af-on .af-wall .lb-plate::after { display: none; }

/* ---- quotes ---- */

/* ---- principles: one at a time, text only (the Lightbox's principles) ---- */
html.af-on .af-principles > .lb-copy {
  position: absolute; left: var(--lb-pad); right: var(--lb-pad);
  top: calc(var(--bar-h) + (100vh - var(--lb-safe-b) - var(--bar-h)) / 2);
  top: calc(var(--bar-h) + (100svh - var(--bar-h)) / 2);
  transform: translateY(calc(-50% + var(--lb-y, 0px)));
}
html.af-on .af-principles h2 { font-size: clamp(1.25rem, 0.9rem + 1.3vw, 1.9rem); }
html.af-on .af-principles-intro { max-width: 46rem; font-size: 0.98rem; }
html.af-on .af-principles-head { will-change: opacity, transform; }
html.af-on .af-principles > .lb-copy, html.af-on .af-numbers > .lb-copy { right: max(var(--lb-pad), var(--af-rail)); }
html.af-on .af-principles-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3.4vw, 56px); margin-top: clamp(22px, 4vh, 44px); max-width: 72rem; }
html.af-on .af-principle { min-width: 0; container-type: inline-size; will-change: opacity, transform; }
/* sized to its column, so the longest word (Distinctiveness) always fits */
html.af-on .af-principle h3.lb-ol { font-size: min(8.2cqw, 3rem, 6.6vh); }
html.af-on .af-principle p { font-size: clamp(0.88rem, 0.8rem + 0.25vw, 1rem); max-width: 22rem; }

/* ---- figures ---- */

/* ---- the close ---- */
/* the reply arrives on a timer once the screen settles (js/home.js, acceptTimer) */
html.af-on .af-step2 { opacity: 0; transform: translateY(40px); pointer-events: none; will-change: opacity, transform;
  transition: opacity 0.9s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); }
html.af-on .af-step2.is-in { opacity: 1; transform: none; pointer-events: auto; }
/* then the three links, one after another: here is the plan */
html.af-on .af-step2 .af-ctas li { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.8s cubic-bezier(.2,.7,.2,1); }
html.af-on .af-step2.is-in .af-ctas li { opacity: 1; transform: none; }
html.af-on .af-step2.is-in .af-ctas li:nth-child(1) { transition-delay: 0.8s; }
html.af-on .af-step2.is-in .af-ctas li:nth-child(2) { transition-delay: 1.05s; }
html.af-on .af-step2.is-in .af-ctas li:nth-child(3) { transition-delay: 1.3s; }
/* a link reached by keyboard shows at once */
html.af-on .af-step2 .af-ctas li:focus-within { opacity: 1; transform: none; transition-delay: 0s; }
html.af-kiosk-rm .af-step2, html.af-kiosk-rm .af-step2 .af-ctas li { transition: none; }
html.af-on .af-finale > .lb-copy { width: min(72rem, calc(100% - var(--lb-pad) - max(var(--lb-pad), var(--af-rail)))); right: auto; }
html.af-on .af-accept { font-size: min(8.4vw, 15vh); font-size: min(8.4vw, 15svh); }

/* ---- film ---- */
html.af-on .lb-film { padding: 0; }
html.af-on .lb-film > .lb-plate { display: block; --lb-dim: 0.28; }
html.af-on .lb-film > .lb-copy {
  position: absolute; left: var(--lb-pad); right: max(var(--lb-pad), var(--af-rail)); top: var(--bar-h);
  bottom: var(--lb-safe-b);
  display: grid; align-items: center; justify-items: center; align-content: center;
}
html.af-on .lb-film-col { width: min(100%, calc((100vh - var(--bar-h) - 22vh) * 16 / 9)); max-width: none; margin: 0; }
html.af-on .lb-film-slot { background: none; border: 0; }
html.af-on .lb-play { background: transparent; }
html.af-on .lb-play:hover { background: rgba(255,255,255,0.08); }

/* ---- site header while it sits over the stage (classes set by js/home.js) ---- */
html.page-home.af-over .header-bar { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; animation: none; box-shadow: none; }
html.page-home.af-over .header-bar::after { display: none; }
html.page-home.af-over .site-logo, html.page-home.af-over .icon-button, html.page-home.af-over .nav-link { transition: filter 0.3s ease, color 0.3s ease, border-color 0.3s ease, background-color 0.18s ease; }
/* ...but keep the logo's shrink when the bar condenses: the list above replaced
   it, so on the homepage the logo jumped to its small size (fixed 20 Oct). */
@media (prefers-reduced-motion: no-preference) {
  html.page-home.af-over .site-logo { transition: height 0.28s var(--ease-out), filter 0.3s ease; }
}
html.page-home.af-dark .site-logo { filter: brightness(0) invert(1); }
html.page-home.af-dark .icon-button { color: #fff; border-color: rgba(255,255,255,0.55); }
html.page-home.af-dark .icon-button:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,0.12); }
html.page-home.af-dark .primary-nav:not(.mobile-open) .nav-list > .nav-item > .nav-link { color: #fff; }
html.page-home.af-dark .primary-nav:not(.mobile-open) .nav-list > .nav-item:hover > .nav-link,
html.page-home.af-dark .primary-nav:not(.mobile-open) .nav-list > .nav-item.open > .nav-link { color: #fff; background: rgba(255,255,255,0.14); }
html.page-home.af-dark .site-header :focus-visible { outline-color: #fff; }

/* ---- site footer on the navy wall ---- */
html.page-home .site-footer { margin-top: 0; background: var(--lb-navy-deep); border-top: 1px solid rgba(255,255,255,0.16); color: rgba(255,255,255,0.82); position: relative; z-index: 2; }
html.page-home .site-footer .footer-grid h4, html.page-home .site-footer .footer-grid .footer-heading { color: #fff; }
html.page-home .site-footer .text-muted, html.page-home .site-footer .footer-note { color: rgba(255,255,255,0.72); }
html.page-home .site-footer .footer-grid a { color: #fff; }
html.page-home .site-footer .footer-note, html.page-home .site-footer .footer-legal { border-top-color: rgba(255,255,255,0.16); }
html.page-home .site-footer :focus-visible { outline-color: #fff; }

/* ---- opening: the lockup arrives (Direction 2) ---- */
html.af-on.tl-intro .tl-lockup h1, html.af-on.tl-intro .tl-lock-top, html.af-on.tl-intro .tl-lock-bottom > *, html.af-on.tl-intro .tl-cue { opacity: 0; }
html.af-on.tl-intro-play .tl-lockup h1 { animation: tl-draw 1.1s cubic-bezier(.2,.7,.2,1) 0.1s both; }
html.af-on.tl-intro-play .tl-lock-top { animation: tl-fade 0.8s ease 0.05s both; }
html.af-on.tl-intro-play .tl-lock-bottom > * { animation: tl-rise 0.9s cubic-bezier(.2,.7,.2,1) both; }
html.af-on.tl-intro-play .tl-lock-bottom > :nth-child(1) { animation-delay: 0.7s; }
html.af-on.tl-intro-play .tl-lock-bottom > :nth-child(2) { animation-delay: 0.85s; }
html.af-on.tl-intro-play .tl-lock-bottom > :nth-child(3) { animation-delay: 1s; }
html.af-on.tl-intro-play .tl-cue { animation: tl-fade 0.8s ease 1.4s both; }
@keyframes tl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tl-rise { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@keyframes tl-draw { from { opacity: 0; letter-spacing: 0.08em; } to { opacity: 1; letter-spacing: 0.01em; } }

/* =========================================================================
   2b. CHAPTER OPENERS, VOICES AND THE NUMBERS BOARD (both layouts)
   ========================================================================= */

/* ---- chapter openers: the heading, then the three screens that follow ---- */
.af-chapter-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px clamp(22px, 3vw, 44px); margin-top: clamp(24px, 4.4vh, 48px) !important; }
.af-chapter-list li { margin: 0; }
/* a list of where you are going, not a row of underlined links: one fine
   rule under each item, firming up on hover and focus */
html.page-home .af .af-chapter-list a {
  display: inline-flex; align-items: baseline; gap: 0.7em; color: #fff; text-decoration: none !important;
  font-weight: 700; font-size: clamp(1rem, 0.88rem + 0.45vw, 1.3rem); line-height: 1.3;
  padding: 0.35em 0; border-bottom: 1px solid rgba(255,255,255,0.24); transition: border-color 0.2s ease;
}
html.page-home .af .af-chapter-list a:hover, html.page-home .af .af-chapter-list a:focus-visible { border-bottom-color: #fff; }
.af-cl-n { font-size: 0.72em; letter-spacing: 0.14em; opacity: 0.72; }

/* ---- Voices: see voices.css. Two pieces shared with the rest of the page: ---- */
.af-ph-tag { display: inline-block; margin: 0 0 1.3em !important; padding: 0.4em 0.75em; border: 1px solid rgba(255,255,255,0.55); font-size: 0.8rem; font-weight: 700; line-height: 1.3; }
.af-proto-note { grid-column: 1 / -1; margin: 0; padding-top: 0.9em; border-top: 1px solid rgba(255,255,255,0.2); font-size: 0.8rem; line-height: 1.5; color: rgba(255,255,255,0.74); max-width: 62rem; }
.af-proto-note strong { color: #fff; }

/* ---- the numbers board ----
   Set as an editorial spread, not a dashboard: one display figure per
   group, a plain-sentence caption in regular weight, then the supporting
   figures as a quiet list. Each group has one muted colour (the moodboard's
   section colours, softened for navy): a short tab on its rule, its
   figures and the counted part of its picture. Text stays white. */
.af-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 3.4vh, 42px) clamp(32px, 4.6vw, 76px); margin-top: clamp(14px, 2.4vh, 26px); max-width: 76rem; }
.af-group { position: relative; padding-top: 1em; min-width: 0; container-type: inline-size; }
.af-group:nth-child(1) { --af-hue: #E5A15F; }   /* amber - Strategic ideas */
.af-group:nth-child(2) { --af-hue: #E0898F; }   /* rose - Strategic Conversations */
.af-group:nth-child(3) { --af-hue: #A595DB; }   /* lavender - Keele Debates */
.af-group:nth-child(4) { --af-hue: #79B9C6; }   /* sea - Students, alumni and partners */
.af-group::before, .af-group::after { content: ""; position: absolute; left: 0; top: 0; transform-origin: left center; transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.af-group::before { right: 0; height: 1px; background: rgba(255,255,255,0.42); }
.af-group::after { top: -1px; width: 2.75rem; height: 3px; background: var(--af-hue); }
.af .af-group-label { font-size: 0.9rem; font-weight: 700; line-height: 1.4; color: rgba(255,255,255,0.78); }
.af-lead { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 6px clamp(16px, 2vw, 32px); align-items: end; margin-top: 0.7em; }
.af-stat { margin: 0; }
.af-fig { display: block; font-family: var(--lb-display); font-weight: 900; line-height: 1; color: var(--af-hue, #fff); }
@supports (-webkit-text-stroke: 1px #fff) { .af-fig { color: transparent; -webkit-text-stroke: max(1.25px, 0.022em) var(--af-hue, #fff); } }
@media (forced-colors: active) { .af-fig { color: CanvasText; -webkit-text-stroke: 0; } }
.af-lead .af-fig { font-size: clamp(2.4rem, 0.9rem + 3vw, 4.3rem); letter-spacing: -0.01em; }
.af-lbl { display: block; font-weight: 400; line-height: 1.45; }
.af-lead .af-lbl { margin-top: 0.6em; max-width: 30ch; font-size: clamp(0.92rem, 0.84rem + 0.25vw, 1.02rem); line-height: 1.4; color: rgba(255,255,255,0.92); text-wrap: pretty; }
.af-viz { position: relative; width: 100%; max-width: 300px; justify-self: end; margin-bottom: 0.35em; }
.af-viz svg { display: block; width: 100%; height: auto; overflow: visible; }
.af-viz circle, .af-viz rect { fill: currentColor; }
.af-viz line { stroke: currentColor; stroke-width: 2; }
.af-viz .af-v-ring circle { fill: var(--lb-navy); stroke: currentColor; stroke-width: 2; }
.af-viz .af-v-thick circle, .af-viz .af-v-dot circle { fill: currentColor; stroke: none; }
.af-viz text { fill: rgba(255,255,255,0.72); font: 600 12px/1 var(--lb-text); letter-spacing: 0.04em; }
.af-viz-base { color: rgba(255,255,255,0.2); }
.af-viz-fill { position: absolute; inset: 0; color: var(--af-hue, #fff); clip-path: inset(0 0 0 0); transition: clip-path 1.8s cubic-bezier(.25,.6,.25,1) 0.2s; }
.af-viz-fill text { display: none; }
/* the supporting figures: a quiet list, figure and sentence on one baseline */
.af-more { list-style: none; padding: 0; margin-top: 0.95em !important; }
/* the figure column fits the widest figure ("3,600+"); figures sit right-aligned in it,
   so every figure is the same short step from its sentence */
.af-more li { margin: 0; display: grid; grid-template-columns: 3.8em minmax(0, 1fr); gap: 0 0.8em; align-items: baseline; padding: 0.5em 0 0.45em; border-top: 1px solid rgba(255,255,255,0.14); }
.af-more .af-fig { text-align: right; white-space: nowrap; font-family: var(--lb-text); font-weight: 700; font-size: 1.36rem; line-height: 1.2; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; color: var(--af-hue, #fff); -webkit-text-stroke: 0; }
.af-more .af-lbl { font-size: 0.86rem; line-height: 1.4; color: rgba(255,255,255,0.78); }
.af-board-all { display: none; }
/* the same colours in "See all 12 figures" (phones) */
.af-all li:nth-child(-n+3) { --af-hue: #E5A15F; }
.af-all li:nth-child(n+4):nth-child(-n+7) { --af-hue: #E0898F; }
.af-all li:nth-child(n+8):nth-child(-n+9) { --af-hue: #A595DB; }
.af-all li:nth-child(n+10) { --af-hue: #79B9C6; }
.af-all-n { color: var(--af-hue, #fff); }
/* every caption starts with a capital - the figure sits above or beside it,
   so it reads as its own line. Done here, not in the copy, so the words stay
   as supplied and a screen reader still hears "300+ strategic ideas ..." */
.af-lbl::first-letter, .af-all-t::first-letter { text-transform: uppercase; }
.af-all-t { display: block; }
@container (max-width: 400px) {
  .af-lead { grid-template-columns: 1fr; }
  .af-viz { justify-self: start; max-width: 260px; margin-top: 0.7em; }
}
/* motion: the board draws itself as it arrives (class set by js/home.js) */
html.af-on .af-board:not(.is-live) .af-group::before, html.af-on .af-board:not(.is-live) .af-group::after { transform: scaleX(0); }
html.af-on .af-board:not(.is-live) .af-viz-fill { clip-path: inset(0 100% 0 0); }
html.af-on .af-group:nth-child(2)::before, html.af-on .af-group:nth-child(2)::after { transition-delay: 0.12s; }
html.af-on .af-group:nth-child(3)::before, html.af-on .af-group:nth-child(3)::after { transition-delay: 0.24s; }
html.af-on .af-group:nth-child(4)::before, html.af-on .af-group:nth-child(4)::after { transition-delay: 0.36s; }
html.af-on .af-group:nth-child(2) .af-viz-fill { transition-delay: 0.35s; }
html.af-on .af-group:nth-child(3) .af-viz-fill { transition-delay: 0.5s; }
html.af-on .af-group:nth-child(4) .af-viz-fill { transition-delay: 0.65s; }
/* short laptop screens: the lead figures and their pictures; the rest is one tap away */
@media (min-width: 701px) and (max-height: 820px) {
  html.af-on .af-more { display: none; }
  html.af-on .af-board-all { display: block; }
}

/* ---- the rail on tablets: markers only; the label shows on hover or focus ---- */
@media (min-width: 701px) and (max-width: 1099px) {
  html.page-home { --af-rail: 84px; }
  html.page-home .af .lb-index a { position: relative; padding: 8px 0; }
  .lb-index .af-rl { position: absolute; right: 58px; top: 50%; transform: translateY(-50%); white-space: nowrap; opacity: 0; pointer-events: none; background: var(--lb-navy-deep); padding: 0.5em 0.75em; transition: opacity 0.2s ease; }
  .lb-index a:hover .af-rl, .lb-index a:focus-visible .af-rl { opacity: 1; }
}

/* =========================================================================
   3. "READ MORE" PANELS (native <dialog>; Esc closes; focus returns)
   ========================================================================= */
html.page-home.af-modal { overflow: hidden; }
.af-dialog {
  border: var(--lb-bw) solid #fff; padding: 0; margin: auto;
  width: min(46rem, calc(100vw - 32px)); max-height: min(86vh, 56rem); max-height: min(86svh, 56rem);
  background: var(--lb-navy); color: #fff; font-family: var(--lb-text);
  overscroll-behavior: contain;
}
.af-dialog::backdrop { background: rgba(var(--lb-scrim), 0.78); }
.af-dialog-in { padding: clamp(20px, 4vw, 48px); padding-top: 0; }
.af-dialog-bar { position: sticky; top: 0; display: flex; justify-content: flex-end; padding: clamp(14px, 2.4vw, 22px) 0 10px; margin: 0 0 6px; background: var(--lb-navy); z-index: 1; }
.af-close {
  border: 2px solid #fff; background: transparent; color: #fff; font: inherit; font-weight: 700; font-size: 0.85rem;
  padding: 0.55em 0.9em; cursor: pointer; display: inline-flex; gap: 0.5em; align-items: center;
}
.af-close:hover { background: #fff; color: var(--lb-navy); }
.af-close:focus-visible, .af-dialog :focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.af .af-dialog-title { font-size: clamp(1.8rem, 1rem + 4vw, 3.4rem); margin: 0 0 0.6em; }
.af-dialog p { margin: 0; line-height: 1.6; font-size: 1.02rem; max-width: 40rem; }
.af-dialog p + p { margin-top: 1em; }
.af-dialog p:focus, .af .af-dialog-title:focus { outline: none; box-shadow: none; }
.af-all { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); }
.af-all li { margin: 0; padding: 0.9em 0; border-top: 1px solid rgba(255,255,255,0.3); line-height: 1.45; font-size: 0.98rem; }
.af-all-n { display: block; font-family: var(--lb-display); font-weight: 900; font-size: 2rem; line-height: 1.05; margin-bottom: 0.15em; }
.af-all-inline { display: inline; font-size: inherit; font-family: inherit; }
@media (max-width: 600px) { .af-all { grid-template-columns: 1fr; } }
/* Film transcript */
.lb-film-tr .af-textbtn { font-size: inherit; }
.af .af-dialog-tr .af-dialog-title { margin-bottom: 0.25em; }
.af-dialog .af-tr-sub { font-size: 0.9rem; color: rgba(255,255,255,0.8); margin-bottom: 1.4em; }
.af-dialog .af-tr-note { margin-top: 1.6em; font-size: 0.8rem; color: rgba(255,255,255,0.74); }
html.page-home .af .af-tr-note a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* Without JavaScript the panels just show, in the page flow */
html:not(.af-js) .af-dialog { display: block; position: static; width: auto; max-width: 96rem; max-height: none; margin: 0 auto clamp(20px, 3vw, 44px); border-width: 0; }
html:not(.af-js) .af-dialog-bar { display: none; }

/* =========================================================================
   4. PHONE
   ========================================================================= */
@media (max-width: 700px) {
  .tl-inside-strap { font-size: 6.6vw; }
  html.af-on .tl-photo .tl-cap { left: var(--lb-pad); right: var(--lb-pad); text-align: left; bottom: calc(var(--lb-safe-b) + 12px); font-size: 0.64rem; }
  html.af-on .tl-cue { bottom: calc(var(--lb-safe-b) + var(--tl-shift, 0px) + 14px); }
  html.af-on .lb-cap { left: var(--lb-pad); right: var(--lb-pad); text-align: left; bottom: calc(var(--lb-safe-b) + 12px); font-size: 0.64rem; max-width: none; }

  /* ambition and principles: one beat at a time, in the same place */
  html.af-on .af-ambition > .lb-copy { bottom: calc(var(--lb-safe-b) + 52px); }
  html.af-on .af-ambition-title { font-size: 11vw; }
  html.af-on .af-ambition .af-beats { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 18px; }
  html.af-on .af-ambition .af-beat + .af-beat { margin-top: 0; }
  html.af-on .af-ambition .af-beat { grid-area: 1 / 1; align-self: start; }
  html.af-on .af-ambition .af-statement { font-size: 1.32rem; }
  html.af-on .af-principles > .lb-copy { top: auto; bottom: calc(var(--lb-safe-b) + 56px); transform: translateY(var(--lb-y, 0px)); }
  html.af-on .af-principles-intro { font-size: 0.92rem; }
  html.af-on .af-principles-list { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 22px; }
  html.af-on .af-principle { grid-area: 1 / 1; align-self: start; }
  html.af-on .af-principle h3.lb-ol { font-size: 8.4vw; }
  html.af-on .af-principle { container-type: normal; }
  html.af-on .af-principle p { font-size: 0.96rem; max-width: 24rem; }

  html.af-on .lb-inter h2.lb-ol { font-size: 12vw; }

  html.af-on .lb-world .lb-plate::after,
  html.af-on .af-text:not(.af-wall) .lb-plate::after {
    background: linear-gradient(0deg, rgba(var(--lb-scrim), 0.94) 0%, rgba(var(--lb-scrim), 0.66) 52%, rgba(var(--lb-scrim), var(--lb-far, 0.2)) 86%);
  }
  html.af-on .lb-world .lb-head { font-size: 1.12rem; }
  html.af-on .lb-world .lb-text { font-size: 0.95rem; }

  /* text panels, quotes and figures sit low on phones, out of the way of the header */
  html.af-on .af-text > .lb-copy,
  html.af-on .af-numbers > .lb-copy,
  html.af-on .af-finale > .lb-copy { top: auto; bottom: calc(var(--lb-safe-b) + 40px); transform: translateY(var(--lb-y, 0px)); width: auto; right: var(--lb-pad); }
  html.af-on .af-text:not(.af-wall) > .lb-copy { bottom: calc(var(--lb-safe-b) + 46px); }
  /* the elephant's caption carries a description and a credit, so it runs to three lines: lift the copy clear of it */
  html.af-on #need-for-change > .lb-copy { bottom: calc(var(--lb-safe-b) + 66px); }
  html.af-on .af-text .af-title { font-size: 10.4vw; }
  html.af-on .af-para { font-size: 0.97rem; line-height: 1.5; }
  html.af-on .af-para-lg { font-size: 1.12rem; }
  html.af-on .af-accept { font-size: 11.2vw; }
  html.af-on .af-wedgwood { font-size: 1.08rem; }
  html.af-on .af-ctas { gap: 10px; }
  html.page-home .af .af-ctas .lb-button { padding: 0.75em 1em; font-size: 0.9rem; }

  /* the index becomes six progress bars under the header */
  html.af-on .lb-index { left: var(--lb-pad); right: var(--lb-pad); top: calc(var(--bar-h) + 2px); transform: none; }
  html.af-on .lb-index ol { display: flex; gap: 4px; }
  html.af-on .lb-index li { flex: 1; }
  html.page-home .af .lb-index a { display: block; height: 30px; padding: 0; position: relative; opacity: 1; font-size: 0; letter-spacing: 0; }
  html.page-home .af .lb-index a.is-done { opacity: 1; }
  .af-mark { position: absolute; left: 0; right: 0; top: 13px; width: auto; height: 3px; transform: none; }
  .lb-index a:not([aria-current]):not(.is-done) .af-mark i { opacity: 0.36; }
  .lb-index a[aria-current] .af-mark { gap: 2px; }
}
@media (max-width: 700px) {
  /* openers: the three screens as a short list */
  .af-chapter-list { flex-direction: column; gap: 2px; }
  html.page-home .af .af-chapter-list a { font-size: 1rem; }
  /* voices: see voices.css */
  html.af-on .af-proto-note { font-size: 0.72rem; }
  /* the opening statement: the principles fit the width */
  html.af-on .tl-word { font-size: 7.6vw; }
  /* numbers: the four lead figures, each with its drawn rule; all twelve in the dialog */
  html.af-on .af-board { grid-template-columns: 1fr 1fr; gap: 22px 16px; margin-top: 12px; }
  html.af-on .af-more, html.af-on .af-viz { display: none; }
  html.af-on .af-lead { grid-template-columns: 1fr; margin-top: 0.4em; }
  html.af-on .af-lead .af-fig { font-size: 10.4vw; }
  html.af-on .af-lead .af-lbl { font-size: 0.86rem; line-height: 1.4; }
  html.af-on .af .af-group-label { font-size: 0.6rem; letter-spacing: 0.12em; }
  html.af-on .af .af-group-label { min-height: 2.8em; }
  html.af-on .af-board-all { display: block; }

}
@media (max-width: 900px) {
  html.af-on .lb-film-col { width: min(100%, 640px); }
}
@media (max-height: 560px) and (min-width: 701px) {
  html.af-on .af-principles-intro { display: none; }
}

@media print {
  html.page-home body, .af { background: #fff; color: #000; }
}

/* credit for the poster photograph (filled from data.js) */
.lb-film-credit { margin-top: 0.35em !important; }
/* the caption sat tight under the film's white frame: give it room, then keep caption, transcript link and credit as one group */
.lb-film-slot + .lb-film-note { margin-top: clamp(14px, 1.6vw, 22px) !important; }
.lb-film-note.lb-film-tr { margin-top: 0.6em !important; }

/* ---- Page travel (docs/motion.md) ----
   Opting in here lets the move from the homepage into a chapter wipe on the
   diagonal (the animation itself is in css/chapter.css, on the arriving
   page). Arriving at the homepage never wipes: see the script in the <head>
   of index.html. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}