html{scroll-padding-top:84px}
body{line-height:1.5;-webkit-text-size-adjust:100%}
button,select,input,textarea{font-size:16px}
button{min-width:44px}
.feedback-open{font-size:16px}
img,video{max-width:100%}
.mobile-section-nav{display:block;position:sticky;top:0;z-index:8;padding:8px 16px;background:#f3f4ef;border-bottom:1px solid #c5cfca;margin:0}
.mobile-section-nav label{margin:0;font-weight:400}
.mobile-section-nav select{height:48px;margin:0;font-weight:600}
header{padding:16px}
header h1{font-size:26px;line-height:1.2;margin:0}
header p{margin-top:8px}
header>nav{display:none}
main{padding:16px}
main>section{min-width:0}
h2{font-size:24px;line-height:1.25}
h3{line-height:1.35}
p,li{overflow-wrap:anywhere}
.pair-grid,.archive-grid,.context-grid,.material-grid{grid-template-columns:1fr}
.pair-grid,.archive-grid,.context-grid{margin-inline:-16px}
.pair-card,.archive-card,.context-grid figure{border-left:0;border-right:0;border-radius:0}
.pair-head{padding:12px 16px;gap:12px}
.pair-head h3{font-size:18px}
.pair-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:12px 16px;gap:8px}
.pair-actions button,.pair-actions a{width:100%;margin:0;min-height:48px;text-align:center;justify-content:center;font-size:16px;padding:8px;line-height:1.35}
.comparison-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 16px 0}
.comparison-controls button{min-height:48px}
.comparison-controls button[aria-pressed=true]{background:#214f58;color:#fff}
.archive-grid img{height:auto;max-height:80dvh;object-fit:contain}
.archive-grid .image-zoom-trigger{min-height:0}
.archive-grid figcaption,.context-grid figcaption{padding:12px 16px;font-size:16px}
.archive-grid button:not(.image-zoom-trigger),.context-grid button{margin:0 16px 12px;max-width:calc(100% - 32px);min-height:48px}
.context-grid img{height:auto;max-height:80dvh;object-fit:contain}
#perspectives .section-head{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center}
#perspectives .section-head>div{display:contents}
#perspectives .section-head h2{margin:0;grid-column:1;grid-row:1}
#perspectives .section-head>div>p{margin:0;grid-column:1/-1;grid-row:2}
#perspectives .view-count{margin:0;font-size:16px;grid-column:2;grid-row:1}
.view-filters,.archive-filters,.material-filters{gap:8px}
.view-filters button,.archive-filters button,.material-filters button{min-height:48px;font-size:16px;line-height:1.35}
.material-body{padding:16px}
.material-card>img{height:220px}
.material-body label{min-height:48px}
.material-links{align-items:stretch}
.material-links a{min-height:48px;padding-block:8px}
.chimney-explanation{grid-template-columns:1fr}
.chimney-explanation a{display:inline-flex;align-items:center;min-height:48px}
.chimney-grid .pair-card:last-child{grid-column:auto}
.workspace{display:flex;flex-direction:column;gap:20px}
.scene{order:-1}
.mobile-model-view{padding:12px 16px;background:#fff;border-inline:1px solid #c5cfca}
.mobile-model-view label{margin:0;font-size:16px}
.mobile-model-view select{min-height:48px}
label:has(#view){display:none}
#terrain{height:clamp(320px,55dvh,440px)}
.camera{display:grid;grid-template-columns:1fr;gap:0}
.camera label{font-size:16px;margin:8px 0}
.options{display:grid;grid-template-columns:1fr;gap:8px;padding-block:12px}
.options label,.checks label{display:flex;align-items:center;gap:8px;min-height:44px;margin:0;font-size:16px}
.metrics{grid-template-columns:1fr;gap:12px}
.metrics>div{display:flex;justify-content:space-between;align-items:center;gap:16px}
.metrics span{font-size:16px}
.metrics strong{font-size:24px;margin:0}
.legend{padding:12px 16px;gap:10px 18px}
.photo-tabs button{font-size:16px;min-height:48px}
#source{height:auto;max-height:75dvh}
.courtyard-video video{max-height:70dvh}
#compare-dialog,#image-zoom-dialog,#feedback-dialog{width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;padding:12px;border:0;border-radius:0;overscroll-behavior:contain}
.compare-dialog-head,.image-zoom-head,.feedback-dialog-head{position:sticky;top:-12px;z-index:12;background:#f3f4ef;padding:8px 0 12px;gap:12px;border-bottom:1px solid #c5cfca}
.compare-dialog-head h2,.image-zoom-head h2,.feedback-dialog-head h2{font-size:20px;line-height:1.3;margin:0;min-width:0;overflow-wrap:anywhere}
.compare-dialog-head button,.image-zoom-head button{min-height:48px;margin:0}
#compare-expanded .photo-compare{max-height:65dvh}
#compare-expanded .comparison-controls{padding-inline:0}
#compare-expanded .pair-actions{padding-inline:0}
.image-zoom-controls{display:grid;grid-template-columns:48px minmax(0,1fr) 52px 48px;gap:8px;align-items:center;margin:12px 0}
#image-zoom-minus{grid-column:1;grid-row:1}
.image-zoom-controls label{display:contents}
.image-zoom-controls input{width:100%;min-width:0;min-height:48px;grid-column:2;grid-row:2}
#image-zoom-value{grid-column:3;grid-row:1}
#image-zoom-plus{grid-column:4;grid-row:1}
#image-zoom-reset{grid-column:1/-1;grid-row:3;min-height:48px}
#image-zoom-viewport{height:calc(100dvh - 270px);min-height:200px;touch-action:pan-x pan-y}
.feedback-dialog-toolbar{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.feedback-dialog-toolbar button{min-height:48px;white-space:normal}
.feedback-dialog-head{display:block}
.feedback-dialog-head .eyebrow{font-size:16px}
#feedback-guide,#feedback-storage-status,#feedback-dialog-status,#feedback-transfer-status,.feedback-note small{font-size:16px}
.feedback-actions{display:grid;grid-template-columns:1fr 1fr}
.feedback-actions button{min-height:48px}
@media(min-width:701px){
 html{scroll-padding-top:18px}
 .mobile-section-nav{display:none}
 .mobile-model-view{display:none}
 label:has(#view){display:block}
 header{padding:24px 4%}
 header h1{font-size:28px}
 header>nav{display:flex}
 main{padding:24px 4%}
 .pair-grid,.archive-grid,.material-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .context-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pair-grid,.archive-grid,.context-grid{margin-inline:0}
 .pair-card,.archive-card,.context-grid figure{border:1px solid #bbc9c4;border-radius:7px}
 .archive-grid img{height:clamp(340px,44vw,600px);max-height:none}
 .context-grid img{height:270px}
 .workspace{display:grid;grid-template-columns:250px minmax(0,1fr);gap:24px}
 .scene{order:0}
 #terrain{height:430px}
 .camera{display:flex;gap:24px}
 .options{display:flex;gap:20px;flex-wrap:wrap}
 .metrics{grid-template-columns:repeat(3,1fr)}
 .metrics>div{display:block}
 .metrics strong{margin-top:6px;font-size:28px}
 .chimney-explanation{grid-template-columns:minmax(240px,.75fr) minmax(0,1.25fr)}
 .chimney-grid .pair-card:last-child{grid-column:1}
 #compare-dialog,#image-zoom-dialog,#feedback-dialog{width:96vw;max-width:1380px;height:auto;max-height:96dvh;margin:auto;padding:18px;border:1px solid #7e9590;border-radius:7px}
 .compare-dialog-head,.image-zoom-head,.feedback-dialog-head{top:-18px}
 #image-zoom-viewport{height:68dvh}
 .image-zoom-controls{display:flex;flex-wrap:wrap}
 .image-zoom-controls label{display:flex;align-items:center;gap:8px}
 .image-zoom-controls input{width:160px}
 .feedback-dialog-head{display:flex;align-items:center}
 .feedback-dialog-toolbar{display:flex}
}
@media(min-width:1101px){.workspace{grid-template-columns:300px minmax(0,1fr)}#terrain{height:480px}.context-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
