@font-face { font-family: "Inter"; font-style: normal; font-weight: 100; font-display: swap;
  src: url("/assets/inter-latin-100-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("/assets/inter-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/assets/jetbrains-mono-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  --ground: #0B0E12;
  --text: #ECE9E3;
  --text-dim: #8A8F98;
  --hair: rgba(255,255,255,0.10);
  --hair-strong: rgba(255,255,255,0.18);
  --accent: #E2342A;
  --font-grotesque: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", "Helvetica Neue", "Inter", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; max-width: 100%; }
body {
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-grotesque);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}

.wrap { width: 100%; max-width: 920px; margin: 0 auto; padding: 0 28px; }

/* HERO */
.hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; position: relative; }
.titleblock { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.wordmark {
  font-family: var(--font-grotesque);
  font-weight: 100;
  letter-spacing: -0.015em;
  line-height: 0.92;
  font-size: clamp(44px, 14vw, 200px);
  margin: 0;
}
.index-tag { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); letter-spacing: 0.12em; white-space: nowrap; padding-bottom: 6px; }
.hero hr { border: 0; border-top: 1px solid var(--hair); margin: 22px 0 18px; }
.tagline { font-weight: 300; font-size: clamp(15px, 2.2vw, 19px); color: var(--text); max-width: 46ch; margin: 0; }
.hero-access {
  display: inline-block; margin-top: 22px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 3px; width: fit-content;
}
.hero-access:hover { color: var(--accent); }
.scrollcue { position: absolute; bottom: 34px; left: 28px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--text-dim); text-transform: uppercase; }

/* REGISTRY */
.registry { padding: 60px 0 40px; }
.registry-head {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-dim); border-bottom: 1px solid var(--hair); padding-bottom: 12px; margin-bottom: 34px;
  display: flex; justify-content: space-between;
}

/* CARD */
.card { position: relative; border: 1px solid var(--hair-strong); margin-bottom: 28px; }
.card .tick { position: absolute; width: 9px; height: 9px; border-color: var(--accent); border-style: solid; border-width: 0; }
.card .tick.tl { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.card .tick.tr { top: -1px; right: -1px; border-top-width: 1px; border-right-width: 1px; }
.card .tick.bl { bottom: -1px; left: -1px; border-bottom-width: 1px; border-left-width: 1px; }
.card .tick.br { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }
.card-media { width: 100%; aspect-ratio: 16/9; background: #06080B; border-bottom: 1px solid var(--hair); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-media .pending { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--text-dim); text-transform: uppercase; }
.card-body { padding: 22px 24px 24px; }
.card-object { font-weight: 400; font-size: 20px; margin: 0 0 18px; letter-spacing: 0.01em; }
.spec { font-family: var(--font-mono); font-size: 12.5px; }
.spec-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; padding: 7px 0; border-top: 1px solid var(--hair); }
.spec-row:first-child { border-top: 0; }
.spec-key { color: var(--text-dim); letter-spacing: 0.12em; }
.spec-val { color: var(--text); overflow-wrap: anywhere; }
.spec-val.live { font-style: italic; }
.spec-val.live::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: middle; }
.spec-val.unminted { color: var(--text-dim); }
.card-link { display: inline-block; margin-top: 18px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 2px; }
.card-link:hover { color: var(--accent); }

/* MANIFESTO */
.manifesto { max-width: 60ch; margin: 56px auto; text-align: left; }
.manifesto p { font-weight: 300; font-size: 17px; line-height: 1.7; color: var(--text); margin: 0; }

/* SIGNUP */
.signup { border-top: 1px solid var(--hair); padding: 54px 0 40px; }
.signup-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.signup h2 { font-weight: 200; font-size: clamp(22px, 4vw, 34px); letter-spacing: 0.04em; margin: 0 0 8px; text-transform: uppercase; }
.signup .note { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); margin-bottom: 26px; letter-spacing: 0.04em; }
.signup form .field-wrap { display: flex; gap: 0; max-width: 460px; border: 1px solid var(--hair-strong); }
.signup input[type=email] {
  flex: 1; min-width: 0; background: transparent; border: 0; color: var(--text);
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; padding: 14px 16px; outline: none;
}
.signup input[type=email]::placeholder { color: var(--text-dim); }
.signup input[type=email]:focus { box-shadow: inset 0 -2px 0 var(--accent); }
.signup button { background: transparent; border: 0; border-left: 1px solid var(--hair-strong); color: var(--text); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; padding: 0 20px; cursor: pointer; }
.signup button:hover { color: var(--accent); }

/* confirmation state */
.signup-confirmed { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; color: var(--text); padding: 14px 0; }
.signup-confirmed .confirmed-mark { color: var(--accent); margin-right: 8px; }
.signup .form-error { font-family: var(--font-mono); font-size: 11px; color: var(--accent); margin-top: 8px; letter-spacing: 0.06em; }

/* FOOTER */
footer { border-top: 1px solid var(--hair); padding: 28px 0 60px; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--text-dim); }
.monogram-img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: block; }

@media (max-width: 640px) {
  .wrap { padding: 0 18px; }
  .card-body { padding: 18px 16px 20px; }
  .spec-row { grid-template-columns: 1fr; gap: 2px; padding: 9px 0; }
  footer { flex-direction: column; gap: 14px; align-items: flex-start; }
}