/* ============================================================
   PPC 360 Ads: shared stylesheet
   Used by: Blog.html, post-template.html, all /posts/*.html
   Edit design here once; every page updates.
   ============================================================ */

/* ---------- Base / site chrome ---------- */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #1a1612;
}
header {
    background: #333;
    color: #fff;
    padding: 16px 0 12px;
    text-align: center;
}
header .brand {
    display: inline-block;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    letter-spacing: 0.01em;
}
header .brand span { color: #e08a5f; }
nav ul {
    padding: 0;
    margin: 10px 0 0;
    list-style: none;
    text-align: center;
}
nav ul li { display: inline; margin: 0 10px; }
nav ul li a { color: #fff; text-decoration: none; font-size: 14px; }
nav ul li a:hover { color: #e08a5f; }

.container { width: 80%; max-width: 860px; margin: auto; overflow: hidden; }
.main { margin-top: 20px; }

footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 14px 0;
    margin-top: 28px;
    font-size: 14px;
}
footer a { color: #fff; }

a { color: #b34a1e; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Blog listing (Blog.html) ---------- */
.blog-head {
    background: #fff;
    padding: 28px 24px;
    margin-bottom: 22px;
    box-shadow: 0 0 10px rgba(0,0,0,0.08);
}
.blog-head h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.6rem, 4vw, 2.3rem);
    margin: 0 0 0.5rem;
    color: #1a1612;
}
.blog-head p {
    font-family: 'Source Serif 4', Georgia, serif;
    color: #6b6058;
    margin: 0;
    font-size: 1.05rem;
}

.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 22px;
    margin-bottom: 28px;
}
.card {
    background: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,0.14); }
.card a.card-link { color: inherit; text-decoration: none; display: flex; flex-direction: column; height: 100%; }
.card .thumb {
    aspect-ratio: 3 / 2;
    background: #ede8df;
    overflow: hidden;
}
.card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .card-body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.card .kicker {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #b34a1e;
    margin-bottom: 8px;
}
.card h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.25rem;
    line-height: 1.25;
    margin: 0 0 10px;
    color: #1a1612;
}
.card .excerpt {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 0.95rem;
    color: #3d3530;
    margin: 0 0 16px;
    flex: 1;
}
.card .readmore {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #b34a1e;
}

/* ---------- Article body (.ac): the journal style ---------- */
.ac {
    --ink: #1a1612;
    --ink-mid: #3d3530;
    --ink-light: #6b6058;
    --cream-dark: #ede8df;
    --accent: #b34a1e;
    --accent-light: #f5ece7;
    --rule: #c8bfb0;
    background: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.08);
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 17px;
    line-height: 1.75;
    color: var(--ink);
    padding: 2rem 2.4rem 2.4rem;
}
.ac * { box-sizing: border-box; }
.ac .backlink {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-light);
    display: inline-block;
    margin-bottom: 1.5rem;
}
.ac .kicker {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 1rem;
}
.ac h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--ink);
    margin: 0 0 1.25rem;
    letter-spacing: -0.01em;
}
.ac .deck {
    font-size: 1.1rem;
    font-weight: 300;
    font-style: italic;
    color: var(--ink-mid);
    border-left: 3px solid var(--accent);
    padding-left: 1.1rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}
.ac .byline {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-light);
    padding-bottom: 1.25rem;
    border-bottom: 1.5px solid var(--ink);
    margin-bottom: 2rem;
}
.ac h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ink);
    margin: 2.25rem 0 0.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--rule);
}
.ac h3 {
    font-family: 'Source Serif 4', serif;
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--accent);
    margin: 1.5rem 0 0.35rem;
}
.ac p { margin: 0 0 1.1rem; }
.ac .pullquote {
    background: var(--cream-dark);
    border-left: 4px solid var(--accent);
    padding: 1.1rem 1.4rem;
    margin: 1.75rem 0;
    font-size: 1.05rem;
    font-style: italic;
    color: var(--ink-mid);
    line-height: 1.65;
}
.ac .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 1.5rem 0; }
.ac .stat { background: var(--cream-dark); border-top: 3px solid var(--accent); padding: 14px 16px; text-align: center; }
.ac .stat-val { font-family: 'Playfair Display', serif; font-size: 1.7rem; font-weight: 700; color: var(--accent); line-height: 1.1; display: block; }
.ac .stat-label { font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-light); margin-top: 5px; display: block; }
.ac ul, .ac ol { padding-left: 1.5rem; margin-bottom: 1.1rem; color: var(--ink-mid); }
.ac li { margin-bottom: 0.4rem; }
.ac .data-table { width: 100%; border-collapse: collapse; margin: 1.25rem 0 1.75rem; font-size: 14px; }
.ac .data-table th { background: var(--ink); color: #f7f4ee; text-align: left; padding: 9px 14px; font-family: 'Source Serif 4', serif; font-weight: 600; letter-spacing: 0.04em; font-size: 12px; text-transform: uppercase; }
.ac .data-table td { padding: 9px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; color: var(--ink-mid); }
.ac .data-table tr:nth-child(even) td { background: var(--cream-dark); }
.ac .data-table .num { font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 600; }
.ac .callout { background: var(--accent-light); border: 1px solid #e8c4b4; padding: 1.1rem 1.4rem; margin: 1.75rem 0; font-size: 0.95rem; line-height: 1.65; color: var(--ink-mid); }
.ac .callout strong { color: var(--accent); font-weight: 600; }
.ac .takeaways { background: var(--ink); color: #f7f4ee; padding: 1.75rem 2rem 1.25rem; margin: 2.5rem 0 1.75rem; }
.ac .takeaways h2 { font-family: 'Playfair Display', serif; color: #f7f4ee; border-top: none; padding-top: 0; margin-top: 0; margin-bottom: 1rem; font-size: 1.3rem; }
.ac .takeaways ul { color: #cdc6ba; padding-left: 1.25rem; }
.ac .takeaways li { border-bottom: 1px solid #2e2b26; padding-bottom: 0.5rem; margin-bottom: 0.5rem; font-size: 15px; line-height: 1.6; }
.ac .takeaways li:last-child { border-bottom: none; }
.ac .cta { border: 1.5px solid var(--ink); padding: 1.75rem; margin-top: 1.75rem; text-align: center; }
.ac .cta p { color: var(--ink-mid); font-style: italic; margin-bottom: 1rem; }
.ac .cta a { display: inline-block; background: var(--accent); color: #fff; text-decoration: none; font-family: 'Source Serif 4', serif; font-size: 14px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; padding: 11px 28px; }
.ac .cta a:hover { text-decoration: none; opacity: 0.92; }
.ac strong { font-weight: 600; color: var(--ink); }
.ac a { color: var(--accent); }

@media (max-width: 700px) {
    .container { width: 92%; }
    .ac { padding: 1.5rem 1.3rem 1.8rem; }
    .ac .stat-row { grid-template-columns: 1fr; }
    .ac .data-table { font-size: 13px; }
}

/* ---------- Pagination (Blog.html) ---------- */
.pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 8px 0 28px; }
.pager .page-btn {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 14px;
    min-width: 38px;
    text-align: center;
    padding: 8px 12px;
    border: 1px solid #c8bfb0;
    background: #fff;
    color: #3d3530;
    text-decoration: none;
}
.pager a.page-btn:hover { border-color: #b34a1e; color: #b34a1e; text-decoration: none; }
.pager .page-btn.active { background: #b34a1e; color: #fff; border-color: #b34a1e; }
.pager .page-btn.disabled { color: #cfc7b8; }