/* ════════════════════════════════════════════════════════════════════
   Emily Beth Designz Tattoos
   Palette is sampled straight from the logo: near-black ground, the
   hot pink of the wordmark, and paper white for the flash wall.
   ════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Bodoni Moda';src:url('../fonts/bodoni-moda-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Bodoni Moda';src:url('../fonts/bodoni-moda-900.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Bodoni Moda';src:url('../fonts/bodoni-moda-700-italic.woff2') format('woff2');font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:'Archivo';src:url('../fonts/archivo-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('../fonts/archivo-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('../fonts/archivo-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'DM Mono';src:url('../fonts/dm-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Mono';src:url('../fonts/dm-mono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  /* sampled from Brand/logo.jpg */
  --ink:      #060506;
  --ink-2:    #0e0c0e;
  --ink-3:    #171417;
  --line:     #241f24;
  --bone:     #f6f1f3;
  --bone-2:   #e4dade;
  --white:    #ffffff;
  --pink:     #f44081;
  --rose:     #fb88b3;
  --blush:    #fbbad2;
  --plum:     #a33162;

  --dim:      #a49da1;
  --dim-bone: #6d626a;

  --display: 'Bodoni Moda', 'Didot', 'Times New Roman', serif;
  --body:    'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --pad: clamp(4.5rem, 9vw, 8.5rem);
  --r:   2px;
}

*,*::before,*::after{box-sizing:border-box}
/* An author `display` rule beats the UA stylesheet's [hidden] rule, which
   would leave the mobile drawer and the lightbox permanently open. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:5rem}
body{
  margin:0; background:var(--ink); color:var(--white);
  font-family:var(--body); font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit}
button{font:inherit; color:inherit}

.wrap{width:min(100% - 2.5rem, 1340px); margin-inline:auto}

::selection{background:var(--pink); color:var(--ink)}

:where(a,button,input,iframe,[tabindex]):focus-visible{
  outline:2px solid var(--pink); outline-offset:3px; border-radius:var(--r);
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--pink); color:var(--ink); padding:.75rem 1.25rem;
  font-family:var(--mono); font-size:.8rem;
}
.skip:focus{left:1rem; top:1rem}

/* ── Shared type ────────────────────────────────────────────────── */
.eyebrow{
  margin:0 0 1.25rem; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--rose);
}
/* Title on the left, the sentence that supports it bottom-right, so the
   full measure of the page gets used instead of trailing off into dead space. */
.head{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(1.5rem,4vw,4rem); align-items:end;
  margin:0 0 clamp(2.5rem,5vw,4rem);
}
.head__lead{min-width:0}
.head__title{
  margin:0; font-family:var(--display); font-weight:900;
  font-size:clamp(2.2rem,1.2rem + 3.4vw,4.2rem); line-height:1;
  letter-spacing:-.02em; text-wrap:balance;
}
.head__title em{font-style:italic; font-weight:700; color:var(--pink)}
.head__body{margin:0; color:var(--dim); max-width:42ch; padding-bottom:.4rem}
.head--bone .eyebrow{color:var(--plum)}
.head--bone .head__title{color:var(--ink)}
.head--bone .head__body{color:var(--dim-bone)}

.band{padding-block:var(--pad)}
.band--tight{padding-bottom:calc(var(--pad) * .6)}
.band--bone{
  background:var(--bone); color:var(--ink);
  background-image:radial-gradient(120% 90% at 50% 0%, #fff 0%, var(--bone) 55%, var(--bone-2) 100%);
}

/* ── Buttons ────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.6rem; border:1px solid transparent; border-radius:var(--r);
  font-family:var(--mono); font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; cursor:pointer;
  transition:background .25s, color .25s, border-color .25s, transform .25s;
}
.btn--pink{background:var(--pink); color:var(--ink); font-weight:500}
.btn--pink:hover{background:var(--rose); transform:translateY(-2px)}
.btn--ghost{background:transparent; color:var(--white); border-color:var(--line)}
.btn--ghost:hover{border-color:var(--pink); color:var(--pink)}
/* Facebook sits beside Instagram at equal size, but white keeps the pink
   button reading as the primary one. */
.btn--outline{background:transparent; color:var(--white); border-color:var(--white)}
.btn--outline:hover{background:var(--white); color:var(--ink); transform:translateY(-2px)}
.btn--ink{background:var(--ink); color:var(--white)}
.btn--ink:hover{background:var(--plum); transform:translateY(-2px)}

.link{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:.7rem;
  padding-block:.75rem;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; color:var(--pink);
}
.link span{transition:transform .25s}
.link:hover span{transform:translateX(5px)}

/* ── Nav ────────────────────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto; z-index:100;
  background:rgba(6,5,6,.72); backdrop-filter:blur(14px);
  border-bottom:1px solid transparent; transition:border-color .3s, background .3s;
}
.nav.is-stuck{border-bottom-color:var(--line); background:rgba(6,5,6,.92)}
.nav__inner{display:flex; align-items:center; gap:1.5rem; min-height:4.5rem}
.nav__brand{display:flex; align-items:center; gap:.7rem; text-decoration:none; margin-right:auto}
.nav__brand img{width:40px; height:40px; border-radius:50%; object-fit:cover}
.nav__brand-text{display:flex; flex-direction:column; line-height:1}
.nav__brand-name{font-family:var(--display); font-weight:700; font-size:1.05rem; letter-spacing:.01em}
.nav__brand-sub{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.32em;
  text-transform:uppercase; color:var(--rose); margin-top:.3rem;
}
.nav__links{display:flex; gap:2rem}
.nav__links a{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; color:var(--dim);
  transition:color .2s;
  /* iPads run this desktop nav on a touchscreen, so the hit area needs to be
     finger-sized even though the text is small. */
  padding-block:.9rem;
}
.nav__links a:hover{color:var(--pink)}
.nav__cta{padding:.7rem 1.15rem}

.nav__toggle{
  display:none; width:44px; height:44px; background:none; border:1px solid var(--line);
  border-radius:var(--r); cursor:pointer; padding:0;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav__toggle span{display:block; width:18px; height:1.5px; background:var(--white); transition:transform .3s, opacity .3s}
.nav__toggle[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

.nav__drawer{
  display:flex; flex-direction:column; gap:.35rem;
  padding:1rem 1.25rem 1.75rem; border-top:1px solid var(--line);
}
.nav__drawer a{
  font-family:var(--mono); font-size:.85rem; letter-spacing:.12em;
  text-transform:uppercase; text-decoration:none; padding:.7rem 0; color:var(--white);
}
.nav__drawer .btn{margin-top:.75rem}

/* ── Hero ───────────────────────────────────────────────────────── */
.hero{padding-top:clamp(7rem,14vh,10rem); padding-bottom:var(--pad); position:relative; overflow:hidden}
.hero::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  width:70vw; height:70vw; max-width:900px; max-height:900px;
  left:-18vw; top:-12vw; border-radius:50%;
  background:radial-gradient(circle, rgba(244,64,129,.16) 0%, transparent 68%);
}
.hero__inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(2.5rem,5vw,4.5rem); align-items:center;
}
/* The logo carries the identity, so the headline sits under it and stays
   restrained rather than competing with it. */
/* Constrained on both axes: the height cap only bites on short viewports
   (a phone held sideways), where a width-only limit would let the logo fill
   the whole screen and hide everything under it. */
.hero__logo{
  display:block; width:auto; height:auto;
  max-width:min(430px,100%); max-height:min(46vh,360px);
  margin:0 0 2rem;
}
.hero__title{
  margin:0; font-family:var(--display); font-weight:900;
  font-size:clamp(1.9rem,1rem + 2.9vw,3.4rem); line-height:1.02;
  letter-spacing:-.02em; text-wrap:balance;
}
.hero__where{margin:1.1rem 0 0; color:var(--rose)}
.hero__lede{margin:1.6rem 0 0; max-width:44ch; color:var(--dim); font-size:1.075rem}

.booking{margin-top:2.5rem; padding-top:1.75rem; border-top:1px solid var(--line)}
.booking__line{
  margin:0 0 1.25rem; font-family:var(--mono); font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--white);
}
.booking__actions{display:flex; flex-wrap:wrap; gap:.85rem}
.booking__note{margin:1.25rem 0 0; font-size:.95rem; color:var(--dim); max-width:40ch}

/* Explicit placement keeps the desktop layout (copy above stats on the left,
   images spanning both rows on the right) while letting the single-column
   phone layout fall as copy -> images -> stats, so the work shows up early. */
.hero__copy{grid-column:1; grid-row:1; min-width:0}
.hero__stack{grid-column:2; grid-row:1 / span 2}
.hero__stats{grid-column:1; grid-row:2}

.hero__stats{
  display:flex; flex-wrap:wrap; gap:2.5rem; margin:3.5rem 0 0;
  padding-top:1.75rem; border-top:1px solid var(--line);
}
.hero__stats div{display:flex; flex-direction:column-reverse; gap:.4rem}
.hero__stats dt{
  font-family:var(--mono); font-size:.65rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dim);
}
.hero__stats dd{margin:0; font-family:var(--display); font-weight:700; font-size:1.9rem; line-height:1; color:var(--pink)}

/* Two offset columns of real work, drifting slowly. */
.hero__stack{display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-self:stretch}
.hero__col{display:flex; flex-direction:column; gap:1rem}
.hero__col--b{padding-top:3.5rem}
.hero__stack img{
  width:100%; height:auto; border-radius:var(--r);
  border:1px solid var(--line); background:var(--ink-2);
}
@media (prefers-reduced-motion:no-preference){
  .hero__col--a{animation:drift 15s ease-in-out infinite alternate}
  .hero__col--b{animation:drift 15s ease-in-out infinite alternate-reverse}
}
@keyframes drift{from{transform:translateY(-10px)} to{transform:translateY(10px)}}

/* ── Ticker ─────────────────────────────────────────────────────── */
.ticker{
  border-block:1px solid var(--line); padding-block:1.1rem;
  overflow:hidden; background:var(--ink-2);
}
.ticker__track{display:flex; width:max-content; gap:0}
.ticker__seq{
  display:flex; align-items:center; gap:2.5rem; padding-right:2.5rem;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.24em;
  text-transform:uppercase; white-space:nowrap; color:var(--dim);
}
.ticker__seq i{color:var(--pink); font-style:normal}
@media (prefers-reduced-motion:no-preference){
  /* Both custom properties are set by site.js from the measured width. The
     fallbacks keep it moving if that ever fails to run. */
  .ticker__track{animation:slide var(--tick-dur,24s) linear infinite}
}
@keyframes slide{
  from{transform:translateX(0)}
  to{transform:translateX(calc(var(--tick-shift,50%) * -1))}
}

/* ── Services ───────────────────────────────────────────────────── */
.services{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1px; background:var(--line)}
.service{background:var(--ink); padding:clamp(1.75rem,3vw,2.75rem)}
.service__title{
  margin:0 0 1rem; font-family:var(--display); font-weight:700;
  font-size:1.9rem; line-height:1.05; letter-spacing:-.01em;
}
.service__body{margin:0; color:var(--dim)}

/* ── Flash wall ─────────────────────────────────────────────────── */
.wall{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:clamp(1.75rem,3vw,2.75rem) clamp(1rem,2vw,1.75rem);
}
.wall__item{
  position:relative; display:block; padding:.7rem .7rem 0; background:var(--white);
  border:1px solid rgba(0,0,0,.08); box-shadow:0 12px 28px rgba(20,5,12,.13);
  text-decoration:none; color:var(--ink); cursor:pointer;
  transition:transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s;
}
.wall__item::before{ /* the pin */
  content:''; position:absolute; top:-7px; left:50%; width:11px; height:11px;
  border-radius:50%; background:var(--pink); transform:translateX(-50%);
  box-shadow:0 2px 5px rgba(20,5,12,.45);
}
.wall__item img{width:100%; aspect-ratio:3/4; object-fit:cover; background:var(--bone-2)}
.wall__tag{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.6rem .1rem .65rem; font-family:var(--mono); font-size:.6rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--dim-bone);
}
.wall__tag b{color:var(--plum); font-weight:500}
.wall__item:hover,.wall__item:focus-visible{
  transform:rotate(0deg) translateY(-8px) scale(1.03);
  box-shadow:0 22px 44px rgba(20,5,12,.24);
}
.wall__foot{display:flex; justify-content:center; margin-top:clamp(2.5rem,5vw,4rem)}

/* ── Filters ────────────────────────────────────────────────────── */
.filters{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2.5rem}
.chip{
  padding:.6rem 1.05rem; background:transparent; border:1px solid var(--line);
  border-radius:var(--r); cursor:pointer; white-space:nowrap;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--dim);
  transition:color .2s, border-color .2s, background .2s;
}
.chip sup{font-size:.85em; margin-left:.4em; opacity:.6}
.chip:hover{color:var(--white); border-color:var(--dim)}
.chip.is-on{background:var(--pink); border-color:var(--pink); color:var(--ink); font-weight:500}
.chip.is-on sup{opacity:.75}

/* ── Gallery grid (CSS columns = real masonry, no JS layout) ────── */
.grid{columns:4; column-gap:1rem}
.grid__item{
  position:relative; display:block; width:100%; margin:0 0 1rem; padding:0;
  border:0; background:var(--ink-2); border-radius:var(--r);
  overflow:hidden; cursor:pointer; break-inside:avoid;
}
.grid__item img{
  width:100%; height:auto; display:block;
  transition:transform .6s cubic-bezier(.2,.8,.3,1), opacity .5s;
}
.grid__item::after{
  content:''; position:absolute; inset:0; border:1px solid transparent;
  border-radius:var(--r); transition:border-color .3s; pointer-events:none;
}
.grid__item:hover img,.grid__item:focus-visible img{transform:scale(1.05)}
.grid__item:hover::after,.grid__item:focus-visible::after{border-color:var(--pink)}
.grid__item[hidden]{display:none}

.grid__foot{
  display:flex; flex-direction:column; align-items:center; gap:1rem;
  margin-top:3rem;
}
.grid__count{margin:0; font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim)}

/* reveal-on-scroll */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1)}
  .reveal.is-in{opacity:1; transform:none}
}

/* ── Healed rail ────────────────────────────────────────────────── */
.rail{
  display:flex; gap:1rem; overflow-x:auto; padding:.5rem 0 1.5rem;
  scroll-snap-type:x mandatory; scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
  padding-inline:max(1.25rem, calc((100% - 1340px)/2));
  /* Snap positions ignore padding unless told otherwise — without this the
     browser scrolls straight past the gutter and the first card sits flush
     to the window edge, out of line with every other section. */
  scroll-padding-inline:max(1.25rem, calc((100% - 1340px)/2));
}
.rail__item{
  flex:0 0 clamp(260px,32vw,420px); scroll-snap-align:start;
  border:0; padding:0; background:var(--ink-2); border-radius:var(--r);
  overflow:hidden; cursor:pointer;
}
.rail__item img{width:100%; height:clamp(300px,32vw,420px); object-fit:cover; transition:transform .6s}
.rail__item:hover img{transform:scale(1.04)}

/* ── Meet the artist ────────────────────────────────────────────── */
.artist{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
/* Offset hairline behind the portrait — the one flourish in the section,
   so the slogan stays the thing you look at. */
.artist__portrait{
  position:relative; margin:0; max-width:430px; width:100%;
  padding:0 14px 14px 0;
}
.artist__portrait::before{
  content:''; position:absolute; right:0; bottom:0;
  width:calc(100% - 14px); height:calc(100% - 14px);
  border:1px solid var(--pink); border-radius:var(--r);
}
.artist__portrait img{
  /* height:auto is required — the img carries a height attribute, and without
     this the presentational hint wins and aspect-ratio is ignored. */
  position:relative; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
  object-position:50% 22%;           /* keeps her face in frame when cropped */
  border-radius:var(--r); background:var(--ink-2);
}
.artist__copy{min-width:0}
.artist__body{margin:1.5rem 0 0; color:var(--dim); max-width:52ch}
.artist__body:first-of-type{margin-top:1.75rem}
.artist__slogan{
  margin:2.25rem 0 0; padding-top:1.75rem; border-top:1px solid var(--line);
  font-family:var(--display); font-weight:700; font-style:italic;
  font-size:clamp(1.4rem,1rem + 1.5vw,2.1rem); line-height:1.14;
  letter-spacing:-.01em; color:var(--pink);
}
/* No photo in Pictures/Meet The Artist yet — let the copy take the width. */
.artist.is-textonly{grid-template-columns:1fr}
.artist.is-textonly .artist__portrait{display:none}

/* ── Studio ─────────────────────────────────────────────────────── */
.studio{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2.5rem,5vw,5rem); align-items:center}
.studio__address{
  margin:2.25rem 0 0; font-family:var(--mono); font-size:.95rem;
  font-style:normal; line-height:1.9; letter-spacing:.05em; color:var(--white);
  padding-left:1.1rem; border-left:2px solid var(--pink);
}
.studio__body{margin:2rem 0 0; color:var(--dim); max-width:42ch}
.studio__map{position:relative}
.studio__map iframe{
  width:100%; aspect-ratio:4/3; border:1px solid var(--line);
  border-radius:var(--r); background:var(--ink-2);
}
.studio__maplink{margin-top:.3rem}

.socials{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2.25rem}
.social{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.8rem 1.15rem; border:1px solid var(--line); border-radius:var(--r);
  text-decoration:none; font-family:var(--mono); font-size:.72rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--white);
  transition:border-color .25s, color .25s, transform .25s;
}
.social:hover{border-color:var(--pink); color:var(--pink); transform:translateY(-2px)}
.socials--sm .social{padding:.7rem 1rem; font-size:.68rem}

/* Sprite holder — never rendered, only referenced by <use>. */
.sprite{display:none}

/* Sized in ems so the marks track their label. Filled with the page pink
   rather than each platform's own brand colour. */
.social__icon,.btn__icon{width:1.15em; height:1.15em; fill:currentColor; flex:none}
.social__icon{fill:var(--pink); transition:fill .25s}
.socials--sm .social__icon{width:1em; height:1em}

/* ── Footer ─────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line); padding-top:clamp(3rem,6vw,5rem); background:var(--ink-2)}
.foot__inner{display:flex; flex-wrap:wrap; gap:2.5rem; align-items:center; justify-content:space-between}
.foot__brand{display:flex; flex-direction:column; gap:1.25rem; align-items:flex-start}
.foot__logo{width:min(310px,72vw); height:auto}
.foot__slogan{
  margin:0; font-family:var(--display); font-weight:700; font-style:italic;
  font-size:1.05rem; color:var(--rose); max-width:22ch;
}
.foot__side{display:flex; flex-direction:column; gap:1.25rem; align-items:flex-start}
.foot__links{display:flex; flex-wrap:wrap; gap:0 1.5rem}
.foot__links a{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; color:var(--dim);
  padding-block:.75rem;
}
.foot__links a:hover{color:var(--pink)}
.foot__addr{margin:0; font-family:var(--mono); font-size:.75rem; letter-spacing:.08em; color:var(--white)}
.foot__base{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  margin-top:clamp(2.5rem,5vw,4rem); padding-block:1.5rem;
  border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; color:var(--dim);
}
.foot__base p{margin:0}

/* ── Lightbox ───────────────────────────────────────────────────── */
.lb{
  position:fixed; inset:0; z-index:150; display:grid; place-items:center;
  background:rgba(4,3,4,.96); backdrop-filter:blur(8px); padding:clamp(1rem,4vw,3rem);
}
.lb[hidden]{display:none}
.lb__figure{margin:0; display:flex; flex-direction:column; align-items:center; gap:1rem; max-width:100%}
.lb__figure img{
  max-width:min(100%,1100px); max-height:78vh; width:auto; height:auto;
  object-fit:contain; border-radius:var(--r);
}
.lb__cap{
  display:flex; gap:1.25rem; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--dim);
}
.lb__cap span:first-child{color:var(--pink)}
.lb__close,.lb__nav{
  position:absolute; display:grid; place-items:center; cursor:pointer;
  background:rgba(255,255,255,.06); border:1px solid var(--line); border-radius:50%;
  color:var(--white); transition:background .25s, border-color .25s;
}
.lb__close:hover,.lb__nav:hover{background:var(--pink); border-color:var(--pink); color:var(--ink)}
.lb__close{top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem); width:46px; height:46px; font-size:1.7rem; line-height:1}
.lb__nav{top:50%; transform:translateY(-50%); width:52px; height:52px; font-size:2rem; line-height:1; padding-bottom:5px}
.lb__nav--prev{left:clamp(.5rem,2vw,2rem)}
.lb__nav--next{right:clamp(.5rem,2vw,2rem)}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width:1023px){
  .services{grid-template-columns:1fr}
}
@media (max-width:1100px){
  .grid{columns:3}
  .head{grid-template-columns:1fr; gap:1.5rem; align-items:start}
  .head__body{padding-bottom:0}
  .hero__inner{grid-template-columns:1fr; gap:2.5rem}
  .hero__copy,.hero__stack,.hero__stats{grid-column:1; grid-row:auto}
  .hero__stats{margin-top:0}
  .hero__stack{gap:.75rem}
  .hero__col{gap:.75rem}
  .hero__col--b{padding-top:2rem}
  .studio{grid-template-columns:1fr}
  .artist{grid-template-columns:1fr; gap:2.5rem}
  .artist__portrait{max-width:340px}
  /* Full-width now that the columns have stacked, so the 4:3 box would be
     over 1000px tall on an iPad. */
  .studio__map iframe{aspect-ratio:16/10; max-height:min(55vh,440px)}
}
@media (max-width:900px){
  .nav__links,.nav__cta{display:none}
  .nav__toggle{display:flex}
}
@media (min-width:901px){
  .nav__drawer{display:none !important}
}
@media (max-width:760px){
  .grid{columns:2; column-gap:.75rem}
  .grid__item{margin-bottom:.75rem}
  .hero__stats{gap:1.75rem}
  .hero__stats dd{font-size:1.5rem}
  .wall{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .lb__nav{width:42px; height:42px; font-size:1.6rem}
}
@media (max-width:420px){
  .foot__inner{gap:2rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
}

/* Phone held sideways: the hero's tall lead-in leaves no room for content. */
@media (max-height:560px) and (orientation:landscape){
  .hero{padding-top:6rem; padding-bottom:3rem}
  .hero__logo{margin-bottom:1.25rem}
  .booking{margin-top:1.5rem; padding-top:1.25rem}
}

/* ── Reviews ────────────────────────────────────────────────────── */
/* Each card carries its own border rather than relying on gaps over a
   coloured backing — with an odd number of reviews the leftover cells in
   the last row would otherwise show up as a grey block. */
.reviews{
  display:grid; /* min() keeps the track from exceeding the container on narrow phones,
     where a bare 340px minimum would push the page sideways. */
  grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));
  gap:1rem;
}
.review{
  margin:0; background:var(--ink-2); padding:clamp(1.6rem,3vw,2.2rem);
  border:1px solid var(--line); border-radius:var(--r);
  display:flex; flex-direction:column; gap:1.1rem;
}
.review__stars{display:flex; gap:.25rem}
.review__stars svg{width:15px; height:15px; fill:var(--pink); flex:none}
.review__rec{
  margin:0; font-family:var(--mono); font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--pink);
}
.review__text{
  margin:0; color:var(--white); font-size:1.02rem; line-height:1.6;
  position:relative; padding-left:1.9rem;
}
.review__text::before{
  content:'“'; position:absolute; left:-.15rem; top:-.5rem;
  font-family:var(--display); font-size:3rem; line-height:1; color:var(--pink);
}
.review__by{display:flex; flex-direction:column; gap:.35rem; margin-top:auto}
.review__name{font-family:var(--display); font-weight:700; font-size:1.05rem}
.review__meta{
  font-family:var(--mono); font-size:.65rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim);
}
.reviews__foot{display:flex; justify-content:center; margin-top:clamp(2rem,4vw,3rem)}