/* ── maxhanzhili · shared design tokens & chrome ─────────────────────────
   Used by the sub-pages (/checklist, /questions, /urbex). The mask site
   (index.html) carries its own styles but uses the same palette. */
:root {
    --bg: #1c1c1c;
    --bg-2: #202024;
    --panel: #232328;
    --line: #2c2c34;
    --line-2: #3c3c48;
    --ink: #c8c8d8;
    --muted: #8888aa;
    --dim: #5a5a7a;
    --faint: #4a4a6a;
    --accent: #e94560;
    --accent-2: #ff6b81;
    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; }
body {
    margin: 0; min-height: 100vh;
    font-family: var(--mono); font-size: 13px; line-height: 1.6;
    background: var(--bg); color: var(--ink);
    -webkit-font-smoothing: antialiased;
}
/* faint dot grid — a nod to the ASCII cells on the front page */
body::before {
    content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background-image: radial-gradient(circle, rgba(200, 200, 216, 0.07) 0.7px, transparent 0.9px);
    background-size: 14px 14px;
}
body > * { position: relative; z-index: 1; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--bg); }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--line-2); }

/* ── type ── */
.label { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--dim); }
.page-title { font-size: clamp(22px, 3.2vw, 34px); font-weight: 700; letter-spacing: 6px; text-transform: uppercase; color: var(--accent); margin: 10px 0 10px; }
.page-sub { color: var(--muted); font-size: 12px; letter-spacing: 1px; line-height: 1.8; max-width: 560px; margin: 0; }
.cursor { color: var(--accent); animation: blink 0.8s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ── site chrome ── */
.site-header {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 22px 28px;
    background: linear-gradient(var(--bg) 60%, rgba(28, 28, 28, 0));
}
.wordmark { font-size: 9px; letter-spacing: 8px; text-transform: uppercase; color: var(--dim); text-decoration: none; white-space: nowrap; transition: color 0.2s; }
.wordmark:hover { color: var(--accent); }
.site-nav { display: flex; gap: 22px; flex-wrap: wrap; justify-content: flex-end; }
.site-nav a { font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: var(--dim); text-decoration: none; transition: color 0.2s; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--accent); }
.page { max-width: 1040px; margin: 0 auto; padding: 24px 28px 96px; }
.site-footer {
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding: 40px 28px; font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: var(--faint);
}
.site-footer a { color: var(--dim); text-decoration: none; }
.site-footer a:hover { color: var(--accent); }

/* ── controls ── */
.btn {
    font: inherit; font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
    color: var(--ink); background: transparent; border: 1px solid var(--line-2);
    padding: 10px 16px; cursor: pointer; border-radius: 0;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.btn:hover { color: var(--accent); border-color: var(--accent); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--bg); }
.btn:disabled { opacity: 0.4; cursor: default; }
.field {
    font: inherit; font-size: 12px; letter-spacing: 1px; color: var(--ink);
    background: var(--bg-2); border: 1px solid var(--line-2); padding: 9px 12px; border-radius: 0;
    transition: border-color 0.15s;
}
.field::placeholder { color: var(--faint); }
.field:focus { outline: none; border-color: var(--accent); }
select.field { appearance: none; -webkit-appearance: none; padding-right: 28px;
    background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%);
    background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.bar { height: 2px; background: var(--line); overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.35s ease; }
.tag { display: inline-block; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; padding: 3px 7px; border: 1px solid var(--line-2); color: var(--muted); white-space: nowrap; }

@media (max-width: 700px) {
    .site-header { padding: 16px 18px; flex-wrap: wrap; }
    .site-nav { gap: 14px; justify-content: flex-start; }
    .page { padding: 16px 18px 80px; }
    .site-footer { padding: 32px 18px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}