/* The shared look of pamirsevincel.com and the labs root (SITE_PLAN §5): dark, minimal, one cyan
   accent and a rare magenta, Geist and Geist Mono (OFL, self-hosted, Latin subset). Copied next to
   each page by deploy/brand/sync.mjs; fonts/ sits beside this file. */
@font-face { font-family: "Geist"; src: url(fonts/geist.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(fonts/geist-mono.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #07080c;
  --fg: #e9edf5;
  --soft: #8b93a7;
  --faint: #2a3040;
  --cyan: #3df0ff;
  --magenta: #ff3d9a;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pad: clamp(16px, 3vw, 40px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); }
body { font: 400 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow: hidden; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 2px; }

canvas[data-motif] { position: fixed; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s ease; }
canvas[data-motif].on { opacity: var(--motif-opacity, 1); }
.poster { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: var(--motif-opacity, 1); }

.mono { font-family: var(--mono); }
.label { font: 500 12px/1 var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--soft); }
.dot { display: inline-block; width: 6px; height: 6px; background: var(--cyan); margin-right: 10px; vertical-align: 1px; }

.links { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; padding: 0; list-style: none; }
.links a { display: inline-flex; align-items: center; min-height: 44px; font: 500 13px/1 var(--mono);
  letter-spacing: 0.08em; text-transform: lowercase; color: var(--soft); text-decoration: none; transition: color 0.2s; }
.links a::before { content: "\2197"; margin-right: 6px; color: var(--faint); transition: color 0.2s; }
.links a:hover, .links a:focus-visible { color: var(--fg); }
.links a:hover::before, .links a:focus-visible::before { color: var(--cyan); }

@media (prefers-reduced-motion: reduce) {
  canvas[data-motif], .links a, .links a::before { transition: none; }
}