:root {
    /* warm palette (default) */
    --cream-50: #FBF6EC;
    --cream-100: #F5ECD7;
    --cream-200: #EADDBE;
    --ink-900: #1C1410;
    --ink-700: #3A2A20;
    --ink-500: #6B5647;
    --ink-400: #8C7866;
    --maroon-900: #5C1A1B;
    --maroon-700: #7A2324;
    --maroon-500: #A23A3B;
    --gold-600: #B48A3A;
    --gold-500: #D1A24E;
    --gold-300: #E8C98A;
    --olive-700: #5B6B2E;
    --olive-500: #7C8F3E;
    --ring-red:    #B83A2E;
    --ring-orange: #E08A2A;
    --ring-gold:   #D4A83A;
    --ring-green:  #5B7A2E;
    --ring-blue:   #3A6FA3;

    --bg: var(--cream-50);
    --surface: var(--cream-100);
    --ink: var(--ink-900);
    --muted: var(--ink-500);
    --accent: var(--maroon-700);
    --accent-soft: var(--maroon-500);
    --gold: var(--gold-600);
    --rule: color-mix(in oklab, var(--ink-900) 12%, transparent);

    --f-display: 'Fraunces', 'Instrument Serif', ui-serif, Georgia, serif;
    --f-serif:   'Instrument Serif', 'Fraunces', ui-serif, Georgia, serif;
    --f-sans:    'Inter', ui-sans-serif, system-ui, sans-serif;

    --pad-section: clamp(80px, 10vw, 140px);
    --pad-x: clamp(20px, 5vw, 64px);
    --max: 1240px;
  }
  html[data-theme="vibrant"] {
    --bg: #FFF8EC;
    --surface: #FEEFD4;
    --accent: #B83A2E;
    --accent-soft: #E08A2A;
  }
  html[data-theme="civic"] {
    --bg: #F4F1EB;
    --surface: #ECE6DA;
    --accent: #2B3A4A;
    --accent-soft: #4A5B6E;
    --gold: #8C7542;
  }
  html[data-spacing="dense"] { --pad-section: clamp(56px, 7vw, 96px); }
  html[data-font="inter"] { --f-display: 'Inter', ui-sans-serif, system-ui, sans-serif; }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: var(--f-sans);
    color: var(--ink);
    background: var(--bg);
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  h1,h2,h3,h4 { font-family: var(--f-display); font-weight: 600; letter-spacing: -0.01em; margin: 0; }
  h1 { font-size: clamp(44px, 6.4vw, 96px); line-height: 1.02; letter-spacing: -0.025em; }
  h2 { font-size: clamp(32px, 4.2vw, 56px); line-height: 1.05; letter-spacing: -0.02em; }
  h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; }
  p { margin: 0; }
  a { color: inherit; }

  .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad-x); }
  .rule { height: 1px; background: var(--rule); width: 100%; }

  /* ==================== header ==================== */
  header.site {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in oklab, var(--bg) 92%, transparent);
    backdrop-filter: saturate(1.2) blur(10px);
    -webkit-backdrop-filter: saturate(1.2) blur(10px);
    border-bottom: 1px solid var(--rule);
  }
  html[data-header="dark"] header.site {
    background: var(--ink-900);
    color: var(--cream-50);
    border-bottom-color: color-mix(in oklab, var(--cream-50) 15%, transparent);
  }
  .nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0; gap: 24px;
    position: relative;
  }
  .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
  .brand img { width: 44px; height: 44px; border-radius: 50%; display: block; }
  .brand .bt { line-height: 1; }
  .brand .bt strong { font-family: var(--f-display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; display: block; }
  .brand .bt span { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
  html[data-header="dark"] .brand .bt span { color: color-mix(in oklab, var(--cream-50) 70%, transparent); }

  nav.links { display: flex; gap: 28px; align-items: center; }
  nav.links a {
    text-decoration: none; font-size: 14px; font-weight: 500;
    color: inherit; opacity: 0.8;
  }
  nav.links a:hover { opacity: 1; }
  @media (min-width: 941px) { nav.links a { padding: 6px 0; } }

  /* ==================== mobile navigation ==================== */
  /* The header laid seven links and a button in one row at every width. Below
     roughly a tablet that is wider than the screen, and it forced the whole
     page to ~890px — so every phone got a horizontally scrolling site. The
     links collapse into a panel instead; nothing about the palette changes. */
  /* The menu's own call to action. Hidden on desktop, where the header button
     beside the links is doing this job. */
  .nav-cta { display: none; }

  .nav-toggle {
    display: none;
    flex: 0 0 auto;
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    border: 1px solid var(--rule);
    border-radius: 12px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0;
  }
  html[data-header="dark"] .nav-toggle { border-color: color-mix(in oklab, var(--cream-50) 26%, transparent); }
  .nav-toggle .bars { display: grid; gap: 5px; width: 20px; }
  .nav-toggle .bars span {
    height: 2px; border-radius: 2px; background: currentColor;
    transition: transform .22s ease, opacity .18s ease;
  }
  .nav-toggle[aria-expanded="true"] .bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .bars span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  @media (max-width: 940px) {
    .nav-toggle { display: inline-flex; }
    /* The brand must give way before the menu button does. */
    .brand { min-width: 0; }
    .brand .bt { min-width: 0; overflow: hidden; }
    .brand .bt strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    nav.links {
      /* Positioned against the sticky header, so the panel spans the full
         width of the screen rather than the padded content column. */
      position: absolute;
      top: 100%; left: 0; right: 0;
      display: none;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      padding: 6px 0 10px;
      background: var(--bg);
      border-bottom: 1px solid var(--rule);
      box-shadow: 0 18px 40px -24px rgba(0,0,0,.35);
    }
    html[data-header="dark"] nav.links { background: var(--ink-900); }
    nav.links.open { display: flex; }
    nav.links a {
      /* 48px of height: a nav link is the most-tapped thing on the page and
         22px of text was well under any reasonable target. */
      display: flex; align-items: center;
      min-height: 48px;
      padding: 0 var(--pad-x);
      font-size: 16px;
      opacity: 1;
      border-bottom: 1px solid color-mix(in oklab, var(--rule) 55%, transparent);
    }
    nav.links a:last-child { border-bottom: 0; }

    /* Styled as the button it replaces, so the menu ends on an action rather
       than a seventh identical row. */
    nav.links a.nav-cta {
      display: flex;
      justify-content: center;
      margin: 10px var(--pad-x) 2px;
      padding: 0 20px;
      border: 0;
      border-radius: 999px;
      background: var(--accent);
      color: var(--cream-50);
      font-weight: 600;
    }
  }

  @media (max-width: 560px) {
    /* The header CTA and a menu button do not both fit beside the logo on a
       narrow phone. Register is in the menu, and the hero repeats it
       immediately below the fold-line anyway. */
    .nav a.header-cta { display: none; }

    /* The privacy note and the Send button sat on one unwrappable row, which
       needs 276px before padding — more than a 320px phone has to give. */
    .submit-row { flex-wrap: wrap; }
    .submit-row .btn { width: 100%; justify-content: center; }
    .brand img { width: 38px; height: 38px; }
    .brand .bt strong { font-size: 16px; }
  }

  .btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 20px;
    border-radius: 999px;
    background: var(--accent);
    color: #FBF6EC;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.01em;
    border: 1px solid var(--accent);
    transition: transform 0.15s ease, background 0.2s ease;
    white-space: nowrap;
  }
  .btn:hover { background: var(--maroon-900); transform: translateY(-1px); }
  .btn.ghost {
    background: transparent; color: var(--ink);
    border: 1px solid color-mix(in oklab, var(--ink-900) 30%, transparent);
  }
  html[data-header="dark"] .btn.ghost { color: var(--cream-50); border-color: color-mix(in oklab, var(--cream-50) 30%, transparent); }
  .btn.ghost:hover { background: color-mix(in oklab, var(--ink-900) 6%, transparent); }
  .btn .arr { transition: transform .2s; }
  .btn:hover .arr { transform: translateX(3px); }

  /* ==================== hero ==================== */
  .hero {
    position: relative;
    overflow: hidden;
    padding-top: clamp(60px, 8vw, 110px);
    padding-bottom: clamp(80px, 10vw, 140px);
  }
  .hero .bg-wash {
    position: absolute; inset: 0;
    background:
      radial-gradient(900px 500px at 85% 10%, color-mix(in oklab, var(--gold-300) 40%, transparent), transparent 60%),
      radial-gradient(700px 500px at 10% 90%, color-mix(in oklab, var(--maroon-500) 15%, transparent), transparent 60%);
    pointer-events: none;
  }
  .hero-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(32px, 6vw, 88px);
    align-items: center;
    position: relative;
  }
  @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

  .kicker {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
  }
  .kicker .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

  .hero h1 {
    margin-top: 20px;
  }
  .hero h1 em {
    font-family: var(--f-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--accent);
  }
  .hero .lede {
    margin-top: 22px;
    font-size: clamp(17px, 1.4vw, 20px);
    line-height: 1.55;
    color: var(--ink-700);
    max-width: 54ch;
    text-wrap: pretty;
  }
  .hero-meta {
    margin-top: 34px;
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 28px;
    align-items: start;
  }
  @media (max-width: 540px){ .hero-meta { grid-template-columns: 1fr 1fr; } }
  .hero-meta .item .lab {
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--muted); font-weight: 600;
    display: flex; align-items: center; gap: 8px;
  }
  .hero-meta .item .val {
    font-family: var(--f-display);
    font-size: 20px;
    font-weight: 600;
    margin-top: 6px;
    letter-spacing: -0.01em;
  }
  .hero-meta .item .sub { font-size: 13px; color: var(--muted); margin-top: 2px; }

  .hero-ctas { margin-top: 36px; display: flex; gap: 12px; flex-wrap: wrap; }

  /* logo stage */
  .stage {
    position: relative;
    aspect-ratio: 1/1;
    display: grid;
    place-items: center;
  }
  .stage::before {
    content: "";
    position: absolute; inset: 10%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--cream-100) 90%, white), var(--cream-200) 70%, color-mix(in oklab, var(--maroon-500) 25%, var(--cream-200)));
    box-shadow:
      0 40px 80px -30px color-mix(in oklab, var(--maroon-900) 40%, transparent),
      inset 0 0 0 1px color-mix(in oklab, var(--gold-500) 30%, transparent);
  }
  .stage .logo-img {
    position: relative;
    width: 78%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    object-fit: cover;
    box-shadow:
      0 30px 60px -20px color-mix(in oklab, var(--maroon-900) 50%, transparent),
      0 2px 0 color-mix(in oklab, var(--gold-500) 40%, transparent);
  }
  /* orbit rings */
  .stage svg.orbit {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    overflow: visible;
    pointer-events: none;
  }
  .stage .orbit circle {
    fill: none;
    stroke: color-mix(in oklab, var(--gold-500) 50%, transparent);
    stroke-dasharray: 2 10;
    transform-origin: 50% 50%;
    animation: spin 60s linear infinite;
  }
  .stage .orbit circle.r2 {
    stroke: color-mix(in oklab, var(--maroon-500) 30%, transparent);
    stroke-dasharray: 1 6;
    animation: spin 90s linear infinite reverse;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* ==================== section frame ==================== */
  section { padding: var(--pad-section) 0; position: relative; }
  .section-head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(20px, 5vw, 80px);
    align-items: baseline;
    margin-bottom: 48px;
  }
  @media (max-width: 720px){ .section-head { grid-template-columns: 1fr; gap: 12px; } }
  .section-num {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 400;
    color: var(--accent);
    font-size: 22px;
    letter-spacing: 0;
    display: flex; align-items: center; gap: 10px;
    white-space: nowrap;
  }
  .section-num::before {
    content: "";
    width: 40px; height: 1px;
    background: var(--accent);
    display: inline-block;
  }

  /* ==================== about ==================== */
  .about { background: var(--surface); }
  .about-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(40px, 7vw, 100px);
    align-items: start;
  }
  @media (max-width: 880px){ .about-grid { grid-template-columns: 1fr; } }
  .about h2 em {
    font-family: var(--f-serif); font-style: italic; color: var(--accent); font-weight: 400;
  }
  .about-body p {
    font-size: 17px;
    line-height: 1.7;
    color: var(--ink-700);
    margin-bottom: 18px;
    text-wrap: pretty;
  }
  .about-body p:first-child::first-line {
    font-weight: 600;
    color: var(--ink-900);
  }
  .about-body p.lead {
    font-family: var(--f-serif);
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1.35;
    color: var(--ink-900);
    margin-bottom: 28px;
    font-style: italic;
  }
  .about .pillars {
    display: grid;
    gap: 2px;
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: 14px;
    overflow: hidden;
  }
  .about .pillars .p {
    background: var(--surface);
    padding: 24px 26px;
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 18px;
    align-items: start;
  }
  .about .pillars .p .n {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 28px;
    color: var(--accent);
    font-weight: 500;
    line-height: 1;
  }
  .about .pillars .p .t { font-family: var(--f-display); font-weight: 600; font-size: 19px; margin-bottom: 4px; }
  .about .pillars .p .d { color: var(--ink-700); font-size: 15px; line-height: 1.5; }

  /* ==================== sectors ==================== */
  .sectors h2 strong { color: var(--accent); font-weight: 600; }
  .sectors-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: 16px;
    overflow: hidden;
  }
  @media (max-width: 1040px){ .sectors-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 640px){ .sectors-grid { grid-template-columns: repeat(2, 1fr); } }
  .sector {
    background: var(--bg);
    padding: 32px 24px 28px;
    min-height: 260px;
    display: flex; flex-direction: column;
    position: relative;
    transition: background .3s ease;
    cursor: default;
  }
  .sector:hover { background: var(--surface); }
  .sector .icon {
    width: 48px; height: 48px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: color-mix(in oklab, var(--accent) 10%, transparent);
    color: var(--accent);
    margin-bottom: 18px;
  }
  .sector .icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .sector h3 {
    font-size: 20px;
    margin-bottom: 10px;
    line-height: 1.2;
  }
  .sector p { font-size: 14px; color: var(--ink-700); line-height: 1.5; }
  .sector .ring {
    position: absolute; top: 18px; right: 20px;
    font-family: var(--f-display); font-style: italic;
    font-size: 14px; color: var(--muted);
  }

  /* ring-colored accents */
  .sector:nth-child(1) .icon { background: color-mix(in oklab, var(--ring-blue) 12%, transparent); color: var(--ring-blue); }
  .sector:nth-child(2) .icon { background: color-mix(in oklab, var(--ring-red) 12%, transparent); color: var(--ring-red); }
  .sector:nth-child(3) .icon { background: color-mix(in oklab, var(--ring-green) 12%, transparent); color: var(--ring-green); }
  .sector:nth-child(4) .icon { background: color-mix(in oklab, var(--ring-orange) 12%, transparent); color: var(--ring-orange); }
  .sector:nth-child(5) .icon { background: color-mix(in oklab, var(--ring-gold) 15%, transparent); color: color-mix(in oklab, var(--ring-gold) 85%, black); }

  /* ==================== who ==================== */
  .who { background: var(--ink-900); color: var(--cream-50); }
  .who .section-num { color: var(--gold-300); }
  .who .section-num::before { background: var(--gold-300); }
  .who h2 em { font-family: var(--f-serif); font-style: italic; color: var(--gold-300); font-weight: 400; }
  .who-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: color-mix(in oklab, var(--cream-50) 10%, transparent);
    border: 1px solid color-mix(in oklab, var(--cream-50) 10%, transparent);
    border-radius: 16px;
    overflow: hidden;
    margin-top: 48px;
  }
  @media (max-width: 760px){ .who-grid { grid-template-columns: 1fr; } }
  .who-card {
    background: var(--ink-900);
    padding: 40px 36px;
  }
  .who-card .tag {
    font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--gold-300); font-weight: 600; margin-bottom: 20px;
    display: flex; align-items: center; gap: 10px;
  }
  .who-card .tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-500); }
  .who-card h3 {
    font-size: 32px; line-height: 1.15;
    margin-bottom: 16px;
    font-weight: 600;
    letter-spacing: -0.015em;
  }
  .who-card h3 em { font-family: var(--f-serif); font-weight: 400; color: var(--gold-300); }
  .who-card p { color: color-mix(in oklab, var(--cream-50) 78%, transparent); font-size: 16px; line-height: 1.6; margin-bottom: 22px; }
  .who-card ul {
    list-style: none; padding: 0; margin: 0 0 28px;
    display: grid; gap: 10px;
  }
  .who-card ul li {
    display: grid; grid-template-columns: 16px 1fr; gap: 12px;
    color: color-mix(in oklab, var(--cream-50) 85%, transparent);
    font-size: 15px;
  }
  .who-card ul li::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--gold-500); margin-top: 8px;
  }
  .who-card .btn { background: var(--cream-50); color: var(--ink-900); border-color: var(--cream-50); }
  .who-card .btn:hover { background: white; }
  .who-card .btn.ghost { background: transparent; color: var(--cream-50); border-color: color-mix(in oklab, var(--cream-50) 35%, transparent); }
  .who-card .btn.ghost:hover { background: color-mix(in oklab, var(--cream-50) 8%, transparent); }

  /* ==================== logo wall ==================== */
  .wall { padding-top: 20px; padding-bottom: 60px; }
  .wall .label {
    text-align: center;
    font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--muted); font-weight: 600;
    margin-bottom: 24px;
  }
  .wall-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  @media (max-width: 900px){ .wall-grid { grid-template-columns: repeat(3, 1fr); } }
  .wall-cell {
    /* Grid children default to min-width:auto, which is what let the longest
       organisation name set the floor for the whole page's width. */
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: center;
    aspect-ratio: 2.3/1;
    display: grid; place-items: center;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: clamp(14px, 1.2vw, 18px);
    color: color-mix(in oklab, var(--ink-900) 50%, transparent);
    border-right: 1px solid var(--rule);
    letter-spacing: -0.01em;
    text-align: center;
    padding: 0 12px;
    transition: color .2s;
  }
  .wall-cell:hover { color: var(--accent); }
  .wall-cell:nth-child(6n) { border-right: none; }
  @media (max-width: 900px){
    .wall-cell { border-right: 1px solid var(--rule); }
    .wall-cell:nth-child(6n) { border-right: 1px solid var(--rule); }
    .wall-cell:nth-child(3n) { border-right: none; }
  }

  /* The column separators are drawn per cell with nth-child rules written for a
     six-then-three column grid. At two columns they land in the wrong places,
     and at one column every cell draws a stub of vertical rule down the right
     of the page. The separators are redrawn for each layout rather than left
     to fall where they may. */
  /* `:nth-child(n)` rather than a bare class: the three-column rules above use
     `:nth-child(3n)`, which is more specific and wins on specificity no matter
     how much later these appear. Matching their weight is what makes source
     order decide. */
  @media (max-width: 640px){
    .wall-grid { grid-template-columns: repeat(2, 1fr); }
    .wall-cell:nth-child(n) { border-right: 1px solid var(--rule); }
    .wall-cell:nth-child(2n) { border-right: none; }
  }
  @media (max-width: 400px){
    .wall-grid { grid-template-columns: 1fr; }
    .wall-cell:nth-child(n) { border-right: none; }
  }

  /* ==================== impact / stats strip ==================== */
  .stats {
    background: var(--cream-100);
    padding: 56px 0;

    /* The statistics strip is the one block whose colours are set from the
       admin. Declaring the defaults as variables here means an override is one
       custom property, and removing it restores the design exactly — no
       !important, no second copy of the rule. */
    --stat-num: var(--accent);
    --stat-suf: var(--gold);
    --stat-lab: var(--ink-700);
  }
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(20px, 3vw, 60px);
  }
  @media (max-width: 700px){ .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
  .stat .num {
    font-family: var(--f-display);
    font-size: clamp(44px, 5vw, 68px);
    line-height: 1;
    font-weight: 600;
    color: var(--stat-num);
    letter-spacing: -0.03em;
  }
  .stat .num .suf {
    font-size: 0.55em;
    color: var(--stat-suf);
    margin-left: 2px;
  }
  .stat .lab {
    font-size: 13px; color: var(--stat-lab);
    margin-top: 8px;
    line-height: 1.4;
    max-width: 22ch;
  }

  /* ==================== exhibitor CTA ==================== */
  .exhibit {
    background:
      linear-gradient(180deg, var(--bg) 0 50%, var(--maroon-900) 50% 100%);
    padding-top: 0;
  }
  .exhibit .card {
    background:
      radial-gradient(600px 300px at 80% 0%, color-mix(in oklab, var(--gold-500) 30%, transparent), transparent 60%),
      linear-gradient(180deg, var(--maroon-700), var(--maroon-900));
    color: var(--cream-50);
    border-radius: 24px;
    padding: clamp(40px, 5vw, 72px);
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(24px, 4vw, 60px);
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 40px 80px -30px rgba(0,0,0,.4);
  }
  @media (max-width: 880px){ .exhibit .card { grid-template-columns: 1fr; } }
  .exhibit .card::before {
    content: "";
    position: absolute; inset: 1px;
    border-radius: 23px;
    border: 1px solid color-mix(in oklab, var(--gold-300) 40%, transparent);
    pointer-events: none;
  }
  .exhibit .card .tag {
    font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--gold-300); font-weight: 600;
    display: flex; align-items: center; gap: 10px;
  }
  .exhibit .card .tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-500); }
  .exhibit .card h2 { margin-top: 18px; color: var(--cream-50); }
  .exhibit .card h2 em { font-family: var(--f-serif); font-style: italic; color: var(--gold-300); font-weight: 400; }
  .exhibit .card p { margin-top: 20px; color: color-mix(in oklab, var(--cream-50) 85%, transparent); font-size: 17px; line-height: 1.6; max-width: 52ch; }
  .exhibit .card .benefits {
    display: grid; gap: 16px; margin-top: 24px;
  }
  .exhibit .card .benefits .b {
    display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start;
  }
  .exhibit .card .benefits .b svg { width: 22px; height: 22px; stroke: var(--gold-300); fill: none; stroke-width: 1.6; margin-top: 2px; }
  .exhibit .card .benefits .b span { font-size: 15px; color: color-mix(in oklab, var(--cream-50) 88%, transparent); }
  .exhibit .card .cta { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
  .exhibit .card .cta .btn { background: var(--cream-50); color: var(--maroon-900); border-color: var(--cream-50); }
  .exhibit .card .cta .btn:hover { background: white; }
  .exhibit .card .cta .btn.ghost { background: transparent; color: var(--cream-50); border-color: color-mix(in oklab, var(--cream-50) 35%, transparent); }

  .exhibit .side {
    display: grid; gap: 14px;
  }
  .exhibit .side .meta {
    background: color-mix(in oklab, var(--cream-50) 6%, transparent);
    border: 1px solid color-mix(in oklab, var(--cream-50) 15%, transparent);
    border-radius: 14px;
    padding: 20px 22px;
  }
  .exhibit .side .meta .lab {
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--gold-300); font-weight: 600;
  }
  .exhibit .side .meta .val {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 22px;
    margin-top: 4px;
  }
  .exhibit .side .meta .sub { color: color-mix(in oklab, var(--cream-50) 75%, transparent); font-size: 13px; margin-top: 4px; }

  /* ==================== FAQ ==================== */
  .faq .faq-list { display: grid; }
  .faq details {
    border-top: 1px solid var(--rule);
    padding: 26px 0;
  }
  .faq details:last-of-type { border-bottom: 1px solid var(--rule); }
  .faq summary {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    align-items: baseline;
    font-family: var(--f-display);
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 500;
    letter-spacing: -0.01em;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary .num {
    font-family: var(--f-serif);
    font-style: italic;
    font-size: 16px;
    color: var(--muted);
    font-weight: 400;
    min-width: 32px;
  }
  .faq summary .plus {
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid var(--rule);
    display: grid; place-items: center;
    transition: transform .25s ease, background .2s;
    color: var(--accent);
    font-size: 18px;
    font-family: var(--f-sans);
    font-weight: 300;
  }
  .faq details[open] summary .plus { transform: rotate(45deg); background: var(--accent); color: var(--cream-50); border-color: var(--accent); }
  .faq .answer {
    padding: 16px 0 4px;
    margin-left: 52px;
    max-width: 68ch;
    color: var(--ink-700);
    font-size: 16px;
    line-height: 1.65;
  }

  /* ==================== register ==================== */
  .register {
    background: var(--surface);
  }
  .register .reg-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(32px, 6vw, 80px);
    align-items: start;
  }
  @media (max-width: 880px){ .register .reg-grid { grid-template-columns: 1fr; } }
  .register h2 em { font-family: var(--f-serif); font-style: italic; color: var(--accent); font-weight: 400; }
  .register .intro p { color: var(--ink-700); margin-top: 16px; font-size: 16px; line-height: 1.6; }
  .register .intro .fine {
    margin-top: 28px;
    padding: 20px 22px;
    border-left: 3px solid var(--gold-500);
    background: color-mix(in oklab, var(--cream-50) 60%, transparent);
    border-radius: 0 10px 10px 0;
    font-size: 14px;
    color: var(--ink-700);
  }
  .register .intro .fine strong { font-family: var(--f-display); font-weight: 600; color: var(--ink-900); display: block; margin-bottom: 4px; }

  form.reg {
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: 18px;
    padding: clamp(24px, 3vw, 36px);
    display: grid;
    gap: 16px;
    box-shadow: 0 20px 40px -24px color-mix(in oklab, var(--ink-900) 30%, transparent);
  }
  .form-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    background: var(--surface);
    padding: 4px;
    border-radius: 999px;
    margin-bottom: 8px;
  }
  .form-tabs button,
  .form-tabs .tab-link {
    border: 0; background: transparent;
    padding: 10px 14px;
    border-radius: 999px;
    font: 600 13px/1 var(--f-sans);
    letter-spacing: 0.01em;
    color: var(--ink-700);
    cursor: pointer;
    transition: background .15s, color .15s;
  }
  .form-tabs button.active { background: var(--ink-900); color: var(--cream-50); }
  .form-tabs .tab-link {
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
  }
  .form-tabs .tab-link:hover { background: color-mix(in oklab, var(--ink-900) 8%, transparent); }
  /* Three labels do not fit one pill on a phone; stack them instead. */
  @media (max-width: 480px) {
    .form-tabs { grid-template-columns: 1fr; border-radius: 18px; }
    .form-tabs button, .form-tabs .tab-link { border-radius: 14px; }
  }

  .field { display: grid; gap: 6px; }
  .field label {
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
  }
  .field input, .field select, .field textarea {
    font: 400 15px/1.4 var(--f-sans);
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: 10px;
    color: var(--ink-900);
    transition: border-color .15s, box-shadow .15s;
  }
  .field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 15%, transparent);
  }
  .field textarea { resize: vertical; min-height: 100px; }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  @media (max-width: 520px){ .field-row { grid-template-columns: 1fr; } }

  .chips {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 2px;
  }
  .chips label {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    font: 500 13px/1 var(--f-sans);
    color: var(--ink-700);
    cursor: pointer;
    letter-spacing: 0;
    text-transform: none;
    transition: background .15s, border-color .15s, color .15s;
  }
  .chips label input { display: none; }
  .chips label:has(input:checked) { background: var(--accent); color: var(--cream-50); border-color: var(--accent); }

  .submit-row {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    margin-top: 8px;
  }
  .submit-row .note { font-size: 12px; color: var(--muted); }
  .thanks {
    display: none;
    padding: 18px;
    background: color-mix(in oklab, var(--olive-500) 15%, transparent);
    border: 1px solid color-mix(in oklab, var(--olive-700) 30%, transparent);
    border-radius: 10px;
    font-size: 15px;
    color: var(--ink-900);
  }
  .thanks strong { font-family: var(--f-display); }
  form.reg.sent .thanks { display: block; }
  form.reg.sent > :not(.thanks) { display: none; }

  /* ==================== footer ==================== */
  footer.site {
    background: var(--ink-900);
    color: color-mix(in oklab, var(--cream-50) 80%, transparent);
    padding: 72px 0 32px;
  }
  .foot-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: clamp(24px, 4vw, 56px);
  }
  @media (max-width: 820px){ .foot-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 520px){ .foot-grid { grid-template-columns: 1fr; } }
  footer.site .brand .bt strong { color: var(--cream-50); }
  footer.site .brand .bt span { color: color-mix(in oklab, var(--cream-50) 60%, transparent); }
  footer.site h4 {
    font-family: var(--f-sans);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--cream-50) 60%, transparent);
    margin-bottom: 16px;
    font-weight: 600;
  }
  footer.site ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
  footer.site a { text-decoration: none; color: inherit; font-size: 14px; }
  footer.site a:hover { color: var(--cream-50); }
  .foot-grid ul li a { display: inline-flex; align-items: center; min-height: 24px; }
  footer.site .tag-desc { font-size: 14px; line-height: 1.6; margin-top: 14px; max-width: 34ch; }
  .foot-rule .abn:not(:empty)::before { content: " · "; }
  .foot-rule { border-top: 1px solid color-mix(in oklab, var(--cream-50) 14%, transparent); margin-top: 56px; padding-top: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 12px; color: color-mix(in oklab, var(--cream-50) 50%, transparent); }

  /* ==================== tweaks panel ==================== */
  #tweaks {
    position: fixed;
    right: 20px; bottom: 20px;
    z-index: 100;
    width: 280px;
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: 14px;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.25);
    padding: 16px 18px;
    font: 400 13px/1.4 var(--f-sans);
    display: none;
  }
  #tweaks.open { display: block; }
  #tweaks h5 {
    margin: 0 0 12px;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 16px;
    display: flex; justify-content: space-between; align-items: center;
  }
  #tweaks h5 button {
    border: 0; background: transparent; cursor: pointer;
    font-size: 16px; color: var(--muted);
    padding: 0;
  }
  #tweaks .tw-row {
    display: grid;
    gap: 6px;
    margin-bottom: 12px;
  }
  #tweaks .tw-row > .lbl {
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--muted); font-weight: 600;
  }
  #tweaks .seg {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    gap: 2px; background: var(--surface);
    padding: 3px; border-radius: 8px;
  }
  #tweaks .seg button {
    border: 0; background: transparent;
    padding: 7px 8px;
    border-radius: 6px;
    font: 600 12px/1 var(--f-sans);
    color: var(--ink-700);
    cursor: pointer;
  }
  #tweaks .seg button.on { background: var(--ink-900); color: var(--cream-50); }
  #tweaks .tw-toggle {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    font-size: 13px;
  }
  #tweaks .tw-toggle input { accent-color: var(--accent); }

  .hero-note {
    margin: 14px 0 0;
    font: 500 13px/1.5 var(--f-sans);
    color: var(--muted);
    letter-spacing: .01em;
  }
  .who-card .card-note {
    margin: 0 0 16px;
    font: 400 13px/1.6 var(--f-sans);
    color: var(--muted);
  }

  /* ==================== booth pricing table ==================== */
  /* Sits on the exhibit card, which is deep maroon with cream text — so every
     colour here is drawn from the cream/gold end of the palette, not the ink
     end. The first version reused the body text colours and was very nearly
     invisible against the card. */
  .price-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 18px;
    font: 400 14px/1.5 var(--f-sans);
    color: color-mix(in oklab, var(--cream-50) 82%, transparent);
  }
  .price-table caption {
    text-align: left;
    font: 600 11px/1 var(--f-sans);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold-300);
    padding-bottom: 12px;
  }
  .price-table th, .price-table td {
    text-align: left;
    padding: 10px 12px 10px 0;
    border-bottom: 1px solid color-mix(in oklab, var(--cream-50) 18%, transparent);
    vertical-align: top;
  }
  .price-table thead th {
    font: 600 10px/1 var(--f-sans);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--cream-50) 60%, transparent);
  }
  .price-table tbody th {
    font: 600 14px/1.4 var(--f-sans);
    color: var(--cream-50);
    padding-right: 16px;
  }
  .price-table td:nth-child(2) {
    font-family: var(--f-display);
    font-size: 17px;
    color: var(--gold-300);
    white-space: nowrap;
    padding-right: 16px;
  }
  /* What every booth includes — one line under the table, rather than the
     same words repeated in a third column. */
  .exhibit .card .price-note {
    margin: -6px 0 22px;
    font: 400 14px/1.5 var(--f-sans);
    color: color-mix(in oklab, var(--cream-50) 82%, transparent);
    max-width: none;
  }
  @media (max-width: 720px) {
    .price-table, .price-table tbody, .price-table tr, .price-table td, .price-table th { display: block; }
    .price-table thead { display: none; }
    .price-table tr { padding: 10px 0; border-bottom: 1px solid var(--rule); }
    .price-table th, .price-table td { border: 0; padding: 2px 0; }
  }

  /* ==================== footer social row ==================== */
  .social-row {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 14px;
  }
  .social-row a {
    padding: 6px 12px;
    border: 1px solid color-mix(in oklab, var(--cream-50) 24%, transparent);
    border-radius: 999px;
    font: 500 12px/1 var(--f-sans);
    color: color-mix(in oklab, var(--cream-50) 78%, transparent);
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease;
  }
  .social-row a:hover {
    border-color: var(--gold-500);
    color: var(--cream-50);
  }

  /* ==================== small screens ==================== */
  /* Everything here is size and spacing for touch. No colour, font family or
     layout idea changes — the design is the design, it just has to be usable
     with a thumb. */
  @media (max-width: 900px) {
    /* `white-space: nowrap` on the section label is what kept the page 18px
       wider than a 360px phone: "§ 02  Accessibility & inclusion" simply could
       not break. The rule exists so the rule-and-number stay on one line, which
       still holds once the label itself is allowed to wrap. */
    .section-num {
      white-space: normal;
      flex-wrap: wrap;
      font-size: 20px;
    }

    .wall-cell {
      aspect-ratio: auto;
      min-height: 62px;
      padding: 12px 10px;
      font-size: 14px;
    }

    /* 12px body text is below what anyone should have to read on a phone. */
    .submit-row .note, .hero-note { font-size: 13px; }

    /* Tab controls, chips and the footer's email links were all between 16px
       and 33px tall — under any usable target size. */
    .form-tabs button {
      min-height: 46px;
      flex: 1 1 auto;
    }
    .chips label { min-height: 42px; padding: 10px 14px; }

    .foot-grid ul li { margin-bottom: 2px; }
    .foot-grid ul li a {
      display: inline-flex;
      align-items: center;
      min-height: 42px;
      overflow-wrap: anywhere;
    }
    .social-row a { min-height: 42px; display: inline-flex; align-items: center; }

    /* Long addresses should wrap rather than push the layout sideways. */
    .foot-grid a, .answer a { overflow-wrap: anywhere; }
  }

  /* ==================== utilities ==================== */
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
  .reveal.in { opacity: 1; transform: none; }

  ::selection { background: color-mix(in oklab, var(--gold-500) 50%, transparent); color: var(--ink-900); }

  /* ==================== added by scripts/extract-site.mjs ==================== */
  .reg-error {
    margin: 14px 0 0;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid color-mix(in oklab, var(--ring-red) 45%, transparent);
    background: color-mix(in oklab, var(--ring-red) 10%, transparent);
    color: var(--maroon-900);
    font-size: 14px;
    line-height: 1.5;
  }
  .reg-error[hidden] { display: none; }