:root { --red:#e30613; --dark:#780008; --ink:#071426; --muted:#536272; --soft:#fff2f4; --line:#efd6da; --wrap:min(1120px,calc(100vw - 40px)); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#fff; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; line-height:1.7; }
a { color:inherit; }
.wrap { width:var(--wrap); margin:0 auto; }
header { position:sticky; top:0; z-index:20; background:rgba(255,255,255,.96); border-bottom:1px solid #f3e5e7; backdrop-filter:blur(14px); }
nav { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { text-decoration:none; font-size:23px; font-weight:900; }
.brand strong,.links .active { color:var(--red); }
.links { display:flex; align-items:center; gap:22px; font-size:14px; font-weight:800; }
.links a { text-decoration:none; }
.btn { display:inline-flex; align-items:center; justify-content:center; padding:11px 18px; border-radius:999px; color:#fff; background:linear-gradient(135deg,var(--red),var(--dark)); text-decoration:none; font-weight:850; }
.hero { padding:86px 0 68px; text-align:center; background:radial-gradient(circle at 50% 0,#ffe3e7,transparent 60%); }
.eyebrow { display:inline-block; padding:7px 12px; border-radius:999px; color:var(--red); background:var(--soft); border:1px solid var(--line); font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
h1 { max-width:860px; margin:18px auto 16px; font-size:clamp(38px,6vw,64px); line-height:1.05; letter-spacing:-.035em; }
.hero p { max-width:760px; margin:0 auto; color:var(--muted); font-size:18px; }
.crumbs { margin:0 0 18px; font-size:13px; font-weight:700; color:var(--muted); }
.crumbs a { color:var(--dark); text-decoration:none; }
.crumbs a:hover { text-decoration:underline; }
main { padding:52px 0 90px; }
.intro { display:grid; grid-template-columns:1.35fr .65fr; gap:28px; align-items:start; }
.intro-copy,.toc,.related { padding:28px; border:1px solid var(--line); border-radius:22px; }
.intro-copy { background:#fff; box-shadow:0 18px 45px rgba(30,13,18,.07); }
.intro-copy h2,.toc h2,.related h2 { margin:0 0 12px; }
.intro-copy p { margin:0; color:var(--muted); }
.toc,.related { background:var(--soft); }
.toc ol,.related ol { margin:12px 0 0; padding-left:22px; }
.toc a,.related a { color:var(--dark); font-weight:750; text-decoration:none; }
.toc a:hover,.related a:hover { text-decoration:underline; }
.posts { display:grid; gap:28px; margin-top:40px; }
.card { display:block; padding:28px; border:1px solid #f0e0e2; border-radius:24px; box-shadow:0 18px 48px rgba(30,13,18,.07); text-decoration:none; background:#fff; transition:transform .15s ease, box-shadow .15s ease; }
.card:hover { transform:translateY(-2px); box-shadow:0 22px 54px rgba(30,13,18,.1); }
.card .tag,.article .tag { color:var(--red); font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.card h2 { margin:8px 0 10px; font-size:clamp(22px,2.8vw,30px); line-height:1.2; }
.card p { margin:0; color:var(--muted); }
.card .meta { margin-top:14px; font-size:13px; font-weight:700; color:var(--dark); }
article.article { scroll-margin-top:96px; padding:34px; border:1px solid #f0e0e2; border-radius:24px; box-shadow:0 18px 48px rgba(30,13,18,.07); background:#fff; }
article.article h1 { margin:8px 0 14px; font-size:clamp(28px,4vw,44px); max-width:none; text-align:left; }
article.article h2 { margin:24px 0 8px; font-size:20px; }
article.article p,article.article li { color:var(--muted); }
article.article ul,article.article ol { padding-left:24px; }
.note { margin-top:22px; padding:16px 18px; border-left:4px solid var(--red); background:var(--soft); border-radius:0 12px 12px 0; color:var(--ink); }
.cta { margin-top:46px; padding:38px; border-radius:26px; color:#fff; background:linear-gradient(135deg,#970009,#520005); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.cta h2 { margin:0 0 8px; }
.cta p { margin:0; color:rgba(255,255,255,.82); }
.cta .btn { background:#fff; color:var(--dark); white-space:nowrap; }
.layout { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:28px; align-items:start; }
footer { padding:30px 0; color:#fff; background:#500006; }
.footer-row { display:flex; justify-content:space-between; flex-wrap:wrap; gap:18px; font-size:13px; }
.footer-row a { color:#fff; }
@media(max-width:780px){
  .links a:not(.btn){display:none}
  .intro,.layout{grid-template-columns:1fr}
  .hero{padding-top:58px}
  article.article,.card{padding:24px}
  .cta{align-items:flex-start;flex-direction:column;padding:28px}
}