/* Top navigation, shared by every page */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding: 22px clamp(16px, 4vw, 48px);
  transition: transform .6s cubic-bezier(.22, .9, .25, 1);
}
/* Slides out of view once you scroll down, and back in at the top */
.nav.away { transform: translateY(-110%); }
.nav-inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: block; line-height: 0; }
.brand img { height: 34px; width: auto; }

.nav-links { display: flex; align-items: center; gap: 10px; }
.nbtn {
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 16px 'DM Sans', system-ui, sans-serif; color: #1A1412; text-decoration: none; white-space: nowrap;
  padding: 12px 22px; border: 2px solid #1A1412; border-radius: 9px; background: transparent; cursor: pointer;
  transition: background .15s, color .15s;
  will-change: transform;
}
/* On devices with a mouse, nav.js makes the buttons follow the cursor and lean toward it */
.nbtn[aria-current="page"] { background: #1A1412; color: #FCF8F5; }
.nbtn.hello { background: #F6137F; border-color: #F6137F; color: #fff; }
.nbtn.hello:hover { background: #d90f6e; border-color: #d90f6e; }
@media (hover: none) { .nbtn:active { background: #1A1412; color: #FCF8F5; } }
.nbtn:focus-visible { outline: 3px solid rgba(246, 19, 127, .45); outline-offset: 2px; }

/* Magnetic hover (magnetic.js) */
.mag-label { display: inline-block; pointer-events: none; will-change: transform; }
[data-magnetic] { transition: background-color .15s, color .15s, border-color .15s; will-change: transform; }

.nav-menu { display: none; }

/* Phones: logo and a menu button; the menu opens full screen */
.mnav { display: none; }
@media (max-width: 760px) {
  .brand img { height: 26px; }
  .nav { padding: 16px; }
  .nav-links, .nav-right > .hello { display: none; }
  .nav-right { display: flex; }
  .nav-menu {
    display: grid; place-content: center; gap: 6px; width: 48px; height: 48px; padding: 0;
    border: 2px solid #1A1412; border-radius: 12px; background: #FCF8F5; cursor: pointer;
  }
  .nav-menu span { display: block; width: 20px; height: 2.5px; border-radius: 2px; background: #1A1412; }

  .mnav {
    display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 100; overflow-y: auto;
    padding: 16px 24px 40px; background: #FCF8F5; border-left: 2px solid #1A1412;
    transform: translateX(101%); visibility: hidden;
    transition: transform .5s cubic-bezier(.7, 0, .2, 1), visibility 0s .5s;
  }
  /* Slides in once the headline letters have popped out */
  .mnav.open { transform: none; visibility: visible; transition: transform .6s cubic-bezier(.7, 0, .2, 1) .25s; }
  /* The × fades in as the panel slides over the menu button */
  .mnav-top { display: flex; margin-bottom: 30px; }
  .mnav-close {
    position: relative; width: 48px; height: 48px; border-radius: 12px; border: 2px solid #F6137F; background: #fff; cursor: pointer;
    opacity: 0; transition: opacity .15s;
  }
  .mnav.open .mnav-close { opacity: 1; transition: opacity .3s ease .55s; }
  .mnav-close::before, .mnav-close::after {
    content: ''; position: absolute; left: 50%; top: 50%; width: 20px; height: 2.5px; border-radius: 2px; background: #F6137F;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .mnav-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
  .mnav-links { display: grid; gap: 4px; }
  .mnav-links a {
    justify-self: start; padding: 8px 0; color: #1A1412; text-decoration: none;
    font: 800 30px/1.1 'Bricolage Grotesque', sans-serif; letter-spacing: -.035em;
  }
  .mnav-links a:active { color: #F6137F; }
  .mnav-hello { display: flex; flex-direction: column; align-items: flex-start; margin-top: 40px; }
  .mnav-hello h2 { font: 800 46px/.95 'Bricolage Grotesque', sans-serif; letter-spacing: -.05em; margin-bottom: 12px; }
  .mnav-label { font-size: 13px; color: #8a7d76; margin-top: 16px; }
  .mnav-value { font-size: 20px; font-weight: 700; color: #1A1412; text-decoration: none; margin-top: 2px; }
  .mnav-value.pink { color: #F6137F; }
  /* Each item fades up after the panel is in, one after another; on close they just fade out */
  .mnav [data-r] { opacity: 0; transform: translateY(14px); transition: opacity .25s, transform .25s; }
  .mnav.open [data-r] {
    opacity: 1; transform: none;
    transition: opacity .45s, transform .55s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(.75s + var(--i) * 55ms);
  }
  html.mnav-open { overflow: hidden; }
}
@media (min-width: 761px) {
  .nav-right > .hello { display: none; }
  .nav-right { display: contents; }
}