/* Separable portfolio pre-animation polish patch
   Goal: lock layout to a clean white base before the animated code-driven background is added. */

:root {
  --page-bg: #fff;
  --surface-bg: rgba(255,255,255,.94);
}

html,
body {
  background: #fff !important;
}

body::before,
body::after,
.abstract-page-shade,
.abstract-grain,
#abstract-canvas {
  display: none !important;
}

.site-header {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: rgba(255,255,255,.96) !important;
}

.site-header::before,
.site-header::after {
  background: transparent !important;
}

.primary-nav a.is-active[aria-current="false"],
body.home-page .primary-nav a.is-active {
  text-decoration: none !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

body:not(.home-page) .primary-nav a[aria-current="page"],
body:not(.home-page) .primary-nav a.is-active {
  text-decoration: underline;
  text-underline-offset: .45em;
  text-decoration-thickness: 1px;
}

body.work-page {
  background: #fff !important;
}

.work-rail {
  background: rgba(255,255,255,.96) !important;
}

.rail-brand span {
  display: none !important;
}

body.work-page .rail-statement {
  display: none !important;
}

body.work-page .series-section h2 {
  font-size: clamp(1.15rem, 1rem + .85vw, 1.85rem) !important;
  line-height: 1.05 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  margin: 0 0 clamp(1.25rem, 3vw, 2.5rem) !important;
}

body.work-page .series-section h2::after {
  content: ".";
}

@media (min-width: 900px) {
  .site-header {
    padding-left: clamp(24px, 4vw, 64px) !important;
    padding-right: clamp(24px, 4vw, 64px) !important;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) html,
  :root:not([data-theme="light"]) body {
    background: #050505 !important;
  }

  :root:not([data-theme="light"]) .site-header,
  :root:not([data-theme="light"]) .work-rail {
    background: rgba(5,5,5,.94) !important;
  }
}

[data-theme="dark"] html,
[data-theme="dark"] body {
  background: #050505 !important;
}

[data-theme="dark"] .site-header,
[data-theme="dark"] .work-rail {
  background: rgba(5,5,5,.94) !important;
}