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

:root {
  --primary: #37773d;
  --secondary: #7eb8d4;
  --text-primary: #1c1c1a;
  --text-secondary: #6b6560;
  --bg-primary: #f5f2ed;
  --card: #ede8e0;
  --accent-pale-green: #d4e6da;
  --accent-dark-green: #1e4d25;
}

html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: 'DM Sans', sans-serif; color: var(--text-primary); background-color: var(--bg-primary); line-height: 1.75; overflow-x: hidden; }
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(74,124,89,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 15%, rgba(126,184,212,0.05) 0%, transparent 45%),
    radial-gradient(ellipse at 60% 85%, rgba(196,129,58,0.03) 0%, transparent 40%);
  pointer-events: none;
  z-index: 0;
}
*:focus-visible { outline: 2.5px solid rgba(126,184,212,0.5); outline-offset: 3px; border-radius: 4px; }
a { color: var(--primary); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--accent-dark-green); }

/* Header / nav */
.site-nav { position: relative; z-index: 10; padding: 22px 0; }
.nav-inner { max-width: 960px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.logo img { display: block; height: 26px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-links a { color: var(--text-secondary); font-size: 0.9rem; font-weight: 500; }
.nav-links a:hover { color: var(--primary); }
.nav-links a.nav-cta { background: var(--primary); color: #fff; padding: 9px 18px; border-radius: 8px; font-weight: 600; }
.nav-links a.nav-cta:hover { background: var(--accent-dark-green); color: #fff; }

/* Page container */
.page { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: 40px 32px 0; }

/* Article */
h1 { font-family: 'Fraunces', serif; font-size: clamp(1.8rem, 4.5vw, 2.3rem); font-weight: 600; color: var(--text-primary); line-height: 1.2; margin-bottom: 12px; }
h2 { font-family: 'Fraunces', serif; font-size: clamp(1.3rem, 3vw, 1.55rem); font-weight: 600; color: var(--text-primary); margin-top: 2.4rem; margin-bottom: 0.7rem; line-height: 1.3; }
p { color: var(--text-primary); margin-bottom: 1.1rem; text-wrap: pretty; }
ul { margin: 0 0 1.3rem 1.2rem; }
li { margin-bottom: 0.6rem; }
strong { font-weight: 600; }
.eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); opacity: 0.85; margin-bottom: 0.85rem; }
.lead { font-size: 1.12rem; color: var(--text-secondary); margin-bottom: 2rem; line-height: 1.65; }
.post-meta { color: var(--text-secondary); font-size: 0.85rem; margin: 0 0 1.6rem; }
.post-illo { display: block; width: 220px; max-width: 55%; height: auto; margin: 0.25rem auto 2.2rem; }
.post-hero { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; margin: 0.25rem 0 2.2rem; }
.post-illo-ph { width: 220px; height: 220px; margin: 0.25rem auto 2.2rem; border-radius: 16px; background: var(--card); display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; color: #a09890; font-size: 0.82rem; line-height: 1.45; }

/* Cream cards */
.card { background: var(--card); border-radius: 14px; padding: 26px; margin: 34px 0; }
.card h3 { font-family: 'Fraunces', serif; font-size: 1.2rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.4rem; }
.card p { color: var(--text-secondary); margin-bottom: 1.1rem; }
.btn { display: inline-block; background: var(--primary); color: #fff; padding: 12px 26px; border-radius: 8px; font-weight: 600; font-size: 0.95rem; }
.btn:hover { background: var(--accent-dark-green); color: #fff; }

/* Subscribe */
.sub-row { display: flex; gap: 8px; max-width: 440px; }
.sub-row input[type="email"] { flex: 1; padding: 12px 14px; border: 1.5px solid var(--accent-pale-green); border-radius: 8px; background: #fff; font-family: 'DM Sans', sans-serif; font-size: 0.95rem; color: var(--text-primary); outline: none; }
.sub-row input[type="email"]:focus { border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(126,184,212,0.35); }
.sub-row button { padding: 12px 22px; background: var(--primary); color: #fff; border: none; border-radius: 8px; font-family: 'DM Sans', sans-serif; font-size: 0.95rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.sub-row button:hover { background: var(--accent-dark-green); }
.sub-confirm { display: none; font-family: 'Fraunces', serif; font-size: 1.05rem; color: var(--primary); margin: 0; }

/* Index list */
.intro { color: var(--text-secondary); font-size: 1.05rem; margin-bottom: 2rem; }
.post-card { display: block; background: var(--card); border-radius: 14px; padding: 22px 24px; margin-bottom: 16px; color: inherit; transition: transform 0.15s ease; }
.post-card:hover { transform: translateY(-2px); }
.post-card h2 { margin: 0 0 0.35rem; font-size: 1.2rem; }
.post-card p { color: var(--text-secondary); margin: 0; font-size: 0.95rem; }
.post-card.upcoming { opacity: 0.55; pointer-events: none; }

/* Footer, matching the Beta Guide */
.footer { margin-top: 64px; padding-top: 24px; padding-bottom: 56px; border-top: 1px solid var(--accent-pale-green); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.footer-wordmark { display: block; width: 72px; height: auto; }
.footer-links { display: flex; align-items: center; gap: 18px; }
.footer-links a { color: var(--text-secondary); font-size: 0.85rem; }
.footer-links a:hover { color: var(--primary); }

@media (max-width: 600px) {
  .nav-inner { padding: 0 22px; }
  .nav-links { gap: 16px; }
  .sub-row { flex-direction: column; }
  .footer { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}


    /* ── Shared site nav + closer (aligned with homepage, vg- prefixed) ── */
    .vg-wrap { max-width: calc(1200px + 2 * clamp(20px, 4vw, 40px)); margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }
    .vg-nav { padding: 22px 0; }
    .vg-nav-bar { display: flex; justify-content: space-between; align-items: center; }
    .vg-word-nav { height: 30px; width: auto; display: block; }
    .vg-nav-links { display: flex; gap: 24px; align-items: center; }
    .vg-nav-links a { font-family: 'DM Sans', sans-serif; font-size: 0.9rem; color: #6b6560; text-decoration: none; }
    .vg-nav-links a:hover { color: #1c1c1a; }
    .vg-nav-get { background: #37773d; color: #ffffff !important; padding: 8px 16px; border-radius: 10px; font-weight: 600; font-size: 0.86rem; }
    .vg-nav-get:hover { background: #1e4d25; }
    .vg-closer { background: linear-gradient(135deg, #528d55, #1f4d25); color: #fff; padding: 64px 0 36px; text-align: center; margin-top: 96px; }
    .vg-word { height: 40px; width: auto; display: block; margin: 0 auto 10px; }
    .vg-tag { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 0.98rem; color: #c8d9be; margin-bottom: 40px; }
    .vg-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; border-top: 1px solid rgba(255,255,255,0.18); padding-top: 22px; font-family: 'DM Sans', sans-serif; font-size: 0.82rem; color: rgba(255,255,255,0.75); }
    .vg-foot a { color: rgba(255,255,255,0.75); text-decoration: none; margin-left: 16px; }
    .vg-foot a:hover { color: #fff; }
    @media (max-width: 880px) { .vg-nav-links a:not(.vg-nav-get) { display: none; } }
    @media (max-width: 640px) { .vg-foot { flex-direction: column; } .vg-foot a { margin: 0 8px; } }