/* 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.
 *
 * Lifted out of home.css so the open section's landing page can use it
 * without also taking that file's `.card`, which is a horizontal scroller and
 * would dismantle a grid listing.
 *
 * 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}}
/* Small screens fade instead of sketching.
 *
 * The sketch draws each line as a stroke, and stroke-width is in SVG user
 * units: the viewBox is 1120 wide and a phone renders it around 343, so a
 * --sw of 1 lands at a third of a pixel. The stroke phase is the first 60%
 * of each line, and on a phone that stretch is effectively blank -- the lead
 * line from .15s to 1.5s, the name until 2.5s -- so the flourish reads as a
 * header that is slow to fill in rather than as a line being drawn.
 *
 * Below 900px the two lines fade up instead, same order, same beats. Nothing
 * here is measured in user units, so nothing scales away. The underline keeps
 * its own draw: at 2.6 units it is still 0.8px on a phone and renders. */
@media(max-width:899px){
  .hpt.go .hpt-lead{animation:hptFade .55s ease .1s both}
  .hpt.go .hpt-name{animation:hptFade .55s ease .5s both}
  .hpt.go .hpt-underline{animation:hptUL .6s ease 1.0s both}}
@keyframes hptFade{from{fill-opacity:0;stroke-width:0}to{fill-opacity:1;stroke-width: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}}


/* The pull is the page's, not the banner's.
 *
 * Above 1024px the reading site lifts the banner into the space the fixed
 * masthead reserves. This rule used to be the only difference between this
 * file and a second copy of it, which is why there were two stylesheets
 * defining one banner.
 *
 * Excluded from .libre-hpt because that page sets its own pull, in its own
 * inline block, without !important. Unscoped, this rule would win over it —
 * the same value today, so nothing would look wrong, and the page would
 * quietly stop being able to change its own number. */
@media (min-width:1024px){
  /* z-index above the masthead, not below it.
   *
   * The pull puts the banner inside the band the fixed header occupies:
   * the lead line sits ENTIRELY within the header box and the name line
   * 23px into it. At z-index 2 against the header's 10, that only renders
   * because the header is transparent — give the header any background at
   * all and the whole flourish disappears, or worse, half of it does and
   * the name is sliced along its cap line.
   *
   * Safe to raise because .hpt is pointer-events:none, so the logo, the
   * search and the menu stay clickable through it. */
  .hpt:not(.libre-hpt){ margin-top:-150px !important; background:transparent !important; border-bottom:0 !important; padding-top:0 !important; padding-bottom:8px !important; position:relative; z-index:11; pointer-events:none; }
  .hpt:not(.libre-hpt) .hpt-svg{ max-width:900px !important; }
}