/* casa.css — style 17, "the roofline".

   The apartment is one long attic with the same pitched roof over every room,
   so one pitched line runs down the whole page behind everything, fixed to the
   viewport, sliding and flattening as you scroll. Nothing else on the page
   moves. That restraint is deliberate: the rooms are already busy with timber.

   Palette read off the photographs: honey pine, white plaster, the blue of the
   sofa cushions and the red of the roof tiles outside. */

:root{
  --paper  :#FBF9F5;
  --paper-2:#F1ECE3;
  --ink    :#241C14;
  --ink-d  :rgba(36,28,20,.62);
  --ink-f  :rgba(36,28,20,.34);
  --pine   :#C0813F;
  --alp    :#3B5875;               /* the sofa and the cushions */
  --tile   :#B4462E;               /* the roofs outside the window */
  --hair   :rgba(36,28,20,.13);
  --pad    :clamp(22px,5vw,92px);
  --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.7;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:.32em;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.4rem,6.8vw,5.6rem)}
.display em{font-style:italic;color:var(--pine)}
.h2{font-family:var(--serif);font-weight:400;line-height:1.08;
  font-size:clamp(1.6rem,3.6vw,2.8rem)}

/* ---------- THE ROOFLINE ----------
   Fixed behind everything, viewBox in percent so the path maths in JS is just
   0 to 100 either way. preserveAspectRatio none so it stretches to the window. */
.roof{position:fixed;inset:0;z-index:0;pointer-events:none}
.roof svg{width:100%;height:100%;display:block}
.roof path{fill:none;stroke:var(--pine);stroke-width:.16;opacity:.42;
  vector-effect:non-scaling-stroke}
main,.nav,.foot{position:relative;z-index:1}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;gap:14px;padding:18px var(--pad);
  background:linear-gradient(180deg,rgba(251,249,245,.94),rgba(251,249,245,0))}
.nav__brand{font-family:var(--serif);font-size:1.05rem}
.nav__brand span{color:var(--pine)}
.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(20,15,10,.3) 0%,rgba(20,15,10,0) 36%,rgba(20,15,10,.76) 100%)}
.hero__in{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(50px,10vh,116px);
  z-index:2;color:#fff}
.hero__in .tag{color:rgba(255,255,255,.72)}
.hero h1{margin:16px 0 18px}
.hero h1 em{color:#F0C68C}
.hero__sub{color:rgba(255,255,255,.86);max-width:44ch}

/* ---------- lead in ---------- */
.intro{padding:clamp(76px,14vh,168px) var(--pad);max-width:1120px;margin:0 auto}
.intro p{font-family:var(--serif);font-weight:400;line-height:1.2;
  font-size:clamp(1.5rem,3.6vw,2.7rem);max-width:22ch}
.intro p em{font-style:italic;color:var(--alp)}
.intro small{display:block;margin-top:26px;font-size:1rem;color:var(--ink-d);max-width:54ch}

/* ---------- rooms, alternating ---------- */
.room{padding:clamp(30px,6vh,70px) var(--pad);max-width:1300px;margin:0 auto;
  display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(20px,4vw,64px);align-items:center}
.room--flip{grid-template-columns:1fr 1.55fr}
.room--flip .room__media{order:2}
.room--flip .room__body{order:1}
.room__media img{width:100%;object-fit:cover}
.room--wide .room__media img{aspect-ratio:16/9}
.room--tall .room__media img{aspect-ratio:4/5}
.room__body h2{margin:12px 0 12px}
.room__body p{color:var(--ink-d);max-width:40ch}
@media (max-width:820px){
  .room,.room--flip{grid-template-columns:1fr;gap:20px}
  .room--flip .room__media{order:1}
  .room--flip .room__body{order:2}
}

/* ---------- a statement ---------- */
.say{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.6rem,4.2vw,3.2rem);max-width:20ch}
.say p em{font-style:italic;color:var(--tile)}
.say small{display:block;margin-top:24px;font-size:1rem;color:var(--ink-d);max-width:54ch}

/* ---------- what is in it ---------- */
.facts{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;background:var(--paper-2)}
.pano__track{height:220vh}
.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(20,15,10,.34) 0%,rgba(20,15,10,0) 34%,rgba(20,15,10,.76) 100%)}
.pano__copy{position:absolute;left:var(--pad);right:var(--pad);
  bottom:clamp(52px,10vh,112px);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{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}
  .roof{display:none}
  .pano__hint i::after{animation:none}
}

/* ---------- the form ---------- */
.lead{
  --lf-bg     :var(--paper-2);
  --lf-fg     :var(--ink);
  --lf-accent :var(--alp);
  --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)}