/* gallery.css — the vault room's chrome: the cream card, the labels, the names in the sky, the list and the
   live stage. Every colour and face comes from house.css tokens. No inline styles (CSP style-src 'self';
   the star names are positioned through the CSSOM, which the policy allows). */

.vault-gallery {
  --vg-sat: env(safe-area-inset-top, 0px);
  --vg-sab: env(safe-area-inset-bottom, 0px);
  --vg-sal: env(safe-area-inset-left, 0px);
  --vg-sar: env(safe-area-inset-right, 0px);
  --vg-top: calc(var(--house-top, 0px) + var(--vg-sat));

  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
  overflow: hidden;
  background: var(--sky);
  color: var(--ink);
  font: 16px/1.5 var(--serif);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.vault-gallery *, .vault-gallery *::before, .vault-gallery *::after { box-sizing: border-box; }

.vault-gallery .vg-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  touch-action: none; outline: none; cursor: grab;
}
.vault-gallery.is-dragging .vg-canvas { cursor: grabbing; }
.vault-gallery .vg-canvas:focus-visible { box-shadow: inset 0 0 0 1px rgba(238, 176, 63, 0.6); }
.vault-gallery.is-list .vg-canvas { visibility: hidden; }

/* the edges fall away, barely */
.vault-gallery .vg-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(130% 100% at 50% 45%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%);
}
.vault-gallery.is-list .vg-vignette { display: none; }

/* ---------- the names of the stars (overview) ---------- */
.vg-names { position: absolute; inset: 0; pointer-events: none; z-index: 1; display: none; }
.vg-names.is-shown { display: block; }
.vg-names[hidden] { display: none; }
.vg-name {
  position: absolute; left: 0; top: 0; transform: translate(-1000px, -1000px); translate: -50% 0;
  font: italic 13px/1.2 var(--serif); color: var(--ink-2); white-space: nowrap; opacity: 0;
  text-shadow: 0 0 6px rgba(6, 5, 10, 0.9), 0 0 2px rgba(6, 5, 10, 1);
  transition: opacity 0.4s ease;
}

/* ---------- top: brand (stand-alone only) ---------- */
.vg-hud {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: calc(18px + var(--vg-top)) calc(22px + var(--vg-sar)) 0 calc(22px + var(--vg-sal));
  pointer-events: none;
}
.vg-hud > * { pointer-events: auto; }
.vg-brand { display: flex; align-items: baseline; gap: 14px; }

/* ---------- the one hint: an italic sentence at the bottom that fades ---------- */
.vg-hint {
  position: absolute; left: 50%; bottom: calc(var(--vg-foot-clear) + 58px); z-index: 2; margin: 0;
  transform: translateX(-50%); width: max-content; max-width: calc(100% - 48px); text-align: center;
  font: italic 15px/1.5 var(--serif); color: var(--dim);
  transition: opacity 1.4s ease; pointer-events: none; opacity: 1;
}
.vg-hint.is-gone { opacity: 0; }
.vg-hint[hidden] { display: none; }
.vault-gallery:not(.is-portrait) .vg-hint { bottom: calc(var(--vg-foot-clear) + 4px); }

/* ---------- bottom: the room's tools and the nav ---------- */
.vg-foot {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 calc(22px + var(--vg-sar)) calc(18px + var(--vg-sab)) calc(22px + var(--vg-sal));
  pointer-events: none;
}
.vg-foot > * { pointer-events: auto; }
.vg-foot[hidden] { display: none; }
.vg-tools { display: flex; align-items: center; gap: 22px; }
.vg-nav { display: flex; align-items: center; gap: 14px; transition: opacity 0.4s ease; }
.vg-nav[hidden] { display: none; }
.vg-nav.is-away { opacity: 0; pointer-events: none; }
.vg-nav .vg-arrow { font: 16px/1 var(--serif); letter-spacing: 0; padding: 14px 12px; color: var(--ink-2); }
.vg-nav .vg-arrow:hover { color: var(--ink); }
.vg-nav .vg-arrow:disabled { opacity: 0.25; }
.vg-pos { min-width: 5ch; text-align: center; color: var(--dim); }
.vg-foot .vg-spacer { flex: 1; }
/* the list keeps the tools reachable above it */
.vault-gallery.is-list .vg-foot { background: linear-gradient(to top, var(--sky) 60%, rgba(6, 5, 10, 0)); padding-top: 14px; }

/* ---------- the legend of threads (overview) ---------- */
.vg-legend {
  position: absolute; left: calc(22px + var(--vg-sal)); bottom: calc(64px + var(--vg-sab)); z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  opacity: 0; transform: translateY(6px); transition: opacity 0.5s ease, transform 0.5s ease; pointer-events: none;
}
.vg-legend.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.vg-legend .vg-legend-title { margin-bottom: 8px; color: var(--dim); }
.vg-thread { display: inline-flex; align-items: center; gap: 9px; }
.vg-legend .vg-thread { padding: 8px 0; min-height: 32px; }
.vg-thread::before { content: ""; width: 14px; height: 1px; background: currentColor; opacity: 0.85; }
/* the tint wins over the generic label colour (a.label / button.label) */
.vault-gallery button.label.vg-t0, .vault-gallery .vg-t0 { color: var(--amber); }
.vault-gallery button.label.vg-t1, .vault-gallery .vg-t1 { color: var(--blue); }
.vault-gallery button.label.vg-t2, .vault-gallery .vg-t2 { color: var(--coral); }
.vault-gallery button.label.vg-t3, .vault-gallery .vg-t3 { color: var(--ink-2); }
.vault-gallery button.label.vg-thread:hover, .vault-gallery button.label.vg-thread:focus-visible { color: var(--ink); }
.vault-gallery button.label.vg-thread.is-on, .vault-gallery button.label.vg-thread[aria-pressed="true"] { color: var(--ink); }
.vault-gallery button.label.vg-thread.is-on::before, .vault-gallery button.label.vg-thread[aria-pressed="true"]::before { height: 2px; }

/* ---------- the letter: rolled at rest, unrolled on request, never over the picture ----------
   .vg-info is the whole letter (is-shown while a piece is in focus, is-open while the note is out). Inside it:
   the tab slot with the rolled tab (a button), the sheet slot with the sheet (the cream card), and the roll that
   travels while the sheet unrolls (sized and moved from JS: real width and height, so nothing stretches). The
   room carries data-tab: "foot" (the tab at the bottom, the sheet unrolls upward from it) or "side" (a spine at
   the right edge, the sheet unrolls leftward), chosen by the gallery from the picture's aspect. The clearances
   --vg-top-clear and --vg-foot-clear are set by the gallery from what it measures (the bar, the tools); the
   defaults below hold until then. --vg-foot-mid is the tools' centre line from the bottom, --vg-foot-gap the free
   width between the tools and the arrows, for a tab that lives inside the foot row on a landscape screen. */
.vault-gallery { --vg-top-clear: calc(var(--vg-top) + 10px); --vg-foot-clear: 70px; --vg-foot-mid: 40px; --vg-foot-gap: 100%; }
.vg-info { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.vg-top-probe { position: absolute; left: 0; top: var(--vg-top); width: 0; height: 0; pointer-events: none; }

/* the slots: where the tab rests and where the sheet lies. Foot: both at the bottom, centred; the sheet's foot is
   the tab's foot (on a landscape screen the tab sits lower, inside the foot row, and the sheet's foot stays above
   the tools). Side: both at the right edge, centred in the band between the bar and the tools. */
.vg-tab-slot, .vg-sheet-slot {
  position: absolute; display: flex; pointer-events: none;
  left: calc(12px + var(--vg-sal)); right: calc(12px + var(--vg-sar));
}
.vg-tab-slot { bottom: var(--vg-foot-clear); justify-content: center; align-items: flex-end; }
.vg-sheet-slot { top: var(--vg-top-clear); bottom: var(--vg-foot-clear); justify-content: center; align-items: flex-end; }
.vault-gallery:not(.is-portrait)[data-tab="foot"] .vg-tab-slot { bottom: calc(var(--vg-foot-mid) - 23px); height: 46px; align-items: center; }
.vault-gallery:not(.is-portrait)[data-tab="foot"] .vg-letter { max-width: var(--vg-foot-gap); }
.vault-gallery:not(.is-portrait)[data-tab="foot"] .vg-sheet { max-width: min(680px, var(--vg-foot-gap)); }
.vault-gallery[data-tab="side"] .vg-tab-slot {
  left: auto; right: calc(22px + var(--vg-sar)); top: var(--vg-top-clear); bottom: var(--vg-foot-clear); width: 48px;
  flex-direction: column; justify-content: center; align-items: center;
}
.vault-gallery[data-tab="side"] .vg-sheet-slot { left: calc(22px + var(--vg-sal)); right: calc(22px + var(--vg-sar)); justify-content: flex-end; align-items: center; }

/* the rolled paper (the tab at rest, the roll in flight): cream with a grain (the gallery sets the grain as a
   background image), a cylinder's shading on top (a highlight toward the east light and a core shadow), the
   outer layer's hairline, the far end's silhouette in the corners, the near end's face (an ellipse of layers,
   .vg-roll-end) and a soft drop shadow. --vg-rt is the roll's thickness (its height when it lies, its width when
   it stands); --vg-k its thickness as a share of the tab's, for a shadow that shrinks as the roll thins. */
.vg-letter, .vg-roll {
  --vg-rt: 46px; --vg-k: 1;
  position: relative; box-sizing: border-box; border: 0; margin: 0;
  background-color: var(--cream); color: var(--cream-ink);
  box-shadow: 0 calc(10px * var(--vg-k)) calc(26px * var(--vg-k)) calc(-6px * var(--vg-k)) rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.35);
  border-radius: calc(var(--vg-rt) * 0.2) 2px 2px calc(var(--vg-rt) * 0.2) / 50% 2px 2px 50%;
}
.vault-gallery[data-tab="side"] .vg-letter, .vault-gallery[data-tab="side"] .vg-roll {
  border-radius: 2px 2px calc(var(--vg-rt) * 0.2) calc(var(--vg-rt) * 0.2) / 2px 2px 50% 50%;
}
.vg-shade { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.vg-shade::after { content: ""; position: absolute; left: 4%; right: 4%; top: 30%; height: 1px; background: rgba(58, 40, 20, 0.16); }
/* the light comes from the upper right: a lying roll shines near its top, turns dark toward its underside and
   catches a little reflected light from the paper at its very edge */
.vg-shade {
  background: linear-gradient(to bottom, rgba(58, 40, 20, 0.14) 0%, rgba(255, 255, 255, 0) 7%, rgba(255, 255, 255, 0.6) 21%,
    rgba(255, 255, 255, 0.16) 36%, rgba(255, 255, 255, 0) 48%, rgba(58, 40, 20, 0.08) 60%, rgba(58, 40, 20, 0.3) 84%,
    rgba(58, 40, 20, 0.38) 95%, rgba(58, 40, 20, 0.14) 100%);
}
/* a standing roll shines on its right */
.vault-gallery[data-tab="side"] .vg-shade {
  background: linear-gradient(to right, rgba(58, 40, 20, 0.14) 0%, rgba(58, 40, 20, 0.38) 5%, rgba(58, 40, 20, 0.3) 16%,
    rgba(58, 40, 20, 0.08) 40%, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 0.16) 64%, rgba(255, 255, 255, 0.6) 79%,
    rgba(255, 255, 255, 0) 93%, rgba(58, 40, 20, 0.14) 100%);
}
.vault-gallery[data-tab="side"] .vg-shade::after { left: auto; right: 30%; top: 4%; bottom: 4%; width: 1px; height: auto; }
/* the near end of the cylinder: an ellipse of wound layers, darker toward the core, half of it past the body */
.vg-roll-end {
  position: absolute; pointer-events: none; border-radius: 50%;
  top: 0; bottom: 0; right: calc(var(--vg-rt) * -0.18); width: calc(var(--vg-rt) * 0.36);
  background:
    radial-gradient(ellipse at 50% 50%, rgba(58, 40, 20, 0.34) 0, rgba(58, 40, 20, 0.14) 24%, rgba(58, 40, 20, 0) 62%),
    repeating-radial-gradient(ellipse farthest-side at 50% 50%, rgba(58, 40, 20, 0) 0 1.6px, rgba(58, 40, 20, 0.2) 1.6px 2.4px),
    linear-gradient(#ece5d6, #e2dacb);
  box-shadow: 1px 0 3px rgba(0, 0, 0, 0.28);
}
.vault-gallery[data-tab="side"] .vg-roll-end {
  left: 0; right: 0; bottom: auto; width: auto; top: calc(var(--vg-rt) * -0.18); height: calc(var(--vg-rt) * 0.36);
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.28);
}

/* the tab: a real button. Title, day, the seal. It fades in with the focus, and steps aside the moment the roll
   takes its place (is-away): the roll is its twin, so nothing jumps. */
.vg-letter {
  pointer-events: auto; cursor: pointer; appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; gap: 12px; height: 46px; max-width: 100%; padding: 0 12px 0 20px;
  font: italic 14px/1.2 var(--serif); letter-spacing: 0; text-align: left;
  opacity: 0; transition: opacity 0.35s ease; -webkit-tap-highlight-color: transparent;
}
.vg-info.is-shown .vg-letter { opacity: 1; }
.vg-info.is-anim .vg-letter { transition: none; }
.vg-letter.is-away { visibility: hidden; }
.vg-letter:focus-visible { outline: 1px solid var(--amber); outline-offset: 5px; }
.vg-letter:hover .vg-tab-title { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(28, 27, 34, 0.35); }
.vg-tab-text { position: relative; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-tab-title { color: var(--cream-ink); }
.vg-tab-title::after { content: ","; }
.vg-tab-date { color: var(--cream-dim); margin-left: 7px; font-size: 12.5px; }
.vg-tab-date:empty { display: none; }
.vg-tab-title:has(+ .vg-tab-date:empty)::after { content: none; }
.vg-tab-seal { position: relative; flex: none; display: block; width: 32px; height: 32px; }
.vg-tab-seal .seal { width: 32px; height: 32px; }
.vault-gallery[data-tab="side"] .vg-letter, .vault-gallery[data-tab="side"] .vg-roll { --vg-rt: 48px; }
.vault-gallery[data-tab="side"] .vg-letter {
  height: auto; width: 48px; max-width: none; max-height: 100%; flex-direction: column; gap: 14px; padding: 20px 0 12px;
}
.vault-gallery[data-tab="side"] .vg-tab-text, .vault-gallery[data-tab="side"] .vg-roll-face .vg-tab-text { writing-mode: vertical-rl; text-orientation: mixed; max-height: 100%; }
.vault-gallery[data-tab="side"] .vg-tab-date { margin-left: 0; margin-top: 7px; }

/* the roll that travels: shown only while the letter moves; JS gives it its box and moves it by transform. Its
   face carries the tab's words and seal until the paper has left it. */
.vg-roll { position: absolute; left: 0; top: 0; width: 46px; height: 46px; display: none; pointer-events: none; transform-origin: 0 0; will-change: transform, opacity; z-index: 3; }
.vg-roll.is-live { display: block; }
.vg-roll-face {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 12px 0 20px; overflow: hidden;
  font: italic 14px/1.2 var(--serif); letter-spacing: 0; text-align: left; white-space: nowrap;
}
.vault-gallery[data-tab="side"] .vg-roll-face { flex-direction: column; gap: 14px; padding: 20px 0 12px; }

/* the sheet: the cream card, hidden until the letter opens; clipped at the roll while it unrolls. Its leading
   edge (the top when it unrolls upward, the left when it unrolls leftward) keeps a thin rolled edge. */
.vg-sheet {
  pointer-events: auto; position: relative; width: 100%; max-width: 600px; max-height: 100%; z-index: 1;
  display: flex; flex-direction: column; gap: 14px; visibility: hidden; outline: none; will-change: clip-path;
  border-top-left-radius: 4px; border-top-right-radius: 4px;
}
.vg-info.is-open .vg-sheet, .vg-info.is-closing .vg-sheet { visibility: visible; }
.vault-gallery[data-tab="side"] .vg-sheet { width: min(440px, 40%); max-width: none; border-radius: var(--radius-card); border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.vg-sheet::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; z-index: 2; pointer-events: none; border-radius: 4px 4px 0 0;
  background: linear-gradient(to bottom, rgba(58, 40, 20, 0.2) 0, rgba(255, 255, 255, 0.5) 30%, rgba(58, 40, 20, 0.1) 70%, rgba(58, 40, 20, 0) 100%);
}
.vault-gallery[data-tab="side"] .vg-sheet::before {
  right: auto; bottom: 0; width: 8px; height: auto; border-radius: 4px 0 0 4px;
  background: linear-gradient(to right, rgba(58, 40, 20, 0.2) 0, rgba(255, 255, 255, 0.5) 30%, rgba(58, 40, 20, 0.1) 70%, rgba(58, 40, 20, 0) 100%);
}
/* the curl: the shadow the roll casts on the paper where the paper leaves it (moved by transform, along the roll) */
.vg-curl {
  position: absolute; left: 0; right: 0; top: 0; height: 26px; z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(to bottom, rgba(35, 22, 8, 0.34) 0, rgba(35, 22, 8, 0.12) 38%, rgba(35, 22, 8, 0) 100%);
}
.vault-gallery[data-tab="side"] .vg-curl {
  right: auto; bottom: 0; width: 26px; height: auto;
  background: linear-gradient(to right, rgba(35, 22, 8, 0.34) 0, rgba(35, 22, 8, 0.12) 38%, rgba(35, 22, 8, 0) 100%);
}
.vg-info.is-anim .vg-curl { opacity: 1; }
/* the body scrolls when the note is long; a fade at whichever edge has more beyond it says so */
.vg-info .vg-info-body { min-height: 0; overflow: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: 12px; }
.vg-info .vg-info-body.is-more-below { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent); }
.vg-info .vg-info-body.is-more-above { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30px); mask-image: linear-gradient(to bottom, transparent, #000 30px); }
.vg-info .vg-info-body.is-more-above.is-more-below { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30px, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 30px, #000 calc(100% - 30px), transparent); }
.vg-info .vg-kicker { display: flex; flex-wrap: wrap; gap: 0 10px; align-items: baseline; font: italic 15px/1.5 var(--serif); color: var(--cream-dim); }
.vg-info .vg-kicker h2 { margin: 0; display: inline; font: italic 15px/1.5 var(--serif); color: var(--cream-ink); letter-spacing: 0; }
.vg-info .vg-kicker h2::after { content: ","; }
.vg-info .vg-hero { margin: 0; font: 400 19.5px/1.4 var(--serif); color: var(--cream-ink); letter-spacing: -0.004em; text-wrap: pretty; }
.vg-info .vg-medium { margin: 0; font: italic 14.5px/1.5 var(--serif); color: var(--cream-dim); }
.vg-info .vg-medium:empty { display: none; }
/* the recorded loop's honesty line, on its own row of the kicker, right under the title: "time-lapse ×60", or what
   the hand did, in the index's own sentence; only when a loop will play */
.vg-info .vg-kicker .vg-loopnote { flex-basis: 100%; margin: 0; font-size: 9.5px; line-height: 1.5; color: var(--cream-dim); text-transform: none; letter-spacing: 0.06em; }
.vg-info .vg-kicker .vg-loopnote:empty { display: none; }
/* the chips sit under the body, outside the scroll, so the threads are always in view and the grain shows through;
   each chip is a 44 px row (the rows overlap their neighbours' margins a little, so the flow keeps its old rhythm) */
.vg-info .vg-chips { flex: none; display: flex; flex-wrap: wrap; gap: 0 18px; margin: -6px 0; }
.vg-info .vg-chips:empty { display: none; }
.vg-info .vg-chips .vg-thread { font-size: 9.5px; padding: 0; min-height: 44px; }
.vg-info .vg-chips button.label.vg-t0 { color: var(--cream-amber); }
.vg-info .vg-chips button.label.vg-t1 { color: var(--cream-blue); }
.vg-info .vg-chips button.label.vg-t2 { color: var(--cream-coral); }
.vg-info .vg-chips button.label.vg-t3 { color: #5b5960; }
.vg-info .vg-chips button.label.vg-thread:hover, .vg-info .vg-chips button.label.vg-thread.is-on, .vg-info .vg-chips button.label.vg-thread[aria-pressed="true"] { color: var(--cream-ink); }
.vg-info .vg-actions { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vg-info .vg-actions .link { padding: 10px 0; min-height: 44px; }
.vg-info .vg-actions .link:disabled { opacity: 0.5; cursor: default; text-decoration: none; }
/* the seal rolls the note up: the seal with a tiny word under it */
.vg-info .vg-actions .vg-close { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; padding: 2px 6px 0; margin: -2px -6px 0 0; }
.vg-info .vg-actions .vg-close .label { font-size: 9px; letter-spacing: 0.22em; color: var(--cream-dim); }
.vg-info .vg-actions .vg-close:hover .label { color: var(--cream-ink); }

/* ---------- screen-reader live region ---------- */
.vg-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- notice (e.g. no WebGL) ---------- */
.vg-notice {
  position: absolute; left: 50%; top: calc(64px + var(--vg-top)); z-index: 3; transform: translateX(-50%);
  max-width: min(520px, calc(100% - 32px)); padding: 10px 16px; border-radius: 999px; border: 1px solid var(--hair);
  background: rgba(6, 5, 10, 0.8); color: var(--ink-2); font: italic 14px/1.4 var(--serif); text-align: center;
}
.vg-notice[hidden] { display: none; }

/* ---------- plain list (fallback and accessibility view) ---------- */
.vg-list {
  position: absolute; inset: 0; z-index: 1; overflow: auto; -webkit-overflow-scrolling: touch;
  padding: calc(64px + var(--vg-top)) calc(22px + var(--vg-sar)) calc(90px + var(--vg-sab)) calc(22px + var(--vg-sal));
  background: var(--sky);
  /* the bar above is a solid band of sky: nothing scrolls through it */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent calc(var(--vg-top) + 4px), black calc(var(--vg-top) + 40px));
  mask-image: linear-gradient(to bottom, transparent 0, transparent calc(var(--vg-top) + 4px), black calc(var(--vg-top) + 40px));
}
.vg-list[hidden] { display: none; }
.vg-list h2 { margin: 0 auto 6px; max-width: 760px; }
.vg-list ol { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; }
.vg-list li {
  display: grid; grid-template-columns: 132px 1fr; gap: 20px; align-items: start;
  padding: 22px 0; border-top: 1px solid var(--hair);
}
.vg-list li:last-child { border-bottom: 1px solid var(--hair); }
.vg-list li img, .vg-list li .vg-blank { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; display: block; background: #000; border: 1px solid var(--hair); border-radius: 4px; }
.vg-list .vg-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vg-list .vg-title { font: 400 22px/1.2 var(--serif); color: var(--ink); }
.vg-list .vg-lmeta { font: italic 14px/1.45 var(--serif); color: var(--dim); }
.vg-list .vg-lblurb { font: 15px/1.5 var(--serif); color: var(--ink-2); }
.vg-list .vg-lact { margin-top: 4px; display: flex; gap: 20px; }
.vg-list .vg-lact button.label { padding: 12px 0; min-height: 44px; }

/* ---------- live-piece stage (the gallery's own sandboxed iframe overlay) ---------- */
.vg-stage {
  position: fixed; inset: 0; z-index: 60; background: var(--sky);
  display: flex; flex-direction: column;
  animation: vg-fade 0.35s ease both;
}
.vg-stage[hidden] { display: none; }
.vg-stage-bar {
  flex: none; display: flex; align-items: center; gap: 14px;
  min-height: 48px; padding: var(--vg-sat) calc(14px + var(--vg-sar)) 0 calc(18px + var(--vg-sal));
  background: var(--sky); border-bottom: 1px solid var(--hair); color: var(--ink);
}
.vg-stage-title { font: 400 16px var(--serif); white-space: nowrap; }
.vg-stage-meta { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: italic 14px/1.3 var(--serif); color: var(--dim); }
.vg-stage-bar button.label { padding: 14px 8px; }
.vg-stage iframe { flex: 1; width: 100%; border: 0; background: #000; }
.vg-stage-wait { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.vg-stage-wait[hidden] { display: none; }

@keyframes vg-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- phone ---------- */
@media (max-width: 640px) {
  .vg-hud { padding: calc(14px + var(--vg-top)) calc(18px + var(--vg-sar)) 0 calc(18px + var(--vg-sal)); }
  .vg-hint { max-width: calc(100% - 36px); font-size: 14px; }
  .vg-foot { padding: 0 calc(18px + var(--vg-sar)) calc(10px + var(--vg-sab)) calc(18px + var(--vg-sal)); gap: 10px; }
  .vg-tools { gap: 16px; }
  .vg-tools button.label { padding: 14px 4px; }
  .vg-nav { gap: 4px; }
  .vg-letter { --vg-rt: 44px; height: 44px; padding-left: 16px; font-size: 13.5px; gap: 10px; }
  .vg-roll-face { padding-left: 16px; font-size: 13.5px; gap: 10px; }
  .vg-tab-seal, .vg-tab-seal .seal { width: 30px; height: 30px; }
  .vault-gallery:not(.is-portrait)[data-tab="foot"] .vg-tab-slot { bottom: calc(var(--vg-foot-mid) - 22px); height: 44px; }
  .vg-info .vg-hero { font-size: 17.5px; line-height: 1.4; }
  .vg-info .vg-kicker, .vg-info .vg-kicker h2 { font-size: 14px; }
  .vg-info .vg-medium { font-size: 13.5px; }
  .vg-legend { left: calc(18px + var(--vg-sal)); bottom: calc(60px + var(--vg-sab)); }
  .vg-legend .vg-thread { padding: 6px 0; min-height: 30px; }
  .vg-name { font-size: 12px; }
  .vg-list { padding-left: calc(18px + var(--vg-sal)); padding-right: calc(18px + var(--vg-sar)); }
  .vg-list li { grid-template-columns: 96px 1fr; gap: 14px; padding: 18px 0; }
  .vg-list .vg-title { font-size: 19px; }
  .vg-stage-title { font-size: 15px; }
}
@media (max-width: 360px) {
  .vg-tools { gap: 12px; }
  .vg-pos { min-width: 4ch; }
}

@media (prefers-reduced-motion: reduce) {
  .vg-letter, .vg-hint, .vg-legend, .vg-name, .vg-nav { transition: none; }
  .vg-roll, .vg-curl { display: none !important; }
  .vg-stage { animation: none; }
}