/* ============================================================
   Bookings / Shop shared styles
   ============================================================ */
.page-head{ margin-bottom:34px; }
.page-head .eyebrow{ margin-bottom:14px; display:block; }
.page-head h1{ font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:clamp(2.1rem,10vw,3rem); letter-spacing:-.01em; line-height:.98; }
.page-head h1::after{ content:""; display:block; width:52px; height:3px; margin-top:16px; background:var(--accent); border-radius:2px; box-shadow:0 0 18px -2px var(--glow); }
.page-head p{ color:var(--muted); margin-top:16px; max-width:52ch; }

/* ---------- SHOP ---------- */
.shop-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.product{ border:1px solid var(--border); background:var(--surface); border-radius:var(--radius); overflow:hidden; transition:transform .2s var(--ease), border-color .2s; }
.product:hover{ transform:translateY(-3px); border-color:var(--border-strong); }
.product .thumb{ aspect-ratio:1; position:relative; overflow:hidden; background:var(--bg-2); }
.product .thumb img{ width:100%; height:100%; object-fit:cover; }
.product .thumb.thumb--contain{ background:#000; }
.product .thumb.thumb--contain img{ object-fit:contain; }
.product .thumb.thumb--pad{ background:#000; padding:13%; }
.product .thumb.thumb--pad img{ object-fit:contain; }
.product .tag{ position:absolute; top:10px; left:10px; }
.product .body{ padding:13px 14px 16px; }
.product .name{ font-weight:600; font-size:.95rem; }
.product .price{ color:var(--muted); font-size:.88rem; margin-top:3px; }
.product .buy{ margin-top:12px; width:100%; padding:10px; border-radius:11px; background:var(--surface-2); border:1px solid var(--border); font-weight:600; font-size:.85rem; transition:background .2s, color .2s, border-color .2s; }
.product .buy:hover{ background:var(--accent); border-color:transparent; color:#04121a; }
.shop-note{ text-align:center; color:var(--muted-2); font-size:.8rem; margin-top:26px; }

/* The unreleased shop sits behind oversized, crossed caution tape. */
.shop-main{ max-width:1000px; position:relative; }
.shop-head{ position:relative; padding:24px 0 32px; margin-bottom:10px; }
.shop-head h1{ font-size:clamp(4rem, 12vw, 7rem); font-weight:400; transform:rotate(-4deg); transform-origin:left center; }
.shop-head h1::after{ display:none; }
.shop-head .eyebrow{ color:var(--accent-2); font-size:.66rem; letter-spacing:.22em; }
.shop-head p{ font-size:1rem; margin:12px 0 16px; }
.shop-status{ display:inline-block; padding:8px 12px; border:1px solid var(--accent); color:var(--accent-2); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; background:rgba(var(--accent-rgb),.06); }
.shop-jaws{ position:absolute; width:clamp(90px, 18vw, 170px); right:6%; top:30px; transform:rotate(12deg); opacity:.85; filter:hue-rotate(var(--accent-hue-shift)); }
.shop-locked{ position:relative; isolation:isolate; overflow:hidden; padding:24px 0; border-block:1px solid rgba(var(--accent-rgb),.22); }
.shop-page .shop-grid{ gap:18px; filter:saturate(.35) brightness(.5); pointer-events:none; }
.shop-page .product{ border-radius:4px; border-color:rgba(var(--accent-rgb),.4); background:#09090e; }
.shop-page .product .thumb{ background:#08070b; }
.shop-page .product .body{ padding:16px; }
.shop-page .product .price{ color:var(--accent-2); }
.shop-page .product .buy{ border-radius:2px; color:var(--muted); cursor:default; }
.shop-tape-layer{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.caution-tape{
  position:absolute; left:-20%; width:140%; display:flex; align-items:center; justify-content:center; gap:40px;
  padding:22px 0; white-space:nowrap; color:#08050a; background:var(--accent);
  font-family:var(--font-body); font-weight:900; font-size:clamp(1.2rem, 3vw, 2.3rem); letter-spacing:.07em;
  box-shadow:0 10px 28px rgba(0,0,0,.65); border-block:2px solid #0a060b;
}
.caution-tape::before,.caution-tape::after{
  content:""; position:absolute; left:0; right:0; height:7px;
  background:repeating-linear-gradient(120deg, #0a060b 0 12px, transparent 12px 24px);
}
.caution-tape::before{ top:3px; } .caution-tape::after{ bottom:3px; }
.caution-tape span::after{ content:"✦"; display:inline-block; margin-left:40px; }
.tape-one{ top:15%; transform:rotate(-11deg); }
.tape-two{ top:43%; transform:rotate(13deg); background:#0a060b; color:var(--accent); border-color:var(--accent); }
.tape-two::before,.tape-two::after{ background:repeating-linear-gradient(120deg, var(--accent) 0 12px, transparent 12px 24px); }
.tape-three{ top:76%; transform:rotate(-8deg); }
.shop-page .shop-note{ color:var(--accent-2); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; margin-top:28px; }
@media (min-width:780px){ .shop-page .shop-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:480px){
  .shop-jaws{ right:0; top:45px; width:80px; opacity:.55; }
  .shop-page .shop-grid{ gap:10px; }
  .shop-page .product .body{ padding:12px; }
  .shop-page .product .name{ font-size:.8rem; }
  .shop-status{ font-size:.58rem; letter-spacing:.04em; }
  .caution-tape{ padding:17px 0; gap:24px; }
  .caution-tape span::after{ margin-left:24px; }
}

/* ============================================================
   ABOUT
   ============================================================ */
.about-hero{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:26px; align-items:center;
  margin-bottom:40px;
}
.about-portrait{
  position:relative; border-radius:14px; overflow:hidden;
  aspect-ratio:4/5; background:var(--bg-2);
  border:1px solid var(--border); box-shadow:0 30px 70px -30px rgba(0,0,0,.9);
}
.about-portrait img{ width:100%; height:100%; object-fit:cover; }
.about-intro p{ color:var(--muted); font-size:1rem; line-height:1.75; margin-bottom:14px; }
.about-intro p strong{ color:var(--text); font-weight:700; }
.about-intro .lead{ color:var(--text); font-size:1.12rem; line-height:1.55; font-weight:500; }
.about-cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.about-cta .btn{ font-size:.9rem; }

@media (max-width:720px){
  .about-hero{ grid-template-columns:1fr; gap:20px; }
  .about-portrait{ aspect-ratio:1/1; max-height:60vh; }
}

.about-section{ margin:44px 0; }
.about-section h2{
  font-family:var(--font-display); font-weight:900; text-transform:uppercase;
  font-size:clamp(1.3rem,5vw,1.7rem); letter-spacing:-.01em; margin-bottom:8px;
}
.about-section h2::after{ content:""; display:block; width:44px; height:3px; margin-top:12px; background:var(--accent); border-radius:2px; box-shadow:0 0 18px -2px var(--glow); }
.about-section p{ color:var(--muted); font-size:.98rem; line-height:1.75; margin-top:16px; }

.about-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:22px; }
.about-gallery figure{ position:relative; border-radius:12px; overflow:hidden; aspect-ratio:3/4; border:1px solid var(--border); background:var(--bg-2); }
.about-gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.about-gallery figure:hover img{ transform:scale(1.05); }
@media (max-width:560px){
  .about-gallery{ grid-template-columns:1fr 1fr; }
}

.about-facts{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.about-fact{
  border:1px solid var(--border); background:var(--surface); border-radius:999px;
  padding:8px 16px; font-size:.82rem; color:var(--muted);
}
.about-fact strong{ color:var(--accent); font-weight:700; }

/* ============================================================
   BOOK A SESSION — studio booking widget
   (ported from proddvniel.com, recolored to the ice-blue theme)
   ============================================================ */
.sp-booking{ max-width:1140px; margin:0 auto; padding:0.5rem 0 1.25rem; }
.sp-booking-head{ text-align:center; margin:0 0 2.25rem; }
.sp-eyebrow{
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}
.sp-booking-title{
  font-family:var(--font-display);
  font-size:clamp(2.2rem, 9vw, 3.4rem);
  font-weight:700; text-transform:uppercase;
  letter-spacing:-.02em; line-height:.95;
  margin:.35rem 0 1rem; color:var(--text);
}
.sp-booking-sub{
  font-size:.92rem; line-height:1.7; color:var(--muted);
  max-width:54ch; margin:0 auto;
}
.sp-booking-sub strong{ color:var(--text); font-weight:700; }

/* Two-column: booking card (left) + room slideshow (right) */
.sp-booking-layout{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; align-items:stretch; }
.sp-bk-gallery{
  position:relative; border-radius:18px; overflow:hidden;
  border:1px solid var(--border); background:var(--bg-2); min-height:360px;
}
.sp-bk-gallery-frames{ position:absolute; inset:0; }
.sp-bk-frame{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transform:scale(1.05);
  transition:opacity 1s var(--ease); will-change:opacity, transform;
}
.sp-bk-frame.on{ opacity:1; transform:scale(1); transition:opacity 1s var(--ease), transform 6.5s var(--ease); }
.sp-bk-gallery::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.55), transparent 45%);
}
.sp-bk-gallery-label{
  position:absolute; left:1rem; bottom:1rem; z-index:2;
  font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:#fff; font-weight:600;
  background:rgba(0,0,0,.42); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.16); padding:.4rem .7rem; border-radius:8px;
}
@media (max-width:820px){
  .sp-booking-layout{ grid-template-columns:1fr; gap:1rem; }
  .sp-bk-gallery{ min-height:200px; order:-1; }
  .sp-booking-card{ order:0; }
}

.sp-booking-card{
  background:var(--bg-2); border:1px solid var(--border); border-radius:18px;
  padding:2rem; display:flex; flex-direction:column; gap:1.8rem;
}
.sp-bk-label{
  display:block; font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.95rem;
}
.sp-bk-label-row{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.95rem; }
.sp-bk-label-row .sp-bk-label{ margin-bottom:0; }
.sp-bk-minnote{ flex-shrink:0; font-size:.66rem; letter-spacing:.02em; color:var(--accent); font-weight:600; text-transform:uppercase; }
.sp-bk-diff{
  flex-shrink:0; background:none; border:none; padding:0; cursor:pointer;
  font-family:var(--font-body); font-style:italic; font-size:.75rem; letter-spacing:.01em;
  color:var(--muted); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.25);
  transition:color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.sp-bk-diff:hover{ color:var(--accent); text-decoration-color:var(--glow); }
.sp-bk-rooms{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.sp-bk-room{
  display:flex; flex-direction:column; gap:.25rem; padding:.85rem 1.1rem;
  background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:12px;
  cursor:pointer; text-align:left; transition:border-color .2s var(--ease), background .2s var(--ease);
}
.sp-bk-room-name{ font-size:.98rem; font-weight:600; color:var(--text); }
.sp-bk-room-rate{ font-size:.75rem; color:var(--muted); }
.sp-bk-room:hover{ border-color:var(--border-strong); }
.sp-bk-room.is-active{ border-color:var(--accent); background:rgba(var(--accent-rgb),.14); }

.sp-bk-hours{ display:flex; flex-wrap:wrap; gap:.65rem; }
.sp-bk-hour{
  width:46px; height:46px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:10px;
  color:var(--text); font-family:var(--font-body); font-size:.92rem; font-weight:500; cursor:pointer;
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .12s var(--ease);
}
.sp-bk-hour:hover{ border-color:var(--border-strong); }
.sp-bk-hour:active{ transform:scale(.94); }
.sp-bk-hour.is-active{ border-color:var(--accent); background:rgba(var(--accent-rgb),.14); color:#fff; }

.sp-bk-foot{
  display:flex; align-items:center; justify-content:space-between; gap:1.25rem; flex-wrap:wrap;
  border-top:1px solid var(--border); padding-top:1.8rem;
}
.sp-bk-summary{ display:flex; flex-direction:column; gap:.2rem; }
.sp-bk-total{ font-size:2rem; font-weight:700; letter-spacing:-.02em; color:var(--text); font-variant-numeric:tabular-nums; }
.sp-bk-meta{ font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.sp-bk-cta{
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--accent); color:#04121a;
  font-family:var(--font-body); font-size:.72rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; text-decoration:none;
  padding:.9rem 1.4rem; border-radius:11px; border:1px solid var(--accent);
  box-shadow:0 8px 30px -8px var(--glow);
  transition:background .2s var(--ease), transform .12s var(--ease);
}
.sp-bk-cta:hover{ background:var(--accent-2); }
.sp-bk-cta:active{ transform:scale(.97); }
@media (max-width:560px){
  .sp-bk-foot{ flex-direction:column; align-items:stretch; }
  .sp-bk-cta{ justify-content:center; }
}

/* Studio bio block */
.sp-bio{ max-width:1140px; margin:2.5rem auto 0; }
.sp-bio-inner{
  border:1px solid var(--border); background:var(--surface); border-radius:18px;
  padding:1.8rem 2rem;
}
.sp-bio-eyebrow{
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); font-weight:600;
}
.sp-bio-title{ font-family:var(--font-display); font-weight:700; font-size:1.5rem; margin:.5rem 0 .8rem; letter-spacing:-.01em; }
.sp-bio-text{ color:var(--muted); font-size:.92rem; line-height:1.7; }
.sp-bio-text em{ color:var(--text); font-style:italic; }
.sp-bio-meta{ display:flex; flex-wrap:wrap; gap:1rem 1.4rem; align-items:center; margin-top:1.2rem; }
.sp-bio-loc{ display:inline-flex; align-items:center; gap:.5ch; color:var(--muted); font-size:.82rem; }
.sp-bio-loc svg{ color:var(--accent); }
.sp-bio-link{ display:inline-flex; align-items:center; gap:.4ch; color:var(--text); font-size:.82rem; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.sp-bio-link:hover{ color:var(--accent); }

/* A vs B room difference popup */
.rd-overlay{
  position:fixed; inset:0; z-index:200; display:none; place-items:center; padding:20px;
  background:rgba(3,5,9,.72); backdrop-filter:blur(8px);
}
.rd-overlay.open{ display:grid; }
.rd-card{
  position:relative; max-width:440px; width:100%;
  background:var(--bg-2); border:1px solid var(--border-strong); border-radius:18px; padding:2rem;
}
.rd-close{ position:absolute; top:.8rem; right:1rem; font-size:1.6rem; line-height:1; color:var(--muted); }
.rd-close:hover{ color:var(--text); }
.rd-eyebrow{ font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.rd-title{ font-family:var(--font-display); font-weight:700; font-size:1.4rem; margin:.4rem 0 .8rem; }
.rd-lead{ color:var(--muted); font-size:.9rem; line-height:1.6; margin-bottom:1rem; }
.rd-list{ list-style:none; display:flex; flex-direction:column; gap:.7rem; }
.rd-list li{ color:var(--muted); font-size:.88rem; line-height:1.5; padding-left:1.1rem; position:relative; }
.rd-list li::before{ content:''; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.rd-list strong{ color:var(--text); }
.rd-room{ color:var(--accent); font-weight:700; }

/* For features / shows line under the widget */
.book-alt{ text-align:center; color:var(--muted); font-size:.85rem; margin-top:2.2rem; }
.book-alt a{ color:var(--text); text-decoration:underline; text-underline-offset:2px; }
.book-alt a:hover{ color:var(--accent); }

/* A personal, photo-led About page. */
.about-main{ max-width:1100px; padding-top:calc(var(--nav-h) + 50px); }
.about-influences{ margin:0 0 56px; }
.about-influences h2{ font:400 clamp(2rem,4vw,3rem)/1.3 var(--font-display); margin:12px 0 20px; }
.influence-list{ display:flex; flex-wrap:wrap; gap:9px; list-style:none; }
.influence-list li{ padding:7px 12px; border:1px solid var(--border-strong); border-radius:4px; font-size:.8rem; color:var(--text); background:rgba(var(--accent-rgb),.045); }
.about-page .about-hero{ grid-template-columns:.85fr 1.15fr; gap:clamp(26px,5vw,64px); align-items:center; margin-bottom:80px; }
.about-page .about-portrait{ aspect-ratio:3/4; border-radius:3px; transform:rotate(-2deg); overflow:visible; }
.about-page .about-portrait img{ border-radius:3px; }
.about-page .about-portrait figcaption{ position:absolute; bottom:16px; left:12px; right:12px; padding:9px 12px; background:#05070add; color:var(--text); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; }
.about-intro h1{ font:400 clamp(3.4rem,6vw,5.8rem)/1.2 var(--font-display); margin:16px 0 24px; }
.about-intro h1 span{ color:var(--accent); }
.about-page .about-intro .eyebrow{ font-size:.63rem; color:var(--accent-2); letter-spacing:.16em; }
.about-page .about-intro .lead{ font-size:clamp(1.1rem,2vw,1.35rem); line-height:1.5; }
.about-page .about-intro p{ line-height:1.8; font-size:.96rem; }
.about-page .about-cta{ flex-direction:column; align-items:flex-start; margin-top:26px; gap:17px; }
.about-page .spotify-cta{ font-size:1rem; padding:16px 25px; min-width:245px; }
.spotify-cta svg{ width:23px; height:23px; margin-right:5px; }
.about-alternate{ display:inline-block; margin-top:22px; color:var(--muted); font-size:.74rem; }
.about-alternate:hover{ color:var(--text); }
.about-deserving{ display:grid; grid-template-columns:1fr 1fr; gap:26px 50px; padding-top:34px; border-top:1px solid rgba(var(--accent-rgb),.35); }
.about-section-head h2,.instagram-section h2,.about-studio h2{ font:400 clamp(2rem,4vw,3.5rem)/1.3 var(--font-display); margin-top:12px; }
.about-section-head h2{ color:var(--accent-2); }
.deserving-story p{ font-size:.98rem; line-height:1.75; margin-bottom:14px; color:var(--muted); }
.deserving-story p a{ color:var(--text); text-decoration:underline; text-underline-offset:3px; }
.deserving-story .text-link{ display:inline-block; margin-top:6px; }
.deserving-wide{ grid-column:1/-1; margin-top:12px; position:relative; }
.deserving-wide img{ width:100%; height:auto; border:1px solid var(--border-strong); border-radius:3px; }
.deserving-wide figcaption{ position:absolute; left:18px; bottom:18px; color:#fff; background:#04060abf; padding:8px 12px; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; }
.deserving-strip{ grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.deserving-strip img{ width:100%; height:auto; border-radius:3px; border:1px solid var(--border); }
.instagram-section{ margin-top:76px; }
.section-heading-row{ display:flex; justify-content:space-between; gap:20px; align-items:end; margin-bottom:26px; }
.instagram-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.instagram-grid a{ position:relative; display:block; overflow:hidden; border:1px solid var(--border-strong); border-radius:3px; }
.instagram-grid img{ width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; transition:transform .5s var(--ease); }
.instagram-grid a:hover img{ transform:scale(1.025); }
.instagram-grid span{ position:absolute; right:14px; bottom:14px; background:#04060acd; padding:8px 12px; font-size:.7rem; color:var(--text); }
.about-studio{ display:flex; gap:40px; justify-content:space-between; align-items:center; border-block:1px solid rgba(var(--accent-rgb),.3); padding:36px 0; margin-top:76px; }
.about-studio p{ max-width:54ch; color:var(--muted); line-height:1.75; font-size:.95rem; margin-top:12px; }
.about-studio .btn{ flex-shrink:0; }
@media(max-width:720px){
  .about-main{ padding-top:calc(var(--nav-h) + 30px); }
  .about-page .about-hero{ grid-template-columns:1fr; gap:36px; margin-bottom:56px; }
  .about-page .about-intro{ grid-row:1; }
  .about-page .about-portrait{ max-height:none; width:85%; max-width:380px; margin:0 auto; aspect-ratio:4/5; }
  .about-intro h1{ margin:14px 0 18px; }
  .about-deserving{ grid-template-columns:1fr; gap:22px; }
  .deserving-wide{ margin-top:0; }
  .deserving-strip{ gap:10px; }
  .deserving-wide figcaption{ left:10px; bottom:10px; font-size:.48rem; }
  .instagram-section,.about-studio{ margin-top:52px; }
  .section-heading-row{ align-items:start; flex-direction:column; gap:12px; }
  .instagram-grid{ gap:12px; }
  .instagram-grid span{ font-size:.55rem; padding:6px 8px; right:8px; bottom:8px; }
  .about-studio{ flex-direction:column; align-items:flex-start; gap:22px; }
}