/* ═══════════════════════════════════════════════════════════════
   GIVEAWAY — page-specific styles          ⚠ TEMPORARY (CAMPAIGN) ⚠

   Loads AFTER /styles.css, which supplies the entire design system:
   tokens, the light/dark scope system, type scale, .btn, .link-quiet,
   .detail--rule, .h-display, .spread, .plate, .break, .why__list, .faq,
   .foot, and the .reveal / .reveal-lines motion hooks that main.js
   animates. Nothing below re-declares a colour, a typeface, or a spacing
   value — every rule here reads the same tokens the main site does, so
   this page cannot drift into a second visual language.

   Only what the main site had no existing component for lives here:
   the entry form, and the handful of layout adjustments needed where a
   borrowed component is used outside its original parent.

   Deleted wholesale with the /giveaway folder.
   ═══════════════════════════════════════════════════════════════ */

/* ── NAV ────────────────────────────────────────────────────────
   §8's breakpoint hides .nav__cta at ≤860px because the burger and the
   mobile sheet take over there. This page has neither (see the comment
   on the nav in index.html), so its one CTA has to stay visible. */
@media (max-width: 860px) {
  .nav--min .nav__cta { display: inline-flex; }
}
@media (max-width: 420px) {
  /* At the narrow end the brand wordmark and the pill start competing for
     the same row. Both step down rather than either one wrapping. */
  .nav--min .nav__word { font-size: 1.1rem; }
  .nav--min .nav__cta { padding: 0.7rem 1.15rem; font-size: 0.66rem; letter-spacing: 0.12em; }
}

/* ── HERO ───────────────────────────────────────────────────────
   Inherits .hero wholesale. Only the wordmark is retuned: §13 sizes it
   for "Sola" (4 narrow letters), and "Free" at that same clamp runs wider
   than the lede beneath it on a phone, which breaks the centred stack. */
.gw-hero .hero__word { font-size: clamp(4.2rem, 19vw, 14rem); }
.gw-hero .hero__lede { max-width: 46ch; }

/* ── THE PRIZE ──────────────────────────────────────────────────
   Borrows .ethos for its spread layout. §16 sets `padding-block:
   var(--section-y) 0` because a marquee always follows it on the main
   site and supplies the bottom space. There's no marquee here, so the
   section has to close itself. */
.gw-prize { padding-bottom: var(--section-y); }

/* Sits inside .spread__main now (see the note in index.html), so it
   inherits the column's left edge and horizontal inset. It previously
   centred itself with margin-inline:auto, which put its left edge 54px
   left of the heading above it at 2560px — visibly out of alignment.
   No padding-inline, no margin-inline: both come from the spread. */
.gw-list {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  max-width: none; /* fills the (already capped) spread column */
  /* Two columns once there's room — six single-file items is a long scroll
     between the headline and the deadline, and this is the section doing
     the actual persuading. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 5vw, 4.5rem);
}
/* .why__list's own type is sized for the main site's narrow .why__copy
   column. In a column this wide it reads as fine print, so both steps up
   — still inside the existing scale, never past .body-lg's ceiling. */
.gw-list h3 { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); }
.gw-list p {
  font-size: clamp(0.95rem, 0.9rem + 0.18vw, 1.12rem);
  max-width: 42ch;
}
@media (max-width: 780px) {
  .gw-list { grid-template-columns: 1fr; }
}

/* ── GENERIC SECTION ────────────────────────────────────────────
   These used to be a 52rem block centred with margin-inline:auto. That
   reads fine to about 1440px and falls apart above it: --edge stops
   growing at 5.5rem, so every pixel past ~1760px viewport became dead
   margin. At 2560 it left an 832px column stranded in the middle with
   ~860px of empty cream on each side, and the numeral label centred over
   the heading instead of sitting where every other section's does.

   They use .spread now — the same component the Prize section and the
   main site's Ethos/Ritual/Studio use. The numeral goes in the left
   margin, the content column shares its left edge with every other
   section on the page, and the column grows with the viewport instead of
   being capped. Alignment is now structural rather than a number that has
   to be kept in sync by hand.

   padding-inline is deliberately absent: .spread carries it (§12). */
.gw-sec {
  position: relative;
  padding-block: var(--section-y);
  overflow: clip; /* contains the watermark's bleed — same as .reserve */
}

/* ── ULTRAWIDE CAP ──────────────────────────────────────────────
   .spread has no width cap, so past ~1600px it keeps stretching and
   dumps every surplus pixel into one void on the right: at 2560 the copy
   ended around x=1300 with ~1000px of empty cream beside it and only
   88px on the left. Unbalanced reads as broken; balanced reads as
   editorial, which is the whole basis of this site's layout.

   The number isn't invented. .break__inner (§15) already caps at 1400px
   and centres, so the Break statements are the one thing on this page
   that was already composed correctly at this width. Matching it here —
   1400px of content plus the section's own --edge padding — lands these
   sections on EXACTLY the same left and right edges as the two Breaks
   they sit between (580 → 1980 at 2560px), so the whole page reads as
   one column instead of four differently-anchored blocks.

   Engages only above ~1576px. Below that the calc exceeds the viewport,
   max-width does nothing, and the layout is untouched. */
.gw-sec .spread,
.gw-prize .spread {
  max-width: calc(1400px + var(--edge) * 2);
  margin-inline: auto;
}
/* §12 caps .spread__main at 46ch, which is tuned for body copy and
   squeezes a display heading into extra line-wraps. §16 already makes
   this exact exception for .ethos/.ritual/.studio; these sections need
   it for the same reason. */
.gw-sec .spread__main { max-width: none; }

/* The lede under each heading. Replaces .why__lede here — that one is
   fixed at 44ch/1.05rem for the main site's narrower .why__copy column,
   which rendered a 367px ribbon under a 1755px heading on a wide monitor.
   Both the size and the measure scale now, so the ratio between heading
   and lede holds at any width. Capped at 1.32rem to stay inside the
   type scale .body-lg already establishes. */
.gw-lede {
  margin-top: 1.4rem;
  max-width: 58ch;
  color: var(--ink-strong);
  font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.32rem);
  line-height: 1.62;
}

/* ── WATERMARK ──────────────────────────────────────────────────
   Lifted from .reserve__mark (§21) so the giveaway page fills its
   whitespace exactly the way the main site's Contact section does.

   The wrapper owns position and centring; the <img> inside owns
   [data-parallax]. That split is load-bearing and documented on
   .reserve__mark: GSAP writes transform on the parallaxed element, so
   anything centred by transform on that same element gets wiped the
   moment the parallax initialises. */
.gw-mark {
  position: absolute;
  top: 50%;
  right: -6vw;
  width: min(48vw, 560px);
  transform: translateY(-50%);
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}
/* .spread is transparent, so it needs to be lifted above the watermark
   rather than the watermark pushed behind an opaque backdrop. */
.gw-sec .spread { position: relative; z-index: 2; }

@media (max-width: 860px) {
  /* Off to the side and fainter on a phone, where it would otherwise sit
     directly behind the copy. Mirrors the main site's own 620px
     treatment of .reserve__mark. */
  .gw-mark { opacity: 0.07; right: -30vw; width: 90vw; }

  /* ...except behind the entry form. Once the spread collapses to one
     column the form widens to fill it, and the mark ends up washing
     across the input underlines and the text being typed into them. It
     exists to fill desktop voids; a phone has no void to fill, and the
     form is the one thing on this page that has to stay legible. */
  .gw-enter .gw-mark { display: none; }
}

.gw-link {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color 0.5s var(--ease-soft);
}
.gw-link:hover { text-decoration-color: currentColor; }

/* ── EVERYONE WHO ENTERS ────────────────────────────────────────
   The credit is the line that keeps a non-winner reading, so it gets the
   accent rather than a bolder weight — FreightSans Pro only ships Book
   and Bold here, and Bold at body size reads as shouting next to
   everything else on the page. */
.gw-everyone strong {
  font-weight: 400;
  color: var(--accent-text);
  font-style: italic;
}

/* ── WHO'S BEHIND IT ────────────────────────────────────────────
   Built on .ethos__cols (§16), so only its cap changes. 68ch is sized for
   the main site's Ethos column; here it left the second column ending
   well short of the section's own right edge. */
/* No cap: the spread column is already capped by the ultrawide rule
   above, so the two columns should fill it rather than stopping short
   inside a box that's itself inside a box. */
.gw-who__body { max-width: none; }
.gw-who__cta {
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 4vw, 2.4rem);
  flex-wrap: wrap;
  margin-top: clamp(1rem, 3vw, 2rem);
}

/* ── ENTRY FORM ─────────────────────────────────────────────────
   Built on §21b's .newsletter__field principle: no boxes, no fills, no
   rounded rectangles — a hairline under the input that warms to orange
   on focus. It's the only form language this site has, and matching it
   is the whole reason this isn't an embed. */
.gw-form {
  width: 100%;
  max-width: clamp(30rem, 34vw, 38rem);
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  display: grid;
  gap: 1.6rem;
}
.gw-field {
  display: grid;
  gap: 0.45rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.6s var(--ease-soft);
}
.gw-field label { color: var(--ink-soft); cursor: pointer; }
.gw-field:focus-within { border-color: var(--orange); }
.gw-field:focus-within label { color: var(--accent-text); }
/* Set by the submit handler on any field that fails validation. --red is
   the branding package's own PANTONE 200C, already used by
   .newsletter__status.is-error. */
.gw-field.is-invalid { border-color: var(--red); }
.gw-field input {
  width: 100%;
  min-height: 2.5rem; /* keeps the tap target comfortable with the label */
  background: transparent;
  border: 0;
  font-size: 1rem;
  color: var(--ink);
}
.gw-field input:focus { outline: none; }
.gw-field input::placeholder { color: var(--ink-soft); font-style: italic; }
/* Four autocomplete-tagged fields means Chrome's autofill WILL fire here,
   and its default is an opaque pale-blue block — which on a transparent,
   underline-only input looks like a rendering bug rather than a filled
   field. Painting the cream back in via an inset shadow is the only way
   to override it; `background` is ignored on autofilled inputs. */
.gw-field input:-webkit-autofill,
.gw-field input:-webkit-autofill:hover,
.gw-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 100px var(--sand) inset;
  caret-color: var(--ink);
  font-family: var(--f-body);
}

.gw-form__submit { margin-top: 0.4rem; }
.gw-form__submit:disabled { opacity: 0.55; cursor: default; }
.gw-form__submit:disabled::before { transform: translateY(101%); }

/* Mirrors .newsletter__status (§21b) — same tokens, same transition. */
.gw-form__status {
  min-height: 1.2rem;
  font-size: 0.92rem;
  font-style: italic;
  color: var(--ink-mid);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.8s var(--ease-soft), transform 0.8s var(--ease-spa);
}
.gw-form__status.is-shown { opacity: 1; transform: none; }
.gw-form__status.is-done { color: var(--confirm-text); }
.gw-form__status.is-error { color: var(--red); }
.gw-form__status a { text-decoration: underline; text-underline-offset: 3px; }

.gw-form__fine {
  font-size: 0.62rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Once an entry is in, the fields stop inviting a second one — but stay
   on screen, so the confirmation reads as "that worked" rather than the
   form having vanished. */
.gw-form.is-sent .gw-field,
.gw-form.is-sent .gw-form__submit {
  opacity: 0.35;
  pointer-events: none;
}

/* ── TALLY SLOT ─────────────────────────────────────────────────
   Inert until an embed is pasted in AND .is-active is added — see the
   marked slot in index.html. The reserved min-height is the point: an
   iframe that sizes itself after load is the usual source of an embed
   shoving the page around, and this page has a hard no-layout-shift
   requirement it shares with the banner. */
.gw-embed { display: none; }
.gw-embed.is-active {
  display: block;
  width: 100%;
  max-width: 30rem;
  min-height: 520px;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.gw-embed iframe { width: 100%; min-height: 520px; border: 0; display: block; }

/* ── DETAILS / FAQ ──────────────────────────────────────────────
   Reverted to §20b's centred treatment. Forcing it left-aligned (with
   .faq__list's margin-inline:auto cancelled) pinned an 864px list to the
   left edge and left ~1600px of empty cream beside it at 2560px — the
   worst-balanced block on the page. §20b centres the list precisely so it
   stays balanced at any width, and the rows inside it stay left-aligned
   on their own, so nothing is lost by letting it do its job.

   Only the cap grows: 54rem is the main site's figure, and this page's
   questions are longer. */
/* 1400px, the same cap the sections above use, so the FAQ shares their
   left and right edges instead of being a third width on the page. */
.gw-faq .faq__list { max-width: 1400px; }
.gw-faq .faq__q { font-size: clamp(1.1rem, 1rem + 0.55vw, 1.5rem); }
.gw-faq .faq__a p { font-size: clamp(0.95rem, 0.92rem + 0.16vw, 1.1rem); }
.gw-faq__cta { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* ── FOOTER ─────────────────────────────────────────────────────
   .foot and .foot__bar are reused as-is. Only the top row differs: the
   main site's three columns are studio hours and an address, neither of
   which belongs on this page. */
.gw-foot__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--gut);
  align-items: start;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.gw-foot__aside { display: grid; gap: 0.8rem; justify-items: start; max-width: 42ch; }
.gw-foot__aside p:not(.detail) {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--ink-mid);
}
@media (max-width: 860px) {
  .gw-foot__top { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 620px) {
  .foot__bar { flex-direction: column; gap: 0.4rem; }
}