/* ============================================================
   NOBODY — design tokens
   Palette straight off the brand board: paper / ink / butter / busk
   ============================================================ */
:root {
  --paper:      #F6F2E9;
  --paper-2:    #EFEADC;
  --paper-3:    #E4DECD;
  --ink:        #171919;
  --ink-2:      #2A2D2D;
  --ink-soft:   #565B5B;
  --butter:     #F2D45C;
  --butter-2:   #E7C23C;
  --busk:       #9194AE;
  --busk-2:     #7B7F9C;

  --ok:         #3FA96B;
  --bad:        #D2544A;

  --display: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  --line: 2px solid var(--ink);
  --pop: 6px 6px 0 var(--ink);
  --pop-sm: 4px 4px 0 var(--ink);
  --pop-butter: 6px 6px 0 var(--butter-2);

  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);

  --ease: cubic-bezier(.2, .7, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-weight: 900; line-height: .95; letter-spacing: -.02em; margin: 0; text-transform: uppercase; }
p { margin: 0; }
a { color: inherit; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

::selection { background: var(--butter); color: var(--ink); }

:focus-visible { outline: 3px solid var(--busk); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; }

.mono { font-family: var(--mono); }

/* small numbered label, like "01 / THE GHOST" on the brand board */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::after { content: ""; flex: 1; height: 2px; background: var(--paper-3); }
.eyebrow b { font-weight: 700; color: var(--ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- buttons ---------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 22px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: var(--line); border-radius: var(--r-pill);
  font-weight: 800; font-size: 15px; letter-spacing: .02em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  box-shadow: var(--pop-sm);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn--butter { --btn-bg: var(--butter); --btn-fg: var(--ink); }
.btn--paper  { --btn-bg: var(--paper); --btn-fg: var(--ink); }
.btn--ghost  { --btn-bg: transparent; --btn-fg: var(--ink); box-shadow: none; }
.btn--ghost:hover { background: var(--paper-2); box-shadow: none; transform: none; }
.btn--sm { padding: 9px 16px; font-size: 13px; }
.btn--lg { padding: 18px 30px; font-size: 17px; }
.btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ---------- cards ---------- */
.card {
  background: var(--paper);
  border: var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--pop);
}

.tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 12px; border: var(--line); border-radius: var(--r-pill);
  background: var(--paper);
}
.tag--butter { background: var(--butter); }
.tag--ink { background: var(--ink); color: var(--paper); }

.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); flex: none; }
.dot--live { background: var(--ok); animation: pulse 1.8s var(--ease) infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* handwritten-ish margin note from the brand board */
.note {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.45;
  color: var(--ink-soft); font-style: italic;
}

/* ---------- wordmark (inline <use href="#wm">) ---------- */
.wm-glyph { fill: currentColor; }
.wm-eye   { fill: var(--wm-eye, #F6F2E9); }
.wm-pupil { fill: var(--wm-pupil, #171919); }
.on-ink   { --wm-eye: #F6F2E9; --wm-pupil: #171919; }

/* the hidden attribute must win over layout display values */
[hidden] { display: none !important; }