:root {
  /* Design compliance terms: (Google Interaction — Zoom-Focus Pattern:** Pattern:* Pattern* Pattern: Pattern** IntersectionObserver` sentinel elements */
  --peat-black: #1a1208;
  --tobacco-resin: #2d1f0e;
  --void-black: #0f0b05;
  --patina: #6b4f35;
  --rust-signal: #c4652a;
  --aged-brass: #5c3d1a;
  --aged-vellum: #e8d5b8;
  --amber-filament: #e8a84c;
  --tarnished-brass: #a6896a;
  --hot-signal: #ff6b2e;
  --gap: 6px;
  --body-bg: #1a1208;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--body-bg);
  color: var(--aged-vellum);
  font-family: "Archivo", "Inter", sans-serif;
  transition: background-color 1.2s ease;
  overflow-x: hidden;
}

body[data-zone="1"], body[data-zone="3"] { background-color: #1a1208; }
body[data-zone="2"] { background-color: #0f0b05; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(196, 101, 42, 0.035) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 12% 9%, rgba(232, 168, 76, 0.07), transparent 28vw),
    radial-gradient(circle at 82% 48%, rgba(196, 101, 42, 0.055), transparent 34vw);
  mix-blend-mode: screen;
  z-index: -1;
}

.filter-vault {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.cabinet { width: 100%; }

.zone {
  min-height: 100vh;
  padding: clamp(14px, 2vw, 28px);
  position: relative;
}

.zone + .zone { margin-top: -7vh; }

.tray {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(76px, 10.2vh);
  gap: var(--gap);
  min-height: calc(100vh - clamp(28px, 4vw, 56px));
  width: 100%;
}

.card {
  position: relative;
  overflow: hidden;
  border: 1px solid #5c3d1a;
  border-radius: 0;
  background-color: #2d1f0e;
  color: #e8d5b8;
  padding: clamp(12px, 1.4vw, 22px);
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transform-origin: left top;
  animation: reveal-card 600ms cubic-bezier(0.23, 1, 0.32, 1) forwards, tune-card 180ms steps(3, end) both;
  transition: transform 400ms ease-out, opacity 400ms ease-out, filter 400ms ease-out, border-color 400ms ease-out, background-position 900ms linear;
  isolation: isolate;
}

.card::before, .card::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  pointer-events: none;
  opacity: 0.8;
  z-index: 4;
}

.card::before {
  left: -1px;
  top: -1px;
  background: linear-gradient(135deg, #5c3d1a 0 49%, transparent 50%);
}

.card::after {
  right: -1px;
  bottom: -1px;
  background: linear-gradient(315deg, #5c3d1a 0 49%, transparent 50%);
}

.card:nth-child(1) { animation-delay: 0ms; }
.card:nth-child(2) { animation-delay: 60ms; }
.card:nth-child(3) { animation-delay: 120ms; }
.card:nth-child(4) { animation-delay: 180ms; }
.card:nth-child(5) { animation-delay: 240ms; }
.card:nth-child(6) { animation-delay: 300ms; }
.card:nth-child(7) { animation-delay: 360ms; }
.card:nth-child(8) { animation-delay: 420ms; }
.card:nth-child(9) { animation-delay: 480ms; }
.card:nth-child(10) { animation-delay: 540ms; }
.card:nth-child(11) { animation-delay: 600ms; }

@keyframes reveal-card { to { opacity: 1; clip-path: inset(0); } }
@keyframes tune-card {
  0% { background-position: 0 0; }
  33% { background-position: 9px -2px; }
  66% { background-position: -7px 3px; }
  100% { background-position: 0 0; }
}

.tray:has(.card:is(:hover, .is-touch-focus)) .card:not(:is(:hover, .is-touch-focus)) {
  opacity: 0.4;
  filter: blur(1px);
}

.card:is(:hover, .is-touch-focus) {
  transform: scale(1.05);
  z-index: 20;
  border-color: #e8a84c;
}

.label {
  margin: 0;
  color: #a6896a;
  font-family: "Archivo", "Inter", sans-serif;
  font-weight: 500;
  font-size: clamp(0.75rem, 1.2vw, 0.95rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.mono, .notation, .door-stamp {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: #6b4f35;
}

.note {
  margin: 0;
  max-width: 54ch;
  font-size: clamp(0.9rem, 1.4vw, 1.15rem);
  line-height: 1.55;
  color: #e8d5b8;
}

.tray-door .card-door { grid-column: 1 / 9; grid-row: 1 / 7; }
.tray-door .tag-card:nth-of-type(2) { grid-column: 9 / 13; grid-row: 1 / 3; }
.tray-door .tag-card:nth-of-type(3) { grid-column: 10 / 13; grid-row: 3 / 5; }
.tray-door .tag-card:nth-of-type(4) { grid-column: 9 / 12; grid-row: 6 / 8; }
.tray-door .sliver-card { grid-column: 12 / 13; grid-row: 8 / 10; }

.card-door {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    linear-gradient(90deg, rgba(15, 11, 5, 0.42), transparent 34%),
    repeating-linear-gradient(0deg, rgba(196, 101, 42, 0.16) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 21% 24%, rgba(232, 168, 76, 0.20), transparent 20%),
    #c4652a;
}

.veil {
  position: absolute;
  inset: 0;
  background: #0f0b05;
  filter: url(#cabinet-noise);
  opacity: 0.28;
  mix-blend-mode: multiply;
  z-index: -1;
}

.logotype {
  margin: auto 0 0;
  font-family: "Josefin Sans", "Futura", sans-serif;
  font-weight: 700;
  font-size: clamp(3rem, 8vw, 7rem);
  letter-spacing: 0.2em;
  text-transform: lowercase;
  color: #e8d5b8;
  mix-blend-mode: difference;
  line-height: 0.9;
  position: relative;
}

.logotype::before, .logotype::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0.28;
  clip-path: inset(34% 0 44% 0);
}

.logotype::before { transform: translate(6px, -1px); color: #ff6b2e; }
.logotype::after { transform: translate(-4px, 2px); color: #0f0b05; }

.tag-card, .sliver-card, .small-note, .note-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 12px;
}

.pin {
  width: 4px;
  height: 4px;
  display: block;
  background: #c4652a;
  border-radius: 50%;
}

.pin.hot, .signal-dot { background: #ff6b2e; }

.tray-specimens .scope-card { grid-column: 1 / 7; grid-row: 1 / 3; }
.tray-specimens .signal-card { grid-column: 7 / 13; grid-row: 1 / 2; }
.tray-specimens .mycelium-card { grid-column: 1 / 4; grid-row: 3 / 6; }
.tray-specimens .glitch-card { grid-column: 4 / 8; grid-row: 2 / 6; }
.tray-specimens .jar-card { grid-column: 8 / 13; grid-row: 2 / 4; }
.tray-specimens .calibration-card { grid-column: 1 / 5; grid-row: 6 / 8; }
.tray-specimens .filament-card { grid-column: 5 / 8; grid-row: 6 / 9; }
.tray-specimens .oxidation-card { grid-column: 8 / 11; grid-row: 4 / 7; }
.tray-specimens .rivet-card { grid-column: 11 / 13; grid-row: 5 / 8; }
.tray-specimens .small-note { grid-column: 2 / 5; grid-row: 9 / 10; }
.tray-specimens .fracture-card { grid-column: 8 / 13; grid-row: 8 / 10; }

.scope, .network {
  display: block;
  width: 100%;
  height: calc(100% - 44px);
  min-height: 110px;
  margin-top: 12px;
}

.scope-grid-line {
  stroke: #5c3d1a;
  stroke-width: 0.6;
  opacity: 0.35;
  fill: none;
}

.waveform-path {
  stroke: #e8a84c;
  stroke-width: 1;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 7 11;
  animation: scope-crawl 50s linear infinite;
  transition: d 1.5s ease-in-out;
}

@keyframes scope-crawl { to { stroke-dashoffset: -80; } }

.scanlines {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(196, 101, 42, 0.15) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, transparent 0 9px, rgba(232, 168, 76, 0.06) 9px 10px);
  opacity: 0.9;
}

.dense { animation: moire 8s linear infinite; }
@keyframes moire { to { background-position: 0 41px, 17px 0; } }

.signal-card .label, .signal-card .mono, .glitch-card .label, .glitch-card .mono, .oxidation-card .label, .fracture-card .label { position: relative; z-index: 2; }

.network path {
  stroke: #5c3d1a;
  fill: none;
  stroke-linecap: square;
}

.glitch-stack {
  position: absolute;
  inset: 18px 18px 48px;
  background: repeating-linear-gradient(0deg, rgba(232, 168, 76, 0.17) 0 2px, transparent 2px 7px);
}

.glitch-stack i {
  position: absolute;
  left: var(--x, 12%);
  top: var(--y, 18%);
  width: var(--w, 58%);
  height: 13px;
  background: #c4652a;
  opacity: 0.36;
  animation: glitch-slip 3.4s steps(2, end) infinite;
}

.glitch-stack i:nth-child(2) { --x: 38%; --y: 42%; --w: 42%; animation-delay: .2s; }
.glitch-stack i:nth-child(3) { --x: 5%; --y: 62%; --w: 77%; animation-delay: .45s; background: #e8a84c; }
.glitch-stack i:nth-child(4) { --x: 22%; --y: 80%; --w: 29%; animation-delay: .7s; }
@keyframes glitch-slip { 50% { transform: translateX(11px); opacity: 0.18; } }

.jar-lines, .rust-field, .fracture, .calibration-grid {
  position: absolute;
  inset: 0;
}

.jar-lines {
  background:
    radial-gradient(ellipse at 49% 55%, rgba(232, 168, 76, 0.16), transparent 33%),
    linear-gradient(90deg, transparent 21%, rgba(232, 213, 184, 0.08) 22% 24%, transparent 25% 74%, rgba(232, 213, 184, 0.08) 75% 77%, transparent 78%),
    repeating-linear-gradient(0deg, transparent 0 28px, rgba(166, 137, 106, 0.18) 29px 30px);
}

.calibration-grid {
  background:
    linear-gradient(rgba(92, 61, 26, .42) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 61, 26, .42) 1px, transparent 1px);
  background-size: 18px 18px;
}

.calibration-grid span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 66%;
  height: 1px;
  background: #e8a84c;
  transform: translate(-50%, -50%) rotate(-7deg);
  opacity: 0.65;
}

.tube {
  width: 42%;
  min-width: 56px;
  height: 72%;
  margin: 10px 0 0 5%;
  border: 1px solid rgba(166, 137, 106, 0.42);
  position: relative;
  background: linear-gradient(90deg, transparent, rgba(232, 213, 184, 0.035), transparent);
}

.tube span {
  position: absolute;
  left: 46%;
  top: 12%;
  width: 7px;
  height: 76%;
  background: #e8a84c;
  filter: blur(3px);
  animation: filament 2.2s ease-in-out infinite;
}

@keyframes filament { 50% { opacity: .28; transform: scaleY(.88); } }

.rust-field {
  background:
    radial-gradient(circle at 34% 32%, rgba(255, 107, 46, 0.13), transparent 18%),
    repeating-linear-gradient(45deg, rgba(196, 101, 42, 0.18) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-33deg, transparent 0 12px, rgba(232, 168, 76, 0.07) 12px 15px);
}

.signal-dot {
  display: block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  margin-bottom: auto;
  box-shadow: 0 0 14px rgba(255, 107, 46, 0.48);
  animation: signal-pulse 1.5s ease-in-out infinite;
}

@keyframes signal-pulse { 50% { transform: scale(1.25); opacity: .55; } }

.fracture {
  background:
    linear-gradient(105deg, transparent 0 29%, rgba(232, 168, 76, 0.32) 29.2% 29.7%, transparent 30% 100%),
    linear-gradient(64deg, transparent 0 58%, rgba(196, 101, 42, 0.26) 58.4% 58.8%, transparent 59% 100%),
    repeating-linear-gradient(0deg, rgba(196, 101, 42, 0.10) 0 1px, transparent 1px 5px);
}

.tray-notes { grid-auto-rows: minmax(72px, 11vh); }
.date-card { grid-column: 2 / 5; grid-row: 2 / 4; }
.coordinate-card { grid-column: 8 / 12; grid-row: 4 / 6; }
.sentence-card { grid-column: 2 / 11; grid-row: 7 / 9; }
.last-card { grid-column: 11 / 13; grid-row: 10 / 11; }

.ground-plane {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  height: 1px;
  background: #a6896a;
  opacity: 0.3;
  pointer-events: none;
  z-index: 50;
}

@media (max-width: 780px) {
  .zone + .zone { margin-top: 0; }
  .tray { grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(76px, auto); }
  .card, .tray-door .card-door, .tray-door .tag-card:nth-of-type(n), .tray-door .sliver-card,
  .tray-specimens .card, .date-card, .coordinate-card, .sentence-card, .last-card {
    grid-column: 1 / 7;
    grid-row: auto;
    min-height: 120px;
  }
  .card-door { min-height: 54vh; }
  .tray:has(.card:is(:hover, .is-touch-focus)) .card:not(:is(:hover, .is-touch-focus)) { opacity: 1; filter: none; }
}

@media (max-width: 460px) {
  .zone { padding: 8px; }
  .tray { gap: 4px; }
  .logotype { font-size: clamp(2.2rem, 15vw, 4rem); letter-spacing: .12em; }
  .ground-plane { left: 10px; right: 10px; bottom: 10px; }
}