/* ==========================================================================
   Federation of Women for World Peace — Ukraine
   Design tokens and components. Every colour used on the site is declared
   once here; nothing below invents a value.
   ========================================================================== */

:root{
  /* colour */
  --primary:#2F6A54;              /* links, primary buttons        6.34:1 */
  --primary-dark:#255746;         /* primary hover                 8.30:1 */
  --primary-container:#DDEDE5;    /* tonal fills, direction icons         */
  --on-primary-container:#102E24; /* text on the above            12.04:1 */
  --mint:#A8D9C3;                 /* decoration only — never text         */

  --secondary:#9A3B63;            /* support actions               6.60:1 */
  --secondary-dark:#7E2C4E;
  --secondary-container:#FBE3EC;  /* support band, quote card             */
  --on-secondary-container:#3E1226;/* text on the above           13.11:1 */

  --ink:#1C1B1A;                  /* headings, footer             17.20:1 */
  --body:#44403E;                 /* running text                 10.25:1 */
  --muted:#6F6866;                /* dates, captions               5.46:1 */
  --outline:#E7E0DE;
  --surface:#FFFFFF;
  --surface-alt:#FAF7F6;
  --surface-tonal:#F2F6F3;
  --on-primary:#FFFFFF;           /* text on primary buttons       6.34:1 */
  --on-secondary:#FFFFFF;         /* text on support buttons       6.60:1 */
  --footer-bg:#1C1B1A;            /* footer stays dark in both themes     */
  --scrim:#1C1B1A;                /* dims the page under overlays         */
  --on-scrim:#E7E0DE;             /* captions over the scrim, any theme   */
  --foot-text:#C4BBB8;            /* footer greys, on --footer-bg   9.57:1 */
  --foot-muted:#9A908D;           /*                               5.44:1 */
  --foot-line:#332F2E;
  --link:var(--primary);          /* links inside running text            */

  /* switches the high-contrast mode flips (see the end of the file) */
  --ring:0 0 #0000;               /* frame for flat tonal surfaces        */
  --sel-bg:var(--primary-container);/* current / pressed / selected item */
  --sel-fg:var(--on-primary-container);
  --dot-off:var(--outline);       /* inactive slider dot                  */
  --lang-cur-bg:var(--surface);   /* current language                     */
  --lang-cur-fg:var(--primary);
  --theme-toggle:grid;

  /* photo tone: one light treatment so news photos read as a series */
  --photo-tone:saturate(.88) sepia(.07) contrast(1.03);
  /* Ukrainian cross-stitch motif: a rhombus with a centre stitch, joined by
     short ties; used as a mask, so it takes the colour of --mint (decor only) */
  /* the same stitches folded into a corner: for news cards */
  --orn-corner:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M25 20.5 29.5 25 25 29.5 20.5 25Z'/%3E%3Cpath d='M14 22 17 25 14 28 11 25Z'/%3E%3Cpath d='M25 11 28 14 25 17 22 14Z'/%3E%3C/g%3E%3Cpath d='M24.2 24.2h1.6v1.6h-1.6zM4 24.3h4.5v1.4H4zM24.3 4h1.4v4.5h-1.4z'/%3E%3C/svg%3E");
  --orn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M12 1.5 16.5 6 12 10.5 7.5 6Z' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M11 5h2v2h-2zM0 5.25h4.5v1.5H0zM19.5 5.25H24v1.5h-4.5z'/%3E%3C/svg%3E");

  /* shape */
  --r-sm:12px; --r-md:16px; --r-lg:28px; --r-pill:100px;

  /* elevation */
  --e1:0 1px 2px rgba(28,27,26,.06),0 1px 3px 1px rgba(28,27,26,.05);
  --e2:0 1px 2px rgba(28,27,26,.06),0 2px 8px 2px rgba(28,27,26,.06);

  /* type */
  --serif:'Lora',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* rhythm */
  --gap-sec:92px;
  --gutter:32px;
  --container:1140px;

  /* text size: multiplied into every font-size; the A+ button raises it */
  --fs:1;

  color-scheme:light;
}

/* Dark theme: chosen with the header button, or the system setting when the
   visitor has not chosen. Every text pair checked: lowest 6.06:1. */
:root[data-theme="dark"]{
  --primary:#7CC4A4;              /* links on dark                 8.84:1 */
  --primary-dark:#9BD4BA;
  --primary-container:#1D3A2E;
  --on-primary-container:#CFEBDD; /*                               9.77:1 */
  --mint:#3F6F5B;                 /* decoration only                      */
  --secondary:#E58FB3;            /*                               7.66:1 */
  --secondary-dark:#F0A9C6;
  --secondary-container:#3A1A28;
  --on-secondary-container:#F7D4E2;/*                             11.39:1 */
  --ink:#F2EEEC;                  /*                              15.65:1 */
  --body:#D5CFCC;                 /*                              11.71:1 */
  --muted:#A39C99;                /*                               6.10:1 */
  --outline:#2E3532;
  --surface:#141716;
  --surface-alt:#1C201E;
  --surface-tonal:#18211D;
  --on-primary:#0B2219;           /* dark text on light buttons    8.18:1 */
  --on-secondary:#2A0A18;         /*                               7.72:1 */
  --footer-bg:#0B0D0C;
  --scrim:#000000;
  --e1:0 1px 2px rgba(0,0,0,.4),0 1px 3px 1px rgba(0,0,0,.3);
  --e2:0 1px 2px rgba(0,0,0,.4),0 2px 8px 2px rgba(0,0,0,.35);
  color-scheme:dark;
}
/* :where() keeps this at :root weight, so high contrast (later) can override it */
@media (prefers-color-scheme:dark){
  :root:where(:not([data-theme="light"]):not([data-theme="dark"])){
    --primary:#7CC4A4;--primary-dark:#9BD4BA;--primary-container:#1D3A2E;--on-primary-container:#CFEBDD;--mint:#3F6F5B;
    --secondary:#E58FB3;--secondary-dark:#F0A9C6;--secondary-container:#3A1A28;--on-secondary-container:#F7D4E2;
    --ink:#F2EEEC;--body:#D5CFCC;--muted:#A39C99;--outline:#2E3532;
    --surface:#141716;--surface-alt:#1C201E;--surface-tonal:#18211D;
    --on-primary:#0B2219;--on-secondary:#2A0A18;--footer-bg:#0B0D0C;--scrim:#000000;
    --e1:0 1px 2px rgba(0,0,0,.4),0 1px 3px 1px rgba(0,0,0,.3);
    --e2:0 1px 2px rgba(0,0,0,.4),0 2px 8px 2px rgba(0,0,0,.35);
    color-scheme:dark;
  }
}
/* Larger text in the page body and footer; the header keeps its size so it still fits */
html[data-text="lg"] main,html[data-text="lg"] .foot,html[data-text="lg"] .search-overlay{--fs:1.15}

/* ------------------------------------------------------------------ base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--surface);color:var(--body);
  font-family:var(--sans);font-size:calc(16px * var(--fs));line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip; /* full-bleed blocks must never cause a sideways scroll */
}
body.menu-open{overflow:hidden}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0;font-family:var(--serif);color:var(--ink);font-weight:500;line-height:1.22;text-wrap:balance}
p{margin:0 0 14px}
p:last-child{margin-bottom:0}
a{color:var(--primary)}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:4px}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--surface);color:var(--primary);padding:12px 20px;border-radius:0 0 var(--r-sm) 0;font-weight:600}
.skip:focus{left:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* --------------------------------------------------------------- layout */
.wrap{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--gap-sec)}
.sec--tight{padding-top:0}
.sec--alt{background:var(--surface-alt)}
.sec--tonal{background:var(--surface-tonal)}
.mt-lg{margin-top:22px}

.eyebrow{font-size:calc(12px * var(--fs));font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--primary);margin-bottom:14px}
.leaf{width:40px;height:4px;border-radius:var(--r-pill);background:var(--mint);margin-bottom:20px}
.muted{color:var(--muted)}
.lede{font-size:calc(19px * var(--fs));color:var(--body)}
.h2-lg{font-size:calc(34px * var(--fs))}

.sec-head{max-width:640px;margin-bottom:44px}
.sec-head h2{font-size:calc(34px * var(--fs));margin-bottom:12px}
.sec-head p{color:var(--muted)}
.sec-head--row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;max-width:none}
.sec-head--row>div{max-width:640px}

.rich p{margin-bottom:16px;max-width:34em}

/* -------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-size:calc(15px * var(--fs));font-weight:600;
  min-height:46px;padding:12px 24px;border-radius:var(--r-pill);
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background .18s ease,box-shadow .18s ease,border-color .18s ease,color .18s ease;
}
.btn--filled{background:var(--primary);color:var(--on-primary)}
.btn--filled:hover{background:var(--primary-dark);box-shadow:var(--e1)}
.btn--support{background:var(--secondary);color:var(--on-secondary)}
.btn--support:hover{background:var(--secondary-dark);box-shadow:var(--e1)}
.btn--tonal{background:var(--primary-container);color:var(--on-primary-container)}
.btn--tonal:hover{box-shadow:var(--e1)}
.btn--tonal-rose{background:var(--surface);color:var(--secondary)}
.btn--tonal-rose:hover{box-shadow:var(--e1)}
.btn--outlined{border-color:var(--outline);color:var(--ink);background:transparent}
.btn--outlined:hover{border-color:var(--primary);color:var(--primary)}

.more{font-size:calc(14px * var(--fs));font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.more:hover{text-decoration:underline}

/* --------------------------------------------------------------- header */
.top{background:var(--surface);border-bottom:1px solid var(--outline)}
.top-in{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter);display:flex;align-items:center;gap:30px;min-height:84px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;flex:none;max-width:340px}
.brand-mark{flex:none}
.brand-mark--img{width:auto;height:56px;max-width:110px;object-fit:contain}
/* The drawer copy of the switcher only appears on phones */
.nav .lang{display:none}
.brand-name{display:block;font-family:var(--serif);font-weight:500;font-size:calc(17px * var(--fs));color:var(--ink);line-height:1.25}
.brand-sub{display:block;font-size:calc(12px * var(--fs));color:var(--muted);letter-spacing:.04em;margin-top:2px}

.nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.nav a{font-size:calc(15px * var(--fs));font-weight:500;color:var(--body);text-decoration:none;padding:9px 14px;border-radius:var(--r-pill);transition:background .18s ease,color .18s ease}
.nav a:hover{background:var(--surface-tonal);color:var(--primary)}
.nav a[aria-current]{background:var(--primary-container);color:var(--on-primary-container)}

.top-right{display:flex;align-items:center;gap:14px;flex:none}
.lang{display:flex;gap:2px;font-size:calc(13px * var(--fs));font-weight:600;background:var(--surface-alt);border-radius:var(--r-pill);padding:3px}
.lang a{padding:7px 10px;border-radius:var(--r-pill);text-decoration:none;color:var(--muted);min-width:40px;text-align:center}
.lang a[aria-current]{background:var(--surface);color:var(--primary);box-shadow:var(--e1)}

.burger{display:none;width:48px;height:48px;align-items:center;justify-content:center;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;border-radius:var(--r-pill)}
.burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px}

/* ----------------------------------------------------------------- hero */
.hero{padding-block:76px 84px}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.hero h1{font-size:calc(50px * var(--fs));line-height:1.08;letter-spacing:-.015em;margin-bottom:22px}
.hero .lede{max-width:30em;margin-bottom:30px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:30px}
.trust{display:flex;align-items:center;gap:11px;font-size:calc(14px * var(--fs));color:var(--muted);background:var(--surface-tonal);border-radius:var(--r-pill);padding:11px 20px;width:fit-content;max-width:100%}
.trust svg{flex:none;color:var(--primary)}

/* ---------------------------------------------------------------- media */
.media{width:100%;border-radius:var(--r-md);object-fit:cover}
.media--hero{aspect-ratio:4/3;border-radius:var(--r-lg)}
.media--award{aspect-ratio:5/4;border-radius:var(--r-lg)}
.media--card{aspect-ratio:3/2}
.slot{
  position:relative;display:flex;align-items:flex-end;overflow:hidden;
  background:radial-gradient(120% 90% at 20% 15%,#F6E7EE 0%,rgba(246,231,238,0) 60%),
             linear-gradient(145deg,#E2EFE8,#CFE3D8 60%,#DCE9E2);
}
.slot span{font-size:calc(12px * var(--fs));line-height:1.4;color:#2A4237;background:rgba(255,255,255,.88);margin:12px;padding:7px 11px;border-radius:var(--r-sm);max-width:88%}

/* -------------------------------------------------------------- support */
.support{background:var(--secondary-container)}
.support-in{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;padding-block:48px}
.support .eyebrow{color:var(--secondary)}
.support h2{font-size:calc(30px * var(--fs));margin-bottom:12px;color:var(--on-secondary-container)}
.support p{color:var(--on-secondary-container);max-width:40em;opacity:var(--text-opacity,.88)}
.support-act{display:flex;flex-wrap:wrap;gap:12px}

/* ----------------------------------------------------------- directions */
.dirs{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.dir{background:var(--surface);border-radius:var(--r-lg);padding:32px 30px;display:flex;gap:20px;box-shadow:var(--e1);transition:box-shadow .2s ease,transform .2s ease}
.dir:hover{box-shadow:var(--e2);transform:translateY(-2px)}
.dir-ic{flex:none;width:52px;height:52px;border-radius:var(--r-md);background:var(--primary-container);color:var(--on-primary-container);display:grid;place-items:center}
.dir h3{font-size:calc(20px * var(--fs));margin-bottom:8px}
.dir p{font-size:calc(15px * var(--fs));color:var(--muted);margin-bottom:14px}

/* ---------------------------------------------------------------- facts */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fact{background:var(--surface);border-radius:var(--r-lg);padding:30px 28px;box-shadow:var(--e1)}
.fact b{display:block;font-family:var(--serif);font-size:calc(42px * var(--fs));font-weight:500;color:var(--primary);line-height:1;font-variant-numeric:tabular-nums;margin-bottom:10px}
.fact span{font-size:calc(15px * var(--fs));color:var(--body);display:block}
.fact i{display:block;font-style:normal;font-size:calc(12px * var(--fs));color:var(--muted);margin-top:8px}
.fact--slot b{color:var(--outline)}

/* ---------------------------------------------------------------- award */
.award-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}
.laureates{list-style:none;margin:24px 0 0;padding:0}
.laureates li{display:grid;grid-template-columns:64px 1fr;gap:18px;padding:16px 0;border-bottom:1px solid var(--outline);align-items:baseline}
.laureates li:first-child{border-top:1px solid var(--outline)}
.laureates time{font-family:var(--serif);font-weight:500;color:var(--secondary);font-variant-numeric:tabular-nums}
.laureates b{display:block;color:var(--ink);font-weight:600;font-size:calc(16px * var(--fs))}
.laureates em{display:block;font-style:normal;font-size:calc(14px * var(--fs));color:var(--muted)}

/* ----------------------------------------------------------------- news */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{display:flex;flex-direction:column;gap:14px;text-decoration:none;background:var(--surface);border-radius:var(--r-lg);padding:14px 14px 24px;box-shadow:var(--e1);transition:box-shadow .2s ease,transform .2s ease}
.card:hover{box-shadow:var(--e2);transform:translateY(-2px)}
.card time{font-size:calc(13px * var(--fs));color:var(--muted);padding-inline:10px}
.card h3{font-size:calc(19px * var(--fs));line-height:1.3;padding-inline:10px}
.card:hover h3{color:var(--primary)}
.card p{font-size:calc(15px * var(--fs));color:var(--muted);padding-inline:10px;margin:0}

/* ---------------------------------------------------------------- about */
.about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:start}
.voice{background:var(--secondary-container);border-radius:var(--r-lg);padding:34px 32px;margin:0}
.voice svg{color:var(--secondary);opacity:.55;margin-bottom:12px}
.voice blockquote{margin:0;font-family:var(--serif);font-size:calc(21px * var(--fs));line-height:1.45;color:var(--on-secondary-container)}
.voice figcaption{margin-top:18px;font-size:calc(14px * var(--fs));color:var(--on-secondary-container);opacity:var(--text-opacity,.8)}
.voice figcaption b{display:block;font-weight:600;opacity:1}

/* -------------------------------------------------------------- gallery */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.gal figure{margin:0}
.gal .media{aspect-ratio:4/3}
.gal figcaption{margin-top:14px;font-size:calc(15px * var(--fs));font-weight:600;color:var(--ink)}
.gal figcaption a{color:inherit;text-decoration:none}
.gal figcaption a:hover{color:var(--primary)}
.gal small{display:block;font-size:calc(13px * var(--fs));color:var(--muted);font-weight:400;margin-top:2px}

/* --------------------------------------------------------------- footer */
/* Dark in both themes; greys are the footer's own, all ≥ 5.4:1 on --footer-bg */
.foot{background:var(--footer-bg);color:var(--foot-text);padding-top:64px}
.foot a{color:#fff;text-decoration:none}
.foot :focus-visible{outline-color:#fff}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,.9fr)) minmax(0,1.2fr);gap:40px;padding-bottom:40px}
.foot-brand{display:flex;flex-direction:column;align-items:flex-start;gap:16px;max-width:400px}
.foot-logo{display:flex;align-items:center;gap:12px;color:#fff;font-family:var(--serif);font-weight:500;font-size:calc(20px * var(--fs));line-height:1.25}
.foot-logo .brand-mark--img{height:48px}
.foot-lede{margin:0;font-size:calc(15px * var(--fs));color:var(--foot-text)}
.foot-donate svg{flex:none}
/* Column labels: small caps line, not bold headings */
.foot-h{display:block;margin:0 0 14px;font-family:var(--sans);font-size:calc(12px * var(--fs));font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--foot-muted);line-height:1.4}
.foot-col summary{list-style:none;cursor:default}
.foot-col summary::-webkit-details-marker{display:none}
.foot-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:calc(15px * var(--fs))}
.foot-list a{color:#E8E2DF}
.foot-list a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--secondary);text-underline-offset:4px}
/* Contacts: rows with a round icon; whole row is the tap target */
.foot-contact{display:flex;flex-direction:column;gap:6px}
.foot-contact .foot-h{margin-bottom:6px}
.foot-cl{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 10px;margin-inline:-10px;border-radius:var(--r-sm);color:#E8E2DF;transition:background .2s ease}
a.foot-cl:hover{background:rgba(255,255,255,.06)}
.foot-cl__i{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;transition:background .2s ease}
a.foot-cl:hover .foot-cl__i{background:var(--secondary)}
.foot-cl b{display:block;font-weight:500;font-size:calc(15px * var(--fs));color:#fff;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.foot-cl small{display:block;font-size:calc(12.5px * var(--fs));color:var(--foot-muted)}
.foot-cl address{font-style:normal;font-size:calc(14px * var(--fs));line-height:1.45}
.foot-contact .social{margin-top:8px}
/* Bottom line */
.foot-note{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;border-top:1px solid var(--foot-line);padding-block:18px 24px;font-size:calc(13px * var(--fs));color:var(--foot-muted)}
.foot-legal{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot-langs{display:flex;gap:4px}
.foot-langs a{display:inline-flex;align-items:center;min-height:48px;padding:0 12px;border-radius:var(--r-pill);color:#E8E2DF;font-weight:600}
.foot-langs a:hover{color:#fff;background:rgba(255,255,255,.06)}
.foot-langs a[aria-current]{background:rgba(255,255,255,.1);color:#fff}

@media (max-width:1000px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:700px){
  .foot{padding-top:40px}
  .foot-grid{grid-template-columns:1fr;gap:0;padding-bottom:20px}
  .foot-brand{margin-bottom:24px}
  .foot-col{border-top:1px solid var(--foot-line)}
  .foot-col summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:52px;margin:0}
  .foot-col summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-4px;transition:transform .2s ease}
  .foot-col[open] summary::after{transform:rotate(-135deg);margin-top:4px}
  .foot-col .foot-list{padding-bottom:16px}
  .foot-col .foot-list{gap:0}
  .foot-list a{display:inline-flex;align-items:center;min-height:48px}
  .foot-contact{border-top:1px solid var(--foot-line);padding-top:16px}
}

/* ----------------------------------------------------------- responsive */
@media (max-width:1139px){
  :root{--gutter:24px}
}

@media (max-width:900px){
  :root{--gap-sec:60px;--gutter:20px}

  .burger{display:flex}
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;z-index:20;
    flex-direction:column;gap:2px;background:var(--surface);
    border-bottom:1px solid var(--outline);padding:12px var(--gutter) 20px;
    box-shadow:var(--e2);
  }
  .nav.is-open{display:flex}
  .top{position:relative}

  .hero{padding-block:48px 56px}
  .hero h1{font-size:calc(36px * var(--fs))}
  .hero-grid,.support-in,.award-grid,.about-grid{grid-template-columns:1fr;gap:34px}
  .dirs,.news,.gal,.facts{grid-template-columns:1fr}
  .sec-head--row{flex-direction:column;align-items:flex-start;gap:16px}
  .hero-cta .btn,.support-act .btn{flex:1 1 100%}
  .h2-lg,.sec-head h2{font-size:calc(28px * var(--fs))}
}

/* Phones: let the brand text wrap and shrink so the switcher and burger stay on screen */
@media (max-width:600px){
  .top-in{gap:10px;min-height:72px}
  .brand{flex:1 1 auto;min-width:0;gap:10px}
  .brand-mark{width:36px;height:36px}
  .brand-mark--img{width:auto;height:40px}
  .brand-name{font-size:calc(15px * var(--fs))}
  .brand-sub{font-size:calc(11px * var(--fs))}
  .top-right{gap:4px}
  .top-right .lang{display:none}
  .nav .lang{display:flex;align-self:flex-start;margin-top:12px}
  .nav .lang a{min-height:48px;display:inline-flex;align-items:center;padding-inline:16px}
}

/* ------------------------------------------------------ category / list */
.crumbs{font-size:calc(13px * var(--fs));color:var(--muted);padding-block:22px 0}
.crumbs ol{display:flex;gap:8px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.crumbs li+li::before{content:"›";opacity:var(--text-opacity,.5);margin-right:8px}
.crumbs a{text-decoration:none}
.crumbs span{color:var(--muted)} /* current page: full --muted, faded it fell below 4.5:1 */
.crumbs strong{font-weight:500}

.cat-head{padding-block:28px 32px;max-width:760px}
.cat-head h1{font-size:calc(44px * var(--fs));line-height:1.1;margin-bottom:16px}
.cat-head p{font-size:calc(18px * var(--fs));color:var(--muted);margin:0}

.filters{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:36px;border-bottom:1px solid var(--outline);margin-bottom:40px}
/* 48px min height: tap target rule from the project guide */
.chip{display:inline-flex;align-items:center;min-height:48px;font-size:calc(14px * var(--fs));font-weight:500;padding:9px 16px;border-radius:var(--r-pill);text-decoration:none;color:var(--body);background:var(--surface-alt);border:1px solid transparent}
.chip:hover{border-color:var(--outline)}
.chip[aria-current]{background:var(--primary-container);color:var(--on-primary-container);font-weight:600}
.chip em{font-style:normal;opacity:var(--text-opacity,.6);margin-left:6px;font-variant-numeric:tabular-nums}

.list{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding-bottom:48px}
.card-tag{align-self:flex-start;margin-inline:10px;font-size:calc(12px * var(--fs));font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--secondary);background:var(--secondary-container);padding:3px 10px;border-radius:var(--r-pill)}

.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;padding-bottom:80px}
.pager a,.pager strong{min-width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-pill);text-decoration:none;font-size:calc(15px * var(--fs));font-weight:500;color:var(--body);font-variant-numeric:tabular-nums}
.pager a:hover{background:var(--surface-alt)}
.pager strong{background:var(--primary);color:var(--on-primary);font-weight:600}
.pager .edge{padding-inline:18px;border:1px solid var(--outline)}
.pager .dots{color:var(--muted)}

.empty{background:var(--surface-tonal);border-radius:var(--r-lg);padding:48px;text-align:center;margin-bottom:60px}
.empty h2{font-size:calc(21px * var(--fs));margin-bottom:8px}
.empty p{color:var(--muted);margin:0 auto 18px;max-width:34em}

@media (max-width:900px){
  .cat-head h1{font-size:calc(32px * var(--fs))}
  .list{grid-template-columns:1fr}
  /* Phones: chips scroll sideways instead of wrapping into a tall block */
  .filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:16px;margin-bottom:24px;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
  .chip{flex:none}
  .empty{padding:32px 20px}
}

/* ---------------------------------------------- inner page: head + body */
.phead{padding-block:28px 40px;max-width:760px}
.phead h1{font-size:calc(44px * var(--fs));line-height:1.1;letter-spacing:-.012em;margin-bottom:18px}
.phead .lede{font-size:calc(19px * var(--fs));margin-bottom:0}
.pmeta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;font-size:calc(14px * var(--fs));color:var(--muted);border-top:1px solid var(--outline);padding-top:18px;margin-top:22px}
.pmeta b{color:var(--ink);font-weight:600}
.pmeta .card-tag{margin-inline:0;text-decoration:none}

.plain{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:64px;align-items:start;padding-bottom:88px}
.plain--single{grid-template-columns:minmax(0,1fr)}
.prose{max-width:34em;min-width:0}
.prose h2{font-size:calc(28px * var(--fs));margin:44px 0 14px}
.prose h3{font-size:calc(20px * var(--fs));margin:30px 0 10px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px}
.prose li{margin-bottom:8px}
.prose a{text-decoration:underline;text-underline-offset:2px}
.prose h2[id]{scroll-margin-top:24px}
.aside{position:sticky;top:24px;display:flex;flex-direction:column;gap:18px}
.toc{background:var(--surface-tonal);border-radius:var(--r-lg);padding:22px}
.toc h2{font-family:var(--sans);font-size:calc(13px * var(--fs));font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:calc(14.5px * var(--fs))}
.toc a{text-decoration:none;color:var(--body)}
.toc a:hover{color:var(--primary)}

/* -------------------------------------------------------- body blocks */
.blk{margin-block:38px}
.blk:first-child{margin-top:0}
.blk--rich_text>:first-child{margin-top:0}
.b-figure{margin:0}
.b-figure figcaption{margin-top:10px;font-size:calc(14px * var(--fs));color:var(--muted)}
.b-quote{margin:0;background:var(--secondary-container);border-radius:var(--r-lg);padding:30px 32px}
.b-quote blockquote{margin:0;font-family:var(--serif);font-size:calc(21px * var(--fs));line-height:1.45;color:var(--on-secondary-container)}
.b-quote figcaption{margin-top:16px;font-size:calc(14px * var(--fs));color:var(--on-secondary-container);opacity:var(--text-opacity,.82)}
.b-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.b-stats div{background:var(--surface);border-radius:var(--r-lg);padding:24px;box-shadow:var(--e1)}
.b-stats b{display:block;font-family:var(--serif);font-size:calc(34px * var(--fs));font-weight:500;color:var(--primary);line-height:1;margin-bottom:8px;font-variant-numeric:tabular-nums}
.b-stats span{font-size:calc(14px * var(--fs));color:var(--body)}
.b-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.b-gallery .media{aspect-ratio:1/1;border-radius:var(--r-sm)}
.b-docs{list-style:none;margin:0;padding:24px;background:var(--surface-tonal);border-radius:var(--r-lg)}
.b-docs li{border-top:1px solid var(--outline);margin:0}
.b-docs li:first-child{border-top:0}
.prose .b-docs a{display:flex;align-items:center;gap:12px;min-height:48px;padding:13px 0;text-decoration:none;color:var(--ink);font-weight:500;font-size:calc(15px * var(--fs))}
.b-docs svg{flex:none;color:var(--muted)}
.b-docs em{margin-left:auto;font-style:normal;font-size:calc(12px * var(--fs));color:var(--muted);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.b-cta{background:var(--primary-container);border-radius:var(--r-lg);padding:30px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.prose .b-cta h2{font-size:calc(21px * var(--fs));margin:0 0 6px;color:var(--on-primary-container)}
.b-cta p{color:var(--on-primary-container);opacity:var(--text-opacity,.85);margin:0}
.prose .b-cta .btn{text-decoration:none}
.prose .b-video{display:flex;gap:18px;align-items:center;background:var(--surface-alt);border-radius:var(--r-lg);padding:18px;text-decoration:none}
.b-video .thumb{flex:none;width:150px;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-sm)}
.b-video b{display:block;color:var(--ink);font-size:calc(17px * var(--fs));font-family:var(--serif);font-weight:500;margin-bottom:4px}
.b-video i{font-style:normal;font-size:calc(14px * var(--fs));color:var(--muted)}
.b-div{height:1px;background:var(--outline);border:0;margin:0}

/* Direction cards on the directions index; whole card is the link target */
.dir{position:relative}
.dir h2{font-size:calc(20px * var(--fs));margin-bottom:8px}
.dir-link{color:inherit;text-decoration:none}
.dir-link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.dir .more{position:relative;z-index:1}
.dir:hover .dir-link{color:var(--primary)}
.sec--bottom{padding-bottom:var(--gap-sec)}

@media (max-width:900px){
  .phead h1{font-size:calc(32px * var(--fs))}
  .plain{grid-template-columns:1fr;gap:32px;padding-bottom:56px}
  .aside{position:static;order:-1}
  .b-stats{grid-template-columns:1fr}
  .b-gallery{grid-template-columns:1fr 1fr}
  .prose .b-video{flex-direction:column;align-items:flex-start}
  .b-video .thumb{width:100%}
}

/* ---------------------------------------------------------- gallery */
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.ph{position:relative;display:block;aspect-ratio:1/1;border-radius:var(--r-sm);overflow:hidden;background:var(--surface-tonal);transition:transform .18s ease,box-shadow .18s ease}
.ph[hidden]{display:none}
.ph img{width:100%;height:100%;object-fit:cover}
.ph:hover{transform:scale(1.02);box-shadow:var(--e2);z-index:2}
.photos-more{display:flex;justify-content:center;margin:34px 0 0}
.photos-more[hidden]{display:none}
.template-gallery .wrap{padding-bottom:var(--gap-sec)}

.lb{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:56px 76px;background:color-mix(in srgb,var(--scrim) 94%,transparent)}
.lb[hidden]{display:none}
body.lb-open{overflow:hidden}
.lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:100%}
.lb-img{max-width:min(1200px,100%);max-height:80vh;width:auto;height:auto;border-radius:var(--r-md)}
.lb-cap{color:var(--on-scrim);font-size:calc(14px * var(--fs));text-align:center}
.lb-n{position:absolute;top:22px;left:50%;transform:translateX(-50%);color:var(--on-scrim);font-size:calc(13.5px * var(--fs));letter-spacing:.08em}
.lb button{position:absolute;width:48px;height:48px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:calc(20px * var(--fs));line-height:1;cursor:pointer}
.lb button:hover{background:rgba(255,255,255,.22)}
.lb button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.lb-x{top:16px;right:16px}
.lb-p{left:16px;top:50%;transform:translateY(-50%)}
.lb-nx{right:16px;top:50%;transform:translateY(-50%)}

@media (max-width:900px){
  .photos{grid-template-columns:repeat(3,1fr);gap:6px}
  .lb{padding:64px 12px}
  .lb-p,.lb-nx{top:auto;bottom:16px;transform:none}
}
.filter-note{margin:-16px 0 28px;font-size:calc(15px * var(--fs));color:var(--muted)}

/* ------------------------------------------------------------ form pages */
.template-form .wrap{padding-bottom:var(--gap-sec)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-bottom:34px}
.tile{background:var(--surface);border:1px solid var(--outline);border-radius:var(--r-lg);padding:22px 24px;box-shadow:var(--e1)}
.tile-ic{width:40px;height:40px;border-radius:var(--r-sm);background:var(--primary-container);color:var(--primary);display:grid;place-items:center;font-size:calc(18px * var(--fs));margin-bottom:12px}
.tile h2{font-size:calc(16px * var(--fs));margin-bottom:6px}
.tile a{display:block;font-size:calc(14.5px * var(--fs));color:var(--muted);text-decoration:none}
.tile a:hover{color:var(--primary)}

.cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:36px;align-items:start}
.form-card{background:var(--surface);border:1px solid var(--outline);border-radius:var(--r-lg);padding:34px 36px;box-shadow:var(--e1)}
.form-card>h2{font-size:calc(24px * var(--fs));margin-bottom:6px}
.form-lede{color:var(--muted);font-size:calc(15px * var(--fs));margin:0 0 26px}
.req{color:var(--secondary);margin-left:2px}
.field{margin-bottom:22px}
.field label{display:block;font-size:calc(14px * var(--fs));font-weight:500;color:var(--ink);margin-bottom:7px}
.field .hint{display:block;font-weight:400;font-size:calc(13px * var(--fs));color:var(--muted);margin-top:2px}
.field input:not([type=checkbox]):not([type=radio]),.field select,.field textarea{
  width:100%;min-height:48px;font:calc(16px * var(--fs)) var(--sans);color:var(--ink);background:var(--surface-alt);
  border:1.5px solid var(--outline);border-radius:var(--r-md);padding:12px 15px;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
.field textarea{min-height:140px;resize:vertical;line-height:1.55}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:1}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--primary);outline-offset:1px;background:var(--surface);border-color:var(--primary)}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--secondary);background:var(--secondary-container)}
.msg{display:block;color:var(--secondary);font-size:calc(13.5px * var(--fs));margin-top:7px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.consent{display:flex!important;gap:12px;align-items:flex-start;background:var(--surface-alt);border-radius:var(--r-md);padding:16px 18px;font-size:calc(14px * var(--fs))!important;font-weight:400!important;line-height:1.5;cursor:pointer}
.consent input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--primary);flex:none}
.actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.form-note{font-size:calc(13px * var(--fs));color:var(--muted);max-width:280px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-aside{background:var(--primary-container);border-radius:var(--r-lg);padding:28px 26px;color:var(--on-primary-container)}
.form-aside h2{font-size:calc(19px * var(--fs));margin-bottom:14px;color:var(--on-primary-container)}
.form-aside-text{font-size:calc(14.5px * var(--fs))}
.form-aside-text ul,.form-aside-text ol{margin:0;padding-left:18px}
.form-aside-text li{margin-bottom:9px}
.form-aside-sep{height:1px;background:var(--mint);margin:22px 0}
.form-aside-ct{font-size:calc(14px * var(--fs))}
.form-aside-ct b{display:block;font-family:var(--serif);font-size:calc(15px * var(--fs));font-weight:500;margin-bottom:6px}
.form-aside-ct a,.req-list a{display:block;color:var(--primary);text-decoration:none}
.req-list{margin:0;font-size:calc(14.5px * var(--fs))}
.req-list dt{font-weight:600;margin-top:12px}
.req-list dt:first-child{margin-top:0}
.req-list dd{margin:2px 0 0}
.soc{display:flex;gap:10px;margin-top:18px}
.soc a{width:48px;height:48px;border-radius:50%;background:var(--surface);color:var(--primary);display:grid;place-items:center;text-decoration:none;font-size:calc(14px * var(--fs));font-weight:600;box-shadow:var(--e1)}
.soc a:hover{background:var(--primary);color:var(--on-primary)}

.form-ok{background:var(--surface);border:1px solid var(--outline);border-left:5px solid var(--primary);border-radius:var(--r-lg);padding:34px 36px;box-shadow:var(--e1)}
.form-ok-ic{width:52px;height:52px;border-radius:50%;background:var(--primary-container);color:var(--primary);display:grid;place-items:center;font-size:calc(24px * var(--fs));margin-bottom:16px}
.form-ok h2{font-size:calc(25px * var(--fs));margin-bottom:10px}
.form-ok p{margin:0;color:var(--muted);max-width:520px}

@media (max-width:900px){
  .tiles,.cols,.two{grid-template-columns:1fr}
  .two{gap:0}
  .form-card{padding:24px 20px}
  .form-card .btn{width:100%}
}

/* --------------------------------------------------------------- search */
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.search-toggle{width:48px;height:48px;display:grid;place-items:center;border-radius:var(--r-pill);color:var(--body)}
.search-toggle:hover,.search-toggle[aria-expanded=true]{background:var(--surface-alt);color:var(--primary)}
.search-form{display:flex;gap:10px;align-items:center}
.search-form input{flex:1;min-width:0;min-height:48px;font:calc(16px * var(--fs)) var(--sans);color:var(--ink);background:var(--surface-alt);border:1.5px solid var(--outline);border-radius:var(--r-pill);padding:10px 20px}
.search-form input:focus{outline:2px solid var(--primary);outline-offset:1px;border-color:var(--primary);background:var(--surface)}
.search-form--page{margin-top:22px;max-width:640px}

.search-count{color:var(--muted);margin-bottom:22px}
.search-hits{list-style:none;margin:0 0 40px;padding:0;max-width:760px}
.search-hits li{padding:20px 0;border-top:1px solid var(--outline)}
.search-hits li:first-child{border-top:0;padding-top:0}
.search-hits h2{font-size:calc(21px * var(--fs));margin:4px 0 6px}
.search-hits h2 a{color:var(--ink);text-decoration:none}
.search-hits h2 a:hover{color:var(--primary)}
.search-hits p{color:var(--muted);margin:0;font-size:calc(15px * var(--fs))}
.search-type{font-size:calc(12px * var(--fs));font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.search-page{padding-bottom:var(--gap-sec)}

@media (max-width:900px){
}

/* Header: brand, search, languages and help on top; the menu gets its own row */
.top-in{gap:22px;min-height:76px}
.top-right{margin-left:auto}
/* Same width in every language, so switching languages does not shift the header */
.btn--donate{min-height:48px;min-width:124px;justify-content:center;padding-inline:22px}
.nav-bar{border-top:1px solid var(--outline)}
.nav-in{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter)}
/* Menu sits right, its last item's text ends on the same edge as the top row */
.nav-bar .nav{justify-content:flex-end;margin-right:-12px;padding-block:10px;gap:4px}
.nav a{padding-inline:12px}
@media (max-width:900px){
  .nav-bar{border-top:0}
  .nav-in{padding:0}
  .nav-bar .nav{margin:0;justify-content:flex-start}
}
.nav .btn--donate-drawer{display:none}
@media (max-width:600px){
  .top-right .btn--donate{display:none}
  .nav .btn--donate-drawer{display:inline-flex;align-self:flex-start;margin-bottom:8px;color:var(--on-secondary)}
  .nav .btn--donate-drawer:hover{background:var(--secondary-dark);color:var(--on-secondary)}
}

/* ---------------------------------------------------------- hero slider */
.hero-text[hidden],.hero-slide[hidden]{display:none}
.hero .hero-h{font-family:var(--serif);font-weight:500;color:var(--ink);font-size:calc(50px * var(--fs));line-height:1.08;letter-spacing:-.015em;margin-bottom:22px;text-wrap:balance}
.hero-slides{position:relative}
.hero-video{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;border-radius:var(--r-lg)}
.hero-video img{display:block}
.hero-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;display:grid;place-items:center;font-size:calc(26px * var(--fs));padding-left:5px;background:var(--surface);color:var(--secondary);box-shadow:var(--e2);transition:transform .2s ease}
.hero-video:hover .hero-play{transform:translate(-50%,-50%) scale(1.06)}
iframe.media--hero{width:100%;height:auto;aspect-ratio:4/3;border:0;border-radius:var(--r-lg)}
.hero-controls{display:flex;align-items:center;justify-content:center;gap:2px;margin-top:12px}
.hero-dot,.hero-pause{width:48px;height:48px;display:grid;place-items:center;padding:0;border:0;background:none;cursor:pointer;border-radius:var(--r-pill)}
.hero-dot span{width:10px;height:10px;border-radius:50%;background:var(--dot-off);transition:background .2s ease,transform .2s ease}
.hero-dot:hover span{background:var(--mint)}
.hero-dot[aria-current] span{background:var(--primary);transform:scale(1.25)}
.hero-pause{color:var(--muted);font-size:calc(12px * var(--fs));letter-spacing:-1px}
.hero-pause:hover{background:var(--surface-alt);color:var(--primary)}
@media (max-width:900px){
  .hero .hero-h{font-size:calc(36px * var(--fs))}
}

/* ---------------------------------------------------------- donate page */
.template-donate .wrap{padding-bottom:var(--gap-sec)}
.donate-hero{background:linear-gradient(135deg,var(--secondary-container),var(--primary-container));border-radius:var(--r-lg);padding:40px 44px;margin:16px 0 34px}
.donate-hero h1{font-size:calc(40px * var(--fs));max-width:640px}
.donate-hero p{margin:14px 0 0;font-size:calc(17px * var(--fs));color:var(--body);max-width:640px}
.req-card{background:var(--surface);border:1px solid var(--outline);border-radius:var(--r-lg);padding:30px 34px;box-shadow:var(--e1)}
.req-card>h2{font-size:calc(24px * var(--fs));margin-bottom:4px}
.req-rows{margin:0}
.req-row{display:flex;align-items:flex-start;gap:14px;padding:15px 0;border-top:1px solid var(--outline)}
.req-row:first-child{border-top:0;padding-top:0}
.req-row dt{flex:0 0 160px;font-size:calc(13.5px * var(--fs));color:var(--muted);padding-top:2px}
.req-row dd{flex:1;margin:0;font-size:calc(15.5px * var(--fs));line-height:1.5;min-width:0}
.req-row dd b{font-weight:600;color:var(--ink)}
.req-row--iban dd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:calc(16.5px * var(--fs));letter-spacing:.02em;color:var(--primary-dark)}
.copy-btn{flex:none;min-height:40px;border:1.5px solid var(--outline);background:var(--surface-alt);color:var(--muted);border-radius:var(--r-pill);font:500 calc(12.5px * var(--fs)) var(--sans);padding:6px 14px;cursor:pointer;white-space:nowrap;transition:background .15s ease,color .15s ease,border-color .15s ease}
.copy-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-container)}
.copy-btn.done{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.req-purpose{display:flex;align-items:center;gap:14px;background:var(--secondary-container);border-radius:var(--r-md);padding:16px 18px;margin-top:22px;font-size:calc(14.5px * var(--fs))}
.req-purpose b{color:var(--on-secondary-container)}
.req-purpose .copy-btn{margin-left:auto}
.req-all{margin-top:24px}
.ways{margin-top:44px}
.ways h2{font-size:calc(26px * var(--fs));margin-bottom:18px}
.ways-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.way{background:var(--surface);border:1px solid var(--outline);border-radius:var(--r-lg);padding:24px;box-shadow:var(--e1)}
.way-ic{width:40px;height:40px;border-radius:var(--r-sm);background:var(--secondary-container);color:var(--secondary);display:grid;place-items:center;font-size:calc(18px * var(--fs));margin-bottom:12px}
.way h3{font-size:calc(17px * var(--fs));margin-bottom:7px}
.way p{margin:0 0 12px;font-size:calc(14.5px * var(--fs));color:var(--muted)}
.req-legal{margin-top:34px;background:var(--surface-alt);border-radius:var(--r-md);padding:18px 22px;font-size:calc(13.5px * var(--fs));color:var(--muted);line-height:1.55}
.req-legal p{margin:0}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,16px);background:var(--ink);color:var(--surface);padding:12px 22px;border-radius:var(--r-pill);font-size:calc(14px * var(--fs));box-shadow:var(--e2);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:40}
.toast.on{opacity:1;transform:translate(-50%,0)}
.cols--single{grid-template-columns:minmax(0,820px)}
@media (max-width:900px){
  .donate-hero{padding:24px 20px}
  .donate-hero h1{font-size:calc(28px * var(--fs))}
  .req-card{padding:22px 18px}
  .req-row{flex-wrap:wrap;gap:6px 10px}
  .req-row dt{flex:0 0 100%}
  .req-row--iban dd{font-size:calc(14.5px * var(--fs))}
  .ways-grid{grid-template-columns:1fr}
  .req-all .btn{width:100%}
}

/* ------------------------------------------- news: centred blog-post column */
.post-head,.post-more{max-width:calc(760px + 2 * var(--gutter))}
.post-head .phead{max-width:none}
.plain--post{grid-template-columns:minmax(0,760px);justify-content:center;gap:0;padding-bottom:24px}
.plain--post .prose{max-width:none;font-size:calc(17px * var(--fs));line-height:1.7}
.plain--post .aside{position:static;order:-1;margin-bottom:32px}
.post-more{padding-bottom:var(--gap-sec)}
.post-more h2{font-size:calc(24px * var(--fs));padding-top:32px;border-top:1px solid var(--outline);margin-bottom:8px}
.post-more ul{list-style:none;margin:0 0 20px;padding:0}
.post-more li{display:flex;gap:4px 20px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--outline)}
.post-more time{flex:none;width:130px;font-size:calc(13px * var(--fs));color:var(--muted)}
.post-more li a{font-family:var(--serif);font-size:calc(18px * var(--fs));line-height:1.35;color:var(--ink);text-decoration:none}
.post-more li a:hover{color:var(--primary)}
@media (max-width:600px){
  .post-more li{flex-direction:column}
}

/* Search overlay: the page dims, suggestions list titles only */
.search-overlay{position:fixed;inset:0;z-index:60;background:color-mix(in srgb,var(--scrim) 65%,transparent);padding:12vh var(--gutter) 24px;overflow-y:auto}
.search-overlay[hidden]{display:none}
body.search-open{overflow:hidden}
.search-panel{max-width:720px;margin:0 auto;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--e2);padding:16px}
/* Close sits in the screen's top-right corner, over the dimmed page; solid so it
   stands out and hides the burger underneath */
.search-close{position:fixed;top:16px;right:16px;z-index:61;width:48px;height:48px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--surface);color:var(--ink);box-shadow:var(--e2);cursor:pointer}
.search-close:hover{background:var(--primary-container);color:var(--on-primary-container)}
.search-close:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.search-suggest{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid var(--outline)}
.search-suggest[hidden],.search-hint[hidden]{display:none}
.search-suggest a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;min-height:48px;padding:12px 14px;border-radius:var(--r-md);color:var(--ink);text-decoration:none;font-family:var(--serif);font-size:calc(17px * var(--fs));line-height:1.35}
.search-suggest a small{flex:none;font-family:var(--sans);font-size:calc(12px * var(--fs));color:var(--muted)}
.search-suggest a:hover,.search-suggest a[aria-selected=true]{background:var(--primary-container);color:var(--on-primary-container)}
.search-hint{margin:14px 6px 4px;color:var(--muted);font-size:calc(15px * var(--fs))}
@media (max-width:600px){
  .search-overlay{padding-top:76px}
}

/* ---------------------------------------------- text size + theme tools */
.tools{display:flex;gap:2px}
.tool-btn{width:48px;height:48px;display:grid;place-items:center;padding:0;border:0;border-radius:var(--r-pill);background:none;color:var(--body);cursor:pointer}
.tool-btn:hover{background:var(--surface-alt);color:var(--primary)}
.tool-btn[aria-pressed=true]{background:var(--primary-container);color:var(--on-primary-container)}
.tool-a{font:600 17px/1 var(--sans)}
.tool-a sup{font-size:11px;margin-left:1px}
.ic-sun{display:none}
[data-theme-toggle][aria-pressed=true] .ic-moon{display:none}
[data-theme-toggle][aria-pressed=true] .ic-sun{display:block}
.drawer-tools{display:none}
.hero-pause .ic-play{display:none}
.hero-pause[aria-pressed=true] .ic-play{display:block}
.hero-pause[aria-pressed=true] .ic-pause{display:none}
@media (max-width:600px){
  .top-right .tools{display:none}
  .nav .drawer-tools{display:flex;align-items:center;gap:8px;margin-top:12px}
  .nav .drawer-tools .lang{margin-top:0}
}
/* Photo placeholders stay calm on the dark background */
:root[data-theme="dark"] .slot{background:linear-gradient(145deg,var(--surface-tonal),var(--primary-container))}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]) .slot{background:linear-gradient(145deg,var(--surface-tonal),var(--primary-container))}
}
/* Narrow phones: brand, search and burger share one row; keep the name on two lines */
@media (max-width:400px){
  .brand{gap:8px}
  .brand-mark--img{height:34px}
  .brand-name{font-size:calc(14px * var(--fs))}
  .top-in{gap:6px}
}

/* Photo grids under news and direction text */
.post-photos{max-width:calc(760px + 2 * var(--gutter));padding-bottom:40px}
.post-photos .photos{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.post-photos h2,.dir-photos h2{font-size:calc(24px * var(--fs));margin-bottom:18px}
.prose .photo-block .ph{text-decoration:none}

/* Hero: the slides get the larger share, the text column steps down a size */
@media (min-width:901px){
  .hero{padding-block:56px 64px}
  .hero-grid{grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:48px}
  .hero h1,.hero .hero-h{font-size:calc(42px * var(--fs));margin-bottom:18px}
  .hero .lede{font-size:calc(17px * var(--fs));margin-bottom:26px}
}

/* ------------------------------------------------------------ about page */
.about-top{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:36px;align-items:start;margin-bottom:56px}
.about-top>:only-child{grid-column:1 / -1;max-width:760px}
.about-mission{background:var(--primary-container);color:var(--on-primary-container);border-radius:var(--r-lg);padding:30px 32px}
.about-mission h2{font-size:calc(22px * var(--fs));color:var(--on-primary-container);margin-bottom:12px}
.about-mission p{font-family:var(--serif);font-size:calc(19px * var(--fs));line-height:1.55;margin:0}
.about-facts{background:var(--surface);border:1px solid var(--outline);border-radius:var(--r-lg);padding:26px 28px;box-shadow:var(--e1)}
.about-facts h2{font-size:calc(19px * var(--fs));margin-bottom:12px}
.about-facts dl{margin:0}
.about-facts dl>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding:10px 0;border-top:1px solid var(--outline)}
.about-facts dl>div:first-child{border-top:0}
.about-facts dt{font-size:calc(13.5px * var(--fs));color:var(--muted)}
.about-facts dd{margin:0;color:var(--ink);font-weight:500}
.about-sec{margin-bottom:56px}
.about-sec>h2{font-size:calc(28px * var(--fs));margin-bottom:22px}
.people{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:24px}
.person{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.person img{width:140px;height:140px;border-radius:50%;object-fit:cover;margin-bottom:10px}
.person b{font-family:var(--serif);font-weight:500;font-size:calc(17px * var(--fs));color:var(--ink)}
.person span{font-size:calc(14px * var(--fs));color:var(--muted)}
.about-faq{max-width:760px}
.about-faq details{border-top:1px solid var(--outline)}
.about-faq details:last-of-type{border-bottom:1px solid var(--outline)}
.about-faq summary{cursor:pointer;min-height:48px;padding:14px 0;font-family:var(--serif);font-size:calc(18px * var(--fs));color:var(--ink);list-style-position:outside}
.about-faq summary:hover{color:var(--primary)}
.about-faq-a{padding:0 0 18px;color:var(--body)}
.about-end{height:var(--gap-sec)}
@media (max-width:900px){
  .about-top{grid-template-columns:1fr}
  .about-facts dl>div{grid-template-columns:1fr;gap:2px}
}
/* Trust line fits on one row beside the wider slides */
.trust{font-size:calc(12.5px * var(--fs));gap:9px;padding:9px 16px}

/* ------------------------------------------------------ news cards, v2 */
.news-card{padding:0;gap:0;overflow:hidden;border:1px solid var(--outline);height:100%;
  transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease}
.news-card:hover{transform:translateY(-2px);box-shadow:var(--e2);border-color:transparent}
.news-card:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.news-card-media{aspect-ratio:3/2;overflow:hidden;background:var(--surface-tonal)}
.news-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.news-card:hover .news-card-media img{transform:scale(1.05)}
.news-card-body{display:flex;flex-direction:column;gap:10px;flex:1;padding:20px 22px 22px}
.news-card time{padding:0;font-size:calc(12.5px * var(--fs));font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.news-card h3{padding:0;font-size:calc(19px * var(--fs));line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;transition:color .2s ease}
.news-card p{padding:0;font-size:calc(15px * var(--fs));line-height:1.55;color:var(--muted);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news-card-more{margin-top:auto;padding-top:6px;font-size:calc(14px * var(--fs));font-weight:600;color:var(--primary);display:inline-flex;align-items:center;gap:6px}
.news-card-arrow{display:inline-block;transition:transform .2s ease}
.news-card:hover .news-card-arrow{transform:translateX(4px)}
/* Text-only card (no photo): tonal background, bigger title, more of the intro */
.news-card--text{background:var(--surface-tonal);border-color:transparent}
.news-card--text .news-card-body{padding:30px 26px 24px;gap:14px}
.news-card--text h3{font-size:calc(23px * var(--fs));-webkit-line-clamp:4}
.news-card--text p{font-size:calc(16px * var(--fs));-webkit-line-clamp:8;color:var(--body)}
.list,.news{align-items:stretch}
/* Direction label: section green, not the raspberry reserved for donation actions */
.card-tag{color:var(--on-primary-container);background:var(--primary-container);transition:background .2s ease,color .2s ease}
a.card-tag:hover{background:var(--primary);color:var(--on-primary)}
/* Support band: soft green so it stands out, distinct from the raspberry donate button */
.support{background:var(--primary-container)}
.support .eyebrow{color:var(--on-primary-container)}
.support h2{color:var(--on-primary-container)}
.support p{color:var(--on-primary-container);opacity:var(--text-opacity,.9)}
.consent a{color:var(--primary)}

/* 48×48 tap targets (project rule): visible size unchanged where possible,
   an invisible ::before extends the hit area to 48px around the element */
.lang a,.more,a.card-tag{position:relative}
.lang a::before,.more::before,a.card-tag::before{content:"";position:absolute;left:50%;top:50%;width:max(100%,48px);height:48px;transform:translate(-50%,-50%)}
.nav-bar .nav>a:not(.btn--donate-drawer){min-height:48px;display:inline-flex;align-items:center}
.copy-btn{min-height:48px;padding-inline:16px}
/* Pages without an aside read as one centred column, like news posts:
   breadcrumbs, heading, banner, tiles and the form share one width */
.wrap--narrow{max-width:calc(820px + 2 * var(--gutter))}
.wrap--narrow .cols--single{grid-template-columns:minmax(0,1fr)}
.wrap--narrow .phead{max-width:none}

/* ------------------------------------------------- accordion block */
.b-accordion{display:flex;flex-direction:column;gap:12px}
.b-accordion details{background:var(--surface);border:1px solid var(--outline);border-radius:var(--r-md);box-shadow:var(--e1);transition:box-shadow .2s ease}
.b-accordion details[open]{box-shadow:var(--e2)}
.prose .b-accordion summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:14px 22px;cursor:pointer;list-style:none;font-family:var(--serif);font-size:calc(19px * var(--fs));font-weight:500;color:var(--ink)}
.b-accordion summary::-webkit-details-marker{display:none}
.b-accordion summary:hover{color:var(--primary)}
.b-accordion-ic{flex:none;color:var(--primary);transition:transform .2s ease}
.b-accordion details[open] .b-accordion-ic{transform:rotate(180deg)}
.b-accordion-body{padding:0 22px 20px;border-top:1px solid var(--outline);padding-top:16px}
.b-accordion-body ul,.b-accordion-body ol{margin:0;padding-left:20px}
.b-accordion-body li{margin-bottom:10px}
.b-accordion-body li:last-child{margin-bottom:0}
.b-accordion-body>:first-child{margin-top:0}
/* About page: the opening paragraph may be long — keep it readable */
.template-about .phead .lede{max-width:46em;white-space:pre-line}
/* Full-width body (About page): text and accordions line up with the sections around them */
.plain--wide{grid-template-columns:minmax(0,1fr);gap:0;padding-bottom:56px}
.plain--wide .prose{max-width:none}
.plain--wide .aside{display:none}
/* Wide accordions keep a readable line length inside */
.plain--wide .b-accordion-body>*{max-width:76ch}

/* -------------------------------------------- mobile menu: full screen */
@media (max-width:900px){
  .nav.is-open{position:fixed;top:var(--drawer-top,72px);left:0;right:0;bottom:0;z-index:40;
    overflow-y:auto;overscroll-behavior:contain;gap:0;padding:8px var(--gutter) 32px;
    border-top:1px solid var(--outline);border-bottom:0;box-shadow:none;background:var(--surface)}
  /* Order: menu items first, then the help button, then text size / theme / language */
  .nav.is-open>a:not(.btn--donate-drawer){order:1;min-height:60px;display:flex;align-items:center;
    padding:0 4px;border-radius:0;border-bottom:1px solid var(--outline);
    font-size:calc(18px * var(--fs));font-weight:500;color:var(--ink)}
  .nav.is-open>a:not(.btn--donate-drawer):hover{background:none;color:var(--primary)}
  .nav.is-open>a[aria-current]{background:none;color:var(--primary);font-weight:600;box-shadow:inset 3px 0 0 var(--primary);padding-left:14px}
  .nav.is-open .btn--donate-drawer{order:2;align-self:stretch;justify-content:center;min-height:52px;margin:24px 0 0;font-size:calc(16px * var(--fs))}
  .nav.is-open .drawer-tools{order:3;margin-top:24px;justify-content:center}
  /* Burger turns into a close cross */
  .burger span{transition:transform .2s ease,opacity .2s ease}
  .burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger[aria-expanded=true] span:nth-child(2){opacity:0}
  .burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
/* Tablets too: the bar keeps logo, search and the menu button; the rest lives in the menu */
@media (max-width:900px){
  .top-right .tools,.top-right .lang,.top-right .btn--donate{display:none}
  .nav .btn--donate-drawer{display:inline-flex;color:var(--on-secondary)}
  .nav .btn--donate-drawer:hover{background:var(--secondary-dark);color:var(--on-secondary)}
  .nav .drawer-tools{display:flex;align-items:center;gap:8px}
  .nav .drawer-tools .lang{display:flex;margin-top:0}
}

/* Text size button shows the next action: A+ to enlarge, A− to go back */
.tool-a--down{display:none}
[data-text-toggle][aria-pressed=true] .tool-a--up{display:none}
[data-text-toggle][aria-pressed=true] .tool-a--down{display:inline}

/* Mobile menu close: a larger cross inside a soft circle */
@media (max-width:900px){
  .burger[aria-expanded=true]{background:var(--primary-container);border-radius:50%}
  .burger[aria-expanded=true] span{width:24px;height:2.5px;background:var(--on-primary-container)}
  .burger[aria-expanded=true] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
}

/* Social icons (footer): 48px round targets, white on the dark footer */
.social{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.social a{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;transition:background .2s ease,transform .2s ease}
.social a:hover{background:var(--secondary);transform:translateY(-2px);text-decoration:none}

/* ------------------------------------------------- gallery block: mosaic
   Breaks out of the centred news column to 1100px; on phones it runs edge to
   edge. --scrollbar-safe (set by gallery-wide.js) keeps 50vw from counting the
   scrollbar. Elsewhere (pages with a side column) it stays inside the text. */
.plain--post .gallery-bleed{margin-inline:calc(50% - 50vw + var(--scrollbar-safe,0px))}
.plain--post .gallery-inner{max-width:1100px;margin:0 auto;padding-inline:var(--gutter)}
.gw{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:150px;gap:10px}
.gw-tile{position:relative;display:block;margin:0;padding:0;border:0;overflow:hidden;cursor:pointer;
  border-radius:var(--r-md);background:var(--surface-tonal);grid-column:span 1}
.gw-tile img{width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.gw-tile::after{content:"";position:absolute;inset:0;background:var(--scrim);opacity:0;transition:opacity .25s ease}
.gw-tile:hover img{transform:scale(1.05)}
.gw-tile:hover::after{opacity:.1}
.gw-tile:focus-visible{border-radius:var(--r-md)}
.gw-more{position:absolute;inset:0;z-index:1;display:grid;place-items:center;
  background:color-mix(in srgb,var(--scrim) 62%,transparent);color:#fff;
  font:500 calc(24px * var(--fs)) var(--serif);letter-spacing:.02em}
.gw-more--m{display:none}
/* 1: one wide frame · 2: halves · 3+: big first, the rest around it */
.gw .gw-tile:nth-child(1){grid-column:span 3;grid-row:span 2}
.gw .gw-tile:nth-child(2){grid-column:span 3}
.gw--n1 .gw-tile:nth-child(1){grid-column:span 6;grid-row:span 4}
.gw--n2 .gw-tile:nth-child(2){grid-row:span 2}
.gw--n3 .gw-tile:nth-child(3){grid-column:span 3}
.gw--n4 .gw-tile:nth-child(4){grid-column:span 2}

@media (max-width:820px){
  .gallery-bleed{margin-inline:calc(50% - 50vw + var(--scrollbar-safe,0px))}
  .plain--post .gallery-inner{padding-inline:0}
  .gw{grid-template-columns:repeat(2,1fr);grid-auto-rows:110px;gap:6px}
  .gw-tile,.gw-tile:focus-visible{border-radius:var(--r-sm)}
  .gw-tile:focus-visible{outline-offset:-4px}
  .gw .gw-tile:nth-child(n){grid-column:span 1;grid-row:span 1}
  .gw .gw-tile:nth-child(1){grid-column:span 2;grid-row:span 2}
  .gw .gw-tile:nth-child(5){display:none}
  .gw--n2 .gw-tile:nth-child(2),.gw--n4 .gw-tile:nth-child(4),.gw--n5 .gw-tile:nth-child(4){grid-column:span 2}
  .gw-more--m{display:grid}
  .gw-more--d{display:none}
}
@media (prefers-reduced-motion:reduce){
  .gw-tile:hover img{transform:none}
}
/* Lightbox: horizontal swipes go to gallery-wide.js, pinch-zoom stays */
.lb--gw{touch-action:pinch-zoom}

/* ======================================================== high contrast
   Turned on by the system "increase contrast" setting, or by the header
   button (which also turns it off over the system setting). White page,
   black text and lines, blue underlined links in text; overrides either
   theme. Text pairs: black on white 21:1, link blue #0000EE 9.4:1. */
:root[data-contrast="more"]{
  --primary:#000000;--primary-dark:#1C1B1A;--primary-container:#FFFFFF;--on-primary-container:#000000;--mint:#000000;
  --secondary:#000000;--secondary-dark:#1C1B1A;--secondary-container:#FFFFFF;--on-secondary-container:#000000;
  --ink:#000000;--body:#000000;--muted:#000000;--outline:#000000;
  --surface:#FFFFFF;--surface-alt:#FFFFFF;--surface-tonal:#FFFFFF;
  --on-primary:#FFFFFF;--on-secondary:#FFFFFF;--footer-bg:#000000;--scrim:#000000;--on-scrim:#FFFFFF;
  --foot-text:#FFFFFF;--foot-muted:#FFFFFF;--foot-line:#FFFFFF;
  --link:#0000EE;
  --e1:0 0 0 2px #000000;--e2:0 0 0 3px #000000;
  --ring:inset 0 0 0 2px #000000;
  --sel-bg:#000000;--sel-fg:#FFFFFF;--dot-off:#FFFFFF;--lang-cur-bg:#000000;--lang-cur-fg:#FFFFFF;
  --theme-toggle:none; /* the page is always white here */
  --text-opacity:1;     /* no faded text */
  color-scheme:light;
}
@media (prefers-contrast:more){
  :root:not([data-contrast="normal"]){
    --primary:#000000;--primary-dark:#1C1B1A;--primary-container:#FFFFFF;--on-primary-container:#000000;--mint:#000000;
    --secondary:#000000;--secondary-dark:#1C1B1A;--secondary-container:#FFFFFF;--on-secondary-container:#000000;
    --ink:#000000;--body:#000000;--muted:#000000;--outline:#000000;
    --surface:#FFFFFF;--surface-alt:#FFFFFF;--surface-tonal:#FFFFFF;
    --on-primary:#FFFFFF;--on-secondary:#FFFFFF;--footer-bg:#000000;--scrim:#000000;--on-scrim:#FFFFFF;
    --foot-text:#FFFFFF;--foot-muted:#FFFFFF;--foot-line:#FFFFFF;
    --link:#0000EE;
    --e1:0 0 0 2px #000000;--e2:0 0 0 3px #000000;
    --ring:inset 0 0 0 2px #000000;
    --sel-bg:#000000;--sel-fg:#FFFFFF;--dot-off:#FFFFFF;--lang-cur-bg:#000000;--lang-cur-fg:#FFFFFF;
    --theme-toggle:none;--text-opacity:1;
    color-scheme:light;
  }
}
/* The rules below read the switches above; outside high contrast they
   resolve to exactly what the components already draw */
/* Only class-less links: the ones editors put in text, not buttons or cards */
:where(.prose,.rich,.form-aside-text,.about-faq-a,.b-accordion-body,.consent) a:not([class]){color:var(--link);text-decoration:underline;text-underline-offset:2px}
.voice,.b-quote,.support,.toc,.b-cta,.about-mission,.form-aside,.donate-hero,.empty,.req-purpose,.req-legal,
.chip,.lang,.card-tag,.trust,.b-docs,.prose .b-video,.btn--tonal,.btn--tonal-rose,
.dir-ic,.tile-ic,.way-ic,.form-ok-ic{box-shadow:var(--ring)}
.nav a[aria-current],.chip[aria-current],.tool-btn[aria-pressed=true],
.search-suggest a:hover,.search-suggest a[aria-selected=true]{background:var(--sel-bg);color:var(--sel-fg)}
.lang a[aria-current]{background:var(--lang-cur-bg);color:var(--lang-cur-fg)}
.hero-dot span{box-shadow:var(--ring)}
[data-theme-toggle]{display:var(--theme-toggle)}

/* ===================================================== forced colours
   Windows high-contrast themes drop backgrounds and shadows. Frames come
   back as borders; current and selected items, slider dots and the burger
   are painted in system colours so they stay visible; the logo keeps its
   own colours. */
@media (forced-colors:active){
  .dir,.fact,.card,.b-stats div,.voice,.b-quote,.toc,.b-cta,.about-mission,.about-facts,.form-aside,
  .donate-hero,.empty,.req-purpose,.req-card,.way,.tile,.form-card,.form-ok,.b-accordion details,
  .search-panel,.toast,.trust,.chip,.lang,.card-tag,.lb button,.search-close{border:1px solid CanvasText}
  .nav a[aria-current],.nav.is-open>a[aria-current],.chip[aria-current],.lang a[aria-current],.pager strong,
  .tool-btn[aria-pressed=true],.search-suggest a[aria-selected=true]{
    forced-color-adjust:none;background:Highlight;color:HighlightText}
  .hero-dot span{forced-color-adjust:none;background:Canvas;border:2px solid CanvasText;box-shadow:none}
  .hero-dot[aria-current] span{background:Highlight;border-color:Highlight}
  .burger span,.burger[aria-expanded=true] span{forced-color-adjust:none;background:CanvasText}
  .brand-mark{forced-color-adjust:none}
  :focus-visible{outline-color:Highlight}
}

/* YouTube thumbnail (16:9) inside the 4:3 hero frame: shown whole, so the
   title burnt into it is never cut; the free bands get a blurred copy of it.
   The frame keeps its size, so slides do not jump. */
.hero-video--yt{aspect-ratio:4/3;overflow:hidden;isolation:isolate;background:var(--ink)}
.hero-video--yt::before{content:"";position:absolute;inset:-24px;z-index:-1;
  background:var(--thumb) center/cover no-repeat;filter:blur(22px) brightness(.75)}
.hero-video--yt .media--hero{width:100%;height:100%;aspect-ratio:auto;object-fit:contain;border-radius:0}

/* ======================================================= Ukrainian motif
   Small pieces only: the mark above headings and a corner on news cards,
   in --mint (decoration only). Disappears in Windows forced colours. */
.leaf{width:72px;height:12px;border-radius:0;background:var(--mint);
  -webkit-mask:var(--orn) repeat-x 0 50%/24px 12px;mask:var(--orn) repeat-x 0 50%/24px 12px}

/* One tone for news photos (cards and the photo on top of a news item) */
.news-card-media img,.media--toned{filter:var(--photo-tone)}
:root[data-contrast="more"]{--photo-tone:none}
@media (prefers-contrast:more){:root:not([data-contrast="normal"]){--photo-tone:none}}

/* ============================================================ timeline */
.tl{list-style:none;margin:0;padding:0;position:relative}
.tl::before{content:"";position:absolute;left:126px;top:10px;bottom:10px;width:2px;background:var(--mint)}
.tl-item{display:grid;grid-template-columns:110px minmax(0,1fr);gap:0 40px;padding-bottom:36px;position:relative}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:121px;top:9px;width:12px;height:12px;border-radius:50%;
  background:var(--surface);border:3px solid var(--primary)}
.tl-year{font-family:var(--serif);font-weight:500;font-size:calc(22px * var(--fs));color:var(--primary);
  line-height:1.2;text-align:right;font-variant-numeric:tabular-nums;hyphens:auto}
.prose .tl,.prose .tl-news{padding:0}
.prose .tl-news{margin:14px 0 0}
.prose .tl-news li{margin:0}
.prose .tl-title{margin:0 0 6px;font-size:calc(19px * var(--fs))}
.tl-body p{margin:0;color:var(--body)}
.tl-news{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.prose .tl-news a{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink);
  font-size:calc(13.5px * var(--fs));line-height:1.35}
.tl-news img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-sm);filter:var(--photo-tone)}
.prose .tl-news a:hover span{color:var(--primary);text-decoration:underline}
@media (max-width:600px){
  .tl::before{left:7px}
  .tl-item{grid-template-columns:minmax(0,1fr);padding-left:32px}
  .tl-item::before{left:2px}
  .tl-year{text-align:left;margin-bottom:4px}
  .tl-news{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ============================================================ partners
   Grey until hovered or focused; touch screens show them in colour */
.partners{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:28px 48px}
.partners li{display:flex}
.partners a{display:flex;align-items:center;min-height:48px;padding:4px;border-radius:var(--r-sm)}
.partners img{max-height:64px;width:auto;max-width:180px;object-fit:contain;
  filter:grayscale(1);opacity:.7;transition:filter .2s ease,opacity .2s ease}
.partners a:hover img,.partners a:focus-visible img,.partners li:hover img{filter:none;opacity:1}
@media (hover:none){.partners img{filter:none;opacity:1}}

/* The same mark above every inner page title and the About page's sections */
.phead h1::before,.cat-head h1::before,.donate-hero h1::before,.about-sec>h2::before,.post-more h2::before{
  content:"";display:block;width:72px;height:12px;margin-bottom:18px;background:var(--mint);
  -webkit-mask:var(--orn) repeat-x 0 50%/24px 12px;mask:var(--orn) repeat-x 0 50%/24px 12px}
.about-sec>h2::before,.post-more h2::before{margin-bottom:14px}
/* On the tinted donation banner the mint is too faint: use the darker green */
.donate-hero h1::before{background:var(--primary);opacity:.5}

/* News cards: a small stitched corner, bottom right, away from the photo */
.news-card{position:relative}
.news-card::after{content:"";position:absolute;right:16px;bottom:16px;width:30px;height:30px;pointer-events:none;
  background:var(--mint);-webkit-mask:var(--orn-corner) no-repeat 100% 100%/30px 30px;mask:var(--orn-corner) no-repeat 100% 100%/30px 30px}