/* =====================================================================
   Daytime Design Co. — Case Study palette: Huckberry Farm
   Structure lives in case-study.css. This file is Huckberry's palette
   plus the hero device stack sizing. Nothing else belongs here.
   Load order: styles.css → case-study.css → huckberry.css → anim.css
   Hero mode: cs-hero--dark (deep field, so the nav stays cream)
   Sampled from the brand + Figma "Case Study — Huckberry" (403:1038)
   ===================================================================== */

:root {
  /* the spine's palette contract */
  --cs-hero-field:  #756957;              /* field olive */
  --cs-hero-strip:  #6e6252;              /* meta strip — field at 6% black */
  --cs-paper:       #fcfcfc;              /* every editorial section */
  --cs-cream:       #f9f5eb;              /* the outcome band */
  --cs-screen:      #f7ebde;              /* linen, behind screens */
  --cs-chrome:      #efeae0;              /* browser chrome bar */
  --cs-web-field:   #756957;              /* the web band, same field as the hero */
  --cs-web-ink:     #fcfcfc;
  --cs-web-shadow:  rgba(20, 26, 22, 0.32);
  --cs-words-field: #746654;              /* bark brown — the quote band */
  --cs-pair-card:   #ddd5b5;              /* oat */

  /* two words, two lines */
  --cs-hero-measure: 11ch;

  /* the rest of the twelve, for reference */
  --hb-olive:     #a58e63;
  --hb-oat-deep:  #b5ad8d;
  --hb-clay:      #e7d8d1;                /* soft barn clay */
  --hb-bark:      #3b3324;                /* bark ink */
}

/* ---------- hero art — the device stack spills off the right edge ---------- */
.huckberry-devices {
  width: min(700px, 112%);
  margin-right: clamp(-90px, -4vw, 0px);
}
@media (max-width: 1100px) {
  .huckberry-devices { width: min(560px, 100%); margin-right: 0; }
}

/* ---------- kind words — no portrait yet, so the quote centers solo on the field ---------- */
.cs-words--solo .cs-words__grid {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}
.cs-words--solo .cs-words__body { max-width: 640px; }
.cs-words--solo .cs-words__quote { color: var(--cs-web-ink); margin-left: auto; margin-right: auto; }
.cs-words--solo .cs-words__name { color: var(--cs-web-ink); }
.cs-words--solo .cs-words__role { color: var(--hb-clay); }
.cs-words--solo .cs-mono--red { color: var(--hb-clay); }