:root{
  --bg:#f5f3ef;
  --card:#fffdfa;
  --ink:#171412;
  --muted:#5f5650;
  --line:#dfd6cf;
  --accent:#b65f2f;
  --accent-2:#e9c9ab;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI",Tahoma,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 460px at 20% -10%, #f0dfce 0%, transparent 65%),
    radial-gradient(1000px 420px at 90% -15%, #e7d6c6 0%, transparent 62%),
    var(--bg);
}
.wrap{width:min(1200px,94vw);margin:0 auto}
.hero{padding:20px 0 14px}
.doc-topline{
  margin:0;
  text-align:center;
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;
  color:#6b635c;
  font-size:37px;
}
.doc-divider{
  border:0;
  border-top:1px solid #d8cfc8;
  margin:16px 0;
}
.doc-title{
  margin:0;
  text-align:center;
  font-size:72px;
  line-height:1.08;
  font-weight:700;
  letter-spacing:.01em;
}
.doc-meta{
  display:grid;
  grid-template-columns:1fr 1.8fr;
  border:1px solid var(--line);
  background:var(--card);
}
.doc-meta-left{
  padding:18px 20px;
  border-right:1px solid var(--line);
}
.doc-meta-left p{
  margin:8px 0;
  font-size:31px;
}
.doc-meta-right{
  padding:18px 24px;
}
.doc-meta-right p{
  margin:0;
  color:#2b2520;
  font-size:32px;
  line-height:1.55;
}
.doc-meta a{color:#153ca8;text-decoration:underline}
.kicker{
  margin:0 0 6px;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
h1{margin:0 0 10px;font-size:42px;line-height:1.04}
.lead{margin:0;color:var(--muted);line-height:1.56}
.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pill{
  font-size:12px;
  border:1px solid var(--line);
  background:var(--card);
  padding:6px 10px;
  border-radius:999px;
}
.hero-shot,.shot{
  margin:0;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  overflow:hidden;
}
.hero-shot img,.shot img{display:block;width:100%;height:auto}

.layout{
  display:grid;
  grid-template-columns:250px minmax(0,1fr);
  gap:18px;
  align-items:start;
  padding:10px 0 26px;
}
.toc{
  position:sticky;
  top:10px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:8px;
}
.toc nav{display:grid;gap:2px}
.toc a{
  color:var(--muted);
  text-decoration:none;
  border-radius:9px;
  padding:8px 10px;
  font-size:13px;
}
.toc a:hover{background:#f4ece5;color:var(--ink)}
.toc a.active{background:var(--accent);color:#fff}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px;
  margin-bottom:14px;
}
h2{margin:0 0 10px;font-size:22px}
h3{margin:8px 0 8px;font-size:15px}
p{margin:8px 0;line-height:1.55}
ul,ol{margin:8px 0 0 20px;padding:0;line-height:1.55}
li{margin:4px 0}
.hint{
  background:#fff4eb;
  border:1px solid var(--accent-2);
  padding:10px 12px;
  border-radius:10px;
}
table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}
th,td{
  border:1px solid var(--line);
  padding:10px;
  text-align:left;
  vertical-align:top;
}
th{background:#f7efe8}
pre{
  margin:0;
  background:#1f1a17;
  color:#fef4e8;
  border-radius:10px;
  padding:12px;
  overflow:auto;
  font-size:13px;
}
.flag-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:8px;
  margin-top:10px;
}
.flag-grid span{
  border:1px solid var(--line);
  background:#fffaf5;
  border-radius:10px;
  padding:8px 10px;
  font-size:14px;
}
code{
  background:#f2ebe4;
  border-radius:5px;
  padding:1px 5px;
}
pre code{background:none;padding:0}
.footer{
  border-top:1px solid var(--line);
  color:var(--muted);
  padding:18px 0 28px;
  font-size:13px;
}

@media (max-width: 980px){
  .doc-topline{font-size:23px}
  .doc-title{font-size:44px}
  .doc-meta{grid-template-columns:1fr}
  .doc-meta-left{border-right:0;border-bottom:1px solid var(--line)}
  .doc-meta-left p,.doc-meta-right p{font-size:17px}
  .layout{grid-template-columns:1fr}
  .toc{
    position:static;
    overflow:auto;
  }
  .toc nav{
    display:flex;
    gap:6px;
    min-width:max-content;
  }
  .toc a{white-space:nowrap}
}