/* Mr. Bali, version 4: an island magazine. The colours of rizkykurniawann.com (deep teal, warm sand, pale mist, sun
   yellow used sparingly), his own photos large, GFS Didot for the headlines and Manrope for the words around them.
   Flat colour and hairlines only: no shadows, no gradients. Every movement is a transform or an opacity change, quick,
   and it stops for anyone who asks the system for less motion. */
@font-face { font-family: "GFS Didot"; src: url("fonts/display.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/text.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }

:root {
  --teal: #196175;
  --deep: #0e4150;
  --sand: #f6f3f3;
  --mist: #e1e6e7;
  --sun: #ffd936;
  --ink: #1d3037;
  --soft: #4a5d63;
  --white: #ffffff;
  --rule: rgba(25, 97, 117, 0.24);
  --rule-light: rgba(255, 255, 255, 0.3);
  --display: "GFS Didot", "Didot", "Bodoni 72", Georgia, serif;
  --text: "Manrope", system-ui, sans-serif;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --measure: 88rem;
  --bar: 4.25rem;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--bar) + 1rem); }
body { margin: 0; font: 500 1.0625rem/1.7 var(--text); color: var(--ink); background: var(--sand); overflow-x: clip; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: fixed; left: 1rem; top: -5rem; z-index: 60; background: var(--white); color: var(--teal); padding: 0.75rem 1rem; font-weight: 800; }
.skip:focus { top: 1rem; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.on-dark :focus-visible, .top:not(.is-solid) :focus-visible, .menu :focus-visible { outline-color: var(--sun); }

/* Small capitals: the captions, folios and kickers of a magazine page */
.kicker { display: block; font: 700 0.75rem/1.4 var(--text); letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal); }
.on-dark .kicker { color: var(--sun); }
.caption { display: flex; gap: 0.75rem; align-items: baseline; margin-top: 0.75rem; font: 600 0.75rem/1.5 var(--text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); }
.caption b { font: 400 1rem/1 var(--display); letter-spacing: 0; color: var(--teal); }
.on-dark .caption { color: var(--mist); }
.on-dark .caption b { color: var(--sun); }
.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* Links whose underline draws in from the left */
.draw { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 420ms var(--ease-out); padding-bottom: 2px; }
.draw:hover, .draw:focus-visible { background-size: 100% 1px; }
.more { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; font: 700 0.8125rem/1.2 var(--text); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; color: var(--teal); }
.more span { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 3px; transition: background-size 420ms var(--ease-out); }
.more::after { content: ""; width: 1.75rem; height: 1px; background: currentColor; transform-origin: left; transition: transform 420ms var(--ease-out); }
.more:hover::after { transform: scaleX(1.6); }
.on-dark .more { color: var(--white); }

/* The masthead: slim, fixed, clear over the photo at the top, sand and a hairline once the page moves */
.top { position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--bar); color: var(--white); }
.top::before { content: ""; position: absolute; inset: 0; background: var(--sand); border-bottom: 1px solid var(--rule); transform: translateY(-101%); transition: transform 480ms var(--ease-out); }
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--sun); transform-origin: left; transform: scaleX(var(--read, 0)); }
.top.is-solid { color: var(--teal); }
.top.is-solid::before { transform: none; }
.top .bar { position: relative; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2rem; transform: translateY(0.6rem); transition: transform 480ms var(--ease-out), color 300ms ease-out; }
.top.is-solid .bar { transform: none; }
.mark { font: 400 1.75rem/1 var(--display); letter-spacing: -0.02em; text-decoration: none; color: inherit; white-space: nowrap; transform-origin: left center; transition: transform 480ms var(--ease-out); }
.top:not(.is-solid) .mark { transform: scale(1.12); }
.nav { display: none; }
.nav a { position: relative; display: inline-flex; align-items: center; min-height: 2.75rem; font: 700 0.75rem/1 var(--text); letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; color: inherit; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.55rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 420ms var(--ease-out); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav a[aria-current]::after { transform: scaleX(1); }
.nav a[aria-current]::before { content: ""; position: absolute; left: -0.85rem; top: 50%; width: 0.35rem; height: 0.35rem; margin-top: -0.175rem; border-radius: 50%; background: var(--sun); }
.menu-btn { display: inline-flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; padding: 0 0.25rem; border: 0; background: none; color: inherit; font: 700 0.75rem/1 var(--text); letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; }
.menu-btn i { position: relative; width: 1.6rem; height: 0.6rem; }
.menu-btn i::before, .menu-btn i::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform 300ms var(--ease-out); }
.menu-btn i::before { top: 0; }
.menu-btn i::after { bottom: 0; transform-origin: right; transform: scaleX(0.6); }
.menu-btn:hover i::after { transform: none; }
@media (min-width: 960px) {
  .nav { display: flex; gap: 2.5rem; }
  .menu-btn { display: none; }
}

/* The phone menu: the whole screen, the pages set large, one after the other */
.menu { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; background: var(--deep); color: var(--white); visibility: hidden; opacity: 0; transition: opacity 360ms var(--ease-out), visibility 0s linear 360ms; }
.menu[hidden] { display: none; }
.menu.is-open { visibility: visible; opacity: 1; transition: opacity 360ms var(--ease-out); }
.menu > .wrap { width: 100%; }
.menu .bar { height: var(--bar); display: flex; align-items: center; justify-content: space-between; }
.menu .mark { color: var(--white); }
.menu nav { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.menu ol { display: flex; flex-direction: column; gap: 0.25rem; counter-reset: m; }
.menu li { counter-increment: m; overflow: hidden; border-top: 1px solid var(--rule-light); }
.menu li:last-child { border-bottom: 1px solid var(--rule-light); }
.menu ol a { display: flex; align-items: baseline; gap: 1rem; padding: 0.9rem 0; font: 400 clamp(2.25rem, 10vw, 3.5rem)/1.05 var(--display); letter-spacing: -0.02em; text-decoration: none; color: var(--white); transform: translateY(105%); transition: transform 620ms var(--ease-out); transition-delay: calc(80ms + var(--i, 0) * 60ms); }
.menu ol a::before { content: "0" counter(m); font: 700 0.75rem/1 var(--text); letter-spacing: 0.16em; color: var(--sun); transform: translateY(-1.2em); }
.menu ol a[aria-current] { color: var(--sun); }
.menu.is-open ol a { transform: none; }
.menu .menu-foot { padding-top: 1.5rem; padding-bottom: 2rem; display: grid; justify-items: start; font-size: 0.9375rem; color: var(--mist); }
.menu .menu-foot a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; color: var(--white); }

/* Buttons: a flat block; on hover a second colour slides in from the left */
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0.85rem 1.75rem; border: 1px solid transparent; border-radius: 0; font: 700 0.8125rem/1.2 var(--text); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: color 360ms var(--ease-out), border-color 360ms var(--ease-out), transform 160ms ease-out; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: scaleX(0); transform-origin: right; transition: transform 460ms var(--ease-out); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.btn:active { transform: scale(0.98); }
.btn-sun { background: var(--sun); color: var(--ink); }
.btn-sun::before { background: var(--white); }
.btn-line { border-color: currentColor; color: var(--white); background: transparent; }
.btn-line::before { background: var(--white); }
.btn-line:hover, .btn-line:focus-visible { color: var(--teal); border-color: var(--white); }
.btn-teal { background: var(--teal); color: var(--white); }
.btn-teal::before { background: var(--deep); }
.btn-white { background: var(--white); color: var(--teal); }
.btn-white::before { background: var(--sun); }
.btn-white:hover { color: var(--ink); }
.btn[disabled] { cursor: progress; }

/* Headlines that rise in one word at a time (split by site.js, or written out in the page for the first screen) */
.split, .hero h1, .page-head h1 { word-spacing: -0.08em; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 0.14em 0.32em 0; margin: 0 -0.14em -0.32em 0; }
.w > span { display: inline-block; }
.hero .w > span, .page-head .w > span, .armed .split:not(.in) .w > span { transform: translateY(150%); }
.hero .w > span, .page-head .w > span { animation: up 520ms var(--ease-out) forwards; animation-delay: calc(60ms + var(--i, 0) * 40ms); }
.armed .split.in .w > span { transform: none; transition: transform 950ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
@keyframes up { to { transform: none; } }
@keyframes fade { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }
@keyframes settle { from { transform: scale(1.1); } to { transform: scale(1); } }

/* Things that drift up as they come into view: armed at the first scroll, so what is on screen (or captured whole) is never hidden */
.armed .reveal:not(.in) { opacity: 0; transform: translateY(2rem); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.armed .reveal.in { opacity: 1; transform: none; }
.arming .reveal, .arming .split .w > span { transition: none !important; }

/* A photo in a frame: a slow push on hover, and a little parallax while the page scrolls */
.frame { position: relative; overflow: hidden; background: var(--mist); }
.frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms var(--ease-out); }
.frame [data-parallax] { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; }
a:hover .frame img, .frame.zoom:hover img { transform: scale(1.045); }
a:hover .frame [data-parallax], .frame.zoom:hover [data-parallax] { transform: translate3d(0, var(--py, 0px), 0) scale(1.045); }
[data-parallax] { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }

/* Home: the cover */
.hero { position: relative; height: min(100svh, 60rem); min-height: 36rem; display: grid; align-items: end; color: var(--white); overflow: hidden; background: var(--deep); }
.hero > picture img, .hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: settle 1600ms var(--ease-out) both; }
.hero::after { content: ""; position: absolute; inset: 0; background: rgba(14, 65, 80, 0.34); }
.hero .wrap { position: relative; z-index: 1; width: 100%; padding-bottom: clamp(2.5rem, 7vw, 5rem); }
.hero .kicker { color: var(--white); animation: fade 480ms var(--ease-out) both; }
.hero h1 { margin-top: 1.25rem; font-size: clamp(3.6rem, 11.5vw, 10.5rem); line-height: 0.9; letter-spacing: -0.035em; max-width: 9.5ch; }
.hero .lead { max-width: 30rem; margin-top: 1.75rem; font-size: 1.1875rem; line-height: 1.55; animation: fade 440ms var(--ease-out) 300ms both; }
.hero .actions { animation: fade 420ms var(--ease-out) 340ms both; }
.hero .folio { position: absolute; right: var(--gutter); bottom: clamp(2.5rem, 7vw, 5rem); z-index: 1; writing-mode: vertical-rl; transform: rotate(180deg); font: 700 0.6875rem/1 var(--text); letter-spacing: 0.24em; text-transform: uppercase; animation: fade 400ms var(--ease-out) 360ms both; }
@media (max-width: 719px) { .hero .folio { display: none; } }

/* Sections */
.band { padding: clamp(5rem, 11vw, 9.5rem) 0; }
.band-mist { background: var(--mist); }
.band-teal { background: var(--teal); color: var(--white); }
.band-deep { background: var(--deep); color: var(--white); }
.head { display: grid; gap: 1.5rem; margin-bottom: clamp(3rem, 7vw, 5.5rem); }
.head h2 { font-size: clamp(2.9rem, 7.4vw, 6.75rem); line-height: 0.94; letter-spacing: -0.03em; }
.head .standfirst { max-width: 34rem; font: 400 clamp(1.3rem, 2.2vw, 1.6rem)/1.4 var(--display); color: var(--soft); }
.on-dark .head .standfirst, .on-dark .standfirst { color: var(--mist); }
@media (min-width: 960px) {
  .head { grid-template-columns: 7fr 5fr; align-items: end; column-gap: 4rem; }
  .head .kicker { grid-column: 1 / -1; }
  .head .standfirst { padding-bottom: 0.6rem; }
}
.prose p + p { margin-top: 1.1rem; }
.prose { max-width: 34rem; color: var(--ink); }
.on-dark .prose { color: var(--white); }

/* Home: the letter. His own line set large, the story beside it, his photo set off the grid */
.letter { display: grid; gap: 3rem; }
.letter blockquote { margin: 0; }
.letter blockquote p { font: 400 clamp(2.1rem, 4.6vw, 4.1rem)/1.08 var(--display); letter-spacing: -0.02em; color: var(--teal); }
.letter blockquote footer { margin-top: 1.5rem; }
.letter .prose { margin-top: 2.5rem; }
.letter figure .frame { aspect-ratio: 3 / 4; }
@media (min-width: 960px) {
  .letter { grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; align-items: start; }
  .letter .words { grid-column: 1 / 8; }
  .letter .prose { margin-left: 16.6%; }
  .letter figure { grid-column: 9 / 13; margin-top: 9rem; }
}

/* Home: the three chapters, laid out like a contents spread */
.chapters { display: grid; gap: clamp(3.5rem, 8vw, 4.5rem); counter-reset: ch; }
.chapter { display: block; text-decoration: none; color: inherit; }
.chapter .frame { aspect-ratio: 4 / 5; }
.chapter .t { display: grid; grid-template-columns: auto 1fr; column-gap: 1.25rem; margin-top: 1.25rem; }
.chapter .num { grid-row: span 3; font: 400 clamp(2.5rem, 4vw, 3.5rem)/0.9 var(--display); color: var(--teal); }
.chapter h3 { font-size: clamp(2.6rem, 5vw, 4.25rem); line-height: 0.95; letter-spacing: -0.03em; }
.chapter p { margin-top: 0.6rem; max-width: 26rem; color: var(--soft); }
.chapter .more { margin-top: 0.5rem; }
.chapter:hover .more span { background-size: 0 1px; }
@media (max-width: 959px) {
  .chapters li:nth-child(2) { padding-left: 14%; }
  .chapters li:nth-child(3) { padding-right: 10%; }
}
@media (min-width: 960px) {
  .chapters { grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; row-gap: 0; align-items: start; }
  .chapters li { grid-row: 1; }
  .chapters li:nth-child(1) { grid-column: 1 / 5; }
  .chapters li:nth-child(2) { grid-column: 5 / 9; margin-top: 9rem; }
  .chapters li:nth-child(3) { grid-column: 9 / 13; margin-top: 18rem; }
}

/* Home: the bespoke trip. A photo as wide as the page, a sand page laid over its corner */
.feature { position: relative; padding: 0 0 clamp(5rem, 11vw, 9.5rem); }
.feature .frame { height: clamp(26rem, 82vh, 52rem); }
.feature .panel { position: relative; z-index: 1; background: var(--sand); padding: clamp(2rem, 5vw, 4rem); margin: -6rem var(--gutter) 0; max-width: 40rem; }
.feature .panel h2 { margin-top: 1.25rem; font-size: clamp(2.5rem, 5.4vw, 4.75rem); line-height: 0.96; letter-spacing: -0.03em; }
.feature .panel .prose { margin-top: 1.5rem; }
@media (min-width: 960px) { .feature .panel { margin: -14rem 0 0 calc(max(var(--gutter), (100vw - var(--measure)) / 2 + var(--gutter))); } }

/* Home: seen on Bali. An uneven grid with captions */
.seen { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(0.75rem, 2vw, 1.5rem); align-items: start; }
.seen figure { grid-column: span 3; }
.seen figure:nth-child(1) { grid-column: 1 / -1; }
.seen figure:nth-child(1) .frame { aspect-ratio: 16 / 9; }
.seen .frame { aspect-ratio: 4 / 5; }
.seen figure:nth-child(3) { margin-top: 3rem; }
.seen figure:nth-child(5) { margin-top: 3rem; }
@media (min-width: 960px) {
  .seen { grid-template-columns: repeat(12, 1fr); }
  .seen figure:nth-child(1) { grid-column: 1 / 8; }
  .seen figure:nth-child(2) { grid-column: 9 / 13; margin-top: 8rem; }
  .seen figure:nth-child(3) { grid-column: 2 / 5; margin-top: -2rem; }
  .seen figure:nth-child(4) { grid-column: 6 / 9; margin-top: 4rem; }
  .seen figure:nth-child(5) { grid-column: 10 / 13; margin-top: -1rem; }
  .seen figure:nth-child(6) { grid-column: 4 / 11; margin-top: 3rem; }
  .seen figure:nth-child(6) .frame { aspect-ratio: 16 / 9; }
}

/* Contact: the details set out between hairlines */
.contact { border-top: 1px solid var(--rule-light); }
.contact li { display: grid; gap: 0.25rem; padding: 1.25rem 0; border-bottom: 1px solid var(--rule-light); }
.contact .k { font: 700 0.75rem/1.4 var(--text); letter-spacing: 0.2em; text-transform: uppercase; color: var(--sun); }
.contact a { justify-self: start; font: 400 clamp(1.5rem, 3.4vw, 2.6rem)/1.15 var(--display); letter-spacing: -0.01em; text-decoration: none; color: var(--white); overflow-wrap: anywhere; }
@media (min-width: 720px) { .contact li { grid-template-columns: 14rem 1fr; align-items: baseline; padding: 1.5rem 0; } }

/* Page heads on the inner pages */
.page-head { position: relative; min-height: clamp(30rem, 72vh, 46rem); display: grid; align-items: end; color: var(--white); background: var(--deep); overflow: hidden; }
.page-head > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: settle 1600ms var(--ease-out) both; }
.page-head::after { content: ""; position: absolute; inset: 0; background: rgba(14, 65, 80, 0.42); }
.page-head .wrap { position: relative; z-index: 1; width: 100%; padding-top: calc(var(--bar) + 3rem); padding-bottom: clamp(3rem, 7vw, 5rem); }
.page-head .kicker { color: var(--white); animation: fade 480ms var(--ease-out) both; }
.page-head h1 { margin-top: 1.25rem; font-size: clamp(3.4rem, 10vw, 9rem); line-height: 0.9; letter-spacing: -0.035em; }
.page-head .lead { max-width: 32rem; margin-top: 1.5rem; font-size: 1.1875rem; line-height: 1.55; animation: fade 440ms var(--ease-out) 300ms both; }

/* The guide: a contents bar that stays under the masthead and marks the chapter you are in */
.toc { position: sticky; top: calc(var(--bar) - 1px); z-index: 30; background: var(--sand); border-bottom: 1px solid var(--rule); }
.toc ol { display: flex; justify-content: space-between; gap: 0.5rem; }
.toc a { position: relative; display: inline-flex; align-items: baseline; gap: 0.4rem; min-height: 3rem; padding: 1rem 0 0.9rem; font: 700 0.75rem/1 var(--text); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--soft); transition: color 300ms ease-out; }
.toc a b { font: 400 0.9375rem/1 var(--display); letter-spacing: 0; color: var(--teal); }
.toc a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--teal); transform: scaleX(0); transform-origin: left; transition: transform 420ms var(--ease-out); }
.toc a:hover, .toc a[aria-current] { color: var(--teal); }
.toc a[aria-current]::after { transform: scaleX(1); }
@media (max-width: 419px) { .toc a b { display: none; } }
@media (min-width: 720px) { .toc ol { justify-content: flex-start; gap: 3rem; } }

/* The guide: a chapter opener and its entries, alternating sides like spreads */
.chapter-open { display: grid; gap: 1rem; margin-bottom: clamp(3rem, 7vw, 6rem); }
.chapter-open .num { font: 400 clamp(5rem, 14vw, 11rem)/0.8 var(--display); color: var(--teal); opacity: 0.18; }
.chapter-open .num::before { content: attr(data-num); } /* a decorative numeral, so it lives in CSS, not in the text */
.chapter-open h2 { font-size: clamp(3.4rem, 9vw, 8rem); line-height: 0.9; letter-spacing: -0.035em; }
.chapter-open .standfirst { max-width: 32rem; font: 400 clamp(1.3rem, 2.2vw, 1.6rem)/1.4 var(--display); color: var(--soft); }
@media (min-width: 960px) {
  .chapter-open { grid-template-columns: auto 1fr; column-gap: 3rem; align-items: end; }
  .chapter-open .num { grid-row: span 3; }
}
.entries { display: grid; gap: clamp(4rem, 7vw, 6rem); }
.entry { display: grid; gap: 1.5rem; align-items: center; }
.entry .frame { aspect-ratio: 4 / 5; }
.entry .area { display: block; font: 700 0.75rem/1.4 var(--text); letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal); }
.entry h3 { margin-top: 0.85rem; font-size: clamp(2.3rem, 4.6vw, 3.9rem); line-height: 0.98; letter-spacing: -0.025em; }
.entry p { margin-top: 1.1rem; max-width: 30rem; }
.entry .t { border-top: 1px solid var(--rule); padding-top: 1.5rem; }
@media (min-width: 900px) {
  .entry { grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; }
  .entry figure { grid-column: 1 / 8; }
  .entry .t { grid-column: 9 / 13; }
  .entry:nth-child(even) figure { grid-column: 6 / 13; order: 2; }
  .entry:nth-child(even) .t { grid-column: 1 / 5; }
  .entry:nth-child(3) figure { grid-column: 2 / 8; }
}
.spread { display: grid; gap: clamp(0.75rem, 2vw, 1.5rem); margin-top: clamp(4rem, 9vw, 7.5rem); }
.spread .frame { aspect-ratio: 16 / 10; }
@media (min-width: 900px) { .spread { grid-template-columns: 7fr 5fr; align-items: end; } .spread figure + figure .frame { aspect-ratio: 4 / 5; } }

/* The person behind Mr. Bali */
.about { display: grid; gap: 3rem; }
.about figure .frame { aspect-ratio: 4 / 5; }
.about h2 { margin-top: 1.25rem; font-size: clamp(2.6rem, 5.6vw, 5rem); line-height: 0.95; letter-spacing: -0.03em; }
.about .prose { margin-top: 1.75rem; }
.jobs { margin-top: 2.5rem; border-top: 1px solid var(--rule); }
.jobs li { display: grid; gap: 0.2rem; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
.jobs .when { font: 700 0.75rem/1.4 var(--text); letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); }
.jobs h3 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); line-height: 1.15; }
.jobs p { color: var(--soft); font-size: 0.9375rem; }
@media (min-width: 960px) { .about { grid-template-columns: 5fr 1fr 6fr; align-items: start; } .about > figure { grid-column: 1; } .about > .body { grid-column: 3; } }
.album { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.75rem, 2vw, 1.5rem); margin-top: clamp(4rem, 9vw, 7rem); align-items: start; }
.album .frame { aspect-ratio: 4 / 5; }
.album .wide { grid-column: 1 / -1; }
.album .wide .frame { aspect-ratio: 3 / 2; }
@media (min-width: 900px) {
  .album { grid-template-columns: repeat(4, 1fr); }
  .album .wide { grid-column: span 2; }
  .album figure:nth-child(4n + 2) { margin-top: 4rem; }
  .album figure:nth-child(4n + 4) { margin-top: 2rem; }
}

/* Plan your trip: the whole page over his photo, the planner on clear panels so the island shows through */
.stage { position: relative; color: var(--white); background: var(--deep); }
.stage .backdrop { position: absolute; inset: 0; }
.stage .pin { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
.stage .pin img { width: 100%; height: 100%; object-fit: cover; animation: settle 1600ms var(--ease-out) both; }
.stage .pin::after { content: ""; position: absolute; inset: 0; background: rgba(14, 65, 80, 0.46); }
.stage .over { position: relative; z-index: 1; }
.stage .page-head { min-height: clamp(26rem, 64vh, 40rem); background: transparent; }
.stage .page-head::after { display: none; }
.stage .planner-band { padding: 0 0 clamp(5rem, 11vw, 9rem); }
.planner { display: grid; gap: 1rem; }
@media (min-width: 960px) { .planner { grid-template-columns: 1fr 1fr; align-items: start; gap: 1.5rem; } }
.glass { background: rgba(14, 65, 80, 0.62); border: 1px solid var(--rule-light); padding: clamp(1.5rem, 4.5vw, 3rem); }
.glass.solid { background: rgba(14, 65, 80, 0.86); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset + fieldset { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--rule-light); }
legend { float: left; width: 100%; padding: 0; font: 400 clamp(2rem, 4.4vw, 2.75rem)/1.05 var(--display); letter-spacing: -0.02em; color: var(--white); }
.hint { clear: both; padding-top: 0.6rem; margin: 0 0 1.25rem; font-size: 0.9375rem; color: var(--mist); }
.stepper { display: inline-flex; border: 1px solid var(--white); }
.stepper button { width: 3.25rem; min-height: 3.25rem; border: 0; background: transparent; color: var(--white); font: 600 1.5rem/1 var(--text); cursor: pointer; transition: background-color 200ms ease-out, color 200ms ease-out; }
.stepper button:hover { background: var(--white); color: var(--teal); }
.stepper button:active { transform: scale(0.94); }
.stepper input { width: 5.5rem; min-height: 3.25rem; border: 0; border-left: 1px solid var(--rule-light); border-right: 1px solid var(--rule-light); border-radius: 0; text-align: center; font: 400 2rem/1 var(--display); color: var(--white); background: transparent; -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field-error { color: var(--sun); font-weight: 800; margin-top: 0.75rem; }
.field-error:empty { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.5rem 1rem; border: 1px solid var(--rule-light); color: var(--white); font-size: 0.9375rem; font-weight: 700; cursor: pointer; user-select: none; transition: background-color 240ms ease-out, color 240ms ease-out, border-color 240ms ease-out, transform 160ms ease-out; }
.chip span::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; border: 1px solid currentColor; transition: background-color 240ms ease-out; }
.chip span:hover { border-color: var(--white); }
.chip span:active { transform: scale(0.97); }
.chip input:checked + span { background: var(--sand); border-color: var(--sand); color: var(--teal); }
.chip input:checked + span::before { background: var(--teal); border-color: var(--teal); }
.chip input:focus-visible + span { outline: 2px solid var(--sun); outline-offset: 3px; }
.result { min-height: 22rem; }
.result h2 { font-size: clamp(2.25rem, 5vw, 3.25rem); line-height: 1; letter-spacing: -0.02em; margin-bottom: 2rem; }
.result .empty { max-width: 26rem; color: var(--mist); }
.result .empty strong { display: block; margin-bottom: 0.75rem; font: 400 2rem/1.15 var(--display); color: var(--white); }
.route { margin: 0 0 2rem; }
.route li { position: relative; padding: 0 0 1.5rem 2.25rem; animation: fade 520ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 80ms); }
.route li::before { content: ""; position: absolute; left: 0.3rem; top: 0.6em; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--sun); }
.route li::after { content: ""; position: absolute; left: 0.68rem; top: 1.4em; bottom: 0.1em; width: 1px; background: var(--sun); }
.route li:last-child { padding-bottom: 0; }
.route li:last-child::after { display: none; }
.route .stop { display: block; font: 400 clamp(1.8rem, 4.6vw, 2.5rem)/1.1 var(--display); }
.route .nights { display: block; margin-top: 0.2rem; font: 700 0.75rem/1.4 var(--text); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sun); }
.route .why { display: block; font-size: 0.9375rem; color: var(--mist); }
.result .actions { margin-top: 0; }
.result .note { margin-top: 1.25rem; font-size: 0.9375rem; color: var(--mist); }
.result .status { margin-top: 1rem; font-weight: 800; }
.result textarea { width: 100%; margin-top: 1rem; min-height: 9rem; padding: 0.75rem; border: 1px solid var(--mist); background: var(--deep); color: var(--white); font: 600 0.9375rem/1.5 var(--text); resize: vertical; }

/* Footer: the name set across the page, like a masthead at the back */
.foot { background: var(--deep); color: var(--white); padding: clamp(4rem, 8vw, 6rem) 0 2rem; overflow: hidden; }
.foot .cols { display: grid; gap: 2rem; }
.foot p { max-width: 24rem; color: var(--mist); }
.foot ul { display: grid; gap: 0.25rem; }
.foot ul a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; color: var(--white); font-weight: 600; }
.foot .giant { display: block; margin-top: clamp(3rem, 8vw, 5rem); font: 400 clamp(5rem, 24vw, 22rem)/0.78 var(--display); letter-spacing: -0.05em; white-space: nowrap; color: var(--white); text-decoration: none; }
@media (min-width: 760px) { .foot .cols { grid-template-columns: 2fr 1fr 1fr; } }

/* WhatsApp, always to hand: a deep teal seal in the corner. It rises in once the hero has landed, a sun ring breathes
   out from it every few seconds, and on a wide screen it opens into its words when you point at it or tab to it. */
.wa { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 45; display: inline-flex; align-items: center; gap: 0; min-width: 3.75rem; height: 3.75rem; padding: 0 1rem; border-radius: 999px; background: var(--deep); color: var(--white); border: 1px solid var(--rule-light); text-decoration: none; font: 700 0.8125rem/1 var(--text); letter-spacing: 0.14em; text-transform: uppercase; animation: wa-in 480ms var(--ease-out) 280ms both; transition: background-color 300ms var(--ease-out), color 300ms var(--ease-out), gap 420ms var(--ease-out); }
.wa-icon { flex: none; width: 1.75rem; height: 1.75rem; color: var(--sun); transform-origin: 50% 70%; animation: wa-nudge 5s var(--ease) 2.6s infinite; transition: color 300ms var(--ease-out); }
.wa-text { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width 420ms var(--ease-out), opacity 260ms ease-out; }
.wa-ring { position: absolute; inset: -1px; border-radius: inherit; border: 2px solid var(--sun); pointer-events: none; opacity: 0; animation: wa-ring 5s var(--ease-out) 2.4s infinite; }
.wa:hover, .wa:focus-visible { background: var(--sun); color: var(--ink); gap: 0.65rem; }
.wa:hover .wa-icon, .wa:focus-visible .wa-icon { color: var(--ink); animation-play-state: paused; }
.wa:hover .wa-text, .wa:focus-visible .wa-text { max-width: 14rem; opacity: 1; }
.wa:focus-visible { outline: 2px solid var(--sun); outline-offset: 4px; }
.wa:active { transform: scale(0.96); }
body.menu-open .wa { visibility: hidden; }
@media (min-width: 900px) { .wa { right: 2rem; bottom: 2rem; } }
@keyframes wa-in { from { opacity: 0; transform: translateY(1.5rem) scale(0.6); } 60% { opacity: 1; transform: translateY(-0.2rem) scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes wa-ring { 0% { opacity: 0.9; transform: scale(1); } 40%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes wa-nudge { 0%, 70%, 100% { transform: none; } 74% { transform: rotate(-12deg); } 78% { transform: rotate(10deg); } 82% { transform: rotate(-6deg); } 86% { transform: rotate(0); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .w > span, .reveal, .menu ol a { transform: none !important; opacity: 1 !important; }
  [data-parallax] { transform: none !important; }
  .wa-ring { display: none; }
}
.letter .kicker { margin-bottom: 1.75rem; }