:root{
  --bg:#f7f4ee; --ink:#1d2321; --muted:#5f6763; --line:#e2ddd2;
  --gold:#c8921a; --sky:#1f5fa8; --card:#fffdf8;
  --serif:"Noto Serif Thai","Noto Serif",Georgia,serif;
  --sans:"IBM Plex Sans Thai","Noto Sans Thai",system-ui,sans-serif;
  --gap:12px; --side:20px; --radius:8px;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#141716; --ink:#ece8df; --muted:#a3a99f; --line:#2c312e; --gold:#e3ad3c; --sky:#7fb0e8; --card:#1b1f1d;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.85}
img,video{max-width:100%;display:block}
a{color:var(--sky)}
.wrap{max-width:720px;margin:0 auto;padding:0 var(--side)}
.wide{max-width:1100px;margin:0 auto;padding:0 var(--side)}

/* top bar */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:18px var(--side);max-width:1100px;margin:0 auto;font-size:15px}
.topbar a{color:var(--ink);text-decoration:none;font-weight:600;letter-spacing:.02em}
.topbar span{color:var(--muted)}

/* hero */
.hero{position:relative;height:88vh;min-height:520px;max-height:900px;overflow:hidden}
.hero img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,0) 45%,rgba(0,0,0,.65))}
.hero .t{position:absolute;left:0;right:0;bottom:0;z-index:1;color:#fff;padding:0 var(--side) 48px;max-width:1100px;margin:0 auto}
.kicker{font-size:14px;letter-spacing:.03em;text-transform:uppercase;color:var(--gold);font-weight:600}
.hero .kicker{color:#ffd57a}
h1{font-family:var(--serif);font-weight:700;font-size:clamp(32px,6vw,58px);line-height:1.25;margin:.2em 0 .3em;max-width:16em}
.hero p{margin:0;max-width:36em;font-size:18px;opacity:.92}

/* text */
.meta{display:flex;flex-wrap:wrap;gap:8px 20px;color:var(--muted);font-size:15px;padding:22px 0;border-bottom:1px solid var(--line);margin-bottom:28px}
h2{font-family:var(--serif);font-size:clamp(24px,3.6vw,32px);line-height:1.35;margin:2.2em 0 .6em}
h3{font-family:var(--serif);font-size:21px;margin:1.6em 0 .3em}
p{margin:0 0 1.1em}
.lead{font-size:20px}
.route{list-style:none;padding:0;margin:24px 0;counter-reset:s}
.route li{position:relative;padding:0 0 22px 52px;counter-increment:s}
.route li::before{content:counter(s);position:absolute;left:0;top:2px;width:34px;height:34px;border-radius:50%;background:var(--gold);color:#fff;font-weight:700;display:grid;place-items:center;font-size:16px}
.route li::after{content:"";position:absolute;left:16px;top:40px;bottom:4px;width:2px;background:var(--line)}
.route li:last-child::after{display:none}
.route b{display:block}
.tips{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 24px;margin:24px 0}
.tips ul{padding-left:1.1em}
.tips li{margin:.5em 0}
.end{border-top:1px solid var(--line);margin-top:56px;padding:28px 0 60px;color:var(--muted);font-size:15px}

/* ---------- photo grids ----------
   One ratio per row so every row lines up:
   .g-p2 / .g-p3 / .g-p4  portrait 9:16 tiles, 2/3/4 across
   .g-l2                   landscape 16:9 tiles, 2 across
   .g-s2                   3:4 tiles, 2 across (for mixed-ratio photos)
   .g-mosaic               1 tall 9:16 on the left + 2 landscapes stacked on the right
   .full                   one photo or video across the whole width            */
.g,.full{max-width:1100px;margin:44px auto;padding:0 var(--side)}
.g{display:grid;gap:var(--gap)}
.g img,.g video,.full img,.full video{width:100%;height:auto;object-fit:cover;border-radius:var(--radius);background:#000}
.g-p2{grid-template-columns:repeat(2,1fr)} .g-p2 img,.g-p2 video{aspect-ratio:9/16}
.g-p3{grid-template-columns:repeat(3,1fr)} .g-p3 img{aspect-ratio:9/16}
.g-p4{grid-template-columns:repeat(4,1fr)} .g-p4 img{aspect-ratio:9/16}
.g-l2{grid-template-columns:repeat(2,1fr)} .g-l2 img{aspect-ratio:16/9}
.g-s2{grid-template-columns:repeat(2,1fr)} .g-s2 img{aspect-ratio:3/4}
.g-mosaic{grid-template-columns:1fr 1.58fr;grid-template-rows:1fr 1fr}
.g-mosaic img{height:100%;aspect-ratio:auto}
.g-mosaic .tall{grid-row:1/3}
.g-mosaic > *{min-height:0}
.full img,.full video{aspect-ratio:16/9}
figure{margin:0}
figcaption{font-size:14px;color:var(--muted);margin-top:8px;text-align:center}
.aside-photo{max-width:420px;margin:24px auto 8px}
.aside-photo img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius)}

/* index */
.intro{padding:56px 0 24px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;padding-bottom:80px}
.card{display:block;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.card img{aspect-ratio:4/3;object-fit:cover;width:100%}
.card > div{padding:16px 20px 20px}
.card h3{margin:.2em 0 .3em;font-size:22px}
.card p{color:var(--muted);font-size:16px;margin:0}
.countries{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 36px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);text-decoration:none;font-weight:600;font-size:16px}
.chip[aria-current="page"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip small{font-weight:400;opacity:.7}
.chip.soon{color:var(--muted);border-style:dashed;font-weight:400}
.trip-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 16px}
.trip-head h2{margin:0}
.trip-head span{color:var(--muted);font-size:15px}

/* photo protection: no right-click save, drag, or long-press */
img,video{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
img{pointer-events:none}

/* ---------- tablet ---------- */
@media (max-width:900px){
  .g-p4{grid-template-columns:repeat(2,1fr)}
}
/* ---------- phone ---------- */
@media (max-width:640px){
  :root{--gap:8px;--side:14px}
  body{font-size:17px}
  .hero{height:72vh;min-height:440px}
  .hero .t{padding-bottom:28px}
  .g,.full{margin:28px auto}
  .g-l2{grid-template-columns:1fr}
  .g-mosaic{grid-template-columns:1fr;grid-template-rows:auto}
  .g-mosaic img{height:auto;aspect-ratio:16/9}
  .g-mosaic .tall{grid-row:auto}
  .g-mosaic .tall img{aspect-ratio:9/16}
}