
[hidden] { display: none !important; }
[data-cat] { transition: opacity .32s var(--ease-out), transform .38s var(--ease-out); }
[data-cat].is-leaving { opacity: 0; transform: scale(.96); }
[data-cat].is-entering { opacity: 0; transform: scale(.97); }

.rec { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c-red); margin-inline-end: .5rem; vertical-align: middle; }
.work__frame { position: relative; display: block; aspect-ratio: var(--ar, 16 / 9); overflow: hidden; border-radius: var(--radius-media); background: var(--c-ink); container-type: inline-size; }
.work__frame .media { transition: transform 1.4s var(--ease-out); }
.work__link, .rel__link { display: block; position: relative; }
.work__link:hover .media, .work__link:focus-visible .media, .rel__link:hover .media { transform: scale(1.045); }
.work__badge { position: absolute; top: 14px; inset-inline-start: 14px; z-index: 2; padding: .25rem .55rem; border-radius: 2px; background: rgba(5, 5, 5, .62); font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.work__go { position: absolute; inset-inline-end: 16px; bottom: 16px; z-index: 2; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--c-red); opacity: 0; transform: scale(.6); transition: opacity .4s, transform .6s var(--ease-out); }
.work__go svg { width: 12px; height: 15px; margin-inline-start: 3px; fill: var(--c-paper); }
.work__link:hover .work__go, .work__link:focus-visible .work__go { opacity: 1; transform: none; }
.work__meta { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; row-gap: .15rem; align-items: baseline; padding-top: 1rem; }
.work__num { grid-row: span 3; font-size: var(--fs-micro); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--c-grey-dark); padding-top: .5em; min-width: 1.6rem; }
.work__title { font-size: clamp(1.35rem, 2vw, 2.3rem); font-weight: 700; font-stretch: 85%; line-height: 1.05; letter-spacing: -.01em; }
.work__kicker { font-size: var(--fs-small); color: var(--c-grey); }
.work__info { display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; margin-top: .35rem; font-size: var(--fs-small); color: var(--c-grey); opacity: .55; transform: translateY(4px); transition: opacity .5s, transform .6s var(--ease-out); }
.work__info span:first-child { color: var(--c-red); font-size: var(--fs-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.work__link:hover .work__info, .work__link:focus-visible .work__info { opacity: 1; transform: none; }

.slate { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(12px, 5cqw, 28px); overflow: hidden;
  background: radial-gradient(90% 70% at 78% 12%, rgba(74, 0, 24, .6), rgba(74, 0, 24, 0) 62%), linear-gradient(160deg, #161618, #0a0a0b 70%); }
.slate__top, .slate__bottom { display: flex; justify-content: space-between; gap: 1rem; font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(245, 245, 242, .6); }
.slate__bottom { padding-top: .7rem; border-top: 1px solid rgba(245, 245, 242, .12); color: rgba(245, 245, 242, .4); }
.slate__name { font-size: clamp(1.4rem, 11cqw, 7rem); line-height: .88; overflow-wrap: anywhere; }

.vid { position: relative; margin: 0; }
.vid__frame { position: relative; display: block; aspect-ratio: var(--ar, 16 / 9); overflow: hidden; border-radius: var(--radius-media); background: var(--c-ink); container-type: inline-size; }
.vid__play { position: absolute; inset: 0; margin: auto; z-index: 3; width: clamp(56px, 12cqw, 84px); height: clamp(56px, 12cqw, 84px); border-radius: 50%; display: grid; place-items: center;
  background: rgba(245, 245, 242, .12); border: 1px solid rgba(245, 245, 242, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color .4s, transform .6s var(--ease-out); }
.vid__play svg { width: 26%; height: 32%; margin-inline-start: 6%; fill: var(--c-paper); }
.vid__play:hover, .vid__play:focus-visible { background: var(--c-red); transform: scale(1.06); }
.vid iframe { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; border: 0; }
.vid__cap { display: flex; justify-content: space-between; gap: 1rem; margin-top: .7rem; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-grey); }
.vid__cap span:last-child { color: var(--c-grey-dark); font-variant-numeric: tabular-nums; }

.pj-hero { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); padding-top: clamp(8rem, 19vh, 11rem); padding-bottom: 11vh; pointer-events: none; }
.pj-hero a, .pj-hero button { pointer-events: auto; }
.pj-hero__label { grid-column: 1 / -1; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-red); }
.pj-hero__title { grid-column: 1 / -1; margin-top: 1.2rem; font-size: clamp(3rem, 9.2vw, 11.5rem); text-shadow: 0 12px 60px rgba(0, 0, 0, .55); }
.pj-hero__title .line { width: max-content; max-width: 100%; }
.pj-hero__aside { grid-column: 1 / span 5; display: grid; gap: 1.6rem; margin-top: 2.6rem; }
.pj-hero__intro { max-width: 30rem; font-size: var(--fs-sub); font-weight: 500; font-stretch: 92%; line-height: 1.3; color: rgba(245, 245, 242, .82); }
.pj-hero__count { display: flex; gap: 2.4rem; }
.pj-hero__count div { display: grid; gap: .1rem; }
.pj-hero__count dt { order: 2; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-grey); }
.pj-hero__count dd { margin: 0; font-size: clamp(2.2rem, 3.6vw, 3.8rem); font-weight: 800; font-stretch: 75%; line-height: .9; font-variant-numeric: tabular-nums; }
.pj-hero__count { align-items: flex-end; flex-wrap: wrap; }
.pj-hero__count dd i { font-style: normal; color: var(--c-red); font-size: .62em; vertical-align: .2em; margin-inline-start: .04em; }
.pj-hero__stat--text dd { font-size: clamp(1.15rem, 1.7vw, 1.75rem); line-height: 1.02; text-transform: uppercase; letter-spacing: .01em; }
@media (min-width: 900px) { .pj-hero__count { flex-wrap: nowrap; width: max-content; gap: clamp(1.4rem, 2.4vw, 2.8rem); } }

.pj-filter { position: sticky; top: 76px; z-index: 30; pointer-events: none; transition: background-color .4s, box-shadow .4s; }
.pj-filter__btn, .pj-filter.is-stuck { pointer-events: auto; }
.pj-filter.is-stuck { background: rgba(5, 5, 5, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--c-line); }
.pj-filter__inner { position: relative; display: flex; align-items: center; gap: 1.5rem 2rem; padding-top: 1.1rem; padding-bottom: .7rem; }
.pj-filter__inner::before { content: ""; position: absolute; top: 0; inset-inline: calc(var(--rail) + var(--gutter)) var(--gutter); height: 8px;
  background: repeating-linear-gradient(90deg, rgba(245, 245, 242, .28) 0 1px, transparent 1px 12px); }
.pj-filter__list { display: flex; flex-wrap: wrap; gap: .2rem clamp(1rem, 2.2vw, 2.4rem); }
.pj-filter__btn { position: relative; padding: .7rem 0 .55rem; font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-grey); transition: color .3s; }
.pj-filter__btn sup { margin-inline-start: .3em; font-size: .6rem; color: var(--c-grey-dark); font-variant-numeric: tabular-nums; }
.pj-filter__btn::before { content: ""; position: absolute; top: -2px; inset-inline-start: 50%; width: 9px; height: 8px; margin-inline-start: -4.5px; background: var(--c-red); clip-path: polygon(0 0, 100% 0, 50% 100%); opacity: 0; transform: translateY(-4px); transition: opacity .3s, transform .4s var(--ease-out); }
.pj-filter__btn::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1.5px; background: var(--c-red); transform: scaleX(0); transition: transform .5s var(--ease-out); }
.pj-filter__btn:hover:not(:disabled) { color: var(--c-paper); }
.pj-filter__btn[aria-pressed="true"] { color: var(--c-paper); }
.pj-filter__btn[aria-pressed="true"]::before { opacity: 1; transform: none; }
.pj-filter__btn[aria-pressed="true"]::after { transform: scaleX(1); }
.pj-filter__btn:disabled { opacity: .32; cursor: default; }
.pj-filter__status { margin-inline-start: auto; font-size: var(--fs-small); font-weight: 600; color: var(--c-grey); font-variant-numeric: tabular-nums; white-space: nowrap; }

.pj-works { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.work { position: relative; }
.work--l1 { grid-column: 6 / -1; grid-row: 1; margin-top: calc(-1 * var(--pull, 30vh)); z-index: 1; }
.work--l2 { grid-column: 1 / span 5; grid-row: 1; margin-top: -22vh; align-self: start; }
.work--l3 { grid-column: 6 / -1; grid-row: 2; margin-top: 30vh; }
.work--l4 { grid-column: 1 / -1; grid-row: 3; margin-top: 20vh; }
.work--l5 { grid-column: 1 / span 3; grid-row: 4; margin-top: 22vh; }
.work--l6 { grid-column: 5 / span 4; grid-row: 4; margin-top: 36vh; }
.work--l7 { grid-column: 10 / span 3; grid-row: 4; margin-top: 26vh; }
.work--l8 { grid-column: 1 / -1; grid-row: 5; margin-top: 24vh; margin-inline-start: calc(-1 * (var(--rail) + var(--gutter))); margin-inline-end: calc(-1 * var(--gutter)); }
.work--l8 .work__frame { border-radius: 0; }
.work--l4 .work__meta, .work--l8 .work__meta { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding: clamp(4rem, 9vw, 9rem) clamp(1.2rem, 3vw, 3rem) clamp(1.2rem, 3vw, 3rem); pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 5, 5, 0), rgba(5, 5, 5, .9) 55%, rgba(5, 5, 5, .96)); }
.work--l8 .work__meta { padding-inline-start: calc(var(--rail) + var(--gutter)); }
.work--l4 .work__title { font-size: clamp(2.6rem, 7vw, 8.4rem); font-weight: 800; font-stretch: 75%; line-height: .86; text-transform: uppercase; }
.work--l8 .work__title { font-size: clamp(2.8rem, 8vw, 9rem); font-weight: 300; font-stretch: 100%; line-height: .95; letter-spacing: -.03em; }
.work--l4 .work__go, .work--l8 .work__go { bottom: auto; top: 16px; }
.pj-works--more { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--col-gap) * 2); margin-top: 16vh; }

.pj-works.is-filtered { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--col-gap) * 2); }
.pj-works.is-filtered .work { grid-column: auto !important; grid-row: auto !important; margin: 0 0 12vh !important; transform: none !important; }
.pj-works.is-filtered .work[data-alt] { margin-top: 16vh !important; }
.pj-works.is-filtered .work__frame { --ar: 16 / 10 !important; border-radius: var(--radius-media); }
.pj-works.is-filtered .work__meta { position: static; padding: 1rem 0 0; background: none; }
.pj-works.is-filtered .work__title { font-size: clamp(1.35rem, 2vw, 2.3rem); font-weight: 700; font-stretch: 85%; text-transform: none; letter-spacing: -.01em; line-height: 1.05; }

.pj-sel { padding-top: 34vh; padding-bottom: 18vh; }
.pj-list { padding: 4vh 0 16vh; }
.pj-list__head, .pj-creative__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .6rem 2rem; margin-bottom: 1.6rem; }
.pj-list__title { font-size: var(--fs-sub); font-weight: 700; font-stretch: 88%; }
.pj-list__note { font-size: var(--fs-small); color: var(--c-grey-dark); }

.rows { list-style: none; }
.row__link { display: grid; grid-template-columns: 2.6rem minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, .9fr) minmax(0, .8fr) 2rem; gap: 1rem; align-items: baseline; padding: 1.15rem 0; border-top: 1px solid var(--c-line); transition: padding .5s var(--ease-out), background-color .4s; }
.row:last-child .row__link { border-bottom: 1px solid var(--c-line); }
.row__num { font-size: var(--fs-micro); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--c-grey-dark); }
.row__name h3 { display: inline; font-size: clamp(1.25rem, 2vw, 2.1rem); font-weight: 700; font-stretch: 82%; line-height: 1.05; }
.row__name span { display: block; margin-top: .15rem; font-size: var(--fs-small); color: var(--c-grey); }
.row__client, .row__qty { font-size: var(--fs-small); color: var(--c-grey); }
.row__qty { font-variant-numeric: tabular-nums; }
.row__cat { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-red); }
.row__go { justify-self: end; }
.row__go svg { width: 9px; height: 11px; fill: var(--c-red); opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .5s var(--ease-out); }
.row__link:hover, .row__link:focus-visible { padding-inline-start: 1rem; background: linear-gradient(90deg, rgba(74, 0, 24, .25), transparent 60%); }
.row__link:hover .row__go svg, .row__link:focus-visible .row__go svg { opacity: 1; transform: none; }

.pj-creative { padding: 12vh 0 14vh; border-top: 1px solid var(--c-line); }
.pj-creative__title { font-size: clamp(2.4rem, 5vw, 6rem); }
.pj-creative__lead { max-width: 30rem; color: var(--c-grey); }
.pj-works--creative { grid-template-columns: repeat(12, minmax(0, 1fr)); margin-bottom: 5vh; }
.work--sm { grid-column: span 5; }
.work--sm + .work--sm { grid-column: 7 / span 5; margin-top: 8vh; }
.work--sm .work__title { font-size: clamp(1.15rem, 1.5vw, 1.6rem); }
.rows--creative .row__name h3 { font-size: clamp(1.1rem, 1.5vw, 1.5rem); }

.pj-cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 2rem; padding-top: 14vh; padding-bottom: 16vh; border-top: 1px solid var(--c-line); }
.pj-cta__title { font-size: clamp(2.6rem, 7vw, 8.6rem); }

.cs-hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; isolation: isolate; }
.cs-hero__media { position: absolute; inset: 0; z-index: 0; container-type: inline-size; transform-origin: 50% 35%; }
.cs-hero__media .media::after, .cs-hero__media .slate::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 5, 5, .7) 0%, rgba(5, 5, 5, 0) 26%, rgba(5, 5, 5, .05) 52%, rgba(5, 5, 5, .92) 100%), linear-gradient(90deg, rgba(5, 5, 5, .5), rgba(5, 5, 5, 0) 55%); }
.cs-hero__media .slate { padding: 18vh calc(var(--gutter) + var(--rail)) 20vh; }
.cs-hero__media .slate__name { font-size: 24cqw; opacity: .1; }
.cs-hero__media .slate__top, .cs-hero__media .slate__bottom { display: none; }
.cs-hero__top, .cs-hero__main, .cs-hero__meta { position: relative; z-index: 1; pointer-events: none; }
.cs-hero a, .cs-hero button { pointer-events: auto; }
.cs-hero__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: clamp(6.2rem, 13vh, 8rem); }
.cs-crumbs { font-size: var(--fs-small); color: rgba(245, 245, 242, .66); }
.cs-crumbs ol { display: flex; flex-wrap: wrap; gap: .3rem .6rem; }
.cs-crumbs li + li::before { content: "/"; margin-inline-end: .6rem; color: rgba(245, 245, 242, .35); }
.cs-crumbs a:hover { color: var(--c-paper); }
.cs-crumbs__here { color: var(--c-paper); }
.cs-hero__cat { display: flex; align-items: center; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cs-hero__main { align-self: end; container-type: inline-size; padding-bottom: 2rem; }
.cs-hero__name { display: block; font-size: min(calc(var(--fit, 10) * .62cqi), 13.5rem, 26vh); text-shadow: 0 14px 70px rgba(0, 0, 0, .6); }
.cs-hero__seo { display: block; margin-top: 1rem; max-width: 34rem; font-size: var(--fs-sub); font-weight: 500; font-stretch: 92%; line-height: 1.25; color: rgba(245, 245, 242, .86); }
.cs-hero__play { position: absolute; z-index: 2; inset-inline-end: var(--gutter); bottom: clamp(9rem, 22vh, 14rem); display: flex; align-items: center; gap: 1rem;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cs-hero__playdisc { width: clamp(72px, 7vw, 104px); height: clamp(72px, 7vw, 104px); border-radius: 50%; display: grid; place-items: center; background: rgba(245, 245, 242, .12);
  border: 1px solid rgba(245, 245, 242, .38); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .4s, transform .6s var(--ease-out); }
.cs-hero__playdisc svg { width: 22%; height: 26%; margin-inline-start: 6%; fill: var(--c-paper); }
.cs-hero__play:hover .cs-hero__playdisc, .cs-hero__play:focus-visible .cs-hero__playdisc { background: var(--c-red); border-color: var(--c-red); transform: scale(1.06); }
.cs-hero__meta { display: flex; flex-wrap: wrap; gap: 1rem 3rem; padding-top: 1.1rem; padding-bottom: 2.2rem; }
.cs-hero__meta::before { content: ""; position: absolute; top: 0; inset-inline: calc(var(--rail) + var(--gutter)) var(--gutter); height: 1px; background: rgba(245, 245, 242, .2); }
.cs-hero__meta dt { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(245, 245, 242, .55); }
.cs-hero__meta dd { margin: .3rem 0 0; font-size: var(--fs-small); font-weight: 600; }
.cs-hero__scroll { position: absolute; z-index: 1; inset-inline-end: var(--gutter); bottom: 2.4rem; display: flex; align-items: center; gap: .7rem; font-size: var(--fs-micro); font-weight: 600; color: rgba(245, 245, 242, .6); }
.cs-hero__scroll span { width: 44px; height: 1px; background: rgba(245, 245, 242, .25); position: relative; overflow: hidden; }
.cs-hero__scroll span::after { content: ""; position: absolute; inset: 0; background: var(--c-red); animation: scrollcue 2.2s var(--ease-cine) infinite; }
@keyframes scrollcue { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }

.m-single .vid--single { width: 100%; }
.m-single .vid--vertical { width: min(380px, 70vw); margin-inline: auto; }

.sl { padding-top: 10vh; padding-bottom: 12vh; }
.sl__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.4rem 2rem; margin-bottom: 2.2rem; }
.sl__title h2 { font-size: var(--fs-sub); font-weight: 700; font-stretch: 88%; }
.sl__count { display: flex; align-items: baseline; gap: .6rem; margin-top: .5rem; font-size: var(--fs-small); color: var(--c-grey); }
.sl__count .t-display { font-size: clamp(3rem, 5.6vw, 6.4rem); line-height: .8; color: var(--c-paper); font-variant-numeric: tabular-nums; }
.sl__ctrl { display: flex; align-items: center; gap: .6rem; }
.sl__pos { margin-inline-end: .9rem; font-size: var(--fs-small); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--c-grey); }
.sl__pos [data-sl-cur] { color: var(--c-paper); }
.sl__arrow { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--c-line-strong); transition: background-color .3s, border-color .3s, opacity .3s; }
.sl__arrow svg { width: 10px; height: 12px; margin-inline-start: 2px; fill: var(--c-paper); }
.sl__arrow--prev svg { transform: scaleX(-1); margin-inline: 0 2px; }
.sl__arrow:hover:not(:disabled) { background: var(--c-red); border-color: var(--c-red); }
.sl__arrow:disabled { opacity: .3; cursor: default; }
.sl__track { display: flex; gap: var(--col-gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: calc(var(--rail) + var(--gutter)) var(--gutter);
  padding: .4rem var(--gutter) 1rem calc(var(--rail) + var(--gutter)); scrollbar-width: none; cursor: grab; }
.sl__track::-webkit-scrollbar { display: none; }
.sl__track:focus-visible { outline: 2px solid var(--c-magenta); outline-offset: -2px; }
.sl__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.sl__track.is-dragging .epc { pointer-events: none; }
.epc { flex: 0 0 min(36vw, 580px); scroll-snap-align: start; }
.sl--vertical .epc { flex-basis: min(19vw, 300px); }
.epc__btn { display: block; width: 100%; text-align: start; }
.epc__poster { position: relative; display: block; aspect-ratio: var(--ar, 16 / 9); overflow: hidden; border-radius: var(--radius-media); background: var(--c-ink); container-type: inline-size; transition: transform .8s var(--ease-out); }
.epc__poster .media__img, .epc__poster .epslate { transition: transform 1.2s var(--ease-out); }
.epc__btn:hover .epc__poster .media__img, .epc__btn:hover .epslate, .epc__btn:focus-visible .epslate { transform: scale(1.05); }
.epc__play { position: absolute; z-index: 2; inset-inline-end: 14px; bottom: 14px; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(245, 245, 242, .14); border: 1px solid rgba(245, 245, 242, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color .35s, transform .5s var(--ease-out); }
.epc__play svg { width: 11px; height: 13px; margin-inline-start: 2px; fill: var(--c-paper); }
.epc__btn:hover .epc__play, .epc__btn:focus-visible .epc__play { background: var(--c-red); border-color: var(--c-red); transform: scale(1.08); }
.epc__meta { display: flex; flex-wrap: wrap; gap: .2rem .9rem; align-items: baseline; margin-top: .9rem; }
.epc__num { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-red); font-variant-numeric: tabular-nums; }
.epc__title { font-size: var(--fs-small); font-weight: 600; }
.epc__guest { font-size: var(--fs-small); color: var(--c-grey); }
.sl__bar { position: relative; height: 12px; margin-top: 1.4rem; }
.sl__bar::before { content: ""; position: absolute; top: 0; inset-inline: calc(var(--rail) + var(--gutter)) var(--gutter); height: 8px; background: repeating-linear-gradient(90deg, rgba(245, 245, 242, .28) 0 1px, transparent 1px 12px); }
.sl__progress { position: absolute; top: 9px; inset-inline-start: calc(var(--rail) + var(--gutter)); height: 2px; width: calc((100% - var(--rail) - 2 * var(--gutter)) * var(--p, .1)); background: var(--c-red); transition: width .25s linear; }
.sl__note { margin-top: .9rem; font-size: var(--fs-small); color: var(--c-grey); }
.epslate { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 6cqw;
  background: radial-gradient(90% 80% at 82% 8%, rgba(74, 0, 24, .75), rgba(74, 0, 24, 0) 62%), linear-gradient(160deg, #19191c, #0a0a0b 72%); }
.epslate__top { display: flex; justify-content: space-between; gap: 1rem; font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(245, 245, 242, .55); }
.epslate__num { font-size: 30cqw; line-height: .8; color: rgba(245, 245, 242, .92); }
.sl--vertical .epslate__num { font-size: 48cqw; }
.epslate__wave { height: 12%; background: repeating-linear-gradient(90deg, rgba(217, 14, 67, .55) 0 2px, transparent 2px 6px);
  -webkit-mask-image: linear-gradient(90deg, #000 0 20%, rgba(0,0,0,.35) 20% 34%, #000 34% 52%, rgba(0,0,0,.4) 52% 70%, #000 70%); mask-image: linear-gradient(90deg, #000 0 20%, rgba(0,0,0,.35) 20% 34%, #000 34% 52%, rgba(0,0,0,.4) 52% 70%, #000 70%); }
.ep-auto { z-index: 1; }

.vbox { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; padding: 6vh 5vw; background: rgba(5, 5, 5, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .4s; }
.vbox.is-open { opacity: 1; }
.vbox__stage { position: relative; width: min(90vw, calc(76vh * 16 / 9)); aspect-ratio: 16 / 9; border-radius: var(--radius-media); overflow: hidden; background: var(--c-ink); container-type: inline-size; }
.vbox__stage.is-vertical { aspect-ratio: 9 / 16; width: min(88vw, calc(76vh * 9 / 16)); }
.vbox__stage iframe { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; }
.vbox__close { position: absolute; top: 1.2rem; inset-inline-end: 1.2rem; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--c-line-strong); font-size: 1.8rem; line-height: 1; }
.vbox__close:hover { border-color: var(--c-red); background: var(--c-red); }
.vbox__note { position: absolute; bottom: 3vh; inset-inline: 5vw; text-align: center; font-size: var(--fs-small); color: var(--c-grey); }
.vbox__note a { color: var(--c-paper); border-bottom: 1px solid var(--c-red); }

.rel__cat { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-red); }
.rel__go { display: none; }
.row__thumb { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .row__thumb { display: block; position: fixed; z-index: 60; top: 0; left: 0; width: 300px; aspect-ratio: 16 / 10.5; border-radius: var(--radius-media); overflow: hidden;
    opacity: 0; transform: translate(-9999px, -9999px) scale(.96); transition: opacity .35s var(--ease-out), transform .1s linear; pointer-events: none;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .6); outline: 1px solid rgba(245, 245, 242, .12); outline-offset: -1px; }
  .row__thumb .media, .row__thumb .mslate { position: absolute; inset: 0; }
  .row__thumb.is-shown { opacity: 1; }
}
.mslate { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(100% 80% at 80% 10%, rgba(74, 0, 24, .8), rgba(74, 0, 24, 0) 65%), linear-gradient(160deg, #1a1a1d, #0b0b0c); }
.mslate .t-display { font-size: 1.35rem; color: rgba(245, 245, 242, .85); }

.cs-facts { margin-top: 12vh; }
.cs-facts .wrap { position: relative; }
.cs-facts__progress { position: absolute; top: 0; inset-inline: calc(var(--rail) + var(--gutter)) var(--gutter); height: 2px; background: var(--c-red); transform-origin: left; transform: scaleX(0); z-index: 1; }
.cs-facts__track { display: flex; flex-wrap: wrap; border-top: 1px solid var(--c-line-strong); padding-top: 26px; position: relative; }
.cs-facts__track::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 10px; background: repeating-linear-gradient(90deg, rgba(245, 245, 242, .3) 0 1px, transparent 1px 12px); }
.fact { flex: 1 1 10rem; min-width: 0; padding: 0 1.2rem 1.2rem; border-inline-start: 1px solid var(--c-line); }
.fact:first-child { border-inline-start: 0; padding-inline-start: 0; }
.fact--wide { flex-grow: 1.7; }
.fact dt { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-grey); }
.fact dd { margin: .55rem 0 0; font-size: clamp(1rem, 1.2vw, 1.2rem); font-weight: 600; font-stretch: 92%; line-height: 1.3; }
.fact ul { display: grid; gap: .15rem; }

.cs-story { padding: 12vh 0 4vh; }
.cs-sec { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); padding: 5vh var(--gutter) 5vh calc(var(--rail) + var(--gutter)); }
.cs-sec__mark { grid-column: 1 / span 3; position: sticky; top: 150px; align-self: start; padding-top: .6rem; border-top: 1px solid var(--c-line); }
.cs-sec__tc { display: block; font-size: var(--fs-micro); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .04em; color: var(--c-red); }
.cs-sec__title { margin-top: .5rem; font-size: clamp(1.3rem, 1.8vw, 1.9rem); font-weight: 700; font-stretch: 88%; line-height: 1.1; }
.cs-sec__body { grid-column: 5 / span 7; }
.cs-sec__lead { font-size: clamp(1.3rem, 2vw, 2.15rem); font-weight: 500; font-stretch: 92%; line-height: 1.28; max-width: 44rem; }
.cs-sec__text { margin-top: 1.1rem; max-width: 36rem; color: var(--c-grey); }
.cs-roles { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.6rem; }
.cs-roles li { padding: .45rem .95rem; border-radius: var(--radius-pill); border: 1px solid var(--c-line-strong); font-size: var(--fs-small); font-weight: 600; }
.cs-credits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 2rem; margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--c-line); }
.cs-credits dt { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-grey); }
.cs-credits dd { margin: .3rem 0 0; font-size: 1.1rem; font-weight: 600; }

.cs-media { padding-top: 8vh; padding-bottom: 10vh; }
.m-trio { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
.m-trio > :nth-child(1) { grid-column: 1 / span 6; }
.m-trio > :nth-child(2) { grid-column: 7 / span 2; margin-bottom: 10vh; }
.m-trio > :nth-child(3) { grid-column: 9 / span 4; margin-bottom: 22vh; }
.m-strip { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.m-strip > :nth-child(1) { grid-column: 2 / span 3; margin-top: 10vh; }
.m-strip > :nth-child(2) { grid-column: 5 / span 4; }
.m-strip > :nth-child(3) { grid-column: 9 / span 3; margin-top: 18vh; }
.m-duo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
.m-duo > :nth-child(1) { grid-column: 1 / span 8; }
.m-duo > :nth-child(2) { grid-column: 9 / span 3; margin-bottom: 12vh; }
.m-full { margin: 0; padding-top: 8vh; padding-bottom: 10vh; }
.m-full__frame { position: relative; aspect-ratio: 2.39 / 1; overflow: hidden; }

.cs-links { padding-top: 4vh; padding-bottom: 8vh; }
.cs-links__title { font-size: var(--fs-sub); font-weight: 700; font-stretch: 88%; margin-bottom: 1rem; }
.cs-links ul { display: flex; flex-wrap: wrap; gap: .5rem; }
.cs-links a, .cs-links__more { display: inline-flex; gap: .6rem; padding: .55rem 1rem; border-radius: var(--radius-pill); border: 1px solid var(--c-line-strong); font-size: var(--fs-small); font-weight: 600; transition: border-color .3s; }
.cs-links a span { color: var(--c-grey); font-variant-numeric: tabular-nums; }
.cs-links a:hover { border-color: var(--c-red); }
.cs-links__more { color: var(--c-grey); }

.cs-faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); padding-top: 8vh; padding-bottom: 10vh; }
.cs-faq__title { grid-column: 1 / span 4; font-size: var(--fs-sub); font-weight: 700; font-stretch: 88%; }
.cs-faq__list { grid-column: 5 / span 8; }
.cs-faq details { border-top: 1px solid var(--c-line); }
.cs-faq details:last-child { border-bottom: 1px solid var(--c-line); }
.cs-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 2rem; padding: 1.15rem 0; font-size: clamp(1.05rem, 1.35vw, 1.35rem); font-weight: 600; font-stretch: 92%; }
.cs-faq summary::-webkit-details-marker { display: none; }
.cs-faq summary::after { content: ""; flex: none; width: 14px; height: 14px; margin-top: .35em; background: linear-gradient(var(--c-red), var(--c-red)) center / 100% 1.5px no-repeat, linear-gradient(var(--c-red), var(--c-red)) center / 1.5px 100% no-repeat; transition: transform .5s var(--ease-out); }
.cs-faq details[open] summary::after { transform: rotate(45deg); }
.cs-faq details p { padding: 0 0 1.4rem; max-width: 42rem; color: rgba(245, 245, 242, .72); }

.cs-cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.6rem 3rem; padding-top: 3rem; padding-bottom: 3rem; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.cs-cta__text { max-width: 40rem; font-size: var(--fs-sub); font-weight: 500; font-stretch: 92%; line-height: 1.3; }

.cs-related { padding-top: 14vh; padding-bottom: 8vh; }
.cs-related__title { font-size: var(--fs-sub); font-weight: 700; font-stretch: 88%; margin-bottom: 2.4rem; }
.rel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.rel__item { grid-column: span 4; }
.rel__item:nth-child(2) { margin-top: 10vh; }
.rel__item:nth-child(3) { margin-top: 20vh; }
.rel__meta { display: grid; gap: .15rem; padding-top: 1rem; }

.cs-next { position: relative; margin-top: 10vh; }
.cs-next__link { position: relative; display: block; min-height: 118vh; overflow: hidden; }
.cs-next__frame { position: absolute; inset: 28vh 0 0; clip-path: inset(14% 18% 0% 18% round 8px); container-type: inline-size; }
.cs-next__frame .media::after, .cs-next__frame .slate::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 5, 5, .85), rgba(5, 5, 5, .15) 45%, rgba(5, 5, 5, .5)); }
.cs-next__text { position: relative; z-index: 2; display: grid; gap: .8rem; padding-top: 10vh; }
.cs-next__label { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-red); }
.cs-next__title { font-size: clamp(3rem, 10vw, 13rem); }
.cs-next__kicker { display: flex; gap: 1.2rem; font-size: var(--fs-small); color: var(--c-grey); }
.cs-next__kicker span { color: var(--c-red); font-size: var(--fs-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; align-self: center; }
html:not(.has-motion) .cs-next__frame { clip-path: none; }

.pj-hero > :not(.pj-wall) { position: relative; z-index: 1; }
.pj-wall { position: absolute; z-index: 0; top: 0; bottom: -14vh; inset-inline-start: 40%; inset-inline-end: 0; display: flex; gap: 12px; overflow: hidden; opacity: .55; }
.pj-wall::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--c-black), rgba(5, 5, 5, .35) 40%, rgba(5, 5, 5, .45)), linear-gradient(180deg, var(--c-black), rgba(5, 5, 5, 0) 22%, rgba(5, 5, 5, 0) 62%, var(--c-black)); }
.pj-wall__col { flex: 1 1 0; display: flex; flex-direction: column; gap: 12px; animation: wallup 90s linear infinite; }
.pj-wall__col:nth-child(even) { animation-direction: reverse; margin-top: -30%; }
.pj-wall__tile { flex: none; position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; outline: 1px solid rgba(245, 245, 242, .08); outline-offset: -1px; }
.pj-wall__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.75) brightness(.85); }
@keyframes wallup { to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .pj-wall__col { animation: none; } }

@media (max-width: 899px) {
  .pj-hero { padding-top: 6.4rem; padding-bottom: 4.2rem; }
  .pj-wall { inset-inline-start: 22%; bottom: 0; opacity: .4; gap: 8px; }
  .pj-wall__col:nth-child(n+4) { display: none; }
  .cs-story.mrail .cs-sec { padding-inline-start: calc(var(--gutter) + 12px); }
  .pj-hero__title { font-size: 13.4vw; }
  .pj-hero__aside { grid-column: 1 / -1; margin-top: 1.6rem; }
  .pj-hero__intro { font-size: 1.1rem; }
  .pj-filter { top: 66px; margin-inline: 0; }
  .pj-filter.is-stuck { background: rgba(5, 5, 5, .92); }
  .pj-filter__inner { padding-inline: 0; flex-wrap: nowrap; }
  .pj-filter__inner::before { inset-inline: var(--gutter); }
  .pj-filter__list { flex-wrap: nowrap; overflow-x: auto; gap: .4rem; padding-inline: var(--gutter); scrollbar-width: none; scroll-padding-inline: var(--gutter); }
  .pj-filter__list::-webkit-scrollbar { display: none; }
  .pj-filter__btn { flex: none; min-height: 44px; padding: .7rem .95rem; border-radius: var(--radius-pill); border: 1px solid var(--c-line-strong); }
  .pj-filter__btn::before, .pj-filter__btn::after { display: none; }
  .pj-filter__btn[aria-pressed="true"] { background: var(--c-paper); color: var(--c-black); border-color: var(--c-paper); }
  .pj-filter__btn[aria-pressed="true"] sup { color: var(--c-grey-dark); }
  .pj-filter__status { display: none; }

  .pj-works, .pj-works.is-filtered, .pj-works--creative { display: flex; flex-direction: column; align-items: stretch; gap: 3.4rem; }
  .pj-works .work { margin: 0 !important; transform: none !important; }
  .pj-works .work__frame { --ar: 4 / 5 !important; }
  .work--l4 .work__frame, .work--l8 .work__frame, .pj-works--creative .work__frame { --ar: 16 / 10 !important; }
  .work--l8 { margin-inline: calc(-1 * var(--gutter)) !important; }
  .work--l8 .work__meta { padding-inline-start: var(--gutter); }
  .work--l4 .work__meta, .work--l8 .work__meta { position: static; background: none; padding: 1rem 0 0; }
  .work--l8 .work__meta { padding-inline: var(--gutter); }
  .work--l4 .work__title, .work--l8 .work__title { font-size: 2rem; }
  .work__info { opacity: 1; transform: none; }
  .work__go { opacity: 1; transform: none; width: 44px; height: 44px; }
  .pj-sel { padding-top: 1.6rem; padding-bottom: 10vh; }

  .pj-creative__head { display: grid; }
  .pj-cta { padding-top: 10vh; padding-bottom: 12vh; }
  .pj-cta__title { font-size: 12vw; }
  .pj-cta .btn { width: 100%; }

  .cs-facts { margin-top: 6vh; }
  .cs-facts__track { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 1rem; }
  .fact, .fact:first-child { padding: 0; border: 0; }
  .fact--wide { grid-column: 1 / -1; }
  .cs-story { padding-top: 6vh; }
  .cs-sec { display: block; padding-block: 3.4vh; }
  .cs-sec__mark { position: static; margin-bottom: 1rem; }
  .cs-sec__lead { font-size: 1.25rem; }
  .cs-credits { grid-template-columns: 1fr; }
  .cs-media { padding-block: 4vh; }
  .m-trio, .m-strip, .m-duo { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; align-items: flex-end; }
  .m-trio::-webkit-scrollbar, .m-strip::-webkit-scrollbar, .m-duo::-webkit-scrollbar { display: none; }
  .m-trio > *, .m-strip > *, .m-duo > * { flex: 0 0 auto; margin: 0 !important; scroll-snap-align: start; }
  .m-trio > [style*="16 / 9"], .m-duo > [style*="16 / 9"] { width: 84vw; }
  .m-trio > [style*="9 / 16"] { width: 27vw; }
  .m-strip > * { width: 56vw; }
  .m-duo > [style*="4 / 5"] { width: 60vw; }
  .cs-faq { display: block; }
  .cs-faq__list { margin-top: 1.2rem; }
  .cs-cta .btn { width: 100%; }
  .pj-hero__count { gap: 1.2rem 2rem; }
  .pj-hero__count dd { font-size: 2.4rem; }
  .pj-hero__stat--text { flex-basis: 100%; }
  .pj-hero__stat--text dd { font-size: 1.3rem; }
  .pj-filter__inner { padding-top: .75rem; padding-bottom: .5rem; }
  .pj-filter__btn { min-height: 40px; padding: .5rem .85rem; font-size: .68rem; }
  .pj-works:not(.pj-works--creative) .work__meta { grid-template-columns: 1fr; row-gap: .25rem; padding-top: .9rem; }
  .pj-works:not(.pj-works--creative) .work__num { display: none; }
  .pj-works:not(.pj-works--creative) .work__title { font-size: 1.65rem; }
  .pj-works:not(.pj-works--creative) .work__kicker { display: none; }
  .pj-works .work__info { margin-top: .15rem; gap: .2rem .8rem; }
  .pj-works .work__info span:nth-child(3) { display: none; }
  .rows { border-bottom: 1px solid var(--c-line); }
  .row__link, .pj-works--creative .work__link { display: grid; grid-template-columns: 64px minmax(0, 1fr) 24px; grid-template-rows: auto auto; column-gap: 1rem; row-gap: .25rem;
    align-items: center; min-height: 104px; padding: 12px 0; border-top: 1px solid var(--c-line); border-bottom: 0; background: none !important; }
  .row:last-child .row__link { border-bottom: 0; }
  .row__thumb { display: block; grid-column: 1; grid-row: 1 / span 2; position: relative; width: 64px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; background: var(--c-ink); }
  .row__num, .row__client, .row__qty, .row__name span { display: none; }
  .row__name { grid-column: 2; grid-row: 1; align-self: end; min-width: 0; }
  .row__name h3, .rows--creative .row__name h3 { display: block; font-size: 1.12rem; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .row__cat { grid-column: 2; grid-row: 2; align-self: start; }
  .row__go { grid-column: 3; grid-row: 1 / span 2; justify-self: end; }
  .row__go svg { opacity: 1; transform: none; }
  .row__link:hover, .row__link:focus-visible { padding-inline-start: 0; }
  .pj-works--creative { gap: 0; margin-bottom: 0; }
  .pj-works--creative .work { margin: 0 !important; }
  .pj-works--creative .work__frame { --ar: 4 / 5 !important; grid-column: 1; grid-row: 1 / span 2; width: 64px; border-radius: 4px; }
  .pj-works--creative .work__badge, .pj-works--creative .work__go, .pj-works--creative .work__num { display: none; }
  .pj-works--creative .work__meta { display: contents; }
  .pj-works--creative .work__title { grid-column: 2; grid-row: 1; align-self: end; font-size: 1.12rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pj-works--creative .work__info { grid-column: 2; grid-row: 2; align-self: start; margin: 0; }
  .pj-works--creative .work__info span:not(:first-child) { display: none; }
  .pj-works--creative .work__link::after { content: ""; grid-column: 3; grid-row: 1 / span 2; justify-self: end; width: 9px; height: 11px; background: var(--c-red); clip-path: polygon(0 0, 100% 50%, 0 100%); }
  .rows--creative .row__cat { display: none; }
  .rows--creative .row__name { grid-row: 1 / span 2; align-self: center; }
  .rows--creative .row__name span { display: block; margin-top: .25rem; font-size: var(--fs-small); color: var(--c-grey); }
  .pj-works--creative .work__info { display: none; }
  .pj-works--creative .work__kicker { display: block; grid-column: 2; grid-row: 2; align-self: start; }
  .pj-creative { padding-top: 8vh; }
  .pj-list__note { display: none; }

  .cs-hero { display: flex; flex-direction: column; min-height: 0; overflow: visible; }
  .cs-hero__top { order: 1; padding-top: 5.4rem; align-items: center; }
  .cs-crumbs__home, .cs-crumbs__here { display: none; }
  .cs-hero__media .slate__name { display: none; }
  .cs-crumbs li + li::before { content: none; }
  .cs-crumbs a { display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; color: var(--c-paper); }
  .cs-crumbs a::before { content: ""; width: 8px; height: 10px; background: var(--c-red); clip-path: polygon(100% 0, 0 50%, 100% 100%); }
  .cs-hero__top, .cs-hero__main, .cs-hero__meta { align-self: stretch; }
  .cs-hero__main { order: 2; padding-top: .4rem; padding-bottom: 0; }
  .fact--dup { display: none; }
  .cs-hero__name { font-size: min(calc(var(--fit, 10) * 1cqi), 17vw); }
  .cs-hero__seo { margin-top: .7rem; font-size: 1rem; color: var(--c-grey); }
  .cs-hero__media { order: 3; position: relative; inset: auto; aspect-ratio: 4 / 5; margin-top: 1.4rem; }
  .cs-hero__media .media::after, .cs-hero__media .slate::after { background: linear-gradient(180deg, rgba(5, 5, 5, 0) 60%, rgba(5, 5, 5, .55)); }
  .cs-hero__media .slate { padding: 2rem; }
  .cs-hero__media .slate__name { font-size: 40cqw; }
  .cs-hero__play { position: absolute; inset: 0; margin: auto; width: max-content; height: max-content; }
  .cs-hero__playtxt { display: none; }
  .cs-hero__playdisc { width: 76px; height: 76px; }
  .cs-hero__meta { order: 4; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-top: 1.1rem; padding-bottom: 0; margin-top: 1.2rem; }
  .cs-hero__meta::before { inset-inline: var(--gutter); }
  .cs-hero__scroll { display: none; }
  .m-single .vid--single { width: 100%; }

  .sl { padding-top: 3.2vh; padding-bottom: 7vh; }
  .sl__head { align-items: flex-end; margin-bottom: 1.4rem; }
  .sl__arrow { display: none; }
  .sl__pos { margin: 0; }
  .sl__track { padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); gap: 12px; cursor: auto; }
  .epc { flex-basis: 84vw; }
  .sl--vertical .epc { flex-basis: 62vw; }
  .sl__bar::before { inset-inline: var(--gutter); }
  .sl__progress { inset-inline-start: var(--gutter); width: calc((100% - 2 * var(--gutter)) * var(--p, .1)); }

  .rel { display: block; border-bottom: 1px solid var(--c-line); }
  .rel__item { margin: 0 !important; }
  .rel__link { display: grid; grid-template-columns: 72px minmax(0, 1fr) 24px; column-gap: 1rem; align-items: center; min-height: 112px; padding: 12px 0; border-top: 1px solid var(--c-line); }
  .rel__link .work__frame { width: 72px; border-radius: 4px; }
  .rel__link .slate > * { display: none; }
  .rel__meta { padding: 0; gap: .2rem; min-width: 0; }
  .rel__meta .work__title { font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rel__meta .work__kicker { display: none; }
  .rel__go { display: block; justify-self: end; }
  .rel__go svg { width: 9px; height: 11px; fill: var(--c-red); }
  .cs-related { padding-top: 8vh; }

  .cs-next { margin-top: 6vh; }
  .cs-next__link { display: flex; flex-direction: column; min-height: 0; }
  .cs-next__text { order: 1; padding-top: 2.4rem; gap: .5rem; }
  .cs-next__title { font-size: min(11.5vw, 4.2rem); }
  .cs-next__frame { order: 2; position: relative; inset: auto; aspect-ratio: 4 / 5; margin-top: 1.6rem; clip-path: none !important; }
  .cs-next__frame .media::after, .cs-next__frame .slate::after { background: linear-gradient(180deg, rgba(5, 5, 5, .25), rgba(5, 5, 5, 0) 40%); }
}

[dir="rtl"] .work__go svg, [dir="rtl"] .row__go svg, [dir="rtl"] .vid__play svg { transform: scaleX(-1); }
[dir="rtl"] .cs-facts__progress { transform-origin: right; }
[dir="rtl"] .t-display { letter-spacing: 0; text-transform: none; }

.pvc { position: relative; max-width: none; padding-block: clamp(2rem, 5vh, 3.6rem) 0; }
.pvc__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.pvc__count { font-size: var(--fs-small); font-weight: 600; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--c-grey); }
.pvc__count b { color: var(--c-paper); font-weight: 700; }
.pvc__ctrl { display: flex; gap: .6rem; }
.pvc__btn { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--c-line-strong); transition: border-color .3s, opacity .3s; }
.pvc__btn i { position: absolute; inset: 0; margin: auto; width: 8px; height: 10px; background: var(--c-paper); clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.pvc__btn--next i { clip-path: polygon(0 0, 100% 50%, 0 100%); }
.pvc__btn:hover:not(:disabled), .pvc__btn:focus-visible { border-color: var(--c-red); }
.pvc__btn:disabled { opacity: .3; cursor: default; }
.pvc__btn:focus-visible, .pvc__viewport:focus-visible { outline: 2px solid #E94D8A; outline-offset: 3px; }
.pvc__viewport { margin-inline-end: calc(-1 * var(--gutter)); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; }
.pvc__viewport::-webkit-scrollbar { display: none; }
.pvc__viewport.is-drag { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.pvc__track { display: flex; gap: clamp(.8rem, 1.6vw, 1.6rem); width: max-content; min-width: 100%; padding-inline-end: var(--gutter); }
.pvc__slide { flex: 0 0 min(72%, 1060px); scroll-snap-align: start; }
.pvc__slide figure { margin: 0; }
.pvc__frame { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-media); background: var(--c-ink); outline: 1px solid rgba(245, 245, 242, .1); outline-offset: -1px; }
.pvc__slide[data-fit="contain"] .media__img { object-fit: contain; object-position: 50% 0; background: #0b0b0d; }
.pvc__slide[data-fit="cover"] .media__img { object-fit: cover; }
.pvc__ph { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(100% 80% at 80% 0%, rgba(74, 0, 24, .7), rgba(74, 0, 24, 0) 62%), linear-gradient(155deg, #19191b, #0a0a0b 72%); }
.pvc__ph::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, rgba(245, 245, 242, .04) 0 1px, transparent 1px 28px), repeating-linear-gradient(0deg, rgba(245, 245, 242, .04) 0 1px, transparent 1px 28px); }
.pvc__ph svg { position: relative; width: min(46%, 380px); height: auto; fill: rgba(245, 245, 242, .04); stroke: rgba(245, 245, 242, .38); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.pvc__tag { position: absolute; inset-block-start: 12px; inset-inline-start: 12px; z-index: 2; padding: .2rem .6rem; border: 1px dashed rgba(245, 245, 242, .3); border-radius: 10px; background: rgba(5, 5, 5, .5); font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(245, 245, 242, .7); }
.pvc figcaption { margin-top: .8rem; font-size: var(--fs-small); color: var(--c-grey); }
.pvc__bar { display: block; height: 1px; margin-top: 1.4rem; background: rgba(245, 245, 242, .1); }
.pvc__bar i { display: block; height: 100%; background: var(--c-red); transform-origin: left; transform: scaleX(var(--vp, .33)); transition: transform .3s var(--ease-out); }
@media (max-width: 899px) {
  .pvc { padding-block: 1.6rem 0; }
  .pvc__btn { display: none; }
  .pvc__viewport { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .pvc__slide { flex-basis: 90vw; }
}
@media (prefers-reduced-motion: reduce) { .pvc__bar i, .pvc__btn { transition: none; } }
