/* 261 pass 8: "What was added" photo stepper (js/upgrades.js) and the Materials & finishes block in the build section. */

/* ===== Upgrades: stage (16:10 desktop, 4:5 full-bleed phone) + side panel ===== */
.ups{display:grid;gap:20px}
@media (min-width:960px){.ups{grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start}.ups-close{grid-column:1/-1}}
.ups-stage{position:relative;overflow:hidden;border-radius:6px;background:var(--ink)}
.ups-stage:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
@media (max-width:600px){.ups-stage{margin-inline:calc(-1 * var(--pad));border-radius:0}}
.ups-view{position:relative;aspect-ratio:16/10;overflow:hidden;touch-action:pan-y;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
@media (max-width:600px){.ups-view{aspect-ratio:4/5}}

.ups-s{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s linear .5s}
.ups-s.on{opacity:1;visibility:visible;transition:opacity .5s var(--ease)}
.ups-s::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:1;height:48%;background:linear-gradient(to top,rgba(20,22,23,.85),rgba(20,22,23,0));pointer-events:none}
.ups-z{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0;will-change:transform;backface-visibility:hidden}
.ups-z .ph{display:block;width:100%;height:100%;background:var(--ink)}
.ups-z img{-webkit-user-drag:none;pointer-events:none}
.ups-s.zooming .ups-z{transition:transform 1.9s cubic-bezier(.45,0,.2,1)}

/* Focus rectangle: soft dim outside, four technical-drawing corner brackets that draw in after the zoom */
.ups-f{position:absolute;left:0;top:0;z-index:1;pointer-events:none;opacity:0;box-shadow:0 0 0 200vmax rgba(20,22,23,.36);transition:opacity .6s var(--ease)}
.ups-f::before{content:"";position:absolute;inset:0;border:1px solid rgba(233,240,86,.22)}
.ups-f i{position:absolute;width:min(24px,32%);height:min(24px,32%);border:0 solid var(--acid);transform:scale(0);transition:transform .45s var(--ease)}
.ups-f .tl{left:-2px;top:-2px;border-width:1.5px 0 0 1.5px;transform-origin:0 0}
.ups-f .tr{right:-2px;top:-2px;border-width:1.5px 1.5px 0 0;transform-origin:100% 0;transition-delay:.08s}
.ups-f .br{right:-2px;bottom:-2px;border-width:0 1.5px 1.5px 0;transform-origin:100% 100%;transition-delay:.16s}
.ups-f .bl{left:-2px;bottom:-2px;border-width:0 0 1.5px 1.5px;transform-origin:0 100%;transition-delay:.24s}
.ups-s.drawn .ups-f{opacity:1}
.ups-s.drawn .ups-f i{transform:none}
.ups-whole .ups-f{opacity:0!important}
.ups-whole .ups-view{background:var(--ink)}

/* Caption: bottom-left over the gradient, one or two lines */
.ups-cap{position:absolute;left:clamp(16px,3vw,28px);right:clamp(16px,3vw,28px);bottom:clamp(18px,3vw,28px);z-index:2;max-width:30ch;font:clamp(21px,2.4vw,30px)/1.12 var(--serif);color:var(--paper);text-wrap:balance;pointer-events:none}
.ups-room{display:block;margin-bottom:8px;font:500 10px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--acid)}
.ups-s.on .ups-cap,.ups-s.on .ups-endt{animation:upsUp .6s var(--ease) .12s both}
@keyframes upsUp{from{opacity:0;transform:translateY(10px)}}

/* Closing slide */
.ups-end::after{height:100%;background:linear-gradient(to top,rgba(20,22,23,.88),rgba(20,22,23,.45))}
.ups-endt{position:absolute;left:clamp(16px,4vw,48px);right:clamp(16px,4vw,48px);bottom:clamp(24px,5vw,56px);z-index:2;max-width:18ch;font:clamp(28px,4.4vw,56px)/1.05 var(--serif);color:var(--paper);text-wrap:balance;pointer-events:none}
.ups-endt small{display:block;margin-top:14px;font:500 11px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--acid)}

/* Counter + progress */
.ups-n{position:absolute;top:14px;left:14px;z-index:3;padding:5px 10px;border-radius:999px;background:rgba(29,32,33,.72);font:500 11px/1 var(--sans);letter-spacing:.06em;color:var(--paper);font-variant-numeric:tabular-nums;pointer-events:none}
.ups-bar{position:absolute;left:0;right:0;top:0;z-index:3;height:2px;background:rgba(215,232,188,.14);pointer-events:none}
.ups-bar i{display:block;height:100%;background:var(--acid);transform-origin:0 50%;transform:scaleX(.0556);transition:transform .5s var(--ease)}

/* Side panel: controls, then the step list (desktop; on phones the list shows only without the stepper) */
.ups-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ups-tg{min-height:44px;padding:0 18px;font-size:13px}
.ups-tg[aria-pressed="true"]{border-color:var(--acid);color:var(--acid)}
.ups-list{margin-top:18px;counter-reset:none}
.ups-list button{display:flex;align-items:baseline;gap:12px;width:100%;min-height:36px;padding:8px 0;border-top:1px solid var(--line);text-align:left;font-size:13.5px;line-height:1.4;color:var(--muted);transition:color .3s}
.ups-list li:last-child button{border-bottom:1px solid var(--line)}
.ups-list button:hover,.ups-list button[aria-current]{color:var(--paper)}
.ups-li-n{flex:0 0 2.2ch;font-size:11px;color:var(--acid);font-variant-numeric:tabular-nums}
.ups-list button[aria-current] .ups-li-n::after{content:"";display:inline-block;width:5px;height:5px;margin-left:6px;border-radius:50%;background:var(--acid);vertical-align:2px}
html.js .ups:not(.ups-on) .ups-ctl{visibility:hidden}
html.js .ups.ups-fail .ups-ctl{display:none}
@media (min-width:960px){.ups-list{max-height:440px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}}
@media (max-width:959px){html.js .ups:not(.ups-fail) .ups-list{display:none}}

.ups-close{font:clamp(22px,2.6vw,30px)/1.2 var(--serif);color:var(--paper)}
.ups-close span{display:inline-block;margin-left:6px;font:500 11px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--acid);vertical-align:3px}

/* ===== Build: Materials & finishes ===== */
.mf{margin-top:64px;padding-top:28px;border-top:1px solid var(--line-2)}
.mf h3{margin:10px 0 20px}
.mf-l{display:grid;gap:0 48px}
@media (min-width:900px){.mf-l{grid-template-columns:1fr 1fr}}
.mf-l>div{display:grid;grid-template-columns:minmax(110px,.36fr) 1fr;gap:4px 20px;padding:13px 0;border-top:1px solid var(--line)}
.mf-l dt{font-size:12px;letter-spacing:.06em;color:var(--muted)}
.mf-l dd{font-size:15px;line-height:1.5;color:var(--paper)}
.mf-tag{display:inline-block;margin:0 0 0 6px;padding:2px 7px;border:1px solid var(--line-2);border-radius:999px;font:500 9.5px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--acid);vertical-align:2px;white-space:nowrap}
.mf-note{max-width:72ch;margin-top:20px;padding-left:12px;border-left:2px solid var(--acid);font-size:14px;line-height:1.55;color:var(--paper)}
.mf-src{margin-top:16px;font-size:12px;line-height:1.55;color:var(--muted)}
.mf-src b{font-weight:500;color:var(--text)}
@media (max-width:560px){.mf-l>div{grid-template-columns:1fr}}

/* Save-Data / 2g: same as reduced motion (js adds .ups-still) */
.ups-still .ups-s,.ups-still .ups-s.on,.ups-still .ups-f,.ups-still .ups-f i,.ups-still .ups-bar i{transition:none!important}
.ups-still .ups-s.on .ups-cap,.ups-still .ups-s.on .ups-endt{animation:none}

@media (prefers-reduced-motion:reduce){
  .ups-s,.ups-s.on,.ups-f,.ups-f i,.ups-bar i,.ups-s.zooming .ups-z,.ups-list button{transition:none!important}
  .ups-s.on .ups-cap,.ups-s.on .ups-endt{animation:none}
}