:root {
  --bg: #0a0a0b;
  --bg-soft: #131315;
  --ink: #edeae3;
  --ink-dim: #8c8880;
  --line: #232325;
  --yellow: #ffcc33;
  --yellow-glow: rgba(255, 204, 51, 0.5);
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: inherit;
}

.wordmark {
  font-family: ui-rounded, "SF Pro Rounded", "Segoe UI Rounded", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* ---------- Gate / splash ---------- */

#gate {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  background: var(--bg);
  z-index: 20;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.6s ease;
}

#gate.hidden {
  opacity: 0;
  pointer-events: none;
}

.gate-mark {
  width: min(58vw, 240px);
  filter: drop-shadow(0 0 28px var(--yellow-glow)) drop-shadow(0 0 60px rgba(255, 204, 51, 0.22));
  animation: breathe 4.5s ease-in-out infinite;
}

@keyframes breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.035);
  }
}

.gate-enter {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  animation: pulse 2.2s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gate-mark,
  .gate-enter {
    animation: none;
  }
}

/* ---------- App shell ---------- */

#app[hidden] {
  display: none;
}

.app-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(3rem + env(safe-area-inset-top)) 1.5rem calc(2rem + env(safe-area-inset-bottom));
}

.brand-mark {
  width: 84px;
  filter: drop-shadow(0 0 18px var(--yellow-glow));
  margin-bottom: 2.5rem;
  opacity: 0;
  animation: fade-in 1s ease forwards;
}

@keyframes fade-in {
  to {
    opacity: 1;
  }
}

.reveal-lines {
  max-width: 34rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-bottom: 2.75rem;
}

/* Every direct child participates in the staggered reveal — the napkin
   figure sits in the sequence alongside the copy. */
.reveal-lines > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-lines > *.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-lines p {
  margin: 0 auto;
  max-width: 26rem;
  width: 100%;
  font-size: clamp(1.05rem, 4.6vw, 1.35rem);
  line-height: 1.5;
  color: var(--ink);
}

.reveal-lines p.dim {
  color: var(--ink-dim);
}

.cta {
  width: 100%;
  max-width: 22rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.cta.visible {
  opacity: 1;
  transform: translateY(0);
}

.tier-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}

.tier-divider {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  opacity: 0.7;
}

.counter {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
}

.counter strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.join-btn {
  width: 100%;
  padding: 1rem 1.5rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}

.join-btn:hover,
.join-btn:focus-visible {
  border-color: var(--yellow);
  box-shadow: 0 0 22px var(--yellow-glow);
}

.join-btn:active {
  transform: scale(0.98);
}

.join-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.fine-print {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ink-dim);
  text-align: center;
}

.error-msg {
  margin: 0;
  font-size: 0.82rem;
  color: #e8846b;
  text-align: center;
  min-height: 1.2em;
}

.notice {
  font-size: 0.8rem;
  color: var(--ink-dim);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.6rem 1rem;
  max-width: 22rem;
  text-align: center;
}

.hoodie-prize-link {
  display: block;
  width: 100%;
  text-decoration: none;
}

.hoodie-prize {
  width: 100%;
  max-width: 15rem;
  margin: 0.2rem auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.hoodie-prize img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 14px;
  background: #f4f1ea;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: box-shadow 0.25s ease, transform 0.15s ease;
}

.hoodie-prize-link:hover img,
.hoodie-prize-link:focus-visible img {
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 22px var(--yellow-glow);
}

.hoodie-prize-link:active img {
  transform: scale(0.98);
}

.hoodie-caption {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--ink-dim);
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.hoodie-caption:hover,
.hoodie-caption:focus-visible {
  color: var(--ink);
}

.hoodie-prize-link:hover .hoodie-caption,
.hoodie-prize-link:focus-visible .hoodie-caption {
  color: var(--ink);
}

.free-entry {
  width: 100%;
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

.free-entry-toggle {
  background: none;
  border: none;
  color: var(--ink-dim);
  font-size: 0.76rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 0.3rem;
}

.free-entry-toggle:hover {
  color: var(--ink);
}

.free-entry-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.free-entry-form[hidden] {
  display: none;
}

.free-entry-form input {
  width: 100%;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  font-size: 0.92rem;
}

.free-entry-form input:focus-visible {
  outline: none;
  border-color: var(--yellow);
}

.free-entry-row {
  display: grid;
  grid-template-columns: 1fr 4rem 5rem;
  gap: 0.6rem;
}

footer.site-footer {
  margin-top: 3rem;
  width: 100%;
  max-width: 22rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--ink-dim);
}

.mute-btn {
  border: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--ink-dim);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mute-btn[data-muted="false"] {
  color: var(--yellow);
  border-color: var(--yellow);
}

/* ---------- Success / generic sub-pages ---------- */

.page-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem calc(1.5rem + env(safe-area-inset-right)) 2rem calc(1.5rem + env(safe-area-inset-left));
  text-align: center;
}

.page-mark {
  width: 120px;
  filter: drop-shadow(0 0 20px var(--yellow-glow));
}

.page-shell h1 {
  font-family: ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  font-size: 1.6rem;
  margin: 0;
}

.page-shell p {
  margin: 0;
  color: var(--ink-dim);
  max-width: 24rem;
  line-height: 1.55;
}

.founding-badge {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--yellow);
  border: 1px solid var(--yellow);
  border-radius: 999px;
  padding: 0.6rem 1.2rem;
  cursor: pointer;
  transition: box-shadow 0.25s ease;
}

.founding-badge:hover,
.founding-badge:focus-visible {
  box-shadow: 0 0 18px var(--yellow-glow);
}

.back-link {
  color: var(--ink-dim);
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Admin ---------- */

.admin-shell {
  min-height: 100dvh;
  padding: 2rem 1.25rem calc(2rem + env(safe-area-inset-bottom));
  max-width: 46rem;
  margin: 0 auto;
}

.admin-shell h1 {
  font-family: ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  font-size: 1.3rem;
  margin: 0 0 1.5rem;
}

.admin-gate {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  max-width: 20rem;
  margin: 4rem auto;
  text-align: center;
}

.admin-gate input {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-size: 1rem;
}

.admin-gate button,
.queue-row button,
.admin-shell > button {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 10px;
  padding: 0.7rem 1rem;
  cursor: pointer;
}

.admin-gate button:hover {
  border-color: var(--yellow);
}

.queue-summary {
  font-size: 0.85rem;
  color: var(--ink-dim);
  margin-bottom: 1rem;
}

.queue-table {
  width: 100%;
  border-collapse: collapse;
}

.queue-row {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
}

.queue-row .num {
  color: var(--yellow);
  font-variant-numeric: tabular-nums;
}

.queue-row .status {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-dim);
}

.queue-row .status.sent {
  color: #6fbf8e;
}

.queue-row button {
  font-size: 0.78rem;
  padding: 0.4rem 0.75rem;
}

.queue-row button:hover {
  border-color: var(--yellow);
}

.queue-row button:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ---------- Napkin sketch ---------- */

@font-face {
  font-family: "Caveat";
  src: url("/fonts/caveat-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.napkin {
  position: relative;
  margin: 0.6rem 0;
  width: 100%;
  /* cqw units below let the overlaid ink scale in lockstep with the photo. */
  container-type: inline-size;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.napkin img {
  width: 100%;
  height: auto;
}

/* A warm scrim knocks the pen strokes back so the crisp layer above
   reads as the clean version of the writing rather than competing with
   it — the handwriting stays visible underneath, just quieter. */
.napkin::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(214, 199, 176, 0.42);
  pointer-events: none;
}

/* The crisp layer that sits directly on top of the pen strokes. */
.napkin-ink {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.ni {
  position: absolute;
  font-family: "Caveat", ui-rounded, "Bradley Hand", cursive;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: #17130d;
  opacity: 0;
  transform: rotate(var(--r, 0deg));
  transform-origin: left center;
}

/* Fitted to the pen strokes: each word is measured off the photo, then
   sized by the geometric mean of the width and height match and centred
   on its ink. Caveat is taller and narrower than the handwriting, so
   matching width alone would double the letter heights. */
.ni-silly  { left: 23.98%; top:  8.89%; font-size: 7.85cqw; }
.ni-smile  { left: 37.45%; top: 20.72%; font-size: 7.47cqw; }
.ni-club   { left: 50.15%; top: 42.60%; font-size: 8.87cqw; }
.ni-proj   { left: 11.13%; top: 32.94%; font-size: 4.71cqw; }
.ni-year   { left: 21.28%; top: 42.97%; font-size: 6.00cqw; }
.ni-levels { left:  7.14%; top: 70.70%; font-size: 7.28cqw; }

/* Strokes land one at a time, then never quite settle — a hand-drawn
   "boil". steps() makes it snap between frames like traced animation
   cels rather than gliding, which is what sells it as drawn. */
.napkin.visible .ni {
  animation:
    ink-appear 0.45s ease-out var(--d, 0s) forwards,
    boil var(--bd, 0.8s) steps(1, end) var(--d, 0s) infinite;
}

@keyframes ink-appear {
  to {
    opacity: 1;
  }
}

@keyframes boil {
  0% {
    transform: rotate(var(--r, 0deg)) translate(0, 0);
  }
  33% {
    transform: rotate(calc(var(--r, 0deg) + 0.35deg)) translate(0.35%, -0.4%);
  }
  66% {
    transform: rotate(calc(var(--r, 0deg) - 0.3deg)) translate(-0.3%, 0.35%);
  }
  100% {
    transform: rotate(var(--r, 0deg)) translate(0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .napkin.visible .ni {
    animation: ink-appear 0.45s ease-out var(--d, 0s) forwards;
  }
}