/* HH96 30th Reunion — 90s throwback */

:root{
  /* Type scale */
  --text-xs: clamp(.75rem,.7rem + .25vw,.875rem);
  --text-sm: clamp(.875rem,.8rem + .35vw,1rem);
  --text-base: clamp(1rem,.95rem + .25vw,1.125rem);
  --text-lg: clamp(1.125rem,1rem + .75vw,1.5rem);
  --text-xl: clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --text-2xl: clamp(2rem,1.4rem + 2.5vw,3.5rem);
  --text-3xl: clamp(2.5rem,1.2rem + 4.5vw,5.5rem);
  --text-hero: clamp(3.5rem,1rem + 8vw,8.5rem);

  /* Spacing */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem; --space-32:8rem;

  /* 90s throwback palette — Hatters red/black + Memphis accents */
  --color-bg: #f4ede0;             /* warm cream */
  --color-bg-alt: #fef6e4;
  --color-surface: #ffffff;
  --color-text: #12100e;
  --color-text-muted: #55524b;
  --color-hatters-red: #d81f26;
  --color-hatters-red-dark: #a41219;
  --color-black: #0d0c0a;

  /* Memphis accents (used sparingly, decorative) */
  --color-accent-teal: #2ec4b6;
  --color-accent-pink: #ff5c8a;
  --color-accent-yellow: #ffd23f;
  --color-accent-cyan: #4cc9f0;
  --color-accent-purple: #7b2cbf;

  /* Fonts */
  --font-display: 'Bungee', 'Impact', sans-serif;
  --font-body: 'Space Grotesk', 'Helvetica Neue', sans-serif;
  --font-mono: 'VT323', 'Courier New', monospace;
  --font-script: 'Caveat Brush', 'Comic Sans MS', cursive;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --shadow-hard: 6px 6px 0 var(--color-black);
  --shadow-hard-red: 6px 6px 0 var(--color-hatters-red);
  --shadow-soft: 0 8px 24px rgba(13,12,10,.15);
}

body{
  background: var(--color-bg);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(46,196,182,.18) 0, transparent 22%),
    radial-gradient(circle at 88% 82%, rgba(255,92,138,.16) 0, transparent 25%),
    radial-gradient(circle at 78% 12%, rgba(255,210,63,.22) 0, transparent 20%);
}

/* ------------------- Decorative Memphis shapes ------------------- */
.memphis{position:absolute;pointer-events:none;z-index:0}
.memphis svg{width:100%;height:100%;overflow:visible}

/* ------------------- Header / Nav ------------------- */
.nav{
  position:sticky; top:0; z-index:50;
  background: rgba(244,237,224,.9);
  backdrop-filter: blur(8px);
  border-bottom: 3px solid var(--color-black);
}
.nav__inner{
  max-width:1200px; margin:0 auto;
  padding: var(--space-3) var(--space-6);
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
}
.nav__brand{
  font-family:var(--font-display); font-size:var(--text-sm);
  letter-spacing:.05em; text-transform:uppercase;
  display:flex; align-items:center; gap:var(--space-2);
}
.nav__brand-mark{
  width:34px; height:34px; border-radius:50%;
  background: var(--color-hatters-red);
  color:white; display:grid; place-items:center;
  font-family:var(--font-display); font-size:14px;
  border: 2px solid var(--color-black);
  box-shadow: 2px 2px 0 var(--color-black);
}
.nav__links{display:flex; gap:var(--space-6); font-family:var(--font-body); font-size:var(--text-sm); font-weight:600}
.nav__links a{text-decoration:none; text-transform:uppercase; letter-spacing:.05em}
.nav__links a:hover{color:var(--color-hatters-red)}
.nav__cta{
  font-family:var(--font-display); font-size:12px; letter-spacing:.08em;
  padding: 10px 18px; background: var(--color-black); color:var(--color-accent-yellow);
  border: 2px solid var(--color-black); text-decoration:none;
  box-shadow: 3px 3px 0 var(--color-hatters-red);
  transition: transform .12s, box-shadow .12s;
}
.nav__cta:hover{transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--color-hatters-red)}
@media (max-width:720px){.nav__links{display:none}}

/* ------------------- HERO ------------------- */
.hero{
  position:relative; overflow:hidden;
  padding: var(--space-16) var(--space-6) var(--space-20);
  isolation: isolate;
}
.hero__grid{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns: 1.15fr .85fr; gap: var(--space-12);
  align-items:center;
}
@media (max-width:900px){ .hero__grid{grid-template-columns:1fr; gap:var(--space-10)} }

.hero__eyebrow{
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-family:var(--font-mono); font-size:22px;
  background: var(--color-black); color:var(--color-accent-yellow);
  padding: 4px 12px; margin-bottom: var(--space-5);
  transform: rotate(-2deg);
}
.hero__eyebrow::before{content:"▶"; color:var(--color-accent-pink)}

.hero__title{
  font-family:var(--font-display);
  font-size: var(--text-hero);
  line-height:.9; letter-spacing:-.01em;
  color: var(--color-black);
  text-transform:uppercase;
}
.hero__title .yr{
  display:inline-block;
  color: var(--color-hatters-red);
  -webkit-text-stroke: 2px var(--color-black);
  text-shadow:
    4px 4px 0 var(--color-accent-yellow),
    8px 8px 0 var(--color-black);
  transform: rotate(-3deg);
  padding: 0 .1em;
}
.hero__title .sub{
  display:block; font-family:var(--font-script);
  font-size:.42em; color:var(--color-hatters-red-dark);
  -webkit-text-stroke:0;
  text-shadow:none;
  transform: rotate(-2deg) translateX(8px);
  margin-top:.2em;
  letter-spacing:.02em;
  font-weight:400;
}

.hero__lede{
  margin-top: var(--space-6);
  font-family:var(--font-body);
  font-size: var(--text-lg);
  max-width: 52ch;
  color: var(--color-text);
}

.hero__ctas{margin-top: var(--space-8); display:flex; gap:var(--space-4); flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-family:var(--font-display); font-size:14px; letter-spacing:.08em;
  padding: 14px 22px; border:3px solid var(--color-black);
  text-decoration:none; text-transform:uppercase;
  transition: transform .12s, box-shadow .12s;
  cursor:pointer;
}
.btn--primary{background:var(--color-hatters-red); color:white; box-shadow: 5px 5px 0 var(--color-black)}
.btn--primary:hover{transform:translate(-2px,-2px); box-shadow: 7px 7px 0 var(--color-black)}
.btn--secondary{background:var(--color-accent-yellow); color:var(--color-black); box-shadow: 5px 5px 0 var(--color-hatters-red)}
.btn--secondary:hover{transform:translate(-2px,-2px); box-shadow: 7px 7px 0 var(--color-hatters-red)}
.btn--ghost{background:transparent; color:var(--color-black); box-shadow:none}
.btn--ghost:hover{background:var(--color-black); color:var(--color-accent-yellow)}

/* Hero art panel */
.hero__art{
  position:relative;
  aspect-ratio: 1 / 1;
  max-width: 460px; width:100%;
  margin: 0 auto;
}
.hero__art-frame{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(0,0,0,.05) 12px 24px),
    linear-gradient(135deg, var(--color-accent-teal), var(--color-accent-cyan));
  border: 4px solid var(--color-black);
  box-shadow: 10px 10px 0 var(--color-hatters-red);
  transform: rotate(-2deg);
}
.hero__art-logo{
  position:absolute; inset: 8%;
  display:grid; place-items:center;
  background: var(--color-black);
  border: 4px solid var(--color-black);
  transform: rotate(2deg);
  padding: var(--space-6);
}
.hero__art-logo img{ max-width:100%; max-height:100%; object-fit:contain }
.hero__art-sticker{
  position:absolute; bottom:-14px; right:-14px;
  width:120px; height:120px; border-radius:50%;
  background: var(--color-accent-yellow);
  color: var(--color-black);
  border: 3px solid var(--color-black);
  display:grid; place-items:center; text-align:center;
  font-family:var(--font-display); line-height:1;
  transform: rotate(12deg);
  box-shadow: 4px 4px 0 var(--color-black);
  z-index:3;
}
.hero__art-sticker span{display:block}
.hero__art-sticker .a{font-size:14px}
.hero__art-sticker .b{font-size:34px; color:var(--color-hatters-red); margin: 4px 0}
.hero__art-sticker .c{font-size:11px}

/* Ticker */
.ticker{
  background: var(--color-black); color: var(--color-accent-yellow);
  padding: 12px 0; overflow:hidden; border-top: 3px solid var(--color-black); border-bottom: 3px solid var(--color-black);
  font-family: var(--font-display); font-size: 18px; letter-spacing:.15em;
}
.ticker__track{display:inline-flex; gap: 60px; padding-left:60px; animation: scroll 30s linear infinite; white-space:nowrap}
.ticker__track span::after{content:"★"; color:var(--color-hatters-red); margin-left:60px}
@keyframes scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ------------------- SECTIONS ------------------- */
.section{
  position:relative;
  padding: var(--space-20) var(--space-6);
  max-width:1200px; margin:0 auto;
}
.section__eyebrow{
  font-family:var(--font-mono); font-size:22px;
  color:var(--color-hatters-red-dark); margin-bottom: var(--space-3);
  text-transform:uppercase; letter-spacing:.05em;
}
.section__title{
  font-family:var(--font-display); font-size: var(--text-2xl);
  text-transform:uppercase; color: var(--color-black);
  margin-bottom: var(--space-8);
  line-height:.95;
}
.section__title .accent{color: var(--color-hatters-red)}

/* Details grid */
.details{
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
@media (max-width: 900px){ .details{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 480px){ .details{grid-template-columns: 1fr} }

.detail-card{
  background: var(--color-surface);
  border: 3px solid var(--color-black);
  padding: var(--space-6);
  box-shadow: 5px 5px 0 var(--color-black);
  position:relative;
}
.detail-card:nth-child(1){background: #ffe6e6}
.detail-card:nth-child(2){background: #e6f9f7}
.detail-card:nth-child(3){background: #fff4c9}
.detail-card:nth-child(4){background: #ffe0eb}
.detail-card__label{
  font-family:var(--font-mono); font-size: 20px;
  color: var(--color-black); opacity:.7;
  text-transform:uppercase;
}
.detail-card__value{
  font-family:var(--font-display); font-size: var(--text-lg);
  margin-top: var(--space-2); line-height:1.1;
}
.detail-card__note{
  font-family:var(--font-body); font-size: var(--text-sm);
  margin-top: var(--space-2); color: var(--color-text-muted);
}
.detail-card__icon{
  position:absolute; top:-14px; right:-14px;
  width:44px; height:44px; border-radius:50%;
  background: var(--color-black); color: var(--color-accent-yellow);
  display:grid; place-items:center;
  border: 3px solid var(--color-black);
}

/* Contact strip */
.contact-strip{
  margin-top: var(--space-8);
  background: var(--color-black);
  color: var(--color-bg);
  border: 3px solid var(--color-black);
  box-shadow: 5px 5px 0 var(--color-accent-yellow);
  padding: var(--space-5) var(--space-6);
  display:flex; align-items:center; gap: var(--space-6);
  flex-wrap:wrap;
}
.contact-strip__label{
  font-family: var(--font-mono); font-size: 20px;
  color: var(--color-accent-cyan);
}
.contact-strip__body{
  font-family: var(--font-body); font-size: var(--text-base);
  color: var(--color-bg);
}
.contact-strip__body strong{
  font-family: var(--font-display); font-weight: 400;
  color: var(--color-accent-yellow);
  letter-spacing: .04em;
  margin: 0 4px;
}
.contact-strip__body a{
  color: var(--color-accent-yellow);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contact-strip__body a:hover{ color: white }

/* Story two-col */
.story{
  display:grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-10);
  align-items:start;
}
@media (max-width: 820px){ .story{grid-template-columns:1fr} }
.story__body p{
  font-family:var(--font-body); font-size: var(--text-base);
  margin-bottom: var(--space-4); max-width:60ch;
}
.story__pullquote{
  font-family:var(--font-script);
  font-size: var(--text-xl);
  color: var(--color-hatters-red-dark);
  margin: var(--space-6) 0;
  padding: var(--space-4) 0;
  border-top: 3px dashed var(--color-black);
  border-bottom: 3px dashed var(--color-black);
  transform: rotate(-1deg);
}
.story__polaroids{
  display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-5);
}
.polaroid{
  background:white; padding: 12px 12px 32px;
  border: 2px solid var(--color-black);
  box-shadow: var(--shadow-soft);
  font-family: var(--font-script);
  text-align:center; color: var(--color-text-muted);
  font-size: 20px;
}
.polaroid:nth-child(1){transform: rotate(-4deg)}
.polaroid:nth-child(2){transform: rotate(3deg); margin-top: var(--space-8)}
.polaroid:nth-child(3){transform: rotate(2deg)}
.polaroid:nth-child(4){transform: rotate(-3deg); margin-top: var(--space-6)}
.polaroid__img{
  aspect-ratio: 1/1; margin-bottom: 10px;
  display:grid; place-items:center; color:white;
  font-family: var(--font-display); font-size: 42px;
  text-shadow: 3px 3px 0 rgba(0,0,0,.4);
}

/* Playlist */
.playlist-band{
  background: var(--color-black); color: var(--color-bg);
  padding: var(--space-16) var(--space-6);
  position:relative; overflow:hidden;
}
.playlist-inner{max-width:1200px; margin:0 auto; position:relative; z-index:2}
.playlist-title{
  font-family:var(--font-display); font-size: var(--text-2xl);
  color: var(--color-accent-yellow);
  text-transform:uppercase; margin-bottom: var(--space-2);
}
.playlist-sub{
  font-family:var(--font-mono); font-size: 20px;
  color: var(--color-accent-cyan); margin-bottom: var(--space-8);
}
.playlist{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5);
}
@media (max-width:820px){.playlist{grid-template-columns:1fr}}
.track{
  background: rgba(255,255,255,.06);
  border: 2px solid rgba(255,255,255,.15);
  padding: var(--space-5);
  display:flex; align-items:center; gap: var(--space-4);
  transition: transform .15s, border-color .15s;
}
.track:hover{transform: translateY(-3px); border-color: var(--color-accent-yellow)}
.track__num{
  font-family:var(--font-display); font-size: 32px;
  color:var(--color-accent-pink); min-width:44px;
}
.track__meta strong{display:block; font-family:var(--font-body); font-weight:700; font-size: var(--text-base); color:white}
.track__meta span{font-family:var(--font-mono); font-size:18px; color: var(--color-accent-cyan)}

/* RSVP */
.rsvp-band{
  background:
    repeating-linear-gradient(-45deg, #ffe6e6 0 30px, #fff 30px 60px);
  padding: var(--space-20) var(--space-6);
  border-top: 4px solid var(--color-black);
  border-bottom: 4px solid var(--color-black);
}
.rsvp{
  max-width: 720px; margin: 0 auto;
  background: var(--color-surface);
  border: 4px solid var(--color-black);
  box-shadow: 10px 10px 0 var(--color-hatters-red);
  padding: var(--space-10);
  position:relative;
}
.rsvp__stamp{
  position:absolute; top:-30px; right:-20px;
  background: var(--color-hatters-red); color:white;
  font-family:var(--font-display); font-size:14px;
  padding: 10px 16px; border: 3px solid var(--color-black);
  transform: rotate(6deg);
  box-shadow: 3px 3px 0 var(--color-black);
}
.rsvp h2{
  font-family:var(--font-display); font-size: var(--text-2xl);
  text-transform:uppercase; margin-bottom: var(--space-2);
}
.rsvp p.rsvp__deadline{
  font-family:var(--font-mono); font-size: 22px;
  color: var(--color-hatters-red-dark); margin-bottom: var(--space-8);
}
.field{margin-bottom: var(--space-5)}
.field label{
  display:block; font-family:var(--font-display);
  font-size: 13px; letter-spacing:.08em; margin-bottom: var(--space-2);
  text-transform:uppercase;
}
.field input, .field select, .field textarea{
  width:100%; padding: 12px 14px;
  border: 3px solid var(--color-black);
  background: var(--color-bg-alt);
  font-family: var(--font-body); font-size: var(--text-base);
  border-radius: 0;
}
.field textarea{resize:vertical; min-height: 90px}
.field input:focus, .field select:focus, .field textarea:focus{
  outline: none; background: white;
  box-shadow: 4px 4px 0 var(--color-hatters-red);
}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap: var(--space-4)}
@media (max-width:520px){.field-row{grid-template-columns:1fr}}

.attending-group{display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3)}
.attending-group label{
  cursor:pointer; text-align:center;
  padding: var(--space-4); border: 3px solid var(--color-black);
  font-family:var(--font-display); font-size: 14px; letter-spacing:.08em;
  background: var(--color-bg-alt);
  transition: all .12s;
}
.attending-group input{position:absolute; opacity:0; pointer-events:none}
.attending-group input:checked + label{
  background: var(--color-hatters-red); color:white;
  transform: translate(-2px,-2px);
  box-shadow: 4px 4px 0 var(--color-black);
}

.submit-btn{
  width:100%; margin-top: var(--space-4);
  padding: 18px;
  font-family:var(--font-display); font-size: 18px; letter-spacing:.1em;
  background: var(--color-black); color: var(--color-accent-yellow);
  border: 3px solid var(--color-black);
  box-shadow: 6px 6px 0 var(--color-hatters-red);
  text-transform:uppercase;
  transition: transform .12s, box-shadow .12s;
}
.submit-btn:hover{transform: translate(-3px,-3px); box-shadow: 9px 9px 0 var(--color-hatters-red)}
.submit-btn:disabled{opacity:.5; cursor:wait}

.rsvp__success{
  display:none; text-align:center; padding: var(--space-6) 0;
}
.rsvp__success.show{display:block}
.rsvp__success h3{
  font-family:var(--font-display); font-size: var(--text-xl);
  color: var(--color-hatters-red); margin-bottom: var(--space-3);
}

/* Footer */
.footer{
  background: var(--color-black); color: var(--color-bg);
  padding: var(--space-12) var(--space-6);
  text-align:center;
}
.footer__logo{font-family:var(--font-display); font-size: var(--text-xl); color: var(--color-accent-yellow); margin-bottom: var(--space-3)}
.footer__meta{font-family:var(--font-mono); font-size: 18px; color: var(--color-accent-cyan)}
.footer__crew{margin-top: var(--space-6); font-family:var(--font-body); font-size: var(--text-sm); color: rgba(255,255,255,.6)}

/* Simple reveal on scroll */
.reveal{opacity:0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

/* Hosted-by card */
.hosted-card{
  margin: var(--space-8) auto 0;
  max-width: 620px;
  background: var(--color-black);
  color: var(--color-bg);
  border: 3px solid var(--color-black);
  box-shadow: 8px 8px 0 var(--color-hatters-red);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  position: relative;
}
.hosted-card__badge{
  display: inline-block;
  background: var(--color-accent-yellow);
  color: var(--color-black);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 6px 14px;
  border: 2px solid var(--color-black);
  transform: rotate(-2deg);
  margin-bottom: var(--space-4);
}
.hosted-card__headline{
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-accent-yellow);
  line-height: 1;
  margin-bottom: var(--space-3);
  text-transform: uppercase;
}
.hosted-card__body{
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  color: var(--color-bg);
  max-width: 460px;
  margin: 0 auto var(--space-5);
}
.hosted-card__credit{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 237, 224, 0.55);
  line-height: 1.5;
  margin-top: var(--space-3);
}
.hosted-card__credit strong{
  font-weight: 400;
  color: rgba(244, 237, 224, 0.75);
}
@media (max-width: 600px){
  .hosted-card{ padding: var(--space-6) var(--space-4); }
  .hosted-card__headline{ font-size: var(--text-xl); }
}

/* Bring-the-90s-back scrapbook card */
.bring-card{
  margin-top: var(--space-8);
  padding: var(--space-8) var(--space-6);
  background: var(--color-bg);
  border: 3px solid var(--color-black);
  box-shadow: 8px 8px 0 var(--color-accent-cyan);
  position: relative;
  transform: rotate(-0.5deg);
}
.bring-card::before{
  content: "";
  position: absolute;
  top: -14px; left: 50%;
  width: 60px; height: 22px;
  background: rgba(216, 31, 38, 0.55);
  transform: translateX(-50%) rotate(-3deg);
  border: 1px solid rgba(13, 12, 10, 0.3);
}
.bring-card__eyebrow{
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--color-hatters-red);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
}
.bring-card__headline{
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-black);
  line-height: 1;
  margin-bottom: var(--space-4);
  text-transform: uppercase;
}
.bring-card__headline .accent{ color: var(--color-hatters-red); }
.bring-card__body{
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-black);
  margin-bottom: var(--space-5);
}
.bring-card__list{
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
  display: grid;
  gap: var(--space-2);
}
.bring-card__list li{
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-black);
  padding-left: 26px;
  position: relative;
  line-height: 1.5;
}
.bring-card__list li::before{
  content: "✓";
  position: absolute;
  left: 0; top: 0;
  font-family: var(--font-display);
  color: var(--color-hatters-red);
  font-size: 18px;
  font-weight: bold;
}
.bring-card__foot{
  font-family: var(--font-script);
  font-size: 20px;
  color: var(--color-hatters-red);
  line-height: 1.4;
  margin: 0;
  padding-top: var(--space-4);
  border-top: 2px dashed rgba(13, 12, 10, 0.2);
}
@media (max-width: 600px){
  .bring-card{ padding: var(--space-6) var(--space-4); transform: none; }
  .bring-card__headline{ font-size: var(--text-xl); }
}