/* ═══════════════════════════════════════════════════════════════════════════
   Media Forest — Darkroom brand layer.

   The utilities for the drawn assets in this folder. It defines NO selector
   that an existing component uses, and it declares no design tokens: the
   palette lives in tokens.css, which loads first, and every SVG in this folder
   paints through var(--token, literal) so it still renders correctly when
   loaded through <img> or background-image, where there is no cascade to
   inherit from.

   Load order: tokens.css → brand.css → app.css → darkroom.css → adultswim.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the mark ──────────────────────────────────────────────────────────────
   Use aperture-micro at 32px and under: the default cut's 1.3px seams start
   disappearing around 40px and the mark collapses into a disc. */
.mf-mark{ display:block; width:var(--mf-mark-size,40px); height:var(--mf-mark-size,40px); }

/* ── icons ─────────────────────────────────────────────────────────────────
   <svg class="ic" aria-hidden="true"><use href="/static/brand/icons.svg#i-play"/></svg>
   Drawn on a 24 grid at a fixed 1.5 stroke, for 20–28px. Past 32px the weight
   reads heavy; below 18px the interior detail closes up. Use fewer, larger
   icons rather than scaling these down. */
.ic{ width:var(--ic-size,20px); height:var(--ic-size,20px); flex:none; display:block; }

/* ── sprocket rule ─────────────────────────────────────────────────────────
   The tile is a token (--sprocket-tile) so a theme can retire it; this is the
   utility that repeats it. */
.sprocket{ height:14px; background-repeat:repeat-x; background-image:var(--sprocket-tile); }

/* ── grain ─────────────────────────────────────────────────────────────────
   Apply to a surface, never to body. Baked PNG: no filter, no blend mode, no
   compositing group. */
.grained{ background-image:var(--grain-tile); background-repeat:repeat; }

/* ── registration ──────────────────────────────────────────────────────────
   Corner brackets imply the frame; drawing the frame is the cheaper-looking
   option of the two. */
.reg{ width:16px; height:16px; }

/* ── the iris loader ───────────────────────────────────────────────────────
   The animation and its reduced-motion opt-out live inside
   aperture-loader.svg, so this works in an <img>. Inline the file instead only
   when the blades need recolouring. */
.mf-loader{ width:var(--mf-loader-size,48px); height:var(--mf-loader-size,48px); }