/* Home hero · real side and end photos inside their drawing views (hero.js wipes them in) */
.hero-real image { filter: drop-shadow(0 1.2px 1.6px rgba(0, 0, 0, .55)); }
.hero-real .hr-edge { fill: none; stroke: var(--orange); stroke-width: .45; stroke-linecap: round; opacity: 0; }
.hero-dwg .d-side, .hero-dwg .d-end { transition: opacity 1.4s ease .5s; }
html:not(.motion) .hero-dwg .d-side, html:not(.motion) .hero-dwg .d-end,
.hero-dwg.hr-real .d-side, .hero-dwg.hr-real .d-end { opacity: .22; }
.motion .hero-real:not(.is-on) { opacity: 0; }
@media (max-width: 820px), (pointer: coarse) {
  .hero-real image { filter: none; }
}
/* Home hero · drafting camera + pens (hero.js). While .hd-cam is on, the viewBox is the camera and strokes keep about
   their resting on-screen weight (--hd-sw is each path's own width, --hd-m the zoom). The drawing runs past its figure
   across the whole hero sheet, like the grid (.hd-live on the chapter): the chapter clips it at its edges and the copy
   stays on top of it. */
.hero-dwg.hd-cam { overflow: visible; }
/* until hero.js has the camera in on the first line, the static (finished) figure stays hidden, so it never flashes */
.motion .hero-dwg:not(.hd-armed) { visibility: hidden; }
.chapter.hd-live { overflow: clip; }
.chapter.hd-live .hero__copy { position: relative; z-index: 1; }
.hero-dwg.hd-cam .d path:not(.arrow), .hero-dwg.hd-cam .d-center path { stroke-width: calc(var(--hd-sw, .34px) * var(--hd-m, 1)); }
.hero-dwg mask .hd-mask { fill: none; stroke: #fff; stroke-width: 1.2px; stroke-linecap: butt; }
.hd-pen { pointer-events: none; transition: opacity .4s; }
.hd-pen .p-cross { fill: none; stroke: var(--fg); stroke-width: 1; opacity: .45; }
.hd-pen .p-ring { fill: none; stroke: var(--orange); stroke-width: 1.25; }
.hd-pen .p-dot { fill: var(--orange); stroke: none; }
.hd-pen.is-up .p-dot { fill: none; stroke: var(--orange); stroke-width: 1; }
.hd-pen.is-up .p-ring { stroke-dasharray: 2.4 2.2; opacity: .7; }
.hd-pen.is-mini .p-cross { display: none; }
.hd-pen.is-off { opacity: 0; }