/* 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-quest-item: oklch(0.84 0.13 88); }
.moo-item { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.5rem 1rem; max-inline-size: 28rem; margin-block: 1.5rem; padding: 1rem 1.25rem; border: 1px solid var(--mcui-line, rgb(175 181 207 / .12)); border-radius: var(--mcui-radius, 8px); background: var(--mcui-reference, #202436); }
.blog-wrapper img.moo-item__icon { grid-row: span 2; inline-size: 3.25rem; block-size: 4.875rem; border-radius: 0; object-fit: contain; }
.blog-wrapper .moo-item p { margin: 0; }
.blog-wrapper .moo-item__name { align-self: end; font-size: 1.0625rem; line-height: 1.3; font-weight: 700; color: var(--d4-quest-item); }
.blog-wrapper .moo-item__kind { align-self: start; font-size: 0.875rem; line-height: 1.4; color: var(--mcui-muted, #afb5cf); }
.blog-wrapper .moo-item__text { grid-column: 1 / -1; padding-block-start: 0.5rem; border-block-start: 1px solid var(--mcui-row-line, rgb(175 181 207 / .07)); color: var(--mcui-copy, #cfd3e2); }
.blog-wrapper .moo-item__flavor { grid-column: 1 / -1; font-style: italic; color: var(--mcui-muted, #afb5cf); }
.blog-layout .blog-wrapper figure.moo-shot--narrow > img { width: min(100%, 40rem); }
.blog-wrapper .moo-lore { margin-block: 1.5rem; padding: 0.75rem 1.25rem; border-inline-start: 3px solid var(--mcui-tint, #e1a856); border-radius: 0 var(--mcui-radius, 8px) var(--mcui-radius, 8px) 0; background: var(--mcui-reference, #202436); }
.blog-wrapper .moo-lore p { margin: 0; font-style: italic; color: var(--mcui-copy, #cfd3e2); }
.blog-wrapper .moo-lore footer { margin-block-start: 0.4rem; font-size: 0.875rem; color: var(--mcui-muted, #afb5cf); }