/* ========================================================================== WORK — plantilla de case study, reutilizada por los 5 proyectos ========================================================================== */ /* ---------- Intro ---------- */ .case-hero { padding-top: clamp(7rem, 5.5rem + 6vw, 10rem); padding-bottom: var(--space-lg); } .case-hero__kicker { display: flex; align-items: center; gap: var(--space-sm); } .case-hero__title { margin-top: var(--space-sm); font-family: var(--font-display); font-weight: 500; font-size: clamp(3rem, 1.8rem + 8vw, 9rem); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); text-transform: uppercase; text-wrap: balance; } .case-hero__lede { margin-top: var(--space-md); max-width: 56ch; font-size: var(--fs-md); color: var(--color-ink-soft); } .case-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); margin-top: var(--space-xl); padding-top: var(--space-sm); border-top: 1px solid var(--color-line); } @media (min-width: 720px) { .case-meta { grid-template-columns: repeat(4, 1fr); } } .case-meta dt { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-muted); } .case-meta dd { margin-top: var(--space-2xs); font-family: var(--font-display); font-size: var(--fs-lg); } .case-hero__cover { position: relative; overflow: hidden; margin-top: var(--space-xl); /* var(--ph-ratio, 16/9), no un 16/9 fijo: mientras convive con la clase .media-ph (placeholder), components.css ya define aspect-ratio con esa misma variable — pero .media-ph se saca del HTML en cuanto entra el asset real, y en ese momento esta regla (que carga DESPUÉS en el , mismo peso de especificidad) pasaba a mandar con un 16/9 fijo, ignorando el --ph-ratio inline. Bug real, encontrado con Playwright: la portada del Showreel pide 21/9 (--ph-ratio:21/9 en el HTML) y renderizaba en 16/9 (1319×741 medido, ratio 1.78 en vez de 2.33) aun con el placeholder puesto. Con var(...) acá, el override inline sigue funcionando con o sin .media-ph — y las otras 4 portadas (Corporate, Mono Verse, Artwork, School), que no pisan --ph-ratio, siguen viendo exactamente el mismo 16/9 de siempre. */ aspect-ratio: var(--ph-ratio, 16/9); } .case-hero__cover img, .case-hero__cover video { width: 100%; height: 100%; object-fit: cover; } /* El video con play explícito (portada del Showreel, animatic, campaign video de Mono Verse — ver [data-video-trigger] / case-video.js) nunca compite con prefers-reduced-motion: no arranca solo, lo elige quien hace click. La insignia de "play" (círculo + triángulo) y su estado .is-playing viven en components.css, junto a los otros badges de la misma familia. El tamaño del