@font-face{
  font-family:"Cormorant Garamond";
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url("/assets/fonts/cormorant-garamond-latin.woff2") format("woff2");
}
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("/assets/fonts/inter-latin.woff2") format("woff2");
}

html{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* The live site remains readable when animation JavaScript is unavailable. */
.js .reveal{
  opacity:1;
  transform:none;
  filter:none;
}
.phase1-motion .reveal{
  opacity:0;
  transform:translateY(14px);
  filter:blur(3px);
  transition-property:opacity,transform,filter;
  transition-duration:.55s;
  transition-timing-function:cubic-bezier(.2,0,0,1);
}
.phase1-motion .reveal.in{
  opacity:1;
  transform:none;
  filter:blur(0);
}

/* Discoverable, responsive LCP imagery replaces the CSS background image. */
.hero{
  background-color:#101216;
  background-image:none!important;
}
.hero-media{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  overflow:hidden;
  pointer-events:none;
}
.hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(8,9,10,.9) 0%,rgba(8,9,10,.63) 45%,rgba(8,9,10,.28) 100%),
    linear-gradient(180deg,rgba(8,9,10,.04),rgba(8,9,10,.66));
}
.hero-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center right;
  outline:1px solid rgba(255,255,255,.1);
  outline-offset:-1px;
}
.hero::before,.hero::after{z-index:1}
.hero-inner,.hero>.crumbs{position:relative;z-index:2}
.brand-hero .hero-inner{
  grid-template-columns:minmax(0,780px);
  justify-content:start;
}
.brand-hero .hero-title{max-width:13ch}
.brand-hero .hero-lead{max-width:54ch}
.hero-hub .hero-lead{max-width:49ch}

/* Short labels and full hit areas make the header usable at narrow widths. */
.nav-visit,.nav-shop,.menu-toggle{
  min-height:44px!important;
}
.menu-toggle{
  min-width:44px;
}
.nav-visit,.nav-shop,.menu-toggle,.menu-brand,.pill,.product-cta{
  transition-property:transform,box-shadow,background-color,color,border-color;
  transition-duration:.18s;
  transition-timing-function:cubic-bezier(.2,0,0,1);
}
.nav-visit:active,.nav-shop:active,.menu-toggle:active,.menu-brand:active,.pill:active{
  transform:scale(.96);
}

.store-showcase-main img,.store-photo img{
  outline:1px solid rgba(255,255,255,.1);
  outline-offset:-1px;
}
.store-showcase-thumb img,.product-media img{
  outline:1px solid rgba(0,0,0,.1);
  outline-offset:-1px;
}

.dock .btn{
  min-height:48px;
  padding-left:8px;
  padding-right:8px;
}

:focus-visible{
  outline:2px solid var(--gold-lite,#e7d3a1);
  outline-offset:3px;
}

/* Keep small gold eyebrow text WCAG AA-compliant on light panels. */
.video-preview .eyebrow.gold{
  color:#76501a;
}

@supports (content-visibility:auto){
  main>section:not(.hero){
    content-visibility:auto;
    contain-intrinsic-size:auto 720px;
  }
}

@media (max-width:760px){
  .site-header{
    min-height:60px;
    padding:8px 10px!important;
    gap:6px!important;
  }
  .site-header .brandmark{
    flex:0 0 62px!important;
    max-width:62px!important;
  }
  .brand-logo{width:62px!important}
  .nav-actions{
    max-width:calc(100% - 68px)!important;
    gap:5px!important;
  }
  .nav-visit,.nav-shop{
    min-height:44px!important;
    padding:0 10px!important;
    font-size:11px!important;
  }
  .menu-toggle{
    flex:0 0 44px!important;
    min-height:44px!important;
    padding:0 10px!important;
  }
  .hero-media img{object-position:62% center}
  .hero-hub .hero-lead{font-size:15.5px;line-height:1.55}
  .hero-mini{font-size:11px;line-height:1.5}
  .dock{gap:7px;padding-left:10px;padding-right:10px}
}

@media (max-width:380px){
  .site-header .brandmark{flex-basis:54px!important;max-width:54px!important}
  .brand-logo{width:54px!important}
  .nav-actions{max-width:calc(100% - 58px)!important}
  .nav-visit,.nav-shop{padding:0 8px!important;font-size:10.5px!important}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .phase1-motion .reveal{
    opacity:1;
    transform:none;
    filter:none;
    transition:none;
  }
  .nav-visit:active,.nav-shop:active,.menu-toggle:active,.menu-brand:active,.pill:active{
    transform:none;
  }
}