/* The Sealed Room — shared tokens and site-wide primitives.
   Every page links this first, then adds its own page-specific styles.

   THE PALETTE (one job per colour — this is the whole system):
     ink / surface / raise   the dark. the room itself.
     bone                    paper, text, the wordmark.
     ghost (ember red-orange) LIGHT. lit candles, progress, "you did it". (the token keeps its old name.)
     oxblood (dark wine)     WAX. the seal, the seam behind the back door, the paid buttons. never bright.
   No yellow, no bright red. Change a colour here and the whole site follows. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root {
  --bg: #06070b;
  --surface: #0d0f15;
  --raise: #141720;
  --ink: #e9e4d9;
  --dim: #8b909b;
  --faint: #4d525e;
  --line: #232631;

  --ghost: #e0603f;
  --ghost-dim: #7a3323;
  --ghost-glow: rgba(224,96,63,.35);

  --accent: #4a0f19;          /* oxblood, deep */
  --accent-strong: #8a2233;   /* oxblood, lifted just enough to read on black */
  --wax: #6d1523;

  --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --font-brand: Arial, Helvetica, 'Liberation Sans', sans-serif;   /* the wordmark, exactly like the logo */
  --ease: cubic-bezier(.16,1,.3,1);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
::selection { background: var(--accent-strong); color: var(--ink); }
:focus-visible { outline: 1px solid var(--ghost); outline-offset: 3px; }

.mono {
  font-family: var(--font-mono);
  letter-spacing: 0.12em; text-transform: uppercase;
}

/* the "brat" display treatment — the wordmark and big headings, never body copy */
.brat {
  font-family: var(--font-brand); font-weight: 700;
  text-transform: lowercase; letter-spacing: -0.03em; position: relative; display: inline-block;
}
.brat .blur-layer { position: absolute; inset: 0; color: var(--accent-strong); filter: blur(5px); opacity: 0.6; z-index: -1; }

/* the persistent site nav, reused on every members page */
.nav {
  display: flex; align-items: center; gap: 10px;
  padding: 18px clamp(20px,4vw,40px); border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(20,23,32,.5), transparent);
}
.nav-name { font-family: var(--font-brand); font-weight: 700; text-transform: lowercase; letter-spacing: -0.02em; font-size: 15px; }
.nav-back { margin-left: auto; font-size: 12px; color: var(--faint); text-decoration: none; letter-spacing: 0.02em; }
.nav-back:hover { color: var(--ghost); }
.nav-signout { font-size: 12px; color: var(--faint); background: none; border: none; cursor: pointer; letter-spacing: 0.02em; font-family: inherit; }
.nav-signout:hover { color: var(--ghost); }

/* shared buttons */
.btn {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--bg); background: var(--ink); border: 1px solid var(--ink); padding: 13px 22px; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), transform .12s;
}
.btn:hover { background: var(--ghost); border-color: var(--ghost); box-shadow: 0 0 24px var(--ghost-glow); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .35; cursor: default; box-shadow: none; }
.btn.ghost { background: none; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--ghost); color: var(--ghost); background: none; }

/* hides the page while auth-guard.js confirms a session, so protected content never flashes */
html.auth-pending body { visibility: hidden; }