/* ═══════════════════════════════════════════════════════════
   index.css — index pages that list their children as cards.
   Extends site.css. An ink document header over a wall of
   photo cards: the photo carries the card, an ink scrim keeps
   the title legible, and the mono index continues the spine
   device the rest of the site is numbered with.
   ═══════════════════════════════════════════════════════════ */

/* ─── Document header ───────────────────────────────────── */
.ix-head{
  background:var(--ink);color:#fff;
  padding-block:clamp(38px,5vw,60px) clamp(48px,6vw,82px);
}
.ix-head h1{margin-top:26px;max-width:16ch}
.ix-head .lede{margin-top:20px;max-width:60ch}
.ix-head .acts{margin-top:30px}

/* ─── Directory ─────────────────────────────────────────────
   /locations/ is 39 links in four county groups. A link tail this
   long is navigation, so it is set as a column list on hairlines
   rather than as cards — dense, scannable, and every label stays
   on one line at the measure. */
.ix-group+.ix-group{margin-top:clamp(38px,4.5vw,58px)}
.ix-group h2{margin-bottom:22px}
.ix-links{
  columns:3;column-gap:clamp(24px,3vw,44px);
  border-top:1px solid var(--line);
}
.ix-links li{break-inside:avoid}
.ix-links a{
  display:block;padding:13px 0;border-bottom:1px solid var(--line);
  text-decoration:none;font-size:.9375rem;color:var(--body);
  transition:color .16s ease,border-color .16s ease;
}
.ix-links a:hover{color:var(--navy);border-bottom-color:var(--brass)}

/* ─── Card wall ─────────────────────────────────────────── */
.ix-body h2{margin-bottom:clamp(26px,3vw,38px)}
.ix-cards{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.4vw,30px);
}
.ix-card a{
  display:block;position:relative;overflow:hidden;border-radius:4px;
  text-decoration:none;color:#fff;background:var(--ink);
  box-shadow:0 14px 34px rgba(11,30,45,.14);
}
.ix-card__pic{display:block}
.ix-card__pic img{
  width:100%;aspect-ratio:3/2;object-fit:cover;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
/* The scrim is what makes the title readable over an arbitrary photo — the four
   live images run from a bright green warehouse to a dim brick shopfront. */
.ix-card a::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(11,30,45,.90) 0%,rgba(11,30,45,.55) 34%,rgba(11,30,45,.06) 68%);
}
.ix-card__body{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:clamp(20px,2.4vw,30px);
  display:flex;align-items:baseline;gap:16px;
}
.ix-card__n{
  font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.16em;
  color:var(--brass);flex:none;
}
.ix-card h3{
  font-size:clamp(1.0625rem,1.6vw,1.375rem);letter-spacing:-.02em;line-height:1.2;
  border-bottom:1px solid transparent;transition:border-color .2s ease;
}
.ix-card a:hover .ix-card__pic img{transform:scale(1.045)}
.ix-card a:hover h3{border-bottom-color:var(--brass)}

/* A card with no photo still needs a body to sit in. */
.ix-card a:not(:has(.ix-card__pic)){min-height:220px}
.ix-card a:not(:has(.ix-card__pic))::after{display:none}

@media (max-width:900px){
  .ix-links{columns:2}
}
@media (max-width:760px){
  .ix-cards{grid-template-columns:1fr}
  .ix-card__pic img{aspect-ratio:16/9}
}
@media (max-width:560px){
  .ix-links{columns:1}
}