:root {
  /* Design typography token: Inter* Inter** in 400/500/700 for clean studio language. */
  --ink: #101014;
  --porcelain: #F5F1EA;
  --rose: #FF2E88;
  --violet: #5B35D5;
  --marble: #BFC0C7;
  --acid: #D7FF4F;
  --display: "Poppins", "Jost", Futura, "Trebuchet MS", sans-serif;
  --body: "Inter", sans-serif;
  --serif: "Cormorant Garamond", serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--porcelain);
  font-family: var(--body);
  overflow-x: hidden;
}

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

.romance-canvas {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .75;
}

.cursor-trace {
  position: fixed;
  width: 18px;
  height: 18px;
  border: 1px solid var(--acid);
  border-radius: 50%;
  z-index: 50;
  pointer-events: none;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 28px rgba(215, 255, 79, .35);
}

.site-chrome {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  padding: 18px 28px;
  color: var(--porcelain);
  mix-blend-mode: difference;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.chrome-mark, .folio { font-family: var(--display); font-weight: 700; }
.folio { justify-self: end; color: var(--acid); }

.scene-nav { display: flex; gap: 18px; }
.scene-nav a { opacity: .55; transition: opacity .25s ease, color .25s ease; }
.scene-nav a.is-active, .scene-nav a:hover { opacity: 1; color: var(--rose); }

.scene {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
}

.dark-scene {
  background:
    radial-gradient(circle at 78% 20%, rgba(91, 53, 213, .28), transparent 34%),
    radial-gradient(circle at 15% 80%, rgba(255, 46, 136, .18), transparent 34%),
    var(--ink);
}

.paper-scene {
  background:
    linear-gradient(135deg, rgba(191, 192, 199, .55) 0 1px, transparent 1px 28px),
    var(--porcelain);
  color: var(--ink);
}

.reception { overflow: hidden; }

.reception-grid {
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 18vh auto 1fr;
  gap: 18px;
  padding: 72px 36px 36px;
}

.hero-title {
  grid-column: 1 / 12;
  grid-row: 2;
  margin: 0 0 0 -3vw;
  font-family: var(--display);
  font-size: clamp(82px, 18vw, 260px);
  line-height: .76;
  letter-spacing: -.085em;
  font-weight: 800;
  color: var(--porcelain);
  transform: translateY(5vh);
}

.hero-subtitle {
  grid-column: 8 / 12;
  grid-row: 3;
  align-self: start;
  max-width: 470px;
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.1;
}

.hero-subtitle em, .film-quote { font-family: var(--serif); font-style: italic; }

.margin-note, .caption, .eyebrow, .slab-caption, .credit-list, .annotation span, .contact-strip {
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.top-note { grid-column: 2 / 6; grid-row: 1; color: var(--marble); }
.side-note { position: absolute; right: 34px; bottom: 26vh; writing-mode: vertical-rl; color: var(--marble); }

.marble-slab {
  background:
    linear-gradient(110deg, rgba(245, 241, 234, .96), rgba(191, 192, 199, .78)),
    repeating-linear-gradient(128deg, transparent 0 22px, rgba(16, 16, 20, .18) 23px, transparent 25px),
    var(--marble);
  border: 1px solid rgba(245, 241, 234, .35);
  box-shadow: 0 34px 90px rgba(0, 0, 0, .45), 18px 18px 0 rgba(91, 53, 213, .45);
}

.hero-slab {
  grid-column: 2 / 9;
  grid-row: 3;
  min-height: 260px;
  position: relative;
  transform: translateY(0) rotate(-1deg);
  transition: transform .2s linear;
}

.slab-line { position: absolute; inset: 0; width: 100%; height: 100%; }
.slab-line path { fill: none; stroke: var(--rose); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 18 18; animation: searchLine 7s linear infinite; }
.slab-line path + path { stroke: var(--violet); stroke-width: 1.5; animation-duration: 11s; }
.slab-caption { position: absolute; left: 18px; bottom: 16px; color: var(--ink); max-width: 340px; }

.seal {
  grid-column: 11 / 13;
  grid-row: 1;
  justify-self: end;
  align-self: end;
  width: 108px;
  height: 108px;
  border: 1px solid var(--rose);
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--rose);
  font: 700 10px/1.1 var(--display);
  letter-spacing: .12em;
  transform: rotate(13deg);
}

.editorial-plate {
  min-height: 110vh;
  padding: 96px 36px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  overflow: hidden;
}

.plate-spine {
  grid-column: 1 / 3;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.03em;
}

.plate-spine span, .scene-number {
  font-family: var(--display);
  font-size: clamp(84px, 13vw, 190px);
  line-height: .8;
  letter-spacing: -.08em;
  color: var(--rose);
}

.plate-copy { grid-column: 3 / 8; align-self: center; }
.plate-copy h2, .wide-title h2, .gesture-copy h2, .split-columns h2, .end-credits h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(48px, 8vw, 132px);
  line-height: .82;
  letter-spacing: -.07em;
}

.plate-copy p:not(.eyebrow), .split-columns p:not(.eyebrow), .closing-copy {
  max-width: 620px;
  font-size: clamp(17px, 1.45vw, 24px);
  line-height: 1.35;
}

.eyebrow { color: var(--rose); font-weight: 700; }
.annotation { grid-column: 9 / 12; align-self: start; background: var(--ink); color: var(--porcelain); padding: 24px; margin-top: 16vh; position: relative; }
.annotation::after { content: "underside: first draft still warm"; position: absolute; left: 18px; bottom: -22px; color: var(--violet); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; opacity: 0; transition: opacity .25s ease; }
.annotation:hover::after { opacity: 1; }

.hover-lift { transition: transform .28s ease, box-shadow .28s ease; }
.hover-lift:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: 18px 24px 0 rgba(91, 53, 213, .45); }

.proof-stack { grid-column: 7 / 12; align-self: end; height: 320px; position: relative; }
.proof-sheet { position: absolute; width: 58%; min-height: 210px; padding: 26px; border: 1px solid var(--ink); font: 800 30px/.88 var(--display); letter-spacing: -.05em; }
.proof-sheet em { display: block; margin-top: 70px; font: italic 600 24px var(--serif); letter-spacing: 0; }
.sheet-a { left: 0; top: 35px; background: var(--marble); transform: rotate(-5deg); }
.sheet-b { right: 0; top: 0; background: var(--acid); transform: rotate(4deg); }

.marble-room { grid-template-rows: auto 1fr; }
.scene-number { position: absolute; top: 78px; right: 32px; opacity: .9; }
.wide-title { grid-column: 1 / 8; align-self: start; z-index: 2; }
.marble-board { grid-column: 4 / 11; min-height: 54vh; align-self: center; position: relative; padding: 28px; background: linear-gradient(120deg, #F5F1EA, #BFC0C7 48%, #101014 49%, #24242b); color: var(--ink); }
.bust-fragment { position: absolute; right: 10%; top: 12%; width: 210px; height: 300px; background: radial-gradient(circle at 50% 18%, #F5F1EA 0 32px, transparent 33px), linear-gradient(90deg, transparent 0 38%, #F5F1EA 39% 63%, transparent 64%), radial-gradient(ellipse at 50% 82%, #BFC0C7 0 80px, transparent 82px); opacity: .78; filter: contrast(1.15); }
.vein-map span { position: absolute; height: 2px; background: var(--rose); transform-origin: left; box-shadow: 0 0 18px var(--rose); }
.vein-map span:nth-child(1) { width: 70%; left: 8%; top: 28%; transform: rotate(12deg); }
.vein-map span:nth-child(2) { width: 55%; left: 18%; top: 46%; transform: rotate(-20deg); background: var(--violet); }
.vein-map span:nth-child(3) { width: 48%; left: 29%; top: 66%; transform: rotate(18deg); }
.vein-map span:nth-child(4) { width: 32%; left: 10%; top: 77%; transform: rotate(-8deg); background: var(--acid); }
.marble-board .caption { position: absolute; left: 28px; bottom: 24px; max-width: 360px; }
.film-quote { grid-column: 2 / 6; align-self: end; font-size: clamp(34px, 5vw, 76px); line-height: .94; color: var(--porcelain); margin: 0; z-index: 2; }

.gesture-copy { grid-column: 3 / 9; }
.gesture-lab { grid-column: 3 / 12; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
.orbital { min-height: 430px; position: relative; border: 1px solid var(--ink); background: radial-gradient(circle, rgba(255,46,136,.22), transparent 34%), var(--ink); overflow: hidden; }
.orbital span { position: absolute; inset: 14%; border: 1px solid var(--rose); border-radius: 50%; animation: orbit 12s linear infinite; }
.orbital span:nth-child(2) { inset: 24% 9%; border-color: var(--acid); animation-duration: 9s; animation-direction: reverse; }
.orbital span:nth-child(3) { inset: 8% 28%; border-color: var(--violet); animation-duration: 15s; }
.orbital i { position: absolute; width: 18px; height: 18px; background: var(--rose); border-radius: 50%; left: 50%; top: 50%; box-shadow: 0 0 40px var(--rose); }
.redacted-letter { min-height: 360px; padding: 34px; background: var(--porcelain); border: 1px solid var(--ink); font-family: var(--serif); font-size: clamp(28px, 3.5vw, 58px); line-height: .95; }
.redacted-letter small { display: block; margin-top: 50px; font: 700 11px var(--body); letter-spacing: .14em; color: var(--rose); }
.contact-strip { grid-column: 2 / 12; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; color: var(--porcelain); }
.contact-strip span { min-height: 86px; background: var(--ink); padding: 10px; border: 1px solid var(--marble); }

.chemistry-cut { align-items: center; }
.split-columns { grid-column: 2 / 12; display: grid; grid-template-columns: 5fr 7fr; gap: 40px; align-items: center; }
.acetate-stage { min-height: 520px; position: relative; border: 1px solid rgba(245,241,234,.25); }
.acetate { position: absolute; width: 58%; height: 48%; display: grid; place-items: center; font: 800 clamp(42px, 7vw, 110px)/1 var(--display); letter-spacing: -.08em; border: 1px solid currentColor; backdrop-filter: blur(4px); }
.acetate-one { left: 5%; top: 8%; color: var(--rose); background: rgba(255,46,136,.12); transform: rotate(-7deg); }
.acetate-two { right: 5%; top: 24%; color: var(--acid); background: rgba(215,255,79,.1); transform: rotate(5deg); }
.acetate-three { left: 22%; bottom: 8%; color: var(--marble); background: rgba(191,192,199,.13); transform: rotate(-1deg); }
.ticker { position: absolute; left: 0; right: 0; bottom: 44px; overflow: hidden; color: var(--rose); font: 800 14px var(--display); letter-spacing: .18em; white-space: nowrap; }
.ticker span { display: inline-block; min-width: 200%; animation: ticker 16s linear infinite; }

.end-credits { min-height: 100vh; align-items: center; }
.credits-grid { grid-column: 2 / 12; display: grid; grid-template-columns: repeat(10, 1fr); gap: 24px; }
.credits-grid .eyebrow { grid-column: 1 / 5; }
.end-credits h2 { grid-column: 1 / 9; color: var(--ink); }
.closing-copy { grid-column: 2 / 7; }
.trace-link { grid-column: 8 / 11; align-self: center; justify-self: start; padding: 18px 22px; border: 1px solid var(--ink); background: var(--acid); color: var(--ink); font: 800 16px var(--display); letter-spacing: .08em; text-transform: uppercase; }
.credit-list { grid-column: 1 / 11; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; border-top: 1px solid var(--ink); padding-top: 18px; }

.reveal-block { opacity: 0; transform: translateY(40px) skewY(1deg); transition: opacity .7s ease, transform .7s ease; }
.reveal-block.is-visible { opacity: 1; transform: translateY(0) skewY(0); }

@keyframes searchLine { to { stroke-dashoffset: -180; } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes ticker { to { transform: translateX(-50%); } }

@media (max-width: 900px) {
  .site-chrome { grid-template-columns: 1fr auto; }
  .scene-nav { display: none; }
  .reception-grid, .editorial-plate { grid-template-columns: repeat(6, 1fr); padding-left: 22px; padding-right: 22px; }
  .hero-title, .hero-slab, .hero-subtitle, .top-note, .plate-copy, .proof-stack, .wide-title, .marble-board, .film-quote, .gesture-copy, .gesture-lab, .contact-strip, .split-columns, .credits-grid { grid-column: 1 / -1; }
  .hero-subtitle { grid-row: auto; }
  .plate-spine { grid-column: 1 / -1; writing-mode: initial; transform: none; }
  .annotation { grid-column: 1 / -1; margin-top: 0; }
  .gesture-lab, .split-columns, .credits-grid, .credit-list { grid-template-columns: 1fr; }
  .end-credits h2, .closing-copy, .trace-link, .credit-list, .credits-grid .eyebrow { grid-column: 1; }
  .side-note { display: none; }
}