/* ==========================================================================
   BALU INK TATTOOS — demo site
   pages.css — page-specific layers (work gallery, lightbox, studio, booking)
   ========================================================================== */

/* ---------------------------------------------------------------- work page */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(24px,3vw,38px)}
.chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:10px 15px;border:1px solid var(--line-2);border-radius:2px;color:var(--bone-2);
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.chip:hover{border-color:var(--bone);color:var(--bone)}
.chip[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:var(--ink)}
.gal{display:grid;gap:clamp(12px,1.5vw,20px)}
@media(min-width:600px){.gal{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.gal{grid-template-columns:repeat(3,1fr)}}
.gal[data-empty="true"]::after{content:"No pieces in this filter yet — message us for more.";
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--ash);grid-column:1/-1;padding:30px 0}
.gal figure{position:relative;overflow:hidden;background:var(--ink-2);border:1px solid var(--line)}
.gal img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .6s var(--ease)}
.gal figure:hover img{transform:scale(1.04)}
.gal figcaption{position:absolute;inset:auto 0 0 0;padding:32px 15px 14px;display:grid;gap:4px;
  background:linear-gradient(180deg,rgba(8,9,10,0),rgba(8,9,10,.9))}
.gal .cap-n{font-family:var(--slab);font-size:15px}
.gal .cap-s{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.gal .zoom{position:absolute;top:12px;right:12px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;padding:7px 10px;background:rgba(8,9,10,.72);
  border:1px solid var(--line-2);color:var(--bone);opacity:0;transition:opacity .25s var(--ease)}
.gal figure:hover .zoom,.gal figure:focus-within .zoom{opacity:1}
.gal .stretched{position:absolute;inset:0;z-index:1}

/* ---------------------------------------------------------------- lightbox */
.lb{position:fixed;inset:0;z-index:60;display:none;background:rgba(5,5,6,.96)}
.lb[data-open="true"]{display:grid;grid-template-rows:1fr auto}
.lb__stage{position:relative;display:grid;place-items:center;padding:clamp(14px,3vw,40px);
  min-height:0}
.lb__img{max-width:min(1080px,100%);max-height:100%;width:auto;height:auto;object-fit:contain;
  border:1px solid var(--line-2);background:var(--ink-2)}
.lb__bar{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;justify-content:space-between;
  padding:14px clamp(14px,3vw,40px) 20px;border-top:1px solid var(--line)}
.lb__cap{display:grid;gap:5px;min-width:0}
.lb__cap .cap-n{font-family:var(--slab);font-size:17px}
.lb__cap .cap-t{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);
  max-width:70ch}
.lb__nav{display:flex;gap:8px;flex:none}
.lb__btn{width:46px;height:46px;min-height:46px;display:grid;place-items:center;border:1px solid var(--line-2);
  border-radius:2px;transition:border-color .2s,background-color .2s}
.lb__btn:hover{border-color:var(--green);background:rgba(92,212,58,.1)}
.lb__btn svg{width:18px;height:18px}
.lb__close{position:absolute;top:14px;right:clamp(14px,3vw,40px);width:46px;height:46px;
  display:grid;place-items:center;border:1px solid var(--line-2);background:rgba(8,9,10,.7)}
.lb__close:hover{border-color:var(--green)}
.lb__count{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--ash)}

/* ---------------------------------------------------------------- studio page */
.artist{display:grid;gap:clamp(26px,4vw,52px)}
@media(min-width:900px){.artist{grid-template-columns:.92fr 1.08fr;align-items:center}}
.artist__media{position:relative}
.artist__media img.artist__photo{width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--line-2)}
/* NOTE: the selector must out-specify the .artist__media img rule above (0,1,1) — a bare
   .artist__badge (0,1,0) loses and the badge renders full-width (the catch-all img trap) */
img.artist__badge{position:absolute;bottom:-26px;right:-14px;width:104px;height:104px;
  aspect-ratio:1/1;object-fit:cover;border-radius:50%;border:1px solid var(--line-2);background:var(--ink)}
@media(max-width:600px){img.artist__badge{width:84px;height:84px;bottom:-18px;right:6px}}
.aftercare{display:grid;gap:0;border-top:1px solid var(--line);counter-reset:ac}
@media(min-width:700px){.aftercare{grid-template-columns:1fr 1fr;column-gap:clamp(24px,4vw,56px)}}
.ac{padding:20px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:38px 1fr;gap:14px}
.ac__n{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--green);padding-top:4px}
.ac h3{font-family:var(--slab);font-size:17px;margin-bottom:7px;font-weight:400}
.ac p{color:var(--bone-2);font-size:15.5px;line-height:1.6}

/* ---------------------------------------------------------------- booking page */
.steps{display:grid;gap:0;border-top:1px solid var(--line)}
@media(min-width:820px){.steps{grid-template-columns:repeat(3,1fr);column-gap:clamp(24px,3.4vw,48px)}}
.step{padding:26px 0;border-bottom:1px solid var(--line);display:grid;gap:12px;align-content:start}
.step__n{font-family:var(--slab);font-size:38px;line-height:1;color:var(--green)}
.step h3{font-family:var(--slab);font-size:20px;font-weight:400}
.step p{color:var(--bone-2);font-size:16px}
.step__list{margin-top:6px;display:grid;gap:8px;font-size:15px;color:var(--bone-2)}
.step__list li{padding-left:16px;position:relative}
.step__list li::before{content:"—";position:absolute;left:0;color:var(--ash-2)}

.faq{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{display:flex;gap:16px;align-items:baseline;justify-content:space-between;
  padding:20px 0;font-family:var(--slab);font-size:clamp(17px,1.9vw,21px);font-weight:400;cursor:pointer;
  list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-family:var(--mono);color:var(--green);font-size:17px;flex:none}
.qa[open] summary::after{content:"–"}
.qa[open] summary{color:var(--green)}
.qa__body{padding:0 0 24px;max-width:74ch;color:var(--bone-2);font-size:16.5px;line-height:1.62}
.qa__body p+p{margin-top:12px}

.hours{border-top:1px solid var(--line);max-width:520px}
.hours li{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid var(--line);
  font-size:16px}
.hours .d{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);
  padding-top:3px}
.map{display:block;border:1px solid var(--line-2);background:var(--ink-2);padding:22px;
  transition:border-color .25s var(--ease),background-color .25s var(--ease)}
.map:hover{border-color:var(--green);background:#111517}
.map__row{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.map h3{font-family:var(--slab);font-size:19px;font-weight:400}
.map p{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);margin-top:8px}
.map__go{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}

.note{border:1px solid var(--line);border-left:2px solid var(--green);padding:18px 20px;background:var(--ink-1)}
.note p{font-size:15.5px;color:var(--bone-2);max-width:68ch}
.note strong{color:var(--bone)}