@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap');
:root{--cream:#e7dca4;--ink:#160000;--wine:#320609;--red:#7e201c;--muted:#cbb6aa}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--cream);font-family:Manrope,Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}header{position:absolute;z-index:4;top:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:28px 5%;font-size:12px;letter-spacing:.08em}.brand{font-weight:800;font-size:20px}.brand span{font-size:10px;font-weight:500;opacity:.8}nav{display:flex;gap:30px}nav a:hover,.line-link:hover{opacity:.6}.hero{height:100svh;min-height:620px;position:relative;overflow:hidden;background:#240105}.hero-photo{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(20,0,0,.45),transparent 30%,transparent 70%,rgba(20,0,0,.25)),linear-gradient(0deg,rgba(20,0,0,.58),transparent 35%),url('portrait-desktop.webp');background-position:center,center,center 36%;background-size:cover}.hero-meta{position:absolute;top:34%;left:5%;right:5%;display:flex;justify-content:space-between;align-items:center;font-size:10px;line-height:1.8;letter-spacing:.18em}.role{font-family:Oswald,Impact,sans-serif;font-size:clamp(22px,3vw,46px);line-height:1.05;letter-spacing:.02em}.role i{font-style:normal;font-size:26px}.hero h1{position:absolute;bottom:7%;left:4%;right:4%;margin:0;text-align:center;white-space:nowrap;font:600 clamp(30px,7.7vw,150px)/.95 Oswald,Impact,sans-serif;letter-spacing:-.035em;text-shadow:0 2px 22px #2006}.hero-bottom{position:absolute;bottom:25px;left:5%;right:5%;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.15em}.section{padding:100px 6%}.section-top{display:flex;justify-content:space-between;gap:15px;border-top:1px solid #e7dca455;padding-top:18px;font-size:10px;letter-spacing:.18em}.reel{background:linear-gradient(165deg,#290306,#641716 75%,#45100f)}.section-title{display:flex;justify-content:space-between;gap:30px;align-items:end;margin:75px 0 40px}.section-title p{max-width:310px;line-height:1.8;color:#ecd8c9}h2{font:600 clamp(48px,7.8vw,122px)/.95 Oswald,Impact,sans-serif;letter-spacing:-.025em;margin:0}h2 em{font-style:normal;color:#bba267}.reel-placeholder{height:min(55vw,600px);min-height:250px;border:1px solid #e7dca455;background:radial-gradient(circle at 50% 40%,#5e1c1b,#170203 75%);display:grid;place-content:center;text-align:center;justify-items:center;letter-spacing:.13em;font-size:12px}.reel-placeholder small{opacity:.6}.circle{width:85px;height:85px;display:grid;place-items:center;border:1px solid var(--cream);border-radius:50%;font-size:23px;margin-bottom:20px}.about{background:#dfd1b1;color:#2f1111}.about .section-top{border-color:#2f111155}.about-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:8%;margin-top:100px}.about h2 em{color:#a75b49}.about p{font-size:clamp(17px,1.5vw,23px);line-height:1.7;margin:0 0 24px}.line-link{display:inline-block;border-bottom:1px solid;padding:20px 0 12px;font-size:12px;letter-spacing:.1em}.works{background:linear-gradient(#551313,#240407)}.filters{display:flex;gap:8px;margin-bottom:30px}.filters button{border:1px solid #e7dca477;border-radius:30px;background:transparent;color:var(--cream);padding:10px 25px;cursor:pointer}.filters button.active{background:var(--cream);color:var(--ink)}.board{position:relative;height:700px;border:1px solid #e7dca433;background:radial-gradient(ellipse at center,#792924,#2a0709 80%);overflow:hidden}.work-card{position:absolute;width:17%;height:35%;border:1px solid #e7dca466;background:linear-gradient(145deg,#b06047,#3a1216 65%);color:#fff2d5;box-shadow:0 15px 30px #14000077;padding:15px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;cursor:grab;touch-action:none;transform:rotate(var(--r));background-size:cover;background-position:center}.work-card:active{cursor:grabbing}.card-top,.card-bottom{font-size:10px;letter-spacing:.12em}.card-top b{float:right}.card-center{font-size:42px;text-align:center;opacity:.5}.card-bottom small{display:block;opacity:.7;margin-top:8px}.card-0{left:3%;top:8%;--r:-5deg}.card-1{left:24%;top:4%;--r:4deg}.card-2{left:45%;top:9%;--r:-3deg}.card-3{left:67%;top:3%;--r:5deg}.card-4{left:9%;top:54%;--r:4deg}.card-5{left:31%;top:53%;--r:-5deg}.card-6{left:54%;top:55%;--r:3deg}.card-7{left:77%;top:54%;--r:-4deg}.hint{font-size:10px;letter-spacing:.12em;opacity:.7}.contact{background:#180203}.contact h2{margin-top:100px}.contact p{color:var(--muted);margin:35px 0}.socials{display:flex;flex-wrap:wrap;gap:16px;margin:45px 0 100px}.socials span{display:grid;place-items:center;border:1px solid #e7dca466;border-radius:50%;width:64px;height:64px;font-size:21px;position:relative}.socials small{position:absolute;top:72px;font-size:9px;white-space:nowrap;color:var(--muted)}footer{border-top:1px solid #e7dca455;padding-top:22px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.12em}dialog{background:#26080a;color:var(--cream);border:1px solid #e7dca455;width:min(90vw,760px);padding:32px}dialog::backdrop{background:#000c}dialog .close{float:right;background:none;border:0;color:inherit;font-size:35px;cursor:pointer}dialog img,dialog video{width:100%;max-height:60vh;object-fit:contain}.modal-blank{height:260px;background:#4c1918;display:grid;place-items:center;margin-top:20px;font-size:12px;letter-spacing:.15em}dialog h3{font:40px Oswald,sans-serif}dialog p{color:var(--muted)}@media(max-width:700px){header{padding:22px 5%;align-items:flex-start}.brand span{display:none}nav{gap:12px;flex-wrap:wrap;justify-content:flex-end;max-width:75%;font-size:10px}.hero{min-height:600px}.hero-photo{background-position:center,center,center 38%}.hero-meta{top:25%;align-items:flex-start}.hero-meta>span:first-child{display:none}.role{margin-left:auto;font-size:22px}.hero h1{white-space:normal;font-size:clamp(43px,11vw,75px);bottom:10%;line-height:.98}.hero-bottom{font-size:8px}.section{padding:70px 6%}.section-top{font-size:9px}.section-title{display:block;margin:55px 0 30px}.section-title p{margin-top:20px}.about-grid{display:block;margin-top:60px}.about-grid>div{margin-top:32px}.board{height:700px}.work-card{width:28%;height:21%;padding:8px}.card-0{left:3%;top:4%}.card-1{left:36%;top:5%}.card-2{left:68%;top:3%}.card-3{left:5%;top:29%}.card-4{left:38%;top:30%}.card-5{left:69%;top:28%}.card-6{left:17%;top:56%}.card-7{left:55%;top:57%}.contact h2{margin-top:70px}.socials{gap:13px}.socials span{width:53px;height:53px}.socials small{top:60px}}
:root { --heading-spacing: .01em; }
.hero-photo{background-image:linear-gradient(90deg,rgba(20,0,0,.3),transparent 30%,transparent 70%,rgba(20,0,0,.2)),linear-gradient(0deg,rgba(20,0,0,.5),transparent 35%),url('portrait-desktop.webp');background-position:center,center,center top}
.role{white-space:nowrap; font-size:clamp(18px,2vw,32px);letter-spacing:.035em}
h2{letter-spacing:var(--heading-spacing);line-height:1.18}
.reel .section-title h2{font-size:clamp(34px,4.1vw,76px);white-space:nowrap}
.socials img{width:29px;height:29px;object-fit:contain}.socials span[title="MAX"] img{border-radius:7px}
@media(max-width:700px){.hero-photo{background-image:linear-gradient(90deg,rgba(20,0,0,.15),transparent 35%,transparent 70%,rgba(20,0,0,.1)),linear-gradient(0deg,rgba(20,0,0,.55),transparent 35%),url('portrait-mobile.webp');background-position:center,center,center top}.role{font-size:clamp(16px,4vw,22px)}.reel .section-title h2{white-space:normal;font-size:clamp(34px,8vw,56px)}h2{line-height:1.16}.socials img{width:25px;height:25px}}
.hero h1{letter-spacing:0;line-height:1.12}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16%;pointer-events:none;background:linear-gradient(transparent,#290306);z-index:1}.hero h1,.hero-bottom{z-index:2}.reel{background:linear-gradient(165deg,#290306,#641716 75%,#45100f)}
.board{height:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding:24px;overflow:visible}.work-card{position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:4/5;transform:none;cursor:pointer;touch-action:auto}.work-card:active{cursor:pointer}.work-card:hover{border-color:var(--cream)}
.reviews{background:#dfd1b1;color:#2f1111}.reviews .section-top{border-color:#2f111155}.reviews h2 em{color:#a75b49}.reviews .section-title p{color:#5d3931}.reviews-placeholder{min-height:200px;border:1px solid #2f111155;display:grid;place-content:center;text-align:center;letter-spacing:.13em;font-size:12px}.reviews-placeholder span{font-size:32px}
.socials span[title="MAX"] img{content:url('icons/max-mono.png');border-radius:0}
@media(max-width:700px){.board{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px}.work-card{width:100%;height:auto;aspect-ratio:4/5}.hero{height:84svh;min-height:520px}.hero-meta{top:64px;left:5%;right:auto}.role{margin:0;font-size:15px}.hero h1{bottom:9%}.hero-bottom{bottom:12px}}
/* Верхняя навигация и плавный переход между первым экраном и шоурилом. */
.reel{background:linear-gradient(to bottom,#290306 0%,#290306 5%,#641716 75%,#45100f 100%)}
.hero::after{height:24%;background:linear-gradient(to bottom,transparent 0%,#290306 100%)}
.header-identity{display:flex;align-items:center}
.brand span{font-size:inherit;font-weight:inherit;opacity:1}
header nav{font-size:16px;font-weight:600;letter-spacing:.02em}
.hero-meta{font-size:clamp(13px,1vw,18px);font-weight:600;letter-spacing:.12em}
header .role{position:absolute;top:34svh;right:5%;font-size:clamp(24px,2.5vw,42px)}
@media(max-width:700px){
 header{align-items:center;gap:8px;padding:18px 4%}
 .header-identity{flex:none;gap:8px}
 .brand{font-size:18px;line-height:1}
 .brand span{display:none}
 header .role{position:static;font-size:clamp(10px,2.8vw,15px);line-height:1;letter-spacing:.01em}
 header nav{flex:1;max-width:none;justify-content:flex-end;align-items:center;flex-wrap:nowrap;gap:clamp(5px,1.4vw,10px);font-size:clamp(8px,2.3vw,11px);letter-spacing:0;white-space:nowrap}
}
.showreel-video{display:block;width:100%;height:auto;max-height:80vh;aspect-ratio:16/9;object-fit:contain;background:#160000;border:1px solid #e7dca455}
.reel-picture{position:relative}.tap-area{display:none}.seek-feedback{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#160000d9;color:#fff0c2;border-radius:30px;padding:10px 18px;opacity:0;pointer-events:none;transition:opacity .15s;font-size:14px;text-align:center}.seek-feedback.visible{opacity:1}.touch-player .tap-area{display:block;position:absolute;inset:0;touch-action:manipulation}.mobile-controls:not([hidden]){display:block;background:#210507;padding:10px 14px 12px;border:1px solid #e7dca455;border-top:0}.seek-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.mobile-controls input[type=range]{display:block;width:100%;height:32px;margin:0;accent-color:#e7dca4;touch-action:none;cursor:pointer}.control-row{display:flex;align-items:center;gap:12px}.control-row button{color:#e7dca4;background:none;border:0;min-width:44px;min-height:44px;font-size:18px;cursor:pointer}.control-row .reel-mute{font-size:13px;margin-left:auto}.reel-time{font-size:12px;color:#e7dca4;white-space:nowrap}.reel-player:fullscreen{background:#160000;display:flex;flex-direction:column;justify-content:center}.reel-player:fullscreen .showreel-video{max-height:calc(100vh - 100px);width:100%;object-fit:contain}.reel-player:fullscreen .mobile-controls{border:0}
.reel-player:fullscreen{position:relative;display:block;width:100%;height:100%;background:#100002}.reel-player:fullscreen .reel-picture{height:100%;width:100%}.reel-player:fullscreen .showreel-video{width:100%;height:100%;max-height:none;aspect-ratio:auto;border:0;object-fit:contain;background:#100002}.reel-player:fullscreen .mobile-controls:not([hidden]){position:absolute;z-index:2;left:0;right:0;bottom:0;padding:4px max(14px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));background:linear-gradient(to top,rgba(38,3,8,.65),rgba(38,3,8,.28));border:0;opacity:1;transition:opacity .2s ease}.reel-player:fullscreen.controls-hidden .mobile-controls:not([hidden]){opacity:0;pointer-events:none}
.quality-label{display:flex;align-items:center;gap:6px;color:#e7dca4;font-size:12px;white-space:nowrap}.quality-label select{max-width:145px;color:#e7dca4;background:#2b0b0d;border:1px solid #e7dca477;border-radius:5px;padding:7px 4px;font:inherit}.quality-desktop{justify-content:flex-end;margin-top:10px}.quality-status{display:block;min-height:1em;color:#e7dca4;font-size:12px;margin-top:5px}.reel-player:fullscreen .quality-status{position:absolute;top:12px;left:12px;z-index:3;background:#260308c9;padding:4px 8px}.reel-player:fullscreen .quality-status:empty{display:none}@media(max-width:700px){.control-row{gap:3px}.quality-label{font-size:10px;gap:3px}.quality-label select{max-width:110px;font-size:10px}.control-row .reel-mute{font-size:11px}.reel-time{font-size:10px}}
.reel-player{position:relative}.reel-player .mobile-controls:not([hidden]){position:absolute;z-index:2;left:0;right:0;bottom:0;background:linear-gradient(to top,rgba(38,3,8,.8),rgba(38,3,8,.3));border:0}.reel-player .quality-status{position:static;min-height:0;margin:0;color:#fff0c2}.reel-player .quality-status:not(:empty){padding:5px 0}.mobile-controls input.reel-volume{width:75px;height:32px;flex:none;margin:0}.quality-label select{background:rgba(38,3,8,.75)}@media(pointer:coarse){.mobile-controls input.reel-volume{display:none}}@media(max-width:700px){.mobile-controls:not([hidden]){padding:4px 8px}.control-row button{min-width:36px;min-height:38px}.quality-label select{max-width:105px}}
.reel-player{width:100%;max-width:142.2222vh;margin-inline:auto}.reel-player .showreel-video{max-height:none}.reel-player:fullscreen{max-width:none;margin:0}
@media (hover:hover) and (pointer:fine){
 .reel-player .mobile-controls:not([hidden]),
 .reel-player:fullscreen .mobile-controls:not([hidden]),
 .reel-player:fullscreen.controls-hidden .mobile-controls:not([hidden]){opacity:0;pointer-events:auto;transition:opacity .2s ease}
 .reel-player .mobile-controls:not([hidden]):hover,
 .reel-player .mobile-controls:not([hidden]):has(:focus-visible),
 .reel-player:fullscreen .mobile-controls:not([hidden]):hover,
 .reel-player:fullscreen .mobile-controls:not([hidden]):has(:focus-visible),
 .reel-player:fullscreen.controls-hidden .mobile-controls:not([hidden]):hover,
 .reel-player:fullscreen.controls-hidden .mobile-controls:not([hidden]):has(:focus-visible){opacity:1}
}
.playback-indicator{display:none}
@media (hover:hover) and (pointer:fine){
 .playback-indicator{display:grid;position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);place-items:center;width:70px;height:70px;padding-left:3px;border-radius:50%;background:rgba(38,3,8,.56);color:#e7dca4;font-size:28px;opacity:0;pointer-events:none;transition:opacity .18s ease}
 .reel-player.is-paused .playback-indicator,.reel-player.flash-pause .playback-indicator{opacity:1}
 .reel-player.is-paused .mobile-controls:not([hidden]),.reel-player.flash-pause .mobile-controls:not([hidden]){opacity:1!important}
 .reel-player.hide-after-play:not(.flash-pause) .mobile-controls:not([hidden]){opacity:0!important}
}
/* Галерея готовых работ */
.work-card.has-cover{background-size:cover;background-position:center;box-shadow:0 12px 25px #14000055}
.work-card.has-cover .card-center{opacity:.9;text-shadow:0 2px 12px #160000}
.work-card .card-top{font-size:clamp(10px,.8vw,13px);text-shadow:0 1px 6px #160000}
.work-card .card-bottom{font-size:clamp(15px,1.2vw,20px);line-height:1.25;letter-spacing:.01em;font-weight:700;text-shadow:0 1px 8px #160000}
.works-empty{grid-column:1/-1;min-height:160px;display:grid;place-items:center;margin:0;color:#e8d4c6}
#modal-content>video,#modal-content>img{display:block;margin-top:16px;background:#160000}
#modal-content .work-loading{font-size:14px;margin:12px 0 0}
#modal-content h3{margin:24px 0 8px}
#modal-content p{line-height:1.6}
/* Шесть работ в ряду на компьютере и четыре на мобильных экранах. */
@media(min-width:900px){.board{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:899px){.board{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:10px}}
@media(max-width:700px){
 .board{gap:4px;padding:5px}
 .board .work-card{padding:4px;min-height:100px;aspect-ratio:4/7}
 .board .work-card .card-top{font-size:clamp(7px,1.8vw,9px);letter-spacing:0}
 .board .work-card .card-center{font-size:clamp(16px,5vw,25px)}
 .board .work-card .card-bottom{font-size:clamp(8px,2.1vw,10px);line-height:1.12;letter-spacing:0;overflow-wrap:anywhere}
}
.socials span a{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%}
.socials span a:focus-visible{outline:2px solid var(--cream);outline-offset:4px}
.socials span:has(a):hover{border-color:var(--cream)}
.socials .social-pending{opacity:.5}
.showreel-video,.tap-area,#modal-content video{-webkit-touch-callout:none}
.icon-arrow,.icon-arrow-up,.icon-arrow-forward{display:inline-block;width:.85em;height:.85em;vertical-align:-.05em;flex:none}
.card-top b .icon-arrow{display:block;width:1em;height:1em}
.card-play-icon{display:inline-block;width:.8em;height:.8em;vertical-align:middle}
.reel-play svg,.playback-indicator svg,.reel-fullscreen svg{display:block;width:1em;height:1em;margin:auto}
@media (pointer:coarse){
 .playback-indicator{display:grid;position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);place-items:center;width:70px;height:70px;padding-left:3px;border-radius:50%;background:rgba(38,3,8,.56);color:#e7dca4;font-size:28px;opacity:0;pointer-events:none;transition:opacity .18s ease}
 .reel-player.mobile-paused .playback-indicator{opacity:1}
}