/* Voronoi Canopy study v2 — readable type, tight steps, 3D viewer */
*{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}
.view-tabs{display:flex;gap:6px}
.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,#voronoiScene:focus-visible,#voronoiPlan:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #fff;outline-offset:3px}

.viewer-stage{position:relative;width:100%;height:min(68svh,760px);min-height:460px;background:#0c0c0c}
#voronoiScene,#voronoiPlan{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;background:#0c0c0c}
#voronoiScene{cursor:grab}
#voronoiScene.is-dragging{cursor:grabbing}
#voronoiPlan{cursor:crosshair;display:none}
.viewer-stage.is-plan #voronoiScene{display:none}
.viewer-stage.is-plan #voronoiPlan{display:block}
.viewer-fallback{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:#0c0c0c}
.viewer-fallback img{width:100%;height:100%;object-fit:cover}
.viewer-stage.is-fallback .viewer-fallback{display:flex}
.viewer-stage.is-fallback #voronoiScene,.viewer-stage.is-fallback #voronoiPlan,.viewer-stage.is-fallback .view-tabs{display:none}

.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:560px}
.controls label{display:flex;flex-direction:column;gap:8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#b3b3b3;min-width:180px;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}

.concept-note{margin:0 var(--ss-gutter,48px);padding:15px 0;border-top:1px solid #333;font-size:13px;line-height:1.65;color:#b3b3b3}
.legend-row{margin:12px max(48px,4vw) 0;display:flex;flex-wrap:wrap;gap:18px;font-size:13px;color:#8a8a8a}
.legend-row i{display:inline-block;width:10px;height:10px;margin-right:7px;vertical-align:-1px;border:1px solid #b69566}
.legend-row i.seat{background:#b69566}
.legend-row i.tree{border-radius:50%;border-color:#7a9a6a;background:transparent}

.brief{display:grid;grid-template-columns:1fr 1.15fr;gap:6vw;margin:72px max(48px,6vw) 36px;align-items:start}
.brief .eyebrow,.steps .eyebrow,.process .eyebrow,.why .eyebrow{color:#b3b3b3;font-size:13px;letter-spacing:.12em;font-weight:700;margin:0 0 14px}
.brief p,.why p,.process-top>p,.close p{color:#b3b3b3;font-size:17px;line-height:1.65;max-width:62ch;margin:0}
.step-copy p{color:#d0d0cc;font-size:18px;line-height:1.7;max-width:none;margin:0}
.brief h2,.why h2{margin-bottom:16px}
.why{margin:16px var(--ss-gutter,48px) 56px;max-width:78ch}
.why ul{margin:18px 0 0;padding:0;list-style:none}
.why 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{color:#8a8a8a;font-size:13px;margin-top:3px}

.steps{border-top:1px solid #333;padding:56px var(--ss-gutter,48px) 28px}
.steps-intro{display:flex;justify-content:space-between;gap:40px;align-items:end;margin:0 0 20px;padding:0 8px}
.steps-intro p{max-width:50ch;color:#b3b3b3;font-size:17px;line-height:1.65;margin:0}
.step{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.2fr);gap:40px;align-items:center;padding:44px 0;border-top:1px solid #333;box-sizing:border-box}
.step:nth-child(even){grid-template-columns:minmax(0,1.2fr) minmax(0,.95fr)}
.step:nth-child(even) .step-copy{order:2}
.step:nth-child(even) figure{order:1}
.step-copy{max-width:none;padding:4px 8px;min-width:0}
.step-copy>span{display:block;color:#8a8a8a;font-size:14px;letter-spacing:.08em;margin-bottom:10px}
.step-copy h3{font-size:clamp(24px,2.4vw,32px);font-weight:600;letter-spacing:-.02em;margin:0 0 14px;color:#f5f5f3;line-height:1.2}
.step-copy .gh{display:inline-block;margin-top:12px;font-size:13px;letter-spacing:.04em;color:#c9b08a;border:1px solid #3a342c;background:#171410;padding:8px 11px;border-radius:2px}
figure{margin:0;min-width:0}
figure img{width:100%;height:auto;display:block;border:1px solid #333;background:#0c0c0c}
figcaption{font-size:14px;line-height:1.6;color:#8a8a8a;padding:12px 4px 0}

.process{border-top:1px solid #333;padding:56px var(--ss-gutter,48px) 48px;background:#111}
.process-top{display:flex;gap:40px;justify-content:space-between;align-items:end;margin-bottom:22px}
.process-top>p{max-width:48ch;margin:0}
.process-top h2{margin-bottom:10px}
.reference{font-size:14px;color:#8a8a8a;margin:14px 0 0;line-height:1.7}
.reference a{color:#f5f5f3;text-underline-offset:3px}
.reference a:hover{color:#fff}

.close{margin:56px var(--ss-gutter,48px) 20px;max-width:68ch}
.close h2{margin-bottom:16px}
.close a.cta{display:inline-block;margin-top:22px;padding:14px 20px;border:1px solid #777;color:#f5f5f3;text-decoration:none;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.close a.cta:hover{background:#f5f5f3;color:#090909}

@media(max-width:900px){
  .study .viewer{height:auto!important;min-height:0!important}
  .intro{display:block;margin-top:24px;margin-inline:max(24px,5vw)}
  .intro>p{margin-top:16px;font-size:16px}
  .ss-deck{font-size:16px}
  p,.brief p,.why p,.step-copy p,.process-top>p,.close p,.steps-intro p{font-size:16px}
  .viewer-header{flex-direction:column;align-items:stretch;gap:12px;padding:14px max(24px,5vw) 12px}
  .mode-note{font-size:13px;max-width:none}
  .view-tools{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .view-tools .view-tabs{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}
  .view-tools button{width:100%;font-size:13px;padding:10px 8px;text-align:center}
  .viewer-stage{height:auto;min-height:0;aspect-ratio:5/4;max-height:none}
  .viewer-footer{padding:12px max(24px,5vw) 16px;gap:10px}
  .caption{font-size:13px}
  .controls{max-width:none;width:100%;gap:14px;padding:12px 14px;flex-direction:column;align-items:stretch}
  .controls label{min-width:0;width:100%;font-size:12px}
  .brief,.steps-intro{display:block}
  .brief{margin:48px max(24px,5vw) 20px}
  .why{margin:10px max(24px,5vw) 40px}
  .steps{padding:40px 16px 12px}
  .steps-intro{padding:0 8px;margin-bottom:16px}
  .step,.step:nth-child(even){grid-template-columns:1fr;gap:18px;padding:28px 24px;align-items:start}
  .step:nth-child(even) .step-copy,.step:nth-child(even) figure{order:unset}
  .step-copy{max-width:none}
  .process{padding:36px max(24px,5vw)}
  .process-top{display:block}
  .process-top>p{max-width:none;margin-top:14px}
  .close{margin:40px max(24px,5vw)}
  .concept-note,.legend-row{margin-inline:max(24px,5vw)}
  .desktop{display:none}
  figcaption,.legend-row,.concept-note,.reference{font-size:13px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}