:root{
  --ink:#232323;
  --paper:#ededed;
  --blue:#3f5fe4;
  --orange:#f28a00;
  --heading:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:"Lexend","Century Gothic",Arial,sans-serif;
}
*{box-sizing:border-box}
html,
body{
    margin:0;
    padding:0;
    width:100%;
}

body{
    background:#111;
    color:#252525;
    font-family:var(--body);
    font-weight:500;
}
a{color:var(--blue);font-weight:600;text-decoration:underline}
.cv-document{
    width:100%;
    max-width:none;
    margin:0;
    background:#111;
}
.cv-page{position:relative;width:100%;aspect-ratio:595/842;overflow:hidden;background:#eee}
.cv-page+.cv-page{margin-top:1px}
h1,h2,h3,p,ul{margin-top:0}
h1,h2,h3{font-family:var(--heading);font-weight:700;line-height:.88;letter-spacing:.01em}
h2{font-size:3.35cqw;margin-bottom:1.25cqw}
p,li{font-size:1.92cqw;line-height:1.18}
small{font-size:.86em}

.hero{position:relative;height:39.1%;background:url("../jack_vysotskiy/hero.jpg.png") center center/cover no-repeat;color:#f5f5f5;overflow:hidden}
.hero:after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.08)}
.sound-logo{
    position:absolute;
    left:3.4%;
    top:-5%;
    width:23%;
    z-index:2;
    mix-blend-mode:normal;
}
.hero-title{position:absolute;left:4.8%;bottom:5.3%;z-index:3;text-shadow:0 1px 1px rgba(0,0,0,.15)}
.surname{font-size:7.3cqw;line-height:.86;font-weight:300;letter-spacing:.055em}
.name{font-size:10.5cqw;line-height:.82;font-weight:600;letter-spacing:.01em}
.role{font-size:4.25cqw;line-height:1.05;font-weight:300;margin-top:1.3cqw}
.affiliation{font-size:2.55cqw;line-height:1.35;font-weight:300;letter-spacing:.025em}
.act-line{display:flex;align-items:center;gap:1.2cqw}
.act-dot{display:inline-block;width:2.1cqw;height:2.1cqw;background:var(--orange);border-radius:50%;margin-left:1.1cqw}
.act-mark{font-family:Arial,sans-serif;font-size:5cqw;line-height:.6}

.page-one-grid{height:60.9%;display:grid;grid-template-columns:43.35% 56.65%}
.dark-panel{background:var(--ink);color:#f4f4f4}
.intro-panel{padding:2.1% 4.9% 2% 4.8%}
.intro-panel section{margin-bottom:2.2cqw}
.intro-panel h2{font-size:3.65cqw;margin-bottom:1.6cqw}
.intro-panel p,.intro-panel li{font-size:2.0cqw;line-height:1.19;font-weight:400}
.compact-list,.caps-list{list-style:none;padding-left:0;margin:0}
.compact-list>li{position:relative;padding-left:1.05cqw}
.compact-list>li:before{content:"•";position:absolute;left:0}
.compact-list ul{list-style:none;padding-left:1.8cqw;margin:.1cqw 0 .2cqw}
.compact-list ul li:before{content:"-";margin-right:.3cqw}
.caps-list li{font-size:2.05cqw;line-height:1.23}
.caps-list li:before{content:"•"}

.light-panel{position:relative;background:var(--paper);color:#272727;overflow:hidden}
.details-panel:before{content:"";position:absolute;inset:0;background:url("../jack_vysotskiy/equipment-bg.png") center 28%/cover no-repeat;opacity:.22;filter:grayscale(1)}
.details-overlay{position:absolute;inset:0;background:rgba(245,245,245,.52)}
.details-content{position:relative;z-index:2;padding:2.25% 4.7% 2% 4.7%}
.details-content h2{font-size:3.55cqw;margin-bottom:.7cqw}
.projects-section{margin-bottom:.7cqw}
.project-row{display:grid;grid-template-columns:1fr 6.3cqw 6.4cqw;gap:.55cqw;align-items:start;min-height:4.7cqw}
.project-main{display:grid;grid-template-columns:auto 1fr;gap:.5cqw;align-items:start;font-size:1.32cqw;line-height:1.05}
.project-main b{font-size:2.05cqw;color:var(--blue);text-decoration:underline;white-space:nowrap}
.project-main span{padding-top:.16cqw}
.project-row>a{font-size:1.8cqw;padding-top:.2cqw}
.rating{width:6cqw;margin-top:.2cqw}
.brand-pair{display:flex;align-items:center;gap:.35cqw;padding-top:.3cqw}
.brand-pair img:first-child{width:2.7cqw;height:auto}
.brand-pair img:last-child{width:3.4cqw;height:auto}
.contact-section{margin-top:.2cqw}
.contact-section p{font-size:1.9cqw;line-height:1.14;margin-bottom:.8cqw}
.social-row{display:flex;align-items:center;gap:.7cqw;margin-bottom:1.4cqw}
.social-row img{width:7cqw;height:7cqw;object-fit:contain}
.imdb-box{width:14.5cqw;height:7cqw;border-radius:1.2cqw;background:#f6b800;display:flex;align-items:center;justify-content:center;font:700 4.7cqw/1 var(--heading);color:#1f2933}
.equipment-section h2{margin-bottom:1.0cqw}
.equipment-section li,.equipment-section p{font-size:1.85cqw;line-height:1.08}
.equipment-section ul ul{margin:.1cqw 0 0;padding-left:1.5cqw}
.equipment-link{margin-top:1.1cqw}

.split-page{display:grid;grid-template-columns:43.35% 56.65%}
.experience-left{padding:3.1% 2.2% 2.1% 2.5%;overflow:hidden}
.experience-left h1{
    font-size:clamp(64px, 5vw, 100px);
    line-height:.88;
    margin-bottom:16px;
    white-space:normal;
}

.experience-left h1 span{
    font-size:clamp(52px, 4vw, 82px);
}
.years{font:700 3.45cqw/1 var(--heading);letter-spacing:.035em;margin:.5cqw 0 1.1cqw}
.experience-block{margin-bottom:1.2cqw}
.experience-block h2{font-size:3.1cqw;margin-bottom:.45cqw}
.experience-block h3{font-size:2.4cqw;margin-bottom:.55cqw}
.experience-block p{font-size:1.78cqw;line-height:1.05;margin-bottom:.52cqw}
.align-right{text-align:right}
.dense p{margin-bottom:.4cqw}
.documentaries-left{margin-top:.4cqw}

.experience-right{position:relative;overflow:hidden}
.experience-right:before{content:"";position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;filter:grayscale(1)}
.bg-israel:before{background-image:url("../jack_vysotskiy/israel-bg.png");background-position:60% 52%}
.bg-russia:before{background-image:url("../jack_vysotskiy/russia-bg.png");background-position:60% 58%}
.bg-other:before{background-image:url("../jack_vysotskiy/other-bg.png");background-position:64% 48%}
.paper-overlay{position:absolute;inset:0;background:rgba(245,245,245,.76)}
.paper-overlay.stronger{background:rgba(238,238,238,.72)}
.paper-overlay.strongest{background:rgba(250,250,250,.76)}
.experience-content{position:relative;z-index:2;padding:7.7% 2.8% 2% 2.2%}
.exp-section h2{font-size:3.25cqw;margin-bottom:.6cqw}
.exp-section p{font-size:1.68cqw;line-height:1.08;margin-bottom:.45cqw}
.exp-section small{display:inline}
.docs-top{margin-bottom:.8cqw}
.two-mini-cols{display:grid;grid-template-columns:1fr 1fr;gap:1.2cqw}
.shorts{margin-bottom:.7cqw}
.media-row{display:grid;grid-template-columns:1.45fr .8fr;gap:1.5cqw;margin-top:.15cqw}
.news{padding-left:.4cqw}
.ads{margin-top:.5cqw}

.russia-left{padding-top:2.1%}
.russia-left h1{
    font-size:clamp(64px, 5vw, 100px);
    line-height:.88;
}
.russia-left .plain-list p{font-size:1.73cqw;line-height:1.08;margin-bottom:.88cqw}
.shorts-russia{margin-top:.5cqw}
.tv-russia{padding-top:7.4%}
.tv-russia .exp-section p{font-size:1.75cqw;line-height:1.1;margin-bottom:1.0cqw}

.p4-left{padding-top:2.8%}
.p4-left .plain-list p{font-size:1.84cqw;line-height:1.12;margin-bottom:1.25cqw}
.p4-left h2{font-size:3.2cqw;margin-bottom:1.2cqw}
.p4-ads{margin-top:1.7cqw}
.p4-right{padding-top:4.2%}
.p4-right .exp-section h2{font-size:3.35cqw}
.p4-right .exp-section p{font-size:1.86cqw;line-height:1.12;margin-bottom:1.05cqw}
.other-projects{margin-top:2.2cqw}
.other-projects p{margin-bottom:1.7cqw!important}
.page-four{
    aspect-ratio:auto;
    min-height:0;
    align-items:stretch;
}

.page-four .experience-left,
.page-four .experience-right{
    min-height:0;
}

.page-four .experience-left,
.page-four .experience-content{
    padding-bottom:3cqw;
}
.social-row a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
}

.social-row a img{
    display:block;
}
@media (max-width:760px){
  body{background:#222}
  .cv-document{width:100%}
  .cv-page{aspect-ratio:auto;overflow:visible}
  .hero{min-height:64vw;height:auto;padding-bottom:5vw}
  .hero-title{position:relative;left:auto;bottom:auto;padding:29vw 5vw 0}
  .sound-logo{width:26vw}
  .surname{font-size:10vw}.name{font-size:14vw}.role{font-size:5vw}.affiliation{font-size:3.2vw}.act-mark{font-size:6vw}
  .page-one-grid,.split-page{display:block;height:auto}
  .intro-panel,.details-content,.experience-left,.experience-content{padding:6vw 5vw}
  h2,.details-content h2,.experience-block h2,.exp-section h2{font-size:7vw}
  p,li,.intro-panel p,.intro-panel li,.contact-section p,.equipment-section li,.equipment-section p,.experience-block p,.exp-section p,.russia-left .plain-list p,.p4-left .plain-list p,.p4-right .exp-section p{font-size:3.8vw;line-height:1.3}
  .project-row{grid-template-columns:1fr auto;gap:2vw;padding:1.5vw 0}.project-main{display:block;font-size:3vw}.project-main b{display:block;font-size:4vw}.project-row>a{font-size:3.5vw}.rating{width:12vw}.project-brand{display:none}
  .social-row img{width:12vw;height:12vw}.imdb-box{width:22vw;height:12vw;font-size:8vw}
  .experience-left h1{font-size:13vw}.experience-left h1 span{font-size:10vw}.years{font-size:6vw}
  .two-mini-cols,.media-row{grid-template-columns:1fr}
  .experience-right{min-height:auto}
}