/* Shared: logo, grouped galleries, video reels, lightbox.
   Each site themes it with these variables (set them on :root in style.css). */
:root{
  --m-ink:#222; --m-bg:#fff; --m-accent:#e0457b; --m-border:0px solid transparent;
  --m-radius:14px; --m-gap:12px; --m-cap-bg:rgba(0,0,0,.62); --m-cap-ink:#fff;
  --m-title-font:inherit;
}

/* ---- Logo: brush-script wordmark, like the shop's sign ---- */
.bfc-logo{font-family:"Kaushan Script","Brush Script MT","Segoe Script",cursive;font-weight:400;font-size:1.9rem;line-height:1;letter-spacing:.01em;white-space:nowrap;text-transform:none;display:inline-block;padding:.08em .06em .12em}
.bfc-logo--light{color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.35),2px 2px 0 rgba(0,0,0,.2)}
.bfc-logo--dark{color:var(--m-ink)}

/* ---- Grouped galleries ---- */
.m-group{margin:2rem 0 2.5rem}
.m-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;margin-bottom:.9rem}
.m-title{font-family:var(--m-title-font);margin:0;font-size:1.6rem}
.m-note{margin:0;opacity:.75}
.m-grid{display:grid;gap:var(--m-gap)}
.m-grid figure{margin:0;position:relative;overflow:hidden;border-radius:var(--m-radius);border:var(--m-border);background:#ddd;aspect-ratio:3/4}
.m-grid img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;transition:transform .5s ease}
.m-grid button{all:unset;display:block;width:100%;height:100%;cursor:zoom-in}
.m-grid button:focus-visible{outline:3px solid var(--m-accent);outline-offset:-3px}
.m-grid button:hover img{transform:scale(1.04)}
.m-grid figcaption{position:absolute;left:8px;bottom:8px;right:8px;width:max-content;max-width:calc(100% - 16px);background:var(--m-cap-bg);color:var(--m-cap-ink);font-size:.85rem;font-weight:600;padding:.25em .7em;border-radius:calc(var(--m-radius) / 2);pointer-events:none}
/* 5 photos: one large + four small */
.m-grid--feature{grid-template-columns:repeat(4,1fr)}
.m-grid--feature figure:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
/* 6 photos: 3 x 2 */
.m-grid--six{grid-template-columns:repeat(3,1fr)}
.m-grid--six figure{aspect-ratio:4/5}

/* photo pair: salon + adult */
.m-pair{display:grid;grid-template-columns:1.5fr 1fr;gap:var(--m-gap)}
.m-pair figure{margin:0;border-radius:var(--m-radius);overflow:hidden;border:var(--m-border);position:relative;min-height:260px}
.m-pair img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.m-pair figcaption{position:absolute;left:8px;bottom:8px;background:var(--m-cap-bg);color:var(--m-cap-ink);font-size:.85rem;font-weight:600;padding:.25em .7em;border-radius:calc(var(--m-radius) / 2)}

/* ---- Video reels (portrait, phone-like) ---- */
.m-videos{display:grid;grid-template-columns:repeat(2,minmax(0,300px));justify-content:center;gap:clamp(1rem,4vw,2.5rem);margin:2.5rem 0}
.m-video{margin:0;position:relative}
.m-video .frame{position:relative;border-radius:calc(var(--m-radius) * 1.6);overflow:hidden;border:var(--m-border);background:#000;aspect-ratio:9/16;box-shadow:0 18px 40px -18px rgba(0,0,0,.45)}
.m-video video{width:100%;height:100%;object-fit:cover;display:block}
.m-video figcaption{text-align:center;margin-top:.6rem;font-weight:700}
.m-video:nth-child(2) .frame{transform:translateY(2rem)}
.m-ctrl{position:absolute;right:10px;bottom:10px;display:flex;gap:6px}
.m-ctrl button{font:inherit;font-size:.8rem;font-weight:700;border:0;border-radius:99px;padding:.45em .85em;background:rgba(0,0,0,.6);color:#fff;cursor:pointer}
.m-ctrl button:hover{background:var(--m-accent)}
.m-ctrl button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.m-progress{position:absolute;left:0;top:0;height:4px;background:var(--m-accent);width:0}

/* ---- Lightbox ---- */
.m-lb{position:fixed;inset:0;z-index:1000;background:rgba(10,10,12,.92);display:none;align-items:center;justify-content:center;padding:3.5rem 1rem}
.m-lb.open{display:flex}
.m-lb img{max-width:min(92vw,900px);max-height:82vh;object-fit:contain;border-radius:10px}
.m-lb p{position:absolute;bottom:1rem;left:0;right:0;text-align:center;color:#fff;margin:0;font-weight:600}
.m-lb button{position:absolute;font:inherit;font-weight:700;border:0;border-radius:99px;background:#fff;color:#111;cursor:pointer;padding:.55em 1em}
.m-lb .x{top:1rem;right:1rem}
.m-lb .prev{left:1rem;top:50%;transform:translateY(-50%)}
.m-lb .next{right:1rem;top:50%;transform:translateY(-50%)}
.m-lb button:focus-visible{outline:3px solid var(--m-accent);outline-offset:2px}

@media (max-width:760px){
  .m-grid--feature,.m-grid--six{grid-template-columns:repeat(2,1fr)}
  .m-grid--feature figure:first-child{grid-row:span 1;aspect-ratio:4/3}
  .m-pair{grid-template-columns:1fr}
  .m-videos{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
  .m-video:nth-child(2) .frame{transform:none}
  .m-ctrl button{font-size:.72rem;padding:.4em .7em}
  .m-lb .prev,.m-lb .next{top:auto;bottom:3rem;transform:none}
}
@media (max-width:420px){
  .m-videos{grid-template-columns:minmax(0,300px)}
}
@media (prefers-reduced-motion:reduce){
  .m-grid img{transition:none}
  .m-grid button:hover img{transform:none}
}
.m-fb{text-align:center;margin:3rem 0 0;max-width:none}