/* Meet Me Gently V5 — shared card-front / card-back component.
   Renders the approved cream editorial interior with a circular raster medallion.
   Used by the marketing site, the free sampler, and the digital deck. */
@import url("/assets/brand.css");
:root {
  --mmg-cream: #FBF7EF;
  --mmg-ivory: #F4ECD9;
  --mmg-ink: #24201a;
  --mmg-ink-soft: #6a6152;
  --steady: var(--brand-steady-face, #0A2472);
  --open: var(--brand-open-face, #E56A50);
  --reach: var(--brand-reach-face, #EA9E04);
  --repair: var(--brand-repair-face, #C51F2D);
  /* physical-edition treatment (flagship) */
  --mmg-foil: linear-gradient(115deg, #8C6F2F 0%, #C9A961 22%, #F1E3AE 42%,
                                      #C9A961 58%, #8C6F2F 80%, #E8D49A 100%);
  --mmg-paper-deep: #F3EAD8;
  --mmg-stock-1: #E6DAC2; --mmg-stock-2: #DFD2B6; --mmg-stock-3: #D7C8A9; --mmg-stock-4: #CFBF9D;
  --mmg-grain: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.mmg-card {
  --path: var(--steady);
  position: relative;
  width: 100%;
  aspect-ratio: 2.75 / 4.75;      /* TGC tarot TRIM (2.75x4.75in) — real product proportion */
  border-radius: 4.545% / 2.632%; /* 1/8in die-cut, circular (H/V form) */
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.10), transparent 60%),
    var(--path);
  padding: 5.2%;
  box-shadow: 0 18px 40px -22px rgba(20,16,10,.55), 0 2px 4px rgba(20,16,10,.12);
  color: var(--mmg-ink);
  container-type: inline-size;
  isolation: isolate;
  min-height: 0; min-width: 0; overflow: hidden;  /* never let content distort the ratio */
}
/* subtle tactile paper texture over the path color */
.mmg-card::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 4px);
  mix-blend-mode: soft-light; opacity: .6; pointer-events: none;
}

.mmg-card__frame {
  position: relative; height: 100%;
  border: 1.5px solid rgba(255,255,255,.55);   /* thin ivory offset outline */
  border-radius: 3.4cqi;         /* length-based -> circular */
  padding: 6% 6.5%;
  background: var(--mmg-cream);
  background-image:
    radial-gradient(140% 120% at 50% -10%, #fffdf8 0%, var(--mmg-cream) 55%, #f3ead6 100%);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  overflow: hidden;
}

.mmg-card__path {
  font: 600 calc(clamp(.72rem, 4.0cqi, 1.24rem) * var(--fit,1))/1 "Noto Sans", system-ui, sans-serif;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--path-text, var(--path)); margin-top: 1%;
}
.mmg-card__rule {
  display: flex; align-items: center; gap: .5em; width: 62%;
  margin: 3.2cqi 0 1cqi;
  color: var(--path);
}
.mmg-card__rule::before, .mmg-card__rule::after {
  content: ""; flex: 1; height: 1px; background: currentColor; opacity: .5;
}
.mmg-card__rule i { font-style: normal; font-size: .7em; transform: rotate(45deg); display: inline-block; }
.mmg-card__rule i::before { content: "◆"; }

.mmg-card__medallion {
  width: 30cqi; aspect-ratio: 1; border-radius: 50%;
  margin: 1.5cqi 0 2.5cqi;
  background: #fff center/cover no-repeat;
  box-shadow: 0 0 0 3px var(--mmg-cream), 0 0 0 4.2px color-mix(in srgb, var(--path) 45%, transparent),
              0 8px 16px -8px rgba(20,16,10,.4);
  flex: 0 0 auto;
}
.mmg-card__prompt {
  font: 500 calc(clamp(.94rem, 5.7cqi, 1.76rem) * var(--fit,1))/1.3 "Noto Serif", Georgia, serif;
  color: var(--mmg-ink);
  text-wrap: balance; hyphens: none;
  display: flex; align-items: center; flex: 1 1 auto;
  padding: 0 1%;
}
.mmg-card__descriptor {
  font: 600 calc(clamp(.65rem, 3.25cqi, 1.04rem) * var(--fit,1))/1.2 "Noto Sans", system-ui, sans-serif;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--mmg-ink-soft); margin-top: auto; padding-top: 3cqi;
}
.mmg-card__consent {
  font: 600 calc(clamp(.55rem, 2.73cqi, .88rem) * var(--fit,1))/1 "Noto Sans", system-ui, sans-serif;
  letter-spacing: .16em; color: var(--path-text, var(--path)); margin-top: 2.4cqi;
}
.mmg-card__id {
  font: 600 calc(clamp(.55rem, 2.6cqi, .81rem) * var(--fit,1))/1 "Noto Sans", system-ui, sans-serif;
  letter-spacing: .1em; color: var(--mmg-ink-soft); margin-top: 1.6cqi;
}
.mmg-card__id::before { content: "✦ "; color: var(--path); }

/* ---- Category back ---- */
.mmg-back {
  position: relative; width: 100%; aspect-ratio: 2.75 / 4.75; border-radius: 4.545% / 2.632%;
  /* --back-fill lets a family deepen its BACK panel without touching --path,
     which card-render.js sets as an INLINE style (inline beats a stylesheet rule,
     so overriding --path here would silently do nothing). Falls back to --path. */
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.12), transparent 60%),
    var(--back-fill, var(--path));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5cqi; padding: 10%; color: var(--back-text, #fff); container-type: inline-size;
  min-height: 0; min-width: 0; overflow: hidden;
  box-shadow: 0 18px 40px -22px rgba(20,16,10,.55);
}
.mmg-back::after {
  content: ""; position: absolute; inset: 5cqi; border-radius: 3.4cqi;
  border: 1.5px solid color-mix(in srgb, currentColor 55%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 14%, transparent);
}
/* Palette v6: back text follows the token back_text_color, because the back now
   equals the front colour and REACH #FFA500 carries white at only 1.97:1. */
.mmg-back[data-family="STEADY"] { --back-text: var(--brand-steady-back-text, #fff); }
.mmg-back[data-family="OPEN"] { --back-text: var(--brand-open-back-text, #fff); }
.mmg-back[data-family="REACH"] { --back-text: var(--brand-reach-back-text, #24201A); }
.mmg-back[data-family="REPAIR"] { --back-text: var(--brand-repair-back-text, #fff); }
.mmg-back--universal { --path: #0b1437; }
/* Back-face text is WHITE on every back, by design decision.
   STEADY 13.9:1 and REPAIR 5.8:1 take white as-is. Raw OPEN (#E56A50) and REACH
   (#EA9E04) do not — white lands at 3.2:1 and 2.2:1, and 2.2:1 is unreadable on a
   printed card where the reader cannot zoom. So rather than darkening the TEXT
   (which would break the "always white" rule) we deepen only those two BACK
   PANELS toward ink: OPEN -> 5.3:1, REACH -> 4.5:1. Both still read clearly as
   terracotta and amber, and the front-face swatch is untouched — this override
   applies to .mmg-back only. */
.mmg-back[data-family="OPEN"] { --back-fill: var(--brand-open-back, color-mix(in srgb, #E56A50 72%, #1A0F08)); }
.mmg-back[data-family="REACH"] { --back-fill: var(--brand-reach-back, color-mix(in srgb, #EA9E04 65%, #1A0F08)); }
.mmg-back__medallion {
  width: 34cqi; aspect-ratio: 1; border-radius: 50%;
  background: #fff center/cover no-repeat;
  box-shadow: 0 0 0 4px rgba(255,255,255,.25); position: relative;
}
/* Back type is 25% larger than it was (4.4 -> 5.5, 3.4 -> 4.25cqi). Sized in cqi
   so it scales with the card, not the viewport — the back has no medallion now,
   so this is the only thing carrying the face. */
.mmg-back__path {
  font: 600 5.5cqi/1 "Noto Sans", system-ui, sans-serif;
  letter-spacing: .3em; text-transform: uppercase; position: relative;
}
.mmg-back__brand {
  font: 500 4.25cqi/1 "Noto Serif", Georgia, serif;
  letter-spacing: .28em; opacity: .85; position: relative;
}

/* ============================================================================
   PHYSICAL EDITION (flagship) — a distinct, premium "held object" treatment.
   Applied via .mmg-card--physical on marketing product mockups.
   ============================================================================ */
.mmg-card--physical {
  border-radius: 4.545% / 2.632%;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.14), transparent 55%),
    linear-gradient(160deg, color-mix(in srgb, var(--path) 90%, #fff) 0%,
                            var(--path) 45%,
                            color-mix(in srgb, var(--path) 86%, #000) 100%);
  box-shadow:
    0 1px 0 var(--mmg-stock-1), 0 2px 0 var(--mmg-stock-2),
    0 3px 0 var(--mmg-stock-3), 0 4px 0 var(--mmg-stock-4),
    0 30px 55px -22px rgba(28,20,8,.5),
    0 6px 14px -6px rgba(28,20,8,.28);
}
.mmg-card--physical::before {
  background-image: var(--mmg-grain),
    repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 4px);
  background-size: 160px 160px, auto;
  mix-blend-mode: soft-light; opacity: .55;
}
.mmg-card--physical .mmg-card__frame {
  border: 1.5px solid transparent;
  background:
    radial-gradient(140% 120% at 50% -10%, #FFFDF6 0%, #FAF4E4 55%, #F1E7CE 100%) padding-box,
    var(--mmg-foil) border-box;
  box-shadow: inset 0 1px 2px rgba(20,16,10,.14), inset 0 -1px 1px rgba(255,255,255,.65);
}
.mmg-card--physical .mmg-card__path,
.mmg-card--physical .mmg-card__descriptor { text-shadow: 0 1px 0 rgba(255,255,255,.55); }
.mmg-card--physical .mmg-card__medallion {
  box-shadow: 0 0 0 3px #FAF4E4,
              0 0 0 4.5px color-mix(in srgb, var(--path) 50%, #8C6F2F),
              inset 0 1px 3px rgba(20,16,10,.22),
              0 8px 16px -8px rgba(20,16,10,.4);
}
/* "held object" scene wrapper */
.physical-scene { perspective: 1100px; position: relative; }
.physical-scene > .mmg-card--physical,
.physical-scene > .mmg-back { transform: rotateX(6deg) rotateZ(-2.5deg); }
.physical-scene::after {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: -7%; height: 13%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(28,20,8,.30), transparent 70%);
  filter: blur(6px); z-index: -1;
}

/* DIGITAL contexts: screens are smooth — tone the paper grain right down. */
.card-holder .mmg-card::before, .draw-card .mmg-card::before,
.hero-visual .mmg-card::before, .app-demo .mmg-card::before { opacity: .18; }

@media (prefers-reduced-motion: reduce) {
  .physical-scene > .mmg-card--physical, .physical-scene > .mmg-back { transform: none; }
}

/* ============================================================================
   Placeholder medallion — cards awaiting unique art (spicy / newly created).
   Looks intentional (a soft ringed well with a spark), never broken.
   ============================================================================ */
.mmg-card__medallion.is-placeholder {
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--path) 14%, #fff) 0%, #fff 62%),
    #fff;
  display: grid; place-items: center;
}
.mmg-card__medallion.is-placeholder::after {
  content: "\2726"; font-size: 9cqi; line-height: 1;
  color: color-mix(in srgb, var(--path-text, var(--path)) 55%, transparent);
}

/* ============================================================================
   SPICY — "After Dark" special edition. A dark, sensual tier, clearly distinct
   from the cream cards. Charcoal card, crimson foil, ivory text.
   ============================================================================ */
:root { --spicy-ink: var(--brand-explicit-face, #1A0000); --spicy-crimson: var(--brand-explicit-accent, #E01F3D); --spicy-ivory: #F3E8D8;
  --spicy-foil: linear-gradient(115deg, #7a0f1e 0%, var(--brand-explicit-accent, #E01F3D) 28%, #ff7a8c 46%, var(--brand-explicit-accent, #E01F3D) 62%, #7a0f1e 88%, #ff9aa8 100%); }
.mmg-card--dark {
  --path: var(--brand-explicit-face, #1A0000);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(224,31,61,.22), transparent 55%),
    linear-gradient(165deg,
      color-mix(in srgb, var(--brand-explicit-face, #1A0000) 70%, #3a0a0a) 0%,
      var(--brand-explicit-face, #1A0000) 55%,
      color-mix(in srgb, var(--brand-explicit-face, #1A0000) 60%, #000) 100%);
  box-shadow: 0 22px 46px -22px rgba(0,0,0,.7), 0 0 0 1px rgba(224,31,61,.18);
}
.mmg-card--dark::before {
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 2px, transparent 2px 4px);
  opacity: .5;
}
.mmg-card--dark .mmg-card__frame {
  border: 1.5px solid transparent;
  background:
    radial-gradient(140% 120% at 50% -10%, #260606 0%, #1c0202 60%, #0d0000 100%) padding-box,
    var(--spicy-foil) border-box;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.5), inset 0 0 24px rgba(224,31,61,.08);
}
.mmg-card--dark .mmg-card__path { color: var(--spicy-crimson); text-shadow: 0 0 12px rgba(224,31,61,.4); }
.mmg-card--dark .mmg-card__rule { color: var(--spicy-crimson); opacity: .8; }
.mmg-card--dark .mmg-card__prompt { color: var(--spicy-ivory); }
.mmg-card--dark .mmg-card__descriptor { color: color-mix(in srgb, var(--spicy-ivory) 62%, transparent); }
.mmg-card--dark .mmg-card__consent { color: var(--spicy-crimson); opacity: .85; }
.mmg-card--dark .mmg-card__id { color: color-mix(in srgb, var(--spicy-ivory) 45%, transparent); }
.mmg-card--dark .mmg-card__id::before { color: var(--spicy-crimson); }
.mmg-card--dark .mmg-card__medallion {
  box-shadow: 0 0 0 3px #1c0202, 0 0 0 4.5px var(--spicy-crimson), 0 0 22px rgba(224,31,61,.4);
}
.mmg-card--dark .mmg-card__medallion.is-placeholder {
  background: radial-gradient(circle at 50% 42%, #2a1418 0%, #17090c 70%);
}
.mmg-card--dark .mmg-card__medallion.is-placeholder::after { color: rgba(224,31,61,.7); }

/* REACH shares OPEN's terracotta — a double-diamond rule distinguishes it (survives print). */
.mmg-card[data-family="REACH"] .mmg-card__rule i::before { content: "\25C6 \25C6"; letter-spacing: .35em; font-size: .6em; }
/* Back medallion placeholder (spicy/new backs). */
.mmg-back__medallion.is-placeholder { display: grid; place-items: center; background: rgba(255,255,255,.06); }
.mmg-back__medallion.is-placeholder::after { content: "\2726"; font-size: 8cqi; color: rgba(255,255,255,.5); }

/* SPICY (burgundy) — warmer, sultry tier. Overrides the dark base toward wine-red. */
.mmg-card--spicy {
  --path: var(--brand-spicy-accent, #E0526B);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(224,82,107,.22), transparent 55%),
    /* Derived from the brand face colour so the token actually shows. These were
       hardcoded maroon stops, so setting SPICY to #AE0000 only tinted a hairline
       border and the card body never changed. */
    linear-gradient(165deg,
      color-mix(in srgb, var(--brand-spicy-face, #AE0000) 58%, #12060A) 0%,
      color-mix(in srgb, var(--brand-spicy-face, #AE0000) 40%, #12060A) 55%,
      color-mix(in srgb, var(--brand-spicy-face, #AE0000) 24%, #0E0407) 100%);
  box-shadow: 0 22px 46px -22px rgba(0,0,0,.65), 0 0 0 1px rgba(224,82,107,.2);
}
.mmg-card--spicy .mmg-card__frame {
  background:
    radial-gradient(140% 120% at 50% -10%, #3A1620 0%, #2E1019 60%, #200A11 100%) padding-box,
    linear-gradient(115deg,var(--brand-spicy-face, #AE0000),var(--brand-spicy-accent, #E0526B) 45%,var(--brand-spicy-face, #AE0000)) border-box;
}
.mmg-card--spicy .mmg-card__path    { color: #FF8A9C; text-shadow: 0 0 10px rgba(224,82,107,.35); }
.mmg-card--spicy .mmg-card__rule    { color: var(--brand-spicy-accent, #E0526B); }
.mmg-card--spicy .mmg-card__consent { color: #FF8A9C; }
.mmg-card--spicy .mmg-card__id::before { color: var(--brand-spicy-accent, #E0526B); }
.mmg-card--spicy .mmg-card__medallion { box-shadow: 0 0 0 3px #2E1019, 0 0 0 4.5px var(--brand-spicy-accent, #E0526B), 0 0 18px rgba(224,82,107,.35); }
.mmg-card--spicy .mmg-card__medallion.is-placeholder { background: radial-gradient(circle at 50% 42%, #3a1620 0%, #200a11 70%); }
/* Back panels for the two dark families, derived from the brand FACE token
   (--brand-spicy-face / --brand-explicit-face) with color-mix toward near-black
   — the same device .mmg-card--spicy/.mmg-card--dark use on the front, kept
   here for consistency so a token edit visibly moves both faces. This
   replaces a former hardcoded maroon gradient (~#3A121C -> #1C070D) that
   ignored the token entirely, so setting SPICY to #AE0000 never showed up on
   the back.
   Contrast (white text, computed via WCAG relative-luminance formula, on the
   resolved color-mix() output at default #AE0000 / #1A0000 token values):
     SPICY back lightest stop (0%)    #9F0001 -> 8.49:1 vs white
     SPICY back darkest stop (100%)   #5B0103 -> 14.48:1 vs white
     EXPLICIT back lightest stop (0%) #120000 -> 20.47:1 vs white
     EXPLICIT back darkest stop (100%)#080000 -> 20.79:1 vs white
   Both families comfortably clear the ~4.5:1 floor with margin, so no --back-fill
   deepening override is needed here (unlike OPEN/REACH below, whose raw
   brand colors are too light for white text at 3.2:1 / 2.2:1). */
.mmg-back--spicy {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,138,156,.18), transparent 60%),
    linear-gradient(160deg,
      color-mix(in srgb, var(--brand-spicy-face, #AE0000) 90%, #1c0308) 0%,
      color-mix(in srgb, var(--brand-spicy-face, #AE0000) 68%, #14040a) 55%,
      color-mix(in srgb, var(--brand-spicy-face, #AE0000) 48%, #0e0206) 100%);
}
.mmg-back--spicy::after { border-color: rgba(224,82,107,.5); }
.mmg-back--explicit {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(224,31,61,.16), transparent 60%),
    linear-gradient(160deg,
      color-mix(in srgb, var(--brand-explicit-face, #1A0000) 60%, #050000) 0%,
      color-mix(in srgb, var(--brand-explicit-face, #1A0000) 32%, #000000) 100%);
}
.mmg-back--explicit::after { border-color: rgba(224,31,61,.45); }

/* ---- cooler card treatment: crisper frame, richer depth, refined medallion ---- */
.mmg-card__frame { box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -14cqi 22cqi -14cqi color-mix(in srgb, var(--path) 14%, transparent); }
.mmg-card__prompt { letter-spacing: -.004em; }
.mmg-card__medallion { box-shadow:
    0 0 0 3px var(--mmg-cream),
    0 0 0 4.6px color-mix(in srgb, var(--path) 60%, transparent),
    0 0 0 5.6px rgba(255,255,255,.55),
    0 10px 20px -9px rgba(20,16,10,.45); }
.mmg-card__rule { opacity: .95; }
.mmg-card__consent { letter-spacing: .2em; }

/* The `hidden` attribute must beat any display rule in this file (see sampler.css). */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------------------
   CARD DESIGN SWITCHES
   Driven by <html data-card-front> / <html data-card-back>, both stamped by
   build.py from 01_source_of_truth/brand_tokens_v5.json (see CARD DESIGN
   SWITCHES there). Pure CSS on purpose: switching the deck's look costs no JS,
   no extra request, and nothing the CSP can block. /manager/brand.html sets the
   same attributes on its preview wrapper, so the owner previews the real
   stylesheet rather than a mock.
   --------------------------------------------------------------------------- */

/* FRONT — inverted: the card IS the colour, the linework is ivory.
   The classic treatment keeps an ivory frame inset on a coloured card; this
   removes the frame's fill so the family colour runs edge to edge and flips all
   type and rules to cream. */
/* Ground the inverted front on the family's BACK-PANEL tone, not its raw face.
   OPEN (#E56A50) and REACH (#EA9E04) carry cream text at only ~3.2:1 and ~2.2:1 —
   below AA, and REACH fails even the large-text floor. The back_panel_color token
   exists precisely because those two faces are too light to carry cream, and the
   card art prompts already say never to use them as a ground. The manager's
   contrast badge only checks BACKS, so nothing else would warn the owner here. */
[data-card-front="inverted"] .mmg-card {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.10), transparent 60%),
    var(--inverted-ground, var(--path));
}
[data-card-front="inverted"] .mmg-card[data-family="OPEN"] {
  --inverted-ground: var(--brand-open-back, #AC513C);
}
/* REACH needs MORE deepening than its back panel. The back-panel tone was chosen
   for white text (#FFF, 4.5:1); the inverted front sets type in cream (#FBF7EF),
   which is slightly darker and drops the same ground to 4.21:1 — under AA. Mixing
   the face 55% toward ink gives 5.28:1 with cream and still reads unmistakably
   amber. Measured with the same sRGB formula as the manager's contrast badge. */
[data-card-front="inverted"] .mmg-card[data-family="REACH"] {
  --inverted-ground: color-mix(in srgb, var(--brand-reach-face, #EA9E04) 55%, #1A0F08);
}
[data-card-front="inverted"] .mmg-card__frame {
  background: transparent;
  background-image: none;
  border-color: color-mix(in srgb, var(--mmg-cream) 62%, transparent);
}
[data-card-front="inverted"] .mmg-card {
  color: var(--mmg-cream);
}
[data-card-front="inverted"] .mmg-card__path,
[data-card-front="inverted"] .mmg-card__rule,
[data-card-front="inverted"] .mmg-card__consent,
[data-card-front="inverted"] .mmg-card__descriptor,
[data-card-front="inverted"] .mmg-card__prompt,
[data-card-front="inverted"] .mmg-card__id {
  color: var(--mmg-cream);
}
[data-card-front="inverted"] .mmg-card__id::before,
[data-card-front="inverted"] .mmg-card__rule::before,
[data-card-front="inverted"] .mmg-card__rule::after {
  color: color-mix(in srgb, var(--mmg-cream) 70%, transparent);
}
/* The medallion keeps a cream ring so the art still reads as a die-cut hole,
   but the halo switches from cream to the card colour or it disappears. */
[data-card-front="inverted"] .mmg-card__medallion {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mmg-cream) 85%, transparent),
              0 0 0 4.2px color-mix(in srgb, var(--path) 60%, transparent),
              0 8px 16px -8px rgba(20,16,10,.5);
}

/* BACK — patterned. --back-pattern is generated per family in brand.css from
   the token `card.back_patterns`; when back_variant is "plain" no rule sets it
   and the back renders exactly as before. */
/* Paint the pattern as an OVERLAY, never by restating the ground.
   SPICY/EXPLICIT get their darkness from .mmg-back--spicy / --explicit, which set
   background-image GRADIENTS and no background-color; card-render.js only ever
   sets --path (the bright #AE0000 face). So any rule here that restates either
   `background` or `background-image` outranks those class rules and ships a
   bright red patterned SPICY back — while the manager preview, which sets
   --back-fill explicitly, showed the correct #3A121C. An ::before overlay touches
   no ground at all and is therefore correct for every family. */
[data-card-back="patterned"] .mmg-back::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: var(--back-pattern, none);
  pointer-events: none;
}
/* Keep the wordmark readable where the pattern runs densest. */
[data-card-back="patterned"] .mmg-back__brand,
[data-card-back="patterned"] .mmg-back__path {
  position: relative;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}

/* ============================================================================
   DESIGN v6 — WAVE front + LOGO back (owner decision 2026-09-17, from the
   "full-bleed wave" exploration). Active only under
   <html data-card-front="wave"> / data-card-back="logo">, so the classic design
   is untouched and the switch stays a token change in brand_tokens_v5.json.

   Type colour: the whole face is the family colour, so the ink is the family's
   back_text_color (the same token the back uses) — cream everywhere except
   REACH #FFA500, which carries ink because cream on it is 1.97:1.
   ============================================================================ */
.mmg-card--wave {
  --face-text: var(--face-ink, var(--mmg-cream));
  padding: 0;
  color: var(--face-text);
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(0,0,0,.10), transparent 60%),
    var(--path);
}
.mmg-card--wave[data-family="STEADY"] { --face-ink: var(--brand-steady-face-text, #FBF7EF); }
.mmg-card--wave[data-family="OPEN"]   { --face-ink: var(--brand-open-face-text, #FBF7EF); }
.mmg-card--wave[data-family="REACH"]  { --face-ink: var(--brand-reach-face-text, #24201A); }
.mmg-card--wave[data-family="REPAIR"] { --face-ink: var(--brand-repair-face-text, #24201A); }
.mmg-card--wave.mmg-card--spicy       { --face-ink: var(--brand-spicy-face-text, #FBF7EF); }
.mmg-card--wave.mmg-card--explicit    { --face-ink: var(--brand-explicit-face-text, #FBF7EF); }
/* After Dark uses the SAME wave layout and a flat family ground as every other
   family (owner 2026-09-17), so its artwork reads like the rest of the deck. */
.mmg-card--wave.mmg-card--spicy, .mmg-card--wave.mmg-card--explicit {
  background: radial-gradient(120% 90% at 50% 100%, rgba(0,0,0,.10), transparent 60%), var(--path);
}
.mmg-card--wave.mmg-card--spicy::before, .mmg-card--wave.mmg-card--explicit::before { background-image: none; }

.mmg-card__art {
  position: absolute; top: 0; left: 0; right: 0; height: 47%;
  background: var(--path) center/cover no-repeat;
  color: var(--path);            /* the wave inherits this as currentColor */
  border-radius: inherit;
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.mmg-card__art.is-placeholder {
  background-image: linear-gradient(160deg, color-mix(in srgb, var(--path) 82%, #fff) 0%, var(--path) 100%);
}
/* The wave sits BELOW the art's bottom edge and overlaps it, so the illustration
   is cut by the curve instead of ending on a straight line. */
.mmg-card__wave { position: absolute; left: -1px; right: -1px; bottom: -1px; width: calc(100% + 2px); height: 15%; display: block; }

.mmg-card--wave .mmg-card__frame {
  position: relative; height: 100%; border: 0; border-radius: 0; background: none;
  /* PERCENTAGE PADDING RESOLVES AGAINST WIDTH, not height. The card is 2.75:4.75,
     so its height is 1.727w and the 47%-tall art band is 0.81w: clearing it takes
     ~88% of the WIDTH, not 47%. The first cut used 50% and the category label
     landed on top of the illustration. */
  padding: 88% 8.5% 5.5%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  text-align: center; gap: 0; overflow: hidden;
}
.mmg-card--wave .mmg-card__path {
  color: var(--face-text); opacity: 1; margin: 0 0 3.4cqi;
  font-size: calc(clamp(.72rem, 4.8cqi, 1.45rem) * var(--fit,1));
  display: flex; align-items: center; gap: .7em; width: 86%;
}
.mmg-card--wave .mmg-card__path::before,
.mmg-card--wave .mmg-card__path::after {
  content: ""; flex: 1; height: 1.5px; background: currentColor; opacity: .7;
}
.mmg-card--wave .mmg-card__prompt {
  color: var(--face-text); margin: 0;
  font: italic 500 calc(clamp(1rem, 6.6cqi, 1.95rem) * var(--fit,1))/1.32 var(--serif, "Noto Serif", Georgia, serif);
}
.mmg-card--wave .mmg-card__rule { color: var(--face-text); opacity: .55; width: 26%; margin: 3.4cqi 0 2.6cqi; }
.mmg-card--wave .mmg-card__descriptor {
  color: var(--face-text); margin: 0; letter-spacing: .2em;
  font-size: calc(clamp(.62rem, 3.5cqi, 1.05rem) * var(--fit,1));
}
.mmg-card--wave .mmg-card__consent {
  color: var(--face-text); opacity: .88; margin-top: auto;
  font-size: calc(clamp(.5rem, 2.9cqi, .9rem) * var(--fit,1));
}
.mmg-card--wave .mmg-card__id {
  color: var(--face-text); opacity: .72; margin-top: 1.6cqi;
  font-size: calc(clamp(.46rem, 2.5cqi, .78rem) * var(--fit,1));
}
.mmg-card--wave .mmg-card__id::before { color: inherit; }

/* LOGO back: family name above the disc, the logo inside it, wordmark below. */
.mmg-back--logo { gap: 4cqi; }
/* The logo is white artwork on transparency, so it sits straight on the card colour:
   no disc, no ring (owner's reference, 2026-09-17). */
.mmg-back__logo {
  width: 57cqi; display: flex; align-items: center; justify-content: center; position: relative;
}
.mmg-back__logo img { width: 100%; height: auto; object-fit: contain; display: block; }

/* The reference design has no inner frame line on the back: the disc and the
   wordmark carry it. */
.mmg-back--logo::after { display: none; }
/* LOGO back, owner spec 2026-09-17: family name ABOVE the disc and bigger, the
   wordmark large under it, and EVERY back text in white on every family --
   including REACH, whose front keeps ink. */
.mmg-back--logo { --back-text: #fff; color: #fff; gap: 5cqi; justify-content: center; }
/* Family name flanked by a rule on each side, as on the real card. */
.mmg-back--logo .mmg-back__path {
  font-size: 7cqi; letter-spacing: .32em; margin: 0 0 1cqi; color: #fff;
  display: flex; align-items: center; gap: .7em; width: 78%;
}
.mmg-back--logo .mmg-back__path::before,
.mmg-back--logo .mmg-back__path::after {
  content: ""; flex: 1; height: 1.5px; background: rgba(255,255,255,.7);
}
/* The reference's short rule between the disc and the wordmark. */
.mmg-back--logo .mmg-back__brand::after {
  content: ""; display: block; width: 22%; height: 1.5px; margin: 3.6cqi auto 0;
  background: rgba(255,255,255,.75);
}
.mmg-back--logo .mmg-back__brand {
  font: 600 13cqi/1.1 var(--serif, "Noto Serif", Georgia, serif);
  letter-spacing: .06em; opacity: 1; color: #fff; max-width: 82%; text-align: center;
}
.mmg-back--logo .mmg-back__logo { width: 57cqi; }  /* owner: 30% bigger */