/* The masthead flourish — a sketch draw-in that shows fully even without JS.
 *
 * Its own stylesheet because the homepage and every region page carry it. It
 * lived inside home.css, which is why the region pages reserved 150px at the
 * top (see _page-offset.css) for a banner that was not on them.
 *
 * Load it BEFORE _zwof-chrome.css, like every other page stylesheet: the
 * -150px pull below is what puts the flourish over the space the chrome layer
 * reserves for the fixed header.
 */

.hpt{background:var(--bg);border-bottom:1px solid var(--line);padding:14px 24px 16px;text-align:center}
.hpt-svg{display:block;width:100%;max-width:1120px;height:auto;margin:0 auto;overflow:visible}
.hpt-line{fill:var(--fill);fill-opacity:1;stroke:var(--fill);stroke-width:0;stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:var(--len,1400);stroke-dashoffset:0;
  font-family:'ABC Normal',-apple-system,BlinkMacSystemFont,sans-serif;font-synthesis:none}
.hpt-lead{--fill:var(--muted);--sw:.85;font-weight:500;font-size:44px;letter-spacing:.005em}
.hpt-name{--fill:var(--accent);--sw:1;font-weight:650;font-size:56px;letter-spacing:-.012em}
.hpt-underline{stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;fill:none;opacity:.92;
  stroke-dasharray:var(--ulen,700);stroke-dashoffset:0}
.hpt-js .hpt-line{fill-opacity:0;stroke-width:var(--sw);stroke-dashoffset:var(--len,1400)}
.hpt-js .hpt-underline{stroke-dashoffset:var(--ulen,700)}
.hpt.go .hpt-lead{animation:hptSketch 2.3s ease .15s both}
.hpt.go .hpt-name{animation:hptSketch 2.5s ease 1.0s both}
.hpt.go .hpt-underline{animation:hptUL .7s ease 2.65s both}
@keyframes hptSketch{0%{stroke-dashoffset:var(--len);stroke-width:var(--sw);fill-opacity:0}
  60%{stroke-dashoffset:0;stroke-width:var(--sw);fill-opacity:0}
  100%{stroke-dashoffset:0;stroke-width:0;fill-opacity:1}}
@keyframes hptUL{from{stroke-dashoffset:var(--ulen)}to{stroke-dashoffset:0}}
@media(max-width:640px){.hpt{padding:10px 16px 12px}}
@media(prefers-reduced-motion:reduce){
  .hpt-js .hpt-line{fill-opacity:1;stroke-width:0;stroke-dashoffset:0}
  .hpt-js .hpt-underline{stroke-dashoffset:0}
  .hpt.go .hpt-lead,.hpt.go .hpt-name,.hpt.go .hpt-underline{animation:none}}


@media (min-width:1024px){
  .hpt{ margin-top:-150px !important; background:transparent !important; border-bottom:0 !important; padding-top:0 !important; padding-bottom:8px !important; position:relative; z-index:2; pointer-events:none; }
  .hpt-svg{ max-width:900px !important; }
}