/* A secondary entrance, using the same glass surfaces as the site's CTAs. */
.gallery-entry {
  --gallery-ink: #edf0ff;
  --gallery-muted: #bec9de;
  --gallery-accent: #cbb4ff;
  --gallery-surface: oklch(24% 0.035 275 / 88%);
  --gallery-border: oklch(75% 0.055 275 / 28%);
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: 0.85rem;
  align-items: center;
  width: min(100%, 28rem);
  box-sizing: border-box;
  padding: 0.85rem;
  border: 1px solid var(--gallery-border);
  border-radius: var(--cta-radius-s, 1.15rem);
  color: var(--gallery-ink);
  background: var(--gallery-surface);
  box-shadow: 0 1px 0 #ffffff12 inset, 0 5px 18px #07112414;
  text-decoration: none;
  text-align: left;
  transition: border-color 160ms ease, transform 160ms ease;
}
html[data-theme="light"] .gallery-entry {
  --gallery-ink: #202b43;
  --gallery-muted: #4c5a72;
  --gallery-accent: #6441a0;
  --gallery-surface: oklch(98% 0.008 280 / 72%);
  --gallery-border: oklch(65% 0.04 275 / 28%);
  box-shadow: 0 1px 0 #fff inset, 0 5px 18px #263e660e;
}
.gallery-entry:hover { color: var(--gallery-ink); border-color: var(--gallery-accent); transform: translateY(-2px); }
.gallery-entry:focus-visible { outline: 3px solid var(--gallery-accent); outline-offset: 4px; }
.gallery-entry img { width: 4rem; height: 4.5rem; object-fit: cover; border-radius: 0.6rem; }
.gallery-entry__label { display: block; color: var(--gallery-accent); font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; }
.gallery-entry__title { display: block; margin: 0.2rem 0; font-size: clamp(1rem, 1.5vw, 1.15rem); font-weight: 650; line-height: 1.3; }
.gallery-entry__detail { display: block; font-size: 0.78rem; line-height: 1.45; color: var(--gallery-muted); }
.gallery-entry--portfolio { margin: 1.5rem auto; }
.gallery-entry--hire { grid-template-columns: 3.5rem minmax(0, 1fr); padding: 0.75rem; }
.gallery-entry--hire img { width: 3.5rem; height: 3.75rem; }
@media (prefers-reduced-motion: reduce) { .gallery-entry { transition: none; } .gallery-entry:hover { transform: none; } }
@media (forced-colors: active) { .gallery-entry { border: 2px solid LinkText; } }