/* The pieces: the wall, artists, service cards, steps, reviews, map, gallery. */

/* intro: the facts on a note taped to the sheet */
body .elementor .intro > .elementor-container{align-items:center}
.inscription{position:relative;list-style:none;margin:clamp(24px,2.8vw,42px) 0 0;padding:clamp(16px,1.6vw,24px) clamp(18px,2vw,30px);display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:12px clamp(14px,1.8vw,30px);background:#F0E2C0 url(../img/bg/paper-cream.webp) 0 0/var(--tile);color:var(--ink-2);font:500 1.02rem/1.25 var(--f-text);box-shadow:var(--lift);transform:rotate(-.6deg)}
.inscription::before{content:"";position:absolute;left:50%;top:-18px;width:150px;aspect-ratio:3.6;margin-left:-75px;background:url(../img/tape.webp) center/100% 100% no-repeat;transform:rotate(2deg)}
.inscription li{display:block;padding:0;border:0}
.inscription b{display:block;margin-bottom:.1em;font:400 clamp(1.4rem,2vw,2.1rem)/1.1 var(--f-display);color:var(--red)}
@media (max-width:1023px){.inscription{grid-template-columns:repeat(2,auto)}}

/* the work: real tattoos, as prints taped up on the sheet */
body .elementor .work-note{font:400 var(--t-lead)/1.45 var(--f-text);color:var(--fg2);max-width:46ch}
body .elementor .work .elementor-widget-button{margin-top:clamp(44px,5vw,76px);text-align:center}
.wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(22px,3vw,46px) clamp(14px,2.4vw,36px);list-style:none;margin:clamp(34px,4vw,60px) 0 0;padding:0}
.wall-piece{--r:-1.6deg;--y:0px;position:relative;z-index:1;transform:translateY(var(--y)) rotate(var(--r));transition:transform .45s var(--ease)}
.wall-piece:nth-child(4n+1){--r:-1.8deg;--y:8px}
.wall-piece:nth-child(4n+2){--r:1.3deg;--y:-14px}
.wall-piece:nth-child(4n+3){--r:-.8deg;--y:14px}
.wall-piece:nth-child(4n+4){--r:1.9deg;--y:-8px}
.wall-piece:hover,.wall-piece:focus-within{z-index:3;transform:translateY(calc(var(--y) - 6px)) rotate(0deg) scale(1.04)}
.wall-piece a{position:relative;display:block;padding:clamp(7px,.8vw,11px) clamp(7px,.8vw,11px) 0;background:var(--print);color:var(--ink);text-decoration:none;box-shadow:var(--lift)}
.wall-piece a::before{content:"";position:absolute;z-index:2;left:50%;top:-13px;width:38%;aspect-ratio:3.6;margin-left:-19%;background:url(../img/tape.webp) center/100% 100% no-repeat;transform:rotate(-2.4deg)}
.wall-piece:nth-child(even) a::before{transform:rotate(3deg)}
.wall-piece img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.wall-cap{display:block;padding:.34em .2em .46em;font:400 clamp(1.5rem,1.9vw,2.1rem)/1 var(--f-script);text-align:center;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:767px){.wall{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* artists */
.artists{display:grid;gap:clamp(54px,7vw,100px);margin-top:clamp(20px,3vw,40px)}
.artist.has-photo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,6vw,92px);align-items:center}
.artist-photo{position:relative;display:block;padding:clamp(9px,1vw,13px) clamp(9px,1vw,13px) clamp(34px,3.6vw,52px);background:var(--print);box-shadow:var(--lift);transform:rotate(-2deg);transition:transform .45s var(--ease)}
.artist-photo:hover{transform:rotate(-.6deg) scale(1.015)}
.artist-photo::before{content:"";position:absolute;z-index:2;left:50%;top:-16px;width:34%;aspect-ratio:3.6;margin-left:-17%;background:url(../img/tape.webp) center/100% 100% no-repeat;transform:rotate(2.4deg)}
.artist-photo img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.artist-role{margin:0 0 .6em;font:700 1.12rem/1.2 var(--f-label);letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.artist-name{max-width:8.4em;font:400 clamp(2.5rem,5.6vw,5.8rem)/1 var(--f-display);color:var(--fg);text-shadow:.04em .045em 0 var(--shade,transparent)}
.artist-name a{color:inherit;text-decoration:none}
.artist-line{margin:.6em 0 .8em;font:400 var(--t-lead)/1.42 var(--f-text);max-width:38ch;color:var(--fg2)}
.artist-tags{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;margin:0 0 1.2em;padding:0;font:italic 400 1.12rem/1.2 var(--f-text);color:var(--fg2)}
.artist-tags li + li::before{content:"\2022";margin-right:18px;color:var(--acc);font-style:normal}
.artist-tags li{display:inline-flex}
.artist-work{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:470px;list-style:none;margin:0 0 1.5em;padding:0}
.artist-work li{padding:5px;background:var(--print);box-shadow:0 6px 12px rgba(0,0,0,.28);transform:rotate(-1.4deg)}
.artist-work li:nth-child(2){transform:rotate(1.2deg) translateY(-4px)}
.artist-work li:nth-child(3){transform:rotate(-.6deg) translateY(3px)}
.artist-work img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.artist-actions{display:flex;flex-wrap:wrap;gap:12px 16px;margin:0}
.artist.no-photo{padding-top:clamp(26px,3vw,44px);border-top:1px solid var(--line-c);max-width:760px}
@media (max-width:767px){.artist.has-photo{grid-template-columns:1fr}.artist-photo{max-width:440px}}

/* the process */
body .elementor .process > .elementor-container{align-items:center}
body .elementor .process-img img{object-fit:cover;aspect-ratio:4/5}
.steps{list-style:none;counter-reset:s;margin:1em 0 0;padding:0;display:grid;gap:.1em}
.steps li{position:relative;counter-increment:s;padding:.95em 0 .95em 3.6em;font:400 var(--t-lead)/1.38 var(--f-text);color:var(--fg2);border-top:1px solid var(--line-c)}
.steps li::before{content:counter(s);position:absolute;left:.08em;top:.34em;font:400 2.1em/1 var(--f-display);color:var(--acc)}
.steps b{display:block;margin-bottom:.12em;font:400 1.16em/1.1 var(--f-display);color:var(--fg)}

/* the doors: three cards, each a print with a heading on it */
body .elementor .doors > .elementor-container{flex-wrap:wrap;gap:clamp(16px,2.6vw,40px);align-items:stretch}
body .elementor .doors .doors-head{flex:0 0 100%;width:100%}
body .elementor .doors .doors-head .display .elementor-heading-title{margin-bottom:.2em}
body .elementor .doors .door{flex:1 1 0;min-width:0}
body .elementor .doors .elementor-column + .elementor-column > .elementor-widget-wrap{padding-left:clamp(11px,1.2vw,16px)}
body .elementor .door > .elementor-widget-wrap{position:relative;display:block;height:100%;padding:clamp(11px,1.2vw,16px) clamp(11px,1.2vw,16px) clamp(22px,2.4vw,34px);background:var(--print);box-shadow:var(--lift);transition:transform .45s var(--ease)}
body .elementor .door:nth-child(2) > .elementor-widget-wrap{transform:rotate(-1.3deg)}
body .elementor .door:nth-child(3) > .elementor-widget-wrap{transform:translateY(-14px) rotate(.9deg)}
body .elementor .door:nth-child(4) > .elementor-widget-wrap{transform:translateY(6px) rotate(-.7deg)}
body .elementor .door:hover > .elementor-widget-wrap{transform:translateY(-8px) rotate(0deg)}
body .elementor .door .door-img img{width:100%;aspect-ratio:1/1.02;object-fit:cover}
body .elementor .door-title .elementor-heading-title{margin:.7em 0 .3em;font:400 clamp(1.45rem,2.2vw,2.2rem)/1.04 var(--f-display);text-align:center;color:var(--ink)}
body .elementor .door-title a{color:inherit;text-decoration:none}
body .elementor .door-title a:hover{color:var(--red)}
body .elementor .door-text{max-width:32ch;margin-inline:auto;text-align:center;font:400 1.08rem/1.42 var(--f-text);color:var(--ink-2)}
@media (max-width:767px){
  body .elementor .doors > .elementor-container{gap:30px}
  body .elementor .doors .door{flex:none;width:100%;margin-top:0}
  body .elementor .doors .elementor-column + .elementor-column{margin-top:0}
}

/* styles on the tattoo page */
@media (min-width:768px){
  body .elementor .styles > .elementor-container{flex-wrap:nowrap;gap:clamp(14px,2.2vw,34px)}
  body .elementor .styles .elementor-column + .elementor-column > .elementor-widget-wrap{padding-left:0}
}

/* reviews: notes taped to the sheet */
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:clamp(30px,3.6vw,54px);margin-top:clamp(18px,2.4vw,32px)}
.review{position:relative;margin:0;padding:clamp(28px,3vw,42px) clamp(22px,2.6vw,36px) clamp(22px,2.4vw,32px);background:#F0E2C0 url(../img/bg/paper-cream.webp) 0 0/var(--tile);color:var(--ink);box-shadow:var(--lift);transform:rotate(-1deg)}
.review:nth-child(2n){transform:rotate(1.1deg) translateY(10px)}
.review:nth-child(3n){transform:rotate(-.5deg) translateY(-6px)}
.review::before{content:"";position:absolute;left:50%;top:-15px;width:130px;aspect-ratio:3.6;margin-left:-65px;background:url(../img/tape.webp) center/100% 100% no-repeat;transform:rotate(-2deg)}
.review blockquote{margin:0 0 1em;font:500 clamp(1.14rem,.7vw + 1rem,1.34rem)/1.46 var(--f-text);color:var(--ink)}
.review blockquote p{margin:0}
.review figcaption{display:flex;flex-wrap:wrap;gap:.1em .6em;align-items:baseline;font:400 1.02rem/1.2 var(--f-text);color:var(--ink-3)}
.review figcaption b{font:400 clamp(1.8rem,2.2vw,2.2rem)/1 var(--f-script);color:var(--red)}
.reviews-note{margin:clamp(34px,4vw,54px) 0 0;font:700 1.14rem/1.3 var(--f-label);letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}

/* map: a print taped up, until someone asks for the real thing */
.map{position:relative;min-height:clamp(320px,34vw,460px);padding:12px;background:var(--print);box-shadow:var(--lift);transform:rotate(1deg)}
.map::before{content:"";position:absolute;z-index:2;left:50%;top:-16px;width:150px;aspect-ratio:3.6;margin-left:-75px;background:url(../img/tape.webp) center/100% 100% no-repeat;transform:rotate(-2deg)}
.map-face{position:absolute;inset:12px;display:grid;align-content:center;justify-items:center;gap:1em;padding:24px;text-align:center;background:#E4CFA4 url(../img/bg/paper-tan.webp) 0 0/var(--tile);color:var(--ink);--fg:var(--ink);--btn-bg:var(--red);--btn-fg:var(--bone);--btn-sh:var(--ink)}
.map-address{margin:0;font:400 clamp(1.5rem,2.6vw,2.4rem)/1.08 var(--f-display);color:var(--ink);max-width:16ch}
.map-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:0}
.map iframe{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);border:0;filter:sepia(.32) contrast(.96)}
body .elementor .map-band{padding:clamp(60px,7vw,110px) var(--gutter) var(--pad)}
body .elementor .map-band > .elementor-container{max-width:var(--wrap)}

/* visit */
body .elementor .visit > .elementor-container{align-items:center}
body .elementor .visit .display .elementor-heading-title{font-size:clamp(1.9rem,3.5vw,3.5rem)}

/* gallery */
.gallery-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(26px,3.4vw,44px)}
.chip{appearance:none;min-height:44px;padding:.3em .1em;margin-right:1.1em;border:0;border-bottom:2px solid transparent;background:none;color:var(--fg3,var(--ink-3));font:700 1.08rem/1.1 var(--f-label);letter-spacing:.09em;text-transform:uppercase;cursor:pointer;transition:.2s}
.chip:hover{color:var(--fg,var(--ink))}
.chip.is-on{color:var(--fg,var(--ink));border-bottom-color:var(--acc,var(--red))}
.gallery-grid{columns:4 240px;column-gap:clamp(14px,2vw,28px);list-style:none;margin:0;padding:0}
.piece{--r:-1deg;break-inside:avoid;margin:0 0 clamp(16px,2.2vw,30px);padding:6px 3px}
.piece:nth-child(3n+1){--r:-1.2deg}
.piece:nth-child(3n+2){--r:.9deg}
.piece:nth-child(3n){--r:-.5deg}
.piece[hidden]{display:none}
.piece a{position:relative;display:block;padding:8px 8px 0;background:var(--print);color:var(--ink);text-decoration:none;box-shadow:var(--lift);transform:rotate(var(--r));transition:transform .4s var(--ease)}
.piece img{display:block;width:100%;height:auto}
.piece-cap{display:block;padding:.34em .2em .46em;font:400 1.6rem/1 var(--f-script);text-align:center;color:var(--ink)}
.piece-cap small{display:block;margin-top:.2em;font:italic 400 .94rem/1.1 var(--f-text);color:var(--ink-3)}
.piece a:hover,.piece a:focus-visible{transform:rotate(0deg) scale(1.03);z-index:2}
body .elementor .more-work .elementor-widget-button{margin-top:clamp(20px,3vw,36px)}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:150;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(23,14,8,.95);color:var(--bone)}
.lightbox::backdrop{background:rgba(23,14,8,.9)}
.lightbox-fig{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:10px;height:100%;margin:0;padding:clamp(14px,3vw,36px) clamp(58px,8vw,110px)}
.lightbox-fig img{justify-self:center;align-self:center;max-width:100%;max-height:100%;object-fit:contain;border:10px solid var(--print)}
.lightbox-fig figcaption{text-align:center;font:400 2rem/1.1 var(--f-script);color:var(--bone)}
.lightbox button{position:absolute;display:grid;place-items:center;width:52px;height:52px;border:0;background:rgba(251,239,213,.12);color:var(--bone);cursor:pointer}
.lightbox button:hover{background:var(--red);color:var(--bone)}
.lb-close{right:10px;top:10px}
.lb-prev{left:6px;top:50%;margin-top:-26px}
.lb-next{right:6px;top:50%;margin-top:-26px}

/* before and after */
.ba{--cut:50%;position:relative;margin:0;overflow:hidden;background:var(--print);border:12px solid var(--print);box-shadow:var(--lift);touch-action:pan-y}
.ba img{display:block;width:100%;aspect-ratio:1/1.15;object-fit:cover}
.ba-before{position:absolute;inset:0;height:100%;clip-path:inset(0 calc(100% - var(--cut)) 0 0)}
.ba::after{content:"";position:absolute;left:var(--cut);top:0;bottom:0;width:2px;margin-left:-1px;background:var(--red);pointer-events:none}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.ba-range:focus-visible + .ba-tag{outline:2px solid var(--red)}
.ba-tag{position:absolute;bottom:10px;padding:.14em .6em;background:var(--print);color:var(--ink);font:700 1rem/1.3 var(--f-label);letter-spacing:.1em;text-transform:uppercase;pointer-events:none}
.ba-tag-b{left:10px}.ba-tag-a{right:10px}

/* the lists on service pages */
.menu{margin:0;display:grid;gap:.1em}
.menu dt{margin-top:.5em;padding-top:.6em;border-top:1px solid var(--line-c);font:400 clamp(1.4rem,2.1vw,1.95rem)/1.06 var(--f-display);color:var(--fg)}
.menu dd{margin:.2em 0 .4em;font-size:var(--t-body);color:var(--fg2)}
body .elementor .menu-w{margin-bottom:1.2em}
body .elementor .style-img img{aspect-ratio:1;object-fit:cover}
body .elementor .style-title .elementor-heading-title{margin:.7em 0 .24em;font:400 clamp(1.5rem,2.3vw,2.2rem)/1.06 var(--f-display);color:var(--fg)}
body .elementor .style-text{color:var(--fg2)}
body .elementor .cover > .elementor-container,body .elementor .pmu > .elementor-container,body .elementor .pierce > .elementor-container,body .elementor .story > .elementor-container,body .elementor .name > .elementor-container{align-items:center}

/* aftercare */
body .elementor .care-title .elementor-heading-title{margin-bottom:.5em;font:400 clamp(1.6rem,2.5vw,2.4rem)/1.04 var(--f-display);color:var(--fg)}
.care-list ul{list-style:none;margin:0;padding:0}
.care-list li{padding:.5em 0 .5em 1.2em;border-top:1px solid var(--line-c);position:relative;line-height:1.36;color:var(--fg2)}
.care-list li::before{content:"";position:absolute;left:0;top:1.02em;width:8px;height:8px;border-radius:50%;background:var(--acc)}

/* booking and forms */
body .elementor .form-title .elementor-heading-title{margin-bottom:.6em;font:400 clamp(1.6rem,2.5vw,2.4rem)/1.04 var(--f-display);color:var(--fg)}
.book-with{margin:0 0 1em;font:700 1.14rem/1.2 var(--f-label);letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.book-or{display:flex;flex-wrap:wrap;gap:12px;margin:1.4em 0 0}
.form-fallback-text{font:400 var(--t-lead)/1.4 var(--f-text);color:var(--fg2)}
.form-fallback-actions{display:flex;flex-wrap:wrap;gap:12px}
body .elementor .booking-side .form-title + .care-list + .form-title{margin-top:1.6em}

/* the artist's own page */
.artist-hero-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,5vw,70px);align-items:center;width:min(100%,var(--wrap));margin-inline:auto}
.artist-portrait{position:relative;margin:0;padding:12px 12px 46px;background:var(--print);box-shadow:var(--lift);transform:rotate(-2deg)}
.artist-portrait::before{content:"";position:absolute;z-index:2;left:50%;top:-16px;width:34%;aspect-ratio:3.6;margin-left:-17%;background:url(../img/tape.webp) center/100% 100% no-repeat;transform:rotate(2.4deg)}
.artist-portrait img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.artist-hero .artist-actions{margin-top:1.2em}
.band{position:relative;isolation:isolate;padding:var(--pad) 0}
.band-title{margin:0 0 .6em;font:400 var(--t-display)/1.04 var(--f-display);color:var(--fg);text-shadow:.04em .045em 0 var(--shade,transparent)}
@media (max-width:767px){.artist-hero-in{grid-template-columns:1fr}.artist-portrait{max-width:320px}}

/* anything that lifts on hover keeps its own layer, so a hover can't make the browser repaint the torn edges around it */
body .elementor .door > .elementor-widget-wrap,.wall-piece,.artist-photo,.piece a{will-change:transform}