@font-face {
  font-family: JetBrains;
  src: url('assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: JetBrains;
  src: url('assets/fonts/JetBrainsMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  background: #0b0909;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
}

body {
  background: #0b0909;
  color: #d8cec7;
  font-family: JetBrains, 'Microsoft YaHei', 'PingFang SC', monospace;
}

.observation-space {
  position: relative;
  isolation: isolate;
  --eye-width: min(960px, calc(100vw - 48px));
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: max(32px, calc(50vh - var(--eye-width) / 6)) 24px 40px;
  padding-top: max(32px, calc(50svh - var(--eye-width) / 6));
  outline: none;
  transition: padding-top .65s cubic-bezier(.22, 1, .36, 1);
}

.eye-stage {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: var(--eye-width);
  aspect-ratio: 3 / 1;
  transition: width .65s cubic-bezier(.22, 1, .36, 1);
}

.eye-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, #0002 2px, #0002 3px);
  opacity: .45;
}

#eye-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

[hidden] {
  display: none !important;
}

.welcome-copy {
  width: min(560px, 100%);
  margin-top: 2px;
  text-align: center;
}

.welcome-copy h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .08em;
}

.welcome-copy h1 span {
  color: #f0e8d8;
  letter-spacing: .13em;
}

.welcome-copy p {
  margin: 16px 0 0;
  color: #9e9697;
  font-size: 13px;
  line-height: 2;
}

.welcome-copy .acceptance-note {
  margin-top: 12px;
  color: #c3b7b3;
  font-size: 12px;
}

.enter-button {
  width: 164px;
  min-height: 44px;
  margin-top: 24px;
  padding: 0 0 0 .4em;
  border: 1px solid #6c4e56;
  border-radius: 0;
  background: #191014;
  color: #f0e8d8;
  font: inherit;
  font-size: 13px;
  letter-spacing: .4em;
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}

.enter-button:hover {
  border-color: #b39496;
  background: #2a1b20;
}

.enter-button:focus-visible {
  outline: 1px solid #f0e8d8;
  outline-offset: 5px;
}

.enter-button:active {
  background: #38242b;
}

body[data-view="prison"] .observation-space {
  --eye-width: min(800px, calc(100vw - 48px));
  --previous-eye-width: min(520px, calc(100vw - 48px));
  /* Enlarge around the original upper position without moving the eye's center. */
  padding-top: max(24px, calc(clamp(48px, 11vh, 120px) + (var(--previous-eye-width) - var(--eye-width)) / 6));
  padding-top: max(24px, calc(clamp(48px, 11svh, 120px) + (var(--previous-eye-width) - var(--eye-width)) / 6));
  padding-bottom: 24px;
}

.prison-columns {
  display: none;
  position: fixed;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  pointer-events: none;
}

body[data-view="prison"] .prison-columns {
  display: block;
}

.prison-title {
  display: none;
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  max-width: 100%;
  margin: clamp(-42px, -3vw, -14px) 0 0;
  color: #f52a37;
  opacity: .72;
  font-family: JetBrains, monospace;
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 400;
  font-variant-ligatures: none;
  line-height: 1.3;
  letter-spacing: .035em;
  text-align: center;
  text-shadow: 0 0 4px rgba(255, 24, 42, .42), 0 0 14px rgba(245, 42, 55, .2);
}

body[data-view="prison"] .prison-title {
  display: block;
}

.distress-echoes {
  display: none;
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}

body[data-view="prison"] .distress-echoes {
  display: block;
}

.echo-wing {
  position: absolute;
  top: 16px;
  width: 220px;
}

.echo-wing--left {
  left: -128px;
}

.echo-wing--right {
  right: -128px;
}

.distress-echo {
  --echo-opacity: .76;
  --echo-tilt: 0deg;
  position: absolute;
  display: block;
  width: 206px;
  padding: 0;
  color: #c85c61;
  opacity: var(--echo-opacity);
  font-family: JetBrains, monospace;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: .07em;
  text-decoration: none;
  pointer-events: auto;
  animation: echo-breathe 9s ease-in-out infinite;
  transition: filter .3s;
}

.echo-art {
  position: relative;
  display: block;
  width: 100%;
  /* Crop only the atlas gutters: letterforms keep their original proportions. */
  aspect-ratio: 2.5 / 1;
  background-image: url('assets/distress-type-full-v1.png');
  background-size: 200% 500%;
  background-position: calc(var(--echo-col) * 100%) calc(3.125% + var(--echo-row) * 31.25%);
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 3px #bf182438);
}

.echo-source {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  color: #ad7478;
  opacity: 0;
  font-size: 7px;
  line-height: 1.4;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
  transition: opacity .2s;
}

.distress-echo:hover .echo-source,
.distress-echo:focus-visible .echo-source {
  opacity: 1;
}

.echo-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  clip-path: inset(42% 0 36% 0);
  opacity: 0;
  animation: signal-ghost 11s ease-in-out infinite;
  animation-delay: inherit;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.distress-echo:hover,
.distress-echo:focus-visible {
  filter: brightness(1.3);
  animation-play-state: paused;
}

.distress-echo:focus-visible {
  outline: 1px dashed #8b4248;
  outline-offset: 5px;
}

.echo-01, .echo-05 { top: -22px; width: 206px; animation-delay: -2s; }
.echo-02, .echo-06 { top: 62px; width: 210px; --echo-opacity: .78; animation-delay: -6s; }
.echo-03, .echo-07 { top: 150px; width: 208px; --echo-opacity: .7; animation-delay: -4s; }
.echo-04, .echo-08 { top: 238px; width: 212px; animation-duration: 12s; animation-delay: -5s; }
.echo-01 { left: 38px; --echo-tilt: -2deg; }
.echo-02 { left: 4px; --echo-tilt: 1deg; }
.echo-03 { left: 5px; --echo-tilt: -1deg; }
.echo-04 { left: 42px; --echo-tilt: 2deg; }
.echo-05 { right: 38px; --echo-tilt: 2deg; }
.echo-06 { right: 4px; --echo-tilt: -1deg; }
.echo-07 { right: 5px; --echo-tilt: 1deg; }
.echo-08 { right: 42px; --echo-tilt: -2deg; }

@keyframes echo-breathe {
  0%, 100% { opacity: var(--echo-opacity); transform: translateY(0) rotate(var(--echo-tilt)); }
  50% { opacity: calc(var(--echo-opacity) * .76); transform: translateY(-3px) rotate(var(--echo-tilt)); }
}

@keyframes signal-ghost {
  0%, 78%, 100% { opacity: 0; transform: translateX(0); }
  86% { opacity: .4; transform: translateX(-2px); }
  93% { opacity: .14; transform: translateX(2px); }
}

.archive-video {
  display: none;
  position: relative;
  z-index: 1;
  width: min(680px, 52vw);
  margin-top: 62px;
  font-family: JetBrains, monospace;
}

body[data-view="prison"] .archive-video {
  display: block;
}

.archive-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #78575b;
  font-size: 9px;
  line-height: 1.6;
  letter-spacing: .12em;
}

.archive-video h2 {
  margin: 10px 0 16px;
  color: #aa9695;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
}

.video-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid #342024;
  background: #090707;
}

.video-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-source {
  display: inline-block;
  padding: 12px 0;
  color: #925158;
  font-size: 9px;
  letter-spacing: .12em;
  text-decoration: none;
}

.video-source:hover, .video-source:focus-visible {
  color: #d1848b;
}

.descent-cue,
.prison-content {
  display: none;
}

body[data-view="prison"] .descent-cue {
  display: grid;
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  place-items: center;
  width: 96px;
  height: 72px;
  margin: -18px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f73545;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.descent-cue::before {
  content: '';
  position: absolute;
  inset: -14px -10px;
  background: radial-gradient(ellipse, #b00b252e 0, #87071614 36%, transparent 69%);
  pointer-events: none;
  opacity: .75;
  transition: opacity .3s;
}

.descent-sigil {
  position: relative;
  display: block;
  width: 72px;
  height: 72px;
  overflow: visible;
  pointer-events: none;
}

.sigil-engraving {
  color: #a22e3b;
  stroke-width: 1;
  opacity: .6;
  transition: color .3s, opacity .3s;
}

.descent-mark {
  filter: drop-shadow(0 0 2px #ff394ccc) drop-shadow(0 0 9px #d80b32a6);
  animation: descent-breathe 3.6s ease-in-out infinite;
}

.descent-cut, .descent-grit {
  fill: currentColor;
}

.descent-core {
  stroke: #ffc2bc;
  stroke-width: 1.25;
  stroke-linecap: square;
  opacity: .95;
}

.descent-scars {
  stroke: #c9253a;
  stroke-width: 1;
  opacity: .8;
}

.descent-grit {
  opacity: .65;
}

.descent-cue:hover::before, .descent-cue:focus-visible::before {
  opacity: 1;
}

.descent-cue:hover .sigil-engraving, .descent-cue:focus-visible .sigil-engraving {
  color: #e84651;
  opacity: .9;
}

.descent-cue:hover .descent-mark, .descent-cue:focus-visible .descent-mark {
  filter: drop-shadow(0 0 3px #ff5263) drop-shadow(0 0 13px #e00d39c4);
}

.descent-cue:focus-visible {
  outline: 1px dashed #bf5864;
  outline-offset: 5px;
}

.descent-cue:active .descent-sigil {
  transform: translateY(2px);
}

@keyframes descent-breathe {
  0%, 100% { opacity: .76; transform: translateY(-1px); }
  50% { opacity: 1; transform: translateY(3px); }
}

body[data-view="prison"] .prison-content {
  display: block;
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: min(1680px, 100%);
  min-height: 95svh;
  margin-top: clamp(96px, 18svh, 220px);
  padding: 28px 0 80px;
  scroll-margin-top: 36px;
  outline: none;
}

.content-masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}

.content-masthead h2 {
  margin: 0;
  color: #b9a9a1;
  font-size: clamp(13px, 1.2vw, 17px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .12em;
}

.content-masthead h2 span {
  margin-right: 14px;
  color: #82504f;
  font-size: 10px;
}

.content-masthead p {
  margin: 0;
  color: #796862;
  font-size: 9px;
  line-height: 1.7;
  letter-spacing: .09em;
}

/* Keep the eye and its title anchored; move only the echoes on narrower screens. */
@media (max-width: 1919px) {
  .echo-wing { top: calc(100% + 34px); }
  .echo-wing--left { left: 10%; }
  .echo-wing--right { right: 10%; }
  .archive-video { margin-top: 416px; }
}

@media (max-width: 700px) {
  .content-masthead { flex-direction: column; gap: 12px; }
  body[data-view="prison"] .descent-cue { margin-top: 20px; }

  body[data-view="prison"] .distress-echoes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    inset: calc(100% + 64px) auto auto 50%;
    width: min(280px, calc(100vw - 72px));
    transform: translateX(-50%);
  }

  .echo-wing { display: contents; }
  .distress-echo {
    position: relative;
    inset: auto;
    width: 100%;
    background: #0b0909;
    box-shadow: 0 0 16px 10px #0b0909;
  }
  .echo-01 { order: 0; }
  .echo-05 { order: 1; align-self: flex-end; }
  .echo-02 { order: 2; }
  .echo-06 { order: 3; align-self: flex-end; }
  .echo-03 { order: 4; }
  .echo-07 { order: 5; align-self: flex-end; }
  .echo-04 { order: 6; }
  .echo-08 { order: 7; align-self: flex-end; }
  .archive-video {
    width: 100%;
    margin-top: calc(3.2 * min(280px, calc(100vw - 72px)) + 166px);
    background: #0b0909;
    box-shadow: 0 0 16px 12px #0b0909;
  }
}

@media (max-width: 480px) {
  .welcome-copy h1 {
    font-size: 16px;
  }

  .welcome-copy p {
    font-size: 12px;
  }
}

@media (max-height: 540px) and (min-width: 600px) {
  body[data-view="welcome"] .observation-space {
    --eye-width: min(660px, calc(100vw - 48px));
    padding-top: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
  }

  .distress-echo, .echo-art::after, .descent-mark {
    animation: none;
  }
}