/* September 22: preserve the approved September 11 report. */
.construction-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
#construction .case-image{width:100%;height:auto;aspect-ratio:3/4;max-height:65vh;background:#191916;border-radius:20px}
#construction .case-image img{width:100%;height:100%;object-fit:contain}
#construction .case-caption{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding-top:20px}
#construction .case-caption h3{font-size:clamp(23px,2vw,32px);margin:0 0 8px}
#construction .browse-controls{width:100%;justify-content:space-between}
#construction .browse-controls button{width:48px;height:48px;min-width:48px}
.detail-image-button:has(img[src*="stair-detail-20260922"]){background:#11110f}
.detail-image-button img[src*="stair-detail-20260922"]{object-fit:contain}
.lighting-demo{max-width:1440px;margin-inline:auto}
.lighting-mode-buttons button{padding:18px 22px;min-height:84px}
.lighting-mode-buttons button span{font-size:12px;line-height:1.4}
.lighting-mode-buttons button strong{font-size:22px;line-height:1.5}
.light-scene{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto;height:auto!important;min-height:0!important;aspect-ratio:auto!important;overflow:hidden}
.light-scene>img{position:relative!important;inset:auto!important;grid-area:1/1;width:100%;height:auto!important;max-height:56vh;aspect-ratio:16/9;object-fit:contain;display:block}
.light-scene>.scene-glow{position:relative!important;inset:auto!important;grid-area:1/1;pointer-events:none}
.light-scene>.scene-caption{position:relative!important;inset:auto!important;grid-area:2/1;padding:22px 28px;background:#1c1c18;max-width:none}
.scene-caption h3{font-size:26px;margin:8px 0;line-height:1.4}
.scene-caption p{font-size:16px;line-height:1.7;margin:0;max-width:60ch}
.lighting-controls{gap:20px;padding:18px 28px;flex-wrap:wrap}
.lighting-controls button{min-height:44px}
.lighting-controls label{display:flex;align-items:center;gap:12px;font-size:14px}
.demo-disclaimer{padding:0 28px 20px;font-size:12px;line-height:1.6}
@media(max-width:760px){
 .construction-grid{grid-template-columns:1fr;gap:36px}
 #construction .case-image{aspect-ratio:4/5;max-height:65svh}
 #construction .case-caption{gap:12px;padding-top:14px}
 .lighting-mode-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 .lighting-mode-buttons button{padding:12px 16px;min-height:76px}
 .lighting-mode-buttons button strong{font-size:19px}
 .light-scene>.scene-caption{padding:18px}
 .scene-caption h3{font-size:23px}
 .lighting-controls{padding:16px 18px;align-items:stretch;flex-direction:column;gap:16px}
 .lighting-controls label{width:100%}
 .lighting-controls input[type=range]{flex:1;min-width:0;width:auto}
 .demo-disclaimer{padding:0 18px 18px}
}
@media(prefers-reduced-motion:reduce){.light-scene *{transition:none!important}}

/* Lighting: the image and every glow share precisely the same grid area. */
.lighting-demo{display:grid;grid-template-columns:minmax(0,1fr);gap:0;background:#1c1c18}
.lighting-demo .light-scene{display:contents}
.lighting-demo .light-scene>img{grid-area:1/1;aspect-ratio:auto;max-height:none;width:100%;height:auto!important;align-self:start}
.lighting-demo .light-scene>.scene-glow{grid-area:1/1;align-self:stretch;min-height:0}
.lighting-demo .lighting-mode-buttons{grid-area:2/1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.lighting-demo .light-scene>.scene-caption{grid-area:3/1}
.lighting-demo .lighting-controls{grid-area:4/1}
.lighting-demo .demo-disclaimer{grid-area:5/1;margin:0}
@media(min-width:900px){
 .lighting-demo{grid-template-columns:minmax(0,1fr) 320px;grid-template-rows:auto auto auto 1fr;align-items:start}
 .lighting-demo .light-scene>img{grid-area:1/1/5/2;align-self:center}
 .lighting-demo .light-scene>.scene-glow{grid-area:1/1/5/2;align-self:center;aspect-ratio:5056/3392;width:100%}
 .lighting-demo .lighting-mode-buttons{grid-area:1/2;border-left:1px solid #ffffff24}
 .lighting-demo .lighting-mode-buttons button{padding:16px;min-height:86px;border-bottom:1px solid #ffffff24}
 .lighting-demo .light-scene>.scene-caption{grid-area:2/2;padding:24px}
 .lighting-demo .lighting-controls{grid-area:3/2;display:flex;flex-direction:column;align-items:stretch;padding:0 24px 22px;gap:20px}
 .lighting-demo .lighting-controls label{display:flex;flex-wrap:wrap;gap:10px}
 .lighting-demo .lighting-controls input{width:100%;flex:1;min-width:80px}
 .lighting-demo .demo-disclaimer{grid-area:4/2;padding:0 24px 24px}
}