/*
 * Production UI entrypoint.
 *
 * All active styling is owned by the ui layer imported below.
 */

@layer vendor, ui;

@layer ui {
/*
 * Rebuilt UI manifest.
 *
 * Imports stay ordered from low-level decisions to composed components.
 * This layer intentionally starts rule-free so introducing the migration
 * boundary cannot change the production render.
 */

/* Shared UI design tokens. This is the only root token registry. */

@font-face {
    font-family: "Fraunces";
    src: url("../fonts/fraunces/Fraunces-Variable.cf7de22f68c1.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    /* Approved brand palette. These are the only authoritative raw colors. */
    --app-palette-burgundy-dark: #2b0714;
    --app-palette-burgundy-primary: #4a1024;
    --app-palette-burgundy-action: #6b1737;
    --app-palette-burgundy-active: #8c2448;
    --app-palette-burgundy-light: #f4e7ec;
    --app-palette-shell-gradient-left: #35131f;
    --app-palette-shell-gradient-center: #50162a;
    --app-palette-shell-gradient-right: #721e40;
    --app-palette-page: #ffffff;
    --app-palette-white: #ffffff;
    --app-palette-black: #000000;
    --app-palette-muted: #f2efed;
    --app-palette-border: #d7cfcc;
    --app-palette-control-boundary: #958b8f;
    --app-palette-text-primary: #21151a;
    --app-palette-text-secondary: #685d62;
    --app-palette-neutral-ink: #121214;
    --app-palette-neutral-strong: #353539;
    --app-palette-neutral-muted: #5d5d5f;
    --app-palette-dark-success: #79dca5;
    --app-palette-dark-warning: #f0b849;
    --app-palette-gold: #c9942f;
    --app-palette-gold-text: #6f5320;
    --app-palette-success: #16794b;
    --app-palette-warning: #9a6700;
    --app-palette-danger: #b42318;
    --app-palette-dark-danger: #ff7b72;
    --app-palette-information: #1d4ed8;
    --app-palette-dark-page: #0d0d0f;
    --app-palette-dark-surface: #151518;
    --app-palette-dark-elevated: #1b1b1f;
    --app-palette-dark-muted: #242429;
    --app-palette-dark-border: #3a3a42;
    --app-palette-dark-control: #6b6b75;
    --app-palette-dark-text: #f7f7f4;
    --app-palette-dark-text-muted: #b8b8bf;

    /* Semantic color roles used by components. */
    --app-color-page-background: var(--app-palette-page);
    --app-color-card-background: var(--app-palette-white);
    --app-color-muted-surface: var(--app-palette-muted);
    --app-color-brand-surface: var(--app-palette-neutral-ink);
    --app-color-brand-surface-deep: var(--app-palette-neutral-ink);
    --app-color-primary-action: var(--app-palette-neutral-ink);
    --app-color-primary-action-hover: var(--app-palette-neutral-ink);
    --app-color-selected-surface: var(--app-palette-muted);
    --app-color-primary-text: var(--app-palette-neutral-ink);
    --app-color-secondary-text: color-mix(in srgb, var(--app-palette-neutral-ink) 68%, var(--app-palette-white));
    --app-color-inverse-text: var(--app-palette-white);
    --app-color-inverse-text-muted: var(--app-palette-white);
    --app-color-on-primary-action: var(--app-color-inverse-text);
    --app-color-accent: var(--app-palette-neutral-ink);
    --app-color-accent-text: var(--app-palette-neutral-ink);
    --app-color-accent-on-dark: var(--app-palette-white);
    --app-color-highlight-text: var(--app-palette-neutral-ink);
    --app-color-link: var(--app-color-primary-action);
    --app-color-link-hover: var(--app-color-primary-action-hover);
    --app-color-focus: var(--app-palette-information);
    --app-color-success: var(--app-palette-success);
    --app-color-warning: var(--app-palette-gold-text);
    --app-color-danger: var(--app-palette-danger);
    --app-color-information: var(--app-palette-information);
    --app-color-share: var(--app-palette-neutral-ink);
    --app-color-premium-action-icon: var(--app-palette-neutral-ink);
    --app-color-media-viewer-canvas: var(--app-palette-neutral-ink);
    --app-color-media-viewer-text: var(--app-palette-white);
    --app-color-state-favorite-active: var(--app-palette-burgundy-active);
    --app-color-state-share-guidance: var(--app-color-share);
    --app-color-editorial-accent-warm: var(--app-palette-gold);
    --app-color-editorial-accent-deep: var(--app-palette-burgundy-active);

    --app-color-state-alert-active: var(--app-palette-gold);
    --app-color-state-control-inactive: var(--app-palette-neutral-muted);
    --app-border-color-subtle: color-mix(in srgb, var(--app-palette-border) 56%, transparent);
    --app-border-color-standard: var(--app-palette-border);
    --app-border-color-control: var(--app-palette-control-boundary);
    --app-border-color-strong: var(--app-palette-neutral-ink);
    --app-border-color-focus: var(--app-palette-information);
    --app-surface-section: var(--app-palette-white);
    --app-surface-theme-anchor: var(--app-palette-white);
    --app-surface-card: var(--app-color-card-background);
    --app-surface-elevated: var(--app-color-card-background);
    --app-surface-selected: var(--app-color-selected-surface);
    --app-surface-inner: var(--app-palette-white);
    --app-surface-field: var(--app-color-card-background);
    --app-surface-table: var(--app-color-card-background);
    --app-surface-table-row: var(--app-color-card-background);
    --app-surface-table-row-alt: var(--app-palette-white);
    --app-card-media-placeholder-bg: var(--app-color-muted-surface);
    --app-image-loading-opacity: 0.72;
    --app-image-loading-blur: 8px;
    --app-image-loading-transition: 240ms ease;
    /* Shared motion grammar: restrained editorial pacing, never layout-driven. */
    --app-motion-duration-fast: 160ms;
    --app-motion-duration-ui: 280ms;
    --app-motion-duration-feedback: 420ms;
    --app-motion-duration-reveal: 380ms;
    --app-motion-duration-image: 460ms;
    --app-motion-duration-cinematic: 520ms;
    --app-motion-distance-subtle: 0.625rem;
    --app-motion-distance-reveal: 1.5rem;
    --app-motion-stagger-compact: 30ms;
    --app-motion-stagger-editorial: 45ms;
    --app-motion-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
    --app-motion-ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
    /* Navigation stays below the shell; brief action feedback remains visible above drawers and dialogs. */
    --app-layer-navigation-transition: 18;
    --app-layer-action-feedback: 140;
    --app-surface-table-header: var(--app-palette-white);
    --app-interactive-hover-surface: transparent;
    --app-interactive-hover-text: var(--app-color-primary-action-hover);
    --app-interactive-hover-shadow: none;
    --app-surface-success: color-mix(in srgb, var(--app-color-success) 12%, var(--app-palette-white));
    --app-surface-warning: color-mix(in srgb, var(--app-color-warning) 12%, var(--app-palette-white));
    --app-surface-danger: color-mix(in srgb, var(--app-color-danger) 10%, var(--app-palette-white));
    --app-surface-information: color-mix(in srgb, var(--app-color-information) 10%, var(--app-palette-white));
    --app-surface-share: color-mix(in srgb, var(--app-color-share) 10%, var(--app-palette-white));
    --app-overlay-brand-subtle: color-mix(in srgb, var(--app-color-brand-surface) 8%, transparent);
    --app-overlay-brand-soft: color-mix(in srgb, var(--app-color-brand-surface) 16%, transparent);
    --app-overlay-brand-medium: color-mix(in srgb, var(--app-color-brand-surface) 28%, transparent);
    --app-overlay-brand-strong: color-mix(in srgb, var(--app-color-brand-surface) 72%, transparent);
    --app-overlay-accent-subtle: color-mix(in srgb, var(--app-color-accent) 8%, transparent);
    --app-overlay-accent-soft: color-mix(in srgb, var(--app-color-accent) 16%, transparent);
    --app-overlay-accent-medium: color-mix(in srgb, var(--app-color-accent) 28%, transparent);
    --app-overlay-success-soft: color-mix(in srgb, var(--app-color-success) 16%, transparent);
    --app-overlay-warning-soft: color-mix(in srgb, var(--app-color-warning) 16%, transparent);
    --app-overlay-danger-soft: color-mix(in srgb, var(--app-color-danger) 16%, transparent);
    --app-overlay-information-soft: color-mix(in srgb, var(--app-color-information) 16%, transparent);
    --app-overlay-information-medium: color-mix(in srgb, var(--app-color-information) 28%, transparent);
    --app-overlay-white-soft: color-mix(in srgb, var(--app-palette-white) 12%, transparent);
    --app-overlay-white-medium: color-mix(in srgb, var(--app-palette-white) 28%, transparent);
    --app-overlay-dark-soft: color-mix(in srgb, var(--app-palette-text-primary) 12%, transparent);
    --app-overlay-dark-medium: color-mix(in srgb, var(--app-palette-text-primary) 24%, transparent);
    --app-overlay-image-scrim: color-mix(in srgb, var(--app-palette-neutral-ink) 48%, transparent);
    --app-overlay-drawer-backdrop: color-mix(in srgb, var(--app-palette-neutral-ink) 22%, transparent);
    --app-overlay-media-viewer-backdrop: color-mix(
        in srgb,
        var(--app-color-media-viewer-canvas) 62%,
        transparent
    );
    --app-overlay-media-viewer-control: color-mix(
        in srgb,
        var(--app-color-media-viewer-canvas) 72%,
        transparent
    );
    --app-overlay-media-viewer-control-hover: color-mix(
        in srgb,
        var(--app-color-media-viewer-canvas) 88%,
        transparent
    );
    --app-overlay-media-viewer-close: color-mix(
        in srgb,
        var(--app-palette-white) 45%,
        transparent
    );
    --app-overlay-media-viewer-close-hover: color-mix(
        in srgb,
        var(--app-palette-white) 62%,
        transparent
    );
    --app-gradient-brand: linear-gradient(135deg, var(--app-palette-neutral-ink), var(--app-palette-neutral-ink));
    --app-gradient-brand-active: linear-gradient(135deg, var(--app-palette-neutral-ink), var(--app-palette-neutral-ink));
    --app-gradient-muted: linear-gradient(180deg, var(--app-palette-white), var(--app-palette-muted));
    --app-gradient-accent: linear-gradient(180deg, var(--app-palette-neutral-ink), var(--app-palette-neutral-ink));
    --app-gradient-card-media-scrim: linear-gradient(180deg, transparent 48%, var(--app-overlay-image-scrim) 100%);
    --app-gradient-shell-chrome: linear-gradient(180deg, var(--app-palette-neutral-ink), var(--app-palette-neutral-ink));
    --app-gradient-shell-chrome-editorial: linear-gradient(180deg, var(--app-palette-neutral-ink), var(--app-palette-neutral-ink));
    --app-gradient-page-canvas: none;
    --app-gradient-fade-inline: linear-gradient(90deg, transparent, var(--app-overlay-brand-soft), transparent);
    --app-gradient-fade-block: linear-gradient(180deg, transparent, var(--app-overlay-brand-soft), transparent);
    --app-gradient-copy-disclosure-fade: linear-gradient(90deg, transparent 0, var(--app-surface-card) 38%);
    --app-gradient-section-heading-rule: linear-gradient(90deg, currentColor 0%, color-mix(in srgb, currentColor 28%, transparent) 100%);
    --app-gradient-action-heading-rule: linear-gradient(90deg, var(--app-text-color-strong) 0%, color-mix(in srgb, var(--app-text-color-strong) 28%, transparent) 100%);
    --app-gradient-loader-surface: radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--app-surface-card) 94%, transparent), color-mix(in srgb, var(--app-surface-section) 78%, transparent) 58%, color-mix(in srgb, var(--app-surface-section) 54%, transparent));
    --app-gradient-loader-image-surface: radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--app-surface-card) 84%, transparent), color-mix(in srgb, var(--app-surface-section) 52%, transparent) 62%, transparent);
    --app-gradient-loader-visual: radial-gradient(circle at 42% 34%, color-mix(in srgb, var(--app-palette-white) 74%, transparent), color-mix(in srgb, var(--app-surface-card) 88%, transparent) 48%, color-mix(in srgb, var(--app-text-color-strong) 7%, transparent));
    --app-gradient-loader-orbit: conic-gradient(from 15deg, transparent 0 14%, color-mix(in srgb, var(--app-text-color-strong) 66%, transparent) 22%, transparent 31% 58%, color-mix(in srgb, var(--app-text-color-strong) 26%, transparent) 71%, transparent 82% 100%);
    --app-gradient-loader-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), var(--app-palette-black) 0);
    --app-gradient-loader-sheen: linear-gradient(112deg, transparent 22%, color-mix(in srgb, var(--app-palette-white) 52%, transparent) 46%, transparent 68%);
    --app-gradient-loader-core: radial-gradient(circle, color-mix(in srgb, var(--app-surface-card) 92%, transparent), color-mix(in srgb, var(--app-surface-card) 38%, transparent) 66%, transparent 70%);
    --blue-900: var(--app-color-brand-surface);
    --blue-800: var(--app-color-primary-action);
    --blue-700: var(--app-color-primary-action-hover);
    --blue-050: var(--app-color-selected-surface);
    --white: var(--app-palette-white);
    --ink: var(--app-color-primary-text);
    --ink-soft: var(--app-color-secondary-text);
    --line: var(--app-border-color-subtle);
    --app-card-border-premium: color-mix(in srgb, var(--app-palette-neutral-ink) 8%, var(--app-palette-white));
    --app-card-border-premium-hover: color-mix(in srgb, var(--app-palette-neutral-ink) 14%, var(--app-palette-white));
    --card-border: var(--app-card-border-premium);
    --card-surface: var(--app-surface-section);
    --card-surface-soft: var(--app-surface-card);
    --shadow: 0 14px 32px color-mix(in srgb, var(--app-color-brand-surface) 10%, transparent);
    --shadow-soft: 0 2px 8px color-mix(in srgb, var(--app-color-brand-surface) 6%, transparent);
    --app-shadow-drawer: 0.75rem 0 1.5rem -1rem color-mix(in srgb, var(--app-palette-neutral-ink) 24%, transparent);
    --app-shadow-card-resting: none;
    --app-shadow-card-mobile:
        0 1px 0 color-mix(in srgb, var(--app-palette-neutral-ink) 10%, transparent),
        0 0.55rem 1.25rem -0.55rem color-mix(in srgb, var(--app-palette-neutral-ink) 24%, transparent);
    --app-shadow-field-autofill: 0 0 0 1000px var(--app-field-surface) inset;
    --app-shadow-loader-visual: 0 1rem 2.8rem color-mix(in srgb, var(--app-text-color-strong) 15%, transparent), 0 0 0 0.32rem color-mix(in srgb, var(--app-surface-card) 28%, transparent), inset 0 1px 0 color-mix(in srgb, var(--app-palette-white) 78%, transparent), inset 0 -0.6rem 1.1rem color-mix(in srgb, var(--app-text-color-strong) 6%, transparent);
    --app-shadow-loader-visual-compact: 0 0.55rem 1.4rem color-mix(in srgb, var(--app-text-color-strong) 14%, transparent), 0 0 0 0.2rem color-mix(in srgb, var(--app-surface-card) 26%, transparent), inset 0 1px 0 color-mix(in srgb, var(--app-palette-white) 72%, transparent);
    --app-shadow-loader-orbit: inset 0 0 1.2rem color-mix(in srgb, var(--app-text-color-strong) 7%, transparent);
    --app-shadow-loader-monogram: 0 1px 0.2rem color-mix(in srgb, var(--app-palette-black) 34%, transparent);
    --app-shadow-loader-monogram-dark: 0 1px 0.2rem color-mix(in srgb, var(--app-palette-white) 24%, transparent);
    --app-shadow-action-burst: 0 -1.55rem 0 -0.02rem var(--app-action-burst-primary, var(--app-color-editorial-accent-warm)), 1.2rem -1.05rem 0 -0.04rem var(--app-action-burst-secondary, var(--app-color-editorial-accent-deep)), 1.55rem 0.2rem 0 -0.03rem var(--app-action-burst-tertiary, var(--app-text-color-strong)), 0.95rem 1.25rem 0 -0.05rem var(--app-action-burst-primary, var(--app-color-editorial-accent-warm)), -0.35rem 1.5rem 0 -0.03rem var(--app-action-burst-secondary, var(--app-color-editorial-accent-deep)), -1.35rem 0.85rem 0 -0.05rem var(--app-action-burst-tertiary, var(--app-text-color-strong)), -1.45rem -0.45rem 0 -0.03rem var(--app-action-burst-primary, var(--app-color-editorial-accent-warm)), -0.7rem -1.35rem 0 -0.05rem var(--app-action-burst-secondary, var(--app-color-editorial-accent-deep));
    --app-shadow-raised:
        inset 0 1px 0 color-mix(in srgb, var(--app-palette-white) 96%, transparent),
        inset 0 -1px 0 color-mix(in srgb, var(--app-palette-neutral-ink) 8%, transparent),
        0 5px 10px color-mix(in srgb, var(--app-palette-neutral-ink) 12%, transparent),
        0 18px 36px color-mix(in srgb, var(--app-palette-neutral-ink) 13%, transparent);
    --app-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--app-color-focus) 34%, transparent);
    --app-shadow-header-control-depth:
        inset 0 1px 0 var(--app-overlay-white-medium),
        inset 0 -3px 0 var(--app-overlay-dark-medium),
        0 4px 9px color-mix(in srgb, var(--app-palette-neutral-ink) 44%, transparent);
    --app-shadow-header-control-clean:
        inset 0 -3px 0 var(--app-overlay-dark-medium),
        0 4px 9px color-mix(in srgb, var(--app-palette-neutral-ink) 44%, transparent);
    --app-shadow-header-control-hover:
        inset 0 1px 0 color-mix(in srgb, var(--app-palette-white) 70%, transparent),
        inset 0 -2px 0 var(--app-overlay-brand-soft),
        0 5px 11px color-mix(in srgb, var(--app-palette-neutral-ink) 36%, transparent);
    --app-shadow-header-control-clean-hover:
        inset 0 -2px 0 var(--app-overlay-brand-soft),
        0 5px 11px color-mix(in srgb, var(--app-palette-neutral-ink) 36%, transparent);
    --app-shadow-header-control-focus:
        inset 0 1px 0 var(--app-overlay-white-medium),
        inset 0 -3px 0 var(--app-overlay-dark-medium),
        0 0 0 3px color-mix(in srgb, var(--app-color-focus) 34%, transparent),
        0 4px 9px color-mix(in srgb, var(--app-palette-neutral-ink) 44%, transparent);
    --app-shadow-header-control-clean-focus:
        inset 0 -3px 0 var(--app-overlay-dark-medium),
        0 0 0 3px color-mix(in srgb, var(--app-color-focus) 34%, transparent),
        0 4px 9px color-mix(in srgb, var(--app-palette-neutral-ink) 44%, transparent);
    --app-shadow-header-control-pressed:
        inset 0 2px 4px var(--app-overlay-dark-medium),
        inset 0 -1px 0 var(--app-overlay-white-soft),
        0 1px 3px color-mix(in srgb, var(--app-palette-neutral-ink) 32%, transparent);
    --app-filter-header-logo-depth:
        drop-shadow(0 1px 0 var(--app-overlay-white-medium))
        drop-shadow(0 4px 5px color-mix(in srgb, var(--app-palette-neutral-ink) 58%, transparent));
    --app-filter-header-logo-hover:
        drop-shadow(0 1px 0 var(--app-overlay-white-medium))
        drop-shadow(0 6px 7px color-mix(in srgb, var(--app-palette-neutral-ink) 64%, transparent));
    --ui-border-standard: var(--app-border-color-standard);
    --ui-legend-border-standard: var(--app-border-color-subtle);
    --ui-legend-text-standard: var(--app-color-brand-surface);
    --ui-legend-surface-standard: var(--app-surface-elevated);
    --ui-hover-border-light: var(--app-border-color-strong);
    --ui-hover-shadow-standard: var(--app-shadow-focus);
    --ui-header-offset: clamp(72px, 9.5vh, 97px);
    --layout-shell-top-gap: 1.15rem;
    --layout-section-gap: 1.15rem;
    --app-font-family-base: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --app-font-family-heading: "Century Gothic", "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --app-font-family-display: var(--app-font-family-heading);
    --app-font-family-editorial: var(--app-font-family-heading);
    --app-font-family-icon: "Segoe UI Symbol", "Segoe UI", Arial, sans-serif;
    --app-font-family-monospace: ui-monospace, "Cascadia Code", Consolas, monospace;
    --app-text-color-strong: var(--app-color-primary-text);
    --app-text-color-heading: var(--app-color-brand-surface);
    --app-text-color-body: var(--app-color-primary-text);
    --app-text-color-muted: var(--app-color-secondary-text);
    --app-text-color-accent: var(--app-color-link);
    --app-type-h1-size: clamp(1.72rem, 1.34rem + 1vw, 2.28rem);
    --app-type-h1-line-height: 1.12;
    --app-type-h2-size: clamp(1.3rem, 1.06rem + 0.6vw, 1.7rem);
    --app-type-h2-line-height: 1.18;
    --app-type-h3-size: clamp(1.02rem, 0.95rem + 0.24vw, 1.16rem);
    --app-type-h3-line-height: 1.24;
    --app-type-heading-weight: 700;
    --app-type-heading-strong-weight: 700;
    --app-type-heading-letter-spacing: 0;
    --app-headline-rule-color: var(--app-color-primary-text);
    --app-headline-rule-width: 2px;
    --app-headline-rule-gap: clamp(1.5rem, 2.4vw, 1.9rem);
    --app-intro-rule-inline-size: clamp(12rem, 36vw, 24rem);
    --app-headline-rule-image:
        linear-gradient(
            to right,
            var(--app-headline-rule-color) 0 calc(50% - 0.82rem),
            transparent calc(50% - 0.82rem) calc(50% + 0.82rem),
            var(--app-headline-rule-color) calc(50% + 0.82rem) 100%
        ),
        linear-gradient(
            68deg,
            transparent 43%,
            var(--app-headline-rule-color) 44% 56%,
            transparent 57%
        ),
        linear-gradient(
            68deg,
            transparent 43%,
            var(--app-headline-rule-color) 44% 56%,
            transparent 57%
        );
    --app-type-body-size: 0.95rem;
    --app-type-body-line-height: 1.5;
    --app-type-h1-mobile-size: 1.38rem;
    --app-type-h1-mobile-line-height: 1.1;
    --app-type-h2-mobile-size: 1.12rem;
    --app-type-h2-mobile-line-height: 1.16;
    --app-type-h3-mobile-size: 0.98rem;
    --app-type-h3-mobile-line-height: 1.22;
    --app-type-body-mobile-size: 0.93rem;
    --app-type-body-mobile-line-height: 1.46;
    --app-legend-max-inline-size-mobile: calc(100% - 0.1rem);
    --app-surface-legend-clearance: 1.95rem;
    --app-surface-legend-clearance-tight: 1.7rem;
    --app-surface-legend-clearance-mobile: 2.2rem;
    --app-surface-legend-clearance-tight-mobile: 1.9rem;
    --app-panel-stack-gap-standard: 1.15rem;
    --app-panel-stack-gap-tight: 0.95rem;
    --app-control-lift-offset: -0.2rem;
    --app-control-lift-offset-strong: -0.3rem;
    --app-surface-padding: 1rem;
    --app-surface-radius: 12px;
    --app-surface-padding-standard: var(--app-surface-padding);
    --app-legend-surface-padding-standard: var(--app-surface-padding);
    --app-surface-radius-standard: var(--app-surface-radius);
    --app-legend-gap: 1rem;
    --app-legend-top: -0.72rem;
    --app-legend-left: 1.05rem;
    --app-legend-padding-y: 0.3rem;
    --app-legend-padding-x: 0.96rem;
    --app-legend-font-size: 0.92rem;
    --app-legend-line-height: 1;
    --app-legend-min-height: 1.9rem;
    --app-legend-max-inline-size: calc(100% - 0.15rem);
    --app-control-min-height: 42px;
    --app-control-padding-y: 0.44rem;
    --app-control-padding-x: 0.56rem;
    --app-control-radius: 8px;
    --app-control-gap: 0.42rem;
    --app-tabs-gap: 0.65rem;
    --app-tabs-padding-top: 0.65rem;
    --app-tabs-padding-x: 0.5rem;
    --app-tabs-padding-bottom: 0.8rem;
    --app-tabs-margin-bottom: 0.35rem;
    --app-toggle-min-height: 2.2rem;
    --app-toggle-padding-y: 0.42rem;
    --app-toggle-padding-x: 0.78rem;
    --app-toggle-gap: 0.5rem;
    --app-toggle-font-size: 0.78rem;
    --app-action-launch-margin-top: 1.6rem;
    --app-action-launch-padding-y: 1.2rem;
    --app-action-launch-padding-x: 1.3rem;
    --app-action-launch-gap: 1rem;
    --app-action-launch-radius: 24px;
    --app-action-launch-orb-size: 4.35rem;
    --app-action-launch-icon-size: 2rem;
    --app-action-launch-copy-gap: 0.28rem;
    --app-action-launch-title-size: 1.08rem;
    --app-action-launch-body-size: 0.88rem;
    --app-action-launch-collapsed-height: 40px;
    --app-action-launch-collapsed-padding-y: 0.48rem;
    --app-action-launch-collapsed-padding-x: 0.56rem;
    --app-action-launch-collapsed-radius: 16px;
    --app-action-launch-collapsed-gap: 0.34rem;
    --app-action-launch-compact-height: 52px;
    --app-action-launch-compact-padding: 0.45rem;
    --app-action-launch-compact-radius: 16px;
    --app-action-launch-compact-orb-size: 1.35rem;
    --app-action-launch-compact-icon-size: 0.82rem;
    --app-page-head-title-gap: 0.56rem;
    --app-page-head-title-size: clamp(1.32rem, 2.15vw, 2.05rem);
    --app-page-head-title-line-height: 1.04;
    --app-page-head-title-padding-y: 0.62rem;
    --app-page-head-title-padding-x: 1.12rem;
    --app-page-head-icon-size: 1.52rem;
    --app-page-head-icon-radius: 999px;
    --app-page-head-icon-glyph-size: 1.26rem;
    --app-page-head-icon-stroke-width: 2.35;
    --app-card-title-font-family: "Fraunces", Georgia, "Times New Roman", serif;
    --app-card-title-size: clamp(1.125rem, 1rem + 0.65vw, 1.5rem);
    --app-card-title-line-height: 1.2;
    --app-card-title-font-weight: 450;
    --app-card-title-letter-spacing: 0.005em;
    --app-card-clamped-text-inline-safety: 0.12em;
    --app-card-clamped-text-inline-expansion: 0.24em;
    --app-section-title-size: var(--app-type-h2-size);
    --app-section-heading-size: var(--app-type-h3-size);
    --app-subsection-heading-size: 1rem;
    --app-minor-heading-size: 0.95rem;
    --app-field-label-font-size: 0.82rem;
    --app-field-label-font-weight: 700;
    --app-field-value-font-size: 0.88rem;
    --app-field-value-font-weight: 450;
    --app-feature-card-title-size: 1.28rem;
    --app-feature-card-title-line-height: 1.18;
    --app-body-copy-size: 0.95rem;
    --app-body-copy-line-height: 1.45;
    --app-editorial-reading-font-family: var(--app-font-family-base);
    --app-editorial-reading-size: clamp(1.05rem, 1.3vw, 1.18rem);
    --app-editorial-reading-weight: 500;
    --app-editorial-reading-line-height: 1.78;
    --app-badge-font-size: 0.68rem;
    --app-badge-letter-spacing: 0.05em;
    --app-icon-stroke-width-standard: 2.1;
    --app-state-action-icon-size: 2.22rem;
    --app-favorite-icon-stroke-width: 1.7px;
    --app-page-head-title-mobile-size: clamp(1.18rem, 5.2vw, 1.55rem);
    --app-page-head-title-mobile-line-height: 1.06;
    --app-page-head-title-mobile-gap: 0.46rem;
    --app-page-head-icon-mobile-size: 1.36rem;
    --app-page-head-icon-mobile-radius: 999px;
    --app-page-head-icon-mobile-glyph-size: 1.08rem;
    --app-favorite-icon-mobile-size: 1.28rem;
    --app-favorite-icon-mobile-stroke-width: 1.05px;
    --app-header-actions-gap: 0.65rem;
    --app-header-actions-gap-mobile: 0.75rem;
    --app-header-divider-height: 26px;
    --app-nav-link-gap: 0.45rem;
    --app-nav-link-padding-y: 0.72rem;
    --app-nav-link-padding-x: 0.82rem;
    --app-nav-link-radius: 8px;
    --app-nav-link-icon-size: 16px;
    --app-nav-link-icon-frame-size: 1.72rem;
    --app-sidebar-nav-gap: 0.55rem;
    --app-sidebar-divider-gap: 0.75rem;
    --app-field-min-height: 56px;
    --app-field-compact-min-height: 44px;
    --app-field-radius: 5px;
    --app-field-padding-y: 0.78rem;
    --app-field-padding-x: 1rem;
    --app-field-label-gap: 0.48rem;
    --app-form-field-gap: 1.35rem;
    --app-form-compact-field-gap: 0.75rem;
    --app-form-readable-width: 46rem;
    --app-field-icon-size: 56px;
    --app-field-icon-glyph-size: 1.05rem;
    --app-field-surface: var(--app-surface-field);
    --app-field-text-color: var(--app-color-primary-text);
    --app-field-placeholder-color: var(--app-color-secondary-text);
    --app-field-border-color: color-mix(in srgb, var(--app-palette-neutral-ink) 42%, var(--app-palette-white));
    --app-field-hover-border-color: var(--app-palette-neutral-ink);
    --app-form-accent: var(--app-palette-neutral-ink);
    --app-form-accent-hover: var(--app-palette-neutral-ink);
    --app-form-accent-contrast: var(--app-palette-white);
    --app-field-focus-accent: var(--app-palette-gold-text);
    --app-field-focus-border-color: color-mix(
        in srgb,
        var(--app-field-focus-accent) 82%,
        var(--app-field-surface)
    );
    --app-field-shadow-resting: none;
    --app-field-shadow-hover: 0 0 0 1px color-mix(in srgb, var(--app-palette-neutral-ink) 72%, transparent);
    --app-field-focus-ring:
        0 0 0 3px color-mix(in srgb, var(--app-field-focus-accent) 22%, transparent),
        0 12px 28px -20px color-mix(in srgb, var(--app-palette-neutral-ink) 48%, transparent);
    --app-field-invalid-ring:
        0 0 0 1px var(--app-color-danger),
        0 0 0 4px color-mix(in srgb, var(--app-color-danger) 14%, transparent);
    --app-field-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23121214' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --app-choice-accent-color: var(--app-color-primary-action-hover);
    --app-choice-shadow-resting: 0 2px 6px color-mix(in srgb, var(--app-palette-neutral-ink) 8%, transparent);
    --app-toggle-track-off-surface: var(--app-color-muted-surface);
    --app-toggle-track-off-border: var(--app-border-color-standard);
    --app-toggle-track-on-surface: var(--app-color-primary-action);
    --app-toggle-track-on-border: var(--app-color-primary-action);
    --app-toggle-thumb-surface: var(--app-surface-card);
    --app-auth-form-gap: 0.95rem;
    --app-auth-button-min-height: 52px;
    --app-auth-error-radius: 8px;
    --app-brand-gap: 0.16rem;
    --app-brand-text-gap: 0.18rem;
    --app-brand-title-size: clamp(1.85rem, 3.6vw, 3.24rem);
    --app-brand-title-mobile-size: clamp(1.7rem, 7vw, 2.15rem);
    --app-brand-subtitle-size: clamp(0.68rem, 1.15vw, 1rem);
    --app-brand-subtitle-mobile-size: 0.56rem;
    --app-footer-min-height: clamp(42px, 5.8vh, 60px);
    --app-message-gap: 0.65rem;
    --app-message-padding-y: 0.75rem;
    --app-message-padding-x: 0.9rem;
    --app-message-radius: 8px;
    --app-modal-gap: 1.05rem;
    --app-modal-padding-y: 1.5rem;
    --app-modal-padding-x: 1.45rem;
    --app-modal-radius: 10px;
    --app-modal-title-size: 1.42rem;
    --app-modal-title-line-height: 1.2;
    --app-modal-body-line-height: 1.5;
    --app-modal-actions-gap: 0.85rem;
    --app-overlay-backdrop-duration: 220ms;
    --app-overlay-surface-opacity-duration: 200ms;
    --app-overlay-surface-transform-duration: 320ms;
    --app-overlay-surface-easing: cubic-bezier(0.16, 1, 0.3, 1);
    --app-overlay-anchor-offset: 0.65rem;
    --app-overlay-rise-offset: 1.25rem;
    --app-overlay-sheet-translate: calc(100% + 1rem);
    --app-overlay-sheet-max-height: calc(100dvh - max(1rem, env(safe-area-inset-top)));
    --app-overlay-sheet-radius: var(--app-modal-radius) var(--app-modal-radius) 0 0;
    --app-search-results-gap: 0.75rem;
    --app-search-results-list-gap: 0.65rem;
    --app-search-result-gap: 0.75rem;
    --app-search-result-padding-y: 0.72rem;
    --app-search-result-padding-x: 0.8rem;
    --app-search-result-radius: 14px;
    --app-search-result-media-size: 64px;
    --app-search-result-media-radius: 18px;
    --app-search-result-type-min-width: 7.4rem;
    --app-search-result-type-min-height: 2rem;
    --app-search-result-type-padding-y: 0.32rem;
    --app-search-result-type-padding-x: 0.65rem;
    --app-search-result-type-font-size: 0.72rem;
    --app-search-result-type-letter-spacing: 0.04em;
    --app-search-result-body-gap: 0.22rem;
    --app-search-result-body-padding-y: 0.48rem;
    --app-search-result-body-padding-x: 0.62rem;
    --app-pagination-gap: 0.65rem;
    --app-pagination-inline-gap: 0.45rem;
    --app-pagination-label-gap: 0.5rem;
    --app-account-detail-gap: 0.6rem;
    --app-account-favorites-gap: 0.9rem;
    --app-account-favorites-top-padding: 1.15rem;
    --app-account-favorite-link-gap: 0.45rem;
    --app-account-favorite-bottom-padding: 2.15rem;
    --app-account-details-gap: 0.75rem;
    --app-action-launch-collapsed-mobile-gap: 0.35rem;
    --app-action-launch-collapsed-mobile-title-size: 0.72rem;
    --app-hamburger-size: clamp(42px, 5.6vh, 55px);
    --app-hamburger-radius: 8px;
    --app-hamburger-line-width: 28px;
    --app-hamburger-line-height: 3px;
    --app-hamburger-gap: 5px;
    --app-detail-back-mobile-min-height: 2rem;
    --app-detail-back-mobile-padding-y: 0.32rem;
    --app-detail-back-mobile-padding-x: 0.52rem;
    --app-detail-back-mobile-font-size: 0.66rem;
    --app-detail-back-mobile-gap: 0.22rem;
    --app-detail-back-mobile-icon-size: 0.72rem;
    --app-type-pill-min-height: 2rem;
    --app-type-pill-font-size: 0.72rem;
    --app-type-pill-letter-spacing: 0.04em;
    --app-action-launch-collapsed-mobile-padding-y: 0.62rem;
    --app-action-launch-collapsed-mobile-padding-x: 0.32rem;
    --app-action-launch-collapsed-mobile-min-height: 5.95rem;
    --app-action-launch-collapsed-mobile-radius: 16px;
    --app-action-launch-collapsed-mobile-orb-size: 2.45rem;
    --app-action-launch-collapsed-mobile-icon-size: 1.12rem;
    --app-action-launch-collapsed-mobile-title-small-size: 0.64rem;
    --app-utility-search-compact-gap: 0.55rem;
    --app-utility-search-compact-padding: 0.7rem;
    --app-utility-search-compact-media-size: 3rem;
    --app-utility-search-compact-media-radius: 12px;
    --app-utility-search-compact-type-min-height: 1.5rem;
    --app-utility-search-compact-type-font-size: 0.6rem;
    --app-utility-search-compact-pagination-gap: 0.35rem;
    --app-utility-search-mobile-stack-gap: 0.85rem;
    --app-socials-card-gap: 0.85rem;
    --app-detail-head-gap: 0.85rem;
    --museum-detail-inner-inset: 0.6rem;
    --museum-detail-inner-top-gap: 0.6rem;
    --app-scrollbar-size: 14px;
    --app-scrollbar-track: var(--app-palette-white);
    --app-scrollbar-track-border: var(--app-palette-neutral-ink);
    --app-scrollbar-thumb: var(--app-palette-neutral-ink);
    --app-scrollbar-thumb-hover: #000000;
    --app-scrollbar-shadow: none;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --app-color-page-background: var(--app-palette-black);
    --app-color-card-background: var(--app-palette-black);
    --app-color-muted-surface: var(--app-palette-dark-muted);
    --app-color-selected-surface: var(--app-palette-dark-muted);
    --app-color-primary-action: var(--app-palette-dark-text);
    --app-color-primary-action-hover: var(--app-palette-white);
    --app-color-primary-text: var(--app-palette-dark-text);
    --app-color-secondary-text: var(--app-palette-dark-text-muted);
    --app-color-accent: var(--app-palette-dark-text);
    --app-color-accent-text: var(--app-palette-dark-text);
    --app-color-highlight-text: var(--app-palette-dark-text);
    --app-color-link: var(--app-palette-dark-text);
    --app-color-link-hover: var(--app-palette-white);
    --app-color-share: var(--app-palette-dark-text);
    --app-color-premium-action-icon: var(--app-palette-dark-text);
    --app-color-success: var(--app-palette-dark-success);
    --app-color-warning: var(--app-palette-dark-warning);
    --app-color-on-primary-action: var(--app-palette-dark-page);
    --app-color-danger: var(--app-palette-dark-danger);
    --app-color-state-control-inactive: var(--app-palette-dark-control);
    --app-border-color-subtle: color-mix(in srgb, var(--app-palette-dark-border) 72%, transparent);
    --app-border-color-standard: var(--app-palette-dark-border);
    --app-border-color-control: var(--app-palette-dark-control);
    --app-border-color-strong: var(--app-palette-dark-text);
    --app-surface-section: var(--app-palette-black);
    --app-surface-theme-anchor: var(--app-palette-black);
    --app-surface-elevated: var(--app-palette-black);
    --app-surface-inner: var(--app-palette-black);
    --app-surface-table-row-alt: var(--app-palette-black);
    --app-surface-table-header: var(--app-palette-black);
    --app-card-media-placeholder-bg: var(--app-palette-dark-muted);
    --app-interactive-hover-surface: transparent;
    --app-interactive-hover-text: var(--app-palette-white);
    --app-interactive-hover-shadow: none;
    --app-surface-success: color-mix(in srgb, var(--app-color-success) 20%, var(--app-palette-dark-surface));
    --app-surface-warning: color-mix(in srgb, var(--app-color-warning) 20%, var(--app-palette-dark-surface));
    --app-surface-danger: color-mix(in srgb, var(--app-color-danger) 18%, var(--app-palette-dark-surface));
    --app-surface-information: color-mix(in srgb, var(--app-color-information) 18%, var(--app-palette-dark-surface));
    --app-surface-share: color-mix(in srgb, var(--app-color-share) 12%, var(--app-palette-dark-surface));
    --app-overlay-dark-soft: color-mix(in srgb, var(--app-palette-dark-page) 30%, transparent);
    --app-overlay-dark-medium: color-mix(in srgb, var(--app-palette-dark-page) 48%, transparent);
    --app-gradient-muted: linear-gradient(180deg, var(--app-palette-dark-elevated), var(--app-palette-dark-muted));
    --app-card-border-premium: var(--app-palette-dark-border);
    --app-card-border-premium-hover: var(--app-palette-dark-control);
    --app-shadow-raised:
        inset 0 1px 0 color-mix(in srgb, var(--app-palette-white) 8%, transparent),
        inset 0 -1px 0 color-mix(in srgb, var(--app-palette-dark-page) 62%, transparent),
        0 6px 14px color-mix(in srgb, var(--app-palette-dark-page) 42%, transparent),
        0 18px 36px color-mix(in srgb, var(--app-palette-dark-page) 52%, transparent);
    --app-shadow-card-mobile:
        0 1px 0 color-mix(in srgb, var(--app-palette-dark-text) 12%, transparent),
        0 0.55rem 1.25rem -0.55rem color-mix(in srgb, var(--app-palette-dark-page) 72%, transparent);
    --app-field-border-color: var(--app-palette-dark-control);
    --app-field-hover-border-color: var(--app-palette-dark-text);
    --app-form-accent: var(--app-palette-dark-text);
    --app-form-accent-hover: var(--app-palette-white);
    --app-form-accent-contrast: var(--app-palette-dark-page);
    --app-field-focus-accent: var(--app-palette-gold);
    --app-field-focus-border-color: color-mix(
        in srgb,
        var(--app-field-focus-accent) 88%,
        var(--app-field-surface)
    );
    --app-field-shadow-resting: none;
    --app-field-shadow-hover: 0 0 0 1px color-mix(in srgb, var(--app-palette-dark-text) 72%, transparent);
    --app-field-focus-ring:
        0 0 0 3px color-mix(in srgb, var(--app-field-focus-accent) 30%, transparent),
        0 14px 30px -20px color-mix(in srgb, var(--app-palette-dark-page) 78%, transparent);
    --app-field-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23f7f7f4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --app-toggle-track-on-surface: var(--app-palette-dark-text);
    --app-toggle-track-on-border: var(--app-palette-dark-text);
    --app-toggle-thumb-surface: var(--app-palette-dark-page);
    --app-scrollbar-track: var(--app-palette-dark-page);
    --app-scrollbar-track-border: var(--app-palette-dark-border);
    --app-scrollbar-thumb: var(--app-palette-dark-text-muted);
    --app-scrollbar-thumb-hover: var(--app-palette-dark-text);
    --app-text-color-heading: var(--app-palette-dark-text);
    --ui-legend-text-standard: var(--app-palette-dark-text);
}

@media (max-width: 700px) {
    :root {
        --ui-header-offset: clamp(58px, 8.5vh, 74px);
        --app-footer-min-height: clamp(34px, 5vh, 46px);
        --app-hamburger-size: clamp(34px, 5vh, 42px);
        --app-header-divider-height: 20px;
    }
}

/* Shared document reset and typography primitives. */

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    margin: 0;
    scrollbar-gutter: auto;
}

html {
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    overflow-x: clip;
    overflow-y: visible;
    color: var(--ink);
    background-color: var(--app-color-page-background);
    background-image: var(--app-gradient-page-canvas);
    font-family: var(--app-font-family-base);
}

a {
    color: inherit;
    text-underline-offset: 0.16em;
}

img {
    max-width: 100%;
}

button {
    font: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}

h1,
h2,
h3 {
    color: var(--app-text-color-heading);
    font-family: var(--app-font-family-display);
    font-weight: var(--app-type-heading-weight);
    letter-spacing: var(--app-type-heading-letter-spacing);
}

h1 {
    font-size: var(--app-type-h1-size);
    line-height: var(--app-type-h1-line-height);
}

h2 {
    font-size: var(--app-type-h2-size);
    line-height: var(--app-type-h2-line-height);
}

h3 {
    font-size: var(--app-type-h3-size);
    line-height: var(--app-type-h3-line-height);
}

p {
    color: var(--app-text-color-body);
    font-size: var(--app-type-body-size);
    line-height: var(--app-type-body-line-height);
}

ul {
    margin: 0;
    padding: 0;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 700px) {
    h1 {
        font-size: var(--app-type-h1-mobile-size);
        line-height: var(--app-type-h1-mobile-line-height);
    }

    h2 {
        font-size: var(--app-type-h2-mobile-size);
        line-height: var(--app-type-h2-mobile-line-height);
    }

    h3 {
        font-size: var(--app-type-h3-mobile-size);
        line-height: var(--app-type-h3-mobile-line-height);
    }

    p {
        font-size: var(--app-type-body-mobile-size);
        line-height: var(--app-type-body-mobile-line-height);
    }
}

/*
 * Production UI components.
 *
 * Keep each complete, documented component contract in its focused owner
 * instead of adding a trailing override layer here.
 */

/* Shared editorial site footer. */

:root {
    --app-footer-copy-size: clamp(0.76rem, 0.85vw, 0.86rem);
    --app-footer-control-size: clamp(2rem, 2.4vw, 2.35rem);
    --app-footer-inline-padding: clamp(1.25rem, 4vw, 4.5rem);
    --app-footer-safe-area: env(safe-area-inset-bottom, 0px);
}

.footer {
    display: grid;
    grid-area: footer;
    width: 100%;
    min-width: 0;
    height: auto;
    overflow: visible;
    border-top: 1px solid var(--app-border-color-subtle);
    background: var(--app-surface-theme-anchor);
    color: var(--app-text-color-strong);
    box-shadow: none;
}

.footer-inner {
    box-sizing: border-box;
    display: grid;
    grid-template-rows: max-content max-content;
    gap: clamp(2rem, 4vw, 3.75rem);
    align-content: stretch;
    width: 100%;
    min-width: 0;
    margin-inline: auto;
    padding:
        clamp(2.5rem, 5vw, 4.5rem)
        var(--app-footer-inline-padding)
        calc(clamp(1rem, 2vw, 1.6rem) + var(--app-footer-safe-area));
}

.footer-navigation-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr))
        minmax(0, 1.2fr)
        minmax(0, 1.45fr);
    gap: clamp(2rem, 4vw, 4.75rem);
    align-items: start;
    width: 100%;
    max-width: 82rem;
    min-width: 0;
    margin-inline: auto;
}

.footer-link-group {
    min-width: 0;
    overflow-wrap: anywhere;
}

.footer-link-group h2 {
    margin: 0 0 1.45rem;
    color: var(--app-text-color-strong);
    font-family: var(--app-font-family-base);
    font-size: clamp(0.72rem, 0.8vw, 0.8rem);
    font-weight: 650;
    letter-spacing: 0.085em;
    line-height: 1.25;
    text-transform: uppercase;
}

.footer-link-group ul {
    display: grid;
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-link-group a {
    color: var(--app-text-color-strong);
    font-size: var(--app-footer-copy-size);
    font-weight: 450;
    line-height: 1.35;
    text-decoration: none;
    text-underline-offset: 0.2em;
    transition: color 160ms ease;
}

.footer-link-group a:is(:hover, :focus-visible) {
    color: var(--app-color-primary-action);
    text-decoration: underline;
}

.footer-follow-band,
.footer-follow-band .page-head-socials,
.footer-follow-band .header-socials-links {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    min-width: 0;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.footer-follow-band .header-socials-links {
    display: grid;
    grid-template-columns: repeat(4, var(--app-footer-control-size));
    grid-auto-rows: var(--app-footer-control-size);
    gap: 0.22rem;
    width: fit-content;
    max-width: 100%;
}

.footer-follow-band .header-socials-copy {
    display: none;
}

.footer-follow-band .header-social-link {
    display: inline-grid;
    place-items: center;
    flex: 0 0 var(--app-footer-control-size);
    width: var(--app-footer-control-size);
    min-width: var(--app-footer-control-size);
    height: var(--app-footer-control-size);
    min-height: var(--app-footer-control-size);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--app-text-color-strong);
    box-shadow: none;
    transition:
        background-color 160ms ease,
        transform 160ms ease;
}

.footer-follow-band .header-social-link svg {
    width: 68%;
    height: 68%;
}

.footer-follow-band .header-social-link:is(:hover, :focus-visible) {
    background: var(--app-interactive-hover-surface);
    transform: scale(1.08);
}

.footer-follow-band .header-social-link:focus-visible {
    outline: 2px solid var(--app-text-color-strong);
    outline-offset: 1px;
}

.footer-newsletter-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.7rem;
    align-items: stretch;
    width: 100%;
    max-width: 30rem;
}

.footer-newsletter-title-row {
    display: flex;
    align-items: center;
    min-width: 0;
    margin-bottom: 0.55rem;
}

.footer-newsletter-title {
    min-width: 0;
    margin: 0;
    color: var(--app-text-color-heading);
    font-family: var(--app-font-family-base);
    font-size: clamp(1.2rem, 1.8vw, 1.65rem);
    font-weight: 700;
    line-height: 1.08;
    white-space: normal;
}

.footer-newsletter-state-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.65rem;
    white-space: normal;
}

.footer-newsletter-state.newsletter-subscription-summary-copy {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--app-text-color-strong);
    font-size: 0.72rem;
    font-weight: 750;
    line-height: 1.2;
}

.footer-newsletter-manage.btn {
    min-height: 2rem;
    padding: 0.32rem 0.58rem;
    font-size: 0.72rem;
    line-height: 1.1;
}

.footer-newsletter-manage.btn:is(:hover, :focus-visible) {
    text-decoration: none;
}

.footer-newsletter-tagline {
    max-width: 30rem;
    margin: 0 0 0.9rem;
    font-size: var(--app-footer-copy-size);
}

.footer-newsletter-field {
    gap: 0.32rem;
    min-width: 0;
}

.footer-newsletter-field-label {
    color: var(--app-text-color-strong);
    font-size: var(--app-field-label-font-size);
    font-weight: var(--app-field-label-font-weight);
    line-height: 1.25;
}

.footer-newsletter-form .app-input-group {
    min-width: 0;
    min-height: var(--app-field-compact-min-height);
}

.footer-newsletter-form .app-input-group > input {
    min-height: calc(var(--app-field-compact-min-height) - 2px);
}

.footer-newsletter-form > .btn {
    min-height: var(--app-control-min-height);
    width: 100%;
}

.footer-newsletter-status {
    margin: 0;
    font-size: var(--app-footer-copy-size);
    line-height: 1.4;
}

.footer-newsletter > .app-form-privacy-note {
    max-width: 30rem;
    margin-top: 0.8rem;
    font-size: clamp(0.68rem, 0.76vw, 0.76rem);
    line-height: 1.45;
}

.footer-legal-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    width: 100%;
    max-width: 82rem;
    min-width: 0;
    margin-inline: auto;
}

.footer-copyright {
    grid-column: 2;
    max-width: 100%;
    margin: 0;
    color: var(--app-text-color-muted);
    font-size: clamp(0.62rem, 0.72vw, 0.72rem);
    font-weight: 450;
    letter-spacing: 0.025em;
    line-height: 1.4;
    text-align: center;
}

.consent-preferences-card {
    color: var(--app-text-color-body);
}

.consent-preferences-card .app-slide-prompt-copy {
    display: grid;
    gap: var(--app-component-flow-gap);
}

.consent-preferences-card h2,
.consent-preferences-card p,
.consent-preferences-card .modal-actions {
    margin: 0;
}

.app-ad-slot {
    display: grid;
    place-items: center;
    min-height: clamp(7.5rem, 16vw, 15.625rem);
    margin-block: var(--app-section-flow-gap);
    background: var(--app-color-muted-surface);
}

.app-ad-label {
    color: var(--app-text-color-muted);
    font-size: var(--app-badge-font-size);
    text-transform: uppercase;
}

@media (max-width: 1200px) {
    .footer-navigation-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .footer-newsletter {
        grid-column: span 2;
    }
}

@media (max-width: 700px) {
    :root {
        --app-footer-inline-padding: 1rem;
    }

    .footer-inner {
        grid-template-rows: max-content max-content;
        gap: clamp(2.25rem, 9vw, 3.5rem);
        padding: 2.5rem 1rem calc(1rem + var(--app-footer-safe-area));
    }

    .footer-navigation-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2.25rem 1.5rem;
    }

    .footer-newsletter,
    .footer-community {
        grid-column: 1 / -1;
    }

    .footer-legal-row {
        justify-content: center;
    }

    .footer-copyright {
        text-align: center;
    }

}

@media (max-width: 300px) {
    .footer-navigation-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .footer-newsletter {
        grid-column: auto;
    }

}

@media (prefers-reduced-motion: reduce) {
    .footer-link-group a,
    .footer-follow-band .header-social-link {
        transition: none;
        transform: none;
    }
}

.app-page-intro-section {
    --app-surface-block-rhythm: clamp(0.72rem, 2.16vw, 1.3rem);
    --app-legend-inner-clearance: clamp(0.86rem, 1.73vw, 1.12rem);
    --app-surface-block-rhythm-mobile: clamp(0.65rem, 2.88vw, 0.9rem);
    --app-legend-inner-clearance-mobile: clamp(0.84rem, 2.88vw, 1rem);
    background: var(--app-surface-theme-anchor);
}

.app-page-intro-layout {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--app-component-flow-gap);
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.app-page-intro-layout > .app-page-intro {
    min-width: 0;
}

.app-page-intro-layout:is(
    .app-page-intro-layout-with-actions,
    .app-page-intro-layout-with-support
) {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.9fr);
}

.app-page-intro-actions,
.app-page-intro-layout > .museum-intro-guidance-card {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    align-self: start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.app-page-intro-layout > .museum-intro-guidance-card {
    margin: 0;
    padding: 0;
}

.app-page-intro {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    font-family: var(--app-font-family-editorial);
    line-height: 1.45;
}

.app-editorial-heading-rule {
    display: block;
    width: 100%;
    height: 1.3rem;
    background-image: var(--app-headline-rule-image);
    background-repeat: no-repeat;
    background-position:
        center,
        calc(50% - 0.23rem) center,
        calc(50% + 0.23rem) center;
    background-size:
        100% var(--app-headline-rule-width),
        0.54rem 1.3rem,
        0.54rem 1.3rem;
}

.app-page-intro h2 {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    color: var(--app-text-color-strong);
    font-family: inherit;
    font-size: clamp(1.32rem, 1.04rem + 0.9vw, 1.86rem);
    font-style: normal;
    font-weight: var(--app-type-heading-weight);
    letter-spacing: var(--app-type-heading-letter-spacing);
    line-height: 1.2;
    overflow-wrap: break-word;
    text-transform: none;
    text-wrap: wrap;
}

.app-page-intro > p {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    color: var(--app-text-color-body);
    font-size: clamp(0.94rem, 0.9rem + 0.14vw, 1.02rem);
    font-weight: 450;
    letter-spacing: -0.012em;
    line-height: inherit;
    overflow-wrap: break-word;
    text-transform: none;
}

.app-page-intro > .app-page-intro-guidance {
    margin-top: 0.18rem;
}

.app-page-intro-summary-support {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    margin-top: var(--app-component-flow-gap-mobile);
}

.app-page-intro-summary-support :is(
    .social-channel-connect-widget,
    .social-channel-connect-link
) {
    max-width: 100%;
}

.app-page-intro > .app-page-intro-guidance-social{
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem var(--app-component-flow-gap);
    color: var(--app-text-color-muted);
    font-weight: 400;
}

.app-page-intro-guidance-social > span{
    display: inline-flex;
    align-items: center;
    gap: var(--app-control-gap);
}

@media (max-width: 760px) {
    .app-page-intro-layout:is(
        .app-page-intro-layout-with-actions,
        .app-page-intro-layout-with-support
    ) {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-page-intro-actions,
    .app-page-intro-layout > .museum-intro-guidance-card {
        justify-content: flex-start;
    }
}

.news-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--app-control-gap);
    min-width: 0;
}

.news-article-main {
    display: grid;
    align-content: start;
    gap: var(--app-section-flow-gap);
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.news-article-main > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.news-article-topline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--app-control-gap);
    width: 100%;
    min-width: 0;
}

.news-article-topline .news-article-breadcrumb {
    flex: 1 1 20rem;
    width: auto;
    min-width: 0;
}

.news-article-staff-tools {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--app-control-gap);
    width: auto;
    min-width: 0;
}

.news-article-staff-tools .app-forward-action {
    min-width: 0;
}

.news-article-primary-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
    align-items: start;
    gap: var(--app-section-flow-gap);
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.news-article-composite {
    --news-article-editorial-canvas: 72rem;
    --news-article-hero-measure: 68rem;
    --news-article-header-measure: 62.5rem;
    --news-article-reading-measure: 42rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.news-article-primary-layout.is-editorial-reading-layout {
    grid-template-columns: minmax(0, 1fr);
}

.is-editorial-reading-layout .news-article-shell {
    width: min(100%, var(--news-article-editorial-canvas));
    margin-inline: auto;
}

.news-article-engagement {
    display: grid;
    justify-items: start;
    gap: var(--app-component-flow-gap);
    width: min(100%, var(--news-article-reading-measure));
    margin-inline: auto;
    padding-block-start: var(--app-section-flow-gap);
    border-block-start: 1px solid var(--app-border-color-subtle);
}

.news-article-engagement-title,
.news-article-discovery-heading {
    margin: 0;
    color: var(--app-text-color-strong);
    font-family: var(--app-font-family-display);
    font-weight: 700;
    line-height: 1.25;
}

.news-article-engagement-title {
    font-size: var(--app-field-label-font-size);
}

.is-editorial-reading-layout > .news-article-discovery {
    display: grid;
    gap: var(--app-section-flow-gap);
    width: min(100%, var(--news-article-editorial-canvas));
    margin-inline: auto;
    padding-block-start: clamp(var(--app-section-flow-gap), 4vw, calc(var(--app-section-flow-gap) * 2));
    border-block-start: 1px solid var(--app-border-color-subtle);
}

.news-article-discovery-group {
    display: grid;
    gap: var(--app-component-flow-gap);
    min-width: 0;
}

.news-article-discovery-group + .news-article-discovery-group {
    padding-block-start: var(--app-section-flow-gap);
    border-block-start: 1px solid var(--app-border-color-subtle);
}

.news-article-discovery-heading {
    font-size: var(--app-section-heading-size);
}

.news-article-discovery-group-recent .news-article-discovery-heading {
    font-size: var(--app-subsection-heading-size);
}

.news-article-discovery-rail {
    margin: 0;
    padding: 0;
    list-style: none;
}

.news-article-discovery-rail.mobile-carousel-is-scrollable {
    padding-block: 0;
}

.news-article-content-column {
    display: grid;
    align-content: start;
    gap: var(--app-component-flow-gap);
    min-width: 0;
}

.news-article-primary-layout > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.news-article-section-separator {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
    border-block-start: 1px solid var(--app-border-color-subtle);
}

.news-article-follow {
    justify-self: stretch;
    justify-items: start;
    width: 100%;
    max-width: 100%;
}

.news-article-follow .page-head-socials {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    width: min(100%, 16.84rem);
    max-width: 100%;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.news-article-follow .header-socials-copy {
    display: none;
}

.news-article-follow .shared-follow-button-row {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    align-items: center;
    gap: 0.12rem;
    justify-self: start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.news-article-follow .header-social-link {
    position: relative;
    display: grid;
    place-items: center;
    justify-self: center;
    width: 100%;
    min-width: 0;
    max-width: 2.35rem;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
}

.news-article-follow .header-social-link::before {
    content: none;
}

.news-article-follow .header-social-link .header-social-icon {
    display: block;
    width: 1.45rem;
    height: 1.45rem;
    max-width: 60%;
    max-height: 60%;
}

.news-article-follow .header-social-link:is(:hover, :focus-visible) {
    background: var(--app-interactive-hover-surface);
    color: var(--app-interactive-hover-text);
}

.news-page-stack .home-feed-section,
.news-page-stack .news-article-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
}

.news-page-stack .home-feed-section > *,
.news-page-stack .news-article-shell > * {
    grid-column: 1;
    min-width: 0;
}

.news-list-search {
    --app-inline-search-max-width: 42rem;
}

.news-archive-search-status {
    margin: 0;
}

.news-archive-results {
    min-width: 0;
}

.news-archive-load-more-row {
    display: flex;
    justify-content: center;
}

.news-article-taxonomy-label {
    display: inline-flex;
    align-items: center;
    min-height: 1.8rem;
    color: var(--app-color-primary-action);
    font-size: var(--app-field-label-font-size);
    font-weight: 700;
    line-height: 1;
}

.news-card-tags a {
    min-width: 0;
}

.news-card-tags .news-tag-chip {
    display: inline-flex;
    align-items: center;
    min-height: 1.8rem;
    padding: 0.26rem 0.58rem;
    border: 1px solid var(--app-border-color-subtle);
    border-radius: 999px;
    background: var(--app-surface-section);
    color: var(--app-text-color-muted);
    font-size: 0.76rem;
    font-weight: 750;
    line-height: 1;
    text-decoration: none;
}

.news-card-tags .news-tag-chip:is(:hover, :focus-visible) {
    border-color: var(--app-border-color-standard);
    background: var(--app-interactive-hover-surface);
    color: var(--app-interactive-hover-text);
    text-decoration-line: none;
}

.news-card-tags .news-tag-chip::after {
    content: none;
    display: none;
}

.news-article-header,
.news-article-featured,
.news-article-body {
    display: grid;
    gap: var(--app-component-flow-gap);
    min-width: 0;
}

.news-article-toc {
    display: grid;
    gap: var(--app-component-flow-gap);
    width: min(100%, 42rem);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.news-article-block-contents {
    display: grid;
    gap: var(--app-component-flow-gap);
}

.news-article-toc h2,
.news-article-toc-list {
    margin: 0;
}

.news-article-toc h2 {
    color: var(
        --news-article-block-heading-color,
        var(--app-text-color-heading)
    );
    font-family: var(--app-font-family-display);
    font-size: var(--app-section-heading-size);
}

.news-article-body .news-article-block :is(h1, h2, h3, h4, h5, h6) {
    color: var(
        --news-article-block-heading-color,
        var(--app-text-color-heading)
    );
}

.news-article-fact-lead {
    display: block;
    min-width: 0;
    max-width: 100%;
}

.news-article-fact-lead > .news-article-fact-heading,
.news-article-fact-lead > p {
    display: inline;
    margin: 0;
    line-height: inherit;
}

.news-article-fact-lead > .news-article-fact-heading {
    font-family: var(--app-font-family-display);
    font-size: 1em;
    font-weight: 750;
    letter-spacing: 0;
}

.news-article-fact-lead > .news-article-fact-heading::after {
    content: ":";
    margin-inline-end: 0.32em;
}

.news-article-fact-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--app-component-flow-gap);
    width: 100%;
    min-width: 0;
}

.news-article-fact-header > h2 {
    min-width: 0;
    margin: 0;
}

.news-markdown-block > .news-article-fact-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(min(100%, 20.625rem), 21.875rem)
    );
    align-items: stretch;
    justify-content: start;
    gap: clamp(1.25rem, 1.7vw, 1.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: news-article-fact;
}

.news-markdown-block
    .news-article-fact-grid
    > .news-article-fact-item.news-article-fact-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: clamp(0.72rem, 1vw, 0.92rem);
    min-width: 0;
    margin: 0;
    padding: clamp(1rem, 1.8vw, 1.35rem);
    border: 1px solid var(--app-card-border-premium);
    border-radius: var(--app-surface-radius-standard);
    background: var(--app-surface-card);
    box-shadow: var(--app-shadow-card-resting);
    overflow: hidden;
    counter-increment: news-article-fact;
}

.news-article-fact-item::before {
    content: counter(news-article-fact, decimal-leading-zero);
    grid-column: 1;
    grid-row: auto;
    color: var(--app-color-primary-action);
    font-family: var(--app-font-family-display);
    font-size: var(--app-field-label-font-size);
    font-weight: var(--app-field-label-font-weight);
    letter-spacing: 0.06em;
    line-height: 1.35;
}

.news-article-fact-item > * {
    grid-column: 1;
    min-width: 0;
    margin: 0;
}

.news-article-fact-item > .news-article-fact-heading {
    font-family: var(--app-card-title-font-family);
    font-size: var(--app-card-title-size);
    font-weight: var(--app-card-title-font-weight);
    letter-spacing: var(--app-card-title-letter-spacing);
    line-height: var(--app-card-title-line-height);
}

.news-article-fact-item > :is(p, ul, ol, blockquote) {
    color: var(--app-text-color-body);
    line-height: var(--app-body-copy-line-height);
}

.news-article-fact-item > :is(ul, ol) strong {
    color: var(--app-text-color-strong);
    font-weight: var(--app-field-label-font-weight);
}

.news-article-fact-item:first-child > :is(ul, ol) {
    display: grid;
    gap: var(--app-component-flow-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.news-article-fact-item:first-child > :is(ul, ol) > li {
    display: grid;
    gap: 0.18rem;
    margin: 0;
}

.news-article-fact-item:first-child > :is(ul, ol) > li > strong {
    display: block;
    color: var(--app-color-primary-action);
    font-size: var(--app-field-label-font-size);
    font-weight: var(--app-field-label-font-weight);
    letter-spacing: 0.06em;
    line-height: 1.25;
    text-transform: uppercase;
}

@media (max-width: 760px) {
    .news-markdown-block > .news-article-fact-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.news-article-body :is(.news-markdown-block, .news-custom-html-block) a,
.news-article-toc a {
    color: var(--app-color-primary-action-hover);
    text-decoration: none;
}

.news-article-body :is(.news-markdown-block, .news-custom-html-block) a:is(:hover, :focus-visible),
.news-article-toc a:is(:hover, :focus-visible) {
    color: var(--app-color-primary-action);
    text-decoration: none;
}

.news-article-toc-list,
.news-article-toc-children {
    display: grid;
    gap: var(--app-control-gap);
    padding: 0;
    list-style: none;
}

.news-article-toc-children {
    margin: var(--app-control-gap) 0 0;
    padding-inline-start: var(--app-component-flow-gap);
}

.news-article-toc li {
    min-width: 0;
    margin: 0;
}

.news-article-media-title {
    display: grid;
    gap: 0.22rem;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 var(--app-component-flow-gap);
    font-family: var(--app-font-family-display);
}

.news-article-media-kicker {
    color: var(--app-color-primary-action);
    font-size: var(--app-field-label-font-size);
    font-weight: var(--app-field-label-font-weight);
    letter-spacing: 0.06em;
    line-height: 1.25;
    text-transform: uppercase;
}

.news-article-media-heading-text {
    color: var(--app-text-color-strong);
    font-size: var(--app-section-heading-size);
    font-weight: 750;
    line-height: var(--app-type-h3-line-height);
}

.news-custom-html-block {
    display: grid;
    gap: var(--app-component-flow-gap);
    min-width: 0;
    overflow-wrap: anywhere;
}

.news-custom-html-block > * {
    max-width: 100%;
}

.news-custom-html-block table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
}

.news-custom-html-block :is(th, td),
.news-markdown-block :is(th, td) {
    padding: var(--app-control-padding-y) var(--app-control-padding-x);
    border: 1px solid var(--app-border-color-standard);
    text-align: start;
    vertical-align: top;
}

.news-custom-html-block th,
.news-markdown-block th {
    background: var(--app-surface-inner);
    color: var(--app-text-color-strong);
}

.news-markdown-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}

.news-markdown-block .news-markdown-table-scroll table {
    width: 100%;
    overflow: visible;
    border-collapse: collapse;
}

.news-markdown-block :is(th, td).is-align-center {
    text-align: center;
}

.news-markdown-block :is(th, td).is-align-right {
    text-align: end;
}

.news-article-shell {
    align-content: start;
    gap: var(--app-component-flow-gap);
    overflow: hidden;
}

.news-article-header {
    width: min(100%, 62.5rem);
    margin-inline: auto;
    text-align: center;
}

.news-article-header {
    gap: clamp(0.7rem, 1.2vw, 1rem);
    padding-block: clamp(0.25rem, 1vw, 0.65rem);
    background: transparent;
}

.news-article-heading-row {
    display: block;
    align-items: start;
    min-width: 0;
}

.news-article-heading-row > h1 {
    min-width: 0;
    margin-inline: auto;
}

.news-article-heading-actions {
    width: 100%;
    margin-inline: auto;
    text-align: center;
}

.news-article-header h1,
.news-article-header h2 {
    color: var(--app-text-color-heading);
    font-family: var(--app-font-family-display);
    font-size: 3.75rem;
    font-weight: var(--app-type-heading-weight);
    line-height: 1.2;
    letter-spacing: var(--app-type-heading-letter-spacing);
    text-align: center;
    text-wrap: balance;
}

.news-article-header > .app-editorial-heading-rule {
    margin-block-start: clamp(0.8rem, 1.2vw, 0.9rem);
}

.news-article-subheadline {
    color: var(--app-text-color-body);
    font-family: var(--app-font-family-display);
    font-size: clamp(1.08rem, 0.98rem + 0.5vw, 1.38rem);
    line-height: 1.35;
}

.news-article-byline {
    color: var(--app-text-color-muted);
    font-family: var(--app-font-family-heading);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    text-align: center;
}

.news-article-header > :is(p, .news-card-tags) {
    justify-self: center;
    text-align: center;
}

.newsroom-public-preview-notice {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.7rem;
    margin: 0;
}

.news-article-header h2,
.news-article-header p,
.news-article-body p,
.news-article-body figure,
.news-article-body blockquote {
    margin: 0;
}

.news-article-featured img,
.news-article-body img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--app-surface-radius);
}

.news-article-featured {
    width: min(100%, 68rem);
    margin-inline: auto;
}

.news-article-featured > img {
    aspect-ratio: 16 / 9;
    max-height: min(62vh, 42rem);
    object-fit: cover;
}

.news-article-featured figcaption {
    margin-block-start: var(--app-control-gap);
    color: var(--app-text-color-muted);
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

.news-article-excerpt {
    max-width: 46rem;
    margin-inline: auto;
    color: var(--app-text-color-body);
    font-family: var(--app-font-family-heading);
    font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.16rem);
    font-weight: 300;
    line-height: 1.45;
    text-align: center;
}

.news-article-header > .news-card-tags {
    justify-content: center;
}

.news-article-body {
    --news-article-block-heading-color: var(--app-text-color-heading);

    width: 100%;
    margin-inline: 0;
    color: var(--app-text-color-body);
    font-size: clamp(1rem, 0.96rem + 0.16vw, 1.08rem);
    font-weight: 500;
    line-height: var(--app-type-body-line-height);
}

.news-article-body blockquote {
    padding-inline-start: 1.2rem;
    border-inline-start: 3px solid var(--app-color-accent);
    color: var(--app-text-color-strong);
    font-family: var(--app-font-family-display);
    font-size: 1.12em;
}

.news-article-block,
.news-article-block > * {
    min-width: 0;
    max-width: 100%;
}

.news-article-block-width-content {
    width: min(100%, 42rem);
}

.news-article-block-width-wide {
    width: min(100%, 50rem);
}

.news-article-block-width-full {
    width: 100%;
}

.news-article-block-align-left {
    margin-inline-end: auto;
    text-align: start;
}

.news-article-block-align-center {
    margin-inline: auto;
    text-align: center;
}

.news-article-block-align-right {
    margin-inline-start: auto;
    text-align: end;
}

.news-article-block-align-center :is(ul, ol) {
    display: inline-grid;
    text-align: start;
}

.news-article-block-align-right :is(ul, ol) {
    display: inline-grid;
    text-align: start;
}

.news-article-body > .news-article-block:is(
    .news-article-block-gallery,
    .news-article-block-youtube,
    .news-article-block-instagram,
    .news-article-block-embed
) {
    margin-inline: 0;
    text-align: start;
}

.news-article-body > .news-article-block + .news-article-block:is(
    .news-article-block-gallery,
    .news-article-block-youtube,
    .news-article-block-instagram
) {
    margin-block-start: calc(var(--app-section-flow-gap) - var(--app-component-flow-gap));
}

.news-article-body > .news-article-block:is(
    .news-article-block-gallery,
    .news-article-block-youtube,
    .news-article-block-instagram
) + .news-article-block:is(.news-article-block-markdown, .news-article-block-html) {
    margin-block-start: calc(var(--app-section-flow-gap) - var(--app-component-flow-gap));
}

.news-article-body > :is(
    .news-article-block-markdown,
    .news-article-block-html,
    .news-article-block-contents
):not(.news-article-block-editorial-facts) {
    width: min(100%, var(--news-article-reading-measure));
    margin-inline: auto;
}

.news-article-body > .news-article-block:is(
    .news-article-block-gallery,
    .news-article-block-youtube,
    .news-article-block-instagram,
    .news-article-block-embed
) {
    width: min(100%, var(--news-article-reading-measure));
    margin-inline: auto;
}

.news-article-body > .news-article-block-editorial-facts {
    width: min(100%, var(--news-article-hero-measure));
    margin-inline: auto;
}

.news-article-block-advertisement:empty {
    display: none;
}

.news-markdown-block,
.news-raw-html-block {
    display: grid;
    align-items: start;
    gap: var(--app-component-flow-gap);
    min-width: 0;
    max-width: 100%;
}

.news-markdown-block > *,
.news-raw-html-block > * {
    margin-block: 0;
}

.news-markdown-block :is(pre, table),
.news-raw-html-block :is(pre, table) {
    max-width: 100%;
    overflow: auto;
}

.news-markdown-block pre,
.news-raw-html-block pre {
    padding: var(--app-surface-padding);
    border-radius: var(--app-control-radius);
    background: var(--app-surface-inner);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.news-markdown-block :is(ul, ol) {
    padding-inline-start: 1.5rem;
}

.news-markdown-block li > :is(ul, ol) {
    margin-block-start: calc(var(--app-control-gap) / 2);
}

.news-markdown-block li + li {
    margin-block-start: calc(var(--app-control-gap) / 2);
}

.news-markdown-block img,
.news-raw-html-block img {
    max-width: 100%;
    height: auto;
}

.news-article-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--app-component-flow-gap);
}

.news-article-gallery-shell,
.news-article-embed-figure {
    display: grid;
    align-items: start;
    gap: var(--app-control-gap);
    padding: var(--app-control-gap);
    border: 1px solid var(--app-border-color-standard);
    border-radius: var(--app-surface-radius);
    background: var(--app-surface-section);
    box-shadow: var(--app-shadow-card-resting);
}

.news-article-gallery-shell,
.news-article-embed-figure {
    width: min(100%, 42rem);
    max-width: 42rem;
    justify-self: start;
}

.news-article-gallery-item {
    display: grid;
    gap: var(--app-control-gap);
    min-width: 0;
    margin: 0;
}

.news-gallery-lightbox-trigger {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--app-surface-radius);
    background: transparent;
    box-shadow: none;
    cursor: zoom-in;
}

.news-gallery-lightbox-trigger:focus-visible {
    outline: 3px solid var(--app-color-focus);
    outline-offset: 2px;
}

.news-article-image-caption {
    display: grid;
    gap: 0.2rem;
    color: var(--app-text-color-muted);
    font-size: var(--app-field-label-font-size);
}

.news-article-gallery-caption {
    display: grid;
}

.news-article-gallery.is-layout-tiled .news-article-gallery-caption {
    display: none;
}

.news-article-gallery.is-columns-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.news-article-gallery.is-columns-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.news-article-gallery.is-columns-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.news-article-gallery.is-layout-masonry {
    display: block;
    columns: 3;
    column-gap: var(--app-component-flow-gap);
}

.news-article-gallery.is-layout-masonry.is-columns-2 {
    columns: 2;
}

.news-article-gallery.is-layout-masonry.is-columns-4 {
    columns: 4;
}

.news-article-gallery.is-layout-masonry figure {
    margin-block-end: var(--app-component-flow-gap);
    break-inside: avoid;
}

.news-article-gallery.is-layout-tiled {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: dense;
    grid-auto-rows: clamp(4.5rem, 8vw, 7rem);
    gap: var(--app-control-gap);
}

.news-article-gallery.is-layout-tiled > figure {
    grid-column: span 4;
    grid-row: span 2;
}

.news-article-gallery.is-layout-tiled > figure:nth-child(7n + 1) {
    grid-column: span 8;
    grid-row: span 4;
}

.news-article-gallery.is-layout-tiled > figure:nth-child(7n + 2),
.news-article-gallery.is-layout-tiled > figure:nth-child(7n + 3) {
    grid-column: span 4;
    grid-row: span 2;
}

.news-article-gallery.is-layout-tiled > figure:nth-child(7n + 4),
.news-article-gallery.is-layout-tiled > figure:nth-child(7n + 5) {
    grid-column: span 6;
    grid-row: span 2;
}

.news-article-gallery.is-layout-tiled > figure:nth-child(7n + 6) {
    grid-column: span 5;
    grid-row: span 3;
}

.news-article-gallery.is-layout-tiled > figure:nth-child(7n + 7) {
    grid-column: span 7;
    grid-row: span 3;
}

.news-article-gallery.is-layout-tiled .news-gallery-lightbox-trigger,
.news-article-gallery.is-layout-tiled img {
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 0;
    object-fit: cover;
}

.news-article-gallery.is-layout-editorial {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    align-items: start;
    column-gap: var(--app-component-flow-gap);
    row-gap: calc(var(--app-component-flow-gap) * 1.35);
}

.news-article-gallery.is-layout-editorial > figure {
    grid-column: auto;
}

.news-article-gallery.is-layout-editorial > .is-tile-full {
    grid-column: 1 / -1;
}

.news-article-gallery.is-layout-editorial > .is-tile-half {
    grid-column: auto;
}

.news-article-gallery.is-layout-editorial > .is-tile-third {
    grid-column: 1 / -1;
    width: min(100%, 33.333%);
}

.news-article-gallery.is-layout-editorial > .is-tile-two_thirds {
    grid-column: 1 / -1;
    width: min(100%, 66.667%);
}

.news-article-gallery.is-layout-editorial > :is(
    .is-tile-third,
    .is-tile-two_thirds
).is-tile-align-left {
    justify-self: start;
}

.news-article-gallery.is-layout-editorial > :is(
    .is-tile-third,
    .is-tile-two_thirds
).is-tile-align-center {
    justify-self: center;
}

.news-article-gallery.is-layout-editorial > :is(
    .is-tile-third,
    .is-tile-two_thirds
).is-tile-align-right {
    justify-self: end;
}

.news-article-gallery .news-article-gallery-item:is(
    .is-item-ratio-landscape,
    .is-item-ratio-square,
    .is-item-ratio-portrait
) .news-gallery-lightbox-trigger {
    overflow: hidden;
}

.news-article-gallery .is-item-ratio-landscape .news-gallery-lightbox-trigger {
    aspect-ratio: 4 / 3;
}

.news-article-gallery.is-layout-editorial
.is-item-ratio-landscape
.news-gallery-lightbox-trigger {
    aspect-ratio: 3 / 2;
}

.news-article-gallery .is-item-ratio-square .news-gallery-lightbox-trigger {
    aspect-ratio: 1;
}

.news-article-gallery .is-item-ratio-portrait .news-gallery-lightbox-trigger {
    aspect-ratio: 3 / 4;
}

.news-article-gallery .news-article-gallery-item:is(
    .is-item-ratio-landscape,
    .is-item-ratio-square,
    .is-item-ratio-portrait
) img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-article-gallery .is-focal-top img {
    object-position: center top;
}

.news-article-gallery .is-focal-right img {
    object-position: right center;
}

.news-article-gallery .is-focal-bottom img {
    object-position: center bottom;
}

.news-article-gallery .is-focal-left img {
    object-position: left center;
}

.news-article-gallery.is-layout-carousel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    grid-template-columns: none;
    width: min(100%, 42rem);
    margin-inline: 0;
    overflow-x: auto;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
}

.news-article-gallery-thumbnails {
    display: flex;
    gap: 0.45rem;
    width: min(100%, 42rem);
    max-width: 42rem;
    margin-block-end: var(--app-control-gap);
    padding: 0.45rem;
    overflow-x: auto;
    border: 1px solid var(--app-border-color-standard);
    border-radius: var(--app-control-radius);
    background: var(--app-surface-inner);
    scroll-snap-type: inline proximity;
    scrollbar-width: none;
}

.news-article-gallery-thumbnails::-webkit-scrollbar {
    display: none;
}

.news-article-gallery-thumbnail {
    flex: 0 0 clamp(4.25rem, 15%, 5.75rem);
    min-width: 0;
    aspect-ratio: 4 / 3;
    padding: 0;
    overflow: hidden;
    scroll-snap-align: center;
    border: 2px solid transparent;
    border-radius: var(--app-control-radius);
    background: var(--app-surface-elevated);
    box-shadow: none;
    cursor: pointer;
    opacity: 0.66;
    transition:
        border-color 160ms ease,
        opacity 160ms ease,
        transform 160ms ease;
}

.news-article-gallery-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-article-gallery-thumbnail:is(:hover, :focus-visible) {
    border-color: var(--app-border-color-strong);
    box-shadow: none;
    opacity: 1;
    transform: translateY(-1px);
}

.news-article-gallery-thumbnail[aria-current="true"] {
    border-color: var(--app-color-primary-action);
    background: var(--app-surface-selected);
    box-shadow: none;
    opacity: 1;
}

.news-article-block
.app-card-carousel-frame:has(> .news-article-gallery.is-layout-carousel) {
    width: min(100%, 42rem);
    max-width: 42rem;
    inline-size: min(100%, 42rem);
    max-inline-size: 42rem;
    justify-self: start;
    margin-inline: 0;
}

.news-article-block
.app-card-carousel-frame
> .news-article-gallery.is-layout-carousel {
    width: 100%;
}

.news-article-gallery.is-layout-carousel::-webkit-scrollbar {
    display: none;
}

.news-article-gallery.is-layout-carousel > figure {
    scroll-snap-align: start;
}

.news-article-gallery.is-layout-carousel .news-gallery-lightbox-trigger {
    aspect-ratio: 16 / 10;
}

.news-article-gallery.is-layout-carousel .news-article-gallery-caption {
    padding-block-start: calc(var(--app-control-gap) / 2);
    padding-inline: calc(var(--app-control-gap) / 2);
}

.news-article-gallery-inline-position {
    position: absolute;
    inset-block-start: var(--app-control-gap);
    inset-inline-end: var(--app-control-gap);
    z-index: 1;
    padding: 0.38rem 0.62rem;
    border: 0;
    border-radius: 999px;
    background: var(--app-color-primary-action);
    color: var(--app-color-on-primary-action);
    box-shadow: var(--app-shadow-card-resting);
    font-size: var(--app-field-label-font-size);
    font-weight: var(--app-field-label-font-weight);
    line-height: 1;
    pointer-events: none;
}

.news-article-gallery:is(.is-ratio-landscape, .is-ratio-square, .is-ratio-portrait) img {
    object-fit: cover;
}

.news-article-gallery.is-ratio-landscape img {
    aspect-ratio: 4 / 3;
}

.news-article-gallery.is-ratio-square img {
    aspect-ratio: 1;
}

.news-article-gallery.is-ratio-portrait img {
    aspect-ratio: 3 / 4;
}

.news-article-gallery .news-article-gallery-item:is(
    .is-item-ratio-landscape,
    .is-item-ratio-square,
    .is-item-ratio-portrait
) img {
    aspect-ratio: auto;
}

.news-article-gallery:is(
    .is-ratio-landscape,
    .is-ratio-square,
    .is-ratio-portrait
) .news-article-gallery-item.is-item-ratio-original img {
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
}

.news-article-accordion {
    padding: var(--app-surface-block-rhythm) var(--app-surface-inline-rhythm);
    border: 1px solid var(--app-border-color-subtle);
    border-radius: var(--app-surface-radius);
    background: var(--card-surface-soft);
}

.news-article-accordion > summary {
    cursor: pointer;
    color: var(--app-text-color-strong);
    font-weight: 800;
}

.news-article-accordion[open] > summary {
    margin-block-end: var(--app-component-flow-gap);
}

.news-article-list {
    display: grid;
    gap: var(--app-control-gap);
    padding-inline-start: 1.4rem;
}

.news-article-internal-link {
    display: grid;
    gap: var(--app-control-gap);
    padding: var(--app-surface-block-rhythm) var(--app-surface-inline-rhythm);
    border-inline-start: 3px solid var(--app-color-primary-action);
    border-radius: var(--app-control-radius);
    background: var(--card-surface-soft);
}

.news-article-internal-link :is(p, strong) {
    margin: 0;
}

.news-article-internal-link a {
    color: var(--app-color-link);
    font-weight: 800;
}

.news-embed {
    position: relative;
    width: min(100%, 42rem);
    margin-inline: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--app-surface-radius);
}

.news-article-embed-figure {
    margin: 0;
}

.news-article-embed-figure .news-embed {
    width: 100%;
}

.news-article-instagram-figure .news-instagram-card {
    width: 100%;
}

.news-youtube-card {
    display: grid;
    width: 100%;
    margin-inline: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--app-control-radius);
    background: transparent;
    box-shadow: none;
}

.news-youtube-card .news-embed {
    border-radius: 0;
}

.news-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.news-embed-spotify {
    min-height: 22rem;
    aspect-ratio: auto;
}

.news-embed-soundcloud {
    min-height: 10.5rem;
    aspect-ratio: auto;
}

.news-instagram-card {
    display: grid;
    width: 100%;
    margin-inline: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--app-control-radius);
    background: transparent;
    box-shadow: none;
}

.page-stack.ui-page-stack .news-social-coverage-actions {
    margin-block-end: var(--app-component-flow-gap);
}

.news-instagram-card-media {
    position: relative;
    display: grid;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--app-overlay-dark-soft);
    color: var(--app-color-inverse-text);
}

.news-instagram-card-media > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-instagram-card-media-fallback {
    display: grid;
    place-items: center;
}

.news-instagram-card-media-fallback svg {
    width: 4rem;
    height: 4rem;
}

.news-instagram-card-play {
    position: absolute;
    inset-inline-start: var(--app-surface-inline-rhythm);
    inset-block-end: var(--app-surface-block-rhythm);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--app-control-gap);
    padding: 0.45rem 0.7rem;
    border-radius: var(--app-control-radius);
    background: var(--app-overlay-brand-strong);
    color: var(--app-color-inverse-text);
}

.news-instagram-card-play svg {
    width: 1.65rem;
    height: 1.65rem;
}

.news-article-block .app-ad-slot-banner {
    min-height: 7.5rem;
}

.news-article-block .app-ad-slot-rectangle {
    width: min(100%, 22rem);
    min-height: 17rem;
    margin-inline: auto;
}

.news-article-block .app-ad-slot-in_article {
    min-height: 12rem;
}

.news-article-cta {
    display: grid;
    gap: var(--app-control-gap);
    padding: var(--app-surface-block-rhythm) var(--app-surface-inline-rhythm);
    background: var(--card-surface-soft);
    border: 1px solid var(--app-border-color-subtle);
    border-radius: var(--app-surface-radius);
}

.news-article-cta p {
    margin: 0;
}

.news-gallery-lightbox {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--app-color-media-viewer-text);
    box-shadow: none;
}

.news-gallery-lightbox::backdrop {
    background: var(--app-overlay-media-viewer-backdrop);
}

.news-gallery-lightbox-panel {
    position: relative;
    width: 100%;
    height: 100%;
    background: transparent;
    transition:
        opacity 180ms ease,
        transform 220ms ease;
}

.news-gallery-lightbox.is-closing .news-gallery-lightbox-panel {
    opacity: 0;
    transform: translate3d(0, 1rem, 0) scale(0.985);
}

.news-gallery-lightbox-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    padding: clamp(3.75rem, 6vw, 5rem) clamp(3.75rem, 7vw, 6rem) var(--app-control-gap);
    overflow: hidden;
    background: transparent;
}

.news-gallery-lightbox-figure {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    width: var(--news-gallery-viewer-image-width, min(100%, 80rem));
    max-width: 100%;
    max-height: 100%;
    margin: 0;
}

.news-gallery-lightbox-figure > img {
    display: block;
    justify-self: center;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100vh - 10rem);
    max-height: calc(100dvh - 10rem);
    min-width: 0;
    min-height: 0;
    object-fit: contain;
    background: transparent;
}

.news-gallery-lightbox-action {
    position: absolute;
    z-index: 2;
}

.news-gallery-lightbox-action[hidden] {
    display: none;
}

.news-gallery-lightbox-action svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.news-gallery-lightbox .news-gallery-lightbox-action.news-gallery-lightbox-close {
    inset-block-start: calc(var(--app-control-gap) / 2);
    inset-inline-end: calc(var(--app-control-gap) / 2);
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    background: var(--app-overlay-media-viewer-close);
    color: var(--app-color-media-viewer-canvas);
    box-shadow: none;
}

.news-gallery-lightbox .news-gallery-lightbox-close svg {
    width: 0.9rem;
    height: 0.9rem;
    stroke-width: 1.7;
}

.news-gallery-lightbox
.news-gallery-lightbox-action.news-gallery-lightbox-close:is(:hover, :focus-visible) {
    background: var(--app-overlay-media-viewer-close-hover);
    color: var(--app-color-media-viewer-canvas);
    box-shadow: none;
}

.news-gallery-lightbox :is(
    .news-gallery-lightbox-previous,
    .news-gallery-lightbox-next
).news-gallery-lightbox-action {
    inset-block-start: 50%;
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--app-border-color-strong);
    border-radius: 50%;
    background: var(--app-overlay-brand-strong);
    color: var(--app-color-inverse-text);
    box-shadow: var(--app-shadow-header-control-depth);
    transform: translateY(-50%);
}

.news-gallery-lightbox-previous {
    inset-inline-start: var(--app-control-gap);
}

.news-gallery-lightbox-next {
    inset-inline-end: var(--app-control-gap);
}

.news-gallery-lightbox :is(
    .news-gallery-lightbox-previous,
    .news-gallery-lightbox-next
).news-gallery-lightbox-action:is(:hover, :focus-visible) {
    border-color: var(--app-border-color-strong);
    background: var(--app-color-primary-action-hover);
    color: var(--app-color-on-primary-action);
    box-shadow: var(--app-shadow-header-control-hover);
}

.news-gallery-lightbox :is(
    .news-gallery-lightbox-previous,
    .news-gallery-lightbox-next
).news-gallery-lightbox-action:active {
    background: var(--app-color-primary-action);
    color: var(--app-color-on-primary-action);
    box-shadow: var(--app-shadow-header-control-pressed);
}

.news-gallery-lightbox-previous svg {
    transform: rotate(90deg);
}

.news-gallery-lightbox-next svg {
    transform: rotate(-90deg);
}

.news-gallery-lightbox-position {
    color: inherit;
    font: inherit;
    font-weight: 700;
}

.news-gallery-lightbox-position[hidden] {
    display: none;
}

.news-gallery-lightbox-details {
    width: 100%;
    max-height: min(24vh, 10rem);
    max-height: min(24dvh, 10rem);
    box-sizing: border-box;
    padding: 0.85rem 1rem;
    overflow: auto;
    border: 0;
    background: var(--app-surface-elevated);
    color: var(--app-text-color-body);
    box-shadow: none;
}

.news-gallery-lightbox-details[hidden] {
    display: none;
}

.news-gallery-lightbox-details p {
    margin: 0;
    color: inherit;
    font-size: var(--app-field-label-font-size);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

@media (min-width: 761px) {
    .news-article-rail:not(.mobile-carousel-active) {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 20rem));
        justify-content: start;
    }
}

@media (max-width: 640px) {
    .news-article-topline {
        align-items: stretch;
    }

    .news-article-topline .news-article-breadcrumb,
    .news-article-staff-tools {
        width: 100%;
    }

    .news-article-staff-tools {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    }

    .news-article-staff-tools .app-forward-action {
        width: 100%;
    }

    .news-article-gallery:not(.is-layout-carousel),
    .news-article-gallery.is-columns-2,
    .news-article-gallery.is-columns-3,
    .news-article-gallery.is-columns-4 {
        grid-template-columns: minmax(0, 1fr);
    }

    .news-article-gallery.is-layout-masonry,
    .news-article-gallery.is-layout-masonry.is-columns-2,
    .news-article-gallery.is-layout-masonry.is-columns-4 {
        columns: 1;
    }

    .news-article-gallery.is-layout-tiled,
    .news-article-gallery.is-layout-tiled.is-columns-2,
    .news-article-gallery.is-layout-tiled.is-columns-3,
    .news-article-gallery.is-layout-tiled.is-columns-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: clamp(7rem, 30vw, 11rem);
    }

    .news-article-gallery.is-layout-tiled > figure,
    .news-article-gallery.is-layout-tiled > figure:nth-child(n) {
        grid-column: span 1;
        grid-row: span 1;
    }

    .news-article-gallery.is-layout-tiled > figure:nth-child(5n + 1) {
        grid-column: span 2;
        grid-row: span 2;
    }

    .news-article-gallery.is-layout-editorial,
    .news-article-gallery.is-layout-editorial.is-columns-2,
    .news-article-gallery.is-layout-editorial.is-columns-3,
    .news-article-gallery.is-layout-editorial.is-columns-4 {
        grid-template-columns: minmax(0, 1fr);
    }

    .news-article-gallery.is-layout-editorial > figure,
    .news-article-gallery.is-layout-editorial > figure:nth-child(n) {
        grid-column: 1;
    }

    .news-gallery-lightbox {
        width: 100%;
        height: 100vh;
        height: 100dvh;
    }

    .news-gallery-lightbox-stage {
        padding: 3.5rem var(--app-control-gap) var(--app-control-gap);
    }

    .news-gallery-lightbox-figure > img {
        max-height: calc(100vh - 9rem);
        max-height: calc(100dvh - 9rem);
    }

    .news-gallery-lightbox-previous,
    .news-gallery-lightbox-next {
        width: 2.5rem;
        min-width: 2.5rem;
        height: 2.5rem;
    }

    .news-gallery-lightbox-details {
        max-height: min(30vh, 9rem);
        max-height: min(30dvh, 9rem);
        padding: 0.75rem;
    }

    .news-article-header h1,
    .news-article-header h2 {
        font-size: 2.125rem;
        line-height: 1.205;
    }

    .news-article-byline {
        font-size: 1rem;
    }

}

@media (prefers-reduced-motion: reduce) {
    .news-gallery-lightbox-panel {
        transition: none;
    }

    .news-gallery-lightbox.is-closing .news-gallery-lightbox-panel {
        transform: none;
    }
}

/* Shared viewport-constrained shell rows. */

.page-stack {
    display: grid;
    gap: var(--layout-section-gap);
    width: 100%;
}

.layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, auto) auto;
    grid-template-areas:
        "header"
        "content"
        "footer";
    width: 100%;
    max-width: 100%;
    height: auto;
    overflow: visible;
}

.layout::before {
    content: "";
    grid-area: header;
    display: block;
    block-size: var(--ui-header-offset);
    transition: block-size 340ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 981px) {
    body .layout::before {
        block-size: calc(
            var(--ui-header-offset)
            + var(--app-header-scroll-stage-offset, 0px)
        );
        transition: none;
    }
}

.content {
    grid-area: content;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    padding: var(--layout-shell-top-gap) 1.5rem 1.5rem;
    overflow-x: clip;
    overflow-y: visible;
    overscroll-behavior: auto;
}

:is(
    .content,
    .app-drawer,
    .sidebar,
    .museum-directory-map-list-shell
) {
    scrollbar-gutter: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--app-scrollbar-thumb) var(--app-scrollbar-track);
}

.content-wide {
    grid-column: 1 / -1;
}

.app-back-to-top {
    position: fixed;
    inset-inline-end: calc(1.5rem + env(safe-area-inset-right, 0px));
    inset-block-end: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    z-index: 30;
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    min-inline-size: 2.25rem;
    max-inline-size: 2.25rem;
    block-size: 2.25rem;
    min-block-size: 2.25rem;
    max-block-size: 2.25rem;
    padding: 0;
    border: 1px solid var(--app-color-primary-action);
    border-radius: 0;
    background: var(--app-color-primary-action);
    color: var(--app-color-on-primary-action);
    box-shadow: none;
    transition:
        background-color 160ms ease,
        color 160ms ease,
        transform 160ms ease;
}

.app-back-to-top[hidden] {
    display: none;
}

.app-back-to-top:is(:hover, :focus-visible) {
    border-color: var(--app-color-primary-action);
    background: var(--app-color-on-primary-action);
    color: var(--app-color-primary-action);
    transform: translateY(-2px);
}

.app-back-to-top-arrows {
    display: grid;
    place-items: center;
}

.app-back-to-top-arrows svg {
    width: 0.9rem;
    height: 0.9rem;
    fill: none;
    stroke: currentColor;
    stroke-width: var(--app-icon-stroke-width-standard);
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: rotate(180deg);
}

:is(
    .content,
    .app-drawer,
    .sidebar,
    .modal-card,
    .museum-directory-map-list-shell,
    .museum-action-report-table-shell,
    .app-slide-prompt-card
)::-webkit-scrollbar {
    width: var(--app-scrollbar-size);
    height: var(--app-scrollbar-size);
}

:is(
    .modal-card,
    .museum-action-report-table-shell,
    .app-slide-prompt-card
)::-webkit-scrollbar-track {
    border: 1px solid var(--app-scrollbar-track-border);
    border-radius: 999px;
    background:
        var(--app-gradient-muted);
    box-shadow:
        var(--shadow-soft);
}

:is(
    .content,
    .app-drawer,
    .sidebar,
    .museum-directory-map-list-shell
)::-webkit-scrollbar-track {
    border: 0;
    background: transparent;
    box-shadow: none;
}

:is(
    .content,
    .app-drawer,
    .sidebar,
    .modal-card,
    .museum-directory-map-list-shell,
    .museum-action-report-table-shell,
    .app-slide-prompt-card
)::-webkit-scrollbar-thumb {
    border: 3px solid var(--app-scrollbar-track);
    border-radius: 999px;
    background: var(--app-scrollbar-thumb);
    box-shadow: var(--app-scrollbar-shadow);
}

:is(
    .content,
    .app-drawer,
    .sidebar,
    .modal-card,
    .museum-directory-map-list-shell,
    .museum-action-report-table-shell,
    .app-slide-prompt-card
)::-webkit-scrollbar-thumb:hover {
    background: var(--app-scrollbar-thumb-hover);
}

:is(
    .content,
    .app-drawer,
    .sidebar,
    .modal-card,
    .museum-directory-map-list-shell,
    .museum-action-report-table-shell,
    .app-slide-prompt-card
)::-webkit-scrollbar-corner {
    background: transparent;
}

@media (max-width: 980px) {
    .content {
        padding-inline: 1rem;
    }
}

@media (max-width: 700px) {
    .app-back-to-top {
        inset-inline-end: calc(1rem + env(safe-area-inset-right, 0px));
        inset-block-end: calc(1rem + env(safe-area-inset-bottom, 0px));
        inline-size: 2rem;
        min-inline-size: 2rem;
        max-inline-size: 2rem;
        block-size: 2rem;
        min-block-size: 2rem;
        max-block-size: 2rem;
    }

    .auth-shell .layout {
        grid-template-rows: auto minmax(0, auto) auto;
        height: auto;
        overflow: visible;
    }

    .auth-shell .content {
        min-height: 0;
        height: auto;
        padding: var(--layout-shell-top-gap) 0.85rem 0.85rem;
        overflow-y: visible;
    }
}

/*
 * Authenticated sidebar account and navigation groups.
 * The shell owns these compact sidebar-only arrangements.
 */

.sidebar-account-box {
    display: grid;
    justify-items: start;
    width: 100%;
    min-width: 0;
    padding: 0.75rem 0.2rem 0.95rem;
    border: 0;
    border-bottom: 1px solid var(--app-border-color-subtle);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.sidebar-navigation-actions.app-inner-shell {
    --app-sidebar-nav-gap: 0.275rem;
    --app-sidebar-divider-gap: 0.7rem;
    --app-sidebar-nav-row-size: 2rem;
    --app-nav-link-padding-y: 0.32rem;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    box-sizing: border-box;
}

.sidebar-navigation-actions.app-inner-shell {
    padding-bottom: clamp(1.25rem, 3vh, 2rem);
    display: flex;
    flex-direction: column;
    gap: var(--app-sidebar-nav-gap);
    min-height: 0;
}

.sidebar-navigation-actions.app-inner-shell:is(:hover, :focus-within) {
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
}

.sidebar-follow-section {
    display: grid;
    justify-items: stretch;
    gap: 0.12rem;
    width: 100%;
    min-width: 0;
    padding: 0.65rem 0 0.75rem;
    border-bottom: 1px solid var(--app-border-color-subtle);
}

.sidebar-follow-section[hidden] {
    display: none;
}

.sidebar-follow-section > .shared-follow-button-row {
    justify-self: center;
}
.sidebar-account-box .welcome-note {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.22rem;
    width: 100%;
    min-width: 0;
    margin: 0;
    line-height: 1.1;
    text-align: left;
}

.sidebar-account-box .welcome-note-greeting {
    flex: 0 0 auto;
    min-width: 0;
    max-width: none;
    overflow: visible;
    color: var(--app-text-color-strong);
    font-size: 0.92rem;
    font-weight: 950;
    line-height: 1.1;
    text-align: left;
    overflow-wrap: anywhere;
    white-space: normal;
}

.sidebar-account-box .header-account-logout-line {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: baseline;
    justify-content: flex-start;
    gap: 0.2rem;
    color: var(--app-text-color-muted);
    font-size: 0.76rem;
    line-height: 1.15;
    text-align: left;
    white-space: nowrap;
}

.sidebar-account-box .header-inline-logout {
    color: var(--app-color-primary-action);
}

/*
 * Shared slide prompts.
 * Owns Newsletter and Privacy Choices backdrop, stacking, placement,
 * responsive sheet geometry, directional fallback motion, and reduced-motion
 * behavior.
 */
.app-slide-prompt-backdrop[hidden],
.app-slide-prompt[hidden] {
    display: none;
}

.app-slide-prompt-backdrop {
    position: fixed;
    inset: 0;
    z-index: 69;
    background: var(--app-overlay-brand-strong);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--app-overlay-backdrop-duration) ease;
}

.app-slide-prompt-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.app-slide-prompt {
    position: fixed;
    right: clamp(0.8rem, 2vw, 1.35rem);
    bottom: 0;
    z-index: 70;
    width: min(42rem, calc(100% - 1.6rem));
    max-height: calc(100dvh - 1.6rem);
    overflow: visible;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, var(--app-overlay-sheet-translate), 0);
    transform-origin: bottom center;
    transition:
        opacity var(--app-overlay-surface-opacity-duration) ease,
        transform var(--app-overlay-surface-transform-duration) var(--app-overlay-surface-easing);
}

.app-slide-prompt.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
}

.app-slide-prompt-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 0.78rem;
    max-height: inherit;
    padding: 1rem;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--app-color-link) var(--app-overlay-brand-strong);
    border-radius: 18px 18px 0 0;
}

/*
 * The shell mounts Newsletter and Privacy Choices in one fixed bottom stack.
 * Consent is last in DOM order and owns the bottom slot when both are visible.
 */
.app-slide-prompt-stack {
    position: fixed;
    right: clamp(0.8rem, 2vw, 1.35rem);
    bottom: 0;
    z-index: 70;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(0.55rem, 1.4vw, 0.8rem);
    width: min(42rem, calc(100% - 1.6rem));
    max-height: calc(100dvh - 1.6rem - env(safe-area-inset-bottom));
    padding: 0.25rem 0.25rem env(safe-area-inset-bottom);
    overflow-x: hidden;
    overflow-y: auto;
    pointer-events: none;
    scrollbar-width: thin;
    scrollbar-color: var(--app-scrollbar-thumb) var(--app-scrollbar-track);
}

.app-slide-prompt-stack > .app-slide-prompt {
    position: relative;
    inset: auto;
    z-index: auto;
    flex: 0 0 auto;
    width: 100%;
    max-height: none;
}

.app-slide-prompt-stack > .app-slide-prompt > .app-slide-prompt-card {
    max-height: none;
}

/*
 * Every responsive popup uses the same full-width, safe-area-aware sheet
 * boundary at the shell's 980px responsive breakpoint.
 */
@media (max-width: 980px) {
    .app-slide-prompt {
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-height: var(--app-overlay-sheet-max-height);
        transform: translate3d(0, var(--app-overlay-sheet-translate), 0);
        transform-origin: bottom center;
    }

    .app-slide-prompt-card {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: 0.7rem;
        padding: 0.9rem;
    }

    .app-slide-prompt-copy {
        padding-right: 1.9rem;
    }

    .app-slide-prompt-actions {
        padding-right: 0;
    }

    .app-slide-prompt-stack {
        inset: auto 0 0;
        width: 100%;
        max-height: var(--app-overlay-sheet-max-height);
        gap: 0.5rem;
        padding: 0 0 env(safe-area-inset-bottom);
    }
}

@media (max-width: 420px), (max-height: 360px) {
    .app-slide-prompt-card {
        gap: 0.42rem;
        padding: 0.58rem;
    }

    .app-slide-prompt-copy {
        gap: 0.2rem;
        padding-right: 1.3rem;
    }

    .app-slide-prompt-actions {
        gap: 0.24rem;
        padding-right: 0;
    }
}

@media (max-height: 260px) {
    .app-slide-prompt-card {
        gap: 0.28rem;
        padding: 0.44rem;
    }

    .app-slide-prompt-actions {
        padding-right: 1.4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-slide-prompt-backdrop,
    .app-slide-prompt {
        transition: none;
        transform: none;
    }
}

/*
 * Newsletter content inside the shared .app-slide-prompt component.
 * The shared prompt and premium balloon owners provide placement, surface, motion, and close controls.
 */

.newsletter-prompt-copy {
    display: grid;
    gap: 0.32rem;
    min-width: 0;
    padding-right: 2.35rem;
    text-align: left;
}

.newsletter-prompt-title {
    margin: 0;
    color: var(--app-text-color-heading);
    font-family: var(--app-font-family-base);
    font-size: clamp(1.05rem, 1.7vw, 1.35rem);
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.newsletter-prompt .newsletter-tagline,
.newsletter-prompt-note,
.newsletter-prompt-status {
    margin: 0;
    color: var(--app-text-color-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.newsletter-prompt-note {
    color: var(--app-text-color-accent);
    font-weight: 850;
}

.newsletter-prompt-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.38rem;
    min-width: 0;
    padding-right: 0;
}

.newsletter-prompt-field {
    display: grid;
    min-width: 0;
}

.newsletter-prompt-status.is-error {
    color: var(--app-color-danger);
}

.newsletter-prompt-status.is-success {
    color: var(--app-color-link);
}

@media (max-width: 420px), (max-height: 360px) {
    .newsletter-prompt-title {
        font-size: 0.88rem;
        line-height: 1.05;
    }

    .newsletter-prompt .newsletter-tagline,
    .newsletter-prompt-note,
    .newsletter-prompt-status {
        font-size: 0.68rem;
        line-height: 1.2;
    }

}

@media (max-height: 260px) {
    .newsletter-prompt-title {
        font-size: 0.76rem;
    }

    .newsletter-prompt .newsletter-tagline,
    .newsletter-prompt-note {
        font-size: 0.6rem;
        line-height: 1.1;
    }
}

.contact-form,
.contact-message-actions,
.contact-history-list,
.contact-preference-form {
    display: grid;
    gap: var(--app-component-flow-gap);
}

.contact-filter-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--app-component-flow-gap);
    align-items: end;
}

.contact-filter-actions,
.contact-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--app-control-gap);
}

.contact-filter-actions {
    align-items: center;
}

.contact-filter-actions > :is(.btn, button),
.contact-form > :is(.btn, button),
.contact-preference-form > :is(.btn, button),
.contact-reply-form > :is(.btn, button),
.contact-note-form > :is(.btn, button) {
    width: fit-content;
    max-width: 100%;
    justify-self: start;
}

.contact-preference-form .ops-toggle-field {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    column-gap: var(--app-component-flow-gap);
    width: fit-content;
    max-width: 100%;
    cursor: pointer;
}

.contact-message-table-shell,
.contact-message-table-frame,
.contact-message-table {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

.contact-message-bulk-form {
    display: grid;
    gap: var(--app-component-flow-gap);
    min-width: 0;
}

.contact-message-bulk-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--app-control-gap);
    min-width: 0;
}

.contact-message-select-page,
.contact-message-select {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--app-control-gap);
    min-width: 0;
    cursor: pointer;
}

.contact-message-select-page {
    min-height: var(--app-control-min-height);
}

.contact-message-select {
    inline-size: var(--app-control-min-height);
    block-size: var(--app-control-min-height);
}

.contact-message-selection-count {
    min-width: 4.8rem;
    color: var(--app-text-color-muted);
    font-size: var(--app-field-label-font-size);
    font-weight: 700;
}

.contact-message-bulk-action {
    display: inline-flex;
    align-items: center;
    gap: var(--app-control-gap);
}

.contact-message-bulk-action svg,
.contact-message-delete-action svg {
    inline-size: var(--app-nav-link-icon-size);
    block-size: var(--app-nav-link-icon-size);
    fill: none;
    stroke: currentColor;
    stroke-width: var(--app-icon-stroke-width-standard);
}

.contact-message-bulk-action.btn-icon,
.contact-message-delete-action.btn-icon {
    inline-size: var(--app-control-min-height);
    padding: 0;
}

.contact-message-move-control {
    display: grid;
    grid-template-columns: max-content minmax(8rem, 1fr) max-content;
    align-items: center;
    gap: var(--app-control-gap);
    min-width: 0;
}

.contact-message-move-control select {
    min-width: 0;
}

.contact-message-table {
    table-layout: fixed;
}

.contact-message-table td,
.contact-message-table td > * {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.contact-message-record {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-areas:
        "actions time"
        "actions subject"
        "actions preview";
    align-items: start;
    gap: 0.35rem var(--app-component-flow-gap);
    width: 100%;
    min-width: 0;
}

.contact-message-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--app-control-min-height);
    block-size: var(--app-control-min-height);
}

.contact-message-time,
.contact-message-subject,
.contact-message-preview {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    min-width: 0;
    white-space: nowrap;
}

.contact-message-time {
    grid-area: time;
}

.contact-message-subject {
    grid-area: subject;
}

.contact-message-preview {
    grid-area: preview;
}

.contact-message-field-label {
    flex: 0 0 auto;
}

.contact-message-field-value,
.contact-message-time time {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-message-field-value {
    display: block;
}

.contact-message-record-actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    align-self: center;
    justify-self: start;
    gap: var(--app-control-gap);
}

.contact-message-unread .contact-message-subject {
    font-weight: 800;
}

.contact-message-table .contact-state-icon {
    display: block;
    flex: 0 0 1.05rem;
    inline-size: 1.05rem;
    block-size: 1.05rem;
    width: 1.05rem;
    height: 1.05rem;
    min-width: 1.05rem;
    min-height: 1.05rem;
    max-width: 1.05rem;
    max-height: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-width: var(--app-icon-stroke-width-standard);
    overflow: visible;
}

.contact-message-metadata {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--app-component-flow-gap);
    margin: 0;
}

.contact-message-metadata div {
    min-width: 0;
}

.contact-message-metadata dt {
    font-weight: 800;
}

.contact-message-metadata dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.contact-message-body {
    margin-top: var(--app-component-flow-gap);
    white-space: normal;
    overflow-wrap: anywhere;
}

.contact-action-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--app-control-gap);
    align-items: end;
}

.app-count-badge {
    display: inline-grid;
    place-items: center;
    min-width: 1.35rem;
    min-height: 1.35rem;
    padding-inline: 0.28rem;
    border-radius: 999px;
    background: var(--app-color-primary-action);
    color: var(--app-color-on-primary-action);
    font-size: var(--app-badge-font-size);
    line-height: 1;
}

@media (max-width: 760px) {
    .contact-filter-form,
    .contact-action-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .contact-message-bulk-toolbar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contact-message-select-page {
        justify-content: flex-start;
    }

    .contact-message-selection-count {
        justify-self: end;
        text-align: right;
    }

    .contact-message-bulk-action {
        width: 100%;
        justify-content: center;
    }

    .contact-message-bulk-action.btn-icon {
        width: var(--app-control-min-height);
        justify-self: start;
    }

    .contact-message-move-control {
        grid-column: 1 / -1;
        grid-template-columns: max-content minmax(0, 1fr) max-content;
    }
}

/* Shared, element-level loading indicators. */

[hidden] {
    display: none;
}

html [hidden] {
    display: none;
}

/* Responsive landing layouts use native hidden states for inactive sections
 * and pending cards. Keep this shared visibility owner more specific than
 * component display rules so those nodes leave focus and accessibility. */
html body #mainContent .page-stack.ui-page-stack [data-landing-collection] [hidden] {
    display: none;
}

/* Images preserve their allocated media box and remain softly blurred until
 * their current source has loaded and decoded. */
img[data-app-image-state="loading"] {
    opacity: var(--app-image-loading-opacity);
    filter: blur(var(--app-image-loading-blur));
    transition:
        opacity var(--app-image-loading-transition),
        filter var(--app-image-loading-transition);
    will-change: opacity, filter;
}

img[data-app-image-state="ready"],
img[data-app-image-state="error"] {
    opacity: 1;
    filter: none;
    transition:
        opacity var(--app-image-loading-transition),
        filter var(--app-image-loading-transition);
}

.app-element-loading-host {
    isolation: isolate;
}

.app-element-loading-host-static {
    position: relative;
}

.app-element-loader {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
    padding: clamp(0.55rem, 2vw, 1rem);
    overflow: hidden;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    background: var(--app-gradient-loader-surface);
    animation: app-element-loader-arrive 180ms 70ms ease-out forwards;
}

.app-element-loader.is-image {
    background: var(--app-gradient-loader-image-surface);
}

.app-element-loader.is-compact {
    padding: 0.25rem;
}

.app-navigation-transition {
    position: fixed;
    inset:
        var(--app-navigation-transition-top, 0)
        var(--app-navigation-transition-right, 0)
        var(--app-navigation-transition-bottom, 0)
        var(--app-navigation-transition-left, 0);
    z-index: var(--app-layer-navigation-transition);
    border-radius: 0;
    pointer-events: none;
    background: var(--app-gradient-loader-surface);
    animation: app-navigation-transition-arrive 160ms ease-out forwards;
}

.app-navigation-transition .app-loader-visual {
    width: clamp(4.6rem, 10vw, 6.2rem);
}

.app-navigation-transition.is-leaving {
    animation: app-navigation-transition-leave 150ms ease-in forwards;
}

.app-loader-visual {
    position: relative;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: clamp(4.1rem, 10vw, 5.6rem);
    aspect-ratio: 1;
    padding: 0.55rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--app-text-color-strong) 14%, transparent);
    border-radius: 50%;
    background: var(--app-gradient-loader-visual);
    box-shadow: var(--app-shadow-loader-visual);
    animation: app-loader-card-breathe 1.8s ease-in-out infinite;
}

.app-element-loader.is-compact .app-loader-visual,
.app-loader-visual-compact {
    width: clamp(2.35rem, 8vw, 3rem);
    padding: 0.3rem;
    box-shadow: var(--app-shadow-loader-visual-compact);
}

.app-loader-visual::before {
    content: "";
    position: absolute;
    inset: 0.28rem;
    border-radius: inherit;
    background: var(--app-gradient-loader-orbit);
    -webkit-mask: var(--app-gradient-loader-mask);
    mask: var(--app-gradient-loader-mask);
    animation: app-loader-orbit-spin 1.55s linear infinite;
}

.app-loader-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--app-gradient-loader-sheen);
    opacity: 0.44;
    pointer-events: none;
    transform: translateX(-110%);
    animation: app-loader-sheen 1.8s ease-in-out infinite;
}

.app-loader-orbit {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid color-mix(in srgb, var(--app-text-color-strong) 13%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--app-surface-card) 42%, transparent);
    box-shadow: var(--app-shadow-loader-orbit);
}

.app-loader-orbit::before,
.app-loader-orbit::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.app-loader-orbit::before {
    inset: 0.14rem;
    border: 1px solid transparent;
    border-block-start-color: color-mix(in srgb, var(--app-text-color-strong) 42%, transparent);
    border-inline-end-color: color-mix(in srgb, var(--app-text-color-strong) 18%, transparent);
    animation: app-loader-orbit-counterspin 1.05s linear infinite;
}

.app-loader-orbit::after {
    inset: 18%;
    background: var(--app-gradient-loader-core);
    filter: blur(0.2rem);
    animation: app-loader-core-pulse 1.4s ease-in-out infinite alternate;
}

.app-loader-ring {
    position: absolute;
    inset: 9%;
    z-index: 1;
    border: 1px dashed color-mix(in srgb, var(--app-text-color-strong) 18%, transparent);
    border-radius: 50%;
    animation: app-loader-orbit-spin 4.6s linear infinite reverse;
}

.app-loader-emblem {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 46%;
    aspect-ratio: 1;
    animation: app-loader-mark-float 1.45s cubic-bezier(0.45, 0, 0.2, 1) infinite alternate;
}

.app-loader-mark {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0.3rem 0.5rem color-mix(in srgb, var(--app-text-color-strong) 18%, transparent));
}

.app-loader-monogram {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding-block-start: 0.3em;
    color: white;
    font-family: var(--app-font-family-base);
    font-size: clamp(0.4rem, 1.05vw, 0.56rem);
    font-weight: 850;
    letter-spacing: 0.1em;
    line-height: 1;
    text-indent: 0.1em;
    text-shadow: var(--app-shadow-loader-monogram);
}

.app-element-loader.is-compact .app-loader-monogram,
.app-loader-visual-compact .app-loader-monogram {
    font-size: 0.28rem;
}

html[data-theme="dark"] .app-loader-mark {
    filter: invert(1) drop-shadow(0 0.3rem 0.5rem color-mix(in srgb, white 22%, transparent));
}

html[data-theme="dark"] .app-loader-monogram {
    color: black;
    text-shadow: var(--app-shadow-loader-monogram-dark);
}

@keyframes app-element-loader-arrive {
    to { opacity: 1; }
}

@keyframes app-navigation-transition-arrive {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes app-navigation-transition-leave {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes app-loader-orbit-spin {
    to { transform: rotate(1turn); }
}

@keyframes app-loader-orbit-counterspin {
    to { transform: rotate(-1turn); }
}

@keyframes app-loader-mark-float {
    from { transform: translate3d(0, 0.08rem, 0) rotate(-2deg) scale(0.96); }
    to { transform: translate3d(0, -0.09rem, 0) rotate(2deg) scale(1.04); }
}

@keyframes app-loader-core-pulse {
    from { opacity: 0.58; transform: scale(0.84); }
    to { opacity: 1; transform: scale(1.08); }
}

@keyframes app-loader-card-breathe {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-0.1rem) scale(1.018); }
}

@keyframes app-loader-sheen {
    0%, 26% { transform: translateX(-110%); }
    68%, 100% { transform: translateX(110%); }
}

@media (prefers-reduced-motion: reduce) {
    img[data-app-image-state] {
        transition: none;
    }

    .app-element-loader {
        opacity: 1;
        animation: none;
    }

    .app-navigation-transition,
    .app-navigation-transition.is-leaving {
        animation: none;
    }

    .app-loader-visual,
    .app-loader-visual::before,
    .app-loader-visual::after,
    .app-loader-orbit::before,
    .app-loader-orbit::after,
    .app-loader-ring,
    .app-loader-emblem {
        animation: none;
    }
}

/* Shared buttons, editorial fields, motion, and table containment. */

:where(button, a[href], [role="button"]) {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

:where(button) {
    appearance: none;
}

:where(button:not(:disabled), a[href], [role="button"]:not([aria-disabled="true"])) {
    cursor: pointer;
}

:where(button, a[href], [role="button"]):focus-visible {
    outline: 2px solid var(--app-color-focus);
    outline-offset: 2px;
}

/* Drawers and modal shells receive programmatic focus only to establish the
   accessible focus boundary. The shell itself must never render a browser
   focus frame; keyboard focus remains visible on its interactive controls. */
:where(.app-drawer, [role="dialog"])[tabindex="-1"]:focus {
    outline: 0;
}

.btn,
.btn-primary,
.btn-outline,
.btn-danger,
.btn-quiet,
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--app-control-gap);
    min-height: var(--app-control-min-height);
    padding: var(--app-control-padding-y) var(--app-control-padding-x);
    border: 0;
    border-radius: calc(var(--app-control-radius) + 2px);
    background: var(--app-surface-card);
    color: var(--app-color-primary-text);
    box-shadow: none;
    font-size: 0.88rem;
    font-weight: 650;
    letter-spacing: 0;
    text-decoration: none;
    cursor: pointer;
    transition:
        color 0.16s ease,
        background-color 0.16s ease,
        box-shadow 0.16s ease;
}

.btn:hover {
    background: var(--app-interactive-hover-surface);
    color: var(--app-interactive-hover-text);
    box-shadow: none;
}

.btn:active,
.btn-primary:active,
.btn-outline:active,
.btn-danger:active,
.btn-quiet:active,
.btn-icon:active {
    box-shadow: none;
    transform: none;
}

.btn-primary {
    background: var(--app-color-primary-action);
    color: var(--app-color-on-primary-action);
}

.btn-primary:hover {
    background: var(--app-color-primary-action-hover);
    color: var(--app-color-on-primary-action);
}

.btn-outline {
    background: transparent;
    color: var(--app-color-primary-action);
    box-shadow: none;
}

.btn-quiet,
.btn-icon {
    background: transparent;
    color: var(--app-color-primary-action);
    box-shadow: none;
}

:is(.btn-outline, .btn-quiet, .btn-icon):hover {
    background: var(--app-interactive-hover-surface);
    color: var(--app-interactive-hover-text);
}

.btn-danger {
    background: var(--app-color-primary-action);
    color: var(--app-color-on-primary-action);
}

.btn-danger:hover {
    background: var(--app-color-primary-action-hover);
    color: var(--app-color-on-primary-action);
}

/* Body navigation actions share one quiet default and one explicit hover.
   Structural/title/media links and shell navigation keep their own contracts. */
#mainContent :where(
    a.btn:not(.btn-danger):not(.app-forward-action):not(.app-workspace-menu-option):not(.app-no-forward-action),
    a.app-text-link:not(.app-no-forward-action),
    a.home-action-button:not(.app-no-forward-action),
    a.ops-table-link:not(.app-no-forward-action)
):not([aria-current="page"]) {
    border: 0;
    background: transparent;
    color: var(--app-color-primary-action);
    box-shadow: none;
    text-decoration: none;
}

#mainContent :where(
    a.btn:not(.btn-danger):not(.app-forward-action):not(.app-workspace-menu-option):not(.app-no-forward-action),
    a.app-text-link:not(.app-no-forward-action),
    a.home-action-button:not(.app-no-forward-action),
    a.ops-table-link:not(.app-no-forward-action)
):not([aria-current="page"]):hover {
    background: var(--app-interactive-hover-surface);
    color: var(--app-interactive-hover-text);
    box-shadow: none;
    text-decoration: none;
}

#mainContent :where(
    a.btn:not(.btn-danger):not(.app-forward-action):not(.app-workspace-menu-option):not(.app-no-forward-action),
    a.app-text-link:not(.app-no-forward-action),
    a.home-action-button:not(.app-no-forward-action),
    a.ops-table-link:not(.app-no-forward-action)
)::after {
    content: none;
    display: none;
}

/* Explicit forward actions use the shared black primary-button treatment.
   State, destructive, modal, tab, pagination, disclosure, and icon-only
   controls do not use this class. */
:where(button, a).app-forward-action {
    border: 0;
    background: var(--app-color-primary-action);
    color: var(--app-color-on-primary-action);
    box-shadow: none;
}

:where(button, a).app-forward-action:hover {
    border: 0;
    background: var(--app-color-primary-action-hover);
    color: var(--app-color-on-primary-action);
    box-shadow: none;
}

:where(button, a).app-forward-action::after {
    content: none;
    display: none;
}

:where(button, a).app-no-forward-action::after {
    content: none;
    display: none;
}

#mainContent :where(.museum-exhibition-pagination, .newsroom-pagination) a.btn::after {
    content: none;
    display: none;
}

.btn-icon {
    inline-size: var(--app-control-min-height);
    width: var(--app-control-min-height);
    min-inline-size: var(--app-control-min-height);
    min-width: var(--app-control-min-height);
    padding: 0;
}

:is(
    .btn,
    .btn-primary,
    .btn-outline,
    .btn-danger,
    .btn-quiet,
    .btn-icon
):focus-visible {
    outline: 2px solid var(--app-color-focus);
    outline-offset: 2px;
    box-shadow: none;
}

:is(
    .btn,
    .btn-primary,
    .btn-outline,
    .btn-danger,
    .btn-quiet,
    .btn-icon
):is(:disabled, [aria-disabled="true"], .is-disabled) {
    opacity: 0.48;
    cursor: not-allowed;
    transform: none;
}

.app-text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.28em;
    color: var(--app-color-link);
    font-size: 0.92em;
    font-weight: 600;
    text-decoration-line: none;
    text-decoration-thickness: 0.08em;
    text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
    text-underline-offset: 0.18em;
    cursor: pointer;
    transition:
        color 0.16s ease,
        text-decoration-color 0.16s ease;
}

.app-text-link:hover {
    color: var(--app-color-link-hover);
    text-decoration-line: underline;
    text-decoration-color: currentColor;
}

.app-text-link:focus-visible {
    border-radius: 2px;
    outline: 2px solid var(--app-color-focus);
    outline-offset: 3px;
    color: var(--app-color-link-hover);
    text-decoration-line: underline;
    text-decoration-color: currentColor;
}

@media (max-width: 520px) {
    :is(.btn, .btn-primary, .btn-outline, .btn-danger, .btn-quiet):not(.btn-icon) {
        max-width: 100%;
        padding-inline: 0.78rem;
        white-space: normal;
    }
}

:where(.account-details-table-shell, .ops-table-shell) {
    box-sizing: border-box;
    inline-size: 100%;
    width: 100%;
    max-inline-size: 100%;
    max-width: 100%;
    min-inline-size: 0;
    min-width: 0;
}

:where(.account-details-table-shell, .ops-table-shell) > table {
    box-sizing: border-box;
    inline-size: 100%;
    width: 100%;
    min-inline-size: 0;
    min-width: 0;
}

:where(.account-details-table-shell, .ops-table-shell) :is(th, td, button, a, label, input, select, textarea) {
    min-inline-size: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto;
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
    }

}

/*
 * Canonical editorial forms.
 * Variants arrange the same accessible controls; domain styles must not
 * redefine control state, border, radius, or typography.
 */

:where(.page-stack, .app-drawer, .newsletter-prompt) form {
    min-inline-size: 0;
}

:where(form) fieldset {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.app-form,
.auth-form,
.newsroom-form-panel form,
[data-media-upload-form] {
    display: grid;
    gap: var(--app-form-field-gap);
    width: min(100%, var(--app-form-readable-width));
    min-width: 0;
}

.app-form--compact,
.app-form--search,
.app-form--inline,
.app-form--staff,
.newsroom-taxonomy-filters,
.newsroom-article-filters,
.newsroom-media-search,
.ops-table-form {
    --app-field-min-height: var(--app-field-compact-min-height);
    --app-field-icon-size: var(--app-field-compact-min-height);
    gap: var(--app-form-compact-field-gap);
}

.ops-user-editor-form,
.ops-email-delivery-form {
    --app-field-min-height: var(--app-field-compact-min-height);
    --app-field-icon-size: var(--app-field-compact-min-height);
}

.app-form--inline,
.app-form--search,
.newsroom-taxonomy-filters,
.newsroom-media-search {
    width: 100%;
}

.app-form-field,
:where(form) label:has(> input:not([type="checkbox"]):not([type="radio"])),
:where(form) label:has(> select),
:where(form) label:has(> textarea) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--app-field-label-gap);
    min-width: 0;
}

:where(form) :is(label, legend) {
    min-inline-size: 0;
    color: var(--app-text-color-strong);
    font-family: var(--app-font-family-base);
    font-size: var(--app-field-label-font-size);
    font-weight: var(--app-field-label-font-weight);
    letter-spacing: 0.01em;
    line-height: 1.35;
    text-transform: none;
}

.app-required-mark {
    margin-inline-start: 0.18em;
    color: var(--app-form-accent);
}

:where(form) :is(.helptext, .help-text, [data-field-help]) {
    max-width: 68ch;
    color: var(--app-text-color-muted);
    font-size: 0.82rem;
    font-style: normal;
    line-height: 1.5;
}

.app-form-privacy-note {
    width: 100%;
    margin: 0;
    color: var(--app-text-color-muted);
    font-size: 0.78rem;
    font-weight: 550;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

:where(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
    select,
    textarea,
    [contenteditable="true"]
) {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: var(--app-field-min-height);
    padding: var(--app-field-padding-y) var(--app-field-padding-x);
    border: 1px solid var(--app-field-border-color);
    border-radius: var(--app-field-radius);
    outline: 0;
    background: var(--app-field-surface);
    color: var(--app-field-text-color);
    box-shadow: var(--app-field-shadow-resting);
    caret-color: var(--app-form-accent);
    color-scheme: inherit;
    font: var(--app-field-value-font-weight) var(--app-field-value-font-size)/1.4 var(--app-font-family-base);
    transition: border-color var(--app-motion-duration-fast) var(--app-motion-ease-standard),
        box-shadow var(--app-motion-duration-fast) var(--app-motion-ease-standard),
        background-color var(--app-motion-duration-fast) var(--app-motion-ease-standard);
}

:where(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
    select,
    textarea,
    [contenteditable="true"]
):not(:disabled):not([readonly]):hover {
    border-color: var(--app-field-hover-border-color);
    box-shadow: var(--app-field-shadow-hover);
}

:where(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
    select,
    textarea,
    [contenteditable="true"]
):focus-visible {
    border-color: var(--app-field-focus-border-color);
    box-shadow: var(--app-field-focus-ring);
}

:where(input, textarea)::placeholder {
    color: var(--app-field-placeholder-color);
    opacity: 0.82;
}

:where(input, textarea):-webkit-autofill {
    -webkit-text-fill-color: var(--app-field-text-color);
    box-shadow: var(--app-shadow-field-autofill);
    caret-color: var(--app-form-accent);
}

:where(textarea) {
    min-height: 9rem;
    line-height: 1.55;
    resize: vertical;
}

:where(select) {
    appearance: none;
    padding-inline-end: calc(var(--app-field-padding-x) + 1.35rem);
    background-image: var(--app-field-select-chevron);
    background-repeat: no-repeat;
    background-position: right var(--app-field-padding-x) center;
    background-size: 0.72rem auto;
    cursor: pointer;
}

:where(input[type="file"]) {
    padding: 0.35rem;
}

:where(input[type="file"])::file-selector-button {
    min-height: calc(var(--app-field-min-height) - 0.7rem);
    margin-inline-end: var(--app-field-padding-x);
    padding-inline: var(--app-control-padding-x);
    border: 0;
    border-radius: 3px;
    background: var(--app-form-accent);
    color: var(--app-form-accent-contrast);
    font-weight: 700;
    cursor: pointer;
}

:where(input, select, textarea):is(:disabled, [readonly]) {
    background: var(--app-color-muted-surface);
    color: var(--app-text-color-muted);
    cursor: not-allowed;
    opacity: 1;
    box-shadow: none;
}

:where(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--app-color-danger);
    box-shadow: var(--app-field-invalid-ring);
}

/* Prevent iOS Safari from enlarging the page when a compact field receives
 * focus. Browser zoom remains available; only automatic field-focus zoom is
 * avoided by keeping editable text at the platform's 16px threshold. */
@media (max-width: 760px) {
    :where(
        input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
        select,
        textarea,
        [contenteditable="true"]
    ) {
        font-size: 1rem;
    }
}

.app-choice-field {
    grid-template-columns: 2.75rem minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    min-height: 44px;
    cursor: pointer;
}

:where(input[type="checkbox"], input[type="radio"]) {
    appearance: none;
    display: grid;
    place-content: center;
    box-sizing: border-box;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    border: 1px solid var(--app-field-hover-border-color);
    background: var(--app-field-surface);
    cursor: pointer;
}

:where(input[type="checkbox"]) { border-radius: 3px; }
:where(input[type="radio"]) { border-radius: 50%; }
:where(input[type="checkbox"], input[type="radio"])::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    background: var(--app-form-accent-contrast);
    transform: scale(0);
    transition: transform var(--app-motion-duration-fast) var(--app-motion-ease-emphasis);
}
:where(input[type="radio"])::before { border-radius: 50%; }
:where(input[type="checkbox"], input[type="radio"]):checked {
    border-color: var(--app-form-accent);
    background: var(--app-form-accent);
}
:where(input[type="checkbox"], input[type="radio"]):checked::before { transform: scale(1); }
:where(input[type="checkbox"], input[type="radio"]):focus-visible {
    outline: 2px solid var(--app-field-focus-border-color);
    outline-offset: 3px;
}

.app-form-error-summary,
.app-field-errors,
.app-form-errors,
:where(form) .errorlist {
    margin: 0;
    padding: 0.75rem 0.9rem;
    border-inline-start: 3px solid var(--app-color-danger);
    border-radius: var(--app-field-radius);
    background: var(--app-surface-danger);
    color: var(--app-color-danger);
    line-height: 1.45;
    list-style: none;
}

.app-form-error-summary:focus { outline: 2px solid var(--app-color-danger); outline-offset: 2px; }
.app-form-error-summary p,
.app-form-error-summary ul { margin: 0; }
.app-form-error-summary ul { padding-inline-start: 1.15rem; }
.app-form-error-summary a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.14em; }
.app-field-errors { padding-block: 0.48rem; background: transparent; font-size: 0.82rem; }

:where(.app-form, .auth-form) > :is(button[type="submit"], input[type="submit"], .btn) {
    min-height: var(--app-auth-button-min-height);
}

.app-input-group {
    display: grid;
    grid-template-columns: var(--app-field-icon-size) minmax(0, 1fr);
    align-items: stretch;
    min-width: 0;
    min-height: var(--app-field-min-height);
    overflow: hidden;
    border: 1px solid var(--app-field-border-color);
    border-radius: var(--app-field-radius);
    background: var(--app-field-surface);
    box-shadow: var(--app-field-shadow-resting);
    transition: border-color var(--app-motion-duration-fast) var(--app-motion-ease-standard),
        box-shadow var(--app-motion-duration-fast) var(--app-motion-ease-standard),
        background-color var(--app-motion-duration-fast) var(--app-motion-ease-standard);
}
.app-input-group.has-app-search-clear { grid-template-columns: var(--app-field-icon-size) minmax(0, 1fr) var(--app-field-icon-size); }
.app-input-group--plain-search.has-app-search-clear { grid-template-columns: minmax(0, 1fr) var(--app-field-icon-size); }
.app-input-group--plain-search.has-app-search-clear > input[type="search"] { grid-column: 1; }
.app-input-group--plain-search.has-app-search-clear > .app-input-clear { grid-column: 2; }
.app-input-group:hover { border-color: var(--app-field-hover-border-color); box-shadow: var(--app-field-shadow-hover); }
.app-input-group:focus-within { border-color: var(--app-field-focus-border-color); box-shadow: var(--app-field-focus-ring); }

/* Local search disclosures retain one clear focus edge. Their former outer
 * halo was clipped by narrow/filter owners and appeared as two vertical bars. */
#mainContent .app-local-search-disclosure .app-input-group:focus-within {
    border-color: var(--app-field-focus-border-color);
    box-shadow: none;
}
.app-input-icon,
.app-input-clear {
    display: grid;
    place-items: center;
    width: var(--app-field-icon-size);
    min-width: var(--app-field-icon-size);
    min-height: calc(var(--app-field-min-height) - 2px);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: 0;
    appearance: none;
    background: transparent;
    color: var(--app-form-accent);
}
.app-input-icon { pointer-events: none; }
.app-input-clear { grid-column: 3; cursor: pointer; }
.app-input-clear[hidden] { display: none; }
.app-input-clear:hover {
    background: var(--app-interactive-hover-surface);
    color: var(--app-interactive-hover-text);
}
.app-input-clear:focus-visible {
    outline: 0;
    background: color-mix(
        in srgb,
        var(--app-field-focus-accent) 10%,
        var(--app-field-surface)
    );
    color: var(--app-field-focus-accent);
    box-shadow: none;
}
.app-input-icon > svg,
.app-input-clear > svg {
    width: var(--app-field-icon-glyph-size);
    height: var(--app-field-icon-glyph-size);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}
.app-input-group > :is(input, select, textarea) {
    appearance: none;
    min-height: calc(var(--app-field-min-height) - 2px);
    margin: 0;
    border: 0;
    border-radius: 0;
    outline: 0;
    padding-inline-start: 0;
    background-color: transparent;
    box-shadow: none;
}
.app-input-group > :is(input, select, textarea):is(:hover, :focus, :focus-visible) {
    border: 0;
    outline: 0;
    box-shadow: none;
}
/* The group shell owns the complete field edge and focus indicator. Icons,
 * editable controls, and optional clear actions never paint internal column
 * dividers at rest, on hover, or while any grouped control has focus. */
.app-input-group > :is(.app-input-icon, input, select, textarea, .app-input-clear),
.app-input-group:is(:hover, :focus-within) > :is(.app-input-icon, input, select, textarea, .app-input-clear),
.app-input-group > :is(.app-input-icon, input, select, textarea, .app-input-clear):is(:hover, :focus, :focus-visible) {
    border: 0;
    border-inline: 0;
    outline: 0;
    box-shadow: none;
}

input[type="search"] { appearance: none; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    appearance: none;
    display: none;
}

form[aria-busy="true"] { cursor: progress; }
form[aria-busy="true"] :is(input, select, textarea) { opacity: 0.78; }

@media (max-width: 700px) {
    .app-form,
    .auth-form,
    .newsroom-form-panel form,
    [data-media-upload-form] { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    :where(form) :is(input, select, textarea, button) { transition-duration: 0.01ms; }
}

/*
 * Shared searchable tab combobox.
 *
 * Domain tab buttons remain the state authority but are visually hidden after
 * the progressive control is mounted. The generated combobox is the one
 * visible choice surface on every viewport.
 */

.museum-tabs,
.account-favorite-kind-tabs {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: var(--app-tabs-gap);
    min-width: 0;
}

:is(.museum-tab, .account-favorite-kind-tab) {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: var(--app-control-min-height);
    margin: 0;
    padding: var(--app-control-padding-y) var(--app-control-padding-x);
    border: 0;
    border-radius: calc(var(--app-control-radius) + 2px);
    background: transparent;
    color: var(--app-text-color-strong);
    box-shadow: none;
    font: inherit;
    font-weight: 750;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
        color 160ms ease,
        background-color 160ms ease,
        transform 160ms ease;
}

:is(.museum-tab, .account-favorite-kind-tab):hover {
    background: var(--app-interactive-hover-surface);
    color: var(--app-interactive-hover-text);
    transform: translateY(-1px);
}

:is(.museum-tab, .account-favorite-kind-tab):focus-visible {
    outline: 2px solid var(--app-color-focus);
    outline-offset: 2px;
}

:is(.museum-tab, .account-favorite-kind-tab):is(
    .is-active,
    [aria-selected="true"],
    [aria-pressed="true"]
) {
    background: var(--app-surface-selected);
    color: var(--app-color-primary-action-hover);
}

:is(.museum-tab, .account-favorite-kind-tab):active {
    transform: translateY(1px);
}

:is(.museum-tab, .account-favorite-kind-tab):is(:disabled, [aria-disabled="true"]) {
    opacity: 0.48;
    cursor: not-allowed;
    transform: none;
}

.mobile-tab-select-wrap.app-tab-combobox {
    position: relative;
    z-index: 24;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--app-component-flow-gap);
    box-sizing: border-box;
    width: min(100%, var(--app-inline-search-max-width, 42rem));
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.mobile-tab-select-wrap.app-tab-combobox.is-open {
    z-index: 25;
}

#mainContent .page-stack.ui-page-stack
    .account-section-menu-card > .mobile-tab-select-wrap.app-tab-combobox {
    width: 100%;
    justify-self: stretch;
}

.mobile-tab-select-wrap.app-tab-combobox .mobile-tab-select-label {
    color: var(--app-text-color-strong);
    font-size: var(--app-field-label-font-size);
    font-weight: var(--app-field-label-font-weight);
    line-height: 1.3;
    letter-spacing: 0.015em;
}

.app-tab-combobox-control {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    min-width: 0;
}

.app-tab-combobox-toggle {
    width: 100%;
    min-width: 0;
    min-height: var(--app-field-min-height);
    border: 1px solid var(--app-field-border-color);
    border-block-end-width: 2px;
    border-block-end-color: var(--app-field-focus-border-color);
    border-radius: var(--app-field-radius);
    outline: 0;
    background: var(--app-field-surface);
    color: var(--app-text-color-strong);
    box-shadow: var(--app-field-shadow-resting);
    font: inherit;
    font-size: clamp(0.88rem, 1vw, 0.98rem);
    font-weight: 850;
}

.app-tab-combobox-toggle:hover {
    border-color: var(--app-field-hover-border-color);
    box-shadow: var(--app-field-shadow-hover);
}

.app-tab-combobox-toggle:focus-visible {
    border-color: var(--app-field-focus-border-color);
    outline: 0;
    box-shadow: var(--app-field-focus-ring);
}

.app-tab-combobox-toggle {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.35rem;
    align-items: center;
    margin: 0;
    padding: 0.62rem 0.2rem 0.62rem 0.82rem;
    text-align: left;
    cursor: pointer;
}

.app-tab-combobox-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-tab-combobox-arrow {
    grid-column: 2;
    display: grid;
    place-items: center;
    justify-self: stretch;
    width: 2.35rem;
    height: 2.35rem;
    color: var(--app-color-premium-action-icon);
}

.app-tab-combobox-arrow > svg {
    display: block;
    width: 1.12rem;
    height: 1.12rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: rotate(0deg);
    transform-origin: center;
    transition: transform 160ms ease;
}

.app-tab-combobox.is-open .app-tab-combobox-arrow > svg {
    transform: rotate(180deg);
}

.app-tab-combobox-popup {
    position: absolute;
    z-index: 80;
    top: calc(100% + 0.28rem);
    left: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 0.42rem;
    box-sizing: border-box;
    width: 100%;
    padding: 0.48rem;
    border: 1px solid var(--app-border-color-strong);
    border-radius: var(--app-surface-radius);
    background: var(--app-surface-elevated);
    box-shadow: var(--app-shadow-raised);
}

.app-tab-combobox-popup[hidden],
.app-tab-combobox-listbox[hidden],
.app-tab-combobox-empty[hidden] {
    display: none;
}

.app-tab-combobox-listbox {
    position: static;
    display: grid;
    grid-column: 1;
    gap: 0.26rem;
    box-sizing: border-box;
    width: 100%;
    max-height: min(22rem, 48vh);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.app-tab-combobox-option {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 2.45rem;
    padding: 0.54rem 0.68rem;
    border: 1px solid transparent;
    border-radius: var(--app-control-radius);
    background: var(--app-surface-inner);
    color: var(--app-text-color-strong);
    box-shadow: none;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
}

.app-tab-combobox-option:is(:hover, :focus-visible) {
    border-color: var(--app-border-color-strong);
    background: var(--app-interactive-hover-surface);
    color: var(--app-text-color-strong);
}

.app-tab-combobox-option[aria-selected="true"] {
    border-color: var(--app-border-color-strong);
    background: var(--app-surface-selected);
    color: var(--app-text-color-strong);
}

.app-tab-combobox-option:focus-visible {
    outline: 2px solid var(--app-color-focus);
    outline-offset: -2px;
}

.app-tab-combobox-empty {
    margin: 0;
    padding: 0.56rem 0.68rem;
    color: var(--app-text-color-muted);
    font-size: 0.82rem;
    font-weight: 750;
    text-align: center;
}

.account-settings-page-stack .mobile-tab-select-wrap.app-tab-combobox:has(+ .account-favorite-kind-tabs) {
    display: grid;
}

:is(
    .museum-tabs,
    .ops-inner-section-picker,
    .ops-report-filter-tabs,
    .ops-museum-status-filters,
    .account-favorite-kind-tabs
)[data-mobile-tab-select-source="true"] {
    position: absolute;
    display: none;
    width: 1px;
    height: 1px;
    min-width: 1px;
    min-height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (max-width: 600px) {
    .app-tab-combobox-listbox {
        max-height: min(19rem, 44vh);
    }
}

/* Shared landing-grid and breadcrumb contract for mounted application workspaces. */
.app-workspace-menu-grid:not([hidden]) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    justify-content: stretch;
    justify-items: stretch;
    gap: var(--app-tabs-gap, 0.46rem);
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.app-workspace-menu-tabs {
    display: contents;
}

.app-workspace-menu-option {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    align-content: start;
    align-items: start;
    justify-content: stretch;
    gap: var(--app-control-gap, 0.42rem);
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 5.4rem;
    height: auto;
    padding: 1rem 0.85rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--app-color-primary-action);
    box-shadow: none;
    text-align: left;
    white-space: normal;
    transform: none;
    transition:
        transform var(--app-motion-duration-ui) var(--app-motion-ease-emphasis),
        border-color var(--app-motion-duration-fast) ease,
        background-color var(--app-motion-duration-fast) ease,
        box-shadow var(--app-motion-duration-ui) var(--app-motion-ease-standard);
}

.app-workspace-menu-option:not(:disabled):is(:hover, :focus-visible) {
    background: var(--app-surface-elevated);
    color: var(--app-interactive-hover-text);
    box-shadow: none;
    transform: none;
}

.app-workspace-menu-option:is(.is-active, [aria-selected="true"], [aria-current="page"]) {
    background: var(--app-surface-selected);
    color: var(--app-interactive-hover-text);
    box-shadow: none;
}

.app-workspace-menu-option-copy strong::after {
    content: none;
    display: none;
}

.app-workspace-menu-option-copy {
    display: grid;
    gap: var(--app-control-gap);
    min-width: 0;
    color: inherit;
    text-align: left;
    white-space: normal;
}

.app-workspace-menu-option-icon {
    align-self: start;
    width: 1.45rem;
    height: 1.45rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.app-workspace-menu-option-copy strong {
    color: inherit;
    font-family: var(--app-card-title-font-family);
    font-size: var(--app-card-title-size);
    font-weight: var(--app-card-title-font-weight);
    letter-spacing: var(--app-card-title-letter-spacing);
    line-height: var(--app-card-title-line-height);
}

.app-workspace-menu-option-copy small {
    color: inherit;
    opacity: 0.76;
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.35;
}

.app-workspace-breadcrumb:not([hidden]) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--app-control-gap);
    width: 100%;
    min-width: 0;
    margin: 0;
    color: var(--app-text-color-body);
    font-size: 0.84rem;
    font-weight: 750;
}

.app-workspace-breadcrumb .app-text-link {
    color: var(--app-text-color-accent);
    font-weight: 850;
}

/* Breadcrumb markup owns its single slash separator. */
#mainContent .app-workspace-breadcrumb .app-text-link::after {
    content: none;
    display: none;
}

.app-workspace-breadcrumb [aria-current="page"] {
    color: var(--app-text-color-strong);
}

.app-workspace-breadcrumb-separator {
    color: var(--app-text-color-muted);
}

@media (max-width: 700px) {
    .app-workspace-menu-grid:not([hidden]) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-workspace-menu-option {
        min-height: 5.1rem;
    }
}

@media (max-width: 340px) {
    .app-workspace-menu-grid:not([hidden]) {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-workspace-menu-option,
    .app-workspace-menu-option:not(:disabled):is(:hover, :focus-visible) {
        transform: none;
        transition: none;
    }
}

/* Shared messages and modal geometry. */

.messages {
    display: grid;
    gap: var(--app-message-gap);
    margin-bottom: 1rem;
}

.message {
    padding: var(--app-message-padding-y) var(--app-message-padding-x);
    border: 1px solid var(--app-overlay-accent-medium);
    border-radius: var(--app-message-radius) var(--app-message-radius) 0 0;
    background: var(--app-overlay-accent-subtle);
    color: var(--app-color-link);
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 130;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow-y: auto;
    background: var(--app-overlay-brand-strong);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity var(--app-overlay-backdrop-duration) ease,
        visibility 0s linear var(--app-overlay-surface-transform-duration);
}

.modal-backdrop.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.modal-card {
    display: grid;
    gap: var(--app-modal-gap);
    width: min(520px, 100%);
    max-height: calc(100vh - 2rem);
    padding: var(--app-modal-padding-y) var(--app-modal-padding-x);
    overflow-y: auto;
    border: 1px solid var(--app-card-border-premium-hover);
    border-radius: var(--app-modal-radius);
    background: var(--app-surface-elevated);
    box-shadow: var(--app-shadow-raised);
    opacity: 0;
    transform: translate3d(0, var(--app-overlay-rise-offset), 0) scale(0.985);
    transform-origin: center;
    transition:
        opacity var(--app-overlay-surface-opacity-duration) ease,
        transform var(--app-overlay-surface-transform-duration) var(--app-overlay-surface-easing);
}

.modal-backdrop.open > .modal-card {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.modal-card h2{
    color: var(--app-text-color-strong);
}

.modal-card h2 {
    font-size: var(--app-modal-title-size);
    line-height: var(--app-modal-title-line-height);
}

.modal-card p {
    color: var(--app-text-color-muted);
    line-height: var(--app-modal-body-line-height);
}

.modal-confirm-phrase {
    display: grid;
    gap: var(--app-control-gap);
}

.modal-confirm-phrase[hidden] {
    display: none;
}

.modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--app-modal-actions-gap);
}

#logoutCancelBtn {
    justify-self: start;
}

#logoutConfirmBtn {
    justify-self: end;
}

@media (max-width: 980px) {
    .modal-backdrop {
        align-items: end;
        padding: 0;
        overflow: hidden;
    }

    .modal-card {
        width: 100%;
        max-width: none;
        max-height: var(--app-overlay-sheet-max-height);
        padding-block-end: calc(var(--app-modal-padding-y) + env(safe-area-inset-bottom));
        border-radius: var(--app-overlay-sheet-radius);
        transform: translate3d(0, var(--app-overlay-sheet-translate), 0);
        transform-origin: bottom center;
        transition-duration:
            var(--app-overlay-surface-opacity-duration),
            var(--app-overlay-surface-transform-duration);
    }
}

@media (max-width: 700px) {
    .modal-actions {
        grid-template-columns: 1fr;
    }

    #logoutModal .modal-actions {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    #logoutCancelBtn,
    #logoutConfirmBtn {
        justify-self: stretch;
        width: 100%;
        min-width: 0;
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .modal-backdrop,
    .modal-card {
        transition: none;
    }

    .modal-card {
        transform: none;
    }
}

/* Canonical authentication page and form presentation. */

.auth-page-stack {
    display: grid;
    gap: var(--layout-section-gap);
    width: 100%;
    min-height: 100%;
    margin: 0 auto;
}

.auth-body-panel {
    padding: 0;
}

html body #mainContent .auth-page-stack .auth-panel.app-main-section {
    display: grid;
    grid-template-columns: minmax(0, 20rem) minmax(19rem, 28rem);
    grid-template-areas:
        "copy form"
        "switch form";
    grid-template-rows: auto auto;
    align-content: center;
    justify-content: center;
    gap: var(--app-component-flow-gap);
    min-height: clamp(27rem, 58vh, 36rem);
}

html body #mainContent .auth-page-stack .auth-panel.app-main-section:not(:has(.auth-form)) {
    grid-template-columns: minmax(0, 36rem);
    grid-template-areas:
        "copy"
        "switch";
    min-height: clamp(21rem, 46vh, 29rem);
}

.auth-panel-copy {
    grid-area: copy;
    align-self: end;
    display: grid;
    gap: 0.55rem;
    min-width: 0;
}

.auth-panel-title {
    margin: 0;
    color: var(--app-text-color-heading);
    font-family: var(--app-font-family-display);
    font-size: clamp(1.85rem, 3.2vw, 2.65rem);
    font-weight: 700;
    line-height: 1.02;
    text-wrap: balance;
}

.auth-panel-intro {
    max-width: 31rem;
    margin: 0;
    color: var(--app-text-color-body);
    font-size: 1rem;
    font-weight: 550;
    line-height: 1.55;
}

.auth-form {
    grid-area: form;
    align-self: center;
    display: grid;
    gap: var(--app-form-field-gap);
    width: 100%;
    min-width: 0;
    padding: clamp(1rem, 2.4vw, 1.4rem);
    border: 1px solid var(--app-card-border-premium-hover);
    border-radius: var(--app-surface-radius-standard);
    background: var(--app-surface-card);
    box-shadow: none;
}

.auth-form label {
    margin-top: 0.24rem;
}

.auth-form .btn {
    width: 100%;
    margin-top: 0.55rem;
}

.application-error-page .application-error-actions {
    align-self: start;
    grid-template-columns: repeat(2, minmax(0, max-content));
    width: auto;
    max-width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.application-error-page .application-error-actions .btn {
    width: auto;
    margin-top: 0;
}

.auth-switch-copy {
    grid-area: switch;
    align-self: start;
    display: grid;
    gap: 0.38rem;
    max-width: 32rem;
    margin: 0;
    padding: 0.82rem 0.95rem;
    border: 1px solid var(--app-border-color-subtle);
    border-inline-start: 3px solid var(--app-color-accent);
    border-radius: var(--app-control-radius);
    background: transparent;
    color: var(--app-text-color-body);
    font-size: 0.92rem;
    font-weight: 550;
    line-height: 1.45;
}

.auth-switch-copy a {
    color: var(--app-color-primary-action);
    font-weight: 750;
    text-underline-offset: 0.16em;
}

html body #mainContent .auth-page-stack .auth-panel.auth-login-gateway.app-main-section{
    grid-template-columns: minmax(18rem, 0.9fr) minmax(22rem, 1.1fr);
    grid-template-areas: "story entry";
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(0.9rem, 2vw, 1.35rem);
    min-height: clamp(31rem, 66vh, 40rem);
    padding: clamp(0.78rem, 1.8vw, 1.15rem);
    border: 1px solid var(--app-border-color-standard);
    border-radius: var(--app-surface-radius);
    background: var(--app-surface-elevated);
    box-shadow: var(--app-shadow-raised);
}

.auth-login-story{
    grid-area: story;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: clamp(1.4rem, 4vw, 2.75rem);
    overflow: hidden;
    border-radius: calc(var(--app-surface-radius) - 0.2rem);
    background-color: var(--app-color-brand-surface);
    background-image: var(--app-gradient-shell-chrome);
    color: var(--app-color-inverse-text);
    box-shadow: var(--app-shadow-header-control-depth);
}

.auth-login-story .auth-login-story-title,
.auth-login-story .auth-login-story-copy,
.auth-login-story .auth-login-benefits li{
    color: var(--app-color-inverse-text);
}

.auth-login-entry-label{
    margin: 0;
    color: var(--app-color-accent-on-dark);
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.14em;
    line-height: 1.2;
}

.auth-login-story-title{
    max-width: 13ch;
    margin: 0.48rem 0 0;
    color: var(--app-color-inverse-text);
    font-family: var(--app-font-family-display);
    font-size: clamp(2rem, 4.2vw, 3.55rem);
    font-weight: 700;
    line-height: 0.98;
    text-wrap: balance;
}

.auth-login-story-copy{
    max-width: 34rem;
    margin: 1rem 0 0;
    color: var(--app-color-inverse-text);
    font-size: clamp(0.94rem, 1.35vw, 1.08rem);
    font-weight: 600;
    line-height: 1.55;
}

.auth-login-benefits{
    display: grid;
    gap: 0.72rem;
    margin: clamp(1.25rem, 3vw, 2rem) 0 0;
    padding: 0;
    list-style: none;
}

.auth-login-benefits li{
    display: grid;
    grid-template-columns: 1.6rem minmax(0, 1fr);
    align-items: center;
    gap: 0.62rem;
    min-width: 0;
    color: var(--app-color-inverse-text);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.3;
}

.auth-login-benefits svg{
    display: block;
    width: 1.05rem;
    height: 1.05rem;
    justify-self: center;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-login-entry{
    grid-area: entry;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    align-content: center;
    gap: clamp(1rem, 2.2vw, 1.35rem);
    min-width: 0;
    padding: clamp(1.25rem, 3.4vw, 2.35rem);
    border: 0;
    border-radius: calc(var(--app-surface-radius) - 0.2rem);
    background: var(--app-surface-inner);
}

.auth-login-entry > .auth-panel-copy,
.auth-login-entry > .auth-form,
.auth-login-entry > .auth-switch-copy{
    grid-area: auto;
    min-width: 0;
}

.auth-login-entry .auth-panel-copy{
    align-self: auto;
    gap: 0.58rem;
}

.auth-login-entry-label{
    color: var(--app-color-primary-action);
}

.auth-login-entry .auth-panel-title{
    max-width: 13ch;
    font-size: clamp(2rem, 3.5vw, 2.85rem);
}

.auth-login-entry .auth-panel-intro{
    max-width: 26rem;
    font-size: 0.96rem;
}

.auth-login-entry .auth-form{
    align-self: auto;
    gap: var(--app-form-field-gap);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.auth-login-entry .auth-form label{
    margin-top: 0.18rem;
    color: var(--app-text-color-strong);
    font-size: 0.82rem;
    font-weight: var(--app-field-label-font-weight);
}

.auth-login-entry .auth-form .btn{
    margin-top: 0.7rem;
}

.auth-login-entry .auth-switch-copy{
    align-self: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.55rem 1rem;
    max-width: none;
    padding: 0.9rem 0 0;
    border: 0;
    border-top: 1px solid var(--app-border-color-subtle);
    border-radius: 0;
    background: transparent;
    font-size: 0.82rem;
}

@media (max-width: 980px) {
    .auth-shell .content {
        padding-top: var(--layout-shell-top-gap);
    }

    html body #mainContent .auth-page-stack .auth-panel.app-main-section,
    html body #mainContent .auth-page-stack .auth-panel.app-main-section:not(:has(.auth-form)) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "copy"
            "form"
            "switch";
        grid-template-rows: auto;
        align-content: center;
        gap: var(--app-component-flow-gap);
        min-height: 0;
    }

    html body #mainContent .auth-page-stack .auth-panel.app-main-section:not(:has(.auth-form)) {
        grid-template-areas:
            "copy"
            "switch";
        align-content: start;
    }

    .auth-panel-copy,
    .auth-form,
    .auth-switch-copy {
        width: 100%;
        max-width: none;
    }

    .auth-panel-title {
        font-size: clamp(1.72rem, 8.4vw, 2.15rem);
    }

    .auth-form {
        padding: 0.92rem;
    }

    html body #mainContent .auth-page-stack .auth-panel.auth-login-gateway.app-main-section{
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "story"
            "entry";
        grid-template-rows: auto auto;
        align-content: start;
        gap: 0.8rem;
        min-height: 0;
        padding: 0.72rem;
    }

    .auth-login-story{
        padding: clamp(1.25rem, 5vw, 2rem);
    }

    .auth-login-story-title{
        max-width: 18ch;
        font-size: clamp(2rem, 7vw, 3rem);
    }

    .auth-login-benefits{
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.7rem;
    }

    .auth-login-benefits li{
        grid-template-columns: 1.35rem minmax(0, 1fr);
        align-items: start;
        font-size: 0.78rem;
    }

    .auth-login-entry{
        padding: clamp(1.15rem, 4.5vw, 2rem);
    }

    .auth-login-entry .auth-form{
        padding: 0;
    }
}

@media (max-width: 700px) {
    html body #mainContent .auth-page-stack .auth-panel.app-main-section,
    html body #mainContent .auth-page-stack .auth-panel.app-main-section:not(:has(.auth-form)) {
        gap: var(--app-component-flow-gap-mobile);
    }

    .auth-login-story-title{
        max-width: 15ch;
        font-size: clamp(1.82rem, 9vw, 2.4rem);
    }

    .auth-login-story-copy{
        margin-top: 0.78rem;
        font-size: 0.88rem;
    }

    .auth-login-benefits{
        grid-template-columns: minmax(0, 1fr);
        gap: 0.48rem;
        margin-top: 1rem;
    }

    .auth-login-benefits li{
        align-items: center;
        font-size: 0.78rem;
    }

    .auth-login-entry .auth-panel-title{
        max-width: none;
        font-size: clamp(1.72rem, 8.5vw, 2.2rem);
    }

    .auth-login-entry .auth-switch-copy{
        display: grid;
        justify-content: stretch;
    }

    .application-error-page .application-error-actions {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    .application-error-page .application-error-actions .btn {
        width: 100%;
    }
}

@media (max-width: 380px), (max-height: 560px) {
    html body #mainContent .auth-page-stack .auth-panel.auth-login-gateway.app-main-section{
        padding: 0.55rem;
    }

    .auth-login-story,
    .auth-login-entry{
        padding: 1rem;
    }

    .auth-login-benefits{
        display: none;
    }
}

/* Home and social intro-card foundations. */

.home-body-panel {
    padding: 0;
}

.hero.home-hero {
    display: grid;
    gap: 1rem;
    padding: 1.2rem;
}

.home-hero p,
.home-hero h2,
.home-hero-title{
    color: var(--app-text-color-strong);
}

.home-hero {
    background: var(--card-surface-soft);
}

.ui-section-stack > .hero.home-hero,
.page-stack.ui-page-stack .hero.home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    justify-items: stretch;
    gap: 1.1rem;
    padding: var(--app-legend-surface-padding-standard);
    background: var(--card-surface);
    text-align: left;
}

.home-hero-eyebrow {
    padding-top: 0.15rem;
    color: var(--app-color-link);
    font-size: 0.84rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-hero-lead {
    width: 100%;
    max-width: none;
    color: var(--app-color-primary-text);
}

.home-hero-points {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    align-items: stretch;
    gap: 1rem;
    width: 100%;
}

.home-hero-point {
    display: grid;
    align-content: start;
    gap: 0.65rem;
    padding: 0.9rem;
    border: 1px solid var(--app-overlay-accent-medium);
    border-radius: 14px;
    background: var(--app-overlay-accent-subtle);
    color: inherit;
    box-shadow: var(--shadow-soft);
    text-align: left;
    text-decoration: none;
    transform: translateY(0);
    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        border-color 160ms ease,
        background 160ms ease;
}

.home-hero-point:hover,
.home-hero-point:focus-visible {
    border-color: var(--app-overlay-accent-medium);
    background: var(--app-overlay-accent-subtle);
    box-shadow: var(--shadow-soft);
    transform: translateY(-3px);
}

.home-hero-point:focus-visible {
    outline: 2px solid var(--app-overlay-accent-medium);
    outline-offset: 3px;
}

.home-hero-point h2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    min-height: 42px;
    padding: 0.56rem 0.82rem;
    border: 1px solid var(--ui-border-standard);
    border-radius: 18px;
    background: var(--ui-legend-surface-standard);
    color: var(--ui-legend-text-standard);
    box-shadow:
        var(--shadow-soft);
    font-size: 0.92rem;
    line-height: 1.05;
    text-align: center;
}

.home-hero-point h2::after {
    content: "";
    flex: 0 0 auto;
    width: 0.52rem;
    height: 0.52rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    opacity: 0.86;
    transform: rotate(-45deg);
}

.home-hero-point:hover h2,
.home-hero-point:focus-visible h2 {
    border-color: var(--app-overlay-accent-medium);
    background: var(--app-gradient-brand);
    color: var(--app-color-inverse-text);
}

.home-hero-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.home-hero-note {
    color: var(--app-color-secondary-text);
    font-size: 0.83rem;
    font-weight: 600;
}

@media (max-width: 700px) {
    .home-hero-points {
        grid-template-columns: 1fr;
    }

    .home-hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Reusable empty, unavailable, and no-match states consume the same standard
 * media, copy, and optional action-band anatomy as every repeated card. */

.page-stack.ui-page-stack .app-content-state-card.app-standard-card,
.page-stack.ui-page-stack .app-content-state-card--grid,
.page-stack.ui-page-stack .app-content-state-card--full {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    justify-self: start;
    inline-size: min(100%, 26rem);
    min-inline-size: 0;
    min-block-size: var(--app-standard-card-height);
    block-size: var(--app-standard-card-height);
    max-block-size: var(--app-standard-card-height);
    padding: 0;
    border: 1px solid var(--app-border-color-standard);
    border-radius: var(--app-standard-card-radius, var(--app-surface-radius-standard, 8px));
    outline: 1px solid var(--app-border-color-subtle);
    outline-offset: -2px;
    background: var(--app-surface-card);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    text-align: start;
}

.page-stack.ui-page-stack .app-content-state-card--grid {
    inline-size: 100%;
}

.page-stack.ui-page-stack .app-content-state-card--full {
    inline-size: 100%;
    min-block-size: min(var(--app-standard-card-height), 12rem);
    block-size: auto;
    max-block-size: none;
}

.page-stack.ui-page-stack .app-content-state-card[hidden] {
    display: none;
}

.page-stack.ui-page-stack .content-empty-card-body {
    box-sizing: border-box;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.42rem;
    inline-size: 100%;
    min-inline-size: 0;
    min-block-size: 0;
    margin: 0;
    padding: 0.82rem 0.88rem 0.94rem;
    background: var(--app-surface-card);
}

.page-stack.ui-page-stack .content-empty-card-title,
.page-stack.ui-page-stack .content-empty-card-copy {
    inline-size: 100%;
    min-inline-size: 0;
    margin: 0;
    text-align: inherit;
}

.page-stack.ui-page-stack .content-empty-card-title {
    color: var(--app-color-primary-text);
    font-family: var(--app-font-family-display);
    font-size: var(--app-standard-card-title-size, 0.98rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.page-stack.ui-page-stack .content-empty-card-copy {
    color: var(--app-text-color-body);
    font-family: var(--app-font-family-base);
    font-size: var(--app-standard-card-title-size, 0.98rem);
    font-weight: 500;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.page-stack.ui-page-stack .user-state-empty-instruction {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0;
    white-space: normal;
}

.page-stack.ui-page-stack .user-state-empty-instruction > .museum-action-help-icon {
    margin-inline: 0.34rem;
}

.page-stack.ui-page-stack .content-empty-card-action {
    align-self: auto;
    width: auto;
    min-width: 0;
    margin: 0;
}

.page-stack.ui-page-stack .app-content-state-card--unavailable {
    background: var(--app-color-muted-surface);
}

.app-content-state-compact {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0.52rem 0.62rem;
    color: var(--app-text-color-body);
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.app-content-state-compact:empty,
.app-content-state-compact[hidden] {
    display: none;
}

/*
 * Global site-search component.
 *
 * The fixed drawer owns only placement and scrolling in shell-header.css.
 * This file owns the complete search panel, results, and continuation anatomy.
 */

.site-search-panel{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
    width: 100%;
    min-width: 0;
}

.site-search-panel[hidden]{
    display: none;
}

.site-search-heading{
    display: inline-flex;
    align-items: center;
    gap: 0.48rem;
    width: fit-content;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--app-text-color-strong);
    font-family: var(--app-font-family-display);
    font-size: 1.08rem;
    font-weight: 900;
    line-height: 1.2;
}

.site-search-heading svg{
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: var(--app-icon-stroke-width-standard);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.site-search-panel-body{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
    width: 100%;
    min-width: 0;
}

.site-search-input-shell,
.site-search-input-group{
    width: 100%;
    min-width: 0;
}

.site-search-input-shell{
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.site-search-input::-webkit-search-cancel-button{
    cursor: pointer;
}

/* Every in-page search begins as the same quiet icon used by the header.
 * Global drawer search is deliberately excluded by main.js. */
html.js-capable #mainContent :is(label, .app-input-group):has(input[type="search"]:not([data-local-search-persistent]):not([data-local-search-disclosure-initialized="true"])),
html.js-capable #mainContent input[type="search"]:not([data-local-search-persistent]):not([data-local-search-disclosure-initialized="true"]) {
    display: none;
}

#mainContent .app-local-search-disclosure {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--app-control-gap);
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    margin-inline-start: auto;
}

#mainContent .app-local-search-disclosure.is-expanded {
    width: 100%;
    max-width: none;
    margin-inline-start: 0;
}

#mainContent .app-local-search-toggle {
    display: grid;
    flex: 0 0 var(--app-control-min-height);
    place-items: center;
    width: var(--app-control-min-height);
    min-width: var(--app-control-min-height);
    height: var(--app-control-min-height);
    min-height: var(--app-control-min-height);
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--app-text-color-strong);
    box-shadow: none;
    cursor: pointer;
    transition:
        border-color 160ms ease,
        background-color 160ms ease,
        color 160ms ease,
        transform 160ms ease;
}

#mainContent .app-local-search-toggle:is(:hover, :focus-visible) {
    border-color: var(--app-color-link);
    background: var(--app-interactive-hover-surface);
    color: var(--app-interactive-hover-text);
    box-shadow: none;
    transform: translateY(-1px);
}

#mainContent .app-local-search-toggle:focus-visible {
    outline: 2px solid var(--app-color-focus);
    outline-offset: 2px;
}

#mainContent .app-local-search-toggle > svg {
    width: 1.45rem;
    height: 1.45rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition:
        width 160ms ease,
        height 160ms ease,
        opacity 160ms ease;
}

#mainContent .app-local-search-toggle[aria-expanded="true"] {
    color: var(--app-text-color-strong);
}

#mainContent .app-local-search-toggle[aria-expanded="true"] > svg {
    width: 0.82rem;
    height: 0.82rem;
    stroke-width: 1.8;
    opacity: 0.9;
}

#mainContent .app-local-search-toggle[aria-expanded="true"]:is(:hover, :focus-visible) > svg {
    opacity: 1;
}

#mainContent .app-local-search-field {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    margin: 0;
}

#mainContent .app-local-search-field[hidden] {
    display: none;
}

#mainContent .app-local-search-field .app-input-group {
    width: 100%;
    min-width: 0;
}

#mainContent .app-local-search-field .app-input-group > .app-input-icon {
    display: none;
}


@media (prefers-reduced-motion: reduce) {
    #mainContent .app-local-search-toggle,
    #mainContent .app-local-search-toggle > svg {
        transition: none;
    }

    #mainContent .app-local-search-toggle:is(:hover, :focus-visible) {
        transform: none;
    }
}

@media (max-width: 760px) {
    #mainContent .app-local-search-disclosure.is-expanded {
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--app-control-min-height);
        width: 100%;
    }
}

.site-search-results{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.7rem;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.site-search-results[hidden],
.site-search-load-more-row[hidden]{
    display: none;
}

.site-search-results-head{
    min-width: 0;
}

.site-search-status{
    margin: 0;
    color: var(--app-text-color-strong);
    font-size: 0.78rem;
    font-weight: 750;
    line-height: 1.3;
}

.site-search-results-list{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.7rem;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-search-result-item{
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.site-search-result-card{
    position: relative;
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr) max-content;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
        "media type actions"
        "media body actions";
    align-items: stretch;
    gap: 0.34rem 0.65rem;
    width: 100%;
    min-width: 0;
    height: calc(var(--app-control-min-height) + var(--app-control-min-height) + 1.5rem);
    min-height: calc(var(--app-control-min-height) + var(--app-control-min-height) + 1.5rem);
    max-height: calc(var(--app-control-min-height) + var(--app-control-min-height) + 1.5rem);
    margin: 0;
    padding: 0.55rem;
    border: 1px solid var(--app-card-border-premium);
    border-radius: var(--app-search-result-radius);
    background: var(--app-surface-card);
    color: var(--app-text-color-body);
    box-shadow: none;
    box-sizing: border-box;
    overflow: hidden;
    transition:
        background-color 160ms ease,
        border-color 160ms ease;
}

.site-search-result-card:is(:hover, :has(:focus-visible)){
    border-color: color-mix(in srgb, var(--app-color-primary-action) 28%, var(--app-card-border-premium));
    background: var(--app-surface-elevated);
    box-shadow: none;
}

.site-search-result-type{
    grid-area: type;
    align-self: start;
    justify-self: start;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0.2rem 0.45rem;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--app-color-primary-action) 9%, transparent);
    color: var(--app-color-primary-action);
    font-size: 0.65rem;
    font-weight: 850;
    letter-spacing: 0.045em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-search-result-actions{
    position: relative;
    z-index: 2;
    grid-area: actions;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    width: auto;
    min-width: 0;
    min-height: 0;
}

.site-search-result-actions:empty{
    display: none;
}

.site-search-result-actions :is(.favorite-toggle-btn-search, .museum-alert-toggle-btn-search){
    flex: 0 0 var(--app-control-min-height);
    width: var(--app-control-min-height);
    min-width: var(--app-control-min-height);
    height: var(--app-control-min-height);
    min-height: var(--app-control-min-height);
    margin: 0;
    padding: 0;
}

.site-search-result-body{
    grid-area: body;
    display: grid;
    align-content: start;
    gap: 0.3rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
}

.site-search-result-title,
.site-search-result-subtitle{
    display: -webkit-box;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
}

.site-search-result-title{
    display: -webkit-box;
    width: calc(100% + var(--app-card-clamped-text-inline-expansion));
    max-width: none;
    margin-inline: calc(0px - var(--app-card-clamped-text-inline-safety));
    padding-inline: var(--app-card-clamped-text-inline-safety);
    color: var(--app-text-color-strong);
    font-family: var(--app-font-family-display);
    font-size: 0.96rem;
    font-weight: 825;
    line-height: 1.23;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* Keep one semantic primary link while making the image and all non-control
 * card space activate that destination. The independent heart/bell band sits
 * above this hit area and retains its own pointer and keyboard behavior. */
.site-search-result-title::after{
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    border-radius: var(--app-search-result-radius);
    cursor: pointer;
}

.site-search-result-title:is(:hover, :focus-visible){
    color: var(--app-color-primary-action-hover);
    text-decoration: none;
}

.site-search-result-subtitle{
    color: var(--app-text-color-body);
    font-size: 0.78rem;
    line-height: 1.38;
    -webkit-line-clamp: 1;
    line-clamp: 1;
}

.site-search-result-media{
    grid-area: media;
    display: grid;
    place-items: center;
    justify-self: stretch;
    align-self: start;
    width: 6rem;
    min-width: 6rem;
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
    margin: 0;
    padding: 0;
    border: 1px solid var(--app-border-color-subtle);
    border-radius: calc(var(--app-search-result-radius) - 5px);
    background: var(--app-card-media-placeholder-bg);
    box-sizing: border-box;
    overflow: hidden;
}

.site-search-result-thumbnail{
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    object-fit: cover;
    object-position: center;
}

.site-search-result-media > .app-card-image-fallback{
    position: absolute;
    inset: 0;
    display: none;
    place-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.site-search-result-media > .app-card-image-fallback > .app-card-image-fallback-art{
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    object-fit: cover;
    object-position: center;
}

.site-search-result-media.has-image-fallback > .app-card-image-fallback{
    display: grid;
}

.site-search-result-media.is-image-verifying > .app-card-image-fallback{
    display: grid;
}

.site-search-result-media.has-image-fallback > [data-card-image]{
    display: none;
}

.site-search-result-media.is-image-verifying > [data-card-image]{
    visibility: hidden;
}

.site-search-result-media.has-image-fallback,
.site-search-result-media.is-image-verifying{
    position: relative;
}

.site-search-empty-state{
    list-style: none;
}

.site-search-load-more-row{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.site-search-filter-field{
    width: min(100%, 18rem);
    min-width: 0;
}

.site-search-filter-field select{
    width: 100%;
}

@media (min-width: 981px) {
    html body #mainContent .page-stack.ui-page-stack .app-landing-search-form {
        display: block;
        justify-self: stretch;
        width: min(100%, 42rem);
        max-width: 42rem;
        min-width: 0;
        margin: 0;
    }

    html body #mainContent .page-stack.ui-page-stack
    .app-landing-search-form > .app-input-group {
        width: 100%;
        min-width: 0;
    }

}

/* Independent public/account search owns only its own controls and results. */
#mainContent .app-page-search {
    min-width: 0;
    width: 100%;
}
#mainContent .app-page-search-launch-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--app-control-gap);
    justify-content: flex-end;
}
#mainContent .app-page-search-launch-row:has([data-page-search-tools]) {
    flex-wrap: nowrap;
    justify-content: flex-start;
}
#mainContent .app-page-search-launch-row [data-page-search-tools] {
    flex: 0 1 auto;
    min-width: 0;
}
#mainContent .app-page-search-launch-row [data-page-search-tools] .app-public-action-group:not(:has(> *)) {
    display: none;
}
#mainContent .app-page-search-launch-row > .app-local-search-toggle {
    flex: 0 0 auto;
    margin-inline-start: auto;
}
#mainContent .app-page-search-launch-row [data-page-search-tools] > .app-page-section-actions-stack {
    width: auto;
    margin: 0;
}
#mainContent .app-page-search-panel:not([hidden]) {
    display: grid;
    gap: var(--app-panel-stack-gap-standard);
    min-width: 0;
}
html body #mainContent .page-stack.ui-page-stack .app-page-search .app-page-search-panel[hidden],
html body #mainContent .page-stack.ui-page-stack .app-page-search [data-page-search-results][hidden],
html body #mainContent .page-stack.ui-page-stack .app-page-search [data-page-search-more-row][hidden] {
    display: none;
}
#mainContent .app-page-search-panel .museum-local-search {
    width: 100%;
    min-width: 0;
}
#mainContent .app-page-search-panel [data-page-search-results] {
    margin: 0;
    padding: 0;
    list-style: none;
}

html body #mainContent .page-stack.ui-page-stack .app-page-search [data-page-search-toggle][hidden],
html body #mainContent .page-stack.ui-page-stack form[data-news-archive-search-form][hidden],
html body #mainContent .page-stack.ui-page-stack form[data-museum-search-form][hidden] {
    display: none;
}

/* Reuse the section heading divider with a trailing, full-size close target. */
#mainContent .app-page-search-close {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    border-color: var(--app-border-color-subtle);
    background: var(--app-interactive-hover-surface);
}
#mainContent .app-page-search-close svg {
    width: 1rem;
    height: 1rem;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
html body #mainContent .page-stack.ui-page-stack .app-page-search-launch-row[hidden] {
    display: none;
}

/* Shared page-head, panel, icon, and compact newsletter foundations. */

.panel {
    border: 1px solid var(--card-border);
    border-radius: 16px;
    background: var(--card-surface);
    box-shadow: var(--shadow-soft);
}

.page-body-panel {
    min-height: auto;
}

.page-head-title {
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    gap: var(--app-page-head-title-gap);
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    min-height: calc(var(--app-page-head-icon-size) + (var(--app-page-head-title-padding-y) * 2));
    margin: 0;
    padding: var(--app-page-head-title-padding-y) var(--app-page-head-title-padding-x);
    border: 1px solid var(--ui-legend-border-standard);
    border-radius: 999px;
    background: var(--ui-legend-surface-standard);
    color: var(--ui-legend-text-standard);
    box-shadow:
        var(--shadow-soft);
    font-size: var(--app-page-head-title-size);
    font-family: var(--app-font-family-heading);
    font-weight: var(--app-type-heading-strong-weight);
    letter-spacing: var(--app-type-heading-letter-spacing);
    line-height: var(--app-page-head-title-line-height);
    text-shadow: none;
}

.page-head-title > span:not(.page-head-icon):not(.page-head-newsletter) {
    display: block;
    min-width: 0;
    color: inherit;
    font: inherit;
    overflow-wrap: anywhere;
}

.page-head-search-launch {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: 0 0 2.85rem;
    width: 2.85rem;
    min-width: 2.85rem;
    max-width: 2.85rem;
    height: 2.85rem;
    min-height: 2.85rem;
    max-height: 2.85rem;
    margin: 0 0 0 auto;
    padding: 0;
    overflow: hidden;
    border-radius: 999px;
}

.page-head-search-launch::after {
    content: none;
    display: none;
}

.page-head-search-launch .museum-search-panel-launch-orb {
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: inherit;
    background: var(--app-gradient-brand);
    box-shadow: var(--shadow-soft);
}

.page-head-search-launch .museum-search-panel-launch-icon {
    width: 1.15rem;
    height: 1.15rem;
}

.page-head-search-launch .museum-search-panel-launch-copy {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.page-head-search-launch.is-open {
    display: none;
}

.page-head-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: var(--app-page-head-icon-size);
    min-width: var(--app-page-head-icon-size);
    height: var(--app-page-head-icon-size);
    border: 0;
    border-radius: var(--app-page-head-icon-radius);
    background: transparent;
    color: inherit;
    box-shadow: none;
}

:is(
    .page-head-icon svg,
    .logo-text
) {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.page-head-icon svg {
    width: var(--app-page-head-icon-glyph-size);
    height: var(--app-page-head-icon-glyph-size);
    stroke-width: var(--app-page-head-icon-stroke-width);
}

@media (max-width: 700px) {
    .page-head-title {
        align-items: center;
        flex-wrap: wrap;
    }
}

/* Shared sidebar navigation and backdrop foundations. */

.sidebar-nav {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--app-sidebar-nav-gap);
    min-height: 100%;
}

.nav-link {
    display: grid;
    grid-template-columns: var(--app-nav-link-icon-frame-size) minmax(0, 1fr) var(--app-nav-link-icon-size);
    align-items: center;
    gap: var(--app-nav-link-gap);
    width: 100%;
    min-height: var(--app-sidebar-nav-row-size, auto);
    padding: var(--app-nav-link-padding-y) var(--app-nav-link-padding-x);
    border: 0;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--app-text-color-strong);
    box-shadow: none;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
}

.nav-link:hover {
    border-bottom-color: transparent;
    background: transparent;
    color: inherit;
}

.nav-link:focus-visible {
    outline: 2px solid var(--app-color-focus);
    outline-offset: 2px;
    box-shadow: none;
}

.nav-link-icon {
    box-sizing: border-box;
    align-self: center;
    justify-self: center;
    flex: 0 0 var(--app-nav-link-icon-size);
    width: var(--app-nav-link-icon-size);
    height: var(--app-nav-link-icon-size);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    box-shadow: none;
}

.nav-link-icon use {
    pointer-events: none;
}

.nav-link-icon,
.nav-link > svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nav-link-arrow {
    align-self: center;
    justify-self: end;
    flex: 0 0 var(--app-nav-link-icon-size);
    width: var(--app-nav-link-icon-size);
    height: var(--app-nav-link-icon-size);
    border: 0;
    background: transparent;
    color: var(--app-color-link);
    box-shadow: none;
    opacity: 0.96;
    transform: rotate(-90deg);
}

.nav-link.active {
    border-bottom-color: transparent;
    background: transparent;
    color: var(--app-text-color-strong);
    box-shadow: none;
    text-shadow: none;
}

.nav-link.active .nav-link-copy strong {
    font-weight: 750;
    text-decoration-line: underline;
    text-decoration-color: currentColor;
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.22em;
    text-decoration-skip-ink: auto;
}

.sidebar-nav-group {
    display: grid;
    gap: var(--app-sidebar-nav-gap);
    min-width: 0;
}

.sidebar-nav-group-header {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        calc(var(--app-sidebar-nav-row-size, var(--app-control-min-height)) - 2px);
    align-items: stretch;
    gap: 0;
    min-width: 0;
    overflow: hidden;
    border: 0;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--app-text-color-strong);
    box-shadow: none;
}

.sidebar-nav-group-link {
    grid-template-columns: var(--app-nav-link-icon-frame-size) minmax(0, 1fr);
    min-width: 0;
    min-height: calc(var(--app-sidebar-nav-row-size, var(--app-control-min-height)) - 2px);
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
}

.sidebar-nav-group-link:is(:hover, .active) {
    border: 0;
    background: transparent;
    color: inherit;
}

.sidebar-nav-group-toggle {
    display: grid;
    place-items: center;
    width: calc(var(--app-sidebar-nav-row-size, var(--app-control-min-height)) - 2px);
    min-width: calc(var(--app-sidebar-nav-row-size, var(--app-control-min-height)) - 2px);
    min-height: calc(var(--app-sidebar-nav-row-size, var(--app-control-min-height)) - 2px);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    box-shadow: none;
    cursor: pointer;
}

.sidebar-nav-group-toggle:is(:hover, [aria-expanded="true"]) {
    border: 0;
    background: transparent;
    color: inherit;
}

.sidebar-nav-group-header:has(:is(.sidebar-nav-group-link, .sidebar-nav-group-toggle):hover) {
    border-bottom-color: transparent;
    background: transparent;
    color: inherit;
}

.sidebar-nav-group-header:has(.sidebar-nav-group-toggle[aria-expanded="true"]),
.sidebar-nav-group-header:has(.sidebar-nav-group-link.active) {
    border-bottom-color: transparent;
    background: transparent;
    color: inherit;
}

.sidebar-nav-group-header:focus-within {
    outline: 0;
}

.sidebar-nav-group-header :is(.sidebar-nav-group-link, .sidebar-nav-group-toggle):focus-visible {
    outline: 2px solid var(--app-color-focus);
    outline-offset: 2px;
}

.sidebar-nav-group-toggle svg {
    width: var(--app-nav-link-icon-size);
    height: var(--app-nav-link-icon-size);
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 60ms ease-out;
}

.sidebar-nav-group-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.sidebar-nav-group-items {
    display: grid;
    gap: var(--app-sidebar-nav-gap);
    min-width: 0;
    padding-inline-start: calc(var(--app-nav-link-icon-frame-size) + var(--app-nav-link-gap));
}

.sidebar-nav-group-items[hidden] {
    display: none;
}

.sidebar-nav-group-items .nav-link {
    min-width: 0;
}

.sidebar-nav-subgroup{
    gap: calc(var(--app-sidebar-nav-gap) * 0.75);
}

.sidebar-nav-subgroup > .sidebar-nav-group-header{
    border: 0;
    background: transparent;
}

.sidebar-nav-subgroup > .sidebar-nav-group-header:has(:is(.sidebar-nav-group-link, .sidebar-nav-group-toggle):hover),
.sidebar-nav-subgroup > .sidebar-nav-group-header:has(.sidebar-nav-group-toggle[aria-expanded="true"]),
.sidebar-nav-subgroup > .sidebar-nav-group-header:has(.sidebar-nav-group-link.active){
    border: 0;
}

.sidebar-nav-nested-items{
    gap: calc(var(--app-sidebar-nav-gap) * 0.72);
    margin-block: 0.08rem 0.18rem;
    padding-inline-start: calc(var(--app-nav-link-icon-frame-size) * 0.72);
}

.sidebar-nav-nested-items .nav-link{
    min-height: calc(var(--app-sidebar-nav-row-size, var(--app-control-min-height)) - 0.38rem);
    font-size: 0.88em;
}

.sidebar-nav-nested-items .nav-link-icon{
    width: calc(var(--app-nav-link-icon-size) * 0.88);
    height: calc(var(--app-nav-link-icon-size) * 0.88);
}

.sidebar-logout-wrap {
    display: grid;
    align-self: stretch;
    width: 100%;
    margin: 0;
    padding: 0;
}

.sidebar-divider {
    width: auto;
    height: 1px;
    margin: var(--app-sidebar-divider-gap);
    background: var(--app-overlay-accent-medium);
}

.logout-link {
    cursor: pointer;
}

.nav-link.active :is(.nav-link-arrow, .nav-link-icon, .nav-link-copy, .nav-link-copy span),
.logout-link :is(.nav-link-arrow, .nav-link-icon, .nav-link-copy, .nav-link-copy span) {
    color: inherit;
}

.sidebar-navigation-actions :is(
    .nav-link,
    .sidebar-nav-group-header,
    .sidebar-nav-group-link,
    .sidebar-nav-group-toggle
) {
    border: 0;
}

.sidebar-divider {
    height: 0;
    background: transparent;
}

@media (max-width: 700px) {
    .sidebar-nav {
        min-height: auto;
        padding-bottom: 0.5rem;
    }

    .sidebar-logout-wrap {
        position: static;
        margin: 0;
        padding: 0;
        background: none;
    }

}

/*
 * Responsive shell adjustments.
 *
 * This subordinate layer supplies narrow-viewport corrections without
 * outranking the rebuilt component owners in the parent ui layer.
 */

@layer responsive-shell {
.museum-detail-head,
.page-head-title,
.page-head-search-launch {
    min-width: 0;
}

.museum-detail-head > .page-head-intro {
    order: 2;
    flex: 1 1 100%;
    width: 100%;
    max-width: 72rem;
    margin: 0.22rem 0 0;
}

.museum-detail-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.page-head-title > .page-head-search-launch,
.museum-detail-head .page-head-title > .page-head-search-launch {
    margin-left: 0;
}

.museum-detail-head > .page-head-search-launch {
    position: relative;
    display: inline-grid;
    grid-template-columns: 1fr;
    place-items: center;
    flex: 0 0 2.32rem;
    width: 2.32rem;
    inline-size: 2.32rem;
    min-width: 2.32rem;
    min-inline-size: 2.32rem;
    max-width: 2.32rem;
    max-inline-size: 2.32rem;
    height: 2.32rem;
    block-size: 2.32rem;
    min-height: 2.32rem;
    min-block-size: 2.32rem;
    max-height: 2.32rem;
    max-block-size: 2.32rem;
    margin: 0;
    padding: 0;
    border-radius: 999px;
    overflow: hidden;
    align-self: center;
    order: 4;
}

.museum-detail-head > .page-head-search-launch::after {
    content: none;
    display: none;
}

.museum-detail-head > .page-head-search-launch .museum-search-panel-launch-orb {
    width: 100%;
    inline-size: 100%;
    height: 100%;
    block-size: 100%;
    flex-basis: 100%;
    border-radius: inherit;
    margin: 0;
    background: var(--app-gradient-brand);
    box-shadow: var(--shadow-soft);
}

.museum-detail-head > .page-head-search-launch .museum-search-panel-launch-icon {
    width: 1rem;
    height: 1rem;
}

.museum-detail-head > .page-head-search-launch .museum-search-panel-launch-copy {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.page-head-socials {
    flex: 1 1 clamp(15.5rem, 20vw, 18rem);
    width: auto;
    max-width: 100%;
    min-height: 2.32rem;
    height: 2.32rem;
    padding: 0.26rem 0.5rem 0.26rem 0.62rem;
    border-radius: 999px;
    align-self: center;
    order: 2;
    border-color: var(--app-overlay-accent-medium);
    background:
        var(--app-gradient-muted);
    box-shadow:
        var(--shadow-soft);
}

.page-head-socials .header-socials-copy {
    flex: 0 0 auto;
    width: max-content;
    max-width: none;
    font-size: 0.68rem;
    color: var(--app-color-link);
    letter-spacing: 0.02em;
    text-shadow: none;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

.museum-detail-head > .page-head-title {
    order: 1;
}

@media (max-width: 1120px) {
    .page-head-socials {
        flex-basis: clamp(15rem, 32vw, 18rem);
    }

}

@media (max-width: 860px) {
    .museum-detail-head > .page-head-title {
        flex-basis: 100%;
        width: 100%;
    }

    .page-head-socials {
        flex: 1 1 16.75rem;
        width: auto;
        justify-content: center;
    }

    .museum-detail-head > .page-head-search-launch {
        flex: 0 0 2.32rem;
    }
}

@media (max-width: 560px) {
    .page-head-socials {
        flex-direction: row;
        flex: 1 1 100%;
        width: 100%;
        height: auto;
        min-height: 2.25rem;
        justify-content: center;
    }

    .page-head-socials .header-socials-copy {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        margin: 0;
        overflow: hidden;
        clip: auto;
        white-space: nowrap;
        border: 0;
    }

}

@media (max-width: 380px) {
    .page-head-socials {
        display: flex;
        padding-inline: 0.42rem;
    }

    .header-actions .btn {
        padding-inline: 0.42rem;
    }
}
}

/* Shared shell header. Layout and footer rules live in their own partials. */

:root{
    --shell-header-gap: 0.46rem;
    --shell-header-pad-x: 1rem;
    --shell-header-pad-y: 0.46rem;
    --shell-tool-height: 2.34rem;
}

.header{
    grid-area: header;
    position: relative;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
}

.header-inner{
    width: 100%;
    height: 100%;
    margin: 0;
    gap: var(--shell-header-gap) 0.72rem;
}

.header-actions .hamburger-btn{
    flex: 0 0 auto;
}

.header-primary-tools .header-search-launch{
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: 0;
    align-self: stretch;
    justify-self: end;
    overflow: visible;
}

.header-primary-tools .header-search-launch .museum-search-panel-launch-copy{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.header-primary-tools .page-head-socials{
    order: initial;
    flex-direction: row;
    gap: 0.42rem;
}

.header-primary-tools .header-socials-copy{
    flex: 0 0 auto;
    display: grid;
    justify-items: start;
    gap: 0.02rem;
    min-width: 0;
    max-width: 7.4rem;
    color: var(--app-color-link);
    font-weight: 650;
    line-height: 1;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.header-primary-tools .header-socials-copy > span{
    display: block;
    max-width: 100%;
    white-space: nowrap;
    line-height: 1;
}

.header-primary-tools .header-socials-links{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    flex: 0 0 auto;
}

.header-account-logout-line{
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 auto;
    gap: 0.18rem;
    color: var(--app-color-link);
    font-weight: 600;
    line-height: 1.05;
    white-space: nowrap;
}

.header-inline-logout{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--app-color-link);
    font: inherit;
    font-weight: 650;
    line-height: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.12rem;
    cursor: pointer;
}

.header-inline-logout:hover,
.header-inline-logout:focus-visible{
    color: var(--app-color-link);
}

.app-drawer,
.sidebar{
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--ui-header-offset, 97px);
    bottom: var(--app-footer-min-height);
    width: min(360px, 88vw);
    max-width: 88vw;
    min-width: 0;
    margin: 0;
    padding: 1rem 0.85rem 1.35rem;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -ms-overflow-style: auto;
    z-index: 45;
    background:
        var(--app-gradient-brand);
    left: 0;
    right: auto;
    border-right: 1px solid var(--app-overlay-accent-medium);
    border-left: 0;
    box-shadow: var(--shadow-soft);
    transform: translate3d(-100%, 0, 0);
    transition: transform 0.22s ease;
    visibility: visible;
    pointer-events: none;
    will-change: transform;
}

.sidebar-nav .nav-link-copy{
    display: flex;
    flex-flow: row wrap;
    align-self: center;
    align-items: center;
    gap: 0.34rem;
    min-width: 0;
    transform: translateY(0.04rem);
}

.nav-link-copy strong{
    color: inherit;
    font-size: 0.95rem;
    line-height: 1.05;
}

.nav-link-copy span{
    color: inherit;
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.28;
}

.nav-link.active .nav-link-copy span{
    color: var(--app-color-link);
}

.sidebar-nav .nav-link-copy strong{
    flex: 0 0 auto;
    min-width: 0;
    line-height: 1.08;
    white-space: nowrap;
}

.sidebar-navigation-actions button.nav-link{
    appearance: none;
    cursor: pointer;
    font: inherit;
}

.sidebar-navigation-actions .nav-link .nav-link-copy strong{
    flex: 1 1 auto;
    white-space: normal;
    overflow-wrap: anywhere;
}

.sidebar-nav .nav-link-copy span{
    flex: 1 1 auto;
    min-width: 0;
    color: var(--app-color-link);
    line-height: 1.08;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-nav .nav-link.active .nav-link-copy span{
    color: var(--app-color-link);
}

.app-drawer.is-open,
.auth-shell.sidebar-open .sidebar{
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
}

.app-drawer-backdrop,
.sidebar-backdrop,
.search-drawer-backdrop{
    position: fixed;
    inset: 0;
    z-index: 44;
    background: var(--app-overlay-brand-medium);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease;
}

.app-drawer-backdrop.is-open,
.auth-shell.sidebar-open .sidebar-backdrop{
opacity: 1;
visibility: visible;
pointer-events: auto;
}

@media (max-width: 700px) {
    .app-drawer,
.sidebar{
        left: 0;
        right: auto;
        width: min(340px, calc(100vw - 44px));
        max-width: calc(100vw - 44px);
        padding: 1rem 1rem calc(1.35rem + env(safe-area-inset-bottom, 0px));
    }
}

.header-primary-tools .header-search-launch .museum-search-panel-launch-orb{
    position: relative;
    display: grid;
    place-items: center;
    isolation: isolate;
    overflow: hidden;
}

.header-primary-tools .header-search-launch .museum-search-panel-launch-orb::before{
    content: "";
    position: absolute;
    inset: 0.12rem 0.16rem auto 0.16rem;
    height: 34%;
    border-radius: 999px 999px 55% 55%;
    background: var(--app-gradient-muted);
    z-index: -1;
    pointer-events: none;
}

.header-primary-tools .header-search-launch .museum-search-panel-launch-icon{
    filter: none;
    transform: translateY(-0.02rem);
}

.header-primary-tools .header-social-link{
    border: 0;
    background: transparent;
    color: var(--app-color-primary-action);
    box-shadow: none;
}

.header-primary-tools .page-head-socials{
    border-color: var(--app-overlay-accent-medium);
    background: var(--app-gradient-muted);
    box-shadow:
        var(--shadow-soft);
}

.header-primary-tools .header-social-link::before,
.header-actions .hamburger-btn::before{
    content: "";
    position: absolute;
    inset: 0.12rem 0.16rem auto 0.16rem;
    height: 34%;
    border-radius: 999px 999px 55% 55%;
    background: var(--app-gradient-muted);
    pointer-events: none;
}

.header-primary-tools .header-social-link,
.header-actions .hamburger-btn{
    position: relative;
    overflow: hidden;
}

.header-primary-tools .header-search-launch .museum-search-panel-launch-icon{
    color: inherit;
    stroke: currentColor;
    filter: none;
}

.shared-follow-button-row .header-social-icon{
    color: var(--app-text-color-strong);
    filter: none;
}

.shared-follow-button-row .header-social-link .header-social-icon{
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.shared-follow-button-row .header-social-link,
.shared-follow-button-row .header-social-link:is(:hover, :focus-visible){
    color: var(--app-text-color-strong);
}

.header-primary-tools .header-social-link:hover{
    background: var(--app-interactive-hover-surface);
    color: var(--app-interactive-hover-text);
    box-shadow: none;
}

.header-primary-tools .header-social-link:focus-visible{
    background: transparent;
    color: var(--app-color-primary-action);
    box-shadow: none;
}

/* Header compact text/icon scale: 15% larger for Follow and account tools. */
.header-primary-tools .header-socials-copy{
    font-size: 0.736rem;
}

.header-account-logout-line{
    font-size: 0.667rem;
}

/* Social follow in the header is icon-only; keep the buttons,
remove the section chrome. */
.header-primary-tools .page-head-socials{
    flex: 0 0 auto;
    align-self: center;
    justify-self: center;
}

.header-primary-tools .page-head-socials{
    border-radius: 0;
}

/* Final uniform header contract: one line on every viewport and zoom level. */
:root{
    --tnnyc-social-gap: clamp(0.02rem, 0.32vw, 0.14rem);
}

.header-inner{
    display: grid;
    grid-template-rows: minmax(0, var(--tnnyc-header-height));
    align-items: center;
    align-content: center;
    padding: 0 var(--tnnyc-header-pad-x);
    overflow: hidden;
}

.header-primary-tools .page-head-socials{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.header-primary-tools .page-head-socials .header-socials-copy{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.header-primary-tools .page-head-socials .header-socials-links{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tnnyc-social-gap);
    min-width: 0;
}

.header-primary-tools .header-social-link{
    display: inline-flex;
    flex: 0 0 var(--tnnyc-social-size);
}

/* Final header spacing pass: scaled controls,
balanced gaps,
no header overflow. */
:root{
    --tnnyc-header-height: 100px;
    --ui-header-offset: var(--tnnyc-header-height);
    --tnnyc-header-pad-x: clamp(0.72rem, 2vw, 1.2rem);
    --tnnyc-header-gap: clamp(0.24rem, 0.95vw, 0.68rem);
    --tnnyc-brand-mark-height: clamp(80px, 7.4vw, 92px);
    --tnnyc-tool-size: clamp(40px, 3.4vw, 48px);
    --tnnyc-tool-icon-size: clamp(18px, 1.85vw, 23px);
    --tnnyc-menu-line-width: clamp(16px, 1.75vw, 22px);
    --tnnyc-social-size: clamp(1.5rem, 2.4vw, 2.1rem);
    --tnnyc-social-icon-size: clamp(0.91rem, 1.43vw, 1.27rem);
    --tnnyc-tool-group-gap: clamp(0.16rem, 0.62vw, 0.38rem);
}

.header,
.header-inner{
    min-height: var(--tnnyc-header-height);
    height: var(--tnnyc-header-height);
    max-height: var(--tnnyc-header-height);
}

.header{
    --ui-header-offset: var(--tnnyc-header-height);
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
    border: 0;
    outline: 0;
    background: var(--app-palette-white);
    color: var(--app-palette-black);
    box-shadow: none;
}

.header-inner{
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr) max-content;
    grid-template-areas: "brand spacer cluster";
    column-gap: var(--tnnyc-tool-group-gap);
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    box-sizing: border-box;
    padding-inline: var(--tnnyc-header-pad-x);
    padding-block: 0;
}

.header-inner > .header-brand{
    grid-area: brand;
    display: inline-flex;
    align-items: center;
    justify-self: start;
    width: auto;
    gap: 0;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
}

/* Canonical header-brand image contract. Responsive bands modify only
   --tnnyc-brand-mark-height; no other selector sizes or frames this asset. */
.header-inner > .header-brand > .brand-mark-logo{
    display: block;
    width: auto;
    min-width: 0;
    max-width: 100%;
    height: var(--tnnyc-brand-mark-height);
    aspect-ratio: 2012 / 377;
    flex: 0 0 auto;
    box-sizing: border-box;
    padding: 0;
    border: 0;
    background: transparent;
    object-fit: contain;
    object-position: center;
    border-radius: 0;
    filter: none;
    box-shadow: none;
    transform: translateZ(0);
    transform-origin: center center;
    scale: 1;
    transition:
        filter 180ms ease,
        transform 180ms ease,
        scale 180ms ease;
}

.header-inner > .header-brand:is(:hover, :focus-visible) > .brand-mark-logo {
    filter: none;
    transform: translateZ(0);
    scale: 1.04;
}

.header-inner > .header-brand:active > .brand-mark-logo {
    scale: 0.975;
}

.header-right-cluster{
    grid-area: cluster;
    display: grid;
    grid-template-rows: max-content;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    flex: 0 0 auto;
    gap: 0;
    width: auto;
    max-width: 100%;
    min-width: 0;
    margin: 0;
}

.header-primary-tools{
    display: inline-flex;
    align-items: center;
    gap: var(--tnnyc-tool-group-gap);
}

.header-actions{
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    min-width: 0;
    gap: var(--tnnyc-tool-group-gap);
}

.header-cluster-tools{
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--tnnyc-tool-group-gap);
}

.header-primary-tools .page-head-socials,
.header-primary-tools .page-head-socials .header-socials-links{
    gap: var(--tnnyc-tool-group-gap);
}

.header-primary-tools .header-social-link{
    width: var(--tnnyc-social-size);
    min-width: var(--tnnyc-social-size);
    max-width: var(--tnnyc-social-size);
    height: var(--tnnyc-social-size);
    flex-basis: var(--tnnyc-social-size);
}

.header-primary-tools .header-social-link svg{
    width: var(--tnnyc-social-icon-size);
    height: var(--tnnyc-social-icon-size);
}

.header-inner .header-tool-button,
.header-primary-tools .header-search-launch .museum-search-panel-launch-orb{
    width: var(--tnnyc-tool-size);
    min-width: var(--tnnyc-tool-size);
    max-width: var(--tnnyc-tool-size);
    height: var(--tnnyc-tool-size);
    min-height: var(--tnnyc-tool-size);
    max-height: var(--tnnyc-tool-size);
    padding: 0;
    box-sizing: border-box;
}

.header-inner .header-tool-button,
.header-primary-tools .header-search-launch .museum-search-panel-launch-orb{
    display: inline-grid;
    place-items: center;
}

.header-primary-tools .header-search-launch .museum-search-panel-launch-orb{
    border: 0;
    border-radius: inherit;
    background: transparent;
    background-image: none;
    color: inherit;
    box-shadow: none;
}

.header-inner .header-tool-button{
    appearance: none;
    border: 0;
    border-radius: 10px;
    background: var(--app-gradient-brand);
    color: var(--app-color-inverse-text);
    box-shadow: var(--app-shadow-header-control-clean);
    cursor: pointer;
    font: inherit;
    text-decoration: none;
    transition:
        background-color 160ms ease,
        color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

.header-inner .header-tool-button:hover{
    background: var(--app-interactive-hover-surface);
    color: var(--app-interactive-hover-text);
    box-shadow: var(--app-shadow-header-control-clean-hover);
    transform: translateY(-2px);
}

.header-inner .header-tool-button:focus-visible{
    outline: 2px solid var(--app-color-focus);
    outline-offset: 2px;
    background: var(--app-gradient-brand);
    color: var(--app-color-inverse-text);
    box-shadow: var(--app-shadow-header-control-clean-focus);
}

.header-inner .header-tool-button:active {
    box-shadow: var(--app-shadow-header-control-pressed);
    transform: translateY(1px);
}

.header-inner .header-tool-button svg{
    width: var(--tnnyc-tool-icon-size);
    height: var(--tnnyc-tool-icon-size);
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.header-primary-tools .header-search-launch .museum-search-panel-launch-icon{
    transform-origin: center;
    transition:
        transform 180ms ease,
        filter 180ms ease;
}

.header-actions .hamburger-btn{
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(2px, 0.28vw, 4px);
}

.header-actions .hamburger-btn span{
    width: calc(var(--tnnyc-menu-line-width) * 1.18);
    height: 3px;
    max-width: calc(var(--tnnyc-tool-size) - 10px);
    flex: 0 0 3px;
    margin: 0;
    transform: none;
    transform-origin: center;
    opacity: 1;
    border-radius: 999px;
    background: currentColor;
    box-shadow: none;
    transition:
        transform 190ms ease,
        opacity 150ms ease,
        width 180ms ease,
        box-shadow 190ms ease;
}

.header-actions .hamburger-btn.is-active span{
    width: calc(var(--tnnyc-menu-line-width) * 1.34);
    box-shadow: none;
}

.header-actions .hamburger-btn.is-active span:nth-child(1){
    transform: translateY(calc(3px + clamp(2px, 0.28vw, 4px))) rotate(45deg);
}

.header-actions .hamburger-btn.is-active span:nth-child(2){
    opacity: 0;
    transform: scaleX(0.15);
}

.header-actions .hamburger-btn.is-active span:nth-child(3){
    transform: translateY(calc(-3px - clamp(2px, 0.28vw, 4px))) rotate(-45deg);
}

body.search-drawer-open .header-primary-tools [data-site-search-launch],
.header-primary-tools .header-search-launch.is-open{
    animation: none;
}

body.search-drawer-open .header-primary-tools [data-site-search-launch] .museum-search-panel-launch-orb,
.header-primary-tools .header-search-launch.is-open .museum-search-panel-launch-orb{
    animation: none;
}

body.search-drawer-open .header-primary-tools [data-site-search-launch] .museum-search-panel-launch-icon,
.header-primary-tools .header-search-launch.is-open .museum-search-panel-launch-icon{
    transform: none;
    filter: none;
}

@keyframes tnnyc-header-search-open {
    0%{
        transform: scale(1);
    }
    45%{
        transform: scale(1.08);
    }
    100%{
        transform: scale(1);
    }
}

@keyframes tnnyc-header-search-orb-open {
    0%{
        transform: rotate(0deg) scale(1);
    }
    45%{
        transform: rotate(-12deg) scale(1.12);
    }
    100%{
        transform: rotate(0deg) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.search-drawer-open .header-primary-tools [data-site-search-launch],
.header-primary-tools .header-search-launch.is-open,
body.search-drawer-open .header-primary-tools [data-site-search-launch] .museum-search-panel-launch-orb,
.header-primary-tools .header-search-launch.is-open .museum-search-panel-launch-orb{
        animation: none;
    }

    .header-primary-tools .header-search-launch .museum-search-panel-launch-icon,
.header-actions .hamburger-btn span,
.header-inner > .header-brand > .brand-mark-logo,
.header-inner .header-tool-button{
        transition: none;
    }

    .header-inner > .header-brand:is(:hover, :focus-visible, :active) > .brand-mark-logo {
        transform: translateZ(0);
        scale: 1;
    }

    .header-inner .header-tool-button:is(:hover, :active) {
        transform: none;
    }
}

@media (min-width: 981px) {
    :root{
        --tnnyc-header-height: 100px;
    }
}

@media (min-width: 701px) and (max-width: 980px) {
    .header-primary-tools .header-search-launch .museum-search-panel-launch-copy{
        display: none;
    }
}

@media (max-width: 700px) {
    :root{
        --tnnyc-header-height: 92px;
        --tnnyc-header-pad-x: clamp(0.38rem, 1.75vw, 0.64rem);
        --tnnyc-brand-mark-height: min(12.89vw, 80px);
        --tnnyc-tool-size: 36px;
        --tnnyc-tool-icon-size: 16px;
        --tnnyc-menu-line-width: 16px;
        --tnnyc-social-size: 1.3rem;
        --tnnyc-social-icon-size: 0.81rem;
        --tnnyc-tool-group-gap: 0.055rem;
    }

    .header-primary-tools .page-head-socials .header-socials-copy,
.header-primary-tools .header-search-launch .museum-search-panel-launch-copy{
        display: none;
    }

    .header-inner {
        grid-template-columns: minmax(0, 1fr) max-content;
        grid-template-areas: "brand cluster";
    }

}

/* Canonical compact header: brand, Help/Email/Search, then Menu retain the
 * same order and shared control contract at compact widths. */
@media (max-width: 500px){
    :root {
        --tnnyc-header-height: 78px;
        --tnnyc-header-pad-x: clamp(0.42rem, 2vw, 0.62rem);
        --tnnyc-brand-mark-height: min(12.89vw, 68px);
        --tnnyc-tool-size: clamp(26px, 8vw, 36px);
        --tnnyc-tool-icon-size: clamp(13px, 3.65vw, 16px);
        --tnnyc-menu-line-width: clamp(13px, 3.65vw, 15px);
        --tnnyc-tool-group-gap: clamp(0.2rem, 1.4vw, 0.38rem);
    }

    .header,
    .header-inner {
        min-height: var(--tnnyc-header-height);
        height: var(--tnnyc-header-height);
        max-height: var(--tnnyc-header-height);
    }

    .header-inner {
        grid-template-columns: minmax(0, 1fr) max-content;
        grid-template-rows: minmax(0, 1fr);
        grid-template-areas: "brand cluster";
        gap: var(--tnnyc-tool-group-gap);
        padding-block: 0;
        align-items: center;
        overflow: hidden;
    }

    .header-right-cluster {
        grid-area: cluster;
        display: grid;
        align-items: center;
        justify-content: flex-end;
        justify-self: end;
        gap: 0;
    }

}

@media (max-width: 390px) {
    :root{
        --tnnyc-header-height: clamp(68px, calc(40.8px + 8vw), 72px);
        --tnnyc-header-pad-x: clamp(0.34rem, 2vw, 0.49rem);
        --tnnyc-brand-mark-height: min(12.41vw, 58.5px);
        --tnnyc-tool-size: clamp(26px, 8vw, 36px);
        --tnnyc-tool-icon-size: clamp(13px, 3.65vw, 16px);
        --tnnyc-social-size: clamp(0.78rem, 4vw, 1rem);
        --tnnyc-social-icon-size: clamp(0.48rem, 2.5vw, 0.62rem);
        --tnnyc-social-gap: clamp(0.02rem, 0.1vw, 0.04rem);
        --tnnyc-tool-group-gap: clamp(0.2rem, 1.4vw, 0.38rem);
    }

}

/* Header destination band
 * Wide desktop reserves and paints the stable row with the shell. JavaScript
 * then refines the fit contract without making body content win first paint. */
:root{
    --tnnyc-header-navigation-height: 3.4rem;
}

.header-navigation-band[hidden]{
    display: none;
}

.header-navigation-band.is-measuring{
    display: grid;
    position: fixed;
    inset: -10000px 0 auto;
    visibility: hidden;
    pointer-events: none;
}

@media (min-width: 981px) and (max-width: 1200px) {
    body.header-navigation-pending {
        --ui-header-offset: var(--tnnyc-header-height);
    }

    body.header-navigation-pending .header {
        display: block;
        min-height: var(--tnnyc-header-height);
        height: var(--tnnyc-header-height);
        max-height: var(--tnnyc-header-height);
    }

    body.header-navigation-pending .header-navigation-band {
        display: none;
    }
}

body.header-navigation-visible{
    --ui-header-offset: calc(
        var(--tnnyc-header-height) + var(--tnnyc-header-navigation-height)
    );
}

body.header-navigation-visible .header{
    --ui-header-offset: calc(
        var(--tnnyc-header-height) + var(--tnnyc-header-navigation-height)
    );
    display: grid;
    grid-template-rows:
        var(--tnnyc-header-height)
        var(--tnnyc-header-navigation-height);
    min-height: var(--ui-header-offset);
    height: var(--ui-header-offset);
    max-height: var(--ui-header-offset);
}

body.header-navigation-visible .header-inner{
    min-height: var(--tnnyc-header-height);
    height: var(--tnnyc-header-height);
    max-height: var(--tnnyc-header-height);
}

.header-navigation-band{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    justify-items: center;
    justify-content: center;
    gap: 0.1rem;
    width: 100%;
    min-width: 0;
    height: var(--tnnyc-header-navigation-height);
    padding: 0 var(--app-control-gap);
    overflow: hidden;
    border-top: 0;
    border-bottom: 0;
    outline: 0;
    background: var(--app-surface-theme-anchor);
    color: var(--app-text-color-strong);
    box-shadow: none;
}

.header-navigation-destinations{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0.7rem;
    width: max-content;
    min-width: max-content;
    white-space: nowrap;
}

.header-navigation-link{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--header-navigation-link-width, max-content);
    width: var(--header-navigation-link-width, max-content);
    min-width: var(--header-navigation-link-width, max-content);
    max-width: var(--header-navigation-link-width, max-content);
    min-height: 2.2rem;
    height: 2.2rem;
    padding: 0.3rem 0.3rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--app-text-color-strong);
    font-size: 0.9rem;
    font-weight: 650;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        color 160ms ease,
        background-color 160ms ease,
        transform 160ms ease;
}

.header-navigation-item{
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 var(--header-navigation-link-width, max-content);
    width: var(--header-navigation-link-width, max-content);
    min-width: var(--header-navigation-link-width, max-content);
    max-width: var(--header-navigation-link-width, max-content);
}

.header-navigation-item > .header-navigation-link{
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    max-width: none;
    padding-inline-end: 1.55rem;
}

.header-navigation-disclosure{
    position: relative;
    font-family: inherit;
    text-align: inherit;
}

.header-navigation-disclosure-icon{
    position: absolute;
    inset-inline-end: 0.44rem;
    top: 50%;
    display: block;
    width: 0.76rem;
    height: 0.76rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
    transform: translateY(-50%);
    transition: transform 160ms ease;
}

.header-navigation-disclosure[aria-expanded="true"] .header-navigation-disclosure-icon{
    transform: translateY(-50%) rotate(180deg);
}

.header-navigation-submenu{
    position: fixed;
    inset: auto;
    width: min(18rem, calc(100vw - 1.5rem));
    max-height: none;
    margin: 0;
    padding: 0.5rem;
    overflow: visible;
    border: 1px solid var(--app-border-color-subtle);
    border-radius: 0;
    background: var(--app-surface-theme-anchor);
    color: var(--app-text-color-strong);
    box-shadow: none;
    opacity: 0;
    transform: translateY(-0.5rem);
    transition:
        opacity 180ms ease,
        transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
        display 220ms allow-discrete,
        overlay 220ms allow-discrete;
}

.header-navigation-submenu:popover-open{
    opacity: 1;
    transform: translateY(0);
}

@starting-style{
    .header-navigation-submenu:popover-open{
        opacity: 0;
        transform: translateY(-0.5rem);
    }
}

.header-navigation-submenu::backdrop{
    background: transparent;
}

.header-navigation-submenu-wide{
    width: min(18rem, calc(100vw - 1.5rem));
}

.header-navigation-submenu:not(.header-navigation-submenu-hierarchical){
    max-height: calc(100dvh - var(--ui-header-offset) - 1.125rem);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.header-navigation-submenu-title{
    margin: 0;
    padding: 0.35rem 0.45rem 0.48rem;
    color: var(--app-text-color-heading);
    font-size: 0.76rem;
    font-weight: 650;
    line-height: 1.2;
}

.header-navigation-submenu-list{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
}

.header-navigation-submenu-hierarchical{
    width: min(18rem, calc((100vw - 1.5rem) / 2));
}

.header-navigation-submenu-hierarchical .header-navigation-submenu-list{
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
}

.header-navigation-submenu-hierarchical .header-navigation-nested-group{
    position: relative;
}

.header-navigation-submenu-hierarchical .header-navigation-nested-items{
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: calc(100% + 0.5rem);
    z-index: 1;
    width: 100%;
    max-height: calc(100dvh - var(--ui-header-offset) - 1.125rem);
    margin: 0;
    padding: 0.2rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--app-border-color-subtle);
    border-radius: 0;
    background: var(--app-surface-theme-anchor);
    box-shadow: none;
}

.header-navigation-submenu-hierarchical
    .header-navigation-nested-disclosure-icon{
    transform: rotate(-90deg);
}

.header-navigation-submenu-hierarchical
    .header-navigation-nested-disclosure[aria-expanded="true"]
    .header-navigation-nested-disclosure-icon{
    transform: rotate(-90deg);
}

.header-navigation-submenu-link{
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.48rem;
    min-width: 0;
    min-height: 2.35rem;
    padding: 0.46rem 0.55rem;
    border: 0;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--app-text-color-strong);
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.25;
    text-decoration: none;
    transition:
        color 160ms ease,
        background-color 160ms ease,
        border-color 160ms ease;
}

.header-navigation-submenu-link:hover,
.header-navigation-submenu-link:focus-visible{
    border-bottom-color: var(--app-border-color-subtle);
    background: transparent;
    color: var(--app-color-primary-action-hover);
}

.header-navigation-submenu-link.is-active,
.header-navigation-nested-disclosure[aria-expanded="true"]{
    border-bottom-color: var(--app-color-primary-action);
    background: transparent;
    color: var(--app-color-primary-action);
}

.header-navigation-submenu-link:focus-visible{
    outline: 2px solid var(--app-color-focus);
    outline-offset: 1px;
}

.header-navigation-submenu-link > svg{
    display: block;
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.header-navigation-submenu-link > span{
    min-width: 0;
    overflow-wrap: anywhere;
}

.header-navigation-nested-group{
    display: grid;
    align-content: start;
    min-width: 0;
    background: transparent;
}

.header-navigation-nested-header{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
}

.header-navigation-nested-header .header-navigation-submenu-link{
    width: 100%;
}

.header-navigation-nested-disclosure{
    grid-template-columns: 1rem minmax(0, 1fr) 0.78rem;
    font-family: inherit;
    text-align: inherit;
    cursor: pointer;
}

.header-navigation-submenu-link > .header-navigation-nested-disclosure-icon{
    width: 0.78rem;
    height: 0.78rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 60ms ease-out;
}

.header-navigation-nested-disclosure[aria-expanded="true"]
    .header-navigation-nested-disclosure-icon{
    transform: rotate(180deg);
}

.header-navigation-nested-items{
    display: grid;
    gap: 0.14rem;
    margin: 0.18rem 0 0.32rem 0.72rem;
    padding: 0.1rem 0 0.12rem 0.42rem;
}

.header-navigation-nested-items[hidden]{
    display: none;
}

.header-navigation-nested-link{
    display: grid;
    grid-template-columns: 0.9rem minmax(0, 1fr);
    align-items: center;
    gap: 0.42rem;
    min-width: 0;
    min-height: 2rem;
    padding: 0.34rem 0.46rem;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    color: var(--app-text-color-muted);
    font-size: 0.74rem;
    font-weight: 650;
    line-height: 1.25;
    text-decoration: none;
}

.header-navigation-nested-link:is(:hover, :focus-visible){
    border-bottom-color: var(--app-border-color-subtle);
    background: transparent;
    color: var(--app-color-primary-action-hover);
}

.header-navigation-nested-link.is-active{
    border-bottom-color: var(--app-color-primary-action);
    background: transparent;
    color: var(--app-color-primary-action);
    font-weight: 650;
}

.header-navigation-nested-link:focus-visible{
    outline: 2px solid var(--app-color-focus);
    outline-offset: 1px;
}

.header-navigation-nested-link svg{
    width: 0.9rem;
    height: 0.9rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.header-navigation-link:focus-visible{
    outline: 2px solid var(--app-color-focus);
    outline-offset: 2px;
}

.header-navigation-link:is(.is-active, [aria-current="page"]){
    position: relative;
    z-index: 1;
    color: var(--app-color-brand-surface);
    background: var(--app-surface-selected);
    box-shadow: var(--shadow-soft);
    text-shadow: none;
    transform: none;
}

.header-navigation-link:is(.is-active, [aria-current="page"]):is(:hover, :focus-visible, :active){
    color: var(--app-color-brand-surface);
    transform: none;
}

.header-navigation-link-content{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    color: inherit;
    font: inherit;
    white-space: nowrap;
}

.header-navigation-link-content .home-hero-point-icon{
    display: inline-grid;
    place-items: center;
    flex: 0 0 0.86rem;
    width: 0.86rem;
    height: 0.86rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    box-shadow: none;
    outline: 0;
    transform: none;
}

.header-navigation-link-content .home-hero-point-icon svg{
    display: block;
    width: 0.86rem;
    height: 0.86rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.header-navigation-link-content .main-navigation-card-copy{
    display: none;
}

.header-navigation-follow{
    display: grid;
    align-items: center;
    justify-items: center;
    width: max-content;
    min-width: max-content;
}

.header-navigation-follow .page-head-socials{
    display: grid;
    grid-template-rows: auto auto;
    align-items: center;
    justify-items: center;
    gap: 0.08rem;
    width: max-content;
    min-width: max-content;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.header-navigation-follow .header-socials-copy{
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0.22rem;
    width: 100%;
    color: var(--app-text-color-muted);
    font-size: 0.66rem;
    line-height: 1;
    white-space: nowrap;
}

.header-navigation-follow .header-socials-copy > span{
    display: inline;
    color: inherit;
    font: inherit;
}

.header-navigation-follow .header-socials-copy > .header-socials-handle{
    color: var(--app-color-primary-action);
    font-weight: 650;
}

.header-navigation-follow .header-socials-links{
    --tnnyc-follow-hit-size: 2.35rem;
    --tnnyc-follow-disc-size: 2rem;
    --tnnyc-follow-icon-size: 1.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0.22rem;
    width: max-content;
    min-width: max-content;
}

.header-navigation-follow .header-social-link{
    display: inline-grid;
    place-items: center;
    position: relative;
    flex: 0 0 var(--tnnyc-follow-hit-size);
    width: var(--tnnyc-follow-hit-size);
    min-width: var(--tnnyc-follow-hit-size);
    max-width: var(--tnnyc-follow-hit-size);
    height: var(--tnnyc-follow-hit-size);
    min-height: var(--tnnyc-follow-hit-size);
    max-height: var(--tnnyc-follow-hit-size);
    padding: 0;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: var(--app-color-primary-action);
    box-shadow: none;
}

.header-navigation-follow .header-social-link::before{
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: var(--tnnyc-follow-disc-size);
    height: var(--tnnyc-follow-disc-size);
    border-radius: 50%;
    background: transparent;
    transform: translate(-50%, -50%);
    transition: background-color 160ms ease;
}

.header-navigation-follow .header-social-link svg{
    position: relative;
    z-index: 1;
    width: var(--tnnyc-follow-icon-size);
    height: var(--tnnyc-follow-icon-size);
}

.header-navigation-follow .header-newsletter-link{
    color: var(--app-color-information);
}

.header-navigation-follow .header-social-link-contact{
    color: var(--app-color-success);
}

.header-navigation-follow .header-social-link:hover{
    background: transparent;
    color: var(--app-interactive-hover-text);
}

.header-navigation-follow .header-social-link:hover::before{
    background: var(--app-interactive-hover-surface);
}

.header-navigation-follow .header-social-link:focus-visible{
    background: transparent;
    color: var(--app-color-primary-action);
}

/* Palette contract: every control and label painted on the brand header uses
 * inverse text; gold is reserved for the social handle highlight. */
.header-inner :is(
    .header-socials-copy,
    .header-account-logout-line,
    .header-inline-logout
) {
    color: var(--app-color-inverse-text);
}

.header-inner .header-socials-handle {
    color: var(--app-color-accent-on-dark);
}

.header-inner .museum-search-panel-launch-copy,
.header-inner .museum-search-panel-launch-copy :is(strong, span) {
    color: var(--app-color-inverse-text);
}

/* Header depth comes from shared inset and elevation tokens; keep retired
 * pseudo-element glass overlays out of the control anatomy. */
.header-primary-tools .header-search-launch .museum-search-panel-launch-orb::before,
.header-primary-tools .header-social-link::before,
.header-actions .hamburger-btn::before {
    content: none;
    display: none;
}

/* White editorial navigation panel used whenever the destination row does not fit. */
.app-drawer-menu.sidebar {
    top: var(--ui-header-offset);
    bottom: 0;
    left: 50%;
    right: auto;
    width: min(42rem, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    padding: clamp(1.4rem, 4vw, 2.6rem) clamp(1rem, 4vw, 2rem);
    border: 1px solid var(--app-border-color-subtle);
    border-top: 0;
    border-radius: 0;
    background: var(--app-surface-theme-anchor);
    color: var(--app-text-color-strong);
    box-shadow: none;
    opacity: 0;
    transform: translate3d(-50%, -1rem, 0) scale(0.985);
    transform-origin: top center;
    transition: opacity 180ms ease, transform 180ms ease;
}

.app-drawer-menu.sidebar.is-open,
.auth-shell.sidebar-open .app-drawer-menu.sidebar {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scale(1);
}

.sidebar-backdrop {
    inset: 0;
    background: var(--app-overlay-brand-soft);
}

.app-drawer-menu .sidebar-nav {
    gap: clamp(0.8rem, 2vw, 1.25rem);
}

.app-drawer-menu .sidebar-account-box {
    border-color: var(--app-border-color-subtle);
    background: transparent;
    color: var(--app-text-color-strong);
}

.app-drawer-menu .sidebar-navigation-actions {
    gap: clamp(0.12rem, 0.6vw, 0.35rem);
}

.app-drawer-menu .sidebar-navigation-actions > .nav-link {
    grid-template-columns: var(--app-nav-link-icon-frame-size) minmax(0, 1fr) var(--app-nav-link-icon-size);
    justify-items: stretch;
    min-height: 3.1rem;
    border: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--app-text-color-strong);
    box-shadow: none;
    text-align: left;
}

.app-drawer-menu .sidebar-navigation-actions > .nav-link:is(:hover, :focus-visible, .active) {
    border: 0;
    background: transparent;
    color: var(--app-color-primary-action);
}

.app-drawer-menu .sidebar-navigation-actions > .nav-link > :is(.nav-link-icon, .nav-link-arrow) {
    display: block;
}

.app-drawer-menu .sidebar-navigation-actions > .nav-link .nav-link-copy {
    justify-content: flex-start;
    transform: none;
}

.app-drawer-menu .sidebar-navigation-actions > .nav-link .nav-link-copy strong {
    font-size: 0.95rem;
    font-weight: 650;
    line-height: 1.15;
    text-transform: none;
}

.app-drawer-menu .sidebar-navigation-actions .nav-link-copy span {
    display: none;
}

.app-drawer-menu .sidebar-nav-group {
    border: 0;
    padding-block: 0;
}

.app-drawer-menu .sidebar-nav-group-header {
    background: transparent;
}

.app-drawer-menu .sidebar-nav-group-items:not([hidden]) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.16rem 0.8rem;
    padding: 0.4rem 0.2rem 0.7rem;
}

.app-drawer-menu .sidebar-nav-group-items .nav-link {
    border-radius: 0;
    background: transparent;
    color: var(--app-text-color-strong);
}

.app-drawer-menu .sidebar-follow-section .header-socials-copy {
    color: var(--app-text-color-muted);
}

.app-drawer-menu .sidebar-follow-section .header-socials-handle {
    color: var(--app-color-primary-action);
}

/* Unified editorial drawer composition. All destinations and actions remain in
   the DOM; this layer only standardizes their presentation hierarchy. */
.app-drawer-menu .sidebar-account-box {
    padding: 0 0 1rem;
    border: 0;
}

.app-drawer-menu .sidebar-account-box .welcome-note {
    align-items: center;
    gap: 0.28rem;
    color: var(--app-text-color-strong);
    text-align: center;
}

.app-drawer-menu .sidebar-account-box :is(
    .welcome-note-greeting,
    .header-account-logout-line
) {
    color: var(--app-text-color-strong);
}

.app-drawer-menu .sidebar-account-box .header-inline-logout {
    color: var(--app-color-primary-action);
}

.app-drawer-menu .sidebar-follow-section {
    display: grid;
    justify-items: center;
    gap: 0.05rem;
    padding: 0 0 1.15rem;
    border: 0;
}

.app-drawer-menu .sidebar-follow-handle {
    margin: 0;
    color: var(--app-text-color-muted);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-align: center;
}

.app-drawer-menu .sidebar-follow-handle strong {
    color: var(--app-text-color-strong);
    font-weight: 750;
}

.app-drawer-menu .sidebar-follow-section .page-head-socials {
    width: 100%;
    min-height: 0;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.app-drawer-menu .sidebar-navigation-actions > .nav-link {
    min-height: 3.35rem;
    padding: 0.8rem 0.25rem;
}

.app-drawer-menu .sidebar-navigation-actions > .nav-link .nav-link-copy strong {
    font-size: clamp(1.05rem, 2.6vw, 1.35rem);
    font-weight: 500;
    letter-spacing: 0.01em;
}

.app-drawer-menu .sidebar-nav-group-header {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3rem;
    min-height: 3.35rem;
    overflow: visible;
    border: 0;
}

.app-drawer-menu .sidebar-nav-group-link {
    display: grid;
    grid-template-columns: var(--app-nav-link-icon-frame-size) minmax(0, 1fr);
    align-items: center;
    min-height: 3.35rem;
    padding: 0.8rem var(--app-nav-link-padding-x);
    text-align: left;
}

.app-drawer-menu .sidebar-nav-group-link > .nav-link-icon {
    display: block;
}

.app-drawer-menu .sidebar-nav-group-link .nav-link-copy {
    justify-content: flex-start;
    transform: none;
}

.app-drawer-menu .sidebar-nav-group-link .nav-link-copy strong {
    font-size: 0.95rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    text-transform: none;
}

.app-drawer-menu .sidebar-nav-group-toggle {
    position: static;
    width: 3rem;
    min-width: 3rem;
    min-height: 100%;
    color: inherit;
}

.app-drawer-menu .sidebar-nav-group-items:not([hidden]) {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: 0;
    padding: 0.2rem 0 0.9rem;
    border: 0;
}

.app-drawer-menu .sidebar-nav-group-items .nav-link {
    grid-template-columns: var(--app-nav-link-icon-frame-size) minmax(0, 1fr) var(--app-nav-link-icon-size);
    gap: 0.35rem;
    width: calc(100% - var(--app-sidebar-child-row-inset));
    min-height: 2.25rem;
    margin-inline-start: var(--app-sidebar-child-row-inset);
    padding: 0.42rem 0.3rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--app-text-color-strong);
}

.app-drawer-menu .sidebar-nav-group-items .nav-link:is(:hover, :focus-visible, .active) {
    background: transparent;
    color: var(--app-color-primary-action);
}

.app-drawer-menu .sidebar-nav-group-items .nav-link > .nav-link-icon {
    display: block;
}

.app-drawer-menu .sidebar-nav-group-items .nav-link-copy {
    display: block;
    transform: none;
}

.app-drawer-menu .sidebar-nav-group-items .nav-link-copy strong {
    font-size: 0.88rem;
    font-weight: 650;
    line-height: 1.25;
    text-transform: none;
}

.app-drawer-menu .sidebar-nav-group-items .nav-link-arrow {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--app-color-primary-action);
}

.app-drawer-menu .sidebar-divider {
    background: transparent;
}
/* Monochrome navigation contract shared by the fitted row and Menu drawer. */
.header-navigation-band :is(
    .header-navigation-link,
    .header-navigation-submenu-link,
    .header-navigation-nested-link,
    .header-navigation-nested-disclosure
) {
    border-bottom: 0;
    color: var(--app-text-color-strong);
}

.header-navigation-link:is(
    :hover,
    :focus-visible,
    .is-active,
    [aria-current=page]
),
.header-navigation-submenu-link:is(
    :hover,
    :focus-visible,
    .is-active
),
.header-navigation-nested-link:is(
    :hover,
    :focus-visible,
    .is-active
),
.header-navigation-nested-disclosure:is(
    :hover,
    :focus-visible,
    [aria-expanded=true]
) {
    border-bottom: 0;
    background: transparent;
    color: var(--app-text-color-strong);
    box-shadow: none;
}

.header-navigation-band :is(
    .header-navigation-link,
    .header-navigation-submenu-link,
    .header-navigation-nested-link,
    .header-navigation-nested-disclosure
):focus-visible {
    outline-color: var(--app-text-color-strong);
}

.app-drawer-menu :is(
    .nav-link,
    .sidebar-nav-group-header,
    .sidebar-nav-group-link,
    .sidebar-nav-group-toggle,
    .logout-link,
    .header-socials-copy,
    .header-socials-handle,
    .header-inline-logout,
    .nav-link-arrow
) {
    color: var(--app-text-color-strong);
}

.app-drawer-menu .sidebar-navigation-actions > .nav-link:is(
    :hover,
    :focus-visible,
    .active
),
.app-drawer-menu .sidebar-nav-group-items .nav-link:is(
    :hover,
    :focus-visible,
    .active
),
.app-drawer-menu .sidebar-nav-group-header:has(
    :is(.sidebar-nav-group-link, .sidebar-nav-group-toggle):hover
),
.app-drawer-menu .sidebar-nav-group-header:has(
    .sidebar-nav-group-toggle[aria-expanded=true]
),
.app-drawer-menu .sidebar-nav-group-header:has(
    .sidebar-nav-group-link.active
) {
    border-bottom: 0;
    background: transparent;
    color: var(--app-text-color-strong);
}

.app-drawer-menu :is(
    .nav-link,
    .sidebar-nav-group-header,
    .sidebar-nav-group-link,
    .sidebar-nav-group-toggle,
    .logout-link,
    .header-inline-logout
):focus-visible {
    outline-color: var(--app-text-color-strong);
}

.header-primary-tools .header-search-launch .museum-search-panel-launch-copy {
    display: none;
}

@media (max-width: 980px) {
    :root {
        --tnnyc-header-pad-x: clamp(0.5rem, 2.5vw, 1rem);
        --tnnyc-brand-mark-width: clamp(9rem, 36vw, 13rem);
        --tnnyc-tool-size: clamp(2rem, 9vw, 2.5rem);
        --tnnyc-tool-icon-size: clamp(1.25rem, 5vw, 1.5rem);
        --tnnyc-tool-group-gap: clamp(0.1rem, 0.8vw, 0.25rem);
    }
}
@media (prefers-reduced-motion: reduce) {
    .header,
    .header-inner,
    .app-drawer-menu.sidebar {
        transition: none;
    }
}

@media (max-width: 980px) {
    .header {
        position: fixed;
        inset: 0 0 auto;
        width: 100%;
    }
}

/* Shared white left-edge drawer shell for Menu and Search. */
.app-drawer-menu.sidebar,
.app-drawer-search {
    --app-nav-link-icon-size: 1rem;
    --app-nav-link-icon-frame-size: 1.5rem;
    --app-nav-link-gap: 0.5rem;
    --app-sidebar-nav-gap: 0.125rem;
    --app-sidebar-nav-row-size: 2.75rem;
    --app-sidebar-child-row-inset: 0.75rem;
    top: calc(var(--ui-header-offset) - 1px);
    bottom: auto;
    height: calc(100vh - var(--ui-header-offset) + 1px);
    max-height: calc(100vh - var(--ui-header-offset) + 1px);
    height: calc(100dvh - var(--ui-header-offset) + 1px);
    max-height: calc(100dvh - var(--ui-header-offset) + 1px);
    left: 0;
    right: auto;
    width: min(20rem, calc(100vw - 1rem));
    max-width: calc(100vw - 1rem);
    padding: 0.8rem 1rem calc(1rem + env(safe-area-inset-bottom));
    border: 0;
    border-right: 1px solid var(--app-border-color-subtle);
    border-radius: 0;
    background: var(--app-surface-theme-anchor);
    color: var(--app-text-color-strong);
    box-shadow: var(--app-shadow-drawer);
    z-index: 40;
    scroll-padding-block-end: calc(1rem + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    opacity: 0;
    transform: translate3d(calc(-100% - 1rem), 0, 0);
    transform-origin: center left;
    transition:
        opacity 180ms ease,
        transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.app-drawer-menu.sidebar.is-open,
.app-drawer-search.is-open,
.auth-shell.sidebar-open .app-drawer-menu.sidebar {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

body.sidebar-open,
body.search-drawer-open {
    overflow: hidden;
}

.sidebar-backdrop,
.search-drawer-backdrop {
    background: var(--app-overlay-drawer-backdrop);
    z-index: 39;
}

.app-drawer-menu .sidebar-nav {
    gap: var(--app-panel-stack-gap-tight);
}

.app-drawer-menu .sidebar-account-box {
    padding: 0.35rem 0 0;
}

.app-drawer-menu .sidebar-account-box .welcome-note {
    gap: 0.12rem;
}

.app-drawer-menu .sidebar-follow-section {
    padding: 0;
}

.app-drawer-menu .sidebar-follow-section > .header-navigation-follow {
    grid-column: 1;
    justify-self: stretch;
    width: 100%;
    min-width: 0;
}

.app-drawer-menu .sidebar-follow-section > .sidebar-action-guidance {
    display: flex;
    grid-column: 1;
    align-items: center;
    justify-content: center;
    justify-self: stretch;
    flex-wrap: nowrap;
    gap: 0.48rem;
    width: 100%;
    margin: 0.5rem 0 0;
    color: var(--app-text-color-strong);
    font-family: var(--app-font-family-base);
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
}

.app-drawer-menu .sidebar-follow-section .sidebar-action-guidance-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-width: 0;
    color: inherit;
}

.app-drawer-menu .sidebar-follow-section .sidebar-action-guidance-icon {
    display: inline-flex;
    flex: 0 0 0.9rem;
    width: 0.9rem;
    height: 0.9rem;
    color: var(--app-text-color-strong);
}

.app-drawer-menu .sidebar-follow-section .sidebar-action-guidance-icon > svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.app-drawer-menu .sidebar-follow-section :is(
    .header-socials-copy,
    .header-socials-handle,
    .header-social-link,
    .header-social-icon
) {
    color: var(--app-text-color-strong);
}

.app-drawer-menu .sidebar-follow-section .page-head-socials {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    padding: 0;
    gap: 0.2rem;
}

.app-drawer-menu .sidebar-follow-section .header-socials-copy {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
}

.app-drawer-menu .sidebar-follow-section > .shared-follow-button-row {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 2.75rem));
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    min-width: 0;
}

.app-drawer-menu .sidebar-follow-section .header-social-link {
    display: grid;
    place-items: center;
    width: min(2.75rem, 100%);
    min-width: 0;
    height: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--app-palette-black);
    box-shadow: none;
    transform-origin: center;
    transition:
        color 160ms ease,
        transform 160ms ease;
}

.app-drawer-menu .sidebar-follow-section .header-social-link > svg {
    width: var(--tnnyc-tool-icon-size);
    height: var(--tnnyc-tool-icon-size);
}

.app-drawer-menu .sidebar-navigation-actions {
    gap: var(--app-sidebar-nav-gap);
}

.app-drawer-menu .sidebar-navigation-actions > .nav-link,
.app-drawer-menu .sidebar-nav-group-header,
.app-drawer-menu .sidebar-nav-group-link {
    min-height: var(--app-sidebar-nav-row-size);
}

.app-drawer-menu .sidebar-navigation-actions > .nav-link,
.app-drawer-menu .sidebar-nav-group-link {
    grid-template-columns:
        var(--app-nav-link-icon-size)
        max-content
        minmax(0, 1fr);
    gap: 0.45rem;
    padding: 0.5rem;
}

.app-drawer-menu .sidebar-navigation-actions > .nav-link .nav-link-copy strong,
.app-drawer-menu .sidebar-nav-group-link .nav-link-copy strong {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: 0;
}

.app-drawer-menu :is(
    .nav-link-icon,
    .nav-link-arrow,
    .sidebar-nav-group-toggle svg
) {
    width: var(--app-nav-link-icon-size);
    height: var(--app-nav-link-icon-size);
    stroke-width: 1.8;
}

.app-drawer-menu .sidebar-nav-group-header {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
}

.app-drawer-menu .sidebar-nav-group-header > .sidebar-nav-group-link {
    flex: 0 1 auto;
    grid-template-columns:
        var(--app-nav-link-icon-size)
        minmax(0, max-content);
    width: max-content;
    max-width: calc(100% - var(--app-sidebar-nav-row-size));
    padding-inline-end: 0;
}

.app-drawer-menu .sidebar-nav-group-toggle {
    flex: 0 0 var(--app-sidebar-nav-row-size);
    display: grid;
    place-items: center start;
    width: var(--app-sidebar-nav-row-size);
    min-width: var(--app-sidebar-nav-row-size);
    padding: 0 0 0 0.3rem;
}

.app-drawer-menu .sidebar-navigation-actions .nav-link > .nav-link-arrow {
    display: none;
}

.app-drawer-menu .sidebar-nav-group-toggle svg {
    display: block;
    transition: transform 180ms ease;
}

.app-drawer-menu .sidebar-navigation-actions :is(
    .nav-link,
    .sidebar-nav-group-link
) .nav-link-copy {
    justify-self: start;
    justify-content: flex-start;
    width: auto;
    text-align: left;
    transform: none;
}

.app-drawer-menu .sidebar-navigation-actions :is(
    .nav-link,
    .sidebar-nav-group-link
) .nav-link-copy strong {
    flex: 0 1 auto;
    display: inline-block;
    text-align: left;
    transform-origin: left center;
    transition:
        color 160ms ease,
        font-weight 160ms ease,
        transform 160ms ease;
}

.app-drawer-menu .sidebar-navigation-actions .nav-link-copy strong {
    font-weight: 500;
}

.app-drawer-menu .sidebar-navigation-actions :is(
    .nav-link.active,
    .nav-link[aria-current="page"],
    .nav-link[aria-current="location"]
) {
    border-bottom-color: transparent;
}

.app-drawer-menu .sidebar-nav-group-header:has(
    .sidebar-nav-group-link.active
) {
    border-bottom-color: transparent;
}

.app-drawer-menu .sidebar-navigation-actions :is(
    .nav-link.active,
    .nav-link[aria-current="page"],
    .nav-link[aria-current="location"]
) .nav-link-copy strong {
    font-weight: 750;
    text-decoration-line: underline;
    text-decoration-color: currentColor;
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.22em;
    text-decoration-skip-ink: auto;
}

.app-drawer-menu .sidebar-navigation-actions :is(
    .nav-link,
    .sidebar-nav-group-link
):is(:hover, :focus-visible),
.app-drawer-menu .sidebar-nav-group-header:has(
    .sidebar-nav-group-toggle:is(:hover, :focus-visible)
) {
    color: var(--app-color-primary-action);
}

.app-drawer-menu .sidebar-navigation-actions :is(
    .nav-link,
    .sidebar-nav-group-link
):is(:hover, :focus-visible) .nav-link-copy strong,
.app-drawer-menu .sidebar-nav-group-header:has(
    .sidebar-nav-group-toggle:is(:hover, :focus-visible)
) .nav-link-copy strong {
    font-weight: inherit;
    transform: none;
}

.app-drawer-menu .sidebar-navigation-actions :is(
    .nav-link.active,
    .nav-link[aria-current="page"],
    .nav-link[aria-current="location"]
) .nav-link-copy strong {
    font-weight: 750;
}

.header-navigation-band :is(
    .header-navigation-link,
    .header-navigation-submenu-link,
    .header-navigation-nested-link,
    .header-navigation-nested-disclosure
) {
    font-weight: 500;
    transform-origin: center;
    transition:
        color 160ms ease,
        transform 160ms ease;
}

.header-inner .header-tool-button:is(:hover, :focus-visible),
.app-drawer-menu .sidebar-follow-section .header-social-link:is(:hover, :focus-visible),
.header-navigation-band :is(
    .header-navigation-link,
    .header-navigation-submenu-link,
    .header-navigation-nested-link,
    .header-navigation-nested-disclosure
):is(:hover, :focus-visible) {
    background: transparent;
    color: var(--app-text-color-strong);
    box-shadow: none;
    transform: none;
}

.header-navigation-band :is(
    .header-navigation-link,
    .header-navigation-submenu-link,
    .header-navigation-nested-link,
    .header-navigation-nested-disclosure
):is(.is-active, [aria-current="page"]) {
    font-weight: 750;
    text-decoration-line: underline;
    text-decoration-color: currentColor;
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.22em;
    text-decoration-skip-ink: auto;
}

@media (max-width: 760px) {
    .app-drawer-menu.sidebar {
        width: min(20rem, calc(100vw - 1rem));
        max-width: calc(100vw - 1rem);
    }
}

/* Authoritative responsive masthead contract. */
:root {
    --tnnyc-header-height: 8.25rem;
    --tnnyc-header-navigation-height: 3.75rem;
    --tnnyc-header-compact-height: 4.5rem;
    --tnnyc-header-compact-tool-size: 2.75rem;
    --tnnyc-header-pad-x: clamp(0.75rem, 2vw, 2rem);
    --tnnyc-tool-size: 2.75rem;
    --tnnyc-tool-icon-size: 1.25rem;
    --tnnyc-menu-line-thickness: 2px;
    --tnnyc-menu-line-gap: 5px;
    --tnnyc-header-tool-gap: clamp(0.2rem, 0.45vw, 0.45rem);
    --tnnyc-header-side-reserve: calc(
        var(--tnnyc-tool-size) + var(--tnnyc-tool-size)
        + var(--tnnyc-header-tool-gap)
    );
    --tnnyc-header-compact-enter: 132;
    --tnnyc-header-compact-exit: 24;
}

.header {
    min-width: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: var(--app-surface-theme-anchor);
    color: var(--app-text-color-strong);
    box-shadow: none;
}

.header.is-state-transitioning {
    overflow: visible;
    will-change: transform, clip-path;
}

.header-inner,
body.header-navigation-visible .header-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    width: 100%;
    height: var(--tnnyc-header-height);
    padding-inline: var(--tnnyc-header-pad-x);
    overflow: visible;
}

.header-tools {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: var(--tnnyc-header-tool-gap);
    min-width: 0;
}
.header-tools-left { grid-column: 1; justify-self: start; }
.header-tools-right { grid-column: 3; justify-self: end; }

.header-inner > .header-brand,
body.header-navigation-visible .header-inner > .header-brand {
    grid-area: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: min(
        44rem,
        calc(
            100% - var(--tnnyc-header-side-reserve) - var(--tnnyc-header-side-reserve)
            - var(--tnnyc-header-pad-x) - var(--tnnyc-header-pad-x)
        )
    );
    max-width: none;
    height: calc(var(--tnnyc-header-height) - 0.75rem);
    margin: 0;
    transform: translate(-50%, -50%);
}

.header-inner > .header-brand > .brand-mark-logo,
body.header-navigation-visible .header-inner > .header-brand > .brand-mark-logo {
    display: block;
    width: auto;
    height: var(--tnnyc-brand-mark-height);
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    filter: none;
}

.header-inner .header-tool-button {
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: var(--tnnyc-tool-size);
    min-width: var(--tnnyc-tool-size);
    height: var(--tnnyc-tool-size);
    min-height: var(--tnnyc-tool-size);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--app-text-color-strong);
    box-shadow: none;
    line-height: 1;
    transform-origin: center;
    transition:
        color 160ms ease,
        transform 160ms ease;
}

.header-inner .header-tool-button svg {
    display: block;
    width: var(--tnnyc-tool-icon-size);
    height: var(--tnnyc-tool-icon-size);
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.header-inner .header-tool-button.is-active {
    background: transparent;
    color: var(--app-text-color-strong);
}
.header-inner .header-tool-button:focus-visible {
    outline: 2px solid var(--app-color-link);
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .header-inner .header-tool-button:hover {
        scale: 1.04;
    }
}
.header-inner .header-tool-button:active {
    scale: 0.97;
    transform: none;
}

.hamburger-btn { gap: 3px; }
.hamburger-btn span { width: 1.25rem; height: 2px; background: currentColor; }

.header-brand-follow {
    position: relative;
    z-index: 70;
    display: grid;
    place-items: center;
}
.header-brand-follow .header-follow-toggle {
    width: var(--tnnyc-tool-size);
    min-width: var(--tnnyc-tool-size);
    padding: 0;
}
.header-follow-icon { display: block; }

.notification-panel-backdrop {
    position: fixed;
    inset: 0;
    z-index: 77;
    background: var(--app-overlay-brand-strong);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--app-overlay-backdrop-duration) ease;
}
.notification-panel-backdrop[hidden] { display: none; }
.notification-panel-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}
html.app-overlay-open,
body.app-overlay-open { overflow: hidden; overscroll-behavior: none; }


@media (min-width: 981px) {
    .header-inner .header-account-tool,
    .header-inner .header-help-link {
        display: none;
    }

    body.header-navigation-visible { --ui-header-offset: calc(var(--tnnyc-header-height) + var(--tnnyc-header-navigation-height)); }
    body.header-navigation-visible .header {
        grid-template-rows: var(--tnnyc-header-height) var(--tnnyc-header-navigation-height);
        min-height: calc(var(--tnnyc-header-height) + var(--tnnyc-header-navigation-height));
    }
    .header-navigation-band { height: var(--tnnyc-header-navigation-height); }

    body.shell-header-compact,
    body.shell-header-compact.header-navigation-visible { --ui-header-offset: var(--tnnyc-header-compact-height); }
    body.shell-header-compact .header,
    body.shell-header-compact.header-navigation-visible .header {
        position: fixed;
        inset: 0 0 auto;
        display: grid;
        grid-template-columns:
            max-content
            clamp(7.5rem, 11vw, 10.5rem)
            minmax(0, 1fr)
            max-content;
        grid-template-rows: var(--tnnyc-header-compact-height);
        align-items: center;
        column-gap: clamp(0.35rem, 0.8vw, 0.85rem);
        box-sizing: border-box;
        min-height: var(--tnnyc-header-compact-height);
        height: var(--tnnyc-header-compact-height);
        padding-inline: clamp(0.65rem, 1.5vw, 1.5rem);
        box-shadow: none;
        transition: none;
    }
    body.shell-header-compact .header-inner,
    body.shell-header-compact.header-navigation-visible .header-inner {
        display: contents;
    }
    body.shell-header-compact .header-navigation-band {
        display: none;
    }
    body.shell-header-compact.header-navigation-visible .header-navigation-band {
        display: grid;
        position: absolute;
        top: 0;
        left: 50%;
        width: max-content;
        height: var(--tnnyc-header-compact-height);
        padding: 0;
        transform: translateX(-50%);
        overflow: visible;
    }
    body.shell-header-compact .header-navigation-band[data-header-navigation-compact-fit="false"],
    body.shell-header-compact.header-navigation-visible .header-navigation-band[data-header-navigation-compact-fit="false"] {
        display: none;
    }
    body.shell-header-compact .header-navigation-destinations,
    body.shell-header-compact.header-navigation-visible .header-navigation-destinations {
        justify-content: center;
        gap: 0.7rem;
        width: max-content;
        min-width: max-content;
        margin-inline: auto;
    }
    body.shell-header-compact .header-tools,
    body.shell-header-compact.header-navigation-visible .header-tools {
        display: flex;
        gap: clamp(0.05rem, 0.2vw, 0.18rem);
    }
    body.shell-header-compact .header-tools-left {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }
    body.shell-header-compact .header-tools-right {
        grid-column: 4;
        grid-row: 1;
        justify-self: end;
    }

    body.shell-header-compact .header-inner .header-tool-button {
        width: var(--tnnyc-header-compact-tool-size);
        min-width: var(--tnnyc-header-compact-tool-size);
        height: var(--tnnyc-header-compact-tool-size);
        min-height: var(--tnnyc-header-compact-tool-size);
    }

    body.shell-header-compact .header-inner > .header-brand,
    body.shell-header-compact.header-navigation-visible .header-inner > .header-brand {
        position: static;
        grid-column: 2;
        grid-row: 1;
        place-self: center stretch;
        place-items: center start;
        width: 100%;
        max-width: 100%;
        height: calc(var(--tnnyc-header-compact-height) - 0.75rem);
        transform: none;
    }
    body[data-user-authenticated="true"].shell-header-compact .header-inner > .header-brand,
    body[data-user-authenticated="true"].shell-header-compact.header-navigation-visible .header-inner > .header-brand {
        grid-column: 2;
    }
    body.shell-header-compact .header-inner > .header-brand > .brand-mark-logo,
    body.shell-header-compact.header-navigation-visible .header-inner > .header-brand > .brand-mark-logo {
        width: 100%;
        height: auto;
        max-width: 100%;
        max-height: calc(var(--tnnyc-header-compact-height) - 1.1rem);
        object-position: left center;
    }
    body.shell-header-compact .header-brand-follow .header-follow-toggle { width: var(--tnnyc-header-compact-tool-size); min-width: var(--tnnyc-header-compact-tool-size); padding: 0; }
    body:not(.shell-header-compact) .header,
    body:not(.shell-header-compact) .header-inner,
    body:not(.shell-header-compact) .header-navigation-band { transition: none; }
}

@media (max-width: 980px) {
    :root {
        --tnnyc-header-height: 5.5rem;
        --tnnyc-tool-size: 2.75rem;
        --tnnyc-tool-icon-size: 1.22rem;
        --tnnyc-header-pad-x: clamp(0.4rem, 1.4vw, 0.8rem);
    }

    body,
    body.header-navigation-visible,
    body.shell-header-compact,
    body.shell-header-compact.header-navigation-visible {
        --ui-header-offset: var(--tnnyc-header-height);
    }

    .header,
    body.header-navigation-visible .header,
    body.shell-header-compact .header,
    body.shell-header-compact.header-navigation-visible .header {
        position: fixed;
        inset: 0 0 auto;
        display: block;
        min-height: var(--tnnyc-header-height);
        height: var(--tnnyc-header-height);
        box-shadow: none;
    }

    .header-navigation-band,
    body.header-navigation-visible .header-navigation-band {
        display: none;
    }

    .header-inner,
    body.header-navigation-visible .header-inner,
    body.shell-header-compact .header-inner,
    body.shell-header-compact.header-navigation-visible .header-inner {
        height: var(--tnnyc-header-height);
        padding-inline: var(--tnnyc-header-pad-x);
    }

    .header-tools { gap: clamp(0.06rem, 0.3vw, 0.18rem); }

    .header-inner > .header-brand,
    body.header-navigation-visible .header-inner > .header-brand,
    body.shell-header-compact .header-inner > .header-brand,
    body.shell-header-compact.header-navigation-visible .header-inner > .header-brand {
        width: 12rem;
        max-width: calc(100vw - 23rem);
        transform: translateX(-50%);
    }

    .header-inner > .header-brand > .brand-mark-logo,
    body.header-navigation-visible .header-inner > .header-brand > .brand-mark-logo {
        max-height: 2.8rem;
    }

    .header-brand-follow .header-follow-toggle {
        width: var(--tnnyc-tool-size);
        min-width: var(--tnnyc-tool-size);
        padding: 0;
    }
}

@media (max-width: 642px) {
    :root {
        --tnnyc-header-height: 6.5rem;
        --tnnyc-header-pad-x: 0;
    }

    .header-inner,
    body.header-navigation-visible .header-inner,
    body.shell-header-compact .header-inner,
    body.shell-header-compact.header-navigation-visible .header-inner {
        grid-template-columns: repeat(6, minmax(2.75rem, 1fr));
        grid-template-rows: 3.25rem 3.25rem;
        padding: 0;
    }

    .header-tools { display: contents; }

    .header-inner > .header-brand,
    body.header-navigation-visible .header-inner > .header-brand,
    body.shell-header-compact .header-inner > .header-brand,
    body.shell-header-compact.header-navigation-visible .header-inner > .header-brand {
        top: 0;
        display: grid;
        align-items: center;
        width: clamp(9.375rem, 40vw, 11rem);
        max-width: calc(100vw - 7rem);
        height: 3.25rem;
    }

    .header-inner > .header-brand > .brand-mark-logo,
    body.header-navigation-visible .header-inner > .header-brand > .brand-mark-logo {
        max-height: 2.25rem;
    }

    .header-tools-left > .hamburger-btn { grid-column: 1; grid-row: 1; }
    .header-tools-left > .header-search-launch { grid-column: 6; grid-row: 1; }
    .header-tools-left > .header-theme-toggle { grid-column: 1; grid-row: 2; }
    .header-tools-left > .header-brand-follow { grid-column: 2; grid-row: 2; }
    .header-tools-right > .header-contact-tool { grid-column: 4; grid-row: 2; }
    .header-tools-right > .header-account-tool { grid-column: 5; grid-row: 2; }
    .header-tools-right > .header-help-link { grid-column: 6; grid-row: 2; }

}

@media (max-width: 520px) {
    .header-inner,
    body.header-navigation-visible .header-inner,
    body.shell-header-compact .header-inner,
    body.shell-header-compact.header-navigation-visible .header-inner {
        grid-template-columns: repeat(4, minmax(2.75rem, 1fr));
    }

    .header-inner > .header-brand,
    body.header-navigation-visible .header-inner > .header-brand,
    body.shell-header-compact .header-inner > .header-brand,
    body.shell-header-compact.header-navigation-visible .header-inner > .header-brand {
        width: clamp(9.375rem, 40vw, 11rem);
        max-width: calc(100vw - 7rem);
    }

    .header-tools-left > .hamburger-btn { grid-column: 1; grid-row: 1; }
    .header-tools-left > .header-search-launch { grid-column: 4; grid-row: 1; }
    .header-inner .header-theme-toggle,
    .header-inner .header-contact-tool { display: none; }
    .header-tools-left > .header-brand-follow { grid-column: 1; grid-row: 2; }
    .header-tools-right > .header-account-tool { grid-column: 3; grid-row: 2; }
    .header-tools-right > .header-help-link { grid-column: 4; grid-row: 2; }

}

/* Single-row responsive masthead. Mobile keeps Help, Contact Us, and Theme
 * in Menu so the visible row can prioritize identity and primary actions. */
@media (max-width: 980px) {
    :root {
        --tnnyc-header-height: 5rem;
        --tnnyc-header-pad-x: clamp(0.25rem, 1.25vw, 0.75rem);
        --tnnyc-brand-mark-height: clamp(2.15rem, 7vw, 3.25rem);
        --tnnyc-tool-size: 2.875rem;
        --tnnyc-tool-icon-size: clamp(1.35rem, 5.4vw, 1.6rem);
    }

    .header,
    body.header-navigation-visible .header,
    body.shell-header-compact .header,
    body.shell-header-compact.header-navigation-visible .header {
        height: var(--tnnyc-header-height);
        min-height: var(--tnnyc-header-height);
    }

    .header-inner,
    body.header-navigation-visible .header-inner,
    body.shell-header-compact .header-inner,
    body.shell-header-compact.header-navigation-visible .header-inner {
        display: grid;
        grid-template-columns:
            repeat(2, var(--tnnyc-tool-size))
            minmax(0, 1fr)
            repeat(2, var(--tnnyc-tool-size));
        grid-template-rows: var(--tnnyc-header-height);
        align-items: center;
        column-gap: 0;
        height: var(--tnnyc-header-height);
        min-height: var(--tnnyc-header-height);
        padding-inline: var(--tnnyc-header-pad-x);
    }

    body[data-user-authenticated="true"] .header-inner,
    body[data-user-authenticated="true"].header-navigation-visible .header-inner,
    body[data-user-authenticated="true"].shell-header-compact .header-inner,
    body[data-user-authenticated="true"].shell-header-compact.header-navigation-visible .header-inner {
        grid-template-columns:
            repeat(2, var(--tnnyc-tool-size))
            minmax(0, 1fr)
            repeat(2, var(--tnnyc-tool-size));
    }

    .header-tools {
        display: contents;
    }

    .header-tools-left > .hamburger-btn {
        grid-column: 1;
        grid-row: 1;
    }

    .header-tools-left > .header-search-launch {
        grid-column: 2;
        grid-row: 1;
    }

    .header-tools-right > .header-brand-follow {
        grid-column: 5;
        grid-row: 1;
    }

    .header-inner > .header-brand,
    body.header-navigation-visible .header-inner > .header-brand,
    body.shell-header-compact .header-inner > .header-brand,
    body.shell-header-compact.header-navigation-visible .header-inner > .header-brand {
        position: static;
        grid-column: 3;
        grid-row: 1;
        place-self: center;
        width: 100%;
        max-width: 100%;
        height: calc(var(--tnnyc-header-height) - 0.75rem);
        transform: translateY(-0.2rem);
    }

    body[data-user-authenticated="true"] .header-inner > .header-brand,
    body[data-user-authenticated="true"].header-navigation-visible .header-inner > .header-brand,
    body[data-user-authenticated="true"].shell-header-compact .header-inner > .header-brand,
    body[data-user-authenticated="true"].shell-header-compact.header-navigation-visible .header-inner > .header-brand {
        grid-column: 3;
    }

    .header-inner > .header-brand > .brand-mark-logo,
    body.header-navigation-visible .header-inner > .header-brand > .brand-mark-logo,
    body.shell-header-compact .header-inner > .header-brand > .brand-mark-logo,
    body.shell-header-compact.header-navigation-visible .header-inner > .header-brand > .brand-mark-logo {
        width: auto;
        height: var(--tnnyc-brand-mark-height);
        max-width: 100%;
        max-height: 100%;
    }

    .header-tools-right > .header-notification-button {
        grid-column: 5;
        grid-row: 1;
    }

    body[data-user-authenticated="true"] .header-tools-left > .hamburger-btn { grid-column: 1; }
    body[data-user-authenticated="true"] .header-tools-left > .header-search-launch { grid-column: 2; }
    body[data-user-authenticated="true"] .header-tools-right > .header-brand-follow { grid-column: 4; }

    .header-inner .header-help-link {
        display: none;
    }

}

@media (max-width: 360px) {
    .app-drawer-menu .sidebar-follow-section > .shared-follow-button-row {
        grid-template-columns: repeat(7, minmax(0, 2.75rem));
        gap: 0;
    }
}

html[data-theme="dark"] .header-inner > .header-brand > .brand-mark-logo,
html[data-theme="dark"] body.header-navigation-visible .header-inner > .header-brand > .brand-mark-logo,
html[data-theme="dark"] body.shell-header-compact .header-inner > .header-brand > .brand-mark-logo {
    filter: invert(1);
}

.header-navigation-band,
.header-navigation-band :is(
    .header-navigation-link,
    .header-navigation-submenu-link,
    .header-navigation-nested-link,
    .header-navigation-nested-disclosure
) {
    border-color: transparent;
    color: var(--app-text-color-strong);
}

@media (prefers-reduced-motion: reduce) {
    .header,
    .header-inner,
    .header-navigation-band,
    .app-drawer-menu.sidebar,
    .app-drawer-search,
    .header-inner .header-tool-button,
    .app-drawer-menu .sidebar-follow-section .header-social-link {
        transition: none;
        animation: none;
    }

    .header-inner .header-tool-button:is(:hover, :focus-visible, :active),
    .app-drawer-menu .sidebar-follow-section .header-social-link:is(:hover, :focus-visible),
    .header-navigation-band :is(
        .header-navigation-link,
        .header-navigation-submenu-link,
        .header-navigation-nested-link,
        .header-navigation-nested-disclosure
    ):is(:hover, :focus-visible) {
        transform: none;
    }
}

/* Premium shell scale and approved desktop tool order. */
.app-drawer-menu.sidebar {
    --app-sidebar-nav-row-size: 3.25rem;
    --app-nav-link-icon-size: 1.2rem;
    --app-nav-link-icon-frame-size: 1.8rem;
    --app-nav-link-gap: 0.65rem;
}

.app-drawer-menu .sidebar-follow-section,
.app-drawer-menu .sidebar-follow-section > p {
    text-align: center;
}

.app-drawer-menu .sidebar-navigation-actions :is(
    .nav-link,
    .sidebar-nav-group-link,
    .sidebar-nav-group-toggle
) {
    font-size: 1.08rem;
}

@media (min-width: 981px) {
    :root {
        --tnnyc-tool-size: 3.125rem;
        --tnnyc-tool-icon-size: 1.55rem;
        --tnnyc-header-tool-gap: clamp(0.35rem, 0.65vw, 0.7rem);
    }

    .header-tools {
        gap: var(--tnnyc-header-tool-gap);
    }

    .header-navigation-link {
        min-height: 2.75rem;
        height: 2.75rem;
        padding-inline: 0.55rem;
        font-size: 1rem;
    }

}

@media (max-width: 980px) {
    :root {
        --tnnyc-tool-size: 2.75rem;
        --tnnyc-tool-icon-size: clamp(1.1rem, 5vw, 1.4rem);
    }


    .header-tools-right > .header-brand-follow {
        grid-column: 5;
        grid-row: 1;
    }

    body[data-user-authenticated="true"] .header-tools-right > .header-brand-follow {
        grid-column: 4;
    }
}

@media (max-width: 520px) {
    :root {
        /* Keep compact tools usable while returning enough centered width for
         * the wide wordmark to scale visibly on narrow phones. */
        --tnnyc-tool-size: clamp(2.625rem, 11vw, 2.875rem);
    }

    .app-drawer-menu.sidebar {
        --app-sidebar-nav-row-size: 3.125rem;
    }

    .header-tools-right > .header-brand-follow {
        grid-column: 5;
        grid-row: 1;
    }

    body[data-user-authenticated="true"] .header-tools-right > .header-brand-follow {
        grid-column: 4;
    }
}

@media (max-width: 520px) {
    body[data-user-authenticated="true"] .header-tools-left > .hamburger-btn {
        grid-column: 1;
    }

    body[data-user-authenticated="true"] .header-tools-left > .header-search-launch {
        grid-column: 2;
    }
}

/* One integer-aligned hamburger drawing at every viewport and interaction
 * state. All three strokes keep identical geometry and paint weight. */
.hamburger-btn {
    --tnnyc-menu-line-step: calc(
        var(--tnnyc-menu-line-thickness) + var(--tnnyc-menu-line-gap)
    );
    position: relative;
    gap: 0;
}

.hamburger-btn span {
    position: absolute;
    inset-inline: 0;
    top: calc(50% - 1px - var(--tnnyc-menu-line-step));
    width: var(--tnnyc-tool-icon-size);
    height: var(--tnnyc-menu-line-thickness);
    flex: 0 0 var(--tnnyc-menu-line-thickness);
    margin-inline: auto;
    border-radius: 0;
    background: currentColor;
    opacity: 1;
    transform-origin: center;
    transition:
        opacity 160ms ease,
        transform 180ms ease;
}

.hamburger-btn span:nth-child(2) {
    top: calc(50% - 1px);
}

.hamburger-btn span:nth-child(3) {
    top: calc(50% - 1px + var(--tnnyc-menu-line-step));
}
.header-inner .hamburger-btn.is-active span {
    width: 1.1rem;
    height: var(--tnnyc-menu-line-thickness);
    flex-basis: var(--tnnyc-menu-line-thickness);
    box-shadow: none;
}

.hamburger-btn.is-active span:nth-child(1) {
    transform: translateY(var(--tnnyc-menu-line-step)) rotate(45deg);
}

.hamburger-btn.is-active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0.2);
}

.hamburger-btn.is-active span:nth-child(3) {
    transform: translateY(calc(-1 * var(--tnnyc-menu-line-step))) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
    .hamburger-btn span {
        transition: none;
    }

}

/* Wide touch tablets keep the desktop masthead composition, but it remains
 * reachable like the narrow shell. Desktop compaction is intentionally limited
 * to fine pointers, so coarse-pointer landscape viewports need this fixed state. */
@media (min-width: 981px) and (hover: none),
       (min-width: 981px) and (pointer: coarse) {
    .header,
    body.header-navigation-visible .header {
        position: fixed;
        inset: 0 0 auto;
    }
}

/* Authenticated notification bell and bounded header popover. */

.header-actions {
    gap: var(--tnnyc-tool-group-gap);
}

.header-notification-button {
    position: relative;
}

.notification-unread-badge {
    position: absolute;
    inset-block-start: -0.32rem;
    inset-inline-end: -0.32rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.28rem;
    min-height: 1.28rem;
    padding-inline: 0.3rem;
    border: 2px solid var(--app-color-brand-surface);
    border-radius: 999px;
    background: var(--app-color-danger);
    color: var(--app-color-inverse-text);
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
}

.notification-panel {
    position: fixed;
    inset-block-start: var(--notification-panel-top, calc(var(--ui-header-offset) + 0.5rem));
    inset-inline-start: var(--notification-panel-left, auto);
    inset-inline-end: auto;
    z-index: 85;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    width: min(26rem, calc(100vw - 1.5rem));
    height: min(
        34rem,
        calc(100dvh - var(--notification-panel-top, var(--ui-header-offset)) - 0.75rem)
    );
    max-height: min(
        38rem,
        calc(100dvh - var(--notification-panel-top, var(--ui-header-offset)) - 0.75rem)
    );
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--app-border-color-standard);
    border-radius: 14px;
    background: var(--app-surface-card);
    color: var(--app-text-color-body);
    box-shadow: var(--app-shadow-raised);
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, calc(0rem - var(--app-overlay-anchor-offset)), 0);
    transform-origin: top right;
    transition:
        opacity var(--app-overlay-surface-opacity-duration) ease,
        transform var(--app-overlay-surface-transform-duration) var(--app-overlay-surface-easing);
}

.notification-panel[hidden] {
    display: none;
}

.notification-panel.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
}

.notification-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1rem 0.72rem;
    border-bottom: 1px solid var(--app-border-color-subtle);
}

.notification-panel-header h2 {
    margin: 0;
}

.notification-panel-header h2 {
    color: var(--app-text-color-heading);
    font-size: 1.15rem;
}

.notification-panel-close,
.notification-item-action {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.5rem;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--app-color-link);
    cursor: pointer;
}

.notification-panel-close:is(:hover, :focus-visible),
.notification-item-action:is(:hover, :focus-visible) {
    background: var(--app-interactive-hover-surface);
    color: var(--app-interactive-hover-text);
}

.notification-panel-close:focus-visible,
.notification-item-action:focus-visible,
.notification-tab:focus-visible,
.notification-item-main:focus-visible {
    outline: 2px solid var(--app-color-focus);
    outline-offset: 2px;
}

.notification-panel-close svg,
.notification-item-action svg,
.notification-empty svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.notification-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--app-border-color-subtle);
}

.notification-tab {
    min-height: 2.5rem;
    padding: 0.48rem 0.7rem;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--app-text-color-muted);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
}

.notification-tab.is-active {
    border-color: var(--app-border-color-standard);
    background: var(--app-color-muted-surface);
    color: var(--app-text-color-heading);
}

.notification-list-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 0;
}

.notification-status {
    min-height: 1.2rem;
    margin: 0;
    padding: 0.35rem 0.8rem 0;
    color: var(--app-text-color-muted);
    font-size: 0.75rem;
}

.notification-status.is-error {
    color: var(--app-color-danger);
}

.notification-list {
    grid-row: 2;
    grid-column: 1;
    min-height: 0;
    margin: 0;
    padding: 0.35rem 0.55rem 0.55rem;
    overflow-x: hidden;
    overflow-y: auto;
    list-style: none;
    scrollbar-width: thin;
}

.notification-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 0.35rem;
    margin: 0;
    border-bottom: 1px solid var(--app-border-color-subtle);
}

.notification-lazy-sentinel {
    width: 100%;
    height: 1px;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.notification-lazy-sentinel[hidden] {
    display: none;
}

.notification-item.is-unread {
    border-inline-start: 4px solid var(--app-color-primary-action);
    background: var(--app-color-muted-surface);
}

.notification-item-main {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.78rem 0.55rem;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.notification-unread-label {
    display: inline-block;
    margin-inline-end: 0.42rem;
    padding: 0.14rem 0.34rem;
    border-radius: 999px;
    background: var(--app-color-primary-action);
    color: var(--app-color-on-primary-action);
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    vertical-align: 0.1em;
}

.notification-item-title,
.notification-item-message,
.notification-item-meta {
    min-width: 0;
    overflow-wrap: anywhere;
}

.notification-item-title {
    color: var(--app-text-color-heading);
    font-weight: 850;
    line-height: 1.25;
}

.notification-item-message {
    color: var(--app-text-color-body);
    font-size: 0.84rem;
    line-height: 1.35;
}

.notification-item-meta {
    color: var(--app-text-color-muted);
    font-size: 0.72rem;
}

.notification-item-actions {
    display: flex;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.12rem;
    width: 5.15rem;
    padding-block: 0.48rem;
}

.notification-item-action.is-danger {
    color: var(--app-color-danger);
}

.notification-item-action:disabled,
.notification-load-more:disabled {
    cursor: wait;
    opacity: 0.58;
}

.notification-empty {
    display: grid;
    grid-row: 2;
    grid-column: 1;
    align-self: center;
    justify-items: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem 1.8rem;
    color: var(--app-text-color-muted);
    text-align: center;
}

.notification-empty[hidden] {
    display: none;
}

.notification-empty svg {
    width: 1.5rem;
    height: 1.5rem;
}

.notification-empty p {
    margin: 0;
}

.notification-load-more-row {
    grid-row: 3;
    margin: 0 0.7rem 0.7rem;
}

.notification-load-more {
    flex: 1 1 auto;
    width: 100%;
    margin: 0;
}

@media (min-width: 981px) {
    .notification-panel {
        inset: 50% auto auto 50%;
        height: min(34rem, calc(100dvh - 2rem));
        max-height: calc(100dvh - 2rem);
        transform: translate3d(-50%, calc(-50% - var(--app-overlay-anchor-offset)), 0) scale(0.985);
        transform-origin: center;
    }

    .notification-panel.is-open {
        transform: translate3d(-50%, -50%, 0) scale(1);
    }
}

@media (max-width: 980px) {
    .notification-panel {
        inset: auto 0 0;
        width: 100%;
        height: min(34rem, var(--app-overlay-sheet-max-height));
        max-height: var(--app-overlay-sheet-max-height);
        padding-block-end: env(safe-area-inset-bottom);
        border-radius: var(--app-overlay-sheet-radius);
        transform: translate3d(0, var(--app-overlay-sheet-translate), 0);
        transform-origin: bottom center;
        transition-duration:
            var(--app-overlay-surface-opacity-duration),
            var(--app-overlay-surface-transform-duration);
    }

    .notification-panel.is-open { transform: translate3d(0, 0, 0); }
}

@media (max-width: 560px) {
    .notification-item {
        grid-template-columns: minmax(0, 1fr);
    }

    .notification-item-actions {
        justify-content: flex-start;
        width: auto;
        padding: 0 0.45rem 0.55rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .notification-panel {
        transition: none;
    }
}

/*
 * Shared premium balloon contract.
 * Follow, Notifications, Newsletter, and Privacy Choices retain their feature
 * layouts while sharing one surface, close control, and responsive treatment.
 */
.app-premium-balloon {
    border: 1px solid var(--app-card-border-premium-hover);
    border-radius: 18px;
    background: var(--app-surface-card);
    color: var(--app-text-color-body);
    box-shadow: var(--app-shadow-raised);
}

.app-premium-balloon-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.app-premium-balloon-close {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.76rem;
    min-width: 2.76rem;
    height: 2.76rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--app-text-color-muted);
    cursor: pointer;
    transition:
        border-color 160ms ease,
        background-color 160ms ease,
        color 160ms ease,
        transform 160ms ease;
}

.app-premium-balloon-close:is(:hover, :focus-visible) {
    border-color: var(--app-color-link);
    background: var(--app-interactive-hover-surface);
    color: var(--app-interactive-hover-text);
    transform: translateY(-1px);
}

.app-premium-balloon-close:focus-visible {
    outline: 2px solid var(--app-color-focus);
    outline-offset: 2px;
}

.app-premium-balloon-close > svg {
    display: block;
    width: 0.82rem;
    height: 0.82rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

:is(
    .app-premium-balloon-header,
    .app-share-modal-header
) > .app-premium-balloon-close {
    align-self: flex-start;
    margin-block-start: -0.3rem;
    margin-inline-end: -0.3rem;
}

.app-premium-balloon > .app-premium-balloon-close {
    position: absolute;
    inset-block-start: 0.6rem;
    inset-inline-end: 0.6rem;
    z-index: 2;
}

.app-premium-balloon > .app-premium-balloon-close ~ .app-slide-prompt-copy {
    padding-inline-end: 3.15rem;
}

@media (min-width: 981px) {
    .app-slide-prompt-card.app-premium-balloon {
        border-radius: 18px 18px 0 0;
    }
}

@media (max-width: 980px) {
    .app-premium-balloon {
        border-radius: 16px;
    }

    :is(
        .notification-panel,
        .app-slide-prompt-card
    ).app-premium-balloon {
        border-radius: var(--app-overlay-sheet-radius);
    }
}

@media (max-width: 420px), (max-height: 360px) {
    .app-premium-balloon {
        border-radius: 14px;
    }

    .app-premium-balloon-close {
        width: 2.76rem;
        min-width: 2.76rem;
        height: 2.76rem;
    }

    :is(
        .notification-panel,
        .app-slide-prompt-card
    ).app-premium-balloon {
        border-radius: var(--app-overlay-sheet-radius);
    }
}

/*
 * Canonical in-page newsletter section.
 *
 * The outer app section is the only large painted surface. This component
 * owns the title/status row and compact form; the floating newsletter prompt
 * remains a separate component.
 */

.page-stack.ui-page-stack .page-head-newsletter-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: var(--app-component-flow-gap);
    background: var(--app-surface-theme-anchor);
}

.page-stack.ui-page-stack .page-head-newsletter-section > :is(
    .page-head-newsletter-title-row,
    .newsletter-tagline,
    .page-head-newsletter-form
) {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
}

.page-head-newsletter-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.page-head-newsletter-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: var(--app-text-color-heading);
    font-family: var(--app-font-family-display);
    font-size: clamp(1.28rem, 2.2vw, 2rem);
    font-weight: 700;
    line-height: 1.08;
    text-shadow: none;
}

.page-head-newsletter-state-actions {
    display: inline-flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.42rem;
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
}

.page-head-newsletter-state-actions > * {
    flex: 0 0 auto;
}

.page-head-newsletter-state.newsletter-subscription-summary-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    min-height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--app-text-color-strong);
    box-shadow: none;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
}

.page-head-newsletter-manage.btn {
    min-height: 2rem;
    padding: 0.34rem 0.62rem;
    font-size: 0.78rem;
    line-height: 1.1;
    white-space: nowrap;
}

.newsletter-tagline {
    margin: 0;
    color: var(--app-text-color-muted);
    font-family: var(--app-font-family-base);
    font-size: var(--app-body-copy-size, 0.92rem);
    font-weight: 450;
    line-height: var(--app-body-copy-line-height, 1.45);
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (min-width: 761px) {
    .page-stack.ui-page-stack .page-head-newsletter-section .newsletter-tagline {
        white-space: nowrap;
    }
}

.newsletter-subscription-status {
    margin: 0;
    color: var(--app-text-color-muted);
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.35;
}

.newsletter-subscription-status:empty {
    display: none;
}

.newsletter-subscription-status:is(.is-success, .is-info) {
    color: var(--app-text-color-strong);
}

.newsletter-subscription-status.is-error {
    color: var(--app-color-danger);
}

.page-head-newsletter-status {
    grid-column: 1 / -1;
    justify-self: end;
    width: min(100%, 28rem);
    text-align: right;
}
.page-stack.ui-page-stack
.page-head-newsletter-section
.page-head-newsletter-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(10rem, 1fr)) auto;
    align-items: end;
    gap: 0.62rem;
}

.page-head-newsletter-section .page-head-newsletter-field {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
}

@media (max-width: 980px) {
    .page-stack.ui-page-stack
    .page-head-newsletter-section
    .page-head-newsletter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-head-newsletter-status {
        justify-self: stretch;
        width: 100%;
        text-align: center;
    }

    .page-stack.ui-page-stack
    .page-head-newsletter-section
    .page-head-newsletter-form
    > button {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (max-width: 760px) {
    .page-stack.ui-page-stack .page-head-newsletter-section {
        gap: var(--app-component-flow-gap-mobile);
    }

    .page-stack.ui-page-stack
    .page-head-newsletter-section
    .page-head-newsletter-form {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.52rem;
    }

}

@media (max-width: 620px) {
    .page-head-newsletter-title-row {
        align-items: center;
        gap: 0.3rem;
    }

    .page-head-newsletter-title {
        font-size: clamp(0.78rem, 3.35vw, 0.98rem);
        line-height: 1.1;
        white-space: nowrap;
    }

    .page-head-newsletter-state-actions {
        gap: 0.2rem;
    }

    .page-head-newsletter-state.newsletter-subscription-summary-copy,
    .page-head-newsletter-manage.btn {
        min-height: 1.72rem;
        padding: 0.24rem 0.36rem;
        font-size: clamp(0.62rem, 2.45vw, 0.72rem);
    }
}

/* Favorites and alerts controls and account content. */

/* Favorites */
.favorite-card-shell{
    position: relative;
    overflow: visible;
}

.museum-card.favorite-card-shell,
.museum-exhibition-item.favorite-card-shell{
    overflow: visible;
}

.favorite-toggle-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.18rem 0.24rem;
    border: 0;
    border-radius: var(--app-control-radius);
    background: transparent;
    color: var(--app-color-state-control-inactive);
    cursor: pointer;
    z-index: 4;
    line-height: 1;
    transition: background-color 0.16s ease, color 0.16s ease, filter 0.16s ease;
    overflow: visible;
}

.favorite-toggle-btn:is(:hover, :focus-visible){
    background: var(--app-interactive-hover-surface);
    color: var(--app-color-state-control-inactive);
    transform: none;
    filter: none;
}

.favorite-toggle-btn:is(.is-active, [aria-pressed="true"]){
    color: var(--app-color-state-favorite-active);
}

.favorite-toggle-icon,
.museum-alert-toggle-icon{
    display: grid;
    flex: 0 0 var(--app-state-action-icon-size);
    place-items: center;
    width: var(--app-state-action-icon-size);
    min-width: var(--app-state-action-icon-size);
    max-width: var(--app-state-action-icon-size);
    height: var(--app-state-action-icon-size);
    min-height: var(--app-state-action-icon-size);
    max-height: var(--app-state-action-icon-size);
    line-height: 0;
}

.favorite-toggle-icon > svg,
.museum-alert-toggle-icon > svg{
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: currentColor;
    stroke: none;
}

.museum-alert-toggle-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.18rem 0.24rem;
    border: 0;
    border-radius: var(--app-control-radius);
    background: transparent;
    color: var(--app-color-state-control-inactive);
    cursor: pointer;
    z-index: 4;
    line-height: 1;
    transition: background-color 0.16s ease, color 0.16s ease, filter 0.16s ease;
    overflow: visible;
}

.museum-alert-toggle-btn:is(:hover, :focus-visible){
    background: var(--app-interactive-hover-surface);
    color: var(--app-color-state-control-inactive);
    transform: none;
    filter: none;
}

.museum-alert-toggle-btn:is(.is-active, [aria-pressed="true"]){
    color: var(--app-color-state-alert-active);
    transform: none;
}

.favorite-toggle-btn-corner{
    position: absolute;
    top: -0.38rem;
    right: -0.22rem;
}

.museum-alert-toggle-btn-corner{
    position: absolute;
    top: -0.38rem;
    right: -0.22rem;
}

.favorite-toggle-btn-leading{
    position: static;
    align-self: center;
    justify-self: start;
    padding: 0;
    margin-right: 0.35rem;
}

.museum-alert-toggle-btn-leading{
    position: static;
    align-self: center;
    justify-self: start;
    padding: 0;
    margin-right: 0.35rem;
}

.museum-card-main-link{
    display: block;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.museum-card-main-link .museum-card-title{
    text-align: center;
}

.museum-card-title-link{
    color: inherit;
    text-decoration: none;
}

.museum-card-title-link:hover,
.museum-card-title-link:focus-visible{
    color: var(--app-color-link);
    text-decoration: none;
}

.museum-action-help-icon{
    display: inline-block;
    margin: 0 0.12rem;
    font-family: var(--app-font-family-icon);
    font-weight: 700;
    line-height: 1;
    vertical-align: -0.08em;
    text-shadow:
        none;
}

.museum-action-help-icon-heart,
.museum-action-help-icon-bell{
    display: inline-grid;
    place-items: center;
    width: 1em;
    height: 1em;
    color: var(--app-color-state-favorite-active);
    line-height: 0;
}

.museum-action-help-icon-heart > svg,
.museum-action-help-icon-bell > svg{
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: currentColor;
    stroke: none;
}

.museum-action-help-icon-bell{
    color: var(--app-color-state-alert-active);
}

.favorite-toggle-btn-search{
    position: static;
    align-self: center;
    justify-self: center;
    padding: 0;
}

.museum-alert-toggle-btn-search{
    position: static;
    align-self: center;
    justify-self: center;
    padding: 0;
}

.account-details-form{
    display: grid;
    gap: var(--app-account-details-gap);
    width: 100%;
}

.account-detail-toolbar{
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 0.38rem;
    min-width: 0;
}

.account-details-table-shell{
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--app-overlay-accent-medium);
    border-radius: 16px;
    background:
        var(--app-gradient-muted);
    box-shadow:
        var(--shadow-soft);
    transition: background 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.account-details-form.is-editing .account-details-table-shell{
    padding: 0.35rem;
    border-color: var(--app-overlay-accent-medium);
    background:
        var(--app-gradient-brand);
    box-shadow: var(--shadow-soft);
}

.account-details-table{
    display: grid;
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
}

.account-details-table tbody{
    display: grid;
    width: 100%;
    min-width: 0;
}

.account-details-table tr{
    display: grid;
    grid-template-columns: minmax(7.5rem, 18%) minmax(0, 1fr);
    align-items: center;
    width: 100%;
    min-width: 0;
    border-bottom: 1px solid var(--line);
}

.account-details-table th,
.account-details-table td{
    padding: 0.65rem 0.7rem;
    text-align: left;
    vertical-align: middle;
    min-width: 0;
    overflow-wrap: anywhere;
}

.account-details-table th{
    color: var(--app-color-link);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.account-details-table tbody tr:last-child{
    border-bottom: 0;
}

.account-detail-static-value{
    display: block;
    min-width: 0;
    color: var(--app-color-link);
    font-weight: 850;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.account-detail-display{
    display: block;
    min-width: 0;
    color: var(--app-color-link);
    font-weight: 850;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.account-details-form:not(.is-editing) .account-detail-input-shell,
.account-details-form:not(.is-editing) .account-detail-input,
.account-details-form.is-editing .account-detail-display{
    display: none;
}

.account-details-form.is-editing .account-details-table tbody tr{
    background: var(--app-overlay-brand-subtle);
}

.account-details-form.is-editing .account-details-table tbody tr.account-detail-readonly-row{
    background: transparent;
}

.account-detail-error{
    display: block;
    margin-top: 0.35rem;
    color: var(--color-danger, var(--app-color-primary-text));
    font-size: 0.85rem;
    line-height: 1.35;
}

.account-detail-status{
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.72rem 0.82rem;
    border: 1px solid var(--app-overlay-success-soft);
    border-radius: 12px;
    background: var(--app-overlay-success-soft);
    color: var(--app-color-success);
    font-size: 0.88rem;
    font-weight: 850;
    line-height: 1.35;
}

.account-detail-status.is-error{
    border-color: var(--app-overlay-danger-soft);
    background: var(--app-overlay-brand-medium);
    color: var(--app-color-danger);
}

.account-detail-action-group{
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4rem;
}

.account-detail-password-action{
    display: inline-flex;
    margin-inline-start: 0.48rem;
}

.account-detail-password-mask{
    letter-spacing: 0.14em;
}

.account-details-form.is-editing .account-detail-password-action{
    display: inline-flex;
}

.account-detail-icon-action{
    display: inline-grid;
    place-items: center;
    width: var(--app-control-min-height);
    min-width: var(--app-control-min-height);
    height: var(--app-control-min-height);
    min-height: var(--app-control-min-height);
    padding: 0;
    border: 0;
    border-radius: calc(var(--app-control-radius) + 2px);
    background: var(--app-surface-card);
    color: var(--app-color-primary-action);
    cursor: pointer;
    box-shadow: none;
    transition:
        color 0.16s ease,
        background-color 0.16s ease,
        transform 0.16s ease;
}

.account-detail-icon-action[hidden]{
    display: none;
}

.account-detail-icon-action svg{
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.account-detail-icon-action:hover{
    background: var(--app-interactive-hover-surface);
    color: var(--app-interactive-hover-text);
    transform: translateY(-1px);
}

.account-detail-icon-action:focus-visible{
    outline: 2px solid var(--app-color-focus);
    outline-offset: 2px;
    background: var(--app-interactive-hover-surface);
    color: var(--app-interactive-hover-text);
}

.account-detail-card{
    width: 100%;
    justify-self: stretch;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: column;
    text-align: left;
    gap: var(--app-account-detail-gap);
    min-width: 0;
}

@media (max-width: 640px) {

    .account-detail-toolbar{
        gap: 0.28rem;
    }

    .account-detail-action-group{
        justify-content: flex-start;
    }

    .account-detail-card{
        align-items: stretch;
        flex-direction: column;
        width: 100%;
        inline-size: 100%;
        max-width: 100%;
        max-inline-size: 100%;
        justify-self: stretch;
    }

    .account-detail-card .dashboard-menu-copy{
        margin-left: 0;
        text-align: left;
        white-space: normal;
    }

}

.account-favorites-list:not([data-mobile-carousel]){
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: var(--app-account-favorites-gap);
    list-style: none;
    padding-top: var(--app-account-favorites-top-padding);
}

/* Account-specific color and typography; shared table structure lives in tables.css. */
.account-details-table-shell {
    border-color: var(--app-border-color-subtle);
    border-radius: 10px;
    background: var(--app-surface-card);
    background-image: none;
    box-shadow: none;
}

.account-details-table,
.account-details-table tbody,
.account-details-table tr,
.account-details-table th,
.account-details-table td {
    background: var(--app-surface-card);
    background-image: none;
}

.account-details-table th {
    color: var(--app-text-color-muted);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.04em;
}

.account-detail-static-value,
.account-detail-display {
    color: var(--app-text-color-strong);
    font-weight: 650;
}

@media (max-width: 640px) {
    .account-details-table {
        min-width: 42rem;
    }

    .account-detail-action-group,
    .account-detail-toolbar {
        flex-wrap: wrap;
        white-space: normal;
    }
}

.account-social-alert-toggle:hover{
    border-color: var(--app-overlay-accent-medium);
    box-shadow:
        var(--shadow-soft);
}

.account-social-alert-toggle:focus-visible{
    border-color: var(--app-overlay-accent-medium);
    outline: 2px solid var(--app-color-focus);
    outline-offset: 2px;
    box-shadow: none;
}

.museum-account-section{
    gap: var(--app-nested-section-gap, 1rem);
}

.account-list-results-card{
    display: grid;
    gap: var(--app-account-favorites-gap);
    width: 100%;
    min-width: 0;
    border-radius: var(--app-surface-radius-standard);
    border: 1px solid var(--ui-legend-border-standard);
    background: var(--app-surface-elevated);
    box-shadow: var(--app-shadow-raised);
}

.account-list-results-card .account-favorites-list:not([data-mobile-carousel]){
    padding-top: 0;
}

.account-favorite-item{
    min-width: 0;
    justify-self: stretch;
    min-height: 100%;
    text-align: left;
    display: grid;
    grid-template-rows: auto 1fr;
    align-self: stretch;
    padding: 0;
    gap: 0;
    overflow: hidden;
}

.account-favorite-item.favorite-card-shell{
    overflow: hidden;
}

.account-card-state{
    --account-card-rings: none;
    --account-card-loved-bg: transparent;
    --account-card-subscribed-bg: transparent;
}

.account-card-state-subscribed{
    --account-card-rings: none;
    --account-card-subscribed-bg: transparent;
}

.account-card-state-loved{
    --account-card-rings: none;
    --account-card-loved-bg: transparent;
}

.account-card-state-subscribed.account-card-state-loved{
    --account-card-rings: none;
}

.account-card-state:is(.account-favorite-item, .museum-card, .museum-exhibition-item){
    position: relative;
    overflow: hidden;
    border-color: var(--app-border-color-standard);
    background: var(--app-surface-card);
    box-shadow: none;
}

.account-card-state:is(.account-favorite-item, .museum-card, .museum-exhibition-item)::after{
    content: none;
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    box-shadow: var(--account-card-rings);
    pointer-events: none;
}

.account-card-state:is(.account-favorite-item, .museum-card, .museum-exhibition-item):hover{
    background: var(--app-surface-elevated);
    box-shadow: var(--app-shadow-raised);
}

.account-card-state .favorite-toggle-btn-corner,
.account-card-state .museum-alert-toggle-btn-corner,
.account-card-state .favorite-toggle-btn-search,
.account-card-state .museum-alert-toggle-btn-search{
    z-index: 3;
}

.account-favorite-link{
    display: grid;
    gap: var(--app-account-favorite-link-gap);
    width: 100%;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    align-content: start;
    padding-bottom: var(--app-account-favorite-bottom-padding);
}

.account-favorite-image-link{
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--app-surface-radius-standard) var(--app-surface-radius-standard) 0 0;
    aspect-ratio: 16 / 10;
}

.account-favorite-image{
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 0;
}


/*
 * Final repeated-card standard.
 * This is the shared visual contract for News,
YouTube,
Instagram,
Museums,
* exhibitions,
favorites,
alerts,
Help Center,
and account cards.
 * Extend this contract in place; do not append another legacy override layer.
 */
.page-stack.ui-page-stack{
    --app-standard-card-gap: clamp(0.62rem, 1.2vw, 0.78rem);
    --app-standard-card-height: 26rem;
    --app-standard-card-media-height: 12.25rem;
    --app-standard-card-copy-inline: clamp(0.66rem, 1.2vw, 0.82rem);
    --app-standard-card-copy-top: clamp(0.58rem, 1vw, 0.72rem);
    --app-standard-card-copy-bottom: clamp(0.72rem, 1.2vw, 0.9rem);
    --app-standard-card-control-bottom: 0.68rem;
    --app-standard-card-control-size: 2rem;
    --app-standard-card-control-gap: 0.28rem;
    --app-standard-card-action-height: 3rem;
    --app-standard-card-action-padding-block: 0.28rem;
    --app-standard-card-action-padding-inline: 0.68rem;
    --app-standard-card-meta-reserve: 3rem;
    --app-standard-card-meta-reserve-dual: 5.3rem;
    --app-standard-card-radius: var(--app-surface-radius-standard, 8px);
    --app-standard-card-title-size: clamp(0.76rem, 0.7rem + 0.25vw, 0.94rem);
    --app-standard-card-body-size: clamp(0.7rem, 0.66rem + 0.16vw, 0.77rem);
    --app-standard-card-meta-size: clamp(0.67rem, 0.62rem + 0.2vw, 0.77rem);
    --app-exhibition-card-description-lines: 6;
}

.page-stack.ui-page-stack .app-card-rail > :is(
    .app-standard-card,
    .dashboard-menu-card
):not(.home-hero-point){
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    min-height: var(--app-standard-card-height);
    height: var(--app-standard-card-height);
    max-height: var(--app-standard-card-height);
    padding: 0;
    border: 0;
    outline: 0;
    border-radius: var(--app-standard-card-radius);
    background: var(--app-surface-card);
    box-shadow: var(--app-shadow-card-resting);
    overflow: hidden;
    text-align: left;
}

.page-stack.ui-page-stack .app-card-rail > :is(
    .app-standard-card,
    .dashboard-menu-card
):not(.home-hero-point):is(:hover, :has(:focus-visible)){
    border-color: transparent;
    outline-color: transparent;
    box-shadow: var(--app-shadow-raised);
}

.page-stack.ui-page-stack .app-card-rail > :is(
    .app-standard-card,
    .museum-exhibition-card,
    .museum-exhibition-item,
    .social-channel-post-card,
    .social-channel-trending-tile,
    .account-favorite-item
) :is(.museum-exhibition-image-link, .home-exhibition-media, .social-channel-post-media, .account-favorite-image-link, .social-channel-trending-thumb){
    display: block;
    flex: 0 0 var(--app-standard-card-media-height);
    width: 100%;
    inline-size: 100%;
    min-width: 0;
    height: var(--app-standard-card-media-height);
    max-height: var(--app-standard-card-media-height);
    aspect-ratio: auto;
    border-radius: var(--app-standard-card-radius) var(--app-standard-card-radius) 0 0;
    overflow: hidden;
    background: var(--app-color-brand-surface-deep);
    color: inherit;
    text-decoration: none;
}

.page-stack.ui-page-stack .app-card-rail > :is(
    .app-standard-card,
    .museum-exhibition-card,
    .museum-exhibition-item,
    .social-channel-post-card,
    .social-channel-trending-tile,
    .account-favorite-item
) :is(.museum-exhibition-image, .account-favorite-image, .social-channel-trending-thumb img){
    display: block;
    width: 100%;
    inline-size: 100%;
    height: 100%;
    max-height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center center;
    border-radius: 0;
    transform: none;
}

.page-stack.ui-page-stack .app-card-rail > :is(
    .app-standard-card,
    .museum-exhibition-card,
    .museum-exhibition-item,
    .social-channel-post-card,
    .social-channel-trending-tile,
    .account-favorite-item,
    .dashboard-menu-card
) :is(.museum-exhibition-content, .home-exhibition-copy, .social-channel-post-copy, .account-favorite-link, .social-channel-trending-copy, .dashboard-menu-copy){
    display: grid;
    flex: 1 1 auto;
    align-items: flex-start;
    align-content: start;
    grid-template-rows: auto auto auto minmax(0, auto);
    gap: 0.3rem;
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding:
        var(--app-standard-card-copy-top)
        var(--app-standard-card-copy-inline)
        var(--app-standard-card-copy-bottom);
    overflow: hidden;
    text-align: left;
}

.page-stack.ui-page-stack .app-card-rail > :is(
    .museum-card,
    .dashboard-menu-card
):not(.museum-profile-card):not(:has(.app-card-media)):not(:has(.museum-exhibition-image-link)):not(:has(.social-channel-post-media)):not(:has(.account-favorite-image-link)):not(:has(.social-channel-trending-thumb)){
    padding:
        var(--app-standard-card-copy-top)
        var(--app-standard-card-copy-inline)
        var(--app-standard-card-copy-bottom);
}

.page-stack.ui-page-stack .app-card-rail > :is(.museum-card, .dashboard-menu-card) :is(.museum-card-title, h2, .dashboard-menu-copy, p),
.page-stack.ui-page-stack .app-card-rail > :is(.museum-card, .dashboard-menu-card) :is(.museum-card-main-link, .museum-card-head){
    min-width: 0;
    max-width: 100%;
}

.page-stack.ui-page-stack .app-card-rail > :is(
    .app-standard-card,
    .museum-card,
    .museum-exhibition-card,
    .museum-exhibition-item,
    .social-channel-post-card,
    .social-channel-trending-tile,
    .account-favorite-item,
    .dashboard-menu-card
) :is(.museum-exhibition-title, .museum-card-title, .museum-card-title-link, .social-channel-trending-name, .social-channel-feature-title){
    width: 100%;
    min-width: 0;
    max-width: 100%;
    color: var(--app-color-link);
    font-size: var(--app-standard-card-title-size);
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    text-decoration: none;
    overflow-wrap: anywhere;
    word-break: normal;
}

.page-stack.ui-page-stack :is(.app-card-museum-name, .app-card-source-name){
    display: inline-flex;
    align-items: center;
    justify-self: start;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--app-color-link);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.08;
    order: 1;
    text-align: left;
    text-transform: none;
    overflow-wrap: anywhere;
}

.page-stack.ui-page-stack .app-card-title-button {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}

.page-stack.ui-page-stack :is(
    .museum-exhibition-title,
    .museum-card-title-link,
    .app-card-title-link,
    .app-card-context-link
):is(a, button):is(:hover, :focus-visible) {
    color: var(--app-color-primary-action);
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.16em;
}

.page-stack.ui-page-stack .app-card-rail > :is(
    .app-standard-card,
    .museum-exhibition-card,
    .museum-exhibition-item,
    .social-channel-post-card,
    .social-channel-trending-tile,
    .account-favorite-item
) :is(.museum-exhibition-title, .social-channel-trending-name, .social-channel-feature-title){
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    order: 2;
    overflow: hidden;
}

.page-stack.ui-page-stack .app-card-rail > :is(
    .app-standard-card,
    .museum-exhibition-card,
    .museum-exhibition-item,
    .social-channel-post-card,
    .social-channel-trending-tile,
    .account-favorite-item
) :is(.museum-exhibition-card-copy, .social-channel-post-description, .social-channel-trending-description, .museum-exhibition-description-shell){
    display: -webkit-box;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    color: var(--app-color-secondary-text);
    font-size: var(--app-standard-card-body-size);
    font-weight: 450;
    line-height: 1.28;
    order: 3;
    text-align: left;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.page-stack.ui-page-stack .app-card-rail > :is(
    .app-standard-card,
    .museum-exhibition-card,
    .museum-exhibition-item,
    .account-favorite-item
) .museum-exhibition-description-shell{
    -webkit-line-clamp: var(--app-exhibition-card-description-lines);
    line-clamp: var(--app-exhibition-card-description-lines);
}

.page-stack.ui-page-stack .app-card-rail > :is(
    .app-standard-card,
    .museum-exhibition-card,
    .museum-exhibition-item,
    .social-channel-post-card,
    .social-channel-trending-tile,
    .account-favorite-item
) :is(.museum-exhibition-date, .social-channel-post-date, .social-channel-trending-date){
    display: -webkit-box;
    align-self: start;
    width: 100%;
    min-width: 0;
    margin-top: 0;
    padding-top: 0;
    padding-right: 0;
    border-top: 0;
    color: var(--app-color-link);
    font-size: var(--app-standard-card-meta-size);
    font-weight: 550;
    line-height: 1.24;
    order: 0;
    text-align: left;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.page-stack.ui-page-stack .account-favorites-list.app-card-rail > .account-favorite-item.museum-exhibition-card{
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    grid-template-areas: none;
    align-items: stretch;
    justify-items: stretch;
    gap: 0;
    min-height: var(--app-standard-card-height);
    height: var(--app-standard-card-height);
    padding: 0;
    position: relative;
}

.page-stack.ui-page-stack .account-favorites-list.app-card-rail > .account-favorite-item.museum-exhibition-card > .favorite-toggle-btn-corner,
.page-stack.ui-page-stack .account-favorites-list.app-card-rail > .account-favorite-item.museum-exhibition-card > .museum-alert-toggle-btn-corner{
    position: absolute;
    top: auto;
    bottom: var(--app-standard-card-control-bottom);
    right: var(--app-standard-card-control-bottom);
    inset: auto var(--app-standard-card-control-bottom) var(--app-standard-card-control-bottom) auto;
    justify-self: auto;
    align-self: auto;
}

.page-stack.ui-page-stack .account-favorites-list.app-card-rail > .account-favorite-item.museum-exhibition-card > .account-favorite-image-link{
    grid-area: auto;
    justify-self: stretch;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    height: var(--app-standard-card-media-height);
    min-height: var(--app-standard-card-media-height);
    aspect-ratio: auto;
    border-radius: var(--app-standard-card-radius) var(--app-standard-card-radius) 0 0;
}

.page-stack.ui-page-stack .account-favorites-list.app-card-rail > .account-favorite-item.museum-exhibition-card > .account-favorite-link{
    display: grid;
    grid-area: auto;
    flex: 1 1 auto;
    grid-template-rows: auto auto auto minmax(0, auto);
    align-content: start;
    justify-items: stretch;
    gap: 0.3rem;
    width: 100%;
    min-width: 0;
    padding:
        var(--app-standard-card-copy-top)
        var(--app-standard-card-copy-inline)
        var(--app-standard-card-copy-bottom);
    overflow: hidden;
}

.page-stack.ui-page-stack .account-favorites-list.app-card-rail > .account-favorite-item.museum-exhibition-card .account-favorite-link > .museum-exhibition-date{
    grid-area: auto;
    justify-self: stretch;
    align-self: start;
    display: -webkit-box;
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--app-color-link);
    font-size: var(--app-standard-card-meta-size);
    letter-spacing: 0;
    line-height: 1.24;
    text-align: left;
    text-transform: none;
    white-space: normal;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.page-stack.ui-page-stack .account-favorites-list.app-card-rail > .account-favorite-item.museum-exhibition-card .account-favorite-link > :is(
    .app-card-source-name,
    .app-card-museum-name,
    .museum-exhibition-title,
    .museum-exhibition-card-copy
){
    grid-area: auto;
}

.page-stack.ui-page-stack .museum-directory-card .museum-grid.app-card-rail > .museum-card.favorite-card-shell .museum-card-main-link{
    display: grid;
    flex: 1 1 auto;
    align-content: start;
    align-items: stretch;
    justify-items: stretch;
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
    text-align: left;
}

.page-stack.ui-page-stack .museum-directory-card .museum-grid.app-card-rail > .museum-card.favorite-card-shell .museum-card-title{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-items: stretch;
    gap: 0.68rem;
    min-height: calc((1.08em * 3) + 1.36rem);
    padding: 0.68rem 0.74rem;
    border: 1px solid var(--app-border-color-standard);
    border-radius: 8px;
    background: var(--app-surface-card);
    box-shadow:
        var(--shadow-soft);
}

.page-stack.ui-page-stack .app-card-rail > .museum-profile-card.favorite-card-shell,
.page-stack.ui-page-stack .app-card-rail > .museum-profile-card.home-museum-card,
.page-stack.ui-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell{
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--app-card-radius, 8px);
    clip-path: none;
    background:
        var(--app-gradient-brand);
    box-shadow:
        var(--shadow-soft);
}

.page-stack.ui-page-stack .app-card-rail > .museum-profile-card.favorite-card-shell::before,
.page-stack.ui-page-stack .app-card-rail > .museum-profile-card.home-museum-card::before,
.page-stack.ui-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell::before{
    content: "";
    position: absolute;
    right: -18%;
    bottom: -24%;
    z-index: 0;
    display: block;
    width: 78%;
    aspect-ratio: 1;
    border: 1px solid var(--app-border-color-standard);
    border-radius: 999px;
    background: var(--app-overlay-accent-subtle);
    box-shadow: var(--shadow-soft);
    opacity: 1;
    pointer-events: none;
}

.page-stack.ui-page-stack .app-card-rail > .museum-profile-card.favorite-card-shell::after,
.page-stack.ui-page-stack .app-card-rail > .museum-profile-card.home-museum-card::after,
.page-stack.ui-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell::after{
    content: none;
}

.page-stack.ui-page-stack .app-card-rail > .museum-profile-card.favorite-card-shell:is(:hover, :has(:focus-visible)),
.page-stack.ui-page-stack .app-card-rail > .museum-profile-card.home-museum-card:is(:hover, :has(:focus-visible)),
.page-stack.ui-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell:is(:hover, :has(:focus-visible)){
    border-color: var(--app-border-color-standard);
    box-shadow:
        var(--shadow-soft);
}

.page-stack.ui-page-stack .app-card-rail > .museum-profile-card .museum-card-main-link,
.page-stack.ui-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell .museum-card-main-link{
    position: relative;
    z-index: 1;
    display: grid;
    flex: 1 1 auto;
    align-content: center;
    align-items: center;
    place-items: center stretch;
    justify-items: stretch;
    width: 100%;
    min-width: 0;
    min-height: 100%;
    padding: 1rem 1rem 3.25rem;
    text-align: left;
}

.page-stack.ui-page-stack .app-card-rail > .museum-profile-card .museum-card-head,
.page-stack.ui-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell .museum-card-head{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    justify-items: stretch;
    width: 100%;
    min-width: 0;
}

.page-stack.ui-page-stack .app-card-rail > .museum-profile-card .museum-card-title,
.page-stack.ui-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell .museum-card-title{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-items: stretch;
    justify-content: stretch;
    gap: 0;
    position: relative;
    width: 100%;
    height: 4.35rem;
    min-height: 4.35rem;
    max-height: 4.35rem;
    padding: 0;
    border: 1px solid var(--app-border-color-standard);
    border-radius: 8px;
    clip-path: none;
    background: var(--app-surface-card);
    box-shadow:
        var(--shadow-soft);
    overflow: hidden;
}

.page-stack.ui-page-stack .app-card-rail > .museum-profile-card .museum-card-title::before,
.page-stack.ui-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell .museum-card-title::before{
    content: none;
}

.page-stack.ui-page-stack .app-card-rail > .museum-profile-card .museum-card-title::after,
.page-stack.ui-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell .museum-card-title::after{
    content: none;
}

.page-stack.ui-page-stack .app-card-rail > .museum-profile-card .museum-card-directory-icon,
.page-stack.ui-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell .museum-card-directory-icon{
    position: relative;
    z-index: 2;
    display: inline-grid;
    place-items: center;
    align-self: stretch;
    width: 3.35rem;
    min-width: 3.35rem;
    height: 4.35rem;
    min-height: 4.35rem;
    max-height: 4.35rem;
    margin-top: 0;
    border: 0;
    border-right: 0;
    border-radius: 0;
    background:
        var(--app-gradient-brand);
    color: var(--app-color-link);
    box-shadow:
        var(--shadow-soft);
}

.page-stack.ui-page-stack .app-card-rail > .museum-profile-card .museum-card-directory-icon::before,
.page-stack.ui-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell .museum-card-directory-icon::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.22rem;
    height: 2.22rem;
    transform: translate(-50%, -50%);
    border: 1px solid var(--app-border-color-standard);
    border-radius: 999px;
    background: var(--app-surface-inner);
    box-shadow:
        var(--shadow-soft);
}

.page-stack.ui-page-stack .app-card-rail > .museum-profile-card .museum-card-directory-icon svg,
.page-stack.ui-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell .museum-card-directory-icon svg{
    position: relative;
    z-index: 1;
    width: 1.42rem;
    height: 1.42rem;
    fill: none;
    stroke: currentColor;
    stroke-width: var(--app-icon-stroke-width-standard);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.page-stack.ui-page-stack .app-card-rail > .museum-profile-card .museum-card-title-link,
.page-stack.ui-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell .museum-card-title-link{
    display: grid;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    align-content: center;
    align-items: center;
    place-items: center start;
    align-self: stretch;
    position: relative;
    z-index: 2;
    width: 100%;
    height: 4.35rem;
    min-height: 4.35rem;
    max-height: 4.35rem;
    margin-top: 0;
    min-width: 0;
    padding: 0.52rem 0.64rem;
    border: 0;
    border-left: 0;
    border-radius: 0;
    background: transparent;
    color: var(--app-color-link);
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: 0;
    text-align: left;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-decoration: none;
    text-shadow:
        none;
    box-shadow: none;
}

.page-stack.ui-page-stack .app-card-rail > .museum-profile-card .museum-card-title-link:is(:hover, :focus-visible),
.page-stack.ui-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell .museum-card-title-link:is(:hover, :focus-visible){
    color: var(--app-color-link);
    text-decoration: none;
}

.page-stack.ui-page-stack .museum-profile-card.account-favorite-item .account-favorite-link{
    position: relative;
    z-index: 1;
    display: grid;
    align-content: center;
    justify-items: start;
    width: 100%;
    min-width: 0;
    padding: 0.72rem 0.82rem;
    border: 1px solid var(--app-border-color-standard);
    border-radius: 8px;
    clip-path: none;
    background: var(--app-surface-card);
    box-shadow:
        var(--shadow-soft);
    overflow: hidden;
}

.page-stack.ui-page-stack .museum-profile-card.account-favorite-item .account-favorite-link .museum-exhibition-title{
    color: var(--app-color-link);
    font-weight: 700;
    letter-spacing: 0;
    text-align: left;
    text-shadow:
        none;
}

.page-stack.ui-page-stack .app-card-rail > .home-more-card .home-more-card-link{
    grid-template-rows: var(--app-standard-card-media-height, 10.6rem) minmax(0, 1fr);
    align-content: stretch;
    align-items: stretch;
    padding: 0;
}

.page-stack.ui-page-stack .app-card-rail > .home-more-card .home-more-card-link::after{
    content: none;
    display: none;
}

.page-stack.ui-page-stack .app-card-rail > .home-more-card .home-more-card-orb,
.page-stack.ui-page-stack .app-card-rail > .home-more-card .home-more-card-statement{
    min-height: 0;
}

.page-stack.ui-page-stack .app-card-rail > .home-more-card .home-more-card-orb{
    height: var(--app-standard-card-media-height, 10.6rem);
    max-height: var(--app-standard-card-media-height, 10.6rem);
    border-bottom: 0;
    box-shadow: var(--shadow-soft);
}

.page-stack.ui-page-stack .app-card-rail > .home-more-card .home-more-card-statement{
    align-content: start;
    align-items: start;
    gap: 0.42rem;
    padding: var(--app-standard-card-copy-top, 0.72rem) var(--app-standard-card-copy-inline, 0.82rem) calc(var(--app-standard-card-control-bottom, 0.68rem) + 3rem);
    border-top: 0;
    background: transparent;
    box-shadow: none;
    text-shadow: none;
}

.page-stack.ui-page-stack .app-card-rail > .home-more-card .home-more-card-copy{
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--app-color-primary-text);
    font-size: var(--app-standard-card-body-size, 0.78rem);
    font-weight: 450;
    line-height: 1.28;
    text-shadow: none;
    overflow-wrap: anywhere;
}

.page-stack.ui-page-stack .app-card-rail > .home-more-card,
.page-stack.ui-page-stack .app-card-rail > .home-more-card .home-more-card-link,
.page-stack.ui-page-stack .app-card-rail > .home-more-card .home-more-card-statement,
.page-stack.ui-page-stack .app-card-rail > .home-more-card .home-more-card-copy{
    background-image: none;
}

.page-stack.ui-page-stack .app-card-rail > .home-more-card .home-more-card-statement,
.page-stack.ui-page-stack .app-card-rail > .home-more-card .home-more-card-copy{
    border-top: 0;
    border-bottom: 0;
    box-shadow: none;
}

.page-stack.ui-page-stack .app-card-rail > .home-more-card .home-more-card-statement::before,
.page-stack.ui-page-stack .app-card-rail > .home-more-card .home-more-card-statement::after,
.page-stack.ui-page-stack .app-card-rail > .home-more-card .home-more-card-copy::before,
.page-stack.ui-page-stack .app-card-rail > .home-more-card .home-more-card-copy::after{
    content: none;
    display: none;
}

.page-stack.ui-page-stack .app-card-rail > .home-more-card .app-card-action-link.home-more-card-cta{
    left: var(--app-standard-card-copy-inline, 0.82rem);
    right: auto;
    bottom: calc(var(--app-standard-card-control-bottom, 0.68rem) + 0.08rem);
    width: fit-content;
    max-width: calc(100% - (var(--app-standard-card-copy-inline, 0.82rem) * 2));
    justify-self: auto;
    margin: 0;
    color: var(--app-color-link);
    font-size: 0.88rem;
    font-weight: 650;
    line-height: 1.12;
    text-transform: none;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: normal;
}

.page-stack.ui-page-stack .app-card-rail > .home-more-card .app-card-action-link.home-more-card-cta-museums{
    right: var(--app-standard-card-copy-inline, 0.82rem);
    width: auto;
    max-width: calc(100% - (var(--app-standard-card-copy-inline, 0.82rem) * 2));
    justify-content: flex-start;
    white-space: nowrap;
}

.page-stack.ui-page-stack .app-card-rail[data-mobile-carousel].mobile-carousel-is-scrollable > .home-more-card.app-standard-card .app-card-action-link.home-more-card-cta-museums{
    right: var(--app-standard-card-copy-inline, 0.82rem);
    width: auto;
    max-width: calc(100% - (var(--app-standard-card-copy-inline, 0.82rem) * 2));
    justify-content: flex-start;
    font-size: clamp(0.68rem, 2.4vw, 0.78rem);
    white-space: nowrap;
}

.page-stack.ui-page-stack .app-card-rail > :is(
    .app-standard-card,
    .museum-card,
    .museum-exhibition-card,
    .museum-exhibition-item,
    .social-channel-post-card,
    .social-channel-trending-tile,
    .account-favorite-item
) :is(.favorite-toggle-btn-corner, .favorite-toggle-btn-leading, .museum-alert-toggle-btn-corner, .museum-alert-toggle-btn-leading){
    position: absolute;
    top: auto;
    bottom: var(--app-standard-card-control-bottom);
    z-index: 5;
}

.page-stack.ui-page-stack .app-card-rail > :is(
    .app-standard-card,
    .museum-card,
    .museum-exhibition-card,
    .museum-exhibition-item,
    .social-channel-post-card,
    .social-channel-trending-tile,
    .account-favorite-item
) :is(.favorite-toggle-btn-corner, .favorite-toggle-btn-leading){
    right: var(--app-standard-card-control-bottom);
}

.page-stack.ui-page-stack .app-card-rail > :is(
    .app-standard-card,
    .museum-card,
    .museum-exhibition-card,
    .museum-exhibition-item,
    .social-channel-post-card,
    .social-channel-trending-tile,
    .account-favorite-item
) :is(.museum-alert-toggle-btn-corner, .museum-alert-toggle-btn-leading){
    right: calc(var(--app-standard-card-control-bottom) + var(--app-standard-card-control-size) + var(--app-standard-card-control-gap));
}

.page-stack.ui-page-stack .app-card-rail > .museum-profile-card .museum-card-controls-stack > :is(
    .favorite-toggle-btn-leading,
    .museum-alert-toggle-btn-leading
),
.page-stack.ui-page-stack .museum-directory-card .museum-grid.app-card-rail .museum-card-controls-stack > :is(
    .favorite-toggle-btn-leading,
    .museum-alert-toggle-btn-leading
){
    position: static;
    inset: auto;
    flex: 0 0 auto;
    margin: 0;
}

@media (max-width: 760px) {
    .page-stack.ui-page-stack{
        --app-standard-card-copy-inline: clamp(0.66rem, 2.4vw, 0.78rem);
        --app-standard-card-copy-top: clamp(0.58rem, 2vw, 0.68rem);
        --app-standard-card-copy-bottom: clamp(0.7rem, 2.2vw, 0.82rem);
        --app-standard-card-control-bottom: 0.62rem;
        --app-standard-card-meta-reserve: 2.9rem;
        --app-standard-card-meta-reserve-dual: 5.15rem;
    }
}

.page-stack.ui-page-stack .app-card-rail > :is(
    .app-standard-card,
    .museum-card,
    .museum-exhibition-card,
    .museum-exhibition-item,
    .social-channel-post-card,
    .social-channel-trending-tile,
    .account-favorite-item
):has(.favorite-toggle-btn-corner):has(.museum-alert-toggle-btn-corner),
.page-stack.ui-page-stack .app-card-rail > :is(
    .app-standard-card,
    .museum-card,
    .museum-exhibition-card,
    .museum-exhibition-item,
    .social-channel-post-card,
    .social-channel-trending-tile,
    .account-favorite-item
):has(.favorite-toggle-btn-leading):has(.museum-alert-toggle-btn-leading){
    --app-standard-card-meta-reserve: var(--app-standard-card-meta-reserve-dual);
}

/*
 * Shared text-width contract.
 * Copy and title text should fill the section/card area that owns it; icons,
* controls,
and media keep their own sizing.
 */
.page-stack.ui-page-stack :is(
    .page-head-intro,
    .page-head-intro p,
    .ui-note-panel,
    .ui-note-panel p,
    .home-hero-title,
    .home-hero-lead,
    .dashboard-menu-copy,
    .account-section-copy,
    .museum-card-main-link,
    .museum-card-head,
    .museum-card-title,
    .museum-card-title-link,
    .museum-exhibition-content,
    .museum-exhibition-title,
    .museum-exhibition-card-copy,
    .museum-exhibition-date,
    .home-exhibition-copy,
    .social-channel-copy,
    .social-channel-feature-copy,
    .social-channel-feature-title,
    .social-channel-feature-copy .social-channel-post-date,
    .social-channel-post-copy,
    .social-channel-trending-copy,
    .social-channel-trending-name,
    .social-channel-trending-description,
    .social-channel-trending-date,
    .account-favorite-link,
    .account-detail-content,
    .account-detail-body,
    .socials-card-copy,
    .socials-card-copy p
){
    box-sizing: border-box;
    justify-self: stretch;
    width: 100%;
    inline-size: 100%;
    max-width: 100%;
    max-inline-size: 100%;
    min-width: 0;
    min-inline-size: 0;
}

@media (max-width: 760px) {
    .page-stack.ui-page-stack :is(
        .page-head-intro,
        .ui-note-panel,
        .dashboard-menu-copy,
        .museum-exhibition-content,
        .home-exhibition-copy,
        .social-channel-copy,
        .social-channel-feature-copy,
        .social-channel-post-copy,
        .social-channel-trending-copy,
        .account-favorite-link,
        .account-detail-content,
        .socials-card-copy
    ){
        justify-self: stretch;
        width: 100%;
        inline-size: 100%;
        max-width: 100%;
        max-inline-size: 100%;
    }
}

/* Shared app content copy keeps one paragraph voice outside page heads and menus. */
.page-stack.ui-page-stack :is(
    p,
    .dashboard-menu-copy,
    .account-section-copy,
    .museum-caution-copy,
    .social-channel-copy,
    .social-channel-feature-copy,
    .social-channel-post-copy,
    .social-channel-trending-description
):not(.museum-tabs *):not(.museum-tab *):not(.btn *):not(button *):not(.auth-login-gateway *):not(.news-article-header *){
    color: var(--app-text-color-body);
    font-family: var(--app-font-family-base);
    font-size: clamp(0.9rem, 1.08vw, 1.02rem);
    font-weight: 450;
    line-height: 1.5;
    letter-spacing: 0;
}

@media (max-width: 760px) {
    .page-stack.ui-page-stack :is(
        p,
        .dashboard-menu-copy,
        .account-section-copy,
        .museum-caution-copy,
        .social-channel-copy,
        .social-channel-feature-copy,
        .social-channel-post-copy,
        .social-channel-trending-description
    ):not(.museum-tabs *):not(.museum-tab *):not(.btn *):not(button *):not(.auth-login-gateway *):not(.news-article-header *){
        font-size: 0.9rem;
        line-height: 1.42;
    }
}

.page-stack.ui-page-stack :is(a.app-nav-card-button, button.app-nav-card-button, button.social-channel-action.youtube-updates-toggle) :is(.home-hero-title-row, .social-channel-action-title){
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1rem;
    align-items: center;
    width: 17rem;
    max-width: calc(100vw - 5.65rem);
    padding-right: 0.72rem;
    overflow: visible;
}

.page-stack.ui-page-stack :is(a.app-nav-card-button, button.app-nav-card-button, button.social-channel-action.youtube-updates-toggle) .social-channel-action-arrow{
    display: none;
    visibility: hidden;
    width: 0;
    min-width: 0;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
}

.page-stack.ui-page-stack :is(a.app-nav-card-button, button.app-nav-card-button, button.social-channel-action.youtube-updates-toggle)::after{
    content: none;
    display: none;
    visibility: hidden;
    opacity: 0;
}

.page-stack.ui-page-stack :is(a.app-nav-card-button, button.app-nav-card-button, button.social-channel-action.youtube-updates-toggle) :is(.home-hero-title-row, .social-channel-action-title) > .social-channel-action-arrow{
    display: none;
    visibility: hidden;
    width: 0;
    min-width: 0;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
}

.page-stack.ui-page-stack :is(.home-social-actions-section, .social-channel-actions) :is(a.social-channel-action.app-nav-card-button, button.social-channel-action.app-nav-card-button, button.social-channel-action.youtube-updates-toggle)::after{
    content: none;
    display: none;
    visibility: hidden;
    opacity: 0;
}

.page-stack.ui-page-stack :is(a.app-nav-card-button, button.app-nav-card-button, button.social-channel-action.youtube-updates-toggle) :is(.home-hero-title-row, .social-channel-action-title)::after{
    content: ">";
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    width: 1rem;
    min-width: 1rem;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--app-color-link);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.05rem;
    font-style: normal;
    font-weight: 650;
    line-height: 1;
    text-align: right;
    text-decoration: none;
    transform: none;
}

.page-stack.ui-page-stack :is(a.app-nav-card-button, button.app-nav-card-button, button.social-channel-action.youtube-updates-toggle) :is(.home-hero-title-row, .social-channel-action-title) > span:not(.social-channel-action-arrow){
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Neutral card aliases for shared social/video cards that still keep legacy
   museum card classes as compatibility hooks. */
.app-content-card{
    min-width: 0;
}

/* Museum identity visit actions form one left-aligned text stack
   directly below the museum title in every card variant. */
.museum-card-visit-links{
    display: grid;
    flex: 0 0 auto;
    align-self: start;
    justify-self: start;
    gap: 0.18rem;
    width: min(100%, 10.75rem);
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.museum-card-main-link > .museum-card-visit-links{
    margin-top: 0.38rem;
}

.app-card-title + .museum-card-visit-links{
    margin-top: 0.38rem;
}

.museum-card-visit-row{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    min-height: var(--app-page-head-icon-size);
    color: var(--app-text-color-muted);
    line-height: 1.2;
}

.museum-card-visit-link{
    display: grid;
    grid-template-columns: var(--app-page-head-icon-size) minmax(0, 1fr);
    align-items: center;
    gap: 0.48rem;
    width: 100%;
    min-width: 0;
    min-height: calc(var(--app-page-head-icon-size) + 0.16rem);
    padding: 0.06rem 0.28rem;
    border: 0;
    border-radius: var(--app-control-radius);
    background: transparent;
    color: var(--app-color-link);
    font-family: var(--app-font-family-base);
    font-size: clamp(0.72rem, 2.4vw, var(--app-field-value-font-size));
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.museum-card-visit-link span{
    min-width: 0;
    white-space: nowrap;
}

.museum-card-visit-link:is(:hover, :focus-visible){
    background: var(--app-interactive-hover-surface);
    color: var(--app-color-primary-action-hover);
    text-decoration: none;
}

.museum-card-visit-link svg,
.museum-card-map-trigger svg{
    display: block;
    width: var(--app-page-head-icon-size);
    height: var(--app-page-head-icon-size);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.museum-card-map-trigger{
    position: relative;
    z-index: 4;
}

.app-card-media-link,
.app-card-content,
.app-card-title,
.app-card-date{
    min-width: 0;
}

.page-stack.ui-page-stack .app-standard-card .app-card-action-link{
    position: absolute;
    left: var(--app-standard-card-copy-inline, 0.82rem);
    right: calc(
        var(--app-standard-card-control-bottom, 0.68rem)
        + var(--app-standard-card-control-size, 2rem)
        + var(--app-standard-card-control-gap, 0.28rem)
        + 0.42rem
    );
    bottom: calc(var(--app-standard-card-control-bottom, 0.68rem) + 0.08rem);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.44rem;
    min-width: 0;
    min-height: 1.72rem;
    padding: 0.22rem 0.58rem;
    border: 0;
    border-radius: 999px;
    background: var(--app-surface-elevated);
    color: var(--app-color-link);
    box-shadow:
        var(--shadow-soft);
    font-size: 0.93rem;
    font-weight: 650;
    line-height: 1.15;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

.page-stack.ui-page-stack .app-standard-card .app-card-action-icon{
    display: block;
    flex: 0 0 1rem;
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Every social-card variant keeps its publication date in one metadata row. */
.page-stack.ui-page-stack .app-social-post-card .social-channel-post-meta-row{
    display: block;
    order: 0;
    width: 100%;
    min-width: 0;
}

.page-stack.ui-page-stack .app-social-post-card .social-channel-post-meta-row .social-channel-post-date{
    display: block;
    min-width: 0;
    min-inline-size: 0;
    max-width: none;
    max-inline-size: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-stack.ui-page-stack .app-standard-card .app-card-action-label{
    flex: 0 0 auto;
    min-width: max-content;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

.page-stack.ui-page-stack .app-standard-card .app-card-action-link:hover,
.page-stack.ui-page-stack .app-standard-card .app-card-action-link:focus-visible{
    border: 0;
    background: var(--app-interactive-hover-surface);
    color: var(--app-color-link);
    text-decoration: none;
}

/* Shared page/helper copy tone. Keep headings,
header controls,
tabs,
and
   command buttons on their own type contracts. */
.page-stack.ui-page-stack :is(
    .newsletter-tagline,
    .dashboard-menu-copy,
    .account-section-copy,
    .account-section-menu-help,
    .account-panel-help,
    .museum-exhibition-card-copy,
    .social-channel-post-description,
    .social-channel-trending-description,
    .museum-exhibition-description-shell,
    .auth-panel-intro,
    .auth-switch-copy,
    .museum-empty-msg,
    .museum-search-empty
){
    color: var(--app-text-color-muted, var(--app-color-accent-text));
    font-size: var(--app-body-copy-size, 0.92rem);
    font-weight: 450;
    line-height: var(--app-body-copy-line-height, 1.45);
    letter-spacing: 0;
    text-transform: none;
    overflow-wrap: anywhere;
}

.page-stack.ui-page-stack .newsletter-tagline{
    white-space: normal;
}

.page-stack.ui-page-stack.museum-detail-page-stack [data-museum-panel][hidden],
.page-stack.ui-page-stack.museum-detail-page-stack [data-museum-subpanel][hidden],
.page-stack.ui-page-stack.museum-detail-page-stack .museum-panel[hidden],
.page-stack.ui-page-stack.museum-detail-page-stack .museum-subpanel[hidden]{
    display: none;
}

@media (max-width: 700px) {
    .page-stack.ui-page-stack :is(
        .newsletter-tagline,
        .dashboard-menu-copy,
        .account-section-copy,
        .account-section-menu-help,
        .account-panel-help,
        .museum-exhibition-card-copy,
        .social-channel-post-description,
        .social-channel-trending-description,
        .museum-exhibition-description-shell,
        .auth-panel-intro,
        .auth-switch-copy,
        .museum-empty-msg,
        .museum-search-empty
    ){
        font-size: var(--app-type-body-mobile-size, 0.9rem);
        line-height: var(--app-type-body-mobile-line-height, 1.46);
    }
}

.page-stack.ui-page-stack .app-card-rail > :is(
    .app-standard-card,
    .museum-exhibition-card,
    .museum-exhibition-item,
    .account-favorite-item
) .museum-exhibition-description-shell{
    font-size: var(--app-standard-card-title-size);
}

.page-stack.ui-page-stack .app-card-rail > .social-channel-post-card:not(.app-featured-card):not(.app-horizontal-card) .social-channel-post-copy{
    padding-right: calc(
        var(--app-standard-card-copy-inline, 0.82rem)
        + var(--app-standard-card-control-size, 2rem)
        + var(--app-standard-card-control-gap, 0.28rem)
    );
    padding-bottom: calc(
        var(--app-standard-card-control-bottom, 0.68rem)
        + var(--app-standard-card-control-size, 2rem)
        + 0.28rem
    );
}

.page-stack.ui-page-stack :is(
    .home-exhibition-card,
    .home-social-post-card,
    .social-channel-post-card:not(.app-featured-card):not(.app-horizontal-card),
    .social-channel-trending-tile,
    .museum-exhibition-list > .museum-exhibition-item:not(.museum-section-info-card)
) :is(.museum-exhibition-content, .home-exhibition-copy, .social-channel-post-copy, .social-channel-trending-copy){
    position: relative;
    padding-right: calc(
        var(--app-standard-card-copy-inline, 0.82rem)
        + var(--app-standard-card-control-size, 2rem)
        + var(--app-standard-card-control-gap, 0.28rem)
    );
    padding-bottom: calc(
        var(--app-standard-card-control-bottom, 0.68rem)
        + var(--app-standard-card-control-size, 2rem)
        + 1.1rem
    );
}

.page-stack.ui-page-stack :is(
    .home-exhibition-card,
    .home-social-post-card,
    .social-channel-post-card:not(.app-featured-card):not(.app-horizontal-card),
    .social-channel-trending-tile,
    .museum-exhibition-list > .museum-exhibition-item:not(.museum-section-info-card)
) :is(.museum-exhibition-date, .social-channel-post-date, .social-channel-trending-date, .app-card-source-name, .app-card-museum-name){
    order: 0;
}

.page-stack.ui-page-stack :is(
    .home-exhibition-card,
    .home-social-post-card,
    .social-channel-post-card:not(.app-featured-card):not(.app-horizontal-card),
    .social-channel-trending-tile,
    .museum-exhibition-list > .museum-exhibition-item:not(.museum-section-info-card)
) :is(.museum-exhibition-card-copy, .social-channel-post-description, .social-channel-trending-description, .museum-exhibition-description-shell){
    order: 5;
}

@media (max-width: 1024px) {
    .page-stack.ui-page-stack:is(.social-channel-page-stack-youtube, .social-channel-page-stack-instagram) .social-channel-post-card:not(.app-featured-card):not(.app-horizontal-card) .social-channel-post-copy{
        gap: 0.16rem;
        padding-right: 3rem;
        padding-bottom: 3rem;
    }

    .page-stack.ui-page-stack:is(.social-channel-page-stack-youtube, .social-channel-page-stack-instagram) .social-channel-post-card:not(.app-featured-card):not(.app-horizontal-card) :is(.social-channel-post-date, .app-card-source-name){
        font-size: 0.74rem;
        line-height: 1.12;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .page-stack.ui-page-stack:is(.social-channel-page-stack-youtube, .social-channel-page-stack-instagram) .app-social-post-card:not(.app-featured-card):not(.app-horizontal-card) .social-channel-post-meta-row .social-channel-post-date{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .page-stack.ui-page-stack:is(.social-channel-page-stack-youtube, .social-channel-page-stack-instagram) .social-channel-post-card:not(.app-featured-card):not(.app-horizontal-card) .app-card-title{
        display: -webkit-box;
        max-height: none;
        white-space: normal;
        overflow: hidden;
        text-overflow: clip;
        overflow-wrap: anywhere;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        font-size: 0.82rem;
        line-height: 1.12;
    }

    .page-stack.ui-page-stack:is(.social-channel-page-stack-youtube, .social-channel-page-stack-instagram) .social-channel-post-card:not(.app-featured-card):not(.app-horizontal-card) .social-channel-post-description,
.page-stack.ui-page-stack:is(.social-channel-page-stack-youtube, .social-channel-page-stack-instagram) .social-channel-post-card:not(.app-featured-card):not(.app-horizontal-card) .social-channel-post-description.app-card-copy-ellipsis,
.page-stack.ui-page-stack:is(.social-channel-page-stack-youtube, .social-channel-page-stack-instagram) .social-channel-post-card:not(.app-featured-card):not(.app-horizontal-card) .museum-exhibition-card-copy.social-channel-post-description.app-card-copy-ellipsis{
        overflow-wrap: anywhere;

        font-size: 0.74rem;
        line-height: 1.18;
    }
}

.page-stack.ui-page-stack .app-standard-card :is(
    .museum-exhibition-date,
    .social-channel-post-date,
    .social-channel-trending-date
){
    font-size: var(--app-standard-card-title-size, 0.82rem);
    line-height: 1.24;
}

.page-stack.ui-page-stack .app-standard-card .app-card-action-link{
    right: auto;
    width: min(50%, calc(100% - var(--app-standard-card-copy-inline, 0.82rem) - 4.95rem));
    max-width: 50%;
    justify-content: space-between;
    min-height: 1.48rem;
    padding: 0.18rem 0.42rem 0.18rem 0.5rem;
    border: 0;
    background: var(--app-surface-card);
    color: var(--app-color-link);
    font-size: 0.78rem;
    line-height: 1.12;
    text-align: left;
}

.page-stack.ui-page-stack .museum-directory-card .museum-grid.app-card-rail > .museum-card.favorite-card-shell{
    justify-content: center;
    padding: 0.82rem 0.82rem 2.35rem;
}

.page-stack.ui-page-stack .museum-directory-card .museum-grid.app-card-rail .museum-card-head-with-controls{
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    gap: 0;
}

.page-stack.ui-page-stack .museum-directory-card .museum-grid.app-card-rail .museum-card-head-with-controls > .museum-card-title{
    justify-self: stretch;
    margin: 0;
    text-align: left;
}

.page-stack.ui-page-stack .museum-directory-card .museum-grid.app-card-rail .museum-card-head-with-controls > .museum-card-controls-stack{
    position: absolute;
    inset: auto var(--app-standard-card-control-bottom) var(--app-standard-card-control-bottom) auto;
    right: var(--app-standard-card-control-bottom);
    bottom: var(--app-standard-card-control-bottom);
    align-self: auto;
    justify-self: end;
    width: auto;
    max-width: calc(100% - (var(--app-standard-card-control-bottom) * 2));
    min-width: max-content;
    gap: 0.32rem;
    z-index: 5;
}

.page-stack.ui-page-stack.museums-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-card.favorite-card-shell .museum-card-head-with-controls,
.page-stack.ui-page-stack .museum-directory-card .museum-grid.app-card-rail .museum-card-head-with-controls{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    justify-items: stretch;
    column-gap: 0;
    width: 100%;
    min-width: 0;
}

.page-stack.ui-page-stack.museums-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-card.favorite-card-shell .museum-card-head-with-controls > .museum-card-title,
.page-stack.ui-page-stack .museum-directory-card .museum-grid.app-card-rail .museum-card-head-with-controls > .museum-card-title{
    grid-column: 1;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

.page-stack.ui-page-stack.museums-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-card.favorite-card-shell .museum-card-head-with-controls > .museum-card-controls-stack,
.page-stack.ui-page-stack .museum-directory-card .museum-grid.app-card-rail .museum-card-head-with-controls > .museum-card-controls-stack{
    grid-column: 1;
    position: absolute;
    inset: auto var(--app-standard-card-control-bottom) var(--app-standard-card-control-bottom) auto;
    right: var(--app-standard-card-control-bottom);
    bottom: var(--app-standard-card-control-bottom);
    align-self: auto;
    justify-self: end;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    min-width: max-content;
    padding: 0;
    border-radius: 0;
    background: transparent;
    z-index: 5;
}

.page-stack.ui-page-stack.museums-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell .museum-card-head,
.page-stack.ui-page-stack.museums-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell .museum-card-head-with-controls{
    position: static;
}

.page-stack.ui-page-stack.museums-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell .museum-card-controls-stack{
    position: absolute;
    inset: auto var(--app-standard-card-control-bottom) var(--app-standard-card-control-bottom) auto;
    right: var(--app-standard-card-control-bottom);
    bottom: var(--app-standard-card-control-bottom);
    z-index: 6;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    justify-items: end;
    width: auto;
    max-width: calc(100% - (var(--app-standard-card-control-bottom) * 2));
    min-width: max-content;
    gap: var(--app-standard-card-control-gap, 0.28rem);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    pointer-events: auto;
}

.page-stack.ui-page-stack .app-card-rail > .museum-profile-card.favorite-card-shell,
.page-stack.ui-page-stack .app-card-rail > .museum-profile-card.home-museum-card,
.page-stack.ui-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell{
    display: grid;
    align-items: stretch;
    justify-items: stretch;
    padding: 0;
}

.page-stack.ui-page-stack .app-card-rail > .museum-profile-card .museum-card-main-link,
.page-stack.ui-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell .museum-card-main-link{
    display: grid;
    grid-template-rows: var(--app-standard-card-media-height, 10.6rem) minmax(0, 1fr);
    align-content: stretch;
    align-items: stretch;
    justify-items: stretch;
    min-height: 100%;
    padding: 0;
}

.page-stack.ui-page-stack .app-card-rail > .museum-profile-card .museum-card-head,
.page-stack.ui-page-stack .app-card-rail > .museum-profile-card .museum-card-head-with-controls,
.page-stack.ui-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell .museum-card-head,
.page-stack.ui-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell .museum-card-head-with-controls{
    display: contents;
}

.page-stack.ui-page-stack .app-card-rail > .museum-profile-card .museum-card-title,
.page-stack.ui-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell .museum-card-title,
.page-stack.ui-page-stack .museum-directory-card .museum-grid.app-card-rail .museum-card-head-with-controls > .museum-card-title,
.page-stack.ui-page-stack.museums-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-card.favorite-card-shell .museum-card-head-with-controls > .museum-card-title{
    grid-column: 1;
    grid-row: 1 / 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--app-standard-card-media-height, 10.6rem) minmax(0, 1fr);
    align-items: stretch;
    justify-items: stretch;
    width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
}

.page-stack.ui-page-stack .app-card-rail > .museum-profile-card .museum-card-directory-icon,
.page-stack.ui-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell .museum-card-directory-icon{
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    justify-self: stretch;
    width: 100%;
    min-width: 0;
    height: var(--app-standard-card-media-height, 10.6rem);
    min-height: var(--app-standard-card-media-height, 10.6rem);
    max-height: var(--app-standard-card-media-height, 10.6rem);
    border: 0;
    border-radius: 0;
    background: var(--app-card-media-placeholder-bg);
    box-shadow: none;
}

.page-stack.ui-page-stack .app-card-rail > .museum-profile-card .museum-card-directory-icon::before,
.page-stack.ui-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell .museum-card-directory-icon::before{
    width: clamp(3.15rem, 8vw, 4rem);
    height: clamp(3.15rem, 8vw, 4rem);
    background:
        var(--app-gradient-brand);
}

.page-stack.ui-page-stack .app-card-rail > .museum-profile-card .museum-card-directory-icon svg,
.page-stack.ui-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell .museum-card-directory-icon svg{
    width: clamp(1.72rem, 4.5vw, 2.12rem);
    height: clamp(1.72rem, 4.5vw, 2.12rem);
}

.page-stack.ui-page-stack .app-card-rail > .museum-profile-card .museum-card-title-link,
.page-stack.ui-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell .museum-card-title-link,
.page-stack.ui-page-stack .museum-directory-card .museum-grid.app-card-rail .museum-card-head-with-controls .museum-card-title-link{
    grid-column: 1;
    grid-row: 2;
    display: block;
    align-self: stretch;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    padding: var(--app-standard-card-copy-top, 0.72rem) var(--app-standard-card-copy-inline, 0.82rem) calc(var(--app-standard-card-control-bottom, 0.68rem) + 2.35rem);
    background: var(--app-surface-card);
    color: var(--app-color-link);
    font-size: var(--app-standard-card-title-size, 0.96rem);
    line-height: 1.16;
    text-align: left;
    white-space: normal;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.page-stack.ui-page-stack .app-card-rail > .museum-profile-card .museum-card-action-link,
.page-stack.ui-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell .museum-card-action-link{
    left: var(--app-standard-card-copy-inline, 0.82rem);
    right: calc(var(--app-standard-card-control-bottom, 0.68rem) + (var(--app-standard-card-control-size, 2rem) * 2) + var(--app-standard-card-control-gap, 0.28rem) + 0.74rem);
    bottom: calc(var(--app-standard-card-control-bottom, 0.68rem) + 0.08rem);
    color: var(--app-color-link);
    font-size: 0.88rem;
    font-weight: 650;
    text-transform: none;
    white-space: nowrap;
}


/* Shared alignment guard for repeated public/account card sections. */
.page-stack.ui-page-stack{
    --app-card-section-min-inline: 0;
}

.page-stack.ui-page-stack :is(
    .app-card-section,
    .app-card-section-body,
    .home-exhibitions-cards-section,
    .museum-directory-results-card,
    .museum-directory-carousel-section,
    .account-list-results-card,
    .museum-section-cards-shell,
    .user-state-section
){
    box-sizing: border-box;
    inline-size: 100%;
    width: 100%;
    max-inline-size: 100%;
    max-width: 100%;
    min-inline-size: var(--app-card-section-min-inline);
    min-width: 0;
    justify-self: stretch;
}

.page-stack.ui-page-stack :is(
    .app-standard-card,
    .museum-card,
    .museum-profile-card,
    .museum-exhibition-card,
    .social-channel-post-card,
    .account-favorite-item,
    .favorite-card-shell
) :is(
    .app-card-content,
    .app-card-copy,
    .museum-card-body,
    .museum-card-title,
    .museum-card-title-link,
    .museum-exhibition-content,
    .museum-exhibition-title,
    .social-channel-post-copy,
    .account-favorite-link
){
    max-inline-size: 100%;
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

/* Final cascade guard: museum cards must match content-card media/text shape. */
.page-stack.ui-page-stack .app-card-rail > .museum-profile-card.favorite-card-shell,
.page-stack.ui-page-stack .app-card-rail > .museum-profile-card.home-museum-card,
.page-stack.ui-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell,
.page-stack.ui-page-stack.museums-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-card.favorite-card-shell{
    position: relative;
    display: grid;
    align-items: stretch;
    justify-items: stretch;
    padding: 0;
    overflow: hidden;
}

.page-stack.ui-page-stack .app-card-rail > .museum-profile-card .museum-card-main-link,
.page-stack.ui-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell .museum-card-main-link,
.page-stack.ui-page-stack.museums-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-card.favorite-card-shell .museum-card-main-link{
    position: static;
    display: grid;
    grid-template-rows: var(--app-standard-card-media-height, 10.6rem) minmax(0, 1fr);
    align-content: stretch;
    align-items: stretch;
    justify-items: stretch;
    width: 100%;
    height: 100%;
    min-height: 100%;
    padding: 0;
    text-align: left;
}

.page-stack.ui-page-stack .app-card-rail > .museum-profile-card .museum-card-head,
.page-stack.ui-page-stack .app-card-rail > .museum-profile-card .museum-card-head-with-controls,
.page-stack.ui-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell .museum-card-head,
.page-stack.ui-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell .museum-card-head-with-controls,
.page-stack.ui-page-stack.museums-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-card.favorite-card-shell .museum-card-head,
.page-stack.ui-page-stack.museums-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-card.favorite-card-shell .museum-card-head-with-controls{
    display: contents;
}

.page-stack.ui-page-stack .app-card-rail > .museum-profile-card .museum-card-title,
.page-stack.ui-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell .museum-card-title,
.page-stack.ui-page-stack .museum-directory-card .museum-grid.app-card-rail .museum-card-head-with-controls > .museum-card-title,
.page-stack.ui-page-stack.museums-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-card.favorite-card-shell .museum-card-title,
.page-stack.ui-page-stack.museums-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail.mobile-carousel-is-scrollable > .museum-card.favorite-card-shell .museum-card-title{
    position: absolute;
    inset: 0;
    grid-column: 1;
    grid-row: 1 / 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--app-standard-card-media-height, 10.6rem) minmax(0, 1fr);
    align-items: stretch;
    justify-items: stretch;
    width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
}

.page-stack.ui-page-stack .app-card-rail > .museum-profile-card .museum-card-directory-icon,
.page-stack.ui-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell .museum-card-directory-icon,
.page-stack.ui-page-stack.museums-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-card.favorite-card-shell .museum-card-directory-icon,
.page-stack.ui-page-stack.museums-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail.mobile-carousel-is-scrollable > .museum-card.favorite-card-shell .museum-card-directory-icon{
    grid-column: 1;
    grid-row: 1;
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    align-self: stretch;
    justify-self: stretch;
    width: 100%;
    min-width: 0;
    height: var(--app-standard-card-media-height, 10.6rem);
    min-height: var(--app-standard-card-media-height, 10.6rem);
    max-height: var(--app-standard-card-media-height, 10.6rem);
    margin: 0;
    border: 0;
    border-radius: 0;
    background: var(--app-card-media-placeholder-bg);
    box-shadow: none;
}

.page-stack.ui-page-stack .app-card-rail > .museum-profile-card .museum-card-directory-icon svg,
.page-stack.ui-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell .museum-card-directory-icon svg,
.page-stack.ui-page-stack.museums-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-card.favorite-card-shell .museum-card-directory-icon svg{
    position: relative;
    z-index: 2;
    width: clamp(1.72rem, 4.5vw, 2.12rem);
    height: clamp(1.72rem, 4.5vw, 2.12rem);
    fill: none;
    stroke: currentColor;
}

.page-stack.ui-page-stack .app-card-rail > .museum-profile-card .museum-card-title-link,
.page-stack.ui-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell .museum-card-title-link,
.page-stack.ui-page-stack .museum-directory-card .museum-grid.app-card-rail .museum-card-head-with-controls .museum-card-title-link,
.page-stack.ui-page-stack.museums-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-card.favorite-card-shell .museum-card-title-link,
.page-stack.ui-page-stack.museums-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail.mobile-carousel-is-scrollable > .museum-card.favorite-card-shell .museum-card-title-link{
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    justify-self: stretch;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 100%;
    max-height: none;
    padding: var(--app-standard-card-copy-top, 0.72rem) var(--app-standard-card-copy-inline, 0.82rem) calc(var(--app-standard-card-control-bottom, 0.68rem) + 2.35rem);
    border: 0;
    border-radius: 0;
    background: var(--app-surface-card);
    box-shadow: none;
    color: var(--app-color-link);
    font-size: var(--app-standard-card-title-size, 0.96rem);
    line-height: 1.16;
    text-align: left;
    white-space: normal;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.page-stack.ui-page-stack .app-card-rail > .museum-profile-card .museum-card-action-link,
.page-stack.ui-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell .museum-card-action-link,
.page-stack.ui-page-stack.museums-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-card.favorite-card-shell .museum-card-action-link{
    position: absolute;
    left: var(--app-standard-card-copy-inline, 0.82rem);
    right: calc(var(--app-standard-card-control-bottom, 0.68rem) + (var(--app-standard-card-control-size, 2rem) * 2) + var(--app-standard-card-control-gap, 0.28rem) + 0.74rem);
    bottom: calc(var(--app-standard-card-control-bottom, 0.68rem) + 0.08rem);
    z-index: 5;
    justify-content: flex-start;
    justify-self: start;
    width: auto;
    max-width: none;
    color: var(--app-color-link);
    font-size: 0.88rem;
    font-weight: 650;
    text-transform: none;
    white-space: nowrap;
}

.page-stack.ui-page-stack .app-card-rail > .museum-profile-card .museum-card-controls-stack,
.page-stack.ui-page-stack .museum-directory-card .museum-grid.app-card-rail .museum-card-controls-stack,
.page-stack.ui-page-stack.museums-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-card.favorite-card-shell .museum-card-controls-stack{
    position: absolute;
    right: var(--app-standard-card-control-bottom, 0.68rem);
    bottom: var(--app-standard-card-control-bottom, 0.68rem);
    z-index: 6;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    justify-items: end;
    width: auto;
    max-width: calc(100% - (var(--app-standard-card-control-bottom, 0.68rem) * 2));
    gap: var(--app-standard-card-control-gap, 0.28rem);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    pointer-events: auto;
}
/* Final cascade guard: every carousel/list card uses one outer edge recipe. */
.page-stack.ui-page-stack .app-card-rail > :is(
    .app-standard-card,
    .museum-card,
    .museum-exhibition-card,
    .museum-exhibition-item,
    .museum-profile-card,
    .social-channel-post-card,
    .social-channel-trending-tile,
    .account-favorite-item,
    .dashboard-menu-card,
    .home-more-card
):not(.home-hero-point){
    border: 0;
    outline: 0;
    box-shadow: var(--app-shadow-card-resting);
    transition:
        box-shadow 180ms ease;
}

.page-stack.ui-page-stack .app-card-rail > :is(
    .app-standard-card,
    .museum-card,
    .museum-exhibition-card,
    .museum-exhibition-item,
    .museum-profile-card,
    .social-channel-post-card,
    .social-channel-trending-tile,
    .account-favorite-item,
    .dashboard-menu-card,
    .home-more-card
):not(.home-hero-point):is(:hover, :has(:focus-visible)){
    border-color: transparent;
    outline-color: transparent;
    box-shadow: var(--app-shadow-raised);
}
/* Final specificity companion for legacy multi-class card stacks. */
.page-stack.ui-page-stack .app-card-rail > :is(
    .home-exhibition-card.app-standard-card,
    .home-more-card.app-standard-card,
    .home-social-post-card.app-standard-card,
    .social-channel-post-card.app-standard-card,
    .museum-profile-card.favorite-card-shell,
    .museum-profile-card.home-museum-card
):not(.home-hero-point),
.page-stack.ui-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > :is(
    .museum-profile-card.favorite-card-shell,
    .museum-card.favorite-card-shell
){
    border: 0;
    outline: 0;
    box-shadow: var(--app-shadow-card-resting);
}

.page-stack.ui-page-stack .app-card-rail > :is(
    .home-exhibition-card.app-standard-card,
    .home-more-card.app-standard-card,
    .home-social-post-card.app-standard-card,
    .social-channel-post-card.app-standard-card,
    .museum-profile-card.favorite-card-shell,
    .museum-profile-card.home-museum-card
):not(.home-hero-point):is(:hover, :has(:focus-visible)),
.page-stack.ui-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > :is(
    .museum-profile-card.favorite-card-shell,
    .museum-card.favorite-card-shell
):is(:hover, :has(:focus-visible)){
    border-color: transparent;
    outline-color: transparent;
    box-shadow: var(--app-shadow-raised);
}

/* Final card-family parity guard. Exhibition,
YouTube,
and Instagram cards are
 * the canonical repeated-card shape: one rounded outer shell,
one media band,
* one unframed copy band,
and one hover recipe. Museum,
News,
and More cards
 * keep their data hooks but consume the same visual contract here.
 */
.page-stack.ui-page-stack :is(
    .app-card-rail,
    .museum-grid,
    .home-exhibition-grid
) > :is(
    .home-feed-card,
    .home-more-card,
    .museum-profile-card.home-museum-card,
    .museum-profile-card.favorite-card-shell,
    .museum-card.favorite-card-shell
):not(.home-hero-point){
    border-radius: var(--app-standard-card-radius, 14px);
    background: var(--app-color-card-background);
}

.page-stack.ui-page-stack :is(
    .app-card-rail,
    .museum-grid,
    .home-exhibition-grid
) > :is(
    .home-feed-card,
    .home-more-card
):not(.home-hero-point){
    display: grid;
    grid-template-rows: var(--app-standard-card-media-height, 10.6rem) minmax(0, 1fr);
    align-content: stretch;
    align-items: stretch;
}

.page-stack.ui-page-stack :is(
    .app-card-rail,
    .museum-grid,
    .home-exhibition-grid
) > .home-feed-card:not(.home-hero-point) > :is(.home-exhibition-copy, .museum-exhibition-content),
.page-stack.ui-page-stack :is(
    .app-card-rail,
    .museum-grid,
    .home-exhibition-grid
) > .home-more-card:not(.home-hero-point) .home-more-card-statement{
    grid-row: 2;
    align-self: stretch;
    min-height: 0;
    height: 100%;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.page-stack.ui-page-stack :is(
    .app-card-rail,
    .museum-grid,
    .home-exhibition-grid
) > .home-more-card:not(.home-hero-point) .home-more-card-link{
    display: grid;
    grid-row: 1 / -1;
    grid-template-rows: var(--app-standard-card-media-height, 10.6rem) minmax(0, 1fr);
    min-height: 100%;
    height: 100%;
    background: transparent;
}

.page-stack.ui-page-stack :is(
    .app-card-rail,
    .museum-grid,
    .home-exhibition-grid
) > .home-more-card:not(.home-hero-point) .home-more-card-link::before,
.page-stack.ui-page-stack :is(
    .app-card-rail,
    .museum-grid,
    .home-exhibition-grid
) > .home-more-card:not(.home-hero-point) .home-more-card-link::after{
    display: none;
}

.page-stack.ui-page-stack :is(
    .app-card-rail,
    .museum-grid,
    .home-exhibition-grid
) > .home-more-card:not(.home-hero-point) .home-more-card-orb{
    grid-row: 1;
    width: 100%;
    height: var(--app-standard-card-media-height, 10.6rem);
    min-height: var(--app-standard-card-media-height, 10.6rem);
    max-height: var(--app-standard-card-media-height, 10.6rem);
    background: var(--app-card-media-placeholder-bg);
    box-shadow: none;
}

.page-stack.ui-page-stack :is(
    .app-card-rail,
    .museum-grid,
    .home-exhibition-grid
) > .home-more-card:not(.home-hero-point) .home-more-card-copy{
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--app-color-link);
    font-size: var(--app-standard-card-title-size, 0.96rem);
    font-weight: 700;
    line-height: 1.2;
}

.page-stack.ui-page-stack :is(
    .app-card-rail,
    .museum-grid,
    .home-exhibition-grid
) > .home-more-card:not(.home-hero-point) .home-more-card-cta{
    position: absolute;
    left: var(--app-standard-card-copy-inline, 0.82rem);
    bottom: calc(var(--app-standard-card-control-bottom, 0.68rem) + 0.08rem);
    z-index: 5;
    margin: 0;
}

.page-stack.ui-page-stack :is(
    .app-card-rail,
    .museum-grid,
    .home-exhibition-grid
) > :is(
    .museum-profile-card.home-museum-card,
    .museum-profile-card.favorite-card-shell,
    .museum-card.favorite-card-shell
):not(.home-hero-point) .museum-card-title-link{
    background: transparent;
    box-shadow: none;
}

.page-stack.ui-page-stack :is(
    .app-card-rail,
    .museum-grid,
    .home-exhibition-grid
) > :is(
    .museum-profile-card.home-museum-card,
    .museum-profile-card.favorite-card-shell,
    .museum-card.favorite-card-shell
):not(.home-hero-point) :is(
    .museum-card-head,
    .museum-card-title,
    .museum-card-title-link
){
    justify-content: flex-start;
    text-align: left;
}

.page-stack.ui-page-stack.museums-page-stack .museum-directory-card :is(
    .museum-grid,
    .app-card-rail
) > :is(
    .museum-profile-card.favorite-card-shell,
    .museum-card.favorite-card-shell
):not(.home-hero-point){
    border-radius: var(--app-standard-card-radius, 14px);
    background:
        var(--app-gradient-brand);
}

.page-stack.ui-page-stack.museums-page-stack .museum-directory-card :is(
    .museum-grid,
    .app-card-rail
) > :is(
    .museum-profile-card.favorite-card-shell,
    .museum-card.favorite-card-shell
):not(.home-hero-point) .museum-card-title-link{
    background: transparent;
    box-shadow: none;
}

.page-stack.ui-page-stack.museums-page-stack .museum-directory-card :is(
    .museum-grid,
    .app-card-rail
) > :is(
    .museum-profile-card.favorite-card-shell,
    .museum-card.favorite-card-shell
):not(.home-hero-point) :is(
    .museum-card-head,
    .museum-card-title,
    .museum-card-title-link
){
    justify-content: flex-start;
    text-align: left;
}


/* Shared content-card anatomy: media, copy, then one bottom action band. */
.page-stack.ui-page-stack .app-standard-card > .app-card-control-band,
.page-stack.ui-page-stack .museum-profile-card .museum-card-title > .app-card-control-band{
    position: relative;
    inset: auto;
    z-index: 7;
    display: flex;
    flex: 0 0 auto;
    order: 3;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0.55rem;
    width: calc(100% - 4px);
    min-width: 0;
    min-height: var(--app-standard-card-action-height, 3rem);
    margin: auto 2px 0;
    padding:
        var(--app-standard-card-action-padding-block, 0.28rem)
        var(--app-standard-card-action-padding-inline, 0.68rem);
    border: 0;
    box-sizing: border-box;
}

.page-stack.ui-page-stack .app-standard-card > :is(
    .museum-exhibition-image-link,
    .home-exhibition-media,
    .social-channel-post-media,
    .account-favorite-image-link,
    .social-channel-trending-thumb
){
    order: 1;
}

.page-stack.ui-page-stack .app-standard-card > :is(
    .museum-exhibition-content,
    .home-exhibition-copy,
    .app-card-content,
    .account-favorite-link,
    .social-channel-post-copy
){
    display: flex;
    flex-direction: column;
    order: 2;
}

html body .page-stack.ui-page-stack .app-card-rail > .museum-profile-card.app-standard-card .museum-card-title{
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

html body .page-stack.ui-page-stack .app-card-rail > .museum-profile-card.app-standard-card .museum-card-title > .museum-card-directory-icon{
    order: 1;
}

html body .page-stack.ui-page-stack .app-card-rail > .museum-profile-card.app-standard-card .museum-card-title > .app-card-control-band{
    order: 3;
    grid-row: 3;
    flex-direction: row;
}

html body .page-stack.ui-page-stack .app-card-rail > .museum-profile-card.app-standard-card .app-card-control-band > .app-card-control-group{
    order: 2;
    margin: 0 0 0 auto;
}

html body .page-stack.ui-page-stack .app-card-rail > .museum-profile-card.app-standard-card .app-card-control-band > .app-card-action-link{
    position: static;
    inset: auto;
    order: 1;
    margin: 0;
}

html body .page-stack.ui-page-stack .app-card-rail > .museum-profile-card.app-standard-card .app-card-control-band .museum-card-controls-stack{
    position: static;
    inset: auto;
    order: 0;
    margin: 0;
    transform: none;
}

html body .page-stack.ui-page-stack .app-card-rail > .museum-profile-card.app-standard-card .app-card-control-band .museum-card-controls-stack > :is(
    .favorite-toggle-btn-leading,
    .museum-alert-toggle-btn-leading
){
    position: static;
    inset: auto;
    margin: 0;
    transform: none;
}

html body .page-stack.ui-page-stack .app-card-rail > .museum-profile-card.app-standard-card .museum-card-title > .museum-card-title-link{
    order: 2;
    grid-row: 2;
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    padding-bottom: var(--app-standard-card-copy-bottom, 0.82rem);
}

html body .page-stack.ui-page-stack .app-card-rail > .museum-profile-card.app-standard-card.museum-profile-card.app-standard-card .museum-card-title{
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

html body .page-stack.ui-page-stack .app-card-rail > .museum-profile-card.app-standard-card.museum-profile-card.app-standard-card .museum-card-title > .museum-card-directory-icon{
    order: 1;
}

html body .page-stack.ui-page-stack .app-card-rail > .museum-profile-card.app-standard-card.museum-profile-card.app-standard-card .museum-card-title > .app-card-control-band{
    order: 3;
    grid-row: 3;
}

html body .page-stack.ui-page-stack .app-card-rail > .museum-profile-card.app-standard-card.museum-profile-card.app-standard-card .museum-card-title > .museum-card-title-link{
    order: 2;
    grid-row: 2;
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    padding-bottom: var(--app-standard-card-copy-bottom, 0.82rem);
}

html body .page-stack.ui-page-stack.museums-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell.app-standard-card .museum-card-title{
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

html body .page-stack.ui-page-stack.museums-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell.app-standard-card .museum-card-title > .museum-card-directory-icon{
    order: 1;
}

html body .page-stack.ui-page-stack.museums-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell.app-standard-card .museum-card-title > .app-card-control-band{
    order: 3;
    grid-row: 3;
}

html body .page-stack.ui-page-stack.museums-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell.app-standard-card .museum-card-title > .museum-card-title-link{
    order: 2;
    grid-row: 2;
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    padding-bottom: var(--app-standard-card-copy-bottom, 0.82rem);
}

html body .page-stack.ui-page-stack.museums-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell.app-standard-card .app-card-control-band .museum-card-controls-stack,
html body .page-stack.ui-page-stack.museums-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell.app-standard-card .app-card-control-band .museum-card-controls-stack > :is(.favorite-toggle-btn-leading, .museum-alert-toggle-btn-leading){
    position: static;
    inset: auto;
    margin: 0;
    transform: none;
}

.page-stack.ui-page-stack .app-card-control-group{
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-start;
    gap: var(--app-standard-card-control-gap, 0.28rem);
    min-width: 0;
}

.page-stack.ui-page-stack .app-card-control-band :is(
    .favorite-toggle-btn-corner,
    .favorite-toggle-btn-leading,
    .museum-alert-toggle-btn-corner,
    .museum-alert-toggle-btn-leading
),
.page-stack.ui-page-stack .app-card-control-band .museum-card-controls-stack{
    position: static;
    inset: auto;
    transform: none;
    margin: 0;
}

html body .page-stack.ui-page-stack .app-card-rail > .app-standard-card > .app-card-control-band{
    flex-direction: row;
}

html body .page-stack.ui-page-stack .app-card-rail > .app-standard-card > .app-card-control-band > .app-card-control-group{
    order: 2;
    margin: 0 0 0 auto;
}

html body .page-stack.ui-page-stack .app-card-rail > .app-standard-card > .app-card-control-band > .app-card-action-link{
    position: static;
    inset: auto;
    order: 1;
    margin: 0;
}

html body .page-stack.ui-page-stack .app-card-rail > .app-standard-card > .app-card-control-band > .app-card-control-group > :is(
    .favorite-toggle-btn-corner,
    .favorite-toggle-btn-leading,
    .museum-alert-toggle-btn-corner,
    .museum-alert-toggle-btn-leading
){
    position: static;
    inset: auto;
    margin: 0;
    transform: none;
}

.page-stack.ui-page-stack .app-card-control-band .museum-card-controls-stack{
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--app-standard-card-control-gap, 0.28rem);
}

.page-stack.ui-page-stack .app-card-control-band .app-card-action-link{
    position: static;
    inset: auto;
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    max-width: min(68%, 13rem);
    min-height: 2.35rem;
    margin: 0;
    padding: 0.38rem 0.72rem;
    justify-content: flex-start;
}

.page-stack.ui-page-stack .app-standard-card :is(
    .museum-exhibition-content,
    .home-exhibition-copy,
    .app-card-content
){
    position: relative;
}

.page-stack.ui-page-stack .app-card-control-pending{
    visibility: hidden;
}


/* Keep destination links at the left edge and state controls at the right. */
html body .page-stack.ui-page-stack .app-card-rail .app-standard-card .app-card-control-band{
    overflow: visible;
}

html body .page-stack.ui-page-stack .app-card-rail .app-standard-card .app-card-control-band > .app-card-action-link{
    position: static;
    inset: auto;
    order: 1;
    flex: 0 1 auto;
    max-width: 100%;
    margin: 0;
}

html body .page-stack.ui-page-stack .app-card-rail .app-standard-card .app-card-control-band > .app-card-control-group{
    order: 2;
    flex: 0 0 auto;
    width: auto;
    min-width: max-content;
    max-width: none;
    margin: 0 0 0 auto;
    overflow: visible;
}

html body .page-stack.ui-page-stack .app-card-rail .app-standard-card .app-card-control-band .museum-card-controls-stack{
    position: static;
    inset: auto;
    display: inline-flex;
    flex: 0 0 auto;
    width: auto;
    min-width: max-content;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: visible;
    transform: none;
}

html body .page-stack.ui-page-stack .app-card-rail .app-standard-card .app-card-control-band :is(
    .favorite-toggle-btn-corner,
    .favorite-toggle-btn-leading,
    .museum-alert-toggle-btn-corner,
    .museum-alert-toggle-btn-leading
){
    position: static;
    inset: auto;
    flex: 0 0 2.35rem;
    width: 2.35rem;
    min-width: 2.35rem;
    max-width: 2.35rem;
    height: 2.35rem;
    min-height: 2.35rem;
    max-height: 2.35rem;
    margin: 0;
    padding: 0.06rem;
    overflow: visible;
    transform: none;
}

html body .page-stack.ui-page-stack .app-card-rail > .museum-profile-card.app-standard-card.museum-profile-card.app-standard-card .app-card-control-band > .app-card-action-link,
html body .page-stack.ui-page-stack.museums-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell.app-standard-card .app-card-control-band > .app-card-action-link{
    position: static;
    inset: auto;
    order: 1;
    margin: 0;
}

html body .page-stack.ui-page-stack .app-card-rail > .museum-profile-card.app-standard-card.museum-profile-card.app-standard-card .app-card-control-band > .app-card-control-group,
html body .page-stack.ui-page-stack.museums-page-stack .museum-directory-card .museum-directory-carousel-section .museum-grid.app-card-rail > .museum-profile-card.favorite-card-shell.app-standard-card .app-card-control-band > .app-card-control-group{
    order: 2;
    margin: 0 0 0 auto;
}

/* Destination cards use the same media -> text -> bottom action band sequence as
 * repeated content cards, without save/alert controls. */
html body .page-stack.ui-page-stack .app-card-rail > .home-more-card.app-standard-card .home-more-card-link{
    display: grid;
    grid-template-rows:
        var(--app-standard-card-media-height, 10.6rem)
        minmax(0, 1fr)
        var(--app-standard-card-action-height, 3rem);
    align-content: stretch;
    align-items: stretch;
}

html body .page-stack.ui-page-stack .app-card-rail > .home-more-card.app-standard-card .home-more-card-orb{
    grid-row: 1;
}

html body .page-stack.ui-page-stack .app-card-rail > .home-more-card.app-standard-card .home-more-card-action-band{
    position: relative;
    inset: auto;
    grid-row: 3;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: calc(100% - 4px);
    min-width: 0;
    min-height: var(--app-standard-card-action-height, 3rem);
    margin: 0 2px;
    padding:
        var(--app-standard-card-action-padding-block, 0.28rem)
        var(--app-standard-card-action-padding-inline, 0.68rem);
    border: 0;
    box-sizing: border-box;
}

html body .page-stack.ui-page-stack .app-card-rail > .home-more-card.app-standard-card .home-more-card-action-band > .home-more-card-cta{
    position: static;
    inset: auto;
    left: auto;
    right: auto;
    bottom: auto;
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
    min-height: 2.35rem;
    margin: 0;
    padding: 0.38rem 0.72rem;
}

html body .page-stack.ui-page-stack .app-card-rail > .home-more-card.app-standard-card .home-more-card-statement{
    grid-row: 2;
    height: 100%;
    min-height: 0;
    padding: var(--app-standard-card-copy-top, 0.72rem) var(--app-standard-card-copy-inline, 0.82rem) var(--app-standard-card-copy-bottom, 0.9rem);
}


/* Definitive repeated-card typography contract. Keep the action band uniform,
* then give each lower-copy role a clear,
readable visual hierarchy. */
html body #mainContent .page-stack.ui-page-stack :is(.app-card-rail, .app-landing-card-grid) > .app-standard-card{
    --app-card-band-text-size: 0.9rem;
    --app-card-date-text-size: 0.76rem;
    --app-card-source-text-size: 0.76rem;
    --app-card-title-text-size: max(
        var(--app-card-title-size),
        calc(var(--app-editorial-reading-size) + 0.18rem)
    );
    --app-card-title-line-height: 1.2;
    --app-card-description-text-size: clamp(0.82rem, 0.79rem + 0.12vw, 0.9rem);
    --app-card-description-line-height: 1.45;
    font-family: var(--app-font-family-heading);
}


/* Featured cards retain their larger editorial heading at wide viewports. */
@media (min-width: 981px) {
    html body #mainContent .page-stack.ui-page-stack .app-card-rail > .app-standard-card.app-featured-card{
        --app-card-title-text-size: clamp(
            var(--app-section-heading-size),
            1rem + 0.72vw,
            var(--app-type-h1-size)
        );
        --app-card-title-line-height: 1.18;
    }
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail > .app-standard-card .app-card-control-band .app-card-action-link{
    color: var(--app-color-primary-action);
    font-family: var(--app-font-family-heading);
    font-size: var(--app-card-band-text-size);
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail > .home-more-card.app-standard-card .home-more-card-action-band > .home-more-card-cta{
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
    white-space: nowrap;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail > .app-standard-card :is(
    .museum-exhibition-content,
    .home-exhibition-copy,
    .social-channel-post-copy,
    .social-channel-trending-copy,
    .app-card-content,
    .account-favorite-link,
    .home-more-card-statement
){
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail > .app-standard-card :is(
    .museum-exhibition-date,
    .social-channel-post-date,
    .social-channel-trending-date,
    .app-card-date
){
    display: block;
    flex: 0 0 auto;
    width: 100%;
    color: var(--app-color-secondary-text);
    font-family: var(--app-font-family-base);
    font-size: var(--app-card-date-text-size);
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: 0.01em;
    text-align: left;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail > .app-standard-card :is(
    .app-card-museum-name,
    .app-card-source-name
){
    display: block;
    flex: 0 0 auto;
    width: 100%;
    color: var(--app-color-primary-action);
    font-family: var(--app-font-family-base);
    font-size: var(--app-card-source-text-size);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    text-align: left;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail > .app-standard-card a.app-card-museum-name{
    text-decoration: none;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail > .app-standard-card :is(
    .museum-exhibition-title,
    .museum-card-title,
    .museum-card-title-link,
    .social-channel-post-title,
    .social-channel-trending-name,
    .app-card-title
){
    display: -webkit-box;
    flex: 0 0 auto;
    -webkit-box-orient: vertical;
    width: 100%;
    color: var(--app-color-primary-text);
    font-family: var(--app-font-family-display);
    font-size: var(--app-card-title-text-size);
    font-weight: var(--app-type-heading-strong-weight);
    line-height: var(--app-card-title-line-height);
    letter-spacing: -0.01em;
    text-align: left;
}

html body #mainContent .page-stack.ui-page-stack :is(.app-card-rail, .app-landing-card-grid) > .app-standard-card :is(
    .museum-exhibition-card-copy,
    .museum-exhibition-description-shell,
    .social-channel-post-description,
    .social-channel-trending-description,
    .app-card-copy,
    .content-empty-card-copy,
    .dashboard-menu-copy
){
    flex: 0 0 auto;
    width: 100%;
    min-height: calc(var(--app-card-description-line-height) * 1em);
    color: var(--app-text-color-body);
    font-family: var(--app-editorial-reading-font-family);
    font-size: var(--app-card-description-text-size);
    font-weight: var(--app-editorial-reading-weight);
    line-height: var(--app-card-description-line-height);
    letter-spacing: 0;
    text-align: left;
}

/* Card descriptions are primary reading copy, not secondary metadata. Keep
   this color contract consistent across editorial, social, museum, account,
   workspace, empty-state, and Help card surfaces. */
html body #mainContent .page-stack.ui-page-stack :is(
    .app-standard-card,
    .app-content-card,
    .museum-exhibition-card,
    .museum-exhibition-item,
    .social-channel-post-card,
    .social-channel-trending-tile,
    .account-favorite-item,
    .dashboard-menu-card,
    .app-workspace-menu-option,
    .account-section-menu-card,
    .help-topic-card
) :is(
    .museum-exhibition-card-copy,
    .museum-exhibition-description-shell,
    .social-channel-post-description,
    .social-channel-trending-description,
    .app-card-copy,
    .content-empty-card-copy,
    .dashboard-menu-copy,
    .account-section-menu-help,
    .app-workspace-menu-option-copy small,
    .help-topic-summary
){
    color: var(--app-color-primary-text);
    line-height: var(--app-card-description-line-height, 1.42);
    opacity: 1;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail
> .app-standard-card.app-horizontal-card :is(
    .museum-exhibition-card-copy,
    .museum-exhibition-description-shell,
    .social-channel-post-description,
    .social-channel-trending-description,
    .app-card-copy
){
    min-height: calc(var(--app-card-description-line-height) * 2em);
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail > .home-more-card.app-standard-card .home-more-card-copy,
html body #mainContent .page-stack.ui-page-stack .home-top-stories-empty-grid.app-card-rail > .app-standard-card .home-top-stories-empty-copy{
    width: 100%;
    margin: 0;
    color: var(--app-color-primary-text);
    font-family: var(--app-font-family-base);
    font-size: var(--app-card-title-text-size);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    text-align: left;
    text-shadow: none;
}

html body #mainContent .page-stack.ui-page-stack .home-top-stories-empty-grid.app-card-rail > .app-standard-card > :is(
    .museum-exhibition-content,
    .home-exhibition-copy
){
    justify-content: flex-start;
}

/* Controls now live in their own band,
so lower copy no longer needs the old
   corner-control reserve that created a large empty footer. */
html body #mainContent .page-stack.ui-page-stack .app-card-rail > .app-standard-card > :is(
    .museum-exhibition-content,
    .home-exhibition-copy,
    .app-card-content
){
    padding-right: var(--app-standard-card-copy-inline, 0.82rem);
    padding-bottom: 0.65rem;
}

/*
 * Home social and social channel surfaces
 * Moved from utility-overrides.css so this behavior has one functional owner.
 */

.home-hero-point-icon{

    display: inline-grid;

    place-items: center;

    flex: 0 0 auto;

    width: 1.65rem;

    height: 1.65rem;

    border: 1px solid var(--app-overlay-accent-medium);

    border-radius: 10px;

    background: var(--app-gradient-brand);

    color: var(--app-color-link);

    box-shadow:

        var(--shadow-soft);

}



.home-hero-point-icon svg{

    width: 0.92rem;

    height: 0.92rem;

    fill: none;

    stroke: currentColor;

    stroke-width: var(--app-icon-stroke-width-standard);

    stroke-linecap: round;

    stroke-linejoin: round;

}



.social-home-title-row,
.social-home-feed-title{

    min-width: 0;

}



.home-social-main-link{

    display: inline-flex;

    align-items: center;

    gap: 0.48rem;

    min-width: 0;

    color: inherit;

    text-decoration: none;

}



.home-social-main-icon{

    width: 1.2em;

    height: 1.2em;

    flex: 0 0 1.2em;

    fill: none;

    stroke: currentColor;

    stroke-width: 2.1;

    stroke-linecap: round;

    stroke-linejoin: round;

}



.home-social-main-link:hover,
.home-social-main-link:focus-visible{

    color: var(--app-color-link);

    text-decoration: none;

}



.social-home-feed-title{

    display: inline-flex;

    align-items: center;

    gap: 0.55rem;

    width: 100%;

}



.social-channel-panel{

    grid-template-columns: minmax(0, 1fr);

    justify-items: stretch;

    align-items: stretch;

}



.social-channel-intro{

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

    width: 100%;

    min-width: 0;

    box-sizing: border-box;

}



.ui-note-panel.social-channel-intro{

    grid-column: 1 / -1;

    justify-self: stretch;

    align-self: stretch;

    display: flex;

    width: 100%;

    max-width: none;

    inline-size: 100%;

    min-inline-size: 0;

    box-sizing: border-box;

}



.social-channel-copy{

    display: grid;

    gap: 0.6rem;

    flex: 1 1 100%;

    width: 100%;

    max-width: 100%;

    min-width: 0;

}

.social-channel-connect-widget{
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--app-control-gap);
    box-sizing: border-box;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    min-height: var(--app-control-min-height);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--app-text-color-body);
}

.social-channel-connect-section{
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.social-channel-connect-copy{
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.social-channel-connect-copy{
    align-items: flex-start;
    flex-direction: column;
    line-height: 1.15;
}

.social-channel-connect-label{
    color: inherit;
    font-size: 0.78rem;
    font-weight: 700;
}

.social-channel-connect-handle,
.social-channel-connect-meta,
.social-channel-connect-meta span{
    color: var(--app-color-primary-action);
    font-size: 0.78rem;
    font-weight: 400;
}

.social-channel-connect-widget .social-channel-connect-link svg{
    display: block;
    flex: 0 0 var(--app-state-action-icon-size);
    width: var(--app-state-action-icon-size);
    height: var(--app-state-action-icon-size);
    fill: currentColor;
    stroke: none;
}

/* Destination actions use the shared outline sprite contract; social-channel
   brand marks remain filled through the rule above. */
.social-channel-connect-widget .social-channel-connect-link svg.ui-legend-icon{
    fill: none;
    stroke: currentColor;
    stroke-width: var(--app-icon-stroke-width-standard);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.social-channel-connect-widget-instagram .social-channel-connect-link svg{
    color: var(--app-color-primary-action);
}

.social-channel-connect-widget-youtube .social-channel-connect-link svg{
    color: var(--app-color-danger);
}

.social-channel-connect-widget .social-channel-connect-link{
    gap: var(--app-control-gap);
    white-space: nowrap;
}

.social-channel-connect-widget-youtube .social-channel-youtube-subscribe-link{
    width: fit-content;
    max-width: 100%;
    min-height: var(--app-control-min-height);
    padding-block: 0.34rem;
    border-color: transparent;
    background: transparent;
    color: var(--app-color-primary-action);
    box-shadow: none;
    filter: none;
    opacity: 1;
}

.social-channel-connect-widget-youtube .social-channel-youtube-subscribe-link:is(:hover, :focus-visible){
    border-color: transparent;
    background: var(--app-interactive-hover-surface);
    color: var(--app-interactive-hover-text);
}

.social-channel-connect-widget-instagram .social-channel-connect-link{
    width: fit-content;
    max-width: 100%;
    min-height: var(--app-control-min-height);
    padding-block: 0.34rem;
}

.social-channel-copy .home-hero-title,
.social-channel-copy .home-hero-lead{

    width: 100%;

    max-width: 100%;

    min-width: 0;

    overflow-wrap: break-word;

    word-break: normal;

    white-space: normal;

}



.social-channel-actions{

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    align-items: center;

    gap: 0.55rem;

    margin-top: 0;

    width: 100%;

}



.social-channel-actions{

    margin-top: 0;

}

.social-channel-page-actions,
.social-channel-page-actions .social-channel-actions,
.social-channel-page-actions .home-action-list{
    justify-self: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.social-channel-page-actions{
    display: grid;
    gap: var(--app-component-flow-gap);
}

.social-channel-home-actions{
    --app-action-list-wrap: nowrap;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.social-channel-home-actions > .social-channel-connect-section{
    flex: 0 1 auto;
    width: auto;
}

.social-channel-home-actions > .home-action-list{
    flex: 0 0 auto;
    width: auto;
}

.social-channel-home-actions .social-channel-connect-widget{
    flex-wrap: nowrap;
}

.social-channel-home-actions > .social-channel-connect-section,
.social-channel-home-actions .social-channel-connect-widget,
.social-channel-home-actions .social-channel-connect-link{
    justify-content: flex-start;
    text-align: left;
}

.social-channel-home-actions .social-channel-connect-widget,
.social-channel-home-actions .social-channel-connect-link{
    margin-inline: 0 auto;
}

@media (max-width: 760px){
    .social-channel-home-actions{
        --app-action-list-wrap: wrap;
        display: grid;
    }

    .social-channel-home-actions > .social-channel-connect-section,
    .social-channel-home-actions > .home-action-list{
        width: 100%;
    }

}

.social-channel-page-actions .social-channel-actions{
    grid-template-columns: minmax(0, 1fr);
}

.home-more-action.social-channel-action{

    border-color: var(--app-overlay-accent-medium);

    background:
        var(--app-gradient-brand);

    box-shadow:
        var(--shadow-soft);

}



.social-official-link{

    white-space: nowrap;

}



.social-channel-action:not(.home-action-list){

    display: grid;

    grid-template-columns: minmax(0, 1fr);

    align-items: start;

    justify-content: stretch;

    gap: 0.42rem;

    width: 100%;

    min-width: 0;

    min-height: 100%;

    padding: 0.72rem 0.82rem;

    border: 0;

    border-radius: 999px;

    background: var(--app-overlay-accent-subtle);

    color: var(--app-color-link);

    box-shadow:

        var(--shadow-soft);

    cursor: pointer;

    text-align: left;

    text-decoration: none;

    white-space: normal;

    font: inherit;

}



.social-channel-action:not(.home-action-list):hover,
.social-channel-action:not(.home-action-list):focus-visible{

    border-color: transparent;

    background: var(--app-overlay-accent-soft);

    color: var(--app-color-link);

    transform: translateY(-1px);

}



.home-youtube-videos-section{

    display: block;

    grid-column: 1 / -1;

    box-sizing: border-box;

    width: 100%;

    max-width: 100%;

    padding: calc(var(--app-surface-padding, 1rem) + var(--app-surface-legend-clearance, 1.4rem) - 0.1rem) 0.75rem 0.75rem;

    border: 1px solid var(--app-overlay-accent-medium);

    border-radius: var(--app-control-radius, 8px);

    background:

        var(--app-gradient-muted);

    box-shadow: var(--shadow-soft);

}



.home-youtube-videos-section{
    padding: 0;

    border: 0;

    background: transparent;

    box-shadow: none;

}

.dashboard-page-stack .home-feed-section > .home-social-actions-section,
.dashboard-page-stack .home-feed-section > .home-youtube-videos-section{

    justify-self: stretch;

    align-self: stretch;

    width: 100%;

}



.home-exhibition-grid:not([data-mobile-carousel]){

    display: grid;

    grid-template-columns: repeat(5, minmax(0, 1fr));

    gap: 0.78rem;

    align-items: stretch;

    justify-items: stretch;

    width: 100%;

    max-width: 100%;

    margin: 0;

    padding: 0;

}



.home-exhibitions-section > .home-exhibitions-cards-section{

    display: grid;

    justify-self: center;

    width: min(100%, 92rem);

    margin-inline: auto;

}



.home-exhibitions-cards-section{

    display: grid;

    justify-items: center;

    width: 100%;

    max-width: 100%;

    min-width: 0;

}



.home-exhibitions-section .home-exhibition-card{

    width: 100%;

    max-width: none;

    min-width: 0;

}



.home-exhibition-card{

    position: relative;

    display: flex;

    flex-direction: column;

    height: 100%;

    width: 100%;

    max-width: none;

    overflow: hidden;

}

.home-more-card{

    isolation: isolate;
    min-width: 0;

}

.home-more-card .home-more-card-link{

    position: relative;

    z-index: 1;

    display: grid;

    grid-template-rows: var(--app-standard-card-media-height, 10.6rem) minmax(0, 1fr);

    align-content: stretch;

    align-items: stretch;

    gap: 0;

    min-height: 100%;

    height: 100%;

    width: 100%;

    padding: 0;

    color: var(--app-color-link);

    text-decoration: none;

    overflow: hidden;

}

.home-more-card .home-more-card-statement,
.home-more-card .home-more-card-copy,
.home-more-card .home-more-card-cta{

    position: relative;

    z-index: 1;

}

.home-more-card .home-more-card-link::before,
.home-more-card .home-more-card-link::after{

    content: "";

    position: absolute;

    pointer-events: none;

}

.home-more-card .home-more-card-link::before{

    inset: 0;

    z-index: -2;

    background: var(--app-gradient-brand);

}

.home-more-card .home-more-card-link::after{

    right: -16%;

    top: -20%;

    z-index: -1;

    width: 72%;

    aspect-ratio: 1;

    border: 1px solid var(--app-overlay-accent-medium);

    border-radius: 999px;

    background: var(--app-overlay-accent-subtle);

    box-shadow: var(--shadow-soft);

}

.home-more-card .home-more-card-orb{

    grid-row: 1;

    position: relative;

    display: inline-grid;

    place-items: center;

    align-self: stretch;

    width: 100%;

    flex: 0 0 var(--app-standard-card-media-height, 10.6rem);

    height: var(--app-standard-card-media-height, 10.6rem);

    max-height: var(--app-standard-card-media-height, 10.6rem);

    min-height: 0;

    border: 0;

    border-bottom: 0;

    border-radius: 0;

    background:
        var(--app-gradient-brand);

    color: var(--app-color-inverse-text);

    box-shadow:
        var(--shadow-soft);

}

.home-more-card .home-more-card-orb::before{

    content: "";

    position: absolute;

    top: 50%;

    left: 50%;

    width: 4rem;

    height: 4rem;

    transform: translate(-50%, -50%);

    border: 1px solid var(--app-overlay-accent-medium);

    border-radius: 999px;

    background:
        var(--app-gradient-brand);

    box-shadow:
        var(--shadow-soft);

}

.home-more-card .home-more-card-orb svg{

    position: relative;

    z-index: 1;

    width: 2.15rem;

    height: 2.15rem;

    fill: none;

    stroke: currentColor;

    stroke-width: var(--app-icon-stroke-width-standard);

    stroke-linecap: round;

    stroke-linejoin: round;

}

.home-more-card .home-more-card-cta{

    width: fit-content;

    max-width: 100%;

    border: 1px solid var(--app-overlay-accent-medium);

    border-radius: 999px;

    background: var(--app-overlay-accent-subtle);

    color: var(--app-color-link);

    font-size: 0.74rem;

    font-weight: 900;

    line-height: 1.1;

    letter-spacing: 0;

    text-transform: uppercase;

}

.home-more-card .home-more-card-statement{

    grid-row: 2;

    display: grid;

    align-content: end;

    align-items: end;

    gap: 0.48rem;

    align-self: stretch;

    width: 100%;

    max-width: 100%;

    min-width: 0;

    padding: 0.72rem 0.76rem 0.86rem;

    border: 0;

    border-top: 0;

    border-radius: 0;

    background:
        var(--app-gradient-brand);

    color: var(--app-color-link);

    font-size: 0.96rem;

    font-weight: 980;

    line-height: 1.16;

    overflow-wrap: anywhere;

    text-shadow: none;

    box-shadow:
        var(--shadow-soft);

}

.home-more-card .home-more-card-copy{

    color: var(--app-color-link);

    font-size: 0.98rem;

    font-weight: 850;

    line-height: 1.36;

    padding: 0.58rem 0.64rem;

    border: 1px solid var(--app-overlay-accent-medium);

    border-radius: 8px;

    background: var(--app-overlay-brand-strong);

    box-shadow: var(--shadow-soft);

    overflow-wrap: anywhere;

}

.home-more-card .home-more-card-cta{

    display: inline-flex;

    align-items: center;

    justify-self: start;

    gap: 0.42rem;

    margin-top: 0;

    min-height: 1.72rem;

    padding: 0.22rem 0.58rem;

    border: 1px solid var(--app-overlay-accent-medium);

    border-radius: 999px;

    background:
        var(--app-gradient-brand);

    color: var(--app-color-link);

    font-size: 0.78rem;

    box-shadow:
        var(--shadow-soft);

}

.home-more-card:hover .home-more-card-cta,
.home-more-card:has(:focus-visible) .home-more-card-cta{

    border-color: transparent;

    background: transparent;

    color: var(--app-color-link);

}

.home-more-card-social .home-more-card-link::before{

    background: var(--app-gradient-brand);

}

.home-more-card-museums .home-more-card-link::before{

    background: var(--app-gradient-brand);

}

.home-more-card-youtube .home-more-card-orb{

    background:
        var(--app-gradient-brand);

}

.home-more-card-instagram .home-more-card-orb{

    background:
        var(--app-gradient-brand);

}

.home-more-card-museums .home-more-card-orb{

    background:
        var(--app-gradient-brand);

}



.home-exhibition-media{

    flex: 0 0 auto;

    aspect-ratio: 16 / 9;

    color: inherit;

    text-decoration: none;

}



.home-exhibition-media .museum-exhibition-image{

    aspect-ratio: 16 / 9;

    height: 100%;

    object-fit: cover;

    object-position: center center;

}



.dashboard-page-stack .home-exhibition-card .museum-exhibition-title{

    font-size: var(--app-standard-card-title-size, 0.86rem);

    line-height: 1.22;

    font-weight: 900;

}



.dashboard-page-stack .home-exhibition-card .museum-exhibition-date{

    color: var(--app-color-link);

    font-size: 0.92rem;

    line-height: 1.3;

    font-weight: 850;

}



@media (max-width: 760px) {

    .social-channel-actions{

        grid-template-columns: 1fr;

        width: 100%;

    }

}



.account-favorites-list.is-card-pagination-ready > .account-favorite-item:not(.museum-pagination-hidden){

    animation: cardPaginationEnter 240ms ease both;

}



.account-favorites-list.is-card-pagination-ready > .account-favorite-item:not(.museum-pagination-hidden):nth-child(2){

    animation-delay: 24ms;

}



.account-favorites-list.is-card-pagination-ready > .account-favorite-item:not(.museum-pagination-hidden):nth-child(3){

    animation-delay: 48ms;

}



.account-favorites-list.is-card-pagination-ready > .account-favorite-item:not(.museum-pagination-hidden):nth-child(4){

    animation-delay: 72ms;

}



.account-favorites-list.is-card-pagination-ready > .account-favorite-item:not(.museum-pagination-hidden):nth-child(5){

    animation-delay: 96ms;

}



@keyframes cardPaginationEnter {

    from {

        opacity: 0;

        transform: translateY(0.42rem);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.social-channel-feed-panel{

    grid-template-columns: minmax(0, 1fr);

    align-items: start;

    gap: var(--app-panel-stack-gap-tight);

}

.social-channel-feed-panel > .museum-section-legend,
.social-channel-feed-panel > .social-channel-feed-sections,
.social-channel-feed-panel > .social-channel-empty-card{

    grid-column: 1 / -1;

}



.social-channel-feed-sections{

    display: grid;

    gap: var(--app-panel-stack-gap-tight);

    width: 100%;

    min-width: 0;

    margin-top: 0;

}



.social-channel-feature-block,
.social-channel-trending,
.social-channel-post-grid-section{

    position: relative;

    display: grid;

    width: 100%;

    min-width: 0;

    box-sizing: border-box;

}



.social-channel-feature-card{

    display: grid;

    grid-template-columns: minmax(0, 1fr);

    align-items: start;

    gap: 0.78rem;

    width: 100%;

    min-width: 0;

    height: 100%;

    margin: 0;

    padding: 0;

    overflow: visible;

    position: relative;

    border: 0;

    border-radius: 0;

    background: transparent;

    box-shadow: none;

}



.social-channel-feature-media{

    position: relative;

    display: block;

    min-width: 0;

    min-height: 0;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    border: 1px solid var(--app-overlay-accent-medium);

    border-radius: 10px;

    color: inherit;

    text-decoration: none;

    background: var(--app-color-brand-surface-deep);

    box-shadow: var(--shadow-soft);

}



.social-channel-feature-media iframe{

    display: block;

    width: 100%;

    height: 100%;

    min-height: 100%;

    aspect-ratio: 16 / 9;

    border: 0;

    background: var(--app-color-brand-surface-deep);

    vertical-align: middle;

}



.social-channel-feature-media img{

    display: block;

    width: 100%;

    height: 100%;

    min-height: 100%;

    aspect-ratio: 16 / 9;

    object-fit: cover;

    object-position: center center;

    transform: scale(1.04);

}



.social-channel-page-stack:is(.social-channel-page-stack-youtube, .social-channel-page-stack-instagram) .social-channel-feature-media img{

    transform: scale(1.12);

}



.social-channel-feature-copy{

    display: grid;

    align-content: start;

    justify-items: start;

    grid-template-rows: auto auto auto minmax(0, auto);

    gap: 0.24rem;

    width: 100%;

    min-width: 0;

    max-width: 100%;

    order: 0;

    padding: 0 0.12rem;

}



.social-channel-feature-title{

    color: var(--app-color-link);

    font-size: clamp(0.94rem, 1vw, 1.08rem);

    font-weight: 950;

    line-height: 1.14;

    text-decoration: none;

    display: block;

    width: 100%;

    max-width: 100%;

    min-width: 0;

    overflow: hidden;

    overflow-wrap: anywhere;

    white-space: normal;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;

    line-clamp: 2;

    text-shadow: none;

}



.social-channel-feature-title:hover,
.social-channel-feature-title:focus-visible{

    color: var(--app-color-link);

    outline: none;

}

.social-channel-feature-copy .social-channel-post-description{
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    color: var(--app-color-secondary-text);
    font-size: 0.93rem;
    font-weight: 650;
    line-height: 1.42;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.social-channel-feature-copy .social-channel-post-date{
    color: var(--app-color-link);
    font-weight: 850;
    line-height: 1.45;
}

.social-channel-trending{

    align-content: start;

    height: 100%;

}



.social-channel-trending-title{

    margin: 0;

}



.social-channel-trending-title .ui-legend-icon,
.social-channel-post-grid-legend .ui-legend-icon{

    fill: none;

    stroke: currentColor;

}



.social-channel-trending-list{

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 0.52rem;

    min-width: 0;

}

.social-channel-page-stack:is(.social-channel-page-stack-youtube, .social-channel-page-stack-instagram) .social-channel-top-sections{
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    justify-items: stretch;
    width: 100%;
    max-width: 100%;
}

.social-channel-page-stack:is(.social-channel-page-stack-youtube, .social-channel-page-stack-instagram) .social-channel-top-sections > :is(.social-channel-trending, .social-channel-feature-block){
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
}

.social-channel-post-grid-section{

    margin-top: 0;

}



.social-channel-post-grid-legend{

    margin: 0;

}



.social-channel-post-search{

    justify-self: end;

    width: min(32vw, 21rem);

    min-width: 16rem;

    margin: 0;

}



.social-channel-feed-panel .social-channel-post-grid:not([data-mobile-carousel]){

    grid-template-columns: repeat(5, minmax(0, 1fr));

    justify-content: stretch;

    justify-items: stretch;

    align-items: stretch;

    margin-top: 0;

    padding: 0;

}



.social-channel-feature-card.account-card-state{

    --account-card-rings:

        inset 0 0 0 1px var(--app-overlay-accent-medium);

    --account-card-loved-bg: transparent;

}



.social-channel-feature-card.account-card-state-loved{

    --account-card-loved-bg: transparent;

    --account-card-rings:

        inset 0 0 0 1px var(--app-overlay-accent-medium);

    box-shadow:

        var(--shadow-soft);

}



.social-channel-feature-card .favorite-toggle-btn-corner{

    top: auto;

    right: 0.2rem;

    bottom: 0.12rem;

}



.social-channel-feature-card .favorite-toggle-btn-corner{

    z-index: 5;

    padding: 0.1rem 0.14rem;

    border-radius: 999px;

    background: transparent;

    backdrop-filter: none;

}



.favorite-toggle-btn-corner[data-favorite-kind="youtube"]{

    background: transparent;

    backdrop-filter: none;

    box-shadow: none;

}

.social-channel-feature-card .social-channel-feature-copy{

    padding-right: 2.45rem;

    padding-bottom: 2.3rem;

}



.social-channel-post-media{

    color: inherit;

    text-decoration: none;

}



@media (max-width: 1180px) {

    .home-exhibition-grid:not([data-mobile-carousel]),
.dashboard-page-stack .home-social-post-grid:not([data-mobile-carousel]){

        grid-template-columns: repeat(3, minmax(0, 1fr));

    }

}



@media (max-width: 760px) {

    .home-exhibition-grid:not([data-mobile-carousel]),
.dashboard-page-stack .home-social-post-grid:not([data-mobile-carousel]){

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}



@media (max-width: 520px) {

    .home-exhibition-grid:not([data-mobile-carousel]),
.dashboard-page-stack .home-social-post-grid:not([data-mobile-carousel]){

        grid-template-columns: 1fr;

    }

}



.museum-pagination-btn.is-disabled{

    opacity: 0.46;

    pointer-events: none;

}



@media (max-width: 980px) {



    .social-channel-post-search{

        justify-self: stretch;

        width: 100%;

    }

}

.social-channel-post-media,
.social-channel-trending-thumb{
    position: relative;
}

.social-channel-post-loading-placeholder{
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.social-channel-post-media .museum-exhibition-image,
.social-channel-trending-thumb img{
    position: relative;
    z-index: 1;
}

@media (max-width: 1024px) {
    .social-channel-page-stack:is(.social-channel-page-stack-youtube, .social-channel-page-stack-instagram) .social-channel-post-search{
        justify-self: stretch;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .social-channel-page-stack:is(.social-channel-page-stack-youtube, .social-channel-page-stack-instagram) .social-channel-post-search .museum-search-input-group{
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
    }
}

@media (max-width: 520px) {
    .social-channel-page-stack:is(.social-channel-page-stack-youtube, .social-channel-page-stack-instagram) .social-channel-post-search{
        justify-self: stretch;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .social-channel-page-stack:is(.social-channel-page-stack-youtube, .social-channel-page-stack-instagram) .social-channel-post-search .museum-search-input-group{
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .social-channel-page-stack:is(.social-channel-page-stack-youtube, .social-channel-page-stack-instagram) .social-channel-trending-title{
        min-height: 1.86rem;
        gap: 0.28rem;
        padding: 0.3rem 0.56rem;
        font-size: var(--app-legend-font-size);
        line-height: var(--app-legend-line-height);
    }

    .social-channel-page-stack:is(.social-channel-page-stack-youtube, .social-channel-page-stack-instagram) .social-channel-trending-title .ui-legend-icon{
        width: 0.78rem;
        height: 0.78rem;
    }

}


.social-channel-page-stack:is(.social-channel-page-stack-youtube, .social-channel-page-stack-instagram) .social-channel-feature-block .social-channel-feature-card.account-card-state{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.72rem;
    padding: 0.58rem;
    overflow: hidden;
    border: 1px solid var(--app-overlay-accent-medium);
    border-radius: 14px;
    background:
        var(--app-gradient-brand);
    box-shadow:
        var(--shadow-soft);
}

.social-channel-page-stack:is(.social-channel-page-stack-youtube, .social-channel-page-stack-instagram) .social-channel-feature-block .social-channel-feature-card.account-card-state::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    box-shadow: var(--shadow-soft);
    pointer-events: none;
}

.social-channel-page-stack:is(.social-channel-page-stack-youtube, .social-channel-page-stack-instagram) .social-channel-feature-block .social-channel-feature-media{
    isolation: isolate;
    border: 1px solid var(--app-overlay-accent-medium);
    border-radius: 12px;
    background:
        var(--app-gradient-brand);
    box-shadow:
        var(--shadow-soft);
}

.social-channel-page-stack:is(.social-channel-page-stack-youtube, .social-channel-page-stack-instagram) .social-channel-feature-block .social-channel-feature-media::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    box-shadow:
        var(--shadow-soft);
    pointer-events: none;
}

.social-channel-page-stack:is(.social-channel-page-stack-youtube, .social-channel-page-stack-instagram) .social-channel-feature-block .social-channel-feature-copy{
    position: relative;
    order: 0;
    gap: 0.26rem;
    min-height: 4.15rem;
    padding: 0.68rem 3.4rem 0.86rem 0.78rem;
    border: 1px solid var(--app-overlay-accent-soft);
    border-radius: 10px;
    background: var(--app-overlay-brand-medium);
    box-shadow: var(--shadow-soft);
}

.social-channel-page-stack:is(.social-channel-page-stack-youtube, .social-channel-page-stack-instagram) .social-channel-feature-block .social-channel-feature-card .favorite-toggle-btn-corner{
    top: auto;
    right: 0.62rem;
    bottom: 0.48rem;
    z-index: 6;
}

.social-channel-page-stack:is(.social-channel-page-stack-youtube, .social-channel-page-stack-instagram) .social-channel-feature-block .social-channel-feature-title{
    display: -webkit-box;
    font-size: clamp(1.08rem, 1.08vw, 1.32rem);
    line-height: 1.16;
    min-height: 0;
    max-height: none;
    overflow: hidden;
    overflow-wrap: anywhere;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.social-channel-page-stack:is(.social-channel-page-stack-youtube, .social-channel-page-stack-instagram) .social-channel-feature-block .social-channel-feature-copy .social-channel-post-date{
    font-size: clamp(0.9rem, 0.86vw, 1rem);
    line-height: 1.22;
}

/* Latest YouTube copy uses the shared card disclosure and bottom action band
   without changing the feature's text-above-player layout. */
.social-channel-page-stack-youtube .social-channel-feature-block .social-channel-feature-copy{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.3rem;
    padding: 0.68rem 0.78rem 0.72rem;
    overflow: visible;
}

.social-channel-page-stack-youtube .social-channel-feature-copy .social-channel-post-date{
    order: 1;
}

.social-channel-page-stack-youtube .social-channel-feature-copy .social-channel-feature-title{
    order: 2;
}

.social-channel-page-stack-youtube .social-channel-feature-copy .social-channel-post-description{
    order: 3;
}

.social-channel-page-stack-youtube .social-channel-feature-copy .social-channel-feature-action-band{
    order: 5;
    position: relative;
    inset: auto;
    z-index: 1;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    align-self: stretch;
    width: calc(100% + 4rem);
    inline-size: calc(100% + 4rem);
    max-width: none;
    max-inline-size: none;
    min-width: 0;
    min-height: 3.4rem;
    height: auto;
    max-height: none;
    margin: 0.34rem -0.78rem -0.72rem;
    padding: 0.42rem 0.78rem;
    border: 0;
    border-inline: 1px solid var(--app-overlay-accent-soft);
    border-bottom: 1px solid var(--app-overlay-accent-medium);
    border-radius: 8px;
    background:
        var(--app-gradient-brand);
    box-shadow:
        var(--shadow-soft);
    box-sizing: border-box;
    overflow: visible;
}

.social-channel-page-stack-youtube .social-channel-feature-copy .social-channel-feature-action-band > .app-card-action-link{
    position: static;
    inset: auto;
    order: 1;
    display: inline-flex;
    flex: 0 1 auto;
    align-items: center;
    justify-content: flex-start;
    gap: 0.32rem;
    width: auto;
    min-width: 0;
    max-width: calc(100% - 3rem);
    min-height: 1.72rem;
    margin: 0 auto 0 0;
    padding: 0.22rem 0.5rem;
    border: 0;
    border-radius: 999px;
    background:
        var(--app-gradient-brand);
    color: var(--app-color-link);
    font-size: 0.9rem;
    font-weight: 900;
    line-height: 1.15;
    text-decoration: none;
    overflow: hidden;
    transform: none;
}

.social-channel-page-stack-youtube .social-channel-feature-copy .social-channel-feature-action-band .app-card-action-icon{
    display: block;
    flex: 0 0 1rem;
    width: 1rem;
    min-width: 1rem;
    max-width: 1rem;
    height: 1rem;
    min-height: 1rem;
    max-height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.social-channel-page-stack-youtube .social-channel-feature-copy .social-channel-feature-action-band > .app-card-control-group{
    order: 2;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    width: auto;
    min-width: max-content;
    max-width: none;
    margin: 0 0 0 auto;
}

.social-channel-page-stack-youtube .social-channel-feature-copy .social-channel-feature-action-band .favorite-toggle-btn-leading{
    position: static;
    inset: auto;
    display: inline-grid;
    flex: 0 0 2.35rem;
    place-items: center;
    width: 2.35rem;
    min-width: 2.35rem;
    max-width: 2.35rem;
    height: 2.35rem;
    min-height: 2.35rem;
    max-height: 2.35rem;
    margin: 0;
    padding: 0.06rem;
    transform: none;
}

@media (max-width: 640px) {

    .social-channel-connect-widget{
        align-items: stretch;
        width: 100%;
    }

    .social-channel-connect-widget-instagram{
        display: inline-flex;
        width: fit-content;
        max-width: 100%;
    }

    .social-channel-connect-widget-instagram .social-channel-connect-link{
        width: fit-content;
        max-width: 100%;
    }

    .social-channel-intro{

        align-items: stretch;

        flex-direction: column;

    }



    .social-channel-feature-block{

        gap: 0.5rem;

    }



    .social-channel-feature-block,
.social-channel-trending,
.social-channel-post-grid-section{

        padding:

            calc(var(--app-surface-block-rhythm) + var(--app-legend-inner-clearance-mobile, var(--app-legend-inner-clearance)))

            0.62rem

            0.62rem;

    }



    .social-channel-feature-card{

        gap: 0.72rem;

    }



    .social-channel-feature-copy{

        align-content: start;

        padding: 0 0.12rem 0.1rem;

    }

    .social-channel-feature-title{

        font-size: 0.94rem;

        line-height: 1.14;

    }

    .social-channel-page-stack:is(.social-channel-page-stack-youtube, .social-channel-page-stack-instagram) .social-channel-feature-block .social-channel-feature-title{

        font-size: 1rem;

        line-height: 1.16;

        max-height: none;

    }

    .social-channel-page-stack:is(.social-channel-page-stack-youtube, .social-channel-page-stack-instagram) .social-channel-feature-block .social-channel-feature-copy{
        min-height: 4.2rem;
        padding: 0.62rem 3.12rem 0.82rem 0.68rem;
    }

    .social-channel-page-stack:is(.social-channel-page-stack-youtube, .social-channel-page-stack-instagram) .social-channel-feature-block .social-channel-feature-card .favorite-toggle-btn-corner{
        right: 0.52rem;
        bottom: 0.42rem;
    }



    .social-channel-feed-panel .social-channel-post-grid:not([data-mobile-carousel]){

        gap: 0.72rem;

    }



}

@media (max-width: 760px) {
    .page-stack.ui-page-stack .social-channel-panel .social-channel-intro{
        box-sizing: border-box;
        inline-size: calc(100% - 2rem);
        width: calc(100% - 2rem);
        max-inline-size: calc(100% - 2rem);
        max-width: calc(100% - 2rem);
        min-inline-size: 0;
        min-width: 0;
        margin-inline: auto;
        justify-self: center;
    }

    .page-stack.ui-page-stack .social-channel-panel .social-channel-intro .social-channel-copy,
.page-stack.ui-page-stack .social-channel-panel .social-channel-intro :is(.home-hero-title, .home-hero-lead){
        box-sizing: border-box;
        inline-size: 100%;
        width: 100%;
        max-inline-size: 100%;
        max-width: 100%;
        min-inline-size: 0;
        min-width: 0;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: normal;
    }

    .page-stack.ui-page-stack .social-channel-panel .social-channel-intro .home-hero-title{
        font-size: clamp(1.02rem, 4.8vw, 1.2rem);
        line-height: 1.18;
    }
}

/* Final cascade guard for the latest social feature card. Keep this at the end
 * so the account-card-state shell rules cannot reintroduce the outer frame.
 */
.social-channel-page-stack:is(.social-channel-page-stack-youtube, .social-channel-page-stack-instagram) .social-channel-feature-block .social-channel-feature-card.account-card-state,
.social-channel-page-stack:is(.social-channel-page-stack-youtube, .social-channel-page-stack-instagram) .social-channel-feature-block .social-channel-feature-card.account-card-state-loved{
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.social-channel-page-stack:is(.social-channel-page-stack-youtube, .social-channel-page-stack-instagram) .social-channel-feature-block .social-channel-feature-card.account-card-state::after,
.social-channel-page-stack:is(.social-channel-page-stack-youtube, .social-channel-page-stack-instagram) .social-channel-feature-block .social-channel-feature-card.account-card-state-loved::after{
    content: none;
    display: none;
}

.social-channel-page-stack:is(.social-channel-page-stack-youtube, .social-channel-page-stack-instagram) .social-channel-feature-block .social-channel-feature-main{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.72rem;
}

.social-channel-page-stack:is(.social-channel-page-stack-youtube, .social-channel-page-stack-instagram) .social-channel-feature-block .social-channel-feature-copy{
    order: 0;
}

.social-channel-page-stack:is(.social-channel-page-stack-youtube, .social-channel-page-stack-instagram) .social-channel-feature-block .social-channel-feature-media{
    order: 1;
}

/* Final Latest YouTube band parity guard. Later responsive social rules must
   not recenter the action link or reverse the standard link/heart order. */
html body #mainContent .page-stack.ui-page-stack.social-channel-page-stack-youtube .social-channel-feature-copy > .social-channel-feature-action-band{
    flex-direction: row;
    direction: ltr;
}

html body #mainContent .page-stack.ui-page-stack.social-channel-page-stack-youtube .social-channel-feature-copy > .social-channel-feature-action-band > .app-card-action-link{
    margin-left: 0;
    margin-right: auto;
    margin-inline-start: 0;
    margin-inline-end: auto;
    padding: 0.22rem 0.5rem;
}

.social-channel-page-stack-instagram .social-channel-trending {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
}

.social-channel-page-stack-instagram .social-channel-trending > * {
    grid-column: 1;
    min-width: 0;
}
/* Populated social archives keep their resident empty and recovery cards out
 * of layout until the owning state explicitly removes the hidden attribute.
 * This selector intentionally outranks the later global Standard-card grid
 * presentation without changing any non-social or Staff card family. */
html body.public-editorial-body #mainContent
    .page-stack.ui-page-stack
    .social-channel-post-grid
    > .app-content-state-card.app-standard-card[hidden] {
    display: none;
}
.social-channel-page-stack .app-social-post-card.is-selected {
    border-color: var(--app-color-primary-action);
    box-shadow: var(--shadow-soft);
}

.social-channel-page-stack [id^="social-post-"] {
    scroll-margin-top: calc(
        var(--app-shell-header-height, 5rem)
        + var(--layout-section-gap)
    );
}

/*
 * Shared compact action group.
 *
 * Public page actions share one composition for optional connection context,
 * state controls, and destination links. My Account keeps its preference-list
 * structure while reusing the same control height and state tokens.
 */

.page-stack.ui-page-stack :is(
    .home-social-actions-section,
    .social-channel-page-actions,
    .social-channel-actions,
    .home-action-list
) {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
}

.page-stack.ui-page-stack :is(
    .home-social-actions-section,
    .social-channel-page-actions,
    .social-channel-actions,
    .home-action-list
)::before,
.page-stack.ui-page-stack :is(
    .home-social-actions-section,
    .social-channel-page-actions,
    .social-channel-actions,
    .home-action-list
)::after {
    content: none;
}

.page-stack.ui-page-stack .home-action-list {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: var(--app-action-list-wrap, wrap);
    gap: var(--app-component-flow-gap);
    width: 100%;
}

.page-stack.ui-page-stack .home-action-list > :is(
    .home-action-list-row,
    .home-action-link-row
) {
    display: flex;
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.page-stack.ui-page-stack .home-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: auto;
    min-width: 0;
    min-height: var(--app-control-min-height);
    height: auto;
    margin: 0;
    padding: var(--app-control-padding-y) var(--app-control-padding-x);
    border: 0;
    border-radius: calc(var(--app-control-radius) + 2px);
    background: transparent;
    color: var(--app-color-primary-action);
    box-shadow: none;
    font-weight: 650;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color 160ms ease,
        color 160ms ease;
}

.page-stack.ui-page-stack .home-action-button:hover {
    background: var(--app-interactive-hover-surface);
    color: var(--app-interactive-hover-text);
    transform: none;
}

.page-stack.ui-page-stack
    .home-action-button.favorite-toggle-btn:not(.is-active):not([aria-pressed="true"])
    .favorite-toggle-icon {
    color: var(--app-color-state-control-inactive);
}

.page-stack.ui-page-stack .home-action-button:not(.favorite-toggle-btn):not(.museum-alert-toggle-btn):not(.alert-subscription-toggle):is(
    .is-active,
    [aria-pressed="true"]
) {
    background: var(--app-surface-selected);
    color: var(--app-color-primary-action-hover);
}

.page-stack.ui-page-stack
    .home-action-button.news-alert-bell-icon:is(.is-active, [aria-pressed="true"]),
.page-stack.ui-page-stack
    .home-action-list.news-alert-bell-card.is-active
    .home-action-button.news-alert-bell-icon {
    background: transparent;
    color: var(--app-color-primary-action);
}

.page-stack.ui-page-stack .home-action-button:focus-visible {
    outline: 2px solid var(--app-focus-ring-color, var(--app-color-focus));
    outline-offset: 2px;
}

.page-stack.ui-page-stack .home-action-button > svg {
    flex: 0 0 auto;
}

.page-stack.ui-page-stack .home-action-button > svg,
.page-stack.ui-page-stack .home-action-button.home-action-list-icon-brand > svg {
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: none;
}

.page-stack.ui-page-stack .home-action-button.home-action-list-icon-brand > svg {
    stroke: none;
}

.page-stack.ui-page-stack .home-action-button .museum-alert-toggle-icon {
    color: var(--app-color-state-control-inactive);
}

.page-stack.ui-page-stack
    .home-action-button.news-alert-bell-icon:is(.is-active, [aria-pressed="true"])
    .museum-alert-toggle-icon,
.page-stack.ui-page-stack
    .home-action-list.news-alert-bell-card.is-active
    .home-action-button.news-alert-bell-icon
    .museum-alert-toggle-icon {
    color: var(--app-color-state-alert-active);
}

.page-stack.ui-page-stack .home-action-button .home-action-list-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: 100%;
    text-align: center;
}

.page-stack.ui-page-stack .home-action-button :is(
    .home-action-list-title,
    .alert-status-title
) {
    display: inline-block;
    min-width: 0;
    max-width: 100%;
    color: inherit;
    font-size: 0.84rem;
    font-weight: 650;
    line-height: 1.08;
    text-align: center;
    white-space: nowrap;
}

.page-stack.ui-page-stack .home-action-list .news-alert-bell-icon::before,
.page-stack.ui-page-stack .home-action-list .news-alert-bell-icon::after,
.page-stack.ui-page-stack .home-action-list .home-action-list-link::before {
    content: none;
    animation: none;
}

.page-stack.ui-page-stack .home-action-list .museum-alert-toggle-btn-leading {
    margin-right: 0;
}

.page-stack.ui-page-stack .app-public-action-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--app-component-flow-gap);
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.page-stack.ui-page-stack .app-public-action-context {
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
    min-width: 0;
}

.page-stack.ui-page-stack .app-public-action-group {
    display: flex;
    flex: 0 1 auto;
    align-items: stretch;
    flex-wrap: wrap;
    gap: var(--app-control-gap);
    width: auto;
    max-width: 100%;
    min-width: 0;
}

.page-stack.ui-page-stack .app-public-action-group > .app-public-action-item {
    flex: 0 1 auto;
}

.page-stack.ui-page-stack .news-article-heading-actions,
.page-stack.ui-page-stack .news-article-heading-actions .app-public-action-group {
    justify-content: center;
}

.page-stack.ui-page-stack .app-public-action {
    box-sizing: border-box;
    min-height: var(--app-control-min-height);
    padding: var(--app-control-padding-y) var(--app-control-padding-x);
    border: 0;
    border-radius: var(--app-control-radius);
    background: var(--app-surface-card);
    color: var(--app-color-primary-action);
    box-shadow: none;
    font-size: 0.88rem;
    font-weight: 650;
    line-height: 1.2;
    transform: none;
}

.page-stack.ui-page-stack
.app-public-action-context .social-channel-connect-link {
    box-sizing: border-box;
    min-height: var(--app-control-min-height);
    padding: var(--app-control-padding-y) var(--app-control-padding-x);
    font-size: 0.88rem;
    font-weight: 650;
    line-height: 1.2;
}

.page-stack.ui-page-stack
.app-public-action-context .social-channel-connect-copy {
    flex-flow: row wrap;
    align-items: baseline;
    column-gap: 0.34rem;
    row-gap: 0;
    line-height: 1.2;
}

.page-stack.ui-page-stack
.app-public-action-context .social-channel-connect-label {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.page-stack.ui-page-stack
.app-public-destination-action .home-action-list-title {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.page-stack.ui-page-stack .app-public-state-action {
    flex: 0 0 var(--app-control-min-height);
    width: var(--app-control-min-height);
    min-width: var(--app-control-min-height);
    padding: 0;
}

.page-stack.ui-page-stack .app-public-action:is(:hover, :focus-visible) {
    border-color: var(--app-color-primary-action);
    background: var(--app-interactive-hover-surface);
    color: var(--app-color-primary-action-hover);
    box-shadow: none;
    transform: none;
}

/* Section legends and their alert state share one stable row. The row owns the
   full-width divider so it continues beneath the right-aligned bell. */
.page-stack.ui-page-stack .app-section-heading-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 2px;
    align-items: center;
    column-gap: var(--app-control-gap);
    row-gap: 12px;
    width: 100%;
    min-width: 0;
}

.page-stack.ui-page-stack .app-section-heading-row::after {
    content: "";
    display: block;
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    height: 2px;
    background: var(--app-gradient-action-heading-rule);
    clip-path: polygon(0 0, 100% 50%, 100% 100%, 0 100%);
}

.page-stack.ui-page-stack .news-article-media-heading-row {
    margin-block-end: var(--app-component-flow-gap);
}

.page-stack.ui-page-stack
    .news-article-media-heading-row > .news-article-media-title {
    grid-row: 1;
    min-width: 0;
    margin: 0;
}

html body #mainContent .page-stack.ui-page-stack
    .app-section-heading-row > .museum-section-legend {
    grid-row: 1;
    grid-template-rows: auto;
    row-gap: 0;
    width: 100%;
    min-width: 0;
    margin: 0;
}

html body #mainContent .page-stack.ui-page-stack
    .app-section-heading-row > .museum-section-legend::after {
    content: none;
    display: none;
}

.page-stack.ui-page-stack .app-section-heading-alert-bar {
    grid-row: 1;
    justify-self: end;
    width: auto;
    min-width: 0;
    margin: 0;
}

.page-stack.ui-page-stack .app-section-heading-alert-bar .app-public-action-group,
.page-stack.ui-page-stack .app-section-heading-alert-bar .app-public-action-item {
    display: flex;
    width: auto;
    min-width: 0;
    margin: 0;
}

.page-stack.ui-page-stack .app-section-heading-alert-bar .app-public-action {
    width: var(--app-control-min-height);
    min-width: var(--app-control-min-height);
    height: var(--app-control-min-height);
    min-height: var(--app-control-min-height);
    padding: 0;
    border-radius: var(--app-control-radius);
}

.page-stack.ui-page-stack .app-section-heading-alert-bar .museum-alert-toggle-icon,
.page-stack.ui-page-stack .app-section-heading-alert-bar .museum-alert-toggle-icon svg {
    width: var(--app-state-action-icon-size);
    height: var(--app-state-action-icon-size);
}

html body #mainContent .page-stack.ui-page-stack .favorite-toggle-btn .favorite-toggle-icon {
    color: var(--app-color-state-control-inactive);
}

html body #mainContent .page-stack.ui-page-stack .news-alert-bell-icon .museum-alert-toggle-icon,
html body #mainContent .page-stack.ui-page-stack .museum-alert-toggle-btn .museum-alert-toggle-icon {
    color: var(--app-color-state-control-inactive);
}

html body #mainContent .page-stack.ui-page-stack
.favorite-toggle-btn:is(.is-active, [aria-pressed="true"])
.favorite-toggle-icon {
    color: var(--app-color-state-favorite-active);
}

html body #mainContent .page-stack.ui-page-stack
:is(.news-alert-bell-icon, .museum-alert-toggle-btn, .alert-subscription-toggle):is(
    .is-active,
    [aria-pressed="true"]
)
.museum-alert-toggle-icon {
    color: var(--app-color-state-alert-active);
}

.page-stack.ui-page-stack .app-public-action.home-more-action,
.page-stack.ui-page-stack .app-public-action.home-more-action:is(:hover, :focus-visible) {
    border-color: var(--app-border-color-strong);
    background: transparent;
    color: var(--app-text-color-strong);
}

.page-stack.ui-page-stack
.app-public-state-action:is(.is-active, [aria-pressed="true"]) {
    border-color: var(--app-color-primary-action);
    color: var(--app-color-primary-action);
}

.page-stack.ui-page-stack
.app-public-state-action.favorite-toggle-btn:is(.is-active, [aria-pressed="true"])
.favorite-toggle-icon {
    color: var(--app-color-state-favorite-active);
}

.page-stack.ui-page-stack
.app-public-state-action.news-alert-bell-icon:is(.is-active, [aria-pressed="true"])
.museum-alert-toggle-icon {
    color: var(--app-color-state-alert-active);
}

.page-stack.ui-page-stack .app-public-destination-action > svg {
    color: var(--app-color-primary-action);
}

.page-stack.ui-page-stack
.alert-subscription-actions .alert-subscription-toggle {
    min-height: var(--app-control-min-height);
    border: 0;
    border-radius: var(--app-control-radius);
    background: var(--app-surface-card);
    box-shadow: none;
    transform: none;
}

.page-stack.ui-page-stack
.alert-subscription-actions
.alert-subscription-toggle:is(.is-active, [aria-pressed="true"]) {
    border-color: var(--app-color-primary-action);
    color: var(--app-color-primary-action);
}

/* Selected favorite and alert controls stay unpainted only at rest. Hover and
   keyboard focus use the shared neutral interaction surface on every variant. */
.page-stack.ui-page-stack :is(
    .favorite-toggle-btn,
    .museum-alert-toggle-btn,
    .alert-subscription-toggle
):is(.is-active, [aria-pressed="true"]):not(:hover):not(:focus-visible) {
    background: transparent;
}

.page-stack.ui-page-stack
.home-action-button.news-alert-bell-icon:is(:hover, :focus-visible) {
    background: var(--app-interactive-hover-surface);
    color: var(--app-interactive-hover-text);
}

.page-stack.ui-page-stack
.alert-subscription-actions
.alert-subscription-toggle:is(.is-active, [aria-pressed="true"])
.museum-alert-toggle-icon {
    color: var(--app-color-state-alert-active);
}

.page-stack.ui-page-stack
.alert-subscription-actions
.alert-subscription-toggle:is(:hover, :focus-visible) {
    border-color: var(--app-color-primary-action);
    transform: none;
}

/* Public actions and the existing My Account preference actions share one
   borderless control rule. Heart and bell state remains visible through color. */
.page-stack.ui-page-stack :is(
    .app-public-action,
    .alert-subscription-actions .alert-subscription-toggle
) {
    border: 0;
}

.page-stack.ui-page-stack .app-page-intro-actions .app-public-action-bar,
.page-stack.ui-page-stack .app-page-intro-actions .app-public-action-group {
    justify-content: flex-end;
}

.page-stack.ui-page-stack .app-page-intro-actions .app-public-action-bar {
    width: auto;
    margin-inline-start: auto;
}

.page-stack.ui-page-stack .app-page-section-actions-stack {
    display: grid;
    align-items: start;
    justify-items: start;
    gap: 0.38rem;
    width: 100%;
    margin-block-end: var(--app-component-flow-gap);
    text-align: left;
}

.page-stack.ui-page-stack
.app-page-section-actions-stack > .app-public-action-bar {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(0.28rem, 0.8vw, 0.62rem);
    width: 100%;
    margin: 0;
}

.page-stack.ui-page-stack
.app-page-section-actions-stack :is(
    .app-public-action-context,
    .social-channel-connect-section,
    .social-channel-connect-widget,
    .app-public-action-group
) {
    width: auto;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    text-align: left;
}

.page-stack.ui-page-stack
.app-page-section-actions-stack .app-public-action-context {
    flex: 0 1 auto;
}

.page-stack.ui-page-stack
.app-page-section-actions-stack .app-public-action-group {
    display: flex;
    flex: 0 0 auto;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(0.2rem, 0.6vw, 0.42rem);
}

.page-stack.ui-page-stack
.app-page-section-actions-stack .app-public-action-item {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-start;
    width: auto;
}

.page-stack.ui-page-stack
.app-page-section-actions-stack :is(
    .app-public-action,
    .social-channel-connect-link,
    .museum-intro-map-trigger
) {
    justify-content: flex-start;
    width: auto;
    max-width: 100%;
    margin: 0;
    text-align: left;
}

.page-stack.ui-page-stack
.app-page-section-actions-stack .social-channel-connect-copy {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    row-gap: 0.12rem;
    text-align: left;
}

.page-stack.ui-page-stack .social-channel-home-actions {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(0.28rem, 0.8vw, 0.62rem);
}

.page-stack.ui-page-stack
.social-channel-home-actions > .social-channel-connect-section {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
}

.page-stack.ui-page-stack
.social-channel-home-actions > .app-public-action-group {
    display: flex;
    flex: 0 0 auto;
    flex-flow: row nowrap;
    align-items: center;
    width: auto;
}

.page-stack.ui-page-stack
.social-channel-home-actions .app-public-action-item {
    flex: 0 0 auto;
    width: auto;
}

.page-stack.ui-page-stack
.social-channel-home-actions
.social-channel-connect-copy {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    row-gap: 0.12rem;
    text-align: left;
}

.page-stack.ui-page-stack
.app-page-intro-actions:has(.app-page-intro-actions-stack) {
    align-items: flex-start;
    justify-content: flex-end;
}

.page-stack.ui-page-stack .app-page-intro-actions-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--app-component-flow-gap-mobile);
    width: min(100%, 34rem);
    max-width: 100%;
    min-width: 0;
    margin-inline-start: auto;
    text-align: right;
}

.page-stack.ui-page-stack
.app-page-intro-actions-stack > .app-public-action-bar {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 0.18rem;
    width: 100%;
    margin: 0;
}

.page-stack.ui-page-stack
.app-page-intro-actions-stack :is(
    .app-public-action-context,
    .social-channel-connect-section,
    .social-channel-connect-widget,
    .app-public-action-group
) {
    width: auto;
    max-width: 100%;
}

.page-stack.ui-page-stack
.app-page-intro-actions-stack :is(
    .app-public-action-context,
    .social-channel-connect-section,
    .app-public-action-group
) {
    justify-content: flex-end;
}

.page-stack.ui-page-stack
.app-page-intro-actions-stack .social-channel-connect-link {
    justify-content: flex-end;
    max-width: 100%;
    text-align: right;
}

.page-stack.ui-page-stack
.app-page-intro-actions-stack .social-channel-connect-copy {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-end;
    row-gap: 0.12rem;
    text-align: right;
}

.page-stack.ui-page-stack .social-channel-connect-link {
    min-height: var(--app-control-min-height);
    padding: var(--app-control-padding-y) var(--app-control-padding-x);
    border: 1px solid var(--app-color-brand-surface);
    background: var(--app-color-brand-surface);
    color: var(--app-color-inverse-text);
}

.page-stack.ui-page-stack
.social-channel-connect-link :is(
    svg,
    .social-channel-connect-label,
    .social-channel-connect-meta,
    .social-channel-connect-meta span,
    .social-channel-connect-handle
) {
    color: inherit;
}

.page-stack.ui-page-stack .social-channel-connect-link {
    cursor: pointer;
    max-width: 100%;
    white-space: normal;
    scale: 1;
}

.page-stack.ui-page-stack .social-channel-connect-label {
    text-decoration-line: underline;
    text-decoration-color: color-mix(in srgb, currentColor 68%, transparent);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
    text-decoration-skip-ink: auto;
}

.page-stack.ui-page-stack
.social-channel-connect-link:is(:hover, :focus-visible) {
    border-color: var(--app-color-brand-surface-deep);
    background: var(--app-color-brand-surface-deep);
    color: var(--app-color-inverse-text);
    opacity: 1;
}

.page-stack.ui-page-stack
.social-channel-connect-link:is(:hover, :focus-visible) .social-channel-connect-label {
    text-decoration-color: currentColor;
    text-decoration-thickness: 0.12em;
}

.page-stack.ui-page-stack
.app-page-section-actions-stack-social > .app-public-action-bar {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--app-component-flow-gap-mobile);
    width: 100%;
}

.page-stack.ui-page-stack
.app-page-section-actions-stack-social
:is(.app-public-action-context, .social-channel-connect-section) {
    flex: 0 1 auto;
    justify-self: start;
    justify-content: flex-start;
    min-width: 0;
    text-align: left;
}

.page-stack.ui-page-stack
.app-page-section-actions-stack-social .social-channel-connect-link {
    justify-content: flex-start;
    min-width: 0;
    text-align: left;
}

.page-stack.ui-page-stack
.app-page-section-actions-stack-social .social-channel-connect-copy {
    align-items: flex-start;
    min-width: 0;
    text-align: left;
}

.page-stack.ui-page-stack
.app-page-section-actions-stack-social .app-public-action-group {
    display: flex;
    flex: 0 1 auto;
    flex-flow: row nowrap;
    align-items: stretch;
    justify-self: start;
    justify-content: flex-start;
    min-width: 0;
}

.page-stack.ui-page-stack
.app-page-section-actions-stack-social
.app-public-action-group > .app-public-action-item {
    flex: 0 1 auto;
    min-width: 0;
}

.page-stack.ui-page-stack
.app-page-section-actions-stack-social
:is(
    .social-channel-connect-label,
    .social-channel-connect-meta,
    .social-channel-connect-handle,
    .app-page-intro-guidance-label
) {
    overflow-wrap: anywhere;
}

.page-stack.ui-page-stack
.app-page-section-actions-stack-social
.app-public-state-action-labeled {
    white-space: normal;
}

.page-stack.ui-page-stack .museum-intro-map-trigger {
    justify-content: flex-end;
    max-width: 100%;
    margin: 0;
    text-align: right;
}

.page-stack.ui-page-stack .museum-intro-map-trigger > svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.page-stack.ui-page-stack .app-public-state-action-labeled {
    display: inline-flex;
    flex: 0 1 auto;
    justify-content: flex-start;
    gap: 0.34rem;
    width: auto;
    min-width: 0;
    min-height: var(--app-control-min-height);
    padding: var(--app-control-padding-y) var(--app-control-padding-x);
    color: var(--app-color-primary-action);
    font-size: 0.88rem;
    font-weight: 650;
    line-height: 1.2;
    text-align: start;
    white-space: nowrap;
}

.page-stack.ui-page-stack .app-page-intro-guidance-label {
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-align: inherit;
}

.page-stack.ui-page-stack .app-page-intro-actions .social-channel-connect-meta,
.page-stack.ui-page-stack .app-page-intro-actions .social-channel-connect-meta span,
.page-stack.ui-page-stack .app-page-intro-actions .social-channel-connect-handle{
    font-size: 0.78rem;
    color: var(--app-color-primary-action);
    font-weight: 400;
    line-height: 1.2;
}

@media (max-width: 520px) {
    .page-stack.ui-page-stack .home-action-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
        gap: var(--app-component-flow-gap-mobile);
    }

    .page-stack.ui-page-stack .home-action-list > :is(
        .home-action-list-row,
        .home-action-link-row
    ),
    .page-stack.ui-page-stack .home-action-button {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 760px) {
    .page-stack.ui-page-stack .app-public-action-bar {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: var(--app-component-flow-gap-mobile);
    }

    .page-stack.ui-page-stack
    .app-page-intro-actions:has(.app-page-intro-actions-stack) {
        justify-content: flex-end;
    }

    .page-stack.ui-page-stack .app-page-intro-actions-stack,
    .page-stack.ui-page-stack
    .app-page-intro-actions-stack > .app-public-action-bar {
        width: 100%;
    }

    .page-stack.ui-page-stack
    .app-page-intro-actions-stack :is(
        .app-public-action-context,
        .app-public-action-context .social-channel-connect-widget,
        .app-public-action-context .social-channel-connect-link,
        .app-public-action-group,
        .app-public-action-group > .app-public-action-item,
        .app-public-action
    ) {
        width: auto;
        max-width: 100%;
    }

    .page-stack.ui-page-stack
    .app-page-intro-summary-support
    .app-public-action-bar {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        width: 100%;
    }

    .page-stack.ui-page-stack
    .app-page-intro-summary-support
    :is(
        .app-public-action-context,
        .app-public-action-context .social-channel-connect-widget,
        .app-public-action-context .social-channel-connect-link,
        .app-public-action-group,
        .app-public-action-group > .app-public-action-item,
        .app-public-action
    ) {
        width: auto;
    }

    .page-stack.ui-page-stack .app-public-action-context,
    .page-stack.ui-page-stack .app-public-action-context .social-channel-connect-widget,
    .page-stack.ui-page-stack .app-public-action-context .social-channel-connect-link {
        width: 100%;
    }

    .page-stack.ui-page-stack .app-public-action-group {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--app-component-flow-gap-mobile);
        width: 100%;
    }

    .page-stack.ui-page-stack
    .app-public-action-group:has(> .app-public-action-item:only-child) {
        grid-template-columns: minmax(0, max-content);
    }

    .page-stack.ui-page-stack
    .app-public-action-group:not(:has(.app-public-destination-action)) {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        width: auto;
    }

    .page-stack.ui-page-stack .app-public-action-group > .app-public-action-item,
    .page-stack.ui-page-stack .app-public-action {
        width: 100%;
        min-width: 0;
    }

    .page-stack.ui-page-stack
    .app-public-action-group > .app-public-action-item:has(
        .app-public-state-action:not(.app-public-state-action-labeled)
    ),
    .page-stack.ui-page-stack
    .app-public-state-action:not(.app-public-state-action-labeled) {
        flex: 0 0 var(--app-control-min-height);
        width: var(--app-control-min-height);
        min-width: var(--app-control-min-height);
    }

    .page-stack.ui-page-stack .app-page-intro-actions .app-public-action-bar {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        justify-content: stretch;
        gap: var(--app-component-flow-gap-mobile);
        width: 100%;
        margin-inline-start: 0;
    }

    .page-stack.ui-page-stack .app-page-intro-actions :is(
        .app-public-action-context,
        .app-public-action-context .social-channel-connect-widget,
        .app-public-action-group
    ) {
        width: 100%;
    }

    .page-stack.ui-page-stack .app-page-intro-actions .app-public-action-group {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .page-stack.ui-page-stack .app-page-intro-actions :is(
        .app-public-action-context .social-channel-connect-link,
        .app-public-action-group > .app-public-action-item,
        .app-public-action
    ) {
        width: auto;
    }

    .page-stack.ui-page-stack .museum-intro-map-trigger {
        width: auto;
        margin-inline-start: auto;
    }

    .page-stack.ui-page-stack
    .app-page-section-actions-stack-social > .app-public-action-bar {
        display: flex;
        flex-flow: row nowrap;
        align-items: stretch;
        justify-content: flex-start;
    }

    .page-stack.ui-page-stack
    .app-page-section-actions-stack-social
    :is(
        .app-public-action-context,
        .app-public-action-context .social-channel-connect-widget,
        .app-public-action-context .social-channel-connect-link,
        .app-public-action-group
    ) {
        width: auto;
        max-width: 100%;
        min-width: 0;
    }

    .page-stack.ui-page-stack
    .app-page-section-actions-stack-social .app-public-action-group {
        justify-self: start;
        justify-content: flex-start;
        flex-wrap: nowrap;
    }

    .page-stack.ui-page-stack
    .app-page-section-actions-stack-social > .social-channel-primary-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: var(--app-component-flow-gap-mobile);
        width: 100%;
    }

    .page-stack.ui-page-stack
    .app-page-section-actions-stack-social > .social-channel-primary-actions > .app-public-action-context {
        width: 100%;
    }

    .page-stack.ui-page-stack
    .app-page-section-actions-stack-social > .social-channel-primary-actions > .app-public-action-group {
        display: grid;
        grid-template-columns: var(--app-control-min-height) repeat(2, minmax(0, 1fr));
        align-items: stretch;
        width: 100%;
    }

    .page-stack.ui-page-stack
    .app-page-section-actions-stack-social > .social-channel-primary-actions
    .app-public-action-group > .app-public-action-item,
    .page-stack.ui-page-stack
    .app-page-section-actions-stack-social > .social-channel-primary-actions
    .app-public-action-group > .app-public-action-item > .app-public-action {
        width: 100%;
        min-width: 0;
    }

    .page-stack.ui-page-stack .social-channel-home-actions {
        --app-action-list-wrap: wrap;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .page-stack.ui-page-stack
    .social-channel-home-actions > :is(
        .social-channel-connect-section,
        .app-public-action-group
    ) {
        width: 100%;
    }

    .page-stack.ui-page-stack
    .social-channel-home-actions > .app-public-action-group {
        justify-content: flex-start;
    }
}

.page-stack.ui-page-stack .news-article-heading-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.page-stack.ui-page-stack
.news-article-heading-actions > .app-public-action-group {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    width: auto;
    margin-inline: auto;
}

.page-stack.ui-page-stack
.news-article-heading-actions > .app-public-action-group > .app-public-action-item,
.page-stack.ui-page-stack
.news-article-heading-actions > .app-public-action-group > .app-public-action-item > .app-public-action {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
}

.page-stack.ui-page-stack .news-social-coverage-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    justify-content: stretch;
    gap: var(--app-component-flow-gap-mobile);
    width: 100%;
}

.page-stack.ui-page-stack
.news-social-coverage-actions > :is(
    .social-channel-connect-section,
    .app-public-action-group
) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.page-stack.ui-page-stack
.news-social-coverage-actions > .app-public-action-group {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    gap: clamp(0.15rem, 1vw, var(--app-control-gap));
}

.page-stack.ui-page-stack
.news-social-coverage-actions .app-public-action-item {
    display: flex;
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
}

.page-stack.ui-page-stack
.news-social-coverage-actions .app-public-action {
    width: auto;
    min-width: 0;
    padding-inline: clamp(0.35rem, 1.5vw, var(--app-control-padding-x));
    justify-content: flex-start;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .page-stack.ui-page-stack
    .social-channel-official-section-actions > .app-public-action-bar,
    .page-stack.ui-page-stack
    .social-channel-official-section-actions :is(
        .social-channel-connect-section,
        .social-channel-connect-widget
    ) {
        justify-content: flex-start;
        margin-inline: 0;
        text-align: left;
    }
}

/* Collection actions belong to their heading; connection actions retain their
   shared two-line identity without inserting a separate section above cards. */
.page-stack.ui-page-stack .app-section-heading-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--app-control-gap);
    min-width: 0;
}
.page-stack.ui-page-stack .app-section-heading-with-actions > :is(
    .app-section-heading-actions, .app-public-action-bar
) {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    margin: 0;
}
.page-stack.ui-page-stack .app-section-heading-actions > .app-public-action-bar {
    width: auto;
    margin: 0;
}
.page-stack.ui-page-stack .social-channel-connect-link:focus-visible {
    outline: 2px solid var(--app-color-primary-text);
    outline-offset: 3px;
}
.page-stack.ui-page-stack .app-page-intro-actions .social-channel-official-section-actions {
    width: auto;
    margin: 0;
}
.page-stack.ui-page-stack .news-social-coverage-actions {
    margin-block-start: var(--app-component-flow-gap);
}
@media (max-width: 760px) {
    .page-stack.ui-page-stack .app-section-heading-with-actions {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto 2px;
    }
    .page-stack.ui-page-stack .app-section-heading-with-actions::after {
        grid-row: 3;
    }
    .page-stack.ui-page-stack .app-section-heading-with-actions > :is(
        .app-section-heading-actions, .app-public-action-bar
    ) {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
        max-width: 100%;
    }
    .page-stack.ui-page-stack .app-section-heading-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .page-stack.ui-page-stack .app-page-intro-actions,
    .page-stack.ui-page-stack .app-page-intro-actions .app-public-action-bar {
        justify-content: flex-start;
        margin-inline: 0;
    }
}

.page-stack.ui-page-stack .social-channel-connect-copy {
    overflow-wrap: anywhere;
    max-width: 100%;
}
@media (max-width: 760px) {
    .page-stack.ui-page-stack .app-section-heading-with-actions > .app-section-heading-actions {
        width: 100%;
    }
    .page-stack.ui-page-stack .app-section-heading-actions > .social-channel-home-actions {
        flex: 0 1 auto;
        max-width: 100%;
    }
}

/* Page Components */


.ui-section-stack,
.museum-detail-panel{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: var(--layout-section-gap);
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.ui-section-stack > *,
.museum-detail-panel > *{
    width: 100%;
    max-width: 100%;
}


.page-stack.ui-page-stack > .panel,
.page-stack.ui-page-stack > .ui-section-stack > .panel,
.page-stack.ui-page-stack > .ui-section-stack > .ui-legend-card,
.page-stack.ui-page-stack .museum-directory-card.museums-panel,
.page-stack.ui-page-stack .dashboard-card-wrap,
.museum-caution-card,
.museum-exhibition-pagination{
    padding: 0;
}

.ui-legend-card,
.museum-detail-main-panel,
.museum-section-block,
.dashboard-card-wrap,
.museum-directory-card{
    position: relative;
    display: grid;
    gap: var(--app-legend-gap);
    min-width: 0;
    overflow: visible;
    padding: 0;
}

.ui-icon-sprite{
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.museum-card-legend,
.museum-section-legend{
    position: absolute;
    top: var(--app-legend-top);
    left: var(--app-legend-left);
    margin: 0;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    inline-size: max-content;
    max-inline-size: var(--app-legend-max-inline-size);
    box-sizing: border-box;
    min-inline-size: max(8.4rem, max-content);
    min-height: var(--app-legend-min-height);
    padding: var(--app-legend-padding-y) calc(var(--app-legend-padding-x) + 0.58rem);
    border: 1px solid var(--ui-legend-border-standard);
    border-radius: 999px;
    background: var(--ui-legend-surface-standard);
    color: var(--ui-legend-text-standard);
    font-size: var(--app-legend-font-size);
    font-weight: 700;
    line-height: var(--app-legend-line-height);
    text-shadow: none;
    white-space: normal;
    overflow: visible;
    overflow-wrap: break-word;
    box-shadow:
        var(--shadow-soft);
    justify-content: center;
}

html body .sr-only {
    width: 1px;
    max-width: 1px;
    height: 1px;
}

.museum-caution-icon-inline {
    display: inline-grid;
    place-items: center;
    width: 1.12rem;
    height: 1.12rem;
    vertical-align: -0.16em;
}

.museum-caution-icon-inline svg {
    display: block;
    width: 1.08rem;
    height: 1.08rem;
    fill: none;
    stroke: currentColor;
    stroke-width: var(--app-icon-stroke-width-standard);
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* One non-sidebar empty-filter state across museum,
exhibition,
social,
* account,
and staff searches. Copy stays context-specific; presentation and
 * responsive behavior do not. */
.app-search-empty-state{
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0.72rem 0.82rem;
    border: 1px solid var(--app-border-color-standard);
    border-radius: var(--app-field-radius);
    background: var(--app-color-muted-surface);
    color: var(--app-text-color-body);
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1.35;
    text-align: left;
    overflow-wrap: anywhere;
}

.app-search-empty-state[hidden]{
    display: none;
}

.museum-card-legend span,
.museum-section-legend span{
    display: block;
    min-width: 0;
    max-inline-size: 100%;
    white-space: inherit;
    overflow-wrap: inherit;
    word-break: normal;
}

.ui-legend-icon{
    width: 0.95rem;
    height: 0.95rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: var(--app-icon-stroke-width-standard);
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: none;
}

.museum-search-panel-launch-orb{
    width: var(--app-action-launch-orb-size);
    height: var(--app-action-launch-orb-size);
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--app-overlay-accent-medium);
    background:
        var(--app-gradient-brand);
    box-shadow:
        var(--shadow-soft);
}

.museum-search-panel-launch-icon{
    width: var(--app-action-launch-icon-size);
    height: var(--app-action-launch-icon-size);
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.museum-search-panel-launch-copy{
    display: grid;
    gap: var(--app-action-launch-copy-gap);
}

.museum-search-panel-launch-copy strong{
    color: var(--app-color-link);
    font-size: var(--app-action-launch-title-size);
    font-weight: 650;
    letter-spacing: 0.01em;
}

.museum-search-panel-launch-copy span{
    color: var(--app-color-inverse-text);
    font-size: var(--app-action-launch-body-size);
    line-height: 1.35;
}

.utility-switcher-row{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--layout-section-gap);
    align-items: start;
    width: 100%;
    transition: grid-template-columns 0.38s ease;
}

.utility-switcher-row > *{
    min-width: 0;
    transition: transform 0.32s ease, opacity 0.28s ease;
}

.museum-directory-card.museums-panel{
    padding-top: calc(var(--app-surface-padding) + var(--app-surface-legend-clearance) + 1rem);
}

.dashboard-card-wrap{
    padding-top: calc(var(--app-surface-padding) + var(--app-surface-legend-clearance) + 0.05rem);
}

.museums-page-stack{
    gap: calc(var(--layout-section-gap) + 0.65rem);
}

.dashboard-page-stack{
    gap: calc(var(--layout-section-gap) * 2);
}

.museum-detail-page-stack{
    gap: calc(var(--layout-section-gap) + 0.45rem);
}

.museum-caution-card,
.museum-exhibition-pagination,
.museum-exhibition-card,
.museum-exhibition-item{
    border: 1px solid var(--ui-border-standard);
}

.museum-detail-main-panel,
.museum-explorer-section,
.museum-section-block{
    border: 1px solid var(--ui-border-standard);
    border-radius: 16px;
    background: var(--card-surface-soft);
    box-shadow: var(--shadow-soft);
}

.museum-exhibition-pagination,
.museum-section-info-card,
.museum-exhibition-card,
.museum-exhibition-item,
.museum-card{
    background: var(--card-surface-soft);
    box-shadow: var(--shadow-soft);
}


.auth-panel,
.dashboard-card-wrap,
.museum-exhibition-pagination:not([hidden]):not([data-museum-directory-pagination]):not(.museum-exhibition-carousel-pagination),
.museum-section-info-card,
.museum-card,
.dashboard-menu-card{
    display: grid;
    grid-template-columns: auto auto auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    padding: 0.72rem 0.8rem;
    border: 1px solid var(--ui-border-standard);
    border-radius: 14px 14px 0 0;
    text-decoration: none;
    background: var(--app-overlay-accent-subtle);
    color: var(--app-color-link);
}

.museum-directory-card{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--app-legend-gap);
    align-items: start;
}

.museum-exhibition-card,
.museum-exhibition-item{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: 0;
    padding: 0;
    align-items: stretch;
}

.museum-detail-main-panel{
    padding: calc(var(--app-surface-padding) + 2.35rem) calc(var(--app-surface-padding) + 0.2rem) calc(var(--app-surface-padding) + 0.25rem);
}

.museum-explorer-section{
    margin-top: 1.2rem;
    padding: calc(var(--app-surface-padding) + 2.2rem) calc(var(--app-surface-padding) + var(--museum-detail-inner-inset)) calc(var(--app-surface-padding) + 3.2rem);
}

.museum-explorer-section > .museum-section-legend{
    top: calc(var(--app-legend-top) - 0.4rem);
}

.museum-section-block{
    padding: calc(var(--app-surface-padding) + 1.9rem) calc(var(--app-surface-padding) + var(--museum-detail-inner-inset)) calc(var(--app-surface-padding) + 0.55rem);
}

.museum-section-block > .museum-section-legend{
    top: var(--app-legend-top);
}

.museum-grid:not([data-mobile-carousel]),
.dashboard-menu-grid:not([data-mobile-carousel]){
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: var(--layout-section-gap);
    min-width: 0;
    padding: 0;
    margin: 0;
}

.dashboard-card-wrap .dashboard-menu-grid:not([data-mobile-carousel]){
    padding-top: 1.15rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    align-items: stretch;
}

.dashboard-menu-grid:not([data-mobile-carousel]){
    justify-content: start;
}

.dashboard-card-wrap .dashboard-menu-card{
    width: 100%;
    min-width: 0;
    justify-self: stretch;
}

.dashboard-menu-grid:not([data-mobile-carousel]) > .dashboard-menu-card,
.dashboard-menu-grid:not([data-mobile-carousel]) > .museum-card{
    width: 100%;
    min-width: 0;
    max-width: 100%;
    justify-self: stretch;
}

.dashboard-menu-card{
    width: min(20%, 18rem);
    min-width: 14rem;
    justify-self: start;
}

.museum-card,
.dashboard-menu-card{
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 0.65rem;
    align-content: start;
    min-height: 100%;
    border-radius: var(--app-surface-radius);
    text-decoration: none;
    background: var(--card-surface-soft);
    color: var(--app-color-link);
}

.museum-card-title,
.dashboard-menu-card .museum-card-title{
    margin: 0;
    color: var(--app-text-color-heading);
    font-size: var(--app-card-title-size);
    line-height: var(--app-card-title-line-height);
}

.dashboard-menu-card .museum-card-title{
    justify-self: center;
    text-align: center;
    font-size: var(--app-feature-card-title-size);
    line-height: var(--app-feature-card-title-line-height);
}

.dashboard-menu-copy{
    max-width: 28ch;
    justify-self: center;
    text-align: left;
    color: var(--app-text-color-body);
    font-size: var(--app-body-copy-size);
    line-height: var(--app-body-copy-line-height);
}

.museum-card-main-link{
    display: grid;
    gap: 0.38rem;
    width: 100%;
    text-decoration: none;
}

.museum-card-head{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
}

.museum-card-head .museum-card-title{
    text-align: left;
}

.museum-freshness-badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    justify-self: end;
    align-self: center;
    min-height: 1.55rem;
    padding: 0.18rem 0.52rem;
    border-radius: 999px;
    border: 1px solid var(--app-overlay-accent-medium);
    font-size: var(--app-badge-font-size);
    font-weight: 650;
    letter-spacing: var(--app-badge-letter-spacing);
    text-transform: uppercase;
    color: var(--app-color-link);
    background: var(--app-gradient-brand);
    box-shadow: var(--shadow-soft);
}

.museum-freshness-badge.is-fresh{
    border-color: var(--app-overlay-success-soft);
    color: var(--app-color-success);
    background: var(--app-gradient-muted);
}

.museum-freshness-badge.is-warning{
    border-color: var(--app-overlay-accent-medium);
    color: var(--app-color-link);
    background: var(--app-gradient-brand);
}

.museum-freshness-badge.is-stale,
.museum-freshness-badge.is-empty{
    border-color: var(--app-overlay-danger-soft);
    color: var(--app-color-danger);
    background: var(--app-gradient-brand);
}

@media (max-width: 980px) {
    .utility-switcher-row{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .utility-switcher-row:not(.has-active-tool){
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .utility-switcher-row .museum-search-panel-launch-orb{
        width: var(--app-action-launch-collapsed-mobile-orb-size);
        height: var(--app-action-launch-collapsed-mobile-orb-size);
    }

    .utility-switcher-row .museum-search-panel-launch-icon{
        width: var(--app-action-launch-collapsed-mobile-icon-size);
        height: var(--app-action-launch-collapsed-mobile-icon-size);
    }

    .utility-switcher-row .museum-search-panel-launch-copy{
        justify-items: center;
        gap: 0.08rem;
        text-align: center;
    }

    .utility-switcher-row .museum-search-panel-launch-copy strong{
        font-size: var(--app-action-launch-collapsed-mobile-title-size);
        line-height: 1.15;
        letter-spacing: 0.01em;
    }

    .utility-switcher-row .museum-search-panel-launch-copy span{
        display: none;
    }

    .utility-switcher-row .utility-switcher-tab,
.utility-switcher-row .utility-switcher-tab.is-active{
        min-height: var(--app-action-launch-collapsed-mobile-min-height);
        height: var(--app-action-launch-collapsed-mobile-min-height);
        max-height: var(--app-action-launch-collapsed-mobile-min-height);
        padding: var(--app-action-launch-collapsed-mobile-padding-y) var(--app-action-launch-collapsed-mobile-padding-x);
        border-radius: var(--app-action-launch-collapsed-mobile-radius);
    }

    .utility-switcher-row .utility-switcher-tab.is-active{
        transform: none;
    }

}

/* Reusable public information pages: Privacy, Sitemap, RSS, and future peers. */
.public-information-sections,
.public-information-link-groups {
    display: grid;
    gap: var(--app-panel-stack-gap-tight);
    min-width: 0;
}

.public-information-link-groups {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    align-items: start;
}

.public-information-section,
.public-information-link-group {
    display: grid;
    gap: var(--app-control-gap);
    min-width: 0;
}

.public-information-section :is(h2, p, ul),
.public-information-link-group :is(h2, ul) {
    margin: 0;
}

.public-information-section ul,
.public-information-link-group ul {
    display: grid;
    gap: var(--app-control-gap);
    padding-inline-start: 1.2rem;
}

.public-information-updated {
    margin: 0;
}

.public-information-actions {
    margin-top: var(--app-control-gap);
}



/* Museum detail cards: keep text clear of the bottom-right favorite button */
.museum-detail-page-stack .museum-exhibition-list .museum-exhibition-content{
    padding: var(--app-surface-padding-standard) var(--app-surface-padding-standard) 2.3rem;
}

/* Museum detail cards: place favorite heart at bottom-right */
.museum-detail-page-stack .museum-exhibition-list .museum-exhibition-item .favorite-toggle-btn-corner{
    top: auto;
    right: 0.2rem;
    bottom: 0.12rem;
}

.museum-experience-page-stack .museum-feature-section,
.museum-experience-page-stack .museum-detail-exhibition-section{
    display: grid;
    align-items: start;
    gap: var(--app-component-flow-gap);
    width: 100%;
    min-width: 0;
}

.museum-experience-page-stack .museum-explorer-card,
.museum-experience-page-stack [data-museum-selection-panels],
.museum-experience-page-stack .museum-feature-exhibitions-host{
    display: grid;
    align-items: start;
    gap: var(--app-component-flow-gap);
    width: 100%;
    min-width: 0;
}

.museum-experience-page-stack
[data-museum-directory-combined-search-status]:empty,
.museum-experience-page-stack
[data-museum-directory-combined-search-results][hidden],
.museum-experience-page-stack
[data-museum-directory-combined-search-empty][hidden],
.museum-experience-page-stack [data-museum-directory-results][hidden]{
    display: none;
}

.museum-experience-page-stack .museum-directory-combined-results{
    width: 100%;
    min-width: 0;
}

.museum-experience-page-stack .museum-explorer-feature{
    padding-top: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.museum-experience-page-stack
.museum-feature-exhibitions-host[hidden]{
    display: none;
}

.museum-experience-page-stack .museum-feature-showcase{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--app-section-flow-gap);
    width: 100%;
    min-width: 0;
}

.museum-experience-page-stack .museum-feature-card{
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.museum-experience-page-stack .museum-feature-card-rail{
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
}

.museum-experience-page-stack .museum-feature-media{
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.museum-experience-page-stack .museum-feature-media .museum-card-image{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.museum-experience-page-stack .museum-feature-copy{
    display: grid;
    align-content: start;
    gap: var(--app-control-gap);
    min-width: 0;
}

.museum-experience-page-stack .museum-feature-copy > :is(h2, p){
    margin: 0;
}

.museum-experience-page-stack :is(
    .museum-directory-selected-count,
    .museum-directory-selected-copy
){
    display: none;
    margin: 0;
}

.museum-experience-page-stack .museum-feature-exhibitions{
    display: grid;
    align-items: start;
    gap: var(--app-component-flow-gap);
    width: 100%;
    min-width: 0;
}

.museum-experience-page-stack .museum-feature-exhibitions-title{
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: var(--app-control-gap);
    margin: 0;
    color: var(--app-color-primary-text);
    font-family: var(--app-font-family-editorial);
    font-size: var(--app-section-heading-size);
    line-height: var(--app-type-h3-line-height);
}

.museum-experience-page-stack .museum-feature-exhibitions-title .ui-legend-icon{
    flex: 0 0 auto;
}

.museum-experience-page-stack .museum-section-choice-card{
    position: relative;
}

.museum-experience-page-stack .museum-section-choice-card .museum-exhibition-title{
    color: var(--app-text-color-heading);
    font-family: var(--app-font-family-display);
    font-size: var(--app-type-h3-size);
    line-height: var(--app-type-h3-line-height);
}

.museum-experience-page-stack .museum-section-choice-card > .app-card-media
.museum-exhibition-image{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

html body #mainContent .page-stack.ui-page-stack.museum-experience-page-stack
.museum-feature-card-rail > .museum-feature-card.app-featured-card{
    overflow: visible;
}

@media (max-width: 980px){
    html body #mainContent .page-stack.ui-page-stack.museum-experience-page-stack
    .museum-feature-card-rail > .museum-feature-card.app-featured-card{
        height: auto;
        min-height: var(--app-standard-card-height);
        max-height: none;
    }
}

html body #mainContent .page-stack.ui-page-stack.museum-experience-page-stack
.museum-feature-card-rail > .museum-feature-card.app-featured-card
> .museum-feature-action-line{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: calc(100% - 4px);
    min-height: 0;
    overflow: visible;
}

.museum-experience-page-stack .museum-feature-sections{
    display: grid;
    align-content: stretch;
    min-width: 0;
    min-height: 0;
}

.museum-experience-page-stack .museum-section-selector{
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.museum-experience-page-stack .museum-directory-card .museum-card-action-link.is-active{
    background: var(--app-surface-selected);
    color: var(--app-interactive-hover-text);
}

.museum-experience-page-stack
.museum-section-choice-card.is-selected
.app-card-action-link.is-active{
    background: var(--app-surface-selected);
    color: var(--app-color-primary-action);
}

.museum-experience-page-stack [data-museum-section-status]:empty{
    display: none;
}

.museum-experience-page-stack [data-museum-selected-section-content][hidden]{
    display: none;
}

@media (min-width: 981px){
    .museum-experience-page-stack .museum-feature-showcase{
        grid-template-columns: minmax(0, 1.22fr) minmax(22rem, 0.78fr);
        align-items: stretch;
    }

    .museum-experience-page-stack .museum-section-choice-card
    .museum-exhibition-description-shell{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .museum-experience-page-stack .museum-section-choice-card
    > .app-card-media{
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        height: 100%;
        min-height: 100%;
        max-height: none;
        border-radius:
            var(--app-standard-card-radius)
            0
            0
            var(--app-standard-card-radius);
    }
}

.museum-experience-page-stack :is(
    .museum-explorer-feature,
    .museum-feature-exhibitions-host
){
    scroll-margin-top: calc(
        var(--app-shell-header-height, 5rem)
        + var(--layout-section-gap)
    );
}

.museum-detail-page-stack .museum-section-overview-label{
    color: var(--app-color-link);
    font-weight: 900;
}

.museum-detail-page-stack .museum-detail-exhibition-section{
    display: grid;
    align-items: start;
    gap: var(--app-component-flow-gap);
    width: 100%;
    min-width: 0;
}

.museum-detail-page-stack [data-museum-navigation-section]{
    scroll-margin-top: calc(var(--app-shell-header-height, 5rem) + var(--layout-section-gap));
}

.museum-detail-page-stack .museum-detail-child-sections{
    display: grid;
    gap: clamp(1.2rem, 2.5vw, 2rem);
    min-width: 0;
}

.museum-detail-page-stack .museum-detail-child-section{
    display: grid;
    gap: var(--app-component-flow-gap);
    min-width: 0;
}

.museum-detail-page-stack .museum-detail-child-title{
    margin: 0;
    color: var(--app-color-primary-text);
    font-family: var(--app-font-family-editorial);
    font-size: clamp(1rem, 1.4vw, 1.18rem);
    font-weight: 850;
    line-height: 1.25;
}

.museum-detail-page-stack .museum-detail-main-panel > .museum-caution-card{
    align-items: start;
    border: 0;
    outline: 0;
    background: transparent;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
}

.museum-detail-page-stack .museum-detail-actions{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--home-action-gap, 0.74rem);
}

.museum-detail-page-stack .museum-detail-actions > .home-action-button{
    width: auto;
    min-width: 0;
}

.museum-detail-page-stack .museum-detail-intro {
    padding-block: clamp(0.2rem, 1vw, 0.6rem);
}

.museum-detail-page-stack .museum-detail-identity-section > .museum-detail-guidance-card{
    inline-size: 100%;
    width: 100%;
    max-inline-size: none;
    max-width: none;
    min-width: 0;
    justify-self: stretch;
    box-sizing: border-box;
}

.museum-detail-page-stack .museum-detail-guidance-card .museum-caution-copy{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 0.45rem;
    width: 100%;
    min-width: 0;
}

.museum-detail-page-stack .museum-detail-guidance-card .museum-caution-icon-inline{
    display: inline-grid;
    place-items: center;
    width: 1.12rem;
    height: 1.12rem;
    margin: 0.1rem 0 0;
}

.museum-detail-page-stack .museum-detail-guidance-card .museum-caution-icon-inline svg{
    width: 1.08rem;
    height: 1.08rem;
}

.museum-exhibition-title,
.museum-exhibition-title-static{
    color: var(--app-color-primary-text);
    text-decoration: none;
    font-weight: 800;
    line-height: 1.3;
}

.museum-detail-page-stack a.museum-exhibition-title:hover,
.museum-detail-page-stack a.museum-exhibition-title:focus-visible{
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

.museum-exhibition-date{
    color: var(--app-color-secondary-text);
}

.museum-exhibition-description-shell{
    margin-top: 0.1rem;
    color: var(--app-color-secondary-text);
    line-height: 1.55;
}

.museum-clear-confirmation{
    display: grid;
    gap: 0.45rem;
}

.museum-clear-confirmation-label{
    color: var(--app-color-link);
    font-weight: 700;
}

.modal-card{
    position: relative;
}

.museum-action-modal-card{
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 1rem;
    width: min(72rem, calc(100vw - 2rem));
    height: min(48rem, calc(100vh - 2rem));
    min-width: 0;
    max-width: 100%;
    max-height: calc(100vh - 2rem);
    overflow: hidden;
}

.museum-action-modal-head{
    display: flex;
    align-items: start;
    gap: 1rem;
}

.museum-modal-close{
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--app-overlay-accent-subtle);
    color: var(--app-overlay-accent-medium);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
    z-index: 2;
}

.museum-modal-close:hover:not(:disabled){
    background: var(--app-overlay-accent-soft);
    color: var(--app-color-primary-action);
    transform: translateY(-1px);
}

.museum-modal-close:focus-visible:not(:disabled){
    background: var(--app-overlay-accent-soft);
    outline: 2px solid var(--app-color-focus);
    outline-offset: 2px;
}

.museum-modal-close:disabled{
    opacity: 0.45;
    cursor: not-allowed;
}

.museum-action-modal-close{
    flex: 0 0 auto;
}

.museum-action-progress{
    display: grid;
    gap: 0.65rem;
}

.museum-action-progress-bar-shell{
    width: 100%;
    height: 0.85rem;
    overflow: hidden;
    border-radius: 999px;
    border: 1px solid var(--app-overlay-accent-medium);
    background: var(--app-overlay-accent-subtle);
}

.museum-action-progress-bar{
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background:
        var(--app-gradient-brand);
    box-shadow: var(--shadow-soft);
    transition: width 0.35s ease;
}

.museum-action-progress-meta{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.85rem;
}

.museum-action-progress-meta #museumActionProgressMessage{
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.museum-action-progress-meta #museumActionProgressPercent{
    flex: 0 0 auto;
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
}

.museum-action-report-shell{
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 1rem;
    min-height: 0;
}

.museum-action-explorer{
    padding-top: calc(var(--app-surface-padding) + var(--app-surface-legend-clearance-tight));
}

.museum-action-panel{
    display: grid;
    gap: 0.55rem;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.museum-action-report-table-shell{
    min-height: 0;
    height: 100%;
    max-height: none;
    overflow: auto;
    border: 1px solid var(--app-overlay-accent-medium);
    border-radius: 14px;
    background: var(--app-overlay-brand-medium);
}

.museum-action-report-shell .museum-tabs{
    margin-bottom: -0.15rem;
}

.museum-action-panel[hidden]{
    display: none;
}

.museum-action-report-table{
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    color: var(--app-color-link);
}

.museum-action-report-table th,
.museum-action-report-table td{
    padding: 0.7rem 0.8rem;
    border-bottom: 1px solid var(--app-overlay-accent-soft);
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}

.museum-action-report-table th{
    position: sticky;
    top: 0;
    background: var(--app-overlay-brand-strong);
    color: var(--app-color-inverse-text);
    z-index: 1;
}

.museum-action-report-table td{
    color: var(--app-color-primary-text);
}

.museum-action-report-table a{
    color: var(--app-color-link);
    white-space: nowrap;
}

.museum-action-status-badge{
    display: inline-flex;
    align-items: center;
    min-height: 1.55rem;
    padding: 0.22rem 0.5rem;
    border: 1px solid var(--app-overlay-accent-medium);
    border-radius: 999px;
    background: var(--app-overlay-accent-subtle);
    color: var(--app-color-primary-text);
    font-size: 0.76rem;
    font-weight: 850;
    line-height: 1;
    text-transform: capitalize;
    white-space: nowrap;
}

.museum-action-modal-actions{
    grid-template-columns: auto;
    justify-content: center;
}

#museumActionCloseBtn{
    justify-self: center;
    min-width: 18rem;
}

.museum-explorer-section{
    position: relative;
}

.museum-detail-page-stack .museum-panel[hidden],
.museum-detail-page-stack .museum-subpanel[hidden]{
    display: none;
}

.museum-detail-page-stack .museum-section-cards-shell{
    position: relative;
    display: grid;
    justify-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.museum-detail-page-stack .museum-panel,
.museum-detail-page-stack .museum-subpanel{
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

html body #mainContent .page-stack.ui-page-stack.museum-detail-page-stack .museum-explorer-section{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(0.55rem, 1.2vw, 0.85rem);
}

html body #mainContent .page-stack.ui-page-stack.museum-detail-page-stack .museum-explorer-section > :is(
    .museum-exhibition-pagination-status,
    [data-museum-panel]
){
    grid-column: 1 / -1;
}

html body #mainContent .page-stack.ui-page-stack.museum-detail-page-stack .museum-explorer-section > .museum-explorer-local-search{
    grid-column: 1 / -1;
    grid-row: auto;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    margin: 0;
}

@media (max-width: 620px) {
    .museum-detail-page-stack .museum-detail-actions{
        grid-template-columns: minmax(0, 1fr);
    }

}

@media (min-width: 761px) {

    html body #mainContent .museum-detail-page-stack .museum-detail-main-panel > .museum-explorer-section{
        margin-top: 0;
        padding-top: 0;
    }

    .museum-explorer-section > .museum-section-legend + *{
        margin-top: var(--app-component-flow-gap);
    }
}

.museum-subtabs-shell{
    display: grid;
    gap: 0.9rem;
}

.museum-subtabs{
    margin-top: 0.2rem;
}

.museum-subpanel[hidden]{
    display: none;
}

.museum-exhibition-pagination:not([hidden]):not([data-museum-directory-pagination]):not(.museum-exhibition-carousel-pagination){
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.9rem 1.15rem;
    margin: 0;
    border-radius: var(--app-surface-radius);
}

.museum-exhibition-pagination-left,
.museum-exhibition-pagination-right,
.museum-pagination-track{
    display: flex;
    align-items: center;
    gap: var(--app-pagination-inline-gap);
    flex-wrap: wrap;
}

.museum-exhibition-pagination-left{
    justify-self: start;
}

.museum-exhibition-pagination-right{
    justify-self: center;
    justify-content: center;
}

.museum-pagination-track{
    justify-content: center;
}

.museum-exhibition-pagination-status{
    justify-self: end;
    text-align: right;
}

.museum-exhibition-page-size-label{
    display: inline-flex;
    align-items: center;
    gap: var(--app-pagination-label-gap);
}

.museum-exhibition-pagination-status,
.museum-search-empty{
    color: var(--app-color-secondary-text);
}

.dashboard-menu-card:hover,
.museum-pagination-btn:hover:not(:disabled),
.museum-pagination-page:hover:not(:disabled),
.museum-search-clear-btn:hover:not(:disabled),
.museum-search-clear-filters-btn:hover:not(:disabled){
    transform: translateY(-1px);
    border-color: var(--ui-hover-border-light);
    box-shadow: var(--ui-hover-shadow-standard);
}

.dashboard-menu-card:active,
.museum-pagination-btn:active,
.museum-pagination-page:active{
    transform: translateY(0);
}

@media (max-width: 700px) {

    .museum-action-modal-card{
        width: calc(100vw - 1rem);
        height: calc(100vh - 1rem);
        max-height: calc(100vh - 1rem);
        padding: 1rem;
    }

    .museum-action-modal-head,
.museum-action-progress-meta{
        display: grid;
    }

    .museum-action-progress-meta #museumActionProgressMessage,
.museum-action-progress-meta #museumActionProgressPercent{
        margin-left: 0;
        text-align: left;
    }

    .museum-detail-page-stack .museum-exhibition-list{
        gap: 0.58rem;
    }

    .museum-detail-page-stack .museum-exhibition-list .museum-exhibition-item:not(.museum-section-info-card){
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        grid-template-rows: none;
        align-items: stretch;
        min-height: var(--app-standard-card-height, 23rem);
        border-radius: 12px;
    }

    .museum-detail-page-stack .museum-exhibition-list .museum-exhibition-image-link{
        grid-column: auto;
        grid-row: auto;
        flex: 0 0 var(--app-standard-card-media-height, 10.4rem);
        min-height: var(--app-standard-card-media-height, 10.4rem);
        height: var(--app-standard-card-media-height, 10.4rem);
    }

    .museum-detail-page-stack .museum-exhibition-list .museum-exhibition-image{
        aspect-ratio: auto;
        min-height: 100%;
        height: 100%;
        object-fit: cover;
    }

    .museum-detail-page-stack .museum-exhibition-list .museum-exhibition-content{
        grid-column: auto;
        grid-row: auto;
        align-content: start;
        gap: 0.3rem;
        padding:
            var(--app-standard-card-copy-top, 0.72rem)
            var(--app-standard-card-copy-inline, 0.84rem)
            var(--app-standard-card-copy-bottom, 0.88rem);
        min-width: 0;
    }

    .museum-detail-page-stack .museum-exhibition-list .museum-exhibition-title,
.museum-detail-page-stack .museum-exhibition-list .museum-exhibition-title-static{
        font-size: var(--app-standard-card-title-size, 0.98rem);
        line-height: 1.2;
    }

    .museum-detail-page-stack .museum-exhibition-list .museum-exhibition-date{
        font-size: var(--app-standard-card-meta-size, 0.8rem);
        line-height: 1.24;
    }

    .museum-detail-page-stack .museum-exhibition-list .museum-exhibition-item:not(.museum-section-info-card) .museum-exhibition-description-shell{
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    .museum-detail-page-stack .museum-exhibition-list .museum-exhibition-item .favorite-toggle-btn-corner{
        top: auto;
        right: var(--app-standard-card-control-bottom, 0.62rem);
        bottom: var(--app-standard-card-control-bottom, 0.62rem);
    }

    .museum-exhibition-pagination:not([hidden]):not([data-museum-directory-pagination]):not(.museum-exhibition-carousel-pagination){
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.4rem;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .museum-exhibition-pagination-left,
.museum-exhibition-pagination-right,
.museum-pagination-track,
.museum-exhibition-page-size-label{
        flex-wrap: nowrap;
    }

    .museum-exhibition-pagination-left,
.museum-exhibition-pagination-right,
.museum-exhibition-pagination-status,
.museum-pagination-track{
        min-width: 0;
    }

    .museum-exhibition-pagination-left{
        flex: 0 0 auto;
    }

    .museum-exhibition-pagination-right{
        justify-self: center;
        gap: 0.3rem;
    }

    .museum-pagination-track{
        flex: 0 1 auto;
        justify-content: center;
        gap: 0.25rem;
        overflow: hidden;
    }

    .museum-exhibition-pagination-status{
        justify-self: end;
        max-width: 5.9rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: right;
        font-size: var(--app-toggle-font-size);
        line-height: 1.2;
        letter-spacing: 0.01em;
        opacity: 0.92;
    }

    .museum-exhibition-page-size-label{
        gap: 0.22rem;
        white-space: nowrap;
        font-size: var(--app-toggle-font-size);
    }

    .museum-pagination-btn,
.museum-pagination-page{
        min-height: 1.9rem;
        padding: 0.2rem 0.44rem;
        font-size: var(--app-toggle-font-size);
        line-height: 1.15;
    }

    .museum-pagination-page,
.museum-pagination-btn{
        min-width: 1.9rem;
    }

    .museum-pagination-page-indicator{
        min-width: 3.4rem;
        padding-inline: 0.55rem;
        cursor: default;
    }

    .museum-pagination-ellipsis{
        font-size: var(--app-toggle-font-size);
        line-height: 1.15;
    }
}



/* Public Museum directory/detail vertical presentation. */
.museum-experience-page-stack :is(
    .museum-grid,
    .museum-result-grid,
    .museum-exhibition-grid
){
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(min(100%, 240px), 1fr)
    );
    gap: var(--layout-section-gap);
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: visible;
}

.museum-experience-page-stack .museum-local-search{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    gap: var(--app-control-gap);
}


.museum-experience-page-stack .museum-result-type-links{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--app-control-gap);
    min-width: 0;
}
.museum-experience-page-stack [data-museum-search-results]{
    display: grid;
    gap: var(--layout-section-gap);
    min-width: 0;
}


.museum-experience-page-stack .museum-result-type-links .app-text-link{
    display: inline-flex;
    align-items: center;
    min-height: var(--app-control-height, 2.625rem);
    padding: var(--app-control-padding-y) var(--app-control-padding-x);
    border: 1px solid var(--app-border-color-standard);
    border-radius: var(--app-control-radius);
    background: var(--app-surface-card);
    color: var(--app-color-primary-action);
    text-decoration: none;
}

.museum-experience-page-stack .museum-result-type-links .app-text-link.is-active{
    border-color: var(--app-color-primary-action);
    background: var(--app-color-primary-action);
    color: var(--app-color-on-primary-action);
}
.museum-detail-page-stack :is(
    .museum-detail-search-results[hidden],
    [data-museum-detail-search-empty][hidden],
    [data-museum-selected-section-content][hidden]
){
    display: none;
}

.museum-experience-page-stack .museum-search-groups,
.museum-experience-page-stack .museum-search-group,
.museum-experience-page-stack .museum-detail-exhibitions{
    display: grid;
    gap: var(--app-component-flow-gap);
    min-width: 0;
}

.museum-detail-page-stack .museum-section-select-shell{
    display: grid;
    gap: var(--app-control-gap);
}

.museum-detail-page-stack .museum-section-select-shell[hidden]{
    display: none;
}

.museum-detail-page-stack [data-museum-selected-section-content]{
    display: grid;
    gap: var(--app-component-flow-gap);
    min-width: 0;
}

.museum-detail-page-stack .museum-exhibition-card.is-selected{
    border-color: var(--app-color-primary-action);
    box-shadow: var(--shadow-soft);
}

.museum-detail-page-stack .museum-selected-exhibition-label{
    margin: 0;
    color: var(--app-color-primary-action);
    font-weight: 800;
}

.museum-detail-page-stack [id^="exhibition-"]{
    scroll-margin-top: calc(
        var(--app-shell-header-height, 5rem)
        + var(--layout-section-gap)
    );
}
.museum-detail-page-stack .museum-section-selector > li{
    min-width: 0;
    min-height: 0;
    list-style: none;
}

.museum-detail-page-stack .museum-section-choice-card{
    color: var(--app-color-primary-text);
    text-decoration: none;
}

.museum-experience-page-stack .museum-section-card-selection-control{
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    border-radius: inherit;
    color: transparent;
    cursor: pointer;
}

.museum-experience-page-stack .museum-section-card-selection-control:focus-visible{
    outline: 2px solid var(--app-color-primary-action);
    outline-offset: -4px;
}

html body #mainContent .page-stack.ui-page-stack.museum-detail-page-stack
.museum-section-choice-card:is(.is-selected, .is-active){
    border-color: var(--app-color-primary-action);
    background: var(--app-surface-selected);
}

@media (min-width: 981px){
    .museum-detail-page-stack .museum-detail-feature-showcase{
        --museum-section-card-height: var(--app-horizontal-card-height);
        grid-template-columns: minmax(0, 1.22fr) minmax(22rem, 0.78fr);
        align-items: stretch;
        height: calc(27rem + var(--app-standard-card-gap));
    }

    .museum-detail-page-stack .museum-detail-feature-showcase > .museum-feature-card-rail,
    .museum-detail-page-stack .museum-detail-feature-showcase
    > .museum-feature-card-rail > .museum-detail-identity-card{
        height: 100%;
        min-height: 0;
        max-height: 100%;
    }

    html body #mainContent .page-stack.ui-page-stack.museum-detail-page-stack
    .museum-feature-card-rail > .museum-detail-identity-card.app-featured-card{
        height: 100%;
        min-height: 0;
        max-height: 100%;
    }

    .museum-detail-page-stack .museum-detail-section-selector{
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .museum-detail-page-stack .museum-detail-section-selector > :is(
        .app-card-carousel-frame,
        .museum-section-selector
    ){
        flex: 1 1 0;
        min-height: 0;
        overflow: hidden;
    }

    .museum-detail-page-stack .museum-section-selector{
        display: grid;
        grid-auto-rows: var(--museum-section-card-height);
        align-content: start;
        gap: var(--app-standard-card-gap);
        height: 100%;
        min-height: 0;
        padding-inline-end: 0.25rem;
        overflow: hidden;
        overscroll-behavior: contain;
    }

    .museum-detail-page-stack .museum-section-selector > li,
    .museum-detail-page-stack .museum-section-choice-card{
        height: 100%;
    }

    .museum-detail-page-stack .museum-section-choice-card{
        display: grid;
        grid-template-columns: minmax(6.4rem, 0.34fr) minmax(0, 0.66fr);
        grid-template-rows: minmax(0, 1fr);
        min-height: 0;
        overflow: hidden;
    }

    html body #mainContent .page-stack.ui-page-stack.museum-detail-page-stack
    .museum-section-selector > .museum-section-choice-card.app-standard-card{
        height: var(--museum-section-card-height);
        min-height: 0;
        max-height: var(--museum-section-card-height);
    }

    .museum-detail-page-stack .museum-section-choice-card > .app-card-media{
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        height: 100%;
        min-height: 0;
        border-radius: var(--app-standard-card-radius) 0 0 var(--app-standard-card-radius);
    }

    .museum-detail-page-stack .museum-section-choice-card .museum-exhibition-image{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .museum-detail-page-stack .museum-section-choice-card > .museum-exhibition-content{
        display: grid;
        grid-column: 2;
        grid-row: 1;
        align-content: center;
        gap: 0.32rem;
        min-width: 0;
        padding: var(--app-control-padding-y) var(--app-control-padding-x);
    }

    .museum-detail-page-stack .museum-section-choice-card .museum-exhibition-title{
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        font-size: clamp(0.88rem, 1.05vw, 1rem);
    }
}

@media (max-width: 760px){
    /* The native section select is the sole section navigator on phones. */
    .museum-detail-page-stack .museum-detail-section-selector{
        display: none;
    }

    .museum-experience-page-stack :is(
        .museum-grid,
        .museum-result-grid,
        .museum-exhibition-grid
    ){
        grid-template-columns: minmax(0, 1fr);
    }
}


/*
 * Canonical My Account page shell.
 *
 * Shared cards, carousels, and search inputs keep their own component owners.
 */

.account-favorite-link .museum-exhibition-title,
.account-favorite-link .museum-exhibition-date {
    text-align: left;
    max-width: none;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.account-favorite-link .museum-exhibition-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-clamp: 2;
    min-height: calc(1.3em * 2);
    color: inherit;
    text-decoration: none;
}

.account-favorite-link .museum-exhibition-title:hover,
.account-favorite-link .museum-exhibition-title:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.16em;
}

.account-favorite-link .museum-exhibition-date {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-clamp: 2;
    min-height: calc(1.35em * 2);
}

.account-favorite-item .favorite-toggle-btn-corner {
    top: auto;
    right: 0.35rem;
    bottom: 0.3rem;
}

/* My Account navigation shell ownership. */
.page-stack.ui-page-stack.account-settings-page-stack [data-account-favorites-panel][hidden] {
    display: none;
}

/* The six-card initial contract must hold before page JavaScript finishes (and
 * remain safe if it cannot run). The collection controller takes ownership as
 * soon as it has rendered the matching Load more state. */
[data-account-card-collection]:not(.is-account-card-collection-ready)
> .app-standard-card:nth-child(n + 7) {
    display: none;
}

.account-settings-page-stack :is(
    [data-account-section-menu],
    [data-account-section-content],
    [data-account-workspace-search],
    [data-account-detail-breadcrumb]
)[hidden] {
    display: none;
}

.account-detail-password-mask {
    display: inline-block;
}

.account-settings-page-stack .page-head-intro span {
    color: var(--app-text-color-body);
}

.account-settings-page-stack .account-section-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--app-section-flow-gap);
}

.account-settings-page-stack .account-section-menu-card {
    position: relative;
    display: grid;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: visible;
    border: 1px solid var(--app-border-color-standard);
    border-radius: var(--app-surface-radius-standard, 14px);
    background:
        var(--app-gradient-brand);
    box-shadow:
        var(--shadow-soft);
}

.account-settings-page-stack .account-section-menu-card > .account-section-menu-legend {
    top: calc(var(--app-legend-top) - 0.06rem);
    left: var(--app-legend-left);
    max-width: calc(100% - (var(--app-legend-left) * 2));
    max-inline-size: calc(100% - (var(--app-legend-left) * 2));
    background: var(--ui-legend-surface-standard);
    border-color: var(--ui-legend-border-standard);
    color: var(--ui-legend-text-standard);
}

.account-settings-page-stack .account-favorites-tab-search {
    width: 100%;
    min-width: 0;
    margin: 0;
}

.account-settings-page-stack .account-favorites-panel-stack {
    display: grid;
    gap: 0;
    min-width: 0;
    margin: 0;
}

.account-settings-page-stack .account-favorites-panel-stack > [data-account-favorites-panel] {
    min-width: 0;
}

.account-settings-page-stack [data-account-favorites-panel="account-information"] {
    padding: clamp(0.72rem, 1.6vw, 1rem);
    border: 0;
    background: var(--app-section-inner-bg, var(--app-overlay-brand-medium));
    box-shadow: none;
}

.account-settings-page-stack .account-favorites-panel-stack .user-state-section {
    display: grid;
    gap: 0;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.account-settings-page-stack .account-favorites-panel-stack .user-state-section > .museum-section-legend {
    display: none;
}

.account-settings-page-stack .account-favorites-panel-stack .app-card-section-body {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: var(--app-surface-padding-standard);
    border: 1px solid var(--ui-border-standard);
    outline: 0;
    border-radius: var(--app-surface-radius-standard);
    background: var(--card-surface-soft);
    box-shadow: var(--shadow-soft);
}

/* Alert preferences are peer controls. Keep labels and state readable
 * instead of forcing four compressed buttons into a phone-width row. */
html body #mainContent .account-settings-page-stack
    #account-alerts .alert-subscription-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(8.5rem, 1fr));
    gap: var(--app-component-flow-gap);
    width: 100%;
    margin: 0;
    padding: 0;
}

html body #mainContent .account-settings-page-stack
    #account-alerts .alert-subscription-actions > .home-action-list-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-content: start;
    gap: var(--app-control-gap);
    width: 100%;
    min-width: 0;
}

html body #mainContent .account-settings-page-stack
    #account-alerts .account-alert-heading-label {
    min-width: 0;
    color: var(--app-text-color-strong);
    font-weight: 650;
}

html body #mainContent .account-settings-page-stack
    #account-alerts .alert-subscription-toggle {
    justify-content: center;
    width: var(--app-control-min-height);
    min-width: var(--app-control-min-height);
    height: var(--app-control-min-height);
    min-height: var(--app-control-min-height);
    padding: 0;
}

html body #mainContent .account-settings-page-stack
    #account-alerts .alert-subscription-toggle .home-action-list-copy,
html body #mainContent .account-settings-page-stack
    #account-alerts .alert-subscription-toggle .home-action-list-title,
html body #mainContent .account-settings-page-stack
    #account-alerts .alert-subscription-toggle .app-page-intro-guidance-label {
    justify-content: flex-start;
    min-width: 0;
    max-width: 100%;
    font-size: 0.86rem;
    line-height: 1.2;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 700px) {
    .account-settings-page-stack .account-section-shell {
        gap: var(--app-section-flow-gap-mobile);
    }

    .account-settings-page-stack .account-favorites-tab-search {
        width: 100%;
        justify-self: stretch;
        margin: 0;
    }

    html body #mainContent .account-settings-page-stack
        #account-alerts .alert-subscription-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--app-component-flow-gap-mobile);
        margin-top: 0.65rem;
    }

}

/* Base media slot ownership. The final shared media-copy-actions sequence is
 * declared at the end of this owner after every variant and breakpoint. */
html body #mainContent .page-stack.ui-page-stack .app-card-rail > .app-standard-card > :is(
    .museum-exhibition-image-link,
    .home-exhibition-media,
    .social-channel-post-media,
    .account-favorite-image-link,
    .social-channel-trending-thumb
){
    order: 1;
}

/* Image-backed and icon-placeholder cards use the same full-width media slot.
 * The icon is an occupant of that field, never a second circular component. */
html body #mainContent .page-stack.ui-page-stack .app-standard-card > .app-card-media {
    position: relative;
    display: grid;
    place-items: center;
    order: 1;
    flex: 0 0 var(--app-standard-card-media-height);
    inline-size: 100%;
    width: 100%;
    block-size: var(--app-standard-card-media-height);
    height: var(--app-standard-card-media-height);
    min-block-size: var(--app-standard-card-media-height);
    min-height: var(--app-standard-card-media-height);
    max-block-size: var(--app-standard-card-media-height);
    max-height: var(--app-standard-card-media-height);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--app-card-media-placeholder-bg);
    color: var(--app-color-primary-action);
    box-shadow: none;
    overflow: hidden;
}

/* One type-aware image fallback owns every repeated card and carousel media
 * slot. Templates provide the generated editorial artwork; JavaScript keeps it
 * reserved beneath the Apple loader while candidate media is verified and
 * activates `has-image-fallback` when an image is absent, fails to decode, or
 * has no usable visual content. */
html body #mainContent .page-stack.ui-page-stack .app-standard-card > [data-card-image-fallback] {
    position: relative;
    background: var(--app-card-media-placeholder-bg);
    overflow: hidden;
}

html body #mainContent .page-stack.ui-page-stack .app-standard-card > [data-card-image-fallback] > .app-card-image-fallback {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: none;
    place-items: center;
    inline-size: 100%;
    block-size: 100%;
    color: var(--app-color-primary-action);
    background: var(--app-card-media-placeholder-bg);
    pointer-events: none;
}

html body #mainContent .page-stack.ui-page-stack .app-standard-card > [data-card-image-fallback].has-image-fallback > .app-card-image-fallback {
    display: grid;
}

html body #mainContent .page-stack.ui-page-stack .app-standard-card > [data-card-image-fallback].has-image-fallback > [data-card-image] {
    display: none;
}

html body #mainContent [data-card-image-fallback].has-image-fallback > .app-card-image-fallback {
    display: grid;
}

html body #mainContent [data-card-image-fallback].is-image-verifying > .app-card-image-fallback {
    display: grid;
}

html body #mainContent [data-card-image-fallback].has-image-fallback > [data-card-image] {
    display: none;
}

html body #mainContent [data-card-image-fallback].is-image-verifying > [data-card-image] {
    visibility: hidden;
}

html body #mainContent [data-card-image-fallback] > .app-card-image-fallback > .app-card-image-fallback-art {
    position: absolute;
    inset: 0;
    display: block;
    inline-size: 100%;
    width: 100%;
    block-size: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

html body #mainContent .page-stack.ui-page-stack .app-standard-card > .app-card-media .museum-card-image {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    inline-size: 100%;
    width: 100%;
    block-size: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail > .app-standard-card > :is(
    .museum-exhibition-content,
    .home-exhibition-copy,
    .app-card-content,
    .account-favorite-link,
    .social-channel-post-copy,
    .social-channel-trending-copy
){
    order: 2;
    flex: 1 1 auto;
    min-height: 0;
    gap: 0.2rem;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail > .app-standard-card > .app-card-control-band{
    order: 3;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-content: center;
    column-gap: 0.34rem;
    row-gap: 0.34rem;
    margin: auto 2px 0;
}

/*
 * Exhibition and social cards retain the same bottom-band sequence as every
 * other repeated card while using their compact action spacing.
 */
html body #mainContent .page-stack.ui-page-stack .app-card-rail
    > :is(.app-exhibition-card, .app-social-post-card).app-standard-card
    > .app-card-control-band{
    order: 3;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    column-gap: 0.22rem;
    padding-inline: 0.4rem;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail
    > :is(.app-exhibition-card, .app-social-post-card).app-standard-card
    > .app-card-control-band > .app-card-action-link{
    flex: 0 0 auto;
    width: max-content;
    min-width: max-content;
    max-width: none;
    gap: 0.25rem;
    padding-inline: 0.34rem;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail
    > :is(.app-exhibition-card, .app-social-post-card).app-standard-card
    > .app-card-control-band > .app-card-control-group{
    flex: 0 0 auto;
    min-width: max-content;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail
    > :is(.app-exhibition-card, .app-social-post-card).app-standard-card
    > :is(
        .museum-exhibition-content,
        .home-exhibition-copy,
        .app-card-content,
        .account-favorite-link,
        .social-channel-post-copy
    ){
    order: 2;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail > .museum-profile-card.app-standard-card .museum-card-title > .museum-card-directory-icon{
    order: 1;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail > .museum-profile-card.app-standard-card .museum-card-title > .museum-card-title-link{
    order: 2;
    flex: 1 1 auto;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail > .museum-profile-card.app-standard-card .museum-card-title > .app-card-control-band{
    order: 3;
    flex: 0 0 auto;
    margin: auto 2px 0;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail .app-standard-card .app-card-control-band > .app-card-action-link{
    flex: 0 0 auto;
    width: max-content;
    min-width: max-content;
    max-width: 100%;
    margin: 0;
    padding-inline: 0.62rem;
    gap: 0.38rem;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail .app-standard-card .app-card-control-band > .app-card-action-link > .app-card-action-label{
    flex: 0 0 auto;
    min-width: max-content;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

/* Card destinations already carry the shared link icon. Do not repeat the
   destination cue with a generated greater-than character. */
html body #mainContent .page-stack.ui-page-stack .app-card-rail .app-standard-card .app-card-action-link::after,
html body #mainContent .page-stack.ui-page-stack .app-card-rail .home-more-card .home-more-card-cta::after{
    content: none;
    display: none;
}

html body #mainContent .page-stack.ui-page-stack :is(
    .app-card-rail,
    .museum-grid,
    .home-exhibition-grid
) > .museum-profile-card.app-standard-card .app-card-control-band .museum-card-controls-stack > :is(
    .favorite-toggle-btn-leading,
    .museum-alert-toggle-btn-leading
){
    flex: 0 0 1.98rem;
    width: 1.98rem;
    min-width: 1.98rem;
    max-width: 1.98rem;
    height: 1.98rem;
    min-height: 1.98rem;
    max-height: 1.98rem;
}

html body #mainContent .page-stack.ui-page-stack .app-card-action-link .app-card-action-icon-platform{
    flex: 0 0 1.4rem;
    width: 1.4rem;
    min-width: 1.4rem;
    max-width: 1.4rem;
    height: 1.4rem;
    min-height: 1.4rem;
    max-height: 1.4rem;
}

/* Card-band destinations read as a natural label followed by its destination
 * mark. Keep equal inline breathing room between that content and both borders
 * for Exhibit,
Museum,
Post,
Reel,
Video,
and the shared destination CTAs. */
html body #mainContent.page-stack.ui-page-stack .app-card-action-link,
html body #mainContent .page-stack.ui-page-stack .app-card-action-link{
    box-sizing: border-box;
    column-gap: 0.38rem;
    padding-inline: 0.62rem;
}

html body #mainContent.page-stack.ui-page-stack .app-card-action-link > .app-card-action-label,
html body #mainContent .page-stack.ui-page-stack .app-card-action-link > .app-card-action-label{
    order: 1;
}

html body #mainContent.page-stack.ui-page-stack .app-card-action-link > .app-card-action-icon,
html body #mainContent .page-stack.ui-page-stack .app-card-action-link > .app-card-action-icon{
    order: 2;
}

/* Home destination-card copy reuses the compact brown museum-name band.
 * Keep the flexible middle row transparent so the brown surface cannot
 * stretch through all remaining card height.
 */
html body #mainContent .page-stack.ui-page-stack .app-card-rail > .home-more-card.app-standard-card .home-more-card-statement{
    display: flex;
    align-items: flex-start;
    height: 100%;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail > .home-more-card.app-standard-card .home-more-card-copy{
    display: flex;
    align-items: center;
    gap: 0.42rem;
    width: 100%;
    height: 2.35rem;
    min-height: 2.35rem;
    max-height: 2.35rem;
    margin: 0;
    padding: 0.38rem 0.72rem;
    border: 0;
    border-radius: 0;
    background: var(--app-surface-card);
    color: var(--app-text-color-strong);
    box-shadow: none;
    box-sizing: border-box;
    cursor: pointer;
    overflow: hidden;
    text-decoration: none;
    transition:
        background-color 0.16s ease,
        color 0.16s ease;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail > .home-more-card.app-standard-card .home-more-card-copy:is(:hover, :focus-visible){
    background: var(--app-interactive-hover-surface);
    color: var(--app-color-primary-action-hover);
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail > .home-more-card.app-standard-card .home-more-card-copy:focus-visible{
    outline: 2px solid var(--app-color-focus);
    outline-offset: -2px;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail > .home-more-card.app-standard-card .home-more-card-copy > .app-card-action-icon{
    flex: 0 0 1rem;
    width: 1rem;
    min-width: 1rem;
    height: 1rem;
    min-height: 1rem;
    color: var(--app-color-primary-action);
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail > .home-more-card.app-standard-card .home-more-card-copy-text{
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Editorial repeated-card contract. Media and domain-specific content remain
 * component-owned; this shared layer standardizes only the visible surface,
* typography,
and interaction hierarchy. */
html body #mainContent .page-stack.ui-page-stack :is(
    .app-standard-card,
    .museum-profile-card,
    .museum-exhibition-item,
    .social-post-card,
    .dashboard-menu-card,
    .account-detail-card
){
    border: 0;
    outline: 0;
    border-radius: 8px;
    background: var(--app-surface-card);
    box-shadow: var(--app-shadow-card-resting);
}

html body #mainContent .page-stack.ui-page-stack :is(
    .museum-profile-card,
    .museum-exhibition-item,
    .social-post-card,
    .dashboard-menu-card,
    .account-detail-card
):not(.app-standard-card){
    box-shadow: var(--app-shadow-card-resting);
}

html body #mainContent .page-stack.ui-page-stack :is(
    .museum-profile-card,
    .museum-exhibition-item,
    .social-post-card,
    .dashboard-menu-card,
    .account-detail-card
):not(.app-standard-card):is(:hover, :has(:focus-visible)){
    border-color: transparent;
    outline: 0;
    background: var(--app-surface-elevated);
    box-shadow: var(--app-shadow-raised);
}

html body #mainContent .page-stack.ui-page-stack :is(
    .museum-card-title,
    .museum-exhibition-title,
    .social-post-card-title,
    .dashboard-menu-title,
    .app-card-title
){
    color: var(--app-color-primary-text);
    font-family: var(--app-font-family-display);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-shadow: none;
}

html body #mainContent .page-stack.ui-page-stack .app-card-action-link{
    border-radius: 4px;
    box-shadow: none;
    text-shadow: none;
}

html body #mainContent .page-stack.ui-page-stack .app-card-action-link{
    border: 0;
    background: transparent;
    color: var(--app-text-color-strong);
}

html body #mainContent .page-stack.ui-page-stack .app-card-action-link:is(:hover, :focus-visible){
    border: 0;
    background: var(--app-interactive-hover-surface);
    color: var(--app-interactive-hover-text);
}

/* The My Account category frame already owns the active category. Tab
 * wrappers are layout-only and must not add a second section border around
 * News Favorites,
social saves,
museum state,
exhibitions,
or search results. */
html body #mainContent .page-stack.ui-page-stack.account-settings-page-stack
    .account-favorites-panel-stack
    > :is([data-account-favorites-panel], [data-account-favorites-search-panel]),
html body #mainContent .page-stack.ui-page-stack.account-settings-page-stack
    .account-favorites-panel-stack
    > :is([data-account-favorites-panel], [data-account-favorites-search-panel])
    > .user-state-section,
html body #mainContent .page-stack.ui-page-stack.account-settings-page-stack
    .account-favorites-panel-stack
    > :is([data-account-favorites-panel], [data-account-favorites-search-panel])
    > .user-state-section
    > .app-card-section-body,
html body #mainContent .page-stack.ui-page-stack.account-settings-page-stack
    .account-favorites-panel-stack
    > :is([data-account-favorites-panel], [data-account-favorites-search-panel])
    > .app-card-section-body{
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    border-radius: 0;
    background: transparent;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
}

/*
 * Shared repeated-card surface.
 *
 * `cards-core.css` owns the single responsive card height. This later surface
 * pass must not replace that geometry with content-driven sizing.
 */
html body #mainContent .page-stack.ui-page-stack .app-card-rail > :is(
    .app-standard-card,
    .museum-card,
    .museum-exhibition-card,
    .museum-exhibition-item,
    .social-channel-post-card,
    .account-favorite-item,
    .dashboard-menu-card
):not(.home-hero-point) {
    aspect-ratio: auto;
    outline: 0;
    border-radius: 12px;
    background: var(--app-surface-card);
    background-image: none;
    overflow: hidden;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail > :is(
    .app-standard-card,
    .museum-card,
    .museum-exhibition-card,
    .museum-exhibition-item,
    .social-channel-post-card,
    .account-favorite-item,
    .dashboard-menu-card
):not(.home-hero-point):is(:hover, :has(:focus-visible)) {
    border-color: var(--app-border-color-standard);
    outline: 0;
}

/* Repeated card surfaces stay visually stable. Only their named links and
 * buttons expose interaction. */
html body #mainContent .app-standard-card {
    position: relative;
    isolation: isolate;
    border: 0;
    outline: 0;
    box-shadow: var(--app-shadow-card-resting);
    transform: translateY(0);
    transition:
        border-color 180ms ease,
        outline-color 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease;
}

html body #mainContent .app-standard-card .app-card-control-band {
    position: relative;
    z-index: 7;
    isolation: isolate;
    pointer-events: auto;
}

html body #mainContent .app-standard-card .app-card-control-band > .app-card-control-group,
html body #mainContent .app-standard-card .app-card-control-band :is(
    a,
    button,
    input,
    select,
    textarea,
    [tabindex]
) {
    position: relative;
    z-index: 1;
    pointer-events: auto;
}

/* Card decoration can never own the hit layer. The footer controls above are
 * the only interactive surface in this card row, including cards whose band
 * is nested inside a title wrapper rather than being a direct card child. */
html body #mainContent .app-standard-card::before,
html body #mainContent .app-standard-card::after,
html body #mainContent .app-standard-card .app-card-control-band::before,
html body #mainContent .app-standard-card .app-card-control-band::after {
    pointer-events: none;
}

html body #mainContent .app-standard-card > :is(
    .app-card-variant-state-stack,
    .favorite-toggle-btn,
    .museum-alert-toggle-btn
) {
    z-index: 6;
}

html body #mainContent .app-standard-card > .app-card-variant-state-stack {
    pointer-events: none;
}

html body #mainContent .app-standard-card
> .app-card-variant-state-stack :is(a, button, input, select, textarea, [tabindex]),
html body #mainContent .app-standard-card
> :is(.favorite-toggle-btn, .museum-alert-toggle-btn) {
    pointer-events: auto;
}

html body #mainContent .dashboard-page-stack
.home-museum-selection-cue,
html body #mainContent .museum-experience-page-stack
.museum-explorer-selection-cue {
    position: relative;
    z-index: 6;
    justify-self: stretch;
    width: 100%;
    height: 3.5rem;
    margin: -0.2rem 0 0;
    pointer-events: none;
}

html body #mainContent .dashboard-page-stack
.home-museum-selection-cue-icon,
html body #mainContent .museum-experience-page-stack
.museum-explorer-selection-cue-icon {
    position: absolute;
    left: clamp(
        1.6rem,
        var(--home-museum-cue-inline-center, 50%),
        calc(100% - 1.6rem)
    );
    top: 0.25rem;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid var(--app-border-color-strong);
    border-radius: 50%;
    background: var(--app-overlay-brand-strong);
    box-shadow: var(--app-shadow-header-control-depth);
    color: var(--app-color-inverse-text);
    transform: translateX(-50%) scale(0.75);
}

html body #mainContent .dashboard-page-stack
.home-museum-selection-cue-icon::before,
html body #mainContent .museum-experience-page-stack
.museum-explorer-selection-cue-icon::before {
    content: "";
    position: absolute;
    inset: -0.28rem;
    border: 1px solid color-mix(
        in srgb,
        var(--app-border-color-strong) 46%,
        transparent
    );
    border-radius: 50%;
}

html body #mainContent .dashboard-page-stack
.home-museum-selection-cue-icon svg,
html body #mainContent .museum-experience-page-stack
.museum-explorer-selection-cue-icon svg {
    position: relative;
    z-index: 1;
    width: 1.45rem;
    height: 1.45rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: none;
}

@media (max-width: 760px) {
    html body #mainContent .dashboard-page-stack
    .home-museum-selection-cue-icon,
    html body #mainContent .museum-experience-page-stack
    .museum-explorer-selection-cue-icon {
        left: 50%;
    }
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail > .app-standard-card > :is(
    .app-card-media,
    .museum-exhibition-image-link,
    .home-exhibition-media,
    .social-channel-post-media,
    .account-favorite-image-link,
    .social-channel-trending-thumb
) {
    flex: 0 0 var(--app-standard-card-media-height);
    inline-size: 100%;
    width: 100%;
    block-size: var(--app-standard-card-media-height);
    height: var(--app-standard-card-media-height);
    min-block-size: var(--app-standard-card-media-height);
    min-height: var(--app-standard-card-media-height);
    max-block-size: var(--app-standard-card-media-height);
    max-height: var(--app-standard-card-media-height);
    aspect-ratio: auto;
    border-radius: 0;
    background: var(--app-card-media-placeholder-bg);
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail > .app-standard-card > :is(
    .museum-exhibition-image-link,
    .home-exhibition-media,
    .social-channel-post-media,
    .account-favorite-image-link,
    .social-channel-trending-thumb
) :is(img, .museum-exhibition-image, .app-card-image, .account-favorite-image) {
    inline-size: 100%;
    width: 100%;
    block-size: 100%;
    height: 100%;
    max-block-size: none;
    max-height: none;
    object-fit: cover;
    object-position: center;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail > .app-standard-card > :is(
    .museum-exhibition-content,
    .home-exhibition-copy,
    .app-card-content,
    .account-favorite-link,
    .social-channel-post-copy
) {
    flex: 1 1 auto;
    min-block-size: 0;
    min-height: 0;
    padding: 0.82rem 0.88rem 0.94rem;
    overflow: hidden;
    background: var(--app-surface-card);
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail > .app-standard-card > .app-card-control-band,
html body #mainContent .page-stack.ui-page-stack .app-card-rail > .museum-profile-card.app-standard-card .museum-card-title > .app-card-control-band,
html body #mainContent .page-stack.ui-page-stack .app-card-rail > .home-more-card.app-standard-card .home-more-card-action-band {
    min-block-size: var(--app-standard-card-action-height, 3rem);
    min-height: var(--app-standard-card-action-height, 3rem);
    inline-size: 100%;
    width: 100%;
    margin: 0;
    padding:
        var(--app-standard-card-action-padding-block, 0.28rem)
        var(--app-standard-card-action-padding-inline, 0.68rem);
    border: 0;
    background: var(--app-surface-card);
    background-image: none;
    color: var(--app-text-color-strong);
    box-shadow: none;
}

@media (min-width: 761px) {
    html body #mainContent .news-page-stack .news-article-rail {
        grid-auto-columns: minmax(18rem, 22rem);
    }

    html body #mainContent .news-page-stack .news-article-rail > .news-story-card {
        width: 100%;
        min-width: 0;
        max-width: 22rem;
    }
}

/*
 * Global card variants.
 *
 * Featured and Horizontal reuse standard-card content and controls. Horizontal
 * anatomy remains horizontal at every viewport; Featured cards retain the
 * compact standard footprint inside shared carousels.
 */
html body #mainContent .app-card-inline-read-more {
    color: var(--app-color-primary-action);
    font-weight: 650;
    white-space: nowrap;
}

html body #mainContent .app-card-variant-read-more-row {
    flex: 0 0 auto;
    order: 6;
    width: 100%;
    margin-top: auto;
}

html body #mainContent .app-card-variant-destination-link {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    text-decoration: none;
}

html body #mainContent .app-card-variant-destination-link .app-card-action-icon {
    flex: 0 0 1rem;
    width: 1rem;
    height: 1rem;
}


/* Horizontal cards retain their compact copy stack while the shared
 * description controller owns visible line capacity. */
html body #mainContent .page-stack.ui-page-stack .app-card-rail
> .app-horizontal-card
.app-card-copy-scroll-region {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: start;
    gap: 0.1rem;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail
> .app-horizontal-card
:is(.museum-exhibition-title, .app-card-title) {
    display: -webkit-box;
    max-height: none;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    flex: 0 0 auto;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail
> .app-standard-card.app-horizontal-card
:is(.museum-exhibition-card-copy, .app-card-copy) {
    min-width: 0;
    overflow-wrap: anywhere;
    box-sizing: border-box;
    font-size: 0.76rem;
    line-height: 1.22;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail
> .app-standard-card.app-horizontal-card
> .app-card-control-band {
    block-size: var(--app-horizontal-card-action-height);
    height: var(--app-horizontal-card-action-height);
    min-block-size: var(--app-horizontal-card-action-height);
    min-height: var(--app-horizontal-card-action-height);
    max-block-size: var(--app-horizontal-card-action-height);
    max-height: var(--app-horizontal-card-action-height);
    margin: 0;
    padding-block: 0.1rem;
    box-sizing: border-box;
}

/* One Horizontal anatomy applies to News, YouTube, Instagram, and museum
 * section cards at every viewport. Copy owns the center column; destination
 * and state controls share the same bottom-band anchors used by Home. */
html body #mainContent .page-stack.ui-page-stack .app-card-rail
> .app-standard-card.app-horizontal-card {
    --app-horizontal-card-height: 8.8125rem;
    --app-horizontal-card-action-height: 2.3rem;
    display: grid;
    grid-template-columns:
        minmax(7.25rem, 31%)
        minmax(0, 1fr)
        calc(var(--app-state-action-icon-size) + 0.76rem);
    grid-template-rows:
        minmax(0, 1fr)
        var(--app-horizontal-card-action-height);
    align-items: stretch;
    height: var(--app-horizontal-card-height);
    min-height: var(--app-horizontal-card-height);
    max-height: var(--app-horizontal-card-height);
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail
> .app-horizontal-card > :is(
    .museum-exhibition-image-link,
    .home-exhibition-media
) {
    grid-column: 1;
    grid-row: 1 / -1;
    width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: none;
    border-radius:
        var(--app-standard-card-radius)
        0
        0
        var(--app-standard-card-radius);
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail
> .app-horizontal-card > .museum-exhibition-content {
    grid-column: 2;
    grid-row: 1;
    grid-template-rows: minmax(0, 1fr);
    justify-content: stretch;
    gap: 0;
    min-height: 0;
    padding: 0.3rem 0.42rem 0.2rem 0.72rem;
    box-sizing: border-box;
    overflow: hidden;
}

/* Desktop Horizontal social metadata owns the complete top copy width,
 * including the otherwise reserved state-control column. The title and
 * excerpt retain that reserve so only the source link reaches the true card
 * edge. At compact widths these variants adopt Standard-card geometry below. */
@media (min-width: 981px) {
    html body #mainContent .page-stack.ui-page-stack .app-card-rail
    > .app-social-post-card.app-horizontal-card
    > .museum-exhibition-content {
        grid-column: 2 / 4;
    }

    html body #mainContent .page-stack.ui-page-stack .app-card-rail
    > .app-social-post-card.app-horizontal-card
    > .museum-exhibition-content
    .app-card-copy-scroll-region > :is(.app-card-title, .app-card-copy) {
        padding-inline-end: calc(var(--app-state-action-icon-size) + 0.76rem);
        box-sizing: border-box;
    }
}

/* The shared standard-card selector reserves disclosure space below copy.
 * Horizontal variants have no disclosure control, so return that space to
 * their final description line. */
html body #mainContent .page-stack.ui-page-stack .app-card-rail
> .app-standard-card.app-horizontal-card
> .museum-exhibition-content {
    padding-block-end: 0;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail
> .app-horizontal-card > .app-card-control-band {
    display: flex;
    grid-column: 2 / 4;
    grid-row: 2;
    align-self: end;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail
> .app-horizontal-card > .app-card-variant-state-stack {
    position: static;
    inset: auto;
    grid-column: 3;
    grid-row: 1 / -1;
    align-self: stretch;
    min-width: 0;
    padding-block-start: 0.38rem;
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--app-standard-card-control-gap);
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail
> .app-horizontal-card > .app-card-variant-state-stack
> :is(.favorite-toggle-btn, .museum-alert-toggle-btn) {
    position: static;
    inset: auto;
    flex: 0 0 auto;
    margin: 0;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail
> .app-standard-card
> .app-card-control-band .app-card-variant-state-stack {
    position: static;
    inset: auto;
    z-index: 8;
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--app-standard-card-control-gap);
    margin: 0;
    padding: 0;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail
> .app-standard-card
> .app-card-control-band .app-card-variant-state-stack
> :is(.favorite-toggle-btn, .museum-alert-toggle-btn) {
    position: static;
    inset: auto;
    flex: 0 0 auto;
    margin: 0;
}

html body #mainContent a.app-card-inline-read-more:is(:hover, :focus-visible) {
    color: var(--app-color-primary-action-hover);
    text-decoration: underline;
}

html body #mainContent .app-card-variant-love-control {
    pointer-events: none;
    color: var(--app-color-state-favorite-active);
}

html body #mainContent .app-latest-showcase,
html body #mainContent .app-latest-showcase-rail {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
}

/* Featured cards keep the standard outer footprint but dedicate more of it
 * to imagery at every viewport. Standard and Horizontal cards retain their
 * existing media geometry. */
html body #mainContent .page-stack.ui-page-stack .app-card-rail
> .app-standard-card.app-featured-card {
    --app-featured-card-media-height: 11.75rem;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail
> .app-standard-card.app-featured-card > :is(
    .app-card-media,
    .museum-exhibition-image-link,
    .home-exhibition-media,
    .social-channel-post-media
) {
    flex: 0 0 var(--app-featured-card-media-height);
    flex-basis: var(--app-featured-card-media-height);
    block-size: var(--app-featured-card-media-height);
    height: var(--app-featured-card-media-height);
    min-block-size: var(--app-featured-card-media-height);
    min-height: var(--app-featured-card-media-height);
    max-block-size: var(--app-featured-card-media-height);
    max-height: var(--app-featured-card-media-height);
}

html body #mainContent
.app-card-rail > .app-featured-card
> .app-card-variant-state-stack {
    position: absolute;
    right: var(--app-standard-card-control-bottom);
    bottom: var(--app-standard-card-control-bottom);
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--app-standard-card-control-gap);
}

html body #mainContent
.app-card-rail > .app-featured-card
> .app-card-variant-state-stack
> :is(.favorite-toggle-btn, .museum-alert-toggle-btn) {
    position: static;
    inset: auto;
    flex: 0 0 auto;
    margin: 0;
}

@media (min-width: 981px) {
    html body #mainContent .museum-feature-showcase {
        --app-horizontal-card-height: 8.8125rem;
        --app-four-horizontal-stack-height: calc(
            var(--app-horizontal-card-height)
            + var(--app-horizontal-card-height)
            + var(--app-horizontal-card-height)
            + var(--app-horizontal-card-height)
            + var(--app-standard-card-gap)
            + var(--app-standard-card-gap)
            + var(--app-standard-card-gap)
        );
    }

    html body #mainContent
    .app-latest-showcase-rail {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: none;
        grid-auto-flow: row;
        grid-auto-rows: auto;
        align-content: start;
        align-items: stretch;
        justify-content: start;
        gap: var(--app-standard-card-gap) var(--app-section-flow-gap);
        padding: 0;
        overflow: visible;
        scroll-snap-type: none;
    }

    html body #mainContent .page-stack.ui-page-stack .app-card-rail
    > .app-standard-card.app-featured-card {
        --app-carousel-card-inline: 100%;
        /* Preserve a complete desktop copy field inside the fixed four-row
         * showcase: date, two title lines, two description lines, and band. */
        --app-featured-card-media-height: 25rem;
        justify-content: flex-start;
        grid-column: 1;
        grid-row: 1 / 5;
        width: 100%;
        inline-size: 100%;
        max-width: none;
        max-inline-size: 100%;
        height: 100%;
        min-height: 0;
        max-height: none;
    }

    html body #mainContent .page-stack.ui-page-stack .app-card-rail
    > .app-standard-card.app-featured-card > :is(
        .museum-exhibition-image-link,
        .home-exhibition-media
    ) {
        flex: 0 0 var(--app-featured-card-media-height);
        flex-basis: var(--app-featured-card-media-height);
        order: 0;
        align-self: flex-start;
        block-size: var(--app-featured-card-media-height);
        height: var(--app-featured-card-media-height);
        min-block-size: var(--app-featured-card-media-height);
        min-height: var(--app-featured-card-media-height);
        max-block-size: var(--app-featured-card-media-height);
        max-height: var(--app-featured-card-media-height);
    }

    html body #mainContent .page-stack.ui-page-stack .app-card-rail
    > .app-standard-card.app-featured-card > .museum-exhibition-content {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        order: 1;
        min-block-size: 0;
        min-height: 0;
        padding: 0.68rem 0.88rem 0.78rem;
        overflow: hidden;
    }

    html body #mainContent
    .app-featured-card .app-card-copy-scroll-region {
        display: grid;
        grid-template-rows:
            auto
            minmax(0, auto)
            minmax(calc(var(--app-card-description-line-height) * 1em), 1fr)
            auto;
        align-content: stretch;
        gap: 0.12rem;
    }

    html body #mainContent
    .app-featured-card .app-card-variant-read-more-row {
        margin-top: auto;
        padding-top: 0.22rem;
    }

    html body #mainContent
    .app-featured-card :is(.museum-exhibition-title, .app-card-title) {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }


    html body #mainContent .app-card-rail
    > .app-horizontal-card {
        --app-carousel-card-inline: 100%;
        grid-column: 2;
        width: 100%;
        inline-size: 100%;
        max-width: none;
        max-inline-size: 100%;
    }

    html body #mainContent
    .app-horizontal-card .app-card-variant-excerpt-text {
        display: inline;
        min-width: 0;
    }

    html body #mainContent .app-card-rail
    > .app-featured-card
    > .app-card-control-band {
        display: flex;
    }

}

/* News and social landing pages share one nine-story desktop composition:
 * one lead across two columns, two supporting stories stacked beside it, and
 * six unchanged standard cards in two rows below. The semantic card order remains the
 * DOM order so compact layouts and assistive technology keep newest-first
 * reading without clones or carousel behavior. */
@media (min-width: 981px) {
    html body #mainContent .page-stack.ui-page-stack
    .app-latest-editorial-rail {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        /* Fixed showcase tracks keep portrait Instagram media from enlarging
         * the lead and support cards beyond the shared News/YouTube size. */
        grid-template-rows: repeat(2, 13.5rem) auto auto;
        grid-auto-flow: row;
        grid-auto-rows: auto;
        align-items: stretch;
        gap: var(--app-standard-card-gap);
    }

    html body #mainContent .page-stack.ui-page-stack
    .app-card-rail.app-latest-editorial-rail > .app-standard-card.app-featured-card {
        display: grid;
        grid-column: 1 / 3;
        grid-row: 1 / 3;
        grid-template-columns: minmax(0, 58%) minmax(0, 42%);
        grid-template-rows: minmax(0, 1fr) auto;
        align-items: stretch;
        height: 100%;
        min-height: 0;
        max-height: none;
        overflow: hidden;
    }

    html body #mainContent .page-stack.ui-page-stack
    .app-card-rail.app-latest-editorial-rail > .app-standard-card.app-featured-card > :is(
        .app-card-media,
        .museum-exhibition-image-link,
        .home-exhibition-media,
        .social-channel-post-media
    ) {
        grid-column: 1;
        grid-row: 1 / 3;
        order: 0;
        align-self: stretch;
        width: 100%;
        inline-size: 100%;
        flex: none;
        aspect-ratio: auto;
        block-size: 100%;
        height: 100%;
        min-block-size: 0;
        min-height: 0;
        max-block-size: none;
        max-height: none;
        border-radius: 0;
    }

    html body #mainContent .page-stack.ui-page-stack
    .app-card-rail.app-latest-editorial-rail > .app-standard-card.app-featured-card > .museum-exhibition-content {
        display: flex;
        grid-column: 2;
        grid-row: 1;
        order: 0;
        min-width: 0;
        min-height: 0;
        padding: 1.2rem 1.25rem 0.2rem;
        overflow: hidden;
    }

    html body #mainContent .page-stack.ui-page-stack
    .app-card-rail.app-latest-editorial-rail > .app-standard-card.app-featured-card > .app-card-control-band {
        grid-column: 2;
        grid-row: 2;
        order: 0;
        align-self: stretch;
    }

    html body #mainContent .page-stack.ui-page-stack
    .app-card-rail.app-latest-editorial-rail > .app-standard-card.app-featured-card > .app-card-variant-state-stack {
        right: var(--app-standard-card-control-bottom);
    }

    html body #mainContent .page-stack.ui-page-stack
    .app-card-rail.app-latest-editorial-rail > .app-standard-card.app-featured-card
    :is(.museum-exhibition-title, .app-card-title) {
        display: -webkit-box;
        max-block-size: none;
        max-height: none;
        overflow: hidden;
        overflow-wrap: anywhere;
        text-overflow: ellipsis;
        font-size: clamp(1.75rem, 2vw, 2.125rem);
        line-height: 1.06;
        letter-spacing: -0.035em;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
        line-clamp: 5;
    }

    html body #mainContent .page-stack.ui-page-stack
    .app-card-rail.app-latest-editorial-rail > .app-standard-card.app-featured-card
    :is(.museum-exhibition-card-copy, .app-card-copy) {
        font-size: var(--app-card-description-text-size);
        line-height: var(--app-card-description-line-height);
    }

    html body #mainContent .page-stack.ui-page-stack
    .app-card-rail.app-latest-editorial-rail > .app-standard-card.app-horizontal-card {
        grid-column: 3;
        grid-template-columns: minmax(8.5rem, 42%) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) var(--app-horizontal-card-action-height);
        width: 100%;
        height: 100%;
        min-height: 0;
        max-height: none;
    }

    html body #mainContent .page-stack.ui-page-stack
    .app-card-rail.app-latest-editorial-rail > .app-standard-card.app-horizontal-card:nth-child(2) {
        grid-row: 1;
    }

    html body #mainContent .page-stack.ui-page-stack
    .app-card-rail.app-latest-editorial-rail > .app-standard-card.app-horizontal-card:nth-child(3) {
        grid-row: 2;
    }

    html body #mainContent .page-stack.ui-page-stack
    .app-card-rail.app-latest-editorial-rail > .app-standard-card.app-horizontal-card > .museum-exhibition-content {
        grid-column: 2;
        grid-row: 1;
        padding: 0.3rem 0.8rem 0.2rem;
    }

    html body #mainContent .page-stack.ui-page-stack
    .app-card-rail.app-latest-editorial-rail > .app-standard-card.app-horizontal-card > .app-card-control-band {
        grid-column: 2;
        grid-row: 2;
    }

    html body #mainContent .page-stack.ui-page-stack
    .app-card-rail.app-latest-editorial-rail > .app-standard-card.app-horizontal-card
    :is(.museum-exhibition-title, .app-card-title) {
        display: -webkit-box;
        max-block-size: none;
        max-height: none;
        overflow: hidden;
        overflow-wrap: anywhere;
        text-overflow: ellipsis;
        font-size: clamp(1.0625rem, 1.25vw, 1.1875rem);
        line-height: 1.08;
        letter-spacing: -0.025em;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        line-clamp: 4;
    }

    html body #mainContent .page-stack.ui-page-stack
    .app-card-rail.app-latest-editorial-rail > .app-standard-card.app-horizontal-card
    :is(.museum-exhibition-card-copy, .app-card-copy) {
        font-size: var(--app-card-description-text-size);
        line-height: var(--app-card-description-line-height);
    }

    html body #mainContent .page-stack.ui-page-stack
    .app-latest-editorial-rail > .app-latest-standard-card:nth-child(-n + 6) {
        grid-row: 3;
    }

    html body #mainContent .page-stack.ui-page-stack
    .app-latest-editorial-rail > .app-latest-standard-card:nth-child(n + 7) {
        grid-row: 4;
    }

    html body #mainContent .page-stack.ui-page-stack
    .app-latest-editorial-rail > .app-latest-standard-card:nth-child(4) {
        grid-column: 1;
    }

    html body #mainContent .page-stack.ui-page-stack
    .app-latest-editorial-rail > .app-latest-standard-card:nth-child(5) {
        grid-column: 2;
    }

    html body #mainContent .page-stack.ui-page-stack
    .app-latest-editorial-rail > .app-latest-standard-card:nth-child(6) {
        grid-column: 3;
    }

    html body #mainContent .page-stack.ui-page-stack
    .app-latest-editorial-rail > .app-latest-standard-card:nth-child(7) {
        grid-column: 1;
    }

    html body #mainContent .page-stack.ui-page-stack
    .app-latest-editorial-rail > .app-latest-standard-card:nth-child(8) {
        grid-column: 2;
    }

    html body #mainContent .page-stack.ui-page-stack
    .app-latest-editorial-rail > .app-latest-standard-card:nth-child(9) {
        grid-column: 3;
    }
}

/* Every card action group uses the same bottom-right sequence. Variant
 * controls are flattened into this group by the shared normalizer. */
html body #mainContent .page-stack.ui-page-stack
.app-standard-card > .app-card-control-band > .app-card-control-group
> :is(
    .favorite-toggle-btn-corner,
    .favorite-toggle-btn-leading,
    .museum-alert-toggle-btn-corner,
    .museum-alert-toggle-btn-leading
) {
    position: static;
    inset: auto;
    flex: 0 0 auto;
    margin: 0;
}

html body #mainContent .page-stack.ui-page-stack
.app-standard-card > .app-card-control-band > .app-card-control-group
> [data-card-copy-disclosure] {
    order: 1;
}

html body #mainContent .page-stack.ui-page-stack
.app-standard-card > .app-card-control-band > .app-card-control-group
> .app-share-trigger {
    order: 2;
}

html body #mainContent .page-stack.ui-page-stack
.app-standard-card > .app-card-control-band > .app-card-control-group
> .favorite-toggle-btn {
    order: 3;
}

html body #mainContent .page-stack.ui-page-stack
.app-standard-card > .app-card-control-band > .app-card-control-group
> .museum-alert-toggle-btn {
    order: 4;
}

/* A Latest showcase with only its Featured item must not reserve the empty
 * supporting-card column. This shared state applies across News taxonomy and
 * social Latest surfaces at every viewport and browser zoom level. */
html body #mainContent .page-stack.ui-page-stack
.app-latest-showcase-rail:has(> .app-featured-card:only-child) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    grid-auto-flow: row;
    align-items: stretch;
    gap: 0;
    width: 100%;
    inline-size: 100%;
    max-width: 100%;
    max-inline-size: 100%;
    min-width: 0;
    min-inline-size: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
}

html body #mainContent .page-stack.ui-page-stack
.app-latest-showcase-rail:has(> .app-featured-card:only-child)
> .app-standard-card.app-featured-card:only-child {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: stretch;
    width: 100%;
    inline-size: 100%;
    max-width: 100%;
    max-inline-size: 100%;
    min-width: 0;
    min-inline-size: 0;
}

.app-card-mobile-featured-label {
    display: none;
}

/* Public News, YouTube, and Instagram landing archives opt into a bounded
 * non-carousel grid without changing any other shared rail consumer. */
html body #mainContent .page-stack.ui-page-stack .app-landing-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-flow: row;
    grid-auto-rows: auto;
    align-items: stretch;
    justify-content: stretch;
    gap: var(--app-standard-card-gap);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
}

html body #mainContent .page-stack.ui-page-stack .app-landing-card-grid
> .app-standard-card {
    width: 100%;
    inline-size: 100%;
    max-width: none;
    min-width: 0;
}

.app-landing-load-more-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--app-control-gap, 0.55rem);
    width: 100%;
    margin-top: var(--app-component-flow-gap);
}

.app-landing-load-more-row[aria-busy="true"] {
    position: relative;
    min-height: 4.25rem;
}

.app-landing-load-more-row[aria-busy="true"]
> :not(.app-element-loader):not(.sr-only) {
    visibility: hidden;
}

.app-landing-load-more-row[aria-busy="true"] > .app-element-loader {
    background: transparent;
}

.app-landing-load-more-row[data-compact-pending-only] {
    display: none;
}

.app-landing-load-more,
.app-landing-retry {
    min-height: var(--app-control-height, 2.625rem);
}

.app-landing-load-icon {
    width: 1rem;
    height: 1rem;
    margin-left: 0.32rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.app-landing-terminal {
    flex-basis: 100%;
    margin: 0;
    text-align: center;
}

@media (max-width: 1200px) {
    html body #mainContent .page-stack.ui-page-stack .app-landing-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    html body #mainContent .page-stack.ui-page-stack .app-landing-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    [data-landing-collection].is-compact-collection
    .app-landing-load-more-row[data-compact-pending-only] {
        display: flex;
    }
}

@media (max-width: 760px) {
    .app-landing-load-more-row {
        margin-top: var(--app-component-flow-gap-mobile);
    }

    html body #mainContent .page-stack.ui-page-stack .app-landing-card-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Below the editorial desktop composition, News and social Latest switch as one
 * unit to the Standard mobile stack. The lead/support trio must never break
 * into a two-card row followed by an orphaned support card. */
@media (max-width: 980px) {
    html body #mainContent .page-stack.ui-page-stack
    .app-latest-editorial-rail {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-auto-flow: row;
        grid-auto-rows: auto;
        gap: var(--app-standard-card-gap);
    }

    html body #mainContent .page-stack.ui-page-stack
    :is(.news-latest-showcase-rail, .social-channel-latest-rail, [data-landing-archive-list])
    > :is(.news-latest-story-card, .social-channel-latest-card):is(.app-featured-card, .app-horizontal-card) {
        display: grid;
        position: relative;
        align-items: stretch;
        align-content: stretch;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) auto;
        height: var(--app-standard-card-height);
        min-height: var(--app-standard-card-height);
        max-height: var(--app-standard-card-height);
        overflow: hidden;
    }

    html body #mainContent .page-stack.ui-page-stack
    :is(.news-latest-showcase-rail, .social-channel-latest-rail, [data-landing-archive-list])
    > :is(.news-latest-story-card, .social-channel-latest-card):is(.app-featured-card, .app-horizontal-card)
    > :is(.home-exhibition-media, .museum-exhibition-image-link) {
        position: relative;
        grid-column: auto;
        grid-row: 1;
        order: 1;
        flex: none;
        width: 100%;
        inline-size: 100%;
        block-size: var(--app-standard-card-media-height);
        height: var(--app-standard-card-media-height);
        min-block-size: var(--app-standard-card-media-height);
        min-height: var(--app-standard-card-media-height);
        max-block-size: var(--app-standard-card-media-height);
        max-height: var(--app-standard-card-media-height);
        aspect-ratio: auto;
        border-radius:
            var(--app-standard-card-radius)
            var(--app-standard-card-radius)
            0
            0;
    }

    html body #mainContent .page-stack.ui-page-stack
    :is(.news-latest-showcase-rail, .social-channel-latest-rail, [data-landing-archive-list])
    > :is(.news-latest-story-card, .social-channel-latest-card):is(.app-featured-card, .app-horizontal-card)
    > .museum-exhibition-content {
        display: grid;
        grid-column: 1;
        grid-row: 2;
        order: 2;
        flex: none;
        align-items: flex-start;
        align-content: start;
        grid-template-rows: auto;
        width: 100%;
        min-width: 0;
        min-height: 0;
        padding:
            var(--app-standard-card-copy-top)
            var(--app-standard-card-copy-inline)
            var(--app-standard-card-copy-bottom);
        overflow: hidden;
    }

    html body #mainContent .page-stack.ui-page-stack
    :is(.news-latest-showcase-rail, .social-channel-latest-rail, [data-landing-archive-list])
    > :is(.news-latest-story-card, .social-channel-latest-card):is(.app-featured-card, .app-horizontal-card)
    .app-card-copy-scroll-region {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0.3rem;
        width: 100%;
        height: auto;
        min-height: 0;
        overflow: hidden;
    }

    html body #mainContent .page-stack.ui-page-stack
    :is(.news-latest-showcase-rail, .social-channel-latest-rail, [data-landing-archive-list])
    > :is(.news-latest-story-card, .social-channel-latest-card):is(.app-featured-card, .app-horizontal-card)
    :is(.museum-exhibition-title, .app-card-title) {
        display: -webkit-box;
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        max-height: none;
        overflow: hidden;
        overflow-wrap: anywhere;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    html body #mainContent .page-stack.ui-page-stack
    :is(.news-latest-showcase-rail, .social-channel-latest-rail, [data-landing-archive-list])
    > :is(.news-latest-story-card, .social-channel-latest-card):is(.app-featured-card, .app-horizontal-card)
    :is(.museum-exhibition-card-copy, .app-card-copy) {
        font-size: var(--app-card-description-text-size);
        line-height: var(--app-card-description-line-height);
        overflow-wrap: anywhere;
    }

    /* The compact geometry normalization is later in the cascade than the
     * shared disclosure contract, so preserve that contract when expanded. */
    html body #mainContent .page-stack.ui-page-stack
    :is(.news-latest-showcase-rail, .social-channel-latest-rail, [data-landing-archive-list])
    > :is(.news-latest-story-card, .social-channel-latest-card):is(.app-featured-card, .app-horizontal-card).is-card-copy-expanded
    .app-card-copy-scroll-region {
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: 100%;
        max-height: 100%;
        padding-right: 0.35rem;
        overflow-x: hidden;
        overflow-y: scroll;
        overscroll-behavior-y: auto;
        scrollbar-gutter: stable;
        scrollbar-width: thin;
        scrollbar-color: var(--app-scrollbar-thumb) var(--app-scrollbar-track);
    }

    html body #mainContent .page-stack.ui-page-stack
    :is(.news-latest-showcase-rail, .social-channel-latest-rail, [data-landing-archive-list])
    > :is(.news-latest-story-card, .social-channel-latest-card):is(.app-featured-card, .app-horizontal-card).is-card-copy-expanded
    .app-card-copy-scroll-region :is(
        .museum-exhibition-title,
        .app-card-title
    ) {
        display: block;
        flex: 0 0 auto;
        max-height: none;
        overflow: visible;
        text-overflow: clip;
        -webkit-line-clamp: none;
        line-clamp: none;
    }

    html body #mainContent .page-stack.ui-page-stack
    :is(.news-latest-showcase-rail, .social-channel-latest-rail, [data-landing-archive-list])
    > :is(.news-latest-story-card, .social-channel-latest-card):is(.app-featured-card, .app-horizontal-card).is-card-copy-expanded
    .app-card-copy-scroll-region :is(
        .museum-exhibition-card-copy,
        .museum-exhibition-description-shell,
        .social-channel-post-description,
        .app-card-copy
    ) {
        display: block;
        flex: 0 0 auto;
        min-height: 1.2em;
        max-height: none;
        overflow: visible;
        text-overflow: clip;
        -webkit-line-clamp: none;
        line-clamp: none;
    }

    html body #mainContent .page-stack.ui-page-stack
    :is(.news-latest-showcase-rail, .social-channel-latest-rail, [data-landing-archive-list])
    > :is(.news-latest-story-card, .social-channel-latest-card):is(.app-featured-card, .app-horizontal-card)
    > .app-card-control-band {
        display: flex;
        grid-column: 1;
        grid-row: 3;
        order: 3;
        align-self: stretch;
        width: 100%;
        block-size: auto;
        height: auto;
        min-block-size: var(--app-standard-card-action-height, 3rem);
        min-height: var(--app-standard-card-action-height, 3rem);
        max-block-size: none;
        max-height: none;
        margin: 0;
        justify-content: flex-start;
        padding:
            var(--app-standard-card-action-padding-block, 0.28rem)
            var(--app-standard-card-action-padding-inline, 0.68rem);
        box-sizing: border-box;
    }

    html body #mainContent .page-stack.ui-page-stack
    [data-landing-archive-list]
    > :is(.news-latest-story-card, .social-channel-latest-card):is(.app-featured-card, .app-horizontal-card)
    > .app-card-control-band > .app-card-control-group {
        margin-inline-start: auto;
    }

    html body #mainContent .page-stack.ui-page-stack
    [data-landing-archive-list]
    > :is(.news-latest-story-card, .social-channel-latest-card):is(.app-featured-card, .app-horizontal-card)
    > .app-card-control-band .app-card-variant-state-stack {
        position: static;
        inset: auto;
        z-index: 6;
        display: inline-flex;
        flex: 0 0 auto;
        order: 2;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: var(--app-standard-card-control-gap);
        padding: 0;
        margin-inline-start: 0;
    }

    html body #mainContent .page-stack.ui-page-stack
    [data-landing-archive-list]
    > :is(.news-latest-story-card, .social-channel-latest-card):is(.app-featured-card, .app-horizontal-card)
    > .app-card-control-band .app-card-variant-state-stack > .app-share-trigger {
        order: 1;
    }

    html body #mainContent .page-stack.ui-page-stack
    [data-landing-archive-list]
    > :is(.news-latest-story-card, .social-channel-latest-card):is(.app-featured-card, .app-horizontal-card)
    > .app-card-control-band .app-card-variant-state-stack
    > :is(.favorite-toggle-btn, .museum-alert-toggle-btn) {
        position: static;
        inset: auto;
        flex: 0 0 auto;
        margin: 0;
        order: 2;
    }

    .app-card-mobile-featured-label {
        display: inline;
        color: var(--app-color-primary-action);
        font-weight: 650;
    }
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail .app-standard-card .app-card-control-band > .app-card-action-link,
html body #mainContent .page-stack.ui-page-stack .app-card-rail > .home-more-card.app-standard-card .home-more-card-action-band > .home-more-card-cta {
    min-block-size: 2.1rem;
    min-height: 2.1rem;
    padding: 0.34rem 0.58rem;
    border: 0;
    border-radius: var(--app-control-radius);
    background: transparent;
    color: var(--app-text-color-strong);
    box-shadow: none;
    font-size: 0.8rem;
    font-weight: 650;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail .app-standard-card .app-card-control-band > .app-card-action-link:is(:hover, :focus-visible),
html body #mainContent .page-stack.ui-page-stack .app-card-rail > .home-more-card.app-standard-card .home-more-card-action-band > .home-more-card-cta:is(:hover, :focus-visible) {
    border: 0;
    background: var(--app-interactive-hover-surface);
    color: var(--app-interactive-hover-text);
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail .app-standard-card .app-card-control-band .favorite-toggle-btn {
    border: 0;
    background: transparent;
    color: var(--app-color-state-control-inactive);
    box-shadow: none;
    -webkit-text-stroke: 0;
    text-shadow: none;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail .app-standard-card .app-card-control-band .museum-alert-toggle-btn {
    border: 0;
    background: transparent;
    color: var(--app-color-state-control-inactive);
    box-shadow: none;
    -webkit-text-stroke: 0;
    text-shadow: none;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail .app-standard-card .app-card-control-band .favorite-toggle-btn:is(:hover, :focus-visible) {
    background: var(--app-interactive-hover-surface);
    color: var(--app-color-state-control-inactive);
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail .app-standard-card .app-card-control-band .museum-alert-toggle-btn:is(:hover, :focus-visible) {
    background: var(--app-interactive-hover-surface);
    color: var(--app-color-state-control-inactive);
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail .app-standard-card .app-card-control-band .favorite-toggle-btn:is(.is-active, [aria-pressed="true"]) {
    color: var(--app-color-state-favorite-active);
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail .app-standard-card .app-card-control-band .museum-alert-toggle-btn:is(.is-active, [aria-pressed="true"]) {
    color: var(--app-color-state-alert-active);
}

/* Museum cards use a real representative image when available and collapse to
 * a compact illustrated card when the source has no photography. */
html body #mainContent .page-stack.ui-page-stack .app-card-rail > .museum-profile-card.app-standard-card {
    grid-template-rows: minmax(0, 1fr);
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail > .museum-profile-card.app-standard-card .museum-card-main-link {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    align-self: stretch;
    min-block-size: 0;
    min-height: 0;
    block-size: auto;
    height: auto;
    padding: 0;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail > .museum-profile-card.app-standard-card .museum-card-head {
    display: contents;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail > .museum-profile-card.app-standard-card .museum-card-title {
    position: static;
    inset: auto;
    grid-column: 1 / -1;
    grid-row: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--app-standard-card-media-height) minmax(0, 1fr) auto;
    align-self: stretch;
    min-block-size: 0;
    min-height: 0;
    block-size: auto;
    height: auto;
    max-block-size: none;
    max-height: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail > .museum-profile-card.app-standard-card .museum-card-directory-icon {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    inline-size: 100%;
    width: 100%;
    block-size: var(--app-standard-card-media-height);
    height: var(--app-standard-card-media-height);
    min-block-size: var(--app-standard-card-media-height);
    min-height: var(--app-standard-card-media-height);
    max-block-size: var(--app-standard-card-media-height);
    max-height: var(--app-standard-card-media-height);
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    background: var(--app-card-media-placeholder-bg);
    color: var(--app-color-primary-action);
    box-shadow: none;
    overflow: hidden;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail > .museum-profile-card.app-standard-card .museum-card-directory-icon::before {
    content: none;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail > .museum-profile-card.app-standard-card .museum-card-image {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    inline-size: 100%;
    width: 100%;
    block-size: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail > .museum-profile-card.app-standard-card .museum-card-title-link {
    position: static;
    grid-column: 1;
    grid-row: 2;
    display: block;
    min-block-size: 0;
    min-height: 0;
    block-size: auto;
    height: auto;
    max-block-size: none;
    max-height: none;
    padding: 0.82rem 0.88rem 0.72rem;
    background: var(--app-surface-card);
    color: var(--app-text-color-strong);
    overflow: hidden;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail > .museum-profile-card.app-standard-card .museum-card-main-link > .museum-card-action-link {
    position: static;
    inset: auto;
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    justify-self: start;
    margin: 0 0 0.68rem 0.72rem;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail > .museum-profile-card.app-standard-card > .museum-card-controls-stack {
    position: static;
    inset: auto;
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    justify-self: end;
    margin: 0 0.62rem 0.62rem 0.3rem;
    padding: 0;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail > .museum-profile-card.app-standard-card::before,
html body #mainContent .page-stack.ui-page-stack .app-card-rail > .museum-profile-card.app-standard-card::after {
    content: none;
    display: none;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail
> :is(
    [data-museum-section-choice-card],
    .museum-directory-choice-card
).app-standard-card.is-selected {
    background: var(--app-surface-selected);
    background-image: none;
    box-shadow: none;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail
> :is(
    [data-museum-section-choice-card],
    .museum-directory-choice-card
).app-standard-card.is-selected:is(:hover, :has(:focus-visible)) {
    background: var(--app-surface-selected);
    box-shadow: none;
    transform: none;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail
> :is(
    [data-museum-section-choice-card],
    .museum-directory-choice-card
).app-standard-card.is-selected
> :is(.app-card-content, .museum-exhibition-content, .app-card-control-band),
html body #mainContent .page-stack.ui-page-stack .app-card-rail
> :is(
    [data-museum-section-choice-card],
    .museum-directory-choice-card
).app-standard-card.is-selected
:is(.museum-card-title-link, .museum-card-action-link, .app-card-action-link) {
    background: var(--app-surface-selected);
    background-image: none;
    border: 0;
    box-shadow: none;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail
> :is(
    [data-museum-section-choice-card],
    .museum-directory-choice-card
).app-standard-card.is-selected
> .app-card-control-band {
    width: 100%;
    min-width: 100%;
    margin: 0;
    outline: 0;
}

html body #mainContent .museum-experience-page-stack
.museum-exhibition-item.app-standard-card.is-selected,
html body #mainContent .museum-experience-page-stack
.museum-exhibition-item.app-standard-card.is-selected
> :is(.museum-exhibition-content, .app-card-control-band) {
    background: color-mix(
        in srgb,
        var(--app-surface-selected) 50%,
        var(--app-surface-card)
    );
}

/* Section choices have no state-action stack, so their content owns the
 * complete right side at every viewport. */
html body #mainContent .museum-experience-page-stack
.museum-section-selector
> .museum-section-choice-card.app-standard-card.app-horizontal-card {
    grid-template-columns:
        minmax(7.25rem, 31%)
        minmax(0, 1fr);
}

html body #mainContent .museum-experience-page-stack
.museum-section-selector
> .museum-section-choice-card.app-standard-card.is-selected {
    column-gap: 0;
    row-gap: 0;
}
/* Every Standard, Featured, and Horizontal content-card variant shares the
 * same flat outer surface and fills the complete slot assigned by its rail.
 * Variants may change composition, never the skin or track occupancy.
 * carousels.css loads after this owner and may replace the 100% inline size
 * with its calculated scrollable-card size without page-local overrides. */
html body #mainContent .page-stack.ui-page-stack :is(.app-card-rail, .app-landing-card-grid) > .app-standard-card {
    box-sizing: border-box;
    justify-self: stretch;
    width: 100%;
    inline-size: 100%;
    max-width: 100%;
    max-inline-size: 100%;
    box-shadow: none;
    transform: none;
}

html body #mainContent .page-stack.ui-page-stack :is(.app-card-rail, .app-landing-card-grid) > .app-standard-card:is(:hover, :has(:focus-visible)) {
    box-shadow: none;
}

html body #mainContent .page-stack.ui-page-stack :is(.app-card-rail, .app-landing-card-grid) > .app-standard-card > :is(.app-card-content, .museum-exhibition-content, .app-card-control-band) {
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
html body #mainContent .page-stack.ui-page-stack .app-landing-card-grid {
    align-items: start;
}

/* A resident no-match or unavailable card uses one complete bounded track.
 * It never inherits an empty slot from a multi-column result grid or carousel. */
html body #mainContent .page-stack.ui-page-stack
.app-card-rail.app-content-state-rail {
    display: grid;
    grid-template-columns: minmax(0, min(100%, 26rem));
    grid-auto-flow: row;
    justify-content: start;
    align-items: start;
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    overflow: visible;
}

html body #mainContent .page-stack.ui-page-stack
.app-card-rail.app-content-state-rail > .app-content-state-card.app-standard-card {
    justify-self: stretch;
    inline-size: 100%;
    width: 100%;
    max-inline-size: 26rem;
    max-width: 26rem;
}

/* One global card presentation for public collections, My Account saved
 * collections, Help, and Newsroom media. Domain templates keep their content
 * and actions; this owner keeps one stable frame with independent media, copy,
 * and action rows at every viewport. */
html body #mainContent .page-stack.ui-page-stack .app-card-rail > .app-standard-card:not(.app-featured-card):not(.app-horizontal-card),
html body #mainContent .page-stack.ui-page-stack .app-landing-card-grid > .app-standard-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-content: stretch;
    align-items: stretch;
    min-width: 0;
    min-inline-size: 0;
    height: var(--app-standard-card-height);
    block-size: var(--app-standard-card-height);
    min-height: var(--app-standard-card-height);
    min-block-size: var(--app-standard-card-height);
    max-height: var(--app-standard-card-height);
    max-block-size: var(--app-standard-card-height);
    padding: 0;
    box-shadow: none;
    overflow: hidden;
    transform: none;
}

html body #mainContent .page-stack.ui-page-stack .app-card-rail > .app-standard-card:not(.app-featured-card):not(.app-horizontal-card):is(:hover, :has(:focus-visible)),
html body #mainContent .page-stack.ui-page-stack .app-landing-card-grid > .app-standard-card:is(:hover, :has(:focus-visible)) {
    box-shadow: none;
}

html body #mainContent .page-stack.ui-page-stack :is(
    .app-card-rail > .app-standard-card:not(.app-featured-card):not(.app-horizontal-card),
    .app-landing-card-grid > .app-standard-card
) > :is(
    .app-card-media,
    .museum-exhibition-image-link,
    .home-exhibition-media,
    .social-channel-post-media,
    .account-favorite-image-link,
    .newsroom-media-card-image
) {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    flex: none;
    width: 100%;
    inline-size: 100%;
    height: var(--app-standard-card-media-height);
    block-size: var(--app-standard-card-media-height);
    min-height: var(--app-standard-card-media-height);
    min-block-size: var(--app-standard-card-media-height);
    max-height: var(--app-standard-card-media-height);
    max-block-size: var(--app-standard-card-media-height);
    aspect-ratio: auto;
    border-radius: 0;
    background: var(--app-card-media-placeholder-bg);
    overflow: hidden;
}

html body #mainContent .page-stack.ui-page-stack :is(
    .app-card-rail > .app-standard-card:not(.app-featured-card):not(.app-horizontal-card),
    .app-landing-card-grid > .app-standard-card
) > :is(
    .app-card-media,
    .museum-exhibition-image-link,
    .home-exhibition-media,
    .social-channel-post-media,
    .account-favorite-image-link,
    .newsroom-media-card-image
) :is(img, .app-card-image, .museum-card-image, .museum-exhibition-image, .account-favorite-image) {
    display: block;
    width: 100%;
    inline-size: 100%;
    height: 100%;
    block-size: 100%;
    max-height: none;
    max-block-size: none;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
}

html body #mainContent .page-stack.ui-page-stack :is(
    .app-card-rail > .app-standard-card:not(.app-featured-card):not(.app-horizontal-card),
    .app-landing-card-grid > .app-standard-card
) > :is(
    .app-card-content,
    .museum-exhibition-content,
    .home-exhibition-copy,
    .social-channel-post-copy,
    .account-favorite-link,
    .newsroom-media-card-body
) {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    padding: 1rem 1rem 0;
    background: transparent;
    overflow: hidden;
}

html body #mainContent .page-stack.ui-page-stack :is(
    .app-card-rail > .app-standard-card:not(.app-featured-card):not(.app-horizontal-card):not(.is-card-copy-expanded),
    .app-landing-card-grid > .app-standard-card:not(.is-card-copy-expanded)
) .app-card-copy-scroll-region {
    height: 100%;
    min-height: 0;
    max-height: 100%;
    padding: 0 0.35rem 0 0;
    overflow: hidden;
}

html body #mainContent .page-stack.ui-page-stack :is(
    .app-card-rail > .app-standard-card:not(.app-featured-card):not(.app-horizontal-card),
    .app-landing-card-grid > .app-standard-card
) :is(
    .museum-exhibition-title,
    .app-card-title,
    .museum-card-title,
    .museum-card-title-link,
    .newsroom-media-card-title,
    .content-empty-card-title
) {
    color: var(--app-color-primary-text);
    font-family: var(--app-card-title-font-family);
    font-size: var(--app-card-title-text-size);
    font-weight: var(--app-type-heading-strong-weight);
    letter-spacing: var(--app-card-title-letter-spacing);
    line-height: var(--app-card-title-line-height);
    text-wrap: pretty;
}

html body #mainContent .page-stack.ui-page-stack :is(
    .app-card-rail,
    .app-landing-card-grid
) > .app-standard-card :is(
    .museum-exhibition-title,
    .app-card-title,
    .museum-card-title,
    .museum-card-title-link,
    .newsroom-media-card-title,
    .content-empty-card-title,
    .social-channel-feature-title,
    .social-channel-trending-name
) {
    width: calc(100% + var(--app-card-clamped-text-inline-expansion));
    max-width: none;
    margin-inline: calc(0px - var(--app-card-clamped-text-inline-safety));
    padding-inline: var(--app-card-clamped-text-inline-safety);
}

html body #mainContent .page-stack.ui-page-stack :is(
    .app-card-rail > .app-standard-card,
    .app-landing-card-grid > .app-standard-card
) :is(
    .museum-exhibition-title,
    .museum-card-title-link,
    .app-card-title-link,
    .app-card-context-link
):is(a, button):is(:hover, :focus-visible) {
    text-decoration: none;
}

html body #mainContent .page-stack.ui-page-stack :is(
    .app-card-rail > .app-standard-card:not(.app-featured-card):not(.app-horizontal-card),
    .app-landing-card-grid > .app-standard-card
) > .app-card-control-band {
    position: relative;
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    height: auto;
    min-height: 2.75rem;
    max-height: none;
    margin: 0;
    padding: 0.65rem 1rem 1rem;
    border: 0;
    background: transparent;
    box-shadow: none;
}

html body #mainContent .page-stack.ui-page-stack :is(
    .app-card-rail > .app-standard-card:not(.app-featured-card):not(.app-horizontal-card),
    .app-landing-card-grid > .app-standard-card
) > :is(
    .favorite-toggle-btn-corner,
    .museum-alert-toggle-btn-corner,
    .app-card-variant-state-stack
) {
    position: absolute;
    inset: 0.65rem 0.65rem auto auto;
    top: 0.65rem;
    right: 0.65rem;
    bottom: auto;
    left: auto;
}

@media (max-width: 759px) {
    html body #mainContent .page-stack.ui-page-stack :is(
    .app-card-rail > .app-standard-card:not(.app-featured-card):not(.app-horizontal-card),
    .app-landing-card-grid > .app-standard-card
) :is(
        .museum-exhibition-title,
        .app-card-title,
        .museum-card-title,
        .museum-card-title-link,
        .newsroom-media-card-title,
        .content-empty-card-title
    ) {
        font-size: 1.1875rem;
        line-height: 1.2105;
    }
}

/* Premium card surface contract.
 * The edge and neutral layered depth are universal; motion remains limited to
 * cards with real interactive descendants so status content never looks clickable.
 */
html body #mainContent .page-stack.ui-page-stack :is(
    .app-standard-card,
    .dashboard-menu-card,
    .account-details-card,
    .account-detail-card
) {
    box-sizing: border-box;
    border: 1px solid var(--app-card-border-premium);
    outline: 0;
    border-radius: var(--app-standard-card-radius, var(--app-surface-radius-standard));
    background: var(--app-surface-card);
    box-shadow: var(--app-shadow-card-resting);
    overflow: hidden;
}

html body #mainContent .page-stack.ui-page-stack :is(
    .app-standard-card,
    .dashboard-menu-card,
    .account-details-card,
    .account-detail-card
):has(:is(a, button, summary, input, select, textarea, [tabindex])):is(:hover, :has(:focus-visible)) {
    border-color: var(--app-card-border-premium-hover);
    box-shadow: var(--app-shadow-raised);
}

html body #mainContent .page-stack.ui-page-stack :is(
    .app-standard-card,
    .dashboard-menu-card,
    .account-details-card,
    .account-detail-card
):not(:has(:is(a, button, summary, input, select, textarea, [tabindex]))):is(:hover, :has(:focus-visible)) {
    border-color: var(--app-card-border-premium);
    box-shadow: var(--app-shadow-card-resting);
    transform: none;
}

/* Standard cards use media, copy, then a bottom action band. Featured and
 * Horizontal variants keep their editorial geometry with the same reading order. */
html body #mainContent .page-stack.ui-page-stack .app-standard-card:not(.app-featured-card):not(.app-horizontal-card) > :is(
    .app-card-media,
    .museum-exhibition-image-link,
    .home-exhibition-media,
    .social-channel-post-media,
    .account-favorite-image-link,
    .newsroom-media-card-image
) {
    order: 1;
}

html body #mainContent .page-stack.ui-page-stack .app-standard-card:not(.app-featured-card):not(.app-horizontal-card) > .app-card-control-band {
    order: 3;
    grid-column: 1;
    grid-row: 3;
    align-self: stretch;
    margin: 0;
}

html body #mainContent .page-stack.ui-page-stack .app-standard-card:not(.app-featured-card):not(.app-horizontal-card) > :is(
    .app-card-content,
    .museum-exhibition-content,
    .home-exhibition-copy,
    .social-channel-post-copy,
    .account-favorite-link,
    .newsroom-media-card-body
) {
    order: 2;
    grid-column: 1;
    grid-row: 2;
}

html body #mainContent .page-stack.ui-page-stack :is(
    .app-card-rail > .app-standard-card:not(.app-featured-card):not(.app-horizontal-card),
    .app-landing-card-grid > .app-standard-card:not(.app-featured-card):not(.app-horizontal-card)
) {
    grid-template-rows: auto minmax(0, 1fr) auto;
}

html body #mainContent .page-stack.ui-page-stack :is(
    .app-card-rail > .app-standard-card:not(.app-featured-card):not(.app-horizontal-card),
    .app-landing-card-grid > .app-standard-card:not(.app-featured-card):not(.app-horizontal-card)
) > .app-card-control-band {
    grid-column: 1;
    grid-row: 3;
    min-height: 2.5rem;
    padding: 0.2rem 1rem 0.65rem;
}

html body #mainContent .page-stack.ui-page-stack :is(
    .app-card-rail > .app-standard-card:not(.app-featured-card):not(.app-horizontal-card),
    .app-landing-card-grid > .app-standard-card:not(.app-featured-card):not(.app-horizontal-card)
) > :is(
    .app-card-content,
    .museum-exhibition-content,
    .home-exhibition-copy,
    .social-channel-post-copy,
    .account-favorite-link,
    .newsroom-media-card-body
) {
    grid-column: 1;
    grid-row: 2;
    padding-top: 1rem;
}

/* Below the desktop editorial breakpoint, the first Featured card and two
 * Horizontal cards use the exact Standard media-copy-action sequence. Keep
 * this guard after the global card rules so desktop composition cannot leak
 * back into the mobile and tablet layouts. */
@media (max-width: 980px) {
    html body #mainContent .page-stack.ui-page-stack
    :is(.news-latest-showcase-rail, .social-channel-latest-rail, [data-landing-archive-list])
    > :is(.news-latest-story-card, .social-channel-latest-card):is(.app-featured-card, .app-horizontal-card) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) auto;
    }

    html body #mainContent .page-stack.ui-page-stack
    :is(.news-latest-showcase-rail, .social-channel-latest-rail, [data-landing-archive-list])
    > :is(.news-latest-story-card, .social-channel-latest-card):is(.app-featured-card, .app-horizontal-card)
    > :is(.app-card-media, .museum-exhibition-image-link, .home-exhibition-media, .social-channel-post-media) {
        order: 1;
        grid-column: 1;
        grid-row: 1;
    }

    html body #mainContent .page-stack.ui-page-stack
    :is(.news-latest-showcase-rail, .social-channel-latest-rail, [data-landing-archive-list])
    > :is(.news-latest-story-card, .social-channel-latest-card):is(.app-featured-card, .app-horizontal-card)
    > .app-card-control-band {
        order: 3;
        grid-column: 1;
        grid-row: 3;
        min-height: 2.5rem;
        padding: 0.2rem 1rem 0.65rem;
    }

    html body #mainContent .page-stack.ui-page-stack
    :is(.news-latest-showcase-rail, .social-channel-latest-rail, [data-landing-archive-list])
    > :is(.news-latest-story-card, .social-channel-latest-card):is(.app-featured-card, .app-horizontal-card)
    > :is(.app-card-content, .museum-exhibition-content, .home-exhibition-copy, .social-channel-post-copy) {
        order: 2;
        grid-column: 1;
        grid-row: 2;
        padding-top: 1rem;
    }
}
/* Museum identity cards keep the complete visit stack in the copy track
 * directly after the title, independent of museum-name wrapping. */
html body #mainContent .page-stack.ui-page-stack :is(
    .app-card-rail,
    .app-landing-card-grid
) > .app-standard-card[data-museum-card] > .museum-card-main-link {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-height: 0;
    padding-bottom: var(--app-standard-card-copy-bottom);
}

html body #mainContent .page-stack.ui-page-stack :is(
    .app-card-rail,
    .app-landing-card-grid
) > .app-standard-card[data-museum-card] > .museum-card-main-link > .museum-card-title {
    display: -webkit-box;
    block-size: 2lh;
    min-block-size: 2lh;
    max-block-size: 2lh;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/*
 * Shared content-card rail.
 *
 * This component exclusively owns carousel shell transparency, rail geometry,
 * scrolling, card slots, snap behavior, side controls, and legacy pagination visibility.
 * Card surfaces and internals remain in their card-family owners.
 */

:is(.page-stack.ui-page-stack, .dashboard-page-stack)
:is(.app-card-section, .home-feed-section):has(.app-card-rail[data-mobile-carousel], .app-card-carousel-frame > .app-card-rail[data-mobile-carousel]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
}

:is(.page-stack.ui-page-stack, .dashboard-page-stack) :is(
    .app-card-section-body,
    .home-exhibitions-cards-section,
    .home-youtube-videos-section,
    .social-channel-trending-card-section,
    .social-channel-post-card-section,
    .museum-directory-carousel-section
):has(> .app-card-rail[data-mobile-carousel], > .app-card-carousel-frame > .app-card-rail[data-mobile-carousel]) {
    box-sizing: border-box;
    justify-self: stretch;
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
}

.page-stack.ui-page-stack .museum-directory-carousel-section:has(> .app-card-rail[data-mobile-carousel], > .app-card-carousel-frame > .app-card-rail[data-mobile-carousel]) {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

:is(.page-stack.ui-page-stack, .dashboard-page-stack) .app-card-carousel-frame {
    --app-carousel-handle-radius: 1.6rem;
    --app-carousel-handle-diameter: calc(var(--app-carousel-handle-radius) * 2);
    position: relative;
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
}

.carousel-side-controls {
    display: none;
}

.app-carousel-mobile-pagination {
    display: none;
}

:is(.page-stack.ui-page-stack, .dashboard-page-stack) .carousel-side-controls:not([hidden]) {
    position: absolute;
    inset-inline: 0;
    top: 50%;
    z-index: 12;
    display: block;
    block-size: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
    transform: translateY(-50%);
}

:is(.page-stack.ui-page-stack, .dashboard-page-stack) .mobile-carousel-buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    inline-size: 100%;
    block-size: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

:is(.page-stack.ui-page-stack, .dashboard-page-stack) .mobile-carousel-btn {
    display: grid;
    place-items: center;
    pointer-events: auto;
    inline-size: var(--app-carousel-handle-radius);
    block-size: var(--app-carousel-handle-diameter);
    min-inline-size: var(--app-carousel-handle-radius);
    min-block-size: var(--app-carousel-handle-diameter);
    border: 1px solid var(--app-border-color-strong);
    border-radius: 0;
    background: var(--app-overlay-brand-strong);
    color: var(--app-color-inverse-text);
    box-shadow: var(--app-shadow-header-control-depth);
    font: inherit;
    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease,
        color 160ms ease,
        transform 160ms ease;
    cursor: pointer;
}

:is(.page-stack.ui-page-stack, .dashboard-page-stack) .mobile-carousel-btn svg {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}

:is(.page-stack.ui-page-stack, .dashboard-page-stack) .mobile-carousel-prev svg {
    transform: rotate(90deg);
}

:is(.page-stack.ui-page-stack, .dashboard-page-stack) .mobile-carousel-next svg {
    transform: rotate(-90deg);
}

:is(.page-stack.ui-page-stack, .dashboard-page-stack) .mobile-carousel-prev {
    justify-self: start;
    border-left: 0;
    border-radius: 0 999px 999px 0;
}

:is(.page-stack.ui-page-stack, .dashboard-page-stack) .mobile-carousel-next {
    justify-self: end;
    border-right: 0;
    border-radius: 999px 0 0 999px;
}

:is(.page-stack.ui-page-stack, .dashboard-page-stack) .mobile-carousel-btn:disabled {
    opacity: 0.58;
    cursor: default;
}

:is(.page-stack.ui-page-stack, .dashboard-page-stack)
.mobile-carousel-btn:not(:disabled):hover {
    border-color: var(--app-border-color-strong);
    background: var(--app-color-primary-action-hover);
    color: var(--app-color-on-primary-action);
    box-shadow: var(--app-shadow-header-control-hover);
    transform: translateY(-2px);
}

:is(.page-stack.ui-page-stack, .dashboard-page-stack)
.mobile-carousel-btn:not(:disabled):active {
    background: var(--app-color-primary-action);
    color: var(--app-color-on-primary-action);
    box-shadow: var(--app-shadow-header-control-pressed);
    transform: translateY(1px);
}

:is(.page-stack.ui-page-stack, .dashboard-page-stack)
.mobile-carousel-btn:focus-visible {
    outline: 2px solid var(--app-color-focus);
    outline-offset: 2px;
    box-shadow: var(--app-shadow-header-control-focus);
}

:is(.page-stack.ui-page-stack, .dashboard-page-stack)
.carousel-side-controls.is-carousel-header-controls:not([hidden]) {
    position: static;
    inset: auto;
    z-index: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--app-control-gap);
    block-size: auto;
    margin: 0 0 0 auto;
    padding: 0;
    pointer-events: auto;
    transform: none;
}

:is(.page-stack.ui-page-stack, .dashboard-page-stack)
.is-carousel-header-controls .app-carousel-progress {
    min-inline-size: 5.4rem;
    color: var(--app-color-primary-action);
    font-family: var(--app-font-family-display);
    font-size: var(--app-field-label-font-size);
    font-weight: var(--app-field-label-font-weight);
    letter-spacing: 0.04em;
    line-height: 1;
    text-align: end;
    white-space: nowrap;
}

:is(.page-stack.ui-page-stack, .dashboard-page-stack)
.is-carousel-header-controls .mobile-carousel-buttons {
    display: inline-flex;
    gap: var(--app-control-gap);
    inline-size: auto;
    block-size: auto;
}

:is(.page-stack.ui-page-stack, .dashboard-page-stack)
.is-carousel-header-controls .mobile-carousel-btn {
    inline-size: 2.2rem;
    block-size: 2.2rem;
    min-inline-size: 2.2rem;
    min-block-size: 2.2rem;
    border: 1px solid var(--app-border-color-strong);
    border-radius: 999px;
}

:is(.page-stack.ui-page-stack, .dashboard-page-stack)
.is-carousel-header-controls :is(.mobile-carousel-prev, .mobile-carousel-next) {
    border-inline: 1px solid var(--app-border-color-strong);
    border-radius: 999px;
}

:is(.page-stack.ui-page-stack, .dashboard-page-stack) :is(
    [data-museum-directory-pagination],
    .museum-exhibition-carousel-pagination
) {
    display: none;
}

html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack) [data-mobile-carousel] {
    --app-carousel-card-gap: var(--app-standard-card-gap, 0.78rem);
    --app-carousel-card-inline: calc((100% - (var(--app-carousel-card-gap) * 4)) / 5);
    background-color: transparent;
    background-image: none;
    box-shadow: none;
}

html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
.news-article-fact-grid[data-mobile-carousel] {
    --app-carousel-card-gap: clamp(1.25rem, 1.7vw, 1.5rem);
}

html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
[data-mobile-carousel][data-carousel-visible="4"] {
    --app-carousel-card-inline: calc((100% - (var(--app-carousel-card-gap) * 3)) / 4);
}

html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
[data-mobile-carousel][data-carousel-visible="3"] {
    --app-carousel-card-inline: calc((100% - (var(--app-carousel-card-gap) * 2)) / 3);
}

html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
[data-mobile-carousel][data-carousel-visible="1"] {
    --app-carousel-card-inline: 100%;
}

html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
[data-mobile-carousel]:not(.mobile-carousel-is-scrollable) {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-flow: row;
    align-items: stretch;
    justify-content: start;
    justify-items: stretch;
    gap: var(--app-carousel-card-gap);
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    margin-inline: 0;
}

html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
[data-mobile-carousel][data-carousel-visible="1"]:not(.mobile-carousel-is-scrollable) {
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1201px) {
    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    [data-mobile-carousel][data-carousel-visible="3"]:not(.mobile-carousel-is-scrollable) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    [data-mobile-carousel][data-carousel-visible="4"]:not(.mobile-carousel-is-scrollable) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
[data-mobile-carousel]:not(.mobile-carousel-is-scrollable)
> :not([hidden]):not(.museum-pagination-hidden) {
    grid-column: auto;
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
}

:is(.page-stack.ui-page-stack, .dashboard-page-stack)
:is(.app-card-rail, .museum-grid, .home-exhibition-grid)[data-mobile-carousel].mobile-carousel-is-scrollable {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--app-carousel-card-gap);
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    margin-inline: 0;
    padding: 0.75rem 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 0;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: none;
    mask-image: none;
}

:is(.page-stack.ui-page-stack, .dashboard-page-stack)
:is(.app-card-rail, .museum-grid, .home-exhibition-grid)[data-mobile-carousel].mobile-carousel-is-scrollable::-webkit-scrollbar {
    display: none;
    block-size: 0;
}

html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
[data-mobile-carousel].mobile-carousel-is-scrollable
> :not([hidden]):not(.museum-pagination-hidden):not(.carousel-side-controls) {
    flex: 0 0 var(--app-carousel-card-inline);
    align-self: stretch;
    box-sizing: border-box;
    inline-size: var(--app-carousel-card-inline);
    min-inline-size: 0;
    max-inline-size: none;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

:is(.page-stack.ui-page-stack, .dashboard-page-stack)
.app-card-rail[data-mobile-carousel] > :is(.museum-pagination-hidden, [hidden]) {
    display: none;
}

@media (max-width: 1200px) {
    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack) [data-mobile-carousel] {
        --app-carousel-card-inline: calc((100% - (var(--app-carousel-card-gap) * 2)) / 3);
    }

    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    [data-mobile-carousel]:not(.mobile-carousel-is-scrollable) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack) [data-mobile-carousel] {
        --app-carousel-card-inline: calc((100% - var(--app-carousel-card-gap)) / 2);
    }

    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    [data-mobile-carousel]:not(.mobile-carousel-is-scrollable) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .page-stack.ui-page-stack
    .home-top-stories-grid.app-card-rail[data-mobile-carousel]
    > .home-more-card-news {
        order: -1;
    }

    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack) [data-mobile-carousel] {
        --app-carousel-card-inline: 100%;
    }

    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    [data-mobile-carousel]:not(.mobile-carousel-is-scrollable) {
        grid-template-columns: minmax(0, 1fr);
    }

    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    :is(.app-card-rail, .museum-grid, .home-exhibition-grid)[data-mobile-carousel].mobile-carousel-is-scrollable {
        padding-inline: 0;
        scroll-padding-inline: 0;
    }

    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    [data-mobile-carousel].mobile-carousel-is-scrollable
    > :not([hidden]):not(.museum-pagination-hidden):not(.carousel-side-controls) {
        flex-basis: 100%;
        inline-size: 100%;
        max-inline-size: 100%;
        scroll-snap-align: start;
    }

    :is(.page-stack.ui-page-stack, .dashboard-page-stack) .mobile-carousel-buttons {
        justify-content: space-between;
        gap: 0;
        inline-size: 100%;
    }

    html body #mainContent .help-center-page-stack
    .help-center-grid.app-card-rail[data-mobile-carousel].mobile-carousel-is-scrollable {
        padding-inline: 0;
        scroll-padding-inline: 0;
    }
}

html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
.app-card-carousel-frame:has(> .news-article-gallery-thumbnails) {
    inline-size: min(100%, 42rem);
    max-inline-size: 42rem;
    margin-inline: 0;
    margin-block-end: 0;
}

/* Scrollable Standard and Horizontal card rails reserve a restrained inline
   preview on both sides. At the boundaries the unavailable side collapses,
   leaving the combined preview on the side that still has another card. */
html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
[data-mobile-carousel].app-carousel-has-card-peek {
    --app-carousel-card-inline: calc(
        (
            100%
            - (var(--app-carousel-card-gap) * 6)
            - (var(--app-carousel-peek-visible) * 2)
        ) / 5
    );
    scroll-padding-inline: calc(
        var(--app-carousel-card-gap)
        + var(--app-carousel-peek-visible)
    );
}

html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
[data-mobile-carousel][data-carousel-visible="3"].app-carousel-has-card-peek {
    --app-carousel-card-inline: calc(
        (
            100%
            - (var(--app-carousel-card-gap) * 4)
            - (var(--app-carousel-peek-visible) * 2)
        ) / 3
    );
}

html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
[data-mobile-carousel][data-carousel-visible="1"].app-carousel-has-card-peek {
    --app-carousel-card-inline: calc(
        100%
        - (var(--app-carousel-card-gap) * 2)
        - (var(--app-carousel-peek-visible) * 2)
    );
}

@media (max-width: 1200px) {
    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    [data-mobile-carousel].app-carousel-has-card-peek {
        --app-carousel-card-inline: calc(
            (
                100%
                - (var(--app-carousel-card-gap) * 4)
                - (var(--app-carousel-peek-visible) * 2)
            ) / 3
        );
    }
}

@media (max-width: 980px) {
    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    [data-mobile-carousel].app-carousel-has-card-peek {
        --app-carousel-card-inline: calc(
            (
                100%
                - (var(--app-carousel-card-gap) * 3)
                - (var(--app-carousel-peek-visible) * 2)
            ) / 2
        );
    }
}

@media (max-width: 760px) {
    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    [data-mobile-carousel].app-carousel-has-card-peek {
        --app-carousel-card-inline: calc(
            100%
            - (var(--app-carousel-card-gap) * 2)
            - (var(--app-carousel-peek-visible) * 2)
        );
    }

    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    [data-mobile-carousel].mobile-carousel-is-scrollable.app-carousel-has-card-peek
    > :not([hidden]):not(.museum-pagination-hidden):not(.carousel-side-controls) {
        flex-basis: var(--app-carousel-card-inline);
        inline-size: var(--app-carousel-card-inline);
        max-inline-size: none;
    }
}

@media (min-width: 761px) and (max-width: 1200px) {
    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    [data-mobile-carousel][data-carousel-visible-tablet="2"] {
        --app-carousel-card-inline: calc((100% - var(--app-carousel-card-gap)) / 2);
    }

    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    [data-mobile-carousel][data-carousel-visible-tablet="2"]:not(.mobile-carousel-is-scrollable) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    [data-mobile-carousel][data-carousel-visible-tablet="2"].app-carousel-has-card-peek {
        --app-carousel-card-inline: calc(
            (
                100%
                - (var(--app-carousel-card-gap) * 3)
                - (var(--app-carousel-peek-visible) * 2)
            ) / 2
        );
    }
}
/* Explicit one-card rails keep the one-card formula at every breakpoint. */
html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
[data-mobile-carousel][data-carousel-visible="1"].app-carousel-has-card-peek {
    --app-carousel-card-inline: calc(
        100%
        - (var(--app-carousel-card-gap) * 2)
        - (var(--app-carousel-peek-visible) * 2)
    );
}

/* A phone carousel always presents its active snap slot on the rail's center
   axis. The equal physical gutters preserve the neighboring-card preview
   without making the first or last complete card appear shifted left/right. */
@media (max-width: 760px) {
    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    [data-mobile-carousel].app-carousel-has-card-peek {
        --app-carousel-center-gutter: calc(
            var(--app-carousel-card-gap)
            + var(--app-carousel-peek-visible)
        );
        --app-carousel-card-inline: 100%;
    }

    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    [data-mobile-carousel].mobile-carousel-is-scrollable.app-carousel-has-card-peek {
        padding-inline: var(--app-carousel-center-gutter);
        scroll-padding-inline: var(--app-carousel-center-gutter);
    }
}

/* Editorial information rails share the carousel engine but keep readable,
   content-led card proportions instead of destination-card slot geometry. */
html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
.news-article-fact-grid[data-mobile-carousel].mobile-carousel-is-scrollable.app-carousel-has-card-peek {
    --app-carousel-card-inline: clamp(20.625rem, 36%, 21.875rem);
    list-style: none;
}

@media (min-width: 761px) and (max-width: 980px) {
    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    .news-article-fact-grid[data-mobile-carousel].mobile-carousel-is-scrollable.app-carousel-has-card-peek {
        --app-carousel-card-inline: clamp(20rem, 46%, 21.875rem);
    }
}

@media (max-width: 760px) {
    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    .news-article-fact-grid[data-mobile-carousel].mobile-carousel-is-scrollable.app-carousel-has-card-peek {
        --app-carousel-card-inline: calc(
            100%
            - var(--app-carousel-card-gap)
            - var(--app-carousel-peek-visible)
        );
        padding-inline: 0;
        scroll-padding-inline: 0;
    }
}
html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
.news-article-gallery-thumbnails.app-card-rail[data-mobile-carousel] {
    --app-carousel-card-inline: clamp(4.25rem, 15%, 5.75rem);
    margin-block-end: 0;
    background: var(--app-surface-inner);
    padding: 0.45rem;
    scroll-padding-inline: 0.45rem;
}

html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
.news-article-gallery-thumbnails.app-card-rail[data-mobile-carousel].mobile-carousel-is-scrollable
> .news-article-gallery-thumbnail {
    flex-basis: var(--app-carousel-card-inline);
    inline-size: var(--app-carousel-card-inline);
    max-inline-size: var(--app-carousel-card-inline);
}

/* The shared rail may opt into a vertical axis while retaining the same
   measured overflow, adjacent-card movement, controls, and snap contract. */
:is(.page-stack.ui-page-stack, .dashboard-page-stack)
[data-mobile-carousel][data-carousel-effective-axis="vertical"] {
    align-content: start;
    justify-content: flex-start;
}

:is(.page-stack.ui-page-stack, .dashboard-page-stack)
.app-card-carousel-frame.is-vertical {
    min-block-size: 0;
}

:is(.page-stack.ui-page-stack, .dashboard-page-stack)
.app-card-carousel-frame.is-vertical
> .carousel-side-controls:not([hidden]) {
    inset: 0 auto;
    inset-inline-start: 50%;
    block-size: 100%;
    inline-size: 0;
    transform: translateX(-50%);
}

:is(.page-stack.ui-page-stack, .dashboard-page-stack)
.app-card-carousel-frame.is-vertical .mobile-carousel-buttons {
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    inline-size: 0;
    block-size: 100%;
}

:is(.page-stack.ui-page-stack, .dashboard-page-stack)
.app-card-carousel-frame.is-vertical .mobile-carousel-btn {
    inline-size: var(--app-carousel-handle-diameter);
    block-size: var(--app-carousel-handle-radius);
    min-inline-size: var(--app-carousel-handle-diameter);
    min-block-size: var(--app-carousel-handle-radius);
}

:is(.page-stack.ui-page-stack, .dashboard-page-stack)
.app-card-carousel-frame.is-vertical .mobile-carousel-prev {
    border: 1px solid var(--app-border-color-strong);
    border-block-start: 0;
    border-radius: 0 0 999px 999px;
}

:is(.page-stack.ui-page-stack, .dashboard-page-stack)
.app-card-carousel-frame.is-vertical .mobile-carousel-next {
    border: 1px solid var(--app-border-color-strong);
    border-block-end: 0;
    border-radius: 999px 999px 0 0;
}

:is(.page-stack.ui-page-stack, .dashboard-page-stack)
.app-card-carousel-frame.is-vertical .mobile-carousel-prev svg {
    transform: rotate(180deg);
}

:is(.page-stack.ui-page-stack, .dashboard-page-stack)
.app-card-carousel-frame.is-vertical .mobile-carousel-next svg {
    transform: none;
}

html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
:is(.app-card-rail, .museum-grid, .home-exhibition-grid)[data-mobile-carousel][data-carousel-effective-axis="vertical"].mobile-carousel-is-scrollable {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    block-size: 100%;
    padding: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    overscroll-behavior-x: auto;
    overscroll-behavior-y: auto;
    scroll-padding: 0;
    scroll-snap-type: y mandatory;
    touch-action: pan-y;
}

html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
[data-mobile-carousel][data-carousel-effective-axis="vertical"]:not(.mobile-carousel-is-scrollable) {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
}

html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
[data-mobile-carousel][data-carousel-effective-axis="vertical"].mobile-carousel-is-scrollable
> :not([hidden]):not(.museum-pagination-hidden):not(.carousel-side-controls) {
    flex: 0 0 auto;
    align-self: stretch;
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* Shared phone presentation: one dominant card centered on the rail axis.
   Physical boundary gutters let the first and final cards use the same center
   snap as every middle card while preserving the neighboring-card preview. */
@media (max-width: 760px) {
    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    .app-card-carousel-frame
    > :is(.app-card-rail, .museum-grid, .home-exhibition-grid)[data-mobile-carousel] {
        --app-mobile-carousel-card-inline: 88%;
        --app-carousel-card-gap: clamp(0.7rem, 3.2vw, 0.85rem);
    }

    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    .app-card-carousel-frame
    > :is(.app-card-rail, .museum-grid, .home-exhibition-grid)[data-mobile-carousel][data-carousel-effective-axis="horizontal"] {
        --app-carousel-card-inline: var(--app-mobile-carousel-card-inline);
    }

    /* A one-card rail is still a carousel presentation surface. Keep its
       single slot on the same center axis and at the same dominant width as
       multi-card rails; it simply omits scrolling, previews, and pagination. */
    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    .app-card-carousel-frame
    > :is(
        .app-card-rail:not(.news-article-gallery, .news-article-gallery-thumbnails),
        .museum-grid,
        .home-exhibition-grid
    )[data-mobile-carousel][data-carousel-effective-axis="horizontal"]:not(.mobile-carousel-is-scrollable) {
        display: flex;
        align-items: stretch;
        justify-content: center;
        gap: var(--app-carousel-card-gap);
    }

    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    .app-card-carousel-frame
    > :is(
        .app-card-rail:not(.news-article-gallery, .news-article-gallery-thumbnails),
        .museum-grid,
        .home-exhibition-grid
    )[data-mobile-carousel][data-carousel-effective-axis="horizontal"]:not(.mobile-carousel-is-scrollable)
    > :not([hidden]):not(.museum-pagination-hidden):not(.carousel-side-controls) {
        flex: 0 0 var(--app-mobile-carousel-card-inline);
        inline-size: var(--app-mobile-carousel-card-inline);
        max-inline-size: var(--app-mobile-carousel-card-inline);
    }

    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    .app-card-carousel-frame
    > :is(.app-card-rail, .museum-grid, .home-exhibition-grid)[data-mobile-carousel][data-carousel-effective-axis="horizontal"].mobile-carousel-is-scrollable {
        padding-inline: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        scroll-padding-inline: 0;
        scroll-snap-type: x mandatory;
        touch-action: pan-x pan-y pinch-zoom;
        cursor: grab;
    }

    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    .app-card-carousel-frame
    > :is(.app-card-rail, .museum-grid, .home-exhibition-grid)[data-mobile-carousel][data-carousel-effective-axis="horizontal"].mobile-carousel-is-scrollable.is-carousel-dragging {
        cursor: grabbing;
        scroll-snap-type: none;
        user-select: none;
    }

    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    .app-card-carousel-frame
    > :is(.app-card-rail, .museum-grid, .home-exhibition-grid)[data-mobile-carousel][data-carousel-effective-axis="horizontal"].mobile-carousel-is-scrollable
    > :is([hidden], .museum-pagination-hidden) {
        display: none;
    }

    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    .app-card-carousel-frame
    > :is(.app-card-rail, .museum-grid, .home-exhibition-grid)[data-mobile-carousel][data-carousel-effective-axis="horizontal"].mobile-carousel-is-scrollable
    > :not([hidden]):not(.museum-pagination-hidden):not(.carousel-side-controls) {
        flex: 0 0 var(--app-mobile-carousel-card-inline);
        inline-size: var(--app-mobile-carousel-card-inline);
        max-inline-size: var(--app-mobile-carousel-card-inline);
        opacity: 1;
        transform: none;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    .app-card-carousel-frame
    > [data-mobile-carousel][data-carousel-effective-axis="horizontal"].mobile-carousel-is-scrollable::before,
    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    .app-card-carousel-frame
    > [data-mobile-carousel][data-carousel-effective-axis="horizontal"].mobile-carousel-is-scrollable::after {
        content: "";
        flex: 0 0 max(
            0px,
            calc(
                ((100% - var(--app-mobile-carousel-card-inline)) / 2)
                - var(--app-carousel-card-gap)
            )
        );
        inline-size: max(
            0px,
            calc(
                ((100% - var(--app-mobile-carousel-card-inline)) / 2)
                - var(--app-carousel-card-gap)
            )
        );
        pointer-events: none;
    }

    :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    .app-card-carousel-frame
    > .app-carousel-mobile-pagination:not([hidden]) {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.42rem;
        inline-size: max-content;
        max-inline-size: min(70vw, 14rem);
        min-block-size: 1.5rem;
        margin: 0.55rem auto 0;
        padding: 0.25rem 0.15rem;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    .app-carousel-mobile-pagination::-webkit-scrollbar {
        display: none;
    }

    :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    .app-carousel-page-dot {
        flex: 0 0 auto;
        inline-size: 0.45rem;
        block-size: 0.45rem;
        min-inline-size: 0.45rem;
        min-block-size: 0.45rem;
        padding: 0;
        border: 1px solid var(--app-border-color-strong);
        border-radius: 999px;
        background: transparent;
        box-shadow: none;
        transition:
            inline-size 180ms cubic-bezier(0.16, 1, 0.3, 1),
            background-color 180ms ease,
            border-color 180ms ease;
        cursor: pointer;
    }

    :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    .app-carousel-page-dot.is-active {
        inline-size: 1.35rem;
        background: var(--app-color-primary-action);
        border-color: var(--app-color-primary-action);
    }

    :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    .app-carousel-page-dot:disabled {
        cursor: default;
    }

    :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    .app-carousel-page-dot:focus-visible {
        outline: 2px solid var(--app-color-focus);
        outline-offset: 2px;
    }

    :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    .app-card-carousel-frame:has(> .app-carousel-mobile-pagination:not([hidden]))
    > .carousel-side-controls:not([hidden]) {
        top: calc(50% - 1rem);
    }

}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    .app-card-carousel-frame
    > :is(.app-card-rail, .museum-grid, .home-exhibition-grid)[data-mobile-carousel][data-carousel-effective-axis="horizontal"].mobile-carousel-is-scrollable {
        scroll-behavior: auto;
    }

    :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    .app-carousel-page-dot {
        transition: none;
    }
}

/* Match the initialized phone geometry on the first CSS layout pass. The
   shared initializer adds its frame, controls, state classes, and pagination
   later, but card and media width must not depend on that JavaScript timing.
   Requiring two visible siblings keeps single-result and empty rails full
   width while also covering dynamically inserted search/favorite results. */
@media (max-width: 760px) {
    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    :is(
        .app-card-rail:not(.news-article-gallery, .news-article-gallery-thumbnails),
        .museum-grid,
        .home-exhibition-grid
    )[data-mobile-carousel]:not(.mobile-carousel-is-scrollable):not(:has(
        > :not([hidden]):not(.museum-pagination-hidden)
        ~ :not([hidden]):not(.museum-pagination-hidden)
    )) {
        --app-carousel-first-paint-card-inline: 88%;
        --app-carousel-card-gap: clamp(0.7rem, 3.2vw, 0.85rem);
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: center;
        gap: var(--app-carousel-card-gap);
    }

    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    :is(
        .app-card-rail:not(.news-article-gallery, .news-article-gallery-thumbnails),
        .museum-grid,
        .home-exhibition-grid
    )[data-mobile-carousel]:not(.mobile-carousel-is-scrollable):not(:has(
        > :not([hidden]):not(.museum-pagination-hidden)
        ~ :not([hidden]):not(.museum-pagination-hidden)
    ))
    > :not([hidden]):not(.museum-pagination-hidden):not(.carousel-side-controls) {
        flex: 0 0 var(--app-carousel-first-paint-card-inline);
        inline-size: var(--app-carousel-first-paint-card-inline);
        max-inline-size: var(--app-carousel-first-paint-card-inline);
    }

    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    :is(.app-card-rail, .museum-grid, .home-exhibition-grid)[data-mobile-carousel]:not(.mobile-carousel-is-scrollable):has(
        > :not([hidden]):not(.museum-pagination-hidden)
        ~ :not([hidden]):not(.museum-pagination-hidden)
    ) {
        --app-carousel-first-paint-card-inline: 88%;
        --app-carousel-card-gap: clamp(0.7rem, 3.2vw, 0.85rem);
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: var(--app-carousel-card-gap);
        box-sizing: border-box;
        inline-size: 100%;
        max-inline-size: 100%;
        min-inline-size: 0;
        margin-inline: 0;
        padding: 0.75rem 0;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    /* Match the initialized boundary gutters before JavaScript creates the
       carousel frame. This keeps the first 88%-wide card on the center axis
       throughout first paint instead of briefly exposing a left-aligned slot. */
    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    :is(.app-card-rail, .museum-grid, .home-exhibition-grid)[data-mobile-carousel]:not(.mobile-carousel-is-scrollable):has(
        > :not([hidden]):not(.museum-pagination-hidden)
        ~ :not([hidden]):not(.museum-pagination-hidden)
    )::before,
    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    :is(.app-card-rail, .museum-grid, .home-exhibition-grid)[data-mobile-carousel]:not(.mobile-carousel-is-scrollable):has(
        > :not([hidden]):not(.museum-pagination-hidden)
        ~ :not([hidden]):not(.museum-pagination-hidden)
    )::after {
        content: "";
        flex: 0 0 max(
            0px,
            calc(
                ((100% - var(--app-carousel-first-paint-card-inline)) / 2)
                - var(--app-carousel-card-gap)
            )
        );
        inline-size: max(
            0px,
            calc(
                ((100% - var(--app-carousel-first-paint-card-inline)) / 2)
                - var(--app-carousel-card-gap)
            )
        );
        pointer-events: none;
    }

    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    .news-article-fact-grid[data-mobile-carousel]:not(.mobile-carousel-is-scrollable):has(
        > :not([hidden]):not(.museum-pagination-hidden)
        ~ :not([hidden]):not(.museum-pagination-hidden)
    ) {
        --app-carousel-first-paint-card-inline: calc(
            100%
            - var(--app-carousel-card-gap)
            - clamp(12px, 1.5vw, 20px)
        );
    }

    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    .news-article-gallery-thumbnails.app-card-rail[data-mobile-carousel]:not(.mobile-carousel-is-scrollable):has(
        > :not([hidden]):not(.museum-pagination-hidden)
        ~ :not([hidden]):not(.museum-pagination-hidden)
    ) {
        --app-carousel-first-paint-card-inline: clamp(4.25rem, 15%, 5.75rem);
    }

    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    :is(.app-card-rail, .museum-grid, .home-exhibition-grid)[data-mobile-carousel]:not(.mobile-carousel-is-scrollable):has(
        > :not([hidden]):not(.museum-pagination-hidden)
        ~ :not([hidden]):not(.museum-pagination-hidden)
    )
    > :not([hidden]):not(.museum-pagination-hidden):not(.carousel-side-controls) {
        flex: 0 0 var(--app-carousel-first-paint-card-inline);
        align-self: stretch;
        box-sizing: border-box;
        inline-size: var(--app-carousel-first-paint-card-inline);
        min-inline-size: 0;
        max-inline-size: var(--app-carousel-first-paint-card-inline);
    }

    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    :is(.app-card-rail, .museum-grid, .home-exhibition-grid)[data-mobile-carousel]:not(.mobile-carousel-is-scrollable):has(
        > :not([hidden]):not(.museum-pagination-hidden)
        ~ :not([hidden]):not(.museum-pagination-hidden)
    )::-webkit-scrollbar {
        display: none;
        block-size: 0;
    }
}

@media (max-width: 760px) {
    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    .news-article-gallery.app-card-rail[data-mobile-carousel]:not(.mobile-carousel-is-scrollable):has(
        > .news-article-gallery-item
        ~ .news-article-gallery-item
    ) {
        --app-carousel-first-paint-card-inline: 100%;
    }

    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    .news-article-gallery.app-card-rail[data-mobile-carousel].mobile-carousel-is-scrollable {
        --app-carousel-card-inline: 100%;
        padding-inline: 0;
        scroll-padding-inline: 0;
    }

    html body #mainContent :is(.page-stack.ui-page-stack, .dashboard-page-stack)
    .news-article-gallery.app-card-rail[data-mobile-carousel].mobile-carousel-is-scrollable
    > .news-article-gallery-item {
        flex: 0 0 100%;
        inline-size: 100%;
        max-inline-size: 100%;
    }
}

/* Shared plum Share action and one global destination chooser. */

.app-share-trigger{
    position: relative;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--app-control-gap);
    min-height: var(--app-control-min-height);
    padding: var(--app-control-padding-y) var(--app-control-padding-x);
    border: 0;
    border-radius: var(--app-control-radius);
    background: transparent;
    color: var(--app-color-share);
    font: inherit;
    font-size: var(--app-field-label-font-size);
    font-weight: var(--app-field-label-font-weight);
    line-height: 1;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease;
}

.app-share-trigger:is(:hover, :focus-visible){
    background: var(--app-surface-share);
    color: var(--app-color-share);
    transform: none;
}

.app-public-action-bar .app-share-trigger,
.app-public-action-bar .app-share-trigger:is(:hover, :focus-visible){
    color: var(--app-color-share);
}

.app-share-trigger-icon{
    display: grid;
    place-items: center;
    width: var(--app-state-action-icon-size);
    height: var(--app-state-action-icon-size);
    flex: 0 0 var(--app-state-action-icon-size);
    color: var(--app-color-premium-action-icon);
}

.app-share-trigger-icon svg{
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.app-card-control-band .app-share-trigger{
    min-width: var(--app-standard-card-control-size, 1.98rem);
    min-height: var(--app-standard-card-control-size, 1.98rem);
    padding: 0;
}

.app-card-variant-state-stack .app-share-trigger{
    position: static;
    inset: auto;
    flex: 0 0 var(--app-standard-card-control-size, 1.98rem);
    width: var(--app-standard-card-control-size, 1.98rem);
    min-width: var(--app-standard-card-control-size, 1.98rem);
    min-height: var(--app-standard-card-control-size, 1.98rem);
    margin: 0;
    padding: 0;
}

.app-card-control-band .app-share-trigger-label,
.app-card-variant-state-stack .app-share-trigger-label{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.app-share-modal{
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.app-share-modal-card{
    width: min(36rem, calc(100vw - 1.6rem));
    max-height: calc(100dvh - 1.6rem);
    border-radius: var(--app-modal-radius);
    transform: translate3d(0, var(--app-overlay-rise-offset), 0) scale(0.985);
    transform-origin: center;
}

.app-map-modal-card{
    width: min(48rem, calc(100vw - 2rem));
}

/* Map tiles stay inside their canvas; the dialog must scroll on short screens. */
html body .app-share-modal-card.app-map-modal-card {
    overflow-x: hidden;
    overflow-y: auto;
}

.app-map-modal .app-share-modal-heading{
    display: flex;
    align-items: center;
    gap: var(--app-control-gap);
    min-width: 0;
    color: var(--app-color-primary-action);
}

.app-map-modal .app-share-modal-heading > svg{
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 1.5rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.app-map-modal .app-share-modal-heading > span{
    min-width: 0;
}

.app-map-modal .app-share-modal-kicker{
    color: var(--app-color-primary-action);
}

/* Leaflet ships light-only chrome. Re-establish the app theme at the library boundary. */
.app-map-modal .leaflet-container .leaflet-popup-content-wrapper,
.app-map-modal .leaflet-container .leaflet-popup-tip,
.app-map-modal .leaflet-container .leaflet-bar a,
.app-map-modal .leaflet-container .leaflet-control-attribution{
    border-color: var(--app-border-color-standard);
    background: var(--app-surface-elevated);
    color: var(--app-text-color-strong);
}

.app-map-modal .leaflet-container .leaflet-popup-content-wrapper{
    border: 1px solid var(--app-border-color-standard);
}

.app-map-modal .leaflet-container .leaflet-popup-content,
.app-map-modal .leaflet-container .leaflet-popup-close-button,
.app-map-modal .leaflet-container .leaflet-control-attribution a,
.app-map-modal .leaflet-container .leaflet-bar a{
    color: var(--app-text-color-strong);
}

.app-map-modal .leaflet-container .leaflet-control-attribution a,
.app-map-modal .leaflet-container .leaflet-popup-content a{
    text-decoration: none;
}

.app-map-modal .leaflet-container .leaflet-bar a.leaflet-disabled{
    background: var(--app-color-muted-surface);
    color: var(--app-text-color-muted);
}

.app-map-frame-shell{
    width: 100%;
    max-height: 52vh;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--app-control-radius);
    background: var(--app-card-media-placeholder-bg);
}

.app-map-frame{
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.museum-directory-map-layout{
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(13rem, 1fr);
    gap: var(--app-component-flow-gap);
    min-height: min(62vh, 34rem);
}

.museum-directory-map-layout[hidden]{
    display: none;
}

.museum-directory-map-canvas{
    position: relative;
    isolation: isolate;
    z-index: 0;
    min-width: 0;
    min-height: min(62vh, 34rem);
    overflow: hidden;
    border-radius: var(--app-control-radius);
    background: var(--app-card-media-placeholder-bg);
}

.museum-directory-map-list-shell{
    min-width: 0;
    max-height: min(62vh, 34rem);
    overflow-y: auto;
    padding-inline-end: 0.25rem;
}

.museum-directory-map-list-shell h3{
    margin-block: 0 0.65rem;
    color: var(--app-color-primary-action);
}

.museum-directory-map-list{
    display: grid;
    gap: 0.72rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.museum-directory-map-list li,
.museum-directory-map-popup{
    display: grid;
    gap: 0.2rem;
}

.museum-directory-map-list a,
.museum-directory-map-popup :is(strong, a){
    color: var(--app-color-primary-action);
    font-weight: 700;
    text-decoration: none;
}

.museum-directory-map-list a:is(:hover, :focus-visible),
.museum-directory-map-popup a:is(:hover, :focus-visible),
.app-map-modal .leaflet-container .leaflet-popup-content a:is(:hover, :focus-visible),
.app-map-modal .leaflet-container .leaflet-control-attribution a:is(:hover, :focus-visible),
.app-map-modal .leaflet-container .leaflet-bar a:not(.leaflet-disabled):is(:hover, :focus-visible){
    color: var(--app-color-primary-action-hover);
    text-decoration: none;
}

.museum-directory-map-list span,
.museum-directory-map-popup span{
    color: var(--app-text-color-muted);
    font-size: var(--app-field-label-font-size);
}

.museum-directory-map-marker-shell{
    border: 0;
    background: transparent;
}

.museum-directory-map-marker{
    display: grid;
    place-items: center;
    width: 1.875rem;
    height: 1.875rem;
    border: 2px solid var(--app-surface-elevated);
    border-radius: 50% 50% 50% 0;
    background: var(--app-color-primary-action);
    color: var(--app-surface-elevated);
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
    transform: rotate(-45deg);
    box-shadow: var(--shadow-soft);
}

.museum-directory-map-marker > span{
    transform: rotate(45deg);
}

.app-share-modal-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--app-component-flow-gap);
}

.app-share-modal-heading{
    min-width: 0;
    margin: 0;
    color: var(--app-text-color-strong);
    font-size: var(--app-modal-title-size);
    line-height: var(--app-modal-title-line-height);
}

.app-share-modal-card :is(h2, h3, p){
    margin: 0;
}

.app-share-modal-card :is(h2, h3){
    overflow-wrap: anywhere;
}

.app-share-modal-close{
    flex: 0 0 auto;
}

.app-share-modal-description,
.app-share-modal-intro,
.app-share-status{
    color: var(--app-text-color-muted);
}

.app-share-modal-intro{
    font-size: 0.82rem;
    line-height: 1.4;
}

.app-share-link-row{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    gap: 0.55rem 0.35rem;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

.app-share-copy-button{
    white-space: nowrap;
}

.app-share-copy-button .app-share-destination-icon > svg{
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.app-share-section{
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.app-share-section[hidden]{
    display: none;
}

.app-share-section > h3{
    color: var(--app-text-color-strong);
    font-family: var(--app-font-family-display);
    font-size: 1.02rem;
    line-height: 1.25;
}

.app-share-section > p{
    color: var(--app-text-color-muted);
    font-size: 0.82rem;
    line-height: 1.4;
}

.shared-follow-button-row .app-social-icon-control,
.app-drawer-menu .sidebar-follow-section .app-social-icon-control{
    display: inline-grid;
    place-items: center;
    flex: 0 0 2.76rem;
    width: 2.76rem;
    min-width: 2.76rem;
    height: 2.76rem;
    min-height: 2.76rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--app-text-color-strong);
    text-decoration: none;
    cursor: pointer;
    transition:
        border-color 160ms ease,
        background-color 160ms ease,
        color 160ms ease,
        transform 160ms ease;
}

.shared-follow-button-row .app-social-icon-control:is(:hover, :focus-visible),
.app-drawer-menu .sidebar-follow-section .app-social-icon-control:is(:hover, :focus-visible){
    border-color: var(--app-color-link);
    background: var(--app-interactive-hover-surface);
    color: var(--app-interactive-hover-text);
    transform: translateY(-1px);
}

/* Newsletter and Contact symbols contain fixed inverse artwork, so their
   outer tiles retain a distinct color in light and dark themes. */
.shared-follow-button-row .header-newsletter-link.app-social-icon-control,
.shared-follow-button-row .header-newsletter-link.app-social-icon-control:is(:hover, :focus-visible) {
    color: var(--app-color-information);
}

.shared-follow-button-row .header-social-link-contact.app-social-icon-control,
.shared-follow-button-row .header-social-link-contact.app-social-icon-control:is(:hover, :focus-visible) {
    color: var(--app-color-success);
}

.shared-follow-button-row .app-social-icon-control > svg,
.app-drawer-menu .sidebar-follow-section .app-social-icon-control > svg{
    width: 1.55rem;
    height: 1.55rem;
    flex: 0 0 1.55rem;
    background: transparent;
    color: currentColor;
}

.app-share-destinations{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    gap: 0.55rem 0.35rem;
    max-width: 100%;
    min-width: 0;
    padding: 0.3rem 0 0;
}

.app-share-destination{
    display: grid;
    grid-template-rows: 2.9rem auto;
    place-items: start center;
    align-content: start;
    gap: 0.28rem;
    width: 100%;
    min-width: 0;
    min-height: 4.65rem;
    margin: 0;
    padding: 0.18rem;
    border: 0;
    border-radius: var(--app-control-radius);
    background: transparent;
    color: var(--app-text-color-strong);
    font: inherit;
    font-size: 0.68rem;
    font-weight: 720;
    line-height: 1.18;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.app-share-destination[hidden]{
    display: none;
}

.app-share-destination:is(:hover, :focus-visible){
    background: var(--app-interactive-hover-surface);
    color: var(--app-interactive-hover-text);
    transform: translateY(-1px);
}

.app-share-destination > span:last-child{
    max-width: 100%;
    overflow-wrap: anywhere;
}

.app-share-destination-icon{
    display: grid;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
}

.app-share-destination-icon > svg{
    display: block;
    width: 2.55rem;
    height: 2.55rem;
}

.app-share-status{
    grid-column: 2 / -1;
    align-self: center;
    min-width: 0;
    min-height: 1.25em;
    margin: 0;
    font-size: var(--app-field-label-font-size);
    line-height: 1.25;
}

.news-article-gallery-meta-row{
    display: block;
}

.news-article-gallery-heading-row{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35rem;
    width: fit-content;
    max-width: 100%;
}

.news-article-gallery-heading-row .news-article-media-title{
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    font-size: clamp(1.05rem, 1.4vw, 1.22rem);
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.news-article-gallery-heading-row .app-share-trigger{
    flex: 0 0 auto;
    width: 2.25rem;
    min-width: 2.25rem;
    min-height: 2.25rem;
    margin: 0;
    padding: 0.38rem;
}

@media (max-width: 980px){
    .app-share-modal{
        align-items: end;
        padding: 0;
    }

    .app-share-modal-card{
        width: 100%;
        max-width: none;
        max-height: var(--app-overlay-sheet-max-height);
        transform: translate3d(0, var(--app-overlay-sheet-translate), 0);
        transform-origin: bottom center;
        border-radius: var(--app-overlay-sheet-radius);
        padding-block-end: calc(var(--app-modal-padding-y) + env(safe-area-inset-bottom));
        overflow-x: hidden;
        overflow-y: auto;
    }
}

@media (max-width: 760px){
    .app-share-modal-card.app-map-modal-card{
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
    }

    .museum-directory-map-layout{
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .museum-directory-map-canvas{
        min-height: 44vh;
    }

    .museum-directory-map-list-shell{
        max-height: none;
        overflow: visible;
        padding-inline-end: 0;
    }
}


@media (prefers-reduced-motion: reduce){
    .app-share-trigger{
        transition: none;
    }
}

/*
 * Shared section surfaces and page rhythm
 * Moved from utility-overrides.css so this behavior has one functional owner.
 */

/* Final shared section contract.
 * This layer intentionally wins after card and page adapters so section shells,
* carousel bodies,
and compact action sections use one visible border/gap scale.
 */

:root{
    /* Navigation is the visual source of truth for every main page section. */
    --app-section-border: transparent;
    --app-section-border-hover: var(--app-section-border);
    --app-section-inner-bg: var(--app-surface-inner);
    --app-section-radius: 12px;
    --app-section-shadow: none;
    --app-section-shadow-hover: var(--app-section-shadow);
    --app-section-bg: var(--app-surface-section);
    --app-section-bg-hover: var(--app-section-bg);
}

/* Support copy only participates in section rhythm when it has content. */
.page-stack.ui-page-stack .app-section-support-copy:empty{
    display: none;
}

.page-stack.ui-page-stack,
.page-stack.ui-page-stack > :is(.ui-section-stack,
.dashboard-body-panel,
.museum-detail-panel,
.auth-body-panel),
.page-stack.ui-page-stack :is(.ui-section-stack,
.dashboard-body-panel,
.museum-detail-panel,
.auth-body-panel),
.page-stack.ui-page-stack :is(
    .social-channel-feed-sections,
.museum-section-panels
){
    gap: var(--app-page-section-gap);
}

.page-stack.ui-page-stack .app-main-section,
.page-stack.ui-page-stack .app-main-section.ui-legend-card,
.page-stack.ui-page-stack .app-main-section:is(:hover,
:focus-within){
    border: 0;
    outline: 0;
    border-radius: var(--app-section-radius);
    background: var(--app-section-bg);
    box-shadow: var(--app-section-shadow);
    box-sizing: border-box;
    min-inline-size: 0;
    overflow: visible;
}

/* Inner layout shells follow Navigation's dark rail treatment. These are not
   page sections and must never inherit the gold section edge. Repeated content
   cards inside them retain their own component borders from cards.css. */
.page-stack.ui-page-stack :is(
    .app-inner-shell,
.app-card-section-body,
.account-details-list,
.account-details-table-shell,
.museum-directory-results-card,
.museum-directory-carousel-section,
.museum-section-cards-shell,
.museum-search-controls,
.museum-action-report-table-shell,
.ops-table-shell,
.account-section-menu
),
.page-stack.ui-page-stack :is(
    .app-inner-shell,
.app-card-section-body,
.account-details-list,
.account-details-table-shell,
.museum-directory-results-card,
.museum-directory-carousel-section,
.museum-section-cards-shell,
.museum-search-controls,
.museum-action-report-table-shell,
.ops-table-shell,
.account-section-menu
):is(:hover,
:focus-within){
    min-inline-size: 0;
    border: 0;
    border-radius: 6px;
    background: var(--app-section-inner-bg);
    box-shadow: none;
    gap: var(--app-legend-content-gap);
    box-sizing: border-box;
}

/* Explicit role corrections: nested subsections and layout wrappers never
   inherit page-section chrome. Actual repeated cards keep cards.css ownership. */
.page-stack.ui-page-stack .app-inner-shell.ui-legend-card,
.page-stack.ui-page-stack .app-inner-shell.dashboard-card-wrap,
.page-stack.ui-page-stack .app-inner-shell.museum-explorer-section{
    border: 0;
    border-radius: calc(var(--app-section-radius) - 4px);
    background: var(--app-section-inner-bg);
    box-shadow: none;
}

.page-stack.ui-page-stack .app-inner-shell > :is(
    .app-card-section-body,
.museum-directory-carousel-section
),
.page-stack.ui-page-stack .app-inner-shell > :is(
    .app-card-section-body,
.museum-directory-carousel-section
):is(:hover,
:focus-within){
    border: 0;
    background: transparent;
    box-shadow: none;
}

.page-stack.ui-page-stack :is(
    .app-card-section-body,
.account-details-list,
.account-details-table-shell,
.museum-directory-results-card,
.museum-directory-carousel-section,
.museum-section-cards-shell,
.museum-action-report-table-shell,
.ops-table-shell
){
    padding: var(--app-surface-padding-standard, 1rem);
}

/* Navigation already owns a dark disclosure surface. Its card shell is only a
   layout wrapper; a contrasting rounded background reads as a second border
   even when its literal border and outline are removed. */
.page-stack.ui-page-stack .main-navigation-cards-shell.app-card-section-body:is(:hover,
:focus-within){
    padding: var(--app-component-flow-gap);
    border: 0;
    outline: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Pagination is a control row inside a search/results section,
not a repeated
   content card. The legacy museum component family gives the shared base class
   a gold card edge,
which otherwise leaks into social and account searches. */
.page-stack.ui-page-stack :is(
    .museum-exhibition-pagination,
.museum-exhibition-carousel-pagination,
.museum-directory-pagination,
.account-favorites-pagination
),
.page-stack.ui-page-stack :is(
    .museum-exhibition-pagination,
.museum-exhibition-carousel-pagination,
.museum-directory-pagination,
.account-favorites-pagination
):is(:hover,
:focus-within){
    border: 0;
    outline: 0;
    box-shadow: none;
}

/* Explicit standalone section guidance. Templates opt into this transparent
   text role so a broad paragraph selector can never restyle copy inside cards
   or controls. */
.page-stack.ui-page-stack .app-section-support-copy,
.page-stack.ui-page-stack .app-section-support-copy:is(:hover,
:focus-within){
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(0.68rem, 1.5vw, 0.86rem) clamp(0.76rem, 1.8vw, 1rem);
    border: 0;
    outline: 0;
    border-radius: calc(var(--app-section-radius) - 7px);
    background: transparent;
    box-shadow: none;
    color: var(--app-text-color-muted, var(--app-color-accent-text));
    font-size: var(--app-body-copy-size, 0.92rem);
    font-weight: 450;
    line-height: var(--app-body-copy-line-height, 1.42);
    letter-spacing: 0;
    text-align: left;
    overflow-wrap: anywhere;
}

/* Museum directory guidance is plain supporting copy rather than another
   painted surface. Its sibling local search retains the inner-shell surface. */
.page-stack.ui-page-stack .museum-directory-caution-card.app-inner-shell,
.page-stack.ui-page-stack .museum-directory-caution-card.app-inner-shell:is(:hover,
:focus-within){
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
}

.page-stack.ui-page-stack .museum-directory-caution-card.app-inner-shell::before,
.page-stack.ui-page-stack .museum-directory-caution-card.app-inner-shell::after{
    content: none;
    border: 0;
    outline: 0;
    box-shadow: none;
}

.page-stack.ui-page-stack :is(
    .museum-exhibition-pagination,
.museum-exhibition-carousel-pagination,
.museum-directory-pagination,
.account-favorites-pagination
)::before,
.page-stack.ui-page-stack :is(
    .museum-exhibition-pagination,
.museum-exhibition-carousel-pagination,
.museum-directory-pagination,
.account-favorites-pagination
)::after{
    content: none;
    border: 0;
    outline: 0;
    box-shadow: none;
}

@media (max-width: 760px){
    .page-stack.ui-page-stack,
.page-stack.ui-page-stack > :is(.ui-section-stack,
.dashboard-body-panel,
.museum-detail-panel,
.auth-body-panel),
.page-stack.ui-page-stack :is(.ui-section-stack,
.dashboard-body-panel,
.museum-detail-panel,
.auth-body-panel),
.page-stack.ui-page-stack :is(
        .social-channel-feed-sections,
.museum-section-panels
    ){
        gap: var(--app-page-section-gap-mobile);
    }

    .page-stack.ui-page-stack :is(
        .app-card-section-body:has(.app-card-rail),
.museum-directory-carousel-section,
.museum-section-cards-shell
    ){
        gap: var(--app-legend-content-gap-mobile);
    }

    .page-stack.ui-page-stack :is(
        .app-card-section-body:has(.app-card-rail),
.museum-directory-carousel-section,
.museum-section-cards-shell
    ){
        padding: var(--app-surface-inline-rhythm-mobile, 0.9rem);
    }

    html body #mainContent .page-stack.ui-page-stack.museum-experience-page-stack :is(
        .museum-feature-showcase,
        .museum-section-cards-shell
    ){
        width: 100%;
        max-width: 100%;
        padding-inline: 0;
    }
}

/* Editorial application frame and section hierarchy. These selectors live in
 * the shared rhythm owner so every public,
account,
auth,
staff,
and Help
 * surface uses the same content width and understated section chrome. */
html body #mainContent > .page-stack.ui-page-stack{
    width: min(100%, 88rem);
    max-width: 88rem;
    margin-inline: auto;
}

html body #mainContent .page-stack.ui-page-stack .app-main-section{
    border-color: transparent;
    border-radius: var(--app-section-radius);
    background: var(--app-surface-section);
    box-shadow: none;
}

html body #mainContent .page-stack.ui-page-stack :is(
    .museum-card-legend,
    .museum-section-legend,
    .museum-search-card-legend
){
    min-inline-size: 0;
    min-height: 2rem;
    padding: 0.38rem 0.72rem 0.38rem 0.64rem;
    border-color: var(--app-border-color-subtle);
    border-left: 3px solid var(--app-color-accent);
    border-radius: 8px;
    background: var(--app-surface-elevated);
    color: var(--ui-legend-text-standard);
    font-family: var(--app-font-family-display);
    font-size: var(--app-legend-font-size);
    font-weight: 700;
    letter-spacing: -0.005em;
    text-shadow: none;
    box-shadow: none;
}

html body #mainContent .page-stack.ui-page-stack :is(
    .museum-card-legend,
    .museum-section-legend,
    .museum-search-card-legend
) .ui-legend-icon{
    width: 0.88rem;
    height: 0.88rem;
    filter: none;
}

html body #mainContent .page-stack.ui-page-stack :is(
    .app-inner-shell,
    .app-card-section-body,
    .museum-directory-carousel-section,
    .museum-section-cards-shell,
    .help-center-carousel-shell
){
    border-radius: 6px;
    box-shadow: none;
}

@media (max-width: 760px) {
    html body #mainContent > .page-stack.ui-page-stack{
        width: 100%;
    }
}

/* Museum section overviews are inline supporting prose. Keep the shared copy
 * typography without inheriting the generic dark support-panel surface. */
html body #mainContent .page-stack.ui-page-stack.museum-detail-page-stack .museum-section-overview-copy{
    padding: 0;
    border: 0;
    outline: 0;
    border-radius: 0;
    background: transparent;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
}

html body #mainContent .page-stack.ui-page-stack.museum-detail-page-stack .museum-section-overview-label{
    color: var(--app-color-link);
}

/* Museum detail has one visible section owner: .museum-detail-main-panel.
 * The explorer remains a semantic/behavior section,
but it must not create a
 * second card inset or surface inside the outer Exhibitions card. */
html body #mainContent .page-stack.ui-page-stack.museum-detail-page-stack .museum-detail-main-panel > :is(
    .museum-detail-actions,
.museum-caution-card,
.museum-explorer-section,
.museum-empty-msg
){
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-inline: 0;
    justify-self: stretch;
}

html body #mainContent .page-stack.ui-page-stack.museum-detail-page-stack .museum-detail-main-panel > .museum-caution-card,
html body #mainContent .page-stack.ui-page-stack.museum-detail-page-stack .museum-detail-main-panel > .museum-explorer-section{
    margin-block: 0;
    padding: 0;
    border: 0;
    outline: 0;
    border-radius: 0;
    background: transparent;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
}

html body #mainContent .page-stack.ui-page-stack.museum-detail-page-stack .museum-explorer-section :is(
    .museum-panel,
.museum-subpanel,
.museum-subtabs-shell,
.museum-section-cards-shell
){
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-inline: 0;
    padding-inline: 0;
}

/* Application-wide section boundary. A visible .app-main-section owns the
 * outer horizontal inset; its direct layout/behavior hosts fill that content
 * box. Their own internal padding may still express component anatomy. */
html body #mainContent .page-stack.ui-page-stack .app-main-section > :is(
    .app-inner-shell,
.app-card-section-body,
.home-social-actions-section,
.social-channel-actions,
.social-channel-feed-sections,
.museum-local-search,
.museum-tabs,
.museum-caution-card,
.museum-explorer-section,
.account-favorites-panel-stack,
[data-account-panel]
){
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-inline: 0;
    justify-self: stretch;
}

/* Main-section rows and carousel rails never contribute outside block
 * margins. The owning grid gap is the single vertical-spacing source. */
html body #mainContent .page-stack.ui-page-stack .app-main-section
    > :not(.museum-section-legend, .sr-only),
html body #mainContent .page-stack.ui-page-stack .app-card-section-body
    > .app-card-rail{
    margin-block: 0;
}

/* Final page section rhythm: title,
open search,
newsletter,
and body stay aligned. */

:root{

    --app-ui-rhythm-space: clamp(1rem, 5vw, 2.25rem);

    --app-ui-rhythm-space-mobile: clamp(0.9rem, 5vw, 1.35rem);

    --app-page-section-gap: clamp(0.95rem, 2.6vw, 1.35rem);

    --app-page-section-gap-mobile: clamp(0.78rem, 4.5vw, 1.05rem);

    --app-search-panel-gap: clamp(0.78rem, 2vw, 1.1rem);

    --app-legend-external-clearance: clamp(0.95rem, 3vw, 1.35rem);

    --app-legend-external-clearance-mobile: clamp(0.9rem, 5vw, 1.18rem);

    /* Reserve the floating legend without pushing the first real control or
       content block down by a second title-height. */
    --app-legend-inner-clearance: clamp(1.2rem, 2.4vw, 1.55rem);

    --app-legend-inner-clearance-mobile: clamp(1.16rem, 4vw, 1.4rem);

    --app-legend-content-gap: clamp(0.55rem, 1.6vw, 0.9rem);

    --app-legend-content-gap-mobile: clamp(0.46rem, 3vw, 0.72rem);

    --app-surface-inline-rhythm: clamp(1rem, 2vw, 1.5rem);

    --app-surface-block-rhythm: clamp(1rem, 3vw, 1.8rem);

    --app-surface-inline-rhythm-mobile: clamp(0.75rem, 3vw, 1rem);

    --app-surface-block-rhythm-mobile: clamp(0.9rem, 4vw, 1.25rem);

}



.page-stack.ui-page-stack.dashboard-page-stack,
.page-stack.ui-page-stack.museums-page-stack,
.page-stack.ui-page-stack.museum-detail-page-stack,
.page-stack.ui-page-stack.help-center-page-stack,
.page-stack.ui-page-stack.auth-page-stack{

    gap: var(--app-page-section-gap);

}
.page-stack.ui-page-stack > .page-head-newsletter-section + .ui-section-stack,
.page-stack.ui-page-stack > .page-head-newsletter-section + .dashboard-body-panel,
.page-stack.ui-page-stack > .page-head-newsletter-section + .museum-detail-panel{

    margin-top: 0;

}



.page-stack.ui-page-stack > .page-head-newsletter-section{

    margin-block: 0;

    min-width: 0;

}



.page-stack.ui-page-stack > .ui-section-stack,
.page-stack.ui-page-stack > .dashboard-body-panel,
.page-stack.ui-page-stack > .museum-detail-panel,
.page-stack.ui-page-stack > .auth-body-panel{

    padding-top: var(--app-legend-external-clearance);

}



.page-stack.ui-page-stack > .panel.ui-legend-card,
.page-stack.ui-page-stack > .ui-legend-card,
.page-stack.ui-page-stack > .ui-section-stack > .ui-legend-card:not(:first-child),
.page-stack.ui-page-stack .museum-detail-panel > .ui-legend-card:not(:first-child),
.page-stack.ui-page-stack .dashboard-body-panel > .ui-legend-card:not(:first-child),
.page-stack.ui-page-stack .auth-body-panel > .ui-legend-card:not(:first-child){

    margin-top: var(--app-legend-external-clearance);

}



.page-stack.ui-page-stack > .ui-section-stack > .panel.ui-legend-card:first-child,
.page-stack.ui-page-stack > .ui-section-stack > .ui-legend-card:first-child,
.page-stack.ui-page-stack .museum-detail-panel > .ui-legend-card:first-child,
.page-stack.ui-page-stack .dashboard-body-panel > .ui-legend-card:first-child,
.page-stack.ui-page-stack .auth-body-panel > .ui-legend-card:first-child{

    margin-top: 0;

}






.page-stack.ui-page-stack .page-head-newsletter-section .newsletter-tagline{

    justify-self: start;

    text-align: left;

}



@media (max-width: 700px){

    .page-stack.ui-page-stack.dashboard-page-stack,
.page-stack.ui-page-stack.museums-page-stack,
.page-stack.ui-page-stack.museum-detail-page-stack,
.page-stack.ui-page-stack.help-center-page-stack,
.page-stack.ui-page-stack.auth-page-stack{

        gap: var(--app-page-section-gap-mobile);

    }



    .page-stack.ui-page-stack > .ui-section-stack,
.page-stack.ui-page-stack > .dashboard-body-panel,
.page-stack.ui-page-stack > .museum-detail-panel,
.page-stack.ui-page-stack > .auth-body-panel{

        padding-top: var(--app-legend-external-clearance-mobile);

    }



.page-stack.ui-page-stack > .panel.ui-legend-card,
.page-stack.ui-page-stack > .ui-legend-card,
.page-stack.ui-page-stack > .ui-section-stack > .ui-legend-card:not(:first-child),
.page-stack.ui-page-stack .museum-detail-panel > .ui-legend-card:not(:first-child),
.page-stack.ui-page-stack .dashboard-body-panel > .ui-legend-card:not(:first-child),
.page-stack.ui-page-stack .auth-body-panel > .ui-legend-card:not(:first-child){

        margin-top: var(--app-legend-external-clearance-mobile);

    }



    .page-stack.ui-page-stack > .ui-section-stack > .panel.ui-legend-card:first-child,
.page-stack.ui-page-stack > .ui-section-stack > .ui-legend-card:first-child,
.page-stack.ui-page-stack .museum-detail-panel > .ui-legend-card:first-child,
.page-stack.ui-page-stack .dashboard-body-panel > .ui-legend-card:first-child,
.page-stack.ui-page-stack .auth-body-panel > .ui-legend-card:first-child{

        margin-top: 0;

    }



    .content,
.page-stack.ui-page-stack,
.page-stack.ui-page-stack > *,
.page-stack.ui-page-stack > .ui-section-stack,
.page-stack.ui-page-stack > .dashboard-body-panel,
.page-stack.ui-page-stack > .museum-detail-panel,
.page-stack.ui-page-stack > .auth-body-panel,
.page-stack.ui-page-stack :is(
        .panel,
.ui-legend-card,
.dashboard-card-wrap,
.museum-directory-card,
.museum-detail-main-panel,
.museum-admin-panel,
.museum-explorer-section,
.museum-section-block,
.museums-search-panel,
.auth-panel,
.app-card-section,
.app-card-section-body,
.hero-intro-panel,
.home-hero-point,
.museum-caution-card,
.museum-local-search-card,
.dashboard-menu-card
    ){

        inline-size: 100%;
        max-inline-size: 100%;
        min-inline-size: 0;
        box-sizing: border-box;

    }

    .content{

        padding-inline: 0.75rem;

    }

    .page-stack.ui-page-stack{

        inline-size: min(100%, calc(100vw - 1.5rem));
        max-inline-size: calc(100vw - 1.5rem);
        margin-inline: auto;

    }

    .page-stack.ui-page-stack > *,
.page-stack.ui-page-stack :is(
        .panel,
.ui-legend-card,
.dashboard-card-wrap,
.museum-directory-card,
.museum-detail-main-panel,
.museum-admin-panel,
.museum-explorer-section,
.museum-section-block,
.museums-search-panel,
.auth-panel,
.hero-intro-panel,
.home-hero-point,
.museum-caution-card,
.museum-local-search-card,
.dashboard-menu-card
    ){

        max-inline-size: 100%;
        overflow-wrap: anywhere;

    }

    .page-stack.ui-page-stack :is(
        p,
h1,
h2,
h3,
h4,
.home-hero-lead,
.home-hero-point,
.home-hero-point *,
.museum-card-title,
.museum-card-copy,
.dashboard-menu-copy,
.museum-caution-copy,
.museum-exhibition-title,
.museum-exhibition-date,
.social-channel-post-title,
.social-channel-post-date
    ){

        max-inline-size: 100%;
        min-inline-size: 0;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal;
        text-overflow: clip;

    }

    .page-stack.ui-page-stack :is(
        .hero-intro-panel,
.home-hero-points,
.home-hero-point,
.museum-caution-card,
.museum-local-search-card,
.dashboard-menu-card,
.app-card-section-body
    ){

        inline-size: min(100%, calc(100vw - 5rem));
        max-inline-size: calc(100vw - 5rem);
        min-inline-size: 0;

    }

    .page-stack.ui-page-stack :is(
        .home-exhibitions-cards-section.app-card-section-body,
.home-top-stories-cards-section.app-card-section-body
    ){

        inline-size: 100%;
        width: 100%;
        max-inline-size: 100%;
        max-width: 100%;

    }

    .page-stack.ui-page-stack :is(
        .hero-intro-panel p,
.museum-caution-copy,
.museum-card-copy,
.dashboard-menu-copy,
.home-hero-lead,
.social-channel-post-copy,
.account-detail-content
    ){

        max-inline-size: min(100%, 30ch);

    }

    .page-stack.ui-page-stack :is(
        .hero-intro-panel h2,
.museum-card-title,
.museum-exhibition-title,
.social-channel-post-title,
.dashboard-menu-card .museum-card-title
    ){

        max-inline-size: min(100%, 24ch);

    }

    .page-stack.ui-page-stack{

        overflow-x: clip;

    }

}

/* Museum-detail notices use the full content column at every viewport.
 * The generic narrow-phone readability caps above are appropriate for small
 * standalone cards,
but not for the two-line caution/help block inside the
 * already bounded museum detail panel.
 */
.page-stack.ui-page-stack.museum-detail-page-stack .museum-detail-identity-section > .museum-detail-guidance-card{
    inline-size: 100%;
    width: 100%;
    max-inline-size: 100%;
    max-width: 100%;
    min-inline-size: 0;
    justify-self: stretch;
    box-sizing: border-box;
}

.page-stack.ui-page-stack.museum-detail-page-stack .museum-detail-identity-section > .museum-detail-guidance-card :is(
    .museum-caution-copy,
.museum-caution-line
){
    inline-size: 100%;
    width: 100%;
    max-inline-size: 100%;
    max-width: 100%;
    min-inline-size: 0;
    box-sizing: border-box;
}

/* My Account tabs already sit inside the bordered account category section.
 * The active carousel body owns one compact dark inner surface so its cards
 * remain visually grouped,
without restoring a second gold section frame.
 */
.page-stack.ui-page-stack.account-settings-page-stack
    .account-favorites-panel-stack
    [data-account-favorites-panel]
    > .app-card-section-body,
.page-stack.ui-page-stack.account-settings-page-stack
    .account-favorites-panel-stack
    [data-account-favorites-search-panel]
    .user-state-section
    > .app-card-section-body{
    padding: var(--app-surface-padding-standard);
    border: 0;
    border-radius: var(--app-surface-radius-standard);
    background: var(--app-section-inner-bg);
    box-shadow: none;
}

/* My Account owns one visible category panel at a time. Its measured minimum
 * height reserves the tallest panel so changing categories does not move the
 * surrounding page; JavaScript refreshes the value at the current viewport. */
.page-stack.ui-page-stack.account-settings-page-stack .account-favorites-panel-stack{
    display: block;
    align-content: start;
    block-size: auto;
    height: auto;
    min-block-size: var(--app-stable-panel-host-height, 0px);
    min-height: var(--app-stable-panel-host-height, 0px);
    gap: 0;
}

.page-stack.ui-page-stack.account-settings-page-stack .account-favorites-panel-stack
    > :is([data-account-favorites-panel],
[data-account-favorites-search-panel]):not([hidden]),
.page-stack.ui-page-stack.account-settings-page-stack .account-favorites-panel-stack
    > :is([data-account-favorites-panel],
[data-account-favorites-search-panel]):not([hidden])
    > :is(.user-state-section,
.app-card-section-body){
    block-size: auto;
    height: auto;
    min-block-size: 0;
    min-height: 0;
}

.page-stack.ui-page-stack.account-settings-page-stack
    .account-favorites-carousel-panel
    > .app-card-section-body{
    padding: var(--app-surface-padding-standard);
    border: 0;
    border-radius: var(--app-surface-radius-standard);
    background: var(--app-section-inner-bg);
    box-shadow: none;
}

/* Carousel shells are layout only. The outer app section and the repeated
 * cards own the visible surfaces; painting the body/rail inserts an unrelated
 * dark slab between them. Keep this final role correction after account and
 * page adapters so every card carousel has the same transparent canvas. */
:is(.page-stack.ui-page-stack,
.dashboard-page-stack)
    :is(
        .app-card-section-body,
.app-inner-shell:not(.app-main-section),
.museum-directory-carousel-section,
.museum-section-cards-shell,
.help-center-carousel-shell
    ):has(.app-card-rail),
:is(.page-stack.ui-page-stack,
.dashboard-page-stack)
    :is(
        .app-card-section-body,
.app-inner-shell:not(.app-main-section),
.museum-directory-carousel-section,
.museum-section-cards-shell,
.help-center-carousel-shell
    ):has(.app-card-rail):is(:hover,
:focus-within),
:is(.page-stack.ui-page-stack,
.dashboard-page-stack) .app-card-rail,
:is(.page-stack.ui-page-stack,
.dashboard-page-stack) .app-card-rail:is(:hover,
:focus-within){
    background-color: transparent;
    background-image: none;
    box-shadow: none;
}

.page-stack.ui-page-stack.account-settings-page-stack
    .account-favorites-panel-stack
    :is([data-account-favorites-panel],
[data-account-favorites-search-panel])
    .app-card-section-body:has(.app-card-rail),
.page-stack.ui-page-stack.account-settings-page-stack
    .account-favorites-panel-stack
    :is([data-account-favorites-panel],
[data-account-favorites-search-panel])
    .app-card-section-body:has(.app-card-rail):is(:hover,
:focus-within){
    background-color: transparent;
    background-image: none;
    box-shadow: none;
}

/* Account Information actions belong to the final table row and use the
 * shared compact icon-button contract. Accessible names live in markup. */
.page-stack.ui-page-stack.account-settings-page-stack
    .account-detail-actions-row
    .account-detail-table-actions{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.page-stack.ui-page-stack.account-settings-page-stack
    .account-detail-actions-row
    .account-detail-icon-action:not([hidden]){
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--app-control-min-height, 2.45rem);
    width: var(--app-control-min-height, 2.45rem);
    min-inline-size: var(--app-control-min-height, 2.45rem);
    min-width: var(--app-control-min-height, 2.45rem);
    block-size: var(--app-control-min-height, 2.45rem);
    height: var(--app-control-min-height, 2.45rem);
    padding: 0;
}

.page-stack.ui-page-stack.account-settings-page-stack
    .account-detail-actions-row
    .account-detail-icon-action[hidden]{
    display: none;
}

/* The account guidance follows an overlaid section legend. Its page adapter
 * previously zeroed every margin{
    margin-block-start: clamp(0.5rem, 1vw, 0.78rem);
}

/* Account Information is a transparent tab-panel host. Its semantic table is
 * the only content surface; the panel itself must not paint a second dark slab
 * around the table. */
.page-stack.ui-page-stack.account-settings-page-stack
    #account-information,
.page-stack.ui-page-stack.account-settings-page-stack
    #account-information:is(:hover,
:focus-within){
    background: transparent;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
}

/* Empty Favorites states remain real carousel cards and reserve one responsive
 * slot instead of spanning the full rail. */
.page-stack.ui-page-stack.account-settings-page-stack
    .account-favorites-panel-stack
    .account-favorites-list.app-card-rail
    > .user-state-empty-card{
    grid-column: auto;
}

/* Museum visit guidance has one typography and row contract everywhere the
   shared include is rendered, including directory and detail routes. */
.page-stack.ui-page-stack .museum-directory-guidance-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 0;
    width: 100%;
    max-width: none;
    margin-top: 0;
}

.page-stack.ui-page-stack .museum-directory-guidance-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.34rem;
    min-width: 0;
    color: var(--app-text-color-body);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.35;
}

.page-stack.ui-page-stack
    .museum-directory-guidance-warning .museum-caution-icon-inline {
    flex: 0 0 1.12rem;
    margin-top: 0.02rem;
    color: var(--app-color-warning);
}

/* Tablists are control layouts,
never inner content surfaces. Individual tab
 * buttons own their backgrounds,
borders,
shadows,
and selected states. */
.page-stack.ui-page-stack [role="tablist"],
.page-stack.ui-page-stack [role="tablist"]:is(:hover,
:focus-within),
.page-stack.ui-page-stack :is(.museum-tabs,
.ops-subsection-tabs),
.page-stack.ui-page-stack :is(.museum-tabs,
.ops-subsection-tabs):is(:hover,
:focus-within){
    border: 0;
    outline: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.page-stack.ui-page-stack [role="tablist"]::before,
.page-stack.ui-page-stack [role="tablist"]::after,
.page-stack.ui-page-stack :is(.museum-tabs,
.ops-subsection-tabs)::before,
.page-stack.ui-page-stack :is(.museum-tabs,
.ops-subsection-tabs)::after{
    content: none;
    display: none;
    border: 0;
    box-shadow: none;
}

/*
 * Application-wide white section and transparent-content typography contract.
 *
 * Every section provides one white structural surface. Ordinary copy, forms,
 * action rows, and card rails remain on transparent nested wrappers so no
 * second colored slab appears inside that section.
 * Cards, form controls, tables, alerts, badges, and selected controls retain
 * their own component-owned surfaces. Typography deliberately excludes those
 * components so section copy cannot restyle card or table anatomy.
 */
html body #mainContent .page-stack.ui-page-stack .app-main-section,
html body #mainContent .page-stack.ui-page-stack .app-main-section:is(:hover, :focus-within) {
    background: var(--app-surface-section);
    background-color: var(--app-surface-section);
    background-image: none;
}

html body #mainContent .page-stack.ui-page-stack .app-main-section :is(
    .app-inner-shell,
    .app-card-section-body,
    .ui-note-panel
):not(.app-standard-card *),
html body #mainContent .page-stack.ui-page-stack .app-main-section :is(
    .app-inner-shell,
    .app-card-section-body,
    .ui-note-panel
):not(.app-standard-card *):is(:hover, :focus-within) {
    background: transparent;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
}

html body #mainContent .page-stack.ui-page-stack .app-main-section :is(
    .ui-note-panel,
    form
):not(.app-standard-card *):not(.app-table-frame *) {
    color: var(--app-text-color-body);
    font-family: var(--app-font-family-base);
    font-size: var(--app-body-copy-size);
    font-weight: 450;
    line-height: var(--app-body-copy-line-height);
    letter-spacing: 0;
}

html body #mainContent .page-stack.ui-page-stack .app-main-section :is(
    h2,
    h3,
    h4,
    h5,
    h6
):not(.museum-card-legend):not(.museum-section-legend):not(.museum-search-card-legend):not(.app-page-intro *):not(.app-standard-card *):not(.app-table-frame *):not(.auth-login-gateway *):not(.news-article-block *) {
    color: var(--app-text-color-strong);
    font-family: var(--app-font-family-display);
    font-weight: var(--app-type-heading-weight);
    line-height: 1.25;
    letter-spacing: var(--app-type-heading-letter-spacing);
    text-transform: none;
}

html body #mainContent .page-stack.ui-page-stack .app-main-section h2:not(.museum-card-legend):not(.museum-section-legend):not(.museum-search-card-legend):not(.app-page-intro *):not(.app-standard-card *):not(.app-table-frame *):not(.auth-login-gateway *) {
    font-size: var(--app-section-title-size);
}

html body #mainContent .page-stack.ui-page-stack .app-main-section h3:not(.museum-card-legend):not(.museum-section-legend):not(.museum-search-card-legend):not(.app-page-intro *):not(.app-standard-card *):not(.app-table-frame *):not(.auth-login-gateway *) {
    font-size: var(--app-section-heading-size);
}

html body #mainContent .page-stack.ui-page-stack .app-main-section h4:not(.museum-card-legend):not(.museum-section-legend):not(.museum-search-card-legend):not(.app-page-intro *):not(.app-standard-card *):not(.app-table-frame *):not(.auth-login-gateway *) {
    font-size: var(--app-subsection-heading-size);
}

html body #mainContent .page-stack.ui-page-stack .app-main-section :is(h5, h6):not(.museum-card-legend):not(.museum-section-legend):not(.museum-search-card-legend):not(.app-page-intro *):not(.app-standard-card *):not(.app-table-frame *):not(.auth-login-gateway *) {
    font-size: var(--app-minor-heading-size);
}

html body #mainContent .page-stack.ui-page-stack .app-main-section :is(
    p,
    li,
    dd,
    dt
):not(:is(.museum-card-legend, .museum-section-legend, .museum-search-card-legend)):not(.app-page-intro *):not(.app-standard-card *):not(.app-table-frame *):not(.app-form-errors *):not(.errorlist *):not(.auth-login-gateway *):not(.news-article-header *) {
    color: var(--app-text-color-body);
    font-family: var(--app-font-family-base);
    font-size: var(--app-body-copy-size);
    font-weight: 450;
    line-height: var(--app-body-copy-line-height);
    letter-spacing: 0;
    text-transform: none;
}

html body #mainContent .page-stack.ui-page-stack .app-main-section :is(
    label,
    legend
):not(.app-standard-card *):not(.app-table-frame *):not(.auth-login-gateway *) {
    color: var(--app-text-color-strong);
    font-family: var(--app-font-family-base);
    font-size: var(--app-field-label-font-size);
    font-weight: var(--app-field-label-font-weight);
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
}

html body #mainContent .page-stack.ui-page-stack .app-main-section :is(
    .helptext,
    .help-text,
    [data-field-help],
    small
):not(.app-standard-card *):not(.app-table-frame *) {
    color: var(--app-text-color-muted);
    font-family: var(--app-font-family-base);
    font-size: 0.82rem;
    font-weight: 450;
    line-height: 1.45;
    letter-spacing: 0;
    text-transform: none;
}

/* Account editing is a field form,
not a framed data table. Preserve the
 * read-only table treatment,
but remove every perimeter and row rule while
 * fields are editable. */
html body #mainContent .page-stack.ui-page-stack.account-settings-page-stack
    .account-details-form.is-editing
    .account-details-table-shell,
html body #mainContent .page-stack.ui-page-stack.account-settings-page-stack
    .account-details-form.is-editing
    .account-details-table-shell:is(:hover,
:focus-within){
    padding: 0;
    border: 0;
    outline: 0;
    border-radius: 0;
    background: transparent;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    transition: none;
}

html body #mainContent .page-stack.ui-page-stack.account-settings-page-stack
    .account-details-form.is-editing
    .account-details-table :is(tr,
th,
td),
html body #mainContent .page-stack.ui-page-stack.account-settings-page-stack
    .account-details-form.is-editing
    .account-details-table :is(tr,
th,
td):is(:hover,
:focus,
:focus-within){
    border: 0;
    outline: 0;
    box-shadow: none;
}

/* Canonical application rhythm. Outer spacing is owned only by layout-stack
 * gap; child sections and transparent layout hosts must not add a second
 * margin or parent padding contribution. Internal section content uses a
 * separate,
smaller component rhythm. */
:root{
    --app-component-flow-gap: clamp(0.62rem, 1.25vw, 0.82rem);
    --app-component-flow-gap-mobile: clamp(0.56rem, 2.5vw, 0.72rem);
    /* One doubled outer rhythm owns shell-to-content, section-to-section, and
     * panel-stack spacing. Section legend clearance remains inside each
     * section and must not be added to, or doubled inside, the outer gap. */
    --app-section-flow-gap: clamp(2rem, 3.6vw, 2.7rem);
    --app-section-flow-gap-mobile: var(--app-section-flow-gap);
    --layout-shell-top-gap: var(--app-section-flow-gap);
    --app-page-section-gap: var(--app-section-flow-gap);
    --app-page-section-gap-mobile: var(--app-section-flow-gap-mobile);
    --app-panel-stack-gap-standard: var(--app-section-flow-gap);
    --app-panel-stack-gap-tight: var(--app-section-flow-gap);
    --app-legend-content-gap: var(--app-component-flow-gap);
    --app-legend-content-gap-mobile: var(--app-component-flow-gap-mobile);
}

html body #mainContent .page-stack.ui-page-stack,
html body #mainContent .page-stack.ui-page-stack :is(
    .ui-section-stack,
.dashboard-body-panel,
.museum-detail-panel,
.auth-body-panel,
.social-channel-feed-sections,
.social-channel-top-sections,
.museum-section-panels
){
    gap: var(--app-section-flow-gap);
}

html body #mainContent .page-stack.ui-page-stack > :is(
    .ui-section-stack,
.dashboard-body-panel,
.museum-detail-panel,
.auth-body-panel
){
    padding-top: 0;
}

html body #mainContent .page-stack.ui-page-stack :is(
    .ui-section-stack,
.dashboard-body-panel,
.museum-detail-panel,
.auth-body-panel,
.social-channel-feed-sections,
.social-channel-top-sections,
.museum-section-panels
) > :is(.app-main-section,
.ui-legend-card,
.social-channel-feed-panel){
    margin-block: 0;
}

html body #mainContent .page-stack.ui-page-stack > :is(
    .app-main-section,
.ui-legend-card,
.ui-section-stack,
.dashboard-body-panel,
.museum-detail-panel,
.auth-body-panel
){
    margin-block: 0;
}

html body #mainContent .page-stack.ui-page-stack .app-main-section{
    --app-legend-gap: var(--app-component-flow-gap);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--app-component-flow-gap);
    padding:
        calc(var(--app-surface-block-rhythm) + var(--app-legend-inner-clearance))
        var(--app-surface-inline-rhythm)
        var(--app-surface-block-rhythm);
}

html body #mainContent .page-stack.ui-page-stack .home-social-actions-section > .home-action-list.news-alert-bell-card{
    width: max-content;
    max-width: 100%;
    justify-self: start;
    margin-inline: 0;
}


/* In-page search uses one readable editorial measure and fills narrower
 * containers. Drawer search is outside #mainContent and remains shell-owned. */
html body #mainContent .page-stack.ui-page-stack .museum-local-search{
    width: min(100%, var(--app-inline-search-max-width, 42rem));
    max-width: 100%;
    margin-inline: 0 auto;
    justify-self: start;
}

@media (max-width: 760px){
    :root{
        --layout-shell-top-gap: var(--app-section-flow-gap-mobile);
    }

    html body #mainContent .page-stack.ui-page-stack,
html body #mainContent .page-stack.ui-page-stack :is(
        .ui-section-stack,
.dashboard-body-panel,
.museum-detail-panel,
.auth-body-panel,
.social-channel-feed-sections,
.social-channel-top-sections,
.museum-section-panels
    ){
        gap: var(--app-section-flow-gap-mobile);
    }

    html body #mainContent .page-stack.ui-page-stack .app-main-section{
        --app-legend-gap: var(--app-component-flow-gap-mobile);
        gap: var(--app-component-flow-gap-mobile);
        padding:
            calc(var(--app-surface-block-rhythm-mobile) + var(--app-legend-inner-clearance-mobile))
            var(--app-surface-inline-rhythm-mobile)
            var(--app-surface-block-rhythm-mobile);
    }
}

html body .page-stack.ui-page-stack > h1.sr-only {
    width: 1px;
    min-width: 1px;
    max-width: 1px;
    inline-size: 1px;
    min-inline-size: 1px;
    max-inline-size: 1px;
}

/* One prominent editorial separator, applied only to legends already present
 * in page markup. */
html body #mainContent .page-stack.ui-page-stack .museum-section-legend {
    position: static;
    inset: auto;
    z-index: auto;
    display: grid;
    grid-template-columns: 1.2rem minmax(0, 1fr);
    grid-template-rows: auto 2px;
    align-items: center;
    justify-content: flex-start;
    column-gap: clamp(0.75rem, 1.4vw, 1.15rem);
    row-gap: 12px;
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    margin: 0 0 max(0px, calc(1.5rem - var(--app-component-flow-gap)));
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--app-text-color-strong);
    box-shadow: none;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.1vw, 1.85rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.08;
    white-space: normal;
}

html body #mainContent .page-stack.ui-page-stack .museum-section-legend::before {
    content: none;
    display: none;
}

html body #mainContent .page-stack.ui-page-stack .museum-section-legend::after {
    content: "";
    display: block;
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
    width: 100%;
    height: 2px;
    border-radius: 0;
    background: var(--app-gradient-section-heading-rule);
    clip-path: polygon(0 0, 100% 50%, 100% 100%, 0 100%);
}

html body #mainContent .page-stack.ui-page-stack .museum-section-legend .ui-legend-icon {
    display: block;
    grid-column: 1;
    grid-row: 1;
    width: 1.2rem;
    height: 1.2rem;
    color: currentColor;
}

html body #mainContent .page-stack.ui-page-stack .museum-section-legend > span {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

@media (max-width: 760px) {
    html body #mainContent .page-stack.ui-page-stack .museum-section-legend {
        column-gap: 0.65rem;
        margin-block-end: max(0px, calc(1.5rem - var(--app-component-flow-gap-mobile)));
        font-size: 1.35rem;
    }
}

/*
 * Shared semantic table contract.
 *
 * Data tables retain native table layout at every viewport. Their immediate
 * frame owns horizontal overflow; rows and cells never become detached cards
 * or generate duplicate responsive labels. Presentation tables used by HTML
 * email are deliberately excluded.
 */

body :is(.content, .modal-card) :is(
    .app-table-frame,
    [data-table-frame],
    .account-details-table-shell,
    .newsroom-table-scroll,
    .ops-table-shell,
    .ops-email-delivery-frame,
    .ops-active-runs-table-frame,
    .ops-user-activity-table-frame,
    .ops-user-favorites-table-frame,
    .ops-user-detail-table-frame,
    .ops-report-table-scroll,
    .museum-action-report-table-shell
) {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
    scrollbar-gutter: auto;
    -webkit-overflow-scrolling: touch;
}

body :is(.content, .modal-card) table:not([role="presentation"]) {
    display: table;
    width: 100%;
    max-width: none;
}

body :is(.content, .modal-card) table:not([role="presentation"]) > colgroup {
    display: table-column-group;
}

body :is(.content, .modal-card) table:not([role="presentation"]) > thead {
    position: static;
    display: table-header-group;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

body :is(.content, .modal-card) table:not([role="presentation"]) > tbody {
    display: table-row-group;
    width: auto;
}

body :is(.content, .modal-card)
    table:not([role="presentation"]) > :is(thead, tbody) > tr[hidden],
body :is(.content, .modal-card)
    table:not([role="presentation"]) > :is(thead, tbody) > tr.museum-pagination-hidden {
    display: none;
}

body :is(.content, .modal-card)
    table:not([role="presentation"]) > :is(thead, tbody) > tr:not([hidden]):not(.museum-pagination-hidden) {
    display: table-row;
    width: auto;
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

/*
 * Count only ordinary visible data rows so hidden pagination rows and
 * structural expansion rows never disturb the alternating sequence. Nested
 * semantic tables establish their own sequence through the same rule.
 */
:where(body :is(.content, .modal-card) table:not([role="presentation"]) > tbody)
    > tr:nth-child(odd of :not(
        [hidden],
        .museum-pagination-hidden,
        .app-table-child-row,
        [data-table-child-row],
        .ops-action-nested-row,
        .ops-schedule-nested-row,
        .ops-report-nested-row,
        .ops-user-create-row,
        .ops-user-detail-row,
        .ops-table-empty-row,
        .app-content-state-table-row
    )) {
    background-color: var(--app-surface-table-row);
}

:where(body :is(.content, .modal-card) table:not([role="presentation"]) > tbody)
    > tr:nth-child(even of :not(
        [hidden],
        .museum-pagination-hidden,
        .app-table-child-row,
        [data-table-child-row],
        .ops-action-nested-row,
        .ops-schedule-nested-row,
        .ops-report-nested-row,
        .ops-user-create-row,
        .ops-user-detail-row,
        .ops-table-empty-row,
        .app-content-state-table-row
    )) {
    background-color: var(--app-surface-table-row-alt);
}

body :is(.content, .modal-card)
    table:not([role="presentation"]) > :is(thead, tbody) > tr > :is(th, td) {
    display: table-cell;
    width: auto;
    max-width: none;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

body :is(.content, .modal-card)
    table:not([role="presentation"]) > tbody > tr > td::before {
    display: none;
    content: none;
}

body :is(.content, .modal-card)
    table:not([role="presentation"]) > tbody > tr:is(
        .app-table-child-row,
        [data-table-child-row],
        .ops-action-nested-row,
        .ops-schedule-nested-row,
        .ops-report-nested-row,
        .ops-user-create-row,
        .ops-user-detail-row
    ):not([hidden]):not(.museum-pagination-hidden) {
    display: table-row;
}

body :is(.content, .modal-card)
    table:not([role="presentation"]) > tbody > tr:is(
        .app-table-child-row,
        [data-table-child-row],
        .ops-action-nested-row,
        .ops-schedule-nested-row,
        .ops-report-nested-row,
        .ops-user-create-row,
        .ops-user-detail-row
    ) > td[colspan] {
    display: table-cell;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding-inline: 0;
    overflow: visible;
}

body :is(.content, .modal-card) :is(
    .app-table-child-frame,
    [data-table-child-frame],
    .ops-nested-action-shell,
    .ops-nested-schedule-shell,
    .ops-report-table-shell
) {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-inline: 0;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
}

/* Shared sortable table headers keep sorting inside the semantic header cell.
   Server-rendered and client-rendered tables may use the same anatomy. */
body :is(.content, .modal-card)
    table:not([role="presentation"]) > thead > tr > th:has(> .app-table-sort-button) {
    padding: 0;
}

.app-table-sort-button {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1.35rem;
    align-items: center;
    column-gap: 0.58rem;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: var(--app-control-min-height);
    margin: 0;
    padding: var(--app-control-padding-y) var(--app-control-padding-x);
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    text-decoration: none;
    text-transform: inherit;
    cursor: pointer;
}

.app-table-sort-button:hover {
    background: var(--app-overlay-accent-subtle);
    color: inherit;
}

.app-table-sort-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -3px;
}

.app-table-sort-label {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

.app-table-sort-icons {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    min-width: 1.35rem;
    min-height: 1.55rem;
}

.app-table-sort-icon {
    display: grid;
    place-items: center;
    width: 1rem;
    height: 0.72rem;
    font-size: 0.9rem;
    font-weight: 900;
    line-height: 0.72rem;
    opacity: 0.42;
    transition: opacity 120ms ease;
}

th[aria-sort="ascending"] .app-table-sort-icon.is-ascending,
th[aria-sort="descending"] .app-table-sort-icon.is-descending {
    opacity: 1;
}

th[aria-sort="ascending"] .app-table-sort-icon.is-descending,
th[aria-sort="descending"] .app-table-sort-icon.is-ascending {
    opacity: 0.16;
}

@media (prefers-reduced-motion: reduce) {
    .app-table-sort-icon {
        transition: none;
    }
}

/* Public Calendar composes the shared editorial intro, legend-card section,
 * pagination, native table, content-state card, and token contracts. */

.page-stack.ui-page-stack .calendar-panel {
    padding-top: calc(
        var(--app-surface-padding)
        + var(--app-surface-legend-clearance)
        + var(--app-component-flow-gap)
    );
}

.page-stack.ui-page-stack .calendar-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--app-component-flow-gap);
    padding: var(--app-surface-padding-standard, 1rem);
    transition:
        opacity 160ms ease,
        transform 160ms ease;
}

.page-stack.ui-page-stack .calendar-shell.is-calendar-transitioning {
    opacity: 0.82;
    will-change: opacity, transform;
}

.page-stack.ui-page-stack .calendar-shell.is-calendar-transitioning-to-next {
    transform: translateX(-0.28rem);
}

.page-stack.ui-page-stack .calendar-shell.is-calendar-transitioning-to-previous {
    transform: translateX(0.28rem);
}

.page-stack.ui-page-stack .calendar-shell.is-calendar-entering-from-next {
    animation: calendar-month-enter-from-next 240ms ease-out;
}

.page-stack.ui-page-stack .calendar-shell.is-calendar-entering-from-previous {
    animation: calendar-month-enter-from-previous 240ms ease-out;
}

@keyframes calendar-month-enter-from-next {
    from {
        opacity: 0.72;
        transform: translateX(0.5rem);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes calendar-month-enter-from-previous {
    from {
        opacity: 0.72;
        transform: translateX(-0.5rem);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.page-stack.ui-page-stack .calendar-toolbar {
    display: grid;
    grid-template-columns: minmax(2.75rem, 1fr) minmax(0, auto) minmax(2.75rem, 1fr);
    align-items: center;
    gap: var(--app-control-gap);
    width: 100%;
}

.page-stack.ui-page-stack .calendar-toolbar .museum-exhibition-pagination-left {
    justify-self: start;
}

.page-stack.ui-page-stack .calendar-toolbar .museum-exhibition-pagination-right {
    justify-self: end;
}

.page-stack.ui-page-stack .calendar-month-title {
    min-width: 0;
    margin: 0;
    color: var(--app-color-primary-text);
    font-family: var(--app-font-family-display);
    font-size: clamp(1.15rem, 3vw, 1.55rem);
    font-weight: 750;
    line-height: 1.2;
    text-align: center;
    overflow-wrap: anywhere;
}

.page-stack.ui-page-stack .calendar-month-control {
    width: var(--app-control-min-height);
    min-width: var(--app-control-min-height);
    padding-inline: 0;
    background: var(--app-surface-card);
    color: var(--app-color-primary-action);
}

.page-stack.ui-page-stack .calendar-month-control:is(:hover, :focus-visible) {
    background: var(--app-interactive-hover-surface);
    color: var(--app-interactive-hover-text);
}

.page-stack.ui-page-stack .calendar-grid-frame {
    border-radius: var(--app-surface-radius-standard);
}

.page-stack.ui-page-stack .calendar-grid {
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: clamp(0.16rem, 0.7vw, 0.38rem);
    min-width: 0;
}

.page-stack.ui-page-stack .calendar-grid > thead > tr > th {
    padding: 0.38rem 0.12rem;
    border: 0;
    background: transparent;
    color: var(--app-text-color-muted);
    font-size: clamp(0.68rem, 2vw, 0.78rem);
    font-weight: 850;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
}

.page-stack.ui-page-stack .calendar-grid abbr {
    text-decoration: none;
}

.page-stack.ui-page-stack .calendar-grid > tbody > tr {
    background: transparent;
}

.page-stack.ui-page-stack .calendar-grid > tbody > tr > .calendar-day {
    height: clamp(3.1rem, 9vw, 5.4rem);
    padding: clamp(0.28rem, 1vw, 0.55rem);
    border: 1px solid var(--app-border-color-standard);
    border-radius: var(--app-field-radius);
    background: var(--app-surface-card);
    color: var(--app-color-primary-text);
    font-size: clamp(0.72rem, 2vw, 0.9rem);
    font-weight: 750;
    line-height: 1;
    text-align: start;
    vertical-align: top;
}

.page-stack.ui-page-stack .calendar-grid > tbody > tr > .calendar-day.is-outside-month {
    background: var(--app-color-muted-surface);
    color: var(--app-text-color-muted);
}

.page-stack.ui-page-stack .calendar-grid > tbody > tr > .calendar-day.is-today {
    border-color: var(--app-color-primary-action);
    background: var(--app-surface-card);
    color: var(--app-color-primary-action);
    box-shadow: var(--shadow-soft);
}

.page-stack.ui-page-stack .calendar-grid .calendar-day time {
    display: inline-grid;
    place-items: center;
    min-width: 1.6rem;
    min-height: 1.6rem;
    border-radius: 999px;
}

.page-stack.ui-page-stack .calendar-grid .calendar-day.is-today time {
    background: var(--app-color-primary-action);
    color: var(--app-color-on-primary-action);
}

@media (max-width: 480px) {
    .page-stack.ui-page-stack .calendar-shell {
        padding-inline: clamp(0.42rem, 2.5vw, 0.72rem);
    }

    .page-stack.ui-page-stack .calendar-grid > tbody > tr > .calendar-day {
        height: clamp(2.7rem, 14vw, 3.5rem);
        padding: 0.24rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-stack.ui-page-stack .calendar-shell {
        transition: none;
    }

    .page-stack.ui-page-stack .calendar-shell:is(
        .is-calendar-entering-from-next,
        .is-calendar-entering-from-previous
    ) {
        animation: none;
    }
}

/* Public body modernization.
 * This contract is deliberately scoped below #mainContent so the shared shell,
 * navigation, prompts, authentication, account, newsroom, and staff UI retain
 * their established owners and behavior.
 */

body.public-editorial-body,
body.public-editorial-body #mainContent {
    background: var(--app-color-page-background);
}

body.public-editorial-body #mainContent {
    --public-editorial-serif: "Fraunces", Georgia, "Times New Roman", serif;
    --public-editorial-ink: var(--app-color-primary-text);
    --public-editorial-muted: var(--app-color-secondary-text);
    --public-editorial-rule: var(--app-border-color-standard);
    --public-editorial-accent: var(--app-color-primary-action);
    --public-editorial-wash: color-mix(in srgb, var(--app-color-selected-surface) 45%, var(--app-color-page-background));
    --public-editorial-section-gap: var(--app-section-flow-gap);
    --public-editorial-grid-gap: clamp(1.25rem, 2vw, 1.5rem);
    color: var(--public-editorial-ink);
}

html body.public-editorial-body #mainContent .page-stack.ui-page-stack {
    width: min(100%, 68.75rem);
    max-width: 68.75rem;
    margin-inline: auto;
    gap: var(--public-editorial-section-gap);
}

body.public-editorial-body #mainContent .ui-section-stack,
body.public-editorial-body #mainContent .dashboard-body-panel {
    gap: var(--public-editorial-section-gap);
}

body.public-editorial-body #mainContent .app-main-section {
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Match the legacy high-specificity surface owners while remaining strictly
 * inside the public body boundary. */
html body.public-editorial-body #mainContent .page-stack.ui-page-stack .app-main-section:not(.app-page-intro-section):not(.page-head-newsletter-section) {
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Repeated-card geometry is global in cards-layout.css. */

body.public-editorial-body #mainContent .app-page-intro-section {
    display: grid;
    gap: var(--app-component-flow-gap);
    padding-block: 0;
    border-bottom: 1px solid var(--public-editorial-rule);
    background: var(--app-surface-theme-anchor);
}

html body.public-editorial-body #mainContent .page-stack.ui-page-stack :is(
    .app-page-intro-section,
    .page-head-newsletter-section
) {
    padding-block: 0;
}

body.public-editorial-body #mainContent .app-page-intro-layout,
body.public-editorial-body #mainContent .app-page-intro-layout-with-actions,
body.public-editorial-body #mainContent .app-page-intro-layout-with-support {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.1rem;
    padding: 0;
}

body.public-editorial-body #mainContent .app-page-intro {
    max-width: 64rem;
}

body.public-editorial-body #mainContent .app-page-intro h1,
body.public-editorial-body #mainContent .app-page-intro h2 {
    max-width: 18ch;
    margin: 0;
    color: var(--public-editorial-ink);
    font-family: var(--public-editorial-serif);
    font-size: clamp(2.65rem, 6.5vw, 5.9rem);
    font-variation-settings: "SOFT" 20, "WONK" 0;
    font-weight: 470;
    letter-spacing: -0.045em;
    line-height: 0.98;
    text-wrap: balance;
}

body.public-editorial-body #mainContent .app-page-intro-summary {
    max-width: 52rem;
    margin: 1.1rem 0 0;
    color: var(--public-editorial-muted);
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    font-weight: 400;
    line-height: 1.6;
}

body.public-editorial-body #mainContent .app-editorial-heading-rule {
    display: block;
    width: min(6rem, 22vw);
    height: 1px;
    margin-top: 1.25rem;
    background: var(--public-editorial-accent);
}

body.public-editorial-body #mainContent .app-page-intro-actions {
    justify-self: start;
    max-width: 46rem;
}

@media (min-width: 761px) {
    body.public-editorial-body #mainContent
    .social-channel-page-stack .app-page-intro-layout-with-actions {
        grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.9fr);
        align-items: start;
    }

    body.public-editorial-body #mainContent
    .social-channel-page-stack .app-page-intro-actions {
        justify-self: end;
    }
}

body.public-editorial-body #mainContent .app-page-intro-guidance,
body.public-editorial-body #mainContent .app-section-support-copy {
    color: var(--public-editorial-muted);
    font-weight: 400;
}

/* Section legends inherit the single global separator contract from
 * section-rhythm.css. Public pages own placement only, not a second skin. */

body.public-editorial-body #mainContent .app-card-section-body,
body.public-editorial-body #mainContent .app-latest-showcase {
    padding: 0;
}

html body.public-editorial-body #mainContent .page-stack.ui-page-stack .museum-directory-results {
    width: 100%;
    max-width: none;
}

html body.public-editorial-body #mainContent .page-stack.ui-page-stack :is(
    .app-card-rail:not(.app-latest-showcase-rail):not(.news-article-fact-grid):not(.news-article-gallery):not(.news-article-gallery-thumbnails),
    .home-exhibition-grid,
    .social-channel-grid,
    .museum-exhibition-grid,
    .museum-grid,
    .museum-result-grid,
    .app-landing-card-grid
):not([hidden]):not([data-mobile-carousel]) {
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--public-editorial-grid-gap);
    width: 100%;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
}


/* Card surfaces, copy, actions, and state controls use the global standard. */

body.public-editorial-body #mainContent .news-article-composite,
body.public-editorial-body #mainContent .news-article-shell,
body.public-editorial-body #mainContent .news-article-discovery,
body.public-editorial-body #mainContent .article-discovery-section {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.public-editorial-body #mainContent .news-article-primary-layout {
    display: block;
}

body.public-editorial-body #mainContent .news-article-header,
body.public-editorial-body #mainContent .news-article-content-column,
body.public-editorial-body #mainContent .news-article-engagement,
body.public-editorial-body #mainContent .news-article-discovery {
    width: min(100%, 52rem);
    margin-inline: auto;
}

body.public-editorial-body #mainContent .news-article-header h1 {
    color: var(--public-editorial-ink);
    font-family: var(--public-editorial-serif);
    font-size: clamp(2.7rem, 6vw, 5.5rem);
    font-variation-settings: "SOFT" 18, "WONK" 0;
    font-weight: 470;
    letter-spacing: -0.045em;
    line-height: 0.99;
    text-wrap: balance;
}

body.public-editorial-body #mainContent .news-article-excerpt {
    color: var(--public-editorial-muted);
    font-size: clamp(1.12rem, 2vw, 1.35rem);
    font-weight: 400;
    line-height: 1.55;
}

body.public-editorial-body #mainContent .news-article-body {
    color: var(--app-color-primary-text);
    font-family: var(--app-editorial-reading-font-family);
    font-size: var(--app-editorial-reading-size);
    font-weight: var(--app-editorial-reading-weight);
    line-height: var(--app-editorial-reading-line-height);
}

body.public-editorial-body #mainContent .news-article-body h2,
body.public-editorial-body #mainContent .news-article-body h3,
body.public-editorial-body #mainContent .news-article-engagement-title {
    color: var(--public-editorial-ink);
    font-family: var(--public-editorial-serif);
    font-weight: 520;
    letter-spacing: -0.025em;
}

body.public-editorial-body #mainContent .news-article-featured {
    width: min(100%, 70rem);
    margin-inline: 50%;
    transform: translateX(-50%);
}

body.public-editorial-body #mainContent .news-article-discovery {
    display: grid;
    gap: var(--public-editorial-section-gap);
    padding-top: var(--public-editorial-section-gap);
}

body.public-editorial-body #mainContent .museum-feature-card,
body.public-editorial-body #mainContent .museum-visit-card,
body.public-editorial-body #mainContent .help-center-card,
body.public-editorial-body #mainContent .ui-note-panel {
    border: 1px solid var(--app-card-border-premium);
    border-radius: var(--app-surface-radius-standard);
    background: var(--app-surface-card);
    box-shadow: var(--app-shadow-card-resting);
}

/* Trust, policy, discovery, and Contact pages are reading surfaces rather than
 * card collections. One intro divider and whitespace provide the hierarchy;
 * nested copy, feed groups, and the form do not paint additional frames. */
html body.public-editorial-body #mainContent .public-information-panel,
html body.public-editorial-body #mainContent .contact-form-panel,
html body.public-editorial-body #mainContent .contact-form {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

html body.public-editorial-body #mainContent .public-information-panel {
    width: 100%;
}

html body.public-editorial-body #mainContent .public-information-sections {
    width: min(100%, 52rem);
    gap: clamp(2rem, 4vw, 3.25rem);
}

html body.public-editorial-body #mainContent :is(
    .public-information-section,
    .public-information-link-group
) {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

html body.public-editorial-body #mainContent :is(
    .public-information-section,
    .public-information-link-group
) h2 {
    color: var(--public-editorial-ink);
    font-family: var(--public-editorial-serif);
    font-size: clamp(1.45rem, 2.5vw, 2rem);
    font-variation-settings: "SOFT" 18, "WONK" 0;
    font-weight: 520;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

html body.public-editorial-body #mainContent :is(
    .public-information-section,
    .public-information-link-group
) :is(p, li) {
    font-weight: 400;
    line-height: 1.72;
}

html body.public-editorial-body #mainContent .public-information-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1rem;
    align-items: center;
}

html body.public-editorial-body #mainContent .public-information-action-link {
    width: fit-content;
}

html body.public-information-contact #mainContent .contact-form {
    width: min(100%, 48rem);
    margin: 0;
    padding: 0;
}

body.public-editorial-body #mainContent .newsletter-compact,
body.public-editorial-body #mainContent .newsletter-section,
body.public-editorial-body #mainContent .page-head-newsletter-section,
body.public-editorial-body #mainContent [data-newsletter-section] {
    border: 1px solid var(--app-card-border-premium);
    border-radius: 0.75rem;
    background: var(--app-surface-theme-anchor);
    box-shadow: var(--app-shadow-card-resting);
}

@media (max-width: 1199px) {
    html body.public-editorial-body #mainContent .page-stack.ui-page-stack :is(
        .app-card-rail:not(.app-latest-showcase-rail):not(.news-article-fact-grid):not(.news-article-gallery):not(.news-article-gallery-thumbnails),
        .home-exhibition-grid,
        .social-channel-grid,
        .museum-exhibition-grid,
        .museum-grid,
        .museum-result-grid,
        .app-landing-card-grid
    ) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 759px) {
    body.public-editorial-body #mainContent {
        --public-editorial-section-gap: var(--app-section-flow-gap-mobile);
        --public-editorial-grid-gap: 1.5rem;
    }

    body.public-editorial-body #mainContent .app-page-intro h1,
    body.public-editorial-body #mainContent .app-page-intro h2 {
        font-size: clamp(2.45rem, 12vw, 4.1rem);
    }

    html body.public-editorial-body #mainContent .page-stack.ui-page-stack :is(
        .app-card-rail:not(.app-latest-showcase-rail):not(.news-article-fact-grid):not(.news-article-gallery):not(.news-article-gallery-thumbnails),
        .home-exhibition-grid,
        .social-channel-grid,
        .museum-exhibition-grid,
        .museum-grid,
        .museum-result-grid,
        .app-landing-card-grid,
        .app-latest-showcase-rail,
        .news-latest-showcase-rail,
        .social-channel-latest-rail
    ):not([hidden]):not([data-mobile-carousel]) {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        max-width: none;
        justify-content: stretch;
        justify-items: stretch;
    }

    body.public-editorial-body #mainContent .news-article-featured {
        width: 100%;
        margin-inline: 0;
        transform: none;
    }
}

body.public-editorial-body #mainContent .home-feed-section,
body.public-editorial-body #mainContent .news-page-stack .home-feed-section,
body.public-editorial-body #mainContent .social-channel-body > .app-main-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

body.public-editorial-body #mainContent .home-feed-section > .museum-section-legend,
body.public-editorial-body #mainContent .news-page-stack .home-feed-section > .museum-section-legend,
body.public-editorial-body #mainContent .social-channel-body > .app-main-section > .museum-section-legend {
    grid-column: 1 / -1;
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

body.public-editorial-body #mainContent .home-feed-section > :is(.app-public-action-bar, .social-channel-home-actions, .app-page-section-actions-stack),
body.public-editorial-body #mainContent .news-page-stack .home-feed-section > :is(.app-public-action-bar, .app-page-section-actions-stack),
body.public-editorial-body #mainContent .social-channel-body > .app-main-section > :is(.app-public-action-bar, .app-page-section-actions-stack) {
    grid-column: 1 / -1;
    align-self: start;
    margin: 0 0 clamp(1.4rem, 2.8vw, 2.25rem);
    padding: 0;
}

body.public-editorial-body #mainContent .home-feed-section > :is(.app-card-section-body, .app-latest-showcase, .content-state-card),
body.public-editorial-body #mainContent .news-page-stack .home-feed-section > :is(.app-card-section-body, .app-latest-showcase, .museum-local-search, .news-story-results),
body.public-editorial-body #mainContent .social-channel-body > .app-main-section > :is(.app-card-section-body, .app-latest-showcase, .museum-local-search, .social-channel-post-results) {
    grid-column: 1 / -1;
}

@media (min-width: 761px) {
    html body.public-editorial-body #mainContent .app-card-rail[data-mobile-carousel]:not([hidden]):not(.news-article-fact-grid):not(.news-article-gallery):not(.news-article-gallery-thumbnails) {
        display: grid;
        grid-auto-flow: row;
        grid-auto-columns: auto;
        width: 100%;
        padding: 0;
        overflow: visible;
        scroll-snap-type: none;
    }

    /* At desktop and tablet widths public collection rails intentionally
     * switch from the initialized carousel flex contract to the editorial
     * grid. Reset the carousel item basis at that same boundary so each card
     * fills one complete grid track instead of retaining a fraction of it. */
    html body.public-editorial-body #mainContent
    .app-card-rail[data-mobile-carousel]:not(.news-article-fact-grid):not(.news-article-gallery):not(.news-article-gallery-thumbnails)
    > :not([hidden]):not(.museum-pagination-hidden):not(.carousel-side-controls) {
        box-sizing: border-box;
        width: 100%;
        inline-size: 100%;
        min-width: 0;
        min-inline-size: 0;
        max-width: 100%;
        max-inline-size: 100%;
    }

    body.public-editorial-body #mainContent .mobile-carousel-buttons:not(.news-article-fact-header .mobile-carousel-buttons):not(.news-article-gallery-shell .mobile-carousel-buttons) {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.public-editorial-body #mainContent *,
    body.public-editorial-body #mainContent *::before,
    body.public-editorial-body #mainContent *::after {
        scroll-behavior: auto;
        transition-duration: 0.01ms;
    }
}

/* Keep the shared editorial statement expansive without overwhelming desktop. */
@media (min-width: 760px) {
    body.public-editorial-body #mainContent .app-page-intro h1,
    body.public-editorial-body #mainContent .app-page-intro h2 {
        font-size: clamp(2.65rem, 5vw, 4.9rem);
    }
}

/*
 * Help Center composition only.
 *
 * Card surfaces, media, copy, controls, rail geometry, and responsive
 * carousel behavior belong to the shared card and carousel owners.
 */

.help-center-page-stack .help-center-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
}

.help-center-page-stack .help-center-panel > * {
    grid-column: 1;
    min-width: 0;
}

.help-center-page-stack .help-center-search {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(18rem, 1.22fr);
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: center;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: clamp(1.2rem, 3vw, 2rem);
}

.help-center-page-stack .help-center-search[hidden] {
    display: none;
}

.help-center-page-stack .help-center-search-copy {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
}

.help-center-page-stack .help-center-search-copy :is(h2, p),
.help-center-page-stack .help-center-search-status {
    margin: 0;
}

.help-center-page-stack .help-center-search-kicker,
.help-center-page-stack .help-center-directory-kicker,
.help-center-page-stack .help-center-section-index,
.help-center-page-stack .help-center-section-count {
    color: var(--app-text-color-strong);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.3;
    text-transform: uppercase;
}

.help-center-page-stack .help-center-search-copy h2 {
    color: var(--app-text-color-heading);
    font-family: var(--app-font-family-editorial);
    font-size: clamp(1.45rem, 2.3vw, 2.15rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.08;
}

.help-center-page-stack .help-center-search-copy p:not(.help-center-search-kicker),
.help-center-page-stack .help-center-search-status {
    font-size: 1rem;
    line-height: 1.55;
}

.help-center-page-stack .help-center-search-status:empty {
    display: none;
}

.help-center-page-stack .help-center-search-status {
    grid-column: 2;
}

.help-center-page-stack .help-center-search-input-shell {
    width: 100%;
    min-width: 0;
}

.help-center-page-stack .help-center-directory {
    display: grid;
    grid-template-columns: minmax(12rem, 0.65fr) minmax(0, 2.35fr);
    gap: clamp(1rem, 2.5vw, 2rem);
    align-items: stretch;
    width: 100%;
    min-width: 0;
    padding-block: clamp(1rem, 2vw, 1.4rem);
    border-block: 1px solid var(--app-card-border-premium);
}

.help-center-page-stack .help-center-directory-heading {
    display: grid;
    align-content: center;
    gap: 0.3rem;
}

.help-center-page-stack .help-center-directory-heading :is(h2, p) {
    margin: 0;
}

.help-center-page-stack .help-center-directory-heading h2 {
    color: var(--app-text-color-heading);
    font-family: var(--app-font-family-editorial);
    font-size: clamp(1.2rem, 1.8vw, 1.55rem);
    line-height: 1.15;
}

.help-center-page-stack .help-center-directory-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
}

.help-center-page-stack .help-center-directory-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    min-height: 4.4rem;
    padding: 0.8rem 1rem;
    border-left: 1px solid var(--app-card-border-premium);
    color: var(--app-text-color-strong);
    text-decoration: none;
    transition:
        background-color var(--app-motion-duration-fast) ease,
        transform var(--app-motion-duration-ui) var(--app-motion-ease-emphasis);
}

.help-center-page-stack .help-center-directory-link:is(:hover, :focus-visible) {
    background: var(--app-interactive-hover-surface);
    color: var(--app-interactive-hover-text);
    transform: translateY(-2px);
}

.help-center-page-stack .help-center-directory-number {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.help-center-page-stack .help-center-directory-copy {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.help-center-page-stack .help-center-directory-copy strong {
    font-size: 0.94rem;
    line-height: 1.2;
}

.help-center-page-stack .help-center-directory-copy small {
    color: var(--app-text-color-muted);
    font-size: 0.74rem;
    line-height: 1.3;
}

.help-center-page-stack .help-center-directory-link svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    transform: rotate(90deg);
}

.help-center-page-stack .help-topic-no-results-grid {
    width: 100%;
    min-width: 0;
}

.help-center-page-stack .help-topic-no-results-grid[hidden] {
    display: none;
}

.help-center-page-stack .help-center-grid {
    align-items: start;
}

.help-center-page-stack .help-topic-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--app-gradient-card-media-scrim);
    pointer-events: none;
}

.help-center-page-stack .help-topic-media-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.help-center-page-stack .help-center-intro {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.45rem 1rem;
    align-items: baseline;
    width: 100%;
    min-width: 0;
    margin: 0;
}

.help-center-page-stack .help-center-intro h2,
.help-center-page-stack .help-center-intro p {
    margin: 0;
}

.help-center-page-stack .help-center-intro p {
    max-width: 62ch;
}

.help-center-page-stack .help-center-intro h2 {
    color: var(--app-text-color-heading);
    font-family: var(--app-font-family-editorial);
    font-size: clamp(1.65rem, 2.8vw, 2.4rem);
    letter-spacing: -0.03em;
    line-height: 1.08;
}

.help-center-page-stack .help-center-intro > :nth-child(3) {
    grid-column: 2;
}

.help-center-page-stack .help-center-section-count {
    grid-column: 3;
    grid-row: 1;
    white-space: nowrap;
}

.help-center-page-stack .help-center-panel {
    scroll-margin-top: calc(var(--app-shell-header-height, 5rem) + 1rem);
}

html body #mainContent .page-stack.ui-page-stack.help-center-page-stack .app-card-rail > .help-topic-card.app-standard-card :is(
    .app-card-title,
    .help-topic-summary,
    .help-topic-markdown,
    .help-topic-markdown p,
    .help-topic-markdown li
) {
    font-size: 1rem;
    line-height: 1.55;
}

html body #mainContent .page-stack.ui-page-stack.help-center-page-stack .app-card-rail > .help-topic-card.app-standard-card .app-card-title {
    font-family: var(--app-font-family-base);
    font-weight: 700;
}

html body #mainContent .page-stack.ui-page-stack.help-center-page-stack .app-card-rail > .help-topic-card.app-standard-card .help-topic-summary {
    margin: 0;
    font-size: var(--app-card-description-text-size);
    line-height: var(--app-card-description-line-height);
}

html body #mainContent .page-stack.ui-page-stack.help-center-page-stack .app-card-rail > .help-topic-card.app-standard-card > .help-topic-details {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    gap: var(--app-component-flow-gap);
    align-items: start;
    width: 100%;
    height: auto;
    min-height: 2.9rem;
    margin: auto 2px 0;
    pointer-events: auto;
}

html body #mainContent .page-stack.ui-page-stack.help-center-page-stack .app-card-rail > .help-topic-card.app-standard-card > .help-topic-details[open] {
    position: relative;
    z-index: 2;
    grid-row: 2 / 4;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 0;
    align-items: stretch;
    height: 100%;
    block-size: 100%;
    min-height: 0;
    min-block-size: 0;
    max-height: 100%;
    max-block-size: 100%;
    margin: 0;
    padding: 0;
    background: var(--app-surface-card);
    overflow: hidden;
}

html body #mainContent .page-stack.ui-page-stack.help-center-page-stack .app-card-rail > .help-topic-card.app-standard-card > .help-topic-details > summary.app-card-action-link {
    position: static;
    inset: auto;
    order: 2;
    justify-self: end;
    width: max-content;
    max-width: 100%;
    min-width: 0;
    list-style: none;
    pointer-events: auto;
}

html body #mainContent .page-stack.ui-page-stack.help-center-page-stack .app-card-rail > .help-topic-card.app-standard-card > .help-topic-details[open] > summary.app-card-action-link {
    grid-row: 2;
    align-self: center;
    margin: 0.45rem 0.55rem;
}

html body #mainContent .help-center-page-stack .help-topic-details > summary::-webkit-details-marker {
    display: none;
}

.help-center-page-stack .help-topic-markdown {
    order: 1;
    display: grid;
    gap: 0.65rem;
    width: 100%;
    min-width: 0;
    color: var(--app-text-color-body);
}

.help-center-page-stack .help-topic-details[open] .help-topic-markdown {
    grid-row: 1;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    padding: 1rem 1rem 0.65rem;
    overflow-x: hidden;
    overflow-y: scroll;
    overscroll-behavior-y: auto;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--app-scrollbar-thumb) var(--app-scrollbar-track);
}

.help-center-page-stack .help-topic-details[open] .help-topic-markdown::-webkit-scrollbar {
    width: var(--app-scrollbar-size);
}

.help-center-page-stack .help-topic-details[open] .help-topic-markdown::-webkit-scrollbar-track {
    border: 1px solid var(--app-scrollbar-track-border);
    border-radius: 999px;
    background: var(--app-scrollbar-track);
}

.help-center-page-stack .help-topic-details[open] .help-topic-markdown::-webkit-scrollbar-thumb {
    border: 2px solid var(--app-scrollbar-track);
    border-radius: 999px;
    background: var(--app-scrollbar-thumb);
}

.help-center-page-stack .help-topic-markdown :is(p, ul, ol) {
    margin: 0;
}

.help-center-page-stack .help-topic-markdown :is(ul, ol) {
    display: grid;
    gap: 0.38rem;
    padding-inline-start: 1.35rem;
}

.help-center-page-stack .help-topic-markdown strong {
    color: var(--app-text-color-strong);
    font-size: inherit;
    font-weight: 700;
}

.help-center-page-stack .help-topic-markdown em {
    font-size: inherit;
    font-style: italic;
}

.help-center-page-stack .help-topic-less-label,
.help-center-page-stack .help-topic-details[open] .help-topic-more-label {
    display: none;
}

.help-center-page-stack .help-topic-details[open] .help-topic-less-label {
    display: inline;
}

.help-center-page-stack .help-topic-details[open] .app-card-action-icon {
    transform: rotate(180deg);
}

.help-center-page-stack .help-topic-load-more-row {
    margin-top: var(--app-section-flow-gap);
}

@media (max-width: 759px) {
    .help-center-page-stack .help-center-search,
    .help-center-page-stack .help-center-directory {
        grid-template-columns: minmax(0, 1fr);
    }

    .help-center-page-stack .help-center-directory-links {
        grid-template-columns: minmax(0, 1fr);
    }

    .help-center-page-stack .help-center-directory-link {
        border-top: 1px solid var(--app-card-border-premium);
        border-left: 0;
    }

    .help-center-page-stack .help-center-intro {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .help-center-page-stack .help-center-section-count {
        grid-column: 2;
        grid-row: auto;
    }

    .help-center-page-stack .help-center-search-status {
        grid-column: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .help-center-page-stack .help-center-directory-link {
        transition-duration: 0.01ms;
        transform: none;
    }
}

/*
 * Shared editorial presentation for application workspaces.
 *
 * Header, footer, drawers, forms, tables, cards, and workspace behavior retain
 * their existing owners. This layer modernizes only the page canvas, visible
 * intro hierarchy, top-level workspace section, and landing choices.
 */

body.editorial-workspace-body,
body.editorial-workspace-body #mainContent {
    background: var(--app-color-page-background);
}

body.editorial-workspace-body #mainContent {
    --workspace-editorial-serif: "Fraunces", Georgia, "Times New Roman", serif;
    --workspace-editorial-ink: var(--app-color-primary-text);
    --workspace-editorial-muted: var(--app-color-secondary-text);
    --workspace-editorial-rule: var(--app-border-color-standard);
    --workspace-editorial-accent: var(--app-color-primary-action);
    --workspace-editorial-section-gap: var(--app-section-flow-gap);
    color: var(--workspace-editorial-ink);
}

html body.editorial-workspace-body #mainContent .page-stack.ui-page-stack {
    width: min(100%, 68.75rem);
    max-width: 68.75rem;
    margin-inline: auto;
    gap: var(--workspace-editorial-section-gap);
}

body.editorial-workspace-body #mainContent .app-page-intro-section {
    display: grid;
    gap: 1rem;
    padding: clamp(1rem, 3vw, 2.5rem) 0 clamp(1.75rem, 4vw, 3.5rem);
    overflow: visible;
    border: 0;
    border-bottom: 1px solid var(--workspace-editorial-rule);
    border-radius: 0;
    background: var(--app-surface-theme-anchor);
    box-shadow: none;
}

body.editorial-workspace-body #mainContent :is(
    .app-page-intro-layout,
    .app-page-intro-layout-with-actions,
    .app-page-intro-layout-with-support
) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.1rem;
    padding: 0;
}

body.editorial-workspace-body #mainContent .app-page-intro {
    max-width: 64rem;
}

body.editorial-workspace-body #mainContent .app-page-intro h1 {
    max-width: 18ch;
    margin: 0;
    color: var(--workspace-editorial-ink);
    font-family: var(--workspace-editorial-serif);
    font-size: clamp(2.65rem, 6.5vw, 5.9rem);
    font-variation-settings: "SOFT" 20, "WONK" 0;
    font-weight: 470;
    letter-spacing: -0.045em;
    line-height: 0.98;
    text-wrap: balance;
}

body.editorial-workspace-body #mainContent .app-page-intro-summary {
    max-width: 52rem;
    margin: 1.1rem 0 0;
    color: var(--workspace-editorial-muted);
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    font-weight: 400;
    line-height: 1.6;
}

body.editorial-workspace-body #mainContent .app-editorial-heading-rule {
    display: block;
    width: min(6rem, 22vw);
    height: 1px;
    margin-top: 1.25rem;
    background: var(--workspace-editorial-accent);
}

html body.editorial-workspace-body #mainContent :is(
    .contact-form-panel,
    .account-section-menu-card,
    .ops-section-menu-card
) {
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

html body.editorial-workspace-body #mainContent :is(
    .contact-form-panel
) > .museum-section-legend {
    position: static;
    display: block;
    width: 100%;
    min-height: 0;
    margin: 0 0 clamp(1rem, 2vw, 1.5rem);
    padding: 0 0 0.7rem;
    border: 0;
    border-bottom: 1px solid var(--workspace-editorial-rule);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--workspace-editorial-ink);
    font-family: var(--app-font-family-base);
    font-size: 1.1875rem;
    font-weight: 600;
    letter-spacing: 0.0125rem;
    line-height: 1.2632;
    text-transform: uppercase;
}

html body.editorial-workspace-body #mainContent :is(
    .contact-form-panel
) > .museum-section-legend .ui-legend-icon {
    display: none;
}

body.editorial-workspace-body #mainContent .app-workspace-breadcrumb:not([hidden]) {
    padding-bottom: 0;
    border-bottom: 0;
    color: var(--workspace-editorial-muted);
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Account and Staff sections use the application-wide Home legend and its
 * single tapered stroke. Workspace intro/legend hairlines must not duplicate
 * that shared separator. */
body:is(.editorial-workspace-account, .editorial-workspace-staff)
    #mainContent .app-page-intro-section {
    border-bottom: 0;
}

html body.editorial-workspace-staff #mainContent
.ops-section-menu-card > .museum-section-legend {
    border-bottom: 0;
}

html body.editorial-workspace-body #mainContent .app-workspace-menu-grid:not([hidden]) {
    gap: clamp(0.7rem, 1.5vw, 1rem);
}

/* Workspace action tiles use workspace-navigation.css without a page-local card skin. */

html body.editorial-workspace-account #mainContent
    [data-account-favorites-panel="account-information"] {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

body.editorial-workspace-account #mainContent .account-favorites-panel-stack .app-card-section-body {
    border-color: var(--workspace-editorial-rule);
    background: var(--app-surface-section);
    box-shadow: none;
}

@media (max-width: 759px) {
    body.editorial-workspace-body #mainContent {
        --workspace-editorial-section-gap: var(--app-section-flow-gap-mobile);
    }

    body.editorial-workspace-body #mainContent .app-page-intro h1 {
        font-size: clamp(2.45rem, 12vw, 4.1rem);
    }

    html body.editorial-workspace-body #mainContent :is(
        .contact-form-panel,
        .ops-section-menu-card
    ) > .museum-section-legend {
        font-size: 1rem;
        line-height: 1.25;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.editorial-workspace-body #mainContent *,
    body.editorial-workspace-body #mainContent *::before,
    body.editorial-workspace-body #mainContent *::after {
        scroll-behavior: auto;
        transition-duration: 0.01ms;
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
    }
}

/*
 * Shared motion enhancement.
 *
 * Required content is never hidden in CSS. GSAP applies and clears entrance
 * states only after JavaScript is available. This owner is limited to
 * transition grammar and pointer/focus micro-interactions.
 */

.motion-capable [data-motion-intro="true"],
.motion-capable [data-motion-heading="true"],
.motion-capable [data-motion-card="true"],
.motion-capable [data-motion-article-header="true"],
.motion-capable [data-motion-article-heading="true"],
.motion-capable [data-motion-media="true"],
.motion-capable [data-motion-collection="true"],
.motion-capable [data-motion-accent="true"],
.motion-capable [data-motion-footer="true"] {
    will-change: auto;
}

/* One motion-only interaction contract for every enabled link, button,
 * disclosure, and button-role control across the complete application shell.
 * Component owners retain their own surfaces, borders, shadows, and contrast. */
html body :is(.header, #mainContent, .footer, .sidebar, dialog, [role="dialog"], [aria-modal="true"]) :is(
    a[href],
    button,
    [role="button"],
    summary
):not(
    :disabled,
    [aria-disabled="true"],
    .is-disabled,
    .is-action-celebrating
) {
    transform-origin: center;
    transition:
        color var(--app-motion-duration-fast) ease,
        background-color var(--app-motion-duration-fast) ease,
        border-color var(--app-motion-duration-fast) ease,
        box-shadow var(--app-motion-duration-fast) ease,
        scale var(--app-motion-duration-fast) var(--app-motion-ease-standard);
}

/* Use the independent scale longhand so positioned controls keep any
 * component-owned translate/transform used to anchor their layout. */
@media (hover: hover) and (pointer: fine) {
    html body :is(.header, #mainContent, .footer, .sidebar, dialog, [role="dialog"], [aria-modal="true"]) :is(
        a[href],
        button,
        [role="button"],
        summary
    ):not(
        :disabled,
        [aria-disabled="true"],
        .is-disabled,
        .is-action-celebrating,
        .social-channel-connect-link,
        .header-brand,
        .museum-exhibition-title,
        .museum-card-title-link,
        .app-card-title,
        .app-card-title-link,
        .app-card-title-button,
        .app-card-context-link,
        .app-card-action-link,
        .newsroom-media-card-title,
        .site-search-result-title
    ):hover {
        scale: 1.04;
        text-decoration-line: none;
    }

    html body #mainContent .page-stack.ui-page-stack :is(
        .app-card-rail,
        .app-landing-card-grid
    ) > .app-standard-card :is(.app-card-media img, [data-card-image]) {
        transition:
            transform var(--app-motion-duration-image) var(--app-motion-ease-emphasis),
            filter var(--app-motion-duration-image) var(--app-motion-ease-standard);
        transform-origin: center;
    }

    html body #mainContent .page-stack.ui-page-stack :is(
        .app-card-rail,
        .app-landing-card-grid
    ) > .app-standard-card {
        transition:
            transform var(--app-motion-duration-ui) var(--app-motion-ease-emphasis),
            border-color var(--app-motion-duration-ui) ease;
        transform-origin: center bottom;
    }

    html body #mainContent .page-stack.ui-page-stack :is(
        .app-card-rail,
        .app-landing-card-grid
    ) > .app-standard-card:has(:is(a, button, summary, input, select, textarea, [tabindex])):is(:hover, :has(:focus-visible)) :is(.app-card-media img, [data-card-image]) {
        transform: scale(1.045);
        filter: saturate(1.035) contrast(1.02);
    }

    html body #mainContent .page-stack.ui-page-stack :is(
        .app-card-rail,
        .app-landing-card-grid
    ) > .app-standard-card:has(:is(a, button, summary, input, select, textarea, [tabindex])):is(:hover, :has(:focus-visible)) {
        border-color: transparent;
        transform: none;
    }
}

/* Card-control transforms remain component-owned; the shared scale longhand
 * now supplies the same interaction response used everywhere else. */
html body #mainContent .page-stack.ui-page-stack .app-card-control-band :is(
    a[href],
    button,
    [role="button"]
) {
    transform: none;
}

html body a[href]:is(:hover, :focus-visible),
html body button:is(:hover, :focus-visible),
html body [role="button"]:is(:hover, :focus-visible),
html body summary:is(:hover, :focus-visible) {
    text-decoration-line: none;
}

html body :is(.header, #mainContent, .footer, .sidebar, dialog, [role="dialog"], [aria-modal="true"]) :is(
    a[href],
    button,
    [role="button"],
    summary
):not(
    :disabled,
    [aria-disabled="true"],
    .is-disabled,
    .is-action-celebrating,
    .social-channel-connect-link,
    .header-brand,
    .museum-exhibition-title,
    .museum-card-title-link,
    .app-card-title,
    .app-card-title-link,
    .app-card-title-button,
    .app-card-context-link,
    .app-card-action-link,
    .newsroom-media-card-title,
    .site-search-result-title
):focus-visible {
    scale: 1.04;
}

html body :is(.header, #mainContent, .footer, .sidebar, dialog, [role="dialog"], [aria-modal="true"]) :is(
    a[href],
    button,
    [role="button"],
    summary
):not(
    :disabled,
    [aria-disabled="true"],
    .is-disabled,
    .is-action-celebrating,
    .social-channel-connect-link,
    .header-brand,
    .museum-exhibition-title,
    .museum-card-title-link,
    .app-card-title,
    .app-card-title-link,
    .app-card-title-button,
    .app-card-context-link,
    .app-card-action-link,
    .newsroom-media-card-title,
    .site-search-result-title
):active {
    scale: 0.975;
}

/* Card copy is overflow-constrained for clamping and disclosure. Keep these
 * text controls at rest so the universal interaction scale cannot crop glyphs. */
html body #mainContent :is(
    .app-standard-card :is(
        .museum-exhibition-title,
        .museum-title,
        .museum-card-title,
        .museum-card-title-link,
        .app-card-title,
        .app-card-title-link,
        .app-card-title-button,
        .app-card-context-link,
        .app-card-action-link,
        .newsroom-media-card-title
    ),
    .site-search-result-card .site-search-result-title
):is(:hover, :focus-visible, :active) {
    scale: 1;
    transform: none;
}

/* Linked card titles use a smaller version of the shell-navigation scale.
 * Existing inline glyph safety contains the 1% visual growth without changing
 * font metrics, wrapping, line-clamp geometry, or the title's layout box. */
html body #mainContent :is(
    .app-standard-card :is(
        .museum-exhibition-title:not(.museum-exhibition-title-static),
        .museum-title:is(a, button, [role=button]),
        .museum-card-title-link,
        .app-card-title:is(a, button, [role=button]),
        .app-card-title-link,
        .app-card-title-button,
        .newsroom-media-card-title
    ),
    .site-search-result-card .site-search-result-title
) {
    background-color: transparent;
    box-shadow: none;
    scale: 1;
    transform-origin: center;
    text-decoration-line: none;
    transition: scale var(--app-motion-duration-fast) var(--app-motion-ease-standard);
}

html body #mainContent :is(
    .app-standard-card :is(
        .museum-exhibition-title:not(.museum-exhibition-title-static),
        .museum-title:is(a, button, [role=button]),
        .museum-card-title-link,
        .app-card-title:is(a, button, [role=button]),
        .app-card-title-link,
        .app-card-title-button,
        .newsroom-media-card-title
    ),
    .site-search-result-card .site-search-result-title
):is(:hover, :focus-visible) {
    background-color: transparent;
    box-shadow: none;
    scale: 1.01;
    text-decoration-line: none;
}

html body #mainContent :is(
    .app-standard-card :is(
        .museum-exhibition-title:not(.museum-exhibition-title-static),
        .museum-title:is(a, button, [role=button]),
        .museum-card-title-link,
        .app-card-title:is(a, button, [role=button]),
        .app-card-title-link,
        .app-card-title-button,
        .newsroom-media-card-title
    ),
    .site-search-result-card .site-search-result-title
):active {
    scale: 1;
}

.app-main-section :is(
    .btn,
    .app-forward-action,
    .app-text-link,
    .app-card-action-link,
    .app-public-state-action
) {
    transform-origin: center;
    transition:
        color var(--app-motion-duration-fast) ease,
        background-color var(--app-motion-duration-fast) ease,
        transform var(--app-motion-duration-ui) var(--app-motion-ease-emphasis);
}

:is(.btn, .btn-primary, .btn-outline, .btn-danger, .btn-quiet, .btn-icon) {
    transform-origin: center;
    transition:
        color var(--app-motion-duration-fast) ease,
        background-color var(--app-motion-duration-fast) ease,
        box-shadow var(--app-motion-duration-fast) ease,
        transform var(--app-motion-duration-ui) var(--app-motion-ease-emphasis);
}

.app-main-section .app-forward-action svg,
.app-main-section .app-card-action-link svg,
.app-main-section .app-text-link svg {
    transition: transform var(--app-motion-duration-ui) var(--app-motion-ease-standard);
}

/* Platform-grade action confirmation: only the icon moves, so control geometry,
 * focus position, copy, and surrounding layout remain stable. */
:is(
    [data-favorite-toggle],
    [data-museum-alert-toggle],
    [data-youtube-updates-toggle],
    [data-instagram-updates-toggle],
    [data-news-updates-toggle],
    [data-share-trigger]
) :is(
    .favorite-toggle-icon,
    .museum-alert-toggle-icon,
    .app-share-trigger-icon
) {
    position: relative;
    color: inherit;
    transform-origin: center;
}

[data-share-trigger] .app-share-trigger-icon::after {
    content: "";
    position: absolute;
    inset: -0.38rem;
    border: 1.5px solid var(--app-color-premium-action-icon);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.55);
}

[data-action-feedback="favorite"].is-action-celebrating:is(
    [aria-pressed="true"],
    [aria-checked="true"]
) .favorite-toggle-icon {
    animation: app-action-favorite-save calc(var(--app-motion-duration-feedback) * 1.35) var(--app-motion-ease-emphasis) both;
}

[data-action-feedback="favorite"].is-action-celebrating:not([aria-pressed="true"]):not([aria-checked="true"]) .favorite-toggle-icon {
    animation: app-action-favorite-release var(--app-motion-duration-feedback) var(--app-motion-ease-standard) both;
}

[data-action-feedback="alert"].is-action-celebrating:is(
    [aria-pressed="true"],
    [aria-checked="true"]
) .museum-alert-toggle-icon {
    animation: app-action-alert-on calc(var(--app-motion-duration-feedback) * 1.4) var(--app-motion-ease-emphasis) both;
    transform-origin: 50% 18%;
}

[data-action-feedback="alert"].is-action-celebrating:not([aria-pressed="true"]):not([aria-checked="true"]) .museum-alert-toggle-icon {
    animation: app-action-alert-off var(--app-motion-duration-feedback) var(--app-motion-ease-standard) both;
    transform-origin: 50% 18%;
}

[data-action-feedback="share"].is-action-celebrating .app-share-trigger-icon {
    animation: app-action-share-confirm var(--app-motion-duration-feedback) var(--app-motion-ease-emphasis) both;
}

[data-action-feedback="share"].is-action-celebrating .app-share-trigger-icon::after {
    animation: app-action-feedback-halo var(--app-motion-duration-feedback) var(--app-motion-ease-standard) both;
}

/* One visible inactive Love or Bell receives an occasional icon-only invitation.
 * JavaScript randomizes the control and interval so card rails never pulse in
 * unison. State, hit-area geometry, and inactive colors remain unchanged. */
[data-inactive-attention-cue="favorite"].is-inactive-attention-cue:not(
    .is-active,
    .is-action-celebrating,
    [aria-pressed="true"],
    [aria-checked="true"]
):not(:hover):not(:focus-visible) .favorite-toggle-icon {
    animation: app-inactive-favorite-invite 880ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

[data-inactive-attention-cue="alert"].is-inactive-attention-cue:not(
    .is-active,
    .is-action-celebrating,
    [aria-pressed="true"],
    [aria-checked="true"]
):not(:hover):not(:focus-visible) .museum-alert-toggle-icon {
    animation: app-inactive-alert-invite 940ms cubic-bezier(0.16, 1, 0.3, 1) both;
    transform-origin: 50% 18%;
}

@keyframes app-inactive-favorite-invite {
    0%, 100% { transform: scale(1); filter: none; }
    28% { transform: scale(1.075); filter: drop-shadow(0 0 0.18rem color-mix(in srgb, currentColor 22%, transparent)); }
    48% { transform: scale(0.99); filter: none; }
    68% { transform: scale(1.04); }
}

@keyframes app-inactive-alert-invite {
    0%, 24%, 100% { transform: rotate(0) scale(1); filter: none; }
    38% { transform: rotate(-5deg) scale(1.035); filter: drop-shadow(0 0 0.16rem color-mix(in srgb, currentColor 20%, transparent)); }
    50% { transform: rotate(4deg) scale(1.035); }
    62% { transform: rotate(-2deg) scale(1.015); filter: none; }
    74% { transform: rotate(0) scale(1); }
}

@keyframes app-action-favorite-save {
    0%, 100% { transform: scale(1) rotate(0); filter: none; }
    18% { transform: scale(0.76) rotate(-3deg); }
    46% { transform: scale(1.3) rotate(3deg); filter: drop-shadow(0 0 0.28rem color-mix(in srgb, var(--app-color-state-favorite-active) 48%, transparent)); }
    68% { transform: scale(0.94) rotate(-1deg); }
    84% { transform: scale(1.08) rotate(0); filter: none; }
}

@keyframes app-action-favorite-release {
    0%, 100% { transform: scale(1) rotate(0); opacity: 1; }
    36% { transform: scale(0.78) rotate(-2deg); opacity: 0.58; }
    68% { transform: scale(1.06) rotate(1deg); opacity: 0.9; }
}

@keyframes app-action-alert-on {
    0%, 100% { transform: translateY(0) scale(1) rotate(0); filter: none; }
    16% { transform: translateY(1px) scale(0.9) rotate(0); }
    36% { transform: translateY(-1px) scale(1.1) rotate(-14deg); filter: drop-shadow(0 0 0.26rem color-mix(in srgb, var(--app-color-state-alert-active) 54%, transparent)); }
    52% { transform: translateY(-1px) scale(1.08) rotate(11deg); }
    67% { transform: translateY(0) scale(1.03) rotate(-6deg); }
    80% { transform: translateY(0) scale(1.01) rotate(3deg); filter: none; }
    91% { transform: translateY(0) scale(1) rotate(-1deg); }
}

@keyframes app-action-alert-off {
    0%, 100% { transform: translateY(0) scale(1) rotate(0); opacity: 1; }
    34% { transform: translateY(2px) scale(0.84) rotate(0); opacity: 0.58; }
    68% { transform: translateY(-1px) scale(1.04) rotate(0); opacity: 0.9; }
}

@keyframes app-action-share-confirm {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    32% { transform: translate3d(-1px, 1px, 0) scale(0.82); }
    62% { transform: translate3d(2px, -2px, 0) scale(1.18); }
    82% { transform: translate3d(0, 0, 0) scale(0.98); }
}

@keyframes app-action-feedback-halo {
    0% { opacity: 0; transform: scale(0.52); }
    24% { opacity: 0.68; }
    100% { opacity: 0; transform: scale(1.45); }
}

@media (max-width: 760px) {
    :root {
        --app-motion-duration-reveal: 320ms;
        --app-motion-duration-image: 380ms;
        --app-motion-duration-cinematic: 440ms;
        --app-motion-distance-reveal: 0.875rem;
        --app-motion-stagger-editorial: 24ms;
    }
}

@media (prefers-reduced-motion: reduce) {
    .motion-capable [data-motion-intro="true"],
    .motion-capable [data-motion-heading="true"],
    .motion-capable [data-motion-card="true"],
    .motion-capable [data-motion-article-header="true"],
    .motion-capable [data-motion-article-heading="true"],
    .motion-capable [data-motion-media="true"],
    .motion-capable [data-motion-collection="true"],
    .motion-capable [data-motion-accent="true"],
    .motion-capable [data-motion-footer="true"] {
        will-change: auto;
    }

    html body #mainContent .page-stack.ui-page-stack :is(
        .app-card-rail,
        .app-landing-card-grid
    ) > .app-standard-card,
    html body #mainContent .site-search-result-card,
    html body #mainContent .page-stack.ui-page-stack :is(
        .app-card-rail,
        .app-landing-card-grid
    ) > .app-standard-card :is(.app-card-media img, [data-card-image]),
    html body #mainContent .site-search-result-card :is(.app-card-media img, [data-card-image]) {
        transition-duration: 0.01ms;
        transform: none;
        filter: none;
        will-change: auto;
    }

    .app-standard-card .app-card-media img,
    .app-standard-card [data-card-image],
    .app-standard-card :is(
        .museum-exhibition-title:not(.museum-exhibition-title-static),
        .museum-title:is(a, button, [role=button]),
        .museum-card-title-link,
        .app-card-title:is(a, button, [role=button]),
        .app-card-title-link,
        .app-card-title-button,
        .newsroom-media-card-title
    ),
    .site-search-result-card .site-search-result-title {
        transition-duration: 0.01ms;
        transform: none;
    }

    .app-card-rail > .app-standard-card,
    .app-landing-card-grid > .app-standard-card,
    .site-search-result-card,
    .app-main-section :is(
        .btn,
        .app-forward-action,
        .app-text-link,
        .app-card-action-link,
        .app-public-state-action
    ) {
        transition-duration: 0.01ms;
        transform: none;
    }

    .app-main-section .app-forward-action svg,
    .app-main-section .app-card-action-link svg,
    .app-main-section .app-text-link svg {
        transition-duration: 0.01ms;
        transform: none;
    }

    :is(.btn, .btn-primary, .btn-outline, .btn-danger, .btn-quiet, .btn-icon):not(:disabled):not([aria-disabled="true"]):not(.is-disabled):not(:active):is(:hover, :focus-visible) {
        transform: none;
    }

    html body :is(.header, #mainContent, .footer, .sidebar, dialog, [role="dialog"], [aria-modal="true"]) :is(
        a[href],
        button,
        [role="button"],
        summary
    ):is(:hover, :focus-visible, :active) {
        scale: none;
    }

    .is-action-celebrating :is(
        .favorite-toggle-icon,
        .museum-alert-toggle-icon,
        .app-share-trigger-icon
    ),
    .is-action-celebrating :is(
        .favorite-toggle-icon,
        .museum-alert-toggle-icon,
        .app-share-trigger-icon
    )::after {
        animation: none;
        transform: none;
    }
}

/* Share retains its compact confirmation burst. Love and Bell use the
 * icon-measured flight layer below instead of control-centered pseudo-elements. */
:is(
    [data-favorite-toggle],
    [data-museum-alert-toggle],
    [data-youtube-updates-toggle],
    [data-instagram-updates-toggle],
    [data-news-updates-toggle],
    [data-share-trigger]
) {
    position: relative;
}

[data-action-feedback="favorite"] {
    --app-action-burst-primary: var(--app-color-state-favorite-active);
    --app-action-burst-secondary: var(--app-color-editorial-accent-warm);
    --app-action-burst-tertiary: var(--app-text-color-strong);
}

[data-action-feedback="alert"] {
    --app-action-burst-primary: var(--app-color-state-alert-active);
    --app-action-burst-secondary: var(--app-color-editorial-accent-deep);
    --app-action-burst-tertiary: var(--app-text-color-strong);
}

[data-share-trigger].is-action-celebrating::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    width: 0.22rem;
    height: 0.22rem;
    border-radius: 50%;
    background: var(--app-action-burst-primary, var(--app-color-editorial-accent-warm));
    box-shadow: var(--app-shadow-action-burst);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.28) rotate(-12deg);
    animation: app-action-premium-sparks 440ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes app-action-premium-sparks {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.28) rotate(-12deg);
    }
    24% { opacity: 1; }
    72% { opacity: 0.88; }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.12) rotate(10deg);
    }
}

/* Global Love/Bell activation flights. JavaScript measures the live SVG icon
 * and places this fixed zero-size origin at its viewport center, so card
 * padding, labels, transforms, and overflow never shift or clip the particles. */
.app-action-flight {
    position: fixed;
    z-index: var(--app-layer-action-feedback);
    width: 0;
    height: 0;
    overflow: visible;
    pointer-events: none;
}

.app-action-flight-particle {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
    animation-delay: var(--app-action-particle-delay);
    animation-duration: var(--app-action-particle-duration);
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.app-action-flight-particle-favorite {
    width: 0.82rem;
    height: 0.82rem;
    color: var(--app-color-state-favorite-active);
    animation-name: app-action-heart-flight;
}

.app-action-flight-particle-favorite svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    color: inherit;
    fill: currentColor;
    stroke: none;
}

.app-action-flight-particle-alert {
    width: 0.12rem;
    height: 0.78rem;
    background: var(--app-color-state-alert-active);
    animation-name: app-action-firework-flight;
}

.app-action-flight-particle-alert.is-tone-2 {
    background: var(--app-color-editorial-accent-warm);
}

.app-action-flight-particle-alert.is-tone-3 {
    background: var(--app-color-editorial-accent-deep);
}

/* Compact screens keep the full confirmation language but tighten each flight
 * to the available viewport instead of losing sparks beyond a phone edge. */
.app-action-flight.is-compact-viewport .app-action-flight-particle-favorite {
    width: 0.76rem;
    height: 0.76rem;
}

.app-action-flight.is-compact-viewport .app-action-flight-particle-alert {
    width: 0.11rem;
    height: 0.7rem;
}

@keyframes app-action-heart-flight {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translate3d(0, 0.2rem, 0) rotate(0) scale(0.34);
    }
    16% {
        opacity: 0.98;
    }
    52% {
        opacity: 0.94;
        transform:
            translate(-50%, -50%)
            translate3d(
                var(--app-action-particle-mid-x),
                var(--app-action-particle-mid-y),
                0
            )
            rotate(var(--app-action-particle-mid-rotation))
            scale(var(--app-action-particle-mid-scale));
    }
    100% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            translate3d(
                var(--app-action-particle-end-x),
                var(--app-action-particle-end-y),
                0
            )
            rotate(var(--app-action-particle-rotation))
            scale(var(--app-action-particle-scale));
    }
}

@keyframes app-action-firework-flight {
    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            translate3d(0, 0, 0)
            rotate(var(--app-action-particle-angle))
            scaleY(0.2);
    }
    18% {
        opacity: 1;
    }
    68% {
        opacity: 0.92;
    }
    100% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            translate3d(
                var(--app-action-particle-end-x),
                var(--app-action-particle-end-y),
                0
            )
            rotate(var(--app-action-particle-angle))
            scaleY(0.78);
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-share-trigger].is-action-celebrating::before,
    .app-action-flight {
        content: none;
        display: none;
        animation: none;
    }

    .is-inactive-attention-cue :is(
        .favorite-toggle-icon,
        .museum-alert-toggle-icon
    ) {
        animation: none;
        transform: none;
        filter: none;
    }
}

/*
 * Final premium surface contract for every rendered card family.
 *
 * Named card components, including legend cards, share this contract.
 * Layout-only rails, unnamed section shells, tables, button controls, dialogs,
 * and prompt surfaces are intentionally excluded.
 */
html body #mainContent :is(
    .app-standard-card,
    .app-content-state-card,
    .dashboard-menu-card,
    .account-details-card,
    .account-detail-card,
    .account-list-results-card,
    .ops-museum-table-card,
    .ops-museum-bulk-table-card,
    .site-search-result-card,
    .help-center-card,
    .help-center-search-card,
    .home-more-card,
    .museum-feature-card,
    .museum-visit-card,
    .museum-detail-identity-card,
    .museum-local-search-card,
    .museum-section-info-card,
    .news-article-fact-card,
    .news-article-cta,
    .news-instagram-card,
    .news-youtube-card,
    .social-channel-feature-card,
    .ui-note-panel,
    .auth-login-gateway,
    .auth-form
) {
    --app-shadow-raised: none;
    --shadow-soft: none;
    --ui-hover-shadow-standard: none;
    box-sizing: border-box;
    border: 0;
    outline: 0;
    border-radius: var(--app-surface-radius-standard);
    background-color: var(--app-surface-card);
    box-shadow: none;
}

/* Search results are flat navigation rows, including when they also carry the
 * shared Standard-card class on the complete results page. */
html body #mainContent .site-search-result-card,
html body #mainContent .site-search-result-card:is(:hover, :has(:focus-visible)) {
    box-shadow: none;
    transform: none;
}

/* Match the legacy collection and public-section selectors at their actual
 * specificity so the final premium owner cannot be flattened by older layout
 * declarations. Structural sections remain excluded. */
html body #mainContent .page-stack.ui-page-stack .app-card-rail > .app-standard-card,
html body #mainContent .page-stack.ui-page-stack .app-landing-card-grid > .app-standard-card {
    border: 0;
    border-radius: var(--app-surface-radius-standard);
    background-color: var(--app-surface-card);
    box-shadow: none;
}

/* Featured and Horizontal cards carry additional composition classes, so
 * match their established layout specificity while keeping the same surface
 * token as every Standard card. */
html body #mainContent .page-stack.ui-page-stack
:is(.app-card-rail, .app-landing-card-grid)
> .app-standard-card:is(.app-featured-card, .app-horizontal-card) {
    border: 0;
    border-radius: var(--app-surface-radius-standard);
    background-color: var(--app-surface-card);
    box-shadow: none;
}

/* Static token-owned depth gives phone cards separation without a border or
   transform-based motion that can fight touch scrolling. */
@media (max-width: 760px) {
    html body #mainContent .page-stack.ui-page-stack
    :is(.app-card-rail, .app-landing-card-grid)
    > .app-standard-card {
        border: 0;
        box-shadow: var(--app-shadow-card-mobile);
    }
}

html body :is(
    .modal-card,
    .app-slide-prompt-card,
    .app-loader-visual
) {
    --app-shadow-raised: none;
    --shadow-soft: none;
    --ui-hover-shadow-standard: none;
    box-sizing: border-box;
    border: 1px solid var(--app-card-border-premium-hover);
    background-color: var(--app-surface-elevated);
    box-shadow: none;
}

/* Floating and embedded media cards must clip their contents to the premium
 * edge; collection cards retain their existing component overflow contract. */
html body :is(
    .modal-card,
    .app-slide-prompt-card,
    .app-loader-visual,
    .news-instagram-card,
    .news-youtube-card
) {
    overflow: hidden;
}

/* Structural card groups receive depth but never masquerade as one large
 * clickable target when their descendants are hovered or focused. */
html body #mainContent :is(
    .account-list-results-card,
    .account-section-menu-card,
    .ops-museum-table-card,
    .ops-museum-bulk-table-card,
    .museum-local-search-card,
    .museum-section-info-card,
    .ui-note-panel
):is(:hover, :has(:focus-visible)) {
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

/* Final cross-page card edge contract. This catches domain card classes that
 * retain specialized anatomy while excluding dialog and prompt surfaces. */
html body #mainContent .page-stack.ui-page-stack :is(
    [class~="card"],
    [class$="-card"],
    [class*="-card "]
):not(.modal-card):not(.app-slide-prompt-card),
html body #mainContent :is(
    [class~="card"],
    [class$="-card"],
    [class*="-card "]
):not(.modal-card):not(.app-slide-prompt-card) {
    border: 0;
    outline: 0;
}

/* Article reading and My Account are editorial workspaces, not collections of
 * legacy painted tiles. Keep their semantic content and controls while
 * removing the old card chrome completely. */
html body.public-editorial-body #mainContent .news-article-composite,
html body.public-editorial-body #mainContent .news-article-composite :is(
    .app-standard-card,
    .news-article-fact-card,
    .news-article-cta,
    .news-instagram-card,
    .news-youtube-card,
    .ui-note-panel
),
html body.editorial-workspace-account #mainContent :is(
    .account-section-menu-card,
    .account-details-card,
    .account-detail-card,
    .account-list-results-card,
    .app-standard-card,
    .app-content-state-card
) {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
}

html body.public-editorial-body #mainContent .news-article-composite :is(
    .app-standard-card,
    .news-article-fact-card,
    .news-article-cta,
    .news-instagram-card,
    .news-youtube-card,
    .ui-note-panel
):is(:hover, :has(:focus-visible)),
html body.editorial-workspace-account #mainContent :is(
    .account-section-menu-card,
    .account-details-card,
    .account-detail-card,
    .account-list-results-card,
    .app-standard-card,
    .app-content-state-card
):is(:hover, :has(:focus-visible)) {
    border: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html body #mainContent :is(
        .app-standard-card,
        .site-search-result-card,
        .app-workspace-menu-option,
        .home-more-card,
        .museum-feature-card,
        .news-instagram-card,
        .news-youtube-card,
        .social-channel-feature-card
    ) {
        transition-duration: 0.01ms;
        transform: none;
    }
}

/* Final social prose guard. Captions are natural language,
so they should wrap
 * at word boundaries and let the shared clamp create the excerpt.
 */
.page-stack.ui-page-stack :is(
    .social-channel-post-card,
    .social-channel-trending-tile,
    .home-social-post-card,
    .account-favorite-item
) :is(
    .social-channel-post-copy,
    .social-channel-trending-copy,
    .social-channel-post-description,
    .social-channel-trending-description
){
    overflow-wrap: break-word;
    word-break: normal;
}

.page-stack.ui-page-stack:is(
    .social-channel-page-stack-youtube,
    .social-channel-page-stack-instagram
) .social-channel-post-card :is(
    .social-channel-post-description,
    .social-channel-post-description.app-card-copy-ellipsis,
    .museum-exhibition-card-copy.social-channel-post-description.app-card-copy-ellipsis
){
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
}

/* Final CTA copy guard. More cards use the same strong text treatment as
 * museum profile card names.
 */
.page-stack.ui-page-stack :is(
    .home-more-card,
    .home-feed-card
) :is(
    .home-more-card-copy,
    .dashboard-menu-copy
){
    color: var(--app-color-link);
    font-size: var(--app-standard-card-title-size, 0.96rem);
    font-weight: 850;
    line-height: 1.2;
    text-shadow:
        none;
}

/* Final Home social-card content guard. The Home carousel cards have a compact
 * lower band; keep them to date,
title,
and action so captions do not collide
 * with the Post/Video action or favorite control.
 */
.page-stack.ui-page-stack .home-social-post-card :is(
    .app-card-source-name,
    .social-channel-post-description,
    .museum-exhibition-card-copy.social-channel-post-description
){
    display: none;
}

.page-stack.ui-page-stack .home-social-post-card .app-card-title{
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

/* Final social action sizing guard. Post/Video labels are short,
so
 * the button should hug its text instead of stretching the arrow to the edge.
 */
.page-stack.ui-page-stack .social-channel-post-card .app-card-action-link{
    right: auto;
    width: auto;
    min-width: max-content;
    max-width: calc(100% - var(--app-standard-card-copy-inline, 0.82rem) - 4.95rem);
    justify-content: flex-start;
    gap: 0.32rem;
}

/* Every repeated content card uses one disclosure contract. Collapsed cards
 * retain the shared height; expanded cards rejoin normal page flow. */
html body #mainContent .page-stack.ui-page-stack .app-standard-card.is-card-copy-expanded{
    box-sizing: border-box;
    height: auto;
    min-height: var(--app-standard-card-height);
    max-height: none;
    overflow: visible;
}

.page-stack.ui-page-stack .app-standard-card .app-card-copy-scroll-region{
    position: relative;
    display: flex;
    box-sizing: border-box;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding-inline-end: 0.35rem;
    overflow: hidden;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}

/* The region owns the gutter and padding in both disclosure states. */
html body #mainContent .page-stack.ui-page-stack .app-standard-card .app-card-copy-scroll-region :is(
    .museum-exhibition-description-shell, .social-channel-post-description, .app-card-copy
) {
    box-sizing: border-box;
    width: 100%;
    padding-right: 0;
}

/* The measured copy region must own the full card-body track. Earlier shared
 * grid declarations shrink-wrapped this parent around its text and left the
 * visible blank area outside the controller's measurement. */
html body #mainContent .page-stack.ui-page-stack :is(.app-card-rail, .app-landing-card-grid)
> .app-standard-card
> :is(.app-card-content, .museum-exhibition-content, .home-exhibition-copy, .social-channel-post-copy):has(> .app-card-copy-scroll-region){
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

html body #mainContent .page-stack.ui-page-stack :is(.app-card-rail, .app-landing-card-grid)
> .app-standard-card:not(.is-card-copy-expanded)
> :is(.app-card-content, .museum-exhibition-content, .home-exhibition-copy, .social-channel-post-copy)
> .app-card-copy-scroll-region{
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    height: auto;
    max-height: 100%;
    overflow: hidden;
}
/* Allow every shared card description to consume all complete lines available
 * in its bounded copy region. The controller measures the actual remaining
 * height and reduces this generous ceiling before the card is displayed. */
html body #mainContent .page-stack.ui-page-stack :is(.app-card-rail, .app-landing-card-grid)
> .app-standard-card:not(.is-card-copy-expanded){
    --app-standard-card-description-line-cap: 99;
}

html body #mainContent .page-stack.ui-page-stack :is(.app-card-rail, .app-landing-card-grid)
> .app-standard-card:not(.is-card-copy-expanded)
:is(.museum-exhibition-description-shell, .social-channel-post-description, .app-card-copy){
    display: -webkit-box;
    block-size: auto;
    min-block-size: 0;
    max-block-size: none;
    height: auto;
    min-height: 0;
    max-height: none;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--app-standard-card-description-line-cap);
    line-clamp: var(--app-standard-card-description-line-cap);
}
/* Collapsed titles preserve the established card hierarchy while reserving
 * complete-line room for description copy above the independent action band. */
html body #mainContent .page-stack.ui-page-stack :is(.app-card-rail, .app-landing-card-grid)
> .app-standard-card:not(.app-featured-card):not(.app-horizontal-card)
:is(.museum-exhibition-title, .app-card-title){
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

html body #mainContent .page-stack.ui-page-stack :is(.app-card-rail, .app-landing-card-grid)
> .app-standard-card.app-featured-card
:is(.museum-exhibition-title, .app-card-title){
    -webkit-line-clamp: 4;
    line-clamp: 4;
}

html body #mainContent .page-stack.ui-page-stack :is(.app-card-rail, .app-landing-card-grid)
> .app-standard-card.app-horizontal-card
:is(.museum-exhibition-title, .app-card-title){
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

@media (max-width: 980px) {
    html body #mainContent .page-stack.ui-page-stack :is(.app-card-rail, .app-landing-card-grid)
    > .app-standard-card:is(.app-featured-card, .app-horizontal-card)
    :is(.museum-exhibition-title, .app-card-title){
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
}

/* Collapsed previews end on a complete line. The measured height is set by
 * the shared disclosure controller and expansion removes this constraint. */
html body #mainContent .page-stack.ui-page-stack :is(.app-card-rail, .app-landing-card-grid) > .app-standard-card:not(.is-card-copy-expanded) .is-card-copy-preview-clamped{
    display: block;
    block-size: auto;
    min-block-size: 0;
    max-block-size: var(--app-card-copy-preview-height);
    height: auto;
    min-height: 0;
    max-height: var(--app-card-copy-preview-height);
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    -webkit-line-clamp: none;
    line-clamp: none;
}

html body #mainContent .page-stack.ui-page-stack :is(.app-card-rail, .app-landing-card-grid)
> .app-standard-card:not(.app-featured-card):not(.app-horizontal-card):not(.is-card-copy-expanded)
:is(.museum-exhibition-description-shell, .social-channel-post-description, .app-card-copy){
    font-size: var(--app-card-description-text-size);
    line-height: var(--app-card-description-line-height);
}

.page-stack.ui-page-stack .app-standard-card [data-card-copy-ending]{
    display: inline;
    white-space: nowrap;
}

.page-stack.ui-page-stack .app-standard-card .app-card-copy-disclosure:not([hidden]){
    display: inline;
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    line-height: inherit;
    vertical-align: baseline;
}

/* The controller keeps the final complete word and More in one non-breaking
 * inline ending, so the disclosure can never float on a line by itself. */
html body #mainContent .page-stack.ui-page-stack :is(.app-card-rail, .app-landing-card-grid)
> .app-standard-card:not(.is-card-copy-expanded)
.app-card-copy-scroll-region
> :is(.museum-exhibition-description-shell, .social-channel-post-description, .app-card-copy).is-card-copy-preview-clamped
> [data-card-copy-ending] > .app-card-copy-disclosure:not([hidden]){
    position: static;
    display: inline;
    width: auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    vertical-align: baseline;
    white-space: nowrap;
}

html body #mainContent .page-stack.ui-page-stack :is(.app-card-rail, .app-landing-card-grid)
> .app-standard-card:not(.is-card-copy-expanded)
.app-card-copy-scroll-region
> :is(.museum-exhibition-description-shell, .social-channel-post-description, .app-card-copy).is-card-copy-preview-clamped
> [data-card-copy-ending] > .app-card-copy-disclosure:not([hidden])::before{
    content: "\2026";
    color: currentColor;
    font: inherit;
    line-height: inherit;
}

html body #mainContent .page-stack.ui-page-stack :is(.app-card-rail, .app-landing-card-grid)
> .app-standard-card:not(.is-card-copy-expanded)
.app-card-copy-scroll-region
> :is(.museum-exhibition-description-shell, .social-channel-post-description, .app-card-copy).is-card-copy-preview-clamped
> [data-card-copy-ending] > .app-card-copy-disclosure .app-card-copy-toggle{
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 0;
    padding: 0;
    line-height: inherit;
    vertical-align: baseline;
    padding-inline-start: 0.24rem;
}

/* Expanded copy keeps the final complete word and Less together in normal
 * flow. It becomes reachable at the end of the fixed card body's scrollport. */
html body #mainContent .page-stack.ui-page-stack :is(.app-card-rail, .app-landing-card-grid)
> .app-standard-card.is-card-copy-expanded
.app-card-copy-scroll-region
:is(.museum-exhibition-description-shell, .social-channel-post-description, .app-card-copy)
> [data-card-copy-ending] > .app-card-copy-disclosure:not([hidden]){
    position: static;
    display: inline;
    margin: 0;
    padding: 0;
    background: transparent;
    vertical-align: baseline;
}

html body #mainContent .page-stack.ui-page-stack :is(.app-card-rail, .app-landing-card-grid)
> .app-standard-card.is-card-copy-expanded
.app-card-copy-scroll-region
:is(.museum-exhibition-description-shell, .social-channel-post-description, .app-card-copy)
> [data-card-copy-ending] > .app-card-copy-disclosure .app-card-copy-toggle{
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 0;
    padding: 0 0 0 0.24rem;
    line-height: inherit;
    vertical-align: baseline;
}

.page-stack.ui-page-stack .app-standard-card .app-card-copy-toggle{
    display: inline;
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0 0 0 0.24rem;
    border: 0;
    border-radius: 0.25rem;
    background: transparent;
    color: var(--app-color-primary-action);
    font-family: inherit;
    font-size: inherit;
    font-weight: 750;
    line-height: inherit;
    text-decoration: underline;
    text-underline-offset: 0.14em;
    box-shadow: none;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.page-stack.ui-page-stack .app-standard-card .app-card-copy-toggle:is(:hover, :focus-visible){
    background: var(--app-interactive-hover-surface);
    color: var(--app-interactive-hover-text);
    transform: none;
}

.page-stack.ui-page-stack .app-standard-card .app-card-copy-toggle:focus{
    outline: 0;
}

.page-stack.ui-page-stack .app-standard-card .app-card-copy-toggle:focus-visible{
    outline: 2px solid var(--app-color-focus);
    outline-offset: 2px;
}

.page-stack.ui-page-stack .app-standard-card .app-card-copy-toggle-label{
    display: inline;
}

html body #mainContent .page-stack.ui-page-stack :is(.app-card-rail, .app-landing-card-grid) > .app-standard-card.is-card-copy-expanded .app-card-copy-scroll-region{
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    padding: 0 0.35rem 0.15rem 0;
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--app-scrollbar-thumb) var(--app-scrollbar-track);
}

html body #mainContent .page-stack.ui-page-stack :is(.app-card-rail, .app-landing-card-grid) > .app-standard-card.is-card-copy-expanded .app-card-copy-scroll-region::-webkit-scrollbar{
    width: var(--app-scrollbar-size);
}

html body #mainContent .page-stack.ui-page-stack :is(.app-card-rail, .app-landing-card-grid) > .app-standard-card.is-card-copy-expanded .app-card-copy-scroll-region::-webkit-scrollbar-track{
    border: 1px solid var(--app-scrollbar-track-border);
    border-radius: 999px;
    background: var(--app-scrollbar-track);
}

html body #mainContent .page-stack.ui-page-stack :is(.app-card-rail, .app-landing-card-grid) > .app-standard-card.is-card-copy-expanded .app-card-copy-scroll-region::-webkit-scrollbar-thumb{
    border: 2px solid var(--app-scrollbar-track);
    border-radius: 999px;
    background: var(--app-scrollbar-thumb);
}

html body #mainContent .page-stack.ui-page-stack :is(.app-card-rail, .app-landing-card-grid) > .app-standard-card.is-card-copy-expanded .app-card-copy-scroll-region::-webkit-scrollbar-thumb:hover{
    background: var(--app-scrollbar-thumb-hover);
}

html body #mainContent .page-stack.ui-page-stack :is(.app-card-rail, .app-landing-card-grid) > .app-standard-card.is-card-copy-expanded .app-card-copy-scroll-region :is(
    .museum-exhibition-description-shell,
    .museum-exhibition-card-copy,
    .social-channel-post-description,
    .app-card-copy
){
    display: block;
    flex: 0 0 auto;
    min-height: 1.2em;
    max-height: none;
    padding-right: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    -webkit-line-clamp: none;
    line-clamp: none;
}

/* The empty Top Stories sentence already sits inside the standard copy band.
 * Do not apply the generic content-container grid and padding to it again. */
.page-stack.ui-page-stack .home-top-stories-empty-grid.app-card-rail .home-top-stories-empty-copy{
    display: block;
    align-self: start;
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--app-color-link);
    font-size: var(--app-standard-card-title-size, 0.96rem);
    font-weight: 850;
    line-height: 1.2;
    text-shadow:
        none;
}

.page-stack.ui-page-stack :is(.app-card-rail, .museum-grid, .home-exhibition-grid) > :is(
    .app-standard-card,
    .museum-exhibition-card,
    .museum-exhibition-item,
    .social-channel-post-card,
    .social-channel-trending-tile,
    .account-favorite-item,
    .museum-card,
    .dashboard-menu-card
):is([hidden], .museum-pagination-hidden){
    display: none;
}

/* Expanded copy never changes shared card geometry. The card body is the
 * stable viewport and its dedicated copy region owns vertical scrolling. */
html body #mainContent .page-stack.ui-page-stack .app-standard-card.is-card-copy-expanded .app-card-copy-scroll-region {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    padding-right: 0.35rem;
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--app-scrollbar-thumb) var(--app-scrollbar-track);
}

html body #mainContent .page-stack.ui-page-stack .app-standard-card.is-card-copy-expanded .app-card-copy-scroll-region :is(
    .museum-exhibition-description-shell,
    .museum-exhibition-card-copy,
    .social-channel-post-description,
    .app-card-copy
) {
    max-height: none;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    -webkit-line-clamp: none;
    line-clamp: none;
}



}