/* ---- Self hosted fonts (no third party requests) ---- */
  @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-latin-400-normal.woff2') format('woff2')}
  @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-latin-500-normal.woff2') format('woff2')}
  @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-latin-600-normal.woff2') format('woff2')}
  @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/inter-latin-700-normal.woff2') format('woff2')}
  @font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/poppins-latin-400-normal.woff2') format('woff2')}
  @font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/poppins-latin-500-normal.woff2') format('woff2')}
  @font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/poppins-latin-600-normal.woff2') format('woff2')}
  @font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/poppins-latin-700-normal.woff2') format('woff2')}
  @font-face{font-family:'Dancing Script';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/dancing-script-latin-600-normal.woff2') format('woff2')}
  @font-face{font-family:'Dancing Script';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/dancing-script-latin-700-normal.woff2') format('woff2')}
  @font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/barlow-semi-condensed-latin-500-normal.woff2') format('woff2')}
  @font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/barlow-semi-condensed-latin-600-normal.woff2') format('woff2')}
  @font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/barlow-semi-condensed-latin-700-normal.woff2') format('woff2')}

  :root{
    /* Brand, taken exactly from the vector logo artwork
       teal #2CA6A4   orange #F47A1F   magenta #AD3974
       The -600/-700/-800 shades are darkened for text contrast; the base
       values are the untouched brand colours and are used for fills. */
    --teal:#2CA6A4; --teal-600:#238B89; --teal-700:#1B6E6C; --teal-800:#14514F;
    --donate:#1F7F7D; --donate-hover:#1B6E6C;
    --teal-050:#EBF6F6; --teal-100:#C7E6E5; --teal-200:#8FD6D4;

    --sun:#F47A1F; --sun-600:#DC6A12; --sun-700:#AE5008; --sun-800:#8A3F06;
    --sun-050:#FEF3EA; --sun-100:#FBDCC2; --sun-200:#F9BE8B;

    --plum:#AD3974; --plum-600:#992F65; --plum-700:#8A2C5B; --plum-200:#E39BBD;
    --plum-050:#FAEDF3; --plum-100:#EFCEDE;

    --gray:#7E8C8A;
    --ink:#16302F; --ink-70:#3F5453; --ink-50:#637674;
    --cream:#FFFBF7; --cream-2:#EFF7F6;
    --line:#E0E8E7;
    --white:#fff;
    --shadow-sm:0 1px 2px rgba(22,48,47,.06), 0 2px 8px rgba(22,48,47,.05);
    --shadow-md:0 4px 12px rgba(22,48,47,.08), 0 16px 40px rgba(22,48,47,.09);
    --r:14px;
    --maxw:1320px;
    --head:'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --script:'Dancing Script', 'Segoe Script', cursive;
    --body:'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  }
  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
  @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} *{animation:none!important; transition:none!important}}
  body{
    margin:0; background:var(--white); color:var(--ink);
    font-family:var(--body); font-size:17px; line-height:1.7;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%; display:block; height:auto}
  a{color:var(--teal-700)}
  a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{
    outline:3px solid var(--teal-600); outline-offset:3px; border-radius:6px;
  }
  h1,h2,h3,h4{
    font-family:var(--head); font-weight:700; line-height:1.1; letter-spacing:-.018em; margin:0 0 .5em;
    text-wrap:balance;              /* spreads lines evenly, kills one-word orphans */
    overflow-wrap:break-word;       /* long URLs cannot punch out of the layout */
  }
  h1{font-size:clamp(2rem,5.2vw,3.7rem); line-height:1.08}
  h2{font-size:clamp(1.55rem,3.4vw,2.5rem); line-height:1.14}
  h3{font-size:clamp(1.1rem,1.7vw,1.32rem); line-height:1.3}
  p{margin:0 0 1.1em; text-wrap:pretty}
    .wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,40px)}

  /* Header, footer and the top bar run edge to edge. Everything else stays
     centred so body text keeps a comfortable line length on wide screens. */
  .topbar .wrap,
  header.site .wrap,
  footer.site .wrap{max-width:none; margin-inline:0; padding-inline:clamp(20px,3.5vw,64px)}
  .skip{position:absolute; top:0; inset-inline-start:0; transform:translateY(-250%);
    background:var(--ink); color:#fff; padding:12px 18px; z-index:200; border-radius:0 0 8px 0}
  .skip:focus{transform:none}

  /* ---------- mobile behaviour fixes ----------
     Jumping to an in page section used to land it underneath the sticky
     header, so the heading you asked for was the one thing you could not
     see. Every anchor target now reserves the header's height. */
  /* One value, comfortably clear of the header at every width. The header
     runs 70 to 90px tall depending on the screen, so 96 leaves a little
     air above the heading rather than butting it against the bar. */
  :root{--sticky:96px}
  main [id], section[id], h1[id], h2[id], h3[id], #main{scroll-margin-top:var(--sticky)}

  /* A finger is about 44px across. Inline links inside a sentence stay as
     they are, because padding them out would wreck the line spacing, but
     the standalone call to action links get a real target on a phone. */
  @media (max-width:720px){
    .more{display:inline-flex; align-items:center; min-height:44px; padding-block:.35rem}
    .crumbs a{display:inline-block; padding-block:.45rem}
    .info a, .foot-grid a, .side-box ul a{min-height:38px; display:flex; align-items:center}
    .side-box ul a{display:block; padding-block:.6rem}
    footer.site li{margin-block:.15rem}
  }

  /* ---------- eyebrow / excerpt ---------- */
  .eyebrow{
    font-family:var(--head); font-weight:600; text-transform:uppercase;
    letter-spacing:.14em; font-size:.82rem; color:var(--teal-700);
    display:flex; align-items:center; gap:.6rem; margin:0 0 .9rem;
  }
  .eyebrow::before{content:""; width:26px; height:3px; background:var(--teal); border-radius:2px; flex:none}
  .excerpt{font-size:clamp(1.06rem,1.5vw,1.28rem); color:var(--ink-70); line-height:1.6; max-width:62ch}
  .measure{max-width:66ch}

  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
    font-family:var(--head); font-weight:600; font-size:1.05rem; letter-spacing:.01em;
    padding:.85rem 1.6rem; border-radius:999px; border:2px solid transparent;
    text-decoration:none; cursor:pointer; transition:transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
    white-space:nowrap; max-width:100%;
  }
  @media (max-width:420px){.btn{white-space:normal; text-align:center; line-height:1.25}}
  .btn:hover{transform:translateY(-2px)}
  .btn-primary{background:var(--plum); color:#fff; border-color:var(--plum); box-shadow:0 6px 18px rgba(173,57,116,.30)}
  .btn-primary:hover{background:var(--plum-600); border-color:var(--plum-600); color:#fff}
  .btn-dark{background:var(--ink); color:#fff; border-color:var(--ink)}
  .btn-dark:hover{background:#000; border-color:#000}
  .btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
  .btn-ghost:hover{border-color:var(--teal); background:var(--teal-050)}
  .btn-onphoto{background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.65); backdrop-filter:blur(6px)}
  .btn-onphoto:hover{background:#fff; color:var(--ink); border-color:#fff}
  .btn-sm{font-size:.98rem; padding:.62rem 1.2rem}
  .btns{display:flex; flex-wrap:wrap; gap:.85rem; align-items:center}

  /* ---------- header ---------- */
  .topbar{background:var(--ink); color:#D8DBE0; font-size:.86rem}
  .topbar .wrap{display:flex; gap:1.4rem; flex-wrap:wrap; justify-content:center; padding-block:.5rem; text-align:center}
  .topbar a{color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.32)}
  .topbar a:hover{border-color:var(--sun)}
  @media (max-width:620px){.topbar .wrap{gap:1.1rem} .topbar .tagline{display:none}}

  /* ---------- language switcher ---------- */
  /* Sits in the dark top bar. Hidden until i18n.js builds it, so a visitor
     with scripting off never sees a control that cannot work. */
  .lang{position:relative; display:inline-flex}
  .lang[hidden]{display:none}
  .lang-btn{
    display:inline-flex; align-items:center; gap:.4rem;
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.28);
    color:#fff; font:inherit; font-size:.86rem; line-height:1.2;
    padding:.28rem .6rem; border-radius:999px; cursor:pointer;
    transition:background .15s ease, border-color .15s ease;
  }
  .lang-btn:hover{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.5)}
  .lang-btn:focus-visible{outline:2px solid var(--sun); outline-offset:2px}
  .lang-btn svg:last-child{transition:transform .15s ease}
  .lang[data-open="true"] .lang-btn svg:last-child{transform:rotate(180deg)}
  .lang-label{opacity:.75}

  .lang-menu{
    display:none; position:absolute; top:calc(100% + .5rem); right:0; z-index:220;
    background:#fff; border:1px solid var(--line); border-radius:14px;
    box-shadow:var(--shadow-md); padding:.4rem; min-width:230px;
    max-height:min(70vh,420px); overflow-y:auto; text-align:left;
  }
  .lang[data-open="true"] .lang-menu{display:block}
  .lang-menu button{
    display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
    width:100%; background:none; border:0; cursor:pointer; text-align:left;
    padding:.5rem .7rem; border-radius:9px; color:var(--ink); font:inherit; font-size:.95rem;
  }
  .lang-menu button:hover{background:var(--teal-050); color:var(--teal-800)}
  .lang-menu button:focus-visible{outline:2px solid var(--teal-700); outline-offset:-2px}
  .lang-menu button[aria-selected="true"]{background:var(--teal-050); font-weight:700}
  .lang-menu .l-native{white-space:nowrap}
  .lang-menu .l-en{color:var(--ink-50); font-size:.8rem; flex:none}
  .lang-note{margin:.35rem .7rem .2rem; font-size:.8rem; color:var(--sun-700)}

  /* Google's widget inserts a toolbar and shifts the body down. We drive it
     from our own control, so neither is wanted. */
  .skiptranslate{display:none !important}
  body{top:0 !important}
  #googTranslateHost{display:none}

  /* Right to left languages: mirror the few places that are hard set. */
  [dir="rtl"] .eyebrow::before{order:2}
  [dir="rtl"] .lang-menu{left:0; right:auto; text-align:right}
  [dir="rtl"] .crumbs{direction:rtl}

  @media (max-width:620px){
    .lang-label{display:none}
    .lang-menu{right:auto; left:50%; transform:translateX(-50%)}
  }
  header.site{position:sticky; top:0; z-index:100; background:rgba(255,255,255,.94); backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line)}
  /* Logo left, the menu run and the Donate button together on the right. */
  .nav{display:flex; align-items:center; gap:1rem; padding-block:.7rem}
  .brand{flex:none; display:block; line-height:0}
  .brand img{width:clamp(150px,18vw,206px); height:auto}
  .nav-links{display:flex; gap:.3rem; margin-left:auto; align-items:center}
  .nav-actions{flex:none; display:flex; align-items:center; gap:.6rem; margin-left:.5rem}
  .nav-links a:not(.btn){
    font-family:var(--head); font-weight:600; font-size:1.02rem; color:var(--ink);
    text-decoration:none; padding:.5rem .7rem; border-radius:8px;
  }
  .nav-links a:not(.btn):hover{background:var(--teal-050); color:var(--teal-800)}
  .nav-cta{
    background:var(--donate); border-color:var(--donate); color:#fff;
    box-shadow:0 6px 18px rgba(31,127,125,.28); white-space:nowrap;
  }
  .nav-cta:hover{background:var(--donate-hover); border-color:var(--donate-hover); color:#fff}
  .menu-btn{display:none; background:none; border:2px solid var(--line); border-radius:10px; padding:.5rem .8rem; font-family:var(--head); font-weight:600; font-size:1rem; cursor:pointer; color:var(--ink)}
  @media (max-width:1360px){
    /* brand left, Donate and Menu together on the right */
    .nav{gap:.6rem}
    .nav-actions{margin-left:auto}
    .nav-links{
      display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch;
      background:#fff; border-bottom:1px solid var(--line); padding:.6rem clamp(20px,5vw,40px) 1.1rem; gap:.1rem; box-shadow:var(--shadow-md);
    }
    .nav-links.open{display:flex}
    .nav-links a{padding:.7rem .4rem; border-bottom:1px solid var(--cream-2)}
    .menu-btn{display:block; order:3}
    .nav-actions{order:2}
  }
  @media (max-width:430px){
    /* keep all three on one line on a small phone */
    .brand img{width:132px}
    .nav-cta{padding:.4rem .8rem; font-size:.95rem}
    .menu-btn{padding:.4rem .7rem; font-size:.95rem}
    /* narrower, never shorter: a target you can hit with a thumb */
    .nav-cta,.menu-btn{min-height:44px; display:inline-flex; align-items:center; justify-content:center}
    .nav{gap:.45rem}
  }

  /* ---------- hero ---------- */
  .hero{position:relative; isolation:isolate; color:#fff; overflow:hidden}
  .hero-media{position:absolute; inset:0; z-index:-2}
  /* Hold the right of the frame, where the child is, and a little above
     centre so faces are not cut by the fold. */
  .hero-media img{width:100%; height:100%; object-fit:cover; object-position:62% 32%}
  /* A phone crops this wide photo horizontally, so only the across value
     does any work here: hold the right of the frame, where the children are. */
  @media (max-width:760px){.hero-media img{object-position:72% 30%}}
  /* The headline is white, so the picture behind it has to stay dark enough
     to read against. This photograph is much brighter on the left than the
     one before it, so the scrim is heavier, and heavier again on narrow
     screens where the words spread across more of the image. Measured, not
     guessed: hero-contrast.mjs samples the pixels actually behind the type. */
  .hero::after{
    content:""; position:absolute; inset:0; z-index:-1;
    background:
      linear-gradient(100deg, rgba(14,10,4,.94) 0%, rgba(18,13,5,.88) 42%, rgba(24,16,6,.62) 72%, rgba(32,21,8,.44) 100%),
      linear-gradient(to top, rgba(12,9,4,.62), transparent 58%);
  }
  /* On a phone the words run the full width, so the scrim has to be even,
     but it was heavy enough to hide the photograph altogether. This is the
     lightest setting that still keeps every line above 4.5 to 1, checked
     with hero-contrast.mjs. */
  @media (max-width:1000px){
    .hero::after{
      background:
        linear-gradient(180deg, rgba(12,9,4,.72) 0%, rgba(14,10,5,.66) 45%, rgba(16,12,5,.74) 100%);
    }
  }
    .hero-inner{padding-block:clamp(4rem,10vw,8.5rem)}
  .hero-inner > *{max-width:44rem}          /* text measure, not container width */
  .hero-inner > .hero-trust{max-width:52rem}
  .hero .eyebrow{color:var(--teal-200)}
  .hero .eyebrow::before{background:var(--sun)}
  .hero h1{color:#fff}
  .hero h1 em{font-style:normal; color:var(--sun-200)}
  .hero p.lede{font-size:clamp(1.1rem,1.7vw,1.32rem); color:#F3EDE5; max-width:36rem; line-height:1.6}
  .hero .btns{margin-top:1.9rem}
  .hero-trust{
    margin-top:2.4rem; padding-top:1.3rem; border-top:1px solid rgba(255,255,255,.22);
    display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; font-size:.9rem; color:#EADFD1;
  }
  .hero-trust span{display:flex; align-items:center; gap:.45rem}
  .hero-trust svg{flex:none; color:var(--sun)}

  /* ---------- stat band ---------- */
  .band{background:var(--ink); color:#fff}
  .band .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:0; padding-block:0}
  @media (max-width:860px){.band .wrap{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:480px){.band .wrap{grid-template-columns:1fr}}
  /* The horizontal padding used to be cancelled on the first and last cell
     only, which is right for one row of four. Once the band wraps to two
     columns the first cell of the second row is no longer :first-child, so
     it kept its indent and sat 16px right of the cell above it. Column
     position, not document position, is what matters here. */
  .stat{padding:2.1rem 0; border-right:1px solid rgba(255,255,255,.12)}
  .band .wrap{column-gap:clamp(20px,3.4vw,44px)}

  /* The divider belongs between columns, so it hangs in the gap rather than
     eating into the cell and pushing the words across. */
  .stat{border-right:0; position:relative}
  .stat + .stat::before{
    content:""; position:absolute; top:0; bottom:0;
    left:calc(clamp(20px,3.4vw,44px) / -2);
    border-left:1px solid rgba(255,255,255,.12);
  }
  /* Four across: every cell but the first opens a column. Two across: only
     the even ones do. One across: none of them. */
  @media (max-width:860px){
    .stat + .stat::before{content:none}
    .stat:nth-child(2n)::before{content:""; position:absolute; top:0; bottom:0;
      left:calc(clamp(20px,3.4vw,44px) / -2);
      border-left:1px solid rgba(255,255,255,.12)}
  }
  @media (max-width:480px){.stat::before{content:none !important}}
  .stat b{display:block; font-family:var(--head); font-weight:700; font-size:clamp(1.6rem,2.6vw,2.15rem); color:var(--sun); line-height:1.05; margin-bottom:.25rem}
  .stat span{font-size:.95rem; color:#C9CDD3; line-height:1.5; display:block}
    /* A rule between the rows once it wraps, and none under the last one. */
  @media (max-width:860px){
    .stat:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.12)}
  }
  @media (max-width:480px){
    .stat{border-bottom:1px solid rgba(255,255,255,.12)}
    .stat:last-child{border-bottom:0}
  }

  /* ---------- sections ---------- */
  section{scroll-margin-top:96px}
  .pad{padding-block:clamp(3.6rem,8vw,6.5rem)}
  .cream{background:var(--cream)}
  .cream-2{background:var(--cream-2)}
  .split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
  .split.rev .fig{order:-1}
  .split.long .fig img{aspect-ratio:3/4}
  @media (max-width:900px){.split.long .fig img{aspect-ratio:4/3}}
  @media (max-width:900px){.split{grid-template-columns:1fr} .split.rev .fig{order:0}}
  .fig{position:relative}
  .fig img{border-radius:var(--r); box-shadow:var(--shadow-md); width:100%; aspect-ratio:4/3; object-fit:cover}
  .fig.tall img{aspect-ratio:3/4}
  .fig-tag{
    position:absolute; bottom:-18px; left:-18px; background:#fff; border-radius:12px; padding:.9rem 1.15rem;
    box-shadow:var(--shadow-md); max-width:15rem; border-left:5px solid var(--sun);
  }
  .fig-tag b{font-family:var(--head); display:block; font-size:1.02rem; line-height:1.2}
  .fig-tag span{font-size:.85rem; color:var(--ink-50); line-height:1.45; display:block; margin-top:.15rem}
  @media (max-width:520px){.fig-tag{position:static; margin-top:1rem; left:0; bottom:0; max-width:none}}

  /* ---------- cards ---------- */
  .cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(228px,1fr)); gap:1.35rem; margin-top:2.6rem}
  @media (max-width:1080px) and (min-width:721px){.cards{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:720px){.cards{grid-template-columns:1fr}}
  .card{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:1.9rem 1.7rem; box-shadow:var(--shadow-sm); display:flex; flex-direction:column}
  .card .ico{
    width:48px; height:48px; border-radius:12px; background:var(--teal-050); color:var(--teal-700);
    display:grid; place-items:center; margin-bottom:1.1rem; border:1px solid var(--teal-100);
  }
  .card h3{margin-bottom:.45rem}
  .card p{font-size:.98rem; color:var(--ink-70); margin-bottom:1rem}
  .card p:last-child{margin-bottom:0}
  .card .more{margin-top:auto; font-family:var(--head); font-weight:600; text-decoration:none; color:var(--teal-700); font-size:1rem}
  .card .more:hover{text-decoration:underline}
  .card.dark{background:var(--ink); border-color:var(--ink); color:#fff}
  .card.dark h3{color:#fff}
  .card.dark p{color:#C9CDD3}
  .card.dark .ico{background:rgba(247,148,50,.16); border-color:rgba(247,148,50,.3); color:var(--sun)}

  /* ---------- giving tiers ---------- */
  .tiers{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1.1rem; margin-top:2.4rem}
  .tier{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:1.5rem 1.4rem; box-shadow:var(--shadow-sm)}
  .tier.hl{border-color:var(--plum); box-shadow:0 0 0 3px var(--plum-050), var(--shadow-sm)}
  .tier b{font-family:var(--head); font-size:1.85rem; color:var(--sun-800); display:block; line-height:1}
  .tier span{display:block; margin-top:.5rem; font-size:.95rem; color:var(--ink-70); line-height:1.5}
  .tier em{display:inline-block; margin-top:.7rem; font-style:normal; font-size:.72rem; font-family:var(--head); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--sun-800); background:var(--sun-050); border:1px solid var(--sun-100); padding:.2rem .55rem; border-radius:99px}

  /* ---------- steps ---------- */
  .steps{counter-reset:s; display:grid; gap:1.2rem; margin:2.2rem 0 0; padding:0; list-style:none}
  .steps li{position:relative; padding-left:3.4rem}
  .steps li::before{
    counter-increment:s; content:counter(s);
    position:absolute; left:0; top:-2px; width:2.4rem; height:2.4rem; border-radius:50%;
    background:var(--teal); color:#fff; font-family:var(--head); font-weight:700; font-size:1.15rem;
    display:grid; place-items:center;
  }
  .steps b{font-family:var(--head); font-size:1.15rem; display:block; margin-bottom:.1rem}
  .steps p{font-size:.98rem; color:var(--ink-70); margin:0}

  /* ---------- sponsors ---------- */
  .sponsors{display:flex; flex-wrap:wrap; gap:.65rem; margin-top:2.2rem}
  .sponsors li{
    list-style:none; background:#fff; border:1px solid var(--line); border-radius:99px;
    padding:.55rem 1.1rem; font-family:var(--head); font-weight:600; font-size:1rem; color:var(--ink-70);
  }
  .sponsors li:hover{border-color:var(--teal); color:var(--teal-800)}

  /* ---------- quote ---------- */
  .quote{background:var(--ink); color:#fff; position:relative; overflow:hidden}
  .quote{overflow:hidden}
  .quote .mark{position:absolute; inset-inline-end:-1rem; top:-3rem; width:20rem; opacity:.09; pointer-events:none}
  .quote blockquote{margin:0; max-width:46rem; position:relative}
  .quote p{font-family:var(--head); font-weight:500; font-size:clamp(1.4rem,2.9vw,2.15rem); line-height:1.28; color:#fff; margin-bottom:1.2rem}
  .quote footer{font-size:.98rem; color:#C9CDD3}
  .quote footer b{color:var(--sun); font-weight:600}

  /* ---------- faq ---------- */
  .faq{margin-top:2.4rem; max-width:52rem; position:relative}
  /* The answers column is held at a readable width, which leaves the right
     hand side of the section empty. The same faded bulb as the page banners
     fills it, and only from the width where there is genuinely room. */
  @media (min-width:1180px){
    .faq::after{
      content:""; position:absolute; pointer-events:none;
      left:calc(100% + clamp(2rem,4vw,5rem)); top:50%; transform:translateY(-50%);
      width:min(18vw,240px); aspect-ratio:638/971;
      background:url('mark-watermark.png') center/contain no-repeat;
      opacity:.09;
    }
  }
  .faq details{border-bottom:1px solid var(--line); padding:.4rem 0}
  .faq summary{
    cursor:pointer; list-style:none; font-family:var(--head); font-weight:600; font-size:1.16rem;
    padding:.95rem 2.4rem .95rem 0; position:relative;
  }
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+"; position:absolute; right:.4rem; top:.75rem; font-size:1.6rem; color:var(--teal-700); line-height:1}
  .faq details[open] summary::after{content:"\2013"}
  .faq p{font-size:1rem; color:var(--ink-70); padding-right:2rem; margin:0 0 1rem}

  /* ---------- contact ---------- */
  .contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4rem); align-items:start}
  @media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
  .info{list-style:none; margin:1.8rem 0 0; padding:0; display:grid; gap:1.15rem}
  .info li{display:flex; gap:.9rem; align-items:flex-start}
  .info .ico{width:40px; height:40px; flex:none; border-radius:10px; background:#fff; border:1px solid var(--line); display:grid; place-items:center; color:var(--teal-700)}
  .info b{font-family:var(--head); display:block; font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-50); font-weight:600}
  .info a,.info span{color:var(--ink); text-decoration:none; font-size:1.04rem; word-break:break-word}
  .info a:hover{color:var(--teal-800); text-decoration:underline}
  form{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:clamp(1.5rem,3vw,2.2rem); box-shadow:var(--shadow-sm)}
  .field{margin-bottom:1.1rem}
  .field label{display:block; font-family:var(--head); font-weight:600; font-size:1rem; margin-bottom:.35rem}
  .field input,.field select,.field textarea{
    width:100%; font-family:var(--body); font-size:1rem; color:var(--ink);
    padding:.75rem .9rem; border:1px solid var(--line); border-radius:10px; background:var(--cream); line-height:1.5;
  }
  .field textarea{min-height:130px; resize:vertical}
  .field input:hover,.field select:hover,.field textarea:hover{border-color:var(--teal)}
  .formnote{font-size:.86rem; color:var(--ink-50); margin:.9rem 0 0}

  /* ---------- footer ---------- */
  /* ---------- footer ----------
     White ground, so the page ends light rather than closing on a slab of
     dark. Everything inside is re-toned for contrast on white: the body
     copy sits at --ink-70 and the links at --ink, both comfortably past
     WCAG AA. The top rule and the faint tint do the separating that the
     dark background used to do. */
  footer.site{
    background:#fff; color:var(--ink-70);
    border-top:1px solid var(--line);
    padding-block:3.2rem 2rem; font-size:.95rem;
  }
  /* The footer runs edge to edge, so fr units left the three columns
     bunched in the middle with a hole on the right. Sizing them to their
     contents and spreading the leftover space puts the brand on the left
     margin and Reach us on the right, which is what the eye expects. */
  .foot-grid{
    display:grid; grid-template-columns:auto auto auto auto;
    justify-content:space-between; gap:2.4rem clamp(1.8rem,4vw,4.5rem);
  }
  .foot-brand{max-width:34ch}
  @media (max-width:1100px){
    .foot-grid{grid-template-columns:1fr 1fr 1fr; justify-content:start}
    .foot-brand{grid-column:1/-1; max-width:46ch}
  }
  @media (max-width:720px){
    .foot-grid{grid-template-columns:1fr 1fr}
  }
  @media (max-width:430px){
    .foot-grid{grid-template-columns:1fr}
  }
  /* The links are two named groups rather than one cramped two-up list,
     which gives the row four columns and something to scan by. */
  .foot-brand img{width:230px; height:auto; margin-bottom:1.1rem}
  .foot-brand p{color:var(--ink-70); max-width:34ch; font-size:.95rem}
  footer.site h4{font-family:var(--head); color:var(--ink); font-size:.85rem; text-transform:uppercase; letter-spacing:.13em; margin-bottom:1rem}
  footer.site ul{list-style:none; margin:0; padding:0; display:grid; gap:.6rem}
  footer.site li{color:var(--ink-70)}
  footer.site a{color:var(--ink); text-decoration:none}
  footer.site a:hover{color:var(--teal-800); text-decoration:underline}
  /* Social row. Circles rather than bare glyphs so the four sit as a set,
     and each carries an aria-label because an icon on its own tells a
     screen reader nothing. */
  footer.site ul.social{display:flex; flex-wrap:wrap; gap:.6rem; list-style:none; margin:1.3rem 0 0; padding:0}
  footer.site .social a{
    display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
    color:var(--ink); background:var(--cream-2); border:1px solid var(--line);
    transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
  }
  footer.site .social a:hover{background:var(--teal-700); border-color:var(--teal-700); color:#fff; transform:translateY(-2px)}
  .social a:focus-visible{outline:3px solid var(--teal-600); outline-offset:3px}
  .social svg{display:block}

  .legal{margin-top:2.6rem; padding-top:1.5rem; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; justify-content:space-between; font-size:.86rem; color:var(--ink-50)}
  .legal .credit{width:100%; text-align:right; margin-top:.4rem; color:var(--ink-50)}
  .legal .credit a{color:var(--ink-70); text-decoration:none; border-bottom:1px solid var(--line)}
  .legal .credit a:hover{color:var(--plum-700); border-color:var(--plum-700)}
  @media (max-width:640px){.legal .credit{text-align:left}}
  .badge{display:inline-flex; align-items:center; gap:.5rem; background:#fff; border:1px solid #fff; color:#000; padding:.35rem .8rem; border-radius:99px; font-size:.82rem; font-family:var(--head); font-weight:600; letter-spacing:.04em}

/* =========================================================
   ADDITIONS: events, donor trust, board page, lightbox
   ========================================================= */

/* ---------- donor trust strip ---------- */
/* A ul carries a 40px indent by default. Without clearing it the cards sat
   40px right of the heading and the buttons in the same section, which read
   as the whole block being off centre. */
.trust{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1.3rem; margin:2.6rem 0 0; padding:0; list-style:none}
.trust > li{min-width:0}
.trust li{list-style:none; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:1.5rem 1.4rem; box-shadow:var(--shadow-sm)}
.trust .ico{width:44px; height:44px; border-radius:11px; background:var(--teal-050); border:1px solid var(--teal-100); color:var(--teal-700); display:grid; place-items:center; margin-bottom:.9rem}
.trust b{font-family:var(--head); display:block; font-size:1.16rem; line-height:1.2; margin-bottom:.3rem}
.trust span{font-size:.96rem; color:var(--ink-70); line-height:1.55}

/* ---------- events ---------- */
.event{
  display:grid; grid-template-columns:auto 1fr auto; gap:clamp(1.2rem,3vw,2.4rem); align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:1.6rem 1.7rem;
  box-shadow:var(--shadow-sm); margin-top:2.4rem;
}
@media (max-width:820px){.event{grid-template-columns:auto 1fr; row-gap:1.3rem} .event .event-cta{grid-column:1/-1}}
@media (max-width:520px){.event{grid-template-columns:1fr; text-align:left}}
.event-date{
  flex:none; text-align:center; background:var(--ink); color:#fff; border-radius:12px;
  padding:.85rem 1.1rem; min-width:5.4rem; font-family:var(--head); line-height:1;
}
.event-date b{display:block; font-size:2rem; color:var(--sun); font-weight:700}
.event-date span{display:block; font-size:.86rem; letter-spacing:.14em; text-transform:uppercase; margin-top:.3rem; color:#C9CDD3}
.event-body h3{margin-bottom:.25rem}
.event-body p{margin:0; font-size:.98rem; color:var(--ink-70)}
.event-cta{white-space:nowrap}

/* ---------- board page ---------- */
.page-head{background:var(--ink); color:#fff; position:relative; overflow:hidden}
.page-head::after{content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(79,168,162,.22), transparent 62%); pointer-events:none}
/* The inner page banners had a wide empty right hand side once the heading
   and excerpt had wrapped, so the bulb from the logo sits there as a faded
   watermark. It is decorative only: low opacity, no pointer events, and it
   drops out below 900px where the copy fills the band anyway. */
.page-head::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  right:clamp(1.5rem,5vw,6rem); top:50%; transform:translateY(-50%);
  width:min(26vw,300px); aspect-ratio:638/971;
  background:url('mark-watermark.png') center/contain no-repeat;
  opacity:.13;
}
@media (max-width:900px){.page-head::before{display:none}}
@media (prefers-reduced-motion:no-preference){.page-head::before{transition:opacity .3s ease}}
.page-head .wrap{padding-block:clamp(3rem,7vw,5.2rem); position:relative; z-index:1}
.page-head h1{color:#fff; font-size:clamp(1.95rem,4.2vw,3.1rem); max-width:20ch}
.page-head .excerpt{color:#D3D8DE}
.page-head .eyebrow{color:var(--teal-200)}
.crumbs{font-size:.9rem; color:#9BA2AA; margin:0 0 1.2rem}
.crumbs a{color:#DDE1E6; text-decoration:none}
.crumbs a:hover{color:var(--teal); text-decoration:underline}

.board-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem; margin-top:2.8rem}
@media (min-width:640px){.board-grid{grid-template-columns:repeat(3,1fr); gap:1.4rem}}
@media (min-width:1000px){.board-grid{grid-template-columns:repeat(4,1fr); gap:1.5rem}}

.member{
  position:relative; display:flex; flex-direction:column; text-align:left; width:100%;
  background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:0; overflow:hidden;
  box-shadow:var(--shadow-sm); cursor:pointer; font:inherit; color:inherit;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.member:hover,.member:focus-visible{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--teal)}
.member-photo{position:relative; aspect-ratio:1/1; background:var(--cream-2); overflow:hidden}
.member-photo img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease}
.member:hover .member-photo img{transform:scale(1.05)}
.member-initials{
  width:100%; height:100%; display:grid; place-items:center;
  font-family:var(--head); font-weight:700; font-size:clamp(2.2rem,5vw,3rem); letter-spacing:.02em;
  color:#fff; background:linear-gradient(140deg,var(--teal) 0%, var(--teal-600) 55%, var(--teal-800) 100%);
}
.member-veil{
  position:absolute; inset:0; display:grid; place-items:center; padding:1rem;
  background:linear-gradient(to top, rgba(20,14,6,.86), rgba(20,14,6,.45));
  opacity:0; transition:opacity .2s ease;
}
.member:hover .member-veil,.member:focus-visible .member-veil{opacity:1}
.member-veil span{
  font-family:var(--head); font-weight:600; font-size:1rem; color:#fff; text-align:center;
  border:2px solid rgba(255,255,255,.75); border-radius:999px; padding:.5rem 1.1rem; background:rgba(255,255,255,.1);
}
.member-meta{padding:1.05rem 1.15rem 1.2rem}
.member-meta b{font-family:var(--head); font-size:1.16rem; line-height:1.2; display:block}
.member-meta .member-role{display:block; font-size:.9rem; color:var(--teal-700); font-family:var(--head); font-weight:600; letter-spacing:.03em; margin-top:.2rem}
.member-meta .member-hint{display:block; font-size:.84rem; font-family:var(--body); font-weight:400; letter-spacing:0; color:var(--ink-50); margin-top:.55rem}
/* Hover affordance only where a real pointer exists. Touch and hybrid
   devices fall back to the visible "Tap to read bio" hint. */
.member-veil{display:none}
@media (hover:hover) and (pointer:fine){
  .member-veil{display:grid}
  .member-meta .member-hint{display:none}
}

/* ---------- lightbox ---------- */
.lb[hidden]{display:none}
.lb{
  position:fixed; inset:0; z-index:300; display:grid; place-items:center;
  padding:clamp(12px,4vw,40px); background:rgba(18,13,6,.72); backdrop-filter:blur(4px);
  animation:lbIn .18s ease;
}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb-panel{
  position:relative; background:#fff; border-radius:18px; width:min(720px,100%);
  max-height:min(88vh,860px); overflow:auto; box-shadow:0 24px 70px rgba(0,0,0,.4);
  animation:lbUp .22s cubic-bezier(.2,.7,.3,1);
}
@keyframes lbUp{from{transform:translateY(14px); opacity:0}to{transform:none; opacity:1}}
.lb-top{display:flex; gap:1.4rem; align-items:center; padding:clamp(1.5rem,4vw,2.1rem); background:var(--cream-2); border-bottom:1px solid var(--line)}
.lb-avatar{width:clamp(84px,18vw,116px); height:clamp(84px,18vw,116px); flex:none; border-radius:50%; overflow:hidden; border:4px solid #fff; box-shadow:var(--shadow-sm)}
.lb-avatar img{width:100%; height:100%; object-fit:cover}
.lb-top h2{margin:0 0 .15rem; font-size:clamp(1.5rem,3.4vw,2.05rem)}
.lb-role{font-family:var(--head); font-weight:600; color:var(--teal-700); font-size:1.02rem; letter-spacing:.02em; margin:0}
.lb-since{font-size:.88rem; color:var(--ink-50); margin:.35rem 0 0}
.lb-body{padding:clamp(1.5rem,4vw,2.1rem)}
.lb-body p{color:var(--ink-70); font-size:1.02rem}
.lb-body p:last-child{margin-bottom:0}
.lb-close{
  position:absolute; top:.85rem; right:.85rem; width:2.5rem; height:2.5rem; border-radius:50%;
  border:1px solid var(--line); background:#fff; color:var(--ink); font-size:1.5rem; line-height:1;
  cursor:pointer; display:grid; place-items:center; box-shadow:var(--shadow-sm);
}
.lb-close:hover{background:var(--ink); color:#fff; border-color:var(--ink)}
.lb-nav{display:flex; justify-content:space-between; gap:1rem; padding:0 clamp(1.5rem,4vw,2.1rem) clamp(1.5rem,4vw,2.1rem)}
.lb-nav button{
  font-family:var(--head); font-weight:600; font-size:1rem; background:none; border:2px solid var(--line);
  border-radius:999px; padding:.55rem 1.15rem; cursor:pointer; color:var(--ink);
}
.lb-nav button:hover:not(:disabled){border-color:var(--teal); background:var(--teal-050)}
.lb-nav button:disabled{opacity:.4; cursor:default}
body.lb-open{overflow:hidden}

/* =========================================================
   ADDITIONS: ticketing, checkout, donation amounts
   ========================================================= */

.hero.compact{min-height:0}
.hero.compact .hero-inner{padding-block:clamp(3rem,7vw,5.5rem)}

/* ---------- event key facts ---------- */
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1.2rem; margin-top:2.6rem}
.fact{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:1.4rem 1.35rem; box-shadow:var(--shadow-sm)}
.fact .ico{width:40px; height:40px; border-radius:10px; background:var(--teal-050); border:1px solid var(--teal-100); color:var(--teal-700); display:grid; place-items:center; margin-bottom:.85rem}
.fact b{font-family:var(--head); display:block; font-size:1.1rem; line-height:1.25; margin-bottom:.15rem}
.fact span{font-size:.95rem; color:var(--ink-70); line-height:1.5; display:block}

/* ---------- ticket / amount chooser ---------- */
.buy{background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-md); padding:clamp(1.5rem,4vw,2.3rem); max-width:640px; margin-inline:auto}
.buy h3{margin-bottom:.35rem}
.buy .sub{font-size:.97rem; color:var(--ink-70); margin-bottom:1.6rem}

.opts{display:grid; gap:.85rem; margin-bottom:1.6rem}
@media (min-width:560px){.opts.two{grid-template-columns:1fr 1fr}}
.opt{position:relative; display:block; cursor:pointer}
.opt input{position:absolute; opacity:0; width:0; height:0}
.opt span.box{
  display:block; border:2px solid var(--line); border-radius:14px; padding:1.15rem 1.25rem;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease; background:var(--cream);
}
.opt:hover span.box{border-color:var(--teal)}
.opt input:focus-visible + span.box{outline:3px solid var(--teal-600); outline-offset:3px}
.opt input:checked + span.box{border-color:var(--plum); background:var(--plum-050); box-shadow:0 0 0 3px rgba(173,57,116,.15)}
.opt .price{font-family:var(--head); font-weight:700; font-size:1.9rem; line-height:1; color:var(--ink); display:block}
.opt .label{font-family:var(--head); font-weight:600; font-size:1.05rem; color:var(--teal-700); display:block; margin-top:.35rem}
.opt .note{font-size:.87rem; color:var(--ink-50); display:block; margin-top:.25rem; line-height:1.45}
.opt .save{display:inline-block; margin-top:.5rem; font-family:var(--head); font-weight:600; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--sun-800); background:var(--sun-050); border:1px solid var(--sun-100); padding:.2rem .55rem; border-radius:99px}

.qty{display:flex; align-items:center; gap:.9rem; margin-bottom:1.5rem}
.qty label{font-family:var(--head); font-weight:600; font-size:1.02rem}
.qty .ctrl{display:inline-flex; align-items:center; border:2px solid var(--line); border-radius:999px; overflow:hidden}
.qty button{width:2.6rem; height:2.6rem; border:0; background:#fff; font-size:1.35rem; line-height:1; cursor:pointer; color:var(--ink); font-family:var(--head)}
.qty button:hover:not(:disabled){background:var(--teal-050); color:var(--teal-800)}
.qty button:disabled{opacity:.35; cursor:default}
.qty output{min-width:2.6rem; text-align:center; font-family:var(--head); font-weight:700; font-size:1.2rem}

.total{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  border-top:1px dashed var(--line); border-bottom:1px dashed var(--line);
  padding:1.1rem 0; margin-bottom:1.5rem;
}
.total dt{font-family:var(--head); font-weight:600; font-size:1.1rem; margin:0}
.total dd{margin:0; font-family:var(--head); font-weight:700; font-size:2.1rem; color:var(--plum-700); line-height:1}
.total .breakdown{display:block; font-family:var(--body); font-weight:400; font-size:.85rem; color:var(--ink-50); margin-top:.3rem; text-align:right}

#paypal-buttons{min-height:52px; margin-top:.4rem}
.pay-fallback{font-size:.9rem; color:var(--ink-70); background:var(--cream-2); border:1px solid var(--line); border-radius:12px; padding:1rem 1.15rem; line-height:1.55}
.pay-fallback b{font-family:var(--head); display:block; margin-bottom:.2rem; color:var(--ink)}

.secure{display:flex; align-items:center; justify-content:center; gap:.5rem; font-size:.85rem; color:var(--ink-50); margin-top:1.1rem; text-align:center}
.secure svg{flex:none; color:var(--teal-700)}

/* checkout status */
.status{border-radius:12px; padding:1.1rem 1.25rem; margin-top:1.2rem; font-size:.97rem; line-height:1.55; display:none}
.status.show{display:block}
.status.ok{background:var(--teal-050); border:1px solid var(--teal-100); color:var(--teal-800)}
.status.err{background:#FDECEC; border:1px solid #F5C6C6; color:#8A2020}
.status b{font-family:var(--head); display:block; font-size:1.08rem; margin-bottom:.2rem}
.status code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:rgba(0,0,0,.06); padding:.1rem .4rem; border-radius:5px; font-size:.92em}

/* donation amount grid */
.amounts{display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem; margin-bottom:1.2rem}
@media (min-width:430px){.amounts{grid-template-columns:repeat(3,1fr)}}
.amt{position:relative}
.amt input{position:absolute; opacity:0; width:0; height:0}
.amt span{
  display:block; text-align:center; border:2px solid var(--line); border-radius:12px; padding:.85rem .5rem;
  font-family:var(--head); font-weight:700; font-size:1.3rem; cursor:pointer; background:var(--cream);
  transition:border-color .15s ease, background .15s ease;
}
.amt:hover span{border-color:var(--teal)}
.amt input:focus-visible + span{outline:3px solid var(--teal-600); outline-offset:3px}
.amt input:checked + span{border-color:var(--plum); background:var(--plum-050); color:var(--plum-700)}
.custom-amt{position:relative; margin-bottom:1.4rem}
.custom-amt .cur{position:absolute; left:1rem; top:50%; transform:translateY(-50%); font-family:var(--head); font-weight:700; font-size:1.15rem; color:var(--ink-50)}
.custom-amt input{width:100%; font-family:var(--head); font-weight:700; font-size:1.25rem; padding:.85rem 1rem .85rem 2.2rem; border:2px solid var(--line); border-radius:12px; background:var(--cream); color:var(--ink)}
.custom-amt input:hover{border-color:var(--teal)}

.freq{display:inline-flex; background:var(--cream-2); border:1px solid var(--line); border-radius:999px; padding:.28rem; margin-bottom:1.4rem}
.freq label{position:relative}
.freq input{position:absolute; opacity:0; width:0; height:0}
.freq span{display:block; padding:.5rem 1.15rem; border-radius:999px; font-family:var(--head); font-weight:600; font-size:1rem; cursor:pointer; color:var(--ink-70)}
.freq input:checked + span{background:#fff; color:var(--ink); box-shadow:var(--shadow-sm)}
.freq input:focus-visible + span{outline:3px solid var(--teal-600); outline-offset:2px}


/* =========================================================
   Heading rhythm on centred call to action blocks
   ========================================================= */
.band h2, .quote p, section[style*="text-align:center"] h2{ text-wrap:balance; }
.cta-head{ max-width:none; margin-inline:auto; white-space:nowrap; text-wrap:nowrap; }
/* One line reads as a single statement. It only holds while the panel is
   wide enough for it, so below that the line is allowed to break again. */
@media (max-width:1000px){ .cta-head{ white-space:normal; text-wrap:balance; max-width:20ch; } }
@media (max-width:600px){ .cta-head{ max-width:16ch; } }
.cta-sub{ max-width:56ch; margin-inline:auto; }

/* Very narrow phones: let the big display sizes step down rather than overflow */
@media (max-width:360px){
  h1{font-size:clamp(1.95rem,9vw,2.4rem)}
  h2{font-size:clamp(1.5rem,7.5vw,2rem)}
  .hero .btns .btn, .page-head .btns .btn{width:100%}
}

  /* The honeypot field. Hidden the accessible way rather than parked off
     to the left, which would create a sideways scroll in right to left
     languages. Screen readers skip it because it is aria-hidden. */
  .pot{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

  /* What the form says back to the sender. */
  .form-status{margin:.9rem 0 0; padding:.75rem 1rem; border-radius:10px; font-size:.95rem; line-height:1.5}
  .form-status[data-kind="good"]{background:var(--teal-050); border:1px solid var(--teal-100); color:var(--teal-800)}
  .form-status[data-kind="bad"]{background:var(--sun-050); border:1px solid var(--sun-100); color:var(--sun-800)}
  .form-status[data-kind="note"]{background:var(--cream-2); border:1px solid var(--line); color:var(--ink-70)}
  .form-status a{color:inherit}
  .field input.is-bad, .field textarea.is-bad{border-color:var(--sun-700)}

  /* A section with room to spare and no photograph gets the bulb from the
     logo, faded, in the same place the page banners put it. Decorative
     only, so it carries no alt text and drops out on narrow screens where
     the copy already fills the row. */
  .sec-bulb > .wrap{position:relative}
  .sec-bulb > .wrap::after{
    content:""; position:absolute; pointer-events:none; z-index:0;
    right:clamp(1rem,4vw,4rem); top:50%; transform:translateY(-50%);
    width:min(20vw,230px); aspect-ratio:638/971;
    background:url('mark-watermark.png') center/contain no-repeat;
    opacity:.10;
  }
  .sec-bulb > .wrap > *{position:relative; z-index:1}
  @media (max-width:1000px){.sec-bulb > .wrap::after{display:none}}

  /* ---------- a photograph in the spare part of a text section ----------
     photos.js measures each section and only splits the ones genuinely
     leaving a quarter of the row empty. Two shapes: a whole section of
     copy, and an introduction sitting above a full width grid. Below
     1000px the copy takes the full width and the picture stacks under it,
     because on a phone there is no dead space to fill. */
  .sec-row{display:grid; gap:clamp(1.6rem,3.5vw,3rem); align-items:center}
  @media (min-width:1000px){
    .sec-row{grid-template-columns:minmax(0,1fr) minmax(0,.72fr)}
    .sec-row-full{grid-template-columns:minmax(0,1fr) minmax(0,.82fr)}
  }
  .sec-row + *{margin-top:clamp(2rem,4vw,3rem)}
  .sec-copy{min-width:0}
  .sec-copy > *:last-child{margin-bottom:0}

  .sec-photo{min-width:0; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-md)}
  .sec-photo img{width:100%; height:100%; object-fit:cover; aspect-ratio:16/10; display:block; max-height:400px}
  .sec-photo-tall img{aspect-ratio:4/3; max-height:460px}
  @media (max-width:999px){
    .sec-photo img{aspect-ratio:16/9}
    /* On a phone a decorative picture between the copy and the cards is
       noise, so it only appears where the section is copy on its own. */
    .sec-row:not(.sec-row-full) .sec-photo{display:none}
  }
  /* On a dark band it needs a soft edge rather than a hard rectangle. */
  .band .sec-photo, .cream .sec-photo{box-shadow:0 18px 46px rgba(22,48,47,.18)}

/* =========================================================
   EVENTS listing and archive
   ========================================================= */
.ev-list{display:grid; gap:1.5rem; margin-top:2.6rem; grid-template-columns:1fr}

.ev-card{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm);
}
.ev-media{display:block; aspect-ratio:16/9; overflow:hidden; background:var(--cream-2)}
.ev-media img{width:100%; height:100%; object-fit:cover}
.ev-body{padding:1.6rem 1.6rem 1.8rem; display:flex; flex-direction:column; flex:1}

/* Wide layout: the picture sits beside the detail rather than above it, so a
   single event fills the box instead of leaving half the row empty. */
@media (min-width:820px){
  .ev-card{flex-direction:row; align-items:stretch}
  .ev-media{flex:0 0 42%; max-width:42%; aspect-ratio:auto; min-height:280px}
  .ev-body{padding:2rem 2.2rem 2.2rem; justify-content:center}
  .ev-card .ev-summary{max-width:52ch}
}

.ev-when{display:flex; align-items:center; gap:.9rem; margin:0 0 .9rem; font-size:.93rem; color:var(--ink-70); line-height:1.4}
.ev-date{
  flex:none; text-align:center; background:var(--ink); color:#fff; border-radius:10px;
  padding:.55rem .75rem; min-width:3.6rem; font-family:var(--head); line-height:1;
}
.ev-date b{display:block; font-size:1.5rem; color:var(--sun); font-weight:700}
.ev-date span{display:block; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; margin-top:.2rem; color:#C9D6D4}
/* An event with no confirmed day shows the month where the day number
   normally sits, so the chip needs the smaller, wider type of a word
   rather than the large figure of a date. */
.ev-date.is-tbd b{font-size:1.05rem; letter-spacing:.04em; text-transform:uppercase}

.ev-card h3{margin:0 0 .3rem}
.ev-venue{font-size:.94rem; color:var(--ink-50); margin:0 0 .7rem}
.ev-summary{font-size:.98rem; color:var(--ink-70); margin:0 0 1rem}
.ev-price{
  font-family:var(--head); font-weight:600; font-size:1.02rem; color:var(--plum-700);
  background:var(--plum-050); border:1px solid var(--plum-100); border-radius:99px;
  padding:.3rem .85rem; display:inline-block; margin:0 0 1.2rem; align-self:flex-start;
}
.ev-card .btn, .ev-card .more{margin-top:auto; align-self:flex-start}
.ev-badge{
  display:inline-block; align-self:flex-start; margin:0 0 1rem;
  font-family:var(--head); font-weight:600; font-size:.74rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-50); background:var(--cream-2);
  border:1px solid var(--line); border-radius:99px; padding:.24rem .7rem;
}

/* past events read as archive, not as something you can still buy */
.ev-card.is-past{background:var(--cream-2); box-shadow:none}
.ev-card.is-past .ev-media img{filter:grayscale(.55) opacity(.72)}
.ev-card.is-past .ev-date{background:var(--ink-50)}
.ev-card.is-past .ev-date b{color:#fff}
.ev-card.is-past h3{color:var(--ink-70)}

/* the panel that replaces the ticket form once sales close */
.sales-closed{
  background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:clamp(1.6rem,4vw,2.4rem); box-shadow:var(--shadow-md);
  max-width:640px; margin-inline:auto; text-align:center;
}
.sales-closed .ev-badge{align-self:center; margin-inline:auto; display:inline-block}
.sales-closed h3{margin:.2rem 0 .5rem}
.sales-closed p{color:var(--ink-70); margin:0}
.sales-closed .btns{justify-content:center}

/* =========================================================
   NAVIGATION with dropdown submenus
   ========================================================= */
.nav-links .has-sub{position:relative}
.nav-links .sub-toggle{
  display:inline-flex; align-items:center; gap:.35rem;
  font-family:var(--head); font-weight:600; font-size:1.02rem; color:var(--ink);
  background:none; border:0; cursor:pointer; padding:.5rem .7rem; border-radius:8px;
}
.nav-links .sub-toggle:hover{background:var(--teal-050); color:var(--teal-800)}
.nav-links .sub-toggle svg{transition:transform .18s ease; flex:none}
.nav-links .has-sub[data-open="true"] .sub-toggle{background:var(--teal-050); color:var(--teal-800)}
.nav-links .has-sub[data-open="true"] .sub-toggle svg{transform:rotate(180deg)}

.subnav{
  list-style:none; margin:0; padding:.45rem;
  position:absolute; top:calc(100% + .35rem); left:0; z-index:120;
  min-width:19rem; background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow-md); display:none;
}
.nav-links .has-sub[data-open="true"] .subnav{display:block}
.subnav li{margin:0}
.subnav a{
  display:block; padding:.62rem .8rem; border-radius:8px; text-decoration:none;
  font-family:var(--body); font-weight:500; font-size:.97rem; color:var(--ink); line-height:1.35;
}
.subnav a:hover{background:var(--teal-050); color:var(--teal-800)}
.subnav a .hint{display:block; font-size:.82rem; color:var(--ink-50); margin-top:.1rem}
.subnav a:hover .hint{color:var(--teal-700)}
.subnav a[target="_blank"]::after{content:" \2197"; color:var(--ink-50); font-size:.85em}
/* The hint below a menu item is a block, so an arrow added after the link
   drops onto a line of its own and reads like a stray bullet. Where there
   is a hint, hang the arrow off the end of that instead. Browsers without
   :has() simply keep the older arrangement. */
.subnav a[target="_blank"]:has(.hint)::after{content:none}
.subnav a[target="_blank"] .hint::after{content:" \2197"; font-size:.9em}

@media (max-width:1360px){
  .nav-links .has-sub{display:block}
  .nav-links .sub-toggle{width:100%; justify-content:space-between; padding:.7rem .4rem; border-bottom:1px solid var(--cream-2); border-radius:0}
  .subnav{position:static; min-width:0; border:0; box-shadow:none; padding:.2rem 0 .5rem .8rem; background:transparent}
  .subnav a{padding:.55rem .4rem}
}

/* =========================================================
   DOCUMENT LISTS (newsletters, grant documents)
   ========================================================= */
.doclist{display:grid; gap:1rem; margin-top:2.4rem; grid-template-columns:1fr}
@media (min-width:760px){.doclist{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}}
.doc{
  display:flex; gap:1rem; align-items:flex-start; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:1.25rem 1.35rem; box-shadow:var(--shadow-sm); text-decoration:none; color:inherit;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.doc:hover{border-color:var(--teal); transform:translateY(-2px); box-shadow:var(--shadow-md)}
.doc .ico{
  flex:none; width:44px; height:54px; border-radius:7px; background:var(--plum-050);
  border:1px solid var(--plum-100); color:var(--plum-700); display:grid; place-items:center;
  font-family:var(--head); font-weight:700; font-size:.72rem; letter-spacing:.04em;
}
.doc b{font-family:var(--head); font-size:1.1rem; display:block; line-height:1.25}
.doc span{display:block; font-size:.9rem; color:var(--ink-50); margin-top:.25rem}
.doc .go{font-family:var(--head); font-weight:600; font-size:.92rem; color:var(--teal-700); margin-top:.5rem; display:block}

/* embedded PDF viewer */
.pdfwrap{margin-top:1.6rem; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--cream-2); box-shadow:var(--shadow-sm)}
.pdfwrap object, .pdfwrap iframe{display:block; width:100%; height:min(78vh,860px); border:0}
.pdfwrap .fallback{padding:1.4rem; font-size:.96rem; color:var(--ink-70)}
@media (max-width:700px){.pdfwrap object,.pdfwrap iframe{height:60vh}}

/* =========================================================
   SPONSOR LOGO WALL
   ========================================================= */
.thanks{
  font-family:var(--script); font-weight:700;
  font-size:clamp(2.2rem,5vw,3.4rem); line-height:1.1;
  color:var(--plum); text-align:center; margin:0 0 .4rem;
  /* the script face sits low, so nudge it back onto the baseline */
  padding-top:.15em;
}
.thanks + .excerpt{text-align:center; margin-inline:auto}
/* Two across on the narrowest phones rather than one, because fifteen
   full width tiles is a very long scroll for a wall of logos. */
.logo-wall{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; margin-top:2.4rem; align-items:center}
@media (min-width:430px){.logo-wall{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1rem}}
@media (min-width:700px){.logo-wall{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}}
.logo-wall li{
  list-style:none; background:#fff; border:1px solid var(--line); border-radius:12px;
  display:grid; place-items:center; min-height:104px; overflow:hidden;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.logo-wall li:hover{border-color:var(--teal); box-shadow:var(--shadow-sm); transform:translateY(-2px)}
/* the anchor fills the tile so the whole card is the hit area */
.logo-wall a, .logo-wall .plain{display:grid; place-items:center; width:100%; height:100%; padding:1.1rem 1rem; border-radius:12px}
.logo-wall a:focus-visible{outline:3px solid var(--teal-600); outline-offset:-3px}
.logo-wall img{max-width:100%; max-height:64px; width:auto; height:auto; object-fit:contain;
  filter:grayscale(.15); transition:filter .15s ease}
.logo-wall li:hover img{filter:none}

/* =========================================================
   BLOG
   ========================================================= */
.post-grid{display:grid; gap:1.4rem; margin-top:2.6rem; grid-template-columns:1fr}
@media (min-width:700px){.post-grid{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}}
/* A grid item defaults to min-width:auto, so one long unbroken word in a
   post title could push the card wider than its own column. */
.post-card{min-width:0}
.post-card h3, .post-card p{overflow-wrap:anywhere}
.post-card{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:1.5rem 1.5rem 1.7rem; box-shadow:var(--shadow-sm); text-decoration:none; color:inherit;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.post-card:hover{border-color:var(--teal); transform:translateY(-3px); box-shadow:var(--shadow-md)}
.post-card time{font-family:var(--head); font-weight:600; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--teal-700)}
.post-card h3{margin:.45rem 0 .5rem; font-size:1.2rem}
.post-card p{font-size:.96rem; color:var(--ink-70); margin:0 0 1rem}
.post-card .go{margin-top:auto; font-family:var(--head); font-weight:600; color:var(--teal-700); font-size:.96rem}

.pager{display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; align-items:center; margin-top:3rem}
.pager a, .pager span{
  font-family:var(--head); font-weight:600; font-size:1rem; padding:.55rem .95rem;
  border:2px solid var(--line); border-radius:10px; text-decoration:none; color:var(--ink); min-width:2.9rem; text-align:center;
}
.pager a:hover{border-color:var(--teal); background:var(--teal-050); color:var(--teal-800)}
.pager .current{background:var(--ink); border-color:var(--ink); color:#fff}
.pager .gap{border:0; color:var(--ink-50); padding-inline:.3rem; min-width:0}

.post-body{max-width:44rem}
.post-body p{font-size:1.06rem; line-height:1.75; color:var(--ink-70)}
.post-body h2{font-size:clamp(1.4rem,2.6vw,1.9rem); margin-top:2.2rem}
.post-body h3{font-size:1.25rem; margin-top:1.8rem}
.post-body img{border-radius:12px; box-shadow:var(--shadow-sm); margin:1.6rem 0; height:auto}
.post-body figure{margin:1.8rem 0}
.post-body figcaption{font-size:.9rem; color:var(--ink-50); margin-top:.6rem}
.post-body ul, .post-body ol{padding-left:1.3rem; color:var(--ink-70); font-size:1.04rem; line-height:1.7}
.post-body li{margin-bottom:.5rem}
.post-body a{color:var(--teal-700)}
.post-body blockquote{border-left:4px solid var(--teal); margin:1.8rem 0; padding:.3rem 0 .3rem 1.3rem; color:var(--ink-70); font-style:normal}
.post-body iframe{max-width:100%; border-radius:12px}
.post-meta{font-family:var(--head); font-weight:600; font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; color:var(--teal-700); margin-bottom:.6rem}


/* =========================================================
   CLOSING CALL TO ACTION, as a contained panel
   ========================================================= */
.cta-section{padding-block:clamp(3rem,7vw,5rem)}
.cta-panel{
  background:var(--ink); color:#fff; border-radius:22px;
  padding:clamp(2.4rem,6vw,4.2rem) clamp(1.5rem,5vw,3.5rem);
  text-align:center; box-shadow:var(--shadow-md); position:relative; overflow:hidden;
}
.cta-panel::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg, rgba(44,166,164,.18), transparent 58%);
}
.cta-panel > *{position:relative; z-index:1}
.cta-panel h2{color:#fff; margin-bottom:.5rem}
.cta-panel .eyebrow{justify-content:center; color:var(--teal-200)}
.cta-panel p{color:#C9D6D4}
.cta-panel .btns{justify-content:center; margin-top:2rem}
@media (max-width:520px){.cta-panel{border-radius:18px}}

/* =========================================================
   BLOG with sidebar
   ========================================================= */
.blog-layout{display:grid; gap:clamp(2rem,4vw,3.5rem); grid-template-columns:1fr; margin-top:2.6rem}
@media (min-width:1000px){.blog-layout{grid-template-columns:minmax(0,1fr) 310px}}
.blog-main{min-width:0}
.blog-layout .post-grid{margin-top:0}
@media (min-width:1000px){.blog-layout .post-grid{grid-template-columns:repeat(2,1fr)}}

.sidebar{display:grid; gap:1.4rem; align-content:start}
@media (min-width:1000px){.sidebar{position:sticky; top:96px}}
.side-box{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:1.4rem 1.4rem 1.5rem; box-shadow:var(--shadow-sm)}
.side-box.tint{background:var(--cream-2)}
.side-box h3{font-size:1.06rem; margin:0 0 .9rem; padding-bottom:.7rem; border-bottom:1px solid var(--line)}
.side-box ul{list-style:none; margin:0; padding:0; display:grid; gap:.1rem}
.side-box li{margin:0}
.side-box ul a{
  display:block; padding:.5rem .55rem; margin-inline:-.55rem; border-radius:8px;
  text-decoration:none; color:var(--ink); font-size:.95rem; line-height:1.4;
}
.side-box ul a:hover{background:var(--teal-050); color:var(--teal-800)}
.side-box ul a .when{display:block; font-family:var(--head); font-weight:600; font-size:.76rem;
  letter-spacing:.09em; text-transform:uppercase; color:var(--teal-700); margin-bottom:.1rem}
.side-box p{font-size:.95rem; color:var(--ink-70); margin:0 0 1rem}
.side-box .btn{width:100%}

/* year filter */
.years{display:flex; flex-wrap:wrap; gap:.4rem}
.years a{
  font-family:var(--head); font-weight:600; font-size:.92rem; padding:.34rem .7rem;
  border:1px solid var(--line); border-radius:99px; text-decoration:none; color:var(--ink-70); background:#fff;
}
.years a:hover{border-color:var(--teal); color:var(--teal-800); background:var(--teal-050)}
.years a.is-active{background:var(--ink); border-color:var(--ink); color:#fff}

/* search */
.side-search{position:relative}
.side-search input{
  width:100%; font-family:var(--body); font-size:.97rem; padding:.7rem .85rem .7rem 2.2rem;
  border:2px solid var(--line); border-radius:10px; background:#fff; color:var(--ink);
}
.side-search input:hover{border-color:var(--teal)}
.side-search svg{position:absolute; left:.7rem; top:50%; transform:translateY(-50%); color:var(--ink-50); pointer-events:none}
.search-note{font-size:.86rem; color:var(--ink-50); margin:.6rem 0 0}
.post-card[hidden]{display:none}

/* ---------- printable event flyer ---------- */
.flyer-row{display:grid; gap:clamp(1.6rem,4vw,3rem); margin-top:2.4rem; align-items:start}
@media (min-width:900px){.flyer-row{grid-template-columns:minmax(0,.9fr) minmax(0,1fr)}}
.flyer-shot{
  display:block; border-radius:var(--r); overflow:hidden; background:#fff;
  border:1px solid var(--line); box-shadow:var(--shadow-md);
  transition:transform .18s ease, box-shadow .18s ease;
}
.flyer-shot:hover{transform:translateY(-3px); box-shadow:0 10px 26px rgba(22,48,47,.14), 0 26px 60px rgba(22,48,47,.16)}
.flyer-shot img{width:100%; height:auto; display:block}
.flyer-side h3{margin-top:.2rem}
.flyer-side .btns{margin-top:1.4rem}
.flyer-note{margin-top:1.2rem; font-size:.92rem; color:var(--ink-50)}
@media print{
  .flyer-side, .topbar, header.site, footer.site, .cta-section{display:none !important}
  .flyer-shot{border:0; box-shadow:none}
}

/* ---------- supporters we can name but have no logo for yet ---------- */
.also-thanks{margin-top:2.6rem; padding-top:1.8rem; border-top:1px solid var(--line)}
.also-thanks h3{font-size:1.05rem; color:var(--ink-70); font-weight:600; margin-bottom:.9rem}
.also-thanks .named{
  display:flex; flex-wrap:wrap; gap:.5rem .9rem; margin:0;
  font-family:var(--head); font-size:1.12rem; color:var(--ink);
}
.also-thanks .named span, .also-thanks .named a{
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:.42rem 1.05rem; text-decoration:none; color:var(--ink);
}
.also-thanks .named a:hover{border-color:var(--teal); color:var(--teal-800)}

/* ---------- what the board actually does ---------- */
.wwd-row{display:grid; gap:clamp(1.8rem,4vw,3rem); margin-top:2.4rem; align-items:start}
.has-wwd-photo .wwd-row{grid-template-columns:1fr}
@media (min-width:1000px){
  .has-wwd-photo .wwd-row{grid-template-columns:minmax(0,1fr) minmax(0,.75fr)}
}
.wwd{list-style:none; counter-reset:wwd; margin:0; padding:0; display:grid; gap:1rem}
.wwd li{
  counter-increment:wwd; position:relative; padding:1.15rem 1.3rem 1.15rem 4.1rem;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-sm);
}
.wwd li::before{
  content:counter(wwd); position:absolute; left:1.15rem; top:1.05rem;
  width:2.1rem; height:2.1rem; border-radius:50%;
  background:var(--teal-050); border:2px solid var(--teal); color:var(--teal-800);
  font-family:var(--head); font-weight:700; font-size:1rem;
  display:grid; place-items:center;
}
/* Grant Night is the one they light up about, so it gets the accent. */
.wwd li:nth-child(5){border-color:var(--sun-200); background:var(--sun-050)}
.wwd li:nth-child(5)::before{background:#fff; border-color:var(--sun); color:var(--sun-700)}
.wwd b{display:block; font-family:var(--head); font-size:1.16rem; line-height:1.25; margin-bottom:.2rem}
.wwd span{color:var(--ink-70); font-size:1rem; line-height:1.55}

.wwd-photo{margin:0; position:sticky; top:96px}
.wwd-photo img{
  width:100%; height:auto; display:block; border-radius:var(--r);
  box-shadow:var(--shadow-md);
}
.wwd-photo figcaption{margin-top:.7rem; font-size:.92rem; color:var(--ink-50)}
@media (max-width:999px){.wwd-photo{position:static}}

  /* Policy links: present and findable, without competing with the rest of
     the footer for attention. */
  .legal .policies{display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .8rem}
  .legal .policies a{color:var(--ink-70); text-decoration:none; border-bottom:1px solid var(--line)}
  .legal .policies a:hover{color:var(--teal-800); border-color:var(--teal-800)}
  /* The divider is decoration, so it is hidden from screen readers and
     disappears when the links wrap onto their own lines on a phone. */
  .legal .policies .sep{color:var(--ink-50); opacity:.6; user-select:none}
  @media (max-width:420px){
    .legal .policies{flex-direction:column; align-items:flex-start; gap:.5rem}
    .legal .policies .sep{display:none}
  }

  /* The policy pages themselves: one readable column. */
  .legal-doc{max-width:68ch}
  .legal-doc h2{font-size:clamp(1.3rem,2.4vw,1.7rem); margin-top:2.4rem}
  .legal-doc h3{font-size:1.08rem; margin-top:1.5rem; color:var(--teal-800)}
  .legal-doc p, .legal-doc li{color:var(--ink-70)}
  .legal-doc ul{padding-left:1.15rem; margin:0 0 1.1em}
  .legal-doc li{margin-bottom:.55rem}
  .legal-doc b{color:var(--ink)}
  .legal-doc .updated{
    display:inline-block; font-family:var(--head); font-size:.85rem; font-weight:600;
    letter-spacing:.08em; text-transform:uppercase; color:var(--teal-800);
    background:var(--teal-050); border:1px solid var(--teal-100);
    padding:.3rem .8rem; border-radius:999px; margin-bottom:1.6rem;
  }
  .legal-doc .addr{margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid var(--line); font-size:.95rem}

/* ---------- directions to a venue ---------- */
.dir-link{
  display:inline-flex; align-items:center; gap:.35rem; margin-top:.35rem;
  color:var(--teal-800); font-weight:600; text-decoration:none;
  border-bottom:1px solid var(--teal-200);
}
.dir-link:hover{border-color:var(--teal-800)}
.dir-card{
  margin-top:2.2rem; background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(1.4rem,3vw,2.1rem); box-shadow:var(--shadow-sm); max-width:44rem;
}
.dir-venue{font-size:1.08rem; line-height:1.5; margin-bottom:1.3rem}
.dir-venue b{font-family:var(--head); font-size:1.2rem}
.dir-card .btn svg{margin-right:.1rem}
.dir-note{margin:1.2rem 0 0; font-size:.94rem; color:var(--ink-50)}

/* The button under a sponsor wall centres with the logos above it. Left
   aligned it read as though it had come loose from the grid. */
.logo-wall + .btns{justify-content:center; margin-top:2.6rem}
.wall-cta{justify-content:center; margin-top:2.6rem}
/* The directions button sits beside the ticket button in an event hero. */
.hero-directions{gap:.45rem}
.hero-directions svg{flex:none}

/* A button whose destination does not exist yet. It has to look like part of
   the page, not like something broken, and it must not invite a click: no
   pointer, no hover lift, and a note that it is coming.

   The note is read from data-pending on the element rather than written here,
   so a date can never be left behind in the stylesheet after the thing it was
   waiting for has arrived:
     <span class="btn btn-primary is-pending" data-pending="Available September 7"
           aria-disabled="true">Digital Application</span>
   Nothing uses this at the moment. The 2026-27 grant application and
   guidelines are live and linked. */
.btn.is-pending{
  opacity:.62; cursor:default; box-shadow:none; position:relative;
}
.btn.is-pending:hover{transform:none; box-shadow:none; filter:none}
.btn.is-pending::after{
  content:attr(data-pending); position:absolute; left:50%; top:calc(100% + .45rem);
  transform:translateX(-50%); white-space:nowrap;
  font-family:var(--body); font-size:.78rem; font-weight:600; letter-spacing:.02em;
  color:var(--ink-50);
}
.btns:has(.btn.is-pending){margin-bottom:1.6rem}

/* ---------- the invitation, at the top of the events page ----------
   The foundation's complaint was that the invitation did not pop. It was
   sitting inside a card halfway down a page, at the same visual weight as
   everything around it. So this is deliberately the loudest thing on the
   page: a tinted band, the flyer at a size you cannot miss, and the two
   things a visitor might do sitting right beside it.

   The band is set on the ink colour rather than cream because the flyer is
   a bright, busy piece of artwork. On a pale background it competes with
   the page; on a dark one it reads as a framed object under a light. */
.invite{
  background:
    radial-gradient(120% 140% at 12% 0%, #1E4B49 0%, transparent 60%),
    linear-gradient(160deg, var(--ink) 0%, #10403E 62%, #0C3634 100%);
  color:#fff;
  padding:clamp(2.4rem, 5vw, 4rem) 0;
  border-block:1px solid rgba(255,255,255,.08);
}
.invite-row{
  display:grid; gap:clamp(1.6rem, 4vw, 3.2rem);
  grid-template-columns:minmax(0, 0.85fr) minmax(0, 1fr);
  align-items:center;
}

/* the flyer itself: given room, a real frame, and a hint that it opens */
.invite-shot{
  display:block; position:relative; justify-self:center;
  width:100%; max-width:420px; border-radius:14px; overflow:hidden;
  background:#fff; line-height:0;
  box-shadow:0 10px 24px rgba(0,0,0,.28), 0 30px 70px rgba(0,0,0,.34);
  transition:transform .22s ease, box-shadow .22s ease;
}
.invite-shot img{width:100%; height:auto; display:block}
.invite-shot::after{
  content:"Tap to enlarge"; position:absolute; inset-inline:0; bottom:0;
  padding:.5rem .7rem; text-align:center;
  font-family:var(--body); font-size:.8rem; font-weight:600; letter-spacing:.02em;
  color:#fff; background:linear-gradient(to top, rgba(8,32,31,.86), transparent);
  opacity:0; transition:opacity .22s ease;
}
.invite-shot:hover, .invite-shot:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(0,0,0,.32), 0 38px 84px rgba(0,0,0,.4);
}
.invite-shot:hover::after, .invite-shot:focus-visible::after{opacity:1}

.invite-kicker{
  font-family:var(--head); font-weight:700; text-transform:uppercase;
  letter-spacing:.14em; font-size:.82rem; color:var(--sun-200);
  margin:0 0 .5rem;
}
.invite-say h2{
  font-size:clamp(1.9rem, 4.2vw, 2.9rem); line-height:1.08;
  margin:0 0 .9rem; color:#fff; letter-spacing:-.01em;
}
.invite-when{font-size:1.16rem; margin:0 0 .5rem; color:#fff}
.invite-when b{color:var(--sun-200)}
.invite-where{margin:0 0 1rem; color:rgba(255,255,255,.84); line-height:1.5}
.invite-what{margin:0 0 .9rem; color:rgba(255,255,255,.88); max-width:46ch; line-height:1.6}
.invite-price{
  display:inline-block; margin:0 0 1.4rem; padding:.4rem .85rem;
  border:1px solid rgba(255,255,255,.28); border-radius:999px;
  font-family:var(--head); font-weight:600; font-size:1rem; color:#fff;
}
.invite-btns{margin:0 0 1.1rem}
.invite-note{font-size:.92rem; color:rgba(255,255,255,.72); margin:0; line-height:1.55}
.invite-note a{color:#fff; text-underline-offset:3px}

@media (max-width:900px){
  /* the picture leads on a phone, because it is the thing that stops a thumb */
  .invite-row{grid-template-columns:1fr; gap:1.6rem}
  .invite-shot{max-width:min(360px, 88vw)}
  .invite-say{text-align:center}
  .invite-what{margin-inline:auto}
  .invite-btns{justify-content:center}
}

/* Two fundraisers can be selling at the same time, and when they are, both
   invitations go up, soonest first. Stacked identically they read as one
   block printed twice by mistake, so the second is mirrored and its light
   falls from the other side. Nothing is hidden or shortened; only the
   arrangement changes, and on a phone both revert to picture first. */
/* run together as one dark stretch rather than two boxes with a seam */
.invite + .invite{border-block-start:0}
.invite:has(+ .invite){border-block-end:0}
.invite-flip{
  background:
    radial-gradient(120% 140% at 88% 0%, #1E4B49 0%, transparent 60%),
    linear-gradient(200deg, #0C3634 0%, #10403E 40%, var(--ink) 100%);
}
.invite-flip .invite-row{grid-template-columns:minmax(0, 1fr) minmax(0, 0.85fr)}
.invite-flip .invite-shot{order:2}
.invite-flip .invite-say{order:1}
@media (max-width:900px){
  .invite-flip .invite-row{grid-template-columns:1fr}
  .invite-flip .invite-shot, .invite-flip .invite-say{order:0}
}

/* A touch device has no hover, so the label has to be permanently visible.
   Laid over the artwork it covered the bottom of the flyer, which is where
   the photographs are, so the frame grows a strip underneath instead and the
   label sits in it. Nothing of the invitation is hidden. */
@media (hover:none){
  .invite-shot{padding-bottom:2.1rem}
  .invite-shot::after{
    content:"Tap to enlarge"; opacity:1; background:none; color:var(--ink-70);
    padding:.55rem .7rem;
  }
}

/* ---------- give once or give monthly ---------- */
.give-switch{
  display:flex; gap:.3rem; margin:0 auto 2.2rem; padding:.32rem;
  background:var(--cream-2); border-radius:999px; width:max-content; max-width:100%;
}
.give-tab{
  appearance:none; border:0; cursor:pointer; white-space:nowrap;
  font-family:var(--head); font-weight:600; font-size:1.02rem;
  padding:.62rem 1.5rem; border-radius:999px;
  background:transparent; color:var(--ink-70);
  transition:background .18s ease, color .18s ease, box-shadow .18s ease;
}
.give-tab:hover{color:var(--ink)}
.give-tab.is-on{
  background:#fff; color:var(--teal-800);
  box-shadow:0 1px 2px rgba(22,48,47,.08), 0 4px 12px rgba(22,48,47,.09);
}
.give-tab:focus-visible{outline:3px solid var(--teal); outline-offset:2px}

/* the monthly panel reuses the donation card, so it sits at the same width
   and weight as the one off form rather than looking like an afterthought */
.buy.monthly .measure{margin:0 0 1.4rem; color:var(--ink-70)}
.monthly-facts{list-style:none; margin:0 0 .4rem; padding:0; display:grid; gap:.9rem}
.monthly-facts > li{
  display:grid; gap:.15rem; padding-left:1.6rem; position:relative; min-width:0;
}
.monthly-facts > li::before{
  content:""; position:absolute; left:0; top:.42em;
  width:.62rem; height:.62rem; border-radius:50%;
  background:var(--teal); opacity:.85;
}
.monthly-facts b{font-family:var(--head); font-size:1.02rem}
.monthly-facts span{color:var(--ink-70); font-size:.97rem; line-height:1.55}

@media (max-width:480px){
  .give-switch{width:100%}
  .give-tab{flex:1; padding-inline:.8rem; font-size:.98rem}
}

/* ---------- the event strip ----------
   Sits above everything, including the header, and is the first thing on
   the page. Orange because it has to interrupt: the rest of the site is
   teal and cream, so a warm bar reads as "this is an announcement" rather
   than as another piece of furniture. Ink on orange rather than white on
   orange, because white on this orange fails contrast at this size. */
.evbar{
  display:block; background:var(--sun); color:var(--ink);
  text-decoration:none; font-family:var(--head);
  border-bottom:1px solid rgba(22,48,47,.14);
  transition:background .18s ease;
}
.evbar:hover, .evbar:focus-visible{background:#F8913F}
.evbar:focus-visible{outline:3px solid var(--ink); outline-offset:-3px}

.evbar-in{
  display:flex; align-items:center; justify-content:center; gap:.55rem .95rem;
  flex-wrap:wrap; padding-block:.6rem; text-align:center;
}
.evbar-tag{
  text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; font-weight:700;
  background:rgba(22,48,47,.12); padding:.18rem .5rem; border-radius:999px;
}
.evbar-what{font-size:1.02rem; font-weight:700}
/* no opacity here: it would blend the text into the orange and quietly
   drop the measured contrast below the 4.5:1 the rest of the site holds */
.evbar-when{font-size:.97rem; font-weight:600}
.evbar-go{
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.95rem; font-weight:700; text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:2px;
}
.evbar:hover .evbar-go svg{transform:translateX(2px)}
.evbar-go svg{transition:transform .18s ease}

@media (max-width:700px){
  /* on a phone the tag is the first thing to go: the event name, the date
     and the call to action are what earn the space */
  .evbar-tag{display:none}
  .evbar-in{gap:.3rem .7rem; padding-block:.55rem}
  .evbar-what{font-size:.97rem}
  .evbar-when{font-size:.9rem}
  .evbar-go{font-size:.9rem}
}