/* RAK BKK — dressing (loaded after house.css).
   Draws on Brand Guidelines V3: the "In Between" curtain idea (layers that overlap
   and reveal), Pattern 02 · Organic Petal as texture around the photos only;
   everything else stays clean. Photos settle gently into place. */

:root {
  --petal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M0 28Q28 6 56 28Q28 50 0 28ZM28 0Q50 28 28 56Q6 28 28 0Z'/%3E%3Cpath d='M28 24.5l3.5 3.5-3.5 3.5-3.5-3.5z' fill='black' stroke='none'/%3E%3C/svg%3E");
}

/* ---- Bands: the petal lattice only where there are photos ---- */
.band { position: relative; background: var(--panel); isolation: isolate; }
.band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--oak); opacity: .16;
  -webkit-mask: var(--petal) 0 0 / 56px 56px repeat; mask: var(--petal) 0 0 / 56px 56px repeat; }
.band > section { padding-bottom: 80px !important; }
.ba-band { margin-top: 56px; padding: 64px 0 56px; }
.ba-band .ba { margin-top: 0; }
.gallery-band, .band:has(.gallery) { margin-top: 80px; }

/* ---- Opening photo: an arch, with a petal-filled arch set behind it ---- */
.home-opening .hero { position: relative; }
.home-opening .hero .ph { border-radius: 50% 50% 0 0 / 30% 30% 0 0; height: 100%; position: relative; z-index: 1; }
.home-opening .hero::before { content: ""; position: absolute; inset: 18px 18px -18px -18px; border: 1px solid var(--oak);
  border-radius: 50% 50% 0 0 / 30% 30% 0 0; background: var(--panel); }
.home-opening .hero::after { content: ""; position: absolute; inset: 18px 18px -18px -18px; border-radius: 50% 50% 0 0 / 30% 30% 0 0;
  background: var(--oak); opacity: .22; -webkit-mask: var(--petal) 0 0 / 56px 56px repeat; mask: var(--petal) 0 0 / 56px 56px repeat; }
@media (max-width: 760px) {
  .home-opening .hero::before, .home-opening .hero::after { inset: 12px 12px -12px -12px; }
}

/* ---- Photos as framed prints: a fine ivory mount line inside each ---- */
.pack .ph, .ev .ph, .ba .ph { position: relative; }
.pack .ph::after, .ev .ph::after, .ba .ph::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(241,231,214,.75); pointer-events: none; }

/* ---- Before / after: read as pairs ---- */
.ba { gap: 16px 16px; }
.ba .tag { top: 22px; left: 22px; z-index: 2; }

/* ---- Gallery: heading, captions, mount lines ---- */
.gallery h2.big { margin-bottom: 32px; }
.mosaic figure { position: relative; }
.mosaic figure::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(241,231,214,.6); pointer-events: none; }
.mosaic figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 22px 18px; z-index: 1;
  background: linear-gradient(to top, rgba(28,24,20,.62), rgba(28,24,20,0));
  color: #F1E7D6; font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }

/* ---- Gentle movement ---- */
.ph { display: block; overflow: hidden; }
.mosaic .ph { height: 100%; }
.ph img { transition: transform 1.6s cubic-bezier(.2,.7,.2,1), opacity 1.2s ease; }
.ph.will-move img { transform: scale(1.08); opacity: 0; }
.ph.will-move.in-view img { transform: scale(1); opacity: 1; }
.pack:hover .ph img, .ev:hover .ph img, .ba figure:hover .ph img, .mosaic figure:hover .ph img { transform: scale(1.04); transition-duration: 1.2s; }
.home-opening .hero .ph.in-view img { animation: drift 24s ease-in-out 1.6s infinite alternate; }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.06) translateY(-1%); } }
@media (prefers-reduced-motion: reduce) {
  .ph img, .ph.will-move img { transition: none; transform: none !important; opacity: 1 !important; animation: none !important; }
}

/* ---- Instagram, under the enquiry form ---- */
.insta { display: block; margin-top: 24px; text-decoration: none; color: var(--ink); }
.insta-head { display: flex; align-items: center; gap: 14px; padding: 0 0 16px; border-bottom: 1px solid var(--ink); }
.insta-head svg { width: 30px; height: 30px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; }
.insta-head b { display: block; font-size: 18px; font-weight: 500; letter-spacing: .08em; }
.insta-head small { display: block; font-size: 15px; color: var(--soft); }
.insta-go { margin-left: auto; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; padding: 10px 16px; border: 1px solid var(--ink); }
.insta:hover .insta-go { background: var(--ink); color: var(--ground); }
.insta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.insta-grid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.insta:hover .insta-grid img { transform: scale(1.03); }