/* Generated by Frontend Wireframe Engine — Phase 4 (v2 "The Rally Poster")
   DNA Hash: cd83b1c67881
   Do not edit — regenerate via the engine */

:root {
  /* Typography — condensed-impactful */
  --font-heading: 'Barlow Condensed', sans-serif;
  --font-body: 'Barlow', sans-serif;
  --scale-ratio: 1.333;
  --heading-weight: 800;
  --heading-case: uppercase;
  --heading-letterspacing: 0.04em;
  --heading-line-height: 1.0;
  --body-size: 16px;
  --body-weight: 400;
  --body-line-height: 1.65;
  --body-letterspacing: 0.005em;
  --max-line-length: 70ch;

  /* Components — bold-geometric (shadows restrained per flat-clean texture) */
  --radius: 8px;
  --shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.15);
  --border: 2.5px solid currentColor;
  --card-bg: #ffffff;
  --card-border: 2.5px solid #111111;
  --card-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12);
  --card-padding: 24px;
  --card-radius: 8px;
  --hover-duration: 160ms;
  --hover-easing: cubic-bezier(0.55, 0, 0.1, 1);

  /* Color — bold-color-blocking, brand-locked red/navy/white */
  --color-block-a: #C8102E;   /* brick red — deepened from brand #ED0206 for AA white-on-red */
  --color-block-b: #16294F;   /* deep navy — from logo navy family */
  --color-block-neutral: #ffffff;
  --color-bg-base: #ffffff;
  --color-bg-elevated: #ffffff;
  --color-bg-card: #ffffff;
  --color-text-primary: #111111;
  --color-text-secondary: #45474d;
  --color-text-on-dark: #ffffff;
  --color-accent: #C8102E;
  --color-border: #111111;

  /* Spacing — balanced */
  --spacing-base: 8px;
  --spacing-section: 80px;
  --spacing-content-desktop: 64px;
  --spacing-content-mobile: 20px;
  --spacing-paragraph: 20px;
  --spacing-component: 24px;

  /* Animation — snappy-responsive */
  --transition-speed: 120ms;
  --transition-easing: cubic-bezier(0.0, 0.0, 0.2, 1);
  --entrance-duration: 300ms;
  --entrance-easing: cubic-bezier(0.0, 0.0, 0.2, 1);
  --stagger-delay: 40ms;

  /* Layout — z-pattern-conversion */
  --layout-max-width: 1200px;
  --layout-whitespace-ratio: 0.32;

  /* Texture — flat-clean: no gradients, no grain, no patterns */
  --texture-type: "flat-clean";

  /* Navigation — solid-minimal */
  --nav-type: "solid-minimal";

  /* Hero Archetype — z-pattern-flow */
  --hero-archetype: "z-pattern-flow";
  --hero-height: 90vh;

  /* Button Archetype — oversized-statement (overrides component button_style) */
  --btn-archetype: "oversized-statement";
  --btn-shape: 8px;
  --btn-fill: #C8102E;
  --btn-padding: 20px 48px;
}

/* --- Base type --- */
body {
  font-family: var(--font-body);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letterspacing);
  color: var(--color-text-primary);
  background: var(--color-bg-base);
}

h1, h2, h3, h4, .display {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  text-transform: uppercase;
  letter-spacing: var(--heading-letterspacing);
  line-height: var(--heading-line-height);
}

/* --- Oversized-statement buttons --- */
.btn {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 18px;
  padding: 20px 48px;
  border-radius: 8px;
  border: 2.5px solid transparent;
  background: var(--color-accent);
  color: #ffffff;
  transition: transform var(--transition-speed) var(--transition-easing),
              box-shadow var(--transition-speed) var(--transition-easing),
              background-color var(--hover-duration) var(--hover-easing),
              color var(--hover-duration) var(--hover-easing);
  text-align: center;
}
.btn:hover { transform: scale(1.02); box-shadow: 0 8px 28px rgba(0,0,0,0.20); }
.btn:active { transform: scale(0.98); box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.btn:focus-visible { outline: 3px solid #16294F; outline-offset: 3px; }

.btn--outline {
  background: transparent;
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.btn--outline:hover { background: var(--color-accent); color: #ffffff; }

/* On red panels: white fill, red text; outline variant in white */
.on-red .btn { background: #ffffff; color: #C8102E; }
.on-red .btn:focus-visible { outline-color: #ffffff; }
.on-red .btn--outline { background: transparent; border-color: #ffffff; color: #ffffff; }
.on-red .btn--outline:hover { background: #ffffff; color: #C8102E; }

/* On navy panels: red fill stays; outline in white */
.on-navy .btn--outline { border-color: #ffffff; color: #ffffff; background: transparent; }
.on-navy .btn--outline:hover { background: #ffffff; color: #16294F; }

.btn--compact { font-size: 15px; padding: 12px 24px; }

/* --- Bold-geometric cards --- */
.card {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition: transform var(--transition-speed) var(--transition-easing),
              box-shadow var(--transition-speed) var(--transition-easing);
}
.card:hover { transform: translateY(-2px); box-shadow: 0px 8px 24px 0px rgba(0,0,0,0.16); }

/* --- Documentary caption bar --- */
.caption-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(17, 17, 17, 0.78);
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 8px 12px;
  font-family: var(--font-body);
}

/* --- Z-pattern thread: numbered section markers --- */
.z-thread-num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.14em;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.z-thread-num::after { content: ""; display: inline-block; width: 56px; height: 2.5px; background: currentColor; }

/* --- Floating badge (campaign button) --- */
.badge-pin {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 9999px;
  transform: rotate(6deg);
  line-height: 1.15;
  letter-spacing: 0.08em;
}

/* --- Snappy-responsive entrance: fade-scale, JS-gated --- */
html.js [data-animate] {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity var(--entrance-duration) var(--entrance-easing),
              transform var(--entrance-duration) var(--entrance-easing);
}
html.js [data-animate].is-visible { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  html.js [data-animate] { opacity: 1; transform: none; transition: none; }
}

/* --- Mobile menu: full-viewport overlay (HARD RULE 8) --- */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 100;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  padding: 24px;
  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  background: #16294F;
}
.mobile-menu.is-open { display: flex; }

/* --- Sticky CTA bar (mutation) --- */
.sticky-cta {
  position: fixed;
  bottom: 0; left: 0; width: 100%;
  z-index: 90;
  background: #16294F;
  border-top: 2.5px solid #C8102E;
  transform: translateY(110%);
  transition: transform 250ms var(--transition-easing);
}
.sticky-cta.is-shown { transform: translateY(0); }

/* --- Candidate filter toggles (bold-geometric) --- */
.filter-btn {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 15px;
  min-height: 44px;
  padding: 8px 18px;
  border: 2.5px solid #111111;
  border-radius: 8px;
  background: #ffffff;
  color: #111111;
  transition: background-color var(--hover-duration) var(--hover-easing),
              color var(--hover-duration) var(--hover-easing),
              border-color var(--hover-duration) var(--hover-easing);
}
.filter-btn:hover { background: #111111; color: #ffffff; }
.filter-btn[aria-pressed="true"] { background: #C8102E; border-color: #C8102E; color: #ffffff; }

/* --- Focus visibility --- */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid #C8102E;
  outline-offset: 2px;
}
.on-red a:focus-visible, .on-red button:focus-visible { outline-color: #ffffff; }
.on-navy a:focus-visible, .on-navy button:focus-visible { outline-color: #ffffff; }