/* 1337 Labs. One dark theme. Purple is the glass, lime is the liquid: it only ever shows up lit. */

@font-face {
  font-family: "Inter";
  src: url("fonts/inter-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched stand-ins, so nothing jumps when the real faces arrive. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Helvetica");
  size-adjust: 107.48%;
  ascent-override: 90.14%;
  descent-override: 22.44%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "JetBrains Mono Fallback";
  src: local("Menlo"), local("Consolas"), local("DejaVu Sans Mono"), local("Courier New");
  size-adjust: 99.66%;
  ascent-override: 102.35%;
  descent-override: 30.1%;
  line-gap-override: 0%;
}

:root {
  --void: #09070f;
  --bone: #f4f1ff;
  --purple: #bf40ff;
  --lime: #39ff14;

  --text: rgba(244, 241, 255, 0.86);
  --mute: rgba(244, 241, 255, 0.62);
  --dim: rgba(244, 241, 255, 0.52);
  --line: rgba(244, 241, 255, 0.09);
  --line-2: rgba(244, 241, 255, 0.17);

  --sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* the same curve the logo uses, so the page and the mark move alike */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --wrap: clamp(1180px, 31vw + 600px, 1440px);
  --gutter: clamp(20px, 4.4vw, 56px);
  --header: 72px;
}
@media (prefers-contrast: more) {
  :root { --mute: rgba(244, 241, 255, 0.78); --dim: rgba(244, 241, 255, 0.62); --line: rgba(244, 241, 255, 0.22); --line-2: rgba(244, 241, 255, 0.34); }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--void);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header) + 12px);
  scrollbar-color: rgba(191, 64, 255, 0.4) var(--void);
  scrollbar-width: thin;
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--void);
  color: var(--text);
  font: 400 clamp(16px, 0.35vw + 14.6px, 18px) / 1.6 var(--sans);
  font-optical-sizing: auto;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
}
/* grain: a few percent of white specks. It dithers the dark gradients so they never band. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  background: url("img/grain.png") 0 0 / 256px 256px;
  opacity: 0.6;
}

@media (min-resolution: 2dppx) { body::after { background-size: 128px 128px; } }

::selection { background: rgba(191, 64, 255, 0.55); color: #fff; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; border-radius: 4px; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, p, ul, dl, dd { margin: 0; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip {
  position: fixed; z-index: 120; left: 16px; top: 12px; padding: 10px 14px; border-radius: 8px;
  background: var(--bone); color: var(--void); font: 500 13px/1 var(--sans); text-decoration: none;
  transform: translateY(-160%); transition: transform 0.3s var(--ease);
}
.skip:focus-visible { transform: none; outline-offset: 2px; }

/* ---------------------------------------------------------------- header */
.top {
  position: fixed; z-index: 60; inset: 0 0 auto 0; height: var(--header);
  display: flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: background-color 0.5s var(--ease), border-color 0.5s var(--ease), -webkit-backdrop-filter 0.5s, backdrop-filter 0.5s;
  animation: fade 1.1s var(--ease) 0.2s backwards;
}
.top.is-scrolled {
  background: rgba(9, 7, 15, 0.7);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
}
.top__in {
  width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
  display: flex; align-items: center; gap: clamp(20px, 3vw, 40px);
}
.brand {
  display: inline-flex; align-items: center; gap: 11px; margin-right: auto;
  color: var(--bone); text-decoration: none;
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.top.is-compact .brand { opacity: 1; transform: none; pointer-events: auto; }
.brand svg { height: 27px; width: auto; }
.brand b { font: 800 16px/1 var(--mono); letter-spacing: -0.02em; }
.brand i { margin-left: -4px; font: 500 10.5px/1 var(--mono); font-style: normal; letter-spacing: 0.42em; color: var(--mute); }

.nav { display: flex; gap: clamp(18px, 2.4vw, 32px); }
.nav a {
  position: relative; padding: 10px 0 10px 15px;
  font: 500 11.5px/1 var(--mono); letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--mute); text-decoration: none; transition: color 0.3s;
}
.nav a::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
  background: var(--lime); box-shadow: 0 0 9px rgba(57, 255, 20, 0.8);
  transform: scale(0); transition: transform 0.5s var(--ease);
}
.nav a.is-active { color: var(--bone); }
.nav a.is-active::before { transform: scale(1); }

.clock {
  display: flex; gap: 10px; align-items: baseline;
  font: 500 11.5px/1 var(--mono); letter-spacing: 0.15em; text-transform: uppercase; color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.clock time:empty, .clock:has(time:empty) { display: none; }
.clock span::after { content: ""; display: inline-block; width: 3px; height: 3px; margin-left: 10px; border-radius: 50%; background: currentColor; vertical-align: middle; opacity: 0.7; }

/* ---------------------------------------------------------------- gauge: the page is a burette */
.gauge {
  position: fixed; z-index: 55; top: 50%; right: max(14px, calc((100vw - var(--wrap)) / 2 - 56px)); height: 150px; width: 22px;
  transform: translateY(-50%); pointer-events: none;
  opacity: 0; transition: opacity 0.8s var(--ease);
}
.gauge.is-on { opacity: 1; }
.gauge::before { /* graduations */
  content: ""; position: absolute; left: 0; top: 1px; bottom: 1px; width: 8px;
  background:
    repeating-linear-gradient(to bottom, var(--line-2) 0 1px, transparent 1px 14.9px) left / 5px 100% no-repeat,
    linear-gradient(to bottom, var(--dim) 0 1px, transparent 1px) left top / 8px 100% repeat-y;
  background-size: 5px 100%, 8px 74.5px;
  opacity: 0.9;
}
.gauge__tube { position: absolute; right: 0; top: 0; bottom: 0; width: 6px; border: 1px solid rgba(191, 64, 255, 0.55); border-radius: 4px 4px 3px 3px; overflow: hidden; }
.gauge__fill { position: absolute; inset: 0; background: var(--lime); box-shadow: 0 0 14px rgba(57, 255, 20, 0.7); transform-origin: bottom; transform: scaleY(var(--p, 0)); opacity: 0.92; }
@media (max-width: 1240px) { .gauge { display: none; } }

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative; isolation: isolate; overflow: clip;
  min-height: max(660px, 100svh);
  display: grid; align-content: center;
  padding-block: calc(var(--header) + 24px) 96px;
  --px: 0; --py: 0;
}
.hero__scene {
  position: absolute; z-index: -2; top: 0; right: -5vw; bottom: 0; width: min(64vw, calc(1240px + max(0px, 100vw - 1940px) * 0.5));
  pointer-events: none; will-change: transform;
  transform: translate3d(calc(var(--px) * -18px), calc(var(--py) * -12px), 0);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 44%), linear-gradient(to bottom, transparent 0, #000 16%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 44%), linear-gradient(to bottom, transparent 0, #000 16%, #000 78%, transparent 100%);
  mask-composite: intersect;
}
.hero__scene picture, .hero__scene img { display: block; width: 100%; height: 100%; }
.hero__scene img { object-fit: cover; object-position: 78% 50%; animation: scene-in 2.6s var(--ease) 0.25s backwards; }

.hero__grid {
  position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cpath d='M154 160.5h12M160.5 154v12' stroke='%23F4F1FF' stroke-opacity='.34' stroke-width='1'/%3E%3C/svg%3E") 0 0 / 320px 320px,
    linear-gradient(to right, rgba(244, 241, 255, 0.04) 1px, transparent 1px) 0 0 / 80px 80px,
    linear-gradient(to bottom, rgba(244, 241, 255, 0.04) 1px, transparent 1px) 0 0 / 80px 80px;
  -webkit-mask-image: radial-gradient(60% 75% at 26% 46%, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 82%);
  mask-image: radial-gradient(60% 75% at 26% 46%, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 82%);
  transform: translate3d(calc(var(--px) * 7px), calc(var(--py) * 5px), 0);
  animation: fade 2.4s ease 0.1s backwards;
}
/* soft purple haze behind the lockup, so the flask sits in light and not on flat black */
.hero::before {
  content: ""; position: absolute; z-index: -1; left: -10%; top: 6%; width: 70%; height: 90%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(191, 64, 255, 0.13), rgba(191, 64, 255, 0.04) 55%, transparent 100%);
  animation: fade 3s ease 0.2s backwards;
}

.hero__in { --lw: clamp(290px, min(46vw, calc(720px + (100vw - 1565px) * 0.24)), 1000px); position: relative; transform: translate3d(calc(var(--px) * 5px), calc(var(--py) * 3px), 0); }
.lockup { width: var(--lw); margin: 0 0 0 calc(var(--lw) * -0.0507); }
.lockup img { width: 100%; height: auto; }
.hero__sub { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 32px; margin-top: calc(var(--lw) * -0.02); animation: rise 1.3s var(--ease) 3s backwards; }
.tag { font: 500 clamp(19px, 1.55vw, 23px) / 1.2 var(--sans); letter-spacing: -0.02em; color: var(--bone); }

.btn {
  display: inline-flex; align-items: center; gap: 12px; height: 46px; padding: 0 20px 0 22px;
  border: 1px solid var(--line-2); border-radius: 999px; background: rgba(244, 241, 255, 0.035);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--bone); font: 500 14.5px/1 var(--sans); letter-spacing: -0.005em; text-decoration: none;
  transition: border-color 0.5s var(--ease), background-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.btn:active, .copy:active { transform: scale(0.975); }
.btn .arr { width: 12px; height: 12px; transition: transform 0.6s var(--ease); }

.hero__meta { position: absolute; left: 0; right: 0; bottom: 26px; min-height: 36px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; animation: fade 1.4s ease 3.3s backwards; }
.meta { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 26px; font: 500 11px/1 var(--mono); letter-spacing: 0.17em; text-transform: uppercase; color: var(--dim); }
.meta li + li::before { content: ""; display: inline-block; width: 3px; height: 3px; margin-right: 26px; border-radius: 50%; background: currentColor; vertical-align: middle; opacity: 0.7; }
.replay {
  appearance: none; -webkit-appearance: none; background: none; border: 0; cursor: pointer; padding: 10px 0 10px 10px; margin-right: -2px;
  display: inline-flex; align-items: center; gap: 9px; color: var(--dim);
  font: 500 11px/1 var(--mono); letter-spacing: 0.17em; text-transform: uppercase; transition: color 0.3s;
}
.replay svg { width: 12px; height: 12px; transition: transform 0.8s var(--ease); }

/* a graduated scale between the hero and the page */
.ruler {
  height: 14px; border-bottom: 1px solid var(--line-2);
  background:
    repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 8px) bottom / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, rgba(244, 241, 255, 0.3) 0 1px, transparent 1px 80px) bottom / 100% 14px no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

/* ---------------------------------------------------------------- sections */
.sec { position: relative; padding-block: clamp(84px, 12vw, 168px) 0; }
.sec--contact { padding-bottom: clamp(96px, 13vw, 176px); }

.eyebrow { display: flex; align-items: center; gap: 14px; font: 500 11.5px/1 var(--mono); letter-spacing: 0.17em; text-transform: uppercase; color: var(--mute); }
.eyebrow b { display: inline-flex; align-items: center; gap: 14px; font-weight: 500; color: var(--purple); }
.eyebrow b::after { content: ""; width: 30px; height: 1px; background: currentColor; opacity: 0.55; }

.statement {
  max-width: 25em; margin-top: clamp(26px, 3vw, 40px);
  font: 500 clamp(27px, 3.55vw, 52px) / 1.12 var(--sans); letter-spacing: -0.022em; color: var(--bone); text-wrap: balance;
}
.statement span { display: block; margin-top: 0.4em; color: var(--mute); }

.spec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(56px, 8vw, 112px); border-top: 1px solid var(--line); }
.spec > div { padding: 22px 24px 0 0; }
.spec > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.spec dt { font: 500 11px/1 var(--mono); letter-spacing: 0.17em; text-transform: uppercase; color: var(--dim); }
.spec dd { margin-top: 14px; font: 500 16.5px/1.4 var(--sans); letter-spacing: -0.01em; color: var(--bone); text-wrap: balance; }

.mask { display: block; overflow: hidden; padding: 0.08em 0 0.14em; margin: -0.08em 0 -0.14em; }
.mask > span { display: block; }
.h2 { margin-top: clamp(22px, 2.6vw, 34px); font: 600 clamp(36px, 5.2vw, 76px) / 1 var(--sans); letter-spacing: -0.034em; color: var(--bone); }

/* ---------------------------------------------------------------- project rows */
.rows { list-style: none; padding: 0; margin: clamp(44px, 6vw, 92px) 0 0; border-top: 1px solid var(--line); }
.rows > li { border-bottom: 1px solid var(--line); }
.row {
  --mx: 50%; --my: 50%;
  position: relative; isolation: isolate; display: grid; align-items: center;
  grid-template-columns: 34px 52px minmax(0, 1.05fr) minmax(0, 1.55fr) minmax(150px, auto);
  grid-template-areas: "n hz name desc meta";
  column-gap: clamp(16px, 2.6vw, 36px);
  padding: clamp(26px, 2.8vw, 40px) var(--gutter); margin-inline: calc(var(--gutter) * -1);
  color: inherit; text-decoration: none;
  transition: opacity 0.6s var(--ease);
}
.row::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none; transition: opacity 0.6s var(--ease); background: radial-gradient(560px circle at var(--mx) var(--my), rgba(191, 64, 255, 0.15), transparent 62%); }
.row:focus-visible::before { opacity: 1; }
.row:focus-visible { outline-offset: -3px; border-radius: 0; }
.rows:has(.row:focus-visible) .row:not(:focus-visible) { opacity: 0.4; }

.row__n { grid-area: n; font: 500 11.5px/1 var(--mono); letter-spacing: 0.1em; color: var(--dim); }
.hz { display: block; overflow: visible; transition: filter 0.6s var(--ease); }
.row .hz { grid-area: hz; width: 52px; height: 52px; }
.row__name { grid-area: name; font: 600 clamp(26px, 2.9vw, 40px) / 1.05 var(--sans); letter-spacing: -0.03em; color: var(--bone); transition: transform 0.7s var(--ease); }
.row__desc { grid-area: desc; max-width: 44ch; color: var(--mute); text-wrap: pretty; }
.row__meta { grid-area: meta; display: grid; justify-items: end; gap: 12px; text-align: right; }
.row:focus-visible .row__name { transform: translateX(8px); }

.row__status { display: inline-flex; align-items: center; gap: 9px; font: 500 11px/1 var(--mono); letter-spacing: 0.17em; text-transform: uppercase; color: var(--dim); }
.row__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--dim); }
.row__status.is-live { color: var(--mute); }
.row__status.is-live::before { background: var(--lime); border-color: var(--lime); box-shadow: 0 0 10px rgba(57, 255, 20, 0.6); animation: led 3.4s ease-in-out infinite; }
.row__url { display: inline-flex; align-items: center; gap: 7px; font: 500 13px/1 var(--mono); letter-spacing: -0.01em; color: var(--bone); }
.arr { width: 11px; height: 11px; flex: none; transition: transform 0.6s var(--ease), color 0.4s; }
.row:focus-visible .row__url .arr { transform: translate(2px, -2px); color: var(--lime); }

/* hazard diamond: three quadrants dim until the row is hovered, the 7 is lit lime while the project is live */
.hz .q { opacity: 0.3; transition: opacity 0.6s var(--ease); }
.hz .q > path:first-child { fill: var(--purple); }
.hz .q > path + path { fill: var(--void); }
.hz.is-live .q3 { opacity: 1; }
.hz.is-live .q3 > path:first-child { fill: var(--lime); }
.row:focus-visible .hz .q { opacity: 1; }
.row:focus-visible .hz .q1 { transition-delay: 70ms; }
.row:focus-visible .hz .q2 { transition-delay: 140ms; }
.row:focus-visible .hz .q3 { transition-delay: 210ms; }
.row:focus-visible .hz { filter: drop-shadow(0 0 9px rgba(191, 64, 255, 0.4)); }

.note { margin-top: 26px; max-width: 54ch; font: 400 12.5px/1.6 var(--mono); color: var(--dim); }

/* ---------------------------------------------------------------- contact */
.mail {
  position: relative; display: inline-flex; align-items: baseline; gap: 0.12em; margin-top: clamp(28px, 4vw, 52px); padding-bottom: 0.1em;
  font: 600 clamp(28px, 7vw, 104px) / 1.02 var(--sans); letter-spacing: -0.038em; color: var(--bone); text-decoration: none; word-break: break-word;
}
.mail .arr { width: 0.3em; height: 0.3em; align-self: flex-start; margin-top: 0.12em; color: var(--dim); }
.mail::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--lime), var(--purple)); transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--ease); }
.mail:focus-visible::after { transform: scaleX(1); }
.mail:focus-visible .arr { transform: translate(0.05em, -0.05em); color: var(--lime); }
.mailrow { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px; margin-top: 30px; color: var(--mute); }
.copy {
  appearance: none; -webkit-appearance: none; position: relative; cursor: pointer; overflow: hidden; height: 38px; padding: 0 18px;
  border: 1px solid var(--line-2); border-radius: 999px; background: rgba(244, 241, 255, 0.035); color: var(--bone);
  font: 500 11px/1 var(--mono); letter-spacing: 0.15em; text-transform: uppercase;
  transition: border-color 0.5s var(--ease), background-color 0.5s var(--ease), color 0.4s;
}
.copy span { display: block; transition: transform 0.6s var(--ease), opacity 0.4s; }
.copy__b { position: absolute; inset: 0; display: grid !important; place-items: center; color: var(--void); transform: translateY(110%); }
.copy.is-copied { border-color: var(--lime); background: var(--lime); color: var(--void); }
.copy.is-copied .copy__a { transform: translateY(-110%); opacity: 0; }
.copy.is-copied .copy__b { transform: none; }

/* ---------------------------------------------------------------- footer */
.foot { position: relative; padding-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line); }
.foot__top { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 36px 48px; align-items: start; }
.foot__id { display: flex; align-items: flex-start; gap: 18px; font-size: 14.5px; line-height: 1.5; color: var(--mute); }
.foot__id b { font-weight: 600; color: var(--bone); }
.hz--foot { width: 46px; height: 46px; flex: none; }
.hz--foot .q { opacity: 1; }
.foot__nav { display: grid; gap: 6px; justify-items: start; }
.foot__nav a { padding: 4px 0; font: 500 11.5px/1 var(--mono); letter-spacing: 0.15em; text-transform: uppercase; color: var(--mute); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: color 0.3s, background-size 0.7s var(--ease); }
.foot__read { font: 500 11.5px/1.7 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }

.ft { margin-top: clamp(60px, 9vw, 130px); }
.ft1337 { --lvl: 0.9; width: 100%; height: auto; overflow: visible; }
.ft-body { fill: rgba(191, 64, 255, 0.05); }
.ft-line { fill: none; stroke: rgba(191, 64, 255, 0.66); stroke-width: 1.25px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ft-liquid { transform: translateY(calc(var(--surf) * 1px + (1 - var(--lvl, 0)) * var(--travel) * 1px)); }
.ft-wave { animation: ft-drift 12s linear infinite; }
.ft-glow { fill: var(--lime); fill-opacity: 0.55; }
.ft1337.is-idle .ft-wave { animation-play-state: paused; }
.ft-crest { fill: none; stroke: var(--lime); stroke-opacity: 0.95; stroke-width: 1.5px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
@keyframes ft-drift { to { transform: translateX(calc(var(--period) * -1px)); } }

.legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px;
  margin-top: clamp(22px, 3vw, 36px); padding-block: 22px max(28px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); font: 400 12px/1.6 var(--mono); color: var(--dim);
}

/* ---------------------------------------------------------------- motion */
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes scene-in { from { opacity: 0; transform: scale(1.07) translate3d(3%, 0, 0); } }
@keyframes led { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js .reveal.in { opacity: 1; transform: none; }
.js .h2.reveal { opacity: 1; transform: none; transition: none; }
.js .h2.reveal .mask > span { transform: translateY(112%); transition: transform 1.25s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js .h2.reveal.in .mask > span { transform: none; }

/* each project's hazard label boots up once as its row arrives: the quadrants flick on in order */
.hz .q0 { --n: 0; } .hz .q1 { --n: 1; } .hz .q2 { --n: 2; } .hz .q3 { --n: 3; }
.rows > li.in .hz .q { animation: boot 1.6s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 110ms + 450ms + var(--n) * 120ms); }
@keyframes boot { from { opacity: 0; } 38% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .h2.reveal .mask > span { transform: none; }
  .hero__scene, .hero__grid, .hero__in { transform: none; }
  .replay { display: none; }
}

/* ---------------------------------------------------------------- hover (pointer devices only, so touch never gets stuck lit) */
@media (hover: hover) {
  .nav a:hover { color: var(--bone); }
  .nav a:hover::before { transform: scale(1); }
  .btn:hover { border-color: rgba(191, 64, 255, 0.7); background: rgba(191, 64, 255, 0.14); box-shadow: 0 0 34px -6px rgba(191, 64, 255, 0.55); }
  .btn:hover .arr { transform: translateY(2px); }
  .replay:hover { color: var(--bone); }
  .replay:hover svg { transform: rotate(-200deg); }

  .row:hover::before { opacity: 1; }
  .rows:has(.row:hover) .row:not(:hover) { opacity: 0.4; }
  .row:hover .row__name { transform: translateX(8px); }
  .row:hover .row__url .arr { transform: translate(2px, -2px); color: var(--lime); }
  .row:hover .hz .q { opacity: 1; }
  .row:hover .hz .q1 { transition-delay: 70ms; }
  .row:hover .hz .q2 { transition-delay: 140ms; }
  .row:hover .hz .q3 { transition-delay: 210ms; }
  .row:hover .hz { filter: drop-shadow(0 0 9px rgba(191, 64, 255, 0.4)); }

  .mail:hover::after { transform: scaleX(1); }
  .mail:hover .arr { transform: translate(0.05em, -0.05em); color: var(--lime); }
  .copy:hover { border-color: rgba(191, 64, 255, 0.7); background: rgba(191, 64, 255, 0.14); }
  .foot__nav a:hover { color: var(--bone); background-size: 100% 1px; }
}

/* ---------------------------------------------------------------- smaller screens */
@media (max-width: 960px) {
  .spec { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .spec > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .spec > div:nth-child(n + 3) { border-top: 1px solid var(--line); margin-top: 0; padding-top: 22px; }
  .row { grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "hz name meta" "hz desc desc"; row-gap: 10px; align-items: start; }
  .row__n { display: none; }
  .row__meta { align-self: start; padding-top: 6px; }
  .row__name { align-self: center; }
  .row .hz { margin-top: 2px; }
  .foot__top { grid-template-columns: 1fr 1fr; }
  .foot__id { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  :root { --header: 64px; }
  .clock { display: none; }
  .nav { margin-left: auto; }
  .hero { min-height: max(620px, 100svh); padding-bottom: 130px; align-content: start; padding-top: calc(var(--header) + clamp(36px, 11vh, 96px)); }
  .hero__scene { width: 170vw; right: -48vw; top: auto; height: 62%; bottom: 0; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 82%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 82%, transparent 100%); }
  .hero__scene img { object-position: 72% 60%; }
  .hero__in { --lw: min(88vw, 440px); }
  .hero__meta { bottom: 20px; }
  .meta li:nth-child(n + 2) { display: none; }
  .row { grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "hz name" "hz desc" "hz meta"; }
  .row .hz { width: 44px; height: 44px; }
  .row__meta { justify-items: start; text-align: left; padding-top: 4px; grid-auto-flow: column; justify-content: start; align-items: center; gap: 8px 22px; }
  .foot__top { grid-template-columns: 1fr; }
  .legal { flex-direction: column; }
}

/* ---------------------------------------------------------------- 404 */
.lost { min-height: 100svh; display: grid; place-content: center; justify-items: center; gap: 28px; padding: 96px var(--gutter); text-align: center; }
.hz--big { width: clamp(150px, 26vw, 240px); height: auto; }
.hz--big .q { opacity: 1; animation: lamp 2.4s var(--ease) both; animation-delay: calc(var(--n, 0) * 160ms + 150ms); }
@keyframes lamp { from { opacity: 0.15; } }
.lost h1 { font: 600 clamp(30px, 5vw, 56px) / 1.05 var(--sans); letter-spacing: -0.04em; color: var(--bone); }
.lost p { color: var(--mute); }

/* ---------------------------------------------------------------- print: ink on paper */
@media print {
  body { background: #fff; color: #000; }
  body::after, .top, .gauge, .hero, .ruler, .btn, .copy, .ft, .replay, .skip { display: none !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .sec { padding-block: 24px 0; }
  .statement, .h2, .row__name, .mail, .spec dd, .row__url { color: #000; }
  .statement span, .row__desc, .eyebrow, .note, .legal, .foot__id, .foot__read, .foot__nav a, .spec dt { color: #333; }
  .rows, .rows > li, .spec, .foot, .legal { border-color: #bbb; }
  .row { padding-inline: 0; margin-inline: 0; break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}