/* ===========================================================================
   THE PLUS AND THE MENU BEHIND IT — for the pages that are not the home page.

   The home page carries this in its own single file. Contact and About had no
   navigation of their own at all: once a reader was on either of them, the
   only way back into the work was the footer. Same mark, same overlay, same
   place on the screen, so it does not read as a different site.

   mix-blend-mode:difference is what lets one mark sit over anything. The About
   page changes its ground from white to black as you scroll and the plus stays
   legible the whole way down without being told anything about it.
   ========================================================================= */

.hbm-plus{
  position:fixed;bottom:10px;left:26px;z-index:94;
  background:none;border:0;padding:0;cursor:pointer;
  color:#fff;mix-blend-mode:difference;
  font-family:var(--sans,"Archivo","Helvetica Neue",Arial,sans-serif);
  /* The home page sets this at 190px, where it sits over a wall of
     photographs. On these two pages the bottom-left corner is type, and at
     that size the mark landed across two lines of the headline. A first
     correction cut it to 126px, which read as a different, smaller site.
     This is the middle: still the same mark, no longer eating a headline. */
  font-size:clamp(110px,13vw,168px);font-weight:300;line-height:.82;
}
.hbm-plus span{display:block;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.hbm-plus[data-open="1"] span{transform:rotate(45deg)}

.hbm-ov{
  position:fixed;inset:0;z-index:92;
  background:rgba(0,0,0,.88);color:#fff;
  display:grid;place-items:center;
  opacity:0;visibility:hidden;
  transition:opacity .5s ease,visibility 0s linear .5s;
}
.hbm-ov[data-on="1"]{opacity:1;visibility:visible;transition:opacity .5s ease}
.hbm-ov nav{display:grid;gap:.12em;text-align:center}
.hbm-ov nav a{
  color:#fff;text-decoration:none;
  font-family:var(--sans,"Archivo","Helvetica Neue",Arial,sans-serif);
  font-weight:500;font-size:clamp(3.2rem,10.5vw,132px);
  line-height:1.04;letter-spacing:.02em;text-transform:uppercase;
  transition:opacity .3s ease;
}
.hbm-ov nav a:hover{opacity:.5}
.hbm-ov nav a[aria-current="page"]{opacity:.45}
.hbm-chapters{
  display:flex;gap:clamp(1.2rem,3.4vw,3rem);justify-content:center;margin:.35em 0;
}
/* Qualified past `.hbm-ov nav a`, which is (0,2,1) and sets the display size.
   A bare `.hbm-chapters a` is (0,2,1) too but comes first, so the three chapter
   words were rendering at the full 132px and running off the screen. The home
   page keeps them small the same way. */
.hbm-ov nav .hbm-chapters a{
  font-size:clamp(1rem,2.4vw,1.9rem);font-weight:400;letter-spacing:.06em;
}

@media (max-width:560px){
  .hbm-plus{left:18px}
}
@media (prefers-reduced-motion:reduce){
  .hbm-plus span,.hbm-ov{transition:none}
}