/* ==========================================================================
   Blog index on the landing page's green painted ground.
   Loaded AFTER blog.css on blog.html AND on every blog/<slug>.html (as ../blog-green.css).
   Palette = the landing's: cream #f3eedb, dim #dde6cc, muted #c9d3bc,
   amber #f0b64c, base #27503b, tonal pills rgba(24,48,36,.78).
   ========================================================================== */

:root,:root[data-theme="dark"],:root[data-theme="light"]{
  --bg:#27503b; --bg-2:rgba(243,238,219,.08); --bg-3:rgba(243,238,219,.14);
  --ink:#f3eedb; --body:#dde6cc; --muted:#c9d3bc;
  --line:rgba(243,238,219,.16); --line-2:rgba(243,238,219,.34);
  --blue:#f0b64c; --blue-2:#f7cd78;
  --dark:rgba(16,36,26,.82); --dark-2:rgba(16,36,26,.7); --on-dark:#f3eedb; --on-dark-mute:#c9d3bc;
  --shadow:0 6px 22px rgba(5,16,10,.45);
  --tag-wildlife:#8fdcaf; --tag-history:#e9b872; --tag-mystery:#c9b0f2; --tag-dinosaurs:#84d6dc; --tag-notes:#d3dbc8;
}

/* the painted ground, same stack as index.html */
body{
  background-color:#27503b;color:#f3eedb;
  background-image:linear-gradient(180deg,rgba(22,48,34,.22) 0,rgba(22,48,34,.26) 160px,
                   rgba(22,48,34,.48) 360px,rgba(22,48,34,.48) 100%),url("bg-green.webp");
  background-size:auto,cover;background-position:center,center;
  background-attachment:fixed,fixed;
  transition:none;
}
@media(max-width:700px){
  body{background-image:linear-gradient(180deg,rgba(22,48,34,.22) 0,rgba(22,48,34,.26) 140px,
                        rgba(22,48,34,.48) 320px,rgba(22,48,34,.48) 100%),url("bg-green-m.webp");}
}
::selection{background:#f0b64c;color:#1c3a2a;}
a:focus-visible,button:focus-visible,input:focus-visible{outline-color:#f0b64c;}

/* ---------- top nav: a tonal band over the painting ---------- */
.topnav{background:rgba(16,36,26,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(243,238,219,.14);}
.topnav.scrolled{box-shadow:0 8px 24px -12px rgba(5,16,10,.7);}
.brand{color:#f3eedb;text-shadow:0 1px 8px rgba(10,28,18,.5);min-height:44px;}
.brand .b-dot{color:#f0b64c;margin-left:-7px;}
.topnav nav a{color:#dde6cc;font-size:14px;min-height:44px;display:inline-flex;align-items:center;}
.topnav nav a:hover,.topnav nav a.active{color:#f3eedb;}
.topnav nav a::after{background:#f0b64c;bottom:8px;}
/* the light/dark switch has no meaning on the painted ground: hidden on the index only */
.themetog{display:none;}
.progress span{background:#f0b64c;}

/* ---------- page head ---------- */
.page-head h1{color:#f3eedb;text-shadow:0 2px 14px rgba(10,28,18,.55);}
.page-sub{color:#dde6cc;text-shadow:0 1px 10px rgba(10,28,18,.5);}
.searchbar{background:rgba(24,48,36,.78);border-color:rgba(243,238,219,.22);border-radius:14px;}
.searchbar:focus-within{border-color:#f0b64c;box-shadow:0 0 0 3px rgba(240,182,76,.22);}
.searchbar svg{color:#c9d3bc;}
.searchbar input{color:#f3eedb;padding:13px 0;font-size:15px;min-height:44px;}
.searchbar input::placeholder{color:#c9d3bc;}
.head-rule{background:rgba(243,238,219,.18);}

/* ---------- filter bar ---------- */
.fpill{background:rgba(24,48,36,.78);border-color:rgba(243,238,219,.22);color:#dde6cc;
  font-size:13.5px;padding:9px 15px;min-height:44px;border-radius:14px;}
.fpill:hover{border-color:rgba(243,238,219,.5);color:#f3eedb;background:rgba(38,70,52,.92);}
.fpill.on{background:#f3eedb;border-color:#f3eedb;color:#1e3f2e;}
.feed-count{color:#c9d3bc;font-size:13.5px;}

/* ---------- labels: lifted to readable sizes on the painted ground ---------- */
.kv,.taglabel,.feat-label,.feat-foot{font-size:13.5px;letter-spacing:.09em;}
.taglabel svg{width:15px;height:15px;}

/* ---------- featured + rows ---------- */
.featured,.item{border-bottom-color:rgba(243,238,219,.16);}
.feat-media,.item-thumb{background:rgba(243,238,219,.08);border-radius:10px;
  box-shadow:inset 0 0 0 1px rgba(243,238,219,.18),0 22px 40px -22px rgba(5,16,10,.85),0 6px 14px rgba(5,16,10,.35);}
.feat-label{color:#f0b64c;}
.feat-title,.item-title{color:#f3eedb;text-shadow:0 1px 8px rgba(10,28,18,.45);}
.featured:hover .feat-title,.item:hover .item-title{color:#f0b64c;}
.feat-ex,.item-ex{color:#dde6cc;}
.empty{color:#dde6cc;}

/* ---------- pagination ---------- */
.pg{background:rgba(24,48,36,.78);border-color:rgba(243,238,219,.22);color:#f3eedb;border-radius:12px;
  min-width:44px;height:44px;}
.pg:hover{border-color:rgba(243,238,219,.5);color:#f0b64c;background:rgba(38,70,52,.92);}
.pg.on{background:#f3eedb;border-color:#f3eedb;color:#1e3f2e;}

/* ---------- footer: a deeper tonal band, cream text ---------- */
.site-footer{background:rgba(14,32,22,.66);color:#dde6cc;border-top:1px solid rgba(243,238,219,.14);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.foot-brand .fb-name{color:#f3eedb;}
.foot-brand p{color:#c9d3bc;font-size:14px;}
.foot-col h4{color:#c9d3bc;font-size:13.5px;}
.foot-col a{color:#f3eedb;font-size:14px;padding:11.5px 0;}
.foot-col a:hover{color:#f0b64c;}
.foot-rule{background:rgba(243,238,219,.14);}
.foot-legal{color:#c9d3bc;font-size:13.5px;}
.foot-legal a{color:#f3eedb;display:inline-block;padding:12px 2px;margin:-10px 0;}
.foot-legal a:hover{color:#f0b64c;}

/* ---------- phones: keep the lifts, the base sheet shrinks these below 13.5px ---------- */
@media(max-width:600px){
  .fpill{font-size:13.5px;padding:8px 13px;min-height:44px;}
  .kv,.taglabel,.feat-label,.feat-foot,.feed-count{font-size:13.5px;letter-spacing:.08em;}
  .item-ex{font-size:14px;}
  .topnav nav a{font-size:14px;}
  .foot-legal{font-size:13.5px;}
  .pg{min-width:44px;height:44px;font-size:13.5px;}
}

/* ==========================================================================
   ARTICLE PAGES on the same ground. The prose sits on a soft tonal panel so a
   long read has a stable ground; the painting shows around it.
   ========================================================================== */
.art-main{background:rgba(16,36,26,.56);border:1px solid rgba(243,238,219,.12);border-radius:18px;
  padding:34px 38px 30px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 24px 48px -24px rgba(5,16,10,.8);}
.backlink{color:#dde6cc;min-height:44px;font-size:14px;}
.backlink:hover{color:#f0b64c;}
.art-series{background:rgba(24,48,36,.78);border-color:rgba(243,238,219,.22);color:#dde6cc;font-size:13.5px;min-height:44px;}
.art-series:hover{border-color:rgba(243,238,219,.5);color:#f3eedb;}
.article h1{color:#f3eedb;}
.art-standfirst{color:#dde6cc;}
.art-byline{border-color:rgba(243,238,219,.16);}
.byline-who{color:#dde6cc;font-size:14px;} .byline-who b{color:#f3eedb;}
.share-btn{background:rgba(24,48,36,.78);border-color:rgba(243,238,219,.22);color:#f3eedb;font-size:13.5px;min-height:44px;}
.share-btn:hover{border-color:#f0b64c;background:rgba(38,70,52,.92);}

.article-body{color:#f3eedb;}
.article-body h2,.article-body h3{color:#f3eedb;}
.article-body a{color:#f0b64c;border-bottom-color:rgba(240,182,76,.4);}
.article-body a:hover{border-bottom-color:#f0b64c;}
.article-body blockquote{border-left-color:#f0b64c;color:#f3eedb;}
.article-body figure img{background:rgba(243,238,219,.06);box-shadow:0 14px 30px -16px rgba(5,16,10,.8);border-radius:6px;}
.article-body figcaption{color:#c9d3bc;font-size:13.5px;}
.article-body figcaption a{color:#f0b64c;}

/* table of contents */
.toc{background:rgba(243,238,219,.06);border-color:rgba(243,238,219,.14);}
.toc h2{color:#c9d3bc;font-size:13.5px;}
.toc a{color:#dde6cc;font-size:14px;padding:12px 0 12px 24px;}
.toc a::before{top:12px;}
.toc a::before{color:#c9d3bc;font-size:11.5px;}
.toc a:hover,.toc a.on{color:#f3eedb;}
.toc a.on{border-left-color:#f0b64c;} .toc a.on::before{color:#f0b64c;}
@media(min-width:1180px){ .toc{background:none;border-left-color:rgba(243,238,219,.18);} }

/* editorial components */
.pullstat{background:rgba(243,238,219,.07);border-left-color:#f0b64c;}
.pullstat .ps-n{color:#f3eedb;} .pullstat .ps-l{color:#dde6cc;} .pullstat .ps-l b{color:#f3eedb;}
.timeline{border-left-color:rgba(243,238,219,.2);}
.timeline li::before{background:#1a3627;border-color:#f0b64c;}
.timeline .tl-y{color:#f0b64c;font-size:13.5px;} .timeline .tl-t{color:#dde6cc;} .timeline .tl-t b{color:#f3eedb;}
.scalebars{background:rgba(243,238,219,.07);}
.scalebars .sb-lab{color:#dde6cc;font-size:13.5px;} .scalebars .sb-lab b{color:#f3eedb;}
.scalebars .sb-track{background:rgba(243,238,219,.12);} .scalebars .sb-fill{background:#f0b64c;}
.scalebars .sb-note{color:#c9d3bc;font-size:13.5px;}
.locmap{background:rgba(243,238,219,.07);}
.locmap .lm-land{fill:rgba(243,238,219,.14);stroke:rgba(243,238,219,.35);}
.locmap .lm-pin,.locmap .lm-ring{fill:#f0b64c;stroke:#f0b64c;} .locmap .lm-ring{fill:none;}
.locmap .lm-text{color:#dde6cc;} .locmap .lm-text b{color:#c9d3bc;font-size:13.5px;}
.post-sources{background:rgba(243,238,219,.07);}
.post-sources h2{color:#c9d3bc;font-size:13.5px;}
.post-sources li{color:#dde6cc;} .post-sources a{color:#f0b64c;}
.article-foot{border-top-color:rgba(243,238,219,.16);color:#c9d3bc;} .article-foot a{color:#f0b64c;}
.more{border-top-color:rgba(243,238,219,.16);}
.more-h{color:#c9d3bc;font-size:13.5px;}

@media(max-width:600px){
  .art-main{padding:20px 16px 18px;border-radius:14px;}
  .art-wrap{padding:18px 12px 16px;}
}

/* ---------- contents: a disclosure under the byline on phones and tablets,
     the sticky rail from 1180px up (see wireTOC in blog-common.js) ---------- */
.toc summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  font-family:'Public Sans','Helvetica Neue',Arial,sans-serif;font-size:13.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:#c9d3bc;min-height:44px;}
.toc summary::-webkit-details-marker{display:none;}
.toc summary::after{content:"";width:8px;height:8px;flex:none;margin-left:auto;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s ease;}
.toc details[open] > summary::after{transform:rotate(-135deg) translate(-2px,-2px);}
.toc summary:hover{color:#f3eedb;}
.toc-inline{margin:0 0 26px;}
.toc-inline ol{margin-top:4px;}
@media(min-width:1180px){
  .toc summary{cursor:default;pointer-events:none;min-height:0;margin-bottom:8px;}
  .toc summary::after{display:none;}
}