/* Vanity Ink v2: Artists (after pages.css and v2.css).
   Order (10-07; headings from the 10-13 copy): hero · Meet our tattoo artists (two equal cards, Home's pattern) · How to
   choose your tattoo artist (a story row with a piece from the studio) · the closing strip. Both body sections share
   the page's one river. */

#team .sec-head{margin-bottom:56px}

/* ===== The artists: two equal cards (portrait, role, name, lines, specialties, a strip of three pieces, link).
   Elementor: 2-column container; per card an Image, Heading, Text Editor, Icon List (specialties), a 3-column inner
   container of Images (or a Basic Gallery), a link. ===== */
.artist-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;align-items:start}
.artist-card>.shot{display:block;aspect-ratio:4/5}
.artist-card .pool{padding-top:32px}
.artist-card .role{display:block;font:500 11px/1.7 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--purple-light)}   /* home.css .role, which this page does not load */
.artist-card h3{font-size:clamp(30px,2.8vw,40px);line-height:1.1;margin:12px 0 16px}
.artist-card p{max-width:540px;text-wrap:pretty}
/* specialties: a quiet run of labels, spaced (no separators, so a wrapped line never starts with one) */
.spec-list{display:flex;flex-wrap:wrap;gap:8px 22px;margin:22px 0 0}
.spec-list li{font:500 11px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--text)}
/* three pieces by that artist */
.work-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:28px}
.work-strip .shot,.work-strip .ph{display:block;aspect-ratio:4/5}
.work-strip .ph{padding:10px}
.artist-card .link-row{margin-top:24px}
@media (max-width:767px){.artist-pair{grid-template-columns:1fr;gap:72px}}

/* How to choose: words left, the photo right (the shared story row) */
#choose{padding-top:var(--section-y)}
#choose .story .shot img{object-position:50% 40%}

/* the strip's Instagram link under the paragraph (10-13) */
.strip .link-row{margin-top:20px}

/* Photo cards (10-07, Home's idea B): the name over the bottom of the photo, the styles and a link under it.
   Elementor: 2-column container, Image Box or a Loop item per artist. */
.pcard-row{display:grid;grid-template-columns:repeat(2,minmax(0,380px));gap:40px;justify-content:start}
.pcard{display:flex;flex-direction:column;scroll-margin-top:120px}
.pcard-img{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--line-soft)}
.pcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.pcard:hover .pcard-img img{transform:scale(1.03)}
.pcard-cap{position:relative;margin:-96px 0 18px;padding:20px 22px 0;background:linear-gradient(180deg,transparent,rgba(6,6,7,.92) 45%)}
.pcard .role{display:block;font:500 11px/1.7 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--purple-light);margin-bottom:10px}
.pcard h3{font-size:28px;line-height:1.1;margin:0 0 12px}
.pcard-p{display:block;font-size:var(--body-sm);color:var(--text-muted);margin-bottom:18px;text-wrap:pretty}
.acard-more{display:inline-flex;align-items:center;gap:8px;margin-top:auto;font:500 11px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--text)}
.acard-more svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4}
a:hover .acard-more{color:var(--purple-light)}
@media (max-width:600px){.pcard-row{grid-template-columns:none}}

/* Artist cards (10-13): the caption shares the photo's grid cell, pinned to its bottom and growing upward, and the dark fade
   sits on the photo itself, so the fade always reaches the photo's bottom edge and a two-line role never pushes the name
   past it (the old 96px overlap left a strip of bare photo under a short caption). Elementor: the image as the container's
   background, the caption as its bottom-aligned content, a gradient overlay. */
.pcard{display:grid;grid-template-columns:minmax(0,1fr);align-content:start}
.pcard-img,.pcard-cap{grid-row:1;grid-column:1}
.pcard-img::after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(180deg,transparent,rgba(6,6,7,.92) 70%);pointer-events:none}
.pcard-cap{align-self:end;margin:0;padding:20px 22px 18px;background:none}
.pcard-cap h3{margin:0}
.pcard-p{margin-top:18px}

/* Artist cards with an Instagram link (10-13, as Home's): the card is a plain container (links can't nest); the photo
   links to the artist, the caption over it lets clicks through, then the lines, the Instagram link (glyph + handle) and
   the artist's link. Elementor: Image (link), Heading, Text Editor, Icon List, a link. */
.pcard-cap{pointer-events:none}
.pcard-p{margin:18px 0 4px}
.pcard .ig-link{justify-self:start}
.pcard .acard-more{justify-self:start;margin-top:12px}
.acard-more:hover{color:var(--purple-light)}

/* Artist cards as a carousel on phones (10-14, Tannis): one card and the edge of the next, swipe or drag (site.js), the
   row running to the screen edges. Elementor: Loop Carousel / Nested Carousel, 1.2 slides on Mobile. */
@media (max-width:767px){
  .pcard-row{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;margin-inline:calc(0px - var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
  .pcard-row::-webkit-scrollbar{display:none}
  .pcard-row>*{scroll-snap-align:start}
}