/* r`DOT — «Гараж-2007». Перенесено из утверждённого макета concept-garage/index.html без изменений вида. */

:root{--concrete:#D4D2CD;--bag:#131314;--metal:#868C8E;--red:#B72427;--ink:#1d1d1e;--paper:#e2dfd8;
--mono:'Anonymous Pro',ui-monospace,monospace;--stamp:'Rubik Distressed',Impact,sans-serif;--spray:'Rubik Spray Paint',var(--stamp)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{overflow-x:clip;font:400 17px/1.55 var(--mono);color:var(--ink);background:var(--bag);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:100%}
.concrete{background:var(--concrete) url(../img/concrete.jpg) 0 0/640px}
.bag{background:var(--bag) url(../img/bag.jpg) 0 0/1100px;color:var(--paper)}
.wrap{padding:0 clamp(18px,4vw,64px)}
.todo{display:inline-block;font:700 12px/1 var(--mono);letter-spacing:.06em;color:var(--red);border:1.5px dashed var(--red);padding:3px 6px;vertical-align:middle;text-transform:uppercase}
.bag .todo{color:#ff8a86;border-color:#ff8a86}
.bag .plate .todo{color:var(--red);border-color:var(--red)}
.more-tile{grid-column:span 2;align-self:center;font:400 clamp(40px,4vw,64px)/1 var(--spray);color:var(--bag);text-decoration:none;transform:rotate(-4deg);padding-left:20px}
.more-tile small{display:block;font:700 15px/1.3 var(--mono);margin-top:10px;border-bottom:2px solid var(--red);width:max-content}

/* sticker = signature */
.sticker{--r:-9deg;--s:96px;position:absolute;width:var(--s);height:var(--s);border-radius:50%;
background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.28) 0 9%,transparent 24%),var(--red);
color:#f4efe9;display:grid;place-items:center;transform:rotate(var(--r));
box-shadow:0 1px 0 rgba(0,0,0,.25),0 3px 6px rgba(0,0,0,.18);font:700 calc(var(--s)*.42)/1 'Logo R',serif;z-index:3}
.sticker::after{content:"";position:absolute;inset:6%;border-radius:50%;border:1.5px solid rgba(255,255,255,.55)}
.sticker--word{--s:84px;font:400 15px/1 var(--stamp);text-transform:uppercase;right:-14px;top:-18px}
.sticker--price{--s:150px;font:400 30px/1 var(--stamp);text-align:center}
.sticker--price small{display:block;font:700 12px/1.2 var(--mono);letter-spacing:.04em;margin-top:6px}

/* header */
.top{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:18px;padding-bottom:18px;position:relative;z-index:5;font-size:15px}
.logo{font:700 30px/1 'Logo R',serif;text-decoration:none;color:var(--bag);letter-spacing:.01em}
.logo b{color:var(--red)}
.top nav{display:flex;gap:26px}
.top nav a{text-decoration:none;border-bottom:1px solid rgba(0,0,0,.35)}
.top .tg{font-weight:700;text-decoration:none;border-bottom:2px solid var(--red)}

/* hero */
.hero{position:relative;min-height:calc(100vh - 66px);display:grid;grid-template-columns:repeat(12,1fr);column-gap:20px;align-items:center;padding-bottom:150px}
.concrete:first-child{overflow-x:clip}
.bigR{grid-column:1/8;position:relative;margin-top:40px;font:700 min(86vh,54vw)/.78 'Logo R',serif;color:var(--bag);margin-left:-.07em;
text-shadow:0 0 3px rgba(19,19,20,.55),0 0 18px rgba(19,19,20,.22),0 0 46px rgba(19,19,20,.1);mix-blend-mode:multiply;align-self:center;user-select:none}
.glyph{position:relative;display:inline-block}
.bigR .sticker{--s:min(16vh,9.5vw);--r:-9deg;left:96%;top:14%}
.tag{position:absolute;font:400 clamp(40px,5.5vw,84px)/1 var(--spray);color:rgba(19,19,20,.78);transform:rotate(-8deg);white-space:nowrap;pointer-events:none}
.hero .tag{left:30%;bottom:150px;transform:rotate(-7deg)}
.hero-copy{grid-column:8/13;position:relative;z-index:5;padding-bottom:40px}
.hero h1{font:400 clamp(44px,5.6vw,92px)/.92 var(--stamp);text-transform:uppercase;letter-spacing:-.005em;margin-bottom:26px}
.hero p{max-width:30em;margin-bottom:28px}
.cta{display:inline-block;font:400 26px/1 var(--stamp);text-transform:uppercase;text-decoration:none;color:#f4efe9;background:var(--red);padding:18px 26px 16px;transform:rotate(-1.5deg);box-shadow:4px 4px 0 var(--bag)}
.cta:hover{transform:rotate(0)}
.sub-links{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:15px}
.sub-links a{text-decoration:none;border-bottom:1px solid currentColor}
.taped{position:absolute;right:clamp(18px,4vw,64px);bottom:-70px;width:min(250px,20vw);transform:rotate(3deg);background:var(--paper);padding:10px 10px 12px;z-index:4;box-shadow:0 2px 3px rgba(0,0,0,.25)}
.taped figcaption{font-size:13px;margin-top:8px}
.tape{position:absolute;width:110px;height:30px;background:rgba(222,214,190,.72);top:-14px;left:calc(50% - 55px);transform:rotate(-4deg);z-index:2;
clip-path:polygon(0 8%,4% 0,8% 10%,12% 0,100% 0,97% 30%,100% 55%,96% 80%,100% 100%,0 100%,3% 70%,0 45%)}

/* torn edge */
.tear{height:46px;margin-top:-45px;position:relative;z-index:3;clip-path:polygon(0.00% 0.91%, 2.17% 3.31%, 4.35% 1.67%, 6.52% 0.99%, 8.70% 2.45%, 10.87% 2.47%, 13.04% 2.40%, 15.22% 2.29%, 17.39% 1.32%, 19.57% 1.27%, 21.74% 3.46%, 23.91% 1.62%, 26.09% 3.37%, 28.26% 3.94%, 30.43% 4.33%, 32.61% 4.72%, 34.78% 1.17%, 36.96% 1.19%, 39.13% 3.67%, 41.30% 2.88%, 43.48% 1.01%, 45.65% 3.39%, 47.83% 4.37%, 50.00% 4.18%, 52.17% 1.08%, 54.35% 1.49%, 56.52% 0.03%, 58.70% 4.88%, 60.87% 1.10%, 63.04% 3.64%, 65.22% 2.69%, 67.39% 2.97%, 69.57% 2.63%, 71.74% 4.13%, 73.91% 3.00%, 76.09% 1.52%, 78.26% 0.57%, 80.43% 2.39%, 82.61% 4.61%, 84.78% 0.73%, 86.96% 3.42%, 89.13% 3.16%, 91.30% 0.80%, 93.48% 1.03%, 95.65% 3.43%, 97.83% 2.18%, 100.00% 2.04%, 100% 100%, 0% 100%)}

/* about on bag */
.about{display:grid;grid-template-columns:repeat(12,1fr);column-gap:20px;padding-top:120px;padding-bottom:120px;position:relative}
.about h2,.prices h2,.works h2,.contacts h2{font:400 clamp(56px,7.6vw,112px)/.9 var(--stamp);text-transform:uppercase}
.about h2{grid-column:1/7;margin-bottom:40px}
.about ol{grid-column:1/7;list-style:none;counter-reset:n}
.about li{counter-increment:n;display:grid;grid-template-columns:72px 1fr;padding:18px 0;border-top:1px solid rgba(226,223,216,.25)}
.about li::before{content:"0" counter(n);font:400 34px/1 var(--stamp);color:var(--metal)}
.about .hall{grid-column:8/13;grid-row:1/3;align-self:start;position:relative;background:var(--paper);padding:10px 10px 12px;transform:rotate(-1.6deg);margin-top:30px;color:var(--ink)}
.about .hall figcaption{font-size:13px;margin-top:8px}
.slogan{grid-column:1/13;margin-top:70px;font:400 clamp(28px,3.4vw,48px)/1.1 var(--stamp);text-transform:uppercase;color:var(--paper)}
.slogan i{font-style:normal;color:var(--red)}

/* prices: riveted plates */
.prices{padding-top:40px;padding-bottom:140px}
.prices h2{margin-bottom:12px}
.prices .lead{max-width:36em;margin-bottom:56px;color:#bdbab3}
.plates{display:grid;grid-template-columns:repeat(12,1fr);column-gap:22px;row-gap:40px;align-items:start}
.plate{position:relative;background:var(--metal) url(../img/metal.jpg) 0 0/700px;color:#151516;padding:38px 34px 30px;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),inset 0 -3px 0 rgba(0,0,0,.25),0 8px 18px rgba(0,0,0,.5)}
.plate::before,.plate::after,.plate .rv::before,.plate .rv::after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;
background:radial-gradient(circle at 35% 30%,#e9ebec,#7b8083 55%,#3d4042)}
.plate::before{left:12px;top:12px}.plate::after{right:12px;top:12px}
.plate .rv::before{left:12px;bottom:12px}.plate .rv::after{right:12px;bottom:12px}
.plate.missing .rv::after{background:radial-gradient(circle,#2a2c2d 0 35%,rgba(0,0,0,.15) 40%,transparent 60%)}
.plate h3{font:400 clamp(36px,3.6vw,54px)/1 var(--stamp);text-transform:uppercase;color:#1a1b1c;text-shadow:0 1px 0 rgba(255,255,255,.35);margin-bottom:6px}
.plate .note{font-size:14px;margin-bottom:18px;color:#26282a}
.row{display:flex;align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px solid rgba(20,20,20,.18);font-variant-numeric:tabular-nums}
.row span:first-child{flex:0 1 auto}
.row i{flex:1;border-bottom:2px dotted rgba(20,20,20,.45);transform:translateY(-4px);min-width:20px}
.row b{white-space:nowrap}
.row .todo{margin-left:6px}
.p-tattoo{grid-column:1/7}
.p-pierce{grid-column:7/11;margin-top:90px}
.p-learn{grid-column:8/13;transform:rotate(-1.2deg);margin-top:-10px}
.p-learn .sticker{right:-36px;top:-60px;--r:7deg}
.cowork{grid-column:1/7;font-size:15px;color:#c9c6bf;border-left:3px solid var(--red);padding-left:16px;align-self:center}
.cowork a{color:#f0ece5}

/* works */
.works{padding-top:110px;padding-bottom:120px;position:relative}
.works-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:20px;margin-bottom:56px;align-items:end}
.works h2{grid-column:1/8}
.works-head p{grid-column:9/13;font-size:15px}
.board{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:240px;gap:44px 34px;grid-auto-flow:dense}
.copy{position:relative;background:var(--paper);padding:9px 9px 34px;transform:rotate(var(--r));box-shadow:0 2px 3px rgba(0,0,0,.22)}
.copy img{width:100%;height:100%;object-fit:cover}
.copy figcaption{position:absolute;left:10px;right:10px;bottom:9px;font-size:13px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.copy.tall{grid-row:span 2}
.copy.wide{grid-column:span 2}
.more{display:inline-block;margin-top:56px;font:400 30px/1 var(--stamp);text-transform:uppercase;text-decoration:none;border-bottom:3px solid var(--red)}

/* masters */
.masters{display:grid;grid-template-columns:repeat(12,1fr);column-gap:20px;padding-bottom:140px;align-items:center}
.masters figure{grid-column:2/6;position:relative;background:var(--paper);padding:10px 10px 12px;transform:rotate(1.4deg);box-shadow:0 2px 3px rgba(0,0,0,.22)}
.masters figcaption{font-size:13px;margin-top:8px}
.masters .txt{grid-column:7/12}
.masters h3{font:400 clamp(44px,5vw,76px)/.95 var(--stamp);text-transform:uppercase;margin-bottom:20px}

/* contacts: rolling shutter */
.contacts{position:relative;overflow:hidden;color:var(--paper);
background:repeating-linear-gradient(180deg,rgba(255,255,255,.16) 0 2px,rgba(0,0,0,0) 2px 26px,rgba(0,0,0,.38) 26px 30px,rgba(0,0,0,0) 30px 34px),
linear-gradient(180deg,rgba(19,19,20,.55),rgba(19,19,20,.75)),var(--metal) url(../img/metal.jpg) 0 0/700px;padding-top:110px;padding-bottom:110px}
.contacts-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:20px;align-items:start}
.contacts h2{grid-column:1/13;margin-bottom:30px}
.graf{grid-column:1/8;display:flex;flex-direction:column;gap:6px;position:relative}
.graf a{font:400 clamp(110px,15vw,230px)/.9 var(--spray);text-decoration:none;color:#ece8e1;width:max-content;text-shadow:0 0 8px rgba(236,232,225,.35)}
.graf a:nth-child(1){transform:rotate(-6deg)}
.graf a:nth-child(2){transform:rotate(3deg);margin-left:22%}
.graf a small{display:block;font:700 15px/1.3 var(--mono);text-shadow:none;margin-top:-6px;margin-left:.6em}
.graf .sticker{left:clamp(220px,25vw,380px);top:24px;--r:-4deg;--s:86px}
.notice{grid-column:8/13;background:var(--paper);color:var(--ink);padding:30px 28px 26px;position:relative;transform:rotate(1.6deg);margin-top:40px}
.notice dl{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;font-size:16px}
.notice dt{font-weight:700}
.notice .cta{margin-top:24px;font-size:22px}
footer{padding-top:34px;padding-bottom:34px;font-size:14px;color:#a9a6a0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

@media (max-width:900px){
 body{font-size:16px}
 .top nav{display:none}
 .hero{display:block;min-height:auto;padding-top:10px;padding-bottom:300px}
 .hero-copy{padding-bottom:0}
 .bigR{font-size:min(100vw,560px);margin-left:-.06em;margin-top:10px}
 .bigR .sticker{--s:19vw;left:94%}
 .hero .tag{left:auto;right:3%;top:270px;bottom:auto;font-size:38px}
 .hero h1{margin-top:12px}
 .taped{width:58vw;bottom:-40px;right:22px}
 .more-tile{grid-column:span 2;padding:10px 0 0}
 .graf{overflow:visible}
 .sticker--word{--s:66px;right:-4px;top:-14px;font-size:12px}
 .p-learn .sticker{right:-14px}
 .about,.works-head,.plates,.masters,.contacts-grid{display:block}
 .about{padding-top:90px;padding-bottom:90px}
 .about .hall{margin:40px 8px 0}
 .slogan{margin-top:50px}
 .plate{margin-bottom:34px;padding:34px 22px 26px}
 .p-pierce{margin-top:0;margin-left:16px}
 .p-learn{margin-top:50px;margin-right:24px}
 .p-learn .sticker{--s:118px;right:-30px;top:-64px;font-size:24px}
 .cowork{margin-top:10px}
 .works-head p{margin-top:18px}
 .board{grid-template-columns:1fr 1fr;grid-auto-rows:190px;gap:30px 18px}
 .copy.wide{grid-column:span 2}
 .masters figure{margin:0 20px 34px 8px}
 .graf a{font-size:34vw}
 .graf .sticker{left:auto;right:6%;top:10px;--s:70px}
 .notice{margin-top:50px}
}

/* дополнения для данных из админки */
.row small{display:block;font-size:13px;color:#3a3c3e;line-height:1.3}
.row span:first-child{min-width:0}
.masters + .masters{margin-top:-60px}
.masters .txt h4{font:400 clamp(30px,3vw,44px)/1 var(--stamp);text-transform:uppercase;margin-bottom:12px}
.copy img:not(.color){filter:grayscale(1)}
.masters figure img,.taped img,.hall img{filter:grayscale(1)}