@charset "utf-8";
/* =========================================================
   SCARRED赤 — header / hamburger / global navigation
   ========================================================= */

.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:clamp(4rem,7vw,5.5rem);
  padding-inline:clamp(1rem,3.5vw,3rem);
  transition:background-color .5s var(--ease), backdrop-filter .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:rgba(11,6,5,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--c-faint);
}
.site-header.is-open{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom-color:transparent; }

/* ---------- brand ---------- */
.brand{
  position:relative;
  z-index:1002;
  display:flex;
  align-items:center;
  gap:.3rem;          /* 欧文の字間ぶん語末に余白が出るため詰めておく */
  opacity:0;
  transform:translateY(-.5rem);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
  pointer-events:none;
}
.site-header.is-scrolled .brand,
.site-header.is-open .brand{ opacity:1; transform:none; pointer-events:auto; }

.brand__mark{ width:clamp(1.35rem,2.4vw,1.75rem); }
.brand__type{
  font-family:var(--f-en);
  font-weight:300;
  font-size:clamp(.68rem,.6rem + .28vw,.85rem);
  letter-spacing:.34em;
  text-indent:.34em;
  white-space:nowrap;
}
.brand__type em{ font-style:normal; color:var(--c-red); }
.site-header.is-open .brand__type em{ color:var(--c-gold-lt); }

/* ---------- hamburger ---------- */
.hamburger{
  position:relative;
  z-index:1002;
  width:clamp(2.75rem,5vw,3.25rem);
  height:clamp(2.75rem,5vw,3.25rem);
  padding:.65rem;
  background:none;
  border:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.hamburger__dots{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
  gap:.22rem;
  width:100%; height:100%;
}
.hamburger__dots i{
  display:block;
  border-radius:50%;
  background:var(--c-text);
  transition:transform .45s var(--ease), background-color .45s var(--ease), opacity .35s var(--ease);
}
.hamburger:hover .hamburger__dots i{ background:var(--c-gold-lt); }

/* 開いている間は対角の 5 点だけを残して × を作る */
.hamburger.is-active .hamburger__dots i:nth-child(2),
.hamburger.is-active .hamburger__dots i:nth-child(4),
.hamburger.is-active .hamburger__dots i:nth-child(6),
.hamburger.is-active .hamburger__dots i:nth-child(8){ opacity:0; transform:scale(0); }
.hamburger.is-active .hamburger__dots i:nth-child(1),
.hamburger.is-active .hamburger__dots i:nth-child(3),
.hamburger.is-active .hamburger__dots i:nth-child(7),
.hamburger.is-active .hamburger__dots i:nth-child(9){ background:var(--c-gold-lt); }
.hamburger.is-active .hamburger__dots i:nth-child(5){ transform:scale(1.2); background:var(--c-red); }
.hamburger.is-active:hover .hamburger__dots i{ background:var(--c-red); }

/* ---------- overlay nav ---------- */
.global-nav{
  position:fixed;
  inset:0;
  z-index:1001;
  display:grid;
  place-items:center;
  background:var(--c-ink);
  clip-path:inset(0 0 100% 0);
  visibility:hidden;
  transition:clip-path .8s var(--ease), visibility 0s linear .8s;
}
.global-nav.is-open{
  clip-path:inset(0 0 0 0);
  visibility:visible;
  transition:clip-path .8s var(--ease), visibility 0s;
}

.global-nav__deco{
  position:absolute; inset:0;
  overflow:hidden;
  pointer-events:none;
}
.global-nav__deco img{
  position:absolute;
  opacity:0;
  transition:opacity 1.1s var(--ease) .25s, transform 1.4s var(--ease) .25s;
}
.global-nav__deco img:nth-child(1){
  width:clamp(22rem,58vw,50rem);
  top:-4%; right:-14%;
  transform:rotate(168deg) translateX(3rem);
}
.global-nav__deco img:nth-child(2){
  width:clamp(18rem,46vw,38rem);
  bottom:-6%; left:-12%;
  transform:rotate(-8deg) translateX(-3rem);
}
.global-nav.is-open .global-nav__deco img{ opacity:.17; transform:rotate(168deg) translateX(0); }
.global-nav.is-open .global-nav__deco img:nth-child(2){ opacity:.22; transform:rotate(-8deg) translateX(0); }

.global-nav__inner{
  position:relative;
  width:100%;
  max-width:var(--wrap);
  padding:clamp(6rem,12vw,8rem) var(--gut) clamp(3rem,8vw,5rem);
  display:grid;
  gap:clamp(2.5rem,6vw,5rem);
  max-height:100dvh;
  overflow-y:auto;
  overscroll-behavior:contain;
}

.nav-block__title{
  font-family:var(--f-en);
  font-weight:300;
  font-size:clamp(.66rem,.6rem + .22vw,.78rem);
  letter-spacing:.4em;
  text-indent:.4em;
  text-transform:uppercase;
  color:var(--c-gold);
  padding-bottom:1rem;
  margin-bottom:clamp(1.25rem,3vw,2rem);
  border-bottom:1px solid var(--c-faint);
}

.nav-list{ list-style:none; margin:0; padding:0; }
.nav-list li{ overflow:hidden; }

.nav-list__link{
  display:flex;
  align-items:baseline;
  gap:clamp(.75rem,2vw,1.5rem);
  padding-block:clamp(.45rem,1.4vw,.85rem);
  transform:translateY(110%);
  opacity:0;
  transition:transform .75s var(--ease), opacity .75s var(--ease), color .35s ease;
}
.global-nav.is-open .nav-list__link{ transform:translateY(0); opacity:1; }

.nav-list__en{
  font-family:var(--f-en);
  font-weight:300;
  font-size:clamp(1.75rem,1.1rem + 2.8vw,3.5rem);
  letter-spacing:.14em;
  line-height:1.25;
  transition:color .35s ease;
}
.nav-list__ja{
  font-size:clamp(.66rem,.6rem + .22vw,.78rem);
  letter-spacing:.2em;
  color:var(--c-muted);
  transition:color .35s ease;
}
.nav-list__link:hover .nav-list__en,
.nav-list__link:focus-visible .nav-list__en{ color:var(--c-red); }
.nav-list__link:hover .nav-list__ja{ color:var(--c-gold); }

.nav-list--sub .nav-list__en{ font-size:clamp(1.05rem,.9rem + .8vw,1.5rem); letter-spacing:.2em; }

.nav-shop{
  display:inline-block;
  margin-top:clamp(1.5rem,4vw,2.5rem);
  padding:.9em 2em;
  border:1px solid var(--c-gold);
  color:var(--c-gold-lt);
  font-family:var(--f-en);
  font-weight:300;
  font-size:.78rem;
  letter-spacing:.22em;
  transition:background-color .4s var(--ease), color .4s var(--ease);
}
.nav-shop:hover,.nav-shop:focus-visible{ background:var(--c-gold); color:var(--c-ink); }

@media (min-width:800px){
  .global-nav__inner{
    grid-template-columns:1.4fr 1fr;
    align-items:start;
  }
  .nav-block--sub{ padding-top:.5rem; }
}