:root {

  --nav-black:
    #111;

  --nav-white:
    #fff;

  --nav-background:
    #f7f7f5;

  --nav-padding:
    24px;

  --nav-mobile-padding:
    14px;

  --nav-ease:
    cubic-bezier(.16, 1, .3, 1);

  --nav-border:
    rgba(17, 17, 17, .10);

}

/* Keep Safari's safe-area canvas aligned with the site's light background. */
html,
body {
  background-color: #f7f7f5;
}



/* ========================================
   GLOBAL NAV
======================================== */

#siteNavbar.navbar {

  position:
    fixed;

  top:
    0;

  left:
    0;

  right:
    0;

  width:
    100%;

  height:
    86px;

  padding:
    10px
    var(--nav-padding)
    0;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  z-index:
    10001;

  color:
    var(--nav-white);

  background:
    transparent;

  mix-blend-mode:
    difference;

}



/* ========================================
   LOGO
======================================== */

#siteNavbar .logo {

  appearance:
    none;

  position:
    relative;

  display:
    block;

  width:
    96px;

  height:
    auto;

  padding:
    0;

  margin:
    0;

  border:
    0;

  background:
    transparent;

  color:
    inherit;

  cursor:
    pointer;

  opacity:
    0;

  transform:
    translateY(-18px);

  animation:
    logoEntrance
    .9s
    .1s
    var(--nav-ease)
    forwards;

}


#siteNavbar .logo-swap {

  position:
    relative;

  display:
    block;

  width:
    100%;

}


#siteNavbar .logo-image {

  display:
    block;

  width:
    100%;

  height:
    auto;

  filter:
    invert(1);

  pointer-events:
    none;

  user-select:
    none;

  -webkit-user-drag:
    none;

  transition:
    opacity
    .22s
    ease,
    transform
    .42s
    var(--nav-ease);

}


#siteNavbar .logo-image-hover {

  position:
    absolute;

  inset:
    0;

  opacity:
    0;

  transform:
    scale(.96);

}


#siteNavbar .logo:hover
.logo-image-default {

  opacity:
    0;

  transform:
    scale(.96);

}


#siteNavbar .logo:hover
.logo-image-hover {

  opacity:
    1;

  transform:
    scale(1);

}



/* ========================================
   DESKTOP NAV
======================================== */

#siteNavbar .nav-desktop {

  display:
    flex;

  align-items:
    flex-start;

  gap:
    38px;

  padding-top:
    18px;

}



/* ========================================
   DESKTOP LINKS
======================================== */

#siteNavbar .nav-link {

  position:
    relative;

  display:
    inline-block;

  padding:
    0
    0
    7px;

  color:
    inherit;

  background:
    transparent;

  opacity:
    0;

  transform:
    translateY(-24px)
    rotate(-4deg);

  filter:
    blur(5px);

  animation:
    navEntrance
    .95s
    var(--nav-ease)
    forwards;

  transition:
    transform
    .32s
    var(--nav-ease);

}


#siteNavbar .nav-link:nth-child(1) {

  animation-delay:
    .12s;

}


#siteNavbar .nav-link:nth-child(2) {

  animation-delay:
    .20s;

}


#siteNavbar .nav-link:nth-child(3) {

  animation-delay:
    .28s;

}


#siteNavbar .nav-link:nth-child(4) {

  animation-delay:
    .36s;

}



/* ========================================
   CURRENT SECTION
======================================== */

#siteNavbar .nav-link::after {

  content:
    "";

  position:
    absolute;

  left:
    0;

  bottom:
    0;

  width:
    100%;

  height:
    1px;

  background:
    currentColor;

  transform:
    scaleX(0);

  transform-origin:
    left;

  transition:
    transform
    .35s
    var(--nav-ease);

}


#siteNavbar .nav-link.is-current {

  font-family:
    "Comic Relief",
    "Comic Sans MS",
    "Comic Sans",
    cursive;

}


#siteNavbar .nav-link.is-current::after {

  transform:
    scaleX(1);

}



/* ========================================
   DESKTOP GRADIENT HOVER
======================================== */

#siteNavbar
.nav-link:not(.is-current)::before {

  content:
    attr(data-label);

  position:
    absolute;

  top:
    0;

  left:
    0;

  width:
    100%;

  pointer-events:
    none;

  opacity:
    0;

  background:
    linear-gradient(
      90deg,
      #ff2da8 0%,
      #ff4c8b 12%,
      #b750d5 28%,
      #7557dd 42%,
      #3485dc 56%,
      #23b8c4 68%,
      #51c56a 80%,
      #f2c94c 91%,
      #ff2da8 100%
    );

  background-size:
    220%
    100%;

  background-position:
    15%
    50%;

  -webkit-background-clip:
    text;

  background-clip:
    text;

  color:
    transparent;

  -webkit-text-fill-color:
    transparent;

  transition:
    opacity
    .28s
    ease,
    background-position
    .8s
    var(--nav-ease);

}


@media
(hover: hover)
and
(pointer: fine)
and
(min-width: 901px) {

  #siteNavbar
  .nav-link:hover:not(.is-current) {

    transform:
      translateY(-2px);

    color:
      transparent;

  }


  #siteNavbar
  .nav-link:hover:not(.is-current)::before {

    opacity:
      1;

    background-position:
      90%
      50%;

  }


  #siteNavbar
  .nav-link:hover:not(.is-current)::after {

    transform:
      scaleX(0);

  }

}



/* ========================================
   MOBILE ELEMENT DEFAULTS
======================================== */

#mobileNavToggle {

  display:
    none;

}


#mobileNavPanel {

  display:
    none;

}



/* ========================================
   MOBILE
======================================== */

@media
(max-width: 900px) {


  /* ========================================
     NAVBAR

     Same horizontal rhythm as the Home.
  ========================================= */

  #siteNavbar.navbar {

    height:
      82px;

    padding:
      8px
      var(--nav-mobile-padding)
      0;

    align-items:
      flex-start;

    background:
      transparent;

  }



  /* ========================================
     MOBILE LOGO

     Larger than previous version.
     clamp() makes it adapt on narrow phones.
  ========================================= */

  #siteNavbar .logo {

    width:
      clamp(
        96px,
        26vw,
        112px
      );

    min-width:
      0;

    z-index:
      10003;

  }



  /* ========================================
     REMOVE DESKTOP NAV
  ========================================= */

  #siteNavbar .nav-desktop {

    display:
      none !important;

  }



  /* ========================================
     HAMBURGER / CLOSE BUTTON

     44 × 44 clickable area for mobile UX.
     Visual icon remains more delicate.
  ========================================= */

  #mobileNavToggle {

    appearance:
      none;

    display:
      flex !important;

    position:
      fixed !important;

    top:
      8px !important;

    right:
      4px !important;

    left:
      auto !important;

    bottom:
      auto !important;

    width:
      52px;

    height:
      52px;

    padding:
      0;

    margin:
      0;

    border:
      0;

    border-radius:
      0;

    background:
      transparent;

    color:
      #fff;

    align-items:
      center;

    justify-content:
      center;

    opacity:
      1 !important;

    visibility:
      visible !important;

    pointer-events:
      auto !important;

    cursor:
      pointer;

    z-index:
      10004 !important;

    mix-blend-mode:
      difference;

    -webkit-tap-highlight-color:
      transparent;

  }



  /* ========================================
     HAMBURGER ICON
  ========================================= */

  #mobileNavToggle
  .mobile-nav-toggle-icon {

    position:
      relative;

    display:
      block;

    width:
      34px;

    height:
      23px;

  }


  #mobileNavToggle
  .mobile-nav-toggle-icon
  > span {

    position:
      absolute;

    left:
      0;

    display:
      block;

    width:
      100%;

    height:
      1.5px;

    border-radius:
      999px;

    background:
      currentColor;

    opacity:
      1;

    transform-origin:
      center;

    transition:
      top
      .65s
      var(--nav-ease),
      transform
      .65s
      var(--nav-ease),
      opacity
      .3s
      ease;

  }


  #mobileNavToggle
  .mobile-nav-toggle-icon
  > span:nth-child(1) {

    top:
      1px;

  }


  #mobileNavToggle
  .mobile-nav-toggle-icon
  > span:nth-child(2) {

    top:
      11px;

  }


  #mobileNavToggle
  .mobile-nav-toggle-icon
  > span:nth-child(3) {

    top:
      21px;

  }



  /* ========================================
     HAMBURGER → X

     Same button, same position.
  ========================================= */

  #mobileNavToggle.is-open
  .mobile-nav-toggle-icon
  > span:nth-child(1) {

    top:
      11px;

    transform:
      rotate(45deg);

  }


  #mobileNavToggle.is-open
  .mobile-nav-toggle-icon
  > span:nth-child(2) {

    opacity:
      0;

    transform:
      scaleX(0);

  }


  #mobileNavToggle.is-open
  .mobile-nav-toggle-icon
  > span:nth-child(3) {

    top:
      11px;

    transform:
      rotate(-45deg);

  }



  /* ========================================
     PANEL
  ========================================= */

  #mobileNavPanel {

    position:
      fixed;

    inset:
      0;

    display:
      block !important;

    width:
      100%;

    height:
      100dvh;

    min-height:
      100svh;

    z-index:
      9000;

    background:
      var(--nav-background);

    color:
      var(--nav-black);

    overflow:
      hidden;

    visibility:
      hidden;

    pointer-events:
      none;

    opacity:
      0;

    clip-path:
      inset(
        0
        0
        100%
        0
      );

    transition:
      clip-path
      1.2s
      var(--nav-ease),
      opacity
      .48s
      ease,
      visibility
      0s
      1.2s;

  }


  #mobileNavPanel.is-open {

    visibility:
      visible;

    pointer-events:
      auto;

    opacity:
      1;

    clip-path:
      inset(
        0
        0
        0
        0
      );

    transition:
      clip-path
      1.35s
      var(--nav-ease),
      opacity
      .42s
      ease,
      visibility
      0s;

  }



  /* ========================================
     PANEL INNER

     Navbar owns the upper zone.
  ========================================= */

  #mobileNavPanel
  .mobile-nav-panel-inner {

    width:
      100%;

    height:
      100%;

    min-height:
      100dvh;

    padding:
      96px
      var(--nav-mobile-padding)
      16px;

    display:
      flex;

    flex-direction:
      column;

  }



  /* ========================================
     FULL-BLEED LINKS

     Horizontal rules reach viewport edges.
     Copy itself retains the 14px margin.
  ========================================= */

  #mobileNavPanel
  .mobile-nav-links {

    width:
      calc(
        100% +
        var(--nav-mobile-padding) * 2
      );

    margin-top:
      auto;

    margin-left:
      calc(
        var(--nav-mobile-padding) * -1
      );

    margin-right:
      calc(
        var(--nav-mobile-padding) * -1
      );

    border-top:
      1px
      solid
      var(--nav-border);

  }



  /* ========================================
     MOBILE LINK
  ========================================= */

  #mobileNavPanel
  .mobile-nav-link {

    position:
      relative;

    display:
      grid;

    grid-template-columns:
      clamp(
        30px,
        9vw,
        38px
      )
      minmax(0, 1fr)
      24px;

    align-items:
      center;

    width:
      100%;

    min-height:
      clamp(
        66px,
        10.3vh,
        94px
      );

    padding:
      0
      var(--nav-mobile-padding);

    color:
      var(--nav-black);

    border-bottom:
      1px
      solid
      var(--nav-border);

    opacity:
      0;

    transform:
      translate3d(
        0,
        54px,
        0
      )
      rotate(1.2deg);

    transform-origin:
      left
      center;

    filter:
      blur(10px);

    transition:
      opacity
      .7s
      ease,
      transform
      1.05s
      var(--nav-ease),
      filter
      .85s
      ease;

  }



  /* ========================================
     OPEN STAGGER
  ========================================= */

  #mobileNavPanel.is-open
  .mobile-nav-link {

    opacity:
      1;

    transform:
      translate3d(
        0,
        0,
        0
      )
      rotate(0);

    filter:
      blur(0);

  }


  #mobileNavPanel.is-open
  .mobile-nav-link:nth-child(1) {

    transition-delay:
      .38s;

  }


  #mobileNavPanel.is-open
  .mobile-nav-link:nth-child(2) {

    transition-delay:
      .52s;

  }


  #mobileNavPanel.is-open
  .mobile-nav-link:nth-child(3) {

    transition-delay:
      .66s;

  }


  #mobileNavPanel.is-open
  .mobile-nav-link:nth-child(4) {

    transition-delay:
      .80s;

  }



  /* ========================================
     NUMBERS
  ========================================= */

  #mobileNavPanel
  .mobile-nav-number {

    align-self:
      start;

    padding-top:
      13px;

    font-size:
      9px;

    line-height:
      1;

    font-variant-numeric:
      tabular-nums;

  }



  /* ========================================
     MOBILE TITLES

     Responsive sizing for narrow phones.
  ========================================= */

  #mobileNavPanel
  .mobile-nav-name {

    display:
      block;

    min-width:
      0;

    padding:
      .1em
      0
      .13em;

    font-size:
      clamp(
        38px,
        13.5vw,
        72px
      );

    line-height:
      .88;

    letter-spacing:
      -.07em;

    font-weight:
      450;

    white-space:
      nowrap;

    transition:
      transform
      .4s
      var(--nav-ease);

  }



  /* ========================================
     ARROWS
  ========================================= */

  #mobileNavPanel
  .mobile-nav-arrow {

    justify-self:
      end;

    font-size:
      17px;

    opacity:
      .20;

    transform:
      translate(
        -4px,
        -5px
      );

    transition:
      opacity
      .4s
      ease,
      transform
      .5s
      var(--nav-ease);

  }



  /* ========================================
     CURRENT MOBILE SECTION
  ========================================= */

  #mobileNavPanel
  .mobile-nav-link.is-current
  .mobile-nav-name {

    font-family:
      "Comic Relief",
      "Comic Sans MS",
      "Comic Sans",
      cursive;

  }


  #mobileNavPanel
  .mobile-nav-link.is-current
  .mobile-nav-number {

    background:
      linear-gradient(
        90deg,
        #ff2da8,
        #b750d5,
        #7557dd,
        #3485dc,
        #23b8c4,
        #51c56a,
        #f2c94c
      );

    -webkit-background-clip:
      text;

    background-clip:
      text;

    color:
      transparent;

    -webkit-text-fill-color:
      transparent;

  }



  /* ========================================
     MOBILE INTERACTION
  ========================================= */

  #mobileNavPanel
  .mobile-nav-link:active
  .mobile-nav-name {

    transform:
      translateX(5px);

  }


  #mobileNavPanel
  .mobile-nav-link:active
  .mobile-nav-arrow {

    opacity:
      1;

    transform:
      translate(0, 0);

  }



  /* ========================================
     BOTTOM META

     Same 14px left/right rhythm.
  ========================================= */

  #mobileNavPanel
  .mobile-nav-bottom {

    width:
      calc(
        100% +
        var(--nav-mobile-padding) * 2
      );

    margin-left:
      calc(
        var(--nav-mobile-padding) * -1
      );

    margin-right:
      calc(
        var(--nav-mobile-padding) * -1
      );

    padding:
      17px
      var(--nav-mobile-padding)
      0;

    display:
      flex;

    justify-content:
      space-between;

    align-items:
      flex-end;

    gap:
      20px;

    font-size:
      9px;

    line-height:
      1.15;

    text-transform:
      uppercase;

    opacity:
      0;

    transform:
      translateY(15px);

    filter:
      blur(5px);

    transition:
      opacity
      .7s
      .92s
      ease,
      transform
      .95s
      .92s
      var(--nav-ease),
      filter
      .8s
      .92s
      ease;

  }


  #mobileNavPanel
  .mobile-nav-bottom
  span:last-child {

    text-align:
      right;

  }


  #mobileNavPanel.is-open
  .mobile-nav-bottom {

    opacity:
      1;

    transform:
      translateY(0);

    filter:
      blur(0);

  }



  /* ========================================
     OPEN NAVBAR

     Panel is light, so logo and X become dark.
  ========================================= */

  #siteNavbar.menu-is-open {

    background:
      transparent;

    color:
      var(--nav-black);

    mix-blend-mode:
      normal;

  }


  #siteNavbar.menu-is-open
  .logo-image {

    filter:
      none;

  }


  #mobileNavToggle.is-open {

    color:
      var(--nav-black);

    mix-blend-mode:
      normal;

  }



  /* ========================================
     LOGO FLIGHT MOBILE
  ========================================= */

  .logo-flight-gif {

    width:
      clamp(
        170px,
        48vw,
        260px
      );

  }

}



/* ========================================
   EXTRA-NARROW MOBILE

   Only small corrections: nothing disappears.
======================================== */

@media
(max-width: 370px) {

  :root {

    --nav-mobile-padding:
      12px;

  }


  #siteNavbar.navbar {

    padding-left:
      var(--nav-mobile-padding);

    padding-right:
      var(--nav-mobile-padding);

  }


  #siteNavbar .logo {

    width:
      clamp(
        90px,
        27vw,
        100px
      );

  }


  #mobileNavToggle {

    right:
      1px !important;

    width:
      50px;

    height:
      50px;

  }


  #mobileNavToggle
  .mobile-nav-toggle-icon {

    width:
      31px;

  }


  #mobileNavPanel
  .mobile-nav-panel-inner {

    padding-top:
      90px;

  }


  #mobileNavPanel
  .mobile-nav-name {

    font-size:
      clamp(
        36px,
        13vw,
        48px
      );

  }


  #mobileNavPanel
  .mobile-nav-link {

    grid-template-columns:
      29px
      minmax(0, 1fr)
      20px;

  }

}



/* ========================================
   DESKTOP SAFETY
======================================== */

@media
(min-width: 901px) {

  #mobileNavToggle {

    display:
      none !important;

  }


  #mobileNavPanel {

    display:
      none !important;

  }

}



/* ========================================
   LOGO FLIGHT
======================================== */

.logo-flight-layer {

  position:
    fixed;

  inset:
    0;

  z-index:
    9998;

  pointer-events:
    none;

  overflow:
    hidden;

  visibility:
    hidden;

}


.logo-flight-layer.is-running {

  visibility:
    visible;

}


.logo-flight-gif {

  position:
    absolute;

  left:
    0;

  top:
    50%;

  width:
    clamp(
      190px,
      23vw,
      430px
    );

  max-width:
    none;

  height:
    auto;

  opacity:
    0;

  transform:
    translate(
      -140%,
      -50%
    )
    rotate(-4deg)
    scale(.92);

  will-change:
    transform,
    opacity;

}


.logo-flight-layer.is-running
.logo-flight-gif {

  animation:
    logoFlight
    3.15s
    cubic-bezier(.22, .72, .15, 1)
    forwards;

}



/* ========================================
   NAV ENTRANCE
======================================== */

@keyframes navEntrance {

  0% {

    opacity:
      0;

    transform:
      translateY(-24px)
      rotate(-4deg);

    filter:
      blur(5px);

  }


  55% {

    opacity:
      1;

    transform:
      translateY(4px)
      rotate(1deg);

    filter:
      blur(0);

  }


  100% {

    opacity:
      1;

    transform:
      translateY(0)
      rotate(0);

    filter:
      blur(0);

  }

}



/* ========================================
   LOGO ENTRANCE
======================================== */

@keyframes logoEntrance {

  to {

    opacity:
      1;

    transform:
      translateY(0);

  }

}



/* ========================================
   LOGO FLIGHT ANIMATION
======================================== */

@keyframes logoFlight {

  0% {

    opacity:
      0;

    transform:
      translate(
        -140%,
        -50%
      )
      rotate(-4deg)
      scale(.92);

  }


  10% {

    opacity:
      1;

  }


  42% {

    transform:
      translate(
        35vw,
        -52%
      )
      rotate(1deg)
      scale(1.03);

  }


  72% {

    transform:
      translate(
        72vw,
        -48%
      )
      rotate(-1deg)
      scale(1);

  }


  88% {

    opacity:
      1;

  }


  100% {

    opacity:
      0;

    transform:
      translate(
        125vw,
        -50%
      )
      rotate(3deg)
      scale(.96);

  }

}



/* ========================================
   REDUCED MOTION
======================================== */

@media
(prefers-reduced-motion: reduce) {

  #siteNavbar *,
  #mobileNavPanel,
  #mobileNavPanel *,
  .logo-flight-gif {

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;

  }

}

/* ========================================
   INDEX MOBILE — FINAL HEADER CALIBRATION
======================================== */
@media (max-width: 800px) {
  #siteNavbar.navbar {
    height: 108px;
    padding: 18px var(--nav-mobile-padding) 0;
  }

  #siteNavbar .logo {
    width: clamp(104px, 29vw, 122px);
  }

  #mobileNavToggle {
    top: 18px !important;
    right: var(--nav-mobile-padding) !important;
    width: clamp(104px, 29vw, 122px);
    height: 48px;
    justify-content: flex-end;
  }

  #mobileNavToggle .mobile-nav-toggle-icon {
    width: 100%;
    height: 25px;
  }

  #mobileNavToggle .mobile-nav-toggle-icon > span:nth-child(1) { top: 1px; }
  #mobileNavToggle .mobile-nav-toggle-icon > span:nth-child(2) { top: 12px; }
  #mobileNavToggle .mobile-nav-toggle-icon > span:nth-child(3) { top: 23px; }
}

/* INDEX MOBILE — compact, vertically aligned controls */
@media (max-width: 800px) {
  #siteNavbar.navbar {
    height: 126px;
    padding: 28px var(--nav-mobile-padding) 0;
    align-items: flex-start;
  }

  #siteNavbar .logo {
    width: clamp(88px, 24vw, 104px);
    transform: translateY(8px);
  }

  #mobileNavToggle {
    top: 34px !important;
    right: var(--nav-mobile-padding) !important;
    width: 72px;
    height: 40px;
  }

  #mobileNavToggle .mobile-nav-toggle-icon {
    width: 66px;
    height: 20px;
  }

  #mobileNavToggle .mobile-nav-toggle-icon > span:nth-child(1) { top: 0; }
  #mobileNavToggle .mobile-nav-toggle-icon > span:nth-child(2) { top: 9px; }
  #mobileNavToggle .mobile-nav-toggle-icon > span:nth-child(3) { top: 18px; }

  #mobileNavToggle.is-open .mobile-nav-toggle-icon > span:nth-child(1),
  #mobileNavToggle[aria-expanded="true"] .mobile-nav-toggle-icon > span:nth-child(1),
  body.menu-open #mobileNavToggle .mobile-nav-toggle-icon > span:nth-child(1) {
    top: 9px;
  }

  #mobileNavToggle.is-open .mobile-nav-toggle-icon > span:nth-child(3),
  #mobileNavToggle[aria-expanded="true"] .mobile-nav-toggle-icon > span:nth-child(3),
  body.menu-open #mobileNavToggle .mobile-nav-toggle-icon > span:nth-child(3) {
    top: 9px;
  }
}

@media (max-width: 800px) {
  #siteNavbar.navbar {
    height: 104px;
    padding-top: 16px;
  }

  #siteNavbar .logo {
    width: clamp(82px, 22vw, 96px);
    transform: none;
  }

  #mobileNavToggle {
    top: 20px !important;
    width: 54px;
    height: 34px;
  }

  #mobileNavToggle .mobile-nav-toggle-icon {
    width: 50px;
    height: 18px;
  }

  #mobileNavToggle .mobile-nav-toggle-icon > span:nth-child(1) { top: 0; }
  #mobileNavToggle .mobile-nav-toggle-icon > span:nth-child(2) { top: 8px; }
  #mobileNavToggle .mobile-nav-toggle-icon > span:nth-child(3) { top: 16px; }

  #mobileNavToggle.is-open .mobile-nav-toggle-icon > span:nth-child(1),
  #mobileNavToggle[aria-expanded="true"] .mobile-nav-toggle-icon > span:nth-child(1),
  body.menu-open #mobileNavToggle .mobile-nav-toggle-icon > span:nth-child(1),
  #mobileNavToggle.is-open .mobile-nav-toggle-icon > span:nth-child(3),
  #mobileNavToggle[aria-expanded="true"] .mobile-nav-toggle-icon > span:nth-child(3),
  body.menu-open #mobileNavToggle .mobile-nav-toggle-icon > span:nth-child(3) {
    top: 8px;
  }
}

/* Mobile optical correction: only the floating logo moves; the global
   navigation and page spacing remain on the shared grid. */
@media (max-width: 800px) {
  #siteNavbar .logo {
    transform: translate3d(-6px, -5px, 0);
  }
}