/* The Ticket Booth (raffle.html): the X whitelist raffle. The site's packaging language (sticker titles, kraft board,
   packing tape, rubber stamps, the dock's labels and buttons) with a fairground ticket booth under a spot at the top.
   Fonts and brand colours match src/config.js. */

:root {
  --ink: #14110d;
  --ink-2: #4b443a;
  --ink-3: #7d7466;
  --paper: #fbf6e6;
  --paper-2: #f0e9d6;
  --rule: #d9d0bb;
  --kraft: #c8a479;
  --kraft-hi: #dcc19b;
  --kraft-lo: #a98458;
  --dark: #1a140d;
  --stage: #120b06;
  --night: #0d0911;
  --accent: #57b947;
  --accent-hi: #7ad866;
  --accent-dark: #2f7d2a;
  --red: #d63a2c;
  --ticket: #ff5a46;
  --orange: #d8791c;
  --blue: #2456c4;
  --gold: #e8b84a;
  --tape-y: #ffd24a;

  --f-logo: 'Bagel Fat One', 'Arial Black', sans-serif;
  --f-block: 'Bungee', 'Arial Black', sans-serif;
  --f-ui: 'Fredoka', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --gutter: clamp(14px, 3.4vw, 44px);
  --maxw: 1180px;
  --demo-h: 0px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --hard: 0 5px 0 rgb(20 12 4 / .3);
  --lift: 0 5px 0 rgb(20 12 4 / .3), 0 22px 28px -20px rgb(52 30 8 / .55);
  --ease-back: cubic-bezier(.3, 1.5, .5, 1);
  /* paper grain over every printed card (fractal noise, faint warm ink) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .25 0 0 0 0 .12 0 0 0 .5 -.18'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  /* worn rubber: blotchy ink for the stamps (a mask: where it is thin the paper shows through) */
  --ink-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.09 .5' numOctaves='3' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 2.25'/%3E%3C/filter%3E%3Crect width='160' height='80' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  font: 400 16px/1.5 var(--f-ui);
  -webkit-font-smoothing: antialiased;
  background-color: var(--kraft);
  background-image:
    repeating-linear-gradient(90deg, rgb(255 255 255 / .045) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(0deg, rgb(70 40 10 / .03) 0 1px, transparent 1px 5px);
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--accent); color: #06130a; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 50; padding: 10px 14px; background: var(--ink); color: #fff; font: 400 13px/1 var(--f-block); text-decoration: none; border-radius: 8px; }
.skip:focus { top: 12px; }

/* out of the hub's dark curtain */
.arrive { position: fixed; inset: 0; z-index: 90; background: #000; opacity: 0; visibility: hidden; pointer-events: none; }
.from-dark .arrive { visibility: visible; animation: arrive-veil .6s ease-out .05s both; }
@keyframes arrive-veil { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }

/* ------------------------------------------------------------- shared bits */

.h-block { font: 400 clamp(25px, 3.5vw, 44px)/.98 var(--f-block); letter-spacing: .005em; text-transform: uppercase; text-wrap: balance; }
.h-block--light { color: #fff; }

.chip {
  display: inline-block;
  padding: .5em .7em .42em;
  border: 2px solid var(--ink);
  border-radius: .5em;
  background: #fff;
  box-shadow: 0 0 0 2px #fff, 0 4px 0 2px rgb(0 0 0 / .28);
  font: 400 clamp(10px, 1.05vw, 13px)/1 var(--f-block);
  letter-spacing: .07em;
  text-transform: uppercase;
  rotate: -2deg;
}
.chip--green { background: var(--accent); rotate: 1.5deg; }
.chip--tape { background: var(--tape-y); rotate: -1deg; }

.btn-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .58em 1.1em .5em .7em;
  border: 3px solid #050505;
  border-radius: .42em .9em .9em .42em;
  background: linear-gradient(var(--accent-hi), var(--accent) 55%, #4aa83b);
  box-shadow: 0 0 0 3px #fff, 0 6px 0 3px rgb(0 0 0 / .34);
  font: 400 clamp(17px, 1.7vw, 24px)/1 var(--f-logo);
  color: #081606;
  text-decoration: none;
  rotate: -2deg;
  transition: rotate .35s var(--ease-out), translate .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.btn-tag:hover, .btn-tag:focus-visible { rotate: -.5deg; translate: 0 -3px; box-shadow: 0 0 0 3px #fff, 0 9px 0 3px rgb(0 0 0 / .3); }
.btn-tag:active { translate: 0 2px; box-shadow: 0 0 0 3px #fff, 0 3px 0 3px rgb(0 0 0 / .34); transition-duration: .08s; }
.btn-tag__hole { flex: none; width: .5em; height: .5em; border-radius: 50%; background: #050505; box-shadow: inset 0 .08em .1em rgb(255 255 255 / .25), 0 0 0 .1em rgb(0 0 0 / .18); }
/* a glint runs across the tag when it is pointed at */
.btn-tag::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / .55) 50%, transparent 62%) no-repeat; background-size: 250% 100%; background-position: 130% 0; pointer-events: none; }
.btn-tag:hover::after, .btn-tag:focus-visible::after { background-position: -40% 0; transition: background-position .7s var(--ease-out); }

.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .72em 1.1em .64em;
  border: 2px solid rgb(255 255 255 / .92);
  border-radius: 999px;
  background: rgb(10 6 2 / .66);
  font: 400 clamp(11.5px, 1vw, 14px)/1 var(--f-block);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  transition: background-color .25s ease, translate .3s var(--ease-out);
}
.btn-pill::after { content: '\2193' / ''; font: 700 1.15em/1 var(--f-mono); translate: 0 -.04em; transition: translate .3s var(--ease-out); }
.btn-pill:hover::after, .btn-pill:focus-visible::after { translate: 0 .16em; }
.btn-pill--ink:hover::after, .btn-pill--ink:focus-visible::after { translate: .18em -.04em; }
.btn-pill:hover, .btn-pill:focus-visible { background: rgb(10 6 2 / .9); translate: 0 -2px; }
.btn-pill--ink { border-color: var(--ink); background: var(--ink); }
.btn-pill--ink::after { content: '\2192' / ''; }

.btn-ink {
  flex: none;
  padding: .86em 1.5em .76em;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: var(--ink);
  box-shadow: var(--hard);
  font: 400 16px/1 var(--f-block);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
  transition: translate .18s var(--ease-out), box-shadow .18s var(--ease-out), background-color .2s ease, opacity .2s ease;
}
.btn-ink:hover:not(:disabled) { background: #2a231a; translate: 0 -2px; box-shadow: 0 7px 0 rgb(20 12 4 / .3); }
.btn-ink:active:not(:disabled) { translate: 0 3px; box-shadow: 0 2px 0 rgb(20 12 4 / .3); transition-duration: .06s; }
.btn-ink:disabled { cursor: default; opacity: .5; box-shadow: none; }
.btn-ink:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.btn-ink--green { background: var(--accent); color: #07150a; }
.btn-ink--green:hover:not(:disabled) { background: var(--accent-hi); }
.btn-ink--small { padding: .72em 1em .62em; font-size: 12.5px; border-radius: 10px; box-shadow: 0 3px 0 rgb(20 12 4 / .28); }
.btn-ink.is-busy { position: relative; color: transparent; }
.btn-ink.is-busy::after { content: ''; position: absolute; inset: 0; margin: auto; width: 1.1em; height: 1.1em; border: 3px solid currentColor; border-color: #07150a #07150a transparent transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }

.link-btn {
  padding: 2px 0;
  border: 0;
  background: none;
  font: 600 13px/1.3 var(--f-ui);
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: rgb(20 17 13 / .4);
  text-underline-offset: 3px;
}
.link-btn:hover { color: var(--accent-dark); text-decoration-color: currentColor; }

/* ------------------------------------------------------------- demo banner */

.demo {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px var(--gutter);
  background: repeating-linear-gradient(-45deg, #ffd24a 0 16px, #f2c234 16px 32px);
  border-bottom: 3px solid var(--ink);
  font: 600 13px/1.35 var(--f-ui);
  color: var(--ink);
}
.demo__tag { flex: none; padding: .38em .6em .3em; border: 2px solid var(--ink); border-radius: 6px; background: var(--ink); font: 400 11px/1 var(--f-block); letter-spacing: .08em; text-transform: uppercase; color: var(--tape-y); }

/* --------------------------------------------------------------------- top */

.top {
  position: absolute;
  top: var(--demo-h);
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: max(14px, env(safe-area-inset-top)) var(--gutter) 0;
  pointer-events: none;
}
.top > * { pointer-events: auto; }
.nav { display: flex; align-items: center; gap: clamp(5px, .8vw, 10px); }
.nav__link {
  padding: .72em .9em .62em;
  border: 2px solid var(--ink);
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 3px 0 rgb(0 0 0 / .32);
  font: 400 clamp(10.5px, 1.24vw, 16.9px)/1 var(--f-block);
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink);
  transition: translate .2s var(--ease-out), background-color .2s ease, box-shadow .2s var(--ease-out);
}
.nav__link:hover, .nav__link:focus-visible { translate: 0 -2px; background: #f3ffe9; box-shadow: 0 5px 0 rgb(0 0 0 / .3); }
.nav__link[aria-current='page'] { background: var(--accent); }
.top :focus-visible { outline-color: #fff; box-shadow: 0 0 0 6px var(--blue); }

/* -------------------------------------------------------------------- hero */

/* The 3D booth at night, full bleed (src/raffle/scene). While it loads the stage is one big ticket being printed (the
   loader: markup and styles inlined in raffle.html). Below the canvas, what the ticket tears onto without WebGL: the
   night over the square, the booth's warm glow on the right. Wide heroes: the copy on the left over the dark sky (a
   scrim keeps it legible), the booth on the right. Tall heroes: the stage on top, the copy under it. */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(560px, calc(var(--vh, 1vh) * 100 - var(--demo-h)), 980px);
  color: #fff;
  background: var(--night);
  isolation: isolate;
}
.hero__stage {
  position: absolute;
  inset: 0;
  z-index: auto; /* (no stacking context of its own: the loader's ticket lies over the copy on a wide hero) */
  overflow: hidden;
  background:
    radial-gradient(30% 42% at 68% 52%, rgb(255 190 110 / .42), rgb(255 150 80 / .12) 55%, transparent 75%),
    radial-gradient(60% 30% at 60% 100%, rgb(120 60 40 / .5), transparent 70%),
    linear-gradient(#06070f 0, #120c1c 46%, #2a1622 70%, #1a1012 100%);
}
.hero__gl { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease; }
.is-live .hero__gl { opacity: 1; }
.is-flat .hero__gl { display: none; }
.is-check .hero__gl, .hero__stage:has(.tkl) .hero__gl { transition: none; }
/* phones draw without the post chain: the vignette is laid on here */
.hero__stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(120% 95% at 55% 45%, transparent 50%, rgb(6 3 10 / .55));
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
}
.is-plain::before { opacity: 1; }
/* the copy's side of the night: a scrim from the left, the cobbles melting into the page at the foot */
.hero__stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgb(8 5 14 / .78) 0, rgb(8 5 14 / .55) 24%, rgb(8 5 14 / .16) 44%, transparent 58%),
    linear-gradient(to top, var(--kraft) 0, rgb(200 164 121 / .62) 4%, rgb(40 24 20 / .35) 11%, transparent 22%);
  pointer-events: none;
}
.hero__copy {
  position: relative;
  z-index: 2;
  width: min(48%, 600px);
  margin-left: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  padding: calc(clamp(84px, 9vw, 120px)) 0 clamp(90px, 10vw, 140px);
  pointer-events: none;
}
.hero__copy > * > * { pointer-events: auto; }
/* (as wide as its chips: the scene measures the copy's right edge to place the booth beside it) */
.hero__kicker { display: flex; flex-wrap: wrap; gap: 10px 12px; width: max-content; max-width: 100%; margin-bottom: clamp(14px, 1.8vw, 22px); color: var(--ink); }
.hero__title {
  font: 400 clamp(46px, 6.6vw, 104px)/.86 var(--f-logo);
  letter-spacing: -.015em;
  text-transform: uppercase;
  color: #fff;
  filter: drop-shadow(.045em 0 0 #fff) drop-shadow(-.045em 0 0 #fff) drop-shadow(0 .045em 0 #fff) drop-shadow(0 -.045em 0 #fff) drop-shadow(0 .09em 0 rgb(0 0 0 / .5)) drop-shadow(0 .3em .5em rgb(0 0 0 / .45));
  rotate: -2deg;
  transform-origin: 0 100%;
}
.stk { position: relative; display: inline-block; isolation: isolate; white-space: nowrap; }
.stk::before { content: attr(data-text); position: absolute; inset: 0; z-index: -1; color: #000; -webkit-text-stroke: .19em #000; }
.stk--green { color: var(--accent); }
.hero__title .stk { display: block; width: max-content; }
.hero__row { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(18px, 2vw, 26px); margin-top: clamp(22px, 2.6vw, 34px); }
.hero__lede { max-width: 30em; font: 600 clamp(14.5px, 1.3vw, 18px)/1.5 var(--f-ui); color: #f6ecdc; text-shadow: 0 1px 2px rgb(0 0 0 / .7), 0 2px 18px rgb(0 0 0 / .65); text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }

/* First paint: the stickers are slapped on, the copy rises (once the faces they are set in have loaded). */
@keyframes slap { 0% { opacity: 0; scale: 1.2; rotate: -7deg; } 55% { opacity: 1; scale: .975; rotate: -1.3deg; } 100% { opacity: 1; scale: 1; rotate: -2deg; } }
@keyframes pop { 0% { opacity: 0; scale: .5; } 70% { opacity: 1; scale: 1.08; } 100% { opacity: 1; scale: 1; } }
@keyframes rise { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
.hero__title { animation: slap .75s var(--ease-out) .15s both; }
.hero__kicker .chip { animation: pop .5s var(--ease-out) .5s both; }
.hero__kicker .chip:nth-child(2) { animation-delay: .6s; }
.hero__kicker .chip:nth-child(3) { animation-delay: .7s; }
.hero__lede { animation: rise .8s var(--ease-out) .6s both; }
.hero__actions { animation: rise .8s var(--ease-out) .72s both; }
.top .brand, .top .nav { animation: rise .7s var(--ease-out) .05s both; }
html:not(.fonts-in) .hero__title, html:not(.fonts-in) .hero__kicker .chip, html:not(.fonts-in) .hero__lede,
html:not(.fonts-in) .hero__actions, html:not(.fonts-in) .top .brand, html:not(.fonts-in) .top .nav { animation-play-state: paused; }
/* On a wide hero the loader's ticket covers the copy too: the stickers are slapped on as it tears (html.is-torn). */
@media (min-width: 761px) and (orientation: landscape), (min-width: 1101px) {
  html:not(.is-torn) .hero__title, html:not(.is-torn) .hero__kicker .chip, html:not(.is-torn) .hero__lede, html:not(.is-torn) .hero__actions { animation-play-state: paused; }
}
/* ------------------------------------------------------------------ ticket */

/* The entry ticket: real ticket stock. A cream card with a fine grain and a faint printed safety pattern, a red band
   along its top, the stub of red stock behind a row of punched holes, round notches where the stub tears off. The five
   steps are lines of the form, each with a printed box a rubber stamp lands in when the step is verified. */
.tix { position: relative; z-index: 3; max-width: var(--maxw); margin: clamp(-64px, -5vw, -36px) auto 0; padding: 0 var(--gutter); scroll-margin-top: 20px; }
.ticket {
  --stub: clamp(168px, 19%, 228px);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--stub);
  filter: drop-shadow(0 5px 0 rgb(20 12 4 / .32)) drop-shadow(0 28px 26px rgb(40 22 6 / .38));
}
.ticket__main, .ticket__stub { position: relative; border: 3px solid var(--ink); }
.ticket__main {
  padding: clamp(26px, 3vw, 42px) clamp(18px, 2.8vw, 40px) clamp(16px, 2vw, 26px);
  border-right: 0;
  border-radius: 18px 0 0 18px;
  background:
    var(--grain),
    repeating-linear-gradient(-32deg, rgb(201 48 42 / .016) 0 1px, transparent 1px 7px),
    radial-gradient(90% 70% at 10% 0, rgb(255 255 255 / .7), transparent 60%),
    linear-gradient(176deg, #fffdf6, var(--paper) 38%, #f2e8cd);
  -webkit-mask: radial-gradient(circle 17px at 100% 0, transparent 16px, #000 16.5px) top / 100% 51% no-repeat, radial-gradient(circle 17px at 100% 100%, transparent 16px, #000 16.5px) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle 17px at 100% 0, transparent 16px, #000 16.5px) top / 100% 51% no-repeat, radial-gradient(circle 17px at 100% 100%, transparent 16px, #000 16.5px) bottom / 100% 51% no-repeat;
}
/* the red band, printed with the booth's number */
.ticket__main::before {
  content: 'No. 007 \2022  X raffle \2022  admit one \2022  No. 007 \2022  X raffle \2022  admit one \2022  No. 007 \2022  X raffle \2022  admit one \2022  No. 007 \2022  X raffle \2022  admit one';
  position: absolute;
  inset: 0 0 auto 0;
  height: 15px;
  padding-left: 16px;
  overflow: hidden;
  background: linear-gradient(var(--red), #a8231d);
  font: 400 8.5px/15px var(--f-block);
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgb(255 236 214 / .85);
  border-radius: 15px 0 0 0;
}
.ticket__stub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 14px 30px;
  border-left: 0;
  border-radius: 0 18px 18px 0;
  background:
    var(--grain),
    repeating-linear-gradient(0deg, rgb(255 255 255 / .07) 0 2px, transparent 2px 7px),
    radial-gradient(120% 60% at 50% 0, rgb(255 210 180 / .35), transparent 70%),
    linear-gradient(172deg, #ff7a5c, var(--ticket) 46%, #db412e);
  color: var(--ink);
  text-align: center;
  -webkit-mask: radial-gradient(circle 17px at 0 0, transparent 16px, #000 16.5px) top / 100% 51% no-repeat, radial-gradient(circle 17px at 0 100%, transparent 16px, #000 16.5px) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle 17px at 0 0, transparent 16px, #000 16.5px) top / 100% 51% no-repeat, radial-gradient(circle 17px at 0 100%, transparent 16px, #000 16.5px) bottom / 100% 51% no-repeat;
}
/* the perforation: a row of punched holes down the stub's edge, the inked tear line beside them */
.ticket__stub::before {
  content: '';
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: -1px;
  width: 12px;
  background: radial-gradient(circle at 6px 7px, rgb(64 36 14 / .9) 2.4px, rgb(255 255 255 / .35) 3px, transparent 3.6px) 0 0 / 12px 14px repeat-y;
}
.ticket__stub::after { content: ''; position: absolute; top: 18px; bottom: 18px; left: 0; border-left: 2px dashed rgb(42 11 7 / .55); }
/* the notches' rims (the holes themselves are cut by the masks) */
.ticket__notch { position: absolute; z-index: 2; left: calc(100% - var(--stub)); width: 34px; height: 34px; margin-left: -17px; border: 3px solid var(--ink); border-radius: 50%; pointer-events: none; }
.ticket__notch--t { top: -17px; clip-path: inset(50% 0 0 0); }
.ticket__notch--b { bottom: -17px; clip-path: inset(0 0 50% 0); }
.stub__admit { font: 400 clamp(26px, 2.6vw, 34px)/.84 var(--f-logo); text-transform: uppercase; letter-spacing: -.01em; color: #fff6e6; -webkit-text-stroke: .08em var(--ink); paint-order: stroke fill; text-shadow: 0 .07em 0 var(--ink); rotate: -4deg; }
.stub__no { padding: .42em .7em .36em; border: 2px solid var(--ink); border-radius: 6px; background: #fff6e6; font: 700 13px/1 var(--f-mono); letter-spacing: .14em; color: var(--red); box-shadow: 0 2px 0 rgb(42 11 7 / .35); }
.stub__count { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: auto 0; }
.stub__count[hidden] { display: none; } /* (the owner removed the entries count) */
.stub__count b { font: 400 clamp(38px, 4vw, 56px)/.9 var(--f-logo); color: #fff; -webkit-text-stroke: .07em var(--ink); paint-order: stroke fill; text-shadow: 0 .06em 0 var(--ink); font-variant-numeric: tabular-nums; }
.stub__count span { font: 400 11px/1.2 var(--f-block); letter-spacing: .08em; text-transform: uppercase; }
.stub__code { display: block; width: 76%; height: 30px; margin-top: 4px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 5px, var(--ink) 5px 6px, transparent 6px 10px, var(--ink) 10px 13px, transparent 13px 15px, var(--ink) 15px 16px, transparent 16px 19px); opacity: .82; }
/* ENTERED / WINNER: a big rubber stamp across the stub */
.stub__stamp {
  position: absolute;
  left: 50%;
  top: 32%;
  z-index: 2;
  padding: 5px;
  border: 3px solid currentColor;
  border-radius: 10px;
  translate: -50% -50%;
  rotate: -14deg;
  color: #0e4a10;
  background: rgb(240 255 232 / .22);
  -webkit-mask: var(--ink-mask);
  mask: var(--ink-mask);
  pointer-events: none;
}
.stub__stamp::before { content: ''; position: absolute; inset: 3px; border: 1.5px solid currentColor; border-radius: 6px; }
.stub__stamp { font: 400 clamp(17px, 1.7vw, 22px)/1 var(--f-block); letter-spacing: .1em; text-transform: uppercase; padding: .5em .7em .44em; }
.stub__stamp[data-kind='won'] { color: #6b4a00; background: rgb(255 238 160 / .55); }
.stub__stamp.is-fresh { animation: stamp-land .5s cubic-bezier(.3, .9, .4, 1) .1s both; }

.ticket__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; padding-bottom: clamp(12px, 1.4vw, 16px); border-bottom: 3px solid var(--ink); }
.ticket__admit { font: 400 clamp(28px, 3.3vw, 44px)/1 var(--f-logo); text-transform: uppercase; letter-spacing: .01em; }
.ticket__sub { font: 400 clamp(10px, 1vw, 12.5px)/1.2 var(--f-block); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.ticket__serial { display: flex; align-items: center; gap: 8px; margin-left: auto; font: 700 11.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.ticket__serial span:last-child { padding: .38em .6em .32em; border: 2px solid var(--red); border-radius: 5px; font-size: 13px; color: var(--red); }

/* the five steps: a numbered line each, the stamp box on the right */
.steps { display: grid; counter-reset: step; }
.step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 124px;
  grid-template-areas: 'n text act stamp';
  align-items: center;
  gap: 8px clamp(12px, 1.6vw, 22px);
  padding: clamp(13px, 1.5vw, 18px) 0;
  background: radial-gradient(circle, rgb(20 17 13 / .28) 1px, transparent 1.4px) 0 100% / 7px 3px repeat-x;
  transition: background-color .3s ease;
}
.step:last-child { background: none; }
.steps[data-refused] .step:not([data-step='connect']) { opacity: .5; }
.step__n {
  grid-area: n;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: #fff;
  font: 400 17px/1 var(--f-block);
  box-shadow: 0 3px 0 rgb(0 0 0 / .2), inset 0 -3px 0 rgb(0 0 0 / .06);
  transition: background-color .3s ease, rotate .4s var(--ease-back);
}
.step[data-state='ok'] .step__n { background: var(--accent); rotate: -8deg; }
.step[data-state='missing'] .step__n, .step[data-state='refused'] .step__n { background: #ffe1db; }
.step__text { grid-area: text; min-width: 0; }
.step__title { font: 400 clamp(14px, 1.35vw, 18px)/1.2 var(--f-block); letter-spacing: .02em; text-transform: uppercase; overflow-wrap: anywhere; }
.step[data-state='ok'] .step__title { color: var(--accent-dark); }
.step__hint { margin-top: 4px; font: 400 13.5px/1.4 var(--f-ui); color: var(--ink-2); }
.step__msg { margin-top: 6px; display: flex; gap: .5em; align-items: baseline; font: 600 13px/1.35 var(--f-ui); color: var(--ink); }
.step__msg::before { content: ''; flex: none; width: .5em; height: .5em; border-radius: 50%; background: currentColor; translate: 0 -.05em; }
.step__msg[data-kind='missing'], .step__msg[data-kind='refused'] { color: #9c1f15; }
.step__msg[data-kind='error'] { color: #8a4a06; }
.step__msg[data-kind='ok'] { color: var(--accent-dark); }
.step__msg:empty { display: none; }
.step__act { grid-area: act; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; }
.step__who { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 5px 12px 5px 5px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; box-shadow: 0 2px 0 rgb(0 0 0 / .15); }
.step__avatar { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 2.5px solid var(--ink); border-radius: 50%; background: var(--accent); font: 400 14px/1 var(--f-block); text-transform: uppercase; }
.step__handle { font: 700 14px/1.2 var(--f-mono); overflow-wrap: anywhere; }
.step__name { font: 400 12.5px/1.2 var(--f-ui); color: var(--ink-3); }

/* the X buttons: a black pill with the X mark (opens x.com in a new tab) */
.btn-x {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .7em 1em .6em .8em;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  box-shadow: 0 3px 0 rgb(0 0 0 / .25);
  font: 400 12.5px/1 var(--f-block);
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
  transition: translate .18s var(--ease-out), box-shadow .18s var(--ease-out), background-color .2s ease;
}
.btn-x:hover:not(:disabled), .btn-x:focus-visible { translate: 0 -2px; box-shadow: 0 5px 0 rgb(0 0 0 / .25); background: #2a231a; }
.btn-x:active:not(:disabled) { translate: 0 2px; box-shadow: 0 1px 0 rgb(0 0 0 / .25); transition-duration: .06s; }
.btn-x:disabled { cursor: default; opacity: .5; }
.btn-x__mark { display: grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%; background: #fff; font: 800 .82em/1 var(--f-ui); color: var(--ink); }
.btn-x__go { font: 700 1.05em/1 var(--f-mono); transition: translate .2s var(--ease-out); }
.btn-x:hover .btn-x__go { translate: .12em -.12em; }
.btn-x--light { background: #fff; color: var(--ink); }
.btn-x--light .btn-x__mark { background: var(--ink); color: #fff; }
.btn-x--light:hover:not(:disabled), .btn-x--light:focus-visible { background: #f3ffe9; }
.btn-x--big { padding: .85em 1.25em .75em 1em; font-size: 14px; }
/* demo mode: the action happens on the fake X */
.btn-demo {
  padding: .66em .9em .56em;
  border: 2.5px dashed var(--ink);
  border-radius: 999px;
  background: var(--tape-y);
  font: 400 11.5px/1 var(--f-block);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .2s ease, translate .18s var(--ease-out);
}
.btn-demo:hover:not(:disabled) { background: #ffe07a; translate: 0 -1px; }
.btn-demo:disabled:not([aria-pressed='true']) { cursor: default; opacity: .55; }
.btn-demo[aria-pressed='true'] { border-style: solid; background: #e9f7e3; color: var(--accent-dark); cursor: default; }

/* the wallet field */
.wallet { display: flex; flex-wrap: wrap; gap: 8px; width: min(100%, 480px); }
.wallet__input {
  flex: 1 1 260px;
  min-width: 0;
  min-height: 46px;
  padding: 10px 13px;
  border: 3px solid var(--ink);
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 3px 0 rgb(0 0 0 / .07);
  font: 700 14px/1.2 var(--f-mono);
  letter-spacing: -.01em;
  appearance: none;
  transition: box-shadow .2s ease, background-color .2s ease;
}
.wallet__input:hover:not(:disabled) { background: #fffef9; }
.wallet__input::placeholder { color: #8a8273; font-weight: 400; }
.wallet__input:focus-visible { outline: 0; box-shadow: inset 0 3px 0 rgb(0 0 0 / .07), 0 0 0 3px var(--paper), 0 0 0 6px var(--accent-dark); }
.wallet__input[aria-invalid='true'] { border-color: var(--red); background: #fff4f2; }
.wallet__input[aria-invalid='true']:focus-visible { box-shadow: inset 0 3px 0 rgb(0 0 0 / .07), 0 0 0 3px var(--paper), 0 0 0 6px var(--red); }
.wallet__input:disabled { background: #f4efe2; color: var(--ink-3); }
.wallet__saved { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.wallet__addr { padding: .45em .65em .36em; border: 2px solid var(--ink); border-radius: 8px; background: #fff; font: 700 14px/1.2 var(--f-mono); box-shadow: 0 2px 0 rgb(0 0 0 / .15); }
.wallet--proof { align-items: center; gap: 8px 12px; }
.wallet__tag { padding: .3em .55em .22em; border: 2px solid var(--ink); border-radius: 999px; background: #e6f6dd; font: 700 11px/1.1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.wallet__left { font: 400 12px/1.2 var(--f-mono); color: var(--ink-3); }
.step--wallet { grid-template-columns: 44px minmax(0, 1fr) 124px; grid-template-areas: 'n text stamp' 'n act stamp'; }
.step--wallet .step__act { justify-content: flex-start; }

/* The stamp box: a printed box, "stamp" in faint ink, until a rubber stamp lands in it. The stamp: a double inked
   border, worn rubber (the ink does not take evenly), struck at an angle. A new one lands with a thump. */
.stamp-box { grid-area: stamp; position: relative; display: grid; place-items: center; width: 118px; height: 64px; border: 2px dashed #c9bea4; border-radius: 10px; background: rgb(255 255 255 / .35); }
.stamp-box__wait { font: 400 9.5px/1 var(--f-block); letter-spacing: .26em; text-transform: uppercase; color: #c3b799; }
.stamp {
  position: relative;
  padding: 4px;
  border: 3px solid currentColor;
  border-radius: 9px;
  color: var(--ink-3);
  rotate: -8deg;
  -webkit-mask: var(--ink-mask);
  mask: var(--ink-mask);
}
.stamp__face { display: block; padding: .42em .55em .34em; border: 1.5px solid currentColor; border-radius: 5px; font: 400 15px/1 var(--f-block); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.stamp[data-kind='ok'] { color: #1f7a22; background: rgb(87 185 71 / .1); }
.stamp[data-kind='ok'] .stamp__face::before { content: '\2713\00a0' / ''; }
.stamp[data-kind='missing'], .stamp[data-kind='refused'], .stamp[data-kind='locked'] { color: #c22a1d; rotate: 6deg; background: rgb(214 58 44 / .07); }
.stamp[data-kind='error'] { color: #c76a0e; rotate: 4deg; }
.stamp[data-kind='won'] { color: #7a5200; background: rgb(255 226 120 / .5); }
.stamp.is-fresh { animation: stamp-land .48s cubic-bezier(.3, .9, .4, 1) var(--d, 0s) both; }
.stamp.is-fresh::after { content: ''; position: absolute; inset: -10px; border: 2px solid currentColor; border-radius: 14px; opacity: 0; animation: stamp-ring .5s ease-out calc(var(--d, 0s) + .22s) both; }
@keyframes stamp-land { 0% { opacity: 0; scale: 1.9; } 55% { opacity: 1; scale: .93; } 75% { scale: 1.03; } 100% { opacity: 1; scale: 1; } }
@keyframes stamp-ring { 0% { opacity: .5; scale: .9; } 100% { opacity: 0; scale: 1.25; } }

.ticket__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: clamp(14px, 1.6vw, 18px); padding-top: clamp(14px, 1.6vw, 18px); border-top: 3px solid var(--ink); }
.status { flex: 1 1 280px; position: relative; padding-left: 22px; font: 600 clamp(14px, 1.2vw, 16px)/1.4 var(--f-ui); }
.status::before { content: ''; position: absolute; left: 0; top: .42em; width: 12px; height: 12px; border: 2.5px solid var(--ink); border-radius: 50%; background: var(--tape-y); }
.status:empty::before { display: none; }
.status b { font-weight: 800; }
.status[data-kind='entered'] { color: var(--accent-dark); }
.status[data-kind='entered']::before { background: var(--accent); box-shadow: 0 0 0 4px rgb(87 185 71 / .22); }
.status[data-kind='refused'], .status[data-kind='error'] { color: #9c1f15; }
.status[data-kind='refused']::before, .status[data-kind='error']::before { background: var(--red); }
.status small { display: block; margin-top: 3px; font: 400 13px/1.4 var(--f-ui); color: var(--ink-2); }
.ticket__fine { margin-top: 14px; padding-top: 10px; border-top: 1px dashed #d4c8aa; font: 400 12px/1.5 var(--f-mono); color: var(--ink-3); }
.ticket__links { white-space: nowrap; }
.ticket__links .link-btn { font-size: 12.5px; }

/* the booth is closed: its roller shutter, a CLOSED sign, a note */
.closed {
  position: relative;
  padding: clamp(34px, 4vw, 52px) clamp(18px, 3vw, 40px);
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: linear-gradient(rgb(0 0 0 / .12), transparent 30%, rgb(0 0 0 / .2)), repeating-linear-gradient(0deg, #9a8466 0 4px, #c2ac88 4px 14px, #8c7558 14px 17px, #4e3f2c 17px 18px);
  box-shadow: var(--lift);
  text-align: center;
  color: #fff;
}
.closed .h-block { display: inline-block; padding: .3em .6em .26em; border: 3px solid var(--ink); border-radius: 10px; background: var(--red); color: #fff6e6; -webkit-text-stroke: .04em var(--ink); paint-order: stroke fill; rotate: -2deg; box-shadow: 0 4px 0 rgb(0 0 0 / .35); }
.closed__text { max-width: 34em; margin: 18px auto 20px; padding: 12px 16px; border-radius: 10px; background: rgb(20 12 4 / .78); font: 600 15px/1.45 var(--f-ui); }
.closed .btn-ink { background: #fff6e6; color: var(--ink); }
.closed .btn-ink:hover:not(:disabled) { background: #fff; }
[data-phase='closed'] .ticket { display: none; }

/* ------------------------------------------------------------------ result */

/* after the draw the result comes first, right under the hero */
main { display: flex; flex-direction: column; }
main > section { width: 100%; }
.hero { order: -2; }
[data-phase='drawn'] .result { order: -1; margin-top: clamp(-64px, -5vw, -36px); position: relative; z-index: 3; }
[data-phase='drawn'] .tix { margin-top: clamp(40px, 5vw, 64px); }
[data-phase='drawn'] .result > .h-block { color: #fff; -webkit-text-stroke: .05em var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); }

.result { max-width: var(--maxw); margin: clamp(40px, 5vw, 64px) auto 0; padding: 0 var(--gutter); }
.outcome {
  position: relative;
  margin-top: clamp(14px, 1.8vw, 22px);
  padding: clamp(22px, 2.8vw, 34px) clamp(18px, 2.6vw, 34px);
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: var(--grain), linear-gradient(176deg, #fffdf6, var(--paper) 40%, #f2e8cd);
  box-shadow: var(--lift);
}
.outcome:empty { display: none; }
.outcome__title { max-width: 14em; font: 400 clamp(30px, 4vw, 56px)/.92 var(--f-logo); text-transform: uppercase; text-wrap: balance; }
.outcome__note { max-width: 40em; margin-top: 12px; font: 600 15px/1.45 var(--f-ui); color: var(--ink-2); }
/* a winner's ticket: gold foil, a sheen across it */
.outcome[data-kind='won'] { background: var(--grain), radial-gradient(70% 120% at 85% 0, rgb(255 255 255 / .6), transparent 60%), linear-gradient(160deg, #fff4c2, #ffd960 48%, #f2b92e); overflow: hidden; }
.outcome[data-kind='won']::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgb(255 255 255 / .55) 50%, transparent 60%) no-repeat; background-size: 250% 100%; animation: foil 4.5s ease-in-out 1s infinite; pointer-events: none; }
@keyframes foil { 0% { background-position: 140% 0; } 45%, 100% { background-position: -50% 0; } }
.outcome[data-kind='won'] .outcome__title { color: var(--ink); }
.outcome[data-kind='lost'], .outcome[data-kind='dropped'] { background: var(--grain), repeating-linear-gradient(90deg, rgb(255 255 255 / .06) 0 2px, transparent 2px 9px), var(--kraft-hi); }
.outcome .stamp { position: absolute; right: clamp(14px, 2.4vw, 32px); top: clamp(14px, 2vw, 24px); }
.outcome .stamp__face { font-size: clamp(16px, 1.8vw, 24px); }
/* the draw receipt: a till slip, torn top and bottom; every line needed to re-run the draw */
.receipt {
  position: relative;
  max-width: 760px;
  margin: clamp(18px, 2.2vw, 26px) 0 0;
  padding: 22px clamp(16px, 2vw, 24px) 24px;
  background: var(--grain), repeating-linear-gradient(0deg, transparent 0 23px, rgb(20 17 13 / .04) 23px 24px), #fffdf4;
  font: 400 12px/1.5 var(--f-mono);
  color: var(--ink-2);
  filter: drop-shadow(0 4px 0 rgb(20 12 4 / .22)) drop-shadow(0 16px 18px rgb(40 22 6 / .25));
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
  -webkit-mask-composite: source-in;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
  mask-composite: intersect;
}
.receipt:empty { display: none; }
.receipt__head { display: flex; align-items: center; gap: .6em; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 2px dashed var(--ink); font: 400 12.5px/1 var(--f-block); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.receipt__head::before { content: ''; flex: none; width: .62em; height: .62em; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--ink); }
.receipt__list { display: grid; gap: 6px; }
.receipt__row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 2px 12px; align-items: baseline; }
.receipt__row dt { display: flex; gap: 6px; font: 400 10px/1.5 var(--f-block); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.receipt__row dt::after { content: ''; flex: 1; min-width: 8px; border-bottom: 1.5px dotted #b9ad92; translate: 0 -.3em; }
.receipt__row code { font: 700 12px/1.5 var(--f-mono); color: var(--ink); overflow-wrap: anywhere; user-select: all; }
.receipt__how { margin-top: 14px; padding-top: 10px; border-top: 2px dashed #c9bea4; }
.receipt::after { content: ''; display: block; height: 26px; margin-top: 14px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 5px, var(--ink) 5px 6px, transparent 6px 10px, var(--ink) 10px 13px, transparent 13px 15px); opacity: .7; }

/* ------------------------------------------------------------------- prize */

.prize { max-width: var(--maxw); margin: clamp(52px, 6.4vw, 88px) auto 0; padding: 0 var(--gutter); }
.prize__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; }
.prize__line { flex: 1 1 360px; max-width: 46em; font: 600 clamp(14px, 1.2vw, 16px)/1.45 var(--f-ui); color: var(--ink-2); }
.prize__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 22px); margin-top: clamp(18px, 2.2vw, 28px); counter-reset: tile; }
/* white shipping labels, as at the dock: a black bar with the label and its number, the figure, a perforated foot */
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: var(--grain), linear-gradient(175deg, #fffefa, var(--paper) 45%, #f6f2e6);
  box-shadow: var(--lift);
  overflow: hidden;
  rotate: -.7deg;
  counter-increment: tile;
  transition: rotate .4s var(--ease-out), translate .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.tile:nth-child(2) { rotate: .6deg; }
.tile:nth-child(3) { rotate: -.3deg; }
.tile:hover { rotate: 0deg; translate: 0 -4px; box-shadow: 0 9px 0 rgb(20 12 4 / .26), 0 30px 34px -22px rgb(52 30 8 / .6); }
.tile__label { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: .75em .9em .62em; background: var(--ink); font: 400 clamp(10px, .95vw, 12.5px)/1 var(--f-block); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.tile__label::after { content: '0' counter(tile) '/03' / ''; flex: none; font: 700 .86em/1 var(--f-mono); letter-spacing: .02em; color: var(--accent-hi); opacity: .9; }
.tile:first-child .tile__label { background: linear-gradient(var(--accent-dark) 0 12%, var(--accent) 12% 88%, var(--accent-dark) 88%); color: #06130a; }
.tile:first-child .tile__label::after { color: #06130a; opacity: .7; }
.tile__value { padding: .5em clamp(12px, 1.2vw, 16px) .3em; font: 400 clamp(22px, 2.6vw, 36px)/1.05 var(--f-block); letter-spacing: -.005em; }
/* nothing announced yet: a pencilled "to be announced" on a ruled line */
.tile__value[data-tba] { display: flex; align-items: center; gap: .6em; margin: .9em clamp(12px, 1.2vw, 16px) .55em; padding: .5em .7em .44em; border: 2px dashed #b9ad92; border-radius: 8px; font: 700 clamp(12px, 1.1vw, 14px)/1.25 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.tile__value[data-tba]::before { content: ''; flex: none; width: .6em; height: .6em; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 .2em rgb(216 121 28 / .22); }
.tile__note { margin: auto clamp(12px, 1.2vw, 16px) 0; padding: .62em 0 .85em; border-top: 2px dashed var(--rule); font: 400 clamp(10.5px, .9vw, 12px)/1.35 var(--f-mono); color: var(--ink-2); }
/* the other raffle: a kraft card, a strip of tape across its corner */
.other {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin-top: clamp(22px, 2.8vw, 34px);
  padding: 20px clamp(16px, 2.2vw, 28px);
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: repeating-linear-gradient(90deg, rgb(255 255 255 / .07) 0 2px, transparent 2px 9px), linear-gradient(rgb(255 255 255 / .16), transparent 70%), var(--kraft-hi);
  box-shadow: var(--hard);
}
.other::before { content: ''; position: absolute; left: -14px; top: 10px; width: 92px; height: 24px; rotate: -32deg; background: linear-gradient(rgb(255 255 255 / .3), rgb(255 255 255 / .05) 45%, transparent 60%, rgb(0 0 0 / .12)), linear-gradient(var(--accent-dark) 0 10%, var(--accent) 10% 90%, var(--accent-dark) 90%); box-shadow: 0 2px 0 rgb(0 0 0 / .15); }
.other__kicker { flex: none; padding: .45em .6em .38em; border: 2px solid var(--ink); border-radius: 6px; background: #fff; font: 400 11.5px/1 var(--f-block); letter-spacing: .08em; text-transform: uppercase; rotate: -2deg; box-shadow: 0 3px 0 rgb(0 0 0 / .2); }
.other__text { flex: 1 1 320px; font: 600 14px/1.45 var(--f-ui); }

/* ------------------------------------------------------------------- rules */

.rules {
  position: relative;
  margin-top: clamp(52px, 6.8vw, 96px);
  padding: clamp(46px, 5.4vw, 72px) max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))) clamp(28px, 3.2vw, 44px);
  background: radial-gradient(90% 120% at 50% 0, rgb(255 214 150 / .09), transparent 60%), var(--dark);
  color: #f1ece0;
}
/* tape along the top edge of the dark band */
.rules::before {
  content: '';
  position: absolute;
  inset: -9px 0 auto 0;
  height: 18px;
  background: linear-gradient(rgb(255 255 255 / .3), rgb(255 255 255 / .04) 45%, transparent 60%, rgb(0 0 0 / .14)), linear-gradient(var(--accent-dark) 0 12%, var(--accent) 12% 88%, var(--accent-dark) 88%);
  rotate: -.25deg;
  box-shadow: 0 3px 0 rgb(0 0 0 / .25);
}
.rules__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); margin-top: clamp(20px, 2.6vw, 32px); }
.rule {
  position: relative;
  padding: 18px 16px 17px 64px;
  border: 3px solid #000;
  border-radius: 12px;
  background: repeating-linear-gradient(90deg, rgb(255 255 255 / .06) 0 2px, transparent 2px 9px), linear-gradient(rgb(255 255 255 / .14), transparent 70%), var(--kraft-hi);
  box-shadow: 0 5px 0 rgb(0 0 0 / .5);
  color: var(--ink);
  transition: translate .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.rule:hover { translate: 0 -3px; box-shadow: 0 8px 0 rgb(0 0 0 / .5); }
.rule__no {
  position: absolute;
  left: 13px;
  top: 14px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--ticket);
  box-shadow: 0 0 0 2px #fff, 0 3px 0 2px rgb(0 0 0 / .25);
  font: 400 16px/1 var(--f-block);
  color: #fff;
  rotate: -6deg;
  transition: rotate .35s var(--ease-out);
}
.rule:hover .rule__no { rotate: 6deg; }
.rule h3 { font: 400 clamp(14.5px, 1.3vw, 17px)/1.18 var(--f-block); letter-spacing: .02em; text-transform: uppercase; text-wrap: balance; }
.rule p { margin-top: 8px; font: 400 14px/1.5 var(--f-ui); color: var(--ink-2); text-wrap: pretty; }
.rules__fine { max-width: 70em; margin-top: clamp(20px, 2.6vw, 30px); padding-top: 14px; border-top: 1px dashed #4a3c2b; font: 400 12.5px/1.6 var(--f-mono); color: #b9ad97; }

/* ------------------------------------------------------------------ footer */

.foot { padding: clamp(18px, 2.4vw, 28px) max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))) max(24px, env(safe-area-inset-bottom)); background: #130e08; border-top: 1px solid #3a2f22; font: 400 11.5px/1.5 var(--f-mono); color: #9d917c; }
.foot__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; }
.foot__brand.logo-link { width: 144px; }
.foot__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px clamp(14px, 2vw, 26px); }
.foot__nav a, .foot__top { position: relative; padding: 6px 0; font: 400 11.5px/1 var(--f-block); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: #e7dfcf; transition: color .2s ease; }
.foot__nav a::after { content: ''; position: absolute; inset: auto 0 1px 0; height: 2px; background: var(--accent); scale: 0 1; transform-origin: 0 50%; transition: scale .3s var(--ease-out); }
.foot__nav a:hover, .foot__nav a:focus-visible, .foot__top:hover, .foot__top:focus-visible { color: #fff; }
.foot__nav a:hover::after, .foot__nav a:focus-visible::after, .foot__nav a[aria-current='page']::after { scale: 1 1; }
.foot__top { display: inline-flex; align-items: center; gap: .6em; padding: .7em .9em .6em; border: 1.5px solid #4a3c2b; border-radius: 999px; transition: color .2s ease, border-color .2s ease, translate .3s var(--ease-out); }
.foot__top::after { content: '\2191' / ''; font: 700 1.2em/1 var(--f-mono); translate: 0 -.05em; }
.foot__top:hover, .foot__top:focus-visible { border-color: var(--accent); translate: 0 -2px; }
.foot__copy { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #332819; }
.foot :focus-visible, .rules :focus-visible { outline-color: #fff; }
.noscript { margin: 20px var(--gutter); padding: 14px; border: 3px solid var(--ink); border-radius: 12px; background: #fff; font: 600 15px/1.4 var(--f-ui); }

/* ---------------------------------------------------------------- entrances */

/* Blocks rise into place as they scroll into view (src/raffle/main.js sets .is-anim only when it can also set .is-in,
   so nothing stays hidden without it). The rules' cards follow their list in a stagger. */
.is-anim [data-reveal] { opacity: 0; translate: 0 28px; transition: opacity .7s var(--ease-out), translate .8s var(--ease-out), rotate .4s var(--ease-out), box-shadow .4s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.is-anim [data-reveal].is-in { opacity: 1; translate: 0 0; }
.is-anim [data-reveal].is-done { transition-delay: 0s; }
.is-anim .tile[data-reveal].is-done:hover { translate: 0 -4px; }
.is-anim .rules__list[data-reveal] { opacity: 1; translate: none; }
.is-anim .rules__list[data-reveal] .rule { opacity: 0; translate: 0 24px; transition: opacity .6s var(--ease-out), translate .7s var(--ease-out), box-shadow .35s var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.is-anim .rules__list[data-reveal].is-in .rule { opacity: 1; translate: 0 0; }
.is-anim .rules__list[data-reveal].is-done .rule { transition-delay: 0s; }
.is-anim .rules__list[data-reveal].is-done .rule:hover { translate: 0 -3px; }
/* the ticket comes up out of the hero like a ticket out of a slot */
.is-anim .ticket[data-reveal] { translate: 0 40px; clip-path: inset(-40px -40px 100% -40px); transition: opacity .5s var(--ease-out), translate .9s var(--ease-out), clip-path 1s var(--ease-out); }
.is-anim .ticket[data-reveal].is-in { translate: 0 0; clip-path: inset(-40px -40px -60px -40px); }
.is-anim .ticket[data-reveal].is-done { clip-path: none; }

/* --------------------------------------------------------------- responsive */

/* Tall heroes (phones, portrait tablets): the stage on top, the copy under it on the night, then the page. */
@media (max-width: 760px), (orientation: portrait) and (max-width: 1100px) {
  .hero { display: block; min-height: 0; background: linear-gradient(var(--night) 0, var(--night) 70%, #2a1b14 90%, var(--kraft) 100%); }
  .hero__stage { position: relative; inset: auto; height: clamp(360px, calc(var(--vh, 1vh) * 60), 680px); }
  .hero__stage::after { background: linear-gradient(to top, var(--night) 0, rgb(13 9 17 / .82) 10%, rgb(13 9 17 / .3) 22%, transparent 34%); }
  .hero__copy { width: auto; margin: clamp(-92px, -12vw, -54px) var(--gutter) 0; padding: 0 0 clamp(84px, 14vw, 120px); max-width: 640px; }
  .hero__title { font-size: clamp(44px, 12.5vw, 92px); }
}
@media (orientation: portrait) and (min-width: 761px) and (max-width: 1100px) {
  .hero__copy { margin-left: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); }
}
/* Short landscape screens (phones on their side): the wide layout, set smaller; the ticket starts under the scene. */
@media (orientation: landscape) and (max-height: 540px) {
  .hero { min-height: max(360px, calc(var(--vh, 1vh) * 100 - var(--demo-h))); }
  .hero__copy { width: min(52%, 460px); padding: 66px 0 34px; }
  .hero__title { font-size: clamp(34px, 9.4vh, 52px); }
  .hero__kicker { margin-bottom: 10px; }
  .hero__kicker .chip { font-size: 10px; }
  .hero__row { gap: 12px; margin-top: 14px; }
  .hero__lede { font-size: 13.5px; line-height: 1.4; max-width: 28em; }
  .btn-tag { font-size: 17px; }
  .tix, [data-phase='drawn'] .result { margin-top: 22px; }
}

@media (max-width: 980px) {
  .step { grid-template-columns: 44px minmax(0, 1fr) 118px; grid-template-areas: 'n text stamp' 'n act act'; }
  .step--wallet { grid-template-columns: 44px minmax(0, 1fr) 118px; }
  .step__act { justify-content: flex-start; }
  .rules__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .nav__long { display: none; }
  .nav__link { padding: .8em .8em .7em; }
  .hero__lede { font-size: 15px; }
  .ticket { grid-template-columns: minmax(0, 1fr); }
  .ticket__main { border-right: 3px solid var(--ink); border-bottom: 0; border-radius: 18px 18px 0 0; -webkit-mask: none; mask: none; }
  .ticket__stub { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 22px 18px 18px; border-left: 3px solid var(--ink); border-top: 0; border-radius: 0 0 18px 18px; -webkit-mask: none; mask: none; }
  .ticket__stub::before { inset: -1px 22px auto 22px; width: auto; height: 12px; background: radial-gradient(circle at 7px 6px, rgb(64 36 14 / .9) 2.4px, rgb(255 255 255 / .35) 3px, transparent 3.6px) 0 0 / 14px 12px repeat-x; }
  .ticket__stub::after { inset: 0 18px auto 18px; border-left: 0; border-top: 2px dashed rgb(42 11 7 / .55); }
  .ticket__notch { display: none; }
  .stub__admit { font-size: 26px; }
  .stub__count { flex-direction: row; align-items: baseline; gap: 10px; margin-top: 0; }
  .stub__count b { font-size: 38px; }
  .stub__code { display: none; }
  .stub__stamp { position: static; translate: none; rotate: -6deg; }
  .ticket__serial { margin-left: 0; }
  .prize__grid { grid-template-columns: minmax(0, 1fr); }
  .tile { rotate: 0deg; }
  .rules__list { grid-template-columns: minmax(0, 1fr); }
  .demo { font-size: 12px; }
}

@media (max-width: 560px) {
  .step, .step--wallet { grid-template-columns: 38px minmax(0, 1fr) 96px; gap: 8px 10px; }
  .step__n { width: 34px; height: 34px; font-size: 15px; align-self: start; }
  .stamp-box { width: 94px; height: 54px; }
  .stamp__face { font-size: 12.5px; }
  .ticket__foot .btn-ink { flex: 1 1 100%; }
  .receipt__row { grid-template-columns: minmax(0, 1fr); }
  .receipt__row dt::after { display: none; }
  .foot__row { justify-content: flex-start; }
  .foot__top { margin-left: auto; }
}

@media (max-width: 400px) {
  .nav__link { font-size: 10px; padding: .8em .62em .7em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .15s !important; transition-delay: 0s !important; }
}

/* Headless check mode: everything in its final place for the screenshot. */
.is-check *, .is-check *::before, .is-check *::after { transition: none !important; animation: none !important; }
.is-check .arrive { display: none; }