/* tastemaker · macro: Poster Fold · nav N3 · hero H3 · feat F5+F7 · proof P3+env · cta C2 · footer Ft6
   arc: Hook → Problem → Solution(anatomy) → Proof → Close · mood: playful/warm (brand-locked)
   palette: brand #E02129 (client logo, not generated) · contrast matrix verified
   critique: ShowTell 4 · Phil 5 · Hier 4 · Spec 5 · Restr 4 · Var 5
   concept: the shop's own red signboard — checkerboard bands are the section divider language */

/* ============================================================
   บริยอร์ชเบอร์เกอร์ — ระบบดีไซน์ "ป้ายหน้าร้าน"
   สีแบรนด์จากโลโก้จริงของร้าน: แดง #E02129 + ขาว + ครีม (ไม่ใช้สีดำตามที่ลูกค้าขอ)
   ============================================================ */
:root{
  /* --- สี: ผ่านการตรวจ contrast ทุกคู่ที่ใช้จริง --- */
  --red:#E02129;        /* แดงแบรนด์ — พื้นและขอบ (บนครีม 4.44 = UI เท่านั้น) */
  --red-deep:#A4141A;   /* แดงสำหรับ "ตัวอักษร" บนครีม/ขาว — 7.28 / 7.80 */
  --red-ink:#7A0F14;    /* แดงเข้มสุด — ฉากหลังทึบและม่านบังแสง */
  --cream:#FFF6E9;
  --cream-2:#F7E8CF;
  --paper:#FFFFFF;
  --ink:#2A1A12;        /* น้ำตาลเข้ม ใช้แทนสีดำ — บนครีม 15.6 */
  --ink-soft:#6B5344;   /* บนครีม 6.66 */
  --gold:#F2B01E;       /* ป้ายเน้น — ต้องใส่ตัวอักษรสี ink เสมอ (8.77) ห้ามขาว */
  --line:#E7D6BB;
  --line-strong:#D9C3A0;

  /* --- ระยะห่าง: สเกลเดียวทั้งเว็บ --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px; --s11:192px;

  --r-sm:10px; --r:16px; --r-lg:22px;
  --shadow:0 1px 2px rgba(122,15,20,.05), 0 10px 28px rgba(122,15,20,.09);
  --shadow-lift:0 3px 6px rgba(122,15,20,.07), 0 18px 44px rgba(122,15,20,.15);
  --wrap:1200px;

  --font:"Anuphan","IBM Plex Sans Thai","Noto Sans Thai",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-num:"Anton","Anuphan",sans-serif;  /* ตัวเลขและคำอังกฤษสั้นเท่านั้น ไทยไม่เคยตกมาใช้ฟอนต์นี้ */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);font-size:17px;line-height:1.75;font-weight:400;
  color:var(--ink);background:var(--cream);overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{line-height:1.25;margin:0 0 .5em;font-weight:600;letter-spacing:-.015em;
  word-break:keep-all;overflow-wrap:break-word}
h1{font-size:clamp(30px,6.6vw,64px);line-height:1.12}
h2{font-size:clamp(25px,3.4vw,38px)}     /* เพดาน ~56% ของ h1 ไม่แย่งซีนพาดหัวหลัก */
h3{font-size:clamp(18px,2.2vw,22px)}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;top:10px;inset-inline-start:10px;width:auto;height:auto;clip:auto;z-index:200;
  background:var(--red);color:#fff;padding:12px 20px;border-radius:999px;font-weight:600;text-decoration:none}

[id]{scroll-margin-top:104px}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.wrap--narrow{max-width:860px}
.section{padding:var(--s9) 0}            /* ส่วนเชื่อม */
.section--pivot{padding:var(--s10) 0}    /* ส่วนสำคัญ ได้พื้นที่หายใจมากกว่า */
.section--tight{padding:var(--s7) 0}
.center{text-align:center}
.muted{color:var(--ink-soft)}
.lead{font-size:clamp(17px,1.9vw,20px);color:var(--ink-soft);max-width:60ch}
.section-num{font-family:var(--font-num);font-size:14px;letter-spacing:.06em;color:var(--red-deep);
  display:block;margin-bottom:var(--s2);line-height:1.4}

/* ---------- ลายตารางหมากรุก: ภาษาของ "เส้นแบ่งส่วน" ทั้งเว็บ ----------
   มาจากขอบโลโก้และกันสาดจริงหน้าร้าน ใช้คั่นเฉพาะจุดเปลี่ยนบท ไม่โรยทั่วเว็บ */
.checker{
  height:18px;width:100%;background-color:var(--red);
  background-image:
    linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%),
    linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%);
  background-size:26px 26px;background-position:0 0,13px 13px;
}

/* ---------- ปุ่ม ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:999px;font-weight:600;font-size:17px;
  text-decoration:none;border:2px solid transparent;cursor:pointer;font-family:inherit;
  transition:transform .2s ease,background-color .2s ease,border-color .2s ease;
  line-height:1.4;min-height:52px;
}
.btn svg{width:20px;height:20px;flex:none}
.btn--primary{background:var(--red);color:#fff;box-shadow:var(--shadow)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn--onred{background:#fff;color:var(--red-deep)}
.btn--onred-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.65)}
.btn--line{background:#06C755;color:#fff}
.btn--sm{padding:10px 18px;font-size:15px;min-height:44px}
@media (hover:hover) and (pointer:fine){
  .btn--primary:hover{background:var(--red-deep);transform:translateY(-3px);box-shadow:var(--shadow-lift)}
  .btn--ghost:hover{border-color:var(--red);color:var(--red-deep);transform:translateY(-3px)}
  .btn--onred:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.28)}
  .btn--onred-ghost:hover{background:rgba(255,255,255,.16);transform:translateY(-3px)}
  .btn--line:hover{background:#05a948;transform:translateY(-3px)}
}

/* ---------- N3 · หัวเว็บแบบแคปซูลลอย ---------- */
.header{position:fixed;top:0;left:0;right:0;z-index:60;padding:12px 0}
.header__bar{
  display:flex;align-items:center;gap:12px;min-height:62px;padding:6px 8px 6px 12px;
  background:rgba(255,246,233,.82);backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid rgba(255,255,255,.5);border-radius:999px;
  box-shadow:0 2px 6px rgba(122,15,20,.06),0 14px 34px rgba(122,15,20,.10);
  transition:background-color .25s ease;
}
.header.is-top .header__bar{background:rgba(52,14,10,.42);border-color:rgba(255,255,255,.22);
  box-shadow:0 10px 30px rgba(40,6,8,.22)}
.header.is-top .brand__name{color:#fff}
.header.is-top .brand__name small{color:rgba(255,255,255,.8)}
.header.is-top .nav a{color:#fff}
.header.is-top .lang{border-color:rgba(255,255,255,.45)}
.header.is-top .lang a{color:rgba(255,255,255,.9)}
.header.is-top .lang a[aria-current]{background:#fff;color:var(--red-deep)}
.header.is-top .burger span{background:#fff}

.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:1 1 auto;min-width:0}
.brand img{width:42px;height:42px;border-radius:11px;flex:none}
.brand__name{font-size:15px;font-weight:600;line-height:1.2;min-width:0;overflow:hidden;
  white-space:nowrap;text-overflow:ellipsis;letter-spacing:-.01em;transition:color .25s ease}
.brand__name small{display:block;font-family:var(--font-num);font-size:11px;font-weight:400;
  color:var(--red-deep);letter-spacing:.09em;line-height:1.5;transition:color .25s ease}
.nav{display:none;gap:2px;margin-inline-start:auto}
.nav a{padding:9px 14px;border-radius:999px;text-decoration:none;font-weight:500;font-size:16px;
  transition:background-color .2s,color .2s;white-space:nowrap}
.nav a[aria-current="page"]{color:var(--red-deep);background:rgba(224,33,41,.09)}
.header.is-top .nav a[aria-current="page"]{background:rgba(255,255,255,.2);color:#fff}
@media (hover:hover){.nav a:hover{background:rgba(224,33,41,.09)}
  .header.is-top .nav a:hover{background:rgba(255,255,255,.16)}}
.header__actions{display:flex;align-items:center;gap:8px;margin-inline-start:auto;flex:none}
.nav + .header__actions{margin-inline-start:8px}
.lang{display:flex;border:1.5px solid var(--line-strong);border-radius:999px;overflow:hidden;
  font-family:var(--font-num);font-size:13px;flex:none;transition:border-color .25s ease}
.lang a{display:flex;align-items:center;justify-content:center;min-height:44px;min-width:40px;
  text-decoration:none;color:var(--ink-soft);transition:background-color .2s,color .2s;line-height:1}
.lang a[aria-current]{background:var(--red);color:#fff}
.header .btn--primary{display:none}
.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;padding:0 11px;border:none;background:transparent;cursor:pointer;border-radius:999px}
.burger span{display:block;height:2.5px;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .2s,background-color .25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.mobilenav{display:none;margin-top:8px;padding:8px 18px 18px;background:var(--paper);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lift)}
.mobilenav.open{display:block}
.mobilenav a{display:block;padding:14px 4px;text-decoration:none;font-weight:500;border-bottom:1px solid var(--line)}
.mobilenav .btn{margin-top:16px;width:100%}

/* ---------- H3 · โปสเตอร์ ----------
   มือถือ: ภาพเต็มจอ ตัวอักษรวางบนม่านไล่เฉดจากด้านล่าง
   จอกว้าง: แบ่งสองแผงแข็ง — แผงแดงซ้ายเป็นป้ายร้าน แผงขวาเป็นภาพที่ยังเห็นเบอร์เกอร์เต็มตัว
   (ภาพลูกค้าเป็นแนวตั้ง 3:4 ถ้าปูเต็มจอกว้างจะครอปจนเหลือแต่ขนมปัง) */
.hero{position:relative;background:var(--red);color:#fff;overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1s ease
}
.hero__media img.on{opacity:1}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,rgba(70,8,12,.95) 0%,rgba(70,8,12,.82) 30%,rgba(70,8,12,.34) 58%,rgba(70,8,12,.20) 100%);
}
.hero__inner{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:76svh;padding:132px 0 var(--s7)}
.hero__eyebrow{font-family:var(--font-num);font-size:13px;letter-spacing:.16em;
  color:var(--gold);margin-bottom:var(--s3);line-height:1.4}
.hero h1{color:#fff;margin-bottom:var(--s4);max-width:22ch;text-wrap:balance;
  word-break:keep-all;overflow-wrap:break-word;
  text-shadow:0 2px 22px rgba(50,4,7,.45)}
.hero__sub{font-size:clamp(16px,1.9vw,19px);color:rgba(255,255,255,.95);margin-bottom:var(--s5);
  max-width:44ch;text-shadow:0 1px 10px rgba(50,4,7,.5)}
.hero__cta{display:flex;flex-wrap:wrap;gap:11px}
.hero__foot{position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);flex-wrap:wrap;margin-top:var(--s5)}
.hero__note{font-size:14.5px;color:rgba(255,255,255,.86);line-height:1.6;margin:0;flex:1 1 240px}
.hero__dots{display:flex;gap:0;flex:none}
.hero__dots button{width:44px;height:44px;padding:0;border:none;background:transparent;
  cursor:pointer;position:relative}
.hero__dots button::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;
  border-radius:50%;background:rgba(255,255,255,.45);transform:translate(-50%,-50%);
  transition:background-color .25s,transform .25s}
.hero__dots button[aria-current="true"]::after{background:var(--gold);transform:translate(-50%,-50%) scale(1.45)}

/* ---------- บทที่ 2 · ปัญหา (ข้อความสั้น + คลิปของจริง) ---------- */
.stakes{background:var(--ink);color:#F6E9DA}
.stakes .wrap{display:grid;gap:var(--s6);padding-block:var(--s9)}
.stakes h2{color:#fff;max-width:18ch}
.stakes p{color:#E4D2C1;max-width:52ch;font-size:clamp(16px,1.8vw,18.5px)}
.stakes__clip{position:relative;border-radius:var(--r);overflow:hidden;background:#1a100a;
  max-width:300px;justify-self:start;box-shadow:var(--shadow-lift)}
.stakes__clip video{width:100%;display:block}
.stakes__cap{font-size:14.5px;color:#C8B2A0;margin-top:var(--s3);line-height:1.6;max-width:34ch}

/* ---------- บทที่ 3 · กายวิภาคของเบอร์เกอร์ (F5 annotated) ---------- */
.anatomy{background:var(--cream)}
.anatomy__grid{display:grid;gap:var(--s7);align-items:center}
.anatomy__fig{position:relative;margin:0;justify-self:center;max-width:400px;width:100%}
.anatomy__fig img{width:100%;border-radius:var(--r-lg)}
.anatomy__pin{display:none}
.anatomy__list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4)}
.anatomy__list li{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:start}
.anatomy__n{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  background:var(--red);flex:none}
.anatomy__n svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.anatomy__list h3{margin-bottom:2px}
.anatomy__list p{margin:0;color:var(--ink-soft);font-size:16px;line-height:1.65}
.anatomy__proof{margin:var(--s6) 0 0;display:flex;gap:var(--s4);align-items:flex-end}
.anatomy__proof video{width:150px;flex:none;border-radius:var(--r-sm);background:var(--ink);display:block}
.anatomy__proof figcaption{font-size:14.5px;color:var(--ink-soft);line-height:1.6;max-width:26ch;margin-bottom:var(--s2)}

/* ---------- บทที่ 4 · ป้ายเมนู (F7 บนกระดานแดงเหมือนตู้ไฟหน้าร้าน) ---------- */
.board{background:var(--red);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lift)}
.board__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:var(--s3);padding:var(--s5) var(--s5) var(--s4)}
.board__head h2{color:#fff;margin:0}
.board__head span{font-family:var(--font-num);font-size:14px;letter-spacing:.08em;color:rgba(255,255,255,.82)}
.board__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;background:var(--paper);
  border-top:2px solid rgba(255,255,255,.3)}
.tile{border-inline-end:2px solid rgba(224,33,41,.22);border-block-end:2px solid rgba(224,33,41,.22)}
.tile{position:relative;display:flex;flex-direction:column;background:var(--paper);
  padding:var(--s3) var(--s3) var(--s4);text-decoration:none;color:inherit;
  transition:background-color .2s ease}
@media (hover:hover) and (pointer:fine){.tile:hover{background:var(--cream)}
  .tile:hover .tile__go{transform:translateX(3px)}}
.tile__pic{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;margin-bottom:var(--s3)}
.tile__pic img{width:100%;height:100%;object-fit:contain}
.tile__name{font-weight:600;font-size:16px;line-height:1.35;margin:0}
.tile__en{font-size:13px;color:var(--ink-soft);line-height:1.45;margin:2px 0 0}
.tile__foot{margin-top:auto;padding-top:var(--s3);display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.price{font-family:var(--font-num);font-size:26px;line-height:1;color:var(--red-deep);white-space:nowrap}
.price sup{font-family:var(--font);font-size:11px;font-weight:500;color:var(--ink-soft);
  vertical-align:super;margin-inline-start:3px}
.tile__go{font-size:20px;color:var(--red-deep);transition:transform .2s ease;line-height:1}
.badge{position:absolute;top:var(--s3);inset-inline-start:var(--s3);z-index:2;background:var(--gold);
  color:var(--ink);font-size:12px;font-weight:600;padding:4px 11px;border-radius:999px;line-height:1.5}
.board__foot{padding:var(--s5);display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;justify-content:space-between}
.board__foot p{color:rgba(255,255,255,.9);margin:0;font-size:15.5px;max-width:40ch}

/* รายการเพิ่มท็อปปิ้ง — บิลกระดาษ */
.addons{background:var(--paper);border-radius:var(--r);padding:var(--s2) var(--s5);
  box-shadow:var(--shadow);max-width:560px}
.addons ul{margin:0;padding:0;list-style:none}
.addons li{display:flex;align-items:baseline;gap:12px;padding:13px 0;border-bottom:1px dashed var(--line)}
.addons li:last-child{border-bottom:none}
.addons .dots{flex:1;border-bottom:1px dotted var(--line-strong);transform:translateY(-4px)}
.addons .nm{font-weight:500}
.addons .nm small{display:block;font-size:13px;font-weight:400;color:var(--ink-soft);line-height:1.4}
.addons .price{font-size:21px}

/* ---------- บทที่ 5 · หลักฐานจริง: ร้านและคน ---------- */
.proof{background:var(--cream-2)}
.env{display:grid;gap:var(--s3);margin-bottom:var(--s7);align-items:start}
.env figure{margin:0}
.env img{width:100%;border-radius:var(--r)}
.env figcaption{font-size:14.5px;color:var(--ink-soft);margin-top:var(--s2);line-height:1.6}
.quote{margin:0;max-width:24ch}
.quote blockquote{margin:0;font-size:clamp(21px,2.7vw,30px);line-height:1.4;font-weight:500;letter-spacing:-.015em}
.quote blockquote::before{content:"\201C";font-family:var(--font-num);color:var(--red);
  font-size:1.4em;line-height:0;vertical-align:-.18em;margin-inline-end:.06em}
.quote figcaption{margin-top:var(--s4);font-size:15px;color:var(--ink-soft)}
.stars{display:flex;gap:3px;margin-bottom:var(--s3)}
.stars svg{width:17px;height:17px;fill:var(--gold);stroke:none}
.quote-side{display:grid;gap:var(--s4)}
.quote-side figure{margin:0;background:var(--paper);border-radius:var(--r);padding:var(--s5);box-shadow:var(--shadow)}
.quote-side blockquote{margin:0;font-size:16px;line-height:1.7}
.quote-side figcaption{margin-top:var(--s3);font-size:14.5px;color:var(--ink-soft)}
.tag-sample{display:inline-block;margin-inline-start:8px;font-size:11.5px;font-weight:600;
  background:#FFE9CB;color:#8A5000;padding:2px 9px;border-radius:999px;vertical-align:middle;line-height:1.7}

/* ---------- C2 · ปิดท้ายด้วยป้ายร้าน ---------- */
.close{background:var(--red);color:#fff;text-align:center}
.close .wrap{padding-block:var(--s10)}
.close h2{color:#fff;font-size:clamp(27px,4vw,44px);max-width:20ch;margin-inline:auto}
.close p{color:rgba(255,255,255,.92);max-width:48ch;margin-inline:auto}
.close__cta{display:flex;flex-wrap:wrap;gap:11px;justify-content:center;margin-top:var(--s5)}
.close__meta{display:grid;gap:var(--s4);margin-top:var(--s8);padding-top:var(--s6);
  border-top:1px solid rgba(255,255,255,.28);text-align:start}
.close__meta h3{color:#fff;font-size:14px;font-family:var(--font-num);letter-spacing:.09em;
  font-weight:400;margin-bottom:var(--s2);color:rgba(255,255,255,.72)}
.close__meta p,.close__meta address{color:#fff;font-style:normal;white-space:pre-line;margin:0;font-size:16.5px}
.close__meta a{color:#fff;text-decoration:underline;text-underline-offset:3px;
  display:inline-flex;align-items:center;min-height:44px}

/* ---------- ข้อมูล / แผนที่ / ฟอร์ม ---------- */
.info-grid{display:grid;gap:var(--s4)}
.info{background:var(--paper);border-radius:var(--r);padding:var(--s5);box-shadow:var(--shadow)}
.info h3{display:flex;align-items:center;gap:9px;font-size:17px;margin-bottom:var(--s2)}
.info h3 svg{width:21px;height:21px;stroke:var(--red-deep);stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.info p,.info address{margin:0;font-style:normal;white-space:pre-line;color:var(--ink-soft);font-size:16px}
.info a{display:inline-flex;align-items:center;min-height:44px;color:var(--red-deep);font-weight:500;text-decoration:none}
.info a:hover{text-decoration:underline}
.map-embed{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);background:var(--cream-2);aspect-ratio:4/3}
.map-embed iframe{width:100%;height:100%;border:0;display:block}

.form{background:var(--paper);border-radius:var(--r);padding:var(--s5);box-shadow:var(--shadow)}
.field{margin-bottom:var(--s4)}
.field label{display:block;font-weight:500;margin-bottom:6px;font-size:15.5px}
.field .req{color:var(--red-deep)}
.field input,.field select,.field textarea{
  width:100%;font-family:inherit;font-size:16px;line-height:1.6;padding:13px 14px;
  border:1.5px solid var(--line-strong);border-radius:var(--r-sm);background:var(--cream);
  color:var(--ink);transition:border-color .2s,background-color .2s}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red);background:#fff;outline:none}
.field .err{display:none;color:var(--red-deep);font-size:14.5px;font-weight:500;margin-top:6px;line-height:1.5}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--red);background:#FFF3F2}
.field.has-error .err{display:block}
.form__note{font-size:14px;color:var(--ink-soft);line-height:1.6;margin-top:var(--s1)}
.form__note a{display:inline-flex;align-items:center;min-height:44px;color:var(--red-deep);font-weight:600}
.form__status{margin-top:var(--s3);padding:14px 16px;border-radius:var(--r-sm);font-weight:500;display:none;line-height:1.6}
.form__status.ok{display:block;background:#E9F8EE;color:#0F5F35}
.form__status.bad{display:block;background:#FFF0EF;color:#8E1015}

/* ---------- FAQ ---------- */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line-strong)}
.faq summary{padding:20px 44px 20px 0;font-weight:600;cursor:pointer;list-style:none;
  position:relative;font-size:17px;line-height:1.5}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;inset-inline-end:14px;top:28px;width:9px;height:9px;
  border-right:2.5px solid var(--red-deep);border-bottom:2.5px solid var(--red-deep);
  transform:rotate(45deg);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(-135deg);top:32px}
.faq .a{padding:0 0 20px;color:var(--ink-soft);white-space:pre-line;max-width:66ch}

/* ---------- Ft6 · ท้ายเว็บ + แถบวิ่ง ---------- */
.marquee{background:var(--ink);color:var(--cream);overflow:hidden;padding:16px 0;
  border-block:1px solid rgba(255,255,255,.1)}
.marquee__track{display:flex;width:max-content;animation:slide 34s linear infinite}
.marquee span{font-family:var(--font-num);font-size:clamp(19px,2.4vw,28px);letter-spacing:.03em;
  padding-inline:var(--s5);white-space:nowrap;line-height:1.5;color:var(--cream)}
.marquee span::after{content:"·";color:var(--red);margin-inline-start:var(--s5)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.footer{background:var(--ink);color:#E9D9C8;padding:0 0 96px}
.footer .wrap{padding-block:var(--s7)}
.footer__grid{display:grid;gap:var(--s6)}
.footer h4{color:#fff;font-size:14px;font-family:var(--font-num);font-weight:400;
  letter-spacing:.09em;margin-bottom:var(--s3);color:rgba(255,255,255,.6)}
.footer a{color:#E9D9C8;text-decoration:none}
.footer a:hover{color:#fff;text-decoration:underline}
.footer ul{list-style:none;margin:0;padding:0}
.footer li a{display:inline-flex;align-items:center;min-height:44px;padding:2px 0}
.footer address{font-style:normal;white-space:pre-line;line-height:1.8;color:#C6B0A0;
  margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.12)}
.footer__bottom{border-top:1px solid rgba(255,255,255,.14);padding-top:var(--s4);margin-top:var(--s6);
  font-size:14px;color:#B49A88;line-height:1.7}
.socials{display:flex;gap:10px;margin-top:var(--s3)}
.socials a{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.09);
  display:grid;place-items:center;transition:background-color .2s,transform .2s}
@media (hover:hover) and (pointer:fine){
  .socials a:hover{background:var(--red);transform:translateY(-3px)}
}
.socials svg{width:20px;height:20px;fill:#fff}

/* ---------- ปุ่มลอยล่างจอ ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;gap:1px;
  background:var(--line-strong);box-shadow:0 -4px 18px rgba(122,15,20,.16);
  padding-bottom:env(safe-area-inset-bottom)}
.dock a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;height:58px;
  background:var(--paper);text-decoration:none;font-weight:600;font-size:16px;color:var(--ink)}
.dock a.is-line{background:#06C755;color:#fff}
.dock a.is-call{background:var(--red);color:#fff}
.dock svg{width:21px;height:21px;flex:none}

/* ---------- หน้าย่อย ---------- */
.pagehead{background:var(--red);color:#fff;padding:118px 0 var(--s8)}
.pagehead h1{color:#fff;max-width:18ch;margin-bottom:var(--s3)}
.pagehead p{color:rgba(255,255,255,.92);max-width:56ch;margin:0;font-size:clamp(16px,1.8vw,18.5px)}
.crumbs{font-size:14px;color:rgba(255,255,255,.78);margin-bottom:var(--s3);line-height:1.6}
.crumbs a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;
  padding-inline:4px;color:rgba(255,255,255,.78);text-decoration:none}
.crumbs a:hover{color:#fff;text-decoration:underline}

.detail{display:grid;gap:var(--s6);padding-block:var(--s8)}
.detail__pic{background:var(--paper);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--shadow)}
.detail__meta{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s4)}
.detail .price{font-size:44px}
.detail__body{font-size:clamp(17px,1.9vw,19px);max-width:56ch}

.gallery{columns:2;column-gap:12px}
.gallery img{width:100%;margin-bottom:12px;border-radius:var(--r);break-inside:avoid}

/* ---------- อนิเมชัน: สังเกตได้แต่ไม่รบกวน ---------- */
.reveal{opacity:0;transform:translateY(20px)}
.reveal.in{opacity:1;transform:none;transition:opacity .55s ease-out,transform .55s ease-out}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
  .marquee__track{animation:none}
}

/* ============================================================ จอกว้างขึ้น */
@media (min-width:520px){
  .gallery{columns:2}
  .env{grid-template-columns:1fr 1fr}
}
@media (min-width:768px){
  body{font-size:18px}
  .wrap{padding-inline:32px}
  .board__grid{grid-template-columns:repeat(3,1fr)}
  .tile{padding:var(--s4) var(--s4) var(--s5)}
  .info-grid{grid-template-columns:repeat(3,1fr);gap:var(--s5)}
  .env{grid-template-columns:1.25fr .87fr .87fr;gap:var(--s4)}
  .footer__grid{grid-template-columns:1.5fr 1fr 1fr}
  .stakes .wrap{grid-template-columns:1.15fr .85fr;align-items:center}
  .anatomy__grid{grid-template-columns:.95fr 1.05fr;gap:var(--s8)}
  .quote-side{grid-template-columns:1fr 1fr}
  .close__meta{grid-template-columns:repeat(3,1fr);gap:var(--s6)}
  .gallery{columns:3;column-gap:16px}
  .gallery img{margin-bottom:16px}
  .detail{grid-template-columns:.85fr 1.15fr;gap:var(--s8);padding-block:var(--s9)}
  .hero__inner{min-height:82svh;padding:150px 0 var(--s8);padding-inline-end:52%}
  .hero__media{inset:0 0 0 50%}
  .hero::before{background:linear-gradient(to right,var(--red) 0%,var(--red) 48%,rgba(122,15,20,.5) 56%,rgba(70,8,12,.10) 74%,transparent 100%)}
  /* พาดหัวไทยต้องไม่ตัดกลางคำ — ลดขนาดในแผงแคบให้ขึ้นบรรทัดใหม่ตรงช่องว่างจริง */
  .hero h1{font-size:clamp(32px,3.5vw,44px);max-width:none}
  .hero__foot{margin-top:var(--s6)}
  .hero__dots{position:absolute;right:var(--s5);bottom:var(--s5);z-index:2}
  .hero::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:14px;z-index:1;
    transform:translateX(-7px);pointer-events:none;background-color:var(--red);
    background-image:
      linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%),
      linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%);
    background-size:20px 20px;background-position:0 0,10px 10px}
  .hero h1{text-shadow:none}
  .hero__sub{text-shadow:none}
  .pagehead{padding:150px 0 var(--s9)}
}
@media (min-width:1024px){
  .nav{display:flex}
  .burger{display:none}
  .header .btn--primary{display:inline-flex}
  .board__grid{grid-template-columns:repeat(4,1fr)}
  .dock{display:none}
  .footer{padding-bottom:0}
  .brand img{width:46px;height:46px}
  .brand__name{font-size:17px}
  .gallery{columns:4}
  .quote-side{grid-template-columns:1fr}
  .proof__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s8);align-items:start}
}