:root{
  --mark-h:120px; --mark-num:120;         
  --mark-m:76px;  --mark-num-m:76;        
  --hdr-top:calc(var(--mark-h) + 35px);   
  --hdr-rest:80px;                        
  --hdr-alpha:.22;                        
  --glow-alpha:.66;                       
}

.js header#site-header{position:fixed;top:0;left:0;right:0;z-index:60}
.js header#site-header:not(.is-float){background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom-color:transparent;box-shadow:none}
.brand{position:relative}
.brand .brand-mark{display:none}
.js .brand .brand-mark{display:block;position:absolute;left:.84px;top:.84px;width:auto;max-width:none;
  transform-origin:0 0;transition:transform .35s ease,opacity .3s ease}
.js .brand .brand-full{transition:opacity .35s ease}
.js header#site-header:not(.is-float) .brand .brand-full{opacity:0}
.js header#site-header.is-float .brand .brand-mark{opacity:0;pointer-events:none}

.js header#site-header:not(.is-float) .brand:focus-visible{outline:none}
.js header#site-header:not(.is-float) .brand:focus-visible .brand-mark{outline:3px solid var(--gold);outline-offset:4px;border-radius:14px}

.js header#site-header::before{content:'';position:absolute;left:0;right:0;top:0;height:var(--hdr-top);z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(250,246,238,var(--hdr-alpha)) 0%,rgba(250,246,238,0) 100%);transition:opacity .35s ease}
.js header#site-header::after{content:'';position:absolute;top:0;left:50%;height:calc(var(--hdr-top) + 40px);
  width:calc(min(1240px, 100vw) + 200px);max-width:100%;   transform:translateX(-50%);z-index:-1;pointer-events:none;
  background:rgba(250,246,238,var(--glow-alpha));transition:opacity .35s ease;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 110px,#000 calc(100% - 110px),transparent 100%),linear-gradient(to bottom,#000 0,#000 72%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 110px,#000 calc(100% - 110px),transparent 100%),linear-gradient(to bottom,#000 0,#000 72%,transparent 100%);
  mask-composite:intersect}
.js header#site-header.is-float::before,.js header#site-header.is-float::after{opacity:0}

@media (min-width:701px){
  
  .js header#site-header{padding:10px 0 11px}
  .js header#site-header .nav-inner{max-width:min(1080px,calc(100% - 2 * var(--gut)));margin:0 auto;padding:8px 10px 8px 24px;
    border:1px solid transparent;border-radius:999px}
  .js header#site-header:not(.is-float) .nav-inner{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;
    border-color:transparent;box-shadow:none}
  .js header#site-header .brand img.brand-full{height:40px}
  .js header#site-header nav .btn-donate{padding:10px 22px}
  .js .brand .brand-mark{height:var(--mark-h)}
  
  .js header#site-header.is-float .brand .brand-mark{transform:scale(calc(38.3 / var(--mark-num)))}

  .js header#site-header{--wrapw:min(1240px,100vw);--pillw:min(1080px,calc(100vw - 2 * var(--gut)));
    --dx-l:calc((var(--wrapw) - var(--pillw)) / 2 - 7px);--dx-r:calc((var(--wrapw) - var(--pillw)) / 2 - 21px)}
  .js header#site-header .brand,.js header#site-header nav.primary{transition:transform .35s ease}
  .js header#site-header:not(.is-float) .brand{transform:translateX(calc(-1 * var(--dx-l)))}
  .js header#site-header:not(.is-float) nav.primary{transform:translate(var(--dx-r),calc(var(--mark-h) / 2 - 20px))}

  .js .page-hero{min-height:calc(clamp(600px,80vh,760px) + var(--hdr-rest))}
  .js .page-hero .ph-inner{padding-top:calc(var(--hdr-top) + 44px)}
  .js .page-hero .ph-inner::before{top:var(--hdr-top)}   
  .js .hero{min-height:calc(clamp(820px,100vh,1000px) + var(--hdr-rest))}
}
@media (min-width:701px) and (max-width:980px){
  .js .hero{min-height:calc(82vh + var(--hdr-rest))}   
}

@media (max-width:700px){
  :root{--hdr-top:calc(var(--mark-m) + 22px);--head-h:64px}
  .js .brand .brand-mark{height:var(--mark-m)}
  .js header#site-header.is-float .brand .brand-mark{transform:scale(calc(32.6 / var(--mark-num-m)))}
  .js header#site-header .menu-btn{transition:transform .35s ease}
  .js header#site-header:not(.is-float) .menu-btn{transform:translateY(calc(var(--mark-m) / 2 - 17px))}
  .js header#site-header.is-float{
    background:rgba(250,246,238,.92);
    -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
    border-bottom:1px solid rgba(201,154,46,.35);box-shadow:0 6px 18px rgba(46,36,51,.08)}
  .js .subnav{top:var(--head-h)}
  .js header#site-header::after{width:100%;
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 72%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 72%,transparent 100%)}
  
  .js .page-hero .ph-photo{height:calc(var(--ph-m-h,300px) + var(--hdr-top))}
  .js .page-hero .ph-scrim{height:calc(var(--ph-m-h,300px) + var(--hdr-top) + 2px)}
  .js .page-hero .ph-inner{padding-top:calc(var(--ph-m-h,300px) + var(--hdr-top) - 22px)}
}

@media (prefers-reduced-motion:reduce){
  .js .brand .brand-mark,.js .brand .brand-full,.js header#site-header .brand,.js header#site-header nav.primary,.js header#site-header .menu-btn,
  .js header#site-header::before,.js header#site-header::after{transition:none}
}