/* ============================================================================
   AHMED YILDIZ , "BROADCAST"  (Lane 3)
   Kinetic monochrome broadcast system , black / white / red #C80F14
   Swiss grid · oversized kinetic type · live-broadcast HUD · "shh" motif
   ============================================================================ */

/* ----------------------------------------------------------------- TOKENS */
:root{
  --ink:        #0B0B0B;          /* near-true black , his native ground   */
  --ink-2:      #121212;
  --white:      #F2F1EC;          /* broadcast white (a hair warm)          */
  --white-70:   rgba(242,241,236,.70);
  --white-45:   rgba(242,241,236,.45);
  --white-22:   rgba(242,241,236,.22);
  --white-12:   rgba(242,241,236,.12);
  --hair:       rgba(242,241,236,.10);   /* grid / frame hairlines          */
  --hair-soft:  rgba(242,241,236,.055);

  --paper:      #ECEAE1;          /* inverted panels (ticker, about)        */
  --paper-ink:  #0B0B0B;
  --paper-45:   rgba(11,11,11,.50);
  --paper-hair: rgba(11,11,11,.14);

  --red:        #C80F14;          /* his single personal accent             */
  --red-hi:     #E8181E;

  --gut:        clamp(16px, 4.2vw, 64px);   /* page gutter                  */
  --maxw:       1680px;

  --ease:       cubic-bezier(.16,.84,.30,1);
  --ease-snap:  cubic-bezier(.2,.9,.25,1);

  --f-disp: "Anton", "Archivo", system-ui, sans-serif;
  --f-ui:   "Archivo", system-ui, sans-serif;
  --f-mono: "Spline Sans Mono", ui-monospace, monospace;
}

/* ----------------------------------------------------------------- RESET */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  background:var(--ink);
  color:var(--white);
  font-family:var(--f-ui);
  font-weight:400;
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.5;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
::selection{ background:var(--red); color:var(--white); }

:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

/* ----------------------------------------------------- ATMOSPHERE LAYERS */
/* film grain , authentic sensor texture, never decorative */
body::before{
  content:""; position:fixed; inset:-50%; z-index:9000; pointer-events:none;
  opacity:.045; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* subtle corner vignette , echoes his studio darkening */
body::after{
  content:""; position:fixed; inset:0; z-index:8999; pointer-events:none;
  background:radial-gradient(130% 100% at 50% 42%, transparent 58%, rgba(0,0,0,.42) 100%);
}

/* Swiss 12-col grid overlay , broadcast safe-area scaffolding */
.gridlines{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut);
}
.gridlines::before{
  content:""; position:absolute; inset:0 var(--gut);
  background-image:repeating-linear-gradient(to right,
     var(--hair-soft) 0, var(--hair-soft) 1px, transparent 1px,
     transparent calc(100% / 12));
}
@media (max-width:720px){ .gridlines::before{ background-image:repeating-linear-gradient(to right,
     var(--hair-soft) 0, var(--hair-soft) 1px, transparent 1px, transparent calc(100% / 4)); } }

/* shell wrapper keeps content above overlays */
.shell{ position:relative; z-index:2; }
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }

/* utility */
.mono{ font-family:var(--f-mono); }
.tnum{ font-variant-numeric:tabular-nums; }
.label{
  font-family:var(--f-mono); font-size:.66rem; font-weight:500;
  letter-spacing:.30em; text-transform:uppercase; color:var(--white-45);
}
.slash{ color:var(--red); padding:0 .35em; font-weight:700; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ====================================================== CHANNEL BAR (HEADER) */
.bar{
  position:sticky; top:0; z-index:200;
  background:rgba(11,11,11,.78);
  backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--hair);
}
.bar__in{
  display:flex; align-items:center; gap:clamp(12px,2vw,28px);
  height:60px; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut);
}
.bug{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.bug__mark{
  width:34px; height:30px; display:grid; place-items:center;
  background:var(--red); color:var(--white);
  font-family:var(--f-disp); font-size:15px; line-height:1; letter-spacing:.01em;
  clip-path:polygon(0 0,100% 0,100% 78%,82% 100%,0 100%);
}
.bug__txt{ font-family:var(--f-disp); font-size:19px; letter-spacing:.03em; line-height:1; }
.bug__txt small{ display:block; font-family:var(--f-mono); font-size:.52rem; font-weight:500;
  letter-spacing:.34em; color:var(--white-45); margin-top:2px; }

.nav{ display:flex; align-items:center; gap:clamp(8px,1.25vw,18px); margin-left:auto; }
.nav a{
  font-family:var(--f-mono); font-size:clamp(.6rem,.82vw,.72rem); font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--white-70); position:relative; padding:6px 0; white-space:nowrap;
  transition:color .25s var(--ease);
}
.nav a .n{ color:var(--red); margin-right:.5em; font-size:.86em; }
.nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--red); transition:right .3s var(--ease); }
.nav a:hover{ color:var(--white); }
.nav a:hover::after,.nav a[aria-current="page"]::after{ right:0; }
.nav a[aria-current="page"]{ color:var(--white); }

/* live timecode HUD in the bar */
.tc{
  flex:0 0 auto; display:flex; align-items:center; gap:9px;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; color:var(--white-70);
  padding-left:clamp(10px,1.6vw,20px); border-left:1px solid var(--hair);
}
.rec{ width:9px; height:9px; border-radius:50%; background:var(--red); box-shadow:0 0 10px var(--red); }
.rec.live{ animation:blink 1.4s steps(1,end) infinite; }
@keyframes blink{ 0%,55%{opacity:1} 56%,100%{opacity:.18} }
.tc__t{ font-variant-numeric:tabular-nums; }

.bar__menu{ display:none; margin-left:auto; width:42px; height:42px; align-items:center;
  justify-content:center; border:1px solid var(--hair); }
.bar__menu span,.bar__menu span::before,.bar__menu span::after{
  content:""; display:block; width:18px; height:2px; background:var(--white); position:relative; }
.bar__menu span::before{ position:absolute; top:-6px; } .bar__menu span::after{ position:absolute; top:6px; }

/* ============================================================ TICKER / MARQUEE */
.ticker{
  background:var(--paper); color:var(--paper-ink);
  border-top:1px solid var(--ink); border-bottom:2px solid var(--red);
  overflow:hidden; position:relative; z-index:120;
}
.ticker__track{
  display:flex; width:max-content; gap:0;
  animation:slide 34s linear infinite; will-change:transform;
}
.ticker:hover .ticker__track{ animation-play-state:paused; }
@keyframes slide{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.ticker__seg{ display:flex; align-items:center; gap:0; }
.ticker__i{
  display:inline-flex; align-items:center; gap:.9em; white-space:nowrap;
  padding:9px clamp(18px,2.4vw,34px);
  font-family:var(--f-disp); font-size:clamp(13px,1.5vw,17px); letter-spacing:.05em;
  text-transform:uppercase;
}
.ticker__i b{ color:var(--red); font-family:var(--f-disp); }
.ticker__dot{ width:6px; height:6px; background:var(--red); border-radius:50%; flex:0 0 auto; }

/* ===================================================================== HERO */
.hero{ position:relative; padding-top:clamp(18px,3vh,34px); }
/* two-panel hero: tall 3:4 portrait LEFT, native-aspect showreel + wordmark RIGHT.
   Each clip renders at its own --ar (pushed by the hero JS); the row height H is
   fixed so swiping between mixed aspects never jumps vertically. H is sized so even
   the widest clip (ultrawide --ar-widest) fits the row width beside the 0.75 (3:4)
   portrait, and stays within the viewport. Narrower clips fill to their own native
   width and leave a little tasteful trailing space. */
.hero__layout{
  --gap:clamp(10px,1.3vw,18px);
  --ar-widest:2.37;
  display:flex; align-items:stretch; gap:var(--gap);
  height:min(
    calc((min(100vw, var(--maxw)) - 2 * var(--gut) - var(--gap)) / (0.75 + var(--ar-widest))),
    calc(100vh - 110px)
  );
}
.hero__stage{
  position:relative; height:100%; width:auto; aspect-ratio:var(--ar, 1.7778);
  flex:0 0 auto; min-width:0;
  background:var(--ink-2); overflow:hidden;
  border:1px solid var(--hair);
}
@media (max-width:760px){
  .hero__layout{ display:block; height:auto; }
  .hero__portrait{ width:100%; height:auto; margin-bottom:10px; }
  .hero__stage{ width:100%; height:auto; aspect-ratio:var(--ar, 1.7778); }
}
/* stage aspect == clip aspect: the full native frame, no crop, no bars */
.hero__vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(1.02) contrast(1.03); }
.hero__scrim{ position:absolute; inset:0;
  background:linear-gradient(82deg, rgba(11,11,11,.86) 0%, rgba(11,11,11,.34) 40%, transparent 66%),
             linear-gradient(0deg, rgba(11,11,11,.80) 0%, transparent 46%); }

/* corner crop / safe-area marks */
.crop{ position:absolute; width:26px; height:26px; border:2px solid var(--white-70); pointer-events:none; }
.crop.tl{ top:16px; left:16px; border-right:0; border-bottom:0; }
.crop.tr{ top:16px; right:16px; border-left:0; border-bottom:0; }
.crop.bl{ bottom:16px; left:16px; border-right:0; border-top:0; }
.crop.br{ bottom:16px; right:16px; border-left:0; border-top:0; }

/* HUD readouts */
.hud{ position:absolute; inset:0; pointer-events:none; }
.hud > *{ pointer-events:auto; }
.hud__tl{ position:absolute; top:18px; left:54px; display:flex; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em; color:var(--white-70); }
.hud__tr{ position:absolute; top:18px; right:54px; font-family:var(--f-mono);
  font-size:.66rem; letter-spacing:.18em; color:var(--white-45); text-transform:uppercase; }
.hud__gtag{ color:var(--white); }

/* wordmark / greeting , asymmetric, lower-left */
.hero__id{ position:absolute; left:clamp(16px,3.4vw,56px); bottom:clamp(20px,4vw,52px);
  max-width:min(94%,1100px); }
.hero__kicker{ display:flex; align-items:center; gap:12px; margin-bottom:.5rem; }
.hero__kicker .label{ color:var(--white-70); }
.wordmark{
  font-family:var(--f-disp); font-weight:400; line-height:.84;
  font-size:clamp(32px,5.2vw,80px); letter-spacing:.005em; text-transform:uppercase;
  color:var(--white);
}
.wordmark .yil{ display:inline-block; }
.hero__sub{ display:flex; align-items:baseline; flex-wrap:wrap; gap:.2em 0;
  margin-top:clamp(7px,1vw,13px);
  font-family:var(--f-ui); font-weight:500; font-size:clamp(11px,1.15vw,15px);
  letter-spacing:.12em; text-transform:uppercase; color:var(--white-70); }
.hero__sub .pipe{ color:var(--red); padding:0 .55em; font-weight:700; }
.hero__sub em{ font-style:italic; font-weight:400; letter-spacing:.04em; text-transform:none;
  color:var(--white-45); }

/* portrait , prominent tall panel, LEFT of the showreel */
.hero__portrait{
  position:relative; margin:0; aspect-ratio:3/4; height:100%; width:auto; flex:0 0 auto;
  border:1px solid var(--white-22); background:var(--ink);
  overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.hero__portrait img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; }
.hero__portrait figcaption{ position:absolute; left:0; right:0; bottom:0;
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--white); background:linear-gradient(0deg,rgba(11,11,11,.92),transparent);
  padding:24px 12px 10px; }
@media (max-width:760px){ .hero__portrait{ aspect-ratio:4/5; } }

/* player controls , minimal broadcast UI, bottom-right corner cluster */
.hero__ctrl{ position:absolute; right:clamp(12px,2vw,22px); bottom:clamp(12px,2vw,22px);
  display:flex; flex-direction:column; align-items:flex-end; gap:10px; z-index:5; }
@media (max-width:560px){ .hero__ctrl{ flex-direction:row; align-items:center; gap:8px; } }

/* SHH / sound toggle , the signature motif */
.shh{
  display:flex; align-items:center; gap:10px;
  background:rgba(11,11,11,.6); border:1px solid var(--white-22);
  padding:9px 14px 9px 11px; transition:border-color .25s,background .25s;
  backdrop-filter:blur(4px);
}
.shh:hover{ border-color:var(--white); background:rgba(11,11,11,.8); }
.shh__ic{ width:22px; height:22px; flex:0 0 auto; position:relative; }
.shh__ic svg{ width:100%; height:100%; }
.shh__ic .finger{ stroke:var(--white); }
.shh__ic .wave{ stroke:var(--red); opacity:0; }
.shh.on .finger{ opacity:0; }
.shh.on .wave{ opacity:1; }
/* tiny equalizer that lives when audio is ON */
.eq{ display:none; align-items:flex-end; gap:2px; height:14px; }
.shh.on .eq{ display:inline-flex; }
.eq i{ width:3px; background:var(--red); height:40%; animation:bounce .9s ease-in-out infinite; }
.eq i:nth-child(2){ animation-delay:.18s } .eq i:nth-child(3){ animation-delay:.36s } .eq i:nth-child(4){ animation-delay:.5s }
@keyframes bounce{ 0%,100%{ height:30% } 50%{ height:100% } }
.shh__txt{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--white-70); white-space:nowrap; }
.shh.on .shh__txt{ color:var(--white); }

/* NEXT control + dots */
.hero__next{
  display:flex; align-items:center; gap:9px;
  background:rgba(11,11,11,.6); border:1px solid var(--white-22);
  padding:9px 12px; transition:border-color .25s,background .25s; backdrop-filter:blur(4px);
}
.hero__next:hover{ border-color:var(--white); background:rgba(11,11,11,.8); }
.hero__next .lab{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--white-70); }
.hero__next svg{ width:16px; height:16px; }
.hero__next:hover svg{ transform:translateX(3px); transition:transform .25s var(--ease); }
.dots{ position:absolute; left:50%; transform:translateX(-50%); bottom:14px; display:flex; gap:8px; z-index:5; }
@media (max-width:560px){ .dots{ bottom:auto; top:14px; left:14px; transform:none; } }
.dots b{ width:26px; height:3px; background:var(--white-22); transition:background .3s; }
.dots b.active{ background:var(--red); }

.hero__hint{ position:absolute; left:50%; bottom:-26px; transform:translateX(-50%);
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--white-45); display:none; }
@media (max-width:560px){ .hero__hint{ display:block; } }

/* ============================================================== FILTER BAR */
.filters{
  position:sticky; top:60px; z-index:140;
  background:rgba(11,11,11,.86); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-block:1px solid var(--hair); margin-top:clamp(40px,6vw,84px);
}
.filters__in{ display:flex; align-items:stretch; justify-content:space-between;
  gap:6px clamp(18px,3vw,40px); flex-wrap:wrap;
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }

/* category tabs , LEFT half of the row (links across the six channels) */
.catfilters{ display:flex; align-items:stretch; gap:clamp(8px,1.4vw,22px);
  overflow-x:auto; scrollbar-width:none; min-width:0; }
.catfilters::-webkit-scrollbar{ display:none; }
.catfilter{ position:relative; display:inline-flex; align-items:center; gap:.5em; padding:15px 0;
  font-family:var(--f-disp); font-size:clamp(13px,1.25vw,18px); letter-spacing:.04em; text-transform:uppercase;
  color:var(--white-45); white-space:nowrap; transition:color .25s var(--ease); }
.catfilter__n{ font-family:var(--f-mono); font-size:.54rem; letter-spacing:.1em; color:var(--white-22); }
.catfilter:hover{ color:var(--white-70); }
.catfilter[aria-current="page"]{ color:var(--white); }
.catfilter[aria-current="page"]::after{ content:""; position:absolute; inset-inline:0; bottom:0; height:3px; background:var(--red); }
.catfilter[aria-current="page"] .catfilter__n{ color:var(--red); }

/* game filters , RIGHT half of the row */
.fbtns{ display:flex; margin-left:auto; overflow-x:auto; scrollbar-width:none; }
.fbtns::-webkit-scrollbar{ display:none; }
.filter{
  position:relative; padding:16px clamp(12px,1.6vw,22px); white-space:nowrap;
  font-family:var(--f-disp); font-size:clamp(14px,1.5vw,19px); letter-spacing:.04em; text-transform:uppercase;
  color:var(--white-45); transition:color .25s var(--ease);
}
.filter .fi{ font-family:var(--f-mono); font-size:.56rem; letter-spacing:.1em; color:var(--white-22);
  position:absolute; top:7px; left:clamp(12px,1.6vw,22px); }
.filter:hover{ color:var(--white-70); }
.filter[aria-pressed="true"]{ color:var(--white); }
.filter[aria-pressed="true"]::after{ content:""; position:absolute; inset-inline:0; bottom:0; height:3px; background:var(--red); }
.filter[aria-pressed="true"] .fi{ color:var(--red); }

/* ====================================================== SECTION SCAFFOLD */
.section{ padding-block:clamp(56px,9vw,128px); position:relative; }
.section--tight{ padding-block:clamp(34px,5vw,64px); }
.shead{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  border-bottom:1px solid var(--hair); padding-bottom:18px; margin-bottom:clamp(28px,4vw,56px); }
.shead__l{ display:flex; align-items:baseline; gap:clamp(14px,2vw,28px); flex-wrap:wrap; }
.shead h2{ font-family:var(--f-disp); font-weight:400; text-transform:uppercase;
  font-size:clamp(28px,4.6vw,64px); line-height:.92; letter-spacing:.01em; }
.shead .idx{ font-family:var(--f-disp); color:var(--red); font-size:clamp(22px,3vw,40px); line-height:1; }
.shead p{ max-width:46ch; color:var(--white-45); font-size:.95rem; }
.shead__r{ flex:0 0 auto; text-align:right; }
.viewall{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono);
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--white-70);
  border:1px solid var(--hair); padding:10px 14px; transition:.25s var(--ease); }
.viewall:hover{ color:var(--white); border-color:var(--white); }
.viewall svg{ width:14px; height:14px; }

/* line-reveal rule on scroll */
.rule{ height:1px; background:var(--red); transform:scaleX(0); transform-origin:left;
  transition:transform .7s var(--ease); }
.in .rule{ transform:scaleX(1); }

/* ============================================ PROGRAMMING (HOMEPAGE GRID) */
.prog{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(14px,1.6vw,22px); }
.cat{ position:relative; grid-column:span 6; min-width:0; }
/* asymmetric Swiss rhythm */
.cat[data-n="1"]{ grid-column:span 7; }
.cat[data-n="2"]{ grid-column:span 5; }
.cat[data-n="3"]{ grid-column:span 5; }
.cat[data-n="4"]{ grid-column:span 7; }
.cat[data-n="5"]{ grid-column:span 6; }
.cat[data-n="6"]{ grid-column:span 6; }
@media (max-width:900px){ .cat,.cat[data-n]{ grid-column:span 12; } }

.cat__head{ display:flex; align-items:flex-start; gap:clamp(12px,1.6vw,22px); margin-bottom:16px; }
.cat__num{ font-family:var(--f-disp); line-height:.8; font-size:clamp(48px,7vw,104px);
  color:transparent; -webkit-text-stroke:1.4px var(--white-22); position:relative; flex:0 0 auto; }
.cat:hover .cat__num{ -webkit-text-stroke-color:var(--red); transition:.4s var(--ease); }
.cat__meta{ padding-top:.4em; }
.cat__title{ font-family:var(--f-disp); font-weight:400; text-transform:uppercase;
  font-size:clamp(22px,2.7vw,40px); line-height:.94; }
.cat__desc{ color:var(--white-45); font-size:.88rem; max-width:42ch; margin-top:8px; }
.cat__count{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.2em; color:var(--red);
  text-transform:uppercase; margin-top:8px; }
.cell{ position:relative; }
.cell-link{ display:block; color:inherit; }
.cell-link:hover .cell__cap .go{ color:var(--white); }
.cell-link:hover .frame{ border-color:var(--white-22); }

/* ============================================================ MEDIA FRAME */
/* default aspect is a neutral 16/9 , every rendered frame overrides it inline
   with the media's TRUE web_aspect, so clips never get letterboxed or pillared */
.frame{ position:relative; aspect-ratio:16/9; background:#000; overflow:hidden;
  border:1px solid var(--hair); }
/* "signal-acquiring" placeholder behind any media, in case it isn't loaded */
.frame::before{ content:""; position:absolute; inset:0; z-index:0;
  background:
    repeating-linear-gradient(45deg, rgba(242,241,236,.025) 0 2px, transparent 2px 9px),
    radial-gradient(60% 120% at 50% 50%, #161616, #050505);
}
.frame > *{ position:relative; z-index:1; }
.frame img,.frame video{ width:100%; height:100%; object-fit:cover; }
.frame--wide{ aspect-ratio:21/9; }
.frame--photo{ aspect-ratio:16/9; }

/* play affordance (facade + native) */
.play{ position:absolute; inset:0; z-index:3; display:flex; align-items:flex-end;
  padding:clamp(12px,1.6vw,20px); background:linear-gradient(0deg,rgba(0,0,0,.6),transparent 55%);
  transition:background .3s; cursor:pointer; }
.play:hover{ background:linear-gradient(0deg,rgba(0,0,0,.72),rgba(200,15,20,.06) 60%,transparent); }
.play__btn{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:clamp(54px,5vw,76px); height:clamp(54px,5vw,76px); border:2px solid var(--white);
  border-radius:50%; display:grid; place-items:center; background:rgba(11,11,11,.32);
  transition:.3s var(--ease); }
.play:hover .play__btn{ background:var(--red); border-color:var(--red); transform:translate(-50%,-50%) scale(1.06); }
.play__btn svg{ width:38%; height:38%; fill:var(--white); margin-left:8%; }
.play__cap{ position:relative; z-index:1; }
.play__lab{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--white-70); }
.play__ttl{ font-family:var(--f-disp); font-size:clamp(15px,1.8vw,24px); text-transform:uppercase;
  line-height:.98; letter-spacing:.02em; margin-top:4px; }
.play__dur{ position:absolute; top:clamp(12px,1.6vw,18px); right:clamp(12px,1.6vw,18px);
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.12em; color:var(--white);
  background:rgba(11,11,11,.6); padding:3px 7px; border:1px solid var(--white-22); }
.frame.is-playing .play{ display:none; }
.frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:4; }

/* preview cell caption strip below frame */
.cell__cap{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-top:12px; font-family:var(--f-mono); font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--white-45); }
.cell__cap b{ color:var(--white-70); font-weight:500; }
.cell__cap .go{ color:var(--red); }

/* ================================================= EMPTY STATE / NO SIGNAL */
.nosignal{ position:relative; aspect-ratio:16/9; overflow:hidden; border:1px solid var(--hair);
  display:grid; place-items:center; text-align:center; }
.nosignal::before{ content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg,#0d0d0d 0 6px,#070707 6px 12px);
  opacity:.9; }
/* monochrome SMPTE-style bars across the top */
.nosignal::after{ content:""; position:absolute; left:0; right:0; top:0; height:34%;
  background:linear-gradient(90deg,
    #2a2a2a 0 14.28%, #3a3a3a 0 28.56%, #4a4a4a 0 42.84%, var(--red) 0 57.12%,
    #4a4a4a 0 71.4%, #3a3a3a 0 85.68%, #2a2a2a 0 100%);
  opacity:.5; }
.nosignal__c{ position:relative; z-index:1; }
.nosignal__big{ font-family:var(--f-disp); font-size:clamp(26px,4vw,56px); text-transform:uppercase;
  line-height:.9; letter-spacing:.04em; color:var(--white); }
.nosignal__sub{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--white-45); margin-top:12px; }
.nosignal__sub b{ color:var(--red); }

/* ===================================================== DETAIL PAGE HEADER */
.phead{ padding-top:clamp(34px,6vw,72px); padding-bottom:clamp(20px,3vw,36px); }
.phead__idx{ font-family:var(--f-disp); color:var(--red); font-size:clamp(40px,9vw,150px); line-height:.8;
  -webkit-text-stroke:0; }
.phead__row{ display:flex; align-items:flex-end; gap:clamp(14px,3vw,40px); flex-wrap:wrap; }
.phead h1{ font-family:var(--f-disp); font-weight:400; text-transform:uppercase;
  font-size:clamp(40px,9vw,150px); line-height:.8; letter-spacing:.005em; }
.phead__meta{ font-family:var(--f-mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--white-45); margin-top:clamp(16px,2vw,26px); display:flex; gap:18px; flex-wrap:wrap; }
.phead__meta b{ color:var(--white-70); font-weight:500; }
.phead p{ max-width:60ch; color:var(--white-70); margin-top:18px; font-size:1.02rem; }

/* ================================================================== GRIDS */
.grid{ display:grid; gap:clamp(16px,2vw,28px); grid-template-columns:repeat(12,1fr); }
.grid > .item{ grid-column:span 4; min-width:0; }
.grid > .item.span6{ grid-column:span 6; }
.grid > .item.span12{ grid-column:span 12; }
@media (max-width:1024px){ .grid > .item{ grid-column:span 6; } .grid > .item.span6{ grid-column:span 6; } }
@media (max-width:680px){ .grid > .item,.grid > .item.span6,.grid > .item.span12{ grid-column:span 12; } }

/* gallery , uniform aligned grid. Every cell honours the photo's TRUE aspect
   (16:9 standard, the ultrawide PUBG stills span the full row), so rows always
   line up and nothing reads as skewed. */
.gal{ display:grid; gap:clamp(12px,1.4vw,20px); grid-template-columns:repeat(3,1fr); align-items:start; }
@media (max-width:900px){ .gal{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .gal{ grid-template-columns:1fr; } }
.shot{ position:relative; overflow:hidden; border:1px solid var(--hair); background:#000; }
.shot--wide{ grid-column:1 / -1; }
.shot .frame{ border:0; }
.shot img{ width:100%; height:100%; object-fit:cover; transition:opacity .4s var(--ease),transform 1.1s var(--ease); opacity:.92; }
.shot:hover img,.shot:focus-visible img{ opacity:1; transform:scale(1.015); }
/* corner "expand" cue , signals the still opens in cinema mode */
.shot .shot__exp{ position:absolute; top:12px; right:12px; z-index:3; width:34px; height:34px; display:grid; place-items:center;
  color:var(--white); background:rgba(11,11,11,.5); border:1px solid var(--white-22);
  opacity:0; transform:scale(.9); transition:.25s var(--ease); pointer-events:none; }
.shot .shot__exp svg{ width:16px; height:16px; }
.shot:hover .shot__exp,.shot:focus-visible .shot__exp{ opacity:1; transform:none; }
.shot__cap{ position:absolute; left:0; bottom:0; right:0; padding:30px 14px 12px; z-index:3;
  background:linear-gradient(0deg,rgba(11,11,11,.92),transparent);
  transform:translateY(8px); opacity:0; transition:.35s var(--ease); }
.shot:hover .shot__cap,.shot:focus-within .shot__cap{ transform:none; opacity:1; }
.shot__h{ font-family:var(--f-disp); font-size:clamp(15px,1.6vw,22px); text-transform:uppercase; line-height:1; }
.shot__n{ font-family:var(--f-ui); font-style:italic; font-weight:400; font-size:.8rem; color:var(--white-45); margin-top:3px; }
.shot__t{ font-family:var(--f-mono); font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:var(--red); margin-top:6px; }

/* FLIP / filter visibility */
.flip-out{ display:none !important; }
[data-flip]{ will-change:auto; }

/* page-load + scroll reveal */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease),transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.stagger > *{ opacity:0; transform:translateY(16px); }
.stagger.in > *{ opacity:1; transform:none; transition:opacity .6s var(--ease),transform .6s var(--ease); }
.stagger.in > *:nth-child(2){ transition-delay:.06s } .stagger.in > *:nth-child(3){ transition-delay:.12s }
.stagger.in > *:nth-child(4){ transition-delay:.18s } .stagger.in > *:nth-child(5){ transition-delay:.24s }

/* hero entrance , unconditional + end-state visible (never JS-gated, never hides content) */
.hero__id{ animation:bootUp .85s cubic-bezier(.16,.84,.30,1) .08s both; }
.crop{ animation:fade .6s ease .05s both; }
.hud__tl,.hud__tr,.hero__ctrl{ animation:fade .7s ease .42s both; }
.dots{ animation:fade .7s ease .55s both; }
@keyframes bootUp{ from{ opacity:0; transform:translateY(28px) } to{ opacity:1; transform:none } }
@keyframes fade{ from{opacity:0} to{opacity:1} }

/* =================================================== ABOUT (INVERTED PANEL) */
.about{ background:var(--paper); color:var(--paper-ink); position:relative; z-index:3; }
.about .wrap{ padding-block:clamp(56px,9vw,120px); }
.about__grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(20px,3vw,48px); align-items:start; }
.about__l{ grid-column:span 7; } .about__r{ grid-column:span 5; }
@media (max-width:860px){ .about__l,.about__r{ grid-column:span 12; } }
.about .label{ color:var(--paper-45); }
.about h2{ font-family:var(--f-disp); text-transform:uppercase; font-weight:400;
  font-size:clamp(30px,5.4vw,76px); line-height:.9; margin:14px 0 22px; }
.about h2 .red{ color:var(--red); }
.about p{ font-size:clamp(15px,1.3vw,19px); line-height:1.62; color:#1c1c1c; max-width:54ch; margin-bottom:16px; }
.about p + p{ margin-top:0; }
.about__stats{ display:flex; gap:clamp(20px,3vw,44px); margin-top:30px; flex-wrap:wrap; }
.stat .k{ font-family:var(--f-disp); font-size:clamp(30px,4vw,56px); line-height:1; color:var(--ink); }
.stat .k em{ color:var(--red); font-style:normal; }
.stat .v{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--paper-45); margin-top:6px; }
.about__port{ width:100%; aspect-ratio:4/5; overflow:hidden; border:1px solid var(--paper-hair); background:#000; }
.about__port img{ width:100%; height:100%; object-fit:cover; }
.about__cap{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--paper-45); margin-top:10px; display:flex; justify-content:space-between; }

/* homepage About , large portrait bleeds in from the right and feathers into
   the paper (matches the 1_about_me reference): no border, no box, the photo
   is part of the page. Text stays clear on the left half. */
.about--bleed{ position:relative; overflow:hidden; min-height:clamp(360px,36vw,500px);
  display:flex; align-items:center; }
.about--bleed .wrap{ position:relative; z-index:2; width:100%; padding-block:clamp(40px,5vw,72px); }
.about--bleed .about__grid{ display:block; }
.about--bleed .about__l{ grid-column:auto; max-width:min(56%,640px); }
.about__photo{ position:absolute; inset:0 0 0 auto; width:62%; z-index:1; margin:0; }
/* object-position biased to Ahmed (60%) so the cover-crop never clips his head;
   the trophy reappears at the seam on wider screens where the panel is roomier */
.about__photo img{ width:100%; height:100%; object-fit:cover; object-position:60% 32%;
  -webkit-mask-image:linear-gradient(to right, transparent 1%, #000 47%);
          mask-image:linear-gradient(to right, transparent 1%, #000 47%); }
/* below ~1200 the right panel turns portrait; stack it as a full-width banner
   instead, where the whole frame (trophy + Ahmed) shows with no clipping */
@media (max-width:1200px){
  .about--bleed{ display:block; min-height:0; }
  .about--bleed .wrap{ padding-block:clamp(48px,8vw,88px); }
  .about--bleed .about__l{ max-width:none; }
  .about__photo{ position:relative; inset:auto; width:100%; height:54vw; max-height:400px; }
  .about__photo img{ object-position:50% 26%;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 30%);
            mask-image:linear-gradient(to bottom, transparent 0%, #000 30%); }
}

/* ===================================================== WORKED WITH / CLIENTS */
/* sits on the dark page ground; black-on-transparent org art inverted to white */
.clients{ border-top:1px solid var(--hair); }
.clients .wrap{ display:flex; align-items:center; gap:clamp(18px,4vw,56px); flex-wrap:wrap;
  padding-block:clamp(24px,4vw,44px); }
.clients__lab{ font-family:var(--f-mono); font-size:.6rem; font-weight:500; letter-spacing:.3em;
  text-transform:uppercase; color:var(--white-45); white-space:nowrap; }
.clients__logos{ display:flex; align-items:center; gap:clamp(28px,5vw,64px); flex-wrap:wrap; }
.clients__logos img{ height:clamp(30px,3.4vw,42px); width:auto; opacity:.72;
  filter:invert(1); transition:opacity .3s var(--ease); }
.clients__logos img:hover{ opacity:1; }

/* contact CTA */
.contact{ border-top:2px solid var(--red); }
.contact .wrap{ padding-block:clamp(48px,8vw,104px); }
.contact__row{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.contact h2{ font-family:var(--f-disp); text-transform:uppercase; font-weight:400;
  font-size:clamp(36px,8vw,128px); line-height:.84; }
.contact h2 a{ position:relative; }
.contact h2 a::after{ content:""; position:absolute; left:0; right:100%; bottom:.06em; height:5px; background:var(--red); transition:right .4s var(--ease); }
.contact h2 a:hover::after{ right:0; }
.contact__side{ font-family:var(--f-mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--white-45); }
.contact__side a{ color:var(--white); display:block; margin-top:6px; }
.contact__side a:hover{ color:var(--red); }

/* ================================================================= FOOTER */
.foot{ border-top:1px solid var(--hair); }
.foot .wrap{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding-block:26px; font-family:var(--f-mono); font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--white-45); }
.foot a:hover{ color:var(--red); }
.foot__bars{ display:flex; gap:3px; align-items:center; }
.foot__bars i{ width:10px; height:14px; display:block; }
.foot__bars i:nth-child(1){ background:var(--white-22) } .foot__bars i:nth-child(2){ background:var(--white-45) }
.foot__bars i:nth-child(3){ background:var(--red) }

/* ====================================================== CUSTOM CURSOR (media) */
@media (hover:hover) and (pointer:fine){
  .reticle-zone{ cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='20' cy='20' r='13' fill='none' stroke='%23F2F1EC' stroke-width='1.4'/%3E%3Ccircle cx='20' cy='20' r='2' fill='%23C80F14'/%3E%3Cpath d='M20 2v7M20 31v7M2 20h7M31 20h7' stroke='%23F2F1EC' stroke-width='1.4'/%3E%3C/svg%3E") 20 20, crosshair; }
}

/* ============================================================ RESPONSIVE */
@media (max-width:1080px){
  .nav{ display:none; }
  .bar__menu{ display:flex; }
  .bar.open .nav{ display:flex; position:absolute; top:60px; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0; background:var(--ink-2);
    border-bottom:1px solid var(--hair); padding:8px var(--gut) 18px; }
  .bar.open .nav a{ width:100%; padding:13px 0; border-bottom:1px solid var(--hair-soft); }
  .tc{ display:none; }
}
@media (max-width:720px){
  .filters{ top:60px; }
  .filters__lab{ display:none; }
  .shead{ flex-direction:column; align-items:flex-start; }
  .shead__r{ text-align:left; }
}

/* ====================================================== CINEMA LIGHTBOX */
/* one reused overlay: darkened backdrop + centred player window, prev/next
   on the screen edges, title above and meta below. YouTube, native video and
   stills all open here (Behance-style). */
.lb{ position:fixed; inset:0; z-index:9500; display:grid; place-items:center; }
.lb[hidden]{ display:none; }
.lb__backdrop{ position:absolute; inset:0; background:rgba(5,5,6,.94);
  backdrop-filter:blur(10px) saturate(118%); -webkit-backdrop-filter:blur(10px) saturate(118%);
  animation:lbFade .3s ease both; }
@keyframes lbFade{ from{ opacity:0 } to{ opacity:1 } }
.lb__win{ position:relative; z-index:2; margin:0; display:flex; flex-direction:column; gap:13px;
  max-width:92vw; animation:lbPop .36s var(--ease) both; }
@keyframes lbPop{ from{ opacity:0; transform:translateY(12px) scale(.985) } to{ opacity:1; transform:none } }
.lb__head{ display:flex; align-items:baseline; gap:16px; padding:0 2px; min-height:1.2em; }
.lb__count{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.2em; color:var(--red); flex:0 0 auto; }
.lb__ttl{ font-family:var(--f-disp); text-transform:uppercase; font-size:clamp(15px,2vw,26px);
  line-height:1; letter-spacing:.02em; color:var(--white); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb__stage{ --ar:1.7778; position:relative; align-self:center; background:#000; border:1px solid var(--white-12);
  width:min(92vw, 1500px, calc((88vh - 116px) * var(--ar))); aspect-ratio:var(--ar); max-height:calc(88vh - 116px); }
.lb__stage > video,.lb__stage > iframe,.lb__stage > img{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.lb__stage > video,.lb__stage > img{ object-fit:contain; background:#000; }
.lb__meta{ font-family:var(--f-mono); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--white-45); padding:0 2px; min-height:1em; }
.lb__nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:clamp(44px,4vw,58px); height:clamp(44px,4vw,58px); display:grid; place-items:center;
  color:var(--white); background:rgba(11,11,11,.5); border:1px solid var(--white-22);
  backdrop-filter:blur(4px); transition:background .2s,border-color .2s; }
.lb__nav:hover{ background:var(--red); border-color:var(--red); }
.lb__nav svg{ width:42%; height:42%; }
.lb__prev{ left:clamp(10px,2.5vw,40px); }
.lb__next{ right:clamp(10px,2.5vw,40px); }
.lb__x{ position:absolute; top:clamp(12px,2vw,26px); right:clamp(12px,2.4vw,40px); z-index:3;
  display:flex; align-items:center; gap:9px; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--white-70); background:rgba(11,11,11,.5);
  border:1px solid var(--white-22); padding:9px 13px; transition:color .2s,border-color .2s; }
.lb__x:hover{ color:var(--white); border-color:var(--white); }
.lb__x svg{ width:14px; height:14px; }
body.lb-open{ overflow:hidden; }
@media (max-width:640px){
  .lb__win{ max-width:96vw; }
  .lb__stage{ width:96vw; max-height:62vh; }
  .lb__nav{ top:auto; bottom:16px; transform:none; }
  .lb__prev{ left:16px; } .lb__next{ right:16px; }
  .lb__x span{ display:none; } .lb__x{ padding:9px; }
}

/* ================================================ REDUCED MOTION (STRICT) */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; }
  .ticker__track{ animation:none; transform:none; }
  .rec.live{ animation:none; }
  .eq i{ animation:none; height:60%; }
  .reveal,.stagger > *{ opacity:1 !important; transform:none !important; }
  .hero__vid{ /* still allowed to play; user may stop via OS */ }
}