:root{
  --ink:#111214;
  --paper:#e9e6df;
  --muted:#77756f;
  --accent:#b8ff4d;
  --line:rgba(17,18,20,.16);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.nav{position:fixed;z-index:10;top:0;left:0;width:100%;display:flex;justify-content:space-between;align-items:center;padding:24px 4vw;mix-blend-mode:multiply}
.logo{font:700 19px Manrope,sans-serif;letter-spacing:.08em}
.nav nav{display:flex;gap:28px;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.nav nav a:hover,.text-link:hover{opacity:.55}
.hero{min-height:100vh;padding:130px 7vw 70px;display:grid;grid-template-columns:1fr .85fr;gap:7vw;align-items:center}
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 22px}
h1,h2{font-family:Manrope,Arial,sans-serif;margin:0;line-height:.9;letter-spacing:-.055em}
h1{font-size:clamp(62px,10vw,150px)}
h1 em{font-style:normal;font-weight:400}
.intro{max-width:470px;font-size:18px;line-height:1.55;margin:35px 0}
.button{display:inline-block;border:1px solid var(--ink);padding:15px 20px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;transition:.25s}
.button:hover{background:var(--ink);color:var(--paper)}
.hero-art{height:650px;position:relative}
.art-card{position:absolute;display:flex;align-items:flex-end;padding:25px;box-shadow:0 20px 60px rgba(0,0,0,.12)}
.art-main{width:75%;height:78%;right:0;top:4%;background:linear-gradient(145deg,#c8b6a0,#313238 52%,#b4c3bc);font:600 44px Manrope;color:#f0ede5}
.art-main span{position:absolute;top:22px;left:24px;font:11px Inter}
.art-small{width:55%;height:37%;left:0;bottom:2%;background:linear-gradient(135deg,#17191b,#d5c2b5 50%,#6b716e);color:white;font-size:11px;letter-spacing:.15em}
.section{padding:120px 7vw}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:55px}
.section h2{font-size:clamp(48px,7vw,100px)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:35px}
.work{margin:0}.work:nth-child(1){grid-column:span 7}.work:nth-child(2){grid-column:span 5;margin-top:90px}.work:nth-child(3){grid-column:span 5}.work:nth-child(4){grid-column:span 7;margin-top:100px}.work:nth-child(5){grid-column:span 7}.work:nth-child(6){grid-column:span 5;margin-top:80px}
.placeholder{height:480px;display:flex;align-items:flex-end;padding:28px;font:500 42px/1 Manrope;letter-spacing:-.05em}
.work-a .placeholder{background:linear-gradient(135deg,#a79c8d,#24282a 55%,#d2b99f)}
.work-b .placeholder{height:390px;background:linear-gradient(145deg,#e1c9ae,#71786f,#262629);color:white}
.work-c .placeholder{background:linear-gradient(135deg,#313b3e,#c7bda9 45%,#8f6055)}
.work-d .placeholder{height:430px;background:linear-gradient(145deg,#d5d0c5,#565a62,#1d1f22);color:white}
.work-e .placeholder{background:linear-gradient(135deg,#191a1c,#b0a293,#6e7974);color:white}
.work-f .placeholder{height:400px;background:linear-gradient(135deg,#c2b59c,#47484a 55%,#9a6259)}
.work p{font-size:15px;margin:14px 0 4px}.work small{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.12em}
.about{background:#161719;color:#efede7;padding:140px 7vw;display:grid;grid-template-columns:1fr 1fr;gap:10vw}
.about .eyebrow{color:#aaa}.about h2{font-size:clamp(52px,7vw,100px)}
.about-text{font-size:19px;line-height:1.65;max-width:560px;padding-top:40px}.about-text p{margin:0 0 30px}.about-text .meta{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:#aaa;line-height:1.8;margin-top:70px}
.tattoo{padding:130px 7vw;display:grid;grid-template-columns:1.15fr .85fr;gap:8vw;align-items:center}
.tattoo-image{height:620px;background:linear-gradient(145deg,#17191a,#464348 50%,#c0b4a5);display:flex;align-items:center;justify-content:center;color:#fff;font:500 52px/1 Manrope;text-align:center;letter-spacing:-.05em}
.tattoo-copy h2{font-size:clamp(58px,8vw,110px)}.tattoo-copy>p:not(.eyebrow){font-size:18px;line-height:1.6;max-width:460px;margin:35px 0}.text-link{border-bottom:1px solid var(--ink);padding-bottom:7px;font-size:12px;text-transform:uppercase;letter-spacing:.12em}
.statement{padding:160px 7vw;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.statement p{font:500 clamp(42px,6vw,88px)/.98 Manrope;letter-spacing:-.05em;margin:0}
.contact{padding:150px 7vw}.contact h2{font-size:clamp(65px,10vw,145px)}.contact-links{display:flex;gap:35px;margin-top:80px;text-transform:uppercase;font-size:11px;letter-spacing:.13em}
footer{border-top:1px solid var(--line);padding:25px 4vw;display:flex;justify-content:space-between;font-size:10px;text-transform:uppercase;letter-spacing:.12em}
@media(max-width:800px){
  .nav{padding:18px 5vw}.nav nav{display:none}.hero{grid-template-columns:1fr;padding:115px 5vw 60px}.hero-art{height:480px}.section,.about,.tattoo,.contact{padding:85px 5vw}.section-head{display:block}.grid{display:block}.work{margin:0 0 55px!important}.placeholder{height:390px!important}.about,.tattoo{grid-template-columns:1fr;gap:50px}.tattoo-image{height:430px}.statement{padding:100px 5vw}.contact-links{flex-wrap:wrap;margin-top:55px}.hero .intro{font-size:16px}
}