.transition-block {
    height: 100%;
  	contain: layout;
}

html[data-decor-continuing="1"] .decor-numbers.is--left .decor-inner {
    transform: translateY(var(--decor-left-offset, 0px));
}
html[data-decor-continuing="1"] .decor-numbers.is--right .decor-inner {
    transform: translateY(var(--decor-right-offset, 0px));
}

html, body { overscroll-behavior: none }
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility 
  }
  body::-webkit-scrollbar, *::-webkit-scrollbar {display: none}
  * { scrollbar-width: none; -ms-overflow-style: none }

@font-face {
	font-family: 'EditorialnewItalic';
	src: url('../fonts/69256b58b52a690439a40f04_EditorialNew-UltralightItalic.woff2') format('woff2');
	font-weight: 200;
	font-display: swap;
}
  
@font-face {
	font-family: 'EditorialnewItalicRegular';
	src: url('../fonts/6928442ea7118d68091935e5_EditorialNew-Italic.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}

.text-dot { transition: opacity ease 0.3s, scale ease 0.3s; animation: none }

  [data-loop], [data-dot]:hover .text-dot { animation: fadePulse 0.6s ease-in-out infinite 0.25s }

  @keyframes fadePulse {
	0%, 30%, 70%, 100% { opacity: 1 }
	40%, 60% { opacity: 0 }
  }
  
  .is--hidden { display: none !important }
 
/* NAVBAR AND FOOTER */

  .chars-block,
  .filter-item .filter-text-block, 
  .option-item .option-text-block, 
  .creator-link-text { transition: 0.6s all cubic-bezier(0.75, 0, 0.25, 1) }

  .filter-item .count-small{ transition:transform .6s cubic-bezier(0.75,0,0.25,1),left .6s cubic-bezier(0.75,0,0.25,1) }

  .nav-logo-wrapper:hover .chars-block.is--1 { transform: translateY(-105%) }
  .nav-logo-wrapper:hover .chars-block.is--2 { transform: translateY(105%) }
  
  @media (max-width: 768px) {
  	.nav-link-block .text-dot { display: none }
  }
  
  .nav-link-block .text-dot,
  .creator-block .text-dot,
  .mode-block .text-dot,
  .filter-item .text-dot {opacity: 0; scale: 0}
  
  .mode-block.is--active .text-dot,
  .filter-item.is--active .text-dot { opacity: 1; scale: 1}
  
  @media (min-width: 992px) {
  	.nav-link-block.w--current .text-dot,
  	.creator-block:hover .text-dot { opacity: 1; scale: 1}
  	.nav-link-block.w--current { color: #FFEEC8}
  }
  .filter-item.is--active .filter-text-block,
  .option-item.is--active .option-text-block,
  .creator-link:hover .creator-link-text { transform: translateY(-100%) }
  .creator-block .creator-inner { pointer-events: none }
  .creator-block:hover .creator-inner { pointer-events: auto }
  .creator-link-text.is--relative { bottom: -0.7vw }
  .creator-link.animate-in .creator-link-text.is--relative { bottom: 0vw }
  .creator-link.animate-out .creator-link-text.is--relative { bottom: -0.7vw }

.has-visited .swiper-slide {
    transition-delay: 0s;
}

.popup-container, .blocked-block, .preloader, .fade-block {display: block}
.preloader-text.loading .char{margin-left:-0.02em}
.name-medium .line-wrapper .line .word .char.has--style-italic{padding-left:.5vw}
.name-medium .line-wrapper .line .word{margin-left:-0.5vw}
.name-medium .line-wrapper {padding-left: 0.5vw}
.name-xlarge .line-wrapper {margin-top: -0.1vw; padding-top: 0.1vw}
.popup-content p em {font-style: normal}

.swiper-slide
{transition: opacity 0s 1.35s}

.preview-video-poster 
{transition: opacity 0s .1s;}

.footer, .background-decor, .preview-block * 
{transition: opacity .4s ease-out}

.video-hover-inner
{transition: transform .3s ease-out, opacity .2s ease-out}

.char-block 
{transition: transform .6s cubic-bezier(0.75,0,0,1)}

.hover-trigger, .list-video-wrapper, .preview-video
{transition: transform .6s cubic-bezier(0.75,0,0.25,1)}

.filter-item .count-small
{transition: transform .6s cubic-bezier(0.75,0,0.25,1), left .6s cubic-bezier(0.75,0,0.25,1)}

.project-item .description-block .text-mono
{transition: transform .6s cubic-bezier(0.75,0,0.25,1)}

.video-player-wrap, .player-mask
{transition: all .8s cubic-bezier(0.75,0,0,1)}
  
.player-video-wrap, .swiper-decor-wrapper, .swiper-center 
{transition: all .6s cubic-bezier(0.75, 0, 0.25, 1)}

.player-video-block.is--from-list,
.player-video-block.is--from-list .player-video 
{transition: none !important}

.swiper-slide {opacity:0!important; pointer-events:none!important}
.swiper-slide-prev, 
.swiper-slide-next, 
.swiper-slide-active {opacity:1!important}
.swiper-slide.is--filtered-out,
.swiper-slide.is--filtered-out .preview-block { z-index: 50 !important }

.swiper-slide-active .preview-block,
.is--active-logical .preview-block { z-index: 200 !important }
.swiper-slide.is--animating-out,
.swiper-slide.is--animating-out .preview-block { z-index: 150 !important }
.swiper-slide-prev .preview-block,
.is--prev-logical .preview-block { z-index: 100 }
.swiper-slide-next .preview-block,
.is--next-logical .preview-block { z-index: 300 }

.project-list {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
}

.player-mask.is--full {clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) !important}

.player-mask.is--full .video-hover-wrapper, 
.player-mask.is--full .video-spacer {opacity: 0;pointer-events: none !important}
.player-mask .player-navigation {opacity: 0;transition: opacity .4s ease}
.player-mask.is--full .player-navigation {opacity: 1}
.player-mask.is--full .player-video-wrap {scale: 1}
.video-fixed-container .list-video.is--top {opacity:1 !important}
  
@keyframes playerOpen {
    0% {
        top: var(--start-top);
        left: var(--start-left);
        width: var(--start-width);
        height: var(--start-height);
        filter: brightness(60%);
    }
    100% {
        top: 0;
        left: 0;
        width: 100vw;
        height: 100svh;
        filter: brightness(100%);
    }
}

.player-mask.is--from-list {
    position: fixed !important;
    z-index: 11000;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) !important;
    transition: none;
    animation: playerOpen 1.25s cubic-bezier(0.75, 0, 0, 1) forwards;
}

@keyframes playerClose {
    0% {
        top: 0;
        left: 0;
        width: 100vw;
        height: 100svh;
        filter: brightness(100%);
    }
    100% {
        top: var(--start-top);
        left: var(--start-left);
        width: var(--start-width);
        height: var(--start-height);
        filter: brightness(60%);
    }
}

	.player-mask.is--from-list.is--closing {animation: playerClose 1.25s cubic-bezier(0.75, 0, 0, 1) forwards}

	.player-video-poster {left: 0vw; right: 0vw; transform: translateX(0vw); transition: all 1.25s cubic-bezier(0.75, 0, 0, 1)}
	.player-video-poster.is--preview-right, .player-video-poster.is--preview-left {
    pointer-events: none;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) !important;
    width: 34vw !important;
    height: 19vw !important}
  .player-video-poster.is--preview-left {right: 102vw; left: -35vw}
  .player-video-poster.is--preview-right {left: 102vw; right: -35vw}
  .player-video-poster.is--preview-right.is--visible {transform: translateX(-7vw) !important}
  .player-video-poster.is--preview-left.is--visible {transform: translateX(6vw) !important}
  .player-video-block.is--target.is--from-list.is--full {z-index: 10 !important; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) !important}
 
  .video-spacer .text-dot,
  .hover-trigger .text-dot{opacity:0;transform:scale(0)}
  .video-spacer .swiper-center {clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%)}

  @media (min-width: 992px) {
    .preview-block:hover * {scale: 1.05}
    .video-spacer:hover .text-dot,
    .hover-trigger:hover .text-dot{opacity:1;transform:scale(1)}
    .video-spacer:hover .swiper-decor-wrapper {top: 0.35vw;left: 0.4vw;right: 0.4vw;bottom: 0.35vw}
    .video-spacer:hover .swiper-center {clip-path: polygon(85% 15%, 15% 15%, 15% 85%, 85% 85%)}
    .play-block:hover .char-block{transform: translateY(-100%)}
    .project-item:hover .project-background{height:100%;bottom:0}
    .project-item .description-block .text-mono{transform:translateY(100%)}
    .project-item:hover .description-block .text-mono{transform:translateY(0)}
    .project-item:hover .list-video.is--top{z-index:1}
    .project-item .video-decor-wrapper{top:0;bottom:0;left:0;right:0}
    .project-item:hover .video-decor-wrapper{top:-.3vw;bottom:-.3vw;left:-.3vw;right:-.3vw}
    .filter-item:hover .count-small{transform:translateY(-100%)}
    .filter-item.is--active .count-small{left:0;transform:translateY(15%)}
	}
  @media (max-width: 767px) {
  	.player-video-block .player-video {
    	transition: all ease 0.4s;
      object-fit: 50% 0%;
			height: 50vh;
      min-height: 58vw;
		}

    .player-video-block.is--full .player-video {
			object-fit: 50% 50%;
      height: 100vh;
    }
	}

img::selection {
            background: transparent;
        }

        .screensaver-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 9999;
            display: none;
            background: #000;
        }

        .screensaver-item {
            position: absolute;
            width: 400px;
            height: 267px;
            aspect-ratio: 1.5 / 1;
            will-change: transform;
            transform: translate3d(0, 0, 0);
            z-index: 10002;
        }

        .screensaver-item img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 1;
            pointer-events: none;
        }

        .screensaver-item video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 2;
            pointer-events: none;
        }

        #screensaver-canvas {
            position: fixed;
            inset: 0;
            width: 100vw;
            height: 100vh;
            z-index: 9999;
            pointer-events: none;
        }

.hover-trigger, .list-video-wrapper, .preview-video{transition:transform .6s cubic-bezier(0.75,0,0.25,1)}

.cursor-block_reportage,
.cursor-text-block,
.cursor-block_play
{transition: transform .3s ease-out, opacity .2s ease-out}

.background-video, .background-block {transition: all 1.35s cubic-bezier(.75, 0, 0, 1)}
.background-video {transition: all .6s cubic-bezier(.75, 0, 0, 1)}

.background-block {clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%)}

.background-block.is--on
{clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)}

.no-padding {
	padding: 0 !important;
}

.no-padding-top {
	padding-top: 0 !important;
}

.no-padding-bottom {
	padding-bottom: 0 !important;
}

.opacity-90 {
    filter: opacity(0.9);
}

.opacity-80 {
    filter: opacity(0.8);
}

.opacity-70 {
    filter: opacity(0.7);
}

.opacity-60 {
    filter: opacity(0.6);
}

.opacity-50 {
    filter: opacity(0.5);
}

.opacity-40 {
    filter: opacity(0.4);
}

.opacity-30 {
    filter: opacity(0.3);
}

.opacity-20 {
    filter: opacity(0.2);
}

.opacity-10 {
    filter: opacity(0.1);
}

.noise-move {
  z-index: 100;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
	background: url('../images/background-noise.png');
  background-position: 0 0;
  background-repeat: repeat;
  background-size: 200px;
  animation: 0.2s infinite noise;
  pointer-events: none;
}
@keyframes noise {
  0%, 100% {
    background-position: 0 0;
  }
  10% {
    background-position: -5% -10%;
  }
  20% {
    background-position: -15% 5%;
  }
  30% {
    background-position: 7% -25%;
  }
  40% {
    background-position: 20% 25%;
  }
  50% {
    background-position: -25% 10%;
  }
  60% {
    background-position: 15% 5%;
  }
  70% {
    background-position: 0% 15%;
  }
  80% {
    background-position: 25% 35%;
  }
  90% {
    background-position: -10% 10%;
  }
}
/* Preloader brand words.
   The word boxes are sized to their content so the leading italic letter can
   never be clipped; the reveal is a clip-path wipe (app.js) and the exit wipe
   is handled by .preloader-text-block. */
.preloader-text-final { overflow: visible; }
.preloader-text.is--left,
.preloader-text.is--right {
  width: max-content;
  min-width: 0;
  margin-left: 0;
  justify-content: flex-start;
  overflow: visible;
}

/* REELS PAGE */
.reels-main { padding-top: 15vh; padding-bottom: 14vh; pointer-events: auto; }
.reels-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2vw; max-width: 1400px; margin: 0 auto; padding: 0 4vw 3vh; }
.reels-head .reels-title { font-size: 5.2vw; line-height: 100%; }
.reels-head-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 1.2vh; }
.reels-filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6em 1.4em; }
.reels-filter { display: inline-flex; align-items: center; gap: .55em; background: transparent; border: 0; padding: 2px 0; cursor: pointer; color: inherit; }
.reels-filter .text-dot { opacity: 0; scale: 0; transition: opacity ease 0.3s, scale ease 0.3s; }
.reels-filter.is--active .text-dot { opacity: 1; scale: 1; }
.reels-filter .count-small { transition: transform .6s cubic-bezier(0.75,0,0.25,1); }
.reels-filter.is--active { color: #FFEEC8; }
.reel.is--hidden { display: none !important; }
.reels-feed { display: flex; align-items: flex-start; overflow-x: auto; overflow-y: hidden; gap: clamp(40px, 5vw, 96px); padding: 0 8vw 4vh; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.reel { display: flex; align-items: flex-start; gap: clamp(20px, 2vw, 36px); scroll-snap-align: center; flex: none; opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.22, .61, .21, 1), transform .9s cubic-bezier(.22, .61, .21, 1); }
.reel.is-inview { opacity: 1; transform: none; }
.reel.is-feature .reel-frame { height: min(62vh, 560px); height: min(62svh, 560px); }
.reel-frame {
  position: relative;
  height: min(58vh, 520px);
  height: min(58svh, 520px);
  aspect-ratio: 9 / 16;
  border: 1px solid rgba(255, 238, 200, .14);
  border-radius: 14px;
  background-color: #141412;
  overflow: hidden;
  cursor: pointer;
  pointer-events: auto;
  transition: transform .7s cubic-bezier(.22, .61, .21, 1), box-shadow .5s ease, border-color .5s ease;
}
.reel-frame:hover { transform: translateY(-6px); border-color: rgba(255, 238, 200, .3); box-shadow: 0 30px 70px rgba(0, 0, 0, .55); }
.reel-ambient { position: absolute; inset: -6%; z-index: 0; filter: blur(46px) brightness(.5) saturate(1.25); opacity: .8; pointer-events: none; }
.reel-ambient img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel-video, .reel-poster {
  position: absolute;
  inset: 0%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.reel-video { z-index: 1; }
.reel-poster { z-index: 1; transition: opacity .5s ease }
.reel.is-playing .reel-poster { opacity: 0 }
.reel-topline {
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  inset: 3.5% 6% auto;
}
.reel-sound {
  pointer-events: auto;
  background-color: rgba(10, 10, 9, .45);
  border: 1px solid rgba(255, 238, 200, .2);
  border-radius: 999px;
  padding: 6px 12px;
  color: #fffbf2b3;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: color .3s ease, border-color .3s ease;
}
.reel-sound:hover { color: var(--lemon); border-color: rgba(255, 238, 200, .45); }
.reel-bottom {
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  position: absolute;
  inset: auto 0% 0%;
  padding: 9% 7% 7%;
  background-image: linear-gradient(to top, rgba(10, 10, 9, .88), rgba(10, 10, 9, .38) 55%, rgba(10, 10, 9, 0));
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .45s ease, transform .6s cubic-bezier(.22, .61, .21, 1);
}
.reel-frame:hover .reel-bottom, .reel.is-playing .reel-bottom { opacity: 1; transform: none; }
.reel-meta { display: flex; flex-direction: column; gap: .9vh; min-width: 0; }
.reel-bottom .name-large { color: var(--lemon); font-size: clamp(19px, 1.9vw, 28px); }
.reel-bottom .text-regular { line-height: 140%; max-width: 36ch; }
.reel-link { pointer-events: auto; flex: none; text-decoration: underline; text-underline-offset: 4px; }
.reel-side { display: flex; flex-direction: column; justify-content: flex-start; gap: 1vh; width: 300px; flex: none; padding-top: 4vh; }
.reel-side-num { opacity: .55; }
.reel-side .name-large { color: var(--lemon); font-size: clamp(22px, 2.2vw, 34px); line-height: 110%; }
.reel-side .text-regular { line-height: 150%; }
@media (min-width: 992px) {
  .reel-bottom .reel-meta { display: none; }
  .reel-bottom { justify-content: flex-end; background-image: none; padding: 6% 7%; }
}
@media (max-width: 991px) {
  .reels-main { padding-top: 13vh; }
  .reels-head { flex-direction: column; align-items: flex-start; }
  .reels-head .reels-title { font-size: 9vw; }
  .reels-head-meta { align-items: flex-start; }
  .reels-filters { justify-content: flex-start; }
  .reel-side { display: none; }
  .reel-bottom { opacity: 1; transform: none; }
}
@media (max-width: 767px) {
  .reels-main { padding-top: 11vh; padding-bottom: 22vh; }
  .reels-head { padding-bottom: 4vh; }
  .reels-head .reels-title { font-size: 16vw; }
  .reels-feed { display: flex; flex-direction: column; align-items: center; gap: 5vh; overflow: visible; padding: 0; }
  .reel { flex-direction: column; }
  .reel-frame { height: min(68vh, 560px); height: min(68svh, 560px); border-radius: 10px; max-width: 86vw; }
  .reel-bottom { padding: 12% 7% 8%; }
}
@media (prefers-reduced-motion: reduce) {
  .reel, .reel-frame { transition: none; }
  .reel { opacity: 1; transform: none; }
}

/* Reels: editorial index + responsive film grid. This deliberately replaces
   the old horizontal strip with the same visual language as the site archive. */
.reels-main {
  padding: clamp(118px, 16vh, 210px) 0 clamp(100px, 14vh, 180px);
}
.reels-head {
  align-items: flex-start;
  max-width: 1480px;
  padding: 0 5vw clamp(34px, 5vh, 66px);
  border-bottom: 1px solid rgba(255, 251, 242, .22);
}
.reels-head .reels-title {
  margin: .08em 0 0;
  font-size: clamp(48px, 5.8vw, 94px);
  font-weight: 200;
  letter-spacing: -.065em;
  line-height: .9;
}
.reels-head-meta { width: min(100%, 390px); align-items: stretch; gap: 14px; }
.reels-head-meta > .text-mono { display: flex; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 251, 242, .22); }
.reels-head-meta > .text-mono::after { content: 'CATEGORY INDEX'; color: rgba(255, 251, 242, .52); }
.reels-filters { display: block; width: 100%; }
.reels-filter {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  width: 100%;
  min-height: 46px;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 251, 242, .15);
  color: rgba(255, 251, 242, .62);
  font-family: 'Monument Grotesk', Arial, sans-serif;
  font-size: 14px;
  text-align: left;
  transition: color .3s ease, padding .4s cubic-bezier(.22,.61,.21,1), background .3s ease;
}
.reels-filter .text-dot { display: block; opacity: .55; scale: .48; grid-column: 1; }
.reels-filter .text-medium { grid-column: 2; font: inherit; }
.reels-filter .count-small { grid-column: 3; font-family: 'ABC Simon Mono', monospace; font-size: 11px; opacity: .75; }
.reels-filter:hover, .reels-filter.is--active { color: #ffeec8; padding-left: 8px; background: rgba(255, 251, 242, .045); }
.reels-filter.is--active .text-dot { opacity: 1; scale: 1; }
.reels-feed {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr) minmax(0, .84fr);
  align-items: start;
  max-width: 1480px;
  margin: 0 auto;
  padding: clamp(34px, 6vh, 78px) 5vw 0;
  gap: clamp(34px, 5vw, 82px) clamp(16px, 1.8vw, 30px);
  overflow: visible;
}
.reel { display: block; min-width: 0; }
.reel.is-feature { grid-column: span 2; }
.reel-frame, .reel.is-feature .reel-frame { width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 2px; }
.reel.is-feature .reel-frame { aspect-ratio: 16 / 9.4; }
.reel-frame::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(8,8,7,.25), transparent 35%, rgba(8,8,7,.82)); }
.reel-frame:hover { transform: none; box-shadow: none; border-color: rgba(255,238,200,.65); }
.reel-poster { transition: opacity .5s ease, transform 1s cubic-bezier(.22,.61,.21,1); }
.reel-frame:hover .reel-poster { transform: scale(1.045); }
.reel-topline, .reel-bottom { z-index: 3; }
.reel-bottom, .reel-frame:hover .reel-bottom, .reel.is-playing .reel-bottom { display: flex; opacity: 1; transform: none; padding: 7%; }
.reel-bottom .reel-meta { display: flex; }
.reel-bottom .name-large { font-size: clamp(20px, 2vw, 32px); line-height: 1; }
.reel-bottom .text-regular { display: none; }
.reel-side { display: none; }
.reel-link { color: #ffeec8; white-space: nowrap; text-decoration: none; }
.reel.is-feature .reel-bottom { padding: 4%; }
.reel.is-feature .reel-bottom .name-large { font-size: clamp(26px, 3vw, 54px); }
.reel:nth-child(3n) { margin-top: clamp(12px, 3vw, 46px); }
@media (max-width: 991px) {
  .reels-head { gap: 42px; }
  .reels-head-meta { max-width: 540px; }
  .reels-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reel.is-feature { grid-column: span 2; }
}
@media (max-width: 767px) {
  .reels-main { padding-top: 110px; }
  .reels-head { padding: 0 6vw 40px; gap: 34px; }
  .reels-head .reels-title { font-size: clamp(48px, 14vw, 72px); }
  .reels-head-meta { width: 100%; }
  .reels-feed { grid-template-columns: 1fr; padding: 34px 6vw 0; gap: 48px; }
  .reel.is-feature { grid-column: auto; }
  .reel.is-feature .reel-frame { aspect-ratio: 4 / 5; }
  .reel:nth-child(3n) { margin-top: 0; }
  .reel-bottom .text-regular { display: none; }
  .reel-bottom .name-large, .reel.is-feature .reel-bottom .name-large { font-size: clamp(24px, 8vw, 38px); }
}

/* Focused Reel player: cards stay a quiet browseable index, while a click
   opens the selected clip in its natural vertical, short-form format. */
.reels-feed { grid-auto-flow: dense; }
.reel, .reel-frame { cursor: pointer; }
.reel:focus-visible { outline: 1px solid #ffeec8; outline-offset: 6px; }
.reel-frame::before { content: 'preview'; position: absolute; z-index: 4; right: 6%; top: 12%; opacity: 0; color: #ffeec8; font: 10px/1 'ABC Simon Mono', monospace; letter-spacing: .08em; transition: opacity .25s ease; }
.reel:hover .reel-frame::before { opacity: 1; }
.reel-hover-background {
  position: fixed;
  z-index: 20;
  right: clamp(22px, 7vw, 120px);
  bottom: clamp(24px, 7vh, 90px);
  width: min(37vw, 540px);
  height: min(63vh, 720px);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  background: #090908;
  clip-path: polygon(12% 0, 100% 0, 100% 87%, 88% 100%, 0 100%, 0 13%);
  transform: translateY(22px) rotate(1.5deg);
  box-shadow: 0 28px 90px rgba(0,0,0,.36);
  transition: opacity .45s ease, transform .65s cubic-bezier(.22,.61,.21,1);
}
.reel-hover-background.is-active { opacity: .88; transform: none; }
.reel-hover-video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); filter: saturate(.82) contrast(1.08); }
.reel-hover-shade { position: absolute; inset: 0; background: linear-gradient(145deg, rgba(7,7,6,.68), transparent 50%), linear-gradient(0deg, rgba(7,7,6,.74), transparent 45%); }
.reel-hover-label { position: absolute; left: 9%; right: 9%; bottom: 7%; display: flex; flex-direction: column; gap: 9px; color: #ffeec8; }
.reel-hover-label span:first-child { opacity: .65; }
.reel-hover-title { max-width: 30ch; }
.reels-main, .footer { position: relative; z-index: 25; }
.reel:hover { position: relative; z-index: 30; }
.reel:hover .reel-frame { transform: translateY(-5px); box-shadow: 0 18px 42px rgba(0,0,0,.22); }
.reel-player {
  position: fixed;
  z-index: 20000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(7, 7, 6, .94);
  backdrop-filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.reel-player.is-open { opacity: 1; pointer-events: auto; }
.reel-player-stage {
  position: relative;
  width: min(430px, calc(100vw - 48px));
  height: min(86svh, 760px);
  overflow: hidden;
  background: #11110f;
  border: 1px solid rgba(255, 238, 200, .26);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
  transform: translateY(18px) scale(.97);
  transition: transform .5s cubic-bezier(.22,.61,.21,1);
}
.reel-player.is-open .reel-player-stage { transform: none; }
.reel-player-video { width: 100%; height: 100%; display: block; object-fit: cover; }
.reel-player-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.2), transparent 35%, rgba(0,0,0,.78)); }
.reel-player-close, .reel-player-sound {
  position: absolute;
  z-index: 3;
  border: 1px solid rgba(255, 238, 200, .35);
  background: rgba(10,10,9,.38);
  color: #ffeec8;
  padding: 8px 11px;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.reel-player-close { top: 26px; right: 28px; }
.reel-player-sound { top: 18px; right: 18px; }
.reel-player-toggle { position: absolute; z-index: 2; inset: 0; border: 0; background: transparent; cursor: pointer; }
.reel-player-info { position: absolute; z-index: 3; left: 7%; right: 7%; bottom: 6%; color: #ffeec8; }
.reel-player-info .name-large { margin: 7px 0 10px; color: #ffeec8; font-size: clamp(28px, 4vw, 48px); line-height: .95; }
.reel-player-caption { max-width: 34ch; margin: 0; line-height: 1.4; }
body.has-reel-player { overflow: hidden; }
@media (max-width: 767px) {
  .reel-player { padding: 0; }
  .reel-player-stage { width: 100vw; height: 100svh; border: 0; }
  .reel-player-close { top: 16px; right: 16px; }
  .reel-player-info { bottom: 8%; }
}
@media (hover: none), (max-width: 767px) {
  .reel-hover-background { display: none; }
}