/* ==========================================================================
   BZ4NY / CONYO
   Type:  Comfortaa (display) + Lato (body)
   Field: the campaign navy, carried over unchanged.
   Language: flat sticker blocks with hard offset shadows — the same
   speech-bubble vocabulary as the printed collateral, not generic dark cards.
   ========================================================================== */

/* --- tokens -------------------------------------------------------------- */
:root {
  /* One field colour for everything — page, panes, footer, scroll boxes.
     Depth comes from borders and colour, never from a lighter fill. */
  --navy:      #050A30;
  --navy-deep: #050A30;

  --cyan:    #07CBFD;
  --magenta: #FF10F0;
  --white:   #FFFFFF;

  /* Aliases kept so older rules resolve to the four-colour palette. */
  --paper: var(--white);
  --dim:   color-mix(in srgb, var(--white) 68%, var(--navy));
  --sign:  var(--white);
  --sign-ink: var(--navy);

  --rule: color-mix(in srgb, var(--cyan) 30%, transparent);

  --measure: 66ch;
  --gutter: clamp(1.15rem, 4vw, 3.25rem);
  --r: 22px;                    /* the sticker radius */
  --shadow: none;

  /* Per-pane accents. Odd panes read blue-led, even panes pink-led, and the
     scrollbar always takes the opposite colour to its border. */
  --edge: var(--cyan);
  --scroll: var(--magenta);

  --display: "Comfortaa", "Trebuchet MS", sans-serif;
  --body: "Lato", system-ui, -apple-system, sans-serif;
}

/* --- reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--navy);
  color: var(--paper);
  font-family: var(--body);
  font-size: clamp(1rem, 0.97rem + 0.18vw, 1.075rem);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--cyan); }

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--magenta);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--magenta); color: #fff;
  padding: 0.75rem 1.25rem; z-index: 100; font-weight: 900;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.shell { width: min(1200px, 100% - var(--gutter) * 2); margin-inline: auto; }

h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* --- placard ------------------------------------------------------------- */
.placard {
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.05rem;
  background: var(--sign); color: var(--sign-ink);
  font-family: var(--body); font-weight: 900;
  line-height: 1.2; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.5rem 0.85rem;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.4);
  transform: rotate(-1.5deg);
  font-size: 0.8rem;
}
.placard--sm { font-size: 0.68rem; padding: 0.4rem 0.7rem; box-shadow: 4px 4px 0 rgba(0,0,0,0.4); }
/* Section marker: leads the header bar, before the title. */
.pane__placard { flex: none; white-space: nowrap; order: -1; }

/* --- masthead ------------------------------------------------------------ */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--navy-deep) 92%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}
.masthead__inner { position: relative; display: flex; align-items: center; gap: 1rem; padding-block: 0.65rem; }

.wordmark { display: block; line-height: 0; flex: none; }
.wordmark img { width: auto; height: 42px; }

/* Slogan sits beside the mark in the masthead. It shrinks on narrow screens
   but never disappears — it is the line the site is named for. */
.masthead__slogan {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(0.72rem, 0.55rem + 0.75vw, 0.95rem);
  line-height: 1.15; margin: 0; color: var(--cyan);
  min-width: 0;
}
.masthead__of { color: var(--white); }
.masthead__slogan em { font-style: normal; color: var(--magenta); }
.masthead__slogan a { color: inherit; text-decoration: none; }
.masthead__slogan a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* Desktop: the pages sit in the bar. Below 1150px there is no longer room
   for eight labels beside the mark and slogan, so they collapse to a menu. */
.nav { margin-left: auto; }
.nav__list {
  display: flex; flex-wrap: nowrap; gap: 0.1rem;
  list-style: none; margin: 0; padding: 0;
}
.nav__list a {
  display: block; padding: 0.4rem 0.6rem;
  font-size: 0.78rem; font-weight: 700; white-space: nowrap;
  color: var(--dim); text-decoration: none; border-radius: 999px;
}
.nav__list a:hover { color: var(--navy-deep); background: var(--paper); }
.nav__list a[aria-current="page"] { color: var(--navy-deep); background: var(--cyan); }

.nav__toggle {
  display: none; margin-left: auto;
  background: none; border: 0; padding: 0.4rem;
  color: var(--cyan); cursor: pointer; line-height: 0;
}
.nav__toggle svg { width: 28px; height: 28px; }
.nav__toggle .icon-close { display: none; }
.nav__toggle[aria-expanded="true"] .icon-open { display: none; }
.nav__toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 1150px) {
  .nav__toggle { display: block; }
  .nav {
    position: absolute; top: 100%; right: 0; margin-left: 0;
    min-width: min(260px, 92vw);
    background: var(--navy);
    border: 2px solid var(--cyan);
    border-radius: 0 0 var(--r) var(--r);
    padding: 0.5rem;
  }
  .nav[data-open="false"] { display: none; }
  .nav__list { flex-direction: column; flex-wrap: nowrap; gap: 0.15rem; }
  .nav__list a { display: flex; align-items: center; min-height: 44px; padding: 0.55rem 0.8rem; font-size: 0.86rem; }
}

/* --- social icons -------------------------------------------------------- */
/* One row of round buttons, built from MEDIA_LINKS in build.py. Profiles
   without a URL yet show dimmed and are not links. */
.social { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.social a, .social span {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  color: var(--cyan);
  border: 1.5px solid color-mix(in srgb, var(--cyan) 45%, transparent);
}
.social svg { width: 20px; height: 20px; }
.social a:hover { background: var(--cyan); color: var(--navy-deep); border-color: var(--cyan); }

/* In the header the row only appears inside the mobile menu; desktop keeps
   the bar to the page links, and the row lives in the footer. */
.nav .social { display: none; }
@media (max-width: 1150px) {
  .nav .social {
    display: flex; gap: 0.3rem;
    margin: 0.4rem 0.35rem 0.2rem; padding-top: 0.6rem;
    border-top: 1px solid var(--rule);
  }
  .nav { width: min(320px, 92vw); max-height: calc(100svh - 5rem); overflow-y: auto; }
}

/* --- hero ---------------------------------------------------------------- */
.hero { padding-block: clamp(2.75rem, 7vw, 5.5rem) clamp(2rem, 5vw, 3.25rem); }

.eyebrow {
  display: inline-block;
  font-weight: 900; font-size: 0.76rem;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--navy-deep); background: var(--cyan);
  padding: 0.4rem 0.9rem; border-radius: 999px;
  margin: 0 0 1.25rem;
}

/* --- buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  padding: 0.75rem 1.5rem; border-radius: 999px;
  text-decoration: none; border: 3px solid transparent; cursor: pointer;
  box-shadow: 4px 4px 0 var(--navy-deep);
}
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--navy-deep); }
.btn--primary { background: var(--magenta); color: #fff; }
.btn--primary:hover { background: var(--white); color: var(--navy); }
.btn--ghost { border-color: var(--cyan); color: var(--cyan); }
.btn--ghost:hover { background: var(--cyan); color: var(--navy-deep); }

/* ==========================================================================
   READER — the internally scrolling panes
   Each pane is a fixed-height window onto a longer passage. The body scrolls
   inside the block, so the page stays a predictable length.
   ========================================================================== */
.reader {
  display: grid;
  /* Grid items default to min-width: auto, so any child with a wide
     min-content — the section 10 gallery track, for one — would size the
     whole column and push every other section off-screen. */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(4.5rem, 10vw, 8rem);         /* the space between sections */
  padding-bottom: clamp(3rem, 8vw, 6rem);
}

.stack { display: grid; gap: clamp(3rem, 7vw, 5.5rem); margin: 0; padding: 0; }

/* --- plate: one slide + its passage --------------------------------------
   The seven slides are finished artwork. Each sits beside the text it
   illustrates, and the pair alternates sides down the page so the eye
   crosses the column instead of running down one edge.
   ------------------------------------------------------------------------ */
.plate {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
  scroll-margin-top: 96px;
}
@media (min-width: 1040px) {
  .plate { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .plate--flip .plate__figure { order: 2; }
}

.plate__figure { margin: 0; display: grid; gap: 0.55rem; }
.plate__frame {
  display: block; overflow: hidden;
  background: var(--navy);               /* square, borderless, no shadow */
}
.plate__frame img { width: 100%; height: auto; }

/* Sits above the artwork's top-right corner so it never covers the image. */
.plate__zoom {
  justify-self: end;
  display: inline-flex; align-items: center; gap: 0.35rem;
  text-decoration: none;
  padding: 0.28rem 0.6rem; border-radius: 999px;
  background: var(--navy); color: var(--edge);
  border: 1px solid var(--edge);
  font-size: 0.66rem; font-weight: 900;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.plate__zoom:hover { background: var(--edge); color: var(--navy); }
.plate__zoom svg { width: 12px; height: 12px; flex: none; }

.pane {
  position: relative;
  border-radius: var(--r);
  background: var(--navy);
  border: 2px solid var(--edge);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-rows: auto 1fr auto;
}
/* Even panes flip the pair: pink edge, blue scrollbar. */
.pane--alt { --edge: var(--magenta); --scroll: var(--cyan); }

/* Header rule, not a filled bar: the title carries the section's colour and
   the box keeps its own field, so the page reads quieter. */
.pane__head {
  display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
  padding: 1rem clamp(1.15rem, 3vw, 1.9rem);
  background: transparent;
  color: var(--edge);
  border-bottom: 2px solid var(--edge);
}

.pane__title { font-size: clamp(1.25rem, 1.05rem + 0.85vw, 1.7rem); margin: 0; line-height: 1.18; }

/* the scrolling window */
.pane__window { position: relative; min-height: 0; }

.pane__scroll {
  overflow-y: auto;
  /* Deliberately NOT overscroll-behavior:contain — when a pane reaches its
     end the wheel must chain back to the page, or the reader gets stuck. */
  height: clamp(320px, 48vh, 460px);
  padding: clamp(1.25rem, 3vw, 2rem);
  font-size: 0.95rem; line-height: 1.6;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll) transparent;
}
.pane__scroll::-webkit-scrollbar { width: 11px; }
.pane__scroll::-webkit-scrollbar-track { background: transparent; }
.pane__scroll::-webkit-scrollbar-thumb {
  background: var(--scroll); border-radius: 999px;
  border: 3px solid var(--navy);
}
.pane__scroll:focus-visible { outline: 3px solid var(--scroll); outline-offset: -3px; }

.pane__scroll p { max-width: var(--measure); color: var(--white); }
/* Blue and pink do the emphasis: the opening line takes the pane's own
   colour, bold runs take its opposite. */
.pane__scroll > p:first-child { color: var(--edge); font-weight: 700; }
.pane__scroll strong { color: var(--scroll); font-weight: 900; }
.pane__scroll .steps li { color: var(--paper); }

/* bottom fade so a cut-off paragraph reads as "there is more" */
.pane__fade {
  position: absolute; inset-inline: 0; bottom: 0; height: 56px;
  background: linear-gradient(transparent, var(--navy));
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.pane[data-at-end="true"] .pane__fade { opacity: 0; }

.pane__foot {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.65rem clamp(1.15rem, 3vw, 1.9rem);
  background: var(--navy);
  border-top: 1px solid color-mix(in srgb, var(--edge) 35%, transparent);
  border-radius: 0 0 calc(var(--r) - 2px) calc(var(--r) - 2px);
  font-size: 0.72rem; font-weight: 900; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--dim);
}
.pane__progress {
  flex: 1; height: 5px; border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 14%, transparent);
  overflow: hidden;
}
.pane__progress i { display: block; height: 100%; width: 0%; background: var(--scroll); border-radius: 999px; }

/* --- in-pane content bits ------------------------------------------------ */
.steps { counter-reset: step; list-style: none; padding: 0; display: grid; gap: 0.7rem; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2rem 1fr; gap: 0.85rem; align-items: baseline; }
.steps li::before {
  content: counter(step);
  font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--scroll);
}

/* Pull quotes take the pane's opposite colour, so blue passages break to pink
   and pink passages break to blue. */
.pull {
  padding: 0.9rem 1.15rem;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  border-radius: 14px;
  background: color-mix(in srgb, var(--scroll) 15%, transparent);
  border-left: 4px solid var(--scroll);
  color: #fff;
  font-family: var(--display); font-weight: 700; line-height: 1.38;
}
/* The closing passage is short; let its quote carry the empty space. */
.pull--lead {
  font-size: clamp(1.35rem, 1.1rem + 1.5vw, 2.1rem);
  line-height: 1.25; padding: 1.4rem 1.5rem;
}

/* Space under the sticky bar so the page opens with air. */
#main { padding-top: clamp(1.75rem, 4vw, 3.25rem); }

/* --- generic sections ---------------------------------------------------- */
.section { padding-block: clamp(2.25rem, 5.5vw, 4rem); }

.grid { display: grid; gap: 1.25rem; }

/* --- utility ------------------------------------------------------------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ==========================================================================
   PAGE 2 — portrait plates, image-only plates, and the arrow gallery
   ========================================================================== */

/* Portrait artwork (ws10 a/b/c, ws13) is taller than it is wide, so it gets a
   narrower column instead of being stretched to the landscape width. */
.plate--portrait .plate__frame { max-width: 460px; }
.plate--portrait .plate__figure { justify-items: start; }

/* --- gallery ------------------------------------------------------------- */
.gallery { margin-block: clamp(1.5rem, 4vw, 2.5rem); min-width: 0; }
.gallery__head {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 0.9rem;
}
.gallery__title { font-size: clamp(1.25rem, 1.05rem + 0.85vw, 1.7rem); margin: 0; }
.gallery__nav { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }

.gallery__btn {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--navy); color: var(--cyan);
  border: 2px solid var(--cyan); cursor: pointer;
}
.gallery__btn:hover:not(:disabled) { background: var(--cyan); color: var(--navy); }
.gallery__btn:disabled { opacity: 0.35; cursor: default; }
.gallery__btn svg { width: 18px; height: 18px; }

.gallery__count {
  font-weight: 900; font-size: 0.78rem; letter-spacing: 0.12em;
  color: var(--white); min-width: 4.5ch; text-align: center;
}

.gallery__track {
  min-width: 0;
  display: grid; grid-auto-flow: column;
  grid-auto-columns: min(320px, 76vw);
  gap: 1rem; overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin; scrollbar-color: var(--magenta) transparent;
  padding-bottom: 0.75rem;
}
.gallery__track::-webkit-scrollbar { height: 9px; }
.gallery__track::-webkit-scrollbar-track { background: transparent; }
.gallery__track::-webkit-scrollbar-thumb { background: var(--magenta); border-radius: 999px; }
.gallery__track > figure { margin: 0; scroll-snap-align: start; }
.gallery__track img { width: 100%; height: auto; }
.gallery__cap {
  margin-top: 0.5rem; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim);
}

/* --- section-closing button --------------------------------------------- */
.plate__cta { display: flex; justify-content: center; margin-top: 1.25rem; }
.gallery__lede { max-width: var(--measure); color: var(--white); margin: 0 0 1.1rem; font-size: 0.95rem; }

/* ==========================================================================
   LIGHTBOX — full-size artwork without leaving the page
   The links still point at the .png, so with JS off they behave as before.
   ========================================================================== */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: grid; grid-template-rows: auto 1fr;
  gap: 0.5rem; padding: clamp(0.75rem, 2vw, 1.25rem);
  background: color-mix(in srgb, var(--navy) 96%, transparent);
}
.lightbox[hidden] { display: none; }

/* The close control sits above the artwork, never on top of it. */
.lightbox__bar { display: flex; align-items: center; gap: 1rem; }
.lightbox__label {
  font-weight: 900; font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--white);
}
.lightbox__close {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.4rem 0.9rem 0.4rem 0.7rem; border-radius: 999px;
  background: var(--navy); color: var(--cyan);
  border: 2px solid var(--cyan); cursor: pointer;
  font: inherit; font-weight: 900; font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.lightbox__close:hover { background: var(--cyan); color: var(--navy); }
.lightbox__close svg { width: 15px; height: 15px; }

.lightbox__stage {
  min-height: 0; display: grid; place-items: center;
  overflow: auto;
}
.lightbox__img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain;
}

/* ==========================================================================
   RESPONSIVE CORRECTIONS
   ========================================================================== */

/* `clip` rather than `hidden`: it contains stray overflow without breaking
   the sticky masthead the way overflow-x:hidden does. */
body { overflow-x: clip; }

/* Long words and URLs must not push a column wider than the screen. */
.pane__title, .gallery__title, .pane__scroll, .foot-text, .gallery__lede {
  overflow-wrap: break-word;
}

/* On a short viewport (landscape phone) a 320px floor left the pane taller
   than the screen. Let it shrink, and give it more room on tall screens. */
.pane__scroll { height: clamp(240px, 46vh, 460px); }

/* Below the two-column breakpoint the artwork should not tower over the
   text on a phone — cap it so the passage stays reachable. */
@media (max-width: 1039px) {
  .plate--portrait .plate__frame { max-width: 100%; }
  .plate__figure { max-width: 780px; }
}

/* The masthead is the tightest row on the page. Give the slogan permission
   to wrap onto two lines before anything is forced to overflow. */
@media (max-width: 420px) {
  .wordmark img { height: 34px; }
  .masthead__inner { gap: 0.6rem; }
}

/* Panes carry a fixed-height scroller, so on very small screens trim the
   padding rather than the reading area. */
@media (max-width: 480px) {
  .pane__scroll { padding: 1rem; }
  .pane__head { padding: 0.75rem 1rem; }
  .pane__foot { padding: 0.55rem 1rem; }
}

/* ==========================================================================
   VERSUS — the Democracy / Efficracy comparison, GenioPolicy section 01
   Democracy in white, Efficracy in cyan. Type size carries the argument.

   Sizes are in cqi — percent of the box's own width — so the proportions of
   the source graphic hold whether the box is half a desktop row or the full
   width of a phone. clamp() keeps both extremes readable.
   ========================================================================== */
.pane--versus .pane__scroll {
  container-type: inline-size;
  /* The softer azure of the source comparison graphic. Scoped to this one
     component — the rest of the site keeps the four-colour palette. */
  --versus-blue: #4A9EE8;
}

/* Lines stack almost flush, as in the source: the block reads as one
   statement rather than a list of separate points. */
.versus { display: grid; gap: 1.15rem; }
.versus__pair { display: grid; gap: 0; }
.versus__side { display: grid; gap: 0; }

/* The two voices. Scoped to the scroll box so they out-specify the generic
   `.pane__scroll p { color: white }` rule, which would otherwise flatten
   every line to white. */
.pane__scroll .versus__d { color: var(--white); }
.pane__scroll .versus__e { color: var(--versus-blue); }
.versus__d, .versus__e { margin: 0; }

.versus__lead { margin: 0; line-height: 1.04; }
.versus__sub  { margin: 0; font-weight: 400; line-height: 1.04; }

/* Once measured, each line is set to span the full width of the box — the
   behaviour the source graphic relies on. Until then (or with JS off) the
   clamps below apply and lines wrap normally. */
.versus[data-fitted="true"] [data-fit] { white-space: nowrap; }

/* Smallest detail — bold, as in the source. */
.versus__pair--sm { font-size: clamp(0.72rem, 1.95cqi, 1.1rem); }
.versus__pair--sm .versus__lead { font-weight: 800; }

/* The regime line — regular weight, mid scale. */
.versus__pair--md { font-size: clamp(0.95rem, 3.3cqi, 1.85rem); }
.versus__pair--md .versus__lead { font-weight: 400; }

/* The loudest claims. */
.versus__pair--lg .versus__lead {
  font-size: clamp(1.3rem, 5.6cqi, 3.4rem);
  font-weight: 700;
}
.versus__pair--lg .versus__sub { font-size: clamp(0.95rem, 3.4cqi, 2.1rem); }
/* One subline runs nearly as large as its lead in the source. */
.versus__sub--xl { font-size: clamp(1.2rem, 5.3cqi, 3.15rem); }

/* The closing example, in the campaign's pink. */
.pane__scroll .versus__example { color: var(--magenta); }
.versus__example {
  margin: 0; font-weight: 800;
  font-size: clamp(0.85rem, 2.45cqi, 1.65rem);
  line-height: 1.2;
}
.versus__example mark {
  background: var(--white); color: var(--magenta);
  padding: 0 0.25rem; border-radius: 3px;
}

/* The closing quote carries the section, so it is set largest. */

.quote {
  padding: clamp(1.1rem, 3vw, 1.9rem);
  border-left: 5px solid var(--magenta);
  border-radius: 0 14px 14px 0;
  background: color-mix(in srgb, var(--magenta) 12%, transparent);
}
.quote p {
  margin: 0;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.3rem);
  line-height: 1.35; color: var(--white);
}
.quote footer {
  margin-top: 0.9rem;
  font-weight: 900; font-size: 0.78rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--magenta);
}

/* ==========================================================================
   DROPS — disclosures inside a pane
   Native <details>, so they open without JavaScript, are keyboard-operable
   and searchable in-page. The marker is drawn by us; the default triangle
   is removed on both engines.
   ========================================================================== */
.pane__subtitle {
  margin: 0 0 1.25rem;
  color: var(--edge);
  font-weight: 700;
  font-size: 1.02em;
  line-height: 1.4;
}

.drops { display: grid; gap: 0.6rem; }

.drop {
  border: 1px solid color-mix(in srgb, var(--edge) 45%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--edge) 7%, transparent);
}
.drop[open] { border-color: var(--edge); }

.drop > summary {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.75rem 0.95rem;
  cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 700;
  font-size: 1rem; line-height: 1.25; color: var(--edge);
}
.drop > summary::-webkit-details-marker { display: none; }
.drop > summary:hover { color: var(--white); }
.drop > summary:focus-visible { outline: 3px solid var(--scroll); outline-offset: -3px; border-radius: 12px; }

/* Our own marker: a plus that becomes a minus when the drop is open. */
.drop__mark {
  flex: none; position: relative;
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid currentColor;
}
.drop__mark::before, .drop__mark::after {
  content: ""; position: absolute; inset: 50% 4px auto 4px;
  height: 2px; background: currentColor; transform: translateY(-50%);
}
.drop__mark::after { transform: translateY(-50%) rotate(90deg); transition: transform 0.18s ease; }
.drop[open] .drop__mark::after { transform: translateY(-50%) rotate(0deg); }
@media (prefers-reduced-motion: reduce) { .drop__mark::after { transition: none; } }

.drop__body { padding: 0 0.95rem 0.95rem; }
.drop__body > * + * { margin-top: 0.9rem; }
.drop__body p { margin: 0; color: var(--white); }

/* ==========================================================================
   PLATE ROW — image-only plates set side by side (BZ4NY, WS17–WS20)
   ========================================================================== */
.plate-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: start;
}
@media (max-width: 700px) { .plate-row { grid-template-columns: 1fr; } }
.plate-row .plate__figure { gap: 0.5rem; }
.plate-row .plate__zoom { font-size: 0.6rem; padding: 0.24rem 0.5rem; }
.plate-row .plate__zoom svg { width: 11px; height: 11px; }

/* Marker colour variants — same placard shape, different stock. */
.placard--cyan { background: var(--cyan); }
.placard--pink { background: var(--magenta); }

/* ==========================================================================
   PAGE HERO — pitch left, campaign plate right, on a plain navy field
   ========================================================================== */
.phero {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  /* Twice the room below, so the hero reads as separate from Section 08. */
  padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(5rem, 14vw, 11rem);
  background: var(--navy);
}
@media (min-width: 860px) {
  .phero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}

.phero__portrait { margin: 0; }
.phero__portrait img { width: 100%; height: auto; display: block; }

/* Both the greeting and the closing line share one treatment. */
.phero__title {
  margin: 0;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.9rem, 1.2rem + 3.2vw, 3.4rem);
  line-height: 1.08;
  color: var(--cyan);
}
.phero__title--after { margin-top: 1.1rem; }

.phero__text {
  margin: 1.1rem 0 0;
  max-width: var(--measure);
  font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.28rem);
  color: var(--magenta);
}

/* Long open letters read better with more air; the spacing itself lives in
   the flow block at the end of this file. */
.pane--airy .pane__scroll .pane__salutation { color: var(--edge); font-weight: 700; }

/* ==========================================================================
   REEL — section 28: six plates with their passages, behind one set of arrows
   Desktop puts the arrows at the sides of the frame; below 760px they move
   above it, clear of the artwork, where a thumb can reach them.
   ========================================================================== */
.reel { display: grid; gap: 1.1rem; }

.reel__head { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.reel__titles { display: grid; gap: 0.3rem; min-width: 0; }
.reel__t1, .reel__t2 {
  margin: 0;
  font-family: var(--display); font-weight: 700; line-height: 1.15;
  font-size: clamp(1.15rem, 1rem + 1vw, 1.85rem);
}
.reel__t1 { color: var(--cyan); }
.reel__t2 { color: var(--magenta); }
.reel__head .placard { order: -1; flex: none; align-self: flex-start; }

/* Desktop reserves a lane on each side so the arrows never sit over the
   artwork or the passage. Mobile keeps them above the frame instead. */
.reel__frame {
  position: relative;
  padding-inline: clamp(58px, 6vw, 78px);
}
@media (max-width: 760px) { .reel__frame { padding-inline: 0; } }

.reel__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--navy); color: var(--cyan);
  border: 2px solid var(--cyan); cursor: pointer;
}
.reel__arrow:hover:not(:disabled) { background: var(--cyan); color: var(--navy); }
.reel__arrow:disabled { opacity: 0.3; cursor: default; }
.reel__arrow svg { width: 21px; height: 21px; }
.reel__arrow--prev { left: 0; }
.reel__arrow--next { right: 0; }

@media (max-width: 760px) {
  .reel__frame { padding-top: 64px; }
  .reel__arrow { top: 0; transform: none; width: 44px; height: 44px; }
  .reel__arrow--prev { left: 0; }
  .reel__arrow--next { right: 0; }
}

/* Flex, not grid: a percentage grid track resolves unreliably inside a
   horizontally scrolling container — Safari collapsed every slide. A flex
   basis of 100% is measured against the container itself and holds
   everywhere, and flex-shrink: 0 keeps the slides one-per-view. */
.reel__track {
  display: flex;
  width: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.reel__track::-webkit-scrollbar { display: none; }

.reel__slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;                 /* without this the content sets the width */
  scroll-snap-align: start;
  display: grid; gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: start;
}
@media (min-width: 900px) {
  .reel__slide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Slide artwork, with its own full-size link. */
.reel__figure { margin: 0; min-width: 0; display: grid; gap: 0.55rem; }
.reel__figure img { width: 100%; max-width: 100%; height: auto; display: block; }

/* No header bar and no section marker inside a slide — just the passage. */
.reel__box {
  border: 2px solid var(--edge); border-radius: var(--r);
  overflow: hidden; min-width: 0;
}
.reel__scroll {
  overflow-y: auto; overscroll-behavior: contain;
  height: clamp(300px, 46vh, 440px);
  padding: clamp(1.15rem, 3vw, 1.9rem);
  font-size: 0.95rem; line-height: 1.6;
  scrollbar-width: thin; scrollbar-color: var(--scroll) transparent;
}
.reel__scroll::-webkit-scrollbar { width: 11px; }
.reel__scroll::-webkit-scrollbar-track { background: transparent; }
.reel__scroll::-webkit-scrollbar-thumb {
  background: var(--scroll); border-radius: 999px; border: 3px solid var(--navy);
}
.reel__scroll:focus-visible { outline: 3px solid var(--scroll); outline-offset: -3px; }
.reel__scroll p { color: var(--white); max-width: var(--measure); }
.reel__scroll strong { color: var(--edge); font-weight: 900; }

/* The lead line of each passage, in place of a title bar. */
.reel__sub {
  color: var(--edge) !important;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.02rem, 0.95rem + 0.5vw, 1.25rem);
  line-height: 1.25;
}
.reel__quote {
  display: block;
  border-left: 4px solid var(--magenta);
  padding: 0.7rem 1rem; border-radius: 0 12px 12px 0;
  background: color-mix(in srgb, var(--magenta) 12%, transparent);
  font-family: var(--display); font-weight: 700;
}

/* Alternate the accent slide to slide. */
.reel__slide:nth-child(even) { --edge: var(--magenta); --scroll: var(--cyan); }

.reel__foot {
  display: flex; align-items: center; gap: 1rem;
  font-weight: 900; font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
}
.reel__bar { flex: 1; height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--white) 16%, transparent); overflow: hidden; }
.reel__bar i { display: block; height: 100%; width: 16.6%; background: var(--cyan); border-radius: 999px; transition: width 0.25s ease; }

/* ==========================================================================
   FLOW — spacing inside every text box
   Direct children are reset, then spaced. Both selectors carry the same
   specificity, so source order decides and the gap always wins. Nothing
   deeper may set a vertical margin, or it would collapse these again.
   ========================================================================== */
.pane__scroll > *,
.reel__scroll > * { margin-block: 0; }

/* Paragraph to paragraph. */
.pane__scroll > * + *,
.reel__scroll > * + * { margin-block-start: 1.25rem; }

/* A lead line or salutation needs more air beneath it than a paragraph. */
.pane__scroll > .pane__subtitle + *,
.pane__scroll > .pane__salutation + *,
.reel__scroll > .reel__sub + * { margin-block-start: 1.6rem; }

/* Quotes get room on both sides so they read as a break in the argument. */
.pane__scroll > .pull,
.pane__scroll > .quote,
.reel__scroll > .reel__quote { margin-block-start: 1.9rem; }

.pane__scroll > .pull + *,
.pane__scroll > .quote + * { margin-block-start: 1.9rem; }

/* Kept separate: an unsupported :has() would invalidate the whole rule it
   sits in, taking the plain selectors above down with it. */
.reel__scroll > p:has(> .reel__quote) { margin-block-start: 1.9rem; }
.reel__scroll > p:has(> .reel__quote) + * { margin-block-start: 1.9rem; }

/* The long open letter keeps its wider rhythm. */
.pane--airy .pane__scroll > * + * { margin-block-start: 1.8rem; }
.pane--airy .pane__scroll > .pane__salutation + * { margin-block-start: 1.9rem; }
.pane--airy .pane__scroll > .pull { margin-block-start: 2.2rem; }
.pane--airy .pane__scroll > .pull + * { margin-block-start: 2.2rem; }

/* An image-only slide takes the full frame — no passage beside it. */
/* An image-only slide has no passage beside it, but its artwork must still
   render at the same size as artwork in a paired slide — otherwise the reel
   appears to resize as you page through it. Match the paired column width
   exactly: half the track, less one gap. */
.reel__slide--solo { grid-template-columns: minmax(0, 1fr) !important; }
.reel__slide--solo .reel__figure { margin-inline: auto; }
@media (min-width: 900px) {
  .reel__slide--solo .reel__figure {
    max-width: calc((100% - clamp(1rem, 2.5vw, 1.75rem)) / 2);
  }
}

/* ==========================================================================
   VIDEO PLATE — a clip in place of artwork (section 32)
   ========================================================================== */
.plate__video { width: 100%; height: auto; display: block; background: var(--navy); }

/* Section 32's plates are wide panoramas (2500x1190). Inside this reel only,
   an image-only slide spans the whole frame instead of matching the paired
   column, so the artwork reads at the size it was drawn for. */
.reel--wide .reel__slide--solo .reel__figure { max-width: none; }
@media (min-width: 900px) {
  .reel--wide .reel__slide--solo .reel__figure { max-width: none; }
}

/* ==========================================================================
   CARD REEL — two cards in view, arrows reach the third (sections 45–47)
   ========================================================================== */
.cardreel { display: grid; gap: 1rem; }
.cardreel__head { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.cardreel__head .placard { order: -1; flex: none; }
.cardreel__title {
  margin: 0; color: var(--cyan);
  font-size: clamp(1.2rem, 1.05rem + 0.9vw, 1.75rem); line-height: 1.2;
}

.cardreel__frame { position: relative; padding-inline: clamp(52px, 5vw, 70px); }
@media (max-width: 760px) { .cardreel__frame { padding-inline: 0; padding-top: 60px; } }

.cardreel__track {
  display: flex; gap: clamp(1rem, 2.2vw, 1.5rem);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.cardreel__track::-webkit-scrollbar { display: none; }

.cardreel__card {
  flex: 0 0 calc((100% - 2 * clamp(1rem, 2.2vw, 1.5rem)) / 3);
  min-width: 0; scroll-snap-align: start;
  display: grid; gap: 0.85rem; align-content: start;
}
@media (max-width: 760px) { .cardreel__card { flex: 0 0 100%; } }

.cardreel__figure { margin: 0; display: grid; gap: 0.5rem; }
.cardreel__figure img { width: 100%; height: auto; display: block; }

.cardreel__box {
  border: 2px solid var(--edge); border-radius: var(--r);
  padding: clamp(1rem, 2.2vw, 1.4rem);
  display: grid; gap: 0.7rem; align-content: start;
}
.cardreel__name {
  margin: 0; color: var(--edge);
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem); line-height: 1.25;
}
.cardreel__box p { margin: 0; color: var(--white); font-size: 0.92rem; line-height: 1.58; }
.cardreel__card:nth-child(even) { --edge: var(--magenta); }

/* Section 44 shows two broad plates; they take the full frame rather than
   the half-width used where artwork sits beside a passage. */
.reel--wide .reel__slide--solo .reel__figure { max-width: 100%; }

/* Room under the sticky bar so a page does not open flush against it. */
#main { padding-top: clamp(3rem, 6vw, 5rem); }

/* ==========================================================================
   THE ROAD — the journey page (src/journey.html, assets/js/journey.js)
   The Blender render is the page. Everything here is either a card that
   borrows the roadside-sign look from the render (cyan frame, magenta bar),
   or the route rail that borrows its road. The whole homepage takes its
   background from the render itself (--home-bg, sampled by journey.js from
   the first frame), so the square has no visible edge.

   Two layouts share one markup:
     default   stacked scenes with stills — only if JavaScript never loads
     .scrub    sticky stage, film scrubbed by scroll, cards pinned per scene

   Where things sit in .scrub:
     desktop / landscape   route rail left · picture centre · all text right
     portrait (phones,     text top · picture middle · route rail bottom
     tablets upright)
   ========================================================================== */

:root { --home-bg: #05092E; }   /* first-frame navy; journey.js refines it */
body.page-journey { background: var(--home-bg); }
.page-journey .masthead { background: color-mix(in srgb, var(--home-bg) 92%, transparent); }
.page-journey .site-footer { background: var(--home-bg); }
.page-journey main { position: relative; }
/* Section 00 opens the homepage in the inner pages' plate format; the
   journey begins below it. */
.home-intro { padding-top: clamp(2rem, 5vw, 3.5rem); }

/* --- shared card type ---------------------------------------------------- */
.scene__eyebrow {
  margin: 0 0 0.55rem;
  font-weight: 900; font-size: 0.72rem; line-height: 1.3;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cyan);
}
.scene__eyebrow span { color: var(--magenta); margin-right: 0.35em; }

.scene__title {
  margin: 0 0 0.45rem;
  font-size: clamp(1.35rem, 1rem + 1vw, 1.9rem);
  line-height: 1.12; text-transform: uppercase; letter-spacing: 0.005em;
}
.scene__title em { font-style: normal; color: var(--magenta); }

.scene__sub { margin: 0 0 0.6rem; font-weight: 700; font-size: 0.98rem; line-height: 1.4; }
.scene__text { margin: 0; color: var(--dim); font-size: 0.95rem; line-height: 1.55; max-width: 46ch; }
.scene__accent {
  margin: 0.75rem 0 0;
  font-family: var(--display); font-weight: 700; font-size: 0.9rem; line-height: 1.4;
  color: var(--magenta);
}
.scene__sequence { margin: 0.2rem 0 0; display: grid; gap: 0.1rem; font-weight: 700; }
.scene__sequence span:nth-child(odd) { color: var(--cyan); }

.scene__link {
  display: inline-flex; align-items: center; min-height: 44px;
  margin-top: 0.4rem;
  font-weight: 900; font-size: 0.86rem; letter-spacing: 0.02em;
  color: var(--cyan); text-decoration: underline; text-underline-offset: 0.25em;
}
.scene__link::after { content: "\2192"; margin-left: 0.45em; text-decoration: none; }
.scene__link:hover { color: var(--white); }

.scene__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.1rem; }
.scene__ctas .btn { min-height: 48px; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.04em; }

.scene__cue { display: none; }

/* --- default: stacked page (no JS) --------------------------------------- */
.journey__stage { display: none; }

.journey__scenes {
  width: min(1100px, 100% - var(--gutter) * 2); margin-inline: auto;
  padding-block: clamp(1.5rem, 4vw, 3rem);
}
.scene {
  display: grid; gap: clamp(1rem, 3vw, 2.5rem); align-items: center;
  padding-block: clamp(1.5rem, 4vw, 3rem);
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: var(--mh);   /* #scene links clear the sticky masthead */
}
.scene:last-child { border-bottom: 0; }
.scene__still { width: 100%; max-width: 560px; height: auto; border-radius: 14px; }
.scene--hero .scene__title { font-size: clamp(2.2rem, 1.2rem + 4.5vw, 4.6rem); }
@media (min-width: 860px) {
  .scene { grid-template-columns: 1fr 1fr; }
  .scene__still { grid-row: 1; grid-column: 1; }
  .scene__pin { grid-row: 1; grid-column: 2; }
}

/* --- scrub: the sticky stage --------------------------------------------- */
:root { --mh: 60px; }   /* masthead height; journey.js measures the real one */
.scrub .journey {
  --stage-h: calc(100vh - var(--mh));
  --frame: min(100vw, var(--stage-h));
  --gut: calc((100vw - var(--frame)) / 2);
  --inset: clamp(1rem, 2.6vw, 2.25rem);
  --rail-w: 3.25rem;
  position: relative;
}
@supports (height: 100svh) {
  /* svh, not dvh: the stage keeps its size when phone toolbars slide away,
     so the picture never reflows mid-drive. The strip it leaves is the same
     navy as the stage. */
  .scrub .journey { --stage-h: calc(100svh - var(--mh)); }
}

.scrub .journey__stage {
  display: block;
  position: sticky; top: var(--mh); z-index: 0;
  height: var(--stage-h);
  overflow: hidden;
  background: var(--home-bg);
}

.scrub .journey__frame {
  position: absolute; left: 50%; top: 50%; margin: 0;
  width: var(--frame); height: var(--frame);
  transform: translate(-50%, -50%);
  /* Feather the square's edges so roads that leave the frame fade out
     rather than stop dead. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent),
                      linear-gradient(transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent),
              linear-gradient(transparent, #000 4%, #000 96%, transparent);
  mask-composite: intersect;
  transition: opacity 0.6s ease;
}
/* Once the car has parked, the last frame steps back behind the closing card. */
.scrub .journey__stage.is-ending .journey__frame { opacity: 0.42; }
.journey__poster, .journey__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}
.journey__canvas { opacity: 0; transition: opacity 0.35s ease; }
.journey__frame.is-playing .journey__canvas { opacity: 1; }

/* Hairlines in the margins between the rail and the picture. */
.journey__trace {
  position: absolute; width: 1px; height: 26%;
  pointer-events: none;
}
.journey__trace--cyan {
  left: calc(var(--gut) * 0.82); top: 14%;
  background: linear-gradient(transparent, var(--cyan), transparent);
  transform: translate3d(0, calc((var(--p, 0.5) - 0.5) * 70px), 0);
}
.journey__trace--magenta {
  left: calc(var(--gut) * 0.92); bottom: 12%;
  background: linear-gradient(transparent, var(--magenta), transparent);
  transform: translate3d(0, calc((var(--p, 0.5) - 0.5) * -70px), 0);
}
/* A second, fainter pair further back that moves twice as far. */
.journey__trace--far { height: 15%; opacity: 0.45; }
.journey__trace--cyan.journey__trace--far {
  left: calc(var(--gut) * 0.7); top: 56%;
  transform: translate3d(0, calc((var(--p, 0.5) - 0.5) * -150px), 0);
}
.journey__trace--magenta.journey__trace--far {
  left: calc(var(--gut) * 0.97); top: 26%; bottom: auto;
  transform: translate3d(0, calc((var(--p, 0.5) - 0.5) * 150px), 0);
}

/* --- scrub: scenes -------------------------------------------------------- */
.scrub .journey__scenes {
  position: relative; z-index: 1;
  width: auto; margin: calc(-1 * var(--stage-h)) 0 0; padding: 0;
  pointer-events: none;
}
/* Each scene is its scroll span plus one stage height; neighbours overlap by
   a stage height, so each card is pinned for exactly its own span. */
.scrub .scene {
  display: block; padding: 0; border: 0;
  height: calc(var(--len, 100) * 1vh + var(--stage-h));
}
.scrub .scene + .scene { margin-top: calc(-1 * var(--stage-h)); }
.scrub .scene__still { display: none; }
.scrub .scene__pin { position: sticky; top: var(--mh); height: var(--stage-h); }

.scrub .scene__card {
  position: absolute; z-index: 1;
  right: var(--inset);
  width: clamp(17rem, calc(var(--gut) + 3rem), 24rem);
  max-width: calc(100vw - 2rem);
  padding: 1.15rem 1.3rem 0.9rem;
  background: color-mix(in srgb, var(--home-bg) 84%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 2px solid var(--cyan);
  border-radius: 14px;
  opacity: 0; visibility: hidden;
  pointer-events: auto;
  will-change: opacity, transform;
}
.scrub .scene__eyebrow, .scrub .scene__title, .scrub .scene__sub { will-change: transform; }
/* The magenta bar across the top of every sign in the render. */
.scrub .scene__card::before {
  content: ""; position: absolute; left: 1.3rem; top: -2px;
  width: 3.5rem; height: 5px; border-radius: 0 0 3px 3px;
  background: var(--magenta);
}
.scrub .scene.is-live .scene__card { visibility: visible; }

/* All text sits on the right; top/bottom picks the clearer end of the
   frame for that scene (data-place). */
.scrub [data-place~="top"]    .scene__card { top: 7%; }
.scrub [data-place~="bottom"] .scene__card { bottom: 7%; }

/* Before journey.js reports in, the opening card is the page. */
.scrub:not(.scrub-ready) .scene--hero .scene__card { opacity: 1; visibility: visible; }

/* Hero: no sign, just the headline beside the empty sky of the first frame. */
.scrub .scene--hero .scene__card {
  top: 7%;
  width: clamp(19rem, calc(var(--gut) + 7rem), 32rem);
  padding: 0; background: none; border: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.scrub .scene--hero .scene__card::before { display: none; }
.scrub .scene--hero .scene__title { font-size: clamp(2.1rem, 1rem + 2.7vw, 4rem); line-height: 1.02; }
.scrub .scene--hero .scene__sub { font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem); }

.scrub .scene--final .scene__card { width: clamp(18rem, calc(var(--gut) + 6rem), 26rem); }
.scrub .scene--final .scene__title { font-size: clamp(1.5rem, 1.05rem + 1.4vw, 2.3rem); }

/* "Scroll to drive" sits bottom-left, under the route rail. */
.scrub .scene__cue {
  display: block; position: absolute; left: var(--inset); bottom: 3.5%;
  margin: 0;
  font-weight: 900; font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--cyan);
  opacity: calc(1 + var(--d, 0) * 4);
  pointer-events: none;
}
.scrub .scene__cue::after {
  content: ""; display: block; width: 2px; height: 2.2rem; margin: 0.6rem 0 0 0.35rem;
  background: linear-gradient(var(--cyan), transparent);
  animation: cue 1.8s ease-in-out infinite;
}
@keyframes cue { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(0.5rem); opacity: 0.4; } }

/* --- scrub: parallax depth ------------------------------------------------ */
/* journey.js sets one number per live scene, --d: +0.5 as the scene arrives,
   0 at its middle, -0.5 as it leaves (the hero runs 0 → -1). Each layer
   multiplies it by its own depth, so the layers slide past one another
   while the picture stays pinned:
     numeral   -160px   deep, travels against the scroll
     card        56px   mid
     title      +12px   near (on top of the card's travel)
     eyebrow    +22px   nearest                                          */
.scrub .scene__card    { transform: translate3d(0, calc(var(--d, 0) * 56px), 0); }
.scrub .scene__title   { transform: translate3d(0, calc(var(--d, 0) * 12px), 0); }
.scrub .scene__eyebrow { transform: translate3d(0, calc(var(--d, 0) * 22px), 0); }

.scrub .scene--hero .scene__card  { transform: translate3d(0, calc(var(--d, 0) * 40px), 0); }
.scrub .scene--hero .scene__title { transform: translate3d(0, calc(var(--d, 0) * 110px), 0); }
.scrub .scene--hero .scene__sub   { transform: translate3d(0, calc(var(--d, 0) * 60px), 0); }

.scene__num { display: none; }
.scrub .scene__num {
  display: block; position: absolute; z-index: 0;
  right: var(--inset);
  margin: 0; pointer-events: none;
  font-family: var(--display); font-weight: 700; line-height: 0.8;
  font-size: clamp(6rem, calc(var(--gut) * 0.72), 15rem);
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--cyan);
  opacity: 0;
  transform: translate3d(0, calc(var(--d, 0) * -160px), 0);
  will-change: transform, opacity;
}
/* Same side as the card, opposite end, so the two layers never stack. */
.scrub [data-place~="top"]    .scene__num { bottom: 9%; }
.scrub [data-place~="bottom"] .scene__num { top: 9%; }

/* --- scrub: the route rail (left) ------------------------------------------ */
/* A strip of the render's road (pale deck, cyan kerb) with the car on it.
   Stops sit at the moment each landmark arrives in the film. */
.route { display: none; }
.scrub .route {
  display: block;
  position: absolute; left: var(--inset); top: 50%;
  width: var(--rail-w); height: min(64%, 30rem);
  transform: translateY(-50%);
}
.route__road {
  position: absolute; left: 0.6rem; top: 0; bottom: 0; width: 5px;
  border-radius: 3px;
  background: #D5D8E2;
  box-shadow: -2px 0 0 var(--cyan);
}
.route__car {
  position: absolute; left: -3px; top: -7px;
  width: 11px; height: 14px; border-radius: 4px;
  background: var(--cyan);
  box-shadow: 0 0 0 2px var(--home-bg), 0 0 12px color-mix(in srgb, var(--cyan) 70%, transparent);
}
.route__stops { list-style: none; margin: 0; padding: 0; }
.route__stops li { position: absolute; left: 0; top: calc(var(--at, 0) * 100%); transform: translateY(-50%); }
.route__stops a {
  position: relative;
  display: flex; align-items: center; justify-content: flex-start; gap: 0.5rem;
  min-height: 44px; min-width: 44px; padding-left: 1.6rem;
  font-size: 0.72rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dim); text-decoration: none; white-space: nowrap;
}
.route__stops a::after {
  content: ""; position: absolute; left: calc(0.6rem - 3px); top: 50%;
  width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%;
  background: var(--home-bg); border: 2px solid #D5D8E2;
}
/* The place name shows for the current stop and on hover/focus only, so
   the rail stays a thin line beside the frame. */
.route__stops a span {
  position: absolute; left: 100%; margin-left: -0.2rem;
  padding: 0.2rem 0.55rem; border-radius: 999px;
  background: var(--home-bg); opacity: 0; transition: opacity 0.2s;
  pointer-events: none;
}
.route__stops a:hover span, .route__stops a:focus-visible span,
.route__stops .is-current span { opacity: 1; }
.route__stops .is-passed a, .route__stops .is-current a { color: var(--white); }
.route__stops .is-passed a::after { border-color: var(--cyan); background: var(--cyan); }
.route__stops .is-current a::after { border-color: var(--magenta); background: var(--magenta); }
.route__stops .is-current b { color: var(--magenta); }

/* --- scrub: portrait (phones, tablets upright) ---------------------------- */
/* Text on top, the square in the middle, the route rail along the bottom.
   The square takes the full width unless that would squeeze the text area
   below --zone-min; the text area is whatever is left above it. */
@media (max-aspect-ratio: 1/1) {
  .scrub .journey {
    --rail-h: 3rem;
    --zone-min: 15rem;
    --frame: min(100vw, calc(var(--stage-h) - var(--rail-h) - var(--zone-min)));
    --zone: calc(var(--stage-h) - var(--rail-h) - var(--frame));
  }
  .scrub .journey__frame { top: var(--zone); transform: translateX(-50%); }
  .journey__trace { display: none; }
  .scrub .scene__num { display: none; }
  .scrub .scene__cue { display: none; }

  .scrub .route {
    left: 1.25rem; right: 1.25rem; top: auto; bottom: 0;
    width: auto; height: var(--rail-h);
    transform: none;
  }
  .scrub .route__road { left: 0; right: 0; top: calc(62% - 2px); bottom: auto; width: auto; height: 4px; box-shadow: 0 2px 0 var(--cyan); }
  .scrub .route__car { left: -7px; top: calc(62% - 6px); width: 14px; height: 11px; }
  .scrub .route__stops li { top: 62%; left: calc(var(--at, 0) * 100%); transform: translate(-50%, -50%); }
  .scrub .route__stops a { padding: 1.35rem 0 0; justify-content: center; font-size: 0.66rem; }
  .scrub .route__stops a::after { left: 50%; margin: -5.5px 0 0 -5.5px; top: 50%; }
  .scrub .route__stops a b { position: absolute; top: 0.2rem; left: 50%; transform: translateX(-50%); }
  .scrub .route__stops a span { display: none; }

  /* [data-place] matches the specificity of the wide-screen rules above,
     so these win in portrait whatever end a scene asked for. */
  .scrub .scene[data-place] .scene__card {
    left: 1rem; right: 1rem; width: auto; max-width: 36rem; margin-inline: auto;
    top: 0.75rem; bottom: auto;
    padding: 0.9rem 1.05rem 0.6rem;
  }
  /* The card drifts within 0–24px below its resting place, so it can
     never ride up under the masthead. */
  .scrub .scene[data-place] .scene__card { transform: translate3d(0, calc((var(--d, 0) + 0.5) * 24px), 0); }
  .scrub .scene--hero[data-place] .scene__card { top: 1rem; padding: 0; text-align: center; transform: none; }
  .scrub .scene--hero .scene__text { margin-inline: auto; }
  .scrub .scene--hero .scene__title { font-size: clamp(1.9rem, 1rem + 5vw, 3.6rem); transform: translate3d(0, calc(var(--d, 0) * 36px), 0); }
  .scrub .scene--hero .scene__sub   { transform: translate3d(0, calc(var(--d, 0) * 20px), 0); }
  .scrub .scene__title { font-size: clamp(1.25rem, 1rem + 1.6vw, 1.9rem); }
}
/* Tablets upright: the text band is wide but short, so the card runs in
   two columns — heading left, body and link right. */
@media (max-aspect-ratio: 1/1) and (min-width: 600px) {
  .scrub .journey { --zone-min: 16.5rem; }
  .scrub .scene:not(.scene--hero):not(.scene--final)[data-place] .scene__card {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    column-gap: 1.6rem; align-items: start; max-width: 46rem;
  }
  .scrub .scene__head .scene__sub { margin-bottom: 0; }
}
/* Phones: accent lines go (the finale keeps its one). */
@media (max-aspect-ratio: 1/1) and (max-width: 599px) {
  .scrub .scene__accent { display: none; }
  .scrub .scene--final .scene__accent { display: block; }
  .scrub .scene__text { font-size: 0.88rem; line-height: 1.48; }
  .scrub .scene__sub { font-size: 0.9rem; margin-bottom: 0.35rem; }
  .scrub .scene__link { margin-top: 0.15rem; }
  .scrub .scene--brief .scene__text { font-size: 0; }
  .scrub .scene--brief .scene__text span { font-size: 0.88rem; }
}

/* Short phones (iPhone SE/8, small Android): tighter type and a smaller
   drift so the card clears the picture. */
@media (max-aspect-ratio: 1/1) and (max-width: 599px) and (max-height: 760px) {
  .scrub .journey { --zone-min: 15.5rem; }
  .scrub .scene[data-place] .scene__card { padding: 0.7rem 0.9rem 0.45rem; transform: translate3d(0, calc((var(--d, 0) + 0.5) * 10px), 0); }
  .scrub .scene__eyebrow { margin-bottom: 0.35rem; font-size: 0.66rem; }
  .scrub .scene__title { font-size: 1.15rem; margin-bottom: 0.3rem; }
  .scrub .scene__sub { font-size: 0.84rem; margin-bottom: 0.25rem; }
  .scrub .scene__text { font-size: 0.82rem; line-height: 1.42; }
  .scrub .scene__link { min-height: 40px; margin-top: 0; }
  .scrub .scene--hero .scene__title { font-size: 1.75rem; }
}
/* The smallest phones keep the title, place and link; the sentence goes. */
@media (max-aspect-ratio: 1/1) and (max-width: 599px) and (max-height: 620px) {
  .scrub .journey { --zone-min: 12.5rem; }
  .scrub .scene:not(.scene--hero) .scene__text { display: none; }
  .scrub .scene--final .scene__sequence { font-size: 0.82rem; }
}

/* --- scrub: short landscape (phones on their side) ------------------------ */
@media (min-aspect-ratio: 1/1) and (max-height: 540px) {
  .scrub .journey { --inset: 0.75rem; --rail-w: 2.75rem; }
  .scrub .scene__card { width: calc(var(--gut) - var(--inset) - 0.5rem); min-width: 12.5rem; padding: 0.7rem 0.85rem 0.55rem; }
  /* Cards hang from the top and only drift downward, so the tallest one
     (Quantum Nations) still clears the foot of a 320px-high stage. */
  .scrub .scene[data-place] .scene__card { top: 0.6rem; bottom: auto; transform: translate3d(0, calc((var(--d, 0) + 0.5) * 16px), 0); }
  .scrub .scene__text, .scrub .scene__accent, .scrub .scene__sequence { display: none; }
  .scrub .scene__title { font-size: 1.15rem; }
  .scrub .scene__sub { font-size: 0.85rem; margin-bottom: 0.2rem; }
  .scrub .scene__link { min-height: 44px; margin-top: 0; }
  .scrub .scene--hero[data-place] .scene__card { top: 6%; padding: 0; }
  .scrub .scene--hero .scene__title { font-size: clamp(1.5rem, 1rem + 3vw, 2.2rem); }
  .scrub .scene--hero .scene__text { display: none; }

  .scrub .scene__ctas { flex-direction: column; gap: 0.5rem; margin-top: 0.6rem; }
  .scrub .scene__ctas .btn { min-height: 44px; padding: 0.5rem 1rem; justify-content: center; }
  .scrub .scene__cue { display: none; }
  .scrub .route { height: 74%; }
  .journey__trace { display: none; }
  .scrub .scene__num { display: none; }
}

/* The two Support boxes and the line above them share one rhythm. */
:root { --box-pad: clamp(1.25rem, 3.5vw, 2.25rem); --box-gap: clamp(1.5rem, 4vw, 2.75rem); }

/* ==========================================================================
   SUPPORT — the approval notice and Section 49, the volunteer box.
   ========================================================================== */
.notice {
  display: grid; gap: var(--box-pad);
  padding: var(--box-pad);
  background: var(--navy);
  border: 2px solid var(--magenta); border-radius: var(--r);
}
.notice__img { display: block; width: 100%; height: auto; border-radius: 18px; }
.notice__body { display: grid; gap: 0.75rem; align-content: center; justify-items: start; min-width: 0; }
@media (min-width: 860px) { .notice { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; } }
.notice__tag {
  justify-self: start; margin: 0;
  padding: 0.3rem 0.75rem; border-radius: 999px;
  background: var(--magenta); color: var(--white);
  font-weight: 900; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.notice__title { margin: 0; font-size: clamp(1.25rem, 1.05rem + 1vw, 1.8rem); line-height: 1.2; color: var(--cyan); }
.notice__text { margin: 0; max-width: 70ch; }
.notice__text strong { color: var(--white); }
.notice__list {
  list-style: none; margin: 0.4rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.6rem;
}
.notice__list li {
  display: inline-flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  padding: 0.5rem 0.9rem; border: 2px solid var(--cyan); border-radius: 999px;
  font-weight: 700; font-size: 0.9rem;
}
.notice__list b {
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--magenta);
}

/* Section 49: the volunteer call. Same box rhythm as the notice above it:
   one padding, one gap, the picture inset with rounded corners, text beside it. */
.vbox {
  --edge: var(--cyan);
  margin-top: var(--box-gap); overflow: hidden;
  border: 2px solid var(--edge); border-radius: var(--r);
  background: var(--navy);
}
.vbox__body { display: grid; gap: var(--box-pad); padding: var(--box-pad); align-items: center; }
.vbox__img { display: block; width: 100%; height: auto; border-radius: 18px; }
.vbox__copy { display: grid; gap: 1.25rem; justify-items: start; align-content: center; }
.vbox__copy p { margin: 0; max-width: 40ch; font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem); line-height: 1.55; }
.vbox__btn { max-width: 100%; overflow-wrap: anywhere; }
@media (min-width: 860px) { .vbox__body { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }

/* ==========================================================================
   FOOTER — laid out the way visionsuperhero.com sets its own: a code-style
   label, the motto, then three columns (rights and registrations, contact,
   office). Same widths, type and stacking as that page, in the site's navy.
   Poppins for headings and the motto, Roboto Light for the small print.
   ========================================================================== */
.site-footer {
  --foot-blue: #4284DF;
  background: var(--navy);
  border-top: 2px solid var(--cyan);
  margin-top: clamp(2.5rem, 7vw, 5rem);
  padding-bottom: 45px;
  color: var(--white);
  font-family: "Poppins", var(--body);
}

/* Bootstrap-style container: 540 / 720 / 960 / 1140, 15px gutters. */
.foot-wrap { width: 100%; margin-inline: auto; padding-inline: 15px; }
@media (min-width: 576px)  { .foot-wrap { max-width: 540px; } }
@media (min-width: 768px)  { .foot-wrap { max-width: 720px; } }
@media (min-width: 992px)  { .foot-wrap { max-width: 960px; } }
@media (min-width: 1200px) { .foot-wrap { max-width: 1140px; } }

.foot-section { padding-block: 1rem; }
.foot-section:first-of-type { padding-top: 3rem; }
.foot-section:last-of-type { padding-bottom: 2rem; }

/* Both blocks are <details>, reusing the site's .drop plus/minus toggle,
   recoloured for the footer: pink summary, blue body text. Native <details>
   is keyboard- and screen-reader-operable with no extra JS, and collapses to
   full width automatically at any viewport. */
.foot-drop {
  border-color: color-mix(in srgb, var(--magenta) 45%, transparent);
  background: color-mix(in srgb, var(--magenta) 7%, transparent);
}
.foot-drop[open] { border-color: var(--magenta); }
.foot-drop > summary {
  font-family: "Poppins", var(--body); font-weight: 600; line-height: 1.3;
  font-size: clamp(15px, 14px + 0.3vw, 17px);
  color: var(--magenta);
}
.foot-drop > summary:hover { color: var(--white); }
.foot-drop .drop__body { padding-top: 0.9rem; }

/* Both boxes' paragraphs are plain .foot-text, so they share one rule and
   can never drift apart. .foot-text alone loses to the older, more specific
   .drop__body p rule inside a drop, so restate it here at matching
   specificity (0,2,1) — this is the one place that fix belongs, not
   duplicated per box. */
.foot-quote, .foot-prose { border: 0; background: none; }
.drop__body p.foot-text { margin: 0 0 1rem; }
.drop__body p.foot-text:last-child { margin-bottom: 0; }
.foot-quote__by { color: var(--magenta); white-space: nowrap; }
.foot-quote__by strong { font-weight: 600; }

/* Three columns: 25% / 33.3% / 33.3% with an 8.3% offset, stacked below 768. */
.foot-main { padding-top: 45px; }
.foot-row { display: flex; flex-wrap: wrap; margin-inline: -15px; }
.foot-col { flex: 0 0 100%; max-width: 100%; padding-inline: 15px; margin-bottom: 2rem; }
@media (min-width: 768px) {
  .foot-col--brand   { flex-basis: 25%;     max-width: 25%; }
  .foot-col--contact { flex-basis: 33.333%; max-width: 33.333%; }
  .foot-col--office  { flex-basis: 33.333%; max-width: 33.333%; margin-left: 8.333%; }
}

.foot-logo { display: block; width: 130px; max-width: 100%; margin-bottom: 1rem; line-height: 0; }
.foot-logo img { display: block; width: 100%; height: auto; }
.foot-title {
  margin: 0 0 1.5rem;
  font-family: "Poppins", var(--body); font-weight: 400; line-height: 1.5;
  font-size: clamp(18px, 16.5px + 0.42vw, 20.8px);
  color: var(--foot-blue);
}
.foot-text {
  margin: 0 0 1rem; max-width: none;
  font-family: "Roboto", var(--body); font-weight: 300; line-height: 1.6;
  font-size: 14.4px; color: var(--foot-blue);
  overflow-wrap: anywhere;
}
.foot-text--lead { color: var(--foot-blue); }
.foot-text strong { font-weight: 700; }
.foot-text a { color: var(--white); font-weight: 400; text-decoration: none; }
.foot-text a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.foot-photo {
  display: block; width: 100%; height: auto; aspect-ratio: 280 / 216;
  object-fit: cover; object-position: 55% 60%;
  border-radius: 10px;
}

.foot-lower hr { margin: 1rem 0; border: 0; border-top: 1px solid rgb(255 255 255 / 0.3); }
.foot-lower { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1.5rem; }
.foot-lower hr { flex: 0 0 100%; }
.foot-lower .foot-text { margin: 0; }
.foot-credit { text-align: right; margin-left: auto; }
@media (max-width: 767px) { .foot-credit { text-align: left; margin-left: 0; } }

/* ==========================================================================
   SITE NOTE + FOOTER FOLLOW
   One line on who makes the site. Above the footer it is quiet centred
   text; on short pages (Support, Media) it opens the page as a slim card.
   ========================================================================== */
.site-note p {
  margin: 0 auto; max-width: 62ch; text-align: center;
  color: var(--dim); font-size: 0.9rem; line-height: 1.6;
}
.site-note--bottom { padding-block: clamp(2rem, 5vw, 3rem) 0; margin-top: clamp(2rem, 6vw, 4rem); }
.site-note--bottom + .site-footer { margin-top: clamp(2rem, 5vw, 3rem); }
.site-note--top { padding-block: clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 4vw, 2.25rem); }
.site-note--top p {
  max-width: none; text-align: left;
  padding: 0.8rem 1.1rem;
  border: 1px solid var(--rule); border-left: 3px solid var(--cyan); border-radius: 12px;
}

.foot-follow { margin-top: 1.75rem; }
.foot-follow .foot-title { margin: 0 0 0.9rem; }
.site-footer .social a { color: var(--foot-blue); border-color: color-mix(in srgb, var(--foot-blue) 55%, transparent); }
.site-footer .social a:hover { background: var(--cyan); border-color: var(--cyan); color: var(--navy-deep); }

/* ==========================================================================
   MEDIA — five channels, five jobs. A switchboard of chips at the top, then
   one section per channel, each wearing a placard that says what it is for.
   Each channel takes the site's blue-led / pink-led pairing; the layout
   alternates so the page never reads as one repeated block. Feeds are
   third-party iframes, so they sit in a bordered frame with an offset
   shadow, and the white platform cards read as screens set into the page.
   ========================================================================== */

/* --- switchboard --------------------------------------------------------- */
.dial { padding-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.dial__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
.dial__list li:nth-child(odd)  { --edge: var(--cyan);    --ink: var(--magenta); }
.dial__list li:nth-child(even) { --edge: var(--magenta); --ink: var(--cyan); }
.dial__chip {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: 0.1rem 0.8rem; height: 100%;
  padding: 0.9rem 1rem;
  border: 2px solid var(--edge); border-radius: 16px;
  background: var(--navy); color: var(--white); text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dial__chip svg { grid-row: 1 / span 2; width: 30px; height: 30px; color: var(--edge); }
.dial__name { font-family: var(--display); font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.dial__job {
  font-weight: 900; font-size: 0.66rem; line-height: 1.3;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink);
}
.dial__chip:hover, .dial__chip:focus-visible {
  transform: translate(-3px, -3px);
  box-shadow: 5px 5px 0 0 var(--edge);
}

/* --- one channel --------------------------------------------------------- */
.channel {
  --edge: var(--cyan); --ink: var(--magenta);
  display: grid; gap: clamp(1.5rem, 4vw, 2.5rem);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  border-top: 1px solid var(--rule);
  scroll-margin-top: calc(var(--mh, 60px) + 0.5rem);
}
.channel--pink { --edge: var(--magenta); --ink: var(--cyan); }
.channel > * { min-width: 0; }

.channel__job {
  display: inline-block; margin-bottom: 1.25rem;
  font-size: 0.78rem; padding: 0.5rem 0.9rem;
  transform: rotate(-2deg);
  box-shadow: 5px 5px 0 var(--edge);
}
.channel__title {
  display: flex; align-items: center; gap: 0.8rem;
  margin: 0 0 1rem;
  font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.9rem); line-height: 1.02;
  color: var(--edge);
}
.channel__icon {
  flex: none; display: grid; place-items: center;
  width: clamp(2.6rem, 2rem + 2vw, 3.4rem); aspect-ratio: 1; border-radius: 50%;
  border: 2px solid var(--edge);
}
.channel__icon svg { width: 52%; height: 52%; }
.channel__lede { margin: 0 0 1.4rem; max-width: 40ch; color: var(--dim); font-size: clamp(1rem, 0.96rem + 0.25vw, 1.15rem); }
.channel__cta { border-color: var(--edge); color: var(--edge); }
.channel__cta:hover { background: var(--edge); color: var(--navy-deep); }

@media (min-width: 900px) {
  .channel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
  .channel--flip .channel__stage { order: -1; }
  .channel--reels { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .channel__intro { position: sticky; top: calc(var(--mh, 60px) + 1.5rem); }
  /* YouTube runs full width: the player is the point. */
  .channel--wide { grid-template-columns: minmax(0, 1fr); }
  .channel--wide .channel__intro { position: static; display: grid; grid-template-columns: 1fr auto; gap: 0 2rem; align-items: end; }
  .channel--wide .channel__job, .channel--wide .channel__title, .channel--wide .channel__lede { grid-column: 1; }
  .channel--wide .channel__job { justify-self: start; }
  .channel--wide .channel__lede { margin-bottom: 0; max-width: 56ch; }
  .channel--wide .channel__cta { grid-column: 2; grid-row: 1 / span 3; align-self: end; }
}

/* --- feeds --------------------------------------------------------------- */
.feed {
  position: relative; overflow: hidden;
  border: 2px solid var(--edge); border-radius: var(--r);
  background: color-mix(in srgb, var(--edge) 7%, var(--navy));
  box-shadow: 8px 8px 0 0 color-mix(in srgb, var(--edge) 30%, transparent);
  min-height: 12rem;
}
.feed iframe { display: block; width: 100%; border: 0; }
@keyframes feed-pulse { 50% { opacity: 0.45; } }

/* Landscape: 16:9, full width (the YouTube card and its player). */
.feed--wide { aspect-ratio: 16 / 9; }
.feed--wide iframe { height: 100%; }
.feed.is-failed { min-height: 8rem; }

/* Vertical: a phone, held upright. The video is the screen. */
.feed--phone { padding: 12px; border-radius: 42px; border-width: 3px; min-height: 0; }

/* Reels sit side by side where there is room, and swipe sideways on a phone. */
.reels {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(84%, 340px);
  gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 10px 14px 0; scrollbar-width: thin;
}
.reels > * { scroll-snap-align: start; }
@media (min-width: 900px) {
  .reels { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; padding: 0; }
}

/* Profile screenshots (X, Facebook, TikTok): one picture that opens the real page. */
.feed--shot {
  display: block; max-width: 560px; min-height: 0;
  padding: clamp(0.5rem, 2vw, 0.9rem);
  color: inherit; text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feed--shot-tall { max-width: 380px; }
.feed--shot img { display: block; width: 100%; height: auto; border-radius: 14px; }
.feed__open {
  display: flex; justify-content: center; margin: 0.8rem 0.2rem 0.3rem; padding: 0.65rem 1rem;
  border: 2px solid var(--edge); border-radius: 999px; color: var(--edge);
  font-family: var(--display); font-weight: 700; font-size: 0.95rem;
  transition: background 0.2s ease, color 0.2s ease;
}
.feed--shot:hover, .feed--shot:focus-visible {
  transform: translate(-3px, -3px);
  box-shadow: 11px 11px 0 0 color-mix(in srgb, var(--edge) 30%, transparent);
}
.feed--shot:hover .feed__open, .feed--shot:focus-visible .feed__open { background: var(--edge); color: var(--navy-deep); }
@media (min-width: 900px) { .channel--flip .feed--shot { margin-left: auto; } }

/* --- facade: the poster that loads YouTube when tapped ------------------- */
.facade {
  position: relative; display: block; width: 100%;
  margin: 0; padding: 0; border: 0; border-radius: inherit;
  background: var(--navy); color: var(--white);
  font: inherit; text-align: left; cursor: pointer; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.facade:focus-visible { outline: 3px solid var(--white); outline-offset: -6px; }
.facade:disabled { cursor: progress; }
.facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.facade::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgb(5 10 48 / 0.78), transparent 48%);
}
.feed--wide .facade { height: 100%; }
.facade__play {
  position: absolute; z-index: 1; left: 50%; top: 46%;
  width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%;
  background: var(--edge);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--edge) 32%, transparent);
  transition: transform 0.2s ease;
}
.facade__play::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  border: solid transparent; border-width: 12px 0 12px 19px;
  border-left-color: var(--navy-deep); transform: translate(-34%, -50%);
}
.facade:hover .facade__play, .facade:focus-visible .facade__play { transform: scale(1.1); }
.facade.is-busy .facade__play { animation: feed-pulse 1s ease-in-out infinite; }
.facade__cap {
  position: absolute; z-index: 1; left: 0.8rem; right: 0.8rem; bottom: 0.8rem;
  padding: 0.5rem 0.75rem; border-radius: 8px;
  background: rgb(5 10 48 / 0.82);
  font-weight: 900; font-size: 0.7rem; line-height: 1.3; letter-spacing: 0.12em; text-transform: uppercase;
}
/* While the player loads behind its poster it stays invisible, so nothing
   flashes blank; the poster goes the moment the player is ready. */
.is-loading > .feed__frame { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.feed__error { margin: 0; padding: 0.9rem 1.25rem 1.1rem; color: var(--dim); font-size: 0.9rem; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) {
  .facade__play, .feed--shot, .feed__open { transition: none; }
  .facade.is-busy .facade__play { animation: none; }
  .feed--shot:hover, .feed--shot:focus-visible { transform: none; }
}

/* ==========================================================================
   OVERVIEW — the whole site on one page. A very large title, then the
   graphics and shorts in a fixed order: left to right, then down. Each
   graphic is the site's own plain image-and-zoom figure (.plate-row), so
   nothing here is caption or text box. On a phone the rows become one
   column in the same order, left image above right.
   ========================================================================== */
.glance-head { padding-block: clamp(2.25rem, 6vw, 4.5rem) clamp(1.75rem, 4.5vw, 3rem); }
.glance-title {
  margin: 0.2rem 0 0;
  /* Sized from the room the title has, so the longest one (about 19.5 em wide)
     stays on a single line at any desktop width. */
  font-size: clamp(1.6rem, calc((min(1200px, 100vw - 2 * var(--gutter)) - 16px) / 19.5), 3.9rem);
  line-height: 1.16; letter-spacing: -0.015em;
  text-wrap: balance;
}
.glance-title em { font-style: normal; color: var(--magenta); }

.glance { display: grid; gap: clamp(1.5rem, 4vw, 3rem); padding-bottom: clamp(1rem, 3vw, 2rem); }
.glance > * { min-width: 0; }
.glance .plate-row { gap: clamp(1rem, 3vw, 2.25rem); }
/* Colours alternate along the row, like the panes: cyan, then pink. */
.glance .plate__figure:nth-child(even) { --edge: var(--magenta); }
.glance .plate__zoom { font-size: 0.64rem; padding: 0.28rem 0.6rem; }
.glance .plate__frame { border-radius: 6px; outline: 1px solid color-mix(in srgb, var(--edge) 25%, transparent); }

/* Two shorts, side by side where there is room, stacked on a phone. */
.glance__shorts {
  display: grid; justify-content: center; gap: clamp(1.25rem, 4vw, 2.5rem);
  grid-template-columns: repeat(2, minmax(0, 330px));
}
.glance__shorts .feed:nth-child(2) { --edge: var(--magenta); --ink: var(--cyan); }
@media (max-width: 700px) {
  .glance__shorts { grid-template-columns: minmax(0, 320px); }
}

/* Self-hosted shorts: a phone frame around a plain <video>. Nothing downloads
   until play (preload="none"); the poster is a small still hosted here. */
.feed--video { margin: 0; }
.feed--video video {
  display: block; width: 100%; height: auto; aspect-ratio: 9 / 16;
  border-radius: 30px; background: #000; object-fit: cover;
}

/* "Stay tuned": the landscape thumbnails of upcoming videos, in the site's own
   gallery. Arrows sit on top; each slide is nearly the full width of a phone
   so the whole 16:9 picture shows, with the next one peeking in. */
.gallery--wide { margin: 0; }
.gallery--wide .gallery__head { align-items: center; margin-bottom: 1.1rem; }
.gallery--wide .gallery__title { font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.5rem); line-height: 1.1; }
.gallery--wide .gallery__track { grid-auto-columns: min(560px, 88vw); gap: clamp(0.8rem, 2.5vw, 1.25rem); }
.gallery--wide .gallery__track img { aspect-ratio: 16 / 9; object-fit: cover; border-radius: 22px; background: var(--navy); }

/* ==========================================================================
   PAGE HEADERS — every page opens the way the Overview does: the page name
   in a chip, then one large line that says what the page is about.
   ========================================================================== */
.glance-sub { padding-bottom: var(--box-gap); }
.glance-sub p { margin: 0; max-width: 56ch; color: var(--dim); font-size: clamp(1rem, 0.96rem + 0.3vw, 1.2rem); }

/* ==========================================================================
   PAGER — the sliding cards that close every page: one door into each of the
   five systems. No boxes and no rounded corners: just the picture, the words
   and a hairline between neighbours. Arrows sit on top, like the galleries.
   ========================================================================== */
.pager { margin-top: clamp(2.5rem, 7vw, 5rem); padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 3vw, 2rem); border-top: 1px solid var(--rule); }
.pager__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 2rem; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.pager__intro { min-width: 0; flex: 1 1 24rem; }
.pager__title { margin: 0 0 0.75rem; font-size: clamp(1.9rem, 1.1rem + 3.4vw, 3.6rem); line-height: 1.12; }
.pager__title em { display: block; font-style: normal; color: var(--magenta); }
.pager__lede { margin: 0; max-width: 46ch; color: var(--dim); font-size: clamp(1rem, 0.96rem + 0.25vw, 1.15rem); }
.pager__nav { margin: 0; }

.pager__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(360px, 82vw);
  gap: 0; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: 0.25rem;
}
.pager__track::-webkit-scrollbar { display: none; }
.pager__track:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }

.pcard { --edge: var(--cyan); --ink: var(--magenta); min-width: 0; scroll-snap-align: start; padding-inline: clamp(1rem, 2.4vw, 1.6rem); }
.pcard:nth-child(even) { --edge: var(--magenta); --ink: var(--cyan); }
.pcard:first-child { padding-left: 0; }
.pcard + .pcard { border-left: 1px solid var(--rule); }   /* the only line: between cards */
.pcard__link { display: flex; flex-direction: column; gap: 0.7rem; height: 100%; color: inherit; text-decoration: none; }
.pcard__media { display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--navy); }
.pcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.pcard__title { margin: 0.3rem 0 0; font-family: var(--display); font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.7rem); line-height: 1.15; color: var(--edge); }
.pcard__desc { margin: 0; color: var(--dim); font-size: 0.95rem; line-height: 1.55; }
.pcard__cta {
  margin-top: auto; padding-top: 0.5rem;
  font-weight: 900; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
}
.pcard__cta::after { content: "\2192"; display: inline-block; margin-left: 0.55em; font-size: 1.15em; transition: transform 0.25s ease; }
a.pcard__link:hover .pcard__media img, a.pcard__link:focus-visible .pcard__media img { transform: scale(1.05); }
a.pcard__link:hover .pcard__cta::after, a.pcard__link:focus-visible .pcard__cta::after { transform: translateX(6px); }
a.pcard__link:focus-visible { outline: 3px solid var(--edge); outline-offset: 6px; }

/* The page you are on: the card stays so the five stay five, but it is plainly not a door. */
.pcard--here .pcard__media, .pcard--here .pcard__title, .pcard--here .pcard__desc { opacity: 0.45; }
.pcard--here .pcard__cta { color: var(--dim); }
.pcard--here .pcard__cta::after { content: none; }

@media (prefers-reduced-motion: reduce) {
  .pcard__media img, .pcard__cta::after { transition: none; }
  a.pcard__link:hover .pcard__media img, a.pcard__link:focus-visible .pcard__media img,
  a.pcard__link:hover .pcard__cta::after, a.pcard__link:focus-visible .pcard__cta::after { transform: none; }
}