/* Tan Wahkins — ทุกค่าในไฟล์นี้มาจาก DESIGN.md v2 (/root/tanwahkins-site/DESIGN.md)
   ⚠️ ห้ามใส่ค่าสี/ฟอนต์ใหม่โดยไม่แก้ DESIGN.md ก่อน */

:root{
  --paper:#FBFAF8;
  --ink:#1A1917;
  --ink-soft:#6B6660;
  --rule:#E3DFD8;
  --accent:#8C2F1D;
  --measure:38rem;
}
/* ⛔ ไม่มีโหมดมืด — ลุงตี่ดูแล้วบอกว่ามืดเกินไป (7 ส.ค.) และเว็บอ้างอิงที่ลุงชอบ
   (adamgrant.net · adamgrant.substack.com · thedankoe.com) เป็นพื้นขาวอย่างเดียวทั้งหมด
   เว็บนี้จึงจงใจ "ล็อกโหมดสว่าง" ไม่ตามค่าระบบของเครื่องคนอ่าน */
:root{ color-scheme: light; }

@font-face{font-family:"TW Display";
  src:url("https://titi168.com/watch/fonts/NotoSerifDisplay-CondensedSemiBold.ttf") format("truetype");
  font-weight:600;font-display:swap}
@font-face{font-family:"TW Text";
  src:url("https://titi168.com/watch/fonts/NotoSerif-Regular.ttf") format("truetype");
  font-weight:400;font-display:swap}
@font-face{font-family:"TW Text";
  src:url("https://titi168.com/watch/fonts/NotoSerif-Italic.ttf") format("truetype");
  font-weight:400;font-style:italic;font-display:swap}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 1.0625rem/1.7 "TW Text",Georgia,serif}
.wrap{max-width:var(--measure);margin:0 auto;padding:0 1.35rem}

a{color:var(--accent);text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color 150ms ease-out,color 150ms ease-out}
a:hover{border-bottom-color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px}

h1,h2,h3{font-family:"TW Display",Georgia,serif;font-weight:600;
  letter-spacing:.004em;line-height:1.15;margin:0}
hr{border:0;border-top:1px solid var(--rule);margin:0}
img{max-width:100%;height:auto}

/* ---------- header ---------- */
.site-head{border-bottom:1px solid var(--rule)}
.site-head .bar{max-width:var(--measure);margin:0 auto;padding:1.15rem 1.35rem;
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.brand{font-family:"TW Display",Georgia,serif;font-size:1.1rem;letter-spacing:.13em;
  color:var(--ink);border:0}
.brand:hover{color:var(--accent)}
.site-nav{display:flex;gap:1.3rem;font-size:.8rem;letter-spacing:.1em;
  text-transform:uppercase}
.site-nav a{color:var(--ink-soft);border:0}
.site-nav a:hover{color:var(--accent)}

/* ---------- hero ---------- */
.hero{padding:3.75rem 0 2.5rem}
.hero h1{font-size:clamp(2.1rem,7vw,3.1rem)}
.hero .who{margin:1.35rem 0 0;font-size:1.1rem;color:var(--ink-soft)}

/* ---------- ช่องอีเมล ---------- */
.signup{padding:2.5rem 0;border-top:1px solid var(--rule)}
.signup h2{font-size:1.4rem;margin-bottom:.85rem}
.signup p{margin:0 0 1rem}
.signup .promise{color:var(--ink-soft)}
.form-row{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.35rem}
.form-row input[type=email]{flex:1 1 15rem;min-width:0;padding:.72rem .85rem;
  font:400 1rem/1.3 "TW Text",Georgia,serif;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:2px}
.form-row input[type=email]::placeholder{color:var(--ink-soft)}
.form-row button{padding:.72rem 1.25rem;border:1px solid var(--accent);border-radius:2px;
  background:var(--accent);color:var(--paper);cursor:pointer;
  font:400 .95rem/1.3 "TW Text",Georgia,serif;
  transition:background-color 150ms ease-out,color 150ms ease-out}
.form-row button:hover{background:var(--paper);color:var(--accent)}
.form-row button[disabled]{opacity:.55;cursor:progress}
.form-note{margin:.7rem 0 0;font-size:.85rem;color:var(--ink-soft)}
.form-msg{margin:.85rem 0 0;font-size:.95rem}
.form-msg.ok{color:var(--accent)}
.form-msg.err{color:var(--ink)}
.hp{position:absolute;left:-9999px}

/* ---------- หนังสือ ---------- */
.books{padding:2.5rem 0;border-top:1px solid var(--rule)}
/* ส่วนหนังสือกว้างกว่าคอลัมน์อ่าน เพื่อให้ปกใหญ่พอมองเห็นชัด (แบบ thedankoe.com) */
.books-wide{max-width:52rem;margin:0 auto;padding:0 1.35rem}
.book-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem}
.book-card img{display:block;width:100%;height:auto;border:1px solid var(--rule)}
.book-card h3{font-size:1.3rem;margin:1.15rem 0 .4rem}
.book-card p{margin:0;font-size:.97rem;color:var(--ink)}
.book-card .meta{margin:.7rem 0 0;font-size:.86rem;color:var(--ink-soft)}
@media(max-width:40rem){.book-grid{grid-template-columns:1fr;gap:3rem}}
.kicker{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 1.5rem}


/* ---------- ⭐ ลูกเล่นเด่น: รายการบทความ ---------- */
.posts{padding:2.5rem 0;border-top:1px solid var(--rule)}
.post-item{padding:1.5rem 0;border-bottom:1px solid var(--rule)}
.post-item:first-of-type{padding-top:0}
.post-item h2{font-size:1.35rem;margin-bottom:.4rem}
.post-item h2 a{color:var(--ink);border:0}
.post-item h2 a:hover{color:var(--accent)}
.post-item .excerpt{margin:0;color:var(--ink-soft);font-size:.99rem}
.post-item .byline{margin:.6rem 0 0;font-size:.78rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-soft)}
.post-item .byline a{color:var(--ink-soft);border:0}
.post-item .byline a:hover{color:var(--accent)}

/* ---------- หน้าบทความ ---------- */
.post-head{padding:3rem 0 1.5rem}
.post-head h1{font-size:clamp(1.9rem,6vw,2.6rem)}
.post-head .sub{margin:1rem 0 0;font-size:1.12rem;color:var(--ink-soft)}
.post-head .byline{margin:1.25rem 0 0;font-size:.78rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-soft)}
.post-body{padding:.5rem 0 2.5rem;font-size:1.09rem;line-height:1.75}
.post-body p{margin:0 0 1.2rem}
.post-body h2{font-size:1.4rem;margin:2.2rem 0 .7rem}
.post-body h3{font-size:1.15rem;margin:1.8rem 0 .6rem}
.post-body blockquote{margin:1.8rem 0;padding-left:1.1rem;
  border-left:2px solid var(--rule);color:var(--ink-soft);font-style:italic}
.post-body blockquote p:last-child{margin-bottom:0}
.post-body figure{margin:1.8rem 0}
.post-body figcaption{font-size:.85rem;color:var(--ink-soft);padding-top:.5rem}
.post-body ul,.post-body ol{padding-left:1.3rem;margin:0 0 1.2rem}
.post-body li{margin-bottom:.45rem}
.post-body hr{margin:2.2rem 0}
.post-body code{font-size:.92em;background:var(--rule);padding:.1em .35em;border-radius:2px}

/* ---------- about / footer ---------- */
.about{padding:2.5rem 0;border-top:1px solid var(--rule)}
.about h2{font-size:1.4rem;margin-bottom:.9rem}
.site-foot{border-top:1px solid var(--rule);padding:2rem 0 3rem;
  color:var(--ink-soft);font-size:.85rem}
.site-foot a{color:var(--ink-soft)}

/* ---------- สถานะว่าง / แบ่งหน้า ---------- */
.empty{padding:2.5rem 0;color:var(--ink-soft)}
.pager{padding:2rem 0;display:flex;justify-content:space-between;font-size:.9rem}

@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- จดหมาย + การ์ด ----------
   ⚠️ 7 ส.ค. รอบแรกย่อการ์ดเหลือ 10.5rem → ตัวหนังสือในการ์ดอ่านไม่ออกเลย
   การ์ดที่มีตัวหนังสือหนาแน่นแบบนี้ **ห้ามย่อ** ต้องกว้างเต็มคอลัมน์เท่านั้น
   และตัดย่อหน้าที่พูดเรื่องเดียวกับในการ์ดออกแล้ว เพราะเป็นเนื้อซ้ำ */
.signup .tagline{margin:.4rem 0 1.6rem;color:var(--ink-soft);font-style:italic}
.card-link{border:0;display:block;margin:0 0 1.75rem}
.card-link img{display:block;width:100%;height:auto;border:1px solid var(--rule);
  transition:border-color 150ms ease-out}
.card-link:hover img{border-color:var(--accent)}