/* ------------------------------------------------------------------
   Site chrome: the three type roles, the dark ground, header and footer.
   ------------------------------------------------------------------ */
:root{
  /* AJ's faces (09-10). NOTHING is the display face; until its web font is supplied,
     Anton (the closest free match to the sample) stands in - add an @font-face for
     NOTHING and put it first here. Proxima Nova is an Adobe font: add an Adobe Fonts web
     project and 'proxima-nova' takes the body over; until then Sofia Sans carries it.
     Local installs are deliberately NOT named, so what AJ sees is what visitors get. */
  --ff-display:'Anton',Impact,'Arial Narrow',sans-serif;
  --ff-ui:'Sofia Sans','Helvetica Neue',Arial,sans-serif;
  --ff-body:'proxima-nova','Sofia Sans','Helvetica Neue',Arial,sans-serif;
  --ff-logo:var(--ff-display);           /* the logo is set in the display face too */
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:hsl(240 9% 4%);
  color:hsl(40 11% 95%);
  font-family:var(--ff-body);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

/* the header: a glass bar held at the top - the page runs under it, blurred (AJ 09-10) */
.site-header{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:8px clamp(18px,4vw,48px);
  background:hsl(240 9% 4% / .5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5); backdrop-filter:blur(18px) saturate(1.5);
  border-bottom:1px solid hsl(0 0% 100% / .07);
  transition:transform .3s ease;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header{background:hsl(240 9% 4% / .9)}
}
.site-header.is-tucked{transform:translateY(-100%)}   /* phones, while scrolling down (site.js) */
.site-logo{
  display:inline-flex; align-items:center; min-height:44px;   /* a full-size tap target */
  font-family:var(--ff-logo); font-weight:400;   /* one weight only - a faked bold smears */
  text-transform:uppercase; letter-spacing:.012em;
  font-size:clamp(23px,2.8vw,40px);
  line-height:1; text-decoration:none; white-space:nowrap;
}
.site-nav{display:flex; align-items:center; gap:clamp(14px,2.2vw,34px); flex-wrap:wrap}
.site-nav a{
  display:inline-flex; align-items:center; min-height:44px;   /* a full-size tap target */
  font-family:var(--ff-ui); font-weight:600; text-transform:uppercase;
  font-size:clamp(11.5px,1vw,13px);
  letter-spacing:.12em; text-decoration:none;
  color:hsl(40 11% 95% / .82); transition:color .2s ease; white-space:nowrap;
}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:hsl(40 11% 95%)}
.site-nav a:focus-visible,.site-logo:focus-visible{
  outline:2px solid hsl(38 96% 55%); outline-offset:4px; border-radius:3px;
}

@media (max-width:640px){
  .site-header{flex-direction:column; align-items:flex-start; gap:0; padding:4px clamp(18px,4vw,48px) 0}
  .site-logo, .site-nav a{min-height:40px}
  .site-nav{gap:0 20px}
}
@media (prefers-reduced-motion:reduce){ .site-header{transition:none} }

/* pages arrive whole: hidden until their fonts and the pictures in view have loaded,
   then faded in (site.js, capped at 1.5s). The animation is a failsafe - if site.js
   never runs, the page still appears after 3s. Between pages, a soft cross-fade. */
html.is-loading body{opacity:0; animation:arrive 0s 3s forwards}
@keyframes arrive{to{opacity:1}}
body{transition:opacity .45s ease}
@view-transition{navigation:auto}
::view-transition-old(root), ::view-transition-new(root){animation-duration:.4s}
@media (prefers-reduced-motion:reduce){ body{transition:none} @view-transition{navigation:none} }