:root { --ink: #181310; --paper: #f4f1ea; --gold: #d8ad62; --green: #173d34; --line: rgba(43, 31, 22, .16); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: #292019; font-family: "Noto Serif SC", "Songti SC", serif; }
a { color: inherit; text-decoration: none; }
.bar { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 max(20px, calc((100vw - 1100px) / 2)); background: #12100e; color: #f8f1e6; }
.brand { color: #e9c77f; font-size: 22px; letter-spacing: .08em; }
.bar nav { display: flex; gap: 24px; color: rgba(255,255,255,.72); font-size: 13px; }
.article { width: min(760px, calc(100% - 40px)); margin: 0 auto; padding: 90px 0 84px; }
.crumb { color: #8d6b43; font-size: 12px; letter-spacing: .08em; }
h1 { margin: 20px 0 20px; color: var(--ink); font-size: clamp(38px, 6vw, 62px); font-weight: 500; line-height: 1.25; letter-spacing: 0; }
.lead { max-width: 680px; color: #655a51; font-size: 17px; line-height: 1.9; }
.meta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 30px; padding: 17px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: #83766a; font-family: Arial, sans-serif; font-size: 12px; }
.toc { margin: 44px 0; padding: 24px 28px; border-left: 3px solid var(--gold); background: #e9e2d6; }
.toc strong { display: block; margin-bottom: 13px; color: #634625; font-size: 14px; }
.toc a { display: block; padding: 5px 0; color: #5d5044; font-size: 14px; }
section { margin-top: 52px; }
h2 { margin: 0 0 18px; color: #211812; font-size: 28px; font-weight: 500; line-height: 1.45; }
h3 { margin: 30px 0 10px; color: #35271d; font-size: 19px; font-weight: 500; }
p, li { color: #5c5148; font-size: 16px; line-height: 2; }
ul, ol { padding-left: 1.3em; }
.note { margin-top: 24px; padding: 20px 22px; border: 1px solid var(--line); background: #faf7f0; }
.note strong { color: #76572f; }
.faq { margin-top: 46px; border-top: 1px solid var(--line); }
.faq details { padding: 22px 0; border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; color: #33251b; font-size: 18px; }
.faq p { margin: 14px 0 0; font-size: 14px; }
.cta { margin-top: 58px; padding: 34px; background: var(--green); color: #f7f1e8; }
.cta h2, .cta p { color: inherit; }
.cta p { margin: 10px 0 22px; color: rgba(255,255,255,.72); font-size: 14px; }
.cta a { display: inline-block; padding: 12px 18px; background: #edc67d; color: #23190e; font-family: Arial, sans-serif; font-size: 14px; font-weight: 700; }
footer { padding: 32px 20px; background: #0d0b0a; color: rgba(255,255,255,.52); text-align: center; font-family: Arial, sans-serif; font-size: 11px; }
@media (max-width: 620px) { .bar nav { display: none; } .article { width: min(100% - 32px, 760px); padding: 62px 0; } .lead { font-size: 15px; } .toc { margin: 34px 0; padding: 20px; } section { margin-top: 42px; } h2 { font-size: 24px; } p, li { font-size: 15px; } .cta { padding: 26px 22px; } }