.nav__takes { grid-row: 1; grid-column: 3; justify-self: end; position: relative; display: block; width: 40px; padding: 3px; border-radius: 9px; line-height: 0; background: #FDB601; transform: rotate(-9deg); box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .7), 0 0 0 1px rgba(5, 5, 5, .25); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), width .5s cubic-bezier(.16, 1, .3, 1), box-shadow .3s; }
.nav__takes img { display: block; width: 100%; height: auto; }
.nav__takes::after { content: "5 Takes"; position: absolute; inset-block-start: calc(100% + 10px); left: 50%; padding: .32rem .6rem; border-radius: 999px; background: #050505; color: #FDB601; box-shadow: 0 0 0 1px rgba(253, 182, 1, .5); font-size: .64rem; font-weight: 800; letter-spacing: .1em; line-height: 1; text-transform: uppercase; white-space: nowrap; opacity: 0; transform: translate(-50%, -4px); pointer-events: none; transition: opacity .25s, transform .3s; }
.nav__takes:focus-visible { outline: 2px solid #FDB601; outline-offset: 3px; }
.nav__takes:focus-visible, .nav__takes:hover { transform: rotate(0deg) scale(1.12); box-shadow: 0 12px 22px -8px rgba(0, 0, 0, .75), 0 0 0 2px #F5F5F2; }
.nav__takes:focus-visible::after, .nav__takes:hover::after { opacity: 1; transform: translate(-50%, 0); }
.nav.is-scrolled .nav__takes { width: 34px; }
@media (prefers-reduced-motion: no-preference) {
  .nav__takes { animation: takes-clap 1.1s cubic-bezier(.34, 1.56, .64, 1) 1.4s both; }
  @keyframes takes-clap { 0% { transform: rotate(-9deg); } 30% { transform: rotate(-20deg) scale(1.08); } 60% { transform: rotate(-3deg); } 100% { transform: rotate(-9deg); } }
}
@media (min-width: 900px) { .nav { grid-template-columns: auto 1fr auto auto auto; } }
@media (max-width: 899px) { .nav { grid-template-columns: 1fr auto auto; } .nav__takes { grid-column: 2; width: 36px; margin-inline-end: .2rem; } .nav.is-scrolled .nav__takes { width: 32px; } }

.bg-side { padding-block: clamp(1.5rem, 4vh, 2.6rem) clamp(2.2rem, 6vh, 3.6rem); }
.bgx { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(.9rem, 1.6vw, 1.4rem); }
.bgx__c { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 1.1rem; min-width: 0; padding: clamp(1.2rem, 2vw, 1.8rem); border-radius: 10px; overflow: hidden; }
.bgx__c :focus-visible { outline-offset: 3px; }
.bgx__c--stories { color: #F5F5F2; background: radial-gradient(80% 120% at 90% 0%, rgba(217, 14, 67, .65) 0, rgba(74, 0, 24, .55) 50%, transparent 80%), #0c0c0e; box-shadow: 0 0 0 1px rgba(245, 245, 242, .1); }
.bgx__c--stories :focus-visible { outline: 2px solid #F5F5F2; }
.bgx__c--takes { color: #050505; background: radial-gradient(rgba(5, 5, 5, .13) 1.3px, transparent 1.7px) 0 0 / 15px 15px, #FDB601; }
.bgx__c--takes :focus-visible { outline: 2px solid #050505; }
.bgx__head { display: grid; gap: .7rem; }
.bgx__head--takes { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1rem; }
.bgx__k { display: inline-flex; align-items: center; gap: .6rem; justify-self: start; margin: 0; font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.bgx__rec { width: .5rem; height: .5rem; border-radius: 50%; background: #D90E43; box-shadow: 0 0 10px rgba(217, 14, 67, .9); }
@media (prefers-reduced-motion: no-preference) { .bgx__rec { animation: bgx-rec 1.4s steps(2, jump-none) infinite; } @keyframes bgx-rec { 50% { opacity: .2; } } }
.bgx__t { margin: 0; font-family: var(--f-sans, "Bricolage Grotesque", sans-serif); font-weight: 800; font-stretch: 75%; font-variation-settings: "opsz" 96; text-transform: uppercase; font-size: clamp(1.8rem, 2.8vw, 2.9rem); line-height: .88; letter-spacing: -.012em; text-wrap: balance; }
.bgx__t--takes { margin-top: .35rem; font-size: clamp(2.6rem, 4vw, 3.8rem); line-height: .8; white-space: nowrap; }
.bgx__t mark { background: none; color: #F5F5F2; -webkit-text-stroke: 2px #050505; paint-order: stroke fill; }
.bgx__logo { width: clamp(64px, 6vw, 84px); height: auto; padding: 5px; border-radius: 12px; background: #F5F5F2; transform: rotate(-7deg); box-shadow: 0 12px 22px -12px rgba(0, 0, 0, .55); }
.bgx__p { margin: 0; font-size: .95rem; line-height: 1.4; }
.bgx__strip { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; align-self: end; margin: 0; padding: 18px 10px; list-style: none; border-radius: 4px; background: #050505; box-shadow: 0 0 0 1px rgba(245, 245, 242, .08); }
.bgx__strip::before, .bgx__strip::after { content: ""; position: absolute; inset-inline: 8px; height: 6px; border-radius: 2px; background: repeating-linear-gradient(90deg, rgba(245, 245, 242, .38) 0 8px, transparent 8px 19px); }
.bgx__strip::before { inset-block-start: 6px; }
.bgx__strip::after { inset-block-end: 6px; }
.bgx__f a { display: grid; gap: .4rem; color: inherit; text-decoration: none; }
.bgx__pic { display: block; overflow: hidden; aspect-ratio: 2 / 3; border-radius: 2px; background: #1a1a1d; }
.bgx__pic img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.85) contrast(1.05); transition: filter .5s, transform .7s cubic-bezier(.16, 1, .3, 1); }
.bgx__f a:focus-visible img { filter: none; transform: scale(1.07); }
@media (hover: hover) { .bgx__f a:hover img { filter: none; transform: scale(1.07); } }
.bgx__ch { font-size: .6rem; font-weight: 700; letter-spacing: .04em; line-height: 1.15; text-transform: uppercase; overflow-wrap: anywhere; }
.bgx__ch b { color: #FF5C85; font-weight: 800; }
.bgx__eps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-self: end; margin: 0; padding: 0; list-style: none; }
.bgx__ep a { position: relative; display: block; overflow: hidden; aspect-ratio: 2 / 3; border-radius: 4px; background: #050505; color: #F5F5F2; text-decoration: none; box-shadow: 0 16px 26px -16px rgba(0, 0, 0, .7); transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.bgx__ep a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(5, 5, 5, .9)); }
.bgx__ep img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.bgx__ep a:focus-visible { transform: translateY(-4px); }
@media (hover: hover) { .bgx__ep a:hover { transform: translateY(-4px) rotate(-1deg); } }
.bgx__epno { position: absolute; z-index: 1; inset-block-start: 6px; inset-inline-start: 6px; padding: .2rem .45rem; border-radius: 999px; background: #FDB601; color: #050505; font-size: .56rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.bgx__epname { position: absolute; z-index: 1; inset-inline: 8px; inset-block-end: 8px; font-weight: 800; font-stretch: 75%; text-transform: uppercase; font-size: clamp(.95rem, 1.3vw, 1.2rem); line-height: .9; overflow-wrap: anywhere; }
.bgx__cta { display: inline-flex; align-items: center; justify-self: start; gap: .8rem; padding: .85rem 1.25rem; border-radius: 999px; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: background-color .3s, color .3s, transform .35s cubic-bezier(.16, 1, .3, 1); }
.bgx__c--stories .bgx__cta { background: #D90E43; color: #F5F5F2; }
.bgx__c--takes .bgx__cta { background: #050505; color: #FDB601; }
.bgx__cta:focus-visible { background: #F5F5F2; color: #050505; transform: translateY(-2px); }
@media (hover: hover) { .bgx__cta:hover { background: #F5F5F2; color: #050505; transform: translateY(-2px); } }
.bgx__cta i { position: relative; width: 1.2rem; height: 1px; background: currentColor; }
.bgx__cta i::after { content: ""; position: absolute; inset-inline-end: 0; inset-block-start: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-inline-end: 1px solid currentColor; transform: rotate(45deg); }
html[dir="rtl"] .bgx__cta i::after { transform: rotate(-135deg); }
html[dir="rtl"] :is(.bgx__k, .bgx__cta, .bgx__ch, .bgx__epno) { text-transform: none; letter-spacing: 0; }
html[dir="rtl"] .bgx__t:not(.bgx__t--takes), html[dir="rtl"] .bgx__epname { font-stretch: 100%; text-transform: none; line-height: 1.2; font-weight: 700; letter-spacing: 0; }
html[dir="rtl"] .bgx__t--takes, html[lang^="ar"] .bgx__t--takes { font-family: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif !important; font-weight: 800 !important; font-stretch: 75% !important; text-transform: uppercase !important; letter-spacing: -.012em !important; line-height: .8 !important; }

@media (max-width: 900px) {
  .bgx { grid-template-columns: minmax(0, 1fr); }
  .bgx__strip { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(28%, 96px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .bgx__strip::-webkit-scrollbar { display: none; }
  .bgx__f { scroll-snap-align: start; }
  .bgx__strip::before, .bgx__strip::after { inset-inline-end: auto; width: 900px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav__takes, .bgx__pic img, .bgx__ep a, .bgx__cta { transition: none; }
}