:root {
        --bg: #fff6e0;
        --surface: #fffdf6;
        --ink: #271540;
        --ink-soft: #5f4b7d;
        --pink: #ff2e93;
        --pink-dark: #cf006b;
        --yellow: #ffd60a;
        --teal: #00c9a7;
        --teal-dark: #007a63;
        --purple: #7c3aed;
        --purple-dark: #5b21b6;
        --orange: #ff7a1a;
        --orange-dark: #d95d02;
        --wacky-bg: #ffec7a;
        --radius: 18px;
      }
      @media (prefers-color-scheme: dark) {
        :root {
          --bg: #1b0f31;
          --surface: #2b1a4d;
          --ink: #fdf4ff;
          --ink-soft: #cdbcf2;
          --wacky-bg: #54400c;
        }
      }
      * { box-sizing: border-box; }
      html { -webkit-text-size-adjust: 100%; }
      html, body { overflow-x: clip; }
      body {
        margin: 0;
        background-color: var(--bg);
        background-image:
          radial-gradient(circle, rgba(255, 46, 147, 0.20) 2.2px, transparent 3px),
          radial-gradient(circle, rgba(0, 201, 167, 0.20) 2.2px, transparent 3px),
          radial-gradient(circle, rgba(255, 150, 0, 0.28) 2.2px, transparent 3px),
          radial-gradient(circle, rgba(124, 58, 237, 0.16) 2.2px, transparent 3px);
        background-size: 120px 120px, 170px 170px, 210px 210px, 260px 260px;
        background-position: 0 0, 45px 70px, 100px 25px, 25px 130px;
        color: var(--ink);
        font-family: "Nunito", system-ui, -apple-system, sans-serif;
        line-height: 1.5;
      }
      @media (prefers-color-scheme: dark) {
        body {
          background-image:
            radial-gradient(circle, rgba(255, 46, 147, 0.32) 2.2px, transparent 3px),
            radial-gradient(circle, rgba(0, 201, 167, 0.30) 2.2px, transparent 3px),
            radial-gradient(circle, rgba(255, 214, 10, 0.30) 2.2px, transparent 3px),
            radial-gradient(circle, rgba(167, 139, 250, 0.28) 2.2px, transparent 3px);
        }
      }
      ::selection { background: var(--yellow); color: #271540; }
      .wrap {
        max-width: 1100px;
        margin: 0 auto;
        padding: 30px 18px 52px;
      }

      /* ---------- Header ---------- */
      header { position: relative; margin-bottom: 6px; }
      h1 {
        font-family: "Titan One", "Nunito", sans-serif;
        font-weight: 400;
        text-transform: uppercase;
        font-size: clamp(3.4rem, 12vw, 6.4rem);
        letter-spacing: 0.01em;
        margin: 0 0 14px;
        line-height: 0.95;
        color: var(--pink);
        transform: rotate(-1.6deg);
        transform-origin: left center;
        text-shadow: 3px 3px 0 var(--teal), 7px 7px 0 var(--yellow);
      }
      h1 .pop {
        color: var(--purple);
        display: inline-block;
        transform: rotate(2.5deg);
        text-shadow: 3px 3px 0 var(--pink), 7px 7px 0 var(--teal);
      }
      @media (prefers-color-scheme: dark) {
        h1 .pop { color: #a06bff; }
      }
      .burst {
        position: absolute;
        top: -8px;
        right: 2px;
        width: 108px;
        height: 108px;
        background: var(--yellow);
        clip-path: polygon(100% 50%, 87.7% 59.8%, 93.3% 75%, 79.4% 79.4%, 75% 93.3%, 59.8% 87.7%, 50% 100%, 40.2% 87.7%, 25% 93.3%, 20.6% 79.4%, 6.7% 75%, 12.3% 59.8%, 0% 50%, 12.3% 40.2%, 6.7% 25%, 20.6% 20.6%, 25% 6.7%, 40.2% 12.3%, 50% 0%, 59.8% 12.3%, 75% 6.7%, 79.4% 20.6%, 93.3% 25%, 87.7% 40.2%);
        display: grid;
        place-items: center;
        animation: burst-wiggle 5s ease-in-out infinite;
      }
      .burst span {
        font-family: "Titan One", "Nunito", sans-serif;
        font-size: 0.82rem;
        color: #271540;
        text-align: center;
        line-height: 1.15;
        max-width: 58%;
      }
      @keyframes burst-wiggle {
        0%, 100% { transform: rotate(10deg); }
        50% { transform: rotate(17deg); }
      }
      .tagline {
        margin: 0;
        font-size: 1.08rem;
        font-weight: 600;
        color: var(--ink-soft);
        max-width: 58ch;
      }
      .tagline strong {
        color: var(--ink);
        padding: 0 2px;
        background: linear-gradient(transparent 58%, rgba(255, 214, 10, 0.55) 58%, rgba(255, 214, 10, 0.55) 94%, transparent 94%);
      }

      /* ---------- Marquee ---------- */
      .marquee {
        overflow: hidden;
        background: var(--pink);
        border-top: 3px solid var(--ink);
        border-bottom: 3px solid var(--ink);
        transform: rotate(-1.3deg);
        margin: 30px -14px 34px;
      }
      .marquee-track {
        display: flex;
        width: max-content;
        animation: marquee-scroll 28s linear infinite;
      }
      .marquee-track span {
        font-family: "Titan One", "Nunito", sans-serif;
        font-size: 1rem;
        letter-spacing: 0.05em;
        color: #ffffff;
        white-space: nowrap;
        padding: 9px 0;
      }
      @keyframes marquee-scroll {
        to { transform: translateX(-50%); }
      }
      .marquee.alt {
        background: var(--purple);
        transform: rotate(1.1deg);
        margin: 42px -14px 8px;
      }
      .marquee.alt .marquee-track { animation-direction: reverse; }

      /* ---------- Filters ---------- */
      .filters {
        background: var(--surface);
        border: 3px solid var(--ink);
        border-radius: 20px;
        box-shadow: 8px 8px 0 var(--teal);
        padding: 18px 20px;
        display: flex;
        flex-wrap: wrap;
        gap: 18px 30px;
        align-items: flex-start;
        margin-bottom: 12px;
      }
      .filter-groups { display: contents; }
      .filters-toggle { display: none; }
      .filter-group { min-width: 0; }
      .filter-group h2 {
        font-family: "Permanent Marker", cursive;
        font-size: 1.05rem;
        font-weight: 400;
        letter-spacing: 0.02em;
        color: var(--pink-dark);
        margin: 0 0 9px;
        transform: rotate(-1deg);
      }
      .filter-group:nth-child(2) h2 { color: var(--purple-dark); }
      .filter-group:nth-child(3) h2 { color: var(--teal-dark); }
      @media (prefers-color-scheme: dark) {
        .filter-group h2 { color: var(--pink); }
        .filter-group:nth-child(2) h2 { color: #b79cff; }
        .filter-group:nth-child(3) h2 { color: var(--teal); }
      }
      .pills { display: flex; flex-wrap: wrap; gap: 7px; }
      .pill {
        appearance: none;
        border: 2px solid var(--ink);
        background: var(--surface);
        color: var(--ink);
        font-family: inherit;
        font-size: 0.88rem;
        font-weight: 800;
        padding: 6px 14px;
        border-radius: 999px;
        cursor: pointer;
        transition: transform 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s;
      }
      .pill:hover { transform: translateY(-2px) rotate(-1deg); box-shadow: 3px 3px 0 var(--ink); }
      .pill:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
      .pill[aria-pressed="true"] {
        background: var(--pink-dark);
        border-color: var(--ink);
        color: #ffffff;
        transform: rotate(-1.6deg);
        box-shadow: 3px 3px 0 var(--ink);
      }
      .squiggle {
        height: 12px;
        margin: 20px 2px 2px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='12' viewBox='0 0 26 12'%3E%3Cpath d='M1 6 Q7 1 13 6 T25 6' fill='none' stroke='%23ff2e93' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
        background-repeat: repeat-x;
        background-position: center;
      }
      .count-line {
        margin: 12px 2px 18px;
        font-family: "Permanent Marker", cursive;
        font-size: 1.12rem;
        color: var(--ink);
        transform: rotate(-0.5deg);
      }
      .count-line::before { content: "★ "; color: var(--pink); }

      /* ---------- Cards ---------- */
      .grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 22px;
      }
      .card {
        --rot: -0.7deg;
        --sc: var(--pink);
        background: var(--surface);
        border: 2.5px solid var(--ink);
        border-radius: var(--radius);
        box-shadow: 7px 7px 0 var(--sc);
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        transform: rotate(var(--rot));
        transition: transform 0.18s ease, box-shadow 0.18s ease;
      }
      .card:nth-child(4n+2) { --rot: 0.6deg; --sc: var(--teal); }
      .card:nth-child(4n+3) { --rot: -0.5deg; --sc: var(--purple); }
      .card:nth-child(4n)   { --rot: 0.8deg; --sc: var(--orange); }
      .card:hover {
        transform: rotate(0deg) translateY(-5px) scale(1.02);
        box-shadow: 11px 13px 0 var(--sc);
      }
      .card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
      .card h3 {
        font-family: "Titan One", "Nunito", sans-serif;
        font-size: 1.3rem;
        font-weight: 400;
        line-height: 1.18;
        margin: 0;
      }
      .theme-pill {
        flex: none;
        font-size: 0.7rem;
        font-weight: 800;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        padding: 5px 11px;
        border-radius: 999px;
        white-space: nowrap;
        border: 2px solid var(--ink);
        box-shadow: 2px 2px 0 var(--ink);
        transform: rotate(2.5deg);
      }
      .theme-santa-christmas { background: #e63946; color: #ffffff; }
      .theme-costume  { background: #ff8c1a; color: #381c00; }
      .theme-food     { background: #ffd60a; color: #453500; }
      .theme-undie    { background: #ff5da2; color: #46002a; }
      .theme-newyear  { background: #4361ee; color: #ffffff; }
      .theme-valentine{ background: #d81159; color: #ffffff; }
      .theme-pirate   { background: #23232e; color: #ffd60a; }
      .theme-holiday-seasonal { background: #1d7a3a; color: #ffffff; }
      .when {
        font-weight: 800;
        font-size: 1.02rem;
      }
      .where { color: var(--ink-soft); font-weight: 700; font-size: 0.95rem; }
      .meta-row { display: flex; flex-wrap: wrap; gap: 6px; }
      .chip {
        background: var(--yellow);
        color: #271540;
        border: 2px solid var(--ink);
        border-radius: 999px;
        padding: 3px 11px;
        font-size: 0.83rem;
        font-weight: 800;
        transform: rotate(-2deg);
        box-shadow: 2px 2px 0 var(--ink);
      }
      .wacky {
        position: relative;
        background: var(--wacky-bg);
        border: 2px dashed var(--ink);
        border-radius: 12px;
        padding: 12px 13px 11px;
        font-size: 0.95rem;
        font-weight: 600;
      }
      .wacky .wacky-label {
        display: block;
        font-family: "Permanent Marker", cursive;
        font-size: 0.95rem;
        font-weight: 400;
        color: var(--pink-dark);
        margin-bottom: 3px;
        transform: rotate(-1deg);
      }
      @media (prefers-color-scheme: dark) {
        .wacky .wacky-label { color: var(--pink); }
      }
      .stamp {
        position: absolute;
        top: -13px;
        right: 10px;
        font-family: "Permanent Marker", cursive;
        font-size: 0.68rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--purple);
        background: var(--surface);
        border: 2.5px solid var(--purple);
        border-radius: 7px;
        padding: 2px 8px;
        transform: rotate(7deg);
      }
      @media (prefers-color-scheme: dark) {
        .stamp { color: #b79cff; border-color: #b79cff; }
      }
      dl.details {
        margin: 0;
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 5px 14px;
        font-size: 0.92rem;
      }
      dl.details dt { font-weight: 800; color: var(--ink-soft); }
      dl.details dd { margin: 0; }
      .register {
        margin-top: auto;
        display: block;
        text-align: center;
        background: var(--pink-dark);
        color: #ffffff;
        font-weight: 800;
        font-size: 0.98rem;
        text-decoration: none;
        padding: 12px 16px;
        border-radius: 12px;
        border: 2.5px solid var(--ink);
        box-shadow: 4px 4px 0 var(--ink);
        transition: transform 0.15s, box-shadow 0.15s;
      }
      .card:nth-child(4n+2) .register { background: var(--teal-dark); }
      .card:nth-child(4n+3) .register { background: var(--purple-dark); }
      .card:nth-child(4n) .register { background: var(--orange-dark); }
      .register:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--ink); }
      .register:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
      .register:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }

      .empty {
        display: none;
        text-align: center;
        padding: 44px 20px;
        background: var(--surface);
        border: 3px dashed var(--ink);
        border-radius: var(--radius);
        color: var(--ink-soft);
        font-weight: 700;
        transform: rotate(-0.5deg);
      }
      .empty.show { display: block; }
      .empty button {
        margin-top: 12px;
        font-family: inherit;
        font-weight: 800;
        font-size: 0.92rem;
        padding: 8px 18px;
        border-radius: 999px;
        border: 2px solid var(--ink);
        background: var(--yellow);
        color: #271540;
        box-shadow: 3px 3px 0 var(--ink);
        cursor: pointer;
      }

      footer {
        margin-top: 28px;
        padding-top: 18px;
        border-top: 3px dashed var(--ink);
        color: var(--ink-soft);
        font-size: 0.9rem;
      }
      footer p { margin: 0 0 6px; }
      footer strong {
        font-family: "Permanent Marker", cursive;
        font-weight: 400;
        letter-spacing: 0.02em;
        color: var(--pink-dark);
      }
      @media (prefers-color-scheme: dark) {
        footer strong { color: var(--pink); }
      }

      @media (max-width: 560px) {
        .burst {
          position: static;
          width: 84px;
          height: 84px;
          margin: 2px 0 12px;
        }
        .burst span { font-size: 0.68rem; }
      }
      @media (max-width: 480px) {
        .wrap { padding: 22px 14px 42px; }
        .grid { grid-template-columns: 1fr; }
        .filters { gap: 14px; box-shadow: 5px 5px 0 var(--teal); }
        .marquee { margin-left: -8px; margin-right: -8px; }
      }
      @media (max-width: 640px) {
        .filters-toggle {
          display: flex;
          align-items: center;
          gap: 10px;
          width: 100%;
          font-family: "Permanent Marker", cursive;
          font-size: 1.08rem;
          font-weight: 400;
          letter-spacing: 0.02em;
          color: #271540;
          background: var(--yellow);
          border: 2.5px solid var(--ink);
          border-radius: 14px;
          box-shadow: 4px 4px 0 var(--ink);
          padding: 11px 16px;
          cursor: pointer;
          transform: rotate(-0.6deg);
        }
        .filters-toggle:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
        .filters-toggle:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
        .filters-badge {
          font-family: "Nunito", system-ui, sans-serif;
          font-size: 0.78rem;
          font-weight: 900;
          letter-spacing: 0.03em;
          background: var(--pink-dark);
          color: #ffffff;
          border: 2px solid var(--ink);
          border-radius: 999px;
          padding: 2px 10px;
          white-space: nowrap;
        }
        .filters-badge[hidden] { display: none; }
        .filters-toggle-arrow {
          margin-left: auto;
          font-size: 1.25rem;
          line-height: 1;
          transition: transform 0.18s ease;
        }
        .filters.open .filters-toggle-arrow { transform: rotate(180deg); }
        .filter-groups { display: block; width: 100%; }
        .filters:not(.open) .filter-groups { display: none; }
        .filter-groups .filter-group + .filter-group { margin-top: 16px; }
      }
      @media (prefers-reduced-motion: reduce) {
        .marquee-track { animation: none; }
        .burst { animation: none; transform: rotate(12deg); }
        .card, .pill, .register, .filters-toggle, .filters-toggle-arrow { transition: none; }
        .card:hover { transform: rotate(var(--rot)); box-shadow: 7px 7px 0 var(--sc); }
        .pill:hover { transform: none; box-shadow: none; }
        .pill[aria-pressed="true"] { transform: none; }
        .register:hover, .register:active { transform: none; }
      }
    
      /* ---------- v2 additions: card links + race pages ---------- */
      /* Pill colors for the 2026-10 sweep themes (base theme colors live
         in the SRC stylesheet; these layer on top the same way). */
      .theme-foam { background: #4cc9f0; color: #07304a; }
      .theme-mud  { background: #8a5a2b; color: #ffffff; }
      .theme-glow { background: #8338ec; color: #ffffff; }
      /* Pill colors for the 2026-10 Pennsylvania themes. */
      .theme-halloween { background: #ff8500; color: #1a1a1a; }
      .theme-movie { background: #c1121f; color: #ffffff; }
      .card h3 a.card-link { color: inherit; text-decoration: none; }
      .card h3 a.card-link:hover { text-decoration: underline; text-decoration-color: var(--pink); text-underline-offset: 3px; }
      .card h3 a.card-link:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
      .more {
        font-weight: 800;
        font-size: 0.92rem;
        color: var(--purple-dark);
        text-decoration: none;
      }
      .more:hover { text-decoration: underline; text-underline-offset: 3px; }
      .more:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
      @media (prefers-color-scheme: dark) { .more { color: #b79cff; } }
      .crumb { font-weight: 800; font-size: 0.95rem; margin-bottom: 16px; }
      .crumb a { color: var(--pink-dark); text-decoration: none; }
      .crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
      .crumb .sep { color: var(--ink-soft); margin: 0 6px; }
      .crumb [aria-current] { color: var(--ink-soft); }
      @media (prefers-color-scheme: dark) { .crumb a { color: var(--pink); } }
      .race-head .theme-pill { font-size: 0.8rem; margin-bottom: 14px; display: inline-block; }
      h1.race-title {
        font-size: clamp(2.1rem, 7vw, 3.6rem);
        transform: rotate(-1.2deg);
        margin-bottom: 10px;
      }
      .race-when { font-size: 1.12rem; font-weight: 800; margin: 0 0 4px; }
      .race-where { color: var(--ink-soft); font-weight: 700; font-size: 1.02rem; margin: 0 0 20px; }
      .race-facts {
        background: var(--surface);
        border: 3px solid var(--ink);
        border-radius: 20px;
        box-shadow: 8px 8px 0 var(--purple);
        padding: 22px 24px;
        margin: 24px 0 8px;
      }
      .race-facts dl.details { font-size: 1.02rem; gap: 9px 20px; }
      .register.big { font-size: 1.08rem; padding: 15px 20px; margin-top: 20px; }
      .verified { color: var(--ink-soft); font-weight: 700; font-size: 0.9rem; margin: 14px 0 0; }
      .related-title {
        font-family: "Nunito", sans-serif;
        font-weight: 900;
        font-size: 1.7rem;
        color: var(--purple-dark);
        transform: rotate(-1deg);
        margin: 38px 0 18px;
      }
      @media (prefers-color-scheme: dark) { .related-title { color: #b79cff; } }
      /* ---------- landing pages + browse-by-state row ---------- */
      .state-browse {
        display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
        margin: 20px 0 2px;
      }
      .state-browse .browse-label { font-weight: 900; font-size: 1rem; margin-right: 2px; }
      .state-chip {
        display: inline-block;
        font-weight: 800; font-size: 0.95rem;
        color: var(--ink); text-decoration: none;
        background: var(--surface);
        border: 3px solid var(--ink); border-radius: 999px;
        padding: 7px 16px;
        box-shadow: 3px 3px 0 var(--purple);
      }
      .state-chip:hover { text-decoration: underline; text-underline-offset: 3px; }
      .state-chip:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
      .state-chip.tilt-l { transform: rotate(-1.4deg); }
      .state-chip.tilt-r { transform: rotate(1.2deg); }
      .landing-intro { font-size: 1.08rem; font-weight: 400; line-height: 1.55; max-width: 62ch; margin: 0 0 24px; }
      /* ---------- 404 page ---------- */
      .lost { text-align: center; padding: 12px 0 8px; }
      .lost .race-title { text-align: center; }
      .lost-mascot { width: min(230px, 58vw); height: auto; margin: 6px auto 14px; display: block; transform: rotate(-2deg); }
      .lost-body { font-size: 1.1rem; font-weight: 400; line-height: 1.6; max-width: 54ch; margin: 0 auto 8px; }
      .lost-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 22px; }
      .lost-actions .register { margin-top: 0; }
      .btn-ghost {
        display: inline-block;
        font-weight: 800; font-size: 1.02rem;
        color: var(--ink); text-decoration: none;
        background: var(--surface);
        border: 3px solid var(--ink); border-radius: 999px;
        padding: 13px 22px;
        box-shadow: 4px 4px 0 var(--purple);
        transform: rotate(1.2deg);
      }
      .btn-ghost:hover { text-decoration: underline; text-underline-offset: 3px; }
      .btn-ghost:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
      /* ---------- v2.1 readability pass (user feedback 2026-10-11) ----------
         The chunky display font and the tri-color confetti/dot backgrounds
         were hard to read. Now: Nunito for all body/card/heading/button
         text (Titan One survives ONLY on the homepage masthead wordmark
         and the 404 headline); page background is solid cream with no
         pattern; pink/purple/teal remain only as accents (masthead,
         marquee bands, badges, buttons, card top stripes). Cards are
         solid white with dark plum text and a subtle shadow. */
      :root { --ink-soft: #503a6e; --card-ink: #33113f; }
      body { background-image: none; }
      .tagline { font-weight: 700; }
      /* Brief P1#8: the masthead wordmark is now a <p class="brand">
         (see HEADER above), styled to match the old bare-h1 wordmark
         exactly, including the dark-mode .pop color. */
      header .brand {
        font-family: "Titan One", "Nunito", sans-serif;
        font-weight: 400;
        text-transform: uppercase;
        font-size: clamp(3.4rem, 12vw, 6.4rem);
        letter-spacing: 0.01em;
        margin: 0 0 14px;
        line-height: 0.95;
        color: var(--pink);
        transform: rotate(-1.6deg);
        transform-origin: left center;
        text-shadow: 3px 3px 0 var(--teal), 7px 7px 0 var(--yellow);
      }
      header .brand .pop {
        color: var(--purple);
        display: inline-block;
        transform: rotate(2.5deg);
        text-shadow: 3px 3px 0 var(--pink), 7px 7px 0 var(--teal);
      }
      @media (prefers-color-scheme: dark) {
        header .brand .pop { color: #a06bff; }
      }
      /* Brief P1#8: the homepage's single H1 carries the keywords. It
         sits under the wordmark as a plain bold subhead, not a second
         display headline. */
      .home-h1 {
        font-family: "Nunito", sans-serif;
        font-weight: 900;
        font-size: 1.35rem;
        line-height: 1.3;
        margin: 2px 0 10px;
      }
      /* Brief P1#8: filter groups are fieldsets with legends now (see
         _fieldsets below); the legend inherits the old h2 styling and
         the fieldset itself carries no border or padding. */
      fieldset.filter-group { border: 0; padding: 0; margin: 0; }
      .filter-group legend { padding: 0; }
      /* Brief P1#4: hub-page FAQ block. */
      .faq { margin: 30px 0 8px; }
      .faq h3 { margin: 16px 0 2px; }
      .faq p { margin: 0 0 10px; }
      /* Brief P2: trust-page body. */
      .trust-body { margin: 8px 0 24px; }
      .trust-body h2 { margin: 24px 0 6px; }
      .trust-body p { margin: 0 0 12px; }
      /* Brief P1#6: per-edition note on series race pages. */
      .edition-note { margin: 0 0 18px; }
      .burst span { font-family: "Nunito", sans-serif; font-weight: 900; }
      .marquee-track span { font-family: "Nunito", sans-serif; font-weight: 900; }
      .filter-group h2, .filter-group legend { font-family: "Nunito", sans-serif; font-weight: 900; font-size: 1.02rem; }
      .count-line { font-family: "Nunito", sans-serif; font-weight: 800; }
      .filters-toggle { font-family: "Nunito", sans-serif; font-weight: 900; }
      .card {
        background: #ffffff;
        color: var(--card-ink);
        border-top: 7px solid var(--sc);
        box-shadow: 0 8px 22px rgba(39, 21, 64, 0.13);
      }
      .card:hover { box-shadow: 0 14px 28px rgba(39, 21, 64, 0.18); }
      .card h3 { font-family: "Nunito", sans-serif; font-weight: 900; }
      .card .details dt { color: var(--card-ink); }
      .card .details dd { font-weight: 700; }
      .wacky { background: var(--bg); font-weight: 400; }
      .wacky .wacky-label { font-family: "Nunito", sans-serif; font-weight: 900; }
      .stamp { font-family: "Nunito", sans-serif; font-weight: 800; }
      .filters {
        background: #ffffff;
        border-top: 7px solid var(--teal);
        box-shadow: 0 8px 22px rgba(39, 21, 64, 0.12);
      }
      .race-facts {
        background: #ffffff;
        color: var(--card-ink);
        box-shadow: 0 8px 22px rgba(39, 21, 64, 0.13);
      }
      h1.race-title {
        font-family: "Nunito", sans-serif;
        font-weight: 900;
        letter-spacing: -0.01em;
        color: var(--purple-dark);
        text-shadow: none;
      }
      .lost h1.race-title {
        font-family: "Titan One", "Nunito", sans-serif;
        font-weight: 400;
        color: var(--pink);
        text-shadow: 3px 3px 0 var(--teal), 7px 7px 0 var(--yellow);
      }
      footer strong { font-family: "Nunito", sans-serif; font-weight: 900; }
      @media (prefers-color-scheme: dark) {
        .card, .filters, .race-facts {
          background: var(--surface);
          color: var(--ink);
          box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
        }
        .card:hover { box-shadow: 0 14px 28px rgba(0, 0, 0, 0.55); }
        .card .details dt { color: var(--ink); }
        .wacky { background: var(--bg); }
        h1.race-title { color: #b79cff; }
        .lost h1.race-title { color: var(--pink); }
      }
      /* ---------- v2.2 quick wins (UX review Q1–Q7) ---------- */
      a.theme-pill { color: inherit; text-decoration: none; cursor: pointer; }
      a.theme-pill:hover { text-decoration: underline; text-underline-offset: 2px; }
      a.theme-pill:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
      .wrap-banner {
        background: #ffffff; color: var(--card-ink);
        border: 3px solid var(--ink); border-top: 7px solid var(--teal);
        border-radius: 16px;
        box-shadow: 0 8px 22px rgba(39, 21, 64, 0.13);
        padding: 14px 18px; font-weight: 700; font-size: 1.02rem;
        margin: 18px 0 4px;
      }
      .race-where a, .race-facts a.map-link {
        color: inherit;
        text-decoration: underline;
        text-decoration-color: var(--pink);
        text-underline-offset: 3px;
      }
      footer nav.foot-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 10px 0 8px; }
      footer a { color: var(--pink-dark); font-weight: 700; text-decoration: none; }
      footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
      footer a:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
      @media (prefers-color-scheme: dark) {
        footer a { color: var(--pink); }
        .wrap-banner { background: var(--surface); color: var(--ink); }
      }
      /* ---------- v2.3: My Wacky List favorites + Roundup scaffold ------ */
      .fav-nav { text-align: right; margin-bottom: 2px; }
      .fav-nav-link {
        display: inline-block;
        font-family: "Nunito", sans-serif; font-weight: 900; font-size: 0.95rem;
        color: var(--ink); text-decoration: none;
        background: var(--surface);
        border: 3px solid var(--ink); border-radius: 999px;
        padding: 6px 15px;
        box-shadow: 3px 3px 0 var(--pink);
        transform: rotate(1deg);
      }
      .fav-nav-link:hover { text-decoration: underline; text-underline-offset: 3px; }
      .fav-nav-link:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
      .fav-nav-count { font-weight: 900; }
      [data-fav-count][hidden] { display: none; }
      .fav-toggle {
        flex: none; cursor: pointer;
        width: 42px; height: 42px; border-radius: 50%;
        border: 3px solid var(--ink);
        background: #ffffff; color: var(--ink);
        font-family: "Nunito", sans-serif;
        font-size: 1.3rem; line-height: 1;
        display: inline-flex; align-items: center; justify-content: center;
        box-shadow: 2.5px 2.5px 0 var(--ink);
        transform: rotate(3deg);
        padding: 0;
      }
      .fav-toggle:hover { transform: rotate(3deg) scale(1.08); }
      .fav-toggle:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
      .fav-toggle[aria-pressed="true"] { background: var(--yellow); }
      .fav-toggle .fav-star { pointer-events: none; }
      .fav-toggle.labeled {
        width: auto; height: auto; border-radius: 999px;
        padding: 10px 18px; gap: 8px;
        font-size: 1rem; font-weight: 900;
        transform: rotate(-1deg);
      }
      .fav-toggle.labeled:hover { transform: rotate(-1deg) scale(1.04); }
      .fav-toggle.labeled .fav-star { font-size: 1.15rem; }
      .race-fav { margin: 16px 0 4px; }
      .mylist-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 4px 0 22px; }
      .mylist-actions .register { margin-top: 0; }
      .mylist-empty { text-align: center; padding: 24px 0 10px; }
      .mylist-empty .register { margin-top: 14px; }
      /* Roundup capture (rendered only once ROUNDUP_FORM_ACTION is set) */
      .roundup {
        background: #ffffff; color: var(--card-ink);
        border: 3px solid var(--ink); border-top: 7px solid var(--pink);
        border-radius: 20px;
        box-shadow: 0 8px 22px rgba(39, 21, 64, 0.13);
        padding: 24px 26px; margin: 28px 0 6px;
      }
      .roundup-title {
        font-family: "Nunito", sans-serif; font-weight: 900;
        font-size: 1.55rem; color: var(--purple-dark);
        margin: 0 0 8px; transform: rotate(-1deg);
      }
      .roundup-copy { margin: 0 0 16px; max-width: 62ch; }
      .roundup-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
      .roundup-field { display: flex; flex-direction: column; gap: 5px; font-weight: 800; font-size: 0.9rem; }
      .roundup-field input, .roundup-field select {
        font: inherit; font-weight: 700; color: var(--card-ink);
        background: #ffffff;
        border: 3px solid var(--ink); border-radius: 12px;
        padding: 10px 12px;
      }
      .roundup-field input:focus-visible, .roundup-field select:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
      .roundup-btn { margin-top: 0; border: 3px solid var(--ink); cursor: pointer; font: inherit; }
      .roundup.compact { padding: 16px 18px; margin: 18px 0 6px; }
      .roundup.compact .roundup-title { font-size: 1.15rem; }
      footer .roundup { text-align: left; }
      @media (prefers-color-scheme: dark) {
        .fav-toggle { background: var(--surface); box-shadow: 2.5px 2.5px 0 rgba(0, 0, 0, 0.55); }
        .fav-toggle[aria-pressed="true"] { background: var(--yellow); color: #271540; }
        .roundup { background: var(--surface); color: var(--ink); }
        .roundup-title { color: #b79cff; }
        .roundup-field input, .roundup-field select { background: var(--surface); color: var(--ink); }
      }
      /* ---------- v2.5: simple prose pages (privacy) ---------- */
      .prose { max-width: 68ch; }
      .prose p { font-size: 1.05rem; line-height: 1.62; margin: 0 0 16px; }
      .prose h2 {
        font-family: "Nunito", sans-serif; font-weight: 900;
        font-size: 1.32rem; color: var(--purple-dark);
        margin: 30px 0 8px;
      }
      .prose ul { font-size: 1.05rem; line-height: 1.62; margin: 0 0 16px; padding-left: 24px; }
      .prose li { margin-bottom: 4px; }
      .prose a { color: var(--pink-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
      .prose a:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
      @media (prefers-color-scheme: dark) {
        .prose h2 { color: #b79cff; }
        .prose a { color: var(--pink); }
      }
      /* ---------- v2.6: starburst must not cover the sign-in row ----------
         Found 2026-10-12 during the sign-in diagnosis: the masthead .burst
         (position:absolute, top:-8px, right:2px, 108x108) sits exactly over
         the right end of the .fav-nav row injected at the top of <header>,
         so it visually covers part of the "Sign in with Google" button and
         an automated click on the button was refused as obscured. The burst
         is decorative (aria-hidden), so it must never take clicks; on
         desktop widths the nav row also reserves the burst's width so the
         buttons are fully visible. Under 561px the burst is static
         (in-flow) in the base CSS, so no reservation is needed there. */
      .burst { pointer-events: none; }
      header .fav-nav { position: relative; z-index: 3; }
      @media (min-width: 561px) {
        header .fav-nav { padding-right: 118px; }
      }
      /* ---------- v2.7: deadline urgency badges (UX review N2) ----------
         Yellow pill with dark-plum text (#33113f on #ffd60a, ~9:1
         contrast), rendered at build time on cards and race pages when
         a recorded registration deadline or price rise is within 60
         days; DEADLINE_SCRIPT hides them once the date passes. */
      .deadline-badge {
        display: inline-block; align-self: flex-start;
        font-weight: 900; font-size: 0.8rem;
        letter-spacing: 0.04em; text-transform: uppercase;
        background: var(--yellow); color: #33113f;
        border: 3px solid var(--ink); border-radius: 999px;
        padding: 4px 12px; margin: 0 0 10px;
        transform: rotate(-1.2deg);
        box-shadow: 2.5px 2.5px 0 var(--ink);
      }
      .race-head .deadline-badge { margin: 2px 0 16px; }
      .race-deadline { margin: 0; }
      @media (prefers-color-scheme: dark) {
        .deadline-badge { border-color: #271540; box-shadow: 2.5px 2.5px 0 rgba(0, 0, 0, 0.55); }
      }

      /* ---------- v2.4: Google sign-in + favorites sync ---------- */
      .fav-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
      .auth-area { display: inline-flex; align-items: center; }
      .auth-btn {
        display: inline-flex; align-items: center; gap: 9px;
        font-family: "Nunito", sans-serif; font-weight: 800; font-size: 0.92rem;
        color: var(--card-ink); background: #ffffff;
        border: 3px solid var(--ink); border-radius: 999px;
        padding: 6px 15px; cursor: pointer;
        box-shadow: 3px 3px 0 var(--teal);
      }
      .auth-btn .g-mark { display: block; flex: none; }
      .auth-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
      .auth-btn:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
      .auth-user { display: inline-flex; align-items: center; gap: 10px; }
      .auth-hello { font-family: "Nunito", sans-serif; font-weight: 900; font-size: 0.95rem; }
      .auth-btn.auth-signout { box-shadow: 3px 3px 0 var(--pink); padding: 5px 13px; font-size: 0.88rem; }
      .auth-btn[hidden], .auth-user[hidden], .mylist-signin-prompt[hidden],
      .auth-area[hidden] { display: none; }
      .mylist-signin-prompt { font-weight: 800; font-size: 1.02rem; color: var(--ink-soft); margin: -4px 0 18px; }
      @media (prefers-color-scheme: dark) {
        .auth-btn { background: var(--surface); color: var(--ink); }
      }

      .dist-away { margin-top: 6px; font-weight: 800; color: var(--accent-ink); }
      .nearby-btn[aria-pressed="true"] { background: var(--yellow); }
      .nearby-status { margin: 8px 0 0; font-weight: 700; }
      .nearby-status:empty { margin: 0; }
      .nearby-note { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
      .filter-group[hidden] { display: none; }
      .nearby-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 18px; }
      .nearby-controls { display: flex; flex-wrap: wrap; gap: 8px 18px; }
      .nearby-controls[hidden] { display: none; }
      .race-nearby { margin: 2px 0 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
      .nearby-result { font-weight: 800; color: var(--accent-ink); }

      /* ---------- v2.9: search box on listing pages ---------- */
      .search-group { flex: 1 0 100%; }
      .search-input {
        font: inherit; font-weight: 700; color: var(--card-ink);
        background: #ffffff;
        border: 3px solid var(--ink); border-radius: 12px;
        padding: 10px 14px; width: 100%;
      }
      .search-input::placeholder { color: var(--ink-soft); font-weight: 600; }
      .search-input:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
      .nearby-bar .search-input { flex: 1 1 240px; width: auto; }
      @media (prefers-color-scheme: dark) {
        .search-input { background: var(--surface); color: var(--ink); }
      }

      /* ---------- v2.10: "Where do you run?" picker ---------- */
      .home-picker { text-align: center; margin: 24px 0 4px; }
      .home-picker-title { font-size: 1.35rem; font-weight: 900; margin: 0 0 12px; }
      .home-picker-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
      .picker-btn {
        appearance: none; font-family: inherit; cursor: pointer;
        font-size: 1.02rem; font-weight: 800; color: var(--ink);
        background: var(--surface);
        border: 3px solid var(--ink); border-radius: 999px;
        padding: 11px 22px;
        box-shadow: 3px 3px 0 var(--purple);
        transition: transform 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s;
      }
      .picker-btn:hover { transform: translateY(-2px) rotate(-1deg); box-shadow: 4px 4px 0 var(--ink); }
      .picker-btn:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
      .picker-btn[aria-pressed="true"] {
        background: var(--pink-dark); border-color: var(--ink); color: #ffffff;
        transform: rotate(-1.6deg);
      }
      .grid-heading { font-size: 1.5rem; font-weight: 900; margin: 20px 0 2px; }
      .reveal-row { text-align: center; margin: 24px 0 8px; }
      .reveal-btn {
        appearance: none; font-family: inherit; cursor: pointer;
        font-size: 1.05rem; font-weight: 900; color: var(--ink);
        background: var(--yellow);
        border: 3px solid var(--ink); border-radius: 999px;
        padding: 12px 26px;
        box-shadow: 4px 4px 0 var(--ink);
        transition: transform 0.15s, box-shadow 0.15s;
      }
      .reveal-btn:hover { transform: translateY(-2px); box-shadow: 5px 5px 0 var(--ink); }
      .reveal-btn:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
      @media (prefers-reduced-motion: reduce) {
        .picker-btn, .reveal-btn { transition: none; }
        .picker-btn:hover, .picker-btn[aria-pressed="true"], .reveal-btn:hover { transform: none; }
      }
      /* Mobile: the six big pills used to wrap into 3+ tall rows and
         push the first card ~1.4 screens down. Compact 3-column grid
         keeps the whole picker to two short rows. */
      @media (max-width: 600px) {
        .home-picker { margin: 16px 0 0; }
        .home-picker-title { font-size: 1.15rem; margin-bottom: 8px; }
        .home-picker-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
        .picker-btn { padding: 9px 4px; font-size: 0.92rem; box-shadow: 2px 2px 0 var(--purple); }
      }