/* 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;
  /* Young Serif: one weight, hand-cut, warm — a host's voice, not a startup's.
     Hanken Grotesk for text. Neither is a default pick. */
  --sc-font-display: "Young Serif", "Iowan Old Style", Georgia, serif;
  --sc-font-text:    "Hanken Grotesk", 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; }

picture { display: contents; }

/* 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-text);
  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 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: 400; 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-5); }
.hero__copy { max-width: 34rem; }
.eyebrow { font-family: var(--sc-font-text); 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: 400; font-size: clamp(2.2rem, 1.4rem + 3.2vw, 3.8rem); line-height: 1.0; letter-spacing: -0.015em; 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-5); }
.hero__acts { display: flex; gap: var(--sc-3); flex-wrap: wrap; }
/* The beach-track signpost: painted boards nailed to a post, pointing off the
   trail. Drawn, not photographed. Every plank is a fact; the arrow end is
   the plank's own shape. */
.signpost { position: relative; margin-top: var(--sc-5); padding-left: 1.6rem; display: grid; gap: .55rem; width: max-content; max-width: 100%; }
.signpost__post { position: absolute; left: .55rem; top: -.4rem; bottom: -.9rem; width: .55rem; border-radius: 3px 3px 1px 1px;
  background: linear-gradient(90deg, #6E4A2E, #8B6240 45%, #5C3D26); box-shadow: inset 1px 0 0 rgba(255,255,255,.14), 2px 0 3px rgba(18,33,29,.18); }
.plank { --wood-a: #B6845A; --wood-b: #9A6A44; --wood-c: #7F5535;
  position: relative; display: inline-flex; align-items: baseline; gap: .45rem; padding: .48rem 1.35rem .5rem .95rem; margin-left: calc(var(--y) * .35rem);
  font-family: var(--sc-font-display); font-size: var(--sc-t-sm); letter-spacing: .01em; color: #FBF3E6; text-shadow: 0 1px 0 rgba(0,0,0,.28);
  background: linear-gradient(180deg, var(--wood-a) 0%, var(--wood-b) 55%, var(--wood-c) 100%);
  background-image: repeating-linear-gradient(178deg, transparent 0 7px, rgba(60,35,18,.12) 7px 8px, transparent 8px 13px), linear-gradient(180deg, var(--wood-a) 0%, var(--wood-b) 55%, var(--wood-c) 100%);
  clip-path: polygon(0 0, calc(100% - .8rem) 0, 100% 50%, calc(100% - .8rem) 100%, 0 100%);
  transform: rotate(var(--tilt)); transform-origin: 0 50%; box-shadow: 0 2px 3px rgba(18,33,29,.25); transition: transform 460ms var(--spring); }
.plank:nth-of-type(1) { --tilt: -3deg; --y: 0; }
.plank:nth-of-type(2) { --tilt: 2.5deg; --y: 1; }
.plank:nth-of-type(3) { --tilt: -1.5deg; --y: 2; }
.plank--l { clip-path: polygon(.8rem 0, 100% 0, 100% 100%, .8rem 100%, 0 50%); padding: .48rem .95rem .5rem 1.35rem; }
.plank small { font-family: var(--sc-font-text); font-size: .78em; font-weight: 500; opacity: .85; letter-spacing: .02em; }
.plank::before { content: ""; position: absolute; left: .42rem; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: #3F2A18; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.plank--l::before { left: auto; right: .42rem; }
.signpost:hover .plank { transform: rotate(calc(var(--tilt) * -.6)); }

/* 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:not(.kite) { position: absolute; inset: 0; width: 100%; height: 100%; }
.route svg:not(.kite) 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: 400; 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: 400; 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 { font-family: var(--sc-font-text); 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[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: 400; 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: 400; 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 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-text); font-weight: 700; 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: 400; 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); }
/* ---------------------------------------------- interaction layer ----
   Apple's rules (Designing Fluid Interfaces): respond on pointer-DOWN, spring
   back on release, never lock input, mirror the path on the way out.
   Springs are CSS linear() curves: critically damped by default; the soft one
   overshoots ~4% and is reserved for things the user just committed (a chip). */
:root {
  --spring:      linear(0, 0.2178 2.1%, 0.5433 5.9%, 0.7627 10.3%, 0.8827 14.9%, 0.9458 19.9%, 0.9788 25.9%, 0.9944 33.9%, 0.9998 46.9%, 1);
  --spring-soft: linear(0, 0.3255 3.8%, 0.6931 8.1%, 0.9081 12.3%, 1.0128 16.4%, 1.0483 20.7%, 1.0434 25.6%, 1.0105 32.9%, 0.9963 40.5%, 0.9995 57.7%, 1);
  --press: 0.965;
}
button, .cta, .chip, .textlink, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* CTA: hover lifts, press sinks on the down-stroke, release springs home. */
.cta { transition: transform 420ms var(--spring), box-shadow 220ms var(--sc-ease-out), background var(--sc-d-fast); will-change: transform; }
.cta:hover { transform: translateY(-1px); box-shadow: var(--sc-e2); }
.cta:active { transform: scale(var(--press)) translateY(0); transition-duration: 90ms; box-shadow: var(--sc-e1); }
.cta svg { transition: transform 420ms var(--spring); }
.cta:hover svg { transform: translateX(2px) rotate(-8deg); }
.cta--quiet:hover { transform: translateY(-1px); box-shadow: var(--sc-e1), inset 0 0 0 1px var(--sc-ink); }
.cta--quiet:active { transform: scale(var(--press)); }

/* Chips: press on down, spring in on select, the selected ring grows from the chip. */
.chip { transition: background var(--sc-d-fast), color var(--sc-d-fast), border-color var(--sc-d-fast), transform 420ms var(--spring), box-shadow 300ms var(--sc-ease-out); }
.chip:active { transform: scale(0.94); transition-duration: 80ms; }
.chip[aria-pressed="true"] { transform: scale(1); transition: transform 460ms var(--spring-soft), background var(--sc-d-fast), color var(--sc-d-fast), border-color var(--sc-d-fast), box-shadow 300ms var(--sc-ease-out); box-shadow: 0 0 0 4px color-mix(in oklab, var(--teal) 18%, transparent); }
.chip.is-pulsing { animation: none; transform: scale(1.04); transition: transform 460ms var(--spring-soft); }

/* Stepper + lightbox buttons + FAQ: same press grammar. */
.stepper button { transition: background var(--sc-d-fast), transform 360ms var(--spring); }
.stepper button:active { transform: scale(0.86); transition-duration: 70ms; }
.stepper output { transition: transform 360ms var(--spring-soft); }
.stepper output.is-bump { transform: scale(1.12); }
dialog.lb button { transition: background var(--sc-d-fast), color var(--sc-d-fast), transform 360ms var(--spring); }
dialog.lb button:active { transform: scale(var(--press)); transition-duration: 80ms; }
.textlink { transition: text-decoration-color 200ms var(--sc-ease-out), text-underline-offset 200ms var(--sc-ease-out); }
.textlink:hover { text-underline-offset: .22em; }

/* FAQ disclosure: a real plus that rotates into a minus, instead of a content swap that hard-cuts. */
.q summary::after, .card summary::after { content: ""; width: .8em; height: .8em; flex: none; margin-left: .75em;
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  color: var(--sc-accent); transition: transform 460ms var(--spring), color 200ms; transform: rotate(0deg); }
.card summary::after { display: inline-block; vertical-align: -.1em; color: var(--sc-ink-soft); }
.card summary { display: inline-flex; align-items: center; }
.q[open] summary::after, .card details[open] summary::after { transform: rotate(135deg); }
.q summary:active::after { transform: scale(.8); transition-duration: 80ms; }
.q[open] summary:active::after { transform: rotate(135deg) scale(.8); }
details::details-content { transition: height 380ms var(--spring), content-visibility 380ms allow-discrete; }
.q p, .card details p { animation: q-in 420ms var(--sc-ease-out) both; }
@keyframes q-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Lightbox materializes: blur + scale arrive together, and leave the same way. */
dialog.lb { filter: blur(0); transition: opacity 260ms var(--sc-ease-out), transform 460ms var(--spring), filter 260ms var(--sc-ease-out), overlay 260ms allow-discrete, display 260ms allow-discrete; }
@starting-style { dialog.lb[open] { opacity: 0; transform: scale(.94); filter: blur(10px); } }
dialog.lb:not([open]) { opacity: 0; transform: scale(.94); filter: blur(10px); }
dialog.lb::backdrop { backdrop-filter: blur(0); }

/* Chrome: translucency is the hierarchy; a scroll-edge fade replaces a hard rule. */
.bar { backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); }
.bar::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in oklab, var(--sc-canvas) 55%, transparent), transparent); opacity: var(--bar-edge, 0); transition: opacity 200ms; }
.bar.is-scrolled { --bar-edge: 1; }
@media (prefers-reduced-transparency: reduce) { .bar { background: var(--sc-canvas); backdrop-filter: none; -webkit-backdrop-filter: none; } }
@media (prefers-contrast: more) { .bar { border-bottom: 1px solid var(--sc-ink); } }

@media (prefers-reduced-motion: reduce) { .cta, .cta--quiet, .chip, .stepper button, .stepper output, dialog.lb button, .q summary::after, .card summary::after { transition: none; transform: none !important; } .q p, .card details p { animation: none; } dialog.lb, dialog.lb:not([open]) { filter: none; } .cta:hover, .cta--quiet:hover { transform: none; } }
@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); }

/* ---------------------------------------------------------- reviews --- */
.reviews .lede { color: var(--sc-ink-soft); margin: 0 0 var(--sc-6); }
.reviews__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sc-4); }
.rv { margin: 0; background: var(--sc-surface); border-radius: var(--sc-r-lg); padding: var(--sc-5); box-shadow: var(--sc-e1), var(--sc-edge); display: flex; flex-direction: column; justify-content: space-between; gap: var(--sc-4); }
.rv p { margin: 0; font-size: var(--sc-t-base); }
.rv footer { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.rv footer b { color: var(--sc-ink); }
.rv footer a { color: inherit; }

/* ------------------------------------------------------------- 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: 400; 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 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: 400; 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); }
  .signpost { 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; } }

/* Short viewports: the hero is a pinned stage, so the signpost must fit or go. */
@media (max-height: 840px) { .hero .lede { font-size: var(--sc-t-base); margin-bottom: var(--sc-4); } .hero h1 { margin-bottom: var(--sc-4); } .signpost { gap: .4rem; margin-top: var(--sc-4); } .plank { padding-block: .38rem; } }
@media (max-height: 740px) { .signpost { display: none; } }

/* A bebean, the fish kite the whole island flies in July and August. One kite,
   high in the hero sky, drifting the way a kite on a long line actually does:
   slow lateral wander, a slower rise, the tail lagging the body. */
.kite { position: absolute; z-index: 2; top: 6%; right: 9%; width: clamp(38px, 5.2vw, 64px); height: auto; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(18,33,29,.22));
  animation: kite-drift 19s ease-in-out infinite alternate; transform-origin: 50% 20%; }
.kite__body { animation: kite-tilt 7s ease-in-out infinite alternate; transform-origin: 50% 45%; }
.kite__tail { animation: kite-tail 3.8s ease-in-out infinite alternate; transform-origin: 50% 0; }
@keyframes kite-drift { from { transform: translate(0, 0) rotate(-4deg); } to { transform: translate(-22px, 16px) rotate(5deg); } }
@keyframes kite-tilt { from { transform: rotate(-3deg); } to { transform: rotate(4deg); } }
@keyframes kite-tail { from { transform: skewX(-6deg); } to { transform: skewX(7deg); } }
@media (prefers-reduced-motion: reduce) { .kite, .kite__body, .kite__tail { animation: none; } }
@media (max-width: 720px) { .kite { top: 4%; right: 6%; } }

/* ---------------------------------------------------- legal + 404 pages -- */
body.static-page { min-height: 100vh; display: flex; flex-direction: column; }
body.static-page main.legal { flex: 1; max-width: 42rem; padding-block: var(--sc-7) var(--sc-6); }
.legal h1 { font-family: var(--sc-font-display); font-size: var(--sc-t-2xl); margin: 0 0 var(--sc-3); }
.legal h2 { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); margin: var(--sc-6) 0 var(--sc-2); }
.legal p { color: var(--sc-ink-soft); max-width: 38rem; }
.legal__updated { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); margin-bottom: var(--sc-5); }
.legal .cta { margin-top: var(--sc-2); }
.notfound { flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--sc-4); padding-block: var(--sc-7); }
.notfound h1 { font-family: var(--sc-font-display); font-size: var(--sc-t-2xl); margin: 0; }
.notfound p { color: var(--sc-ink-soft); max-width: 32rem; margin: 0; }

/* ------------------------------------------------------------ cookies -- */
.cookie-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: calc(var(--sc-z-chrome) + 1); display: flex; align-items: center; justify-content: center; gap: var(--sc-4); flex-wrap: wrap; padding: var(--sc-3) var(--sc-gutter); background: var(--sc-ink); box-shadow: 0 -1px 0 var(--sc-hairline-strong); }
.cookie-bar p { margin: 0; max-width: 46rem; font-size: var(--sc-t-sm); color: var(--teal-ink); }
.cookie-bar a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.cookie-bar button { flex: none; background: var(--sc-accent); color: #fff; border: 0; border-radius: var(--sc-r-pill); padding: .4rem 1.1rem; font-weight: 600; font-size: var(--sc-t-sm); cursor: pointer; }
.cookie-bar button:hover { background: #C95F2C; }
@media (max-width: 600px) { .cookie-bar { flex-wrap: nowrap; gap: var(--sc-3); padding: .55rem var(--sc-gutter); } .cookie-bar p { font-size: .72rem; line-height: 1.3; } .cookie-bar button { padding: .35rem .85rem; font-size: .72rem; } }
@media (max-width: 900px) { .fab { bottom: calc(1rem + var(--cookie-h, 0px)); transition: bottom var(--sc-d-base) var(--sc-ease-out); } }