/* doll.css — style 19, "the stack".

   Every room is a full screen card that sticks to the top of the window, so the
   next room lands on top of the last one and the pile grows behind you. The
   card underneath shrinks a little and dims. Nothing else in this portfolio
   piles up like this.

   It suits a family house because you do not glide through one. You go into a
   room, then into the next one, and the last room is still there behind you.

   Palette off the photographs: warm oak floor, the greys and greige of the
   walls, and the two colours the family actually chose, a red chair and a
   teal rug. */

:root{
  --paper  :#FAF7F2;
  --paper-2:#EFE9E0;
  --ink    :#22201D;
  --ink-d  :rgba(34,32,29,.62);
  --ink-f  :rgba(34,32,29,.34);
  --oak    :#B98C55;
  --teal   :#2E7F8C;               /* the rug in the children's room */
  --brick  :#C0392B;               /* the red chair */
  --hair   :rgba(34,32,29,.13);
  --pad    :clamp(20px,4.6vw,88px);
  --serif  :"Canela","Didot",Georgia,serif;
  --sans   :-apple-system,BlinkMacSystemFont,"Inter","Helvetica Neue",Arial,sans-serif;
  --ease   :cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:clamp(.95rem,1.05vw,1.04rem);line-height:1.68;font-weight:300;
  -webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

.tag{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-f)}
.display{font-family:var(--serif);font-weight:400;line-height:1.03;
  letter-spacing:-.018em;font-size:clamp(2.3rem,6.6vw,5.4rem)}
.display em{font-style:italic;color:var(--oak)}
.h2{font-family:var(--serif);font-weight:400;line-height:1.08;
  font-size:clamp(1.5rem,3.4vw,2.7rem)}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;
  justify-content:space-between;gap:14px;padding:18px var(--pad);
  background:linear-gradient(180deg,rgba(250,247,242,.9),rgba(250,247,242,0))}
.nav__brand{font-family:var(--serif);font-size:1.05rem}
.nav__brand span{color:var(--teal)}
.nav__cta{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  border:1px solid var(--hair);border-radius:100px;padding:0 20px;min-height:44px;
  display:inline-flex;align-items:center;background:var(--paper);
  transition:background .35s var(--ease),color .35s var(--ease)}
.nav__cta:hover{background:var(--ink);color:var(--paper)}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden}
.hero__shot{position:absolute;inset:0}
.hero__shot img{width:100%;height:100%;object-fit:cover}
.hero__scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,16,14,.34) 0%,rgba(18,16,14,0) 38%,rgba(18,16,14,.78) 100%)}
.hero__in{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(48px,9vh,112px);
  z-index:2;color:#fff}
.hero__in .tag{color:rgba(255,255,255,.72)}
.hero h1{margin:14px 0 16px}
.hero h1 em{color:#EFC58A}
.hero__sub{color:rgba(255,255,255,.86);max-width:44ch}

/* ---------- lead in ---------- */
.intro{padding:clamp(70px,13vh,160px) var(--pad);max-width:1100px;margin:0 auto}
.intro p{font-family:var(--serif);font-weight:400;line-height:1.2;
  font-size:clamp(1.45rem,3.5vw,2.6rem);max-width:22ch}
.intro p em{font-style:italic;color:var(--teal)}
.intro small{display:block;margin-top:24px;font-size:1rem;color:var(--ink-d);max-width:54ch}

/* ---------- THE STACK ----------
   Each card sticks at the top, so the next one lands on it. --past is 0 while a
   card is on top of the pile and 1 once the next has covered it.            */
.stack{position:relative}
.card{--past:0;position:sticky;top:0;height:100svh;overflow:hidden;
  transform:scale(calc(1 - var(--past) * .06));
  border-radius:calc(var(--past) * 14px);
  will-change:transform}
.card__shot{position:absolute;inset:0}
.card__shot img{width:100%;height:100%;object-fit:cover}
/* the card underneath darkens as the next one covers it */
.card__dim{position:absolute;inset:0;background:#12100E;opacity:calc(var(--past) * .55)}
.card__scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,16,14,.42) 0%,rgba(18,16,14,0) 34%,rgba(18,16,14,.82) 100%)}
.card__body{position:absolute;left:var(--pad);right:var(--pad);
  bottom:clamp(48px,9vh,110px);z-index:2;color:#fff;max-width:34ch;
  opacity:calc(1 - var(--past) * 1.6)}
.card__body .tag{color:rgba(255,255,255,.7)}
.card__body h2{margin:10px 0 10px}
.card__body p{color:rgba(255,255,255,.84)}
.card__no{position:absolute;right:var(--pad);top:calc(var(--pad) + 40px);z-index:2;
  font-family:var(--serif);color:rgba(255,255,255,.5);font-size:.92rem;
  opacity:calc(1 - var(--past) * 1.6)}

/* ---------- a statement ---------- */
.say{position:relative;z-index:3;background:var(--paper);
  padding:clamp(70px,13vh,168px) var(--pad);max-width:1180px;margin:0 auto}
.say p{font-family:var(--serif);font-weight:400;line-height:1.16;
  font-size:clamp(1.55rem,4.1vw,3.1rem);max-width:21ch}
.say p em{font-style:italic;color:var(--brick)}
.say small{display:block;margin-top:24px;font-size:1rem;color:var(--ink-d);max-width:54ch}

/* ---------- facts ---------- */
.facts{position:relative;z-index:3;background:var(--paper);
  padding:0 var(--pad) clamp(70px,12vh,160px);max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.4vw,32px)}
.facts div{border-top:1px solid var(--hair);padding-top:15px}
.facts b{display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.05rem,1.8vw,1.35rem)}
.facts span{display:block;margin-top:7px;font-size:.58rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-f)}
@media (max-width:760px){ .facts{grid-template-columns:1fr 1fr} }

/* ---------- the live 360 ---------- */
.pano{position:relative;z-index:3;background:var(--paper-2)}
.pano__track{height:230vh}
.pano__sticky{position:sticky;top:0;height:100svh;overflow:hidden}
.pano__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;
  cursor:grab;touch-action:pan-y;opacity:0;transition:opacity .8s var(--ease)}
.pano.is-loaded .pano__canvas{opacity:1}
.pano.is-dragging .pano__canvas{cursor:grabbing}
.pano__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pano.is-loaded .pano__poster{opacity:0;transition:opacity .8s var(--ease)}
.pano__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,16,14,.36) 0%,rgba(18,16,14,0) 34%,rgba(18,16,14,.78) 100%)}
.pano__copy{position:absolute;left:var(--pad);right:var(--pad);
  bottom:clamp(50px,9vh,110px);z-index:2;pointer-events:none;color:#fff}
.pano__copy .tag{color:rgba(255,255,255,.7)}
.pano__copy h2{max-width:16ch;margin:12px 0 18px}
.pano__hint{display:inline-flex;align-items:center;gap:11px;
  border:1px solid rgba(255,255,255,.44);border-radius:100px;padding:11px 20px;
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.pano__hint i{width:16px;height:16px;border:1px solid currentColor;border-radius:50%;
  position:relative;flex:0 0 auto}
.pano__hint i::after{content:"";position:absolute;top:50%;left:50%;width:7px;height:1px;
  background:currentColor;transform:translate(-50%,-50%);animation:nudge 2.2s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:translate(-140%,-50%)}50%{transform:translate(40%,-50%)}}
.pano.is-fallback .pano__canvas,.pano.is-fallback .pano__hint{display:none}
.pano.is-fallback .pano__poster{opacity:1}
.pano__copy a{pointer-events:auto}
.pano__hint--go{margin-left:10px;transition:background .3s ease,color .3s ease}
.pano__hint--go:hover{background:#fff;color:var(--ink)}

/* ---------- reveal, visible by default ---------- */
.js-anim [data-rise]{opacity:0;transform:translateY(16px);
  transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js-anim [data-rise].is-in{opacity:1;transform:none}

.foot{position:relative;z-index:3;background:var(--paper);
  border-top:1px solid var(--hair);padding:32px var(--pad);display:flex;
  flex-wrap:wrap;gap:9px 28px;justify-content:space-between;color:var(--ink-f);font-size:.72rem}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-anim [data-rise]{opacity:1;transform:none;transition:none}
  /* the pile becomes an ordinary run of pictures */
  .card{position:static;height:auto;transform:none;border-radius:0}
  .card__shot{position:static}
  .card__shot img{aspect-ratio:3/2}
  .card__dim{display:none}
  .card__body,.card__no{position:static;opacity:1;color:var(--ink);padding:20px 0 34px}
  .card__body .tag,.card__body p{color:var(--ink-d)}
  .pano__hint i::after{animation:none}
}

/* ---------- the form ---------- */
.lead{position:relative;z-index:3;
  --lf-bg     :var(--paper-2);
  --lf-fg     :var(--ink);
  --lf-accent :var(--teal);
  --lf-line   :var(--hair);
  --lf-muted  :var(--ink-d);
}
.lead__title{font-family:var(--serif);font-weight:400}
.lead__btn{color:var(--paper)}
.lead__field select option{background:var(--paper);color:var(--ink)}