@import url('/assets/brand/shapedsi-v1/evening-specialists.css?v=01fb383d2dd5') layer(evening) screen;

/* Both ends of a public-page navigation share the same optional transition. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

@layer evening {
@media screen {

/* Evening is a site preference, not just a different room photograph.
   Keep photographs, films and model canvases intact; theme their real UI. */
html[data-si-mood="night"] {
  --evening-page: #30221b;
  --evening-surface: #3b2a21;
  --evening-raised: #493226;
  --evening-button: #65432e;
  --evening-hover: #7b5238;
  --evening-text: #fff3e2;
  --evening-muted: #dfc8b1;
  --evening-accent: #efbf91;
  --evening-border: #9b755b;
  color-scheme: dark !important;
  background-color: var(--evening-page) !important;
  scrollbar-color: var(--evening-border) var(--evening-page);
}

html[data-si-mood="night"] body {
  --si-paper: var(--evening-page) !important;
  --si-cream: var(--evening-surface) !important;
  --si-white: var(--evening-raised) !important;
  --si-linen: var(--evening-surface) !important;
  --si-sand: var(--evening-raised) !important;
  --si-stone: var(--evening-raised) !important;
  --si-ink: var(--evening-text) !important;
  --si-muted: var(--evening-muted) !important;
  --si-clay: var(--evening-accent) !important;
  --si-cocoa: var(--evening-accent) !important;
  --si-espresso: var(--evening-button) !important;
  --si-line: var(--evening-border) !important;
  --bg: var(--evening-page) !important;
  --bg2: var(--evening-surface) !important;
  --bg3: var(--evening-raised) !important;
  --bg-dark: var(--evening-page) !important;
  --paper: var(--evening-page) !important;
  --cream: var(--evening-surface) !important;
  --surface: var(--evening-surface) !important;
  --surface-2: var(--evening-raised) !important;
  --panel: var(--evening-surface) !important;
  --panel2: var(--evening-raised) !important;
  --card-bg: var(--evening-surface) !important;
  --ink: var(--evening-text) !important;
  --text: var(--evening-text) !important;
  --text-primary: var(--evening-text) !important;
  --text-secondary: var(--evening-muted) !important;
  --muted: var(--evening-muted) !important;
  --text2: var(--evening-muted) !important;
  --t1: var(--evening-text) !important;
  --t2: var(--evening-muted) !important;
  --t3: var(--evening-muted) !important;
  --t4: var(--evening-muted) !important;
  --primary: var(--evening-button) !important;
  --primary-ink: var(--evening-text) !important;
  --accent-bg: var(--evening-raised) !important;
  --accent-d: var(--evening-raised) !important;
  --blue-d: var(--evening-raised) !important;
  --green-d: var(--evening-raised) !important;
  --red-d: var(--evening-raised) !important;
  --accent: var(--evening-accent) !important;
  --accent-color: var(--evening-accent) !important;
  --gold: var(--evening-accent) !important;
  --lime: var(--evening-raised) !important;
  --green: var(--evening-button) !important;
  --border: var(--evening-border) !important;
  --line: var(--evening-border) !important;
  --line2: var(--evening-border) !important;
  --border2: var(--evening-border) !important;
  background-color: var(--evening-page) !important;
  color: var(--evening-text) !important;
  color-scheme: dark !important;
}

/* The shared reading pages also contain retained, independently styled cards. */
html[data-si-mood="night"] body :is(main, section, article, aside, header, footer, form, dialog, fieldset,
  .si-content-main, .si-content-section, .si-page-hero, .si-room-utility, .room-utility,
  .si-room-directory, .sv-jump, .sp-jump, .si-mobile-menu, .si-content-header,
  .si-section, .si-process, .si-more, .si-collection, .sp-statement) {
  background-color: var(--evening-page) !important;
  color: var(--evening-text) !important;
  border-color: var(--evening-border) !important;
}

html[data-si-mood="night"] body :is(.si-feature, .si-feature-copy, .si-meet, .sv-tint,
  .sv-contact, .sv-founder, .sv-native-form, .lp-form, .lp-panel, .card, .panel,
  .service-card, .product-card, .feature-card, .glass-card, .cta-panel, .cta-box,
  .cta-band, .sp-note, .sp-offer, .sp-package, .sp-window, .sp-window-bar,
  .badge, .pill, .tag, .status-label,
  .sp-window-bar span, .si-book-dialog, .meeting-card, .si-journal-card, .si-page-visual figcaption,
  .si-room-lighting button[aria-pressed=true], .room-light button[aria-pressed=true]) {
  background-color: var(--evening-surface) !important;
  color: var(--evening-text) !important;
  border-color: var(--evening-border) !important;
}

/* Text uses an explicit foreground, including old inline and !important skins. */
html[data-si-mood="night"] body :is(h1, h2, h3, h4, h5, h6, summary, dt, strong, label, legend) {
  color: var(--evening-text) !important;
  -webkit-text-fill-color: currentColor !important;
}
html[data-si-mood="night"] body :is(p, li, dd, small, figcaption,
  .si-eyebrow, .eyebrow, .kicker, .subtitle, .description, .muted, .si-location,
  .sp-lede, .sp-meta, .sp-crumbs, .si-small, .si-footer-bottom) {
  color: var(--evening-muted) !important;
}
html[data-si-mood="night"] body :is(h1, h2, h3) em,
html[data-si-mood="night"] body :is(.grad, .gradient-text, .accent, .hl) {
  color: var(--evening-accent) !important;
  -webkit-text-fill-color: currentColor !important;
}
html[data-si-mood="night"] body a {
  color: var(--evening-text) !important;
  border-color: var(--evening-border) !important;
}

/* Brown controls with cream text in both primary and secondary variants.
   In particular, never inherit a light button foreground onto a light surface. */
html[data-si-mood="night"] body :is(button, [role=button], input[type=submit], input[type=button], input[type=reset],
  .si-button, .button, .btn, .btn-primary, .btn-secondary, .btn-outline, .btn-ghost, .btn-gold,
  .p-button, .guide-btn, .cta-pill, .plan-cta, .nav-cta,
  .cta-button, .primary-button, .lp-button, .form-submit, .lp-submit,
  .si-room-link, .si-books-caption, .coastal-room, .room-plaque, .room-way, .a9-pin, .motion-link,
  .mobile-dock a, .btn-book, .btn-phone) {
  background-color: var(--evening-button) !important;
  color: var(--evening-text) !important;
  -webkit-text-fill-color: currentColor !important;
  border-color: var(--evening-border) !important;
}
html[data-si-mood="night"] body :is(.si-outline, .btn-secondary, .btn-outline, .btn-ghost,
  .si-button-secondary, .si-menu-button) {
  background-color: var(--evening-surface) !important;
  color: var(--evening-text) !important;
}
html[data-si-mood="night"] body :is(.si-button, .button, .btn, .btn-primary, .btn-secondary,
  .btn-outline, .btn-ghost, .btn-gold, .lp-button, .p-button, .guide-btn, .cta-pill, .plan-cta, .nav-cta) { background-image: none !important; }
html[data-si-mood="night"] body :is(button, [role=button], .si-button, .button, .btn,
  .p-button, .guide-btn, .cta-pill, .plan-cta, .nav-cta,
  .si-room-link, .si-books-caption, .coastal-room, .room-plaque, .room-way, .a9-pin, .motion-link):is(:hover, [aria-pressed=true], [aria-selected=true]) {
  background-color: var(--evening-hover) !important;
  color: var(--evening-text) !important;
  border-color: var(--evening-accent) !important;
}
html[data-si-mood="night"] body :is(.si-button, .button, .btn)::before {
  background-color: var(--evening-hover) !important;
}
html[data-si-mood="night"] body :is(button, [role=button], .si-button, .button, .btn,
  .p-button, .guide-btn, .cta-pill, .plan-cta, .nav-cta,
  .si-room-link, .coastal-room, .room-plaque, .a9-pin) :is(span, small, strong, i) {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}
html[data-si-mood="night"] body .si-menu-button span { background-color: var(--evening-text) !important; }
/* A full-frame play control must not paint over the website or film poster. */
html[data-si-mood="night"] body button.sp-frame-cover,
html[data-si-mood="night"] body button.sp-frame-cover:is(:hover, [aria-pressed=true], [aria-selected=true]) {
  background-color: transparent !important;
}
html[data-si-mood="night"] body .sp-frame-cover > span {
  background-color: var(--evening-button) !important;
  color: var(--evening-text) !important;
}
html[data-si-mood="night"] body .si-room-copy { isolation: isolate; }
html[data-si-mood="night"] body .si-room-copy::before {
  content: "";
  position: absolute;
  inset: -25px -22px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, #30221be8 0%, #30221bc7 75%, #30221b00 100%);
  border-radius: 18px;
}
@media (max-width: 900px) {
  html[data-si-mood="night"] body .si-room-copy { background-color: var(--evening-page) !important; }
  html[data-si-mood="night"] body .si-room-copy::before { display: none; }
}

html[data-si-mood="night"] body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]):not([type=reset]), select, textarea, option) {
  background-color: var(--evening-surface) !important;
  color: var(--evening-text) !important;
  border-color: var(--evening-border) !important;
  -webkit-text-fill-color: currentColor !important;
}
html[data-si-mood="night"] body :is(input, textarea)::placeholder { color: var(--evening-muted) !important; opacity: 1; }
html[data-si-mood="night"] body :is(input[type=checkbox], input[type=radio], input[type=range], progress) { accent-color: var(--evening-accent); }
html[data-si-mood="night"] body :is(table, th, td, pre, code) { background-color: var(--evening-surface) !important; color: var(--evening-text) !important; border-color: var(--evening-border) !important; }
html[data-si-mood="night"] body :focus-visible { outline-color: var(--evening-accent) !important; }
html[data-si-mood="night"] ::selection { background: var(--evening-hover); color: var(--evening-text); }
html[data-si-mood="night"] dialog::backdrop { background: #21150fce; }

}
}