/* TMG events. One stylesheet, no third-party host, no runtime font fetch.
 *
 * The three faces are self-hosted copies of the files already serving on
 * library.sandeesellsvegas.com. Google Fonts is never contacted: a giveaway page
 * that phones a third party on load is a page whose privacy notice we cannot
 * write honestly, and the library settled this already.
 *
 * The font URLs below are rewritten by build.js to content-hashed filenames.
 * Do not hardcode a hashed name here. */

@font-face {
  font-family: "Cormorant";
  src: url("/assets/fonts/cormorant-var-latin.766e1b19.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("/assets/fonts/roboto-var-latin.1404ca34.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sacramento";
  src: url("/assets/fonts/sacramento-latin.2fcd867d.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --green: #163A2C;
  --red: #A32530;
  --gold: #ca963f;
  --cream: #FDFBF7;
  --grey: #F3F2F9;
  --ink: #22201d;
  --muted: #6d6a66;
  --serif: "Cormorant", Georgia, serif;
  --sans: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --script: "Sacramento", cursive;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.6;
}
img, svg { max-width: 100%; }
.wrap { max-width: 940px; margin: 0 auto; padding: 0 24px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- header -- */
.site-header { background: var(--grey); border-bottom: 1px solid #e3e2ea; }
.site-header .wrap {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding-top: 18px; padding-bottom: 18px; flex-wrap: wrap;
}
.brand {
  font-family: var(--serif); font-size: 1.35rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--green);
}
.brand-right {
  font-family: var(--sans); font-size: .72rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}

/* ------------------------------------------------------------------ hero -- */
.hero { background: var(--green); color: var(--cream); text-align: center; }
.hero .wrap { padding-top: 0; padding-bottom: 56px; }
.lights { display: block; width: 100%; height: auto; }
.hero-kicker {
  margin: 34px 0 0; font-size: .74rem; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase; color: var(--gold);
}
.hero-title {
  font-family: var(--serif); font-weight: 400; color: var(--cream);
  font-size: clamp(2.2rem, 7vw, 4rem); line-height: 1.05; margin: 14px 0 0;
  white-space: nowrap;
}
.hero-script {
  font-family: var(--script); color: var(--gold); font-weight: 400;
  font-size: clamp(3.4rem, 13vw, 7rem); line-height: .9; margin: 0;
}
.star-divider { color: var(--gold); font-size: 1.1rem; letter-spacing: .8em; margin: 10px 0 0; }
.hero-tagline {
  font-family: var(--serif); font-style: italic; color: var(--cream);
  font-size: clamp(1.25rem, 3.4vw, 1.7rem); margin: 18px 0 0;
}
.hero-amount {
  font-family: var(--serif); font-weight: 700; color: var(--gold);
  font-size: clamp(4rem, 17vw, 8.5rem); line-height: 1; margin: 12px 0 0;
}
.hero-amount-sub {
  font-family: var(--serif); color: var(--cream); margin: 2px 0 0;
  font-size: clamp(1.05rem, 3vw, 1.45rem);
}
.hero-deadline {
  display: inline-block; margin: 30px 0 0; background: var(--red); color: var(--cream);
  font-size: .78rem; font-weight: 600; letter-spacing: .13em;
  padding: 13px 22px; text-transform: uppercase;
}

/* ---------------------------------------------------------- how it works -- */
.how { background: var(--grey); }
.how .wrap { padding-top: 54px; padding-bottom: 54px; }
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
/* 🔴 THE ORDER AND THE SELECTORS HERE BOTH MATTER, AND GETTING IT WRONG IS
   INVISIBLE IN THE MARKUP. `.how-step p` is class + element (0,0,1,1) and
   `.how-num` is class alone (0,0,1,0), so the generic rule was WINNING and the
   red Cormorant numerals were rendering at body size. Caught on a screenshot of
   the deployed page, not in review. The generic rule is now scoped to exclude
   the numeral rather than relying on source order. */
.how-step p:not(.how-num) { margin: 0; font-size: 1.02rem; }
.how-step .how-num {
  font-family: var(--serif); color: var(--red); font-weight: 600;
  font-size: 3.1rem; line-height: 1; margin: 0 0 6px;
}

/* ------------------------------------------------------------------ menu -- */
.menu { background: var(--cream); }
.menu .wrap { padding-top: 58px; padding-bottom: 58px; }
.section-heading {
  font-family: var(--serif); font-weight: 500; color: var(--green);
  font-size: clamp(1.8rem, 4.6vw, 2.5rem); margin: 0; text-align: center;
}
.menu-subhead {
  max-width: 640px; margin: 14px auto 34px; text-align: center;
  color: var(--muted); font-size: .97rem;
}
/* NAMES ONLY, CENTRED. There is no price column and no empty cell where one
   used to be — see the note in the event config. The list is narrower than the
   wrap so nine short lines read as a menu rather than as a full-width table. */
.menu-list {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 520px; text-align: center;
}
.menu-row {
  padding: 14px 0; border-bottom: 1px solid #e8e3d8;
  font-size: 1.05rem;
}
.menu-row:last-child { border-bottom: 0; }

/* ----------------------------------------------------------------- entry -- */
.entry { background: var(--grey); }
.entry .wrap { padding-top: 58px; padding-bottom: 58px; }
.own-box {
  background: #fff; border: 2px solid var(--green); padding: 28px 26px;
  max-width: 620px; margin: 0 auto;
}
.own-q {
  font-family: var(--serif); font-size: 1.5rem; color: var(--green);
  margin: 0 0 18px; text-align: center;
}
.own-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.own-btn {
  font-family: var(--sans); font-size: .95rem; font-weight: 500;
  padding: 13px 26px; border: 2px solid var(--green); background: #fff;
  color: var(--green); cursor: pointer;
}
.own-btn:hover { background: var(--green); color: var(--cream); }
.own-btn[aria-pressed="true"] { background: var(--green); color: var(--cream); }
.own-note {
  margin: 18px 0 0; font-size: .88rem; color: var(--muted); text-align: center;
}

.form-panel { max-width: 620px; margin: 26px auto 0; }
.form-panel[hidden] { display: none; }
.field { margin: 0 0 16px; }
.field label {
  display: block; font-size: .72rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--green); margin: 0 0 6px;
}
.field .req-note { color: var(--red); font-weight: 500; }
.field input, .field select {
  width: 100%; padding: 12px 13px; border: 1px solid #cfccd8; background: #fff;
  font: inherit; font-size: 1rem; color: var(--ink); border-radius: 0;
}
.field input:focus, .field select:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ADDRESS AUTOCOMPLETE. The list is positioned against the field, not the page,
   so it tracks the input on every width without a script measuring anything.

   ⚠️ THE PANEL IS NOT INSIDE .bonus AND MUST NOT INHERIT ITS COLOURS. The
   address field sits above the bonus block, on the white form, and the rules
   below set both background and colour explicitly rather than relying on that
   staying true. */
.field--ac { position: relative; }

.ac-list {
  position: absolute; z-index: 20; left: 0; right: 0;
  margin: 2px 0 0; padding: 0; list-style: none;
  background: #fff; border: 1px solid var(--green);
  max-height: 264px; overflow-y: auto;
  box-shadow: 0 6px 18px rgba(14, 42, 31, .14);
}
.ac-list[hidden] { display: none; }

.ac-row {
  padding: 11px 13px; font-size: .95rem; line-height: 1.35; color: var(--ink);
  cursor: pointer; border-bottom: 1px solid #eceae4;
}
.ac-row:last-child { border-bottom: 0; }
/* Hover and keyboard highlight are the SAME state. A pointer user and a keyboard
   user are looking at one list and must not see two different "current" rows. */
.ac-row:hover, .ac-row.is-active { background: var(--green); color: var(--cream); }

.field-hint {
  margin: 6px 0 0; font-size: .78rem; color: var(--muted); line-height: 1.4;
}
/* THE INLINE SERVICE-AREA MESSAGE, under the address field.

   TWO STATES, AND THEY MUST NOT LOOK ALIKE. `is-pending` is grey and quiet —
   it says "working", and dressing it in the rejection's red would flash a
   refusal at somebody whose only problem is a slow connection. `is-out` is the
   red the rest of the form already uses for a real problem. */
.field-msg { margin: 6px 0 0; font-size: .82rem; line-height: 1.45; }
.field-msg[hidden] { display: none; }
.field-msg.is-pending { color: var(--muted); font-style: italic; }
.field-msg.is-out { color: var(--red); font-weight: 500; }

/* The field itself carries the state too, so the connection between the
   message and the input it belongs to survives at a glance and for anyone who
   cannot see the colour. */
.field input[aria-invalid="true"] { border-color: var(--red); border-width: 2px; }

/* A disabled submit has to LOOK disabled. A button that silently does nothing
   reads as a broken page, and the message above it is the explanation. */
.cta:disabled { opacity: .45; cursor: not-allowed; }


.check { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; font-size: .9rem; }
.check input { margin: 3px 0 0; flex: 0 0 auto; width: 17px; height: 17px; }
.check a { color: var(--green); }

/* The honeypot. Off-screen rather than display:none, and never labelled in a
   way that reads as optional, because some bots skip hidden fields but very few
   skip off-screen ones. Real people never reach it: tabindex -1, autocomplete
   off, aria-hidden. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.bonus {
  background: var(--green); color: var(--cream); padding: 26px 24px; margin: 26px 0 22px;
}
.bonus-star { color: var(--gold); font-size: 1.3rem; }
.bonus h3 { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; margin: 6px 0 6px; }
.bonus p.bonus-body { margin: 0 0 20px; font-size: .95rem; color: #e8e3d6; }
.bonus .field label { color: var(--gold); }

.cta {
  display: block; width: 100%; background: var(--red); color: var(--cream);
  font-family: var(--sans); font-size: 1rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; border: 0; padding: 17px; cursor: pointer;
}
.cta:hover { background: #8c1f28; }
.cta[disabled] { opacity: .6; cursor: default; }
.share-note { margin: 14px 0 0; text-align: center; font-size: .88rem; color: var(--muted); }
.form-msg { margin: 16px 0 0; font-size: .95rem; }
.form-msg.is-error { color: var(--red); }

.state-panel { max-width: 620px; margin: 0 auto; text-align: center; }
.state-panel[hidden] { display: none; }
.state-card { background: #fff; border: 2px solid var(--green); padding: 34px 28px; }
.state-card h2 { font-family: var(--serif); color: var(--green); font-size: 2rem; margin: 0 0 10px; }
.state-card p { margin: 0; color: var(--muted); }
.state-card .winner-name {
  font-family: var(--serif); color: var(--gold); font-size: 2.4rem; margin: 14px 0 0;
}

/* --------------------------------------------------------------- sponsor -- */
.sponsor { background: var(--green); color: var(--cream); text-align: center; }
.sponsor .wrap { padding-top: 46px; padding-bottom: 46px; }
.sponsor-kicker {
  font-size: .72rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold); margin: 0;
}
.sponsor-name { font-family: var(--serif); font-size: 2.1rem; margin: 8px 0 12px; }
.sponsor-line { margin: 0 auto; max-width: 540px; font-size: .95rem; color: #ded8ca; }

/* ---------------------------------------------------------------- footer -- */
.site-footer { background: var(--cream); border-top: 1px solid #e8e3d8; }
.site-footer .wrap { padding-top: 30px; padding-bottom: 44px; }
.legal { margin: 0; font-size: .68rem; line-height: 1.65; color: #8a8680; }

/* ----------------------------------------------------------------- rules -- */
.rules-page .wrap { padding-top: 60px; padding-bottom: 70px; max-width: 720px; }
.rules-page h1 { font-family: var(--serif); color: var(--green); font-size: 2.4rem; margin: 0 0 18px; }
.rules-page a { color: var(--green); }

@media (max-width: 720px) {
  .how-grid { grid-template-columns: 1fr; gap: 26px; }
  .field-row { grid-template-columns: 1fr; }
  .hero-title { white-space: normal; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * THE RUNNER-UP COUPON
 *
 * Two audiences: a screen, and a sheet of paper. The print rules at the bottom
 * are not an afterthought — people will print this and hand it over, and a
 * coupon that spills onto a second page loses the stub with the code on it.
 * ═══════════════════════════════════════════════════════════════════════════ */

.coupon-page { background: var(--grey); }
.coupon-page .wrap { padding-top: 46px; padding-bottom: 60px; max-width: 820px; }

/* ---------------------------------------------------------------- lookup -- */
.lookup { max-width: 520px; margin: 0 auto 40px; background: #fff; border: 2px solid var(--green); padding: 30px 26px; }
.lookup h1 { font-family: var(--serif); color: var(--green); font-size: 2rem; margin: 0 0 8px; text-align: center; }
.lookup p.lookup-body { margin: 0 0 22px; text-align: center; color: var(--muted); font-size: .95rem; }
.lookup .form-msg { text-align: center; }

/* ---------------------------------------------------------------- ticket -- */
.coupon { background: #fff; border: 1px solid #d9d5cc; }
.coupon[hidden] { display: none; }

.coupon-band {
  background: var(--green); color: var(--cream); text-align: center;
  font-size: .74rem; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; padding: 13px 16px;
}
.coupon-band--foot { letter-spacing: .26em; font-size: .8rem; }
.coupon-credit {
  background: var(--green); color: #cfc7b6; text-align: center;
  font-size: .64rem; letter-spacing: .06em; padding: 0 16px 13px;
}

/* The two halves. `stretch` so the dashed divider runs the full height of the
   taller side rather than stopping short of it. */
.coupon-body { display: flex; align-items: stretch; }
.coupon-main { flex: 1 1 60%; padding: 32px 30px; }
.coupon-stub { flex: 0 0 38%; padding: 32px 26px; }

/* THE PERFORATION. A left border on the stub, not a separate element: a
   pseudo-element would need positioning against a flex height that is only
   known at layout time, and this is one line of CSS that cannot fall out of
   step with it. */
.coupon-stub { border-left: 2px dashed #c9c3b6; }

.coupon-thanks {
  color: var(--red); font-size: .74rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; margin: 0 0 10px;
}
.coupon-heading {
  font-family: var(--serif); color: var(--green); font-weight: 500;
  font-size: 1.9rem; line-height: 1.15; margin: 0 0 18px;
}
/* THE OFFER TERMS — three lines, styled as real terms rather than the pending
   state. No gold outline: that treatment belongs to the pending box and its
   presence would keep saying "not final" about terms that are. */
.coupon-terms { margin: 0 0 18px; }
.terms-headline {
  font-family: var(--serif); color: var(--green); font-weight: 500;
  font-size: 1.25rem; line-height: 1.25; margin: 0 0 6px;
}
.terms-services { font-size: .82rem; color: var(--muted); margin: 0 0 8px; line-height: 1.5; }
.terms-action { font-size: .9rem; margin: 0; }

/* The pending state, exactly as mocked: gold outline, not blank space and not
   invented wording. See the note on `terms` in the event config. */
.terms-pending {
  border: 2px solid var(--gold); padding: 18px 16px; text-align: center; margin: 0 0 18px;
}
.terms-pending strong {
  display: block; color: var(--gold); font-size: .8rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
}
.terms-pending span { display: block; margin-top: 5px; color: var(--muted); font-size: .82rem; font-style: italic; }

.coupon-redeem { font-size: .88rem; margin: 0 0 8px; }
.coupon-restrictions { font-size: .76rem; color: var(--muted); margin: 0; }

.stub-label {
  font-size: .62rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 4px;
}
.stub-value { font-size: .92rem; margin: 0 0 18px; }
.stub-name { font-family: var(--serif); font-size: 1.15rem; margin: 0 0 2px; }
.stub-code {
  background: var(--green); color: var(--cream); text-align: center;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 1.18rem; font-weight: 600; letter-spacing: .09em;
  padding: 13px 8px; margin: 0 0 18px; word-break: break-all;
}
.stub-fine { font-size: .68rem; color: var(--muted); margin: 0; }

@media (max-width: 680px) {
  .coupon-body { display: block; }
  /* The perforation turns horizontal with the layout — a vertical dashed line
     between stacked blocks reads as a mistake. */
  .coupon-stub { border-left: 0; border-top: 2px dashed #c9c3b6; }
}

/* ----------------------------------------------------------------- print -- */
/* ONE PAGE, ALWAYS. The stub carries the code, so anything that pushes it to a
   second sheet defeats the whole artefact. */
@media print {
  .site-header, .site-footer, .lookup, .coupon-print-hint { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .coupon-page .wrap { padding: 0; max-width: none; }
  .coupon { border: 1px solid #000; break-inside: avoid; page-break-inside: avoid; }
  .coupon-body { display: flex; }
  .coupon-stub { border-left: 2px dashed #666; border-top: 0; }
  /* Backgrounds are what make the green bands and the code block readable, and
     browsers drop them by default when printing. */
  .coupon-band, .coupon-credit, .stub-code {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  @page { margin: 12mm; }
}