/* Shared palette. Media assets keep their original colors in both themes. */
:root {
  color-scheme: dark;
  --site-background: #1a1a1a;
  --site-strong: #eeeeee;
  --site-text: #b8b8b8;
  --site-soft: #dddddd;
  --site-muted: #999999;
  --site-subtle: #aaaaaa;
  --site-border: #333333;
  --site-surface: #222222;
  --site-focus: #b5ceff;
  --site-hover: #ffffff;
}
html[data-theme="light"] {
  --site-background: #faf9f6;
  --site-strong: #242424;
  --site-text: #444444;
  --site-soft: #333333;
  --site-muted: #66635f;
  --site-subtle: #625f59;
  --site-border: #d8d5ce;
  --site-surface: #eeece7;
  --site-focus: #2254b5;
  --site-hover: #000000;
}
/* Framer declares these tokens on body; override them there, not just at root. */
html[data-theme="light"] body {
  --token-8856508d-3cdd-4b9d-93c5-9410ff7516dc: #242424 !important;
  --token-c30f424b-1ccb-4d94-827a-c7e5c524df2e: #66635f !important;
  --token-047f7854-564e-41e1-8aea-b94df4666610: #d8d5ce !important;
  --token-79c68df7-4245-44e2-8f97-f918bee5cff5: #faf9f6 !important;
  --token-a055c1c8-f126-4e8e-b410-033c84344487: #eeece7 !important;
  background: var(--site-background) !important;
}
html[data-theme="light"] #main [style*="--framer-text-color:rgb(255"],
html[data-theme="light"] #main [style*="--framer-text-color: rgb(255"] {
  --framer-text-color: var(--site-strong) !important;
}
html[data-theme="light"] #main [style*="--framer-link-text-color:rgb(255"],
html[data-theme="light"] #main [style*="--framer-link-text-color: rgb(255"] {
  --framer-link-text-color: var(--site-strong) !important;
}
/* The legacy page has two dark illustration canvases outside its token palette. */
html[data-theme="light"] #main [style*="background-color:rgb(33, 33, 33)"],
html[data-theme="light"] #main [style*="background-color: rgb(33, 33, 33)"] {
  background-color: var(--site-surface) !important;
}
html[data-theme="light"] .portfolio-case-link:focus-visible {
  outline-color: var(--site-focus);
}
/* Keep the compact theme control available in the bottom-right corner. */
.theme-control {
  position: fixed;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 1000;
  display: flex;
  gap: 0;
  padding: 3px;
  border: 1px solid var(--site-border);
  border-radius: 999px;
  background: var(--site-surface);
  color: var(--site-muted);
}
.theme-control[hidden] { display: none; }
.theme-control button {
  appearance: none;
  border: 0;
  border-radius: 50%;
  padding: 7px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: inherit;
  background: transparent;
  cursor: pointer;
}
.theme-control button svg { display: block; width: 15px; height: 15px; }
.theme-control button:hover,
.theme-control button[aria-pressed="true"] { color: var(--site-strong); }
.theme-control button[aria-pressed="true"] {
  background: var(--site-strong);
  color: var(--site-background);
}
.theme-control button:focus-visible,
.portfolio-case-link:focus-visible {
  outline: 2px solid var(--site-focus);
  outline-offset: 4px;
}
/* Align archived footer links with their reading columns. */
#main .framer-1h8of4e,
#main .framer-9jcnip {
  align-items: flex-start;
  padding-inline: 0;
}
body:has(.site-header) footer {
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.portfolio-case-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  min-height: 32px;
  margin-top: 20px;
  color: var(--site-strong) !important;
  font: 400 13px/1.5 Inter, sans-serif;
  text-decoration: none !important;
}
.portfolio-case-link svg {
  flex: none;
  display: block;
  color: inherit;
  stroke: currentColor;
  transition: transform 400ms cubic-bezier(.34, 1.56, .64, 1);
}
.portfolio-case-link:hover svg,
.portfolio-case-link:focus-visible svg { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  .portfolio-case-link svg { transition: none; }
}
/* The outer Camera Uploads stack already supplies a 40px gap. */
.framer-13rdwhg > .portfolio-case-link { margin-top: -20px; }
/* Monochrome navigation glyphs need contrast; artwork and screenshots are untouched. */
html[data-theme="light"] #main svg[stroke="rgb(255, 255, 255)"],
html[data-theme="light"] #main svg[stroke="rgb(255, 247, 245)"] {
  stroke: var(--site-strong);
}
/* Original monochrome company marks: Cymbal, Dropbox, Facebook, Google.
   Scope by asset identity so photos, avatars, and product screens are unaffected. */
html #main img:is(
  [src*="/hLqhM4d14KfBke8vTMFoI92Hz4"],
  [src*="/Wo9jaY2neLTvgX2k0RtrYuuD734"],
  [src*="/wpyUfpH5PGXVtdRa5kuefpOwe6o"],
  [src*="/D3dExpaJfynuG5GuVDjh7Pn3xQ"]
) { filter: var(--company-logo-filter, none); }
html[data-theme="light"] { --company-logo-filter: brightness(0); }
html[data-theme="dark"] { --company-logo-filter: none; }

/* Temporarily hide case-study entry links; keep destinations and styling for later. */
.portfolio-case-link { display: none; }

/* Avatar name cards need their own light palette, including Framer's border layer. */
html[data-theme="light"] #main .framer-ikQE0 .framer-12me0y6 {
  background-color: var(--site-surface) !important;
  --border-color: var(--site-border) !important;
  box-shadow: none;
}
html[data-theme="light"] #main .framer-12me0y6 .framer-17vcb41 .framer-text {
  --framer-text-color: #242424 !important;
}
html[data-theme="light"] #main .framer-12me0y6 .framer-8hqhnt .framer-text {
  --framer-text-color: #66635f !important;
}