:root {
  /* Design concordance: lettering appears while tiny needles wobble playful disagreement. visitor scrolls Display** Display* Displa* wordmark */
  --orange: #B55328;
  --oxblood: #4A1F1A;
  --marble: #F1DEC2;
  --vein: #8B7C83;
  --brass: #C18B36;
  --teal: #2F756B;
  --plum: #24151E;
  --display: 'Playfair Display', Georgia, serif;
  --body: 'Libre Baskerville', Georgia, serif;
  --label: 'Josefin Sans', Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--plum);
  background:
    radial-gradient(circle at 15% 10%, rgba(193,139,54,.24), transparent 24rem),
    linear-gradient(135deg, var(--marble), #e8cba5 45%, var(--vein));
  font-family: var(--body);
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .18;
  background-image:
    radial-gradient(circle at 20% 30%, var(--plum) 0 1px, transparent 1px),
    radial-gradient(circle at 80% 70%, var(--oxblood) 0 1px, transparent 1px);
  background-size: 29px 31px, 37px 41px;
  mix-blend-mode: multiply;
}

.era-keys {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  gap: .5rem;
  padding: .35rem;
  border: 2px solid var(--oxblood);
  border-radius: 999px;
  background: rgba(241, 222, 194, .72);
  box-shadow: 0 10px 30px rgba(36, 21, 30, .22), inset 0 0 0 2px rgba(193,139,54,.45);
  backdrop-filter: blur(5px);
}

.era-keys a {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  color: var(--plum);
  text-decoration: none;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--brass), #efd18c 48%, var(--brass));
  font: 700 .78rem var(--label);
  letter-spacing: .08em;
  box-shadow: inset 0 0 0 1px var(--oxblood);
}

.chapter {
  position: relative;
  min-height: 108vh;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 10px double var(--oxblood);
}

.chapter::before {
  content: attr(data-chapter);
  position: absolute;
  right: -1rem;
  top: 4rem;
  font: 900 clamp(7rem, 16vw, 15rem) var(--display);
  color: rgba(74,31,26,.12);
  z-index: -1;
}

.chapter::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, transparent 0 27%, rgba(139,124,131,.35) 27.4% 27.8%, transparent 28.3%),
    linear-gradient(74deg, transparent 0 61%, rgba(74,31,26,.25) 61.2% 61.55%, transparent 62%);
  pointer-events: none;
  opacity: .55;
}

.layer, .token { will-change: transform; }

h1, h2, h3 { font-family: var(--display); margin: 0; line-height: .9; }
h1 { font-size: clamp(3.3rem, 10vw, 9rem); font-weight: 900; color: var(--oxblood); text-shadow: 2px 2px 0 var(--brass); }
h2 { font-size: clamp(3rem, 8vw, 8rem); font-weight: 900; color: var(--oxblood); }
h3 { font-size: 2rem; color: var(--teal); }
p { line-height: 1.65; }
.small-label { font: 700 .73rem var(--label); letter-spacing: .22em; text-transform: uppercase; color: var(--teal); }

.gate {
  min-height: 118vh;
  background: radial-gradient(circle at 50% 25%, #fff2d8, var(--marble) 36%, var(--vein) 120%);
}

.celestial, .map-sky, .velvet-orbit, .horizon {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle, var(--brass) 0 2px, transparent 2.5px) 0 0/95px 95px,
    radial-gradient(circle at 20% 30%, rgba(47,117,107,.35), transparent 22rem),
    conic-gradient(from 40deg, transparent, rgba(36,21,30,.17), transparent, rgba(193,139,54,.22), transparent);
  animation: counterRotate 42s linear infinite reverse;
}

.curtain {
  position: absolute;
  top: 0;
  bottom: -5%;
  width: 27vw;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 12px, transparent 12px 38px),
    linear-gradient(90deg, var(--oxblood), var(--orange) 42%, #7b2e20 70%, var(--oxblood));
  box-shadow: 0 0 50px rgba(36,21,30,.55);
  z-index: 4;
}
.curtain-left { left: -4vw; border-right: 8px solid var(--brass); }
.curtain-right { right: -4vw; transform: scaleX(-1); border-right: 8px solid var(--brass); }

.marble-arch {
  position: absolute;
  left: 50%;
  top: 10vh;
  transform: translateX(-50%);
  width: min(78rem, 78vw);
  height: 78vh;
  border: clamp(1.5rem, 4vw, 4rem) solid var(--marble);
  border-bottom: none;
  border-radius: 50% 50% 0 0 / 42% 42% 0 0;
  background: radial-gradient(ellipse at 50% 100%, transparent 0 43%, rgba(193,139,54,.34) 44%, var(--marble) 45%);
  box-shadow: inset 0 0 0 8px var(--brass), inset 0 0 70px rgba(139,124,131,.45), 0 24px 80px rgba(36,21,30,.28);
  z-index: 7;
}
.arch-veins { position: absolute; inset: -2rem; background: linear-gradient(120deg, transparent 12%, var(--vein) 12.4%, transparent 13%), linear-gradient(42deg, transparent 66%, rgba(74,31,26,.42) 66.3%, transparent 67%); opacity: .7; animation: veinCrawl 9s ease-in-out infinite alternate; }
.brass-plaque {
  position: absolute;
  left: 50%;
  top: 32%;
  transform: translateX(-50%) rotate(-2deg);
  width: min(62rem, 75vw);
  padding: 2rem 2.4rem;
  text-align: center;
  border: 4px solid var(--oxblood);
  border-radius: 44% 56% 47% 53% / 18% 22% 20% 24%;
  background: linear-gradient(145deg, #dba956, var(--brass) 40%, #f1cf87 62%, var(--brass));
  box-shadow: 0 16px 0 rgba(74,31,26,.28), inset 0 0 0 5px rgba(241,222,194,.55);
}
.brass-plaque p { max-width: 42rem; margin: 1rem auto 0; font-size: 1.15rem; }
.corner-note { position: absolute; left: 5vw; bottom: 9vh; width: 15rem; transform: rotate(-8deg); z-index: 9; color: var(--marble); background: var(--plum); padding: 1rem; border: 2px solid var(--brass); }

.compass { position: absolute; width: 9rem; height: 9rem; border: 3px solid var(--brass); border-radius: 50%; z-index: 9; background: rgba(241,222,194,.8); box-shadow: inset 0 0 0 8px rgba(181,83,40,.25); }
.compass span { position: absolute; left: 50%; top: 50%; width: 4.4rem; height: 3px; background: var(--teal); transform-origin: left center; }
.compass span:nth-child(1){ transform: rotate(0deg); } .compass span:nth-child(2){ transform: rotate(73deg); } .compass span:nth-child(3){ transform: rotate(164deg); } .compass span:nth-child(4){ transform: rotate(251deg); }
.cluster-one { left: 7vw; top: 18vh; } .cluster-two { right: 9vw; bottom: 18vh; }
.traveler { position: absolute; z-index: 12; color: var(--teal); font-size: 2.6rem; text-shadow: 1px 1px 0 var(--brass); }
.traveler-a { right: 22vw; top: 23vh; animation: bob 2.5s ease-in-out infinite; }

.atlas { background: linear-gradient(160deg, #edd2ab, var(--marble) 45%, #d9a472); }
.atlas-title { position: absolute; left: 7vw; top: 13vh; z-index: 5; max-width: 45rem; }
.route-ribbon { position: absolute; inset: 7vh -3vw 0; width: 106vw; height: 92vh; z-index: 2; transform: rotate(-4deg); }
.route-ribbon path:first-child { fill: none; stroke: rgba(74,31,26,.18); stroke-width: 76; stroke-linecap: round; }
.route-glow { fill: none; stroke: var(--orange); stroke-width: 20; stroke-linecap: round; stroke-dasharray: 18 22; animation: rewindRibbon 6s linear infinite reverse; }
.parchment-panel, .chapter-card {
  position: absolute;
  background: rgba(241,222,194,.9);
  border: 3px solid var(--oxblood);
  box-shadow: 14px 14px 0 rgba(193,139,54,.45), inset 0 0 0 6px rgba(139,124,131,.16);
  padding: 1.6rem;
}
.parchment-panel { right: 10vw; bottom: 12vh; width: min(24rem, 72vw); transform: rotate(4deg); z-index: 7; }
.wax-seal { position: absolute; right: -1.2rem; top: -1.2rem; width: 4rem; height: 4rem; border-radius: 50%; background: radial-gradient(circle, #e27842, var(--orange) 55%, var(--oxblood)); animation: sealBlink 4s ease-in-out infinite; }
.route-marker { position: absolute; z-index: 6; padding: .75rem .9rem; background: var(--brass); border: 2px solid var(--oxblood); border-radius: 50% 8px; font: 700 .72rem var(--label); letter-spacing: .1em; text-transform: uppercase; text-align: center; }
.marker-one { left: 11vw; bottom: 25vh; } .marker-two { left: 45vw; top: 42vh; } .marker-three { right: 9vw; top: 27vh; }
.traveler-path { left: 0; top: 0; }

.parlor { background: radial-gradient(circle at 55% 45%, rgba(193,139,54,.42), transparent 22rem), linear-gradient(130deg, var(--plum), var(--oxblood) 48%, var(--orange)); color: var(--marble); }
.parlor h2, .parlor h3 { color: var(--marble); text-shadow: 3px 3px 0 var(--oxblood); }
.chapter-card { left: 8vw; top: 16vh; width: min(34rem, 78vw); color: var(--plum); transform: rotate(-2deg); z-index: 7; }
.dial { position: absolute; border-radius: 50%; border: 5px double var(--brass); background: radial-gradient(circle, var(--marble), #cda15b 56%, var(--oxblood)); color: var(--plum); font: 900 3rem var(--display); display: grid; place-items: center; box-shadow: inset 0 0 0 12px rgba(36,21,30,.2), 0 20px 60px rgba(0,0,0,.28); cursor: pointer; }
.dial::before { content: ''; position: absolute; width: 42%; height: 4px; background: var(--teal); transform-origin: right center; left: 9%; top: 50%; }
.dial-large { width: 21rem; height: 21rem; right: 13vw; top: 18vh; }
.dial-moon { width: 12rem; height: 12rem; left: 38vw; bottom: 14vh; }
.dial-sun { width: 9rem; height: 9rem; right: 8vw; bottom: 11vh; }
.cameo { position: absolute; width: 8rem; height: 11rem; border-radius: 50% 50% 44% 44%; border: 4px solid var(--brass); background: var(--marble); color: var(--teal); display: grid; place-items: center; font: 700 .8rem var(--label); letter-spacing: .2em; text-transform: uppercase; }
.cameo-left { left: 11vw; bottom: 12vh; } .cameo-right { right: 36vw; top: 12vh; }
.countdown { position: absolute; right: 38vw; bottom: 26vh; font: 900 7rem var(--display); color: rgba(241,222,194,.3); }

.maze { background: linear-gradient(120deg, var(--marble), #d9c2bd 45%, #bcaeb5); }
.maze-title { position: absolute; right: 7vw; top: 10vh; z-index: 8; text-align: right; }
.slab { position: absolute; border: 4px solid var(--oxblood); background: linear-gradient(130deg, var(--marble), #fff3df 35%, #ceb9bf); box-shadow: 20px 22px 0 rgba(74,31,26,.22), inset 0 0 0 7px rgba(193,139,54,.28); padding: 2rem; }
.slab::after { content: ''; position: absolute; inset: 0; background: linear-gradient(45deg, transparent 20%, rgba(139,124,131,.65) 20.3%, transparent 21%), linear-gradient(110deg, transparent 62%, rgba(47,117,107,.3) 62.3%, transparent 63%); animation: veinCrawl 8s ease-in-out infinite alternate-reverse; }
.slab p { position: relative; z-index: 2; padding: 1rem; border: 2px solid var(--brass); background: rgba(241,222,194,.75); }
.slab-one { left: 8vw; top: 19vh; width: 37vw; min-height: 26vh; transform: perspective(900px) rotateY(18deg) rotate(-4deg); }
.slab-two { right: 14vw; top: 39vh; width: 34vw; min-height: 25vh; transform: perspective(900px) rotateY(-20deg) rotate(5deg); }
.slab-three { left: 24vw; bottom: 10vh; width: 38vw; min-height: 21vh; transform: perspective(900px) rotateX(14deg) rotate(-1deg); }
.ornament-arrow { position: absolute; left: 6vw; bottom: 23vh; font: 700 .85rem var(--label); letter-spacing: .16em; color: var(--orange); background: var(--marble); border: 2px solid var(--brass); padding: .8rem; transform: rotate(-13deg); }
.footprints { position: absolute; right: 9vw; bottom: 14vh; font-size: 3rem; color: var(--teal); transform: rotate(-18deg); }
.keyhole { position: absolute; left: 51vw; top: 18vh; width: 4rem; height: 7rem; background: var(--plum); clip-path: polygon(50% 0, 78% 20%, 63% 47%, 76% 100%, 24% 100%, 37% 47%, 22% 20%); box-shadow: 0 0 0 8px var(--brass); }

.stair { background: linear-gradient(180deg, var(--plum), var(--oxblood) 45%, var(--marble)); color: var(--marble); }
.stair h2 { color: var(--marble); }
.horizon { opacity: .55; }
.loop-arch { position: absolute; left: 50%; bottom: -22vh; width: 78vw; height: 68vh; transform: translateX(-50%); border: 2.5rem solid rgba(241,222,194,.35); border-bottom: none; border-radius: 50% 50% 0 0; }
.stair-title { position: absolute; left: 8vw; top: 14vh; max-width: 42rem; z-index: 8; }
.spiral-stair { position: absolute; right: 9vw; top: 8vh; width: min(44rem, 84vw); height: 80vh; list-style: none; margin: 0; padding: 0; z-index: 5; }
.spiral-stair li { position: absolute; left: calc(50% + cos(var(--i) * 46deg) * 15rem); top: calc(8% + var(--i) * 10%); transform: translateX(calc(sin(var(--i) * 40deg) * -5rem)) rotate(calc(-12deg + var(--i) * 4deg)); padding: .75rem 1.2rem; background: var(--marble); color: var(--plum); border: 3px solid var(--brass); box-shadow: 8px 10px 0 rgba(36,21,30,.3); font: 700 .76rem var(--label); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.return-key { position: absolute; left: 11vw; bottom: 15vh; color: var(--plum); background: var(--brass); border: 3px solid var(--marble); padding: 1rem 1.5rem; text-decoration: none; border-radius: 999px; font: 700 .8rem var(--label); letter-spacing: .2em; text-transform: uppercase; }

@keyframes counterRotate { to { transform: rotate(-360deg); } }
@keyframes veinCrawl { from { background-position: 0 0, 0 0; } to { background-position: 70px -90px, -80px 50px; } }
@keyframes rewindRibbon { to { stroke-dashoffset: -160; } }
@keyframes bob { 50% { transform: translateY(-1rem) rotate(8deg); } }
@keyframes sealBlink { 0%, 85%, 100% { transform: scaleY(1); } 90% { transform: scaleY(.2); } }

@media (max-width: 800px) {
  .curtain { width: 18vw; }
  .marble-arch { width: 88vw; }
  .brass-plaque { width: 82vw; }
  .dial-large { width: 15rem; height: 15rem; right: 5vw; }
  .slab-one, .slab-two, .slab-three { width: 76vw; left: 12vw; right: auto; }
  .slab-two { top: 43vh; }
  .spiral-stair { right: 0; transform: scale(.75); transform-origin: top right; }
}