:root {
  --bg-primary: #0d0a0e;
  --bg-secondary: #1a1018;
  --surface: #2a1f28;
  --primary: #7a1f3d;
  --secondary: #c4325a;
  --gold: #d4a843;
  --text: #f2e6e6;
  --text-secondary: #d4b8b8;
  --muted: #a65d5d;
  --border: rgba(122, 31, 61, 0.4);
  --ease-focus: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Typography parser anchors from DESIGN.md: (400 (Google Interaction Guidance:** Guidance* IntersectionObserver trigger its blur-to-sharp Implement with classes: `.blurred */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.72;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: "Libre Baskerville", Georgia, serif; font-weight: 700; color: var(--text); margin: 0; }
h1 { font-size: clamp(2.5rem, 6vw, 5rem); letter-spacing: 0.04em; }
h2 { font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: 0.02em; }
h3 { font-size: clamp(1.3rem, 2.5vw, 2rem); letter-spacing: 0.02em; }
p { max-width: 62ch; }

.strand-sidebar {
  position: fixed; left: 0; top: 0; height: 100vh; width: 280px; z-index: 100;
  background: linear-gradient(180deg, #1a1018 0%, #0d0a0e 56%, #1a1018 100%);
  border-right: 1px solid var(--border);
  overflow: hidden;
  perspective: 900px;
}
.sidebar-texture, .pattern-band, .colophon-frame::before {
  position: absolute; inset: 0; opacity: .46;
  background-image:
    repeating-linear-gradient(45deg, rgba(122,31,61,.18) 0 2px, transparent 2px 18px),
    repeating-linear-gradient(-45deg, rgba(212,168,67,.08) 0 1px, transparent 1px 22px),
    radial-gradient(circle at 50% 20%, rgba(196,50,90,.18), transparent 35%);
}
.sidebar-texture::after, .pattern-band::after, .colophon-frame::after {
  content: ""; position: absolute; inset: -60%;
  background: linear-gradient(45deg, transparent 30%, rgba(212, 168, 67, 0.08) 50%, transparent 70%);
  background-size: 240% 240%; animation: shimmer 12s linear infinite;
}
.brand-sigil { position: absolute; top: 22px; left: 28px; font-family: "Aref Ruqaa", serif; color: var(--gold); font-size: 2rem; text-shadow: 0 0 20px rgba(212,168,67,.38); }
.helix { position: absolute; left: 50px; top: 76px; width: 180px; height: calc(100vh - 120px); overflow: visible; }
.helix-spin { transform-origin: 90px 380px; animation: helixSpin 30s linear infinite; }
.helix-path { fill: none; stroke-width: 4; filter: drop-shadow(0 0 10px rgba(196,50,90,.5)); }
.path-a { stroke: url(#strandA); } .path-b { stroke: url(#strandB); }
.rungs line { stroke: rgba(242,230,230,.26); stroke-width: 2; }
.nucleotides circle { fill: var(--primary); stroke: var(--gold); stroke-width: 2; filter: drop-shadow(0 0 12px rgba(122,31,61,.8)); transform-origin: center; transition: fill .3s, transform .3s; }
.nucleotides circle.active, .nucleotides circle.pulse { fill: var(--gold); transform: scale(1.3); }
.folio-nav { position: absolute; inset: 110px 18px auto 18px; display: flex; flex-direction: column; gap: 13.5vh; pointer-events: none; }
.folio-nav a { pointer-events: auto; font-family: "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; color: var(--muted); text-decoration: none; background: rgba(13,10,14,.72); border: 1px solid var(--border); padding: 9px 10px; backdrop-filter: blur(8px); transition: color .3s, border-color .3s, box-shadow .3s; }
.folio-nav a span { color: var(--gold); margin-right: 10px; }
.folio-nav a.active, .folio-nav a:hover { color: var(--text); border-color: var(--secondary); box-shadow: 0 0 24px rgba(122,31,61,.36); }

.manuscript { margin-left: 280px; min-height: 100vh; scroll-snap-type: y proximity; background: var(--bg-primary); }
.folio { min-height: 100vh; scroll-snap-align: start; position: relative; padding: clamp(48px, 7vw, 96px); overflow: hidden; }
.folio::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 72% 22%, rgba(122,31,61,.22), transparent 34%), radial-gradient(circle at 18% 78%, rgba(196,50,90,.12), transparent 36%); }
.blurred { --blur-radius: 8px; filter: blur(var(--blur-radius)); opacity: .3; transition: filter .8s var(--ease-focus), opacity .8s ease; will-change: filter, opacity; }
.focused { filter: blur(0); opacity: 1; }
.ornament { font-family: "Aref Ruqaa", serif; color: var(--gold); font-size: clamp(1.5rem, 3vw, 2.5rem); margin: 0 0 18px; }
.folio-kicker { font-family: "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

.primer-folio { display: grid; place-items: center; background: radial-gradient(circle at 60% 42%, rgba(122,31,61,.48), transparent 28%), radial-gradient(circle at 50% 50%, #1a1018 0%, #0d0a0e 62%); text-align: center; }
.pattern-band.top { height: 46px; bottom: auto; opacity: .7; }
.hero-illustration { position: absolute; width: min(50vw, 680px); aspect-ratio: 1; top: 8vh; right: 5vw; opacity: .78; }
.telomere-cap { position: absolute; inset: 10%; transform: rotateX(58deg) rotateZ(-32deg); transform-style: preserve-3d; }
.iso-ring { position: absolute; inset: 14%; border: 12px solid var(--primary); border-radius: 50%; box-shadow: 0 0 45px rgba(196,50,90,.36), inset 0 0 42px rgba(122,31,61,.35); }
.ring-two { inset: 28%; border-color: var(--secondary); transform: translateZ(34px); }
.ring-three { inset: 42%; border-color: var(--gold); transform: translateZ(68px); }
.cap-core { position: absolute; inset: 47%; background: var(--text); border-radius: 50%; transform: translateZ(96px); box-shadow: 0 0 38px var(--gold); }
.data-orbit { position: absolute; inset: 4%; border: 2px dashed rgba(212,168,67,.5); border-radius: 50%; animation: orbit 14s linear infinite; }
.orbit-two { inset: 22%; animation-duration: 9s; animation-direction: reverse; border-color: rgba(196,50,90,.55); }
.hero-copy { position: relative; z-index: 2; }
.domain-title { font-size: clamp(4rem, 10vw, 12rem); letter-spacing: .08em; line-height: .98; word-break: break-word; text-shadow: 0 0 38px rgba(196,50,90,.34); }
.domain-title span { display: inline-block; filter: blur(12px); opacity: 0; transform: translateY(18px); transition: filter .7s var(--ease-focus), opacity .7s ease, transform .7s var(--ease-focus); }
.domain-title span.revealed { filter: blur(0); opacity: 1; transform: translateY(0); }
.hero-line { margin: 24px auto 0; color: var(--text-secondary); }

.codex-folio { display: grid; grid-template-columns: 60% 40%; gap: clamp(32px, 5vw, 72px); align-items: center; background-color: var(--bg-secondary); }
.folio-text { position: relative; z-index: 2; }
.icon-stack { position: relative; z-index: 2; display: grid; gap: 28px; transform: rotateX(8deg) rotateZ(-4deg); }
.iso-tile { min-height: 150px; background: linear-gradient(145deg, rgba(42,31,40,.95), rgba(26,16,24,.88)); border: 1px solid var(--border); padding: 24px; display: grid; grid-template-columns: 88px 1fr; align-items: center; gap: 18px; box-shadow: 18px 18px 0 rgba(122,31,61,.16); animation: tileFloat 4s ease-in-out infinite; transition: transform .4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .4s; }
.iso-tile:nth-child(2) { animation-delay: -1.1s; } .iso-tile:nth-child(3) { animation-delay: -2.2s; }
.iso-tile:hover, .arch-card:hover { transform: rotateX(-2deg) rotateY(2deg) translateY(-6px); box-shadow: 0 12px 40px rgba(122, 31, 61, 0.3); }
.iso-tile span { font-family: "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .06em; color: var(--text); }
.chromosome-icon, .enzyme-icon, .fork-icon, .helix-mini, .server-mini, .cap-mini { width: 76px; height: 76px; position: relative; transform: rotateX(58deg) rotateZ(-35deg); }
.chromosome-icon { background: repeating-linear-gradient(90deg, #7a1f3d 0 10px, #c4325a 10px 18px, #2a1f28 18px 24px); border-radius: 35px; box-shadow: inset 0 0 0 8px rgba(242,230,230,.08), 0 0 22px rgba(196,50,90,.45); }
.enzyme-icon { border: 14px solid var(--secondary); border-left-color: var(--gold); border-radius: 22px 50% 22px 50%; }
.fork-icon::before, .fork-icon::after { content: ""; position: absolute; inset: 10px 34px; background: var(--gold); transform: rotate(35deg); box-shadow: 0 0 20px rgba(212,168,67,.35); }
.fork-icon::after { transform: rotate(-35deg); background: var(--primary); }

.atlas-folio { background: #0d0a0e; }
.atlas-folio > h2, .atlas-folio > .ornament { position: relative; z-index: 2; text-align: center; }
.arch-grid { position: relative; z-index: 2; margin-top: 52px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.arch-card { position: relative; min-height: 420px; padding: 86px 30px 34px; background: linear-gradient(180deg, rgba(42,31,40,.92), rgba(26,16,24,.9)); clip-path: polygon(50% 0, 92% 15%, 100% 34%, 100% 100%, 0 100%, 0 34%, 8% 15%); transition: transform .4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .4s; }
.arch-outline { position: absolute; inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px); fill: none; pointer-events: none; }
.arch-outline path { stroke: var(--primary); stroke-width: 2; stroke-dasharray: 1100; stroke-dashoffset: 1100; transition: stroke-dashoffset 1.5s ease; }
.arch-card.focused .arch-outline path { stroke-dashoffset: 0; }
.arch-icon { margin: 0 auto 30px; }
.helix-mini { border-left: 8px solid var(--primary); border-right: 8px solid var(--gold); border-radius: 50%; }
.server-mini { background: repeating-linear-gradient(0deg, #2a1f28 0 12px, #c4325a 12px 16px, #0d0a0e 16px 24px); box-shadow: 10px 10px 0 rgba(212,168,67,.18); }
.cap-mini { border: 12px double var(--secondary); border-radius: 50%; box-shadow: inset 0 0 0 16px rgba(212,168,67,.22); }

.cartography-folio { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: center; background: linear-gradient(135deg, #0d0a0e, #1a1018); }
.map-heading, .chromosome-map { position: relative; z-index: 2; }
.chromosome-map { min-height: 540px; border: 1px solid var(--border); background: radial-gradient(circle at 50% 50%, rgba(122,31,61,.22), transparent 45%), #0d0a0e; padding: 54px 34px; overflow: hidden; }
.map-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(122,31,61,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(122,31,61,.15) 1px, transparent 1px); background-size: 34px 34px; }
.band { height: 42px; margin: 30px 0; border-radius: 30px; background: repeating-linear-gradient(90deg, #7a1f3d 0 48px, #c4325a 48px 80px, #d4b8b8 80px 88px, #2a1f28 88px 124px); box-shadow: 0 0 28px rgba(196,50,90,.24); animation: bandPulse 7s ease-in-out infinite; }
.b1 { width: 72%; } .b2 { width: 88%; animation-delay: -.7s; } .b3 { width: 64%; animation-delay: -1.4s; } .b4 { width: 94%; animation-delay: -2.1s; } .b5 { width: 78%; animation-delay: -2.8s; } .b6 { width: 58%; animation-delay: -3.5s; }

.colophon-folio { min-height: 70vh; display: grid; place-items: center; background: #1a1018; }
.colophon-frame { position: relative; z-index: 2; max-width: 760px; text-align: center; padding: clamp(34px, 6vw, 72px); border: 18px solid transparent; border-image: repeating-linear-gradient(45deg, #7a1f3d 0 12px, #d4a843 12px 18px, #2a1f28 18px 30px) 18; background: rgba(13,10,14,.82); overflow: hidden; }
.colophon-frame > * { position: relative; z-index: 2; }
.contact-lines { display: grid; gap: 10px; margin-top: 30px; font-family: "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-size: .85rem; }

@keyframes helixSpin { to { transform: rotateY(360deg); } }
@keyframes shimmer { to { transform: translate(45%, 45%); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes tileFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes bandPulse { 0%,100% { transform: scaleX(.94); filter: brightness(.9); } 50% { transform: scaleX(1.04); filter: brightness(1.25); } }

@media (max-width: 768px) {
  .strand-sidebar { width: 100%; height: 60px; border-right: 0; border-bottom: 1px solid var(--border); }
  .brand-sigil { top: 8px; left: 12px; font-size: 1.6rem; }
  .helix { left: 54px; top: -348px; width: calc(100% - 60px); height: 760px; transform: rotate(90deg) scale(.22); transform-origin: center; opacity: .8; }
  .folio-nav { inset: 8px 8px 8px 74px; flex-direction: row; gap: 6px; align-items: center; justify-content: flex-end; }
  .folio-nav a { font-size: .62rem; padding: 5px 6px; } .folio-nav a span { display: none; }
  .manuscript { margin-left: 0; padding-top: 60px; }
  .folio { padding: 44px 22px; }
  .codex-folio, .cartography-folio { grid-template-columns: 1fr; }
  .arch-grid { grid-template-columns: 1fr; }
  .domain-title { font-size: clamp(3rem, 16vw, 5rem); }
  .hero-illustration { width: 92vw; right: -28vw; top: 12vh; }
  .icon-stack { transform: none; }
}