.page{min-height:100vh;display:flex;flex-direction:column}
.page .top{padding:28px 48px 20px;margin:0}
.page main{flex:1;width:100%;max-width:760px;margin:0 auto;padding:64px 48px 80px}
.page.wide main{max-width:1180px}
.page h1{margin:0 0 20px}
.lede{font-size:19px;line-height:1.55;margin:0 0 44px;max-width:600px;color:var(--plum)}
.prose p{margin:0 0 22px;max-width:62ch}
.prose a,.faq a{color:var(--terracotta);text-decoration-thickness:1.5px;text-underline-offset:3px}
.btn{display:inline-flex;gap:28px;justify-content:space-between;align-items:center;background:var(--terracotta);color:var(--peach-light);text-decoration:none;font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;padding:15px 20px 13px;margin-top:12px}
.btn::after{content:"→";letter-spacing:0}
.btn:hover{background:var(--plum-deep)}

.faq{border-top:1.5px solid var(--plum)}
.faq details{border-bottom:1.5px solid var(--plum)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;padding:24px 0;font-family:var(--font-display);font-size:22px;line-height:1.2}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-body);font-size:22px;color:var(--terracotta)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 26px;max-width:62ch}

.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 32px;align-items:center}
.filters button{background:none;border:1.5px solid var(--plum);color:var(--plum);border-radius:0;font-family:var(--font-body);font-weight:600;font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:10px 16px 8px;cursor:pointer}
.filters button[aria-pressed=true],.filters button:hover{background:var(--plum-deep);border-color:var(--plum-deep);color:var(--peach-light)}
.filters select{background:var(--peach-light);border:1.5px solid var(--plum);color:var(--plum);border-radius:0;font-family:var(--font-body);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:9px 12px}
.filters input{flex:1;max-width:420px;border:1.5px solid var(--plum-deep);border-radius:0;background:var(--peach-light);color:var(--plum-deep);font:inherit;font-size:17px;padding:12px 14px;outline:none}

/* framed cards (tools, news, nations) */
.grid,.newsgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.tool,.news,.nation{background:var(--peach-light);color:var(--plum-deep);border:1.5px solid var(--plum);display:flex;flex-direction:column}
.tool{text-decoration:none;padding:22px 22px 0}
.news{padding:22px}
.tool .meta,.news .meta{font-weight:600;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;margin:0 0 12px;color:var(--plum);line-height:1.7}
.tool h2,.news h2,.nation h2{font-family:var(--font-display);font-weight:400;font-size:22px;line-height:1.15;margin:0 0 10px}
.tool p,.news p,.nation p{margin:0 0 16px;font-size:16px;line-height:1.55}
.tool ol{margin:0 0 18px;padding-left:20px;font-size:15px;line-height:1.5}
.tool .src{margin:auto -22px 0;border-top:1.5px solid var(--plum);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:13px 22px 11px;display:flex;justify-content:space-between;gap:8px;color:var(--plum)}
.tool .src::after{content:"→";letter-spacing:0}
.tool:hover{border-color:var(--terracotta)}
.tool:hover .src{background:var(--terracotta);color:var(--peach-light);border-top-color:var(--terracotta)}
.tool[data-cat="Acknowledge"] .meta{color:var(--terracotta)}
.tool[data-cat="Give"] .meta{color:var(--olive)}
.news h2 a{color:var(--plum-deep);text-decoration:none}
.news h2 a:hover{color:var(--terracotta)}
.news .act{display:block;background:var(--terracotta);color:var(--peach-light);text-decoration:none;font-weight:600;font-size:14px;padding:11px 14px 9px;margin:0 0 16px}
.news .act::after{content:" →"}
.news .src{margin:auto 0 0;font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--plum)}

.nationgrid{columns:3 300px;column-gap:20px}
.nation{break-inside:avoid;padding:22px;margin:0 0 20px;scroll-margin-top:24px}
.nation.hl{border-color:var(--terracotta);border-width:2px}
.nation .links,.nation .givelist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:15px}
.nation .links a,.nation .givelist a{color:var(--plum-deep);text-decoration-color:var(--terracotta);text-decoration-thickness:1.5px;text-underline-offset:3px}
.nation .label{margin:22px 0 10px}

.page .foot{padding:32px 48px;margin:0;border-top:1.5px solid var(--plum)}
@media (max-width:820px){
  .page .top{padding:20px 20px 16px}
  .page main{padding:40px 20px 56px}
  .page .foot{padding:24px 20px}
  .lede{font-size:18px;margin-bottom:32px}
}

/* sections */
.sec{margin:0 0 72px}
.sech{font-family:var(--font-display);font-weight:400;font-size:26px;line-height:1.1;margin:0 0 24px;padding-bottom:14px;border-bottom:1.5px solid var(--plum);color:var(--plum-deep)}
.stl{font-weight:600;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--plum);margin-right:6px}

/* news: newspaper layout */
.news{padding:0;overflow:hidden}
.news .ph{display:block;aspect-ratio:16/9;background:var(--peach);overflow:hidden;border-bottom:1.5px solid var(--plum)}
.news .ph img{display:block;width:100%;height:100%;object-fit:cover;filter:sepia(.15)}
.news .ph.noimg{background:var(--plum) url('/logo.svg') center/36px no-repeat}
.newssec[data-kind="Win"] .ph.noimg{background-color:var(--olive)}
.newssec[data-kind="Fight"] .ph.noimg{background-color:var(--terracotta)}
.news .body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.news h3{font-family:var(--font-display);font-weight:400;font-size:21px;line-height:1.2;margin:0 0 10px}
.news h3 a{color:var(--plum-deep);text-decoration:none}
.news h3 a:hover{color:var(--terracotta)}
.news.lead{display:grid;grid-template-columns:1.4fr 1fr;margin:0 0 20px}
.news.lead .ph{aspect-ratio:auto;min-height:320px;border-bottom:0;border-right:1.5px solid var(--plum)}
.news.lead .body{padding:32px}
.news.lead h3{font-size:30px;line-height:1.15}
.news.lead p{font-size:17px}
.empty{color:var(--plum);font-style:italic}
@media (max-width:820px){
  .news.lead{display:flex;flex-direction:column}
  .news.lead .ph{min-height:0;aspect-ratio:16/9;border-right:0;border-bottom:1.5px solid var(--plum)}
  .news.lead .body{padding:20px 22px 22px}
  .news.lead h3{font-size:24px}
  .sec{margin-bottom:56px}
}