/* =====================================================================
   VINTAGE ZINE — 1970s field-manual scrapbook layout.
   Theme tokens cascade from theme-apply.js:
     --vz-paper    ← var(--bg)             aged cream backdrop
     --vz-ink      ← var(--primary)        sepia ink (text + line work)
     --vz-rust     ← var(--accent)         warm rust accent
     --vz-gold     ← var(--accent-light)   weathered ochre
     --vz-moss     ← color-mix from primary toward green
   Class names prefixed `vz-`.
   ===================================================================== */

@font-face { font-family: "Bowlby One SC"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/bowlby-one-sc.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Special Elite"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/special-elite.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IM Fell English"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/im-fell-english.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IM Fell English"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/im-fell-english-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sansita"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/sansita-italic-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sansita"; font-style: italic; font-weight: 700; font-display: swap; src: url("fonts/sansita-italic-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --vz-paper:      var(--bg, #f3e7cd);
  --vz-paper-2:    color-mix(in srgb, var(--bg, #f3e7cd), #000 6%);
  --vz-paper-dark: #2a1810;
  --vz-ink:        var(--primary, #3a2418);
  --vz-ink-soft:   var(--primary-light, #5a3a26);
  --vz-rust:       var(--accent, #a85b2a);
  --vz-rust-deep:  color-mix(in srgb, var(--accent, #a85b2a), #000 22%);
  /* Accent-as-text on paper bg. Auto-darkens for bright-accent themes. */
  --vz-accent-text: var(--accent-deep, var(--vz-rust));
  --vz-gold:       var(--accent-light, #c79c46);
  --vz-moss:       #6b6c3a;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
.vz-body {
  margin: 0;
  background: var(--vz-paper);
  color: var(--vz-ink);
  font-family: "Special Elite", "Courier New", monospace;
  font-size: 16px; line-height: 1.55; overflow-x: hidden;
}
/* Fixed-position layer for the notebook-rule + gradient overlay. See
   raptor-rampage for the compositor-layer rationale: avoids per-frame
   repaint on scroll. */
.vz-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(180deg, transparent 0 27px, rgba(58,36,24,0.04) 27px 28px),
    radial-gradient(ellipse at 50% 10%, rgba(199,156,70,0.10), transparent 60%),
    radial-gradient(ellipse at 50% 90%, rgba(168,91,42,0.08), transparent 60%);
}
.vz-body img { max-width: 100%; display: block; }
.vz-body ul, .vz-body ol { padding: 0; margin: 0; list-style: none; }
.vz-body a { color: inherit; text-decoration: none; }
.vz-body ::selection { background: var(--vz-rust); color: var(--vz-paper); }
.vz-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.vz-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--vz-ink, #000);
  color: #fff;
  padding: 12px 16px;
  text-decoration: none;
  font-weight: 600;
}
.vz-skip-link:focus { left: 16px; top: 16px; }

.vz-container { width: 100%; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 640px) { .vz-container { padding: 0 2rem; } }
@media (min-width: 1024px) { .vz-container { padding: 0 2.5rem; max-width: 1320px; } }

.vz-serif-it { font-family: "IM Fell English", Georgia, serif; font-style: italic; font-weight: 400; }
.vz-light { color: var(--vz-paper); }

/* Rotation helpers */
.vz-rot-n1  { transform: rotate(-1deg); }
.vz-rot-n08 { transform: rotate(-0.8deg); }
.vz-rot-n05 { transform: rotate(-0.5deg); }
.vz-rot-p05 { transform: rotate(0.5deg); }
.vz-rot-p1  { transform: rotate(1deg); }

/* Type */
.vz-bubble-title, .vz-bubble-head { font-family: "Bowlby One SC", Impact, sans-serif; letter-spacing: 0.02em; line-height: 0.95; text-transform: uppercase; margin: 0; }
.vz-bubble-title { font-size: clamp(2.4rem, 7.5vw, 5rem); color: var(--vz-ink); }
.vz-bubble-row { display: block; }
.vz-bubble-row-em { color: var(--vz-accent-text); }
.vz-bubble-head { font-size: clamp(2rem, 5vw, 3.4rem); color: var(--vz-ink); margin: 0.5rem 0; }
.vz-bubble-head.vz-light { color: var(--vz-paper); }
.vz-bubble-head .vz-serif-it { text-transform: none; font-family: "IM Fell English", Georgia, serif; font-style: italic; color: var(--vz-accent-text); }
.vz-bubble-head.vz-light .vz-serif-it { color: var(--vz-gold); }

.vz-eyebrow { display: inline-block; font-family: "Special Elite", monospace; font-size: 0.78rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--vz-accent-text); margin: 0 0 0.5rem; }
.vz-eyebrow.vz-light { color: var(--vz-gold); }
.vz-dek { color: var(--vz-ink-soft); margin: 0.75rem 0 0; font-size: 0.98rem; line-height: 1.65; }
.vz-lead { font-size: 1.05rem; line-height: 1.65; color: var(--vz-ink-soft); }
.vz-lead.vz-light { color: color-mix(in srgb, var(--vz-paper), #000 15%); }
.vz-section-head-wrap { text-align: center; max-width: 760px; margin: 0 auto 2.5rem; }

.vz-section-num {
  display: inline-block; font-family: "Special Elite", monospace; font-size: 0.8rem;
  letter-spacing: 0.2em; color: var(--vz-accent-text);
  border: 1px dashed var(--vz-rust); padding: 0.2rem 0.55rem;
  margin-bottom: 0.85rem;
}

/* ===================== TICKER ===================== */
.vz-ticker { --vz-accent-text: var(--vz-rust); background: var(--vz-paper-dark); color: var(--vz-paper); padding: 0.55rem 0; font-family: "Special Elite", monospace; font-size: 0.82rem; letter-spacing: 0.06em; }
.vz-ticker-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 0.9rem; justify-content: center; }
.vz-dot { color: var(--vz-gold); }

/* ===================== NAV ===================== */
#vz-nav { background: var(--vz-paper); border-bottom: 3px double var(--vz-ink); position: sticky; top: 0; z-index: 50; }
.vz-nav-inner { display: flex; align-items: center; gap: 0.5rem 1.5rem; padding: 0.7rem 1.25rem; position: relative; }
.vz-logo { display: inline-flex; align-items: center; gap: 0.65rem; color: var(--vz-ink); flex-shrink: 0; }
.vz-logo-mini { width: 56px; height: 36px; color: var(--vz-ink); }
/* max-height + width:auto so wide logos (e.g. 512x136) render at natural
   aspect ratio instead of being letterboxed into Nx11 slivers. */
.vz-logo-img { max-height: 48px; width: auto; max-width: 220px; object-fit: contain; }
.vz-logo span { font-family: "Bowlby One SC", Impact, sans-serif; font-size: clamp(1rem, 1.6vw, 1.25rem); text-transform: uppercase; letter-spacing: 0.02em; max-width: 14em; overflow-wrap: anywhere; line-height: 1.15; }
.vz-nav-links { display: flex; gap: 0.4rem 1.2rem; font-family: "Special Elite", monospace; font-size: 0.9rem; letter-spacing: 0.1em; flex-wrap: wrap; flex: 1; justify-content: center; }
.vz-nav-links a { padding: 0.3rem 0; border-bottom: 2px solid transparent; color: var(--vz-ink); }
.vz-nav-links a:hover, .vz-nav-links a.vz-nav-active { border-bottom-color: var(--vz-rust); color: var(--vz-accent-text); }
.vz-nav-cta { flex-shrink: 0; }

/* Mobile hamburger (<768px). */
.vz-nav-toggle {
  display: none; flex-direction: column; justify-content: center;
  gap: 5px; width: 44px; height: 44px; padding: 10px; cursor: pointer;
  background: transparent; border: 1.5px solid var(--vz-ink); color: var(--vz-ink);
  margin-left: auto;
}
.vz-nav-toggle span { display: block; width: 100%; height: 2.5px; background: currentColor; transition: transform 200ms, opacity 150ms; }
/* Auth buttons + backdrop are drawer-only — hidden on desktop, where the
   .vz-nav-cta Member Login button in the bar handles login. */
.vz-nav-drawer-auth { display: none; }
.vz-nav-backdrop { display: none; }
body.vz-no-scroll { overflow: hidden; }

/* Mobile (<768px): logo + hamburger in the bar; everything else slides in
   from the right as a drawer. */
@media (max-width: 767.98px) {
  /* Nothing above the nav on mobile — only the club name + drawer trigger show. */
  .vz-ticker { display: none; }
  .vz-nav-inner { gap: 0.75rem; }
  /* Let the (long) wordmark take/yield space and wrap, instead of hogging the
     bar — otherwise it flex-shrinks the hamburger to nothing. */
  .vz-logo { flex: 1 1 auto; min-width: 0; }
  /* Hamburger pinned right, fixed size (flex-shrink:0 so the wordmark can't
     squish it — that was collapsing the bars to 2px = the "empty square").
     z-index keeps the X above the drawer + backdrop so it can close them. */
  .vz-nav-toggle { display: inline-flex; flex-shrink: 0; margin-left: auto; position: relative; z-index: 70; }
  .vz-nav-cta { display: none; }

  /* Right-side slide-in drawer: a single vertical column that scrolls when
     tall. flex-wrap:nowrap is REQUIRED — the desktop .vz-nav-links sets
     flex-wrap:wrap, and a fixed-height column with wrap spills into extra
     columns (the "wrap" bug) instead of one scrolling list. */
  .vz-nav-links {
    position: fixed; top: 0; right: 0; bottom: 0; height: 100vh; height: 100dvh;
    width: min(82vw, 320px);
    flex: none; flex-direction: column; flex-wrap: nowrap; align-items: stretch;
    justify-content: flex-start; gap: 0;
    background: var(--vz-paper);
    border-left: 3px double var(--vz-ink);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.22);
    padding: 4.75rem 0 1.5rem;   /* clears the sticky bar / hamburger */
    transform: translateX(100%);
    transition: transform 240ms ease;
    z-index: 60;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #vz-nav.vz-nav-open .vz-nav-links { transform: translateX(0); }

  /* flex-shrink:0 so links keep their height and the drawer scrolls rather
     than squishing them. */
  .vz-nav-links a { flex-shrink: 0; padding: 0.85rem 1.6rem; border-bottom: 1px dashed color-mix(in srgb, var(--vz-ink), transparent 75%); }

  /* Auth section pinned to the bottom of the drawer. Self-contained styling
     (does not lean on .vz-btn-*) so the .vz-nav-links a row rules + the
     .vz-body a reset can't disfigure these buttons — defined AFTER
     .vz-nav-links a so it wins the equal-specificity tie. */
  .vz-nav-drawer-auth {
    display: flex; flex-direction: column; flex-shrink: 0; gap: 0.65rem;
    margin-top: auto; padding: 1.4rem 1.4rem 0.4rem;
    border-top: 3px double var(--vz-ink);
  }
  .vz-nav-drawer-auth a {
    display: flex; align-items: center; justify-content: center; gap: 0.4rem;
    padding: 0.8rem 1rem; border: 2px solid var(--vz-ink); border-radius: 3px;
    font-family: "Special Elite", monospace; font-size: 0.82rem;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--vz-ink);
  }
  .vz-nav-drawer-auth a.vz-nav-auth-primary {
    background: var(--vz-rust); border-color: var(--vz-rust);
    color: var(--accent-text, var(--vz-paper)) !important;
  }

  /* Backdrop behind the drawer. */
  #vz-nav.vz-nav-open .vz-nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: color-mix(in srgb, var(--vz-ink), transparent 50%);
  }

  /* Hamburger → X while open. */
  #vz-nav.vz-nav-open .vz-nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  #vz-nav.vz-nav-open .vz-nav-toggle span:nth-child(2) { opacity: 0; }
  #vz-nav.vz-nav-open .vz-nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}
.vz-btn-outline, .vz-btn-rust { display: inline-flex; align-items: center; gap: 0.4rem; font-family: "Special Elite", monospace; font-size: 0.85rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.7rem 1.2rem; border-radius: 3px; transition: background .15s, color .15s, border-color .15s, transform .15s; }
.vz-btn-sm { padding: 0.5rem 0.95rem; font-size: 0.78rem; min-height: 44px; justify-content: center; }
.vz-btn-lg { padding: 0.95rem 1.6rem; font-size: 0.95rem; }
.vz-btn-outline { background: transparent; color: var(--vz-ink); border: 2px solid var(--vz-ink); }
.vz-btn-outline:hover { background: var(--vz-ink); color: var(--vz-paper) !important; transform: translateY(-1px); }
.vz-btn-outline-light { color: var(--vz-paper); border-color: var(--vz-paper); }
.vz-btn-outline-light:hover { background: var(--vz-paper); color: var(--vz-ink) !important; }
.vz-btn-rust { background: var(--vz-rust); color: var(--accent-text, var(--vz-paper)) !important; border: 2px solid var(--vz-rust); }
.vz-btn-rust:hover { background: var(--vz-rust-deep); border-color: var(--vz-rust-deep); transform: translateY(-1px); }

/* ===================== HERO ===================== */
.vz-hero { position: relative; padding: 5rem 0 4rem; overflow: hidden; min-height: clamp(360px, 60dvh, 640px); }
/* Hero photo always renders (admin upload → design_package default). Sepia
   filter + cream wash keeps the field-manual aesthetic over a real photo. */
.vz-hero-media { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.vz-hero-media img, .vz-hero-media video {
  width: 100%; height: 100%; object-fit: cover;
  filter: sepia(0.4) saturate(0.85) contrast(0.95) brightness(0.95);
  opacity: 0.35;
}
.vz-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(243,231,205,0.55) 0%, rgba(243,231,205,0.20) 35%, rgba(243,231,205,0.85) 100%),
    repeating-linear-gradient(180deg, transparent 0 27px, rgba(58,36,24,0.05) 27px 28px);
}
.vz-pine { position: absolute; width: 60px; height: 120px; color: var(--vz-ink); z-index: 1; pointer-events: none; }
.vz-pine-tl { top: 1rem; left: 0.5rem; opacity: 0.55; }
.vz-pine-tr { top: 1rem; right: 0.5rem; opacity: 0.55; transform: scaleX(-1); }
.vz-hero-inner { position: relative; z-index: 2; text-align: center; }
/* Hero logo — rendered when admin has uploaded a logo + logo display is on.
   Centered to match the scrapbook hero composition. */
.vz-hero-logo {
  display: block;
  max-height: 130px;
  max-width: min(100%, 300px);
  width: auto;
  height: auto;
  margin: 0 auto 1.25rem;
  object-fit: contain;
}
.vz-postmark {
  display: inline-block; padding: 0.6rem 1.1rem; margin-bottom: 1rem;
  border: 2px solid var(--vz-rust); border-radius: 4px;
  font-family: "Special Elite", monospace; font-size: 0.78rem; letter-spacing: 0.2em;
  color: var(--vz-accent-text); transform: rotate(-3deg); background: var(--vz-paper);
}
.vz-postmark-big { font-family: "Bowlby One SC", Impact, sans-serif; font-size: 1.6rem; letter-spacing: 0.04em; line-height: 1; }
.vz-sign-plate { display: inline-block; padding: 1.5rem 2.5rem; border: 4px double var(--vz-ink); background: var(--vz-paper); border-radius: 3px; margin: 0.5rem auto 1.5rem; max-width: 100%; }
.vz-sign-foot { font-family: "Special Elite", monospace; font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--vz-ink-soft); margin-top: 0.5rem; }

.vz-scene-row { display: grid; grid-template-columns: 1fr; gap: 2rem; max-width: 900px; margin: 1.5rem auto 2rem; align-items: center; }
@media (min-width: 760px) { .vz-scene-row { grid-template-columns: 1fr 1.2fr; } }
.vz-quote { background: var(--vz-paper); padding: 1.4rem 1.6rem; border: 2px solid var(--vz-ink); border-radius: 3px; }
.vz-quote p { margin: 0; font-size: 1.05rem; line-height: 1.5; color: var(--vz-ink); }
.vz-scene { width: 100%; height: auto; color: var(--vz-ink); }

.vz-hero-actions { display: inline-flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.vz-hero-actions-center { justify-content: center; }
.vz-divider { width: 100%; height: 24px; color: var(--vz-accent-text); margin-top: 2.5rem; pointer-events: none; }

/* ===================== STATS ===================== */
.vz-stats { padding: 3rem 0; background: var(--vz-paper); border-top: 2px dashed var(--vz-ink); border-bottom: 2px dashed var(--vz-ink); position: relative; }
.vz-stats > .vz-container { text-align: center; }
.vz-stats .vz-section-num { position: absolute; top: -0.95rem; left: 1.25rem; background: var(--vz-paper); }
/* Stats grid — flex+wrap+center so the 1-3 tiles always center as a row.
   Cards sit in a 200-260px band; at desktop with 3 tiles they center
   (instead of left-aligned in the old 4-col grid with an empty cell). */
.vz-stats-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; }
.vz-stat { flex: 1 1 200px; min-width: 180px; max-width: 260px; }
.vz-stat { background: var(--vz-paper-2); padding: 1.1rem 1.25rem; border: 2px solid var(--vz-ink); border-radius: 3px; }
.vz-stat-num { font-family: "Bowlby One SC", Impact, sans-serif; font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1; color: var(--vz-accent-text); }
.vz-stat-lbl { font-family: "Special Elite", monospace; font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; margin-top: 0.45rem; color: var(--vz-ink-soft); }

/* ===================== ABOUT ===================== */
.vz-about { padding: 3.5rem 0; }
/* Admin-defined custom content sections reuse the about layout but
   shouldn't carry the full 5rem cadence — stacked customs were leaving
   ~10rem of dead space between them. Tighter padding overall, and an
   even tighter top edge when consecutive customs follow each other. */
.vz-about--custom { padding: 3rem 0; }
.vz-about--custom + .vz-about--custom { padding-top: 1rem; }
.vz-about-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 900px) { .vz-about-grid { grid-template-columns: 1.6fr 1fr; gap: 3.5rem; } }
.vz-about-body p { margin: 0 0 1.1rem; color: var(--vz-ink); line-height: 1.7; }
.vz-about-body p:last-child { margin-bottom: 0; }
.vz-feature-side { display: flex; flex-direction: column; gap: 1.25rem; }
.vz-feature-card { background: var(--vz-paper-2); border: 2px solid var(--vz-ink); padding: 1.1rem 1.25rem; border-radius: 3px; }
.vz-feature-card h3 { margin: 0 0 0.4rem; font-family: "Bowlby One SC", Impact, sans-serif; font-size: 1.1rem; color: var(--vz-accent-text); text-transform: uppercase; letter-spacing: 0.02em; }
.vz-feature-card p { margin: 0; font-size: 0.9rem; color: var(--vz-ink-soft); line-height: 1.5; }
.vz-tape { position: relative; }

/* ===================== EVENTS / TICKETS ===================== */
.vz-events { padding: 3.5rem 0; background: color-mix(in srgb, var(--vz-paper), #000 4%); border-top: 2px dashed var(--vz-ink); }
/* Events grid — 1-up on mobile, 2-up at desktop. Flex parent with
   justify-content:center so an odd-numbered last row (e.g. 3 events =
   2 + 1) sits centered on its own row instead of left-aligned.
   flex-grow:0 keeps the lone trailing card from stretching to full row
   width. Each ticket itself is still display:grid internally (90px stub
   + body column) — that's independent of the parent's flex sizing. */
.vz-tickets { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; }
.vz-ticket { display: grid; grid-template-columns: 90px 1fr; background: var(--vz-paper); border: 2px solid var(--vz-ink); border-radius: 3px; overflow: hidden; box-shadow: 4px 4px 0 rgba(58,36,24,0.15); flex: 0 0 100%; }
@media (min-width: 760px) { .vz-ticket { flex: 0 0 calc(50% - 0.75rem); } }
.vz-ticket-stub { background: var(--vz-rust); color: var(--vz-paper); text-align: center; padding: 1.1rem 0.5rem; display: flex; flex-direction: column; gap: 0.15rem; justify-content: center; position: relative; }
.vz-ticket-stub::before, .vz-ticket-stub::after { content: ""; position: absolute; right: -8px; width: 16px; height: 16px; background: var(--vz-paper); border: 2px solid var(--vz-ink); border-radius: 50%; }
.vz-ticket-stub::before { top: -8px; }
.vz-ticket-stub::after { bottom: -8px; }
.vz-ticket .vz-month { font-family: "Special Elite", monospace; font-size: 0.78rem; letter-spacing: 0.22em; }
.vz-ticket .vz-day { font-family: "Bowlby One SC", Impact, sans-serif; font-size: 2.2rem; line-height: 1; }
.vz-ticket .vz-dow { font-family: "Special Elite", monospace; font-size: 0.72rem; letter-spacing: 0.22em; opacity: 0.9; }
.vz-ticket-body { padding: 1.1rem 1.25rem 1.25rem; }
.vz-ticket-body h3 { margin: 0 0 0.4rem; font-family: "Bowlby One SC", Impact, sans-serif; font-size: 1.2rem; color: var(--vz-ink); text-transform: uppercase; letter-spacing: 0.02em; }
.vz-ticket-where { margin: 0 0 0.5rem; font-family: "IM Fell English", serif; font-style: italic; color: var(--vz-accent-text); }
.vz-ticket-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; margin: 0; padding: 0; font-size: 0.85rem; }
.vz-ticket-meta li { color: var(--vz-ink); }
.vz-ticket-meta li span { display: block; font-family: "Special Elite", monospace; font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vz-ink-soft); margin-bottom: 0.1rem; }

/* ===================== TRAILS ===================== */
.vz-trails { padding: 3.5rem 0; }
/* Explicit 1/2/3 col so 1-2 cards don't stretch to full desktop width. */
.vz-trail-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px)  { .vz-trail-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .vz-trail-grid { grid-template-columns: repeat(3, 1fr); } }
/* When fewer than 3 trails exist, center the cards within the grid at the
   wide breakpoint instead of letting them hug the left edge of the 3-track
   layout. auto-fit collapses empty tracks; the 420px cap stops a single
   card from spanning the full container. */
@media (min-width: 1024px) {
  .vz-trail-grid--few { grid-template-columns: repeat(auto-fit, minmax(300px, 420px)); justify-content: center; }
}
/* overflow:visible (was hidden) so .vz-trail-tape can extend above the
   card per its top:-10px offset — the tape's the visual hook for the
   whole card and being clipped flat to the top edge erased the effect.
   The image's top-corner rounding moves to .vz-trail-img so we don't
   lose the rounded-corner clip. */
.vz-trail { position: relative; background: var(--vz-paper); border: 2px solid var(--vz-ink); border-radius: 3px; overflow: visible; box-shadow: 4px 4px 0 rgba(58,36,24,0.15); display: flex; flex-direction: column; }
.vz-trail-tape { position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(-2deg); width: 80px; height: 22px; background: color-mix(in srgb, var(--vz-gold), #fff 20%); opacity: 0.85; border-left: 1px dashed rgba(58,36,24,0.3); border-right: 1px dashed rgba(58,36,24,0.3); pointer-events: none; z-index: 1; }
.vz-trail-img { aspect-ratio: 16/10; background: var(--vz-paper-2); overflow: hidden; border-radius: 3px 3px 0 0; }
.vz-trail-img img { width: 100%; height: 100%; object-fit: cover; }
.vz-trail-body { padding: 1.1rem 1.25rem 1.35rem; display: flex; flex-direction: column; gap: 0.45rem; }
.vz-trail-rating { align-self: flex-start; font-family: "Special Elite", monospace; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; padding: 0.22rem 0.55rem; border: 1.5px solid; border-radius: 999px; }
.vz-r-easy { color: var(--vz-moss); border-color: var(--vz-moss); }
.vz-r-mod  { color: var(--vz-gold); border-color: var(--vz-gold); }
.vz-r-hard { color: var(--vz-paper); background: var(--vz-rust); border-color: var(--vz-rust); }
.vz-trail h3 { margin: 0; font-family: "Bowlby One SC", Impact, sans-serif; font-size: 1.2rem; color: var(--vz-ink); text-transform: uppercase; letter-spacing: 0.02em; }
.vz-trail p { margin: 0; font-size: 0.92rem; color: var(--vz-ink-soft); line-height: 1.55; }
.vz-trail-len { font-family: "Special Elite", monospace; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vz-accent-text); }

/* ===================== STORE ===================== */
.vz-store { padding: 3.5rem 0; background: color-mix(in srgb, var(--vz-paper), #000 4%); }
/* Centered flex — partial rows center instead of left-align */
.vz-store-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px)  { .vz-store-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .vz-store-grid { grid-template-columns: repeat(3, 1fr); } }
.vz-store-card { background: var(--vz-paper); border: 2px solid var(--vz-ink); border-radius: 3px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 4px 4px 0 rgba(58,36,24,0.15); }
.vz-store-img { aspect-ratio: 8/5; background: var(--vz-paper-2); position: relative; overflow: hidden; }
.vz-store-img img { width: 100%; height: 100%; object-fit: cover; }
.vz-ticket-date {
  position: absolute; top: 0.55rem; left: 0.55rem; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 50px; padding: 0.35rem 0.55rem;
  background: var(--vz-paper); color: var(--vz-accent-text);
  border: 2px solid var(--vz-rust);
  font-family: "Bowlby One SC", Impact, sans-serif; line-height: 1;
  transform: rotate(-3deg);
  box-shadow: 2px 2px 0 rgba(58,36,24,0.18);
}
.vz-ticket-mo  { font-size: 0.68rem; letter-spacing: 0.10em; text-transform: uppercase; }
.vz-ticket-day { font-size: 1.4rem; margin-top: 2px; }
.vz-store-body { padding: 1rem 1.1rem 1.25rem; display: flex; flex-direction: column; gap: 0.3rem; }
.vz-store-type { font-family: "Special Elite", monospace; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--vz-accent-text); }
.vz-store-card h3 { margin: 0; font-family: "Bowlby One SC", Impact, sans-serif; font-size: 1rem; color: var(--vz-ink); text-transform: uppercase; letter-spacing: 0.02em; }
.vz-store-price { font-family: "Bowlby One SC", Impact, sans-serif; font-size: 1.4rem; color: var(--vz-accent-text); margin-top: 0.25rem; }
.vz-store-foot { margin-top: 2.5rem; text-align: center; }

/* ===================== GALLERY ===================== */
.vz-gallery { padding: 3.5rem 0; }
.vz-gallery-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .vz-gallery-grid { grid-template-columns: repeat(3, 1fr); } }
/* overflow:visible (was hidden) so .vz-gallery-tape can extend above
   the card per its top:-8px offset. The 8px paper border already
   encloses the inner photo via the content box, so dropping the clip
   doesn't let the photo bleed. */
.vz-gallery-card { position: relative; margin: 0; aspect-ratio: 4/3; background: var(--vz-paper); border: 8px solid var(--vz-paper); box-shadow: 4px 4px 0 rgba(58,36,24,0.15); overflow: visible; }
.vz-gallery-tape { position: absolute; top: -8px; left: 50%; transform: translateX(-50%) rotate(-3deg); width: 60px; height: 18px; background: color-mix(in srgb, var(--vz-gold), #fff 20%); opacity: 0.8; pointer-events: none; z-index: 2; }
.vz-gallery-card img { width: 100%; height: 100%; object-fit: cover; }

/* ===================== BACKERS ===================== */
.vz-backers { padding: 3.5rem 0; }
.vz-backers-alt { background: color-mix(in srgb, var(--vz-paper), #000 4%); }
/* Backer grid — explicit 1/2/3 col. Single sponsor cards no longer stretch
   to fill the full container width on desktop. */
/* Sponsors + Partners — flex+wrap+center in a 240-320px card band.
   Allows up to 3 columns at ≥1024 (3×320 + 2×gap ≈ 1010px fits the
   container's ~1240px content width), wraps to 2 columns mid-range,
   1 on mobile. Partial rows or short lists (1-2 cards) center instead
   of drifting to the left edge. */
.vz-backer-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; }
.vz-backer-card { background: var(--vz-paper); border: 2px solid var(--vz-ink); border-radius: 3px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 4px 4px 0 rgba(58,36,24,0.15); flex: 1 1 240px; min-width: 240px; max-width: 320px; }
.vz-backer-img { aspect-ratio: 8/5; background: #fff; display: flex; align-items: center; justify-content: center; padding: 0.85rem; border-bottom: 1px dashed var(--vz-ink); }
.vz-backer-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.vz-backer-initials { font-family: "Bowlby One SC", Impact, sans-serif; font-size: 2.2rem; color: var(--vz-ink); }
.vz-backer-body { padding: 1rem 1.1rem 1.25rem; display: flex; flex-direction: column; gap: 0.4rem; }
.vz-backer-tier { font-family: "Special Elite", monospace; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--vz-accent-text); }
.vz-backer-card h3 { margin: 0; font-family: "Bowlby One SC", Impact, sans-serif; font-size: 1.1rem; color: var(--vz-ink); text-transform: uppercase; letter-spacing: 0.02em; }
.vz-backer-body p { margin: 0; font-size: 0.9rem; color: var(--vz-ink-soft); line-height: 1.55; }
.vz-backer-link { margin-top: auto; font-family: "Special Elite", monospace; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--vz-accent-text); display: inline-flex; gap: 0.4rem; align-items: center; }

/* ===================== LINKS ===================== */
.vz-links { padding: 3rem 0; }
.vz-links-row { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; }

/* ===================== JOIN CTA ===================== */
.vz-join { --vz-accent-text: var(--vz-rust); position: relative; background: var(--vz-paper-dark); color: var(--vz-paper); padding: 4rem 0; overflow: hidden; }
.vz-join-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.vz-join-bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.4) sepia(0.4); }
.vz-join-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42,24,16,0.55) 0%, rgba(42,24,16,0.88) 100%); pointer-events: none; }
.vz-join-inner { position: relative; z-index: 1; text-align: center; max-width: 760px; margin: 0 auto; }
.vz-join-title { font-size: clamp(2.4rem, 6vw, 4rem); }
.vz-join-inner .vz-lead { margin: 1.1rem auto 2rem; max-width: 60ch; }

/* ===================== FOOTER ===================== */
.vz-footer { --vz-accent-text: var(--vz-rust); background: var(--vz-paper-dark); color: var(--vz-paper); padding: 4rem 0 1.5rem; border-top: 6px double var(--vz-rust); }
.vz-footer-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .vz-footer-grid { grid-template-columns: 1.5fr 1fr 1fr; } }
@media (min-width: 700px) { .vz-footer-grid--with-docs { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.vz-footer-name { font-family: "Bowlby One SC", Impact, sans-serif; font-size: 1.4rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--vz-paper); margin-bottom: 0.3rem; overflow-wrap: anywhere; line-height: 1.15; }
.vz-footer-geo { font-family: "IM Fell English", serif; font-style: italic; color: var(--vz-gold); font-size: 0.95rem; margin-bottom: 0.6rem; }
.vz-footer-tag { font-size: 0.95rem; color: color-mix(in srgb, var(--vz-paper), #000 20%); line-height: 1.55; margin: 0 0 0.85rem; }
.vz-footer-socials { display: flex; gap: 0.75rem; margin-top: 0.5rem; }
.vz-footer-socials a { width: 32px; height: 32px; border: 1.5px solid color-mix(in srgb, var(--vz-paper), #000 50%); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--vz-paper); transition: border-color .15s, color .15s; }
.vz-footer-socials a:hover { color: var(--vz-accent-text); border-color: var(--vz-rust); }
.vz-footer-socials svg { width: 14px; height: 14px; }
.vz-footer-head { font-family: "Bowlby One SC", Impact, sans-serif; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--vz-gold); margin-bottom: 0.85rem; }
.vz-footer-list li { padding: 0.28rem 0; font-size: 0.95rem; }
.vz-footer-list a { color: var(--vz-paper); transition: color .15s; }
.vz-footer-list a:hover { color: var(--vz-accent-text); }
.vz-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; padding-top: 1.75rem; margin-top: 2.5rem; border-top: 1px solid color-mix(in srgb, var(--vz-paper), #000 55%); font-size: 0.78rem; color: color-mix(in srgb, var(--vz-paper), #000 35%); }
.vz-footer-tc-link { color: var(--vz-gold); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; font-weight: 700; }

/* Hero + join always render a photo (admin upload → design_package default). */

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .vz-hero, .vz-stat, .vz-feature-card, .vz-ticket, .vz-trail, .vz-store-card, .vz-gallery-card, .vz-backer-card { transform: none !important; }
}

/* Footer contact info — admin Content tab footer.email/phone/address.
   Sits in the brand column under the social row, smaller than the
   .vz-footer-list typography for column rhythm. */
.vz-footer-contact { list-style: none; padding: 0; margin: 1rem 0 0; }
.vz-footer-contact li { padding: 0.22rem 0; font-size: 0.82rem; color: color-mix(in srgb, var(--vz-paper), #000 35%); line-height: 1.5; }
.vz-footer-contact a { color: inherit; transition: color .15s; }
.vz-footer-contact a:hover { color: var(--vz-accent-text); }

/* Auto-linkified URLs / emails inside the footer tagline. Match the
   footer-contact link idiom — no underline at rest, accent colour shift
   on hover. .vz-body a scoping needed to outspec the .vz-body a reset. */
.vz-body a.tc-autolink { color: inherit; transition: color .15s; }
.vz-body a.tc-autolink:hover { color: var(--vz-accent-text); }

/* Member Login lives ONLY in the drawer on mobile. The bar CTA also carries
   .vz-btn-outline (display:inline-flex), which was beating the earlier
   .vz-nav-cta{display:none} on source order — so hide it with a higher-
   specificity rule + !important here, last in the file. */
@media (max-width: 767.98px) {
  .vz-nav-inner .vz-nav-cta { display: none !important; }
}