/* The Diving page: ivory paper, deep sea ink, sand gold. One look on purpose (light), over the drone footage.
   The opening flight is scrubbed by js/diving.js on a sticky stage while html.scrub is set; without it (no script,
   reduced motion, frames failed) every chapter shows its own still instead. */

@font-face { font-family: "Plus Jakarta Sans"; src: url("/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
             font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
             font-weight: 500; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("/fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2");
             font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Thai"; src: url("/fonts/ibm-plex-sans-thai-thai-400-normal.woff2") format("woff2");
             font-weight: 400; font-display: swap; unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "IBM Plex Sans Thai"; src: url("/fonts/ibm-plex-sans-thai-thai-600-normal.woff2") format("woff2");
             font-weight: 500 700; font-display: swap; unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Noto Serif Thai"; src: url("/fonts/noto-serif-thai-thai-500-normal.woff2") format("woff2");
             font-weight: 400 600; font-display: swap; unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }

:root {
  color-scheme: light;
  --ivory: #f6f1e8;
  --paper: #fbf8f3;
  --sand: #efe6d6;
  --ink: #0f2a2f;
  --ink-2: #3f5558;
  --sea: #1f5f63;
  --gold: #b28a52;
  --gold-2: #d9bb86;
  --line: rgba(15, 42, 47, .14);
  --on-photo: #fbf8f3;
  --serif: "Cormorant Garamond", "Noto Serif Thai", Georgia, serif;
  --sans: "Plus Jakarta Sans", "IBM Plex Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--ivory); color: var(--ink); font: 400 17px/1.65 var(--sans); overflow-x: clip; }
img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.04; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(46px, 8.4vw, 112px); }
h2 { font-size: clamp(36px, 5.6vw, 76px); }
em { font-style: italic; color: var(--gold); }
p { margin: 0; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 14px; z-index: 50; }
.skip:focus { left: 12px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.label { font: 600 12px/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-2); }
.label.ink { color: var(--gold); }
.lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--ink-2); max-width: 36em; text-wrap: pretty; }
.wrap { max-width: 1200px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }

.btn { display: inline-flex; align-items: center; gap: .5em; min-height: 48px; padding: 0 26px; border-radius: 999px;
       font: 600 15px/1 var(--sans); text-decoration: none; letter-spacing: .02em;
       transition: transform .3s var(--ease), background .3s, color .3s, box-shadow .3s; }
.btn:hover { transform: translateY(-2px); }
.btn.gold { background: var(--gold); color: var(--paper); box-shadow: 0 10px 30px -12px rgba(178, 138, 82, .8); }
.btn.gold:hover { background: #9d7744; }
.btn.ink { background: var(--ink); color: var(--paper); }
.btn.glass { background: rgba(251, 248, 243, .12); color: var(--on-photo); border: 1px solid rgba(251, 248, 243, .4);
             backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* ---------- header: light over the photos, paper once over paper ---------- */
.top { position: fixed; inset: 0 0 auto; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 16px;
       padding: calc(14px + env(safe-area-inset-top, 0px)) var(--gutter-r) 14px var(--gutter);
       color: var(--on-photo); transition: background .4s, color .4s, box-shadow .4s, padding .4s; }
.top.solid { background: rgba(246, 241, 232, .9); color: var(--ink); box-shadow: 0 1px 0 var(--line);
             backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 500 21px/1 var(--serif); letter-spacing: .01em; white-space: nowrap; }
.brand img { width: 34px; height: auto; }
.brand .on-paper, .top.solid .brand .on-photo { display: none; }
.top.solid .brand .on-paper { display: block; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { text-decoration: none; font-size: 15px; padding: 8px 12px; border-radius: 999px; opacity: .88; transition: opacity .2s, background .2s; }
.nav a:hover { opacity: 1; background: rgba(127, 127, 127, .12); }
.nav .cta { margin-left: 6px; background: var(--gold); color: var(--paper); opacity: 1; font-weight: 600; padding: 9px 18px; }
.nav .cta:hover { background: #9d7744; }
@media (max-width: 860px) { .nav a:not(.lang):not(.cta) { display: none; } .brand span { display: none; } }

/* ---------- the flight ---------- */
.flight { position: relative; background: #0b1d22; color: var(--on-photo); }
.stage { display: none; }
.chapter { position: relative; min-height: 100svh; display: flex; align-items: flex-end;
           background: var(--still) center / cover no-repeat #0b1d22; }
.chapter::before { content: ""; position: absolute; inset: 0; pointer-events: none;
                   background: linear-gradient(180deg, rgba(6, 20, 24, .45) 0, rgba(6, 20, 24, 0) 30%, rgba(6, 20, 24, 0) 50%, rgba(6, 20, 24, .7) 100%); }
.copy { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; display: grid; gap: 18px; justify-items: start;
        padding: 0 var(--gutter-r) calc(72px + env(safe-area-inset-bottom, 0px)) var(--gutter); }
.copy h1, .copy h2 { color: var(--on-photo); max-width: 13em; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.copy em { color: var(--gold-2); }
.copy .lead { color: rgba(251, 248, 243, .88); text-shadow: 0 1px 16px rgba(0, 0, 0, .4); }
.copy.right { justify-items: end; text-align: right; }
.copy.right h2 { margin-left: auto; }
.copy.center { justify-items: center; text-align: center; }
.c1 { align-items: center; }
.c1 .copy { padding-top: 90px; }
.hint { display: flex; align-items: center; gap: 12px; margin-top: 18px; font: 600 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; opacity: .85; }
.hint span { width: 1px; height: 46px; background: linear-gradient(var(--on-photo), transparent); animation: drip 2.2s var(--ease) infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.flight-bar { display: none; }

/* Scrubbed: one sticky canvas, the chapters become scroll distance with the words held over it. */
html.scrub .flight { overflow: clip; }
html.scrub .stage { display: block; position: sticky; top: 0; height: 100svh; margin-bottom: -100svh; overflow: hidden; }
html.scrub #sky { display: block; width: 100%; height: 100%; object-fit: cover; background: #0b1d22; pointer-events: none; }
html.scrub .shade { position: absolute; inset: 0;
                    background: linear-gradient(180deg, rgba(6, 20, 24, .42) 0, rgba(6, 20, 24, 0) 26%, rgba(6, 20, 24, 0) 52%, rgba(6, 20, 24, .62) 100%); }
html.scrub .chapter { background: none; display: block; min-height: 0; height: calc(var(--len, 1.6) * 100svh); }
html.scrub .chapter::before { display: none; }
html.scrub .chapter .copy { position: sticky; top: 0; height: 100svh; align-content: end;
                            opacity: var(--o, 0); transform: translateY(calc((1 - var(--o, 0)) * 26px)); will-change: opacity, transform; }
html.scrub .c1 .copy { align-content: center; }
html.scrub .c1 { --len: 1.1; }
html.scrub .c2 { --len: 2.2; }
html.scrub .c3 { --len: 2.2; }
html.scrub .c4 { --len: 1.9; }
html.scrub .c5 { --len: 1.9; }
html.scrub .flight-bar { display: block; position: fixed; z-index: 20; right: max(18px, env(safe-area-inset-right, 0px)); top: 50%;
                         width: 2px; height: 120px; margin-top: -60px; background: rgba(251, 248, 243, .25); border-radius: 2px;
                         transition: opacity .4s; }
html.scrub .flight-bar span { position: absolute; inset: 0; background: var(--gold-2); transform-origin: top; transform: scaleY(var(--p, 0)); border-radius: 2px; }
html.scrub.past-flight .flight-bar { opacity: 0; }

/* ---------- paper sections ---------- */
.paper { background: var(--ivory); padding-block: clamp(80px, 12vw, 150px); }
.paper.sand { background: var(--sand); }
.head { display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 60px); }
#courses { background: var(--paper); }
#courses .head, #courses > .wrap > p { max-width: 900px; }

.course-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-bottom: 26px;
               border-bottom: 1px solid var(--line); }
.course-tabs::-webkit-scrollbar { display: none; }
.course-tabs button { flex: none; appearance: none; border: 0; background: none; cursor: pointer; color: var(--ink-2);
                      font: 500 15px/1 var(--sans); padding: 14px 16px; position: relative; transition: color .2s; }
.course-tabs button::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -5px; height: 2px; background: var(--gold);
                             transform: scaleX(0); transition: transform .35s var(--ease); }
.course-tabs button[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.course-tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.panels { margin-bottom: 40px; }
.panel-intro { font: italic 500 24px/1.3 var(--serif); color: var(--sea); margin-bottom: 14px; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n b" "w b"; column-gap: 24px; row-gap: 2px;
           padding: 20px 4px; border-bottom: 1px solid var(--line); transition: background .3s, padding .3s; }
.list li:hover { background: rgba(178, 138, 82, .06); padding-left: 12px; padding-right: 12px; }
.list .n { grid-area: n; font: 500 clamp(23px, 2.4vw, 30px)/1.15 var(--serif); }
.list .w { grid-area: w; font-size: 15px; color: var(--ink-2); min-width: 0; }
.list b { grid-area: b; align-self: center; font: 600 17px/1 var(--sans); color: var(--sea); letter-spacing: .01em; white-space: nowrap; }
.list .star .n::after { content: "Most popular"; margin-left: 12px; vertical-align: middle; font: 600 10px/1 var(--sans); letter-spacing: .16em;
                        text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold); border-radius: 999px; padding: 4px 8px; }
.panel:not([hidden]) { animation: rise .5s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- the reef ---------- */
.reef { position: relative; min-height: 92svh; display: grid; align-items: end; overflow: hidden; color: var(--on-photo); background: #0b1d22; }
.reef-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reef::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 20, 24, 0) 40%, rgba(6, 20, 24, .7)); }
.reef-copy { position: relative; z-index: 1; display: grid; gap: 14px; width: 100%; max-width: 1200px; margin: 0 auto;
             padding: 0 var(--gutter-r) clamp(56px, 8vw, 96px) var(--gutter); }
.reef-copy h2 { color: var(--on-photo); }
.reef-copy em { color: var(--gold-2); }
.reef-copy p:last-child { max-width: 30em; color: rgba(251, 248, 243, .86); }

/* ---------- the resort mosaic ---------- */
.mosaic { display: grid; gap: clamp(8px, 1.2vw, 16px); padding: 0 var(--gutter-r) 0 var(--gutter); max-width: 1440px; margin: 0 auto;
          grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(120px, 15vw, 210px); }
.mosaic figure { margin: 0; overflow: hidden; border-radius: 4px; background: var(--sand); }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.mosaic figure:hover img { transform: scale(1.04); }
.m-a { grid-column: 1 / 5; grid-row: span 4; }
.m-b { grid-column: 5 / 13; grid-row: span 2; }
.m-c { grid-column: 5 / 9; grid-row: span 2; }
.m-d { grid-column: 9 / 13; grid-row: span 4; }
.m-e { grid-column: 1 / 9; grid-row: span 2; }
@media (max-width: 720px) {
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 44vw; }
  .m-a, .m-d { grid-column: span 1; grid-row: span 3; }
  .m-b, .m-c, .m-e { grid-column: 1 / -1; grid-row: span 1; }
}

/* ---------- marine life ---------- */
.life { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.life figure { margin: 0; }
.life img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; border-radius: 4px; }
.life figure:nth-child(even) { margin-top: 48px; }
.life figcaption { margin-top: 12px; font: italic 500 21px/1.2 var(--serif); color: var(--sea); }
@media (max-width: 860px) { .life { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- dive sites ---------- */
.sites-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 90px); align-items: start; }
.sites-grid > div { display: grid; gap: 18px; position: sticky; top: 110px; }
.sites { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 32px; counter-reset: site; }
.sites li { break-inside: avoid; padding: 12px 0; border-bottom: 1px solid var(--line); font: 500 22px/1.2 var(--serif);
            display: flex; gap: 14px; align-items: baseline; counter-increment: site; }
.sites li::before { content: counter(site, decimal-leading-zero); font: 600 11px/1 var(--sans); letter-spacing: .12em; color: var(--gold); }
@media (max-width: 860px) { .sites-grid { grid-template-columns: minmax(0, 1fr); } .sites-grid > div { position: static; } }
@media (max-width: 440px) { .sites { columns: 1; } }

/* ---------- book ---------- */
.book { position: relative; overflow: hidden; color: var(--on-photo); padding-block: clamp(110px, 16vw, 200px); background: #0b1d22; }
.book-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.book::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 20, 24, .25), rgba(6, 20, 24, .72)); }
.book-in { position: relative; z-index: 1; display: grid; gap: 20px; justify-items: center; text-align: center; }
.book-in h2 { color: var(--on-photo); }
.book-in em { color: var(--gold-2); }
.book-in .lead { color: rgba(251, 248, 243, .88); }
.book-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; }
.book address { font-style: normal; font-size: 14px; color: rgba(251, 248, 243, .78); max-width: 40em; margin-top: 10px; }

/* ---------- footer ---------- */
footer { background: var(--ink); color: rgba(251, 248, 243, .72); font-size: 14px; padding-block: 44px; }
.foot { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; }
.foot img { filter: brightness(0) invert(.94); opacity: .85; }
.foot nav { margin-left: auto; display: flex; gap: 20px; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--paper); }

/* ---------- reveals (js adds .pre only to what starts below the fold) ---------- */
.reveal.pre { opacity: 0; transform: translateY(24px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hint span, .panel:not([hidden]) { animation: none; }
  .btn, .mosaic img, .list li { transition: none; }
}

/* A soft pool of shade behind the words, so they read over white sand as well as deep water. */
.copy { background: radial-gradient(ellipse 60% 42% at 24% 78%, rgba(6, 20, 24, .38), rgba(6, 20, 24, 0) 72%); }
.copy.right { background: radial-gradient(ellipse 60% 42% at 76% 78%, rgba(6, 20, 24, .38), rgba(6, 20, 24, 0) 72%); }
.copy.center { background: radial-gradient(ellipse 70% 40% at 50% 74%, rgba(6, 20, 24, .34), rgba(6, 20, 24, 0) 72%); }
.c1 .copy { background: radial-gradient(ellipse 80% 60% at 30% 50%, rgba(6, 20, 24, .55), rgba(6, 20, 24, 0) 74%); }

/* ── Thai (/th/): Thai needs room above and below the line for its vowel and tone marks, and has no italics and no
   capitals, so the display lines open up, the gold words stay upright and the small labels drop their wide tracking.
   The Thai letters come from Noto Serif Thai and IBM Plex Sans Thai, downloaded only where Thai appears. ── */
:lang(th) body, body:lang(th) { line-height: 1.85; }
:lang(th) h1 { line-height: 1.22; }
:lang(th) h2, :lang(th) h3 { line-height: 1.3; }
:lang(th) em { font-style: normal; }
:lang(th) .label { letter-spacing: .06em; }
:lang(th) .lead { line-height: 1.8; }
:lang(th) h1 { font-size: clamp(40px, 7vw, 92px); }
:lang(th) h2 { font-size: clamp(30px, 4.6vw, 62px); }
:lang(th) .panel-intro, :lang(th) .life figcaption { font-style: normal; line-height: 1.5; }
:lang(th) .list .w { line-height: 1.7; }
:lang(th) .hint { letter-spacing: .06em; }
:lang(th) .list .star .n::after { content: "ยอดนิยม"; letter-spacing: .04em; }