.connections-page{padding:130px var(--gutter) 0;max-width:1800px;margin:auto}
.connection-back{display:inline-flex;min-height:44px;align-items:center;font-size:13px;color:var(--muted);margin-bottom:32px}
.connection-back:hover{color:var(--white)}
.connections-heading{display:grid;grid-template-columns:1.2fr 1fr;align-items:end;gap:60px}
.connections-heading h1{font:600 clamp(58px,6.4vw,100px)/.98 Barlow,'Arial Narrow',sans-serif;letter-spacing:-.015em;text-transform:uppercase;margin-top:15px}
.connections-heading .section-copy{max-width:45ch}
.connection-status{font-size:12px;line-height:1.7;color:#c2b597;margin-top:20px}
.study-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:42px 0 32px}
.study-choice{display:flex;align-items:center;gap:17px;padding:12px;border:1px solid var(--line);transition:border-color .2s,background .2s;min-width:0}
.study-choice:hover,.study-choice[aria-current=true]{background:#171c1b;border-color:#b3bdb4}
.study-choice[aria-current=true]{box-shadow:inset 0 -2px #b8a379}
.study-choice strong{font-size:15px;font-weight:500;display:block;line-height:1.5}
.study-choice small{font-size:11px;line-height:1.6;color:var(--muted);display:block;margin-top:3px}
.study-choice-arrow{margin-left:auto;color:#afbaaF}
.study-thumb{position:relative;overflow:hidden;width:84px;height:70px;flex:none;background:#dfe3e5}
.study-thumb img{position:absolute;width:100%;height:150%;object-fit:cover;top:-16%}
.study-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:18px}
.study-bar h2{font:600 38px/1.1 Barlow,'Arial Narrow',sans-serif;text-transform:uppercase;margin-top:4px}
.study-bar .eyebrow{font-size:10px;color:var(--muted)}
.study-revision{font-size:11px;color:var(--muted);white-space:nowrap}
.study-workspace{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(260px,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.study-visual{min-width:0;background:#101514;border:1px solid var(--line)}
.connection-stage{height:clamp(390px,38vw,580px);background:#e6e9eb;position:relative;overflow:hidden;isolation:isolate}
.connection-stage>img{position:absolute;width:100%;height:125%;top:-9%;object-fit:cover}
.connection-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;background:linear-gradient(transparent 25%,#08100f20);z-index:2}
.connection-load .project-link{border:1px solid #090c0c;background:#101615;color:white;gap:45px;box-shadow:0 4px 28px #0002}
.connection-load .project-link:hover{background:#29352f}
.connection-load p{font-size:12px;line-height:1.6;color:#17251f;background:#eef1eeed;padding:6px 12px;text-align:center;max-width:90%}
#model-canvas{width:100%;height:100%}#model-canvas canvas{display:block;width:100%;height:100%;touch-action:none;outline-offset:-5px;cursor:grab}#model-canvas canvas:active{cursor:grabbing}
.model-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:15px}
.assembly-switch{padding:0;margin:0;border:1px solid #526058;display:flex;flex:1;max-width:265px}
.assembly-switch label{position:relative;flex:1;cursor:pointer;text-align:center}
.assembly-switch input{position:absolute;opacity:0;width:1px;height:1px}
.assembly-switch span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 16px;font-size:12px;color:#b7c0b9}
.assembly-switch input:checked+span{background:#e4e9e2;color:#101615}
.assembly-switch input:focus-visible+span{outline:2px solid white;outline-offset:3px}
.model-navigation{display:flex;gap:5px}.model-navigation button{border:1px solid #455249;background:transparent;color:var(--white);min-height:44px;min-width:38px;padding:8px;font-size:15px}.model-navigation button:last-child{font-size:11px;padding:8px 12px}.model-navigation button:hover{background:#27332c}
.model-controls p{flex-basis:100%;font-size:11px;color:var(--muted);line-height:1.8}
#arrangement-note{color:#c6b58b}
.study-explanation{font-size:14px;line-height:1.85;color:#c1cbc4;padding:3px 0}
.study-look{border-top:1px solid var(--line);margin-top:22px;padding-top:20px}.study-look .eyebrow{font-size:10px;color:#d2d9d2}.study-look p{margin-top:8px}
.study-explanation dl{margin:20px 0 0}.study-explanation dl>div{padding:13px 0;border-top:1px solid #ffffff17}.study-explanation dt{font-weight:600;font-size:12px;color:var(--white)}.study-explanation dd{margin:3px 0 0;font-size:12px;line-height:1.7;color:var(--muted)}
.study-limits{display:grid;grid-template-columns:1.8fr 1fr;gap:clamp(28px,4vw,64px);border-bottom:1px solid var(--line);padding:22px 0 32px;font-size:11px;line-height:1.9;color:var(--muted)}
.study-limits strong{font-weight:500;color:#d4c49d;display:block}.study-limits summary{cursor:pointer;color:#d7dfd7;min-height:44px;padding-bottom:12px}.study-limits details p{margin:0 0 12px}.study-limits ul{padding-left:16px;margin:12px 0}.study-limits li{margin:8px 0}
.connections-next{display:flex;justify-content:space-between;align-items:center;gap:40px;padding:60px 0 44px}.connections-next h2{font:600 clamp(34px,3.6vw,54px)/1.05 Barlow,'Arial Narrow',sans-serif;text-transform:uppercase;margin-top:13px}.connections-next p:last-child{font-size:14px;line-height:1.8;color:var(--muted);max-width:55ch;margin-top:18px}.connections-next .project-link{white-space:nowrap}
.connections-project{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:26px 0 60px;gap:24px;font-size:13px;color:var(--muted)}
[hidden]{display:none!important}
.connection-stage>.connection-art{position:absolute;inset:0;width:100%;height:100%}
.study-thumb .connection-art{width:100%;height:100%}
.study-thumb,.connection-stage{background:#d7dde0}
.viewer-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 16px;font-size:12px;color:var(--muted)}
.viewer-toolbar button{min-height:44px;background:none;border:0;color:var(--white);display:flex;align-items:center;gap:12px;font-size:13px}
.study-bar{scroll-margin-top:20px}
.model-controls p{font-size:13px;line-height:1.7}
.model-navigation button:last-child{font-size:13px}
.touch-model-help{display:none}
.study-progress{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
.study-progress>span{color:var(--muted);font-size:13px;white-space:nowrap}
.study-progress .line-link{gap:28px;margin:0;font-size:14px}
.study-progress .line-link>span{font-size:20px}
.model-dialog{position:fixed;inset:0;width:min(1320px,100%);height:min(940px,100dvh);max-width:100%;max-height:100dvh;padding:0;margin:auto;border:1px solid var(--line);background:var(--bg);color:var(--white);overflow:hidden}
.model-dialog[open]{display:flex;flex-direction:column}
.model-dialog::backdrop{background:#000c;backdrop-filter:blur(8px)}
.model-dialog-header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:14px 24px;flex:none;border-bottom:1px solid var(--line)}
.model-dialog-header .eyebrow{font-size:10px;color:var(--muted)}
.model-dialog-header h2{font:600 30px/1.1 Barlow,'Arial Narrow',sans-serif;text-transform:uppercase;margin-top:4px}
.model-dialog-header button{display:flex;align-items:center;gap:14px;min-width:90px;min-height:48px;padding:10px 16px;border:1px solid #68736d;background:transparent;color:var(--white);font-size:14px}
.model-dialog-header button span{font-size:24px}
#dialog-viewer-slot{flex:1;min-height:0;display:flex;padding:16px}
.is-expanded.study-visual{display:flex;flex-direction:column;flex:1;min-height:0}
.is-expanded .connection-stage{flex:1;height:auto;min-height:80px}
.is-expanded .model-controls{flex:none}
.is-scroll-safe #model-canvas canvas{pointer-events:none;touch-action:pan-y}
.is-scroll-safe #model-canvas{pointer-events:none}
@media(pointer:coarse){.desktop-model-help{display:none}.touch-model-help{display:inline}}
@media(max-width:1050px){.study-choice{gap:10px}.study-choice small{display:none}.study-thumb{width:60px;height:56px}.study-workspace{grid-template-columns:minmax(0,1.4fr) minmax(250px,1fr)}.connections-next{align-items:flex-start;flex-direction:column;gap:24px}.study-limits{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.connections-page{padding-top:100px}.connection-back{margin-bottom:20px}.connections-heading{grid-template-columns:1fr;gap:22px}.connections-heading h1{font-size:58px}.connections-heading .section-copy{font-size:14px;max-width:42ch}.connection-status{margin-top:14px;font-size:11px}.study-choices{gap:8px;margin:28px 0}.study-choice{display:block;padding:8px;position:relative}.study-thumb{display:block;width:100%;height:64px;margin-bottom:10px}.study-choice strong{font-size:11px;line-height:1.5}.study-choice-arrow{display:none}.study-workspace{grid-template-columns:1fr;gap:24px}.study-bar h2{font-size:32px}.study-revision{font-size:10px}.connection-stage{height:390px}.connection-stage>img{object-fit:cover}.model-controls{gap:12px;padding:12px}.assembly-switch{max-width:none;flex-basis:100%}.model-navigation{width:100%}.model-navigation button{flex:1}.model-navigation button:last-child{flex:2}.study-explanation{font-size:14px}.study-limits{display:block;font-size:11px;padding-bottom:24px}.study-limits details{margin-top:14px}.connections-next{padding:38px 0}.connections-next h2{font-size:38px}.connections-next .project-link{white-space:normal;width:100%;font-size:12px;gap:15px}.connections-project{align-items:flex-start;flex-direction:column;padding-bottom:44px}.study-look{margin-top:18px;padding-top:16px}}
/* Phone-first study entry, with the canvas reserved for the expanded view. */
@media(max-width:760px){
 .connections-page{padding-top:78px}.connection-back{margin-bottom:6px;min-height:36px}
 .connections-heading{gap:12px}.connections-heading h1{margin-top:8px}
 .connections-heading .section-copy{font-size:14px;line-height:1.7;max-width:36ch}
 .connection-status{font-size:12px;line-height:1.6;margin-top:10px}
 .study-choices{margin:20px 0 18px;gap:8px}.study-thumb{height:54px;margin-bottom:6px}
 .study-choice{padding:7px}.study-choice strong{font-size:12px}
 .study-bar{margin-bottom:14px}.study-revision{font-size:12px}
 .connection-stage{height:250px}.study-workspace{gap:20px}
 .connection-load p{font-size:13px}.connection-load .project-link{min-height:48px}
 .model-navigation button{min-height:48px;min-width:44px}
 .assembly-switch span{font-size:13px;min-height:48px}
 .desktop-model-help{display:none}.touch-model-help{display:inline}
 .study-explanation dd,.study-explanation dt,.study-limits{font-size:13px}
 .study-limits{padding:20px 0}.study-progress{align-items:flex-start;flex-direction:column;gap:6px;padding:16px 0}
 .study-progress .line-link{width:100%;justify-content:space-between;min-height:48px}
 .model-dialog{width:100%;height:100dvh;border:0}
 .model-dialog-header{padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top))}
 .model-dialog-header h2{font-size:28px}
 #dialog-viewer-slot{padding:10px 10px max(10px,env(safe-area-inset-bottom))}
 .is-expanded .model-controls{padding:10px;gap:10px}
 .is-expanded .model-controls p{font-size:12px}
}
@media(max-height:500px) and (orientation:landscape){
 .model-dialog-header{padding:8px 16px}.model-dialog-header .eyebrow{display:none}
 .is-expanded.study-visual{display:grid;grid-template-columns:minmax(0,1fr) 240px}
 .is-expanded .connection-stage{height:100%;min-height:0}
 .is-expanded .model-controls{display:flex;align-content:center;overflow-y:auto}
 .is-expanded .assembly-switch{flex-basis:100%;max-width:none}
 .is-expanded .model-navigation{flex-wrap:wrap}.is-expanded .model-navigation button{flex:1}
 .is-expanded .model-navigation button:last-child{flex-basis:100%}
}
.model-dialog-identity{display:flex;align-items:center;gap:14px;min-width:0}
.model-dialog-identity .brand-mark{flex:none}
.dialog-study-status{flex:none;padding:0 16px max(10px,env(safe-area-inset-bottom));font-size:12px;line-height:1.5;color:#d4c49d}
@media(max-width:760px){#dialog-viewer-slot{padding-bottom:10px}.model-dialog-header{gap:10px}.model-dialog-header h2{font-size:26px}.model-dialog-header .eyebrow{font-size:9px;letter-spacing:.08em}.model-dialog-identity{gap:10px}.model-dialog-header button{min-width:80px;padding:10px 12px}}
@media(max-height:500px) and (orientation:landscape){.is-expanded .model-controls{padding:10px;gap:8px}.is-expanded .model-controls p{font-size:12px;line-height:1.5}}