/* Booth case study — reuses the shared besties.css shell, retuned to a warm
   monochrome accent to match Booth's near-black + cream identity. */

:root {
  --coral: #6b5f4e;                    /* warm taupe for eyebrows / labels / tags */
  --coral-ink: #1a1a1a;                /* ink for active nav + emphasis */
  --panel: #F1EEE7;                    /* neutral warm panel (no pink) */
  --panel-line: rgba(60, 50, 40, .16);
}

/* hero banner — Booth's dark, film-grain card visual (mirrors the Besties hero slot) */
.hero-banner { background: #1B1A16; }
.hero-banner::after {
  top: -50%; left: -50%; right: auto; bottom: auto; width: 200%; height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.42' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 300px 300px; background-repeat: repeat;
  opacity: .55; mix-blend-mode: overlay; will-change: transform;
  animation: booth-grain .5s steps(1) infinite;
}
@keyframes booth-grain {
  0%   { transform: translate(0, 0); }
  12%  { transform: translate(-7%, 4%); }
  25%  { transform: translate(6%, -8%); }
  37%  { transform: translate(-9%, -3%); }
  50%  { transform: translate(8%, 7%); }
  62%  { transform: translate(-4%, 9%); }
  75%  { transform: translate(9%, -5%); }
  87%  { transform: translate(-8%, -8%); }
}
@media (prefers-reduced-motion: reduce) { .hero-banner::after { animation: none; } }
.hero-banner img { width: auto; max-width: 78%; height: clamp(190px, 26vw, 280px); }

/* TL;DR — a prominent plain intro paragraph */
.tldr p { font-size: clamp(17px, 2vw, 20px); line-height: 1.65; color: var(--ink); margin-top: 12px; }

/* metadata as a quiet panel */
.meta {
  background: var(--panel); border: 0; border-radius: 18px;
  padding: 26px 30px; margin-top: 40px;
}
.meta .label { color: var(--coral); }

/* North star — highlighted panel */
.northstar { margin-top: 28px; background: var(--panel); border-radius: 18px; padding: 24px 28px; }
.northstar .lead-in {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--coral); margin-bottom: 12px;
}
.northstar .lead-in svg { width: 14px; height: 14px; }
.northstar .ns-q { font-size: clamp(17px, 1.9vw, 21px); line-height: 1.5; color: var(--ink); }

/* concept-card icons */
.card .cicon { width: 20px; height: 20px; color: var(--coral); display: block; margin-bottom: 12px; }

/* playful in-progress footer */
.soon { margin-top: 84px; text-align: center; font-style: italic; color: var(--muted); font-size: 14px; letter-spacing: .02em; }