/* =============================================================
   FIX PARTIAL — Collection detail page (collection.html)
   Owned by the "collection-detail" agent. Loaded AFTER app.css so
   rules here override. Keep ONLY collection-viewer layout here.
   (May be folded back into app.css during integration.)

   GOAL: match the old Squarespace gallery — the painting is the
   hero, sitting HIGH on the screen right under the nav, large and
   centred, with lots of clean negative space. No tall title block
   eating the top ~40% of the viewport.
   ============================================================= */

/* ---- Compact collection label ----------------------------------
   Was a big standalone title block (eyebrow + giant H1 + back link)
   that pushed the first painting far down. Now a single low-profile
   line tucked just under the nav. It takes almost no vertical space,
   so the first work rises to the top of the viewport. */
.collection__header {
  /* tight: sit immediately under the fixed nav, minimal footprint */
  padding: calc(var(--nav-h) + clamp(10px, 2vh, 20px)) var(--gut) 0;
  max-width: var(--maxw);
  margin: 0 auto;
}

.collection__title {
  margin: 0;
  /* small, quiet, tracked-out label — NOT a display headline */
  font-size: 12.5px;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-2);
  display: flex;
  align-items: baseline;
  gap: 0.7em;
}
.collection__eyebrow {
  display: inline;            /* override app.css display:block so it sits inline in the flex H1 */
  color: var(--gold);
  letter-spacing: 0.22em;
}

/* ---- One work per screen: painting sits HIGH, not floating mid-screen ----
   The header is now tiny, so the first work begins right under it. We pin
   the work content to the TOP of its block (instead of vertical-centring)
   so the painting's top edge sits near the nav, like Squarespace. */
.collection__work {
  /* Fit each painting + caption with a CONSISTENT comfortable gap, instead of
     reserving a full empty screen per work — that left a big VOID under wide/short
     paintings (e.g. the Constellations panorama only fills a third of a screen).
     The gap between works is now just the top+bottom padding, even for every aspect. */
  min-height: 0;
  align-content: center;
  align-items: center;
  padding: clamp(46px, 8.5vh, 104px) var(--gut);
}
/* first work sits high-ish under the compact label (not jammed at the very top) */
.collection__header + .collection__work {
  padding-top: clamp(18px, 3.5vh, 46px);
}

/* Bigger hero image now that the top chrome is gone — fill the freed space. */
.collection__frame,
.collection__frame img {
  max-width: min(90vw, 1040px);
}
.collection__frame img {
  max-height: 82vh;
}

/* ---- Tiny, unobtrusive index counter (kept; just made quieter) ---- */
.collection__index {
  top: calc(var(--nav-h) + clamp(10px, 2vh, 20px));
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--bone-dim);
  opacity: 0.75;
}
/* avoid the counter colliding with the compact label on the first work */
.collection__header + .collection__work .collection__index {
  top: clamp(6px, 1.2vh, 14px);
}

/* ---- Empty state (mudi / sjalf): center it under the compact label ---- */
.collection__empty {
  min-height: calc(82svh - var(--nav-h));
}

@media (max-width: 760px) {
  .collection__frame,
  .collection__frame img { max-width: 92vw; }
  .collection__frame img { max-height: 70vh; }
  .collection__header + .collection__work {
    min-height: calc(100svh - var(--nav-h) - 36px);
  }
}