:root {
  --night: #17100a;
  --night-2: #24170e;
  --paper: #f3eadb;
  --paper-2: #e8dac4;
  --ink: #23170e;
  --muted: #7f6e5d;
  --rule: rgba(93, 63, 37, .24);
  --gold: #d5a15d;
  --gold-2: #efcf91;
  --rust: #b15f36;
  --sage: #9dac86;
  --white: #fffaf0;
  --radius: 18px;
  --wide: 1300px;
  --serif: "STSong", "Songti SC", "SimSun", serif;
  --sans: "Microsoft YaHei", "PingFang SC", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.dossier { min-width: 320px; margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body.dossier.dark { background: var(--night); color: var(--paper); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

.wrap { width: min(calc(100% - 48px), var(--wide)); margin: 0 auto; }
.site-nav { position: absolute; z-index: 10; top: 0; right: 0; left: 0; padding: 25px 0; color: var(--paper); }
.site-nav.is-paper { position: relative; border-bottom: 1px solid var(--rule); color: var(--ink); background: var(--paper); }
.site-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.case-mark { display: inline-flex; align-items: center; gap: 11px; font-size: 10px; font-weight: 900; letter-spacing: .18em; white-space: nowrap; }
.case-mark__dot { width: 28px; height: 28px; border: 1px solid currentColor; border-radius: 50%; }
.nav-links { display: flex; align-items: center; gap: 25px; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.nav-links a { opacity: .75; transition: opacity .2s ease, color .2s ease; }
.nav-links a:hover { color: var(--gold-2); opacity: 1; }
.site-nav.is-paper .nav-links a:hover { color: var(--rust); }
.mobile-film-link { display: none; }

.cover-hero { position: relative; min-height: min(880px, 100svh); overflow: hidden; background: #120d08; }
.cover-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cover-hero::after { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 7, 5, .62) 0%, rgba(10, 7, 5, .04) 31%, rgba(10, 7, 5, .08) 62%, rgba(10, 7, 5, .88) 100%); content: ""; pointer-events: none; }
.cover-hero__caption { position: absolute; z-index: 1; right: 0; bottom: 42px; left: 0; color: var(--paper); }
.cover-hero__caption-inner { display: flex; align-items: end; justify-content: space-between; gap: 28px; }
.cover-hero__caption p { max-width: 395px; margin: 0; font-size: 13px; line-height: 1.8; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--gold-2); font-size: 10px; font-weight: 900; letter-spacing: .17em; }
.eyebrow::before { width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 50%; content: ""; }
.cover-hero__caption .eyebrow { margin-bottom: 13px; }
.cover-hero__fact { max-width: 194px; padding-left: 21px; border-left: 1px solid rgba(239, 207, 145, .6); color: #ead9bf; font-size: 10px; line-height: 1.7; letter-spacing: .09em; }

.intro-band { padding: clamp(68px, 11vw, 160px) 0; background: var(--paper); }
.intro-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .72fr); gap: clamp(50px, 10vw, 160px); align-items: end; }
.intro-grid h1, .page-head h1 { max-width: 800px; margin: 24px 0 0; font-family: var(--serif); font-size: clamp(43px, 5.8vw, 81px); font-weight: 400; line-height: 1.08; letter-spacing: -.075em; text-wrap: pretty; }
.intro-grid h1 em, .page-head h1 em { color: var(--rust); font-style: normal; }
.intro-grid p, .page-head__copy { margin: 0; color: var(--muted); font-size: 14px; line-height: 2; }
.intro-grid__meta { display: grid; gap: 14px; padding-bottom: 4px; }
.intro-grid__meta div { padding: 14px 0; border-top: 1px solid var(--rule); }
.intro-grid__meta b, .intro-grid__meta span { display: block; }
.intro-grid__meta b { color: var(--rust); font-size: 9px; letter-spacing: .16em; }
.intro-grid__meta span { margin-top: 7px; color: #5f4c3a; font-size: 12px; line-height: 1.7; }

.quick-links { background: var(--night); color: var(--paper); }
.quick-links__inner { display: grid; grid-template-columns: 1fr 1fr; }
.quick-link { position: relative; min-height: 260px; padding: 39px clamp(25px, 4vw, 62px); border-right: 1px solid rgba(255,255,255,.16); overflow: hidden; }
.quick-link:last-child { border-right: 0; }
.quick-link::after { position: absolute; right: 35px; bottom: 28px; color: var(--gold); font-family: var(--serif); font-size: 44px; content: "↗"; transition: transform .25s ease; }
.quick-link:hover::after { transform: translate(5px, -5px); }
.quick-link__label { color: var(--gold-2); font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.quick-link h2 { max-width: 400px; margin: 27px 0 10px; font-family: var(--serif); font-size: clamp(30px, 3.6vw, 47px); font-weight: 400; letter-spacing: -.065em; }
.quick-link p { max-width: 330px; margin: 0; color: #c8bba9; font-size: 12px; line-height: 1.75; }

.section { padding: clamp(75px, 10vw, 142px) 0; }
.section--paper { background: var(--paper); }
.section--ink { background: var(--night); color: var(--paper); }
.section--warm { background: var(--paper-2); }
.section-heading { display: grid; grid-template-columns: minmax(220px, .55fr) minmax(0, 1.45fr); gap: clamp(35px, 8vw, 120px); align-items: start; }
.section-heading h2 { margin: 20px 0 0; font-family: var(--serif); font-size: clamp(37px, 4.65vw, 66px); font-weight: 400; line-height: 1.08; letter-spacing: -.07em; text-wrap: pretty; }
.section-heading__copy { max-width: 590px; margin: 0; padding-top: 32px; color: var(--muted); font-size: 14px; line-height: 1.95; }
.section--ink .section-heading__copy { color: #cdbdab; }

.document-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 57px; background: var(--rule); border-top: 1px solid var(--rule); }
.document-card { display: flex; min-height: 265px; flex-direction: column; padding: 24px; background: var(--paper); transition: background .25s ease, color .25s ease; }
.document-card:hover { background: var(--night-2); color: var(--paper); }
.document-card__kind { color: var(--rust); font-size: 9px; font-weight: 900; letter-spacing: .15em; }
.document-card h3 { margin: 39px 0 11px; font-family: var(--serif); font-size: 28px; font-weight: 400; line-height: 1.08; letter-spacing: -.055em; }
.document-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.75; }
.document-card:hover p { color: #d4c5b3; }
.document-card__go { margin-top: auto; padding-top: 22px; color: var(--rust); font-size: 11px; font-weight: 900; }
.document-card:hover .document-card__go { color: var(--gold-2); }

.proof-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(35px, 6vw, 90px); margin-top: 62px; }
.proof-quote { align-self: end; padding: 32px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.proof-quote p { margin: 0; font-family: var(--serif); font-size: clamp(27px, 3.15vw, 43px); line-height: 1.4; letter-spacing: -.05em; }
.proof-quote small { display: block; margin-top: 20px; color: var(--rust); font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.proof-list { display: grid; gap: 0; }
.proof-list article { display: grid; grid-template-columns: 49px 1fr; gap: 17px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.proof-list b { color: var(--rust); font-family: var(--serif); font-size: 22px; font-weight: 400; }
.proof-list h3 { margin: 0; font-size: 14px; letter-spacing: -.03em; }
.proof-list p { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.75; }

.page-hero { position: relative; overflow: hidden; min-height: 460px; padding: 144px 0 72px; color: var(--paper); background: var(--night); }
.page-hero--image { min-height: 580px; background: #110c08; }
.page-hero--image::before { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,9,5,.91), rgba(15,9,5,.48) 54%, rgba(15,9,5,.27)); content: ""; }
.page-hero--image .page-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .76; mix-blend-mode: screen; }
.page-hero__content { position: relative; z-index: 1; }
.page-hero h1 { max-width: 780px; margin: 19px 0 0; font-family: var(--serif); font-size: clamp(48px, 6.2vw, 85px); font-weight: 400; line-height: 1.05; letter-spacing: -.08em; }
.page-hero h1 em { color: var(--gold-2); font-style: normal; }
.page-hero p { max-width: 530px; margin: 22px 0 0; color: #d7c6b0; font-size: 14px; line-height: 1.9; }
.page-hero__meta { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 31px; }
.page-hero__meta span { border: 1px solid rgba(239,207,145,.4); padding: 8px 10px; color: var(--gold-2); font-size: 10px; letter-spacing: .08em; }

.page-head { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(35px, 8vw, 130px); align-items: end; }
.page-head__copy { max-width: 505px; }
.script-thread { margin-top: 67px; border-top: 1px solid var(--rule); }
.script-beat { display: grid; grid-template-columns: 96px minmax(0, .85fr) minmax(0, 1.15fr); gap: 25px; padding: 34px 0; border-bottom: 1px solid var(--rule); }
.script-beat__no { color: var(--rust); font-family: var(--serif); font-size: 31px; }
.script-beat h2 { margin: 0; font-family: var(--serif); font-size: clamp(26px, 3vw, 39px); font-weight: 400; letter-spacing: -.06em; }
.script-beat h2 small { display: block; margin-top: 8px; color: var(--rust); font-family: var(--sans); font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.script-beat p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.9; }
.script-beat blockquote { margin: 17px 0 0; color: var(--ink); font-family: var(--serif); font-size: 18px; line-height: 1.65; }
.script-note { margin-top: 52px; padding: 28px; background: var(--night); color: var(--paper); }
.script-note b { color: var(--gold-2); font-size: 9px; letter-spacing: .14em; }
.script-note p { max-width: 700px; margin: 15px 0 0; font-family: var(--serif); font-size: 25px; line-height: 1.5; letter-spacing: -.045em; }
.screenplay { margin-top: 58px; padding: clamp(25px, 5vw, 70px); background: #fffaf1; border: 1px solid #d7c4ab; }
.screenplay__top { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding-bottom: 22px; border-bottom: 1px solid var(--rule); }
.screenplay__top h2 { margin: 0; font-family: var(--serif); font-size: 36px; font-weight: 400; letter-spacing: -.06em; }
.screenplay__top span { color: var(--muted); font-size: 10px; }
.screenplay__body { max-width: 760px; margin: 38px auto 0; font-family: var(--serif); font-size: 17px; line-height: 2.05; }
.screenplay__body h3 { margin: 42px 0 14px; color: var(--rust); font-family: var(--sans); font-size: 10px; letter-spacing: .14em; }
.screenplay__body p { margin: 0 0 18px; }
.dialogue { max-width: 420px; margin: 27px auto; }
.dialogue b { display: block; margin-bottom: 6px; font-family: var(--sans); font-size: 11px; letter-spacing: .12em; }
.dialogue p { margin: 0; }

.method-flow { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 61px; background: rgba(255,255,255,.18); }
.method-step { min-height: 276px; padding: 29px; background: var(--night); }
.method-step__no { color: var(--gold); font-family: var(--serif); font-size: 28px; }
.method-step h2 { margin: 35px 0 10px; font-family: var(--serif); font-size: 31px; font-weight: 400; letter-spacing: -.055em; }
.method-step p { margin: 0; color: #cdbda9; font-size: 12px; line-height: 1.85; }
.method-step small { display: block; margin-top: 21px; color: var(--gold-2); font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.quality-gates { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(36px, 7vw, 110px); margin-top: 95px; padding-top: 30px; border-top: 1px solid var(--rule); }
.quality-gates h2 { margin: 15px 0 0; font-family: var(--serif); font-size: 44px; font-weight: 400; line-height: 1.1; letter-spacing: -.07em; }
.gate-list { margin: 0; padding: 0; list-style: none; }
.gate-list li { display: grid; grid-template-columns: 42px 1fr; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--rule); color: var(--muted); font-size: 13px; line-height: 1.75; }
.gate-list b { color: var(--rust); font-family: var(--serif); font-size: 20px; font-weight: 400; }

.bottom-cta { display: flex; align-items: center; justify-content: space-between; gap: 27px; padding: clamp(33px, 6vw, 65px); background: var(--paper-2); }
.bottom-cta h2 { max-width: 650px; margin: 0; font-family: var(--serif); font-size: clamp(30px, 3.8vw, 53px); font-weight: 400; line-height: 1.1; letter-spacing: -.07em; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 17px; min-height: 46px; border: 1px solid currentColor; padding: 0 17px; font-size: 11px; font-weight: 900; letter-spacing: .02em; transition: transform .2s ease, background .2s ease, color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button--night { border-color: var(--night); background: var(--night); color: var(--paper); }
.button--night:hover { background: var(--rust); border-color: var(--rust); }
.button--line { color: var(--ink); }
.button--line:hover { background: var(--ink); color: var(--paper); }
.button--gold { border-color: var(--gold); color: var(--gold-2); }
.button--gold:hover { border-color: var(--gold-2); background: var(--gold-2); color: var(--night); }

.site-footer { padding: 31px 0; color: #cdbca7; background: #100b07; }
.site-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 10px; letter-spacing: .04em; }
.site-footer a:hover { color: var(--gold-2); }

@media (max-width: 900px) {
  .cover-hero { min-height: 72svh; }
  .cover-hero__caption-inner, .intro-grid, .section-heading, .page-head, .proof-grid, .quality-gates { grid-template-columns: 1fr; }
  .cover-hero__caption-inner { display: grid; }
  .cover-hero__fact { max-width: none; }
  .document-grid { grid-template-columns: repeat(2, 1fr); }
  .script-beat { grid-template-columns: 70px 1fr; }
  .script-beat > p { grid-column: 2; }
  .method-flow { grid-template-columns: 1fr; }
  .bottom-cta { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 620px) {
  .wrap { width: min(calc(100% - 28px), var(--wide)); }
  .site-nav { padding: 17px 0; }
  .case-mark span:last-child { display: none; }
  .nav-links { display: none; }
  .mobile-film-link { display: inline-flex; margin-left: auto; color: var(--paper); font-size: 10px; font-weight: 900; letter-spacing: .04em; white-space: nowrap; }
  .cover-hero { min-height: 67svh; }
  .cover-hero__caption { bottom: 25px; }
  .cover-hero__caption p { font-size: 12px; }
  .cover-hero__fact { display: none; }
  .intro-band, .section { padding: 66px 0; }
  .quick-links__inner, .document-grid { grid-template-columns: 1fr; }
  .quick-link { min-height: 215px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.16); }
  .quick-link:last-child { border-bottom: 0; }
  .document-card { min-height: 220px; }
  .section-heading h2 { font-size: 38px; }
  .page-hero { min-height: 410px; padding: 118px 0 57px; }
  .page-hero--image { min-height: 490px; }
  .script-beat { gap: 15px; padding: 27px 0; }
  .script-beat__no { font-size: 25px; }
  .screenplay__top { align-items: flex-start; flex-direction: column; }
  .screenplay__body { font-size: 16px; }
  .site-footer__inner { align-items: flex-start; flex-direction: column; }
}