/* ============================================================
   STUDIO.ALT · shared/alt.css
   ALT brand tokens + base + chrome. Source: ALT Visual System v1.2
   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;
  overflow-x: hidden;
}

::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); }

/* ---- noise overlay ---------------------------------------- */
.alt-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: screen;
  opacity: 0.55;
}

/* ---- experience page chrome ------------------------------- */
.alt-chrome {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  pointer-events: none;
}
.alt-chrome a, .alt-chrome button { pointer-events: auto; }
.alt-chrome-top { top: 0; }
.alt-chrome-bot { bottom: 0; }
.alt-chrome .l, .alt-chrome .r {
  display: flex;
  align-items: center;
  gap: 14px;
}
.alt-chrome .sep {
  width: 1px;
  height: 12px;
  background: var(--hair);
  display: inline-block;
}
.alt-chrome .back { color: var(--mist); transition: color 0.2s; }
.alt-chrome .back:hover { color: var(--bone); }

/* ---- logo mark (per ALT visual system: invert + screen) --- */
.alt-lg {
  height: 16px;
  width: auto;
  display: block;
  filter: invert(1) contrast(1.08) brightness(1.08) grayscale(1);
  mix-blend-mode: screen;
}

/* ---- buttons ---------------------------------------------- */
.btn-mono {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mist);
  background: rgba(3, 3, 5, 0.55);
  border: 1px solid var(--hair);
  padding: 9px 14px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.btn-mono:hover { color: var(--bone); border-color: var(--mist-3); }
.btn-mono.active { color: var(--bone); border-color: var(--mist); }

/* ---- 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);
}

/* ---- canvas host ------------------------------------------ */
.stage {
  position: fixed;
  inset: 0;
  z-index: 1;
}
.stage canvas { display: block; }

@media (max-width: 640px) {
  .alt-chrome { padding: 14px 16px; }
  .alt-chrome .r .hide-s { display: none; }
}