/* ============================================================
   CUSTOMIZE — edit these variables to rebrand
   ============================================================ */
:root {
  --color-forest: #1a3a2a;
  --color-sage:   #4a7c59;
  --color-moss:   #7aab85;
  --color-mist:   #c8dbc5;
  --color-cream:  #f5f0e8;
  --color-clay:   #c07a4a;
  --color-bark:   #6b4226;
  --color-ink:    #1c1c18;
  --color-fog:    #f0ede5;
  --font-display: 'Cormorant Garamond', serif;
  --font-body:    'DM Sans', sans-serif;
  --nav-height:   68px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body { font-family:var(--font-body); background:var(--color-cream); color:var(--color-ink); line-height:1.7; overflow-x:hidden; }

/* ---- NAV ---- */
nav {
  position:fixed; top:0; left:0; right:0; height:var(--nav-height);
  background:rgba(26,58,42,0.97); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 2.5rem; z-index:999;
  border-bottom:1px solid rgba(122,171,133,0.25);
}
.nav-logo { font-family:var(--font-display); font-size:1.6rem; font-weight:300; color:var(--color-mist); letter-spacing:0.04em; cursor:pointer; }
.nav-logo span { color:var(--color-clay); font-style:italic; }
.nav-links { display:flex; gap:1.75rem; list-style:none; }
.nav-links a { font-size:0.82rem; letter-spacing:0.12em; text-transform:uppercase; color:rgba(200,219,197,0.8); text-decoration:none; transition:color 0.2s; cursor:pointer; font-weight:400; }
.nav-links a:hover, .nav-links a.active { color:var(--color-mist); }
.nav-right { display:flex; gap:0.6rem; align-items:center; }
.nav-cta { background:var(--color-clay); color:#fff; font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; padding:0.5rem 1.25rem; border-radius:2px; border:none; cursor:pointer; font-family:var(--font-body); transition:background 0.2s; }
.nav-cta:hover { background:var(--color-bark); }
.nav-ghost { background:transparent; color:rgba(200,219,197,0.65); font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; padding:0.5rem 1rem; border-radius:2px; border:1px solid rgba(200,219,197,0.2); cursor:pointer; font-family:var(--font-body); transition:all 0.2s; }
.nav-ghost:hover { border-color:rgba(200,219,197,0.5); color:var(--color-mist); }
.nav-chip { display:none; align-items:center; background:rgba(122,171,133,0.15); border:1px solid rgba(122,171,133,0.3); color:var(--color-mist); font-size:0.72rem; padding:0.3rem 0.8rem; border-radius:2px; }

/* ---- PAGE SYSTEM ---- */
.page { display:none; padding-top:var(--nav-height); min-height:100vh; }
.page.active { display:block; }

/* ---- SHARED BUTTONS ---- */
.btn-primary { background:var(--color-clay); color:#fff; padding:0.85rem 2rem; font-size:0.85rem; letter-spacing:0.1em; text-transform:uppercase; border:none; border-radius:2px; cursor:pointer; font-family:var(--font-body); transition:background 0.2s, transform 0.15s; }
.btn-primary:hover { background:var(--color-bark); transform:translateY(-1px); }
.btn-outline { background:transparent; color:var(--color-mist); padding:0.85rem 2rem; font-size:0.85rem; letter-spacing:0.1em; text-transform:uppercase; border:1px solid rgba(200,219,197,0.4); border-radius:2px; cursor:pointer; font-family:var(--font-body); transition:border-color 0.2s, color 0.2s, transform 0.15s; }
.btn-outline:hover { border-color:var(--color-mist); color:#fff; transform:translateY(-1px); }

/* ---- SHARED ---- */
.eyebrow { font-size:0.75rem; letter-spacing:0.25em; text-transform:uppercase; color:var(--color-clay); font-weight:400; }
.section-divider { width:40px; height:2px; background:var(--color-sage); margin:1rem 0 1.5rem; }

/* ============================================================
   HOME
   ============================================================ */
.hero { position:relative; height:calc(100vh - var(--nav-height)); display:flex; align-items:center; justify-content:center; overflow:hidden; background:var(--color-forest); }
.hero-bg { position:absolute; inset:0; z-index:0; background: radial-gradient(ellipse at 20% 80%, rgba(74,124,89,0.35) 0%, transparent 55%), radial-gradient(ellipse at 80% 20%, rgba(122,171,133,0.2) 0%, transparent 50%), linear-gradient(160deg, #0f2218 0%, #1a3a2a 50%, #213d2f 100%); }
/* ── Hero wildlife background ──────────────────────────────────────────────
   Stacking order: bg 0 · poster 1 · video 2 · scrim 3 · leaves 4 · content 5.

   The scrim is not decoration, it is a legibility requirement. Measured on the
   graded footage, the 95th-percentile luminance behind the headline peaks at
   152 (ocean and sunlit grass). White text on that is 2.4:1 — unreadable. The
   0.46 middle stop brings it to ~98, which is 6.0:1 and clears WCAG AA with
   room to spare, while still letting the animals read through. Darker at the
   top so the fixed nav stays legible, and at the bottom so the hero resolves
   into the page instead of stopping dead.
   If you ever re-grade or swap the footage, re-check this number — do not
   assume a new clip is as dark. */
.hero-poster {
  position:absolute; inset:0; z-index:1;
  background:url('hero-poster.jpg') center/cover no-repeat;
}
.hero-video {
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.4s ease;
  pointer-events:none;
}
.hero-video.is-ready { opacity:1; }
.hero-scrim {
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(15,34,24,0.80) 0%,
    rgba(15,34,24,0.46) 26%,
    rgba(15,34,24,0.46) 70%,
    rgba(15,34,24,0.88) 100%);
}
/* Belt and braces on top of the scrim maths: a soft shadow keeps the letter
   edges defined if a frame is brighter than anything measured. */
.hero-title, .hero-sub { text-shadow:0 1px 14px rgba(8,20,13,0.55); }
.hero-sub { color:rgba(226,238,224,0.92); }

@media (prefers-reduced-motion: reduce) {
  .hero-video { display:none; }
}

.hero-leaf { position:absolute; z-index:4; border-radius:50% 5% 50% 5%; opacity:0.06; }
.hero-leaf.l1 { width:400px; height:600px; background:var(--color-moss); top:-80px; right:5%; transform:rotate(20deg); }
.hero-leaf.l2 { width:250px; height:380px; background:var(--color-sage); bottom:-40px; left:8%; transform:rotate(-15deg); }
.hero-leaf.l3 { width:180px; height:280px; background:var(--color-mist); top:30%; left:40%; transform:rotate(45deg); }
.hero-content { position:relative; z-index:5; text-align:center; max-width:820px; padding:0 2rem; animation:fadeUp 1s ease both; }
@keyframes fadeUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
.hero-title { font-family:var(--font-display); font-size:clamp(3rem,7vw,6rem); font-weight:300; color:#fff; line-height:1.05; letter-spacing:-0.01em; margin-bottom:1.5rem; }
.hero-title em { color:var(--color-moss); font-style:italic; }
.hero-sub { font-size:1.05rem; color:rgba(200,219,197,0.75); max-width:520px; margin:0 auto 2.5rem; font-weight:300; }
.hero-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* Stats */
.stats-section { background:var(--color-fog); padding:6.5rem 2.5rem 5rem; border-bottom:1px solid rgba(74,124,89,0.15); }
.stats-header { text-align:center; margin-bottom:2.5rem; }
.stats-header h2 { font-family:var(--font-display); font-size:2rem; font-weight:300; color:var(--color-forest); margin-bottom:0.4rem; }
.stats-header p { font-size:0.9rem; color:var(--color-sage); letter-spacing:0.05em; }
.stats-tabs { display:flex; gap:0.75rem; justify-content:center; margin-bottom:2.5rem; flex-wrap:wrap; }
.stats-tab-btn { background:transparent; border:1px solid rgba(74,124,89,0.25); color:var(--color-sage); padding:0.5rem 1.4rem; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; border-radius:20px; cursor:pointer; font-family:var(--font-body); font-weight:500; transition:all 0.2s; }
.stats-tab-btn:hover, .stats-tab-btn.active { background:var(--color-sage); color:#fff; border-color:var(--color-sage); }
.stats-panel { display:none; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:1.5rem; max-width:1100px; margin:0 auto; }
.stats-panel.active { display:grid; animation:fadePanel 0.4s ease forwards; }
@keyframes fadePanel { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.stat-card { background:#fff; border:1px solid rgba(74,124,89,0.12); border-radius:6px; padding:2rem 1.5rem; text-align:center; transition:box-shadow 0.2s, transform 0.2s; }
.stat-card:hover { box-shadow:0 6px 24px rgba(26,58,42,0.08); transform:translateY(-2px); }
.stat-number { font-family:var(--font-display); font-size:3rem; font-weight:300; color:var(--color-sage); line-height:1; margin-bottom:0.25rem; }
.stat-label { font-size:0.78rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--color-bark); font-weight:500; margin-bottom:0.75rem; }
.stat-desc { font-size:0.82rem; color:#888; line-height:1.5; }
.stat-live-badge { display:inline-flex; align-items:center; gap:5px; background:rgba(74,124,89,0.1); color:var(--color-sage); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; padding:3px 10px; border-radius:20px; margin-top:0.6rem; }
.live-dot { width:6px; height:6px; background:var(--color-sage); border-radius:50%; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.5; transform:scale(0.7); } }

/* Mission */
.mission-strip { padding:5rem 2.5rem; max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
@media(max-width:720px) { .mission-strip { grid-template-columns:1fr; gap:2.5rem; } }
.mission-text h2 { font-family:var(--font-display); font-size:2.5rem; font-weight:300; color:var(--color-forest); line-height:1.15; margin-bottom:1rem; }
.mission-text h2 em { color:var(--color-sage); font-style:italic; }
.mission-text p { font-size:0.95rem; color:#555; margin-bottom:1.2rem; line-height:1.8; }
.mission-visual { background:linear-gradient(135deg, var(--color-forest) 0%, var(--color-sage) 100%); border-radius:8px; min-height:320px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.mission-visual-inner { text-align:center; color:rgba(255,255,255,0.9); padding:2rem; position:relative; z-index:2; }
.mission-visual-inner .big-num { font-family:var(--font-display); font-size:5rem; font-weight:300; line-height:1; margin-bottom:0.5rem; }
.mission-visual-inner p { font-size:0.85rem; opacity:0.8; letter-spacing:0.08em; text-transform:uppercase; }

/* Impact */
.impact-section { background:var(--color-forest); padding:5rem 2.5rem; text-align:center; }
.impact-section h2 { font-family:var(--font-display); font-size:2.2rem; font-weight:300; color:var(--color-mist); margin-bottom:0.5rem; }
.impact-section .sub { font-size:0.85rem; color:rgba(200,219,197,0.55); letter-spacing:0.1em; text-transform:uppercase; margin-bottom:3rem; }
.impact-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:1.25rem; max-width:1100px; margin:0 auto; }
.impact-card { background:rgba(255,255,255,0.05); border:1px solid rgba(122,171,133,0.2); border-radius:6px; padding:2rem 1.5rem; color:var(--color-mist); text-align:left; transition:background 0.2s; }
.impact-card:hover { background:rgba(255,255,255,0.09); }
.impact-icon { font-size:2rem; margin-bottom:1rem; }
.impact-card h3 { font-family:var(--font-display); font-size:1.3rem; font-weight:400; margin-bottom:0.5rem; color:#fff; }
.impact-card p { font-size:0.85rem; opacity:0.65; line-height:1.7; }

/* ============================================================
   VOLUNTEER PAGE
   ============================================================ */
.vol-hero { background:linear-gradient(160deg, var(--color-forest) 0%, #2a5a3a 100%); padding:5rem 2.5rem 4rem; text-align:center; }
.vol-hero h1 { font-family:var(--font-display); font-size:clamp(2.5rem,5vw,4rem); font-weight:300; color:#fff; margin-bottom:1rem; }
.vol-hero h1 em { color:var(--color-moss); font-style:italic; }
.vol-hero p { font-size:1rem; color:rgba(200,219,197,0.8); max-width:540px; margin:0 auto 2.5rem; }
.vol-content { max-width:1100px; margin:0 auto; padding:4rem 2.5rem; display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
@media(max-width:720px) { .vol-content { grid-template-columns:1fr; gap:2rem; } }
.vol-info h2 { font-family:var(--font-display); font-size:2rem; font-weight:300; color:var(--color-forest); margin-bottom:1.5rem; }
.vol-info-block { background:var(--color-fog); border-left:3px solid var(--color-sage); padding:1.25rem 1.5rem; border-radius:0 6px 6px 0; margin-bottom:1rem; }
.vol-info-block h3 { font-size:0.85rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--color-sage); font-weight:500; margin-bottom:0.4rem; }
.vol-info-block p { font-size:0.9rem; color:#555; line-height:1.6; }
.vol-signup-box { background:#fff; border:1px solid rgba(74,124,89,0.15); border-radius:8px; padding:2.5rem; text-align:center; }
.vol-signup-box h2 { font-family:var(--font-display); font-size:1.8rem; font-weight:300; color:var(--color-forest); margin-bottom:0.5rem; }
.vol-signup-box p { font-size:0.88rem; color:#777; margin-bottom:2rem; line-height:1.6; }
.vol-form-btn { display:block; width:100%; background:var(--color-sage); color:#fff; padding:1rem; font-size:0.9rem; letter-spacing:0.1em; text-transform:uppercase; border:none; border-radius:4px; cursor:pointer; font-family:var(--font-body); text-decoration:none; transition:background 0.2s; margin-bottom:1rem; }
.vol-form-btn:hover { background:var(--color-forest); }
.vol-form-note { font-size:0.78rem; color:#aaa; }
.vol-opportunities { padding:0 2.5rem 5rem; max-width:1100px; margin:0 auto; }
.vol-opportunities h2 { font-family:var(--font-display); font-size:2rem; font-weight:300; color:var(--color-forest); margin-bottom:2rem; text-align:center; }
.opp-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:1.25rem; }
.opp-card { background:var(--color-fog); border:1px solid rgba(74,124,89,0.1); border-radius:6px; padding:1.75rem; transition:transform 0.2s; }
.opp-card:hover { transform:translateY(-2px); }
.opp-tag { display:inline-block; background:rgba(74,124,89,0.12); color:var(--color-sage); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em; padding:3px 10px; border-radius:20px; margin-bottom:0.75rem; font-weight:500; }
.opp-card h3 { font-family:var(--font-display); font-size:1.2rem; font-weight:400; color:var(--color-forest); margin-bottom:0.4rem; }
.opp-card p { font-size:0.85rem; color:#666; line-height:1.6; }

/* ============================================================
   PETITIONS PAGE
   ============================================================ */
.pet-hero { background:var(--color-forest); padding:4rem 2.5rem 3rem; text-align:center; }
.pet-hero h1 { font-family:var(--font-display); font-size:clamp(2.5rem,5vw,4rem); font-weight:300; color:#fff; margin-bottom:0.75rem; }
.pet-hero h1 em { color:var(--color-moss); font-style:italic; }
.pet-hero p { font-size:0.95rem; color:rgba(200,219,197,0.7); max-width:480px; margin:0 auto 2rem; }
.pet-main { max-width:1100px; margin:0 auto; padding:3rem 2.5rem 5rem; }
.pet-main h2 { font-family:var(--font-display); font-size:1.9rem; font-weight:300; color:var(--color-forest); margin-bottom:1.75rem; }
.pet-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:1.75rem; }
.pet-card { background:#fff; border:1px solid rgba(74,124,89,0.1); border-radius:8px; padding:1.75rem; box-shadow:0 2px 10px rgba(26,58,42,0.05); transition:transform 0.2s, box-shadow 0.2s; }
.pet-card:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(26,58,42,0.1); }
.urgency-tag { display:inline-block; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em; font-weight:500; padding:3px 10px; border-radius:20px; margin-bottom:0.75rem; }
.u-high { background:rgba(192,80,60,0.1); color:#a03020; }
.u-mid  { background:rgba(192,122,74,0.12); color:var(--color-bark); }
.u-low  { background:rgba(74,124,89,0.1); color:var(--color-sage); }
.pet-card h3 { font-family:var(--font-display); font-size:1.18rem; font-weight:400; color:var(--color-forest); margin-bottom:0.45rem; line-height:1.3; }
.pet-card p { font-size:0.85rem; color:#777; line-height:1.65; margin-bottom:1.25rem; }
.pet-footer { display:flex; align-items:center; justify-content:space-between; border-top:1px solid rgba(74,124,89,0.08); padding-top:0.9rem; }
.pet-sigs { font-size:0.82rem; color:#aaa; font-weight:500; }
.pet-sigs strong { color:var(--color-sage); }
.sign-btn { background:var(--color-sage); color:#fff; padding:0.42rem 1.1rem; font-size:0.76rem; letter-spacing:0.08em; text-transform:uppercase; border:none; border-radius:20px; cursor:pointer; font-family:var(--font-body); text-decoration:none; transition:background 0.2s; display:inline-block; }
.sign-btn:hover { background:var(--color-forest); }

/* ============================================================
   CHAPTERS PAGE
   ============================================================ */
.ch-hero { background:linear-gradient(160deg, var(--color-forest) 0%, #1a3a4a 100%); padding:5rem 2.5rem 4rem; text-align:center; }
.ch-hero h1 { font-family:var(--font-display); font-size:clamp(2.5rem,5vw,4rem); font-weight:300; color:#fff; margin-bottom:1rem; }
.ch-hero h1 em { color:var(--color-moss); font-style:italic; }
.ch-hero p { font-size:1rem; color:rgba(200,219,197,0.75); max-width:540px; margin:0 auto 2.5rem; }
.ch-main { max-width:1200px; margin:0 auto; padding:3.5rem 2.5rem 5rem; }
.ch-intro { max-width:680px; margin:0 auto 3.5rem; text-align:center; }
.ch-intro h2 { font-family:var(--font-display); font-size:2rem; font-weight:300; color:var(--color-forest); margin-bottom:0.75rem; }
.ch-intro p { font-size:0.93rem; color:#555; line-height:1.82; }
.ch-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:2rem; }
.ch-card { background:#fff; border:1px solid rgba(74,124,89,0.1); border-radius:8px; overflow:hidden; box-shadow:0 2px 10px rgba(26,58,42,0.06); transition:transform 0.2s, box-shadow 0.2s; }
.ch-card:hover { transform:translateY(-3px); box-shadow:0 10px 32px rgba(26,58,42,0.1); }
/* The chapter the signed-in leader owns — highlighted so it's obvious which card is theirs */
.ch-card-mine { position:relative; border-color:var(--color-sage); box-shadow:0 0 0 2px rgba(74,124,89,0.25), 0 2px 10px rgba(26,58,42,0.06); }
.ch-mine-badge { position:absolute; top:0.6rem; right:0.6rem; z-index:2; background:var(--color-sage); color:#fff; font-size:0.6rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:500; padding:3px 9px; border-radius:20px; }
.ch-card-head { padding:1.4rem 1.7rem; background:linear-gradient(135deg, var(--color-forest) 0%, #213d2f 100%); display:flex; align-items:center; justify-content:space-between; }
.ch-card-head h3 { font-family:var(--font-display); font-size:1.18rem; font-weight:400; color:#fff; }
.ch-state { background:rgba(255,255,255,0.12); color:var(--color-mist); font-size:0.7rem; font-weight:500; padding:2px 9px; border-radius:20px; letter-spacing:0.08em; }
.ch-card-body { padding:1.4rem 1.7rem; }
.ch-meta { display:flex; gap:1.5rem; margin-bottom:1rem; }
.ch-meta span { font-size:0.8rem; color:#888; }
.ch-meta strong { color:var(--color-sage); font-weight:500; }
.ch-achievements h4 { font-size:0.73rem; text-transform:uppercase; letter-spacing:0.12em; color:#4a6a8a; font-weight:500; margin-bottom:0.5rem; }
.ch-ach-list { list-style:none; margin-bottom:1.2rem; }
.ch-ach-list li { font-size:0.85rem; color:#555; padding:0.22rem 0; display:flex; align-items:flex-start; gap:0.45rem; line-height:1.5; }
.ch-ach-list li::before { content:'✓'; color:var(--color-sage); font-weight:500; flex-shrink:0; margin-top:1px; }
.ch-focus-tags { display:flex; gap:0.45rem; flex-wrap:wrap; }
.ch-focus-tag { background:rgba(74,124,89,0.09); color:var(--color-sage); font-size:0.68rem; font-weight:500; padding:2px 9px; border-radius:20px; text-transform:uppercase; letter-spacing:0.08em; }

/* ============================================================
   BLOG PAGE
   ============================================================ */
.blog-hero { background:var(--color-forest); padding:4rem 2.5rem 3rem; text-align:center; }
.blog-hero h1 { font-family:var(--font-display); font-size:clamp(2.5rem,5vw,4rem); font-weight:300; color:#fff; margin-bottom:0.75rem; }
.blog-hero p { font-size:0.95rem; color:rgba(200,219,197,0.7); max-width:480px; margin:0 auto; }

.blog-main { max-width:1100px; margin:0 auto; padding:3rem 2.5rem 2rem; }

/* Filter row */
.blog-filters { display:flex; gap:0.75rem; flex-wrap:wrap; margin-bottom:2.5rem; align-items:center; }
.filter-btn { background:var(--color-fog); border:1px solid rgba(74,124,89,0.15); color:#666; padding:0.45rem 1rem; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; border-radius:20px; cursor:pointer; font-family:var(--font-body); transition:all 0.2s; }
.filter-btn.active, .filter-btn:hover { background:var(--color-sage); color:#fff; border-color:var(--color-sage); }
.filter-spacer { flex:1; }
.blog-search { padding:0.45rem 1rem; border:1px solid rgba(74,124,89,0.2); border-radius:20px; font-family:var(--font-body); font-size:0.85rem; color:var(--color-ink); background:var(--color-fog); outline:none; width:200px; transition:border-color 0.2s; }
.blog-search:focus { border-color:var(--color-sage); }

/* Posts grid */
.posts-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(310px, 1fr)); gap:1.75rem; }

.post-card { background:#fff; border:1px solid rgba(74,124,89,0.1); border-radius:8px; overflow:hidden; transition:transform 0.2s, box-shadow 0.2s; cursor:pointer; }
.post-card:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(26,58,42,0.1); }
.post-card.archived { opacity:0.65; }
.post-img { height:180px; display:flex; align-items:center; justify-content:center; font-size:3rem; }
.post-img.c-wildlife { background:linear-gradient(135deg,#1a3a1a,#3a6a2a); }
.post-img.c-ocean    { background:linear-gradient(135deg,#0a2a3a,#1a5a7a); }
.post-img.c-land     { background:linear-gradient(135deg,#1a3a2a,#4a7c59); }
.post-img.c-shelter  { background:linear-gradient(135deg,#2a1a0e,#6a3a1a); }
.post-img.c-air      { background:linear-gradient(135deg,#0e1a2e,#1a3a6a); }
.post-img.c-awareness{ background:linear-gradient(135deg,#1a1a2a,#3a3a5a); }
.post-body { padding:1.5rem; }
.post-tag { display:inline-block; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--color-sage); font-weight:500; margin-bottom:0.5rem; }
.post-card h3 { font-family:var(--font-display); font-size:1.22rem; font-weight:400; color:var(--color-forest); margin-bottom:0.5rem; line-height:1.3; }
.post-card .post-excerpt { font-size:0.85rem; color:#777; line-height:1.65; margin-bottom:1rem; }
.post-meta { display:flex; align-items:center; justify-content:space-between; }
.post-byline { font-size:0.78rem; color:#aaa; }
.post-date-label { font-size:0.75rem; color:#bbb; }
.read-more { font-size:0.78rem; color:var(--color-sage); font-weight:500; border-bottom:1px solid transparent; transition:border-color 0.2s; cursor:pointer; text-decoration:none; background:none; border-top:none; border-left:none; border-right:none; padding:0; font-family:var(--font-body); }
.read-more:hover { border-bottom-color:var(--color-sage); }
.archived-badge { font-size:0.68rem; background:rgba(107,66,38,0.1); color:var(--color-bark); padding:2px 8px; border-radius:20px; letter-spacing:0.08em; text-transform:uppercase; }

/* Archive section */
.archive-section { max-width:1100px; margin:0 auto; padding:0 2.5rem 5rem; }
.archive-toggle { display:flex; align-items:center; gap:1rem; cursor:pointer; padding:1.5rem 0; border-top:1px solid rgba(74,124,89,0.12); margin-top:2rem; }
.archive-toggle h3 { font-family:var(--font-display); font-size:1.4rem; font-weight:300; color:var(--color-forest); }
.archive-toggle .arrow { font-size:0.85rem; color:var(--color-sage); transition:transform 0.2s; }
.archive-toggle.open .arrow { transform:rotate(90deg); }
.archive-list { display:none; }
.archive-list.open { display:block; }
.archive-year { margin-bottom:2rem; }
.archive-year h4 { font-size:0.78rem; text-transform:uppercase; letter-spacing:0.15em; color:var(--color-bark); font-weight:500; margin-bottom:1rem; }
.archive-posts-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(310px, 1fr)); gap:1.25rem; }

/* Full post view */
.post-full { max-width:720px; margin:0 auto; padding:3.5rem 2.5rem 5rem; }
.post-full-back { display:inline-flex; align-items:center; gap:0.4rem; font-size:0.82rem; color:var(--color-sage); cursor:pointer; text-decoration:none; background:none; border:none; font-family:var(--font-body); padding:0; margin-bottom:2rem; transition:color 0.2s; }
.post-full-back:hover { color:var(--color-forest); }
.post-full-tag { font-size:0.73rem; text-transform:uppercase; letter-spacing:0.15em; color:var(--color-clay); font-weight:500; margin-bottom:0.5rem; display:block; }
.post-full h1 { font-family:var(--font-display); font-size:clamp(2rem,4vw,3rem); font-weight:300; color:var(--color-forest); line-height:1.12; margin-bottom:1rem; }
.post-full-meta { font-size:0.82rem; color:#aaa; margin-bottom:2rem; padding-bottom:1.5rem; border-bottom:1px solid rgba(74,124,89,0.12); }
.post-full-body { font-size:0.98rem; color:#444; line-height:1.85; }
.post-full-body p { margin-bottom:1.2rem; }

/* Admin write form */
.write-panel { display:none; max-width:760px; margin:0 auto; padding:3rem 2.5rem 5rem; }
.write-panel.visible { display:block; }
.write-panel h2 { font-family:var(--font-display); font-size:2rem; font-weight:300; color:var(--color-forest); margin-bottom:0.5rem; }
.write-panel .write-sub { font-size:0.88rem; color:#888; margin-bottom:2rem; }
.write-field { margin-bottom:1.25rem; }
.write-field label { display:block; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.1em; font-weight:500; color:var(--color-forest); margin-bottom:0.4rem; }
.write-field input, .write-field select, .write-field textarea { width:100%; padding:0.75rem 1rem; border:1px solid rgba(74,124,89,0.18); border-radius:4px; font-family:var(--font-body); font-size:0.95rem; color:var(--color-ink); background:#fafdf8; transition:border-color 0.2s; }
.write-field input:focus, .write-field select:focus, .write-field textarea:focus { outline:none; border-color:var(--color-sage); }
.write-field textarea { min-height:280px; resize:vertical; line-height:1.7; }
.write-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.write-actions { display:flex; gap:1rem; margin-top:1.75rem; flex-wrap:wrap; }
.write-btn-publish { background:var(--color-sage); color:#fff; padding:0.85rem 2rem; font-size:0.85rem; letter-spacing:0.1em; text-transform:uppercase; border:none; border-radius:2px; cursor:pointer; font-family:var(--font-body); transition:background 0.2s; }
.write-btn-publish:hover { background:var(--color-forest); }
.write-btn-cancel { background:transparent; color:#888; padding:0.85rem 1.5rem; font-size:0.85rem; letter-spacing:0.1em; text-transform:uppercase; border:1px solid rgba(74,124,89,0.2); border-radius:2px; cursor:pointer; font-family:var(--font-body); transition:all 0.2s; }
.write-btn-cancel:hover { border-color:var(--color-sage); color:var(--color-sage); }
.write-hint { font-size:0.8rem; color:#aaa; margin-top:0.4rem; }

/* ============================================================
   SHOP PAGE
   ============================================================ */
.shop-hero { background:linear-gradient(150deg, var(--color-bark) 0%, var(--color-clay) 100%); padding:5rem 2.5rem 4rem; text-align:center; }
.shop-hero h1 { font-family:var(--font-display); font-size:clamp(2.5rem,5vw,4rem); font-weight:300; color:#fff; margin-bottom:0.75rem; }
.shop-hero h1 em { font-style:italic; color:rgba(255,255,255,0.6); }
.shop-hero p { font-size:0.95rem; color:rgba(255,255,255,0.7); max-width:500px; margin:0 auto 2.5rem; }
.shop-main { max-width:1100px; margin:0 auto; padding:3rem 2.5rem 5rem; }
.shop-banner { background:var(--color-fog); border:1px solid rgba(192,122,74,0.2); border-radius:8px; padding:2rem; text-align:center; margin-bottom:3rem; }
.shop-banner h2 { font-family:var(--font-display); font-size:1.6rem; font-weight:300; color:var(--color-forest); margin-bottom:0.5rem; }
.shop-banner p { font-size:0.88rem; color:#777; margin-bottom:1.5rem; }
.shop-ext-btn { display:inline-block; background:var(--color-clay); color:#fff; padding:0.85rem 2.5rem; font-size:0.85rem; letter-spacing:0.1em; text-transform:uppercase; border-radius:4px; text-decoration:none; transition:background 0.2s; border:none; font-family:var(--font-body); cursor:pointer; }
.shop-ext-btn:hover { background:var(--color-bark); }
.product-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:1.5rem; }
.product-card { background:#fff; border:1px solid rgba(74,124,89,0.1); border-radius:8px; overflow:hidden; transition:transform 0.2s, box-shadow 0.2s; }
.product-card:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(26,58,42,0.1); }
.product-img { height:200px; display:flex; align-items:center; justify-content:center; font-size:4rem; }
.p1 { background:linear-gradient(135deg,#e8dfd0,#c8b89a); }
.p2 { background:linear-gradient(135deg,#d0e8d8,#a0c8b0); }
.p3 { background:linear-gradient(135deg,#e8d0d0,#c8a0a0); }
.p4 { background:linear-gradient(135deg,#d0d8e8,#a0b0c8); }
.product-body { padding:1.25rem; }
.product-tag { font-size:0.68rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--color-clay); font-weight:500; margin-bottom:0.3rem; display:block; }
.product-card h3 { font-family:var(--font-display); font-size:1.1rem; font-weight:400; color:var(--color-forest); margin-bottom:0.25rem; }
.product-card p { font-size:0.8rem; color:#888; margin-bottom:0.75rem; }
.product-footer { display:flex; align-items:center; justify-content:space-between; }
.product-price { font-family:var(--font-display); font-size:1.2rem; font-weight:400; color:var(--color-bark); }
.btn-shop-sm { background:var(--color-sage); color:#fff; padding:0.4rem 1rem; font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; border:none; border-radius:3px; cursor:pointer; font-family:var(--font-body); transition:background 0.2s; }
.btn-shop-sm:hover { background:var(--color-forest); }

/* ============================================================
   SIGN IN PAGE
   ============================================================ */
.auth-page { min-height:calc(100vh - var(--nav-height)); background:linear-gradient(160deg, var(--color-forest) 0%, #1a3a4a 100%); display:flex; align-items:center; justify-content:center; padding:2rem; }
.auth-box { background:#fff; border-radius:8px; padding:3rem 2.5rem; max-width:420px; width:100%; box-shadow:0 20px 60px rgba(0,0,0,0.2); }
.auth-logo { text-align:center; font-size:2rem; margin-bottom:0.4rem; }
.auth-box h2 { font-family:var(--font-display); font-size:1.75rem; font-weight:300; color:var(--color-forest); text-align:center; margin-bottom:0.35rem; }
.auth-sub { font-size:0.86rem; color:#888; text-align:center; margin-bottom:1.75rem; line-height:1.65; }
.auth-tabs { display:flex; background:var(--color-fog); border-radius:4px; padding:3px; margin-bottom:1.75rem; }
.auth-tab { flex:1; padding:0.58rem; font-size:0.78rem; text-align:center; cursor:pointer; border-radius:3px; font-weight:500; font-family:var(--font-body); border:none; background:transparent; color:#888; transition:all 0.2s; letter-spacing:0.05em; text-transform:uppercase; }
.auth-tab.active { background:#fff; color:var(--color-forest); box-shadow:0 1px 6px rgba(26,58,42,0.1); }
.field-group { margin-bottom:1rem; }
.field-group label { display:block; font-size:0.77rem; font-weight:500; color:var(--color-forest); margin-bottom:0.38rem; letter-spacing:0.06em; text-transform:uppercase; }
.field-group input { width:100%; padding:0.72rem 1rem; border:1px solid rgba(26,58,42,0.14); border-radius:4px; font-family:var(--font-body); font-size:0.94rem; color:var(--color-ink); transition:border-color 0.2s; background:#fafdf8; }
.field-group input:focus { outline:none; border-color:var(--color-sage); }
.auth-submit { width:100%; background:var(--color-sage); color:#fff; padding:0.88rem; font-size:0.87rem; letter-spacing:0.1em; text-transform:uppercase; border:none; border-radius:4px; cursor:pointer; font-family:var(--font-body); font-weight:500; transition:background 0.2s; margin-top:0.4rem; }
.auth-submit:hover { background:var(--color-forest); }
.auth-msg { display:none; padding:0.82rem 1rem; border-radius:4px; font-size:0.85rem; font-weight:500; margin-bottom:1rem; text-align:center; }
.msg-ok  { background:rgba(74,124,89,0.09); color:var(--color-sage); border:1px solid rgba(74,124,89,0.2); }
.msg-err { background:rgba(192,122,74,0.08); color:var(--color-bark); border:1px solid rgba(192,122,74,0.2); }
.forgot-link { display:block; text-align:right; font-size:0.78rem; color:var(--color-sage); cursor:pointer; margin-top:0.25rem; margin-bottom:0.5rem; text-decoration:none; }
.forgot-link:hover { text-decoration:underline; }

/* ============================================================
   CHAPTER AUTH PAGE
   ============================================================ */
.ch-auth-page { min-height:calc(100vh - var(--nav-height)); background:linear-gradient(160deg, var(--color-forest) 0%, #213d2f 100%); display:flex; align-items:center; justify-content:center; padding:2rem; }

/* ============================================================
   ADMIN BAR
   ============================================================ */
.admin-bar { display:none; position:fixed; bottom:0; left:0; right:0; background:rgba(26,58,42,0.97); backdrop-filter:blur(8px); border-top:2px solid var(--color-moss); padding:0.65rem 2rem; z-index:9999; align-items:center; gap:1rem; }
.admin-bar.on { display:flex; }
.admin-badge { background:rgba(122,171,133,0.15); border:1px solid rgba(122,171,133,0.3); color:var(--color-mist); font-size:0.7rem; padding:2px 9px; border-radius:20px; font-weight:500; letter-spacing:0.08em; }
.admin-hint { font-size:0.73rem; color:rgba(255,255,255,0.35); }
.admin-right { margin-left:auto; display:flex; gap:0.6rem; align-items:center; }
.admin-write-btn { background:var(--color-clay); color:#fff; font-size:0.76rem; font-weight:500; padding:0.38rem 1rem; border-radius:2px; border:none; cursor:pointer; font-family:var(--font-body); letter-spacing:0.08em; text-transform:uppercase; transition:background 0.2s; }
.admin-write-btn:hover { background:var(--color-bark); }
.save-btn { background:var(--color-moss); color:var(--color-forest); font-size:0.76rem; font-weight:500; padding:0.38rem 1rem; border-radius:20px; border:none; cursor:pointer; font-family:var(--font-body); letter-spacing:0.06em; transition:background 0.2s; }
.save-btn:hover { background:var(--color-mist); }

/* chapter bar */
.ch-bar { display:none; position:fixed; bottom:0; left:0; right:0; background:rgba(26,58,74,0.97); backdrop-filter:blur(8px); border-top:2px solid var(--color-moss); padding:0.65rem 2rem; z-index:9999; align-items:center; gap:1rem; }
.ch-bar.on { display:flex; }

/* editable outlines */
body.admin-mode [data-e] { outline:2px dashed rgba(122,171,133,0.4); outline-offset:3px; border-radius:3px; cursor:text; }
body.admin-mode [data-e]:hover { outline-color:rgba(122,171,133,0.9); }
body.admin-mode [data-e]:focus { outline-color:var(--color-moss); background:rgba(122,171,133,0.04); }
body.ch-mode [data-ce] { outline:2px dashed rgba(74,124,140,0.4); outline-offset:3px; border-radius:3px; cursor:text; }
body.ch-mode [data-ce]:hover { outline-color:rgba(74,124,140,0.9); }

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:9998; align-items:center; justify-content:center; padding:2rem; }
.modal-overlay.open { display:flex; }
.modal-box { background:#fff; border-radius:8px; padding:2.5rem; max-width:500px; width:100%; box-shadow:0 20px 60px rgba(0,0,0,0.2); max-height:90vh; overflow-y:auto; }
.modal-box h3 { font-family:var(--font-display); font-size:1.4rem; font-weight:300; color:var(--color-forest); margin-bottom:1.5rem; }
.modal-field { margin-bottom:0.9rem; }
.modal-field label { display:block; font-size:0.76rem; font-weight:500; color:var(--color-forest); margin-bottom:0.38rem; letter-spacing:0.06em; text-transform:uppercase; }
.modal-field input, .modal-field textarea, .modal-field select { width:100%; padding:0.68rem 1rem; border:1px solid rgba(26,58,42,0.12); border-radius:4px; font-family:var(--font-body); font-size:0.91rem; color:var(--color-ink); background:#fafdf8; }
.modal-field textarea { resize:vertical; min-height:75px; }
.modal-actions { display:flex; gap:1rem; margin-top:1.5rem; }
.modal-btn-p { flex:1; background:var(--color-sage); color:#fff; padding:0.72rem; font-size:0.82rem; font-weight:500; border:none; border-radius:4px; cursor:pointer; font-family:var(--font-body); letter-spacing:0.06em; text-transform:uppercase; }
.modal-btn-p:hover { background:var(--color-forest); }
.modal-btn-s { background:var(--color-fog); color:var(--color-forest); padding:0.72rem 1.4rem; font-size:0.82rem; font-weight:500; border:none; border-radius:4px; cursor:pointer; font-family:var(--font-body); }

/* FOOTER */
footer { background:var(--color-forest); color:rgba(200,219,197,0.55); padding:4rem 2.5rem 2rem; }
.footer-grid { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3rem; }
@media(max-width:720px) { .footer-grid { grid-template-columns:1fr 1fr; gap:2rem; } }
.footer-brand h3 { font-family:var(--font-display); font-size:1.5rem; font-weight:300; color:var(--color-mist); margin-bottom:0.75rem; }
.footer-brand p { font-size:0.85rem; line-height:1.75; }
.footer-col h4 { font-size:0.73rem; text-transform:uppercase; letter-spacing:0.13em; color:rgba(200,219,197,0.38); font-weight:500; margin-bottom:1rem; }
.footer-col ul { list-style:none; }
.footer-col ul li { margin-bottom:0.5rem; }
.footer-col ul li a { font-size:0.85rem; color:rgba(200,219,197,0.45); text-decoration:none; cursor:pointer; transition:color 0.2s; }
.footer-col ul li a:hover { color:var(--color-mist); }
.footer-bottom { border-top:1px solid rgba(122,171,133,0.12); padding-top:2rem; text-align:center; font-size:0.77rem; max-width:1100px; margin:0 auto; }

/* toast */
.toast { position:fixed; bottom:78px; right:2rem; background:var(--color-sage); color:#fff; padding:0.72rem 1.4rem; border-radius:4px; font-size:0.87rem; z-index:99999; box-shadow:0 4px 18px rgba(26,58,42,0.22); font-family:var(--font-body); animation:fadeUp 0.3s ease; }

/* ---- GOOGLE SIGN-IN BUTTON ---- */
.auth-divider { display:flex; align-items:center; gap:1rem; margin:1.25rem 0; }
.auth-divider::before,.auth-divider::after { content:''; flex:1; height:1px; background:rgba(26,58,42,0.1); }
.auth-divider span { font-size:0.78rem; color:#bbb; text-transform:uppercase; letter-spacing:0.08em; }
.google-btn-wrap { display:flex; justify-content:center; margin-bottom:0.5rem; min-height:44px; }
.google-btn-wrap iframe { border-radius:4px !important; }

/* ---- ADMIN DELETE BUTTONS (shown only in admin mode) ---- */
.admin-delete-btn {
  display:none;
  position:absolute; top:0.5rem; right:0.5rem;
  background:rgba(160,48,32,0.85); color:#fff;
  border:none; border-radius:50%; width:26px; height:26px;
  font-size:0.85rem; line-height:1; cursor:pointer;
  align-items:center; justify-content:center;
  z-index:10; transition:background 0.2s;
  font-family:var(--font-body); padding:0;
}
.admin-delete-btn:hover { background:rgba(160,48,32,1); }
body.admin-mode .admin-delete-btn { display:flex; }

/* Cards need relative positioning for delete btn */
.ch-card, .pet-card, .opp-card { position:relative; }

/* Editable chapter header text in admin mode */
body.admin-mode .ch-card-head h3 { cursor:text; }
body.admin-mode .ch-card-head h3:hover { background:rgba(255,255,255,0.12); border-radius:2px; }
body.admin-mode .ch-card-head .ch-state { cursor:text; }

/* Editable focus tags in admin mode */
body.admin-mode .ch-focus-tag { cursor:text; outline:1px dashed rgba(74,124,89,0.4); outline-offset:2px; border-radius:2px; }
body.admin-mode .ch-focus-tag:hover { outline-color:rgba(74,124,89,0.9); }
body.admin-mode .ch-focus-tag:focus { outline-color:var(--color-sage); background:rgba(74,124,89,0.15); }

/* Add-achievement button (admin mode on chapter cards) */
.add-ach-btn { display:none; font-size:0.76rem; color:var(--color-sage); background:none; border:1px dashed rgba(74,124,89,0.3); border-radius:3px; padding:2px 8px; cursor:pointer; margin-top:0.4rem; font-family:var(--font-body); transition:all 0.2s; }
.add-ach-btn:hover { background:rgba(74,124,89,0.07); border-color:var(--color-sage); }
body.admin-mode .add-ach-btn { display:inline-block; }

/* ---- LINK EDITOR (admin mode) ---- */
.link-editor-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45);
  z-index:10000; align-items:center; justify-content:center; padding:2rem;
}
.link-editor-overlay.open { display:flex; }
.link-editor-box { background:#fff; border-radius:8px; padding:2rem 2.5rem; max-width:460px; width:100%; box-shadow:0 20px 60px rgba(0,0,0,0.2); }
.link-editor-box h3 { font-family:var(--font-display); font-size:1.35rem; font-weight:300; color:var(--color-forest); margin-bottom:1.25rem; }
.link-editor-box .le-label { display:block; font-size:0.77rem; font-weight:500; color:var(--color-forest); margin-bottom:0.38rem; letter-spacing:0.06em; text-transform:uppercase; }
.link-editor-box input { width:100%; padding:0.7rem 1rem; border:1px solid rgba(26,58,42,0.14); border-radius:4px; font-family:var(--font-body); font-size:0.94rem; color:var(--color-ink); background:#fafdf8; margin-bottom:1rem; }
.link-editor-box input:focus { outline:none; border-color:var(--color-sage); }
.link-editor-actions { display:flex; gap:0.75rem; margin-top:0.5rem; }
.le-save { background:var(--color-sage); color:#fff; padding:0.7rem 1.5rem; font-size:0.84rem; font-weight:500; border:none; border-radius:4px; cursor:pointer; font-family:var(--font-body); letter-spacing:0.06em; text-transform:uppercase; }
.le-save:hover { background:var(--color-forest); }
.le-cancel { background:var(--color-fog); color:var(--color-forest); padding:0.7rem 1.2rem; font-size:0.84rem; font-weight:500; border:none; border-radius:4px; cursor:pointer; font-family:var(--font-body); }

/* In admin mode, add a small pencil indicator on links/buttons with href/onclick navigation */
body.admin-mode [data-link-id] { position:relative; }
body.admin-mode [data-link-id]::after {
  content:'✎';
  position:absolute; top:-6px; right:-6px;
  background:var(--color-clay); color:#fff;
  font-size:0.6rem; width:16px; height:16px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  pointer-events:none; z-index:5; line-height:16px; text-align:center;
}

/* Admin-only UI (hidden from public until you launch Urgent Dogs) */
body:not(.admin-mode) .admin-only { display: none !important; }

/* ============================================================
   URGENT ADOPTIONS (ML TRACKER)
   ============================================================ */
.urgent-locked {
  min-height: calc(100vh - var(--nav-height));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  background: var(--color-fog);
}
body.admin-mode .urgent-locked { display: none; }
.urgent-locked-inner {
  max-width: 420px;
  text-align: center;
  background: #fff;
  padding: 2.5rem 2rem;
  border: 1px solid rgba(74, 124, 89, 0.15);
  border-radius: 4px;
}
.urgent-locked-inner h2 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 300;
  color: var(--color-forest);
  margin-bottom: 0.75rem;
}
.urgent-locked-inner p { font-size: 0.92rem; color: #666; margin-bottom: 1.5rem; }

.urgent-hero {
  background:linear-gradient(155deg, #2a1510 0%, var(--color-forest) 45%, #1a3a2a 100%);
  padding:5rem 2.5rem 3.5rem;
  text-align:center;
  color:var(--color-mist);
}
.urgent-hero h1 {
  font-family:var(--font-display);
  font-size:clamp(2.2rem,5vw,3.5rem);
  font-weight:300;
  color:#fff;
  margin:0.5rem 0 1rem;
}
.urgent-hero h1 em { color:#e8a090; font-style:italic; }
.urgent-hero > p { max-width:640px; margin:0 auto 1.5rem; font-size:0.95rem; color:rgba(200,219,197,0.8); }
.urgent-disclaimer {
  max-width:720px; margin:0 auto;
  background:rgba(0,0,0,0.25);
  border:1px solid rgba(232,160,144,0.35);
  padding:0.85rem 1.25rem;
  font-size:0.82rem;
  line-height:1.55;
  border-radius:4px;
  text-align:left;
}
.urgent-main { padding:3rem 2.5rem 5rem; max-width:1200px; margin:0 auto; }
.urgent-stats {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:1rem;
  margin-bottom:2rem;
}
.urgent-stat {
  background:#fff;
  border:1px solid rgba(74,124,89,0.15);
  padding:1.25rem;
  text-align:center;
  border-radius:4px;
}
.urgent-stat-num {
  display:block;
  font-family:var(--font-display);
  font-size:2rem;
  color:var(--color-forest);
  line-height:1.1;
}
.urgent-stat-label { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--color-sage); }
.urgent-filters {
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  align-items:flex-end;
  margin-bottom:2rem;
  padding-bottom:1.5rem;
  border-bottom:1px solid rgba(74,124,89,0.12);
}
.urgent-filters label {
  display:flex;
  flex-direction:column;
  gap:0.35rem;
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--color-sage);
  font-weight:500;
}
.urgent-filters select {
  padding:0.55rem 0.85rem;
  border:1px solid rgba(26,58,42,0.14);
  border-radius:4px;
  font-family:var(--font-body);
  font-size:0.88rem;
  min-width:140px;
  background:#fafdf8;
}
.urgent-search {
  flex:1;
  min-width:200px;
  padding:0.55rem 1rem;
  border:1px solid rgba(26,58,42,0.14);
  border-radius:4px;
  font-family:var(--font-body);
}
.urgent-factors {
  background:var(--color-fog);
  padding:1.25rem 1.5rem;
  border-radius:4px;
  margin-bottom:2rem;
}
.urgent-factors h3 { font-family:var(--font-display); font-size:1.2rem; font-weight:400; color:var(--color-forest); margin-bottom:0.75rem; }
.urgent-factors ul { list-style:none; display:flex; flex-wrap:wrap; gap:0.5rem 1.25rem; font-size:0.84rem; color:var(--color-ink); }
.urgent-factors li::before { content:'• '; color:var(--color-clay); }
.urgent-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:1.25rem;
}
.urgent-card {
  background:#fff;
  border:1px solid rgba(74,124,89,0.12);
  border-radius:4px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:box-shadow 0.2s, transform 0.15s;
}
.urgent-card:hover { box-shadow:0 8px 28px rgba(26,58,42,0.1); transform:translateY(-2px); }
.urgent-card.tier-critical { border-top:3px solid #a03020; }
.urgent-card.tier-high { border-top:3px solid var(--color-clay); }
.urgent-card.tier-moderate { border-top:3px solid #c9a227; }
.urgent-card-head {
  padding:1rem 1.15rem 0.5rem;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:0.5rem;
}
.urgent-card-head h3 { font-family:var(--font-display); font-size:1.35rem; font-weight:400; color:var(--color-forest); }
.urgent-badge {
  font-size:0.65rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  padding:0.25rem 0.55rem;
  border-radius:2px;
  font-weight:500;
  white-space:nowrap;
}
.urgent-badge.critical { background:rgba(160,48,32,0.12); color:#a03020; }
.urgent-badge.high { background:rgba(192,122,74,0.15); color:var(--color-bark); }
.urgent-badge.moderate { background:rgba(201,162,39,0.15); color:#8a6a10; }
.urgent-badge.lower { background:rgba(74,124,89,0.12); color:var(--color-sage); }
.urgent-risk-bar {
  height:4px;
  background:rgba(74,124,89,0.12);
  margin:0 1.15rem 0.75rem;
  border-radius:2px;
  overflow:hidden;
}
.urgent-risk-fill { height:100%; background:linear-gradient(90deg, var(--color-sage), #a03020); }
.urgent-card-body { padding:0 1.15rem 1rem; flex:1; font-size:0.86rem; color:#555; }
.urgent-card-body p { margin-bottom:0.35rem; }
.urgent-card-body strong { color:var(--color-forest); font-weight:500; }
.urgent-card-actions {
  padding:0.85rem 1.15rem 1.15rem;
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  border-top:1px solid rgba(74,124,89,0.08);
}
.urgent-card-actions a, .urgent-card-actions button {
  font-size:0.72rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:0.5rem 0.9rem;
  border-radius:2px;
  text-decoration:none;
  cursor:pointer;
  font-family:var(--font-body);
  border:none;
}
.urgent-btn-primary { background:var(--color-clay); color:#fff; }
.urgent-btn-primary:hover { background:var(--color-bark); }
.urgent-btn-ghost { background:transparent; border:1px solid rgba(74,124,89,0.3); color:var(--color-forest); }
.urgent-empty { text-align:center; color:var(--color-sage); padding:2rem; }

/* ============================================================
   SHOPPING CART DRAWER
   ============================================================ */
.nav-cart-btn {
  background: transparent;
  border: none;
  font-size: 1.2rem;
  color: var(--color-mist);
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  transition: opacity 0.2s;
}
.nav-cart-btn:hover {
  opacity: 0.8;
}
.cart-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--color-clay);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 500;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Drawer overlays */
.cart-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cart-overlay.open {
  display: block;
  opacity: 1;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 420px;
  max-width: 100%;
  height: 100vh;
  background: var(--color-cream);
  box-shadow: -10px 0 40px rgba(0,0,0,0.15);
  z-index: 10001;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.cart-drawer.open {
  transform: translateX(0);
}

/* Header */
.cart-drawer-header {
  padding: 1.5rem;
  border-bottom: 1px solid rgba(74,124,89,0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-forest);
  color: #fff;
}
.cart-drawer-header h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.4rem;
  letter-spacing: 0.03em;
}
.cart-close-btn {
  background: transparent;
  border: none;
  color: var(--color-mist);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.2rem;
  transition: color 0.2s;
}
.cart-close-btn:hover {
  color: #fff;
}

/* Body */
.cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.cart-empty-state {
  margin: auto;
  text-align: center;
  color: var(--color-sage);
}
.cart-empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.6;
}

/* Cart Item card */
.cart-item {
  display: flex;
  gap: 1rem;
  background: #fff;
  border: 1px solid rgba(74,124,89,0.1);
  padding: 1rem;
  border-radius: 6px;
  align-items: center;
}
.cart-item-img {
  font-size: 2.2rem;
  width: 54px;
  height: 54px;
  background: var(--color-fog);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-item-details {
  flex: 1;
}
.cart-item-details h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--color-forest);
  margin-bottom: 0.2rem;
}
.cart-item-details .price {
  font-size: 0.86rem;
  color: var(--color-bark);
  font-weight: 500;
}
.cart-item-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.cart-qty-btn {
  background: var(--color-fog);
  border: none;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s;
}
.cart-qty-btn:hover {
  background: var(--color-mist);
}
.cart-item-qty {
  font-size: 0.88rem;
  font-weight: 500;
  min-width: 16px;
  text-align: center;
}
.cart-remove-btn {
  background: transparent;
  border: none;
  color: #a03020;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.25rem;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
}
.cart-remove-btn:hover {
  opacity: 0.7;
}

/* Footer */
.cart-drawer-footer {
  padding: 1.5rem;
  border-top: 1px solid rgba(74,124,89,0.12);
  background: #fff;
}
.cart-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--color-forest);
  margin-bottom: 0.5rem;
}
.cart-summary-row #cart-subtotal {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--color-bark);
}
.cart-footer-note {
  font-size: 0.78rem;
  color: #888;
  margin-bottom: 1.25rem;
}
.cart-checkout-btn {
  width: 100%;
  background: var(--color-clay);
  color: #fff;
  border: none;
  padding: 0.95rem;
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--font-body);
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}
.cart-checkout-btn:hover {
  background: var(--color-bark);
}

/* ── Depth zone: the tracker and the mission block, one illustration ──────
   The tiger spans both sections so the whole animal is visible at once. That
   means the zone — not either section — owns the perspective and the artwork,
   and neither section may paint an opaque background over it: the fog tint
   moves up to .depth-zone and both sections go transparent. The zone ends
   against the dark forest band below, so there is no seam to hide.

   Two separate things make it read as depth, and they are easy to confuse:

     · The perspective is real. The zone owns a 1100px perspective and the
       image sits 620px behind it, so the rotateX below is a true 3D rotation —
       the far edge foreshortens, the near edge does not. A 2D skew cannot do
       that, which is why the tilt reads as an object in space rather than a
       sliding picture. scale(1.564) cancels the perspective shrink, since a
       plane 620px back renders at 1100 / (1100 + 620) = 0.6395.
     · The drift is not automatic. The perspective origin scrolls with the
       zone, so depth alone produces no lag; scroll-depth.js supplies the
       offset that makes the tiger travel measurably less than the cards. Its
       sign matters — backwards, the background outruns the foreground and the
       whole thing feels wrong in a way people notice before they can name it.

   The mission-visual panel is an opaque gradient and deliberately left that
   way: something solid crossing in front of the artwork is what sells the
   distance. Occlusion is the cheapest depth cue there is.                    */
.depth-zone { position:relative; overflow:hidden;
  perspective:1100px; perspective-origin:50% 50%;
  background:var(--color-fog); }

.stats-section, .mission-section { position:relative; z-index:1; background:transparent; }

.stats-depth { position:absolute; inset:0; z-index:0; pointer-events:none;
  transform-style:preserve-3d; display:flex; align-items:center; justify-content:center; }

.stats-depth-img { width:auto; height:auto; opacity:0;
  max-height:94%; max-width:min(1180px, 86vw);
  transform:translateZ(-620px) scale(1.564)
            translate3d(0, var(--depth-y, 0px), 0)
            rotateX(var(--depth-rx, 0deg));
  transition:opacity 1.2s ease; }
.stats-depth-img.is-ready { opacity:0.34; }

/* Sits at z=0, so preserve-3d puts it in front of the tiger's plane. Only the
   extreme top and bottom are veiled — the zone has to start and end on flat
   colour or the illustration appears to be sliced by the section boundaries. */
.stats-depth-veil { position:absolute; inset:0;
  background:linear-gradient(180deg,
    var(--color-fog) 0%,
    rgba(240,237,229,0.55) 9%,
    rgba(240,237,229,0.12) 22%,
    rgba(240,237,229,0.12) 78%,
    rgba(240,237,229,0.6) 92%,
    var(--color-fog) 100%); }

/* The sections' own content has to win against a positioned sibling. */
.stats-header, .stats-tabs, .stats-panel, .mission-strip { position:relative; z-index:1; }

/* ── Contrast repair ──────────────────────────────────────────────────────
   Three places where live text sits directly on the artwork rather than on a
   solid card. Measured, not guessed: without these the tracker subtitle fell
   to 2.85:1, the inactive tab to 2.33:1 and the mission body copy to about
   3.2:1, all under the 4.5:1 that body-size text needs. A local cream wash
   costs nothing visually and restores each one.

   Re-measure if the artwork, its opacity or the type colours change. None of
   this is self-correcting, and the failure mode is quiet. */
.stats-header::before, .mission-text::before { content:''; position:absolute;
  z-index:-1; left:50%; top:50%; transform:translate(-50%,-50%);
  pointer-events:none; }

.stats-header::before { width:150%; height:190%;
  background:radial-gradient(ellipse 60% 58% at 50% 50%,
    rgba(240,237,229,0.98) 0%, rgba(240,237,229,0.96) 55%,
    rgba(240,237,229,0.8) 76%, rgba(240,237,229,0) 100%); }

.mission-text { position:relative; }
.mission-text::before { width:152%; height:170%;
  background:radial-gradient(ellipse 70% 68% at 50% 50%,
    rgba(240,237,229,0.72) 0%, rgba(240,237,229,0.66) 60%,
    rgba(240,237,229,0.42) 80%, rgba(240,237,229,0) 100%); }

/* The mission body copy is #555 elsewhere on the site; inside the depth zone it
   goes a step darker. That buys about 1.5:1 of contrast for free, which is what
   lets the wash above stay light enough to see the illustration through. A
   heavier wash would pass the same check but flatten the tiger into a pale
   smear right where its face is. */
.depth-zone .mission-text p { color:#3f3f3f; }

.stats-tab-btn { background:rgba(240,237,229,0.92); }

/* Phones get none of this. The cards stack into a column many times the height
   of the illustration, so the tiger ends up a stray patch of colour between
   two cards rather than a backdrop — and it would still cost bandwidth to look
   wrong. The script never assigns a source below 900px, so nothing is
   downloaded; this rule just reclaims the space. */
@media (max-width:899px) {
  .stats-depth { display:none; }
  .stats-section { padding:4rem 2.5rem; }
  .stats-header::before, .mission-text::before { display:none; }
}

/* No drift, no tilt — just a still illustration. */
@media (prefers-reduced-motion: reduce) {
  .stats-depth-img { transform:translateZ(-620px) scale(1.564); }
}

/* ── Volunteer hero: peacock photograph ───────────────────────────────────
   The photo replaces a flat forest gradient, which is still there underneath
   as the fallback — nothing looks broken while the file is in flight, and the
   page is never dependent on it arriving at all.

   Legibility is the whole design problem here. The subtitle is body-size text
   over a photograph, which needs 4.5:1, and peacock plumage has specular
   highlights that would blow straight through a gentle overlay. Two things
   solve it together:

     · The artwork is pre-graded. A highlight-capping curve was baked into the
       WebP files so no pixel exceeds sRGB 193 — see DEPLOY_NOTES. That alone
       is worth roughly a stop of scrim.
     · The scrim below is forest-tinted rather than neutral black, so darkening
       the photo pushes it toward the brand colour instead of toward grey.

   Because the highlights are already capped, the scrim can sit around 0.55
   instead of the 0.70 a raw photo would need — which is the difference between
   plumage you can see and a dark green smudge. Re-measure if the photograph is
   ever swapped: a brighter one will not pass on these settings.            */
.vol-hero { position:relative; overflow:hidden; isolation:isolate; }

.vol-hero-img { position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; object-position:center 42%; }

.vol-hero-scrim { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 74% 84% at 50% 48%,
      rgba(12,30,21,0.40) 0%, rgba(12,30,21,0.20) 62%, rgba(12,30,21,0) 100%),
    linear-gradient(170deg,
      rgba(12,30,21,0.44) 0%, rgba(12,30,21,0.30) 45%,
      rgba(12,30,21,0.40) 78%, rgba(12,30,21,0.60) 100%); }

.vol-hero-inner { position:relative; z-index:2; }

/* Lifted off rgba(200,219,197,0.8): a translucent colour over a photograph has
   no fixed contrast ratio, because what shows through it changes pixel to
   pixel. Opaque, and one step brighter, so the measurement means something. */
.vol-hero p { color:#e8f1e6; }
.vol-hero h1 em { color:#a8d4b0; }

/* The button sits low in the hero where the radial scrim has fallen off, so it
   gets a light backing of its own. It is not only for contrast — a hairline
   outline over busy plumage reads as part of the photograph rather than as a
   control. Measured at 7.9:1 for the label, comfortably past the 4.5:1 it
   needs, which leaves the plumage visible through it. */
.vol-hero .btn-outline { background:rgba(10,26,18,0.24); color:#eef5ec;
  border-color:rgba(238,245,236,0.55); }
.vol-hero .btn-outline:hover { background:rgba(10,26,18,0.6); color:#fff;
  border-color:rgba(255,255,255,0.85); }