/* Library home */
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }

.masthead, .intro, .collection, .colophon {
  width: 100%; max-width: 1280px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right));
}
@media (min-width: 720px) {
  .masthead, .intro, .collection, .colophon { padding-left: 40px; padding-right: 40px; }
}

.masthead {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-top: max(18px, env(safe-area-inset-top)); padding-bottom: 18px;
}

.intro {
  padding-top: clamp(28px, 4.5vw, 64px); padding-bottom: clamp(24px, 3.5vw, 44px);
  display: grid; gap: 18px 56px; align-items: end;
}
@media (min-width: 900px) { .intro { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.intro .kicker { margin: 0; }
.intro h1 {
  margin: 12px 0 0; max-width: 16ch;
  font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1.02; letter-spacing: -0.022em; font-optical-sizing: auto; text-wrap: balance;
}
.intro h1 em { font-style: italic; font-weight: 300; color: var(--accent-ink); }
.lede {
  margin: 0; max-width: 46ch; color: var(--ink-2);
  font-family: var(--serif); font-size: clamp(17px, 1.45vw, 19.5px); line-height: 1.5; font-weight: 400; text-wrap: pretty;
}

.collection { padding-bottom: 72px; }
.collection-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 0; border-top: 1px solid var(--ink); margin-bottom: 22px;
}
.collection-head h2 { margin: 0; color: var(--ink); }

.grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 40px 28px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
}

.card-link { display: block; text-decoration: none; color: inherit; border-radius: var(--radius); }
.card-media {
  position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius);
  background: linear-gradient(var(--sky-top), var(--sky-bottom));
  box-shadow: inset 0 0 0 1px rgba(23, 22, 27, 0.05);
}
.card-poster, .card-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease-out), opacity 0.6s ease;
}
.card-video { opacity: 0; }
.card-video.is-playing { opacity: 1; }
.card-link:hover .card-poster, .card-link:hover .card-video { transform: scale(1.025); }
.card-cta {
  position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px 9px 16px; border-radius: 999px; background: rgba(23, 22, 27, 0.86); color: #fff;
  font-size: 13.5px; font-weight: 500; letter-spacing: 0.01em;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transform: translateY(4px); opacity: 0.0; transition: opacity 0.3s ease, transform 0.4s var(--ease-out);
}
.card-cta svg { width: 15px; height: 15px; }
.card-link:hover .card-cta, .card-link:focus-visible .card-cta { opacity: 1; transform: none; }
@media (hover: none) { .card-cta { opacity: 1; transform: none; } }

.card-text { padding: 16px 2px 0; }
.card-num { margin: 0 0 6px; color: var(--accent); }
.card-title {
  margin: 0; font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.12; letter-spacing: -0.012em;
}
.card-dek { margin: 8px 0 0; color: var(--ink-2); font-family: var(--serif); font-size: 17px; line-height: 1.45; max-width: 52ch; }
.card-meta { margin: 10px 0 0; color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; }

/* a single (featured) cutaway gets the full width, text beside the art */
.card.is-featured { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .card.is-featured .card-link { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(260px, 1fr); gap: 36px; align-items: end; }
  .card.is-featured .card-text { padding: 0 0 6px; }
  .card.is-featured .card-title { font-size: clamp(32px, 3.2vw, 44px); }
  .card.is-featured .card-dek { font-size: 19px; }
}

.colophon {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  padding-top: 18px; padding-bottom: max(22px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule); color: var(--ink-3); font-size: 13px;
}