body:has(.unit-catalog) { background: #0b141e; color: #e9e2d3; }
body:has(.unit-catalog) > .container { max-width: 1440px; padding-inline: 28px; }
body:has(.unit-catalog) .footer { background: #0b141e; border-color: #a18b5833 !important; color: #aab3bc !important; }
body:has(.unit-catalog) .footer a { color: #c7b17f; }
.unit-catalog { padding: 28px 0 40px; }
.unit-page-heading { margin-bottom: 30px; }
.unit-page-heading h1 { font: 500 clamp(30px, 3vw, 40px)/1.2 Georgia, serif; color: #eee3c9; margin: 0 0 8px; }
.unit-page-heading > p:last-child, .unit-catalog-note { color: #aab6c0; font-size: 14px; }
.unit-eyebrow { color: #c0a46c; text-transform: uppercase; letter-spacing: .15em; font-size: 10px; margin-bottom: 8px; }
.unit-building { margin: 0 0 32px; }
.unit-building-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-bottom: 1px solid #a68b5540; margin-bottom: 16px; padding-bottom: 10px; }
.unit-building-heading h2 { font: 500 21px/1.3 Georgia, serif; color: #dcc99f; margin: 0; }
.unit-building-heading p { color: #9eaebc; font-size: 12px; margin: 0; }
.unit-building-heading strong { color: #d5d9d6; font-weight: 500; }
.unit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.unit-card { min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #9e87503d; border-radius: 8px; background: #13212e; box-shadow: 0 6px 18px #0002; transition: border-color .16s ease; }
.unit-card:hover { border-color: #c6a66a99; }
.unit-artwork { height: 220px; flex: 0 0 220px; border-bottom: 1px solid #a68b5533; background: radial-gradient(ellipse at 50% 80%, #36434b66, transparent 70%), #101d29; }
.unit-artwork img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 8px 12px 0; }
.unit-artwork img[hidden] { display: none; }
.unit-card-content { padding: 17px 18px 18px; flex: 1; display: flex; flex-direction: column; }
.unit-card h3 { color: #f0e6cf; font: 500 21px/1.25 Georgia, serif; margin: 0 0 7px; min-height: 2.5em; overflow-wrap: anywhere; }
.unit-card p { margin: 0 0 9px; }
.unit-classification { font-size: 12px; color: #b9c3cb; }
.unit-tier { display: inline-block; font-size: 11px; color: #dde3e7; border: 1px solid #8293a155; border-left: 3px solid var(--unit-accent, #a68b55); background: #1b2b38; border-radius: 3px; padding: 3px 8px; }
.unit-requirement { color: #bac4c9; font-size: 12px; }
.unit-research { color: #c6b58e; font-size: 12px; padding-left: 10px; border-left: 1px solid #a68b5566; }
.unit-costs { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; margin: auto 0 0; padding-top: 15px; border-top: 1px solid #9e875033; font-size: 12px; }
.unit-costs dt { font-weight: 400; color: #aebcc7; }
.unit-costs dd { margin: 0; color: #ece5d5; font-variant-numeric: tabular-nums; }
.unit-catalog-note { border-top: 1px solid #a68b5533; padding-top: 18px; max-width: 760px; line-height: 1.6; }
.unit-catalog .alert { background: #342326; color: #efd7d4; border-color: #8d5958; }
.unit-catalog a { color: #d5bb82; }
@media (max-width: 1100px) { .unit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 580px) {
    body:has(.unit-catalog) > .container { padding-inline: 16px; }
    .unit-grid { grid-template-columns: minmax(0, 1fr); }
    .unit-building-heading { flex-wrap: wrap; gap: 4px; }
    .unit-card h3 { min-height: 0; }
    .unit-artwork { height: 210px; flex-basis: 210px; }
}
@media (prefers-reduced-motion: reduce) { .unit-card { transition: none; } }