/* Felids & Friends — natural-history field-journal theme
   Content is ALWAYS visible with CSS alone. No JS-gated visibility. */
:root{
  --ink:#211f1a; --ink-2:#37332b; --paper:#fffdf8; --cream:#f7f1e4; --cream-2:#efe6d3;
  --tawny:#b0692a; --tawny-dk:#8f5220; --gold:#c8862b; --sage:#5f7355; --sage-dk:#48594010;
  --line:#e2d9c5; --muted:#6f6752; --muted-2:#8b8069;
  --maxw:1120px; --read:730px;
  --shadow:0 10px 30px rgba(33,31,26,.12); --shadow-sm:0 3px 12px rgba(33,31,26,.09);
  --r:14px; --r-sm:9px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:18px; line-height:1.72; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--tawny-dk); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px}
a:hover{color:var(--tawny)}
h1,h2,h3{font-family:"Spectral",Georgia,serif; line-height:1.18; color:var(--ink); font-weight:600}
h1{font-size:clamp(2.1rem,4.6vw,3.2rem); letter-spacing:-.01em}
h2{font-size:clamp(1.5rem,2.8vw,2rem); margin:2.2rem 0 .7rem}
h3{font-size:1.2rem; margin:1.4rem 0 .4rem}
p{margin:0 0 1.1rem}

/* ---------- header / nav ---------- */
.site-header{position:sticky; top:0; z-index:50; background:rgba(255,253,248,.92);
  backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--line)}
.nav{max-width:var(--maxw); margin:0 auto; padding:.7rem 1.25rem;
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:700; text-decoration:none;
  color:var(--ink); font-family:"Spectral",serif; font-size:1.18rem}
.brand:hover{color:var(--ink)}
.mark{display:grid; place-items:center; width:34px; height:34px; border-radius:9px;
  background:var(--ink); color:var(--gold); font-family:"Spectral",serif; font-weight:700; font-size:1.15rem}
.brand-name{white-space:nowrap}
.nav-toggle{display:none; margin-left:auto; background:none; border:1px solid var(--line);
  border-radius:8px; font-size:1.3rem; line-height:1; padding:.35rem .55rem; color:var(--ink); cursor:pointer}
.nav-links{list-style:none; display:flex; flex-wrap:wrap; gap:.15rem; margin:0 0 0 auto; padding:0}
.nav-links a{display:inline-block; text-decoration:none; color:var(--ink-2); font-weight:500;
  font-size:.96rem; padding:.42rem .7rem; border-radius:8px; transition:background .15s,color .15s}
.nav-links a:hover{background:var(--cream); color:var(--tawny-dk)}
.nav-links a.active{color:var(--tawny-dk); background:var(--cream-2)}

/* ---------- hero ---------- */
.page-hero{position:relative; max-width:100%; overflow:hidden}
.page-hero__img{width:100%; height:clamp(260px,44vh,460px); object-fit:cover}
.page-hero__overlay{position:absolute; inset:0; display:flex; align-items:flex-end;
  background:linear-gradient(180deg,rgba(20,18,14,.05) 0%,rgba(20,18,14,.28) 45%,rgba(20,18,14,.78) 100%)}
.page-hero__inner{max-width:var(--maxw); width:100%; margin:0 auto; padding:1.6rem 1.25rem 1.7rem; color:#fff}
.page-hero__inner h1{color:#fff; max-width:16ch; text-shadow:0 2px 18px rgba(0,0,0,.4)}
.page-hero__inner .tagline{color:#f4ecdd; max-width:60ch; margin:.6rem 0 0; font-size:1.05rem;
  text-shadow:0 1px 10px rgba(0,0,0,.45)}

/* ---------- page head (no-image pages) ---------- */
.page-head{background:linear-gradient(180deg,var(--cream) 0%,var(--paper) 100%); border-bottom:1px solid var(--line)}
.page-head__inner{max-width:var(--read); margin:0 auto; padding:2.6rem 1.25rem 1.7rem}
.page-head .tagline{color:var(--muted); font-size:1.08rem; margin:.5rem 0 0}

/* ---------- article ---------- */
.article{max-width:var(--read); margin:0 auto; padding:2.2rem 1.25rem 3.2rem}
.article > p:first-of-type{font-size:1.12rem; color:var(--ink-2)}
.article .lead{font-family:"Spectral",serif; font-style:italic; color:var(--muted); font-size:1.15rem; margin-top:-.3rem}
.article h2{position:relative; padding-left:.9rem}
.article h2::before{content:""; position:absolute; left:0; top:.15em; bottom:.15em; width:4px;
  border-radius:3px; background:linear-gradient(var(--gold),var(--tawny))}
.article ul,.article ol{margin:0 0 1.2rem; padding-left:1.3rem}
.article li{margin:.35rem 0}
.article ul li::marker{color:var(--tawny)}
.article strong{color:var(--ink)}
blockquote{margin:1.6rem 0; padding:1.1rem 1.4rem; background:var(--cream);
  border-left:4px solid var(--gold); border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-family:"Spectral",serif; color:var(--ink-2)}
blockquote p{margin:0 0 .8rem; line-height:1.6}
blockquote p:last-child{margin:0}

/* ---------- footer ---------- */
.site-footer{background:var(--ink); color:#d9d1bf; margin-top:2rem}
.foot-grid{max-width:var(--maxw); margin:0 auto; padding:2.8rem 1.25rem 1.8rem;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:1.8rem}
.foot-brand .mark{margin-bottom:.7rem}
.foot-lead{font-family:"Spectral",serif; font-size:1.25rem; color:#fff; margin:.2rem 0 .5rem}
.foot-note{font-size:.9rem; color:#a99f8a; line-height:1.6}
.foot-col h3{color:var(--gold); font-family:"Inter",sans-serif; font-size:.82rem; letter-spacing:.09em;
  text-transform:uppercase; margin:.2rem 0 .7rem}
.foot-col ul{list-style:none; margin:0; padding:0}
.foot-col li{margin:.35rem 0}
.foot-col a{color:#d9d1bf; text-decoration:none; font-size:.94rem}
.foot-col a:hover{color:#fff; text-decoration:underline}
.foot-bar{border-top:1px solid #3a3529; text-align:center}
.foot-bar p{max-width:var(--maxw); margin:0 auto; padding:1.1rem 1.25rem; font-size:.82rem; color:#8b8069}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .nav-toggle{display:block}
  .nav-links{flex-basis:100%; margin:.5rem 0 0; flex-direction:column; gap:.1rem}
  .nav-links a{display:block; padding:.6rem .5rem; border-radius:8px}
  /* nav is visible by default; JS collapse is progressive enhancement only */
  .nav-links.is-collapsed{display:none}
  .foot-grid{grid-template-columns:1fr 1fr; gap:1.3rem}
}
@media (max-width:520px){
  .foot-grid{grid-template-columns:1fr}
}

/* Safeguard: content is never hidden waiting on JS. Any scroll-reveal markup
   is progressive enhancement only and must always render. */
[data-aos]{opacity:1 !important; transform:none !important}