:root {
  --bg-dark: #17120f;
  --bg-card: rgba(14, 11, 9, 0.66);
  --bg-card-border: rgba(128, 97, 58, 0.33);
  --text-main: #f7ead0;
  --text-sub: #cbbda6;
  --gold-primary: #d8ae62;
  --gold-bright: #f0bf66;
  --gold-dark: #b9873f;
  --ease-smooth: cubic-bezier(0.25, 1, 0.5, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  color: var(--text-main);
  background-color: var(--bg-dark);
  scroll-behavior: smooth;
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
}

.topbar {
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  background: linear-gradient(#0b0908ee, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.brand {
  color: #f2d18b;
  text-decoration: none;
  font-size: 24px;
  letter-spacing: .18em;
  transition: color 0.3s ease;
}

.topbar nav { display: flex; gap: 24px; flex-wrap: wrap; }
.topbar nav a { color: #eadcc2; text-decoration: none; font-size: 15px; transition: color 0.3s ease; }
.topbar nav a:hover { color: var(--gold-bright); }

.gold-btn, .ghost-btn {
  display: inline-block;
  text-decoration: none;
  padding: 12px 28px;
  border: 1px solid var(--gold-primary);
  transition: transform 0.25s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth), background-color 0.25s ease;
  will-change: transform;
}

.gold-btn { background: var(--gold-dark); color: #17110b; }
.ghost-btn { color: #eed7a5; background: rgba(23, 17, 11, 0.53); }
.gold-btn:hover, .ghost-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,0.5); }

.intro-page { min-height: 100vh; background: linear-gradient(#100d0bd8,#100d0bcc), url("photo.png") center/cover fixed; }
.intro { min-height: 100vh; max-width: 1100px; margin: auto; padding: 150px 6vw 110px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.seal { border: 1px solid #bd8e4c; color: #d4a85c; width: 72px; height: 72px; display: grid; place-items: center; font-size: 25px; writing-mode: vertical-rl; margin-bottom: 22px; user-select: none; }
.eyebrow { font: 12px/1.5 sans-serif; letter-spacing: .3em; color: #cba56c; }
.intro h1 { font-size: clamp(54px, 10vw, 105px); font-weight: 500; letter-spacing: .12em; margin: 15px 0; }
.intro h2 { font-size: clamp(20px, 3vw, 30px); font-weight: 400; color: #d7bd91; }
.intro-copy { max-width: 780px; line-height: 2.2; color: var(--text-sub); font-size: 17px; }
.intro-actions { display: flex; gap: 14px; margin: 28px 0 65px; }
.intro-cards { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; text-align: left; }
.intro-cards article { padding: 26px; background: var(--bg-card); border: 1px solid var(--bg-card-border); min-height: 145px; backdrop-filter: blur(4px); }
.intro-cards b { display: block; color: #e4c07c; font-size: 20px; margin-bottom: 14px; }
.intro-cards span { color: #b8ac98; line-height: 1.9; }

footer { text-align: center; padding: 25px; color: #887d6d; font: 12px/1.5 sans-serif; }

.scene-page { min-height: 100vh; background: #100d0b; }
.scene-hero { min-height: 100vh; position: relative; background: linear-gradient(#08080755,#100c0be8), url("photo.png") center/cover fixed; display: flex; align-items: flex-end; padding: 120px 7vw 80px; }
.scene-hero .hero-copy { max-width: 820px; }
.kicker { color: #d1a563; letter-spacing: .25em; font: 12px sans-serif; }
.scene-hero h1 { font-size: clamp(48px, 8vw, 94px); font-weight: 400; margin: 18px 0; }
.scene-hero p { line-height: 2; color: #d2c4ae; max-width: 680px; font-size: 17px; }

.section { padding: 90px 7vw; max-width: 1250px; margin: auto; }
.section h2 { font-size: 36px; font-weight: 400; color: #dfbd80; }
.section-intro { color: #a99d8b; line-height: 2; max-width: 760px; }

.story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 35px; }
.story-card { min-height: 260px; padding: 28px; background: #1c1510; border: 1px solid #76593666; transition: transform 0.25s var(--ease-smooth), border-color 0.25s ease; will-change: transform; }
.story-card:hover { transform: translateY(-5px); border-color: #c49a5e; }
.story-card .tag { font: 11px sans-serif; color: #bd9559; letter-spacing: .2em; }
.story-card h3 { font-size: 25px; font-weight: 400; margin: 15px 0; color: #e8d3ad; }
.story-card p { line-height: 1.9; color: #a99d8d; }

.wide-band { min-height: 70vh; padding: 100px 8vw; display: flex; align-items: center; background: linear-gradient(90deg, #0e0b09, #20170f, #0e0b09); }
.wide-band .quote { max-width: 900px; font-size: clamp(25px, 4vw, 46px); line-height: 1.8; color: #d9c08e; }
.backline { max-width: 1250px; margin: auto; padding: 30px 7vw 80px; }
.backline a { color: #d6ac68; text-decoration: none; }

@media (max-width: 800px) {
  .topbar { height: auto; min-height: 62px; padding: 12px 18px; align-items: flex-start; }
  .brand { font-size: 18px; }
  .topbar nav { gap: 9px 15px; justify-content: flex-end; }
  .topbar nav a { font-size: 12px; }
  .intro { padding-top: 140px; }
  .intro-actions { flex-direction: column; width: min(330px, 100%); }
  .intro-cards, .story-grid { grid-template-columns: 1fr; }
  .scene-hero { min-height: 90vh; padding: 120px 22px 55px; background-attachment: scroll; }
  .section { padding: 65px 22px; }
  .wide-band { min-height: 55vh; padding: 70px 22px; }
}