/* Shared venue pages use the same dark surfaces, violet accents, and readable type as the account shell. */
.cafe-page {
    position: relative;
    isolation: isolate;
    min-height: 100dvh;
    box-sizing: border-box;
    padding: clamp(24px, 4vw, 52px);
    color: var(--cafe-text);
    background: radial-gradient(ellipse at 12% 0, color-mix(in srgb, var(--cafe-primary) 17%, transparent), transparent 40%), var(--cafe-canvas);
}
.cafe-page-shell { position: relative; width: min(1180px, 100%); margin-inline: auto; min-width: 0; }
.cafe-page-background { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.cafe-page-background img { width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: .32; }
.cafe-page-background::after { position: absolute; inset: 0; content: ''; background: linear-gradient(90deg, color-mix(in srgb, var(--cafe-canvas) 88%, transparent), color-mix(in srgb, var(--cafe-canvas) 46%, transparent)), linear-gradient(0deg, var(--cafe-canvas) 8%, transparent 70%); }
.cafe-page-heading { margin-bottom: 28px; }
.cafe-page-eyebrow { margin: 0 0 12px; color: var(--cafe-accent); font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.cafe-page-heading h1 { margin: 0 0 12px; color: var(--cafe-text); font-size: clamp(32px, 4.2vw, 52px); font-weight: 800; letter-spacing: -.025em; line-height: 1.12; }
.cafe-page-heading h1 span { color: var(--cafe-accent); }
.cafe-page-lead { max-width: 650px; margin: 0; color: var(--cafe-text-muted); font-size: 17px; line-height: 1.65; }
.cafe-page-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; color: var(--cafe-text-subtle); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.cafe-page .mud-button-root { min-height: 44px; border-radius: 12px; font-weight: 700; letter-spacing: .06em; }
/* Alex: HannahTheme sets MudBlazor body and button type to 10px; scoped overrides restore café reading size without changing other operator tools. */
.cafe-page .mud-typography-body1,
.cafe-page .mud-typography-body2,
.cafe-report-page .mud-typography-body1,
.cafe-report-page .mud-typography-body2 { font-size: 16px; line-height: 1.5; }
.cafe-page .mud-typography-h6,
.cafe-report-page .mud-typography-h6 { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.3; }
.cafe-page .mud-button-root,
.cafe-report-page .mud-button-root { min-height: 44px; border-radius: 12px; font-size: 15px; }
@media (max-width: 650px) {
    .cafe-page .mud-button-root,
    .cafe-report-page .mud-button-root,
    .cafe-page .mud-chip,
    .cafe-report-page .mud-chip { font-size: 16px; }
}
.cafe-page .mud-button-filled-primary { background: var(--cafe-primary); color: var(--cafe-text); box-shadow: var(--cafe-shadow-primary); }
.cafe-page .mud-button-outlined { border-color: var(--cafe-border-strong); color: var(--cafe-accent-soft); }
.cafe-page .mud-button-filled-info,
.cafe-report-page .mud-button-filled-info { background: var(--cafe-primary); color: var(--cafe-text); }
.cafe-page .mud-icon-button-color-info,
.cafe-report-page .mud-icon-button-color-info { color: var(--cafe-accent-soft); }
.cafe-page .mud-chip-color-info,
.cafe-report-page .mud-chip-color-info { border-color: color-mix(in srgb, var(--cafe-accent) 38%, transparent); background-color: color-mix(in srgb, var(--cafe-primary) 12%, var(--cafe-surface-raised)); color: var(--cafe-accent-soft); }
.cafe-page .mud-alert { border-radius: 14px; }
.cafe-page a:focus-visible, .cafe-page button:focus-visible { outline: 2px solid var(--cafe-accent-soft); outline-offset: 3px; }
/* The mobile brand is an overlay, not a flow header. Reserve its actual 56px before any page heading. */
@media (max-width: 1023.98px) { .cafe-page { padding: 82px clamp(16px, 3vw, 32px) 32px; } }
@media (max-width: 600px) { .cafe-page-heading { margin-bottom: 22px; } .cafe-page-lead { font-size: 16px; } }