*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:#fff;color:#000;text-align:left;
  font-family:'Roboto',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  font-weight:300;font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

/* ---------- шапка ---------- */
header{position:relative;padding:26px 20px 20px;text-align:center;background:#fff;z-index:50;}
header .name{font-size:22px;letter-spacing:.14em;font-weight:300;margin:0;}
header .role{font-size:12px;color:#8c8c8c;margin-top:3px;letter-spacing:.02em;}
.burger{position:absolute;top:26px;right:26px;width:30px;height:22px;border:0;background:none;
  cursor:pointer;padding:0;display:flex;flex-direction:column;justify-content:space-between;}
.burger span{display:block;height:1.5px;background:#000;width:100%;transition:.25s;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(10px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-10px) rotate(-45deg);}
nav.menu{position:fixed;inset:0;background:#fff;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:20px;z-index:40;}
nav.menu.open{display:flex;}
nav.menu a{font-size:19px;letter-spacing:.06em;font-weight:300;}
nav.menu a:hover{color:#8c8c8c;}
nav.menu .lang{margin-top:12px;font-size:13px;color:#9a9a9a;letter-spacing:.08em;}
nav.menu .lang a{font-size:13px;display:inline;}
nav.menu .lang a.on{color:#000;border-bottom:1px solid #000;}

main{padding-bottom:80px;}
.w{max-width:960px;margin:0 auto;padding:0 20px;}
.col{max-width:700px;}

/* ---------- плитки разделов ---------- */
.wt{max-width:1200px;margin:0 auto;padding:0 20px;}
.tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:110px 40px;margin-top:0;}
.tile{width:360px;text-align:center;}
.tile .circle{width:360px;height:370px;border-radius:200px;overflow:hidden;background:#f4f4f4;}
.tile .circle img{width:100%;height:100%;object-fit:cover;transition:opacity .4s ease;}
.tile:hover .circle img{opacity:.85;}
.tile h2{font-size:16px;font-weight:400;letter-spacing:.01em;margin:20px 0 0;}
.tile p{font-size:14px;color:#8c8c8c;margin:10px 0 0;line-height:1.35;}

/* ---------- заголовок страницы ---------- */
.hd{max-width:960px;margin:0 auto;padding:0 20px 20px;text-align:left;}
.hd h1{font-size:26px;font-weight:300;letter-spacing:.10em;margin:0;
  text-transform:uppercase;line-height:1.25;}
.hd .k{font-size:13px;font-weight:300;color:#8c8c8c;margin-top:8px;}
.hd .spec{font-size:13px;color:#8c8c8c;margin-top:12px;line-height:1.65;}

/* ---------- главный кадр ---------- */
.full{padding:0 16px;}
.full img{width:auto;margin:0 auto;max-height:78vh;max-height:78svh;}

/* ---------- текст ---------- */
.tx{margin:56px 0 0;color:#3a3a3a;}
.tx p{margin:0 0 16px;}
.tx p:last-child{margin:0;}
.lead{text-align:center;font-size:14px;letter-spacing:.05em;color:#3a3a3a;
  text-transform:uppercase;line-height:1.75;margin:28px auto 0;max-width:820px;}

/* ---------- кадры ---------- */
.plate{margin:52px 0 0;}
.plate img{width:auto;margin:0 auto;max-height:86vh;max-height:86svh;}
.bleed{margin-top:24px;}
.bleed img{width:100%;}

/* ---------- сетка ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;margin-top:34px;}
.grid img{width:100%;height:280px;object-fit:cover;background:#f6f6f6;}

/* ---------- работы серии ---------- */
.work{padding:48px 0 0;}
.work .frame{display:flex;justify-content:center;}
.work .frame img{max-height:78vh;max-height:78svh;width:auto;}
.work .cap{text-align:center;margin-top:16px;}
.work .cap h3{font-size:16px;font-weight:400;margin:0 0 6px;}
.work .cap .meta{font-size:13px;color:#8c8c8c;line-height:1.7;}
.thumbs{display:flex;justify-content:center;gap:9px;margin-top:14px;flex-wrap:wrap;}
.thumbs img{width:62px;height:62px;object-fit:cover;cursor:pointer;opacity:.45;transition:opacity .2s;}
.thumbs img:hover,.thumbs img.sel{opacity:1;}

/* ---------- индекс инсталляций ---------- */
.ix-row{display:grid;grid-template-columns:1fr 220px;gap:30px;align-items:start;
  max-width:960px;margin:0 auto 60px;padding:0 20px;}
.ix-row:last-of-type{margin-bottom:0;}
.ix-img img{width:auto;margin:0;max-height:60vh;max-height:60svh;transition:opacity .22s ease;}
.ix-row:hover .ix-img img{opacity:.82;}
.ix-name{font-size:17px;}
.ix-meta{font-size:13px;color:#8c8c8c;margin-top:4px;}

/* ---------- данные о работе ---------- */
.facts{margin-top:56px;padding-top:22px;border-top:1px solid #e6e6e6;
  font-size:13px;color:#3a3a3a;line-height:1.85;}
.facts .t{color:#000;}
.facts .ex{color:#8c8c8c;margin-top:14px;font-size:12.5px;line-height:1.7;}
.rel{margin-top:24px;padding-top:16px;border-top:1px solid #e6e6e6;font-size:12.5px;color:#8c8c8c;}
.rel a{color:#3a3a3a;border-bottom:1px solid #e6e6e6;}

/* ---------- переход ---------- */
.nav-lr{max-width:700px;margin:40px auto 0;padding-top:18px;border-top:1px solid #e6e6e6;
  display:flex;justify-content:space-between;gap:20px;font-size:12.5px;}
.nav-lr a{color:#8c8c8c;transition:color .18s ease;}
.nav-lr a:hover{color:#000;}
.nav-lr .r{margin-left:auto;text-align:right;}

/* ---------- обо мне ---------- */
.portrait{max-width:560px;margin:0 auto;}
.portrait img{width:100%;}
.bio{font-size:14px;line-height:1.75;color:#3a3a3a;margin:38px 0 0;max-width:none;}
.bio p{margin:0 0 14px;}
h2.sec{font-size:15px;font-weight:400;margin:40px 0 14px;letter-spacing:.02em;}
.cv{max-width:none;margin:0;}
.cv .row{display:grid;grid-template-columns:64px 1fr;gap:14px;padding:6px 0;
  border-top:1px solid #f0f0f0;font-size:13.5px;align-items:baseline;}
.cv .row:first-of-type{border-top:0;}
.cv .yr{color:#9a9a9a;font-variant-numeric:tabular-nums;font-size:13px;}
.cv .what em{font-style:italic;color:#4a4a4a;}

/* ---------- контакты ---------- */
.contacts{text-align:center;padding:56px 0;}
.contacts a.mail{font-size:22px;border-bottom:1px solid #dcdcdc;}
.contacts a.mail:hover{border-color:#000;}
.contacts .lines{margin-top:22px;font-size:14px;color:#5a5a5a;line-height:2;}
.contacts .note{margin-top:26px;font-size:13.5px;color:#8c8c8c;max-width:520px;
  margin-left:auto;margin-right:auto;line-height:1.7;}
.contacts .disc{margin-top:20px;font-size:11.5px;color:#b0b0b0;max-width:560px;
  margin-left:auto;margin-right:auto;line-height:1.6;}

footer{border-top:1px solid #f0f0f0;padding:24px 20px;text-align:center;
  font-size:12px;color:#a5a5a5;letter-spacing:.03em;}

@media screen and (max-width:1240px){
  .tiles{gap:80px 40px;} .tile,.tile .circle{width:300px;} .tile .circle{height:308px;}
}
@media screen and (max-width:760px){
  .tiles{gap:56px 30px;} .tile,.tile .circle{width:320px;} .tile .circle{height:330px;}
}
@media screen and (max-width:860px){
  .ix-row{display:flex;flex-direction:column-reverse;gap:9px;margin-bottom:44px;}
  .ix-img img{max-height:58vh;max-height:58svh;}
}
@media screen and (max-width:680px){
  header .name{font-size:19px;}
  .hd{padding:0 14px 16px;} .hd h1{font-size:19px;letter-spacing:.06em;}
  .tile,.tile .circle{width:270px;} .tile .circle{height:278px;}
  .full{padding:0 12px;} .full img{max-height:66vh;max-height:66svh;}
  .plate{margin-top:34px;} .plate img{max-height:74vh;max-height:74svh;}
  .tx{margin-top:36px;}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;}
  .grid img{height:190px;}
  .work .frame img{max-height:62vh;max-height:62svh;}
  .cv .row{grid-template-columns:60px 1fr;gap:10px;font-size:13px;}
  .facts{margin-top:36px;}
}