/* CHARITY (15 Oct 2026) - on top of ../page.css. The About page's charity rules (about.css "charity", with their rulings of
   11 and 14 Sep 2026 kept), moved with the section; the hero is page.css's, as on Sustainability. */
:root{--accent:var(--pink);--accent-ink:#fff}
/* Uluru's sky is bright at the top: the same shade as the Sustainability hero, so the nav's white type stays on a dark ground */
.hero .shade{background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.08) 42%,rgba(0,0,0,.6) 100%)}
.give{padding:90px var(--pad) 110px}
.gg{display:grid;grid-template-columns:1.2fr 1fr;gap:22px}
.gg.one{grid-template-columns:1fr}   /* the £1 card is off (19 Oct 2026): the Great Plate Robbery card takes the row */
.gcard{position:relative;border-radius:20px;overflow:hidden;background:#111;color:#fff;min-height:420px;box-shadow:0 20px 40px rgba(0,0,0,.14)}
.gcard img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75;transition:transform 1.2s var(--ease)}
@media (hover:hover){.gcard:hover img.bg{transform:scale(1.04)}}
.gcard .sh{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.85))}
.gcard .body{position:absolute;left:28px;right:28px;bottom:26px}
.gcard .tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.1em;padding:6px 12px;border-radius:999px;border:1.5px solid rgba(255,255,255,.7);margin-bottom:14px}
.gcard .tag i{width:8px;height:8px;border-radius:50%;background:var(--dgreen);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}}
.gcard h3{font-family:var(--head);font-weight:400;letter-spacing:-0.02em;line-height:1.02;font-size:clamp(22px,2vw,28px)}
.gcard .amt{font-family:var(--head);font-size:clamp(32px,3.2vw,56px);letter-spacing:-0.02em;line-height:1.02;font-variant-numeric:tabular-nums}
.gcard p{font-size:15px;line-height:1.45;color:rgba(255,255,255,.88);margin-top:12px;max-width:52ch}
/* the two charities' "in aid of" lock-ups, transparent, big, top right (Nuo, 11 Sep) */
.gcard .logos{position:absolute;top:22px;right:22px;display:flex;gap:18px;align-items:flex-start;z-index:2}
.gcard .logos img{height:64px;width:auto}
/* Dolly's face stays clear: text bottom-left, a small coin top-right (Nuo, 11 Sep) */
.gcard.pound img.bg{object-position:50% 20%}
.gcard.pound .body p{max-width:none}
.gcard.pound .coin{position:absolute;right:24px;top:24px;width:72px;height:72px;border-radius:50%;background:#f5d67a;color:#3b2a06;display:grid;place-items:center;font-family:var(--head);font-size:34px;letter-spacing:-0.05em;box-shadow:inset 0 0 0 5px #e0b94e,0 12px 26px rgba(0,0,0,.4);animation:coin 6s ease-in-out infinite}
@keyframes coin{0%,100%{transform:rotateY(0)}50%{transform:rotateY(180deg)}}
/* the Radio Lamington page's blush, not the hot pink (Nuo, 11 Sep 2026); ink type (white on #FF3CA0 was 3.28:1) */
.lam{margin-top:22px;border-radius:20px;background:#FDF5F7;color:var(--ink);padding:40px 48px;display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:center}
.lam b{font-family:var(--head);font-weight:400;font-size:clamp(32px,3.2vw,56px);letter-spacing:-0.02em;line-height:1.02;font-variant-numeric:tabular-nums}
.lam p{font-size:16px;line-height:1.45;max-width:none}
.lam .k{color:rgba(0,0,0,.7);margin-bottom:6px}
/* the figure and what it counts, on one baseline (Nuo, 14 Sep 2026) */
.lam .fig{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px}
.lam .fig .k{flex:0 0 100%}
.lam .ctx{font-size:14px;line-height:1.25;color:rgba(0,0,0,.72);max-width:16ch}
.lam .rl{display:flex;flex-direction:column;align-items:center;gap:14px}
.lam .rl img{height:72px;width:auto;max-width:220px;object-fit:contain}
.past{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:22px}
.pcard{border-top:2px solid var(--ink);padding-top:14px}
.pcard .top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;min-height:44px;margin-bottom:6px}
.pcard h4{font-family:var(--head);font-weight:400;letter-spacing:-0.02em;font-size:18px;line-height:1}
.pcard p{font-size:14px;color:#2b2926;margin-top:8px;max-width:none}
.pcard .top img{height:44px;width:auto;max-width:150px;object-fit:contain;margin-top:-4px}   /* logo top right, text full width (Nuo, 11 Sep) */
.k{font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.1em}
@media (max-width:860px){
  .give{padding:56px var(--pad) 72px}
  .gcard p,.lam p,.pcard p{font-size:14px}
  .gg{grid-template-columns:1fr}.gcard{min-height:400px}.gcard.pound .body{right:20px}.gcard.pound .coin{width:56px;height:56px;font-size:26px}
  .gcard .logos img{height:40px}                                             /* two 64px lock-ups plus the copy overran a 360px card */
  .lam{grid-template-columns:1fr;gap:16px;padding:28px}
  /* the logo in the bottom-left corner of the card and the link in the bottom-right (Nuo, 14 Sep 2026) */
  .lam .rl{flex-direction:row;justify-content:space-between;align-items:center;gap:12px}
  .lam .rl img{height:52px;max-width:150px}
  .lam .ctx{font-size:13px;max-width:15ch}
  .past{grid-template-columns:1fr}
  .pcard .top img{height:36px;max-width:100px}
}
@media (prefers-reduced-motion:reduce){.gcard .tag i,.gcard.pound .coin{animation:none}.gcard img.bg{transition:none}}
/* ONE LINE AND THE LOGOS (Georgia's video review via Nuo, 4 Nov 2026 ('All of it')): the line, then the charities as a row of
   logos on Sandstone. The two Great Plate Robbery lock-ups are white artwork (they sat on a photograph), so they are inked black
   here; a cause with no logo file is set as its name in the heading face. Radio Lamington's logo is the card's link. */
.give .intro{font-family:var(--head);font-size:clamp(22px,2.2vw,32px);line-height:1.25;letter-spacing:-0.01em;text-align:center;margin:0 auto 56px}
.causes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.cause{display:flex;align-items:center;justify-content:center;min-height:150px;padding:24px;border-top:2px solid var(--ink)}
.cause img{max-height:84px;max-width:220px;width:auto;height:auto;object-fit:contain}
.cause img.ink{filter:brightness(0)}   /* white artwork on Sandstone */
.cause.txt span{font-family:var(--head);font-size:20px;line-height:1.15;letter-spacing:-0.01em;text-align:center;text-transform:uppercase}
.give .lam{margin-top:56px}
.lam a.rl{display:block;line-height:0}
.lam a.rl img{height:72px;width:auto;max-width:220px;object-fit:contain;transition:transform .3s var(--ease)}
@media (hover:hover){.lam a.rl:hover img{transform:scale(1.05)}}
@media (max-width:860px){
  .causes{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .cause{min-height:110px;padding:16px}
  .cause img{max-height:56px;max-width:140px}
  .cause.txt span{font-size:15px}
  .give .intro{margin-bottom:36px}
  .lam a.rl{justify-self:start}
  .lam a.rl img{height:52px;max-width:150px}
}

/* == BELOW RADIO LAMINGTON (Nuo, 6 Nov 2026, 12:30; charity.js moreHtml) == text beside its pictures, sides alternating, on Sandstone */
.cx{padding:0 var(--pad) 110px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.cx.flip .cx-t{order:2}.cx.flip .cx-m{order:1}
.cx h2{font-family:var(--head);font-weight:400;text-transform:uppercase;letter-spacing:-0.01em;font-size:clamp(28px,2.8vw,40px);line-height:1.1;margin:8px 0 18px}
.cx .k{color:rgba(0,0,0,.6)}
.cx p{font-size:17px;line-height:1.55;color:#2b2926;margin:0 0 14px;max-width:none}
.cx .fig{font-family:var(--head);font-size:clamp(30px,3vw,48px);line-height:1;letter-spacing:-0.02em;margin:0 0 20px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.cx .fig span{font-family:var(--body);font-size:15px;letter-spacing:0;color:rgba(0,0,0,.62)}
.cx .lk{display:flex;gap:36px;align-items:center;margin-top:24px}
.cx .lk img{height:56px;width:auto;filter:brightness(0)}   /* the white lock-ups in ink on Sandstone, as the logos above */
.cx-m{display:grid;gap:14px}
.cx-m figure.flm.w169{aspect-ratio:16/9}
.cx-m.two{grid-template-columns:minmax(0,9fr) minmax(0,16fr);grid-template-rows:1fr 1fr}
.cx-m.two figure.flm.tall{grid-row:span 2;aspect-ratio:auto;height:100%}
.cx-m .ph{margin:0;overflow:hidden;min-height:0}
.cx-m .ph img{width:100%;height:100%;object-fit:cover;display:block}
.cx.dolly{grid-template-columns:minmax(0,3fr) minmax(0,9fr)}
.cx.dolly .dp{margin:0}.cx.dolly .dp img{width:100%;height:auto;display:block;aspect-ratio:532/700;object-fit:cover;object-position:50% 20%}
.cx.dolly .pill{margin-top:10px;display:inline-block}
.cx.year{display:block}
.cx.year h2{text-align:center;margin-bottom:36px}
.yl{list-style:none;margin:0;padding:0;border-top:1px solid rgba(0,0,0,.18)}
.yl li{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,3.2fr) minmax(0,1.3fr) minmax(0,6fr);gap:24px;align-items:baseline;padding:20px 0;border-bottom:1px solid rgba(0,0,0,.18)}
.yl .w{font-family:var(--head);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:rgba(0,0,0,.6)}
.yl b{font-family:var(--head);font-weight:400;font-size:19px;line-height:1.25}
.yl .f{font-family:var(--head);font-size:19px}
.yl .d{font-size:16px;line-height:1.5;color:#2b2926}
@media (max-width:860px){
  .cx{grid-template-columns:1fr;gap:24px;padding-bottom:72px}.cx.flip .cx-t,.cx .cx-t{order:1}.cx.flip .cx-m,.cx .cx-m{order:2}
  .cx.dolly{grid-template-columns:1fr}.cx.dolly .dp{max-width:240px}
  .cx p{font-size:15px}.cx .lk img{height:40px}
  .yl li{grid-template-columns:1fr auto;gap:4px 16px}.yl .w{grid-column:1 / -1}.yl .d{grid-column:1 / -1;font-size:14px}
}
.cx.gala .cx-m{grid-template-columns:repeat(5,minmax(0,1fr))}
.cx.gala .cx-m figure.flm:first-child{grid-column:1 / -1}
.cx.gala .cx-m figure.flm:nth-child(2){grid-column:3 / -1}
@media (max-width:860px){.cx.gala .cx-m figure.flm:nth-child(2){grid-column:1 / -1}}
.yl b{overflow-wrap:normal;word-break:normal;hyphens:manual}
.yl .f{white-space:nowrap}
@media (max-width:860px){.yl li{grid-template-columns:minmax(0,1fr) auto}.yl b,.yl .f{font-size:16px}.yl b{white-space:normal!important}}

/* 6 Nov 2026, 13:05-13:06 (Nuo): text top-aligned with its pictures ("top align the text"); The Great Plate Robbery keeps ONE film; ZiggyFest's
   film in its own 9:16 shape ("show the video in it's original aspect ratio") and its text narrower ("reduce the width of the text") */
.cx{align-items:start}
.cx .cx-t > .k:first-child{margin-top:0}
.cx.gala .cx-m{grid-template-columns:1fr}
.cx.gala .cx-m figure.flm:first-child{grid-column:auto}
.cx.zf{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}
.cx-m.two{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;align-items:start}
.cx-m.two figure.flm.tall{grid-row:span 2;aspect-ratio:9/16;height:auto;width:min(26vw,380px)}
.cx-m.two .ph{aspect-ratio:4/3}
@media (max-width:860px){.cx.zf{grid-template-columns:1fr}.cx-m.two figure.flm.tall{width:42vw}}

/* RADIO LAMINGTON ON A PHONE (Nuo, 6 Nov 2026, 19:03: "show the small text on the right on 2 lines and top align to the number on
   mobile"): the words beside the figure in two lines (wide enough for "lamingtons and cakes" / "donated to the NHS"), their top on
   the figure's top, not its baseline */
@media (max-width:860px){.lam .fig{align-items:flex-start;flex-wrap:wrap;gap:0 10px}.lam .fig b{flex:none;font-size:min(32px,8vw)}.lam .ctx{max-width:none;flex:none;margin-top:.3em;font-size:12.5px;line-height:1.3}.lam .ctx .l1,.lam .ctx .l2{display:block;white-space:nowrap}}
/* ZIGGYFEST ON ONE SCREEN (Nuo, 7 Nov 2026, 18:09: "on desktop, show the video for ziggyfest larger and the 2 images smaller, make the 2
   images together the same height as the video. don't use more than one screen for the entire ziggyfest section"). One height, --zh, the
   screen less the bar and a margin: the 9:16 film is --zh tall; the two photographs stack beside it, each half of --zh less the gap, at a
   width of .42 --zh (near square, cropped by object-fit), so the pair is exactly the film's height and each is well under its size. */
@media (min-width:861px){
  .cx.zf{--zh:clamp(360px,min(calc(100dvh - var(--nav,72px) - 56px),46vw),820px);grid-template-columns:auto minmax(0,1fr);gap:48px}
  .cx.zf .cx-m.two{grid-template-columns:auto auto;grid-template-rows:repeat(2,calc((var(--zh) - 14px) / 2));align-items:stretch}
  .cx.zf .cx-m.two figure.flm.tall{grid-row:1 / span 2;height:var(--zh);width:calc(var(--zh) * 9 / 16);aspect-ratio:auto}
  .cx.zf .cx-m.two .ph{aspect-ratio:auto;height:100%;width:calc(var(--zh) * .42)}
  /* a narrow desktop: the film is capped at 46% of the width (46vw) so the words keep a column, and they step down one size, so the
     words too stay inside the screen (measured 1024x768: 897px of text at 17px against 696px of screen) */
}
@media (min-width:861px) and (max-width:1279px){.cx.zf .cx-t p{font-size:15px;line-height:1.5}}
/* ZIGGYFEST ON A PHONE (Nuo, 8 Nov 2026, 09:51: "Make sure the video and 2 images here are perfectly top and bottom aligned, crop images
   if needed"): the 9:16 film is 42vw wide, so --zh is its height; the two photographs share that height (each half of it less the gap),
   fill the rest of the row and are cropped by object-fit, so the pair's top and bottom meet the film's */
@media (max-width:860px){
  .cx.zf .cx-m.two{--zh:calc(42vw * 16 / 9);grid-template-columns:auto minmax(0,1fr);grid-template-rows:repeat(2,calc((var(--zh) - 14px) / 2));align-items:stretch}
  .cx.zf .cx-m.two figure.flm.tall{grid-row:1 / span 2;width:42vw;height:var(--zh);aspect-ratio:auto}
  .cx.zf .cx-m.two .ph{aspect-ratio:auto;height:100%;width:auto}
}