/* ==========================================================================
   HEARTLAND PRIDE 2026 — DESIGN SYSTEM
   2026 theme: Pride is a Protest · Pride flag palette
   Flat color blocking. Hairline structure. Editorial asymmetry. No gradients.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Bebas Neue";
  src: url("./fonts/BebasNeue-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-Italic-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 900; font-style: italic; font-display: swap;
}

:root {
  /* ---- Pride palette (full strength, flat) ---- */
  --purple:   #94288A;   /* Primary */
  --blue:     #2B46B5;   /* Secondary — dark blue */
  --red:      #ED330A;   /* Accent */
  --orange:   #FCAB49;
  --green:    #37BF5F;
  --sky:      #45C2EE;
  --yellow:   #FAE563;
  --ink:      #1A1A1A;   /* Body text — near-black */
  --white:    #FFFFFF;
  --gray:     #9E9E9E;

  /* ---- Neutrals (warm-cool neutral, derived) ---- */
  --paper:    #FFFFFF;   /* page canvas */
  --surface:  #F6F5F3;   /* lifted surface / muted block */
  --surface-2:#ECEAE6;   /* deeper muted block */
  --line:     #E2E0DB;   /* hairline on light */
  --line-ink: rgba(255,255,255,0.16); /* hairline on dark */
  --ink-70:   #4A4A4A;   /* secondary text */
  --ink-50:   #6E6E6E;   /* tertiary text */

  /* ---- Semantic ---- */
  --fg-1: var(--ink);
  --fg-2: var(--ink-70);
  --fg-3: var(--ink-50);
  --fg-inverse: var(--white);
  --bg-page: var(--paper);

  /* ---- Type scale ---- */
  --fs-mega:    clamp(64px, 9vw, 148px);
  --fs-display: clamp(52px, 6.5vw, 104px);
  --fs-h1:      clamp(38px, 4.6vw, 68px);
  --fs-h2:      clamp(28px, 3.0vw, 44px);
  --fs-h3:      22px;
  --fs-eyebrow: 13px;
  --fs-lead:    20px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-caption: 12px;

  --lh-tight: 0.92;
  --lh-snug:  1.08;
  --lh-body:  1.6;
  --lh-loose: 1.72;

  --ls-display: 0.005em;
  --ls-headline:0.04em;
  --ls-eyebrow: 0.24em;

  /* ---- Spacing (8pt) ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:144px;

  /* ---- Radii — flat by default ---- */
  --r-0:0px; --r-1:2px; --r-2:6px; --r-pill:999px; --r-circle:50%;

  /* ---- Motion — calm, short ---- */
  --ease: cubic-bezier(0.4,0,0.2,1);
  --ease-out: cubic-bezier(0,0,0.2,1);
  --dur-fast:120ms; --dur:200ms; --dur-slow:360ms;

  /* ---- Layout ---- */
  --container: 1200px;
  --gutter: var(--s-5);
}

/* ==========================================================================
   BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   TYPE
   ========================================================================== */
.hp-display, .hp-mega, .hp-h1, .hp-h2 {
  font-family: "Bebas Neue", "Oswald", Impact, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  margin: 0;
}
.hp-mega    { font-size: var(--fs-mega);    line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
.hp-display { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
.hp-h1      { font-size: var(--fs-h1);      line-height: var(--lh-tight); letter-spacing: var(--ls-headline); }
.hp-h2      { font-size: var(--fs-h2);      line-height: var(--lh-snug);  letter-spacing: var(--ls-headline); }
.hp-h3 {
  font-family: "Inter", sans-serif; font-size: var(--fs-h3);
  line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; margin: 0;
}
.hp-eyebrow {
  font-family: "Inter", sans-serif; font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  font-weight: 600; margin: 0;
}
.hp-lead { font-size: var(--fs-lead); line-height: 1.5; font-weight: 400; color: var(--fg-2); margin: 0; }
.hp-p    { font-size: var(--fs-body); line-height: var(--lh-body); margin: 0; }
.hp-small { font-size: var(--fs-small); line-height: 1.5; }
.hp-caption {
  font-family: "Inter", sans-serif; font-size: var(--fs-caption);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3);
  font-weight: 600;
}
.hp-editorial { font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.hp-balance { text-wrap: balance; }
.hp-pretty  { text-wrap: pretty; }

/* ==========================================================================
   SIGNATURE — PRIDE STRIPE RULE
   The recurring divider. A thin 7-segment flag bar. Replaces the lone hairline.
   ========================================================================== */
.hp-stripe {
  display: flex; height: 6px; width: 96px; gap: 0;
  border: 0; margin: var(--s-5) 0;
}
.hp-stripe > span { flex: 1; }
.hp-stripe > span:nth-child(1){ background: var(--red); }
.hp-stripe > span:nth-child(2){ background: var(--orange); }
.hp-stripe > span:nth-child(3){ background: var(--yellow); }
.hp-stripe > span:nth-child(4){ background: var(--green); }
.hp-stripe > span:nth-child(5){ background: var(--sky); }
.hp-stripe > span:nth-child(6){ background: var(--blue); }
.hp-stripe > span:nth-child(7){ background: var(--purple); }
.hp-stripe--wide  { width: 100%; }
.hp-stripe--tall  { height: 10px; }
.hp-stripe--thin  { height: 4px; }
/* vertical edge stripe — used as a structural left-margin accent */
.hp-stripe-v {
  display: flex; flex-direction: column; width: 8px; align-self: stretch;
}
.hp-stripe-v > span { flex: 1; }
.hp-stripe-v > span:nth-child(1){ background: var(--red); }
.hp-stripe-v > span:nth-child(2){ background: var(--orange); }
.hp-stripe-v > span:nth-child(3){ background: var(--yellow); }
.hp-stripe-v > span:nth-child(4){ background: var(--green); }
.hp-stripe-v > span:nth-child(5){ background: var(--sky); }
.hp-stripe-v > span:nth-child(6){ background: var(--blue); }
.hp-stripe-v > span:nth-child(7){ background: var(--purple); }

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.hp-wrap { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.hp-wrap--wide { max-width: 1360px; }
.hp-section { padding-block: var(--s-9); }
.hp-section--tight { padding-block: var(--s-8); }
@media (max-width: 720px){
  .hp-section { padding-block: var(--s-8); }
}
.hp-grid { display: grid; gap: var(--s-6); }
.hp-flex { display: flex; gap: var(--s-4); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.hp-btn {
  font-family: "Inter", sans-serif; font-weight: 600; font-size: var(--fs-small);
  letter-spacing: 0.02em; line-height: 1;
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 15px 26px; border: 1.5px solid transparent; border-radius: var(--r-0);
  cursor: pointer; text-decoration: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  white-space: nowrap;
}
.hp-btn--primary { background: var(--ink); color: var(--white); }
.hp-btn--primary:hover { background: #000; }
.hp-btn--accent  { background: var(--red); color: var(--white); }
.hp-btn--accent:hover { background: #c92806; }
.hp-btn--lead    { background: var(--lead, var(--purple)); color: var(--white); }
.hp-btn--lead:hover { filter: brightness(0.92); }
.hp-btn--ghost   { background: transparent; color: var(--ink); border-color: var(--ink); }
.hp-btn--ghost:hover { background: var(--ink); color: var(--white); }
.hp-btn--ghost-inv { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.5); }
.hp-btn--ghost-inv:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.hp-btn--lg { padding: 18px 34px; font-size: var(--fs-body); }
.hp-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ==========================================================================
   FACT BOX — key event details, scannable
   ========================================================================== */
.hp-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  border: 1.5px solid var(--ink);
}
.hp-fact { padding: var(--s-5) var(--s-5); border-right: 1px solid var(--line); }
.hp-fact:last-child { border-right: 0; }
.hp-fact dt { font-family:"Inter"; font-size: var(--fs-caption); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); font-weight: 700; margin: 0 0 var(--s-2); }
.hp-fact dd { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
@media (max-width: 720px){
  .hp-fact { border-right: 0; border-bottom: 1px solid var(--line); }
  .hp-fact:last-child { border-bottom: 0; }
}

/* ==========================================================================
   LINKS
   ========================================================================== */
.hp-link { text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 1px; transition: opacity var(--dur) var(--ease); font-weight: 600; }
.hp-link:hover { opacity: 0.6; }
.hp-arrow-link { display:inline-flex; align-items:center; gap: var(--s-2); text-decoration:none; font-weight:600; }
.hp-arrow-link svg { transition: transform var(--dur) var(--ease); }
.hp-arrow-link:hover svg { transform: translateX(4px); }

/* ==========================================================================
   FAQ accordion (details/summary)
   ========================================================================== */
.hp-faq { border-top: 1px solid var(--ink); }
.hp-faq details { border-bottom: 1px solid var(--line); }
.hp-faq summary {
  list-style: none; cursor: pointer; padding: var(--s-5) 0;
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  font-weight: 600; font-size: 18px;
}
.hp-faq summary::-webkit-details-marker { display: none; }
.hp-faq summary .hp-faq-sign { flex: none; width: 22px; height: 22px; position: relative; transition: transform var(--dur) var(--ease); }
.hp-faq summary .hp-faq-sign::before, .hp-faq summary .hp-faq-sign::after { content:""; position:absolute; background: var(--ink); }
.hp-faq summary .hp-faq-sign::before { left:0; right:0; top:10px; height:2px; }
.hp-faq summary .hp-faq-sign::after  { top:0; bottom:0; left:10px; width:2px; transition: opacity var(--dur) var(--ease); }
.hp-faq details[open] summary .hp-faq-sign::after { opacity: 0; }
.hp-faq .hp-faq-body { padding: 0 0 var(--s-5); max-width: 68ch; color: var(--fg-2); line-height: var(--lh-loose); }

/* ==========================================================================
   THEME BAR — site-wide 2026 theme. Slim, non-sticky, scrolls away.
   ========================================================================== */
.hp-themebar { background: var(--ink); color: var(--white); }
.hp-themebar-inner {
  display: flex; align-items: center; gap: var(--s-4); min-height: 40px;
  padding-block: var(--s-2);
}
.hp-themebar .hp-stripe { width: 64px; height: 5px; margin: 0; flex: none; }
.hp-themebar .theme-tag {
  font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); flex: none;
}
.hp-themebar .theme-line {
  font-family: "Bebas Neue", sans-serif; font-size: 20px; letter-spacing: 0.1em;
  text-transform: uppercase; line-height: 1; color: var(--white);
}
@media (max-width: 600px){
  .hp-themebar .theme-tag { display: none; }
  .hp-themebar .theme-line { font-size: 17px; }
}

/* ==========================================================================
   EDITORIAL MANIFESTO — the one place italics earn their keep.
   ========================================================================== */
.hp-manifesto { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.hp-manifesto .lead-q {
  font-family: "Bebas Neue", sans-serif; text-transform: uppercase;
  font-size: clamp(40px, 5.5vw, 88px); line-height: 0.9; letter-spacing: var(--ls-display); margin: 0;
}
.hp-manifesto .body-q {
  font-style: italic; font-size: var(--fs-lead); line-height: 1.6; color: var(--fg-2);
  max-width: 60ch; margin: var(--s-6) 0 0;
}

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.hp-header {
  position: sticky; top: 0; z-index: 50; background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.hp-header-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.hp-brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--ink); }
.hp-brand .hp-brand-mark { display:flex; flex-direction:column; width: 7px; height: 30px; }
.hp-brand .hp-brand-mark > span { flex:1; }
.hp-brand .hp-brand-name { font-family:"Bebas Neue", sans-serif; font-size: 22px; letter-spacing: 0.06em; line-height: 1; }
.hp-nav { display: flex; align-items: center; gap: var(--s-6); }
.hp-nav a { text-decoration: none; font-size: var(--fs-small); font-weight: 600; color: var(--fg-2); transition: color var(--dur) var(--ease); position: relative; }
.hp-nav a:hover { color: var(--ink); }
.hp-nav a.is-active { color: var(--ink); }
.hp-nav a.is-active::after { content:""; position:absolute; left:0; right:0; bottom:-24px; height:3px; background: var(--lead, var(--purple)); }
.hp-nav-cta { display:flex; align-items:center; gap: var(--s-4); }
.hp-menu-btn { display:none; background:none; border:0; cursor:pointer; padding: var(--s-2); }
@media (max-width: 900px){
  .hp-nav { display: none; }
  .hp-menu-btn { display: flex; }
  .hp-nav.is-open {
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-5);
    position: absolute; top: 68px; left: 0; right: 0; background: var(--paper);
    border-bottom: 1px solid var(--line); padding: var(--s-6) var(--gutter);
  }
  .hp-nav.is-open a.is-active::after { display:none; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.hp-footer { background: var(--ink); color: var(--white); }
.hp-footer a { color: rgba(255,255,255,0.7); text-decoration: none; transition: color var(--dur) var(--ease); }
.hp-footer a:hover { color: var(--white); }

/* ==========================================================================
   UTILITIES
   ========================================================================== */
.hp-on-dark { color: var(--white); }
.hp-on-dark .hp-lead { color: rgba(255,255,255,0.78); }
.hp-on-dark .hp-eyebrow { color: rgba(255,255,255,0.6); }
.hp-tag {
  display:inline-flex; align-items:center; gap: var(--s-2);
  font-size: var(--fs-caption); font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  padding: 5px 10px; border-radius: var(--r-0);
}
.hp-soon {
  display:inline-flex; align-items:center; gap: var(--s-2);
  font-size: var(--fs-caption); font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  padding: 5px 11px; border: 1.5px dashed var(--gray); color: var(--ink-50);
}
.hp-divider { border:0; border-top:1px solid var(--line); margin: 0; }

/* ==========================================================================
   MOBILE-FIRST HARDENING
   Most visitors arrive on a phone. Keep the header tight, tap targets
   comfortable, and guard against accidental horizontal scroll.
   ========================================================================== */
html { overflow-x: hidden; }

@media (max-width: 900px) {
  /* mobile nav menu: comfortable, thumb-sized targets */
  .hp-nav.is-open a { font-size: 18px; font-weight: 600; padding: 8px 0; width: 100%; }
}

@media (max-width: 560px) {
  .hp-header-inner { height: 58px; }
  .hp-brand .hp-brand-name { font-size: 19px; }
  .hp-brand .hp-brand-mark { height: 26px; }
  .hp-nav-cta { gap: var(--s-3); }
  .hp-nav-cta .hp-btn { padding: 11px 15px; font-size: 13px; }
  /* the theme bar sits above a sticky header — keep it from eating screen height */
  .hp-themebar-inner { min-height: 34px; }
}