/* Official museum identity. Outlined SVGs preserve the supplied artwork.
   The requested azure is a surface color; darker ink keeps small text readable. */
:root {
  --brand-azure:#4aa0af;
  --brand-on-azure:#092b32;
  --brand-hover:#66b5c1;
  --paper:#f6f8f5;
  --surface:#ffffff;
  --ink:#203539;
  --muted:#566c70;
  --line:#d5e0de;
  --accent:#256977;
  --accent-soft:#e5f2f2;
  --green:#356b50;
  --serif:Georgia,'Times New Roman',serif;
}
[data-theme="dark"] {
  --paper:#13272c;
  --surface:#1e353b;
  --ink:#eef6f4;
  --muted:#b2c8cb;
  --line:#405c63;
  --accent:#89d1dc;
  --accent-soft:#29474f;
  --green:#a8d6b9;
}
html {background:var(--paper);color:var(--ink)}
.site-header {max-width:1440px;padding:22px 40px;gap:30px;min-height:128px}
.site-header .brand,.staff-header .brand {display:flex;align-items:center;gap:30px;min-width:0}
.brand-logo {display:block;width:222px;height:auto;flex-shrink:0}
.brand-description {display:block;width:205px;height:auto;padding-left:25px;border-left:1px solid #ccd9d7;box-sizing:content-box}
.header-right {gap:23px;flex-wrap:wrap;justify-content:flex-end}
.location-label {font-size:.6rem;color:var(--muted);letter-spacing:.1em;white-space:nowrap}
.language-switch {border-color:var(--line);background:var(--surface)}
.language-switch button {min-height:40px;color:var(--muted)}
.language-switch button.selected {background:var(--accent-soft);color:var(--accent);font-weight:600}
.loading-symbol {margin:0 auto 24px;object-fit:contain}
[data-theme="dark"] .site-header .brand {background:transparent;padding:0;border-radius:0}
.button.primary,.round-play,[data-theme="dark"] .button.primary,[data-theme="dark"] .round-play,
.opening-checkout>.button {
  background:var(--brand-azure);color:var(--brand-on-azure);border-color:#317784;font-weight:600;
}
.button.primary:hover:not(:disabled),.round-play:hover,.opening-checkout>.button:hover:not(:disabled) {background:var(--brand-hover);color:var(--brand-on-azure)}
.entry-card.featured,[data-theme="dark"] .entry-card.featured {background:var(--brand-azure);color:var(--brand-on-azure);border-color:#8fcbd4}
.entry-card.featured:hover {background:var(--brand-hover)}
.entry-card.featured p,.entry-card.featured .entry-tag {color:#143b43}
.entry-card {background:#fffffff2;color:#203539;border-radius:20px}
.entry-card:hover {background:#fff}
.entry-card p {color:#51676b}
.entry-card .entry-top {color:#426d76}
.entry-card.featured .entry-top {color:var(--brand-on-azure)}
.hero {background:#23434c}
.hero:before {background:linear-gradient(180deg,#102f3ac2,#12303bb3 42%,#102b34c9)}
.hero:after {background:linear-gradient(90deg,#12384438,transparent 35%,transparent 75%,#12384438)}
.hero-brand-symbol {position:absolute;left:6%;top:11%;width:clamp(92px,12vw,166px);height:auto;opacity:.66;pointer-events:none;z-index:0}
.hero-kicker {color:#e1f3f4}
.hero-divider {background:#cbe6e7a3}
.hero-foot {color:#e0eff0}
.hero-intro {color:#eef6f4}
.motion-toggle {background:#153943c9;border-color:#c5e6eb63;color:#effbfa}
.motion-toggle:hover {background:#225362}
.ambient-speck,.ambient-speck:nth-child(3n),[data-theme="dark"] .ambient-speck {background:#c2edf0;box-shadow:0 0 9px 2px #98dee733}
.ambient-streak {background:linear-gradient(180deg,transparent,#b7e4e9cc,transparent)}
.ambient-orbit {border-color:#aedce24d;border-bottom-color:transparent;border-left-color:transparent}
.opening-atmosphere .ambient-speck,[data-theme="dark"] .opening-atmosphere .ambient-speck {background:var(--brand-azure)}
.opening-atmosphere .ambient-streak {background:linear-gradient(180deg,transparent,#4aa0afaa,transparent)}
.opening-atmosphere .ambient-orbit {border-color:#4aa0af40;border-bottom-color:transparent}
.opening-hero {border-color:#4aa0af45;background:#25454c}
.opening-hero:after,[data-theme="dark"] .opening-hero:after {background:linear-gradient(90deg,#112f3bea,#153842a1 48%,#18394224)}
.opening-kicker,.opening-hero h1 em {color:#bfe6ec}
.opening-kicker>span {background:#98d3de;box-shadow:0 0 0 4px #98d3de20}
.opening-date {background:#eff8f4f7;color:#23434b;border-color:#cae2df}
.opening-day {color:#256977}
.opening-date>div>span,.opening-date>.icon {color:#486b72}
.opening-form {border-color:var(--line);box-shadow:0 18px 55px #1c4e5408}
.opening-form .slot:hover:not(:disabled):not(.selected) {border-color:var(--accent)}
.opening-form .slot.selected,[data-theme="dark"] .opening-form .slot.selected {background:var(--brand-azure);border-color:#317784;color:var(--brand-on-azure);box-shadow:none}
.opening-form .slot.selected strong {font-weight:700}
.opening-form .field input:focus {border-color:var(--accent);box-shadow:0 0 0 3px #4aa0af20}
.opening-form .field input::placeholder {color:var(--muted);opacity:.8}
.date-tile,[data-theme="dark"] .date-tile {background:#286978;color:#fff}
.bottom-nav,[data-theme="dark"] .bottom-nav {background:var(--surface);border-color:var(--line);box-shadow:0 8px 32px #0c3b4120}
.nav-item,[data-theme="dark"] .nav-item {color:var(--muted)}
.nav-item.active,[data-theme="dark"] .nav-item.active {background:var(--accent-soft);color:var(--accent)}
.nav-divider,[data-theme="dark"] .nav-divider {background:var(--line)}
.toggle input:checked+span {background:#256977}
.experience-brand {width:fit-content;background:transparent;padding:0;margin-bottom:26px}
.experience-brand img {display:block;width:196px;max-width:100%;height:auto}
.experience-dialog {box-shadow:0 24px 100px #16384012}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {outline-color:var(--accent)}
.qr-brand-logo {display:block;width:245px;max-width:100%;height:auto;margin:0 auto 24px}

/* Staff uses the same identity with a spacious, compact working layout. */
.staff-header {max-width:1500px;margin:auto;padding:20px 4%;border-color:var(--line)}
.staff-header .brand {gap:22px}
.staff-header .brand-logo {width:198px}
.staff-brand-label {max-width:130px;font-size:10px;line-height:1.8;letter-spacing:.12em;color:var(--muted);border-left:1px solid var(--line);padding-left:22px}
.staff-header-tools {align-items:center}
.staff-header .language-switch button {font-size:12px;padding:10px 12px}
.login-card {margin:48px auto;padding:36px;border-color:var(--line);background:var(--surface);box-shadow:0 18px 60px #16434b09}
.login-card h1 {font-size:36px;line-height:1.14}
.login-card p {color:var(--muted)}
.login-card input:focus {border-color:var(--accent)}
.eyebrow,.stat strong {color:var(--accent)}
.stat,.table-panel,.audio-panel {border-color:var(--line);background:var(--surface)}
.stat {padding:24px;border-top:3px solid var(--brand-azure)}
.badge {background:var(--accent-soft);color:var(--accent)}
.staff-tabs button[aria-pressed=true] {background:var(--brand-azure);color:var(--brand-on-azure);border-color:#317784}
.staff-tabs button {min-height:48px}
.staff-tabs {padding:0 4%;max-width:1500px;margin-bottom:0}
.audio-desk {padding:30px 4%;max-width:1500px}
.table-panel input,.table-panel select,.login-card input {border-color:var(--line);background:var(--surface);color:var(--ink)}
.table-panel th {background:var(--accent-soft);color:var(--accent)}
.table-panel td {border-color:var(--line)}
.reset-panel {background:var(--surface);margin-top:40px}
.reset-panel h2 {font-size:25px}
.staff-note {background:var(--accent-soft);border-radius:12px;padding:14px 16px;color:var(--muted)}
.qr-sheet {color:#203539}
@media(max-width:1100px) {
  .site-header {padding:20px 28px;gap:20px}
  .site-header .brand {gap:22px}
  .brand-logo {width:204px}
  .brand-description {width:180px;padding-left:20px}
  .header-right {gap:12px}
  .location-label {display:none}
}
@media(max-width:800px) {
  .site-header {display:grid;grid-template-columns:1fr;gap:14px;padding:20px 25px 16px}
  .site-header .brand {justify-content:center;gap:22px}
  .site-header .brand-logo {width:202px}
  .brand-description {width:174px;padding-left:20px}
  .header-right {justify-content:space-between;flex-wrap:nowrap;gap:10px}
  .site-header .location-label {display:inline-flex;align-items:center;gap:7px;font-size:.57rem}
  .header-right .language-switch {margin-left:auto}
  .header-right .language-switch button {min-height:38px;padding:8px 12px;font-size:.7rem}
  .hero-brand-symbol {top:16px;left:20px;width:56px;opacity:.9}
  .hero:before {background:linear-gradient(180deg,#102e3bbd,#102d38ad 45%,#112e36cc)}
  .staff-header {flex-wrap:wrap;gap:18px}
  .staff-header-tools {width:100%;justify-content:space-between!important}
}
@media(max-width:520px) {
  .site-header {padding:16px 19px 14px;gap:13px}
  .site-header .brand {gap:18px;justify-content:space-between}
  .site-header .brand-logo {width:48%;max-width:204px;flex-shrink:1}
  .brand-description {width:40%;max-width:174px;padding-left:16px}
  [data-theme="dark"] .site-header .brand {padding:0}
  .site-header .location-label {font-size:.54rem;letter-spacing:.06em}
  .hero-brand-symbol {width:38px;left:17px;top:16px;opacity:.85}
  .hero-kicker {max-width:75%;margin-left:auto;margin-right:auto;line-height:1.6}
  .experience-brand {padding:0;margin-bottom:22px}
  .experience-brand img {width:174px}
  .staff-header .brand-logo {width:176px}
  .staff-brand-label {font-size:9px;padding-left:15px;max-width:120px}
  .staff-header .brand {gap:15px}
  .login-card {padding:25px;margin:28px auto}
  .login-card h1 {font-size:31px}
  .login-card input {font-size:16px}
  #staff-user {gap:9px;flex-wrap:wrap;justify-content:flex-end}
  .dashboard {padding-top:28px}
}
@media(max-width:700px) {
  .table-scroll .staff-booking-table {min-width:0;display:block;padding:0 16px 16px}
  .staff-booking-table thead {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .staff-booking-table tbody {display:block}
  .staff-booking-table tr {display:grid;grid-template-columns:1fr 1fr;margin-bottom:14px;border:1px solid var(--line);border-radius:16px;overflow:hidden}
  .staff-booking-table td {display:block;min-width:0;padding:14px 16px;font-size:15px;overflow-wrap:anywhere}
  .staff-booking-table td:first-child {grid-column:1/-1;border:0;background:var(--paper)}
  .staff-booking-table td:first-child strong {font-size:18px}
  .staff-booking-table td:last-child {display:flex;align-items:flex-end;justify-content:flex-end}
  .staff-booking-table td:nth-child(2):before,.staff-booking-table td:nth-child(3):before {content:attr(data-label);display:block;font-size:11px;letter-spacing:.06em;color:var(--muted);margin-bottom:8px}
  .staff-booking-table td:last-child .button {width:100%}
  .table-meta {padding-top:5px}
  .audio-desk {padding-top:25px}
}
@media(max-width:360px) {
  .site-header {padding-left:14px;padding-right:14px}
  .site-header .brand {gap:12px}
  .brand-description {padding-left:12px}
  .site-header .location-label {font-size:.46rem}
  .staff-header .brand-logo {width:160px}
  .staff-brand-label {font-size:8px}
}
@media print {
  .qr-brand-logo {width:235px}
  html {background:white}
}