/* =========================================================
   LOCAL LEGENDS BACKYARD ULTRA — styles.css
   Mobile-first. Everything is fluid clamp() + auto-fit grids;
   the one behavioral breakpoint (760px, checklist collapse)
   lives in app.js. Hard offset shadows only. No gradients
   except the halftone dot screen on the wordmark.
   ========================================================= */

/* ---------- Fonts ----------
   Client-supplied display faces. Drop the files into fonts/
   (.woff2 preferred, .ttf/.otf fine). Until they land, every
   stack falls back to Big Shoulders Display (Google Fonts).
   Re-tune display letter-spacing/line-height once they do. */
@font-face {
  font-family: 'ReservoirGrunge';
  src: local('ReservoirGrunge'), local('Reservoir Grunge'),
       url('fonts/ReservoirGrunge.woff2') format('woff2'),
       url('fonts/ReservoirGrunge.ttf') format('truetype'),
       url('fonts/ReservoirGrunge.otf') format('opentype');
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: 'LEDLIGHT';
  src: local('LEDLIGHT'), local('LED Light'),
       url('fonts/LEDLIGHT.woff2') format('woff2'),
       url('fonts/LEDLIGHT.ttf') format('truetype'),
       url('fonts/LEDLIGHT.otf') format('opentype');
  font-weight: 400 900;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --paper: #f4f1e8;
  --ink: #111110;
  --spot: #ff4a00;
  --hair-ink: rgba(17, 17, 16, .4);
  --hair-paper: rgba(244, 241, 232, .4);

  --f-display: 'ReservoirGrunge', 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --f-num: 'LEDLIGHT', 'ReservoirGrunge', 'Big Shoulders Display', monospace;
  --f-sans: Archivo, Helvetica, Arial, sans-serif;
  --f-type: 'Courier Prime', monospace;

  --gutter: clamp(14px, 4vw, 46px);
  --section-y: clamp(26px, 6vw, 72px);

  /* One shared jagged star: hero photo mask, spinning icon, FAQ bullets. */
  --star: polygon(50% 0%, 61% 24%, 84% 12%, 79% 37%, 100% 44%, 82% 58%, 97% 79%, 72% 76%, 68% 100%, 50% 82%, 31% 100%, 26% 75%, 3% 80%, 17% 57%, 0% 43%, 21% 36%, 15% 11%, 39% 23%);
  /* Rough-cut edge for ink blocks. */
  --rough: polygon(0 2%, 99.3% 0, 100% 97%, .6% 100%);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-sans); }
h1, h2, h3, p, ol { margin: 0; }
img { display: block; max-width: 100%; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--spot); }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
input, button { font: inherit; color: inherit; }
input::placeholder { color: var(--ink); opacity: .35; }
/* The RSVP form is display:grid, which would otherwise outrank the UA's
   [hidden] rule and keep the form on screen after a successful submit. */
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--spot); outline-offset: 3px; }

/* ---------- Keyframes ---------- */
@keyframes llJitter {
  0%, 100% { transform: translate3d(0, 0, 0); }
  92% { transform: translate3d(0, 0, 0); }
  94% { transform: translate3d(-2px, 1px, 0); }
  96% { transform: translate3d(2px, -1px, 0); }
  98% { transform: translate3d(-1px, -1px, 0); }
}
@keyframes llSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes llFlicker {
  0%, 100% { opacity: .16; }
  50% { opacity: .26; }
}
@keyframes llStamp {
  0% { transform: scale(1.6) rotate(-9deg); opacity: 0; }
  60% { transform: scale(.96) rotate(-3deg); opacity: 1; }
  100% { transform: scale(1) rotate(-3deg); opacity: 1; }
}

/* ---------- Page + grain ---------- */
.page {
  position: relative;
  background: var(--paper);
  overflow: hidden; /* fallback */
  overflow: clip;   /* clip the nowrap wordmark + misregistration without a scroll container */
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: .2; /* resting value when motion is reduced */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.55'/></svg>");
  animation: llFlicker 4.5s steps(3) infinite;
}

/* ---------- Shared type ---------- */
.display {
  font-family: var(--f-display);
  font-weight: 900;
  text-transform: uppercase;
}
.label {
  font-family: var(--f-sans);
  font-variation-settings: 'wdth' 125;
  text-transform: uppercase;
}
.eyebrow {
  font-family: var(--f-sans);
  font-variation-settings: 'wdth' 125;
  font-weight: 700;
  font-size: clamp(9px, 2.2vw, 12px);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--spot);
}
.note {
  font-family: var(--f-type);
  font-size: clamp(11px, 2.6vw, 13px);
  line-height: 1.4;
}
.spot { color: var(--spot); }

/* Section headline: poster scale, tight leading. Size set per section. */
.headline {
  margin-top: 6px;
  line-height: .78;
  letter-spacing: -.02em;
}

/* Enlarge a small inline link's tap target to 44px without moving its underline. */
.hit { position: relative; }
.hit::after { content: ""; position: absolute; inset: -15px -8px; }

/* ---------- Sections ---------- */
.section {
  border-top: 3px solid var(--ink);
  padding: var(--section-y) var(--gutter);
}
.section--ink { background: var(--ink); color: var(--paper); }
.section--spot { background: var(--spot); color: var(--ink); }

/* =========================================================
   1. HERO
   ========================================================= */
.hero {
  position: relative;
  padding: 18px var(--gutter) clamp(24px, 5vw, 54px);
}

.hero__rule {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 8px;
  font-weight: 700;
  font-size: clamp(9px, 2.2vw, 12px);
  letter-spacing: .26em;
}
.hero__rule-end { text-align: right; }

/* Wordmark: halftone ink over an orange misregistered copy. */
.wordmark {
  position: relative;
  margin-top: clamp(10px, 2vw, 18px);
  animation: llJitter 7s steps(2) infinite;
}
.wordmark__offset,
.wordmark__ink {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(64px, 20.5vw, 300px);
  line-height: .78;
  letter-spacing: -.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.wordmark__offset {
  position: absolute;
  left: 3px;
  top: 5px;
  width: 100%;
  color: var(--spot);
}
.wordmark__ink { position: relative; }
/* Halftone. The README screens the whole wordmark and masks the top solid
   with a linear gradient at 46%, but the two lines' ink overlaps vertically
   (line-height .78 is tighter than the glyphs are tall): LOCAL's baseline
   sits at 50.5% while LEGENDS' cap tops reach 47.9%, so no horizontal split
   keeps one solid and the other dotted — 46% bled dots onto LOCAL. Screening
   the second line itself is exact, and holds when ReservoirGrunge lands and
   changes these metrics. */
.wordmark__dots {
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: radial-gradient(circle at 50% 50%, var(--ink) 42%, rgba(17, 17, 16, 0) 46%);
  background-size: 7px 7px;
}

.hero__corners {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  border-top: 2px solid var(--ink);
  margin-top: 6px;
  padding-top: 8px;
  font-weight: 800;
  font-size: clamp(10px, 2.4vw, 13px);
  letter-spacing: .24em;
  line-height: 1.5;
}

/* Star-masked photo with the headline colliding into it. */
.hero__star-wrap {
  position: relative;
  margin-top: clamp(14px, 3vw, 30px);
  display: grid;
  place-items: center;
}
.hero__star {
  width: min(78vw, 620px);
  aspect-ratio: 1 / 1;
  clip-path: var(--star);
  /* README recipe is contrast(1.75) brightness(1.05); eased to 1.45/1 because
     the supplied photo is already high-contrast and the spec values blew the
     right side to pure white, dissolving the star's edge into the paper.
     Revisit if a flatter photo lands. */
  filter: grayscale(1) contrast(1.45) brightness(1) blur(.6px);
  background: #dcd8cc; /* shows until the photo loads */
}
.hero__star img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The source is portrait, so bias the square crop upward and land the
     runner in the middle of the star. A square export makes this a no-op. */
  object-position: 50% 28%;
}
.hero__headline,
.hero__headline-halo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6%;
  margin: 0;
  text-align: center;
  font-size: clamp(44px, 14.5vw, 210px);
  line-height: .8;
  letter-spacing: -.02em;
}
.hero__headline {
  color: var(--ink);
  mix-blend-mode: multiply;
  text-shadow: 3px -3px 0 rgba(255, 74, 0, .85);
}
/* Paper halo behind the ink copy. The headline is black type sitting on a
   grayscale photo, so across the dark wedge it vanished. This must be a
   sibling, not a child: mix-blend-mode composites the whole subtree as one
   group, so a paper stroke inside it would multiply away to nothing. The
   stroke is in em so it tracks the clamp() from phone to poster scale. */
.hero__headline-halo {
  color: var(--paper);
  -webkit-text-stroke: .06em var(--paper);
}

.hero__facts {
  margin-top: clamp(16px, 3vw, 28px);
  border-top: 2px solid var(--ink);
  border-bottom: 6px solid var(--ink);
  padding: 10px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  justify-content: space-between;
  font-weight: 800;
  font-size: clamp(26px, 6.4vw, 56px);
  line-height: .95;
}

/* The primary CTA is type, not a button. */
.hero__cta {
  margin-top: clamp(18px, 4vw, 38px);
  background: var(--ink);
  color: var(--paper);
  padding: clamp(14px, 3vw, 26px) clamp(12px, 3vw, 28px);
  clip-path: var(--rough);
}
.hero__cta .eyebrow { margin-bottom: 8px; }
.hero__cta-line {
  font-size: clamp(46px, 15vw, 200px);
  line-height: .8;
  letter-spacing: -.02em;
}

.hero__secondary {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.btn-offset {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border: 3px solid var(--ink);
  padding: 10px 20px;
  font-weight: 800;
  font-size: clamp(11px, 2.6vw, 14px);
  letter-spacing: .24em;
  box-shadow: 5px 5px 0 var(--spot);
}
.btn-offset:hover {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 0 0 var(--spot);
}
.hero__note { max-width: 34ch; }

/* Image slots that have no file in assets/ yet (set by app.js). */
img.is-missing { display: none; }

/* =========================================================
   2. THE RULES
   ========================================================= */
.headline--rules { font-size: clamp(52px, 16vw, 230px); }

.rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 3vw, 34px);
  border-top: 2px solid var(--ink);
  margin-top: 14px;
  padding-top: 18px;
}
.rules__col {
  border-left: 6px solid var(--ink);
  padding-left: 14px;
}
.rules__col--spot { border-left-color: var(--spot); }
.rules__head {
  font-size: clamp(30px, 7vw, 54px);
  line-height: .9;
}
.rules__body {
  margin-top: 10px;
  font-size: clamp(15px, 3.4vw, 17px);
  line-height: 1.5;
  max-width: 38ch;
}

.clock {
  margin-top: clamp(20px, 4vw, 40px);
  border: 3px solid var(--ink);
  padding: clamp(14px, 3vw, 24px);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 28px;
  justify-content: space-between;
  box-shadow: 8px 8px 0 var(--ink);
}
.clock__label {
  font-weight: 800;
  font-size: clamp(10px, 2.4vw, 13px);
  letter-spacing: .28em;
}
.clock__value {
  font-family: var(--f-num);
  font-weight: 900;
  /* Sized to keep the "Dd HH:MM:SS" value on one line at every width.
     Measured ceiling is 15.6vw at 320px; 14.5vw leaves headroom because
     the Big Shoulders fallback has no tabular figures, so the width
     shifts as the digits change. Re-check when LEDLIGHT lands. */
  font-size: clamp(42px, 14.5vw, 180px);
  line-height: .82;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  min-height: .82em; /* hold the line before the first tick */
}
.clock__side {
  display: flex;
  align-items: center;
  gap: 12px;
}
.clock__note { max-width: 26ch; }
.star-spin {
  flex: none;
  width: clamp(34px, 8vw, 60px);
  aspect-ratio: 1 / 1;
  background: var(--spot);
  clip-path: var(--star);
  animation: llSpin 26s linear infinite;
  filter: blur(.7px);
}

.rain-stamp {
  margin-top: 16px;
  display: inline-block;
  border: 4px double var(--spot);
  color: var(--spot);
  padding: 6px 16px;
  transform: rotate(-2.2deg);
  font-size: clamp(24px, 6vw, 48px);
  letter-spacing: .02em;
}

/* The asterisk points at the "What if it rains?" FAQ row. */
.rain-stamp__ref {
  color: inherit;
  text-decoration: none;
}

/* =========================================================
   3. HOW IT WORKS (ink ground)
   ========================================================= */
.headline--how {
  font-size: clamp(40px, 11.5vw, 150px);
  line-height: .8;
}
.how__sub {
  margin-top: 14px;
  font-family: var(--f-type);
  font-size: clamp(13px, 3vw, 16px);
  line-height: 1.6;
  max-width: 52ch;
  text-transform: uppercase;
}

/* Lineup rows, styled like a show bill. */
.lineup {
  margin-top: clamp(20px, 4vw, 40px);
  display: grid;
  gap: 0;
  border-top: 1px solid var(--hair-paper);
  list-style: none;
  padding: 0;
}
.lineup__row {
  display: flex;
  gap: clamp(10px, 3vw, 28px);
  align-items: baseline;
  border-bottom: 1px solid var(--hair-paper);
  padding: 12px 0;
}
.lineup__n {
  font-family: var(--f-type);
  color: var(--spot);
  font-size: clamp(12px, 2.8vw, 15px);
}
.lineup__head {
  flex: 1;
  font-weight: 800;
  font-size: clamp(26px, 6.5vw, 56px);
  line-height: .92;
}
.lineup__sub {
  flex: 1;
  min-width: min(100%, 180px);
  font-size: clamp(14px, 3.2vw, 16px);
  line-height: 1.45;
}

.how__grid {
  margin-top: clamp(24px, 5vw, 48px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(18px, 4vw, 40px);
  align-items: center;
}

.bucket {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 3vw, 26px);
  flex-wrap: wrap;
}
.bucket__svg {
  width: min(46vw, 210px);
  height: auto;
}
.bucket__ink { stroke: var(--paper); }
.bucket__tally { stroke: var(--spot); }
.bucket__label {
  font-weight: 800;
  font-size: clamp(11px, 2.6vw, 14px);
  letter-spacing: .26em;
  line-height: 1.7;
  max-width: 14ch;
}

.picker {
  border: 3px solid var(--paper);
  padding: clamp(14px, 3vw, 22px);
}
.picker__label {
  font-weight: 800;
  font-size: clamp(10px, 2.4vw, 13px);
  letter-spacing: .28em;
}
.picker__row {
  display: flex;
  align-items: center;
  gap: clamp(12px, 3vw, 22px);
  margin-top: 10px;
}
.picker__btn {
  flex: none;
  width: clamp(52px, 12vw, 74px);
  height: clamp(52px, 12vw, 74px);
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 3px solid var(--paper);
  color: var(--paper);
  font-size: clamp(30px, 7vw, 44px);
  line-height: 1;
  cursor: pointer;
}
.picker__btn:hover {
  background: var(--spot);
  border-color: var(--spot);
}
.picker__count {
  flex: 1;
  text-align: center;
}
.picker__num {
  font-family: var(--f-num);
  font-weight: 900;
  font-size: clamp(62px, 16vw, 140px);
  line-height: .85;
  color: var(--spot);
  font-variant-numeric: tabular-nums;
}
.picker__unit {
  font-weight: 800;
  font-size: clamp(10px, 2.4vw, 12px);
  letter-spacing: .3em;
}

/* Tally marks: groups of five, four bars plus a diagonal slash. */
.tally {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 12px;
  min-height: 34px;
}
.tally__group {
  position: relative;
  display: flex;
  gap: 4px;
  padding: 0 6px;
}
.tally__bar {
  display: block;
  width: 3px;
  height: 28px;
  background: var(--paper);
}
.tally__slash {
  position: absolute;
  left: 2px;
  right: 2px;
  top: 13px;
  height: 3px;
  background: var(--spot);
  transform: rotate(-24deg);
}

.picker__totals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  border-top: 1px solid var(--hair-paper);
  margin-top: 12px;
  padding-top: 12px;
  font-weight: 800;
  font-size: clamp(24px, 5.6vw, 40px);
  line-height: 1;
}
.picker__note {
  margin-top: 10px;
  line-height: 1.5;
}

/* =========================================================
   4. LOCATION + CREWS
   ========================================================= */
.headline--location { font-size: clamp(44px, 13vw, 190px); }

.address {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  margin-top: 10px;
  padding: 8px 0;
  font-weight: 800;
  font-size: clamp(11px, 2.8vw, 15px);
  letter-spacing: .2em;
}
.address__link {
  color: var(--spot);
  border-bottom: 3px solid var(--spot);
}

.loc-panels {
  margin-top: clamp(16px, 3vw, 30px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(16px, 3vw, 30px);
}
.map {
  /* Alone in the row now that the diagram panel is gone: cap it so a 4/3
     photo does not run the full width of a desktop screen. */
  max-width: 860px;
  border: 3px solid var(--ink);
  /* The README's grayscale(1) contrast(1.45) was tuned for a dense OSM tile
     and bleached this artwork out. A light touch instead: enough to firm up
     the lines without losing the route. */
  filter: contrast(1.1) saturate(.85);
  aspect-ratio: 4 / 3;
  min-height: 240px;
}
.map__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.park-stamp {
  margin-top: clamp(18px, 4vw, 34px);
  background: var(--ink);
  color: var(--paper);
  padding: clamp(12px, 3vw, 22px);
  transform: rotate(-.6deg);
  clip-path: polygon(0 3%, 99.5% 0, 100% 96%, .5% 100%);
}
.park-stamp__text {
  font-size: clamp(28px, 7.6vw, 84px);
  line-height: .86;
}

.crew {
  margin-top: clamp(18px, 4vw, 34px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 3vw, 30px);
}
.crew__head {
  font-size: clamp(30px, 7.4vw, 62px);
  line-height: .88;
}
.crew__rule {
  margin-top: 12px;
  border-top: 2px solid var(--ink);
  padding-top: 10px;
  font-family: var(--f-sans);
  font-variation-settings: 'wdth' 110;
  font-weight: 900;
  font-size: clamp(15px, 3.6vw, 20px);
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.35;
}
.aid {
  border-left: 6px solid var(--spot);
  padding-left: 14px;
}
.aid__text {
  margin-top: 8px;
  font-size: clamp(26px, 6.4vw, 52px);
  line-height: .9;
}

/* =========================================================
   5. WHAT TO BRING
   ========================================================= */
.bring__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}
.headline--bring { font-size: clamp(48px, 14vw, 200px); }
.bring__note {
  max-width: 30ch;
  line-height: 1.5;
}

.checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(14px, 3vw, 26px);
  border-top: 2px solid var(--ink);
  margin-top: 14px;
  padding-top: 18px;
  align-items: start;
}
.cat {
  border: 3px solid var(--ink);
  padding: clamp(12px, 3vw, 18px);
  background: var(--paper);
  box-shadow: 6px 6px 0 rgba(17, 17, 16, .14);
}
/* Padding + matching negative margin: a 44px summary target, same position. */
.cat__summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-block: 10px;
  margin-block: -10px;
}
.cat__title {
  font-size: clamp(28px, 7vw, 48px);
  line-height: .9;
}
.cat__count {
  font-family: var(--f-type);
  font-size: 12px;
  color: var(--spot);
  white-space: nowrap;
}
.cat__items {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  border-top: 1px solid rgba(17, 17, 16, .35);
  padding-top: 14px;
}

.item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  min-height: 44px;
}
.item:hover { color: var(--spot); }
.item__box {
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border: 3px solid var(--ink);
  display: grid;
  place-items: center;
  font-family: var(--f-type);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  color: var(--spot);
  transform: rotate(-1.5deg);
}
.item[aria-checked="true"] .item__box::after { content: "\2715"; }
.item[aria-checked="true"] .item__text { text-decoration: line-through; }
.item__text {
  font-size: clamp(14px, 3.4vw, 16px);
  line-height: 1.45;
}

/* =========================================================
   6. PRIZES (orange ground)
   ========================================================= */
.prizes { padding-block: clamp(26px, 6vw, 64px); }
.eyebrow--ink { color: var(--ink); }
.prizes__head {
  margin-top: 6px;
  font-size: clamp(52px, 15vw, 220px);
  line-height: .78;
  letter-spacing: -.02em;
  text-shadow: 4px -4px 0 rgba(244, 241, 232, .7);
}
.prizes__sub {
  margin-top: 4px;
  font-weight: 900;
  font-size: clamp(16px, 4.4vw, 30px);
  letter-spacing: .16em;
}
.prizes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(14px, 3vw, 28px);
  border-top: 3px solid var(--ink);
  margin-top: clamp(18px, 4vw, 34px);
  padding-top: 18px;
}
.prizes__item {
  border-left: 6px solid var(--ink);
  padding-left: 14px;
}
.prizes__tier {
  font-weight: 800;
  font-size: clamp(10px, 2.4vw, 12px);
  letter-spacing: .3em;
}
.prizes__what {
  margin-top: 6px;
  font-size: clamp(28px, 7vw, 60px);
  line-height: .88;
}

/* =========================================================
   7. SPONSORS
   ========================================================= */
.sponsors { padding-block: clamp(22px, 5vw, 54px); }
.sponsors__eyebrow { letter-spacing: .34em; }
.sponsors__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(14px, 3vw, 28px);
  border-top: 2px solid var(--ink);
  margin-top: 8px;
  padding-top: 18px;
}
.sponsor__logo {
  /* No frame and no name: the marks sit straight on the paper, so the
     padding that kept art off the border is gone too. Each mark links to
     the sponsor, so the whole 110px box is the target. */
  display: block;
  height: 110px;
  filter: grayscale(1) contrast(1.3);
}
.sponsor__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* =========================================================
   8. RSVP (ink ground, paper sheet)
   ========================================================= */
.sheet {
  --sheet-rough: polygon(0 1.5%, 99.6% 0, 100% 98.5%, .4% 100%);
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}
/* The hard offset shadow is its own layer: clip-path on the sheet
   would clip a box-shadow away. */
.sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(10px, 10px);
  background: rgba(255, 74, 0, .9);
  clip-path: var(--sheet-rough);
}
.sheet__paper {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  padding: clamp(16px, 4vw, 34px);
  clip-path: var(--sheet-rough);
}
.sheet__tab {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: -14px;
  transform: translateX(-50%) rotate(-3deg);
  background: var(--spot);
  color: var(--ink);
  padding: 4px 18px;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .28em;
}
.sheet__head {
  margin-top: 12px;
  font-size: clamp(34px, 9vw, 84px);
  line-height: .84;
}
.sheet__sub {
  margin-top: 10px;
  font-family: var(--f-type);
  font-size: clamp(13px, 3vw, 15px);
  line-height: 1.5;
}

.confirm {
  margin-top: clamp(18px, 4vw, 32px);
  border: 6px double var(--spot);
  color: var(--spot);
  padding: clamp(14px, 3vw, 22px);
  transform: rotate(-3deg);
  animation: llStamp .45s ease-out both;
  text-align: center;
}
.confirm__head {
  font-size: clamp(34px, 9vw, 78px);
  line-height: .86;
}
.confirm__sub {
  margin-top: 8px;
  font-weight: 800;
  font-size: clamp(12px, 3vw, 16px);
  letter-spacing: .26em;
}
.confirm__note {
  margin-top: 10px;
  font-family: var(--f-type);
  font-size: clamp(12px, 2.8vw, 14px);
  color: var(--ink);
  text-transform: uppercase;
}

.rsvp-form {
  position: relative;
  margin-top: clamp(18px, 4vw, 32px);
  display: grid;
  gap: 22px;
}
/* Fields are ruled lines, not boxes. */
.field__label {
  display: block;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .3em;
}
.field__input {
  width: 100%;
  margin-top: 6px;
  background: transparent;
  border: 0;
  border-bottom: 3px solid var(--ink);
  padding: 8px 2px;
  font-family: var(--f-type);
  font-size: 20px;
  min-height: 44px;
  border-radius: 0;
  outline: none;
}
.field__input:focus { border-bottom-color: var(--spot); }
/* Reserved slot so nothing shifts when an error appears. */
.field__error {
  margin-top: 6px;
  font-family: var(--f-type);
  font-size: 13px;
  font-weight: 700;
  color: var(--spot);
  text-transform: uppercase;
  min-height: 18px;
}

/* Honeypot: off-screen, never announced, never tabbed to. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.rsvp-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.stamp-btn {
  border: 5px double var(--ink);
  background: transparent;
  color: var(--ink);
  padding: 12px 26px;
  transform: rotate(-2deg);
  font-size: clamp(28px, 7vw, 52px);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  cursor: pointer;
  min-height: 52px;
}
.stamp-btn:hover:not(:disabled) {
  background: var(--ink);
  color: var(--paper);
}
.stamp-btn:disabled { cursor: progress; }
.rsvp-form__note { max-width: 26ch; }

.jam {
  border: 3px solid var(--spot);
  padding: 12px 14px;
  background: var(--paper);
}
.jam__head {
  font-weight: 900;
  font-size: clamp(14px, 3.4vw, 18px);
  letter-spacing: .14em;
  color: var(--spot);
}
.jam__body {
  margin-top: 8px;
  font-family: var(--f-type);
  font-size: 14px;
  line-height: 1.5;
}
.jam__body a { border-bottom: 2px solid var(--ink); }

/* =========================================================
   9. FAQ
   ========================================================= */
.headline--faq { font-size: clamp(50px, 15vw, 220px); }
.faq {
  margin-top: 14px;
  border-top: 2px solid var(--ink);
}
.faq__row {
  border-bottom: 1px solid var(--hair-ink);
  padding: 14px 0;
}
.faq__q {
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.star-bullet {
  flex: none;
  width: 16px;
  height: 16px;
  background: var(--spot);
  clip-path: var(--star);
  filter: blur(.4px);
}
.faq__q-text {
  font-family: var(--f-sans);
  font-variation-settings: 'wdth' 110;
  font-weight: 900;
  font-size: clamp(17px, 4.2vw, 26px);
  letter-spacing: .01em;
  text-transform: uppercase;
  line-height: 1.2;
}
.faq__a {
  margin: 10px 0 0 28px;
  font-size: clamp(15px, 3.4vw, 17px);
  line-height: 1.55;
  max-width: 62ch;
}
.faq__a a {
  color: var(--spot);
  border-bottom: 2px solid var(--spot);
}

/* =========================================================
   10. FOOTER (ink ground)
   ========================================================= */
.footer {
  border-top: 3px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  padding: clamp(26px, 6vw, 64px) var(--gutter);
}
.footer__slogan {
  font-size: clamp(44px, 13.5vw, 200px);
  line-height: .78;
  letter-spacing: -.02em;
  text-shadow: 3px -3px 0 var(--spot);
}
.footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
  border-top: 2px solid rgba(244, 241, 232, .5);
  margin-top: 20px;
  padding-top: 18px;
  font-weight: 800;
  font-size: clamp(11px, 2.6vw, 14px);
  letter-spacing: .2em;
  line-height: 1.8;
}
.footer__cols a { color: var(--paper); }
.footer__cols a:hover { color: var(--spot); }
/* Gap is wide enough that the two 44px hit areas never overlap. */
.footer__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}
.footer__rsvp { border-bottom: 3px solid var(--spot); }
.footer__mail {
  border-bottom: 1px solid rgba(244, 241, 232, .5);
  letter-spacing: .04em;
  font-size: clamp(10px, 2.4vw, 12px);
  overflow-wrap: anywhere;
  display: inline-block;
  max-width: 100%;
}
.footer__fine {
  margin-top: 22px;
  font-family: var(--f-type);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .7;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grain,
  .wordmark,
  .star-spin,
  .confirm { animation: none; }
}