/* =====================================================================
   The Loveworld Kingdom Producers Summit
   Design system: archival "producer's desk". Cream stock, ink navy,
   stamp red, mustard tape. Condensed display type, typewriter metadata.
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* paper & ink */
  --paper:        #F3EEE2;
  --paper-2:      #EAE3D2;
  --paper-3:      #DFD6C2;
  --paper-line:   rgba(27, 34, 66, 0.14);
  --ink:          #1B2242;
  --ink-2:        #2A3260;
  --ink-soft:     #4C5375;
  --charcoal:     #201E1A;
  --muted:        #6E6857;
  --muted-2:      #9A937F;

  /* accents */
  --stamp:        #B4232B;
  --stamp-deep:   #8E1A21;
  --mustard:      #D9A521;
  --mustard-deep: #B98614;
  --tape:         rgba(220, 176, 78, 0.55);

  /* type */
  --font-display: "Oswald", "Arial Narrow", Impact, sans-serif;
  --font-body:    "Switzer", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
  --font-hand:    "Caveat", "Segoe Script", cursive;

  /* scale (fluid) */
  --fs-hero:  clamp(3.6rem, 9.5vw, 8.5rem);
  --fs-h1:    clamp(2.8rem, 6vw, 5.4rem);
  --fs-h2:    clamp(2.2rem, 4.4vw, 4rem);
  --fs-h3:    clamp(1.5rem, 2.2vw, 2rem);
  --fs-lede:  clamp(1.05rem, 1.35vw, 1.25rem);
  --fs-body:  1rem;
  --fs-small: 0.875rem;
  --fs-mono:  0.76rem;

  /* layout */
  --container: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section: clamp(5rem, 11vw, 10rem);
  --radius: 3px;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 220ms;
  --dur: 420ms;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--charcoal);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; line-height: 0.98; letter-spacing: -0.005em; text-transform: uppercase; color: var(--ink); }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
em { font-style: italic; }
::selection { background: var(--ink); color: var(--paper); }

.container { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; }
.mono { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.hand { font-family: var(--font-hand); font-weight: 600; text-transform: none; letter-spacing: 0; }

.skip-link { position: absolute; left: 1rem; top: -100%; background: var(--ink); color: var(--paper); padding: .6rem 1rem; z-index: 999; font-family: var(--font-mono); font-size: .8rem; }
.skip-link:focus { top: 1rem; }

:focus-visible { outline: 2px solid var(--stamp); outline-offset: 3px; }

/* ---------- First-load motion ident ---------- */
.site-intro { display: none; }
.intro-pending { overflow: hidden; }
.intro-pending .site-intro { position: fixed; z-index: 1200; inset: 0; display: grid; place-items: center; overflow: hidden; color: var(--paper); background: var(--ink); }
.site-intro__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.site-intro.is-leaving { animation: intro-exit .8s var(--ease-in-out) both; }
@keyframes intro-exit { to { opacity: 0; visibility: hidden; } }

/* ---------- Cookie preferences ---------- */
.cookie-banner { position: fixed; z-index: 1100; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); width: min(calc(100% - 2rem), 35rem); padding: 1.25rem; color: var(--ink); background: rgba(251,248,240,.98); border: 1px solid rgba(27,34,66,.2); box-shadow: 0 24px 70px -32px rgba(8,12,29,.8); }
.cookie-banner[hidden] { display: none; }
.cookie-banner p { display: grid; gap: .25rem; margin: 0 0 1rem; }
.cookie-banner strong { font-family: var(--font-display); font-size: 1.2rem; text-transform: uppercase; }
.cookie-banner p span { color: var(--muted); font-size: .9rem; }
.cookie-banner__actions { display: flex; align-items: center; gap: 1rem; }
.cookie-banner__reject { color: var(--ink-soft); border-bottom: 1px solid currentColor; }

/* paper grain overlay */
.grain {
  position: fixed; inset: -50%; pointer-events: none; z-index: 1000; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* ---------- Primitives ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 1.4rem;
}
.eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--stamp); flex: none; }
.eyebrow__sep { opacity: .45; }
.eyebrow--light { color: rgba(243, 238, 226, .7); }
.eyebrow--pill {
  display: inline-flex; align-items: center; gap: .6rem; width: fit-content;
  border: 1px solid transparent; border-radius: 999px;
  padding: .55rem 1.2rem .55rem 1rem; margin-bottom: 2rem;
  background: rgba(251, 248, 240, .7);
}
.eyebrow--pill .eyebrow__icon { width: 14px; height: 14px; flex: none; color: var(--ink); }

.btn {
  --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-bd: var(--ink);
  position: relative; display: inline-flex; align-items: center; gap: .85rem;
  padding: .95rem 1.4rem .9rem; border: 1.5px solid var(--btn-bd); border-radius: var(--radius);
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-display); font-weight: 500; font-size: .95rem; letter-spacing: .12em; text-transform: uppercase; line-height: 1;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
  overflow: hidden; isolation: isolate;
}
.btn::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity var(--dur-fast); z-index: -1; }
.btn:hover::before { opacity: .08; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn__arrow { display: inline-flex; align-items: center; justify-content: center; transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.icon-arrow { width: 1.05em; height: 1.05em; display: block; flex: none; }
.btn--stamp { --btn-bg: var(--stamp); --btn-bd: var(--stamp); --btn-fg: var(--paper); box-shadow: 0 6px 18px -8px rgba(180, 35, 43, .55); }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink); }
.btn--paper { --btn-bg: var(--paper); --btn-fg: var(--stamp-deep); --btn-bd: var(--paper); }
.btn--lg { padding: 1.2rem 1.8rem 1.1rem; font-size: 1.05rem; }
.btn--block { width: 100%; justify-content: center; }

/* masking tape */
.tape {
  position: absolute; display: block; width: 120px; height: 28px; background: var(--tape);
  transform: rotate(-4deg); pointer-events: none;
  clip-path: polygon(1% 0, 99% 2%, 100% 96%, 98% 100%, 0 98%, 2% 90%, 0 4%);
  mix-blend-mode: multiply;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.tape--red { background: repeating-linear-gradient(135deg, rgba(180,35,43,.72) 0 10px, rgba(243,238,226,.75) 10px 20px); }
.tape--mustard { background: rgba(217,165,33,.72); }

/* rubber stamp */
.stamp-base {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--stamp);
  border: 3px double var(--stamp); border-radius: 6px; line-height: .95; text-align: center;
  mix-blend-mode: multiply; opacity: .92;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 .55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 .55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-size: 160px; mask-size: 160px;
}

/* ruled / blueprint background */
.section--paper-dark { background: var(--paper-2); }
.section--ink { background: var(--ink); color: rgba(243,238,226,.86); isolation: isolate; overflow: hidden; }
.section--ink h2, .section--ink h3 { color: var(--paper); }
.section--stamp { background: var(--stamp); color: var(--paper); }
.section--stamp h2 { color: var(--paper); }

.section { padding-block: var(--section); position: relative; }
.section__head { max-width: 62ch; margin-bottom: clamp(3rem, 6vw, 5rem); }
.section__head--split { max-width: none; display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: end; }
.section__head--split .section__lede { margin-bottom: .4rem; }
.section__title { font-size: var(--fs-h2); margin-bottom: 1.2rem; }
.section__lede { font-size: var(--fs-lede); line-height: 1.5; color: var(--muted); max-width: 52ch; }
.section--ink .section__lede { color: rgba(243,238,226,.68); }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70;
  padding-block: .9rem;
  background: var(--paper);
  border-bottom: 1px solid var(--paper-line);
  transition: padding var(--dur) var(--ease-out), box-shadow var(--dur);
}
.nav.is-scrolled { padding-block: .55rem; box-shadow: 0 6px 18px -14px rgba(32,30,26,.4); }
.nav__inner { display: flex; align-items: center; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: .8rem; color: var(--ink); }
.brand__mono { display: inline-flex; color: var(--stamp); }
.brand__crest { width: 44px; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__line { font-family: var(--font-display); text-transform: uppercase; font-weight: 600; letter-spacing: .02em; }
.brand__line--top { font-size: .8rem; }
.brand__line--bottom { font-size: .68rem; color: var(--stamp); letter-spacing: .14em; }
.nav__cta { margin-left: auto; transform: translateX(clamp(.5rem, 2vw, 2rem)); }
.nav__cta .btn { padding: .7rem 1.1rem .65rem; font-size: .85rem; }
.nav__burger {
  display: none; position: relative; width: 42px; height: 42px; margin-left: auto;
  border: 1px solid var(--paper-line); border-radius: var(--radius); z-index: 2;
}
.nav__burger span {
  position: absolute; left: 11px; width: 18px; height: 1.5px; background: var(--ink);
  transition: transform var(--dur-fast) var(--ease-out), top var(--dur-fast) var(--ease-out);
}
.nav__burger span:first-child { top: 16px; }
.nav__burger span:last-child { top: 24px; }
.nav__burger[aria-expanded="true"] span:first-child { top: 20px; transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { top: 20px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 60; display: grid;
  padding: 6.6rem var(--gutter) 1.6rem; background: var(--paper); isolation: isolate;
  visibility: hidden; opacity: 0; transform: translateY(-12px); pointer-events: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s var(--dur);
}
.mobile-menu::before { content: ""; position: absolute; z-index: -2; inset: 0; background: url("../img/portal-british-library-halftone-v1.jpg") 74% bottom / cover no-repeat; }
.mobile-menu::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(243,238,226,.98) 0%, rgba(243,238,226,.94) 50%, rgba(243,238,226,.7) 100%); }
.mobile-menu.is-open {
  visibility: visible; opacity: 1; transform: none; pointer-events: auto;
  transition-delay: 0s;
}
.mobile-menu__inner { display: grid; grid-template-rows: auto 1fr auto; min-height: calc(100dvh - 8.2rem); }
.mobile-menu__meta { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 1.2rem; color: var(--stamp); border-bottom: 1px solid rgba(27,34,66,.18); }
.mobile-menu__links { align-self: center; display: grid; gap: clamp(.5rem, 2vw, 1rem); padding-block: 2rem; }
.mobile-menu__link { width: fit-content; font-family: var(--font-display); font-size: clamp(2.55rem, 10vw, 4.25rem); font-weight: 600; line-height: .92; text-transform: uppercase; color: var(--ink); transition: color var(--dur-fast), transform var(--dur-fast) var(--ease-out); }
.mobile-menu__link:hover, .mobile-menu__link:focus-visible { color: var(--stamp); transform: translateX(.35rem); }
.mobile-menu__action { display: grid; gap: .85rem; padding-top: 1.25rem; border-top: 1px solid rgba(27,34,66,.18); }
.mobile-menu__action p { margin: 0; color: var(--ink-soft); }
.mobile-menu__action .btn { width: 100%; justify-content: space-between; }
.mobile-menu.is-open .mobile-menu__link { animation: menu-link-in .55s var(--ease-out) both; }
.mobile-menu.is-open .mobile-menu__link:nth-child(2) { animation-delay: .05s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(3) { animation-delay: .1s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(4) { animation-delay: .15s; }
@keyframes menu-link-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
body.menu-open { overflow: hidden; }
/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; padding-top: clamp(7rem, 14vh, 10rem); padding-bottom: 4rem; display: flex; align-items: center; overflow: clip; }
.hero__bg {
  position: absolute; inset: 0; z-index: 0; display: grid; grid-template-columns: repeat(6, 1fr); pointer-events: none;
}
.hero__panel {
  position: relative; height: calc(100% + 140px); margin-top: -70px; background-size: cover; background-position: center;
  -webkit-mask-image: linear-gradient(105deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
          mask-image: linear-gradient(105deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
}
.hero__panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("../img/print-halftone-texture-v1.png") center / cover no-repeat;
  mix-blend-mode: soft-light; opacity: .16;
}
.hero__panel:nth-child(1) { background-position: 8% center; }
.hero__panel:nth-child(2) { background-position: 25% center; }
.hero__panel:nth-child(3) { background-position: 42% center; }
.hero__panel:nth-child(4) { background-position: 59% center; }
.hero__panel:nth-child(5) { background-position: 76% center; }
.hero__panel:nth-child(6) { background-position: 94% center; }
.hero__bg::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(90deg, rgba(243, 238, 226, .88) 0%, rgba(243, 238, 226, .64) 45%, rgba(243, 238, 226, .26) 100%);
}
.hero__vertical {
  position: absolute; right: -1.2vw; top: 50%; transform: translateY(-50%) rotate(90deg); transform-origin: center;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(6rem, 17vw, 17rem); line-height: 1; letter-spacing: -.02em;
  color: var(--ink); opacity: .07; pointer-events: none; white-space: nowrap; user-select: none;
}
.hero__grid { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero__eyebrow { margin-bottom: 2rem; text-shadow: 0 1px 10px rgba(243, 238, 226, .9); }
.hero__title { font-size: var(--fs-hero); font-weight: 700; line-height: .9; letter-spacing: -.02em; display: flex; flex-direction: column; margin-bottom: 2rem; }
.hero__line { display: block; overflow: hidden; }
.hero__line--accent { color: var(--stamp); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .hero__line--accent {
    background-image:
      linear-gradient(rgba(180,35,43,.9), rgba(180,35,43,.9)),
      url("../img/print-halftone-texture-v1.png");
    background-size: auto, 320px auto;
    background-position: center, center;
    background-blend-mode: multiply;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
.hero__lede { font-size: var(--fs-lede); line-height: 1.5; color: var(--muted); max-width: 46ch; margin-bottom: 2.4rem; text-shadow: 0 1px 12px rgba(243, 238, 226, .95), 0 0 3px rgba(243, 238, 226, .8); }
.hero__lede em { color: var(--ink); font-style: normal; font-weight: 600; border-bottom: 2px solid var(--stamp); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 3rem; }

.hero__scroll { position: absolute; left: var(--gutter); bottom: 2rem; display: flex; align-items: center; gap: .8rem; color: var(--muted-2); }
.hero__scroll-line { display: block; width: 48px; height: 1px; background: var(--muted-2); transform-origin: left; animation: scrollLine 2.2s var(--ease-in-out) infinite; }
@keyframes scrollLine { 0% { transform: scaleX(0); transform-origin: left; } 45% { transform: scaleX(1); transform-origin: left; } 55% { transform: scaleX(1); transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }

/* collage → single poster plate */
.hero__collage { position: relative; aspect-ratio: 1 / 1.08; max-width: 420px; margin-left: auto; width: 100%; justify-self: end; transform: none; }
.hero__collage > * { position: absolute; }

.poster {
  left: 0; right: 0; top: 8%; width: 100%; max-width: 420px; margin-inline: auto; padding: 2.4rem 2.2rem 2rem;
  background-color: #FBF8F0;
  background-image: linear-gradient(rgba(251,248,240,.84), rgba(251,248,240,.84)), url("../img/poster-st-pauls-halftone-v1.jpg");
  background-size: cover; background-position: center;
  border: 1px solid rgba(27,34,66,.16);
  transform: rotate(-2deg);
  box-shadow: 0 24px 48px -26px rgba(32,30,26,.55), 0 2px 0 rgba(255,255,255,.7) inset;
  display: flex; flex-direction: column; align-items: flex-start;
}
.poster__crest {
  width: 64%; height: auto; margin: 0 auto 1.7rem; display: block;
  mix-blend-mode: multiply;
}
.poster__edition {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(3.2rem, 5.5vw, 4.6rem); line-height: .88; letter-spacing: -.02em;
  color: var(--ink);
}
.poster__rule { display: block; width: 100%; height: 1px; background: rgba(27,34,66,.22); margin: 1.6rem 0 1.1rem; }
.poster__loc { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.poster__loc b { color: var(--stamp); font-weight: 500; }

.collage__note {
  position: absolute; left: auto; right: clamp(1rem, 5%, 2rem); bottom: -26px; padding: .7rem 1rem;
  transform: rotate(-5deg);
  background: #F7F3E8; border: 1px solid rgba(27,34,66,.15);
  box-shadow: 0 10px 24px -16px rgba(32,30,26,.5); z-index: 2;
}
.collage__note .hand { font-size: 1.35rem; line-height: 1.05; color: var(--charcoal); display: block; }

/* video trigger + preview + modal */
.produce-trigger { cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.produce-trigger:hover, .produce-trigger:focus-visible { background: rgba(180, 35, 43, .09); outline: none; }

.video-preview {
  position: fixed; z-index: 80; width: 260px; padding: 7px; margin: 0; pointer-events: none;
  background: var(--paper); border: 1px solid rgba(27,34,66,.28);
  box-shadow: 0 24px 48px -24px rgba(32,30,26,.7);
  opacity: 0; transform: translateY(8px) rotate(-1.5deg);
  transition: opacity .22s var(--ease-out), transform .22s var(--ease-out);
}
.video-preview.is-visible { opacity: 1; transform: translateY(0) rotate(-1.5deg); }
.video-preview video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--ink); }
.video-preview::after {
  content: ""; position: absolute; left: 50%; bottom: -5.5px; width: 10px; height: 10px;
  background: var(--paper); border-right: 1px solid rgba(27,34,66,.28); border-bottom: 1px solid rgba(27,34,66,.28);
  transform: translateX(-50%) rotate(45deg);
}
.video-preview.is-below::after { bottom: auto; top: -5.5px; border: 0; border-left: 1px solid rgba(27,34,66,.28); border-top: 1px solid rgba(27,34,66,.28); }

.video-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 2rem; }
.video-modal[hidden] { display: none; }
.video-modal__backdrop { position: absolute; inset: 0; background: rgba(27, 34, 66, .88); }
.video-modal__frame {
  position: relative; width: min(920px, 92vw); background: var(--paper);
  padding: 12px 12px 0; border: 1px solid rgba(27,34,66,.3);
  box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .6);
}
.video-modal__frame video { display: block; width: 100%; max-height: 72vh; background: var(--ink); }
.video-modal__caption { padding: .85rem .2rem .95rem; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.video-modal__close {
  position: absolute; top: -15px; right: -15px; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(27,34,66,.3); background: var(--paper); color: var(--ink);
  display: grid; place-items: center; cursor: pointer; transition: color var(--dur-fast), border-color var(--dur-fast);
}
.video-modal__close svg { width: 15px; height: 15px; }
.video-modal__close:hover, .video-modal__close:focus-visible { color: var(--stamp); border-color: var(--stamp); }

/* ---------- Supporting organisations ---------- */
.supporters { border-block: 1px solid var(--paper-line); background: var(--paper-2); overflow: hidden; }
.supporters__inner { display: grid; grid-template-columns: minmax(10rem, .65fr) 2.35fr; align-items: stretch; }
.supporters__heading {
  display: flex; align-items: center; padding: 1.35rem clamp(1.25rem, 2.5vw, 2.5rem) 1.35rem 0;
  border-right: 1px solid var(--paper-line);
}
.supporters__title {
  max-width: 10ch; font-family: var(--font-mono); font-size: .68rem; font-weight: 500; line-height: 1.35;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
}
.supporters__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.supporters__list.is-overflowing {
  animation: supportersPan var(--supporters-duration, 12s) var(--ease-in-out) infinite alternate;
}
.supporters__list.is-overflowing:hover,
.supporters__list.is-overflowing:focus-within { animation-play-state: paused; }
@keyframes supportersPan {
  from { transform: translateX(0); }
  to { transform: translateX(calc(var(--supporters-overflow, 0px) * -1)); }
}
.supporters__org {
  min-width: 0; display: flex; align-items: center; gap: .8rem; padding: 1.15rem clamp(1rem, 2.2vw, 2rem);
  font-family: var(--font-display); font-size: clamp(.84rem, 1vw, 1rem); font-weight: 500;
  line-height: 1.2; letter-spacing: .055em; text-transform: uppercase; color: var(--ink);
}
.supporters__org + .supporters__org { border-left: 1px solid var(--paper-line); }
.supporters__org img { width: auto; height: 31px; flex: none; mix-blend-mode: multiply; }

/* ---------- Eyebrow pill: glossy border beam ---------- */
@property --beam { syntax: "<angle>"; initial-value: 0deg; inherits: true; }
.eyebrow--pill { position: relative; isolation: isolate; }
.eyebrow--pill::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--beam, 0deg),
    #D9A521 0turn 0.18turn,
    #F0CB4F 0.30turn,
    #D9A521 0.42turn 0.58turn,
    #F0CB4F 0.70turn,
    rgba(255, 246, 224, .6) 0.80turn,
    #FFFFFF 0.86turn,
    rgba(255, 246, 224, .6) 0.92turn,
    rgba(180, 35, 43, .9) 0.96turn,
    rgba(180, 35, 43, .9) 0.98turn,
    #D9A521 1turn);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  filter: drop-shadow(0 0 6px rgba(255, 244, 214, .65));
  pointer-events: none;
}

/* ---------- Statement ---------- */
.statement { isolation: isolate; overflow: hidden; }
.statement::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../img/summit-tower-bridge-halftone-v1.jpg") center bottom / cover no-repeat;
  mix-blend-mode: multiply; opacity: .22;
}
.statement__grid {
  position: relative; z-index: 1;
  max-width: 1120px; display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  column-gap: clamp(3.5rem, 8vw, 7rem); row-gap: 2rem; align-items: center;
}
.statement__title { font-size: var(--fs-h2); max-width: 18ch; text-wrap: balance; }
.statement__body {
  display: grid; gap: 1.25rem; max-width: 52ch; color: var(--muted); font-size: 1.05rem;
}
.statement__body p { margin: 0; }
.statement__image { position: relative; grid-column: 2; grid-row: 1 / span 2; margin: 0; overflow: hidden; aspect-ratio: 4 / 3; }
.statement__image img { width: 100%; height: 100%; object-fit: cover; }
.statement__image::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("../img/print-halftone-texture-v1.png") center / cover no-repeat;
  mix-blend-mode: soft-light; opacity: .18;
}

/* ---------- Pathways ---------- */
.pathways::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../img/pathways-westminster-halftone-v1.jpg") center bottom / cover no-repeat;
}
.pathways::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(27,34,66,.94) 0%, rgba(27,34,66,.77) 48%, rgba(27,34,66,.28) 100%);
}
.pathways > .container { position: relative; z-index: 1; }
.pathways .section__head { max-width: 760px; }
.pathways__grid { border-top: 1px solid rgba(243,238,226,.22); }
.path {
  display: grid; grid-template-columns: minmax(12rem, .75fr) 1.35fr auto; gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center; padding: clamp(1.6rem, 3vw, 2.4rem) 0; border-bottom: 1px solid rgba(243,238,226,.22);
  transition: padding-left var(--dur) var(--ease-out);
}
.path:hover { padding-left: .65rem; }
.path__title { font-size: var(--fs-h3); color: var(--paper); }
.path__copy { max-width: 42ch; margin: 0; color: rgba(243,238,226,.65); }
.path__cta { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em; font-weight: 500; color: var(--paper); display: flex; gap: 1.4rem; justify-content: space-between; align-items: center; white-space: nowrap; }
.path__cta span { transition: transform var(--dur-fast) var(--ease-out); color: var(--stamp); display: inline-flex; align-items: center; }
.path__cta:hover span { transform: translateX(4px); }

/* ---------- Process ---------- */
.process { isolation: isolate; overflow: hidden; }
.process::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../img/process-battersea-halftone-v1.jpg") center bottom / cover no-repeat;
  mix-blend-mode: multiply; opacity: .18;
}
.process > .container { position: relative; z-index: 1; }
.process__head { max-width: 660px; margin-bottom: clamp(3rem, 6vw, 5rem); }
.process__steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--paper-line); }
.step { position: relative; padding: 1.6rem clamp(1.25rem, 2.2vw, 2rem) 0; min-height: 13rem; }
.step:first-child { padding-left: 0; }
.step + .step { border-left: 1px solid var(--paper-line); }
.step__title { font-size: var(--fs-h3); margin-bottom: .8rem; }
.step__desc { max-width: 28ch; color: var(--muted); margin: 0; }

/* ---------- Portal ---------- */
.portal { isolation: isolate; overflow: hidden; }
.portal::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../img/portal-british-library-halftone-v1.jpg") center bottom / cover no-repeat;
  mix-blend-mode: multiply; opacity: .2;
}
.portal::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(234,227,210,.96) 0%, rgba(234,227,210,.82) 48%, rgba(234,227,210,.48) 100%);
}
.portal__grid { position: relative; z-index: 1; display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(4rem, 8vw, 7rem); align-items: start; }
.portal__copy { position: sticky; top: 7rem; }
.portal__copy .section__title { max-width: 10ch; }
.portal__index { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--paper-line); }
.index__row {
  display: flex; flex-direction: column; gap: .75rem; min-height: 12rem;
  padding: 1.5rem clamp(1.25rem, 2.5vw, 2.25rem); border-bottom: 1px solid var(--paper-line); position: relative;
}
.index__row:nth-child(odd) { padding-left: 0; }
.index__row:nth-child(even) { border-left: 1px solid var(--paper-line); }
.index__label { font-family: var(--font-display); text-transform: uppercase; font-weight: 600; font-size: 1.3rem; color: var(--ink); }
.index__desc { max-width: 32ch; color: var(--muted); }

/* ---------- FAQ ---------- */
.faq__grid { display: block; }
.faq__head { max-width: 720px; margin-bottom: clamp(3rem, 6vw, 5rem); }
.faq__head .section__title { max-width: 12ch; }
.faq__list { max-width: 940px; margin-left: auto; border-top: 1px solid var(--paper-line); }
.faq__item { border-bottom: 1px solid var(--paper-line); }
.faq__q { display: grid; grid-template-columns: 1fr 2rem; align-items: center; gap: 1.5rem; padding: 1.6rem 0; cursor: pointer; list-style: none; }
.faq__q::-webkit-details-marker { display: none; }
.faq__text { font-family: var(--font-display); text-transform: uppercase; font-weight: 500; font-size: clamp(1.25rem, 2vw, 1.65rem); line-height: 1.1; color: var(--ink); letter-spacing: .01em; }
.faq__icon { position: relative; width: 20px; height: 20px; justify-self: end; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; inset: 50% auto auto 50%; background: var(--ink); transform: translate(-50%, -50%); transition: transform var(--dur) var(--ease-out); }
.faq__icon::before { width: 100%; height: 1.5px; }
.faq__icon::after { width: 1.5px; height: 100%; }
.faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__a { padding: 0 3.5rem 1.75rem 0; color: var(--muted); max-width: 65ch; }
.faq__a p { margin: 0; }

/* ---------- CTA ---------- */
.cta { position: relative; isolation: isolate; overflow: clip; background: var(--stamp); }
.cta::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("../img/cta-wembley-halftone-v1.jpg") center bottom / cover no-repeat; }
.cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(180,35,43,.34) 0%, rgba(180,35,43,.04) 48%, rgba(27,34,66,.24) 100%); }
.cta__inner { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(16rem, .65fr); align-items: end; gap: clamp(3rem, 8vw, 8rem); }
.cta__copy { max-width: 48rem; }
.cta__status { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); color: rgba(243,238,226,.76); }
.cta__title { max-width: 10ch; margin: 0; font-size: var(--fs-h1); font-weight: 700; letter-spacing: -.015em; line-height: .92; }
.cta__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding: clamp(1.5rem, 3vw, 2.25rem); background: rgba(27,34,66,.88); border: 1px solid rgba(243,238,226,.18); box-shadow: 0 24px 60px -34px rgba(8,12,29,.8); }
.cta__text { max-width: 29ch; margin: 0 0 .75rem; color: var(--paper); font-size: 1.05rem; }
.cta__note { color: rgba(243,238,226,.74); }

/* ---------- Footer ---------- */
.footer { isolation: isolate; background: var(--ink); color: rgba(243,238,226,.78); padding-top: clamp(4.5rem, 8vw, 7.5rem); padding-bottom: clamp(9rem, 17vw, 15rem); overflow: clip; position: relative; }
.footer::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("../img/footer-royal-albert-hall-halftone-v1.jpg") center bottom / cover no-repeat; }
.footer::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(27,34,66,.22) 0%, rgba(27,34,66,.76) 43%, rgba(27,34,66,.64) 100%); }
.footer__newsletter { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, .8fr); align-items: end; gap: clamp(3rem, 8vw, 8rem); padding: clamp(2rem, 4vw, 3.5rem); margin-bottom: clamp(4rem, 7vw, 6rem); background: rgba(13,19,46,.86); border: 1px solid rgba(243,238,226,.17); box-shadow: 0 30px 80px -45px rgba(3,6,18,.9); }
#newsletter-title { max-width: 11ch; color: var(--paper); font-size: clamp(2.5rem, 5vw, 4.8rem); line-height: .94; text-shadow: 0 2px 18px rgba(4,8,23,.55); }
.footer__newsletter-form { display: grid; gap: .75rem; }
.footer__newsletter-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; border: 1px solid rgba(243,238,226,.38); background: rgba(9,14,35,.68); }
.footer__newsletter-field input { width: 100%; min-width: 0; min-height: 3.7rem; padding: .9rem 1.1rem; color: var(--paper); background: transparent; border: 0; border-radius: 0; font: inherit; }
.footer__newsletter-field input::placeholder { color: rgba(243,238,226,.56); }
.footer__newsletter-field input:focus { outline: 2px solid #e65a5f; outline-offset: -2px; }
.footer__newsletter-field .btn { min-height: 3.7rem; margin: -1px -1px -1px 0; padding-inline: 1.25rem; border-radius: 0; }
.footer__newsletter-note { margin: 0; color: rgba(243,238,226,.56); }
.footer__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(15rem, 1.7fr) repeat(3, minmax(8rem, 1fr)); gap: clamp(2rem, 5vw, 5rem); padding-bottom: clamp(4rem, 7vw, 6.5rem); }
.footer__col { display: flex; flex-direction: column; gap: .55rem; }
.footer__col a { color: rgba(243,238,226,.92); text-shadow: 0 1px 12px rgba(7,11,27,.55); transition: color var(--dur-fast); }
.footer__col a:hover { color: var(--mustard); }
.footer__kicker { color: #e65a5f; margin-bottom: .9rem; }
.footer__office { font-family: var(--font-display); text-transform: uppercase; font-weight: 600; font-size: clamp(1.4rem, 2vw, 2rem); color: var(--paper); margin-bottom: .8rem; max-width: 18ch; line-height: 1.05; }
.footer__motto { max-width: 35ch; color: rgba(243,238,226,.58); line-height: 1.75; }
.footer__heading { color: #e65a5f; margin-bottom: .8rem; }
.footer__bottom { position: relative; z-index: 3; display: flex; justify-content: space-between; gap: 1rem; padding-block: 1.4rem; border-top: 1px solid rgba(243,238,226,.14); color: rgba(243,238,226,.68); flex-wrap: wrap; }
.footer__made { color: var(--paper); border-bottom: 1px solid rgba(230,90,95,.72); }
.footer__made:hover { color: #e65a5f; }
.footer__flag-stage { position: absolute; z-index: 1; inset: auto 0 0; height: clamp(9rem, 17vw, 15rem); overflow: hidden; background: var(--ink); pointer-events: none; }
.footer__flag-stage::before { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(180deg, var(--ink) 0%, rgba(27,34,66,.62) 20%, rgba(14,20,48,.18) 58%, rgba(14,20,48,.42) 100%); }
.footer__flag-video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.footer__flag-wordmark { position: absolute; z-index: 3; inset: auto var(--gutter) clamp(.8rem, 1.6vw, 1.5rem); overflow: hidden; white-space: nowrap; font-family: var(--font-display); font-size: clamp(3.15rem, 10.6vw, 10rem); font-weight: 700; line-height: .78; letter-spacing: -.045em; text-align: center; text-transform: uppercase; color: var(--paper); background: linear-gradient(90deg, #f3eee2, #d9a521 52%, #f3eee2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-mask: url("../img/footer-wordmark-halftone-alpha-v1.png") center / 100% 100% no-repeat; mask: url("../img/footer-wordmark-halftone-alpha-v1.png") center / 100% 100% no-repeat; -webkit-text-stroke: 1px rgba(243,238,226,.36); filter: drop-shadow(0 3px 0 rgba(27,34,66,.95)) drop-shadow(0 12px 24px rgba(7,11,27,.68)); pointer-events: none; }

/* ---------- Registration ---------- */
.reg { position: relative; isolation: isolate; padding-top: clamp(7rem, 14vh, 9rem); padding-bottom: var(--section); overflow: hidden; }
.reg::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .11; background: url("../img/process-battersea-halftone-v1.jpg") right 6rem / min(68rem, 70vw) auto no-repeat; pointer-events: none; }
.reg__grid { display: grid; grid-template-columns: minmax(18rem, 23rem) minmax(0, 1fr); gap: clamp(3rem, 8vw, 8rem); align-items: start; }
.reg__aside { position: sticky; top: 0; align-self: start; }
.reg__card { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; min-height: 40rem; padding: clamp(2rem, 4vw, 3rem); color: var(--paper); background: var(--ink); border: 1px solid rgba(243,238,226,.16); box-shadow: 0 30px 60px -42px rgba(21,27,55,.85); }
.reg__card::before { content: ""; position: absolute; inset: auto 0 0; height: 48%; opacity: .46; background: url("../img/poster-st-pauls-halftone-v1.jpg") center top / cover no-repeat; }
.reg__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--ink) 0%, var(--ink) 46%, rgba(27,34,66,.94) 62%, rgba(27,34,66,.58) 100%); pointer-events: none; }
.reg__card > * { position: relative; z-index: 1; }
.reg__card-inner { width: min(100%, 17.5rem); margin-inline: auto; text-align: left; }
.reg__kicker { margin: 0 0 1.5rem; color: #e65a5f; }
.reg__title { width: 100%; color: var(--paper); font-size: clamp(3.2rem, 5.3vw, 4.45rem); font-weight: 700; letter-spacing: -.025em; margin-bottom: 1rem; }
.reg__lede { max-width: 27ch; color: rgba(243,238,226,.86); margin: 0 0 2.5rem; }
.reg__steps { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; color: rgba(243,238,226,.72); margin-bottom: 2.5rem; }
.reg__steps li { display: flex; justify-content: flex-start; gap: .9rem; align-items: baseline; transition: color var(--dur-fast); }
.reg__steps li span { color: rgba(243,238,226,.58); min-width: 2ch; }
.reg__steps li.is-current { color: var(--paper); }
.reg__steps li.is-current span { color: #e65a5f; }
.reg__steps li.is-done { color: rgba(243,238,226,.82); }
.reg__facts { display: grid; gap: 1rem; padding-top: 1.4rem; border-top: 1px solid rgba(243,238,226,.28); margin: 0; }
.reg__facts dt { color: rgba(243,238,226,.68); margin-bottom: .2rem; }
.reg__facts dd { margin: 0; color: var(--paper); }

.form { display: flex; flex-direction: column; gap: 3.5rem; max-width: 760px; }
.form__section { border: 0; padding: 0; margin: 0; min-width: 0; }
.form__legend { font-family: var(--font-display); text-transform: uppercase; font-weight: 600; font-size: var(--fs-h3); color: var(--ink); margin-bottom: 1.6rem; display: flex; gap: 1rem; align-items: baseline; padding: 0; }
.form__legend .mono { color: var(--stamp); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.form__row--title { grid-template-columns: 120px 1fr 1fr; }
.form__alert { padding: 1rem 1.2rem; border-left: 3px solid var(--stamp); background: rgba(180,35,43,.06); color: var(--stamp-deep); display: flex; flex-direction: column; gap: .2rem; font-size: .95rem; }
.form__error { color: var(--stamp); font-size: var(--fs-small); margin: -.8rem 0 1rem; }
.form__conditional { display: none; flex-direction: column; gap: 1.4rem; padding: 1.6rem; margin-bottom: 1.4rem; background: rgba(234,227,210,.72); border: 1px solid rgba(27,34,66,.18); }
.form__conditional.is-active { display: flex; }
.form__submit { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .9rem; align-items: flex-start; }
.form__fine { color: var(--muted-2); }

.field { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.4rem; min-width: 0; }
.form__row .field { margin-bottom: 0; }
.form__row { margin-bottom: 1.4rem; }
.field label, .field__label { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.field__opt { color: var(--muted-2); text-transform: none; letter-spacing: 0; font-style: italic; margin-left: .3rem; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="password"], .field input[type="search"], .field select, .field textarea {
  width: 100%; padding: .85rem 0 .7rem; border: 0; border-bottom: 1.5px solid rgba(27,34,66,.3); background: transparent;
  font: inherit; font-size: 1.05rem; color: var(--charcoal); border-radius: 0; transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field select { appearance: none; -webkit-appearance: none; min-height: 3.35rem; padding: .78rem 3.3rem .7rem 1rem; border: 1px solid rgba(27,34,66,.34); background-color: rgba(251,248,240,.88); background-image: linear-gradient(90deg, transparent calc(100% - 3rem), rgba(27,34,66,.1) calc(100% - 3rem)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231B2242' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat, no-repeat; background-position: 0 0, right 1rem center; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.74); }
.field select:hover { border-color: var(--ink); }
.field textarea { resize: vertical; line-height: 1.55; border: 1.5px solid rgba(27,34,66,.3); padding: .9rem 1rem; background: rgba(255,255,255,.35); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.field textarea:focus { box-shadow: 0 0 0 3px rgba(27,34,66,.08); }
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--stamp); }
.field__hint { color: var(--muted-2); font-size: var(--fs-small); margin: 0; }
.field__error { color: var(--stamp); font-size: var(--fs-small); margin: 0; }
.field--sm { max-width: 120px; }
.field--check { justify-content: center; }

.check { display: flex; gap: .9rem; align-items: flex-start; cursor: pointer; font-family: var(--font-body) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: .95rem !important; color: var(--charcoal) !important; line-height: 1.5; }
.check input { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin-top: .15rem; border: 1.5px solid var(--ink); background: transparent; position: relative; cursor: pointer; transition: background var(--dur-fast); }
.check input:checked { background: var(--ink); }
.check input:checked::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid var(--paper); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.has-error .check input { border-color: var(--stamp); }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.chip span {
  display: inline-block; padding: .55rem .95rem .5rem; border: 1.5px solid rgba(27,34,66,.3); border-radius: 999px;
  font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft);
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.chip:hover span { border-color: var(--ink); color: var(--ink); }
.chip input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip input:focus-visible + span { outline: 2px solid var(--stamp); outline-offset: 2px; }
.chip:active span { transform: scale(.97); }

/* path tickets */
.tickets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.ticket { position: relative; cursor: pointer; }
.ticket input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.ticket__body { position: relative; display: flex; flex-direction: column; gap: .45rem; padding: 1.5rem 1.35rem 1.35rem; min-height: 100%; overflow: hidden; border: 1.5px solid rgba(27,34,66,.26); background: #FBF8F0; transition: border-color var(--dur-fast), transform var(--dur) var(--ease-out), box-shadow var(--dur); }
.ticket__body::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: .21; background-size: cover; background-position: center; mix-blend-mode: multiply; }
.ticket__body > * { position: relative; z-index: 1; }
.ticket--onsite .ticket__body { background: #f4e3dc; }
.ticket--onsite .ticket__body::before { background-image: url("../img/cta-wembley-halftone-v1.jpg"); }
.ticket--online .ticket__body { background: #dbe1eb; }
.ticket--online .ticket__body::before { background-image: url("../img/pathways-westminster-halftone-v1.jpg"); }
.ticket--initiative .ticket__body { background: #f2e8c4; }
.ticket--initiative .ticket__body::before { background-image: url("../img/process-battersea-halftone-v1.jpg"); }
.ticket:hover .ticket__body { border-color: var(--ink); transform: translateY(-3px); box-shadow: 0 18px 34px -28px rgba(27,34,66,.65); }
.ticket input:checked + .ticket__body { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink), 0 20px 40px -28px rgba(27,34,66,.6); }
.ticket input:focus-visible + .ticket__body { outline: 2px solid var(--stamp); outline-offset: 3px; }
.ticket__letter { width: 30px; height: 30px; border: 1.5px solid var(--ink); color: var(--ink); display: grid; place-items: center; font-size: .8rem; margin-bottom: .4rem; }
.ticket input:checked + .ticket__body .ticket__letter { background: var(--ink); color: var(--paper); }
.ticket__label { font-family: var(--font-display); text-transform: uppercase; font-weight: 600; font-size: 1.2rem; color: var(--ink); line-height: 1; }
.ticket__desc { color: var(--muted); font-size: .9rem; line-height: 1.45; }
.ticket__punch { position: absolute; right: -8px; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border-left: 1.5px solid rgba(27,34,66,.22); transform: translateY(-50%); }
.ticket input:checked + .ticket__body .ticket__punch { border-color: var(--ink); }

/* producer stages */
.stages { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.stage { position: relative; cursor: pointer; }
.stage input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.stage__body { display: grid; grid-template-columns: 2.4rem 1fr; gap: .2rem .8rem; padding: 1rem 1.1rem; border: 1.5px solid rgba(27,34,66,.22); background: transparent; min-height: 100%; transition: border-color var(--dur-fast), background var(--dur-fast); }
.stage:hover .stage__body { border-color: var(--ink); }
.stage input:checked + .stage__body { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.stage input:checked + .stage__body .stage__num, .stage input:checked + .stage__body .stage__name { color: var(--paper); }
.stage input:checked + .stage__body .stage__desc { color: rgba(243,238,226,.72); }
.stage input:focus-visible + .stage__body { outline: 2px solid var(--stamp); outline-offset: 3px; }
.stage__num { color: var(--stamp); grid-row: span 2; padding-top: .2rem; }
.stage__name { font-family: var(--font-display); text-transform: uppercase; font-weight: 600; font-size: 1.15rem; color: var(--ink); line-height: 1; }
.stage__desc { color: var(--muted); font-size: .9rem; line-height: 1.45; }

.portal-note { position: relative; display: flex; gap: 1.2rem; align-items: flex-start; padding: 1.2rem 1.3rem; background: #FBF8F0; border: 1px solid rgba(27,34,66,.16); }
.portal-note p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.portal-note__stamp { flex: none; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--stamp); border: 3px double var(--stamp); border-radius: 6px; padding: .35rem .6rem .3rem; transform: rotate(-6deg); font-size: .95rem; letter-spacing: .1em; mix-blend-mode: multiply; }

/* ---------- Confirmed ---------- */
.confirmed { position: relative; overflow: clip; padding: clamp(8rem, 15vh, 11rem) 0 var(--section); color: var(--paper); background: var(--ink); isolation: isolate; }
.confirmed::before { content: ""; position: absolute; z-index: -2; inset: 0; background: linear-gradient(110deg, rgba(27,34,66,.98) 0%, rgba(27,34,66,.9) 45%, rgba(27,34,66,.58) 100%); }
.confirmed::after { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .17; background: url("../img/print-halftone-texture-v1.png") center / cover; mix-blend-mode: screen; pointer-events: none; }
.confirmed__architecture { position: absolute; z-index: -3; inset: 0 0 auto 36%; height: min(52rem, 82vh); opacity: .62; background: url("../img/summit-tower-bridge-halftone-v1.jpg") center / cover no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 100%), linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 100%), linear-gradient(180deg, #000 62%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; }
.confirmed__intro { margin-bottom: clamp(3.5rem, 7vw, 6.5rem); }
.confirmed__edition { display: block; margin-bottom: clamp(2rem, 5vw, 4.5rem); color: #ef6166; }
.confirmed__headline { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(16rem, .65fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.confirmed__headline > p { max-width: 32ch; margin: 0 0 .65rem; color: rgba(243,238,226,.76); font-size: var(--fs-lede); }
.confirmed__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr); gap: clamp(3rem, 7vw, 7rem); align-items: start; }
.confirmed__ticket { position: relative; color: var(--ink); background: #FBF8F0; border: 1px solid rgba(243,238,226,.3); box-shadow: 0 45px 100px -55px rgba(0,0,0,.9); }
.confirmed__ticket-head { display: flex; justify-content: space-between; gap: 2rem; align-items: flex-start; padding: clamp(1.5rem, 3vw, 2.25rem); border-bottom: 1px solid var(--paper-line); }
.confirmed__ticket-head .mono { display: block; margin-bottom: .7rem; color: var(--stamp); }
.confirmed__ticket-head h2 { max-width: 14ch; font-size: clamp(1.9rem, 3.6vw, 3rem); }
.confirmed__stamp {
  flex: none; transform: rotate(7deg);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--stamp);
  border: 4px double var(--stamp); border-radius: 8px; padding: .55rem .8rem .5rem; font-size: 1.05rem; letter-spacing: .1em; mix-blend-mode: multiply; opacity: .9;
}
.confirmed__title { max-width: 9ch; color: var(--paper); font-size: var(--fs-hero); font-weight: 700; line-height: .88; letter-spacing: -.02em; }
.confirmed__pass { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding: clamp(1.5rem, 3vw, 2.25rem); border-bottom: 1px solid var(--paper-line); }
.confirmed__qr-wrap { padding: .75rem; background: var(--ink); color: var(--paper); }
.confirmed__qr-wrap > span { display: block; padding: .65rem .25rem 0; color: rgba(243,238,226,.66); text-align: center; }
.confirmed__qr { width: 196px; min-width: 196px; height: 196px; padding: 10px; background: var(--paper); }
.confirmed__qr img, .confirmed__qr canvas { display: block; width: 100% !important; height: 100% !important; }
.confirmed__pass-copy > span { display: block; margin-bottom: .7rem; color: var(--muted-2); }
.confirmed__ref-code { display: block; overflow-wrap: anywhere; margin-bottom: 1rem; font-family: var(--font-display); font-size: clamp(1.7rem, 4vw, 3rem); line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
.confirmed__copy { padding: .55rem .75rem; color: var(--paper); background: var(--stamp); border: 1px solid var(--stamp); transition: transform var(--dur-fast), background var(--dur-fast); }
.confirmed__copy:hover { background: var(--stamp-deep); }
.confirmed__copy:active { transform: translateY(1px); }
.confirmed__pass-copy p { max-width: 34ch; margin: 1.25rem 0 0; color: var(--muted); font-size: .92rem; }
.confirmed__facts { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; padding: clamp(1.5rem, 3vw, 2.25rem); }
.confirmed__facts > div { min-width: 0; padding: 1rem 1.25rem 1rem 0; border-top: 1px solid var(--paper-line); }
.confirmed__facts > div:nth-child(even) { padding-left: 1.25rem; border-left: 1px solid var(--paper-line); }
.confirmed__facts dt { color: var(--muted-2); margin-bottom: .3rem; }
.confirmed__facts dd { overflow-wrap: anywhere; margin: 0; color: var(--ink); text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: .95rem; }
.confirmed__next { padding-top: .25rem; }
.confirmed__section-label { display: block; margin-bottom: 1.25rem; color: #ef6166; }
.confirmed__next > h2 { max-width: 11ch; margin-bottom: 2.5rem; color: var(--paper); font-size: clamp(2.4rem, 4vw, 4rem); }
.next__list { display: flex; flex-direction: column; margin-bottom: 2.4rem; border-top: 1px solid rgba(243,238,226,.2); }
.next__list li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; padding: 1.35rem 0; border-bottom: 1px solid rgba(243,238,226,.2); }
.next__list p { margin: 0; color: rgba(243,238,226,.72); }
.next__num { color: #ef6166; padding-top: .3rem; }
.confirmed__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 1.6rem; }
.confirmed__actions .btn--ink { --btn-bg: var(--paper); --btn-fg: var(--ink); --btn-bd: var(--paper); }
.confirmed__actions .btn--outline { --btn-bg: transparent; --btn-fg: var(--paper); --btn-bd: rgba(243,238,226,.55); }
.confirmed__fine { color: rgba(243,238,226,.55); text-transform: none; letter-spacing: 0; }
.confirmed__fine a { color: var(--paper); border-bottom: 1px solid rgba(243,238,226,.35); }

/* ---------- About ---------- */
.about-hero { padding-top: clamp(8rem, 16vh, 11rem); }
.about-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 6rem); align-items: end; }
.about-hero__title { font-size: var(--fs-hero); font-weight: 700; line-height: .9; letter-spacing: -.02em; }
.about-hero__copy { color: var(--muted); font-size: 1.05rem; }
.about-hero__lede { font-size: var(--fs-lede); color: var(--ink); line-height: 1.5; }
.pillars__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.pillar { padding-top: 1.4rem; border-top: 1px solid rgba(243,238,226,.2); }
.pillar__num { color: var(--mustard); display: block; margin-bottom: 1.2rem; }
.pillar__title { font-size: var(--fs-h3); margin-bottom: .8rem; }
.pillar p { color: rgba(243,238,226,.68); margin: 0; }

/* ---------- Error pages ---------- */
.errpage { min-height: 80svh; display: flex; align-items: center; padding-top: 6rem; }
.errpage__inner { max-width: 54ch; }
.errpage__code { color: var(--stamp); display: block; margin-bottom: 1.2rem; }
.errpage__title { font-size: var(--fs-h1); margin-bottom: 1.2rem; }
.errpage p { color: var(--muted); font-size: 1.05rem; margin-bottom: 2rem; }
.errpage__debug { text-transform: none; letter-spacing: 0; background: var(--paper-2); padding: 1rem; overflow: auto; margin-bottom: 2rem; }

/* ---------- Reveal (JS-enhanced) ---------- */
html.js [data-reveal] { opacity: 0; transform: translateY(24px); }
html.js [data-reveal].is-inview { opacity: 1; transform: none; transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
html.js [data-split] .split-line { display: block; overflow: hidden; }
html.js [data-split] .split-inner { display: block; transform: translateY(110%); }
html.js [data-split].is-inview .split-inner { transform: none; transition: transform 1s var(--ease-out); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .hero__grid { gap: clamp(3.5rem, 6vw, 5rem); grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr); }
  .hero__title { font-size: clamp(3.6rem, 8.5vw, 6.4rem); }
  .statement__grid { column-gap: clamp(3rem, 6vw, 4.5rem); }
  .process__steps { grid-template-columns: repeat(2, 1fr); }
  .step:nth-child(odd) { padding-left: 0; border-left: 0; }
  .step:nth-child(n+3) { border-top: 1px solid var(--paper-line); }
  .pillars__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .reg__grid { grid-template-columns: 300px 1fr; }
}

@media (max-width: 900px) {
  .nav__cta { display: none; }
  .nav__burger { display: block; }
  .hero { min-height: auto; padding-top: 7rem; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__bg::after { background: rgba(243, 238, 226, .88); }
  .hero__collage { max-width: 440px; aspect-ratio: auto; }
  .poster { position: relative; left: auto; top: auto; width: 100%; margin-inline: auto; transform: none; }
  .collage__note { right: 1.25rem; bottom: -30px; }
  .hero__collage { max-width: 440px; margin: 2rem auto 0; transform: none; }
  .hero__vertical { display: none; }
  .hero__scroll { display: none; }
  .section__head--split { grid-template-columns: 1fr; gap: 1rem; }
  .statement__grid { grid-template-columns: 1fr; gap: 2rem; }
  .statement__image { grid-column: 1; grid-row: auto; }
  .statement__body { grid-template-columns: 1fr; }
  .path { grid-template-columns: .8fr 1.2fr; }
  .path__cta { grid-column: 2; justify-self: start; }
  .portal__grid, .faq__grid, .confirmed__grid, .about-hero__grid { grid-template-columns: 1fr; }
  .confirmed__headline { grid-template-columns: 1fr; }
  .confirmed__headline > p { max-width: 38ch; }
  .confirmed__architecture { inset-inline-start: 20%; opacity: .45; }
  .portal__copy, .faq__head { position: static; }
  .index__row { grid-template-columns: 3rem 1fr; }
  .index__desc { grid-column: 2; }
  .reg__grid { grid-template-columns: 1fr; }
  .reg__aside { position: static; }
  .reg__steps { display: none; }
  .tickets { grid-template-columns: 1fr; }
  .ticket__punch { display: none; }
  .cta__inner { grid-template-columns: 1fr; align-items: start; gap: 2.75rem; }
  .cta__actions { padding-bottom: 0; }
  .footer__newsletter { grid-template-columns: 1fr; align-items: start; gap: 2.5rem; }
}

@media (max-width: 640px) {
  :root { --fs-hero: clamp(2.75rem, 13vw, 4.5rem); }
  .hero { padding-top: 6.5rem; padding-bottom: 3.5rem; }
  .hero__eyebrow { margin-bottom: 1.5rem; }
  .hero__title { margin-bottom: 1.5rem; }
  .hero__lede { margin-bottom: 1.75rem; }
  .hero__actions { flex-direction: column; align-items: stretch; margin-bottom: 2rem; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .statement { padding-block: 4.5rem; }
  .statement__title { font-size: clamp(2.55rem, 12vw, 3.45rem); }
  .statement__body { gap: 1.25rem; font-size: 1rem; }
  .pathways { padding-block: 4.5rem; }
  .pathways .section__head { margin-bottom: 2.5rem; }
  .path { grid-template-columns: 1fr; gap: .75rem; padding-block: 1.5rem; }
  .path:hover { padding-left: 0; }
  .path__copy { margin-bottom: .65rem; }
  .path__cta { grid-column: 1; justify-self: stretch; }
  .portal { padding-block: 4.5rem; }
  .portal__grid { gap: 3rem; }
  .portal__copy .section__title { max-width: 12ch; }
  .portal__index { grid-template-columns: 1fr; }
  .index__row { min-height: 0; padding: 1.4rem 0; }
  .index__row:nth-child(even) { border-left: 0; }
  .form__row, .form__row--title { grid-template-columns: 1fr; }
  .form__row .field { margin-bottom: 1.4rem; }
  .form__row { margin-bottom: 0; }
  .field--sm { max-width: none; }
  .stages, .confirmed__facts { grid-template-columns: 1fr; }
  .process__steps, .pillars__grid { grid-template-columns: 1fr; }
  .step { min-height: 0; padding: 1.5rem 0; }
  .step + .step { border-left: 0; border-top: 1px solid var(--paper-line); }
  .footer__grid { grid-template-columns: 1fr; }
  .poster { padding: 1.8rem 1.5rem 1.5rem; }
  .poster__crest { width: 58px; }
  .collage__note .hand { font-size: 1.15rem; }
  .confirmed { padding-top: 7rem; }
  .confirmed__intro { margin-bottom: 3rem; }
  .confirmed__title { font-size: clamp(3.3rem, 17vw, 5rem); }
  .confirmed__ticket-head { align-items: center; }
  .confirmed__stamp { font-size: .78rem; border-width: 3px; padding: .4rem .55rem; }
  .confirmed__pass { grid-template-columns: 1fr; }
  .confirmed__qr-wrap { width: fit-content; max-width: 100%; }
  .confirmed__qr { width: min(196px, calc(100vw - 6.5rem)); min-width: 0; height: auto; aspect-ratio: 1; }
  .confirmed__facts { grid-template-columns: 1fr; }
  .confirmed__facts > div:nth-child(even) { padding-left: 0; border-left: 0; }
  .confirmed__actions { flex-direction: column; }
  .confirmed__actions .btn { justify-content: center; width: 100%; }
  .faq { padding-block: 4.5rem; }
  .faq__head { margin-bottom: 2.5rem; }
  .faq__q { grid-template-columns: 1fr 1.5rem; gap: 1rem; padding-block: 1.35rem; }
  .faq__a { padding: 0 2.5rem 1.5rem 0; }
  .cta { padding-block: 5rem; }
  .cta::before { background-position: 61% bottom; opacity: .68; }
  .cta::after { background: rgba(180,35,43,.22); }
  .cta__inner { gap: 2.25rem; }
  .cta__title { font-size: clamp(3rem, 14vw, 4.5rem); }
  .cta__actions .btn { width: 100%; justify-content: center; }
  .footer { padding-top: 4.5rem; }
  .footer__newsletter { padding: 1.5rem; margin-bottom: 4rem; }
  .footer__newsletter-field { grid-template-columns: 1fr; gap: .75rem; }
  .footer__newsletter-field input { border-right: 1px solid rgba(243,238,226,.28); }
  .footer__newsletter-field .btn { width: 100%; justify-content: center; }
  .footer::before { background-position: 64% bottom; opacity: .72; }
  .footer__grid { gap: 2.5rem; padding-bottom: 3.5rem; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: .8rem; }
  .footer { padding-bottom: clamp(8rem, 38vw, 12rem); }
  .footer__flag-stage { height: clamp(8rem, 38vw, 12rem); }
  .footer__flag-video { object-position: center; }
  .cookie-banner__actions { align-items: stretch; flex-direction: column; }
  .cookie-banner__actions .btn { justify-content: center; }
  .supporters__inner { width: 100%; grid-template-columns: 1fr; }
  .supporters__heading { padding: .9rem var(--gutter); border-right: 0; border-bottom: 1px solid var(--paper-line); }
  .supporters__title { max-width: none; }
  .supporters__list {
    display: flex; width: max-content; min-width: 100%; overflow: visible;
    padding-inline: calc(var(--gutter) - 1rem);
  }
  .supporters__org { flex: 0 0 min(78vw, 18rem); padding: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html.js [data-reveal], html.js [data-split] .split-inner { opacity: 1; transform: none; }
  .supporters__list.is-overflowing { animation: none; transform: none; }
}