/* Shared tokens + primitives. */
:root {
  --bg: #0c0a09; --bg-2: #15100d; --ink: #f3e9dc; --ink-dim: #a89a8a; --rule: #33261e;
  --ember: #b3200e; --hot: #ff5a1f; --glow: #ffb347; --white-hot: #fff1c2;
  --heat: linear-gradient(90deg, #3a0a00 0%, var(--ember) 22%, var(--hot) 50%, var(--glow) 78%, var(--white-hot) 100%);
  --display: "Big Shoulders Display", "Oswald", Impact, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --gutter: clamp(16px, 4vw, 56px);
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--serif); font-size: 18px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
::selection { background: var(--hot); color: var(--bg); }
.heat { height: 7px; background: var(--heat); background-size: 200% 100%; animation: shimmer 14s ease-in-out infinite alternate; }
@keyframes shimmer { from { background-position: 0% 0; } to { background-position: 100% 0; } }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); margin: 0; }
.fine { font-family: var(--mono); font-size: 12.5px; color: var(--ink-dim); margin: 0; line-height: 1.5; }
.txtlink { font-family: var(--mono); font-size: 13px; color: var(--glow); text-decoration: none; border-bottom: 1px solid var(--rule); }
.txtlink:hover { border-bottom-color: var(--glow); }
.display { font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: .85; letter-spacing: -.005em; margin: 0; }
.btn, .field button {
  background: var(--hot); color: #140600; border: 1px solid var(--hot);
  font: 900 22px/1 var(--display); letter-spacing: .04em; text-transform: uppercase;
  padding: 16px 22px; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s, transform .15s;
}
.btn:hover, .field button:hover { background: var(--glow); border-color: var(--glow); }
.btn:active, .field button:active { transform: translateY(1px); }
.field { display: flex; }
.field input { flex: 1; min-width: 0; background: var(--bg); color: var(--ink); border: 1px solid var(--rule); border-right: 0; font: 500 15px var(--mono); padding: 14px; outline: none; }
.field input::placeholder { color: #6b5d50; }
.field input:focus { border-color: var(--glow); }
.field button { padding: 0 20px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.msg { font-family: var(--mono); font-size: 13.5px; margin: 10px 0 0; min-height: 1.4em; color: var(--glow); }
.msg.err { color: #ff7a5c; }
[data-signup-box].done form > *:not(.msg) { display: none; }
[data-signup-box].done .msg { font-size: 17px; margin: 0; }
[data-signup-box].done .msg::before { content: ""; display: block; width: 44px; height: 6px; background: var(--heat); margin-bottom: 14px; }
.maplink { text-decoration: none; }
.maplink:hover { color: var(--glow); }
.reveal { opacity: 0; transform: translateY(14px); animation: up .7s cubic-bezier(.2,.7,.2,1) forwards; }
.reveal:nth-child(1) { animation-delay: .05s; } .reveal:nth-child(2) { animation-delay: .15s; }
.reveal:nth-child(3) { animation-delay: .25s; } .reveal:nth-child(4) { animation-delay: .35s; } .reveal:nth-child(5) { animation-delay: .45s; }
@keyframes up { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reveal { animation: none; opacity: 1; transform: none; } .heat { animation: none; } }
.empty { color: var(--ink-dim); margin: 0; }

/* plain pages (unsubscribe) */
body.plain { display: grid; place-items: center; min-height: 100vh; padding: 0 var(--gutter); }
.plain-wrap h1 { font: 900 96px/.9 var(--display); text-transform: uppercase; margin: 12px 0; }

/* corner mark */
.logo { position: absolute; top: 22px; left: var(--gutter); z-index: 20; display: block; height: 22px; color: var(--ink); }
.logo .logo-svg { display: block; height: 100%; width: auto; }
.logo:hover { color: var(--hot); }
@media (max-width: 560px) { .logo { top: 18px; height: 18px; } }