/* ============================================================
   ALTWORLD · shared/alt.css
   ALT brand tokens + base, carried over from studio.alt (shared/alt.css).
   Black is canvas. Pink is signal. One pink per surface.
   ============================================================ */

/* Brand fonts, vendored (shared/fonts/) — the site keeps its typography offline. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/archivo-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/archivo-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/archivo-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/archivo-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/archivo-latin-900-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/dm-sans-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/dm-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/dm-sans-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/dm-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/dm-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/instrument-serif-latin-400-italic.woff2') format('woff2'); }

:root {
  --ink-000: #030305;
  --ink-100: #0A0A0E;
  --ink-200: #16161D;
  --ink-300: #22222C;
  --bone:    #F2F2EF;
  --mist:    #9C9CA4;
  --mist-2:  #6A6A72;
  --mist-3:  #3A3A48;
  --signal:  #FF2E63;

  --display: 'Archivo', 'Arial Black', system-ui, sans-serif;
  --body:    'DM Sans', 'Segoe UI', system-ui, sans-serif;
  --mono:    'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;
  --serif:   'Instrument Serif', Georgia, serif;

  --hair: rgba(255, 255, 255, 0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--ink-000);
  color: var(--bone);
  font-family: var(--body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

/* ---- mono labels ------------------------------------------ */
.mono {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mist-2);
}
.mono a:hover, a.mono:hover { color: var(--bone); }

/* ---- status dot --------------------------------------------- */
.dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bone);
  display: inline-block;
}
.dot.signal {
  background: var(--signal);
  box-shadow: 0 0 8px var(--signal);
}

/* ---- simple page chrome (header / footer) -------------------
   Editorial layout, not the fixed-overlay playground chrome —
   ALTWORLD is a reading site, not a WebGL stage. Restyle freely
   once the content brief lands; tokens above are what must persist. */
.site-header, .site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid var(--hair);
}
.site-footer {
  border-bottom: none;
  border-top: 1px solid var(--hair);
  margin-top: 80px;
}
.alt-lg {
  height: 16px;
  width: auto;
  display: block;
  filter: invert(1) contrast(1.08) brightness(1.08) grayscale(1);
  mix-blend-mode: screen;
}

@media (max-width: 640px) {
  .site-header, .site-footer { padding: 16px; }
}