/* Besi palette with the shared AK type: Instrument Serif headings, Manrope text. */
:root{--bg:#f4f1e9;--bg-2:#e6e1d5;--surface:#faf8f2;--ink:#26302d;--ink-2:#5c665d;--ink-3:#737d70;--accent:#98734b;--accent-ink:#6c573a;--line:#c8c6b8;--line-2:#a9ae9e;--glass:rgba(255,251,242,.88);--glass-strong:#f7f0e4;--font:'Manrope',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;--serif:'Instrument Serif',Georgia,serif;--ease:cubic-bezier(.2,.7,.2,1);--gutter:5vw}
[hidden]{display:none!important}html{scroll-behavior:smooth}.section{scroll-margin-top:72px}@media(max-width:700px){.section{scroll-margin-top:12px}}
.besi-page .studio-brand{min-height:44px}.besi-page .studio-header nav a{text-decoration:none;min-width:44px}
/* Shared site-study presentation, with dock in the case-study flow. */
    .ss-basis { margin-top: 14px; color: var(--accent-ink); font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
    .ss-implication { margin-top: 20px; padding: 14px 15px; border-left: 3px solid var(--accent); background: var(--glass); border-radius: 0 12px 12px 0; }
    .ss-implication b { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
    .ss-implication p { margin-top: 6px; font-size: 14px; line-height: 1.5; }
    .ss-layer-hint { font-size: 12px; color: var(--ink-2); margin-bottom: 9px; }
    .ss-layer-num { display: inline-block; min-width: 26px; color: var(--accent-ink); font-size: 11px; }
    .ss-controls { position: absolute; bottom: 54px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 18px; background: var(--glass-strong); }
    .ss-controls button { white-space: nowrap; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 8px 12px; font-size: 12px; cursor: pointer; }
    .ss-controls button[aria-pressed=true] { background: var(--ink); color: var(--bg); }
    .ss-controls label { font-size: 11px; display: grid; gap: 4px; padding: 0 6px; }
    .ss-controls input { width: 100px; accent-color: var(--accent); }
    .ss-orientation { position: absolute; top: 90px; left: 28px; display: flex; align-items: center; gap: 18px; font-size: 11px; line-height: 1.5; color: var(--ink-2); }
    .ss-north { position: relative; font-size: 40px; width: 30px; line-height: 1; text-align: center; color: var(--ink); }
    .ss-north b { position: absolute; top: -14px; left: 10px; font-size: 10px; }
    .ss-modal:not(.show) { visibility: hidden; }
    .ss-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 15px; }
    @media(max-width:860px) { .ss-orientation { top: 24px; left: 20px; font-size: 10px; } .ss-controls { bottom: 30px; padding: 5px; gap: 4px; } .ss-controls button { padding: 7px 9px; font-size: 11px; } .ss-controls input { width: 76px; } .ss-stage .ss-hint { display: none; } }
    /* site study dock (js/site-study.js): eight turning site disks under the open building */
    .ss-dock { position: fixed; left: var(--gutter); right: calc(var(--panel-w) + 36px); bottom: 12px; z-index: 9; display: none; }
    body.has-ss .ss-dock { display: block; }
    body.has-ss .open-hint { display: none; }
    .ss-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 2px 4px; }
    .ss-sub { font-size: 12px; color: var(--ink-2); }
    .ss-row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
    .ss-item { background: none; border: 0; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; color: var(--ink); font: inherit; }
    .ss-view { display: block; width: 100%; aspect-ratio: 2 / 1.12; }
    .ss-item b { font-size: 12.5px; font-weight: 800; letter-spacing: .01em; margin-top: 2px; padding: 3px 10px; border-radius: 999px; transition: background .25s, color .25s; white-space: nowrap; }
    .ss-item:hover b, .ss-item:focus-visible b { background: var(--ink); color: var(--bg); }
    .ss-item:focus-visible { outline: none; }
    .ss-error { font-size: 12.5px; color: var(--ink-2); }
    .ss-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 60; }
    .ss-backdrop { position: fixed; inset: 0; z-index: 59; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(12px); opacity: 0; pointer-events: none; transition: opacity .45s var(--ease); }
    .ss-backdrop.show { opacity: 1; pointer-events: auto; }
    .ss-modal { position: fixed; inset: 0; z-index: 61; display: grid; grid-template-columns: 1fr min(430px, 36vw); opacity: 0; pointer-events: none; transition: opacity .45s var(--ease); }
    .ss-modal.show { opacity: 1; }
    .ss-modal.show .ss-stage, .ss-modal.show .ss-info { pointer-events: auto; }
    .ss-stage { position: relative; cursor: grab; touch-action: none; }
    .ss-stage:active { cursor: grabbing; }
    .ss-tags { position: absolute; inset: 0; pointer-events: none; }
    .ss-tag { position: absolute; left: 0; top: 0; display: flex; align-items: center; transition: opacity .35s var(--ease); }
    .ss-tag::after { content: ''; width: 38px; height: 1.5px; background: var(--ink); opacity: .4; }
    .ss-tag button { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(10px); font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; color: var(--ink); }
    .ss-tag.on button { background: var(--ink); color: var(--bg); }
    .ss-tag.dim button { opacity: .45; }
    .ss-hint { position: absolute; left: var(--gutter); bottom: 20px; font-size: 12.5px; color: var(--ink-2); pointer-events: none; }
    .ss-info { margin: 78px 12px 12px 0; border-radius: 26px; background: color-mix(in srgb, var(--bg) 84%, #fff); border: 1px solid var(--line); box-shadow: 0 30px 80px -30px rgba(0,0,0,.35); display: flex; flex-direction: column; overflow: hidden; }
    .ss-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 6px 22px; }
    .ss-nav { display: flex; gap: 6px; }
    .ss-nav button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--glass); cursor: pointer; font-size: 15px; color: var(--ink); }
    .ss-body { overflow-y: auto; padding: 4px 22px 30px; overscroll-behavior: contain; scrollbar-width: thin; }
    .ss-body h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 4vw, 56px); line-height: .95; letter-spacing: -0.03em; margin-top: 8px; }
    .ss-sum { font-size: 17px; line-height: 1.45; margin-top: 12px; }
    .ss-find { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
    .ss-find li { position: relative; padding-left: 18px; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
    .ss-find li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
    .ss-body h3 { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin: 28px 0 10px; display: flex; align-items: center; gap: 10px; }
    .ss-body h3::after { content: ''; flex: 1; height: 1px; background: var(--line); }
    .ss-layers { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
    .ss-layers button { width: 100%; text-align: left; padding: 8px 10px; border-radius: 12px; border: 1px solid transparent; background: none; cursor: pointer; color: var(--ink); font: inherit; }
    .ss-layers button:hover { background: var(--glass); }
    .ss-layers button.on { border-color: var(--line); background: var(--glass); }
    .ss-layers button.dim { opacity: .45; }
    .ss-layers b { display: block; font-size: 14px; }
    .ss-layers small { display: block; font-size: 12px; color: var(--ink-2); line-height: 1.4; }
    .ss-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 18px; font-size: 12px; color: var(--ink-2); }
    .ss-legend span { display: inline-flex; align-items: center; gap: 6px; }
    .ss-legend i { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line); }
    .ss-src { font-size: 11.5px; color: var(--ink-2); margin-top: 22px; line-height: 1.45; }


.ss-dock{position:relative;inset:auto;display:block;margin:60px 0 15px;z-index:9}.ss-row{gap:10px;margin-top:30px}.ss-item b{font-size:11px;padding:3px 4px}.ss-view{aspect-ratio:1.65}.ss-item:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:10px}.ss-item:hover{background:none;color:var(--ink)}
.ss-modal .ss-info{margin-top:22px}.ss-nav button{padding:0}.ss-info p{max-width:none}.ss-stage .ss-controls{white-space:nowrap}.ss-north b{font-size:8px;left:0;top:-15px}.ss-item b{white-space:normal;text-align:center}.ss-body h2{margin-bottom:12px}
.context-shell{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#eae6d8;margin-top:28px}.context-tools,.plan-tabs,.zone-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.context-tools button,.plan-tabs button,.zone-tabs button{padding:9px 16px;font-size:13px}.context-tools button[aria-pressed=true],.plan-tabs button[aria-selected=true],.zone-tabs button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.context-map{overflow:hidden;min-height:230px}.context-map svg{display:block;max-height:600px}.context-map [data-zone]{cursor:pointer;outline:none}.context-map [data-zone]:hover path,.context-map [data-zone]:focus path{stroke:#263b32;stroke-width:1.4}.context-map [data-zone][aria-pressed=true] path{stroke:#f7f0e4;stroke-width:2;filter:drop-shadow(0 0 1px #263b32)}.zone-note{min-height:80px;padding:18px 24px;border-top:1px solid var(--line)}.zone-note h3{font:400 30px/1.1 var(--serif);margin:0 0 8px}.zone-note p{font-size:14px;margin:0}.context-tools label{display:flex;align-items:center;gap:8px;min-height:44px;font-size:13px;font-weight:700;padding:0 8px}.context-tools input{accent-color:var(--accent)}
.media-open{display:block;border:0;padding:0;background:none;width:100%;cursor:zoom-in;border-radius:14px;overflow:hidden}.media-open:hover{background:none}.media-open img{display:block}.plan-image{width:100%;max-height:750px;object-fit:contain;background:#e7e3d8}.plan-caption{font-size:13px;color:var(--ink-2)}
.media-dialog{border:1px solid var(--line);background:var(--bg);color:var(--ink);width:96vw;max-width:1700px;height:94dvh;max-height:1100px;padding:18px;border-radius:12px}.media-dialog::backdrop{background:rgba(30,38,32,.88)}.media-dialog header{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:15px}.media-dialog img{display:block;width:100%;height:calc(100% - 80px);object-fit:contain}.media-dialog button{padding:8px 18px}.media-dialog h2{font:400 26px/1.15 var(--serif);margin:0}.view-ui #layers{display:flex;gap:6px;flex-wrap:wrap}.view-ui #layers button{font-size:12px;padding:8px 14px}.view-ui button[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}#explode-label{display:flex;align-items:center;gap:14px;max-width:480px;min-height:44px;margin-top:12px;font-size:13px;font-weight:700;color:var(--ink-2)}#explode-label input{flex:1;min-width:0;accent-color:var(--accent)}.load-status a{margin-left:12px}
@media(max-width:700px){.view-ui #layers{display:grid;grid-template-columns:1fr 1fr;width:100%}.view-ui #layers button{padding:8px 10px}}
@media(max-width:1100px){.ss-row{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:20px}.ss-view{aspect-ratio:2}}
@media(max-width:860px){.ss-dock{display:block;position:relative;inset:auto;margin-top:45px}.ss-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.ss-item b{font-size:10px;min-height:28px}.ss-modal{grid-template-columns:1fr;grid-template-rows:50dvh 1fr}.ss-modal .ss-info{margin:0 8px 8px}.ss-tag{display:none}.ss-top{padding:10px 15px}.ss-body{padding:0 18px 20px}.ss-body h2{font-size:36px}.ss-orientation{top:18px;left:20px;font-size:9px}.ss-controls{bottom:25px}.ss-controls button{padding:7px 9px}.ss-controls input{width:65px}.context-tools{gap:4px}.context-map svg{min-height:240px}.media-dialog{height:92dvh}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

main img{height:auto}.context-map svg{pointer-events:auto}.ss-modal .ss-controls button{color:var(--ink)}

.ss-modal .ss-controls button[aria-pressed=true]{color:var(--bg)}

body.ss-open{overflow:hidden}.ss-backdrop.show{background:var(--bg)}