/* Monday — the mark and the index.

   One header on every page: the same mark, the same size, the same place.
   Four words, right-aligned, standing under one another at the top right.

   The distance between those lines is not chosen: it is the distance inside the
   mark itself, between "between" and "onday" — 88 of the logo file's 1202 px,
   so the index breathes exactly as the mark breathes, at every size.

   The mark stands half as far from the left edge as the index stands from the
   right one: it is almost in the corner, the way a stamp is.

   Moving down is reading, so the header leaves with the first screen.
   Moving up is looking for something, so it comes back — small, and only
   for as long as you are looking. */

:root{
  --head-pad-x:clamp(20px,5vw,80px);
  --mark-pad-x:calc(var(--head-pad-x) * .5);
  --mark-w:clamp(150px,15vw,240px);
  --logo-gap:calc(var(--mark-w) * 88 / 1202);
  /* the one face the two big titles are set in: the mark's own */
  --mark-font:'Questrial','Inter Tight','Helvetica Neue',Helvetica,Arial,sans-serif;
}

.site-head{position:relative;z-index:30;
  display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  padding:clamp(20px,3.4vh,34px) var(--head-pad-x) 0 var(--mark-pad-x);pointer-events:none}
.site-head a{pointer-events:auto}
.site-head .home{display:block;flex:none;width:var(--mark-w)}
.site-head .home img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 1px 9px rgba(20,20,19,.45))}
/* where a film or a photograph lies behind it, the header rests on top of it */
body.has-hero .site-head{position:absolute;left:0;right:0;top:0}

/* the index: one word per line, every line ending on the same right edge */
.ix{display:flex;flex-direction:column;align-items:flex-end;gap:var(--logo-gap);
  font-family:'Courier Prime','Cutive Mono','Courier New',monospace;
  font-size:14px;line-height:1.2;color:#d9d5ce;padding-top:4px;text-align:right}
/* the letters stand a fifth of a letter further apart than the machine set them */
.ix a{display:inline-block;letter-spacing:.12em;opacity:.6;text-decoration:none;
  transform-origin:100% 50%;
  transition:opacity .35s ease, letter-spacing .4s ease, transform .4s ease}
.ix a:hover,.ix a:focus-visible,.ix a[aria-current]{opacity:1}
/* under the hand the word opens: the letters step apart again, and it grows a little */
.ix a:hover,.ix a:focus-visible{letter-spacing:.264em;transform:scale(1.06)}
.site-head .ix{text-shadow:0 1px 10px rgba(20,20,19,.55)}

/* Gone while you read, back when you look for it.
   The class is written twice on purpose: the landing page holds its header
   hidden until the thought is finished, with a rule of its own, and this one
   has to be able to speak over it. */
/* ——— why this needs saying ———
   The header lives inside the first screen — the film, the cover photograph —
   and that block carries a z-index of its own. A position:fixed element cannot
   climb out of its ancestor's stacking context, so the small index was being
   laid under everything written below it and could not be clicked, however high
   its own z-index was set. The block it lives in is lifted instead, which it can
   be safely: by the time the small index is wanted, that block is long off the
   screen and has nothing of its own left to show. */
body.away [data-hero]{z-index:90}
body.away .site-head.site-head{position:fixed;top:0;left:0;right:0;z-index:95;
  --mark-w:clamp(104px,9vw,140px);
  align-items:center;padding-top:14px;padding-bottom:14px;
  opacity:0;transform:translateY(-10px);pointer-events:none;
  transition:opacity .55s ease, transform .55s ease}
/* small and in passing, the index lies down into a single line again */
body.away .site-head.site-head .ix{flex-direction:row;flex-wrap:wrap;align-items:center;
  justify-content:flex-end;gap:8px clamp(14px,1.8vw,24px);font-size:13px;padding-top:0}
body.away .site-head::before{content:"";position:absolute;left:0;right:0;top:0;height:112px;z-index:-1;
  pointer-events:none;background:linear-gradient(180deg,rgba(18,18,17,.52),rgba(18,18,17,.28) 45%,rgba(18,18,17,0))}
body.recall .site-head.site-head{opacity:1;transform:none;pointer-events:auto}
/* nothing is allowed over it, and it takes a click the moment it is there */
body.recall .site-head.site-head a{pointer-events:auto}
body.recall .site-head.site-head .ix{pointer-events:auto}

@media (max-width:820px){
  .site-head{flex-direction:column}
  /* no room for a column on a phone: they lie down, still ending on the right */
  .ix{flex-direction:row;flex-wrap:wrap;justify-content:flex-end;align-self:flex-end;
    gap:calc(var(--logo-gap) * .55) 14px;font-size:12.5px}
  .ix a{letter-spacing:.1em}
  .ix a:hover,.ix a:focus-visible{letter-spacing:.22em}
  body.away .site-head{flex-direction:row;align-items:center;--mark-w:clamp(84px,22vw,112px)}
}
@media (prefers-reduced-motion:reduce){
  body.away .site-head{transform:none;transition:opacity .3s ease}
  .ix a:hover,.ix a:focus-visible{transform:none}
}