:root {
  --amber: #cfa35b;
  --paper: #d9caa5;
  --glass: rgba(5, 8, 6, .90);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; background: #050706; }
html { scroll-behavior: smooth; }
body { font-family: "Courier New", Courier, monospace; }
.viewport { position: relative; height: 100svh; overflow: hidden; background: #050706; }

/* 4:3 master canvas. It always covers the screen, so no side bars appear. */
.artboard {
  position: absolute;
  left: 50%; top: 50%;
  width: 100vw; height: 75vw;
  min-width: 133.333333vh; min-height: 100vh;
  transform: translate(-50%, -50%);
  overflow: hidden;
  isolation: isolate;
  background: #050706;
}
.base-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; user-select: none; pointer-events: none; }

/* DNA crop: exact artwork panel, then tiny perspective movements suggest twisting. */
.dna-window {
  position: absolute;
  left: 84.66%; top: 3.31%;
  width: 13.21%; height: 33.62%;
  overflow: hidden;
  perspective: 480px;
  transform: translateZ(0);
}
.dna-panel {
  width: 100%; height: 100%; object-fit: fill;
  transform-origin: 50% 50%;
  filter: brightness(.97) contrast(1.02);
  animation: dnaBreathe 12s ease-in-out infinite;
  will-change: transform, filter;
}
.dna-window.is-twisting .dna-panel { animation: dnaTwist 5.8s cubic-bezier(.42,0,.58,1) 1; }
.dna-sheen {
  position: absolute; inset: -10%;
  background: linear-gradient(95deg, transparent 35%, rgba(211,164,83,.08) 49%, rgba(229,190,107,.14) 51%, transparent 64%);
  transform: translateX(-80%);
  mix-blend-mode: screen;
  opacity: 0;
}
.dna-window.is-twisting .dna-sheen { animation: dnaSheen 5.8s ease-in-out 1; }

@keyframes dnaBreathe {
  0%,100% { transform: perspective(480px) rotateY(0deg) scaleX(1); filter: brightness(.97); }
  50% { transform: perspective(480px) rotateY(2deg) scaleX(.992); filter: brightness(1.02); }
}
@keyframes dnaTwist {
  0%,100% { transform: perspective(480px) rotateY(0deg) scaleX(1); filter: brightness(.97) contrast(1.02); }
  22% { transform: perspective(480px) rotateY(13deg) scaleX(.96); filter: brightness(1.07) contrast(1.09); }
  50% { transform: perspective(480px) rotateY(-11deg) scaleX(1.025); filter: brightness(.89) contrast(1.14); }
  78% { transform: perspective(480px) rotateY(8deg) scaleX(.98); filter: brightness(1.08) contrast(1.06); }
}
@keyframes dnaSheen {
  0%,100% { transform: translateX(-80%); opacity: 0; }
  20% { opacity: .35; }
  58% { transform: translateX(70%); opacity: .3; }
  75% { opacity: 0; }
}

/* Approximate eye location of the blueprint rabbit in the top-left panel. */
.rabbit-eye {
  position: absolute;
  left: 12.28%; top: 18.63%;
  width: 1.52%; height: .92%;
  pointer-events: none;
  transform-origin: center;
}
.rabbit-eye span {
  position: absolute; left: 0; right: 0; top: 43%; height: 22%;
  border-radius: 50%;
  background: rgba(4,7,5,.96);
  box-shadow: 0 0 .18vw rgba(6,8,6,.95);
  transform: scaleY(0);
  opacity: 0;
}
.rabbit-eye.blink span { animation: blink 185ms ease-in-out 1; }
.rabbit-eye.double span { animation: blinkDouble 410ms ease-in-out 1; }
@keyframes blink {
  0%,100% { transform: scaleY(0); opacity: 0; }
  35%,65% { transform: scaleY(1); opacity: 1; }
}
@keyframes blinkDouble {
  0%,18%,40%,58%,100% { transform: scaleY(0); opacity: 0; }
  10%,30%,50% { transform: scaleY(1); opacity: 1; }
}

/* Readout masks and live text */
.status-panel {
  position: absolute;
  color: rgba(216,194,148,.83);
  background: linear-gradient(90deg, rgba(5,8,6,.94), rgba(5,8,6,.84) 82%, rgba(5,8,6,0));
  text-transform: uppercase;
  letter-spacing: .08em;
  line-height: 1.55;
  text-shadow: 0 0 .35vw rgba(204,153,75,.18);
  overflow: hidden;
}
.status-left { left: 2.75%; top: 30.25%; width: 18.1%; height: 9.2%; padding: .2% .2%; font-size: clamp(7px, .98vw, 16px); }
.status-right { left: 85.0%; top: 55.25%; width: 12.9%; height: 9.0%; padding: .15% .2%; font-size: clamp(7px, .84vw, 14px); background: linear-gradient(90deg, rgba(5,8,6,.94), rgba(5,8,6,.72) 90%, rgba(5,8,6,0)); }
.status-row { display: flex; white-space: nowrap; height: 25%; align-items: center; overflow: hidden; }
.status-row.single { display:block; }
.label { opacity: .82; }
.value { display: inline-block; transform: translateY(0); }
.value.flip { animation: boardFlip 520ms cubic-bezier(.22,.61,.36,1); }
@keyframes boardFlip {
  0% { opacity: 1; transform: translateY(0); filter: blur(0); }
  38% { opacity: 0; transform: translateY(-115%); filter: blur(.5px); }
  39% { transform: translateY(115%); }
  72% { opacity: .72; }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.scanline {
  position:absolute; left:0; right:0; height:.18%; top:-1%;
  background: linear-gradient(90deg, transparent 0%, rgba(213,161,79,.03) 14%, rgba(242,204,127,.09) 48%, rgba(213,161,79,.03) 82%, transparent 100%);
  box-shadow: 0 0 .8vw rgba(190,132,49,.08);
  opacity:.42;
  animation: scan 18s linear infinite;
  pointer-events:none;
}
@keyframes scan { to { top: 101%; } }
.flicker { position:absolute; inset:0; background: rgba(223,173,92,.018); opacity:0; pointer-events:none; mix-blend-mode:screen; }
.flicker.pulse { animation: flick .18s steps(2,end) 1; }
@keyframes flick { 0%,100%{opacity:0} 35%{opacity:.45} 58%{opacity:.1} 72%{opacity:.35} }
.vignette { position:absolute; inset:0; pointer-events:none; box-shadow: inset 0 0 8vw rgba(0,0,0,.48), inset 0 0 2vw rgba(0,0,0,.26); }

@media (prefers-reduced-motion: reduce) {
  .dna-panel, .scanline, .value.flip, .rabbit-eye.blink span, .rabbit-eye.double span, .flicker.pulse { animation: none !important; }
}

/* Destination section shared with the original site. */
:root{--background:#0b100d;--gold:#c99b56;--gold-bright:#e5c28a;--ivory:#e8dfc9;--muted:#a69b80;--line:rgba(201,155,86,.42)}
.scroll-cue{position:absolute;z-index:4;bottom:1.2rem;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:.7rem;padding:.55rem 1rem;border:1px solid var(--line);background:rgba(9,14,11,.88);color:var(--gold-bright);text-decoration:none;font:11px/1.2 'Courier New',monospace;letter-spacing:.23em}.scroll-cue:hover,.scroll-cue:focus-visible{background:#273024;border-color:var(--gold-bright)}.scroll-cue span:last-child{font-size:20px;letter-spacing:0}
.destinations{position:relative;color:var(--ivory);font-family:Georgia,'Times New Roman',serif;padding:clamp(4rem,8vw,7rem) max(1.5rem,calc((100vw - 1120px)/2)) 1.5rem;background:radial-gradient(circle at 50% 0%,rgba(139,111,55,.13),transparent 40%),repeating-linear-gradient(90deg,transparent 0,transparent 79px,rgba(201,155,86,.035) 80px),var(--background);border-top:1px solid var(--line)}.section-heading{text-align:center;margin:0 auto 3rem}.eyebrow,.card-number,footer{font:11px/1.5 'Courier New',monospace;letter-spacing:.19em;color:var(--gold)}.section-heading h2{margin:.8rem 0;font-weight:400;font-size:clamp(2.3rem,5vw,4.4rem);line-height:1.05}.section-heading p{margin:0;color:var(--muted);font-size:1.1rem}.destination-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem}.destination-card{min-height:350px;padding:clamp(1.5rem,3vw,2.5rem);display:flex;flex-direction:column;align-items:flex-start;position:relative;background:linear-gradient(145deg,rgba(48,57,38,.55),rgba(11,17,13,.9) 65%);border:1px solid var(--line);box-shadow:inset 0 0 0 7px #0d130f,inset 0 0 0 8px rgba(201,155,86,.16);transition:transform .25s,border-color .25s}.destination-card:before,.destination-card:after{content:"";position:absolute;width:24px;height:24px;pointer-events:none}.destination-card:before{top:-1px;left:-1px;border-top:2px solid var(--gold);border-left:2px solid var(--gold)}.destination-card:after{right:-1px;bottom:-1px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold)}.destination-card:hover{transform:translateY(-4px);border-color:var(--gold-bright)}.card-symbol{font-size:3.8rem;color:var(--gold);margin:1.1rem 0 .4rem;line-height:1}.destination-card h3{margin:.3rem 0 .6rem;font-size:clamp(2rem,3vw,3rem);font-weight:400}.destination-card p{max-width:27rem;margin:0 0 2rem;color:var(--muted);line-height:1.55}.card-link{margin-top:auto;display:inline-flex;gap:1.5rem;align-items:center;justify-content:space-between;min-width:205px;padding:.8rem 0;border-top:1px solid var(--line);font:12px/1.3 'Courier New',monospace;text-transform:uppercase;letter-spacing:.1em;color:var(--gold-bright);text-decoration:none}.card-link:hover,.card-link:focus-visible{text-decoration:underline;text-underline-offset:5px}.card-link span{font-size:20px}footer{display:flex;justify-content:space-between;gap:1rem;margin-top:4rem;padding-top:1.2rem;border-top:1px solid var(--line);font-size:10px}@media(max-width:700px){.destination-grid{grid-template-columns:1fr}.destination-card{min-height:300px}footer{flex-direction:column;gap:.4rem}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.destination-card{transition:none}}

/* Mechanical rabbit: etched light sits over the approved illustration. */
.mechanical-rabbit{position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:visible;pointer-events:none}
.gear-ring{fill:none;stroke:#d6a151;stroke-width:1.5;stroke-dasharray:5 6;opacity:.56;filter:drop-shadow(0 0 3px rgba(229,174,75,.5));transform-origin:745px 570px;animation:heart-gears 28s linear infinite}
.gear-inner{fill:none;stroke:#e0b46e;stroke-width:1;stroke-dasharray:2 5;opacity:.56;transform-origin:745px 570px;animation:heart-gears 19s linear infinite reverse}
.heart-core{fill:rgba(255,175,61,.15);stroke:rgba(255,199,105,.42);stroke-width:1;animation:heart-beat 6.8s ease-in-out infinite}
.eye-focus-ring{fill:none;stroke:#f2bc60;stroke-width:1.2;opacity:0;transform-origin:769px 460px;animation:cyber-focus 11.2s ease-in-out infinite}
.eye-spark{fill:#ffd391;opacity:0;filter:drop-shadow(0 0 5px #f8b957);animation:eye-glint 11.2s ease-in-out infinite}
.spine-signal{fill:none;stroke:#d9aa66;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:5 29;opacity:.05;filter:drop-shadow(0 0 3px rgba(234,177,92,.6));animation:spine-breathe 9.4s ease-in-out infinite}
.spine-node{fill:#f2c77e;opacity:0;animation:spine-nodes 9.4s ease-in-out infinite}
@keyframes heart-gears{to{transform:rotate(360deg)}}
@keyframes heart-beat{0%,68%,100%{opacity:.2;filter:none}73%,79%{opacity:.72;filter:drop-shadow(0 0 6px #eeb660)}76%{opacity:.42}}
@keyframes cyber-focus{0%,35%,42%,100%{opacity:0;transform:scale(.8)}37%,39%{opacity:.75;transform:scale(1.06)}}
@keyframes eye-glint{0%,35%,42%,100%{opacity:0}37%,39%{opacity:.7}}
@keyframes spine-breathe{0%,15%,65%,100%{opacity:.06;stroke-dashoffset:0}28%,43%{opacity:.62;stroke-dashoffset:-22}52%{opacity:.26;stroke-dashoffset:-48}}
@keyframes spine-nodes{0%,23%,50%,100%{opacity:0}31%,40%{opacity:.6}}
@media(prefers-reduced-motion:reduce){.mechanical-rabbit *{animation:none!important}.gear-ring,.gear-inner{opacity:.3}.heart-core{opacity:.25}.eye-focus-ring,.eye-spark,.spine-node{opacity:0}.spine-signal{opacity:.08}}

/* Three destinations across when there is room, then a tidy responsive stack. */
@media(min-width:1000px){.destination-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.destination-card{min-height:370px}.card-link{min-width:0;width:100%}}