/* Photo Studio Exclusive (/exclusive). The page is built from the studio itself: the hero takes the colour of the paper
   backdrop the guest picks (ungu, biru, putih), a darkroom contact sheet shows one real session with the photographer's
   red grease-pencil marks, the room photo is annotated, prices sit on the real blue paper. Serif display, square corners. */
.page-exclusive {
  --x-paper: #f3efe9; --x-ink: #1d1a17; --x-muted: #6e665d; --x-line: #ddd5ca; --x-ungu: #6470bc; --x-deep: #2b2752; --x-red: #e5482f;
  --x-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --x-sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --x-hand: 'Caveat', 'Segoe Print', cursive;
  background: var(--x-paper);
}
.page-exclusive main { font-family: var(--x-sans); color: var(--x-ink); }
.page-exclusive main img { display: block; }
.page-exclusive main figure { margin: 0; }
.x-wrap { width: min(1080px, 100% - 2.5rem); margin: 0 auto; }
.x-narrow { width: min(720px, 100% - 2.5rem); }
.x-label { font: 500 12px/1.5 var(--x-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--x-muted); margin: 0 0 1rem; }
.x-h2 { font-family: var(--x-serif); font-weight: 400; font-size: clamp(2.1rem, 5.4vw, 3.6rem); line-height: 1.03; letter-spacing: -.01em; margin: 0 0 2.2rem; }
.x-intro { color: var(--x-muted); max-width: 54ch; margin: -1.2rem 0 2.4rem; line-height: 1.6; }
.x-link { font: 500 1rem/1.4 var(--x-sans); color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .35em; }
.x-link:hover { text-decoration-thickness: 2px; }
.x-btn { display: inline-block; background: var(--x-ink); color: var(--x-paper); border: 1px solid var(--x-ink); border-radius: 0; padding: 1rem 1.9rem; font: 600 .95rem/1 var(--x-sans); letter-spacing: .04em; text-decoration: none; transition: background .2s, color .2s, transform .2s; }
.x-btn:hover { background: transparent; color: var(--x-ink); }

/* ── hero: the page becomes the backdrop ─────────────────────────────── */
.x-hero { --bd: #6e79c6; --fg: #fff; --fg-soft: rgba(255, 255, 255, .82); position: relative; background: var(--bd); color: var(--fg); transition: background-color .7s ease, color .7s ease; overflow: hidden; }
.x-hero[data-bd="biru"] { --bd: #26abec; --fg: #0d1822; --fg-soft: rgba(13, 24, 34, .78); }
.x-hero[data-bd="putih"] { --bd: #dcd3d8; --fg: #1d1a17; --fg-soft: rgba(29, 26, 23, .72); }
.x-hero-media { position: relative; height: 56svh; min-height: 340px; -webkit-mask-image: linear-gradient(#000 68%, transparent); mask-image: linear-gradient(#000 68%, transparent); }
.x-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; opacity: 0; transform: scale(1.04); transition: opacity .7s ease, transform 1.2s ease; }
.x-hero-media img.on { opacity: 1; transform: none; }
.x-hero-text { position: relative; padding: 0 1.25rem 3.2rem; margin-top: -4.5rem; }
.x-hero .x-label { color: var(--fg-soft); }
.x-hero h1 { font-family: var(--x-serif); font-weight: 400; font-size: clamp(2.7rem, 6.2vw, 4.5rem); line-height: 1; letter-spacing: -.015em; margin: 0 0 1.2rem; max-width: 12ch; }
.x-hero h1 em { font-style: italic; }
.x-hero-sub { color: var(--fg-soft); margin: 0 0 1.6rem; max-width: 38ch; line-height: 1.55; font-size: 1.02rem; }
.x-pick { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1.8rem; }
.x-pick > span { font: 500 12px/1 var(--x-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-soft); margin-right: .4rem; }
.x-sw { display: inline-flex; align-items: center; gap: .5rem; background: transparent; color: var(--fg); border: 1px solid color-mix(in srgb, var(--fg) 35%, transparent); border-radius: 0; padding: .55rem .85rem; font: 500 .9rem/1 var(--x-sans); cursor: pointer; transition: border-color .2s, background .2s; }
.x-sw i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--fg) 55%, transparent); }
.x-sw-ungu i { background: #6470bc; } .x-sw-biru i { background: #1b9be5; } .x-sw-putih i { background: #ece6ec; }
.x-sw:hover { border-color: var(--fg); }
.x-sw[aria-pressed="true"] { border-color: var(--fg); background: color-mix(in srgb, var(--fg) 12%, transparent); }
.x-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem; }
.x-hero-cta span { color: var(--fg-soft); font-size: .95rem; }
.x-hero-cta strong { color: var(--fg); font-weight: 600; }
.x-btn-hero { background: var(--fg); color: var(--bd); border-color: var(--fg); transition: background .7s, color .7s, border-color .7s; }
.x-btn-hero:hover { background: transparent; color: var(--fg); }
@media (min-width: 900px) {
  .x-hero { display: grid; grid-template-columns: 1.05fr .95fr; min-height: calc(100svh - 76px); }
  .x-hero-media { order: 2; height: auto; min-height: 0; -webkit-mask-image: linear-gradient(to right, transparent, #000 24%); mask-image: linear-gradient(to right, transparent, #000 24%); }
  .x-hero-text { align-self: center; margin: 0; padding: 4rem 0 5rem clamp(2rem, 6vw, 6rem); }
}

/* ── statement with two small frames set into the line ───────────────── */
.x-statement { padding: clamp(4.5rem, 11vw, 8.5rem) 1.25rem; }
.x-statement p { font-family: var(--x-serif); font-size: clamp(1.7rem, 3.8vw, 2.7rem); line-height: 1.28; max-width: 900px; margin: 0 auto; letter-spacing: -.005em; }
.page-exclusive .x-statement img { display: inline-block; height: 1.25em; width: auto; aspect-ratio: 2 / 3; object-fit: cover; vertical-align: -.24em; margin: 0 .12em; }

/* ── darkroom contact sheet ──────────────────────────────────────────── */
.x-sheet { background: #171410; color: var(--x-paper); padding: clamp(4.5rem, 10vw, 7.5rem) 0; }
.x-sheet .x-label, .x-sheet .x-intro { color: rgba(243, 239, 233, .66); }
.x-frames { list-style: none; margin: 0; padding: 0 1.25rem; display: flex; gap: 1.1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 1.25rem; scrollbar-width: none; }
.x-frames::-webkit-scrollbar { display: none; }
.x-frame { flex: 0 0 58%; scroll-snap-align: start; display: grid; gap: .5rem; align-content: start; }
.x-edge { display: flex; justify-content: space-between; font: 600 10px/1 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; letter-spacing: .14em; color: #e39b3b; }
.x-shot { position: relative; display: block; }
.x-shot img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; filter: saturate(.92); opacity: .72; transition: opacity .4s; }
.x-frame.is-pick .x-shot img { opacity: 1; filter: none; }
.x-frame:hover .x-shot img { opacity: 1; }
.x-ring { position: absolute; left: -7%; top: -5%; width: 114%; height: 110%; overflow: visible; pointer-events: none; }
.x-ring path { fill: none; stroke: var(--x-red); stroke-width: .9; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
html.x-js .x-frame .x-ring path { stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.6, .1, .3, 1) .35s; }
html.x-js .x-frame.in .x-ring path { stroke-dashoffset: 0; }
.x-hand { font: 500 1.45rem/1.1 var(--x-hand); color: #f06a50; transform: rotate(-2deg); transform-origin: left; padding-left: .2rem; }
.x-frame.is-pick .x-hand { color: var(--x-red); filter: brightness(1.15); }
@media (min-width: 760px) {
  .x-frames { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6rem 1.8rem; overflow: visible; width: min(960px, 100% - 2.5rem); margin: 0 auto; padding: 0; }
}

/* ── the room, annotated ─────────────────────────────────────────────── */
.x-room { padding: clamp(4.5rem, 10vw, 7.5rem) 0 clamp(3.5rem, 8vw, 6rem); }
.x-room-fig { position: relative; }
.x-room-fig img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.x-pin { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; display: grid; place-items: center; background: var(--x-paper); color: var(--x-ink); font: 700 14px/1 var(--x-sans); box-shadow: 0 0 0 0 rgba(243, 239, 233, .55); animation: x-pulse 2.6s ease-out infinite; }
.x-pin:nth-of-type(2) { animation-delay: .6s; } .x-pin:nth-of-type(3) { animation-delay: 1.2s; } .x-pin:nth-of-type(4) { animation-delay: 1.8s; }
@keyframes x-pulse { 0% { box-shadow: 0 0 0 0 rgba(243, 239, 233, .55); } 70%, 100% { box-shadow: 0 0 0 14px rgba(243, 239, 233, 0); } }
.x-room-notes { display: grid; gap: 2rem; padding-top: 2rem; align-items: start; }
.x-legend { list-style: none; margin: 0; padding: 0; counter-reset: pin; display: grid; gap: 1.2rem; }
.x-legend li { counter-increment: pin; display: grid; grid-template-columns: 34px 1fr; column-gap: .9rem; border-top: 1px solid var(--x-line); padding-top: 1rem; }
.x-legend li::before { content: counter(pin); grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--x-ink); color: var(--x-paper); font: 700 13px/1 var(--x-sans); }
.x-legend b { font-family: var(--x-serif); font-weight: 500; font-size: 1.45rem; line-height: 1.1; }
.x-legend span { color: var(--x-muted); margin-top: .25rem; }
.x-chain { width: min(240px, 62%); }
.x-chain img { width: 100%; aspect-ratio: 7 / 11; object-fit: cover; }
.x-chain figcaption { font: 500 1.4rem/1.1 var(--x-hand); color: var(--x-red); margin-top: .5rem; transform: rotate(-2deg); }
@media (min-width: 900px) {
  .x-room-notes { grid-template-columns: 1fr 240px; gap: 4rem; }
  .x-legend { grid-template-columns: 1fr 1fr; gap: 1.6rem 2.4rem; }
  .x-chain { width: 100%; margin-top: -9rem; position: relative; box-shadow: 0 0 0 10px var(--x-paper); }
}

/* ── steps ───────────────────────────────────────────────────────────── */
.x-section { padding: clamp(4rem, 9vw, 7rem) 0; }
.x-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--x-line); }
.x-row { display: grid; grid-template-columns: 3.6rem 1fr; gap: .3rem 1rem; padding: 1.6rem 0; border-bottom: 1px solid var(--x-line); align-items: baseline; }
.x-num { font: italic 400 2.4rem/1 var(--x-serif); color: var(--x-ungu); grid-row: span 2; }
.x-row h3 { font-family: var(--x-serif); font-weight: 400; font-size: 1.7rem; margin: 0; }
.x-row p { margin: 0; max-width: 56ch; grid-column: 2; }
@media (min-width: 760px) { .x-row { grid-template-columns: 5rem 220px 1fr; gap: 2rem; } .x-num { grid-row: auto; font-size: 3rem; } .x-row p { grid-column: auto; } }

/* ── prices on the real blue paper ───────────────────────────────────── */
.x-prices-wrap { background: linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, .12)), var(--x-paper-img) center / cover, #8cc2e4; --x-line: rgba(13, 24, 34, .22); color: #0d1822; }
.x-prices-wrap .x-label, .x-prices-wrap .x-note { color: rgba(13, 24, 34, .72); }
.x-prices { border-top: 1px solid var(--x-line); }
.x-price { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; align-items: baseline; padding: 1.4rem 0; border-bottom: 1px solid var(--x-line); }
.x-price h3 { font-family: var(--x-serif); font-weight: 400; font-size: 2.1rem; line-height: 1; margin: 0; }
.x-price .x-meta { grid-column: 1 / -1; grid-row: 2; color: rgba(13, 24, 34, .72); font-size: .92rem; margin: .45rem 0 0; }
.x-price .x-meta strong { color: #0d1822; font-weight: 700; }
.x-price .x-amt { margin: 0; font-family: var(--x-serif); font-size: 1.75rem; white-space: nowrap; }
@media (min-width: 800px) { .x-price { grid-template-columns: 220px 1fr auto; } .x-price .x-meta { grid-column: auto; grid-row: auto; margin: 0; } }
.x-note { font-size: .93rem; margin: 1.2rem 0 0; max-width: 62ch; }
.x-note .x-link { color: inherit; font-size: .93rem; }
.x-cta { margin: 2.4rem 0 0; }

/* ── photographers, good to know ─────────────────────────────────────── */
.x-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.6rem; }
.x-person { text-decoration: none; color: inherit; display: grid; gap: .35rem; }
.x-person img, .x-person-empty { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: #e4ddd2; display: block; }
.x-person strong { font-family: var(--x-serif); font-weight: 500; font-size: 1.3rem; margin-top: .5rem; }
.x-person span { color: var(--x-muted); font-size: .88rem; }
.x-faq { margin: 0; border-top: 1px solid var(--x-line); }
.x-faq dt { font-family: var(--x-serif); font-size: 1.45rem; padding-top: 1.4rem; }
.x-faq dd { margin: .4rem 0 0; padding-bottom: 1.4rem; border-bottom: 1px solid var(--x-line); color: var(--x-ink); }
.x-faq dd .x-link { font-size: .95rem; }

/* ── closing: deep indigo over the room, one print on the table ──────── */
.x-close { background: linear-gradient(rgba(43, 39, 82, .9), rgba(43, 39, 82, .9)), var(--x-bg) center / cover; color: var(--x-paper); padding: clamp(5rem, 12vw, 8.5rem) 0; overflow: hidden; }
.x-close-grid { display: grid; gap: 2.5rem; align-items: center; }
.x-close h2 { font-family: var(--x-serif); font-weight: 400; font-size: clamp(2.4rem, 6.5vw, 4.4rem); line-height: 1.02; margin: 0 0 1.8rem; }
.x-close-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem; margin: 0 0 2rem; }
.x-close .x-link { color: var(--x-paper); font-size: 1.05rem; }
.x-btn-light { background: var(--x-paper); color: var(--x-deep); border-color: var(--x-paper); }
.x-btn-light:hover { background: transparent; color: var(--x-paper); }
.x-address { font: 500 12px/1.6 var(--x-sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(243, 239, 233, .7); margin: 0; max-width: 46ch; }
.page-exclusive .x-close-img { width: 160px; aspect-ratio: 2 / 3; object-fit: cover; border: 8px solid #fbf9f5; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); transform: rotate(4deg); justify-self: end; }
@media (min-width: 900px) { .x-close-grid { grid-template-columns: 1fr auto; } .page-exclusive .x-close-img { width: 230px; margin-right: 3rem; } }

/* ── reveal on scroll (only with JS; reduced motion shows everything at once) ── */
html.x-js .x-rv, html.x-js .x-frame { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
html.x-js .x-rv.in, html.x-js .x-frame.in { opacity: 1; transform: none; }
html.x-js .x-frame:nth-child(3n+2) { transition-delay: .08s; } html.x-js .x-frame:nth-child(3n) { transition-delay: .16s; }
html.x-js .x-close-img.x-rv.in { transform: rotate(4deg); }
@media (prefers-reduced-motion: reduce) {
  .x-hero, .x-hero-media img, .x-btn-hero, html.x-js .x-rv, html.x-js .x-frame { transition: none; }
  .x-pin { animation: none; }
}

/* phones: a slim booking bar replaces the floating WhatsApp button */
.x-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--x-ink); color: var(--x-paper); padding: .9rem 1.25rem calc(.9rem + env(safe-area-inset-bottom)); font: 500 .95rem/1 var(--x-sans); }
.x-bar a { color: var(--x-paper); text-decoration: underline; text-underline-offset: .3em; }
.page-exclusive .site-footer { padding-bottom: 5rem; }
@media (min-width: 900px) { .x-bar { display: none; } .page-exclusive .site-footer { padding-bottom: revert; } }