:root {
  /* Typography source note: IBM Plex Mon Mono** from Google Fonts */
  --indigo: #2D3A73;
  --umber: #241714;
  --cream: #F3EAD8;
  --water: #D7E6DC;
  --verdigris: #3F8C7A;
  --rose: #B86F78;
  --leather: #6B3F2A;
  --display: "Cormorant Garamond", Georgia, serif;
  --body: "Libre Baskerville", Georgia, serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--umber);
  color: var(--cream);
  font-family: var(--body);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: .18;
  background:
    radial-gradient(circle at 12% 18%, rgba(243,234,216,.22) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 35%, rgba(215,230,220,.18) 0 1px, transparent 2px),
    repeating-linear-gradient(87deg, rgba(255,255,255,.035) 0 1px, transparent 1px 5px);
  mix-blend-mode: soft-light;
}

.experience { width: 100%; }
.viewport { position: relative; min-height: 100vh; overflow: hidden; }

.opening {
  display: grid;
  place-items: center;
  padding: 4vw;
  background: var(--umber);
}

.leather-plane {
  position: relative;
  width: min(1180px, 94vw);
  height: min(760px, 88vh);
  border-radius: 34px;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  box-shadow: 0 44px 100px rgba(0,0,0,.55), inset 0 0 0 1px rgba(243,234,216,.08), inset 0 0 80px rgba(0,0,0,.38);
  background:
    linear-gradient(90deg, rgba(36,23,20,.65), transparent 48%, rgba(243,234,216,.08) 50%, transparent 52%, rgba(36,23,20,.68)),
    radial-gradient(circle at 25% 15%, rgba(184,111,120,.16), transparent 30%),
    radial-gradient(circle at 78% 74%, rgba(63,140,122,.17), transparent 34%),
    repeating-linear-gradient(18deg, rgba(243,234,216,.035) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(104deg, rgba(0,0,0,.14) 0 2px, transparent 2px 7px),
    var(--leather);
}

.central-seam, .book-seam {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(243,234,216,.28), rgba(36,23,20,.7), rgba(243,234,216,.2), transparent);
  box-shadow: -12px 0 28px rgba(36,23,20,.55), 12px 0 28px rgba(243,234,216,.07);
  z-index: 2;
}

.watercolor {
  position: absolute;
  border-radius: 45% 55% 62% 38% / 48% 42% 58% 52%;
  filter: blur(16px) saturate(.9);
  opacity: .48;
  transform: scale(.55);
  animation: bloom 24s ease-in-out infinite alternate;
  z-index: 1;
}

.bloom-indigo { width: 470px; height: 360px; background: radial-gradient(circle, rgba(45,58,115,.72), rgba(45,58,115,.25) 45%, transparent 72%); left: 14%; top: 21%; }
.bloom-rose { width: 380px; height: 300px; background: radial-gradient(circle, rgba(184,111,120,.65), rgba(184,111,120,.2) 48%, transparent 74%); right: 15%; top: 30%; animation-delay: -8s; }
.bloom-green { width: 430px; height: 340px; background: radial-gradient(circle, rgba(63,140,122,.55), rgba(63,140,122,.17) 52%, transparent 76%); left: 35%; bottom: 5%; animation-delay: -14s; }

@keyframes bloom {
  0% { transform: scale(.55) rotate(0deg); opacity: .25; }
  100% { transform: scale(1.18) rotate(8deg); opacity: .54; }
}

.wordmark {
  position: relative;
  z-index: 4;
  margin: 0;
  min-height: 1.1em;
  font-family: var(--display);
  font-size: clamp(5.6rem, 16vw, 15rem);
  font-weight: 500;
  letter-spacing: .11em;
  color: var(--cream);
  text-shadow: 0 2px 0 rgba(36,23,20,.8), 0 22px 42px rgba(0,0,0,.42);
}

.wordmark i, .prompt i {
  display: inline-block;
  width: .08em;
  height: .78em;
  margin-left: .04em;
  background: var(--water);
  animation: blink 1.45s steps(1) infinite;
  box-shadow: 0 0 18px rgba(215,230,220,.45);
}

@keyframes blink { 50% { opacity: 0; } }

.opening-note, .closing-note {
  position: absolute;
  z-index: 4;
  bottom: 7%;
  width: min(560px, 72vw);
  margin: 0;
  color: rgba(243,234,216,.72);
  text-align: center;
  line-height: 1.9;
  font-size: .98rem;
}

.mono-label, .coord {
  font-family: var(--mono);
  text-transform: lowercase;
  letter-spacing: .14em;
  font-size: .72rem;
}

.top-label { position: absolute; top: 8%; z-index: 4; color: rgba(215,230,220,.66); }

.gate {
  position: absolute;
  z-index: 3;
  top: 48%;
  transform: translateY(-50%);
  font-family: var(--display);
  font-size: clamp(8rem, 20vw, 18rem);
  color: rgba(243,234,216,.06);
  font-style: italic;
}
.gate-left { left: 3%; }
.gate-right { right: 3%; }

.board {
  padding: 8vh 4vw;
  background:
    radial-gradient(circle at 50% 45%, rgba(215,230,220,.22), transparent 28%),
    linear-gradient(90deg, rgba(36,23,20,.92), rgba(107,63,42,.92) 45%, rgba(107,63,42,.82) 55%, rgba(36,23,20,.95));
}

.board-background {
  position: relative;
  min-height: 84vh;
  width: min(1220px, 94vw);
  margin: 0 auto;
  border-radius: 30px;
  padding: clamp(22px, 4vw, 54px);
  background:
    repeating-linear-gradient(0deg, rgba(243,234,216,.035) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(215,230,220,.025) 0 1px, transparent 1px 24px),
    rgba(36,23,20,.26);
  box-shadow: inset 0 0 60px rgba(0,0,0,.24), 0 36px 90px rgba(0,0,0,.34);
}

.artifact-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  grid-template-rows: repeat(3, minmax(170px, auto));
  gap: clamp(16px, 2vw, 28px);
  min-height: 74vh;
  align-items: stretch;
}

.artifact {
  position: relative;
  border-radius: 22px;
  padding: 24px;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.11);
  transform: rotate(var(--r, 0deg));
}

.artifact::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 26%), repeating-linear-gradient(112deg, rgba(36,23,20,.05) 0 1px, transparent 1px 5px);
  mix-blend-mode: multiply;
}

.artifact h2 {
  position: relative;
  margin: 22px 0 12px;
  font-family: var(--display);
  font-size: clamp(2rem, 3vw, 3.6rem);
  font-weight: 500;
  letter-spacing: .03em;
}

.artifact p, .artifact li { position: relative; line-height: 1.8; font-size: .9rem; }
.typed-line { min-height: 4.4em; }
.coord { position: relative; color: currentColor; opacity: .72; }

.card-leather { --r: -1.6deg; grid-column: 1 / 3; color: var(--cream); background: linear-gradient(135deg, rgba(107,63,42,.96), rgba(36,23,20,.9)); }
.card-vellum { --r: 1.2deg; grid-column: 3 / 5; color: var(--umber); background: rgba(215,230,220,.62); backdrop-filter: blur(4px); }
.card-paper { --r: .8deg; grid-column: 1 / 2; grid-row: 2 / 4; color: var(--umber); background: linear-gradient(145deg, #F3EAD8, #D7E6DC); }
.center-card { grid-column: 2 / 4; grid-row: 2 / 3; display: grid; place-items: center; min-height: 230px; color: rgba(243,234,216,.66); background: rgba(36,23,20,.38); border: 1px dashed rgba(243,234,216,.24); box-shadow: inset 0 0 80px rgba(0,0,0,.3), 0 12px 35px rgba(0,0,0,.16); }
.card-indigo { --r: -1deg; grid-column: 4 / 5; grid-row: 2 / 4; color: var(--cream); background: radial-gradient(circle at 35% 25%, rgba(215,230,220,.18), transparent 35%), linear-gradient(160deg, #2D3A73, #241714); }
.card-verdigris { --r: 1.4deg; grid-column: 2 / 3; color: var(--cream); background: linear-gradient(135deg, #3F8C7A, #2D3A73); }
.card-rose { --r: -1.3deg; grid-column: 3 / 4; color: var(--umber); background: linear-gradient(145deg, #B86F78, #F3EAD8); }

.d-tab {
  position: absolute;
  right: -10px;
  top: 38px;
  width: 58px;
  height: 90px;
  border-radius: 0 45px 45px 0;
  background: #241714;
  color: #F3EAD8;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 3rem;
}

.ghost-grid, .routing, .circuit { position: absolute; inset: 0; opacity: .34; pointer-events: none; }
.ghost-grid { background: repeating-linear-gradient(0deg, #2D3A73 0 1px, transparent 1px 26px), repeating-linear-gradient(90deg, #2D3A73 0 1px, transparent 1px 26px); }
.routing { background: radial-gradient(circle at 20% 24%, #D7E6DC 0 3px, transparent 4px), radial-gradient(circle at 76% 62%, #B86F78 0 3px, transparent 4px), radial-gradient(circle at 42% 82%, #3F8C7A 0 3px, transparent 4px), repeating-linear-gradient(45deg, transparent 0 18px, rgba(215,230,220,.24) 18px 20px); }
.circuit { background: linear-gradient(90deg, transparent 30%, rgba(243,234,216,.28) 30% 31%, transparent 31%), linear-gradient(0deg, transparent 48%, rgba(243,234,216,.25) 48% 49%, transparent 49%); }
.circuit i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #F3EAD8; box-shadow: 0 0 0 4px rgba(243,234,216,.12); }
.circuit i:nth-child(1) { left: 30%; top: 24%; } .circuit i:nth-child(2) { right: 22%; top: 49%; } .circuit i:nth-child(3) { left: 48%; bottom: 20%; } .circuit i:nth-child(4) { right: 38%; top: 18%; }

.cursor-pair { display: flex; gap: 16px; }
.cursor-pair b { width: 6px; height: 86px; background: #D7E6DC; animation: blink 1.6s steps(1) infinite; }
.center-card p { position: absolute; bottom: 24px; font-family: var(--mono); letter-spacing: .4em; text-transform: uppercase; }
.correction { position: relative; margin-top: 20px; font-family: var(--mono); font-size: .8rem; }

.closing {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 24px;
  text-align: center;
  background: radial-gradient(circle at 50% 42%, rgba(243,234,216,.22), transparent 34%), linear-gradient(180deg, #241714, #2D3A73 160%);
}

.closing h2 {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3.8rem, 10vw, 10rem);
  font-weight: 400;
  color: #F3EAD8;
}

.prompt {
  position: relative;
  z-index: 2;
  min-height: 2rem;
  font-family: var(--mono);
  color: #D7E6DC;
  letter-spacing: .08em;
}
.prompt span { color: #B86F78; margin-right: 10px; }
.prompt i { height: 1.2em; vertical-align: middle; }
.closing .mono-label { position: relative; z-index: 2; color: rgba(215,230,220,.7); }
.closing-note { position: relative; bottom: auto; z-index: 2; }

.closing-pool {
  position: absolute;
  border-radius: 50%;
  filter: blur(22px);
  opacity: .48;
  animation: drift 18s ease-in-out infinite alternate;
}
.pool-one { width: 42vw; height: 34vw; left: 4%; top: 20%; background: radial-gradient(circle, rgba(63,140,122,.55), transparent 68%); }
.pool-two { width: 36vw; height: 30vw; right: 8%; bottom: 14%; background: radial-gradient(circle, rgba(184,111,120,.46), transparent 70%); animation-delay: -6s; }
.pool-three { width: 48vw; height: 22vw; left: 29%; bottom: 2%; background: radial-gradient(circle, rgba(45,58,115,.7), transparent 70%); animation-delay: -11s; }

@keyframes drift { to { transform: translate3d(3vw, -2vh, 0) scale(1.08) rotate(5deg); } }

.typed-card.is-active { filter: saturate(1.08) brightness(1.04); }
.typed-card.is-complete { transition: filter 900ms ease; filter: saturate(.9); }

@media (max-width: 820px) {
  .leather-plane { height: 86vh; }
  .artifact-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .artifact, .card-leather, .card-vellum, .card-paper, .center-card, .card-indigo, .card-verdigris, .card-rose { grid-column: auto; grid-row: auto; min-height: 210px; }
  .gate { display: none; }
}