/* Ink, paper and silver: the supplied black-and-white pixel references. */
:root {
  --bg: #f2f2ef;
  --bg-deep: #e5e5e1;
  --portal-bg: #f2f2ef;
  --ivory: #151515;
  --ivory-dim: #4d4d4d;
  --ivory-mute: #626262;
  --hair: #15151526;
  --hair-strong: #15151555;
  --coral: #161616;
  --coral-soft: #737373;
  --royal: #444;
  --royal-lite: #777;
}
html,
body {
  background: #f2f2ef;
  color: #151515;
}
body::selection {
  background: #171717;
  color: #fff;
}
#pixel-atmosphere {
  opacity: 0.8;
}
.portal {
  background: radial-gradient(ellipse at 65% 45%, #d9d9d93d, transparent 66%);
}
.portal-grid {
  background-image:
    linear-gradient(#33333308 1px, transparent 1px),
    linear-gradient(90deg, #33333308 1px, transparent 1px);
}
.site-nav a,
.portal-scroll,
.text-control,
.portal-utility a {
  color: #282828;
}
.text-control,
.portal-utility a {
  border-color: #33333350;
}
.portal-heading .kicker,
.portal-coordinate,
.portal-caption,
.portal-caption .tiny-label,
.chapter-detail,
.tiny-label,
.film-signature > span,
.worlds-footer,
.theme-caption p {
  color: #5a5a5a;
}
.portal-description {
  color: #454545;
}
.portal-orbit,
.journey-halo {
  border-color: #1b1b1b22;
}
.portal-orbit:after,
.portal-orbit span,
.journey-cross {
  color: #525252;
}
.btn-primary,
#enter-experience,
.portal.is-revealing #enter-experience {
  background: #191919;
  color: #f7f7f4;
  border-color: #191919;
  box-shadow: 0 12px 40px #00000012;
}
.btn-primary:hover,
#enter-experience:hover {
  background: #383838;
  color: white;
}
.btn-ghost {
  color: #202020;
  border-color: #20202050;
}
.btn-pixel {
  background: currentColor;
}
.portal-heading h1 > .hero-word--outline {
  color: transparent;
  -webkit-text-stroke: 1px #353535;
}
.hero-word:before {
  color: #737373;
}
.hero-word:after {
  color: #b4b4b4;
}
#hero-title.is-glitching .hero-word,
#hero-title.is-glitching .hero-word:before,
#hero-title.is-glitching .hero-word:after {
  filter: none;
}
.journey {
  border-color: #00000018;
  background: radial-gradient(ellipse at 70% 40%, #dededc60, transparent 70%);
}
.journey-chapter > p:not(.chapter-eyebrow) {
  color: #4d4d4d;
}
.chapter-eyebrow,
.journey-rail a[aria-current] {
  color: #151515;
}
/* Second headline lines speak the hero's outline language, in ink on paper.
   Every such line is >= 34 px (the smallest clamp), well above the ~32 px
   floor where a 1.5 px stroke stops reading; the tracking opens a little so
   neighbouring outlines never cross. */
.journey-chapter h3 em,
.worlds h2 em {
  color: transparent;
  -webkit-text-stroke: 1.5px #151515;
  letter-spacing: -0.045em;
}
.worlds h2 em {
  letter-spacing: -0.02em;
}
@supports not (-webkit-text-stroke: 1px black) {
  .journey-chapter h3 em,
  .worlds h2 em {
    color: #151515;
  }
}
@media (forced-colors: active) {
  .journey-chapter h3 em,
  .worlds h2 em {
    color: CanvasText;
    -webkit-text-stroke: 0;
  }
}
.journey-rail {
  border-color: #00000028;
}
.journey-rail a {
  color: #656565;
}
.journey-progress {
  background: #191919;
}
.portal-monitor,
.story-machine {
  background: #e8e8e5;
  border-color: #59595960;
  box-shadow: 0 20px 75px #00000015;
}
.monitor-top,
.monitor-bottom,
.story-machine-top,
.story-machine-bottom {
  color: #484848;
}
.signal-dot {
  background: #252525;
  box-shadow: none;
}
.monitor-pixels {
  color: #252525;
}
.monitor-screen,
.story-screen {
  background: #d4d4d0;
}
#portal-video,
#hero-portrait,
.story-screen > img,
.theme-poster {
  filter: saturate(1.35) contrast(1.04) !important;
}
/* Capture shows the original photo as taken (the mosaic matches both). */
.capture-photo {
  filter: none;
}
.monitor-scan,
.monitor-reticle,
.story-scan,
.capture-guides,
.story-play {
  filter: grayscale(1);
}
.worlds {
  background: radial-gradient(ellipse at 50% 30%, #dfdfdb60, transparent 70%);
}
.theme-visual {
  background: #e4e4e166;
  border-color: #29292944;
}
.theme-screen {
  background: #dfdfdc !important;
}
.frame-code,
.frame-counter {
  color: #4b4b4b;
}
.theme-grain {
  background-image: radial-gradient(#0004 0.6px, transparent 0.8px);
}
.film-signature {
  width: min(31vw, 410px);
}
.film-signature canvas {
  height: 145px;
}
.hosts,
.invite {
  border: 0;
  background: transparent;
}
.hosts-item {
  border-color: #15151526;
}
.hosts-item dd,
.section-intro {
  color: #505050;
}
.hosts-item dt::before {
  background: #151515;
  box-shadow:
    8px 0 #666,
    16px 0 #999;
}
.invite::before {
  display: none;
}
.site-footer {
  background: #e3e3df;
  border: 0;
}
.footer-note,
.footer-meta {
  color: #505050;
}
.brand-logo {
  display: inline-flex;
  gap: 11px;
  align-items: center;
  color: #141414;
  text-decoration: none;
  flex-shrink: 0;
}
.brand-symbol {
  width: 31px;
  height: 31px;
  display: block;
}
.brand-symbol svg {
  width: 100%;
  height: 100%;
}
.brand-word {
  position: relative;
  font:
    600 28px/1 "Space Grotesk",
    var(--font-display);
  letter-spacing: -0.075em;
}
.brand-word strong {
  color: #585858;
  font-weight: 500;
}
.brand-word::before,
.brand-word::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.brand-logo:hover .brand-word::before {
  color: #777;
  clip-path: inset(20% 0 58%);
  transform: translateX(2px);
  opacity: 0.8;
}
.brand-logo:hover .brand-word::after {
  color: #aaa;
  clip-path: inset(62% 0 19%);
  transform: translateX(-2px);
  opacity: 0.8;
}
.brand-logo:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 8px;
}
@media (max-width: 760px) {
  .brand-word {
    font-size: 24px;
  }
  .brand-symbol {
    width: 25px;
    height: 25px;
  }
  .brand-logo {
    gap: 8px;
  }
  .film-signature {
    width: 90px;
    padding-top: 13px;
  }
  .film-signature canvas {
    height: 61px;
  }
  .site-nav ul {
    gap: 12px;
  }
}
@media (max-width: 380px) {
  .site-nav li:last-of-type:not(.nav-external) {
    display: none;
  }
  .brand-word {
    font-size: 21px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .brand-word::before,
  .brand-word::after {
    display: none;
  }
}

/* GPU volume occupies the same scene coordinates as the burst canvas. */
#portal-depth {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}
html:not(.js) #portal-depth,
.js-failed #portal-depth {
  display: none !important;
}