/* Shared rules, identical across both blog posts. Page-specific content (checklist/callout,
   list margins, body background) stays inline in each post. --muted/--border now live as
   --web-muted/--web-border in css/site.css (web-specific values without a token equivalent). */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--color-text-primary);
    line-height: 1.65;
}

.wrap {
    max-width: 820px;
    margin: 0 auto;
    padding: 24px;
}

.back-link {
    display: inline-block;
    margin-bottom: 20px;
    color: var(--color-primary-dark);
    text-decoration: none;
    font-weight: 600;
}

article {
    background: var(--color-surface);
    border: 1px solid var(--web-border);
    border-radius: var(--radius-lg);
    padding: clamp(22px, 5vw, 42px);
    box-shadow: 0 12px 30px rgba(38, 87, 69, 0.08);
}

.meta {
    color: var(--web-muted);
    font-size: 14px;
    margin-bottom: 12px;
}

h1 {
    font-size: clamp(30px, 5vw, 44px);
    line-height: 1.15;
    margin-bottom: 16px;
}

.lead {
    font-size: 18px;
    color: #2d4037;
    margin-bottom: 28px;
}

h2 {
    margin-top: 32px;
    margin-bottom: 12px;
    font-size: 24px;
}

p {
    margin-bottom: 12px;
}

li {
    margin-bottom: 12px;
}

.cta {
    margin-top: 32px;
}

.cta a {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    padding: 12px 20px;
    border-radius: var(--radius-md);
    transition: background 0.2s ease;
}

.cta a:hover {
    background: var(--color-primary-dark);
}