/* Palette and type taken from worldhunger.fund */
:root {
  --ink: #2d2d2d;
  --night: #202020;
  --text: #535353;
  --line: #e4e0d8;
  --tan: #c0a375;
  --tan-deep: #7d6236;
  --gold: #f3c649;
  --sage: #90a878;
  --slate: #7e9b9f;
  --coral: #f28281;
  --paper: #ffffff;
  --sand: #f7f5f0;
  --head: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --read: "Lora", Georgia, serif;
}

html { scroll-padding-top: 90px; }
body { background: var(--paper); color: var(--text); font-family: var(--read); font-size: 1rem; }
h1, h2, h3 { font-family: var(--head); color: var(--ink); }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Top menu */
.whf-nav { background: rgba(32, 32, 32, .94); font-family: var(--head); padding: .55rem 0; }
.whf-nav .navbar-brand img { display: block; height: 42px; width: auto; }
.whf-nav .nav-link { color: #fff; font-size: .82rem; font-weight: 700; padding: .5rem .85rem; }
.whf-nav .nav-link:hover, .whf-nav .nav-link:focus, .whf-nav .nav-link.active { color: var(--tan); }
.whf-nav .dropdown-menu { background: #282828; border: 0; border-radius: 0; font-size: .85rem; }
.whf-nav .dropdown-item { color: #fff; }
.whf-nav .dropdown-item:hover, .whf-nav .dropdown-item:focus { background: #202020; color: var(--tan); }
.btn-donate { border: 2px solid #fff; border-radius: 3px; color: #fff; display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .03em; padding: .5rem 1.4rem; text-decoration: none; }
.btn-donate:hover, .btn-donate:focus { background: #fff; color: var(--ink); }

/* Lead story, set like the home page hero: right aligned over a full-width picture */
.hero { background: var(--night); color: #fff; min-height: 78vh; overflow: hidden; position: relative; display: flex; align-items: flex-end; }
.hero-img { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
.hero::after { background: linear-gradient(100deg, rgba(20, 20, 20, .25) 0%, rgba(20, 20, 20, .62) 45%, rgba(20, 20, 20, .88) 100%); content: ""; inset: 0; position: absolute; }
.hero-inner { padding-bottom: 3.5rem; padding-top: 7rem; position: relative; text-align: right; z-index: 1; }
.hero-kicker { font-family: var(--read); font-size: 1.15rem; font-style: italic; margin-bottom: .75rem; }
.hero h1 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.5rem); font-weight: 800; line-height: 1.12; margin: 0 0 1rem auto; max-width: 21em; }
.hero-summary { font-size: 1.2rem; font-style: italic; line-height: 1.5; margin: 0 0 1.75rem auto; max-width: 38em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: flex-end; }

.btn-whf { border: 0; border-radius: 3px; cursor: pointer; display: inline-block; font-family: var(--head); font-size: .85rem; font-weight: 600; letter-spacing: .03em; padding: .8rem 1.5rem; text-decoration: none; }
.btn-sage { background: var(--sage); color: #1d2415; }
.btn-gold { background: var(--gold); color: #3a2c04; }
.btn-sage:hover, .btn-sage:focus { background: #a4ba8e; color: #1d2415; }
.btn-gold:hover, .btn-gold:focus { background: #f7d570; color: #3a2c04; }

/* Report dates */
.days { background: var(--ink); color: #fff; font-family: var(--head); }
.days-inner { align-items: center; display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; justify-content: space-between; }
.days-list { display: flex; overflow-x: auto; }
.day-btn { background: none; border: 0; border-bottom: 4px solid transparent; color: #d4d4d4; font-size: .8rem; font-weight: 600; padding: .95rem .9rem .75rem; white-space: nowrap; }
.day-btn:hover, .day-btn:focus { color: #fff; }
.day-btn[aria-current="true"] { border-bottom-color: var(--gold); color: #fff; }
.days-note { color: #d4d4d4; font-size: .78rem; margin: 0; padding: .4rem 0; }

/* Page */
.page { padding-bottom: 4rem; padding-top: 2.25rem; }
.filters { align-items: center; display: flex; flex-wrap: wrap; gap: .75rem 1rem; justify-content: space-between; margin-bottom: 1.25rem; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { --c: var(--ink); background: var(--paper); border: 1px solid #cfcabf; border-radius: 3px; color: var(--ink); cursor: pointer; font-family: var(--head); font-size: .76rem; font-weight: 600; padding: .4rem .7rem; }
.chip::before { background: var(--c); content: ""; display: inline-block; height: .6em; margin-right: .4em; width: .6em; }
.chip span { color: #6d6d6d; font-weight: 400; margin-left: .25em; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip[aria-pressed="true"] span { color: #d4d4d4; }
.search input { border: 1px solid #cfcabf; border-radius: 3px; font-family: var(--head); font-size: .8rem; padding: .45rem .7rem; width: 13rem; }
.filter-state { font-family: var(--head); font-size: .85rem; margin-bottom: 1rem; }
.link-btn { background: none; border: 0; color: var(--tan-deep); cursor: pointer; font: inherit; font-weight: 600; padding: 0; text-decoration: underline; }

/* Top three stories */
.top-stories { display: grid; gap: 1.75rem; grid-template-columns: repeat(3, 1fr); margin-bottom: 2rem; }
.top-stories:empty { display: none; }
.top-card img { aspect-ratio: 3 / 2; display: block; margin-bottom: .75rem; object-fit: cover; width: 100%; }
.top-card h3 { font-size: 1.02rem; font-weight: 700; line-height: 1.3; margin: .2rem 0 0; }
.top-card a { text-decoration: none; }
.top-card a:hover h3 { color: var(--tan-deep); }

/* Story rows */
.story { border-top: 1px solid var(--line); display: grid; gap: 1.25rem; grid-template-columns: 200px minmax(0, 1fr); padding: 1.5rem 0; }
.story.no-image { grid-template-columns: minmax(0, 1fr); }
.story .thumb img { aspect-ratio: 4 / 3; display: block; object-fit: cover; width: 100%; }
.meta { color: #6d6d6d; font-family: var(--head); font-size: .74rem; margin: 0 0 .3rem; }
.meta strong { color: var(--ink); font-weight: 700; margin-right: .5em; }
.story h3 { font-size: 1.2rem; font-weight: 700; line-height: 1.3; margin: 0 0 .45rem; }
.story h3 a { text-decoration: none; }
.story h3 a:hover { color: var(--tan-deep); text-decoration: underline; }
.summary { line-height: 1.6; margin: 0 0 .6rem; max-width: 40em; }
.foot { align-items: center; display: flex; flex-wrap: wrap; font-family: var(--head); font-size: .72rem; gap: .35rem .9rem; }
.tag { align-items: center; color: var(--ink); display: inline-flex; font-weight: 600; gap: .35em; }
.tag::before { background: var(--c); content: ""; height: .6em; width: .6em; }
.also a { color: var(--tan-deep); }
.copy-btn { background: none; border: 0; color: var(--tan-deep); cursor: pointer; font: inherit; font-weight: 600; margin-left: auto; padding: 0; text-decoration: underline; }
.empty { border-top: 1px solid var(--line); font-family: var(--head); font-size: .9rem; padding: 2rem 0; }

/* Sidebar */
.side { position: sticky; top: 84px; }
.panel { background: var(--sand); margin-bottom: 1.25rem; padding: 1.25rem; }
.panel h2 { font-size: 1.05rem; font-weight: 800; margin: 0 0 .25rem; }
.panel-note { font-size: .86rem; line-height: 1.45; margin-bottom: .75rem; }
.spot { background: none; border: 0; cursor: pointer; display: block; font-family: var(--head); font-size: .8rem; font-weight: 600; margin-bottom: .55rem; padding: 0; text-align: left; width: 100%; }
.spot-label { color: var(--ink); display: flex; justify-content: space-between; margin-bottom: .15rem; }
.spot-bar { background: var(--tan); display: block; height: 6px; }
.spot:hover .spot-bar, .spot[aria-pressed="true"] .spot-bar { background: var(--ink); }
.trends { font-family: var(--head); font-size: .8rem; list-style: none; margin: 0; padding: 0; }
.trends li { border-top: 1px solid var(--line); padding: .5rem 0; }
.trends strong { color: var(--ink); }
.trends small { color: #6d6d6d; display: block; font-size: .72rem; }
.more { font-family: var(--head); font-size: .8rem; margin-top: .5rem; }
.more summary { color: var(--tan-deep); cursor: pointer; font-weight: 600; }
.source-list { columns: 2; font-size: .74rem; list-style: none; margin: .6rem 0 0; padding: 0; }
.source-list li { break-inside: avoid; color: var(--ink); padding: .15rem 0; }
.source-list .failed { color: #a33a39; }

/* Footer */
.whf-footer { background: var(--ink); color: #d4d4d4; font-family: var(--head); font-size: .82rem; line-height: 1.7; padding: 3rem 0 2rem; }
.whf-footer h2 { color: #fff; font-size: .9rem; font-weight: 700; }
.whf-footer a { color: #fff; }
.whf-footer a:hover { color: var(--tan); }
.whf-footer ul { list-style: none; margin: 0; padding: 0; }
.footer-tag { font-family: var(--read); font-size: 1.05rem; font-style: italic; margin-top: .75rem; }
.footer-note { border-top: 1px solid #535353; font-size: .74rem; margin: 1.5rem 0 0; padding-top: .9rem; }
.footer-note + .footer-note { border-top: 0; margin-top: 0; padding-top: 0; }

@media (max-width: 991.98px) {
  .whf-nav .navbar-collapse { padding: .5rem 0 1rem; }
  .side { position: static; }
  .hero { min-height: 70vh; }
}
@media (max-width: 767.98px) {
  .top-stories { grid-template-columns: 1fr; }
  .top-card img { aspect-ratio: 16 / 9; }
  .story { grid-template-columns: 110px minmax(0, 1fr); gap: .9rem; }
  .story h3 { font-size: 1.05rem; }
  .summary { display: none; }
  .search, .search input { width: 100%; }
  .hero-summary { font-size: 1.05rem; }
}