/* ============================================================
   Block plan — a top-down schematic of both buildings.
   Hover or focus a bay to read it; click to open its page.
   ============================================================ */

.plan{margin-top:clamp(34px,5vw,60px)}
.plan-wrap{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.9fr);
  gap:clamp(22px,3vw,44px);align-items:start}
@media(max-width:960px){ .plan-wrap{grid-template-columns:1fr} }

.plan svg{width:100%;height:auto;display:block;overflow:visible}

/* bays */
.bay{cursor:pointer}
.bay rect{fill:#fff;stroke:var(--ink);stroke-width:1.6;transition:fill .25s var(--ease)}
.bay .label{font-family:var(--font);font-weight:600;font-size:13px;fill:var(--ink);letter-spacing:.02em}
.bay .sub{font-family:var(--font);font-weight:400;font-size:10.5px;fill:rgba(6,6,6,.56)}
.bay:hover rect,.bay:focus-visible rect{fill:var(--volt)}
/* a tap focuses the group as well, and the UA ring on a tapped bay reads as an
   error state. The keyboard ring below is the deliberate one. */
.bay:focus{outline:none}
.bay:focus-visible rect{stroke-width:3}
.bay.is-leased rect{fill:#EDEBE6}
.bay.is-leased:hover rect{fill:#E3E0D8}
/* sits on #EDEBE6, not white, so it needs a touch more than the others */
.bay.is-leased .label{fill:rgba(6,6,6,.60)}
.bay.is-soon rect{fill:url(#hatch)}
.bay.on rect{fill:var(--volt)}
/* the strip is the status, readable without hovering anything */
.bay .flag{fill:var(--volt);stroke:var(--ink);stroke-width:1.6;pointer-events:none}
.bay .flag.half{fill:var(--volt)}
.bay.on .flag{fill:var(--ink)}

/* the lot, streets, labels */
.plan .lot{fill:#F6F5F2;stroke:var(--line);stroke-width:1}
.plan .stall{stroke:rgba(6,6,6,.16);stroke-width:1}
/* .42 measured 2.94:1 at 10.5px; .56 clears 4.5 */
.plan .street{font-family:var(--font);font-size:10.5px;font-weight:600;fill:rgba(6,6,6,.56);letter-spacing:.16em}
.plan .bldg{font-family:var(--font);font-size:11px;font-weight:700;fill:var(--ink);letter-spacing:.1em}

/* readout panel */
.plan-read{border:1px solid var(--line);padding:clamp(20px,2.4vw,28px);position:sticky;top:96px}
.plan-read .eyebrow{font-size:.72rem;letter-spacing:.14em;color:var(--mute);font-weight:600}
.plan-read h3{text-transform:uppercase;font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.02;margin-top:10px}
.plan-read .sf{font-weight:500;font-size:1.5rem;letter-spacing:-.03em;margin-top:14px}
.plan-read p{color:var(--mute);font-size:.97rem;line-height:1.6;margin-top:12px}
.plan-read .go{display:inline-flex;align-items:stretch;margin-top:18px}
.plan-read .go b{background:var(--ink);color:#fff;font-weight:600;font-size:.76rem;letter-spacing:.09em;
  padding:15px 18px;display:flex;align-items:center}   /* 15, not 14: 14 lands the button on 42px */
.plan-read .go i{background:var(--volt);width:46px;display:grid;place-items:center;font-style:normal;
  transition:transform .4s var(--ease)}
.plan-read .go:hover i{transform:translate(3px,-3px)}
.plan-read .go.muted{pointer-events:none;opacity:.45}

.plan-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:20px;font-size:.74rem;color:var(--mute)}
.plan-legend span{display:inline-flex;align-items:center;gap:8px}
.plan-legend i{width:14px;height:14px;border:1.5px solid var(--ink);display:block}
.plan-legend i.open{background:linear-gradient(180deg,var(--volt) 0 34%,#fff 34%)}
.plan-legend i.leased{background:#EDEBE6}
.plan-legend i.soon{background:linear-gradient(90deg,var(--volt) 0 42%,transparent 42%),repeating-linear-gradient(45deg,#fff,#fff 3px,rgba(6,6,6,.22) 3px,rgba(6,6,6,.22) 5px);background-size:100% 5px,100% 100%;background-repeat:no-repeat,repeat;background-position:top left,0 0}

.plan-hint{font-size:.78rem;color:var(--mute);margin-top:14px}
/* the instruction differs by input, so both are written and one is shown.
   The slide sentence is separate on purpose: hovering is an INPUT condition,
   but whether the plan scrolls is a WIDTH one. An iPad is touch and does not
   scroll, so it must get the tap wording without being told to slide. */
.plan-hint .h-touch{display:none}
.plan-hint .h-slide{display:none}
@media (hover:none){
  .plan-hint .h-fine{display:none}
  .plan-hint .h-touch{display:inline}
}

/* ---- phones ----
   six-eighty.css puts the svg in a sideways scroller at a 620px floor, which
   lifts the 13px bay labels off 6px. They are still small at that scale, so
   the type inside the plan is set larger for the phone only. ---- */
@media (max-width:760px){
  /* matches the width at which six-eighty.css turns the plan into a scroller */
  .plan-hint .h-slide{display:inline}
  .bay{-webkit-tap-highlight-color:transparent}
  .bay .label{font-size:16px}
  .bay .sub{font-size:12.5px}
  .plan .street,.plan .bldg{font-size:12px}
  /* a tapped bay has to stay legible against the volt fill */
  .bay.on .label{fill:var(--ink)}
  .plan-read{position:static;margin-top:22px}
}