.vm-body {
    --vm-accent: #b91c1c;
    --vm-accent-2: #d97706;
    --vm-accent-dark: #7f1d1d;
    --vm-ink: #101827;
    --vm-muted: #667085;
    --vm-line: rgba(127, 29, 29, .14);
    --vm-glass: rgba(255, 255, 255, .68);
    --vm-glass-strong: rgba(255, 255, 255, .84);
    --vm-soft: rgba(254, 226, 226, .72);
    --vm-shadow: 0 24px 70px rgba(90, 38, 38, .13);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .9) 0%, rgba(255, 247, 237, .66) 42%, rgba(239, 246, 255, .76) 100%),
        #f8fafc;
    color: var(--vm-ink);
}

/* body-class overrides (server-side) */
.vm-vestment-green {
    --vm-accent: #15803d;
    --vm-accent-2: #0f766e;
    --vm-accent-dark: #14532d;
    --vm-line: rgba(21, 128, 61, .16);
    --vm-soft: rgba(220, 252, 231, .74);
}

.vm-vestment-purple {
    --vm-accent: #7e22ce;
    --vm-accent-2: #be185d;
    --vm-accent-dark: #581c87;
    --vm-line: rgba(126, 34, 206, .16);
    --vm-soft: rgba(243, 232, 255, .74);
}

.vm-vestment-white,
.vm-vestment-gold {
    --vm-accent: #b45309;
    --vm-accent-2: #ca8a04;
    --vm-accent-dark: #7c2d12;
    --vm-line: rgba(180, 83, 9, .16);
    --vm-soft: rgba(254, 243, 199, .74);
}

/* html[data-vestment] overrides (JS inline script) */
[data-vestment="green"] .vm-body {
    --vm-accent: #2e7d32;
    --vm-accent-dark: #1b5e20;
    --vm-soft: rgba(232,245,233,.72);
}
[data-vestment="purple"] .vm-body {
    --vm-accent: #6a1b9a;
    --vm-accent-dark: #4a148c;
    --vm-soft: rgba(243,229,245,.72);
}
[data-vestment="white"] .vm-body,
[data-vestment="gold"] .vm-body {
    --vm-accent: #e65c00;
    --vm-accent-dark: #bf360c;
    --vm-soft: rgba(255,243,224,.72);
}
[data-vestment="red"] .vm-body {
    --vm-accent: #c62828;
    --vm-accent-dark: #b71c1c;
    --vm-soft: rgba(255,235,238,.72);
}
[data-vestment="rose"] .vm-body {
    --vm-accent: #c2185b;
    --vm-accent-dark: #880e4f;
    --vm-soft: rgba(252,228,236,.72);
}
[data-vestment="black"] .vm-body {
    --vm-accent: #37474f;
    --vm-accent-dark: #263238;
    --vm-soft: rgba(236,239,241,.72);
}

.vm-liquid::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(110deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, 0) 38%),
        linear-gradient(180deg, rgba(185, 28, 28, .08), rgba(217, 119, 6, .05) 46%, rgba(14, 116, 144, .06));
}

.vm-page {
    width: min(1220px, calc(100% - 28px));
    margin: 0 auto;
    padding: 24px 0 108px;
}

.vm-hero,
.vm-tools,
.vm-detail-shell {
    position: relative;
    border: 1px solid rgba(255, 255, 255, .74);
    background: var(--vm-glass);
    box-shadow: var(--vm-shadow);
    backdrop-filter: blur(22px) saturate(145%);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
}

.vm-hero::after,
.vm-tools::after,
.vm-card::after,
.vm-detail-shell::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,.74), rgba(255,255,255,0) 42%);
    opacity: .72;
}

.vm-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    border-radius: 30px;
    padding: 32px 38px;
    overflow: hidden;
}

.vm-hero-inner {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.vm-hero-stat {
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    padding: 16px 22px;
    border-radius: 22px;
    background: color-mix(in srgb, var(--vm-accent) 7%, rgba(255,255,255,.72));
    border: 1.5px solid color-mix(in srgb, var(--vm-accent) 18%, rgba(255,255,255,.85));
    text-align: center;
    backdrop-filter: blur(8px);
}

.vm-hero-stat strong {
    display: block;
    color: var(--vm-accent);
    font-size: 40px;
    line-height: 1;
    font-weight: 900;
}

.vm-hero-stat span {
    color: var(--vm-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: 5px;
}

.vm-hero-deco {
    position: absolute;
    right: 26px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 130px;
    line-height: 1;
    color: color-mix(in srgb, var(--vm-accent) 8%, transparent);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.vm-hero-mark,
.vm-portrait {
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 20%, rgba(255, 255, 255, .95), rgba(255, 255, 255, .22) 34%, transparent 35%),
        linear-gradient(145deg, color-mix(in srgb, var(--vm-accent) 55%, #fff), var(--vm-accent));
    color: #fff;
    font-size: 46px;
    box-shadow:
        inset 0 0 0 5px rgba(255, 255, 255, .42),
        inset 0 -18px 34px rgba(127, 29, 29, .24),
        0 18px 38px color-mix(in srgb, var(--vm-accent) 28%, transparent);
}

.vm-hero-inner,
.vm-detail-hero > div {
    position: relative;
    z-index: 1;
}

.vm-hero-aside {
    /* kept for backward compatibility */
    display: none;
}

.vm-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    margin: 0 0 10px;
    border: 1px solid var(--vm-line);
    border-radius: 999px;
    background: var(--vm-soft);
    color: var(--vm-accent-dark);
    padding: 6px 11px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.vm-hero h1,
.vm-detail-hero h1 {
    margin: 0;
    color: var(--vm-ink);
    font-size: clamp(32px, 4.8vw, 62px);
    line-height: 1.04;
    letter-spacing: -.01em;
}

.vm-subtitle,
.vm-detail-hero p {
    max-width: 800px;
    margin: 13px 0 0;
    color: #475467;
    font-size: 18px;
    line-height: 1.62;
}

.vm-tools {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 18px 0;
    border-radius: 24px;
    padding: 20px 22px;
}

.vm-search-form {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vm-search {
    position: relative;
    display: flex;
    align-items: center;
}

.vm-search > svg {
    position: absolute;
    left: 16px;
    width: 20px;
    height: 20px;
    fill: var(--vm-muted);
    pointer-events: none;
    flex-shrink: 0;
}

.vm-search > span {
    display: none;
}

.vm-search input,
.vm-filter-row select {
    width: 100%;
    min-height: 50px;
    border: 1.5px solid rgba(16, 24, 40, .09);
    border-radius: 14px;
    background: rgba(255, 255, 255, .82);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 4px 12px rgba(16, 24, 40, .04);
    color: var(--vm-ink);
    padding: 0 16px;
    font-size: 15px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.vm-search input {
    padding-left: 46px;
}

.vm-search input:focus,
.vm-filter-row select:focus {
    border-color: color-mix(in srgb, var(--vm-accent) 42%, #fff);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--vm-accent) 13%, transparent);
}

.vm-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vm-filter-row select {
    flex: 1;
    min-width: 140px;
    min-height: 44px;
    border-radius: 12px;
    font-size: 14px;
}

.vm-filter-row button,
.vm-reset,
.vm-detail-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    border: 0;
    border-radius: 12px;
    padding: 0 18px;
    background: linear-gradient(145deg, var(--vm-accent), var(--vm-accent-dark));
    box-shadow: 0 8px 22px color-mix(in srgb, var(--vm-accent) 22%, transparent);
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: box-shadow .15s, transform .12s;
}

.vm-filter-row button:hover,
.vm-reset:hover {
    box-shadow: 0 12px 28px color-mix(in srgb, var(--vm-accent) 30%, transparent);
    transform: translateY(-1px);
}

.vm-reset {
    background: rgba(255, 255, 255, .72);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 10px rgba(16,24,40,.06);
    color: var(--vm-muted);
    border: 1.5px solid rgba(16,24,40,.08);
    min-width: 44px;
    padding: 0 12px;
}

.vm-stats {
    position: relative;
    z-index: 1;
    margin: 10px 0 0;
    padding: 0;
    background: none;
    border: none;
    text-align: left;
    color: var(--vm-muted);
    font-size: 13px;
    font-weight: 700;
}

.vm-stats strong {
    color: var(--vm-accent);
    font-size: 15px;
    font-weight: 900;
}

.vm-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
}

.vm-quick button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    border: 1.5px solid rgba(255, 255, 255, .8);
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 4px 10px rgba(16, 24, 40, .05);
    color: var(--vm-accent-dark);
    padding: 0 14px;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    transition: background .14s, box-shadow .14s, transform .12s;
}

.vm-quick button:hover {
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 6px 16px rgba(16, 24, 40, .08);
    transform: translateY(-1px);
}

.vm-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.vm-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1.5px solid rgba(255, 255, 255, .82);
    border-radius: 22px;
    background: rgba(255, 255, 255, .76);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
    box-shadow: 0 8px 28px rgba(16, 24, 40, .06);
}

.vm-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 50px rgba(90, 38, 38, .12);
}

.vm-card[hidden] {
    display: none;
}

.vm-card-link {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
    padding: 18px 18px 16px;
    color: inherit;
    text-decoration: none;
}

.vm-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.vm-card-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: linear-gradient(140deg, var(--vm-accent), var(--vm-accent-dark));
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    flex-shrink: 0;
    letter-spacing: .02em;
}

.vm-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--vm-accent) 10%, transparent);
    background: none;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    min-height: unset;
    border-radius: 0;
    box-shadow: none;
    color: var(--vm-accent);
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
    transition: gap .15s;
}

.vm-card-link:hover .vm-card-cta {
    gap: 10px;
}

.vm-feast {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    border: 1px solid color-mix(in srgb, var(--vm-accent) 14%, #fff);
    border-radius: 999px;
    background: var(--vm-soft);
    color: var(--vm-accent-dark);
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 900;
}

.vm-card h2 {
    margin: 0;
    color: var(--vm-ink);
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -.01em;
}

.vm-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vm-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(16, 24, 40, .05);
    border-radius: 999px;
    background: rgba(244, 247, 251, .78);
    color: #475467;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 900;
}

.vm-card-bio {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    color: #475467;
    font-size: 14px;
    line-height: 1.6;
}

.vm-card-action {
    /* legacy — no longer used in list view */
    display: none;
}

.vm-empty {
    grid-column: 1 / -1;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 22px;
    background: var(--vm-glass-strong);
    padding: 30px;
    text-align: center;
    color: var(--vm-muted);
}

.vm-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    color: var(--vm-muted);
    font-weight: 800;
}

.vm-breadcrumb a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--vm-accent-dark);
    text-decoration: none;
}

.vm-hero-mark svg,
.vm-search svg,
.vm-filter-row svg,
.vm-reset svg,
.vm-quick svg,
.vm-feast svg,
.vm-meta svg,
.vm-card-cta svg,
.vm-breadcrumb svg,
.vm-kicker svg,
.vm-detail-pills svg,
.vm-info-grid svg,
.vm-bio h2 svg,
.vm-related h2 svg,
.vm-related-grid svg,
.vm-detail-actions svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    fill: currentColor;
}

.vm-hero-mark svg {
    width: 48px;
    height: 48px;
}

.vm-detail-shell {
    border-radius: 30px;
    overflow: hidden;
}

.vm-detail-hero {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 28px;
    align-items: stretch;
    padding: 34px;
    background:
        linear-gradient(135deg, var(--vm-soft), rgba(255,255,255,.54) 56%, rgba(255,255,255,.72)),
        linear-gradient(90deg, color-mix(in srgb, var(--vm-accent) 10%, transparent), transparent);
    overflow: hidden;
}

.vm-detail-hero::before {
    content: "";
    position: absolute;
    right: -90px;
    top: -120px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--vm-accent) 16%, transparent), transparent 64%);
    pointer-events: none;
}

.vm-detail-identity {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 16px;
    align-content: center;
    justify-items: center;
}

.vm-detail-identity .vm-portrait {
    width: 126px;
    height: 126px;
}

.vm-portrait svg {
    width: 58px;
    height: 58px;
    fill: currentColor;
}

.vm-identity-card {
    display: grid;
    gap: 8px;
    width: 100%;
    border: 1px solid rgba(255,255,255,.76);
    border-radius: 24px;
    background: rgba(255,255,255,.58);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.84), 0 14px 34px rgba(16,24,40,.06);
    padding: 16px;
    text-align: center;
}

.vm-identity-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--vm-accent-dark);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.vm-identity-card svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.vm-identity-card strong {
    color: var(--vm-ink);
    font-size: 18px;
    line-height: 1.25;
}

.vm-detail-copy {
    align-self: center;
}

.vm-info-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    background: transparent;
    padding: 18px;
}

.vm-info-grid div {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 6px 12px;
    align-items: center;
    border: 1px solid rgba(255,255,255,.75);
    border-radius: 20px;
    background: rgba(255, 255, 255, .64);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 12px 26px rgba(16,24,40,.05);
    padding: 16px;
}

.vm-fact-icon {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: var(--vm-soft);
    color: var(--vm-accent-dark);
}

.vm-fact-label {
    color: var(--vm-muted);
    font-size: 13px;
    font-weight: 900;
}

.vm-info-grid strong {
    color: var(--vm-ink);
    font-size: 16px;
    line-height: 1.35;
}

.vm-bio {
    position: relative;
    z-index: 1;
    max-width: 920px;
    margin: 22px auto 0;
    border: 1px solid rgba(255,255,255,.76);
    border-radius: 28px;
    background: rgba(255,255,255,.62);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 18px 44px rgba(16,24,40,.06);
    padding: 30px 34px 18px;
}

.vm-bio h2,
.vm-related h2 {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 20px;
    color: var(--vm-accent-dark);
    font-size: 26px;
}

.vm-bio p {
    margin: 0 0 20px;
    color: #1d2939;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    line-height: 1.88;
}

.vm-detail-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.vm-detail-pills span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 999px;
    background: rgba(255,255,255,.62);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
    color: #344054;
    padding: 0 13px;
    font-size: 13px;
    font-weight: 900;
}

.vm-related {
    position: relative;
    z-index: 1;
    max-width: 1040px;
    margin: 0 auto;
    padding: 28px 26px;
}

.vm-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.vm-related-grid a {
    position: relative;
    display: grid;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 20px;
    background: rgba(255, 255, 255, .68);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82);
    padding: 16px 44px 16px 16px;
    color: var(--vm-ink);
    text-decoration: none;
}

.vm-related-grid span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--vm-accent-dark);
    font-size: 12px;
    font-weight: 900;
}

.vm-related-grid strong {
    font-size: 16px;
    line-height: 1.35;
}

.vm-related-grid em {
    position: absolute;
    right: 14px;
    top: 50%;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--vm-soft);
    color: var(--vm-accent-dark);
    transform: translateY(-50%);
}

.vm-detail-actions {
    position: relative;
    z-index: 1;
    padding: 0 26px 34px;
    text-align: center;
}

    @supports not (color: color-mix(in srgb, red, white)) {
    .vm-hero-mark,
    .vm-portrait,
    .vm-filter-row button,
    .vm-card-action,
    .vm-detail-actions a {
        box-shadow: 0 14px 28px rgba(185, 28, 28, .18);
    }
}

@media (max-width: 980px) {
    .vm-hero {
        gap: 16px;
        padding: 24px 28px;
    }

    .vm-hero-deco {
        font-size: 90px;
        right: 14px;
    }

    .vm-grid,
    .vm-info-grid,
    .vm-related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vm-detail-hero {
        grid-template-columns: 170px minmax(0, 1fr);
    }

    .vm-detail-identity .vm-portrait {
        width: 104px;
        height: 104px;
    }
}

@media (max-width: 640px) {
    .vm-page {
        width: min(100% - 18px, 1220px);
        padding-top: 14px;
    }

    .vm-hero {
        gap: 14px;
        border-radius: 22px;
        padding: 20px 22px;
    }

    .vm-hero-stat {
        display: none;
    }

    .vm-hero-deco {
        font-size: 72px;
        right: 10px;
    }

    .vm-detail-hero {
        grid-template-columns: 1fr;
        gap: 16px;
        border-radius: 24px;
        padding: 20px;
    }

    .vm-portrait {
        width: 76px;
        height: 76px;
        font-size: 38px;
    }

    .vm-hero h1 {
        font-size: 30px;
    }

    .vm-detail-hero h1 {
        font-size: 32px;
    }

    .vm-detail-identity {
        justify-items: start;
    }

    .vm-detail-identity .vm-portrait {
        width: 82px;
        height: 82px;
    }

    .vm-portrait svg {
        width: 40px;
        height: 40px;
    }

    .vm-identity-card {
        text-align: left;
    }

    .vm-subtitle,
    .vm-detail-hero p {
        font-size: 15px;
        line-height: 1.58;
    }

    .vm-tools,
    .vm-card,
    .vm-detail-shell {
        border-radius: 18px;
    }

    .vm-grid,
    .vm-info-grid,
    .vm-related-grid {
        grid-template-columns: 1fr;
    }

    .vm-card h2 {
        font-size: 18px;
    }

    .vm-bio {
        margin-top: 16px;
        border-radius: 22px;
        padding: 24px 18px 12px;
    }

    .vm-bio p {
        font-size: 18px;
        line-height: 1.78;
    }
}