/* ===== Ecology — the field guide ===== */

/* Compact hero */
.eco-hero { position: relative; min-height: min(72vh, 660px); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; color: var(--ivory); }
.eco-hero img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; z-index: -2; }
.eco-hero .hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--spruce) 46%, transparent) 0%, color-mix(in srgb, var(--spruce) 16%, transparent) 36%, color-mix(in srgb, var(--spruce) 64%, transparent) 76%, color-mix(in srgb, var(--spruce) 92%, transparent) 100%), linear-gradient(90deg, color-mix(in srgb, var(--spruce) 70%, transparent) 0%, color-mix(in srgb, var(--spruce) 22%, transparent) 52%, transparent 80%); }
.eco-hero-copy { padding-bottom: clamp(40px, 6vw, 80px); max-width: none; text-shadow: 0 2px 30px color-mix(in srgb, var(--spruce) 55%, transparent); }
.eco-hero-copy > * { max-width: min(42rem, 100%); }
.eco-hero .tag { color: color-mix(in srgb, var(--sand) 92%, white); margin-bottom: 1.2rem; }
.eco-hero h1 { margin-bottom: 0; }
.eco-hero .by { font-size: 0.92rem; letter-spacing: 0.01em; color: color-mix(in srgb, var(--sand) 90%, white); margin-top: 1.2rem; }

/* Intro + contents index */
.eco-intro { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.eco-intro-lede { font-family: var(--font-display); font-weight: 340; font-size: clamp(1.5rem, 2.6vw, 2.3rem); line-height: 1.22; letter-spacing: -0.012em; }
.eco-intro-lede em { color: var(--clay); }
.eco-contents { border-top: 2px solid var(--forest); padding-top: 1.2rem; }
.eco-contents h4 { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--clay); margin: 0 0 0.5rem; }
.eco-contents ol { list-style: none; margin: 0; padding: 0; counter-reset: plate; }
.eco-contents li { counter-increment: plate; }
.eco-contents a { display: flex; align-items: baseline; gap: 0.9rem; padding: 0.8rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); transition: color 0.2s, padding 0.25s var(--ease); }
.eco-contents a:hover { color: var(--ember); padding-left: 6px; }
.eco-contents a::before { content: counter(plate, decimal-leading-zero); font-family: var(--font-display); font-size: 0.92rem; font-style: italic; color: var(--sage); flex: 0 0 auto; }
.eco-contents a .ct { font-family: var(--font-display); font-size: 1.08rem; }
.eco-contents a .ct i { display: block; font-size: 0.82rem; color: var(--ink-55); font-style: italic; }

@media (max-width: 820px) { .eco-intro { grid-template-columns: 1fr; } }

/* =====================================================================
   Plate — alternating editorial specimen
   ===================================================================== */
.eco-plate { padding: clamp(60px, 8vw, 118px) 0; scroll-margin-top: 88px; }
.eco-plate-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(36px, 5vw, 84px);
  align-items: center;
}
.eco-plate.flip .eco-text { order: 2; }

/* text column */
.eco-cat { display: flex; align-items: baseline; gap: 0.7rem; margin: 0 0 1rem; font-weight: 700; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--clay); }
.eco-cat .num { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; letter-spacing: 0; text-transform: none; color: color-mix(in srgb, var(--clay) 78%, var(--ink)); line-height: 1; }
.eco-h { margin: 0; }
.eco-binom { font-family: var(--font-display); font-style: italic; font-size: clamp(1.1rem, 1.5vw, 1.4rem); color: var(--clay); margin: 0.5rem 0 0; }
.eco-prose { max-width: 54ch; margin-top: clamp(1.2rem, 2vw, 1.7rem); font-size: 1.06rem; }
.eco-prose p { margin: 0 0 1.1rem; }
.eco-prose p:last-child { margin-bottom: 0; }
.eco-prose em { color: var(--clay); }
.bg-spruce .eco-binom, .bg-spruce .eco-cat { color: var(--sand); }

/* media column */
.eco-figs { display: grid; gap: 18px; min-width: 0; }
.eco-fig { margin: 0; }
.eco-fig img { width: 100%; border-radius: 18px; box-shadow: var(--shadow); display: block; object-fit: cover; }
.eco-fig.feature img { aspect-ratio: 4 / 3; }
.eco-fig.wide img { aspect-ratio: 16 / 10; }
.eco-fig.pair img { aspect-ratio: 3 / 2; }
.eco-cap { margin: 0.7rem 0 0; font-size: 0.84rem; line-height: 1.45; color: var(--ink-55); }
.eco-cap b { color: var(--forest); font-weight: 600; font-style: normal; }
.eco-cap i { font-style: italic; }

/* inline field note (small image + text), e.g. the blue jay */
.eco-note { display: grid; grid-template-columns: 92px 1fr; gap: 16px; align-items: center; margin-top: clamp(1.4rem, 2vw, 1.9rem); padding: 14px; background: color-mix(in srgb, var(--sand) 45%, var(--ivory)); border-radius: 16px; max-width: 52ch; }
.bg-ivory .eco-note { background: var(--paper); }
.eco-note img { width: 92px; height: 92px; object-fit: cover; border-radius: 12px; }
.eco-note p { margin: 0; font-size: 0.92rem; line-height: 1.45; color: var(--ink-70); }
.eco-note b { color: var(--forest); }

/* callout */
.eco-callout { margin-top: clamp(1.4rem, 2vw, 1.9rem); display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 20px 24px; background: color-mix(in srgb, var(--ember) 8%, var(--ivory)); border-left: 3px solid var(--ember); border-radius: 0 14px 14px 0; max-width: 54ch; }
.bg-ivory .eco-callout { background: color-mix(in srgb, var(--ember) 9%, var(--paper)); }
.eco-callout .co-icon { width: 38px; height: 38px; border-radius: 999px; background: var(--ember); color: var(--ivory); display: grid; place-items: center; flex: 0 0 auto; }
.eco-callout .co-icon svg { width: 20px; height: 20px; }
.eco-callout p { margin: 0; font-size: 0.98rem; line-height: 1.5; color: var(--ink); align-self: center; }
.eco-callout .co-label { font-weight: 700; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ember-deep); display: block; margin-bottom: 4px; }

/* full-width annotated strip (lichen 3-up, birds 4-up) */
.eco-strip { margin: clamp(40px, 5vw, 72px) 0 0; }
.eco-strip-img { width: 100%; height: auto; border-radius: 18px; box-shadow: var(--shadow); display: block; }
.eco-strip-caps { display: grid; gap: 10px 20px; margin-top: 16px; }
.eco-strip-caps.c3 { grid-template-columns: repeat(3, 1fr); }
.eco-strip-caps.c4 { grid-template-columns: repeat(4, 1fr); }
.eco-strip-caps span { font-size: 0.8rem; line-height: 1.4; color: var(--ink-55); padding-left: 14px; border-left: 2px solid color-mix(in srgb, var(--clay) 60%, transparent); }
.eco-strip-caps b { color: var(--forest); font-weight: 600; display: block; }

/* after-strip note (centered) */
.eco-after { max-width: 62ch; margin: clamp(30px, 4vw, 48px) auto 0; font-size: 1.08rem; text-align: center; }
.eco-after p { margin: 0 0 1rem; }
.eco-after p:last-child { margin-bottom: 0; }
.eco-after em { color: var(--clay); }

.signature { font-family: var(--font-display); font-style: italic; font-size: clamp(1.4rem, 2.2vw, 1.9rem); color: var(--clay); white-space: pre-line; line-height: 1.3; margin-top: clamp(1.6rem, 2.5vw, 2.2rem); }

@media (max-width: 860px) {
  .eco-plate-grid { grid-template-columns: 1fr; gap: clamp(26px, 5vw, 38px); }
  .eco-plate.flip .eco-text { order: 0; }
  .eco-strip-caps.c4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .eco-strip-caps.c3, .eco-strip-caps.c4 { grid-template-columns: 1fr; }
}

/* Book CTA */
.book-cta { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.book-cover { box-shadow: var(--shadow); border-radius: 8px; max-width: 320px; margin: 0 auto; }
.book-cta h2 { margin-bottom: 1.2rem; }
.book-cta .prose { color: color-mix(in srgb, var(--ivory) 84%, transparent); max-width: 48ch; }
.book-cta .btn-row { margin-top: 1.8rem; }
@media (max-width: 720px) { .book-cta { grid-template-columns: 1fr; } .book-cover { max-width: 240px; } }