/* =====================================================================
   Got a Joke? — public site
   All sizes use --u = 1px of the 1080px-wide design artboard, so every
   screen scales exactly like the Illustrator file at any phone width.
   ===================================================================== */

@font-face {
  font-family: "Archivo Wide";
  src: url(../fonts/archivo.woff2) format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url(../fonts/source-sans.woff2) format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --cream: #F2EAD3;
  --cream-card: #F1EAD2;
  --cream-soft: #F2E8D8;
  --dob-fill: #F1E8D7;
  --ink: #1A1717;
  --maroon: #601614;
  --red-deep: #9B2927;
  --red-dark: #7A1D1C;
  --amber: #FAAF3A;
  --placeholder: #B3B3B3;
  --font: "Obviously", "Archivo Wide", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Myriad Pro", "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --fw: 560;      /* Obviously Medium look-alike with the Archivo fallback */
  --fw-semi: 650;
  color-scheme: only light;
}

@view-transition { navigation: auto; }

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--red-dark);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--red-dark);
  color: var(--cream);
  font-family: var(--font);
  font-weight: var(--fw);
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
a { color: inherit; }
p { margin: 0; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }

/* ---------------------------------------------------------------- frame */

.stage { min-height: 100vh; min-height: 100dvh; }
.device { position: relative; }

.app {
  container-type: inline-size;
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: clip;
}

.screen,
.overlay__inner {
  --u: calc(min(100vw, 430px) / 1080);
}
@supports (width: 1cqw) {
  .screen,
  .overlay__inner { --u: calc(100cqw / 1080); }
}

.screen {
  display: flow-root;
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: calc(140 * var(--u) + env(safe-area-inset-bottom));
  background-color: var(--red-dark);
  background-repeat: no-repeat;
  background-position: top center, bottom center;
  background-size: 100% auto, 100% 100%;
  text-align: center;
}

/* Backgrounds: the artwork + a gradient that continues its bottom edge on very tall screens */
.screen--gate {
  background-image: url(../img/bg-gate.jpg), linear-gradient(90deg, #f4e8c8 0%, #f4e6c3 4.167%, #f3e4be 8.333%, #f2e1b8 12.5%, #f3deb2 16.67%, #f3dbad 20.83%, #f2d7a6 25%, #f1d3a0 29.17%, #f2d099 33.33%, #f2cc93 37.5%, #f1c98d 41.67%, #edae63 45.83%, #eeae62 50%, #eeb167 54.17%, #efb56b 58.33%, #efb872 62.5%, #f0bc77 66.67%, #f0c07d 70.83%, #f1c484 75%, #f1c88b 79.17%, #f2cc93 83.33%, #f2d099 87.5%, #f2d4a0 91.67%, #f3d8a8 95.83%, #f3dcae 100%);
  background-image: image-set(url(../img/bg-gate.avif) type("image/avif"), url(../img/bg-gate.webp) type("image/webp"), url(../img/bg-gate.jpg) type("image/jpeg")), linear-gradient(90deg, #f4e8c8 0%, #f4e6c3 4.167%, #f3e4be 8.333%, #f2e1b8 12.5%, #f3deb2 16.67%, #f3dbad 20.83%, #f2d7a6 25%, #f1d3a0 29.17%, #f2d099 33.33%, #f2cc93 37.5%, #f1c98d 41.67%, #edae63 45.83%, #eeae62 50%, #eeb167 54.17%, #efb56b 58.33%, #efb872 62.5%, #f0bc77 66.67%, #f0c07d 70.83%, #f1c484 75%, #f1c88b 79.17%, #f2cc93 83.33%, #f2d099 87.5%, #f2d4a0 91.67%, #f3d8a8 95.83%, #f3dcae 100%);
}
.screen--form {
  background-image: url(../img/bg-form.jpg), linear-gradient(90deg, #f4e8ca 0%, #f3e7c4 4.167%, #f4e4bd 8.333%, #f3e0b6 12.5%, #f2dcb0 16.67%, #f3d8a9 20.83%, #f2d5a2 25%, #eba45c 29.17%, #ea9b4e 33.33%, #eb9d51 37.5%, #eba154 41.67%, #eba557 45.83%, #eda85c 50%, #edac60 54.17%, #edb065 58.33%, #eeb36a 62.5%, #efb871 66.67%, #f0bc78 70.83%, #f0c07e 75%, #f0c485 79.17%, #f1c88d 83.33%, #f1cd94 87.5%, #f1d19c 91.67%, #f2d6a4 95.83%, #f2daab 100%);
  background-image: image-set(url(../img/bg-form.avif) type("image/avif"), url(../img/bg-form.webp) type("image/webp"), url(../img/bg-form.jpg) type("image/jpeg")), linear-gradient(90deg, #f4e8ca 0%, #f3e7c4 4.167%, #f4e4bd 8.333%, #f3e0b6 12.5%, #f2dcb0 16.67%, #f3d8a9 20.83%, #f2d5a2 25%, #eba45c 29.17%, #ea9b4e 33.33%, #eb9d51 37.5%, #eba154 41.67%, #eba557 45.83%, #eda85c 50%, #edac60 54.17%, #edb065 58.33%, #eeb36a 62.5%, #efb871 66.67%, #f0bc78 70.83%, #f0c07e 75%, #f0c485 79.17%, #f1c88d 83.33%, #f1cd94 87.5%, #f1d19c 91.67%, #f2d6a4 95.83%, #f2daab 100%);
}
.screen--success {
  background-image: url(../img/bg-success.jpg), linear-gradient(90deg, #942b25 0%, #932b25 4.167%, #922a24 8.333%, #922a24 12.5%, #912924 16.67%, #902824 20.83%, #8e2824 25%, #cd723b 29.17%, #e99449 33.33%, #e9994b 37.5%, #ea9c4d 41.67%, #eb9f52 45.83%, #eba355 50%, #eca75a 54.17%, #edaa5d 58.33%, #eeaf63 62.5%, #eeb269 66.67%, #efb76e 70.83%, #efbb76 75%, #f0bf7c 79.17%, #f1c383 83.33%, #f1c88a 87.5%, #f1cc92 91.67%, #f2d099 95.83%, #f2d4a0 100%);
  background-image: image-set(url(../img/bg-success.avif) type("image/avif"), url(../img/bg-success.webp) type("image/webp"), url(../img/bg-success.jpg) type("image/jpeg")), linear-gradient(90deg, #942b25 0%, #932b25 4.167%, #922a24 8.333%, #922a24 12.5%, #912924 16.67%, #902824 20.83%, #8e2824 25%, #cd723b 29.17%, #e99449 33.33%, #e9994b 37.5%, #ea9c4d 41.67%, #eb9f52 45.83%, #eba355 50%, #eca75a 54.17%, #edaa5d 58.33%, #eeaf63 62.5%, #eeb269 66.67%, #efb76e 70.83%, #efbb76 75%, #f0bf7c 79.17%, #f1c383 83.33%, #f1c88a 87.5%, #f1cc92 91.67%, #f2d099 95.83%, #f2d4a0 100%);
}

/* ---------------------------------------------------------------- shared pieces */

.logo { height: auto; margin-inline: auto; }
.logo--gate { width: calc(424 * var(--u)); margin-top: calc(330 * var(--u)); }
.logo--form { width: calc(387.5 * var(--u)); margin-top: calc(125 * var(--u)); }

/* The black "funny?" highlight block */
.hl {
  display: block;
  width: calc(617 * var(--u));
  height: calc(160 * var(--u));
  margin-left: calc(226 * var(--u));
  background: var(--ink);
  color: var(--cream);
  font-size: calc(142 * var(--u));
  line-height: calc(160 * var(--u));
  white-space: nowrap;
}

.card {
  background: var(--cream-card);
  color: var(--ink);
  border-radius: calc(33 * var(--u));
}

.btn-cream {
  display: block;
  width: calc(407 * var(--u));
  height: calc(71 * var(--u));
  margin-inline: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--cream-card);
  color: var(--ink);
  font-size: calc(41 * var(--u));
  font-weight: var(--fw);
  cursor: pointer;
  transition: transform .12s var(--ease), filter .12s;
}
.btn-cream:hover { filter: brightness(1.04); }
.btn-cream:active { transform: translateY(calc(3 * var(--u))); filter: brightness(.94); }

.field-error {
  color: var(--amber);
  font-size: max(calc(24 * var(--u)), 11px);
  line-height: 1.35;
  text-align: left;
}
.field-error:empty { display: none; }

.form-alert {
  width: calc(760 * var(--u));
  margin: calc(34 * var(--u)) auto 0;
  color: var(--amber);
  font-size: max(calc(26 * var(--u)), 11px);
  line-height: 1.4;
}
.form-alert:empty { display: none; }

/* ---------------------------------------------------------------- age gate (PDF p3 / p5 / p6) */

.gate-card {
  width: calc(657 * var(--u));
  min-height: calc(283 * var(--u));
  margin: calc(81 * var(--u)) 0 0 calc(204 * var(--u));
  padding: calc(44 * var(--u)) calc(30 * var(--u)) calc(51 * var(--u));
  border: 0;
}
.gate-q {
  font-size: calc(35.1 * var(--u));
  line-height: calc(57 * var(--u));
}
.radios {
  display: flex;
  justify-content: center;
  gap: calc(78 * var(--u));
  margin-top: calc(21 * var(--u));
}
.radio {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  font-size: calc(37.9 * var(--u));
  line-height: calc(53 * var(--u));
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.radio::after { /* bigger tap area */
  content: "";
  position: absolute;
  inset: -10px -14px;
}
.radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radio__dot {
  flex: none;
  width: calc(27 * var(--u));
  height: calc(27 * var(--u));
  border: calc(7 * var(--u)) solid var(--maroon);
  border-radius: 50%;
  background: var(--red-deep);
  transition: background-color .15s;
}
.radio input:checked + .radio__dot { background: var(--amber); }
.radio input:focus-visible + .radio__dot { outline: 3px solid var(--amber); outline-offset: 3px; }

.dob {
  display: none;
  align-items: center;
  gap: calc(36 * var(--u));
  margin: calc(71 * var(--u)) 0 0 calc(284 * var(--u));
}
.dob label {
  color: var(--cream-soft);
  font-size: calc(30 * var(--u));
  line-height: calc(42 * var(--u));
}
.dob input {
  width: calc(373 * var(--u));
  height: calc(57 * var(--u));
  padding: 0 calc(10 * var(--u));
  border: calc(2 * var(--u)) solid var(--placeholder);
  border-radius: 0;
  background: var(--dob-fill);
  color: var(--ink);
  font-size: max(calc(30 * var(--u)), 16px);
  text-align: center;
  line-height: 1;
}
.dob input::placeholder {
  color: var(--placeholder);
  font-size: calc(30 * var(--u));
  opacity: 1;
}
.dob-error {
  margin: calc(18 * var(--u)) 0 0 calc(392 * var(--u));
}

.age-msg {
  display: none;
  margin-top: calc(48 * var(--u));
  color: var(--cream-soft);
  font-size: calc(30 * var(--u));
  line-height: calc(46 * var(--u));
}

.gate[data-state="yes"] .dob { display: flex; }
.gate[data-state="no"] .age-msg { display: block; }

/* Only needed without JavaScript (see <noscript> in index.php); with JS the form submits itself */
.gate-continue { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------- joke form (PDF p2) */

.hero { margin: 0; font-size: inherit; font-weight: var(--fw); }
.hero__line {
  display: block;
  margin-top: calc(30 * var(--u));
  font-size: calc(94 * var(--u));
  line-height: calc(130 * var(--u));
  white-space: nowrap;
}
.hero .hl { margin-top: calc(5 * var(--u)); }
.hero__line--prove {
  margin-top: calc(15 * var(--u));
  font-size: calc(85 * var(--u));
  line-height: calc(118 * var(--u));
}

.row {
  display: flex;
  align-items: flex-start;
  width: calc(684 * var(--u));
  margin: calc(71 * var(--u)) 0 0 calc(188 * var(--u));
}
.row + .row { margin-top: calc(28 * var(--u)); }
.row__label {
  flex: 1;
  font-size: calc(41 * var(--u));
  line-height: calc(57 * var(--u));
  text-align: left;
  white-space: nowrap;
}
.row__field { position: relative; width: calc(408 * var(--u)); }

.input {
  display: block;
  width: 100%;
  height: calc(57 * var(--u));
  padding: 0 calc(14 * var(--u));
  border: 0;
  border-radius: 0;
  background: var(--cream-card);
  color: var(--ink);
  font-size: max(calc(23 * var(--u)), 16px); /* 16px+ stops iPhones zooming in */
  line-height: 1;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
}
.input::placeholder {
  color: var(--placeholder);
  font-weight: 400;
  font-size: calc(23 * var(--u));
  opacity: 1;
}
textarea.input {
  height: auto;
  min-height: calc(57 * var(--u));
  max-height: 180px;
  padding-block: max(0px, (calc(57 * var(--u)) - 1.25em) / 2);
  line-height: 1.25;
  resize: none;
  overflow-y: auto;
}
textarea.input:placeholder-shown { height: calc(57 * var(--u)); padding-block: 0; line-height: calc(57 * var(--u)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
textarea.input:not(:placeholder-shown) { text-align: left; }
.input:focus-visible, .dob input:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.input[aria-invalid="true"] { box-shadow: 0 0 0 2px var(--amber); }

.row__field .field-error { margin-top: calc(10 * var(--u)); padding-right: calc(90 * var(--u)); }

.counter {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: calc(6 * var(--u));
  pointer-events: none;
  font-size: max(calc(20 * var(--u)), 10px);
  text-align: right;
  opacity: 0;
  transition: opacity .2s;
}
.counter.is-visible { opacity: .85; }
.counter.is-over { color: var(--amber); opacity: 1; }

.disclaimer h2 {
  margin: calc(47 * var(--u)) 0 0;
  font-size: calc(23 * var(--u));
  line-height: calc(32 * var(--u));
  font-weight: var(--fw);
}
.disclaimer p {
  width: calc(560 * var(--u));
  margin: calc(14 * var(--u)) auto 0;
  font-size: calc(16 * var(--u));
  line-height: 1.875;
  font-weight: 400;
}

.btn-submit { margin-top: calc(62 * var(--u)); position: relative; }
.btn-submit.is-loading { color: transparent; pointer-events: none; }
.btn-submit.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
  min-width: 14px;
  min-height: 14px;
  border: 2px solid var(--ink);
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }

.terms-link {
  display: inline-block;
  margin-top: calc(41 * var(--u));
  padding: 8px 6px;
  margin-bottom: -8px;
  transform: translateY(-8px);
  font-size: calc(20 * var(--u));
  line-height: calc(29 * var(--u));
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: 0;
}
.terms-link:hover { text-decoration: underline; }
.privacy-link {
  display: block;
  width: max-content;
  margin: calc(6 * var(--u)) auto 0;
  font-size: calc(17 * var(--u));
  opacity: .75;
  text-decoration: none;
}
.privacy-link:hover { text-decoration: underline; opacity: 1; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------- success (PDF p1) */

.success-title {
  margin: calc(504 * var(--u)) 0 0;
  font-size: calc(93.7 * var(--u));
  line-height: calc(112 * var(--u));
  font-weight: var(--fw);
  white-space: nowrap;
}
.success-title .hl { margin-top: calc(20 * var(--u)); }
.success-copy {
  margin-top: calc(44 * var(--u));
  font-size: calc(33 * var(--u));
  line-height: calc(39 * var(--u));
}
.success-copy p + p {
  width: calc(760 * var(--u));
  margin: calc(33 * var(--u)) auto 0;
}

/* Ticket-shaped "Book your tickets here" chip with notched ends */
.chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(468 * var(--u));
  height: calc(66 * var(--u));
  margin: calc(71 * var(--u)) auto 0;
  background: var(--ink);
  color: #fff;
  font-size: calc(30.8 * var(--u));
  text-decoration: none;
  white-space: nowrap;
  -webkit-mask:
    radial-gradient(circle at 0 50%, #0000 calc(16.6 * var(--u)), #000 calc(16.6 * var(--u) + .5px)) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, #0000 calc(16.6 * var(--u)), #000 calc(16.6 * var(--u) + .5px)) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle at 0 50%, #0000 calc(16.6 * var(--u)), #000 calc(16.6 * var(--u) + .5px)) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, #0000 calc(16.6 * var(--u)), #000 calc(16.6 * var(--u) + .5px)) right / 51% 100% no-repeat;
  transition: transform .15s var(--ease);
}
.chip:hover { transform: scale(1.03); }
.chip span {
  margin-left: .3em;
  color: var(--amber);
  text-decoration: underline;
  text-decoration-thickness: max(calc(1.5 * var(--u)), 1px);
  text-underline-offset: calc(6 * var(--u));
}
.bms-logo {
  display: block;
  width: calc(418 * var(--u));
  margin: calc(6 * var(--u)) auto 0;
}
.bms-logo img { width: 100%; height: auto; }

/* ---------------------------------------------------------------- terms (PDF p4) */

.terms-card {
  position: relative;
  width: calc(803 * var(--u));
  margin: calc(187 * var(--u)) 0 0 calc(144 * var(--u));
  padding: calc(86 * var(--u)) calc(100 * var(--u)) calc(75 * var(--u));
  text-align: center;
}
.terms-card h2 {
  margin: 0;
  font-size: calc(27 * var(--u));
  line-height: calc(39 * var(--u));
  font-weight: var(--fw-semi);
}
/* Full-page terms / privacy: the card fits the screen and its text scrolls inside it */
.screen > .terms-card {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 187 * var(--u) - 140 * var(--u) - env(safe-area-inset-bottom));
}
.screen > .terms-card .terms-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.terms-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: calc(27 * var(--u));
  line-height: calc(40 * var(--u));
}
.terms-close {
  position: absolute;
  top: calc(22 * var(--u));
  right: calc(22 * var(--u));
  display: grid;
  place-items: center;
  width: max(calc(54 * var(--u)), 24px);
  height: max(calc(54 * var(--u)), 24px);
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  font-size: max(calc(30 * var(--u)), 13px);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
}
.terms-back { margin: calc(60 * var(--u)) auto 0; }

/* Terms pop-up over the form (sits inside the phone frame) */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  container-type: inline-size;
  overflow: hidden;
}
.overlay.is-open { display: block; animation: fade-in .25s var(--ease); }
.overlay__inner {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: calc(80 * var(--u));
  background: var(--red-dark) image-set(url(../img/bg-gate.avif) type("image/avif"), url(../img/bg-gate.webp) type("image/webp"), url(../img/bg-gate.jpg) type("image/jpeg")) top center / 100% auto no-repeat;
}
.overlay.is-open .terms-card { animation: rise .35s var(--ease); }
.overlay .terms-card { cursor: auto; }
html.has-overlay, html.has-overlay body { overflow: hidden; }

/* ---------------------------------------------------------------- closed / error screens */

.message-title {
  margin: calc(110 * var(--u)) 0 0;
  font-size: calc(94 * var(--u));
  line-height: calc(130 * var(--u));
  font-weight: var(--fw);
}
.message-title .hl { margin-top: calc(5 * var(--u)); font-size: calc(110 * var(--u)); }
.message-copy {
  width: calc(800 * var(--u));
  margin: calc(50 * var(--u)) auto 0;
  font-size: calc(33 * var(--u));
  line-height: calc(46 * var(--u));
}
.message-actions { margin-top: calc(70 * var(--u)); }

/* ---------------------------------------------------------------- motion */

@keyframes fade-in { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(calc(40 * var(--u))); } }
@keyframes pop { 0% { opacity: 0; transform: scale(.85); } 70% { transform: scale(1.04); } 100% { transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  .screen > * { animation: rise .55s var(--ease) both; }
  .screen > *:nth-child(2) { animation-delay: .06s; }
  .screen > *:nth-child(3) { animation-delay: .12s; }
  .screen > *:nth-child(4) { animation-delay: .18s; }
  .screen .hl { animation: pop .6s .2s var(--ease) both; }
  .gate[data-state="yes"] .dob,
  .gate[data-state="no"] .age-msg { animation: rise .35s var(--ease) both; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  @view-transition { navigation: none; }
}

/* ---------------------------------------------------------------- larger screens */

.site-head,
.desktop-note { display: none; }

/* Mid-size or short windows (e.g. landscape phones): the mobile layout in a centred column */
@media (min-width: 600px) {
  body {
    display: grid;
    place-items: center;
    padding: 24px 16px;
    background: #3a0e0d url(../img/bg-desktop.webp) center / cover no-repeat fixed;
  }
  .stage { min-height: 0; }
  .device { width: min(430px, calc(100vw - 32px), calc((100dvh - 48px) * .66)); } /* narrower on short windows so the whole screen fits */
  .app,
  .screen { min-height: calc(100dvh - 48px); } /* leave room for the body padding so the page doesn't scroll */
  .screen > .terms-card { max-height: calc(100dvh - 48px - 327 * var(--u)); }
}

/* Tablets and desktops: no phone frame. The page sits on the full-width billboard artwork
   and the 1080px artboard is scaled up to fit the window height. */
@media (min-width: 768px) and (min-height: 560px) {
  html { background: #4a1110; }
  body {
    display: block;
    place-items: normal;
    padding: 0;
    background: none;
  }
  body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    z-index: -1;
    height: 125vh; /* pushes the cream band at the bottom of the artwork out of view */
    background-color: var(--red-deep);
    background-image: radial-gradient(ellipse 80% 75% at 50% 42%, transparent 50%, rgba(46, 7, 7, .5) 100%), url(../img/bg-live.jpg);
    background-image: radial-gradient(ellipse 80% 75% at 50% 42%, transparent 50%, rgba(46, 7, 7, .5) 100%), image-set(url(../img/bg-live.webp) type("image/webp"), url(../img/bg-live.jpg) type("image/jpeg"));
    background-position: center, center top;
    background-size: 100% 100%, cover;
    background-repeat: no-repeat;
  }

  .stage {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(20px, 3.5vh, 36px) 32px clamp(24px, 4vh, 48px);
  }
  .site-head {
    display: flex;
    flex: none;
    justify-content: center;
  }
  .site-head img {
    width: auto;
    height: clamp(48px, 8vh, 88px);
    filter: drop-shadow(0 6px 18px rgba(40, 6, 6, .35));
  }
  .device {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    width: auto;
  }
  .app { min-height: 0; }

  .screen,
  .overlay__inner {
    --u: clamp(.4px, min((100dvh - 150px) / 1000, (100vw - 64px) / 1080), .72px);
    --field: max(calc(57 * var(--u)), 42px);
  }
  /* The joke form is the tallest screen, so it scales against a taller artboard */
  .screen:has(.joke-form) { --u: clamp(.4px, min((100dvh - 210px) / 1090, (100vw - 64px) / 1080), .72px); }
  .screen {
    width: calc(1080 * var(--u));
    min-height: 0;
    margin-inline: auto;
    padding: calc(40 * var(--u)) 0;
    background: none;
  }

  /* The logo moves to the page header, so content starts at the top of the column.
     The age gate keeps its big logo as the hero instead. */
  .stage:has(.logo--gate) .site-head { display: none; }
  .screen .logo--form { display: none; }
  .logo--gate,
  .hero__line:first-child,
  .success-title,
  .message-title { margin-top: 0; }
  .terms-card { margin: 0 auto; }
  .screen > .terms-card { max-height: calc(100dvh - clamp(48px, 8vh, 88px) - clamp(20px, 3.5vh, 36px) - clamp(24px, 4vh, 48px) - 80 * var(--u)); }

  /* Keep the fine print readable */
  .disclaimer p { font-size: max(calc(16 * var(--u)), 13px); }
  .terms-link { font-size: max(calc(20 * var(--u)), 14px); }
  .privacy-link { font-size: max(calc(17 * var(--u)), 13px); }
  .field-error { font-size: max(calc(24 * var(--u)), 13px); }
  .form-alert { font-size: max(calc(26 * var(--u)), 14px); }
  .counter { font-size: max(calc(20 * var(--u)), 12px); }
  .disclaimer p { width: max(calc(560 * var(--u)), 440px); }

  /* Comfortable, mouse-friendly fields */
  .row { width: calc(780 * var(--u)); margin-inline: auto; }
  .row__field { width: calc(480 * var(--u)); }
  .row__label { line-height: var(--field); }
  .input,
  .dob input { height: var(--field); font-size: 16px; }
  .input::placeholder,
  .dob input::placeholder { font-size: max(calc(23 * var(--u)), 14px); }
  textarea.input { min-height: var(--field); max-height: 220px; padding-block: max(0px, (var(--field) - 1.25em) / 2); }
  textarea.input:placeholder-shown { height: var(--field); line-height: var(--field); }
  .btn-cream { height: max(calc(71 * var(--u)), 46px); font-size: max(calc(41 * var(--u)), 18px); }

  .card,
  .input,
  .dob input { box-shadow: 0 18px 40px -22px rgba(40, 6, 6, .55); }
  .input[aria-invalid="true"] { box-shadow: 0 0 0 2px var(--amber), 0 18px 40px -22px rgba(40, 6, 6, .55); }
  .btn-cream {
    box-shadow: 0 14px 28px -16px rgba(40, 6, 6, .7);
    transition: transform .15s var(--ease), box-shadow .15s, filter .15s;
  }
  .btn-cream:hover { transform: translateY(-2px); box-shadow: 0 20px 34px -16px rgba(40, 6, 6, .75); }
  .btn-cream:active { transform: translateY(1px); box-shadow: 0 8px 18px -12px rgba(40, 6, 6, .7); }

  /* Terms pop-up becomes a centred dialog over a dimmed page */
  .overlay {
    background: rgba(36, 6, 6, .6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .overlay__inner {
    display: grid;
    place-items: center;
    padding: 48px 24px;
    background: none;
  }
  .overlay .terms-card {
    margin: 0;
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6);
  }
}

/* Wide screens: billboard-style "Got a Joke?" card with a QR code to carry on on a phone */
@media (min-width: 1200px) and (min-height: 560px) {
  .screen { --u: clamp(.4px, min((100dvh - 150px) / 1000, (100vw - 700px) / 1080), .72px); }
  .screen:has(.joke-form) { --u: clamp(.4px, min((100dvh - 210px) / 1090, (100vw - 700px) / 1080), .72px); }

  .desktop-note {
    position: fixed;
    inset-block: 0;
    right: clamp(40px, 5vw, 96px);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 244px;
    height: fit-content;
    margin-block: auto;
    padding: 40px 30px 26px;
    border-radius: 22px;
    background: var(--cream);
    color: var(--ink);
    text-align: center;
    box-shadow: 0 34px 70px -30px rgba(30, 4, 4, .7);
    animation: rise .6s .3s var(--ease) both;
  }
  .desktop-note__got {
    position: relative;
    font-size: 30px;
    line-height: 1.05;
    font-weight: var(--fw-semi);
  }
  .desktop-note__got span {
    position: absolute;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.1em;
    line-height: 1;
  }
  .desktop-note__got span:first-child { left: -.62em; top: -.12em; }
  .desktop-note__got span:last-child { right: -.56em; bottom: -.46em; }
  .desktop-note__scan {
    margin-top: 22px;
    font-size: 17px;
    line-height: 1.3;
    font-weight: var(--fw-semi);
  }
  .desktop-note__qr {
    width: 164px;
    margin-top: 20px;
    padding: 10px;
    border-radius: 6px;
    background: #fff;
  }
  .desktop-note__qr svg { display: block; width: 100%; height: auto; }
  .desktop-note__qr:empty { aspect-ratio: 1; }
  .desktop-note__hint {
    margin-top: 16px;
    font-size: 12.5px;
    line-height: 1.45;
    font-weight: 500;
    opacity: .7;
  }
}

/* Hidden on desktop */
.success-logo-mobile {
    display: none;
}

/* Mobile only */
@media (max-width: 767px) {
    .success-logo-mobile {
        display: block;
        width: 110px;
        margin: 25px auto 20px;
    }

    .success-logo-mobile img {
        display: block;
        width: 100%;
        height: auto;
    }
}

/* Hidden on desktop */
.success-logo-mobile {
    display: none;
}

@media (max-width: 767px) {

    .success-logo-mobile {
        display: block;
        width: 140px;
        margin: 150px auto 10px;
    }

    .success-logo-mobile img {
        display: block;
        width: 100%;
        height: auto;
        margin: 0 auto;
    }

    /* Logo directly above "Yeah, actually" */
    .success-title {
        margin-top: 0 !important;
    }
}