/* Website designs gallery, in the shared style from tv.css. */
.websites-page .all-designs { padding:0; }

/* Hero */
.websites-page .all-designs > header.tv-hero { max-width:none; margin:0; padding-bottom:var(--tv-hero-end); }
.websites-page .all-designs > header .tv-h1 { margin-top:0; font-weight:500; }
.websites-page .all-designs > header .tv-lead { color:var(--tv-soft); line-height:1.6; margin-bottom:28px; }
.websites-page .all-designs > header .tv-link { color:var(--tv-ink); }
.websites-page .all-designs > header .tv-link:hover { color:var(--tv-blue); }

/* Gallery: flat frames with hairline borders, like the home work row */
.websites-page .expanded-design-grid.tv-section { gap:clamp(48px,5vw,72px) 28px; padding-top:clamp(56px,6vw,88px); padding-bottom:clamp(88px,9vw,128px); }
.websites-page .expanded-design figure { border:1px solid var(--tv-line); background:var(--tv-card); border-radius:0; }
.websites-page .expanded-design .design-interior img { border:1px solid var(--tv-line); border-radius:0; outline:6px solid var(--tv-paper); background:var(--tv-card); }
.websites-page .expanded-design a:hover img { transform:scale(1.02); }
.websites-page .expanded-design a:focus-visible { outline:2px solid var(--tv-blue); outline-offset:4px; }

@media (max-width:700px) {
  .websites-page .all-designs { padding:0; }
  .websites-page .expanded-design-grid.tv-section { grid-template-columns:1fr; gap:48px; padding-left:16px; padding-right:24px; }
}
@media (max-width:640px) {
  .websites-page .all-designs > header.tv-hero { padding:24px 16px var(--tv-hero-end); }
}

/* Each design: the homepage preview, then its name and a labelled link to one interior page (no overhang, a visible cue). */
.websites-page .expanded-design-grid.tv-section { padding-top:0; }
.websites-page .design-caption { display:flex; align-items:center; justify-content:space-between; gap:16px 24px; margin-top:18px; }
.websites-page .design-name { margin:0; font-size:1.3125rem; font-weight:600; letter-spacing:-.02em; line-height:1.25; color:var(--tv-ink); }
.websites-page .expanded-design .design-interior,
.websites-page .expanded-design .design-interior:focus-visible {
  position:static; display:flex; align-items:center; gap:14px; width:auto; min-height:44px; margin:0; padding:0; border:0;
  color:var(--tv-ink); text-decoration:none;
}
.websites-page .expanded-design .design-interior img { width:72px; height:auto; aspect-ratio:1.44; outline:0; transform:none; }
.websites-page .expanded-design .design-interior span {
  font-size:.9375rem; font-weight:650; line-height:1.3;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.22em;
}
.websites-page .expanded-design .design-interior:hover span { color:var(--tv-blue); text-decoration-thickness:2px; }
.websites-page .expanded-design .design-interior:hover img { transform:none; }
@media (max-width:700px) {
  .websites-page .expanded-design-grid.tv-section { padding-right:16px; }
  .websites-page .design-caption { display:grid; justify-items:start; gap:8px; }
}