@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&family=Figtree:wght@400;500;600;700&display=swap");

/* Design tokens — matches the site theme (self-contained fallbacks). */
#newsPage{
  --green:#2A5235;--green-d:#1d3a26;--green-l:#3d6b47;
  --ink:#222831;--bg:#F8F9FA;--box:#FFFFFF;--rule:#dfe3e6;
  --muted:#5b656e;--sand:#eef1ed;
  --n-serif:"Newsreader",Georgia,serif;--n-sans:"Figtree",system-ui,sans-serif;
}
#newsPage,#newsPage *{box-sizing:border-box}
#newsPage{font-family:var(--n-sans);color:var(--ink)}

/* ── controls ── */
#newsPage .news-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:26px}
#newsPage .news-search{flex:1 1 260px;min-width:0;font:400 16px/1.5 var(--n-sans);color:var(--ink);background:#fff;border:1px solid var(--rule);border-radius:2px;padding:11px 14px}
#newsPage .news-search:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(42,82,53,.12)}
#newsPage .news-count{font-size:13px;color:var(--muted);margin:0}

/* ── two-column ── */
#newsPage .news-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:48px;align-items:start}

/* ── feed ── */
#newsPage .news-item{scroll-margin-top:90px}   /* offset for deep-links like /news/#soil-carbon */
#newsPage .news-empty{font-size:16px;color:var(--muted);padding:24px 0}
#newsPage .news-lead{background:var(--box);border:1px solid var(--rule);border-radius:4px;overflow:hidden;margin-bottom:8px}
#newsPage .news-lead .lead-img{width:100%;height:260px;object-fit:cover;display:block;background:var(--sand)}
#newsPage .news-lead .lead-body{padding:22px 24px}
#newsPage .news-meta{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green);margin:0 0 8px}
#newsPage .news-lead h2{font-family:var(--n-serif);font-weight:500;font-size:26px;line-height:1.15;margin:0 0 10px}
#newsPage .news-lead p{font-size:15.5px;line-height:1.6;color:var(--muted);margin:0 0 12px}
#newsPage .news-cite{font-style:italic;color:var(--ink)}

#newsPage .news-row{display:grid;grid-template-columns:110px 1fr auto;gap:22px;align-items:start;padding:22px 0;border-top:1px solid var(--rule)}
#newsPage .news-row .rdate{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding-top:3px}
#newsPage .news-row h3{font-family:var(--n-serif);font-weight:500;font-size:19px;line-height:1.25;margin:0 0 5px}
#newsPage .news-row h3 a{color:var(--ink);text-decoration:none}
#newsPage .news-row:hover h3 a{color:var(--green)}
#newsPage .news-row p{font-size:14.5px;line-height:1.55;color:var(--muted);margin:0}
#newsPage .news-row .who{color:var(--ink);font-style:italic}
#newsPage .more{display:inline-flex;align-items:center;gap:6px;font:600 13px/1 var(--n-sans);color:var(--green);text-decoration:none;white-space:nowrap;align-self:center}
#newsPage .more:hover{color:var(--green-d)}

/* while searching, the lead card collapses to match the ranked list */
#newsPage .news-feed.searching .news-lead{border:0;border-top:1px solid var(--rule);border-radius:0;margin:0;background:transparent}
#newsPage .news-feed.searching .news-lead .lead-img{display:none}
#newsPage .news-feed.searching .news-lead .lead-body{padding:22px 0}
#newsPage .news-feed.searching .news-lead h2{font-size:19px;margin-bottom:5px}
#newsPage .news-feed.searching .news-lead .news-cite{display:none}

/* ── sidebar ── */
#newsPage .news-side{position:sticky;top:24px;display:flex;flex-direction:column;gap:20px}
#newsPage .side-card{background:var(--box);border:1px solid var(--rule);border-radius:4px;padding:22px 22px 8px}
#newsPage .side-title{font-family:var(--n-serif);font-weight:500;font-size:20px;margin:0 0 4px}
#newsPage .side-sub{font-size:13px;color:var(--muted);margin:0 0 14px}
#newsPage .side-pub{display:block;padding:14px 0;border-top:1px solid var(--rule);text-decoration:none;color:inherit}
#newsPage .side-pub:first-of-type{border-top:0}
#newsPage .side-pub .pt{font-family:var(--n-serif);font-weight:500;font-size:15px;line-height:1.3;color:var(--ink)}
#newsPage .side-pub:hover .pt{color:var(--green)}
#newsPage .side-pub .pm{font-size:12.5px;color:var(--muted);margin-top:4px}
#newsPage .side-pub .pm .yr{color:var(--green);font-weight:700}
#newsPage .side-btn{display:block;text-align:center;margin:14px 0 16px;font:600 14px/1 var(--n-sans);color:#fff;background:var(--green);border:1.5px solid var(--green);border-radius:2px;padding:12px;text-decoration:none}
#newsPage .side-btn:hover{background:var(--green-d);border-color:var(--green-d)}

/* items that open a preview card */
#newsPage .news-item[data-summary]{cursor:pointer}
#newsPage .news-row[data-summary]:hover h3 a{color:var(--green)}

/* ── preview card (modal) ── */
#newsModal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:24px;font-family:var(--n-sans)}
#newsModal.open{display:flex}
#newsModal .nm-overlay{position:absolute;inset:0;background:rgba(20,30,25,.55)}
#newsModal .nm-panel{position:relative;background:var(--box);width:100%;max-width:600px;max-height:86vh;overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:6px;box-shadow:0 24px 60px rgba(20,30,25,.35)}
#newsModal .nm-scroll{flex:1 1 auto;min-height:0;overflow:auto;padding:32px 44px 10px}
#newsModal .nm-close{position:absolute;top:16px;right:22px;z-index:2;width:38px;height:38px;border:1px solid var(--rule);background:#fff;border-radius:50%;cursor:pointer;font-size:20px;line-height:1;color:var(--muted);display:grid;place-items:center}
#newsModal .nm-close:hover{color:var(--green);border-color:var(--green)}
#newsModal .nm-eyebrow{font:700 12px/1 var(--n-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin:0 0 8px}
#newsModal .nm-date{font:600 12px/1 var(--n-sans);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
#newsModal .nm-date:empty{display:none}
#newsModal .nm-title{font-family:var(--n-serif);font-weight:500;font-size:25px;line-height:1.18;margin:0 0 14px;color:var(--ink);padding-right:40px}
#newsModal .nm-summary{font-size:16px;line-height:1.7;color:var(--ink)}
#newsModal .nm-summary p{margin:0 0 1em}
#newsModal .nm-summary p:last-child{margin:0}
#newsModal .nm-links{margin-top:22px;padding-top:16px;border-top:1px solid var(--rule)}
#newsModal .nm-links[hidden]{display:none}
#newsModal .nm-links-label{font:700 11px/1 var(--n-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
#newsModal .nm-links-list{display:flex;flex-direction:column;gap:8px}
#newsModal .nm-link{font-size:14.5px;line-height:1.4;color:var(--green);text-decoration:underline;text-decoration-color:#b6c5ba;text-underline-offset:2px;word-break:break-word}
#newsModal .nm-link:hover{color:var(--green-d);text-decoration-color:var(--green)}
#newsModal .nm-foot{padding:16px 34px 24px}
#newsModal .nm-src{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--n-sans);color:#fff;background:var(--green);border:1.5px solid var(--green);border-radius:2px;padding:13px 22px;text-decoration:none}
#newsModal .nm-src:hover{background:var(--green-d);border-color:var(--green-d)}
#newsModal .nm-src[hidden]{display:none}
@media(max-width:560px){ #newsModal .nm-scroll{padding:28px 22px 8px} #newsModal .nm-foot{padding:14px 22px 22px} #newsModal .nm-title{font-size:22px} }

@media(max-width:860px){
  #newsPage .news-grid{grid-template-columns:1fr;gap:34px}
  #newsPage .news-side{position:static}
  #newsPage .news-row{grid-template-columns:1fr;gap:6px}
  #newsPage .news-row .more{align-self:start;margin-top:4px}
  #newsPage .news-lead .lead-img{height:200px}
}