/* Apple-inspired materials in the original 1927 palette.
   Blur is reserved for floating controls and photo captions; moving artwork stays sharp. */
:root {
  --glass-fill: #471414;
  --glass-thick: #471414;
  --glass-photo: #471414;
  --glass-edge: rgb(233 217 183 / 23%);
  --glass-highlight: rgb(255 244 219 / 17%);
  --glass-shadow: 0 12px 32px rgb(9 3 2 / 18%), inset 0 1px 0 var(--glass-highlight);
  --glass-blur: none;
  --card-radius: 18px;
  --control-radius: 10px;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass-fill: rgb(233 217 183 / 3.5%);
    --glass-thick: rgb(71 20 20 / 94%);
    --glass-photo: rgb(71 20 20 / 83%);
    --glass-blur: blur(20px) saturate(125%);
  }
}

/* One shared silhouette, with immediate feedback on press. */
.button, .icon-button, .chip, .menu-trigger, .dialog-close,
.cinema-motion-toggle, .cinema-showtime, .cinema-month-heading>button,
.cinema-calendar-grid button, .cinema-date-strip button,
.cinema-calendar-mobile input, .search-field input,
.field input, .field select, .field textarea, .legacy-home .btn {
  border-radius: var(--control-radius);
}
.button:not(.button-light):not(.button-gold), .icon-button, .menu-trigger,
.chip:not([aria-pressed=true]), .cinema-motion-toggle, .cinema-month-heading>button {
  background: var(--glass-fill);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 rgb(255 244 219 / 8%);
}
.button-light, .legacy-home .btn.solid {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 45%), 0 4px 12px rgb(0 0 0 / 10%);
}
.button, .icon-button, .chip, .menu-trigger, .cinema-motion-toggle,
.cinema-showtime, .cinema-month-heading>button, .cinema-date-strip button,
.segmented button, .legacy-home .btn {
  transition: transform 180ms cubic-bezier(.2,.8,.2,1), opacity 150ms ease;
}
.button:active, .icon-button:active, .chip:active, .menu-trigger:active,
.cinema-motion-toggle:active, .cinema-showtime:active,
.cinema-month-heading>button:active, .cinema-date-strip button:active,
.segmented button:active, .legacy-home .btn:active {
  transform: scale(.97);
  transition-duration: 70ms;
}
.segmented { border-radius: 12px; background: rgb(0 0 0 / 13%); }
.segmented button { min-height: 44px; border-radius: 8px; }
.segmented button[aria-pressed=true] { box-shadow: 0 2px 6px rgb(0 0 0 / 15%), inset 0 1px 0 #ffffff60; }
.search-field input, .field input, .field select, .field textarea {
  background: rgb(10 5 4 / 25%);
  border-color: var(--glass-edge);
}

/* Floating navigation. Existing header height/anchor offsets are retained. */
.site-header, .site-header.scrolled, .inner-route .site-header {
  top: 10px;
  left: 16px;
  right: 16px;
  height: 68px;
  padding-inline: 24px;
  border: 1px solid var(--glass-edge);
  border-radius: var(--card-radius);
  background: var(--glass-thick);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.desktop-nav { gap: 8px; }
.desktop-nav a { padding: 0 14px; border-radius: var(--control-radius); }
.desktop-nav a[aria-current=page] { background: rgb(233 217 183 / 12%); color: var(--paper); }
.desktop-nav a[aria-current=page]:after { display: none; }
.menu-trigger { min-width: 60px; }

/* The House: photographs inside a clear rim, with a frosted title panel. */
main[data-page=house], main[data-page=dashboard], main[data-page=gallery], main[data-page=venues] {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
/* Use the same fixed artwork scale and left fade as Live Events. */
body:has(main[data-page=house]), body:has(main[data-page=dashboard]), body:has(main[data-page=gallery]), body:has(main[data-page=venues]) { isolation: isolate; }
body:has(main[data-page=house])::before, body:has(main[data-page=dashboard])::before,
body:has(main[data-page=gallery])::before, body:has(main[data-page=venues])::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, rgb(71 20 20 / 50%) 0%, rgb(71 20 20 / 30%) 40%, rgb(71 20 20 / 0%) 80%), #471414 url('../../images/house/house-geometric-background.webp') center top / cover no-repeat;
}
body:has(main[data-page=house]) .site-footer, body:has(main[data-page=dashboard]) .site-footer,
body:has(main[data-page=gallery]) .site-footer, body:has(main[data-page=venues]) .site-footer { background: rgb(16 5 4 / 65%); }
.house-grid { gap: 24px; }
.house-grid .experience-card {
  min-height: 350px;
  padding: 20px;
  border: 1px solid var(--glass-edge);
  border-radius: var(--card-radius);
  background: var(--glass-fill);
  box-shadow: var(--glass-shadow);
  transition: transform 240ms cubic-bezier(.2,.8,.2,1);
}
.house-grid .experience-card>img {
  inset: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  border-radius: 11px;
}
.house-grid .experience-card:after {
  inset: 8px;
  border-radius: 11px;
  background: linear-gradient(180deg, transparent 30%, rgb(15 8 5 / 40%));
}
.house-grid .experience-card>div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  background: var(--glass-photo);
  border: 1px solid var(--glass-edge);
  border-radius: 12px;
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.house-grid .experience-card h3 { margin: 0; font-size: clamp(2rem, 3.2vw, 3rem); }
.house-grid .experience-card>div>span {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: 1px solid var(--glass-edge);
  border-radius: 9px;
  background: rgb(255 245 217 / 9%);
  color: var(--paper);
  font-size: 1.2rem;
}
.reservation-band, .toolbar, .calendar, .empty-state, .cinema-calendar,
.cinema-screening, .artwork-grid figure, .gallery-item,
.dining-title, .dining-photo-grid figure {
  background: linear-gradient(145deg, rgb(255 240 210 / 5%), transparent 55%), var(--glass-fill);
  border: 1px solid var(--glass-edge);
  border-radius: var(--card-radius);
  box-shadow: var(--glass-shadow);
}
.reservation-band { padding: 36px; }
.reservation-band>.button { flex-shrink: 0; }

/* The entire dining experience uses the primary #471414 background. */
.dining-opening { padding-bottom: 24px; }
.dining-title { margin: 32px; padding: clamp(28px, 3vw, 48px); }
.dining-cover { margin: 24px 24px 0 0; border-radius: var(--card-radius); }
.menu-browser { background: var(--wine); }
.menu-controls {
  width: min(1240px, 88%);
  margin-inline: auto;
  border: 1px solid var(--glass-edge);
  border-radius: 14px;
  background: var(--glass-thick);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.menu-controls>.wrap { width: 100%; padding-inline: 8px; }
.menu-tabs { gap: 8px; padding: 6px 0; }
.menu-tabs a { border-radius: 9px; min-height: 56px; padding: 14px 24px; }
.menu-tabs a[aria-current=page] { background: var(--paper); color: var(--wine); box-shadow: inset 0 1px 0 rgb(255 255 255 / 25%); }
.menu-tabs a[aria-current=page]:after { display: none; }
.menu-layout { gap: 32px; }
.menu-content {
  padding: 30px;
  background: var(--glass-fill);
  border: 1px solid var(--glass-edge);
  border-radius: var(--card-radius);
  box-shadow: var(--glass-shadow);
}
.category-sidebar { padding: 8px 16px; border: 1px solid var(--glass-edge); border-radius: 14px; background: var(--glass-fill); }
.category-sidebar a:last-child { border-bottom: 0; }
.menu-aside-image { border: 6px solid var(--glass-edge); border-radius: 14px; }
.menu-browser .search-field input { background: rgb(233 217 183 / 4%); border-color: var(--glass-edge); border-radius: 10px; color: var(--paper); }
.menu-browser .empty-state { box-shadow: none; }
.menu-price small { display: block; font-size: .68rem; line-height: 1.6; }
.dining-photo-grid figure { padding: 8px; overflow: hidden; }
.dining-photo-grid img { border-radius: 10px; }
.dining-reservations { padding-block: 36px; }
.dining-reservations .reservation-band { padding: 24px; gap: 48px; background: var(--glass-fill); border: 1px solid var(--glass-edge); }
.dining-reservations .reservation-band>div { padding: 16px 16px 16px 0; }
.reservation-photo { border-radius: 12px; }

/* Cinema keeps full-width moving reels; no blur on the animated tracks. */
.cinema-poster { padding: 7px 7px 16px; border: 1px solid var(--glass-edge); border-radius: 14px; background: var(--glass-fill); box-shadow: inset 0 1px 0 var(--glass-highlight); }
.cinema-poster-art { border-radius: 8px; }
.cinema-poster-title, .cinema-poster-status { margin-inline: 8px; }
.cinema-week-layout { grid-template-columns: 370px minmax(0,1fr); gap: 40px; }
.cinema-week-layout>* { min-width: 0; }
.cinema-calendar { padding: 16px; }
.cinema-screening { padding: 24px; margin-top: 16px; gap: 22px; }
.cinema-screening-poster { padding: 4px; border: 1px solid var(--glass-edge); border-radius: 10px; overflow: hidden; }
.cinema-screening-poster img { border-radius: 6px; }
.cinema-showtime { background: rgb(233 217 183 / 5%); border-color: var(--glass-edge); }
.cinema-calendar-grid button { border-radius: 9px; }
.cinema-calendar-grid button[aria-pressed=true], .cinema-date-strip button[aria-pressed=true] { box-shadow: 0 2px 5px rgb(0 0 0 / 17%), inset 0 1px 0 #ffffff55; }

/* Live events and gallery use one framed surface per group. */
main[data-page=events] .page-intro { overflow: hidden; border: 1px solid var(--glass-edge); border-radius: var(--card-radius); box-shadow: var(--glass-shadow); }
.toolbar { background: var(--glass-thick); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.agenda-event { padding: 14px; gap: 20px; background: var(--glass-fill); border: 1px solid var(--glass-edge); border-radius: 14px; box-shadow: inset 0 1px 0 var(--glass-highlight); }
.agenda-event img { border-radius: 8px; }
.calendar-week span { background: rgb(0 0 0 / 13%); }
.calendar-day.is-today .calendar-number { border-radius: 6px; }
.calendar-day[aria-pressed=true] .calendar-label, .calendar-day[aria-pressed=true] .calendar-count { color: var(--wine); }
.artwork-grid figure, .gallery-item { padding: 10px; }
.artwork-grid button, .gallery-item img { border-radius: 10px; }
.artwork-grid figcaption { padding: 20px 14px 14px; }
.gallery-item figcaption { padding: 0 6px 6px; }

/* Larger surfaces have a thicker tint. Nested rows do not add another blur. */
.site-dialog { background: var(--glass-thick); border: 1px solid var(--glass-edge); border-radius: 22px; box-shadow: 0 28px 90px #0008, inset 0 1px 0 var(--glass-highlight); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.site-dialog::backdrop { background: rgb(12 5 4 / 62%); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.dialog-close { border-radius: 10px; background: #471414f5; box-shadow: 0 4px 15px #0003, inset 0 1px 0 var(--glass-highlight); }
.membership-plan { border-radius: 14px; background: var(--glass-fill); box-shadow: inset 0 1px 0 var(--glass-highlight); }
.nav-dialog a { border: 1px solid var(--glass-edge); border-radius: 12px; padding: 14px 18px; background: var(--glass-fill); }
.nav-dialog { gap: 10px; }

/* Original landing composition, video, copy and type remain unchanged. */
.legacy-home .btn { border-radius: 10px; }
.legacy-home .prog-card, .legacy-home .member-band, .legacy-home .intro-visual,
.legacy-home .guide.glass { border-radius: 18px; border-color: var(--glass-edge); box-shadow: var(--glass-shadow); }
.legacy-home .guide.glass { background: var(--glass-fill); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.legacy-home .poster { border-radius: 12px; border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-highlight); }
.legacy-home .prog-card { transition: transform 240ms cubic-bezier(.2,.8,.2,1); }

@media (hover:hover) and (pointer:fine) {
  .house-grid .experience-card:hover, .legacy-home .prog-card:hover { transform: translateY(-3px); }
  .house-grid .experience-card:hover>img { transform: none; }
  .desktop-nav a:hover, .nav-dialog a:hover { background: rgb(233 217 183 / 13%); }
}
@media (max-width:1100px) and (min-width:851px) {
  .cinema-week-layout { grid-template-columns: 350px minmax(0,1fr); gap: 24px; }
  .cinema-calendar { padding: 14px; }
  .cinema-screening { grid-template-columns: 76px minmax(0,1fr); gap: 16px; padding: 18px; }
  .site-header, .site-header.scrolled, .inner-route .site-header { padding-inline: 18px; }
  .desktop-nav a { padding-inline: 10px; }
}
@media (max-width:850px) {
  .cinema-week-layout { grid-template-columns: 1fr; }
  .cinema-calendar { padding: 18px; }
}
@media (max-width:800px) {
  .site-header, .site-header.scrolled, .inner-route .site-header { top: 8px; left: 10px; right: 10px; height: 60px; padding-inline: 14px; border-radius: 14px; }
  .brand img { height: 39px; width: 29px; }
  .brand .header-wordmark { width: 100px; }
  .mobile-dock { width: auto; left: 10px; right: 10px; bottom: calc(9px + env(safe-area-inset-bottom)); padding: 5px; border: 1px solid var(--glass-edge); border-radius: 15px; background: var(--glass-thick); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
  .mobile-dock a, .mobile-dock button { min-width: 0; font-size: .73rem; padding-inline: 3px; }
  .mobile-dock a[aria-current=page] { border-radius: 9px; background: rgb(233 217 183 / 13%); box-shadow: inset 0 1px 0 var(--glass-highlight); }
  .mobile-dock [aria-current=page]:before { display: none; }
  body:not(.legacy-home-route) { padding-bottom: calc(85px + env(safe-area-inset-bottom)); }
  .dining-title { margin: 20px; padding: 28px 24px; }
  .dining-title h1 { font-size: clamp(3.4rem, 7vw, 4rem); }
  .dining-cover { margin: 20px 20px 0 0; }
  .menu-controls { width: calc(100% - 24px); top: 75px; }
  .menu-controls>.wrap { padding-inline: 6px; }
  .menu-tabs { gap: 4px; justify-content: stretch; padding-block: 5px; }
  .menu-tabs a { min-height: 48px; padding: 12px 6px; flex: 1; justify-content: center; font-size: .78rem; }
  .category-mobile { gap: 20px; padding-inline: 8px; }
  .category-mobile a { min-height: 48px; font-size: .75rem; }
  .menu-content { padding: 20px; }
  .menu-layout { width: calc(100% - 24px); padding-top: 20px; }
  .menu-category { scroll-margin-top: 125px; }
  .dining-reservations .reservation-band { gap: 28px; padding: 18px; }
  .dining-reservations .reservation-band>div { padding: 8px; }
}
@media (max-width:600px) {
  .house-grid { gap: 18px; }
  .house-grid .experience-card { min-height: 300px; padding: 16px; }
  .house-grid .experience-card>div { padding: 16px; gap: 12px; }
  .house-grid .experience-card h3 { font-size: 2.35rem; }
  .reservation-band { padding: 26px 22px; }
  .cinema-calendar { padding: 14px; }
  .cinema-screening { grid-template-columns: 70px minmax(0,1fr); padding: 16px; gap: 14px; }
  .cinema-screening-detail h3 { font-size: 1.8rem; }
  .cinema-showtime { min-width: calc(50% - 3px); padding-inline: 5px; }
  .cinema-poster-title, .cinema-poster-status { margin-inline: 4px; }
  .agenda-event { padding: 12px; gap: 14px; }
  .site-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 32px - env(safe-area-inset-bottom)); inset: auto 8px calc(8px + env(safe-area-inset-bottom)); border-radius: 20px; }
  .artwork-grid figcaption { padding: 18px 8px 10px; }
  .gallery-item { padding: 7px; }
}
@media (max-width:560px) {
  .dining-opening { padding-bottom: 20px; }
  .dining-cover { margin: 14px 14px 0; }
  .dining-title { width: calc(100% - 28px); margin: 14px 14px 0; padding: 30px 20px; }
  .dining-title h1 { font-size: 3.7rem; }
  .dining-title p { font-size: .9rem; }
  .menu-item { gap: 16px; }
  .menu-item h3 { font-size: 1.8rem; }
  .menu-item p { font-size: .94rem; }
  .menu-price { font-size: .95rem; }
  .menu-price small { font-size: .68rem; max-width: 60px; }
}
@media (max-width:365px) {
  .menu-tabs a { font-size: .72rem; }
  .menu-content { padding: 18px 14px; }
  .cinema-screening { grid-template-columns: 60px minmax(0,1fr); gap: 10px; padding: 12px; }
  .cinema-screening-detail h3 { font-size: 1.65rem; }
  .cinema-showtime { width: 100%; min-height: 48px; }
  .house-grid .experience-card h3 { font-size: 2.1rem; }
}

.house-grid .experience-card:active { transform: scale(.985); transition-duration: 70ms; }
.cinema-calendar-grid button:active:not(:disabled) { transform: scale(.93); }
.cinema-calendar-grid button { transition: transform 160ms cubic-bezier(.2,.8,.2,1), background 150ms ease; }

/* Keep outlines inside scroll clips and preserve keyboard/touch access. */
.cinema-poster:focus-visible, .mobile-dock :focus-visible, .menu-tabs a:focus-visible,
.category-mobile a:focus-visible, .artwork-grid button:focus-visible,
.gallery-item button:focus-visible { outline-offset: -3px; }
@media (prefers-reduced-motion:reduce) {
  .house-grid .experience-card, .legacy-home .prog-card, .legacy-home .btn,
  .button, .icon-button, .chip, .menu-trigger, .cinema-motion-toggle,
  .cinema-showtime, .cinema-month-heading>button, .cinema-date-strip button,
  .segmented button { transition: opacity 120ms ease; }
  .house-grid .experience-card:hover, .house-grid .experience-card:active,
  .cinema-calendar-grid button:active:not(:disabled), .legacy-home .prog-card:hover,
  .legacy-home .btn:hover, .legacy-home .btn:active, .button:active,
  .icon-button:active, .chip:active, .menu-trigger:active,
  .cinema-motion-toggle:active, .cinema-showtime:active,
  .cinema-month-heading>button:active, .cinema-date-strip button:active,
  .segmented button:active { transform: none; }
}
@media (prefers-reduced-transparency:reduce), (prefers-contrast:more) {
  :root { --glass-fill: #471414; --glass-thick: #471414; --glass-photo: #471414; --glass-blur: none; }
  .site-dialog::backdrop { background: rgb(12 5 4 / 87%); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .legacy-home .btn { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .legacy-home .btn:not(.solid) { background: var(--glass-photo); }
}
@media (prefers-contrast:more) {
  :root { --glass-edge: #bba27c; --muted: #e9d9b7; }
  .menu-browser { --muted: var(--paper); }
  .menu-item p, .menu-footnote p, .menu-price small { color: var(--paper); }
  .legacy-home { --cream-dim: #e9dfb8; }
}

/* Home uses the same locally stored, current-film artwork as Cinema. */
.legacy-home #homeMarquee .poster { padding: 0; background: var(--maroon); }
.legacy-home #homeMarquee .poster img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
@media (prefers-reduced-motion:reduce) {
  .legacy-home #homeMarquee .poster[aria-hidden=true] { display: none; }
}