/* ──────────────────────────────────────────────────────────────────────
   album.css — ourfamilyalbum.org, and nowhere else.

   The Our Family wall lived inside dukeofai.org until 10 October 2026 and
   wore that site's eight-link nav and four-column footer. On its own
   domain it wears neither. This file is the whole of the replacement: a
   masthead and a footer. That is all it is for.

   WHY IT MUST STAY THAT SMALL. The album loads four other stylesheets —
   folio.css, projects.css, people.css, family.css — and every one of them
   is the SAME FILE dukeofai.org serves. There is one copy in the repo and
   deploy.py publishes it to both sites, deliberately, so that an edit to
   family.css cannot reach one site and miss the other. A rule in here that
   restyled anything outside .album-* would break that: the album would
   render differently from its own stylesheet and nothing anywhere would
   report it. Every selector in this file begins .album-.

   It invents no colours. Tokens only, from folio.css.
   ────────────────────────────────────────────────────────────────────── */

/* The masthead. Sticky, as the nav it replaces was, and for the reason the
   nav was: 553 photographs is a long scroll and the top of the page is a
   long way back. It is deliberately quiet — the hero's "Our Family" sits
   directly beneath it and the masthead must not compete with it. */
.album-head{
  position:sticky; top:0; z-index:20;
  background:rgba(10,10,11,.72);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--hairline);
}

.album-head .wrap{
  height:52px;
  display:flex; align-items:center;
}

.album-mark{
  font-family:var(--display);
  font-size:13px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--secondary);
}

/* The footer. One line. The curator credit is already in the hero, in
   Ashley's wording and his placing, and does not want saying twice. */
.album-foot{
  border-top:1px solid var(--hairline);
  margin-top:clamp(56px,7vw,96px);
  padding:26px 0 30px;
}

.album-foot .wrap{
  display:flex; justify-content:center;
}

.album-foot p{
  margin:0;
  font-size:12px; letter-spacing:.02em;
  color:var(--muted);   /* --muted is 5.7:1 on the canvas. --faint is 3.19:1
                           and fails, which is why it is not used here. */
}