/* /spaces/ — owner: spaces builder. Uses site.css tokens only. */

/* hero: title + the spec index, which fills in once on load */
.sp-hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,5vw,80px);align-items:end}
.sp-index{display:grid;border-top:1px solid rgba(255,255,255,.6)}
.sp-index a{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:46px;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28);font:500 16px/1.3 var(--display)}
.sp-index a b{font-weight:500;font-size:15px;color:#fff}
.sp-index a:hover span{text-decoration:underline;text-underline-offset:4px}
.sp-index-note{margin:14px 0 0;font-size:var(--t-fine);color:rgba(255,255,255,.92);max-width:44ch}
@media (prefers-reduced-motion:no-preference){
  .js .sp-index>*{animation:sp-in .5s var(--ease) both;animation-delay:calc(var(--n,0) * 45ms + 120ms)}
  @keyframes sp-in{from{opacity:0;translate:0 10px}}
}
@media (max-width:900px){.sp-hero-grid{grid-template-columns:1fr}}

/* shared bits */
.sp-sf{margin:6px 0 14px;font-size:clamp(44px,2rem + 2.4vw,72px);line-height:1;color:var(--accent)}
.sp-sf b{font-weight:500;letter-spacing:-.03em}
.sp-sf span{font-size:.36em;color:var(--text-2);letter-spacing:0}
.sp-specs{margin:0;border-top:1px solid var(--line)}
.sp-specs div{display:grid;grid-template-columns:7.5em 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.sp-specs dt{font:500 var(--t-fine)/1.6 var(--mono);color:var(--text-3)}
.sp-specs dd{margin:0}
.cf-level{margin:0;font:500 var(--t-fine)/1.3 var(--mono);color:var(--text-2)}
.sp-plan{margin:0;background:var(--glass-bg);border:1px solid var(--glass-edge);border-radius:var(--r-sm);padding:14px;display:grid;gap:8px;justify-items:center;color:var(--ink-2)}
.sp-plan img{mix-blend-mode:multiply}
.sp-plan .fine{color:var(--ink-2)}
.sp-plan img{max-height:260px;width:auto;object-fit:contain}
.sp-plan figcaption{justify-self:start}
figure{margin:0}
figure>img{border-radius:var(--r-sm);width:100%;height:auto}

/* courtyard */
.sp-court{display:grid;grid-template-columns:1.45fr 1fr;gap:clamp(28px,4vw,64px);align-items:center}
.sp-court-copy h2{margin-bottom:6px}
.sp-court-copy{padding:clamp(22px,2.4vw,36px);background:var(--glass-bg);border:1px solid var(--glass-edge);border-radius:var(--r);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);box-shadow:var(--shadow)}
.sp-court-more{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px);margin-top:clamp(20px,2.4vw,32px);align-items:stretch}
.sp-court-more .sp-plan img{max-height:300px}
@media (max-width:900px){.sp-court,.sp-court-more{grid-template-columns:1fr}}

/* ===== the climb ===== */
.sp-studio-head{margin-bottom:clamp(28px,3vw,44px)}
/* static (no JS / reduced motion): a plain stacked list */
.climb-stage{display:grid;gap:clamp(28px,3vw,44px)}
.lift,.climb-frame,.climb-hint{display:none}
.climb-specs{display:grid;gap:clamp(28px,3vw,44px)}
.cfloor{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(20px,3vw,48px);align-items:center}
.cfloor-view .cf-quote{font-size:var(--t-lede);margin:10px 0 6px;max-width:30ch}
.cf-small{color:var(--text-2);margin:0}
@media (max-width:900px){.cfloor{grid-template-columns:1fr}}

/* live */
.climb.live{height:130vh;height:130svh;position:relative}
.climb.live .climb-stage{position:sticky;top:0;height:100vh;height:100svh;align-content:center;grid-template-columns:auto minmax(0,2.1fr) minmax(280px,1fr);gap:clamp(20px,3vw,48px);align-items:center}
.climb.live .lift{display:grid;gap:8px}
.lift button{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--line-strong);background:transparent;color:var(--text);font:500 15px/1 var(--mono);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.lift button[data-go="3"]{font-size:12px}
.lift button:hover{border-color:var(--accent);color:var(--accent)}
.lift button[aria-pressed="true"]{background:var(--sky-deep);border-color:var(--sky-deep);color:#fff}
.climb.live .climb-frame{display:block;position:relative;overflow:hidden;aspect-ratio:3/2;border-radius:var(--r-sm);background:var(--sky-pale);box-shadow:0 30px 60px -30px rgba(13,40,80,.55);max-height:calc(100svh - 140px);width:100%;justify-self:center}
.climb-strip{position:absolute;left:0;right:0;top:0;will-change:transform}
.climb-strip .ph{position:relative;overflow:hidden}
.climb-strip .ph img{width:100%;height:100%;object-fit:cover;display:block}
.climb-strip .slab{height:var(--slab,56px);display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:linear-gradient(180deg,var(--g2),var(--sky-pale));border-block:1px solid var(--line);font:500 var(--t-fine)/1 var(--mono);color:var(--text-2)}
.climb-view{position:absolute;inset:0;opacity:0;clip-path:inset(50%);will-change:clip-path}
.climb-view img{width:100%;height:100%;object-fit:cover;will-change:transform}
.climb-view::after{content:"";position:absolute;inset:auto 0 0;height:50%;background:linear-gradient(0deg,rgba(13,26,43,.6),rgba(13,26,43,0))}
.climb-view-line{position:absolute;z-index:1;left:clamp(14px,2vw,24px);right:clamp(14px,2vw,24px);bottom:clamp(12px,2vw,22px);margin:0;color:#fff;font:560 clamp(22px,1rem + 1.4vw,38px)/1.05 var(--display);font-stretch:114%;letter-spacing:-.02em;max-width:16ch;opacity:0;translate:0 8px;transition:opacity .45s var(--ease),translate .55s var(--ease)}
.climb.at-view .climb-view-line{opacity:1;translate:0 0;transition-delay:.42s}
.climb.live .climb-specs{position:relative;display:block;min-height:330px;align-self:center}
.climb.live .cfloor{position:absolute;inset:0 0 auto;display:block;opacity:0;translate:0 -6px;visibility:hidden;transition:opacity .18s,translate .2s,visibility 0s .2s}
.climb.live .cfloor.on{opacity:1;translate:0 0;visibility:visible;transition:opacity .4s var(--ease) .12s,translate .5s var(--ease) .12s,visibility 0s}
.climb.live .cfloor>img{display:none}
.climb.live .climb-hint{display:block;position:absolute;left:0;right:0;bottom:clamp(14px,3vh,28px);text-align:center;transition:opacity .4s}
.climb.moved .climb-hint{opacity:0}
@media (max-width:900px){
  .climb.live .climb-stage{grid-template-columns:1fr;align-content:start;padding-top:clamp(56px,9svh,88px);gap:14px}
  .climb.live .lift{display:flex;gap:8px}
  .lift button{width:48px;height:48px}
  .climb.live .climb-frame{max-height:none}
  .climb.live .climb-specs{min-height:0}
  .climb.live .sp-sf{font-size:44px;margin:4px 0 10px}
  .climb.live .sp-specs div{padding:7px 0}
  .climb.live .climb-hint{bottom:max(64px,9svh)}
}
@media (max-width:900px) and (max-height:720px){.climb.live .climb-view-line{font-size:20px}.climb.live .sp-specs div:nth-child(3){display:none}}

/* studio reference rows */
.sp-details{margin-top:clamp(56px,6vw,96px)}
.sp-details-h{font-size:clamp(22px,1rem + 1vw,30px);margin-bottom:12px}
.sp-row{display:grid;grid-template-columns:1.2fr 1fr .9fr;gap:clamp(16px,2.4vw,36px);align-items:center;padding-block:clamp(22px,2.6vw,36px);border-top:1px solid var(--line)}
.sp-row-copy p:last-child{margin:0;color:var(--text-2)}
.sp-row .sp-plan img{max-height:220px}
@media (max-width:900px){.sp-row{grid-template-columns:1fr}}

/* bungalow */
.sp-bung{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,36px);margin-top:clamp(28px,3vw,44px)}
.sp-bung article>img{border-radius:var(--r-sm);width:100%;aspect-ratio:3/2;object-fit:cover;margin-bottom:16px}
.sp-bung article>p:not(.cf-level):not(.sp-sf){color:var(--text-2);margin:0 0 16px}
.sp-bung .sp-plan img{max-height:220px}
.sp-occ{margin-top:28px}
@media (max-width:900px){.sp-bung{grid-template-columns:1fr}}

/* sister */
.sp-sister{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center}
.sp-sister p{color:var(--text-2);max-width:48ch}
@media (max-width:900px){.sp-sister{grid-template-columns:1fr}}

/* ===== reset-1 polish ===== */
.sp-sf b,.sp-sf b.mono{font-family:var(--display);font-weight:600;font-stretch:120%;letter-spacing:-.04em;font-variant-numeric:lining-nums tabular-nums;color:var(--ink)}
.sp-sf span{font-family:var(--mono);color:var(--aqua-ink)}
.lift button.lift-wide{width:auto;padding:0 14px;border-radius:999px;font-size:13px}
.lift button[aria-pressed="true"]{background:var(--aqua-ink);border-color:var(--aqua-ink);color:#fff}
.lift button:hover{border-color:var(--aqua-ink);color:var(--aqua-ink)}
.cf-extra{margin:12px 0 0;color:var(--ink-2);font-size:15px;max-width:36ch}
.cf-plan{margin-top:14px}
.cf-plan summary{cursor:pointer;display:inline-flex;align-items:center;min-height:44px;font:540 15px var(--display);color:var(--ink);text-decoration:underline;text-decoration-color:var(--aqua-ink);text-underline-offset:5px}
.cf-plan img{margin-top:8px;max-height:220px;width:auto;background:rgba(255,255,255,.5);border-radius:8px;padding:8px}
.cfloor-view .cf-quote{font-style:normal}
.climb.live{height:118vh;height:118svh}
@media (max-width:640px){
  .climb-specs{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--gutter) 16px;margin:0 calc(-1*var(--gutter));-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .climb-specs::-webkit-scrollbar{display:none}
  .cfloor{flex:0 0 84%;scroll-snap-align:start;grid-template-columns:1fr;background:var(--glass-bg);border:1px solid var(--glass-edge);border-radius:16px;padding:10px 10px 16px;gap:12px}
  .cfloor>img{border-radius:10px;aspect-ratio:4/3;object-fit:cover}
  .cfloor>div{padding:0 6px}
  .climb-stage{overflow:hidden}
}