/* =========================================================
   พิพิธภัณฑ์เมืองยะลา — Museum of Yala City
   ธีม: หรูเรียบแบบพิพิธภัณฑ์ระดับโลก + สีจากโลโก้เป็นจุดเด่น
   ========================================================= */

:root {
  /* โทนหลัก */
  --ink: #0e1311;
  --ink-2: #151d1a;
  --ink-3: #1e2824;
  --ivory: #f4efe6;
  --ivory-2: #ebe4d8;
  --stone: #cfc6b8;
  --muted: #a3aca5; /* เทาอ่อนบนพื้นเข้ม */
  --muted-dark: #4d554f; /* เทาเข้มบนพื้นครีม (คอนทราสต์ ≥ 7:1) */
  --gold: #c9a96b;
  --gold-soft: #e4cf9f;
  --gold-ink: #7a5f2c; /* ทองเข้มสำหรับตัวหนังสือบนพื้นครีม (คอนทราสต์ ≥ 4.5:1) */

  /* สีจากโลโก้ */
  --logo-green: #2f9e5e;
  --logo-yellow: #f0b92b;
  --logo-red: #e2573f;
  --logo-blue: #2b78bf;

  --serif: "Noto Serif Thai", "Cormorant Garamond", serif;
  --sans: "IBM Plex Sans Thai", system-ui, sans-serif;
  --latin: "Cormorant Garamond", "Noto Serif Thai", serif;
  --num: "Noto Serif Thai", serif; /* ตัวเลขแบบตรง อ่านง่าย */

  --gutter: clamp(16px, 5vw, 72px);
  --section-y: clamp(64px, 8vw, 120px); /* ระยะเว้นบน-ล่างของแต่ละส่วน (ปรับที่นี่ที่เดียว) */
  --radius: 18px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--sans);
  font-weight: 400; /* 300 บางเกินไปสำหรับอักษรไทยขนาดเล็ก */
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.8;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;
}
body.is-loading { overflow: hidden; }
[hidden] { display: none !important; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; line-height: 1.35; }
h1, h2 { text-wrap: balance; }
p { margin: 0; }

/* ลิงก์ข้ามเมนู (เห็นเมื่อกด Tab) และข้อความสำหรับโปรแกรมอ่านหน้าจอ */
.skip-link {
  position: fixed; left: 16px; top: 16px; z-index: 110;
  padding: 10px 18px; border-radius: 99px;
  background: var(--gold); color: var(--ink); font-weight: 500;
  transform: translateY(-160%);
  transition: transform .3s var(--ease);
}
.skip-link:focus { transform: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
[tabindex="-1"]:focus { outline: none; }

.wrap { width: min(1240px, 100%); margin: 0 auto; padding: 0 var(--gutter); }

.dark { background: var(--ink); color: var(--ivory); }
.light { background: var(--ivory); color: var(--ink); }

.kicker {
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: .9em;
}
.kicker::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.light .kicker { color: var(--gold-ink); }

.h2 {
  font-size: clamp(2.2rem, 4.6vw, 4.2rem);
  line-height: 1.22;
  letter-spacing: -.01em;
  margin: .4em 0 .5em;
}

/* ---------- Image placeholders (ก่อนใส่รูปจริง) ---------- */
[data-img] {
  background-color: var(--ink-3);
  background-size: cover;
  background-position: center;
}
[data-img].no-img {
  background-image:
    radial-gradient(circle at 30% 20%, rgba(201,169,107,.18), transparent 55%),
    radial-gradient(circle at 80% 90%, rgba(47,158,94,.16), transparent 50%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 14px);
}
[data-img].no-img::after {
  content: "ใส่รูป: images/" attr(data-missing);
  position: absolute;
  left: 14px; bottom: 12px;
  font: 500 .72rem/1.4 var(--sans);
  letter-spacing: .04em;
  color: rgba(244,239,230,.55);
  background: rgba(0,0,0,.35);
  padding: 4px 10px;
  border-radius: 99px;
  z-index: 3;
}

/* ---------- Loader ---------- */
.loader {
  position: fixed; inset: 0;
  z-index: 100;
  background: var(--ink);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 22px;
  transition: opacity .9s var(--ease), visibility .9s;
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader-web { width: 110px; height: 110px; overflow: visible; }
.loader-web circle, .loader-web line {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  animation: draw 1.6s var(--ease) forwards;
}
.loader-web line { stroke-opacity: .6; animation-delay: .45s; }
.loader-web circle:nth-child(2) { animation-delay: .15s; }
.loader-web circle:nth-child(3) { animation-delay: .3s; }
.loader-name {
  font-family: var(--serif);
  letter-spacing: .1em;
  font-size: .9rem;
  color: var(--stone);
  opacity: 0;
  animation: fadeIn 1s .7s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadeIn { to { opacity: 1; } }

/* ---------- Scroll progress ---------- */
.progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 60;
  pointer-events: none;
}
.progress span {
  display: block; height: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--logo-green), var(--logo-yellow), var(--logo-red), var(--logo-blue));
}

/* ---------- Custom cursor (เฉพาะเมาส์) ---------- */
.cursor { display: none; }
@media (pointer: fine) {
  .cursor {
    display: block;
    position: fixed; top: 0; left: 0;
    width: 34px; height: 34px;
    margin: -17px 0 0 -17px;
    border: 1px solid rgba(201,169,107,.7);
    border-radius: 50%;
    pointer-events: none;
    z-index: 90;
    transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background-color .35s, border-color .35s, opacity .3s;
    mix-blend-mode: difference;
    opacity: 0;
  }
  .cursor.is-visible { opacity: 1; }
  .cursor.is-hover {
    width: 70px; height: 70px; margin: -35px 0 0 -35px;
    background: rgba(228,207,159,.9);
    border-color: transparent;
  }
}

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 20px var(--gutter);
  transition: background-color .5s, padding .5s var(--ease), backdrop-filter .5s, transform .5s var(--ease);
}
.site-header.is-scrolled {
  background: rgba(14,19,17,.72);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  padding-top: 12px; padding-bottom: 12px;
}
.site-header.is-hidden:not(:focus-within) { transform: translateY(-100%); }

.brand { display: flex; align-items: center; gap: 14px; color: var(--ivory); }
.brand-mark {
  width: 50px; height: 50px; flex: none;
  border-radius: 50%;
  background: conic-gradient(var(--logo-yellow) 0 25%, var(--logo-red) 0 50%, var(--logo-blue) 0 75%, var(--logo-green) 0);
  position: relative;
  overflow: hidden;
}
.brand-mark::after {
  content: ""; position: absolute; inset: 30%;
  border-radius: 50%; background: var(--ink);
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 1; opacity: 0; }
.brand-mark.has-logo { background: none; }
.brand-mark.has-logo::after { display: none; }
.brand-mark.has-logo img { opacity: 1; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-th { font-family: var(--serif); font-size: 1.2rem; }
.brand-en { font-family: var(--latin); font-style: italic; font-size: 1rem; color: var(--stone); }

.nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 34px); font-size: 1.02rem; }
.nav a { position: relative; color: rgba(244,239,230,.82); transition: color .3s; }
.nav a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease);
}
.nav a:hover { color: var(--ivory); }
.nav a i { font-style: normal; font-size: .8em; opacity: .7; }
.nav a:not(.nav-cta):hover::after { transform: scaleX(1); transform-origin: left; }
.nav-cta {
  padding: 10px 24px;
  border: 1px solid rgba(201,169,107,.6);
  border-radius: 99px;
  color: var(--gold-soft) !important;
  transition: background-color .3s, color .3s !important;
}
.nav-cta:hover { background: var(--gold); color: var(--ink) !important; }

.menu-toggle { display: none; width: 44px; height: 44px; position: relative; z-index: 2; }
.menu-toggle span {
  position: absolute; left: 10px; right: 10px; height: 1px; background: var(--ivory);
  transition: transform .4s var(--ease), top .4s var(--ease);
}
.menu-toggle span:first-child { top: 18px; }
.menu-toggle span:last-child { top: 26px; }
.menu-open .menu-toggle span:first-child { top: 22px; transform: rotate(45deg); }
.menu-open .menu-toggle span:last-child { top: 22px; transform: rotate(-45deg); }

@media (max-width: 960px) {
  .menu-toggle { display: block; }
  .nav {
    position: fixed; inset: 0;
    flex-direction: column; justify-content: center; gap: 22px;
    background: var(--ink);
    font-family: var(--serif);
    font-size: 1.6rem;
    opacity: 0; visibility: hidden;
    transition: opacity .5s var(--ease), visibility .5s;
  }
  .menu-open .nav { opacity: 1; visibility: visible; }
  /* backdrop-filter ทำให้เมนู (position: fixed) ถูกจำกัดอยู่ในแถบบน จึงปิดไว้ตอนเปิดเมนู */
  .menu-open .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav-cta { font-size: 1.1rem; margin-top: 8px; }
}
@media (max-width: 640px) {
  /* มือถือ: แถบบนเล็กลงหน่อย ไม่บังภาพหน้าแรก */
  .site-header { padding-top: 14px; padding-bottom: 14px; }
  .brand-mark { width: 42px; height: 42px; }
  .brand-th { font-size: 1.05rem; }
  .brand-en { font-size: .9rem; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 30px;
  border-radius: 99px;
  font-weight: 500; font-size: .95rem; letter-spacing: .02em;
  transition: background-color .4s, color .4s, border-color .4s;
  will-change: transform;
}
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-soft); }
.btn-ghost { border: 1px solid rgba(244,239,230,.4); color: var(--ivory); }
.btn-ghost:hover { border-color: var(--ivory); background: rgba(244,239,230,.08); }

/* ---------- Live status ---------- */
.status {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .875rem; letter-spacing: .02em;
  padding: 6px 16px 6px 12px;
  border: 1px solid rgba(244,239,230,.22);
  border-radius: 99px;
  background: rgba(14,19,17,.35);
  backdrop-filter: blur(6px);
}
.status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); position: relative; }
.status.is-open .dot { background: var(--logo-green); }
.status.is-open .dot::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1px solid var(--logo-green);
  animation: ping 1.8s var(--ease) infinite;
}
.status.is-closed .dot { background: var(--logo-red); }
@keyframes ping { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center;
  overflow: hidden;
  isolation: isolate;
}
/* คอลลาจภาพพื้นหลัง: ช่องสูงริมซ้าย-ขวา (t1, t4) และช่องเล็ก 4 ช่องตรงกลาง */
.hero-media {
  position: absolute; inset: -6% 0 0; z-index: -3; background: var(--ink);
  display: grid; gap: 6px;
  grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "t1 t2 t3 t4" "t1 t5 t6 t4";
}
.hero-tile { position: relative; overflow: hidden; }
.hero-tile.has-img { filter: saturate(.85) brightness(.7); }
.t1 { grid-area: t1; } .t2 { grid-area: t2; } .t3 { grid-area: t3; }
.t4 { grid-area: t4; } .t5 { grid-area: t5; } .t6 { grid-area: t6; }
@media (max-width: 640px) {
  /* จอแนวตั้ง: เหลือ 5 ช่อง เรียง 2 คอลัมน์ */
  .hero-media {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: "t1 t2" "t1 t3" "t5 t4";
    gap: 4px;
  }
  .hero-tile.t6 { display: none; }
}
.hero-shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(14,19,17,.35), rgba(14,19,17,.78) 70%),
    linear-gradient(180deg, rgba(14,19,17,.55), transparent 30%, transparent 65%, var(--ink));
}
.hero-inner {
  text-align: center;
  padding: 120px var(--gutter) 140px;
  display: flex; flex-direction: column; align-items: center;
}
.hero-title {
  font-weight: 300;
  font-size: clamp(3.2rem, 11vw, 10rem);
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 28px 0 10px;
}
.hero-title .line {
  display: block;
  overflow: hidden;
  /* เผื่อพื้นที่สระ/วรรณยุกต์ด้านบน-ล่างของอักษรไทย */
  padding: .22em .05em .1em;
  margin: -.22em 0 -.1em;
}
.hero-title .line > span { display: inline-block; will-change: transform; }
.hero-title .line:last-child > span {
  background: linear-gradient(100deg, var(--ivory) 20%, var(--gold-soft) 50%, var(--ivory) 80%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: sheen 7s ease-in-out infinite;
}
@keyframes sheen { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
.hero-en {
  font-family: var(--latin); font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  color: var(--gold-soft);
  letter-spacing: .04em;
}
.hero-lede { margin-top: 22px; max-width: 34em; color: rgba(244,239,230,.78); font-size: 1.05rem; }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 38px; }

.hero-foot {
  position: absolute; left: 0; right: 0; bottom: 28px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 16px;
  padding: 0 var(--gutter);
  font-size: .875rem; letter-spacing: .03em;
  color: rgba(244,239,230,.6);
}
.hero-foot > span { grid-column: 1; justify-self: start; }
.hero-foot .scroll-cue { grid-column: 2; }
.scroll-cue { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.scroll-cue i { width: 1px; height: 46px; background: rgba(244,239,230,.25); position: relative; overflow: hidden; }
.scroll-cue i::after {
  content: ""; position: absolute; left: 0; top: -50%; width: 100%; height: 50%;
  background: var(--gold);
  animation: drip 2.2s var(--ease) infinite;
}
@keyframes drip { to { top: 110%; } }
@media (max-width: 640px) {
  /* จอแคบ: ซ่อนข้อความมุมซ้าย เหลือแค่ตัวบอกให้เลื่อนลง */
  .hero-foot > span { display: none; }
}

/* ---------- Marquee ---------- */
.marquee {
  overflow: hidden;
  border-top: 1px solid rgba(244,239,230,.08);
  border-bottom: 1px solid rgba(244,239,230,.08);
  padding: 14px 0;
  background: var(--ink);
}
.marquee-track {
  display: flex; align-items: center; gap: 30px;
  width: max-content;
  animation: marquee 60s linear infinite;
  font-family: var(--serif);
  font-size: clamp(.95rem, 1.3vw, 1.15rem);
  color: rgba(244,239,230,.7);
  white-space: nowrap;
}
.marquee-track b { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.marquee-track b:nth-of-type(4n+1) { background: var(--logo-green); }
.marquee-track b:nth-of-type(4n+2) { background: var(--logo-yellow); }
.marquee-track b:nth-of-type(4n+3) { background: var(--logo-red); }
.marquee-track b:nth-of-type(4n+4) { background: var(--logo-blue); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Intro ---------- */
.intro { padding: var(--section-y) 0; }
/* หัวข้อซ้าย คำอธิบายขวา (แบบเดียวกับส่วน "ยะลาเมื่อวันวาน") */
.intro-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: end; gap: clamp(20px, 5vw, 80px);
}
.intro-head .h2 { margin-bottom: 0; }
.intro-text { display: grid; gap: 12px; max-width: 34em; }
.intro-text p { color: var(--muted-dark); }
.intro-text p:first-child { color: var(--ink); font-size: 1.08rem; }
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(32px, 4vw, 52px);
  border-top: 1px solid rgba(14,19,17,.14);
}
.stat {
  padding: 24px 24px 6px 0;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 10px;
  border-right: 1px solid rgba(14,19,17,.1);
  padding-left: 24px;
}
.stat:first-child { padding-left: 0; }
.stat:last-child { border-right: 0; }
.stat-num {
  font-family: var(--latin);
  font-size: clamp(2.4rem, 4.2vw, 3.8rem);
  line-height: 1;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.stat-unit { font-size: .95rem; color: var(--muted-dark); }
.stat-label { grid-column: 1 / -1; margin-top: 8px; font-size: .95rem; color: var(--muted-dark); }
@media (max-width: 820px) {
  .intro-head { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: 20px 16px 14px; border-bottom: 1px solid rgba(14,19,17,.1); }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(2n+1) { padding-left: 0; }
}

/* ---------- City plan ---------- */
.plan { position: relative; overflow: hidden; }
.plan-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(30px, 5vw, 80px);
  padding: var(--section-y) var(--gutter);
  max-width: 1440px; margin: 0 auto;
}
.plan .h2 { margin-bottom: .5em; }
.plan-steps { list-style: none; padding: 0; margin: 0 0 0 -14px; display: grid; gap: 4px; }
.plan-step {
  width: 100%; text-align: left;
  display: grid; grid-template-columns: 44px 1fr; gap: 12px;
  padding: 12px 14px; border-radius: 14px;
  transition: opacity .4s, background-color .4s;
}
/* มีหัวข้อที่เลือกอยู่: หัวข้ออื่นจางลง */
.plan-steps:has(.is-active) .plan-step:not(.is-active) { opacity: .4; }
.plan-step.is-active { background: rgba(244,239,230,.06); }
.plan-step:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
.plan-step-no { font-family: var(--latin); font-size: 1.1rem; color: var(--gold); padding-top: 2px; }
.plan-step-body { display: flex; flex-direction: column; }
.plan-step-title { font-family: var(--serif); font-size: 1.2rem; line-height: 1.35; margin-bottom: 4px; }
.plan-step-text { font-size: .95rem; color: rgba(244,239,230,.7); }
.plan-hint { margin-top: 14px; font-size: .875rem; color: var(--muted); }
.plan-quote { margin-top: 26px; font-family: var(--serif); font-size: 1.2rem; color: var(--gold-soft); }
.plan-figure { position: relative; aspect-ratio: 1; width: 100%; max-height: min(80vh, 720px); justify-self: center; }
.plan-figure svg { width: 100%; height: 100%; overflow: visible; }
@media (max-width: 900px) {
  .plan-inner { grid-template-columns: 1fr; }
  .plan-figure { order: -1; max-width: 520px; }
}

/* SVG web layers */
.web-ring { fill: none; stroke: var(--gold); stroke-width: 1.4; transition: stroke-width .5s; }
.web-ring.r2 { stroke-opacity: .75; }
.web-ring.r3 { stroke-opacity: .55; }
.web-road { stroke: var(--stone); stroke-opacity: .45; stroke-width: 1; transition: stroke-opacity .5s; }
.web-grid { stroke: var(--stone); stroke-opacity: .14; stroke-width: 1; transition: stroke-opacity .5s; }
.web-green { fill: var(--logo-green); fill-opacity: .22; transition: fill-opacity .5s; }
.web-center { fill: var(--gold-soft); }
.web-pulse { fill: none; stroke: var(--gold-soft); stroke-width: 1; }
.web-label {
  font-family: var(--sans); font-size: 26px; fill: var(--ivory);
  letter-spacing: .06em; text-anchor: middle;
}
.web-label.small { font-size: 20px; fill: var(--stone); }
@media (max-width: 600px) {
  /* ผังย่อเหลือราว 1/3 บนมือถือ จึงขยายป้ายให้ยังอ่านออก */
  .web-label { font-size: 38px; }
  .web-label.small { font-size: 30px; }
}

/* เลือกหัวข้อ: ชั้นอื่นในผังจางลง ชั้นที่เลือกเด่นขึ้น */
.plan-figure [data-layer] { transition: opacity .5s var(--ease); }
.plan-figure:not([data-active=""]) [data-layer] { opacity: .12; }
.plan-figure[data-active="center"] [data-layer="center"],
.plan-figure[data-active="rings"] [data-layer="rings"],
.plan-figure[data-active="roads"] [data-layer="roads"],
.plan-figure[data-active="green"] [data-layer="green"] { opacity: 1; }
.plan-figure[data-active="rings"] .web-ring { stroke-width: 3; }
.plan-figure[data-active="roads"] .web-road { stroke-opacity: .95; }
.plan-figure[data-active="roads"] .web-grid { stroke-opacity: .4; }
.plan-figure[data-active="green"] .web-green { fill-opacity: .55; }

/* ---------- Exhibitions ---------- */
/* clip (ไม่ใช่ hidden) เพื่อไม่ให้เบราว์เซอร์เลื่อนกล่องนี้เองตอนกด Tab ไปยังการ์ดที่อยู่นอกจอ */
.exhibitions { overflow: hidden; overflow: clip; }
/* จอกว้าง: หัวข้อด้านบน การ์ด 4 ใบเรียงเต็มแถว */
.ex-track {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
  width: min(1440px, 100%); margin: 0 auto;
  padding: var(--section-y) var(--gutter);
}
.ex-intro {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end; column-gap: clamp(20px, 5vw, 80px);
  margin-bottom: clamp(4px, 1vw, 16px);
}
.ex-intro > * { grid-column: 1; }
.ex-intro .h2 { margin-bottom: 0; }
.ex-intro-text { grid-column: 2; grid-row: 1 / span 2; color: var(--muted-dark); max-width: 30em; }
.ex-hint { display: none; align-items: center; gap: 14px; font-size: .9rem; letter-spacing: .02em; color: var(--gold-ink); }
.ex-hint i { width: 60px; height: 1px; background: currentColor; position: relative; }
.ex-hint i::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid; border-right: 1px solid; transform: rotate(45deg); }

.ex-card {
  --accent: var(--logo-green);
  display: flex; flex-direction: column;
  background: #fffdf8;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(14,19,17,.06), 0 30px 60px -30px rgba(14,19,17,.25);
  transform-style: preserve-3d;
  will-change: transform;
}
.ex-card[data-accent="yellow"] { --accent: var(--logo-yellow); }
.ex-card[data-accent="blue"] { --accent: var(--logo-blue); }
.ex-card[data-accent="red"] { --accent: var(--logo-red); }
.ex-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.ex-media.has-img { transition: transform 1.2s var(--ease); }
.ex-card:hover .ex-media.has-img { transform: scale(1.04); }
.ex-body { position: relative; padding: 24px 26px 26px; flex: 1; display: flex; flex-direction: column; }
.ex-body::before { content: ""; position: absolute; left: 26px; top: 0; width: 48px; height: 3px; background: var(--accent); }
.ex-no {
  position: absolute; right: 20px; top: -0.62em;
  font-family: var(--latin);
  font-size: clamp(3.2rem, 4.4vw, 4.6rem);
  line-height: 1;
  color: #fffdf8;
  -webkit-text-stroke: 1px rgba(14,19,17,.25);
  z-index: 2;
}
.ex-room { font-size: .875rem; letter-spacing: .02em; color: var(--muted-dark); margin-bottom: 6px; }
.ex-card h3 { font-size: clamp(1.2rem, 1.6vw, 1.5rem); margin-bottom: 10px; }
.ex-card p { color: var(--muted-dark); }
.ex-more {
  margin-top: auto; padding-top: 22px;
  align-self: flex-start;
  display: inline-flex; gap: 10px; align-items: center;
  font-weight: 500; font-size: .92rem;
}
.ex-more i { font-style: normal; transition: transform .4s var(--ease); }
.ex-more:hover i { transform: translateX(6px); }

@media (max-width: 900px) {
  /* จอแคบ: การ์ดเรียงเป็นแถวปัดซ้าย-ขวา เห็นขอบการ์ดถัดไปเป็นสัญญาณว่ามีต่อ */
  .ex-track {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(80vw, 420px);
    gap: 14px 14px;
    width: auto;
    padding: var(--section-y) var(--gutter);
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .ex-track::-webkit-scrollbar { display: none; }
  .ex-intro { display: flex; flex-direction: column; align-items: flex-start; grid-row: 1; grid-column: 1; width: calc(100vw - 2 * var(--gutter)); position: sticky; left: 0; margin-bottom: 10px; }
  .ex-intro .h2 { font-size: clamp(2.4rem, 4.6vw, 4.4rem); margin-bottom: .5em; }
  .ex-card { grid-row: 2; scroll-snap-align: start; }
  .ex-body { padding: 24px 24px 26px; }
  .ex-body::before { left: 24px; }
  .ex-no { right: 18px; font-size: 3.6rem; }
  .ex-card h3 { font-size: 1.4rem; }
  .ex-hint { display: flex; margin-top: 16px; }
  .ex-hint i { width: 36px; }
}

/* ---------- Highlights (ห้องที่ 1) ---------- */
.highlights { padding: var(--section-y) 0; }
.feature {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center; gap: clamp(28px, 5vw, 80px);
  margin-top: clamp(28px, 4vw, 48px);
}
.feature + .feature { margin-top: clamp(48px, 7vw, 88px); }
.feature-flip .feature-media { order: 2; }
.feature-media { position: relative; padding-bottom: 12%; }
.feature-main {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius);
  background: var(--ink-3);
}
.feature-inset {
  position: absolute; right: -4%; bottom: 0;
  width: 42%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 14px;
  border: 6px solid var(--ink);
  background: var(--ink-3);
  box-shadow: 0 24px 50px -20px rgba(0,0,0,.6);
}
.feature-flip .feature-inset { right: auto; left: -4%; }
.feature-tag {
  display: inline-block; margin-bottom: 18px;
  padding: 5px 14px; border-radius: 99px;
  border: 1px solid rgba(201,169,107,.45);
  color: var(--gold-soft); font-size: .875rem;
}
.feature h3 { font-size: clamp(1.8rem, 3.4vw, 2.9rem); line-height: 1.3; margin-bottom: 18px; }
.feature p { color: rgba(244,239,230,.72); max-width: 30em; }
@media (max-width: 820px) {
  .feature { grid-template-columns: 1fr; }
  .feature-flip .feature-media { order: 0; }
  .feature-inset { right: 4%; width: 46%; border-width: 4px; }
  .feature-flip .feature-inset { left: 4%; }
}

/* ---------- Rotating exhibition: ยะลาเมื่อวันวาน ---------- */
.then { padding: var(--section-y) 0; }
.then .kicker::before { background: var(--logo-red); }
.then-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end; gap: clamp(20px, 5vw, 80px);
  margin-bottom: clamp(24px, 3.5vw, 40px);
}
.then-head .h2 { margin-bottom: 0; }
.then-lede { color: var(--muted-dark); font-size: 1.05rem; max-width: 30em; }
.then-lede b { color: var(--ink); font-weight: 500; }
.then-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, clamp(150px, 15vw, 220px)) clamp(180px, 19vw, 270px);
  grid-template-areas: "a a b" "a a c" "d e e";
}
.then-grid figure { position: relative; margin: 0; overflow: hidden; border-radius: 14px; background: var(--ivory-2); }
.then-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.then-grid figure:hover img { transform: scale(1.04); }
.then-grid figcaption {
  position: absolute; left: 12px; bottom: 12px;
  padding: 4px 12px; border-radius: 99px;
  background: rgba(14,19,17,.72); color: var(--ivory);
  font-size: .875rem; backdrop-filter: blur(6px);
}
.t-a { grid-area: a; } .t-b { grid-area: b; } .t-c { grid-area: c; } .t-d { grid-area: d; } .t-e { grid-area: e; }
.then-story {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(24px, 5vw, 80px);
  margin-top: clamp(32px, 4.5vw, 56px);
  padding-top: clamp(24px, 3vw, 40px);
  border-top: 1px solid rgba(14,19,17,.14);
}
.then-story h3 { font-size: clamp(1.6rem, 2.8vw, 2.4rem); line-height: 1.35; }
.then-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 34px; }
.then-facts li { color: var(--muted-dark); padding-left: 18px; border-left: 3px solid var(--logo-red); }
.then-facts b { display: block; color: var(--ink); font-weight: 500; margin-bottom: 4px; }
.then-story .fine { grid-column: 2; margin-top: 0; color: var(--muted-dark); }
@media (max-width: 820px) {
  .then-head, .then-story { grid-template-columns: 1fr; }
  .then-facts { grid-template-columns: 1fr; }
  .then-story .fine { grid-column: 1; }
  .then-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 200px 130px 130px;
    grid-template-areas: "a a" "b c" "e e";
    gap: 10px;
  }
  .t-d { display: none; } /* จอแคบ: ตัดภาพที่คล้ายกับภาพอื่นออก 1 ภาพ */
  .then-facts { gap: 18px; }
}

/* ---------- Vision ---------- */
.vision { padding: clamp(48px, 6vw, 84px) 0; text-align: center; position: relative; overflow: hidden; }
.vision::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 640px; height: 640px; margin: -320px 0 0 -320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,169,107,.10), transparent 60%);
  pointer-events: none;
}
.vision .kicker { justify-content: center; }
.vision-quote {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  line-height: 1.45;
  margin: 16px auto 14px;
  max-width: 20em;
  text-wrap: balance;
}
.vision-sub { color: rgba(244,239,230,.65); max-width: 30em; margin: 0 auto; }

.nw { white-space: nowrap; }

/* split words (data-fill) */
.w { opacity: .16; transition: none; }
.no-motion .w { opacity: 1; }

/* ---------- Timeline ---------- */
.story { padding: var(--section-y) 0; }
/* จอกว้าง: 3 คอลัมน์แบบงูเลื้อย (1 2 3 / 5 4) แต่ละ li วาดเส้นต่อไปยังจุดถัดไปเองด้วย ::after */
.timeline {
  --tl-gap-x: clamp(24px, 3vw, 48px);
  --tl-gap-y: clamp(40px, 5vw, 64px);
  --tl-dot: 13px;
  --tl-line: rgba(122,95,44,.4);
  --tl-turn: 28px; /* ระยะที่ส่วนโค้งยื่นออกไปทางขวา */
  list-style: none; margin: 32px 0 0; padding: 0 var(--tl-turn) 0 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tl-gap-y) var(--tl-gap-x);
}
.timeline li { --dot: var(--gold-ink); position: relative; padding-top: 28px; }
.timeline li:nth-child(1) { --dot: var(--logo-green); }
.timeline li:nth-child(2) { --dot: var(--logo-yellow); }
.timeline li:nth-child(3) { --dot: var(--logo-red); }
.timeline li:nth-child(4) { --dot: var(--logo-blue); grid-row: 2; grid-column: 3; }
.timeline li:nth-child(5) { grid-row: 2; grid-column: 2; }
.timeline li::before {
  content: ""; position: absolute; left: 0; top: 0; z-index: 1;
  width: var(--tl-dot); height: var(--tl-dot); border-radius: 50%;
  background: var(--dot);
  box-shadow: 0 0 0 4px var(--ivory);
}
.timeline li::after {
  content: ""; position: absolute;
  top: calc(var(--tl-dot) / 2 - 1px); left: calc(var(--tl-dot) / 2);
  width: calc(100% + var(--tl-gap-x));
  border-top: 2px solid var(--tl-line);
}
/* โค้งกลับลงแถวล่าง (+2px ให้ขอบล่างตรงกับเส้นของแถวล่างพอดี) */
.timeline li:nth-child(3)::after {
  width: auto; right: calc(-1 * var(--tl-turn));
  height: calc(100% + var(--tl-gap-y) + 2px);
  border: 2px solid var(--tl-line); border-left: 0;
  border-radius: 0 32px 32px 0;
}
/* แถวล่างเดินจากขวาไปซ้าย */
.timeline li:nth-child(4)::after { left: calc(var(--tl-dot) / 2 - 100% - var(--tl-gap-x)); }
.timeline li:last-child::after { display: none; }
.tl-year { font-family: var(--latin); font-size: clamp(1.4rem, 2.4vw, 2rem); color: var(--gold-ink); }
.timeline h3 { font-size: clamp(1.3rem, 2.2vw, 1.8rem); margin: 4px 0 6px; }
.timeline p { color: var(--muted-dark); }
@media (max-width: 820px) {
  /* จอแคบ: กลับเป็นเส้นแนวตั้งเรียงลงมา */
  .timeline { grid-template-columns: 1fr; gap: 28px; padding: 0; }
  .timeline li:nth-child(n) { grid-row: auto; grid-column: auto; padding: 0 0 0 34px; }
  .timeline li::before { top: .8rem; }
  .timeline li:nth-child(n)::after {
    top: calc(.8rem + var(--tl-dot) / 2); left: calc(var(--tl-dot) / 2 - 1px); right: auto;
    width: 0; height: calc(100% + 28px);
    border: 0; border-left: 2px solid var(--tl-line); border-radius: 0;
  }
  .timeline li:last-child::after { display: none; }
}

/* ---------- Visit ---------- */
.visit { padding: var(--section-y) 0; }
.visit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.vcard {
  background: var(--ink-2);
  border: 1px solid rgba(244,239,230,.07);
  border-radius: var(--radius);
  padding: clamp(26px, 3vw, 40px);
}
.vcard h3 { font-size: 1.35rem; margin-bottom: 18px; }
.vcard h3 small { font-size: .875rem; color: var(--muted); font-family: var(--sans); }
.status-lg { margin-bottom: 20px; }
.hours, .prices { margin: 0; display: grid; gap: 0; }
.hours div, .prices div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(244,239,230,.08);
}
.hours dt, .prices dt { color: rgba(244,239,230,.7); }
.hours dd, .prices dd { margin: 0; font-weight: 500; text-align: right; }
.prices dd { font-family: var(--latin); font-size: 1.5rem; line-height: 1.2; }
.prices dd small { font-family: var(--sans); font-size: .85rem; color: var(--muted); }
.hours .closed dd { color: #f08a76; }
.fine { margin-top: 16px; font-size: .875rem; color: var(--muted); }
address { font-style: normal; color: rgba(244,239,230,.8); line-height: 1.9; }
.link-arrow {
  display: inline-flex; gap: 8px; margin-top: 18px;
  color: var(--gold-soft); border-bottom: 1px solid rgba(228,207,159,.4); padding-bottom: 2px;
}
.link-arrow i { font-style: normal; }
.contact { list-style: none; margin: 0; padding: 0; }
.contact li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(244,239,230,.08); }
.contact span { color: var(--muted); font-size: .9rem; }
/* padding + margin ติดลบ: พื้นที่กดสูง ≥ 44px โดยระยะห่างของแถวเท่าเดิม */
.contact a { display: inline-block; padding: 8px 0; margin: -8px 0; transition: color .3s; overflow-wrap: anywhere; min-width: 0; text-align: right; }
.contact a:hover { color: var(--gold-soft); }

.actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.action {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  min-height: 170px;
  padding: 26px 28px;
  border-radius: var(--radius);
  border: 1px solid rgba(201,169,107,.3);
  overflow: hidden;
  isolation: isolate;
  transition: border-color .4s, color .4s;
}
.action::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--gold);
  transform: translateY(101%);
  transition: transform .6s var(--ease);
}
.action:hover { color: var(--ink); border-color: var(--gold); }
.action:hover::before { transform: translateY(0); }
.action-no { font-family: var(--latin); font-size: 1rem; color: var(--gold); transition: color .4s; }
.action:hover .action-no, .action:hover .action-desc { color: var(--ink); }
.action-title { margin-top: auto; font-family: var(--serif); font-size: 1.35rem; }
.action-desc { font-size: .9rem; color: var(--muted); transition: color .4s; }
.action i { position: absolute; right: 26px; top: 22px; font-style: normal; font-size: 1.2rem; transition: transform .5s var(--ease); }
.action:hover i { transform: translate(4px, -4px); }
@media (max-width: 820px) {
  .visit-grid, .actions { grid-template-columns: 1fr; gap: 12px; }
  .actions { margin-top: 12px; }
  .vcard { padding: 22px; }
  .vcard h3 { margin-bottom: 10px; }
  .hours div, .prices div, .contact li { padding: 9px 0; }
  .action { min-height: 0; padding: 22px 24px; }
  .action-title { margin-top: 18px; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); border-top: 1px solid rgba(244,239,230,.07); padding: 56px 0 32px; text-align: center; }
.footer-brand { display: flex; flex-direction: column; align-items: center; }
.brand-mark-lg { width: 72px; height: 72px; margin-bottom: 18px; }
.footer-th { font-family: var(--serif); font-size: 1.5rem; }
.footer-en { font-family: var(--latin); font-style: italic; color: var(--stone); font-size: 1.1rem; }
.colorline { display: flex; width: 120px; height: 3px; margin: 34px auto; border-radius: 3px; overflow: hidden; }
.colorline span { flex: 1; }
.colorline span:nth-child(1) { background: var(--logo-green); }
.colorline span:nth-child(2) { background: var(--logo-yellow); }
.colorline span:nth-child(3) { background: var(--logo-red); }
.colorline span:nth-child(4) { background: var(--logo-blue); }
.footer-copy { font-size: .875rem; color: var(--muted); }

/* ---------- Modal ---------- */
.modal {
  width: min(760px, calc(100% - 32px));
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px); /* มือถือ: ไม่นับแถบที่อยู่ของเบราว์เซอร์ */
  padding: 0; border: 0;
  border-radius: var(--radius);
  background: #fffdf8; color: var(--ink);
  overflow: auto;
  box-shadow: 0 40px 120px rgba(0,0,0,.5);
}
.modal::backdrop { background: rgba(8,11,10,.72); backdrop-filter: blur(6px); }
.modal[open] { animation: modalIn .6s var(--ease); }
@keyframes modalIn { from { opacity: 0; transform: translateY(30px) scale(.98); } }
.modal-media { position: relative; aspect-ratio: 16 / 8; }
.modal-body { padding: 34px clamp(22px, 4vw, 44px) 44px; }
.modal-body h3 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin: 10px 0 14px; }
.modal-body p { color: var(--muted-dark); }
.modal-body blockquote { margin: 26px 0 0; font-family: var(--serif); font-size: 1.3rem; color: var(--gold-ink); }
/* sticky: ปุ่มปิดลอยอยู่มุมขวาบนเสมอแม้เลื่อนหน้าต่างลง (margin ล่างติดลบให้รูปด้านล่างเลื่อนขึ้นมาใต้ปุ่ม) */
.modal-close {
  position: sticky; top: 14px; z-index: 5;
  display: block; margin: 14px 14px -58px auto;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(14,19,17,.6); color: var(--ivory);
  font-size: 1.5rem; line-height: 1;
  backdrop-filter: blur(6px);
}
.modal-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.modal-gallery figure { margin: 0; }
.modal-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: var(--ivory-2); }
.modal-gallery figcaption { margin-top: 6px; font-size: .875rem; color: var(--muted-dark); }
.chips { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 6px 14px; border-radius: 99px; background: var(--ivory-2); font-size: .9rem; }

/* ตัวเลขทั้งหมดใช้ฟอนต์ที่เป็นเลขแบบตรง */
.stat-num, .plan-step-no, .ex-no, .tl-year, .prices dd, .action-no { font-family: var(--num); font-weight: 300; }
.ex-no { font-weight: 400; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .marquee-track { animation: none; }
}