.case-main { width: min(80rem, 100%); }
.case-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1.35rem; }
.case-card { overflow: hidden; border-radius: 0.8rem; border: 1px solid #ffffff23; background: #131317; }
.case-card > a { display: block; overflow: hidden; text-decoration: none; }
.case-card > a:focus-visible { outline-offset: -4px; }
.case-card-body { padding: 1.1rem 1.25rem 1.25rem; }
.case-category { margin: 0 0 0.4rem; font-size: 0.78rem; color: #b9adff; }
.case-card h2 { margin: 0; font-size: 1.28rem; }
.case-card h2 a { color: #fafafa; text-decoration: none; }
.case-card h2 a:hover { text-decoration: underline; }
.case-card-body > p:not(.case-category) { margin: 0.6rem 0 0.9rem; color: #c9c9d1; font-size: 0.9rem; }
.case-card small, .case-attribution, figcaption, .case-source { color: #a5a5b0; font-size: 0.8rem; }
.case-lead { display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); align-items: center; gap: 1.8rem; }
.case-lead h1 { margin-bottom: 0.8rem; }
.case-summary { color: #e3e3e9; max-width: 32rem; }
.case-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.2rem; }
.case-actions a, .case-actions button { border: 1px solid #ffffff30; border-radius: 0.5rem; padding: 0.45rem 0.7rem; font: 600 0.82rem/1.4 system-ui, sans-serif; text-decoration: none; color: #f5f5f9; background: #1a1a22; }
.case-actions button { background: #f3f0ff; color: #1c1336; border-color: #f3f0ff; cursor: pointer; }
.case-actions :focus-visible { outline: 2px solid #d4c9ff; outline-offset: 3px; }
.case-lead figure { margin: 0; }
.case-lead figure .case-art { border-radius: 0.8rem; }
.case-lead figcaption { text-align: right; margin-top: 0.4rem; }
.case-notes { max-width: 52rem; }
.case-notes h2 { margin-top: 2.3rem; font-size: 1.3rem; }
.case-notes li { margin-bottom: 0.45rem; }
.case-files { padding-left: 0; list-style: none; }
.case-files li { display: flex; flex-wrap: wrap; column-gap: 0.65rem; padding: 0.55rem 0; border-bottom: 1px solid #ffffff15; }
.case-files code { overflow-wrap: anywhere; font-size: 0.85rem; }
.case-files span { color: #a5a5b0; font-size: 0.87rem; }
.case-related { display: flex; flex-wrap: wrap; gap: 1rem; padding: 0; list-style: none; }

.case-art { display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; container-type: inline-size; }
.case-art-dashboard { background: linear-gradient(145deg, #c5b7f1, #edf1ff 70%, #c2b4ef); }
.mini-dashboard, .mini-launch, .mini-content { width: 88%; height: 82%; overflow: hidden; border-radius: 2cqw; box-shadow: 0 3cqw 7cqw #17102d40; }
.mini-dashboard { display: grid; grid-template-columns: 25% 75%; background: #f8f9fc; color: #1e2340; font-size: 2cqw; }
.mini-sidebar { display: flex; flex-direction: column; gap: 1.7cqw; background: #edeaf9; padding: 3cqw 2cqw; }
.mini-sidebar b { font-size: 2.5cqw; }
.mini-active { color: #4e31b7; background: #dcd2fa; padding: 0.35cqw 0.65cqw; border-radius: 0.5cqw; }
.mini-dashboard-body { padding: 3cqw; }
.mini-dashboard-body > b { font-size: 3.2cqw; }
.mini-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; margin: 1cqw 0 2cqw; }
.mini-metrics > div, .mini-chart { background: white; border: 1px solid #dedfea; border-radius: 1cqw; padding: 1.3cqw; }
.mini-metrics span, .mini-metrics strong { display: block; }
.mini-metrics strong { font-size: 3.5cqw; line-height: 1.2; }
.mini-metrics small { color: #226351; }
.mini-chart-area { height: 10cqw; margin-top: 0.8cqw; background: linear-gradient(180deg, #6950cc, #e6e0ff); clip-path: polygon(0 86%, 8% 77%, 18% 80%, 27% 54%, 39% 60%, 53% 38%, 62% 47%, 73% 24%, 86% 30%, 100% 5%, 100% 100%, 0 100%); }
.mini-chart-axis { display: flex; justify-content: space-between; color: #62677c; font-size: 1.65cqw; }
.case-art-launch { background: radial-gradient(ellipse at 55% 75%, #7360c3 0%, #332859 50%, #181320 94%); }
.mini-launch { text-align: center; background: radial-gradient(ellipse at 50% 95%, #2a1a46, #111014 68%); color: #f3eff9; border: 1px solid #ffffff29; }
.mini-launch-nav { display: flex; justify-content: space-between; gap: 1cqw; padding: 1.8cqw 3cqw; font-size: 1.8cqw; border-bottom: 1px solid #ffffff17; }
.mini-launch > strong { display: block; font-size: 5.6cqw; line-height: 1.08; margin: 3.5cqw 0 1.3cqw; }
.mini-launch p { font-size: 2cqw; margin: 0 0 1.6cqw; color: #d0c7dd; }
.mini-cta { display: inline-block; padding: 0.6cqw 2cqw; background: #d9c6ff; color: #210e3b; font-size: 2cqw; border-radius: 0.75cqw; font-weight: 700; }
.mini-workflow { width: 78%; margin: 2.5cqw auto 0; padding: 1.2cqw 2cqw; text-align: left; background: #242031; border: 1px solid #ffffff24; border-radius: 1cqw; font-size: 2cqw; }
.mini-workflow div { display: flex; align-items: center; gap: 1cqw; margin-top: 0.8cqw; color: #dbd2ef; }
.mini-workflow i { height: 1px; flex: 1; background: #6e6385; }
.mini-workflow span { width: 1.4cqw; aspect-ratio: 1; border-radius: 50%; background: #c0a8fd; }
.case-art-content { background: linear-gradient(150deg, #d0e3e8, #acc3d7 72%, #8fa4c4); }
.mini-content { color: #203040; background: #f1f6fb; }
.mini-content-nav { display: flex; justify-content: space-between; background: #fbfdff; padding: 1.6cqw 3cqw; font-size: 2cqw; }
.mini-content-banner { display: flex; flex-direction: column; justify-content: end; min-height: 17cqw; padding: 2.2cqw 3cqw; color: white; background: linear-gradient(0deg, #0f1d38b8, #1e3c5c20), url('/art/peaks.jpg') center 58% / cover; }
.mini-content-banner span { font-size: 1.8cqw; }
.mini-content-banner strong { font-size: 4.3cqw; }
.mini-posts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw; padding: 1.8cqw; }
.mini-posts > div { display: grid; align-content: start; gap: 0.2cqw; padding: 1.25cqw; border-radius: 0.8cqw; background: white; }
.mini-posts span, .mini-posts small { font-size: 1.7cqw; color: #56718a; }
.mini-posts b { font-size: 2.5cqw; }
@media (max-width: 49rem) { .case-lead { grid-template-columns: 1fr; } }