:root {
  --black: #0b0806;
  --black-soft: #13100d;
  --red: #5d1714;
  --red-deep: #2d0908;
  --gold: #c9a258;
  --gold-soft: #e0c58a;
  --cream: #e9dfca;
  --muted: #b9aa91;
  --paper: #d7c7aa;
  --ink: #2a2119;
  --line: rgba(224,197,138,.24);
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--black);
  color: var(--cream);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
}
a { color: inherit; }

.site-header {
  position: absolute;
  z-index: 50;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 48px), var(--max));
  min-height: 84px;
  display: flex;
  align-items: center;
  gap: 32px;
  border-bottom: 1px solid rgba(224,197,138,.18);
}
.wordmark {
  font: 600 13px/1 Georgia, serif;
  letter-spacing: .25em;
  text-decoration: none;
  color: var(--gold-soft);
  white-space: nowrap;
}
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 24px; }
.site-nav a {
  text-decoration: none;
  font: 600 10px/1.3 Georgia, serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #d3c6af;
}
.site-nav a:hover { color: var(--gold-soft); }
.nav-cta { border: 1px solid var(--gold); padding: 11px 14px; }
.menu-toggle { display: none; }

.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 116px 24px 36px;
  background:
    radial-gradient(circle at 50% 18%, rgba(154,80,31,.25), transparent 24%),
    linear-gradient(180deg, #0f0b08 0%, #120d09 42%, #0a0705 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.48), transparent 18%, transparent 82%, rgba(0,0,0,.48));
}
.hero-vignette {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 180px rgba(0,0,0,.88);
  pointer-events: none;
}
.curtain {
  position: absolute;
  z-index: 3;
  top: 0;
  width: 21%;
  height: 100%;
  background:
    linear-gradient(90deg, rgba(255,255,255,.035), transparent 18%, rgba(0,0,0,.35) 38%, transparent 56%, rgba(255,255,255,.028) 72%, rgba(0,0,0,.45)),
    linear-gradient(#4b0f0f, #200707);
  box-shadow: inset 0 0 45px rgba(0,0,0,.8), 0 0 60px rgba(0,0,0,.7);
}
.curtain::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .28;
  background-image: repeating-linear-gradient(90deg, transparent 0 24px, rgba(196,141,66,.22) 26px, transparent 28px 54px);
}
.curtain-left { left: -2%; transform: skewX(-2deg); }
.curtain-right { right: -2%; transform: skewX(2deg); }

.vertical-note {
  position: absolute;
  z-index: 8;
  top: 23%;
  width: 125px;
  color: #c9ae77;
  font: 500 10px/1.9 Georgia, serif;
  letter-spacing: .22em;
  text-align: center;
  text-transform: uppercase;
}
.vertical-note i { display: block; width: 28px; height: 1px; margin: 18px auto; background: var(--gold); opacity: .7; }
.left-note { left: 4.5%; }
.right-note { right: 4.5%; }
.han-glyphs {
  display: block;
  margin-bottom: 10px;
  font: 400 37px/1.25 "Songti SC", "STSong", serif;
  letter-spacing: 0;
  color: #d5bd7d;
}

.seal-rig {
  position: absolute;
  z-index: 9;
  top: 34px;
  left: 50%;
  width: 190px;
  height: 205px;
  transform: translateX(-50%);
  animation: sealFloat 7s ease-in-out infinite;
}
.cord {
  position: absolute;
  width: 4px;
  height: 87px;
  top: 0;
  background: linear-gradient(#6b1b16, #b0392b 45%, #4c100d);
  box-shadow: 0 0 8px rgba(0,0,0,.8);
}
.cord-a { left: 58px; }
.cord-b { right: 58px; }
.imperial-seal {
  position: absolute;
  left: 50%;
  top: 74px;
  width: 132px;
  height: 105px;
  transform: translateX(-50%) perspective(500px) rotateX(3deg) rotateY(-7deg);
  background: linear-gradient(145deg, #a66f32, #5d3517 43%, #2c170b);
  border: 2px solid #d2a858;
  box-shadow: 0 18px 34px rgba(0,0,0,.8), inset 0 0 0 6px rgba(51,23,10,.55);
}
.imperial-seal::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -16px;
  height: 14px;
  background: linear-gradient(#4d2a13, #231008);
  transform: skewX(-18deg);
  transform-origin: top;
}
.seal-face {
  position: absolute;
  inset: 13px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 2px solid #ddbd73;
  color: #d7b161;
  font: 700 27px/1 "Songti SC", "STSong", serif;
  background: rgba(76,18,13,.78);
  text-align: center;
  align-items: center;
}
@keyframes sealFloat {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(5px); }
}
@media (prefers-reduced-motion: reduce) { .seal-rig { animation: none; } }

.hero-copy {
  position: relative;
  z-index: 10;
  width: min(760px, 78vw);
  text-align: center;
  margin-top: 74px;
}
.eyebrow, .section-kicker {
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .21em;
  font: 600 10px/1.4 Georgia, serif;
}
.hero h1 {
  margin: 10px 0 0;
  font: 400 clamp(72px, 10vw, 148px)/.93 Georgia, "Times New Roman", serif;
  letter-spacing: .08em;
  color: #d5ad62;
  text-shadow: 0 4px 24px rgba(0,0,0,.7);
}
.subtitle {
  margin: 12px 0 0;
  font: 400 16px/1 Georgia, serif;
  letter-spacing: .54em;
  color: #e7dfd1;
}
.rule { width: 34px; height: 1px; background: var(--gold); margin: 28px auto 20px; }
.hero-tagline {
  margin: 0;
  font: 400 clamp(18px, 2.2vw, 28px)/1.48 Georgia, serif;
  color: #d8ccba;
}

.palace-window {
  position: absolute;
  z-index: 5;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(62vw, 900px);
  height: 43vh;
  min-height: 340px;
  border-left: 1px solid rgba(200,162,88,.3);
  border-right: 1px solid rgba(200,162,88,.3);
  overflow: hidden;
  background: linear-gradient(#9f683a, #a96f3e 30%, #4b3328 75%, #18100c);
  box-shadow: 0 -4px 40px rgba(188,114,47,.14);
}
.sky {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 47% 15%, rgba(255,220,142,.75), transparent 15%), linear-gradient(#e0a862, #7e4b2c 58%, #2c1a14 100%);
}
.mountains {
  position: absolute; left: -8%; right: -8%; bottom: 31%; height: 45%; opacity: .72;
  background:
    linear-gradient(145deg, transparent 0 22%, #4c382d 23% 38%, transparent 39%),
    linear-gradient(215deg, transparent 0 41%, #5a4030 42% 56%, transparent 57%),
    linear-gradient(155deg, transparent 0 55%, #3b2d28 56% 72%, transparent 73%);
  filter: blur(.2px);
}
.palace { position: absolute; bottom: 0; background: #17110e; }
.palace::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 100%;
  border-left: 110px solid transparent;
  border-right: 110px solid transparent;
  border-bottom: 34px solid #201710;
  width: 0; height: 0;
}
.palace-back { left: 9%; width: 28%; height: 92px; opacity: .7; }
.palace-mid { right: 6%; width: 30%; height: 118px; opacity: .8; }
.palace-front { left: 37%; width: 32%; height: 138px; opacity: .95; }
.emperor-silhouette {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: -8px;
  width: 210px;
  height: 286px;
  transform: translateX(-50%);
}
.head { position: absolute; left: 84px; top: 56px; width: 42px; height: 52px; border-radius: 48% 48% 44% 44%; background: #110d0a; }
.crown { position: absolute; left: 60px; top: 31px; width: 90px; height: 31px; border-top: 7px solid #110d0a; }
.crown::after { content: ""; position: absolute; left: 13px; top: 4px; width: 64px; height: 29px; background: repeating-linear-gradient(90deg, #0b0806 0 2px, transparent 2px 7px); }
.robe { position: absolute; left: 20px; bottom: 0; width: 170px; height: 205px; background: linear-gradient(90deg, #140b08, #35100c 35%, #3d110c 65%, #140b08); clip-path: polygon(36% 0,64% 0,86% 20%,100% 100%,0 100%,14% 20%); }
.robe::after { content: ""; position: absolute; inset: 18px 28px; border: 1px solid rgba(193,145,61,.38); }

.hero-bottom {
  position: relative;
  z-index: 15;
  margin-top: auto;
  padding-top: 320px;
  text-align: center;
}
.premiere {
  margin: 0 0 14px;
  font: 500 15px/1 Georgia, serif;
  letter-spacing: .3em;
  color: var(--gold-soft);
}
.button {
  display: inline-flex;
  min-height: 45px;
  align-items: center;
  justify-content: center;
  padding: 0 28px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .16em;
  font: 600 10px/1 Georgia, serif;
}
.button-gold { border: 1px solid var(--gold); color: var(--gold-soft); background: rgba(0,0,0,.25); }
.button-gold:hover { background: var(--gold); color: #170e08; }
.scroll-cue { display: block; margin-top: 10px; text-decoration: none; font-size: 22px; color: var(--gold-soft); }

.parchment-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.14), transparent 24%),
    repeating-linear-gradient(0deg, rgba(68,45,23,.022) 0 1px, transparent 1px 4px),
    var(--paper);
  color: var(--ink);
  padding: 76px 24px 84px;
}
.parchment-section::after { content:""; position:absolute; inset:0; box-shadow: inset 0 0 90px rgba(64,42,22,.18); pointer-events:none; }
.parchment-grid { position:relative; z-index:2; width:min(100%, var(--max)); margin:0 auto; display:grid; grid-template-columns: 1fr .85fr; gap:90px; align-items:center; }
.section-kicker.dark { color: #7e2925; }
.parchment-section h2, .vision-detail h2, .development-detail h2, .contact-section h2 {
  margin: 6px 0 22px;
  font: 400 clamp(42px, 5.3vw, 72px)/1.04 Georgia, serif;
  letter-spacing: -.03em;
}
.parchment-section h2 { color: #7b241f; text-transform: uppercase; font-size: clamp(36px, 4.7vw, 64px); letter-spacing: .03em; }
.parchment-section p { max-width: 590px; font-family: Georgia, serif; font-size: 17px; }
.text-link { display:inline-block; margin-top: 12px; text-decoration:none; text-transform:uppercase; letter-spacing:.12em; font:700 10px/1 Georgia,serif; border-bottom:1px solid #5f3b22; padding-bottom:5px; }
.parchment-section blockquote { margin:0; text-align:center; font: italic 400 clamp(26px, 3.6vw, 48px)/1.35 Georgia,serif; color:#4a3527; }
.ink-branch { position:absolute; top:-34px; right:-28px; width:46%; height:210px; border-top:8px solid rgba(33,41,29,.68); border-radius:60% 0 0 0; transform:rotate(-8deg); opacity:.5; }
.ink-branch::after { content:""; position:absolute; width:180px; height:90px; right:55px; top:20px; background: radial-gradient(ellipse at 50% 50%, rgba(32,46,31,.62) 0 11%, transparent 12%) 0 0/40px 24px; transform:rotate(14deg); }

.cards-section {
  width: min(calc(100% - 48px), var(--max));
  margin: 0 auto;
  padding: 40px 0 90px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.feature-card { min-width:0; }
.card-art { height: 148px; margin-bottom: 18px; border:1px solid rgba(224,197,138,.12); overflow:hidden; }
.bamboo { background: repeating-linear-gradient(90deg,#815426 0 14px,#c49554 15px 18px,#3d2715 19px 21px), linear-gradient(#563617,#2b190d); transform: perspective(400px) rotateX(1deg); }
.textile { background: radial-gradient(circle at 60% 45%, transparent 0 23px, #c39c4b 25px 28px, transparent 30px), repeating-linear-gradient(45deg,rgba(218,171,74,.12) 0 2px,transparent 2px 10px), linear-gradient(135deg,#6e1715,#310807); }
.night-palace { position:relative; background:linear-gradient(#1c2021,#28302f 47%,#0d0c0b); }
.night-palace::after { content:""; position:absolute; left:18%; right:18%; bottom:0; height:65px; background:#080706; clip-path:polygon(0 24%,40% 24%,50% 0,60% 24%,100% 24%,100% 100%,0 100%); }
.blossom { background: radial-gradient(circle at 65% 42%,#e8d8b9 0 7px,transparent 8px), radial-gradient(circle at 48% 58%,#e9d9ba 0 8px,transparent 9px), radial-gradient(circle at 78% 72%,#e3cfac 0 7px,transparent 8px), linear-gradient(160deg,#2b2b25 0 55%,#15110e 56%); }
.feature-card h3 { margin:8px 0 16px; font:400 17px/1.5 Georgia,serif; color:#d9cdb9; }
.feature-card > a { text-decoration:none; color:var(--gold); text-transform:uppercase; letter-spacing:.14em; font:600 10px/1 Georgia,serif; }

.vision-detail, .development-detail, .contact-section {
  width:min(calc(100% - 48px), var(--max));
  margin:0 auto;
  padding:100px 0;
  border-top:1px solid var(--line);
}
.vision-detail { display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; }
.vision-copy > p, .development-detail > div > p, .contact-box p { color:var(--muted); font-size:17px; }
.vision-points { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:48px; }
.vision-points > div { border-top:1px solid var(--line); padding-top:18px; }
.vision-points span { color:var(--gold); font:700 11px/1 Georgia,serif; }
.vision-points h3 { font:400 22px/1.2 Georgia,serif; margin:12px 0 9px; }
.vision-points p { color:var(--muted); font-size:13px; }

.development-detail { display:grid; grid-template-columns:1.15fr .85fr; gap:80px; align-items:start; }
.status-card { border:1px solid var(--line); background:#100c09; padding:8px 24px; }
.status-card div { display:flex; justify-content:space-between; gap:24px; padding:18px 0; border-bottom:1px solid var(--line); }
.status-card div:last-child { border-bottom:0; }
.status-card span { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.12em; }
.status-card strong { font:400 17px/1.3 Georgia,serif; text-align:right; }

.quote-band { padding:100px 24px; text-align:center; background:linear-gradient(145deg,#180f0b,#0d0907); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.quote-band blockquote { max-width:1000px; margin:0 auto; font:400 clamp(31px,4.4vw,57px)/1.28 Georgia,serif; color:#dfd0b9; }
.quote-band p { color:var(--gold); }

.contact-section { display:grid; grid-template-columns:1fr 1fr; gap:80px; }
.contact-box { align-self:end; }
.email-link { display:inline-block; margin:10px 0; font:400 clamp(24px,3vw,39px)/1.2 Georgia,serif; color:var(--gold-soft); text-decoration-color:#7b241f; text-underline-offset:8px; }
.fine-print { font-size:11px !important; }

.site-footer { width:min(calc(100% - 48px), var(--max)); margin:0 auto; padding:35px 0 48px; display:grid; grid-template-columns:auto 1fr auto; gap:30px; align-items:center; color:#9b8d77; font:500 9px/1.5 Georgia,serif; letter-spacing:.12em; }
.footer-brand { display:flex; align-items:center; gap:12px; color:#cbbda7; }
.mini-seal { width:39px; height:39px; border:1px solid #b99450; display:grid; place-items:center; color:#caa257; font:400 22px/1 "Songti SC",serif; }
.footer-meta { text-align:center; }
.footer-motto { color:#c4b79f; line-height:1.25; }

@media (max-width: 980px) {
  .site-header { min-height:72px; }
  .menu-toggle { display:block; margin-left:auto; border:1px solid rgba(224,197,138,.3); background:rgba(0,0,0,.2); color:#ddd1be; padding:9px 11px; text-transform:uppercase; letter-spacing:.12em; font-size:10px; }
  .site-nav { display:none; position:absolute; top:72px; right:0; width:min(320px,90vw); padding:20px; flex-direction:column; align-items:flex-start; background:#0b0806; border:1px solid var(--line); }
  .site-nav.open { display:flex; }
  .vertical-note { display:none; }
  .palace-window { width:74vw; }
  .cards-section { grid-template-columns:repeat(2,1fr); }
  .vision-detail, .development-detail, .contact-section, .parchment-grid { grid-template-columns:1fr; gap:40px; }
  .vision-points { grid-template-columns:1fr; }
  .site-footer { grid-template-columns:1fr; text-align:center; }
  .footer-brand { justify-content:center; }
}

@media (max-width: 640px) {
  .site-header { width:calc(100% - 28px); }
  .hero { min-height: 920px; padding:100px 14px 28px; }
  .curtain { width:23%; opacity:.92; }
  .seal-rig { top:50px; transform:translateX(-50%) scale(.86); }
  .hero-copy { width:92vw; margin-top:100px; }
  .hero h1 { font-size: clamp(54px, 17vw, 86px); letter-spacing:.04em; }
  .subtitle { font-size:12px; letter-spacing:.37em; }
  .palace-window { width:82vw; height:400px; min-height:0; }
  .emperor-silhouette { transform:translateX(-50%) scale(.86); transform-origin:bottom center; }
  .hero-bottom { padding-top:410px; }
  .premiere { font-size:12px; letter-spacing:.22em; }
  .cards-section { width:calc(100% - 28px); grid-template-columns:1fr; }
  .vision-detail, .development-detail, .contact-section { width:calc(100% - 28px); padding:76px 0; }
  .parchment-section { padding-left:14px; padding-right:14px; }
  .site-footer { width:calc(100% - 28px); }
}