.morpheon-blog {
    --md-text: #020216;
    --md-muted: #575766;
    --md-accent: #6f02f4;
    --md-background: url('../images/morpheon-blog-obsidian.webp');
    width: 100%;
    /* Appending cards must not anchor the viewport to the moving Load more button. */
    overflow-anchor: none;
    color: var(--md-text);
    font-family: Grift, 'Grift-Regular', sans-serif;
}
.morpheon-blog--dark { --md-text: #fff; --md-muted: #c0bdcd; }
.morpheon-blog *, .morpheon-blog *::before, .morpheon-blog *::after { box-sizing: border-box; }
.morpheon-blog .morpheon-blog__grid { display: grid; grid-template-columns: repeat(var(--md-columns, 2), minmax(0, 1fr)); gap: 64px 32px; }
.morpheon-blog__card { min-width: 0; display: flex; flex-direction: column; }
.morpheon-blog__visual { position: relative; isolation: isolate; }
.morpheon-blog .morpheon-blog__media {
    --md-image-rest-inset: clamp(28px, 5vw, 54px);
    --md-image-hover-inset: clamp(18px, 3vw, 36px);
    --md-image-inset: var(--md-image-rest-inset);
    position: relative; display: block; overflow: hidden; aspect-ratio: 562 / 431;
    border-radius: 20px; background: #020216 var(--md-background) center / cover no-repeat;
    text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.morpheon-blog .morpheon-blog__image {
    position: absolute; inset: var(--md-image-inset); display: block; width: calc(100% - var(--md-image-inset) * 2); height: calc(100% - var(--md-image-inset) * 2); max-width: none;
    margin: 0; object-fit: cover; border-radius: 14px;
    transform: perspective(900px) translate3d(var(--md-float-x, 0px), var(--md-float-y, 0px), 0) rotateX(var(--md-tilt-x, 0deg)) rotateY(var(--md-tilt-y, 0deg));
    transition: inset .65s cubic-bezier(.22, 1, .36, 1), width .65s cubic-bezier(.22, 1, .36, 1), height .65s cubic-bezier(.22, 1, .36, 1);
    box-shadow: 0 24px 60px #0008;
}
.morpheon-blog__media.is-active,
.morpheon-blog__media:focus-visible { --md-image-inset: var(--md-image-hover-inset); }
@media (hover: hover) and (pointer: fine) {
    .morpheon-blog__media:hover { --md-image-inset: var(--md-image-hover-inset); }
}
.morpheon-blog__media.is-waving .morpheon-blog__image { opacity: 0; }
.morpheon-blog .morpheon-blog__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.morpheon-blog__categories { position: absolute; z-index: 2; top: 18px; left: 18px; right: 18px; display: flex; flex-wrap: wrap; gap: 7px; pointer-events: none; }
.morpheon-blog .morpheon-blog__tag { pointer-events: auto; }
.morpheon-blog__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding-top: 24px; }
.morpheon-blog .morpheon-blog__title { margin: 0 0 12px; padding: 0; color: #06064c !important; font-family: 'Grift-ExtraBold', Helvetica, Arial, Lucida, sans-serif; font-size: clamp(24px, 2.2vw, 34px); font-weight: 800; line-height: 1.16; letter-spacing: .02em; overflow-wrap: anywhere; }
.morpheon-blog .morpheon-blog__title a { color: #06064c !important; font-family: inherit; letter-spacing: inherit; text-decoration: none; }
.morpheon-blog .morpheon-blog__excerpt { padding: 0; margin: 0 0 12px; color: #06064c !important; font-family: 'Jost', Helvetica, Arial, Lucida, sans-serif; font-weight: 400; font-size: 16px; line-height: 1.4em; }
.morpheon-blog__body > .morpheon-morph-button { flex-shrink: 0; margin-top: 0; max-width: 100%; min-width: 0; white-space: normal; text-align: center; }
.morpheon-blog__footer { display: flex; justify-content: center; margin-top: 100px; }
.morpheon-blog .morpheon-blog__more {
    --morpheon-button-bg: #06064C; --morpheon-button-reveal: #6F02F4;
    --morpheon-button-text: #FFFFFF; --morpheon-button-hover-text: #FFFFFF;
    --morpheon-button-font: Grift, sans-serif; --morpheon-button-font-size: 14px;
    --morpheon-button-font-weight: 600; --morpheon-button-letter-spacing: .8px;
    --morpheon-button-line-height: .95; --morpheon-button-height: 40px;
    --morpheon-button-padding-x: 32px; --morpheon-button-radius: 40px;
    --morpheon-button-circle-size: 44px; --morpheon-button-duration: 1.022s;
    gap: 7px; max-width: 100%; min-width: 0; white-space: normal;
    text-align: center; text-transform: none; appearance: none;
}
.morpheon-blog__more-icon { position: relative; display: block; z-index: 2; width: 12px; height: 12px; flex: 0 0 12px; color: inherit; transform-origin: center; pointer-events: none; }
.morpheon-blog__more-icon::before, .morpheon-blog__more-icon::after { content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.morpheon-blog__more-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.morpheon-blog__more[aria-disabled='true'] { cursor: progress; }
.morpheon-blog__more[aria-disabled='true'] .morpheon-blog__more-icon { animation: morpheon-blog-spin 1.5s cubic-bezier(.65, 0, .35, 1) infinite; }
.morpheon-blog__more:hover .morpheon-blog__more-icon, .morpheon-blog__more:focus-visible .morpheon-blog__more-icon { color: var(--morpheon-button-hover-text); }
.morpheon-blog .morpheon-blog__status { margin: 16px 0 0; padding: 0; min-height: 1.5em; text-align: center; font-size: 14px; color: var(--md-muted); }
.morpheon-blog__status:empty { display: none; }
.morpheon-blog a:focus-visible, .morpheon-blog__more:focus-visible, .morpheon-blog__status:focus-visible { outline: 3px solid #a87aff; outline-offset: 5px; }
.morpheon-blog__card.is-entering { animation: morpheon-blog-enter .65s both cubic-bezier(.22, 1, .36, 1); }
@keyframes morpheon-blog-spin { to { transform: rotate(720deg); } }
@keyframes morpheon-blog-enter { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 980px) { .morpheon-blog .morpheon-blog__grid { grid-template-columns: repeat(min(2, var(--md-columns, 2)), minmax(0, 1fr)); gap: 44px 24px; } }
@media (max-width: 600px) {
    .morpheon-blog .morpheon-blog__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .morpheon-blog__categories { top: 14px; left: 14px; right: 14px; }
    .morpheon-blog .morpheon-blog__media { border-radius: 16px; }
    .morpheon-blog__body { padding-top: 20px; }
    .morpheon-blog__footer { margin-top: 72px; }
}
@media (prefers-reduced-motion: reduce) {
    .morpheon-blog .morpheon-blog__image { transition: none; transform: none; }
    .morpheon-blog .is-entering, .morpheon-blog .morpheon-blog__more .morpheon-blog__more-icon { animation: none; }
}
