/* ==========================================================================
   TOKO Clothing — personal project case study (page-only rules).
   Converted to the shared case-study language (case-study.css, loaded
   before this file) on 5 Oct 2026; the page's earlier warm-monochrome
   system and dark "tactical" Ad Desk treatment were retired by request.
   ========================================================================== */

/* Hero glow, sampled from TOKO's own homepage photography: zoomed in tight
   (700%) and saturated so the blur lands on the vivid yellow and red/blue
   signage rather than averaging out to grey. */
.hero_blob {
  background-image: url('../../assets/photos/toko-landing.jpg');
  background-size: 700% auto;
  filter: blur(64px) saturate(1.8);
}
.hero_blob-a { background-position: 18% 32%; opacity: 0.4; }
.hero_blob-b { background-position: 76% 43%; opacity: 0.38; }

/* The live Ad Desk tool, embedded in a media well. Fixed height with its
   own internal scroll, since the tool is longer than any viewport. */
.embed-frame { display: block; width: 100%; height: 820px; border: 0; border-radius: var(--radius-inner); background: #050505; }
@media (min-width: 64em) { .embed-frame { height: 900px; } }

/* Audience: persona card beside the spend figures. */
.audience-grid { display: grid; gap: var(--grid-gap); margin-top: var(--space-6); }
@media (min-width: 64em) {
  /* Persona on columns 1–4, spend figures on 5–12. */
  .audience-grid { grid-template-columns: var(--grid-12); align-items: start; }
  .audience-grid > :nth-child(1) { grid-column: 1 / span 4; }
  .audience-grid > :nth-child(2) { grid-column: 5 / span 8; }
}
.audience-grid .kpi-grid { margin-top: 0; }