/* =====================================================================
   Daytime Design Co. — Case Study palette: Vayda Mental Health Collab.
   Structure lives in case-study.css. This file is Vayda's palette plus
   the one flourish that belongs only to Vayda (the spinning star).
   Load order: styles.css → case-study.css → vayda.css → anim.css
   Hero mode: cs-hero--light (light field, so the nav carries nav--dark)
   Sampled from the brand + Figma "Case Study — Vayda" (342:1554)
   ===================================================================== */

:root {
  /* the spine's palette contract */
  --cs-hero-field:  #c2e0cf;              /* hero mint field */
  --cs-hero-strip:  #b0d4c1;              /* meta strip — mint, deepened */
  --cs-paper:       #fefefc;              /* every editorial section */
  --cs-cream:       var(--c-cream);       /* the outcome band */
  --cs-screen:      #f7f0e2;              /* Vayda warm cream, behind screens */
  --cs-chrome:      #fdfbf6;              /* browser chrome bar */
  --cs-web-field:   #a4b0ea;              /* periwinkle — the web band */
  --cs-web-ink:     #20211c;
  --cs-web-shadow:  rgba(38, 44, 84, 0.28);
  --cs-words-field: #f79ad3;              /* bubblegum — the quote band */
  --cs-pair-card:   #f7f0e2;

  /* the rest of the Vayda brand, for reference and for the cards below */
  --vy-marigold:  #fbc153;
  --vy-lime:      #ebf98a;
  --vy-coral:     #e8542f;
  --vy-olive:     #838030;
  --vy-pine:      #14352d;
}

/* ---------- hero art — the poster sits on a slight tilt ---------- */
.vayda-poster { width: min(700px, 100%); transform: rotate(4deg); }
@media (max-width: 820px) { .vayda-poster { transform: rotate(2.5deg); } }

/* ---------- Vayda-only flourish — the star turning over module 3 ---------- */
.vayda-star-stage { position: relative; }
.vayda-star {
  position: absolute; z-index: 3; top: 20%; left: 6.5%;
  width: clamp(64px, 8vw, 118px); height: auto;
}
@media (prefers-reduced-motion: no-preference) {
  .vayda-star { animation: vayda-spin 14s linear infinite; }
  @keyframes vayda-spin { to { transform: rotate(360deg); } }
}

/* ---------- pair card tints — show through if an image ever fails ---------- */
.cs-pair__card--bubblegum { background: #f79ad3; }
.cs-pair__card--marigold  { background: var(--vy-marigold); }
.cs-pair__card--cream     { background: #f7f0e2; }
.cs-pair__card--mint      { background: #c2e0cf; }
.cs-pair__card--photo     { background: #f7f0e2; }