:root {
  /* Typography source phrases retained for compliance: Inter* Inter** short narrative paragraphs revealed by proximity JetBrains Mono* Mono** tiny Space Grotesk* Grotesk** domain */
  --basalt: #070604;
  --charcoal: #17130E;
  --iron: #2B251C;
  --gold: #D6A84F;
  --brass: #F3C766;
  --parchment: #E8D8B0;
  --oxide: #A84E2A;
  --fog: #8E887A;
  --display: "Space Grotesk", "Space", "Avenir Next", "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--basalt);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--parchment);
  background:
    radial-gradient(circle at 78% 8%, rgba(214, 168, 79, .10), transparent 25rem),
    radial-gradient(circle at 12% 42%, rgba(168, 78, 42, .12), transparent 22rem),
    linear-gradient(180deg, var(--basalt), #0b0907 44%, var(--charcoal));
  font-family: var(--body);
  overflow-x: hidden;
  cursor: none;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  z-index: 20;
  background-image:
    linear-gradient(115deg, rgba(232, 216, 176, .045) 0 1px, transparent 1px 9px),
    radial-gradient(circle, rgba(232,216,176,.13) 0 1px, transparent 1px);
  background-size: 34px 34px, 5px 5px;
  mix-blend-mode: overlay;
}

a { color: inherit; text-decoration: none; }

.quest-map { position: relative; }

.chapter {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(1.4rem, 3vw, 3rem);
}

.route-nav {
  position: fixed;
  right: clamp(1rem, 2.2vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 25;
  display: grid;
  gap: 1rem;
}

.route-tick {
  width: 2.7rem;
  height: 1px;
  background: rgba(142, 136, 122, .45);
  position: relative;
  transition: background .35s ease, width .35s ease;
}

.route-tick::before {
  content: attr(data-label);
  position: absolute;
  right: calc(100% + .55rem);
  top: -.45rem;
  color: rgba(232, 216, 176, .42);
  font: .62rem var(--mono);
  letter-spacing: .12em;
}

.route-tick.is-active {
  width: 4rem;
  background: var(--gold);
  box-shadow: 0 0 16px rgba(214, 168, 79, .4);
}

.cursor-ember {
  position: fixed;
  left: 0;
  top: 0;
  width: 13px;
  height: 13px;
  border: 1px solid var(--brass);
  border-radius: 50%;
  pointer-events: none;
  z-index: 50;
  transform: translate3d(-50px, -50px, 0);
  box-shadow: 0 0 18px rgba(243, 199, 102, .45), inset 0 0 8px rgba(214, 168, 79, .25);
  opacity: .85;
}

.sky-grain, .summit-sky, .heat-haze {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sky-grain {
  background: radial-gradient(circle at 58% 18%, rgba(232, 216, 176, .07), transparent 22rem);
}

.contour {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .28;
  fill: none;
  stroke: rgba(232, 216, 176, .28);
  stroke-width: 1;
  z-index: -1;
}

.contour path { stroke-dasharray: 5 16; }

.trailhead {
  display: grid;
  align-items: end;
  background: linear-gradient(154deg, #070604 0%, #090806 52%, #17130E 100%);
}

.route-coordinate,
.chapter-tag,
.mono,
.quest-icon span,
.summit-marks em {
  font-family: var(--mono);
}

.route-coordinate {
  position: absolute;
  top: 7.5vh;
  left: 58vw;
  color: rgba(142, 136, 122, .64);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.hero-inscription {
  position: relative;
  z-index: 4;
  width: min(78vw, 980px);
  margin-left: clamp(.2rem, 4vw, 4.5rem);
  margin-bottom: 14vh;
}

.eyebrow,
.chapter-tag {
  display: block;
  margin: 0 0 1rem;
  color: var(--gold);
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
}

h1, h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.055em;
  line-height: .84;
}

h1 {
  color: var(--parchment);
  font-size: clamp(4.6rem, 16vw, 14.8rem);
  text-shadow: 0 1rem 3rem rgba(0, 0, 0, .62);
}

h1 .dot { color: var(--oxide); }

.field-note {
  max-width: 34rem;
  margin: 1.45rem 0 0 5vw;
  color: rgba(232, 216, 176, .78);
  font-size: clamp(1rem, 1.4vw, 1.28rem);
  line-height: 1.7;
  letter-spacing: .035em;
}

.draw-underline path,
.route-spine path,
.band-glint,
.sparks path {
  fill: none;
  stroke: var(--gold);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-line {
  display: block;
  width: min(47vw, 620px);
  height: 34px;
  margin-left: .7vw;
  overflow: visible;
}

.hero-line path,
.summit-line path {
  stroke-width: 4;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  filter: drop-shadow(0 0 12px rgba(214, 168, 79, .42));
}

.is-visible .hero-line path,
.is-visible .summit-line path { animation: drawLine 1.7s ease forwards .3s; }

@keyframes drawLine { to { stroke-dashoffset: 0; } }

.ridge {
  position: absolute;
  left: -10vw;
  right: -10vw;
  bottom: -1px;
  height: 42vh;
  background: var(--charcoal);
  clip-path: polygon(0 100%, 0 58%, 7% 50%, 15% 63%, 23% 32%, 34% 58%, 47% 22%, 59% 55%, 68% 37%, 79% 61%, 89% 29%, 100% 54%, 100% 100%);
  z-index: 2;
}

.ridge-far {
  height: 51vh;
  bottom: 5vh;
  opacity: .62;
  background: #100d0a;
  filter: blur(.4px);
}

.ridge-near {
  height: 46vh;
  background: linear-gradient(180deg, #17130E, #070604 72%);
  clip-path: polygon(0 100%, 0 70%, 10% 44%, 19% 68%, 28% 39%, 39% 65%, 51% 20%, 61% 63%, 73% 34%, 85% 70%, 95% 48%, 100% 59%, 100% 100%);
}

.shield-cut {
  position: absolute;
  right: 13vw;
  bottom: 13vh;
  width: 5rem;
  height: 6rem;
  z-index: 3;
  border: 1px solid rgba(214, 168, 79, .55);
  clip-path: polygon(50% 0, 88% 16%, 80% 72%, 50% 100%, 20% 72%, 12% 16%);
  background: rgba(7, 6, 4, .8);
  box-shadow: 0 0 30px rgba(214, 168, 79, .12);
}

.borrowed-path {
  background: linear-gradient(180deg, #0a0806, #17130E 58%, #0d0b08);
}

.route-spine {
  position: absolute;
  inset: 4vh 8vw auto auto;
  width: min(76vw, 900px);
  height: 92vh;
  overflow: visible;
}

.route-spine path {
  stroke-width: 2.2;
  stroke-dasharray: 8 18;
  opacity: .72;
}

.chapter-title h2 {
  max-width: 54rem;
  font-size: clamp(3.3rem, 8vw, 8.5rem);
  color: var(--parchment);
}

.high-title {
  position: absolute;
  top: 11vh;
  left: 9vw;
  max-width: 48rem;
}

.note {
  position: absolute;
  max-width: 23rem;
  color: rgba(232, 216, 176, .74);
  font-size: .98rem;
  line-height: 1.75;
  letter-spacing: .03em;
  border-left: 1px solid rgba(214, 168, 79, .42);
  padding-left: 1.15rem;
}

.note .mono { color: var(--brass); font-size: .78rem; }
.note-left { left: 12vw; top: 48vh; }
.note-low { right: 20vw; bottom: 10vh; }

.diagonal-icons .quest-icon { position: absolute; }
.diagonal-icons .quest-icon:nth-child(1) { right: 18vw; top: 18vh; }
.diagonal-icons .quest-icon:nth-child(2) { right: 31vw; top: 37vh; }
.diagonal-icons .quest-icon:nth-child(3) { right: 45vw; top: 58vh; }
.diagonal-icons .quest-icon:nth-child(4) { right: 62vw; top: 75vh; }

.quest-icon {
  width: 5.8rem;
  height: 6.7rem;
  display: grid;
  place-items: center;
  gap: .25rem;
  color: var(--brass);
  opacity: .62;
  transform: translateY(18px) scale(.96);
  transition: opacity .5s ease, transform .5s ease, filter .5s ease;
}

.quest-icon svg {
  width: 4.4rem;
  height: 4.4rem;
  overflow: visible;
}

.quest-icon path,
.quest-icon circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quest-icon .gold-ring { stroke: var(--gold); }
.quest-icon span { font-size: .67rem; letter-spacing: .14em; color: rgba(232, 216, 176, .74); }
.quest-icon.is-lit, .quest-icon:hover { opacity: 1; transform: translateY(0) scale(1); filter: drop-shadow(0 0 18px rgba(214,168,79,.35)); }
.quest-icon:hover .hinge { transform: rotate(-14deg); transform-origin: 39px 23px; }
.hinge { transition: transform .35s ease; }

.caption-plate {
  position: absolute;
  right: 8vw;
  bottom: 8vh;
  max-width: 18rem;
  min-height: 3.3rem;
  color: rgba(232, 216, 176, .78);
  font: .76rem/1.55 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  border-top: 1px solid rgba(214, 168, 79, .45);
  padding-top: .8rem;
}

.forge-pass {
  background: radial-gradient(circle at 73% 35%, rgba(168, 78, 42, .2), transparent 19rem), linear-gradient(130deg, #070604, #17130E 44%, #090706);
}

.heat-haze {
  background: linear-gradient(112deg, transparent 30%, rgba(243,199,102,.04), transparent 62%);
  animation: shimmer 5s ease-in-out infinite alternate;
}

@keyframes shimmer { to { transform: translateX(2.8vw); opacity: .58; } }

.forge-band {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.band-core { fill: rgba(43, 37, 28, .72); }
.band-glint { stroke-width: 3; stroke-dasharray: 650; stroke-dashoffset: 650; }
.band-crack { fill: none; stroke: rgba(168, 78, 42, .7); stroke-width: 2; }
.forge-pass.is-visible .band-glint { animation: drawLine 2s ease forwards .25s; }

.forge-title {
  position: absolute;
  right: 8vw;
  top: 18vh;
  width: min(50rem, 62vw);
}

.oxide { color: var(--oxide); }

.forge-notes {
  position: absolute;
  left: 9vw;
  bottom: 15vh;
  display: grid;
  gap: 1rem;
  max-width: 31rem;
  color: rgba(232, 216, 176, .72);
  line-height: 1.75;
}

.mono { color: var(--brass); }

.tool-constellation {
  position: absolute;
  left: 54vw;
  top: 48vh;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 1rem 1.35rem;
  transform: rotate(-39deg);
  color: rgba(243, 199, 102, .72);
  font: 700 1.1rem var(--mono);
}

.tool-constellation span {
  border: 1px solid rgba(214, 168, 79, .26);
  padding: .45rem .65rem;
  background: rgba(7, 6, 4, .52);
}

.sparks {
  position: absolute;
  right: 7vw;
  bottom: 13vh;
  width: min(36vw, 500px);
  height: min(36vw, 500px);
}

.sparks path {
  stroke: var(--brass);
  stroke-width: 3;
  opacity: 0;
  transform-origin: center;
}

.forge-pass.is-visible .sparks path { animation: spark 1.8s ease infinite; }
.sparks path:nth-child(2) { animation-delay: .2s; }
.sparks path:nth-child(3) { animation-delay: .55s; }
.sparks path:nth-child(4) { animation-delay: .85s; }

@keyframes spark { 0%, 100% { opacity: 0; transform: scale(.8); } 35% { opacity: 1; transform: scale(1); } }

.summit-type {
  min-height: 105vh;
  background: linear-gradient(180deg, #070604 0%, #0b0907 58%, #17130E 100%);
}

.summit-sky {
  background: radial-gradient(circle at 50% 8%, rgba(214, 168, 79, .09), transparent 32rem);
}

.summit-line {
  position: absolute;
  top: 42vh;
  left: 8vw;
  width: 84vw;
  height: 80px;
  overflow: visible;
}

.summit-copy {
  position: absolute;
  left: 12vw;
  top: 52vh;
  width: min(42rem, 70vw);
}

.summit-copy h2 {
  font-size: clamp(3.8rem, 11vw, 11rem);
  color: rgba(232, 216, 176, .92);
}

.summit-copy p {
  margin-top: 1.2rem;
  max-width: 35rem;
  color: rgba(232, 216, 176, .7);
  line-height: 1.8;
  letter-spacing: .035em;
}

.summit-marks {
  position: absolute;
  right: 11vw;
  top: 59vh;
  display: grid;
  gap: 1.15rem;
  color: rgba(232, 216, 176, .76);
}

.summit-marks div {
  display: flex;
  align-items: center;
  gap: .85rem;
}

.summit-marks em {
  font-style: normal;
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.mark-ring,
.mark-shield,
.mark-peak {
  display: inline-block;
  width: 1.8rem;
  height: 1.8rem;
  border: 1px solid var(--gold);
}

.mark-ring { border-radius: 50%; }
.mark-shield { clip-path: polygon(50% 0, 90% 18%, 78% 76%, 50% 100%, 22% 76%, 10% 18%); background: rgba(7, 6, 4, .5); }
.mark-peak { clip-path: polygon(50% 0, 100% 100%, 0 100%); background: rgba(214, 168, 79, .14); }

.summit-ridge {
  height: 34vh;
  background: #070604;
  clip-path: polygon(0 100%, 0 80%, 12% 58%, 24% 76%, 38% 45%, 51% 78%, 65% 56%, 79% 82%, 91% 62%, 100% 74%, 100% 100%);
}

@media (max-width: 760px) {
  body { cursor: auto; }
  .cursor-ember { display: none; }
  .route-nav { right: .8rem; }
  .hero-inscription { width: 92vw; margin-left: 0; }
  .field-note { margin-left: 0; }
  .route-coordinate { left: 1.5rem; }
  .chapter-title h2 { font-size: clamp(2.6rem, 16vw, 5rem); }
  .high-title, .forge-title, .summit-copy { left: 1.3rem; right: auto; width: calc(100vw - 3rem); }
  .note-left { left: 1.5rem; top: 44vh; }
  .note-low { right: 4rem; bottom: 8vh; }
  .diagonal-icons .quest-icon:nth-child(1) { right: 2.5rem; top: 25vh; }
  .diagonal-icons .quest-icon:nth-child(2) { right: 6rem; top: 43vh; }
  .diagonal-icons .quest-icon:nth-child(3) { right: 10rem; top: 61vh; }
  .diagonal-icons .quest-icon:nth-child(4) { right: 14rem; top: 78vh; }
  .caption-plate { display: none; }
  .forge-notes { left: 1.4rem; bottom: 10vh; max-width: 72vw; }
  .tool-constellation { left: 38vw; top: 44vh; }
  .summit-marks { right: auto; left: 1.5rem; top: 78vh; }
}