/* UCSS site styles: shared by every page */
:root{
  color-scheme: light;
  --ground:#929292; --sheet:#fffeff; --banner:#547ead; --rule:#c0c0c0;
  --panel:#f4eee9; --maroon:#830d00; --marker:#e2c06f; --salmon:#ff7d78;
  --title:#0076b9; --link:#007cd5; --ink:#000; --muted:#787979; --soft:#989898;
  --ui: Arial, Helvetica, sans-serif;
  --text: Verdana, Geneva, sans-serif;
  --display: Impact, "Anton", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
}
*{box-sizing:border-box}
body{background:var(--ground);color:var(--ink);font:16px/1.6 var(--text);margin:0}
a{color:var(--link)}
a:focus-visible{outline:2px solid var(--title);outline-offset:2px}
.sheet{max-width:1180px;margin:0 auto;background:var(--sheet);box-shadow:0 0 12px #212121;padding-bottom:28px}

/* banner */
.banner{position:relative;padding-top:29px;margin-bottom:38px}
.bar{background:var(--banner);box-shadow:0 4px 8px rgba(0,0,0,.75);min-height:63px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:6px 16px 6px 130px;color:var(--sheet);font:18px/1.3 var(--ui);text-align:center}
.bar span{display:block;max-width:480px;width:100%}
.bar span+span{border-top:1px solid var(--rule);margin-top:5px;padding-top:5px}
.logo{position:absolute;left:26px;top:13px;width:95px;height:95px}

/* columns */
.cols{display:grid;grid-template-columns:210px minmax(0,1fr) 280px;gap:24px;padding-inline:36px 28px;align-items:start}
.left,.right{min-width:0}

.menu{background:var(--panel);border-radius:4px;box-shadow:0 3px 6px rgba(0,0,0,.35);padding:16px 8px 22px 18px;margin:0;list-style:none;
  font:700 14px/1.3 var(--ui)}
.menu ul{list-style:none;margin:2px 0 4px;padding-left:26px;font-size:12px}
.menu li{margin:7px 0}
.menu ul li{margin:6px 0}
.menu a,.menu span{color:var(--maroon);text-decoration:none}
.menu a:hover{text-decoration:underline}
.menu .here{position:relative}
.menu .here::before{content:"";position:absolute;left:-19px;top:0;width:13px;height:17px;background:var(--marker)}

.donate{display:block;margin:34px 0 0 20px;width:171px}
.donate img{display:block;width:171px;height:auto}
.label{color:var(--salmon);font-weight:700;font-size:14px;margin:14px 0 14px 8px}
.card{color:var(--soft);margin-left:8px;font-size:14px;line-height:1.45}
.card p{margin:0 0 4px}
.card b{display:block}
.news{margin:0 0 0 8px;padding:0;list-style:none;font-size:14px;line-height:1.5}

.center{min-width:0}
h1{font:400 44px/1.15 var(--display);color:var(--title);margin:-14px 0 6px 8px;letter-spacing:.2px;text-wrap:balance}
.frame{background:var(--sheet);padding:8px;border:1px solid #d8d8d8;box-shadow:0 3px 7px rgba(0,0,0,.4);margin-bottom:22px}
.frame img{display:block;width:100%;height:auto;aspect-ratio:469/312;object-fit:cover;background:var(--rule)}
.center p{margin:0 0 16px}
.sig{mix-blend-mode:multiply;display:block;width:230px;height:auto;margin:-6px 0 6px -5px}
.signed{margin-left:8px}
.about{margin:44px 0 0 8px}

.right{padding-top:0;margin-top:-6px}
.branch{margin:0 0 20px;color:var(--muted);font:14px/1.4 var(--ui)}
.branch h2{font:700 14px/1.4 var(--text);color:var(--maroon);margin:0 0 3px}
.branch .who{font:14px/1.4 var(--text);color:var(--soft);margin:0 0 4px}
.branch p{margin:0 0 1px}

/* bottom menu: centred under the middle column (home: between the side columns; inner pages: under the content) */
.foot{margin:40px 130px 0 270px;text-align:center;font:14px var(--ui)}
.cols:not(.inner) ~ .foot{margin-right:332px}
.foot::before{content:"";display:block;height:1px;margin-bottom:16px;background:linear-gradient(90deg,transparent,var(--rule) 15%,var(--rule) 85%,transparent)}
.foot a{color:var(--ink);text-decoration:none}
.foot a:hover{text-decoration:underline}

/* phones and narrow windows: one column, larger text */
@media (max-width:760px){
  body{font-size:16px}
  .banner{margin-bottom:22px}
  .bar{padding-left:96px;font-size:13px;align-items:flex-start;text-align:left}
  .logo{left:10px;top:16px;width:78px;height:78px}
  .cols{grid-template-columns:minmax(0,1fr);padding-inline:16px;gap:26px}
  .center{order:1}.left{order:2}.right{order:3}
  h1{font-size:28px;margin:0 0 8px}
  .menu{font-size:14px;padding:14px 12px 16px 24px}
  .menu ul{font-size:12px}
  .menu li,.menu ul li{margin:10px 0}
  .menu .here::before{left:-22px;top:0}
  .donate{margin-top:22px}
  .news{display:flex;flex-wrap:wrap;gap:6px 16px;line-height:1.6}
  .right{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px 18px;margin-top:0}
  .branch,.branch .who,.branch h2{font-size:13px}
  .about,.signed{margin-left:0}
  .foot{margin:30px 16px 0}
  .cols:not(.inner) ~ .foot{margin-right:16px}
}

/* ---------- inner pages ---------- */
.cols.inner{grid-template-columns:210px minmax(0,780px)}
.content{min-width:0;padding-right:8px}
.page-title{display:flex;align-items:center;gap:48px;font:italic 700 24px/1.3 var(--text);color:var(--maroon);margin:-6px 0 24px}
.page-title::after{content:"";flex:none;width:213px;max-width:40%;height:27px;background:linear-gradient(90deg,#ecd9a6,rgba(236,217,166,0))}
.sec{font:700 18px/1.4 var(--text);color:#5282ad;letter-spacing:.6px;margin:30px 0 12px}
.page-title + .sec{margin-top:0}
.content p{margin:0 0 14px}
.dots{list-style:none;margin:0 0 12px;padding:0}
.dots li{margin:0 0 10px}
.dots li::before{content:"• "}
.wide{display:block;max-width:100%;height:auto}
.soon{font:36px/1.3 var(--ui);text-align:center;margin:150px 0 !important}
.contact-card{font-size:18px;line-height:1.3;margin-left:145px}
.contact-card p{margin:0 0 20px}
.label.pink{color:#eb9495;margin:30px 0 10px 0}
.label.maroon{color:var(--maroon)}
.grey{color:var(--soft)}
.small-caps b{font-size:13px}
.card.dark{color:var(--ink)}
.split{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:24px;align-items:start}
.split-even{grid-template-columns:339px minmax(0,1fr);margin-bottom:16px}
.split img{display:block;max-width:100%;height:auto}
.side{min-width:0}
.side img{margin-bottom:16px}
.pu-cover{margin:0 0 0 60px}
.pu-cover figcaption{text-align:center;margin-top:8px}
.pu-letter{margin:28px 0 0 62px}
.t-center{text-align:center}
.lead{font:28px/1.3 var(--ui);margin:0 0 18px !important}
.gallery{max-width:652px;margin:0 0 30px}
.gallery-main{display:block;width:100%;aspect-ratio:652/368;object-fit:contain;background:#000}
.gallery-thumbs{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;background:#000;padding:4px 0 8px}
.thumb{padding:0;border:2px solid transparent;background:none;cursor:pointer;height:44px}
.thumb img{display:block;height:40px;width:auto}
.thumb[aria-current="true"]{border-color:#fff}
.letter h3{font:700 16px var(--text);margin:26px 0 12px}
.oyh-note{color:#004c7e;margin:20px 0 0 8px;font-size:14px}
.oyh-note p{margin:0 0 14px}
.qr{display:block;margin:20px 0 0 61px}
.since{background:#2a6fb5;color:#fefefe;font:700 22px/1.3 var(--text);padding:24px 16px;margin:24px 0 0 8px;text-align:center}
.mtl-text{font-size:19px;margin:24px 50px 0 !important}
.news-head{font:700 21px/1.4 var(--ui);color:#212529;margin:0 0 16px}
.contact-form{display:grid;gap:4px;max-width:440px}
.contact-form label{margin-top:10px}
.contact-form input,.contact-form textarea{font:inherit;padding:6px;border:1px solid #bbb;width:100%}
.contact-form button{justify-self:center;margin-top:12px;font:inherit;padding:4px 16px}
.menu a[aria-current]{position:relative}
.menu ul a.here::before{left:-45px}

@media (max-width:760px){
  .cols.inner{grid-template-columns:minmax(0,1fr)}
  .content{order:1;padding-right:0}
  .page-title{font-size:20px;margin-top:0}
  .page-title::after{display:none}
  .split,.split-even{grid-template-columns:minmax(0,1fr)}
  .contact-card,.pu-cover,.pu-letter{margin-left:0}
  .soon{margin:60px 0 !important}
  .mtl-text{margin:20px 0 0 !important}
}

/* middle column: text justified (left and right edges) on wider screens */
@media (min-width:761px){
  main.center p, main.center .about p,
  .content p, .content .dots li{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
  .content p.t-center, .content p.soon, .content .lead, .pu-cover figcaption{text-align:center}
  .content .side p{text-align:left;hyphens:manual}
}

/* home page slideshow */
.slideshow .slides{position:relative;aspect-ratio:469/312;background:var(--rule);overflow:hidden}
.slideshow .slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease}
.slideshow .slide.is-on{opacity:1}
.slideshow .dots{display:flex;justify-content:center;gap:8px;padding-top:8px}
.slideshow .dot{width:12px;height:12px;padding:0;border-radius:50%;border:1px solid #8a8a8a;background:#fff;cursor:pointer}
.slideshow .dot.is-on{background:var(--title);border-color:var(--title)}
.slideshow .dot:focus-visible{outline:2px solid var(--title);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.slideshow .slide{transition:none}}

/* home page headline: centred in the middle column */
main.center h1{text-align:center;margin-left:0;margin-right:0}

/* embedded YouTube video: full column width, 16:9 */
.video{margin:0 0 28px}
.video iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;background:#000}

/* kenburns: Ken Burns effect: the visible slide slowly zooms and drifts */
@keyframes kb-a{from{transform:scale(1) translate(0,0)}to{transform:scale(1.15) translate(-3%,-2%)}}
@keyframes kb-b{from{transform:scale(1.15) translate(3%,2%)}to{transform:scale(1) translate(0,0)}}
@keyframes kb-c{from{transform:scale(1.05) translate(-2%,0)}to{transform:scale(1.18) translate(3%,-2%)}}
@keyframes kb-d{from{transform:scale(1.18) translate(0,3%)}to{transform:scale(1.04) translate(0,-2%)}}
.slideshow .slide{transform-origin:center;will-change:transform,opacity}
.slideshow .slide.is-on,.slideshow .slide.is-leaving{animation:var(--kb) 7s ease-out forwards}
.slideshow .slide:nth-child(4n+1){--kb:kb-a}
.slideshow .slide:nth-child(4n+2){--kb:kb-b}
.slideshow .slide:nth-child(4n+3){--kb:kb-c}
.slideshow .slide:nth-child(4n+4){--kb:kb-d}
@media (prefers-reduced-motion:reduce){.slideshow .slide.is-on,.slideshow .slide.is-leaving{animation:none}}

/* newsletter covers (Pomich Ukraini Fund page) */
.covers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px}
.covers a{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--link);font:700 14px var(--ui)}
.covers img{display:block;width:100%;height:auto;margin:0;border:1px solid #d8d8d8;box-shadow:0 2px 5px rgba(0,0,0,.3);transition:transform .2s ease,box-shadow .2s ease}
.covers a:hover img{transform:translateY(-3px);box-shadow:0 6px 12px rgba(0,0,0,.35)}
.covers a:hover span{text-decoration:underline}
@media (max-width:760px){.covers{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}}

/* main newsletter cover on the Pomich Ukraini Fund page: same frame and hover lift as the small covers */
.pu-cover a{display:block}
.pu-cover a img{display:block;max-width:100%;height:auto;padding:10px;background:#fff;border:1px solid #d8d8d8;box-shadow:0 3px 8px rgba(0,0,0,.3);transition:transform .25s ease,box-shadow .25s ease}
.pu-cover a:hover img{transform:translateY(-5px);box-shadow:0 10px 20px rgba(0,0,0,.35)}
@media (prefers-reduced-motion:reduce){.pu-cover a img,.covers img{transition:none}}

/* Montreal branch services (text version of the former poster) */
.mtl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:28px 36px;color:#2c5f96;margin-bottom:8px}
.mtl h2{font:700 26px/1.3 var(--text);text-align:center;margin:20px 0 24px}
.mtl .arrows{list-style:none;margin:0;padding:0;font-size:19px;line-height:1.4}
.mtl .arrows li{position:relative;padding-left:34px;margin:0 0 22px}
.mtl .arrows li::before{content:"➢";position:absolute;left:0;top:0}
.mtl-hands{display:block;width:72%;max-width:300px;height:auto;margin:10px auto 0}
.mtl-svc{margin:0 0 22px}
.mtl-svc h3{display:flex;align-items:center;gap:14px;font:700 19px/1.35 var(--text);margin:0 0 6px}
.mtl-svc h3 img{flex:none;width:20px;height:20px}
.mtl-svc ul{margin:0;padding-left:52px;font-size:17px;line-height:1.45}
.mtl-svc li{margin:0 0 4px}
.content .mtl p,.content .mtl li{text-align:left}
@media (max-width:760px){.mtl{grid-template-columns:minmax(0,1fr)}.mtl-svc ul{padding-left:46px}}

.nowrap{white-space:nowrap}

/* French version of the Montreal services, below the Ukrainian one */
.mtl-fr{margin-top:48px;padding-top:36px;border-top:1px solid var(--rule)}
.mtl-org{font:700 26px/1.3 var(--ui);color:#2c5f96;text-align:center;text-transform:uppercase;letter-spacing:.5px;margin:0 0 4px}

/* Montreal: services column starts level with the volunteers heading; French banner under the picture */
.mtl-list{padding-top:28px}
.since-fr{margin:24px auto 0;max-width:300px}
@media (max-width:760px){.mtl-list{padding-top:0}}
.content .mtl .since{text-align:center}