/* ============================================================
   SANTA OLIVER — the gallery section (index.html #gallery)
   A North Pole picture hall. The painted scene (assets/img/gallery/scene-*)
   is pinned to the viewport, so the room stays put while the pictures scroll
   past on its wall — the same "scene shell with the work inset" idiom as the
   song-studio DJ frame. Three scenes, one per breakpoint, chosen in <picture>
   by orientation so the plain wall always sits behind the content.
   Markup is generated: python deploy/build-gallery.py (never hand-edit the section).

   Two rooms, kept visibly distinct (ledger decision 2026-09-05):
     .room--job  — real photographs, walnut frames, cream mats
     .room--np   — generated North Pole scenes, red-and-gold frames
   ============================================================ */

/* ---------------- the scene ----------------
   Sticky, not fixed: the scene is the first child of the block and pins to
   the top of the viewport for as long as its own section is on screen, with
   the content pulled up over it by a negative margin. So the room holds while
   its pictures scroll past, then scrolls away with the rest of the page —
   which is what lets the block sit mid-page on index.html. Ancestors
   must not set overflow:hidden (that would make them the scroll container
   and kill the sticky); overflow-x: clip is safe. */
.gal-scene {
  position: sticky; top: 0; z-index: 0;
  height: 100vh; height: 100dvh;
  pointer-events: none;
}
.gal-embed { position: relative; overflow-x: clip; background: var(--forest-950); color: var(--cream); }
.gal-embed .gal-hero { padding-top: 96px; }
.gal-embed .gal-room:last-of-type { padding-bottom: 72px; }
.gal-scene img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
/* A gentle press of shadow under the fixed nav so cream type never lands on
   a bright bulb, and a lift at the foot so the last row does not read as
   standing in snow. */
.gal-scene::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(9,17,12,.55), rgba(9,17,12,0) 140px),
    linear-gradient(to top, rgba(9,17,12,.28), rgba(9,17,12,0) 160px);
}

.gal-page { position: relative; z-index: 1; margin-top: -100vh; margin-top: -100dvh; }

/* ---------------- hanging title sign ---------------- */
.gal-hero { padding: 132px 0 44px; text-align: center; }
.gal-sign {
  position: relative; display: inline-block;
  margin: 0 auto; padding: 30px 44px 34px;
  max-width: 760px;
  color: var(--cream);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.18)),
    linear-gradient(135deg, #4a2c1a, #2c1a0f 55%, #3a2314);
  border: 2px solid var(--gold-deep);
  outline: 1px solid rgba(200,162,74,.35); outline-offset: 5px;
  border-radius: var(--r-lg);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(246,239,223,.12);
}
/* two chains up into the beam */
.gal-sign::before, .gal-sign::after {
  content: ""; position: absolute; top: -64px; width: 2px; height: 64px;
  background: repeating-linear-gradient(to bottom, var(--gold-200) 0 6px, transparent 6px 10px);
  opacity: .85;
}
.gal-sign::before { left: 18%; }
.gal-sign::after  { right: 18%; }
.gal-sign .so-eyebrow { display: block; margin-bottom: 12px; color: var(--gold-200); }
.gal-sign h1 {
  font-family: var(--display); font-weight: 500; line-height: .98; letter-spacing: -.02em;
  font-size: clamp(38px, 6vw, 68px);
}
.gal-sign h1 em { font-style: italic; color: var(--gold-300); }
.gal-sign p { max-width: 560px; margin: 16px auto 0; color: var(--ink-soft); font-size: clamp(15px, 1.4vw, 18px); line-height: 1.6; }
.gal-doors { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.gal-doors a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px;
  border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 14px;
  color: var(--cream); background: rgba(246,239,223,.08); border: 1px solid var(--hairline);
  transition: background .2s ease, transform .15s ease;
}
@media (hover:hover) and (pointer:fine) {
  .gal-doors a:hover { background: rgba(200,162,74,.22); transform: translateY(-1px); }
}
.gal-doors a:focus-visible { outline: 2px solid var(--gold-200); outline-offset: 3px; }

/* ---------------- rooms ---------------- */
.gal-room { padding: 34px 0 30px; scroll-margin-top: 96px; }
.room-head { text-align: center; max-width: 720px; margin: 0 auto 30px; }
.room-plaque {
  display: inline-block; padding: 12px 26px 14px;
  border: 1px solid var(--gold-deep); border-radius: 10px;
  background: linear-gradient(180deg, #d9b45f, #b8923f 60%, #cfa652);
  color: #2a1a0b; box-shadow: 0 10px 26px -14px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.45);
}
.room-plaque .so-eyebrow { display: block; color: #4a2f10; margin-bottom: 4px; font-size: 11px; }
.room-plaque h2 {
  font-family: var(--display); font-weight: 600; font-size: clamp(28px, 4vw, 42px); line-height: 1.02;
}
.room-head p { margin: 16px auto 0; color: var(--ink-soft); line-height: 1.65; font-size: 15.5px; }
.room-head p strong { color: var(--gold-300); font-weight: 600; }

/* ---------------- chapters ---------------- */
.chapter { margin: 0 0 30px; }
.chapter-head {
  display: flex; align-items: center; gap: 16px; margin: 0 0 18px;
  color: var(--gold-200);
}
.chapter-head::before, .chapter-head::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 40%, var(--gold) 60%, transparent);
  opacity: .7;
}
.chapter-head h3 {
  font-family: var(--display); font-style: italic; font-weight: 500;
  font-size: clamp(22px, 2.6vw, 30px); letter-spacing: .01em; white-space: nowrap;
}

/* ---------------- the wall (masonry columns) ---------------- */
.wall { columns: 1; column-gap: 22px; }
@media (min-width: 600px)  { .wall { columns: 2; } }
@media (min-width: 980px)  { .wall { columns: 3; } }
@media (min-width: 1440px) { .wall { columns: 4; } }

.frame {
  display: inline-block; width: 100%; margin: 0 0 24px;
  break-inside: avoid; -webkit-column-break-inside: avoid;
  position: relative;
}
/* the nail */
.frame::before {
  content: ""; position: absolute; left: 50%; top: -7px; width: 9px; height: 9px;
  margin-left: -4.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff2c2, var(--gold-deep) 70%);
  box-shadow: 0 1px 2px rgba(0,0,0,.7);
}
.frame .gal-link {
  display: block; padding: 9px; border-radius: 6px;
  text-decoration: none; color: inherit;
  background: linear-gradient(145deg, #6a4227, #3d2414 60%, #55341d);
  box-shadow: 0 26px 50px -22px rgba(0,0,0,.95), 0 2px 0 rgba(255,255,255,.06) inset;
  transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease;
}
.frame .mat {
  display: block; padding: 10px 10px 12px; background: var(--cream);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), inset 0 3px 8px rgba(0,0,0,.14);
}
.frame img {
  display: block; width: 100%; height: auto;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
  background: #cbbfa8;
}
.frame figcaption {
  margin: 10px 4px 0; text-align: center;
  font-family: var(--display); font-style: italic; font-size: 16px; line-height: 1.35;
  color: var(--ink);
}
/* hung by hand, not by machine */
.frame:nth-child(4n+1) .gal-link { transform: rotate(-1.1deg); }
.frame:nth-child(4n+2) .gal-link { transform: rotate(.7deg); }
.frame:nth-child(4n+3) .gal-link { transform: rotate(-.45deg); }
.frame:nth-child(4n)   .gal-link { transform: rotate(1deg); }
@media (hover:hover) and (pointer:fine) {
  .frame .gal-link:hover {
    transform: rotate(0) translateY(-6px) scale(1.015);
    box-shadow: 0 40px 70px -24px rgba(0,0,0,1), 0 0 0 1px rgba(200,162,74,.35);
  }
}
.frame .gal-link:focus-visible { outline: 3px solid var(--gold-200); outline-offset: 4px; }

/* North Pole room: red lacquer and gold, so a story scene never wears a
   photograph's walnut. */
.room--np .frame .gal-link {
  background: linear-gradient(145deg, #b3272a, #7e1618 60%, #a52326);
  box-shadow: 0 26px 50px -22px rgba(0,0,0,.95), 0 0 0 2px var(--gold-deep) inset;
}
.room--np .frame .mat { background: #f7efdc; }
.room--np .frame::before { background: radial-gradient(circle at 35% 35%, #fff2c2, #8a6a25 70%); }

/* ---------------- the doors (one cover per chapter) ----------------
   The North Pole room is not a wall of forty frames; it is six doors. Each
   cover opens its chapter in the lightbox, where the set runs 1..N. The
   other pictures of the set are real links in .chapter-set, kept hidden. */
.doors {
  display: grid; grid-template-columns: 1fr; gap: 26px;
}
@media (min-width: 640px)  { .doors { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .doors { grid-template-columns: repeat(3, 1fr); gap: 30px; } }
.frame--cover { margin: 0; }
.frame--cover .mat { padding: 10px; }
.frame--cover img {
  aspect-ratio: 4 / 3; object-fit: cover; object-position: center;
  width: 100%; height: auto;
}
.frame--cover .plate {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  margin: 8px 10px 4px; padding: 8px 12px 9px;
  border-radius: 6px; text-align: center;
  background: linear-gradient(180deg, #d9b45f, #b8923f 60%, #cfa652);
  color: #2a1a0b; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 3px 8px -4px rgba(0,0,0,.8);
}
.frame--cover .plate-title {
  font-family: var(--display); font-weight: 600; font-size: 22px; line-height: 1.05;
}
.frame--cover .plate-count {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: #4a2f10;
}
.frame--cover .chapter-set { display: none; }

/* ---------------- small screens ---------------- */
@media (max-width: 620px) {
  .gal-hero { padding-top: 118px; }
  .gal-sign { padding: 24px 22px 26px; }
  .gal-sign::before, .gal-sign::after { top: -52px; height: 52px; }
  .room-plaque { padding: 10px 18px 12px; }
  .frame { margin-bottom: 20px; }
  .frame .gal-link { padding: 7px; }
  .frame .mat { padding: 8px 8px 10px; }
  .frame figcaption { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .frame .gal-link, .gal-doors a { transition: none; }
  .frame .gal-link:hover { transform: none; }
}