/* ==========================================================================
   Memoir Tattoo — site styles
   One stylesheet for every page. Breakpoints: 1200px (stack), 820px (mobile).
   ========================================================================== */

:root{
  --bg:#0c0b0a;
  --bg2:#100e0c;
  --outer:#050403;
  --bone:#f2ede4;
  --bone2:#e8e1d5;
  --muted:#c8bfb1;
  --body:#a89e8f;
  --dim:#8a8378;
  --dimmer:#6f665a;
  --gold:#c9a86a;
  --gold2:#ddb877;
  --line:rgba(255,255,255,.08);
  --line2:rgba(255,255,255,.16);
  --line3:rgba(255,255,255,.09);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Archivo',system-ui,-apple-system,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
  --px:clamp(20px,5vw,56px);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--outer);
  color:var(--bone);
  font-family:var(--sans);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{overflow:hidden;}
img{max-width:100%;display:block;}
a{color:var(--gold);}
a:hover{color:var(--gold2);}
h1,h2,h3{font-weight:300;}

.page{
  width:100%;
  max-width:1440px;
  margin:0 auto;
  background:var(--bg);
  position:relative;
  overflow:hidden;
}

/* shared type atoms ------------------------------------------------------- */
.eyebrow{
  font-family:var(--mono);
  font-size:clamp(10px,1.4vw,12px);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:26px;
}
.label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:12px;
}
.lede{
  font-size:clamp(15px,2vw,17px);
  line-height:1.7;
  color:var(--body);
  margin:0 0 20px;
  text-wrap:pretty;
}
.copy{
  font-size:15px;
  line-height:1.7;
  color:var(--body);
  margin:0;
  text-wrap:pretty;
}
.mono{
  font-family:var(--mono);
  font-size:clamp(12px,1.6vw,13px);
  letter-spacing:.06em;
  color:var(--muted);
  line-height:1.6;
  margin:0;
}
.rule{flex:1;height:1px;background:rgba(255,255,255,.12);}

/* buttons ----------------------------------------------------------------- */
.btn{
  display:inline-block;
  font-family:var(--mono);
  font-size:clamp(12px,1.5vw,13px);
  letter-spacing:.1em;
  text-transform:uppercase;
  background:var(--gold);
  color:#0c0b0a;
  padding:17px 32px;
  border:none;
  border-radius:100px;
  text-decoration:none;
  text-align:center;
  cursor:pointer;
}
.btn:hover{background:var(--gold2);color:#0c0b0a;}
.btn-ghost{
  font-family:var(--mono);
  font-size:clamp(12px,1.5vw,13px);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--bone);
  text-decoration:none;
  text-align:center;
  border-bottom:1px solid rgba(255,255,255,.35);
  padding-bottom:5px;
}
.btn-ghost:hover{color:var(--bone);border-bottom-color:var(--gold);}
.btn-row{display:flex;gap:20px;align-items:center;}

/* social ------------------------------------------------------------------ */
.social{display:flex;gap:12px;}
.social a{
  width:44px;height:44px;
  border-radius:50%;
  border:1px solid var(--line2);
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;
  color:var(--muted);
  flex-shrink:0;
}
.social a:hover{border-color:var(--gold);color:var(--gold);}

/* ==========================================================================
   Nav
   ========================================================================== */
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--px);
  height:clamp(64px,8vw,86px);
  border-bottom:1px solid var(--line);
  position:relative;z-index:60;
  background:var(--bg);
}
.nav__brand{display:flex;align-items:baseline;gap:12px;text-decoration:none;}
.nav__brand b{
  font-weight:500;
  font-size:clamp(17px,2.2vw,20px);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--bone);
}
.nav__brand span{
  font-weight:500;
  font-size:clamp(10px,1.4vw,12px);
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold);
}
.nav__links{
  display:flex;
  gap:clamp(18px,2.6vw,36px);
  align-items:center;
  font-family:var(--mono);
  font-size:clamp(11px,1.2vw,12px);
  letter-spacing:.16em;
  text-transform:uppercase;
}
.nav__links a{color:var(--muted);text-decoration:none;}
.nav__links a:hover{color:var(--gold);}
.nav__links a[aria-current]{color:var(--gold);}
.nav__cta{
  font-family:var(--mono);
  font-size:clamp(11px,1.2vw,12px);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold);
  border:1px solid var(--gold);
  padding:11px clamp(14px,2vw,24px);
  border-radius:100px;
  text-decoration:none;
  white-space:nowrap;
}
.nav__cta:hover{background:var(--gold);color:#000;}
.nav__burger{
  display:none;
  width:48px;height:48px;margin-right:-10px;
  background:none;border:none;padding:0;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:6px;
}
.nav__burger span{display:block;width:26px;height:1.5px;background:var(--bone);}
.nav__burger span:last-child{background:var(--gold);}

.menu{
  position:fixed;inset:0;z-index:200;
  background:var(--bg);
  display:none;
  flex-direction:column;
}
body.is-menu-open .menu{display:flex;}
.menu__top{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--px);
  height:clamp(64px,8vw,86px);
  border-bottom:1px solid var(--line);
  flex-shrink:0;
}
.menu__brand{display:flex;align-items:baseline;gap:12px;}
.menu__brand b{font-weight:500;font-size:17px;letter-spacing:.1em;text-transform:uppercase;color:var(--bone);}
.menu__brand span{font-weight:500;font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);}
.menu__close{
  width:48px;height:48px;margin-right:-10px;
  background:none;border:none;padding:0;cursor:pointer;
  color:var(--muted);
  font-family:var(--mono);font-size:30px;line-height:1;
}
.menu__links{
  flex:1;
  display:flex;flex-direction:column;justify-content:center;gap:4px;
  padding:0 var(--px) 40px;
}
.menu__links a{
  font-family:var(--serif);
  font-size:clamp(34px,10vw,52px);
  line-height:1.5;
  color:var(--muted);
  text-decoration:none;
}
.menu__links a[aria-current]{color:var(--gold);}
.menu__links .btn{
  margin-top:34px;
  align-self:flex-start;
  font-family:var(--mono);
  font-size:13px;
  line-height:1;
  color:#0c0b0a;
  padding:16px 32px;
}

/* ==========================================================================
   Split sections — oversized circle + text column
   Desktop: circles bleed off the edge, absolutely positioned.
   Under 1200px: circle centers above (or below) the text.
   ========================================================================== */
.split{position:relative;padding:120px 56px;overflow:hidden;}
.split--dark{background:var(--bg2);}
.split--edge{border-bottom:1px solid var(--line);}
.split__art{display:contents;}
.split__body{position:relative;z-index:3;}
.split__ring,.split__img{position:absolute;border-radius:50%;}
.split__img{overflow:hidden;box-shadow:0 40px 130px rgba(0,0,0,.6);}
.split__img img,.split__img > div{width:100%;height:100%;object-fit:cover;}

@keyframes memspin{to{transform:rotate(360deg);}}
.spin{animation:memspin 150s linear infinite;}

/* --- desktop geometry, per section --- */
.s-home-hero{padding:96px 56px 118px;min-height:730px;}
.s-home-hero .split__body{max-width:700px;}
.s-home-hero .split__ring{right:-200px;top:16px;width:860px;height:860px;border:1px solid rgba(201,168,106,.26);}
.s-home-hero .split__img{right:-150px;top:74px;width:740px;height:740px;}

.s-home-studio{min-height:660px;}
.s-home-studio .split__body{margin-left:640px;max-width:540px;padding-top:30px;}
.s-home-studio .split__ring{left:-220px;top:50%;transform:translateY(-50%);width:760px;height:760px;border:1px solid rgba(201,168,106,.2);}
.s-home-studio .split__img{left:-170px;top:50%;transform:translateY(-50%);width:660px;height:660px;box-shadow:0 40px 120px rgba(0,0,0,.6);}

.s-home-visit{min-height:560px;}
.s-home-visit .split__body{max-width:560px;}
.s-home-visit .split__ring{right:-210px;bottom:-230px;width:740px;height:740px;border:1px solid rgba(201,168,106,.22);}
.s-home-visit .split__img{right:-170px;bottom:-190px;width:660px;height:660px;box-shadow:0 40px 120px rgba(0,0,0,.6);}

.s-studio-hero{padding:96px 56px 110px;min-height:660px;}
.s-studio-hero .split__body{max-width:600px;}
.s-studio-hero .split__ring{right:-220px;top:0;width:800px;height:800px;border:1px solid rgba(201,168,106,.24);}
.s-studio-hero .split__img{right:-180px;top:40px;width:720px;height:720px;}

.s-studio-details{min-height:600px;}
.s-studio-details .split__body{margin-left:560px;max-width:560px;padding-top:30px;}
.s-studio-details .split__ring{left:-220px;top:50%;transform:translateY(-50%);width:700px;height:700px;border:1px solid rgba(201,168,106,.2);}
.s-studio-details .split__img{left:-170px;top:50%;transform:translateY(-50%);width:600px;height:600px;box-shadow:0 40px 120px rgba(0,0,0,.6);}

.s-artist-hero{padding:70px 56px 100px;min-height:600px;}
.s-artist-hero .split__body{max-width:620px;}
.s-artist-hero .split__ring{right:-230px;top:-10px;width:800px;height:800px;border:1px solid rgba(201,168,106,.24);}
.s-artist-hero .split__img{right:-190px;top:30px;width:720px;height:720px;}

/* ==========================================================================
   Home — hero
   ========================================================================== */
.hero__kicker{
  font-family:var(--mono);
  font-size:clamp(10px,1.4vw,12px);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:clamp(20px,3vw,32px);
}
.hero__logo{
  width:100%;max-width:680px;height:auto;
  margin:clamp(22px,4vw,40px) 0 clamp(30px,5vw,48px);
}
.h-display{
  font-family:var(--serif);
  font-size:clamp(36px,6vw,60px);
  line-height:1.04;
  margin:0 0 26px;
  color:var(--bone);
}
.h-visit{
  font-family:var(--serif);
  font-size:clamp(38px,6.5vw,66px);
  line-height:1.02;
  margin:0 0 24px;
  color:var(--bone);
}
.h-visit em{font-style:italic;color:var(--gold);}
.h-page{
  font-family:var(--serif);
  font-size:clamp(38px,6.5vw,62px);
  line-height:1.04;
  margin:0 0 24px;
  color:var(--bone);
}
.h-section{
  font-family:var(--serif);
  font-size:clamp(28px,5vw,38px);
  margin:0;
  color:var(--bone);
}
.h-italic{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(28px,5vw,38px);
  margin:0;
  color:var(--bone);
  white-space:nowrap;
}
.section-head{
  display:flex;align-items:center;gap:20px;
  margin-bottom:clamp(28px,4vw,48px);
}
.stats{display:flex;gap:44px;flex-wrap:wrap;}
.stats__n{font-family:var(--serif);font-size:clamp(36px,5vw,44px);color:var(--gold);line-height:1;}
.stats__l{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:8px;}

/* ==========================================================================
   Rosters
   ========================================================================== */
.roster{padding:clamp(64px,9vw,118px) var(--px) 60px;}
.roster__head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
  margin-bottom:clamp(36px,5vw,64px);
}
.roster__head h2{
  font-family:var(--serif);
  font-size:clamp(38px,7vw,64px);
  line-height:1;margin:0;color:var(--bone);
}
.roster__note{
  font-family:var(--mono);
  font-size:clamp(10px,1.4vw,12px);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);padding-bottom:12px;
}
.grid-residents{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(clamp(130px,26vw,300px),1fr));
  gap:clamp(30px,4.5vw,56px) clamp(16px,3.5vw,48px);
  align-items:start;
}
.card{
  text-decoration:none;color:inherit;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  scroll-margin-top:110px;
}
.card__photo{
  width:100%;aspect-ratio:1/1;
  border-radius:50%;overflow:hidden;position:relative;
  background:#151311 center/cover no-repeat;
  border:1px solid var(--line3);
  transition:border-color .2s;
}
.card:hover .card__photo{border-color:var(--gold);}
.card__photo span{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(12,11,10,.6);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bone);
  opacity:0;transition:opacity .2s;
}
.card:hover .card__photo span{opacity:1;}
.card__role{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin-top:clamp(14px,2.5vw,22px);
}
.card__name{
  font-family:var(--serif);
  font-size:clamp(20px,3.2vw,30px);line-height:1.2;
  margin-top:8px;color:var(--bone);
}
.card--home .card__name{margin-top:clamp(14px,2.5vw,24px);}
.card__handle{
  font-family:var(--mono);
  font-size:clamp(10px,1.5vw,12px);letter-spacing:.05em;
  color:var(--gold);margin-top:5px;word-break:break-word;
}

.guests{padding:clamp(56px,7vw,90px) var(--px) clamp(70px,9vw,118px);}
.guests__head{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:clamp(26px,3.5vw,40px);}
.guests__head .h-italic{color:var(--muted);font-size:clamp(25px,4.5vw,30px);}
.guests__note{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dimmer);}
.guest-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));
  column-gap:clamp(28px,5vw,72px);
}
.guest{
  text-decoration:none;color:inherit;
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  column-gap:24px;row-gap:2px;
  padding:18px 4px;
  border-bottom:1px solid var(--line3);
  transition:border-color .25s,padding .25s,background .25s;
}
.guest:hover{border-bottom-color:var(--gold);padding-left:14px;padding-right:14px;background:rgba(201,168,106,.05);}
.guest b{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(22px,3.2vw,26px);
  color:var(--bone2);transition:color .25s;
}
.guest:hover b{color:var(--gold);}
.guest span{
  font-family:var(--mono);font-size:clamp(11px,1.5vw,12px);
  color:var(--dim);white-space:nowrap;transition:color .25s;
}
.guest:hover span{color:var(--muted);}

/* ==========================================================================
   Page headers, CTA band, image break
   ========================================================================== */
.page-head{padding:clamp(44px,6vw,96px) var(--px) clamp(48px,6vw,70px);max-width:760px;}
.page-head h1{
  font-family:var(--serif);
  font-size:clamp(40px,7vw,68px);line-height:1.03;
  margin:0 0 24px;color:var(--bone);
}
.page-head .lede{max-width:560px;margin:0;}

.cta-band{
  position:relative;
  padding:clamp(70px,9vw,120px) var(--px);
  background:var(--bg2);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.cta-band__inner{position:relative;z-index:3;max-width:600px;text-align:center;}
.cta-band h2{
  font-family:var(--serif);
  font-size:clamp(32px,5.5vw,48px);line-height:1.1;
  margin:0 0 20px;color:var(--bone);
}
.cta-band p{
  font-size:clamp(15px,1.9vw,16px);line-height:1.7;
  color:var(--body);margin:0 0 30px;text-wrap:pretty;
}
.image-break{position:relative;height:clamp(220px,34vw,420px);overflow:hidden;}
.image-break img{width:100%;height:100%;object-fit:cover;}
.image-break::after{content:"";position:absolute;inset:0;background:rgba(12,11,10,.8);}

.info-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:clamp(32px,4vw,48px);
}
.two-col{
  padding:clamp(60px,8vw,100px) var(--px);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap:clamp(40px,5vw,64px);
  align-items:start;
}
.map{
  width:100%;aspect-ratio:4/3;
  border-radius:4px;overflow:hidden;
  border:1px solid var(--line);
}
.map iframe{width:100%;height:100%;border:0;filter:grayscale(1) invert(92%) contrast(90%);}

/* ==========================================================================
   Contact form
   ========================================================================== */
.contact-grid{
  padding:0 var(--px) clamp(70px,9vw,110px);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));
  gap:clamp(44px,5vw,72px);
  align-items:start;
}
.form{display:flex;flex-direction:column;gap:22px;}
.form__row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap:22px;
}
.field{display:flex;flex-direction:column;gap:8px;}
.field label{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);
}
.field input,.field textarea{
  background:transparent;
  border:1px solid var(--line2);
  border-radius:4px;
  padding:14px 16px;
  color:var(--bone);
  font-size:16px; /* 16px keeps iOS from zooming on focus */
  font-family:var(--sans);
}
.field textarea{resize:vertical;}
.field input::placeholder,.field textarea::placeholder{color:var(--dimmer);}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--gold);}
.form .btn{align-self:stretch;max-width:320px;margin-top:6px;}
.note-card{
  background:var(--bg2);
  border:1px solid var(--line);
  border-radius:6px;
  padding:28px;
  margin-bottom:36px;
}
.note-card p{font-size:14px;line-height:1.7;color:var(--body);margin:0;}
.info-stack{display:flex;flex-direction:column;gap:20px;}
.info-stack .val{font-size:15px;color:var(--bone2);}

/* ==========================================================================
   Artist portfolio
   ========================================================================== */
.back{padding:24px var(--px) 0;}
.back a{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);text-decoration:none;
}
.back a:hover{color:var(--gold);}
.artist-name{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(42px,8vw,72px);line-height:1;
  margin:0 0 20px;color:var(--bone);
}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px;}
.tags span{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);
  border:1px solid var(--line2);border-radius:100px;
  padding:7px 15px;
}
.artist-bio{max-width:480px;margin:0 0 34px;}
.gallery{padding:clamp(36px,5vw,52px) var(--px) clamp(80px,10vw,130px);}
.gallery__grid{
  column-width:clamp(150px,29vw,420px);
  column-gap:clamp(10px,2vw,24px);
}
.shot{
  break-inside:avoid;
  margin-bottom:clamp(10px,2vw,24px);
  width:100%;
  border-radius:4px;overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
  cursor:pointer;
  background:#151311;
  transition:opacity .2s;
}
.shot:hover{opacity:.85;}
.shot img{width:100%;height:auto;}

/* lightbox */
.lightbox{
  position:fixed;inset:0;z-index:180;
  background:rgba(5,4,3,.94);
  display:none;
  flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,40px);
}
.lightbox.is-open{display:flex;}
.lightbox img{
  max-width:82vw;max-height:70vh;
  object-fit:contain;
  box-shadow:0 30px 90px rgba(0,0,0,.6);
}
.lightbox__count{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--dimmer);margin-top:14px;}
.lightbox button{
  position:absolute;
  background:none;border:none;padding:0;cursor:pointer;
  color:var(--muted);
  font-family:var(--mono);line-height:1;
}
.lightbox button:hover{color:var(--gold);}
.lb-close{top:14px;right:14px;width:48px;height:48px;font-size:28px;}
.lb-prev{left:4px;top:50%;transform:translateY(-50%);width:52px;height:64px;font-size:34px;}
.lb-next{right:4px;top:50%;transform:translateY(-50%);width:52px;height:64px;font-size:34px;}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{
  padding:clamp(48px,7vw,66px) var(--px) clamp(44px,6vw,60px);
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;
  gap:clamp(34px,5vw,40px);
}
.footer__brand{max-width:320px;min-width:240px;}
.footer__brand img{height:clamp(38px,5vw,46px);width:auto;margin-bottom:20px;}
.footer__brand p{font-size:13px;line-height:1.6;color:var(--dim);margin:0 0 22px;text-wrap:pretty;}
.footer__nav{
  display:flex;gap:clamp(40px,7vw,70px);
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
}
.footer__nav div{display:flex;flex-direction:column;gap:14px;}
.footer__nav a{color:var(--muted);text-decoration:none;padding:4px 0;}
.footer__nav a:hover{color:var(--gold);}

/* ==========================================================================
   ≤1200px — stack the split sections
   ========================================================================== */
@media (max-width:1200px){
  /* flex column so the art centres reliably regardless of child order */
  .split{padding:clamp(60px,7vw,90px) var(--px);min-height:0;display:flex;flex-direction:column;}
  .s-home-hero{padding:clamp(40px,5vw,72px) var(--px) clamp(60px,7vw,84px);}
  .s-studio-hero{padding:clamp(44px,5vw,72px) var(--px) clamp(60px,7vw,84px);}
  .s-artist-hero{padding:clamp(34px,4vw,60px) var(--px) clamp(60px,7vw,84px);}

  /* the art wrapper becomes a centred square; the circles fill it */
  .split__art{
    display:block;
    align-self:center;
    position:relative;
    width:min(78vw,400px);
    aspect-ratio:1/1;
    margin:0 auto 46px;
  }
  .s-home-hero .split__art{margin:54px auto 0;}
  .s-artist-hero .split__art{width:min(74vw,380px);margin:0 auto 40px;}

  /* the extra .split .split__art ancestors keep these ahead of the
     per-section desktop geometry (.s-home-visit .split__img etc.) */
  .split .split__art .split__ring,
  .split .split__art .split__img{
    left:auto;right:auto;top:auto;bottom:auto;
    width:auto;height:auto;
    transform:none;
  }
  .split .split__art .split__ring{inset:-13px;border:1px solid rgba(201,168,106,.24);}
  .split .split__art .split__img{inset:0;box-shadow:0 26px 70px rgba(0,0,0,.6);}

  .split__body,
  .s-home-studio .split__body,
  .s-studio-details .split__body{
    margin-left:0;
    max-width:640px;
    padding-top:0;
  }
}

/* ==========================================================================
   ≤820px — mobile
   ========================================================================== */
@media (max-width:820px){
  .nav__links,.nav__cta{display:none;}
  .nav__burger{display:flex;}

  .btn-row{flex-direction:column;align-items:stretch;gap:12px;}
  .btn-ghost{
    border:1px solid rgba(255,255,255,.35);
    border-radius:100px;
    padding:17px 32px;
  }
  .btn-ghost:hover{border-color:var(--gold);}

  .roster{padding:clamp(56px,8vw,80px) var(--px) 48px;}
  .grid-residents{grid-template-columns:repeat(2,1fr);}
  .guest-list{grid-template-columns:1fr;}
  .guest{flex-direction:column;align-items:flex-start;row-gap:4px;}
  .guest span{white-space:normal;}
  .h-italic{white-space:normal;}

  .lightbox img{max-width:92vw;max-height:64vh;}
  .lb-prev,.lb-next{width:56px;height:72px;}

  .footer{gap:34px;}
  .footer__nav{gap:48px;}
}