/* theme.css — day/night mode for core site pages (html.theme-core) */

/* ── Semantic tokens ───────────────────────────────────────────── */
html.theme-core {
  --hero-inset: 1.5rem;
  --nav-chrome-offset: 0.5rem;
  --nav-chrome-top: 0.75rem;
  --site-bg: #000;
  --site-fg: #fff;
  --site-fg-muted: #9a9a9f;
  --hero-link-muted: rgba(255, 255, 255, 0.48);
  --hero-link-hover: rgba(255, 255, 255, 0.85);
  --hero-link-hover-bg: rgba(255, 255, 255, 0.035);
  --hero-fg: #fff;
  --hero-fg-muted: rgba(255, 255, 255, 0.72);
  --glass-tint: rgba(14, 14, 18, 0.60);
  --glass-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  /* works section sits on a hard solid background now (the hero video no
     longer scrolls under it), so cards use a proper surface again */
  --card-surface: rgba(16, 16, 22, 0.44);
  --card-surface-strong: rgba(14, 14, 18, 0.6);
  --card-surface-identity: rgba(9, 9, 13, 0.76);
  /* hero glass tiles share the navbar's glass recipe (--glass-tint /
     --glass-shadow + the same data-glass lens); rim matches the project cards */
  --hero-tile-border: var(--card-border);
  --card-border: rgba(255, 255, 255, 0.1);
  --card-border-hover: rgba(255, 255, 255, 0.18);
  --card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 14px 34px rgba(0, 0, 0, 0.5);
  --card-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 20px 48px rgba(0, 0, 0, 0.6);
  /* the frame always matches the page so hero -> works blends seamlessly */
  --hero-inset-bg: var(--site-bg);
  --footer-bg: #000;
  --footer-border: rgba(255, 255, 255, 0.08);
  --footer-fg: #fff;
  --footer-fg-muted: rgba(255, 255, 255, 0.72);
  --pill-bg: #16161a;
  --pill-fg: rgba(255, 255, 255, 0.82);
  --pill-border: rgba(255, 255, 255, 0.12);
  --pill-active-bg: #fff;
  --pill-active-fg: #111;
  --pill-active-count: rgba(0, 0, 0, 0.45);
  --tag-fg: rgba(255, 255, 255, 0.78);
  --tag-bg: rgba(255, 255, 255, 0.08);
  --tag-border: rgba(255, 255, 255, 0.14);
  --connect-wall-opacity: 1;
  color-scheme: dark;
}

/* home inherits the default --nav-chrome-top like every other page — the
   old inset-frame gap (and its nav-compact collapse) is gone with the frame */

@media screen and (max-width: 767px) {
  html.theme-core {
    --hero-inset: 1.25rem;
  }
}

html.theme-core.home .div-block-9 {
  --hero-pad: 118px;
}

html.theme-core.day-mode {
  --site-bg: #f5f5f7;
  --site-fg: #111;
  --site-fg-muted: #6e6e73;
  --hero-link-muted: rgba(15, 17, 21, 0.55);
  --hero-link-hover: rgba(15, 17, 21, 0.9);
  --hero-link-hover-bg: rgba(255, 255, 255, 0.32);
  --hero-fg: #14161a;
  --hero-fg-muted: rgba(20, 22, 26, 0.62);
  /* barely-there fill: the liquid-glass lens carries the material, the
     tint only lifts legibility a touch */
  --glass-tint: rgba(255, 255, 255, 0.16);
  --glass-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
  --card-surface: rgba(255, 255, 255, 0.85);
  --card-surface-strong: rgba(255, 255, 255, 0.92);
  --card-surface-identity: rgba(255, 255, 255, 0.94);
  --hero-tile-border: var(--card-border);
  --card-border: rgba(0, 0, 0, 0.08);
  --card-border-hover: rgba(0, 0, 0, 0.14);
  --card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 28px rgba(0, 0, 0, 0.08);
  --card-shadow-hover: inset 0 1px 0 #fff, 0 16px 40px rgba(0, 0, 0, 0.12);
  --footer-bg: #f5f5f7;
  --footer-border: rgba(0, 0, 0, 0.08);
  --footer-fg: #111;
  --footer-fg-muted: rgba(0, 0, 0, 0.62);
  --pill-bg: #fff;
  --pill-fg: rgba(0, 0, 0, 0.78);
  --pill-border: rgba(0, 0, 0, 0.1);
  --pill-active-bg: #111;
  --pill-active-fg: #fff;
  --pill-active-count: rgba(255, 255, 255, 0.65);
  --tag-fg: rgba(0, 0, 0, 0.72);
  --tag-bg: rgba(0, 0, 0, 0.05);
  --tag-border: rgba(0, 0, 0, 0.1);
  /* real macOS day desktop: wallpaper at full strength, light window chrome */
  --connect-wall-opacity: 1;
  color-scheme: light;
}

/* ── Global body + footer ────────────────────────────────────────── */
/* the body box is shorter than the document on some pages, so the html
   canvas color must be themed too or day mode shows black past the fold */
html.theme-core {
  background: var(--site-bg) !important;
  transition: background-color 0.35s ease;
}

html.theme-core .body,
html.theme-core body {
  background: var(--site-bg) !important;
  color: var(--site-fg);
  transition: background-color 0.35s ease, color 0.35s ease;
}

html.theme-core .site-footer {
  background: var(--footer-bg);
  border-top-color: var(--footer-border);
  color: var(--footer-fg);
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

html.theme-core.day-mode .site-footer__headline,
html.theme-core.day-mode .site-footer__cta {
  color: var(--footer-fg);
}

html.theme-core.day-mode .site-footer__eyebrow {
  color: var(--site-fg-muted);
}

html.theme-core.day-mode .site-footer__email {
  color: var(--footer-fg-muted);
  border-bottom-color: rgba(0, 0, 0, 0.18);
}

html.theme-core.day-mode .site-footer__email:hover {
  color: var(--footer-fg);
  border-bottom-color: rgba(0, 0, 0, 0.45);
}

html.theme-core.day-mode .site-footer__col-title {
  color: rgba(0, 0, 0, 0.38);
}

html.theme-core.day-mode .site-footer__col a {
  color: var(--footer-fg-muted);
}

html.theme-core.day-mode .site-footer__col a:hover {
  color: var(--footer-fg);
}

html.theme-core.day-mode .site-footer__meta {
  border-top-color: var(--footer-border);
  color: rgba(0, 0, 0, 0.4);
}

html.theme-core.day-mode .site-footer__meta a {
  color: rgba(0, 0, 0, 0.4);
}

html.theme-core.day-mode .site-footer__meta a:hover {
  color: var(--footer-fg);
}

/* footer CONNECT pill is white-on-transparent by default */
html.theme-core.day-mode .site-footer__inner .button,
html.theme-core.day-mode .site-footer__inner .button .text-size-xsmall {
  color: #111;
  border-color: rgba(0, 0, 0, 0.4);
}

html.theme-core.day-mode .site-footer__inner .button:hover {
  color: #000;
  border-color: rgba(0, 0, 0, 0.65);
}

html.theme-core.day-mode .site-footer__links a {
  color: rgba(0, 0, 0, 0.55);
}

html.theme-core.day-mode .site-footer__links a:hover {
  color: #000;
}

html.theme-core.day-mode .site-footer__dot {
  color: rgba(0, 0, 0, 0.22);
}

html.theme-core.day-mode .site-footer__meta .site-footer__links a {
  color: rgba(0, 0, 0, 0.4);
}

html.theme-core.day-mode .site-footer__meta .site-footer__links a:hover {
  color: #000;
}

/* ── Nav + theme toggle ────────────────────────────────────────── */
/* Day mode no longer forces dark nav chrome: the footage behind the nav
   is dark in both themes, so the nav stays white-first and the
   nav-on-light luminance sampler flips it dark over light sections
   (same mechanic as night mode). */

/* connect: the wallpaper sky stays dark behind the chrome even in day
   mode, so nav copy + the window label read white there, like night */
html.theme-core.day-mode body.connect-page .site-nav-brand .text-block-4,
html.theme-core.day-mode body.connect-page .button.hide-mobile-portrait.nav-icon-btn,
html.theme-core.day-mode body.connect-page .about-gif-button.nav-icon-btn,
html.theme-core.day-mode body.connect-page .menu-button.site-nav-toggle {
  color: #fff;
}

html.theme-core.day-mode body.connect-page .about-gif-button.nav-icon-btn {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

html.theme-core.day-mode body.connect-page .nav-icon-btn .nav-btn-icon {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

html.theme-core.day-mode body.connect-page .mail-window-label {
  color: #fff;
}

html.theme-core.day-mode .section-4 .glass-effect-tint {
  background-color: var(--glass-tint) !important;
}

html.theme-core.day-mode .section-4 {
  box-shadow: var(--glass-shadow) !important;
}

/* ── Nav chrome + theme tile ───────────────────────────────────── */
#boot-screen ~ .site-nav-chrome {
  opacity: 0 !important;
  pointer-events: none;
}

/* The chrome is the one fixed element; the nav island and the theme tile
   sit inside it as siblings so the toggle reads as part of the navbar. */
.site-nav-chrome {
  position: fixed;
  top: calc(var(--nav-chrome-top, 0.75rem) + env(safe-area-inset-top, 0px));
  z-index: 2147483647;
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  pointer-events: none;
  transition: transform 0.45s cubic-bezier(0.34, 1.2, 0.4, 1), top 0.4s cubic-bezier(0.34, 1.2, 0.4, 1), opacity 0.5s ease-in-out;
}

.site-nav-chrome > * {
  pointer-events: auto;
}

/* modal views (resume PDF window) sit above the chrome: while one is open
   the navbar drops beneath the modal backdrop instead of stacking on top */
html.resume-modal-open .site-nav-chrome {
  z-index: 1400000;
}

.site-nav-chrome .navbar-no-shadow.section-4 {
  /* relative (not static) so the absolute glass layers keep anchoring to the island */
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  flex: 0 1 auto;
  width: auto !important;
}

.site-theme-switch--vertical {
  flex: 0 0 auto;
  /* match the nav island's height so the tile reads as part of the cluster */
  align-self: stretch;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}

@media screen and (max-width: 991px) {
  /* No transform here: the mobile nav menu is a fixed full-screen overlay
     inside the navbar, and a transformed ancestor would trap it. */
  .site-nav-chrome {
    left: 0;
    right: 0;
    margin: 0 auto;
    /* roomier side gutters on phones/tablets */
    width: calc(100% - 2.5rem);
    max-width: 740px;
  }

  .site-nav-chrome .navbar-no-shadow.section-4 {
    flex: 1 1 auto;
    max-width: none !important;
  }
}

@media screen and (min-width: 992px) {
  .site-nav-chrome {
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
    max-width: calc(100% - 1rem);
  }

  html.nav-compact .site-nav-chrome {
    transform: translateX(-50%) scale(0.96);
  }

  /* .section-3 is justify-content: space-between, so a generous min-width
     stretches the island and lets the brand + buttons breathe */
  .site-nav-chrome .navbar-no-shadow.section-4 {
    min-width: min(720px, calc(100vw - 12rem));
    max-width: min(780px, calc(100vw - 8rem));
  }
}

/* ── Liquid glass day/night switch ─────────────────────────────── */
/* The track shares the nav island's tint so the tile reads as part of
   the navbar cluster (overrides the generic liquid-glass--track fill). */
.site-theme-switch .liquid-glass--track > .glass-effect-tint {
  background-color: var(--glass-tint, rgba(14, 14, 18, 0.6)) !important;
}

/* Day thumb is the same material as the bento tiles — thin tint + quiet
   shine, lens does the work — not a solid white puck. (Night keeps the
   brighter thumb: it must read against the dark track.) */
html.theme-core.day-mode .site-theme-switch .liquid-glass--thumb > .glass-effect-tint {
  background-color: rgba(255, 255, 255, 0.24) !important;
}

html.theme-core.day-mode .site-theme-switch .liquid-glass--thumb > .glass-effect-shine {
  box-shadow:
    inset -1px -1px 1px 0 rgba(255, 255, 255, 0.18),
    inset 1px 1px 1px 0 rgba(255, 255, 255, 0.18);
}

.site-theme-switch {
  position: relative;
  display: inline-grid;
  padding: 0.125rem;
  border-radius: 999px;
  flex: 0 0 auto;
  isolation: isolate;
  /* the thumb is draggable — keep touch gestures from scrolling the page */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* while dragging, the thumb tracks the pointer 1:1 (no easing) */
.site-theme-switch.is-dragging {
  cursor: grabbing;
}

.site-theme-switch.is-dragging .site-theme-switch__thumb {
  transition: none;
}

/* Vertical tile: slim pill beside the nav island, moon top / sun bottom */
.site-theme-switch--vertical {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  width: 2.5rem;
  height: auto;
  min-height: 3.25rem;
}

/* Higher specificity than .liquid-glass (which loads later and sets
   position: relative) — without this the layers fall into the grid flow
   and push the moon/sun buttons out of place. */
.site-theme-switch .site-theme-switch__track,
.site-theme-switch .site-theme-switch__thumb {
  position: absolute;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

.site-theme-switch .site-theme-switch__track {
  inset: 0;
  z-index: 0;
}

.site-theme-switch--vertical .site-theme-switch__thumb {
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: calc(100% - 0.25rem);
  height: calc(50% - 0.125rem);
  z-index: 1;
  transition: transform 0.38s cubic-bezier(0.34, 1.2, 0.64, 1);
  transform: translateY(0);
}

.site-theme-switch--vertical.is-day .site-theme-switch__thumb {
  transform: translateY(100%);
}

/* Lift-and-drop: while the thumb glides, it rises off the track (scale up,
   deeper shadow) and settles back down as it lands. `scale` composes with
   the translateX transition above. .is-lifting is added per toggle in
   theme.js so this never fires on page load. */
.site-theme-switch.is-lifting .site-theme-switch__thumb {
  animation: theme-thumb-lift 0.42s cubic-bezier(0.3, 0.9, 0.45, 1);
}

@keyframes theme-thumb-lift {
  0% {
    scale: 1;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  }
  40% {
    scale: 1.16;
    box-shadow: 0 9px 22px rgba(0, 0, 0, 0.34);
  }
  100% {
    scale: 1;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-theme-switch.is-lifting .site-theme-switch__thumb {
    animation: none;
  }
}

.site-theme-switch__option {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.42);
  cursor: pointer;
  transition: color 0.25s ease, transform 0.25s ease;
}

.site-theme-switch__option:hover {
  color: rgba(255, 255, 255, 0.78);
}

.site-theme-switch__option[aria-pressed="true"] {
  color: #fff;
}

.site-theme-switch__option[aria-pressed="true"] .site-theme-switch__icon {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.45));
}

/* toggle icons ride the same luminance flip as the nav items: white-first
   over the footage, ink when the sampler says the backdrop is light */
html.nav-on-light .site-theme-switch__option {
  color: rgba(0, 0, 0, 0.35);
}

html.nav-on-light .site-theme-switch__option:hover {
  color: rgba(0, 0, 0, 0.62);
}

html.nav-on-light .site-theme-switch__option[aria-pressed="true"] {
  color: #111;
}

html.theme-core.day-mode .site-theme-switch__option[aria-pressed="true"] .site-theme-switch__icon {
  filter: drop-shadow(0 0 5px rgba(255, 200, 80, 0.55));
}

.site-theme-switch__icon {
  display: block;
  pointer-events: none;
}

/* ── Hero field inset ──────────────────────────────────────────── */
/* Frame + card shadow ease at the same pace as the video crossfade */
html.theme-core .hero-field {
  background: var(--hero-inset-bg);
  transition: background-color 0.85s ease;
}

html.theme-core .hero-field__media {
  transition: box-shadow 0.85s ease;
}

/* ── Hero identity glass ───────────────────────────────────────── */
/* The identity card IS a .liquid-glass element (lens + tint + rim shine),
   so the container must stay transparent — putting a fill here would sit
   BEHIND the glass layers and defeat the lens. The frost lives on its
   .glass-effect-tint layer (below), same recipe as the pills. */
html.theme-core.home .home-hero-body.hero-bento .hero-header-copy {
  background: transparent !important;
  border-color: var(--hero-tile-border) !important;
  box-shadow: var(--glass-shadow) !important;
}

html.theme-core.home .home-hero-body.hero-bento .hero-header-copy > :not(.glass-effect):not(.glass-effect-tint):not(.glass-effect-shine) {
  position: relative;
  z-index: 2;
}

html.theme-core.home .home-hero-body.hero-bento .text-block-37,
html.theme-core.home .home-hero-body.hero-bento .text-block-5-copy,
html.theme-core.home .home-hero-body.hero-bento .typer,
html.theme-core.home .home-hero-body.hero-bento .text-block-37 a,
html.theme-core.home .home-hero-body.hero-bento .hello-word {
  color: var(--hero-fg);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

html.theme-core.home .home-hero-body.hero-bento .hello-word {
  color: var(--hero-fg-muted);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

/* ── Home: works + bento + kudos ───────────────────────────────── */
html.theme-core.home .body.home {
  background: var(--site-bg) !important;
}

html.theme-core.home .section-4 .glass-effect-tint {
  background-color: var(--glass-tint) !important;
}

html.theme-core.home .section-4 {
  box-shadow: var(--glass-shadow) !important;
}

html.theme-core.home #home-page-main #works .container-3 {
  background: var(--card-surface) !important;
  border-color: var(--card-border) !important;
  box-shadow: var(--card-shadow) !important;
}

html.theme-core.home #home-page-main #works .container-3:hover {
  border-color: var(--card-border-hover) !important;
  box-shadow: var(--card-shadow-hover) !important;
}

html.theme-core.day-mode.home #home-page-main #works .heading {
  color: var(--site-fg) !important;
}

html.theme-core.day-mode.home #home-page-main #works .text-block-16 {
  color: var(--site-fg-muted) !important;
}

html.theme-core.day-mode.home #home-page-main #works .text-block-18.tag-item {
  color: rgba(0, 0, 0, 0.72) !important;
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

html.theme-core.day-mode.home #home-page-main #works .works-filter__pill,
html.theme-core.day-mode.home #home-page-main #works .works-sort {
  background: var(--pill-bg);
  color: var(--pill-fg);
  border-color: var(--pill-border);
}

html.theme-core.day-mode.home #home-page-main #works .works-filter__pill:hover,
html.theme-core.day-mode.home #home-page-main #works .works-sort:hover {
  border-color: rgba(0, 0, 0, 0.18);
}

html.theme-core.day-mode.home #home-page-main #works .works-filter__pill[aria-pressed="true"] {
  background: #111;
  color: #fff;
  border-color: #111;
}

html.theme-core.day-mode.home #home-page-main #works .works-filter__count {
  color: rgba(0, 0, 0, 0.45);
}

html.theme-core.day-mode.home #home-page-main #works .works-filter__pill[aria-pressed="true"] .works-filter__count {
  color: rgba(255, 255, 255, 0.65);
}

html.theme-core.day-mode.home #home-page-main #works .works-sort::after {
  border-right-color: rgba(0, 0, 0, 0.45);
  border-bottom-color: rgba(0, 0, 0, 0.45);
}

/* Hero glass tiles use the SAME tint as the navbar island so every piece
   of glass on the page is one material (lens + shine keep working on top). */
html.theme-core.home .hero-header-copy > .glass-effect-tint,
html.theme-core.home .dgpt-term__prompt > .glass-effect-tint,
html.theme-core.home .hero-spotify-tile > .glass-effect-tint {
  background-color: var(--glass-tint) !important;
}

/* spotify tile copy flips with the theme (base styles are night-first) */
html.theme-core.day-mode.home .hero-spotify-tile .spotify-track {
  color: var(--hero-fg) !important;
}

html.theme-core.day-mode.home .hero-spotify-tile .spotify-artist {
  color: var(--hero-fg-muted) !important;
}

html.theme-core.day-mode.home .hero-spotify-tile:hover {
  border-color: var(--card-border-hover, rgba(0, 0, 0, 0.14)) !important;
}

/* rim so the tile edges separate from the busy background */
html.theme-core.home .dgpt-term:not(.open):not(.dgpt-term--inline) .dgpt-term__prompt {
  border-color: var(--hero-tile-border) !important;
}

html.theme-core.day-mode.home .home-hero-body.hero-bento .text-block-37,
html.theme-core.day-mode.home .home-hero-body.hero-bento .text-block-5-copy,
html.theme-core.day-mode.home .home-hero-body.hero-bento .typer,
html.theme-core.day-mode.home .home-hero-body.hero-bento .text-block-37 a,
html.theme-core.day-mode.home .home-hero-body.hero-bento .hello-word {
  text-shadow: none;
}

html.theme-core.day-mode.home .home-hero-body.hero-bento .hello-word {
  color: var(--hero-fg-muted) !important;
}

html.theme-core.day-mode.home .home-hero-body.hero-bento .text-block-37,
html.theme-core.day-mode.home .home-hero-body.hero-bento .text-block-5-copy,
html.theme-core.day-mode.home .home-hero-body.hero-bento .typer,
html.theme-core.day-mode.home .home-hero-body.hero-bento .text-block-37 a,
html.theme-core.day-mode.home .text-block-36 {
  color: var(--hero-fg) !important;
}

html.theme-core.day-mode.home .home-hero-body.hero-bento .hero-card-foot {
  border-top-color: rgba(0, 0, 0, 0.08);
}

html.theme-core.day-mode.home .home-hero-body.hero-bento .hero-about-link {
  color: var(--hero-link-muted) !important;
}

html.theme-core.day-mode.home .home-hero-body.hero-bento .hero-about-link:hover,
html.theme-core.day-mode.home .home-hero-body.hero-bento .hero-about-link:focus-visible {
  color: var(--hero-link-hover) !important;
  background: var(--hero-link-hover-bg) !important;
  border-top-color: rgba(0, 0, 0, 0.16) !important;
}

html.theme-core.day-mode.home .kudos {
  background: var(--site-bg);
}

html.theme-core.day-mode.home body.home .section {
  background: var(--site-bg);
}

html.theme-core.day-mode.home .kudos-title {
  color: var(--site-fg);
}

html.theme-core.day-mode.home .kudos-title em {
  color: var(--site-fg-muted);
}

html.theme-core.day-mode.home .kudos-sub {
  color: rgba(0, 0, 0, 0.5);
}

html.theme-core.day-mode.home .kudos-sub b {
  color: rgba(0, 0, 0, 0.82);
}

html.theme-core.day-mode.home .kudo-toggle {
  border-color: rgba(0, 0, 0, 0.14);
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.78);
}

html.theme-core.day-mode.home .kudo-toggle:hover {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.22);
  color: var(--site-fg);
}

/* ── Project pages ───────────────────────────────────────────────── */
/* Case pages float over the same day/night wallpaper as connect/about,
   and the card surfaces flip with the theme: graphite + light prose at
   night, white + ink in day. !important beats per-page inline styles. */
html.theme-core {
  --case-surface: rgba(20, 20, 22, 0.92);
  --case-fg: #f2f2f2;
  --case-fg-muted: rgba(255, 255, 255, 0.66);
  --case-meta-label: #8f8f8f;
  --case-meta-value: #d9d9d9;
  --case-separator: rgba(255, 255, 255, 0.16);
}

html.theme-core.day-mode {
  /* same translucency as night so the wallpaper reads through the card */
  --case-surface: rgba(255, 255, 255, 0.92);
  --case-fg: #111;
  --case-fg-muted: rgba(0, 0, 0, 0.62);
  --case-meta-label: #8f8f8f;
  --case-meta-value: #333;
  --case-separator: rgba(0, 0, 0, 0.14);
}

/* wallpaper shows through: the themed body fill would cover the fixed
   wall (it sits at z-index -5, behind the body's own background) */
html.theme-core body.case-page {
  background: transparent !important;
}

html.theme-core body.case-page .background-wall {
  background-image: url('/assets/background/night.jpeg');
  background-size: cover;
  background-position: center;
}

html.theme-core body.case-page .background-wall::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/assets/background/day.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.85s ease;
}

html.theme-core.day-mode body.case-page .background-wall::after {
  opacity: 1;
}

html.theme-core body.case-page .layout-blockcontainer.container-4 {
  background-color: var(--case-surface) !important;
  color: var(--case-fg);
  transition: background-color 0.5s ease, color 0.5s ease;
}

html.theme-core.day-mode .layout-blockcontainer.container-4 {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

html.theme-core body.case-page .link-6,
html.theme-core body.case-page .link-7,
html.theme-core body.case-page .link-8,
html.theme-core body.case-page .heading-3,
html.theme-core body.case-page .heading-3 a,
html.theme-core body.case-page .heading-5,
html.theme-core body.case-page .heading-5-sub,
html.theme-core body.case-page .text-centre,
html.theme-core body.case-page .text-left,
html.theme-core body.case-page .body-black,
html.theme-core body.case-page .text-block-47,
html.theme-core body.case-page .text-block-43,
html.theme-core body.case-page blockquote {
  color: var(--case-fg) !important;
  transition: color 0.5s ease;
}

html.theme-core body.case-page blockquote {
  border-left-color: var(--case-fg) !important;
}

html.theme-core body.case-page .case-meta {
  color: var(--case-fg);
  border-top-color: var(--case-separator) !important;
}

html.theme-core body.case-page .case-meta dt { color: var(--case-meta-label) !important; }
html.theme-core body.case-page .case-meta dd { color: var(--case-meta-value) !important; }

html.theme-core body.case-page .layout-blockcontainer.container-shell ~ .layout-blockcontainer.container-shell {
  border-top-color: var(--case-separator) !important;
}

/* quote/photo inset boxes: page styles paint these light, which fights
   the graphite card at night — the card surface carries them */
html.theme-core body.case-page .div-block-80,
html.theme-core body.case-page .mur-testimonial {
  background-color: transparent !important;
  border-color: var(--case-separator);
  transition: border-color 0.5s ease;
}

/* tag chips under the case titles */
html.theme-core body.case-page .text-block-18.tag-item {
  color: var(--case-fg) !important;
  background: rgba(127, 127, 127, 0.16) !important;
  border-color: var(--case-separator) !important;
  transition: color 0.5s ease, background-color 0.5s ease, border-color 0.5s ease;
}

/* intentionally-dark inset cards (statement boxes, black feature cards)
   keep light text in BOTH modes — the global flip must not ink them */
html.theme-core body.case-page .div-block-87 .text-block-47,
html.theme-core body.case-page .div-block-87 .heading-5-sub,
html.theme-core body.case-page .div-block-87---green .text-block-47,
html.theme-core body.case-page .div-block-87---green .heading-5-sub,
html.theme-core body.case-page .div-block-87---blue .text-block-47,
html.theme-core body.case-page .div-block-87---blue .heading-5-sub,
html.theme-core body.case-page .caen-black-card .text-block-47,
html.theme-core body.case-page .caen-black-card .heading-5-sub,
html.theme-core body.case-page .caen-statement .heading-5,
html.theme-core body.case-page .caen-statement .heading-5-sub,
html.theme-core body.case-page .caen-statement .text-centre,
html.theme-core body.case-page .caen-statement .body-black {
  color: #f2f2f2 !important;
}

/* the next-case-study CTA flips with the theme: dark panel at night,
   light panel in day (thumbnail + accent sweep work on both) */
html.theme-core.day-mode body.case-page a.next-project {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #111 !important;
}
html.theme-core body.case-page a.next-project {
  transition: transform .3s ease, box-shadow .3s ease, background-color .5s ease, border-color .5s ease, color .5s ease;
}
html.theme-core.day-mode body.case-page a.next-project .next-project-label {
  color: rgba(0, 0, 0, 0.5) !important;
}
html.theme-core.day-mode body.case-page a.next-project .next-project-title {
  color: #111 !important;
}
html.theme-core.day-mode body.case-page a.next-project:hover {
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.16);
}
html.theme-core.day-mode body.case-page .next-project-thumb {
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

/* ── Connect mail window ───────────────────────────────────────── */
/* the desktop wallpaper sits at z-index -5; the global themed body
   background would paint over it, so the connect body goes clear */
html.theme-core body.connect-page {
  background: transparent !important;
}

html.theme-core .background-wall {
  transition: opacity 0.35s ease;
}

html.theme-core.day-mode .background-wall {
  opacity: var(--connect-wall-opacity);
}

html.theme-core .mail-window-label {
  color: var(--site-fg);
  transition: color 0.35s ease;
}

html.theme-core {
  --mail-window-bg: #2b2a2a;
  --mail-window-border: rgba(255, 255, 255, 0.15);
  --mail-window-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  --mail-toolbar-bg: #323232;
  --mail-toolbar-border: #434343;
  --mail-field-fg: #e2e3e3;
  --mail-label-fg: #fff;
  --mail-separator: #434343;
  --mail-chip-fg: #fff;
  --mail-to-chip-bg: #1f4a6d;
}

/* light appearance mirrors Apple Mail's compose palette: near-black typed
   text (labelColor), faint-black header labels (secondaryLabelColor), and
   hairline separators — never pure black */
html.theme-core.day-mode {
  --mail-window-bg: #fff;
  --mail-window-border: rgba(0, 0, 0, 0.1);
  --mail-window-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(0, 0, 0, 0.04);
  --mail-toolbar-bg: #f2f2f2;
  --mail-toolbar-border: rgba(0, 0, 0, 0.08);
  --mail-field-fg: rgba(0, 0, 0, 0.85);
  --mail-label-fg: rgba(0, 0, 0, 0.5);
  --mail-separator: rgba(0, 0, 0, 0.1);
  --mail-chip-fg: rgba(0, 0, 0, 0.8);
  --mail-to-chip-bg: #d6e9f8;
}

html.theme-core .form-group {
  border-top-color: var(--mail-separator);
  border-bottom-color: var(--mail-separator);
  transition: border-color 0.35s ease;
}

html.theme-core .text-block-39 {
  border-bottom-color: var(--mail-separator);
  transition: border-color 0.35s ease;
}

html.theme-core .mail-window {
  background-color: var(--mail-window-bg);
  border-color: var(--mail-window-border);
  box-shadow: var(--mail-window-shadow);
  transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

html.theme-core .mail-toolbar {
  background-color: var(--mail-toolbar-bg);
  border-bottom-color: var(--mail-toolbar-border);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

html.theme-core .text-block-30,
html.theme-core .text-block-39 {
  color: var(--mail-label-fg);
  transition: color 0.35s ease;
}

html.theme-core .text-span-9 {
  color: var(--mail-chip-fg);
  background-color: var(--mail-to-chip-bg);
  transition: color 0.35s ease, background-color 0.35s ease;
}

html.theme-core .text-field,
html.theme-core .text-field-2,
html.theme-core .text-field-3,
html.theme-core .text-field-4 {
  color: var(--mail-field-fg);
  transition: color 0.35s ease;
}

html.theme-core .text-field::placeholder,
html.theme-core .text-field-2::placeholder,
html.theme-core .text-field-3::placeholder,
html.theme-core .text-field-4::placeholder {
  color: var(--site-fg-muted);
}

/* ── Globe ─────────────────────────────────────────────────────── */
/* gcard-* is globe-local (a full border shorthand) — it must NOT reuse the
   design-system --card-border color token or it clobbers every card site-wide */
html.theme-core.day-mode {
  --flights-bg: #f5f5f7;
  --gcard-bg: rgba(255, 255, 255, 0.92);
  --gcard-border: 1px solid rgba(0, 0, 0, 0.08);
  --gcard-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  --label-gray: #6e6e73;
  --sub-gray: #6e6e73;
  --date-gray: #8e8e93;
  --border-subtle: rgba(0, 0, 0, 0.06);
  --row-bg: rgba(255, 255, 255, 0.8);
}

html.theme-core.day-mode .globe-page {
  background: var(--flights-bg);
  color: #111;
}

/* ── 404 ───────────────────────────────────────────────────────── */
html.theme-core.day-mode.home .work-stat b {
  color: var(--card-accent, var(--site-fg));
}

/* ── 404 ───────────────────────────────────────────────────────── */
html.theme-core.day-mode .utility-page-content .heading-2,
html.theme-core.day-mode .utility-page-content .text-block-41 {
  color: var(--site-fg);
  text-shadow: 0 1px 12px rgba(255, 255, 255, 0.65);
}