/* Shared chrome that every page needs and no page should re-declare:
   the skip link, and the hover affordance on linkable headings.
   Linked from the generated meta block, so build-meta.py owns its presence.

   For full article/About chrome (masthead, reading measure, buttons, postnav),
   also load assets/sq-system.css — that sheet extends the APPROVED homepage DNA
   without changing the homepage itself. */

/* Skip link — visually gone until focused, then a real target. */
.sq-skip{
  position:absolute;left:-9999px;top:0;z-index:9999;
  padding:12px 18px;background:#2f9d94;color:#070914;
  font:600 14px/1 "IBM Plex Mono",ui-monospace,monospace;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  border:2px solid #070914;box-shadow:0 3px 0 #04060f;
}
.sq-skip:focus{left:12px;top:12px}

/* Anything the skip link lands on shouldn't grow a focus ring. */
[tabindex="-1"]:focus{outline:none}

/* Linkable section headings. The ¶ only appears on hover or keyboard focus,
   so it never competes with the type, but the id is always there. */
.sq-anchor{
  margin-left:.4em;font-size:.62em;font-weight:400;line-height:1;
  text-decoration:none;opacity:0;vertical-align:middle;
  color:currentColor;transition:opacity .15s ease;
}
h1:hover>.sq-anchor,h2:hover>.sq-anchor,h3:hover>.sq-anchor,
.sq-anchor:focus{opacity:.55}
.sq-anchor:hover{opacity:1}
@media (prefers-reduced-motion:reduce){.sq-anchor{transition:none}}
@media (hover:none){.sq-anchor{display:none}}

/* Contact form labels were <p> before they were labels. */
label.lab{display:block}

/* Visually hidden, still read aloud. For headings a page needs
   structurally but whose design already communicates by other means. */
.sq-vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Read time / updated stamp in a byline. */
.readtime{white-space:nowrap}