/* ─────────────────────────────────────────────────────────────────────────
   Our Family — the photo wall and the view that opens over it.

   Only the .fam-* classes live here. The page scaffolding — .nav, .wrap,
   .section, .back, .foot and the whole phone menu — comes from folio.css,
   which this page loads first. Nothing in this file may restyle those: the
   nav in particular is identical across 43 pages and a rule here would move
   one of them out of step with no error anywhere.

   The hero above the wall is NOT here - it is the .ip-hero-* block from
   people.css, shared with Content Creators and Interesting People so the
   three pages open identically. Do not reimplement it.

   The palette is the site's own tokens. No colour is invented below; if one
   is ever needed it goes in :root as a variable first, per CLAUDE.md.
   ───────────────────────────────────────────────────────────────────────── */


/* The wall.

   auto-fill rather than auto-fit, deliberately and for the same reason the
   projects grid uses it: auto-fit collapses the empty tracks, so a row with
   two photographs left in it would stretch them to half the page each. These
   are photographs of people and their scale should not lurch about. */
.fam-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(clamp(150px,20vw,230px),1fr));
  gap:clamp(12px,1.6vw,18px);
}

.fam-item{
  position:relative; display:block;
  border:1px solid var(--hairline); border-radius:8px;
  overflow:hidden; background:var(--surface);
  text-decoration:none; color:inherit;
  transition:transform .25s ease, border-color .25s ease;
}
.fam-item img{
  display:block; width:100%; height:100%;
  aspect-ratio:1/1; object-fit:cover;
}
.fam-item:hover{ transform:translateY(-3px); border-color:var(--gold); }
.fam-item:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* The caption sits over the foot of the picture rather than under it, so the
   tiles stay a uniform grid whatever length the caption is. A two-stop
   gradient rather than a flat panel: the words need a dark ground, the face
   above them does not. */
.fam-meta{
  position:absolute; left:0; right:0; bottom:0;
  padding:26px 10px 8px;
  display:block; font-family:var(--text); font-size:12px; line-height:1.35;
  color:var(--paper);
  background:linear-gradient(to top,rgba(10,10,11,.92) 0%,rgba(10,10,11,.72) 55%,rgba(10,10,11,0) 100%);
}
.fam-meta b{ display:block; color:var(--gold); font-weight:600; letter-spacing:.04em; }

.fam-empty{ color:var(--muted); }

/* ---------- the photograph, opened ----------
   Built by js/family.js. With JavaScript off the tile is still a plain link
   to the larger image, so none of this is load-bearing. */
.fam-view{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,4vw,48px);
  background:rgba(10,10,11,.94);
  opacity:0;
  transition:opacity .22s ease;
}
/* Hidden by the ATTRIBUTE, not by visibility, and the specificity is the
   whole point: [hidden] alone is (0,1,0) and loses to .fam-view's display:flex,
   so the panel would never hide. .fam-view[hidden] is (0,2,0) and wins.

   Why not visibility - it cost a real bug. A visibility:hidden element cannot
   take focus, and focus() on one fails silently. The dialog opened with focus
   still behind it on the page and nothing anywhere said so. An element at
   opacity:0 IS focusable, so this version can hand focus over the instant the
   panel exists, with no dependence on when a style recalculation happens. */
.fam-view[hidden]{ display:none; }
.fam-view.is-open{ opacity:1; }

.fam-view figure{ margin:0; max-width:1100px; max-height:100%; display:flex;
  flex-direction:column; gap:16px; align-items:stretch; }
.fam-view img{
  display:block; max-width:100%; max-height:74vh;
  width:auto; height:auto; object-fit:contain;
  border:1px solid var(--hairline); border-radius:6px; background:var(--surface);
}
/* The bar under the picture: year and caption to the left, download to the
   right. Ashley's layout, 24 Sep 2026.

   Every colour here is a token already in the palette - --gold for both the
   block and the outline, --canvas for the ink on the gold. Nothing new was
   invented, per the rule at the top of CLAUDE.md, and the pairing measures
   8.29:1 either way round because it is the same two values the filled and
   outlined pills already use. */
.fam-bar{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
  font-family:var(--text);
}
.fam-tags{ display:flex; align-items:stretch; gap:8px; min-width:0; }

/* The year, solid gold with black writing. Larger and heavier than the
   caption beside it because it is the thing being scanned for - this wall is
   read as a timeline. */
.fam-year{
  display:inline-flex; align-items:center;
  background:var(--gold); color:var(--canvas);
  font-size:20px; font-weight:700; letter-spacing:.01em;
  padding:8px 14px; border-radius:4px; white-space:nowrap;
}
/* The caption, gold writing inside a gold outline. */
.fam-name{
  display:inline-flex; align-items:center;
  border:1px solid var(--gold); color:var(--gold);
  background:transparent;
  font-size:15px; font-weight:500;
  padding:8px 14px; border-radius:4px;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Controls. Real buttons, so they are reachable by keyboard and announced. */
.fam-btn{
  position:absolute; background:transparent; border:1px solid var(--hairline);
  color:var(--paper); border-radius:999px; cursor:pointer;
  width:44px; height:44px; line-height:1; font-size:20px;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s ease, background .2s ease;
}
.fam-btn:hover{ border-color:var(--gold); background:var(--gold-soft); }
.fam-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.fam-close{ top:clamp(12px,2vw,22px); right:clamp(12px,2vw,22px); }

/* The download sits IN the bar, not among the floating controls, so it is
   not position:absolute and does not use .fam-btn. Square-ish rather than
   round, to sit with the two boxes across from it. */
.fam-get{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px;
  border:1px solid var(--hairline); border-radius:4px;
  color:var(--paper); background:transparent;
  text-decoration:none; cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.fam-get:hover{ border-color:var(--gold); color:var(--gold); background:var(--gold-soft); }
.fam-get:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.fam-prev{ left:clamp(8px,2vw,22px);  top:50%; transform:translateY(-50%); }
.fam-next{ right:clamp(8px,2vw,22px); top:50%; transform:translateY(-50%); }

.fam-count{
  position:absolute; bottom:clamp(12px,2vw,22px); left:50%;
  transform:translateX(-50%);
  font-family:var(--text); font-size:12px; letter-spacing:.06em;
  color:var(--faint);
}

@media (max-width:560px){
  .fam-year{ font-size:17px; padding:6px 11px; }
  .fam-name{ font-size:13px; padding:6px 11px; }
  .fam-get{ width:44px; height:44px; }
  .fam-prev, .fam-next{ top:auto; bottom:clamp(12px,3vw,20px); transform:none; }
  .fam-count{ bottom:auto; top:clamp(14px,3vw,22px); left:clamp(14px,3vw,20px);
              transform:none; }
}

@media (prefers-reduced-motion:reduce){
  .fam-item, .fam-view{ transition:none }
}