:root { --deep:#2e243d; --plum:#5f477b; --lilac:#efe7f6; --ice:#fbf9fd; --ink:#362b46; --muted:#6f647d; --line:#e5d9ee; --gold:#b28c43; }
* { box-sizing:border-box; }
body { margin:0; background:var(--ice); color:var(--ink); font-family:Arial, Helvetica, sans-serif; line-height:1.65; }
a { color:inherit; }
.blog-shell { max-width:1120px; margin:0 auto; padding:0 22px; }
.blog-top { background:var(--deep); color:#fff; padding:18px 0; }
.blog-top-inner { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.brand { text-decoration:none; display:flex; flex-direction:column; line-height:1.1; }
.brand strong { font-family:Georgia, serif; font-size:24px; font-weight:500; }
.brand span { color:#d9c7e8; font-size:11px; letter-spacing:.12em; text-transform:uppercase; margin-top:5px; }
.back-link { color:#fff; text-decoration:none; font-size:13px; border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:8px 14px; }
.blog-hero { padding:64px 0 38px; background:linear-gradient(135deg,#fbf9fd 0%,#f2e9f8 100%); border-bottom:1px solid var(--line); }
.eyebrow { color:var(--plum); font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; }
h1,h2,h3 { font-family:Georgia, 'Times New Roman', serif; line-height:1.15; color:var(--deep); }
.blog-hero h1 { max-width:700px; font-size:clamp(38px,6vw,68px); font-weight:500; margin:14px 0 18px; }
.blog-hero p { max-width:680px; color:var(--muted); font-size:18px; margin:0; }
.blog-list { padding:44px 0 80px; }
.blog-list-head { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:20px; }
.blog-list-head h2 { margin:0; font-size:34px; font-weight:500; }
.blog-list-head p { margin:0; color:var(--muted); font-size:14px; }
.post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.post-card { display:flex; flex-direction:column; min-height:300px; padding:24px; background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:0 12px 30px rgba(58,42,75,.06); text-decoration:none; transition:transform .2s, box-shadow .2s; }
.post-card:hover { transform:translateY(-3px); box-shadow:0 16px 35px rgba(58,42,75,.12); }
.post-card .category { color:var(--plum); text-transform:uppercase; letter-spacing:.12em; font-size:10px; font-weight:700; }
.post-card h3 { font-size:25px; font-weight:500; margin:18px 0 12px; }
.post-card p { color:var(--muted); font-size:14px; margin:0 0 24px; }
.post-meta { display:flex; justify-content:space-between; gap:12px; color:#897b95; font-size:11px; margin-top:auto; padding-top:15px; border-top:1px solid var(--line); }
.blog-footer { background:var(--deep); color:#d9cfe3; padding:26px 0; font-size:12px; }
.blog-footer a { color:#fff; }
.article-wrap { max-width:780px; margin:0 auto; padding:64px 22px 86px; }
.article-head { border-bottom:1px solid var(--line); padding-bottom:30px; margin-bottom:34px; }
.article-head h1 { font-size:clamp(36px,6vw,60px); font-weight:500; margin:14px 0 18px; }
.article-description { color:var(--muted); font-size:19px; margin:0 0 18px; }
.article-meta { color:#897b95; font-size:12px; }
.article-body { font-size:17px; }
.article-body h2 { font-size:32px; font-weight:500; margin:44px 0 14px; }
.article-body h3 { font-size:23px; margin:28px 0 10px; }
.article-body p { margin:0 0 19px; }
.article-body ul,.article-body ol { padding-left:24px; margin:0 0 22px; }
.article-body li { margin:7px 0; }
.article-body strong { color:var(--deep); }
.callout { background:var(--lilac); border-left:4px solid var(--plum); padding:18px 20px; border-radius:0 14px 14px 0; margin:24px 0; }
.related { margin-top:48px; padding-top:26px; border-top:1px solid var(--line); }
.related a { color:var(--plum); font-weight:700; }
@media (max-width:760px) { .blog-shell { padding:0 16px; } .blog-hero { padding:44px 0 30px; } .blog-hero p { font-size:16px; } .blog-list { padding:32px 0 58px; } .blog-list-head { display:block; } .blog-list-head p { margin-top:8px; } .post-grid { grid-template-columns:1fr; } .post-card { min-height:0; } .article-wrap { padding:42px 18px 62px; } .article-body { font-size:16px; } .article-body h2 { font-size:28px; } .blog-top-inner { align-items:flex-start; } .brand strong { font-size:21px; } .back-link { font-size:11px; padding:7px 10px; } }