.page-hero { background: var(--ink); color: #fff; padding: 72px 0 60px; position: relative; overflow: hidden; }
    .page-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(224,66,79,.35), transparent 55%); }
    .page-hero .wrap { position: relative; max-width: 820px; }
    .page-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); color: #fff; }
    .page-hero .lead { color: #cfc8d6; }
    .crumbs { font-size: .9rem; color: #9e96a8; margin: 0 0 18px; }
    .crumbs a { color: #cfc8d6; }
    .article { max-width: 760px; margin: 0 auto; padding: 0 20px; }
    .article h2 { margin-top: 1.8em; }
    .article p, .article li { color: var(--text); }
    .article ul, .article ol { padding-left: 1.2em; display: grid; gap: 8px; }
    .article figure { margin: 28px 0; }
    .article figure img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 24px 60px -28px rgba(20,16,28,.5); }
    .article figcaption { margin-top: 10px; font-size: .9rem; color: var(--muted); text-align: center; }
    .article blockquote { margin: 24px 0; padding: 18px 22px; background: #f3eee8; border-left: 4px solid var(--accent); border-radius: 0 14px 14px 0; font-size: 1.05rem; }
    .article blockquote cite { display: block; margin-top: 10px; font-style: normal; font-weight: 600; font-size: .92rem; color: var(--muted); }
    .table-wrap { overflow-x: auto; }
    .article table { width: 100%; border-collapse: collapse; }
    .article th, .article td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
    .article th { background: #f3eee8; }
    .post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
    .post { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
    .post:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -20px rgba(20,16,28,.35); }
    .post img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: #f3eee8; }
    .post .body { padding: 20px 22px 24px; }
    .post .tag { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; color: var(--accent); margin: 0 0 8px; }
    .post h3 { font-size: 1.25rem; margin-bottom: 8px; }
    .post p { margin: 0; color: var(--muted); font-size: .96rem; }
    .related { margin-top: 48px; }
    .cta-band { text-align: center; }
    .cta-band .btn { margin-top: 20px; }
    img { height: auto; }