@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;500;600;700&display=swap');

:root {
  --ink: #0c0b09;
  --ink-soft: #17130f;
  --paper: #d8c29c;
  --paper-light: #ead9b9;
  --gold: #b5965e;
  --gold-soft: #806b45;
  --cinnabar: #9f2f24;
  --muted: #998e7a;
  --line: rgba(196, 166, 112, .23);
  --serif: "Noto Serif SC", "Songti SC", "SimSun", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper-light);
  font-family: var(--serif);
  overflow-x: hidden;
}
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }

body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(circle at 60% 20%, rgba(122, 86, 42, .16), transparent 28%),
    linear-gradient(135deg, #100d0a, #050505 50%, #12100d);
}
.noise {
  position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
.cursor-glow {
  position: fixed; width: 440px; height: 440px; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(180, 142, 76, .10), transparent 68%);
  transform: translate(-50%, -50%);
}

.site-header {
  position: fixed; inset: 0 0 auto; z-index: 20; height: 88px; padding: 0 5vw;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid transparent; transition: .4s ease;
}
.site-header.scrolled { background: rgba(8, 7, 6, .88); backdrop-filter: blur(18px); border-color: var(--line); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-seal {
  display: grid; place-items: center; width: 40px; height: 44px;
  color: #e6cfa3; border: 1px solid #8f2c23; background: #7e241d;
  font-family: "Ma Shan Zheng", cursive; font-size: 24px;
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.15);
}
.brand b { display: block; letter-spacing: .25em; font-weight: 600; }
.brand small { display: block; margin-top: 3px; color: var(--muted); letter-spacing: .16em; font-size: 8px; }
.nav { display: flex; align-items: center; gap: 36px; font-size: 13px; letter-spacing: .16em; }
.nav a { color: #b8ab92; transition: color .2s; }
.nav a:hover { color: #eee0c4; }
.nav button { color: inherit; }
.lang-switch { border: 0; border-bottom: 1px solid var(--gold-soft); background: none; padding: 5px; cursor: pointer; }
.nav-cta, .outline-btn, .paper-btn {
  border: 1px solid var(--gold-soft); background: transparent; color: var(--paper);
  padding: 12px 22px; cursor: pointer; letter-spacing: .15em; transition: .25s;
}
.nav-cta:hover, .outline-btn:hover { background: var(--paper); color: var(--ink); }
.menu-toggle { display: none; border: 0; background: none; color: var(--paper); font-size: 24px; }

.hero {
  min-height: 100svh; position: relative; display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) 120px; padding: 130px 9vw 90px; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0; opacity: .18;
  background: url("assets/brand-board.png") center/cover no-repeat;
  filter: grayscale(1) contrast(1.2);
  mask-image: linear-gradient(90deg, transparent 5%, #000 45%, #000 100%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg, rgba(9,8,7,.98) 20%, rgba(9,8,7,.70) 58%, rgba(9,8,7,.35));
}
.hero-copy { position: relative; z-index: 2; max-width: 780px; }
.eyebrow, .kicker { color: var(--gold); font-size: 12px; letter-spacing: .32em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 15px; }
.eyebrow > span:first-child { width: 38px; height: 1px; background: var(--gold); }
h1, h2, h3, p { margin-top: 0; }
h1 {
  margin: 28px 0; font-size: clamp(58px, 8.4vw, 126px); line-height: .98;
  font-weight: 500; letter-spacing: .06em;
}
h1 em { color: var(--paper); font-style: normal; margin-left: 1.2em; text-shadow: 0 0 50px rgba(177, 137, 71, .15); }
.hero-lead { width: min(520px, 86%); color: #a89d8a; font-size: 16px; line-height: 2.1; letter-spacing: .08em; }
.hero-actions { display: flex; align-items: center; gap: 38px; margin-top: 44px; }
.primary-btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 38px;
  min-width: 230px; border: 1px solid var(--paper); padding: 17px 20px;
  color: #16110c; background: var(--paper); cursor: pointer; letter-spacing: .14em; transition: .3s;
}
.primary-btn:hover { background: transparent; color: var(--paper); transform: translateY(-2px); }
.primary-btn i { font-style: normal; font-size: 18px; }
.text-link { color: #ae9e83; letter-spacing: .16em; font-size: 13px; border-bottom: 1px solid #5f503a; padding: 12px 0; }
.text-link i { display: inline-block; margin-left: 20px; font-style: normal; transition: transform .2s; }
.text-link:hover i { transform: translateY(4px); }
.hero-aside { position: relative; z-index: 2; height: 70%; border-left: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
.vertical { writing-mode: vertical-rl; letter-spacing: .4em; font-size: 12px; color: var(--gold); }
.year-mark { text-align: center; writing-mode: vertical-rl; }
.year-mark b { font-size: 12px; letter-spacing: .25em; font-weight: 400; }
.year-mark small { margin-right: 7px; color: var(--cinnabar); letter-spacing: .18em; }
.hero-orbit { position: absolute; z-index: 1; width: min(62vw, 760px); aspect-ratio: 1; right: -7vw; top: 50%; transform: translateY(-50%); opacity: .65; }
.orbit { position: absolute; inset: 0; border: 1px solid rgba(186, 150, 88, .3); border-radius: 50%; animation: rotate 48s linear infinite; }
.orbit::before, .orbit::after { content: ""; position: absolute; inset: 7%; border: 1px dashed rgba(186,150,88,.22); border-radius: 50%; }
.orbit::after { inset: 23%; border-style: solid; }
.orbit-b { inset: 15%; animation-direction: reverse; animation-duration: 30s; }
.orbit-b::before { inset: -12%; border-style: dotted; }
.orbit-text {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(22deg);
  width: 85%; text-align: center; color: rgba(199,170,113,.4); font-size: clamp(12px,1.6vw,24px); letter-spacing: 1em;
}
.taiji { position: absolute; inset: 37%; border-radius: 50%; border: 1px solid var(--gold-soft); animation: rotate 20s linear infinite; }
.taiji::before { content:""; position:absolute; inset: 0; border-radius: 50%; background: linear-gradient(90deg, rgba(209,181,128,.25) 50%, transparent 50%); }
.taiji span::before, .taiji span::after { content:""; position:absolute; width: 50%; height:50%; left:25%; border-radius:50%; background:#17130f; border:1px solid var(--gold-soft); }
.taiji span::after { bottom:0; background:rgba(209,181,128,.35); }
.scroll-hint { position: absolute; z-index: 2; left: 5vw; bottom: 22px; display: flex; gap: 12px; align-items: center; color: #685d4e; font-size: 8px; letter-spacing: .2em; }
.scroll-hint span { width: 45px; height: 1px; background: #685d4e; }

.section-index { color: #706452; font-size: 10px; letter-spacing: .25em; text-transform: uppercase; }
.intro {
  min-height: 70vh; display: grid; grid-template-columns: 1fr 3fr .6fr; gap: 8vw;
  align-items: center; padding: 10vw 9vw; border-top: 1px solid var(--line);
  background: linear-gradient(130deg, #100d0a, #090807);
}
.intro-copy h2 { max-width: 900px; font-size: clamp(32px, 4vw, 62px); line-height: 1.55; font-weight: 400; letter-spacing: .07em; }
.intro-copy > p:last-child { max-width: 700px; color: var(--muted); line-height: 2; }
.intro-stamp { justify-self: end; color: var(--cinnabar); border: 1px solid var(--cinnabar); padding: 15px 11px; font-family: "Ma Shan Zheng"; font-size: 22px; line-height: 1; transform: rotate(4deg); }

.arts { padding: 9vw; background: #0b0a08; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 70px; }
.section-heading h2 { font-size: clamp(34px, 4.5vw, 68px); font-weight: 400; letter-spacing: .08em; margin: 0; }
.arts-layout { display: grid; grid-template-columns: .75fr 1.5fr; min-height: 630px; border: 1px solid var(--line); }
.art-tabs { display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.art-tab {
  flex: 1; display: grid; grid-template-columns: 45px 1fr auto; align-items: center; text-align: left;
  gap: 10px; border: 0; border-bottom: 1px solid var(--line); background: transparent;
  color: #807563; padding: 20px 28px; cursor: pointer; transition: .35s;
}
.art-tab:last-child { border-bottom: 0; }
.art-tab span { color: #574a37; font-size: 11px; }
.art-tab b { font-size: 19px; font-weight: 400; letter-spacing: .16em; }
.art-tab small { font-size: 8px; letter-spacing: .16em; }
.art-tab:hover, .art-tab.active { color: var(--paper-light); background: linear-gradient(90deg, rgba(164,128,68,.13), transparent); }
.art-tab.active { box-shadow: inset 3px 0 var(--cinnabar); }
.art-stage { position: relative; display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; padding: 6vw; overflow: hidden; }
.art-stage::before {
  content:""; position:absolute; inset:0; opacity:.06;
  background: url("assets/ancient-chart.jpg") center/cover;
  filter: grayscale(1) invert(1);
}
.stage-symbol { position: relative; aspect-ratio: 1; display: grid; place-items: center; max-width: 390px; }
.compass-rings { position:absolute; inset:0; border:1px solid var(--gold-soft); border-radius:50%; animation:rotate 55s linear infinite; }
.compass-rings::before, .compass-rings::after { content:""; position:absolute; inset:9%; border:1px dashed #4d422f; border-radius:50%; }
.compass-rings::after { inset:22%; border-style:solid; transform:rotate(45deg); border-radius:0; }
.compass-rings span { position:absolute; left:48%; top:47%; font-size:12px; color:#776849; transform: rotate(calc(var(--i) * 45deg)) translateY(-178px) rotate(calc(var(--i) * -45deg)); }
.compass-rings span:nth-child(1){--i:0}.compass-rings span:nth-child(2){--i:1}.compass-rings span:nth-child(3){--i:2}.compass-rings span:nth-child(4){--i:3}
.compass-rings span:nth-child(5){--i:4}.compass-rings span:nth-child(6){--i:5}.compass-rings span:nth-child(7){--i:6}.compass-rings span:nth-child(8){--i:7}
.stage-symbol strong { font: 400 95px "Ma Shan Zheng"; color: var(--paper); text-shadow: 0 0 30px rgba(193,150,78,.25); transition: .35s; }
.stage-copy { position: relative; z-index:1; }
.stage-copy > p:first-child { color: var(--gold); font-size:9px; letter-spacing:.24em; }
.stage-copy h3 { font-size:38px; font-weight:400; letter-spacing:.15em; }
.stage-copy > p { color:var(--muted); line-height:2; font-size:14px; }
.stage-copy ul { list-style:none; padding:0; margin:28px 0; display:flex; flex-wrap:wrap; gap:8px; }
.stage-copy li { border:1px solid #3e362a; color:#a39680; padding:7px 11px; font-size:10px; letter-spacing:.12em; }

.archive { position: relative; height: 92vh; min-height: 680px; display: flex; align-items: center; padding: 9vw; overflow: hidden; }
.archive-image { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; filter: sepia(.25) contrast(1.05); }
.archive-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,8,5,.95),rgba(10,8,5,.65) 48%,rgba(10,8,5,.12)),linear-gradient(0deg,rgba(0,0,0,.45),transparent); }
.archive-copy { position:relative; max-width:700px; }
.section-index.light { color:#aa9671; }
.archive-copy h2 { font-size:clamp(40px,5.4vw,78px); font-weight:400; line-height:1.45; letter-spacing:.08em; }
.archive-copy > p:not(.section-index):not(.kicker) { max-width:600px; color:#b9aa90; line-height:2; }
.paper-btn { margin-top:25px; background:var(--paper); color:#1b140e; border-color:var(--paper); }
.paper-btn:hover { background:transparent; color:var(--paper); }
.archive-caption { position:absolute; right:4vw; bottom:5vw; color:rgba(64,45,24,.8); background:rgba(220,196,153,.6); padding:8px 12px; font-size:10px; letter-spacing:.2em; writing-mode:vertical-rl; }

.hexagram-lab { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:8vw; padding:10vw 9vw; min-height:700px; background:radial-gradient(circle at 75% 50%,rgba(128,91,37,.16),transparent 32%),#090807; }
.lab-copy h2 { font-size:clamp(38px,4.8vw,68px); font-weight:400; }
.lab-copy > p:not(.section-index):not(.kicker) { color:var(--muted); max-width:620px; line-height:2; }
.coin-oracle { display:grid; place-items:center; }
.coins { display:flex; gap:22px; perspective:900px; }
.coin {
  width:clamp(85px,9vw,130px); aspect-ratio:1; border-radius:50%; border:2px solid #9d7c43; color:#b99658;
  background:radial-gradient(circle,#1b160f 14%,transparent 15%),radial-gradient(circle,#453316 0 48%,#9d7c43 49% 52%,#2b2112 53% 67%,#95733c 68% 71%,#241b0f 72%);
  box-shadow:inset 0 0 22px #070604,0 12px 35px rgba(0,0,0,.7); display:grid; place-items:center;
}
.coin span { font-size:15px; color:#171008; background:#9d7c43; padding:3px; }
.coin.casting { animation: coinFlip 1s cubic-bezier(.2,.7,.2,1); }
.coin:nth-child(2).casting { animation-delay:.1s }.coin:nth-child(3).casting { animation-delay:.2s }
.yao-result { margin-top:70px; text-align:center; width:100%; color:#7f715c; }
.yao-line { display:block; width:80%; max-width:340px; height:11px; margin:0 auto 25px; background:var(--paper); box-shadow:0 0 25px rgba(197,157,90,.18); }
.yao-line.yin { background:linear-gradient(90deg,var(--paper) 0 43%,transparent 43% 57%,var(--paper) 57%); }

.process { padding:9vw; background:#11100d; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.steps article { padding:50px 40px; min-height:260px; border-right:1px solid var(--line); }
.steps article:last-child { border:0; }
.steps span { color:var(--cinnabar); font-size:11px; }
.steps b { display:block; margin:40px 0 18px; font-size:22px; font-weight:400; letter-spacing:.16em; }
.steps p { color:var(--muted); line-height:1.9; font-size:13px; }

.closing { position:relative; min-height:85vh; display:grid; place-items:center; text-align:center; overflow:hidden; }
.closing img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.65) contrast(1.08); }
.closing-overlay { position:absolute; inset:0; background:radial-gradient(circle,rgba(8,7,6,.15),rgba(8,7,6,.9)),linear-gradient(0deg,#0a0907,transparent 25%,transparent 75%,#0a0907); }
.closing-copy { position:relative; z-index:1; }
.closing-copy p { color:var(--gold); letter-spacing:.3em; font-size:12px; }
.closing-copy h2 { font-size:clamp(58px,8vw,116px); font-weight:400; line-height:1.2; margin:25px 0; text-shadow:0 4px 30px #000; }

footer { min-height:180px; display:grid; grid-template-columns:1fr 2fr 1fr; align-items:center; gap:30px; padding:40px 5vw; color:#695e4d; font-size:10px; letter-spacing:.1em; }
footer > p:nth-child(2) { text-align:center; line-height:1.8; }
footer > p:last-child { text-align:right; }

dialog {
  width:min(820px,92vw); max-height:90vh; overflow:auto; color:var(--paper-light);
  border:1px solid var(--gold-soft); background:#11100d; padding:45px; box-shadow:0 30px 100px #000;
}
dialog::backdrop { background:rgba(0,0,0,.82); backdrop-filter:blur(8px); }
.dialog-close { position:absolute; right:20px; top:15px; color:var(--paper); border:0; background:none; font-size:30px; cursor:pointer; }
.dialog-head { display:flex; align-items:center; gap:20px; margin-bottom:35px; }
.dialog-head p { color:var(--gold); font-size:9px; letter-spacing:.22em; margin-bottom:8px; }
.dialog-head h2 { font-size:28px; font-weight:400; margin:0; }
form { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
form label > span { display:block; color:#a49885; font-size:11px; letter-spacing:.12em; margin-bottom:9px; }
input,textarea,select { width:100%; border:1px solid #3c3428; background:#090807; color:var(--paper-light); padding:13px; outline:none; }
input:focus,textarea:focus,select:focus { border-color:var(--gold); }
.full { grid-column:1/-1; }
.consent { display:flex; gap:10px; align-items:center; }
.consent input { width:auto; }
.consent span { margin:0; }
.form-note { color:#665c4d; font-size:10px; margin:0; }
.form-success { text-align:center; padding:50px 0; }
.form-success > span { display:grid; place-items:center; width:60px; height:60px; margin:auto; border:1px solid var(--gold); border-radius:50%; color:var(--gold); }
.form-success h3 { font-size:28px; font-weight:400; margin:22px 0 10px; }
.form-success p { color:var(--muted); }
.toast { position:fixed; z-index:60; left:50%; bottom:30px; transform:translate(-50%,20px); background:var(--paper); color:var(--ink); padding:12px 20px; font-size:12px; opacity:0; pointer-events:none; transition:.3s; }
.toast.show { opacity:1; transform:translate(-50%,0); }

.reveal { opacity:0; transform:translateY(28px); transition:opacity .9s ease,transform .9s ease; }
.reveal.visible { opacity:1; transform:none; }
@keyframes rotate { to { transform:rotate(360deg); } }
@keyframes coinFlip { 0%{transform:rotateY(0) translateY(0)} 50%{transform:rotateY(900deg) translateY(-55px)} 100%{transform:rotateY(1800deg) translateY(0)} }

/* Motion system — inspired by cinematic, full-scene product experiences */
.page-loader {
  position:fixed; inset:0; z-index:999; display:grid; place-items:center;
  background:#080706; transition:opacity .7s ease,visibility .7s ease;
}
.page-loader.loaded { opacity:0; visibility:hidden; pointer-events:none; }
.loader-door { position:absolute; inset:0 50% 0 0; background:#0b0907; border-right:1px solid #4f3d24; transition:transform 1.2s cubic-bezier(.76,0,.24,1) .25s; }
.loader-right { inset:0 0 0 50%; border:0; border-left:1px solid #4f3d24; }
.page-loader.loaded .loader-left { transform:translateX(-100%); }
.page-loader.loaded .loader-right { transform:translateX(100%); }
.loader-core { position:relative; z-index:2; width:250px; aspect-ratio:1; display:grid; place-items:center; text-align:center; }
.loader-rings,.loader-rings i { position:absolute; inset:0; border:1px solid rgba(181,150,94,.42); border-radius:50%; animation:rotate 4s linear infinite; }
.loader-rings::before { content:""; position:absolute; inset:12%; border:1px dashed rgba(181,150,94,.3); border-radius:50%; animation:rotate 6s linear infinite reverse; }
.loader-rings i:nth-child(1) { inset:22%; border-style:dotted; animation-duration:2s; }
.loader-rings i:nth-child(2) { inset:34%; border-color:var(--cinnabar); animation-direction:reverse; }
.loader-rings i:nth-child(3) { inset:46%; background:var(--cinnabar); box-shadow:0 0 35px rgba(159,47,36,.5); }
.loader-core strong { font:54px "Ma Shan Zheng"; color:var(--paper); z-index:1; }
.loader-core p { position:absolute; bottom:-40px; width:100%; color:var(--gold); font-size:9px; letter-spacing:.3em; }
.loader-core > span { position:absolute; top:-35px; right:0; color:#77684e; font-size:10px; letter-spacing:.15em; }

#starCanvas { position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; opacity:.7; }
.cursor-core {
  position:fixed; left:0; top:0; z-index:100; width:30px; height:30px; border:1px solid rgba(215,185,127,.7);
  border-radius:50%; pointer-events:none; transform:translate(-50%,-50%); transition:width .2s,height .2s,border-color .2s; mix-blend-mode:difference;
}
.cursor-core span { position:absolute; width:4px; height:4px; left:50%; top:50%; transform:translate(-50%,-50%); background:#fff; border-radius:50%; }
.cursor-core.hover { width:58px; height:58px; border-color:#fff; }
.cursor-ring { position:fixed; z-index:99; pointer-events:none; width:12px; height:12px; border:1px solid var(--gold); border-radius:50%; transform:translate(-50%,-50%); animation:clickBurst .65s ease-out forwards; }
.scroll-progress { position:fixed; left:0; top:0; z-index:30; width:2px; height:100vh; background:rgba(181,150,94,.08); }
.scroll-progress i { display:block; width:100%; height:var(--page-progress,0%); background:linear-gradient(var(--cinnabar),var(--gold)); box-shadow:0 0 12px var(--gold); }
.scene-nav { position:fixed; z-index:25; right:24px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:22px; }
.scene-nav a { position:relative; display:flex; justify-content:flex-end; align-items:center; gap:10px; color:#5c5140; font-size:8px; letter-spacing:.16em; }
.scene-nav a::after { content:""; width:7px; height:7px; border:1px solid #66573e; transform:rotate(45deg); transition:.3s; }
.scene-nav a b { font-weight:400; opacity:0; transform:translateX(8px); transition:.3s; }
.scene-nav a span { position:absolute; right:20px; opacity:0; pointer-events:none; transition:.3s; white-space:nowrap; }
.scene-nav a:hover span,.scene-nav a.active span { opacity:1; transform:translateX(-12px); }
.scene-nav a.active { color:var(--paper); }
.scene-nav a.active::after { background:var(--cinnabar); border-color:var(--cinnabar); box-shadow:0 0 15px var(--cinnabar); transform:rotate(45deg) scale(1.25); }

.hero-aurora {
  position:absolute; z-index:0; width:70vw; height:70vw; right:-20vw; top:-30vw; border-radius:50%;
  background:conic-gradient(from 90deg,transparent,rgba(126,36,29,.16),rgba(181,150,94,.09),transparent 62%);
  filter:blur(50px); animation:auroraSpin 18s linear infinite;
}
h1 em {
  color:transparent; background:linear-gradient(100deg,#88734f 0%,#f1dfbc 30%,#a17f49 58%,#eee0c5 78%,#88734f 100%);
  background-size:220% auto; -webkit-background-clip:text; background-clip:text;
  animation:textShimmer 5s linear infinite; filter:drop-shadow(0 0 25px rgba(177,137,71,.12));
}
.orbit-node {
  position:absolute; width:38px; height:38px; border-radius:50%; border:1px solid var(--gold-soft);
  background:rgba(9,8,7,.82); color:var(--gold); font-size:10px; box-shadow:0 0 25px rgba(181,150,94,.15);
  animation:nodePulse 2.5s ease-in-out infinite;
}
.node-a { left:18%; top:16%; }.node-b { right:7%; top:50%; animation-delay:.7s; }.node-c { left:27%; bottom:8%; animation-delay:1.3s; }
.hero-hud { position:absolute; z-index:3; right:8vw; bottom:26px; display:flex; align-items:center; gap:12px; color:#665b49; font-size:8px; letter-spacing:.14em; }
.hero-hud i { width:3px; height:3px; background:var(--cinnabar); border-radius:50%; box-shadow:0 0 8px var(--cinnabar); }

.primary-btn,.paper-btn,.nav-cta,.outline-btn { position:relative; overflow:hidden; }
.primary-btn::before,.paper-btn::before,.nav-cta::before,.outline-btn::before {
  content:""; position:absolute; inset:-2px; background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.65) 45%,transparent 65%);
  transform:translateX(-130%); transition:transform .65s ease; pointer-events:none;
}
.primary-btn:hover::before,.paper-btn:hover::before,.nav-cta:hover::before,.outline-btn:hover::before { transform:translateX(130%); }

.stage-grid {
  position:absolute; inset:0; opacity:.12; pointer-events:none;
  background-image:linear-gradient(rgba(181,150,94,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(181,150,94,.22) 1px,transparent 1px);
  background-size:46px 46px; transform:perspective(600px) rotateX(68deg) scale(1.7) translateY(16%);
  mask-image:linear-gradient(transparent,#000 40%,transparent);
}
.scan-line { position:absolute; left:0; right:0; height:1px; top:0; background:linear-gradient(90deg,transparent,var(--cinnabar),var(--gold),transparent); box-shadow:0 0 18px var(--gold); animation:scanStage 5s ease-in-out infinite; opacity:.7; }
.stage-coordinate { position:absolute; right:24px; top:24px; display:flex; gap:10px; color:#5c503d; font-size:8px; letter-spacing:.18em; writing-mode:vertical-rl; }
.stage-coordinate b { color:var(--cinnabar); font-weight:400; }
.stage-symbol,.stage-copy { transition:transform .25s ease-out; }
.stage-symbol::after { content:""; position:absolute; inset:24%; border-radius:50%; background:radial-gradient(circle,rgba(174,132,67,.18),transparent 66%); filter:blur(12px); animation:nodePulse 3s ease-in-out infinite; }

.archive-reticle { position:absolute; right:12vw; top:20%; width:140px; aspect-ratio:1; border:1px solid rgba(70,45,20,.35); border-radius:50%; animation:rotate 12s linear infinite; }
.archive-reticle::before,.archive-reticle::after { content:""; position:absolute; left:50%; top:-18%; width:1px; height:136%; background:rgba(70,45,20,.25); }
.archive-reticle::after { transform:rotate(90deg); }
.archive-reticle i { position:absolute; inset:31%; border:1px dashed rgba(70,45,20,.5); border-radius:50%; }
.archive-reticle span { position:absolute; left:110%; top:45%; width:100px; color:rgba(50,30,14,.7); font-size:8px; letter-spacing:.16em; }
.coin { transition:filter .3s,transform .3s,box-shadow .3s; }
.coin:hover { filter:brightness(1.35); transform:translateY(-8px) rotateX(12deg); box-shadow:inset 0 0 22px #070604,0 20px 45px rgba(181,150,94,.2); }

@keyframes clickBurst { 0%{opacity:1;transform:translate(-50%,-50%) scale(.5)} 100%{opacity:0;transform:translate(-50%,-50%) scale(7)} }
@keyframes auroraSpin { to{transform:rotate(360deg)} }
@keyframes textShimmer { to{background-position:220% center} }
@keyframes nodePulse { 0%,100%{transform:scale(1);opacity:.65} 50%{transform:scale(1.13);opacity:1} }
@keyframes scanStage { 0%,100%{top:0;opacity:0} 15%,85%{opacity:.7} 50%{top:100%} }

@media (max-width: 900px) {
  .cursor-core,.scene-nav { display:none; }
  .site-header { height:70px; }
  .menu-toggle { display:block; z-index:2; cursor:pointer; }
  .nav { position:absolute; top:0; right:0; width:min(340px,86vw); height:100vh; padding:100px 40px; background:#100e0b; flex-direction:column; align-items:flex-start; transform:translateX(100%); transition:.35s; }
  .nav.open { transform:none; }
  .hero { grid-template-columns:1fr; padding:120px 7vw 80px; }
  .hero-aside { display:none; }
  h1 em { margin-left:.45em; }
  .hero-orbit { width:95vw; right:-45vw; opacity:.4; }
  .hero-hud { display:none; }
  .intro { grid-template-columns:1fr; gap:30px; padding:100px 7vw; }
  .intro-stamp { justify-self:start; }
  .arts,.process { padding:100px 7vw; }
  .section-heading { display:block; }
  .section-heading h2 { margin-top:25px; }
  .arts-layout { grid-template-columns:1fr; }
  .art-tabs { flex-direction:row; overflow:auto; border-right:0; border-bottom:1px solid var(--line); }
  .art-tab { min-width:150px; display:block; border-right:1px solid var(--line); padding:18px; }
  .art-tab span,.art-tab small { display:block; margin:4px 0; }
  .art-stage { grid-template-columns:1fr 1fr; min-height:520px; padding:40px; }
  .compass-rings span { transform:rotate(calc(var(--i)*45deg)) translateY(-128px) rotate(calc(var(--i)*-45deg)); }
  .archive { padding:8vw; }
  .hexagram-lab { grid-template-columns:1fr; padding:100px 7vw; }
  .steps { grid-template-columns:1fr; }
  .steps article { border-right:0; border-bottom:1px solid var(--line); }
  footer { grid-template-columns:1fr; text-align:center; }
  footer > p:last-child { text-align:center; }
  .footer-brand { justify-content:center; }
}
@media (max-width: 580px) {
  h1 { font-size:52px; line-height:1.14; }
  .hero-lead { width:100%; }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:14px; }
  .art-stage { grid-template-columns:1fr; padding:35px 22px; }
  .stage-symbol { max-width:260px; margin:auto; }
  .stage-symbol strong { font-size:70px; }
  .compass-rings span { transform:rotate(calc(var(--i)*45deg)) translateY(-118px) rotate(calc(var(--i)*-45deg)); }
  .archive-copy h2 { font-size:38px; }
  .coins { gap:8px; }
  .coin { width:82px; }
  dialog { padding:35px 22px; }
  form { grid-template-columns:1fr; }
  form label { grid-column:1; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}