/* Sabllé interim holding page.
   Palette sampled from the brand logo and the client's Shopify build. */

:root{
  --espresso:#4a2925;
  --rose:#af736a;
  --rose-deep:#643c36;
  --blush:#cca59f;
  --ink:#2e2c2c;
  --ink-soft:#6f6866;
  --paper:#ffffff;
  --rule:#e7e7e7;

  /* slideshow: 5 slides, one cycle = 5 x --slide */
  --slide:7s;
  --cycle:35s;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Libre Baskerville',Georgia,'Times New Roman',serif;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,.serif{
  font-family:'Abhaya Libre','Libre Baskerville',Georgia,serif;
  font-weight:500;
  line-height:1.16;
}
img{display:block;max-width:100%}

/* ---------- hero: two columns, fills the first screen ---------- */
.hero{
  position:relative;
  /* vh first as a fallback; svh is the small viewport, so the hero does not
     sit under mobile browser chrome or jump as the address bar hides */
  min-height:100vh;
  min-height:100svh;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,5rem);
  align-items:stretch;
  padding:0 0 0 clamp(1.5rem,7vw,6rem);
  isolation:isolate;
}
.hero::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 95% at 0% 0%, rgba(204,165,159,.62) 0%, rgba(204,165,159,.22) 38%, rgba(255,255,255,0) 72%);
}
/* copy stays optically centred while the column itself is full height */
.hero-copy{
  display:flex;flex-direction:column;justify-content:center;
  /* without this the flex column stretches the button to the full column width */
  align-items:flex-start;
  padding:clamp(3rem,6vw,4.5rem) clamp(2rem,4vw,3.5rem) clamp(3rem,6vw,4.5rem) 0;
}

/* wordmark sits directly above the headline */
.logo{
  width:clamp(196px,25vw,318px);
  height:auto;
  margin-bottom:clamp(1.2rem,2.6vw,1.8rem);
}
.kicker{
  color:var(--rose);
  font-size:.7rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  margin-bottom:1.9rem;
}
.hero h1{
  font-size:clamp(2.1rem,5.4vw,3.85rem);
  letter-spacing:.015em;
  text-transform:uppercase;
  margin-bottom:1.4rem;
}
.hero .sub{
  color:var(--ink-soft);
  font-size:clamp(.86rem,1.4vw,.97rem);
  max-width:36ch;
  margin-bottom:1.7rem;
}
.btn{
  display:inline-block;
  background:var(--espresso);
  color:#fff;
  text-decoration:none;
  padding:1.1rem 2.8rem;
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  transition:background .35s ease;
  margin-bottom:1.5rem;
}
.btn:hover,.btn:focus-visible{background:var(--rose-deep)}
.ship{
  display:inline-block;
  margin-top:.3rem;
  padding-top:1.3rem;
  border-top:1px solid rgba(175,115,106,.3);
  color:var(--ink-soft);
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}

/* ---------- hero image: crossfading categories ---------- */
.hero-visual{position:relative}
.frame{
  position:relative;
  height:100%;
  overflow:hidden;
  background:var(--blush);
}
.slide{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center 60%;
  opacity:0;
  will-change:opacity,transform;
  animation:slideFade var(--cycle) infinite;
}
.s1{animation-delay:calc(var(--slide) * 0)}
.s2{animation-delay:calc(var(--slide) * 1)}
.s3{animation-delay:calc(var(--slide) * 2)}
.s4{animation-delay:calc(var(--slide) * 3)}
.s5{animation-delay:calc(var(--slide) * 4)}

/* Slides overlap by 4% of the cycle, and the delays are 20% apart, so one
   fades up exactly as the previous fades down and the frame never goes blank. */
@keyframes slideFade{
  0%   {opacity:0;transform:scale(1)}
  4%   {opacity:1}
  20%  {opacity:1}
  24%  {opacity:0;transform:scale(1.06)}
  100% {opacity:0;transform:scale(1.06)}
}

.cap-scrim{
  position:absolute;left:0;right:0;bottom:0;height:42%;
  background:linear-gradient(to top,rgba(45,25,21,.68),rgba(45,25,21,0));
}
.captions{
  position:absolute;left:0;right:0;bottom:1.3rem;
  height:1.5em;text-align:center;
}
.cap{
  position:absolute;left:0;right:0;
  opacity:0;
  color:#fff;
  font-size:clamp(.6rem,1.3vw,.7rem);
  letter-spacing:.28em;
  text-transform:uppercase;
  text-shadow:0 1px 12px rgba(30,15,12,.6);
  animation:capFade var(--cycle) infinite;
}
.c1{animation-delay:calc(var(--slide) * 0)}
.c2{animation-delay:calc(var(--slide) * 1)}
.c3{animation-delay:calc(var(--slide) * 2)}
.c4{animation-delay:calc(var(--slide) * 3)}
.c5{animation-delay:calc(var(--slide) * 4)}
/* clears before the next arrives, so two captions never sit on top of each other */
@keyframes capFade{
  0%   {opacity:0;transform:translateY(6px)}
  4%   {opacity:1;transform:translateY(0)}
  16%  {opacity:1;transform:translateY(0)}
  19%  {opacity:0;transform:translateY(-6px)}
  100% {opacity:0}
}

/* ---------- footer ---------- */
footer{
  background:var(--espresso);
  color:#e5d3cf;
  padding:clamp(2.6rem,5vw,3.6rem) clamp(1.5rem,7vw,6rem) 1.9rem;
}
.foot-inner{
  display:flex;flex-wrap:wrap;
  gap:1.8rem 3.5rem;
  justify-content:space-between;
  max-width:1180px;margin:0 auto;
}
.foot-label{
  color:var(--blush);
  font-size:.63rem;letter-spacing:.24em;text-transform:uppercase;
  margin-bottom:.5rem;
}
.foot-inner p{font-size:.82rem;line-height:1.8}
.foot-inner a{
  color:#fff;text-decoration:none;font-size:.9rem;
  border-bottom:1px solid rgba(229,211,207,.4);padding-bottom:2px;
}
.foot-inner a:hover{border-bottom-color:#fff}
.foot-bottom{
  max-width:1180px;margin:clamp(2rem,4vw,2.8rem) auto 0;
  padding-top:1.3rem;
  border-top:1px solid rgba(229,211,207,.2);
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(229,211,207,.7);
}

/* ---------- responsive ---------- */
@media(max-width:860px){
  .hero{
    grid-template-columns:1fr;
    gap:2.4rem;
    padding:clamp(2.8rem,7vw,4rem) clamp(1.5rem,6vw,3rem);
  }
  .hero-copy{padding:0}
  .hero .sub{max-width:46ch}
  .frame{height:clamp(300px,46vh,430px)}
}
@media(max-width:520px){
  /* on a phone the button should span the column */
  .hero-copy{align-items:stretch}
  .btn{display:block;text-align:center;padding:1.1rem 1.5rem}
}

/* honour reduced motion: hold the first image, no drift */
@media(prefers-reduced-motion:reduce){
  .slide,.cap{animation:none}
  .s1,.c1{opacity:1}
  .slide{transform:none}
  *{transition:none!important}
}