:root {
  /* Interface/body text: **DM Sans** from Google Fonts in 400/600 for short labels; Sans** */
  --void: #090713;
  --eggplant: #1B1030;
  --cyan: #28F7FF;
  --magenta: #FF3DF2;
  --lime: #B7FF2A;
  --orange: #FF9A2E;
  --cream: #F6E6C8;
  --red: #FF4F6D;
  --display: "EB Garamond", Garamond, Georgia, serif;
  --serif: "Cormorant Garamond", Garamond, Georgia, serif;
  --sans: "DM Sans", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--void);
  color: var(--cream);
  font-family: var(--sans);
  overflow-x: hidden;
}

.site-shell {
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 61, 242, .24), transparent 30rem),
    radial-gradient(circle at 86% 26%, rgba(40, 247, 255, .18), transparent 26rem),
    linear-gradient(180deg, var(--void), #12091f 46%, var(--void));
}

.boot-night {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 2px solid rgba(40, 247, 255, .35);
}

.scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(246, 230, 200, .055) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
  opacity: .42;
}

.floor-grid {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -18%;
  height: 46vh;
  transform: perspective(460px) rotateX(62deg);
  background:
    linear-gradient(rgba(40, 247, 255, .35) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255, 61, 242, .28) 2px, transparent 2px);
  background-size: 72px 72px;
  filter: drop-shadow(0 0 18px rgba(40, 247, 255, .5));
}

.wordmark-wrap { text-align: center; position: relative; z-index: 2; padding: 2rem; }
.wordmark {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(5rem, 18vw, 17rem);
  font-weight: 800;
  letter-spacing: -.08em;
  line-height: .76;
  color: var(--cream);
  text-shadow: 0 0 16px rgba(246, 230, 200, .55), 0 0 44px rgba(255, 61, 242, .38), 7px 7px 0 rgba(40, 247, 255, .16);
}

.whisper, .serif-note {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 2rem);
  color: var(--orange);
}

.subtitle { font-size: clamp(1rem, 2vw, 1.35rem); color: rgba(246, 230, 200, .78); }

.boot-label, .kicker, .tag {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 700;
  font-size: .76rem;
}

.boot-label {
  position: absolute;
  z-index: 3;
  padding: .65rem .9rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: rgba(9, 7, 19, .68);
  box-shadow: 0 0 20px currentColor;
}
.label-left { left: 6vw; top: 18vh; color: var(--cyan); transform: rotate(-7deg); }
.label-right { right: 8vw; top: 22vh; color: var(--lime); transform: rotate(5deg); }
.label-bottom { bottom: 10vh; color: var(--orange); transform: rotate(-2deg); }

.bubble-lab { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.bubble {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 46% 54% 55% 45% / 50% 44% 56% 50%;
  border: 3px solid currentColor;
  background: rgba(246, 230, 200, .08);
  box-shadow: inset -12px -16px 0 rgba(255,255,255,.08), 0 0 26px currentColor;
  font-weight: 800;
  transform: translateY(120vh) scale(.68);
  animation: bounceEnter 1.35s cubic-bezier(.2, 1.65, .48, .92) forwards, wobble 5s ease-in-out infinite 1.4s;
}
.bubble span { font-family: var(--sans); }
.creature:nth-child(1) { width: 96px; height: 88px; left: 12%; top: 58%; animation-delay: .08s, 1.5s; }
.creature:nth-child(2) { width: 72px; height: 78px; left: 32%; top: 24%; animation-delay: .25s, 1.7s; }
.creature:nth-child(3) { width: 110px; height: 94px; right: 18%; top: 54%; animation-delay: .42s, 1.8s; }
.creature:nth-child(4) { width: 82px; height: 82px; right: 32%; top: 18%; animation-delay: .56s, 1.9s; }
.creature:nth-child(5) { width: 62px; height: 70px; left: 54%; top: 68%; animation-delay: .72s, 2s; }
.cyan { color: var(--cyan); } .magenta { color: var(--magenta); } .lime { color: var(--lime); } .orange { color: var(--orange); } .red { color: var(--red); }

@keyframes bounceEnter {
  0% { transform: translateY(120vh) scale(.58, 1.3); }
  62% { transform: translateY(-24px) scale(1.16, .82); }
  78% { transform: translateY(12px) scale(.91, 1.08); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes wobble { 0%,100% { rotate: -4deg; border-radius: 46% 54% 55% 45%; } 50% { rotate: 5deg; border-radius: 58% 42% 45% 55%; } }

.archive-intro, .field-notes {
  position: relative;
  padding: 8rem clamp(1.2rem, 6vw, 7rem) 4rem;
}
.archive-intro h2, .field-notes h2, .featured-failure h2 {
  font-family: var(--display);
  font-size: clamp(3rem, 8vw, 8rem);
  line-height: .86;
  letter-spacing: -.05em;
  margin: .25em 0;
}
.archive-intro h2 { max-width: 11ch; color: var(--cream); }
.intro-copy { max-width: 42rem; font-size: 1.25rem; color: rgba(246, 230, 200, .74); }
.rail { position: absolute; left: 2rem; top: 5rem; bottom: 0; width: 7px; background: linear-gradient(var(--magenta), var(--cyan), var(--lime)); box-shadow: 0 0 24px var(--cyan); }
.kicker { color: var(--lime); }

.specimen-wall {
  padding: 2rem clamp(1rem, 4vw, 5rem) 8rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: start;
}

.specimen {
  position: relative;
  min-height: 28rem;
  padding: .85rem;
  border: 2px solid rgba(246, 230, 200, .24);
  background: linear-gradient(145deg, rgba(27, 16, 48, .94), rgba(9, 7, 19, .94));
  box-shadow: 0 0 0 6px rgba(9, 7, 19, .8), 0 18px 42px rgba(0,0,0,.45), 0 0 28px rgba(255,61,242,.12);
  opacity: 0;
  transform: translateY(70px) scale(.84) rotate(var(--tilt, 0deg));
  transition: transform .7s cubic-bezier(.16, 1.6, .36, 1), opacity .5s ease;
}
.specimen.is-visible { opacity: 1; transform: translateY(0) scale(1) rotate(var(--tilt, 0deg)); }
.tilt-left { --tilt: -2.5deg; } .tilt-right { --tilt: 2.5deg; }
.card-tall { min-height: 39rem; grid-row: span 2; }
.card-wide { grid-column: span 2; min-height: 30rem; }
.card-short { min-height: 23rem; }
.monitor-card { border-color: var(--cyan); box-shadow: 0 0 38px rgba(40, 247, 255, .24); }

.photo {
  position: relative;
  height: 16rem;
  overflow: hidden;
  border: 2px solid rgba(246, 230, 200, .35);
  background: var(--eggplant);
}
.card-tall .photo { height: 23rem; }
.card-wide .photo { height: 18rem; }
.photo::before, .photo::after { content: ""; position: absolute; inset: 0; }
.photo::before {
  background:
    radial-gradient(circle at 50% 38%, currentColor 0 10%, transparent 10.5%),
    radial-gradient(ellipse at 50% 74%, currentColor 0 23%, transparent 24%),
    linear-gradient(135deg, transparent 45%, rgba(246,230,200,.3) 46% 47%, transparent 48%),
    repeating-radial-gradient(circle at 20% 20%, rgba(246,230,200,.18) 0 1px, transparent 1px 7px);
  mix-blend-mode: screen;
  filter: contrast(1.35) saturate(1.4);
}
.photo::after { background: repeating-linear-gradient(90deg, transparent 0 12px, rgba(9,7,19,.38) 12px 14px); }
.duotone-cyan { color: var(--cyan); background: linear-gradient(135deg, #220d31, #062832); }
.duotone-magenta { color: var(--magenta); background: linear-gradient(135deg, #270928, #151024); }
.duotone-lime { color: var(--lime); background: linear-gradient(135deg, #180c27, #25340a); }
.duotone-orange { color: var(--orange); background: linear-gradient(135deg, #0d0a12, #3b1a05); }
.duotone-red { color: var(--red); background: linear-gradient(135deg, #1B1030, #340b18); }
.toaster::before { border-radius: 20px; clip-path: polygon(18% 45%, 82% 36%, 92% 74%, 14% 82%); }
.pathfinder::before { background: radial-gradient(circle at 50% 50%, transparent 0 14%, currentColor 15% 18%, transparent 19% 28%, currentColor 29% 32%, transparent 33%), repeating-radial-gradient(circle, rgba(246,230,200,.22) 0 2px, transparent 2px 9px); }
.weather::before { background: radial-gradient(ellipse at 42% 50%, currentColor 0 22%, transparent 23%), radial-gradient(ellipse at 58% 45%, currentColor 0 18%, transparent 19%), repeating-radial-gradient(circle, rgba(246,230,200,.22) 0 1px, transparent 1px 8px); }
.keyboard::before { background: repeating-linear-gradient(90deg, currentColor 0 7%, transparent 7% 10%), repeating-linear-gradient(0deg, rgba(246,230,200,.15) 0 10px, transparent 10px 20px); }
.wires::before { background: radial-gradient(circle at 30% 30%, currentColor 0 4%, transparent 5%), repeating-radial-gradient(ellipse at 50% 50%, transparent 0 18px, currentColor 19px 21px, transparent 22px 40px); }
.buttons::before { background: radial-gradient(circle at 30% 38%, currentColor 0 13%, transparent 14%), radial-gradient(circle at 66% 58%, currentColor 0 18%, transparent 19%), radial-gradient(circle at 58% 25%, rgba(246,230,200,.45) 0 8%, transparent 9%); }
.sleepy::before { background: radial-gradient(ellipse at 50% 50%, currentColor 0 30%, transparent 31%), radial-gradient(ellipse at 50% 50%, #090713 0 13%, transparent 14%); }

.timestamp, .sticker {
  position: absolute;
  z-index: 2;
  right: .7rem;
  bottom: .7rem;
  padding: .35rem .55rem;
  color: var(--void);
  background: var(--cream);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
}
.sticker { background: var(--orange); transform: rotate(-5deg); }
.card-copy { padding: 1rem .35rem .25rem; }
.card-copy h3 { font-family: var(--display); font-size: clamp(2rem, 3.8vw, 3.7rem); line-height: .88; margin: .2rem 0 .75rem; color: var(--cream); letter-spacing: -.045em; }
.card-copy p:last-child { color: rgba(246, 230, 200, .72); line-height: 1.45; }
.tag { color: var(--cyan); margin: 0; }
.controls, .knobs, .mini-bubbles, .boss-tags { display: flex; gap: .55rem; align-items: center; }
.controls i, .knobs span, .mini-bubbles span { width: 22px; height: 22px; border-radius: 50%; display: block; background: var(--magenta); box-shadow: 0 0 14px var(--magenta); }
.controls i:nth-child(2), .knobs span:nth-child(2), .mini-bubbles span:nth-child(2) { background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }
.controls i:nth-child(3), .knobs span:nth-child(3), .mini-bubbles span:nth-child(3) { background: var(--lime); box-shadow: 0 0 14px var(--lime); }
.controls b { margin-left: auto; color: var(--orange); font-family: var(--serif); font-size: 1.35rem; }
.ricochet, .crown-icon { position: absolute; right: 1.1rem; top: 1rem; color: var(--lime); font-size: 3rem; animation: ricochet 1.8s ease-in-out infinite; }
.progress-loop { position: absolute; right: 1rem; top: 1rem; width: 5rem; height: 5rem; border: 2px dashed var(--lime); border-radius: 50%; animation: spin 4s linear infinite; }
.progress-loop span { position: absolute; width: 1rem; height: 1rem; background: var(--orange); border-radius: 50%; top: -.5rem; left: 2rem; box-shadow: 0 0 16px var(--orange); }
@keyframes ricochet { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(-18px, 18px) rotate(18deg); } }
@keyframes spin { to { transform: rotate(360deg); } }

.featured-failure {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 3rem;
  align-items: center;
  padding: 6rem clamp(1rem, 5vw, 6rem);
  background: radial-gradient(circle at 28% 45%, rgba(183, 255, 42, .16), transparent 28rem), linear-gradient(120deg, #0a0712, var(--eggplant));
  border-block: 2px solid rgba(183, 255, 42, .25);
}
.boss-photo { position: relative; min-height: 34rem; border: 3px solid var(--lime); box-shadow: 0 0 44px rgba(183,255,42,.22), inset 0 0 50px rgba(183,255,42,.08); overflow: hidden; }
.boss-face { position: absolute; inset: 8%; background: radial-gradient(circle at 40% 35%, var(--lime) 0 9%, transparent 10%), radial-gradient(circle at 62% 36%, var(--lime) 0 7%, transparent 8%), radial-gradient(ellipse at 50% 63%, transparent 0 16%, var(--lime) 17% 20%, transparent 21%), repeating-radial-gradient(circle at 50% 50%, rgba(183,255,42,.22) 0 2px, transparent 2px 8px); filter: drop-shadow(0 0 24px var(--lime)); }
.orbit { position: absolute; padding: .7rem 1rem; border: 2px solid currentColor; border-radius: 999px; background: rgba(9,7,19,.8); font-weight: 700; box-shadow: 0 0 20px currentColor; animation: bob 3s ease-in-out infinite; }
.orbit-one { left: 10%; top: 14%; color: var(--orange); }
.orbit-two { right: 8%; top: 36%; color: var(--cyan); animation-delay: .5s; }
.orbit-three { left: 42%; bottom: 12%; color: var(--magenta); animation-delay: 1s; }
.arrow-wheel { position: absolute; inset: 12%; width: 76%; height: 76%; fill: none; stroke: var(--cream); stroke-width: 5; stroke-dasharray: 18 14; opacity: .56; animation: spin 12s linear infinite; }
@keyframes bob { 50% { transform: translateY(-18px) scale(1.05); } }
.boss-copy h2 { color: var(--lime); text-shadow: 0 0 30px rgba(183,255,42,.35); }
.boss-tags span { border: 1px solid var(--cream); padding: .55rem .8rem; border-radius: 999px; color: var(--cream); }

.field-notes { min-height: 70vh; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.note-card { background: var(--cream); color: var(--void); padding: clamp(2rem, 5vw, 5rem); transform: rotate(-2deg); box-shadow: 18px 18px 0 var(--orange); }
.note-card .kicker { color: var(--red); }
.note-card h2 { color: var(--void); }
.note-card p:last-child { font-size: 1.25rem; line-height: 1.5; }
.bubble-chain { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.bubble-chain span { width: clamp(5rem, 10vw, 10rem); height: clamp(5rem, 10vw, 10rem); display: grid; place-items: center; border-radius: 50%; border: 3px solid currentColor; font-weight: 800; color: var(--cyan); box-shadow: 0 0 24px currentColor; animation: wobble 4s ease-in-out infinite; }
.bubble-chain span:nth-child(2) { color: var(--magenta); animation-delay: .35s; }
.bubble-chain span:nth-child(3) { color: var(--orange); animation-delay: .7s; }
.bubble-chain span:nth-child(4) { color: var(--lime); animation-delay: 1.05s; }

@media (max-width: 980px) {
  .specimen-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .featured-failure, .field-notes { grid-template-columns: 1fr; }
  .card-wide { grid-column: span 2; }
}

@media (max-width: 620px) {
  .boot-label { position: relative; inset: auto; margin: .4rem; display: inline-block; }
  .specimen-wall { grid-template-columns: 1fr; }
  .card-wide { grid-column: span 1; }
  .wordmark { font-size: 22vw; }
  .card-tall, .card-wide, .specimen { min-height: auto; }
}