:root {
    --site-page: #f4f1eb;
    --site-surface: #fff;
    --site-text: #17211d;
    --site-muted: #5d6a63;
    --site-accent: #9a2f37;
    --site-header: #10271f;
    --site-header-text: #fff;
    --site-footer: #10271f;
    --site-footer-text: #fff;
    --site-font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --site-font-scale: 100%;
    --site-max-width: 1180px;
    --site-radius: 22px;
    --site-shadow-strength: .22;
    --site-overlay: #0a1712;
    --site-overlay-opacity: .42;
}

html { font-size: var(--site-font-scale); }

body.public-design {
    min-height: 100vh;
    color: var(--site-text);
    background: var(--site-page);
    font-family: var(--site-font);
    isolation: isolate;
}

.public-design-background {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    background-color: var(--site-page);
    background-position: var(--site-background-position, center center);
    background-size: var(--site-background-size, cover);
    background-repeat: no-repeat;
    background-attachment: var(--site-background-attachment, fixed);
    pointer-events: none;
}

.public-design-background::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--site-overlay);
    opacity: var(--site-overlay-opacity);
}

.public-design-background video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: var(--site-background-size, cover);
    object-position: var(--site-background-position, center center);
}

body.public-design-has-background .app-landing-page,
body.public-design-has-background .show-list-page {
    background: transparent !important;
}

body.public-design .app-landing-surface,
body.public-design .live-show-card,
body.public-design .live-notice {
    border-radius: var(--site-radius) !important;
    box-shadow: 0 22px 64px rgba(7, 18, 13, var(--site-shadow-strength)) !important;
}

body.public-design .app-landing-surface {
    max-width: var(--site-max-width) !important;
    background: var(--site-surface) !important;
}

body.public-design .show-list-page {
    max-width: var(--site-max-width) !important;
}

body.public-design .show-list-page:has(> .show-list-layout[data-view="full-width"]) {
    max-width: none !important;
}

body.public-design .show-list-layout[data-view="full-width"] > .live-show-card {
    border-inline-width: 0 !important;
    border-radius: 0 !important;
}

body.public-design .public-site-header {
    color: var(--site-header-text) !important;
    background: var(--site-header) !important;
}

body.public-design .public-site-header a,
body.public-design .public-site-brand,
body.public-design .public-mobile-navigation summary {
    color: var(--site-header-text) !important;
}

body.public-design .public-site-footer {
    color: var(--site-footer-text) !important;
    background: var(--site-footer) !important;
}

body.public-design .public-site-footer a,
body.public-design .public-site-footer small {
    color: var(--site-footer-text) !important;
}

body.public-design .home-action-button,
body.public-design .show-action,
body.public-design .store-badge {
    background: var(--site-accent) !important;
}

@media (prefers-reduced-motion: reduce) {
    .public-design-background video { display: none; }
}

@media (max-width: 720px) {
    .public-design-background {
        background-attachment: scroll;
    }
}

/* Refined public-site presentation shared by published pages. */
body.public-design {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body.public-design .public-site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 8px 28px rgba(7, 18, 13, .12);
    backdrop-filter: blur(14px);
}

body.public-design .app-landing-surface,
body.public-design .live-show-card,
body.public-design .live-notice {
    border: 1px solid color-mix(in srgb, var(--site-text), transparent 90%) !important;
}

body.public-design .home-action-button,
body.public-design .show-action,
body.public-design .store-badge {
    min-height: 48px;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--site-accent), transparent 74%) !important;
}

body.public-design a:focus-visible,
body.public-design button:focus-visible,
body.public-design summary:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--site-accent), white 45%);
    outline-offset: 3px;
}

@media (max-width: 680px) {
    body.public-design .public-site-header { position: relative; }
    body.public-design .app-landing-surface { border-inline: 0 !important; }
}