/* WORK — extension layer. Curated editorial compositions. */

.feat-visual { border: var(--border-thin); border-radius: var(--radius-sm); background: linear-gradient(180deg, rgba(23,37,54,0.03), rgba(23,37,54,0.08)), repeating-linear-gradient(0deg, transparent 0 27px, rgba(23,37,54,0.07) 27px 28px), repeating-linear-gradient(90deg, transparent 0 27px, rgba(23,37,54,0.07) 27px 28px), var(--color-ivory); position: relative; overflow: hidden; min-height: 320px; }
.feat-visual::after { content: attr(data-label); position: absolute; left: 14px; bottom: 12px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; background: var(--color-navy); color: var(--text-on-dark); padding: 6px 11px; border-radius: 3px; }
.feat-visual--tall { aspect-ratio: 16/9; }
@media (min-width: 1000px) { .feat-visual--tall { aspect-ratio: auto; min-height: 460px; } }

.case-grid { display: grid; gap: 0; border-top: var(--border-thin); margin-top: 2rem; }
.case-row { display: grid; gap: 4px; padding: 1.5rem 0; border-bottom: var(--border-thin); }
.case-row h3 { font-family: var(--font-display); font-size: 1.15rem; }
@media (min-width: 900px) { .case-row { grid-template-columns: 90px 1fr 1.4fr auto; gap: 2rem; align-items: baseline; } }

.subnav { display: flex; flex-wrap: wrap; gap: 10px 28px; border-top: var(--border-thin); border-bottom: var(--border-thin); padding: 1rem 0; margin-top: 3rem; }
.subnav a { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--text-secondary); }
.subnav a:hover { color: var(--accent-strong); }

.spec-table { width: 100%; border-collapse: collapse; margin-top: 1.25rem; font-size: 0.9rem; }
.spec-table th, .spec-table td { text-align: left; padding: 10px 0; border-bottom: var(--border-soft); vertical-align: top; }
.spec-table th { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; width: 38%; padding-right: 1.5rem; }
.spec-table td { color: var(--text-secondary); }