
.st-open{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding:0 0 clamp(70px,10vw,130px);overflow:hidden;color:#FFF6E7;background:var(--night);
}
.st-open-photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%;
}
.st-open-veil{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(12,9,6,.95),rgba(14,10,7,.55) 45%,rgba(16,11,7,.7)),
    radial-gradient(100% 70% at 15% 100%,rgba(180,85,42,.27),transparent 60%);
}
.st-open-dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.st-open-copy{position:relative;z-index:2;}
.st-open .eyebrow{color:var(--olive-lt);}
.st-open h1{
  font-size:clamp(2.4rem,5.6vw,4.6rem);max-width:18ch;margin:0 0 1.2rem;
  text-shadow:0 6px 40px rgba(0,0,0,.55);
}
.st-lede{color:rgba(255,246,231,.78);font-size:1.05rem;margin:0;}
.st-cue{
  position:absolute;left:50%;bottom:26px;width:1px;height:56px;
  background:linear-gradient(to bottom,transparent,rgba(255,246,231,.75));
}

.st-scene{
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;
  gap:0;padding:0;background:var(--cream);
}
.st-scene-dark{background:var(--night);color:#FFF6E7;}
.st-scene-quiet{background:var(--paper);}

.st-visual{
  position:sticky;top:0;height:100svh;overflow:hidden;
}
.st-visual img,
.st-visual video{
  width:100%;height:100%;object-fit:cover;display:block;
  object-position:50% 8%;
  transform:scale(1.04);transition:transform 1.2s var(--ease-out);
}
.st-visual-veil{
  position:absolute;inset:0;
  background:linear-gradient(to right,rgba(12,9,6,.5),transparent 55%);
}
.st-visual-veil-soft{background:linear-gradient(to right,rgba(12,9,6,.25),transparent 60%);}

.st-visual-grow img{will-change:transform;}

.st-steps{
  display:flex;flex-direction:column;justify-content:center;
  gap:12vh;padding:18vh clamp(24px,4vw,64px);
}
.st-step{
  opacity:.34;transform:translateY(18px);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);
  max-width:44ch;
}
.st-step.active{opacity:1;transform:none;}
.st-step.seen{transform:none;}
.st-step h2{font-size:clamp(1.9rem,3.4vw,3rem);margin:0 0 .2rem;}
.st-step p{font-size:1.06rem;line-height:1.7;margin:0;}
.st-scene-dark .st-step p{color:rgba(255,246,231,.86);}
.st-scene-dark .eyebrow{color:var(--olive-lt);}
.st-scene-dark .st-step p.eyebrow{color:var(--olive-lt);}

.st-step-figures{display:flex;gap:clamp(20px,3vw,44px);flex-wrap:wrap;max-width:none;}
.st-figure{display:flex;flex-direction:column;gap:.3rem;max-width:190px;}
.st-figure strong{font-family:'Fraunces',serif;font-size:2.4rem;color:var(--copper);line-height:1;}
.st-figure span{font-size:.86rem;color:var(--ink-soft);line-height:1.4;}
.st-scene-dark .st-figure span{color:rgba(255,246,231,.7);}

.st-dedication{
  font-family:'Fraunces',serif;font-style:italic;color:var(--copper);font-size:1.1rem;
}

.st-clip{
  position:relative;min-height:100svh;overflow:hidden;
  display:flex;align-items:center;background:var(--night);color:#FFF6E7;
  padding:clamp(50px,8vw,90px) 0;margin:0;
}
.st-clip-wash{
  position:absolute;inset:-8%;background-size:cover;background-position:center;
  filter:blur(38px) brightness(.4) saturate(1.1);transform:scale(1.1);
}
.st-clip-inner{
  position:relative;display:grid;grid-template-columns:auto 1fr;
  gap:clamp(28px,5vw,72px);align-items:center;
}
.st-clip-frame{
  width:min(420px,42vw);aspect-ratio:9/16;flex:none;
  border-radius:10px;overflow:hidden;background:#0C0906;
  box-shadow:0 40px 90px -34px rgba(0,0,0,.9),0 0 70px -30px rgba(232,163,61,.3375);
  isolation:isolate;transform:translateZ(0);
}
.st-clip-video{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;
  opacity:0;transition:opacity 1s var(--ease-out);
}
.st-clip.playing .st-clip-video{opacity:1;}
.st-clip-copy{max-width:26ch;}

.st-clip.flip .st-clip-inner{grid-template-columns:1fr auto;}
.st-clip.flip .st-clip-frame{order:2;}
.st-clip.flip .st-clip-copy{order:1;justify-self:end;text-align:right;}
.st-clip.flip .eyebrow{justify-content:flex-end;}
.st-clip.flip .eyebrow::before{order:2;}
.st-clip .eyebrow{color:var(--olive-lt);}
.st-clip-caption{
  font-family:'Fraunces',serif;font-size:clamp(1.5rem,3vw,2.5rem);
  line-height:1.18;margin:0;text-shadow:0 4px 30px rgba(0,0,0,.6);
}

.st-diary{background:var(--cream-2);padding:clamp(70px,9vw,120px) 0;}
.st-diary h2{font-size:clamp(2rem,4vw,3.2rem);margin:0 0 .6rem;}
.st-diary-intro{color:var(--ink-soft);max-width:52ch;margin:0 0 clamp(28px,4vw,44px);}

.st-close{
  background:linear-gradient(180deg,var(--cream),var(--cream-2));
  padding:clamp(80px,11vw,150px) 0;
}
.st-close{text-align:center;}
.st-close .eyebrow{justify-content:center;}
.st-close h2{
  font-size:clamp(2rem,4vw,3.2rem);margin:0 auto clamp(28px,4vw,46px);
  max-width:30ch;
}
.st-next{list-style:none;padding:0;margin:0 auto clamp(30px,4vw,48px);max-width:820px;text-align:left;}
.st-next li{
  display:grid;grid-template-columns:120px 1fr auto auto;gap:1rem;align-items:center;
  padding:1.05rem 0;border-top:1px solid var(--line);
}
.st-next li:last-child{border-bottom:1px solid var(--line);}
.st-next-when{
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--copper);font-weight:600;
}
.st-next-title{font-family:'Fraunces',serif;font-size:1.15rem;}
.st-next-price{font-family:'Fraunces',serif;font-size:1.1rem;color:var(--ink-soft);}
.st-close-actions{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;}
@media (max-width:720px){
  .st-close{text-align:center;}
  .st-close h2{
    margin-left:auto;margin-right:auto;
    font-size:clamp(1.45rem,6.4vw,2rem);
  }
  .st-close .eyebrow{justify-content:center;}
  .st-close-actions{
    flex-direction:column;align-items:stretch;gap:.7rem;
    max-width:340px;margin:0 auto;
  }
  .st-close-actions .btn{
    width:100%;justify-content:center;padding:1.05rem 1.4rem;font-size:1rem;
  }
  .st-next li{
    text-align:left;grid-template-columns:1fr auto;
    row-gap:.45rem;padding:1.15rem 0;
  }
  .st-next-when{grid-column:1 / -1;}
  .st-next-title{grid-column:1 / -1;font-size:1.2rem;line-height:1.25;}
  .st-next-price{grid-column:1;justify-self:start;align-self:center;}
  .st-next li .btn{
    grid-column:2;justify-self:end;width:auto;
    padding:.72rem 1.6rem;font-size:.92rem;
  }
  .st-next li .seats{grid-column:2;justify-self:end;}
}

@media (max-width:900px){

  .st-scene{display:block;position:relative;}

  .st-visual{
    position:sticky;top:0;height:100svh;width:100%;z-index:0;
  }
  .st-visual img,
.st-visual video{
    width:100%;height:100%;object-fit:cover;object-position:50% 8%;
    filter:brightness(.72) contrast(1.03);
  }
  .st-visual-veil,
  .st-visual-veil-soft{
    background:linear-gradient(to bottom,
      rgba(10,7,5,.6) 0%,
      rgba(10,7,5,.3) 28%,
      rgba(10,7,5,.42) 58%,
      rgba(10,7,5,.82) 100%);
  }

  .st-visual-grow::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(to bottom,rgba(10,7,5,.6),rgba(10,7,5,.35) 35%,rgba(10,7,5,.9));
  }

  .st-steps{
    position:relative;z-index:1;margin-top:-100svh;
    padding:0;gap:0;max-width:none;display:block;
  }
  .st-step{
    min-height:50svh;max-width:none;margin:0;
    display:flex;flex-direction:column;justify-content:flex-end;
    padding:0 clamp(22px,6vw,34px) 6vh;
    color:#FFF6E7;opacity:.25;transform:translateY(24px);
  }
  .st-step:first-child{min-height:72svh;}
  .st-step.active{opacity:1;transform:none;}
  .st-step.seen{transform:none;}
  .st-step.seen:not(.active){opacity:.4;}
.st-step.seen{transform:none;}
  .st-step h2{
    font-size:clamp(1.9rem,8vw,2.6rem);color:#FFF6E7;
    text-shadow:0 1px 3px rgba(0,0,0,.6),0 4px 30px rgba(0,0,0,.8);margin-bottom:.4rem;
  }
  .st-step p,
  .st-scene-dark .st-step p{
    color:rgba(255,246,231,.96);font-size:1.05rem;line-height:1.65;
    text-shadow:0 1px 2px rgba(0,0,0,.55),0 6px 24px rgba(0,0,0,.55);
    text-shadow:0 2px 20px rgba(0,0,0,.75);max-width:34ch;
  }
  .st-step .eyebrow{color:var(--olive-lt);}

  .st-step-figures{
    flex-direction:row;flex-wrap:wrap;gap:1.4rem 2rem;
    align-items:flex-start;justify-content:center;text-align:center;
  }
  .st-figure{align-items:center;}
  .st-figure strong{color:var(--olive-lt);font-size:2.1rem;}
  .st-figure span,
  .st-scene-dark .st-figure span{color:rgba(255,246,231,.78);}
  .st-dedication{color:var(--olive-lt);font-size:1.15rem;}

  .st-clip{height:100svh;min-height:0;padding:0;align-items:stretch;}
  .st-clip-wash{display:none;}
  .st-clip-inner{
    position:absolute;inset:0;display:block;
    width:auto;max-width:none;margin:0;padding:0;
  }
  .st-clip-frame{
    width:100%;height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none;
  }
  .st-clip-copy{
    position:absolute;left:0;right:0;bottom:0;max-width:none;z-index:2;
    padding:26vh clamp(22px,6vw,34px) clamp(38px,9vw,64px);
    background:linear-gradient(to top,rgba(10,7,5,.92),rgba(10,7,5,.6) 45%,transparent);
    text-align:left;
  }
  .st-clip.flip .st-clip-copy{text-align:left;justify-self:auto;}
  .st-clip.flip .eyebrow{justify-content:flex-start;}
  .st-clip.flip .eyebrow::before{order:0;}
  .st-clip-caption{font-size:clamp(1.6rem,7.5vw,2.2rem);max-width:15ch;}

  .st-open h1{font-size:clamp(1.9rem,7.4vw,3rem);}
  .st-next li{grid-template-columns:1fr auto;gap:.5rem 1rem;}
  .st-next-when{grid-column:1 / -1;}
}

@media (prefers-reduced-motion:reduce){
  .st-step{opacity:1;transform:none;}
  .st-visual img,
.st-visual video{transform:none;}
  .st-clip-video{opacity:1;}
}

.st-chapter-open{
  background:var(--cream);
  padding:clamp(84px,12vw,150px) 0 clamp(70px,10vw,120px);
  text-align:center;
}
.st-chapter-open .eyebrow{justify-content:center;}
.st-chapter-open h2{
  font-size:clamp(1.7rem,4.2vw,3.4rem);margin:.5rem auto .9rem;
  max-width:min(18ch,100%);text-wrap:balance;line-height:1.08;
  overflow-wrap:break-word;
}
.st-chapter-lede{
  font-size:clamp(1rem,1.4vw,1.18rem);color:var(--ink-soft);
  max-width:min(52ch,100%);margin:0 auto;text-wrap:pretty;
}
.st-chapter-open .shell::after{
  content:"";display:block;width:64px;height:2px;border-radius:2px;
  margin:clamp(26px,4vw,40px) auto 0;
  background:linear-gradient(to right,transparent,var(--copper),transparent);
}

.st-chapter-close{
  background:var(--cream);
  padding:clamp(70px,10vw,120px) 0;
  text-align:center;
}
.st-chapter-close::after{
  content:"";display:block;width:64px;height:2px;border-radius:2px;
  margin:0 auto;
  background:linear-gradient(to right,transparent,var(--copper),transparent);
}

.st-scene-chapter .st-steps{gap:12vh;padding:18vh clamp(24px,4vw,64px);}
.st-scene-chapter .st-step h2{font-size:clamp(1.6rem,2.8vw,2.3rem);}

.st-pull{
  font-family:'Fraunces',serif;font-style:italic;
  font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.45;
  padding-left:1.2rem;border-left:3px solid var(--copper);
}
.st-scene-dark .st-pull{border-left-color:var(--olive-lt);color:#FFF6E7;}

.st-scene-chapter.flip .st-visual{order:2;}
.st-scene-chapter.flip .st-steps{order:1;}
.st-scene-chapter.flip .st-visual-veil{
  background:linear-gradient(to left,rgba(12,9,6,.5),transparent 55%);
}
.st-scene-chapter.flip .st-visual-veil-soft{
  background:linear-gradient(to left,rgba(12,9,6,.25),transparent 60%);
}

@media (max-width:900px){
  .st-chapter-open{padding:clamp(60px,14vw,90px) 0 clamp(46px,10vw,70px);}
  .st-chapter-open h2{font-size:clamp(1.5rem,6.6vw,2.1rem);max-width:min(16ch,100%);}
  .st-chapter-lede{font-size:.98rem;max-width:min(34ch,100%);}
  .st-chapter-close{padding:clamp(54px,12vw,80px) 0;}
  .st-pull,
  .st-scene-dark .st-pull{color:#FFF6E7;border-left-color:var(--olive-lt);}
  .st-step .eyebrow{text-shadow:0 1px 3px rgba(0,0,0,.7);}
  .st-pull{text-shadow:0 1px 3px rgba(0,0,0,.6),0 6px 24px rgba(0,0,0,.5);}
}

#chapter-2 .st-visual,
#chapter-3 .st-visual,
#chapter-5 .st-visual,
#chapter-6 .st-visual,
#chapter-7 .st-visual{isolation:isolate;}

#chapter-2 .st-visual::before,
#chapter-3 .st-visual::before,
#chapter-5 .st-visual::before,
#chapter-6 .st-visual::before,
#chapter-7 .st-visual::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:50% 50%;
  filter:blur(42px) brightness(.5) saturate(.85);
  transform:scale(1.12);
}
#chapter-2 .st-visual::before{background-image:url("../img/st-young-nicolaas.jpg");}
#chapter-7 .st-visual::before{background-image:url("../img/st-chapter7.jpg");}

#chapter-2 .st-visual img,
#chapter-5 .st-visual img,
#chapter-6 .st-visual img,
#chapter-7 .st-visual img,
#chapter-3 .st-visual img{
  position:relative;z-index:1;
  object-fit:contain;object-position:50% 50%;transform:none;
}
#chapter-2 .st-visual-veil,
#chapter-3 .st-visual-veil,
#chapter-5 .st-visual-veil,
#chapter-6 .st-visual-veil,
#chapter-7 .st-visual-veil{z-index:2;}

#chapter-6 .st-visual::before{background-image:url("../img/st-chapter6.jpg");}

#chapter-5 .st-visual::before{background-image:url("../img/st-chapter5.jpg");}
#chapter-5 .st-visual-veil{background:linear-gradient(to right,rgba(12,9,6,.32),transparent 58%);}

#chapter-3 .st-visual::before{background-image:url("../img/st-chapter3.jpg");}

@media (max-width: 700px){
  #chapter-5 .st-visual img{
    object-fit:contain;object-position:50% 50%;transform:none;
    filter:none;
  }
  #chapter-5 .st-visual-veil{background:none;}
}

.st-visual video::-webkit-media-controls,
.st-visual video::-webkit-media-controls-panel,
.st-visual video::-webkit-media-controls-start-playback-button,
.st-visual video::-webkit-media-controls-overlay-play-button{
  display:none !important;
  -webkit-appearance:none;
  opacity:0 !important;
}

@media (max-width: 900px){
  .st-scene .st-step h2,
  .st-scene .st-step p,
  .st-scene .st-step .eyebrow,
  .st-scene .st-step .st-pull,
  .st-scene .st-step li,
  .st-scene .st-figure strong,
  .st-scene .st-figure span,
  .st-scene .st-dedication,
  .st-chapter-open .eyebrow,
  .st-chapter-open h2,
  .st-chapter-open .st-chapter-lede,
  .st-open h1,
  .st-open p,
  .st-close .eyebrow,
  .st-close h2,
  .st-close p{
    text-shadow:
      0 1px 2px rgba(0,0,0,.85),
      0 2px 8px rgba(0,0,0,.8),
      0 5px 22px rgba(0,0,0,.7),
      0 10px 48px rgba(0,0,0,.55);
  }
}

@media (max-width: 900px){
  .st-open h1,
  .st-step h2,
  .st-chapter-open h2,
  .st-chapter-open .st-chapter-lede,
  .st-close h2,
  .st-step .st-pull{
    text-wrap:pretty;
    text-wrap:balance;
  }
  .st-step h2{font-size:clamp(1.8rem,7.4vw,2.5rem);}
}

@media (max-width:900px){

  .st-scene .st-visual img,
  #chapter-2 .st-visual img,
  #chapter-5 .st-visual img{
    filter:brightness(1) contrast(1);
    transition:filter .9s cubic-bezier(.33,0,.2,1);
  }
  #chapter-2 .st-visual::before,
  #chapter-3 .st-visual::before,
  #chapter-5 .st-visual::before,
  #chapter-6 .st-visual::before,
  #chapter-7 .st-visual::before{
    filter:blur(42px) brightness(1) saturate(1);
  }

  #chapter-2 .st-visual::after,
  #chapter-3 .st-visual::after,
  #chapter-5 .st-visual::after,
  #chapter-6 .st-visual::after,
  #chapter-7 .st-visual::after{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:#0A0705;opacity:0;
    transition:opacity .9s cubic-bezier(.33,0,.2,1);
  }

  .st-scene .st-visual.words-over img{
    filter:brightness(.72) contrast(1.03);
  }
  #chapter-2 .st-visual.words-over img,
  #chapter-5 .st-visual.words-over img{
    filter:brightness(.62) contrast(1.04);
  }
  #chapter-3 .st-visual.words-over::after,
  #chapter-6 .st-visual.words-over::after,
  #chapter-7 .st-visual.words-over::after{opacity:.7;}
  #chapter-2 .st-visual.words-over::after,
  #chapter-5 .st-visual.words-over::after{opacity:.85;}
}

@media (max-width:900px) and (prefers-reduced-motion:reduce){
  .st-scene .st-visual img{filter:brightness(.72) contrast(1.03);transition:none;}
  #chapter-2 .st-visual img,
  #chapter-5 .st-visual img{filter:brightness(.62) contrast(1.04);transition:none;}
  #chapter-3 .st-visual::after,
  #chapter-6 .st-visual::after,
  #chapter-7 .st-visual::after{opacity:.7;transition:none;}
  #chapter-2 .st-visual::after,
  #chapter-5 .st-visual::after{opacity:.85;transition:none;}
}
