/* ── RESET & BASE ── */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  
  :root {
    --ink:       #17101f;
    --dark:      #221630;
    --surface:   #2c1e3d;
    --card:      #362647;
    --border:    #4a3560;
    --gold:      #c08a2e;
    --gold-lt:   #e0b15c;
    --gold-dk:   #8a6018;
    --amber:     #c4622d;
    --parchment: #f4e7d0;
    --cream:     #e8d9bc;
    --muted:     #a995c4;
    --forest:    #24462f;
    --forest-lt: #4e8259;
    /* Translucent band fill so the atmosphere layer reads through the
       alternating sections without touching text contrast. */
    --surface-veil: rgba(44,30,61,0.74);
    --font-disp: 'Cinzel Decorative', serif;
    --font-hdg:  'Cinzel', serif;
    --font-body: 'Crimson Pro', serif;
  }

  html { scroll-behavior: smooth; }

  body {
    background: var(--dark);
    color: var(--cream);
    font-family: var(--font-body);
    font-size: 25.2px;
    line-height: 1.7;
    overflow-x: hidden;
  }

  /* ── TEXTURE OVERLAY ── */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1000;
    opacity: 0.6;
  }

  /* ── NAVIGATION ── */
  nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 900;
    background: linear-gradient(180deg, rgba(23,16,31,0.97) 0%, rgba(23,16,31,0.85) 100%);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
  }

  .nav-logo {
    font-family: var(--font-hdg);
    font-size: 1.232rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--gold);
    text-transform: uppercase;
    text-decoration: none;
  }

  .nav-logo span { color: var(--cream); font-weight: 400; }

  .nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
    align-items: center;
  }

  .nav-links a {
    font-family: var(--font-hdg);
    font-size: 1.015rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s;
  }

  .nav-links a:hover { color: var(--gold-lt); }

  /* ── NAV DROPDOWN ── */
  .nav-dropdown { position: relative; }

  .nav-dropdown > a .nav-caret {
    display: inline-block;
    font-size: 0.75em;
    opacity: 0.7;
    margin-left: 0.2rem;
    transition: transform 0.2s ease;
  }

  .nav-dropdown:hover > a .nav-caret,
  .nav-dropdown:focus-within > a .nav-caret { transform: rotate(180deg); }

  /* Invisible bridge so the pointer can cross the gap to the menu. */
  .nav-dropdown::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    height: 1rem;
  }

  .nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.9rem);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 260px;
    background: linear-gradient(180deg, rgba(23,16,31,0.98) 0%, rgba(34,22,48,0.98) 100%);
    border: 1px solid var(--border);
    border-radius: 3px;
    list-style: none;
    padding: 0.6rem 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    box-shadow: 0 14px 34px rgba(0,0,0,0.45);
  }

  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }

  .nav-dropdown-menu li a {
    display: block;
    padding: 0.6rem 1.5rem;
    white-space: nowrap;
  }

  .nav-dropdown-menu li a:hover { background: rgba(192,138,46,0.08); }

  [data-theme="light"] .nav-dropdown-menu {
    background: #fbf4e4;
    border-color: #d6c3a0;
    box-shadow: 0 14px 34px rgba(60,40,20,0.18);
  }

  .nav-cta {
    font-family: var(--font-hdg);
    font-size: 0.943rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink) !important;
    background: var(--gold);
    padding: 0.5rem 1.1rem;
    border-radius: 2px;
    transition: background 0.2s !important;
  }

  .nav-cta:hover { background: var(--gold-lt) !important; color: var(--ink) !important; }

  .hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px;
  }

  .hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--gold);
    transition: all 0.3s;
  }

  /* ── HERO ── */
  .hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8rem 2rem 4rem;
    position: relative;
    overflow: hidden;
  }

  .hero-bg {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 80% 60% at 50% 40%, rgba(192,138,46,0.08) 0%, transparent 70%),
      radial-gradient(ellipse 60% 80% at 20% 80%, rgba(36,70,47,0.15) 0%, transparent 60%),
      radial-gradient(ellipse 50% 60% at 80% 20%, rgba(36,70,47,0.1) 0%, transparent 60%),
      /* Translucent so the moon and starfield behind the hero read through.
         Opaque here and the whole atmosphere layer is invisible. */
      linear-gradient(180deg, rgba(23,16,31,0.72) 0%, rgba(34,22,48,0.28) 42%, rgba(31,21,41,0.78) 100%);
  }

  /* Decorative constellation dots */
  .hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(1px 1px at 10% 20%, rgba(192,138,46,0.6) 0%, transparent 100%),
      radial-gradient(1px 1px at 25% 60%, rgba(192,138,46,0.4) 0%, transparent 100%),
      radial-gradient(1px 1px at 40% 15%, rgba(192,138,46,0.5) 0%, transparent 100%),
      radial-gradient(1px 1px at 60% 75%, rgba(192,138,46,0.3) 0%, transparent 100%),
      radial-gradient(1px 1px at 75% 35%, rgba(192,138,46,0.6) 0%, transparent 100%),
      radial-gradient(1px 1px at 85% 65%, rgba(192,138,46,0.4) 0%, transparent 100%),
      radial-gradient(1.5px 1.5px at 15% 80%, rgba(192,138,46,0.5) 0%, transparent 100%),
      radial-gradient(1px 1px at 90% 10%, rgba(192,138,46,0.4) 0%, transparent 100%),
      radial-gradient(1px 1px at 50% 45%, rgba(192,138,46,0.3) 0%, transparent 100%),
      radial-gradient(1.5px 1.5px at 70% 85%, rgba(192,138,46,0.5) 0%, transparent 100%),
      radial-gradient(1px 1px at 35% 90%, rgba(192,138,46,0.3) 0%, transparent 100%),
      radial-gradient(1px 1px at 55% 5%, rgba(192,138,46,0.4) 0%, transparent 100%);
  }

  .hero-content { position: relative; z-index: 2; max-width: 820px; }

  .hero-eyebrow {
    font-family: var(--font-hdg);
    font-size: 1.015rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.5rem;
    opacity: 0;
    animation: fadeUp 0.8s 0.2s ease forwards;
  }

  /* ── HERO SIGIL: pentacle drawing itself inside a rune ring ── */
  .hero-spiral {
    width: 172px;
    height: 172px;
    margin: 0 auto 2rem;
    opacity: 0;
    animation: fadeUp 0.8s 0.3s ease forwards;
  }

  .hero-spiral svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 22px rgba(192,138,46,0.4));
    overflow: visible;
  }

  @media (max-width: 600px) { .hero-spiral { width: 134px; height: 134px; } }

  /* The rune ring turns slowly and forever; the pentacle inside stays upright
     so the star never reads as tilted. */
  .sigil-runes {
    transform-origin: 50px 50px;
    animation: slowSpin 90s linear infinite;
  }

  @keyframes slowSpin { to { transform: rotate(360deg); } }

  /* Both rings and the star are drawn on with dash-offset. Lengths are set
     generously above the true path length so no tail is left showing. */
  .sigil-ring-outer,
  .sigil-ring-inner,
  .sigil-star {
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
  }

  .sigil-ring-outer {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: sigilDraw 1.7s 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  .sigil-ring-inner {
    stroke-dasharray: 250;
    stroke-dashoffset: 250;
    animation: sigilDraw 1.5s 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  /* One continuous stroke, drawn point to point — the way a pentacle is
     actually cast, rather than five separate lines appearing at once. */
  .sigil-star {
    stroke-dasharray: 292;
    stroke-dashoffset: 292;
    animation: sigilDraw 2.4s 1.5s cubic-bezier(0.45, 0, 0.25, 1) forwards;
  }

  @keyframes sigilDraw { to { stroke-dashoffset: 0; } }

  .sigil-rune {
    opacity: 0;
    animation: runeIn 1.1s ease forwards;
  }

  @keyframes runeIn {
    0%   { opacity: 0; }
    55%  { opacity: 0.95; }
    100% { opacity: 0.55; }
  }

  .sigil-hub {
    opacity: 0;
    animation: hubIn 1.6s 3.6s ease forwards;
  }

  @keyframes hubIn {
    0%   { opacity: 0; transform: scale(0.4); }
    60%  { opacity: 1; transform: scale(1.15); }
    100% { opacity: 0.9; transform: scale(1); }
  }

  .sigil-hub { transform-origin: 50px 50px; }

  /* Honour the OS setting: hold the finished sigil, skip the performance. */
  @media (prefers-reduced-motion: reduce) {
    .sigil-runes { animation: none; }
    .sigil-ring-outer,
    .sigil-ring-inner,
    .sigil-star { stroke-dashoffset: 0; animation: none; }
    .sigil-rune { opacity: 0.55; animation: none; }
    .sigil-hub { opacity: 0.9; transform: none; animation: none; }
    .hero-spiral { opacity: 1; animation: none; }
  }

  h1.hero-title {
    font-family: var(--font-disp);
    font-size: clamp(2.5rem, 6.72vw, 4.704rem);
    font-weight: 700;
    color: var(--parchment);
    line-height: 1.1;
    margin-bottom: 0.5rem;
    opacity: 0;
    animation: fadeUp 0.8s 0.5s ease forwards;
    text-shadow: 0 2px 40px rgba(192,138,46,0.2);
  }

  .hero-subtitle {
    font-family: var(--font-hdg);
    font-size: clamp(1.087rem, 2.9vw, 1.305rem);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 2rem;
    opacity: 0;
    animation: fadeUp 0.8s 0.6s ease forwards;
  }

  .hero-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 2rem;
    opacity: 0;
    animation: fadeUp 0.8s 0.7s ease forwards;
  }

  .hero-divider::before, .hero-divider::after {
    content: '';
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-dk), var(--gold));
  }
  .hero-divider::after { background: linear-gradient(90deg, var(--gold), var(--gold-dk), transparent); }

  .hero-divider span {
    color: var(--gold);
    font-size: 1.68rem;
  }

  .hero-date {
    font-family: var(--font-hdg);
    font-size: clamp(1.232rem, 3.5vw, 1.54rem);
    letter-spacing: 0.1em;
    color: var(--cream);
    margin-bottom: 0.5rem;
    opacity: 0;
    animation: fadeUp 0.8s 0.75s ease forwards;
  }

  .hero-location {
    font-size: 1.4rem;
    color: var(--muted);
    margin-bottom: 3rem;
    opacity: 0;
    animation: fadeUp 0.8s 0.8s ease forwards;
  }

  .hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    opacity: 0;
    animation: fadeUp 0.8s 0.9s ease forwards;
  }

  .btn-primary {
    font-family: var(--font-hdg);
    font-size: 1.087rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink);
    background: linear-gradient(135deg, var(--gold-lt), var(--gold));
    padding: 0.9rem 2.2rem;
    border-radius: 2px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.25s;
    box-shadow: 0 4px 20px rgba(192,138,46,0.25);
  }

  .btn-primary:hover {
    background: linear-gradient(135deg, var(--gold-lt), var(--amber));
    box-shadow: 0 6px 30px rgba(192,138,46,0.4);
    transform: translateY(-2px);
  }

  .btn-secondary {
    font-family: var(--font-hdg);
    font-size: 1.087rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold-lt);
    background: transparent;
    padding: 0.9rem 2.2rem;
    border-radius: 2px;
    text-decoration: none;
    border: 1px solid var(--gold-dk);
    cursor: pointer;
    transition: all 0.25s;
  }

  .btn-secondary:hover {
    border-color: var(--gold);
    color: var(--gold-lt);
    background: rgba(192,138,46,0.06);
    transform: translateY(-2px);
  }

  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ── SCROLL INDICATOR ── */
  .scroll-hint {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    color: var(--muted);
    font-family: var(--font-hdg);
    font-size: 0.87rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0;
    animation: fadeUp 1s 1.2s ease forwards;
  }

  .scroll-hint::after {
    content: '';
    width: 1px;
    height: 40px;
    background: linear-gradient(180deg, var(--gold-dk), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
  }

  @keyframes scrollPulse {
    0%, 100% { opacity: 0.4; transform: scaleY(1); }
    50% { opacity: 1; transform: scaleY(1.1); }
  }

  /* ── SECTION SHARED ── */
  section { position: relative; }

  .section-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 2rem;
  }

  .section-pad { padding: 6rem 0; }

  .section-label {
    font-family: var(--font-hdg);
    font-size: 0.943rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
  }

  .section-label::before {
    content: '';
    width: 30px;
    height: 1px;
    background: var(--gold);
  }

  h2.section-title {
    font-family: var(--font-disp);
    font-size: clamp(2rem, 4.48vw, 2.912rem);
    color: var(--parchment);
    line-height: 1.15;
    margin-bottom: 1rem;
  }

  .section-lead {
    font-size: 1.61rem;
    color: var(--muted);
    max-width: 760px;
    line-height: 1.8;
  }

  /* ── GOLD RULE ── */
  .gold-rule {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 3rem 0;
  }

  .gold-rule::before, .gold-rule::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), var(--gold-dk));
  }

  .gold-rule::after {
    background: linear-gradient(90deg, var(--gold-dk), var(--border), transparent);
  }

  .gold-rule span { color: var(--gold-dk); font-size: 1.4rem; flex-shrink: 0; }

  /* ── ANNOUNCE BAND ── */
  .announce-band {
    background: linear-gradient(135deg, var(--forest) 0%, #1e3a28 100%);
    border-top: 1px solid rgba(36,70,47,0.6);
    border-bottom: 1px solid rgba(36,70,47,0.6);
    padding: 1.2rem 2rem;
    text-align: center;
  }

  .announce-band p {
    font-family: var(--font-hdg);
    font-size: 1.087rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--cream);
  }

  .announce-band strong { color: var(--gold-lt); }

  /* ── ABOUT SECTION ── */
  .about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
  }

  .about-visual {
    position: relative;
  }

  .about-emblem {
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    display: block;
    position: relative;
  }

  .emblem-ring {
    width: 100%;
    padding-bottom: 100%;
    position: relative;
  }

  .emblem-ring svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 30px rgba(192,138,46,0.15));
  }

  /* ── WHEEL OF THE YEAR ──
     The rim and the sun at the hub stay put; the ring of sabbats turns around
     them, sunwise, one revolution a minute. */
  .wheel-spin {
    transform-origin: 100px 100px;
    animation: slowSpin 60s linear infinite;
  }

  /* Each label runs the same rotation in reverse at the same duration, so it
     orbits with the wheel but never ends up upside down. Both must stay linear
     and identically timed or they drift apart. */
  .wheel-label {
    transform-box: fill-box;
    transform-origin: center;
    animation: slowSpinBack 60s linear infinite;
  }

  @keyframes slowSpinBack { to { transform: rotate(-360deg); } }

  .wheel-hub { transform-origin: 100px 100px; animation: slowSpin 150s linear infinite reverse; }

  @media (prefers-reduced-motion: reduce) {
    .wheel-spin, .wheel-label, .wheel-hub { animation: none; }
  }

  .emblem-center {
    position: absolute;
    inset: 15%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(192,138,46,0.08) 0%, transparent 70%);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .emblem-text {
    font-family: var(--font-disp);
    font-size: 1.54rem;
    color: var(--gold);
    text-align: center;
    line-height: 1.3;
  }

  .about-text p {
    color: var(--cream);
    font-size: 1.54rem;
    line-height: 1.9;
    margin-bottom: 1.5rem;
  }

  .about-text p:last-of-type { margin-bottom: 2rem; }

  .stat-row {
    display: flex;
    gap: 2.5rem;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
  }

  .stat { text-align: center; }

  .stat-num {
    font-family: var(--font-disp);
    font-size: 2.5rem;
    color: var(--gold);
    line-height: 1;
    display: block;
  }

  .stat-label {
    font-family: var(--font-hdg);
    font-size: 0.943rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 0.3rem;
  }

  /* ── WHEEL OF THE YEAR ── */
  .wheel-section {
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  .wheel-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 4rem;
  }

  .wheel-header .section-label { justify-content: center; }

  .sabbat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
  }

  .sabbat-card {
    background: var(--card);
    padding: 1.8rem 1.4rem;
    text-align: center;
    transition: background 0.25s;
    cursor: default;
  }

  .sabbat-card:hover { background: #2c1e3d; }

  .sabbat-symbol {
    font-size: 2.5rem;
    margin-bottom: 0.8rem;
    display: block;
    filter: drop-shadow(0 0 8px rgba(192,138,46,0.3));
  }

  .sabbat-name {
    font-family: var(--font-hdg);
    font-size: 1.232rem;
    font-weight: 600;
    color: var(--gold-lt);
    letter-spacing: 0.05em;
    margin-bottom: 0.2rem;
  }

  .sabbat-date {
    font-size: 1.087rem;
    color: var(--muted);
    font-family: var(--font-hdg);
    letter-spacing: 0.08em;
  }

  .sabbat-note {
    font-size: 1.232rem;
    color: var(--cream);
    margin-top: 0.6rem;
    line-height: 1.4;
    opacity: 0.7;
  }

  .sabbat-card.featured {
    background: linear-gradient(135deg, #3d2b52, var(--card));
    border: 1px solid rgba(192,138,46,0.2);
  }

  .sabbat-card.featured .sabbat-name { color: var(--gold); }

  /* ── COMMUNITY HUB ── */
  .hub-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
    margin-bottom: 4rem;
  }

  .path-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 4rem;
  }

  .path-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 2rem 1.5rem;
    transition: all 0.25s;
    text-decoration: none;
    display: block;
    position: relative;
    overflow: hidden;
  }

  .path-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold-dk), transparent);
    transform: scaleX(0);
    transition: transform 0.3s;
  }

  .path-card:hover { border-color: rgba(192,138,46,0.3); transform: translateY(-4px); }
  .path-card:hover::before { transform: scaleX(1); }

  .path-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
  }

  .path-name {
    font-family: var(--font-hdg);
    font-size: 1.305rem;
    font-weight: 600;
    color: var(--gold-lt);
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
  }

  .path-desc {
    font-size: 1.305rem;
    color: var(--muted);
    line-height: 1.6;
  }

  /* ── BUSINESS DIRECTORY ── */
  .directory-section {
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  .dir-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 3rem;
    flex-wrap: wrap;
    gap: 1.5rem;
  }

  .dir-filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .filter-btn {
    font-family: var(--font-hdg);
    font-size: 0.943rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 2px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.2s;
  }

  .filter-btn:hover, .filter-btn.active {
    border-color: var(--gold-dk);
    color: var(--gold-lt);
    background: rgba(192,138,46,0.06);
  }

  .biz-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  .biz-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1.8rem;
    transition: all 0.25s;
    position: relative;
  }

  /* Paying partners: contrasting ember-orange treatment, slightly larger
     than the standard purple cards so they stand out in the grid. */
  .biz-card.featured-partner {
    border: 2px solid var(--amber);
    background: linear-gradient(180deg, rgba(196,98,45,0.16), rgba(196,98,45,0.04)), var(--card);
    /* `scale` (not transform) so the reveal animation's inline transform
       in app.js can't override it. */
    scale: 1.045;
    box-shadow: 0 10px 32px rgba(196,98,45,0.28);
    z-index: 1;
  }

  .biz-card.featured-partner .biz-name { color: #f0a468; }

  .biz-card.featured-partner::after {
    content: 'Community Partner';
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-family: var(--font-hdg);
    font-size: 0.797rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff6e8;
    background: var(--amber);
    padding: 0.2rem 0.5rem;
    border-radius: 2px;
  }

  .biz-card:hover { border-color: rgba(192,138,46,0.3); transform: translateY(-3px); }

  .biz-card.featured-partner:hover {
    border-color: var(--amber);
  }

  .biz-category {
    font-family: var(--font-hdg);
    font-size: 0.87rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold-dk);
    margin-bottom: 0.5rem;
  }

  .biz-name {
    font-family: var(--font-hdg);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--cream);
    margin-bottom: 0.3rem;
  }

  .biz-location {
    font-size: 1.232rem;
    color: var(--muted);
    margin-bottom: 0.8rem;
  }

  .biz-desc {
    font-size: 1.305rem;
    color: var(--cream);
    line-height: 1.6;
    opacity: 0.8;
    margin-bottom: 1rem;
  }

  .biz-link {
    font-family: var(--font-hdg);
    font-size: 0.943rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1px solid var(--gold-dk);
    padding-bottom: 1px;
    transition: color 0.2s;
  }

  .biz-link:hover { color: var(--gold-lt); }

  .dir-cta {
    text-align: center;
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 1px solid var(--border);
  }

  .dir-cta p {
    color: var(--muted);
    margin-bottom: 1.5rem;
    font-size: 1.4rem;
  }

  /* ── EVENTS SECTION ── */
  .events-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    align-items: start;
  }

  .event-card {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 1.5rem;
    padding: 1.8rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 3px;
    margin-bottom: 1rem;
    transition: all 0.25s;
    text-decoration: none;
  }

  .event-card:hover { border-color: rgba(192,138,46,0.3); transform: translateX(4px); }

  .event-date-box {
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 0.8rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .event-month {
    font-family: var(--font-hdg);
    font-size: 0.87rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold);
  }

  .event-day {
    font-family: var(--font-disp);
    font-size: 2.25rem;
    color: var(--parchment);
    line-height: 1;
  }

  .event-title {
    font-family: var(--font-hdg);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--cream);
    margin-bottom: 0.3rem;
  }

  .event-meta {
    font-size: 1.232rem;
    color: var(--muted);
    margin-bottom: 0.5rem;
  }

  .event-desc {
    font-size: 1.305rem;
    color: var(--cream);
    opacity: 0.75;
    line-height: 1.5;
  }

  .event-tag {
    display: inline-block;
    font-family: var(--font-hdg);
    font-size: 0.797rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    border-radius: 2px;
    margin-top: 0.5rem;
  }

  .tag-free { background: rgba(36,70,47,0.5); color: #7fc98c; border: 1px solid rgba(36,70,47,0.8); }
  .tag-annual { background: rgba(192,138,46,0.12); color: var(--gold); border: 1px solid rgba(192,138,46,0.3); }

  .sidebar-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 2rem;
    margin-bottom: 1.5rem;
  }

  .sidebar-title {
    font-family: var(--font-hdg);
    font-size: 1.087rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.2rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--border);
  }

  .sidebar-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
  }

  .sidebar-list li {
    font-size: 1.305rem;
    color: var(--cream);
    padding-left: 1rem;
    position: relative;
    line-height: 1.4;
  }

  .sidebar-list li::before {
    content: '✦';
    position: absolute;
    left: 0;
    color: var(--gold-dk);
    font-size: 0.78rem;
    top: 0.35rem;
  }

  /* ── NEWCOMER SECTION ── */
  .newcomer-section {
    background: linear-gradient(135deg, #1f1529 0%, var(--dark) 50%, #142418 100%);
    border-top: 1px solid var(--border);
  }

  .newcomer-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 5rem;
    align-items: center;
  }

  .newcomer-text p {
    color: var(--cream);
    font-size: 1.54rem;
    line-height: 1.9;
    margin-bottom: 1.5rem;
  }

  .step-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2rem;
  }

  .step-item {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
  }

  .step-num {
    font-family: var(--font-disp);
    font-size: 1.875rem;
    color: var(--gold-dk);
    line-height: 1;
    min-width: 2rem;
    opacity: 0.7;
  }

  .step-content {}

  .step-title {
    font-family: var(--font-hdg);
    font-size: 1.232rem;
    font-weight: 600;
    color: var(--gold-lt);
    margin-bottom: 0.2rem;
    letter-spacing: 0.05em;
  }

  .step-desc {
    font-size: 1.305rem;
    color: var(--muted);
    line-height: 1.5;
  }

  /* ── SUPPORT BAND ── */
  .support-band {
    background: linear-gradient(135deg, var(--forest) 0%, #1a2e22 50%, var(--forest) 100%);
    border-top: 1px solid rgba(36,70,47,0.5);
    border-bottom: 1px solid rgba(36,70,47,0.5);
    padding: 5rem 0;
    text-align: center;
  }

  .support-band h2 { color: var(--parchment); margin-bottom: 1rem; }

  .support-band p {
    color: var(--cream);
    opacity: 0.8;
    max-width: 720px;
    margin: 0 auto 2.5rem;
    font-size: 1.47rem;
  }

  /* ── FOOTER ── */
  footer {
    background: var(--ink);
    border-top: 1px solid var(--border);
    padding: 4rem 0 2rem;
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
  }

  .footer-brand p {
    font-size: 1.305rem;
    color: var(--muted);
    line-height: 1.7;
    margin-top: 1rem;
    max-width: 360px;
  }

  .footer-logo {
    font-family: var(--font-disp);
    font-size: 1.4rem;
    color: var(--gold);
  }

  .footer-col-title {
    font-family: var(--font-hdg);
    font-size: 0.943rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-dk);
    margin-bottom: 1.2rem;
  }

  .footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }

  .footer-links a {
    font-size: 1.305rem;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s;
  }

  .footer-links a:hover { color: var(--cream); }

  .footer-bottom {
    padding-top: 2rem;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .footer-bottom p {
    font-size: 1.16rem;
    color: var(--muted);
    font-family: var(--font-hdg);
    letter-spacing: 0.05em;
  }

  .nonprofit-badge {
    font-family: var(--font-hdg);
    font-size: 0.87rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold-dk);
    border: 1px solid var(--gold-dk);
    padding: 0.3rem 0.7rem;
    border-radius: 2px;
  }

  /* ── MOBILE MENU ── */
  .mobile-menu {
    display: none;
    position: fixed;
    top: 64px;
    left: 0; right: 0;
    background: rgba(23,16,31,0.98);
    border-bottom: 1px solid var(--border);
    padding: 1.5rem 2rem;
    z-index: 890;
    flex-direction: column;
    gap: 1.2rem;
  }

  .mobile-menu.open { display: flex; }

  .mobile-menu a {
    font-family: var(--font-hdg);
    font-size: 1.16rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cream);
    text-decoration: none;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
  }

  /* ── RESPONSIVE ── */
  @media (max-width: 900px) {
    .about-grid,
    .hub-intro,
    .events-grid,
    .newcomer-grid { grid-template-columns: 1fr; gap: 2.5rem; }

    .sabbat-grid { grid-template-columns: repeat(2, 1fr); }
    .path-grid { grid-template-columns: repeat(2, 1fr); }
    .biz-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }

    .about-visual { order: -1; }
    .emblem-ring { max-width: 240px; margin: 0 auto; }
    .stat-row { justify-content: center; }
  }

  @media (max-width: 600px) {
    .sabbat-grid { grid-template-columns: repeat(2, 1fr); }
    .path-grid { grid-template-columns: 1fr; }
    .biz-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .hero-buttons { flex-direction: column; align-items: center; }
    .dir-header { flex-direction: column; align-items: flex-start; }
    .event-card { grid-template-columns: 60px 1fr; gap: 1rem; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .vendor-banner { padding: 0.45rem 1rem; min-height: 30px; }
    nav { top: 30px; }
    .hero { padding-top: 10rem; }
  }

  /* ══════════════════════════════════════
     LIGHT THEME OVERRIDE
     Applied when <html data-theme="light">
  ══════════════════════════════════════ */
  [data-theme="light"] {
    --ink:       #f7eedb;
    --dark:      #f7eedb;
    --surface:   #ebdbbe;
    --card:      #fbf4e4;
    --border:    #d6c3a0;
    --gold:      #7a5214;
    --gold-lt:   #a6761f;
    --gold-dk:   #b8862b;
    --amber:     #a84e20;
    --parchment: #2e1f3d;
    --cream:     #33263f;
    --muted:     #6b5a78;
    --surface-veil: rgba(235,219,190,0.72);
  }

  [data-theme="light"] body {
    background: #f7eedb;
    color: #33263f;
  }

  [data-theme="light"] nav {
    background: linear-gradient(180deg, rgba(247,238,219,0.97) 0%, rgba(247,238,219,0.92) 100%);
    border-bottom-color: #d6c3a0;
  }

  [data-theme="light"] .mobile-menu {
    background: rgba(247,238,219,0.98);
  }

  [data-theme="light"] .hero-bg {
    background:
      radial-gradient(ellipse 80% 60% at 50% 40%, rgba(122,82,20,0.06) 0%, transparent 70%),
      radial-gradient(ellipse 60% 80% at 20% 80%, rgba(36,70,47,0.08) 0%, transparent 60%),
      radial-gradient(ellipse 50% 60% at 80% 20%, rgba(36,70,47,0.06) 0%, transparent 60%),
      linear-gradient(180deg, rgba(242,232,210,0.70) 0%, rgba(247,238,219,0.26) 42%, rgba(245,236,216,0.76) 100%);
  }

  [data-theme="light"] .hero-bg::before {
    background-image:
      radial-gradient(1.5px 1.5px at 10% 20%, rgba(122,82,20,0.5) 0%, transparent 100%),
      radial-gradient(1.5px 1.5px at 25% 60%, rgba(122,82,20,0.4) 0%, transparent 100%),
      radial-gradient(1.5px 1.5px at 40% 15%, rgba(122,82,20,0.5) 0%, transparent 100%),
      radial-gradient(1.5px 1.5px at 60% 75%, rgba(122,82,20,0.3) 0%, transparent 100%),
      radial-gradient(1.5px 1.5px at 75% 35%, rgba(122,82,20,0.5) 0%, transparent 100%),
      radial-gradient(1.5px 1.5px at 85% 65%, rgba(122,82,20,0.4) 0%, transparent 100%),
      radial-gradient(2px 2px at 15% 80%, rgba(122,82,20,0.4) 0%, transparent 100%),
      radial-gradient(1.5px 1.5px at 90% 10%, rgba(122,82,20,0.35) 0%, transparent 100%),
      radial-gradient(1.5px 1.5px at 50% 45%, rgba(122,82,20,0.3) 0%, transparent 100%),
      radial-gradient(2px 2px at 70% 85%, rgba(122,82,20,0.4) 0%, transparent 100%),
      radial-gradient(1.5px 1.5px at 35% 90%, rgba(122,82,20,0.3) 0%, transparent 100%),
      radial-gradient(1.5px 1.5px at 55% 5%, rgba(122,82,20,0.35) 0%, transparent 100%);
  }

  [data-theme="light"] .hero-spiral svg {
    filter: drop-shadow(0 0 20px rgba(122,82,20,0.25));
  }

  [data-theme="light"] h1.hero-title {
    color: #2e1f3d;
    text-shadow: 0 2px 40px rgba(122,82,20,0.1);
  }

  [data-theme="light"] .hero-eyebrow,
  [data-theme="light"] .hero-subtitle { color: #7a5214; }

  [data-theme="light"] .hero-date { color: #33263f; }
  [data-theme="light"] .hero-location { color: #6b5a78; }

  [data-theme="light"] .hero-divider span { color: #7a5214; }
  [data-theme="light"] .hero-divider::before {
    background: linear-gradient(90deg, transparent, #b8862b, #7a5214);
  }
  [data-theme="light"] .hero-divider::after {
    background: linear-gradient(90deg, #7a5214, #b8862b, transparent);
  }

  [data-theme="light"] .btn-primary {
    color: #f7eedb;
    background: linear-gradient(135deg, #a6761f, #7a5214);
    box-shadow: 0 4px 20px rgba(122,82,20,0.2);
  }
  [data-theme="light"] .btn-primary:hover {
    background: linear-gradient(135deg, #b8862b, #a6761f);
    box-shadow: 0 6px 30px rgba(122,82,20,0.3);
  }

  [data-theme="light"] .btn-secondary {
    color: #7a5214;
    border-color: #b8862b;
  }
  [data-theme="light"] .btn-secondary:hover {
    border-color: #7a5214;
    background: rgba(122,82,20,0.06);
  }

  [data-theme="light"] .nav-logo { color: #7a5214; }
  [data-theme="light"] .nav-logo span { color: #33263f; }
  [data-theme="light"] .nav-links a { color: #6b5a78; }
  [data-theme="light"] .nav-links a:hover { color: #7a5214; }
  [data-theme="light"] .nav-cta {
    color: #f7eedb !important;
    background: #7a5214;
  }
  [data-theme="light"] .nav-cta:hover {
    background: #a6761f !important;
    color: #f7eedb !important;
  }
  [data-theme="light"] .hamburger span { background: #7a5214; }
  [data-theme="light"] .mobile-menu a { color: #33263f; border-bottom-color: #d6c3a0; }

  [data-theme="light"] .section-label { color: #7a5214; }
  [data-theme="light"] .section-label::before { background: #7a5214; }
  [data-theme="light"] h2.section-title { color: #2e1f3d; }
  [data-theme="light"] .section-lead { color: #6b5a78; }

  [data-theme="light"] .gold-rule::before {
    background: linear-gradient(90deg, transparent, #d6c3a0, #b8862b);
  }
  [data-theme="light"] .gold-rule::after {
    background: linear-gradient(90deg, #b8862b, #d6c3a0, transparent);
  }
  [data-theme="light"] .gold-rule span { color: #b8862b; }

  [data-theme="light"] .about-text p { color: #33263f; }
  [data-theme="light"] .stat-num { color: #7a5214; }
  [data-theme="light"] .stat-label { color: #6b5a78; }
  [data-theme="light"] .stat-row { border-top-color: #d6c3a0; }

  [data-theme="light"] .wheel-section {
    background: #ebdbbe;
    border-color: #d6c3a0;
  }
  [data-theme="light"] .sabbat-card { background: #fbf4e4; }
  [data-theme="light"] .sabbat-card:hover { background: #faf2e0; }
  [data-theme="light"] .sabbat-name { color: #7a5214; }
  [data-theme="light"] .sabbat-date { color: #6b5a78; }
  [data-theme="light"] .sabbat-note { color: #33263f; }
  [data-theme="light"] .sabbat-card.featured {
    background: linear-gradient(135deg, #fdf7ea, #fbf4e4);
    border-color: rgba(122,82,20,0.3);
  }
  [data-theme="light"] .sabbat-card.featured .sabbat-name { color: #7a5214; }
  [data-theme="light"] .sabbat-grid { background: #d6c3a0; border-color: #d6c3a0; }

  [data-theme="light"] .path-card {
    background: #fbf4e4;
    border-color: #d6c3a0;
  }
  [data-theme="light"] .path-card:hover { border-color: rgba(122,82,20,0.3); }
  [data-theme="light"] .path-card::before {
    background: linear-gradient(90deg, transparent, #b8862b, transparent);
  }
  [data-theme="light"] .path-name { color: #7a5214; }
  [data-theme="light"] .path-desc { color: #6b5a78; }

  [data-theme="light"] .directory-section {
    background: #ebdbbe;
    border-color: #d6c3a0;
  }
  [data-theme="light"] .filter-btn {
    border-color: #d6c3a0;
    color: #6b5a78;
  }
  [data-theme="light"] .filter-btn:hover,
  [data-theme="light"] .filter-btn.active {
    border-color: #b8862b;
    color: #7a5214;
    background: rgba(122,82,20,0.06);
  }
  [data-theme="light"] .biz-card {
    background: #fbf4e4;
    border-color: #d6c3a0;
  }
  [data-theme="light"] .biz-card.featured-partner {
    border-color: #b8541f;
    background: linear-gradient(180deg, rgba(184,84,31,0.10), rgba(184,84,31,0.03)), #fbf4e4;
    box-shadow: 0 10px 28px rgba(184,84,31,0.22);
  }
  [data-theme="light"] .biz-card.featured-partner .biz-name { color: #a34a1b; }
  [data-theme="light"] .biz-card.featured-partner::after {
    color: #fff6e8;
    background: #b8541f;
  }
  [data-theme="light"] .biz-card:hover { border-color: rgba(122,82,20,0.35); }
  [data-theme="light"] .biz-card.featured-partner:hover { border-color: #b8541f; }
  [data-theme="light"] .biz-category { color: #b8862b; }
  [data-theme="light"] .biz-name { color: #2e1f3d; }
  [data-theme="light"] .biz-location { color: #6b5a78; }
  [data-theme="light"] .biz-desc { color: #33263f; }
  [data-theme="light"] .biz-link { color: #7a5214; border-bottom-color: #b8862b; }
  [data-theme="light"] .biz-link:hover { color: #a6761f; }
  [data-theme="light"] .dir-cta { border-top-color: #d6c3a0; }
  [data-theme="light"] .dir-cta p { color: #6b5a78; }

  [data-theme="light"] .event-card {
    background: #fbf4e4;
    border-color: #d6c3a0;
  }
  [data-theme="light"] .event-card:hover { border-color: rgba(122,82,20,0.3); }
  [data-theme="light"] .event-date-box {
    background: #ebdbbe;
    border-color: #d6c3a0;
  }
  [data-theme="light"] .event-month { color: #7a5214; }
  [data-theme="light"] .event-day { color: #2e1f3d; }
  [data-theme="light"] .event-title { color: #2e1f3d; }
  [data-theme="light"] .event-meta { color: #6b5a78; }
  [data-theme="light"] .event-desc { color: #33263f; }
  [data-theme="light"] .tag-annual {
    background: rgba(122,82,20,0.1);
    color: #7a5214;
    border-color: rgba(122,82,20,0.3);
  }

  [data-theme="light"] .sidebar-card {
    background: #fbf4e4;
    border-color: #d6c3a0;
  }
  [data-theme="light"] .sidebar-title {
    color: #7a5214;
    border-bottom-color: #d6c3a0;
  }
  [data-theme="light"] .sidebar-list li { color: #33263f; }
  [data-theme="light"] .sidebar-list li::before { color: #b8862b; }

  [data-theme="light"] .newcomer-section {
    background: linear-gradient(135deg, #f4ebd6 0%, #f7eedb 50%, #edf2ee 100%);
    border-top-color: #d6c3a0;
  }
  [data-theme="light"] .newcomer-text p { color: #33263f; }
  [data-theme="light"] .step-num { color: #b8862b; }
  [data-theme="light"] .step-title { color: #7a5214; }
  [data-theme="light"] .step-desc { color: #6b5a78; }

  [data-theme="light"] footer { background: #2e1f3d; }
  [data-theme="light"] .footer-logo { color: #e0b15c; }
  [data-theme="light"] .footer-brand p { color: #c4a9d0; }
  [data-theme="light"] .footer-col-title { color: #c08a2e; }
  [data-theme="light"] .footer-links a { color: #c4a9d0; }
  [data-theme="light"] .footer-links a:hover { color: #f4e7d0; }
  [data-theme="light"] .footer-bottom { border-top-color: #4a3560; }
  [data-theme="light"] .footer-bottom p { color: #8a7a9e; }
  [data-theme="light"] .nonprofit-badge { color: #c08a2e; border-color: #c08a2e; }

  /* ── THEME TOGGLE BUTTON ── */
  .theme-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 0.3rem 0.7rem 0.3rem 0.4rem;
    cursor: pointer;
    transition: all 0.2s;
    margin-right: 0.5rem;
    flex-shrink: 0;
  }

  .theme-toggle:hover { border-color: var(--gold-dk); }

  .toggle-track {
    width: 32px;
    height: 18px;
    background: var(--border);
    border-radius: 9px;
    position: relative;
    transition: background 0.3s;
  }

  .toggle-thumb {
    position: absolute;
    top: 2px; left: 2px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--gold);
    transition: transform 0.3s, background 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    line-height: 1;
  }

  .theme-toggle.light-active .toggle-track { background: #d6c3a0; }
  .theme-toggle.light-active .toggle-thumb { transform: translateX(14px); }

  .toggle-label {
    font-family: var(--font-hdg);
    font-size: 0.87rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
  }

  [data-theme="light"] .theme-toggle { border-color: #d6c3a0; }
  [data-theme="light"] .theme-toggle:hover { border-color: #b8862b; }
  [data-theme="light"] .toggle-track { background: #d6c3a0; }
  [data-theme="light"] .toggle-thumb { background: #7a5214; }
  [data-theme="light"] .toggle-label { color: #6b5a78; }

  @media (max-width: 900px) {
    .theme-toggle { margin-right: 0.8rem; }
    .toggle-label { display: none; }
  }


  /* ── VENDOR BANNER ── */
  .vendor-banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 950;
    background: linear-gradient(135deg, #7a5214 0%, #c08a2e 50%, #7a5214 100%);
    background-size: 200% 100%;
    animation: bannerShimmer 6s ease-in-out infinite;
    padding: 0.55rem 2rem;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.15);
  }

  @keyframes bannerShimmer {
    0%, 100% { background-position: 0% 50%; }
    50%       { background-position: 100% 50%; }
  }

  .vendor-banner a {
    font-family: var(--font-hdg);
    font-size: 1.044rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #f7eedb;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    transition: opacity 0.2s;
  }

  .vendor-banner a:hover { opacity: 0.85; }

  .vendor-banner .banner-cta {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 2px;
    padding: 0.15rem 0.6rem;
    margin-left: 0.4rem;
    font-size: 0.943rem;
    letter-spacing: 0.15em;
    transition: background 0.2s;
  }

  .vendor-banner a:hover .banner-cta { background: rgba(255,255,255,0.3); }

  .vendor-banner .banner-sep {
    color: rgba(255,255,255,0.4);
    margin: 0 0.4rem;
  }

  /* Push nav down by banner height */
  .vendor-banner {
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  nav { top: 34px; }

  /* Push hero content down */
  .hero { padding-top: 9.5rem; }

  @media (max-width: 900px) {
    .vendor-banner { height: 30px; }
    nav { top: 30px; }
    .hero { padding-top: 9rem; }
  }

  [data-theme="light"] .vendor-banner {
    background: linear-gradient(135deg, #3d2b52 0%, #a6761f 50%, #3d2b52 100%);
    background-size: 200% 100%;
  }

  @media (max-width: 600px) {
    .vendor-banner { padding: 0.5rem 1rem; }
    .vendor-banner a { font-size: 0.899rem; letter-spacing: 0.1em; gap: 0.4rem; }
    .vendor-banner .banner-sep { display: none; }
    .vendor-banner .banner-date { display: none; }
    nav { top: 30px; }
  }


  .nav-vendor {
    color: var(--ink) !important;
    background: linear-gradient(135deg, var(--forest-lt), var(--forest)) !important;
    margin-right: 0.4rem;
  }
  .nav-vendor:hover {
    background: linear-gradient(135deg, #4e8259, var(--forest-lt)) !important;
    color: var(--ink) !important;
  }
  [data-theme="light"] .nav-vendor {
    color: #f7eedb !important;
    background: linear-gradient(135deg, #4e8259, #24462f) !important;
  }
  [data-theme="light"] .nav-vendor:hover {
    background: linear-gradient(135deg, #4e8259, #4e8259) !important;
    color: #f7eedb !important;
  }


  .nav-support {
    color: #f7eedb !important;
    background: linear-gradient(135deg, var(--forest-lt), var(--forest)) !important;
  }
  .nav-support:hover {
    background: linear-gradient(135deg, #4e8259, var(--forest-lt)) !important;
    color: #f7eedb !important;
  }
  [data-theme="light"] .nav-support {
    color: #f7eedb !important;
    background: linear-gradient(135deg, #4e8259, #24462f) !important;
  }
  [data-theme="light"] .nav-support:hover {
    background: linear-gradient(135deg, #4e8259, #4e8259) !important;
    color: #f7eedb !important;
  }


  /* ── SOCIAL ICONS ── */
  .social-icons {
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }

  .social-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.2s;
    font-size: 1.232rem;
    color: var(--muted);
    background: transparent;
    flex-shrink: 0;
  }

  .social-icon:hover {
    border-color: var(--gold-dk);
    color: var(--gold-lt);
    background: rgba(192,138,46,0.08);
    transform: translateY(-2px);
  }

  [data-theme="light"] .social-icon { color: #6b5a78; border-color: #d6c3a0; }
  [data-theme="light"] .social-icon:hover {
    border-color: #b8862b;
    color: #7a5214;
    background: rgba(122,82,20,0.06);
  }

  /* Hero social icons */
  .hero-social {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    justify-content: center;
    margin-top: 2rem;
    opacity: 0;
    animation: fadeUp 0.8s 1s ease forwards;
  }

  .hero-social-label {
    font-family: var(--font-hdg);
    font-size: 0.87rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    margin-right: 0.4rem;
  }

  .hero-social .social-icon {
    width: 36px;
    height: 36px;
    font-size: 1.4rem;
  }

  /* Nav social icons — hide on smaller screens */
  .nav-social { margin-right: 0.5rem; }

  /* Nav collapse thresholds. The enlarged type needs noticeably more room than
     the original 900px/1100px breakpoints allowed -- the desktop link row was
     already wrapping into the theme toggle before the type scale went up.
     Things are dropped in order of how much room they buy back: social icons,
     then the long half of the logo, then the whole link row. */
  nav { gap: 1rem; }
  .nav-logo { white-space: nowrap; flex-shrink: 0; }
  .nav-links { gap: 1.5rem; flex-wrap: nowrap; }
  .nav-links a { white-space: nowrap; }
  .theme-toggle { flex-shrink: 0; }

  @media (max-width: 1440px) { .nav-social { display: none; } }

  /* The " · Albuquerque Pagan Pride" tail is ~300px of the logo. Dropping it
     buys enough room to keep the full link row down to tablet width. */
  @media (max-width: 1320px) { .nav-logo span { display: none; } }

  @media (max-width: 1024px) {
    .nav-links { display: none; }
    .hamburger { display: flex; }
  }

  /* Below this the "Dark/Light" word is dropped; the moon/sun thumb carries it. */
  @media (max-width: 460px) {
    .theme-toggle .toggle-label { display: none; }
    nav { padding: 0 1rem; }
  }


  /* ══════════════════════════════════════════════════════════════════
     COMMUNITY CALENDAR · LISTINGS · SUBMISSION FORMS · ADMIN
     Built only from the design tokens above, so the light theme picks
     these up automatically via the [data-theme="light"] variable block.
     ══════════════════════════════════════════════════════════════════ */

  /* ── MOBILE MENU THEME BUTTON (injected by app.js) ── */
  .mobile-theme-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 0.7rem 1.2rem;
    font-family: var(--font-hdg);
    font-size: 1.015rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    cursor: pointer;
    width: fit-content;
    margin-top: 1rem;
    min-height: 44px;
  }

  /* ── INTERIOR PAGE HEADER ── */
  .page-head {
    padding: 12rem 2rem 3rem;
    text-align: center;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
  }

  .page-head .section-label {
    justify-content: center;
    margin-bottom: 1rem;
  }

  .page-head .section-label::before { display: none; }

  h1.page-title {
    font-family: var(--font-disp);
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    color: var(--parchment);
    line-height: 1.15;
    margin-bottom: 1.2rem;
  }

  .page-lead {
    font-size: 1.47rem;
    color: var(--muted);
    line-height: 1.8;
    max-width: 720px;
    margin: 0 auto;
  }

  /* ── COMMUNITY CALENDAR ── */
  .cal-month {
    font-family: var(--font-hdg);
    font-size: 1.4rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 3rem 0 1.2rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border);
  }

  .cal-month:first-of-type { margin-top: 0; }

  .cal-list { display: flex; flex-direction: column; gap: 1rem; }

  .cal-card {
    display: grid;
    grid-template-columns: 92px 1fr auto;
    gap: 1.5rem;
    align-items: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1.5rem;
    transition: all 0.25s;
  }

  .cal-card:hover {
    border-color: rgba(192,138,46,0.3);
    transform: translateX(4px);
  }

  .cal-date {
    text-align: center;
    border-right: 1px solid var(--border);
    padding-right: 1.2rem;
  }

  .cal-date .mon {
    display: block;
    font-family: var(--font-hdg);
    font-size: 1.015rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold);
  }

  .cal-date .day {
    display: block;
    font-family: var(--font-disp);
    font-size: 2.25rem;
    color: var(--parchment);
    line-height: 1.1;
  }

  .cal-title {
    font-family: var(--font-hdg);
    font-size: 1.54rem;
    font-weight: 600;
    color: var(--cream);
    margin-bottom: 0.35rem;
  }

  .cal-meta {
    font-size: 1.232rem;
    color: var(--muted);
    line-height: 1.6;
  }

  .cal-host {
    font-size: 1.087rem;
    color: var(--gold-dk);
    margin-top: 0.4rem;
  }

  .cal-desc {
    font-size: 1.232rem;
    color: var(--muted);
    line-height: 1.7;
    margin-top: 0.7rem;
  }

  .cal-link {
    font-family: var(--font-hdg);
    font-size: 1.015rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold-lt);
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid var(--gold-dk);
    border-radius: 2px;
    padding: 0.7rem 1.2rem;
    transition: all 0.2s;
    display: inline-block;
    min-height: 44px;
    line-height: 1.6;
  }

  .cal-link:hover { background: rgba(192,138,46,0.08); border-color: var(--gold); }

  .cal-tag {
    display: inline-block;
    font-family: var(--font-hdg);
    font-size: 0.87rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--forest-lt);
    border: 1px solid var(--forest-lt);
    border-radius: 2px;
    padding: 0.15rem 0.5rem;
    margin-left: 0.6rem;
    vertical-align: middle;
  }

  /* ── SUBMISSION FORMS ── */
  .form-section { background: var(--surface); border-top: 1px solid var(--border); }

  .form-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 2.5rem;
    max-width: 780px;
    margin: 0 auto;
  }

  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
  }

  .field { margin-bottom: 1.4rem; }

  .field label {
    display: block;
    font-family: var(--font-hdg);
    font-size: 1.015rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.5rem;
  }

  .field .req { color: var(--amber); }

  .field .hint {
    display: block;
    font-family: var(--font-body);
    font-size: 1.087rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted);
    margin-top: 0.3rem;
  }

  .field input,
  .field select,
  .field textarea {
    width: 100%;
    background: var(--dark);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 0.9rem 1rem;
    font-family: var(--font-body);
    font-size: 1.232rem;
    color: var(--cream);
    transition: border-color 0.2s;
    min-height: 48px;
  }

  .field textarea { min-height: 130px; resize: vertical; line-height: 1.6; }

  .field input:focus,
  .field select:focus,
  .field textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(192,138,46,0.15);
  }

  .field input::placeholder,
  .field textarea::placeholder { color: var(--muted); opacity: 0.6; }

  .field input[aria-invalid="true"],
  .field textarea[aria-invalid="true"],
  .field select[aria-invalid="true"] { border-color: var(--amber); }

  .form-note {
    font-size: 1.087rem;
    color: var(--muted);
    line-height: 1.7;
    border-left: 2px solid var(--gold-dk);
    padding-left: 1rem;
    margin-bottom: 1.8rem;
  }

  .form-status {
    margin-top: 1.2rem;
    padding: 1rem 1.2rem;
    border-radius: 2px;
    font-size: 1.16rem;
    line-height: 1.6;
    display: none;
  }

  .form-status.show { display: block; }

  .form-status.ok {
    background: rgba(78,130,89,0.15);
    border: 1px solid var(--forest-lt);
    color: var(--cream);
  }

  .form-status.err {
    background: rgba(196,98,45,0.12);
    border: 1px solid var(--amber);
    color: var(--cream);
  }

  .btn-primary[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }

  /* Honeypot — hidden from people, visible to naive bots */
  .hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  /* ── EMPTY / LOADING STATES ── */
  .empty-state {
    text-align: center;
    padding: 3.5rem 1.5rem;
    border: 1px dashed var(--border);
    border-radius: 3px;
    color: var(--muted);
    font-size: 1.305rem;
    line-height: 1.7;
  }

  .empty-state strong {
    display: block;
    font-family: var(--font-hdg);
    font-size: 1.47rem;
    color: var(--cream);
    margin-bottom: 0.6rem;
  }

  /* ── ADMIN ── */
  .admin-gate {
    max-width: 460px;
    margin: 0 auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 2.5rem;
  }

  .admin-tabs {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 1.2rem;
  }

  .sub-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold-dk);
    border-radius: 3px;
    padding: 1.8rem;
    margin-bottom: 1.2rem;
  }

  .sub-card.is-approved { border-left-color: var(--forest-lt); }

  .sub-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
  }

  .sub-title {
    font-family: var(--font-hdg);
    font-size: 1.47rem;
    font-weight: 600;
    color: var(--cream);
  }

  .sub-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.8rem 1.5rem;
    margin-bottom: 1.2rem;
  }

  .sub-field .k {
    font-family: var(--font-hdg);
    font-size: 0.899rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-dk);
    display: block;
    margin-bottom: 0.15rem;
  }

  .sub-field .v {
    font-size: 1.16rem;
    color: var(--cream);
    line-height: 1.6;
    word-break: break-word;
  }

  .sub-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; }

  .btn-sm {
    font-family: var(--font-hdg);
    font-size: 1.015rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.7rem 1.4rem;
    border-radius: 2px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.2s;
    min-height: 44px;
  }

  .btn-approve { border-color: var(--forest-lt); color: var(--forest-lt); }
  .btn-approve:hover { background: rgba(78,130,89,0.15); }
  .btn-reject { border-color: var(--amber); color: var(--amber); }
  .btn-reject:hover { background: rgba(196,98,45,0.12); }
  .btn-sm[disabled] { opacity: 0.5; cursor: not-allowed; }

  .badge {
    font-family: var(--font-hdg);
    font-size: 0.87rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.25rem 0.6rem;
    border-radius: 2px;
    white-space: nowrap;
  }

  .badge-pending { background: var(--gold); color: var(--ink); }
  .badge-approved { background: var(--forest); color: var(--parchment); border: 1px solid var(--forest-lt); }

  /* ── RESPONSIVE ── */
  @media (max-width: 900px) {
    .page-head { padding: 10rem 1.5rem 2.5rem; }
    .form-card { padding: 2rem 1.5rem; }
  }

  @media (max-width: 700px) {
    .form-row { grid-template-columns: 1fr; gap: 0; }

    .cal-card {
      grid-template-columns: 68px 1fr;
      gap: 1rem;
      padding: 1.2rem;
    }

    /* Date chip stays left; the CTA drops to its own full-width row */
    .cal-link {
      grid-column: 1 / -1;
      text-align: center;
      margin-top: 0.4rem;
    }

    .cal-date { padding-right: 0.8rem; }
    .cal-date .day { font-size: 1.875rem; }
    .cal-card:hover { transform: none; }
  }

  @media (max-width: 480px) {
    .page-head { padding: 9rem 1.2rem 2rem; }
    .form-card { padding: 1.5rem 1.1rem; }
    .sub-card { padding: 1.3rem 1.1rem; }
    .sub-actions .btn-sm { flex: 1 1 auto; }
    .admin-gate { padding: 1.8rem 1.3rem; }
  }

  /* The announce band keeps its dark forest background in both themes, so its
     text must stay light -- otherwise the light theme's dark --cream/--gold-lt
     lands dark-on-dark and the message disappears. */
  [data-theme="light"] .announce-band p { color: #f4e7d0; }
  [data-theme="light"] .announce-band strong { color: #e0b15c; }

  /* .tag-free had no light-theme override: its light-green text sat on a
     translucent forest fill, which washes out to near-invisible over cream. */
  [data-theme="light"] .tag-free {
    background: rgba(36,70,47,0.1);
    color: #1e3a28;
    border-color: rgba(36,70,47,0.35);
  }

  /* The "Community Partner" ribbon is absolutely positioned, so on cards whose
     category line is long it lands on top of the text. Reserve a band for it
     instead of trying to pad the category -- padding alone still collides once
     the category wraps to two lines. */
  .biz-card.featured-partner { padding-top: 3.6rem; }
  .biz-card.featured-partner::after { top: 1.1rem; right: 1.1rem; }

  @media (max-width: 480px) {
    .biz-card.featured-partner::after { left: 1.1rem; right: auto; }
  }

  /* Paired fields where only one has hint text end up with misaligned inputs,
     since the hint grows the label. Bottom-align so the inputs line up. */
  .form-row { align-items: end; }

  /* ══════════════════════════════════════════════════════════════════
     VISUAL MONTH CALENDAR
     ══════════════════════════════════════════════════════════════════ */

  .view-toggle {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
  }

  .cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.2rem;
  }

  .cal-nav h2 {
    font-family: var(--font-disp);
    font-size: 1.875rem;
    color: var(--parchment);
    text-align: center;
    flex: 1;
  }

  .cal-nav button {
    font-family: var(--font-hdg);
    font-size: 1.232rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--gold-lt);
    cursor: pointer;
    padding: 0.6rem 1.1rem;
    min-height: 48px;
    min-width: 48px;
    transition: all 0.2s;
  }

  .cal-nav button:hover { border-color: var(--gold); background: rgba(192,138,46,0.08); }
  .cal-nav button[disabled] { opacity: 0.35; cursor: not-allowed; }

  .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 3px;
    overflow: hidden;
  }

  .cal-dow {
    background: var(--surface);
    text-align: center;
    padding: 0.7rem 0.2rem;
    font-family: var(--font-hdg);
    font-size: 0.899rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
  }

  .cal-day {
    background: var(--card);
    min-height: 92px;
    padding: 0.5rem;
    text-align: left;
    border: none;
    font: inherit;
    color: inherit;
    cursor: default;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    transition: background 0.15s;
  }

  .cal-day.is-outside { background: var(--surface); opacity: 0.45; }

  .cal-day .num {
    font-family: var(--font-hdg);
    font-size: 1.16rem;
    color: var(--muted);
  }

  .cal-day.is-today .num {
    color: var(--ink);
    background: var(--gold);
    border-radius: 50%;
    width: 2em;
    height: 2em;
    display: grid;
    place-items: center;
  }

  .cal-day.has-events { cursor: pointer; }
  .cal-day.has-events:hover { background: rgba(192,138,46,0.1); }
  .cal-day.has-events .num { color: var(--cream); }

  .cal-day.is-selected { outline: 2px solid var(--gold); outline-offset: -2px; }

  .cal-pip {
    font-family: var(--font-hdg);
    font-size: 0.78rem;
    line-height: 1.3;
    letter-spacing: 0.04em;
    text-align: left;
    background: rgba(192,138,46,0.16);
    border-left: 2px solid var(--gold);
    color: var(--cream);
    padding: 0.15rem 0.3rem;
    border-radius: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cal-more {
    font-family: var(--font-hdg);
    font-size: 0.78rem;
    color: var(--gold-dk);
  }

  /* Below tablet the cells are too narrow for event titles — switch to dots
     and surface the detail through the day-detail panel instead. */
  @media (max-width: 760px) {
    .cal-grid { gap: 2px; }
    .cal-day { min-height: 62px; padding: 0.35rem 0.2rem; align-items: center; gap: 0.2rem; }
    .cal-day .num { font-size: 1.015rem; }
    .cal-pip { display: none; }
    .cal-dots { display: flex; gap: 3px; justify-content: center; flex-wrap: wrap; }
    .cal-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--gold); display: block;
    }
    .cal-more { display: none; }
    .cal-nav h2 { font-size: 1.47rem; }
    .cal-dow { font-size: 0.78rem; padding: 0.5rem 0.1rem; }
  }

  @media (min-width: 761px) {
    .cal-dots { display: none; }
  }

  .day-detail {
    margin-top: 1.5rem;
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold);
    border-radius: 3px;
    background: var(--card);
    padding: 1.5rem;
  }

  .day-detail h3 {
    font-family: var(--font-hdg);
    font-size: 1.4rem;
    color: var(--gold);
    margin-bottom: 1rem;
  }

  .day-detail .cal-card {
    background: transparent;
    border: none;
    border-top: 1px solid var(--border);
    border-radius: 0;
    padding: 1.2rem 0 0;
  }

  .day-detail .cal-card:first-of-type { border-top: none; padding-top: 0; }
  .day-detail .cal-card:hover { transform: none; }

  /* ── MOBILE FIXES ──────────────────────────────────────────────────
     The stat row is a 4-across flex with no wrap. At the enlarged type its
     min-content width is ~513px, which forces the whole about-grid wider than
     a phone screen — the grid can't shrink below its widest child. Wrapping it
     (and going 2x2 on small screens) is what actually unblocks the layout. */
  .stat-row { flex-wrap: wrap; }

  @media (max-width: 600px) {
    .stat-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.8rem 1rem;
      justify-content: initial;
    }
  }

  /* Long URLs and unbroken names in submitted content shouldn't be able to
     push a card wider than the screen. */
  .biz-desc, .cal-desc, .cal-meta, .sub-field .v, .biz-name, .cal-title {
    overflow-wrap: anywhere;
  }

  @media (max-width: 600px) {
    /* Give small screens their side margins back. */
    .section-inner { padding-left: 1.2rem; padding-right: 1.2rem; }
    .hero { padding-left: 1.2rem; padding-right: 1.2rem; }

    /* Stack the hero CTAs full width — two 25px-type buttons never fit side
       by side on a phone. */
    .hero-buttons { flex-direction: column; align-items: stretch; gap: 0.9rem; }
    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary { text-align: center; }

    .view-toggle .filter-btn { flex: 1 1 auto; }
  }

  /* Vendor details: was an inline two-column grid with no breakpoint, so it
     stayed 2-up on phones and pushed the page sideways. */
  .vendor-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }

  @media (max-width: 760px) {
    .vendor-detail-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  }

  /* Grid and flex children default to min-width:auto, so a wide child (an SVG,
     a long word) refuses to shrink and drags the whole track past the viewport.
     This is the single most common cause of mobile horizontal scroll. */
  .about-grid > *,
  .events-grid > *,
  .newcomer-grid > *,
  .hub-intro > *,
  .footer-grid > *,
  .vendor-detail-grid > *,
  .cal-card > *,
  .form-row > * { min-width: 0; }

  /* ── MOBILE POLISH ─────────────────────────────────────────────────
     The CTAs are anchors, which default to display:inline. Once the label
     wraps to a second line an inline box paints its background per line-box,
     so the gold panel covers only part of the text. inline-flex gives them a
     real box that grows with the content. */
  .btn-primary,
  .btn-secondary,
  .nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 48px;
  }

  @media (max-width: 600px) {
    .btn-primary,
    .btn-secondary {
      padding: 0.9rem 1.4rem;
      font-size: 1.015rem;
      letter-spacing: 0.1em;
      width: 100%;
    }
  }

  /* The vendor banner is a fixed 30px strip, but at phone width its three
     labels wrap to two lines and spill over the nav. Drop the date on small
     screens and let the strip size to its content. */
  @media (max-width: 700px) {
    .vendor-banner {
      height: auto;
      min-height: 34px;
      padding: 0.45rem 1rem;
    }
    .vendor-banner .banner-date,
    .vendor-banner .banner-sep { display: none; }
    .vendor-banner a {
      flex-wrap: nowrap;
      gap: 0.5rem;
      font-size: 0.87rem;
      white-space: nowrap;
    }
    .vendor-banner .banner-cta { padding: 0.15rem 0.5rem; }

    /* nav and hero sit below a taller banner now */
    nav { top: 34px; }
    .hero { padding-top: 8.5rem; }
  }

  /* Anchor the mobile sheet to the bottom of the nav rather than a hard 64px,
     which left its first 30px hidden behind the nav whenever the banner
     pushed everything down. Cap the height so long menus scroll. */
  @media (max-width: 700px) {
    .mobile-menu {
      top: 98px;
      max-height: calc(100vh - 98px);
      overflow-y: auto;
      background: var(--dark);
      padding: 1.5rem 1.4rem 2rem;
    }
  }

  /* ══════════════════════════════════════════════════════════════════
     ATMOSPHERE — scroll-driven parallax sky
     Built and animated by assets/atmosphere.js. Layers move at different
     rates, wrap endlessly, and fade in from the bottom of the viewport and
     out at the top. Transform + opacity only, so it all stays on the
     compositor. See .is-static below for the reduced-motion fallback.
     ══════════════════════════════════════════════════════════════════ */

  .sky {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }

  /* z-index:-1 is the usual backdrop trick, but it paints below the canvas
     background here and vanishes. The layer sits at 0 and every in-flow
     content block is lifted to 1. The fixed chrome (banner, nav, mobile menu)
     keeps its own much higher z-index and is deliberately not listed. */
  body > section,
  body > header,
  body > footer,
  body > .announce-band {
    position: relative;
    z-index: 1;
  }

  .sky-layer {
    position: absolute;
    inset: 0;
    will-change: transform;
  }

  /* ── STARS, SPARKLES, RUNES ──
     Wrapper carries the scroll fade, the inner <i> carries the CSS twinkle,
     so the two opacity sources multiply instead of overwriting each other. */
  .sky-star,
  .sky-sparkle,
  .sky-sigil {
    position: absolute;
    display: block;
    opacity: 0;
    will-change: transform, opacity;
  }

  .sky-dot {
    display: block;
    animation: twinkle var(--dur, 6s) ease-in-out var(--delay, 0s) infinite;
  }

  .sky-star .sky-dot {
    border-radius: 50%;
    background: var(--gold-lt);
  }

  .sky-sparkle { color: var(--gold-lt); }
  .sky-sigil { color: var(--gold); }

  @keyframes twinkle {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.3); }
  }

  /* By day the field reads as warm dust in the light rather than stars. */
  [data-theme="light"] .sky-star .sky-dot { background: #a6761f; }
  [data-theme="light"] .sky-sparkle { opacity: 0 !important; }
  [data-theme="light"] .sky-sigil { color: #8a6018; }

  /* ── CELESTIAL BODY ── */
  .sky-celestial {
    position: absolute;
    top: 5vh;
    right: 5vw;
    width: 320px;
    height: 320px;
  }

  .sky-celestial svg { width: 100%; height: 100%; overflow: visible; }

  .sky-moon, .sky-sun { transition: opacity 0.7s ease; }
  .sky-moon { opacity: 1; }
  .sky-sun  { opacity: 0; }
  [data-theme="light"] .sky-moon { opacity: 0; }
  [data-theme="light"] .sky-sun  { opacity: 1; }

  .sky-disc { transition: filter 0.25s linear; }
  .sky-rays { transform-origin: 100px 100px; }
  .sky-halo { transform-origin: 100px 100px; }

  /* Cloud banks are the page colour, blurred — they read as cloud crossing
     the disc rather than as grey shapes floating in front of it. */
  .sky-clouds { fill: #221630; opacity: 0.72; }
  [data-theme="light"] .sky-clouds { fill: #f7eedb; opacity: 0.8; }

  /* ── SUN TUNING (light theme) ──
     Gold on cream is barely any contrast, so the sun needs its own much
     darker weighting. CSS overrides the SVG presentation attributes rather
     than duplicating the markup. */
  [data-theme="light"] .sky-rays { stroke: #a6761f; stroke-width: 2.2; }
  [data-theme="light"] .sky-sun .sky-disc circle:first-child { fill: #c08a2e; opacity: 0.36; }
  [data-theme="light"] .sky-sun .sky-disc circle:last-child { stroke: #8a6018; stroke-width: 1.8; opacity: 0.6; }

  /* ── CORNER BOTANICALS ── */
  .sky-corner {
    position: absolute;
    width: 220px;
    height: 220px;
    color: var(--forest-lt);
    opacity: 0.28;
  }

  [data-theme="light"] .sky-corner { color: #4a6b48; opacity: 0.32; }

  .sky-corner svg { width: 100%; height: 100%; }
  .sky-corner-tl { top: 0;    left: 0; }
  .sky-corner-tr { top: 0;    right: 0;  transform: scaleX(-1); }
  .sky-corner-bl { bottom: 0; left: 0;   transform: scaleY(-1); }
  .sky-corner-br { bottom: 0; right: 0;  transform: scale(-1, -1); }

  /* ── REDUCED MOTION ──
     No parallax, no twinkle, no cloud drift: a composed still scene. */
  .sky.is-static .sky-star,
  .sky.is-static .sky-sigil { opacity: 0.45; }
  .sky.is-static .sky-sparkle { opacity: 0.5; }
  .sky.is-static .sky-dot { animation: none; opacity: 1; }
  .sky.is-static .sky-clouds { opacity: 0.35; }

  @media (max-width: 760px) {
    .sky-celestial { width: 190px; height: 190px; top: 8vh; right: 4vw; }
    .sky-corner { width: 130px; height: 130px; opacity: 0.22; }
  }

  /* ── TRANSLUCENT SECTION BANDS ──
     The alternating bands were solid --surface, which would hide the
     atmosphere completely. A veil lets it read through while keeping text
     contrast well clear. Cards stay fully opaque. */
  .wheel-section,
  .directory-section,
  .newcomer-section,
  .form-section,
  .page-head,
  .section-veil {
    background: var(--surface-veil) !important;
    backdrop-filter: blur(2px);
  }



  /* Centred flex children size to max-content rather than being clamped by the
     container, so a long hero line can push past a narrow viewport. Belt and
     braces against horizontal scroll on phones. */
  .hero-content,
  .page-head > * {
    max-width: 100%;
    min-width: 0;
  }

  .hero-content { width: 100%; }

  /* ── ATMOSPHERE ON SMALL SCREENS ──
     The sigil field is sized for a wide viewport. On a phone the same marks
     take up a far larger share of the screen and start competing with the
     copy, so the whole layer is dialled back and the glyphs shrunk.
     Scaling is applied to the inner <svg>, because the wrapper's transform is
     driven by the parallax loop and .sky-dot's by the twinkle keyframes —
     touching either from CSS would fight the animation. */
  @media (max-width: 760px) {
    .sky { opacity: 0.55; }
    .sky-sigil svg { transform: scale(0.6); }
    .sky-celestial { top: 4vh; right: -4vw; }
  }

  @media (max-width: 480px) {
    .sky { opacity: 0.45; }
    .sky-sigil svg { transform: scale(0.5); }
  }