@font-face {
  font-family: "EB Garamond";
  src: url("/assets/fonts/EBGaramond-Variable.ttf") format("truetype-variations");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/IBMPlexSans-Variable.ttf") format("truetype-variations");
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/IBMPlexMono-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --void: #09090b;
  --carapace: #141417;
  --graphite: #27272d;
  --iron: #50505a;
  --ash: #9898a2;
  --silk: #d8d5ce;
  --vellum: #eee8da;
  --paper: #f7f3ea;
  --ink: #171619;
  --rupture: #861b22;
  --verdigris: #456d67;
  --lamplight: #b8793e;
  --spectral: #6f7893;
  --canvas: var(--void);
  --surface: var(--carapace);
  --text: var(--silk);
  --muted: var(--ash);
  --rule: var(--graphite);
  --focus: var(--lamplight);
  --serif: "EB Garamond", "Iowan Old Style", Baskerville, Georgia, serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
  --shell: min(calc(100% - 2rem), 90rem);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--void);
  scroll-behavior: smooth;
  scrollbar-color: var(--iron) var(--void);
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

body::before {
  position: fixed;
  z-index: 20;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--lamplight), transparent);
  content: "";
  opacity: 0.55;
  pointer-events: none;
}

body[data-register="paper"] {
  color-scheme: light;
  --canvas: var(--paper);
  --surface: var(--vellum);
  --text: var(--ink);
  --muted: var(--iron);
  --rule: #c9c4b9;
  --focus: var(--spectral);
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

a:hover {
  text-decoration-color: var(--lamplight);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

::selection {
  background: var(--lamplight);
  color: var(--void);
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.75rem 1rem;
  transform: translateY(-150%);
  border: 1px solid var(--silk);
  background: var(--void);
  color: var(--silk);
  font: 0.75rem/1 var(--mono);
  text-transform: uppercase;
}

.skip-link:focus {
  transform: translateY(0);
}

.shell {
  width: var(--shell);
  margin-inline: auto;
}

.utility-rail {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 4.75rem;
  border-bottom: 1px solid var(--rule);
}

.brand-home {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: 0.8rem;
  font: 0.72rem/1 var(--mono);
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
}

.brand-home img {
  width: 2.2rem;
  height: 2.2rem;
  object-fit: contain;
  filter: drop-shadow(0 0 0.65rem rgb(184 121 62 / 18%));
  transition: filter 160ms ease, transform 160ms ease;
}

.brand-home:hover img,
.brand-home:focus-visible img {
  filter: drop-shadow(0 0 0.85rem rgb(184 121 62 / 38%));
  transform: scale(1.04);
}

.utility-label,
.eyebrow,
.folio,
.micro-label,
.status-chip {
  font: 0.72rem/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.utility-label {
  color: var(--muted);
}

.rail-actions {
  display: flex;
  justify-self: end;
  align-items: center;
  gap: 1.25rem;
}

.rail-actions a {
  font: 0.72rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.register-toggle {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.register-toggle::before {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border: 1px solid currentColor;
  background: var(--text);
  content: "";
  transform: rotate(45deg);
}

.hero {
  position: relative;
  min-height: calc(100svh - 4.75rem);
  overflow: hidden;
  background: #09090b;
  color: #f7f3ea;
  isolation: isolate;
  --text: #f7f3ea;
  --muted: #d8d5ce;
  --rule: rgb(216 213 206 / 28%);
}

.hero::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(9 9 11 / 96%) 0%, rgb(9 9 11 / 84%) 30%, rgb(9 9 11 / 36%) 58%, transparent 78%),
    linear-gradient(180deg, rgb(9 9 11 / 18%) 55%, rgb(9 9 11 / 86%) 100%);
  content: "";
  pointer-events: none;
}

.hero::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: radial-gradient(circle at var(--pointer-x, 72%) var(--pointer-y, 42%), rgb(184 121 62 / 13%), transparent 17rem);
  content: "";
  pointer-events: none;
}

.hero-world {
  position: absolute;
  z-index: 0;
  inset: 0;
  margin: 0;
  overflow: hidden;
  background: #09090b;
}

.hero-world picture,
.hero-world img {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-world img {
  object-fit: cover;
  object-position: center 48%;
  image-rendering: pixelated;
}

.hero-world figcaption {
  position: absolute;
  right: max(1rem, calc((100% - var(--shell)) / 2));
  bottom: 6rem;
  color: #d8d5ce;
  text-shadow: 0 1px 0 #09090b;
}

.hero-canvas {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.52;
  pointer-events: none;
}

.hero-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  gap: 1.5rem;
  min-height: calc(100svh - 4.75rem);
  padding-block: clamp(5rem, 11vw, 10rem) 3rem;
}

.hero-copy {
  grid-column: 1 / span 6;
  align-self: center;
  max-width: 46rem;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--lamplight);
}

.eyebrow::before {
  width: 2rem;
  height: 1px;
  background: currentColor;
  content: "";
}

h1,
h2,
h3,
.display {
  font-family: var(--serif);
  font-weight: 430;
  letter-spacing: -0.035em;
}

h1 {
  max-width: 9ch;
  margin: 1.5rem 0 1.75rem;
  font-size: clamp(4.25rem, 8.4vw, 8.75rem);
  line-height: 0.82;
}

.hero-intro {
  max-width: 57ch;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.875rem;
  padding: 0.65rem 1.1rem;
  border: 1px solid var(--text);
  border-radius: 2px;
  background: var(--text);
  color: var(--canvas);
  font: 0.76rem/1.2 var(--mono);
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button.secondary {
  background: transparent;
  color: var(--text);
}

.button.secondary::after {
  margin-left: 0.7rem;
  content: "↘";
}

.hero-folio {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: end;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  color: #d8d5ce;
}

.pixel-art {
  flex: none;
  aspect-ratio: 9 / 8;
  background-image: url("/assets/images/recluse-studio-atlas.png");
  background-image: image-set(
    url("/assets/images/recluse-studio-atlas.webp") type("image/webp"),
    url("/assets/images/recluse-studio-atlas.png") type("image/png")
  );
  background-repeat: no-repeat;
  background-size: 400% 300%;
  image-rendering: pixelated;
}

.atlas-r1-c1 { background-position: 0 0; }
.atlas-r1-c2 { background-position: 33.333% 0; }
.atlas-r1-c3 { background-position: 66.667% 0; }
.atlas-r1-c4 { background-position: 100% 0; }
.atlas-r2-c1 { background-position: 0 50%; }
.atlas-r2-c2 { background-position: 33.333% 50%; }
.atlas-r2-c3 { background-position: 66.667% 50%; }
.atlas-r2-c4 { background-position: 100% 50%; }
.atlas-r3-c1 { background-position: 0 100%; }
.atlas-r3-c2 { background-position: 33.333% 100%; }
.atlas-r3-c3 { background-position: 66.667% 100%; }
.atlas-r3-c4 { background-position: 100% 100%; }

.scroll-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}

.scroll-mark::before {
  width: 0.45rem;
  height: 0.45rem;
  background: var(--lamplight);
  content: "";
  transform: rotate(45deg);
}

.section {
  padding-block: clamp(5rem, 10vw, 9rem);
  border-top: 1px solid var(--rule);
}

.section-header {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.5rem;
  margin-bottom: clamp(3rem, 7vw, 6rem);
}

.section-header .folio {
  grid-column: 1 / span 2;
  padding-top: 0.6rem;
  color: var(--lamplight);
}

.section-heading {
  grid-column: 3 / span 6;
  margin: 0;
  font-size: clamp(3.25rem, 6vw, 6.5rem);
  line-height: 0.92;
}

.section-deck {
  grid-column: 10 / -1;
  align-self: end;
  max-width: 38ch;
  margin: 0;
  color: var(--muted);
}

.section-keeper {
  grid-column: 9;
  align-self: end;
  width: 7.5rem;
  margin-bottom: -1rem;
  filter: drop-shadow(0 1rem 1.5rem rgb(0 0 0 / 34%));
}

.apparatus-wrap {
  position: relative;
  min-height: 47rem;
  overflow: hidden;
  border: 1px solid var(--rule);
  background:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px),
    var(--surface);
  background-size: 4rem 4rem;
}

.apparatus-wrap::after {
  position: absolute;
  inset: 0;
  border: 0.5rem solid color-mix(in srgb, var(--canvas) 70%, transparent);
  content: "";
  pointer-events: none;
}

.apparatus-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.apparatus-core {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: min(28vw, 19rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid var(--iron);
  background: var(--void);
  color: var(--silk);
  clip-path: polygon(50% 0, 88% 12%, 100% 50%, 88% 88%, 50% 100%, 12% 88%, 0 50%, 12% 12%);
}

.sprite {
  width: 8rem;
  height: 8rem;
  background: url("/assets/images/recluse-sigil-spritesheet.png") 0 0 / 64rem 8rem no-repeat;
  image-rendering: pixelated;
}

.sprite.is-signalling {
  animation: signal 800ms steps(8) 1;
}

.sprite.is-locked {
  background-position-x: -56rem;
}

@keyframes signal {
  to { background-position-x: -64rem; }
}

.apparatus-count {
  margin-top: 1rem;
  color: var(--ash);
  font: 0.72rem/1.4 var(--mono);
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

.signal-node {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 8.5rem;
  min-height: 4.75rem;
  padding: 0.75rem;
  border: 1px solid var(--iron);
  border-radius: 2px;
  background: color-mix(in srgb, var(--surface) 91%, transparent);
  color: var(--silk);
  cursor: pointer;
  font: 0.72rem/1.35 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.signal-node:hover {
  border-color: var(--lamplight);
  transform: translateY(-2px);
}

.signal-node[aria-pressed="true"] {
  border-color: var(--verdigris);
  background: #17211f;
}

.signal-node[aria-pressed="true"]::before {
  position: absolute;
  top: 0.65rem;
  left: 0.65rem;
  width: 0.45rem;
  height: 0.45rem;
  background: var(--verdigris);
  content: "";
  transform: rotate(45deg);
}

.signal-node:nth-of-type(1) { top: 8%; left: 50%; transform: translateX(-50%); }
.signal-node:nth-of-type(1):hover { transform: translateX(-50%) translateY(-2px); }
.signal-node:nth-of-type(2) { top: 18%; right: 8%; }
.signal-node:nth-of-type(3) { top: 50%; right: 3%; transform: translateY(-50%); }
.signal-node:nth-of-type(3):hover { transform: translateY(calc(-50% - 2px)); }
.signal-node:nth-of-type(4) { right: 10%; bottom: 10%; }
.signal-node:nth-of-type(5) { bottom: 6%; left: 50%; transform: translateX(-50%); }
.signal-node:nth-of-type(5):hover { transform: translateX(-50%) translateY(-2px); }
.signal-node:nth-of-type(6) { bottom: 11%; left: 9%; }
.signal-node:nth-of-type(7) { top: 50%; left: 3%; transform: translateY(-50%); }
.signal-node:nth-of-type(7):hover { transform: translateY(calc(-50% - 2px)); }
.signal-node:nth-of-type(8) { top: 18%; left: 8%; }

.apparatus-message {
  position: absolute;
  z-index: 4;
  right: 1.5rem;
  bottom: 1.5rem;
  width: min(26rem, calc(100% - 3rem));
  min-height: 6rem;
  padding: 1rem 1.25rem;
  border-left: 2px solid var(--lamplight);
  background: var(--void);
  color: var(--silk);
  font-size: 0.95rem;
}

.apparatus-message strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--lamplight);
  font: 0.72rem/1.3 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.current-work-section {
  background: var(--paper);
  color: var(--ink);
  --text: var(--ink);
  --muted: var(--iron);
  --rule: #c9c4b9;
  --focus: var(--spectral);
}

.current-work-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.work-portal {
  min-width: 0;
  --portal-accent: var(--rupture);
}

.work-portal + .work-portal {
  border-left: 1px solid var(--rule);
}

.work-portal--portia { --portal-accent: #9a2429; }
.work-portal--infini { --portal-accent: #a87300; }
.work-portal--disquiet { --portal-accent: #861b22; }

.work-portal-link {
  display: flex;
  min-height: 46rem;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  box-shadow: inset 0 0 var(--portal-accent);
  transition: box-shadow 160ms ease, background 160ms ease;
}

.work-portal-link:hover,
.work-portal-link:focus-visible {
  background: color-mix(in srgb, var(--portal-accent) 5%, var(--paper));
  box-shadow: inset 0 4px var(--portal-accent);
}

.work-portal-art {
  position: relative;
  display: grid;
  aspect-ratio: 3 / 2;
  margin: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
  background: var(--void);
  place-items: center;
}

.work-portal-art picture,
.work-portal-art img {
  display: block;
  width: 100%;
  height: 100%;
}

.work-portal-art img {
  object-fit: cover;
  image-rendering: pixelated;
}

.work-portal--portia .work-portal-art img {
  object-position: 62% center;
}

.work-portal--infini .work-portal-art {
  background: #000;
}

.work-portal--infini .work-portal-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
}

.work-portal--disquiet .work-portal-art img {
  object-position: 64% center;
}

.work-portal-art::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 62%, rgb(9 9 11 / 78%));
  content: "";
  pointer-events: none;
}

.work-portal-art figcaption {
  position: absolute;
  z-index: 1;
  right: 1rem;
  bottom: 0.8rem;
  left: 1rem;
  color: #d8d5ce;
  text-align: right;
  text-shadow: 0 1px #09090b;
}

.work-portal-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.work-portal-register {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
  color: var(--portal-accent);
}

.work-portal-body h3 {
  margin: 2rem 0 1rem;
  font-size: clamp(3.5rem, 5vw, 5.5rem);
  line-height: 0.82;
}

.work-portal-body p {
  margin: 0;
  color: var(--muted);
}

.work-portal-action {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 2rem;
  color: var(--ink);
  font: 0.76rem/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.work-portal-action::before {
  width: 0.6rem;
  height: 0.6rem;
  margin-top: 0.2rem;
  border: 1px solid var(--portal-accent);
  background: var(--portal-accent);
  content: "";
  transform: rotate(45deg);
}

.blog-threshold {
  position: relative;
  overflow: clip;
  background: #050506;
  color: #f4f0e8;
  --text: #f4f0e8;
  --muted: #c4c0b8;
}

.blog-threshold-link {
  position: relative;
  display: block;
  min-height: clamp(44rem, 70vw, 58rem);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  isolation: isolate;
}

.blog-threshold-link::after {
  position: absolute;
  z-index: 4;
  inset: 0;
  border: 1px solid transparent;
  box-shadow: inset 0 0 0 transparent;
  content: "";
  pointer-events: none;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.blog-threshold-link:hover::after,
.blog-threshold-link:focus-visible::after {
  border-color: var(--spectral);
  box-shadow: inset 0 0 5rem rgb(111 165 158 / 12%);
}

.blog-threshold-scene,
.blog-parallax-plane {
  position: absolute;
  inset: 0;
}

.blog-threshold-scene {
  z-index: -1;
  overflow: hidden;
  background: #050506;
}

.blog-parallax-plane {
  transform: translate3d(var(--layer-x, 0), var(--layer-y, 0), 0);
  transition: transform 90ms linear;
  will-change: transform;
}

.blog-parallax-plane img {
  display: block;
  image-rendering: pixelated;
}

.blog-parallax-plane--back {
  inset: -8%;
}

.blog-parallax-plane--back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 64% center;
  filter: saturate(0.72) brightness(0.62);
  transform: scale(1.04);
}

.blog-parallax-plane--folio img,
.blog-parallax-plane--tower img {
  position: absolute;
  border: 1px solid rgb(216 213 206 / 34%);
  box-shadow: 0 2rem 5rem rgb(0 0 0 / 72%);
}

.blog-parallax-plane--folio img {
  top: 9%;
  right: 22%;
  width: min(30vw, 29rem);
  transform: rotate(-3deg);
}

.blog-parallax-plane--tower img {
  right: 2%;
  bottom: -13%;
  width: min(25vw, 24rem);
  transform: rotate(4deg);
}

.blog-threshold-scene::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  background:
    linear-gradient(90deg, #050506 0%, rgb(5 5 6 / 96%) 28%, rgb(5 5 6 / 55%) 55%, rgb(5 5 6 / 12%) 100%),
    linear-gradient(180deg, rgb(5 5 6 / 5%) 45%, #050506 100%);
  content: "";
  pointer-events: none;
}

.blog-threshold-web {
  position: absolute;
  z-index: 3;
  inset: 0;
  background:
    repeating-linear-gradient(116deg, transparent 0 5rem, rgb(111 165 158 / 10%) 5.05rem 5.1rem, transparent 5.15rem 10rem),
    radial-gradient(circle at 77% 42%, rgb(184 121 62 / 22%) 0 0.2rem, transparent 0.25rem);
  pointer-events: none;
  mix-blend-mode: screen;
}

.blog-threshold-copy {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: clamp(44rem, 70vw, 58rem);
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(6rem, 10vw, 10rem);
}

.blog-threshold-copy h2 {
  max-width: 8ch;
  margin: 1.5rem 0 1.75rem;
  font-size: clamp(4rem, 8vw, 8.5rem);
  line-height: 0.82;
}

.blog-threshold-copy p {
  max-width: 35rem;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
}

.blog-threshold-action {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 1rem;
  margin-top: 2.5rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--spectral);
  background: rgb(9 9 11 / 76%);
  color: #f4f0e8;
  font: 0.78rem/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.blog-threshold-action span {
  color: var(--lamplight);
  transition: transform 160ms ease;
}

.blog-threshold-link:hover .blog-threshold-action span,
.blog-threshold-link:focus-visible .blog-threshold-action span {
  transform: translate(0.25rem, -0.25rem);
}

.blog-threshold-hint {
  position: absolute;
  right: 0;
  bottom: 2rem;
  color: rgb(216 213 206 / 62%);
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.5rem;
}

.proof-intro {
  grid-column: 1 / span 4;
}

.proof-intro h2 {
  margin: 0 0 1.5rem;
  font-size: clamp(3rem, 5vw, 5rem);
  line-height: 0.95;
}

.proof-intro p {
  max-width: 42ch;
  color: var(--muted);
}

.ledger {
  grid-column: 6 / -1;
  border: 1px solid var(--rule);
}

.ledger-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(8rem, 1fr) minmax(11rem, 2fr);
  gap: 1rem;
  align-items: center;
  min-height: 5rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--rule);
}

.ledger-row:first-child {
  border-top: 0;
}

.ledger-relic {
  width: 4.25rem;
}

.ledger-title {
  font: 0.76rem/1.35 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ledger-copy {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.contact-section {
  position: relative;
  overflow: hidden;
}

.contact-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.5rem;
}

.contact-copy {
  grid-column: 1 / span 7;
}

.contact-copy h2 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(4rem, 8vw, 8.5rem);
  line-height: 0.84;
}

.contact-action {
  grid-column: 10 / -1;
  align-self: end;
}

.contact-automaton {
  grid-column: 8 / span 2;
  align-self: end;
  width: 100%;
  max-width: 14rem;
  filter: drop-shadow(0 1rem 1.5rem rgb(0 0 0 / 42%));
}

.contact-action p {
  color: var(--muted);
}

.site-footer {
  position: relative;
  overflow: hidden;
  padding-block: 3rem;
  border-top: 1px solid var(--rule);
  background: var(--surface);
  isolation: isolate;
}

.site-footer::after {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: max(2rem, calc((100vw - var(--shell)) / 2));
  width: clamp(12rem, 21vw, 21rem);
  aspect-ratio: 1;
  background: url("/assets/images/recluse-spider-mark.png") center / contain no-repeat;
  content: "";
  opacity: 0.08;
  pointer-events: none;
  transform: translateY(-50%);
}

.footer-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: end;
}

.footer-mark {
  width: min(31rem, 70vw);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 1.25rem;
  color: var(--muted);
  font: 0.72rem/1.4 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.footer-note {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font: 0.68rem/1.5 var(--mono);
}

/* Reading pages */
.reading-main {
  min-height: 70vh;
  padding-block: clamp(5rem, 10vw, 9rem);
}

.reading-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.5rem;
}

.reading-aside {
  grid-column: 1 / span 3;
  color: var(--muted);
}

.reading-content {
  grid-column: 4 / span 7;
  max-width: 70ch;
}

.reading-content h1 {
  max-width: none;
  margin-top: 0;
  font-size: clamp(4rem, 8vw, 8rem);
}

.reading-content h2 {
  margin: 3.5rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1;
}

.reading-content h3 {
  margin: 2.5rem 0 0.75rem;
  font-size: 1.65rem;
}

.reading-content p,
.reading-content li {
  color: var(--muted);
}

.reading-content strong {
  color: var(--text);
}

.reading-content .lede {
  color: var(--text);
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  line-height: 1.25;
}

.notice {
  margin-block: 2rem;
  padding: 1.25rem 1.5rem;
  border-left: 2px solid var(--lamplight);
  background: var(--surface);
}

.notice p {
  margin: 0;
}

.product-hero {
  min-height: 80vh;
  display: grid;
  align-items: center;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--canvas) 96%, transparent), color-mix(in srgb, var(--canvas) 68%, transparent)),
    url("/assets/images/silk-lattice.svg") center / cover;
}

.product-hero h1 {
  max-width: none;
  margin-bottom: 1rem;
}

.product-deck {
  max-width: 55ch;
  color: var(--muted);
  font-size: 1.15rem;
}

.product-status {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
  color: var(--lamplight);
  font: 0.72rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.product-status::before {
  width: 0.55rem;
  height: 0.55rem;
  border: 1px solid currentColor;
  content: "";
  transform: rotate(45deg);
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 3rem 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  list-style: none;
}

.feature-list li {
  min-height: 11rem;
  padding: 1.5rem;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.feature-list strong {
  display: block;
  margin-bottom: 0.75rem;
  font-family: var(--serif);
  font-size: 1.8rem;
  font-weight: 500;
}

.noscript-note {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
  color: var(--muted);
  font: 0.72rem/1.5 var(--mono);
  text-align: center;
}

@media (max-width: 64rem) {
  :root { --shell: min(calc(100% - 3rem), 90rem); }
  .utility-label { display: none; }
  .utility-rail { grid-template-columns: 1fr auto; }
  .hero-copy { grid-column: 1 / span 6; }
  .section-header .folio { grid-column: 1 / span 2; }
  .section-heading { grid-column: 3 / span 7; }
  .section-deck { grid-column: 10 / -1; }
  .section-keeper { width: 6rem; }
  .apparatus-wrap { min-height: 43rem; }
  .signal-node { width: 7.3rem; }
  .work-portal-link { min-height: 42rem; }
  .work-portal-body { padding: 1.5rem; }
  .work-portal-body h3 { font-size: clamp(3rem, 5vw, 4.5rem); }
  .work-portal-register { align-items: flex-start; flex-direction: column; gap: 0.35rem; }
  .proof-intro { grid-column: 1 / span 4; }
  .ledger { grid-column: 5 / -1; }
}

@media (max-width: 48rem) {
  :root { --shell: min(calc(100% - 2rem), 90rem); }
  .rail-actions a { display: none; }
  .hero { display: flex; min-height: 0; flex-direction: column; }
  .hero::before { background: linear-gradient(180deg, #09090b 0%, rgb(9 9 11 / 10%) 55%, rgb(9 9 11 / 74%) 100%); }
  .hero-world { position: relative; order: 2; width: 100%; aspect-ratio: 3 / 2; }
  .hero-world img { object-fit: contain; object-position: center; }
  .hero-world figcaption { right: 1rem; bottom: 1rem; }
  .hero-grid { order: 1; display: flex; min-height: 0; flex-direction: column; align-items: stretch; justify-content: center; padding-block: 4.5rem 2.5rem; }
  .hero-copy { order: 1; }
  .hero-folio { order: 2; width: 100%; margin-top: 3rem; }
  h1 { font-size: clamp(4rem, 20vw, 7rem); }
  .section-header { display: block; }
  .section-header .folio { margin-bottom: 1.25rem; }
  .section-deck { margin-top: 1.5rem; }
  .section-keeper { width: min(9rem, 34vw); margin: 1rem 0 -1rem auto; }
  .apparatus-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; min-height: auto; padding: 1px; background-size: 3rem 3rem; }
  .apparatus-canvas { display: none; }
  .apparatus-core { position: relative; top: auto; left: auto; grid-column: 1 / -1; width: 13rem; margin: 4rem auto; transform: none; }
  .signal-node,
  .signal-node:nth-of-type(n) { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: auto; min-height: 5rem; transform: none; }
  .signal-node:nth-of-type(n):hover { transform: none; }
  .apparatus-message { position: relative; right: auto; bottom: auto; grid-column: 1 / -1; width: auto; margin: 1rem; }
  .current-work-grid { grid-template-columns: 1fr; }
  .work-portal + .work-portal { border-top: 1px solid var(--rule); border-left: 0; }
  .work-portal-link { min-height: 0; }
  .work-portal-body { min-height: 23rem; padding: 2rem 1.25rem; }
  .work-portal-register { align-items: center; flex-direction: row; }
  .work-portal-body h3 { font-size: clamp(4rem, 18vw, 6rem); }
  .blog-threshold-link,
  .blog-threshold-copy { min-height: 44rem; }
  .blog-threshold-copy { justify-content: flex-end; padding-bottom: 5rem; }
  .blog-threshold-copy h2 { max-width: 9ch; font-size: clamp(4rem, 17vw, 6rem); }
  .blog-threshold-copy p { max-width: 28rem; }
  .blog-parallax-plane--back img { object-position: 68% center; }
  .blog-parallax-plane--folio img { top: 7%; right: 4%; width: 58vw; }
  .blog-parallax-plane--tower img { right: -9%; bottom: 16%; width: 42vw; }
  .blog-threshold-scene::after { background: linear-gradient(180deg, rgb(5 5 6 / 8%) 0%, rgb(5 5 6 / 48%) 38%, #050506 76%); }
  .blog-threshold-hint { display: none; }
  .proof-grid { display: block; }
  .ledger { margin-top: 3rem; }
  .ledger-row { grid-template-columns: 4rem 1fr; }
  .ledger-copy { grid-column: 2; }
  .contact-grid { display: block; }
  .contact-automaton { width: min(15rem, 62vw); margin: 2rem auto 0; }
  .contact-action { margin-top: 3rem; }
  .footer-grid { display: block; }
  .footer-links { justify-content: flex-start; margin-top: 2rem; }
  .footer-note { display: block; }
  .footer-note span { display: block; margin-top: 0.5rem; }
  .reading-grid { display: block; }
  .reading-aside { margin-bottom: 3rem; }
  .feature-list { grid-template-columns: 1fr; }
}

@media (max-width: 27rem) {
  .apparatus-wrap { grid-template-columns: 1fr; }
  .apparatus-core,
  .apparatus-message { grid-column: 1; }
  .hero-folio { align-items: flex-start; flex-direction: column; gap: 0.75rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-copy,
  .hero-world {
    animation: arrive 700ms var(--ease) both;
  }
  .hero-world { animation-delay: 120ms; }
  @keyframes arrive {
    from { opacity: 0; transform: translateY(1.5rem); }
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .hero-canvas,
  .apparatus-canvas { display: none; }
  .blog-parallax-plane { transform: none !important; transition: none; }
  .sprite.is-signalling,
  .sprite.is-locked { animation: none; background-position-x: -56rem; }
}

@media (forced-colors: active) {
  .hero-world,
  .hero::before,
  .hero::after,
  .work-portal-art::after,
  .site-footer::after { display: none; }
  .button,
  .signal-node,
  .apparatus-core { forced-color-adjust: auto; }
}

/* Disquiet product surface */
.disquiet-page {
  --disquiet-red: #861b22;
}

.disquiet-hero {
  position: relative;
  min-height: calc(100svh - 4.75rem);
  overflow: hidden;
  background: #050506;
  color: #f7f3ea;
  isolation: isolate;
  --text: #f7f3ea;
  --muted: #c3c1bc;
  --rule: rgb(216 213 206 / 24%);
}

.disquiet-hero::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, #050506 0%, rgb(5 5 6 / 97%) 26%, rgb(5 5 6 / 66%) 48%, rgb(5 5 6 / 10%) 76%),
    linear-gradient(180deg, transparent 54%, rgb(5 5 6 / 82%) 100%);
  content: "";
  pointer-events: none;
}

.disquiet-hero::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 49.85%, rgb(216 213 206 / 9%) 50%, transparent 50.15%),
    linear-gradient(180deg, transparent 49.85%, rgb(216 213 206 / 7%) 50%, transparent 50.15%);
  background-size: 8rem 8rem;
  content: "";
  opacity: 0.3;
  pointer-events: none;
}

.disquiet-hero-world {
  position: absolute;
  inset: 0;
  margin: 0;
}

.disquiet-hero-world img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  image-rendering: pixelated;
}

.disquiet-grain {
  position: absolute;
  z-index: 3;
  inset: 0;
  background-image: radial-gradient(rgb(247 243 234 / 15%) 0.6px, transparent 0.7px);
  background-size: 7px 7px;
  mix-blend-mode: screen;
  opacity: 0.14;
  pointer-events: none;
}

.disquiet-hero-grid {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-content: center;
  min-height: calc(100svh - 4.75rem);
  padding-block: 5rem 2rem;
}

.disquiet-hero-copy {
  grid-column: 1 / span 6;
}

.disquiet-hero-copy h1 {
  max-width: 10ch;
  margin: 0;
  font-size: clamp(4.5rem, 8.6vw, 9.25rem);
  line-height: 0.82;
  letter-spacing: -0.045em;
}

.disquiet-hero .product-status {
  color: #c75b60;
}

.disquiet-lede {
  max-width: 54ch;
  margin: 2rem 0 0;
  color: var(--text);
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.35;
}

.platform-line {
  max-width: 58ch;
  margin: 1.25rem 0 0;
  color: var(--muted);
  font: 0.76rem/1.55 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.disquiet-hero-folio {
  grid-column: 1 / -1;
  align-self: end;
  display: flex;
  justify-content: space-between;
  margin-top: 5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
}

.disquiet-state-section {
  background: var(--void);
  color: var(--silk);
  --text: var(--silk);
  --muted: var(--ash);
  --rule: var(--graphite);
}

.state-instrument {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(18rem, 4fr);
  min-height: 44rem;
  border: 1px solid var(--rule);
  background: var(--carapace);
}

.state-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  padding: clamp(1rem, 3vw, 3rem);
  overflow: hidden;
  border-right: 1px solid var(--rule);
  background:
    linear-gradient(var(--graphite) 1px, transparent 1px),
    linear-gradient(90deg, var(--graphite) 1px, transparent 1px),
    var(--void);
  background-size: 4rem 4rem;
}

.state-fallback,
.state-fallback img {
  width: 100%;
}

.state-fallback img {
  border: 1px solid var(--iron);
  image-rendering: pixelated;
}

.state-viewport {
  display: none;
  width: min(100%, 42rem);
  aspect-ratio: 1;
  border: 1px solid var(--iron);
  background: url("/assets/apps/disquiet/waking-still-relay.webp") left center / 200% 100% no-repeat;
  image-rendering: pixelated;
}

.js .state-viewport {
  display: block;
}

.js .state-fallback {
  display: none;
}

.state-instrument[data-state="still"] .state-viewport {
  background-position: right center;
}

.state-scan {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: -12%;
  width: 2px;
  background: #c75b60;
  box-shadow: 0 0 0 1px rgb(134 27 34 / 24%);
  opacity: 0;
  pointer-events: none;
}

.state-instrument.is-shifting .state-scan {
  animation: state-scan 420ms steps(8) 1;
}

@keyframes state-scan {
  0% { left: 4%; opacity: 0; }
  12%, 82% { opacity: 0.8; }
  100% { left: 96%; opacity: 0; }
}

.state-caption {
  position: absolute;
  z-index: 3;
  right: 1.5rem;
  bottom: 1rem;
  color: var(--ash);
}

.state-console {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 4vw, 3rem);
}

.state-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border: 1px solid var(--iron);
  background: var(--void);
}

.state-switch button {
  min-height: 3rem;
  border: 0;
  background: transparent;
  color: var(--ash);
  cursor: pointer;
  font: 0.72rem/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.state-switch button[aria-pressed="true"] {
  background: var(--silk);
  color: var(--void);
}

.state-instrument[data-state="still"] .state-switch button[aria-pressed="true"] {
  box-shadow: inset 3px 0 var(--disquiet-red);
}

.state-reading {
  margin-top: auto;
  padding-block: 3rem;
}

.state-reading .folio {
  color: #c75b60;
}

.state-reading h3 {
  margin: 0.75rem 0 1rem;
  font-size: clamp(2.4rem, 4vw, 4rem);
  line-height: 0.95;
}

.state-reading p {
  max-width: 42ch;
  margin: 0;
  color: var(--ash);
}

.state-law {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
  margin-top: auto;
  border-top: 1px solid var(--graphite);
  font: 0.68rem/1.45 var(--mono);
  text-transform: uppercase;
}

.state-law span,
.state-law strong {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--graphite);
}

.state-law span {
  color: var(--ash);
}

.state-law strong {
  color: var(--silk);
  font-weight: 400;
  text-align: right;
}

.disquiet-loop-section {
  overflow: clip;
  background: #08090a;
  color: var(--silk);
  --text: var(--silk);
  --muted: var(--ash);
  --rule: var(--graphite);
}

[data-disquiet-parallax] {
  --parallax-x: 0;
  --parallax-y: 0;
}

.encounter-field {
  --route-focus: 6%;
  --route-shift: 0%;
  position: relative;
  min-height: clamp(30rem, 54vw, 50rem);
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--iron);
  background: var(--void);
  isolation: isolate;
}

.encounter-field-world {
  position: absolute;
  inset: -4%;
  transform: translate3d(calc(var(--layer-x, 0px) + var(--route-shift)), var(--layer-y, 0px), 0)
    scale(1.04);
  transition: transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

.encounter-field-world img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

.encounter-field::before {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: var(--route-focus);
  width: 1px;
  background: linear-gradient(transparent 12%, #cf4d52 48%, transparent 88%);
  box-shadow: 0 0 0 1px rgb(134 27 34 / 18%);
  content: "";
  opacity: 0.78;
  transition: left 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.encounter-field-vignette {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(5 5 6 / 82%) 0%, transparent 36%, transparent 70%, rgb(5 5 6 / 26%) 100%),
    linear-gradient(180deg, rgb(5 5 6 / 18%), transparent 42%, rgb(5 5 6 / 70%) 100%);
  pointer-events: none;
}

.encounter-field-vignette::after {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, rgb(216 213 206 / 8%) 1px, transparent 1px);
  background-size: 12.5% 100%;
  content: "";
  opacity: 0.25;
}

.route-reading {
  position: absolute;
  z-index: 4;
  top: 2rem;
  left: 2rem;
  width: min(26rem, calc(100% - 4rem));
  padding: 1.25rem;
  border-top: 1px solid #c75b60;
  background: rgb(5 5 6 / 76%);
  box-shadow: 0 1rem 4rem rgb(0 0 0 / 38%);
  backdrop-filter: blur(8px);
}

.route-reading span,
.route-reading strong,
.route-reading small {
  display: block;
}

.route-reading span {
  color: #c75b60;
}

.route-reading strong {
  margin-top: 0.7rem;
  font-family: var(--serif);
  font-size: clamp(1.65rem, 3vw, 2.8rem);
  font-weight: 500;
  line-height: 1;
}

.route-reading small {
  margin-top: 0.75rem;
  color: var(--ash);
  font-size: 0.82rem;
  line-height: 1.5;
}

.encounter-field figcaption,
.development-art figcaption {
  position: absolute;
  z-index: 4;
  right: 1.25rem;
  bottom: 1rem;
  color: var(--ash);
}

.encounter-loop {
  display: grid;
  grid-template-columns: repeat(8, minmax(8.5rem, 1fr));
  margin: -1px 0 0;
  padding: 0;
  overflow-x: auto;
  border-left: 1px solid var(--iron);
  list-style: none;
  scrollbar-color: var(--iron) var(--void);
}

.encounter-loop li {
  min-width: 0;
  border-right: 1px solid var(--iron);
  border-bottom: 1px solid var(--iron);
}

.encounter-loop button {
  width: 100%;
  min-height: 9.25rem;
  padding: 1rem;
  border: 0;
  background: #0c0d0f;
  color: var(--silk);
  text-align: left;
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease;
}

.encounter-loop button:hover,
.encounter-loop button:focus-visible {
  background: #17181a;
}

.encounter-loop button[aria-pressed="true"] {
  background: var(--silk);
  color: var(--void);
  box-shadow: inset 0 3px var(--disquiet-red);
}

.encounter-loop span,
.encounter-loop small {
  display: block;
  color: var(--ash);
  font: 0.62rem/1.45 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.encounter-loop button[aria-pressed="true"] span,
.encounter-loop button[aria-pressed="true"] small {
  color: var(--iron);
}

.encounter-loop span {
  color: #c75b60;
}

.encounter-loop strong {
  display: block;
  margin: 1.1rem 0 0.55rem;
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1;
}

.disquiet-world-section {
  position: relative;
  min-height: min(78rem, 105svh);
  padding-block: clamp(5rem, 9vw, 10rem);
  overflow: clip;
  background: #050506;
  color: var(--silk);
  isolation: isolate;
  --text: var(--silk);
  --muted: #c3c1bc;
  --rule: rgb(216 213 206 / 25%);
}

.disquiet-world-section::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(5 5 6 / 88%) 0%, rgb(5 5 6 / 42%) 42%, rgb(5 5 6 / 18%) 64%, rgb(5 5 6 / 64%) 100%),
    linear-gradient(180deg, rgb(5 5 6 / 34%), transparent 38%, rgb(5 5 6 / 82%) 100%);
  content: "";
  pointer-events: none;
}

.bellwether-world {
  position: absolute;
  z-index: 0;
  inset: -5%;
  transform: translate3d(var(--layer-x, 0px), var(--layer-y, 0px), 0)
    scale(1.05);
  will-change: transform;
}

.bellwether-world img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  image-rendering: pixelated;
}

.bellwether-weather {
  position: absolute;
  z-index: 2;
  inset: -10%;
  background-image:
    repeating-linear-gradient(104deg, transparent 0 35px, rgb(216 213 206 / 18%) 36px 37px, transparent 38px 74px),
    repeating-linear-gradient(98deg, transparent 0 82px, rgb(216 213 206 / 10%) 83px 84px, transparent 85px 136px);
  background-size: 17rem 23rem, 29rem 31rem;
  mix-blend-mode: screen;
  opacity: 0.22;
  transform: translate3d(var(--layer-x, 0px), var(--layer-y, 0px), 0);
  animation: bellwether-rain 2.2s steps(8) infinite;
  pointer-events: none;
}

@keyframes bellwether-rain {
  to { background-position: -4rem 9rem, -2rem 12rem; }
}

.disquiet-world-grid,
.development-grid,
.product-contact-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.5rem;
}

.disquiet-world-grid {
  align-items: end;
  min-height: min(57rem, 78svh);
}

.world-copy {
  grid-column: 1 / span 5;
  align-self: start;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--rule);
  background: rgb(5 5 6 / 78%);
  backdrop-filter: blur(10px);
}

.world-copy h2,
.development-grid h2,
.product-contact h2 {
  margin: 1rem 0 1.5rem;
  font-size: clamp(3.2rem, 6vw, 6.5rem);
  line-height: 0.9;
}

.world-copy p,
.development-grid p,
.product-contact p {
  color: var(--muted);
}

.world-coordinate {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  color: #c75b60;
}

.witness-ledger {
  grid-column: 7 / -1;
  border-top: 1px solid var(--rule);
  background: rgb(5 5 6 / 72%);
  backdrop-filter: blur(10px);
}

.witness-ledger article {
  position: relative;
  display: grid;
  grid-template-columns: 7rem minmax(9rem, 0.8fr) minmax(14rem, 1.4fr);
  gap: 1.5rem;
  align-items: start;
  padding: 1.75rem;
  overflow: hidden;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  transition: background 220ms ease, transform 220ms ease;
}

.witness-ledger article::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--disquiet-red);
  content: "";
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 220ms ease;
}

.witness-ledger article:hover {
  background: rgb(216 213 206 / 8%);
  transform: translateX(-0.5rem);
}

.witness-ledger article:hover::before {
  transform: scaleY(1);
}

.witness-ledger h3,
.witness-ledger p {
  margin: 0;
}

.witness-ledger h3 {
  font-size: 1.7rem;
}

.witness-ledger p {
  color: var(--muted);
}

.development-section {
  overflow: clip;
  background: #111214;
  color: var(--silk);
  --text: var(--silk);
  --muted: var(--ash);
  --rule: var(--graphite);
}

.development-grid {
  align-items: start;
}

.development-art {
  position: relative;
  grid-column: 1 / span 7;
  grid-row: 1 / span 2;
  min-height: 52rem;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--iron);
  background: var(--void);
}

.development-art::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(5 5 6 / 38%), transparent 42%), linear-gradient(180deg, transparent 70%, rgb(5 5 6 / 75%));
  content: "";
  pointer-events: none;
}

.development-art picture {
  position: absolute;
  inset: -4%;
  transform: translate3d(var(--layer-x, 0px), var(--layer-y, 0px), 0)
    scale(1.04);
  will-change: transform;
}

.development-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

.development-copy {
  grid-column: 8 / -1;
  padding: 1rem 0 2rem;
}

.record-list {
  grid-column: 8 / -1;
  margin: 0;
  border-top: 1px solid var(--rule);
}

.record-list div {
  display: grid;
  grid-template-columns: minmax(8rem, 0.8fr) minmax(12rem, 1.5fr);
  gap: 1.5rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--rule);
}

.record-list dt {
  color: #c75b60;
  font: 0.68rem/1.5 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.record-list dd {
  margin: 0;
}

.product-contact {
  position: relative;
  overflow: hidden;
  background: #060708;
  color: var(--silk);
  --text: var(--silk);
  --muted: var(--ash);
  --rule: var(--graphite);
}

.product-contact::before {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 82% 62%, rgb(134 27 34 / 16%), transparent 17rem),
    linear-gradient(90deg, transparent 49.9%, rgb(216 213 206 / 5%) 50%, transparent 50.1%);
  background-size: auto, 6rem 100%;
  content: "";
}

.product-contact-grid > div:first-child {
  grid-column: 1 / span 7;
}

.product-contact-grid > div:nth-child(2) {
  grid-column: 9 / -1;
  align-self: end;
}

.contact-signal {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0;
  height: 4rem;
  margin-top: 5rem;
  color: #c75b60;
}

.contact-signal span {
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

.contact-signal i {
  width: 0.65rem;
  height: 0.65rem;
  border: 1px solid currentColor;
  transform: rotate(45deg);
}

.disquiet-page .reading-content h1 {
  letter-spacing: -0.035em;
}

.disquiet-page .reading-content h2::before {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.65rem;
  background: var(--disquiet-red);
  content: "";
  transform: rotate(45deg) translateY(-0.12em);
}

@media (max-width: 64rem) {
  .disquiet-hero-copy { grid-column: 1 / span 7; }
  .state-instrument { grid-template-columns: minmax(0, 7fr) minmax(17rem, 5fr); }
  .world-copy { grid-column: 1 / span 6; }
  .witness-ledger { grid-column: 6 / -1; }
  .witness-ledger article { grid-template-columns: 6rem 1fr; }
  .witness-ledger p { grid-column: 2; }
  .development-art { grid-column: 1 / span 6; }
  .development-copy,
  .record-list { grid-column: 7 / -1; }
}

@media (max-width: 48rem) {
  .disquiet-hero { min-height: 0; }
  .disquiet-hero::before { background: linear-gradient(180deg, #050506 0%, rgb(5 5 6 / 92%) 40%, rgb(5 5 6 / 22%) 72%, #050506 100%); }
  .disquiet-hero-world { position: relative; display: block; aspect-ratio: 1 / 1; }
  .disquiet-hero-world img { object-fit: cover; object-position: 68% center; }
  .disquiet-hero-grid { display: block; min-height: 0; padding-block: 3.5rem; }
  .disquiet-hero-copy h1 { font-size: clamp(4.25rem, 19vw, 7rem); }
  .disquiet-hero-folio { align-items: flex-start; flex-direction: column; gap: 0.5rem; margin-top: 3rem; }
  .state-instrument { display: block; min-height: 0; }
  .state-visual { min-height: auto; border-right: 0; border-bottom: 1px solid var(--rule); }
  .state-caption { position: static; justify-self: start; margin-top: 1rem; }
  .state-console { min-height: 34rem; }
  .encounter-field { min-height: 34rem; }
  .encounter-field-world { inset: -2rem -18rem; }
  .route-reading { top: 1rem; left: 1rem; width: min(24rem, calc(100% - 2rem)); }
  .encounter-field figcaption { right: 1rem; max-width: 70%; text-align: right; }
  .disquiet-world-grid,
  .development-grid,
  .product-contact-grid { display: block; }
  .disquiet-world-section { min-height: 78rem; }
  .disquiet-world-grid { min-height: 68rem; }
  .bellwether-world { inset: -4% -42%; }
  .world-copy { max-width: 34rem; }
  .witness-ledger,
  .development-copy,
  .record-list,
  .product-contact-grid > div:nth-child(2) { margin-top: 3rem; }
  .witness-ledger article { grid-template-columns: 1fr; gap: 0.5rem; }
  .witness-ledger p { grid-column: 1; }
  .development-art { min-height: 38rem; }
  .development-copy { padding-bottom: 0; }
  .record-list div { grid-template-columns: 1fr; gap: 0.35rem; }
  .contact-signal { margin-top: 3rem; }
}

@media (max-width: 27rem) {
  .state-console { min-height: 0; }
  .state-reading { padding-block: 2.5rem; }
  .encounter-field { min-height: 31rem; }
  .encounter-field-world { inset-inline: -25rem; }
  .encounter-field figcaption { display: none; }
  .development-art { min-height: 31rem; }
}

@media (prefers-reduced-motion: reduce) {
  .disquiet-grain,
  .state-scan { display: none; }
  .bellwether-weather { animation: none; }
  .encounter-field-world,
  .bellwether-world,
  .bellwether-weather,
  .development-art picture { transform: none; transition: none; }
}

@media (forced-colors: active) {
  .disquiet-hero-world,
  .disquiet-hero::before,
  .disquiet-hero::after,
  .disquiet-grain,
  .state-visual { forced-color-adjust: none; }
  .state-switch button { forced-color-adjust: auto; }
}