@font-face{font-family:Roboto;src:url('assets/fonts/roboto-0.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Roboto;src:url('assets/fonts/roboto-1.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
:root{color-scheme:light;--paper:#E7E5E1;--ink:#4C2815;--rule:#9f897c}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:Roboto,sans-serif}
.landing{max-width:1440px;margin-inline:auto;text-align:center;padding-bottom:70px}
.artwork{display:block;width:76.389%;max-width:1100px;margin-inline:auto}
.artwork img{display:block;width:100%;height:auto}
.message{position:relative;max-width:578px;width:calc(100% - 48px);margin:-84px auto 0}
h1{margin:0;border-block:2px solid var(--rule);padding:8px 0;font-size:26px;line-height:1.25;font-weight:700}
.intro{margin:28px -20px 0;font-size:16px;line-height:1.3;font-weight:400}
.contacts{display:flex;align-items:center;gap:51px;position:relative;margin-top:16px}
.contacts:before{content:'';position:absolute;left:50%;top:-4px;height:56px;border-left:1px solid var(--ink)}
.contact{position:relative;display:block;flex:1;min-width:0;aspect-ratio:263/48;border-radius:999px;color:inherit;-webkit-tap-highlight-color:transparent}
.button-art{position:absolute;left:-15.209%;top:-66.667%;width:130.418%;pointer-events:none;opacity:0}
.instagram .button-art{left:-15.152%;width:130.303%}
.button-art img{display:block;width:100%;height:auto}
.state-normal{opacity:1}
@media(hover:hover){.contact:hover .state-normal{opacity:0}.contact:hover .state-hover{opacity:1}}
.contact:active .state-normal,.contact:active .state-hover{opacity:0}
.contact:active .state-pressed{opacity:1}
.contact:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
footer{position:relative;margin-top:34px;font-size:12px;line-height:1.4;padding-inline:16px}
@media(min-width:768px) and (max-width:1200px){.message{margin-top:-5.83vw}}
@media(max-width:767px){
 .landing{max-width:600px;padding-bottom:54px}
 .artwork{width:75.385%;max-width:none}
 .message{width:75.385%;max-width:none;margin:-6px auto 0}
 h1{padding:7px 0;font-size:clamp(18px,5.13vw,30px);line-height:1.25}
 .intro{margin:15px -4px 0;font-size:clamp(12px,3.35vw,20px);line-height:1.25}
 .intro span{display:block}
 .contacts{flex-direction:column;gap:10px;margin-top:10px}
 .contacts:before{display:none}
 .contact{flex:none;width:100%;aspect-ratio:294/48}
 .button-art,.instagram .button-art{left:-13.605%;top:-66.667%;width:127.211%}
 footer{margin-top:13px;font-size:clamp(9px,2.44vw,14px);padding-inline:12px}
}
@media(prefers-reduced-motion:no-preference){.button-art{transition:opacity .12s ease}}