/* =====================================================================================================================
   THE GALLERY (live since 2026-10-09, lustlit.com/gallery/): .llg-* only. Code/gallery/README.md, Code/THE-GALLERY.md.

   The pieces are LL-UI's (Code/ui/ll-ui.css, loaded before this file and never changed from here): the show is its
   carousel, the pills and buttons are its own. What this file adds keeps the house rules:
   - every picture is shown WHOLE, in a box of its own shape (--ar = width / height); nothing scales one;
   - nothing sits over a picture's bottom-right corner, where the LUSTLIT mark is: the heart and Save to go top right,
     names and locks bottom left or centre;
   - the heart, Save to, the question asked first and the toasts are the shared client's (ll-library.css, loaded before
     this file): this file only places its buttons;
   - no counts, no eyebrows; drawn icons; numbers white; #ef4444 is the accent, #c41e3a only a fill;
   - reduced motion: no lifts, pops or slides.
   ================================================================================================================== */

.llg { --llg-ink: rgba(255, 255, 255, .72); background: var(--ll-black, #0a0a0a); color: #fff; padding-bottom: clamp(56px, 8vw, 112px); overflow-x: clip; }
.llg a { color: inherit; }

/* ---- THE PAGE'S HEADER: the PAGE HERO SYSTEM's values (style.css, its four lists), copied here so style.css is never
   touched for this page (the launch, 2026-10-09). If the system's values change, change this copy with them. ---- */
.llg-hero { position: relative; background: var(--ll-hero-bg); border-bottom: var(--ll-hero-border); text-align: center;
    padding: var(--ll-hero-pad-top, calc(var(--header-height, 56px) + 1.5rem)) var(--space-md, 1rem) 2rem; }
.llg-hero__title { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: clamp(2.15rem, 5.4vw, 3.5rem); font-weight: 800;
    letter-spacing: -.035em; line-height: 1.04; color: #fff; max-width: 19ch; margin: 0 auto; text-shadow: 0 2px 44px rgba(0, 0, 0, .65); }
.llg-hero__title::after { content: ""; display: block; width: 104px; height: 2px; margin: 1.1rem auto; background: var(--ll-neon-line, #ef4444);
    filter: var(--ll-neon-glow-lg, drop-shadow(0 0 6px rgba(239, 68, 68, .8))); border-radius: 0; }
.llg-hero__desc { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 1.05rem; font-weight: 400; font-style: normal; line-height: 1.68;
    color: rgba(255, 255, 255, .72); max-width: 62ch; margin: 0 auto; text-align: center; }

/* =====================================================================================================================
   THE SHOW: LL-UI's carousel, hung like a gallery wall. Each print stands in a pool of light in her colour; its placard
   is the words beside it. The carousel sits under the page's header, so the bar's height is not added again.
   ================================================================================================================== */
.llg-show { --llui-bar: 0px; border-bottom: 1px solid var(--ll-hairline, rgba(255, 255, 255, .08)); }
.llg-show .llui-slide--panel { --llui-panel-h: clamp(380px, 64svh, 680px); padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(64px, 7vw, 96px);
    background:
        radial-gradient(42% 70% at 76% 46%, color-mix(in srgb, var(--c, #ef4444) 34%, transparent) 0%, transparent 72%),
        radial-gradient(30% 50% at 76% 4%, rgba(255, 255, 255, .07) 0%, transparent 70%); }
.llg-show .llui-slide__art { border-radius: 3px; outline-color: rgba(255, 255, 255, .16); cursor: zoom-in;
    filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .6)) drop-shadow(0 0 1px rgba(255, 255, 255, .25)); }
.llg-show .llui-slide__art img { object-fit: contain; }
.llg-placard .llui-slide__title { font-size: clamp(2.2rem, 4.2vw, 4rem); }
.llg-placard .llui-slide__title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: #ef4444; }
.llg-placard__line { font-style: italic; }
.llg-placard .llui-actions { align-items: center; }
@media (max-width: 699px) {
    .llg-show .llui-slide--panel { padding-top: 22px; padding-bottom: 0;
        background: radial-gradient(70% 46% at 50% 26%, color-mix(in srgb, var(--c, #ef4444) 34%, transparent) 0%, transparent 74%); }
    .llg-show .llui-slide__art { width: min(100%, calc(56svh * var(--ar))); }
    .llg-placard .llui-slide__title { font-size: clamp(2rem, 9vw, 2.6rem); }
}

/* =====================================================================================================================
   HER GALLERY's header: her card standing whole on a pool of her colour, her name and her ways in on the left.
   ================================================================================================================== */
.llg-her { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: clamp(20px, 4vw, 64px);
    padding: var(--ll-hero-pad-top, calc(var(--header-height, 56px) + 1.5rem)) var(--llui-gutter, 16px) 0; overflow: hidden;
    border-bottom: var(--ll-hero-border, 1px solid rgba(206, 14, 48, .26));
    background: radial-gradient(70% 95% at 80% 100%, color-mix(in srgb, var(--c, #ef4444) 46%, #0a0a0a) 0%, color-mix(in srgb, var(--c, #ef4444) 14%, #0a0a0a) 48%, #0a0a0a 100%); }
.llg-her__body { align-self: center; max-width: 640px; padding: clamp(12px, 3vw, 40px) 0 clamp(36px, 5vw, 72px); }
.llg-her__body > * + * { margin-top: 16px; }
.llg-her__crumb { display: inline-flex; align-items: center; gap: 6px; font: 600 .875rem/1 var(--font-body, sans-serif); color: rgba(255, 255, 255, .72); text-decoration: none; }
.llg-her__crumb svg { width: 16px; height: 16px; }
.llg-her__crumb:hover { color: #fff; }
.llg-her__name { margin: 12px 0 0; font: 800 clamp(2.4rem, 5.6vw, 4.6rem)/.98 var(--font-heading, 'Plus Jakarta Sans', sans-serif); letter-spacing: -.035em; color: #fff; text-wrap: balance; }
.llg-her__line { margin: 0; max-width: 46ch; font: italic 400 clamp(1rem, 1.3vw, 1.2rem)/1.55 var(--font-body, sans-serif); color: rgba(255, 255, 255, .86); }
.llg-her .llui-actions { margin-top: 24px; }
.llg-her__art { height: clamp(320px, 54svh, 580px); aspect-ratio: var(--ar); }
.llg-her__art img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
@media (max-width: 699px) {
    .llg-her { grid-template-columns: 1fr; padding-top: calc(var(--header-height, 56px) + 12px); }
    .llg-her__art { order: -1; justify-self: center; height: 34svh; }
    .llg-her__body { padding-top: 0; }
}

/* =====================================================================================================================
   THE BAR: the girls (addresses), then the shoots, the order and how much she wears (sorted in place). It stays under
   the menu while the rooms scroll.

   THE GIRLS (Hayden, 2026-10-09: "I want her headshot in a circle, with her name below it, so that people don't need to
   memorize names immediately to use the site"): her face in a circle on her own colour, her first name under it; the
   girl you are on wears a ring in her colour with its glow (Everyone's is the accent). One row, centred while it fits and
   swiped sideways when it doesn't (the auto margins on the first and last circle centre it without ever cutting the
   first one off). Stuck under the menu (.is-stuck, from gallery.js) the circles shrink and the names stay: the bar
   gives the space back as margin, so nothing under it jumps.
   ================================================================================================================== */
.llg-bar { --av-big: 64px; --av-small: 40px; --av: var(--av-big); --llg-stick: 220ms;
    position: sticky; top: var(--header-height, 56px); z-index: 20; background: rgba(10, 10, 10, .9);
    -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid rgba(255, 255, 255, .08);
    transition: margin-bottom var(--llg-stick) var(--ll-ease-settle, ease); }
.llg-bar.is-stuck { --av: var(--av-small); margin-bottom: calc(var(--av-big) - var(--av-small)); }
.llg-bar-at { height: 1px; margin-bottom: -1px; pointer-events: none; }
.llg-bar__in { display: flex; flex-direction: column; gap: 6px; padding: 6px 0 12px; }
.llg-who, .llg-bar__tools { display: flex; margin: 0; padding: 0 var(--llui-gutter, 16px); list-style: none; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.llg-who::-webkit-scrollbar, .llg-bar__tools::-webkit-scrollbar { display: none; }
.llg-who { gap: 10px; padding-top: 8px; padding-bottom: 2px; }              /* room above for the ring and its glow */
.llg-who > li { flex: none; }
.llg-who > li:first-child, .llg-bar__tools > :first-child { margin-left: auto; }
.llg-who > li:last-child, .llg-bar__tools > :last-child { margin-right: auto; }
.llg-bar__tools { gap: 14px; padding-top: 4px; }
.llg-av { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: calc(var(--av-big) + 10px); padding: 0 2px;
    text-decoration: none; color: rgba(255, 255, 255, .7); -webkit-tap-highlight-color: transparent; transition: color var(--ll-dur-fast, 150ms) ease; }
.llg-av__pic { position: relative; display: block; flex: none; width: var(--av); height: var(--av); border-radius: 50%; overflow: hidden;
    background: color-mix(in srgb, var(--c, #ef4444) 34%, #121214); box-shadow: 0 0 0 1px rgba(255, 255, 255, .16);
    transition: width var(--llg-stick) var(--ll-ease-settle, ease), height var(--llg-stick) var(--ll-ease-settle, ease),
        box-shadow var(--ll-dur-fast, 150ms) ease, filter var(--ll-dur-fast, 150ms) ease; }
.llg-av__pic img, .llg-av__pic svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.llg-av__mono { display: grid; place-items: center; width: 100%; height: 100%; font: 800 1.25rem/1 var(--font-heading, 'Plus Jakarta Sans', sans-serif); color: #fff; }
.llg-av__name { font: 600 .75rem/1.15 var(--font-body, sans-serif); letter-spacing: .01em; white-space: nowrap; }
.llg-av--all { --c: #ef4444; }
.llg-av--all .llg-av__pic { background: #0a0a0a; }
.llg-av:hover { color: #fff; }
.llg-av:hover .llg-av__pic { box-shadow: 0 0 0 1px rgba(255, 255, 255, .55); }
.llg-av[aria-current="page"] { color: #fff; }
.llg-av[aria-current="page"] .llg-av__name { font-weight: 800; }
.llg-av[aria-current="page"] .llg-av__pic { box-shadow: 0 0 0 2px #0a0a0a, 0 0 0 4px var(--c, #ef4444);
    filter: drop-shadow(0 0 9px color-mix(in srgb, var(--c, #ef4444) 75%, transparent)); }
.llg-av:focus-visible { outline: none; }
.llg-av:focus-visible .llg-av__pic { outline: 2px solid #fff; outline-offset: 6px; }
.llg-av:focus-visible .llg-av__name { color: #fff; }
.llg-seg { flex: none; display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .03); }
.llg-seg button { height: 30px; padding: 0 13px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; white-space: nowrap;
    font: 600 .8125rem/1 var(--font-body, sans-serif); color: rgba(255, 255, 255, .66); transition: color var(--ll-dur-fast, 150ms) ease, background-color var(--ll-dur-fast, 150ms) ease; }
.llg-seg button:hover { color: #fff; }
.llg-seg button[aria-pressed="true"] { color: #fff; background: linear-gradient(#ef4444, #ef4444) 50% calc(100% - 3px) / 18px 2px no-repeat, rgba(255, 255, 255, .12); }
.llg-seg button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
@media (max-width: 699px) {
    .llg-bar { --av-big: 52px; --av-small: 38px; }
    .llg-who { gap: 6px; }
    .llg-av { gap: 6px; min-width: calc(var(--av-big) + 8px); }
    .llg-av__name { font-size: .6875rem; }
    .llg-bar__in { padding-bottom: 10px; }
    .llg-seg button { height: 28px; padding: 0 11px; }
}

/* =====================================================================================================================
   THE ROOMS: one per shoot. Every row of a room is one height and every picture is whole at its own shape (justified:
   each cell grows by its own --ar, so a row's pictures share one height; the last row keeps its height).
   ================================================================================================================== */
.llg-rooms { padding-top: clamp(8px, 2vw, 20px); }
.llg-room { margin-top: clamp(32px, 4.5vw, 60px); }
.llg-room[hidden] { display: none; }
.llg-room__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 0 var(--llui-gutter, 16px); margin-bottom: 18px; }
.llg-room__title { margin: 0; font: 800 clamp(1.55rem, 2.6vw, 2.25rem)/1.1 var(--font-heading, 'Plus Jakarta Sans', sans-serif); letter-spacing: -.03em; color: #fff; }
.llg-room__line { flex-basis: 100%; margin: 0; max-width: 62ch; font: 400 1rem/1.6 var(--font-body, sans-serif); color: var(--llg-ink); }
.llg-pill-link a { text-decoration: none; color: #fff; }
.llg-pill-link:hover { border-color: rgba(239, 68, 68, .7); }

.llg-grid { --h: clamp(190px, 21vw, 340px); display: flex; flex-wrap: wrap; gap: clamp(8px, 1vw, 14px); list-style: none; margin: 0; padding: 0 var(--llui-gutter, 16px); }
.llg-grid::after { content: ""; flex: 999 1 0; }
.llg-cell { position: relative; flex: var(--ar) 1 calc(var(--h) * var(--ar)); max-width: calc(var(--h) * var(--ar) * 1.65); min-width: 0; }
.llg-cell[hidden] { display: none; }
.llg-cell.is-in { animation: llg-in 380ms var(--ll-ease-settle, cubic-bezier(.2, .8, .2, 1)) both; }
@keyframes llg-in { from { opacity: 0; transform: translateY(8px); } }
.llg-card { position: relative; display: block; text-decoration: none; color: inherit; cursor: zoom-in; }
.llg-card.is-locked { cursor: pointer; }
.llg-card__pic { position: relative; display: block; width: 100%; aspect-ratio: var(--ar); overflow: hidden; border-radius: var(--ll-radius-tile, 6px);
    background: #141416; outline: 1px solid rgba(255, 255, 255, .06); outline-offset: -1px;
    transition: transform var(--ll-dur, 240ms) var(--ll-ease-settle, ease); }
.llg-card__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }   /* the box is the picture's own shape: whole */
/* the seam under the picture, drawn on hover and focus (LL-UI's tile language) */
.llg-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; border-radius: 2px; transform: scaleX(0); transform-origin: left;
    background: linear-gradient(90deg, #ef4444 0, #ef4444 calc(100% - 10px), rgba(239, 68, 68, .3) 100%);
    filter: drop-shadow(0 0 5px rgba(239, 68, 68, .75)); transition: transform 320ms var(--ll-ease-handoff, ease); }
@media (hover: hover) and (pointer: fine) {
    .llg-card:hover .llg-card__pic { transform: translateY(-4px); }
    .llg-card:hover::after { transform: scaleX(1); }
}
.llg-card:focus-visible { outline: none; }
.llg-card:focus-visible .llg-card__pic { outline: 2px solid #fff; outline-offset: 3px; }
.llg-card:focus-visible::after { transform: scaleX(1); }
/* her name, bottom LEFT (the right corner is the mark's) */
.llg-card__who { position: absolute; left: 8px; bottom: 8px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 5px 8px; border-radius: 999px;
    background: rgba(8, 8, 9, .72); font: 700 .75rem/1 var(--font-body, sans-serif); color: #fff; letter-spacing: .01em; pointer-events: none; }
.llg-card__who::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c, #ef4444); flex: none; }
/* a locked picture: only its blur is in the page; the way in sits in the middle */
.llg-lock { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px;
    background: rgba(8, 8, 9, .66); border: 1px solid rgba(239, 68, 68, .6); white-space: nowrap;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font: 700 .75rem/1 var(--font-body, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.llg-lock svg { width: 14px; height: 14px; }
.llg-card.is-locked:hover .llg-lock { border-color: #ef4444; }
.llg-card.is-locked { container-type: inline-size; }
@container (max-width: 170px) { .llg-lock span { display: none; } .llg-lock { padding: 9px; } }
@media (max-width: 699px) {
    .llg-grid { --h: clamp(140px, 40vw, 220px); gap: 8px; }
    .llg-cell { max-width: calc(var(--h) * var(--ar) * 2.2); }
    .llg-card__who { font-size: .6875rem; padding: 4px 8px 4px 7px; }
    .llg-lock span { display: none; }
    .llg-lock { padding: 9px; }
}
.llg-empty { margin: 48px var(--llui-gutter, 16px) 0; font: 400 1rem/1.6 var(--font-body, sans-serif); color: var(--llg-ink); }

/* ---- THE HEART AND SAVE TO: the shared client's buttons (ll-library.css draws them, as on My LustLit); this only
   places them: top right of the picture, the heart above Save to, never near its bottom-right corner (the mark's) ---- */
.llg-acts { position: absolute; top: 8px; right: 8px; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.llg-acts .lll-heart, .llg-acts .lll-save { transition: background-color var(--ll-dur-fast, 150ms) ease, border-color var(--ll-dur-fast, 150ms) ease, opacity var(--ll-dur-fast, 150ms) ease; }
/* on a computer both wait for the pointer (a heart already given stays); on a phone or a tablet the picture carries the
   heart alone, always there, and Save to is one tap away in the viewer: never a cluster of buttons on a picture */
@media (hover: hover) and (pointer: fine) {
    .llg-acts .lll-heart[aria-pressed="false"], .llg-acts .lll-save { opacity: 0; }
    .llg-cell:hover .llg-acts > *, .llg-cell:focus-within .llg-acts > * { opacity: 1; }
}
@media (hover: none), (pointer: coarse) {
    .llg-acts .lll-save { display: none; }
}
@media (max-width: 699px) {
    .llg-acts { top: 6px; right: 6px; }
    .llg-acts .lll-heart { width: 34px; height: 34px; }
    .llg-acts .lll-heart svg { width: 16px; height: 16px; }
}
/* the show's placard: both stand in its row of buttons, beside See her gallery */
.llg-placard .lll-heart, .llg-placard .lll-save { width: 48px; height: 48px; background: rgba(255, 255, 255, .08); }
.llg-placard .lll-heart:hover, .llg-placard .lll-save:hover { background: rgba(255, 255, 255, .14); }
.llg-placard .lll-heart svg { width: 21px; height: 21px; }
.llg-placard .lll-save svg { width: 19px; height: 19px; }
/* the client's toast moves into the viewer while it is open: its links keep their red there (.llg a inherits white) */
.llg .lll-toast__link { color: #ef4444; }
.llg .lll-toast__link:hover { color: #fff; }

/* =====================================================================================================================
   THE WAY IN (a visitor or a free member): the line all censored art says, and Join. Never a price.
   ================================================================================================================== */
.llg-join { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px;
    margin: clamp(56px, 7vw, 96px) var(--llui-gutter, 16px) 0; padding: clamp(24px, 4vw, 44px); border-radius: var(--ll-radius-card, 12px);
    background: #0d090b; border: 1px solid rgba(239, 68, 68, .38); }
.llg-join__title { margin: 0; font: 800 clamp(1.6rem, 3vw, 2.4rem)/1.05 var(--font-heading, 'Plus Jakarta Sans', sans-serif); letter-spacing: -.03em; color: #fff; }
.llg-join__line { margin: 8px 0 0; max-width: 52ch; font: 400 1rem/1.6 var(--font-body, sans-serif); color: var(--llg-ink); }

/* =====================================================================================================================
   THE VIEWER: one picture WHOLE, as big as the screen allows, on black; who she is and her line under it; the heart,
   Save to, full screen and close at the top right; the arrows at the sides. No count (no counts, 10-07).
   ================================================================================================================== */
.llg-viewer { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; inset: 0; background: #000; color: #fff; overflow: hidden; }
.llg-viewer::backdrop { background: #000; }
.llg-viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); }   /* one column, the screen's width: a long name shortens, the tools stay on it */
.llg-viewer[open] .llg-v__stage { animation: llg-fade 220ms ease both; }
@keyframes llg-fade { from { opacity: 0; } }
.llg-v__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 6px 16px; min-height: 60px; }
.llg-v__who { display: inline-flex; align-items: center; gap: 9px; min-width: 0; font: 700 .9375rem/1.2 var(--font-body, sans-serif); color: #fff; text-decoration: none; }
.llg-v__who::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c, #ef4444); filter: drop-shadow(0 0 5px var(--c, #ef4444)); flex: none; }
.llg-v__who small { font-weight: 500; color: rgba(255, 255, 255, .6); font-size: .875rem; }
.llg-v__who span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* the tools always keep their room */
.llg-v__who:hover span { text-decoration: underline; text-underline-offset: 3px; }
.llg-v__tools { display: flex; align-items: center; gap: 8px; flex: none; }
.llg-v__tools .lll-heart, .llg-v__tools .lll-save { width: 44px; height: 44px; background: rgba(255, 255, 255, .08); }   /* the row's own size */
.llg-v__tools .lll-heart:hover, .llg-v__tools .lll-save:hover { background: rgba(255, 255, 255, .16); }
.llg-v__tools .lll-heart svg, .llg-v__tools .lll-save svg { width: 20px; height: 20px; }
.llg-v__btn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; cursor: pointer; color: #fff;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); transition: background-color var(--ll-dur-fast, 150ms) ease; }
.llg-v__btn:hover { background: rgba(255, 255, 255, .16); }
.llg-v__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.llg-v__btn svg { width: 20px; height: 20px; }
.llg-v__btn[hidden] { display: none; }
.llg-v__stage { position: relative; min-height: 0; touch-action: pinch-zoom; }
/* WHOLE, always: centred in the stage at its own shape, never larger than the room it has (a grid track's percentage
   height is not definite for an image inside it, which let a square picture run past the bottom and crop the mark) */
.llg-v__img { position: absolute; top: 0; bottom: 0; left: 76px; right: 76px; margin: auto; display: block; width: auto; height: auto;
    max-width: calc(100% - 152px); max-height: 100%; user-select: none; -webkit-user-drag: none; transition: opacity 180ms ease; }
.llg-viewer.is-loading .llg-v__img { opacity: .35; }
.llg-v__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.llg-v__nav--prev { left: 14px; }
.llg-v__nav--next { right: 14px; }
.llg-v__cap { min-height: 56px; padding: 10px 16px 16px; text-align: center; font: italic 400 1rem/1.5 var(--font-body, sans-serif); color: rgba(255, 255, 255, .82); }
.llg-v__cap:empty { min-height: 20px; padding: 0; }
.llg-viewer.ui-off .llg-v__top, .llg-viewer.ui-off .llg-v__nav, .llg-viewer.ui-off .llg-v__cap { opacity: 0; pointer-events: none; }
.llg-v__top, .llg-v__nav, .llg-v__cap { transition: opacity 200ms ease; }
@media (max-width: 699px) {
    .llg-v__img { left: 6px; right: 6px; max-width: calc(100% - 12px); }
    .llg-v__nav { display: none; }
    .llg-v__who small { display: none; }
}

/* HER GALLERY, ON HER PAGE: the card her Worlds page carries instead of a grid lives in the theme's wiki.css since the
   launch (2026-10-09), beside the page it sits on. */

/* ---- THE PROOF's own strip (admin only; never shipped) ----------------------------------------------------------------- */
.llg-proofbar { position: fixed; left: 12px; bottom: 12px; z-index: 70; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: calc(100vw - 24px); padding: 6px;
    border-radius: 14px; background: rgba(14, 14, 16, .92); border: 1px solid rgba(255, 255, 255, .14); font: 600 .75rem/1 var(--font-body, sans-serif); }
.llg-proofbar span { padding: 6px 8px; color: #ef4444; letter-spacing: .08em; text-transform: uppercase; }
.llg-proofbar a { padding: 7px 10px; border-radius: 999px; color: rgba(255, 255, 255, .78); text-decoration: none; }
.llg-proofbar a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.llg-proofbar a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .14); }
@media (max-width: 699px) { .llg-proofbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; font-size: .6875rem; padding: 4px; } .llg-proofbar a { white-space: nowrap; padding: 6px 8px; } }

@media (prefers-reduced-motion: reduce) {                                    /* the heart's pop: ll-library.css */
    .llg-cell.is-in, .llg-viewer[open] .llg-v__stage { animation: none; }
    .llg-card__pic, .llg-card::after, .llg-bar, .llg-av__pic { transition: none; }
    .llg-card:hover .llg-card__pic { transform: none; }
}