/* neil-case.css -- the case-file chrome for sites (CLAUDE.md rule 2l, reel DfARLbbIVry, 2026-10-27).
   Same language as the videos: a tiny mono series chip, and one rubber-stamp word per project.
   Set your project's own colour and word; never share them across sites (rule 2g).
     --case-ink     chip text (default: currentColor at 70%)
     --case-stamp   stamp colour (default: currentColor)
   <div class="case-chip"><b>GADGET UP</b><span>CASE 004 . THE DRONE</span></div>
   <span class="case-stamp" data-stamp>BUILT</span>     -> lands when scrolled into view
   Compositor-only motion (transform/opacity), honours prefers-reduced-motion, mouse-free. */
.case-chip { display: flex; justify-content: space-between; gap: 1rem; font: 500 .72rem/1 ui-monospace, "IBM Plex Mono", Consolas, monospace;
  letter-spacing: .22em; text-transform: uppercase; color: var(--case-ink, color-mix(in srgb, currentColor 70%, transparent)); }
.case-chip b { color: currentColor; font-weight: 700; }
.case-stamp-wrap { margin: 1.1rem 0 0; font-size: clamp(1.5rem, 5.5vw, 2.4rem); }
.case-foot { margin: 1.5rem auto 0; max-width: 72rem; padding: 0 1.25rem 1.25rem; opacity: .85; }
.case-stamp { --case-stamp: var(--signal, var(--accent, currentColor)); display: inline-block; padding: .15em .5em; border: .14em double var(--case-stamp, currentColor); border-radius: .2em;
  color: var(--case-stamp, currentColor); font: 800 1em/1 var(--font-display, inherit); letter-spacing: .12em; text-transform: uppercase;
  transform: rotate(-9deg); transform-origin: 50% 60%; }
.case-stamp[data-stamp]:not(.is-in) { opacity: 0; transform: rotate(-9deg) scale(2.4); }
.case-stamp[data-stamp].is-in { opacity: .94; transform: rotate(-9deg) scale(1);
  transition: transform .2s cubic-bezier(.2,1.6,.4,1), opacity .12s cubic-bezier(.22,1,.36,1); }
@media (prefers-reduced-motion: reduce) {
  .case-stamp[data-stamp]:not(.is-in) { opacity: .94; transform: rotate(-9deg); }
  .case-stamp[data-stamp].is-in { transition: none; }
}