@font-face {
  font-family: "Rye";
  src: url("fonts/rye-latin-400-normal.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("fonts/space-mono-latin-400-normal.woff2") format("woff2");
  font-display: swap;
}

:root {
  --navy: #1A1E3F;
  --navy-2: #222859;
  --ink: #141733;
  --cream: #FFF1D6;
  --red: #E8402F;
  --yellow: #FFC531;
  --blue: #3B8EDB;
  --blue-deep: #2A68B0;
  --rail: #2E3466;
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --crosshair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cg stroke='%23FFF1D6' stroke-width='4.5'%3E%3Ccircle cx='16' cy='16' r='11'/%3E%3Cpath d='M16 2v7M16 23v7M2 16h7M23 16h7'/%3E%3C/g%3E%3Cg stroke='%23E8402F' stroke-width='2.2'%3E%3Ccircle cx='16' cy='16' r='11'/%3E%3Cpath d='M16 2v7M16 23v7M2 16h7M23 16h7'/%3E%3C/g%3E%3C/g%3E%3Ccircle cx='16' cy='16' r='1.8' fill='%23E8402F'/%3E%3C/svg%3E") 16 16, crosshair;
  color-scheme: dark;
}

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

body {
  margin: 0;
  background: var(--navy);
  color: var(--cream);
  font: 400 18px/1.55 "Archivo", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 16px;
  top: 16px;
  z-index: 100;
  background: var(--yellow);
  color: var(--ink);
  padding: 8px 14px;
  border-radius: 8px;
}

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- awning ---------- */

.awning-wrap {
  position: relative;
  z-index: 10;
  filter: drop-shadow(0 5px 0 rgba(10, 12, 30, .45));
}
.awning {
  height: 56px;
  background: repeating-linear-gradient(90deg, var(--red) 0 44px, var(--cream) 44px 88px);
  -webkit-mask:
    radial-gradient(circle 22px at 22px 34px, #000 96%, #0000 100%) 0 0 / 44px 56px repeat-x,
    linear-gradient(#000, #000) 0 0 / 100% 34px no-repeat;
  mask:
    radial-gradient(circle 22px at 22px 34px, #000 96%, #0000 100%) 0 0 / 44px 56px repeat-x,
    linear-gradient(#000, #000) 0 0 / 100% 34px no-repeat;
}

/* ---------- header ---------- */

.bar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-block: 14px;
  position: relative;
  z-index: 9;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: "Rye", Georgia, serif;
  font-size: 22px;
  line-height: 1;
}
.brand img { width: 36px; height: 36px; border-radius: 50%; }
.nav {
  display: flex;
  gap: 24px;
  margin-left: auto;
}
.nav a {
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  opacity: .85;
}
.nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 26px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  font: 800 17px/1 "Archivo", system-ui, sans-serif;
  font-stretch: 125%;
  text-decoration: none;
  cursor: pointer;
  transition: transform .08s ease-out, box-shadow .08s ease-out;
}
.btn-primary {
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 0 5px 0 var(--ink);
}
.btn-ghost {
  background: transparent;
  color: var(--cream);
  border-color: var(--cream);
  box-shadow: 0 5px 0 rgba(0, 0, 0, .35);
}
.btn:not([aria-disabled="true"]):active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.btn-small { min-height: 44px; padding: 0 16px; font-size: 15px; }
.bar .btn-small { margin-left: 8px; }
.btn[aria-disabled="true"] {
  background: transparent;
  color: rgba(255, 241, 214, .55);
  border: 3px dashed rgba(255, 241, 214, .35);
  box-shadow: none;
  cursor: not-allowed;
}

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

.hero {
  --duck-w: min(64vw, 270px);
  --tin-w: 74px;
  --rail-y: 104px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: repeating-conic-gradient(from 0deg at 50% 78%,
    var(--navy) 0deg 7.1deg, var(--navy-2) 7.9deg 14.2deg, var(--navy) 15deg);
}

.hero-copy {
  position: relative;
  z-index: 6;
  padding-top: clamp(28px, 6vw, 72px);
  padding-bottom: 8px;
}
.hero-copy-inner { max-width: 520px; }

.wordmark {
  margin: 0;
  font-family: "Rye", Georgia, serif;
  font-weight: 400;
  font-size: clamp(56px, 16.5vw, 128px);
  line-height: .95;
  letter-spacing: -.01em;
  text-shadow: .045em .045em 0 var(--red), .085em .085em 0 var(--ink);
}
.ticker {
  margin: 18px 0 0;
  color: var(--yellow);
  font-weight: 800;
  font-stretch: 125%;
  font-size: 22px;
  letter-spacing: .02em;
}
.pitch {
  margin: 14px 0 28px;
  font-size: 20px;
  line-height: 1.5;
  max-width: 28em;
}

/* contract address ticket */
.ticket {
  --stub: 96px;
  --notch: 11px;
  display: flex;
  align-items: stretch;
  background: var(--cream);
  color: var(--ink);
  border-radius: 14px;
  -webkit-mask:
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, #0000 96%, #000 100%) top / 100% 51% no-repeat,
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, #0000 96%, #000 100%) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, #0000 96%, #000 100%) top / 100% 51% no-repeat,
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, #0000 96%, #000 100%) bottom / 100% 51% no-repeat;
}
.ticket-body {
  flex: 1;
  min-width: 0;
  padding: 14px 18px 16px;
}
.ticket-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  opacity: .75;
}
.ca {
  display: block;
  margin-top: 4px;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 16px;
  line-height: 1.4;
  word-break: break-all;
}
.ticket-stub {
  flex: 0 0 var(--stub);
  border: 0;
  border-left: 3px dashed rgba(20, 23, 51, .35);
  background: var(--yellow);
  color: var(--ink);
  font: 800 16px/1 "Archivo", system-ui, sans-serif;
  font-stretch: 125%;
  cursor: pointer;
}
.ticket-stub:disabled { background: #EADFC6; color: rgba(20, 23, 51, .45); cursor: not-allowed; }
.ticket-stub:focus-visible { outline-offset: -6px; outline-color: var(--ink); }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
}
.prelaunch {
  margin: 14px 0 0;
  font-size: 15px;
  opacity: .75;
}
.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hero .socials:has(a:not([hidden])) { margin-top: 18px; }

/* ---------- shooting gallery stage ---------- */

.stage {
  position: relative;
  height: calc(var(--duck-w) * .8456 + 140px);
  container-type: inline-size;
}

.rail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--rail-y);
  height: 12px;
  background: var(--rail);
  border-block: 3px solid var(--ink);
  z-index: 1;
}

.tin {
  all: unset;
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: calc(var(--rail-y) + 10px);
  display: block;
  width: var(--tin-w);
  aspect-ratio: 254 / 214;
  cursor: var(--crosshair);
  animation: glide 16s linear infinite;
  animation-delay: var(--delay);
}
.tin svg {
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
  transition: transform .2s ease-in, filter .2s;
}
.tin.is-down svg {
  transform: perspective(300px) rotateX(84deg);
  filter: brightness(.6);
}
.tin.is-down { pointer-events: none; }
.tin:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; border-radius: 8px; }

@keyframes glide {
  from { transform: translateX(calc(-1 * var(--tin-w) - 8px)); }
  to { transform: translateX(calc(100cqw + 8px)); }
}

.water {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}
.water-back {
  z-index: 2;
  height: calc(var(--rail-y) - 2px);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'%3E%3Cpath d='M0 22 Q30 0 60 22 Q90 0 120 22 V40 H0Z' fill='%232A68B0'/%3E%3C/svg%3E") 0 0 / 120px 40px repeat-x,
    linear-gradient(var(--blue-deep), var(--blue-deep)) 0 38px / 100% 100% no-repeat;
}
.water-front {
  z-index: 4;
  height: 92px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'%3E%3Cpath d='M0 22 Q30 0 60 22 Q90 0 120 22 V40 H0Z' fill='%233B8EDB'/%3E%3Cpath d='M0 22 Q30 0 60 22 Q90 0 120 22' fill='none' stroke='%238CC8FF' stroke-width='4'/%3E%3C/svg%3E") 60px 0 / 120px 40px repeat-x,
    linear-gradient(var(--blue), var(--blue)) 0 38px / 100% 100% no-repeat;
}

.big {
  position: absolute;
  z-index: 3;
  bottom: 34px;
  left: 50%;
  width: var(--duck-w);
  aspect-ratio: 680 / 575;
  transform: translateX(-50%);
}
.big-duck {
  all: unset;
  display: block;
  width: 100%;
  height: 100%;
  cursor: var(--crosshair);
}
.big-duck img { width: 100%; height: 100%; }
.big-duck:focus-visible { outline: 3px solid var(--yellow); outline-offset: 6px; border-radius: 24px; }

.scope {
  position: absolute;
  left: 48.7%;
  top: 36.9%;
  width: 58%;
  color: var(--red);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 2px 0 rgba(20, 23, 51, .5));
}
.laser {
  position: absolute;
  left: 48.7%;
  top: 36.9%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: #FF2D2D;
  box-shadow: 0 0 0 5px rgba(255, 45, 45, .28), 0 0 20px 8px rgba(255, 45, 45, .32);
  opacity: 0;
  pointer-events: none;
}
.stage.is-locked .scope { animation: lockon 1.3s cubic-bezier(.2, .8, .2, 1) forwards; }
.stage.is-locked .laser { animation: dot .5s 1.15s ease-out forwards; }

@keyframes lockon {
  0% { opacity: 0; transform: translate(-50%, -50%) translate(-75%, -60%) scale(1.3); }
  30% { opacity: 1; }
  75% { opacity: 1; transform: translate(-50%, -50%) translate(5%, 3%) scale(.98); }
  100% { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes dot {
  0% { opacity: 0; transform: scale(.2); }
  60% { opacity: 1; transform: scale(1.5); }
  100% { opacity: 1; transform: scale(1); }
}

.bubble {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 100%;
  margin: 0 0 6px;
  padding: 10px 16px;
  background: var(--cream);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 16px;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity .15s, transform .15s;
}
.bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  background: var(--cream);
  border-right: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  transform: rotate(45deg) translate(-2px, -2px);
}
.bubble.is-shown { opacity: 1; transform: translate(-50%, 0); }

.hint {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 10px;
  margin: 0;
  padding-inline: var(--gutter);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}
.score { display: block; font-stretch: 125%; }
@media (max-width: 400px) {
  .water-front { height: 110px; }
  .big { bottom: 58px; }
  .hint { font-size: 14px; }
}

@media (min-width: 960px) {
  .hero {
    --duck-w: clamp(360px, 33vw, 480px);
    --tin-w: clamp(88px, 7vw, 108px);
    --rail-y: 112px;
    padding-bottom: 222px;
    background: repeating-conic-gradient(from 0deg at 72% 72%,
      var(--navy) 0deg 7.1deg, var(--navy-2) 7.9deg 14.2deg, var(--navy) 15deg);
  }
  .hero-copy { padding-top: 22px; }
  .wordmark {
    font-size: clamp(76px, 8.4vw, 124px);
    text-align: center;
    margin-bottom: 26px;
  }
  .hero-copy-inner { max-width: 600px; }
  .ticker { margin-top: 0; }
  .pitch { margin-bottom: 24px; }
  .stage {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--duck-w) * .8456 + 80px);
    pointer-events: none;
  }
  .tin, .big { pointer-events: auto; }
  .big {
    left: auto;
    right: max(4vw, calc((100vw - var(--wrap)) / 2 + var(--gutter)));
    bottom: 40px;
    transform: none;
  }
  .bubble { left: 6%; }
  .water-front { height: 100px; }
  .hint {
    left: max(0px, calc((100% - var(--wrap)) / 2));
    right: auto;
    bottom: 16px;
    text-align: left;
    font-size: 16px;
  }
  .score { display: inline; margin-left: 10px; }
}

/* ---------- sections ---------- */

.section { padding-block: clamp(64px, 9vw, 120px); }
.section-title {
  margin: 0 0 28px;
  font-family: "Rye", Georgia, serif;
  font-weight: 400;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.05;
}

.lore-grid { display: grid; gap: 8px 64px; }
.lore p {
  margin: 0 0 1em;
  font-size: 21px;
  line-height: 1.6;
  max-width: 32em;
}
@media (min-width: 860px) {
  .lore-grid { grid-template-columns: 5fr 7fr; align-items: start; }
}

.how { background: var(--navy-2); }
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 36px;
}
.step-num {
  display: block;
  margin-bottom: 6px;
  font-family: "Rye", Georgia, serif;
  font-size: 64px;
  line-height: 1;
  color: var(--yellow);
}
.step h3 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1.25;
}
.step p { margin: 0; max-width: 30em; opacity: .88; }
@media (min-width: 860px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 48px; }
}

.board {
  display: grid;
  margin: 0;
  background: var(--navy-2);
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: 0 6px 0 var(--ink);
}
.board > div { padding: 26px 30px; }
.board > div + div { border-top: 3px dashed rgba(255, 241, 214, .22); }
.board dt { font-size: 16px; opacity: .8; }
.board dd {
  margin: 6px 0 0;
  color: var(--yellow);
  font-weight: 800;
  font-stretch: 125%;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.15;
}
@media (min-width: 760px) {
  .board { grid-template-columns: repeat(3, 1fr); }
  .board > div + div { border-top: 0; border-left: 3px dashed rgba(255, 241, 214, .22); }
}

.chart { padding-top: 0; }
.chart-frame {
  position: relative;
  display: grid;
  place-items: center;
  height: clamp(420px, 52vw, 620px);
  overflow: hidden;
  background: var(--navy-2);
  border: 3px solid var(--ink);
  border-radius: 20px;
}
.chart-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.chart-empty { margin: 0; padding: 24px; text-align: center; opacity: .8; }

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

.footer {
  border-top: 3px solid var(--ink);
  background: var(--ink);
  padding-block: 48px 56px;
}
.footer-inner { display: grid; gap: 20px; justify-items: start; }
.footer-brand {
  margin: 0;
  font-family: "Rye", Georgia, serif;
  font-size: 32px;
  line-height: 1;
}
.disclaimer { margin: 0; max-width: 46em; font-size: 15px; opacity: .7; }

@media (max-width: 720px) {
  .nav { display: none; }
  .bar .btn-small { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .tin {
    animation: none;
    transform: translateX(calc(var(--pos) * 1cqw));
  }
  .scope, .laser { animation: none !important; opacity: 1; }
  .btn, .bubble, .tin svg { transition: none; }
}