/*
Theme Name: The Cascadian Naturalist
Theme URI: https://cascadiannaturalist.com
Author: Justin Lee Media
Description: An ultra-precise editorial theme built for wildlife photography, natural history journals, and digital zines. Modeled directly on The Cascadian Naturalist homepage mockup and brand guide.
Version: 1.1.0
Text Domain: cascadian-naturalist
*/

:root {
  --color-beige: #D3CCBC;
  --color-cream: #F4F1E8;
  --color-bronze: #8E6D3D;
  --color-olive: #596F51;
  --color-forest: #16381C;
  --color-ocean: #244654;
  --color-deep-forest: #122019;
  --color-card-archive: #EBE7DD;
  --color-text-muted: #4A524D;
  
  --font-serif: 'Cormorant Garamond', 'Baskerville', 'Georgia', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  background-color: var(--color-cream);
  color: var(--color-deep-forest);
  font-family: var(--font-serif);
  margin: 0;
  padding: 0;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 400;
  margin: 0;
}

a { color: inherit; text-decoration: none; }

.site-header {
  background-color: var(--color-deep-forest);
  color: var(--color-cream);
  padding: 1.1rem 3rem;
  border-bottom: 1px solid rgba(211, 204, 188, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand-container { display: flex; align-items: center; gap: 1.25rem; }
.brand-divider { width: 1px; height: 40px; background-color: rgba(211, 204, 188, 0.3); }
.brand-text-block { display: flex; flex-direction: column; }
.brand-title-top { font-family: var(--font-serif); font-size: 1.15rem; letter-spacing: 0.22em; text-transform: uppercase; line-height: 1; color: var(--color-cream); }
.brand-title-bottom { font-family: var(--font-serif); font-size: 1.5rem; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 400; line-height: 1; margin-top: 4px; color: var(--color-cream); }

.nav-container { display: flex; align-items: center; gap: 2.2rem; }
.nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; font-family: var(--font-sans); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.15em; }
.nav-links a { color: var(--color-cream); transition: opacity 0.2s ease; }

.btn-subscribe-header {
  border: 1px solid var(--color-cream);
  padding: 0.55rem 1.4rem;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-cream);
}

.hero-banner {
  position: relative;
  min-height: 82vh;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  color: var(--color-cream);
  padding: 5rem 6%;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18,32,25,0.25) 0%, rgba(18,32,25,0.75) 70%, rgba(18,32,25,0.9) 100%);
}

.hero-content { position: relative; z-index: 2; max-width: 680px; }
.hero-kicker { font-family: var(--font-sans); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--color-beige); margin-bottom: 1.2rem; }
.hero-title { font-size: clamp(3.2rem, 5.5vw, 4.8rem); line-height: 1.05; font-weight: 300; margin-bottom: 1.2rem; }
.hero-deck { font-family: var(--font-serif); font-style: italic; font-size: 1.25rem; line-height: 1.45; color: #E2DFD6; margin-bottom: 2.2rem; max-width: 580px; }

.btn-hero {
  display: inline-block;
  padding: 0.85rem 1.8rem;
  border: 1px solid var(--color-cream);
  color: var(--color-cream);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.section-header-label { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 2.5rem; }
.section-accent-line { width: 45px; height: 1px; background-color: var(--color-bronze); }
.section-header-title { font-family: var(--font-sans); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.25em; color: var(--color-deep-forest); font-weight: 500; }

.featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
@media (max-width: 992px) { .featured-grid { grid-template-columns: 1fr; } }

.story-card-image-wrap { aspect-ratio: 16/10; overflow: hidden; margin-bottom: 1.2rem; background-color: var(--color-beige); }
.story-card-image-wrap img { width: 100%; height: 100%; object-fit: cover; }
.story-meta { font-family: var(--font-sans); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--color-bronze); margin-bottom: 0.6rem; font-weight: 500; }
.story-card-title { font-size: 1.9rem; line-height: 1.2; color: var(--color-deep-forest); margin-bottom: 0.7rem; }
.story-card-excerpt { font-size: 1.05rem; color: var(--color-text-muted); line-height: 1.45; margin-bottom: 1.2rem; }
.story-read-more { font-family: var(--font-sans); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.15em; font-weight: 600; color: var(--color-deep-forest); }

.newsletter-banner { background-color: var(--color-deep-forest); color: var(--color-cream); padding: 4.5rem 6%; position: relative; overflow: hidden; }
.banner-content { max-width: 1300px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 3rem; flex-wrap: wrap; }
.banner-left { display: flex; align-items: center; gap: 2.5rem; max-width: 680px; }
.banner-heading { font-size: 2.6rem; font-weight: 300; margin-bottom: 0.4rem; }
.banner-subtext { font-size: 1.1rem; color: var(--color-beige); line-height: 1.4; }
.banner-form { display: flex; gap: 0.6rem; flex-grow: 1; max-width: 480px; }
.banner-input { background-color: var(--color-cream); border: none; padding: 0.95rem 1.2rem; font-family: var(--font-sans); font-size: 0.85rem; color: var(--color-deep-forest); flex-grow: 1; outline: none; }
.banner-button { background-color: transparent; border: 1px solid var(--color-cream); color: var(--color-cream); padding: 0.95rem 1.8rem; font-family: var(--font-sans); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; cursor: pointer; }

.archive-field-grid { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1.8fr 1fr; gap: 4.5rem; }
@media (max-width: 900px) { .archive-field-grid { grid-template-columns: 1fr; } }
.archive-card { display: flex; background-color: var(--color-card-archive); border: 1px solid var(--color-beige); padding: 1.5rem; gap: 2rem; align-items: center; }
.archive-card-img { width: 42%; aspect-ratio: 16/10; object-fit: cover; background-color: var(--color-beige); }
.archive-card-body { width: 58%; }

.quote-block { border-left: 1px solid var(--color-beige); padding-left: 2.5rem; }
.quote-text { font-size: 1.35rem; font-style: italic; line-height: 1.45; color: var(--color-deep-forest); margin-bottom: 1.5rem; }
.quote-author { font-family: var(--font-sans); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--color-bronze); font-style: normal; }

.site-footer { background-color: var(--color-deep-forest); color: var(--color-beige); padding: 4rem 6% 2.5rem 6%; border-top: 1px solid rgba(211, 204, 188, 0.2); }
.footer-top { max-width: 1300px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 2rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(211, 204, 188, 0.15); }
.footer-nav { display: flex; gap: 2rem; font-family: var(--font-sans); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; }
.footer-bottom { max-width: 1300px; margin: 1.8rem auto 0 auto; font-family: var(--font-sans); font-size: 0.72rem; color: rgba(211, 204, 188, 0.65); display: flex; justify-content: space-between; align-items: center; }