:root{
  --bone:#F2F0EB;
  --blaque:#171716;
  --olive:#505436;
  --oxblood:#642E32;
  --serif:"Cormorant Garamond",Garamond,"Times New Roman",serif;
  --sans:"Segoe UI","Source Sans 3",sans-serif;
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;background:var(--bone);color:var(--blaque);font-family:var(--sans)}
a{color:inherit;text-decoration:none}
.holding-page{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(330px,.8fr)}
.intro{min-height:100vh;padding:28px clamp(28px,5vw,82px) 34px;display:flex;flex-direction:column}
header{display:flex;align-items:flex-start;justify-content:space-between}
.logo{width:clamp(80px,7vw,112px);height:auto}
header p,.eyebrow,.panel-note,small{margin:0;text-transform:uppercase;font-size:10px;letter-spacing:.2em}
header p{padding-top:14px}
.intro-copy{margin:auto 0;width:min(850px,100%);padding:70px 0}
.eyebrow{margin-bottom:34px}
h1{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(66px,8.3vw,134px);line-height:.82;letter-spacing:-.055em}
h1 em{font-weight:400;color:var(--oxblood)}
.description{width:min(540px,82%);margin:48px 0 0 auto;font-family:var(--serif);font-size:clamp(20px,2vw,29px);line-height:1.3}
.availability{width:min(540px,82%);margin:30px 0 0 auto;padding-top:22px;border-top:1px solid rgba(23,23,22,.35);font-size:clamp(13px,1vw,15px);line-height:1.6;letter-spacing:.025em}
.availability a{border-bottom:1px solid var(--oxblood);font-weight:600}
footer{border-top:1px solid rgba(23,23,22,.35);padding-top:18px;display:grid;grid-template-columns:1fr 1fr auto;gap:28px;align-items:center}
footer a{display:inline-flex;align-items:center;font-size:11px;text-transform:uppercase;letter-spacing:.15em;white-space:nowrap}
.link-arrow{position:relative;display:inline-block;width:13px;height:13px;margin-left:7px;vertical-align:-1px;color:var(--blaque)}
.link-arrow::before{content:"";position:absolute;left:1px;bottom:2px;width:14px;height:1.5px;background:currentColor;transform:rotate(-45deg);transform-origin:left center}
.link-arrow::after{content:"";position:absolute;top:0;right:0;width:6px;height:6px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor}
small{font-size:9px;white-space:nowrap}
.brand-panel{--band-extension:clamp(104px,13vh,168px);position:relative;overflow:hidden;background:var(--olive);color:var(--bone);display:grid;grid-template-rows:1fr auto 1fr}
.brand-panel>div{position:relative;z-index:1;grid-row:2;background:var(--blaque);padding:clamp(54px,6vw,96px) clamp(28px,4vw,66px)}
.brand-panel>div::after{content:"";position:absolute;z-index:0;top:100%;left:0;width:100%;height:var(--band-extension);background:var(--blaque)}
.brand-panel .band-title{position:relative;z-index:1;transform:translateY(clamp(-34px,-2.4vw,-18px))}
.brand-panel .band-title p{margin:0;font-family:var(--serif);font-size:clamp(48px,5vw,82px);line-height:.9;letter-spacing:-.045em}
.band-pillars{position:absolute;z-index:2;left:50%;bottom:calc(var(--band-extension) * -1 + 28px);transform:translateX(-50%);margin:0;font-family:var(--sans);font-size:clamp(8px,.7vw,11px);line-height:1;text-align:center;text-transform:uppercase;letter-spacing:.14em;white-space:nowrap}
.band-pillars span{color:var(--oxblood);padding:0 .28em;font-size:1.15em}
.band-expressions{position:absolute;z-index:2;left:24px;right:24px;bottom:0;text-align:center;font-family:var(--sans)}
.band-expressions p{margin:0;line-height:1.4}
.expressions-heading{font-size:14px;letter-spacing:.035em}
.band-expressions .expressions-labels{margin-top:6px;font-size:12px;letter-spacing:.08em}
.brand-panel em{font-weight:400}
.panel-note{position:absolute;left:50%;bottom:38px;transform:translateX(-50%);width:100%;text-align:center;font-size:15px}
.panel-note-desktop{display:none}
.sparkle{position:absolute;color:var(--oxblood);line-height:1}
.sparkle-one{font-size:clamp(68px,8vw,128px);right:-16px;top:5%}
.sparkle-two{font-size:28px;left:13%;bottom:10%}

@media(min-width:801px){
  .brand-panel{display:block}
  .brand-panel>.brand-band{position:absolute;top:0;right:0;bottom:0;left:0;padding-top:calc(var(--band-top,34vh) + clamp(54px,6vw,96px))}
  .brand-panel>div::after{display:none}
  .brand-panel .band-expressions{position:relative;right:auto;bottom:auto;left:auto;margin-top:clamp(38px,4.5vh,64px)}
  .brand-panel .band-pillars{position:relative;bottom:auto;left:auto;transform:none;margin:clamp(24px,3vh,40px) auto 0}
  .brand-panel .panel-note-desktop{position:relative;display:block;left:auto;bottom:auto;transform:none;margin:clamp(24px,3vh,40px) auto 0}
  .brand-panel>.panel-note-mobile{display:none}
}

@media(max-width:800px){
  .holding-page{grid-template-columns:1fr}
  .intro{min-height:auto;padding:22px 24px 28px}
  header p{font-size:8px}
  .intro-copy{padding:62px 0 46px}
  h1{font-size:clamp(62px,18vw,92px)}
  .description{width:90%;margin:38px 0 0 auto;font-size:21px}
  .availability{width:90%;margin:26px 0 0 auto;padding-top:20px;font-size:16px;line-height:1.55}
  footer{grid-template-columns:auto auto;justify-content:space-between;gap:12px}
  footer a:first-of-type{grid-column:1;grid-row:1}
  footer small{grid-column:2;grid-row:1;justify-self:end;margin:0}
  footer a:nth-of-type(2){grid-column:1/-1;grid-row:2;margin-top:8px}
  .brand-panel{min-height:auto;display:block;background:var(--blaque)}
  .brand-panel>div{padding:46px 24px 44px}
  .brand-panel>div::after{display:none}
  .brand-panel .band-title{transform:none;min-height:0}
  .brand-panel .band-title p{font-size:clamp(44px,12.75vw,66px)}
  .brand-panel .band-expressions{position:relative;right:auto;bottom:auto;left:auto;margin-top:34px}
  .brand-panel .band-pillars{position:relative;bottom:auto;left:auto;transform:none;margin:22px auto 0;font-size:10px;letter-spacing:.1em}
  .brand-panel .panel-note-desktop{position:relative;display:block;left:auto;bottom:auto;transform:none;margin:24px auto 0;font-size:15px}
  .brand-panel>.panel-note-mobile{display:none}
}

@media(prefers-reduced-motion:no-preference){
  .intro-copy{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
  .brand-panel>div{animation:rise .8s .12s cubic-bezier(.2,.7,.2,1) both}
  @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
}
