/* =========================================================
   LAYER10_ — The Human Network
   Shared design system. One visual language, six accents.
   ========================================================= */

/* ---------- 0. Fonts ----------
   Self-hosted from Google Fonts (SIL Open Font Licence): Exo 2, Inter and
   Permanent Marker, latin and latin-ext subsets, variable weights where
   available. No third-party request is made to show text. */
@font-face {
  font-family: 'Exo 2'; font-style: italic; font-weight: 700; font-display: swap;
  src: url("../fonts/exo2-italic-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Exo 2'; font-style: italic; font-weight: 700; font-display: swap;
  src: url("../fonts/exo2-italic-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Exo 2'; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url("../fonts/exo2-normal-600-800-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Exo 2'; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url("../fonts/exo2-normal-600-800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/inter-normal-400-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/inter-normal-400-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Permanent Marker'; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/permanentmarker-normal-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. Tokens ---------- */
:root {
  /* Ground */
  --ink:        #080F1A;   /* midnight */
  --panel:      #101827;   /* deep panel */
  --panel-2:    #19212F;   /* raised panel */
  --line:       rgba(160, 201, 233, 0.16);
  --line-soft:  rgba(160, 201, 233, 0.09);

  /* Text */
  --text:       #F4F7FF;
  --muted:      #AAB7CA;

  /* Brand accents */
  --lime:       #B7FF65;
  --cyan:       #00E5FF;
  --pink:       #FF2E9E;
  --violet:     #C77BFF;
  --amber:      #FFE052;
  --green:      #42E895;

  /* Per-page accent — overridden on <body data-accent> */
  --accent:     var(--lime);
  --accent-dim: color-mix(in srgb, var(--accent) 45%, var(--ink));
  --accent-ink: color-mix(in srgb, var(--accent) 14%, transparent);

  /* Type */
  --display: "Exo 2", "Segoe UI", Arial, Helvetica, sans-serif;
  --body:    "Inter", "Segoe UI", Arial, Helvetica, sans-serif;

  /* Layout */
  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 48px);
  --radius: 16px;
  --radius-lg: 22px;
}

body[data-accent="lime"]   { --accent: var(--lime); }
body[data-accent="cyan"]   { --accent: var(--cyan); }
body[data-accent="pink"]   { --accent: var(--pink); }
body[data-accent="violet"] { --accent: var(--violet); }
body[data-accent="amber"]  { --accent: var(--amber); }
body[data-accent="green"]  { --accent: var(--green); }

/* ---------- 2. Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 400 clamp(15px, 0.5vw + 14px, 17px)/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--display); margin: 0; line-height: 1.05; letter-spacing: -0.035em; }
h1 { font-size: clamp(2.6rem, 7vw, 5.4rem); font-weight: 800; }
h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 800; }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.45rem); font-weight: 700; letter-spacing: -0.02em; }
h4 { font-size: 1rem; font-weight: 700; letter-spacing: 0.01em; }
p  { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; display: block; }
hr { border: 0; border-top: 1px solid var(--line); margin: 48px 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--ink);
  padding: 12px 18px; font-weight: 700; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

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

/* ---------- 3. Layout primitives ---------- */
.wrap { width: min(var(--wrap), 100% - (var(--gutter) * 2)); margin-inline: auto; }

.section { padding: clamp(56px, 8vw, 104px) 0; position: relative; }
.section--tight { padding: clamp(40px, 5vw, 64px) 0; }
.section--panel { background: linear-gradient(180deg, rgba(16,24,39,0) 0%, var(--panel) 12%, var(--panel) 88%, rgba(16,24,39,0) 100%); }
.section + .section { border-top: 1px solid var(--line-soft); }

.stack > * + * { margin-top: 18px; }
.lede { font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--muted); max-width: 62ch; }
.measure { max-width: 68ch; }

.grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* The six protocol-series formats: always 3 per row, 2 rows — never a ragged
   4 + 2 from auto-fit. */
.grid--formats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid--formats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 580px) { .grid--formats { grid-template-columns: 1fr; } }

/* Five across on one row — the technology pillars. Steps down rather than
   wrapping into a ragged auto-fit. */
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 860px) { .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .grid--5 { grid-template-columns: 1fr; } }
/* Four across, then two by two, never three and one. */
.grid--row4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 860px) { .grid--row4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .grid--row4 { grid-template-columns: 1fr; } }
.grid--3x3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .grid--3x3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grid--3x3 { grid-template-columns: 1fr; } }

.split {
  display: grid; gap: clamp(28px, 5vw, 64px);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: start;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* ---------- 4. Small type elements ---------- */
.eyebrow {
  font: 700 0.72rem/1.4 var(--body);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent);
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px;
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--accent), transparent); opacity: 0.5; }
.eyebrow--plain::after { display: none; }

.muted { color: var(--muted); }
.accent { color: var(--accent); }

.code-tag {
  display: inline-block;
  font: 700 0.7rem/1 var(--body);
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted); background: rgba(255,255,255,0.02);
}
.code-tag--accent { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-ink); }

/* ---------- 5. Buttons ---------- */
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: 999px;
  font: 700 0.9rem/1 var(--body); letter-spacing: 0.02em;
  border: 1px solid transparent; cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn--solid { background: var(--accent); color: var(--ink); box-shadow: 0 10px 30px -12px var(--accent); }
.btn--solid:hover { box-shadow: 0 16px 36px -12px var(--accent); }
.btn--ghost { border-color: var(--line); color: var(--text); background: rgba(255,255,255,0.03); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- 6. Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(8, 15, 26, 0.86);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line-soft);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 72px;
}

.wordmark {
  font-family: var(--display); font-weight: 800;
  font-size: 1.45rem; letter-spacing: -0.05em; line-height: 1;
  color: var(--text); text-decoration: none; white-space: nowrap;
}
.wordmark:hover { text-decoration: none; }
.wordmark b { color: var(--lime); font-weight: 800; }
.wordmark small {
  display: block; margin-top: 6px;
  font: 700 0.52rem/1 var(--body); letter-spacing: 0.3em; color: var(--muted);
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  padding: 10px 14px; border-radius: 999px;
  font: 600 0.84rem/1 var(--body); letter-spacing: 0.04em;
  color: var(--muted); text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}
.nav a:hover { color: var(--text); background: rgba(255,255,255,0.05); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--accent); background: var(--accent-ink); }
.nav .nav__cta {
  margin-left: 8px; color: var(--ink); background: var(--accent);
  font-weight: 700;
}
.nav .nav__cta:hover { color: var(--ink); background: var(--accent); filter: brightness(1.08); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line);
  color: var(--text); border-radius: 999px; padding: 10px 16px;
  font: 700 0.78rem/1 var(--body); letter-spacing: 0.14em; cursor: pointer;
}

@media (max-width: 1000px) {
  .nav-toggle { display: inline-block; }
  .nav {
    position: absolute; inset: 100% 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 16px var(--gutter) 24px;
    background: var(--ink);
    box-shadow: 0 24px 40px -20px rgba(0,0,0,0.9);
    border-bottom: 1px solid var(--line);
    display: none;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding: 14px 12px; font-size: 0.95rem; }
  .nav .nav__cta { margin-left: 0; text-align: center; }
}

/* ---------- 7. Hero ---------- */
.hero { position: relative; padding: clamp(56px, 9vw, 120px) 0 clamp(48px, 7vw, 88px); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("../img/wave-spectrum.svg");
  background-size: cover; background-position: center;
  opacity: 0.62; pointer-events: none;
}
/* Scrim: the wave carries the full six-colour palette, so keep it off the copy.
   Weighted left on wide screens (text left, artwork right), top on narrow ones. */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--ink) 0%, rgba(8, 15, 26, 0.94) 44%,
                    rgba(8, 15, 26, 0.55) 64%, rgba(8, 15, 26, 0) 84%),
    radial-gradient(70% 70% at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 70%);
  pointer-events: none;
}
@media (max-width: 1000px) {
  /* The cover-crop magnifies the dots on a phone; ease them back so the
     artwork in front stays the subject. */
  .hero::before { opacity: 0.4; }
  .hero::after {
    background:
      linear-gradient(180deg, rgba(8, 15, 26, 0.9) 0%, rgba(8, 15, 26, 0.55) 55%, rgba(8, 15, 26, 0.1) 100%),
      radial-gradient(70% 70% at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 70%);
  }
}
.hero > * { position: relative; z-index: 1; }

.hero__title { margin-bottom: 20px; }
.hero__title .mark { color: var(--accent); }
.hero__promise {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.2rem, 2.4vw, 1.9rem);
  color: var(--accent); letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.hero__art { display: grid; place-items: center; }
.hero__art img { width: min(320px, 70%); filter: drop-shadow(0 20px 50px color-mix(in srgb, var(--accent) 30%, transparent)); }

/* Big logotype lockup used on home + event pages */
.logotype {
  font-family: var(--display); font-weight: 800;
  letter-spacing: -0.055em; line-height: 0.92;
  font-size: clamp(3rem, 11vw, 7.5rem);
}
.logotype .ten  { color: var(--lime); }
.logotype .bar  { color: var(--lime); }
.logotype--event { font-size: clamp(3.4rem, 12vw, 8.5rem); }
.logotype--event .ten, .logotype--event .bar { color: var(--accent); }
.logotype__kicker {
  display: block; margin-top: 16px;
  font: 700 clamp(0.7rem, 1.4vw, 0.9rem)/1 var(--body);
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--muted);
}

/* Home hero: copy beside the community orbit.
   The wave is at full strength here, so lay a scrim over the text column —
   the colour still reads on the orbit side where there is nothing to obscure. */
/* Home hero: copy beside the community orbit */
.hero--home__inner {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 72px);
}
.hero--home__inner .lede { max-width: 46ch; }
.hero--home__art { min-width: 0; }
@media (max-width: 1000px) {
  .hero--home__inner { grid-template-columns: 1fr; }
  .hero--home__art { margin-top: 24px; max-width: 520px; margin-inline: auto; width: 100%; }
}

/* ---------- 7b. Community orbit ---------- */
.orbit { width: 100%; height: auto; overflow: visible; }

.orbit__ring { fill: none; stroke: rgba(160, 201, 233, 0.3); stroke-width: 1; }
.orbit__ring--out {
  stroke-dasharray: 2 10; stroke-linecap: round;
  transform-origin: 320px 280px;
  animation: orbit-spin 64s linear infinite;
}
.orbit__ring--in {
  stroke-dasharray: 1 7; stroke-linecap: round;
  transform-origin: 320px 280px;
  animation: orbit-spin 48s linear infinite reverse;
}
.orbit__ring--mid { stroke: rgba(160, 201, 233, 0.18); }

.orbit__spoke { stroke-width: 1.1; opacity: 0.3; }

/* A signal travelling from the core out to each community. */
.orbit__pulse {
  stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 16 360; stroke-dashoffset: 16;
  animation: orbit-pulse 4.4s linear infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes orbit-pulse {
  0%   { stroke-dashoffset: 16;   opacity: 0; }
  12%  { opacity: 0.95; }
  70%  { opacity: 0.95; }
  100% { stroke-dashoffset: -140; opacity: 0; }
}
@keyframes orbit-spin { to { transform: rotate(360deg); } }

.orbit__dot  { fill: var(--c); }
.orbit__halo {
  fill: var(--c); opacity: 0.14;
  transform-box: fill-box; transform-origin: center;
  animation: orbit-halo 4.4s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes orbit-halo {
  0%, 55%, 100% { transform: scale(0.82); opacity: 0.12; }
  72%           { transform: scale(1.15); opacity: 0.30; }
}

.orbit__label {
  font: 700 14px/1 var(--body);
  letter-spacing: 0.05em; text-transform: uppercase;
}
.orbit__label-sub {
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.1em; fill: var(--muted);
}

.orbit__core { fill: var(--panel); stroke: rgba(183, 255, 101, 0.45); stroke-width: 1.5; }
.orbit__core-glow { fill: rgba(183, 255, 101, 0.07); }
.orbit__core-mark {
  font: 800 30px/1 var(--display); fill: var(--lime); letter-spacing: -0.04em;
}
.orbit__core-sub {
  font: 700 7.4px/1 var(--body); fill: var(--muted); letter-spacing: 0.22em;
}

@media (prefers-reduced-motion: reduce) {
  .orbit__pulse { animation: none; opacity: 0.55; stroke-dasharray: none; stroke-width: 1.4; }
  .orbit__halo  { animation: none; opacity: 0.18; }
  .orbit__ring--out, .orbit__ring--in { animation: none; }
}

@media (max-width: 460px) {
  .orbit__label { font-size: 16px; }
  .orbit__label-sub { font-size: 13px; }
}

/* ---------- 8. Ticker ---------- */
.ticker {
  border-block: 1px solid var(--line-soft);
  background: rgba(255,255,255,0.015);
  overflow: hidden;
}
.ticker__line {
  display: flex; gap: 14px; align-items: center;
  padding: 14px 0; flex-wrap: wrap;
  font: 700 0.72rem/1 var(--body); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted);
}
.ticker__line i { color: var(--accent); font-style: normal; }

/* ---------- 9. Cards ---------- */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(22px, 2.4vw, 30px);
  position: relative; overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--item, var(--accent)), transparent);
  opacity: 0.85;
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--muted); }

a.card { color: inherit; text-decoration: none; display: block; }
a.card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--item, var(--accent)) 60%, transparent); text-decoration: none; }

.card__num {
  font: 700 0.7rem/1 var(--body); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--item, var(--accent)); margin-bottom: 14px;
}
.card__link {
  display: inline-block; margin-top: 18px;
  font: 700 0.8rem/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--item, var(--accent));
}

/* Format card (the protocol series) */
.format-card { --item: var(--accent); }
.format-card .format-card__name {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -0.04em;
  color: var(--item); line-height: 1;
}
.format-card .format-card__name span { color: var(--text); font-size: 0.42em; letter-spacing: 0.02em; display: block; margin-bottom: 6px; }
.format-card .format-card__meaning {
  font-family: var(--display); font-weight: 700; font-style: italic;
  color: var(--text); margin: 10px 0 14px; font-size: 1.05rem;
}
.format-card__symbol {
  position: absolute; right: -10px; top: -10px; width: 110px; opacity: 0.16;
  pointer-events: none;
}

/* Pillar card */
.pillar { --item: var(--accent); }
.pillar__code {
  font-family: var(--display); font-weight: 800; font-size: 1.7rem;
  color: var(--item); letter-spacing: -0.03em; margin-bottom: 6px;
}
/* Tighter when five sit on one row */
.grid--5 .pillar { padding: 22px 18px; }
.grid--5 .pillar h3 { font-size: 0.95rem; letter-spacing: 0; line-height: 1.25; }
.grid--5 .pillar p { font-size: 0.86rem; line-height: 1.55; }
.grid--5 .pillar .pillar__code { font-size: 1.45rem; }
.grid--5 .pillar .card__num { font-size: 0.62rem; letter-spacing: 0.16em; margin-bottom: 10px; }

/* Spec list used on event pages */
.spec { border-top: 1px solid var(--line); margin-top: 28px; }
.spec__row {
  display: grid; grid-template-columns: 200px minmax(0, 1fr);
  gap: 10px 32px; padding: 20px 0; border-bottom: 1px solid var(--line);
}
.spec__row dt {
  font: 700 0.72rem/1.5 var(--body); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin: 0;
}
.spec__row dd { margin: 0; color: var(--text); }
@media (max-width: 640px) { .spec__row { grid-template-columns: 1fr; } }

/* Numbered flow (every format page, plus the agenda spec list beside it) */
.flow { counter-reset: step; display: grid; gap: 14px; padding: 0; margin: 0; list-style: none; }
.flow li {
  counter-increment: step;
  display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 18px;
  align-items: start;
  padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel);
}
.flow li::before {
  content: counter(step, decimal-leading-zero);
  font: 800 0.95rem/1.6 var(--display); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 10px; text-align: center; background: var(--accent-ink);
  padding: 4px 0;
}
.flow li strong { grid-column: 2; display: block; margin-bottom: 4px; }
.flow li span { grid-column: 2; color: var(--muted); display: block; }

/* Rules list */
.rules { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.rules li { position: relative; padding-left: 30px; color: var(--muted); }
.rules li::before {
  content: ""; position: absolute; left: 6px; top: 0.62em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px var(--accent-ink);
}
.rules li strong { color: var(--text); }
.rules--no { }
.rules--no li::before { background: var(--pink); box-shadow: 0 0 0 4px rgba(255,46,158,0.14); }

/* Table */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 0.95rem; }
th, td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th { font: 700 0.72rem/1.4 var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); background: rgba(255,255,255,0.025); }
tr:last-child td { border-bottom: 0; }
td strong { color: var(--text); }

/* Callout */
.callout {
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: var(--accent-ink);
  border-radius: var(--radius);
  padding: clamp(20px, 2.4vw, 28px);
}
.callout h3, .callout__title { color: var(--accent); margin-bottom: 8px; }
.callout__title { font-size: clamp(1.2rem, 1.8vw, 1.45rem); }

.note {
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 18px; color: var(--muted); font-size: 0.95rem;
}

/* Big quote / statement */
.statement {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.7rem, 4vw, 3rem); letter-spacing: -0.035em; line-height: 1.08;
}
.statement em { font-style: normal; color: var(--accent); }

/* ---------- 9a. Stat strip ---------- */
/* Only used where a format's numbers are real. Four big figures do more for an
   enterprise reader deciding in ten seconds than four paragraphs do. */

.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
  margin-top: 40px; padding: clamp(24px, 3vw, 36px) 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.stat__num {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: 0.9;
  letter-spacing: -0.05em; color: var(--accent);
}
.stat__label {
  margin-top: 12px; color: var(--muted);
  font-size: 0.9rem; line-height: 1.4; max-width: 22ch;
}
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; } }

/* ---------- 9a2. Cross-link card ---------- */
/* Sends somebody who is on the wrong format page to the right one. Takes the
   TARGET format's colour, so it reads as a pointer elsewhere rather than as
   part of the page it sits on. */

.crosslink {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 40px); align-items: center;
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background:
    radial-gradient(70% 150% at 0% 0%, color-mix(in srgb, var(--item) 16%, transparent) 0%, transparent 62%),
    var(--panel);
  text-decoration: none; color: inherit;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.crosslink:hover {
  text-decoration: none; transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--item) 45%, transparent);
}
.crosslink__symbol {
  width: clamp(58px, 7vw, 92px); height: auto;
  filter: drop-shadow(0 12px 28px color-mix(in srgb, var(--item) 30%, transparent));
}
.crosslink__kicker {
  font: 700 0.68rem/1 var(--body); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 12px;
}
.crosslink__name {
  font-family: var(--display); font-weight: 800; letter-spacing: -0.03em;
  font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1; color: var(--item);
}
.crosslink__name span { color: var(--text); font-size: 0.5em; display: block; margin-bottom: 6px; }
.crosslink__meaning {
  font-family: var(--display); font-style: italic; font-weight: 700;
  color: var(--item); margin-top: 10px; font-size: 0.98rem;
}
.crosslink p { color: var(--muted); margin-top: 14px; max-width: 58ch; }
.crosslink__go {
  font: 700 0.78rem/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--item); white-space: nowrap;
}
@media (max-width: 820px) {
  .crosslink { grid-template-columns: auto minmax(0, 1fr); }
  .crosslink__go { grid-column: 2; }
}
@media (max-width: 520px) {
  .crosslink { grid-template-columns: 1fr; }
  .crosslink__go { grid-column: 1; }
  .crosslink__symbol { width: 56px; }
}

/* ---------- 9a3. Journey (roadmap) ---------- */
/* The run-of-event steps as a route rather than a list: a traced spine with a
   packet running down it, numbered stops either side and a filled node at the
   destination. Collapses to a single left-hand rail under 880px, where an
   alternating layout stops being legible. Motion is decorative and is removed
   entirely under prefers-reduced-motion. */

.journey { position: relative; margin-top: 44px; --spine: 50%; }

/* the trace itself: a solid gradient with a dashed overlay on top of it */
.journey::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: var(--spine);
  width: 2px; transform: translateX(-50%); border-radius: 2px;
  background-image:
    repeating-linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 70%, transparent) 0 7px,
      transparent 7px 14px),
    linear-gradient(180deg,
      transparent 0%,
      color-mix(in srgb, var(--accent) 26%, transparent) 6%,
      color-mix(in srgb, var(--accent) 26%, transparent) 94%,
      transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}

/* the packet: one signal travelling the whole route */
.journey::after {
  content: ""; position: absolute; left: var(--spine); top: 0;
  width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent),
              0 0 22px 3px color-mix(in srgb, var(--accent) 70%, transparent);
  animation: journey-packet 7s cubic-bezier(0.65, 0.05, 0.35, 0.95) infinite;
}
@keyframes journey-packet {
  0%   { top: 2%;  opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { top: 98%; opacity: 0; }
}

.journey__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(16px, 2.2vw, 26px);
}
.journey__step { display: grid; grid-template-columns: 1fr 86px 1fr; align-items: center; }

.journey__node {
  grid-column: 2; grid-row: 1; justify-self: center; z-index: 1;
  width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink);
  border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 0 7px var(--ink),
              0 0 0 8px color-mix(in srgb, var(--accent) 16%, transparent),
              0 0 30px -6px var(--accent);
  font: 800 0.8rem/1 var(--body); letter-spacing: 0.06em; color: var(--accent);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* the destination reads as arrived at, not as another stop on the way */
.journey__step:last-child .journey__node {
  background: var(--accent); color: var(--ink);
  border-color: var(--accent);
  box-shadow: 0 0 0 7px var(--ink),
              0 0 0 8px color-mix(in srgb, var(--accent) 26%, transparent),
              0 0 36px -4px var(--accent);
}

.journey__card {
  grid-column: 1; grid-row: 1; position: relative;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(18px, 2vw, 24px);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.journey__step:nth-child(even) .journey__card { grid-column: 3; }
.journey__step:hover .journey__card {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  transform: translateY(-2px);
}
.journey__step:hover .journey__node { transform: scale(1.06); }

/* spur from the card out to the trace, with a dot where it leaves the card */
.journey__card::after {
  content: ""; position: absolute; top: 50%; width: 22px; height: 1px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 60%, transparent), transparent);
  right: -22px;
}
.journey__card::before {
  content: ""; position: absolute; top: 50%; width: 6px; height: 6px;
  margin-top: -3px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 70%, transparent);
  right: -3px;
}
.journey__step:nth-child(even) .journey__card::after {
  right: auto; left: -22px;
  background: linear-gradient(270deg,
    color-mix(in srgb, var(--accent) 60%, transparent), transparent);
}
.journey__step:nth-child(even) .journey__card::before { right: auto; left: -3px; }

.journey__card strong {
  display: block; margin-bottom: 6px;
  font-family: var(--display); font-weight: 700; font-size: 1.06rem; letter-spacing: -0.01em;
}
.journey__card span { display: block; color: var(--muted); font-size: 0.95rem; }

@media (max-width: 880px) {
  .journey { --spine: 25px; }
  .journey__step { grid-template-columns: 50px minmax(0, 1fr); gap: 20px; }
  .journey__node { grid-column: 1; justify-self: start; }
  .journey__card,
  .journey__step:nth-child(even) .journey__card { grid-column: 2; }
  .journey__card::after, .journey__card::before,
  .journey__step:nth-child(even) .journey__card::after,
  .journey__step:nth-child(even) .journey__card::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .journey::after { display: none; }
  .journey__step:hover .journey__card,
  .journey__step:hover .journey__node { transform: none; }
}

/* ---------- 9a4. Submission bubbles ---------- */
/* The examples on a format page are things somebody said or sent in, so they
   are drawn as speech rather than as another bulleted list. Tails alternate
   side to side so the group reads as a conversation and not as a column of
   pull quotes. */
.bubbles {
  list-style: none; padding: 0; margin: 30px 0 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 36px;
}
.bubble {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
  border-radius: 18px;
  padding: 18px 22px;
  line-height: 1.5;
}
/* Every other one drops, so the set has the rhythm of a pinboard rather than
   the regularity of a table. */
.bubble:nth-child(even) { margin-top: 26px; }

/* The tail: a rotated square sharing the bubble's fill and two of its edges. */
.bubble::after {
  content: ""; position: absolute; bottom: -8px; left: 32px;
  width: 15px; height: 15px;
  background: inherit;
  border-right: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-bottom-right-radius: 3px;
  transform: rotate(45deg);
}
.bubble:nth-child(even)::after { left: auto; right: 32px; }

/* The last tile is the invitation, so it reads as an empty one waiting to be
   filled in rather than as another submission. */
.bubble--add {
  background: none; border-style: dashed;
  display: flex; align-items: center; justify-content: center;
  text-align: center; min-height: 76px;
}
.bubble--add::after { display: none; }
.bubble--add a { color: var(--accent); font-weight: 600; text-decoration: none; }
.bubble--add a:hover { text-decoration: underline; }

@media (hover: hover) {
  .bubble { transition: transform 0.18s ease, border-color 0.18s ease; }
  .bubble:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--accent) 52%, transparent);
  }
}

@media (max-width: 760px) {
  .bubbles { grid-template-columns: 1fr; gap: 22px; }
  .bubble:nth-child(even) { margin-top: 0; }
  .bubble:nth-child(even)::after { left: 32px; right: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .bubble { transition: none; }
  .bubble:hover { transform: none; }
}

/* ---------- 9a5. Policy grid ---------- */
/* The entry and conduct rules on a format page. Six of them in one bordered
   callout read as a wall of small print beside a short paragraph; across two
   columns with a rule between each row they read as a door policy, which is
   what they are. The cross is pink on every page, the site's colour for a
   thing that does not happen, including on SIP where pink is also the accent. */
.policy {
  list-style: none; padding: 0; margin: 26px 0 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 4vw, 56px);
}
.policy__item {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 16px;
  align-items: start;
  padding: 22px 0;
  border-top: 1px solid var(--line-soft);
}
/* The first row sits under the heading, so it takes the stronger line. */
.policy__item:nth-child(1), .policy__item:nth-child(2) { border-top-color: var(--line); }
.policy__item p { color: var(--muted); margin: 0; }
/* The rule data is one string with the clause in <strong>, so the heading is
   promoted to its own line here rather than in the markup. */
.policy__item strong {
  display: block; margin-bottom: 5px;
  font-family: var(--display); font-weight: 700;
  letter-spacing: -0.01em; color: var(--text);
}
.policy__mark {
  position: relative; width: 30px; height: 30px; margin-top: 2px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--pink) 45%, transparent);
  background: rgba(255, 46, 158, 0.08);
}
.policy__mark::before, .policy__mark::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 11px; height: 1.5px; border-radius: 2px; background: var(--pink);
}
.policy__mark::before { transform: translate(-50%, -50%) rotate(45deg); }
.policy__mark::after  { transform: translate(-50%, -50%) rotate(-45deg); }

@media (max-width: 760px) {
  .policy { grid-template-columns: 1fr; }
  .policy__item:nth-child(2) { border-top-color: var(--line-soft); }
}

/* ---------- 9a6. FAQ ---------- */
/* Native <details>, so it opens with no JavaScript and a find-in-page still
   reaches a closed answer in current browsers. */
.faq { margin-top: 36px; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  position: relative; cursor: pointer; list-style: none;
  padding: 22px 54px 22px 0;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.02rem, 1.5vw, 1.18rem); letter-spacing: -0.01em;
  color: var(--text);
}
.faq__item summary::-webkit-details-marker { display: none; }
/* The two bars of a plus. The upright one turns flat when the answer opens. */
.faq__item summary::before,
.faq__item summary::after {
  content: ""; position: absolute; right: 8px; top: 50%;
  width: 15px; height: 2px; border-radius: 2px;
  background: var(--accent);
  transform: translateY(-50%);
}
.faq__item summary::after { transform: translateY(-50%) rotate(90deg); transition: transform 0.2s ease; }
.faq__item[open] summary::after { transform: translateY(-50%) rotate(0deg); }
.faq__item summary:hover { color: var(--accent); }
.faq__item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.faq__item p {
  margin: -2px 0 0; padding: 0 54px 26px 0;
  max-width: 82ch; color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .faq__item summary::after { transition: none; }
}

/* ---------- 9a7. Edition cards (RTP) ---------- */
/* Two audiences that never share a table, so the cards have to look like two
   different things at a glance: each has its own colour, icon and oversized
   watermark, lists its roles as chips rather than a sentence, and ends on what
   is and is not at that table. --ed is set per card. */
.editions {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.edition {
  --ed: var(--accent);
  position: relative; overflow: hidden; isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--ed) 32%, var(--line));
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 36px);
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--ed) 15%, transparent) 0%, transparent 60%),
    var(--panel);
}
.edition::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--ed), color-mix(in srgb, var(--ed) 10%, transparent));
}
/* The audience name, oversized and faint, so the two cards differ even when
   nobody reads a word of them. */
.edition::after {
  content: attr(data-mark);
  position: absolute; right: -0.04em; bottom: -0.22em; z-index: -1;
  font-family: var(--display); font-weight: 800; letter-spacing: -0.05em;
  font-size: clamp(4.5rem, 9vw, 7.5rem); line-height: 1;
  color: var(--ed); opacity: 0.07; pointer-events: none;
}
.edition__head { display: flex; align-items: center; gap: 16px; }
.edition__icon {
  flex: none; width: 54px; height: 54px; border-radius: 14px;
  display: grid; place-items: center;
  color: var(--ed);
  background: color-mix(in srgb, var(--ed) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--ed) 40%, transparent);
}
.edition__icon svg { width: 26px; height: 26px; }
.edition__label {
  font: 700 0.72rem/1.3 var(--body); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ed); margin: 0 0 4px;
}
.edition h3 { font-size: clamp(1.3rem, 2.1vw, 1.65rem); margin: 0; }
.edition__lede { margin-top: 18px; color: var(--muted); }
.edition__roles {
  list-style: none; padding: 0; margin: 18px 0 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.edition__roles li {
  padding: 6px 12px; border-radius: 999px; font-size: 0.88rem; color: var(--text);
  background: color-mix(in srgb, var(--ed) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--ed) 32%, transparent);
}
.edition__notes {
  list-style: none; padding: 18px 0 0; margin: 22px 0 0;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 0.93rem;
}
.edition__notes li { display: flex; align-items: center; gap: 9px; color: var(--text); }
.edition__notes span {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  font-size: 0.7rem; font-weight: 700;
}
.edition__notes .is-no span {
  color: var(--pink); background: rgba(255, 46, 158, 0.1);
  border: 1px solid rgba(255, 46, 158, 0.4);
}
.edition__notes .is-yes span {
  color: var(--ed); background: color-mix(in srgb, var(--ed) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ed) 45%, transparent);
}

@media (max-width: 820px) {
  .editions { grid-template-columns: 1fr; }
}

/* ---------- 9a8. Chips and the rich agenda ---------- */
/* Short labels in the page accent: SIP's audience list under the hook. */
.chips { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
  padding: 6px 12px; border-radius: 999px; font-size: 0.88rem; color: var(--text);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
}
/* Agenda rows that carry a duration under the time and a line under the title. */
.spec__row--rich dt small {
  display: block; margin-top: 4px;
  font: 500 0.78rem/1.3 var(--body); letter-spacing: 0.02em; text-transform: none;
  color: var(--muted);
}
.spec__row--rich dd strong { display: block; color: var(--text); font-weight: 600; }
.spec__row--rich dd span { display: block; margin-top: 4px; color: var(--muted); font-size: 0.95rem; }

/* ---------- 9a9. Topic vote (MOS) ---------- */
/* An illustrative pick-two vote. Real checkboxes, so it works by keyboard and
   without JavaScript; the script only enforces the limit and copies the
   choices, the same way the nomination form does. The counts are examples
   and say so. */
.vote {
  margin-top: 36px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: var(--radius-lg);
  background: var(--panel);
  padding: clamp(18px, 2.6vw, 30px);
}
.vote__head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.vote__count { font-family: var(--display); font-weight: 700; color: var(--accent); }
.vote__flag {
  font: 600 0.7rem/1.3 var(--body); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px;
}
.vote__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vote__item {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 16px 18px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--ink);
  cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.vote__item:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.vote__item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vote__check {
  width: 24px; height: 24px; border-radius: 7px;
  border: 1.5px solid color-mix(in srgb, var(--accent) 55%, var(--line));
  display: grid; place-items: center;
}
.vote__check::after {
  content: ""; width: 10px; height: 6px; margin-top: -2px;
  border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: rotate(-45deg); opacity: 0;
}
.vote__item:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, var(--ink));
}
.vote__item:has(input:checked) .vote__check { background: var(--accent); border-color: var(--accent); }
.vote__item:has(input:checked) .vote__check::after { opacity: 1; }
.vote__item:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.vote__item:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
.vote__body strong { display: block; color: var(--text); font-weight: 600; }
.vote__tag { display: block; margin-top: 3px; font-size: 0.84rem; color: var(--muted); }
.vote__bar {
  display: block; height: 4px; margin-top: 10px; border-radius: 4px;
  background: var(--line-soft); overflow: hidden;
}
.vote__bar i { display: block; height: 100%; border-radius: 4px; background: var(--accent); opacity: 0.75; }
.vote__num {
  font-family: var(--display); font-weight: 800; font-size: 1.4rem; color: var(--text);
  text-align: right; line-height: 1;
}
.vote__num small {
  display: block; margin-top: 4px;
  font: 500 0.7rem/1.2 var(--body); color: var(--muted); letter-spacing: 0.02em;
}
.vote__foot {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line);
}
.vote__foot .btn[disabled] { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.vote__status { margin: 0; color: var(--muted); font-size: 0.92rem; flex: 1 1 260px; }

@media (max-width: 560px) {
  .vote__item { grid-template-columns: 24px minmax(0, 1fr); }
  .vote__num { grid-column: 2; text-align: left; font-size: 1.05rem; }
  .vote__num small { display: inline; margin-left: 6px; }
}

/* ---------- 9a10. Report outline (ICE) ---------- */
/* ICE's output is a written report, so it is drawn as one: a cover with a
   contents list, sitting on two offset pages so it reads as a document rather
   than as one more card. */
.report {
  position: relative; max-width: 440px; justify-self: center; width: 100%;
  margin: 0 20px 20px 0;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 14px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 45%),
    var(--panel-2);
  box-shadow:
    10px 10px 0 -1px var(--panel), 10px 10px 0 0 var(--line),
    20px 20px 0 -1px var(--ink), 20px 20px 0 0 var(--line-soft),
    0 30px 60px rgba(0, 0, 0, 0.35);
}
.report__kicker {
  font: 700 0.68rem/1.4 var(--body); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin: 0;
}
.report__name {
  margin: 14px 0 0;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.8rem, 3.4vw, 2.5rem); letter-spacing: -0.03em; line-height: 0.98;
  color: var(--text);
}
.report__name span { color: var(--accent); }
.report__sub { margin: 12px 0 0; color: var(--muted); font-size: 0.95rem; }
.report__list { list-style: none; padding: 0; margin: 22px 0 0; }
.report__list li {
  display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: baseline;
  padding: 12px 0; border-top: 1px solid var(--line);
  color: var(--text); font-weight: 600;
}
.report__list span {
  font-family: var(--display); font-weight: 800; color: var(--accent); font-size: 0.95rem;
}
.report__foot {
  margin: 4px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 0.82rem; color: var(--muted);
}
@media (max-width: 900px) {
  .report { justify-self: start; margin-top: 12px; }
}

/* ---------- 9a11. Capability profile (SYNC) ---------- */
/* An example of what a partner shares in the Capability Exchange. What they
   offer is solid, in the accent; what they need is drawn as open, dashed
   slots waiting to be filled by somebody else. */
.capability {
  max-width: 880px; margin: 0 auto;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: var(--radius-lg);
  background:
    radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 55%),
    var(--panel);
  padding: clamp(22px, 3vw, 34px);
}
.capability__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.capability__kicker {
  margin: 0; font: 700 0.72rem/1.4 var(--body); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
}
.capability__cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 36px); margin-top: 22px;
}
.capability__col { padding-top: 18px; border-top: 2px solid var(--accent); }
.capability__col--need { border-top: 2px dashed color-mix(in srgb, var(--accent) 60%, transparent); }
.capability__label {
  margin: 0 0 14px; font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.02em; font-size: 1.05rem; color: var(--text);
}
.capability__chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.capability__chips li {
  padding: 8px 14px; border-radius: 999px; font-size: 0.92rem; font-weight: 600; color: var(--ink);
  background: var(--accent);
}
.capability__col--need .capability__chips li {
  color: var(--text); background: transparent;
  border: 1.5px dashed color-mix(in srgb, var(--accent) 70%, transparent);
}
.capability__foot {
  margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 0.88rem; color: var(--muted);
}
@media (max-width: 620px) {
  .capability__cols { grid-template-columns: 1fr; }
}

/* ---------- 9a12. PACKETLOSS: zones, levels, expo ---------- */
/* The four exhibition zones, each in its own spectrum colour, with CPaaS as a
   dashed band underneath running through all of them. */
.zones {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px; margin-top: 36px;
}
.zone {
  --z: var(--accent);
  position: relative; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--z) 34%, var(--line));
  border-radius: var(--radius);
  padding: 24px 20px 22px;
  background:
    radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--z) 14%, transparent) 0%, transparent 60%),
    var(--panel);
}
.zone::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--z);
}
.zone__name {
  margin: 0; font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -0.01em; color: var(--z);
}
.zone p:not(.zone__name) { margin: 10px 0 0; color: var(--muted); font-size: 0.93rem; }
.zone--span {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr); gap: 8px 28px;
  align-items: center;
  border-style: dashed; border-color: color-mix(in srgb, var(--z) 60%, transparent);
}
.zone--span::before {
  background: repeating-linear-gradient(90deg, var(--z) 0 10px, transparent 10px 18px);
}
.zone--span p:not(.zone__name) { margin: 0; }
@media (max-width: 860px) {
  .zones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zone--span { grid-template-columns: 1fr; }
}
@media (max-width: 460px) { .zones { grid-template-columns: 1fr; } }

/* Content levels as a rising staircase, with Level 100 struck out. */
.levels {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px; margin-top: 40px; align-items: end;
}
.level {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: var(--radius);
  padding: 22px 20px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%), var(--panel);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.level:nth-child(1) { min-height: 210px; }
.level:nth-child(2) { min-height: 250px; }
.level:nth-child(3) { min-height: 290px; }
.level:nth-child(4) { min-height: 330px; }
.level__num {
  margin: 0; font-family: var(--display); font-weight: 800; line-height: 1;
  font-size: clamp(2.6rem, 5vw, 3.6rem); letter-spacing: -0.04em; color: var(--accent);
}
.level__name { margin: 8px 0 0; font-weight: 700; color: var(--text); }
.level p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 0.92rem; }
.level--out {
  border-color: rgba(255, 46, 158, 0.4);
  background: rgba(255, 46, 158, 0.05);
}
.level--out .level__num {
  color: var(--muted); text-decoration: line-through;
  text-decoration-color: var(--pink); text-decoration-thickness: 4px;
}
.level__badge {
  align-self: flex-start; margin-bottom: 12px;
  font: 700 0.66rem/1 var(--body); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--pink); border: 1px solid rgba(255, 46, 158, 0.45); border-radius: 999px;
  padding: 6px 9px;
}
@media (max-width: 860px) {
  .levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .level:nth-child(n) { min-height: 0; }
}
@media (max-width: 460px) { .levels { grid-template-columns: 1fr; } }

/* The expo zones as a list beside the copy, each with its zone colour. */
.expo { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.expo li {
  --z: var(--accent);
  padding: 18px 20px 18px 22px; border-radius: var(--radius);
  border: 1px solid var(--line); border-left: 4px solid var(--z);
  background: var(--panel);
}
.expo strong {
  display: block; font-family: var(--display); font-weight: 800; text-transform: uppercase;
  color: var(--z); letter-spacing: 0.01em;
}
.expo span { display: block; margin-top: 4px; color: var(--muted); font-size: 0.93rem; }

/* ---------- 9a13. Discipline pages ---------- */
/* Area cards carry their examples as small outlined chips. */
.area h3 { margin-bottom: 8px; }
.chips--sm { margin-top: 16px; gap: 6px; }
.chips--sm li {
  font-size: 0.8rem; padding: 4px 10px; color: var(--muted);
  background: transparent; border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}

/* What is emerging: numbered, two columns, a rule between rows. */
.trends {
  list-style: none; padding: 0; margin: 36px 0 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 4vw, 56px);
}
.trends li {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px;
  padding: 22px 0; border-top: 1px solid var(--line-soft);
}
.trends li:nth-child(1), .trends li:nth-child(2) { border-top-color: var(--line); }
.trends__num {
  font-family: var(--display); font-weight: 800; font-size: 1.5rem; line-height: 1.1;
  color: var(--accent);
}
.trends strong {
  display: block; color: var(--text); font-family: var(--display); font-weight: 700;
  letter-spacing: -0.01em;
}
.trends p { margin: 6px 0 0; color: var(--muted); }
@media (max-width: 760px) {
  .trends { grid-template-columns: 1fr; }
  .trends li:nth-child(2) { border-top-color: var(--line-soft); }
}

/* PACKETLOSS zones link through to their discipline pages. */
a.zone { text-decoration: none; color: inherit; transition: transform 0.18s ease, border-color 0.18s ease; }
a.zone:hover { transform: translateY(-3px); border-color: var(--z); }
.zone__more { display: inline-block; margin-top: 4px; font-size: 0.85rem; font-weight: 600; color: var(--z); }
@media (prefers-reduced-motion: reduce) { a.zone, a.zone:hover { transition: none; transform: none; } }

/* ---------- 9b. Vendor logo strip ---------- */
.logos__grid {
  list-style: none; margin: 40px 0 0; padding: 0;
  display: grid; gap: 14px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 900px) { .logos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .logos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.logos__item {
  display: grid; gap: 14px; justify-items: center; text-align: center;
  padding: 26px 16px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.logos__item:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: rgba(255,255,255,0.04); }

/* Deliberately not a centred grid: a percentage height on a centred grid item
   resolves against a content-sized area, which lets a square mark balloon. The
   image gets an explicit height instead. */
.logos__mark { display: block; height: 40px; width: 100%; }
/* object-fit rather than max-width/max-height: the supplied marks have wildly
   different aspect ratios (square glyphs through to wide wordmarks), and this
   fits each one into the same box without the intrinsic size fighting it.
   The filter flattens any artwork to white, so the official full-colour SVG
   can be dropped in unmodified. */
.logos__mark img {
  width: 100%; height: 40px;
  object-fit: contain; object-position: center;
  filter: brightness(0) invert(1);
  opacity: 0.72;
  transition: opacity 0.2s ease;
}
.logos__item:hover .logos__mark img { opacity: 1; }
/* Optical balance: a square glyph at 40px reads much heavier than a wide
   wordmark at the same height. */
.logos__mark--glyph img { height: 31px; }

.logos__area {
  font: 700 0.66rem/1.4 var(--body);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
}

/* ---------- 9c. Spectrum wordmark ---------- */
/* The PACKETLOSS mark carries all six protocol-series colours. Used wherever
   the name appears as a logo or a main heading, not for ordinary mentions of
   it in links or body copy.

   The plain colour is declared first so that anything without
   background-clip: text shows the word rather than nothing at all. */
.spectrum-text { color: var(--text); }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .spectrum-text {
    /* inline-block so the gradient box is the word itself, not the line box */
    display: inline-block;
    background-image: linear-gradient(95deg,
      var(--lime)   0%,
      var(--green) 16%,
      var(--cyan)  33%,
      var(--violet) 51%,
      var(--pink)  70%,
      var(--amber) 93%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

/* ---------- 10. Feature band (PACKETLOSS / SIPFACED) ---------- */
.band {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 52px);
  background:
    radial-gradient(90% 120% at 10% 0%, color-mix(in srgb, var(--item, var(--accent)) 22%, transparent) 0%, transparent 60%),
    var(--panel);
}
.band__title {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2rem, 4.6vw, 4.2rem); letter-spacing: -0.05em; line-height: 0.95;
  overflow-wrap: anywhere;
  margin-bottom: 14px;
}
.band__title .soft { color: var(--text); }
.band__title .hot  { color: var(--item, var(--accent)); }

/* (the PACKETLOSS spectrum wordmark lives in section 9c) */
.band__tag {
  font-family: var(--display); font-style: italic; font-weight: 700;
  font-size: clamp(1.05rem, 2vw, 1.4rem); color: var(--item, var(--accent));
  margin-bottom: 18px;
}

/* Price card in the closing band. Only a format with a real, published price
   gets one, which today is SDP alone. */
.band--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.price {
  border: 1px solid color-mix(in srgb, var(--item, var(--accent)) 34%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--ink) 62%, transparent);
  padding: clamp(22px, 2.6vw, 30px);
}
.price__eyebrow {
  font: 700 0.7rem/1.4 var(--body); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--item, var(--accent)); margin-bottom: 10px;
}
.price__amount { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price__num {
  font-family: var(--display); font-weight: 800; line-height: 1;
  font-size: clamp(2.6rem, 5vw, 3.5rem); letter-spacing: -0.04em;
  color: var(--text);
}
.price__unit { color: var(--muted); font-size: 0.95rem; }
.price__title {
  margin: 20px 0 0; padding-top: 20px;
  border-top: 1px solid var(--line);
  font-family: var(--display); font-weight: 700; color: var(--text);
  font-size: 0.98rem; letter-spacing: -0.01em;
}
.price__list {
  list-style: none; padding: 0; margin: 14px 0 0;
  display: grid; gap: 11px; font-size: 0.95rem; color: var(--muted);
}
.price__list li { position: relative; padding-left: 22px; }
.price__list li::before {
  content: ""; position: absolute; left: 1px; top: 0.56em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--item, var(--accent));
}
.price__foot { margin-top: 18px; font-size: 0.85rem; color: var(--muted); opacity: 0.8; }

@media (max-width: 900px) {
  .band--split { grid-template-columns: 1fr; }
}

/* ---------- 10b. SIPFACED: the party treatment ---------- */
/* Deliberately the loudest thing on the site. Everything else is a technical
   community; this is the bar afterwards. */

.band--party {
  background:
    radial-gradient(80% 90% at 85% 10%, rgba(199, 123, 255, 0.30) 0%, transparent 62%),
    radial-gradient(90% 110% at 8% 100%, rgba(255, 46, 158, 0.34) 0%, transparent 60%),
    linear-gradient(150deg, #22102B 0%, var(--panel) 65%);
  border-color: rgba(255, 46, 158, 0.42);
  overflow: hidden;
}
a.band--party:hover {
  border-color: rgba(255, 46, 158, 0.75);
  box-shadow: 0 22px 60px -30px rgba(255, 46, 158, 0.9);
}

/* The chip normally takes the page accent (lime on the home page, cyan on the
   flagship page). Inside the party card it has to be SIPFACED pink. */
.band--party .code-tag--accent {
  color: var(--pink);
  border-color: rgba(255, 46, 158, 0.5);
  background: rgba(255, 46, 158, 0.12);
}

/* Confetti: six dots, one per event colour, drifting slowly. */
.confetti { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
/* Keep the dots behind the copy so one never lands on a word. */
.band--party > *:not(.confetti):not(.beams):not(.party-sound) { position: relative; z-index: 1; }

/* SIPFACED anthem: a small sound button in the corner of the PACKETLOSS card.
   The equaliser bars only move while the track is playing. */
.party-sound {
  position: absolute; top: clamp(16px, 2.4vw, 26px); right: clamp(16px, 2.4vw, 26px); z-index: 2;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 14px 8px 12px; border-radius: 999px; cursor: pointer;
  font: 600 0.8rem/1 var(--body); letter-spacing: 0.04em; color: var(--text);
  background: rgba(8, 15, 26, 0.55); border: 1px solid rgba(255, 46, 158, 0.5);
  backdrop-filter: blur(6px);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.party-sound:hover { border-color: var(--pink); background: rgba(255, 46, 158, 0.16); }
.party-sound:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
.party-sound__eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.party-sound__eq i {
  display: block; width: 3px; height: 4px; border-radius: 1px; background: var(--pink);
}
/* At rest the bars sit at different heights so they read as sound, not as a
   "more" menu, which matters most on a phone where the label is hidden. */
.party-sound__eq i:nth-child(1) { height: 6px; }
.party-sound__eq i:nth-child(2) { height: 11px; }
.party-sound__eq i:nth-child(3) { height: 8px; }
.party-sound[aria-pressed="true"] .party-sound__eq i { animation: party-eq 0.9s ease-in-out infinite; }
.party-sound[aria-pressed="true"] .party-sound__eq i:nth-child(2) { animation-delay: 0.15s; }
.party-sound[aria-pressed="true"] .party-sound__eq i:nth-child(3) { animation-delay: 0.3s; }
@keyframes party-eq { 0%, 100% { height: 4px; } 50% { height: 12px; } }
@media (max-width: 560px) {
  .party-sound { position: relative; top: auto; right: auto; margin-bottom: 18px; }
}
/* On the home page the card is itself a link, and a button cannot sit inside
   a link, so the card and its button share a wrapper and the button sits over
   the card's bottom-right corner, level with "Meet SIPFACED". */
.party-wrap { position: relative; }
.party-wrap > .band { display: block; height: 100%; }
.party-sound--bottom { top: auto; bottom: clamp(20px, 3vw, 34px); }
@media (max-width: 560px) {
  .party-sound--bottom {
    position: absolute; top: auto; right: 16px; bottom: 22px; margin: 0;
    padding: 9px 11px;
  }
  /* Icon only on a phone, so it never collides with the link text. */
  .party-sound--bottom .party-sound__label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  .party-sound[aria-pressed="true"] .party-sound__eq i { animation: none; height: 10px; }
}

/* Disco beams: two light sources just above the top edge, each throwing a fan
   of coloured beams that sweeps slowly back and forth, crossing in the
   middle. Only the beams, no visible fixture. Screen-blended and faded out
   towards the bottom so the copy stays readable. */
.beams {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.55) 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.55) 55%, transparent 100%);
}
.beams::before,
.beams::after {
  content: ""; position: absolute; top: -6%;
  width: 220%; height: 260%; margin-left: -110%;
  transform-origin: 50% 0;
  filter: blur(5px);
  opacity: 0.42;
}
/* Left fixture: pink, amber, violet. */
.beams::before {
  left: 18%;
  background: conic-gradient(at 50% 0%,
    transparent 0deg 136deg,
    rgba(255, 46, 158, 0.95) 136deg 139deg, transparent 142deg 151deg,
    rgba(255, 224, 82, 0.9) 153deg 155.5deg, transparent 158deg 167deg,
    rgba(199, 123, 255, 0.95) 169deg 172deg, transparent 175deg 183deg,
    rgba(255, 46, 158, 0.85) 185deg 187deg, transparent 190deg 360deg);
  animation: beams-left 7s ease-in-out infinite alternate;
}
/* Right fixture: cyan, green, lime. */
.beams::after {
  left: 82%;
  background: conic-gradient(at 50% 0%,
    transparent 0deg 172deg,
    rgba(0, 229, 255, 0.9) 172deg 174.5deg, transparent 177deg 186deg,
    rgba(66, 232, 149, 0.9) 188deg 191deg, transparent 194deg 203deg,
    rgba(183, 255, 101, 0.85) 205deg 207.5deg, transparent 210deg 219deg,
    rgba(0, 229, 255, 0.85) 221deg 223deg, transparent 226deg 360deg);
  animation: beams-right 9s ease-in-out infinite alternate;
}
/* While the anthem plays, main.js feeds the beams from the music: --level is
   the bass, --kick-* swings a fan on each beat and --hue-* changes its colours. */
.beams.is-dancing::before,
.beams.is-dancing::after {
  opacity: calc(0.38 + var(--level, 0) * 0.62);
  scale: calc(1 + var(--level, 0) * 0.08);
  transition: rotate 0.32s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.beams.is-dancing::before {
  rotate: var(--kick-l, 0deg);
  filter: blur(5px) brightness(calc(0.9 + var(--level, 0) * 0.9)) hue-rotate(var(--hue-l, 0deg));
}
.beams.is-dancing::after {
  rotate: var(--kick-r, 0deg);
  filter: blur(5px) brightness(calc(0.9 + var(--level, 0) * 0.9)) hue-rotate(var(--hue-r, 0deg));
}
@keyframes beams-left  { from { transform: rotate(-14deg); } to { transform: rotate(22deg); } }
@keyframes beams-right { from { transform: rotate(16deg); }  to { transform: rotate(-24deg); } }

@media (prefers-reduced-motion: reduce) {
  .beams::before, .beams::after { animation: none; }
}
.confetti i {
  position: absolute; width: 7px; height: 7px; border-radius: 2px;
  opacity: 0.75; animation: confetti-drift 7s ease-in-out infinite;
}
.confetti i:nth-child(1) { background: var(--lime);   top: 12%; left: 88%; transform: rotate(18deg);  animation-delay: 0s; }
.confetti i:nth-child(2) { background: var(--cyan);   top: 70%; left: 92%; transform: rotate(-24deg); animation-delay: .9s; }
.confetti i:nth-child(3) { background: var(--amber);  top: 34%; left: 79%; transform: rotate(40deg);  animation-delay: 1.8s; }
.confetti i:nth-child(4) { background: var(--violet); top: 84%; left: 70%; transform: rotate(-12deg); animation-delay: 2.6s; }
.confetti i:nth-child(5) { background: var(--green);  top: 52%; left: 96%; transform: rotate(32deg);  animation-delay: 3.4s; }
.confetti i:nth-child(6) { background: var(--pink);   top: 8%;  left: 66%; transform: rotate(-38deg); animation-delay: 4.2s; }
@keyframes confetti-drift {
  0%, 100% { transform: translateY(0) rotate(0deg);     opacity: 0.35; }
  50%      { transform: translateY(-12px) rotate(140deg); opacity: 0.9; }
}

/* Lockup: glass + wordmark */
.sipfaced-lockup {
  display: flex; align-items: center; gap: clamp(10px, 1.6vw, 20px);
  margin: 20px 0 16px;
}

.sipfaced-glass {
  width: clamp(44px, 4.6vw, 68px); height: auto; flex: none;
  overflow: visible;
  transform: rotate(-8deg);
  transform-origin: 50% 90%;
  animation: glass-tilt 5.5s ease-in-out infinite;
}
.sipfaced-glass__body,
.sipfaced-glass__sparkle,
.sipfaced-glass__garnish {
  fill: none; stroke-width: 6;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Three brand colours in one icon: pink glass, amber sparkles, green cherry. */
.sipfaced-glass__body { stroke: var(--pink); }
.sipfaced-glass__sparkle {
  stroke: var(--amber); stroke-width: 5;
  animation: sparkle-twinkle 2.6s ease-in-out infinite;
}
.sipfaced-glass__garnish { stroke: var(--green); }
.sipfaced-glass__garnish circle { fill: var(--green); stroke: none; }
@keyframes glass-tilt {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(2deg); }
}
@keyframes sparkle-twinkle {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1; }
}

/* The wordmark: marker script, slanted, neon. */
.sipfaced-word {
  position: relative;
  font-family: "Permanent Marker", "Brush Script MT", cursive;
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  line-height: 0.95;
  letter-spacing: 0.015em;
  color: var(--pink);
  transform: rotate(-3deg) skewX(-7deg);
  transform-origin: left center;
  text-shadow:
    0 0 14px rgba(255, 46, 158, 0.55),
    0 0 38px rgba(255, 46, 158, 0.35);
}
/* Hand-drawn style underline swoosh. */
.sipfaced-word::after {
  content: "";
  position: absolute; left: -3%; right: -6%; bottom: -0.1em;
  height: 0.075em; border-radius: 999px;
  background: var(--pink);
  transform: rotate(-1.4deg);
  box-shadow: 0 0 12px rgba(255, 46, 158, 0.8);
}
/* The flagship page gives it a whole section, so it can shout. */
.sipfaced-lockup--lg .sipfaced-word { font-size: clamp(2.4rem, 6.6vw, 5rem); }
.sipfaced-lockup--lg .sipfaced-glass { width: clamp(48px, 6vw, 84px); }

/* The skew and the underline overhang both reach past the text box. */
.sipfaced-lockup { padding-right: 6%; }

@media (prefers-reduced-motion: reduce) {
  .confetti i, .sipfaced-glass, .sipfaced-glass__sparkle { animation: none; }
  .confetti i { opacity: 0.7; }
}

/* ---------- 11. Form (prototype, no backend) ---------- */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label { font: 700 0.75rem/1.4 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line); border-radius: 12px;
  color: var(--text); font: inherit;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #70809a; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); outline: none; }
.field__hint { font-size: 0.82rem; color: var(--muted); }
.form__status { font-size: 0.9rem; color: var(--accent); min-height: 1.4em; }

/* ---------- 12. Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--panel);
  padding: clamp(40px, 6vw, 72px) 0 32px;
  margin-top: 0;
}
.site-footer__grid {
  display: grid; gap: 32px;
  grid-template-columns: minmax(0, 1.3fr) repeat(auto-fit, minmax(150px, 1fr));
}
.site-footer h4,
.site-footer .site-footer__heading {
  font: 700 0.72rem/1 var(--body); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 16px; text-wrap: initial;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.site-footer ul a { color: var(--text); font-size: 0.92rem; }
.site-footer ul a:hover { color: var(--accent); }
.site-footer__base {
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: 0.82rem; color: var(--muted);
}

/* ---------- 14. Print ---------- */
@media print {
  .site-header, .site-footer, .hero::before { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .band { border: 1px solid #ccc; background: #fff; }
}

/* 9a14 Volunteer page */
.vol-budget { margin-top: 16px; font-size: 0.85rem; color: var(--muted); }
.vol-budget span { font-family: "Exo 2", sans-serif; font-weight: 800; font-size: 1.25rem; color: var(--item, var(--accent)); margin-right: 4px; }
.vol-budgets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 640px) { .vol-budgets { grid-template-columns: 1fr; } }
.vol-order { margin-top: 28px; font-family: "Exo 2", sans-serif; font-weight: 700; font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.5; }
.vol-order span { display: block; }
.vol-order span:first-child { color: var(--accent); }
.vol-order span:last-child { color: var(--muted); }

/* 9a15 Venue activities on SDP and RTP */
.activity__kicker { margin-top: clamp(36px, 4.5vw, 52px); }
.activity { padding-top: 0; }
.activity::before { z-index: 2; }
.activity__media {
  position: relative;
  margin: 0 calc(-1 * clamp(22px, 2.4vw, 30px));
  aspect-ratio: 16 / 10; overflow: hidden;
}
.activity__media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.9);
  transition: transform 0.5s ease;
}
/* Fades the photo into the card so it sits in the dark theme. */
.activity__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 15, 26, 0) 45%, var(--panel) 100%);
}
.activity:hover .activity__media img { transform: scale(1.04); }
.activity__icon {
  position: relative; z-index: 1;
  display: inline-grid; place-items: center; width: 48px; height: 48px;
  margin: -24px 0 14px;
  border-radius: 14px; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
@media (prefers-reduced-motion: reduce) { .activity:hover .activity__media img { transform: none; } }

/* 9a16 Benefactors page */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Anchored sections land below the sticky header and the page's own sub-nav. */
.anchor { scroll-margin-top: 130px; }

.subnav {
  position: sticky; top: 72px; z-index: 40;
  background: rgba(8, 15, 26, 0.9); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
.subnav__inner {
  display: flex; gap: 6px; align-items: center; min-height: 52px;
  overflow-x: auto; scrollbar-width: none;
}
.subnav__inner::-webkit-scrollbar { display: none; }
.subnav a {
  flex: 0 0 auto; padding: 8px 14px; border-radius: 999px;
  font: 600 0.85rem/1 var(--body); color: var(--muted); text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease;
}
.subnav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.subnav a.subnav__cta { margin-left: auto; color: var(--ink); background: var(--accent); }

.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
@media (max-width: 900px) { .tiers { grid-template-columns: 1fr; } }
.tier { position: relative; display: flex; flex-direction: column; }
.tier .price__eyebrow { color: var(--item); }
.tier .price__list { flex: 1; margin-bottom: 24px; }
.tier .price__list li::before { background: var(--item); }
.tier .btn { align-self: flex-start; }
.tier__summary { margin-top: 14px; color: var(--muted); font-size: 0.95rem; }
.tier:last-child {
  background: linear-gradient(180deg, color-mix(in srgb, var(--item) 10%, transparent), transparent 60%),
              color-mix(in srgb, var(--ink) 62%, transparent);
  box-shadow: 0 0 60px -30px var(--item);
}
.tier__badge {
  position: absolute; top: -11px; right: 22px;
  padding: 5px 10px; border-radius: 999px;
  font: 700 0.66rem/1 var(--body); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink); background: var(--item);
}

.bf-table td:not(:first-child), .bf-table th:not(:first-child) { text-align: center; }
.bf-table td.tick { color: var(--accent); font-weight: 800; font-size: 1.1rem; }
.bf-table td.nope { color: #4a5870; }

.sponsor__price {
  font: 800 1.45rem/1.1 var(--display); color: var(--item, var(--accent));
  margin: 10px 0 14px;
}
.sponsor__price small {
  display: block; margin-top: 6px;
  font: 500 0.78rem/1.3 var(--body); color: var(--muted);
}
.sponsor { display: flex; flex-direction: column; }
.sponsor p:last-of-type { flex: 1; }
.sponsor__link {
  margin-top: 16px; font-weight: 600; font-size: 0.88rem;
  color: var(--item, var(--accent)); text-decoration: none;
}
.sponsor__link:hover { text-decoration: underline; }

.pulse {
  border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent);
  border-radius: var(--radius);
  background: linear-gradient(160deg, color-mix(in srgb, var(--amber) 9%, transparent), transparent 55%), var(--panel);
  padding: clamp(24px, 3vw, 36px);
}
.pulse__name { font: 800 clamp(2.2rem, 4.5vw, 3.2rem)/1 var(--display); letter-spacing: -0.03em; color: var(--text); }
.pulse__name span { color: var(--amber); }
.pulse__list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 16px; }
.pulse__list li { display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; color: var(--muted); font-size: 0.92rem; }
.pulse__list span { grid-row: span 2; font: 800 0.8rem/1.6 var(--body); color: var(--amber); }
.pulse__list strong { color: var(--text); }

.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
.consent { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; font-size: 0.88rem; color: var(--muted); cursor: pointer; }
.consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--pink); }
@media (min-width: 900px) { .enquire__intro { position: sticky; top: 150px; align-self: start; } }

/* 9a17 Survey-led sections: "What you told us" asks and the pull quote */
.ask { display: flex; flex-direction: column; text-decoration: none; }
.ask p:not(.ask__q) { flex: 1; }
.ask__q {
  font: 800 clamp(1.15rem, 1.7vw, 1.35rem)/1.25 var(--display); letter-spacing: -0.01em;
  color: var(--item, var(--accent)); margin-bottom: 12px;
}
.ask .card__link { margin-top: 16px; color: var(--item, var(--accent)); }
.ask:hover { border-color: color-mix(in srgb, var(--item) 45%, transparent); transform: translateY(-2px); }
.pullquote { margin: clamp(40px, 5vw, 64px) auto 0; max-width: 820px; text-align: center; }
.pullquote blockquote {
  margin: 0; font: 800 clamp(1.4rem, 2.8vw, 2.1rem)/1.25 var(--display); letter-spacing: -0.02em;
  color: var(--text);
}
.pullquote figcaption { margin-top: 14px; color: var(--muted); font-size: 0.9rem; }

.sponsor-terms {
  margin-top: 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
}
.sponsor-terms p {
  padding: 16px 18px; border-radius: var(--radius); font-size: 0.92rem; color: var(--muted);
  border: 1px dashed color-mix(in srgb, var(--accent) 35%, transparent);
}
.sponsor-terms strong { display: block; color: var(--accent); margin-bottom: 4px; }
@media (max-width: 760px) { .sponsor-terms { grid-template-columns: 1fr; } }

/* Commitments rather than prohibitions: a tick in the page accent. */
.policy--positive .policy__mark {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.policy--positive .policy__mark::before {
  width: 6px; height: 1.5px; background: var(--accent);
  transform: translate(-90%, 1px) rotate(45deg);
}
.policy--positive .policy__mark::after {
  width: 11px; height: 1.5px; background: var(--accent);
  transform: translate(-30%, -1px) rotate(-50deg);
}

/* Where benefactor money goes: donut and legend. Hovering or focusing a
   slice or a legend row highlights both and shows that share in the centre. */
.spend { margin-top: 40px; display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 820px) { .spend { grid-template-columns: 1fr; } .donut { max-width: 300px; margin: 0 auto; } }
.donut { position: relative; margin: 0; }
.donut svg { display: block; width: 100%; height: auto; }
.donut__seg { transition: opacity 0.2s ease, stroke-width 0.2s ease; cursor: pointer; }
.spend.is-focused .donut__seg { opacity: 0.25; }
.spend.is-focused .donut__seg.is-on { opacity: 1; stroke-width: 36; }
.donut__centre {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
  pointer-events: none; padding: 0 22%;
}
.donut__value { font: 800 clamp(2rem, 4vw, 2.6rem)/1 var(--display); color: var(--text); }
.donut__label { margin-top: 6px; font-size: 0.8rem; line-height: 1.35; color: var(--muted); }
.spend__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.spend__item {
  display: grid; grid-template-columns: 14px 64px 1fr; gap: 14px; align-items: start;
  padding: 14px 16px; border-radius: var(--radius); border: 1px solid transparent;
  cursor: default; transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.spend__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.spend.is-focused .spend__item { opacity: 0.5; }
.spend.is-focused .spend__item.is-on { opacity: 1; background: var(--panel); border-color: var(--line); }
.spend__swatch { width: 14px; height: 14px; border-radius: 4px; margin-top: 5px; }
.spend__pct { font: 800 1.4rem/1.1 var(--display); color: var(--text); }
.spend__text strong { display: block; color: var(--text); }
.spend__text span { display: block; margin-top: 4px; font-size: 0.9rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .donut__seg, .spend__item { transition: none; } }

/* "Sound familiar?" on event pages: community voices as speech bubbles,
   then one line on how the event answers them. */
.heard { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 860px) { .heard { grid-template-columns: 1fr; } }
.heard__item {
  position: relative; padding: 22px 24px; border-radius: 18px 18px 18px 4px;
  background: var(--panel); border: 1px solid var(--line);
}
.heard__item::after {
  content: ""; position: absolute; left: -1px; bottom: -11px; width: 16px; height: 12px;
  background: var(--panel); border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.heard__item p { font-size: 1.02rem; line-height: 1.55; color: var(--text); }
.heard__item:nth-child(2) { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.heard__answer {
  margin-top: 34px; padding-left: 16px; border-left: 3px solid var(--accent);
  font: 700 clamp(1.05rem, 1.6vw, 1.25rem)/1.4 var(--display); color: var(--text); max-width: 60ch;
}

/* The keyword label inside each page's <h1> keeps the eyebrow's look, not the heading's. */
h1 .h1-kicker {
  display: flex; font: 700 0.72rem/1.4 var(--body); letter-spacing: 0.2em;
  text-transform: uppercase; margin-bottom: 18px;
  -webkit-text-fill-color: currentColor; background: none;
}

/* Spam trap: a field people never see or reach, which bots fill in. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form__status a { color: inherit; text-decoration: underline; }
.form__status.is-error, .vote__status.is-error { color: var(--pink); }
.form-done { padding: 8px 0; }
.form-done h3 { color: var(--accent); margin-bottom: 8px; }