/* The Hallucination Protocol · placeholder site
   Charred iron and tarnished bronze, matching the logo art. */

:root {
  --bg: #0b0806;
  --bg-2: #15100c;
  --fg: #ece2d4;
  --muted: #a8998a;
  --bronze: #c98a4b;
  --bronze-hi: #f0c58e;
  --line: #3a2c20;
  --plate: #1b1510;
  --err: #ff8b7a;
  --ok: #b9e3a4;
  --head: 'Saira Condensed', 'Arial Narrow', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, #2a1a0d 0%, transparent 70%), var(--bg);
  color: var(--fg);
  font: 400 16px/1.6 var(--mono);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

main { width: min(960px, 100% - 32px); margin: 0 auto; }

/* ── hero ───────────────────────────────────────────── */
.hero { min-height: 92vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 0 64px; }
.logo { width: min(860px, 100%); }
.logo img {
  width: 100%;
  /* fade the photo's dark edges into the page */
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
}
.lede { margin: 28px 0 14px; max-width: 40ch; text-wrap: balance; font: 500 clamp(22px, 3.4vw, 30px)/1.25 var(--head); letter-spacing: 0.01em; color: var(--fg); }
.lede span { display: block; }
.about { margin: 0 0 34px; max-width: 52ch; font-size: 15px; color: var(--muted); text-wrap: balance; }

/* ── buttons ────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px; border: 1px solid var(--bronze); border-radius: 2px;
  background: linear-gradient(180deg, #d9a066, #9a6232); color: #140c05;
  font: 700 17px/1 var(--head); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; transition: filter 0.15s, transform 0.15s;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.6; cursor: progress; }
.btn:focus-visible, .plates a:focus-visible, input:focus-visible { outline: 2px solid var(--bronze-hi); outline-offset: 3px; }

/* ── link sections ──────────────────────────────────── */
section.links, section.join { padding: 56px 0; border-top: 1px solid var(--line); }
h2 {
  display: flex; align-items: baseline; gap: 14px; margin-bottom: 24px;
  font: 800 clamp(30px, 5vw, 44px)/1 var(--head); letter-spacing: 0.06em; text-transform: uppercase;
  background: linear-gradient(180deg, var(--bronze-hi), var(--bronze) 70%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
h2 span { font: 600 13px/1 var(--mono); letter-spacing: 0.1em; color: var(--muted); -webkit-text-fill-color: var(--muted); }

.plates { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.plates a, .plates .soon {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 18px 20px; border: 1px solid var(--line); border-radius: 2px;
  background: linear-gradient(180deg, #221a13, var(--plate));
  box-shadow: inset 0 1px 0 rgba(240, 197, 142, 0.08);
  font: 700 20px/1.1 var(--head); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.plates a span, .plates .soon span { color: var(--bronze); font-family: var(--mono); font-size: 15px; transition: transform 0.15s; }
.plates a:hover { border-color: var(--bronze); color: var(--bronze-hi); background: linear-gradient(180deg, #2b2016, #1e1711); }
.plates a:hover span { transform: translate(2px, -2px); }
/* not live yet: same plate, no link, dimmed */
.plates .soon { color: #7d6e60; background: var(--plate); border-style: dashed; }
.plates .soon span { color: #7d6e60; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }

/* ── signup ─────────────────────────────────────────── */
.join > p { color: var(--muted); max-width: 52ch; margin-bottom: 22px; }
.signup { display: flex; flex-wrap: wrap; gap: 10px; max-width: 560px; }
.signup input[type=email] {
  flex: 1 1 260px; min-width: 0; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 2px; background: #0f0b08; color: var(--fg);
  font: 400 16px/1.2 var(--mono);
}
.signup input[type=email]::placeholder { color: #6e6052; }
.signup .btn { flex: 0 0 auto; }
.turnstile:empty { display: none; }
.form-msg { flex-basis: 100%; min-height: 1.6em; font-size: 14px; }
.form-msg.ok { color: var(--ok); }
.form-msg.err { color: var(--err); }
.signup.done input, .signup.done .btn { display: none; }
.fine { font-size: 12px; color: #7d6e60 !important; }

/* ── footer ─────────────────────────────────────────── */
footer { padding: 48px 16px 56px; border-top: 1px solid var(--line); text-align: center; color: #7d6e60; font-size: 12px; letter-spacing: 0.08em; }
footer .emblem { width: 96px; margin: 0 auto 16px; border-radius: 50%; opacity: 0.85; }

/* ── standalone pages (thanks, 404) ─────────────────── */
.page { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 24px 16px; }
.page .box { max-width: 560px; }
.page .emblem { width: 120px; margin: 0 auto 28px; border-radius: 50%; }
.page h1 { font: 800 clamp(36px, 7vw, 60px)/1.05 var(--head); letter-spacing: 0.04em; text-transform: uppercase; color: var(--bronze-hi); margin-bottom: 16px; }
.page p { color: var(--muted); margin-bottom: 32px; }

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