/* lux.css — style 20, "the drawing sheet".

   This is the only page in the portfolio whose pictures are not photographs.
   The apartment had not been built. They are the developer's renders, and
   hiding that would undo the promise the other seventeen pages rest on.

   So the disclosure is the design. The whole page is laid out as a set of
   drawing sheets, with a title block pinned in the corner that carries the
   sheet number, the view name, and the same standing line on every screen.

   Palette: drawing paper, graphite, and one drafting blue. Deliberately cooler
   and more technical than any other page here, because it is a document about
   a building rather than a picture of a place. */

:root{
  --paper  :#F4F2EE;
  --paper-2:#E7E3DC;
  --ink    :#20232A;
  --ink-d  :rgba(32,35,42,.62);
  --ink-f  :rgba(32,35,42,.34);
  --blue   :#3B5FA8;               /* drafting blue */
  --sand   :#B39C7D;
  --hair   :rgba(32,35,42,.16);
  --pad    :clamp(20px,4.4vw,84px);
  --sans   :-apple-system,BlinkMacSystemFont,"Inter","Helvetica Neue",Arial,sans-serif;
  --mono   :ui-monospace,SFMono-Regular,Menlo,monospace;
  --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(.94rem,1.02vw,1.02rem);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-family:var(--mono);font-size:.58rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-f)}
.display{font-weight:500;line-height:1.02;letter-spacing:-.03em;
  font-size:clamp(2.3rem,6.4vw,5.2rem)}
.display em{font-style:normal;color:var(--blue)}
.h2{font-weight:500;line-height:1.08;letter-spacing:-.02em;
  font-size:clamp(1.5rem,3.4vw,2.6rem)}

/* ---------- 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:16px var(--pad);
  background:linear-gradient(180deg,rgba(244,242,238,.94),rgba(244,242,238,0))}
.nav__brand{font-family:var(--mono);font-size:.64rem;letter-spacing:.24em;text-transform:uppercase}
.nav__brand span{color:var(--blue)}
.nav__cta{font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--hair);border-radius:2px;padding:0 18px;min-height:44px;
  display:inline-flex;align-items:center;background:var(--paper);
  transition:background .3s var(--ease),color .3s var(--ease)}
.nav__cta:hover{background:var(--ink);color:var(--paper)}

/* ---------- THE TITLE BLOCK, pinned, always on ---------- */
.block{position:fixed;right:var(--pad);bottom:clamp(16px,3vh,28px);z-index:55;
  background:rgba(244,242,238,.94);border:1px solid var(--hair);
  padding:11px 15px;font-family:var(--mono);font-size:.56rem;letter-spacing:.13em;
  text-transform:uppercase;line-height:1.7;max-width:min(78vw,330px);
  backdrop-filter:blur(6px)}
.block__row{display:flex;gap:12px;justify-content:space-between}
.block__row b{font-weight:500;color:var(--ink)}
.block__row span{color:var(--ink-f);text-align:right}
/* the standing line. Never hidden, never scrolled past. */
.block__warn{margin-top:7px;padding-top:7px;border-top:1px solid var(--hair);
  color:var(--blue);letter-spacing:.1em}
@media (max-width:640px){
  .block{left:var(--pad);right:var(--pad);max-width:none;font-size:.52rem}
}

/* ---------- 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(16,18,22,.36) 0%,rgba(16,18,22,0) 40%,rgba(16,18,22,.8) 100%)}
.hero__in{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(78px,13vh,140px);
  z-index:2;color:#fff}
.hero__in .tag{color:rgba(255,255,255,.74)}
.hero h1{margin:14px 0 16px}
.hero h1 em{color:#A9C4F5}
.hero__sub{color:rgba(255,255,255,.86);max-width:46ch}

/* ---------- the notice, said once in full ---------- */
.notice{background:var(--paper-2);border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);padding:clamp(34px,6vh,64px) var(--pad)}
.notice__in{max-width:1120px;margin:0 auto;display:grid;
  grid-template-columns:auto 1fr;gap:clamp(16px,4vw,50px);align-items:start}
.notice__k{font-family:var(--mono);font-size:.58rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--blue);white-space:nowrap;padding-top:5px}
.notice p{max-width:62ch;color:var(--ink-d)}
.notice p b{color:var(--ink);font-weight:500}
@media (max-width:700px){ .notice__in{grid-template-columns:1fr;gap:12px} }

/* ---------- lead in ---------- */
.intro{padding:clamp(66px,12vh,150px) var(--pad);max-width:1100px;margin:0 auto}
.intro p{font-weight:500;line-height:1.1;letter-spacing:-.024em;
  font-size:clamp(1.45rem,3.6vw,2.7rem);max-width:21ch}
.intro p em{font-style:normal;color:var(--blue)}
.intro small{display:block;margin-top:22px;font-size:1rem;color:var(--ink-d);max-width:56ch}

/* ---------- the sheets ---------- */
.sheet{padding:clamp(26px,5vh,62px) var(--pad);max-width:1320px;margin:0 auto}
.sheet__frame{border:1px solid var(--hair);padding:clamp(10px,1.4vw,16px);background:var(--paper)}
.sheet__frame img{width:100%;aspect-ratio:16/9;object-fit:cover}
.sheet__body{display:grid;grid-template-columns:1fr auto;gap:clamp(14px,4vw,50px);
  align-items:end;margin-top:clamp(14px,2.4vh,24px)}
.sheet__body h2{margin:8px 0 8px}
.sheet__body p{color:var(--ink-d);max-width:46ch}
.sheet__id{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-f);white-space:nowrap;padding-bottom:5px}
@media (max-width:700px){ .sheet__body{grid-template-columns:1fr} .sheet__id{display:none} }

/* ---------- the two apartment types ---------- */
.types{padding:clamp(60px,11vh,140px) var(--pad);max-width:1180px;margin:0 auto}
.types__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,40px);
  margin-top:clamp(20px,3.5vh,40px)}
.types__grid div{border-top:1px solid var(--hair);padding-top:16px}
.types__grid b{display:block;font-weight:500;font-size:clamp(1.05rem,1.9vw,1.4rem);
  letter-spacing:-.01em}
.types__grid p{margin-top:8px;color:var(--ink-d);font-size:.95rem}
@media (max-width:640px){ .types__grid{grid-template-columns:1fr} }

/* ---------- say ---------- */
.say{padding:clamp(10px,4vh,44px) var(--pad) clamp(66px,11vh,150px);max-width:1180px;margin:0 auto}
.say p{font-weight:500;line-height:1.08;letter-spacing:-.026em;
  font-size:clamp(1.5rem,4vw,3rem);max-width:20ch}
.say p em{font-style:normal;color:var(--sand)}
.say small{display:block;margin-top:22px;font-size:1rem;color:var(--ink-d);max-width:56ch}

/* ---------- 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(16,18,22,.36) 0%,rgba(16,18,22,0) 34%,rgba(16,18,22,.8) 100%)}
.pano__copy{position:absolute;left:var(--pad);right:var(--pad);
  bottom:clamp(76px,12vh,130px);z-index:2;pointer-events:none;color:#fff}
.pano__copy .tag{color:rgba(255,255,255,.72)}
.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:2px;padding:11px 18px;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.18em;
  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(15px);
  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(--hair);padding:30px var(--pad) 78px;display:flex;
  flex-wrap:wrap;gap:9px 28px;justify-content:space-between;color:var(--ink-f);
  font-family:var(--mono);font-size:.58rem;letter-spacing:.12em}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-anim [data-rise]{opacity:1;transform:none;transition:none}
  .pano__hint i::after{animation:none}
}

/* ---------- the form ---------- */
.lead{
  --lf-bg     :var(--paper-2);
  --lf-fg     :var(--ink);
  --lf-accent :var(--blue);
  --lf-line   :var(--hair);
  --lf-muted  :var(--ink-d);
}
.lead__title{font-weight:500;letter-spacing:-.02em}
.lead__btn{color:var(--paper)}
.lead__field select option{background:var(--paper);color:var(--ink)}