/* Hero logo: on the site grid's side margin; the cursor uncovers a slashed zero under the rock, so
   the mark reads as the 0 of 0.studio (site/princypl/logo-zero.js) */
@font-face {
  font-family: "Studio Display";
  src: url("/princypl/fonts/StudioDisplay.woff2") format("woff2");
  font-display: block;
}
/* every copy: the hero, its repeat at the foot of the page (the loop back to the top) and the footer's */
.hero-logo .logo-icon, .contact-logo .logo-icon { left: var(--padding-sm); width: calc(100% - 2 * var(--padding-sm)); }
svg[data-logo=studio] .pw-z-hit { fill: transparent; pointer-events: all; cursor: crosshair; touch-action: pan-y; }
/* desktop: on the second grid line (12.5vw), where the nav's first item and the big titles start */
@media (min-width: 1024px) {
  .hero-logo .logo-icon, .contact-logo .logo-icon { left: 12.5vw; width: calc(100% - 12.5vw - var(--padding-sm)); }
}
/* phones: the hero logo across the width (the template's box kept the old wordmark's flat shape,
   so the new logo was fitted into a 53px strip) */
@media (max-width: 1023px) {
  /* up in the top row beside "Menu" instead of under an empty header strip: the logo starts at the
     top of the screen and runs to just short of the Menu button (the header's line stays hidden
     until the page moves, hero-tagline.js) */
  #hero .hero-body { padding-top: .75rem; }
  #hero .hero-logo.icon-wrap { width: calc(100% - 6.25rem); padding-top: calc((100% - 6.25rem - var(--padding-sm)) * 355 / 1209); }
  #hero .hero-logo .logo-icon { width: calc(100% - var(--padding-sm)); }
  /* no line under the header on phones at all (the user's call) */
  html .header-container::before { display: none !important; }
}