/* ─────────────────────────────────────────────────────────────
   Scattered Magic — Logo / Sigil system
   ─────────────────────────────────────────────────────────────

   One mark, two contexts: full butterfly+rays everywhere it fits,
   wordmark as the fallback for spaces too small to read the rays.

   Rule of thumb:
     ≥ 56px square  → use .sm-mark (butterfly + rays)
     < 56px         → use .sm-wordmark (slab serif wordmark)

   NEVER type out "scattered magic" in Fraunces for logo purposes.
   Fraunces italic is the editorial headline voice, not the logo.

   Assets are fixed-color PNGs; pick the variant by surface:
     .sm-mark.on-light  → black ink (for cream / white surfaces)
     .sm-mark.on-dark   → cream (for orange / night surfaces)

   Depends on --font-display, --neon-orange, --ink, --moon.
   ───────────────────────────────────────────────────────────── */

/* ── PRIMARY MARK — butterfly + sunburst rays ───────────────── */
.sm-mark {
  display: inline-block;
  width: 88px;
  height: 88px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
}
.sm-mark.on-light { background-image: url("../assets/logo/mark-dark.png"); }
.sm-mark.on-dark  { background-image: url("../assets/logo/mark-light.png"); }
/* Orange-linework variant — for use on ink/black surfaces where you want
   the mark itself to be the neon moment instead of the ground. Pairs with
   the ink-ground avatar and any dark ritual context. */
.sm-mark.on-ink-orange { background-image: url("../assets/logo/mark-orange.png"); }

/* Size modifiers — all preserve the rays */
.sm-mark.xs { width: 56px;  height: 56px;  }   /* minimum — rays still legible */
.sm-mark.sm { width: 72px;  height: 72px;  }
.sm-mark.md { width: 88px;  height: 88px;  }   /* default */
.sm-mark.lg { width: 128px; height: 128px; }
.sm-mark.xl { width: 192px; height: 192px; }   /* hero */
.sm-mark.xxl{ width: 280px; height: 280px; }   /* oversized hero */

/* ── PODCAST LOCKUP — circular with curved wordmark ─────────── */
.sm-podcast {
  display: inline-block;
  width: 180px;
  height: 180px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
}
.sm-podcast.on-light { background-image: url("../assets/logo/podcast-dark.png"); }
.sm-podcast.on-dark  { background-image: url("../assets/logo/podcast-light.png"); }
.sm-podcast.sm { width: 120px; height: 120px; }
.sm-podcast.md { width: 180px; height: 180px; }
.sm-podcast.lg { width: 260px; height: 260px; }

/* ── WORDMARK — the official slab serif "SCATTERED MAGIC." ──── */
/* This is a locked vector/raster asset — the letterforms themselves
   are the brand. Do not substitute a typeface. Use this anywhere the
   word "scattered magic" appears as a logo/identifier (headers, corners,
   footers, nav) — NOT for headlines or body copy.
   
   Fraunces italic is the BRAND VOICE typeface for editorial headlines and
   pull-quotes; it is NOT the wordmark. Never use Fraunces to spell
   "scattered magic" as a logo. */
.sm-wordmark {
  display: inline-block;
  height: 40px;                    /* sized by height; width auto */
  aspect-ratio: 386 / 152;         /* native wordmark ratio */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
  vertical-align: middle;
}
.sm-wordmark.on-light { background-image: url("../assets/logo/wordmark-dark.png"); }
.sm-wordmark.on-dark  { background-image: url("../assets/logo/wordmark-light.png"); }
/* Orange wordmark — pairs with .sm-mark.on-ink-orange in the
   approved brand-sheet horizontal lockup (orange-on-cream). */
.sm-wordmark.on-ink-orange { background-image: url("../assets/logo/wordmark-orange.png"); }

/* Size variants — height drives scale */
.sm-wordmark.xs { height: 24px; }
.sm-wordmark.sm { height: 32px; }
.sm-wordmark.md { height: 40px; }   /* default */
.sm-wordmark.lg { height: 64px; }
.sm-wordmark.xl { height: 96px; }
.sm-wordmark.xxl{ height: 140px; }

/* ── FULL HORIZONTAL LOCKUP — mark + wordmark side-by-side ──── */
/* Hero/footer composition. Composes the mark + wordmark images into
   the approved horizontal lockup (as seen on the brand sheet). */
.sm-lockup {
  display: inline-flex;
  align-items: center;
  gap: 18px;
}
.sm-lockup .sm-wordmark { height: 56px; }
.sm-lockup.sm { gap: 12px; }
.sm-lockup.sm .sm-mark { width: 56px; height: 56px; }
.sm-lockup.sm .sm-wordmark { height: 36px; }
.sm-lockup.lg { gap: 28px; }
.sm-lockup.lg .sm-mark { width: 128px; height: 128px; }
.sm-lockup.lg .sm-wordmark { height: 84px; }

/* ── BRAND-SHEET HORIZONTAL LOCKUP — LOCKED via tuner ──────────
   ─────────────────────────────────────────────────────────────────
   Locked values: mark 96 / wordmark 56 / spacing −12 (default).
   The user dialed these in against the spec sheet on 2026-05-04.

   IMPORTANT: CSS `gap` floors at 0 in flexbox — it cannot pull items
   closer. Negative spacing is applied as `margin-left` on the
   wordmark instead. Do not switch back to `gap` for this lockup.

   Spacing scales linearly with mark size:
       spacing(variant) = −12 × (mark / 96)
   ───────────────────────────────────────────────────────────────── */
.sm-lockup.tight {
  align-items: center;
  gap: 0;
}
.sm-lockup.tight .sm-mark      { width: 96px;  height: 96px;  }
.sm-lockup.tight .sm-wordmark  { height: 56px; margin-left: -12px; }

/* sm — mark 64 / wordmark 36 / spacing −8 (linear: −12 × 64/96) */
.sm-lockup.tight.sm .sm-mark   { width: 64px;  height: 64px;  }
.sm-lockup.tight.sm .sm-wordmark { height: 36px; margin-left: -8px; }

/* lg — mark 144 / wordmark 84 / spacing −18 (linear: −12 × 144/96) */
.sm-lockup.tight.lg .sm-mark   { width: 144px; height: 144px; }
.sm-lockup.tight.lg .sm-wordmark { height: 84px; margin-left: -18px; }

/* xl — mark 192 / wordmark 112 / spacing −24 (linear: −12 × 192/96) */
.sm-lockup.tight.xl .sm-mark   { width: 192px; height: 192px; }
.sm-lockup.tight.xl .sm-wordmark { height: 112px; margin-left: -24px; }

/* ── MARK AS DECORATIVE SIGIL (behind type, in corners) ────── */
/* Use this when the mark is a design accent, not a brand identifier.
   Reduces opacity so the mark sits behind rather than competing. */
.sm-sigil {
  opacity: 0.85;
}
.sm-sigil.subtle { opacity: 0.35; }
.sm-sigil.ghost  { opacity: 0.15; }