/* LJL Galleries — Virtual Gallery */

/* The site's own fonts (css/main.scss), from the same files: Big Caslon for titles, Lato for text.
   As on the site, Lato's 400 is its light cut. */
@font-face { font-family: "big-caslon-fb"; src: url("../css/fonts/big-caslon-fb-normal.woff2") format("woff2"), url("../css/fonts/big-caslon-fb-normal.woff") format("woff"); font-display: swap; font-style: normal; font-weight: 700; }
@font-face { font-family: "big-caslon-fb"; src: url("../css/fonts/big-caslon-fb-normal-light.woff2") format("woff2"), url("../css/fonts/big-caslon-fb-normal.woff") format("woff"); font-display: swap; font-style: normal; font-weight: 400; }
@font-face { font-family: "big-caslon-fb"; src: url("../css/fonts/big-caslon-fb-light.woff2") format("woff2"), url("../css/fonts/big-caslon-fb-light.woff") format("woff"); font-display: swap; font-style: italic; font-weight: 400; }
@font-face { font-family: "lato"; src: url("../css/fonts/lato-light.woff2") format("woff2"), url("../css/fonts/lato-light.woff") format("woff"); font-display: swap; font-style: normal; font-weight: 400; }
@font-face { font-family: "lato"; src: url("../css/fonts/lato-bold-normal.woff2") format("woff2"), url("../css/fonts/lato-bold-normal.woff") format("woff"); font-display: swap; font-style: normal; font-weight: 700; }
@font-face { font-family: "lato"; src: url("../css/fonts/lato.woff2") format("woff2"), url("../css/fonts/lato.woff") format("woff"); font-display: swap; font-style: italic; font-weight: 400; }

/* The site's colors (Content/base/_color.scss): near-black and white at its standard opacities, with
   its success and danger colors; no other accent. */
:root {
    --vg-bg: #0c0c0c;
    --vg-text: #ffffff;
    --vg-text-rgb: 255, 255, 255;
    --vg-muted: rgba(255, 255, 255, 0.6);
    --vg-line: rgba(255, 255, 255, 0.18);
    --vg-glass: rgba(12, 12, 12, 0.62);
    --vg-label: rgba(255, 255, 255, 0.6);      /* small uppercase labels, as the site's section context */
    --vg-focus: rgba(255, 255, 255, 0.7);      /* keyboard focus outlines and focused fields */
    --vg-success: #38A169;
    --vg-danger: #E53E3E;
    --vg-danger-text: rgba(255, 100, 100, 0.9);  /* the danger color, readable on dark */
    --vg-serif: 'big-caslon-fb', Georgia, serif;
    --vg-sans: 'lato', 'Helvetica Neue', Arial, sans-serif;
    --vg-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    background: var(--vg-bg);
    color: var(--vg-text);
    font-family: var(--vg-sans);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

#vg-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    outline: none;
    touch-action: none;
    cursor: grab;
}
#vg-canvas.is-dragging { cursor: grabbing; }
#vg-canvas.is-pointer { cursor: pointer; }

button { font: inherit; color: inherit; }

svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vg-eyebrow {
    display: block;
    font-family: var(--vg-sans);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--vg-label);
}

[hidden] { display: none !important; }

/* ── Loader ─────────────────────────────────────────────────────────────── */
.vg-loader {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 24px;
    background: radial-gradient(ellipse at 50% 60%, #1a1a1a 0%, var(--vg-bg) 70%);
    transition: opacity 0.9s var(--vg-ease), visibility 0.9s;
}
.vg-loader.is-hidden { opacity: 0; visibility: hidden; }

/* The space's picture, faint and softened behind the words, fading in once it arrives. */
.vg-loader-picture {
    position: absolute;
    inset: -24px;            /* the blur would leave a light edge otherwise */
    width: calc(100% + 48px);
    height: calc(100% + 48px);
    object-fit: cover;
    filter: blur(8px);
    opacity: 0.24;
    animation: vg-fade-in 1.6s var(--vg-ease) both;
    pointer-events: none;
}
@keyframes vg-fade-in { from { opacity: 0; } }

.vg-loader-inner {
    position: relative;      /* above the picture */
    width: min(360px, 100%);
    text-align: center;
}
.vg-loader-title {
    margin: 0.6rem 0 2rem;
    font-family: var(--vg-serif);
    font-weight: 700;
    font-size: clamp(2rem, 6vw, 2.8rem);
    letter-spacing: 0.01em;
}
.vg-progress {
    position: relative;
    height: 1px;
    background: var(--vg-line);
    overflow: hidden;
    transition: opacity 0.6s ease;
}
.vg-progress.is-done { opacity: 0; }   /* loaded: the Enter button takes over */
.vg-progress span {
    position: absolute;
    inset: 0;
    background: var(--vg-text);
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 0.3s ease-out;
}
.vg-progress-label {
    display: block;
    margin-top: 1rem;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--vg-muted);
}
/* The site's primary button (btn btn-primary): solid white, empties and lifts on hover. */
.vg-enter {
    margin-top: 1.6rem;
    padding: 0.9rem 2rem;
    background: var(--vg-text);
    border: 1px solid var(--vg-text);
    border-radius: 0;
    color: var(--vg-bg);
    font-family: var(--vg-sans);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    animation: vg-fade-up 0.8s var(--vg-ease) backwards;   /* not "both": the hover lift would be held back by the end frame */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.vg-enter:hover {
    background: transparent;
    color: var(--vg-text);
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}
.vg-loader-error { margin-top: 1.4rem; font-size: 0.9rem; line-height: 1.6; color: var(--vg-muted); }
.vg-loader-error a { color: var(--vg-text); text-decoration: underline; text-underline-offset: 3px; }
.vg-loader-error a:focus-visible { outline: 1px solid var(--vg-focus); outline-offset: 2px; }
.vg-retry { margin-top: 1.2rem; }

@keyframes vg-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

/* ── Scroll bars ─────────────────────────────────────────────────────────── */
/* As the site's own (css/shop.scss): thin, a faint track and a soft thumb that brightens on hover. */
.vg-art-body::-webkit-scrollbar, .vg-chat-log::-webkit-scrollbar, .vg-space-choices::-webkit-scrollbar { width: 6px; }
.vg-art-body::-webkit-scrollbar-track, .vg-chat-log::-webkit-scrollbar-track, .vg-space-choices::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}
.vg-art-body::-webkit-scrollbar-track { margin: 14px 0; }   /* clear of the popup's corners */
.vg-art-body::-webkit-scrollbar-thumb, .vg-chat-log::-webkit-scrollbar-thumb, .vg-space-choices::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}
.vg-art-body::-webkit-scrollbar-thumb:hover, .vg-chat-log::-webkit-scrollbar-thumb:hover, .vg-space-choices::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}
/* Firefox has no ::-webkit-scrollbar. (Not for other browsers: in Chrome these would replace the rules above.) */
@supports (-moz-appearance: none) {
    .vg-art-body, .vg-chat-log, .vg-space-choices {
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.05);
    }
}

/* ── HUD ────────────────────────────────────────────────────────────────── */
.vg-hud {
    position: fixed;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    animation: vg-fade-up 1s var(--vg-ease) both;
}
.vg-hud > * { pointer-events: auto; }

/* Soft scrim so the brand and hints stay legible against the bright walls */
.vg-hud::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 140px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0));
    pointer-events: none;
}

.vg-brand {
    position: absolute;
    top: max(20px, env(safe-area-inset-top));
    left: max(22px, env(safe-area-inset-left));
    pointer-events: none;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}
.vg-brand-title {
    display: block;
    /* A long space name is cut short, clear of the people count on the right. */
    max-width: min(420px, 50vw);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: 0.25rem;
    font-family: var(--vg-serif);
    font-weight: 700;
    font-size: 1.3rem;
}

.vg-hint {
    position: absolute;
    top: max(24px, env(safe-area-inset-top));
    left: 50%;
    max-width: calc(100% - 32px);
    padding: 0.65rem 1.1rem;
    transform: translateX(-50%);
    background: var(--vg-glass);
    border: 1px solid var(--vg-line);
    border-radius: 999px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--vg-muted);
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
}
.vg-hint.is-visible { opacity: 1; }

.vg-dock {
    position: absolute;
    bottom: max(20px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 5px;
    background: var(--vg-glass);
    border: 1px solid var(--vg-line);
    border-radius: 999px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.vg-tour { display: flex; align-items: center; gap: 2px; }
.vg-tour-label {
    min-width: 92px;
    padding: 0 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;
    color: var(--vg-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.vg-sep { width: 1px; height: 22px; margin: 0 6px; background: var(--vg-line); }

.vg-btn {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
}
.vg-btn:hover, .vg-btn:focus-visible { background: rgba(255, 255, 255, 0.12); color: #fff; }
.vg-btn:focus-visible, .vg-marker:focus-visible { outline: 1px solid var(--vg-focus); outline-offset: 2px; }

/* "⋯" menu (phones only, below): elsewhere its wrappers don't show and the buttons sit in the bar. */
.vg-more, .vg-more-menu { display: contents; }
.vg-more-toggle, .vg-btn-text { display: none; }
.vg-more-toggle svg { stroke-width: 2.6; }

/* Admins only (capture.js): bottom left, on screens wide enough for a 16:9 view. */
.vg-capture {
    position: absolute;
    left: max(22px, env(safe-area-inset-left));
    bottom: max(20px, env(safe-area-inset-bottom));
    padding: 0.7rem 1.1rem;
    background: var(--vg-glass);
    border: 1px dashed rgba(255, 255, 255, 0.4);
    color: var(--vg-text);
    font-family: var(--vg-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    pointer-events: auto;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background 0.3s ease, color 0.3s ease;
}
.vg-capture:hover:not(:disabled), .vg-capture:focus-visible { background: var(--vg-text); color: var(--vg-bg); }
.vg-capture:focus-visible { outline: 1px solid var(--vg-focus); outline-offset: 2px; }
.vg-capture:disabled { cursor: progress; opacity: 0.7; }
@media (max-width: 820px) { .vg-capture { display: none; } }

.vg-ico-person { display: none; }
.is-first-person .vg-ico-eye { display: none; }
.is-first-person .vg-ico-person { display: block; }

/* ── Presence ─────────────────────────────────────────────────────────── */
.vg-people {
    position: absolute;
    top: max(22px, env(safe-area-inset-top));
    right: max(22px, env(safe-area-inset-right));
    display: flex;
    align-items: center;
    gap: 8px;
}
.vg-presence {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.9rem;
    background: var(--vg-glass);
    border: 1px solid var(--vg-line);
    border-radius: 999px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    pointer-events: none;
    animation: vg-fade-up 0.6s var(--vg-ease) both;
}
.vg-presence-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--vg-success);
    box-shadow: 0 0 0 0 rgba(56, 161, 105, 0.6);
    animation: vg-pulse 2.4s ease-out infinite;
}
.vg-name-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 220px;
    padding: 0.42rem 0.9rem 0.42rem 0.7rem;
    background: var(--vg-glass);
    border: 1px solid var(--vg-line);
    border-radius: 999px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    animation: vg-fade-up 0.6s var(--vg-ease) both;
    transition: background 0.25s ease, border-color 0.25s ease;
}
.vg-name-chip svg { flex: none; width: 16px; height: 16px; }
.vg-name-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-name-chip:hover, .vg-name-chip:focus-visible { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.4); }
.vg-name-chip:focus-visible { outline: 1px solid var(--vg-focus); outline-offset: 2px; }

@keyframes vg-pulse {
    0% { box-shadow: 0 0 0 0 rgba(56, 161, 105, 0.55); }
    70%, 100% { box-shadow: 0 0 0 8px rgba(56, 161, 105, 0); }
}

/* ── Chat ───────────────────────────────────────────────────────────────── */
.vg-chat-toggle { position: relative; }
.vg-chat-badge {
    position: absolute;
    top: 4px;
    right: 3px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--vg-text);
    color: var(--vg-bg);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}
.vg-chat {
    position: absolute;
    left: max(22px, env(safe-area-inset-left));
    bottom: calc(max(20px, env(safe-area-inset-bottom)) + 66px);
    width: min(340px, calc(100% - 44px));
    display: flex;
    flex-direction: column;
    background: rgba(12, 12, 12, 0.78);
    border: 1px solid var(--vg-line);
    border-radius: 14px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: vg-fade-up 0.3s var(--vg-ease) both;
}
.vg-chat-head { display: flex; align-items: center; gap: 0.6rem; padding: 10px 8px 6px 14px; }
.vg-chat-head .vg-eyebrow { font-size: 0.62rem; }
.vg-chat-note { flex: 1; font-size: 0.68rem; color: var(--vg-muted); }
.vg-chat-close {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--vg-muted);
    cursor: pointer;
}
.vg-chat-close:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.vg-chat-close svg { width: 16px; height: 16px; }
.vg-chat-log {
    max-height: 240px;
    min-height: 60px;
    margin: 0;
    padding: 2px 14px 8px;
    overflow-y: auto;
    list-style: none;
    font-size: 0.86rem;
    line-height: 1.45;
}
.vg-chat-log li { margin: 0 0 0.4rem; overflow-wrap: anywhere; }
.vg-chat-log .vg-chat-empty, .vg-chat-log .vg-chat-system { color: var(--vg-muted); font-size: 0.78rem; font-style: italic; }
.vg-chat-name {
    margin-right: 0.35rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--vg-text);
    font-weight: 700;
    font-size: inherit;
    cursor: pointer;
}
.vg-chat-name:hover { text-decoration: underline; }
.vg-chat-name.is-self { color: rgba(255, 255, 255, 0.7); cursor: default; text-decoration: none; }
.vg-chat-time { margin-left: 0.35rem; font-size: 0.68rem; color: rgba(255, 255, 255, 0.35); }
.vg-chat-log a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.vg-chat-error { min-height: 0; margin: 0 14px; font-size: 0.75rem; color: var(--vg-danger-text); }
.vg-chat-error:not(:empty) { margin-bottom: 6px; }
.vg-chat-form { display: flex; gap: 4px; padding: 6px; border-top: 1px solid var(--vg-line); }
.vg-chat-form input {
    flex: 1;
    min-width: 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--vg-text);
    font: 400 0.9rem var(--vg-sans);
    outline: none;
}
.vg-chat-form input:focus { border-color: var(--vg-focus); }
.vg-chat-form .vg-btn { width: 40px; height: 40px; }
@media (max-width: 640px) {
    .vg-chat { left: 12px; right: 12px; width: auto; bottom: calc(max(20px, env(safe-area-inset-bottom)) + 62px); }
    .vg-chat-log { max-height: 34vh; max-height: 34dvh; }
}

/* ── Emotes ─────────────────────────────────────────────────────────────── */
.vg-emote { position: relative; }
.vg-emote-menu {
    position: absolute;
    bottom: calc(100% + 14px);
    left: 50%;
    display: flex;
    gap: 4px;
    padding: 6px;
    translate: -50% 0;   /* not transform: the pop-in animation uses that */
    background: rgba(12, 12, 12, 0.82);
    border: 1px solid var(--vg-line);
    border-radius: 16px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: vg-fade-up 0.3s var(--vg-ease) both;
}
.vg-emote-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 64px;
    padding: 8px 10px 7px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.vg-emote-item:hover, .vg-emote-item:focus-visible { background: rgba(255, 255, 255, 0.12); color: #fff; outline: none; }
.vg-emote-emoji { font-size: 1.6rem; line-height: 1; letter-spacing: 0; }

/* ── Touch joystick ─────────────────────────────────────────────────────── */
.vg-joystick {
    position: absolute;
    left: max(28px, env(safe-area-inset-left));
    bottom: calc(max(20px, env(safe-area-inset-bottom)) + 72px);
    width: 112px;
    height: 112px;
    border-radius: 50%;
    border: 1px solid var(--vg-line);
    background: rgba(12, 12, 12, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    touch-action: none;
    display: none;
}
.vg-joystick span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
@media (pointer: coarse) {
    .vg-joystick { display: block; }
    /* Chat sits where the joystick is; there's no walking while typing anyway. */
    .vg-hud.is-chatting .vg-joystick { display: none; }
}

/* ── Artwork marker ─────────────────────────────────────────────────────── */
.vg-marker {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 11;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    background: rgba(12, 12, 12, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
    animation: vg-pop 0.35s var(--vg-ease) both;
}
.vg-marker svg { width: 18px; height: 18px; stroke-width: 1.8; }
@keyframes vg-pop {
    from { opacity: 0; transform: scale(0.6); }
    to { opacity: 1; transform: none; }
}

/* ── Artwork details popup ──────────────────────────────────────────────── */
.vg-art {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    padding: 32px;
    background: rgba(5, 5, 5, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s;
}
.vg-art.is-open { opacity: 1; visibility: visible; transition-duration: 0.4s, 0s; }

.vg-art-card {
    position: relative;
    width: min(1040px, 100%);
    max-height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    /* The row may be shorter than the details: when the window (or the exhibition page's frame) is
       too short for them all, the details column scrolls instead of being cut off. */
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
    background: #121212;
    border: 1px solid var(--vg-line);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
    transform: translateY(14px) scale(0.98);
    transition: transform 0.5s var(--vg-ease);
}
.vg-art.is-open .vg-art-card { transform: none; }

.vg-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--vg-line);
    border-radius: 50%;
    background: rgba(12, 12, 12, 0.6);
    cursor: pointer;
    transition: background 0.25s ease;
}
.vg-close:hover { background: rgba(255, 255, 255, 0.14); }

.vg-art-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 48px;
    border: 0;
    background: radial-gradient(ellipse at 50% 45%, #1f1f1f 0%, #141414 75%);
    cursor: zoom-in;
}
.vg-art-image img {
    max-width: 100%;
    max-height: min(68vh, 620px);
    object-fit: contain;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}
.vg-art-enlarge {
    position: absolute;
    left: 18px;
    bottom: 14px;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--vg-muted);
    transition: color 0.25s ease;
}
.vg-art-enlarge svg { width: 14px; height: 14px; }
.vg-art-image:hover .vg-art-enlarge { color: #fff; }

.vg-art-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    padding: 40px 36px 22px;
}
.vg-art-body h2 {
    margin: 0.6rem 0 0.2rem;
    padding-right: 36px;
    font-family: var(--vg-serif);
    font-weight: 700;
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    line-height: 1.2;
}
/* Like (likes.js): one of the popup's row of buttons, with a heart and the count */
.vg-like[hidden] { display: none; }
.vg-like svg { transition: transform 0.2s ease, fill 0.2s ease; }
.vg-like.is-liked { color: var(--vg-danger); border-color: var(--vg-danger); }
.vg-like.is-liked svg { fill: currentColor; transform: scale(1.1); }
.vg-like-count { letter-spacing: 0.05em; opacity: 0.8; }
.vg-like-count:empty { display: none; }
/* reCAPTCHA for likes: Google's floating badge would cover the gallery's controls, so it's hidden and
   the popup says reCAPTCHA is used instead (#vgLikeNote), as Google's terms allow. */
.grecaptcha-badge { visibility: hidden; }
.vg-art-note { margin: 0.6rem 0 0; font-size: 0.7rem; line-height: 1.5; color: var(--vg-muted); }
.vg-art-note[hidden] { display: none; }
.vg-art-note a { color: inherit; }
.vg-art-year { margin: 0 0 1.3rem; font-family: var(--vg-serif); font-style: italic; color: var(--vg-muted); }
.vg-art-desc { margin: 0 0 1.6rem; font-size: 0.92rem; line-height: 1.75; color: rgba(255, 255, 255, 0.82); white-space: pre-line; }
.vg-art-year:empty, .vg-art-desc:empty { display: none; }
/* No year, description or details: the buttons would sit right under the title, so it keeps the gap they leave. */
.vg-art-body h2:has(+ .vg-art-year:empty + .vg-art-desc:empty + .vg-art-specs:empty) { margin-bottom: 1.8rem; }

.vg-art-specs {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0;
    margin: 0 0 1.8rem;
    font-size: 0.85rem;
    border-top: 1px solid var(--vg-line);
}
.vg-art-specs:empty { display: none; }
.vg-art-specs dt, .vg-art-specs dd {
    margin: 0;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--vg-line);
}
.vg-art-specs dt {
    padding-right: 1.4rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--vg-muted);
    white-space: nowrap;
    display: flex;
    align-items: center;
}

/* The popup's buttons: Add to Cart across the top, the others sharing a row of equal buttons below. */
.vg-art-actions { display: flex; flex-direction: column; gap: 10px; }
.vg-art-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 10px; }
.vg-art-actions .vg-cta { justify-content: center; }
.vg-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.vg-cta svg { width: 16px; height: 16px; }
/* As the site's buttons (Content/base/buttons.scss): the outline one fills white, the solid one empties,
   and both lift a little. */
.vg-cta:hover:not(:disabled) {
    background: var(--vg-text);
    border-color: var(--vg-text);
    color: var(--vg-bg);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
.vg-cta-primary { background: var(--vg-text); border-color: var(--vg-text); color: var(--vg-bg); }
.vg-cta-primary:hover:not(:disabled) { background: transparent; color: var(--vg-text); }
.vg-close:focus-visible, .vg-art-image:focus-visible { outline: 1px solid var(--vg-focus); outline-offset: 2px; }
/* Keyboard focus on the text buttons: a ring a little way out, the button itself unchanged (it doesn't
   take on the hover look, which a button focused for the keyboard would otherwise keep showing). */
.vg-enter:focus-visible, .vg-cta:focus-visible, .vg-shop .shopify-buy__btn:focus-visible {
    outline: 2px solid var(--vg-focus);
    outline-offset: 4px;
}
/* Add to Cart: Shopify's own button (shop.js), drawn like our primary button, across the full width */
.vg-shop, .vg-shop .shopify-buy__product, .vg-shop .shopify-buy__btn-wrapper { width: 100%; margin: 0; padding: 0; }
.vg-shop .vg-cta { width: 100%; }
.vg-shop .shopify-buy__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 0.85rem 1.5rem;
    line-height: 16px;           /* the height of the icons */
    border-radius: 0;
    border: 1px solid var(--vg-text);
    background: var(--vg-text);
    color: var(--vg-bg);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.vg-shop .shopify-buy__btn svg, .vg-shop .vg-cta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.vg-shop .shopify-buy__btn:hover:not([disabled]) {
    background: transparent;
    color: var(--vg-text);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
.vg-shop .shopify-buy__btn-disabled, .vg-shop .shopify-buy__btn[disabled] { opacity: 0.5; cursor: default; }
.vg-shop .vg-cta[disabled] { opacity: 0.6; cursor: progress; }
.vg-art-link {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--vg-muted);
    text-decoration: underline;
    text-underline-offset: 4px;
}
.vg-art-link:hover { color: #fff; }

.vg-art-toast {
    min-height: 1.2em;
    margin: 0.8rem 0 0;
    font-size: 0.78rem;
    color: var(--vg-text);
}

.vg-art-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--vg-line);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--vg-muted);
    font-variant-numeric: tabular-nums;
}

/* ── Dialogs: visitor name, portal confirmation ──────────────────────────── */
.vg-dialog {
    position: fixed;
    inset: 0;
    z-index: 25;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(5, 5, 5, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s;
}
/* Overlays become visible at once when opening (so their fields can take focus straight
   away) and stay visible while fading out. */
.vg-dialog.is-open { opacity: 1; visibility: visible; transition-duration: 0.4s, 0s; }
.vg-dialog-card {
    width: min(480px, 100%);
    padding: 34px 32px 28px;
    background: #121212;
    border: 1px solid var(--vg-line);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
    transform: translateY(12px);
    transition: transform 0.5s var(--vg-ease);
}
.vg-dialog.is-open .vg-dialog-card { transform: none; }
.vg-dialog-card h2 {
    margin: 0.55rem 0 0.7rem;
    font-family: var(--vg-serif);
    font-weight: 700;
    font-size: 1.7rem;
    line-height: 1.2;
}
.vg-dialog-intro { margin: 0 0 1.4rem; font-size: 0.9rem; line-height: 1.65; color: var(--vg-muted); }
.vg-name-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--vg-muted);
}
.vg-name-input {
    width: 100%;
    padding: 0.85rem 1rem;
    background: #0c0c0c;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 0;
    color: var(--vg-text);
    font: 400 1rem var(--vg-sans);
    outline: none;
    transition: border-color 0.25s ease;
}
.vg-name-input::placeholder { color: rgba(255, 255, 255, 0.38); }
.vg-name-input:focus { border-color: var(--vg-focus); }
.vg-name-error { min-height: 1.3em; margin: 0.55rem 0 1rem; font-size: 0.8rem; color: var(--vg-danger-text); }
.vg-dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.vg-dialog-actions .vg-cta { flex: 1 1 0; justify-content: center; padding-inline: 1rem; white-space: nowrap; }
.vg-dialog-actions .vg-cta[disabled] { opacity: 0.5; cursor: wait; }
@media (max-width: 480px) {
    .vg-dialog-card { padding: 28px 22px 22px; }
    .vg-dialog-actions .vg-cta { flex-basis: 100%; }
}

/* ── Portal transition ──────────────────────────────────────────────────── */
.vg-transition {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-content: center;
    gap: 0.6rem;
    text-align: center;
    background: radial-gradient(ellipse at 50% 55%, #1c1c1c 0%, #0c0c0c 70%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.6s ease, visibility 0.6s;
}
.vg-transition.is-open { opacity: 1; visibility: visible; }
.vg-transition h2 {
    margin: 0;
    font-family: var(--vg-serif);
    font-weight: 700;
    font-size: clamp(1.8rem, 5vw, 2.6rem);
}

/* Portal picker: one card per gallery space */
.vg-dialog-card.vg-dialog-wide { width: min(680px, 100%); }
.vg-dialog-wide .vg-dialog-actions { justify-content: flex-end; }
.vg-dialog-wide .vg-dialog-actions .vg-cta { flex: 0 0 auto; }
.vg-space-choices {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
    max-height: 52vh;
    max-height: 52dvh;
    margin: 0 0 1.4rem;
    overflow-y: auto;
}
.vg-space-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 1px solid var(--vg-line);
    background: #0c0c0c;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.25s ease, transform 0.25s var(--vg-ease);
}
.vg-space-card:hover:not(:disabled), .vg-space-card:focus-visible {
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
    outline: none;
}
.vg-space-card:disabled { cursor: default; opacity: 0.55; }
.vg-space-thumb {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #1a1a1a;
    font-family: var(--vg-serif);
    font-weight: 700;
    font-size: 2.4rem;
    color: var(--vg-muted);
}
.vg-space-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vg-space-name { padding: 0.75rem 0.9rem 0.15rem; font-family: var(--vg-serif); font-weight: 700; font-size: 1.15rem; }
.vg-space-meta {
    padding: 0 0.9rem 0.85rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--vg-label);
}
.vg-space-card:disabled .vg-space-meta { color: rgba(255, 255, 255, 0.4); }

/* ── Lightbox ───────────────────────────────────────────────────────────── */
.vg-lightbox, .vg-help {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(5, 5, 5, 0.94);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s;
}
.vg-lightbox.is-open, .vg-help.is-open { opacity: 1; visibility: visible; transition-duration: 0.4s, 0s; }
/* The enlarged image fits the window (less the padding), never enlarged past its own size. The cell is
   minmax(0, 1fr) both ways so its size comes from the window, not the image: with the default auto
   track, the cell grows to the image and the 100% limits never shrink it. */
.vg-lightbox { grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.vg-lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* ── Help ───────────────────────────────────────────────────────────────── */
.vg-help { background: rgba(5, 5, 5, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.vg-help-card {
    position: relative;
    width: min(440px, 100%);
    padding: 32px 30px 28px;
    background: #121212;
    border: 1px solid var(--vg-line);
}
.vg-help-card h2 {
    margin: 0.55rem 0 1.4rem;
    font-family: var(--vg-serif);
    font-weight: 700;
    font-size: 1.6rem;
}
.vg-help-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem 1.2rem;
    margin: 0;
    font-size: 0.88rem;
}
.vg-help-list dt { color: var(--vg-muted); white-space: nowrap; }
.vg-help-list dd { margin: 0; }
kbd {
    display: inline-block;
    min-width: 1.6em;
    margin-right: 3px;
    padding: 0.1em 0.4em;
    border: 1px solid var(--vg-line);
    border-radius: 3px;
    font-family: var(--vg-sans);
    font-size: 0.75rem;
    text-align: center;
    color: var(--vg-text);
}
.vg-only-coarse { display: none; }
@media (pointer: coarse) {
    .vg-only-fine { display: none; }
    .vg-only-coarse { display: grid; }
}

.vg-noscript { position: fixed; inset: 0; display: grid; place-items: center; margin: 0; }

/* ── Small screens ──────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .vg-brand { top: max(16px, env(safe-area-inset-top)); left: 16px; }
    .vg-brand-title { font-size: 1.1rem; }
    .vg-hint { top: calc(max(16px, env(safe-area-inset-top)) + 58px); white-space: normal; border-radius: 14px; width: max-content; }
    .vg-btn { width: 40px; height: 40px; }
    .vg-tour-label { min-width: 56px; padding: 0 0.2rem; letter-spacing: 0.1em; }
    .vg-sep { margin: 0 4px; }

    /* Entrance, controls and fullscreen go in the "⋯" menu, so the bar fits a 375px phone. */
    .vg-more { display: block; position: relative; }
    .vg-more-toggle { display: grid; }
    .vg-more-menu {
        display: none;
        position: absolute;
        right: -6px;
        bottom: calc(100% + 14px);
        flex-direction: column;
        gap: 2px;
        min-width: 200px;
        padding: 6px;
        background: rgba(12, 12, 12, 0.82);
        border: 1px solid var(--vg-line);
        border-radius: 16px;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        animation: vg-fade-up 0.3s var(--vg-ease) both;
    }
    .vg-more.is-open .vg-more-menu { display: flex; }
    .vg-more-menu .vg-btn {
        width: 100%;
        height: 44px;
        display: flex;
        justify-content: flex-start;
        gap: 12px;
        padding: 0 14px;
        border-radius: 11px;
    }
    .vg-more-menu .vg-btn-text { display: inline; font-size: 0.9rem; }
    .vg-joystick { bottom: calc(max(20px, env(safe-area-inset-bottom)) + 120px); left: 20px; }

    /* Keep the people row clear of the title: "● 3" and a shorter name button. */
    .vg-people { top: max(16px, env(safe-area-inset-top)); right: 16px; gap: 6px; }
    .vg-presence-label { display: none; }
    .vg-presence { padding: 0.5rem 0.75rem; }
    .vg-name-chip { max-width: 124px; }

}

/* Popup stacks: image on top, details scroll beneath */
@media (max-width: 820px) {
    .vg-art { padding: 0; place-items: end center; }
    .vg-art-card {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
        max-height: 92vh;
        max-height: 92dvh;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        transform: translateY(40px);
    }
    .vg-art-image { padding: 24px 20px 34px; }
    .vg-art-image img { max-height: 34vh; max-height: 34dvh; }
    .vg-art-body { padding: 24px 20px calc(16px + env(safe-area-inset-bottom)); }
    .vg-cta { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}