/* The whole building, week by week. Replaces the white sectional model. */
.bldg{position:relative;height:620vh;background:#0f1822}
.bstage{position:sticky;top:0;height:100svh;overflow:hidden;background:#0f1822}
.bcam{position:absolute;left:0;top:0;width:100%;height:100%;will-change:transform}
.bext{position:absolute;inset:0;width:100%;height:100%;display:block}
/* a finished unit's window comes on */
.bglow{position:absolute;left:calc(var(--u)*100%);top:calc(var(--v)*100%);width:4.3%;height:6.6%;transform:translate(-50%,-50%);border-radius:1px;
  background:radial-gradient(ellipse 80% 70% at 50% 30%,rgba(255,226,170,.95) 0%,rgba(250,186,104,.82) 55%,rgba(214,132,64,.7) 100%);
  box-shadow:0 0 18px 4px rgba(250,176,96,.28);filter:blur(1.2px);mix-blend-mode:screen;opacity:0;transition:opacity 1.4s ease;pointer-events:none}
.bglow.lit{opacity:.72}
/* pins: a ring that lands, pulses while it is today, and settles to a dot */
.bpin{position:absolute;left:calc(var(--u)*100%);top:calc(var(--v)*100%);width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;
  border:2px solid var(--light);background:rgba(196,80,26,.0);box-shadow:0 0 0 1px rgba(15,24,34,.35),0 4px 16px rgba(8,14,22,.5);
  opacity:0;transform:scale(.3) translateY(-14px);transition:opacity .35s ease,transform .6s cubic-bezier(.34,1.56,.64,1),background .4s,border-color .4s;pointer-events:none}
.bpin.show{opacity:1;transform:none}
.bpin.on{background:var(--sienna);border-color:var(--light)}
.bpin.on::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1.5px solid var(--sienna);animation:bping 1.8s cubic-bezier(.2,.6,.3,1) infinite}
.bpin.done{width:10px;height:10px;margin:-5px 0 0 -5px;background:var(--light);border-color:var(--light)}
@keyframes bping{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.9);opacity:0}}
.bfin{position:absolute;inset:0;opacity:0;z-index:1;pointer-events:none;overflow:hidden}
.bfin img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%;transform-origin:62% 55%}
.bgrade{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse 60% 78% at 0% 0%,rgba(10,17,25,.84) 0%,rgba(10,17,25,.5) 45%,rgba(10,17,25,0) 76%),
             linear-gradient(0deg,rgba(10,17,25,.45) 0%,rgba(10,17,25,0) 20%)}
.bldg.isfin .bgrade{background:radial-gradient(ellipse 62% 80% at 0% 0%,rgba(10,17,25,.72) 0%,rgba(10,17,25,.36) 48%,rgba(10,17,25,0) 78%)}
.bpanel{position:absolute;left:clamp(16px,5vw,80px);top:clamp(92px,13vh,128px);z-index:4;width:min(470px,40vw);color:var(--light)}
.bcap{position:absolute;inset:0 0 auto 0;padding:26px 28px 28px;background:rgba(11,19,28,.66);backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1);
  border:1px solid rgba(241,235,224,.12);border-radius:4px;box-shadow:0 30px 80px rgba(4,9,15,.35);opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .7s cubic-bezier(.16,1,.3,1);pointer-events:none}
.bcap.on{opacity:1;transform:none;pointer-events:auto}
.bcap h2{margin-top:14px;font-family:var(--display);font-stretch:125%;font-weight:800;font-size:clamp(1.5rem,2.3vw,2.2rem);line-height:1.04;letter-spacing:-.01em;text-shadow:0 2px 24px rgba(8,14,22,.55)}
.bcap p{margin-top:14px;font-size:1rem;line-height:1.6;color:rgba(241,235,224,.88);max-width:42ch;text-shadow:0 1px 14px rgba(8,14,22,.6)}
.bweek{list-style:none;margin-top:22px;display:grid;gap:2px;border-left:1px solid rgba(241,235,224,.18)}
.bweek li{position:relative;padding:7px 0 7px 16px;font-size:.92rem;line-height:1.35;color:rgba(241,235,224,.42);transition:color .4s ease}
.bweek li::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:transparent;transition:background .4s}
.bweek li.done{color:rgba(241,235,224,.72)}
.bweek li.done::before{background:rgba(241,235,224,.55)}
.bweek li.on{color:var(--light)}
.bweek li.on::before{background:var(--sienna)}
.bday{display:inline-block;min-width:3.1em;font-family:var(--display);font-stretch:118%;font-weight:700;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sienna)}
.bweek li:not(.on):not(.done) .bday{color:inherit}
.bcta{display:inline-block;margin-top:24px;padding:14px 20px;background:var(--sienna);color:var(--light);font-family:var(--display);font-stretch:118%;font-weight:700;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border-radius:2px;transition:background .25s}
.bcta:hover,.bcta:focus-visible{background:#a8410f}
/* photo cards that open beside the pin */
.bcard{position:absolute;left:0;top:0;z-index:3;width:clamp(220px,19vw,290px);margin:0;padding:6px;background:rgba(241,235,224,.96);border-radius:3px;
  box-shadow:0 24px 60px rgba(4,9,15,.55);opacity:0;transform:translateY(12px) scale(.96);transition:opacity .35s ease,transform .6s cubic-bezier(.16,1,.3,1);pointer-events:none}
.bcard.on{opacity:1;transform:none}
.bcard img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:2px}
.bcard figcaption{display:flex;align-items:baseline;gap:10px;padding:10px 6px 6px;font-family:var(--display);font-stretch:118%;font-weight:700;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:#141F2B}
.bcard::before{content:"";position:absolute;top:var(--ly,50%);height:1.5px;width:40px;background:var(--light);box-shadow:0 0 8px rgba(8,14,22,.6)}
.bcard.l::before{left:100%}
.bcard.r::before{right:100%}
.bcard:not(.l):not(.r)::before{display:none}
.bldg .tskip{bottom:34px}
.bcard .bdesc{display:none}
/* on phones and portrait tablets the card carries the day's line, so the panel steps aside during the week */
.bldg.isday .bcap[data-cap="week"]{opacity:0;transform:translateY(-8px);pointer-events:none}
@media(prefers-reduced-motion:reduce){.bpin.on::after{animation:none}}
@media(min-width:761px) and (max-height:820px){
  .bcap[data-cap="week"] p{display:none}
  .bweek{margin-top:16px}
  .bweek li{padding:5px 0 5px 16px;font-size:.86rem}
  .bcap h2{font-size:clamp(1.4rem,2.1vw,2rem)}
}
@media(max-width:760px),(max-aspect-ratio:4/5){
  .bldg{height:560vh}
  .bpanel{left:12px;right:12px;width:auto;max-width:560px;top:126px}
  .bldg .tnote{font-size:9px;letter-spacing:.06em;white-space:nowrap;padding:5px 8px}
  .bcap{padding:16px 18px 18px}
  .bcap h2{font-size:1.45rem}
  .bcap p{font-size:.88rem}
  .bweek{display:none}
  .bcard{left:16px!important;right:16px;top:auto!important;bottom:64px;width:auto;max-width:520px;margin-inline:auto;display:flex;align-items:center;gap:12px}
  .bcard img{width:40%;flex:none}
  .bcard figcaption{flex-direction:column;align-items:flex-start;gap:4px;padding:2px 4px 2px 0}
  .bcard .bdesc{display:block;font-family:var(--text);font-stretch:100%;font-weight:400;font-size:.8rem;letter-spacing:0;text-transform:none;line-height:1.35;color:#3a4654}
  .bgrade{background:linear-gradient(180deg,rgba(10,17,25,.7) 0%,rgba(10,17,25,.25) 30%,rgba(10,17,25,0) 50%),
                     linear-gradient(0deg,rgba(10,17,25,.6) 0%,rgba(10,17,25,0) 24%)}
  .bldg.isfin .bgrade{background:linear-gradient(180deg,rgba(10,17,25,.82) 0%,rgba(10,17,25,.45) 40%,rgba(10,17,25,0) 62%)}
  .bldg .tskip{bottom:22px;right:16px;left:auto}
  .bcard[data-place="top"]{top:126px!important;bottom:auto}
}
/* short screens: landscape phones */
@media(max-height:540px){
  .bpanel{top:62px;left:16px;right:auto;width:min(46vw,420px)}
  .bcap{padding:12px 16px 14px}
  .bcap h2{margin-top:8px;font-size:1.15rem}
  .bcap p,.bweek{display:none}
  .bcta{margin-top:12px;padding:10px 14px}
  .bcard,.bcard[data-place="top"]{top:62px!important;bottom:auto;left:auto!important;right:16px;width:min(320px,44vw);max-width:none;margin:0;display:flex;align-items:center;gap:10px}
  .bcard img{width:38%;flex:none}
  .bcard figcaption{flex-direction:column;align-items:flex-start;gap:3px;padding:0}
  .bcard .bdesc{display:block;font-family:var(--text);font-stretch:100%;font-weight:400;font-size:.74rem;letter-spacing:0;text-transform:none;line-height:1.3;color:#3a4654}
  .bldg .tnote{top:auto;bottom:12px;right:16px}
  .bldg .tskip{bottom:12px;left:16px;right:auto}
  .bcard[data-place="tl"]{left:16px!important;right:auto}
}

/* 2026-10-20: move-in day sits low on the photo, no box */
.bfinp{position:absolute;left:clamp(16px,5vw,80px);right:clamp(16px,5vw,80px);bottom:clamp(72px,11vh,110px);z-index:4;color:var(--light);max-width:980px}
.bfinp .bcap{position:relative;inset:auto;padding:0;background:none;border:0;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.bfinp .bcap h2{font-size:clamp(2.2rem,5vw,4.6rem);line-height:1;max-width:15ch}
.bfinp .bcap p{font-size:clamp(1.02rem,1.3vw,1.25rem);max-width:40ch}
.bldg.isfin .bgrade{background:linear-gradient(0deg,rgba(10,17,25,.9) 0%,rgba(10,17,25,.52) 36%,rgba(10,17,25,0) 64%)}
@media(max-width:760px),(max-aspect-ratio:4/5){
  .bfinp{left:16px;right:16px;bottom:64px}
  .bfinp .bcap h2{font-size:clamp(2rem,9vw,2.6rem)}
  .bfinp .bcap p{font-size:.98rem}
  .bldg.isfin .bgrade{background:linear-gradient(0deg,rgba(10,17,25,.92) 0%,rgba(10,17,25,.55) 42%,rgba(10,17,25,0) 70%)}
}
@media(max-height:540px){
  .bfinp{bottom:40px;max-width:60vw}
  .bfinp .bcap h2{font-size:1.6rem}
}