/* Studio Memo | studio-overview screen. Mobile-first and scroll-snap compatible. */
.memo-home .memo-studio-overview{
  --studio-background:#0f0f0e;
  --studio-text:#fff;
  position:relative;isolation:isolate;
  width:100%;height:100svh;min-height:100svh;
  overflow:hidden;background:var(--studio-background);color:var(--studio-text);
  scroll-snap-align:start;scroll-snap-stop:always;
}
.memo-inside:not([data-discipline="tattoo"])>.memo-studio-overview{display:none}
@supports(height:100dvh){.memo-home .memo-studio-overview{height:100dvh;min-height:100dvh}}
.studio-overview-inner{
  display:flex;flex-direction:column;gap:clamp(14px,2.8vh,25px);
  height:100%;width:min(100%,1100px);margin:auto;
  padding:max(30px,env(safe-area-inset-top)) clamp(14px,4vw,48px) max(22px,env(safe-area-inset-bottom));
}
.studio-overview-heading{text-align:center;flex:none}
.studio-overview-overline{
  font:600 10px/1.2 var(--memo-copy,"Roboto",Arial,sans-serif);
  letter-spacing:.2em;margin:0 0 9px;color:var(--studio-text);
}
.studio-overview-heading h2{
  margin:0;font:500 clamp(32px,8.9vw,65px)/1.02 var(--memo-display,"Montserrat",Arial,sans-serif);
  letter-spacing:-.062em;color:var(--studio-text);
}
.studio-overview-heading h2 span{color:var(--studio-text)}
.studio-mood-strip{
  display:flex;gap:13px;align-items:center;flex:none;
  overflow-x:auto;overflow-y:hidden;
  padding:4px 0 9px;scrollbar-width:none;
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  touch-action:pan-x;scroll-snap-type:x proximity;
}
.studio-mood-strip::-webkit-scrollbar{display:none}
.studio-mood{
  flex:0 0 clamp(58px,19vw,96px);
  width:clamp(58px,19vw,96px);aspect-ratio:1/1.03;
  border-radius:44% 36% 41% 35%;overflow:hidden;
  scroll-snap-align:center;background:#373431;
}
.studio-mood:nth-child(2n){border-radius:36% 45% 35% 43%}
.studio-mood img{display:block;width:100%;height:100%;object-fit:cover}
.studio-rooms{
  display:flex;gap:8px;align-items:stretch;
  width:100%;flex:1 1 auto;min-height:0;
}
.studio-room{
  flex:1 1 0%;min-width:0;position:relative;isolation:isolate;
  overflow:hidden;border-radius:clamp(27px,7vw,59px);
  background:#403e3b;transition:flex .48s cubic-bezier(.22,.7,.19,1),border-radius .48s ease;
}
.studio-room.is-selected{flex:2.35 1 0%}
.studio-room>img,.studio-room-shade{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.studio-room>img{z-index:-2;object-fit:cover;object-position:50% 38%;transition:transform .5s}
.studio-room.is-selected>img{transform:scale(1.035)}
.studio-room-shade{z-index:-1;background:linear-gradient(180deg,#0707070b 5%,#0c0b0b40 40%,#080808be 100%)}
.studio-room-select{
  position:absolute;inset:0;width:100%;height:100%;
  border:0;background:transparent;color:#fff;cursor:pointer;padding:0;
  display:flex;align-items:flex-end;justify-content:center;
}
.studio-room-title{
  position:absolute;bottom:clamp(15px,4vh,44px);left:0;right:0;
  text-align:center;padding:0 3px;
  font:600 clamp(12px,3vw,21px)/1.2 var(--memo-copy,"Roboto",Arial,sans-serif);
  letter-spacing:-.015em;word-break:normal;overflow-wrap:anywhere;
  text-shadow:0 2px 9px #000b;transition:bottom .3s,transform .3s;
}
.studio-room:not(.is-selected) .studio-room-title{
  bottom:19px;left:50%;right:auto;width:max-content;max-width:150px;
  transform:translateX(-50%) rotate(-90deg);
  font-size:clamp(11px,2.9vw,16px);white-space:nowrap;overflow-wrap:normal;
}
.studio-room.is-selected .studio-room-title{bottom:91px}
.studio-room-action{
  position:absolute;z-index:2;left:11px;right:11px;bottom:clamp(15px,2.7vh,24px);
  display:flex;align-items:center;justify-content:center;
  width:calc(100% - 22px);min-width:0;min-height:51px;
  border-radius:999px;padding:11px 6px;border:1px solid rgba(255,255,255,.3);
  color:#fff;background:rgba(32,32,36,.38);
  font:600 clamp(12px,3.1vw,15px)/1.2 var(--memo-copy,"Roboto",Arial,sans-serif);
  -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 8px 30px #0004,inset 0 1px 0 #ffffff30;
  transition:opacity .25s,transform .25s;cursor:pointer;
}
.studio-room:not(.is-selected) .studio-room-action{
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(14px);
}
.studio-room.is-selected .studio-room-action{opacity:1;visibility:visible;transform:none}
.studio-room-popup{
  position:absolute;inset:0;z-index:8;display:flex;
  align-items:flex-end;justify-content:center;
  background:#0009;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.studio-room-popup[hidden]{display:none!important}
.studio-room-popup-panel{
  position:relative;width:100%;max-width:660px;min-height:38%;
  border-radius:32px 32px 0 0;background:#1f1e1e;color:white;
  padding:60px clamp(25px,6vw,50px) 44px;
  border:1px solid #ffffff28;border-bottom:0;
  box-shadow:0 -12px 40px #0006;
  animation:studio-popup-in .33s cubic-bezier(.2,.75,.2,1);
}
.studio-room-popup-close{
  position:absolute;top:13px;right:15px;width:42px;height:42px;
  display:grid;place-items:center;border:1px solid #ffffff4a;border-radius:50%;
  background:rgba(32,32,36,.38);color:#fff;
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
}
.studio-room-popup-close svg{width:20px;height:20px}
.studio-popup-kicker{
  font:600 10px/1.2 var(--memo-copy,"Roboto",Arial,sans-serif);
  letter-spacing:.2em;margin:0 0 15px;color:#fff;
}
.studio-room-popup-panel h3{
  font:500 clamp(33px,9vw,58px)/1.1 var(--memo-display,"Montserrat",Arial,sans-serif);
  letter-spacing:-.055em;margin:0 0 14px;color:#fff;
}
.studio-room-popup-panel>p:last-child{
  color:#fff;font:400 15px/1.5 var(--memo-copy,"Roboto",Arial,sans-serif);margin:0;
}
@keyframes studio-popup-in{from{transform:translateY(45px);opacity:.5}to{transform:none;opacity:1}}
@media(max-width:700px){
 .studio-overview-inner{gap:clamp(13px,2.5vh,21px)}
 .studio-mood-strip{gap:9px;margin-inline:-14px;padding-inline:14px}
 .studio-rooms{gap:6px}
 .studio-room.is-selected{flex:2.4 1 0%}
 .studio-room{border-radius:34px}
 .studio-room.is-selected .studio-room-title{bottom:83px;font-size:clamp(17px,4.2vw,22px)}
 .studio-room-action{left:9px;right:9px;width:calc(100% - 18px);min-height:48px;bottom:19px;font-size:12px}
}
@media(max-height:650px){
 .studio-overview-inner{padding-top:12px;padding-bottom:13px;gap:10px}
 .studio-overview-overline{font-size:9px;margin-bottom:5px}
 .studio-overview-heading h2{font-size:clamp(27px,6vh,46px)}
 .studio-mood{flex-basis:clamp(48px,14vh,70px);width:clamp(48px,14vh,70px)}
 .studio-room.is-selected .studio-room-title{bottom:69px}
 .studio-room-action{bottom:11px;min-height:44px}
}
@media(min-width:850px){
 .studio-rooms{gap:16px}
 .studio-mood-strip{justify-content:center}
 .studio-room.is-selected{flex:2 1 0%}
 .studio-room.is-selected .studio-room-title{font-size:24px}
}
@media(prefers-color-scheme:light){
 .memo-home .memo-studio-overview{--studio-background:#f7f7f5;--studio-text:#141414}
}
html[data-theme="day"] .memo-home .memo-studio-overview{--studio-background:#f7f7f5;--studio-text:#141414}
html[data-theme="night"] .memo-home .memo-studio-overview{--studio-background:#0f0f0e;--studio-text:#fff}
@media(prefers-reduced-motion:reduce){
 .studio-room,.studio-room>img,.studio-room-title,.studio-room-action{transition:none!important}
 .studio-room-popup-panel{animation:none}
}


/* Compact room choices; visual titles appear only in the full-screen story. */
.memo-home .studio-overview-inner{justify-content:center;gap:clamp(13px,2.4vh,23px)}
.memo-home .studio-rooms{flex:0 0 auto;height:clamp(220px,40svh,390px);margin-top:0}
.memo-home .studio-room-shade{background:linear-gradient(180deg,#09090905,#08080818 62%,#080808ae)}
/* Fullscreen swipeable room story: photographs above, white Montserrat/Roboto copy below. */
.memo-home .studio-room-popup{
 position:absolute;inset:0;z-index:8;display:block;overflow:hidden;
 background:#080808;color:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;
 animation:studio-full-in .35s ease both;
}
.memo-home .studio-room-popup[hidden]{display:none!important}
.memo-home .studio-room-popup-viewport{
 position:absolute;inset:0;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;
 overscroll-behavior-x:contain;scroll-snap-type:x mandatory;touch-action:pan-x;
 scrollbar-width:none;-webkit-overflow-scrolling:touch
}
.memo-home .studio-room-popup-viewport::-webkit-scrollbar{display:none}
.memo-home .studio-room-popup-track{display:flex;width:100%;height:100%}
.memo-home .studio-room-page{
 position:relative;isolation:isolate;flex:0 0 100%;width:100%;height:100%;
 overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always
}
.memo-home .studio-room-page-image,.memo-home .studio-room-page-shade{
 position:absolute;inset:0;width:100%;height:100%;pointer-events:none
}
.memo-home .studio-room-page-image{z-index:-2;object-fit:cover;object-position:center 40%}
.memo-home .studio-room-page-shade{
 z-index:-1;background:linear-gradient(180deg,#08080842 0%,#08080809 28%,#08080840 48%,#080808d5 76%,#040404fc 100%)
}
.memo-home .studio-room-page-bottom{
 position:absolute;bottom:clamp(96px,15svh,160px);left:0;right:0;
 max-width:690px;padding:0 clamp(21px,6vw,60px);margin:0 auto;color:#fff
}
.memo-home .studio-room-page-kicker{
 font:600 10px/1.3 var(--memo-copy,"Roboto",Arial,sans-serif);
 letter-spacing:.1em;color:#fff;margin:0 0 13px
}
.memo-home .studio-room-page-bottom h3{
 font:500 clamp(42px,12vw,73px)/1 var(--memo-display,"Montserrat",Arial,sans-serif);
 letter-spacing:-.065em;color:#fff;margin:0 0 17px
}
.memo-home .studio-room-page-description{
 font:400 clamp(14px,3.5vw,17px)/1.53 var(--memo-copy,"Roboto",Arial,sans-serif);
 color:#fff;margin:0;max-width:37ch;text-wrap:pretty
}
.memo-home .studio-room-popup-close{
 position:absolute;right:clamp(17px,5vw,50px);top:max(18px,env(safe-area-inset-top));
 z-index:10;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
 border:1px solid #ffffff4b;background:rgba(32,32,36,.38);color:#fff;
 -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%)
}
.memo-home .studio-room-popup-close svg{width:20px;height:20px}
.memo-home .studio-room-popup-footer{
 position:absolute;bottom:max(23px,env(safe-area-inset-bottom));left:0;right:0;
 display:flex;flex-direction:column;align-items:center;gap:12px;
 z-index:3;pointer-events:none
}
.memo-home .studio-room-popup-footer p{
 font:400 11px/1.2 var(--memo-copy,"Roboto",Arial,sans-serif);color:#fff;margin:0
}
.memo-home .studio-room-page-dots{display:flex;gap:7px;align-items:center}
.memo-home .studio-room-page-dots span{
 width:16px;height:3px;border-radius:8px;background:#ffffff6d;transition:width .2s,background .2s
}
.memo-home .studio-room-page-dots span.is-active{width:34px;background:#fff}
@keyframes studio-full-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media(max-width:700px){
 .memo-home .studio-rooms{height:clamp(215px,36svh,332px)}
 .memo-home .studio-room-page-bottom{bottom:clamp(108px,16svh,150px)}
 .memo-home .studio-room-page-bottom h3{font-size:clamp(39px,11.5vw,55px)}
}
@media(max-height:650px){
 .memo-home .studio-rooms{height:clamp(165px,32svh,230px)}
 .memo-home .studio-room-page-bottom{bottom:84px}
 .memo-home .studio-room-page-bottom h3{font-size:clamp(32px,8vh,46px);margin-bottom:10px}
 .memo-home .studio-room-page-description{font-size:13px}
 .memo-home .studio-room-popup-footer{bottom:14px;gap:8px}
}
@media(min-width:850px){.memo-home .studio-rooms{height:clamp(280px,43svh,450px)}}
@media(prefers-reduced-motion:reduce){.memo-home .studio-room-popup{animation:none}.memo-home .studio-room-page-dots span{transition:none}}


/* Align Studio heading exactly with CHOOSE YOUR ARTIST, including mobile and short screens. */
.memo-home .studio-overview-inner{
  width:min(100%,1100px);
  padding-top:max(54px,env(safe-area-inset-top));
  justify-content:flex-start;
  gap:clamp(12px,2vh,19px);
}
.memo-home .studio-overview-heading{
  width:100%;
  max-width:750px;
  margin:0 auto clamp(12px,2.4vh,20px);
  text-align:center;
}
.memo-home .studio-overview-overline{
  margin:0 0 12px;
  font:600 10px/1.3 var(--memo-copy,"Roboto",Arial,sans-serif);
  letter-spacing:.21em;
}
.memo-home .studio-overview-heading h2{
  font:500 clamp(37px,10vw,68px)/1.02 var(--memo-display,"Montserrat",Arial,sans-serif);
  letter-spacing:-.065em;
  margin:0;
}
.memo-home .studio-overview-description{
  font:400 13px/1.45 var(--memo-copy,"Roboto",Arial,sans-serif);
  color:var(--studio-text);
  max-width:37ch;
  margin:14px auto 0;
  text-align:center;
}
.memo-home .studio-rooms{margin-top:0}
@media(max-width:700px){
  .memo-home .studio-overview-inner{padding-top:max(54px,env(safe-area-inset-top))}
  .memo-home .studio-overview-heading{margin-bottom:clamp(13px,2.3vh,18px)}
  .memo-home .studio-overview-description{font-size:13px}
}
@media(max-height:650px){
  .memo-home .studio-overview-inner{padding-top:20px;gap:9px}
  .memo-home .studio-overview-heading{margin-bottom:8px}
  .memo-home .studio-overview-overline{margin-bottom:5px}
  .memo-home .studio-overview-heading h2{font-size:clamp(27px,6.5vh,42px)}
  .memo-home .studio-overview-description{margin-top:5px;font-size:12px;line-height:1.35}
}


/* STUDIO MEMO SHARED OVERVIEW DESIGN — one rule for Artist and Studio.
   The Artist design is the approved source of truth for both headings. */
.memo-home :is(.memo-artist-overview,.memo-studio-overview){
  --memo-overview-bg:#0c0c0d;
  --memo-overview-ink:#fff;
  --memo-overview-muted:rgba(255,255,255,.7);
  background:var(--memo-overview-bg);
  color:var(--memo-overview-ink);
}
.memo-home :is(.memo-artist-overview,.memo-studio-overview) :is(.artist-chooser-inner,.studio-overview-inner){
  padding-top:max(54px,env(safe-area-inset-top));
}
.memo-home :is(.memo-artist-overview,.memo-studio-overview) :is(.artist-chooser-heading,.studio-overview-heading){
  text-align:center;
  flex:none;
}
.memo-home :is(.memo-artist-overview,.memo-studio-overview) :is(.artist-chooser-kicker,.studio-overview-overline){
  margin:0 0 12px;
  font:600 10px/1.3 var(--memo-copy,"Roboto",Arial,sans-serif);
  letter-spacing:.21em;
  color:var(--memo-overview-muted);
}
.memo-home :is(.memo-artist-overview,.memo-studio-overview) :is(.artist-chooser-heading,.studio-overview-heading) h2{
  margin:0;
  font:500 clamp(37px,10vw,68px)/1.02 var(--memo-display,"Montserrat",Arial,sans-serif);
  letter-spacing:-.065em;
  color:var(--memo-overview-ink);
}
.memo-home :is(.memo-artist-overview,.memo-studio-overview) :is(.artist-chooser-heading,.studio-overview-heading) h2 span{
  color:var(--memo-overview-ink);
}
.memo-home :is(.memo-artist-overview,.memo-studio-overview) :is(.artist-chooser-description,.studio-overview-description){
  margin:14px 0 0;
  font:400 13px/1.45 var(--memo-copy,"Roboto",Arial,sans-serif);
  letter-spacing:normal;
  color:var(--memo-overview-muted);
  max-width:none;
  text-align:center;
}
@media(max-height:650px){
 .memo-home :is(.memo-artist-overview,.memo-studio-overview) :is(.artist-chooser-inner,.studio-overview-inner){padding-top:20px}
 .memo-home :is(.memo-artist-overview,.memo-studio-overview) :is(.artist-chooser-kicker,.studio-overview-overline){margin-bottom:5px}
 .memo-home :is(.memo-artist-overview,.memo-studio-overview) :is(.artist-chooser-heading,.studio-overview-heading) h2{font-size:clamp(27px,6.5vh,42px)}
 .memo-home :is(.memo-artist-overview,.memo-studio-overview) :is(.artist-chooser-description,.studio-overview-description){margin-top:5px}
}
@media(prefers-color-scheme:light){
 .memo-home :is(.memo-artist-overview,.memo-studio-overview){
  --memo-overview-bg:#f8f8f6;
  --memo-overview-ink:#151515;
  --memo-overview-muted:rgba(15,15,15,.68);
 }
}
html[data-theme="day"] .memo-home :is(.memo-artist-overview,.memo-studio-overview){
  --memo-overview-bg:#f8f8f6;
  --memo-overview-ink:#151515;
  --memo-overview-muted:rgba(15,15,15,.68);
}
html[data-theme="night"] .memo-home :is(.memo-artist-overview,.memo-studio-overview){
  --memo-overview-bg:#0c0c0d;
  --memo-overview-ink:#fff;
  --memo-overview-muted:rgba(255,255,255,.7);
}