/* Monochrome dark theme. Architectural images keep their original colors. */
:root {
  --paper: #000;
  --paper-dark: #000;
  --ink: #fff;
  --muted: #c4c4c4;
  --line: #383838;
  --accent: #fff;
  color-scheme: dark;
}

body, .studio, .residence-feature, .works, .services, .contact,
.site-footer, .approach, .appointment-intro, .appointment-form-area,
.noscript-note, dialog, .film-dialog, .project-gallery, .project-gallery > img {
  background: #000;
  color: #fff;
}

.site-header, .journey-stage { color: #fff; }
.site-header.is-scrolled { background: rgb(0 0 0 / 72%); }
.site-header.is-light {
  background: rgb(0 0 0 / 96%);
  color: #fff;
  box-shadow: 0 1px 0 var(--line);
}
.menu-open .site-header, .mobile-menu { background: #000; color: #fff; }
.journey, .journey-stage { background: #000; }

/* Both marks use the existing transparent version of the supplied logo. */
.logo-crop img,
.brand .logo-crop img,
.site-header.is-light .brand .logo-crop img,
.menu-open .site-header .brand .logo-crop img,
.footer-wordmark .logo-crop img {
  filter: none;
  mix-blend-mode: normal;
}
.footer-wordmark > span, .brand-dot { color: #fff; }

.solid-button, .outline-button {
  background: #000;
  color: #fff;
  border: 1px solid #fff;
}
.solid-button:hover, .outline-button:hover { background: #1b1b1b; }
.header-appointment, .is-light .header-appointment {
  color: #fff;
  border-color: rgb(255 255 255 / 65%);
}
.header-appointment:hover, .is-light .header-appointment:hover {
  background: rgb(255 255 255 / 10%);
}
.text-link, .text-link.light { border-color: rgb(255 255 255 / 60%); }
.social-row:hover { color: #fff; border-color: #fff; }
.project-open, .dialog-close, .gallery-arrow {
  background: #000;
  color: #fff;
  border: 1px solid rgb(255 255 255 / 65%);
}
.dialog-close:hover, .gallery-arrow:hover { background: #1b1b1b; }
.gallery-count { background: rgb(0 0 0 / 80%); color: #fff; }
.play-icon { border-color: rgb(255 255 255 / 55%); }

.studio-description > p + p, .studio-principles span:before,
.approach-content > .eyebrow, .approach-accordion p, .step-number,
.appointment-intro > p:not(.eyebrow), .appointment-note,
.form-note, .optional, .footer-bottom, .mobile-menu > .eyebrow,
.menu-foot, .mini-mark {
  color: var(--muted);
}
.footer-bottom { border-top-color: var(--line); }
.approach-accordion details, .approach-accordion details:last-child {
  border-color: var(--line);
}
.mobile-menu > a, .mobile-menu > button { border-bottom-color: var(--line); }

input, textarea, select {
  background: transparent;
  color: #fff;
  border-bottom-color: #777;
  caret-color: #fff;
  accent-color: #fff;
  color-scheme: dark;
}
select option, select optgroup { background: #000; color: #fff; }
input::placeholder, textarea::placeholder { color: #b8b8b8; }
.request-ready > textarea {
  background: #000;
  color: #fff;
  border: 1px solid #555;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px #000 inset;
  caret-color: #fff;
}
dialog { box-shadow: 0 0 0 1px #454545, 0 30px 100px #000a; }
dialog::backdrop { background: rgb(0 0 0 / 76%); }

.moment, .image-quote, .detail-caption { color: #fff; }
.hero-description, .interior-copy > p:not(.eyebrow),
.project-caption > #scene-subtitle, .journey-tools { color: rgb(255 255 255 / 85%); }
.journey-track { background: rgb(255 255 255 / 30%); }
.journey-track > span, .motion-dot,
.accordion-plus:before, .accordion-plus:after { background: #fff; }
.journey-tools button[aria-pressed=false] .motion-dot { background: transparent; }
.round-arrow { border-color: rgb(255 255 255 / 60%); }

button:focus-visible, a:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline-color: #fff;
}
::selection { background: #383838; color: #fff; }