.ccc-real-work {
  --work-red: #e1251b;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(70% 65% at 85% 15%, rgba(255, 255, 255, .72), transparent 68%),
    linear-gradient(145deg, #ece8df, #d8d3ca);
  color: #111114;
  padding: clamp(78px, 10vw, 148px) 0;
}
.ccc-real-work::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(17, 17, 20, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(17, 17, 20, .035) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  content: "";
}
.ccc-work__intro { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr); gap: clamp(30px, 7vw, 104px); align-items: end; margin-bottom: 42px; }
.ccc-work__eyebrow { display: flex; align-items: center; gap: 10px; color: #b51c15; font-family: var(--f-mono, ui-monospace, monospace); font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.ccc-work__eyebrow::before { width: 30px; height: 2px; background: var(--work-red); content: ""; }
.ccc-real-work h2 { max-width: 14ch; margin: 14px 0 0; color: #0d0d10; font-family: var(--f-display, Inter, system-ui, sans-serif); font-size: clamp(2.65rem, 5.3vw, 5.9rem); line-height: .92; letter-spacing: -.055em; text-wrap: balance; }
.ccc-work__lead { max-width: 56ch; margin: 0; color: #55555d; font-size: clamp(.98rem, 1.4vw, 1.1rem); line-height: 1.75; }
.ccc-work__showcase { position: relative; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(290px, .45fr); gap: 14px; }
.ccc-work__viewer { position: relative; min-width: 0; overflow: hidden; border: 1px solid rgba(17, 17, 20, .16); border-radius: 24px; background: #0b0b0d; box-shadow: 0 28px 70px rgba(17, 17, 20, .16); aspect-ratio: 16 / 9; }
.ccc-work__viewer::after { position: absolute; inset: auto 0 0; height: 46%; pointer-events: none; background: linear-gradient(transparent, rgba(5, 5, 7, .84)); content: ""; }
.ccc-work__viewer video { display: block; width: 100%; height: 100%; object-fit: cover; background: #0b0b0d; }
.ccc-work__viewer-copy { position: absolute; right: 22px; bottom: 20px; left: 22px; z-index: 2; display: flex; gap: 18px; align-items: end; justify-content: space-between; color: #fff; }
.ccc-work__viewer-copy small, .ccc-work__viewer-copy strong { display: block; }
.ccc-work__viewer-copy small { color: #ff6a61; font-family: var(--f-mono, ui-monospace, monospace); font-size: .58rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.ccc-work__viewer-copy strong { margin-top: 5px; font-family: var(--f-display, Inter, system-ui, sans-serif); font-size: clamp(1.2rem, 2.4vw, 2.35rem); line-height: 1; }
.ccc-work__play { flex: 0 0 auto; min-height: 42px; border: 1px solid rgba(255, 255, 255, .34); border-radius: 999px; background: rgba(8, 8, 10, .7); color: #fff; padding: 8px 14px; font: 800 .68rem/1 var(--f-body, Inter, system-ui, sans-serif); letter-spacing: .05em; text-transform: uppercase; backdrop-filter: blur(10px); cursor: pointer; }
.ccc-work__play:hover { border-color: #fff; background: rgba(225, 37, 27, .88); }
.ccc-work__play:focus-visible, .ccc-work__track:focus-visible { outline: 3px solid #111; outline-offset: 4px; }
.ccc-work__stills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; min-width: 0; }
.ccc-work__still { position: relative; min-width: 0; overflow: hidden; margin: 0; border-radius: 20px; background: #111; box-shadow: 0 20px 52px rgba(17, 17, 20, .12); }
.ccc-work__still img { display: block; width: 100%; height: 100%; min-height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.22, .8, .24, 1); }
.ccc-work__still:hover img { transform: scale(1.035); }
.ccc-work__still figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: 42px 13px 13px; background: linear-gradient(transparent, rgba(0, 0, 0, .82)); color: #fff; font-size: .7rem; font-weight: 750; line-height: 1.3; }
.ccc-work__tracks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.ccc-work__track { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 12px; align-items: center; min-width: 0; min-height: 80px; border: 1px solid rgba(17, 17, 20, .15); border-radius: 15px; background: rgba(255, 255, 255, .42); color: #171719; padding: 7px; text-align: left; cursor: pointer; transition: border-color .2s ease, background-color .2s ease, transform .2s ease; }
.ccc-work__track:hover { transform: translateY(-2px); border-color: rgba(17, 17, 20, .36); }
.ccc-work__track[aria-pressed="true"] { border-color: #111; background: #111; color: #fff; box-shadow: inset 0 -2px 0 var(--work-red); }
.ccc-work__track img { display: block; width: 70px; height: 58px; border-radius: 10px; object-fit: cover; }
.ccc-work__track small, .ccc-work__track strong { display: block; overflow: hidden; text-overflow: ellipsis; }
.ccc-work__track small { color: #a52822; font-family: var(--f-mono, ui-monospace, monospace); font-size: .52rem; letter-spacing: .12em; text-transform: uppercase; }
.ccc-work__track[aria-pressed="true"] small { color: #ff6a61; }
.ccc-work__track strong { margin-top: 3px; font-size: .72rem; line-height: 1.25; white-space: nowrap; }
.ccc-work__foot { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; margin-top: 28px; }
.ccc-work__note { margin: 0; color: #626269; font-size: .75rem; }
@media (max-width: 980px) { .ccc-work__intro { grid-template-columns: 1fr; gap: 22px; } .ccc-work__showcase { grid-template-columns: 1fr; } .ccc-work__stills { min-height: 430px; } .ccc-work__tracks { overflow-x: auto; grid-template-columns: repeat(4, minmax(220px, 1fr)); padding: 3px 3px 12px; scroll-snap-type: x mandatory; } .ccc-work__track { scroll-snap-align: start; } }
@media (max-width: 600px) { .ccc-real-work { padding: 72px 0 82px; } .ccc-work__showcase { gap: 10px; } .ccc-work__viewer { border-radius: 17px; aspect-ratio: 4 / 3; } .ccc-work__viewer-copy { right: 14px; bottom: 13px; left: 14px; } .ccc-work__viewer-copy strong { max-width: 13ch; } .ccc-work__play { min-height: 38px; padding: 7px 11px; font-size: .61rem; } .ccc-work__stills { min-height: 310px; gap: 10px; } .ccc-work__still { border-radius: 15px; } .ccc-work__tracks { margin-right: -16px; } .ccc-work__foot .button { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .ccc-work__still img, .ccc-work__track { transition: none; } }
@media print { .ccc-work__viewer video, .ccc-work__play, .ccc-work__tracks { display: none; } .ccc-real-work { background: #fff; } }