/* Editorial / archival-print theme — off-white paper, near-black ink, one hot red,
   monospace technical labels + an expressive marker display for the loud headline.
   (Inspired by a skate-culture archive poster: framed canvas, corner metadata,
   big graffiti wordmark, B&W plate.) */
:root {
  --paper:#f5f5f4; --ink:#090909; --red:#f21c0d; --red-ink:#c71408; --white:#ffffff;
  /* backward-compatible aliases so every page recolors from one place */
  --brand-50:#fde9e6; --brand-100:#f9cdc8; --brand-400:#f5473a; --brand-500:#f21c0d;
  --brand-600:#c71408; --brand-700:#a01206;
  --ink-60:rgba(18,18,18,.58); --ink-40:rgba(18,18,18,.38); --ink-10:rgba(18,18,18,.12);
  --line:#121212; --red-500:#ef4a3f; --green-600:#1f9d55;
  --font-mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-crazy:"Permanent Marker","Space Mono",cursive;
  --hard:3px 3px 0 0 var(--ink); --hard-sm:2px 2px 0 0 var(--ink); --hard-lg:5px 5px 0 0 var(--ink);
  /* sharp corners everywhere (editorial) */
  --r-lg:2px; --r-xl:2px; --r-2xl:3px; --r-3xl:4px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-mono); font-size:13px; line-height:1.55;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3 { margin:0; font-family:var(--font-mono); font-weight:700; letter-spacing:-.01em; }
::selection { background:var(--red); color:var(--white); }
a { color:inherit; }

/* the loud marker headline */
.crazy { font-family:var(--font-crazy); color:var(--red); line-height:.9; letter-spacing:.01em; font-weight:400; }
/* clean editorial subhead */
.display { font-family:var(--font-mono); font-weight:700; letter-spacing:-.01em; }

/* mono kicker / technical label */
.kicker { font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-60); }
.meta { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink); line-height:1.7; white-space:pre-line; }

/* ---- buttons (squared, mono, uppercase) ---- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.08em; font-weight:700; font-size:12px;
  border:1.5px solid var(--ink); border-radius:2px; background:var(--paper); color:var(--ink);
  height:44px; padding:0 20px; cursor:pointer; text-decoration:none; transition:background .12s, color .12s, transform .05s;
}
.btn:hover { background:var(--ink); color:var(--paper); }
.btn:active { transform:translateY(1px); }
.btn:disabled { opacity:.45; pointer-events:none; }
.btn-primary { background:var(--red); color:var(--white); border-color:var(--ink); }
.btn-primary:hover { background:var(--ink); color:var(--white); }
.btn-ghost { border-color:transparent; background:transparent; color:var(--ink-60); }
.btn-ghost:hover { background:rgba(18,18,18,.06); color:var(--ink); }
.btn-lg { height:52px; padding:0 26px; font-size:13px; }
.btn-sm { height:34px; padding:0 14px; font-size:11px; }
.btn-block { width:100%; }

/* ---- inputs ---- */
.label { display:block; font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-60); margin:0 0 7px; }
.input {
  height:46px; width:100%; border:1.5px solid var(--ink); border-radius:2px; background:var(--white);
  padding:0 13px; font-family:var(--font-mono); font-size:15px; color:var(--ink); transition:box-shadow .12s;
}
.input::placeholder { color:var(--ink-40); }
.input:focus { outline:none; box-shadow:0 0 0 2px var(--red); }

/* ---- cards / badges ---- */
.card { border:1.5px solid var(--ink); border-radius:2px; background:var(--white); }
.card-pad { padding:16px 18px; }
.card-t { font-family:var(--font-mono); font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.14em; color:var(--ink-60); margin-bottom:12px; }
.badge { display:inline-flex; align-items:center; gap:5px; border:1.5px solid var(--ink); border-radius:2px;
  padding:2px 9px; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; background:var(--white); }
.badge-brand { background:var(--red); color:var(--white); }
.badge-green { background:#e6f4ec; }

.alert { padding:11px 13px; border:1.5px solid var(--ink); border-radius:2px; background:var(--brand-50);
  font-size:12px; font-weight:700; }
.alert-err { background:#fdeae8; border-color:var(--red); color:var(--red-ink); }

.hint { font-size:11px; color:var(--ink-60); letter-spacing:.02em; }
@keyframes fade-up { 0%{opacity:0; transform:translateY(12px);} 100%{opacity:1; transform:none;} }
.fade-up { animation:fade-up .5s cubic-bezier(.16,1,.3,1) both; }

/* thin corner crop-marks helper */
.crop { position:relative; }