/* ============================================================================
   Blog article art system (Leonard 2026-06)
   A blend of two design concepts:
   - Posts WITH a hero product  -> "Material & Atmosphere": deep-navy gradient mesh
     + engineering grid + SVG grain + colour-tinted contact shadow + accent sweep,
     with the transparent product cutout floating (.ml-art / Concept B).
   - Posts WITHOUT a product    -> "Technical Blueprint": a light spec-drawing cover
     (cross-sections, dimension lines, mono callouts) (.ml-bp / Concept A).
   One <section class="ml-cover"> wraps either art panel + the title overlay; the
   blog-index cards reuse the same panels at card scale. Fonts/colours inherit the
   theme tokens. Build is pure CSS+SVG (no photos), crisp at any size.
   ========================================================================== */

:root {
  --art-navy: #191640;
  --art-blue: #2a3d98;
  --art-red:  #d02629;
  --art-shadow-card:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 18px 34px -18px rgba(25,22,64,.55),
    0 48px 90px -40px rgba(10,10,10,.55);
}

/* ---------- shared cover shell (hero) ---------- */
.ml-cover {
  position: relative; width: 100%; aspect-ratio: 1200 / 520;
  border-radius: var(--radius-lg, 18px); overflow: hidden;
  box-shadow: var(--art-shadow-card);
  isolation: isolate;
}
.ml-cover__copy {
  position: absolute; z-index: 5; left: clamp(24px, 4.4%, 56px); right: 44%;
  top: 50%; transform: translateY(-50%);
}
.ml-cover__eyebrow {
  font-family: var(--font-mono, "JetBrains Mono", monospace); font-weight: 600;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 18px;
}
.ml-cover__eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255,255,255,.06);
}
.ml-cover__title {
  font-family: var(--font-display, "Inter Tight", sans-serif); font-weight: 700;
  letter-spacing: -.035em; font-size: clamp(25px, 3.3vw, 42px); line-height: 1.03;
  margin: 0 0 20px; text-wrap: balance;
}
.ml-cover__meta {
  display: flex; align-items: center; gap: 13px; flex-wrap: wrap;
  font-family: var(--font-mono, "JetBrains Mono", monospace); font-weight: 500;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
}
.ml-cover__meta .sep { width: 4px; height: 4px; border-radius: 50%; opacity: .55; background: currentColor; }
.ml-cover__brand {
  position: absolute; z-index: 5; top: 24px; left: clamp(24px, 4.4%, 56px);
  font-family: var(--font-display, "Inter Tight", sans-serif); font-weight: 700;
  letter-spacing: -.02em; font-size: 15px; display: flex; align-items: center; gap: 7px;
}
.ml-cover__brand .lk { color: var(--art-red); }
.ml-cover__idx {
  position: absolute; z-index: 5; top: 26px; right: clamp(24px, 4.4%, 56px);
  font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 10.5px;
  letter-spacing: .2em; text-transform: uppercase;
}

/* =====================================================================
   ATMOSPHERE PANEL (.ml-art) -- product posts
   ===================================================================== */
.ml-art { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--art-navy); color: #fff; }
.ml-art::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(80% 120% at var(--mx1,78%) var(--my1,18%), var(--c1) 0%, transparent 58%),
    radial-gradient(70% 90% at var(--mx2,18%) var(--my2,88%), var(--c2) 0%, transparent 60%),
    radial-gradient(120% 140% at var(--mx3,52%) var(--my3,-10%), var(--c3) 0%, transparent 70%),
    linear-gradient(160deg, #211d52 0%, var(--art-navy) 44%, #100e2c 100%);
}
.ml-art__grid {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(70% 80% at 60% 46%, #000 0%, transparent 78%);
          mask-image: radial-gradient(70% 80% at 60% 46%, #000 0%, transparent 78%);
  opacity: .6;
}
.ml-art__ticks {
  position: absolute; left: 0; right: 0; bottom: 0; height: 22px; z-index: 1; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 1px, transparent 1px 30px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  opacity: .5;
}
.ml-art__arc { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ml-art__veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10,9,28,.74) 0%, rgba(10,9,28,.30) 38%, transparent 64%),
    linear-gradient(0deg, rgba(8,7,22,.62) 0%, transparent 46%);
}
.ml-art__grain { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .5; mix-blend-mode: overlay; }
.ml-art__bloom { position: absolute; z-index: 3; border-radius: 50%; filter: blur(34px); pointer-events: none; }
.ml-art__contact { position: absolute; z-index: 3; border-radius: 50%; filter: blur(18px); pointer-events: none; }
/* product staging -- a flexible bottom-right box so ANY cutout aspect fits */
.ml-art__stage {
  position: absolute; z-index: 4; right: 5%; bottom: 9%;
  width: 46%; height: 84%; display: flex; align-items: flex-end; justify-content: center;
  filter: drop-shadow(0 24px 26px rgba(10,10,10,.42));
}
.ml-art__stage img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* category temperatures (mesh hotspots + accent) */
.ml-cat-comparisons { --c1: rgba(208,38,41,.46); --c2: rgba(33,49,129,.55); --c3: rgba(120,30,52,.5);  --accent: #ff5a4d; --eye: #ff8b81; --contact: rgba(208,38,41,.5); }
.ml-cat-howtos      { --mx1:74%; --my1:24%; --mx2:14%; --my2:84%; --c1: rgba(56,189,248,.5); --c2: rgba(33,49,129,.62); --c3: rgba(20,80,160,.5); --accent: #49d3ff; --eye: #9fe7ff; --contact: rgba(73,211,255,.5); }
.ml-cat-insights    { --mx1:80%; --my1:30%; --mx2:16%; --my2:80%; --c1: rgba(96,130,200,.5); --c2: rgba(33,49,129,.66); --c3: rgba(70,95,160,.46); --accent: #8fb4ff; --eye: #bcd0ff; --contact: rgba(143,180,255,.5); }
.ml-cat-deepdive    { --c1: rgba(214,170,90,.42); --c2: rgba(33,49,129,.6); --c3: rgba(150,110,40,.4); --accent: #f0c069; --eye: #f4d39a; --contact: rgba(214,170,90,.5); }

/* Scope to the cover (not .ml-art) so the category eyebrow keeps its light --eye
   colour in BOTH layouts -- the desktop overlay AND the mobile two-zone band, where
   the eyebrow sits outside .ml-art and was falling back to near-black on the navy. */
.ml-cover--atmos .ml-cover__eyebrow { color: var(--eye); }
.ml-cover--atmos .ml-cover__eyebrow .dot { background: var(--accent); }
.ml-cover--atmos .ml-cover__title { color: #fff; text-shadow: 0 2px 30px rgba(8,7,22,.5); }
.ml-cover--atmos .ml-cover__meta { color: rgba(255,255,255,.72); }
.ml-cover--atmos .ml-cover__brand { color: rgba(255,255,255,.92); }
.ml-cover--atmos .ml-cover__idx { color: rgba(255,255,255,.5); }

/* =====================================================================
   BLUEPRINT PANEL (.ml-bp) -- product-less posts (light spec drawing)
   ===================================================================== */
.ml-bp { position: absolute; inset: 0; z-index: 0; background: #fff; }
.ml-bp svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ml-cover--bp { border: 1px solid var(--border-subtle, #e7e7e7); }

/* Blueprint cover (single-post HERO): two stacked zones, no overlay, no fade.
   The technical drawing renders in full up top (every mono label visible and
   un-cropped), then the article title / tag / date sit in a clean caption band
   beneath it. The drawing and the words never share space, so nothing overlaps
   or is hidden. Scoped to `.ml-cover.ml-cover--bp` -- the blog-index card art is
   `.ml-blog-card__art.ml-cover--bp` (no `.ml-cover`) and keeps its cropped
   thumbnail + corner tag untouched. */
.ml-cover.ml-cover--bp { aspect-ratio: auto; display: block; background: #fff; }
.ml-cover.ml-cover--bp .ml-bp { position: relative; inset: auto; }
.ml-cover.ml-cover--bp .ml-bp svg { position: relative; inset: auto; width: 100%; height: auto; }
.ml-cover.ml-cover--bp .ml-cover__copy {
  position: static; transform: none; inset: auto;
  padding: clamp(20px, 3vw, 32px) clamp(24px, 4.4%, 56px) clamp(22px, 3.2vw, 36px);
  border-top: 1px solid var(--border-subtle, #e7e7e7);
}

/* Eyebrow: a white pill on CARDS (it sits over the drawing). In the hero caption
   band it is plain text (the override below, higher specificity). */
.ml-cover--bp .ml-cover__eyebrow {
  color: var(--art-navy); background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  border: 1px solid var(--border-subtle, #e7e7e7); border-radius: 6px; padding: 6px 11px;
}
.ml-cover.ml-cover--bp .ml-cover__eyebrow { background: none; border: 0; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ml-cover--bp .ml-cover__eyebrow .dot { background: var(--art-blue); box-shadow: none; }
.ml-cover--bp .ml-cover__title { color: var(--art-navy); }
.ml-cover--bp .ml-cover__title em { font-style: normal; color: var(--art-red); }
.ml-cover--bp .ml-cover__meta { color: var(--neutral-600, #525252); }
.ml-cover--bp .ml-cover__brand { color: var(--art-navy); }
.ml-cover--bp .ml-cover__idx { color: var(--neutral-600, #525252); }

/* =====================================================================
   BLOG-INDEX CARD ART (reuses the panels at card aspect)
   ===================================================================== */
/* card art bleeds to the card's rounded top edge (the link has space-5 padding) */
.ml-blog-card__link > .ml-blog-card__art { margin: calc(-1 * var(--space-5, 20px)) calc(-1 * var(--space-5, 20px)) var(--space-5, 20px); width: auto; }
.ml-blog-card__art { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
/* single-post cover: .wp-site-blocks already pads by --header-space to clear the
   fixed header, so the cover only needs a small gap (NOT another --header-space,
   which doubled the top space). Leonard: sit it close under the menu bar. */
.ml-post-cover { padding-top: var(--space-3, 12px); padding-bottom: var(--space-2, 8px); }
.ml-blog-card__art .ml-art__stage { right: 7%; bottom: 8%; width: 56%; height: 80%; filter: drop-shadow(0 14px 16px rgba(10,10,10,.4)); }
.ml-blog-card__art .ml-art__veil { background: linear-gradient(0deg, rgba(8,7,22,.72) 0%, transparent 54%); }
.ml-blog-card__art .ml-cover__eyebrow { position: absolute; z-index: 5; left: 16px; bottom: 14px; right: 16px; margin: 0; font-size: 9.5px; letter-spacing: .18em; }
.ml-blog-card__art.ml-cover--bp .ml-cover__eyebrow { left: 13px; bottom: 13px; right: auto; }
.ml-blog-card__art .ml-art__grid { background-size: 30px 30px; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 900px) {
  .ml-cover { aspect-ratio: 1200 / 660; }
  .ml-cover__copy { right: 6%; top: auto; bottom: 0; transform: none; padding-bottom: clamp(20px,5vw,40px); }
  /* ATMOSPHERE cover on phones/tablets: the overlaid 4-line title collided with the
     floating product and ran past the art edge. Stack it like the blueprint -- the
     product art in a fixed top zone, the title / tag / date in a navy band beneath --
     so nothing overlaps. Desktop keeps the overlay. */
  .ml-cover.ml-cover--atmos { aspect-ratio: auto; display: block; background: var(--art-navy); }
  .ml-cover--atmos .ml-art { position: relative; inset: auto; height: 232px; }
  .ml-cover--atmos .ml-art__veil { background: linear-gradient(0deg, rgba(8,7,22,.5) 0%, transparent 58%); }
  .ml-cover--atmos .ml-art__stage { width: 54%; height: 76%; bottom: auto; top: 9%; right: 5%; align-items: flex-start; }
  .ml-cover--atmos .ml-cover__copy { position: static; transform: none; inset: auto; right: auto; padding: clamp(16px,4.5%,22px) clamp(18px,5%,26px) clamp(22px,5vw,30px); }
  .ml-cover--bp .ml-cover__copy { right: 6%; }
  /* Blueprint hero on phones: the drawing shrinks, so the absolutely-pinned
     "MightyLoc · Journal" masthead + corner category would land on the drawing's
     top labels. Drop them on small screens -- the caption band already carries the
     category + title. (The drawing is tap-to-zoom, so the small labels are still
     reachable.) */
  .ml-cover.ml-cover--bp .ml-cover__brand,
  .ml-cover.ml-cover--bp .ml-cover__idx,
  .ml-cover.ml-cover--atmos .ml-cover__brand,
  .ml-cover.ml-cover--atmos .ml-cover__idx { display: none; }
}

/* =====================================================================
   BLUEPRINT ZOOM (click / pinch to enlarge) -- blueprint-zoom.js
   ===================================================================== */
.ml-zoomable { cursor: zoom-in; }
.ml-zoomable:focus-visible { outline: 2px solid var(--color-brand-red, #d02629); outline-offset: 3px; }
/* Explicit, always-tappable zoom control pinned to each blueprint's corner. */
.ml-zoom-btn {
  position: absolute; bottom: 12px; right: 12px; z-index: 6;
  display: inline-flex; align-items: center; gap: 5px; min-height: 34px;
  padding: 7px 12px; border-radius: 999px; cursor: pointer;
  background: rgba(25, 22, 64, 0.86); color: #fff; border: 1px solid rgba(255, 255, 255, 0.3);
  font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  transition: background-color var(--duration-fast, 0.15s) ease;
}
.ml-zoom-btn:hover { background: rgba(25, 22, 64, 1); }
.ml-zoom-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ml-zoom-btn svg { display: block; }
.ml-zoom {
  position: fixed; inset: 0; z-index: 9999; display: none;
  background: rgba(10, 9, 28, 0.9);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.ml-zoom.is-open { display: block; }
.ml-zoom__stage {
  position: absolute; inset: 0; overflow: hidden; touch-action: none;
  display: flex; align-items: center; justify-content: center; cursor: grab;
}
.ml-zoom__stage.is-grabbing { cursor: grabbing; }
/* touch-action:none must also be on the touched descendants (the browser reads it
   from the element under the finger, not the listener), or it pans/zooms the page
   instead of letting our pinch/drag handlers run. */
.ml-zoom__stage, .ml-zoom__content, .ml-zoom__content svg { touch-action: none; }
.ml-zoom__content { will-change: transform; transform-origin: center center; }
.ml-zoom__content svg {
  width: min(94vw, 1500px); height: auto; max-height: 86vh; display: block;
  background: #fff; border-radius: 12px; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
}
/* Solid dark chrome so the close + hint stay visible over the WHITE blueprint when
   it is zoomed up to fill the screen (a translucent-white button vanished on white). */
.ml-zoom__close {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.45); background: rgba(25, 22, 64, 0.92);
  color: #fff; font-size: 24px; line-height: 1; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  transition: background-color var(--duration-fast, 0.15s) ease;
}
.ml-zoom__close:hover { background: rgba(25, 22, 64, 1); }
.ml-zoom__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ml-zoom__hint {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); margin: 0; z-index: 2;
  background: rgba(25, 22, 64, 0.82); padding: 7px 14px; border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 0.88); font-family: var(--font-mono, monospace);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; pointer-events: none; white-space: nowrap;
}

/* =====================================================================
   IN-ARTICLE BLUEPRINT FIGURE (.ml-figure / .ml-vs) -- the "versus" sheet
   ===================================================================== */
.ml-figure {
  margin: 36px 0; border: 1px solid var(--border-subtle, #e7e7e7); border-radius: 16px;
  background: #fff;
  background-image:
    linear-gradient(to right, rgba(25,22,64,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(25,22,64,.03) 1px, transparent 1px);
  background-size: 26px 26px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(25,22,64,.03), 0 18px 40px -30px rgba(25,22,64,.28);
}
.ml-figure__cap {
  padding: 18px 22px; border-bottom: 1px solid var(--border-subtle, #e7e7e7);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  font-family: var(--font-body, "Inter", sans-serif); color: var(--neutral-600, #525252); font-size: 14px;
}
.ml-figure__cap b { color: var(--art-navy, #191640); font-family: var(--font-display, "Inter Tight", sans-serif); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.ml-figure__eyebrow {
  font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 10px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--art-red, #d02629);
  border: 1px solid color-mix(in oklab, var(--art-red, #d02629) 35%, #fff); border-radius: 5px; padding: 3px 7px;
}
.ml-figure__caption { flex: 1 1 100%; font-size: 13.5px; line-height: 1.55; }
.ml-figure__note {
  margin: 0; padding: 12px 22px 16px; font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 10.5px; line-height: 1.6; letter-spacing: .02em; color: #8a8a93; border-top: 1px solid var(--border-subtle, #e7e7e7);
}

.ml-vs { display: block; }
.ml-vs__row { display: grid; grid-template-columns: 1fr 0.92fr 1fr; align-items: stretch; }
.ml-vs__row + .ml-vs__row { border-top: 1px solid var(--border-subtle, #e7e7e7); }
.ml-vs__row--head { border-bottom: 1px solid var(--border-subtle, #e7e7e7); background: var(--neutral-100, #f5f5f5); }
.ml-vs__col { padding: 16px 18px; display: flex; flex-direction: column; gap: 3px; text-align: center; }
.ml-vs__col--l { align-items: flex-end; text-align: right; }
.ml-vs__col--r { align-items: flex-start; text-align: left; }
.ml-vs__name { font-family: var(--font-display, "Inter Tight", sans-serif); font-weight: 700; font-size: 16px; color: var(--art-navy, #191640); letter-spacing: -0.01em; position: relative; padding-bottom: 5px; }
.ml-vs__name::after { content: ""; position: absolute; bottom: 0; width: 26px; height: 2px; border-radius: 2px; }
.ml-acc-red .ml-vs__name::after { background: var(--art-red, #d02629); }
.ml-acc-blue .ml-vs__name::after { background: var(--art-blue, #2a3d98); }
.ml-vs__col--l .ml-vs__name::after { right: 0; }
.ml-vs__col--r .ml-vs__name::after { left: 0; }
.ml-vs__sub { font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--neutral-600, #525252); }
.ml-vs__dim {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 14px 12px; border-left: 1px solid var(--border-subtle, #e7e7e7); border-right: 1px solid var(--border-subtle, #e7e7e7);
  font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 11px; letter-spacing: .04em;
  color: var(--art-navy, #191640); line-height: 1.4;
}
.ml-vs__dim--head { font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--neutral-600, #525252); }
.ml-vs__cell {
  padding: 14px 18px; display: flex; align-items: center; gap: 8px;
  font-family: var(--font-body, "Inter", sans-serif); font-size: 14px; color: var(--neutral-600, #525252);
}
.ml-vs__cell--l { justify-content: flex-end; text-align: right; }
.ml-vs__cell--r { justify-content: flex-start; text-align: left; }
.ml-vs__cell.is-win { color: var(--art-navy, #191640); font-weight: 600; background: color-mix(in oklab, var(--art-red, #d02629) 5%, #fff); }
.ml-vs__cell--r.is-win { background: color-mix(in oklab, var(--art-blue, #2a3d98) 6%, #fff); }
.ml-vs__tick { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.ml-vs__cell--l.is-win .ml-vs__tick { background: var(--art-red, #d02629); }
.ml-vs__cell--r.is-win .ml-vs__tick { background: var(--art-blue, #2a3d98); }

@media (max-width: 640px) {
  .ml-vs__row { grid-template-columns: 1fr 1fr; grid-template-areas: "dim dim" "l r"; padding-top: 0; }
  .ml-vs__row--head { grid-template-areas: "l r"; }
  .ml-vs__dim { grid-area: dim; border-left: 0; border-right: 0; border-bottom: 1px dashed var(--border-subtle, #e7e7e7); justify-content: center; padding: 9px 12px; }
  .ml-vs__dim--head { display: none; }
  .ml-vs__cell--l, .ml-vs__col--l { grid-area: l; }
  .ml-vs__cell--r, .ml-vs__col--r { grid-area: r; }
}

/* in-article diagram figures (UV light-path, 9025 cross-section) */
.ml-figure--diagram .ml-figure__svg { padding: 20px 18px 8px; }
.ml-figure__svg svg { width: 100%; height: auto; display: block; }
/* These diagrams pack mono labels into a wide 1080-unit canvas, so at the
   ~720px prose width every label shrank below readability. Render them larger:
   break the figure out wider than the prose column on desktop, and on narrow
   screens keep a min width with horizontal scroll instead of crushing the text. */
.ml-figure--diagram .ml-figure__svg { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ml-figure--diagram .ml-figure__svg svg { min-width: 680px; }
@media (min-width: 1180px) {
  .ml-figure--diagram { margin-inline: -150px; }
}

/* ============================================================
   Animated blueprint grid in the blog cover art (Terminal Industries-style) --
   Leonard 2026-06-04: the grid behind a blog should slowly shift and have soft
   glowing lines travelling across it. The lattice drifts, and a brighter copy is
   revealed by a moving radial mask. Shared ml-grid-drift / ml-grid-sweep keyframes
   live in sections.css (enqueued before this file). Honors reduced motion. The
   glow inherits .ml-art__grid's own vignette mask + opacity, so it stays contained.
   ============================================================ */
.ml-art__grid {
  --ml-grid-dx: 46px; --ml-grid-dy: 46px;
  animation: ml-grid-drift 46s linear infinite;
}
.ml-art__grid::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(204,220,255,0.78) 1px, transparent 1px),
    linear-gradient(90deg, rgba(204,220,255,0.78) 1px, transparent 1px);
  background-size: inherit;
  filter: drop-shadow(0 0 6px rgba(130,160,255,0.75)) drop-shadow(0 0 14px rgba(90,120,235,0.5));
  -webkit-mask-image: radial-gradient(circle at center, #000 0%, rgba(0,0,0,0.4) 36%, transparent 62%);
          mask-image: radial-gradient(circle at center, #000 0%, rgba(0,0,0,0.4) 36%, transparent 62%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 55% 70%; mask-size: 55% 70%;
  will-change: mask-position, background-position;
  animation: ml-grid-sweep 12s linear infinite, ml-grid-drift 46s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ml-art__grid { animation: none; }
  .ml-art__grid::after { display: none; }
}