:root {
  --bg: #050507;
  --white: #f4f3ef;
  --muted: #a7a8ad;
  --line: rgba(224, 226, 232, 0.16);
  --accent: #d8c28f;
  --acid: var(--accent);
  --blue: #8ea8c8;
}

html,
body,
.boot {
  background: var(--bg);
}

::selection {
  background: var(--accent);
  color: #050507;
}

.atmosphere {
  background:
    radial-gradient(ellipse at 52% 76%, rgba(76, 95, 123, 0.12) 0%, transparent 54%),
    radial-gradient(circle at 52% 48%, transparent 24%, rgba(5, 5, 7, 0.2) 55%, rgba(5, 5, 7, 0.9) 100%),
    linear-gradient(90deg, rgba(5, 5, 7, 0.76), transparent 46%, rgba(5, 5, 7, 0.3));
}

.boot__line {
  background: #24252a;
}

.topbar.scrolled {
  background: rgba(5, 5, 7, 0.78);
  border-color: rgba(224, 226, 232, 0.1);
}

.topbar nav a,
.sound,
.hero__eyebrow,
.rail,
.scroll-cue,
.manifesto p,
.intro,
.contact .section-copy > p:not(.label) {
  color: var(--muted);
}

.topbar nav a:hover {
  color: var(--white);
}

.sound i {
  border-color: #a7a8ad;
}

.rail span {
  background: rgba(224, 226, 232, 0.18);
}

.rail span i,
.scroll-cue i::after {
  background: #f4f3ef;
}

.hero__title span,
.section-copy h2 span {
  -webkit-text-stroke-color: rgba(224, 226, 232, 0.62);
}

.columns,
.work-grid p,
.service-list p,
.why .statement + p {
  color: #b8b9bd;
}

.manifesto b,
.work-grid b,
.service-list b,
.contact-links small,
footer,
.boot p {
  color: #7f8188;
}

.work-grid article:hover {
  background: rgba(142, 168, 200, 0.07);
}

.contact-links a:hover {
  background: rgba(216, 194, 143, 0.05);
}

.no-webgl body,
.no-webgl {
  background: radial-gradient(circle at 55% 70%, #18202c 0%, #0a0b0f 34%, #050507 68%);
}