:root {
  color-scheme: dark;
  --ink: #141311;
  --ink-soft: #1d1b18;
  --paper: #f2ece2;
  --paper-soft: #d8cfc2;
  --orange: #c9923d;
  --yellow: #e2bb70;
  --red: #a86443;
  --smoke: #918981;
  --line-dark: rgba(226, 187, 112, 0.16);
  --line-light: rgba(55, 45, 35, 0.2);
  --shell: min(1420px, calc(100% - 80px));
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: smooth; }
body, h1, h2, h3, p, figure, blockquote, dl, dd, ol { margin: 0; }
body {
  min-width: 320px;
  overflow-x: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }

.masthead {
  width: var(--shell);
  min-height: 102px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
  border-bottom: 1px solid var(--line-dark);
}
.masthead-brand { display: flex; align-items: center; gap: 14px; }
.masthead-brand img, .colophon-logo img { border-radius: 17px; filter: drop-shadow(0 10px 24px rgba(201, 146, 61, .18)); }
.masthead-brand div, .colophon-logo div { display: grid; gap: 3px; }
.masthead-brand strong, .colophon-logo strong { font-size: 21px; letter-spacing: .09em; }
.masthead-brand span, .colophon-logo span { color: var(--smoke); font-size: 9px; letter-spacing: .22em; }
.masthead-statement { color: var(--paper-soft); font-family: "Songti SC", STSong, serif; font-size: 17px; letter-spacing: .16em; }
.masthead-seal { justify-self: end; display: flex; align-items: center; gap: 9px; color: #bbb0a6; font-size: 12px; letter-spacing: .08em; }
.masthead-seal i { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 16px rgba(226, 187, 112, .52); }

.opening { padding: 34px 0 0; }
.opening-banner { width: var(--shell); margin-inline: auto; overflow: hidden; background: #171513; }
.opening-banner img { width: 100%; height: auto; aspect-ratio: 1920 / 816; object-fit: cover; }
.opening-welcome {
  width: var(--shell);
  margin: 38px auto 0;
  display: grid;
  grid-template-columns: 170px minmax(0, 1.25fr) minmax(280px, .58fr);
  align-items: center;
  gap: clamp(35px, 5vw, 80px);
  padding: 54px clamp(30px, 5vw, 74px);
  border-radius: 28px;
  background: linear-gradient(120deg, #211c18, #151413 58%, #1e1a17);
  box-shadow: inset 0 0 0 1px var(--line-dark);
  overflow: hidden;
}
.welcome-emblem { position: relative; width: 170px; max-width: 100%; aspect-ratio: 1 / 1; align-self: center; justify-self: center; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(201,146,61,.16), transparent 66%); }
.welcome-emblem::before, .welcome-emblem::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(226,187,112,.26); }
.welcome-emblem::before { inset: 2px; }
.welcome-emblem::after { inset: 20px; border-style: dashed; opacity: .55; }
.welcome-emblem img { width: 63%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; filter: drop-shadow(0 18px 30px rgba(201,146,61,.24)); }
.welcome-copy > p:first-child { color: var(--orange); font: 700 10px/1 monospace; letter-spacing: .2em; }
.welcome-copy h1 { max-width: 820px; margin-top: 17px; font-family: "Songti SC", STSong, serif; font-size: clamp(42px, 4.8vw, 70px); font-weight: 600; line-height: 1.08; letter-spacing: -.045em; }
.welcome-intro { max-width: 760px; margin-top: 22px; color: #aaa098; font-size: 14px; line-height: 1.9; }
.welcome-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 25px; }
.welcome-tags span { padding: 8px 12px; border: 1px solid rgba(226,187,112,.22); border-radius: 999px; background: rgba(201,146,61,.06); color: #d7cec2; font-size: 10px; }
.welcome-quote { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding-left: clamp(24px, 4vw, 58px); border-left: 1px solid var(--line-dark); }
.welcome-quote > span { color: #71655e; font: 9px/1 monospace; letter-spacing: .2em; }
.welcome-quote strong { margin-top: 24px; color: var(--yellow); font-family: "Songti SC", STSong, serif; font-size: clamp(30px, 3.1vw, 44px); font-weight: 500; line-height: 1.35; }
.welcome-quote p { margin-top: 26px; color: #786e67; font-size: 10px; }

.lead-feature { width: var(--shell); margin: 120px auto 0; }
.feature-head { display: grid; grid-template-columns: .55fr 1.45fr; align-items: end; gap: 70px; margin-bottom: 44px; }
.feature-head p { align-self: start; color: #928980; font-size: 11px; letter-spacing: .12em; }
.feature-head p span { display: block; margin-bottom: 12px; color: var(--orange); font: 700 10px/1 monospace; letter-spacing: .2em; }
.feature-head h2 { font-family: "Songti SC", STSong, serif; font-size: clamp(44px, 5.2vw, 74px); font-weight: 500; line-height: 1.05; letter-spacing: -.045em; }
.lead-layout { display: grid; grid-template-columns: minmax(360px, .78fr) minmax(0, 1.22fr); min-height: 760px; overflow: hidden; border: 1px solid rgba(201,146,61,.24); border-radius: 28px; background: #f0e8dc; color: #241d18; }
.lead-poster { position: relative; overflow: hidden; background: #171513; }
.lead-poster img { width: 100%; height: 100%; object-fit: cover; }
.lead-poster figcaption { position: absolute; inset: auto 0 0; display: flex; justify-content: flex-end; padding: 22px 25px; background: linear-gradient(180deg, transparent, rgba(18,16,14,.9)); color: #f4e6cf; }
.lead-poster figcaption span { font-size: 12px; letter-spacing: .08em; }
.lead-story { display: flex; flex-direction: column; justify-content: center; padding: clamp(50px, 7vw, 105px); }
.lead-meta { display: flex; flex-wrap: wrap; border-block: 1px solid var(--line-light); }
.lead-meta span { padding: 12px 21px 12px 0; margin-right: 21px; border-right: 1px solid var(--line-light); color: #6b6057; font-size: 11px; }
.lead-story h3 { margin-top: 42px; font-family: "Songti SC", STSong, serif; font-size: clamp(52px, 7vw, 96px); font-weight: 600; letter-spacing: -.065em; }
.lead-hook { margin-top: 14px; color: #a35f3c; font-size: 18px; font-weight: 600; letter-spacing: .04em; }
.lead-copy { max-width: 680px; margin-top: 28px; color: #5c5149; font-size: 16px; line-height: 2; }
.lead-story blockquote { max-width: 680px; margin-top: 45px; padding: 25px 0 25px 29px; border-left: 3px solid var(--orange); color: #493a31; font-family: "Songti SC", STSong, serif; font-size: 22px; line-height: 1.7; }

.reel-section { margin-top: 120px; padding: 110px 0 95px; background: #1a1816; border-block: 1px solid var(--line-dark); }
.reel-heading { width: var(--shell); margin: 0 auto 55px; display: grid; grid-template-columns: .38fr 1fr; align-items: end; gap: 50px; }
.reel-heading > div span { color: var(--orange); font: 700 11px/1 monospace; }
.reel-heading > div p { margin-top: 11px; color: #8a7f77; font-size: 12px; }
.reel-heading h2 { font-family: "Songti SC", STSong, serif; font-size: clamp(38px, 4.8vw, 66px); font-weight: 500; letter-spacing: -.04em; }
.reel-carousel { width: var(--shell); margin-inline: auto; }
.reel-window { overflow: hidden; }
.reel-track { display: flex; transition: transform 720ms cubic-bezier(.22,.7,.24,1); will-change: transform; }
.reel-item { flex: 0 0 100%; display: grid; grid-template-columns: minmax(320px, 40%) 1fr; min-height: 610px; background: #151413; border: 1px solid var(--line-dark); }
.reel-item figure { position: relative; min-height: 100%; overflow: hidden; }
.reel-item figure img { width: 100%; height: 100%; object-fit: cover; }
.reel-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(42px, 7vw, 100px); }
.reel-copy > span { color: var(--orange); font-size: 10px; letter-spacing: .16em; }
.reel-copy h3 { margin-top: 10px; font-family: "Songti SC", STSong, serif; font-size: 38px; font-weight: 500; line-height: 1.2; }
.reel-hook { margin-top: 17px; color: var(--yellow); font-size: 13px; }
.reel-copy > p:not(.reel-hook) { margin-top: 18px; color: #aaa098; font-size: 12px; line-height: 1.85; }
.reel-copy dl { margin-top: 25px; padding-top: 17px; border-top: 1px solid var(--line-dark); }
.reel-copy dl div { display: grid; grid-template-columns: 43px 1fr; gap: 8px; padding: 4px 0; font-size: 10px; line-height: 1.5; }
.reel-copy dt { color: #625953; }
.reel-copy dd { color: #bdb3ab; }
.data-note { width: var(--shell); margin: 35px auto 0; color: #756b64; font-size: 10px; line-height: 1.8; }

.story-desk { width: var(--shell); margin: 165px auto; display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(70px, 10vw, 170px); }
.desk-title { position: sticky; top: 30px; align-self: start; }
.desk-title > p { color: var(--orange); font: 700 10px/1 monospace; letter-spacing: .19em; }
.desk-title h2 { margin-top: 28px; font-family: "Songti SC", STSong, serif; font-size: clamp(48px, 6vw, 82px); font-weight: 500; line-height: 1.08; letter-spacing: -.05em; }
.desk-lines { border-top: 1px solid var(--line-dark); }
.desk-lines article { position: relative; display: grid; grid-template-columns: 76px 1fr; column-gap: 25px; padding: 45px 0 52px; border-bottom: 1px solid var(--line-dark); }
.desk-lines article > b { grid-row: span 3; width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid var(--line-dark); border-radius: 50%; color: var(--yellow); font-family: "Songti SC", STSong, serif; font-size: 16px; }
.desk-lines h3 { font-size: 25px; font-weight: 500; }
.desk-lines article > p { max-width: 640px; margin-top: 16px; color: #9b9189; font-size: 14px; line-height: 1.9; }
.desk-lines article > span { margin-top: 22px; color: #554c47; font: 9px/1 monospace; letter-spacing: .16em; }

.legal-ledger { width: var(--shell); margin: 150px auto 120px; }
.ledger-head { display: grid; grid-template-columns: .6fr 1fr; align-items: end; gap: 50px; margin-bottom: 40px; }
.ledger-head p { color: var(--orange); font: 700 10px/1 monospace; letter-spacing: .18em; }
.ledger-head h2 { font-family: "Songti SC", STSong, serif; font-size: clamp(40px, 5vw, 68px); font-weight: 500; letter-spacing: -.045em; }
.ledger-table { border-top: 1px solid var(--line-dark); }
.ledger-table article { display: grid; grid-template-columns: 210px 1fr; gap: 25px; padding: 25px 0; border-bottom: 1px solid var(--line-dark); }
.ledger-table h3 { font-size: 15px; font-weight: 500; }
.ledger-table p { max-width: 850px; color: #8d837b; font-size: 12px; line-height: 1.8; }

.colophon { min-height: 180px; display: grid; grid-template-columns: 1.3fr repeat(2, 1fr); align-items: center; gap: 35px; padding: 30px max(40px, calc((100vw - 1420px) / 2)); border-top: 1px solid var(--line-dark); background: #0d0d0d; }
.colophon-logo { display: flex; align-items: center; gap: 14px; }
.colophon > p { color: #716761; font-size: 10px; line-height: 1.8; }

.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  :root { --shell: min(100% - 48px, 980px); }
  .masthead { grid-template-columns: 1fr auto; }
  .masthead-statement { display: none; }
  .opening-welcome { grid-template-columns: 130px 1fr; }
  .welcome-quote { grid-column: 2; padding: 30px 0 0; border-top: 1px solid var(--line-dark); border-left: 0; }
  .lead-layout { grid-template-columns: .9fr 1.1fr; min-height: 680px; }
  .lead-story { padding: 55px; }
  .story-desk { grid-template-columns: 1fr; }
  .desk-title { position: static; }
  .colophon { grid-template-columns: 1.4fr 1fr 1fr; }
}

@media (max-width: 760px) {
  :root { --shell: calc(100% - 28px); }
  .masthead { min-height: 84px; }
  .masthead-brand img { width: 47px; height: 47px; border-radius: 14px; }
  .masthead-brand strong { font-size: 18px; }
  .masthead-seal { font-size: 10px; }
  .opening { padding-top: 14px; }
  .opening-banner { width: 100%; }
  .opening-welcome { grid-template-columns: 1fr; gap: 30px; margin-top: 18px; padding: 35px 24px; border-radius: 20px; }
  .welcome-emblem { width: 132px; margin-inline: auto; }
  .welcome-copy h1 { font-size: clamp(38px, 11.5vw, 54px); line-height: 1.14; }
  .welcome-quote { grid-column: auto; padding: 28px 0 0; border-top: 1px solid var(--line-dark); border-left: 0; }
  .lead-feature { margin-top: 85px; }
  .feature-head { grid-template-columns: 1fr; gap: 22px; }
  .feature-head h2 { font-size: clamp(39px, 12vw, 58px); }
  .lead-layout { grid-template-columns: 1fr; border-radius: 20px; }
  .lead-poster { aspect-ratio: 2 / 3; }
  .lead-story { padding: 38px 25px 44px; }
  .lead-meta { display: grid; grid-template-columns: 1fr; }
  .lead-meta span { margin: 0; border-right: 0; border-bottom: 1px solid var(--line-light); }
  .lead-story h3 { margin-top: 31px; font-size: 55px; }
  .lead-story blockquote { font-size: 18px; }
  .reel-section { margin-top: 100px; padding: 75px 0 65px; }
  .reel-heading { grid-template-columns: 1fr; gap: 20px; }
  .reel-heading > p { display: none; }
  .reel-item { grid-template-columns: 1fr; min-height: 0; }
  .reel-item figure { aspect-ratio: 2 / 3; }
  .reel-copy { padding: 30px 24px 35px; }
  .reel-copy h3 { font-size: 34px; }
  .story-desk { margin: 105px auto; gap: 55px; }
  .desk-title h2 { font-size: 50px; }
  .desk-lines article { grid-template-columns: 58px 1fr; column-gap: 17px; }
  .desk-lines article > b { width: 46px; height: 46px; font-size: 13px; }
  .desk-lines h3 { font-size: 20px; }
  .legal-ledger { margin: 100px auto 85px; }
  .ledger-head { grid-template-columns: 1fr; gap: 20px; }
  .ledger-table article { grid-template-columns: 1fr; gap: 13px; }
  .colophon { grid-template-columns: 1fr; align-items: start; padding: 45px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}