@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&family=Inter:wght@400;500;600&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
    --forest: #243d35;
    --forest2: #1a2e28;
    --stone: #6b6560;
    --sand: #f0ebe3;
    --cream: #faf8f5;
    --text: #2a2825;
    --muted: #9a928a;
    --accent: #c17f3b;
    --border: #e2dbd2;
    --white: #fff;
}
body { font-family: 'Inter', -apple-system, sans-serif;
       background: var(--cream); color: var(--text); line-height: 1.65; }
a { color: inherit; text-decoration: none; }

/* ── Hero ── */
.site-hero { position: relative; width: 100%; overflow: hidden; max-height: 82vh; }
.site-hero img { width: 100%; display: block; max-height: 82vh;
                 object-fit: cover; object-position: center 25%; }
.site-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.6) 100%);
    display: flex; flex-direction: column; align-items: center;
    justify-content: flex-end; padding: 52px 24px; text-align: center;
}
.site-hero-overlay h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2.5rem; font-weight: 800; color: #fff; line-height: 1.2;
    text-shadow: 0 2px 16px rgba(0,0,0,0.5); max-width: 760px;
}
.site-hero-overlay h1 a { color: #fff; }
.site-hero-overlay h1 a:hover { opacity: 0.85; }
.site-hero-overlay p {
    color: rgba(255,255,255,0.85); margin-top: 12px;
    font-size: 1.05rem; font-style: italic;
    text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}

/* ── Subscribe ── */
.subscribe-section { background: var(--forest); color: #fff;
                     text-align: center; padding: 44px 24px; }
.subscribe-section h2 { font-family: 'Playfair Display', Georgia, serif;
                        font-size: 1.6rem; font-weight: 700; margin-bottom: 8px; }
.subscribe-section p { color: rgba(255,255,255,0.6); margin-bottom: 22px; font-size: 0.92rem; }
.subscribe-form { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.subscribe-form input[type="email"] {
    padding: 11px 18px; border-radius: 100px; border: none; font-size: 0.93rem;
    width: 270px; outline: none; font-family: inherit; }
.subscribe-form button {
    padding: 11px 26px; border-radius: 100px; border: none; cursor: pointer;
    background: var(--accent); color: #fff; font-size: 0.93rem; font-weight: 600;
    font-family: inherit; transition: opacity 0.15s; }
.subscribe-form button:hover { opacity: 0.85; }

/* ── Post grid ── */
.post-grid { max-width: 1040px; margin: 52px auto 80px; padding: 0 24px;
             display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 28px; }
.post-card { background: var(--white); border-radius: 16px; overflow: hidden;
             border: 1px solid var(--border); transition: transform 0.2s, box-shadow 0.2s; }
.post-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(0,0,0,0.10); }
.post-card a { display: block; }
.card-thumb { width: 100%; display: block; background: var(--sand); }
.card-no-thumb { width: 100%; height: 180px; background: var(--sand);
                 display: flex; align-items: center; justify-content: center; font-size: 2.5rem; }
.card-body { padding: 20px 22px 24px; }
.card-title { font-family: 'Playfair Display', Georgia, serif;
              font-size: 1.2rem; font-weight: 700; color: var(--forest);
              margin-bottom: 8px; line-height: 1.3; }
.card-excerpt { font-size: 0.83rem; color: var(--stone); line-height: 1.6;
                display: -webkit-box; -webkit-line-clamp: 3;
                -webkit-box-orient: vertical; overflow: hidden; }
.card-cta { display: inline-block; margin-top: 14px; font-size: 0.78rem;
            font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 0.8px; }

/* ── Archive nav (bottom) ── */
.archive-nav { background: var(--forest2); padding: 8px 24px 36px; }
.archive-nav-title { max-width: 960px; margin: 0 auto; padding-top: 28px;
                     font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
                     letter-spacing: 2px; color: rgba(255,255,255,0.3); margin-bottom: 4px; }
.year-row { max-width: 960px; margin: 0 auto; display: flex; flex-wrap: wrap;
            gap: 8px; padding-top: 12px; align-items: center; }
.year-badge { font-size: 0.65rem; font-weight: 600; text-transform: uppercase;
              letter-spacing: 1.8px; color: rgba(255,255,255,0.3); min-width: 36px; }
.month-pill { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.7);
              border-radius: 100px; padding: 4px 13px; font-size: 0.75rem; font-weight: 500;
              border: 1px solid rgba(255,255,255,0.1); transition: all 0.15s; }
.month-pill:hover { background: var(--accent); border-color: var(--accent); color: #fff; opacity: 1; }

/* ── Single post ── */
.post-hero { width: 100%; display: block; }
.post-site-header { background: var(--forest); text-align: center; padding: 20px 24px; }
.post-site-header a { font-family: 'Playfair Display', Georgia, serif;
                      font-size: 1.1rem; font-weight: 700; color: rgba(255,255,255,0.85); }
.post-site-header a:hover { color: #fff; opacity: 1; }
.post-wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.back-link { display: inline-block; margin: 32px 0 0; font-size: 0.8rem; font-weight: 500;
             color: var(--muted); transition: color 0.15s; }
.back-link:hover { color: var(--forest); opacity: 1; }
.post-header { padding: 28px 0 8px; text-align: center; }
.post-header h1 { font-family: 'Playfair Display', Georgia, serif;
                  font-size: 2.4rem; font-weight: 800; color: var(--forest); line-height: 1.2; }
.post-content { padding: 36px 0 64px; }
.post-content hr { border: none; border-top: 1px solid var(--border); margin: 44px 0 32px; }
.post-content hr:first-child { margin-top: 0; }
.day-label { font-size: 0.68rem; font-weight: 600; text-transform: uppercase;
             letter-spacing: 1.5px; color: var(--accent); display: block; margin-bottom: 14px; }
.post-content p { font-size: 1rem; color: #3d3a37; margin-bottom: 12px; line-height: 1.75; }
.post-img { width: 100%; border-radius: 12px; display: block; margin: 20px 0; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr));
           gap: 10px; margin: 20px 0; }
.gallery img { width: 100%; border-radius: 12px; display: block; }

/* ── Post nav ── */
.post-nav { max-width: 760px; margin: 0 auto 72px; padding: 24px 24px 0;
            display: flex; justify-content: space-between;
            border-top: 1px solid var(--border); font-size: 0.84rem; gap: 20px; }
.post-nav a { color: var(--stone); font-weight: 500; transition: color 0.15s; }
.post-nav a:hover { color: var(--forest); opacity: 1; }
.post-nav .next { text-align: right; }

/* ── Footer ── */
.site-footer { text-align: center; padding: 28px 24px; font-size: 0.76rem;
               color: var(--muted); border-top: 1px solid var(--border); }

@media (max-width: 640px) {
    .site-hero-overlay h1 { font-size: 1.7rem; }
    .post-grid { grid-template-columns: 1fr; gap: 20px; }
    .post-header h1 { font-size: 1.8rem; }
    .gallery { grid-template-columns: 1fr 1fr; gap: 6px; }
}