/* Bali Whisper — page styles. Tokens rebrand the scrollcraft floor; everything
   below is this page's own markup. Never restyle .sc-stage/.sc-copy/[data-sc-*]. */
:root {
  --sc-canvas:     #F7F8F5;   /* cool white. Not cream. */
  --sc-surface:    #FFFFFF;
  --sc-ink:        #12211D;   /* teal-black, his teal family */
  --sc-ink-soft:   #52645E;
  --sc-accent:     #E2703A;   /* his sunset orange, from his own site */
  --sc-accent-ink: #1A0F08;
  --sc-font-display: "Outfit", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-shadow-color: 165 30% 8%;
  --teal:      #1F6357;       /* his */
  --teal-deep: #164A41;       /* his */
  --teal-ink:  #F1F5F2;
  --teal-soft: #B9CBC4;
}
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
:root { interpolate-size: allow-keywords; }
details::details-content { height: 0; overflow: clip; transition: height 240ms var(--sc-ease-out), content-visibility 240ms allow-discrete; }
details[open]::details-content { height: auto; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.wrap { width: min(100% - 2 * var(--sc-gutter), var(--sc-maxw)); margin-inline: auto; }

/* one CTA, one label, everywhere */
.cta {
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--sc-accent); color: #fff; font-family: var(--sc-font-display);
  font-weight: 600; font-size: var(--sc-t-base); padding: .85rem 1.35rem;
  border-radius: var(--sc-r-pill); text-decoration: none; white-space: nowrap;
  box-shadow: var(--sc-e1); transition: transform var(--sc-d-fast) var(--sc-ease-out), background var(--sc-d-fast);
}
.cta:hover { background: #C95F2C; }
.cta:active { transform: translateY(1px); }
.cta svg { width: 1.1em; height: 1.1em; fill: currentColor; flex: none; }
.cta--quiet { background: transparent; color: var(--sc-ink); box-shadow: inset 0 0 0 1px var(--sc-hairline-strong); }
.cta--quiet:hover { background: var(--sc-surface); }
.textlink { color: var(--sc-ink); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1.5px; text-decoration-color: var(--sc-accent); }
.textlink:hover { text-decoration-color: var(--sc-ink); }
button.textlink { background: none; border: 0; padding: 0; cursor: pointer; }

/* site bar */
.bar { position: sticky; top: 0; z-index: var(--sc-z-chrome); background: color-mix(in oklab, var(--sc-canvas) 86%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.bar__in { display: flex; align-items: center; justify-content: space-between; height: 4.25rem; }
.mark { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--sc-ink); font-family: var(--sc-font-display); font-weight: 600; font-size: 1.1rem; }
.mark img { width: 2rem; height: 2rem; border-radius: 50%; }
.mark em { font-style: normal; color: var(--sc-accent); }

/* ------------------------------------------------------------ 1 · hero -- */
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-7); align-items: center; height: 100%; padding-block: var(--sc-6); }
.hero__copy { max-width: 34rem; }
.eyebrow { font-family: var(--sc-font-display); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-accent); font-weight: 600; margin: 0 0 var(--sc-4); }
.hero h1 { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-3xl); line-height: var(--sc-leading-none); letter-spacing: var(--sc-track-tight); margin: 0 0 var(--sc-5); }
.hero h1 em { font-style: normal; color: var(--teal); }
.hero .lede { font-size: var(--sc-t-lg); color: var(--sc-ink-soft); max-width: 30rem; margin: 0 0 var(--sc-6); }
.hero__acts { display: flex; gap: var(--sc-3); flex-wrap: wrap; }
.facts { display: flex; gap: var(--sc-5); flex-wrap: wrap; margin-top: var(--sc-6); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.facts span::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--sc-accent); margin-right: .5rem; vertical-align: middle; }

/* his teal route card, as a layered scene */
.route { position: relative; aspect-ratio: 4 / 5; max-height: min(78vh, 720px); width: 100%; border-radius: var(--sc-r-lg); overflow: hidden; background: var(--teal-deep); box-shadow: var(--sc-e3); margin-left: auto; }
.route__bg { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; object-position: 50% 70%; }
.route__wash { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,33,29,0) 55%, rgba(18,33,29,.55) 100%); }
.route svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.route path { fill: none; stroke: var(--sc-accent); stroke-width: 3; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - clamp(0, var(--sc-p, 0) / 0.82, 1)); }
.route .ghost { stroke: rgba(255,255,255,.55); stroke-width: 1.5; filter: none; stroke-dasharray: 0.012 0.02; stroke-dashoffset: 0; }
.stop { position: absolute; z-index: 1; transform: translate(-50%, -50%); --k: clamp(0, (var(--sc-p, 0) - var(--t)) / 0.12, 1); }
.stop__pin { width: 14px; height: 14px; border-radius: 50%; background: var(--sc-accent); box-shadow: 0 0 0 5px rgba(226,112,58,.22); transform: scale(var(--k)); }
.stop__card { position: absolute; left: 22px; top: -14px; width: clamp(96px, 14vw, 150px); background: #fff; padding: 5px 5px 8px; border-radius: 6px; box-shadow: var(--sc-e2); opacity: var(--k); transform: translate(calc((1 - var(--k)) * 18px), calc((1 - var(--k)) * -8px)) rotate(var(--r, -2deg)); }
.stop__card img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 3px; }
.stop__card span { display: block; font-family: var(--sc-font-display); font-size: .72rem; color: var(--sc-ink); margin-top: 5px; line-height: 1.1; }
.stop--flip .stop__card { left: auto; right: 22px; }
.stop--up .stop__card { top: auto; bottom: 4px; }
.stop--down .stop__card { top: 4px; }
.route__cap { position: absolute; z-index: 0; left: var(--sc-5); right: var(--sc-5); bottom: var(--sc-5); color: var(--teal-ink); font-size: var(--sc-t-sm); }
.route__cap b { display: block; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-base); }

/* ------------------------------------------------------------ 2 · chat -- */
.chat-sec { padding-block: var(--sc-9) var(--sc-8); }
.chat-sec h2, .h2 { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-2xl); line-height: var(--sc-leading-tight); letter-spacing: var(--sc-track-snug); margin: 0 0 var(--sc-3); }
.chat-sec .lede { color: var(--sc-ink-soft); max-width: 52ch; margin: 0 0 var(--sc-6); }
.chat { max-width: 44rem; background: var(--sc-surface); border-radius: var(--sc-r-lg); box-shadow: var(--sc-e2), var(--sc-edge); padding: var(--sc-5); display: flex; flex-direction: column; gap: var(--sc-4); }
.msg { display: flex; gap: .6rem; align-items: flex-end; max-width: 92%; }
.msg img { width: 30px; height: 30px; border-radius: 50%; flex: none; }
.msg .b { background: var(--sc-canvas); border-radius: 16px 16px 16px 4px; padding: .7rem .95rem; }
.msg--me { align-self: flex-end; flex-direction: row-reverse; }
.msg--me .b { background: #E7F1EC; border-radius: 16px 16px 4px 16px; white-space: pre-wrap; transition: transform 160ms var(--sc-ease-out); }
.msg--me .b.is-updating { transform: scale(.985); }
@keyframes chip-pulse { 0% { transform: scale(1); } 45% { transform: scale(1.06); } 100% { transform: scale(1); } }
.chip.is-pulsing { animation: chip-pulse 360ms var(--sc-ease-out) 1; }
.answer { padding-left: 2.4rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.chip { border: 1.5px solid var(--sc-hairline-strong); background: var(--sc-surface); border-radius: var(--sc-r-pill); padding: .5rem .9rem; font-size: var(--sc-t-sm); font-weight: 500; cursor: pointer; transition: background var(--sc-d-fast), color var(--sc-d-fast), transform var(--sc-d-fast) var(--sc-ease-out); }
.chip:hover { border-color: var(--sc-ink); }
.chip:active { transform: scale(.97); }
.chip[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: #fff; }
.answer label { display: flex; align-items: center; gap: .5rem; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.answer input, .answer select { font-size: var(--sc-t-sm); padding: .5rem .8rem; border: 1.5px solid var(--sc-hairline-strong); border-radius: var(--sc-r-pill); background: var(--sc-surface); color: var(--sc-ink); -webkit-appearance: none; appearance: none; min-width: 9.5rem; }
.answer input:focus, .answer select:focus { border-color: var(--sc-ink); outline: none; }
.stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--sc-hairline-strong); border-radius: var(--sc-r-pill); background: var(--sc-surface); overflow: hidden; }
.stepper button { width: 2.4rem; height: 2.4rem; border: 0; background: none; font-size: 1.2rem; cursor: pointer; }
.stepper button:hover { background: var(--sc-canvas); }
.stepper output { min-width: 2.2rem; text-align: center; font-weight: 600; }
.chat__send { display: flex; align-items: center; gap: var(--sc-4); flex-wrap: wrap; padding-top: var(--sc-2); }
.chat__send small { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); max-width: 32ch; }

/* ---------------------------------------------------------- 3 · rail ---- */
.rail-act { background: var(--sc-surface); }
.rail { display: flex; gap: var(--sc-5); align-items: stretch; height: 100%; padding: var(--sc-7) var(--sc-gutter); width: max-content; }
.rail__lead { width: clamp(16rem, 24vw, 22rem); display: flex; flex-direction: column; justify-content: center; flex: none; }
.rail__lead p { color: var(--sc-ink-soft); max-width: 26ch; }
.card { width: clamp(17rem, 26vw, 23rem); flex: none; display: flex; flex-direction: column; background: var(--sc-canvas); border-radius: var(--sc-r-lg); overflow: hidden; box-shadow: var(--sc-e2), var(--sc-edge); }
.card > div { display: flex; flex-direction: column; height: 100%; }
.card__img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; }
.card__ph { aspect-ratio: 4 / 3; background: var(--teal-deep); color: var(--teal-ink); display: grid; place-items: center; padding: var(--sc-5); font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xl); line-height: 1.05; text-align: center; letter-spacing: var(--sc-track-snug); }
.card__body { padding: var(--sc-5); display: flex; flex-direction: column; gap: var(--sc-3); flex: 1; }
.card h3 { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xl); line-height: 1.05; letter-spacing: var(--sc-track-snug); margin: 0; }
.card .k { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.card p { margin: 0; font-size: var(--sc-t-sm); }
.card details { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.card summary { cursor: pointer; color: var(--sc-ink); font-weight: 600; list-style: none; }
.card summary::-webkit-details-marker { display: none; }
.card summary::after { content: " +"; }
.card details[open] summary::after { content: " –"; }
.card details p { margin-top: .5rem; }
.card details b { color: var(--sc-ink); }
.card__do { margin-top: auto; display: flex; gap: var(--sc-4); align-items: center; flex-wrap: wrap; padding-top: var(--sc-3); }
.rail__end { width: clamp(15rem, 22vw, 20rem); flex: none; display: flex; flex-direction: column; justify-content: center; gap: var(--sc-4); }
.rail__end p { color: var(--sc-ink-soft); }
/* staggered settle from --sc-p, gated to motion */
@media (prefers-reduced-motion: no-preference) {
  .card { --arrive: clamp(0, (var(--sc-p, 1) - var(--at)) / 0.14, 1); opacity: calc(0.55 + 0.45 * var(--arrive)); transform: translateY(calc((1 - var(--arrive)) * 18px)); }
}

/* -------------------------------------------------------- 4 · places ---- */
.places { padding-block: var(--sc-9); display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--sc-8); align-items: start; }
.places .lede { color: var(--sc-ink-soft); max-width: 40ch; margin: 0 0 var(--sc-6); }
.places dl { margin: 0; display: grid; gap: var(--sc-5); }
.places dt { font-family: var(--sc-font-display); font-weight: 600; color: var(--teal); font-size: var(--sc-t-sm); letter-spacing: var(--sc-track-wide); text-transform: uppercase; margin-bottom: .4rem; }
.places dd { margin: 0 0 .7rem; font-size: var(--sc-t-base); max-width: 58ch; }
.places dd b { font-weight: 600; }
.places dd button { font-size: var(--sc-t-sm); margin-left: .4rem; white-space: nowrap; }
.places__figs { display: grid; gap: var(--sc-4); grid-template-columns: 1fr 1fr; align-content: start; }
.places__figs figure { margin: 0; border-radius: var(--sc-r-md); overflow: hidden; }
.places__figs figure:first-child { grid-column: 1 / -1; }
.places__figs img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.places__figs figure:nth-child(n+2) img { aspect-ratio: 1; }

/* ------------------------------------------------------ 5 · guestbook --- */
.wall-act { background: var(--teal-deep); --sc-ink: var(--teal-ink); --sc-ink-soft: var(--teal-soft); color: var(--sc-ink); }
.wall-stage { display: grid; grid-template-rows: auto 1fr; padding: calc(4.25rem + var(--sc-5)) var(--sc-gutter) var(--sc-5); gap: var(--sc-5); }
.wall-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sc-5); flex-wrap: wrap; }
.wall-head h2 { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-2xl); line-height: 1; letter-spacing: var(--sc-track-snug); margin: 0; }
.wall-head h2 .n { color: var(--sc-accent); font-variant-numeric: tabular-nums; }
.wall-head p { margin: 0; color: var(--sc-ink-soft); max-width: 36ch; }
.wall { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; align-content: start; min-height: 0; }
.wall button { display: block; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 6px; overflow: hidden; aspect-ratio: 1; --k: clamp(0, (var(--sc-p, 1) - var(--t)) / 0.2, 1); opacity: var(--k); transform: translate(calc(var(--dx) * (1 - var(--k))), calc(var(--dy) * (1 - var(--k)))) rotate(calc(var(--rz) * (1 - var(--k)))) scale(calc(0.86 + 0.14 * var(--k))); }
.wall img { width: 100%; height: 100%; object-fit: cover; }
/* candi bentar: two white leaves part as the act begins */
.gate { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.gate::before, .gate::after { content: ""; position: absolute; top: 0; bottom: 0; width: 50%; background: var(--sc-canvas); --g: clamp(0, var(--sc-p, 1) / 0.26, 1); }
.gate::before { left: 0; transform: translateX(calc(var(--g) * -101%)); }
.gate::after { right: 0; transform: translateX(calc(var(--g) * 101%)); }
.wall-act .sc-stage { --sc-canvas: #F7F8F5; }
dialog.lb { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1100px); opacity: 1; transform: scale(1); transition: opacity 220ms var(--sc-ease-out), transform 220ms var(--sc-ease-out), overlay 220ms allow-discrete, display 220ms allow-discrete; }
dialog.lb::backdrop { background: rgba(18,33,29,.94); opacity: 1; transition: opacity 220ms var(--sc-ease-out), overlay 220ms allow-discrete, display 220ms allow-discrete; }
@starting-style { dialog.lb[open] { opacity: 0; transform: scale(.96); } dialog.lb[open]::backdrop { opacity: 0; } }
dialog.lb:not([open]) { opacity: 0; transform: scale(.96); }
dialog.lb:not([open])::backdrop { opacity: 0; }
dialog.lb img { max-height: 86vh; max-width: 96vw; object-fit: contain; border-radius: 6px; }
dialog.lb .barr { display: flex; justify-content: space-between; align-items: center; color: #fff; padding: .7rem .2rem; font-size: var(--sc-t-sm); }
dialog.lb button { color: #fff; padding: .45rem .9rem; border-radius: var(--sc-r-pill); border: 1px solid rgba(255,255,255,.4); background: none; cursor: pointer; }
dialog.lb button:hover { background: #fff; color: var(--sc-ink); }
@media (prefers-reduced-motion: reduce) { .wall button { opacity: 1; transform: none; } .gate { display: none; } dialog.lb, dialog.lb:not([open]) { transform: none; } .chip.is-pulsing { animation: none; } .msg--me .b.is-updating { transform: none; } details::details-content { transition: none; } }

/* ----------------------------------------------------------- 6 · about -- */
.about { padding-block: var(--sc-9); display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--sc-8); align-items: center; }
.about img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--sc-r-lg); box-shadow: var(--sc-e2); }
.about p { max-width: 56ch; color: var(--sc-ink); font-size: var(--sc-t-lg); margin: 0 0 var(--sc-4); }
.about .follow { display: flex; gap: var(--sc-5); margin-top: var(--sc-5); }

/* ------------------------------------------------------------- faq ---- */
.faq__in { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--sc-8); align-items: start; }
.faq .lede { color: var(--sc-ink-soft); }
.q { border-top: 1px solid var(--sc-hairline); padding: var(--sc-4) 0; }
.q:last-child { border-bottom: 1px solid var(--sc-hairline); }
.q summary { cursor: pointer; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); list-style: none; display: flex; justify-content: space-between; gap: var(--sc-4); }
.q summary::-webkit-details-marker { display: none; }
.q summary::after { content: "+"; color: var(--sc-accent); font-weight: 500; }
.q[open] summary::after { content: "–"; }
.q p { margin: var(--sc-3) 0 0; color: var(--sc-ink-soft); max-width: 60ch; }

/* ----------------------------------------------------------- 7 · close -- */
.close { display: grid; grid-template-rows: 1fr auto; background: var(--sc-surface); }
.close__in { display: grid; place-items: center; text-align: center; padding: var(--sc-8) var(--sc-gutter); }
.close h2 { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-3xl); line-height: var(--sc-leading-none); letter-spacing: var(--sc-track-tight); margin: 0 0 var(--sc-4); max-width: 14ch; }
.close p { color: var(--sc-ink-soft); max-width: 40ch; margin: 0 0 var(--sc-6); }
.close .num { display: block; margin-top: var(--sc-4); color: var(--sc-ink-soft); text-decoration: none; font-size: var(--sc-t-sm); }
.foot { display: flex; justify-content: space-between; gap: var(--sc-4); flex-wrap: wrap; padding: var(--sc-5) var(--sc-gutter); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); border-top: 1px solid var(--sc-hairline); }
.foot a { color: inherit; text-decoration: none; }
.foot a:hover { color: var(--sc-ink); }

/* phone */
.fab { position: fixed; right: 1rem; bottom: 1rem; z-index: var(--sc-z-chrome); display: none; }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: var(--sc-6); align-content: start; padding-block: var(--sc-5) var(--sc-6); height: auto; min-height: 100%; }
  .hero h1 { font-size: var(--sc-t-2xl); }
  .hero .lede { font-size: var(--sc-t-base); }
  .facts { display: none; }
  .route { aspect-ratio: 4 / 5; max-height: 62vh; }
  .stop__card { width: 88px; }
  .places { grid-template-columns: 1fr; gap: var(--sc-6); }
  .wall { grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .wall-stage { padding: calc(4.25rem + var(--sc-3)) var(--sc-gutter) var(--sc-4); gap: var(--sc-3); }
  .wall-head h2 { font-size: var(--sc-t-xl); }
  .wall-head p { font-size: var(--sc-t-sm); }
  .about { grid-template-columns: 1fr; gap: var(--sc-6); }
  .faq__in { grid-template-columns: 1fr; gap: var(--sc-5); }
  .about img { max-width: 22rem; }
  .card { width: min(78vw, 20rem); }
  .rail__lead, .rail__end { width: min(78vw, 18rem); }
  .chat { padding: var(--sc-4); }
  .msg { max-width: 100%; }
  .answer { padding-left: 0; }
  .fab { display: block; }
  .bar .cta { display: none; }
  .fab .cta { box-shadow: var(--sc-e3); }
  .close h2 { font-size: var(--sc-t-2xl); }
}
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) { .card { --arrive: 1; } }