/* css/work.css */
.work-hero {
  min-height: 60dvh;
  display: flex;
  align-items: flex-end;
  padding-top: var(--nav-height);
  padding-inline: var(--gutter);
  padding-bottom: var(--space-16);
  position: relative;
  overflow: hidden;
}
.work-hero__bg { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; filter: brightness(0.35); }
.work-hero__content { position: relative; z-index: 1; }
.work-hero__category { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-accent); margin-bottom: var(--space-4); }
.work-hero__title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; line-height: 1; }
.work-body { max-width: 900px; margin-inline: auto; padding-inline: var(--gutter); padding-block: var(--space-24); display: flex; flex-direction: column; gap: var(--space-16); }
.work-section__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-text-muted); margin-bottom: var(--space-6); }
.work-section__text { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 65ch; line-height: 1.7; }
.work-image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.work-image--tall { aspect-ratio: 4 / 3; }
.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.work-back { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-12); transition: color var(--transition-fast); }
@media (hover: hover) { .work-back:hover { color: var(--color-text); } }
@media (max-width: 640px) { .work-grid { grid-template-columns: 1fr; } }