/* vivviadigital.com. The hero is the brand book's DIGITAL section (Pillar 02 · Blueprint / Dark): its ground, an aurora
   (the video: a logged Pexels timelapse, full frame under Digital's wash and the engine's scrim), its 40px grid and its
   dioxazine glow, with the stacked lockup and the hook centred over them, as vivviaglobal.com stacks Global's. The
   colours and the faces come from brand.css, which scripts/brand_sync.mjs writes. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--ground);
  color: var(--text);
  font-family: 'Archivo Expanded', system-ui, sans-serif;
  font-stretch: 125%;
  -webkit-font-smoothing: antialiased;
}

.hero { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100svh; overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: 0; background: var(--ground) url(hero/aurora-1920x1080.jpg) center / cover no-repeat; }
.hero-media video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
@media (orientation: portrait) { .hero-media { background-image: url(hero/aurora-1080x1920.jpg); } }
.grid {
  position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 40px 40px;
}
.glow { position: absolute; top: -120px; right: -80px; width: 420px; height: 420px; background: radial-gradient(circle, var(--glow), transparent 65%); filter: blur(20px); }

.hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 100%; padding: 48px 24px; text-align: center; }

/* The stacked lockup at the proportions of Kristi's audited stacked pack (logos/digital, the graphics audit's G3),
   measured in units of the wordmark's ink: the mark's ink .41, a gap of .215, the wordmark, .188, the hairline .219
   wide, .217, DIGITAL .625 wide and .074 tall. --w is the wordmark's box (vivviaglobal.com's size), whose ink is .979 of
   it; the margins below are the pack's gaps less each box's own space around its ink (the mark's artboard, DIGITAL's
   line box), checked against a render to within 1%. The height term keeps the stack and the hook on one screen in a
   browser window as short as 600 px: the stack runs about 1.8 --w plus the hook and the padding. */
.lockup { --w: min(420px, 72vw, calc((100vh - 200px) / 1.8)); display: flex; flex-direction: column; align-items: center; margin: 0; font-weight: 400; }
.mark { display: block; width: calc(var(--w) * .462); height: calc(var(--w) * .462); }
.wordmark { display: block; width: var(--w); height: auto; margin-top: calc(var(--w) * .151); }
.rule { display: block; width: calc(var(--w) * .219); height: max(1px, calc(var(--w) * .0076)); margin-top: calc(var(--w) * .181); background: var(--paper); }
.division {
  display: block; margin-top: calc(var(--w) * .195); margin-right: -.3em;
  font-family: 'Space Mono', monospace; font-weight: 700; font-size: calc(var(--w) * .102); line-height: 1;
  letter-spacing: .3em; text-transform: uppercase; color: var(--paper);
}

/* The hook: R's offer line in the engine's hook face (brand.js type.hook, Archivo Expanded 800). */
.lockup + .hook { margin: calc(min(420px, 72vw, calc((100vh - 200px) / 1.8)) * .24) 0 0; }
.hook { max-width: 26ch; font-weight: 800; font-size: clamp(20px, min(2.3vw, 4.4vh), 36px); line-height: 1.06; letter-spacing: -.01em; color: var(--paper); text-wrap: balance; }

@media (max-width: 700px) {
  .hero-copy { padding: 48px 20px; }
  .hook { font-size: clamp(20px, 5.6vw, 26px); }
  .glow { top: -90px; right: -90px; width: 300px; height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-media video { display: none; }
}

/* The 404 */
.notfound { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 24px; min-height: 100vh; min-height: 100svh; padding: 48px 24px; max-width: 720px; margin: 0 auto; }
.notfound .mark { width: 64px; height: 64px; }
.notfound h1 { margin: 0; font-weight: 700; font-size: clamp(22px, 3vw, 34px); color: var(--paper); }
.notfound a { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: var(--paper); }