/* The masthead: one frame on every sheet, the brand book included. The home page may colour it (paper
   labels over the opening), never move or resize it; Tools/pw/navcheck.mjs holds it to the pixel. */
.masthead{position:relative;z-index:29;display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  padding-top:calc(var(--margin) * .45 + clamp(14px,1.6vw,24px));padding-bottom:var(--s4)}
.home .masthead{position:absolute;left:0;right:0;top:0;margin-inline:auto}
/* 44px tap targets without growing the bar: padding out, the same taken back as negative margin */
.mark{display:flex;align-items:baseline;gap:12px;text-decoration:none;padding-block:13px;margin-block:-13px}
.mark-name{font:400 clamp(1.125rem,1rem + .5vw,1.4rem)/1 var(--serif);letter-spacing:-.01em}
.mark:hover{color:var(--ink)}
.mark:hover .mark-name{color:var(--accent)}
.topnav{display:flex;gap:clamp(16px,2.4vw,36px)}
.topnav a{text-decoration:none;color:var(--ink);padding-block:15px;margin-block:-5px}
.topnav a:hover,.topnav a[aria-current="page"]{color:var(--accent)}
.mark-name,.topnav a{white-space:nowrap}
@media (max-width:599px){.mark-sub{display:none}.topnav{gap:14px}.topnav .nav-sm-hide{display:none}}
@media (max-width:1159px){.topnav .nav-md-hide{display:none}}   /* the sketchbook link gives way first; the sheets menu still has it */
/* the narrowest phones: "All drawings" becomes "Drawings", then Work goes (the name already leads home to the work) */
@media (max-width:374px){.topnav .nav-xs-hide{display:none}}
@media (max-width:359px){.topnav .nav-xxs-hide{display:none}}

/* over the opening macro the masthead sits on little paper labels, laid behind it so nothing moves */
.home .mark,.home .topnav a{position:relative;isolation:isolate}
.home .mark::before,.home .topnav a::before{content:"";position:absolute;z-index:-1;inset:8px -10px 9px;background:var(--paper)}
.home .mark::before{inset:6px -10px 7px}
@media (max-width:599px){.home .mark::before,.home .topnav a::before{inset-inline:-6px}}