/* Night mode. html.dark is set before the page draws (inline script in <head>): it follows the
   OS light/dark setting, unless the visitor picked a mode (localStorage "theme"). */
html.dark {
  color-scheme: dark;
  --black: #ededed;          /* main text */
  --grey: #9a9fa6;           /* secondary text */
  --dim-grey: #9a9fa6;
  --white: #1e1e1e;
  --ghost-white: #2a2a2a;
  --gainsboro: #2a2a2a;      /* hover fill */
  --bone-white: #141414;     /* page background */
  --dk-bg: #141414; --dk-card: #1e1e1e; --dk-line: #2a2a2a; --dk-line-strong: #333; --dk-soft: #7d838c;
}
html.dark, html.dark body, html.dark .body, html.dark .body-project, html.dark .page-horizontal,
html.dark .left_navbar, html.dark .project-main, html.dark .right_a, html.dark .block-about { background-color: var(--dk-bg); }
html.dark body { color: var(--black); }

/* Lines: sidebar divider, page frame. */
html.dark .left_navbar { border-left-color: var(--dk-line-strong); border-right-color: var(--dk-line-strong); }
html.dark .page-horizontal::after { background: var(--dk-line-strong); }

/* Text. */
html.dark h1, html.dark h2, html.dark h3, html.dark .h3, html.dark .heading-huge, html.dark .heading-huge-centered,
html.dark .heading-2, html.dark .project-nav-title, html.dark .contact-card-label, html.dark .card-arrow { color: var(--black); }
html.dark .body-text, html.dark .heading-3-story, html.dark .role-card-content p, html.dark .heading-33,
html.dark .fancy-font, html.dark .project-nav-label { color: var(--grey); }
html.dark .project-subtitle, html.dark .contact-card-desc, html.dark .site-copyright { color: var(--dk-soft); }
html.dark .body-text a, html.dark .heading-3-story a, html.dark p a, html.dark .body-text a:hover, html.dark p a:hover { color: var(--black); }

/* Cards and boxes. */
html.dark .space-conclusion, html.dark .contact-card:hover, html.dark .contact-card:focus-visible,
html.dark .project-nav-link:hover, html.dark .project-nav-link:focus-visible,
html.dark .block-about .div-block-42 { border-color: var(--dk-line); }
html.dark .space-conclusion { background-color: var(--dk-card); }
html.dark .contact-card:hover, html.dark .contact-card:focus-visible,
html.dark .project-nav-link:hover, html.dark .project-nav-link:focus-visible { background-color: var(--dk-card); }
@media (hover: none), screen and (max-width: 767px) {
  html.dark .contact-card, html.dark .project-nav-link { background-color: var(--dk-card); border-color: var(--dk-line); }
}
@media screen and (max-width: 767px) { html.dark .block-about .div-block-42 { background-color: var(--dk-card); } }
html.dark .button-secondary-medium { color: var(--black); border-color: #555; }
html.dark .button-secondary-medium:hover { background-color: var(--dk-line); border-color: var(--dk-line); color: var(--black); }

/* Menu items, logo, project list, caret: invert, so black pills become white pills with dark
   text and black icons become white (an exact mirror of light mode, in every state). */
html.dark .left_navbar .button-ghost, html.dark .div-block-36 .home, html.dark .phone-logo img,
html.dark .left_navbar .nav-caret, html.dark .top-nav-btn svg { filter: invert(1) hue-rotate(180deg); }
@media screen and (min-width: 768px) { html.dark .nav-sub-item { filter: invert(1) hue-rotate(180deg); } }
/* Inside the inverted items keep the light-mode colours (the inversion does the flip). */
html.dark .left_navbar .button-ghost, html.dark .left_navbar .nav-caret,
html.dark .div-block-36 .home { --black: #27282a; --grey: #585e68; --gainsboro: #dddee2; color: #27282a; }
html.dark .left_navbar .button-ghost .learn-more-cta { color: #27282a; }
html.dark .left_navbar .button-ghost.w--current .learn-more-cta { color: #fff; }
@media screen and (max-width: 767px) {
  html.dark .navbar-mobile .nav-group.is-open .button-ghost .learn-more-cta,
  html.dark .nav-options-wrap.is-open > .button-ghost .learn-more-cta { color: #fff; }
  html.dark .navbar-mobile.has-open-options > .button-ghost.w--current .learn-more-cta,
  html.dark .navbar-mobile.has-open-group > .button-ghost.w--current .learn-more-cta,
  html.dark .navbar-mobile.has-open-options .nav-options-wrap > .button-ghost.w--current .learn-more-cta,
  html.dark .navbar-mobile.has-open-group .nav-options-wrap > .button-ghost.w--current .learn-more-cta { color: #27282a; }
}
@media screen and (min-width: 768px) {
  html.dark .left_navbar .nav-sub-item { --black: #27282a; --grey: #585e68; --gainsboro: #dddee2; }
  html.dark .left_navbar .nav-sub-item { color: #585e68; }
  html.dark .left_navbar .nav-sub-item:hover { color: #27282a; }
  html.dark .left_navbar .nav-sub-item.w--current { color: #fff; }
}
html.dark .phone-logo.w--current, html.dark .is-scrolled .phone-logo.w--current { background-color: #fff; border-color: #fff; }
html.dark .phone-logo.w--current img { filter: none; }
html.dark .top-nav-btn { color: var(--black); }

/* Wisdom Widget illustrations: white lines; the peace hand's red flower stays red. */
html.dark .wisdom-module img { filter: invert(1) hue-rotate(180deg); }

/* Phones: frosted-glass menu, logo/X discs and pop-ups in dark glass. */
@media screen and (max-width: 767px) {
  html.dark .navbar-mobile, html.dark .is-scrolled .phone-logo:not(.w--current), html.dark .is-scrolled .top-nav-btn,
  html.dark .nav-option, html.dark .nav-sub-item {
    background-color: rgba(30, 30, 30, .72); border-color: rgba(255, 255, 255, .08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
  }
  html.dark .navbar-mobile .learn-more-cta { text-shadow: none; }
  html.dark .nav-option, html.dark .nav-sub-item { color: var(--black); }
  html.dark .nav-sub-item.w--current { background-color: #fff; color: #141414; }
}

/* Images: slightly dimmed so bright white pictures don't glare. */
html.dark .thumbnail-image, html.dark .image-card, html.dark .story-image, html.dark .image-12,
html.dark .block-image-large img, html.dark .block-image-medium img, html.dark .w-dyn-item img,
html.dark .block-about-cobra img, html.dark .div-block-54 img { filter: brightness(.9); }
html.dark .contact-card-icon { filter: invert(1); }

/* Light/dark toggle (hidden for now). */
.theme-toggle { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--black); cursor: pointer; }
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { background-color: var(--gainsboro); }
html.dark .project-tag { border-color: var(--dk-line-strong); color: #b4b9c0; }
html.dark .project-tag.is-type { background: #ededed; border-color: #ededed; color: #141414; }