/* Article "Marketing miracles" (/articles/marketing-miracles/), on top of
   style.css and articles.css. Classes start with .mm-. One accent: the brands'
   figures in blue (--s1); the marketing moment as an orange dashed line
   (--s2); other companies gray; Costco's operating income as an ink line. */

.mm .tip { min-width: 220px; }
.mm-tip-t { font: 500 11px var(--mono); color: var(--muted); margin-left: 4px; }

/* ---------- the miracle meter (static HTML) ---------- */
.mm-meter-fig { padding-top: 18px; }
.mm-meter { position: relative; padding: 0 6px; }
.mm-m-scale, .mm-m-row { display: grid; grid-template-columns: minmax(0, 15.5rem) minmax(0, 1fr) 8.6rem; gap: 6px 18px; align-items: center; }
.mm-m-scale { margin: 0 0 6px; font: 500 11px var(--mono); color: var(--muted); }
.mm-m-ticks { position: relative; height: 16px; }
.mm-m-ticks span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.mm-m-ticks span:first-child { transform: none; }
.mm-m-ticks span:last-child { transform: translateX(-100%); }
.mm-m-log { font: 500 11px var(--font); }
.mm-m-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mm-m-row { padding: 10px 10px; margin: 0 -10px; border-radius: 14px; cursor: default; transition: background 0.15s; }
.mm-m-row.on { background: var(--hover); }
.mm-m-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mm-m-name b { font: 650 14.5px/1.3 var(--font); color: var(--ink); letter-spacing: -0.01em; }
.mm-m-name span { font: 500 12px var(--mono); color: var(--muted); }
.mm-m-track { position: relative; height: 16px; border-radius: 8px; background: var(--track); overflow: hidden; }
.mm-m-bar { display: block; height: 100%; border-radius: 8px; background: var(--s1); }
.mm-m-row:first-child .mm-m-bar { background: var(--solid); }
:root[data-theme="dark"] .mm-m-row:first-child .mm-m-bar, :root[data-theme="black"] .mm-m-row:first-child .mm-m-bar { background: var(--ink-2); }
.mm-m-x { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.mm-m-x b { font: 600 20px/1.1 var(--mono); letter-spacing: -0.04em; color: var(--ink); }
.mm-m-x span { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
@media (max-width: 640px) {
  .mm-meter-fig { padding-top: 46px; }  /* the scale spans the width: keep it clear of the full-screen button */
  .mm-meter { padding: 0 2px; }
  .mm-m-scale { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; }
  .mm-m-scale > span:last-child { display: none; }
  .mm-m-ticks { grid-column: 1 / -1; grid-row: 1; }
  .mm-m-log { grid-column: 1 / -1; grid-row: 2; }
  .mm-m-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n x" "t t"; gap: 6px 10px; padding: 9px 8px; margin: 0 -8px; }
  .mm-m-name { grid-area: n; } .mm-m-x { grid-area: x; } .mm-m-track { grid-area: t; height: 12px; }
  .mm-m-name b { font-size: 14px; }
  .mm-m-x b { font-size: 18px; }
}

/* ---------- small multiples ---------- */
.mm-multi-fig { padding: 14px 14px 6px; }
.mm-multi-fig > .legend { margin: 0 0 10px; }
.mm-multi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .mm-multi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .mm-multi { grid-template-columns: minmax(0, 1fr); } .mm-multi-fig { padding: 10px 8px 6px; } }
.mm-c { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px 10px; border-radius: 16px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.mm-c-h { font: 650 14px/1.3 var(--font); letter-spacing: -0.01em; color: var(--ink); }
.mm-c-v { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mm-c-v b { font: 600 21px/1.1 var(--mono); letter-spacing: -0.04em; color: var(--ink); }
.mm-c-v span { font-size: 11.5px; color: var(--muted); }
.mm-c-plot { position: relative; margin-top: 4px; }
.mm-c-plot svg { display: block; width: 100%; overflow: visible; touch-action: pan-y; }
.mm-c-plot .tip { min-width: 200px; }
.mm-c-s { font-size: 12px; color: var(--ink-2); }
.mm-c .tick { font-size: 10.5px; }
.mm-c-bar { fill: var(--s1); fill-opacity: 0.8; }
.mm-c-bar.on { fill-opacity: 1; }
.mm-c-bar.over { fill-opacity: 0.32; stroke: var(--s1); stroke-width: 1; stroke-dasharray: 2 2; }
.mm-c-lv { fill: none; stroke: var(--s1); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.mm-c-lv.over { stroke-dasharray: 3 3; stroke-width: 1.6; }
.mm-c-area { fill: var(--s1); fill-opacity: 0.12; }
.mm-c-pt { fill: var(--s1); stroke: var(--surface-2); stroke-width: 1.5; }
.mm-c-pt.over { fill: var(--surface-2); stroke: var(--s1); stroke-width: 1.5; }
.mm-c-pt.on { stroke: var(--ink); stroke-width: 2; }
.mm-c-grid { stroke: var(--grid); stroke-width: 1; stroke-dasharray: 3 3; }
.mm-c-base { stroke: var(--axis); stroke-width: 1; }
.mm-c-top { fill: var(--muted); }
.mm-c-line { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.mm-c-dot { fill: var(--ink); }
.mm-c-moment { stroke: var(--s2); stroke-width: 2; stroke-dasharray: 5 3; }
.mm-c-mlab { fill: var(--ink-2); font: 600 10.5px var(--font); }
.sw-sq.mm-sw-bar { background: var(--s1); opacity: 0.85; }
.ln.mm-ln-moment { stroke: var(--s2); stroke-width: 2; stroke-dasharray: 4 3; }
.ln.mm-ln-oi { stroke: var(--ink); stroke-width: 2; }

/* ---------- case files ---------- */
.mm-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 8px !important; }
@media (max-width: 860px) { .mm-cases { grid-template-columns: minmax(0, 1fr); } }
.mm-case { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px; scroll-margin-top: 80px; }
.mm-case-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.mm-case-no { font: 600 11.5px/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.mm-case-tk { font: 600 11px/1 var(--mono); letter-spacing: 0.04em; padding: 6px 9px; border-radius: 999px; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--border); }
.mm-case-tk.mm-private { font-family: var(--font); text-transform: uppercase; outline: 1px dashed var(--axis); outline-offset: -1px; box-shadow: none; }
.mm-case-h { margin: 0; font: 700 22px/1.15 var(--display); letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
.mm-case-what { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.mm-case-big { display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; padding-top: 2px; }
.mm-case-big .mid { color: var(--ink); }
.mm-case-big .label { flex: 1 1 180px; margin: 0; line-height: 1.35; }
.mm-spark { display: block; width: 100%; height: 44px; }
.mm-sp { fill: var(--s1); fill-opacity: 0.7; }
.mm-sp:last-child { fill-opacity: 1; }
.mm-case-extra { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.mm-quote { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); box-shadow: inset 3px 0 0 var(--axis); }
.mm-quote p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.mm-quote footer { font-size: 12px; line-height: 1.4; color: var(--muted); }
.mm-quote footer a { color: var(--accent-ink); }
.mm-quip { margin: auto 0 0; padding-top: 12px; border-top: 1px dashed var(--border); font-size: 14px; line-height: 1.45; font-weight: 550; color: var(--ink); }
.mm-quip::before { content: "↳ "; color: var(--muted); font-weight: 500; }
@media (max-width: 560px) { .mm-case { padding: 18px 16px; } .mm-case-h { font-size: 20px; } }

/* ---------- the ladder ---------- */
.mm-ladder { min-height: 330px; }
.mm-lad-co { fill: var(--line-gray); fill-opacity: 0.45; }
.mm-lad-co.on { fill: var(--ink); fill-opacity: 1; }
.mm-lad-brand { stroke: var(--s1); stroke-width: 2.5; stroke-linecap: round; }
.mm-lad-brand.on { stroke-width: 3.5; }
.mm-lad-dot { fill: var(--s1); stroke: var(--surface); stroke-width: 2; }
.mm-lad-lead { stroke: var(--s1); stroke-opacity: 0.5; stroke-width: 1; stroke-dasharray: 2 3; }
.mm-lad-lab { fill: var(--ink); font: 650 12px var(--font); }
.mm-lad-r { fill: var(--accent-ink); font-family: var(--mono); font-weight: 600; }
.mm-lad-log { fill: var(--muted); font-size: 10px; }
.sw-sq.mm-sw-co { background: var(--line-gray); opacity: 0.6; }
.sw-sq.mm-sw-brand { background: var(--s1); }
.mm-table thead th { white-space: normal; }
.mm-table td.mm-left { text-align: left; white-space: normal; color: var(--ink-2); font-size: 13.5px; }
@media (max-width: 560px) { .mm-table .mm-sm-hide { display: none; } }

/* ---------- $100 waffles (static HTML) ---------- */
.mm-waffle-fig { padding: 14px 14px 6px; }
.mm-waffle-fig > .legend { margin: 0 0 10px; }
.mm-waffles { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1000px) { .mm-waffles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 480px) { .mm-waffles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .mm-waffle-fig { padding: 10px 8px 6px; } }
.mm-w { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px; border-radius: 16px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); transition: box-shadow 0.15s; }
.mm-w.on { box-shadow: inset 0 0 0 2px var(--accent); }
.mm-w-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 2px; }
.mm-w-grid i { display: block; aspect-ratio: 1; border-radius: 2px; background: var(--axis); }
.mm-w-grid i.on.mm-w-ad { background: var(--s1); }
.mm-w-grid i.part.mm-w-ad { background: linear-gradient(to right, var(--s1) var(--p), var(--axis) var(--p)); }
.mm-w-grid i.on.mm-w-medc { background: var(--ink-2); }
.mm-w-grid i.part.mm-w-medc { background: linear-gradient(to right, var(--ink-2) var(--p), var(--axis) var(--p)); }
.mm-w-none .mm-w-grid i { background: none; box-shadow: inset 0 0 0 1px var(--border); }
.mm-w-v b { font: 600 20px/1.1 var(--mono); letter-spacing: -0.04em; color: var(--ink); }
.mm-w-n { font: 600 13px/1.3 var(--font); color: var(--ink); }
.mm-w-n .art-when { font-weight: 500; }
.mm-w-kind { display: inline-block; font: 600 10px/1 var(--font); letter-spacing: 0.03em; text-transform: uppercase; padding: 3px 5px; border-radius: 6px; color: var(--muted); box-shadow: inset 0 0 0 1px var(--border); vertical-align: 1px; }
.sw-sq.mm-sw-ad { background: var(--s1); }
.sw-sq.mm-sw-rest { background: var(--axis); box-shadow: inset 0 0 0 1px var(--border); }
@media (max-width: 480px) { .mm-w { padding: 10px; } .mm-w-v b { font-size: 18px; } }

@media (prefers-reduced-motion: reduce) { .mm-m-row, .mm-w { transition: none; } }