/* ==========================================================================
   AVOM Bharat Art Fest 2027 — style.css
   Palette, type and logo taken from the festival posters and the AVOM deck.
   ========================================================================== */

:root {
  /* Colours */
  --color-paper: #f3e4d0;
  --color-paper-soft: #f7efe5;
  --color-card: #f9f3ea;
  --color-ink: #151515;
  --color-ink-soft: #3d3935;
  --color-muted: #6b5f52;
  --color-line: #d9c6ae;
  --color-line-strong: #bea78b;
  --color-red: #b8232a;
  --color-red-deep: #8e161c;
  --color-teal: #0b6f80;
  --color-teal-deep: #005667;
  --color-orange: #ee8a2a;
  --color-gold: #e9b44c;
  --color-band: #151515;
  --color-on-band: #f5f2ee;
  --color-on-band-muted: #b3aca4;
  --color-accent: var(--color-red);
  --color-on-accent: #ffffff;
  --color-overlay: rgba(21, 21, 21, 0.45);
  /* band colour laid over the dark texture — raise the alpha to fade the texture further */
  --dark-texture-veil: rgba(21, 21, 21, 0.6);
  /* page paper laid over the ivory texture — raise the alpha to fade the texture further */
  --paper-texture-veil: rgba(243, 228, 208, 0.55);
  /* brand red laid over the crimson texture on the poster-launch band */
  --crimson-texture-veil: rgba(184, 35, 42, 0.55);
  --color-scrap: #faf5ee;
  --color-kraft: #d8bd93;
  --color-tape: rgba(233, 180, 76, 0.7);

  /* Font families */
  --font-poster: "Anton", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Archivo", "Hind", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Archivo", "Hind", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-script: "Kaushan Script", "Brush Script MT", cursive;
  --font-marker: "Permanent Marker", "Kaushan Script", cursive;

  /* Headings */
  --hero-title: 168px;
  --hero-script: 104px;
  --h1: 84px;
  --h2: 56px;
  --h3: 36px;
  --h4: 26px;
  --h5: 21px;
  --h6: 17px;

  /* Body text */
  --text-10: 10px;
  --text-11: 11px;
  --text-12: 12px;
  --text-13: 13px;
  --text-14: 14px;
  --text-15: 15px;
  --text-16: 16px;
  --text-17: 17px;
  --text-18: 18px;
  --text-19: 19px;
  --text-20: 20px;

  /* Line heights */
  --lh-tight: 1;
  --lh-heading: 1.1;
  --lh-snug: 1.35;
  --lh-body: 1.6;

  /* Font weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  /* Letter spacing */
  --ls-tight: -1px;
  --ls-normal: 0;
  --ls-wide: 1px;
  --ls-wider: 3px;

  /* Text transforms */
  --tt-upper: uppercase;
  --tt-none: none;

  /* Radius */
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 14px;
  --radius-round: 999px;

  /* Spacing */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-80: 80px;
  --space-100: 100px;
  --space-120: 120px;

  /* Layout */
  --container: 1420px;
  --gutter: 50px;
  --header-height: 84px;
  --hero-copy-width: 640px;
  --hero-image-max: 680px;
  --page-title: 132px;
  --page-script: 60px;
  --page-hero-art: 600px;
  --slider-gap: 24px;
  --highlights-per-view: 4;
  --people-per-view: 5;
  --art-cols: 6;
  --art-icon: 64px;
  --stalls-per-view: 4;
  --speaker-card: 300px;
  --ticket-w: 150px;
  --ticket-h: 260px;
  --fan-spread: 29deg;
  --fan-pivot: 270%;
  --notch: 20px;
  --torn-height: 24px;
  --launch-tear: 32px;
  --partner-edge: 420px;
  --hero-edge: 360px;
  --launch-copy-width: 900px;
  --launch-icon: 40px;
  --ticker-speed: 45s;
  --ticker-tear: 12px;
  --ticker-pad: 34px;
  --speaker-card-opacity: 0.35;
  /* how far the awning hangs down over the stall card */
  --awning-drop: 20px;
  --marigold: 84px;
  --faq-num: 40px;
  --flowers-size: 180px;
  --flowers-top: 0px;
  /* a little past the edge so the petals are cut by it, not stopping short */
  --flowers-right: -24px;
  --arrow-size: 48px;
  --logo-height: 80px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 0.3s;
}

/* ---------- Reset ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, h5, h6,
p, ul, ol, li, dl, dt, dd, figure, table {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

body {
  background-color: var(--color-paper);
  background-image: linear-gradient(var(--paper-texture-veil), var(--paper-texture-veil)), url("images/ivory-paper.webp");
  background-size: auto, 1672px auto;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-16);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

body.is-locked {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

table {
  border-collapse: collapse;
  width: 100%;
}

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

::selection {
  background-color: var(--color-accent);
  color: var(--color-on-accent);
}

::-moz-selection {
  background-color: var(--color-accent);
  color: var(--color-on-accent);
}

main:focus {
  outline: none;
}

.skip-link {
  position: absolute;
  top: var(--space-8);
  left: -9999px;
  z-index: 200;
  padding: var(--space-12) var(--space-16);
  background-color: var(--color-ink);
  color: var(--color-on-band);
  border-radius: var(--radius-s);
}

.skip-link:focus {
  left: var(--space-16);
}

/* ---------- AVOM line icons ---------- */
/* Drawn for this site. Each is a mask filled with the current text colour,
   so an icon takes the colour and size of the text it sits in. */

.ico {
  display: inline-block;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  vertical-align: -0.125em;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}

.ico--arrow-right {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12H19M13 6L19 12L13 18'/%3E%3C/svg%3E");
}

.ico--arrow-left {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H5M11 6L5 12L11 18'/%3E%3C/svg%3E");
}

.ico--x {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6L18 18M18 6L6 18'/%3E%3C/svg%3E");
}

.ico--plus {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5V19M5 12H19'/%3E%3C/svg%3E");
}

.ico--menu {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7H20M4 12H16M4 17H20'/%3E%3C/svg%3E");
}

.ico--check {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5L11 15.5L16.5 9'/%3E%3C/svg%3E");
}

.ico--calendar {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 10H20.5M8 3V7M16 3V7'/%3E%3Ccircle cx='12' cy='15' r='1.2' fill='%23000'/%3E%3C/svg%3E");
}

.ico--clock {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7V12L15.5 14'/%3E%3C/svg%3E");
}

.ico--pin {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21C12 21 5 14.5 5 9.5A7 7 0 0 1 19 9.5C19 14.5 12 21 12 21Z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
}

.ico--mail {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='M3.5 7L12 13L20.5 7'/%3E%3C/svg%3E");
}

.ico--instagram {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.2' cy='6.8' r='1' fill='%23000'/%3E%3C/svg%3E");
}

.ico--facebook {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 21V13.5H17.5L18 10H14.5V8C14.5 7 15 6.5 16 6.5H18V3.3C17.4 3.2 16.3 3 15.2 3C12.6 3 11 4.6 11 7.4V10H8V13.5H11V21'/%3E%3C/svg%3E");
}

.ico--music {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V6L19 4V16'/%3E%3Ccircle cx='6.5' cy='18' r='2.5'/%3E%3Ccircle cx='16.5' cy='16' r='2.5'/%3E%3C/svg%3E");
}

.ico--stall {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9L5 4H19L21 9'/%3E%3Cpath d='M3 9Q5 12 7.5 9Q10 12 12 9Q14.5 12 16.5 9Q19 12 21 9'/%3E%3Cpath d='M5 11.5V20H19V11.5M10 20V15H14V20'/%3E%3C/svg%3E");
}

.ico--talks {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5H15A1.5 1.5 0 0 1 16.5 6.5V12A1.5 1.5 0 0 1 15 13.5H9L5.5 16.5V13.5H4A1.5 1.5 0 0 1 2.5 12V6.5A1.5 1.5 0 0 1 4 5Z'/%3E%3Cpath d='M19 9H20.5A1 1 0 0 1 21.5 10V15.5A1 1 0 0 1 20.5 16.5H19.5V19L16.5 16.5H11'/%3E%3C/svg%3E");
}

.ico--installation {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3L20 7.5V16.5L12 21L4 16.5V7.5Z'/%3E%3Cpath d='M4 7.5L12 12L20 7.5M12 12V21'/%3E%3C/svg%3E");
}

.ico--game {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7H17A4.5 4.5 0 0 1 21.3 12.6L20.4 16.4A2.5 2.5 0 0 1 16 17.5L14.5 15.5H9.5L8 17.5A2.5 2.5 0 0 1 3.6 16.4L2.7 12.6A4.5 4.5 0 0 1 7 7Z'/%3E%3Cpath d='M7.5 10V13M6 11.5H9'/%3E%3Ccircle cx='16' cy='10.5' r='.9' fill='%23000'/%3E%3Ccircle cx='17.5' cy='12.8' r='.9' fill='%23000'/%3E%3C/svg%3E");
}

.ico--trophy {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4H17V9A5 5 0 0 1 7 9Z'/%3E%3Cpath d='M7 6H4V7.5A3 3 0 0 0 7 10.5M17 6H20V7.5A3 3 0 0 1 17 10.5M12 14V17M8 20H16M9.5 17H14.5V20'/%3E%3C/svg%3E");
}

.ico--brush {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 3.5L11 12'/%3E%3Cpath d='M10.5 12.5C8 11.5 5.5 13 5.5 16C5.5 18 4.5 19 3 20C6.5 21 11 20 11.5 16C11.7 14.8 11.4 13.4 10.5 12.5Z'/%3E%3C/svg%3E");
}

.ico--pot {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4H15M9.5 4C9.5 6 7.5 7 6.5 9C5 12 5.5 17 9 20H15C18.5 17 19 12 17.5 9C16.5 7 14.5 6 14.5 4'/%3E%3Cpath d='M7 11.5Q12 13.5 17 11.5M6.5 15Q12 17 17.5 15'/%3E%3C/svg%3E");
}

.ico--star {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5L14.6 9L20.5 9.7L16.2 13.8L17.3 19.7L12 16.8L6.7 19.7L7.8 13.8L3.5 9.7L9.4 9Z'/%3E%3C/svg%3E");
}

.ico--student {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 9L12 4.5L21.5 9L12 13.5Z'/%3E%3Cpath d='M6.5 11V16C8 18 16 18 17.5 16V11M21.5 9V14'/%3E%3C/svg%3E");
}

.ico--group {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3'/%3E%3Ccircle cx='5.5' cy='10' r='2.2'/%3E%3Ccircle cx='18.5' cy='10' r='2.2'/%3E%3Cpath d='M6.5 19C6.5 15.5 9 13.5 12 13.5S17.5 15.5 17.5 19M2 18.5C2 16 3.5 14.5 5.5 14.5M22 18.5C22 16 20.5 14.5 18.5 14.5'/%3E%3C/svg%3E");
}

.ico--map {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5L9 4L15 6.5L21 4V17.5L15 20L9 17.5L3 20Z'/%3E%3Cpath d='M9 4V17.5M15 6.5V20'/%3E%3C/svg%3E");
}

.ico--handshake {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 9L6 6L10 7.5M21.5 9L18 6L13 7L9 10.5A1.5 1.5 0 0 0 11 12.5L13.5 10.5L18.5 15'/%3E%3Cpath d='M5.5 13.5L8 16M8 12.5L11 15.5M10.5 11L14 14.5M2.5 9L5.5 13.5L10.5 18.5A1.5 1.5 0 0 0 13 17.5L18.5 15L21.5 9'/%3E%3C/svg%3E");
}

.ico--megaphone {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10V14H7L16 18.5V5.5L7 10Z'/%3E%3Cpath d='M7 14L8.5 19H11L10 14.8M19 9.5Q20.5 12 19 14.5'/%3E%3C/svg%3E");
}

.ico--lotus {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19C9.5 16 9.5 11 12 6C14.5 11 14.5 16 12 19Z'/%3E%3Cpath d='M12 19C8 18.5 4.5 15.5 4 11C7.5 12 10.5 14.5 12 19ZM12 19C16 18.5 19.5 15.5 20 11C16.5 12 13.5 14.5 12 19ZM4 19.5H20'/%3E%3C/svg%3E");
}

.ico--pencil {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20L5 15.5L15.5 5A2 2 0 0 1 18.5 5.5L18.5 5.5A2 2 0 0 1 19 8.5L8.5 19Z'/%3E%3Cpath d='M13.5 7L17 10.5M4 20H11'/%3E%3C/svg%3E");
}

.ico--clapper {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='9.5' width='17' height='11' rx='1.5'/%3E%3Cpath d='M3.5 9.5L4.5 5L20 3.5L20.5 7.5L3.5 9.5M8.5 5L10.5 8.5M13.5 4.4L15.5 8'/%3E%3C/svg%3E");
}

.ico--mic {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5.5 11A6.5 6.5 0 0 0 18.5 11M12 17.5V21M8.5 21H15.5'/%3E%3C/svg%3E");
}

.ico--book {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.5C10 5 7 4.5 3.5 5V19C7 18.5 10 19 12 20.5C14 19 17 18.5 20.5 19V5C17 4.5 14 5 12 6.5Z'/%3E%3Cpath d='M12 6.5V20.5'/%3E%3C/svg%3E");
}

/* arrows nudge forward when their link is hovered */
a:hover > .ico--arrow-right,
button:hover > .ico--arrow-right {
  transform: translateX(3px);
}

a:hover > .ico--arrow-left,
button:hover > .ico--arrow-left {
  transform: translateX(-3px);
}

.ico--arrow-right,
.ico--arrow-left {
  transition: transform var(--duration) var(--ease);
}

/* the highlight badges give a small turn when their tile is hovered */
.tile:hover .tile__badge .ico {
  animation: ico-wiggle 0.6s var(--ease);
}

@keyframes ico-wiggle {
  0%,
  100% {
    transform: rotate(0);
  }

  30% {
    transform: rotate(-14deg);
  }

  65% {
    transform: rotate(10deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tile:hover .tile__badge .ico {
    animation: none;
  }
}

/* ---------- Scroll reveal ---------- */
/* Only hidden once script.js has tagged the page (html.has-reveal), so nothing is lost without JS */

.has-reveal .reveal:not(.reveal--words) {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.8s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.has-reveal .reveal.is-visible:not(.reveal--words) {
  opacity: 1;
  transform: none;
}

/* cards in a sideways track never wait for the fade: the one peeking in from the edge is
   the swipe hint, so it has to be there from the start */
.has-reveal .stall-track > .reveal:not(.reveal--words) {
  opacity: 1;
  transform: none;
}

/* headings: each word rises out of its own line box */
.reveal-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.08em;
}

.reveal-word__inner {
  display: inline-block;
}

.has-reveal .reveal--words .reveal-word__inner {
  transform: translateY(110%);
  transition: transform 0.8s var(--ease);
  transition-delay: calc(var(--i) * 70ms);
}

.has-reveal .reveal--words.is-visible .reveal-word__inner {
  transform: none;
}

/* ---------- Layout ---------- */

.container {
  /* centred by padding, not margin: the gutter grows to fill the space beside the container column */
  width: 100%;
  padding-left: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  padding-right: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
}

/* ---------- Shared type ---------- */

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-13);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-wider);
  text-transform: var(--tt-upper);
  color: var(--color-red);
}

.section-title {
  text-wrap: balance;
  font-family: var(--font-poster);
  font-size: var(--h1);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-normal);
  text-transform: var(--tt-upper);
  color: var(--color-ink);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-16) var(--space-24);
  border: 2px solid transparent;
  border-radius: var(--radius-s);
  font-family: var(--font-display);
  font-size: var(--text-15);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  line-height: var(--lh-tight);
  text-transform: var(--tt-upper);
  white-space: nowrap;
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

/* the peacock's shine: a soft band of light sweeps across on hover */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  z-index: -1;
  width: 50%;
  background: linear-gradient(90deg, rgba(247, 239, 227, 0), rgba(247, 239, 227, 0.45), rgba(247, 239, 227, 0));
  transform: skewX(-20deg);
  pointer-events: none;
}

.btn:hover::after {
  animation: btn-shine 0.8s var(--ease);
}

@keyframes btn-shine {
  from {
    left: -60%;
  }

  to {
    left: 120%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover::after {
    animation: none;
  }
}

.btn--accent {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

.btn--accent:hover {
  background-color: var(--color-ink);
  border-color: var(--color-ink);
}

.btn--outline {
  border-color: var(--color-ink);
  color: var(--color-ink);
}

.btn--outline:hover {
  background-color: var(--color-ink);
  color: var(--color-on-band);
}

.btn--small {
  padding: var(--space-12) var(--space-16);
  font-size: var(--text-13);
}

/* ---------- Header ---------- */

/* sits on the page paper: no fill, no rule, scrolls away with the page */
.site-header {
  position: relative;
  z-index: 50;
}


.site-header__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-32);
  min-height: var(--header-height);
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.site-header__logo {
  width: auto;
  height: var(--logo-height);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-32);
}

.site-nav__link {
  position: relative;
  padding: var(--space-8) 0;
  font-size: var(--text-14);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: var(--tt-upper);
  color: var(--color-ink-soft);
  transition: color var(--duration) var(--ease);
}

.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--color-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration) var(--ease);
}

.site-nav__link:hover {
  color: var(--color-red);
}

.site-nav__link:hover::after {
  transform: scaleX(1);
}

/* the page you are on keeps its underline */
.site-nav__link[aria-current="page"] {
  color: var(--color-red);
}

.site-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

/* a lighter button in the header than the ones in the page */
.site-header__cta {
  padding: var(--space-12) var(--space-16);
  font-size: var(--text-13);
}

.site-header__menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-s);
  font-size: var(--text-20);
}

/* ---------- Drawer ---------- */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  visibility: hidden;
  pointer-events: none;
}

.drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

.drawer__backdrop {
  position: absolute;
  inset: 0;
  background-color: var(--color-overlay);
  opacity: 0;
  transition: opacity var(--duration) var(--ease);
}

.drawer.is-open .drawer__backdrop {
  opacity: 1;
}

.drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  width: 380px;
  max-width: 88vw;
  padding: var(--space-24);
  background-color: var(--color-paper);
  border-left: 1px solid var(--color-line-strong);
  transform: translateX(100%);
  transition: transform var(--duration) var(--ease);
  overflow-y: auto;
}

.drawer.is-open .drawer__panel {
  transform: translateX(0);
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-16);
  border-bottom: 1px solid var(--color-line);
}

.drawer__title {
  font-family: var(--font-display);
  font-size: var(--h5);
  font-weight: var(--fw-black);
  text-transform: var(--tt-upper);
}

.drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-s);
  font-size: var(--text-18);
}

.drawer__nav {
  display: flex;
  flex-direction: column;
}

.drawer__link {
  padding: var(--space-16) 0;
  border-bottom: 1px solid var(--color-line);
  font-size: var(--text-17);
  font-weight: var(--fw-semibold);
}

.drawer__link:hover,
.drawer__link[aria-current="page"] {
  color: var(--color-red);
}

/* ---------- Hero ---------- */
/* copy on the left; the collage runs off the right edge and sits on the ticker */

.hero {
  position: relative;
  padding: 0;
  overflow-x: clip;
}

.hero__container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
  padding-right: 0;
}

.hero__media {
  display: flex;
  align-self: end;
  justify-content: flex-end;
}

.hero__image {
  width: 100%;
  max-width: var(--hero-image-max);
  height: auto;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-20);
  max-width: var(--hero-copy-width);
  padding-bottom: var(--space-24);
}

.hero__title {
  display: flex;
  flex-direction: column;
}

.hero__title-main {
  font-family: var(--font-poster);
  font-size: var(--hero-title);
  font-weight: var(--fw-regular);
  line-height: 0.92;
  text-transform: var(--tt-upper);
  color: var(--color-ink);
}

.hero__title-line {
  display: block;
}

.hero__title-script {
  font-family: var(--font-script);
  font-size: var(--hero-script);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  color: var(--color-red);
  transform: rotate(-4deg);
  transform-origin: left center;
}

.hero__lead {
  max-width: 440px;
  font-size: var(--text-17);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--color-ink-soft);
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-24);
}

.hero__fact {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-display);
  font-size: var(--text-14);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-wide);
  text-transform: var(--tt-upper);
}

.hero__fact .ico {
  font-size: var(--text-20);
  color: var(--color-red);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

/* ---------- Torn paper edges ---------- */
/* Masks are inlined as data URIs: Chrome blocks mask images loaded from files when a page is opened from disk */
/* The edge takes the section's own background, so one mask serves every colour */

.torn-top,
.torn-bottom {
  position: relative;
}

.torn-top::before,
.torn-bottom::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  height: var(--torn-height);
  background: inherit;
  pointer-events: none;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 1200px var(--torn-height);
  mask-size: 1200px var(--torn-height);
}

.torn-top::before {
  top: calc(var(--torn-height) * -1 + 1px);
  -webkit-mask-image: url("data:image/webp;base64,UklGRooCAABXRUJQVlA4TH4CAAAvr8QJEA8QEfMfgo6r7XH15v2gC7CUVmBuw0MS3WVllgAvxEv5mXkbzFyapQpCTyGK5B1cuYno/wTos+PA0TqYFPwdJfC6PsxFU2GqiYVhaloHKc03s4odcNujJGwrfF+TCmOWkrvWRCfl5VZxOAsUh8cI4HZ3wCpywYPlMdYkL4HdKLuzWHKPkcAzSmsAO9sLwIhPQ0WeFWG40T6ebSX/GBlglmKE4YzaJbvSRSuLMjgl12uSVvxZLuEeguMipQ3G5AprFbsvvVKiOCqPnewrKTBPJ5zOj5ALWCKD37FDqGMuLdpKXsx9VpAlmEvrGSZpurO9NGyU3SE1LIWA5dISWPpE+HPYANkhViySvu4zdVspu3ziD1sDZskpMuwlNrAuCXAZ+HOQTKkCSbtde7zuFk7G/WSRlGj9e9iwxEitU7a2DHiOTuugXGMyXLIOP3ZLJ55zKdDuMi7zoconhjaAl4JXHBO1LsKcXQdMkvXYTl4qTKmDB0+7a7mGQ3lW8nvVmAF8W2CQ1qWD5ZNap9zhha6+JVK7KNNzbos4KdC2OjqO4l7nlq0K7V1oS3gpYk3hQw8f72ZpyXVGX7tWmS6ZRUq4psRjt1D/RycXrWId13kH08bYtD3YoGtNbvjYaUyuIlJ0yvim/GBO29lVe0PvOfuzKZV8grmJB/fCThB3uey4k53qqkkKjwa4g2nll/sAxlKg3mq+kNITGCWtgwL/340vxQZXg5SfAE6KTpH7XUqpYbzqUgqYeIqm5Kd0R5Ryw5y0my6SNlx4DovyvG/3ZIW9YcmGS5jE83zPnbsCze/xO4PWJ3L3/hDa/gAYFT9di6QptX08+Cl9uj53BA==");
  mask-image: url("data:image/webp;base64,UklGRooCAABXRUJQVlA4TH4CAAAvr8QJEA8QEfMfgo6r7XH15v2gC7CUVmBuw0MS3WVllgAvxEv5mXkbzFyapQpCTyGK5B1cuYno/wTos+PA0TqYFPwdJfC6PsxFU2GqiYVhaloHKc03s4odcNujJGwrfF+TCmOWkrvWRCfl5VZxOAsUh8cI4HZ3wCpywYPlMdYkL4HdKLuzWHKPkcAzSmsAO9sLwIhPQ0WeFWG40T6ebSX/GBlglmKE4YzaJbvSRSuLMjgl12uSVvxZLuEeguMipQ3G5AprFbsvvVKiOCqPnewrKTBPJ5zOj5ALWCKD37FDqGMuLdpKXsx9VpAlmEvrGSZpurO9NGyU3SE1LIWA5dISWPpE+HPYANkhViySvu4zdVspu3ziD1sDZskpMuwlNrAuCXAZ+HOQTKkCSbtde7zuFk7G/WSRlGj9e9iwxEitU7a2DHiOTuugXGMyXLIOP3ZLJ55zKdDuMi7zoconhjaAl4JXHBO1LsKcXQdMkvXYTl4qTKmDB0+7a7mGQ3lW8nvVmAF8W2CQ1qWD5ZNap9zhha6+JVK7KNNzbos4KdC2OjqO4l7nlq0K7V1oS3gpYk3hQw8f72ZpyXVGX7tWmS6ZRUq4psRjt1D/RycXrWId13kH08bYtD3YoGtNbvjYaUyuIlJ0yvim/GBO29lVe0PvOfuzKZV8grmJB/fCThB3uey4k53qqkkKjwa4g2nll/sAxlKg3mq+kNITGCWtgwL/340vxQZXg5SfAE6KTpH7XUqpYbzqUgqYeIqm5Kd0R5Ryw5y0my6SNlx4DovyvG/3ZIW9YcmGS5jE83zPnbsCze/xO4PWJ3L3/hDa/gAYFT9di6QptX08+Cl9uj53BA==");
}

.torn-bottom::after {
  bottom: calc(var(--torn-height) * -1 + 1px);
  -webkit-mask-image: url("data:image/webp;base64,UklGRoQCAABXRUJQVlA4THgCAAAvr8QJEA8QEfMfgo6r7XH15vmgC7CUVmBuw1Oiu6zMEuCFeCm/Mm+DmUuzVEHoLcTpDqncRPR/AvQZ/QJMse3TyU/x/8sDbG2/n0bCE/lwb+5E2wf5QwPr81hI87Hfk2WOhiWZXJTB8zCin+I9kU0Nc+QwLsAutz0FB8ER7mjJxYbxyoXsJuMZjMA6sOm/u/G50OCoFKQn4ACMVT/fzZjbGqzmPcRH88hOgLiP5ZDLcdRRO8H2aI6d4pXjLubkKU4x56M0V50fbeBagtTwqdMYXYmQcyT5pvRgNDb83skFq1jHdT4kY9fYtHfx4W6WllRnnexKrXFJWiDKNcUuI3czt+x1HH1ojvIQZE3bxx6O1OGlj28JVQupy9wW5GATzavrYcQOXvIdXMt1q5mJ/qga08m3bRpgXdqw1AG2Di7JJX2s8lFDC5xeMp4wxioXpDm5NmSAdWAvvJQWIDb9NeyyqLHKkawtSfIZxzqQagyTi9bhB3rHgi95gL3FLDqChqOwS0bPKMklSX8MYMQa4LArHV932wrjUXCn2LBw3mQpt2xa6BqkP4ZdEgYQKhbgK7pO3daCS0qSP2SnrWHOsLDnPJr7rBIWpZnsWmHA1OeGR27YtUtjdJzXusPnXhFzI2nsg30Jm+YpR2nmAVPOooI0UKxakstdWLWQJEd0nZhglaeYCu4RyCwQN8lKR2mUj0MOSDNBGrjtMZb2nOch02mGgIxyynjJ0hiojB4ku1FypZBzjxElrxFWvqMyZsYE0V1rgoO0cOMwlLbc8Bib5A4HMNWEzDDRug4Q51thJQ5JbudBo2ynecsY7Qabv1ltlDzXR+HC1Pb5Lg==");
  mask-image: url("data:image/webp;base64,UklGRoQCAABXRUJQVlA4THgCAAAvr8QJEA8QEfMfgo6r7XH15vmgC7CUVmBuw1Oiu6zMEuCFeCm/Mm+DmUuzVEHoLcTpDqncRPR/AvQZ/QJMse3TyU/x/8sDbG2/n0bCE/lwb+5E2wf5QwPr81hI87Hfk2WOhiWZXJTB8zCin+I9kU0Nc+QwLsAutz0FB8ER7mjJxYbxyoXsJuMZjMA6sOm/u/G50OCoFKQn4ACMVT/fzZjbGqzmPcRH88hOgLiP5ZDLcdRRO8H2aI6d4pXjLubkKU4x56M0V50fbeBagtTwqdMYXYmQcyT5pvRgNDb83skFq1jHdT4kY9fYtHfx4W6WllRnnexKrXFJWiDKNcUuI3czt+x1HH1ojvIQZE3bxx6O1OGlj28JVQupy9wW5GATzavrYcQOXvIdXMt1q5mJ/qga08m3bRpgXdqw1AG2Di7JJX2s8lFDC5xeMp4wxioXpDm5NmSAdWAvvJQWIDb9NeyyqLHKkawtSfIZxzqQagyTi9bhB3rHgi95gL3FLDqChqOwS0bPKMklSX8MYMQa4LArHV932wrjUXCn2LBw3mQpt2xa6BqkP4ZdEgYQKhbgK7pO3daCS0qSP2SnrWHOsLDnPJr7rBIWpZnsWmHA1OeGR27YtUtjdJzXusPnXhFzI2nsg30Jm+YpR2nmAVPOooI0UKxakstdWLWQJEd0nZhglaeYCu4RyCwQN8lKR2mUj0MOSDNBGrjtMZb2nOch02mGgIxyynjJ0hiojB4ku1FypZBzjxElrxFWvqMyZsYE0V1rgoO0cOMwlLbc8Bib5A4HMNWEzDDRug4Q51thJQ5JbudBo2ynecsY7Qabv1ltlDzXR+HC1Pb5Lg==");
}

/* ---------- Ticker tape + stat band ---------- */

.stats {
  padding: var(--space-80) 0 var(--space-40);
  background-color: var(--color-band);
  background-image: linear-gradient(var(--dark-texture-veil), var(--dark-texture-veil)), url("images/dark-texture.webp");
  background-position: center;
  background-size: cover;
  color: var(--color-on-band);
  overflow-x: clip;
}

/* a torn strip of red paper: jagged top and bottom edges come from the mask */
.ticker {
  position: absolute;
  top: -45px;
  left: -40px;
  right: -40px;
  z-index: 3;
  padding: var(--ticker-pad) 0;
  background-color: var(--color-red);
  background-image: linear-gradient(var(--crimson-texture-veil), var(--crimson-texture-veil)), url("images/crimson-texture.webp");
  background-position: center;
  background-size: cover;
  overflow: hidden;
  transform: rotate(1.5deg);
  -webkit-mask: url("data:image/webp;base64,UklGRooCAABXRUJQVlA4TH4CAAAvr8QJEA8QEfMfgo6r7XH15v2gC7CUVmBuw0MS3WVllgAvxEv5mXkbzFyapQpCTyGK5B1cuYno/wTos+PA0TqYFPwdJfC6PsxFU2GqiYVhaloHKc03s4odcNujJGwrfF+TCmOWkrvWRCfl5VZxOAsUh8cI4HZ3wCpywYPlMdYkL4HdKLuzWHKPkcAzSmsAO9sLwIhPQ0WeFWG40T6ebSX/GBlglmKE4YzaJbvSRSuLMjgl12uSVvxZLuEeguMipQ3G5AprFbsvvVKiOCqPnewrKTBPJ5zOj5ALWCKD37FDqGMuLdpKXsx9VpAlmEvrGSZpurO9NGyU3SE1LIWA5dISWPpE+HPYANkhViySvu4zdVspu3ziD1sDZskpMuwlNrAuCXAZ+HOQTKkCSbtde7zuFk7G/WSRlGj9e9iwxEitU7a2DHiOTuugXGMyXLIOP3ZLJ55zKdDuMi7zoconhjaAl4JXHBO1LsKcXQdMkvXYTl4qTKmDB0+7a7mGQ3lW8nvVmAF8W2CQ1qWD5ZNap9zhha6+JVK7KNNzbos4KdC2OjqO4l7nlq0K7V1oS3gpYk3hQw8f72ZpyXVGX7tWmS6ZRUq4psRjt1D/RycXrWId13kH08bYtD3YoGtNbvjYaUyuIlJ0yvim/GBO29lVe0PvOfuzKZV8grmJB/fCThB3uey4k53qqkkKjwa4g2nll/sAxlKg3mq+kNITGCWtgwL/340vxQZXg5SfAE6KTpH7XUqpYbzqUgqYeIqm5Kd0R5Ryw5y0my6SNlx4DovyvG/3ZIW9YcmGS5jE83zPnbsCze/xO4PWJ3L3/hDa/gAYFT9di6QptX08+Cl9uj53BA==") left top / 1200px var(--ticker-tear) repeat-x,
    linear-gradient(#000, #000) left center / 100% calc(100% - (var(--ticker-tear) * 2) + 2px) no-repeat,
    url("data:image/webp;base64,UklGRoQCAABXRUJQVlA4THgCAAAvr8QJEA8QEfMfgo6r7XH15vmgC7CUVmBuw1Oiu6zMEuCFeCm/Mm+DmUuzVEHoLcTpDqncRPR/AvQZ/QJMse3TyU/x/8sDbG2/n0bCE/lwb+5E2wf5QwPr81hI87Hfk2WOhiWZXJTB8zCin+I9kU0Nc+QwLsAutz0FB8ER7mjJxYbxyoXsJuMZjMA6sOm/u/G50OCoFKQn4ACMVT/fzZjbGqzmPcRH88hOgLiP5ZDLcdRRO8H2aI6d4pXjLubkKU4x56M0V50fbeBagtTwqdMYXYmQcyT5pvRgNDb83skFq1jHdT4kY9fYtHfx4W6WllRnnexKrXFJWiDKNcUuI3czt+x1HH1ojvIQZE3bxx6O1OGlj28JVQupy9wW5GATzavrYcQOXvIdXMt1q5mJ/qga08m3bRpgXdqw1AG2Di7JJX2s8lFDC5xeMp4wxioXpDm5NmSAdWAvvJQWIDb9NeyyqLHKkawtSfIZxzqQagyTi9bhB3rHgi95gL3FLDqChqOwS0bPKMklSX8MYMQa4LArHV932wrjUXCn2LBw3mQpt2xa6BqkP4ZdEgYQKhbgK7pO3daCS0qSP2SnrWHOsLDnPJr7rBIWpZnsWmHA1OeGR27YtUtjdJzXusPnXhFzI2nsg30Jm+YpR2nmAVPOooI0UKxakstdWLWQJEd0nZhglaeYCu4RyCwQN8lKR2mUj0MOSDNBGrjtMZb2nOch02mGgIxyynjJ0hiojB4ku1FypZBzjxElrxFWvqMyZsYE0V1rgoO0cOMwlLbc8Bib5A4HMNWEzDDRug4Q51thJQ5JbudBo2ynecsY7Qabv1ltlDzXR+HC1Pb5Lg==") left bottom / 1200px var(--ticker-tear) repeat-x;
  mask: url("data:image/webp;base64,UklGRooCAABXRUJQVlA4TH4CAAAvr8QJEA8QEfMfgo6r7XH15v2gC7CUVmBuw0MS3WVllgAvxEv5mXkbzFyapQpCTyGK5B1cuYno/wTos+PA0TqYFPwdJfC6PsxFU2GqiYVhaloHKc03s4odcNujJGwrfF+TCmOWkrvWRCfl5VZxOAsUh8cI4HZ3wCpywYPlMdYkL4HdKLuzWHKPkcAzSmsAO9sLwIhPQ0WeFWG40T6ebSX/GBlglmKE4YzaJbvSRSuLMjgl12uSVvxZLuEeguMipQ3G5AprFbsvvVKiOCqPnewrKTBPJ5zOj5ALWCKD37FDqGMuLdpKXsx9VpAlmEvrGSZpurO9NGyU3SE1LIWA5dISWPpE+HPYANkhViySvu4zdVspu3ziD1sDZskpMuwlNrAuCXAZ+HOQTKkCSbtde7zuFk7G/WSRlGj9e9iwxEitU7a2DHiOTuugXGMyXLIOP3ZLJ55zKdDuMi7zoconhjaAl4JXHBO1LsKcXQdMkvXYTl4qTKmDB0+7a7mGQ3lW8nvVmAF8W2CQ1qWD5ZNap9zhha6+JVK7KNNzbos4KdC2OjqO4l7nlq0K7V1oS3gpYk3hQw8f72ZpyXVGX7tWmS6ZRUq4psRjt1D/RycXrWId13kH08bYtD3YoGtNbvjYaUyuIlJ0yvim/GBO29lVe0PvOfuzKZV8grmJB/fCThB3uey4k53qqkkKjwa4g2nll/sAxlKg3mq+kNITGCWtgwL/340vxQZXg5SfAE6KTpH7XUqpYbzqUgqYeIqm5Kd0R5Ryw5y0my6SNlx4DovyvG/3ZIW9YcmGS5jE83zPnbsCze/xO4PWJ3L3/hDa/gAYFT9di6QptX08+Cl9uj53BA==") left top / 1200px var(--ticker-tear) repeat-x,
    linear-gradient(#000, #000) left center / 100% calc(100% - (var(--ticker-tear) * 2) + 2px) no-repeat,
    url("data:image/webp;base64,UklGRoQCAABXRUJQVlA4THgCAAAvr8QJEA8QEfMfgo6r7XH15vmgC7CUVmBuw1Oiu6zMEuCFeCm/Mm+DmUuzVEHoLcTpDqncRPR/AvQZ/QJMse3TyU/x/8sDbG2/n0bCE/lwb+5E2wf5QwPr81hI87Hfk2WOhiWZXJTB8zCin+I9kU0Nc+QwLsAutz0FB8ER7mjJxYbxyoXsJuMZjMA6sOm/u/G50OCoFKQn4ACMVT/fzZjbGqzmPcRH88hOgLiP5ZDLcdRRO8H2aI6d4pXjLubkKU4x56M0V50fbeBagtTwqdMYXYmQcyT5pvRgNDb83skFq1jHdT4kY9fYtHfx4W6WllRnnexKrXFJWiDKNcUuI3czt+x1HH1ojvIQZE3bxx6O1OGlj28JVQupy9wW5GATzavrYcQOXvIdXMt1q5mJ/qga08m3bRpgXdqw1AG2Di7JJX2s8lFDC5xeMp4wxioXpDm5NmSAdWAvvJQWIDb9NeyyqLHKkawtSfIZxzqQagyTi9bhB3rHgi95gL3FLDqChqOwS0bPKMklSX8MYMQa4LArHV932wrjUXCn2LBw3mQpt2xa6BqkP4ZdEgYQKhbgK7pO3daCS0qSP2SnrWHOsLDnPJr7rBIWpZnsWmHA1OeGR27YtUtjdJzXusPnXhFzI2nsg30Jm+YpR2nmAVPOooI0UKxakstdWLWQJEd0nZhglaeYCu4RyCwQN8lKR2mUj0MOSDNBGrjtMZb2nOch02mGgIxyynjJ0hiojB4ku1FypZBzjxElrxFWvqMyZsYE0V1rgoO0cOMwlLbc8Bib5A4HMNWEzDDRug4Q51thJQ5JbudBo2ynecsY7Qabv1ltlDzXR+HC1Pb5Lg==") left bottom / 1200px var(--ticker-tear) repeat-x;
}

.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker var(--ticker-speed) linear infinite;
}

.ticker__item {
  display: flex;
  align-items: center;
  gap: var(--space-20);
  padding-right: var(--space-20);
  font-family: var(--font-poster);
  font-size: var(--h5);
  letter-spacing: var(--ls-wide);
  line-height: var(--lh-tight);
  text-transform: var(--tt-upper);
  color: var(--color-on-accent);
  white-space: nowrap;
}

.ticker__item::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-round);
  background-color: var(--color-gold);
}

@keyframes ticker {
  to {
    transform: translateX(-50%);
  }
}

.stats__container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-16) var(--space-32);
  border-left: 1px solid rgba(245, 242, 238, 0.18);
}

.stat:first-child {
  padding-left: 0;
  border-left: 0;
}

/* digits keep a fixed width while they count up, so nothing beside them shifts */
.stat__value,
.big-stat__value,
.big-number__value {
  font-variant-numeric: tabular-nums;
}

.stat__value {
  font-family: var(--font-poster);
  font-size: var(--h2);
  line-height: var(--lh-tight);
  color: var(--color-gold);
}

.stat__label {
  font-size: var(--text-14);
  color: var(--color-on-band-muted);
}

/* ---------- Slider ---------- */

.slider {
  position: relative;
}

.slider__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--per-view) - 1) * var(--slider-gap)) / var(--per-view));
  gap: var(--slider-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.slider__track::-webkit-scrollbar {
  display: none;
}

.slider__track > * {
  scroll-snap-align: start;
}

.slider__track:focus-visible {
  outline-offset: 6px;
}

.slider__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--arrow-size);
  height: var(--arrow-size);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-round);
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-size: var(--text-20);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity var(--duration) var(--ease), background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.slider__arrow--prev {
  left: calc(var(--arrow-size) / -2);
}

.slider__arrow--next {
  right: calc(var(--arrow-size) / -2);
}

.slider:hover .slider__arrow,
.slider:focus-within .slider__arrow {
  opacity: 1;
  pointer-events: auto;
}

.slider__arrow:hover {
  background-color: var(--color-ink);
  color: var(--color-on-band);
}

.slider__arrow.is-disabled {
  display: none;
}

/* ---------- Swipe hints ---------- */
/* dots under a sideways track: the current stop stretches into a pill. Each dot sits in a
   24px tap target. They take the section's text colour, so they work on paper and on crimson. */

.scroll-dots {
  --dot-active: var(--color-red);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: calc(var(--space-16) * -1);
}

.scroll-dots[hidden],
.scroll-progress[hidden] {
  display: none;
}

.scroll-dots__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
}

.scroll-dots__dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-round);
  background-color: currentColor;
  opacity: 0.35;
  transition: width var(--duration) var(--ease), opacity var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

.scroll-dots__dot.is-active {
  width: 36px;
}

.scroll-dots__dot.is-active::before {
  width: 24px;
  background-color: var(--dot-active);
  opacity: 1;
}

/* on the crimson bands the dots are cream and the current one gold */
.bento-section .scroll-dots,
.activities .scroll-dots,
.calls .scroll-dots {
  --dot-active: var(--color-gold);
  color: var(--color-scrap);
}

.bento-section .scroll-dots__dot::before,
.activities .scroll-dots__dot::before,
.calls .scroll-dots__dot::before {
  opacity: 0.5;
}

/* a slim track with a red thumb under a sideways tag row */
.scroll-progress {
  position: relative;
  width: min(220px, 60%);
  height: 4px;
  overflow: hidden;
  border-radius: var(--radius-round);
  background-color: var(--color-line);
}

.scroll-progress__fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-round);
  background-color: var(--color-red);
}

/* the progress bar replaces the native scrollbar under the topic tags */
[data-scroll-progress] {
  scrollbar-width: none;
}

[data-scroll-progress]::-webkit-scrollbar {
  display: none;
}

/* ---------- Tags & bullets ---------- */

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.tag {
  padding: var(--space-8) var(--space-16);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-round);
  background-color: var(--color-paper);
  font-size: var(--text-14);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}

/* one line; overflowing tags scroll sideways */
.tag-list--compact {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: var(--space-8);
  scrollbar-width: thin;
  scrollbar-color: var(--color-line-strong) transparent;
  overscroll-behavior-x: contain;
}

.tag-list--compact::-webkit-scrollbar {
  height: 4px;
}

.tag-list--compact::-webkit-scrollbar-thumb {
  border-radius: var(--radius-round);
  background-color: var(--color-line-strong);
}

.tag-list--compact .tag {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* where the red progress bar is shown, the native scrollbar goes, or the row gets two bars */
.tag-list--compact[data-scroll-progress] {
  scrollbar-width: none;
}

.tag-list--compact[data-scroll-progress]::-webkit-scrollbar {
  display: none;
}

.tag-list--compact .tag {
  padding: var(--space-6) var(--space-12);
  font-size: var(--text-13);
}

.bullet-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.bullet-list__item {
  position: relative;
  padding-left: var(--space-20);
  font-size: var(--text-15);
  line-height: var(--lh-snug);
  color: var(--color-ink-soft);
}

.bullet-list__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px;
  height: 7px;
  background-color: var(--color-red);
  transform: rotate(45deg);
}

/* ---------- Poster launch ---------- */

.launch {
  position: relative;
  overflow: hidden;
  padding: var(--space-120) 0 var(--space-100);
  background-color: var(--color-red);
  background-image: linear-gradient(var(--crimson-texture-veil), var(--crimson-texture-veil)), url("images/crimson-texture.webp");
  background-position: center;
  background-size: cover;
  color: var(--color-on-accent);
}

.launch::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--launch-tear);
  background-color: var(--color-paper);
  pointer-events: none;
  -webkit-mask: url("data:image/webp;base64,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") left top / auto 100% repeat-x;
  mask: url("data:image/webp;base64,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") left top / auto 100% repeat-x;
}

.launch__container {
  position: relative;
  z-index: 1;
}

.launch__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  max-width: var(--launch-copy-width);
}

.launch__title {
  font-family: var(--font-marker);
  font-size: var(--h1);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  text-transform: var(--tt-upper);
  color: var(--color-scrap);
  transform: rotate(-3deg);
  transform-origin: left center;
}

.launch__text {
  font-size: var(--text-17);
  color: rgba(255, 255, 255, 0.85);
}

/* one row, outline icons, hairline dividers */
.launch__details {
  display: flex;
  align-items: center;
  padding-top: var(--space-16);
}

.launch__detail {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-4) var(--space-28);
  border-left: 1px solid rgba(255, 255, 255, 0.35);
}

.launch__detail:first-child {
  padding-left: 0;
  border-left: 0;
}

.launch__icon {
  flex: 0 0 auto;
  font-size: var(--launch-icon);
  color: var(--color-scrap);
}

.launch__detail-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.launch__label {
  font-size: var(--text-11);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: var(--tt-upper);
  color: var(--color-scrap);
}

.launch__value {
  font-family: var(--font-display);
  font-size: var(--text-16);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  white-space: nowrap;
}

/* palm and Rajwada on the right, centred top to bottom */
.launch__art {
  position: absolute;
  top: 50%;
  right: 0;
  width: auto;
  height: 96%;
  max-width: 40%;
  object-fit: contain;
  object-position: right center;
  pointer-events: none;
  transform: translateY(-50%);
}

/* ---------- Footer ---------- */

.site-footer {
  padding: var(--space-80) 0 var(--space-32);
  background-color: var(--color-band);
  background-image: linear-gradient(var(--dark-texture-veil), var(--dark-texture-veil)), url("images/dark-texture.webp");
  background-position: center;
  background-size: cover;
  color: var(--color-on-band);
}

.site-footer__container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-48);
  padding-bottom: var(--space-48);
}

.site-footer__brand,
.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.site-footer__identity {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.site-footer__logo {
  width: 84px;
  height: auto;
}

.site-footer__tagline {
  font-family: var(--font-script);
  font-size: var(--h5);
  color: var(--color-on-band);
}

.site-footer__heading {
  font-family: var(--font-display);
  font-size: var(--text-13);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: var(--tt-upper);
  color: var(--color-gold);
}

.site-footer__text,
.site-footer__link {
  max-width: 360px;
  font-size: var(--text-15);
  color: var(--color-on-band-muted);
}

.site-footer__mail {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding-top: var(--space-4);
  color: var(--color-on-band);
}

.site-footer__mail .ico {
  font-size: var(--text-18);
  color: var(--color-gold);
}

.site-footer__link:hover,
.site-footer__link[aria-current="page"] {
  color: var(--color-on-band);
}

.social {
  display: flex;
  gap: var(--space-8);
  padding-top: var(--space-8);
}

.social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(245, 242, 238, 0.3);
  border-radius: var(--radius-round);
  font-size: var(--text-18);
  color: var(--color-on-band);
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.social__link:hover {
  background-color: var(--color-red);
  border-color: var(--color-red);
}

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--space-16);
  padding-top: var(--space-24);
  border-top: 1px solid rgba(245, 242, 238, 0.14);
}

.site-footer__copy {
  font-size: var(--text-13);
  color: var(--color-on-band-muted);
}

/* the studio credit: the name alone is the link, underlined so it reads as one */
.site-footer__credit-link {
  font-weight: var(--fw-bold);
  color: var(--color-on-band);
  text-decoration: underline;
  text-decoration-color: rgba(245, 242, 238, 0.4);
  text-underline-offset: 3px;
  transition: color var(--duration) var(--ease), text-decoration-color var(--duration) var(--ease);
}

.site-footer__credit-link:hover {
  color: var(--color-gold);
  text-decoration-color: currentColor;
}

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

/* ---------- Welcome popup ---------- */
/* A small dark card in the bottom-right corner: a live day count beside one line of news
   and a single call to action. The page behind stays usable; once closed it stays closed. */

.welcome {
  position: fixed;
  right: var(--space-24);
  bottom: var(--space-24);
  z-index: 60;
  display: flex;
  align-items: stretch;
  gap: var(--space-16);
  width: 380px;
  max-width: calc(100vw - 32px);
  padding: var(--space-16) var(--space-20) var(--space-16) var(--space-16);
  border: 1px solid rgba(245, 242, 238, 0.16);
  border-top: 3px solid var(--color-gold);
  border-radius: var(--radius-m);
  background-color: var(--color-band);
  background-image: linear-gradient(var(--dark-texture-veil), var(--dark-texture-veil)), url("images/dark-texture.webp");
  background-position: center;
  background-size: cover;
  color: var(--color-on-band);
  animation: welcome-in 0.6s var(--ease) both;
}

.welcome[hidden] {
  display: none;
}

@keyframes welcome-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.welcome__close {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-round);
  font-size: var(--text-14);
  color: var(--color-on-band-muted);
}

.welcome__close:hover {
  background-color: rgba(245, 242, 238, 0.12);
  color: var(--color-scrap);
}

/* the day count, like a torn-off calendar leaf */
.welcome__count {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 88px;
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-s);
  background-color: var(--color-red);
  text-align: center;
}

.welcome__count[hidden] {
  display: none;
}

.welcome__days {
  font-family: var(--font-poster);
  font-size: var(--h3);
  line-height: var(--lh-tight);
  color: var(--color-scrap);
  font-variant-numeric: tabular-nums;
}

.welcome__unit {
  font-size: var(--text-10);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  line-height: var(--lh-snug);
  text-transform: var(--tt-upper);
  color: var(--color-scrap);
}

.welcome__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  padding-right: var(--space-16);
}

.welcome__kicker {
  font-family: var(--font-script);
  font-size: var(--h5);
  line-height: var(--lh-heading);
  color: var(--color-gold);
}

.welcome__text {
  font-size: var(--text-13);
  line-height: var(--lh-snug);
  color: var(--color-on-band);
}

@media (prefers-reduced-motion: reduce) {
  .welcome {
    animation: none;
  }
}

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  html,
  .slider__track {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}

/* ---------- FAQ ---------- */

.faq {
  position: relative;
  z-index: 2;
  overflow-x: clip;
  padding: var(--space-100) 0 0;
}

.faq__container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-80);
  align-items: start;
}

/* the heading holds its place on the left while the questions scroll past */
.faq__head {
  position: sticky;
  top: var(--space-40);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

/* each question is an aged-paper card, numbered like a programme */
.faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  counter-reset: faq;
}

.faq-item {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-l);
  background-color: var(--color-paper);
  counter-increment: faq;
}

.faq-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("images/speaker-card-wide.webp") center / 100% 100% no-repeat;
  opacity: var(--speaker-card-opacity);
  pointer-events: none;
  transition: opacity var(--duration) var(--ease);
}

/* a red strip down the open card's edge */
.faq-item::after {
  content: "";
  position: absolute;
  top: var(--space-16);
  bottom: var(--space-16);
  left: 0;
  width: 4px;
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  background-color: var(--color-red);
  transform: scaleY(0);
  transition: transform var(--duration) var(--ease);
}

.faq-item:hover::before,
.faq-item[open]::before {
  opacity: calc(var(--speaker-card-opacity) + 0.3);
}

.faq-item[open]::after {
  transform: scaleY(1);
}

.faq-item__q {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-20) var(--space-24);
  font-family: var(--font-display);
  font-size: var(--h6);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-snug);
  list-style: none;
  cursor: pointer;
  transition: color var(--duration) var(--ease);
}

.faq-item__text {
  flex: 1 1 auto;
}

.faq-item__q::-webkit-details-marker {
  display: none;
}

.faq-item__q::before {
  content: counter(faq, decimal-leading-zero);
  flex: 0 0 var(--faq-num);
  font-family: var(--font-poster);
  font-size: var(--h4);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  color: var(--color-red);
}

.faq-item__q:hover,
.faq-item[open] .faq-item__q {
  color: var(--color-red);
}

/* the plus sits in a round red badge and turns into a cross when open */
.faq-item__icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-round);
  background-color: var(--color-red);
  font-size: var(--text-18);
  color: var(--color-scrap);
  transition: transform var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

.faq-item[open] .faq-item__icon {
  transform: rotate(45deg);
  background-color: var(--color-ink);
}

.faq-item__a {
  padding: 0 var(--space-24) var(--space-24) calc(var(--space-24) + var(--faq-num) + var(--space-16));
  font-size: var(--text-16);
  color: var(--color-ink-soft);
}

.faq-item[open] .faq-item__a {
  animation: faq-in 0.35s var(--ease);
}

@keyframes faq-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Home — poster collage
   ========================================================================== */

.poster-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.poster-head--center {
  align-items: center;
  text-align: center;
}

.poster-head--split {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-40);
}

.poster-head--light .section-title {
  color: var(--color-scrap);
}

.poster-head__script {
  font-family: var(--font-script);
  font-size: var(--h5);
  color: var(--color-red);
}

.poster-head__text {
  max-width: 480px;
  font-size: var(--text-16);
  color: var(--color-muted);
}

.poster-head--light .poster-head__text {
  color: rgba(255, 255, 255, 0.82);
}

.red-rule {
  display: block;
  width: 64px;
  height: 4px;
  border-radius: var(--radius-round);
  background-color: var(--color-red);
}

.eyebrow--light {
  color: var(--color-gold);
}

.btn--light {
  background-color: var(--color-scrap);
  border-color: var(--color-scrap);
  color: var(--color-ink);
}

.btn--light:hover {
  background-color: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-scrap);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: var(--text-15);
  font-weight: var(--fw-bold);
  color: var(--color-red);
  border-bottom: 2px solid currentColor;
}

.text-link:hover {
  color: var(--color-ink);
}

/* ---------- Art forms mosaic ---------- */

.forms {
  padding: var(--space-100) 0 0;
}

.forms__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  padding-bottom: 0;
}

/* two rows of six */
.art-mosaic {
  display: grid;
  grid-template-columns: repeat(var(--art-cols), 1fr);
  gap: var(--space-16);
}

.art-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: 112px;
  padding: var(--space-16) var(--space-12);
  border: 3px solid var(--color-gold);
  border-radius: var(--radius-m);
  background-color: var(--color-red);
  background-image: linear-gradient(var(--crimson-texture-veil), var(--crimson-texture-veil)), url("images/crimson-texture.webp");
  background-position: center;
  background-size: cover;
  color: var(--color-scrap);
  text-align: center;
  transition: background-color var(--duration) var(--ease);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* a diagonal band of light sweeps from the bottom-left corner to the top-right on hover */
.art-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(45deg, rgba(247, 239, 227, 0) 42%, rgba(247, 239, 227, 0.42) 50%, rgba(247, 239, 227, 0) 58%) 100% 0% / 300% 300% no-repeat;
  pointer-events: none;
}

.art-tile:hover::after {
  animation: tile-shine 1.2s ease-in-out;
}

@keyframes tile-shine {
  from {
    background-position: 100% 0%;
  }

  to {
    background-position: 0% 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .art-tile:hover::after {
    animation: none;
  }
}

.art-tile__icon {
  width: var(--art-icon);
  height: var(--art-icon);
}

.art-tile__label {
  font-size: var(--text-14);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.forms__collage {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- What is AVOM Bharat ---------- */

.intro {
  position: relative;
  overflow-x: clip;
  padding: var(--space-100) 0 var(--space-120);
}

/* ochre torn-paper strips hugging the section's bottom corners */
.ochre-edge {
  position: absolute;
  bottom: 0;
  width: auto;
  height: var(--partner-edge);
  pointer-events: none;
}

.ochre-edge--left {
  left: 0;
}

/* in the hero and Contact Us the strips are kept smaller, behind the content */
.hero .ochre-edge,
.page-hero .ochre-edge,
.soon-section .ochre-edge,
.impact .ochre-edge,
.contact .ochre-edge {
  height: var(--hero-edge);
}

/* both strips are kept a quarter smaller, so they stay narrow at the page edges */
.hero .ochre-edge--left,
.page-hero .ochre-edge--left,
.soon-section .ochre-edge--left,
.impact .ochre-edge--right,
.contact .ochre-edge--right {
  height: calc(var(--hero-edge) * 0.74);
}

/* the Contact Us strip runs down over the poster launch's torn edge, so it meets the red band */
.contact .ochre-edge {
  bottom: calc(var(--launch-tear) * -1);
}

.hero__container {
  position: relative;
  z-index: 1;
}

.ochre-edge--right {
  right: 0;
}

.intro__container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-48);
}

.intro__lead {
  max-width: 760px;
  font-size: var(--text-18);
  color: var(--color-ink-soft);
}

.intro-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-24);
  width: 100%;
  max-width: 1160px;
}

/* the same aged card as the speakers, on its own layer so it can fade */
.intro-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  padding: var(--space-32);
  text-align: center;
}

.intro-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("images/speaker-card-wide.webp") center / 100% 100% no-repeat;
  opacity: var(--speaker-card-opacity);
  pointer-events: none;
}

.intro-card:nth-child(odd) {
  transform: rotate(-0.8deg);
}

.intro-card:nth-child(even) {
  transform: rotate(0.8deg);
}

/* a block-print marigold tucked over the top-right corner of the second card */
.intro-card__flower {
  position: absolute;
  top: calc(var(--marigold) * -0.35);
  right: calc(var(--marigold) * -0.3);
  width: var(--marigold);
  height: auto;
  transform: rotate(14deg);
  pointer-events: none;
}

.intro-card__icon {
  flex: 0 0 auto;
  width: 220px;
  max-width: 100%;
  height: 110px;
  object-fit: contain;
}

.intro-card__text {
  font-size: var(--text-18);
  line-height: var(--lh-snug);
  color: var(--color-ink-soft);
}

.intro-card__text strong {
  color: var(--color-ink);
}

/* ---------- Highlights bento ---------- */

.bento-section {
  padding: var(--space-100) 0;
  background-color: var(--color-red);
  background-image: linear-gradient(var(--crimson-texture-veil), var(--crimson-texture-veil)), url("images/crimson-texture.webp");
  background-position: center;
  background-size: cover;
}

.bento-section__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-20);
}

.tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-8);
  background-color: var(--color-scrap);
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.tile--feature {
  grid-column: span 2;
  grid-row: span 2;
}

.tile--wide {
  grid-column: span 2;
}

.tile__media {
  position: relative;
  overflow: hidden;
}

.tile__img {
  width: 100%;
  height: auto;
  transition: transform 0.6s var(--ease);
}

.tile:hover .tile__img {
  transform: scale(1.04);
}

.tile__body {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-4) var(--space-8) var(--space-8);
}

.tile--feature .tile__body {
  flex: 1 1 auto;
  align-items: center;
  padding: var(--space-20);
  background-color: var(--color-gold);
}

.tile__badge {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-round);
  background-color: var(--color-red);
  font-size: var(--text-20);
  color: var(--color-scrap);
}

.tile--feature .tile__badge {
  width: 56px;
  height: 56px;
  font-size: var(--h5);
}

.tile__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.tile__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-4) var(--space-12);
}

.tile__title {
  font-family: var(--font-poster);
  font-size: var(--h5);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  text-transform: var(--tt-upper);
}

.tile--feature .tile__title {
  font-size: var(--h3);
}

/* the tag sits on the photo as a frosted-glass badge */
.tile__tag {
  position: absolute;
  top: var(--space-12);
  left: var(--space-12);
  z-index: 1;
  padding: var(--space-6) var(--space-12);
  border-radius: var(--radius-round);
  background-color: rgba(21, 21, 21, 0.6);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  font-size: var(--text-12);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  text-transform: capitalize;
  color: var(--color-scrap);
}

.tile__desc {
  font-size: var(--text-14);
  line-height: var(--lh-snug);
  color: var(--color-ink-soft);
}

.tile--feature .tile__desc {
  font-size: var(--text-16);
  color: var(--color-ink);
}

/* ---------- Art market: stalls under striped awnings ---------- */

.market-strip {
  overflow-x: clip;
  padding: var(--space-100) 0;
}

.market-strip__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}

.stall-track {
  --per-view: var(--stalls-per-view);
  padding-bottom: var(--space-4);
}

.stall-card {
  display: flex;
  flex-direction: column;
}

/* painted striped awning over each stall, drawn at its own ratio */
.stall-card__awning {
  position: relative;
  top: var(--awning-drop);
  z-index: 1;
  aspect-ratio: 900 / 217;
  background: url("images/stall-awning.webp") center bottom / 100% 100% no-repeat;
}

.stall-card__frame {
  position: relative;
  isolation: isolate;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-16) var(--space-20);
}

/* the same aged card as the speakers and intro cards */
.stall-card__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("images/speaker-card.webp") center / 100% 100% no-repeat;
  opacity: var(--speaker-card-opacity);
  pointer-events: none;
}

.stall-card__img {
  width: 100%;
  height: auto;
}

.stall-card__tag {
  padding-top: var(--space-8);
  font-size: var(--text-11);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: var(--tt-upper);
  color: var(--color-red);
}

.stall-card__title {
  font-family: var(--font-poster);
  font-size: var(--h5);
  font-weight: var(--fw-regular);
  text-transform: var(--tt-upper);
}

.stall-card__desc {
  font-size: var(--text-14);
  line-height: var(--lh-snug);
  color: var(--color-muted);
}

/* ---------- Speakers: arches on coloured grounds ---------- */

.speakers {
  padding: var(--space-100) 0;
}

/* block-print flowers in the top-right corner, clear of the cards below */
.speakers {
  position: relative;
  overflow-x: clip;
}

.speakers__flowers {
  position: absolute;
  top: var(--flowers-top);
  right: var(--flowers-right);
  width: var(--flowers-size);
  height: auto;
  pointer-events: none;
}

.speakers__container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}

.speakers__note {
  max-width: 560px;
  font-size: var(--text-14);
  font-style: italic;
  color: var(--color-muted);
}

/* speakers drift past on their own; hover or focus pauses them */
/* runs edge to edge: centred in the column and as wide as the viewport (the section clips the overflow) */
.marquee {
  align-self: center;
  width: 100vw;
  overflow: hidden;
  padding: var(--space-8) 0;
}

.marquee__track {
  display: flex;
  gap: var(--slider-gap);
  width: max-content;
  animation: marquee var(--marquee-duration, 90s) linear infinite;
}

.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
  animation-play-state: paused;
}

/* once script.js drives it, the row follows the pointer: drag to scrub, let go to carry on */
.marquee.is-live {
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.marquee.is-live .marquee__track {
  animation: none;
  will-change: transform;
}

.marquee.is-dragging {
  cursor: grabbing;
}

.marquee img {
  -webkit-user-drag: none;
  pointer-events: none;
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* min-width: 0 stops a long one-line name from widening its card (and with it every card's height) */
.speaker-track > .speaker {
  flex: 0 0 var(--speaker-card);
  min-width: 0;
}

/* without motion the row simply scrolls by hand */
@media (prefers-reduced-motion: reduce) {
  .marquee {
    overflow-x: auto;
  }

  .marquee__track {
    animation: none;
  }

  .marquee__track [data-marquee-clone] {
    display: none;
  }
}

.speaker {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-12) var(--space-20);
  position: relative;
  isolation: isolate;
  /* solid page paper under the texture, so nothing behind the card shows through */
  background-color: var(--color-paper);
  border-radius: var(--radius-l);
}

/* the aged-card texture sits on its own layer so its opacity can drop without fading the content */
.speaker::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("images/speaker-card.webp") center / 100% 100% no-repeat;
  opacity: var(--speaker-card-opacity);
  pointer-events: none;
}

.speaker__arch {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 999px 999px 0 0;
  background-color: var(--color-red);
}

.speaker:nth-child(4n + 2) .speaker__arch {
  background-color: var(--color-orange);
}

.speaker:nth-child(4n + 3) .speaker__arch {
  background-color: var(--color-teal);
}

.speaker:nth-child(4n + 4) .speaker__arch {
  background-color: var(--color-gold);
}

/* black-and-white portrait inside the arch; the arch colour shows only around cut-outs */
.speaker__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}

.speaker__mono {
  font-family: var(--font-poster);
  font-size: 72px;
  line-height: var(--lh-tight);
  color: var(--color-scrap);
}

.speaker__group {
  padding-top: var(--space-8);
  font-size: var(--text-11);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: var(--tt-upper);
  color: var(--color-red);
}

.speaker__name {
  font-family: var(--font-display);
  font-size: var(--h6);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-heading);
  /* one line only; long names end in an ellipsis and show in full on hover */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.speaker__role {
  font-size: var(--text-14);
  line-height: var(--lh-snug);
  color: var(--color-muted);
}

.speakers__topics {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
}

/* centred while the tags fit; once they overflow, the row scrolls from its start */
.speakers__topics .tag-list--compact {
  max-width: 100%;
}

.speakers__topics-title {
  font-family: var(--font-poster);
  font-size: var(--h6);
  text-transform: var(--tt-upper);
  color: var(--color-red);
}

/* ---------- Open calls ---------- */

/* Open Calls sits on the crimson print, like the poster launch */
.calls {
  overflow-x: clip;
  padding: var(--space-100) 0;
  background-color: var(--color-red);
  background-image: linear-gradient(var(--crimson-texture-veil), var(--crimson-texture-veil)), url("images/crimson-texture.webp");
  background-position: center;
  background-size: cover;
  color: var(--color-scrap);
}

.calls .section-title {
  color: var(--color-scrap);
}

.calls .calls__text {
  color: rgba(255, 255, 255, 0.85);
}

.calls__container {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-48);
  align-items: center;
}

.calls__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-20);
}

.calls__kicker {
  font-size: var(--text-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: var(--tt-upper);
  color: var(--color-scrap);
}

.calls__actions {
  padding-top: var(--space-8);
}

/* ---------- Ticket fan ---------- */
/* Twelve admission tickets held like a hand of cards. Each turns about a point far below
   the hand; they start squared in a stack and fan out when the section scrolls in. */

.ticket-fan {
  display: flex;
  justify-content: center;
}

/* tall enough for the outer tickets, which swing lower than the middle ones */
.ticket-fan__hand {
  position: relative;
  width: 100%;
  height: calc(var(--ticket-h) * 1.55);
}

.ticket {
  position: absolute;
  top: calc(var(--ticket-h) * 0.1);
  left: calc(50% - var(--ticket-w) / 2);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: var(--ticket-w);
  height: var(--ticket-h);
  padding: var(--space-20) var(--space-16) var(--space-12);
  border-radius: var(--radius-m);
  /* the coloured band is painted inside, so one even hairline can run all the way round */
  border: 1px solid var(--color-line-strong);
  background: linear-gradient(var(--ticket-band) 0 8px, var(--color-paper) 8px);
  color: var(--color-ink);
  transform-origin: 50% var(--fan-pivot);
  transform: rotate(var(--a));
  transition: transform 0.9s var(--ease);
  transition-delay: calc(var(--i) * 45ms);
  cursor: default;
  /* two half-moons cut out of the ticket where the stub tears off */
  -webkit-mask:
    radial-gradient(circle calc(var(--notch) / 2) at 0 76%, transparent 96%, #000 100%) left / 51% 100% no-repeat,
    radial-gradient(circle calc(var(--notch) / 2) at 100% 76%, transparent 96%, #000 100%) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle calc(var(--notch) / 2) at 0 76%, transparent 96%, #000 100%) left / 51% 100% no-repeat,
    radial-gradient(circle calc(var(--notch) / 2) at 100% 76%, transparent 96%, #000 100%) right / 51% 100% no-repeat;
}

/* the hairline that follows each cut: a ring on the ticket's edge, whose outer half the cut hides */
.ticket::before,
.ticket::after {
  content: "";
  position: absolute;
  top: calc(76% - var(--notch) / 2);
  width: var(--notch);
  height: var(--notch);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-round);
}

.ticket::before {
  left: calc(var(--notch) / -2);
}

.ticket::after {
  right: calc(var(--notch) / -2);
}

.ticket:nth-child(4n + 1) {
  --ticket-band: var(--color-red);
}

.ticket:nth-child(4n + 2) {
  --ticket-band: var(--color-teal);
  --ticket-ink: var(--color-teal-deep);
}

.ticket:nth-child(4n + 3) {
  --ticket-band: var(--color-gold);
  --ticket-ink: #8a5a00;
}

.ticket:nth-child(4n + 4) {
  --ticket-band: var(--color-orange);
  --ticket-ink: #a84d06;
}

.ticket:nth-child(1) {
  --i: 0;
  --a: calc(var(--fan-spread) * -1.000);
}

.ticket:nth-child(2) {
  --i: 1;
  --a: calc(var(--fan-spread) * -0.818);
}

.ticket:nth-child(3) {
  --i: 2;
  --a: calc(var(--fan-spread) * -0.636);
}

.ticket:nth-child(4) {
  --i: 3;
  --a: calc(var(--fan-spread) * -0.455);
}

.ticket:nth-child(5) {
  --i: 4;
  --a: calc(var(--fan-spread) * -0.273);
}

.ticket:nth-child(6) {
  --i: 5;
  --a: calc(var(--fan-spread) * -0.091);
}

.ticket:nth-child(7) {
  --i: 6;
  --a: calc(var(--fan-spread) * 0.091);
}

.ticket:nth-child(8) {
  --i: 7;
  --a: calc(var(--fan-spread) * 0.273);
}

.ticket:nth-child(9) {
  --i: 8;
  --a: calc(var(--fan-spread) * 0.455);
}

.ticket:nth-child(10) {
  --i: 9;
  --a: calc(var(--fan-spread) * 0.636);
}

.ticket:nth-child(11) {
  --i: 10;
  --a: calc(var(--fan-spread) * 0.818);
}

.ticket:nth-child(12) {
  --i: 11;
  --a: calc(var(--fan-spread) * 1.000);
}

/* hover lifts a ticket out of the hand */
.ticket:hover {
  transform: rotate(var(--a)) translateY(calc(var(--ticket-h) * -0.14));
  transition-delay: 0s;
}

/* the number and the name run down the ticket's left edge, the part every card keeps in view */
.ticket__kicker {
  position: absolute;
  top: var(--space-20);
  right: var(--space-12);
  font-size: var(--text-10);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: var(--tt-upper);
  color: var(--color-red);
  writing-mode: vertical-rl;
}

.ticket__num {
  font-family: var(--font-poster);
  font-size: var(--h4);
  line-height: var(--lh-tight);
  color: var(--ticket-ink, var(--ticket-band));
}

.ticket__name {
  font-family: var(--font-poster);
  font-size: var(--h6);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
  text-transform: var(--tt-upper);
  writing-mode: vertical-rl;
  align-self: flex-start;
  max-height: calc(var(--ticket-h) * 0.5);
}

/* the perforated stub */
.ticket__stub {
  position: absolute;
  left: var(--space-16);
  right: var(--space-16);
  bottom: var(--space-12);
  padding-top: var(--space-12);
  border-top: 2px dashed var(--color-line-strong);
  font-size: var(--text-10);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  text-transform: var(--tt-upper);
  color: var(--color-muted);
}

/* before the section scrolls in, the hand is a squared stack */
.has-reveal .ticket-fan:not(.is-visible) .ticket {
  transform: rotate(0);
}

/* ---------- Partner band ---------- */

/* Partner With Us sits on the dark print, like the stats band and footer */
.partner-band {
  position: relative;
  overflow-x: clip;
  background-color: var(--color-band);
  background-image: linear-gradient(var(--dark-texture-veil), var(--dark-texture-veil)), url("images/dark-texture.webp");
  background-position: center;
  background-size: cover;
  color: var(--color-on-band);
  padding: var(--space-100) 0;
}

/* ---- dark theme for the partner band ---- */

.partner-band .section-title {
  color: var(--color-scrap);
}

.partner-band .poster-head__text,
.partner-band .big-stat__label {
  color: var(--color-on-band-muted);
}

.partner-band .big-stat__value {
  color: var(--color-gold);
}

.partner-band .big-stat {
  border-left-color: rgba(245, 242, 238, 0.2);
}

.partner-band .text-link {
  color: var(--color-gold);
}

.partner-band .text-link:hover {
  color: var(--color-scrap);
}

/* the cards turn into smoked glass with a hairline, and each icon sits on a cream disc
   so its red line work keeps its contrast */
.partner-band .partner-cell {
  border: 1px solid rgba(245, 242, 238, 0.14);
  border-radius: var(--radius-m);
  background-color: rgba(245, 242, 238, 0.05);
  color: var(--color-on-band);
  transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

.partner-band .partner-cell::before {
  display: none;
}

.partner-band .partner-cell:hover {
  border-color: var(--color-gold);
  background-color: rgba(245, 242, 238, 0.09);
}

.partner-band .partner-cell__title {
  color: var(--color-scrap);
}

.partner-band .partner-cell__desc {
  color: var(--color-on-band-muted);
}

.partner-band .partner-cell__icon {
  width: 56px;
  height: 56px;
  padding: var(--space-8);
  border-radius: var(--radius-round);
  background-color: var(--color-scrap);
}

.partner-band__container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}

/* heading centred, the three numbers centred beneath it */
.partner-band__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
}

.big-stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
}

.big-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-48);
  text-align: center;
  border-left: 1px solid var(--color-line-strong);
}

.big-stat:first-child {
  border-left: 0;
}

.big-stat__value {
  font-family: var(--font-poster);
  font-size: var(--h2);
  line-height: var(--lh-tight);
  color: var(--color-red);
}

.big-stat__label {
  font-size: var(--text-14);
  font-weight: var(--fw-semibold);
  color: var(--color-muted);
}

.partner-band__container > .text-link {
  align-self: center;
}

/* separate aged-paper cards on the wide card texture: no rules, no fill */
.partner-cells {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-16);
}

.partner-cell {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-24);
}

.partner-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("images/speaker-card-wide.webp") center / 100% 100% no-repeat;
  opacity: var(--speaker-card-opacity);
  pointer-events: none;
  transition: opacity var(--duration) var(--ease);
}

.partner-cell:hover::before {
  opacity: calc(var(--speaker-card-opacity) + 0.25);
}

.partner-cell__icon {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
}

.partner-cell__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.partner-cell__title {
  font-family: var(--font-display);
  font-size: var(--h6);
  font-weight: var(--fw-extrabold);
}

.partner-cell__desc {
  font-size: var(--text-14);
  color: var(--color-muted);
}

/* ==========================================================================
   About — the same poster collage as the home page
   ========================================================================== */

.poster-head__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* in a split head the title takes the room and the note keeps to its measure */
.poster-head--split > .poster-head__main {
  flex: 1 1 0;
  min-width: 0;
}

.poster-head--split > .poster-head__text {
  flex: 0 1 440px;
}

.script-line {
  font-family: var(--font-script);
  font-size: var(--h4);
  line-height: var(--lh-snug);
  text-align: center;
  color: var(--color-ink);
}

.script-line--left {
  text-align: left;
}

.script-line__accent {
  color: var(--color-red);
}

.script-line--light {
  color: var(--color-scrap);
}

/* a lighter gold, so the accent still clears 4.5:1 on the crimson at phone sizes */
.script-line--light .script-line__accent {
  color: #f6d27e;
}

/* on the crimson print the small gold eyebrows drop below 4.5:1, so they turn cream */
.activities .eyebrow--light,
.learn .eyebrow--light,
.closing .eyebrow--light {
  color: var(--color-scrap);
}

/* ---------- Page hero ---------- */
/* copy on the left; the dancer stands on a crimson sun on the right, like the home collage */

.page-hero {
  position: relative;
  overflow-x: clip;
  padding: var(--space-24) 0 var(--space-80);
}

/* no gap under the hero, so the next section starts right after it */
.page-hero--flush {
  padding-bottom: 0;
}

.page-hero__container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-48);
  align-items: center;
}

.page-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-20);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
  font-size: var(--text-13);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: var(--tt-upper);
  color: var(--color-muted);
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

/* a small red diamond between the steps, like the bullet lists */
.breadcrumb__item + .breadcrumb__item::before {
  content: "";
  width: 6px;
  height: 6px;
  background-color: var(--color-red);
  transform: rotate(45deg);
}

.breadcrumb__link {
  display: inline-block;
  padding: var(--space-4) 0;
  color: var(--color-ink-soft);
  border-bottom: 1px solid transparent;
  transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.breadcrumb__link:hover {
  color: var(--color-red);
  border-bottom-color: currentColor;
}

.breadcrumb__item[aria-current="page"] {
  color: var(--color-red);
}

.page-hero__title {
  display: flex;
  flex-direction: column;
}

.page-hero__title-main {
  font-family: var(--font-poster);
  font-size: var(--page-title);
  font-weight: var(--fw-regular);
  line-height: 0.92;
  text-transform: var(--tt-upper);
  color: var(--color-ink);
}

.page-hero__title-line {
  display: block;
}

.page-hero__title-script {
  max-width: 11em;
  padding-top: var(--space-12);
  text-wrap: balance;
  font-family: var(--font-script);
  font-size: var(--page-script);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  color: var(--color-red);
  transform: rotate(-3deg);
  transform-origin: left center;
}

.page-hero__lead {
  max-width: 500px;
  font-size: var(--text-17);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--color-ink-soft);
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

.page-hero__media {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: var(--space-24);
}

/* a crimson sun behind the dancer, and a smaller ochre one low on the right */
.page-hero__media::before,
.page-hero__media::after {
  content: "";
  position: absolute;
  border-radius: var(--radius-round);
  pointer-events: none;
}

.page-hero__media::before {
  top: 4%;
  left: 50%;
  width: min(460px, 94%);
  aspect-ratio: 1;
  background-color: var(--color-red);
  background-image: linear-gradient(var(--crimson-texture-veil), var(--crimson-texture-veil)), url("images/crimson-texture.webp");
  background-position: center;
  background-size: cover;
  transform: translateX(-50%);
}

/* tucked against the crimson sun's right edge, wherever the column puts it */
.page-hero__media::after {
  left: calc(50% + min(230px, 47%) - min(110px, 22%));
  bottom: 14%;
  width: min(180px, 36%);
  aspect-ratio: 1;
  background-color: var(--color-orange);
}

.page-hero__image {
  position: relative;
  z-index: 1;
  width: auto;
  height: var(--page-hero-art);
  max-width: 100%;
  object-fit: contain;
}

/* ---------- What is AVOM Bharat ---------- */

.about {
  overflow-x: clip;
  padding: var(--space-120) 0 0;
}

.about__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-48);
}

.about__statement {
  max-width: 760px;
  padding-top: var(--space-8);
  font-family: var(--font-display);
  font-size: var(--h4);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-snug);
}

.about__script {
  padding-right: 0.12em;
  font-family: var(--font-script);
  font-size: 1.15em;
  font-weight: var(--fw-regular);
  color: var(--color-red);
}

.about__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-48);
  max-width: 1100px;
}

.about__text {
  font-size: var(--text-17);
  color: var(--color-ink-soft);
}

.focus {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
  width: 100%;
}

.focus__title {
  font-family: var(--font-poster);
  font-size: var(--h5);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-wide);
  text-transform: var(--tt-upper);
  color: var(--color-red);
}

.focus__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-24);
  width: 100%;
}

/* the tall aged card, turned a little either way; rotate keeps clear of the reveal's transform */
.focus-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-32) var(--space-24);
  text-align: center;
}

.focus-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("images/speaker-card-wide.webp") center / 100% 100% no-repeat;
  opacity: var(--speaker-card-opacity);
  pointer-events: none;
  transition: opacity var(--duration) var(--ease);
}

.focus-card:hover::before {
  opacity: calc(var(--speaker-card-opacity) + 0.25);
}

.focus-card:nth-child(odd) {
  rotate: -1deg;
}

.focus-card:nth-child(even) {
  rotate: 1deg;
}

.focus-card__flower {
  position: absolute;
  top: calc(var(--marigold) * -0.4);
  right: calc(var(--marigold) * -0.25);
  width: var(--marigold);
  height: auto;
  rotate: 14deg;
  pointer-events: none;
}

.focus-card__icon {
  width: 100%;
  max-width: 180px;
  height: 90px;
  object-fit: contain;
}

.focus-card__text {
  font-size: var(--text-16);
  line-height: var(--lh-snug);
  color: var(--color-ink-soft);
}

.focus-card__text strong {
  color: var(--color-ink);
}

/* ---------- Vision & mission ---------- */

.vision {
  padding: var(--space-100) 0 var(--space-120);
}

.vision__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}

.vision__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-24);
}

/* aged cards with a coloured band across the top, like the admission tickets */
.vision-card {
  --band: var(--color-red);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-40);
  overflow: hidden;
  border-radius: var(--radius-l);
  background-color: var(--color-paper);
  box-shadow: inset 0 6px 0 var(--band);
}

.vision-card--alt {
  --band: var(--color-teal-deep);
}

.vision-card::before,
.panel::before,
.zone__col::before,
.contact-card::before,
.impact__card::before,
.why::before,
.team-card::before,
.meaning::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("images/speaker-card-wide.webp") center / 100% 100% no-repeat;
  opacity: var(--speaker-card-opacity);
  pointer-events: none;
  transition: opacity var(--duration) var(--ease);
}

.vision-card__title {
  font-family: var(--font-poster);
  font-size: var(--h4);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  text-transform: var(--tt-upper);
  color: var(--band);
}

.point-list {
  display: flex;
  flex-direction: column;
}

.point {
  display: flex;
  gap: var(--space-20);
  padding: var(--space-20) 0;
  border-top: 1px dashed var(--color-line-strong);
}

.point__num {
  flex: 0 0 var(--faq-num);
  font-family: var(--font-poster);
  font-size: var(--h3);
  line-height: var(--lh-tight);
  color: var(--band);
}

.point__text {
  font-size: var(--text-17);
  color: var(--color-ink);
}

/* ---------- Activities: crimson print ---------- */

.activities,
.learn {
  padding: var(--space-100) 0;
  background-color: var(--color-red);
  background-image: linear-gradient(var(--crimson-texture-veil), var(--crimson-texture-veil)), url("images/crimson-texture.webp");
  background-position: center;
  background-size: cover;
  color: var(--color-scrap);
}

.activities .section-title,
.learn .section-title {
  color: var(--color-scrap);
}

.activities__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}

.activities__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-40);
}

.activities__art {
  flex: 0 0 auto;
  width: 240px;
  height: auto;
  margin-bottom: calc(var(--space-24) * -1);
  rotate: -8deg;
  pointer-events: none;
}

.activity-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-20);
}

/* cream cards like the highlight tiles, a faint poster number in the corner */
.activity {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-32) var(--space-28);
  overflow: hidden;
  background-color: var(--color-scrap);
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: var(--color-ink);
}

.activity__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-round);
  background-color: var(--color-red);
  font-size: var(--text-20);
  color: var(--color-scrap);
}

.activity:hover .activity__badge .ico {
  animation: ico-wiggle 0.6s var(--ease);
}

.activity__num {
  position: absolute;
  top: var(--space-12);
  right: var(--space-20);
  font-family: var(--font-poster);
  font-size: 72px;
  line-height: var(--lh-tight);
  color: rgba(184, 35, 42, 0.12);
}

.activity__title {
  font-family: var(--font-poster);
  font-size: var(--h5);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  text-transform: var(--tt-upper);
}

.activity__desc {
  font-size: var(--text-15);
  line-height: var(--lh-snug);
  color: var(--color-ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  .activity:hover .activity__badge .ico {
    animation: none;
  }
}

/* ---------- Logo story ---------- */

.logo-story {
  overflow-x: clip;
  padding: var(--space-120) 0 0;
}

.logo-story__container {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-80);
  align-items: start;
}

/* the logo holds its place on the left while the meanings scroll past */
.logo-story__mark {
  position: sticky;
  top: var(--space-120);
  isolation: isolate;
  display: flex;
  justify-content: center;
  padding: var(--space-56);
  rotate: -1.5deg;
}

.logo-story__mark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("images/speaker-card.webp") center / 100% 100% no-repeat;
  opacity: 0.7;
  pointer-events: none;
}

.logo-story__flowers {
  position: absolute;
  top: calc(var(--flowers-size) * -0.3);
  right: calc(var(--flowers-size) * -0.3);
  width: var(--flowers-size);
  height: auto;
  rotate: 12deg;
  pointer-events: none;
}

.logo-story__image {
  width: 100%;
  max-width: 340px;
}

.logo-story__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

/* numbered aged cards, like the FAQ */
.meaning-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  counter-reset: meaning;
}

.meaning {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: var(--faq-num) 1fr;
  column-gap: var(--space-16);
  row-gap: var(--space-4);
  padding: var(--space-16) var(--space-24);
  overflow: hidden;
  border-radius: var(--radius-l);
  counter-increment: meaning;
}

.meaning:hover::before {
  opacity: calc(var(--speaker-card-opacity) + 0.25);
}

.meaning::after {
  content: counter(meaning, decimal-leading-zero);
  grid-row: 1 / span 2;
  grid-column: 1;
  font-family: var(--font-poster);
  font-size: var(--h4);
  line-height: var(--lh-heading);
  color: var(--color-red);
}

.meaning__title,
.meaning__text {
  grid-column: 2;
}

.meaning__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-4) var(--space-12);
}

.meaning__key {
  font-family: var(--font-poster);
  font-size: var(--h5);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  letter-spacing: 0.5px;
  text-transform: var(--tt-upper);
  color: var(--color-ink);
}

.meaning__sub {
  font-size: var(--text-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: var(--tt-upper);
  color: var(--color-red);
}

.meaning__text {
  font-size: var(--text-15);
  line-height: var(--lh-snug);
  color: var(--color-ink-soft);
}

/* ---------- Art forms (the home mosaic, without the collage) ---------- */

.forms--page {
  padding-top: var(--space-120);
}

/* ---------- Festival intro: the facts on an admission ticket ---------- */

/* on the dark print, like the stats band and Footfall & Reach; the cream ticket stands out on it */
.fest-intro {
  margin-top: var(--space-100);
  padding: var(--space-100) 0;
  background-color: var(--color-band);
  background-image: linear-gradient(var(--dark-texture-veil), var(--dark-texture-veil)), url("images/dark-texture.webp");
  background-position: center;
  background-size: cover;
  color: var(--color-on-band);
}

.fest-intro .poster-head__script {
  color: var(--color-gold);
}

.fest-intro .text-link {
  color: var(--color-gold);
}

.fest-intro .text-link:hover {
  color: var(--color-scrap);
}

.fest-intro__container {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-64);
  align-items: center;
}

.fest-intro__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-20);
}

.fest-intro__text {
  font-size: var(--text-17);
  color: rgba(255, 255, 255, 0.82);
}

.fest-ticket {
  --stub: 76px;
  --cut: 28px;
  position: relative;
  /* the band around it is dark with light text; the cream ticket keeps dark ink */
  color: var(--color-ink);
  display: flex;
  flex-direction: column;
  padding: var(--space-32) var(--space-32) 0;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-m);
  background: linear-gradient(var(--color-red) 0 10px, var(--color-scrap) 10px);
  rotate: 1.5deg;
  /* two half-moons cut out where the stub tears off */
  -webkit-mask:
    radial-gradient(circle calc(var(--cut) / 2) at 0 calc(100% - var(--stub)), transparent 96%, #000 100%) left / 51% 100% no-repeat,
    radial-gradient(circle calc(var(--cut) / 2) at 100% calc(100% - var(--stub)), transparent 96%, #000 100%) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle calc(var(--cut) / 2) at 0 calc(100% - var(--stub)), transparent 96%, #000 100%) left / 51% 100% no-repeat,
    radial-gradient(circle calc(var(--cut) / 2) at 100% calc(100% - var(--stub)), transparent 96%, #000 100%) right / 51% 100% no-repeat;
}

.fest-ticket__kicker {
  padding-bottom: var(--space-8);
  font-size: var(--text-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: var(--tt-upper);
  color: var(--color-red);
}

.fact-list {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--space-24);
}

.fact-list__row {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--space-16);
  padding: var(--space-16) 0;
  border-top: 1px dashed var(--color-line-strong);
}

.fact-list__label {
  font-size: var(--text-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  line-height: 1.9;
  text-transform: var(--tt-upper);
  color: var(--color-red);
}

.fact-list__value {
  font-family: var(--font-display);
  font-size: var(--text-17);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

/* the perforated stub; its top edge lines up with the two cuts */
.fest-ticket__stub {
  display: flex;
  align-items: center;
  height: var(--stub);
  border-top: 2px dashed var(--color-line-strong);
  text-wrap: balance;
  font-size: var(--text-12);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  text-transform: var(--tt-upper);
  color: var(--color-muted);
}

/* ---------- Stage, screens & installations ---------- */

.programme {
  padding: var(--space-120) 0;
}

.programme__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}

.programme__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "stage install"
    "digital digital";
  gap: var(--space-24);
}

.panel {
  --band: var(--color-red);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-40);
  overflow: hidden;
  border-radius: var(--radius-l);
  background-color: var(--color-paper);
  box-shadow: inset 0 6px 0 var(--band);
}

.panel--stage {
  grid-area: stage;
}

.panel--install {
  --band: var(--color-orange);
  grid-area: install;
}

.panel--digital {
  --band: var(--color-teal-deep);
  grid-area: digital;
}

.panel__kicker {
  font-size: var(--text-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: var(--tt-upper);
  color: var(--color-red);
}

.panel__title {
  font-family: var(--font-poster);
  font-size: var(--h4);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  text-transform: var(--tt-upper);
}

.panel__subtitle {
  font-size: var(--text-13);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: var(--tt-upper);
  color: var(--color-teal-deep);
}

.panel__text {
  font-size: var(--text-16);
  color: var(--color-ink-soft);
}

.panel__note {
  font-size: var(--text-13);
  font-style: italic;
  color: var(--color-muted);
}

.panel__cols {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--space-32);
  padding-top: var(--space-8);
}

.panel__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

/* ---------- Competitions & workshops: crimson print ---------- */

.learn__container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-80);
  align-items: start;
}

.competitions,
.workshops {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.learn__text {
  font-size: var(--text-17);
  color: rgba(255, 255, 255, 0.9);
}

.learn__note {
  font-size: var(--text-14);
  font-style: italic;
  color: rgba(255, 255, 255, 0.85);
}

.tag-list--light .tag {
  padding: var(--space-8) var(--space-16);
  border-color: rgba(250, 245, 238, 0.5);
  background-color: rgba(250, 245, 238, 0.08);
  font-size: var(--text-15);
  font-weight: var(--fw-semibold);
  color: var(--color-scrap);
}

.workshop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-16);
}

.workshop {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-24);
  background-color: var(--color-scrap);
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: var(--color-ink);
}

.workshop__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
  font-family: var(--font-poster);
  font-size: var(--h6);
  font-weight: var(--fw-regular);
  letter-spacing: 0.5px;
  line-height: var(--lh-heading);
  text-transform: var(--tt-upper);
}

.workshop__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-round);
  background-color: var(--color-red);
  font-size: var(--text-20);
  color: var(--color-scrap);
}

/* ---------- Social impact ---------- */

.impact {
  position: relative;
  overflow-x: clip;
  padding: var(--space-120) 0;
}

.impact__container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-64);
  align-items: center;
}

.impact__card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  padding: var(--space-40) var(--space-40) var(--space-40) var(--space-48);
  overflow: hidden;
  border-radius: var(--radius-l);
  background-color: var(--color-paper);
}

/* the red strip of the open FAQ card */
.impact__card::after {
  content: "";
  position: absolute;
  top: var(--space-24);
  bottom: var(--space-24);
  left: 0;
  width: 5px;
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  background-color: var(--color-red);
}

.impact__text {
  font-size: var(--text-19);
  color: var(--color-ink-soft);
}

.impact__text strong {
  color: var(--color-red);
}

/* ---------- Footfall & reach: dark print ---------- */

.reach {
  padding: var(--space-100) 0;
  background-color: var(--color-band);
  background-image: linear-gradient(var(--dark-texture-veil), var(--dark-texture-veil)), url("images/dark-texture.webp");
  background-position: center;
  background-size: cover;
  color: var(--color-on-band);
}

.reach .section-title {
  color: var(--color-scrap);
}

.reach .poster-head__text,
.reach .big-stat__label {
  color: var(--color-on-band-muted);
}

.reach .big-stat__value {
  color: var(--color-gold);
}

.reach .big-stat {
  border-left-color: rgba(245, 242, 238, 0.2);
}

.reach__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
}

.reach__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
}

.reach__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-64);
  align-items: start;
}

.reach__table-wrap,
.outreach {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  min-width: 0;
}

.reach__subtitle {
  font-family: var(--font-poster);
  font-size: var(--h5);
  font-weight: var(--fw-regular);
  letter-spacing: 0.5px;
  text-transform: var(--tt-upper);
  color: var(--color-gold);
}

.reach-table__scroll {
  overflow: hidden;
  border-radius: var(--radius-m);
}

.reach-table {
  background-color: var(--color-scrap);
  color: var(--color-ink);
  font-size: var(--text-16);
}

.reach-table__th {
  padding: var(--space-16) var(--space-20);
  background-color: var(--color-red);
  color: var(--color-scrap);
  font-size: var(--text-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-align: left;
  text-transform: var(--tt-upper);
}

.reach-table__row-head,
.reach-table__td {
  padding: var(--space-16) var(--space-20);
  border-top: 1px solid var(--color-line);
  line-height: var(--lh-snug);
  text-align: left;
  vertical-align: top;
}

.reach-table__row-head {
  font-weight: var(--fw-bold);
}

.reach-table__total .reach-table__row-head,
.reach-table__total .reach-table__td {
  font-weight: var(--fw-extrabold);
  color: var(--color-red);
}

.reach__note {
  font-size: var(--text-13);
  font-style: italic;
  color: var(--color-on-band-muted);
}

.outreach__list {
  display: flex;
  flex-direction: column;
}

.outreach__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-12) 0;
  border-top: 1px solid rgba(245, 242, 238, 0.14);
  font-size: var(--text-16);
  line-height: var(--lh-snug);
}

.outreach__item .ico {
  font-size: var(--text-20);
  color: var(--color-gold);
}

/* ---------- Partners ---------- */

.partners {
  padding: var(--space-120) 0 0;
}

.partners__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}

.partner-cells--detail .partner-cell {
  align-items: flex-start;
}

.why {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: var(--space-48);
  overflow: hidden;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-l);
}

.why__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-20);
}

.why__title {
  font-family: var(--font-poster);
  font-size: var(--h4);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  text-transform: var(--tt-upper);
}

.why__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--space-48);
}

.why__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-16) 0;
  border-top: 1px dashed var(--color-line-strong);
  font-size: var(--text-16);
  line-height: var(--lh-snug);
}

.why__item .ico {
  font-size: var(--text-20);
  color: var(--color-red);
}

/* ---------- Team ---------- */

.team {
  padding: var(--space-100) 0 var(--space-120);
}

.team__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}

/* four across; Core Management takes a crimson double tile, so the grid comes out even */
.team-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-16);
}

.team-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-24);
  overflow: hidden;
  border-radius: var(--radius-m);
}

.team-card:hover::before {
  opacity: calc(var(--speaker-card-opacity) + 0.25);
}

.team-card__num {
  font-family: var(--font-poster);
  font-size: var(--h4);
  line-height: var(--lh-tight);
  color: var(--color-red);
}

.team-card__title {
  font-family: var(--font-display);
  font-size: var(--h6);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-heading);
}

.team-card__desc {
  font-size: var(--text-14);
  line-height: var(--lh-snug);
  color: var(--color-muted);
}

.team-card--lead {
  grid-column: span 2;
  grid-row: span 2;
  justify-content: flex-end;
  padding: var(--space-40);
  background-color: var(--color-red);
  background-image: linear-gradient(var(--crimson-texture-veil), var(--crimson-texture-veil)), url("images/crimson-texture.webp");
  background-position: center;
  background-size: cover;
  color: var(--color-scrap);
}

.team-card--lead::before {
  display: none;
}

.team-card--lead .team-card__num {
  font-size: var(--h1);
  color: var(--color-gold);
}

.team-card--lead .team-card__title {
  font-family: var(--font-poster);
  font-size: var(--h3);
  font-weight: var(--fw-regular);
  text-transform: var(--tt-upper);
}

.team-card--lead .team-card__desc {
  max-width: 420px;
  font-size: var(--text-17);
  color: rgba(255, 255, 255, 0.9);
}

/* ---------- Closing: the poster-launch band ---------- */

.closing .launch__head {
  max-width: 620px;
}

/* a shorter line than the poster launch, so the title sits on two lines beside the art */
.closing .launch__title {
  font-size: var(--h2);
}

/* side by side: the copy takes the left half, the palm and Rajwada fill the right */
@media (min-width: 1101px) {
  .closing .launch__art {
    right: var(--space-24);
    width: 46%;
    height: auto;
    max-width: 46%;
    max-height: 88%;
    object-position: center;
  }
}

.motto-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.motto {
  padding: var(--space-6) var(--space-12);
  border: 1px solid rgba(250, 245, 238, 0.5);
  border-radius: var(--radius-round);
  font-size: var(--text-11);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: var(--tt-upper);
  color: var(--color-scrap);
}

.closing__actions {
  padding-top: var(--space-8);
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track {
    animation: none;
  }
}

/* ==========================================================================
   Client feedback, Sep 2026: festival nights, digital & game zone, open stage,
   expert talks, contact, and the Participate / Passes pages
   ========================================================================== */

.ico--youtube {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8.2C20.8 6.6 19.8 5.6 18.2 5.4C16.3 5.1 14.2 5 12 5S7.7 5.1 5.8 5.4C4.2 5.6 3.2 6.6 3 8.2C2.8 9.5 2.7 10.7 2.7 12S2.8 14.5 3 15.8C3.2 17.4 4.2 18.4 5.8 18.6C7.7 18.9 9.8 19 12 19S16.3 18.9 18.2 18.6C19.8 18.4 20.8 17.4 21 15.8C21.2 14.5 21.3 13.3 21.3 12S21.2 9.5 21 8.2Z'/%3E%3Cpath d='M10 9V15L15.2 12Z' fill='%23000'/%3E%3C/svg%3E");
}

.ico--phone {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3.5H8.5L10.2 8L8 9.5C9 11.7 12.3 15 14.5 16L16 13.8L20.5 15.5V19C20.5 19.8 19.8 20.5 19 20.5C10.9 20 4 13.1 3.5 5C3.5 4.2 4.2 3.5 5 3.5Z'/%3E%3C/svg%3E");
}

.ico--ticket {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5A1.5 1.5 0 0 1 4.5 6H19.5A1.5 1.5 0 0 1 21 7.5V10A2 2 0 0 0 21 14V16.5A1.5 1.5 0 0 1 19.5 18H4.5A1.5 1.5 0 0 1 3 16.5V14A2 2 0 0 0 3 10Z'/%3E%3Cpath d='M15 6.5V8M15 11.2V12.8M15 16V17.5'/%3E%3C/svg%3E");
}

/* ---------- Festival nights: the three big evenings ---------- */

.nights {
  overflow-x: clip;
  padding: var(--space-100) 0;
  background-color: var(--color-band);
  background-image: linear-gradient(var(--dark-texture-veil), var(--dark-texture-veil)), url("images/dark-texture.webp");
  background-position: center;
  background-size: cover;
  color: var(--color-on-band);
}

.nights__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}

.nights__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-24);
}

.night-card {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  padding: var(--space-32);
  border: 1px solid rgba(245, 242, 238, 0.14);
  border-radius: var(--radius-m);
  background-color: rgba(245, 242, 238, 0.05);
  transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

/* the same hairline and gold hover as the partner cards */
.night-card:hover {
  border-color: var(--color-gold);
  background-color: rgba(245, 242, 238, 0.09);
}

.night-card--feature {
  grid-row: span 2;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.night-card__img {
  width: 100%;
  height: 100%;
  min-height: 240px;
  max-height: 360px;
  object-fit: cover;
}

.night-card__icon {
  flex: 0 0 auto;
  width: 88px;
  height: 88px;
  padding: var(--space-12);
  border-radius: var(--radius-round);
  background-color: var(--color-red);
  background-image: linear-gradient(var(--crimson-texture-veil), var(--crimson-texture-veil)), url("images/crimson-texture.webp");
  background-size: cover;
}

.night-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.night-card--feature .night-card__body {
  padding: var(--space-32);
}

.night-card__kicker {
  font-size: var(--text-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: var(--tt-upper);
  color: var(--color-gold);
}

.night-card__title {
  font-family: var(--font-poster);
  font-size: var(--h4);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  text-transform: var(--tt-upper);
  color: var(--color-scrap);
}

.night-card--feature .night-card__title {
  font-size: var(--h3);
}

.night-card__text {
  font-size: var(--text-16);
  line-height: var(--lh-snug);
  color: var(--color-on-band-muted);
}

.nights__note {
  font-size: var(--text-14);
  font-style: italic;
  color: var(--color-on-band-muted);
}

/* ---------- Digital zone & game zone ---------- */

.zone {
  overflow-x: clip;
  padding: var(--space-100) 0 0;
}

.zone__container {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-64);
  align-items: stretch;
}

/* the photo column runs the full height of the copy beside it */
.zone__media {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-24);
}

/* a teal block behind the tilted photo */
.zone__media::before {
  content: "";
  position: absolute;
  inset: 0 var(--space-48) var(--space-48) 0;
  border-radius: var(--radius-l);
  background-color: var(--color-teal-deep);
}

.zone__frame {
  position: relative;
  flex: 1;
  min-height: 420px;
  padding: var(--space-8);
  background-color: var(--color-scrap);
  box-shadow: 0 18px 40px rgba(21, 21, 21, 0.18);
  transform: rotate(-2deg);
}

.zone__img {
  position: absolute;
  inset: var(--space-8);
  width: calc(100% - var(--space-8) * 2);
  height: calc(100% - var(--space-8) * 2);
  object-fit: cover;
}

.zone__badge {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  padding: var(--space-12) var(--space-20);
  border-radius: var(--radius-round);
  background-color: var(--color-red);
  font-family: var(--font-poster);
  font-size: var(--text-18);
  letter-spacing: var(--ls-wide);
  text-transform: var(--tt-upper);
  color: var(--color-scrap);
  transform: rotate(4deg);
}

.zone__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-20);
}

.zone__lead {
  max-width: 620px;
  font-size: var(--text-17);
  color: var(--color-ink-soft);
}

.zone__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-24);
  width: 100%;
}

/* the aged-paper card print of the intro cards sits behind each column */
.zone__col {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-24);
  border-radius: var(--radius-l);
  background-color: var(--color-card);
}

.zone__col-title {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-poster);
  font-size: var(--h5);
  font-weight: var(--fw-regular);
  text-transform: var(--tt-upper);
}

.zone__col-title .ico {
  color: var(--color-red);
}

/* ---------- Art market: without the fee headings the title keeps the spacing ---------- */

.stall-card__title {
  padding-top: var(--space-8);
}

/* ---------- Open stage: teal band ---------- */

.stage-call {
  overflow-x: clip;
  padding: var(--space-100) 0;
  background-color: var(--color-band);
  background-image: linear-gradient(var(--dark-texture-veil), var(--dark-texture-veil)), url("images/dark-texture.webp");
  background-position: center;
  background-size: cover;
  color: var(--color-on-band);
}

.stage-call__container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-80);
  align-items: center;
}

.stage-call__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-20);
}

.stage-call .section-title {
  color: var(--color-scrap);
}

.stage-call__script {
  font-family: var(--font-script);
  font-size: var(--h4);
  color: var(--color-gold);
  transform: rotate(-2deg);
}

.stage-call__text {
  max-width: 560px;
  font-size: var(--text-17);
  color: rgba(255, 255, 255, 0.9);
}

.stage-acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  padding-top: var(--space-8);
}

.stage-act {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-6) var(--space-16) var(--space-6) var(--space-6);
  border: 2px solid var(--color-gold);
  border-radius: var(--radius-round);
  background-color: var(--color-red);
  background-image: linear-gradient(var(--crimson-texture-veil), var(--crimson-texture-veil)), url("images/crimson-texture.webp");
  background-size: cover;
  font-size: var(--text-14);
  font-weight: var(--fw-bold);
  color: var(--color-scrap);
}

.stage-act__icon {
  width: 36px;
  height: 36px;
}

.stage-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: var(--space-40);
  border-radius: var(--radius-l);
  background-color: var(--color-paper);
  background-image: linear-gradient(var(--paper-texture-veil), var(--paper-texture-veil)), url("images/ivory-paper.webp");
  background-size: auto, 1672px auto;
  box-shadow: inset 0 6px 0 var(--color-gold);
  color: var(--color-ink);
}

.stage-steps__title {
  font-family: var(--font-poster);
  font-size: var(--h4);
  font-weight: var(--fw-regular);
  text-transform: var(--tt-upper);
}

.stage-steps__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.stage-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-16);
  align-items: start;
}

.stage-step__num {
  font-family: var(--font-poster);
  font-size: var(--h3);
  line-height: var(--lh-tight);
  color: var(--color-red);
}

.stage-step__name {
  font-size: var(--text-17);
  font-weight: var(--fw-bold);
}

.stage-step__text {
  font-size: var(--text-15);
  line-height: var(--lh-snug);
  color: var(--color-ink-soft);
}

.stage-steps__note {
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-line);
  font-size: var(--text-13);
  font-style: italic;
  color: var(--color-muted);
}

/* ---------- Expert talks & seminars: a heading of its own ---------- */

.speakers__topics {
  gap: var(--space-20);
  padding-top: var(--space-24);
  text-align: center;
}

.speakers__topics-title {
  font-size: var(--h2);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  color: var(--color-ink);
}

.speakers__topics-text {
  max-width: 560px;
  font-size: var(--text-16);
  color: var(--color-muted);
}

.tag-list--center {
  justify-content: center;
  max-width: 1000px;
}

.tag-list--center .tag {
  padding: var(--space-8) var(--space-20);
  font-size: var(--text-15);
  font-weight: var(--fw-semibold);
  background-color: var(--color-card);
}

/* ---------- Contact ---------- */

.contact {
  position: relative;
  z-index: 2;
  overflow-x: clip;
  padding: var(--space-100) 0;
}

.contact__container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-20);
}

/* the aged-paper card print of the intro cards sits behind each card */
.contact-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-32) var(--space-24);
  border-radius: var(--radius-l);
  background-color: var(--color-card);
  box-shadow: inset 0 5px 0 var(--color-red);
}

/* the animated gold line icons of the Art Forms tiles, on a crimson disc */
.contact-card__icon {
  width: 68px;
  height: 68px;
  padding: var(--space-8);
  border: 2px solid var(--color-gold);
  border-radius: var(--radius-round);
  background-color: var(--color-red);
  background-image: linear-gradient(var(--crimson-texture-veil), var(--crimson-texture-veil)), url("images/crimson-texture.webp");
  background-position: center;
  background-size: cover;
}

.contact-card__label {
  font-size: var(--text-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: var(--tt-upper);
  color: var(--color-muted);
}

.contact-card__value {
  font-size: var(--text-17);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}

a.contact-card__value:hover {
  color: var(--color-red);
}

.contact-card__note {
  font-size: var(--text-14);
  color: var(--color-muted);
}

.contact-card__soon {
  padding: var(--space-4) var(--space-12);
  border: 1px dashed var(--color-red);
  border-radius: var(--radius-round);
  font-size: var(--text-13);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: var(--tt-upper);
  color: var(--color-red);
}

.contact .social {
  gap: var(--space-8);
}

.contact .social__link {
  border-color: var(--color-line-strong);
  color: var(--color-ink);
}

.contact .social__link:hover {
  background-color: var(--color-red);
  border-color: var(--color-red);
  color: var(--color-scrap);
}

/* ---------- Participate & Passes: launching soon ---------- */

.page-hero--soon .page-hero__media {
  align-items: center;
  min-height: calc(var(--page-hero-art) * 0.88);
}

/* the collage brings its own crimson and orange suns, so the drawn ones step aside */
.page-hero__media--collage::before,
.page-hero__media--collage::after {
  content: none;
}

.page-hero__image--megaphone {
  width: min(470px, 100%);
  height: auto;
  margin-top: var(--space-64);
}

.soon-stamp {
  position: absolute;
  left: 4%;
  top: 8%;
  z-index: 2;
  padding: var(--space-12) var(--space-20);
  border: 3px double var(--color-gold);
  border-radius: var(--radius-s);
  background-color: var(--color-ink);
  font-family: var(--font-poster);
  font-size: var(--h5);
  letter-spacing: var(--ls-wide);
  text-transform: var(--tt-upper);
  color: var(--color-gold);
  transform: rotate(-8deg);
}

/* the passes collage, with the pass details printed onto its blank ticket */
.pass-collage {
  position: relative;
  z-index: 1;
  container-type: inline-size;
  width: min(calc(var(--page-hero-art) * 0.8), 100%);
}

.pass-collage__img {
  display: block;
  width: 100%;
  height: auto;
}

/* sits on the inner panel of the blank ticket and takes its tilt */
.pass-ticket {
  position: absolute;
  left: 53%;
  top: 55.8%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6cqw;
  width: 56%;
  color: var(--color-ink);
  text-align: center;
  transform: translate(-50%, -50%) rotate(-14deg);
}

.pass-ticket__kicker {
  font-size: 2.2cqw;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: var(--tt-upper);
  color: var(--color-red);
}

.pass-ticket__title {
  font-family: var(--font-poster);
  font-size: 5.2cqw;
  line-height: var(--lh-tight);
  text-transform: var(--tt-upper);
}

.pass-ticket__rule {
  align-self: stretch;
  border-top: 2px dashed var(--color-line-strong);
}

.pass-ticket__meta {
  font-size: 2.7cqw;
  font-weight: var(--fw-semibold);
  color: var(--color-ink-soft);
}

.soon-section {
  position: relative;
  overflow-x: clip;
  padding: var(--space-100) 0;
}

/* the same dark print as the footer */
.soon-section--dark {
  background-color: var(--color-band);
  background-image: linear-gradient(var(--dark-texture-veil), var(--dark-texture-veil)), url("images/dark-texture.webp");
  background-position: center;
  background-size: cover;
  color: var(--color-on-band);
}

.soon-section__container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}

.soon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24);
}

.soon-grid--two {
  grid-template-columns: repeat(2, 1fr);
}

.soon-card {
  scroll-margin-top: calc(var(--header-height) + var(--space-24));
}

/* the animated gold line icons of the Art Forms tiles, on a crimson disc */
.soon-card__icon {
  width: 76px;
  height: 76px;
  padding: var(--space-8);
  border: 2px solid var(--color-gold);
  border-radius: var(--radius-round);
  background-color: var(--color-red);
  background-image: linear-gradient(var(--crimson-texture-veil), var(--crimson-texture-veil)), url("images/crimson-texture.webp");
  background-position: center;
  background-size: cover;
}

.soon-card .panel__text {
  flex: 1 1 auto;
}

.soon-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  align-self: flex-start;
  padding: var(--space-6) var(--space-12);
  border: 1px dashed var(--color-red);
  border-radius: var(--radius-round);
  font-size: var(--text-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: var(--tt-upper);
  color: var(--color-red);
}

.soon-pill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-round);
  background-color: currentColor;
  animation: soon-blink 1.6s ease-in-out infinite;
}

/* on the dark band the cards drop their paper and take the hairline and gold hover of the partner cards */
.soon-section--dark .soon-card {
  border: 1px solid rgba(245, 242, 238, 0.14);
  border-radius: var(--radius-m);
  background-color: rgba(245, 242, 238, 0.05);
  box-shadow: none;
  transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

.soon-section--dark .soon-card:hover {
  border-color: var(--color-gold);
  background-color: rgba(245, 242, 238, 0.09);
}

.soon-section--dark .soon-card::before {
  content: none;
}

.soon-section--dark .panel__kicker,
.soon-section--dark .soon-pill {
  color: var(--color-gold);
}

.soon-section--dark .soon-pill {
  border-color: var(--color-gold);
}

.soon-section--dark .panel__title {
  color: var(--color-scrap);
}

.soon-section--dark .panel__text {
  color: var(--color-on-band-muted);
}

@keyframes soon-blink {
  50% {
    opacity: 0.25;
  }
}

@media (prefers-reduced-motion: reduce) {
  .soon-pill::before {
    animation: none;
  }
}

.soon-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-24);
  counter-reset: soon-step;
}

.soon-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-top: var(--space-16);
  border-top: 3px solid var(--color-red);
}

.soon-step__num {
  font-family: var(--font-poster);
  font-size: var(--h3);
  line-height: var(--lh-tight);
  color: var(--color-red);
}

.soon-step__name {
  font-size: var(--text-17);
  font-weight: var(--fw-bold);
}

.soon-step__text {
  font-size: var(--text-15);
  line-height: var(--lh-snug);
  color: var(--color-ink-soft);
}

.notify {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  padding: var(--space-40);
  border-radius: var(--radius-l);
  background-color: var(--color-red);
  background-image: linear-gradient(var(--crimson-texture-veil), var(--crimson-texture-veil)), url("images/crimson-texture.webp");
  background-position: center;
  background-size: cover;
  color: var(--color-scrap);
}

.notify__title {
  font-family: var(--font-poster);
  font-size: var(--h4);
  font-weight: var(--fw-regular);
  text-transform: var(--tt-upper);
  color: var(--color-scrap);
}

.notify__text {
  font-size: var(--text-16);
  color: rgba(255, 255, 255, 0.86);
}

/* a red button would vanish on the crimson print, so it turns ink */
.notify .btn--accent {
  background-color: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-scrap);
}

.notify .btn--accent:hover {
  background-color: var(--color-scrap);
  border-color: var(--color-scrap);
  color: var(--color-ink);
}

.notify__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

.nights .poster-head__script {
  color: var(--color-gold);
}

.stage-step__num {
  min-width: 1.4em;
}