/* v12: the blind-spots spread. The yard is drawn from scratch in vector code
   (scratchpad/v12/gen_yard.mjs); the cameras, the CCTV towers and the robot are
   3D meshes (mesh3d.mjs + models.mjs) aimed in 3D and projected into the same
   isometric. Light paper, no dark panel, no bitmap. The facts that used to sit
   in an HTML rail now live inside the drawing; below 760px the drawing is too
   small for them, so the same facts appear as an HTML row under it instead. */
.blind-spots-section{background:#faf9f5;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.blind-spots-section h2 em{font-style:normal;color:#d96719}

.bs-head{display:grid;grid-template-columns:minmax(110px,1fr) 2.7fr;column-gap:40px;align-items:start}
.bs-eyebrow{padding-top:10px;align-self:start;margin:0}
.bs-lede{max-width:880px}
.bs-lede .section-lead{margin-top:26px;max-width:640px;font-size:clamp(16px,1.25vw,18px);line-height:1.72;color:#566268}
.bs-cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px;margin-top:34px}
.blind-note{font-size:12px;line-height:1.7;color:#6d777b;margin:0;max-width:260px}

/* the drawing */
.bs-figure{margin:44px 0 0;border-top:1px solid var(--rule);padding-top:0}
.bs-map{display:block;width:100%;height:auto}
.bs-legend{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:14px 40px;border-top:1px solid var(--rule);padding-top:16px;margin-top:4px}
.bs-source{font-size:10px;line-height:1.7;letter-spacing:.2px;color:#8b9298;margin:0;max-width:520px}

/* Every fact and every key lives inside the SVG -- there is no HTML list of
   them anywhere on this page, so nothing can leak as stray text under the
   drawing if a stylesheet is late or cached. The drawing carries two versions
   of the facts: a panel for wide screens and a set of corner lines for phones;
   only one is displayed at a time. */
.bs-map .bs-facts-sm{display:none}

@media(max-width:1180px){
  .bs-head{grid-template-columns:minmax(96px,.9fr) 2.5fr;column-gap:32px}
}

@media(max-width:980px){
  .bs-head{grid-template-columns:1fr;row-gap:18px}
  .bs-eyebrow{padding-top:0}
  .bs-lede{max-width:none}
  .bs-lede .section-lead{max-width:660px}
  .bs-figure{margin-top:36px}
}

@media(max-width:760px){
  .bs-cta{gap:16px 22px;margin-top:28px}
  .bs-cta .button{width:100%;justify-content:space-between}
  .blind-note{max-width:none}
  .bs-source{flex-basis:100%;max-width:none}
}

@media(max-width:700px){
  /* the drawing is now under 700px wide: the compact panel would be 5px tall,
     so swap it for the corner lines the generator drew for this width */
  .bs-map .bs-facts,.bs-map .bs-scale-note{display:none}
  .bs-map .bs-facts-sm{display:block!important}
}

@media(max-width:620px){
  .bs-figure{margin-top:32px;margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);padding-top:0;border-top:0}
  .bs-map{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:4px 0}
  .bs-legend{border-top:0;margin:16px var(--gutter) 0;padding-top:0}
  .bs-source{font-size:9.5px}
  /* the map is ~2.6x smaller here: lift every hairline and every label so the
     drawing still labels itself */
  .bs-map .bs-ring-line{stroke-width:5;stroke-dasharray:20 13}
  .bs-map .bs-dim{stroke-width:3}
  .bs-map .bs-dim-label{font-size:44px;letter-spacing:1px}
  .bs-map .bs-call-t{font-size:34px;letter-spacing:.4px}
  .bs-map .bs-call-s{font-size:25px}
  .bs-map .bs-call circle{r:7}
  .bs-map .bs-call path{stroke-width:3}
  .bs-map .bs-call-cam,.bs-map .bs-call-tower{display:none}
  .bs-map .bs-place{font-size:23px;letter-spacing:2px;stroke-width:6}
  .bs-map .bs-seen{stroke-width:2.2}
  .bs-map .bs-yarddim{stroke-width:2.2}
  .bs-map .bs-yarddim-label{font-size:30px}
  .bs-map .bs-hatch-line{stroke-width:3.6}
  .bs-map .bs-marks{display:none}
  .bs-map .bs-north{stroke-width:3}
  .bs-map .bs-fence-far,.bs-map .bs-fence-near{opacity:.75}
}