/* Shared layout pieces for the v-series pages (on top of brand.css) */
@import url('https://fonts.googleapis.com/css2?family=Silkscreen&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--charcoal); color: var(--paper); overflow: hidden; font-family: var(--sans); }

/* drifting data field (from 03) */
.bg { position: fixed; inset: 0; z-index: 1; overflow: hidden; padding-top: 4px; font: 400 10.5px/16px var(--mono); color: rgba(241,241,236,.085); user-select: none; pointer-events: none; }
.bgrow { white-space: nowrap; width: max-content; height: 16px; will-change: transform; }
.bg .tk { transition: color .6s, background .6s, box-shadow .6s; }
.bg .tk.w { color: rgba(168,212,106,.32); }
.bg .sep { color: rgba(241,241,236,.05); }
.bg .tk.hot { color: #1b1c1b; background: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 0 22px rgba(168,212,106,.45); }

canvas.links { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
canvas.orb { position: fixed; z-index: 3; image-rendering: pixelated; image-rendering: crisp-edges; filter: blur(.3px) saturate(.92); pointer-events: none; }

/* soft pools of charcoal behind text, so copy stays legible over the field */
.pool { position: relative; }
.pool::before { content: ''; position: absolute; inset: -40px -60px; z-index: -1; background: radial-gradient(ellipse at center, rgba(27,28,27,.94) 35%, rgba(27,28,27,0) 72%); }

.layer { position: relative; z-index: 4; }
.kicker { font-family: 'Silkscreen', monospace; font-size: 12px; letter-spacing: .12em; color: var(--accent); margin-bottom: 18px; }
.tag { font-weight: 300; color: var(--paper); line-height: 1.35; }
.tag::before { content: '▚ '; color: var(--mute); font-family: var(--mono); }

header.top { position: fixed; z-index: 6; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 20px 28px; background: linear-gradient(to bottom, rgba(27,28,27,.92), rgba(27,28,27,0)); font: 400 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
header.top .wordmark { font-size: 16px; letter-spacing: -.02em; text-transform: none; }

/* agent panel (from 01), deliberately quiet */
.panel { font: 400 10.5px/1.75 var(--mono); color: rgba(241,241,236,.32); white-space: nowrap; }
.panel b { color: rgba(168,212,106,.75); font-weight: 400; }
.panel .cur { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

footer.legal { position: fixed; z-index: 6; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; gap: 16px; padding: 16px 28px; font: 400 10.5px var(--mono); letter-spacing: .08em; color: var(--mute); background: linear-gradient(to top, rgba(27,28,27,.92), rgba(27,28,27,0)); }
footer.legal a { color: var(--mute); text-decoration: none; border-bottom: 1px solid rgba(154,163,154,.4); }
footer.legal a:hover { color: var(--paper); border-color: var(--paper); }
footer.legal nav { display: flex; gap: 18px; }

@media (max-width: 700px) {
  header.top { padding: 16px; }
  footer.legal { padding: 12px 16px; font-size: 9.5px; }
  .panel { display: none; }
}