/* ============================================================
   The sketch plan of the grounds
   ============================================================ */
.plan{
  display:grid; gap:clamp(1.2rem,3vw,2.4rem);
  grid-template-columns:minmax(0,1.55fr) minmax(260px,1fr);
  align-items:start;
  margin:0 auto clamp(2.5rem,5vw,4rem);
  max-width:1060px;
}
.plan-canvas{
  background:var(--stone-50); border:1px solid var(--stone-200);
  border-radius:1rem; padding:clamp(.8rem,2vw,1.4rem);
}
section:nth-of-type(even) .plan-canvas{background:#fff}

.plan-svg{display:block; width:100%; height:auto; color:var(--terracotta-dark)}
.plan-svg .edge{stroke:var(--stone-400); stroke-width:2}
.plan-svg .block{stroke:var(--terracotta-dark); opacity:.85}
.plan-svg .ink{stroke:var(--terracotta); opacity:.7}
.plan-svg .track{stroke:var(--stone-400); stroke-dasharray:2 8}
.plan-svg .garden path:first-child{fill:rgba(180,196,137,.16)}
.plan-svg .plaza path:first-child{fill:rgba(234,224,210,.5)}

.plan-svg .hot{cursor:pointer}
.plan-svg .hit{fill:transparent; stroke:none}
.plan-svg .pin{
  fill:var(--stone-50); stroke:var(--terracotta-dark); stroke-width:1.6;
  transition:fill .25s ease, transform .25s cubic-bezier(.2,.8,.3,1);
  transform-box:fill-box; transform-origin:center;
}
.plan-svg .num{
  font-family:var(--sans); font-size:13px; font-weight:600;
  fill:var(--terracotta-dark); stroke:none; pointer-events:none;
  transition:fill .25s ease;
}
.plan-svg .hot:hover .pin,
.plan-svg .hot:focus-visible .pin{transform:scale(1.18)}
.plan-svg .hot.on .pin{fill:var(--terracotta-dark); transform:scale(1.18)}
.plan-svg .hot.on .num{fill:var(--stone-50)}
.plan-svg .hot:focus{outline:none}
.plan-svg .hot:focus-visible .pin{stroke-width:2.6}

.plan-info{
  border-left:2px solid var(--marigold); padding-left:clamp(1rem,2vw,1.5rem);
  position:sticky; top:6rem;
}
.plan-eyebrow{
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 .6rem;
}
.plan-info h3{
  font-family:var(--serif); font-weight:400; color:var(--green);
  font-size:clamp(1.4rem,2.6vw,1.85rem); margin:0 0 .6rem; line-height:1.2;
}
#planBody{color:var(--ink-soft); margin:0; font-size:.96rem}
.plan-note{
  margin:1.4rem 0 0; font-size:.8rem; color:var(--ink-faint);
  font-style:italic; line-height:1.55;
}

@media(max-width:820px){
  .plan{grid-template-columns:1fr}
  .plan-info{position:static; border-left:0; border-top:2px solid var(--marigold);
    padding:1.2rem 0 0}
}
@media (prefers-reduced-motion:reduce){
  .plan-svg .pin{transition:none}
}

.plan-svg .label text{
  font-family:var(--sans); font-size:11px; letter-spacing:.06em;
  fill:var(--ink-faint); stroke:none; pointer-events:none;
}