/* Lou customer foundation — local candidate, source map in SOURCE-MAP.json. */
:root {
  --radius-none: 0px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --frost-blur: 25px;
  --frost-saturate: 1.2;
  --frost-fill: oklch(0.99 0.004 85 / 0.1);
  --frost-border: oklch(1 0 0 / 0.55);
  --frost-grain-opacity: 0.5;
  --frost-fallback: oklch(0.99 0.004 85 / 0.92);
  --cx-ink: oklch(0.16 0.01 85);
  --cx-bone: oklch(0.995 0.004 85);
  --cx-teal: oklch(0.4347 0.0703 204.38);
  --cx-atmosphere: radial-gradient(ellipse 36rem 28rem at 95% 38%, color-mix(in oklab, var(--cx-teal) 24%, var(--cx-bone)), transparent 76%), radial-gradient(ellipse 30rem 24rem at 5% 65%, color-mix(in oklab, oklch(0.592 0.2339 27.95) 7%, var(--cx-bone)), transparent 76%), radial-gradient(ellipse 34rem 26rem at 55% 100%, color-mix(in oklab, oklch(0.5731 0.2145 258.25) 6%, var(--cx-bone)), transparent 80%);
  --cx-line: color-mix(in oklab, var(--cx-ink) 14%, transparent);
  --cx-line-strong: color-mix(in oklab, var(--cx-ink) 28%, transparent);
  --cx-surface: color-mix(in oklab, var(--cx-ink) 4%, var(--cx-bone));
  --cx-display: 'acumin-pro-semi-condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --cx-body: 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  --cx-body-size: 0.9375rem;
  --cx-meta-size: 0.75rem;
  --cx-heading-size: 1.25rem;
  --cx-title-size: 1.75rem;
}

.lou-cx {
  background: var(--cx-bone);
  background-image: var(--cx-atmosphere);
  background-repeat: no-repeat;
  color: var(--cx-ink);
  font-family: var(--cx-body);
  font-size: var(--cx-body-size);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.lou-cx *, .lou-cx *::before, .lou-cx *::after { box-sizing: border-box; }
.lou-cx a { color: inherit; text-underline-offset: 0.2em; }
.lou-cx :focus-visible { outline: 2px solid var(--cx-ink); outline-offset: 4px; }
.cx-page { width: 100%; max-width: 48rem; margin-inline: auto; padding: var(--space-lg) var(--space-md); }
.cx-title { font: 700 var(--cx-title-size)/1.05 var(--cx-display); letter-spacing: -0.02em; color: var(--cx-ink); }
.cx-heading { font: 700 var(--cx-heading-size)/1.1 var(--cx-display); letter-spacing: -0.01em; color: var(--cx-ink); }
.cx-meta { font: 400 var(--cx-meta-size)/1.4 var(--cx-body); color: var(--cx-ink); }
.cx-logo { display: block; width: 64px; height: auto; aspect-ratio: 240 / 132; }
.lou-cx .logo-link { width: 64px; margin: 0 0 var(--space-lg); }
.lou-cx .logo-link img { width: 100%; height: auto; aspect-ratio: 240 / 132; }
.lou-cx .page-intro { margin-bottom: var(--space-md); }
.lou-cx .lookup-card { border-radius: var(--radius-md); box-shadow: none; }
.lou-cx.embed-mode { background-color: var(--cx-bone); background-image: var(--cx-atmosphere); }
.cx-pane {
  position: relative;
  isolation: isolate;
  background: var(--frost-fill);
  border: 1px solid var(--frost-border);
  border-radius: var(--radius-md);
  color: var(--cx-ink);
  -webkit-backdrop-filter: blur(var(--frost-blur)) saturate(var(--frost-saturate));
  backdrop-filter: blur(var(--frost-blur)) saturate(var(--frost-saturate));
}
.cx-pane::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: calc(var(--frost-grain-opacity) * 0.12);
  mix-blend-mode: overlay;
  background-image: url("./cx-grain.svg");
  background-size: 240px 240px;
}
.cx-button {
  min-height: 44px;
  border: 1px solid var(--cx-ink);
  border-radius: var(--radius-pill);
  padding: var(--space-sm) var(--space-lg);
  background: var(--cx-ink);
  color: var(--cx-bone);
  font: 500 0.875rem/1 var(--cx-body);
  text-transform: none;
  cursor: pointer;
}
.cx-button:disabled { cursor: not-allowed; }
.cx-field { min-height: 48px; border-radius: var(--radius-sm); font: 400 1rem/1.55 var(--cx-body); }
.cx-stack { display: grid; gap: var(--space-md); }
.cx-notice { padding: var(--space-md); border: 1px solid currentColor; border-radius: var(--radius-sm); color: var(--cx-ink); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cx-pane { background: var(--frost-fallback); }
}
@media (min-width: 800px) {
  :root { --cx-body-size: 1rem; --cx-meta-size: 0.8125rem; --cx-heading-size: 1.5rem; --cx-title-size: 2.5rem; }
  .cx-page { padding: var(--space-2xl) var(--space-xl); }
  .cx-button { font-size: 0.9375rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lou-cx *, .lou-cx *::before, .lou-cx *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* R6: one complete study after the essential action; no artwork behind controls. */
.cx-study { margin: 0 0 var(--space-lg); display: grid; justify-items: center; gap: var(--space-sm); }
.cx-study img { display: block; max-width: 100%; width: min(100%, 18rem); height: auto; object-fit: contain; opacity: 1; }
.cx-craft-media { margin: var(--space-lg) 0; border-top: 1px solid color-mix(in oklch, var(--cx-ink) 16%, transparent); }
.cx-craft-media figure { margin: var(--space-sm) 0 0; display: grid; gap: var(--space-sm); }
.cx-craft-media video { display: block; width: 100%; max-width: 30rem; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); background: var(--cx-ink); }


.cx-craft-media video.cx-portrait-video { width: min(100%, 15rem); aspect-ratio: 3 / 4; object-fit: contain; }

.cx-studio { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid color-mix(in oklch, var(--cx-ink) 16%, transparent); }
.cx-study img[src$="handcraft-study.jpg"] { width: 100%; max-width: 30rem; }