:root{--bg:#fcf6e9;--card:#fffdf8;--ink:#342c24;--muted:#74695e;--accent:#8b5e28;--line:#e6dac5;--shadow:0 12px 34px rgba(77,54,30,.08)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:linear-gradient(180deg,#fffaf0,#fff);line-height:1.75}
a{color:#7b4d1d;text-underline-offset:3px}.wrap{max-width:1080px;margin:auto;padding:0 20px}
header{position:sticky;top:0;z-index:10;background:rgba(252,246,233,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.header{min-height:68px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.brand{text-decoration:none;color:var(--ink);font-weight:900}.brand span{color:var(--accent)}
nav{display:flex;gap:15px;flex-wrap:wrap}nav a{text-decoration:none;color:var(--ink);font-size:.94rem}
.hero{padding:68px 0 34px}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;font-weight:800;color:var(--accent)}
h1{font-size:clamp(2.2rem,5vw,4.2rem);line-height:1.1;margin:.3em 0}h2{font-size:1.7rem;line-height:1.3;margin-top:2em}h3{font-size:1.18rem}
.lead{font-size:1.17rem;color:var(--muted);max-width:790px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:var(--shadow);color:inherit;text-decoration:none}
.card:hover{transform:translateY(-2px);transition:.15s ease}.card h3{margin:.55em 0}
.badge{display:inline-block;background:#f1e5d1;color:#755021;border-radius:999px;padding:4px 9px;font-size:.78rem;font-weight:800}
.article-shell{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:32px;align-items:start}
.article{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:34px;box-shadow:var(--shadow)}
.toc{position:sticky;top:88px;background:#fffaf1;border:1px solid var(--line);border-radius:14px;padding:18px}
.toc strong{display:block;margin-bottom:8px}.toc a{display:block;text-decoration:none;margin:6px 0;font-size:.92rem}
.note{background:#fff8eb;border-left:4px solid #b78b50;padding:14px 16px;color:var(--muted)}
.cta{display:inline-block;background:#6d471d;color:#fff;text-decoration:none;border-radius:10px;padding:11px 17px;font-weight:800}
.breadcrumbs,.meta{color:var(--muted);font-size:.9rem}.related{border-top:1px solid var(--line);margin-top:34px;padding-top:22px}
footer{border-top:1px solid var(--line);margin-top:58px;padding:28px 0 42px;color:var(--muted);font-size:.92rem}
.footer{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}.article-shell{grid-template-columns:1fr}.toc{position:static;order:-1}}
@media(max-width:640px){nav{display:none}.grid{grid-template-columns:1fr}.hero{padding-top:42px}.article{padding:22px}}