:root {
  --charcoal: #1F1A17;
  --parchment: #F4EFE6;
  --brass: #BFA27A;
  --taupe: #7E6F5C;
  --oxide: #8A3D2C;
  --glass: #2E3942;
  --haze: #D8C8AA;
  --ink: #0B0908;
  --display: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  --serif: "Cormorant Garamond", Georgia, serif;
  --narrow: "Archivo Narrow", "Arial Narrow", Arial, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--parchment);
  background:
    radial-gradient(circle at 78% 16%, rgba(191, 162, 122, .10), transparent 23rem),
    radial-gradient(circle at 24% 72%, rgba(46, 57, 66, .55), transparent 32rem),
    linear-gradient(135deg, var(--ink), var(--charcoal) 52%, #120f0d);
  font-family: var(--narrow);
  overflow-x: hidden;
}

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

.lacquer-grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .47;
  background-image:
    repeating-linear-gradient(90deg, rgba(244,239,230,.018) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(0deg, rgba(191,162,122,.018) 0 1px, transparent 1px 11px),
    radial-gradient(circle at 50% 50%, transparent, rgba(11,9,8,.78));
  mix-blend-mode: screen;
}

.cursor-glint {
  position: fixed;
  width: 22px;
  height: 22px;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.4) rotate(45deg);
  transition: opacity .32s ease, transform .32s ease;
}

.cursor-glint::before,
.cursor-glint::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  background: var(--brass);
  box-shadow: 0 0 18px rgba(191,162,122,.9);
  transform: translate(-50%, -50%);
}

.cursor-glint::before { width: 22px; height: 1px; }
.cursor-glint::after { width: 1px; height: 22px; }
.cursor-glint.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(45deg); }

.edge-inscription {
  position: fixed;
  top: 50%;
  right: clamp(10px, 2vw, 30px);
  z-index: 12;
  display: flex;
  gap: 1.35rem;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: right center;
  font: 600 .68rem/1 var(--narrow);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(216, 200, 170, .66);
}

.edge-inscription a {
  border-bottom: 1px solid rgba(191,162,122,.34);
  padding-bottom: .22rem;
  transition: color .35s ease, border-color .35s ease;
}

.edge-inscription a:hover { color: var(--brass); border-color: var(--oxide); }

.atelier { position: relative; z-index: 2; }

.scene {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(8, 1fr);
  padding: clamp(1.5rem, 4vw, 5rem);
  overflow: hidden;
}

.scene::before {
  content: attr(data-scene);
  position: absolute;
  left: clamp(1.2rem, 2.5vw, 3rem);
  top: clamp(1rem, 3vw, 3rem);
  color: rgba(191,162,122,.5);
  font: 600 .72rem/1 var(--narrow);
  letter-spacing: .42em;
}

.spine-word {
  position: absolute;
  left: -4.4vw;
  top: -5vh;
  bottom: -5vh;
  display: flex;
  align-items: center;
  width: min(34vw, 390px);
  overflow: hidden;
  color: rgba(244,239,230,.94);
  filter: drop-shadow(0 0 32px rgba(191,162,122,.09));
}

.spine-word span {
  font-family: var(--display);
  font-size: clamp(8rem, 24vw, 23rem);
  line-height: .75;
  letter-spacing: .018em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.crescent {
  position: absolute;
  border: 1px solid rgba(191,162,122,.22);
  border-radius: 50%;
  pointer-events: none;
}

.crescent-one {
  width: 46rem;
  height: 46rem;
  left: 9vw;
  top: 10vh;
  box-shadow: inset 36px -22px 0 rgba(46,57,66,.12);
  opacity: .58;
}

.measuring-rule {
  grid-column: 4 / 12;
  grid-row: 2;
  align-self: end;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass), transparent);
  opacity: .8;
  display: flex;
  justify-content: space-around;
}

.measuring-rule i {
  width: 1px;
  height: 12px;
  background: rgba(191,162,122,.62);
}

.glass-pane {
  position: relative;
  border: 1px solid rgba(191,162,122,.34);
  background:
    linear-gradient(135deg, rgba(244,239,230,.15), rgba(46,57,66,.22)),
    linear-gradient(180deg, rgba(216,200,170,.11), rgba(11,9,8,.18));
  box-shadow:
    inset 0 1px 0 rgba(244,239,230,.18),
    inset 0 -22px 42px rgba(11,9,8,.16),
    0 24px 70px rgba(11,9,8,.36);
  backdrop-filter: blur(18px) saturate(1.08);
  border-radius: 2px;
  overflow: hidden;
  transition: transform .6s ease, background .6s ease, border-color .6s ease, backdrop-filter .6s ease;
}

.glass-pane::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 18% 22%, rgba(244,239,230,.13) 0 1px, transparent 1px), radial-gradient(circle at 80% 65%, rgba(191,162,122,.11) 0 1px, transparent 1px);
  background-size: 33px 29px, 47px 41px;
  pointer-events: none;
}

.glass-pane::after,
.artifact::after {
  content: attr(data-coordinate);
  position: absolute;
  right: .8rem;
  bottom: .65rem;
  color: rgba(191,162,122,0);
  font: 600 .63rem/1 var(--narrow);
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: color .45s ease;
}

.glass-pane:hover {
  transform: translateY(-8px) rotate(0deg) !important;
  border-color: rgba(191,162,122,.78);
  backdrop-filter: blur(8px) saturate(1.2);
  background: linear-gradient(135deg, rgba(244,239,230,.22), rgba(46,57,66,.29));
}

.glass-pane:hover::after,
.artifact:hover::after { color: rgba(191,162,122,.72); }

.threshold-pane {
  grid-column: 6 / 11;
  grid-row: 4 / 7;
  padding: clamp(1.5rem, 3vw, 3.4rem);
  transform: rotate(-2.5deg);
}

.specimen-label {
  display: inline-block;
  margin-bottom: 1.2rem;
  color: rgba(216,200,170,.7);
  font: 700 .68rem/1 var(--narrow);
  letter-spacing: .28em;
  text-transform: uppercase;
}

.poetry {
  margin: 0;
  color: var(--parchment);
  font: italic 500 clamp(2.3rem, 5.2vw, 6.4rem)/.88 var(--serif);
  letter-spacing: -.035em;
}

.threshold-pane small {
  display: block;
  margin-top: 1.5rem;
  color: rgba(216,200,170,.55);
  font: 600 .8rem/1.4 var(--narrow);
  letter-spacing: .2em;
  text-transform: uppercase;
}

.star-pin {
  width: 20px;
  height: 20px;
  position: absolute;
  z-index: 4;
  cursor: crosshair;
}

.star-pin::before,
.star-pin::after,
.pin::before,
.pin::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--brass);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 18px rgba(191,162,122,.72);
}

.star-pin::before { width: 20px; height: 1px; }
.star-pin::after { width: 1px; height: 20px; }

.primary-star {
  left: 34.5vw;
  top: 43vh;
  animation: singlePulse 2s .9s both;
}

.coordinate-stack {
  grid-column: 10 / 12;
  grid-row: 7;
  align-self: center;
  display: grid;
  gap: .48rem;
  color: rgba(216,200,170,.45);
  font: 600 .72rem/1 var(--narrow);
  letter-spacing: .24em;
  text-transform: uppercase;
}

.scene-workshop {
  background: radial-gradient(circle at 70% 44%, rgba(138,61,44,.11), transparent 24rem);
}

.rotated-title {
  position: absolute;
  left: 2.5vw;
  bottom: 7vh;
  margin: 0;
  transform: rotate(-90deg);
  transform-origin: left bottom;
  font: 400 clamp(4.8rem, 13vw, 13rem)/.75 var(--display);
  letter-spacing: .035em;
  color: rgba(244,239,230,.09);
}

.starfield span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 3px;
  height: 3px;
  background: var(--brass);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(191,162,122,.72);
  animation: starBlink 4.8s var(--d) infinite steps(2, end);
}

.note-pane {
  padding: 1.35rem 1.35rem 2.8rem;
  min-height: 210px;
}

.note-pane h3 {
  margin: .2rem 0 1rem;
  color: var(--parchment);
  font: 400 clamp(2.3rem, 5vw, 5.4rem)/.78 var(--display);
  letter-spacing: .04em;
}

.note-pane p {
  margin: 0;
  max-width: 25rem;
  color: rgba(244,239,230,.74);
  font: 500 clamp(1rem, 1.45vw, 1.28rem)/1.35 var(--serif);
}

.pin {
  position: absolute;
  right: 1.2rem;
  top: 1.1rem;
  width: 14px;
  height: 14px;
}

.pin::before { width: 14px; height: 1px; }
.pin::after { width: 1px; height: 14px; }

.wax-seal {
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #8A3D2C, #5b251b 70%);
  box-shadow: inset 0 0 0 1px rgba(216,200,170,.18), 0 8px 24px rgba(11,9,8,.34);
}

.pane-prototype { grid-column: 4 / 8; grid-row: 2 / 4; transform: rotate(1.8deg); }
.pane-signal { grid-column: 8 / 12; grid-row: 3 / 5; transform: rotate(-2.2deg); }
.pane-ritual { grid-column: 3 / 7; grid-row: 5 / 8; transform: rotate(-1.2deg); }
.pane-compile { grid-column: 7 / 10; grid-row: 6 / 8; transform: rotate(2.7deg); }

.scene-ledger {
  background: linear-gradient(180deg, rgba(46,57,66,.06), rgba(11,9,8,.22));
}

.ledger-heading {
  grid-column: 2 / 7;
  grid-row: 2 / 4;
  z-index: 2;
}

.ledger-heading span,
.artifact span {
  color: var(--brass);
  font: 700 .74rem/1 var(--narrow);
  letter-spacing: .32em;
  text-transform: uppercase;
}

.ledger-heading h2 {
  margin: .8rem 0 0;
  color: var(--parchment);
  font: italic 500 clamp(2rem, 5.2vw, 5.8rem)/.9 var(--serif);
  letter-spacing: -.045em;
}

.constellation {
  position: absolute;
  inset: 6vh 3vw 8vh 8vw;
  z-index: 1;
}

.constellation-thread {
  fill: none;
  stroke: rgba(191,162,122,.46);
  stroke-width: 1.15;
  stroke-dasharray: 8 12;
}

.node { fill: var(--brass); filter: drop-shadow(0 0 8px rgba(191,162,122,.8)); }

.artifact {
  position: relative;
  z-index: 3;
  display: grid;
  gap: .55rem;
  padding: 1rem 1rem 2.3rem;
  width: min(19vw, 235px);
  min-width: 160px;
  border: 1px solid rgba(191,162,122,.28);
  background: linear-gradient(135deg, rgba(244,239,230,.13), rgba(46,57,66,.24));
  backdrop-filter: blur(14px);
  box-shadow: 0 22px 54px rgba(11,9,8,.35);
  transition: transform .45s ease, border-color .45s ease;
}

.artifact:hover { transform: translateY(-9px) rotate(0deg) !important; border-color: rgba(191,162,122,.72); }

.artifact strong {
  color: rgba(244,239,230,.84);
  font: 500 1.35rem/1.05 var(--serif);
}

.artifact-one { grid-column: 2 / 4; grid-row: 6; transform: rotate(-4deg); }
.artifact-two { grid-column: 5 / 7; grid-row: 3; transform: rotate(2deg); }
.artifact-three { grid-column: 9 / 11; grid-row: 2; transform: rotate(-2deg); }
.artifact-four { grid-column: 10 / 12; grid-row: 5; transform: rotate(3deg); }

.cursor-comet {
  grid-column: 7 / 9;
  grid-row: 6;
  width: 90px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass));
  transform: rotate(-28deg);
}

.cursor-comet::after {
  content: "";
  position: absolute;
  right: -6px;
  top: -6px;
  width: 0;
  height: 0;
  border-left: 13px solid var(--brass);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.scene-spark {
  place-items: center;
  background: radial-gradient(circle at 48% 52%, rgba(191,162,122,.12), transparent 18rem), linear-gradient(180deg, transparent, var(--ink));
}

.final-plate {
  grid-column: 4 / 10;
  grid-row: 3 / 7;
  text-align: center;
  position: relative;
  z-index: 3;
}

.monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .055em;
  color: var(--parchment);
  font: 400 clamp(4.5rem, 15vw, 15rem)/.75 var(--display);
  letter-spacing: .015em;
}

.monogram span {
  display: inline-block;
  transform: translateY(22vh) scaleY(.25);
  opacity: 0;
  transition: transform .9s cubic-bezier(.2,.9,.2,1), opacity .65s ease;
  transition-delay: calc(var(--i) * 85ms);
}

.monogram em {
  width: .12em;
  height: .12em;
  margin: 0 .03em;
  transform: rotate(45deg) scale(.4);
  opacity: 0;
  border-top: 2px solid var(--brass);
  border-left: 2px solid var(--brass);
  box-shadow: 0 0 28px rgba(191,162,122,.8);
  transition: opacity .6s ease .62s, transform .8s ease .62s;
}

.scene-spark.is-awake .monogram span { transform: translateY(0) scaleY(1); opacity: 1; }
.scene-spark.is-awake .monogram em { opacity: 1; transform: rotate(45deg) scale(1); }

.final-plate p {
  max-width: 32rem;
  margin: 1rem auto 0;
  color: rgba(216,200,170,.68);
  font: italic 500 1.35rem/1.35 var(--serif);
}

.vertical-mark {
  grid-column: 2 / 3;
  grid-row: 3 / 7;
  display: flex;
  gap: .7rem;
  height: 52vh;
}

.vertical-mark i {
  width: 1px;
  height: 100%;
  background: linear-gradient(transparent, var(--brass), transparent);
}

.last-star { left: 50%; top: 63%; }

.reveal {
  opacity: 0;
  transform: translateY(34px) rotate(var(--start-rotate, 0deg));
  filter: blur(8px);
  transition: opacity .9s ease, transform 1.05s cubic-bezier(.2,.9,.2,1), filter .9s ease;
  transition-delay: var(--delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) rotate(var(--end-rotate, 0deg));
  filter: blur(0);
}

.pane-prototype { --end-rotate: 1.8deg; }
.pane-signal { --end-rotate: -2.2deg; }
.pane-ritual { --end-rotate: -1.2deg; }
.pane-compile { --end-rotate: 2.7deg; }
.threshold-pane { --end-rotate: -2.5deg; }

@keyframes singlePulse {
  0% { transform: scale(.55) rotate(45deg); opacity: 0; }
  45% { transform: scale(1.35) rotate(45deg); opacity: 1; }
  100% { transform: scale(1) rotate(45deg); opacity: .86; }
}

@keyframes starBlink {
  0%, 100% { opacity: .25; }
  50% { opacity: 1; }
}

@media (max-width: 850px) {
  .edge-inscription { display: none; }
  .scene { min-height: auto; padding: 5rem 1.2rem; display: block; }
  .scene + .scene { padding-top: 7rem; }
  .spine-word { position: relative; left: auto; top: auto; bottom: auto; width: 100%; height: 34vh; }
  .spine-word span { writing-mode: initial; transform: none; font-size: clamp(6rem, 30vw, 12rem); }
  .measuring-rule, .coordinate-stack { margin: 1.5rem 0; }
  .glass-pane, .artifact, .ledger-heading, .final-plate { width: 100%; margin: 1rem 0; }
  .threshold-pane, .note-pane, .artifact { transform: rotate(0deg); }
  .rotated-title { position: relative; left: auto; bottom: auto; transform: none; font-size: 5.5rem; }
  .constellation { inset: 12% -18% auto -24%; height: 55vh; opacity: .5; }
  .monogram { font-size: clamp(4rem, 19vw, 8rem); }
  .vertical-mark { display: none; }
}