/* Components of this guide. Colours, surfaces and radii come from the Content UI Kit tokens (--mcui-*, content-ui-kit/README.md);
   each fallback after the comma keeps the look on pages without the kit tokens. Game colours are named --d4-*. */
.blog-wrapper { --d4-unique: oklch(0.78 0.09 65); --d4-mythic: oklch(0.72 0.15 300); --d4-danger: oklch(0.72 0.16 42); --d4-orb: oklch(0.93 0.06 95); }
.mep-item { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.25rem 1rem; max-inline-size: 30rem; margin-block: 1.5rem; padding: 1rem 1.25rem; border: 1px solid var(--mcui-line, oklch(0.777 0.038 275.2 / 0.12)); border-radius: var(--mcui-radius, 8px); background: var(--mcui-reference, oklch(0.265 0.034 274.2)); }
.blog-layout .blog-wrapper img.mep-item__icon { grid-row: span 2; inline-size: 3.25rem; block-size: 4.875rem; margin: 0; border-radius: 0; object-fit: contain; }
.blog-wrapper .mep-item p { margin: 0; }
.blog-layout .blog-wrapper .mep-item__name { align-self: end; font-size: 1.0625rem; line-height: 1.3; font-weight: 700; color: var(--d4-unique); }
.blog-layout .blog-wrapper .mep-item__kind { align-self: start; font-size: 0.875rem; line-height: 1.4; color: var(--mcui-muted, oklch(0.777 0.038 275.2)); }
.blog-layout .blog-wrapper .mep-item__text { grid-column: 1 / -1; margin-block-start: 0.5rem; padding-block-start: 0.5rem; border-block-start: 1px solid var(--mcui-row-line, oklch(0.777 0.038 275.2 / 0.07)); color: var(--mcui-copy, oklch(0.868 0.021 274)); }
.blog-wrapper .d4-item-icon { display: inline-block; flex: none; inline-size: 2em; block-size: 2em; vertical-align: middle; margin: 0; border-radius: 0.25em; background: var(--mcui-inset, oklch(0.208 0.011 73.3)); border: 1px solid var(--d4-mythic); }
.mep-loot { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); gap: 0.5rem 1rem; margin-block: 1rem 1.5rem; padding: 0; list-style: none; }
.blog-layout .blog-wrapper .mep-loot li { display: flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0; }
.blog-layout .blog-wrapper .mep-loot li::before { content: none; }
.mep-threat { color: var(--d4-danger); font-weight: 600; }
.blog-layout .blog-wrapper .mep-fight th:last-child { color: var(--mcui-tint, oklch(0.769 0.12 74.3)); }
.mep-r-mythic { color: var(--d4-mythic); font-weight: 600; }
.mep-r-unique { color: var(--d4-unique); font-weight: 600; }
.blog-layout .blog-wrapper .mep-shot figcaption { margin-block-start: 0.5rem; font-size: 0.875rem; line-height: 1.5; color: var(--mcui-muted, oklch(0.777 0.038 275.2)); }
.blog-layout .blog-wrapper .mep-shot img { border-radius: var(--mcui-radius, 8px); }
.mep-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0.5rem; }
.blog-layout .blog-wrapper .mep-pair img { inline-size: 100%; block-size: auto; margin: 0; }
.mep-map { margin-block: 1.25rem 1.5rem; }
.mep-map svg { display: block; inline-size: 100%; max-inline-size: 30rem; block-size: auto; border-radius: var(--mcui-radius, 8px); background: var(--mcui-reference, oklch(0.265 0.034 274.2)); }
.mep-map .arena { fill: var(--mcui-row-line, oklch(0.777 0.038 275.2 / 0.07)); stroke: var(--mcui-line, oklch(0.777 0.038 275.2 / 0.12)); stroke-width: 1.5; }
.mep-map .boss { fill: var(--d4-danger); stroke: var(--mcui-ink, oklch(1 0 none)); stroke-width: 2; }
.mep-map .hit { fill: color-mix(in oklch, var(--d4-danger) 28%, transparent); stroke: color-mix(in oklch, var(--d4-danger) 70%, transparent); stroke-width: 1.5; }
.mep-map .line { fill: none; stroke: var(--d4-danger); stroke-width: 2; stroke-dasharray: 5 5; }
.mep-map .orb { fill: var(--d4-orb); }
.mep-map .you { fill: var(--mcui-tint, oklch(0.769 0.12 74.3)); stroke: var(--mcui-ink, oklch(1 0 none)); stroke-width: 2; }
.mep-map .move { fill: none; stroke: var(--mcui-tint, oklch(0.769 0.12 74.3)); stroke-width: 2.5; stroke-linecap: round; }
.mep-map .head { fill: var(--mcui-tint, oklch(0.769 0.12 74.3)); }
.blog-layout .blog-wrapper .mep-map figcaption { margin-block-start: 0.5rem; font-size: 0.875rem; line-height: 1.5; color: var(--mcui-muted, oklch(0.777 0.038 275.2)); }
.mep-key { display: inline-block; inline-size: 0.75em; block-size: 0.75em; margin-inline-end: 0.3em; vertical-align: -0.05em; border-radius: 50%; }
.mep-key--boss { background: var(--d4-danger); }
.mep-key--hit { background: color-mix(in oklch, var(--d4-danger) 45%, transparent); border-radius: 0.15em; }
.mep-key--you { background: var(--mcui-tint, oklch(0.769 0.12 74.3)); }
.mep-key--orb { background: var(--d4-orb); }