/* v438 assets/css/home-early.css: assets/css/header-paint.css + assets/css/shop-soon.css */
/* First-paint header. Loaded as a blocking sheet so the nav matches its
   settled look before styles.css arrives. styles.css is applied later
   (media=print, then all). Without these rules the links paint as default
   underlined anchors, then the color transition and the header blur
   transition smear them into colored streaks. Keep these values aligned
   with the header rules in styles.css. */
:root {
  --header-h: 84px;
  --brand-logo-h: 64px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) clamp(1.25rem, 4vw, 3rem) 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  border-bottom: 1px solid transparent;
}

.brand {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: calc(var(--brand-logo-h) * 1686 / 1158);
  height: var(--brand-logo-h);
  line-height: 0;
}

.brand-logo,
.brand-logo-spin {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

.brand-logo {
  opacity: 0.92;
}

.brand-logo-spin {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.header-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0.85rem;
}

.bag-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.15rem;
  background: transparent;
  border: none;
  color: rgba(244, 239, 230, 0.52);
  font-family: Outfit, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(1rem, 1.7vw, 2.15rem);
}

.nav a {
  position: relative;
  color: rgba(244, 239, 230, 0.52);
  font-family: Outfit, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0.4rem 0;
  transition: none;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgb(236, 184, 62);
  transform: scaleX(0);
  transform-origin: center;
  opacity: 0.75;
  transition: none;
}

.nav a[aria-current="page"] {
  color: #f0c85a;
}

.nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav-optional {
  display: none;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(236, 184, 62, 0.16);
  border-radius: 1px;
  background: transparent;
}

.nav-toggle span {
  display: block;
  width: 16px;
  height: 1px;
  margin: 0 auto;
  background: rgb(236, 184, 62);
}

@media (max-width: 1440px) {
  .nav {
    gap: 0.85rem;
  }

  .nav a,
  .bag-toggle {
    letter-spacing: 0.2em;
    font-size: 0.74rem;
  }
}

@media (max-width: 980px) {
  .nav-toggle {
    display: flex;
  }

  .nav {
    display: none;
  }

  .nav.is-open {
    display: flex;
  }
}

@media (max-width: 720px) {
  :root {
    --header-h: 64px;
    --brand-logo-h: 48px;
  }

  .site-header {
    padding: env(safe-area-inset-top, 0px) 1.1rem 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
  }
}

/* Shop "Coming soon": Kobe at the house doors. Toggled by /assets/js/shop-state.js.
   With no .shop-open on <html>, live shop parts hide and the Coming soon panel shows. */
html:not(.shop-open) [data-shop-live] { display: none !important; }
html.shop-open [data-shop-soon] { display: none !important; }

.shop-soon {
  box-sizing: border-box;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  text-align: center;
  color: #f4efe6;
}

.shop-soon-art {
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(232, 200, 120, 0.42);
  border-radius: 2px;
  background: #000;
  aspect-ratio: 1280 / 616;
}

.shop-soon-art picture,
.shop-soon-art img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  object-position: 50% 60%;
}

.shop-soon-copy {
  padding: 1.6rem 1rem 0.4rem;
}

.shop-soon-kicker {
  margin: 0 0 0.55rem;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #E8C878;
}

.shop-soon-title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.2rem, 6vw, 3.1rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: #E8C878;
  text-shadow: none;
}

.shop-soon-rule {
  display: block;
  width: 3.25rem;
  height: 1px;
  margin: 1rem auto;
  background: rgba(232, 200, 120, 0.6);
}

.shop-soon-line {
  max-width: 24rem;
  margin: 0 auto;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(244, 239, 230, 0.86);
}

.shop-soon-sign {
  margin: 0.9rem 0 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 400;
  color: rgba(232, 200, 120, 0.9);
}

/* /shop: the panel stands in for the hero. */
.shop-soon--page {
  padding: 2rem clamp(1.15rem, 4vw, 2rem) 4.5rem;
}

/* Homepage chapter and /sit tab sit inside narrower columns. */
.shop-soon--inline {
  margin-top: 1rem;
}

.shop-soon--inline .shop-soon-title {
  font-size: 2.2rem;
}

@media (max-width: 720px) {
  .shop-soon-art { aspect-ratio: 680 / 616; }
  .shop-soon--page { padding: 1rem 1.15rem 3.5rem; }
}