/* ============================================================================
   Shared header (30 Sep 2026, Paul: "header changes apply globally")

   ONE file for the header on all four live pages: landing, about,
   selected-projects and case-study. Each page links it last in <head>, so it
   wins. Change a value here and every page follows. The pages do not restate
   any of these values, so there is nothing to keep in step.

   The header is:
     the top ruler  ->  --pad-t  ->  the face (or the breadcrumb that starts
     with it)  ->  --face-gap  ->  the page's first line
   Measured at any width: ruler top 0, face top = --pad-t, first line top =
   --pad-t + face height + --face-gap.
   ========================================================================== */

:root{
  --pad-t:54.4px;              /* window top to the face's top edge (the ruler overlays it) */
  --ruler-h:2.1rem;            /* the top ruler's height */
  --ruler-ink:rgba(0,0,0,.2);  /* ruler ticks, numbers and bottom edge */
  --face-w:23px;
  --face-h:25px;
  --face-gap:16px;             /* the face (or breadcrumb) to the first line */
  --face-gap-cs:24px;          /* the same on case studies only (Paul, 2 Oct 2026) */
  --head-size:15px;            /* the first line: name line, page title or study title */
  --head-weight:500;
  --head-leading:21px;
  --head-w:420px;              /* its measure (not the study title, which hugs its badge) */
}
@media (max-width:760px){
  :root{--pad-t:64px;--ruler-h:1.9rem}
}

/* ---- The ruler ----------------------------------------------------------- */
/* gone from all four pages (2 Oct 2026, Paul): hidden here, so nothing below moves; the face keeps its --pad-t.
   Delete this line to bring the ruler back. */
.vp-ruler{display:none!important}
.vp-ruler{height:var(--ruler-h);box-shadow:inset 0 -1px 0 var(--ruler-ink)}
.ch-tick{background:var(--ruler-ink)}
.ch-num{color:var(--ruler-ink)}

/* ---- The face ------------------------------------------------------------ */
main .avatar:not(.avatar--folder){position:relative;width:var(--face-w);height:var(--face-h);overflow:hidden}
main .avatar:not(.avatar--folder) img{position:absolute;left:-41.74%;top:-36%;width:183.89%;height:169.18%;max-width:none;display:block}

/* ---- Face to first line: --face-gap on every page ------------------------ */
.hi-intro > .avatar{margin-bottom:calc(var(--face-gap) - 8px)}   /* home: its column already adds an 8 gap */
.name-block > .avatar,.name-block > .bc{margin-bottom:var(--face-gap)}   /* about (face); projects (its folder, in the face's place) */
#cs-study{margin-top:var(--face-gap-cs)}   /* case study: under the breadcrumb */

/* ---- The first line ------------------------------------------------------ */
.hi-intro > p.hi-lead,.name-block > .intro,.name-block > h1.name-lines,.cs-head > .cs-title{
  font-size:var(--head-size);font-weight:var(--head-weight);line-height:var(--head-leading)}
.hi-intro > p.hi-lead,.name-block > .intro,.name-block > h1.name-lines{
  width:var(--head-w);max-width:calc(100vw - var(--col-x) - 24px)}