/* Retro 1976 theme, shared by invite and admin */
:root {
  --cream: #f6ead0;
  --cream-2: #efdfbd;
  --orange: #d9622b;
  --orange-2: #b84d1f;
  --mustard: #e8a623;
  --avocado: #7f8e3b;
  --brown: #4a2c1a;
  --brown-2: #2f1a0e;
  --teal: #2a7f7a;
  --ink: var(--brown-2);
  --muted: #7a5a44;
  --bg: var(--cream);
  --card: #fff8e8;
  --stripe: repeating-linear-gradient(
    90deg,
    var(--brown) 0 12px, var(--orange) 12px 24px, var(--mustard) 24px 36px,
    var(--avocado) 36px 48px, var(--teal) 48px 60px
  );
  --radius: 18px;
  --shadow: 0 10px 30px rgba(74, 44, 26, 0.18);
  --font-display: "Righteous", "Arial Black", sans-serif;
  --font-body: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141f1e;
    --card: #1d2b2a;
    --ink: #f6ead0;
    --muted: #a9bdb6;
    --cream-2: #263836;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  }
}
:root[data-theme="dark"] {
  --bg: #141f1e;
  --card: #1d2b2a;
  --ink: #f6ead0;
  --muted: #a9bdb6;
  --cream-2: #263836;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
}
a { color: var(--orange-2); }
img { max-width: 100%; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.01em; margin: 0 0 0.4em; }
h2 { font-size: clamp(1.5rem, 4.5vw, 2.1rem); color: var(--orange); }
h3 { font-size: 1.15rem; color: var(--brown); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) h3 { color: var(--mustard); } }
p { margin: 0 0 0.8em; }
.muted { color: var(--muted); }
.wrap { max-width: 720px; margin: 0 auto; padding: 0 16px; }
.wide { max-width: 1100px; }

/* stripe band */
.band { height: 14px; background: var(--stripe); }

/* Buttons */
.btn {
  appearance: none; border: 0; cursor: pointer;
  font: 600 1rem var(--font-body);
  padding: 0.85em 1.4em; border-radius: 999px;
  background: var(--orange); color: #fff8e8;
  box-shadow: 0 4px 0 var(--orange-2);
  transition: transform 0.08s ease, box-shadow 0.08s ease, opacity 0.2s;
  text-decoration: none; display: inline-flex; align-items: center; gap: 0.5em; justify-content: center;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--orange-2); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.secondary { background: var(--avocado); box-shadow: 0 4px 0 #5f6b2a; }
.btn.secondary:active { box-shadow: 0 1px 0 #5f6b2a; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn.ghost:active { box-shadow: inset 0 0 0 2px var(--ink); }
.btn.small { font-size: 0.85rem; padding: 0.5em 0.9em; }
.btn.block { width: 100%; }
.btn.big { font-size: 1.15rem; padding: 1em 1.4em; }

/* Cards */
.card {
  background: var(--card); border-radius: var(--radius); padding: 22px 20px;
  box-shadow: var(--shadow); margin: 18px 0;
}

/* ---- cassette line-art frame for cards ----
   The card border is the shell. Lines at screw height run from the corner screws into the reel
   window (top) and the trapezoid (bottom). On phones the cassette stands upright: window on the
   left edge, trapezoid on the right edge. */
.card {
  position: relative;
  border: 3px solid var(--ink);
  border-radius: 10px;
  --screw: radial-gradient(circle, var(--ink) 0 4px, transparent 4.5px);
  --line: linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat;
}
.card::before, .card::after { content: ""; position: absolute; pointer-events: none; box-sizing: border-box; }
/* reel window: bordered box with a reel at each end and the tape band between */
.card::before {
  border: 3px solid var(--ink); border-radius: 10px;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2060%2060%22%3E%20%3Cg%20fill=%22none%22%20stroke=%22%232f1a0e%22%3E%3Ccircle%20cx=%2230%22%20cy=%2230%22%20r=%2226%22%20stroke-width=%224%22/%3E%20%3Ccircle%20cx=%2230%22%20cy=%2230%22%20r=%2213.5%22%20stroke-width=%227%22%20stroke-dasharray=%227%207%22%20transform=%22rotate%2815%2030%2030%29%22/%3E%3C/g%3E%20%3Ccircle%20cx=%2230%22%20cy=%2230%22%20r=%223.5%22%20fill=%22%232f1a0e%22/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2060%2060%22%3E%20%3Cg%20fill=%22none%22%20stroke=%22%232f1a0e%22%3E%3Ccircle%20cx=%2230%22%20cy=%2230%22%20r=%2226%22%20stroke-width=%224%22/%3E%20%3Ccircle%20cx=%2230%22%20cy=%2230%22%20r=%2213.5%22%20stroke-width=%227%22%20stroke-dasharray=%227%207%22%20transform=%22rotate%2815%2030%2030%29%22/%3E%3C/g%3E%20%3Ccircle%20cx=%2230%22%20cy=%2230%22%20r=%223.5%22%20fill=%22%232f1a0e%22/%3E%3C/svg%3E"), var(--line);
  background-repeat: no-repeat;
}
/* trapezoid: ink through an SVG mask */
.card::after {
  background: var(--ink);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}

@media (min-width: 700px) {
  .card {
    --win-w: clamp(240px, 58%, 420px);
    --trap-w: clamp(220px, 44%, 300px);
    padding: 92px 28px 72px;
    background-image: var(--screw), var(--screw), var(--screw), var(--screw), var(--line), var(--line), var(--line), var(--line);
    background-size: 10px 10px, 10px 10px, 10px 10px, 10px 10px,
      calc((100% - var(--win-w)) / 2 - 14px) 3px, calc((100% - var(--win-w)) / 2 - 14px) 3px,
      calc((100% - var(--trap-w)) / 2 - 14px) 3px, calc((100% - var(--trap-w)) / 2 - 14px) 3px;
    background-position: 10px 10px, calc(100% - 10px) 10px, 10px calc(100% - 10px), calc(100% - 10px) calc(100% - 10px),
      14px 13.5px, calc(100% - 14px) 13.5px, 14px calc(100% - 13.5px), calc(100% - 14px) calc(100% - 13.5px);
  }
  .card::before {
    top: 12px; left: 50%; transform: translateX(-50%); width: var(--win-w); height: 58px;
    background-size: 38px 38px, 38px 38px, calc(100% - 128px) 9px;
    background-position: 12px center, calc(100% - 12px) center, center;
  }
  .card::after {
    bottom: 11px; left: 50%; transform: translateX(-50%); width: var(--trap-w); aspect-ratio: 300 / 40;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20300%2040%22%3E%20%3Cpath%20d=%22M4%2040%20L40%203%20H260%20L296%2040%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%224%22%20stroke-linejoin=%22round%22/%3E%20%3Ccircle%20cx=%2280%22%20cy=%2222%22%20r=%225%22%20fill=%22%23000%22/%3E%3Ccircle%20cx=%22118%22%20cy=%2222%22%20r=%224%22%20fill=%22%23000%22/%3E%20%3Crect%20x=%22143%22%20y=%2215%22%20width=%2214%22%20height=%2214%22%20rx=%222%22%20fill=%22%23000%22/%3E%20%3Ccircle%20cx=%22182%22%20cy=%2222%22%20r=%224%22%20fill=%22%23000%22/%3E%3Ccircle%20cx=%22220%22%20cy=%2222%22%20r=%225%22%20fill=%22%23000%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20300%2040%22%3E%20%3Cpath%20d=%22M4%2040%20L40%203%20H260%20L296%2040%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%224%22%20stroke-linejoin=%22round%22/%3E%20%3Ccircle%20cx=%2280%22%20cy=%2222%22%20r=%225%22%20fill=%22%23000%22/%3E%3Ccircle%20cx=%22118%22%20cy=%2222%22%20r=%224%22%20fill=%22%23000%22/%3E%20%3Crect%20x=%22143%22%20y=%2215%22%20width=%2214%22%20height=%2214%22%20rx=%222%22%20fill=%22%23000%22/%3E%20%3Ccircle%20cx=%22182%22%20cy=%2222%22%20r=%224%22%20fill=%22%23000%22/%3E%3Ccircle%20cx=%22220%22%20cy=%2222%22%20r=%225%22%20fill=%22%23000%22/%3E%3C/svg%3E");
  }
}

@media (max-width: 699px) {
  .card {
    --trap-h: clamp(170px, 55%, 300px);
    padding: 24px 54px 24px 76px; min-height: 190px;
    background-image: var(--screw), var(--screw), var(--screw), var(--screw), var(--line), var(--line), var(--line), var(--line);
    background-size: 10px 10px, 10px 10px, 10px 10px, 10px 10px,
      3px 18px, 3px 18px,
      3px calc((100% - var(--trap-h)) / 2 - 14px), 3px calc((100% - var(--trap-h)) / 2 - 14px);
    background-position: 10px 10px, calc(100% - 10px) 10px, 10px calc(100% - 10px), calc(100% - 10px) calc(100% - 10px),
      13.5px 14px, 13.5px calc(100% - 14px),
      calc(100% - 13.5px) 14px, calc(100% - 13.5px) calc(100% - 14px);
  }
  .card::before {
    top: 30px; bottom: 30px; left: 12px; width: 48px;
    background-size: 36px 36px, 36px 36px, 9px calc(100% - 104px);
    background-position: center 10px, center calc(100% - 10px), center;
  }
  .card::after {
    right: 11px; top: 50%; transform: translateY(-50%); height: var(--trap-h); aspect-ratio: 40 / 300;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2040%20300%22%3E%20%3Cpath%20d=%22M40%204%20L3%2040%20V260%20L40%20296%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%224%22%20stroke-linejoin=%22round%22/%3E%20%3Ccircle%20cx=%2218%22%20cy=%2280%22%20r=%225%22%20fill=%22%23000%22/%3E%3Ccircle%20cx=%2218%22%20cy=%22118%22%20r=%224%22%20fill=%22%23000%22/%3E%20%3Crect%20x=%2211%22%20y=%22143%22%20width=%2214%22%20height=%2214%22%20rx=%222%22%20fill=%22%23000%22/%3E%20%3Ccircle%20cx=%2218%22%20cy=%22182%22%20r=%224%22%20fill=%22%23000%22/%3E%3Ccircle%20cx=%2218%22%20cy=%22220%22%20r=%225%22%20fill=%22%23000%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2040%20300%22%3E%20%3Cpath%20d=%22M40%204%20L3%2040%20V260%20L40%20296%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%224%22%20stroke-linejoin=%22round%22/%3E%20%3Ccircle%20cx=%2218%22%20cy=%2280%22%20r=%225%22%20fill=%22%23000%22/%3E%3Ccircle%20cx=%2218%22%20cy=%22118%22%20r=%224%22%20fill=%22%23000%22/%3E%20%3Crect%20x=%2211%22%20y=%22143%22%20width=%2214%22%20height=%2214%22%20rx=%222%22%20fill=%22%23000%22/%3E%20%3Ccircle%20cx=%2218%22%20cy=%22182%22%20r=%224%22%20fill=%22%23000%22/%3E%3Ccircle%20cx=%2218%22%20cy=%22220%22%20r=%225%22%20fill=%22%23000%22/%3E%3C/svg%3E");
  }
}

/* Forms */
label { display: block; font-weight: 600; margin: 14px 0 6px; }
input[type="text"], input[type="number"], input[type="password"], input[type="email"], input[type="tel"], textarea, select {
  width: 100%; font: inherit; color: var(--ink); background: var(--cream-2);
  border: 2px solid transparent; border-radius: 12px; padding: 0.7em 0.9em;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--orange); }
textarea { min-height: 80px; resize: vertical; }
.hint { font-size: 0.9rem; color: var(--muted); margin-top: 4px; }
.err { color: var(--orange-2); font-weight: 600; }

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