/*
Theme Name: QRAFT OF
Theme URI: https://qraftof.com
Author: KANT 1980 Co., Ltd.
Description: ธีมสำหรับ QRAFT OF — ฝีมือของการอยู่ · Colour Identity v3.2 "ครั่ง LAC" · Kanit (หัวข้อ) + Google Sans (เนื้อความ) · โครงศึกษาจาก themodernhouse.com
Version: 1.3.1
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: qraft-of
Tags: blog, editorial, block-theme, full-site-editing, one-column
*/

/* ============================================================
   QRAFT OF — The Quiet Journal v2.1 (WordPress block theme)
   Kanit (display) · Google Sans (body — ไทยและละติน)
   Colour Identity v3.2 "ครั่ง LAC"
   Primary: Rak Lacquer #3E2A1E · Signature: Lac #9A5236
   กติกา: บนพื้น Rak ให้ใช้ Ember #D08F62 แทน Lac เสมอ
   ============================================================ */

:root{
  /* ── ครั่ง LAC · 10 สี ─────────────────────────── */
  --lime:#FAF7F0;        /* ปูนหมัก      Slaked Lime  */
  --cotton:#F4EFE5;      /* ฝ้ายดิบ       Raw Cotton   */
  --husk:#EDE1CC;        /* แกลบ         Husk         */
  --greenware:#DDD2BF;   /* ดินดิบ        Greenware    */
  --bisque:#A99A80;      /* ดินเผาชั้นแรก  Bisque       */
  --smoke:#6E6351;       /* ควันไฟ        Fire Smoke   */
  --lac:#9A5236;         /* ครั่ง         Lac · SIGNATURE */
  --ember:#D08F62;       /* ถ่านแดง       Ember        */
  --rak:#3E2A1E;         /* ยางรัก        Rak · PRIMARY */
  --sealed:#191510;      /* ดำยางรัก      Sealed Black */

  /* ── บทบาทในหน้าเว็บ ──────────────────────────── */
  --paper:var(--cotton);
  --ink:var(--sealed);
  --soft:var(--smoke);
  --faint:var(--bisque);
  --line:var(--greenware);
  --accent:var(--lac);
  --frame-deep:var(--rak);
  --surface-dark:var(--rak);
  --on-dark:var(--ember);
  --edge:#5A4230;
  --gutter:clamp(20px,2.5vw,40px);

  --font-display:'Kanit',sans-serif;
  --font-body:'Google Sans','Google Sans Text','Kanit',system-ui,-apple-system,sans-serif;
}

/* ---------- base ---------- */
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
.k,.qo-display{font-family:var(--font-display);}

.wp-site-blocks > *{margin-block-start:0;}

/* ---------- masthead : three zones, wordmark centred ---------- */
.qo-head{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
}
.admin-bar .qo-head{top:32px;}
.qo-head .qo-bar{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  min-height:64px;padding:0 var(--gutter);gap:16px;
}
.qo-head .qo-nav ul,
.qo-filter ul,
.qo-foot nav ul{list-style:none;margin:0;padding:0;}
.qo-head .qo-nav ul{display:flex;gap:26px;}
.qo-head .qo-nav.right ul{justify-content:flex-end;}
.qo-head .qo-nav p{margin:0;display:flex;gap:26px;}
.qo-head .qo-nav.right p{justify-content:flex-end;}
.qo-head .qo-nav a{
  font-family:var(--font-display);font-weight:500;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  padding-bottom:2px;border-bottom:1px solid transparent;
}
.qo-head .qo-nav a:hover,
.qo-head .qo-nav .current-menu-item a{border-color:var(--ink);}

.qo-wordmark a,.qo-wordmark{
  font-family:var(--font-display);font-weight:600;font-size:19px;
  letter-spacing:.3em;text-transform:uppercase;white-space:nowrap;padding-left:.3em;
  color:var(--ink);
}
.qo-wordmark .q{color:var(--accent);}

/* page title under masthead */
.qo-page-title .q{color:var(--accent);}
.qo-label .q{color:var(--accent);}
.qo-page-title{
  text-align:center;
  font-family:var(--font-display);font-weight:500;font-size:26px;
  text-transform:uppercase;letter-spacing:.08em;
  padding:clamp(30px,4vw,48px) 0 clamp(14px,1.8vw,20px);margin:0;
}

/* คำบรรยายใต้ชื่อคอลัมน์ */
.qo-page-intro{
  text-align:center;max-width:56ch;margin:0 auto;
  padding:0 var(--gutter) clamp(26px,3.4vw,42px);
  font-size:15.5px;line-height:1.8;color:var(--soft);
}
.qo-page-intro p{margin:0;}

/* ---------- category filter bar ---------- */
.qo-filter{border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.qo-filter .qo-inner{
  display:flex;align-items:center;justify-content:center;gap:28px;
  padding:0 var(--gutter);min-height:46px;overflow-x:auto;
}
.qo-filter p{margin:0;display:flex;gap:28px;white-space:nowrap;}
.qo-filter a{
  font-family:var(--font-display);font-weight:500;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);
  white-space:nowrap;padding:4px 0 2px;border-bottom:1px solid transparent;
}
.qo-filter a:hover{color:var(--ink);}
.qo-filter .current-menu-item a{color:var(--ink);border-color:var(--ink);}

/* ---------- tag / button primitives ---------- */
.qo-tag,
.qo-grid .wp-block-post-terms a{
  font-family:var(--font-display);font-weight:500;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  padding-bottom:3px;border-bottom:1px solid var(--accent);
  display:inline-block;color:var(--soft);
}
.qo-btn,
.wp-block-button.is-style-qo .wp-block-button__link{
  display:inline-block;
  font-family:var(--font-display);font-weight:500;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid currentColor;padding:14px 34px;border-radius:999px;
  background:transparent;color:var(--ink);transition:background .25s,color .25s,border-color .25s;
}
.qo-btn:hover,.qo-btn:focus-visible,.qo-btn:active,
.wp-block-button.is-style-qo .wp-block-button__link:hover,
.wp-block-button.is-style-qo .wp-block-button__link:focus-visible,
.wp-block-button.is-style-qo .wp-block-button__link:active,
.qo-readmore:hover,.qo-readmore:focus-visible,.qo-readmore:active{
  background:var(--lac);border-color:var(--lac);color:var(--cotton);
}
.qo-on-dark .qo-btn,
.qo-on-dark .wp-block-button.is-style-qo .wp-block-button__link,
.qo-on-dark .qo-readmore{color:#fff;}
.qo-on-dark .qo-btn:hover,
.qo-on-dark .qo-btn:active,
.qo-on-dark .wp-block-button.is-style-qo .wp-block-button__link:hover,
.qo-on-dark .wp-block-button.is-style-qo .wp-block-button__link:active,
.qo-on-dark .qo-readmore:hover,
.qo-on-dark .qo-readmore:active{background:var(--lac);border-color:var(--lac);color:var(--cotton);}

/* ปุ่ม Read more ในลูป — ใช้หน้าตาเดียวกับปุ่มเส้นบาง */
.qo-readmore{
  display:inline-block;
  font-family:var(--font-display);font-weight:500;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid currentColor;padding:14px 34px;border-radius:999px;
  background:transparent;color:var(--ink);text-decoration:none;
  transition:background .25s,color .25s,border-color .25s;
}
.qo-hero .qo-readmore{margin-top:4px;}

/* ---------- full-bleed photo hero ---------- */
.qo-hero{
  position:relative;min-height:78vh;
  display:flex;align-items:flex-end;justify-content:center;
  background:var(--rak);
}
.qo-hero .wp-block-cover__image-background{object-fit:cover;}
.qo-hero .wp-block-cover__inner-container{
  position:relative;z-index:2;text-align:center;color:#fff;
  padding:0 var(--gutter) clamp(56px,9vh,96px);max-width:900px;
}
.qo-hero h1,.qo-hero h2{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(24px,3vw,38px);line-height:1.3;letter-spacing:0;
  margin:20px auto 26px;max-width:30ch;color:#fff;
}
.qo-hero .qo-tag{color:#fff;border-color:#fff;}

/* ---------- ปกเปิดแบบสลับฉาก ---------- */
.qo-hero-live{
  position:relative;min-height:82vh;overflow:hidden;
  display:flex;align-items:flex-end;background:var(--rak);
}
.qo-scenes,.qo-scene{position:absolute;inset:0;}
.qo-scene{
  width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity 1.4s ease;
  animation:qo-kenburns 18s ease-in-out infinite alternate;
}
.qo-scene.is-on{opacity:1;}
@keyframes qo-kenburns{from{transform:scale(1);}to{transform:scale(1.06);}}
.qo-hero-live::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(25,21,16,.66),rgba(25,21,16,.06) 62%);
}
.qo-hero-copy{
  position:relative;z-index:3;color:#fff;
  padding:0 var(--gutter) clamp(46px,7vh,76px);
  max-width:760px;margin-right:auto;
}
.qo-daylight{
  font-family:var(--font-display);font-weight:400;
  font-size:13px;letter-spacing:.08em;color:var(--greenware);
  margin:0 0 16px;min-height:1.2em;
}
.qo-hero-copy .qo-tag{
  display:inline-block;margin:0 0 16px;
  font-family:var(--font-display);font-weight:500;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--husk);border-bottom:1px solid var(--on-dark);padding-bottom:3px;
}
.qo-hero-title{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(24px,2.9vw,38px);line-height:1.3;
  margin:0 0 26px;max-width:24ch;color:#fff;
}
.qo-hero-title a{color:#fff;}
.qo-hero-title a:hover{color:var(--on-dark);}
.qo-hero-index{
  position:absolute;right:var(--gutter);bottom:clamp(46px,7vh,76px);
  z-index:3;display:flex;flex-direction:column;gap:12px;
  max-width:300px;text-align:right;
}
.qo-hx-label{
  font-family:var(--font-display);font-weight:500;
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:#C4B6A4;
  margin:0 0 4px;
}
.qo-hx-label .q{color:var(--on-dark);}
.qo-hx{
  font-family:var(--font-display);font-weight:500;
  font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.55);
  transition:color .3s;
}
.qo-hx:hover,.qo-hx.is-on{color:#fff;}
.qo-hx.is-on{
  text-decoration:underline;text-underline-offset:5px;
  text-decoration-thickness:1px;text-decoration-color:var(--on-dark);
}

/* โทนกระดาษขยับตามเวลาของคนอ่าน */
body.t-morning{--paper:#FAF7F0;}
body.t-noon{--paper:#F4EFE5;}
body.t-evening{--paper:#F1EADC;}
body.t-night{--paper:#EDE5D6;}

/* ---------- journal grid ---------- */
.qo-journal{padding:clamp(36px,5vw,64px) var(--gutter);}
.qo-grid.wp-block-post-template{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(40px,4vw,64px) clamp(22px,2vw,30px);
}
.qo-grid > li{margin:0;}
.qo-grid .wp-block-post-featured-image{aspect-ratio:3/2;overflow:hidden;background:var(--greenware);margin:0;}
.qo-grid .wp-block-post-featured-image img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease;}
.qo-grid > li:hover .wp-block-post-featured-image img{transform:scale(1.025);}
.qo-grid .wp-block-post-terms{margin:18px 0 12px;display:flex;gap:14px;flex-wrap:wrap;}
.qo-grid .wp-block-post-terms a{text-decoration:none;}
.qo-grid > li:hover .wp-block-post-terms a{color:var(--frame-deep);}
.qo-grid .wp-block-post-title{
  font-family:var(--font-display);font-weight:600;
  font-size:21px;line-height:1.4;letter-spacing:0;max-width:30ch;margin:0;
}
.qo-grid .wp-block-post-date{
  font-family:var(--font-display);font-weight:400;
  font-size:12.5px;color:var(--soft);margin-top:10px;letter-spacing:.03em;
}
.qo-grid .wp-block-post-excerpt{font-size:14px;color:var(--soft);margin-top:8px;max-width:42ch;}
.qo-grid .wp-block-post-excerpt__more-text{display:none;}

/* ============================================================
   หน้าแรก — ท่าจัดหน้าแยกตามคอลัมน์
   Stay · Address · Portraits มีท่าเฉพาะตัว
   Shelter · Lessons · Objects · Table หมุนอยู่ในท่ากลาง
   ============================================================ */

/* หัวท่อนแบบเส้นคาด — ป้ายซ้าย ลิงก์ขวา */
.qo-rule-head{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  border-bottom:1px solid var(--line);
  padding-bottom:14px;margin-bottom:clamp(26px,3.5vw,42px);
}
.qo-rule-head p{margin:0;}
.qo-more a{
  display:inline-block;
  font-family:var(--font-display);font-weight:500;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--soft);
  border:1px solid var(--faint);border-radius:999px;padding:8px 20px;
  transition:background .25s,color .25s,border-color .25s;
}
.qo-more a:hover,.qo-more a:focus-visible,.qo-more a:active{
  background:var(--lac);border-color:var(--lac);color:var(--cotton);
}

/* ── เรื่องล่าสุด : หนึ่งเรื่องนำ สี่บรรทัดข้าง ── */
.qo-lead-split{
  display:grid;grid-template-columns:1.4fr 1fr;
  gap:clamp(28px,3.5vw,64px);align-items:start;
}
.qo-lead-main.wp-block-post-template{display:block;}
.qo-lead-main > li{margin:0;}
.qo-lead-main .wp-block-post-featured-image{aspect-ratio:4/3;overflow:hidden;background:var(--greenware);margin:0;}
.qo-lead-main .wp-block-post-featured-image img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease;}
.qo-lead-main > li:hover .wp-block-post-featured-image img{transform:scale(1.025);}
.qo-lead-main .wp-block-post-terms{
  margin:20px 0 12px;font-family:var(--font-display);font-weight:500;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);
}
.qo-lead-main .wp-block-post-title{
  font-size:clamp(22px,2.4vw,30px);line-height:1.35;margin:0;max-width:26ch;
}
.qo-lead-main .wp-block-post-excerpt{font-size:15px;color:var(--soft);margin-top:12px;max-width:48ch;}
.qo-lead-main .wp-block-post-excerpt__more-text{display:none;}
.qo-lead-main .wp-block-post-date{
  font-family:var(--font-display);font-size:12.5px;color:var(--faint);margin-top:12px;
}

.qo-rows.wp-block-post-template{display:block;}
.qo-rows > li{margin:0;padding:18px 0;border-bottom:1px solid var(--line);}
.qo-rows > li:first-child{padding-top:0;}
.qo-rows > li:last-child{border-bottom:none;}
.qo-rows .wp-block-post-terms{
  font-family:var(--font-display);font-weight:500;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin:0 0 7px;
}
.qo-rows .wp-block-post-title{font-size:17px;line-height:1.45;margin:0;}
.qo-rows > li:hover .wp-block-post-title a{color:var(--accent);}
.qo-rows .wp-block-post-date{
  font-family:var(--font-display);font-size:11.5px;color:var(--faint);margin-top:7px;
}

/* ── ท่าเฉพาะ Stay และ Portraits : ครึ่งภาพ ครึ่งพื้นรัก ── */
.qo-feature.wp-block-post-template{display:block;}
.qo-feature > li{
  margin:0;display:grid;grid-template-columns:1.15fr 1fr;
  background:var(--surface-dark);align-items:stretch;
}
.qo-feature .qo-feature-photo{margin:0;height:100%;overflow:hidden;background:var(--rak);}
.qo-feature .qo-feature-photo img{width:100%;height:100%;min-height:clamp(320px,46vw,560px);object-fit:cover;}
.qo-feature-copy{
  align-self:center;padding:clamp(40px,5.5vw,88px) clamp(28px,4.5vw,72px);
}
.qo-feature-copy .qo-label{color:var(--on-dark);margin:0 0 18px;}
.qo-feature-copy .wp-block-post-title{
  font-size:clamp(23px,2.7vw,34px);line-height:1.32;margin:0;max-width:22ch;color:var(--cotton);
}
.qo-feature-copy .wp-block-post-title a{color:var(--cotton);}
.qo-feature-copy .wp-block-post-title a:hover{color:var(--on-dark);}
.qo-feature-copy .wp-block-post-excerpt{
  font-size:15px;line-height:1.8;color:#C4B6A4;margin-top:18px;max-width:44ch;
}
.qo-feature-copy .wp-block-post-excerpt__more-text{display:none;}
.qo-feature-copy .qo-more{margin-top:26px;}
.qo-feature-copy .qo-more a{color:#C4B6A4;border-color:var(--on-dark);}
.qo-feature-copy .qo-more a:hover{color:var(--on-dark);}
.qo-feature-portrait > li{grid-template-columns:1fr 1.15fr;}

/* ── Shelter : สองใบ กว้างไม่เท่ากัน สูงเท่ากัน ชิดบรรทัดเดียวกัน ── */
.qo-pair.wp-block-post-template{
  display:grid;grid-template-columns:2fr 1fr;gap:clamp(26px,3vw,52px);align-items:start;
}
.qo-pair > li{margin:0;}
.qo-pair .wp-block-post-featured-image{
  height:clamp(320px,38vw,560px);overflow:hidden;background:var(--greenware);margin:0;
}
.qo-pair .wp-block-post-featured-image img{
  width:100%;height:100%;object-fit:cover;transition:transform .8s ease;
}
.qo-pair > li:hover .wp-block-post-featured-image img{transform:scale(1.025);}
.qo-pair .wp-block-post-terms{
  margin:18px 0 10px;font-family:var(--font-display);font-weight:500;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);
}
.qo-pair .wp-block-post-title{font-size:20px;line-height:1.42;margin:0;max-width:28ch;}
.qo-pair > li:hover .wp-block-post-title a{color:var(--accent);}

/* ── Address : สองใบใหญ่ เท่ากัน ── */
.qo-duo.wp-block-post-template{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3vw,52px);align-items:start;
}
.qo-duo > li{margin:0;}
.qo-duo .wp-block-post-featured-image{overflow:hidden;background:var(--greenware);margin:0;}
.qo-duo .wp-block-post-featured-image img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease;}
.qo-duo > li:hover .wp-block-post-featured-image img{transform:scale(1.025);}
.qo-duo .wp-block-post-featured-image{aspect-ratio:3/2;}
.qo-duo .wp-block-post-terms{
  margin:18px 0 10px;font-family:var(--font-display);font-weight:500;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);
}
.qo-duo .wp-block-post-title{font-size:20px;line-height:1.42;margin:0;max-width:28ch;}
/* การ์ดที่ไม่มีป้ายคอลัมน์คั่น หัวเรื่องต้องมีระยะหายใจจากขอบรูป */
.qo-duo .wp-block-post-featured-image + .wp-block-post-title{margin-top:clamp(18px,2vw,26px);}
.qo-duo .wp-block-post-date{
  font-family:var(--font-display);font-size:12.5px;color:var(--faint);margin-top:10px;letter-spacing:.03em;
}
.qo-duo .wp-block-post-excerpt{font-size:14px;color:var(--soft);margin-top:10px;max-width:44ch;}
.qo-duo .wp-block-post-excerpt__more-text{display:none;}

/* ── Lessons : การ์ดสี่ใบ เท่ากัน ── */
.qo-quad.wp-block-post-template{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.2vw,32px);align-items:start;
}
.qo-quad > li{margin:0;}
.qo-quad .wp-block-post-featured-image{aspect-ratio:3/2;overflow:hidden;background:var(--greenware);margin:0;}
.qo-quad .wp-block-post-featured-image img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease;}
.qo-quad > li:hover .wp-block-post-featured-image img{transform:scale(1.025);}
.qo-quad .wp-block-post-date{
  font-family:var(--font-display);font-size:11.5px;letter-spacing:.04em;color:var(--faint);margin:14px 0 6px;
}
.qo-quad .wp-block-post-title{font-size:16.5px;font-weight:500;line-height:1.45;margin:0;max-width:26ch;}
.qo-quad > li:hover .wp-block-post-title a{color:var(--accent);}

/* ── Lessons (สำรอง) : ตัวหนังสือล้วน ── */
.qo-textlist.wp-block-post-template{display:block;}
.qo-textlist > li{
  margin:0;display:grid;grid-template-columns:clamp(180px,17vw,260px) 120px 1fr;
  gap:clamp(20px,2.4vw,36px);
  align-items:center;padding:clamp(18px,2.2vw,28px) 0;
  border-bottom:1px solid var(--line);
}
.qo-textlist .wp-block-post-featured-image{
  aspect-ratio:3/2;width:100%;overflow:hidden;background:var(--greenware);margin:0;
}
.qo-textlist .wp-block-post-featured-image img{
  width:100%;height:100%;object-fit:cover;transition:transform .8s ease;
}
.qo-textlist > li:hover .wp-block-post-featured-image img{transform:scale(1.04);}
.qo-textlist > li:last-child{border-bottom:none;}
.qo-textlist .wp-block-post-date{
  font-family:var(--font-display);font-size:12px;letter-spacing:.04em;color:var(--faint);margin:0;
}
.qo-textlist .wp-block-post-title{
  font-size:clamp(18px,2vw,25px);font-weight:500;line-height:1.42;margin:0;
}
.qo-textlist > li:hover .wp-block-post-title a{color:var(--accent);}

/* ── Address : ลิสต์ล่าง สองคอลัมน์ ฝั่งละสอง ── */
.qo-minirows.wp-block-post-template{
  display:grid;grid-template-columns:1fr 1fr;
  gap:0 clamp(26px,3vw,52px);margin-top:clamp(28px,3.4vw,46px);
}
.qo-minirows > li{
  margin:0;display:grid;grid-template-columns:clamp(110px,10vw,140px) 1fr;gap:18px;align-items:center;
  padding:clamp(14px,1.7vw,20px) 0;border-top:1px solid var(--line);
}
.qo-minirows .wp-block-post-featured-image{
  aspect-ratio:3/2;width:100%;overflow:hidden;background:var(--greenware);margin:0;
}
.qo-minirows .wp-block-post-featured-image img{
  width:100%;height:100%;object-fit:cover;transition:transform .8s ease;
}
.qo-minirows > li:hover .wp-block-post-featured-image img{transform:scale(1.04);}
.qo-minirows .wp-block-post-title{
  font-family:var(--font-display);font-weight:500;
  font-size:14.5px;line-height:1.45;margin:0;max-width:32ch;
}
.qo-minirows > li:hover .wp-block-post-title a{color:var(--accent);}

/* ── Address (ภาพใหญ่ใช้ท่า .qo-duo ร่วมกับ Shelter) ── */
.qo-offset3.wp-block-post-template{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,36px);align-items:start;
}
.qo-offset3 > li{margin:0;}
.qo-offset3 .wp-block-post-featured-image{aspect-ratio:3/4;overflow:hidden;background:var(--greenware);margin:0;}
.qo-offset3 .wp-block-post-featured-image img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease;}
.qo-offset3 > li:hover .wp-block-post-featured-image img{transform:scale(1.025);}
.qo-offset3 .wp-block-post-title{font-size:18px;line-height:1.45;margin:18px 0 0;max-width:26ch;}
.qo-offset3 .wp-block-post-date{
  font-family:var(--font-display);font-size:12px;color:var(--faint);margin-top:9px;
}

/* ── Objects : ของชิ้นเดียว กลางหน้า ── */
.qo-object.wp-block-post-template{display:block;}
.qo-object > li{
  margin:0;max-width:560px;margin-inline:auto;text-align:center;
  padding:clamp(56px,8vw,110px) var(--gutter);
}
.qo-object .qo-label{margin:0 0 22px;}
.qo-object .wp-block-post-title{
  font-size:clamp(21px,2.5vw,31px);line-height:1.38;margin:0 0 clamp(28px,3.5vw,44px);
}
.qo-object .wp-block-post-featured-image{
  aspect-ratio:4/5;max-width:400px;margin:0 auto;overflow:hidden;background:var(--greenware);
}
.qo-object .wp-block-post-featured-image img{width:100%;height:100%;object-fit:cover;}
.qo-object .wp-block-post-date{
  font-family:var(--font-display);font-size:12px;color:var(--faint);margin-top:16px;
}

/* ── Objects : สามชิ้น เท่ากัน ── */
.qo-object3.wp-block-post-template{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,36px);align-items:start;
}
.qo-object3 > li{margin:0;}
.qo-object3 .wp-block-post-featured-image{aspect-ratio:3/4;overflow:hidden;background:var(--greenware);margin:0;}
.qo-object3 .wp-block-post-featured-image img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease;}
.qo-object3 > li:hover .wp-block-post-featured-image img{transform:scale(1.025);}
.qo-object3 .wp-block-post-title{font-size:18px;line-height:1.45;margin:18px 0 0;max-width:26ch;}
.qo-object3 > li:hover .wp-block-post-title a{color:var(--accent);}
.qo-object3 .wp-block-post-date{
  font-family:var(--font-display);font-size:12px;color:var(--faint);margin-top:10px;
}

/* ── Table : แถบเล็ก แน่น ── */
.qo-strip.wp-block-post-template{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px);
}
.qo-strip > li{margin:0;}
.qo-strip .wp-block-post-featured-image{aspect-ratio:3/2;overflow:hidden;background:var(--greenware);margin:0;}
.qo-strip .wp-block-post-featured-image img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease;}
.qo-strip > li:hover .wp-block-post-featured-image img{transform:scale(1.03);}
.qo-strip .wp-block-post-title{font-size:14.5px;line-height:1.45;margin:12px 0 0;}

/* ---------- centred section label + view-all ---------- */
.qo-band{padding:clamp(44px,5vw,72px) var(--gutter) 0;position:relative;}
.qo-band-quiet{padding-top:clamp(64px,8vw,110px);}
.qo-band-strip{padding-bottom:clamp(20px,3vw,40px);}
.qo-band-head{padding-bottom:0;}
.qo-band-head .qo-rule-head{margin-bottom:clamp(18px,2.4vw,30px);}
/* แถบสุดท้ายก่อนฟุตเตอร์ ต้องมีที่ว่างด้านล่าง ไม่ให้วันที่ชนขอบดำ */
main > .qo-band:last-child{padding-bottom:clamp(72px,9vw,128px);}
.qo-band .qo-label-row{position:relative;text-align:center;margin-bottom:clamp(30px,4vw,44px);}
/* ป้ายหัวท่อนแบบวงรี ใช้เส้นขอบชุดเดียวกับปุ่ม qo-more */
.qo-band .qo-label-row .qo-pill{display:inline-block;border:1px solid var(--faint);border-radius:999px;padding:9px 24px;}
.qo-label{
  font-family:var(--font-display);font-weight:500;
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--soft);
  margin:0;
}
.qo-center-btn{text-align:center;padding:clamp(30px,4vw,44px) 0 0;}

/* ---------- quote band on photo ---------- */
.qo-quote{position:relative;min-height:52vh;display:flex;align-items:center;justify-content:center;margin-top:clamp(48px,6vw,80px);}
.qo-quote .wp-block-cover__inner-container{position:relative;z-index:2;text-align:center;color:#fff;max-width:860px;padding:60px var(--gutter);}
.qo-quote p{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(19px,2.5vw,27px);line-height:1.6;color:#fff;
}

/* ---------- Lessons panel : เรื่องเดียว สามคอลัมน์ พื้นครั่ง ---------- */
.qo-lesson-panel.wp-block-post-template{display:block;}
.qo-lesson-panel > li{
  margin:0;display:grid;
  grid-template-columns:0.95fr 1fr clamp(380px,40vw,720px);
  align-items:stretch;background:var(--lac);
}
.qo-lesson-panel .wp-block-post-title{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(24px,3vw,38px);line-height:1.28;margin:0;max-width:18ch;
  align-self:center;color:var(--cotton);
  padding:clamp(44px,5.5vw,80px) clamp(30px,3.4vw,56px) clamp(44px,5.5vw,80px) clamp(34px,5vw,96px);
}
.qo-lesson-panel .wp-block-post-title a{color:var(--cotton);}
.qo-lesson-panel .wp-block-post-title a:hover{color:var(--husk);}
.qo-lesson-panel .wp-block-post-excerpt{
  align-self:center;color:var(--husk);
  border-left:1px solid rgba(244,239,229,.34);
  padding:clamp(44px,5.5vw,80px) clamp(30px,3.4vw,56px);
}
.qo-lesson-panel .wp-block-post-excerpt p{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(16px,1.8vw,21px);line-height:1.8;margin:0;max-width:32ch;
}
.qo-lesson-panel .wp-block-post-excerpt__more-text{display:none;}
.qo-lesson-panel .wp-block-post-featured-image{
  margin:0;aspect-ratio:4/3;align-self:center;overflow:hidden;background:var(--rak);
  border-left:1px solid rgba(244,239,229,.34);
}
.qo-lesson-panel .wp-block-post-featured-image img{
  width:100%;height:100%;object-fit:cover;display:block;
}

/* ---------- single article ---------- */
.qo-article-hero{position:relative;min-height:64vh;background:var(--greenware);margin:0;}
.qo-article-hero img{width:100%;height:100%;object-fit:cover;}
.qo-article-head{text-align:center;max-width:760px;margin:0 auto;padding:clamp(40px,6vw,64px) var(--gutter) 0;}
.qo-article-head .wp-block-post-terms a{
  font-family:var(--font-display);font-weight:500;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--soft);
  border-bottom:1px solid var(--accent);padding-bottom:3px;
}
.qo-article-head .wp-block-post-title{
  text-align:left;
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(30px,4.4vw,48px);line-height:1.2;margin:20px 0 16px;
}
.qo-article-head .wp-block-post-excerpt{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(17px,2.2vw,21px);color:var(--soft);line-height:1.65;
}
.qo-article-head .wp-block-post-date{
  font-family:var(--font-display);font-weight:400;font-size:12.5px;
  letter-spacing:.06em;color:var(--faint);margin-top:22px;
}
.qo-article-body{max-width:680px;margin:0 auto;padding:clamp(36px,5vw,56px) var(--gutter) clamp(48px,6vw,72px);}
.qo-article-body p{margin-bottom:1.6em;font-weight:400;font-size:16.5px;line-height:1.85;}
.qo-article-body h2{
  font-family:var(--font-display);font-weight:600;font-size:22px;
  margin:2.4em 0 1em;text-align:left;
}
.qo-article-body h3{
  font-family:var(--font-display);font-weight:600;font-size:18px;margin:2em 0 .8em;
}
.qo-article-body blockquote{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(19px,2.4vw,23px);line-height:1.6;color:var(--frame-deep);
  text-align:left;margin:2.4em 0;padding:0 0 0 24px;border:none;
  border-left:1px solid var(--accent);
}
.qo-article-body figure{margin:2.4em calc(-1*clamp(0px,6vw,120px));}
.qo-article-body figure img{width:100%;aspect-ratio:16/10;object-fit:cover;}
.qo-article-body figcaption{
  font-family:var(--font-display);font-weight:400;font-size:12.5px;
  color:var(--faint);text-align:left;margin-top:10px;padding:0;
}

/* ---------- prose / about ---------- */
.qo-prose{max-width:640px;margin:0 auto;padding:0 var(--gutter);}
.qo-prose p{font-size:16.5px;line-height:1.85;margin-bottom:1.6em;}

/* ---------- footer ---------- */
.qo-foot{background:var(--sealed);color:#C4B6A4;margin-top:0;}
.qo-foot .qo-foot-inner{
  display:grid;grid-template-columns:1.1fr 1.1fr 1.4fr;gap:clamp(32px,5vw,80px);
  padding:clamp(48px,6vw,72px) var(--gutter) clamp(36px,5vw,56px);
}
.qo-foot .qo-col-label{
  font-family:var(--font-display);font-weight:500;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#A99A80;
  margin:0 0 18px;
}
.qo-foot nav ul{display:flex;flex-direction:column;gap:11px;}
.qo-foot nav a{font-family:var(--font-display);font-weight:500;font-size:13.5px;color:#C4B6A4;}
.qo-foot nav a:hover{color:var(--on-dark);}
.qo-foot p{color:#C4B6A4;margin:0;}
.qo-foot .qo-foot-inner p a{
  font-family:var(--font-display);font-weight:500;font-size:13.5px;
  color:#C4B6A4;line-height:2.15;
}
.qo-foot .qo-foot-inner p a:hover{color:var(--on-dark);}
.qo-foot .qo-note{font-family:var(--font-display);font-weight:400;font-size:12px;color:#A99A80;margin-top:14px;line-height:1.7;}
.qo-foot .qo-legal{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:22px var(--gutter);border-top:1px solid #3A2E23;
  font-family:var(--font-display);font-weight:400;font-size:11.5px;letter-spacing:.08em;color:#A99A80;
}
.qo-foot .qo-legal .qo-wordmark{font-size:13px;color:var(--cotton);}
.qo-foot .qo-legal .qo-wordmark .q{color:var(--on-dark);}

/* newsletter field (works with any form plugin markup) */
.qo-newsletter .qo-field{display:flex;border:1px solid #3A2E23;}
.qo-newsletter input[type=email],
.qo-newsletter input[type=text]{
  flex:1;background:transparent;border:none;outline:none;
  color:var(--cotton);font-family:var(--font-display);font-weight:400;font-size:13px;
  padding:13px 16px;
}
.qo-newsletter input::placeholder{color:#A99A80;}
.qo-newsletter button{
  background:transparent;border:none;border-left:1px solid #3A2E23;cursor:pointer;
  font-family:var(--font-display);font-weight:500;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:#C4B6A4;padding:0 22px;
}
.qo-newsletter button:hover{color:var(--on-dark);}

/* ---------- pagination / misc ---------- */
.wp-block-query-pagination{
  display:flex;justify-content:center;gap:22px;
  padding:clamp(36px,5vw,56px) var(--gutter) 0;
  font-family:var(--font-display);font-weight:500;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;
}
.wp-block-query-pagination a:hover{color:var(--accent);}
.wp-block-query-pagination .current{color:var(--accent);}

.qo-sep{border:none;border-top:1px solid var(--line);margin:0;}

/* ---------- scroll reveal (progressive enhancement) ---------- */
.qo-reveal{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s ease;}
.qo-reveal.in{opacity:1;transform:none;}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .qo-lesson-panel > li{grid-template-columns:1fr;}
  .qo-lesson-panel .wp-block-post-featured-image{order:-1;border-left:none;aspect-ratio:4/3;}
  .qo-lesson-panel .wp-block-post-title{padding-bottom:0;}
  .qo-lesson-panel .wp-block-post-excerpt{border-left:none;padding-top:clamp(20px,3vw,28px);}
  .qo-grid.wp-block-post-template{grid-template-columns:repeat(2,1fr);}
  .qo-foot .qo-foot-inner{grid-template-columns:1fr 1fr;}

  .qo-lead-split{grid-template-columns:1fr;gap:clamp(26px,4vw,40px);}
  .qo-feature > li,
  .qo-feature-portrait > li{grid-template-columns:1fr;}
  .qo-feature .qo-feature-photo{order:-1;}
  .qo-feature .qo-feature-photo img{min-height:clamp(260px,52vw,420px);}
  .qo-duo.wp-block-post-template{grid-template-columns:1fr;gap:clamp(30px,5vw,44px);}
  .qo-pair.wp-block-post-template{grid-template-columns:1fr;gap:clamp(30px,5vw,44px);}
  .qo-pair .wp-block-post-featured-image{height:clamp(240px,52vw,400px);}
  .qo-quad.wp-block-post-template{grid-template-columns:repeat(2,1fr);}
  .qo-strip.wp-block-post-template{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:680px){
  .qo-filter .qo-inner{justify-content:flex-start;}
  .qo-hero-index{display:none;}
    .qo-hero-live{min-height:70vh;}
  .qo-head .qo-bar{grid-template-columns:auto 1fr auto;}
  .qo-head .qo-nav{display:none;}
  .qo-wordmark{text-align:center;}
  .qo-grid.wp-block-post-template{grid-template-columns:1fr;}
  .qo-foot .qo-foot-inner{grid-template-columns:1fr;}
  .qo-article-body figure{margin:2em 0;}

  .qo-offset3.wp-block-post-template{grid-template-columns:1fr;gap:34px;}
  .qo-offset3 .wp-block-post-featured-image{aspect-ratio:4/3;}
  .qo-quad.wp-block-post-template{grid-template-columns:1fr;gap:30px;}
  .qo-object3.wp-block-post-template{grid-template-columns:1fr;gap:30px;}
  .qo-minirows.wp-block-post-template{grid-template-columns:1fr;}
  .qo-textlist > li{grid-template-columns:120px 1fr;gap:16px;}
  .qo-textlist .wp-block-post-date{grid-column:2;margin-bottom:4px;}
  .qo-textlist .wp-block-post-title{grid-column:2;}
  .qo-strip.wp-block-post-template{grid-template-columns:repeat(2,1fr);}
  .qo-rule-head{flex-wrap:wrap;gap:8px;}
}
@media (prefers-reduced-motion: reduce){
  .qo-reveal{opacity:1;transform:none;transition:none;}
  .qo-scene{animation:none;}
  .qo-grid .wp-block-post-featured-image img{transition:none;}
}


/* === layout override (specificity) === */
body .wp-block-group.qo-lead-split{display:grid !important;grid-template-columns:1.4fr 1fr;gap:clamp(28px,3.5vw,64px);align-items:start;}
body ul.qo-lead-main.wp-block-post-template,
body ul.qo-rows.wp-block-post-template,
body ul.qo-object.wp-block-post-template,
body ul.qo-feature.wp-block-post-template,
body ul.qo-textlist.wp-block-post-template{display:block !important;}
body ul.qo-duo.wp-block-post-template{display:grid !important;grid-template-columns:1fr 1fr;gap:clamp(26px,3vw,52px);align-items:start;}
body ul.qo-pair.wp-block-post-template{display:grid !important;grid-template-columns:2fr 1fr;gap:clamp(26px,3vw,52px);align-items:start;}
body ul.qo-lesson-panel.wp-block-post-template{display:block !important;}
body ul.qo-lesson-panel > li{display:grid !important;grid-template-columns:0.95fr 1fr clamp(380px,40vw,720px);align-items:stretch;margin:0;}
body ul.qo-quad.wp-block-post-template{display:grid !important;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.2vw,32px);align-items:start;}
body ul.qo-object3.wp-block-post-template{display:grid !important;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,36px);align-items:start;}
body ul.qo-minirows.wp-block-post-template{display:grid !important;grid-template-columns:1fr 1fr;gap:0 clamp(26px,3vw,52px);margin-top:clamp(28px,3.4vw,46px);}
body ul.qo-minirows > li{display:grid !important;grid-template-columns:clamp(110px,10vw,140px) 1fr;gap:18px;align-items:center;}
body ul.qo-offset3.wp-block-post-template{display:grid !important;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,36px);align-items:start;}
body ul.qo-strip.wp-block-post-template{display:grid !important;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px);}
body ul.qo-feature > li{display:grid !important;grid-template-columns:1.15fr 1fr;background:var(--surface-dark);align-items:stretch;margin:0;}
body ul.qo-feature-portrait > li{grid-template-columns:1fr 1.15fr;}
body ul.qo-textlist > li{display:grid !important;grid-template-columns:clamp(180px,17vw,260px) 120px 1fr;gap:clamp(20px,2.4vw,36px);align-items:center;}
body .qo-lead-split > .wp-block-query,
body .qo-lead-split > .wp-block-query > ul{min-width:0;}

@media (max-width:960px){
  body ul.qo-lesson-panel > li{grid-template-columns:1fr;}
  body .wp-block-group.qo-lead-split{grid-template-columns:1fr;gap:clamp(26px,4vw,40px);}
  body ul.qo-feature > li,
  body ul.qo-feature-portrait > li{grid-template-columns:1fr;}
  body ul.qo-duo.wp-block-post-template{grid-template-columns:1fr;gap:clamp(30px,5vw,44px);}
  body ul.qo-pair.wp-block-post-template{grid-template-columns:1fr;gap:clamp(30px,5vw,44px);}
  body ul.qo-quad.wp-block-post-template{grid-template-columns:repeat(2,1fr);}
  body ul.qo-strip.wp-block-post-template{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:680px){
  body ul.qo-offset3.wp-block-post-template{grid-template-columns:1fr;gap:34px;}
  body ul.qo-quad.wp-block-post-template{grid-template-columns:1fr;gap:30px;}
  body ul.qo-object3.wp-block-post-template{grid-template-columns:1fr;gap:30px;}
  body ul.qo-minirows.wp-block-post-template{grid-template-columns:1fr;}
  body ul.qo-textlist > li{grid-template-columns:120px 1fr;gap:16px;align-items:center;}
  body ul.qo-strip.wp-block-post-template{grid-template-columns:repeat(2,1fr);}
}

/* === strip tune === */
body ul.qo-strip .wp-block-post-title{font-size:14px;line-height:1.5;}
@media (max-width:680px){
  body ul.qo-strip.wp-block-post-template{
    grid-auto-flow:column;grid-auto-columns:minmax(150px,62vw);
    overflow-x:auto;padding-bottom:6px;
  }
}

/* หลังแถบ creed เต็มความกว้าง ไม่ต้องบวก padding บนอีก ไม่งั้นช่องว่างซ้อนกันเป็นสองเท่า */
.qo-creed + .qo-band{padding-top:0;}