/* =============================================================
   HYPRGOOD · BASE · the produced surface
   Reset + the treasure-paper ground + type + the reusable parts
   (the mark, buttons, panels, rules). Imports tokens.css for color.
   Change a part HERE and every page changes. The exterior, produced.
   ============================================================= */

@import url("./tokens.css");

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; }

/* ---- THE TREASURE PAPER · the aged map ground ---- */
body {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background-color: var(--paper);
  /* aged mottling + a warm vignette, all in CSS — no image needed */
  background-image:
    radial-gradient(ellipse 120% 80% at 50% -10%, rgba(255,250,225,.55), transparent 60%),
    radial-gradient(ellipse 90% 70% at 12% 18%, rgba(168,140,70,.10), transparent 55%),
    radial-gradient(ellipse 90% 70% at 88% 82%, rgba(120,95,45,.12), transparent 55%),
    radial-gradient(circle at 50% 50%, transparent 55%, rgba(80,60,25,.18) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
/* a faint fiber grain laid over everything */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: var(--z-stars);
  opacity: .35; mix-blend-mode: multiply;
  background-image: repeating-linear-gradient(96deg, rgba(120,95,45,.05) 0 2px, transparent 2px 5px);
}

/* THE SAFARI / dark realm — flip the body ground to aubergine + neon (gold+purple) */
body.theme-safari {
  background-color: #0c0716;
  background-image:
    radial-gradient(ellipse 90% 60% at 50% -5%, rgba(180,107,255,.18), transparent 60%),
    radial-gradient(ellipse 80% 50% at 50% 105%, rgba(205,164,78,.10), transparent 60%);
}
body.theme-safari::before { opacity: 0; }   /* drop the paper grain in the dark */

::selection { background: rgba(139,111,42,.28); color: var(--ink); }

/* ---- TYPE ---- */
h1, h2, h3 { font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--text); }
h1 { font-size: var(--fs-h1); letter-spacing: var(--ls-display); }
h2 { font-size: var(--fs-h2); letter-spacing: .02em; }
h3 { font-size: var(--fs-h3); letter-spacing: .01em; }
p  { max-width: 64ch; }

.display {
  font-size: var(--fs-display); line-height: 1.05; letter-spacing: var(--ls-display);
  font-weight: var(--fw-bold);
}

/* the all-caps sans kicker — where a label goes */
.kicker {
  font-family: var(--font-sans); font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--accent-deep); font-weight: 700;
}

.lead { font-size: 19px; color: var(--text-mute); font-style: italic; max-width: 56ch; }
.muted { color: var(--text-mute); }
.faint { color: var(--text-faint); }
.serif-italic { font-style: italic; }

a.link { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--rule); transition: text-decoration-color var(--dur-fast); }
a.link:hover { text-decoration-color: var(--accent); }

/* ---- LAYOUT ---- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.readable { max-width: var(--maxw-readable); margin-inline: auto; }
.section { padding-block: var(--space-9); }
.center { text-align: center; }
.stack > * + * { margin-top: var(--space-4); }

/* ---- THE RULE · a bronze hairline with a dot, the house divider ---- */
.rule { border: 0; height: 1px; margin-block: var(--space-7);
  background: linear-gradient(90deg, transparent, var(--rule) 18%, var(--rule-strong) 50%, var(--rule) 82%, transparent); }
.rule-dot { position: relative; }
.rule-dot::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px;
  transform: translate(-50%,-50%); border-radius: 50%; background: var(--dot);
  box-shadow: var(--glow-dot);
}

/* ---- THE RED DOT · the source, as a part ---- */
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--dot); box-shadow: var(--glow-dot); vertical-align: middle; }

/* ---- BUTTONS ---- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-small);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  padding: 14px 26px; border-radius: var(--radius-pill);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast), background var(--dur-fast);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--paper-lit);
  box-shadow: var(--glow-accent), inset 0 0 0 1px rgba(255,255,255,.12); }
.btn-primary:hover { background: var(--accent-deep); box-shadow: var(--glow-accent-strong, 0 0 50px -10px rgba(139,111,42,.6)); }
.btn-ghost { background: transparent; color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--rule-strong); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }

/* ---- PANEL · the inset card on the map ---- */
.panel {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: var(--space-6);
  box-shadow: var(--shadow-card);
}
.panel-soft { background: var(--panel); }

/* ---- THE MARK · the ┐ + red dot, as a sized part ---- */
.mark { display: inline-block; width: 28px; height: auto; }
.mark .arm  { stroke: var(--mark-stroke); }
.mark .vertex-dot { fill: var(--dot); }

/* ---- a quiet utility: blockquote, the directive voice ---- */
blockquote.directive {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(20px, 3vw, 28px); line-height: 1.5; color: var(--text);
  border-left: 3px solid var(--accent); padding-left: var(--space-5);
  max-width: 44ch;
}

/* ---- footer ---- */
.site-foot { padding-block: var(--space-8); text-align: center; color: var(--text-faint);
  font-size: var(--fs-small); }
.site-foot .sign { font-family: var(--font-sans); letter-spacing: var(--ls-label); }

/* ---- responsive ---- */
@media (max-width: 640px) {
  .section { padding-block: var(--space-8); }
  :root { --gutter: 18px; }
}