/* ---- 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}

  /* ---------- 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)}
  .nav{display:flex; align-items:center; gap:1.2rem; 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-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-links a.nav-cta{
    margin-left:.5rem;
    background:var(--donate); border-color:var(--donate); color:#fff;
    box-shadow:0 6px 18px rgba(31,127,125,.28);
  }
  .nav-links a.nav-cta:hover{background:var(--donate-hover); border-color:var(--donate-hover); color:#fff}
  .menu-btn{display:none; margin-left:auto; 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:1100px){
    .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)}
    .nav-links a.nav-cta{margin:.7rem 0 0; text-align:center}
    .menu-btn{display:block}
  }

  /* ---------- hero ---------- */
  .hero{position:relative; isolation:isolate; color:#fff; overflow:hidden}
  .hero-media{position:absolute; inset:0; z-index:-2}
  .hero-media img{width:100%; height:100%; object-fit:cover; object-position:50% 30%}
  @media (max-width:760px){.hero-media img{object-position:72% 34%}}
  .hero::after{
    content:""; position:absolute; inset:0; z-index:-1;
    background:
      linear-gradient(100deg, rgba(20,14,6,.90) 0%, rgba(24,17,7,.78) 38%, rgba(30,20,8,.42) 66%, rgba(40,26,10,.30) 100%),
      linear-gradient(to top, rgba(15,11,5,.55), transparent 55%);
  }
    .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}}
    .stat{padding:2.1rem clamp(16px,1.8vw,26px); border-right:1px solid rgba(255,255,255,.12)}
  .stat:first-child{padding-left:0}
  .stat:last-child{padding-right:0; border-right:0}
  .stat:last-child{border-right:0}
  .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}
  @media (max-width:640px){.stat{border-right:0; 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 ---------- */
.trust{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.3rem; margin-top:2.6rem}
.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 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}

.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}

@media (max-width:1100px){
  .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}
.logo-wall{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1rem; margin-top:2.4rem; align-items:center}
@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{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}
}