:root {
  --bg: #f3efe7;
  --surface: #fbf9f4;
  --ink: #1d1b17;
  --muted: #6f685c;
  --faint: #a59d8f;
  --line: #dcd5c8;
  --accent: #9a4b2f;
  --accent-ink: #fff;
  --focus: #9a4b2f55;
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --radius: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141311;
    --surface: #1c1a17;
    --ink: #efe9de;
    --muted: #a39b8d;
    --faint: #6b655a;
    --line: #34302a;
    --accent: #e08a62;
    --accent-ink: #1a0f0a;
    --focus: #e08a6255;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration-color: var(--faint); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- holding page / code entry ---------- */
.gate {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 28px 16px;
}
.gate-top, .gate-foot {
  display: flex; justify-content: space-between; align-items: center;
  max-width: 1080px; width: 100%; margin: 0 auto;
  font: 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.gate-foot { justify-content: center; color: var(--faint); }
.gate-main {
  align-self: center; justify-self: center;
  width: 100%; max-width: 560px; text-align: center;
  padding: 40px 0;
}
.gate h1 {
  font: 400 clamp(52px, 13vw, 104px)/.92 var(--serif);
  letter-spacing: -.02em;
  margin: 0 0 22px;
}
.gate h1 em { color: var(--accent); }
.gate p.lede { color: var(--muted); margin: 0 auto 36px; max-width: 34ch; font-size: 17px; }

.code-form { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.code-field {
  position: relative; width: 100%; max-width: 380px;
}
.code-field input {
  width: 100%;
  background: transparent;
  border: 0; border-bottom: 1.5px solid var(--ink);
  padding: 10px 4px 12px;
  font: 500 26px/1.2 var(--mono);
  letter-spacing: .18em;
  text-align: center;
  text-transform: lowercase;
  border-radius: 0;
}
.code-field input::placeholder { color: var(--faint); letter-spacing: .12em; }
.code-field input:focus { outline: none; border-bottom-color: var(--accent); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 999px;
  padding: 12px 26px;
  background: var(--ink); color: var(--bg);
  font-weight: 500; font-size: 15px;
  cursor: pointer; text-decoration: none;
  transition: transform .15s ease, opacity .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .5; cursor: progress; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn.accent { background: var(--accent); color: var(--accent-ink); }
.form-msg { min-height: 1.5em; font-size: 14px; color: var(--accent); margin: 0; }
.shake { animation: shake .4s ease; }
@keyframes shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }

/* ---------- loading ---------- */
.loading { min-height: 100dvh; display: grid; place-items: center; color: var(--faint); font: 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.loading::before { content: ''; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--ink); animation: spin .8s linear infinite; margin-bottom: 12px; }
.loading { grid-auto-flow: row; align-content: center; justify-items: center; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}