/* Day / night theme. The signature mark is the control. */

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f2e9db;
  --paper: #171411;
  --warm-white: #211d19;
  --clay: #d2694f;
  --olive: #9daa84;
  --blue: #83a9b8;
  --gold: #d4ac62;
  --muted: #bdae99;
  --muted-strong: #d0c1ad;
  --line: #39322c;
  --rule: #51473d;
}

html[data-theme="dark"] body {
  background: var(--paper);
  color: var(--ink);
}

.sticky-brand-cluster {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
}

.sticky-brand-cluster .sticky-brand {
  grid-column: auto;
  min-height: 44px;
}

.theme-toggle {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0;
  color: var(--clay);
  background: transparent;
  -webkit-tap-highlight-color: transparent;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

.theme-toggle:hover {
  border-color: color-mix(in srgb, currentColor 36%, transparent);
  background: color-mix(in srgb, currentColor 8%, transparent);
}

.theme-toggle:active {
  transform: scale(0.94);
}

.theme-toggle:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

.theme-toggle-icon {
  display: block;
  width: 24px;
  height: 24px;
  overflow: visible;
}

.theme-toggle-orbit,
.theme-toggle-crescent {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity 360ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.theme-toggle-orbit > circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.15;
}

.theme-toggle-dot,
.theme-toggle-crescent {
  fill: currentColor;
}

.theme-toggle-crescent {
  opacity: 0;
  transform: rotate(-70deg) scale(0.48);
}

html[data-theme="dark"] .theme-toggle-orbit {
  opacity: 0;
  transform: rotate(70deg) scale(0.42);
}

html[data-theme="dark"] .theme-toggle-crescent {
  opacity: 1;
  transform: rotate(0) scale(1);
}

html[data-theme="dark"] .masthead-nav {
  border-color: rgba(242, 233, 219, 0.16);
  background: rgba(23, 20, 17, 0.94);
}

html[data-theme="dark"] .sticky-brand-wordmark,
html[data-theme="dark"] .masthead-mark,
html[data-theme="dark"] .wordmark {
  filter: brightness(0) saturate(100%) invert(92%) sepia(9%) saturate(491%) hue-rotate(348deg) brightness(104%) contrast(90%);
}

html[data-theme="dark"] .mood-buttons button,
html[data-theme="dark"] .neighborhood-search,
html[data-theme="dark"] .filter-bar,
html[data-theme="dark"] .recommendation-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .archive-best-card {
  background: var(--warm-white);
}

html[data-theme="dark"] .site-v4 {
  --site-ink: #f2e9db;
  --site-paper: #171411;
  --site-cream: #211d19;
  --site-sand: #2d2721;
  --site-clay: #d2694f;
  --site-clay-dark: #b6543d;
  --site-olive: #30382f;
  --site-muted: #bdae99;
  --site-rule: #51473d;
}

html[data-theme="dark"] .site-v4 > .masthead-nav {
  border-bottom-color: rgba(242, 233, 219, 0.16);
  background: rgba(23, 20, 17, 0.94);
}

html[data-theme="dark"] .site-v4 > .masthead-nav .sticky-brand-wordmark {
  filter: brightness(0) saturate(100%) invert(92%) sepia(9%) saturate(491%) hue-rotate(348deg) brightness(104%) contrast(90%);
}

html[data-theme="dark"] .site-v4 > .site-footer {
  background: #100e0c;
  color: #f2e9db;
}

html[data-theme="dark"] .site-v4 > .site-footer .footer-tagline,
html[data-theme="dark"] .site-v4 > .site-footer .footer-tagline-text,
html[data-theme="dark"] .site-v4 > .site-footer .footer-links a {
  color: #c9bba7;
}

html[data-theme="dark"] .home-v4 {
  --majlis-ink: #f2e9db;
  --majlis-paper: #171411;
  --majlis-cream: #211d19;
  --majlis-sand: #2d2721;
  --majlis-thread: #d2694f;
  --majlis-thread-dark: #b6543d;
  --majlis-olive: #30382f;
  --majlis-muted: #bdae99;
  --majlis-rule: #51473d;
}

html[data-theme="dark"] .home-v4 .masthead-nav {
  border-color: rgba(242, 233, 219, 0.16);
  background: rgba(23, 20, 17, 0.94);
}

html[data-theme="dark"] .home-v4 .sticky-brand-wordmark {
  filter: brightness(0) saturate(100%) invert(92%) sepia(9%) saturate(491%) hue-rotate(348deg) brightness(104%) contrast(90%);
}

html[data-theme="dark"] .home-v4 .home-photo-caption,
html[data-theme="dark"] .home-v4 .home-ritual-photo-note,
html[data-theme="dark"] .home-v4 .home-proof-visual > p,
html[data-theme="dark"] .idea-v4 .idea-hero figcaption,
html[data-theme="dark"] .newsletter-v4 .newsletter-visual figcaption {
  color: #fffaf1;
  text-shadow: 0 1px 3px rgba(17, 13, 10, 0.9);
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  z-index: 1;
}

::view-transition-new(root) {
  z-index: 2;
}

@media (max-width: 760px) {
  .sticky-brand-cluster {
    gap: 0;
  }

  .theme-control-ready .sticky-brand-cluster .sticky-brand {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .theme-toggle,
  .theme-toggle-orbit,
  .theme-toggle-crescent {
    transition: none;
  }

  .theme-toggle:hover,
  .theme-toggle:active {
    transform: none;
  }
}