/* ==========================================================================
   Radklao Studio — public site
   สร้างบน Brand Guideline v1.2 (Modern Editorial) — โทเคนจาก Radklao-Studio-Brand-Deck.pptx (ส.ค. 69) · ดู /brand/BRAND-GUIDELINE.md

   หนึ่งลุคเดียวจงใจ: กระดาษอมอุ่น + serif หัวเรื่อง — สุภาพแบบแกลเลอรี ไม่มีโหมดมืด
   ทุกสีและทุกขนาดมาจากตัวแปรใน :root — ห้ามฮาร์ดโค้ดค่าใหม่ในไฟล์นี้หรือใน HTML
   ========================================================================== */

:root{
  /* ---- สี · หมึก ---------------------------------------------------- */
  --ink:#1C1A18;          /* ข้อความหลัก หัวเรื่อง            15.1:1 บน paper */
  --ink2:#4A4642;         /* ย่อหน้าเนื้อหา                    8.1:1 */
  --muted:#706C66;        /* คำบรรยาย meta                    4.0:1 */
  --onyx:#100E0D;         /* พื้นเข้มเต็มความกว้าง (band)  */

  /* ---- สี · กระดาษ -------------------------------------------------- */
  --paper:#F1EFEC;        /* พื้นหลังหลัก — ไม่ใช้ #FFF เด็ดขาด */
  --paper2:#E9E5DF;       /* สลับ section / กล่อง */
  --paper3:#E2DDD6;       /* รองพื้นภาพก่อนโหลด */
  --line:#E2DDD6;         /* เส้นคั่น 1px */
  --line-soft:#EFEDE9;
  --line-ink:#2A2521;     /* เส้นบนพื้นเข้ม */

  /* ---- สี · ทองเหลือง (สีเน้นเดียว ใช้ไม่เกิน 5% ของพื้นที่) -------- */
  --brass:#A0784E;        /* เส้น ไอคอน ขอบ — 3.5:1 ห้ามใช้กับข้อความเล็ก */
  --brass-ink:#7E5C39;    /* ข้อความ/ลิงก์สีทอง — 5.3:1 */
  --brass-light:#D6B58C;  /* ทองบนพื้นเข้ม — 9.9:1 บน onyx */
  --brass-soft:#EFE3D4;

  /* ---- ตัวอักษร ------------------------------------------------------
     ละตินและไทยคนละไฟล์โดยตั้งใจ — เบราว์เซอร์สลับให้เองรายตัวอักษร
     ห้ามลบ Trirong / IBM Plex Sans Thai ออกจาก stack ไม่งั้นไทยจะ fallback มั่ว */
  --serif:"Cormorant Garamond","Trirong","Times New Roman",Georgia,serif;
  --sans:"Inter","IBM Plex Sans Thai",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
  --thai:var(--sans);     /* ชื่อเดิม เก็บไว้ให้ HTML เก่าไม่พัง */

  /* ---- สเกลตัวอักษร (ไหลตามจอ 360 → 1440) --------------------------- */
  --t-2xs:.6875rem;  /* 11 */
  --t-xs:.75rem;     /* 12 */
  --t-sm:.875rem;    /* 14 */
  --t-md:1rem;       /* 16 */
  --t-lg:clamp(1.0625rem,1.019rem + .19vw,1.1875rem);
  --t-xl:clamp(1.25rem,1.153rem + .43vw,1.5rem);
  --t-2xl:clamp(1.5rem,1.306rem + .86vw,2rem);
  --t-3xl:clamp(1.875rem,1.549rem + 1.45vw,2.75rem);
  --t-4xl:clamp(2.375rem,1.847rem + 2.35vw,3.75rem);
  --t-5xl:clamp(3rem,2.093rem + 4.03vw,5.5rem);

  --lead-display:1.06;
  --lead-heading:1.22;
  --lead-body:1.75;
  --track-eyebrow:.22em;

  /* ---- ระยะ ---------------------------------------------------------- */
  --s-2xs:.5rem; --s-xs:.75rem; --s-sm:1rem; --s-md:1.5rem;
  --s-lg:2rem;   --s-xl:3rem;   --s-2xl:4rem; --s-3xl:6rem;
  --section-y:clamp(4rem,2.5rem + 6.7vw,8.75rem);
  --gutter:clamp(1.25rem,.6rem + 2.9vw,3rem);
  --measure:1180px;

  /* ---- รูปทรง · เหลี่ยมคมคือภาษาของแบรนด์นี้ ------------------------ */
  --r-sm:2px; --r-md:3px;

  /* ---- จังหวะ -------------------------------------------------------- */
  --ease:cubic-bezier(.22,1,.36,1);
  --d-fast:180ms; --d-base:320ms; --d-slow:620ms;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:var(--t-md);line-height:var(--lead-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1,"liga" 1;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.thai{font-family:var(--sans);}

/* หัวเรื่องทั้งหมดเป็น serif · เนื้อหาเป็น sans — คู่มาตรฐานของ editorial
   lining-nums สำคัญมาก: Cormorant ใช้เลข old-style เป็นค่าเริ่มต้น ถ้าไม่บังคับ
   เลขในหัวเรื่องอย่าง "500+ gowns" หรือ "ชุดกว่า 500 ชุด" จะเล็กกว่าตัวอักษรรอบข้าง
   จนอ่านเป็น ʃoo — พังทั้งภาษาไทยและอังกฤษ */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:var(--lead-heading);
  letter-spacing:-.01em;text-wrap:balance;
  font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;}

:where(:focus-visible){outline:2px solid var(--brass-ink);outline-offset:3px;border-radius:var(--r-sm);}
::selection{background:var(--brass-soft);color:var(--ink);}

/* --------------------------------------------------------------------------
   กฎภาษา — หน้าไทยตั้ง <html lang="th"> กฎ :lang(th) จึงมีผลทั้งหน้า
   ข้อความอังกฤษล้วนที่แทรกอยู่ต้องใส่ lang="en" เพื่อดึงค่าละตินกลับมา
   -------------------------------------------------------------------------- */
:lang(th){
  line-height:1.9;          /* ไทยมีสระบน/ล่าง ต้องการที่ว่างมากกว่าละติน */
  letter-spacing:0;         /* ห้าม tracking บวก — สระจะลอยหลุดพยัญชนะ */
  text-align:start;         /* ห้าม justify — ไทยไม่มีช่องว่างระหว่างคำ */
  word-break:normal;overflow-wrap:break-word;
}
:lang(th) h1{line-height:1.28;letter-spacing:0;}
:lang(th) h2{line-height:1.32;letter-spacing:0;}
:lang(th) h3,:lang(th) h4{line-height:1.38;letter-spacing:0;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}

/* หมายเหตุ: บล็อก .services / .svc (ตาราง 2×2 มีกรอบ) ถูกลบใน v1.3
   เปลี่ยนไปใช้ .crafts (รายการมีเลขลำดับ) ตามสไลด์ 6 ของ brand deck */

/* แบรนด์ย่อยอยู่ให้ครบแต่ไม่แย่งซีน — บรรทัดเดียวใต้ตาราง */
.subbrands{
  margin:18px 0 0;font-size:var(--t-sm);color:var(--muted);
}
.subbrands a{color:var(--ink2);border-bottom:1px solid var(--line);}
.subbrands a:hover{color:var(--brass-ink);border-color:var(--brass-ink);}
.subbrands .bn{font-family:var(--serif);font-size:1.06em;color:var(--ink);}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:28px;
  padding:14px var(--gutter);
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
/* โลโก้เป็นไฟล์ SVG จริง ไม่ใช่ตัวอักษรที่พิมพ์เลียนแบบ
   พื้นที่ปลอดภัยรอบโลโก้ = ความสูงตัว R ตาม guideline ข้อ 2.2 */
.brandmark{display:flex;align-items:center;gap:var(--s-md);flex:none;}
/* โลโก้ชุด 2026 จาก brand deck — lockup แนวนอน R|K + RADKLAO STUDIO
   สัดส่วน 600x260 กว้างกว่าเดิมมาก จึงลดความสูงลงให้แถบหัวสูงเท่าเดิม */
.brandmark img{height:34px;width:auto;}
.brandmark .name{
  font-family:var(--serif);font-size:19px;letter-spacing:.02em;line-height:1.15;
  padding-left:var(--s-md);border-left:1px solid var(--line);
}
.brandmark .name small{
  display:block;font-family:var(--sans);font-size:var(--t-2xs);
  letter-spacing:.2em;color:var(--muted);margin-top:3px;
}
.brandmark .name small:lang(th){letter-spacing:.06em;}

.site-nav{margin-left:auto;display:flex;align-items:center;gap:var(--s-2xs);}
.site-nav a{
  font-family:var(--sans);font-size:var(--t-sm);letter-spacing:.02em;
  color:var(--ink2);padding:10px 14px;
}
.site-nav a:hover{color:var(--brass-ink);}
.site-nav a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink);}
/* เมนูอังกฤษใช้ตัวพิมพ์ใหญ่เว้นระยะกว้าง — ไทยไม่มีตัวพิมพ์ใหญ่ จึงไม่แตะ */
.site-nav a:lang(en){text-transform:uppercase;letter-spacing:.14em;font-size:var(--t-xs);}
/* ไทยตัวเล็กกว่าละตินเมื่อ px เท่ากัน — บวกคืนให้เมนูสองภาษาดูน้ำหนักเท่ากัน */
.site-nav a:lang(th){font-size:15px;}

/* ปุ่มหลักของทั้งเว็บ — ทุกทางเข้าหาร้านคือไลน์ */
.btn-line{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:var(--t-sm);font-weight:500;letter-spacing:.02em;
  background:var(--ink);color:var(--paper) !important;
  border:1px solid var(--ink);border-radius:var(--r-sm);
  padding:12px 22px;min-height:46px;white-space:nowrap;
  transition:background-color var(--d-base) var(--ease),border-color var(--d-base) var(--ease);
}
.btn-line:hover{background:var(--brass-ink);border-color:var(--brass-ink);}
.btn-line:lang(en){text-transform:uppercase;letter-spacing:var(--track-eyebrow);font-size:var(--t-xs);}

/* ---------- hero ---------- */
/* Hero แบบ editorial: ข้อความซ้าย ภาพขวาชนขอบจอ
   ภาพชนขอบขวาโดยไม่มี gutter คือหัวใจ — ถ้าให้ภาพอยู่ในคอลัมน์เท่ากับข้อความ
   มันจะกลายเป็น "การ์ดใบใหญ่" ซึ่งเป็นคนละภาษากับ editorial
   สัดส่วน 44/56 ให้ภาพหนักกว่าเล็กน้อย เพราะภาพคือสินค้า ไม่ใช่ของประกอบ */
.hero{
  min-height:88vh;display:grid;
  grid-template-columns:minmax(0,44fr) minmax(0,56fr);
  align-items:center;gap:clamp(2rem,4.5vw,5.5rem);
  padding:0 0 0 var(--gutter);text-align:left;position:relative;
}

.hero-copy{max-width:34rem;padding:7vh 0 8vh;}

.hero-figure{
  margin:0;align-self:stretch;min-height:88vh;
  overflow:hidden;background:var(--paper3);
}

/* object-position ดันเฟรมขึ้นบน เพื่อให้ใบหน้าอยู่ในระดับสายตาเสมอ
   ไม่ว่าจอจะสูงเท่าไร — ค่ากลางจะทำให้หัวโดนตัดบนจอเตี้ย */
.hero-figure img{
  width:100%;height:100%;object-fit:cover;object-position:52% 22%;display:block;
}

/* จังหวะเดียวของหน้า: ภาพคลายจากซูมเล็กน้อยตอนเปิด
   เริ่มจากสถานะที่มองเห็นอยู่แล้ว ไม่ fade เข้ามาจากความว่าง
   ไม่ใส่อนิเมชันให้ข้อความด้วย — ถ้าทุกอย่างขยับ จะไม่มีอะไรเป็นจังหวะ */
@media (prefers-reduced-motion:no-preference){
  .hero-figure img{animation:heroSettle 1400ms var(--ease) both;}
}
@keyframes heroSettle{
  from{transform:scale(1.055);}
  to{transform:scale(1);}
}
.hero .eyebrow{
  font-family:var(--sans);font-size:var(--t-xs);font-weight:500;
  letter-spacing:var(--track-eyebrow);text-transform:uppercase;
  color:var(--brass-ink);margin-bottom:26px;
}
.hero .eyebrow:lang(th){text-transform:none;letter-spacing:.02em;font-size:var(--t-sm);}
/* พาดหัวในเลย์เอาต์แบ่งคอลัมน์ต้องเล็กกว่าตอนจัดกลางเต็มความกว้าง
   คอลัมน์ข้อความเหลือราว 580px — ถ้าใช้ --t-5xl (สูงสุด 88px) พาดหัวแตกเป็น 4 บรรทัด
   ดันปุ่มทักไลน์ตกใต้ขอบจอบนจอสูง 900px ซึ่งเป็นความสูงที่พบบ่อยที่สุด
   ปุ่มปิดการขายต้องเห็นตั้งแต่จอแรกเสมอ ขนาดตัวอักษรยอมให้ก่อน */
.hero h1{
  margin:0 0 30px;font-size:clamp(2.625rem,1.6rem + 2.9vw,4.25rem);font-weight:300;
  line-height:var(--lead-display);letter-spacing:-.015em;max-width:15ch;
  text-wrap:balance;
}
.hero .sub{
  margin:0 0 44px;max-width:42ch;color:var(--ink2);
  font-size:var(--t-lg);
}
.hero .sub .thai{font-size:.9em;color:var(--muted);display:block;margin-top:10px;}
.hero-cta{display:flex;gap:16px;justify-content:flex-start;flex-wrap:wrap;align-items:center;}
.hero-cta .ghost{
  font-family:var(--sans);font-size:var(--t-sm);letter-spacing:.02em;
  color:var(--ink2);border-bottom:1px solid var(--line);padding:10px 2px;
  transition:color var(--d-fast) var(--ease),border-color var(--d-fast) var(--ease);
}
.hero-cta .ghost:lang(en){text-transform:uppercase;letter-spacing:.14em;font-size:var(--t-xs);}
.hero-cta .ghost:hover{color:var(--brass-ink);border-color:var(--brass-ink);}

/* ---------- โครง section ---------- */
section{padding:var(--section-y) var(--gutter);}
.measure{max-width:var(--measure);margin:0 auto;}
.sec-head{margin-bottom:54px;}
.eyebrow{
  font-family:var(--sans);font-size:var(--t-xs);font-weight:500;
  letter-spacing:var(--track-eyebrow);text-transform:uppercase;
  color:var(--brass-ink);margin-bottom:14px;
}
.eyebrow:lang(th){text-transform:none;letter-spacing:.02em;font-size:var(--t-sm);}
.sec-head h2{margin:0;font-size:var(--t-3xl);}
.rule{border:0;border-top:1px solid var(--line);margin:0 var(--gutter);}

/* ---------- pillars ---------- */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:52px 60px;}
.pillar h2,.pillar h3{margin:0 0 12px;font-size:var(--t-xl);}
/* หัวเสาเปลี่ยนจาก h3 เป็น h2 เพื่อให้ลำดับหัวข้อของเอกสารไม่ข้ามชั้น
   แต่มันยังเป็นหัวข้อย่อยในสายตาคนอ่าน จึงคง line-height 1.38 ของหัวข้อย่อยไว้
   ถ้าปล่อยให้ตกไปใช้ 1.32 ของ h2 บรรทัดไทยจะแน่นขึ้นและกล่องเตี้ยลง 1px
   การเปลี่ยนแท็กครั้งนี้แก้โครงเอกสาร ไม่ใช่แก้หน้าตา */
.pillar h2:lang(th){line-height:1.38;}
/* เส้นสั้นสีทองเหนือหัวข้อ — จุดเดียวในหน้าที่ทองทำงาน */
.pillar h2::before,.pillar h3::before{
  content:"";display:block;width:34px;border-top:1.5px solid var(--brass);margin-bottom:18px;
}
.pillar p{margin:0;color:var(--ink2);}

/* หมายเหตุ: บล็อก .gallery / .ph / .g-* (mosaic 6 คอลัมน์) ถูกลบใน v1.3
   เปลี่ยนไปใช้ .band3 (สไลด์ 4) และ .grid4 (สไลด์ 5) — เหลือไว้เฉพาะ .gallery-note */
.gallery-note{
  margin-top:26px;font-size:var(--t-sm);color:var(--muted);
}
.gallery-note .link{color:var(--ink2);border-bottom:1px solid var(--line);}
.gallery-note .link:hover{color:var(--brass-ink);border-color:var(--brass-ink);}

/* หมายเหตุ: .collection / .cbox / .ctext (กล่องมีขอบ) ถูกลบใน v1.3
   ย้ายไปใช้ .split (สไลด์ 7) — ปุ่มไอจีและลิงก์รองด้านล่างยังใช้ต่อ */
.cact{display:flex;flex-direction:column;align-items:flex-start;gap:14px;}
.btn-ig{
  display:inline-flex;align-items:center;gap:13px;
  font-family:var(--sans);font-size:var(--t-sm);font-weight:500;
  background:var(--ink);color:var(--paper) !important;
  border:1px solid var(--ink);border-radius:var(--r-sm);
  padding:13px 24px 13px 18px;min-height:46px;
  transition:background-color var(--d-base) var(--ease),border-color var(--d-base) var(--ease);
}
.btn-ig:hover{background:var(--brass-ink);border-color:var(--brass-ink);}
.btn-ig small{display:block;font-weight:400;font-size:var(--t-2xs);opacity:.72;letter-spacing:.04em;margin-top:1px;}
/* ไอคอน IG วาดด้วย CSS — ไม่พึ่งไฟล์ภายนอกและคมทุกความละเอียด */
.ig-mark{width:21px;height:21px;border:2px solid currentColor;border-radius:6px;position:relative;flex:none;}
.ig-mark::before{content:"";position:absolute;inset:4px;border:2px solid currentColor;border-radius:50%;}
.ig-mark::after{content:"";position:absolute;top:1.5px;right:1.5px;width:2.5px;height:2.5px;
  border-radius:50%;background:currentColor;}
.cminor{
  font-size:var(--t-sm);color:var(--muted);
  border-bottom:1px solid var(--line);padding-bottom:2px;
}
.cminor:hover{color:var(--brass-ink);border-color:var(--brass-ink);}
/* ---------- แถบปิดท้าย (พื้นเข้ม) ----------
   เดิมเป็นพื้นไวน์ · ตอนนี้เป็น onyx ตาม guideline — ให้ภาพถ่ายเป็นสีเดียวในหน้า */
.band{
  background:var(--onyx);color:var(--paper);text-align:center;
  padding:110px var(--gutter);
}
.band h2{margin:0 0 18px;font-size:var(--t-3xl);font-weight:300;}
.band p{margin:0 auto 40px;max-width:52ch;font-size:var(--t-lg);color:#C4BDB4;}
.band .btn-line{background:var(--paper);color:var(--ink) !important;border-color:var(--paper);}
.band .btn-line:hover{background:var(--brass-light);border-color:var(--brass-light);color:var(--onyx) !important;}

/* ---------- หน้าราคา ---------- */
.page-title{padding-top:70px;padding-bottom:30px;}
.lead-para{
  font-size:var(--t-lg);line-height:1.8;max-width:62ch;color:var(--ink2);
}
.lead-para b{color:var(--ink);font-weight:600;}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px;margin-top:56px;}
.pcard{
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);
  padding:44px 40px 40px;position:relative;
  transition:border-color var(--d-base) var(--ease);
}
.pcard:hover{border-color:var(--brass);}
.pcard.feature{border-color:var(--ink);border-width:2px;}
.pcard .tag{
  position:absolute;top:-11px;left:36px;background:var(--ink);color:var(--paper);
  font-family:var(--sans);font-size:var(--t-2xs);font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  padding:5px 13px;border-radius:var(--r-sm);
}
.pcard .tag:lang(th){text-transform:none;letter-spacing:.02em;font-size:var(--t-xs);}
.pcard h3{margin:0 0 4px;font-size:var(--t-2xl);}
.pcard .th-name{font-size:var(--t-sm);color:var(--muted);margin-bottom:26px;}
/* Cormorant ใช้เลข old-style เป็นค่าเริ่มต้น — ราคาต้องบังคับ lining ไม่งั้น 1 จะดูเหมือน I */
.pcard .price{
  font-family:var(--serif);font-size:var(--t-4xl);font-weight:400;
  font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1;
  line-height:1;margin-bottom:6px;
}
.pcard .price small{font-size:.4em;color:var(--muted);letter-spacing:0;}
.pcard .per{font-size:var(--t-xs);color:var(--muted);margin-bottom:30px;line-height:1.6;}
.pcard ul{list-style:none;margin:0 0 8px;padding:0;}
.pcard li{
  padding:11px 0 11px 26px;border-top:1px solid var(--line-soft);
  font-size:var(--t-sm);color:var(--ink2);position:relative;
}
.pcard li::before{content:"";position:absolute;left:8px;top:1.35em;
  width:4px;height:4px;border-radius:50%;background:var(--brass);}

.terms{margin-top:70px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:36px 48px;}
.term h3,.term h4{
  margin:0 0 10px;font-family:var(--sans);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--brass-ink);
}
.term h3:lang(th),.term h4:lang(th){text-transform:none;letter-spacing:.02em;font-size:var(--t-sm);}
.term p{margin:0;font-size:var(--t-sm);color:var(--ink2);}

/* ---------- ติดต่อ ---------- */
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:44px;}
.contact h3{margin:0 0 14px;font-size:var(--t-xl);}
.contact p{margin:0 0 8px;color:var(--ink2);}
.contact .thai{font-size:var(--t-sm);}
.contact a.link{border-bottom:1px solid var(--line);}
.contact a.link:hover{color:var(--brass-ink);border-color:var(--brass-ink);}

/* ---------- footer ---------- */
.site-foot{
  border-top:1px solid var(--line);padding:44px var(--gutter) 54px;
  display:flex;flex-wrap:wrap;gap:18px 40px;align-items:center;
  font-size:var(--t-sm);color:var(--muted);
}
.site-foot .sp{flex:1;}
.site-foot a{border-bottom:1px solid transparent;}
.site-foot a:hover{color:var(--brass-ink);border-color:var(--brass-ink);}

/* ---------- ปรับเฉพาะหน้าไทย ----------
   ไทยตัวโตกว่าละตินที่ค่า px เท่ากันเล็กน้อย จึงลดหัวเรื่องลงหนึ่งขั้น
   ให้จังหวะหน้าเท่ากับหน้าอังกฤษ ไม่ใช่เพราะไทยสำคัญน้อยกว่า */
/* พาดหัวไทย: กว้างขึ้นและสมดุลบรรทัด — ไทยไม่มีเว้นวรรคระหว่างคำ คอลัมน์แคบไป
   เบราว์เซอร์จะหักกลางคำ (เคยได้ "แต่ง / หน้าเจ้าสาว" ซึ่งฉีกคำว่า "แต่งหน้า") */
.th-page h1{font-size:var(--t-3xl);font-weight:500;margin:14px 0 26px;max-width:32ch;text-wrap:balance;}
.th-page .sec-head h2{font-size:var(--t-2xl);font-weight:500;}
.th-page .band h2{font-size:var(--t-2xl);font-weight:500;}
.th-page .pillar h2,.th-page .pillar h3{font-size:var(--t-lg);font-weight:500;}
.th-page .contact h3{font-size:var(--t-lg);font-weight:500;}
.th-page .lead-para{max-width:52ch;}

/* ตารางราคา — ตารางจริงเพื่อให้เครื่องอ่านดึงไปตอบได้ ไม่ใช่การ์ดที่อ่านยาก
   ตารางกว้างกว่าจอมือถือโดยตั้งใจ (บีบคอลัมน์แล้วอ่านไม่ออก) จึงให้เลื่อนในกล่องตัวเอง
   ห้ามลบ overflow-x บรรทัดล่าง ไม่งั้นตารางจะดันทั้งหน้าให้เลื่อนซ้ายขวา */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.ptable{width:100%;border-collapse:collapse;font-size:var(--t-sm);min-width:600px;}
.ptable th,.ptable td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--line);
  vertical-align:top;white-space:normal;}
.ptable thead th{
  font-family:var(--sans);font-size:var(--t-xs);letter-spacing:.14em;color:var(--muted);
  font-weight:600;border-bottom:2px solid var(--ink);white-space:nowrap;
}
.ptable tbody th{font-weight:600;color:var(--ink);width:24%;}
.ptable td.num{
  font-weight:600;color:var(--ink);white-space:nowrap;width:18%;
  font-variant-numeric:lining-nums tabular-nums;
}
.ptable tbody tr:last-child th,.ptable tbody tr:last-child td{border-bottom:0;}

/* คำถามที่พบบ่อย — แต่ละข้อจบในตัวเอง ยกไปอ้างอิงเดี่ยวๆ ได้ */
.faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:8px 46px;}
.qa{padding:18px 0;border-top:1px solid var(--line);}
.qa h3{margin:0 0 8px;font-family:var(--sans);font-size:var(--t-md);font-weight:600;line-height:1.6;}
.qa p{margin:0;font-size:var(--t-sm);color:var(--ink2);}

/* ---------- แถบติดต่อติดขอบล่าง (มือถือเท่านั้น) ----------
   วางที่ขอบล่างเพราะนิ้วโป้งถึงง่ายกว่าขอบบน · ซ่อนไว้จนเลื่อนพ้นจอแรก
   เพื่อไม่ให้ไปทับภาพแรกที่ทำหน้าที่สร้างความประทับใจ */
.callbar-fixed{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:none;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  transform:translateY(105%);transition:transform var(--d-base) var(--ease);
}
.callbar-fixed.on{transform:none;}
.callbar-fixed .cb-line{
  flex:1;display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:50px;border-radius:var(--r-sm);background:var(--ink);color:var(--paper) !important;
  font-family:var(--sans);font-size:var(--t-md);font-weight:500;
}
.callbar-fixed .cb-tel{
  width:52px;min-height:50px;flex:none;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);
}
/* ไอคอน SVG ฝังในโค้ด — ไม่ต้องโหลดไฟล์เพิ่มบนเน็ตมือถือต่างจังหวัด */
.cb-svg{width:20px;height:20px;flex:none;}
.callbar-fixed .cb-tel .cb-svg{color:var(--ink);}
@media (max-width:860px){ .callbar-fixed{display:flex;} }
@media print{ .callbar-fixed{display:none !important;} }

/* ---------- responsive ---------- */
@media (max-width:880px){
  /* มือถือ: ภาพขึ้นก่อน ข้อความอยู่ใต้ภาพบนพื้นกระดาษ
     ไม่วางข้อความทับภาพ เพราะไกด์ไลน์ §6.4 บังคับให้มี scrim เสมอ
     และ scrim บนภาพสว่างอย่างใบนี้จะทำให้ทั้งภาพหม่นโดยไม่จำเป็น
     ย้ายด้วย order ไม่ใช่สลับใน DOM — h1 ต้องคงเป็นสิ่งแรกของหน้า */
  .hero{
    grid-template-columns:1fr;min-height:0;padding:0;gap:0;
  }
  .hero-figure{order:-1;min-height:0;height:clamp(320px,56vh,520px);align-self:auto;}
  .hero-copy{max-width:none;padding:7vh var(--gutter) 8vh;}

}
@media (max-width:640px){
  .hero{min-height:76vh;}
  .brandmark img{height:28px;}
  .brandmark .name{display:none;}   /* จอแคบ: โลโก้พูดแทนชื่อได้อยู่แล้ว */
  /* จอแคบ: เมนูตกบรรทัดใต้โลโก้ — กันแถบหัวดัน layout กว้างเกินจอ */
  .site-head{flex-wrap:wrap;gap:4px 12px;padding:12px var(--gutter);}
  /* ต้อง wrap ด้วย — ไม่งั้นเมนู 6 ชิ้น (~590px) ในแถวกว้าง ~350px จะถูกดัน
     ทะลุขอบซ้ายจนหายไปสามชิ้นแรก (Gallery/Gowns/Flowers) และกดไม่ได้เลย
     เพราะ justify-content:flex-end + overflow:visible ไม่สร้างแถบเลื่อนให้ */
  .site-nav{width:100%;margin-left:0;justify-content:flex-start;flex-wrap:wrap;gap:2px 8px;}
  /* ชิดซ้ายให้ตรงแนวโลโก้ด้านบน แถวเมนูกับโลโก้จึงอ่านเป็นก้อนเดียว
     ปุ่มไลน์ดันไปท้ายแถวสุดท้ายเสมอ ไม่ต้องหาว่าอยู่ตรงไหน */
  .site-nav .btn-line{margin-left:auto;}
  /* พื้นที่แตะอย่างน้อย 44px ตามมาตรฐาน — นิ้วโป้งกดพลาดน้อยลง */
  .site-nav a:not(.btn-line){padding:12px 9px;min-height:44px;display:flex;align-items:center;}
  .btn-line{padding:12px 17px;min-height:44px;}
  .site-foot{gap:14px 26px;line-height:2.1;}
  .site-foot a{padding:6px 0;display:inline-block;}
  /* ลิงก์ที่เป็นปุ่มจริง (ไม่ใช่ข้อความประกอบ) ต้องแตะได้สบายด้วย */
  .cminor,.hero-cta .ghost{padding-top:12px;padding-bottom:12px;display:inline-block;}
  .pcard{padding:36px 26px 32px;}
  .ptable{min-width:520px;}
}

/* ==========================================================================
   v1.3 — ภาษาเลย์เอาต์จาก Radklao-Studio-Brand-Deck.pptx (เจ้าของอนุมัติ ส.ค. 69)
   --------------------------------------------------------------------------
   ทุกค่าที่นี่ถอดจากสไลด์จริง ไม่ได้เดา: slide กว้าง 20 นิ้ว (1920px @96dpi)
   ขอบซ้ายขวา 1 นิ้ว = 5% · พาดหัว 162pt · หัว section 60pt · ตัวเลขสถิติ 150pt
   · ตัวเลขลำดับ 36pt · eyebrow 18-19.5pt tracking 0.26em

   ขอบเขต: กฎเกือบทั้งหมดผูกกับ body.rk = หน้าของ Radklao เท่านั้น
   หน้า Rykan (/dress/) และ Rootking (/flowers/) ไม่มีคลาสนี้ จึงยังใช้ระบบเดิม
   ครบทุกอย่าง — รอทำ sub-brand identity ของตัวเองก่อนแล้วค่อยย้ายเข้ามา
   ========================================================================== */

:root{
  /* พาดหัวใหญ่ = Bodoni Moda ตาม deck · Bodoni ไม่มีตัวไทยและไม่มี ฿
     เบราว์เซอร์จะตกไป Trirong ให้เองรายตัวอักษร ห้ามถอด Trirong ออกจาก stack */
  --display:"Bodoni Moda","Trirong","Didot","Times New Roman",serif;

  /* deck ใช้ 162pt ได้เพราะพาดหัวมีสองคำ ("Made Once") — ของเรายาว 46 ตัวอักษร
     ที่ 116px จะได้ 3 บรรทัดสูงจนทับใบหน้าเจ้าสาว ซึ่งคืองานแต่งหน้าอันเป็นสินค้าหลัก
     88px ได้ 2 บรรทัด เหลือพื้นที่ภาพเปิดด้านบนราว 40% ใกล้เคียงสัดส่วนของ deck (57%) */
  --t-hero:clamp(2.75rem,1.35rem + 5.8vw,5.5rem);   /* 44 → 88px */
  --t-sec:clamp(2rem,1.24rem + 3.2vw,3.75rem);      /* 32 →  60px  (deck 60pt)  */
  --t-fig:clamp(4rem,1.7rem + 9.6vw,8.5rem);        /* 64 → 136px  (deck 150pt) */
  --t-ord:clamp(1.75rem,1.3rem + 1.9vw,2.5rem);     /* 28 →  40px  (deck 36pt)  */
  --track-wide:.26em;                                /* deck: spc 468-507 / sz 1800-1950 */
  --measure-wide:1560px;                             /* กรอบกว้างแบบ deck (90% ของจอ) */
}

/* ---------- ตัวอักษรของหน้า Radklao ----------
   deck แยกหน้าที่ชัด: Bodoni ทำเฉพาะ "ประโยคใหญ่" (h1/h2)
   ส่วนหัวข้อย่อยทั้งหมดเป็น grotesque — นี่คือสิ่งที่ทำให้ deck ดูสมัยใหม่
   ไม่ใช่ serif ทั้งหน้าแบบเว็บเวอร์ชันก่อน */
.rk h1,.rk h2{font-family:var(--display);font-weight:400;letter-spacing:-.005em;}
.rk h3,.rk h4{font-family:var(--sans);font-weight:600;letter-spacing:.01em;}
.rk h1:lang(th),.rk h2:lang(th){letter-spacing:0;font-weight:500;}
.rk .sec-head h1,.rk .sec-head h2{font-size:var(--t-sec);margin:0;}
.rk .sec-head h1:lang(th),.rk .sec-head h2:lang(th){font-size:clamp(1.75rem,1.2rem + 2.3vw,2.75rem);}
.rk .eyebrow{font-size:var(--t-xs);letter-spacing:var(--track-wide);margin-bottom:16px;}
/* ต้องประกาศซ้ำสำหรับไทย เพราะ .rk .eyebrow (0,2,0) ชนะ .eyebrow:lang(th) (0,1,1)
   ถ้าไม่ทวงคืน ตัวไทยจะโดน tracking .26em จนสระลอยหลุดพยัญชนะ และเล็กเกินอ่าน */
.rk .eyebrow:lang(th){font-size:var(--t-sm);letter-spacing:.02em;text-transform:none;}
.rk .measure{max-width:var(--measure-wide);}

/* หัว section แบบ deck: eyebrow + พาดหัว ซ้าย · ลิงก์ "ดูทั้งหมด" ขวา · เส้นคั่นใต้ */
/* หัว section แบบ deck — ต้องรองรับ markup สองแบบ:
   (ก) <div><eyebrow><h2></div> + <a class="seeall">  — หน้าที่เขียนใหม่
   (ข) <eyebrow> + <h2> วางเป็นลูกตรงๆ                — หน้าเดิมที่ยังไม่ได้แก้ markup
   ถ้าไม่บังคับ eyebrow ให้กินเต็มบรรทัด แบบ (ข) จะกลายเป็นสองก้อนซ้าย-ขวา
   แล้วพาดหัวจะไปชิดขวาโดยไม่ได้ตั้งใจ */
.rk .sec-head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:32px;
  margin-bottom:0;padding-bottom:26px;border-bottom:1px solid var(--line);
}
.rk .sec-head > .eyebrow{flex:0 0 100%;}
.rk .sec-head > h1,.rk .sec-head > h2{flex:1 1 auto;}
.rk .sec-head + *{margin-top:44px;}
.rk .sec-head .eyebrow{margin-bottom:12px;}
/* ลิงก์สองบรรทัดมีเส้นคั่นกลาง — ลอกจากมุมขวาบนสไลด์ 5 ตรงๆ */
.seeall{
  flex:none;font-family:var(--sans);font-size:var(--t-2xs);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--brass-ink);
  line-height:1.35;text-align:left;padding-bottom:2px;
  border-bottom:1px solid var(--brass);max-width:6.5em;
}
.seeall:hover{color:var(--ink);border-color:var(--ink);}
.seeall:lang(th){text-transform:none;letter-spacing:.02em;font-size:var(--t-sm);max-width:none;}

/* section ที่เนื้อหาชนขอบจอ — ไม่ใช้ 100vw เด็ดขาด (จะเกินความกว้างเท่าแถบเลื่อน) */
.flush{padding-left:0;padding-right:0;}

/* ==========================================================================
   1 · HERO เต็มจอพื้นเข้ม — สไลด์ 1
   ภาพเดียวกับที่ deck ใช้ (hero-bride.jpg) ครอปแนวนอน คลุมด้วยไล่เฉดสามจุด
   ========================================================================== */
.hero-full{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(34rem,92vh,58rem);
  display:flex;align-items:flex-end;
  background:var(--onyx);padding:0;
}
.hero-full > img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* deck ครอปแถบบน 12.1%–51.5% ของภาพแนวตั้ง — แปลงเป็น object-position ได้ 20% */
  object-position:50% 20%;z-index:-2;
}
/* ไล่เฉดสามจุดตาม deck ทุกค่า (42% / 6% ที่ 40% / 62%)
   แต่ปลายล่างเพิ่มจาก .62 เป็น .74 เพราะภาพของเราสว่างที่ชายกระโปรง
   ถ้าใช้ .62 ตรงๆ ตัวอักษรขาวจะได้คอนทราสต์ต่ำกว่า 4.5:1 — วัดแล้ว ไม่ใช่เดา */
.hero-full::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,
    rgba(16,14,13,.34) 0%, rgba(16,14,13,.06) 34%,
    rgba(16,14,13,.54) 74%, rgba(16,14,13,.74) 100%);
}
/* ฉากรองที่สองไล่จากซ้าย — ข้อความทั้งหมดชิดซ้าย ส่วนขวาคือใบหน้าเจ้าบ่าวที่ต้องคมชัด
   ถ้าใช้ไล่เฉดแนวตั้งอย่างเดียวให้ผ่านเกณฑ์ ต้องเข้มจนภาพหม่นทั้งใบ
   สไลด์ 9 ของ deck ก็ใช้ฉากรองจากซ้ายด้วยเหตุผลเดียวกัน */
.hero-full::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,
    rgba(16,14,13,.70) 0%, rgba(16,14,13,.58) 56%,
    rgba(16,14,13,.24) 82%, rgba(16,14,13,0) 100%);
}
.hero-full .hero-in{
  width:100%;max-width:var(--measure-wide);margin:0 auto;
  padding:clamp(3rem,9vh,6.5rem) var(--gutter) clamp(2rem,5vh,3.25rem);
  color:#fff;
}
.hero-full .eyebrow{color:rgba(255,255,255,.82);margin-bottom:18px;}
.hero-full h1{
  margin:0;font-size:var(--t-hero);line-height:.96;letter-spacing:-.012em;
  max-width:24ch;color:#fff;text-wrap:balance;
}
/* พาดหัวไทยเป็นประโยคค้นหายาว 56 ตัวอักษร ไม่ใช่วลีสั้นแบบพาดหัวอังกฤษ
   ถ้าใช้ขนาดเท่ากันจะลากยาวไปทับไหล่และชุดเจ้าสาวซึ่งเป็นส่วนสว่างที่สุดของภาพ
   (วัดแล้วเหลือ 1.35:1) จึงย่อลงและคุมความกว้างให้อยู่ในโซนที่ฉากรองเข้มพอ */
/* word-break:keep-all สำคัญมาก — Chrome ตัดบรรทัดไทยด้วยพจนานุกรม
   ที่ความกว้าง 19ch มันตัด "แต่งหน้าเจ้าสาว" เป็น "แต่ง / หน้าเจ้าสาว" ซึ่งเปลี่ยนความหมาย
   keep-all บังคับให้ตัดได้เฉพาะที่เว้นวรรค — พาดหัวนี้เว้นวรรคไว้ตรงรอยต่อวลีอยู่แล้ว */
.hero-full h1:lang(th){
  font-size:clamp(1.875rem,1.05rem + 3.3vw,3.25rem);line-height:1.3;
  max-width:24ch;word-break:keep-all;
}
/* เส้นคั่นบางใต้พาดหัว แล้วบรรทัดกำกับซ้าย-ชื่อร้านขวา — จบสไลด์แบบเดียวกับ deck */
.hero-full .hero-foot{
  display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;
  margin-top:clamp(1.75rem,5vh,3.25rem);padding-top:24px;
  border-top:1px solid rgba(255,255,255,.30);
}
.hero-full .hero-foot p{margin:0;font-size:var(--t-md);color:rgba(255,255,255,.94);max-width:48ch;flex:1 1 22rem;}
.hero-full .hero-foot .mark{
  font-family:var(--sans);font-size:var(--t-xs);letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.70);white-space:nowrap;
}
.hero-full .hero-foot .mark:lang(th){text-transform:none;letter-spacing:.04em;font-size:var(--t-sm);}
.hero-full .hero-cta{margin-top:0;display:flex;gap:16px;align-items:center;flex-wrap:wrap;}
.hero-full .btn-line{background:var(--paper);color:var(--ink) !important;border-color:var(--paper);}
.hero-full .btn-line:hover{background:var(--brass-light);border-color:var(--brass-light);}
.hero-full .ghost{color:rgba(255,255,255,.88);border-color:rgba(255,255,255,.42);}
.hero-full .ghost:hover{color:#fff;border-color:#fff;}
@media (prefers-reduced-motion:no-preference){
  .hero-full > img{animation:heroSettle 1400ms var(--ease) both;}
}
@media (max-width:700px){
  /* จอแคบ พาดหัวตกเป็น 4 บรรทัด — ต้องเพิ่มความสูงและดันภาพขึ้น
     ไม่งั้นตัวอักษรจะทับใบหน้าเจ้าสาวซึ่งเป็นตัวโชว์งานแต่งหน้า */
  .hero-full{min-height:clamp(28rem,84vh,44rem);}
  .hero-full > img{object-position:50% 14%;}
  .hero-full .hero-foot{gap:14px;}
  .hero-full .hero-foot .mark{display:none;}
}

/* ==========================================================================
   2 · แถวตัวเลข — สไลด์ 3
   ตัวเลขยักษ์ Bodoni · เส้นตั้งคั่นคอลัมน์ · เส้นนอนบนล่าง
   ตัวเลขทุกตัวต้องเป็นเรื่องจริงที่ตรวจสอบได้ — ห้ามใส่ตัวเลขจาก deck ที่ยังไม่ยืนยัน
   ========================================================================== */
.stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.stat{padding:clamp(2.25rem,4vw,3.5rem) clamp(1.5rem,3vw,3rem) clamp(2.5rem,4.5vw,4rem) 0;}
.stat + .stat{border-left:1px solid var(--line);padding-left:clamp(1.5rem,3vw,3rem);}
.stat .fig{
  font-family:var(--display);font-size:var(--t-fig);font-weight:400;
  line-height:.86;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;
  margin-bottom:clamp(1.25rem,2.4vw,2rem);
}
.stat .lab{
  font-family:var(--sans);font-size:var(--t-xs);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--brass-ink);margin-bottom:12px;
}
.stat .lab:lang(th){text-transform:none;letter-spacing:.02em;font-size:var(--t-sm);font-weight:600;}
.stat p{margin:0;color:var(--ink2);font-size:var(--t-sm);max-width:30ch;}
@media (max-width:760px){
  .stats{grid-template-columns:1fr;}
  .stat{padding:26px 0 30px;}
  .stat + .stat{border-left:0;border-top:1px solid var(--line);padding-left:0;}
}

/* ==========================================================================
   3 · แถบภาพสามใบชนขอบ — สไลด์ 4
   ร่องระหว่างภาพ 2px สีกระดาษ · ป้ายชื่ออยู่ในภาพมุมล่างซ้าย
   ========================================================================== */
.band3{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--paper);}
.band3 figure{position:relative;margin:0;overflow:hidden;aspect-ratio:4/5;background:var(--paper3);}
.band3 img{width:100%;height:100%;object-fit:cover;object-position:center 34%;
  transition:transform var(--d-slow) var(--ease);}
@media (hover:hover){ .band3 figure:hover img{transform:scale(1.035);} }
/* ป้ายในภาพต้องมีฉากรองเสมอ — ภาพชุดเจ้าสาวสว่างมาก ตัวขาวเปล่าๆ อ่านไม่ออก */
.band3 figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:64px 26px 24px;
  font-family:var(--sans);font-size:var(--t-xs);font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:#fff;
  background:linear-gradient(180deg,rgba(16,14,13,0) 0%,rgba(16,14,13,.62) 62%,rgba(16,14,13,.78) 100%);
}
.band3 figcaption:lang(th){text-transform:none;letter-spacing:.02em;font-size:var(--t-sm);}
@media (max-width:760px){
  .band3{grid-template-columns:1fr;}
  .band3 figure{aspect-ratio:3/2;}
}

/* ==========================================================================
   4 · รายการมีเลขลำดับ + ภาพครึ่งจอ — สไลด์ 6
   แทนตาราง 2×2 ที่มีกรอบของเวอร์ชันก่อน — deck ไม่ใช้กล่องมีขอบเลยแม้แต่ที่เดียว
   ========================================================================== */
.crafts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);align-items:stretch;gap:0;}
.crafts .clist{list-style:none;margin:0;padding:0 clamp(2rem,5vw,5rem) 0 0;}
.crafts .clist li{border-top:1px solid var(--line);}
.crafts .clist li:last-child{border-bottom:1px solid var(--line);}
.crafts .row{
  display:grid;grid-template-columns:auto 1fr;gap:6px clamp(1.5rem,3vw,2.75rem);
  align-items:baseline;padding:clamp(1.5rem,2.6vw,2.25rem) 0;color:inherit;
}
.crafts .ord{
  grid-row:1/3;font-family:var(--display);font-size:var(--t-ord);line-height:1;
  color:var(--brass);font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;
  min-width:2.2ch;
}
.crafts h3{margin:0;font-size:var(--t-lg);font-weight:600;}
.crafts p{margin:6px 0 0;color:var(--ink2);font-size:var(--t-sm);max-width:46ch;}
.crafts .go{
  display:block;width:fit-content;margin-top:14px;font-family:var(--sans);font-size:var(--t-2xs);
  font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-ink);
  border-bottom:1px solid var(--brass);padding-bottom:3px;
}
.crafts .go:lang(th){text-transform:none;letter-spacing:.02em;font-size:var(--t-sm);}
a.row:hover h3{color:var(--brass-ink);}
a.row:hover .ord{color:var(--brass-ink);}
.crafts .cfig{margin:0;position:relative;overflow:hidden;background:var(--paper3);min-height:100%;}
.crafts .cfig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%;}
@media (max-width:900px){
  .crafts{grid-template-columns:1fr;}
  .crafts .clist{padding-right:0;}
  .crafts .cfig{order:-1;aspect-ratio:3/2;min-height:0;margin-bottom:34px;}
  .crafts .cfig img{position:static;height:100%;}
}

/* ==========================================================================
   5 · แถวภาพสี่ใบพร้อมชื่อ — สไลด์ 5
   ไม่มีกรอบ ไม่มีพื้นหลัง ไม่มีเงา — ภาพ ชื่อ จบ
   ========================================================================== */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.25rem,2.2vw,2rem) clamp(1rem,1.8vw,1.75rem);}
.grid4 figure{margin:0;}
.grid4 .im{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--paper3);}
.grid4 img{width:100%;height:100%;object-fit:cover;object-position:center 38%;
  transition:transform var(--d-slow) var(--ease);}
@media (hover:hover){ .grid4 figure:hover img{transform:scale(1.035);} }
.grid4 img.up{object-position:center 24%;}
.grid4 figcaption{margin-top:14px;font-size:var(--t-sm);color:var(--ink);}
.grid4 figcaption small{display:block;color:var(--muted);font-size:var(--t-xs);margin-top:2px;}
/* ป้ายมุมบนซ้ายทับภาพ — กล่องขาวตัวอักษรทอง เหมือน NEW / ONE ONLY ใน deck */
.chip{
  position:absolute;top:14px;left:14px;background:var(--paper);color:var(--brass-ink);
  font-family:var(--sans);font-size:var(--t-2xs);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;padding:6px 12px;
}
.chip:lang(th){text-transform:none;letter-spacing:.02em;font-size:var(--t-xs);}
@media (max-width:900px){ .grid4{grid-template-columns:repeat(2,1fr);} }

/* ==========================================================================
   6 · หน้าคู่ ภาพครึ่ง–ข้อความครึ่ง — สไลด์ 7
   ========================================================================== */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;}
.split .sfig{margin:0;position:relative;overflow:hidden;background:var(--paper3);min-height:clamp(24rem,58vh,40rem);}
.split .sfig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;}
.split .stext{
  background:var(--paper2);display:flex;flex-direction:column;justify-content:center;
  padding:clamp(2.5rem,6vw,5.5rem) clamp(1.5rem,5vw,5rem);
}
.split .stext .inner{max-width:34rem;}
.split h2{margin:0 0 26px;font-size:clamp(1.75rem,1.1rem + 2.7vw,3rem);line-height:1.14;}
.split h2:lang(th){font-size:clamp(1.5rem,1.05rem + 1.9vw,2.25rem);}
/* เส้นทองสั้นใต้พาดหัว — จังหวะเดียวกับสไลด์ 7 */
.split .hair{width:44px;border:0;border-top:1px solid var(--brass);margin:0 0 26px;}
.split p{margin:0 0 22px;color:var(--ink2);font-size:var(--t-lg);max-width:44ch;}
.split .who{
  font-family:var(--sans);font-size:var(--t-xs);font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass-ink);
}
.split .who:lang(th){text-transform:none;letter-spacing:.02em;font-size:var(--t-sm);}
@media (max-width:900px){
  .split{grid-template-columns:1fr;}
  .split .sfig{min-height:0;aspect-ratio:3/2;}
}

/* ==========================================================================
   7 · แถบปิดท้ายบนภาพเต็มจอ — สไลด์ 9
   ========================================================================== */
.band-photo{
  position:relative;isolation:isolate;overflow:hidden;background:var(--onyx);color:var(--paper);
  min-height:clamp(26rem,66vh,42rem);display:flex;align-items:center;
}
.band-photo > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 58%;z-index:-2;}
/* ฉากรองไล่จากซ้าย — ข้อความอยู่ครึ่งซ้าย ภาพเปิดโล่งทางขวา เหมือนสไลด์ 9 */
.band-photo::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(16,14,13,.88) 0%,rgba(16,14,13,.74) 42%,rgba(16,14,13,.34) 100%);
}
.band-photo .inner{
  width:100%;max-width:var(--measure-wide);margin:0 auto;padding:clamp(3rem,8vh,5rem) var(--gutter);
}
.band-photo .eyebrow{color:var(--brass-light);}
.band-photo h2{margin:0 0 22px;font-size:clamp(1.875rem,1.15rem + 3vw,3.25rem);
  line-height:1.12;max-width:18ch;color:#fff;}
.band-photo h2:lang(th){font-size:clamp(1.5rem,1.1rem + 2vw,2.5rem);line-height:1.3;max-width:22ch;}
.band-photo p{margin:0 0 34px;max-width:46ch;color:#D6D0C8;font-size:var(--t-lg);}
.band-photo .btn-line{background:var(--paper);color:var(--ink) !important;border-color:var(--paper);}
.band-photo .btn-line:hover{background:var(--brass-light);border-color:var(--brass-light);color:var(--onyx) !important;}
/* บรรทัดกำกับล่างสุดคั่นด้วยเส้นบาง — เหมือนแถบล่างของสไลด์ 9 */
.band-photo .meta{
  margin-top:clamp(2.5rem,7vh,4rem);padding-top:20px;border-top:1px solid rgba(255,255,255,.26);
  font-family:var(--sans);font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.band-photo .meta:lang(th){text-transform:none;letter-spacing:.03em;font-size:var(--t-sm);}
@media (max-width:700px){
  .band-photo::after{background:linear-gradient(180deg,rgba(16,14,13,.62) 0%,rgba(16,14,13,.88) 55%);}
}

/* ==========================================================================
   8 · แถบวิ่งปิดหน้า — สไลด์ 10
   ข้อความทุกชิ้นต้องเป็นเรื่องที่ยืนยันแล้ว เพราะมันวิ่งซ้ำทั้งวัน
   ========================================================================== */
.ticker{
  background:var(--onyx);color:rgba(255,255,255,.80);overflow:hidden;
  padding:0;position:relative;
}
.ticker .track{display:flex;width:max-content;animation:tick 44s linear infinite;}
.ticker ul{
  display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0;
  font-family:var(--sans);font-size:var(--t-xs);letter-spacing:.22em;text-transform:uppercase;
}
.ticker li{padding:20px 0;white-space:nowrap;}
.ticker li::after{content:"·";display:inline-block;padding:0 34px;color:var(--brass-light);}
.ticker ul:lang(th){text-transform:none;letter-spacing:.03em;font-size:var(--t-sm);}
@keyframes tick{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (hover:hover){ .ticker:hover .track{animation-play-state:paused;} }
@media (prefers-reduced-motion:reduce){
  .ticker .track{animation:none;}
  .ticker{padding-left:var(--gutter);padding-right:var(--gutter);}
}

/* ==========================================================================
   ปรับหน้าราคาให้เข้าชุด — deck ไม่มีกล่องมีขอบ ใช้เส้นคั่นแทน
   ========================================================================== */
.rk .subbrands .bn{font-family:var(--display);}

.rk .pcard{border:0;border-top:1px solid var(--line);border-radius:0;padding:36px 0 34px;background:none;}
.rk .pcard.feature{border-top:2px solid var(--ink);}
.rk .pcard .tag{position:static;display:inline-block;margin-bottom:16px;background:none;
  color:var(--brass-ink);padding:0;letter-spacing:.2em;}
.rk .pcard h3{font-size:var(--t-xl);}
.rk .pcard .price{font-family:var(--display);font-size:var(--t-4xl);}
/* ฿ ไม่มีใน Bodoni จึงตกไปใช้ Trirong — ที่ .4em สีจาง เส้นตั้งของ ฿ หายไปจนอ่านเป็น "B"
   ขยายและเพิ่มน้ำหนักสีให้เส้นกลับมา ราคาคือข้อความที่พลาดไม่ได้ที่สุดในหน้านี้ */
.rk .pcard .price small{font-size:.46em;color:var(--ink2);}
.rk .cards{gap:0 clamp(1.5rem,3.4vw,3.5rem);}