/* Gallery. Loaded after /devlog/devlog.css, which carries the whole look;
   this file changes the sky and adds the picture grid and the model viewer. */

:root { --sky: url("/gallery/GallerySky01.jpg"); }

/* ---------- index: pictures in a grid, grouped by kind ---------- */

.gallery-group { margin: 0 0 4.5em; }

.gallery-group-title {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 1.12rem;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin: 0 0 1.2em;
  padding-bottom: 0.6em;
  border-bottom: 1px solid var(--rule);
}

.gallery-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 28px 24px;
}

.gallery-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
.gallery-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: 0 0 0.8em;
  background: var(--ground);
  transition: opacity 0.18s ease;
}
.gallery-card:hover img,
.gallery-card:focus-visible img { opacity: 0.86; }
.gallery-card:focus-visible { outline: 1px solid var(--accent); outline-offset: 8px; }

.gallery-card-title {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.3;
  transition: color 0.18s ease;
}
.gallery-card:hover .gallery-card-title,
.gallery-card:focus-visible .gallery-card-title { color: var(--accent-2); }

.gallery-card-summary {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
  margin-top: 0.3em;
}

/* The gallery index is wider than the prose column: pictures want room. */
.page.gallery-index { width: min(calc(100% - 48px), 1100px); }

/* ---------- entry: the model viewer ---------- */

/* Same spacing as an image or a video, so a caption under it lines up. */
.page model-viewer {
  display: block;
  width: 100%;
  height: clamp(320px, 56vw, 560px);
  margin: 2.6em 0 0.6em;
  background: transparent;
  --poster-color: transparent;
}
.page model-viewer + p > em:only-child {
  display: block;
  color: var(--faint);
  font-size: 0.88rem;
  font-style: normal;
  line-height: 1.5;
  margin: 0 0 2.6em;
}