/* Storefront and Stories share their navigation and footer frame. */
@font-face{font-family:Andys;src:url('/assets/cc-andys-doodles.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
.nav .logo b,.site-footer .flogo b{font-family:Andys,var(--sans);font-weight:400}
.nav .wrap,.site-footer .wrap{max-width:1320px;padding-inline:40px}
.navlinks a[aria-current]{box-shadow:inset 0 -3px 0 var(--yellow)}
.navrow{height:var(--navh,66px);}
.nav.compact .navrow{height:56px}
.logo img{transition:transform .34s cubic-bezier(.2,1.35,.35,1)}
.nav.compact .logo img{transform:rotate(-6deg)}

.navtoggle{display:none;margin-left:auto;width:42px;height:42px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);flex-direction:column;align-items:center;justify-content:center;gap:4px}
.navtoggle span{display:block;width:17px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s ease-out,opacity .16s}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:860px){
  .navtoggle{display:flex}
  .navlinks{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border-bottom:1.5px solid var(--line);padding:8px 24px 18px;margin-left:0;box-shadow:0 18px 30px -22px rgba(10,10,10,.5)}
  .navlinks[hidden]{display:none}
  .navlinks a:not(.btn){display:block;padding:14px 2px;border-bottom:1px solid var(--line-soft);font-size:13.5px}
  .navlinks .btn{margin-top:14px;width:100%}
}
@media (min-width:861px){
  .navlinks[hidden]{display:flex}
}

@media(max-width:900px){.nav .wrap,.site-footer .wrap{padding-inline:24px}}
@media(prefers-reduced-motion:reduce){.nav .logo img,.navtoggle span{transition:none}}