@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
    types: cross-fade;
  }
}

html:active-view-transition-type(cross-fade)::view-transition-old(root) {
  animation: fade-out 1s ease-in-out forwards;
}

html:active-view-transition-type(cross-fade)::view-transition-new(root) {
  animation: fade-in 1s ease-in-out forwards;
}

@keyframes fade-out{
  0%{
    filter: blur(0px)saturate(1)brightness(1);
    opacity: 1;
  }
  100%{
    filter: blur(21px)saturate(1)brightness(1);
    opacity: 0;
  }
}

@keyframes fade-in{
  0%{
    filter: blur(21px)saturate(1)brightness(1);
    opacity: 0;
  }
  100%{
    filter: blur(0px)saturate(1)brightness(1);
    opacity: 1;
  }
}

:root{
    --base-unit:clamp(1rem, 0.35vw + 0.8rem, 1.382rem);
    --width:min(100vw - 2em,var(--ch-unit)*62);
    --img-height:calc(min(100vw - 2em,var(--ch-unit)*55)*.62);
    --margin-inline:calc((100vw - var(--width))/2);
    --margin-inline:max(1em,(100vw - var(--width))/2 );
    --h4:calc(var(--base-unit)*1.236);
    --h3:calc(var(--base-unit)*1.382);
    --h2:calc(var(--base-unit)*1.618);
    --h1:calc(var(--base-unit)*2.618);
}

@media(min-width:calc(100ch + 2em)){
    :root{
        --h4:calc(var(--base-unit)*1.382);
        --h3:calc(var(--base-unit)*1.618);
        --h2:calc(var(--base-unit)*2.618);
        --h1:calc(var(--base-unit)*4.236);
    }
}

@media(min-width:120em){
    :root{--width:min(50vw,var(--ch-unit)*62)}
}

@font-face {
    font-family: bolonat-hand;
    font-weight: 400;
    font-display: swap;
    font-style: normal;
    font-named-instance: 'Regular';
    src: url('https://s3.theark.cloud/sp-comm-arkfiles/website/images/2026/crp/font/bolonat-hand.woff2') format('woff2');
}

:where(.space>*+*){margin-top: 1lh}      
main>*>*{margin-inline: 0}
header,.space{margin-inline:0}

hgroup:has(h2){
    margin-inline: auto;
    width: var(--width);
    text-align: center
}

h1,.h1,h2{
    font-family: bolonat-hand;
    font-weight: 400;
    line-height: .8;
}

h4,.h4{font-size: var(--h4)}

section{
    border:none;
    background:none
}
            
p{
    font-family: merriweather,georgia;
    line-height: 1.75;
    font-weight: 377;
    text-wrap:pretty
}

p.small{font-weight: 400}

.space>p{
    width: var(--width);
    margin-inline:auto;
}

p.h4,
p.h3{
    width: min(100% - 2em,var(--ch-unit)*100);
    font-weight: 233;
    line-height: 1.618;
    font-stretch: 89%;
    color:#555;
}

blockquote p.h3{
    width: 100%;
    margin-block: 0;
}

:is(p.h3,p.h4) :is(b,strong){
    color: #000;
    font-weight: 610
}

p.h3{margin-block: 2lh}

p.h3.subhead{
    font-weight: 377;
    margin-block: 0 2lh!important;
    color:#000}

p.h2{
    font-weight: 377;
    font-stretch: 89%;
}
        
p i{color: #d00}

blockquote{
    width: var(--width);
    margin: 3lh auto;
    border: none;
    padding: 0
}

blockquote p{  
    text-align: center;
    text-wrap:balance
}

blockquote p.h2{
    font-weight: 377;
    line-height: 1.382
}

figcaption{text-wrap:pretty}

.grid.two{
    gap:1lh 3ch;
    width: min(100% - 2em,100ch);
    margin-inline: auto
}

.grid.two p{width: 100%}

.grid.two p.h3{
    text-align: left;
    margin-block:1lh 0
}

@media(min-width:62ch){
    .subhead{margin-top: 2.618em}
    blockquote{width: min(100% - 2em,var(--ch-unit)*100)}
    
    p.h3{
        text-align: center;
        text-wrap:balance
    }
}

.space>figure[class=""]{
    width: var(--width);
    margin-inline:auto;
}

.donationItem{margin:1em auto .618em!important}
.no-sda *{animation:none!important}