@font-face{
  font-family: 'Recoleta';
  src: url('/img/brand/fonts/recoleta-semibold-webfont.woff2') format('woff2'),
       url('/img/brand/fonts/recoleta-semibold-webfont.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root{
  --grape:#d8a4e9;
  --cream:#faf8f2;
  --bubblegum:#ff8ac0;
  --honey:#ffd13a;
  --sky:#62c6ff;
  --outline:#5a2675;
  --ink-soft:#8a5fa5;
  --scallop: 40px;
  --stripe-w: 80px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden}

body{
  font-family:'Sniglet',sans-serif;
  font-weight:400;
  background:var(--cream);
  color:var(--outline);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;
  opacity:0;
  transition: opacity .25s ease;
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><circle cx='14' cy='14' r='9' fill='%23ff8ac0' stroke='%235a2675' stroke-width='2.5'/><circle cx='11' cy='11' r='2.5' fill='%23faf8f2'/></svg>") 14 14, auto;
}
body.ready{opacity:1}

a{
  color:inherit;
  text-decoration:none;
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M16 4 L19 13 L28 13 L21 19 L24 28 L16 22 L8 28 L11 19 L4 13 L13 13 Z' fill='%23ffd13a' stroke='%235a2675' stroke-width='2'/></svg>") 16 16, pointer;
}

body::before{
  content:'';
  position:fixed;inset:0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,209,58,.10), transparent 50%),
    radial-gradient(ellipse at 0% 100%, rgba(216,164,233,.12), transparent 50%);
  pointer-events:none;
  z-index:0;
}

.awning{
  position:sticky;top:0;z-index:100;
  background: transparent;
  padding-bottom: var(--scallop);
}
.awning-body{
  position:relative;
  background: repeating-linear-gradient(
    90deg,
    var(--bubblegum) 0 var(--stripe-w),
    var(--cream)     var(--stripe-w) calc(var(--stripe-w) * 2)
  );
  padding: 16px 6%;
}
.awning-scallops{
  position:absolute;
  left:0;right:0;
  top:100%;
  height: var(--scallop);
  background: repeating-linear-gradient(
    90deg,
    var(--bubblegum) 0 var(--stripe-w),
    var(--cream)     var(--stripe-w) calc(var(--stripe-w) * 2)
  );
  -webkit-mask: radial-gradient(
    circle at calc(var(--scallop)/2) 0,
    black calc(var(--scallop)/2),
    transparent calc(var(--scallop)/2 + 0.5px)
  ) 0 0 / var(--scallop) var(--scallop) repeat-x;
          mask: radial-gradient(
    circle at calc(var(--scallop)/2) 0,
    black calc(var(--scallop)/2),
    transparent calc(var(--scallop)/2 + 0.5px)
  ) 0 0 / var(--scallop) var(--scallop) repeat-x;
}
.awning-outline{
  position:absolute;
  left:0;right:0;
  top:100%;
  height: var(--scallop);
  width:100%;
  pointer-events:none;
  z-index:5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' preserveAspectRatio='none'><path d='M 0 0 A 20 20 0 0 0 40 0' fill='none' stroke='%235a2675' stroke-width='2.5' stroke-linecap='round'/></svg>");
  background-size: var(--scallop) var(--scallop);
  background-repeat: repeat-x;
  background-position: 0 0;
}
.nav-inner{
  max-width:1400px;margin:0 auto;
  display:flex;align-items:center;justify-content:center;
  position:relative;z-index:3;
}
.brand{
  display:flex;align-items:center;
  position:relative;
  z-index:10;
}
.brand-logo{
  height:90px;
  width:auto;
  filter: drop-shadow(0 4px 0 rgba(90,38,117,.22));
  transition: transform .3s cubic-bezier(.5,1.6,.4,1);
}
.brand:hover .brand-logo{transform:rotate(-4deg)}

footer{
  text-align:center;
  padding: 30px 6%;
  color:var(--ink-soft);
  font-size:13px;
  position:relative;z-index:1;
  margin-top:auto;
}
.foot-socials{display:flex;gap:10px;justify-content:center;margin-bottom:14px}
.foot-socials a{
  width:38px;height:38px;border-radius:50%;
  background:var(--cream);
  border:2px solid var(--outline);
  display:grid;place-items:center;
  transition:transform .2s cubic-bezier(.5,1.6,.4,1), background .2s;
  box-shadow:0 3px 0 var(--outline);
}
.foot-socials a:hover{background:var(--bubblegum);transform:translateY(-3px) rotate(-8deg)}
.foot-socials svg{width:16px;height:16px;stroke:var(--outline);fill:var(--outline)}
.foot-socials a:hover svg{stroke:#fff;fill:#fff}

@media (max-width: 520px){
  .awning-body{padding:12px 5%}
  .brand-logo{height:54px}
}