/* Plush Beauty Bar — "Fresh & Funky" pink + teal boutique system */
:root{
  /* brand: magenta-pink star + teal funk accent, on cream, with plum depth */
  --magenta:#EF53D0; --teal:#008BA0;
  --rose:#EF53D0;   /* primary = brand magenta */
  --pink:#F79ED9;   /* soft secondary pink */
  --coral:#008BA0;  /* accent = brand teal */
  --cream:#FFF6FB; --plum:#2B1622; --gold:#F4C76B;
  --magenta-ink:#B0186F; /* AA-safe magenta for text on light surfaces */
  --teal-text:#3FBFD4;   /* AA-safe teal on the dark canvas: 5.2:1 vs the brightest bloom */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* DEPTH: film grain (scrolls) + near blooms (scroll) + far blooms and vignette (fixed).
   The split attachment is the point: two planes moving at different rates read as depth,
   where one fixed wash reads as a flat sheet of colour. */
body{font-family:'Space Grotesk',system-ui,sans-serif;color:var(--cream);overflow-x:hidden;-webkit-font-smoothing:antialiased;
  background-color:var(--plum);
  background-image:
    /* 1. grain, topmost, travels with the content */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    /* 2. near blooms, also travelling, so they pass the fixed layer as you scroll */
    radial-gradient(30rem 26rem at 84% 12%, rgba(247,158,217,.09), transparent 72%),
    radial-gradient(26rem 24rem at 8% 52%, rgba(0,139,160,.10), transparent 72%),
    radial-gradient(34rem 28rem at 70% 86%, rgba(239,83,208,.09), transparent 72%),
    /* 3. vignette, fixed, keeps the edges of the viewport heavier than the middle */
    radial-gradient(130% 95% at 50% 42%, transparent 38%, rgba(12,5,10,.66) 100%),
    /* 4. far blooms, fixed */
    radial-gradient(42rem 42rem at 12% 6%, rgba(239,83,208,.17), transparent 70%),
    radial-gradient(40rem 40rem at 92% 22%, rgba(0,139,160,.15), transparent 70%),
    radial-gradient(44rem 40rem at 45% 68%, rgba(0,139,160,.10), transparent 70%),
    radial-gradient(48rem 44rem at 58% 99%, rgba(239,83,208,.15), transparent 70%);
  background-repeat:repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
  background-size:160px 160px,auto,auto,auto,auto,auto,auto,auto,auto;
  background-attachment:scroll,scroll,scroll,scroll,fixed,fixed,fixed,fixed,fixed;
  background-blend-mode:soft-light,normal,normal,normal,normal,normal,normal,normal,normal}

/* DEPTH: let the fixed canvas glow show through the dark sections */
.page-hero,.artists,.reviews,.visit,.cta-band,.bio,.menu-sec,.more-artists,.gallery-sec,.contact-rows,footer{background-color:transparent}
.display{font-family:'Fraunces',Georgia,serif}
h1,h2,h3{line-height:.92;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
/* height:auto is load-bearing. The width/height attributes on every <img> (needed so the
   browser can reserve space and avoid layout shift) also act as presentational size hints.
   Any fluid image with width:100% and no height:auto therefore keeps the ATTRIBUTE height as
   a fixed height and object-fit:fill squashes it. That is what distorted the client-work
   masonry. Rules that deliberately set a height (the cover-cropped frames) out-specify this. */
img{display:block;max-width:100%;height:auto}
.wrap{max-width:1280px;margin:0 auto;padding:0 28px}

/* HEADER */
header{position:sticky;top:0;z-index:100;background:var(--plum);border-bottom:3px solid var(--plum)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.wordmark{font-family:'Fraunces',serif;font-weight:900;font-size:1.55rem;color:var(--cream);letter-spacing:-.03em;line-height:1;display:flex;align-items:center;gap:.55rem}
.wordmark .mark{height:40px;width:auto;flex:none}
.wordmark .dot{color:var(--magenta)}
.navlinks{display:flex;gap:34px;align-items:center}
.navlinks a{color:var(--cream);font-weight:500;font-size:.92rem;text-transform:uppercase;letter-spacing:.12em;position:relative;transition:color .2s}
.navlinks a:not(.btn):after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--coral);transition:width .25s}
.navlinks a:not(.btn):hover{color:var(--pink)}
.navlinks a:not(.btn):hover:after{width:100%}
.navlinks a.active:not(.btn):after{width:100%}
.btn{background:var(--rose);color:#fff!important;padding:12px 22px;border-radius:999px;font-weight:700;letter-spacing:.06em;transition:transform .18s,background .18s;border:2px solid var(--rose)}
.btn:hover{background:var(--coral);border-color:var(--coral);transform:translateY(-2px) rotate(-1.5deg)}
.navtoggle{display:none;background:none;border:none;color:var(--cream);font-size:1.6rem;cursor:pointer}

/* BUTTONS */
.btn-dark{background:var(--plum);color:var(--cream)!important;border:2px solid var(--plum);padding:15px 30px;border-radius:999px;font-weight:700;letter-spacing:.06em;transition:transform .18s,background .18s;font-size:1rem;display:inline-block}
.btn-dark:hover{background:var(--rose);border-color:var(--rose);transform:translateY(-2px) rotate(1.5deg)}
.btn-out{border:2px solid var(--plum);color:var(--plum);padding:15px 28px;border-radius:999px;font-weight:700;letter-spacing:.06em;transition:.18s;display:inline-block}
.btn-out:hover{background:var(--plum);color:var(--cream)}

/* HERO (home) */
.hero{position:relative;padding:72px 0 90px;
  background-color:var(--cream);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E"),
    radial-gradient(46rem 30rem at 88% 8%, rgba(239,83,208,.10), transparent 70%),
    radial-gradient(40rem 26rem at 4% 96%, rgba(0,139,160,.09), transparent 70%);
  background-repeat:repeat,no-repeat,no-repeat;
  background-size:160px 160px,auto,auto;
  background-blend-mode:soft-light,normal,normal}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;font-weight:700;text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;color:var(--magenta-ink);margin-bottom:22px}
.hero-eyebrow .pill{background:var(--plum);color:var(--cream);padding:5px 12px;border-radius:999px;letter-spacing:.1em}
.hero h1{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(3.4rem,8.2vw,7.3rem);color:var(--plum);margin-bottom:26px}
.hero h1 .out{color:transparent;-webkit-text-stroke:2px var(--rose);font-style:italic}
.hero h1 .fill{color:var(--rose)}
.hero p.lede{font-size:1.18rem;max-width:30ch;line-height:1.5;color:var(--plum);margin-bottom:32px;font-weight:400}
.hero-cta{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.hero-photo{position:relative}
.hero-photo .main{border:5px solid var(--plum);border-radius:8px;overflow:hidden;box-shadow:14px 14px 0 var(--pink);transform:rotate(-1.5deg);transition:transform .4s}
.hero-photo .main:hover{transform:rotate(0)}
.hero-photo .main img{width:100%;height:clamp(300px,33vw,460px);object-fit:cover;object-position:center 46%}
.sticker{position:absolute;display:grid;place-items:center;text-align:center;font-family:'Fraunces',serif;font-weight:900;border:3px solid var(--plum);border-radius:50%;z-index:5}
.sticker-est{width:122px;height:122px;background:var(--gold);color:var(--plum);top:-34px;left:-34px;font-size:.95rem;line-height:1.05;padding:10px;animation:wiggle 4s ease-in-out infinite}
.sticker-est small{display:block;font-family:'Space Grotesk';font-weight:700;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;margin-top:4px}
.sticker-appt{background:var(--rose);color:#fff;border-radius:999px;bottom:24px;right:-26px;font-size:.82rem;font-weight:700;font-family:'Space Grotesk';text-transform:uppercase;letter-spacing:.1em;padding:13px 20px;transform:rotate(6deg)}
@keyframes wiggle{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}

/* PAGE HERO (inner pages) */
.page-hero{background:var(--plum);color:var(--cream);padding:64px 0 70px;position:relative;overflow:hidden}
.page-hero .eyebrow{font-weight:700;text-transform:uppercase;letter-spacing:.2em;font-size:.78rem;color:var(--coral);margin-bottom:18px;display:block}
.page-hero h1{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(2.8rem,7vw,5.6rem);color:var(--cream)}
.page-hero h1 em{font-style:italic;color:var(--pink)}
.page-hero p{font-size:1.15rem;max-width:46ch;margin-top:20px;line-height:1.5;color:rgba(252,239,242,.85)}

/* REVEAL */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* SERVICES (home) */
.services{background:var(--plum);color:var(--cream);padding:96px 0;border-top:3px solid var(--plum)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:54px;flex-wrap:wrap}
.sec-head h2{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(2.6rem,6vw,5rem);color:var(--cream)}
.sec-head h2 em{color:var(--pink);font-style:italic}
.sec-head .tag{font-size:.82rem;text-transform:uppercase;letter-spacing:.2em;color:var(--coral);font-weight:700;max-width:24ch;text-align:right}
.svc{display:grid;grid-template-columns:90px 1.2fr 1fr;gap:36px;align-items:center;padding:42px 0;border-top:2px solid rgba(252,239,242,.2);transition:padding-left .3s}
.svc:hover{padding-left:14px}
.svc:last-child{border-bottom:2px solid rgba(252,239,242,.2)}
.svc .num{font-family:'Fraunces',serif;font-weight:900;font-size:2.6rem;color:var(--coral)}
.svc-main h3{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(2rem,4vw,3.2rem);color:var(--cream);margin-bottom:8px;transition:color .25s}
.svc:hover .svc-main h3{color:var(--pink)}
.svc-main .with{color:var(--teal-text);font-weight:700;letter-spacing:.04em;margin-bottom:14px;font-size:1.02rem}
.tag-list{list-style:none;display:flex;flex-wrap:wrap;gap:8px 10px}
.tag-list li{font-size:.88rem;border:1.5px solid rgba(252,239,242,.35);padding:6px 13px;border-radius:999px;color:var(--cream);transition:.2s}
.svc:hover .tag-list li{border-color:var(--pink)}
.svc-side .booknote{font-size:1.05rem;font-weight:500;margin-bottom:14px;line-height:1.4;color:var(--cream)}
.svc-side .booknote strong{color:var(--coral)}
.svc-img{width:100%;height:170px;object-fit:cover;border:4px solid var(--cream);border-radius:6px;transform:rotate(2deg);transition:transform .35s;box-shadow:8px 8px 0 var(--rose)}
.svc-img:hover{transform:rotate(0) scale(1.02)}

/* ARTIST ROSTER (home) */
.artists{background:var(--plum);color:var(--cream);padding:96px 0;border-top:3px solid var(--plum)}
.artists .sec-head h2{color:var(--cream)}
.artists .sec-head h2 em{color:var(--pink);font-style:italic}
.roster{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));gap:30px}
.artist-card{background:var(--cream);color:var(--plum);border:4px solid var(--plum);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;box-shadow:10px 10px 0 var(--rose);transition:transform .3s,box-shadow .3s}
.artist-card:nth-child(2){box-shadow:10px 10px 0 var(--coral)}
.artist-card:nth-child(3){box-shadow:10px 10px 0 var(--gold)}
.artist-card:nth-child(4){box-shadow:10px 10px 0 var(--pink)}
.artist-card:hover{transform:translateY(-6px)}
.artist-card .ph{height:280px;overflow:hidden;border-bottom:4px solid var(--plum)}
.artist-card .ph img{width:100%;height:100%;object-fit:cover;object-position:center 22%;transition:transform .45s}
.artist-card:hover .ph img{transform:scale(1.05)}
.artist-card .body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.artist-card .role{font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;font-weight:700;color:var(--rose);margin-bottom:8px}
.artist-card h3{font-family:'Fraunces',serif;font-weight:900;font-size:1.85rem;color:var(--plum);line-height:1;transition:color .2s}
.artist-card:hover h3{color:var(--rose)}
.artist-card .biz{font-size:.95rem;font-weight:500;color:var(--plum);opacity:.7;margin-top:6px}
.artist-card .tag-list{margin:16px 0 20px}
.artist-card .tag-list li{border-color:rgba(43,22,34,.35);color:var(--plum);font-size:.82rem;padding:6px 12px}
.artist-card .card-cta{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:2px solid rgba(43,22,34,.12);padding-top:16px}
.artist-card .card-cta .book{font-weight:700;color:var(--rose);font-size:.95rem;transition:transform .2s}
.artist-card:hover .card-cta .book{transform:translateX(4px)}
.artist-card .card-cta .more{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;font-weight:700;color:var(--plum);opacity:.55}

/* BIO SPLIT (lashes/nails inner) */
.bio{padding:90px 0;background:var(--plum);color:var(--cream)}
.bio-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:54px;align-items:center}
.bio.reverse .bio-grid{grid-template-columns:1.15fr .85fr}
.bio.reverse .bio-photo{order:2}
.bio-photo{position:relative}
.bio-photo .frame{border:5px solid var(--plum);border-radius:8px;overflow:hidden;box-shadow:14px 14px 0 var(--pink);transform:rotate(-1.5deg);transition:transform .4s}
.bio.reverse .bio-photo .frame{box-shadow:-14px 14px 0 var(--coral);transform:rotate(1.5deg)}
.bio-photo .frame:hover{transform:rotate(0)}
.bio-photo img{width:100%;height:480px;object-fit:cover;object-position:center 25%}
.bio-text .eyebrow{font-weight:700;text-transform:uppercase;letter-spacing:.2em;font-size:.78rem;color:var(--rose);margin-bottom:14px;display:block}
.bio-text h2{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(2.2rem,5vw,3.8rem);color:var(--cream);margin-bottom:8px}
.bio-text .with{color:var(--teal-text);font-weight:700;font-size:1.05rem;margin-bottom:20px}
.bio-text p{font-size:1.08rem;line-height:1.65;margin-bottom:16px;max-width:48ch}
.bio-text .tag-list{margin:22px 0 28px}
.bio-text .tag-list li{border-color:rgba(252,239,242,.4);color:var(--cream)}
.bio-text .tag-list li:hover{background:var(--magenta);border-color:var(--magenta);color:#fff}

/* SERVICE MENU (artist pages) */
.menu-sec{background:var(--plum);color:var(--cream);padding:84px 0;border-top:3px solid var(--plum)}
.menu-sec .sec-head h2{color:var(--cream)}
.menu-sec .sec-head h2 em{color:var(--rose);font-style:italic}
.menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;margin-top:8px}
.menu-col{background:#fff;border:3px solid var(--plum);border-radius:10px;padding:26px 26px 22px;box-shadow:8px 8px 0 var(--pink)}
.menu-col:nth-child(2){box-shadow:8px 8px 0 var(--coral)}
.menu-col:nth-child(3){box-shadow:8px 8px 0 var(--gold)}
.menu-col h3{font-family:'Fraunces',serif;font-weight:900;font-size:1.5rem;color:var(--plum);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.menu-col h3:before{content:"✦";color:var(--rose);font-size:1rem}
.menu-col ul{list-style:none}
.menu-col li{font-size:1rem;padding:8px 0;border-bottom:1px solid rgba(43,22,34,.12);color:var(--plum)}
.menu-col li:last-child{border-bottom:none}
.menu-note{margin-top:30px;font-size:.95rem;color:rgba(252,239,242,.78)}

/* MORE ARTISTS (cross-nav on artist pages) */
.more-artists{background:var(--plum);color:var(--cream);padding:74px 0;border-top:3px solid var(--plum)}
.more-artists .sec-head{margin-bottom:30px}
.more-artists .sec-head h2{color:var(--cream)}
.more-artists .sec-head h2 em{color:var(--rose);font-style:italic}
.mini-roster{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.mini-card{display:flex;align-items:center;gap:15px;background:#fff;border:3px solid var(--plum);border-radius:12px;padding:14px;box-shadow:7px 7px 0 var(--pink);transition:transform .25s,box-shadow .25s}
.mini-card:nth-child(2){box-shadow:7px 7px 0 var(--teal)}
.mini-card:nth-child(3){box-shadow:7px 7px 0 var(--gold)}
.mini-card:hover{transform:translateY(-5px)}
.mini-card img{width:72px;height:72px;border-radius:9px;object-fit:cover;object-position:center 25%;border:2px solid var(--plum);flex:none}
.mini-card .mc-text{display:flex;flex-direction:column}
.mini-card .mc-name{font-family:'Fraunces',serif;font-weight:900;font-size:1.18rem;color:var(--plum);line-height:1}
.mini-card:hover .mc-name{color:var(--rose)}
.mini-card .mc-role{font-size:.7rem;text-transform:uppercase;letter-spacing:.13em;color:var(--magenta);font-weight:700;margin-top:6px}
.mini-card .mc-go{margin-left:auto;color:var(--magenta);font-weight:700;font-size:1.1rem;flex:none}

/* GALLERY */
.gallery-sec{background:var(--plum);padding:90px 0}
.gallery-sec .sec-head h2{color:var(--cream)}
/* Artist-page "Recent work" teaser. These are phone selfies at roughly 9:16, so at natural
   aspect in a masonry each one ran 500px+ tall and the section went on forever. A uniform 4:5
   tile keeps it compact and tidy; the full-aspect versions live on /gallery/ and in its lightbox. */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.gallery img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 32%;
  border:3px solid var(--cream);border-radius:6px;transition:transform .35s}
.gallery img:nth-child(even){transform:rotate(1.4deg)}
.gallery img:nth-child(odd){transform:rotate(-1.4deg)}
@media (hover:hover) and (pointer:fine){
  .gallery img:hover{transform:rotate(0) scale(1.03)}
}

/* ===== GALLERY PAGE: filters, masonry, lightbox ===== */
:root{
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  /* semantic z scale, no magic 9999s */
  --z-sticky:100; --z-lightbox:400;
}

/* wide band photo under the page hero */
.band{padding:0 0 8px}
.band .frame{border:5px solid var(--plum);border-radius:10px;overflow:hidden;box-shadow:16px 16px 0 var(--coral);transform:rotate(-.8deg);transition:transform .45s var(--ease-out)}
.band .frame:hover{transform:rotate(0)}
.band img{width:100%;height:clamp(200px,34vw,380px);object-fit:cover;object-position:center 42%}

/* filter chips */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 36px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 20px;border-radius:999px;
  border:2px solid rgba(252,239,242,.4);background:transparent;color:var(--cream);
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.86rem;letter-spacing:.06em;cursor:pointer;
  transition:transform 160ms var(--ease-out),background 200ms ease,border-color 200ms ease,color 200ms ease}
.chip .n{font-size:.72rem;opacity:.65;font-weight:500}
.chip:active{transform:scale(.97)}
.chip[aria-pressed="true"]{background:var(--cream);border-color:var(--cream);color:var(--plum)}
.chip[aria-pressed="true"] .n{opacity:.55}
@media (hover:hover) and (pointer:fine){
  .chip:hover{border-color:var(--pink);color:var(--pink)}
  .chip[aria-pressed="true"]:hover{background:var(--pink);border-color:var(--pink);color:var(--plum)}
}

/* masonry of client work */
.work-grid{columns:4 250px;column-gap:20px}
.work-item{break-inside:avoid;margin:0 0 20px;padding:0;border:0;background:none;display:block;width:100%;cursor:zoom-in;
  transition:transform 320ms var(--ease-out),box-shadow 320ms var(--ease-out)}
.work-item figure{position:relative;border:3px solid var(--cream);border-radius:8px;overflow:hidden;background:rgba(252,239,242,.06)}
.work-item:nth-child(even){transform:rotate(1.1deg)}
.work-item:nth-child(odd){transform:rotate(-1.1deg)}
.work-item img{width:100%;height:auto;display:block;transition:transform 420ms var(--ease-out)}
/* Cap the extreme verticals so the masonry stays varied without any single tile running
   600px tall. Landscape and squarer photos keep their natural shape. */
.work-item.tall img{aspect-ratio:3/4;object-fit:cover;object-position:center 32%}
.work-item .by{position:absolute;left:8px;bottom:8px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  background:var(--plum);color:var(--cream);padding:5px 10px;border-radius:999px;opacity:0;
  transition:opacity 200ms ease,transform 200ms var(--ease-out);transform:translateY(4px)}
.work-item:active{transform:rotate(0) scale(.985)}
@media (hover:hover) and (pointer:fine){
  .work-item:hover{transform:rotate(0) scale(1.02)}
  .work-item:hover img{transform:scale(1.03)}
  .work-item:hover .by{opacity:1;transform:none}
}
.work-item:focus-visible{outline:3px solid var(--gold);outline-offset:4px;border-radius:10px;transform:rotate(0)}
/* filtered out */
.work-item[hidden]{display:none}

/* count + empty state */
.work-count{font-size:.84rem;text-transform:uppercase;letter-spacing:.18em;font-weight:700;color:var(--teal-text);margin:0 0 22px}
.work-empty{border:2px dashed rgba(252,239,242,.35);border-radius:12px;padding:52px 28px;text-align:center}
.work-empty h3{font-family:'Fraunces',serif;font-weight:900;font-size:1.7rem;color:var(--cream);margin-bottom:10px}
.work-empty p{color:rgba(252,239,242,.8);font-size:1rem;max-width:44ch;margin:0 auto}

/* ===== IN THE STUDIO (branded shoot photos on artist pages) =====
   Deliberately NOT the masonry treatment: the client gallery is client work,
   this is a staggered three-frame band of the artist and her brand. */
.studio{padding:84px 0;border-top:3px solid var(--plum)}
.studio .sec-head{margin-bottom:44px}
.studio .sec-head h2{color:var(--cream)}
.studio .sec-head h2 em{color:var(--pink);font-style:italic}
.studio-strip{display:grid;grid-template-columns:1fr 1fr 1.22fr;gap:clamp(16px,2.4vw,30px);
  align-items:start;padding:46px 0 78px}
.sf{margin:0;border:4px solid var(--cream);border-radius:9px;overflow:hidden;background:rgba(252,239,242,.06);
  transition:transform 420ms var(--ease-out),box-shadow 420ms var(--ease-out)}
.sf img{width:100%;object-fit:cover;object-position:center 24%}
.sf:nth-child(1){transform:rotate(-2.5deg) translateY(-22px);box-shadow:12px 12px 0 var(--rose)}
.sf:nth-child(2){transform:rotate(2deg) translateY(46px);box-shadow:12px 12px 0 var(--coral)}
.sf:nth-child(3){transform:rotate(-1.4deg) translateY(6px);box-shadow:12px 12px 0 var(--gold)}
.sf:nth-child(1) img{height:clamp(230px,25vw,350px)}
.sf:nth-child(2) img{height:clamp(210px,23vw,320px)}
.sf:nth-child(3) img{height:clamp(250px,28vw,390px)}
/* the third frame is a brand/tools detail, so hold the middle of it */
.sf:nth-child(3) img{object-position:center 50%}
@media (hover:hover) and (pointer:fine){
  /* hover straightens each frame but keeps its place in the stagger */
  .sf:nth-child(1):hover{transform:rotate(0) translateY(-30px);box-shadow:16px 18px 0 var(--pink)}
  .sf:nth-child(2):hover{transform:rotate(0) translateY(38px);box-shadow:16px 18px 0 var(--pink)}
  .sf:nth-child(3):hover{transform:rotate(0) translateY(-2px);box-shadow:16px 18px 0 var(--pink)}
}
@media(max-width:880px){
  .studio-strip{grid-template-columns:1fr 1fr;gap:18px;padding:34px 0 62px}
  .sf:nth-child(3){grid-column:1 / -1}
  .sf:nth-child(1){transform:rotate(-2.5deg) translateY(-14px)}
  .sf:nth-child(2){transform:rotate(2deg) translateY(26px)}
  .sf:nth-child(3){transform:rotate(-1.4deg) translateY(4px)}
  .sf:nth-child(1) img,.sf:nth-child(2) img{height:clamp(230px,34vw,300px)}
  .sf:nth-child(3) img{height:clamp(200px,42vw,300px)}
}
@media(max-width:520px){
  /* single column: keep the tilt and alternate the horizontal offset instead */
  .studio-strip{grid-template-columns:1fr;gap:30px;padding:20px 0 40px}
  .sf:nth-child(1){transform:rotate(-2.5deg) translateX(-6px)}
  .sf:nth-child(2){transform:rotate(2deg) translateX(10px)}
  .sf:nth-child(3){transform:rotate(-1.4deg) translateX(-4px)}
  .sf:nth-child(1) img,.sf:nth-child(2) img,.sf:nth-child(3) img{height:300px}
}
@media (prefers-reduced-motion: reduce){ .sf{transition:none!important} }

/* LIGHTBOX */
.lb{position:fixed;inset:0;z-index:var(--z-lightbox);display:grid;place-items:center;padding:clamp(12px,3vw,40px);
  background:rgba(23,10,18,.94);opacity:0;pointer-events:none;
  transition:opacity 220ms var(--ease-out),visibility 220ms}
.lb[data-open="true"]{opacity:1;pointer-events:auto}
.lb-stage{position:relative;max-width:min(1100px,100%);max-height:100%;display:flex;flex-direction:column;gap:14px;
  transform:scale(.96);opacity:0;transition:transform 260ms var(--ease-out),opacity 200ms var(--ease-out)}
.lb[data-open="true"] .lb-stage{transform:none;opacity:1}
.lb-figure{border:4px solid var(--cream);border-radius:10px;overflow:hidden;background:var(--plum);box-shadow:0 30px 70px rgba(0,0,0,.55)}
.lb-figure img{width:auto;max-width:100%;max-height:min(74vh,860px);display:block;margin:0 auto;
  transition:opacity 180ms ease,filter 180ms ease}
.lb[data-swapping="true"] .lb-figure img{opacity:.35;filter:blur(6px)}
.lb-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--cream)}
.lb-meta .who{font-family:'Fraunces',serif;font-weight:900;font-size:1.2rem}
.lb-meta .who span{display:block;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.16em;color:var(--teal-text);margin-top:5px}
.lb-meta .go{font-weight:700;font-size:.9rem;border-bottom:2px solid var(--pink);padding-bottom:2px}
.lb-meta .go:hover{color:var(--pink)}
/* controls anchor to the viewport, never on top of the photo */
.lb-btn{position:fixed;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;
  border:2px solid var(--cream);background:var(--plum);color:var(--cream);font-size:1.5rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:transform 160ms var(--ease-out),background 200ms ease,color 200ms ease}
.lb-prev{left:clamp(10px,3vw,34px)}
.lb-next{right:clamp(10px,3vw,34px)}
.lb-btn:active{transform:translateY(-50%) scale(.94)}
.lb-close{position:fixed;top:clamp(10px,2.4vw,26px);right:clamp(10px,3vw,34px);width:48px;height:48px;transform:none;font-size:1.35rem}
.lb-close:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){
  .lb-btn:hover{background:var(--cream);color:var(--plum)}
}
.lb-btn:focus-visible,.lb-close:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.lb-counter{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(252,239,242,.7)}
body.lb-open{overflow:hidden}
@media(max-width:700px){
  /* on a phone the photo fills the width, so drop the arrows below it and swipe instead */
  .lb-btn{top:auto;bottom:14px;transform:none;width:46px;height:46px}
  .lb-btn:active{transform:scale(.94)}
  .lb-close{top:10px;bottom:auto;width:44px;height:44px}
  .lb-figure img{max-height:60vh}
  .lb-meta{padding-bottom:56px}
}
@media (prefers-reduced-motion: reduce){
  .lb-stage,.lb{transition:opacity .001ms!important}
  .lb-stage{transform:none!important}
  .work-item,.work-item img,.band .frame{transition:none!important}
}

/* per-artist face crop position (seated full-body sources) */
.artist-card .ph img{object-position:center var(--fy,22%)}
.bio-photo img{object-position:center var(--fy,25%)}
.mini-card img{object-position:center var(--fy,25%)}
.f-alyssa{--fy:16%}
.f-aj{--fy:13%}
.f-brynn{--fy:33%}
.f-ashley{--fy:20%}

/* TESTIMONIAL */
.quote{background:var(--plum);color:var(--cream);padding:60px 0;border-top:3px solid var(--plum);text-align:center}
.quote .inner{max-width:740px;margin:0 auto}
.quote .qmark{display:block;font-family:'Fraunces',serif;font-weight:900;font-size:3rem;line-height:.5;color:var(--magenta);margin-bottom:6px}
.quote blockquote{font-family:'Fraunces',serif;font-weight:600;font-style:italic;font-size:clamp(1.35rem,2.8vw,2.05rem);line-height:1.3;letter-spacing:-.01em}
.quote blockquote .hi{background:var(--magenta);color:#fff;box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:0 .12em}
.quote cite{display:block;margin-top:18px;font-family:'Space Grotesk';font-style:normal;font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;color:rgba(252,239,242,.8)}
.quote cite:before{content:"— ";color:var(--magenta)}

/* REVIEWS */
.reviews{background:var(--plum);color:var(--cream);padding:92px 0;border-top:3px solid var(--plum)}
.reviews .sec-head h2{color:var(--cream)}
.reviews .sec-head h2 em{color:var(--pink);font-style:italic}
.review-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.review-card{background:var(--cream);color:var(--plum);border:3px solid var(--plum);border-radius:12px;padding:26px 26px 24px;box-shadow:8px 8px 0 var(--magenta);display:flex;flex-direction:column}
.review-card:nth-child(3n+2){box-shadow:8px 8px 0 var(--teal)}
.review-card:nth-child(3n){box-shadow:8px 8px 0 var(--gold)}
.review-stars{color:var(--magenta);font-size:.95rem;letter-spacing:3px;margin-bottom:12px}
.review-card blockquote{font-family:'Fraunces',serif;font-style:italic;font-weight:600;font-size:1.08rem;line-height:1.45;margin-bottom:18px}
.review-card cite{margin-top:auto;font-style:normal;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.74rem;color:var(--magenta)}

/* COLLECTIVE */
.collective{padding:100px 0;color:var(--plum);
  background-color:var(--cream);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E"),
    radial-gradient(38rem 26rem at 12% 6%, rgba(239,83,208,.09), transparent 72%),
    radial-gradient(34rem 24rem at 92% 88%, rgba(0,139,160,.08), transparent 72%);
  background-repeat:repeat,no-repeat,no-repeat;
  background-size:160px 160px,auto,auto;
  background-blend-mode:soft-light,normal,normal}
.coll-text p,.coll-text .stat .l{color:var(--plum)}
.coll-text .stat .l{opacity:.72}
.coll-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.coll-text h2{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(2.6rem,5.5vw,4.6rem);color:var(--plum);margin-bottom:24px}
.coll-text h2 em{font-style:italic;color:var(--magenta-ink)}
.coll-text p{font-size:1.12rem;line-height:1.6;margin-bottom:18px;max-width:46ch}
.coll-stats{display:flex;gap:38px;margin-top:34px;flex-wrap:wrap}
.stat .n{font-family:'Fraunces',serif;font-weight:900;font-size:3rem;color:var(--magenta-ink);line-height:1}
.stat .l{font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;font-weight:700;margin-top:6px}
.coll-photo{position:relative}
.coll-photo .frame{border:5px solid var(--plum);border-radius:8px;overflow:hidden;box-shadow:-14px 14px 0 var(--coral);transform:rotate(1.3deg);transition:transform .4s}
.coll-photo .frame:hover{transform:rotate(0)}
.coll-photo img{width:100%;height:clamp(430px,50vw,700px);object-fit:cover;object-position:center 42%}
.coll-photo .feat{position:absolute;bottom:-44px;left:-34px;width:160px;height:200px;border:4px solid var(--plum);border-radius:6px;overflow:hidden;box-shadow:7px 7px 0 var(--pink);transform:rotate(-4deg);z-index:4;transition:transform .35s;background:var(--plum)}
.coll-photo .feat:hover{transform:rotate(0) scale(1.04)}
.coll-photo .feat img{width:100%;height:100%;object-fit:cover;object-position:center 18%}

/* VISIT / CONTACT */
.visit{background:var(--plum);color:#fff;padding:96px 0;border-top:3px solid var(--plum)}
.visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.visit h2{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(2.8rem,6vw,5.4rem);color:#fff;margin-bottom:26px}
.visit h2 .out{color:transparent;-webkit-text-stroke:2px var(--magenta);font-style:italic}
.visit .info{font-size:1.18rem;line-height:1.7}
.visit .info .lbl{text-transform:uppercase;letter-spacing:.18em;font-size:.76rem;font-weight:700;color:var(--magenta);display:block;margin-top:22px}
.visit .info a:hover{color:var(--teal-text)}
.visit-card{background:var(--cream);color:var(--plum);border:4px solid var(--plum);border-radius:10px;padding:40px;box-shadow:12px 12px 0 var(--magenta);transform:rotate(-1.2deg)}
.visit-card h3{font-family:'Fraunces',serif;font-weight:900;font-size:1.9rem;margin-bottom:14px}
.visit-card p{font-size:1rem;line-height:1.55;margin-bottom:22px}
.visit-card .ig{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-weight:700;letter-spacing:.04em}
.visit-card .ig:hover{color:var(--rose)}

/* CONTACT page specifics */
.contact-rows{background:var(--plum);color:var(--cream);padding:80px 0}
.crow{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:22px 0;border-top:2px solid rgba(252,239,242,.18);font-size:1.1rem;align-items:start}
.crow:last-child{border-bottom:2px solid rgba(252,239,242,.18)}
.crow .k{font-family:'Space Grotesk';font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:.8rem;color:var(--rose)}
.crow a{border-bottom:2px solid var(--pink)}
.crow a:hover{color:var(--rose)}
.map-embed{width:100%;border:5px solid var(--plum);border-radius:8px;box-shadow:14px 14px 0 var(--coral);min-height:420px;margin-top:10px}

/* CTA band */
.cta-band{background:var(--plum);color:var(--cream);padding:90px 0;text-align:center}
.cta-band h2{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(2.4rem,6vw,4.4rem);margin-bottom:14px}
.cta-band h2 em{font-style:italic;color:var(--pink)}
.cta-band p{font-size:1.1rem;color:rgba(252,239,242,.85);max-width:40ch;margin:0 auto 30px}
.cta-band .hero-cta{justify-content:center}
.cta-band .btn-out{color:var(--cream);border-color:var(--cream)}
.cta-band .btn-out:hover{background:var(--cream);color:var(--plum)}

/* FOOTER */
footer{background:var(--plum);color:var(--cream);padding:58px 0 40px}
.foot-top{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;border-bottom:2px solid rgba(252,239,242,.18);padding-bottom:30px;margin-bottom:24px}
.foot-wm{font-family:'Fraunces',serif;font-weight:900;font-size:2.6rem;color:var(--cream)}
.foot-wm .dot{color:var(--magenta)}
.foot-logo{height:104px;width:auto;display:block}
.foot-nav{display:flex;gap:26px;flex-wrap:wrap}
.foot-nav a{text-transform:uppercase;letter-spacing:.12em;font-size:.82rem;font-weight:500}
.foot-nav a:hover{color:var(--pink)}
.foot-bottom{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.8rem;color:rgba(252,239,242,.7)}
.foot-bottom .credit a{color:var(--coral);font-weight:700}

/* RESPONSIVE */
/* ===== WCAG AA: contrast fixes ===== */
.btn{color:var(--plum)!important}
.btn:hover{background:var(--magenta-ink);border-color:var(--magenta-ink);color:var(--cream)!important}
.btn-dark:hover{color:var(--plum)!important}
.bio .btn-dark{background:var(--magenta);border-color:var(--magenta);color:var(--plum)!important}
.bio .btn-dark:hover{background:var(--cream);border-color:var(--cream);color:var(--plum)!important}
.sticker-appt{color:var(--plum)}
.hero h1 .fill{color:var(--magenta-ink)}
.hero h1 .out{-webkit-text-stroke-color:var(--magenta-ink)}
.page-hero .eyebrow{color:var(--teal-text)}
.sec-head .tag{color:var(--teal-text)}
.artist-card .role{color:var(--magenta-ink)}
.artist-card .card-cta .book{color:var(--magenta-ink)}
.artist-card:hover h3{color:var(--magenta-ink)}
.artist-card .card-cta .more{opacity:.75}
.review-stars{color:var(--magenta-ink)}
.review-card cite{color:var(--magenta-ink)}
.mini-card .mc-role{color:var(--magenta-ink)}
.mini-card .mc-go{color:var(--magenta-ink)}
.mini-card:hover .mc-name{color:var(--magenta-ink)}
.menu-col h4:before{color:var(--magenta-ink)}
.visit-card .ig:hover{color:var(--magenta-ink)}
.foot-bottom .credit a{color:var(--teal-text)}

/* ===== Accessibility: focus, skip link, motion ===== */
.skip-link{position:absolute;left:8px;top:-60px;z-index:300;background:var(--gold);color:var(--plum);padding:10px 18px;font-weight:700;border-radius:0 0 10px 10px;transition:top .15s}
.skip-link:focus{top:0}
a:focus-visible,button:focus-visible,.btn:focus-visible,.btn-dark:focus-visible,.btn-out:focus-visible,.artist-card:focus-visible,.mini-card:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
  .sticker-est{animation:none!important}
}

@media(max-width:880px){
  .navlinks{position:absolute;top:74px;left:0;right:0;background:var(--plum);flex-direction:column;gap:20px;padding:26px;display:none;border-bottom:3px solid var(--coral)}
  .navlinks.open{display:flex}
  .navtoggle{display:block}
  .hero-grid{grid-template-columns:1fr;gap:64px}
  .hero-photo{max-width:480px}
  .svc{grid-template-columns:60px 1fr}
  .svc-side{grid-column:1 / -1}
  .svc-img{height:200px;max-width:340px}
  .bio-grid,.bio.reverse .bio-grid{grid-template-columns:1fr;gap:48px}
  .bio.reverse .bio-photo{order:0}
  .gallery{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}
  .work-grid{columns:2 150px;column-gap:14px}
  .work-item{margin-bottom:14px}
  .coll-grid{grid-template-columns:1fr;gap:64px}
  .coll-photo .feat{left:auto;right:-14px;width:130px;height:165px;bottom:-30px}
  .visit-grid{grid-template-columns:1fr}
  .crow{grid-template-columns:1fr;gap:6px}
}
@media(max-width:420px){
  .wrap{padding:0 20px}
  .hero{padding:48px 0 70px}
  .sticker-est{width:96px;height:96px;font-size:.78rem;top:-22px;left:-16px}
  .sticker-appt{right:-6px}
  .hero-photo .main img{height:330px}
  .bio-photo img{height:380px}
  .svc{grid-template-columns:46px 1fr;gap:16px}
  .svc .num{font-size:1.8rem}
  .visit-card{padding:28px;box-shadow:8px 8px 0 var(--magenta)}
  .foot-top{flex-direction:column;align-items:flex-start}
}

/* ===== DEPTH: let the layered canvas through the dark sections =====
   These sections each set `background:var(--plum)` further up the sheet, which paints an
   opaque slab over the grain, blooms and vignette and reads as a flat rectangle. This block
   sits last on purpose so it wins on source order. The sticky header stays opaque (content
   scrolls under it) and the light sections keep their own cream. */
.page-hero,.services,.artists,.bio,.menu-sec,.more-artists,.gallery-sec,.studio,
.quote,.reviews,.visit,.contact-rows,.cta-band,.band,footer{background-color:transparent}

/* Section seams: a 1px light hairline above each dark section gives an edge to catch,
   instead of two shades of plum meeting invisibly. */
.artists,.menu-sec,.more-artists,.studio,.reviews,.visit,.cta-band,.quote{
  border-top:1px solid rgba(252,239,242,.09)}
.gallery-sec{border-top:1px solid rgba(252,239,242,.09)}


/* ===== WCAG 2.5.8 target size + touch comfort =====
   Audit found nav and footer links rendering 17-21px tall, which fails the 24px AA
   minimum and is a miss-tap on a phone. Padding is used rather than min-height so the
   hit area grows without changing the visual rhythm. */
.navlinks a:not(.btn){padding:13px 2px;display:inline-flex;align-items:center}
.navlinks a:not(.btn):after{bottom:8px}
.foot-nav{gap:8px 26px}
.foot-nav a{padding:12px 2px;display:inline-flex;align-items:center;min-height:44px}
.navtoggle{width:44px;height:44px;display:none;place-items:center}
.skip-link{min-height:44px;display:inline-flex;align-items:center}
.wordmark{min-height:44px}
.visit-card .ig{padding:11px 0;min-height:44px}
.lb-meta .go{padding:11px 0;display:inline-flex;align-items:center;min-height:44px}
.crow a{padding:3px 0;display:inline-block}
@media(max-width:880px){
  .navtoggle{display:grid}
  .navlinks a:not(.btn){padding:15px 2px;width:100%}
  .foot-nav{gap:2px 24px}
}
@media(max-width:700px){
  .lb-btn{width:46px;height:46px}
  .lb-close{width:46px;height:46px}
}

/* Primary controls get the full 44px comfort target, not just the 24px AA minimum. */
.navtoggle{min-width:44px;min-height:44px;font-size:1.5rem;line-height:1}
.navlinks a:not(.btn){padding-left:6px;padding-right:6px}
.lb-meta .go{min-height:44px}