@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,600;0,700;1,400&family=Lato:wght@400;700&display=swap');

:root {
  --primary: #3d5c48;
  --accent: #6b8f71;
  --bg: #f7f9f6;
  --text: #2a332c;
  --muted: #6b7a6e;
  --line: #c8d9cb;
  --font: 'Crimson Pro', Georgia, serif;
  --font-ui: 'Lato', sans-serif;
  --space-1: 12px;
  --space-2: 24px;
  --space-3: 36px;
  --space-4: 48px;
  --space-5: 72px;
  --radius: 14px;
  --read: 720px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 18px; }
body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.7; }
a { color: var(--primary); }
img, svg { max-width: 100%; display: block; }

.wrap { max-width: var(--read); margin: 0 auto; padding: 0 var(--space-2); }
.wide { max-width: 960px; margin: 0 auto; padding: 0 var(--space-2); }

/* Stacked header */
.masthead { text-align: center; padding: var(--space-3) 0 var(--space-2); border-bottom: 3px double var(--line); }
.masthead .brand { font-size: 2.4rem; font-weight: 700; color: var(--primary); text-decoration: none; letter-spacing: 0.02em; }
.masthead .tagline { font-family: var(--font-ui); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--muted); margin-top: 6px; }
.nav-row { display: flex; justify-content: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.nav-row a { font-family: var(--font-ui); font-size: 0.85rem; text-decoration: none; color: var(--text); padding-bottom: 4px; border-bottom: 1px solid transparent; }
.nav-row a:hover, .nav-row a.on { border-bottom-color: var(--accent); color: var(--primary); }
.menu-btn { display: none; font-family: var(--font-ui); background: var(--bg); border: 1px solid var(--line); padding: 8px 16px; cursor: pointer; margin: 0 auto var(--space-1); }

/* Text-only hero */
.lead-block { padding: var(--space-4) 0 var(--space-3); border-bottom: 1px solid var(--line); margin-bottom: var(--space-3); }
.lead-block .label { font-family: var(--font-ui); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); }
.lead-block h1 { font-size: 2rem; margin: var(--space-1) 0; line-height: 1.2; }
.lead-block p { color: var(--muted); font-size: 1.1rem; }

/* Article stream with editorial lines */
.stream { padding-bottom: var(--space-5); }
.stream-item { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.stream-item:first-child { border-top: 1px solid var(--line); }
.stream-item img, .stream-item svg { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); margin-bottom: var(--space-2); }
.stream-item .cat { font-family: var(--font-ui); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); }
.stream-item h2 { font-size: 1.45rem; margin: 6px 0; line-height: 1.25; }
.stream-item h2 a { color: var(--text); text-decoration: none; }
.stream-item h2 a:hover { color: var(--primary); }
.stream-item .meta { font-family: var(--font-ui); font-size: 0.8rem; color: var(--muted); margin-bottom: var(--space-1); }
.stream-item p { font-size: 1.05rem; }

/* Narrow article */
.article-page { padding: var(--space-4) 0 var(--space-5); }
.article-page h1 { font-size: 2.2rem; line-height: 1.15; margin-bottom: var(--space-2); }
.article-page .byline { font-family: var(--font-ui); font-size: 0.85rem; color: var(--muted); margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--line); }
.article-page figure { margin: var(--space-3) 0; }
.article-page figure img, .article-page figure svg { border-radius: var(--radius); aspect-ratio: 4/3; width: 100%; }
.article-page figcaption { font-family: var(--font-ui); font-size: 0.75rem; color: var(--muted); margin-top: 8px; }
.article-page p { margin-bottom: var(--space-2); }
.article-page h2 { font-size: 1.4rem; margin: var(--space-3) 0 var(--space-1); }

.author-note { margin-top: var(--space-4); padding-top: var(--space-2); border-top: 1px solid var(--line); font-family: var(--font-ui); font-size: 0.9rem; }
.author-note strong { color: var(--primary); }

.related-inline { margin-top: var(--space-4); font-family: var(--font-ui); font-size: 0.9rem; }
.related-inline a { display: block; padding: 8px 0; border-bottom: 1px dotted var(--line); text-decoration: none; }

/* Static pages */
.static { padding: var(--space-4) 0 var(--space-5); }
.static h1 { font-size: 1.9rem; margin-bottom: var(--space-3); }
.static h2 { font-size: 1.25rem; margin: var(--space-3) 0 var(--space-1); }
.static p { margin-bottom: var(--space-2); }

/* Minimal footer */
.foot { text-align: center; padding: var(--space-4) var(--space-2); border-top: 3px double var(--line); font-family: var(--font-ui); font-size: 0.8rem; color: var(--muted); }
.foot a { color: var(--primary); margin: 0 8px; }

/* Corner cookie */
.cookie-pop {
  position: fixed; bottom: 20px; right: 20px; max-width: 320px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--space-2); box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  font-family: var(--font-ui); font-size: 0.8rem; z-index: 999;
}
.cookie-pop.hidden { display: none; }
.cookie-pop button { margin-top: 10px; background: var(--primary); color: #fff; border: none; padding: 8px 16px; border-radius: 8px; cursor: pointer; font-family: var(--font-ui); }

@media (max-width: 640px) {
  .nav-row { display: none; flex-direction: column; align-items: center; }
  .nav-row.open { display: flex; }
  .menu-btn { display: block; }
  .masthead .brand { font-size: 1.8rem; }
}