.building-shell { position:relative; max-width:1440px; margin:auto; padding:24px clamp(20px,4vw,56px) 36px; }
.building-header { display:flex; align-items:center; gap:32px; }
.building-header .themes { margin-left:auto; }.back-link { color:var(--muted); font-size:13px; min-height:44px; display:flex; align-items:center; }
.building-intro { margin:50px 0 28px; }.building-intro h1 { font-size:clamp(30px,3.5vw,48px); }.building-intro>p:last-child { color:var(--muted); font-size:14px; margin:16px 0 0; }
.building-layout { display:grid; grid-template-columns:minmax(0,1fr) 270px; align-items:start; gap:22px; }
.model-stage,.building-picker { border:1px solid var(--line); border-radius:var(--radius-surface); background:linear-gradient(135deg,#c1dbff0e,#c1dbff04); backdrop-filter:blur(16px); box-shadow:inset 0 1px 0 #ffffff1c,0 18px 60px #00000015; }
.model-stage { overflow:hidden; }.stage-heading { display:flex; align-items:center; justify-content:space-between; padding:25px 28px 0; }.stage-caption { color:var(--muted); font-size:11px; }.stage-heading h2 { font-size:24px; margin-top:7px; letter-spacing:-.035em; }.orbit-badge { width:48px; height:48px; border:1px solid var(--line); display:grid; place-items:center; border-radius:50%; font-size:13px; color:var(--muted); }
.model-surface { position:relative; height:clamp(390px,52vh,610px); background:radial-gradient(ellipse at 50% 72%,#a8c8dd0a,transparent 63%); }
model-viewer { display:block; width:100%; height:100%; --progress-bar-color:transparent; --poster-color:transparent; outline:none; }
model-viewer:focus-visible { outline:2px solid var(--muted); outline-offset:-5px; }
.model-status { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; color:var(--muted); font-size:14px; pointer-events:none; }.model-status button { pointer-events:auto; min-height:44px; border-radius:var(--radius-control); padding:8px 20px; background:var(--selected); color:var(--selected-ink); border:0; }.model-status.is-error { background:#0a1426c9; }.load-ring { width:26px; height:26px; border:1px solid var(--line); border-top-color:var(--ink); border-radius:50%; animation:loading-turn 1s linear infinite; }.is-error .load-ring { display:none; }
@keyframes loading-turn { to { transform:rotate(360deg); } }
.stage-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 24px 22px; }.stage-toolbar p { margin:0; font-size:12px; color:var(--muted); }.camera-controls { display:flex; gap:6px; }.camera-controls button { width:44px; height:44px; border:1px solid var(--line); border-radius:50%; color:var(--ink); background:#ffffff06; font-size:22px; }.camera-controls button[aria-pressed="true"] { background:var(--selected); color:var(--selected-ink); }.camera-controls button:disabled { opacity:.4; cursor:wait; }
.building-picker { padding:20px 12px 12px; }.picker-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 10px 15px; }.picker-heading h2 { font-size:14px; }.picker-heading>span { color:var(--muted); font-size:12px; }
#building-list { display:flex; flex-direction:column; gap:4px; }.building-option { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:49px; padding:12px; gap:14px; text-align:left; font-size:13px; border:1px solid transparent; border-radius:var(--radius-control); background:transparent; color:var(--muted); }.building-option[aria-pressed="true"] { color:var(--ink); border-color:var(--line); background:#bed5ff0d; }.building-option span:last-child { opacity:.5; }.building-option:hover { color:var(--ink); background:#bed5ff08; }
.model-note { max-width:650px; color:var(--muted); font-size:11px; line-height:1.65; margin:20px 4px 0; }
[data-theme="water"] .model-stage,[data-theme="water"] .building-picker { background:linear-gradient(135deg,#ffffff47,#ffffff12); box-shadow:inset 0 1px 0 #ffffffaa,0 18px 60px #19515b0c; }
[data-theme="water"] .building-option[aria-pressed="true"] { background:#2365700c; }[data-theme="water"] .model-status.is-error { background:#e5f3f3e8; }
@media(max-width:760px) { .building-shell { padding:18px 20px 30px; }.building-header { flex-wrap:wrap; gap:12px; }.building-header .wordmark { font-size:22px; flex-basis:auto; }.building-header .back-link { order:3; width:100%; min-height:32px; }.building-intro { margin:28px 0 22px; }.building-layout { grid-template-columns:1fr; gap:16px; }.model-stage { border-radius:var(--radius-surface); }.stage-heading { padding:20px 20px 0; }.stage-heading h2 { font-size:22px; }.model-surface { height:430px; height:clamp(330px,52svh,460px); }.stage-toolbar { flex-direction:column; gap:12px; padding:12px 16px 18px; }.camera-controls { gap:12px; }.building-picker { padding-top:18px; }#building-list { display:grid; grid-template-columns:1fr 1fr; gap:5px; }.building-option { font-size:12px; min-height:48px; }.model-note { font-size:11px; } }
@media(prefers-reduced-motion:reduce) { .load-ring { animation:none; } }

.building-header .themes button { min-width:44px; min-height:44px; height:44px; }
.model-stage { scroll-margin-top:16px; }

/* A model-first room: direct gestures, compact source-backed building details. */
.building-intro { margin:30px 0 24px; }.building-intro h1 { font-size:clamp(27px,3vw,38px); }.building-intro .eyebrow { margin-bottom:10px; }
.building-layout { grid-template-columns:minmax(0,1fr) 300px; }
.model-surface { height:clamp(480px,65vh,760px); }model-viewer { touch-action:none; }
.model-stage { position:sticky; top:20px; }
.gesture-hint { padding:10px 24px 22px; display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--muted); font-size:10px; line-height:1.55; text-align:center; }.gesture-mobile { display:none; }
.building-picker { padding:22px; }.select-label { display:block; font-size:11px; color:var(--muted); margin-bottom:10px; }
#building-select { width:100%; min-height:48px; padding:12px; border:1px solid var(--line); border-radius:var(--radius-control); background:#0f1b2b; color:var(--ink); font:inherit; font-size:14px; }
#building-select:focus-visible { outline:2px solid var(--muted); outline-offset:3px; }
#building-location { font-size:12px; color:var(--muted); margin:28px 0 12px; }.height-fact { display:flex; align-items:baseline; gap:9px; }.height-fact>#building-height { font-size:clamp(44px,5vw,64px); font-weight:350; line-height:1.05; letter-spacing:-.06em; font-variant-numeric:tabular-nums; }.metres { font-size:21px; color:var(--muted); }
#height-label { color:var(--muted); font-size:11px; margin:8px 0 24px; }.year-fact { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:15px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:12px; }.year-fact>span { color:var(--muted); }.year-fact strong { font-weight:500; font-size:16px; }
#building-summary { font-size:13px; line-height:1.65; margin:20px 0; }#building-people { margin:0; display:grid; gap:5px; }#building-people dt { font-size:10px; color:var(--muted); margin-top:9px; }#building-people dd { font-size:12px; line-height:1.6; margin:0; }
#building-note { padding-top:15px; margin-top:20px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; line-height:1.65; }.fact-sources { margin-top:20px; color:var(--muted); font-size:11px; }.fact-sources summary { cursor:pointer; min-height:36px; padding-block:10px; }#building-sources { display:grid; gap:12px; padding:8px 0; }#building-sources a { text-decoration:underline; text-underline-offset:3px; line-height:1.6; }
[data-theme="water"] #building-select { background:#e9f4f2; }
@media(max-width:760px) { .building-layout { grid-template-columns:1fr; }.building-intro { margin:24px 0 20px; }.model-stage { position:static; }.model-surface { height:clamp(390px,58svh,600px); }.gesture-hint { padding:12px 15px 18px; font-size:10px; }.gesture-desktop { display:none; }.gesture-mobile { display:block; }.building-picker { padding:22px; }.height-fact>#building-height { font-size:64px; }#building-select { font-size:16px; } }

.metres { flex-shrink:0; }
.height-fact>#building-height { font-size:clamp(40px,4.5vw,60px); }
@media(max-width:400px) { .height-fact>#building-height { font-size:52px; } }

/* Selection, model, then facts in natural mobile reading and keyboard order. */
@media(max-width:900px){
 .building-layout{grid-template-columns:minmax(0,1fr);gap:14px}
 .model-stage{position:static}
 .building-layout>.model-choice{min-width:0;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-surface);background:var(--surface);backdrop-filter:blur(16px)}
 .model-choice .select-label{margin-bottom:8px;font-size:12px}
 #building-select{font-size:16px}
 .building-intro{margin:16px 0}
 .model-surface{height:clamp(280px,46svh,430px)}
 .stage-heading{padding:16px 18px 0;gap:12px}
 .stage-heading h2{font-size:22px;overflow-wrap:anywhere}
 .orbit-badge{flex-shrink:0}
 .gesture-hint{font-size:11px;padding:10px 16px 16px}
 .gesture-desktop{display:none}.gesture-mobile{display:block}
 .fact-sources summary{min-height:44px}
}
@media(max-width:900px) and (max-height:500px){.model-surface{height:250px}}