/* ══════════════════════════════════════════════════════════
   MOVIE-PROJECTS — style.css
   ══════════════════════════════════════════════════════════ */

:root{
  --bg:        #000000;
  --panel:     #070707;
  --panel-2:   #0d0d0d;
  --line:      rgba(255,255,255,.085);
  --line-2:    rgba(255,255,255,.18);
  --fg:        #ededed;
  --dim:       #7e7e7e;
  --faint:     #454545;
  --ghost:     #262626;

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --ease:      cubic-bezier(.22,1,.36,1);
  --ease-io:   cubic-bezier(.76,0,.24,1);
  --pad:       clamp(14px, 2.2vw, 46px);
  --nav-h:     clamp(52px, 3.2vw, 86px);
  --micro:     clamp(10px, .52vw, 15px);
  --micro-s:   clamp(9px, .46vw, 14px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ background:var(--bg); scroll-behavior:smooth; }

body{
  margin:0; padding:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

img,svg,iframe{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
h1,h2,h3,p{ margin:0; }

::selection{ background:#fff; color:#000; }

:focus-visible{ outline:1px solid #fff; outline-offset:3px; }

/* micro-label */
.mono, .tag, .nav__links a, .nav__meta, .folio__cnt,
.hero__side, .lead, .cta span, .foot span, .ticker span, .ticker b{
  font-family:var(--mono);
  font-weight:300;
  font-size:var(--micro);
  letter-spacing:.22em;
  text-transform:uppercase;
}

.w900{ font-weight:900; }
.w200{ font-weight:200; }

/* ── grain / vignette ───────────────────────────────────── */
.grain{
  position:fixed; inset:-120%;
  z-index:900; pointer-events:none;
  opacity:.05; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 16%{transform:translate(-3%,-4%)}
  33%{transform:translate(-7%,2%)} 50%{transform:translate(4%,-3%)}
  66%{transform:translate(-2%,5%)} 83%{transform:translate(6%,1%)}
  100%{transform:translate(0,0)}
}
.vignette{
  position:fixed; inset:0; z-index:895; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(0,0,0,.55) 100%);
}

/* ── cursor: FPS crosshair ──────────────────────────────── */
.cursor{
  position:fixed; inset:0; z-index:1100; pointer-events:none;
  opacity:0; transition:opacity .55s var(--ease);
  contain:layout style paint;
}
body.cur-move .cursor{ opacity:1; transition-duration:.12s; }
body.has-cursor{ cursor:none; }
body.has-cursor a,body.has-cursor button,body.has-cursor .tile{ cursor:none; }

.cursor__h,.cursor__v{
  position:absolute; left:0; top:0;
  background:rgba(255,255,255,.15);
  will-change:transform;
  transition:background .35s var(--ease);
}
.cursor__h{ width:100%; height:1px; transform:translate3d(0,var(--cy,50vh),0); }
.cursor__v{ height:100%; width:1px;  transform:translate3d(var(--cx,50vw),0,0); }
body.cur-hot .cursor__h,body.cur-hot .cursor__v{ background:rgba(255,255,255,.34); }

.cursor__r{
  position:absolute; left:0; top:0; width:0; height:0;
  transform:translate3d(var(--cx,50vw),var(--cy,50vh),0);
  will-change:transform;
}
.cursor__r s{
  position:absolute; left:-13px; top:-13px;
  width:26px; height:26px; border-radius:50%;
  border:1px solid rgba(255,255,255,.55);
  transition:transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.cursor__r::after{
  content:""; position:absolute; left:-1px; top:-1px;
  width:2px; height:2px; background:#fff; border-radius:50%;
  transition:opacity .25s var(--ease);
}
.cursor__r b{
  position:absolute; left:0; top:0;
  transform:translate(-50%,-50%) scale(.7);
  font-family:var(--mono); font-size:9px; font-weight:400;
  letter-spacing:.2em; color:#fff; opacity:0; white-space:nowrap;
  font-size:var(--micro-s);
  transition:opacity .25s var(--ease), transform .32s var(--ease);
}
body.cur-hot .cursor__r s{ transform:scale(2.3); border-color:rgba(255,255,255,.45); }
body.cur-hot .cursor__r::after{ opacity:0; }
body.cur-hot .cursor__r b{ opacity:1; transform:translate(-50%,-50%) scale(1); }
body.cur-link .cursor__r s{ transform:scale(.4); background:#fff; border-color:#fff; }

/* ── BOOT ───────────────────────────────────────────────── */
.boot{
  position:fixed; inset:0; z-index:1000;
  background:var(--bg);
  display:grid; place-items:center;
  transition:clip-path 1.1s var(--ease-io);
  clip-path:inset(0 0 0 0);
}
.boot.done{ clip-path:inset(0 0 100% 0); pointer-events:none; }
.boot__inner{ width:min(400px, 62vw); text-align:center; }
.boot__mark{
  font-family:var(--mono); font-size:var(--micro); font-weight:300;
  letter-spacing:.42em; color:var(--dim); margin-bottom:18px;
}
.boot__mark span{ color:var(--faint); margin:0 .2em; }
.boot__bar{ height:1px; background:var(--ghost); overflow:hidden; }
.boot__bar i{ display:block; height:100%; width:0; background:#fff; }
.boot__num{
  margin-top:14px; font-family:var(--mono); font-size:var(--micro);
  font-weight:200; letter-spacing:.3em; color:var(--faint);
}

/* ── NAV ────────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:800;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:0 var(--pad);
  border-bottom:1px solid transparent;
  transition:background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s;
}
.nav.stuck{
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(14px) saturate(.6);
  -webkit-backdrop-filter:blur(14px) saturate(.6);
  border-bottom-color:var(--line);
}
.nav__logo{
  display:flex; align-items:baseline; gap:.12em;
  font-size:clamp(13px,1.35vw,26px);
  letter-spacing:.02em; line-height:1;
  white-space:nowrap;
}
.nav__logo .w900{ font-stretch:78%; }
.nav__logo .w200{ font-stretch:96%; }
.nav__logo em{ font-style:normal; color:var(--faint); margin:0 .18em; }
.nav__links{ display:flex; gap:clamp(16px,2.4vw,38px); }
.nav__links a{
  color:var(--dim); position:relative; padding-bottom:3px;
  transition:color .35s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:#fff; transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .5s var(--ease);
}
.nav__links a:hover{ color:#fff; }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:0 50%; }
.arw{ font-style:normal; margin-left:.4em; font-size:.85em; }
.nav__meta{ display:flex; align-items:center; gap:9px; color:var(--faint); }
.dotlive{
  width:4px; height:4px; border-radius:50%; background:#fff;
  animation:blip 2.4s var(--ease) infinite;
}
@keyframes blip{ 0%,60%,100%{opacity:.18} 30%{opacity:1} }

/* ── HERO ───────────────────────────────────────────────── */
.hero{
  position:relative; width:100%;
  height:100svh; min-height:560px;
  overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  border-bottom:1px solid var(--line);
}
.hero__media{ position:absolute; inset:0; overflow:hidden; }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.62) 0%, rgba(0,0,0,.22) 38%, rgba(0,0,0,.88) 100%);
}
.hero__still,.hero__frame{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) scale(1.06);
  width:100%; height:100%;
}
.hero__still{
  object-fit:cover;
  filter:grayscale(1) contrast(1.18) brightness(.66);
  opacity:0; transition:opacity 1.6s var(--ease);
}
.hero__still.on{ opacity:1; }
.hero__frame{
  width:100vw; height:56.25vw; min-height:100svh; min-width:177.78svh;
  opacity:0; transition:opacity 2s var(--ease);
  filter:grayscale(1) contrast(1.22) brightness(.5);
  pointer-events:none;
}
.hero__frame.on{ opacity:1; }
.hero__frame iframe{ width:100%; height:100%; border:0; }

.halftone{
  position:absolute; inset:0; pointer-events:none; z-index:2;
  background-image:radial-gradient(rgba(255,255,255,.5) .9px, transparent .9px);
  background-size:9px 9px;
  opacity:.13;
  -webkit-mask-image:radial-gradient(90% 70% at 8% 6%, #000 0%, transparent 62%);
  mask-image:radial-gradient(90% 70% at 8% 6%, #000 0%, transparent 62%);
}
.scanlines{
  position:absolute; inset:0; pointer-events:none; z-index:2; opacity:.4;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.028) 0 1px, transparent 1px 3px);
}

/* rails + crosshairs */
.hero__rails{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.rail{ position:absolute; top:0; bottom:0; width:1px; background:var(--line); }
.rail--l{ left:calc(var(--pad) + 46px); }
.rail--r{ right:calc(var(--pad) + 46px); }
.xh{
  position:absolute; width:11px; height:11px;
  background:
    linear-gradient(var(--line-2),var(--line-2)) center/1px 100% no-repeat,
    linear-gradient(var(--line-2),var(--line-2)) center/100% 1px no-repeat;
}
.xh--tl{ left:calc(var(--pad) + 41px); top:calc(var(--nav-h) + 26px); }
.xh--tr{ right:calc(var(--pad) + 41px); top:calc(var(--nav-h) + 26px); }
.xh--bl{ left:calc(var(--pad) + 41px); bottom:88px; }
.xh--br{ right:calc(var(--pad) + 41px); bottom:88px; }

.hero__side{
  position:absolute; z-index:4; top:50%;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  color:var(--faint); font-size:var(--micro-s);
}
.hero__side span{ writing-mode:vertical-rl; }
.hero__side .ln{ width:1px; height:44px; background:var(--line-2); writing-mode:horizontal-tb; }
.hero__side--l{ left:var(--pad); transform:translateY(-50%) rotate(180deg); }
.hero__side--r{ right:var(--pad); transform:translateY(-50%); }

.hero__type{
  position:relative; z-index:5;
  padding:0 var(--pad) 0;
  margin-bottom:auto; margin-top:auto;
  width:100%;
}
.ttl{
  font-weight:400; line-height:.8;
  margin:0 0 clamp(18px,3vw,40px);
  padding-left:clamp(0px,3.5vw,60px);
}
.ttl__l{
  display:block;
  font-size:clamp(56px, 15.5vw, 260px);
  line-height:.82;
  letter-spacing:-.035em;
  white-space:nowrap;
}
.ttl__l--a{ font-weight:900; font-stretch:70%; }
.ttl__l--b{ font-weight:100; font-stretch:88%; letter-spacing:-.02em; color:#cfcfcf; }

.ttl .ch{
  display:inline-block; will-change:transform;
  transform:translateY(105%) rotate(4deg);
  opacity:0;
}
.ttl.in .ch{
  transform:none; opacity:1;
  transition:transform 1.05s var(--ease), opacity .8s var(--ease);
  transition-delay:calc(var(--i) * 38ms + var(--d,0ms));
}

.hero__sub{
  display:flex; align-items:center; gap:clamp(20px,4vw,60px);
  flex-wrap:wrap;
  padding-left:clamp(0px,3.5vw,60px);
  opacity:0; transform:translateY(16px);
  transition:opacity .9s var(--ease) .75s, transform .9s var(--ease) .75s;
}
.hero.in .hero__sub{ opacity:1; transform:none; }
.lead{ color:var(--dim); }

.cta{
  display:inline-flex; align-items:center; gap:14px;
  padding:12px 20px 12px 22px;
  border:1px solid var(--line-2); border-radius:100px;
  position:relative; overflow:hidden;
  transition:color .45s var(--ease), border-color .45s var(--ease);
}
.cta::before{
  content:""; position:absolute; inset:0; background:#fff;
  transform:translateY(101%); transition:transform .55s var(--ease);
}
.cta span,.cta i{ position:relative; z-index:1; }
.cta i{ font-style:normal; font-size:12px; transition:transform .5s var(--ease); }
.cta:hover{ color:#000; border-color:#fff; }
.cta:hover::before{ transform:none; }
.cta:hover i{ transform:translateX(6px); }

/* ticker */
.ticker{
  position:relative; z-index:5;
  border-top:1px solid var(--line);
  padding:13px 0; overflow:hidden;
  background:rgba(0,0,0,.35);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.ticker__track{
  display:flex; align-items:center; gap:26px; width:max-content;
  animation:slide 42s linear infinite;
}
.ticker span{ color:var(--dim); }
.ticker b{ color:var(--faint); font-weight:300; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ── FOLIO ──────────────────────────────────────────────── */
.folio{ position:relative; }
.folio__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; padding:clamp(48px,8vw,120px) var(--pad) clamp(24px,3.4vw,44px);
}
.folio__ttl{
  font-size:clamp(34px,7vw,110px); line-height:.85;
  letter-spacing:-.03em;
}
.folio__ttl .w200{ font-stretch:100%; color:var(--dim); }
.folio__ttl .w900{ font-stretch:72%; }
.folio__cnt{ color:var(--faint); padding-bottom:.7em; white-space:nowrap; }
.folio__cnt #cnt{ color:#fff; }

/* mosaic */
.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:1px;
  background:var(--line);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.tile{
  position:relative; display:block; width:100%;
  grid-column:span var(--span);
  aspect-ratio:var(--ar);
  background:var(--panel);
  overflow:hidden;
  cursor:none;
  isolation:isolate;
}
@media (hover:none){ .tile{ cursor:pointer; } }

.tile__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  filter:grayscale(1) contrast(1.16) brightness(.62);
  transform:scale(1.02);
  opacity:0;
  transition:
    filter .85s var(--ease),
    transform 1.1s var(--ease),
    opacity .9s var(--ease);
}
.tile.loaded .tile__img{ opacity:1; }
.tile::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.12) 45%, rgba(0,0,0,.35) 100%);
  transition:opacity .7s var(--ease);
}
.tile:hover .tile__img,
.tile:focus-visible .tile__img{
  filter:grayscale(0) contrast(1.06) saturate(1.12) brightness(1);
  transform:scale(1.075);
}
.tile:hover::after{ opacity:.82; }

.tile__scan{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0 1px, transparent 1px 4px);
  opacity:0; transition:opacity .6s var(--ease);
}
.tile:hover .tile__scan{ opacity:1; }

.tile__bd{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0);
  transition:box-shadow .6s var(--ease);
}
.tile:hover .tile__bd{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.28); }

.tile__meta{
  position:absolute; inset:auto 0 0 0; z-index:5;
  padding:clamp(11px,.85vw,26px);
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:12px;
}
.tile__l{ min-width:0; display:block; }
.tile__idx{
  display:block; font-family:var(--mono); font-size:var(--micro-s); font-weight:300;
  letter-spacing:.26em; color:var(--dim); margin-bottom:6px;
  transition:color .5s var(--ease);
}
.tile__ttl{
  display:block;
  font-size:clamp(14px,1.35vw,32px);
  font-weight:800; font-stretch:76%;
  letter-spacing:-.012em; line-height:1;
  text-transform:uppercase;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tile__tag{
  display:block; margin-top:7px;
  font-family:var(--mono); font-size:var(--micro-s); font-weight:200;
  letter-spacing:.24em; color:var(--faint);
  transition:color .5s var(--ease);
}
.tile:hover .tile__idx,.tile:hover .tile__tag{ color:#fff; }
.tile__r{
  display:flex; flex-direction:column; align-items:flex-end; gap:5px;
  font-family:var(--mono); font-size:var(--micro-s); font-weight:300;
  letter-spacing:.2em; color:var(--dim); white-space:nowrap;
}
.tile__r i{ font-style:normal; color:var(--faint); }

/* reveal */
.tile{
  opacity:0; transform:translateY(34px);
  transition:opacity .95s var(--ease), transform 1.05s var(--ease);
  transition-delay:var(--rd,0ms);
}
.tile.in{ opacity:1; transform:none; }

[data-reveal]{
  opacity:0; transform:translateY(20px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
[data-reveal].in{ opacity:1; transform:none; }

/* ── ABOUT ──────────────────────────────────────────────── */
.about{
  display:grid; grid-template-columns:1.1fr 1fr 1.1fr;
  gap:1px; background:var(--line);
  border-bottom:1px solid var(--line);
}
.about__col{
  background:var(--bg);
  padding:clamp(34px,5vw,80px) var(--pad);
  min-height:min(46vh, 380px);
  display:flex; flex-direction:column; justify-content:space-between; gap:26px;
}
.about .tag{ color:var(--faint); }
.about p{
  font-size:clamp(18px,2.3vw,38px); font-weight:200; font-stretch:96%;
  line-height:1.16; letter-spacing:-.015em; color:var(--fg); max-width:20ch;
}
.mail{
  font-family:var(--mono); font-size:clamp(11px,1.15vw,15px);
  font-weight:300; letter-spacing:.12em;
  position:relative; align-self:flex-start; padding-bottom:5px;
}
.mail::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--line-2); transform-origin:0 50%;
  transition:transform .55s var(--ease), background .55s;
}
.mail:hover::after{ background:#fff; transform:scaleX(1.02); }
.about__col--b{ position:relative; overflow:hidden; background:var(--panel); }
.dots{
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.55) 1px, transparent 1px);
  background-size:11px 11px;
  opacity:.16;
  -webkit-mask-image:linear-gradient(150deg,#000 0%,transparent 72%);
  mask-image:linear-gradient(150deg,#000 0%,transparent 72%);
  animation:drift 26s linear infinite;
}
@keyframes drift{ to{ background-position:110px 66px; } }

/* ── FOOT ───────────────────────────────────────────────── */
.foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:26px var(--pad); flex-wrap:wrap;
}
.foot span{ color:var(--faint); }
.foot__l{ display:flex; align-items:center; gap:18px; }
.barcode{ width:120px; height:26px; opacity:.55; }
.barcode rect{ fill:#fff; }
.foot__r{ display:flex; gap:22px; flex-wrap:wrap; }
.foot__c .xh{ position:static; display:block; opacity:.6; }

/* ══ PLAYER ═════════════════════════════════════════════ */
.pl{
  position:fixed; inset:0; z-index:990;
  display:grid; place-items:center;
  opacity:0; pointer-events:none;
  transition:opacity .5s var(--ease);
}
.pl[hidden]{ display:none; }
.pl.on{ opacity:1; pointer-events:auto; }
.pl__bg{
  position:absolute; inset:0; background:rgba(0,0,0,.985);
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
}
.pl__shell{
  position:relative; width:100%; height:100%;
  display:flex; flex-direction:column;
  padding:calc(var(--nav-h) + 6px) var(--pad) var(--pad);
  justify-content:center;
  transform:scale(.965); opacity:0;
  transition:transform .7s var(--ease), opacity .5s var(--ease);
}
.pl.on .pl__shell{ transform:none; opacity:1; }

.pl__stage{
  position:relative;
  flex:0 1 auto;
  aspect-ratio:16 / 9;
  width:100%; height:auto; max-height:100%;
  margin:0 auto;
  background:#000;
  border:1px solid var(--line);
  overflow:hidden;
  order:2;
  clip-path:inset(6% 0 6% 0);
  transition:clip-path .85s var(--ease) .1s;
}
.pl.on .pl__stage{ clip-path:inset(0 0 0 0); }
.pl__yt{ position:absolute; inset:0; }
.pl__yt iframe{ width:100%; height:100%; border:0; pointer-events:none; }
.pl__hit{ position:absolute; inset:0; cursor:pointer; }

.pl__load{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:34px; height:34px; pointer-events:none;
  transition:opacity .4s var(--ease);
}
.pl__load i{
  display:block; width:100%; height:100%; border-radius:50%;
  border:1px solid rgba(255,255,255,.16); border-top-color:#fff;
  animation:spin .9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.pl.ready .pl__load{ opacity:0; }

.pl__big{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) scale(.8);
  width:78px; height:78px; border-radius:50%;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(0,0,0,.35);
  display:grid; place-items:center;
  opacity:0; pointer-events:none;
  transition:opacity .45s var(--ease), transform .55s var(--ease);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.pl__big svg{ width:26px; height:26px; fill:#fff; margin-left:3px; }
.pl.paused .pl__big{ opacity:1; transform:translate(-50%,-50%) scale(1); }

.pl__top{
  order:1; display:flex; align-items:flex-start; gap:20px;
  padding:0 2px 16px;
}
.pl__id{ display:flex; align-items:center; gap:12px; padding-top:.55em; }
.pl__idx,.pl__tag{
  font-family:var(--mono); font-size:var(--micro); font-weight:300; letter-spacing:.24em;
}
.pl__idx{ color:#fff; }
.pl__tag{ color:var(--faint); }
.pl__id .ln{ width:26px; height:1px; background:var(--line-2); }
.pl__ttl{
  flex:1; min-width:0;
  font-size:clamp(18px,3vw,44px); font-weight:900; font-stretch:70%;
  letter-spacing:-.02em; line-height:1; text-transform:uppercase;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pl__x{
  width:clamp(38px,2.4vw,58px); height:clamp(38px,2.4vw,58px); flex:none; position:relative;
  border:1px solid var(--line-2); border-radius:50%;
  transition:background .4s var(--ease), border-color .4s, transform .5s var(--ease);
}
.pl__x span{
  position:absolute; left:50%; top:50%; width:13px; height:1px; background:#fff;
  transition:background .4s;
}
.pl__x span:first-child{ transform:translate(-50%,-50%) rotate(45deg); }
.pl__x span:last-child{ transform:translate(-50%,-50%) rotate(-45deg); }
.pl__x:hover{ background:#fff; border-color:#fff; transform:rotate(90deg); }
.pl__x:hover span{ background:#000; }

.pl__ctl{ order:3; padding:16px 2px 0; }
.pl__track{
  position:relative; height:16px; margin-bottom:12px;
  cursor:pointer; display:flex; align-items:center;
}
.pl__track::before{
  content:""; position:absolute; left:0; right:0; height:1px;
  background:var(--ghost); transition:height .25s var(--ease), background .25s;
}
.pl__track:hover::before{ height:3px; }
.pl__buf,.pl__prog{
  position:absolute; left:0; height:1px; width:0;
  transition:height .25s var(--ease);
}
.pl__track:hover .pl__buf,.pl__track:hover .pl__prog{ height:3px; }
.pl__buf{ background:rgba(255,255,255,.2); }
.pl__prog{ background:#fff; }
.pl__prog b{
  position:absolute; right:0; top:50%;
  width:9px; height:9px; border-radius:50%; background:#fff;
  transform:translate(50%,-50%) scale(0);
  transition:transform .3s var(--ease);
}
.pl__track:hover .pl__prog b,.pl__track.drag .pl__prog b{ transform:translate(50%,-50%) scale(1); }

.pl__row{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.pl__grp{ display:flex; align-items:center; gap:clamp(10px,1.4vw,20px); }
.ico{
  width:clamp(28px,1.7vw,44px); height:clamp(28px,1.7vw,44px); display:grid; place-items:center;
  position:relative; opacity:.62; transition:opacity .3s var(--ease), transform .4s var(--ease);
}
.ico:hover{ opacity:1; transform:translateY(-1px); }
.ico svg{ width:clamp(18px,1.1vw,28px); height:clamp(18px,1.1vw,28px); fill:#fff; }
.ico .i-pause,.ico .i-mute{ display:none; }
.pl.playing #plPlay .i-play{ display:none; }
.pl.playing #plPlay .i-pause{ display:block; }
.pl.muted #plMute .i-vol{ display:none; }
.pl.muted #plMute .i-mute{ display:block; }
.sep{ width:1px; height:16px; background:var(--line-2); }
.tme{
  font-family:var(--mono); font-size:var(--micro); font-weight:300; letter-spacing:.14em;
  display:flex; gap:6px; align-items:baseline; color:var(--dim);
}
.tme b{ color:#fff; font-weight:400; }
.tme s{ text-decoration:none; }


/* ── player: embed blocked ──────────────────────────────── */
.pl__err{
  position:absolute; inset:0; z-index:6;
  display:none; place-items:center; text-align:center;
  background:#050505; padding:24px; overflow:hidden;
}
.pl__err::before{
  content:""; position:absolute; inset:0;
  background-image:var(--eb,none);
  background-size:cover; background-position:center;
  filter:grayscale(1) contrast(1.1) brightness(.3);
}
.pl__err::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(80% 70% at 50% 50%, rgba(0,0,0,.5) 0%, rgba(0,0,0,.9) 100%);
}
.pl__err > div{ position:relative; z-index:1; }
.pl.err .pl__err{ display:grid; }
.pl.err .pl__hit,.pl.err .pl__big{ display:none; }
.pl.err .pl__load{ opacity:0; }
.pl.err .pl__ctl{ opacity:.25; pointer-events:none; }
.pl__errTag{
  display:block; font-family:var(--mono); font-size:var(--micro); font-weight:300;
  letter-spacing:.3em; color:var(--faint); margin-bottom:14px;
}
.pl__errTxt{
  font-size:clamp(15px,1.7vw,22px); font-weight:200; font-stretch:96%;
  color:var(--dim); margin-bottom:26px; letter-spacing:-.01em;
}
.pl__err .cta{ color:var(--fg); }

/* ── RESPONSIVE ─────────────────────────────────────────── */
/* wide screens: same mosaic, half-size tiles (two pattern rows per physical row) */
@media (min-width:1900px){
  .grid{ grid-template-columns:repeat(24,1fr); }
  .barcode{ width:clamp(120px,9vw,220px); height:clamp(26px,1.9vw,46px); }
}

@media (max-width:1100px){
  .grid{ grid-template-columns:repeat(2,1fr); }
  .tile{ grid-column:span 1; aspect-ratio:16/9; }
  .rail{ display:none; }
  .xh--tl,.xh--tr,.xh--bl,.xh--br{ display:none; }
  .about{ grid-template-columns:1fr 1fr; }
  .about__col--b{ display:none; }
}
@media (max-width:720px){
  :root{ --nav-h:52px; }
  .nav{ gap:12px; }
  .nav__links a:nth-child(2){ display:none; }
  .nav__meta{ display:none; }
  .hero__side{ display:none; }
  .hero__type{ margin-top:auto; margin-bottom:0; }
  .hero{ min-height:520px; }
  .ttl{ margin-bottom:22px; }
  .hero__sub{ gap:16px; }
  .grid{ grid-template-columns:1fr; }
  .about{ grid-template-columns:1fr; }
  .ttl__l{ font-size:clamp(46px,17vw,120px); }
  .hero__type{ padding-bottom:8px; }
  .folio__head{ align-items:flex-start; flex-direction:column; gap:10px; }
  .foot{ justify-content:center; text-align:center; }
  .foot__c{ display:none; }
  .pl__top{ flex-wrap:wrap; gap:12px; }
  .pl__ttl{ order:3; flex:0 0 100%; width:100%; }
  .pl__x{ margin-left:auto; width:34px; height:34px; }
  .pl__ctl{ padding-top:20px; }
  .cursor{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .ttl .ch,[data-reveal],.tile{ opacity:1 !important; transform:none !important; }
  .grain{ display:none; }
}