/* MW SEND / Studio DESIGN-CANON tokens
   Source: muse-design-canon-2026-10-28/DESIGN-CANON.md
   Visual family: kit1c-one-panel (quiet cream panel, Playfair + Source Sans, single crimson underline)
   DRAFT marketing mocks — do not deploy without Matt 👍.
   Sole accent is product crimson #B3272D (NOT Muse social #d10042).
   Elegance pass 2026-10-28: more whitespace, softer shadow, fewer competing accents. */

:root {
  /* Surfaces */
  --cream: #FAF6EF;
  --panel: #FFFDF8;
  --panel-2: #F6EEE6;
  --ink: #1C1915;
  --ink-soft: #4A443A;
  --muted: #857B68;
  --hairline: #E5DBD0;

  /* Sole accent — MW SEND / Studio crimson */
  --crimson: #B3272D;
  --crimson-hover: #93191F;
  --crimson-pressed: #7E141A;
  --on-accent: #FFFDF8;

  /* Waveform gold — artwork / waveform contexts only */
  --wave-gold: #C5A880;
  --wave-soft: #E5DBD0;

  /* Type — kit1c: large Playfair (weight 400), restrained Source Sans body */
  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Geometry — centered ~1080px focus column */
  --radius: 14px;
  --radius-pill: 999px;
  --wrap: 1120px;
  --focus: 1080px;
  --pad: 32px;
  --pad-panel: 44px;
  --section: 72px;

  /* Warm shadows — match kit1c / desktop simplification */
  --shadow:
    0 18px 50px rgba(70, 32, 25, 0.10),
    0 2px 8px rgba(70, 32, 25, 0.06);
  --shadow-soft:
    0 1px 2px rgba(28, 25, 21, 0.04),
    0 10px 28px rgba(28, 25, 21, 0.05);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Little Fader — supporting presence only (≤ ~20%)
   Never adjacent to mailto / CTA / form buttons / price.
   Lead-capture: omitted. Invite + relationships: idle/presence stills only. */
.fader-row { display: flex; align-items: flex-end; gap: 20px; }
.fader-row > :first-child { flex: 1 1 auto; min-width: 0; }
.fader-presence {
  display: block; flex: 0 0 auto;
  width: auto; height: auto; max-height: 96px; max-width: 96px;
  object-fit: contain; pointer-events: none; user-select: none;
  filter: drop-shadow(0 4px 8px rgba(28, 25, 21, 0.10));
  opacity: 0.92;
}
@media (max-width: 640px) {
  .fader-presence { max-height: 64px; max-width: 64px; }
}