/* Freespace Scaffold  -  interactive 3D Urban Notes study */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#090909;color:#f5f5f3;font-family:Inter,Arial,Helvetica,sans-serif;font-weight:400}
button,a{-webkit-tap-highlight-color:transparent}
.study .eyebrow{margin:0 0 12px;font-size:13px;letter-spacing:.12em;color:#b3b3b3;font-weight:700}
.study h1{font-family:'Bebas Neue',Arial,sans-serif;font-weight:700;font-size:clamp(46px,5.5vw,76px);letter-spacing:-.02em;line-height:1.02;margin:0;color:#f5f5f3}
.ss-deck{font-size:18px;line-height:1.55;margin:14px 0 0!important;color:#b3b3b3}
.intro{margin:32px var(--ss-gutter,48px) 0;display:flex;align-items:end;justify-content:space-between;gap:32px}
.intro>p{font-size:17px;line-height:1.65;color:#b3b3b3;margin:0;max-width:42ch}
h2{font-size:clamp(28px,3vw,42px);font-weight:700;letter-spacing:-.01em;line-height:1.15;margin:0 0 18px;color:#f5f5f3}
p{line-height:1.65;font-size:17px}

.viewer{display:flex;flex-direction:column;width:100%;margin-top:28px;background:#0c0c0c;border-top:1px solid #333;border-bottom:1px solid #333}
.study .viewer{height:auto!important;min-height:0!important;max-height:none!important;background:#0c0c0c!important}
body.ss-dark .study .viewer,body.ss-dark .viewer{background:#0c0c0c!important}

.viewer-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:16px var(--ss-gutter,48px) 14px;border-bottom:1px solid #333;background:#111}
.mode-note{color:#8a8a8a;font-size:14px;line-height:1.5;max-width:56ch;pointer-events:none}
.mode-note strong{color:#f5f5f3;font-weight:600}
.mode-legend{display:block;margin-top:4px;color:#6e6e6e;font-size:13px}
.view-tools{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
.viewer button{font:14px Inter,Arial,sans-serif;color:#f5f5f3;background:#171717;border:1px solid #555;border-radius:3px;padding:10px 14px;cursor:pointer;white-space:nowrap}
.viewer button:hover{background:#222;border-color:#777}
.viewer button[aria-pressed=true]{background:#f5f5f3;color:#090909;border-color:#f5f5f3}
.viewer button:focus-visible,#freespaceScene:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #fff;outline-offset:3px}

.viewer-stage{position:relative;width:100%;height:min(72svh,820px);min-height:480px;background:#050505}
#freespaceScene{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;background:#050505;cursor:grab}
#freespaceScene.is-dragging{cursor:grabbing}
.viewer-fallback{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:#050505;padding:24px;text-align:center}
.viewer-fallback p{color:#8a8a8a;font-size:15px;max-width:36ch;margin:0 auto}
.viewer-stage.is-fallback .viewer-fallback{display:flex}
.viewer-stage.is-fallback #freespaceScene{display:none}
.viewer-hint{position:absolute;left:16px;bottom:16px;z-index:2;padding:8px 12px;background:rgba(9,9,9,.72);border:1px solid #333;border-radius:3px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#b3b3b3;pointer-events:none;opacity:.9}

.viewer-footer{display:flex;flex-direction:column;gap:12px;padding:14px var(--ss-gutter,48px) 18px;border-top:1px solid #333;background:#111}
.caption{margin:0;font-size:14px;color:#8a8a8a;line-height:1.5}
.controls{display:flex;gap:28px;align-items:flex-end;flex-wrap:wrap;padding:14px 18px;border:1px solid #333;background:#171717;border-radius:4px;max-width:640px}
.controls label{display:flex;flex-direction:column;gap:8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#b3b3b3;min-width:160px;flex:1}
.controls input[type=range]{width:100%;accent-color:#b69566;height:28px;margin:0}
.controls .val{color:#f5f5f3;font-variant-numeric:tabular-nums;letter-spacing:0;text-transform:none;font-size:14px;margin-left:8px}

.brief{display:grid;grid-template-columns:1fr 1.15fr;gap:6vw;margin:72px max(48px,6vw) 36px;align-items:start}
.brief .eyebrow,.why .eyebrow,.how .eyebrow,.close .eyebrow{color:#b3b3b3;font-size:13px;letter-spacing:.12em;font-weight:700;margin:0 0 14px}
.brief p,.why p,.how p,.close p{color:#b3b3b3;font-size:17px;line-height:1.65;max-width:62ch;margin:0}
.brief h2,.why h2,.how h2,.close h2{margin-bottom:16px}
.why{margin:16px var(--ss-gutter,48px) 48px;max-width:78ch}
.why ul,.how ul{margin:18px 0 0;padding:0;list-style:none}
.why li,.how li{padding:16px 0;border-top:1px solid #333;display:grid;grid-template-columns:28px 1fr;gap:16px;color:#b3b3b3;font-size:17px;line-height:1.65}
.why li span,.how li span{color:#8a8a8a;font-size:13px;margin-top:3px}
.how{margin:0 var(--ss-gutter,48px) 48px;max-width:78ch;padding-top:8px;border-top:1px solid #333}
.close{margin:0 max(48px,6vw) 72px;padding:48px max(0px, calc(var(--ss-gutter,48px) - 0px)) 0;border-top:1px solid #333;max-width:78ch}
.close p{margin-top:8px}
.reference{margin:28px var(--ss-gutter,48px) 0;font-size:14px;color:#8a8a8a;line-height:1.7}
.reference a{color:#c9b08a;text-decoration:none;border-bottom:1px solid #3a342c}
.reference a:hover{color:#f5f5f3;border-color:#777}

@media(max-width:900px){
  .intro{flex-direction:column;align-items:flex-start;gap:18px;margin:28px max(24px,5vw) 0}
  .brief{grid-template-columns:1fr;gap:22px;margin:48px max(24px,5vw) 28px}
  .why,.how,.reference{margin-left:max(24px,5vw);margin-right:max(24px,5vw)}
  .close{margin:0 max(24px,5vw) 56px}
  .viewer-header,.viewer-footer{padding-left:max(24px,5vw);padding-right:max(24px,5vw)}
  .viewer-stage{min-height:420px;height:min(64svh,640px)}
  .controls{max-width:none}
}
@media(max-width:650px){
  .study h1{font-size:clamp(40px,11vw,56px)}
  .ss-deck{font-size:15px}
  .intro>p,.brief p,.why p,.how p,.close p,.why li,.how li{font-size:15px}
  .viewer button{padding:9px 12px;font-size:13px}
  .viewer-hint{font-size:11px;left:10px;bottom:10px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}