/* Protect Black Women: site styles, built on concept B ("Bold and proud").
   Plain CSS with no build step, so it ports to a Salient child theme or WPCode snippet.
   Sections are named after the reusable blocks in the brief (4): hero, quote panel,
   Principle card, event card and call to action, plus the supporting patterns. */

/* ==========================================================================
   Fonts (self-hosted WOFF2, brief 3.3)
   ========================================================================== */
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/playfair-display-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/playfair-display-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/playfair-display-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:600;font-display:swap;src:url(../fonts/playfair-display-latin-600-italic.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/playfair-display-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Lato";font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/lato-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Lato";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/lato-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Lato";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/lato-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Lato";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/lato-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Lato";font-style:normal;font-weight:900;font-display:swap;src:url(../fonts/lato-latin-900-normal.woff2) format("woff2")}

/* ==========================================================================
   Tokens
   ========================================================================== */
:root{
  /* Brief 3.1. Text only ever uses the approved pairings in 3.2. */
  --pbw-purple:#4A1942;
  --pbw-gold:#C9A13B;
  --pbw-crimson:#9E1B32;
  --pbw-ivory:#FAF6EF;
  --pbw-stone:#D8CCB8;
  --pbw-charcoal:#1E1A1D;

  /* Depth and light, blended only from brand colours */
  --deep:#351930;        /* Deep Purple 52% with Charcoal, written out so every tool reads it */
  --sun:217,170,110;   /* Warm Gold light falling on Deep Purple (a screen blend of the two) */
  --haze:250,246,239;  /* Ivory light */
  --line:rgba(250,246,239,.22);
  --line-soft:rgba(250,246,239,.14);
  --ink-line:rgba(30,26,29,.22);

  --serif:"Playfair Display",Georgia,serif;
  --sans:Lato,Arial,sans-serif;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  --gutter:20px;
  --max:1320px;
  --hd-h:64px;
  --scroll-pad:120px;
}
@media (min-width:768px){:root{--gutter:40px}}
@media (min-width:1000px){:root{--hd-h:84px;--scroll-pad:108px}}
@media (min-width:1200px){:root{--gutter:56px}}

/* ==========================================================================
   Reset and browser surfaces
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:var(--scroll-pad);scrollbar-color:#A3783D var(--deep);background:var(--deep)}
html.motion{scroll-behavior:smooth}
body{margin:0;background:var(--pbw-purple);color:var(--pbw-ivory);font:400 17px/1.65 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
body.no-scroll{overflow:hidden}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
strong,b{font-weight:700}
::selection{background:var(--pbw-gold);color:var(--pbw-charcoal)}
.g-ivory ::selection,.g-stone ::selection,.prose ::selection{background:var(--pbw-purple);color:var(--pbw-ivory)}
input,textarea{caret-color:var(--pbw-purple)}
.num,time,.tiers td,.date{font-variant-numeric:lining-nums tabular-nums}

.wrap{width:100%;max-width:calc(var(--max) + var(--gutter) * 2);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:calc(880px + var(--gutter) * 2)}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{position:fixed;left:12px;top:12px;z-index:200;background:var(--pbw-ivory);color:var(--pbw-purple);padding:12px 18px;font-weight:700;text-decoration:none;transform:translateY(-160%);transition:transform .25s var(--ease)}
.skip:focus{transform:none}

/* Focus: Deep Purple on light grounds, Warm Gold on Deep Purple (5.7:1) */
:focus-visible{outline:2px solid var(--focus,var(--pbw-gold));outline-offset:3px}

/* ==========================================================================
   Grounds, each carrying an approved text pairing
   ========================================================================== */
.g-purple{background:var(--pbw-purple);color:var(--pbw-ivory);--focus:var(--pbw-gold)}
.g-deep{background:var(--deep);color:var(--pbw-ivory);--focus:var(--pbw-gold)}
.g-ivory{background:var(--pbw-ivory);color:var(--pbw-charcoal);--focus:var(--pbw-purple)}
.g-stone{background:var(--pbw-stone);color:var(--pbw-charcoal);--focus:var(--pbw-purple)}
.g-gold{background:var(--pbw-gold);color:var(--pbw-charcoal);--focus:var(--pbw-charcoal)}

/* A dark section carries its own light and a fine grain. Text never sits on a bright
   core: Ivory needs the light below about 45%, Gold below about 15%. */
.lux{position:relative;isolation:isolate;overflow-x:clip;background-color:var(--pbw-purple);color:var(--pbw-ivory);--focus:var(--pbw-gold)}
.lux.g-deep{background-color:var(--deep)}
.lux::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.26;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .9 0 0 0 -.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/220px}
.light{position:absolute;z-index:-1;left:var(--x,50%);top:var(--y,50%);width:var(--s,1000px);max-width:none;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--sun),var(--a,.5)),rgba(var(--sun),calc(var(--a,.5) * .42)) 32%,rgba(var(--sun),calc(var(--a,.5) * .12)) 60%,rgba(var(--sun),0))}
.light--haze{background:radial-gradient(closest-side,rgba(var(--haze),var(--a,.4)),rgba(var(--haze),calc(var(--a,.4) * .32)) 38%,rgba(var(--haze),0))}
.clip{position:relative;isolation:isolate;overflow:clip}
/* Each section keeps its own light: nothing spills onto the next ground. overflow:clip
   (not hidden) leaves sticky children working. The footer is outside main on purpose. */
main > section,main > div{overflow:clip}

/* ==========================================================================
   Type
   ========================================================================== */
.poster{font:700 clamp(52px,7.4vw,96px)/.95 var(--serif);letter-spacing:-.03em}
.poster--long{font-size:clamp(44px,5.8vw,84px);line-height:.98}
.h2{font:600 clamp(40px,5.4vw,84px)/1 var(--serif);letter-spacing:-.025em}
.h2--md{font-size:clamp(36px,4.2vw,64px);line-height:1.02}
.h3{font:600 clamp(28px,2.8vw,40px)/1.08 var(--serif);letter-spacing:-.012em}
.h4{font:600 clamp(22px,1.8vw,26px)/1.2 var(--serif);letter-spacing:-.005em}
.g-ivory :is(.h2,.h3,.h4,.poster),.g-stone :is(.h2,.h3,.h4,.poster){color:var(--pbw-purple)}
.g-gold :is(.h2,.h3,.h4,.poster){color:var(--pbw-charcoal)}
.lead{font-size:clamp(18px,1.45vw,21px);line-height:1.55;max-width:52ch}
.lux .lead,.g-purple .lead,.g-deep .lead{opacity:.94}
.gold{color:var(--pbw-gold)}
.small{font-size:14px;line-height:1.5}
.sec{padding-block:clamp(88px,11vw,176px)}
.sec--tight{padding-block:clamp(64px,7vw,112px)}
.sec--top0{padding-top:0}
.rule{height:1px;background:var(--line);border:0;margin:0}
.stack{display:grid;gap:22px;align-content:start}
.stack--sm{gap:12px}
.stack > p{max-width:62ch}
.stack > .more,.stack > .btn{justify-self:start}
h1,h2,h3,h4,.lead{text-wrap:balance}
p,li,dd,figcaption{text-wrap:pretty}

/* Gold highlight bar, wiped in from the left. Text turns Charcoal on Gold (7.1:1). */
.mark-hl{color:var(--pbw-charcoal);background:linear-gradient(var(--pbw-gold),var(--pbw-gold)) 0 0/100% 100% no-repeat;padding:0 .14em;margin:0 -.04em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
html.motion [data-reveal] .mark-hl{color:inherit;background-size:0% 100%;transition:background-size 1s var(--ease-io),color .5s var(--ease-soft);transition-delay:calc(var(--d,0s) + var(--k,0) * 220ms + .3s)}
html.motion [data-reveal].in .mark-hl{color:var(--pbw-charcoal);background-size:100% 100%}

.ic{width:16px;height:16px;flex:none}

/* ==========================================================================
   Buttons and links. Rich Crimson is reserved for Donate, the page's one highlight.
   ========================================================================== */
.btn{--bh:52px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.7em;min-height:var(--bh);padding:0 26px;border:1px solid transparent;border-radius:0;font:700 15px/1.1 var(--sans);letter-spacing:.01em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease),opacity .3s}
.btn .ic{transition:transform .5s var(--ease)}
.btn:hover .ic{transform:translateX(4px)}
.btn--sm{--bh:42px;padding:0 18px;font-size:14px}
.btn--donate{background:var(--pbw-crimson);color:var(--pbw-ivory);--focus:var(--pbw-gold)}
.btn--donate:hover{box-shadow:inset 0 0 0 2px var(--pbw-crimson),inset 0 0 0 3px var(--pbw-ivory)}
.btn--purple{background:var(--pbw-purple);color:var(--pbw-ivory)}
.btn--purple:hover{background:transparent;color:var(--pbw-purple);border-color:var(--pbw-purple)}
.g-gold .btn--purple:hover{color:var(--pbw-charcoal);border-color:var(--pbw-charcoal)}
.btn--gold{background:var(--pbw-gold);color:var(--pbw-charcoal)}
.btn--gold:hover{background:transparent;color:var(--pbw-gold);border-color:var(--pbw-gold)}
.btn--line{background:transparent;border-color:currentColor}
.lux .btn--line:hover,.g-purple .btn--line:hover,.g-deep .btn--line:hover{background:var(--pbw-ivory);color:var(--pbw-purple);border-color:var(--pbw-ivory)}
.g-ivory .btn--line:hover,.g-stone .btn--line:hover{background:var(--pbw-purple);color:var(--pbw-ivory);border-color:var(--pbw-purple)}
.g-gold .btn--line:hover{background:var(--pbw-charcoal);color:var(--pbw-gold);border-color:var(--pbw-charcoal)}
.btn[disabled],.btn.is-busy{cursor:default;opacity:.72}
.btn.is-busy .ic{display:none}
.btn .spin{display:none;width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%}
.btn.is-busy .spin{display:block;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Quiet text link with a drawn underline */
.more{display:inline-flex;align-items:center;gap:.55em;font:700 15px/1.3 var(--sans);text-decoration:none;padding-bottom:5px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .5s var(--ease)}
.more .ic{width:14px;height:14px;transition:transform .5s var(--ease)}
.more:hover{background-size:0 1px;background-position:100% 100%}
.more:hover .ic{transform:translateX(4px)}
.g-ivory .more,.g-stone .more{color:var(--pbw-purple)}
.g-gold .more{color:var(--pbw-charcoal)}
.acts{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}

/* Running links inside text */
.tx a{text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 55%,transparent);transition:text-decoration-color .3s}
.tx a:hover{text-decoration-color:currentColor}
.lux .tx a,.g-purple .tx a,.g-deep .tx a{color:var(--pbw-gold)}
.g-ivory .tx a,.g-stone .tx a{color:var(--pbw-purple)}

/* ==========================================================================
   Header: tinted glass, so the light shows through as the page passes
   ========================================================================== */
.hd{position:sticky;top:0;z-index:60;background:rgba(74,25,66,.86);-webkit-backdrop-filter:blur(18px) saturate(1.25);backdrop-filter:blur(18px) saturate(1.25);color:var(--pbw-ivory);--focus:var(--pbw-gold);transition:box-shadow .5s var(--ease)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.hd{background:var(--pbw-purple)}}
.hd.is-scrolled{box-shadow:0 1px 0 var(--line-soft)}
.hd__bar{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--hd-h)}
.logo{display:inline-flex;align-items:center;gap:14px;text-decoration:none}
.logo img{width:44px;height:44px}
.logo__name{display:none;font:600 21px/1 var(--serif);white-space:nowrap}
.nav{display:none}
.nav > ul{display:flex;align-items:center;gap:30px}
.nav__link{display:inline-block;font:700 14px/1 var(--sans);text-decoration:none;padding-block:8px;background:linear-gradient(var(--pbw-gold),var(--pbw-gold)) 0 100%/0 2px no-repeat;transition:background-size .5s var(--ease)}
.nav__link:hover,.nav__link[aria-current],.is-section > .nav__link{background-size:100% 2px}
.hd__right{display:flex;align-items:center;gap:22px}
.hd__support{display:none;font:700 14px/1 var(--sans);text-decoration:none;padding-block:8px;background:linear-gradient(var(--pbw-gold),var(--pbw-gold)) 0 100%/100% 2px no-repeat;transition:background-size .5s var(--ease)}
.hd__support:hover{background-size:0 2px;background-position:100% 100%}
.hd__menu{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0;border:0;background:none;font:700 14px/1 var(--sans)}
.burger{position:relative;width:24px;height:11px}
.burger i{position:absolute;left:0;right:0;height:2px;background:currentColor;transition:transform .5s var(--ease)}
.burger i:first-child{top:0}.burger i:last-child{bottom:0}
.is-x i:first-child{transform:translateY(4.5px) rotate(45deg)}
.is-x i:last-child{transform:translateY(-4.5px) rotate(-45deg)}
.hd__menu .lbl{display:none}
.hd__strip{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding-inline:var(--gutter);border-top:1px solid var(--line-soft);font:700 14px/1 var(--sans);text-decoration:none}
.hd__strip .ic{color:var(--pbw-gold)}
@media (min-width:600px){.hd__menu .lbl{display:inline}.logo__name{display:inline}}
@media (min-width:1000px){.logo img{width:52px;height:52px}.hd__support{display:inline}.hd__strip{display:none}}
@media (min-width:1320px){.nav{display:block}.hd__menu{display:none}}

/* Our work: a disclosure panel under the header on wide screens */
.has-sub{position:relative;display:flex;align-items:center;gap:2px}
.dd-toggle{display:inline-grid;place-items:center;width:30px;height:30px;margin-right:-8px;padding:0;border:0;background:none;color:inherit}
.dd-toggle svg{width:10px;height:10px;transition:transform .45s var(--ease)}
.dd-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.dd{position:absolute;top:calc(100% + 22px);left:-32px;width:560px;padding:12px 32px 28px;color:var(--pbw-ivory);
  background:radial-gradient(70% 90% at 0% 0%,rgba(var(--sun),.22),rgba(var(--sun),0) 70%),var(--deep);box-shadow:0 30px 60px -24px rgba(30,26,29,.6)}
.dd::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:22px}
.dd ul{display:grid}
.dd a{display:grid;gap:4px;padding:16px 0;border-bottom:1px solid var(--line-soft);text-decoration:none}
.dd a:hover .dd__t,.dd a[aria-current] .dd__t{color:var(--pbw-gold)}
.dd__t{font:600 24px/1.15 var(--serif);letter-spacing:-.01em;transition:color .3s}
.dd__d{font-size:14px;line-height:1.45;opacity:.88}
.dd__all{margin-top:20px}
html.motion .dd{opacity:0;transform:translateY(-6px);transition:opacity .35s var(--ease),transform .5s var(--ease)}
html.motion .dd.is-open{opacity:1;transform:none}

/* ==========================================================================
   Menu (all screens below 1320px, and the full map above)
   ========================================================================== */
.menu{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;overflow-y:auto;opacity:0;transition:opacity .45s var(--ease);
  background:radial-gradient(80% 70% at 0% 100%,rgba(var(--sun),.3),rgba(var(--sun),.08) 45%,transparent 70%),var(--deep)}
.menu.is-open{opacity:1}
.menu__top{display:flex;align-items:center;justify-content:space-between;min-height:var(--hd-h)}
.menu__body{flex:1;display:grid;gap:48px;align-content:center;padding-block:32px 56px}
.menu__list a{display:block;padding:4px 0;font:600 clamp(36px,6.4vw,76px)/1.06 var(--serif);letter-spacing:-.025em;text-decoration:none;transition:color .3s}
.menu__list a:hover,.menu__list a[aria-current]{color:var(--pbw-gold)}
.menu__side{display:grid;gap:10px;align-content:start}
.menu__group{margin-top:14px;font:700 14px/1.4 var(--sans);letter-spacing:.04em;color:var(--pbw-gold)}
.menu__side a{text-decoration:none}
.menu__side a:hover{text-decoration:underline;text-underline-offset:4px}
html.motion .menu__list li{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i) * 45ms + .1s)}
html.motion .menu.is-open .menu__list li{opacity:1;transform:none}
@media (min-width:1000px){.menu__body{grid-template-columns:8fr 3fr;align-items:end}}

/* Breadcrumbs, on pages two levels down */
.crumbs{margin-bottom:clamp(36px,4vw,56px);font:700 14px/1.4 var(--sans)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px 0}
.crumbs li{display:inline-flex;align-items:center}
.crumbs li+li::before{content:"";width:6px;height:6px;margin:0 14px 0 12px;border:solid currentColor;border-width:1.5px 1.5px 0 0;transform:rotate(45deg);opacity:.6}
.crumbs a{text-decoration:none;opacity:.86}
.crumbs a:hover{opacity:1;text-decoration:underline}
.crumbs [aria-current]{color:var(--pbw-gold)}
.g-stone .crumbs [aria-current],.g-ivory .crumbs [aria-current]{color:inherit}

/* ==========================================================================
   Logo ring frame: a photograph inside the mark's rings, with the light behind it
   ========================================================================== */
.ringframe{position:relative;width:100%;aspect-ratio:1}
.ringframe > .rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ringframe .ring{fill:none}
.ringframe__photo{position:absolute;inset:7.5%;border-radius:50%;overflow:hidden;background:var(--pbw-stone)}
.ringframe__photo img{width:100%;height:100%;object-fit:cover;object-position:var(--op,40% 45%)}
html.motion .ringframe__photo{opacity:0;transform:scale(.92);transition:opacity 1.4s var(--ease-soft) .5s,transform 1.8s var(--ease) .5s}
html.motion .ringframe.in .ringframe__photo{opacity:1;transform:none}
.ringframe .light--sun{--s:300%;--a:.74}
.ringframe .light--core{--s:150%;--a:.5}
.ripples{position:absolute;z-index:-1;left:50%;top:50%;width:330%;max-width:none;height:auto;aspect-ratio:1;translate:-50% -50%;overflow:visible;pointer-events:none}
.ripples circle{fill:none;stroke:var(--pbw-gold);stroke-width:1;vector-effect:non-scaling-stroke}
.ripples .pulse{opacity:0;transform-box:fill-box;transform-origin:center}
html.motion .ringframe .light,html.motion .glow .light{opacity:0;transition:opacity 2.6s var(--ease-soft) .3s}
html.motion .ringframe.in .light,html.motion .glow.in .light{opacity:1}
html.motion .ringframe.in .light--sun{animation:breathe 9s ease-in-out 3s infinite alternate}
html.motion .ringframe.in .pulse,html.motion .glow.in .pulse{animation:pulse 6.5s cubic-bezier(.2,.6,.35,1) 3.2s infinite}
.is-paused .light,.is-paused .pulse{animation-play-state:paused!important}
@keyframes breathe{to{scale:1.07}}
@keyframes pulse{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(3.3)}}

/* Rings drawn from the logo. Circles use pathLength="1". */
html.motion .draw .ring{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s var(--ease-io);transition-delay:calc(var(--d,0s) + var(--i,0) * 140ms)}
html.motion .draw.in .ring{stroke-dashoffset:0}

/* ==========================================================================
   Home hero
   ========================================================================== */
.hero{padding-block:clamp(48px,6vw,96px) clamp(72px,8vw,128px)}
.hero__grid{display:grid;gap:56px}
.hero__fig{display:grid;gap:18px;justify-items:center;width:min(86%,440px);justify-self:center}
.hero__fig figcaption,.phero__fig figcaption{font-size:13px;text-align:center;opacity:.9}
.hero__foot{display:grid;gap:28px;margin-top:clamp(48px,5vw,72px);padding-top:28px;border-top:1px solid var(--line)}
.hero__foot p{max-width:56ch;font-size:18px;opacity:.92}
@media (min-width:1000px){
  .hero__grid{grid-template-columns:minmax(0,8fr) minmax(0,4fr);align-items:center;column-gap:clamp(40px,5vw,80px)}
  .hero__fig{justify-self:end;width:min(100%,440px)}
  .hero__foot{grid-template-columns:1fr auto;align-items:center}
}

/* ==========================================================================
   Page hero (inner pages)
   ========================================================================== */
.phero{padding-block:clamp(40px,5vw,80px) clamp(72px,8vw,128px)}
.phero__grid{display:grid;gap:48px}
.phero__text{display:grid;gap:28px;align-content:start}
.phero__text .lead{margin-top:4px}
.phero__fig{display:grid;gap:18px;justify-items:center;width:min(80%,420px);justify-self:center}
.phero__date{font:600 clamp(30px,3.4vw,52px)/1.05 var(--serif);letter-spacing:-.015em;color:var(--pbw-gold)}
.phero{overflow:clip}
.phero .light{--x:84%;--y:42%;--s:max(760px,58vw);--a:.34}
.phero--quiet .light{display:none}
@media (min-width:1000px){
  .phero__grid--aside{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;column-gap:clamp(48px,6vw,112px)}
  .phero__fig{justify-self:end;width:min(100%,420px)}
}
/* A typographic hero, lit from behind the title by ripples from the mark */
.phero--rings{overflow:clip;padding-block:clamp(72px,9vw,150px) clamp(88px,10vw,168px)}
.phero--rings .glow{position:absolute;z-index:-1;left:var(--gx,78%);top:var(--gy,50%);width:clamp(140px,16vw,240px);aspect-ratio:1;translate:-50% -50%}
.phero--rings .glow .light{--x:50%;--y:50%;--s:520%;--a:.42}
.phero--rings .glow .ripples{width:700%}
.phero--rings .glow .ripples circle{stroke-opacity:.5}

/* Wide image band under a hero */
.band{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--pbw-stone)}
.band img{width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%)}
.band-cap{margin-top:14px;font-size:13px;opacity:.9}
@media (min-width:800px){.band{aspect-ratio:21/9}}

/* ==========================================================================
   Statement (large serif text with Gold highlights)
   ========================================================================== */
.statement{padding-bottom:clamp(88px,10vw,160px)}
.statement__text{font:400 clamp(30px,3.8vw,58px)/1.18 var(--serif);letter-spacing:-.015em;max-width:24ch}
.statement__text--wide{max-width:30ch}
.statement__note{display:grid;gap:8px;max-width:58ch;margin-top:40px;font-size:16px;opacity:.92}
@media (min-width:1000px){.statement__note{margin-left:auto;margin-right:0;margin-top:56px}}
.g-ivory .statement__text,.g-stone .statement__text{color:var(--pbw-purple)}

/* ==========================================================================
   Home: the Principles stage, where the room darkens as the dial's light grows
   ========================================================================== */
.stage{background:linear-gradient(var(--pbw-purple),var(--deep) 70%)}
.stage__sticky{padding-block:clamp(88px,10vw,140px)}
.stage__grid{display:grid;gap:48px}
.stage__intro{display:grid;gap:22px;align-content:start}
.stage__intro .h3{font-size:clamp(34px,3.4vw,52px)}
.stage__intro p.lede{max-width:40ch;opacity:.92}
.dial{position:relative;width:min(72vw,300px);aspect-ratio:1;margin-top:28px}
.dial::before{content:"";position:absolute;inset:-40%;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--sun),0) 32%,rgba(var(--sun),.38) 52%,rgba(var(--sun),.12) 70%,rgba(var(--sun),0) 92%);
  opacity:calc(.12 + var(--lit,1) * .88);scale:calc(.84 + var(--lit,1) * .16);transition:opacity 1s var(--ease),scale 1.4s var(--ease)}
.dial svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 0 10px rgba(201,161,59,.55))}
.dial__arc{fill:none;stroke:rgba(250,246,239,.22);stroke-width:14;transition:stroke .6s var(--ease)}
.dial__arc.is-lit{stroke:var(--pbw-gold)}
.dial__arc.is-soon{stroke-width:3}
.dial__mid{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;gap:6px;padding:22%}
.dial__num{font:700 clamp(56px,6vw,84px)/1 var(--serif);color:var(--pbw-gold);letter-spacing:-.02em}
.dial__note{font:700 13px/1.35 var(--sans);max-width:16ch}
.stage__list li{display:grid;grid-template-columns:52px 1fr;align-items:baseline;padding-block:10px;border-top:1px solid rgba(250,246,239,.16)}
.stage__list li:last-child{border-bottom:1px solid rgba(250,246,239,.16)}
.stage__list .n{font:700 13px/1 var(--sans);letter-spacing:.04em;color:var(--pbw-gold)}
.stage__list .t{font:400 clamp(44px,6.4vw,96px)/1.08 var(--serif);letter-spacing:-.025em}
.stage__list .soon{grid-column:2;margin:-2px 0 10px;font:700 14px/1.4 var(--sans);color:var(--pbw-gold)}
.stage__list li.is-soon .t{font-style:italic}
.stage__cta{margin-top:40px}
@media (min-width:1000px){
  .stage__grid{grid-template-columns:5fr 7fr;column-gap:clamp(48px,6vw,112px)}
  .dial{width:min(100%,340px)}
}
.stage.is-live .stage__track{height:calc(100vh * 4.4)}
.stage.is-live .stage__sticky{position:sticky;top:var(--hd-h);height:calc(100vh - var(--hd-h));display:flex;align-items:center;padding-block:0}
.stage.is-live .stage__grid{width:100%}
.stage.is-live .stage__view{position:relative;height:min(74vh,700px);overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.stage.is-live .stage__list{transition:transform 1s var(--ease)}
.stage.is-live .stage__list li{border-color:transparent;opacity:.42;transition:opacity .6s var(--ease)}
.stage.is-live .stage__list li.is-active{opacity:1}
.stage.is-live .stage__cta{display:none}
.stage__after{display:none}
.stage.is-live .stage__after{display:block;margin-top:-8vh;padding-bottom:clamp(72px,8vw,120px)}

/* ==========================================================================
   Figures: the burst, a Gold ground with Ivory light
   ========================================================================== */
.figsec{position:relative;isolation:isolate;overflow:clip}
.figsec .light--haze{--x:92%;--y:0%;--s:max(1200px,110vw);--a:.62}
.figs__head{display:grid;gap:24px;margin-bottom:clamp(56px,6vw,96px)}
.figs__head p{max-width:46ch}
@media (min-width:1000px){.figs__head{grid-template-columns:7fr 4fr;align-items:end;column-gap:64px}}
.figs{display:grid;grid-template-columns:1fr 1fr;gap:40px 20px}
.fig{display:grid;gap:12px;justify-items:start;align-content:start}
.fig dt{font:700 14px/1.3 var(--sans);letter-spacing:.02em}
.fig dd{margin:0}
.fig .box{display:inline-block;font:700 clamp(54px,7vw,96px)/1 var(--serif);letter-spacing:-.03em;padding:.06em .14em .1em;background:linear-gradient(var(--pbw-ivory),var(--pbw-ivory)) 0 0/100% 100% no-repeat;font-variant-numeric:lining-nums}
html.motion .fig .box{background-size:0% 100%;transition:background-size 1.1s var(--ease-io);transition-delay:calc(var(--d,0s) + .15s)}
html.motion .fig.in .box{background-size:100% 100%}
@media (min-width:700px){.figs{column-gap:40px}}
@media (min-width:1200px){.figs{grid-template-columns:repeat(4,1fr)}}
.figs__foot{display:grid;gap:20px;margin-top:clamp(56px,6vw,88px);padding-top:28px;border-top:1px solid var(--ink-line)}
.figs__foot p{font:600 clamp(24px,2.4vw,34px)/1.25 var(--serif);max-width:34ch}
@media (min-width:1000px){.figs__foot{grid-template-columns:1fr auto;align-items:center}}

/* ==========================================================================
   Event card (feature) and What's on
   ========================================================================== */
.on{background:linear-gradient(var(--pbw-purple),var(--deep))}
.sec-head,.on__head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:20px 40px;margin-bottom:clamp(40px,5vw,72px)}
.sec-head .lead{flex-basis:46ch}
.feature{display:grid;gap:22px;align-content:start}
.feature__img{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--pbw-stone)}
.feature__img img{width:100%;height:100%;object-fit:cover;transition:scale 1.2s var(--ease)}
.feature:hover .feature__img img{scale:1.03}
.feature__body{display:grid;gap:10px}
.feature .sub{font:400 clamp(26px,2.8vw,40px)/1.08 var(--serif);letter-spacing:-.012em;opacity:.8}
.date{font:600 clamp(26px,2.8vw,40px)/1.08 var(--serif);letter-spacing:-.012em;color:var(--pbw-gold)}
.g-ivory .date,.g-stone .date{color:var(--pbw-purple)}
.tag{font:700 13px/1.3 var(--sans);letter-spacing:.04em}
.feature .h3{font-size:clamp(40px,5vw,76px);line-height:.98;letter-spacing:-.025em}
.pair{display:grid;gap:64px;margin-top:clamp(72px,8vw,120px)}
.pair .h3{font-size:clamp(32px,3.2vw,48px)}
.pair .sub,.pair .date{font-size:clamp(22px,2.1vw,30px)}
.feature .more{justify-self:start;margin-top:10px}
@media (min-width:800px){.feature__img{aspect-ratio:16/8}.pair{grid-template-columns:1fr 1fr;column-gap:clamp(32px,4vw,64px)}.pair .feature__img{aspect-ratio:4/3}}

/* ==========================================================================
   Support and the quote panel (deliberately still, no light effects)
   ========================================================================== */
.sup{display:grid;gap:64px}
.sup__main{display:grid;gap:26px;align-content:start}
.sup__main .h2{font-size:clamp(48px,6.6vw,96px)}
.sup__main p{max-width:44ch;font-size:18px}
.sup__acts{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
.sup__note{font-size:15px;padding-top:20px;border-top:1px solid var(--ink-line);max-width:44ch}
.quote{display:grid;gap:22px;align-content:center}
.quote__mark{font:400 160px/.5 var(--serif);color:var(--pbw-gold);height:64px}
.quote blockquote p{font:400 clamp(28px,3vw,44px)/1.2 var(--serif);letter-spacing:-.012em}
.quote figcaption{font-weight:700}
@media (min-width:1000px){.sup{grid-template-columns:6fr 5fr;column-gap:clamp(56px,7vw,120px)}}
/* Quote panel as its own block: Stone, Gold Playfair marks (brief 4) */
.qpanel{background:var(--pbw-stone);color:var(--pbw-charcoal);padding:clamp(40px,6vw,96px) clamp(24px,6vw,104px)}
.qpanel blockquote p{max-width:24ch}
.qpanel--wide blockquote p{max-width:32ch}

/* ==========================================================================
   Donate: the total fills with light
   ========================================================================== */
.donsec{overflow:clip;background:var(--deep)}
.donsec .light--haze{--x:90%;--y:100%;--s:max(1200px,110vw);--a:.2}
.don{display:grid;gap:36px}
.don__sum{font:700 clamp(72px,10vw,96px)/.9 var(--serif);letter-spacing:-.035em;color:var(--pbw-gold);font-variant-numeric:lining-nums}
.don__goal{font:400 clamp(24px,2.4vw,34px)/1.2 var(--serif);max-width:30ch}
.bar{position:relative;height:6px;overflow:hidden}
.bar i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--p,0))}
html.motion .bar i{transition:transform 2s var(--ease-io) .2s}
html.motion .bar:not(.in) i{transform:scaleX(0)}
.don .bar{height:14px;background:rgba(250,246,239,.16);filter:drop-shadow(0 0 14px rgba(201,161,59,.6))}
.don .bar i{background:linear-gradient(90deg,var(--pbw-gold),#DFC78C)}
.don__row{display:grid;gap:24px;margin-top:12px}
.don__row p{max-width:40ch;font-size:18px}
@media (min-width:1000px){.don__row{grid-template-columns:1fr auto;align-items:center}}

/* ==========================================================================
   Membership teaser and newsletter
   ========================================================================== */
.mem{display:grid;gap:32px}
.mem .h2{max-width:12ch}
.mem__side{display:grid;gap:22px;align-content:end}
.mem__side p{max-width:40ch;font-size:18px}
.mem__side .more{justify-self:start}
@media (min-width:1000px){.mem{grid-template-columns:7fr 4fr;align-items:end;column-gap:64px}}

.nl{display:grid;gap:40px}
.nl .h2{font-size:clamp(40px,4.8vw,76px)}
.nl form{display:grid;gap:18px;max-width:640px}
.nl .row{display:grid;gap:12px;align-items:start}
@media (min-width:600px){.nl .row{grid-template-columns:1fr auto}}
@media (min-width:1000px){.nl{grid-template-columns:6fr 5fr;align-items:end;column-gap:64px}}

/* ==========================================================================
   Forms
   ========================================================================== */
.form{display:grid;gap:22px}
.form__grid{display:grid;gap:22px}
@media (min-width:700px){.form__grid{grid-template-columns:1fr 1fr}.field--full{grid-column:1/-1}}
.field{display:grid;gap:8px;align-content:start}
.field label,.field legend{font:700 14px/1.3 var(--sans)}
.field__hint{font-size:14px;line-height:1.45;opacity:.86}
.input{width:100%;min-height:52px;padding:0 16px;border:1px solid var(--pbw-charcoal);border-radius:0;background:var(--pbw-ivory);color:var(--pbw-charcoal);font-size:16px;transition:box-shadow .3s var(--ease),border-color .3s}
.input::placeholder{color:#726E6D}
.input:focus{outline:none;box-shadow:0 0 0 2px var(--pbw-ivory),0 0 0 4px var(--pbw-purple)}
.lux .input:focus,.g-purple .input:focus,.g-deep .input:focus{box-shadow:0 0 0 2px var(--pbw-purple),0 0 0 4px var(--pbw-gold)}
.lux .input,.g-purple .input,.g-deep .input{border-color:var(--pbw-ivory)}
textarea.input{min-height:180px;padding-block:14px;resize:vertical;line-height:1.55}
.select{position:relative}
.select select{appearance:none;-webkit-appearance:none;padding-right:48px;cursor:pointer}
.select::after{content:"";position:absolute;right:20px;top:50%;width:8px;height:8px;margin-top:-6px;border:solid var(--pbw-charcoal);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);pointer-events:none}
.check{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;font-size:14px;line-height:1.5;cursor:pointer}
.check input{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:0;border:1px solid currentColor;border-radius:0;background:transparent;display:grid;place-items:center;cursor:pointer}
.check input::after{content:"";width:11px;height:6px;border:solid currentColor;border-width:0 0 2px 2px;transform:translateY(-2px) rotate(-45deg) scale(0);transition:transform .25s var(--ease)}
.check input:checked::after{transform:translateY(-2px) rotate(-45deg) scale(1)}
.check a{font-weight:700}
.lux .check a,.g-purple .check a,.g-deep .check a{color:var(--pbw-gold)}
.g-ivory .check a,.g-stone .check a{color:var(--pbw-purple)}
.field__err{display:flex;gap:8px;align-items:flex-start;font:700 14px/1.4 var(--sans)}
.field__err::before{content:"";flex:none;width:16px;height:16px;margin-top:1px;border-radius:50%;background:var(--pbw-purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4v5' stroke='%23FAF6EF' stroke-width='1.8'/%3E%3Ccircle cx='8' cy='11.6' r='1.1' fill='%23FAF6EF'/%3E%3C/svg%3E") center/16px}
.lux .field__err::before,.g-purple .field__err::before,.g-deep .field__err::before{background-color:var(--pbw-gold);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4v5' stroke='%231E1A1D' stroke-width='1.8'/%3E%3Ccircle cx='8' cy='11.6' r='1.1' fill='%231E1A1D'/%3E%3C/svg%3E")}
.is-error .input{border-color:var(--pbw-purple);box-shadow:inset 0 0 0 1px var(--pbw-purple)}
.lux .is-error .input,.g-purple .is-error .input,.g-deep .is-error .input{border-color:var(--pbw-gold);box-shadow:inset 0 0 0 1px var(--pbw-gold)}
.is-error.check input{border-width:2px}
.form__foot{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
.form-status{font-weight:700}
.form__done{display:grid;gap:16px;align-content:start;padding:clamp(28px,4vw,48px);border:1px solid currentColor;outline:none}
.form__done .h3{color:inherit}
html.motion .form__done{animation:rise .9s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.form-panel{background:var(--pbw-ivory);color:var(--pbw-charcoal);padding:clamp(24px,4vw,56px);--focus:var(--pbw-purple)}
.form-panel .h3{color:var(--pbw-purple)}
/* An Ivory panel inside a dark section takes the light-ground field styles back */
.form-panel .input{border-color:var(--pbw-charcoal)}
.form-panel .input:focus{box-shadow:0 0 0 2px var(--pbw-ivory),0 0 0 4px var(--pbw-purple)}
.form-panel .is-error .input{border-color:var(--pbw-purple);box-shadow:inset 0 0 0 1px var(--pbw-purple)}
.form-panel .field__err::before{background-color:var(--pbw-purple);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4v5' stroke='%23FAF6EF' stroke-width='1.8'/%3E%3Ccircle cx='8' cy='11.6' r='1.1' fill='%23FAF6EF'/%3E%3C/svg%3E")}
.form-panel :is(.tx a,.check a,.more){color:var(--pbw-purple)}
.form-panel ::selection{background:var(--pbw-purple);color:var(--pbw-ivory)}

/* ==========================================================================
   Duo: text beside a picture
   ========================================================================== */
.duo{display:grid;gap:40px}
.duo__img{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--pbw-stone)}
.duo__img img{width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%)}
.duo__img--tall{aspect-ratio:4/5}
.duo figcaption{margin-top:12px;font-size:13px;opacity:.9}
@media (min-width:1000px){
  .duo{grid-template-columns:1fr 1fr;align-items:center;column-gap:clamp(48px,6vw,112px)}
  .duo--flip > :first-child{order:2}
  .duo--top{align-items:start}
}

/* Photograph still to come: the mark's rings on a Stone ground */
.ph{position:relative;display:grid;place-items:end start;overflow:hidden;aspect-ratio:4/3;padding:18px 20px;background:radial-gradient(closest-side,rgba(var(--haze),.5),rgba(var(--haze),0)) 50% 50%/80% 80% no-repeat,var(--pbw-stone);color:var(--pbw-charcoal);font:700 13px/1.3 var(--sans)}
.ph svg{position:absolute;left:50%;top:50%;width:62%;height:auto;translate:-50% -50%}
.ph circle{fill:none;stroke-width:1;vector-effect:non-scaling-stroke}
.ph span{position:relative}
.g-stone .ph{background-color:var(--pbw-ivory)}

/* ==========================================================================
   Timeline (About): a Gold line fills as you read down it
   ========================================================================== */
.tl{position:relative;display:grid;--p:1}
.tl::before,.tl::after{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:2px}
.tl::before{background:var(--line)}
.tl::after{background:var(--pbw-gold);transform-origin:50% 0;transform:scaleY(var(--p))}
.tl__item{position:relative;display:grid;gap:10px;padding:0 0 clamp(40px,5vw,64px) 44px}
.tl__item:last-child{padding-bottom:0}
.tl__item::before{content:"";position:absolute;left:0;top:10px;width:16px;height:16px;border-radius:50%;background:var(--pbw-purple);box-shadow:inset 0 0 0 2px var(--pbw-gold),0 0 0 4px var(--pbw-purple);transition:background-color .5s var(--ease)}
.tl__item.is-past::before{background:var(--pbw-gold)}
.tl__date{font:600 clamp(24px,2.4vw,34px)/1.1 var(--serif);color:var(--pbw-gold);letter-spacing:-.01em}
.tl__body{display:grid;gap:8px;max-width:56ch}
.tl__item.is-next .tl__date{font-style:italic}
@media (min-width:1000px){
  .tl::before,.tl::after{left:calc(30% + 7px)}
  .tl__item{grid-template-columns:30% 1fr;column-gap:0;padding-left:0}
  .tl__item::before{left:30%}
  .tl__date{padding-right:48px;text-align:right}
  .tl__body{padding-left:56px}
}

/* ==========================================================================
   The Accra Principles page: a sticky dial lights as each Principle is read
   ========================================================================== */
.prx__grid{display:grid;gap:56px}
.prx__aside{display:none}
.prx__chips{display:flex;flex-wrap:wrap;gap:8px}
.prx__chips a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--line);font:700 14px/1 var(--sans);text-decoration:none;transition:background-color .3s,color .3s,border-color .3s}
.prx__chips a:hover{border-color:var(--pbw-ivory)}
.prx__list{display:grid}
.prc{display:grid;gap:18px;padding-block:clamp(48px,6vw,88px);border-top:1px solid var(--line)}
.prc:first-child{border-top:0;padding-top:0}
.prc__head{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:baseline}
.prc__n{font:700 clamp(28px,2.6vw,40px)/1 var(--serif);color:var(--pbw-gold);font-variant-numeric:lining-nums}
.prc__t{font:600 clamp(36px,4.4vw,68px)/1 var(--serif);letter-spacing:-.025em}
.prc__lead{font:400 clamp(22px,2vw,30px)/1.3 var(--serif);letter-spacing:-.008em;max-width:34ch}
.prc__detail{max-width:62ch;opacity:.92}
.prc--soon .prc__t{font-style:italic}
.prc--soon .prc__lead{color:var(--pbw-gold)}
@media (min-width:1000px){
  .prx__chips{display:none}
  .prx__grid{grid-template-columns:4fr 8fr;column-gap:clamp(48px,6vw,112px);align-items:start}
  .prx__aside{display:block;position:sticky;top:calc(var(--hd-h) + 40px)}
  .prx__aside .dial{margin-top:0;width:min(100%,300px)}
  .prx__nav{margin-top:44px;display:grid}
  .prx__nav a{display:grid;grid-template-columns:36px 1fr;align-items:baseline;padding:9px 0;border-top:1px solid var(--line-soft);font:700 15px/1.3 var(--sans);text-decoration:none;opacity:.8;transition:opacity .4s,color .4s}
  .prx__nav li:last-child a{border-bottom:1px solid var(--line-soft)}
  .prx__nav a .n{font-size:13px;color:var(--pbw-gold)}
  .prx__nav a:hover,.prx__nav a.is-active{opacity:1}
  .prx__nav a.is-active{color:var(--pbw-gold)}
  .prc__head{grid-template-columns:72px 1fr}
  .prc__lead,.prc__detail{margin-left:92px}
}
/* Signatories */
.sig{columns:1;column-gap:40px}
.sig li{break-inside:avoid;padding:12px 0;border-bottom:1px solid var(--ink-line);font-size:16px;line-height:1.4}
.sig li b{display:block;font:700 13px/1.4 var(--sans);letter-spacing:.02em;color:var(--pbw-purple)}
@media (min-width:600px){.sig{columns:2}}
@media (min-width:1000px){.sig{columns:3}}
@media (min-width:1300px){.sig{columns:4}}

/* ==========================================================================
   Steps (numbers carry the order a visitor follows)
   ========================================================================== */
.steps{display:grid;gap:36px;counter-reset:step}
.step{display:grid;gap:12px;align-content:start;padding-top:22px;border-top:1px solid var(--ink-line)}
.step__n{font:700 clamp(44px,4vw,64px)/1 var(--serif);color:var(--pbw-purple);font-variant-numeric:lining-nums}
.lux .step,.g-purple .step,.g-deep .step{border-color:var(--line)}
.lux .step__n,.g-purple .step__n,.g-deep .step__n{color:var(--pbw-gold)}
@media (min-width:700px){.steps{grid-template-columns:1fr 1fr;column-gap:40px}}
@media (min-width:1100px){.steps--4{grid-template-columns:repeat(4,1fr)}.steps--3{grid-template-columns:repeat(3,1fr)}}

/* Urgent help: calm, plain and always near the top of the counselling page */
.help{display:grid;gap:18px;align-content:start;padding:clamp(24px,3vw,40px);background:var(--pbw-ivory);color:var(--pbw-charcoal);--focus:var(--pbw-purple)}
.help .h4{color:var(--pbw-purple)}
.help ul{display:grid}
.help li{display:grid;gap:2px;padding:12px 0;border-top:1px solid var(--ink-line)}
.help li span{font-size:14px;line-height:1.45}
.help a{font:600 26px/1.15 var(--serif);text-decoration:none;color:var(--pbw-purple)}
.help a:hover{text-decoration:underline}
.help p{font-size:14px;line-height:1.5}

/* ==========================================================================
   Accordion (native details, height animated when motion is on)
   ========================================================================== */
.acc{border-bottom:1px solid var(--ink-line)}
.acc details{border-top:1px solid var(--ink-line)}
.lux .acc,.lux .acc details,.g-purple .acc details{border-color:var(--line)}
.acc summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px;padding:18px 0;cursor:pointer;list-style:none;font:600 clamp(21px,1.8vw,26px)/1.25 var(--serif)}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover .acc__q{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.acc__ic{position:relative;flex:none;width:20px;height:20px}
.acc__ic::before,.acc__ic::after{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:currentColor;transition:transform .5s var(--ease)}
.acc__ic::after{transform:rotate(90deg)}
.acc details[open] .acc__ic::after{transform:rotate(0)}
.acc__a{display:grid;gap:14px;max-width:64ch;padding:0 0 28px}
.acc__body{overflow:hidden}

/* ==========================================================================
   Membership tiers
   ========================================================================== */
.tiers{overflow-x:auto}
.tiers table{width:100%;min-width:560px;border-collapse:collapse}
.tiers th,.tiers td{padding:18px 16px;border-bottom:1px solid var(--ink-line);text-align:left;vertical-align:middle}
.tiers thead th{vertical-align:bottom;padding-top:0;border-bottom:2px solid var(--pbw-purple)}
.tiers tbody th{font-weight:400;padding-left:0}
.tiers td{width:22%;text-align:center}
.tiers__name{display:block;font:600 clamp(28px,2.6vw,40px)/1 var(--serif);color:var(--pbw-purple)}
.tiers__price{display:block;margin-top:8px;font:700 13px/1.35 var(--sans)}
.tiers svg{width:22px;height:22px;margin-inline:auto}
.tiers .yes{color:var(--pbw-purple)}
.tiers .no{color:var(--pbw-charcoal);opacity:.55}
.tiers .tbc{font-size:14px;font-weight:700}
.tiers tbody tr{transition:background-color .3s}
.tiers tbody tr:hover{background:rgba(216,204,184,.45)}

/* ==========================================================================
   Filter and cards (news, writing, events)
   ========================================================================== */
.filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(36px,4vw,56px)}
.filter button{min-height:44px;padding:0 18px;border:1px solid var(--line);background:transparent;font:700 14px/1 var(--sans);transition:background-color .3s,color .3s,border-color .3s}
.filter button:hover{border-color:var(--pbw-ivory)}
.filter button[aria-pressed="true"]{background:var(--pbw-gold);border-color:var(--pbw-gold);color:var(--pbw-charcoal)}
.cards{display:grid;gap:56px 32px}
@media (min-width:700px){.cards{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.cards--3{grid-template-columns:repeat(3,1fr)}}
.card{position:relative;display:grid;gap:16px;align-content:start}
.card[hidden]{display:none}
.card__img{position:relative;overflow:hidden;aspect-ratio:3/2;background:var(--pbw-stone)}
.card__img img{width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%);transition:scale 1.2s var(--ease)}
.card:hover .card__img img{scale:1.04}
.card__type{display:grid;place-items:center;overflow:hidden;aspect-ratio:3/2;background:radial-gradient(closest-side,rgba(var(--sun),.34),rgba(var(--sun),0)) 50% 60%/90% 120% no-repeat,var(--deep);isolation:isolate}
.card__type svg{width:56%;height:auto;opacity:.9}
.card__type circle{fill:none;stroke:var(--pbw-gold);stroke-width:1;vector-effect:non-scaling-stroke}
.card__meta{display:flex;flex-wrap:wrap;gap:4px 14px;font:700 13px/1.4 var(--sans);letter-spacing:.02em}
.card__meta .tag{color:var(--pbw-gold)}
.g-ivory .card__meta .tag,.g-stone .card__meta .tag{color:var(--pbw-purple)}
.card__t{font:600 clamp(24px,2.1vw,32px)/1.12 var(--serif);letter-spacing:-.01em}
.card__t a{text-decoration:none}
.card__t a::after{content:"";position:absolute;inset:0}
.card:hover .card__t a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em}
.card p{max-width:48ch}
html.motion :is(.card,.listing li).is-entering{animation:rise .7s var(--ease) both;animation-delay:calc(var(--n,0) * 60ms)}

/* Listing: Studio Museum style rows of names and dates */
.listing{border-bottom:1px solid var(--line)}
.listing li{display:grid;gap:8px 32px;padding-block:28px;border-top:1px solid var(--line)}
.listing__date{font:600 clamp(22px,1.9vw,28px)/1.15 var(--serif);color:var(--pbw-gold)}
.listing__t{font:600 clamp(26px,2.6vw,40px)/1.08 var(--serif);letter-spacing:-.015em}
.listing__where{font-size:15px;opacity:.9}
.listing__note{max-width:52ch;font-size:15px;opacity:.9}
.g-ivory .listing,.g-ivory .listing li{border-color:var(--ink-line)}
.g-ivory .listing__date{color:var(--pbw-purple)}
@media (min-width:1000px){
  .listing li{grid-template-columns:3fr 6fr 3fr;align-items:baseline}
  .listing__end{justify-self:end;text-align:right}
}

/* ==========================================================================
   Programme index: big serif rows, a ring-framed picture follows the row on hover
   ========================================================================== */
.prog{border-bottom:1px solid var(--line)}
.prog li{border-top:1px solid var(--line)}
.prog a{position:relative;display:grid;gap:10px;padding-block:clamp(26px,3vw,40px);text-decoration:none}
.prog__t{font:600 clamp(40px,5.6vw,88px)/1 var(--serif);letter-spacing:-.03em;transition:color .4s var(--ease),transform .7s var(--ease)}
.prog__d{max-width:44ch;font-size:16px;opacity:.92}
.prog .ic{position:absolute;right:0;top:clamp(34px,3.6vw,52px);width:22px;height:22px;color:var(--pbw-gold);transition:transform .6s var(--ease)}
.prog__pic{display:none}
.prog a:hover .prog__t{color:var(--pbw-gold)}
.prog a:hover .ic{transform:translateX(6px)}
@media (min-width:1000px){
  .prog a{grid-template-columns:7fr 4fr 1fr;align-items:center;column-gap:40px}
  .prog .ic{position:static;justify-self:end}
  .prog a:hover .prog__t{transform:translateX(16px)}
  .prog__pic{display:block;position:absolute;z-index:2;left:var(--px,50%);top:50%;width:200px;aspect-ratio:1;border-radius:50%;overflow:hidden;pointer-events:none;box-shadow:0 0 0 2px var(--pbw-gold),0 0 0 6px var(--pbw-purple),0 0 0 7px var(--pbw-gold),0 30px 60px -20px rgba(30,26,29,.6);opacity:0;scale:.6;translate:-50% -50%;transition:opacity .45s var(--ease),scale .7s var(--ease)}
  .prog__pic img{width:100%;height:100%;object-fit:cover}
  .prog a:hover .prog__pic{opacity:1;scale:1}
}

/* Ways to give (Get involved): rows with an action each */
.ways{border-bottom:1px solid var(--ink-line)}
.way{display:grid;gap:14px;padding-block:clamp(32px,4vw,48px);border-top:1px solid var(--ink-line)}
.way__t{font:600 clamp(30px,3.2vw,48px)/1.05 var(--serif);letter-spacing:-.02em;color:var(--pbw-purple)}
.way p{max-width:52ch}
@media (min-width:1000px){.way{grid-template-columns:5fr 5fr 2fr;align-items:baseline;column-gap:48px}.way .acts{justify-self:end}}

/* Key facts */
.facts{display:grid;border-bottom:1px solid var(--line)}
.facts div{display:grid;gap:6px;padding-block:20px;border-top:1px solid var(--line)}
.facts dt{font:700 14px/1.3 var(--sans)}
.facts dd{font:600 clamp(22px,2vw,30px)/1.2 var(--serif)}
.facts dd.is-tbc{font-style:italic;opacity:.9}
@media (min-width:700px){.facts div{grid-template-columns:4fr 8fr;align-items:baseline;column-gap:32px}}

/* Partners, shown by name until logos are supplied */
.partners{display:grid;gap:1px;background:var(--ink-line);border:1px solid var(--ink-line)}
.partner{display:grid;gap:8px;align-content:start;padding:clamp(24px,3vw,40px);background:var(--pbw-ivory)}
.partner__n{font:600 clamp(26px,2.4vw,34px)/1.1 var(--serif);color:var(--pbw-purple)}
@media (min-width:800px){.partners{grid-template-columns:repeat(3,1fr)}}

/* ==========================================================================
   Gallery: a row of photographs that scrolls sideways, with buttons
   ========================================================================== */
.gal__head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:20px;margin-bottom:clamp(32px,4vw,56px)}
.gal__nav{display:flex;gap:10px}
.gal__btn{display:grid;place-items:center;width:52px;height:52px;padding:0;border:1px solid currentColor;background:transparent;transition:background-color .3s,color .3s,opacity .3s}
.gal__btn:hover:not([disabled]){background:var(--pbw-ivory);color:var(--pbw-purple)}
.gal__btn[disabled]{opacity:.35;cursor:default}
.gal__btn svg{width:18px;height:18px}
.gal__btn--prev svg{transform:scaleX(-1)}
.gal__track{display:grid;grid-auto-flow:column;grid-auto-columns:84%;gap:20px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);padding:0 var(--gutter) 22px;margin-inline:calc(var(--gutter) * -1);scrollbar-width:thin;scrollbar-color:var(--pbw-gold) var(--line-soft)}
.gal__track:focus-visible{outline-offset:-2px}
.gal__item{scroll-snap-align:start;display:grid;gap:14px;align-content:start}
.gal__img{overflow:hidden;aspect-ratio:4/3;background:var(--pbw-stone)}
.gal__img img{width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%)}
.gal__item h3{font:600 clamp(22px,1.9vw,28px)/1.15 var(--serif)}
.gal__item p{font-size:15px;opacity:.92;max-width:44ch}
@media (min-width:700px){.gal__track{grid-auto-columns:46%}}
@media (min-width:1200px){.gal__track{grid-auto-columns:calc((100% - var(--gutter) * 2 - 40px) / 3)}}

/* ==========================================================================
   Rich text: articles and legal pages
   ========================================================================== */
.prose{max-width:68ch;font-size:18px;line-height:1.75;color:var(--pbw-charcoal)}
.prose > * + *{margin-top:1.1em}
.prose h2{margin-top:2.2em;font:600 clamp(28px,2.6vw,38px)/1.15 var(--serif);letter-spacing:-.012em;color:var(--pbw-purple)}
.prose h3{margin-top:1.8em;font:600 24px/1.25 var(--serif);color:var(--pbw-purple)}
.prose h2+*,.prose h3+*{margin-top:.6em}
.prose ul,.prose ol{display:grid;gap:.5em;padding-left:1.4em}
.prose ul li{position:relative}
.prose ul li::before{content:"";position:absolute;left:-1.1em;top:.72em;width:7px;height:7px;background:var(--pbw-purple)}
.prose ol{list-style:decimal}
.prose ol li::marker{font-weight:700;color:var(--pbw-purple)}
.prose a{color:var(--pbw-purple);text-decoration:underline}
.prose a:hover{text-decoration-thickness:2px}
.prose strong{color:var(--pbw-charcoal)}
.prose--essay{font-size:clamp(18px,1.4vw,20px);line-height:1.8}
.prose--essay > p:first-child{font:400 clamp(26px,2.4vw,34px)/1.3 var(--serif);color:var(--pbw-purple)}
.lede-p{font-size:clamp(19px,1.5vw,22px);line-height:1.6}

/* Legal: contents beside the text */
.legal{display:grid;gap:48px}
.toc{align-self:start}
.toc h2{font:700 14px/1.3 var(--sans);letter-spacing:.04em;margin-bottom:12px;color:var(--pbw-purple)}
.toc ol{display:grid;border-top:1px solid var(--ink-line)}
.toc a{display:block;padding:10px 0;border-bottom:1px solid var(--ink-line);font-size:15px;line-height:1.35;text-decoration:none;transition:color .3s,padding .4s var(--ease)}
.toc a:hover{color:var(--pbw-purple)}
.toc a{position:relative}
.toc a::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;background:var(--pbw-purple);transform:scale(0);transition:transform .4s var(--ease)}
.toc a.is-active{color:var(--pbw-purple);font-weight:700;padding-left:18px}
.toc a.is-active::before{transform:none}
.legal > *{min-width:0}
@media (min-width:1000px){.legal{grid-template-columns:3fr 8fr;column-gap:clamp(48px,6vw,112px)}.toc{position:sticky;top:calc(var(--hd-h) + 32px)}}

/* Article tools */
.byline{display:flex;flex-wrap:wrap;gap:6px 18px;font:700 15px/1.4 var(--sans)}
.byline span+span::before{content:"";display:inline-block;width:4px;height:4px;margin:0 18px 3px 0;border-radius:50%;background:var(--pbw-gold)}
.share{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;padding-top:28px;border-top:1px solid var(--ink-line);font:700 14px/1.3 var(--sans)}
.share a,.share button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:none;color:var(--pbw-purple);font:inherit;text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.share [role="status"]{color:var(--pbw-charcoal)}
.readbar{position:fixed;left:0;right:0;top:0;z-index:70;height:3px;pointer-events:none;background:var(--pbw-gold);transform-origin:0 50%;transform:scaleX(var(--read,0))}

/* Story panel: an invitation set on Stone */
.panel{display:grid;gap:22px;padding:clamp(32px,5vw,72px);background:var(--pbw-stone);color:var(--pbw-charcoal);--focus:var(--pbw-purple)}
.panel .h3,.panel .h2{color:var(--pbw-purple)}
@media (min-width:1000px){.panel--row{grid-template-columns:1fr auto;align-items:end;column-gap:56px}}

/* Contact side notes */
.aside-list{display:grid;gap:28px;align-content:start}
.aside-list > div{display:grid;gap:6px;padding-top:20px;border-top:1px solid var(--line)}
.aside-list h2,.aside-list h3{font:700 14px/1.3 var(--sans);letter-spacing:.02em;color:var(--pbw-gold)}
.aside-list a{font:600 clamp(20px,1.7vw,24px)/1.3 var(--serif);text-decoration:none;word-break:break-word}
.aside-list a:hover{text-decoration:underline}

/* ==========================================================================
   Footer: the mark rises like a sun
   ========================================================================== */
.ft{padding-block:clamp(72px,8vw,120px) 36px;border-top:1px solid var(--line-soft);background:linear-gradient(var(--pbw-purple),var(--deep))}
.ft__word{display:flex;align-items:center;gap:clamp(16px,2vw,32px);font:600 clamp(44px,7vw,96px)/.95 var(--serif);letter-spacing:-.035em;text-wrap:balance}
.ft__mark{position:relative;flex:none;width:clamp(64px,8vw,112px)}
.ft__mark img{width:100%;height:auto}
.ft__mark .light{--s:700%;--a:.5}
.ft__mark .ripples{width:520%}
.ft__mark .ripples circle{stroke-opacity:.5}
.ft__cols{display:grid;grid-template-columns:1fr 1fr;gap:36px 24px;margin-top:clamp(56px,6vw,96px)}
.ft__cols h2{font:700 14px/1.3 var(--sans);letter-spacing:.04em;color:var(--pbw-gold);margin-bottom:14px}
.ft__cols li+li{margin-top:8px}
.ft__cols a{text-decoration:none}
.ft__cols a:hover,.ft__cols a[aria-current]{text-decoration:underline;text-underline-offset:4px}
.ft__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;margin-top:64px;padding-top:24px;border-top:1px solid rgba(250,246,239,.16);font-size:13px}
.ft__base ul{display:flex;flex-wrap:wrap;gap:8px 24px}
.ft__base a{text-decoration:none}
.ft__base a:hover{text-decoration:underline}
@media (min-width:900px){.ft__cols{grid-template-columns:repeat(4,1fr)}}

/* Not found */
.nf{min-height:calc(100vh - var(--hd-h));display:grid;align-content:center;padding-block:96px}

/* ==========================================================================
   Pattern library page (components/index.html): labels for each block
   ========================================================================== */
.lib-label{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding:14px var(--gutter);background:var(--pbw-charcoal);color:var(--pbw-ivory);font:700 13px/1.4 var(--sans);letter-spacing:.02em}
.lib-label span:last-child{opacity:.8;font-weight:400}
.lib-stage{padding-block:clamp(40px,5vw,72px)}
.lib-grid{display:grid;gap:36px 40px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));align-items:start}
.lib-grid--2{grid-template-columns:repeat(auto-fill,minmax(min(100%,520px),1fr))}
.lib-item{display:grid;gap:14px;align-content:start;justify-items:start;min-width:0}
.lib-item--full{justify-items:stretch}
.lib-name{font:700 12px/1.3 var(--sans);letter-spacing:.02em;opacity:.8}
.lib-comp{max-width:100%}
.lib-item--full .lib-comp{width:100%}
/* Static stand-ins for hover and focus, so each state can be reviewed and captured */
.btn--donate.is-hover{box-shadow:inset 0 0 0 2px var(--pbw-crimson),inset 0 0 0 3px var(--pbw-ivory)}
.btn--purple.is-hover{background:transparent;color:var(--pbw-purple);border-color:var(--pbw-purple)}
.btn--gold.is-hover{background:transparent;color:var(--pbw-gold);border-color:var(--pbw-gold)}
.lux .btn--line.is-hover{background:var(--pbw-ivory);color:var(--pbw-purple);border-color:var(--pbw-ivory)}
.g-ivory .btn--line.is-hover{background:var(--pbw-purple);color:var(--pbw-ivory);border-color:var(--pbw-purple)}
.btn.is-hover .ic,.more.is-hover .ic{transform:translateX(4px)}
.more.is-hover{background-size:0 1px;background-position:100% 100%}
.is-focus{outline:2px solid var(--focus,var(--pbw-gold));outline-offset:3px}
.input.is-focus{outline:none;box-shadow:0 0 0 2px var(--pbw-ivory),0 0 0 4px var(--pbw-purple)}
.lib .hd{position:relative;top:auto}
.lib .dd{position:relative;top:auto;left:auto;margin-top:16px}

/* ==========================================================================
   Motion. html.motion is only set when reduced motion isn't requested,
   so without it every element below shows in its finished, static state.
   ========================================================================== */
html.motion .rv{opacity:0;transform:translate3d(0,28px,0);transition:opacity 1s var(--ease),transform 1.3s var(--ease);transition-delay:var(--d,0s)}
html.motion .rv.in{opacity:1;transform:none}
html.motion .rv-fade{opacity:0;transition:opacity 1.4s var(--ease-soft);transition-delay:var(--d,0s)}
html.motion .rv-fade.in{opacity:1}
html.motion .rv-wipe{clip-path:inset(100% 0 0 0);transition:clip-path 1.5s var(--ease-io);transition-delay:var(--d,0s)}
html.motion .rv-wipe img{transform:scale(1.14);transition:transform 2.4s var(--ease);transition-delay:var(--d,0s)}
html.motion .rv-wipe.in{clip-path:inset(0 0 0 0)}
html.motion .rv-wipe.in img{transform:none}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.split .wi{display:inline-block}
html.motion .split .wi{transform:translate3d(0,112%,0);transition:transform 1.15s var(--ease);transition-delay:calc(var(--d,0s) + var(--i,0) * 60ms)}
html.motion .split.in .wi{transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ==========================================================================
   Page additions: About us, The Accra Principles, Contact and 404
   ========================================================================== */
About us, The Accra Principles, Contact, 404. */

/* ---------- Ivory form panels set inside dark sections ----------
   The dark-ground field styles (.lux .input and friends) also reach inputs inside an
   Ivory .form-panel; these put the light-ground versions back. Candidate for pbw.css. */
:is(.p-principles,.p-contact) .form-panel .input{border-color:var(--pbw-charcoal)}
:is(.p-principles,.p-contact) .form-panel .input:focus{box-shadow:0 0 0 2px var(--pbw-ivory),0 0 0 4px var(--pbw-purple)}
:is(.p-principles,.p-contact) .form-panel .is-error .input{border-color:var(--pbw-purple);box-shadow:inset 0 0 0 1px var(--pbw-purple)}
:is(.p-principles,.p-contact) .form-panel .field__err::before{background-color:var(--pbw-purple);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4v5' stroke='%23FAF6EF' stroke-width='1.8'/%3E%3Ccircle cx='8' cy='11.6' r='1.1' fill='%23FAF6EF'/%3E%3C/svg%3E")}
:is(.p-principles,.p-contact) .form-panel :is(.tx a,.check a,.more){color:var(--pbw-purple)}
:is(.p-principles,.p-contact) .form-panel ::selection{background:var(--pbw-purple);color:var(--pbw-ivory)}
:is(.p-principles,.p-contact) .form-panel input,:is(.p-principles,.p-contact) .form-panel textarea{caret-color:var(--pbw-purple)}

/* .form__done sets display:grid, which beats the hidden attribute. Candidate for pbw.css. */
:is(.p-principles,.p-contact) .form__done[hidden]{display:none}

/* ---------- About us ---------- */
.p-about .phero__grid--aside{align-items:end}
.p-about__band{margin-top:clamp(56px,6vw,96px)}
.p-about__goalgrid{display:grid;gap:28px}
.p-about__goaltext{font:400 clamp(30px,3.8vw,58px)/1.18 var(--serif);letter-spacing:-.015em;max-width:26ch}
.p-about__goalnote{max-width:52ch;font-size:18px}
@media (min-width:1000px){
  .p-about__goalgrid{grid-template-columns:3fr 9fr;column-gap:64px;align-items:start}
  .p-about__goalgrid .h3{padding-top:.5em}
  .p-about__goalnote{grid-column:2}
}
.p-about__pics{display:grid;gap:40px;margin-top:clamp(64px,7vw,104px)}
.p-about__pics figcaption{margin-top:12px;font-size:13px}
@media (min-width:800px){.p-about__pics{grid-template-columns:7fr 5fr;align-items:end;column-gap:clamp(24px,3vw,48px)}}
.p-about__ptitle{margin:clamp(72px,8vw,120px) 0 32px}

/* ---------- The Accra Principles ---------- */
.pp-hero__fig{position:relative;display:grid;place-items:center;width:min(78vw,420px);padding:6%}
.pp-hero__dial{width:100%;margin:0}
.pp-pre{display:grid;gap:28px}
.pp-pre__text{display:grid;gap:.75em;font:400 clamp(24px,2.5vw,36px)/1.32 var(--serif);letter-spacing:-.01em;max-width:36ch}
@media (min-width:1000px){
  .pp-pre{grid-template-columns:3fr 9fr;column-gap:64px;align-items:start}
  .pp-pre .h3{padding-top:.3em}
}
.pp-soon-link{justify-self:start;margin-top:4px}
@media (min-width:1000px){.pp-soon-link{margin-left:92px}}
.pp-commit__grid{display:grid;gap:28px}
.pp-commit__text{font:400 clamp(30px,3.8vw,58px)/1.18 var(--serif);letter-spacing:-.015em;max-width:28ch}
@media (min-width:1000px){
  .pp-commit__grid{grid-template-columns:3fr 9fr;column-gap:64px;align-items:start}
  .pp-commit__grid .h3{padding-top:.5em}
}
.p-principles #sign .form-panel .h3{margin-bottom:4px}
.p-principles .prx__chips a[href="#environment"]{font-style:italic}

/* ---------- Contact ---------- */
.p-contact .phero{padding-bottom:clamp(56px,6vw,96px)}
.p-contact .phero__grid--aside{align-items:end}
.pc-sec{padding-top:clamp(56px,6vw,96px)}
.pc-grid{display:grid;gap:56px}
@media (min-width:1000px){.pc-grid{grid-template-columns:7fr 4fr;column-gap:clamp(48px,6vw,96px);align-items:start}}
.p-contact .form-panel .h3{margin-bottom:4px}
.p-contact .aside-list p{font-size:16px;max-width:40ch}
.p-contact .aside-list .more{justify-self:start;margin-top:6px;font:700 15px/1.3 var(--sans)}
.pc-social{display:flex;flex-wrap:wrap;gap:4px 22px}

/* ---------- 404 ---------- */
.p-404 .nf__text{display:grid;gap:28px;max-width:min(100%,760px)}
.p-404 .nf__links{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:8px}
.p-404 .glow{--gx:80%;--gy:52%}
@media (max-width:999px){.p-404 .glow{--gx:84%;--gy:14%;width:96px}}
/* Lift the resting nav links so the 13px Gold numbers keep 4.5:1 on the deep ground */
.p-principles .prx__nav a{opacity:.8}
.p-principles .prx__nav a:hover,.p-principles .prx__nav a.is-active{opacity:1}

/* ==========================================================================
   Page additions: Our work, Counselling, CO-SHIP, Winners Circle and Backtalkers UK
   ========================================================================== */
Our work, Counselling, CO-SHIP, Winners Circle and Backtalkers UK. */

/* ---------- typographic heroes (CO-SHIP, Winners Circle, Backtalkers UK) ---------- */
/* The emblem's own light sits on the mark, not at the hero's corner */
body:is(.p-coship,.p-winners,.p-backtalkers) .phero--rings .glow .light{--x:50%;--y:50%}
.p-prog__text{max-width:760px}
.p-prog__text .lead strong{font-weight:700}
/* Phones: the mark settles low on the right, below the text, so no words sit on it */
@media (max-width:999px){
  body:is(.p-coship,.p-winners,.p-backtalkers) .phero--rings{padding-bottom:clamp(200px,52vw,280px)}
  body:is(.p-coship,.p-winners,.p-backtalkers) .phero--rings .glow{--gx:76%!important;top:auto;bottom:clamp(36px,8vw,64px);translate:-50% 0;width:clamp(112px,26vw,160px)}
}

.p-prog__list{display:grid;border-bottom:1px solid var(--ink-line)}
.p-prog__list li{position:relative;padding:14px 0 14px 22px;border-top:1px solid var(--ink-line)}
.p-prog__list li::before{content:"";position:absolute;left:0;top:24px;width:7px;height:7px;background:var(--pbw-purple)}
.p-prog__light{--x:96%;--y:100%;--s:max(900px,80vw);--a:.3}

/* Key facts on a Gold ground: Charcoal rules in place of the Ivory ones */
.g-gold .p-prog__facts,.g-gold .p-prog__facts div{border-color:var(--ink-line)}

/* ---------- Our work ---------- */
@media (min-width:1000px){
  .p-work .phero__grid--aside{align-items:end}
  .p-work__intro{padding-bottom:14px}
}
.p-work__intro .small{max-width:52ch;opacity:.92}
.p-work__second{margin-top:clamp(96px,10vw,168px)}
.p-work__strands figure{display:grid}
.p-work__future{display:grid;gap:64px 40px}
.p-work__future .ph{aspect-ratio:16/10;background-color:var(--pbw-stone)}
.p-work__future .h3{margin-top:10px}
.p-work__futureacts{margin-top:clamp(48px,5vw,72px)}
@media (min-width:800px){.p-work__future{grid-template-columns:1fr 1fr}}

/* ---------- Counselling: still, plain and calm ---------- */
@media (min-width:1000px){.p-counselling__grid{align-items:start}.p-counselling .help{margin-top:8px}}
.p-counselling .phero__text .small{max-width:56ch}
.p-counselling__how{display:grid;gap:clamp(40px,4vw,64px);margin-top:clamp(96px,10vw,168px);padding-top:clamp(56px,6vw,88px);border-top:1px solid var(--ink-line)}
.p-counselling__num{display:grid;gap:4px;margin-top:12px;padding-top:22px;border-top:1px solid var(--line)}
.p-counselling__num span{font:700 14px/1.3 var(--sans)}
.p-counselling__num strong{font:600 clamp(34px,3.4vw,52px)/1.05 var(--serif);letter-spacing:-.01em;color:var(--pbw-gold);font-variant-numeric:lining-nums}
.p-counselling__points{display:grid;border-bottom:1px solid var(--line)}
.p-counselling__points li{display:grid;gap:8px;padding-block:24px;border-top:1px solid var(--line)}
.p-counselling__points li:first-child{border-top:0;padding-top:0}
.p-counselling__points p{max-width:56ch;opacity:.94}
.p-counselling__faq{margin-top:clamp(88px,9vw,144px)}
.p-counselling .qpanel .quote{max-width:34ch}

/* ---------- Backtalkers UK ---------- */
.p-bt__nextgrid{display:grid;gap:28px}
.p-bt__nextgrid .h2{max-width:16ch}
@media (min-width:1000px){.p-bt__nextgrid{grid-template-columns:7fr 4fr;align-items:end;column-gap:64px}}
.p-backtalkers .listing__end strong{font-weight:700}
@media (min-width:800px){.p-bt__partners{grid-template-columns:1fr 1fr}}
.p-bt__partners .partner p:last-child{max-width:40ch}

/* Our work: the index sits inside the hero, under one light from the top right */
.p-work__hero.phero .light{--x:94%;--y:6%;--s:max(1000px,90vw);--a:.34}
.p-work__index{margin-top:clamp(64px,7vw,112px)}
.p-work .prog__t{font-size:clamp(38px,4.6vw,68px)}

/* Counselling: the quote measures its own line length, in its own type size */
.p-counselling .qpanel .quote{max-width:none}
.p-counselling .qpanel blockquote p{max-width:24ch}

/* Winners Circle */
.p-winners__statement .statement__text{max-width:26ch}
.p-winners .g-stone .ph{background-color:var(--pbw-ivory)}

/* Backtalkers UK */
.p-bt__nextgrid .more{justify-self:start}

/* ==========================================================================
   Page additions: Return to Accra 2027, Membership, News and events, the article, Get involved and legal pages
   ========================================================================== */
Return to Accra 2027, Membership, News and events, the article template,
   Get involved and the legal pages. */

/* ---------- shared within this group ---------- */
/* A thank-you panel keeps its hidden state (pbw.css gives .form__done display:grid) */
.form__done[hidden]{display:none}
/* Keep each section's light and ripples inside it, so they don't spill onto the next ground */
body:is(.p-accra,.p-membership,.p-news,.p-article,.p-involved,.p-legal) main > section{overflow:clip}
.g-ivory .facts,.g-ivory .facts div{border-color:var(--ink-line)}
.g-ivory .facts dd{color:var(--pbw-purple)}
.listing__t a{text-decoration:none}
.listing__t a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em}
.listing li[hidden]{display:none}
html.motion .listing li.is-entering{animation:rise .7s var(--ease) both;animation-delay:calc(var(--n,0) * 60ms)}
.listing__end.listing__date{font-size:clamp(20px,1.7vw,26px)}
.card__type--offset{background:radial-gradient(closest-side,rgba(var(--sun),.3),rgba(var(--sun),0)) 30% 40%/90% 120% no-repeat,var(--deep)}

/* ---------- Return to Accra 2027 ---------- */
.accra-plan{display:grid;gap:56px}
.accra-plan .facts{margin-top:12px}
.accra-form .form{gap:20px}
.accra-form .form > p{max-width:44ch}
.accra-form .form__done{border-color:var(--ink-line)}
.accra-story{max-width:26ch}
.p-accra .lux .h3{color:var(--pbw-gold)}
.accra-quote{margin-top:clamp(72px,8vw,128px)}
.accra-quote .quote{max-width:min(100%,980px)}
@media (min-width:1000px){
  .accra-plan{grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:clamp(48px,6vw,112px);align-items:start}
  .accra-form{position:sticky;top:calc(var(--hd-h) + 32px)}
}

/* ---------- Membership ---------- */
.mem-hero{max-width:15ch}
.mem-hero .lead,.mem-hero .acts{max-width:none}
.mem-hero .lead{width:min(52ch,80vw)}
.mem-points{display:grid;gap:40px}
.mem-points li{display:grid;gap:12px;align-content:start;padding-top:22px;border-top:1px solid var(--line)}
.mem-points .h4{color:var(--pbw-gold)}
.mem-points p{max-width:40ch;opacity:.94}
@media (min-width:700px){.mem-points{grid-template-columns:1fr 1fr;column-gap:40px}}
@media (min-width:1200px){.mem-points{grid-template-columns:repeat(4,1fr)}}
.mem-list{display:grid;border-bottom:1px solid var(--ink-line)}
.mem-list li{position:relative;padding:14px 0 14px 26px;border-top:1px solid var(--ink-line)}
.mem-list li::before{content:"";position:absolute;left:2px;top:23px;width:8px;height:8px;background:var(--pbw-purple)}
.mem-card{display:grid;gap:18px;align-content:start;padding:clamp(24px,3vw,40px);background:var(--pbw-ivory)}
.mem-card .h4{color:var(--pbw-purple)}
.mem-card dl{display:grid}
.mem-card dl div{display:grid;gap:4px;padding:14px 0;border-top:1px solid var(--ink-line)}
.mem-card dt{font:700 13px/1.3 var(--sans);letter-spacing:.02em}
.mem-card dd{font:400 17px/1.45 var(--serif)}
.mem-faq{display:grid;gap:40px}
@media (min-width:1000px){.mem-faq{grid-template-columns:4fr 7fr;column-gap:clamp(48px,6vw,112px);align-items:start}}
.p-membership .tiers tbody th{font-size:17px}

/* ---------- News and events ---------- */
.news-filter{margin-bottom:clamp(8px,1vw,16px)}
.news-kind{font:700 13px/1.3 var(--sans);letter-spacing:.04em;color:var(--pbw-gold)}
.g-ivory .news-soon .listing__end .more{color:var(--pbw-purple)}
@media (min-width:1000px){.news-list .listing__end{align-self:start;padding-top:6px}}

/* ---------- Article ---------- */
.article-head{padding-block:clamp(32px,4vw,64px) clamp(56px,6vw,96px)}
.article-head .phero__text{gap:24px}
.article-body .wrap--narrow,.article-head .wrap--narrow{max-width:calc(760px + var(--gutter) * 2)}
.article-body .wrap--narrow{display:grid;gap:clamp(48px,5vw,72px)}
.article-body .prose{max-width:none}
.prose--essay .essay-turn{padding-block:.6em;font:400 clamp(24px,2.2vw,30px)/1.35 var(--serif);color:var(--pbw-purple)}
.article-share{padding-top:24px}
.article-share > span:first-child{color:var(--pbw-charcoal)}

/* ---------- Get involved ---------- */
.involved-hero{padding-block:clamp(48px,6vw,96px) clamp(72px,8vw,128px)}
.involved-hero .light--haze{--x:84%;--y:40%;--s:max(900px,70vw);--a:.6}
/* The photograph sits in the logo's rings, drawn in Purple and Gold on the Gold ground */
.involved-fig{display:grid;gap:18px;justify-items:center;width:min(76%,400px);justify-self:center}
.involved-pic{width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--pbw-stone);box-shadow:0 0 0 2px var(--pbw-gold),0 0 0 5px var(--pbw-purple),0 0 0 9px var(--pbw-gold),0 0 0 10px var(--pbw-crimson),0 40px 80px -30px rgba(30,26,29,.45)}
.involved-pic img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.involved-fig figcaption{font-size:13px;text-align:center}
@media (min-width:1000px){.involved-fig{justify-self:end}}
.involved-mail{font-weight:700;text-decoration:underline;text-underline-offset:.2em;overflow-wrap:anywhere}
.g-ivory .involved-mail{color:var(--pbw-purple)}
.lux .involved-mail{color:var(--pbw-gold)}
.partner--invite{background:var(--pbw-stone)}
.partner .more{justify-self:start;margin-top:8px;overflow-wrap:anywhere;white-space:normal}

/* ---------- Legal ---------- */
.legal-head{padding-block:clamp(40px,5vw,72px) clamp(56px,6vw,96px)}
.legal-date{font:700 14px/1.4 var(--sans);opacity:.9}
.legal-table{overflow-x:auto;margin-block:1.4em}
.legal-table table{width:100%;min-width:620px;border-collapse:collapse;font-size:15px;line-height:1.55}
.legal-table th,.legal-table td{padding:14px 16px 14px 0;border-bottom:1px solid var(--ink-line);text-align:left;vertical-align:top}
.legal-table thead th{font:700 14px/1.3 var(--sans);border-bottom:2px solid var(--pbw-purple);color:var(--pbw-purple)}
.legal-table td:first-child{width:42%}
.p-legal .legal > *{min-width:0}
/* Membership on phones: the mark sits above the heading, and the tiers table fits the screen */
@media (max-width:999px){
  .p-membership .phero--rings .glow{position:relative;left:auto;top:auto;translate:none;width:104px;margin:0 0 44px var(--gutter)}
  .p-membership .phero--rings .glow .ripples{width:900%}
}
@media (max-width:699px){
  .p-membership .tiers table{min-width:0;table-layout:fixed}
  .p-membership .tiers thead th:not(:first-child){width:88px}
  .p-membership .tiers th,.p-membership .tiers td{padding-inline:6px}
  .p-membership .tiers tbody th{padding-left:0;font-size:15px;line-height:1.4}
  .p-membership .tiers__name{font-size:26px}
  .p-membership .tiers__price{font-size:12px;font-weight:700}
  .p-membership .tiers .tbc{font-size:12px;line-height:1.35}
}