/* THE SHRINE — Living Edition: the cinema layer.
   Full-bleed moving plates, the song cycle, the narration player and the gallery.
   Everything here sits on top of the original single-file app without altering its
   palette: --paper, --ink, --cloth, --pencil and --foxed are all inherited. */

/* ---------------------------------------------------------------- full bleed ----
   Panels live inside `main.wrap` (max-width 1180px), so a bleed element has to break
   out of its own container. `100vw` is the usual trick and it is wrong: on any
   platform that reserves gutter for a scrollbar, 100vw is WIDER than the visible page
   and the document scrolls sideways. Hiding that with overflow-x:hidden only clips the
   evidence. So the exact scrollbar width is measured once in JS and subtracted here. */
:root { --sbw: 0px; }
.bleed{
  position:relative;
  width:calc(100vw - var(--sbw));
  margin-left:calc(50% - (100vw - var(--sbw)) / 2);
}

/* ---------------------------------------------------------------- moving plate ---- */
.plate{
  position:relative; overflow:hidden; background:var(--ink);
  display:flex; align-items:flex-end;
  min-height:clamp(280px,52vh,560px);
  isolation:isolate;
}
.plate.tall{ min-height:clamp(380px,78vh,760px) }
.plate.short{ min-height:clamp(180px,30vh,300px) }

/* The poster <img> sits UNDER the video, always. If the video is still loading, is
   refused autoplay, or is a format this browser will not decode, the reader still sees
   the picture instead of a black rectangle. */
.plate > img.under,
.plate > video.loop{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; pointer-events:none;
}
.plate > video.loop{ z-index:1; opacity:0; transition:opacity .9s ease }
.plate > video.loop.ready{ opacity:1 }

/* the scrim is what makes the type legible, and it is graded per plate mood */
.plate::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to top, rgba(21,26,23,.88) 0%, rgba(21,26,23,.55) 38%, rgba(21,26,23,.18) 70%, rgba(21,26,23,.30) 100%);
}
.plate[data-mood=light]::after{
  background:linear-gradient(to top, rgba(241,239,231,.94) 0%, rgba(241,239,231,.72) 40%, rgba(241,239,231,.35) 72%, rgba(241,239,231,.42) 100%);
}
.plate .plate-in{
  position:relative; z-index:3; width:100%;
  max-width:1180px; margin:0 auto; padding:clamp(22px,5vw,54px) clamp(16px,4vw,40px);
  color:var(--plaster);
}
.plate[data-mood=light] .plate-in{ color:var(--ink) }

.plate .kicker{
  font-family:"Courier Prime",ui-monospace,monospace;
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:#D6CFA9;
}
/* Gold goes DARK on a light ground and mid on a dark one — never the same value for
   both. #6B5A2E measured 3.58:1 on the bright plaster plates, under the 4.5:1 an 11px
   label needs; this sits at about 5.2:1 on the same ground. */
.plate[data-mood=light] .kicker{ color:#3E3214 }
.plate h2, .plate h1.big{
  font-family:Fraunces,Georgia,serif; font-weight:900;
  font-variation-settings:"opsz" 144;
  line-height:.94; letter-spacing:-.02em;
  margin:.16em 0 .12em;
  font-size:clamp(2rem,6vw,4.4rem);
  text-shadow:0 2px 26px rgba(21,26,23,.5);
}
.plate[data-mood=light] h2,
.plate[data-mood=light] h1.big{ text-shadow:0 1px 18px rgba(241,239,231,.75) }
.plate .plate-sub{
  font-style:italic; max-width:34rem; font-size:clamp(1rem,2.1vw,1.22rem);
  color:#E7E3D6;
}
.plate[data-mood=light] .plate-sub{ color:#2B3831 }
.plate .cap{
  position:absolute; right:14px; bottom:10px; z-index:3;
  font-family:"Courier Prime",ui-monospace,monospace; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(241,239,231,.62);
}
.plate[data-mood=light] .cap{ color:rgba(21,26,23,.5) }

/* the title plate on the front door */
.plate.hero-plate h1.big{ font-size:clamp(3rem,13vw,8rem) }

/* ---------------------------------------------------------------- chapter banner -- */
.chbanner{ margin:0 0 26px; border:1px solid var(--rule) }
.chbanner .plate{ min-height:clamp(160px,26vh,260px) }

/* ---------------------------------------------------------------- songs ---------- */
.songgrid{ display:flex; flex-wrap:wrap; gap:18px; margin-top:20px }
/* flex with a basis, not auto-fit/minmax — a grid leaves ragged empty cells on the
   last row at most widths, and this list is twenty long so it always has one. */
.songcard{
  flex:1 1 320px; min-width:0;
  border:1px solid var(--rule); background:var(--plaster);
  box-shadow:0 10px 30px -24px var(--shadow);
  display:flex; flex-direction:column; overflow:hidden;
}
.songcard .sc-img{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--cloth) }
.songcard .sc-img img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.85) }
.songcard .sc-n{
  position:absolute; left:10px; top:8px; z-index:2;
  font-family:"Courier Prime",ui-monospace,monospace; font-size:11px; letter-spacing:.18em;
  color:var(--plaster); background:rgba(21,26,23,.62); padding:3px 8px;
}
.songcard .sc-body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px; flex:1 }
.songcard h3{ margin:0; font-size:1.12rem; line-height:1.16; font-variation-settings:"opsz" 40 }
.songcard .sc-note{ margin:0; font-size:13.5px; font-style:italic; color:#4A5850 }
.songcard .sc-role{
  align-self:flex-start; font-family:"Courier Prime",ui-monospace,monospace;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cloth); border:1px solid var(--rule); padding:2px 7px;
}
.songcard button.sc-open{
  margin-top:auto; align-self:flex-start; background:none; border:1px solid var(--rule);
  padding:7px 12px; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cloth); cursor:pointer;
}
.songcard button.sc-open:hover{ background:var(--paper) }

/* the lyric sheet */
.lyric{ margin-top:26px; border-top:1px solid var(--rule); padding-top:22px }
.lyric .lyric-head{ display:flex; gap:14px; align-items:baseline; flex-wrap:wrap }
.lyric .part{ margin:20px 0 0 }
.lyric .part-name{
  font-family:"Courier Prime",ui-monospace,monospace; font-size:11px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--foxed); margin-bottom:6px;
}
.lyric .part p{ margin:0; font-size:17px; line-height:1.62 }
.lyric .part p.l{ margin:0 }

/* ---------------------------------------------------------------- narration ------ */
.tracklist{ display:flex; flex-direction:column; gap:2px; margin-top:20px }
.track{
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  padding:14px 16px; border:1px solid var(--rule); background:var(--plaster);
}
.track + .track{ border-top:0 }
.track .t-play{
  background:var(--cloth); color:var(--plaster); border:0; cursor:pointer;
  width:38px; height:38px; flex:0 0 38px; font-size:13px;
}
.track .t-play[aria-pressed=true]{ background:var(--pencil) }
.track .t-meta{ flex:1 1 220px; min-width:0 }
.track .t-head{ font-family:Fraunces,Georgia,serif; font-weight:600; font-size:1rem }
.track .t-sub{ font-size:13.5px; font-style:italic; color:#4A5850 }
.track .t-time{
  font-family:"Courier Prime",ui-monospace,monospace; font-size:12px; color:var(--foxed);
  letter-spacing:.08em;
}
.track .t-bar{ flex:1 1 100%; height:3px; background:var(--rule); position:relative; cursor:pointer }
.track .t-bar i{ position:absolute; inset:0 auto 0 0; width:0; background:var(--pencil); display:block }

/* ---------------------------------------------------------------- gallery -------- */
.plates{ display:flex; flex-wrap:wrap; gap:16px; margin-top:20px }
.plates figure{
  flex:1 1 300px; min-width:0; margin:0; border:1px solid var(--rule);
  background:var(--plaster); overflow:hidden;
}
.plates figure .ph{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--ink) }
.plates figure img, .plates figure video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.plates figure video{ opacity:0; transition:opacity .8s ease }
.plates figure video.ready{ opacity:1 }
.plates figcaption{
  padding:10px 13px; font-size:13px; color:#3D4A43;
  border-top:1px solid var(--rule);
}

/* ---------------------------------------------------------------- misc ----------- */
.note-src{
  font-family:"Courier Prime",ui-monospace,monospace; font-size:11px;
  letter-spacing:.06em; color:var(--foxed);
}
/* long words and long URLs must not push a fixed layout sideways at large text sizes.
   `anywhere` — not `break-word`, which does not count toward min-content width. */
.lyric p, .songcard h3, .plate h2, .plate h1.big, .track .t-head{ overflow-wrap:anywhere }

@media (prefers-reduced-motion: reduce){
  .plate > video.loop{ display:none }
  .plates figure video{ display:none }
}