/* ═══════════════════════════════════════════════════════════════════════
   TCLF เชียงใหม่ v15 — "เรือนแก้ว"
   ฟ้าเข้มธงจังหวัด · ทองคำเปลว · ทองกวาว · ยางนา

   พื้นหน้าเว็บคือผืนธงประจำจังหวัดเชียงใหม่ สีฟ้าเข้ม โทนเดียวกับน้ำเงินในโลโก้
   ทองคือทองในตราสัญลักษณ์และซุ้มเรือนแก้ว
   ส้มคือดอกทองกวาว ดอกไม้ประจำจังหวัด เป็นสีของทุกการกระทำบนหน้านี้
   เขียวคือต้นยางนา ต้นไม้ประจำจังหวัด ใช้จุดเดียวคือเครื่องหมายถูก
   ส่วนที่ต้องอ่านยาวยกขึ้นเป็นแผ่นกระดาษสา วางทับบนผืนฟ้า
   ═══════════════════════════════════════════════════════════════════════ */

/* ── ฟอนต์ โฮสต์เอง แยก subset ไทย/ละติน ─────────────────────────────── */
@font-face{font-family:Trirong;font-style:normal;font-weight:400;font-display:swap;src:url('fonts/Trirong-400-thai.woff2') format('woff2');unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:Trirong;font-style:normal;font-weight:400;font-display:swap;src:url('fonts/Trirong-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Trirong;font-style:normal;font-weight:500;font-display:swap;src:url('fonts/Trirong-500-thai.woff2') format('woff2');unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:Trirong;font-style:normal;font-weight:500;font-display:swap;src:url('fonts/Trirong-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Trirong;font-style:normal;font-weight:600;font-display:swap;src:url('fonts/Trirong-600-thai.woff2') format('woff2');unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:Trirong;font-style:normal;font-weight:600;font-display:swap;src:url('fonts/Trirong-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Anuphan;font-style:normal;font-weight:400;font-display:swap;src:url('fonts/Anuphan-400-thai.woff2') format('woff2');unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:Anuphan;font-style:normal;font-weight:400;font-display:swap;src:url('fonts/Anuphan-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Anuphan;font-style:normal;font-weight:500;font-display:swap;src:url('fonts/Anuphan-500-thai.woff2') format('woff2');unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:Anuphan;font-style:normal;font-weight:500;font-display:swap;src:url('fonts/Anuphan-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Anuphan;font-style:normal;font-weight:600;font-display:swap;src:url('fonts/Anuphan-600-thai.woff2') format('woff2');unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:Anuphan;font-style:normal;font-weight:600;font-display:swap;src:url('fonts/Anuphan-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ── Token ───────────────────────────────────────────────────────────── */
:root{
  /* ฟ้าเข้มธงจังหวัดเชียงใหม่ โทนเดียวกับน้ำเงินในโลโก้ #343a95 (hue 270) */
  --ink-900:oklch(.185 .062 270); --ink-850:oklch(.215 .072 270);
  --ink-800:oklch(.255 .082 270); --ink-700:oklch(.320 .088 270);
  --ink-600:oklch(.400 .092 270);
  /* ฟ้าธงอิ่มสี สำหรับแถบที่ต้องการให้สีเป็นเสียงหลัก */
  --flag-700:oklch(.330 .130 270); --flag-600:oklch(.375 .145 270); --flag-500:oklch(.455 .150 268);
  /* ทองกวาว ดอกไม้ประจำจังหวัด = สีของการกระทำ ปุ่ม ลิงก์ จุดเน้น
     thong-800 เป็นเฉดเข้มสุด มีไว้ใช้บนพื้นทองโดยเฉพาะ (5.06 : 1) */
  --thong-800:oklch(.420 .150 40); --thong-700:oklch(.470 .150 42);
  --thong-600:oklch(.545 .175 44); --thong-500:oklch(.640 .180 48);
  /* ทองคำเปลว จากตราสัญลักษณ์และซุ้มเรือนแก้ว */
  --gold-500:oklch(.815 .155 89); --gold-400:oklch(.855 .115 89); --gold-300:oklch(.905 .078 89);
  /* ยางนา ต้นไม้ประจำจังหวัด ใช้จุดเดียวคือเครื่องหมายถูก */
  --yang-500:oklch(.700 .120 158);
  /* กระดาษสา — วัสดุแผ่นเท่านั้น ห้ามเป็นพื้น body */
  --paper:oklch(.968 .013 88); --bone:oklch(.930 .016 86); --paper-line:oklch(.868 .024 84);
  /* ตัวอักษร */
  --on-dark:oklch(.955 .012 265); --on-dark-mut:oklch(.790 .030 266); --on-dark-dim:oklch(.700 .032 266);
  --on-paper:oklch(.245 .045 265); --on-paper-mut:oklch(.455 .038 266);

  --serif:Trirong,'Times New Roman',serif;
  --sans:Anuphan,'Leelawadee UI','Tahoma',system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);

  --gutter:clamp(20px,5vw,64px);
  --wrap:min(1240px,100% - var(--gutter) * 2);
  --wide:min(1560px,100% - var(--gutter) * 2);

  --z-base:1; --z-sticky:20; --z-drawer-back:30; --z-drawer:31;
  --z-bar:40; --z-modal:50; --z-skip:60;
}

/* ── รากฐาน ──────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink-900);color:var(--on-dark);
  font:400 clamp(1rem,.95rem + .3vw,1.125rem)/1.9 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
button,a{-webkit-tap-highlight-color:transparent}
h1,h2,h3,h4,p,figure,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
strong,b{font-weight:600}
:focus-visible{outline:3px solid var(--gold-500);outline-offset:4px;border-radius:2px}
::selection{background:var(--thong-600);color:#fff}

/* ภาษาไทยมีสระบนและวรรณยุกต์ซ้อนสองชั้น line-height จึงต้องสูงกว่าอังกฤษ
   และห้าม letter-spacing ติดลบเกิน -.01em มิฉะนั้นวรรณยุกต์จะชนกัน */
h1,h2,h3{font-family:var(--serif);text-wrap:balance;letter-spacing:-.004em;font-weight:600}
h1{font-size:clamp(2.35rem,5.2vw,4.4rem);line-height:1.46}
h2{font-size:clamp(1.875rem,3.2vw,2.875rem);line-height:1.42}
h3{font-size:clamp(1.1875rem,1.1rem + .45vw,1.4375rem);line-height:1.55;font-weight:500}
/* ป้าย 中文 บนปุ่มสลับภาษา โหลดเฉพาะสองตัวอักษรนี้ ทุกหน้าจึงแสดงผลได้โดยไม่ต้องมีฟอนต์จีนทั้งชุด */
@font-face{font-family:'CJK Label';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/NotoSansSC-500-langlabel.woff2') format('woff2');unicode-range:U+4E2D,U+6587}
@font-face{font-family:'CJK Label';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/NotoSansSC-600-langlabel.woff2') format('woff2');unicode-range:U+4E2D,U+6587}
.langs,.drawer-langs{font-family:var(--sans),'CJK Label'}
.langs a[lang=zh-Hans],.drawer-langs a[lang=zh-Hans]{font-family:'CJK Label',var(--sans)}

/* คำภาษาอังกฤษยาวกว่าคำไทยและจีนมาก หัวข้อใหญ่สุดจึงต้องลดลงหนึ่งขั้น
   ไม่งั้น h1 กินไป 5 บรรทัดจนปุ่มโทรตกไปอยู่ใต้ขอบจอ */
html[lang=en] h1{font-size:clamp(2.2rem,4.3vw,3.5rem)}
html[lang=en] .hero-lede{max-width:42ch}
p{text-wrap:pretty;max-width:68ch}

.wrap{width:var(--wrap);margin-inline:auto}
.wrap-wide{width:var(--wide);margin-inline:auto}
.band{padding-block:clamp(64px,8vw,120px)}
.band-tight{padding-block:clamp(48px,5.5vw,80px)}
.lede{font-size:clamp(1.0625rem,1rem + .4vw,1.3125rem);line-height:1.85}
.small{font-size:.875rem;line-height:1.65}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{position:fixed;z-index:var(--z-skip);top:-120px;left:16px;background:var(--gold-500);color:var(--ink-900);
  padding:14px 22px;font-weight:600;border-radius:3px;transition:top .2s var(--ease)}
.skip:focus{top:14px}

/* ── ปุ่ม สี่เหลี่ยมมุมมน ไม่ใช่แคปซูล ───────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:14px 26px;border-radius:4px;
  font-family:var(--sans);font-size:1rem;font-weight:600;line-height:1.4;
  border:1px solid transparent;white-space:nowrap;text-align:center;
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease);
}
.btn img,.btn svg{width:19px;height:19px;flex:none}
/* ไอคอนต้นฉบับเป็นสีเข้ม ปุ่มพื้นเข้มจึงต้องกลับเป็นสีอ่อน */
.btn-solid img,.btn-ghost img,.call-line img{filter:brightness(0) invert(1)}
.btn-solid{background:var(--thong-600);color:#fff;box-shadow:0 1px 0 oklch(1 0 0/.18) inset}
.btn-solid:hover{background:var(--thong-700)}
.btn-gold{background:var(--gold-500);color:var(--ink-900)}
.btn-gold:hover{background:var(--gold-400)}
.btn-ghost{border-color:oklch(.815 .155 89/.42);color:var(--gold-400)}
.btn-ghost:hover{border-color:var(--gold-500);background:oklch(.815 .155 89/.10)}
.btn-onpaper{border-color:var(--paper-line);color:var(--on-paper);background:#fff}
.btn-onpaper:hover{border-color:var(--thong-600);color:var(--thong-700)}
.btn-line{background:#06c755;color:#04321a}
.btn-line:hover{background:#0adc63}
@media(hover:hover) and (pointer:fine){
  .btn{transition:transform .22s var(--ease),background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease)}
  .btn:hover{transform:translateY(-2px)}
  .btn-solid:hover{box-shadow:0 10px 26px -10px oklch(.545 .175 44/.85)}
  .btn-gold:hover{box-shadow:0 10px 26px -12px oklch(.815 .155 89/.7)}
}

/* เส้นทองบาง ใช้แทนป้ายกำกับเหนือหัวข้อ */
.rule{height:1px;border:0;background:linear-gradient(90deg,var(--gold-500),oklch(.815 .155 89/0));margin:0 0 clamp(20px,2.4vw,30px)}
.rule-paper{background:linear-gradient(90deg,var(--thong-600),oklch(.545 .175 44/0))}
.rule-center{background:linear-gradient(90deg,oklch(.815 .155 89/0),var(--gold-500),oklch(.815 .155 89/0));margin-inline:auto;width:min(280px,60%)}

/* ── หัวเว็บ ─────────────────────────────────────────────────────────── */
.head{position:sticky;top:0;z-index:var(--z-sticky);background:oklch(.185 .062 270/.90);
  border-bottom:1px solid var(--ink-700);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3)}
.head-in{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px);min-height:84px}
.mark{display:flex;align-items:center;gap:13px;flex:none}
.mark img{width:50px;height:50px;object-fit:contain}
.mark-txt{display:grid;gap:1px}
.mark-name{font-family:var(--serif);font-size:1rem;font-weight:600;line-height:1.4}
.mark-sub{font-size:.8125rem;color:var(--on-dark-mut);line-height:1.4}
.nav{display:flex;align-items:center;gap:clamp(14px,1.9vw,28px);margin-left:auto;font-size:.9375rem;font-weight:500}
.nav a{position:relative;padding-block:10px;color:var(--on-dark-mut);transition:color .2s var(--ease)}
.nav a:hover{color:var(--gold-400)}
.nav a::after{content:'';position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--gold-500);
  transform:scaleX(0);transform-origin:left;transition:transform .38s var(--ease)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
.head-cta{display:flex;align-items:center;gap:14px}
.head-cta .btn{min-height:46px;padding:11px 20px;font-size:.9375rem}
/* สลับภาษาเป็นลิงก์จริง ไม่ใช่ปุ่ม JS เพื่อให้แต่ละภาษามี URL ของตัวเอง */
.langs{display:flex;align-items:center;font-size:.8125rem;font-weight:500;white-space:nowrap}
.langs a{display:inline-flex;align-items:center;min-height:44px;padding:8px 10px;border-radius:3px;
  color:var(--on-dark-dim);transition:color .2s var(--ease),background .2s var(--ease)}
.langs a:hover{color:var(--gold-400);background:oklch(.815 .155 89/.08)}
.langs a[aria-current=page]{color:var(--gold-500);font-weight:600}
.langs a + a{position:relative;margin-left:1px}
.langs a + a::before{content:'';position:absolute;left:-1px;top:50%;translate:0 -50%;
  width:1px;height:14px;background:var(--ink-600)}
.burger{display:none;width:48px;height:48px;border:1px solid var(--ink-600);border-radius:4px;
  align-items:center;justify-content:center;flex:none}
.burger span,.burger span::before,.burger span::after{display:block;width:19px;height:1.5px;background:var(--gold-400);
  position:relative;transition:transform .28s var(--ease),background .28s var(--ease)}
.burger span::before,.burger span::after{content:'';position:absolute;left:0}
.burger span::before{top:-6px} .burger span::after{top:6px}
.burger[aria-expanded=true] span{background:transparent}
.burger[aria-expanded=true] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded=true] span::after{top:0;transform:rotate(-45deg)}
.drawer,.scrim{display:none}

/* ── HERO — พื้นรัก + ลายประจำยามทองบน canvas ────────────────────────── */
.hero{position:relative;isolation:isolate;overflow:clip;
  padding-block:clamp(52px,7vw,104px) clamp(56px,6vw,88px);
  background:
    radial-gradient(64% 58% at 92% 2%, oklch(.455 .150 268/.55) 0%, oklch(.455 .150 268/0) 66%),
    radial-gradient(46% 44% at 78% 88%, oklch(.545 .175 44/.26) 0%, oklch(.545 .175 44/0) 70%),
    radial-gradient(70% 60% at 2% 92%, oklch(.255 .082 270/.9) 0%, oklch(.185 .062 270/0) 68%),
    var(--ink-900);
}
/* ลายคำอยู่ด้านขวาและด้านบน จางหายก่อนถึงคอลัมน์ตัวอักษร */
.hero-lai{position:absolute;inset:-6% -4% auto;height:118%;width:108%;z-index:-1;pointer-events:none;
  opacity:.5;
  mask-image:radial-gradient(78% 86% at 82% 22%,#000 0%,rgba(0,0,0,.55) 42%,transparent 78%);
  -webkit-mask-image:radial-gradient(78% 86% at 82% 22%,#000 0%,rgba(0,0,0,.55) 42%,transparent 78%)}
@media(max-width:1040px){.hero-lai{opacity:.3;
  mask-image:radial-gradient(86% 62% at 76% 8%,#000 0%,transparent 72%);
  -webkit-mask-image:radial-gradient(86% 62% at 76% 8%,#000 0%,transparent 72%)}}
.hero-lai canvas{width:100%;height:100%;display:block}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(36px,4.6vw,76px);align-items:center}
.hero-copy{min-width:0}
.hero-tag{display:inline-flex;align-items:center;gap:11px;font-size:.875rem;font-weight:500;
  color:var(--gold-400);letter-spacing:.02em;margin-bottom:22px}
.hero-tag::before{content:'';width:7px;height:7px;background:var(--thong-500);transform:rotate(45deg);flex:none}
.hero h1{margin-bottom:26px}
/* กล่องหน้ากากต้องสูงกว่าตัวอักษร ไม่งั้นวรรณยุกต์และสระบนจะถูกตัด */
.hero h1 .ln{display:block;overflow:hidden;padding-block:.02em}
.hero h1 .ln > span{display:block}
.hero h1 .accent{color:var(--gold-400)}
.hero-lede{color:var(--on-dark-mut);max-width:34ch}
.hero-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-note{font-size:.9375rem;color:var(--on-dark-dim);margin-top:20px;max-width:46ch;line-height:1.75}

.hero-panel{min-width:0;position:relative}
.hero-view{position:relative;border-radius:5px;overflow:hidden;border:1px solid var(--ink-700);
  isolation:isolate;box-shadow:0 40px 90px -50px #000, 0 0 0 1px oklch(.815 .155 89/.10)}
/* ดูโอโทนจริง: ภาพถูกลดเหลือค่าความสว่าง แล้วชั้น mix-blend-mode:color จ่ายเนื้อสีให้
   ไล่จากฟ้าธงลงไปหาทองกวาว ได้ภาพเมืองตอนเย็นที่เป็นสีของจังหวัด
   ไม่ใช่ภาพเทาที่ไหนก็ได้ และไม่ใช่การไล่ sepia กับ hue-rotate ซึ่งคุมยาก */
.hero-view img{width:100%;aspect-ratio:2.5;object-fit:cover;
  filter:grayscale(.94) contrast(1.24) brightness(.76)}
.hero-view::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  mix-blend-mode:color;
  background:linear-gradient(158deg,var(--flag-500) 0%,var(--flag-600) 46%,var(--thong-600) 100%)}
.hero-view::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(80% 128% at 8% 122%, oklch(.545 .175 44/.30), oklch(.545 .175 44/0) 64%),
    linear-gradient(172deg, oklch(.375 .145 270/.14), oklch(.185 .062 270/.62))}
.hero-place{position:absolute;left:16px;bottom:14px;z-index:3;display:flex;align-items:center;gap:9px;
  font-size:.8125rem;font-weight:600;color:var(--gold-300);letter-spacing:.02em;
  text-shadow:0 1px 10px oklch(.185 .062 270/.95),0 1px 2px oklch(.185 .062 270/.9)}
.hero-place i{width:6px;height:6px;border-radius:50%;background:var(--gold-500);flex:none;
  box-shadow:0 0 0 0 oklch(.815 .155 89/.65);animation:beat 2.6s var(--ease) infinite}
@keyframes beat{0%{box-shadow:0 0 0 0 oklch(.815 .155 89/.6)}70%,100%{box-shadow:0 0 0 11px oklch(.815 .155 89/0)}}

.hero-team{margin-top:20px;border:1px solid var(--ink-700);border-radius:5px;background:oklch(.255 .082 270/.55);padding:18px 18px 20px}
.hero-team-cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin-bottom:16px}
.hero-team-cap strong{font-family:var(--serif);font-size:1.0625rem;font-weight:600}
.hero-team-cap span{font-size:.875rem;color:var(--on-dark-mut)}
.hero-faces{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.face{min-width:0;text-align:center}
.face-img{aspect-ratio:1/1.16;border-radius:3px;overflow:hidden;background:var(--ink-800);
  border:1px solid var(--ink-700);position:relative}
.face-img img{width:100%;height:100%;object-fit:cover;object-position:center 10%;filter:grayscale(.34) contrast(1.05)}
.face b{display:block;font-size:.8125rem;font-weight:500;margin-top:8px;color:var(--on-dark-mut);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}

/* ── แถบคำมั่น (แทนแถบตัวเลขใหญ่แบบ SaaS) ────────────────────────────── */
/* แถบทองพาดขวางหน้า สะท้อนทองในตราสัญลักษณ์โดยตรง ตัวอักษรเป็นฟ้าเข้ม 9.96 : 1 */
.pledge{background:var(--gold-500);color:var(--ink-900);
  border-block:1px solid oklch(.700 .140 89)}
.pledge-in{padding-block:clamp(26px,3vw,40px);display:flex;flex-wrap:wrap;align-items:center;
  justify-content:center;gap:14px clamp(20px,3vw,44px);text-align:center}
.pledge-item{font-family:var(--serif);font-size:clamp(1.0625rem,.95rem + .55vw,1.5rem);font-weight:500;line-height:1.5}
.pledge-item em{font-style:normal;color:var(--thong-800)}
.pledge-dot{width:9px;height:9px;background:var(--flag-600);transform:rotate(45deg);flex:none;opacity:.7}

/* ── แผ่นกระดาษสา ────────────────────────────────────────────────────── */
.sheet{background:var(--paper);color:var(--on-paper);position:relative}
.sheet h1,.sheet h2,.sheet h3{color:var(--on-paper)}
.sheet p{color:var(--on-paper-mut)}
.sheet::before{content:'';position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,var(--thong-600) 0 22%,var(--gold-500) 22% 78%,var(--thong-600) 78%)}
.sheet-hd{max-width:44ch;margin-bottom:clamp(32px,4vw,52px)}
.sheet-hd p{margin-top:16px}

/* เรื่องราว — แถวมีเส้นคั่น ไม่ใช่การ์ด */
.tale{display:grid;gap:0;border-top:1px solid var(--paper-line)}
.tale li{display:grid;grid-template-columns:clamp(64px,7vw,88px) minmax(0,1fr);gap:clamp(20px,2.6vw,36px);
  align-items:start;padding-block:clamp(26px,3vw,38px);border-bottom:1px solid var(--paper-line)}
.tale-ico{width:100%;aspect-ratio:1;object-fit:contain}
.tale h3{margin-bottom:8px}
.tale p{font-size:1rem;max-width:62ch}
@media(min-width:900px){
  .tale{grid-template-columns:repeat(3,minmax(0,1fr));border-top:0;column-gap:clamp(28px,3vw,48px)}
  .tale li{grid-template-columns:1fr;border-bottom:0;border-top:2px solid var(--thong-600);padding-block:26px 0;gap:18px}
  .tale-ico{width:clamp(64px,6vw,84px)}
}

/* ── แถบชาด (จุดพีคทางอารมณ์) ────────────────────────────────────────── */
/* แถบฟ้าธงอิ่มสี จุดพีคทางอารมณ์ของหน้า */
.creed{background:linear-gradient(158deg,var(--flag-600),var(--flag-700) 62%,oklch(.300 .118 272));
  color:#fff;text-align:center;position:relative;overflow:hidden}
.creed::before,.creed::after{content:'';position:absolute;width:min(46vw,520px);aspect-ratio:1;border-radius:50%;
  border:1px solid oklch(.905 .078 89/.16);top:50%;translate:0 -50%;pointer-events:none}
.creed::before{left:min(-22vw,-240px)} .creed::after{right:min(-22vw,-240px)}
.creed-in{position:relative;z-index:1;max-width:60ch;margin-inline:auto}
.creed h2{color:var(--gold-300);margin-bottom:20px}
.creed p{color:oklch(.970 .012 265/.94);margin-inline:auto;font-size:clamp(1.0625rem,1rem + .45vw,1.3125rem);line-height:1.85}
.creed p + p{margin-top:14px}

/* ── บริการ — แถวนิยาม ไม่ใช่การ์ดหกใบ ───────────────────────────────── */
.svc{display:grid;gap:0;border-top:1px solid var(--paper-line)}
.svc li{display:grid;grid-template-columns:clamp(52px,5.4vw,64px) minmax(0,1fr);
  gap:clamp(16px,2vw,26px);align-items:start;padding-block:clamp(24px,2.6vw,32px);border-bottom:1px solid var(--paper-line)}
.svc img{width:100%;aspect-ratio:1;object-fit:contain}
.svc h3{margin-bottom:6px}
.svc p{font-size:1rem;max-width:56ch}
@media(min-width:820px){.svc{grid-template-columns:1fr 1fr;column-gap:clamp(32px,4vw,72px)}
  .svc li:nth-last-child(-n+2){border-bottom:0}}
.after-act{margin-top:clamp(30px,3.4vw,44px)}
.after-act.center{display:flex;justify-content:center}

/* ── แถบภาพเชียงใหม่ เต็มขอบ ─────────────────────────────────────────── */
.place{position:relative;isolation:isolate;overflow:clip;min-height:min(78vh,620px);display:grid;align-items:center}
.place-bg::after{content:'';position:absolute;inset:0;mix-blend-mode:color;pointer-events:none;
  background:linear-gradient(150deg,var(--flag-500) 0%,var(--flag-600) 52%,var(--thong-600) 100%)}
.place-bg{position:absolute;inset:0;z-index:-2;isolation:isolate}
.place-bg img{width:100%;height:100%;object-fit:cover;object-position:center 38%;
  filter:grayscale(.9) contrast(1.18) brightness(.5)}
.place::before{content:'';position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(58% 90% at 96% 100%, oklch(.545 .175 44/.28), oklch(.545 .175 44/0) 68%),
    linear-gradient(96deg,oklch(.185 .062 270/.96) 0%,oklch(.185 .062 270/.82) 44%,oklch(.215 .072 270/.36) 100%)}
.place-in{padding-block:clamp(64px,7vw,96px);max-width:56ch}
.place h2{color:var(--on-dark);margin-bottom:18px}
.place > .wrap > .place-in > p{color:var(--on-dark-mut)}
.needs{display:grid;gap:13px;margin-top:30px}
.needs li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:13px;align-items:start;
  font-size:1rem;line-height:1.75;color:var(--on-dark)}
/* เครื่องหมายถูกเป็นสีต้นยางนา ต้นไม้ประจำจังหวัด ใช้ที่เดียวในหน้านี้ */
.needs svg{width:22px;height:22px;color:var(--yang-500);margin-top:4px}
.place-act{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px}

/* ── ทีมทนาย ภาพใหญ่ ไม่ใช่การ์ดรูปจิ๋ว ──────────────────────────────── */
.team-hd{display:grid;gap:16px;max-width:52ch;margin-bottom:clamp(34px,4vw,54px)}
.team-hd p{color:var(--on-dark-mut)}
.crew{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(18px,2.4vw,32px)}
.crew figure{margin:0;min-width:0}
/* ภาพสตูดิโอพื้นขาวจะเจาะรูสว่างบนพื้นรัก จึงคุมด้วยดูโอโทนรักทองก่อน
   แล้วคืนสีจริงเมื่อชี้เมาส์ ฉากหลังกลายเป็นสีของหน้าเว็บ ไม่ใช่สี่เหลี่ยมขาว */
.crew-img{aspect-ratio:4/5;overflow:hidden;border-radius:4px;background:var(--ink-800);
  border:1px solid var(--ink-700);position:relative;isolation:isolate}
.crew-img img{width:100%;height:100%;object-fit:cover;object-position:center top;
  filter:grayscale(.22) contrast(1.05) saturate(.92) brightness(.94);
  transition:filter .55s var(--ease),transform .6s var(--ease)}
/* multiply กดเฉพาะบริเวณสว่าง ฉากขาวจึงกลายเป็นสีของหน้าเว็บ ส่วนใบหน้าแทบไม่เปลี่ยน */
.crew-img::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  mix-blend-mode:multiply;transition:opacity .55s var(--ease);
  background:linear-gradient(178deg,oklch(.640 .180 48/.24) 0%,oklch(.455 .150 268/.40) 54%,oklch(.255 .082 270/.55) 100%)}
.crew-img::after{content:'';position:absolute;inset:auto 0 0;height:46%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,oklch(.185 .062 270/0),oklch(.185 .062 270/.66))}
.crew figure:hover .crew-img img,.crew figure:focus-within .crew-img img{
  filter:grayscale(.08) contrast(1.02) brightness(1);transform:scale(1.03)}
.crew figure:hover .crew-img::before,.crew figure:focus-within .crew-img::before{opacity:.18}
.crew figcaption{padding-top:16px;border-top:1px solid var(--ink-700);margin-top:14px}
.crew h3{font-size:1.1875rem;margin-bottom:2px}
.crew-role{display:block;font-size:.875rem;color:var(--thong-500);font-weight:500;margin-bottom:8px}
.crew figcaption p{font-size:.9375rem;color:var(--on-dark-mut);line-height:1.7}

/* ── ผลงานและความไว้วางใจ ────────────────────────────────────────────── */
.proof{background:var(--ink-850);border-block:1px solid var(--ink-700);overflow:clip}
.proof h2,.proof h3{color:var(--on-dark)}
.proof-hd{text-align:center;max-width:56ch;margin:0 auto clamp(34px,4vw,50px)}
.proof-hd p{color:var(--on-dark-mut);margin:16px auto 0}
.sub-hd{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;
  margin:clamp(38px,4.4vw,60px) 0 20px}
.sub-hd h3{font-size:clamp(1.1875rem,1.1rem + .35vw,1.375rem)}
.sub-hd p{font-size:.9375rem;color:var(--on-dark-mut);margin-top:4px}
.sub-hd > a{font-size:.9375rem;color:var(--gold-500);text-decoration:underline;text-underline-offset:5px;white-space:nowrap}

.rail{overflow:hidden;position:relative;padding-block:4px 8px;
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.rail-track{display:flex;width:max-content;animation:slide 46s linear infinite;animation-play-state:paused}
.js .rail-track{animation-play-state:running}
.rail.is-off .rail-track,.rail:hover .rail-track{animation-play-state:paused}
@media(hover:hover) and (pointer:fine){.rail:hover .rail-track{animation-play-state:running}}
.rail:focus-within .rail-track{animation-play-state:paused}
.rail-run{display:flex;gap:14px;padding-right:14px}
.chip{width:168px;height:96px;flex:none;display:grid;place-items:center;padding:18px;border-radius:4px;
  background:oklch(.955 .012 265/.94);border:1px solid var(--ink-700)}
.chip img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.chip.on-dark{background:oklch(.255 .082 270/.94)}
@keyframes slide{to{transform:translateX(-50%)}}

.gal{position:relative}
.gal-strip{display:flex;gap:18px;overflow-x:hidden;touch-action:pan-y pinch-zoom;scrollbar-width:none}
.gal-strip::-webkit-scrollbar{display:none}
.work{flex:0 0 calc((100% - 54px)/4);min-width:0;border:1px solid var(--ink-700);border-radius:4px;
  overflow:hidden;background:var(--ink-800);touch-action:pan-y pinch-zoom;
  transition:border-color .3s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
.work img{width:100%;aspect-ratio:1;object-fit:cover}
.work-tag{display:flex;align-items:center;justify-content:center;gap:9px;min-height:54px;padding:11px 14px;
  border-top:1px solid var(--ink-700);font-size:.9375rem;font-weight:500;color:var(--on-dark);text-align:center}
.work:hover,.work:focus-visible{border-color:var(--gold-500);transform:translateY(-4px);
  box-shadow:0 22px 46px -28px #000}
.arrow{position:absolute;top:calc(50% - 30px);translate:0 -50%;z-index:3;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;background:oklch(.185 .062 270/.94);border:1px solid var(--ink-600);
  color:var(--gold-400);font-size:1.125rem;transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease)}
.arrow:hover:not(:disabled){border-color:var(--gold-500);background:var(--ink-800)}
.arrow:disabled{opacity:.28;cursor:default}
.gal .arrow.prev{left:8px} .gal .arrow.next{right:8px}
/* max-width:68ch จากกฎ p ทั่วไปทำให้กล่องไม่เต็มแถว ตัวเลขจึงไม่อยู่กึ่งกลางจริง */
.count{text-align:center;font-size:.875rem;color:var(--on-dark-mut);margin-top:14px;
  max-width:none;font-variant-numeric:tabular-nums}

.notes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.note{display:block;border:1px solid var(--ink-700);border-radius:4px;overflow:hidden;background:var(--ink-800);
  min-width:0;transition:border-color .25s var(--ease),transform .3s var(--ease)}
.note img{width:100%;aspect-ratio:1;object-fit:cover;object-position:top center}
.note:hover{border-color:var(--gold-500);transform:translateY(-3px)}

/* ภาพรีวิว: เดสก์ท็อปเห็นครบสี่ใบ ไม่ต้องมีลูกศร มือถือจึงเลื่อนทีละใบ */
#notes-wrap .arrow,#note-count{display:none}
::view-transition-old(lb-morph),::view-transition-new(lb-morph){
  animation-duration:.42s;animation-timing-function:cubic-bezier(.16,1,.3,1);
  mix-blend-mode:normal;object-fit:cover}

/* Lightbox */
.lb{border:1px solid var(--ink-600);border-radius:6px;padding:0;background:var(--ink-850);color:var(--on-dark);
  width:min(860px,100% - 24px);max-height:calc(100dvh - 24px);overflow:auto;box-shadow:0 40px 120px #000d}
.lb::backdrop{background:oklch(.185 .062 270/.88);backdrop-filter:blur(7px)}
.lb-bar{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--ink-700);
  position:sticky;top:0;background:var(--ink-850);z-index:1}
.lb-bar .n{margin-right:auto;font-size:.9375rem;font-variant-numeric:tabular-nums;color:var(--on-dark-mut)}
.lb-bar button{min-width:46px;min-height:46px;border:1px solid var(--ink-600);border-radius:4px;
  display:inline-grid;place-items:center;font-size:1rem;color:var(--gold-400)}
.lb-bar button:hover{border-color:var(--gold-500)}
.lb-body{display:grid;grid-template-columns:46px minmax(0,1fr) 46px;align-items:center;gap:12px;padding:20px}
.lb-body button{min-width:46px;min-height:46px;border:1px solid var(--ink-600);border-radius:50%;
  display:grid;place-items:center;color:var(--gold-400)}
.lb-body button:hover{border-color:var(--gold-500)}
.lb-img{max-height:calc(100dvh - 190px);overflow:auto;overscroll-behavior:contain;text-align:center}
.lb-img img{max-width:100%;max-height:calc(100dvh - 190px);width:auto;height:auto;margin-inline:auto;border-radius:3px}

/* ── บทความ ──────────────────────────────────────────────────────────── */
.reads{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(22px,2.6vw,34px)}
.read{min-width:0}
.read-img{display:block;border-radius:4px;overflow:hidden;border:1px solid var(--paper-line);background:var(--bone)}
.read-img img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s var(--ease)}
.read-img:hover img,.read-img:focus-visible img{transform:scale(1.04)}
.read h3{margin:18px 0 8px;font-size:1.125rem;line-height:1.55}
.read p{font-size:.9375rem;line-height:1.75}

/* ── ติดต่อ ──────────────────────────────────────────────────────────── */
.talk{background:linear-gradient(164deg,var(--flag-600) 0%,var(--flag-700) 34%,var(--ink-900) 100%);color:#fff}
.talk-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(38px,5vw,72px);align-items:center}
.talk h2{color:var(--gold-300);margin-bottom:18px}
.talk > .wrap > .talk-grid > div > p{color:oklch(.970 .012 265/.9)}
.ways{display:grid;gap:12px;margin-top:30px}
.way{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid oklch(.905 .078 89/.3);
  border-radius:4px;background:oklch(1 0 0/.05);min-width:0;transition:background .22s var(--ease),border-color .22s var(--ease)}
.way:hover{background:oklch(1 0 0/.11);border-color:var(--gold-400)}
.way-ico{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--gold-300)}
.way-ico img{width:19px;height:19px}
.way-txt{display:grid;gap:2px;min-width:0}
.way-txt span{font-size:.8125rem;color:oklch(.970 .012 265/.82)}
.way-txt strong{font-size:1.0625rem;font-weight:600;overflow-wrap:anywhere;line-height:1.5}
.way[href^=mailto] strong{font-size:.9375rem}
.codes{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.code{background:var(--paper);border-radius:5px;padding:20px 16px 22px;text-align:center;color:var(--on-paper);min-width:0;
  box-shadow:0 30px 70px -40px #000}
.code-box{background:#fff;border-radius:3px;padding:8px;max-width:220px;margin-inline:auto}
.code-svg{display:block;width:100%;height:auto;aspect-ratio:1;overflow:hidden}
.code > strong{display:block;font-family:var(--serif);font-size:1.0625rem;margin-top:16px}
.code > span{display:block;font-size:.875rem;color:var(--on-paper-mut);margin-top:4px;overflow-wrap:anywhere}
.code > a{display:inline-flex;align-items:center;min-height:44px;font-size:.9375rem;color:var(--thong-700);
  font-weight:600;text-decoration:underline;text-underline-offset:4px;margin-top:6px}

/* ── ท้ายเว็บ ────────────────────────────────────────────────────────── */
.foot{background:var(--ink-900);border-top:1px solid var(--ink-700);padding:clamp(42px,4.6vw,60px) 0 30px}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:26px}
.foot-mark{display:flex;align-items:center;gap:15px}
.foot-mark img{width:52px;height:52px;object-fit:contain}
.foot-mark strong{display:block;font-family:var(--serif);font-size:1rem;font-weight:600}
.foot-mark span{display:block;font-size:.875rem;color:var(--on-dark-mut);margin-top:4px}
.foot-meta{font-size:.875rem;line-height:1.8;color:var(--on-dark-mut);text-align:right}
.foot-meta a{color:var(--gold-500);text-decoration:underline;text-underline-offset:3px}
.socials{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.socials a{min-height:46px;padding:11px 20px;border:1px solid var(--ink-600);border-radius:4px;font-size:.9375rem;
  font-weight:500;display:inline-flex;align-items:center;transition:border-color .2s var(--ease),color .2s var(--ease)}
.socials a:hover{border-color:var(--gold-500);color:var(--gold-400)}
.credit{font-size:.8125rem;line-height:1.85;color:var(--on-dark-dim);border-top:1px solid var(--ink-700);
  padding-top:24px;margin-top:30px;max-width:none}
.credit a{color:var(--on-dark-mut);text-decoration:underline;text-underline-offset:2px}
.callbar{display:none}

/* ── Reveal ────────────────────────────────────────────────────────────
   ค่าเริ่มต้นของทุกบล็อกคือ "มองเห็น" JS จะติดคลาส .armed ให้เฉพาะบล็อกที่
   อยู่ต่ำกว่าขอบจอตอนโหลดเท่านั้น และมีตัวจับเวลากันเหนียวคอยเปิดให้เสมอ
   เนื้อหาจึงไม่มีทางหายไปแม้ observer ไม่ทำงาน (โปรแกรมแคปหน้าจอ พรินต์ ฯลฯ) */
.motion .rv.armed{opacity:0;transform:translate3d(0,20px,0);
  transition:opacity .62s var(--ease) var(--d,0ms),transform .62s var(--ease) var(--d,0ms)}
.motion .rv.armed.on{opacity:1;transform:none}
.motion .hero h1 .ln > span{transform:translateY(105%);transition:transform .95s var(--ease) var(--d,0ms)}
.motion .hero h1.on .ln > span{transform:none}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media(max-width:1200px){
  .langs a{padding-inline:7px}
  .hero-grid{gap:34px}
  .work{flex-basis:calc((100% - 36px)/3)}
}
@media(max-width:1040px){
  .nav,.langs{display:none}
  .head-cta{margin-left:auto}
  .burger{display:flex}
  .head-in{min-height:76px}
  .drawer{display:block;position:fixed;z-index:var(--z-drawer);top:76px;right:0;bottom:0;width:min(400px,100%);
    padding:26px 24px 40px;background:var(--ink-850);border-left:1px solid var(--ink-700);overflow:auto;
    visibility:hidden;transform:translateX(100%);transition:transform .45s var(--ease),visibility .45s}
  .drawer.open{visibility:visible;transform:none}
  .scrim{display:block;position:fixed;inset:76px 0 0;z-index:var(--z-drawer-back);background:oklch(.185 .062 270/.7);
    opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s}
  .scrim.open{opacity:1;visibility:visible}
  .drawer-nav{display:grid}
  .drawer-nav a{padding:15px 2px;border-bottom:1px solid var(--ink-700);font-size:1.0625rem;font-weight:500}
  .drawer-acts{display:grid;gap:12px;margin-top:28px}
  .drawer-langs{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;padding-top:22px;
    border-top:1px solid var(--ink-700)}
  .drawer-langs a{display:inline-flex;align-items:center;min-height:46px;padding:10px 18px;
    border:1px solid var(--ink-600);border-radius:4px;font-size:.9375rem;font-weight:500;color:var(--on-dark-mut)}
  .drawer-langs a:hover{border-color:var(--gold-500);color:var(--gold-400)}
  .drawer-langs a[aria-current=page]{border-color:var(--gold-500);color:var(--gold-400);
    background:oklch(.815 .155 89/.10)}
  .hero-grid{grid-template-columns:1fr;gap:38px}
  .hero-lede{max-width:56ch}
  .hero-view img{aspect-ratio:2.9}
  .talk-grid{grid-template-columns:1fr;gap:40px}
  .codes{width:min(560px,100%)}
  .notes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .place{min-height:0}
}
@media(max-width:820px){
  .work{flex-basis:calc((100% - 18px)/2)}
  .foot-top{flex-direction:column;align-items:flex-start}
  .foot-meta{text-align:left}
}
@media(max-width:620px){
  html{scroll-padding-top:80px}
  .head-in{min-height:68px;gap:10px}
  .mark img{width:44px;height:44px}
  .mark-name{font-size:.875rem} .mark-sub{font-size:.8125rem}
  .head-cta .btn{font-size:.875rem;min-height:44px;padding:10px 14px}
  .burger{width:44px;height:44px}
  .drawer{top:68px} .scrim{top:68px}
  .hero{padding-block:38px 46px}
  .hero-faces{gap:8px}
  .face b{font-size:.8125rem}
  .hero-team{padding:16px}
  .pledge-dot{display:none}
  .pledge-in{flex-direction:column;gap:10px}
  .crew{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .crew h3{font-size:1.0625rem}
  .crew figcaption p{font-size:.875rem}
  .gal-strip{gap:0}
  .work{flex-basis:100%;min-width:100%}
  .gal{width:min(320px,100%);margin-inline:auto}
  .gal .arrow.prev{left:-4px} .gal .arrow.next{right:-4px}
  .notes{grid-template-columns:1fr;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;display:flex;
    scrollbar-width:none;border-radius:4px;width:min(320px,100%);margin-inline:auto}
  .notes::-webkit-scrollbar{display:none}
  .note{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;border-radius:4px}
  #notes-wrap .arrow{display:grid}
  #note-count{display:block}
  .codes{grid-template-columns:1fr;width:min(300px,100%);margin-inline:auto}
  .reads{grid-template-columns:1fr}
  .lb-body{grid-template-columns:38px minmax(0,1fr) 38px;padding:14px 8px;gap:6px}
  .lb-body button{min-width:38px;border-radius:4px}
  .callbar{position:fixed;bottom:0;left:0;right:0;z-index:var(--z-bar);display:grid;grid-template-columns:1fr 1fr;
    gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:oklch(.185 .062 270/.96);
    border-top:1px solid var(--ink-700);backdrop-filter:blur(14px)}
  .callbar a{min-height:50px;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:4px;
    font-size:1rem;font-weight:600}
  .callbar img{width:19px;height:19px}
  .call-line{background:#06c755;color:#04321a}
  .call-tel{background:var(--gold-500);color:var(--ink-900)}
  .foot{padding-bottom:100px}
}
@media(max-width:380px){
  .head-cta{display:none}
  .burger{margin-left:auto}
  .hero-acts{flex-direction:column;align-items:stretch}
  .crew{grid-template-columns:1fr}
}

/* ── ลดการเคลื่อนไหว: ได้หน้าที่นิ่งแต่ครบ ───────────────────────────── */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rail{mask-image:none;-webkit-mask-image:none}
  .rail-track{transform:none!important;width:100%;display:block}
  .rail-run{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:0}
  .rail-run[aria-hidden]{display:none}
  .chip{width:auto}
  .motion .rv,.motion .rv.armed,.motion .hero h1 .ln > span{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce) and (max-width:620px){
  .rail-run{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── พิมพ์ ───────────────────────────────────────────────────────────── */
@media print{
  .head,.callbar,.drawer,.scrim,.arrow,.hero-lai,.skip{display:none!important}
  body{background:#fff;color:#111;font-size:11pt}
  .hero,.proof,.place,.talk,.foot,.creed,.pledge{background:#fff!important;color:#111!important}
  h1,h2,h3,.hero h1 .accent,.creed h2,.talk h2{color:#111!important}
  p,.crew figcaption p,.credit{color:#333!important}
  .hero-grid,.talk-grid{display:block}
  .rail-track{animation:none!important;transform:none!important;width:100%}
  .rail-run{display:grid;grid-template-columns:repeat(4,1fr)}
  .rail-run[aria-hidden]{display:none}
  .gal-strip,.notes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;overflow:visible}
  .work,.note{flex:none;min-width:0}
  .rv{opacity:1!important;transform:none!important}
  a[href^=http]::after{content:' (' attr(href) ')';font-size:8pt;word-break:break-all}
}