/* =========================================================
   HEADER
========================================================= */

.site-header {
  position: relative;

  z-index: 1000;

  width: 100%;
  height: var(--header-h);

  background: #ffffff;

  color: #512c3e;
}


/* =========================================================
   EXACT SAME WIDTH AS HERO
========================================================= */

.header-inner {
  position: relative;

  height: var(--header-h);

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 40px;
}


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

   IMPORTANT:
   NO BURGUNDY RECTANGLE.
========================================================= */

.header-brand {
  position: relative;

  width: 176px;
  height: var(--header-h);

  flex:
    0 0
    176px;

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: visible;
}


/* =========================================================
   ACTUAL CIRCULAR BURGUNDY LOGO BACKGROUND

   One circular badge with several concentric
   burgundy/red variations.
========================================================= */

.header-logo-circle {
  position: absolute;

  z-index: 0;

  left: 50%;
  top: 50%;

  width: 94px;
  height: 94px;

  transform:
    translate(
      -50%,
      -50%
    );

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 50% 45%,

      #560002 0%,
      #560002 42%,

      #512c3e 43%,
      #512c3e 52%,

      #ee263e 57%,
      #ff1f1f 64%,

      #ff1f1f 70%,
      #ff1f1f 73%,

      #ee263e 79%,
      #560002 88%,
      #560002 100%
    );

  box-shadow:
    inset
    0
    0
    10px
    rgba(
      255, 31, 31,
      0.28
    ),
    inset
    0
    0
    22px
    rgba(
      45,
      0,
      2,
      0.3
    ),
    0
    0
    8px
    rgba(
      255, 31, 31,
      0.3
    );

  pointer-events: none;
}


/* =========================================================
   WHITE LOGO TEXT
========================================================= */

.header-logo {
  position: relative;

  z-index: 2;

  width: 78px;
  height: auto;

  max-height: 62px;

  object-fit: contain;

  filter:
    brightness(0)
    invert(1);
}


/* =========================================================
   NAVIGATION
========================================================= */

.header-nav {
  display: flex;

  align-items: center;
  justify-content: flex-end;

  gap:
    clamp(
      21px,
      1.8vw,
      31px
    );
}


.header-nav > a {
  position: relative;

  min-height: 44px;

  display: inline-flex;

  align-items: center;

  color: #512c3e;

  font-size: 16px;

  font-weight: 700;

  line-height: 1;

  letter-spacing: -0.015em;

  white-space: nowrap;
}


/* =========================================================
   LINK HOVER
========================================================= */

.header-nav
> a:not(.header-nav-cta)::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 7px;

  height: 1.5px;

  background: currentColor;

  transform: scaleX(0);

  transform-origin:
    right center;

  transition:
    transform
    300ms
    var(--ease);
}


.header-nav
> a:not(.header-nav-cta):hover::after {
  transform: scaleX(1);

  transform-origin:
    left center;
}


/* =========================================================
   NEWSLETTER
========================================================= */

.header-nav-cta {
  min-height: 46px;

  padding:
    8px
    22px;

  border:
    1.5px
    solid
    #512c3e;

  border-radius: 999px;

  background: #ffffff;

  transition:
    background-color
    180ms
    ease,
    color
    180ms
    ease;
}


.header-nav-cta:hover {
  background: #512c3e;

  color: #ffffff;
}


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

.header-menu-toggle {
  position: relative;

  z-index: 1003;

  width: 43px;
  height: 43px;

  display: none;

  padding: 0;

  border:
    1.5px
    solid
    #512c3e;

  border-radius: 50%;

  background: #ffffff;
}


.header-menu-toggle span {
  position: absolute;

  left: 50%;

  width: 16px;
  height: 1.5px;

  background: #512c3e;

  transform:
    translateX(-50%);

  transition:
    300ms
    var(--ease);
}


.header-menu-toggle
span:first-child {
  top: 16px;
}


.header-menu-toggle
span:last-child {
  top: 24px;
}


.header-menu-toggle.is-open
span:first-child,
.header-menu-toggle.is-open
span:last-child {
  top: 20px;
}


.header-menu-toggle.is-open
span:first-child {
  transform:
    translateX(-50%)
    rotate(45deg);
}


.header-menu-toggle.is-open
span:last-child {
  transform:
    translateX(-50%)
    rotate(-45deg);
}


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

.header-mobile-nav {
  position: fixed;

  z-index: 1001;

  inset: 0;

  padding-top:
    var(--header-h);

  background: #ffffff;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transform:
    translateY(-8px);

  transition:
    opacity
    280ms
    ease,
    transform
    420ms
    var(--ease),
    visibility
    280ms
    ease;
}


.header-mobile-nav.is-open {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transform: none;
}


.header-mobile-inner {
  height:
    calc(
      100dvh -
      var(--header-h)
    );

  padding:
    22px
    0
    24px;

  display: flex;

  flex-direction: column;
}


.header-mobile-meta {
  margin-bottom: 23px;

  display: flex;

  justify-content: space-between;

  color: #6b4c5b;

  font-size: 14px;
  font-weight: 700;
}


.header-mobile-links {
  display: flex;

  flex-direction: column;
}


.header-mobile-links a {
  min-height: 68px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  border-top:
    1px
    solid
    rgba(
      81, 44, 62,
      0.2
    );
}


.header-mobile-links
a:last-child {
  border-bottom:
    1px
    solid
    rgba(
      81, 44, 62,
      0.2
    );
}


.header-mobile-links span {
  font-size:
    clamp(
      32px,
      8vw,
      46px
    );

  font-weight: 600;

  letter-spacing: -0.04em;
}


.header-mobile-links svg {
  width: 38px;
  height: 38px;

  padding: 9px;

  border:
    1px
    solid
    #512c3e;

  border-radius: 50%;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.7;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.header-mobile-footer {
  margin-top: auto;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  color: #6b4c5b;

  font-size: 14px;
  font-weight: 600;
}


.header-mobile-cta {
  min-height: 43px;

  padding:
    8px
    16px;

  display: inline-flex;

  align-items: center;

  gap: 13px;

  border:
    1.5px
    solid
    #512c3e;

  border-radius: 999px;

  color: #512c3e;

  font-weight: 700;
}


.header-mobile-cta svg {
  width: 17px;
  height: 17px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}


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

@media (max-width: 1000px) {

  .header-nav {
    display: none;
  }


  .header-menu-toggle {
    display: block;
  }

}


@media (max-width: 720px) {

  .header-brand {
    width: 130px;

    flex-basis: 130px;
  }


  .header-logo-circle {
    width: 68px;
    height: 68px;
  }


  .header-logo {
    width: 57px;

    max-height: 47px;
  }


  .header-mobile-footer {
    align-items: flex-start;

    flex-direction: column;
  }

}
/* Desktop header offset. */
@media (min-width: 1001px) {
  .header-inner {
    top: 4px;
  }
}

/* Full-width header with inset navigation. */
.site-header .header-inner {
  width: 100%;
  padding-inline: var(--page-x);
}

/* Glowing heart badge, centered across the header / hero boundary. */
.site-header .header-brand {
  width: 184px;
  height: 184px;
  flex-basis: 184px;
  top: calc(var(--header-h) / 2);
  z-index: 1002;
  border-radius: 50%;
  scale: 1;
  transition: scale 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.header-logo-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  transform: scale(1);
  transition: transform 350ms ease;
}

.site-header .header-logo-circle {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle closest-side at 50% 50%,
    rgba(86, 0, 2, 0) 0%,
    rgba(86, 0, 2, 0) 36%,
    rgba(86, 0, 2, 0) 52%,
    rgba(81, 44, 62, 0.26) 65%,
    rgba(86, 0, 2, 0.58) 77%,
    rgba(238, 38, 62, 0.78) 87%,
    rgba(255, 31, 31, 0.64) 93%,
    rgba(255, 31, 31, 0) 100%);
  box-shadow: none;
}

.site-header .header-logo {
  width: 110px;
  max-height: 72px;
  top: 0;
  filter: brightness(0) saturate(100%) invert(10%) sepia(61%) saturate(3942%) hue-rotate(333deg) brightness(77%) contrast(115%);
}

@keyframes header-heartbeat {
  0%, 65%, 100% { transform: scale(1); }
  20% { transform: scale(1.025); }
  35% { transform: scale(1.008); }
  48% { transform: scale(1.018); }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .header-brand:hover {
    scale: 1.035;
  }

  .header-brand:hover .header-logo-art {
    animation: header-heartbeat 2.4s ease-in-out infinite;
  }
}

.header-brand:focus-visible .header-logo-art {
  transform: scale(1.035);
}

@media (prefers-reduced-motion: reduce) {
  .header-brand,
  .header-logo-art {
    transition: none;
  }
}

@media (max-width: 1000px) {
  .site-header .header-brand {
    top: calc(var(--header-h) / 2 + 4px);
  }
}

@media (max-width: 720px) {
  .site-header .header-brand {
    width: 132px;
    height: 132px;
    flex-basis: 132px;
    top: calc(var(--header-h) / 2 + 3px);
  }

  .site-header .header-logo {
    width: 82px;
    max-height: 52px;
    top: 0;
  }
}

/* Header sits inside the hero; the badge starts flush with its top edge. */
.hero-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1001;
}

.hero-header .site-header {
  background: transparent;
  color: #ffffff;
}

.hero-header .header-inner {
  top: 0;
  align-items: flex-start;
}

.hero-header .header-brand {
  top: 0;
  width: 224px;
  height: 112px;
  flex-basis: 224px;
  border-radius: 0 0 112px 112px;
  transform-origin: center top;
}

.hero-header .header-logo-art {
  transform-origin: center top;
}

.hero-header .header-logo-circle {
  border-radius: inherit;
  background: radial-gradient(circle 112px at 50% 0,
    rgba(86, 0, 2, 0) 0%,
    rgba(86, 0, 2, 0) 46%,
    rgba(81, 44, 62, 0.22) 61%,
    rgba(86, 0, 2, 0.56) 76%,
    rgba(238, 38, 62, 0.84) 87%,
    rgba(255, 31, 31, 0.68) 94%,
    rgba(255, 31, 31, 0) 100%);
}

.hero-header .header-logo {
  top: -14px;
  width: 102px;
  filter: brightness(0) invert(1);
}

.hero-header .header-nav {
  align-self: center;
}

.hero-header .header-nav > a {
  color: #ffffff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.hero-header .header-nav-cta {
  background: transparent;
  border-color: #ffffff;
}

.hero-header .header-nav-cta:hover {
  background: #ffffff;
  color: #512c3e;
  text-shadow: none;
}

.hero-header .header-menu-toggle {
  align-self: center;
}

@media (max-width: 720px) {
  .hero-header .header-brand {
    width: 164px;
    height: 82px;
    flex-basis: 164px;
    border-radius: 0 0 82px 82px;
  }

  .hero-header .header-logo-circle {
    background-size: 100% 100%;
    background-image: radial-gradient(circle 82px at 50% 0,
      rgba(86, 0, 2, 0) 0%,
      rgba(86, 0, 2, 0) 46%,
      rgba(81, 44, 62, 0.22) 61%,
      rgba(86, 0, 2, 0.56) 76%,
      rgba(238, 38, 62, 0.84) 87%,
      rgba(255, 31, 31, 0.68) 94%,
      rgba(255, 31, 31, 0) 100%);
  }

  .hero-header .header-logo {
    width: 74px;
  }
}

/* Keep all header content anchored within the hero image container. */
.hero-stage > .hero-header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: auto;
}

.hero-header .header-mobile-nav {
  position: absolute;
  height: calc(100svh - 18px);
  color: #512c3e;
}

.hero-header .header-mobile-inner {
  height: calc(100% - var(--header-h));
}

/* Larger, bold desktop navigation. */
@media (min-width: 1001px) {
  .header-nav > a {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.06em;
  }
}