/* Reuses tokens and fonts defined in /styles.css (--gold, --emerald, --muted, --serif, etc.) — do not redeclare :root here. */

.page-banner { background: var(--emerald-dark); padding: 32px 24px; text-align: center; }
.page-banner .tag { color: var(--gold-light); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.page-banner h1 { font-family: var(--serif); color: #fff; font-size: 2rem; font-weight: 700; margin-top: 10px; max-width: 640px; margin-left: auto; margin-right: auto; letter-spacing: -0.01em; }
.page-banner p { color: rgba(255,255,255,0.75); font-size: 0.9rem; margin-top: 10px; }

/* Listing page */
main { max-width: 720px; margin: 0 auto; padding: 48px 24px 80px; }
.group-heading { font-family: var(--sans); font-size: 0.85rem; font-weight: 600; color: var(--muted); margin: 32px 0 4px; text-transform: uppercase; letter-spacing: 0.06em; }
.post-card { display: block; padding: 24px 0; border-bottom: 1px solid var(--border); }
.post-card:hover .post-title { text-decoration: underline; }
.post-title { font-family: var(--serif); font-weight: 700; font-size: 1.4rem; color: var(--text-warm); margin-bottom: 8px; }
.post-excerpt { font-size: 0.95rem; color: var(--muted); margin-bottom: 8px; }
.post-meta { font-size: 0.8rem; color: var(--emerald); font-weight: 500; }

/* Article page */
article { max-width: 680px; margin: 0 auto; padding: 48px 24px 32px; }
article h2 { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; color: var(--text-warm); margin-top: 36px; margin-bottom: 12px; }
article p { margin-bottom: 16px; font-size: 1rem; }
article ul { margin: 0 0 16px 20px; }
article li { margin-bottom: 8px; }
.callout { background: var(--gold-light); border-left: 3px solid var(--gold); padding: 16px 20px; border-radius: 4px; margin: 24px 0; font-size: 0.95rem; color: var(--muted); }
.cta-box { max-width: 680px; margin: 0 auto 64px; padding: 32px 24px; background: var(--emerald-dark); border-radius: 12px; text-align: center; }
.cta-box h3 { font-family: var(--serif); color: #fff; font-size: 1.4rem; margin-bottom: 8px; }
.cta-box p { color: rgba(255,255,255,0.8); font-size: 0.95rem; margin-bottom: 16px; }

/* Related posts */
.related { max-width: 680px; margin: 0 auto 48px; padding: 0 24px; }
.related h3 { font-family: var(--serif); font-size: 1.2rem; font-weight: 700; color: var(--text-warm); margin-bottom: 12px; }
.related a { display: block; font-size: 0.95rem; margin-bottom: 8px; }

footer { text-align: center; padding: 32px 24px; font-size: 0.8rem; color: var(--muted); border-top: 1px solid var(--border); }