/* ============================================================
   The Generous — an independent guide to giving well
   Shared stylesheet. Palette: cream + green + gold.
   ============================================================ */
:root{
  --paper:#FBF3E3;      /* base */
  --card:#FFFDF8;       /* card surface */
  --green:#2E6E5E;      /* primary */
  --green-dk:#234F43;   /* headings / hover / footer */
  --gold-kick:#B08A2E;  /* kicker / label */
  --sand:#F3E6CC;       /* warm band */
  --gold:#CBA24A;       /* chart "costs you" */
  --chip-a:#E9C876;     /* bright gold chip */
  --chip-b:#F2D79A;
  --bd:#EAD9B6;         /* borders */
  --bd-2:#E4D3B2;
  --ink:#22201B;
  --ink-2:#4C4A43;
  --ink-3:#5B5851;
  --muted:#7A7466;
  --muted-2:#918A79;
  --foot:#CFE0D9;
  --foot-2:#9DBBB0;
  --sans:'Karla',system-ui,-apple-system,Segoe UI,sans-serif;
  --display:'Bricolage Grotesque','Karla',system-ui,sans-serif;
  --wrap:1200px;
  --gut:40px;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:19px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:var(--green);text-decoration:none;}
a:hover{color:var(--green-dk);}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);letter-spacing:-.01em;line-height:1.06;margin:0;}
p{margin:0 0 1.1em;text-wrap:pretty;}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---------- Masthead ---------- */
.masthead{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 0;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:13px;}
.brand:hover{color:inherit;}
.brand .g{width:44px;height:44px;border-radius:50%;background:var(--green);color:var(--paper);
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:24px;flex:0 0 auto;}
.brand .name{font-family:var(--display);font-weight:800;font-size:27px;color:var(--green-dk);line-height:1;}
.brand .tag{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-kick);font-weight:700;margin-top:4px;}
.navpills{display:flex;gap:4px;background:var(--sand);padding:6px;border-radius:999px;flex-wrap:wrap;}
.navpills a{font-size:14px;font-weight:700;color:#3B4A44;padding:9px 16px;border-radius:999px;transition:background .15s,color .15s;white-space:nowrap;}
.navpills a:hover,.navpills a[aria-current="page"]{background:var(--green);color:var(--paper);}
.navtoggle{display:none;}

/* ---------- Buttons / kickers ---------- */
.pill{display:inline-block;background:var(--green);color:var(--paper);font-weight:700;font-size:12.5px;
  letter-spacing:.1em;text-transform:uppercase;padding:8px 15px;border-radius:999px;}
.btn{display:inline-block;font-weight:700;font-size:15.5px;color:var(--paper);background:var(--green);
  padding:15px 28px;border-radius:999px;transition:background .15s;}
.btn:hover{background:var(--green-dk);color:var(--paper);}
.kicker{font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-kick);font-weight:700;}

/* ---------- Hero (home) ---------- */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:16px 0 48px;}
.hero h1{font-weight:800;font-size:clamp(38px,4.4vw,58px);color:var(--ink);margin:18px 0 0;text-wrap:balance;}
.hero .dek{font-size:21px;line-height:1.55;color:var(--ink-2);margin:20px 0 0;max-width:40ch;}
.hero .byline{display:flex;align-items:center;gap:18px;margin-top:28px;flex-wrap:wrap;}
.hero .byline .meta{font-size:14.5px;color:var(--muted);}
.hero-img{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:16/11;background:var(--sand);}
.hero-img img{width:100%;height:100%;object-fit:cover;}

/* ---------- Stat pills ---------- */
.statpills{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-bottom:52px;}
.statpill{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:24px 26px;}
.statpill .big{font-family:var(--display);font-weight:800;font-size:33px;color:var(--green);}
.statpill .body{font-size:15.5px;line-height:1.5;color:var(--ink-3);margin-top:8px;}

/* ---------- Ways to give (signature) ---------- */
.ways{background:var(--green);color:var(--paper);padding:56px 0 60px;}
.ways .head{text-align:center;margin-bottom:32px;}
.ways .head .kicker{color:var(--chip-a);}
.ways .head h2{font-weight:800;font-size:clamp(30px,3.4vw,42px);color:var(--paper);margin-top:8px;}
.waystabs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.waystab{display:flex;flex-direction:column;gap:9px;align-items:flex-start;text-align:left;cursor:pointer;
  padding:18px 18px 20px;border-radius:16px;color:var(--paper);
  border:1px solid rgba(233,200,118,.35);background:rgba(251,243,227,.06);transition:background .15s,border-color .15s;
  font-family:var(--sans);width:100%;}
.waystab:hover{background:rgba(251,243,227,.12);}
.waystab[aria-selected="true"]{background:rgba(251,243,227,.16);border-color:var(--chip-a);}
.waystab .mark{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:17px;color:var(--green-dk);}
.waystab .wn{font-family:var(--display);font-weight:700;font-size:18px;}
.waystab .wt{font-size:13.5px;opacity:.85;}
.waypanels{margin-top:16px;}
.waypanel{background:var(--paper);border-radius:18px;padding:32px 36px;
  display:grid;grid-template-columns:1.25fr 1fr;gap:34px;align-items:center;}
.waypanel .pn{font-family:var(--display);font-weight:800;font-size:27px;color:var(--green-dk);}
.waypanel .pb{font-size:17.5px;line-height:1.6;color:var(--ink-2);margin:12px 0 0;}
.waypanel .best{background:var(--sand);border-radius:14px;padding:24px 26px;}
.waypanel .best .lb{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-kick);font-weight:700;}
.waypanel .best .bt{font-family:var(--display);font-weight:600;font-size:19px;line-height:1.4;color:var(--green-dk);margin-top:8px;}
.js .waypanel[hidden]{display:none;}

/* ---------- Chart: your £10 two ways ---------- */
.tenchart{padding:56px 0 8px;}
.tenchart .head{text-align:center;max-width:58ch;margin:0 auto 34px;}
.tenchart h2{font-weight:800;font-size:clamp(28px,3vw,36px);text-align:center;}
.tenchart .dek{font-size:16.5px;color:var(--ink-3);margin-top:10px;}
.tencards{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.tencard{background:var(--card);border:2px solid var(--bd-2);border-radius:18px;padding:28px;}
.tencard.hi{border-color:var(--green);}
.tencard h3{font-weight:800;font-size:21px;color:var(--green-dk);}
.bars{display:flex;align-items:stretch;gap:26px;margin-top:24px;height:200px;}
.bars .col{flex:1;display:flex;flex-direction:column;text-align:center;}
.bars .track{position:relative;flex:1;width:100%;background:rgba(46,110,94,.08);
  border:1px solid var(--bd);border-radius:12px;display:flex;align-items:flex-end;overflow:hidden;}
.bars .fill{width:100%;border-radius:11px 11px 0 0;}
.bars .fill.green{background:var(--green);}
.bars .fill.gold{background:var(--gold);}
.bars .mark{position:absolute;left:0;right:0;border-top:2px dashed var(--green-dk);}
.bars .mark span{position:absolute;left:50%;transform:translateX(-50%);top:-24px;white-space:nowrap;
  font-family:var(--sans);font-weight:700;font-size:12px;color:var(--green-dk);background:var(--card);padding:1px 7px;border-radius:6px;}
.bars .v{font-family:var(--display);font-weight:800;font-size:20px;color:var(--ink);margin-bottom:8px;}
.bars .l{font-size:13px;color:var(--muted);margin-top:8px;}
.tencard .foot{font-size:14px;font-weight:700;margin-top:16px;}
.tencard .foot.ok{color:var(--green);}
.tencard .foot.amber{color:var(--gold-kick);}
.disclaimer{font-size:13.5px;color:var(--muted-2);text-align:center;margin:20px auto 0;font-style:italic;max-width:70ch;}

/* ---------- Article-card feed ---------- */
.feed{padding:44px 0;}
.feed .feedhead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap;}
.feed h2{font-weight:800;font-size:30px;}
.cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.acard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--bd);border-radius:18px;
  overflow:hidden;transition:transform .18s,box-shadow .18s;height:100%;}
.acard:hover{transform:translateY(-3px);box-shadow:0 16px 34px -20px rgba(34,32,27,.5);color:inherit;}
.acard .thumb{aspect-ratio:16/10;background:var(--sand);overflow:hidden;}
.acard .thumb img{width:100%;height:100%;object-fit:cover;}
.acard .body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1;}
.acard .cat{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-kick);font-weight:700;}
.acard h3{font-weight:700;font-size:22px;line-height:1.16;margin:9px 0 0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.32em;}
.acard .meta{font-size:14px;color:var(--muted);margin-top:auto;padding-top:18px;}
.morewrap{margin-top:26px;text-align:center;}

/* ---------- Colophon / supporters ---------- */
.colophon{background:var(--green-dk);color:var(--foot);padding:56px 0;}
.colophon .kicker{color:var(--chip-a);}
.colophon h2{color:var(--paper);font-weight:800;font-size:clamp(26px,3vw,34px);margin:8px 0 6px;}
.colophon .intro{color:var(--foot-2);max-width:64ch;font-size:16.5px;margin-bottom:8px;}
.colophon .tier-label{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--chip-a);font-weight:700;
  margin:34px 0 16px;padding-bottom:8px;border-bottom:1px solid rgba(207,224,217,.2);}
.credit-lead{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.credit-roll{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;}
.sponsor{display:flex;flex-direction:column;gap:12px;padding:22px 24px;border-radius:14px;
  background:#1C3D34;border:1px solid rgba(207,224,217,.14);color:var(--foot);transition:border-color .15s;}
.sponsor:hover{border-color:var(--chip-a);color:var(--foot);}
.sponsor img{height:34px;width:auto;max-width:170px;object-fit:contain;object-position:left center;}
.sponsor-blurb{font-size:14.5px;line-height:1.5;color:var(--foot-2);}
.sponsor-blurb:empty::before{content:"A supporter of the guide";color:var(--foot-2);opacity:.5;font-style:italic;}
.credit-roll .sponsor{flex:0 1 auto;flex-direction:row;align-items:center;gap:14px;padding:14px 18px;min-width:210px;}
.credit-roll .sponsor img{height:26px;}
.credit-roll .sponsor .sponsor-blurb{display:none;}

/* ---------- Footer ---------- */
.sitefoot{background:var(--green-dk);color:var(--foot);padding:40px 0;border-top:1px solid rgba(207,224,217,.15);}
.sitefoot .row{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;}
.sitefoot .wm{font-family:var(--display);font-weight:800;font-size:24px;color:var(--paper);}
.sitefoot .disc{font-size:14px;line-height:1.6;color:var(--foot-2);margin:12px 0 0;max-width:66ch;}
.sitefoot nav{display:flex;gap:22px;flex-wrap:wrap;}
.sitefoot nav a{font-size:14px;font-weight:600;color:var(--foot);}
.sitefoot nav a:hover{color:var(--paper);}

/* ---------- Sponsor sand panel (home) ---------- */
.sponsorpanel{background:var(--sand);border-radius:18px;padding:24px 30px;margin-bottom:44px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.sponsorpanel .lb{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);font-weight:700;}
.sponsorpanel .tt{font-family:var(--display);font-weight:600;font-size:19px;color:var(--ink-2);margin-top:4px;}
.sponsorpanel .slot{font-size:13.5px;font-weight:700;color:#B4A98F;background:var(--paper);
  border:1px solid var(--bd-2);border-radius:12px;padding:18px 44px;}

/* ============================================================
   ARTICLE PAGE + PALETTE COMPONENTS
   ============================================================ */
.post-hero{padding:20px 0 8px;}
.post-hero .crumb{font-size:13.5px;color:var(--muted);margin-bottom:18px;}
.post-hero .crumb a{color:var(--gold-kick);font-weight:700;}
.post-hero .eyebrow{margin-bottom:14px;}
.post-hero h1{font-weight:800;font-size:clamp(34px,4.6vw,56px);max-width:20ch;text-wrap:balance;}
.post-hero .standfirst{font-size:22px;line-height:1.5;color:var(--ink-2);max-width:52ch;margin:20px 0 0;}
.post-hero .byline{font-size:15px;color:var(--muted);margin-top:20px;}
.post-figure{margin:34px 0 0;border-radius:20px;overflow:hidden;aspect-ratio:16/9;background:var(--sand);}
.post-figure img{width:100%;height:100%;object-fit:cover;}

/* reading column carries its OWN gutter */
.article-body{max-width:74ch;margin:0 auto;padding:44px var(--gut) 8px;font-size:20px;line-height:1.72;color:var(--ink-2);}
.article-body > h2{font-family:var(--display);font-weight:800;font-size:30px;color:var(--ink);margin:1.8em 0 .5em;line-height:1.14;}
.article-body > h3{font-family:var(--display);font-weight:700;font-size:23px;color:var(--green-dk);margin:1.5em 0 .4em;}
.article-body p{margin:0 0 1.15em;}
.article-body p a,.article-body li a{color:var(--green);text-decoration:underline;text-decoration-color:var(--bd-2);text-underline-offset:3px;text-decoration-thickness:1.5px;}
.article-body p a:hover,.article-body li a:hover{color:var(--green-dk);text-decoration-color:var(--green);}
.article-body ul,.article-body ol{margin:0 0 1.2em;padding-left:1.3em;}
.article-body li{margin:.4em 0;}
.article-body strong{color:var(--ink);font-weight:700;}

/* numbered sections */
.article-body.numbered{counter-reset:sec;}
.article-body.numbered > h2{counter-increment:sec;display:flex;align-items:baseline;gap:16px;}
.article-body.numbered > h2::before{content:counter(sec,decimal-leading-zero);font-size:20px;color:var(--gold);
  font-weight:800;flex:0 0 auto;font-variant-numeric:tabular-nums;}

/* lead + drop cap */
.lead{font-size:23px;line-height:1.55;color:var(--ink);font-family:var(--sans);margin:0 0 1.2em;}
.lead.dropcap::first-letter,.article-body > p.dropcap::first-letter{
  font-family:var(--display);font-weight:800;font-size:3.4em;line-height:.78;float:left;
  margin:.05em .12em 0 0;color:var(--green);}

/* pullquote (marginal / full-bleed) */
.pullquote{margin:1.8em 0;border:0;padding:0;}
.pullquote p{font-family:var(--display);font-weight:600;font-size:29px;line-height:1.22;color:var(--green-dk);
  margin:0;position:relative;padding-left:26px;border-left:4px solid var(--gold);text-wrap:balance;}
@media(min-width:1480px){  /* was 1100: the marginal pullquote only fits from 1480 */
  .article-body .pullquote.margin{float:right;width:300px;margin:.4em -340px 1.2em 40px;}
  .article-body .pullquote.margin p{border-left:0;padding-left:0;border-top:3px solid var(--gold);padding-top:16px;font-size:25px;}
}

/* blockquote (sourced) */
.blockquote{margin:1.6em 0;background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:26px 30px;}
.blockquote p{font-size:21px;line-height:1.5;color:var(--ink);font-style:italic;margin:0;}
.blockquote cite{display:block;margin-top:14px;font-style:normal;font-size:15px;font-weight:700;color:var(--muted);}

/* callout */
.callout{margin:1.7em 0;background:var(--sand);border:1px solid var(--bd-2);border-left:5px solid var(--green);
  border-radius:12px;padding:22px 26px;}
.callout .clabel{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--green-dk);font-weight:800;margin-bottom:6px;}
.callout p{font-size:18px;line-height:1.55;color:var(--ink-2);margin:0;}

/* note */
.note{margin:1.5em 0;font-size:16px;line-height:1.55;color:var(--ink-3);
  background:var(--card);border:1px dashed var(--bd-2);border-radius:10px;padding:16px 20px;}
.note::before{content:"Note — ";font-weight:800;color:var(--gold-kick);}

/* versus */
.versus,.datatable{width:100%;border-collapse:collapse;margin:1.7em 0;font-size:17px;}
.versus th,.versus td,.datatable th,.datatable td{padding:14px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--bd);}
.versus thead th,.datatable thead th{font-family:var(--display);font-weight:700;color:var(--green-dk);
  background:var(--sand);border-bottom:2px solid var(--bd-2);}
.versus tbody th{font-weight:700;color:var(--ink);width:32%;}
.datatable tbody tr:nth-child(even){background:rgba(243,230,204,.35);}
.datatable caption,.versus caption{caption-side:bottom;font-size:14px;color:var(--muted);margin-top:10px;text-align:left;font-style:italic;}

/* statblocks */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin:1.7em 0;}
.statblock{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:22px 24px;text-align:left;}
.stat-num{display:block;font-family:var(--display);font-weight:800;font-size:38px;color:var(--green);line-height:1;}
.stat-label{display:block;font-size:14.5px;line-height:1.4;color:var(--ink-3);margin-top:10px;}

/* timeline */
.timeline{list-style:none;margin:1.8em 0;padding:0;border-left:2px solid var(--bd-2);}
.timeline li{position:relative;padding:0 0 24px 28px;}
.timeline li::before{content:"";position:absolute;left:-7px;top:5px;width:12px;height:12px;border-radius:50%;
  background:var(--gold);border:2px solid var(--paper);}
.timeline .t-when{display:block;font-family:var(--display);font-weight:700;font-size:16px;color:var(--green-dk);}
.timeline .t-what{display:block;font-size:16.5px;line-height:1.5;color:var(--ink-2);margin-top:3px;}

/* inline charts */
.chart{margin:1.9em 0;}
.chart svg{width:100%;height:auto;display:block;overflow:visible;}
.chart figcaption{font-size:14.5px;color:var(--muted);margin-top:12px;font-style:italic;}
.chart .c-bar{fill:var(--green);}
.chart .c-bar.alt{fill:var(--gold);}
.chart .c-label{font-family:var(--sans);font-size:13px;fill:var(--ink-2);}
.chart .c-val{font-family:var(--display);font-size:13px;font-weight:700;fill:var(--ink);}
.chart .c-axis{stroke:var(--bd-2);stroke-width:1;}
.chart .c-line{fill:none;stroke:var(--green);stroke-width:3;}
.chart .c-dot{fill:var(--green);}

/* figures + gallery */
.article-figure{margin:1.9em 0;}
.article-figure img{width:100%;border-radius:16px;background:var(--sand);}
.article-figure figcaption,.map-figure figcaption{font-size:14.5px;color:var(--muted);margin-top:12px;font-style:italic;}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:1.9em 0;}
.gallery figure{margin:0;}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;}

/* map figure (frame only) */
.map-figure{margin:1.9em 0;}
.map-slot{aspect-ratio:16/9;border-radius:16px;background:
  repeating-linear-gradient(45deg,var(--sand),var(--sand) 12px,#EFE0C2 12px,#EFE0C2 24px);
  border:1px solid var(--bd-2);display:flex;align-items:center;justify-content:center;}
.map-slot::after{content:"Map";font-family:var(--display);font-weight:700;color:var(--muted-2);letter-spacing:.1em;text-transform:uppercase;font-size:13px;}

/* profile / org cards */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:1.8em 0;}
.profile-card{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:24px;}
.profile-card .p-photo{width:64px;height:64px;border-radius:50%;object-fit:cover;background:var(--sand);margin-bottom:14px;}
.profile-card.no-photo .p-photo{display:none;}
.profile-card h3{font-size:20px;font-weight:700;}
.profile-card .p-role{font-size:14.5px;color:var(--gold-kick);font-weight:700;margin:3px 0 10px;}
.profile-card p{font-size:16px;line-height:1.5;color:var(--ink-3);margin:0 0 10px;}
.profile-card .p-links a,.profile-card .p-attr{font-size:14.5px;font-weight:700;}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:1.8em 0;}
.org-card{display:flex;flex-direction:column;gap:4px;background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:18px 20px;}
.org-card:hover{border-color:var(--green);color:inherit;}
.org-logo{height:30px;width:auto;object-fit:contain;object-position:left center;margin-bottom:6px;}
.org-name{font-family:var(--display);font-weight:700;font-size:18px;color:var(--ink);}
.org-host{font-size:14px;color:var(--muted);}
.entity-ref{font-weight:700;color:var(--green);white-space:nowrap;}

/* related / further */
.related,.further-grid{margin:2em auto 0;max-width:74ch;padding-inline:var(--gut);}
.related h2{font-family:var(--display);font-weight:800;font-size:26px;margin-bottom:16px;}
.related-links{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.related-links li a{display:flex;justify-content:space-between;align-items:center;gap:16px;
  background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:18px 22px;font-weight:700;font-size:18px;color:var(--ink);}
.related-links li a:hover{border-color:var(--green);color:var(--green-dk);}
.related-links li a .arr{color:var(--gold);font-weight:800;}
.related-links li a .rcat{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-kick);font-weight:700;margin-bottom:4px;}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;}
.further-grid a{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:18px 20px;font-weight:700;color:var(--ink);}
.further-grid a:hover{border-color:var(--green);color:var(--green-dk);}

/* ---------- Category / index pages ---------- */
.cat-hero{padding:36px 0 30px;border-bottom:1px solid var(--bd);}
.cat-hero .kicker{margin-bottom:12px;}
.cat-hero h1{font-weight:800;font-size:clamp(34px,4.4vw,52px);max-width:18ch;}
.cat-hero .intro{font-size:21px;line-height:1.55;color:var(--ink-2);max-width:56ch;margin:18px 0 0;}
.cat-list{list-style:none;margin:0;padding:36px 0;display:grid;gap:0;}
.cat-list li a{display:grid;grid-template-columns:64px 1fr 200px;gap:26px;align-items:center;
  padding:26px 0;border-top:1px solid var(--bd);color:inherit;}
.cat-list li:last-child a{border-bottom:1px solid var(--bd);}
.cat-list li a:hover{color:inherit;}
.cat-list li a:hover h3{color:var(--green-dk);}
.cat-list .n{font-family:var(--display);font-weight:800;font-size:34px;color:var(--gold);font-variant-numeric:tabular-nums;}
.cat-list .cat{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-kick);font-weight:700;}
.cat-list h3{font-weight:700;font-size:24px;margin:5px 0 4px;}
.cat-list .brief{font-size:16px;color:var(--ink-3);line-height:1.5;}
.cat-list .thumb{aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:var(--sand);}
.cat-list .thumb img{width:100%;height:100%;object-fit:cover;}

/* sections hub */
.hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;padding:36px 0 52px;}
.hubcard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--bd);border-radius:18px;padding:30px 32px;height:100%;color:inherit;}
.hubcard:hover{border-color:var(--green);color:inherit;transform:translateY(-3px);box-shadow:0 16px 34px -20px rgba(34,32,27,.5);transition:.18s;}
.hubcard .n{font-family:var(--display);font-weight:800;font-size:20px;color:var(--gold);}
.hubcard h2{font-weight:700;font-size:26px;margin:8px 0 8px;}
.hubcard p{font-size:16.5px;color:var(--ink-3);line-height:1.5;margin:0 0 16px;}
.hubcard .count{font-size:14px;font-weight:700;color:var(--green);margin-top:auto;}

/* ---------- Simple content pages ---------- */
.page-body{max-width:70ch;margin:0 auto;padding:36px var(--gut) 20px;font-size:19.5px;line-height:1.7;color:var(--ink-2);}
.page-body h1{font-weight:800;font-size:clamp(34px,4.4vw,52px);margin-bottom:8px;}
.page-body h2{font-weight:700;font-size:26px;color:var(--green-dk);margin:1.6em 0 .5em;}
.page-body p{margin:0 0 1.15em;}
.page-body a{color:var(--green);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--bd-2);}
.contact-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:1.6em 0;}
.contact-card{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:24px;}
.contact-card svg{width:26px;height:26px;color:var(--green);margin-bottom:12px;}
.contact-card h3{font-size:18px;font-weight:700;margin-bottom:4px;}
.contact-card p{font-size:16px;color:var(--ink-3);margin:0;}

/* 404 */
.nf{min-height:56vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px var(--gut);}
.nf .big{font-family:var(--display);font-weight:800;font-size:120px;color:var(--green);line-height:1;}
.nf h1{font-weight:800;font-size:34px;margin:10px 0 8px;}
.nf p{font-size:19px;color:var(--ink-3);max-width:44ch;}

/* ---------- Gift Aid calculator ---------- */
.gacalc{margin:2em 0;background:var(--card);border:1px solid var(--bd);border-radius:20px;overflow:hidden;}
.gacalc .gahead{background:var(--sand);padding:20px 26px;border-bottom:1px solid var(--bd-2);}
.gacalc .gahead .lb{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-kick);font-weight:800;}
.gacalc .gahead h3{font-family:var(--display);font-weight:800;font-size:24px;color:var(--green-dk);margin:4px 0 0;}
.gacalc .gabody{display:grid;grid-template-columns:1fr 1fr;gap:0;}
.gacalc .gainputs{padding:26px;border-right:1px solid var(--bd);}
.gacalc .field{margin-bottom:22px;}
.gacalc .field > label{display:block;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:9px;}
.gacalc .amount{display:flex;align-items:center;background:var(--paper);border:1.5px solid var(--bd-2);border-radius:12px;padding:0 16px;transition:border-color .15s;}
.gacalc .amount:focus-within{border-color:var(--green);}
.gacalc .amount .cur{font-family:var(--display);font-weight:800;font-size:24px;color:var(--muted);}
.gacalc .amount input{border:0;background:none;outline:none;font-family:var(--display);font-weight:800;font-size:26px;
  color:var(--ink);width:100%;padding:14px 6px;-moz-appearance:textfield;font-variant-numeric:tabular-nums;}
.gacalc .amount input::-webkit-outer-spin-button,.gacalc .amount input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.gacalc .bands{display:flex;flex-direction:column;gap:8px;}
.gacalc .band{display:flex;align-items:center;gap:12px;cursor:pointer;padding:12px 15px;border-radius:11px;
  border:1.5px solid var(--bd-2);background:var(--paper);transition:border-color .15s,background .15s;}
.gacalc .band:hover{border-color:var(--green);}
.gacalc .band input{accent-color:var(--green);width:18px;height:18px;flex:0 0 auto;}
.gacalc .band .bt{font-weight:700;font-size:16px;color:var(--ink);}
.gacalc .band .bd{font-size:13.5px;color:var(--muted);margin-left:auto;}
.gacalc .band.on{border-color:var(--green);background:rgba(46,110,94,.07);}
.gacalc .gaout{padding:26px;display:flex;flex-direction:column;gap:2px;}
.gacalc .headline{background:var(--green);color:var(--paper);border-radius:14px;padding:20px 22px;margin-bottom:16px;}
.gacalc .headline .k{font-size:13.5px;color:#CFE6DE;font-weight:600;}
.gacalc .headline .v{font-family:var(--display);font-weight:800;font-size:42px;line-height:1;margin-top:6px;font-variant-numeric:tabular-nums;}
.gacalc .headline .sub{font-size:13.5px;color:#CFE6DE;margin-top:8px;}
.gacalc .orow{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:12px 2px;border-top:1px solid var(--bd);}
.gacalc .orow .k{font-size:15px;color:var(--ink-3);}
.gacalc .orow .v{font-family:var(--display);font-weight:800;font-size:20px;color:var(--ink);font-variant-numeric:tabular-nums;}
.gacalc .orow.reclaim .v{color:var(--gold-kick);}
.gacalc .orow.cost .v{color:var(--green-dk);}
.gacalc .gafoot{padding:14px 26px 20px;}
.gacalc .gafoot p{font-size:13px;color:var(--muted-2);font-style:italic;margin:0;}
.gacalc .orow[hidden]{display:none;}
@media(max-width:760px){
  .gacalc .gabody{grid-template-columns:1fr;}
  .gacalc .gainputs{border-right:0;border-bottom:1px solid var(--bd);}
  .gacalc .headline .v{font-size:36px;}
}

/* ---------- styleguide ---------- */
.sg-section{padding:36px 0;border-top:1px solid var(--bd);}
.sg-section > h2{font-weight:800;font-size:28px;margin-bottom:6px;}
.sg-section > .sg-note{font-size:15px;color:var(--muted);margin-bottom:22px;}
.sg-label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-kick);font-weight:700;margin:24px 0 10px;}
.sg-swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;}
.sw{border-radius:12px;overflow:hidden;border:1px solid var(--bd);}
.sw .chip{height:70px;}
.sw .cap{padding:8px 10px;font-size:12.5px;background:var(--card);}
.sw .cap b{display:block;font-family:var(--display);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:960px){
  :root{--gut:26px;}
  .hero{grid-template-columns:1fr;gap:28px;}
  .waystabs{grid-template-columns:repeat(2,1fr);}
  .waypanel{grid-template-columns:1fr;gap:22px;}
  .article-body .pullquote.margin{float:none;width:auto;margin:1.8em 0;}
  .article-body .pullquote.margin p{border-top:0;border-left:4px solid var(--gold);padding:0 0 0 26px;font-size:26px;}
}
@media(max-width:760px){
  body{font-size:18px;}
  .navtoggle{display:inline-flex;align-items:center;justify-content:center;background:var(--sand);border:none;
    border-radius:10px;padding:11px 14px;cursor:pointer;color:var(--green-dk);}
  .navtoggle svg{width:22px;height:22px;}
  .navpills{display:none;width:100%;flex-direction:column;background:var(--sand);border-radius:14px;padding:8px;}
  .navpills.open{display:flex;}
  .navpills a{width:100%;}
  .masthead{padding:18px 0;}
  .statpills{grid-template-columns:1fr;}
  .tencards{grid-template-columns:1fr;}
  .cardgrid{grid-template-columns:1fr;}
  .credit-lead{grid-template-columns:1fr;}
  .cat-list li a{grid-template-columns:44px 1fr;}
  .cat-list .thumb{display:none;}
  .article-body{font-size:18.5px;}
  .sitefoot .row{flex-direction:column;align-items:flex-start;gap:18px;}
}
@media(max-width:400px){
  :root{--gut:18px;}
  .waystabs{grid-template-columns:1fr;}
  .bars{gap:12px;}
  .nf .big{font-size:84px;}
  .waypanel{padding:24px 20px;}
}

/* sp-roll-normalize: a logo roll keeps object-fit and loses its geometry.
   It used to set width:auto, height:46px, max-width:172px and min-width:30px, which let
   every plate in the roll shrink-wrap its own artwork — evbb measured 62px next to 204px
   in the SAME ROW. The operator's rule is that the dark ground is unified whatever the
   logo's size, so the plate cannot be sized by the logo. Geometry belongs to Design. */
[class~="roll"] .sponsor img,[class*="roll-"] .sponsor img,[class*="-roll"] .sponsor img{object-fit:contain;background:transparent}

/* sp-final-fix: darker logo tiles for contrast (light adult wordmarks were dim on #1C3D34), brighter blurb, centred + larger logos */
.sponsor{background:#101B17!important}
.sponsor img{object-position:center center!important}
.credit-lead .sponsor{align-items:center}
.credit-lead .sponsor img{height:44px}
.credit-roll .sponsor img{height:32px;margin:0 auto}
.sponsor-blurb{color:#CFE0D9!important}

/* sp-final-fix-2: logos were still small — enlarge + trim padding (beats sp-roll-normalize/-guard) */
.credit-lead .sponsor img{height:58px!important;max-width:210px!important;padding:4px 8px!important}
.credit-roll .sponsor img{height:42px!important;max-width:150px!important;padding:3px 6px!important;min-width:0!important}

/* sp-final-fix-3: roll logos fill the full tile width (operator: fill whole container width) */
.credit-roll .sponsor{padding:16px 14px!important;}
.credit-roll .sponsor img{width:100%!important;max-width:100%!important;height:auto!important;max-height:62px!important;padding:0!important;object-fit:contain!important;object-position:center center!important;min-width:0!important}

/* sp-final-fix-4: uniform grid for the filled roll (was ragged flex-wrap) */
.credit-roll{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:12px!important;}
.credit-roll .sponsor{min-width:0!important;width:auto!important;}

/* sp-final-fix-5: EVEN rows — uniform tile height + logos sized by consistent HEIGHT (not width-stretched) */
.credit-roll{display:grid!important;grid-template-columns:repeat(4,1fr)!important;grid-auto-rows:1fr!important;gap:12px!important;align-items:stretch!important;}
.credit-roll .sponsor{height:100%!important;min-height:96px!important;min-width:0!important;width:auto!important;display:flex!important;align-items:center!important;justify-content:center!important;}
.credit-roll .sponsor img{width:auto!important;max-width:86%!important;height:auto!important;max-height:46px!important;padding:0!important;object-fit:contain!important;object-position:center!important;}

/* sp-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate
   to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's
   size. width:100% (or one fixed width where copy shares the row) + one height for the tier
   + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside
   it. A ground and an inset are added ONLY where none exists — adding a second ground gives
   co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */
.credit-lead .sponsor .sp-logo.sp-logo{display:block!important;width:100%!important}
.credit-lead .sponsor.sponsor img{height:58px!important;display:block!important;width:100%!important}
.credit-roll .sponsor .sp-logo.sp-logo{display:block!important;width:100%!important}
.credit-roll .sponsor.sponsor img{height:39px!important;display:block!important;width:100%!important}

/* op-centre-lead: operator: the first three items are not centred, blurbs included. The mark sat
   210px wide with 25px of space left and 128px right, and the copy was flush left. Design's own
   .sponsor img is object-position:left center at max-width:170px; in a 363px lead tile that reads
   as misalignment rather than a choice. The mark takes the tile width (so centring is intrinsic)
   and the tile's text is centred with it. */
.credit-lead .sponsor{text-align:center}
.credit-lead .sponsor .sp-logo{display:block;width:100%}
.credit-lead .sponsor img{width:100%!important;max-width:100%!important;object-position:center center!important}


/* op-wrap-gutter: these elements carry the build's own gutter class but their own
   rule sets a padding SHORTHAND, which resets left/right to 0 — every line of type
   then sits against the screen edge at phone width. Design's own token is restated
   for the inline axis, on the exact element that lost it. Measured, not guessed:
   each selector below had TEXT within 2px of a viewport edge at 390. */
@media (max-width:900px){
  .wrap.hero{padding-inline:var(--gut)}
  .wrap.feed{padding-inline:var(--gut)}
}
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--display); color: var(--ink); letter-spacing: -0.01em; line-height: 1.06; margin: 0px;}
h2.rt-h3{font-family: var(--display); color: var(--ink); letter-spacing: -0.01em; line-height: 1.06; margin: 0px;}
.cat-list li a:hover h2:where(.rt-h3){color: var(--green-dk);}
.cat-list h2:where(.rt-h3){font-weight: 700; font-size: 24px; margin: 5px 0px 4px;}
.contact-card h2.rt-h3{font-size: 18px; font-weight: 700; margin-bottom: 4px;}
/* op-heading-levels:end */

/* op-tablet-gutter — text never sits on the screen edge between the mobile guard and the max-width */
@media (min-width:901px) and (max-width:1299px){
  div.feedhead{padding-left:max(var(--gut), 18px);padding-right:max(var(--gut), 18px)}
  section.wrap.hero{padding-left:max(var(--gut), 18px);padding-right:max(var(--gut), 18px)}
}
@media (min-width:681px) and (max-width:1299px){
  div.wrap.post-hero{padding-left:max(var(--gut), 18px);padding-right:max(var(--gut), 18px)}
  header.wrap.masthead{padding-left:max(var(--gut), 18px);padding-right:max(var(--gut), 18px)}
}
/* op-tablet-gutter:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a > span.thumb > img,
  a.acard > div.thumb > img,
  div.article-body.numbered > figure.article-figure > img,
  div.post-hero.wrap > figure.post-figure > img){height:auto}
/* op-img-dims:end */