/* Main-site header.
   Closed state after Solidroad: a floating white bar with rounded corners, menu on the left,
   logo in the middle, Junior and Donate on the right. It sticks to the top on scroll.
   Open state after dearcc.org: hovering or clicking a menu item drops a big panel with an
   intro and photo tiles, and the page dims behind it. Phones get a floating menu card. */
.site-head{position:sticky;top:0;z-index:40;padding:14px clamp(16px,calc(5vw - 14px),82px) 0;pointer-events:none}
.site-head .bar,.site-head .mega,.site-head .sheet{pointer-events:auto}
.site-head .bar{max-width:1892px;margin:0 auto;background:#fff;border-radius:18px;box-shadow:0 0 0 1px var(--rule),0 14px 32px -20px rgba(43,15,48,.5);padding:8px 10px 8px 14px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.site-head nav{grid-column:1;grid-row:1}
.site-head .logo{grid-column:2;grid-row:1}
.site-head .logo img{width:96px;mix-blend-mode:multiply;display:block}
.site-head .right{grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;gap:10px}
.site-head .right .btn{min-height:42px;border-radius:10px;padding:0 18px;font-size:15px}
.site-head .menu{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.site-head .menu>li>button,.site-head .menu>li>a{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 14px;border:0;border-radius:10px;background:none;font-family:var(--body);font-size:15px;font-weight:600;color:var(--plum);text-decoration:none;cursor:pointer;transition:background .15s,color .15s}
.site-head .menu>li>button:hover,.site-head .menu>li>a:hover,.site-head .menu>li>button[aria-expanded="true"]{background:var(--lilac)}
.site-head .menu .is-current{color:var(--mag)}
.site-head .chev{width:9px;height:9px;transition:transform .2s}
.site-head button[aria-expanded="true"] .chev{transform:rotate(180deg)}

/* panel: a card under the bar, same width and corners */
.mega{position:absolute;top:calc(100% + 8px);left:50%;width:min(1240px,calc(100% - 32px));background:#fff;border-radius:18px;box-shadow:0 0 0 1px var(--rule),0 30px 50px -28px rgba(43,15,48,.5);opacity:0;visibility:hidden;transform:translate(-50%,-6px);transition:opacity .18s,transform .18s,visibility 0s .18s}
.mega::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.mega.open{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .18s,transform .18s}
.mega .inner{padding:28px 28px 30px;display:grid;grid-template-columns:230px 1fr;gap:32px}
.mega .intro{padding-right:28px;border-right:1px solid var(--rule)}
.mega .intro .eyebrow{font-size:12px}
.mega .intro strong{display:block;font-family:var(--display);font-weight:400;font-size:26px;line-height:1.1;margin:10px 0 10px;color:var(--plum)}
.mega .intro p{font-size:15px;color:var(--plum-soft);line-height:1.5}
.mega .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.mega .tiles.three{grid-template-columns:repeat(3,1fr)}
.mega .tile{display:grid;gap:10px;align-content:start;text-decoration:none;color:var(--plum)}
.mega .tile .pic{aspect-ratio:4/3;overflow:hidden;background:var(--lilac);border-radius:12px}
.mega .tile img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;transition:transform .3s}
.mega .tile:hover img{transform:scale(1.04)}
.mega .tile b{font-family:var(--display);font-weight:400;font-size:20px;line-height:1.15}
.mega .tile:hover b{color:var(--mag)}
.mega .tile span{font-size:14.5px;line-height:1.45;color:var(--plum-soft)}
.mega .tile small{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--violet)}
.dim{position:fixed;inset:0;background:rgba(43,15,48,.38);z-index:30;opacity:0;visibility:hidden;transition:opacity .18s,visibility 0s .18s}
.dim.on{opacity:1;visibility:visible;transition:opacity .18s}

/* phone menu: a floating card under the bar */
.burger{display:none;width:44px;height:44px;border:0;border-radius:10px;background:transparent;align-items:center;justify-content:center;cursor:pointer}
.burger:hover{background:var(--lilac)}
.burger span,.burger span::before,.burger span::after{display:block;width:20px;height:2px;background:var(--plum);position:relative;content:"";transition:transform .2s}
.burger span::before{position:absolute;top:-6px}.burger span::after{position:absolute;top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
.sheet{display:none}

@media (max-width:1060px){
  .site-head .menu,.mega{display:none}
  .site-head .bar{grid-template-columns:auto 1fr;padding:8px 8px 8px 16px}
  .site-head .logo{grid-column:1}
  .site-head .right{grid-column:2}
  .burger{display:inline-flex}
  .site-head .right .btn.primary,.site-head .right .junior-btn{display:none}
  .sheet{position:fixed;left:16px;right:16px;top:calc(var(--head-h,80px) + 8px);max-height:calc(100vh - var(--head-h,80px) - 24px);z-index:41;background:#fff;border-radius:18px;box-shadow:0 0 0 1px var(--rule),0 30px 50px -24px rgba(43,15,48,.55);overflow-y:auto;padding:4px 20px 20px}
  .sheet.open{display:block}
  .dim.on{display:block}
  .sheet details{border-bottom:1px solid var(--rule)}
  .sheet summary{list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:58px;font-family:var(--body);font-weight:600;font-size:17px;cursor:pointer}
  .sheet summary::-webkit-details-marker{display:none}
  .sheet summary .chev{width:11px;height:11px;transition:transform .2s}
  .sheet details[open] summary .chev{transform:rotate(180deg)}
  .sheet .home-link{display:flex;align-items:center;min-height:58px;border-bottom:1px solid var(--rule);font-family:var(--body);font-weight:600;font-size:17px;color:var(--plum);text-decoration:none}
  .sheet .home-link.is-current{color:var(--mag)}
  .sheet .links{display:grid;gap:2px;padding:0 0 14px}
  .sheet .links a{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center;padding:7px 0;text-decoration:none;color:var(--plum)}
  .sheet .links img{width:64px;height:48px;object-fit:cover;object-position:50% 25%;border-radius:8px}
  .sheet .links b{display:block;font-weight:700;font-size:15.5px}
  .sheet .links span{font-size:13.5px;color:var(--plum-soft);line-height:1.35}
  .sheet .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
  .sheet .actions .btn{border-radius:10px;min-height:46px}
  body.menu-open{overflow:hidden}
}
@media (max-width:640px){
  .site-head{padding:10px 10px 0}
  .site-head .logo img{width:74px}
  .sheet{left:10px;right:10px}
}
@media (prefers-reduced-motion:reduce){.mega,.dim,.mega .tile img,.chev,.burger span::before,.burger span::after{transition:none!important}}

/* Footer, after the Sessions footer (footer.design/sites/sessions): big wordmark and tagline,
   newsletter on the left, three divided link columns on the right, slim bottom bar. */
.site-foot{background:var(--plum);color:#D7C5DB;font-family:var(--body);border-top:6px solid var(--mag)}
.site-foot .f-wrap{max-width:1920px;margin:0 auto;padding:72px clamp(20px,5vw,96px) 28px}
.site-foot .f-top{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.22)}
.site-foot .mark{font-family:var(--display);font-size:clamp(40px,5vw,76px);line-height:.95;color:#fff;letter-spacing:-.02em;text-decoration:none}
.site-foot .tag{justify-self:end;text-align:right;font-family:var(--body);font-weight:800;font-size:clamp(20px,2.2vw,30px);line-height:1.15;letter-spacing:.01em;text-transform:uppercase;color:#FF8CCB;max-width:16em}
.site-foot .f-mid{display:grid;grid-template-columns:1fr 1.25fr;gap:56px;padding:40px 0 56px;border-bottom:1px solid rgba(255,255,255,.22)}
.site-foot .news label{display:block;font-size:14px;font-weight:700;color:#fff;margin-bottom:12px}
.site-foot .news .field{display:flex;max-width:400px;background:#fff;border:1.5px solid #fff}
.site-foot .news input{flex:1;min-width:0;font:inherit;font-size:16px;min-height:50px;padding:0 14px;border:0;background:transparent;color:var(--plum)}
.site-foot .news button{width:50px;border:0;background:var(--mag);color:#fff;font-size:20px;cursor:pointer}
.site-foot .news button:hover{background:var(--mag-deep)}
.site-foot .news p{font-size:13px;margin-top:10px;max-width:400px}
.site-foot .news .ok{color:#FF8CCB;font-weight:700}
.site-foot .cols3{display:grid;grid-template-columns:repeat(3,1fr)}
.site-foot .cols3>div{display:grid;gap:10px;align-content:start;padding:0 24px}
.site-foot .cols3>div+div{border-left:1px solid rgba(255,255,255,.22)}
.site-foot .cols3 h4{margin:0 0 6px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#FF8CCB}
.site-foot .cols3 a{color:#fff;text-decoration:none;font-size:14px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1.3}
.site-foot .cols3 a:hover{color:#FF8CCB}
.site-foot .f-bot{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;padding-top:24px;font-size:13px}
.site-foot .f-bot .soc{display:flex;gap:10px}
.site-foot .f-bot .soc a{width:36px;height:36px;border-radius:50%;background:#fff;color:var(--plum);display:grid;place-items:center}
.site-foot .f-bot .soc a:hover{background:#FF8CCB}
.site-foot .f-bot .soc svg{width:16px;height:16px}
.site-foot .f-bot .cred{justify-self:end;text-align:right}
.site-foot .f-bot .legal{display:flex;align-items:center;gap:14px}
.site-foot .candid{flex:none;display:block;border-radius:4px}
.site-foot .candid img{display:block;width:112px;height:112px}
.site-foot .candid:focus-visible{outline:3px solid #FF8CCB;outline-offset:3px}
@media (max-width:1060px){
  .site-foot .f-top,.site-foot .f-mid{grid-template-columns:1fr}
  .site-foot .tag{justify-self:start;text-align:left}
}
@media (max-width:640px){
  .site-foot .f-wrap{padding:56px 20px 24px}
  .site-foot .cols3{grid-template-columns:1fr 1fr;gap:28px 0}
  .site-foot .cols3>div{padding:0 16px 0 0}
  .site-foot .cols3>div+div{border-left:0}
  .site-foot .cols3>div:nth-child(2){padding-left:16px;border-left:1px solid rgba(255,255,255,.22)}
  .site-foot .f-bot{grid-template-columns:1fr;justify-items:start}
  .site-foot .f-bot .cred{justify-self:start;text-align:left}
}