.masterplan-page{padding:150px 24px 60px;background:#f7f4ee;color:#342b27}.mp-heading{text-align:center;margin:0 auto 32px}.mp-heading>p:first-child{letter-spacing:3px;color:#8a6b36;font-size:13px}.mp-heading h1{margin:14px 0}.mp-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:12px;max-width:1600px;margin:0 auto 18px}.mp-toolbar input,.mp-toolbar select{background:white;border:1px solid #d6cec1;border-radius:6px;padding:10px 14px;color:#342b27;font:inherit}.mp-toolbar input{width:280px;max-width:100%}.mp-viewport{overflow:auto;max-height:78vh;border-radius:12px;border:1px solid #d6cec1;background:#e2e7dd}.mp-canvas{position:relative;width:100%;min-width:1100px;line-height:0}.mp-image{display:block;width:100%;height:auto!important;max-width:none}.mp-lot{position:absolute;border:1px solid transparent;background:transparent;padding:0;cursor:pointer;border-radius:1px;min-width:0;transition:background .15s,box-shadow .15s}.mp-lot:hover,.mp-lot:focus-visible,.mp-lot.is-match{background:rgba(255,255,255,.4);box-shadow:inset 0 0 0 2px #fff,0 0 8px #3e2115;outline:2px solid #77121d;z-index:2}.mp-lot.is-muted{opacity:.3;background:#222}.mp-note{font-size:13px;margin:14px 0;color:#756b63}.mp-dialog{padding:0;border:0;border-radius:12px;width:calc(100% - 32px);max-width:1560px;max-height:92dvh;margin:auto;color:#3b3b3b;background:#fff;box-shadow:0 20px 80px #0006}.mp-dialog::backdrop{background:#000b;backdrop-filter:blur(3px)}.mp-dialog-header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 24px;border-bottom:1px solid #eee;position:sticky;top:0;background:white;z-index:3}.mp-dialog-header h2{font-size:18px;font-weight:500;margin:0}.mp-close{border:0;background:none;color:#666;font-size:32px;cursor:pointer;line-height:1;width:44px;height:44px}.mp-close:focus-visible{outline:2px solid #77121d}.mp-detail-layout{display:grid;grid-template-columns:300px minmax(0,1fr);margin:20px;min-height:500px;border-radius:8px;overflow:hidden;box-shadow:0 2px 14px #0001}.mp-info{background:#77121d;color:#fff;padding:40px 26px;line-height:1.7}.mp-info>p{font-size:12px;letter-spacing:2px}.mp-info h3{font-size:34px;color:white;margin:25px 0 30px;overflow-wrap:anywhere}.mp-info dl{border-top:1px solid #ffffff55;padding-top:24px;margin:0}.mp-info dl>div{display:flex;justify-content:space-between;gap:12px;margin:12px 0}.mp-info dd{margin:0;text-align:right}.mp-description{margin:30px 0}.mp-info small{opacity:.7}.mp-plans{display:flex;align-items:center;justify-content:center;gap:24px;padding:32px;flex-wrap:wrap;min-width:0}.mp-plans figure{margin:0;flex:1 1 230px;max-width:100%}.mp-plans img{width:100%;height:auto;display:block}.mp-plans figcaption{text-align:center;margin-top:12px}.mp-empty{text-align:center;color:#777;padding:40px}.mp-empty h3{font-size:24px}.mp-modal-open{overflow:hidden!important}@media(max-width:700px){.masterplan-page{padding:110px 12px 32px}.mp-heading h1{font-size:30px}.mp-dialog{width:calc(100% - 16px)}.mp-detail-layout{grid-template-columns:1fr;margin:10px}.mp-info{padding:24px}.mp-info h3{margin:10px 0;font-size:28px}.mp-dialog-header{padding:10px 16px}.mp-plans{padding:16px}.mp-toolbar{gap:8px}.mp-toolbar input{width:100%}}

/* Pan and zoom keep the image and its hit areas in the same coordinate space. */
.mp-viewport{position:relative;overflow:hidden;height:clamp(340px,70vh,850px);max-height:none;touch-action:none;cursor:grab;user-select:none;overscroll-behavior:contain}
.mp-viewport:focus-visible{outline:3px solid #77121d;outline-offset:3px}
.mp-canvas{position:absolute;left:0;top:0;width:100%;min-width:0;aspect-ratio:16/9;transform-origin:0 0;will-change:transform}
.mp-image{pointer-events:none;-webkit-user-drag:none}
.mp-viewport.is-dragging,.mp-viewport.is-dragging .mp-lot{cursor:grabbing}
.mp-zoom-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mp-zoom-controls button{border:1px solid #d6cec1;border-radius:6px;min-width:44px;min-height:44px;background:#fff;color:#77121d;padding:8px 14px;font:inherit;cursor:pointer}
.mp-zoom-controls button:disabled{opacity:.4;cursor:default}
.mp-zoom-controls button:focus-visible{outline:2px solid #77121d;outline-offset:2px}
.mp-zoom-controls #mp-zoom{width:120px;accent-color:#77121d;padding:0;border:0;min-height:44px;cursor:pointer}
#mp-zoom-value{min-width:48px;font-variant-numeric:tabular-nums}
.mp-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:700px){.mp-viewport{height:60vh;min-height:340px}.mp-zoom-controls{gap:6px}.mp-zoom-controls #mp-zoom{width:88px}.mp-zoom-controls button{padding:8px 10px}}

/* This page is a full-window map below the existing theme navigation. */
body.mp-fullscreen{overflow:hidden!important;margin:0}
.mp-fullscreen #content{padding:0!important;margin:0!important}
.mp-fullscreen .footer-main,.mp-fullscreen .soical-main{display:none!important}
.mp-fullscreen #header-main-site,.mp-fullscreen .menu_mb{top:var(--mp-admin-height,0px)}
.mp-fullscreen .masterplan-page{position:fixed;inset:var(--mp-header-height,0px) 0 0;padding:0!important;margin:0!important;overflow:hidden}
.mp-fullscreen .mp-viewport{width:100%;height:100%;min-height:0;max-height:none;border:0;border-radius:0;background:#193127}
.mp-fullscreen .mp-viewport:focus-visible{outline:0}
.mp-fullscreen .mp-canvas{max-width:none}

/* Fit each drawing inside the popup instead of extending its height. */
.mp-dialog[open]{display:flex;flex-direction:column;height:92dvh;overflow:hidden}
.mp-dialog-header{flex:none}
#mp-detail{flex:1;min-height:0;overflow:hidden}
.mp-detail-layout{height:calc(100% - 40px);min-height:0}
.mp-info{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:24px}
.mp-info h3{margin:12px 0 18px}
.mp-info dl{padding-top:12px}
.mp-description{margin:18px 0}
.mp-plans{min-height:0;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;padding:8px;gap:6px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity}
.mp-plans figure{flex:0 0 auto;max-width:none;min-width:0;min-height:0;display:flex;flex-direction:column;scroll-snap-align:start}
.mp-plans figure>a{display:flex;flex:1;min-height:0;height:100%;align-items:center;justify-content:center}
.mp-plans img{width:auto;max-width:none;height:100%;min-height:0;max-height:100%;object-fit:contain}
.mp-plans figcaption{flex:none;max-height:20%;overflow:auto;margin-top:8px;font-size:14px}
.mp-empty{margin:auto}
@media(max-width:700px){
    #mp-detail{overflow-y:auto}
    .mp-detail-layout{height:auto;min-height:0;margin:10px;overflow:visible}
    .mp-info{overflow:visible}
    .mp-plans{height:60dvh;box-sizing:border-box}
}

/* The map stays interactive beside the detail drawer. */
.mp-dialog{position:absolute;inset:0 0 0 auto;display:flex;flex-direction:column;width:48%;max-width:760px;height:100%;max-height:none;margin:0;border-radius:0;overflow:hidden;z-index:5;transform:translateX(100%);visibility:hidden;transition:transform .55s cubic-bezier(.22,1,.36,1),visibility .55s;box-shadow:-12px 0 40px #0003}
.has-selection .mp-dialog{transform:translateX(0);visibility:visible}
.mp-dialog-header{padding:12px 18px}
.mp-dialog-header h2{font-size:17px;line-height:1.4}
.mp-dialog #mp-detail{overflow-y:auto;overscroll-behavior:contain}
.mp-dialog .mp-detail-layout{display:flex;flex-direction:column;height:auto;min-height:100%;margin:0;border-radius:0;box-shadow:none;overflow:visible}
.mp-dialog .mp-info{overflow:visible;padding:20px 24px}
.mp-dialog .mp-info h3{font-size:28px;margin:8px 0 12px}
.mp-dialog .mp-info dl{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.mp-dialog .mp-info dl>div{display:block;margin:6px 0}
.mp-dialog .mp-info dt{font-size:12px;opacity:.75}
.mp-dialog .mp-info dd{text-align:left;font-size:15px}
.mp-dialog .mp-description{font-size:13px;margin:12px 0 0}
.mp-dialog .mp-plans{flex:none;height:clamp(260px,45dvh,520px);padding:8px;box-sizing:border-box}
.mp-lot.is-selected,.mp-lot.is-selected:hover{background:rgba(255,211,83,.65);box-shadow:inset 0 0 0 3px #fff3a1;outline:0;z-index:3}
.has-selection .mp-lot:not(.is-selected){background:rgba(15,30,22,.18)}
.has-selection .mp-lot:not(.is-selected):hover{background:rgba(255,255,255,.45)}
@media(max-width:700px){
    .mp-dialog{inset:auto 0 0;width:100%;max-width:none;height:58%;border-radius:16px 16px 0 0;transform:translateY(100%)}
    .has-selection .mp-dialog{transform:translateY(0)}
    .mp-dialog .mp-info{padding:16px}
    .mp-dialog .mp-plans{height:40dvh}
}
@media(prefers-reduced-motion:reduce){.mp-dialog{transition:none}}