/* EasyClippers 13.13.3: the New Year Giveaway page. The owner, Nov 5 2026: "I want it to look beautiful just like the
   easyclippers.com page ... We need to make it pop" and "Instead of a white background we use a custom created
   background from those examples i showed you". So the page is one illustrated night: a flat royal blue poster sky with
   thick black outlines (their first example), premium glossy 3D objects floating in it (their 3D examples), and the
   home page's type (Inter, heavy and tight), its golden shine word and its one aqua button, outlined in the
   illustration's ink. Card-free like the rest of the site (flat.css): sections are set apart by space, headings and
   hairlines, numbers sit in a strip split by thin lines, lists are rows. One deliberate look on every theme, like the
   home page. Motion is gentle and stops for reduced motion. */
@font-face { font-family: 'Inter'; src: url('/static/assets/InterVariable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: dark;
  --sky: #215496;            /* the poster sky, sampled from the art, so the pictures melt into the page */
  --sky-deep: #1a4685;
  --ground: #0b1020;         /* the footer: the illustration's ink */
  --ink: #0b1020;
  --text: #ffffff; --muted: #e0e9fb; --faint: #c6d4f0;
  --line: rgba(255, 255, 255, .24); --line-2: rgba(255, 255, 255, .5);
  --cream: #fff3dc; --gold: #ffd36e; --peach: #ffb98a; --pink: #f6a8cb;
  --accent: #2ee6d6; --accent-hover: #74f1e6; --on-accent: #03141a;
  --err: #ffd3de;
  --shine: linear-gradient(90deg, #ffe39a 0%, #ffc276 16%, #ff9fbd 34%, #ffd6ee 50%, #9fe3ff 66%, #a3f5d6 84%, #ffe39a 100%);
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --max: 1180px;
  --gut: max(20px, env(safe-area-inset-left, 0px)); --gut-r: max(20px, env(safe-area-inset-right, 0px));
  --outline: .03em 0 0 var(--ink), -.03em 0 0 var(--ink), 0 .03em 0 var(--ink), 0 -.03em 0 var(--ink),
    .022em .022em 0 var(--ink), -.022em .022em 0 var(--ink), .022em -.022em 0 var(--ink), -.022em -.022em 0 var(--ink),
    0 .075em 0 var(--ink);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--sky); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body.gw {
  margin: 0; min-height: 100vh; position: relative; overflow-x: clip;
  background: radial-gradient(1100px 560px at 50% -220px, rgba(255, 214, 150, .16), transparent 72%), var(--sky);
  color: var(--text); font: 400 17px/1.6 var(--font); letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
/* the sky's own dots and sparkles, fixed behind everything, so the page scrolls through one night */
body.gw::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url('/static/assets/giveaway/sky-tile.png') 0 0 / 360px 360px repeat;
  opacity: .75; animation: gwTwinkle 7s ease-in-out infinite;
}
.gw-nav, main, .gw-foot { position: relative; z-index: 1; }
.gw ::selection { background: rgba(46, 230, 214, .4); color: #fff; }
.gw :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 10px; }
:where(.gw) :where(h1, h2, h3) { margin: 0; color: #fff; font-weight: 800; text-wrap: balance; }
:where(.gw) :where(p, dl, dd, ol, ul, figure) { margin: 0; }
:where(.gw) img { max-width: 100%; }
.gw-wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut-r); }
.gw-narrow { max-width: 860px; }
.gw-center { text-align: center; }

/* ---------- the top bar: clear over the sky, frosted once the page moves ---------- */
.gw-nav { position: sticky; top: 0; z-index: 30; padding-top: env(safe-area-inset-top, 0px);
  transition: background-color .2s, box-shadow .2s; }
.gw-nav.scrolled { background: rgba(26, 70, 133, .86); box-shadow: 0 1px 0 var(--line);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
.gw-nav-in { display: flex; align-items: center; gap: 12px; height: 68px; }
.gw-brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; white-space: nowrap;
  font: 780 19px/1 var(--font); letter-spacing: -0.03em; }
.gw-brand img { width: 30px; height: 30px; }
.gw-brand b { font-weight: 780; background: linear-gradient(100deg, #5ff3e4 0%, #a5ecff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.gw-links { display: flex; gap: 2px; margin-left: 22px; }
.gw-links a { color: var(--muted); text-decoration: none; font: 600 15px/1 var(--font); padding: 10px 12px; border-radius: 10px;
  white-space: nowrap; transition: color .15s, background-color .15s; }
.gw-links a:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.gw-grow { flex: 1; }
.gw-signin { color: #fff; text-decoration: none; font: 650 15px/1 var(--font); padding: 10px 8px; white-space: nowrap; }
.gw-signin:hover { color: var(--accent-hover); }

/* ---------- buttons: the home page's aqua, outlined in ink with a hard shadow, like the art ---------- */
.gw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 54px; padding: 0 26px;
  border-radius: 999px; border: 2.5px solid var(--ink); font: 760 16.5px/1 var(--font); letter-spacing: -0.01em;
  white-space: nowrap; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: transform .15s, box-shadow .15s, background-color .15s, border-color .15s, color .15s; }
.gw-btn.primary { background: var(--accent); color: var(--on-accent);
  box-shadow: 0 5px 0 var(--ink), 0 20px 44px -16px rgba(46, 230, 214, .8); }
.gw-btn.primary:hover { background: var(--accent-hover); transform: translateY(-2px);
  box-shadow: 0 7px 0 var(--ink), 0 24px 48px -16px rgba(46, 230, 214, .9); }
.gw-btn.primary:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink), 0 10px 24px -14px rgba(46, 230, 214, .6); }
/* the sky behind the outline button, so its dots never show through the label (13.14.5) */
.gw-btn.line { background: rgba(41, 92, 160, .94); color: #fff; border-color: rgba(255, 255, 255, .8); }
.gw-btn.line:hover { background: rgba(58, 110, 178, .96); border-color: #fff; }
.gw-btn.line:active { transform: translateY(2px); }
.gw-btn.sm { height: 42px; padding: 0 18px; font-size: 15px; border-width: 2px; }
.gw-btn.sm.primary { box-shadow: 0 3px 0 var(--ink); }
.gw-btn.sm.primary:hover { box-shadow: 0 5px 0 var(--ink); }
.gw-btn.xl { height: 62px; padding: 0 34px; font-size: 18px; }
.gw-btn[disabled] { opacity: .55; pointer-events: none; }

/* ---------- type ---------- */
.gw-kick { display: inline-flex; align-items: center; gap: 10px; color: var(--cream); font: 760 13px/1.3 var(--font);
  letter-spacing: .16em; text-transform: uppercase; }
.gw-kick i { font-style: normal; color: var(--gold); font-size: 15px; letter-spacing: 0; }
:where(.gw) h2 { font-size: clamp(36px, 6.2vw, 62px); line-height: 1.02; letter-spacing: -0.045em; }
:where(.gw) h3 { font-size: clamp(21px, 2.2vw, 25px); line-height: 1.2; letter-spacing: -0.03em; }
.gw-kick + h2, .gw-kick + h1 { margin-top: 18px; }
.gw-lead { margin-top: 20px; color: var(--muted); font-size: clamp(17px, 2vw, 20px); line-height: 1.55; max-width: 46ch; }
.gw-center .gw-lead { margin-left: auto; margin-right: auto; }
.gw-grad { background: var(--shine); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; animation: gwShine 9s linear infinite; }

/* ---------- the hero: the headline, then the picture melting into the sky, the clouds rolling over its foot ---------- */
/* the clouds are wider than the page (they roll over the picture's foot): clipped here, so a phone never scrolls sideways
   (13.14.5: the page was 80 px wider than the screen where overflow: clip on the body is not honoured) */
.gw-hero { position: relative; padding-top: clamp(24px, 4.4vw, 56px); overflow-x: hidden; overflow-x: clip; }
.gw-hero h1 { margin: 16px auto 0; max-width: 13ch; font-size: clamp(48px, 11.2vw, 104px); line-height: .95; letter-spacing: -0.052em; }
.gw-sub { margin: 22px auto 0; max-width: 54ch; color: var(--muted); font-size: clamp(18px, 2.3vw, 22px); line-height: 1.5; letter-spacing: -0.014em; }
.gw-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 30px; }
.gw-note { position: relative; z-index: 1; margin-top: 16px; color: var(--muted); font: 640 14.5px/1.4 var(--font); text-shadow: 0 1px 10px rgba(16, 42, 92, .9); }
.gw-note i { font-style: normal; color: var(--gold); margin: 0 7px; }
.gw-stage { position: relative; z-index: 0; max-width: 1300px; margin: clamp(-22px, -1.4vw, 0px) auto 0; }
.gw-stage img { display: block; width: 100%; height: auto;
  /* the foot fades into the sky too (13.14.5: its flat bottom edge showed between the clouds) */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%), linear-gradient(180deg, transparent 0, #000 5%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%), linear-gradient(180deg, transparent 0, #000 5%, #000 84%, transparent 100%);
  mask-composite: intersect; }
.gw-clouds { position: relative; z-index: 2; display: block; width: 112%; max-width: none; height: auto;
  margin: -11.5% 0 0 -6%; pointer-events: none; animation: gwDrift 16s ease-in-out infinite; }

/* ---------- the countdown: big poster numerals in a strip split by thin lines ---------- */
.gw-count { position: relative; padding: clamp(18px, 3vw, 36px) 0 clamp(40px, 6vw, 72px); }
.gw-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 900px; margin: 0 auto; }
.gw-strip > div { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 6px 4px; min-width: 0; }
.gw-strip > div + div { border-left: 1px solid var(--line); }
.gw-strip b { font: 900 clamp(48px, 11vw, 116px)/.9 var(--font); letter-spacing: -0.035em; font-variant-numeric: tabular-nums;
  color: var(--cream); text-shadow: var(--outline); }
.gw-strip span { color: var(--muted); font: 720 12.5px/1 var(--font); letter-spacing: .18em; text-transform: uppercase; }
.gw-count-note { margin-top: 26px; text-align: center; color: var(--muted); font-size: 17px; }

/* ---------- the ribbon: a strip of the giveaway's facts, rolling past like a banner ---------- */
.gw-ribbon { position: relative; overflow: hidden; padding: 30px 0 36px; }
.gw-ribbon-band { margin: 0 -40px; transform: rotate(-2deg); background: var(--cream); color: var(--ink);
  border-block: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink); }
.gw-ribbon-in { display: flex; width: max-content; animation: gwRoll 42s linear infinite; }
.gw-ribbon-in span { display: inline-flex; align-items: center; gap: 22px; padding: 15px 0 15px 22px; white-space: nowrap;
  font: 850 clamp(17px, 2vw, 21px)/1 var(--font); letter-spacing: -0.02em; text-transform: uppercase; }
.gw-ribbon-in span::after { content: '\2726'; color: #e0814a; font-size: .9em; }

/* ---------- sections ---------- */
.gw-sec { position: relative; padding-block: clamp(72px, 10vw, 140px); }
.gw-head { max-width: 780px; margin: 0 auto; }
.gw-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.gw-split.rev .gw-art { order: 2; }
.gw-copy { min-width: 0; }
.gw-art { position: relative; display: grid; place-items: center; min-height: 340px; }
.gw-art::before { content: ''; position: absolute; inset: 6% 10%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 236, 190, .3), rgba(255, 236, 190, 0)); }
.gw-art::after { content: ''; position: absolute; left: 30%; right: 30%; bottom: 4%; height: 26px; border-radius: 50%;
  background: rgba(6, 18, 48, .42); filter: blur(10px); animation: gwShadow 6.5s ease-in-out infinite; }
.gw-art .a { position: relative; z-index: 1; width: min(100%, 470px); height: auto; }

/* the prize facts: a strip split by thin lines */
.gw-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 36px 0 0; border-top: 1px solid var(--line); }
.gw-facts div { padding: 20px 18px 20px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.gw-facts div:nth-child(odd) { border-right: 1px solid var(--line); }
.gw-facts div:nth-child(even) { padding-left: 24px; }
.gw-facts dt { font: 860 clamp(30px, 3.8vw, 42px)/1 var(--font); letter-spacing: -0.04em; color: #fff; font-variant-numeric: tabular-nums; }
.gw-facts dd { margin: 9px 0 0; color: var(--muted); font-size: 15.5px; line-height: 1.4; }

/* ---------- how to enter: three steps, split by thin lines ---------- */
.gw-three { list-style: none; margin: clamp(44px, 6vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gw-three li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 clamp(16px, 3vw, 40px); min-width: 0; }
.gw-three li + li { border-left: 1px solid var(--line); }
.gw-three img { width: auto; height: clamp(112px, 12vw, 150px); max-width: 80%; object-fit: contain; margin-bottom: 22px; filter: drop-shadow(0 18px 22px rgba(6, 18, 48, .35)); }
.gw-n { font: 860 14px/1 var(--font); letter-spacing: .16em; color: var(--gold); }
.gw-three h3 { margin-top: 12px; }
.gw-three p { margin-top: 10px; color: var(--muted); font-size: 16.5px; line-height: 1.5; max-width: 30ch; }
.gw-three li.done .gw-n::after { content: '\a0\a0\b7\a0\a0 Done'; color: var(--accent); }

/* ---------- the entry: the form sits on the sky, lit from behind; an entry becomes a ticket ---------- */
.gw-entry { padding-top: clamp(24px, 4vw, 56px); }
.gw-sheet { position: relative; isolation: isolate; max-width: 700px; margin: 0 auto; text-align: center; scroll-margin-top: 100px; }
.gw-sheet::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 45%; width: min(150%, 1100px); aspect-ratio: 1.5;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .13), rgba(255, 255, 255, 0)); }
.gw-gift { display: block; width: clamp(120px, 15vw, 168px); height: auto; margin: 0 auto 18px; filter: drop-shadow(0 18px 22px rgba(6, 18, 48, .35)); }
.gw-sheet h2 { font-size: clamp(32px, 5.4vw, 54px); }
#gwBody { margin-top: 18px; }
#gwBody > p { color: var(--muted); font-size: clamp(17px, 2vw, 19px); line-height: 1.55; max-width: 48ch; margin-left: auto; margin-right: auto; }
#gwBody > p + p { margin-top: 12px; }
#gwBody > .gw-ticket + p { margin-top: 28px; }
#gwBody a:not(.gw-btn) { color: #fff; text-underline-offset: 3px; }
.gw-btns { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; margin-top: 28px; }
.gw-small { color: var(--faint); font-size: 14.5px; line-height: 1.45; }
.gw-offer { max-width: 540px; margin: 26px auto 0; padding: 20px 22px; border-radius: 18px; background: rgba(8, 20, 52, .42);
  border: 1.5px solid rgba(255, 255, 255, .16); }
.gw-offer p { margin: 0; }
.gw-offer b { color: var(--gold); }
.gw-offer .gw-btns { margin-top: 14px; }
.gw-offer .gw-small { margin-top: 12px; }
.gw-err { color: var(--err); font-weight: 650; font-size: 15.5px; }
.gw-err:empty { display: none; }
.gw-form { display: grid; gap: 20px; margin-top: 30px; text-align: left; }
.gw-form .gw-btns { justify-content: flex-start; margin-top: 6px; }
.gw-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.gw-field { display: grid; gap: 9px; min-width: 0; color: var(--cream); font: 740 12.5px/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; }
.gw-field select, .gw-field input {
  -webkit-appearance: none; appearance: none; width: 100%; height: 58px; padding: 0 46px 0 18px; border-radius: 16px;
  border: 2.5px solid var(--ink); background-color: var(--cream); color: var(--ink); box-shadow: 0 4px 0 var(--ink);
  font: 650 17px/1 var(--font); letter-spacing: -0.01em; text-transform: none; }
.gw-field select { cursor: pointer; background-repeat: no-repeat; background-position: right 18px center; background-size: 14px 9px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5l5.5 5.5 5.5-5.5' fill='none' stroke='%230b1020' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.gw-field input { padding-right: 18px; }
.gw-field select:disabled { opacity: .6; cursor: default; }
.gw-field option { color: var(--ink); background: #fff8ea; }
.gw-check { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; align-items: start; color: var(--muted);
  font-size: 16.5px; line-height: 1.5; cursor: pointer; }
.gw-check input { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin: 0; border-radius: 9px;
  border: 2.5px solid var(--ink); background: var(--cream); box-shadow: 0 3px 0 var(--ink); cursor: pointer;
  display: grid; place-content: center; transition: background-color .12s; }
.gw-check input::before { content: ''; width: 12px; height: 7px; border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
  transform: translateY(-2px) rotate(-45deg) scale(0); transition: transform .14s; }
.gw-check input:checked { background: var(--accent); }
.gw-check input:checked::before { transform: translateY(-2px) rotate(-45deg) scale(1); }
.gw-check a { color: #fff; text-underline-offset: 3px; }
.gw-q { margin-top: 10px; font: 900 clamp(32px, 6vw, 46px)/1.1 var(--font); letter-spacing: -0.03em; color: var(--cream);
  text-shadow: var(--outline); font-variant-numeric: tabular-nums; }
.gw-claim-lead { color: var(--muted); }

/* the ticket: a cream raffle stub with the entry number, punched where the stub tears off */
.gw-ticket { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 78px; max-width: 540px; margin: 30px auto 8px;
  background: var(--cream); color: var(--ink); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 8px 0 var(--ink);
  text-align: left; transform: rotate(-1.6deg); animation: gwTicket .7s cubic-bezier(.2, 1.4, .4, 1) both; }
.gw-ticket::before, .gw-ticket::after { content: ''; position: absolute; right: 64px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--sky); border: 3px solid var(--ink); }
.gw-ticket::before { top: -15px; }
.gw-ticket::after { bottom: -15px; }
.gw-ticket-main { display: grid; gap: 8px; padding: 24px 26px 22px; min-width: 0; }
.gw-ticket-k { font: 820 12px/1.2 var(--font); letter-spacing: .16em; text-transform: uppercase; color: #a04a1c; }
.gw-ticket .gw-num { font: 900 clamp(40px, 9vw, 62px)/1 var(--font); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink); overflow-wrap: anywhere; }
.gw-ticket-d { font: 640 14px/1.4 var(--font); color: #394057; }
.gw-ticket-stub { display: grid; place-items: center; border-left: 3px dashed var(--ink); }
.gw-ticket-stub span { writing-mode: vertical-rl; transform: rotate(180deg); font: 900 13px/1 var(--font); letter-spacing: .24em; text-transform: uppercase; }
.gw-ticket.out { filter: grayscale(.8); }

/* ---------- the winners, after the draw ---------- */
.gw-winners { padding-block: clamp(30px, 5vw, 60px) clamp(72px, 10vw, 120px); }
.gw-winners .gw-lead { overflow-wrap: anywhere; font-size: 15.5px; max-width: 70ch; }
.gw-reel { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 36px auto 0; }
.gw-reel b { font: 900 clamp(56px, 12vw, 124px)/1 var(--font); letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  color: var(--cream); text-shadow: var(--outline); }
.gw-reel span { color: var(--muted); font-weight: 680; font-size: 18px; }
.gw-winlist { list-style: none; margin: 40px auto 32px; padding: 0; max-width: 760px; text-align: left; }
.gw-winlist li { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'n name' 'n note';
  column-gap: 24px; row-gap: 4px; align-items: center; padding: 20px 4px; border-top: 1px solid var(--line); }
.gw-winlist li:last-child { border-bottom: 1px solid var(--line); }
.gw-winlist b { grid-area: n; font: 900 34px/1 var(--font); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; color: var(--gold); }
.gw-winlist span { grid-area: name; font-weight: 760; font-size: 19px; color: #fff; min-width: 0; }
.gw-winlist em { grid-area: note; font-style: normal; color: var(--faint); font-size: 14.5px; }

/* ---------- the draw: rows split by thin lines ---------- */
.gw-rows { list-style: none; margin: 34px 0 0; padding: 0; counter-reset: row; }
.gw-rows li { position: relative; counter-increment: row; padding: 22px 0 22px 58px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 16.5px; line-height: 1.55; min-width: 0; }
.gw-rows li:last-child { border-bottom: 1px solid var(--line); }
.gw-rows li::before { content: counter(row, decimal-leading-zero); position: absolute; left: 0; top: 25px;
  font: 860 14px/1.2 var(--font); letter-spacing: .14em; color: var(--gold); }
.gw-rows b { display: block; margin-bottom: 4px; color: #fff; font-weight: 760; font-size: 18px; letter-spacing: -0.02em; }
.gw-rows strong { color: #fff; font-variant-numeric: tabular-nums; }
.gw-rows a { color: var(--accent-hover); text-underline-offset: 3px; }
.gw-fp { display: block; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(8, 24, 58, .5);
  color: var(--cream); font: 600 13px/1.55 var(--mono); overflow-wrap: anywhere; }

/* ---------- questions: rows that open ---------- */
.gw-faq .gw-head { margin-bottom: 44px; }
.gw-faq details { border-top: 1px solid var(--line); }
.gw-faq details:last-of-type { border-bottom: 1px solid var(--line); }
.gw-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 2px; color: #fff; font: 740 clamp(18px, 2vw, 21px)/1.35 var(--font); letter-spacing: -0.02em; }
.gw-faq summary::-webkit-details-marker { display: none; }
.gw-faq summary::after { content: '+'; flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  border: 2px solid var(--line-2); color: #fff; font: 500 24px/1 var(--font); transition: transform .2s, background-color .2s; }
.gw-faq summary:hover::after { background: rgba(255, 255, 255, .1); }
.gw-faq details[open] summary::after { transform: rotate(45deg); }
.gw-faq details p { padding: 0 2px 26px; color: var(--muted); max-width: 64ch; font-size: 17px; line-height: 1.6; }

/* ---------- the finale: the town at midnight, its sky the page's own ---------- */
.gw-final { position: relative; padding-top: clamp(64px, 9vw, 120px); }
.gw-final .gw-btn { margin-top: 34px; }
.gw-final h2 { max-width: 16ch; margin-left: auto; margin-right: auto; }
.gw-band-art { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: 880px; object-fit: cover; object-position: 50% 72%;
  margin-top: clamp(-20px, -2vw, 0px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 3%); mask-image: linear-gradient(180deg, transparent 0, #000 3%); }

/* ---------- the footer: the ink under the hills ---------- */
.gw-foot { background: var(--ground); color: #b4c2dd; border-top: 3px solid var(--ink);
  padding-block: 44px calc(36px + env(safe-area-inset-bottom, 0px)); }
.gw-fine { font-size: 13.5px; line-height: 1.65; max-width: 112ch; }
.gw-fine a, .gw-foot-row a { color: #fff; }
.gw-foot-row { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between;
  margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 14px; }
.gw-foot-row nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.gw-foot-row a { text-decoration: none; color: #e0e9fb; }
.gw-foot-row a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- confetti, when an entry goes in ---------- */
.gw-confetti { position: fixed; inset: 0; z-index: 60; pointer-events: none; }

/* ---------- motion ---------- */
@keyframes gwShine { to { background-position: -200% 0; } }
@keyframes gwTwinkle { 0%, 100% { opacity: .75; } 50% { opacity: .5; } }
@keyframes gwTwinkleSoft { 0%, 100% { opacity: .4; } 50% { opacity: .26; } }
@keyframes gwFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(-1.6deg); } }
@keyframes gwShadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(.84); opacity: .7; } }
@keyframes gwDrift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-1.4%); } }
@keyframes gwRoll { to { transform: translateX(-50%); } }
@keyframes gwRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes gwTicket { from { opacity: 0; transform: rotate(-8deg) scale(.7); } to { opacity: 1; transform: rotate(-1.6deg) scale(1); } }
.gw-float { animation: gwFloat 6.5s ease-in-out infinite; }
.gw-float.b { animation-duration: 7.6s; animation-delay: -2.6s; }
.gw-float.c { animation-duration: 6.9s; animation-delay: -4.2s; }
.gw-hero .gw-rv { animation: gwRise .9s cubic-bezier(.2, .7, .2, 1) both; }
.gw-hero h1.gw-rv { animation-delay: .07s; }
.gw-hero .gw-sub { animation-delay: .14s; }
.gw-hero .gw-ctas { animation-delay: .2s; }
.gw-hero .gw-note { animation-delay: .26s; }
.gw-hero .gw-stage { animation-delay: .3s; animation-duration: 1.1s; }
@supports (animation-timeline: view()) {
  main > section:not(.gw-hero) .gw-rv { animation: gwRise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- smaller screens ---------- */
@media (max-width: 920px) {
  .gw-links { display: none; }
  .gw-split, .gw-split.rev { grid-template-columns: minmax(0, 1fr); }
  .gw-split.rev .gw-art { order: 0; }
  .gw-art { min-height: 0; }
  .gw-art .a { width: min(70%, 360px); }
  .gw-three { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-left: auto; margin-right: auto; }
  .gw-three li { display: grid; grid-template-columns: 108px minmax(0, 1fr); grid-template-areas: 'img n' 'img h' 'img p';
    column-gap: 20px; align-items: start; text-align: left; padding: 28px 0; }
  .gw-three li + li { border-left: 0; border-top: 1px solid var(--line); }
  .gw-three img { grid-area: img; width: 108px; height: auto; max-width: none; margin: 0; }
  .gw-three .gw-n { grid-area: n; align-self: end; }
  .gw-three h3 { grid-area: h; margin-top: 8px; }
  .gw-three p { grid-area: p; margin-top: 6px; }
  .gw-clouds { width: 150%; margin: -15% 0 0 -25%; }
}
@media (max-width: 560px) {
  /* on a phone the words fill the screen: the sky's dots are fewer and softer behind them (13.14.5) */
  body.gw::before { background-size: 520px 520px; opacity: .4; animation-name: gwTwinkleSoft; }
  .gw-sub, .gw-lead, .gw-note { text-shadow: 0 0 14px var(--sky), 0 0 5px var(--sky); }
  .gw-nav-in { height: 60px; gap: 8px; }
  .gw-brand { font-size: 17.5px; gap: 8px; }
  .gw-brand img { width: 26px; height: 26px; }
  .gw-signin { display: none; }
  .gw-hero h1 { font-size: clamp(44px, 13.4vw, 64px); }
  .gw-ctas { flex-direction: column; align-items: stretch; max-width: 380px; margin-left: auto; margin-right: auto; }
  .gw-strip > div { gap: 10px; }
  .gw-strip span { font-size: 10.5px; letter-spacing: .12em; }
  .gw-row { grid-template-columns: minmax(0, 1fr); }
  .gw-facts dt { font-size: 28px; }
  .gw-facts div:nth-child(even) { padding-left: 16px; }
  .gw-facts div { padding-right: 12px; }
  .gw-rows li { padding-left: 46px; }
  .gw-ticket { grid-template-columns: minmax(0, 1fr) 62px; }
  .gw-ticket::before, .gw-ticket::after { right: 48px; }
  .gw-ticket-main { padding: 20px 18px 18px; }
  .gw-btns .gw-btn { flex: 1 1 auto; }
  .gw-band-art { aspect-ratio: 1 / 1; object-position: 50% 50%; }
}