/* SEMAISON — cinematic editorial header
   Loaded after the storefront layers. Removes the floating pill treatment and
   lets navigation live inside the hero, then become a restrained glass rail. */

.sem-2026 .site-header{
  --header-ink:#f7f3eb;
  position:fixed;
  z-index:90;
  top:0;
  left:0;
  right:0;
  width:100%;
  height:auto;
  transform:none;
  border:0;
  border-radius:0;
  background:linear-gradient(180deg,rgba(10,10,8,.34) 0%,rgba(10,10,8,.13) 48%,transparent 100%);
  color:var(--header-ink);
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  transition:
    background .42s cubic-bezier(.22,.78,.18,1),
    color .32s ease,
    box-shadow .42s ease,
    border-color .32s ease;
}

.sem-2026 .site-header::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:min(calc(100% - 2 * var(--s2-gutter,28px)),1540px);
  height:1px;
  transform:translateX(-50%) scaleX(.985);
  transform-origin:center;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.27) 12%,rgba(255,255,255,.27) 88%,transparent);
  opacity:.78;
  pointer-events:none;
  transition:opacity .32s ease,background .32s ease,transform .42s cubic-bezier(.22,.78,.18,1);
}

.sem-2026 .site-header .nav-inner{
  position:relative;
  width:min(100%,1600px);
  min-height:78px;
  height:auto;
  margin:0 auto;
  padding:0 var(--s2-gutter,clamp(18px,3vw,52px));
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:28px;
}

.sem-2026 .site-header .desktop-nav,
.sem-2026 .site-header .nav-actions{
  gap:clamp(24px,2.6vw,44px);
}

.sem-2026 .site-header .desktop-nav a,
.sem-2026 .site-header .nav-actions a,
.sem-2026 .site-header .coming-nav{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font-size:8px;
  font-weight:500;
  line-height:1;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.82;
  transition:opacity .24s ease,transform .34s cubic-bezier(.22,.78,.18,1),color .3s ease;
}

.sem-2026 .site-header .desktop-nav a::before,
.sem-2026 .site-header .nav-actions a::before{
  content:"";
  width:4px;
  height:4px;
  margin-right:9px;
  border-radius:50%;
  background:currentColor;
  opacity:.42;
  transform:scale(.75);
  transition:transform .28s ease,opacity .28s ease;
}

.sem-2026 .site-header .desktop-nav a::after,
.sem-2026 .site-header .nav-actions a::after{
  left:13px;
  right:100%;
  bottom:5px;
  height:1px;
  background:currentColor;
  opacity:.52;
}

.sem-2026 .site-header .desktop-nav a:hover,
.sem-2026 .site-header .nav-actions a:hover{
  opacity:1;
  transform:translateY(-1px);
}
.sem-2026 .site-header .desktop-nav a:hover::before,
.sem-2026 .site-header .nav-actions a:hover::before{opacity:1;transform:scale(1)}

.sem-2026 .site-header .wordmark{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  color:inherit;
  font-family:var(--serif);
  font-size:clamp(22px,1.65vw,29px);
  font-weight:400;
  line-height:1;
  letter-spacing:.16em;
  text-shadow:0 7px 28px rgba(0,0,0,.17);
  transition:color .3s ease,text-shadow .3s ease,letter-spacing .42s cubic-bezier(.22,.78,.18,1);
}

.sem-2026 .site-header .wordmark::before,
.sem-2026 .site-header .wordmark::after{
  content:"";
  width:clamp(22px,2.8vw,48px);
  height:1px;
  margin-inline:clamp(12px,1.6vw,24px);
  background:currentColor;
  opacity:.32;
}

.sem-2026 .site-header .coming-nav{
  min-height:34px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  opacity:.64;
}

/* Scrolled state: a restrained full-width glass rail, not a floating capsule. */
.sem-2026 .site-header.is-scrolled,
.sem-2026 .site-header.scrolled{
  --header-ink:#1b1915;
  background:rgba(247,243,235,.86);
  color:var(--header-ink);
  border:0;
  border-radius:0;
  box-shadow:0 12px 38px rgba(27,22,15,.065);
  backdrop-filter:blur(24px) saturate(1.16);
  -webkit-backdrop-filter:blur(24px) saturate(1.16);
}
.sem-2026 .site-header.is-scrolled::before,
.sem-2026 .site-header.scrolled::before{
  width:100%;
  transform:translateX(-50%) scaleX(1);
  background:rgba(23,22,18,.105);
  opacity:1;
}
.sem-2026 .site-header.is-scrolled .nav-inner,
.sem-2026 .site-header.scrolled .nav-inner{min-height:66px}
.sem-2026 .site-header.is-scrolled .wordmark,
.sem-2026 .site-header.scrolled .wordmark{text-shadow:none;letter-spacing:.145em}
.sem-2026 .site-header.is-scrolled .coming-nav,
.sem-2026 .site-header.scrolled .coming-nav{border-color:rgba(23,22,18,.14);background:rgba(255,255,255,.26)}

/* Fine cinematic details. */
@media(hover:hover) and (pointer:fine){
  .sem-2026 .site-header .wordmark:hover{letter-spacing:.185em}
}

/* Mobile: no oversized bar, clean controls floating over the hero. */
@media(max-width:820px){
  .sem-2026 .site-header{
    top:0;
    width:100%;
    background:linear-gradient(180deg,rgba(9,9,8,.36),rgba(9,9,8,.07) 72%,transparent);
  }
  .sem-2026 .site-header::before{
    width:calc(100% - 28px);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.23) 16%,rgba(255,255,255,.23) 84%,transparent);
  }
  .sem-2026 .site-header .nav-inner{
    min-height:69px;
    padding:0 12px 0 13px;
    gap:0;
    grid-template-columns:44px minmax(0,1fr) auto;
  }
  .sem-2026 .site-header .menu-toggle{
    display:grid;
    place-content:center;
    justify-self:start;
    width:40px;
    height:40px;
    padding:9px;
    border:1px solid rgba(255,255,255,.20);
    border-radius:50%;
    background:rgba(255,255,255,.035);
    color:inherit;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    transition:background .28s ease,border-color .28s ease,transform .28s ease;
  }
  .sem-2026 .site-header .menu-toggle i{
    width:16px;
    margin:3px 0;
    background:currentColor;
  }
  .sem-2026 .site-header .wordmark{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    z-index:1;
    min-height:40px;
    max-width:112px;
    font-size:18px;
    letter-spacing:.135em;
    white-space:nowrap;
  }
  .sem-2026 .site-header .wordmark::before,
  .sem-2026 .site-header .wordmark::after{display:none}

  /* Right actions are deliberately separated: no crushed text cluster. */
  .sem-2026 .site-header .nav-actions{
    position:relative;
    z-index:3;
    grid-column:3;
    justify-self:end;
    display:flex;
    align-items:center;
    gap:7px;
    min-width:0;
  }
  .sem-2026 .site-header .nav-actions .desktop-only{
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    min-width:56px;
    height:38px;
    padding:0 10px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;
    background:rgba(255,255,255,.035);
    font-size:6.6px;
    font-weight:500;
    letter-spacing:.10em;
    opacity:.82;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }
  .sem-2026 .site-header .nav-actions .desktop-only::before,
  .sem-2026 .site-header .nav-actions .desktop-only::after{display:none}
  .sem-2026 .site-header .coming-nav{
    justify-content:center;
    min-width:48px;
    height:38px;
    min-height:38px;
    padding:0 9px;
    border:1px solid rgba(255,255,255,.27);
    border-radius:999px;
    background:rgba(14,14,12,.12);
    font-size:6.7px;
    font-weight:600;
    letter-spacing:.11em;
    opacity:.88;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }

  .sem-2026 .site-header.is-scrolled,
  .sem-2026 .site-header.scrolled{background:rgba(248,245,238,.90)}
  .sem-2026 .site-header.is-scrolled .nav-inner,
  .sem-2026 .site-header.scrolled .nav-inner{min-height:63px}
  .sem-2026 .site-header.is-scrolled .menu-toggle,
  .sem-2026 .site-header.scrolled .menu-toggle,
  .sem-2026 .site-header.is-scrolled .nav-actions .desktop-only,
  .sem-2026 .site-header.scrolled .nav-actions .desktop-only{
    border-color:rgba(23,22,18,.13);
    background:rgba(255,255,255,.30);
  }
  .sem-2026 .site-header.is-scrolled .coming-nav,
  .sem-2026 .site-header.scrolled .coming-nav{
    border-color:rgba(23,22,18,.15);
    background:rgba(23,22,18,.035);
  }
}

@media(max-width:390px){
  .sem-2026 .site-header .nav-inner{grid-template-columns:42px minmax(0,1fr) auto;padding-inline:10px}
  .sem-2026 .site-header .wordmark{font-size:16.5px;letter-spacing:.095em;max-width:99px}
  .sem-2026 .site-header .nav-actions{gap:5px}
  .sem-2026 .site-header .nav-actions .desktop-only{min-width:49px;height:36px;padding:0 7px;font-size:6px}
  .sem-2026 .site-header .coming-nav{min-width:43px;height:36px;min-height:36px;padding:0 7px;font-size:6px}
}

/* -------------------------------------------------------------------------
   Signature hero CTA — a cinematic glass ticket rather than a generic circle.
   ------------------------------------------------------------------------- */
.sem-2026 .hero .discover-cta{
  --cta-fg:#fbf8f1;
  position:relative;
  isolation:isolate;
  justify-self:end;
  display:grid;
  grid-template-columns:minmax(0,1fr) 54px;
  align-items:center;
  width:clamp(218px,19vw,286px);
  min-width:0;
  height:82px;
  aspect-ratio:auto;
  padding:9px 10px 9px 22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.28);
  border-radius:22px;
  background:
    linear-gradient(112deg,rgba(255,255,255,.11),rgba(255,255,255,.025) 58%),
    rgba(13,13,11,.16);
  color:var(--cta-fg);
  box-shadow:
    0 18px 52px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.13);
  backdrop-filter:blur(16px) saturate(1.08);
  -webkit-backdrop-filter:blur(16px) saturate(1.08);
  transform:none;
  transition:
    transform .46s cubic-bezier(.22,.78,.18,1),
    border-color .35s ease,
    background .35s ease,
    box-shadow .46s ease;
}

.sem-2026 .hero .discover-cta::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-55% -35%;
  background:linear-gradient(102deg,transparent 36%,rgba(255,255,255,.15) 48%,transparent 61%);
  transform:translateX(-45%) rotate(6deg);
  transition:transform .9s cubic-bezier(.22,.78,.18,1);
  pointer-events:none;
}
.sem-2026 .hero .discover-cta::after{
  content:"";
  position:absolute;
  inset:5px;
  z-index:-1;
  border:1px solid rgba(255,255,255,.075);
  border-radius:17px;
  pointer-events:none;
}

.sem-2026 .hero .discover-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  min-width:0;
  gap:2px;
  text-align:left;
}
.sem-2026 .hero .discover-copy small{
  display:block;
  font-family:var(--sans);
  font-size:7px;
  font-weight:500;
  line-height:1;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.sem-2026 .hero .discover-copy strong{
  display:block;
  font-family:var(--serif);
  font-size:31px;
  font-weight:400;
  line-height:.98;
  letter-spacing:-.025em;
  white-space:nowrap;
}
.sem-2026 .hero .discover-icon{
  position:relative;
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border:1px solid rgba(255,255,255,.26);
  border-radius:50%;
  background:rgba(255,255,255,.075);
  font-family:var(--sans);
  font-size:18px;
  font-weight:300;
  line-height:1;
  transition:transform .48s cubic-bezier(.22,.78,.18,1),background .35s ease,color .35s ease,border-color .35s ease;
}
.sem-2026 .hero .discover-icon::before{
  content:"";
  position:absolute;
  inset:-5px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:50%;
}

@media(hover:hover) and (pointer:fine){
  .sem-2026 .hero .discover-cta:hover{
    transform:translateY(-4px);
    border-color:rgba(255,255,255,.48);
    background:linear-gradient(112deg,rgba(255,255,255,.16),rgba(255,255,255,.045) 58%),rgba(13,13,11,.20);
    box-shadow:0 26px 68px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.17);
    color:#fff;
  }
  .sem-2026 .hero .discover-cta:hover::before{transform:translateX(48%) rotate(6deg)}
  .sem-2026 .hero .discover-cta:hover .discover-icon{
    transform:rotate(-8deg) scale(1.04);
    background:#f8f3ea;
    color:#171612;
    border-color:#f8f3ea;
  }
}

@media(max-width:820px){
  .sem-2026 .hero .hero-bottom{
    grid-template-columns:minmax(0,1fr) auto;
    align-items:end;
    gap:14px;
  }
  .sem-2026 .hero .discover-cta{
    grid-template-columns:minmax(0,1fr) 46px;
    width:min(52vw,196px);
    height:68px;
    padding:7px 8px 7px 15px;
    border-radius:19px;
    justify-self:end;
  }
  .sem-2026 .hero .discover-cta::after{inset:4px;border-radius:15px}
  .sem-2026 .hero .discover-copy small{font-size:5.8px;letter-spacing:.15em}
  .sem-2026 .hero .discover-copy strong{font-size:25px}
  .sem-2026 .hero .discover-icon{width:44px;height:44px;font-size:16px}
}

@media(max-width:520px){
  .sem-2026 .hero .hero-bottom{
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
  }
  .sem-2026 .hero .hero-bottom>p{max-width:34ch}
  .sem-2026 .hero .discover-cta{
    justify-self:start;
    width:188px;
    height:66px;
  }
}

@media(max-width:360px){
  .sem-2026 .hero .discover-cta{width:178px;height:62px}
  .sem-2026 .hero .discover-copy strong{font-size:23px}
  .sem-2026 .hero .discover-icon{width:40px;height:40px}
}

@media(prefers-reduced-motion:reduce){
  .sem-2026 .site-header,
  .sem-2026 .site-header *,
  .sem-2026 .site-header *::before,
  .sem-2026 .site-header *::after,
  .sem-2026 .hero .discover-cta,
  .sem-2026 .hero .discover-cta *{transition-duration:.01ms!important}
  .sem-2026 .hero .discover-cta::before{display:none}
}