:root {
  --midnight: #061224;
  --carbon: #111820;
  --teal: #39F5C4;
  --violet: #7D5CFF;
  --platinum: #D8D2C4;
  --gold: #C8A45D;
  --burgundy: #3A1026;
  --display: "Jost", "Futura", sans-serif;
  --body: "Manrope", "Inter", sans-serif;
  --mono: "IBM Plex Mono", monospace;
  --ledger-font-note: "Mono”";
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  color: var(--platinum);
  font-family: var(--body);
  background: var(--midnight);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    linear-gradient(90deg, rgba(200,164,93,.16) 1px, transparent 1px),
    linear-gradient(0deg, rgba(216,210,196,.035) 1px, transparent 1px);
  background-size: 8.333vw 100%, 100% 24px;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.material-field {
  position: fixed;
  inset: -10%;
  z-index: 0;
  background:
    radial-gradient(circle at 70% 20%, rgba(57,245,196,.22), transparent 38%),
    linear-gradient(115deg, rgba(125,92,255,.22), rgba(6,18,36,0) 52%),
    radial-gradient(circle at 20% 75%, rgba(58,16,38,.58), transparent 34%),
    radial-gradient(circle at 12% 12%, rgba(216,210,196,.06) 0 1px, transparent 2px),
    radial-gradient(circle at 64% 48%, rgba(216,210,196,.05) 0 1px, transparent 2px),
    linear-gradient(135deg, var(--midnight), var(--carbon));
  background-size: auto, auto, auto, 18px 18px, 23px 23px, auto;
  filter: saturate(1.05) contrast(1.08);
  transform: translate3d(0,0,0);
}

.material-field::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .25;
  background:
    repeating-linear-gradient(74deg, rgba(216,210,196,.035) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(16deg, rgba(0,0,0,.18) 0 2px, transparent 2px 7px);
  mix-blend-mode: overlay;
}

.aurora {
  position: fixed;
  left: -20vw;
  width: 140vw;
  height: 34vh;
  z-index: 2;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(24px);
  mix-blend-mode: screen;
  opacity: .7;
  transform: rotate(-13deg);
}

.aurora-one {
  top: 9vh;
  background: linear-gradient(95deg, transparent 8%, rgba(57,245,196,.04), rgba(57,245,196,.46), rgba(125,92,255,.34), transparent 78%);
  animation: auroraDrift 16s ease-in-out infinite alternate;
}

.aurora-two {
  bottom: 12vh;
  background: linear-gradient(105deg, transparent 12%, rgba(125,92,255,.33), rgba(57,245,196,.24), rgba(200,164,93,.13), transparent 82%);
  animation: auroraDrift 21s ease-in-out infinite alternate-reverse;
}

.market-constellation {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: .34;
  background-image:
    radial-gradient(circle at var(--p1x, 14%) var(--p1y, 24%), var(--gold) 0 1px, transparent 2px),
    radial-gradient(circle at var(--p2x, 52%) var(--p2y, 40%), var(--teal) 0 1px, transparent 2px),
    radial-gradient(circle at var(--p3x, 84%) var(--p3y, 62%), var(--violet) 0 1px, transparent 2px),
    radial-gradient(circle at 31% 76%, var(--platinum) 0 1px, transparent 2px);
}

.global-gutter {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 8;
  width: 3.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7vh 0;
  color: rgba(216,210,196,.48);
  font: 500 .64rem/1 var(--mono);
  letter-spacing: .17em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.left-gutter { left: 0; border-right: 1px solid rgba(200,164,93,.28); }
.right-gutter { right: 0; border-left: 1px solid rgba(200,164,93,.28); }

.magazine { position: relative; z-index: 5; }

.spread {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 1.35vw;
  padding: 7vh 8vw 7vh;
  overflow: hidden;
  border-bottom: 1px solid rgba(200,164,93,.16);
}

.spread::before {
  content: "";
  position: absolute;
  inset: 5vh 7vw;
  border: 1px solid rgba(200,164,93,.16);
  pointer-events: none;
  box-shadow: inset 0 0 60px rgba(0,0,0,.25);
}

.folio {
  position: absolute;
  top: 7vh;
  left: 8vw;
  z-index: 4;
  font: 600 .74rem/1 var(--mono);
  letter-spacing: .22em;
  color: var(--gold);
  text-transform: uppercase;
}

.page-crease {
  position: absolute;
  top: 5vh;
  bottom: 5vh;
  left: 50%;
  width: 1px;
  background: linear-gradient(transparent, rgba(200,164,93,.7), rgba(216,210,196,.18), transparent);
  box-shadow: 0 0 26px rgba(200,164,93,.28);
  transform-origin: center;
}

.cover-label, .kicker, .margin-note, .marginalia, .ticker-strip, .final-ledger {
  font-family: var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.cover-label {
  grid-column: 1 / 7;
  align-self: start;
  margin-top: 8vh;
  color: rgba(216,210,196,.68);
  font-size: .72rem;
}

.masthead {
  grid-column: 1 / 9;
  align-self: center;
  margin: 0 0 0 -1.2vw;
  color: var(--platinum);
  font-family: var(--display);
  font-size: clamp(5.6rem, 16vw, 18rem);
  font-weight: 800;
  line-height: .74;
  letter-spacing: -.075em;
  text-transform: uppercase;
  text-shadow: 0 0 42px rgba(57,245,196,.08), 0 2px 0 rgba(200,164,93,.23);
}

.shimmer {
  background: linear-gradient(100deg, var(--platinum) 0 38%, #fff8df 46%, var(--gold) 50%, var(--platinum) 58% 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: foilSweep 2.1s cubic-bezier(.7,0,.2,1) .25s 1 both;
}

.cover-deck {
  grid-column: 2 / 5;
  align-self: end;
  max-width: 27rem;
  margin: 0 0 8vh;
  font-size: clamp(1rem, 1.4vw, 1.35rem);
  line-height: 1.65;
  color: rgba(216,210,196,.78);
}

.cover-art {
  grid-column: 8 / 13;
  grid-row: 1 / span 3;
  align-self: center;
  justify-self: center;
  width: min(31vw, 430px);
  aspect-ratio: 4 / 5;
  position: relative;
  transition: transform .5s ease;
}

.seal {
  position: absolute;
  display: grid;
  place-items: center;
  width: 10rem;
  height: 10rem;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold);
  font: 700 1.45rem/1.05 var(--display);
  text-align: center;
  letter-spacing: .14em;
  box-shadow: inset 0 0 30px rgba(200,164,93,.14), 0 0 36px rgba(200,164,93,.12);
}

.seal small { display: block; margin-top: .5rem; font: 500 .5rem/1 var(--mono); letter-spacing: .2em; }

.cover-art .seal { top: 5%; right: 2%; z-index: 3; }

.diamond-facet {
  position: absolute;
  inset: 24% 18% 12% 9%;
  background:
    linear-gradient(135deg, rgba(216,210,196,.08), transparent 45%),
    linear-gradient(45deg, rgba(57,245,196,.22), transparent 40%),
    var(--carbon);
  clip-path: polygon(50% 0, 92% 25%, 80% 82%, 49% 100%, 13% 78%, 4% 25%);
  border: 1px solid rgba(216,210,196,.2);
  filter: drop-shadow(0 28px 42px rgba(0,0,0,.45));
}

.diamond-facet::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 0 34%, rgba(200,164,93,.32), transparent 52%), linear-gradient(160deg, transparent 0 46%, rgba(125,92,255,.25), transparent 66%);
}

.certificate {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 72%;
  padding: 1.2rem;
  border: 1px solid rgba(200,164,93,.42);
  background: linear-gradient(145deg, rgba(216,210,196,.12), rgba(17,24,32,.78));
  backdrop-filter: blur(9px);
  box-shadow: 0 26px 70px rgba(0,0,0,.35);
}

.certificate span, .certificate em, .vellum-sheet span, .vellum-sheet p { display: block; font: 500 .62rem/1.7 var(--mono); letter-spacing: .15em; text-transform: uppercase; color: rgba(216,210,196,.62); }
.certificate strong, .vellum-sheet strong { display: block; margin: .6rem 0; color: var(--gold); font: 700 1.45rem/1 var(--display); letter-spacing: .08em; }

.margin-note { position: absolute; right: 8vw; bottom: 7vh; color: rgba(200,164,93,.68); font-size: .64rem; }
.ticker-strip { position: absolute; left: 8vw; right: 8vw; bottom: 3vh; color: rgba(57,245,196,.62); font-size: .65rem; white-space: nowrap; }

.spread-copy { grid-column: 1 / 6; align-self: center; max-width: 38rem; }
.spread-copy h2, .market-columns h2, .closing-copy h2 {
  margin: .8rem 0 1.6rem;
  font: 700 clamp(2.7rem, 6.2vw, 7.8rem)/.88 var(--display);
  letter-spacing: -.055em;
  text-transform: uppercase;
  color: var(--platinum);
}
.spread-copy p, .market-columns p, .closing-copy p {
  color: rgba(216,210,196,.76);
  font-size: clamp(1rem, 1.18vw, 1.24rem);
  line-height: 1.75;
}
.kicker { color: var(--gold); font-size: .68rem; }
blockquote { margin: 2rem 0 0; padding-left: 1.2rem; border-left: 1px solid var(--gold); color: rgba(57,245,196,.9); font: 500 1.35rem/1.45 var(--body); }

.origin-art { grid-column: 7 / 13; position: relative; align-self: center; min-height: 62vh; }
.pressure-rings { position: absolute; inset: 7% 10%; border-radius: 50%; background: repeating-radial-gradient(circle, rgba(200,164,93,.38) 0 1px, transparent 1px 24px); opacity: .55; animation: breathe 7s ease-in-out infinite; }
.graphite-field span { position: absolute; width: 6rem; height: 3.2rem; background: linear-gradient(135deg, rgba(216,210,196,.12), rgba(17,24,32,.98)); clip-path: polygon(12% 0, 94% 18%, 73% 94%, 0 72%); box-shadow: 0 22px 50px rgba(0,0,0,.42); }
.graphite-field span:nth-child(1){left:18%;top:18%;}.graphite-field span:nth-child(2){left:58%;top:28%;transform:rotate(32deg)}.graphite-field span:nth-child(3){left:34%;top:48%;transform:rotate(-19deg)}.graphite-field span:nth-child(4){left:71%;top:61%;transform:rotate(12deg)}.graphite-field span:nth-child(5){left:11%;top:66%;transform:rotate(44deg)}.graphite-field span:nth-child(6){left:49%;top:10%;transform:rotate(-44deg)}
.caption-card { position: absolute; right: 5%; bottom: 8%; padding: 1rem 1.2rem; border-top: 1px solid var(--gold); color: rgba(216,210,196,.72); font: 500 .72rem/1.6 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.caption-card strong { color: var(--gold); }

.marginalia { position: absolute; top: 50%; right: 4.5vw; transform: translateY(-50%) rotate(90deg); transform-origin: center; color: rgba(216,210,196,.42); font-size: .62rem; }

.market-columns { grid-column: 1 / 7; align-self: center; display: grid; grid-template-columns: 1.2fr .8fr; gap: 2rem; }
.market-columns > div:first-child { grid-column: 1 / -1; }
.ledger-panel { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(200,164,93,.55); border-bottom: 1px solid rgba(200,164,93,.34); background: rgba(17,24,32,.44); transition: transform .5s ease; }
.ledger-panel div { padding: 1.1rem .9rem; border-right: 1px solid rgba(200,164,93,.2); }
.ledger-panel span, .ledger-panel em { display: block; font: 500 .58rem/1 var(--mono); letter-spacing: .18em; color: rgba(216,210,196,.55); text-transform: uppercase; }
.ledger-panel strong { display: block; margin: .7rem 0; color: var(--platinum); font: 700 clamp(1.3rem,2vw,2.2rem)/1 var(--display); }
.ledger-panel em { color: var(--teal); font-style: normal; }

.curve-stage { grid-column: 8 / 13; align-self: center; position: relative; min-height: 58vh; border-left: 1px solid rgba(200,164,93,.26); border-bottom: 1px solid rgba(200,164,93,.26); }
.market-curve { position: absolute; inset: 5%; width: 90%; height: 90%; overflow: visible; }
.market-curve path { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 720; animation: curveDraw 8s ease-in-out infinite; filter: drop-shadow(0 0 14px rgba(200,164,93,.35)); }
.market-curve circle { fill: var(--teal); filter: drop-shadow(0 0 10px rgba(57,245,196,.8)); }
.glint { position: absolute; width: 7rem; height: 1px; background: linear-gradient(90deg, transparent, var(--teal), transparent); filter: blur(.4px); animation: glintSlide 5s ease-in-out infinite; }
.glint-a { top: 35%; left: 16%; transform: rotate(-22deg); }
.glint-b { top: 63%; right: 8%; transform: rotate(18deg); animation-delay: 1.5s; }

.vault-art { grid-column: 1 / 7; align-self: center; position: relative; min-height: 68vh; }
.capsule { position: absolute; width: 12rem; height: 28rem; border-radius: 999px; background: linear-gradient(90deg, rgba(216,210,196,.14), rgba(17,24,32,1) 35%, rgba(57,245,196,.1), rgba(0,0,0,.72)); border: 1px solid rgba(200,164,93,.28); box-shadow: inset 24px 0 60px rgba(0,0,0,.44), 0 30px 80px rgba(0,0,0,.42); }
.capsule-one { left: 18%; top: 5%; transform: rotate(-12deg); }
.capsule-two { left: 43%; top: 16%; transform: rotate(16deg); opacity: .78; }
.vellum-sheet { position: absolute; left: 10%; bottom: 4%; width: 62%; padding: 1.5rem; background: linear-gradient(135deg, rgba(216,210,196,.2), rgba(216,210,196,.06)); border: 1px solid rgba(216,210,196,.24); backdrop-filter: blur(10px); }
.vault-seal { right: 12%; bottom: 9%; transform: rotate(8deg); }
.narrow-copy { grid-column: 8 / 13; }

.closing-spread { align-items: center; }
.horizon { grid-column: 1 / 13; align-self: end; height: 34vh; background: radial-gradient(ellipse at 50% 0, rgba(57,245,196,.3), transparent 55%), linear-gradient(180deg, transparent, rgba(17,24,32,.92)); border-top: 1px solid rgba(200,164,93,.28); box-shadow: inset 0 18px 35px rgba(57,245,196,.06); }
.closing-copy { grid-column: 2 / 8; grid-row: 1; align-self: center; max-width: 54rem; }
.inscription { display: inline-block; margin-top: 1.4rem; color: var(--gold); text-decoration: none; font: 600 .72rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; border-bottom: 1px solid rgba(200,164,93,.62); padding-bottom: .45rem; }
.final-ledger { position: absolute; right: 8vw; bottom: 12vh; color: rgba(216,210,196,.54); font-size: .68rem; }

@keyframes foilSweep { 0% { background-position: 150% 0; } 100% { background-position: -40% 0; } }
@keyframes auroraDrift { from { transform: translate3d(-4vw, -1vh, 0) rotate(-13deg) scale(1); } to { transform: translate3d(6vw, 3vh, 0) rotate(-9deg) scale(1.04); } }
@keyframes breathe { 0%,100% { transform: scale(.96); opacity: .44; } 50% { transform: scale(1.04); opacity: .72; } }
@keyframes curveDraw { 0% { stroke-dashoffset: 720; opacity: .32; } 45%,70% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: -720; opacity: .24; } }
@keyframes glintSlide { 0%,100% { opacity: 0; translate: -20px 12px; } 45% { opacity: .95; } 70% { opacity: 0; translate: 70px -24px; } }

@media (max-width: 900px) {
  .global-gutter { display: none; }
  .spread { grid-template-columns: repeat(6, 1fr); padding: 6rem 6vw; }
  .spread::before { inset: 4rem 4vw; }
  .page-crease { left: 4vw; opacity: .55; }
  .masthead, .cover-label, .cover-deck, .spread-copy, .market-columns, .curve-stage, .vault-art, .narrow-copy, .horizon, .closing-copy { grid-column: 1 / -1; }
  .cover-art { grid-column: 1 / -1; grid-row: auto; width: min(82vw, 380px); margin: 2rem auto; }
  .origin-art { grid-column: 1 / -1; min-height: 45vh; }
  .market-columns { grid-template-columns: 1fr; }
  .ledger-panel { grid-template-columns: repeat(2, 1fr); }
  .marginalia { display: none; }
}