@import url("portfolio-system.css?v=20261102-2");

/* Shared appearance control. Dark remains the default; light is opt-in and persistent. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  margin: 0;
  padding: 6px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: var(--muted, #8d8c87);
  font: 9px/1 "IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: .82;
  transition: color .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
}
.theme-toggle:hover,
.theme-toggle:focus-visible { color: var(--fg, #f2f1ec); opacity: 1; }
.theme-toggle-mobile { display: none; }
.theme-toggle-icon {
  position: relative;
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border: 1px solid currentColor;
  border-radius: 50%;
  overflow: hidden;
}
.theme-toggle-icon::after {
  content: "";
  position: absolute;
  inset: -1px -1px -1px 50%;
  background: currentColor;
}

html[data-theme="light"] {
  --bg: #eef0ed;
  --fg: #161714;
  --text: #161714;
  --muted: #66675f;
  --line: #c5cac5;
  --panel: #f7f8f5;
  --body-primary: #161714;
  --body-secondary: #66675f;
  --lab-panel: #f7f8f5;
  --lab-line: #c5cac5;
  --lab-accent: #5d7700;
  --lab-cyan: #087f91;
  color-scheme: light;
  background: #eef0ed;
}
html[data-theme="light"] body {
  background: #eef0ed !important;
  color: #161714;
}
html[data-theme="light"] .shell > header {
  background: rgba(238, 240, 237, .94);
  border-color: #c5cac5;
  box-shadow: none;
  backdrop-filter: blur(14px);
}
html[data-theme="light"] body.home-page .shell > header { border-bottom: 0; }
html[data-theme="light"] .brand-mark img { filter: none; }
html[data-theme="light"] .brand-mark::before,
html[data-theme="light"] .brand-mark::after { border-color: #161714; }
html[data-theme="light"] .brand-wordmark { border-color: rgba(22, 23, 20, .24); }
html[data-theme="light"] header nav > a:not(.lab-nav) { color: #5e6059; }
html[data-theme="light"] header nav > a:not(.lab-nav):hover,
html[data-theme="light"] header nav > a:not(.lab-nav):focus-visible,
html[data-theme="light"] header nav > a[aria-current="page"] { color: #11120f; }
html[data-theme="light"] header nav a.lab-nav {
  color: #000;
  border-color: #000;
}
html[data-theme="light"] header nav a.lab-nav:hover,
html[data-theme="light"] header nav a.lab-nav:focus-visible {
  background: #000;
  color: #fff;
  border-color: #000;
  box-shadow: 4px 4px 0 rgba(0,0,0,.18);
}
html[data-theme="light"] header nav a.lab-nav:hover .lab-bubbles i,
html[data-theme="light"] header nav a.lab-nav:focus-visible .lab-bubbles i {
  border-color: #000;
}
html[data-theme="light"] .theme-toggle { color: #5e6059; }
html[data-theme="light"] .theme-toggle:hover,
html[data-theme="light"] .theme-toggle:focus-visible { color: #11120f; background: rgba(22, 23, 20, .05); }

/* Shared portfolio surfaces and typography. */
html[data-theme="light"] footer,
html[data-theme="light"] .site-footer,
html[data-theme="light"] section,
html[data-theme="light"] .section,
html[data-theme="light"] .next,
html[data-theme="light"] .work-head,
html[data-theme="light"] .card-copy,
html[data-theme="light"] dl,
html[data-theme="light"] .role-grid,
html[data-theme="light"] .stats,
html[data-theme="light"] .stat { border-color: #c5cac5; }
html[data-theme="light"] p,
html[data-theme="light"] .lede,
html[data-theme="light"] .hero-copy p,
html[data-theme="light"] .copy p { color: #5f615a; }
html[data-theme="light"] .card,
html[data-theme="light"] .work-card,
html[data-theme="light"] .content-card { background-color: #f7f8f5; border-color: #c5cac5; }
html[data-theme="light"] .card-copy,
html[data-theme="light"] .card-copy h3 { color: #161714; }
html[data-theme="light"] .label,
html[data-theme="light"] dt,
html[data-theme="light"] .meta { color: #66675f; }
html[data-theme="light"] .project-label {
  color: rgba(255,255,255,.88) !important;
  border-color: rgba(255,255,255,.35) !important;
}

/* Keep image-led and interactive artwork intentionally dark. */
html[data-theme="light"] .lab-hero,
html[data-theme="light"] .visual,
html[data-theme="light"] .hero-image,
html[data-theme="light"] .media,
html[data-theme="light"] .phone-stage,
html[data-theme="light"] .interactive,
html[data-theme="light"] [class*="demo"],
html[data-theme="light"] [class*="terminal"] { color-scheme: dark; }

/* Homepage signal and credibility modules belong to the light canvas. */
html[data-theme="light"] .motion-band {
  background: #eef0ed;
  border-color: transparent;
  color-scheme: light;
  box-shadow: none;
}
html[data-theme="light"] .motion-band::after {
  display: none;
}
html[data-theme="light"] .proof-item { background: transparent; color: #161714; }
html[data-theme="light"] .proof-item b.is-counting {
  color: #354500;
  text-shadow: 0 0 18px rgba(93,119,0,.14);
}

/* Light mode needs authored contrast, not dark-theme opacity values on cream. */
html[data-theme="light"] .hero-copy,
html[data-theme="light"] .hero-copy p,
html[data-theme="light"] .lede,
html[data-theme="light"] .intro-grid p,
html[data-theme="light"] .platform-proof-head p,
html[data-theme="light"] .example-copy p,
html[data-theme="light"] .monitoring-intro { color: #4f514b !important; }
html[data-theme="light"] body.case-study-page .case-lede,
html[data-theme="light"] body.case-study-page .lede {
  color: var(--fg, #161714) !important;
  opacity: 1;
}
html[data-theme="light"] .exp-role,
html[data-theme="light"] .chips span,
html[data-theme="light"] .experience .exp p,
html[data-theme="light"] .platform-story p,
html[data-theme="light"] .example-details p { color: #555850 !important; }
html[data-theme="light"] .chips span { border-color: #aaa99f; background: rgba(255,255,255,.32); }

/* Editorial content panels: preserve their hierarchy while moving them onto light surfaces. */
html[data-theme="light"] .case-reveal,
html[data-theme="light"] .device-outcome,
html[data-theme="light"] .device-before,
html[data-theme="light"] .monitoring-path,
html[data-theme="light"] .flow div,
html[data-theme="light"] .source-media figure,
html[data-theme="light"] .source-video-note {
  background: #fbfaf6;
  color: #161714;
  border-color: #b8b9af;
}
html[data-theme="light"] .case-reveal h3,
html[data-theme="light"] .case-reveal strong,
html[data-theme="light"] .device-outcome h4,
html[data-theme="light"] .device-before b,
html[data-theme="light"] .monitoring-path strong,
html[data-theme="light"] .flow h4 { color: #161714; }
html[data-theme="light"] .case-reveal p,
html[data-theme="light"] .device-outcome p,
html[data-theme="light"] .device-before small,
html[data-theme="light"] .monitoring-path span,
html[data-theme="light"] .flow p { color: #5a5d55 !important; }
html[data-theme="light"] .case-reveal strong,
html[data-theme="light"] .case-reveal,
html[data-theme="light"] .device-outcome { border-color: #8aa3a3; }
html[data-theme="light"] .device-before li:not(:last-child)::after { background: #fbfaf6; }

/* Code-rendered systems and diagrams receive a complete light palette. */
html[data-theme="light"] .approach-panel,
html[data-theme="light"] .diagram-pan-frame,
html[data-theme="light"] .service-blueprint-panel,
html[data-theme="light"] .research-service-flow,
html[data-theme="light"] .research-service-compact,
html[data-theme="light"] .logic-canvas,
html[data-theme="light"] .platform-architecture,
html[data-theme="light"] .intelligence-diagram {
  background-color: #f5f3ec;
  color: #161714;
  border-color: #aeb5ad;
  background-image:
    linear-gradient(rgba(22,23,20,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(22,23,20,.045) 1px,transparent 1px);
}
html[data-theme="light"] .approach-panel::before,
html[data-theme="light"] .platform-architecture::before {
  background-image:
    linear-gradient(rgba(22,23,20,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(22,23,20,.04) 1px,transparent 1px);
}
html[data-theme="light"] .approach-panel-head,
html[data-theme="light"] .research-service-compact>header { border-color: #aeb5ad; }
html[data-theme="light"] .diagram-pan-frame::after {
  background: #fffef9;
  color: #242620;
  border-color: #8f938b;
}

/* Roche system maps. */
html[data-theme="light"] .flow-node,
html[data-theme="light"] .architecture-zones section,
html[data-theme="light"] .architecture-zones span,
html[data-theme="light"] .relevance-inputs button,
html[data-theme="light"] .relevance-output li,
html[data-theme="light"] .research-flow-node,
html[data-theme="light"] .compact-phase,
html[data-theme="light"] .compact-primary,
html[data-theme="light"] .compact-step,
html[data-theme="light"] .compact-branch article {
  background: #fffef9;
  color: #20231e;
  box-shadow: 0 12px 28px rgba(31,36,31,.08);
}
html[data-theme="light"] .flow-node span,
html[data-theme="light"] .architecture-zones span,
html[data-theme="light"] .research-flow-node span,
html[data-theme="light"] .compact-primary span,
html[data-theme="light"] .compact-step span { color: #5d625b; }
html[data-theme="light"] .flow-split span,
html[data-theme="light"] .engine-pulse::after,
html[data-theme="light"] .research-service-flow::before { background: #f5f3ec; }
html[data-theme="light"] .research-service-flow::before { color: #565f5d; border-color: #aeb5ad; }
html[data-theme="light"] .relevance-inputs button:hover,
html[data-theme="light"] .relevance-inputs button.is-active,
html[data-theme="light"] .relevance-output li:first-child { background: #e4f0ef; color: #142322; }
html[data-theme="light"] .architecture-zones span,
html[data-theme="light"] .relevance-inputs button,
html[data-theme="light"] .relevance-output li { border-color: #abb4ae; }
html[data-theme="light"] .monitoring-card { background: #fbfaf6; color: #161714; border-color: #b8b9af; }
html[data-theme="light"] .monitoring-card figcaption { border-color: #b8b9af; }
html[data-theme="light"] .monitoring-card figcaption span { color: #5a5d55; }
html[data-theme="light"] .onboarding-journey,
html[data-theme="light"] .device-logic,
html[data-theme="light"] .activity-story,
html[data-theme="light"] .activity-principles,
html[data-theme="light"] .companion-principles,
html[data-theme="light"] .journey-detail-grid section,
html[data-theme="light"] .journey-context,
html[data-theme="light"] .route-loop,
html[data-theme="light"] .character-strip,
html[data-theme="light"] .companion-role-grid,
html[data-theme="light"] .monitoring-phone-stage,
html[data-theme="light"] .wireframe-map-v2.home-architecture {
  background: #f5f3ec;
  color: #161714;
  border-color: #afb4ac;
}
html[data-theme="light"] .logic-canvas {
  background-image:
    linear-gradient(rgba(22,23,20,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(22,23,20,.04) 1px,transparent 1px);
}
html[data-theme="light"] .logic-node,
html[data-theme="light"] .architecture-router,
html[data-theme="light"] .architecture-feedback,
html[data-theme="light"] .route-source,
html[data-theme="light"] .route-rule,
html[data-theme="light"] .route-destinations section {
  background: #fffef9;
  color: #20231e;
  border-color: #a8b3ad;
  box-shadow: 0 12px 28px rgba(31,36,31,.08);
}
html[data-theme="light"] .route-source span,
html[data-theme="light"] .route-rule span,
html[data-theme="light"] .route-destinations span,
html[data-theme="light"] .journey-detail-grid span,
html[data-theme="light"] .activity-principles p,
html[data-theme="light"] .companion-principles p { color: #5a5e57 !important; }
html[data-theme="light"] .route-source i { border-color: #a8b3ad; background: linear-gradient(90deg,#d6e5e5 28%,#f7f6f0 28%); }
html[data-theme="light"] .activity-screen-stage,
html[data-theme="light"] .companion-stage { background: #ebe9e1; }
html[data-theme="light"] .activity-screen figcaption,
html[data-theme="light"] .companion-stage figure figcaption,
html[data-theme="light"] .companion-hero figcaption,
html[data-theme="light"] .companion-moments figcaption,
html[data-theme="light"] .character-role-gallery figcaption {
  background: #fffef9 !important;
  color: #1d201b !important;
  border-color: #b8b9af;
}
html[data-theme="light"] .activity-screen figcaption strong,
html[data-theme="light"] .companion-stage figure figcaption strong { color: #1d201b; }
html[data-theme="light"] .activity-screen figcaption small,
html[data-theme="light"] .companion-moments figcaption p { color: #5a5e57; }

/* Innit intelligence diagrams. */
html[data-theme="light"] .architecture-root,
html[data-theme="light"] .architecture-card,
html[data-theme="light"] .architecture-icon i,
html[data-theme="light"] .feedback-validators span,
html[data-theme="light"] .model-stack,
html[data-theme="light"] .story-visual .story-nodes circle,
html[data-theme="light"] .story-visual .story-endpoints rect,
html[data-theme="light"] .story-visual .story-end-dot {
  background: #fffef9;
  color: #1c211d;
  fill: #fffef9;
}
html[data-theme="light"] .architecture-card-primary { background: #edf5ef; }
html[data-theme="light"] .architecture-card p,
html[data-theme="light"] .feedback-validators small,
html[data-theme="light"] .diagram-outputs span { color: #5b615b; }
html[data-theme="light"] .diagram-inputs span,
html[data-theme="light"] .diagram-outputs article,
html[data-theme="light"] .model-stack span,
html[data-theme="light"] .tuning-row span { color: #29352e; border-color: #8cab98; }
html[data-theme="light"] .feedback-output strong { color: #253229; }
html[data-theme="light"] .feedback-core,
html[data-theme="light"] .diagram-core { background: radial-gradient(circle,rgba(53,139,92,.13),rgba(255,255,255,.08) 68%); }

/* Light captions and controls around screenshot-led content, without changing the imagery. */
html[data-theme="light"] .media-caption,
html[data-theme="light"] .health-feature .health-media .media-caption,
html[data-theme="light"] .whats-innit-visual .media-caption,
html[data-theme="light"] .capability-gallery .carousel-slide .media-caption {
  background: #f5f3ec;
  color: #343730;
  border-color: #b8b9af;
}

/* Final light-mode audit: authored inner surfaces, labels and controls. */
html[data-theme="light"] .journey-head,
html[data-theme="light"] .journey-nav,
html[data-theme="light"] .character-strip-head,
html[data-theme="light"] .character-journey figcaption,
html[data-theme="light"] .character-role-gallery figcaption,
html[data-theme="light"] .companion-role-grid section,
html[data-theme="light"] .home-arch-feedback,
html[data-theme="light"] .home-arch-summary {
  background: #fbfaf6;
  color: #20231e;
  border-color: #b8b9af;
}
html[data-theme="light"] .journey-head strong,
html[data-theme="light"] .character-strip-head strong,
html[data-theme="light"] .home-arch-node h4,
html[data-theme="light"] .home-arch-zones h4,
html[data-theme="light"] .home-arch-summary strong { color: #20231e; }
html[data-theme="light"] .character-strip-head strong,
html[data-theme="light"] .character-journey figcaption span,
html[data-theme="light"] .character-role-gallery figcaption,
html[data-theme="light"] .home-arch-node p,
html[data-theme="light"] .home-arch-zones p,
html[data-theme="light"] .home-arch-summary { color: #5a5e57; }
html[data-theme="light"] .journey-stage {
  background: radial-gradient(circle at 50% 46%,rgba(8,127,145,.10),transparent 34%),#ebe9e1;
}
html[data-theme="light"] .journey-stage::before { background: linear-gradient(90deg,#ebe9e1,transparent); }
html[data-theme="light"] .journey-stage::after { background: linear-gradient(-90deg,#ebe9e1,transparent); }
html[data-theme="light"] .journey-control {
  background: #fffef9;
  color: #20231e;
  border-color: #9ea59f;
}
html[data-theme="light"] .journey-control:hover,
html[data-theme="light"] .journey-control:focus-visible { background: #e4efed; color: #075f6d; }
html[data-theme="light"] .activity-metric {
  background: rgba(255,254,249,.94);
  color: #20231e;
  border-color: #9faeaa;
  box-shadow: 0 18px 42px rgba(31,36,31,.10);
}
html[data-theme="light"] .activity-metric-ring {
  background: conic-gradient(#087f91 0 var(--activity-progress),#cadbda var(--activity-progress) 360deg);
}
html[data-theme="light"] .activity-metric-ring::before { background: #fffef9; border-color: #9fb4b3; }
html[data-theme="light"] .activity-metric-ring span,
html[data-theme="light"] .activity-metric-copy span,
html[data-theme="light"] .activity-metric-copy small { color: #555b56; }
html[data-theme="light"] .home-arch-router,
html[data-theme="light"] .home-arch-zones article {
  background: #fffef9;
  color: #20231e;
  border-color: #9fa8a2;
  box-shadow: 0 12px 28px rgba(31,36,31,.07);
}
html[data-theme="light"] .home-arch-router-core,
html[data-theme="light"] .home-arch-signals span,
html[data-theme="light"] .home-arch-feedback { border-color: #8aa5a5; }
html[data-theme="light"] .home-arch-router-core small,
html[data-theme="light"] .home-arch-signals span,
html[data-theme="light"] .home-arch-route span,
html[data-theme="light"] .home-arch-feedback { color: #59615d; }
html[data-theme="light"] .home-arch-mini i { background: #aeb7b2; }
html[data-theme="light"] .research-flow-choice b {
  background: #fffef9;
  color: #8a651b;
  border-color: #aa7e27;
  box-shadow: 0 7px 18px rgba(31,36,31,.10);
}
html[data-theme="light"] .research-flow-choice span { color: #555a54; }

/* Innit: every code-rendered system lives on the same warm light canvas. */
html[data-theme="light"] .architecture-root,
html[data-theme="light"] .architecture-card,
html[data-theme="light"] .architecture-icon i,
html[data-theme="light"] .diagram-inputs span,
html[data-theme="light"] .diagram-outputs article,
html[data-theme="light"] .feedback-query,
html[data-theme="light"] .feedback-validators span,
html[data-theme="light"] .model-stack,
html[data-theme="light"] .tuning-row span {
  background: #fffef9;
  color: #20231e;
  border-color: #8cab98;
}
html[data-theme="light"] .architecture-card:hover { background: #edf5ef; }
html[data-theme="light"] .architecture-icon,
html[data-theme="light"] .architecture-tags span,
html[data-theme="light"] .architecture-output,
html[data-theme="light"] .model-stack span,
html[data-theme="light"] .feedback-output,
html[data-theme="light"] .example-copy>div,
html[data-theme="light"] .example-details>div,
html[data-theme="light"] .example-flow { border-color: #aeb7af; }
html[data-theme="light"] .architecture-output,
html[data-theme="light"] .architecture-tags span,
html[data-theme="light"] .architecture-foot,
html[data-theme="light"] .feedback-cycle,
html[data-theme="light"] .example-copy>div:first-child,
html[data-theme="light"] .example-flow { color: #59615b; }
html[data-theme="light"] .feedback-diagram { color: #20231e; }
html[data-theme="light"] .feedback-output strong,
html[data-theme="light"] .diagram-outputs strong { color: #20231e; }
html[data-theme="light"] .example-screens.food-screens,
html[data-theme="light"] .example-screens.heart-screens {
  background: radial-gradient(circle at 50% 40%,rgba(53,139,92,.12),transparent 46%),#ebe9e1;
  border-color: #b8b9af;
}
html[data-theme="light"] .example-screens figure { border-color: #aeb7af; box-shadow: 0 18px 42px rgba(31,36,31,.14); }
html[data-theme="light"] .example-screens figure.screen-focus { box-shadow: 0 26px 58px rgba(31,36,31,.20); }

/* Nestle: diagrams and explanatory product states, while device screenshots stay authentic. */
html[data-theme="light"] .brand-vector-card,
html[data-theme="light"] .commerce-diagrams figure,
html[data-theme="light"] .commerce-phone-flow,
html[data-theme="light"] .recipe-retail-journey,
html[data-theme="light"] .journey-translation,
html[data-theme="light"] .availability-story,
html[data-theme="light"] .basket-state,
html[data-theme="light"] .recovery-showcase.recovery-sequence,
html[data-theme="light"] .recovery-actions {
  background: #f5f3ec;
  color: #20231e;
  border-color: #aeb5ad;
}
html[data-theme="light"] .commerce-phone-flow,
html[data-theme="light"] .recipe-retail-journey {
  background: radial-gradient(circle at 50% 45%,rgba(8,127,145,.09),transparent 36%),#ebe9e1;
}
html[data-theme="light"] .brand-vector-card span,
html[data-theme="light"] .diagram-head strong,
html[data-theme="light"] .ingredient-example span,
html[data-theme="light"] .journey-translation p,
html[data-theme="light"] .availability-story p,
html[data-theme="light"] .basket-state-copy p,
html[data-theme="light"] .recovery-sequence figcaption span,
html[data-theme="light"] .recovery-actions span { color: #59605a; }
html[data-theme="light"] .commerce-map-stage article,
html[data-theme="light"] .retailer-map-stage article,
html[data-theme="light"] .retailer-branch span,
html[data-theme="light"] .retailer-decision,
html[data-theme="light"] .mini-basket i,
html[data-theme="light"] .basket-state>footer button {
  background: #fffef9;
  color: #20231e;
  border-color: #9fa9a3;
}
html[data-theme="light"] .commerce-map-stage span,
html[data-theme="light"] .retailer-map-stage span,
html[data-theme="light"] .mini-basket em,
html[data-theme="light"] .basket-state>footer strong { color: #555b56; }
html[data-theme="light"] .commerce-context,
html[data-theme="light"] .commerce-context b,
html[data-theme="light"] .ingredient-example,
html[data-theme="light"] .mini-basket,
html[data-theme="light"] .mini-basket>div,
html[data-theme="light"] .basket-state>footer,
html[data-theme="light"] .recovery-sequence figcaption,
html[data-theme="light"] .recovery-actions span { border-color: #b6bbb4; }
html[data-theme="light"] .mini-basket .has-gap { background: rgba(162,72,111,.08); }
html[data-theme="light"] .recovery-step-number { background: #fffef9; color: #20231e; }
html[data-theme="light"] .recovery-nav-add { color: #4b5255; }
html[data-theme="light"] .recovery-sequence::before { opacity: .82; }

/* Common archive/media framing should not leave dark caption bars on light pages. */
html[data-theme="light"] .source-media figure,
html[data-theme="light"] .media-card,
html[data-theme="light"] .full-bleed-media { background: #fbfaf6; border-color: #b8b9af; }
html[data-theme="light"] .source-media figcaption,
html[data-theme="light"] .media-card>.media-caption,
html[data-theme="light"] .recovery-showcase figcaption {
  background: #fbfaf6;
  color: #4f534d;
  border-color: #b8b9af;
}

/* Legacy case-study image labels: light badges that hold up over any artwork. */
html[data-theme="light"] .legacy-case .case-media figcaption {
  background: rgba(251,250,246,.94);
  color: #242620;
  border-color: rgba(54,57,51,.52);
  box-shadow: 0 5px 18px rgba(22,23,20,.16);
  backdrop-filter: blur(8px);
}

/* Use the same restrained grayscale No Such Things mark across light pages. */
html[data-theme="light"] .nst-footer-link img { filter: grayscale(1) brightness(1.12); opacity: .58; }
html[data-theme="light"] .nst-footer-link:hover img,
html[data-theme="light"] .nst-footer-link:focus-visible img { filter:none; opacity:1; }

/* Light-mode legibility repairs identified during the full-site audit. */
html[data-theme="light"] .contact-intro { color:#5f615b!important; }
html[data-theme="light"] .portrait.pixel-portrait {
  background:#f4f1e8!important;
  border-color:#b9bbb2!important;
}
html[data-theme="light"] .portrait.pixel-portrait .portrait-signal { background:#f4f1e8!important; }
html[data-theme="light"] .portrait.raster-ascii-portrait .portrait-expression {
  filter:invert(1) grayscale(1) contrast(.8) brightness(.72)!important;
  mix-blend-mode:multiply;
}

html[data-theme="light"] .brand-vector-card img { mix-blend-mode:normal!important; }
html[data-theme="light"] .recipe-retail-journey .journey-screen,
html[data-theme="light"] .mobile-state-pair figure {
  background:#fbfaf5;
  border-color:#aeb5ad;
  box-shadow:0 18px 42px rgba(31,36,31,.14);
}
html[data-theme="light"] .recipe-retail-journey .journey-screen figcaption,
html[data-theme="light"] .mobile-state-pair figcaption {
  background:#fbfaf5;
  color:#555b56;
  border-color:#aeb5ad;
}
html[data-theme="light"] .recipe-retail-journey .journey-screen figcaption b,
html[data-theme="light"] .mobile-state-pair figcaption b { color:#287f91; }
html[data-theme="light"] .media-reveal::after { background:#f4f1e8; }
html[data-theme="light"] .legacy-case .case-hero h1 { color:#161714; }

/* Crossing into Lab is a deliberate change of system, not a normal page load. */
.lab-entry-transition{
  position:fixed;inset:0;z-index:100000;overflow:hidden;pointer-events:none;
  background:#020302;color:#2ac5ff;opacity:0;
  clip-path:circle(0 at var(--lab-x,92%) var(--lab-y,42px));
  transition:clip-path .76s cubic-bezier(.7,0,.15,1),opacity .08s linear;
}
.lab-entry-transition.is-active{opacity:1;clip-path:circle(150vmax at var(--lab-x,92%) var(--lab-y,42px))}
.lab-entry-transition::before{
  content:"01 0 ? + / * 10 01 :: SIGNAL FOUND // 0 1 + * ? / 10 01 :: ENTERING LAB // 0 1 + * ? / 10 01 :: SIGNAL FOUND // 0 1 + * ? / 10 01 :: ENTERING LAB // 0 1 + * ? / 10 01 :: SIGNAL FOUND // 0 1 + * ? /";
  position:absolute;inset:-8%;color:rgba(115,210,221,.34);font:18px/2 "IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif;
  letter-spacing:.7em;word-spacing:1em;word-break:break-all;transform:rotate(-6deg) scale(1.08);opacity:0;
}
.lab-entry-transition.is-active::before{animation:lab-signal-in .7s .08s steps(7,end) forwards}
.lab-entry-message{position:absolute;left:6vw;bottom:8vh;color:#2ac5ff;font:11px/1.5 "IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;opacity:0;transform:translateY(14px)}
.lab-entry-message b{display:block;margin-top:8px;color:#f2f1ec;font:300 clamp(42px,7vw,96px)/.9 "IBM Plex Sans Condensed",sans-serif;letter-spacing:-.04em;text-transform:none}
.lab-entry-transition.is-active .lab-entry-message{animation:lab-message-in .38s .35s ease forwards}
@keyframes lab-signal-in{0%{opacity:0;transform:rotate(-6deg) scale(1.3) translateX(8%)}100%{opacity:1;transform:rotate(-6deg) scale(1.08) translateX(-2%)}}
@keyframes lab-message-in{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.lab-entry-transition{transition:none}.lab-entry-transition::before,.lab-entry-message{animation:none!important}}

/* Lab: a light workbench around dark signal/media modules. */
html[data-theme="light"] .active-project-card,
html[data-theme="light"] .lab-console,
html[data-theme="light"] .signal-viewer {
  background: #fbfaf6;
  color: #161714;
  border-color: #c9c5b9;
}
html[data-theme="light"] .lab-hero,
html[data-theme="light"] .lab-hero h1,
html[data-theme="light"] .lab-hero h2{ color: #f3f2ed; }
.shell:not(.lab-shell) .tag,
.shell:not(.lab-shell) .label,
.shell:not(.lab-shell) .project-label,
.shell:not(.lab-shell) .hero-meta,
.shell:not(.lab-shell) .work-head span,
.shell:not(.lab-shell) .meta dt,
.shell:not(.lab-shell) .role-grid dt,
.shell:not(.lab-shell) .exp-year,
.shell:not(.lab-shell) .exp-role,
.shell:not(.lab-shell) .chips span,
.shell:not(.lab-shell) .step-no{
  font-family:"IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif!important;
  font-weight:400!important;
  letter-spacing:.14em!important;
  line-height:1.4!important;
  text-transform:uppercase!important;
}
html[data-theme="light"] .project-story h2,
html[data-theme="light"] .project-story dd { color: #161714; }
html[data-theme="light"] .project-story dt{ color: #66675f; }
html[data-theme="light"] .project-story,
html[data-theme="light"] .project-story dl,
html[data-theme="light"] .project-story dl > div,
html[data-theme="light"] .project-link,
html[data-theme="light"] .experiment-list,
html[data-theme="light"] .viewer-copy { border-color: #c9c5b9; }
html[data-theme="light"] .project-story p,
html[data-theme="light"] .viewer-copy p { color: #62645d; }
html[data-theme="light"] .experiment-row { color: #6d6e67; border-color: #d4d0c5; }
html[data-theme="light"] .experiment-row:hover { background: #eeece4; color: #161714; }
html[data-theme="light"] .experiment-row.is-active { background: #e7e5dc; color: #161714; }
html[data-theme="light"] .viewer-chrome { background: #eeece4; color: #4b6000; border-color: #c9c5b9; }
html[data-theme="light"] .viewer-stage { background-color: #101413; }
html[data-theme="light"] .project-link,
html[data-theme="light"] .store-badge { background: #f4f2eb; color: #161714; border-color: #c9c5b9; }
html[data-theme="light"] .store-badge[href]:hover,
html[data-theme="light"] .store-badge[href]:focus-visible { background: #e9e6dc; }

/* Preserve dark editorial panels that were designed around white text. */
html[data-theme="light"] .dark,
html[data-theme="light"] .brand-dark,
html[data-theme="light"] .quote-card,
html[data-theme="light"] .dark-panel { color: #f2f1ec; }

@media (max-width: 760px) {
  .theme-toggle { width: 30px; padding: 6px 8px; justify-content: center; }
  .theme-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .shell > header { position: sticky; }
  .shell > header > .theme-toggle-mobile {
    position: absolute;
    top: 50%;
    right: 72px;
    display: inline-flex;
    transform: translateY(-50%);
    z-index: 5;
  }
}