/* hunters.css — style 14, "the window".

   Every other page in this portfolio either cross fades photographs or slides
   them. This one OPENS them: each picture starts as a letterbox slit in the
   middle of a dark page and widens to full bleed as you reach it, the way a
   shutter opens. It suits this house because the whole place is built around
   what you can see out of it.

   The second move is the warm up. The page starts the cold blue of the valley
   in the morning and ends the colour of the room with the fire in it. One
   custom property, --warm, set from overall scroll, mixes every surface.

   Palette read off the photographs: stained beams, honey pine, plaster walls,
   the red of the porch cushion. */

:root{
  --cold    :#101720;              /* the valley before the sun is on it */
  --warm-bg :#1A1109;              /* the room with the fire in it */
  --bark    :#2A2018;
  --pine    :#C99055;              /* honey pine ceilings */
  --cream   :#F2EBDF;
  --cream-d :rgba(242,235,223,.66);
  --cream-f :rgba(242,235,223,.36);
  --ember   :#C4452C;              /* the porch cushion */
  --line    :rgba(242,235,223,.15);
  --pad     :clamp(22px,5vw,86px);
  --serif   :"Canela","Didot","Bodoni 72",Georgia,serif;
  --sans    :-apple-system,BlinkMacSystemFont,"Inter","Helvetica Neue",Arial,sans-serif;
  --ease    :cubic-bezier(.22,1,.36,1);
  --warm    :0;                    /* 0 at the top of the page, 1 at the bottom */
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:color-mix(in srgb, var(--warm-bg) calc(var(--warm) * 100%), var(--cold));
  color:var(--cream);font-family:var(--sans);
  font-size:clamp(.95rem,1.05vw,1.04rem);line-height:1.64;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(--cream-f)}
.display{font-family:var(--serif);font-weight:400;line-height:1.02;
  letter-spacing:-.02em;font-size:clamp(2.5rem,7.4vw,6.2rem)}
.display em{font-style:italic;color:var(--pine)}
.h2{font-family:var(--serif);font-weight:400;line-height:1.06;
  font-size:clamp(1.7rem,3.8vw,3.1rem)}

/* ---------- 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(10,8,6,.78),rgba(10,8,6,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(--line);border-radius:100px;padding:0 20px;min-height:44px;
  display:inline-flex;align-items:center;
  transition:background .35s var(--ease),color .35s var(--ease)}
.nav__cta:hover{background:var(--cream);color:var(--bark)}

/* ---------- 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(10,14,20,.52) 0%,rgba(10,14,20,.04) 40%,rgba(16,11,7,.88) 100%)}
.hero__in{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(50px,10vh,118px);z-index:2}
.hero h1{margin:16px 0 18px}
.hero__sub{color:var(--cream-d);max-width:46ch}

/* ---------- 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.8rem);max-width:22ch}
.intro p em{font-style:italic;color:var(--pine)}
.intro small{display:block;margin-top:26px;font-size:1rem;color:var(--cream-d);max-width:54ch}

/* ---------- THE WINDOW: the photograph opens as you reach it ----------

   --open runs 0 to 1 from JS. At 0 the picture is a thin slit in the middle of
   the screen, at 1 it is edge to edge. The image inside counter scales so the
   subject settles rather than zooms.

   inset() takes top/right/bottom/left, so half the closed amount on each side
   keeps the slit centred.                                                    */

.win{position:relative}
.win__track{height:210vh}
.win__sticky{position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.win__frame{--open:0;position:absolute;inset:0;
  clip-path:inset(
    calc((1 - var(--open)) * 30%)
    calc((1 - var(--open)) * 13%)
    round calc((1 - var(--open)) * 3px));
  will-change:clip-path}
.win__frame img{width:100%;height:100%;object-fit:cover;
  transform:scale(calc(1.14 - var(--open) * .14));will-change:transform}
.win__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,9,6,.44) 0%,rgba(12,9,6,0) 34%,rgba(12,9,6,.86) 100%);
  opacity:var(--open)}
.win__copy{position:absolute;left:var(--pad);right:var(--pad);
  bottom:clamp(52px,10vh,116px);z-index:3;max-width:36ch;
  opacity:0;transform:translateY(20px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.win.is-open .win__copy{opacity:1;transform:none}
.win__copy h2{margin:12px 0 12px}
.win__copy p{color:var(--cream-d)}

/* the number in the corner, so the four windows read as a sequence */
.win__no{position:absolute;top:calc(var(--pad) + 42px);right:var(--pad);z-index:3;
  font-family:var(--serif);font-size:.95rem;color:var(--cream-f)}

/* ---------- two pictures side by side ---------- */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.6vw,26px);
  padding:clamp(24px,5vh,60px) var(--pad)}
.pair figure{overflow:hidden;background:var(--bark)}
.pair img{width:100%;aspect-ratio:4/5;object-fit:cover}
.pair figcaption{margin-top:12px;font-size:.58rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--cream-f)}
@media (max-width:640px){ .pair{grid-template-columns:1fr;gap:26px} }

/* ---------- a statement ---------- */
.say{padding:clamp(76px,14vh,176px) 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.7rem,4.4vw,3.4rem);max-width:20ch}
.say p em{font-style:italic;color:var(--ember)}
.say small{display:block;margin-top:26px;font-size:1rem;color:var(--cream-d);max-width:54ch}

/* ---------- what is in the house ---------- */
.rooms{padding:clamp(30px,7vh,90px) var(--pad) clamp(76px,13vh,160px);
  max-width:1180px;margin:0 auto}
.rooms ol{list-style:none;counter-reset:r;margin-top:clamp(24px,4vh,44px)}
.rooms li{counter-increment:r;display:grid;grid-template-columns:auto 1fr auto;
  gap:clamp(14px,4vw,48px);align-items:baseline;padding:19px 0;border-top:1px solid var(--line)}
.rooms li:last-child{border-bottom:1px solid var(--line)}
.rooms li::before{content:"0" counter(r);font-family:var(--serif);color:var(--cream-f);font-size:.86rem}
.rooms li b{font-family:var(--serif);font-weight:400;font-size:clamp(1.05rem,2vw,1.45rem)}
.rooms li span{color:var(--cream-f);font-size:.58rem;letter-spacing:.24em;
  text-transform:uppercase;text-align:right}

/* ---------- the live 360 ---------- */
.pano{position:relative;background:var(--bark)}
.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;filter:brightness(.8)}
.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(12,9,6,.6) 0%,rgba(12,9,6,0) 36%,rgba(12,9,6,.86) 100%)}
.pano__copy{position:absolute;left:var(--pad);right:var(--pad);
  bottom:clamp(52px,10vh,114px);z-index:2;pointer-events:none}
.pano__copy h2{max-width:16ch;margin:12px 0 18px}
.pano__hint{display:inline-flex;align-items:center;gap:11px;border:1px solid var(--line);
  border-radius:100px;padding:11px 20px;font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cream-d)}
.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}
/* the copy block ignores pointer events so the 360 stays draggable underneath,
   so the link out has to take them back */
.pano__copy a{pointer-events:auto}
.pano__hint--go{margin-left:10px;transition:background .3s ease,color .3s ease}
.pano__hint--go:hover{background:var(--cream);color:var(--bark)}

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

.foot{border-top:1px solid var(--line);padding:32px var(--pad);display:flex;
  flex-wrap:wrap;gap:9px 28px;justify-content:space-between;color:var(--cream-f);font-size:.72rem}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-anim [data-rise]{opacity:1;transform:none;transition:none}
  /* the window stops being a window and becomes an ordinary picture */
  .win__track{height:auto}
  .win__sticky{position:static;height:auto}
  .win__frame{position:static;clip-path:none;height:70svh}
  .win__frame img{transform:none}
  .win__scrim{opacity:1}
  .win__copy{position:static;opacity:1;transform:none;padding:24px 0 0}
  .win__no{display:none}
  .pano__hint i::after{animation:none}
}

/* ---------- the form ---------- */
.lead{
  --lf-bg     :var(--bark);
  --lf-fg     :var(--cream);
  --lf-accent :var(--pine);
  --lf-line   :var(--line);
  --lf-muted  :var(--cream-d);
}
.lead__title{font-family:var(--serif);font-weight:400}
.lead__btn{color:var(--bark);font-weight:500}
.lead__field select option{background:var(--bark);color:var(--cream)}