/* ===========================================================
   BloodCon IV — Bloodsuckers of America
   Palette (from the print flyers): parchment/cream, deep red,
   dark navy, distressed textures.
   =========================================================== */
:root{
  --cream:      #ece1c8;   /* parchment */
  --cream-2:    #e2d4b3;   /* deeper parchment */
  --red:        #8f1410;   /* deep arterial red */
  --red-dk:     #66100c;
  --navy:       #1c2436;   /* dark navy */
  --navy-2:     #141a28;
  --ink:        #241611;   /* near-black warm ink */
  --gold:       #c8952f;   /* seal gold */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden;max-width:100%}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Oswald',system-ui,sans-serif;
  font-weight:400;
  line-height:1.45;
  /* subtle distressed grain over everything */
  background-image:
    radial-gradient(circle at 20% 15%, rgba(0,0,0,.05) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,.04) 0 1px, transparent 1px),
    radial-gradient(circle at 40% 85%, rgba(0,0,0,.05) 0 1px, transparent 1px);
  background-size:7px 7px, 11px 11px, 9px 9px;
}
img{max-width:100%;display:block}
a{color:inherit}
sup{font-size:.55em;vertical-align:super}
abbr{text-decoration:underline dotted;cursor:help}

.wrap{max-width:1000px;margin:0 auto;padding:0 24px}

/* ---------- shared type ---------- */
.section-title{
  font-family:'Anton',sans-serif;
  font-weight:400;
  text-transform:uppercase;
  line-height:.95;
  letter-spacing:.01em;
  font-size:clamp(2rem,6vw,4rem);
  color:var(--red);
  text-align:center;
  margin-bottom:1.4rem;
  text-shadow:2px 2px 0 rgba(0,0,0,.12);
}
.section-title--light{color:var(--cream)}

/* ---------- top ticker ---------- */
.ticker{
  background:var(--navy);
  color:var(--cream);
  border-bottom:3px solid var(--red);
  overflow:hidden;
  white-space:nowrap;
  font-family:'Anton';
  font-weight:600;
  letter-spacing:.18em;
  font-size:.8rem;
  padding:7px 0;
}
.ticker__track{
  display:inline-flex;
  width:max-content;
  animation:scroll 102s linear infinite;
}
.ticker__track span{padding-right:0;flex-shrink:0}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- HERO ---------- */
.hero{
  background:
    /* soft radiating rays from the center */
    repeating-conic-gradient(from 0deg at 50% 34%,
      rgba(240,190,120,.10) 0deg 2deg,
      transparent 2deg 6deg),
    /* soft warm glow radiating from behind the title */
    radial-gradient(circle at 50% 34%, rgba(240,190,120,.30) 0%, rgba(212,120,60,.15) 26%, transparent 58%),
    radial-gradient(ellipse at 50% 25%, #b5311f 0%, var(--red) 45%, var(--red-dk) 100%);
  color:var(--cream);
  text-align:center;
  padding:56px 24px 70px;
  position:relative;
  overflow:hidden;
}
/* fade the rays out toward the edges so they stay soft, not sharp */
.hero::before{
  content:"";
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(circle at 50% 34%, transparent 0%, transparent 30%, var(--red) 72%);
  opacity:.55;
}
.hero__inner{max-width:840px;margin:0 auto;position:relative;z-index:2}

/* seal (logo image) */
.seal{
  width:190px;height:190px;margin:0 auto 26px;
  border-radius:50%;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
}

.hero__eyebrow{
  font-family:'Special Elite',monospace;
  font-size:.95rem;letter-spacing:.04em;
  color:var(--cream-2);margin-bottom:14px;
}
.hero__ordinal{
  font-family:'Anton';font-size:clamp(1.3rem,4vw,2rem);
  letter-spacing:.35em;padding-left:.35em;
  color:var(--gold);text-transform:uppercase;
}
.hero__title{
  font-family:'Anton';font-weight:400;
  text-transform:uppercase;line-height:1;
  font-size:clamp(2.6rem,11vw,7rem);
  margin:2px 0 10px;
  letter-spacing:-.01em;
  text-shadow:4px 4px 0 var(--navy), 6px 6px 0 rgba(0,0,0,.25);
}
.hero__cta{
  display:flex;flex-direction:column;align-items:center;
  gap:22px;margin-top:28px;margin-bottom:32px;
}
.hero__meta{
  list-style:none;display:inline-flex;flex-direction:column;justify-content:center;gap:9px;
  border-top:2px solid var(--cream);border-bottom:2px solid var(--cream);
  padding:20px 40px;margin:0;
  font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  font-size:clamp(1.3rem,3vw,1.6rem);
}
.hero__meta strong{font-size:clamp(1.7rem,4.2vw,2.1rem)}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  font-family:'Anton';text-transform:uppercase;
  letter-spacing:.06em;text-decoration:none;
  background:var(--navy);color:var(--cream);
  border:3px solid var(--cream);
  padding:14px 34px;font-size:1.15rem;
  box-shadow:5px 5px 0 rgba(0,0,0,.35);
  transition:transform .08s ease, box-shadow .08s ease;
}
.btn:hover,.btn:focus-visible{
  transform:translate(2px,2px);box-shadow:2px 2px 0 rgba(0,0,0,.35);
}
.btn--big{font-size:1.35rem;padding:16px 40px}
.btn--cream{background:var(--cream);color:var(--red);border-color:var(--navy)}

/* ---------- teaser strip ---------- */
.strip{
  background:var(--navy);color:var(--cream);
  border-top:8px solid var(--gold);border-bottom:8px solid var(--gold);
  text-align:center;padding:38px 24px;
}
.strip__big{
  font-family:'Anton';text-transform:uppercase;
  font-size:clamp(1.4rem,4.5vw,2.6rem);line-height:1.05;
}
.strip__big em{color:var(--gold);font-style:normal}
.strip__small{
  font-family:'Special Elite',monospace;
  font-size:clamp(1.2rem,3.2vw,1.8rem);margin-top:10px;
}
.strip__small .ul{text-decoration:underline;text-decoration-color:var(--red);color:var(--gold)}

/* ---------- countdown ---------- */
.countdown{
  background:
    url("smear-speck-beige.svg") repeat,
    var(--cream-2);
  background-size:150px 123px, cover;
  border-bottom:8px solid var(--red);
  text-align:center;
  padding:34px 24px;
}
.countdown__label{
  font-family:'Anton';text-transform:uppercase;
  color:var(--red);letter-spacing:.06em;
  font-size:clamp(1.3rem,3.5vw,1.9rem);
  margin-bottom:20px;
}
.countdown__clock{
  display:flex;justify-content:center;flex-wrap:wrap;
  gap:clamp(16px,4.5vw,52px);
}
.countdown__unit{display:flex;flex-direction:column;align-items:center;min-width:76px}
.countdown__num{
  font-family:'Anton';color:var(--navy);
  font-size:clamp(2.8rem,9vw,5rem);line-height:1;
  font-variant-numeric:tabular-nums;
}
.countdown__cap{
  font-family:'Anton';font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;font-size:.85rem;color:var(--ink);
  margin-top:8px;
}

/* ---------- the cause ---------- */
.cause{padding:66px 0 0}
.cause__crowd-right{
  display:block;margin:0 auto;
  width:clamp(166px,48vw,523px);height:auto;
}
.cause__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:34px;
  max-width:860px;margin:0 auto;
  font-size:1.12rem;line-height:1.65;
}
.cause__grid strong{color:var(--red-dk)}
.cause__creed{
  text-align:center;font-family:'Anton';text-transform:uppercase;
  color:var(--red);font-size:clamp(1.4rem,4vw,2.4rem);
  margin-top:0;letter-spacing:.02em;
}

.leadership{
  background:var(--navy);color:var(--cream);
  padding:70px 0;
  border-top:8px solid var(--red);
}
.people{
  display:grid;grid-template-columns:1fr 1fr;gap:34px;
  max-width:760px;margin:0 auto;
}
.people__card{text-align:center}
.people__photo{
  width:100%;height:auto;margin:0 auto 16px;
  background:var(--cream-2);
  border:2px solid var(--gold);
  box-shadow:3px 3px 0 var(--red);
}
.people__name{
  font-family:'Anton';font-weight:400;text-transform:uppercase;
  letter-spacing:.01em;font-size:1.7rem;color:var(--gold);
}
.people__role{
  font-family:'Special Elite',monospace;font-size:.92rem;
  letter-spacing:.03em;margin-top:2px;color:var(--cream-2);
}

/* ---------- featuring ---------- */
.featuring{
  background:var(--navy);color:var(--cream);
  padding:70px 0;
  border-top:8px solid var(--red);border-bottom:8px solid var(--red);
}
.bill{list-style:none;max-width:760px;margin:0 auto;display:grid;gap:2px}
.bill li{
  display:grid;grid-template-columns:auto 1fr;column-gap:22px;
  align-items:baseline;
  padding:20px 6px;border-bottom:1px solid rgba(236,225,200,.22);
}
.bill li:first-child{border-top:1px solid rgba(236,225,200,.22)}
.bill__num{
  font-family:'Oswald';font-weight:700;font-size:2.1rem;color:var(--gold);
  grid-row:1 / span 2;align-self:center;
}
.bill h3{
  font-family:'Anton';font-weight:400;text-transform:uppercase;
  font-size:clamp(1.3rem,3.5vw,1.9rem);line-height:1;letter-spacing:.01em;
}
.bill p{
  font-family:'Special Elite',monospace;font-size:.92rem;
  color:var(--cream-2);margin-top:6px;grid-column:2;
}

/* ---------- attend ---------- */
.attend{padding:66px 0 0}
.attend__lead{
  max-width:640px;margin:0 auto 30px;text-align:center;
  font-size:1.12rem;line-height:1.6;
}
.attend__lead strong{color:var(--red-dk)}
.tags{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  max-width:760px;margin:0 auto;
}
.tags span{
  font-family:'Anton';font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;font-size:.85rem;
  background:var(--cream-2);color:var(--ink);
  border:2px solid var(--navy);
  padding:7px 14px;
  box-shadow:2px 2px 0 var(--navy);
}
.attend__wall-st{
  display:block;margin:0 auto;
  width:clamp(136px,38vw,425px);height:auto;
}

/* ---------- register ---------- */
.register{
  background:
    url("drops.svg") repeat,
    var(--red);
  background-size:48px 64px, cover;
  color:var(--cream);text-align:center;
  padding:74px 0;
  border-top:8px solid var(--gold);
}
.register__inner{max-width:640px}
.register__body{
  font-size:1.12rem;line-height:1.6;margin-bottom:30px;
}
.register-form{
  max-width:440px;margin:0 auto;text-align:left;
}
.register-form__row{margin-bottom:16px}
.register-form__row--split{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
}
.register-form label{
  display:block;font-family:'Oswald';font-weight:600;text-transform:uppercase;
  font-size:.78rem;letter-spacing:.06em;color:var(--gold);margin-bottom:6px;
}
.register-form input{
  width:100%;
  background:var(--cream);color:var(--ink);
  border:2px solid var(--navy);
  font-family:'Oswald';font-size:1rem;
  padding:10px 12px;
}
.register-form input:focus-visible{outline:3px solid var(--gold);outline-offset:1px}
.register-form .btn{width:100%;margin-top:6px}
.register-form__status{
  margin-top:14px;font-family:'Special Elite',monospace;font-size:.9rem;
  min-height:1.4em;
}
.register-form__status--ok{color:var(--gold)}
.register-form__status--err{color:var(--cream)}
.register__rsvp{
  font-family:'Special Elite',monospace;margin-top:26px;letter-spacing:.03em;
}
.register__rsvp a{color:var(--gold)}
.register__signoff{
  margin-top:34px;font-family:'Anton';text-transform:uppercase;
  line-height:1.2;font-size:1.3rem;letter-spacing:.03em;
}

/* ---------- footer ---------- */
.foot{
  background:var(--navy-2);color:var(--cream-2);
  text-align:center;padding:40px 24px;
  font-size:.85rem;letter-spacing:.04em;
  border-top:8px solid var(--gold);
}
.foot__logo{
  width:96px;height:96px;margin:0 auto 14px;
  border-radius:50%;
  box-shadow:0 4px 12px rgba(0,0,0,.45);
}
.foot__seal{font-family:'Anton';font-size:2.4rem;color:var(--gold);margin-bottom:10px;letter-spacing:.1em}
.foot p{margin:4px 0}
.foot__fine{
  font-family:'Special Elite',monospace;
  font-size:.72rem;opacity:.7;margin-top:14px;
}

/* ---------- responsive ---------- */
@media(max-width:640px){
  .cause__grid{grid-template-columns:1fr;gap:20px}
  .people{grid-template-columns:1fr;gap:30px;max-width:280px}
  .hero{padding:40px 20px 54px}
  .hero__meta{padding:12px 20px}
}

/* ---------- a11y ---------- */
a:focus-visible,.btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  .ticker__track{animation:none}
  html{scroll-behavior:auto}
  .btn{transition:none}
}