/* หัดเขียน — ธีมนิตยสารวรรณกรรม (editorial)
   โหลดต่อจาก style.css: 1) ปรับสีเดิมทั้งหมดให้ตามพาเล็ตใหม่ผ่านตัวแปร  2) ทับ component ที่หน้าตาเปลี่ยน
   ฟอนต์: Taviraj (เนื้อเรื่อง/หัวเรื่อง) + IBM Plex Sans Thai (ป้าย/ปุ่ม/ข้อมูล) · สว่าง/มืดด้วย html[data-theme="dark"] */

/* ---------- 1. โทเคน ---------- */
:root{
  --bg:#f6f2ea; --ink:#211d18; --muted:#6e665b; --rule:#d8cebd; --panel:#eee6d6;
  --accent:#a4472f; --ph:#e6dccb; --ph2:#ddd2bf; --field:#fbf8f2;
  --err-bg:#f6dcd3; --err-fg:#8a2a14; --ok-bg:#e1e6d3; --ok-fg:#44522f;

  --font-serif:'Taviraj','Noto Serif Thai',Georgia,serif;
  --font-sans:'IBM Plex Sans Thai','Noto Sans Thai',sans-serif;
  --font-headline:var(--font-serif); --font-body:var(--font-sans); --font-label:var(--font-sans);

  /* ตัวแปรเดิมของ style.css → พาเล็ตใหม่ */
  --surface:var(--bg); --surface-lowest:var(--field); --surface-low:var(--panel); --surface-container:var(--panel);
  --surface-high:var(--ph); --surface-highest:var(--ph2);
  --on-surface:var(--ink); --on-surface-variant:var(--muted); --outline:var(--muted); --outline-variant:var(--rule);
  --primary:var(--accent); --primary-container:#8c3a25; --on-primary:#fff; --primary-fixed:var(--panel); --on-primary-fixed:var(--ink);
  --secondary:#5d6b4a; --on-secondary:#fff; --secondary-container:var(--ok-bg); --on-secondary-container:var(--ok-fg);
  --secondary-fixed:var(--ok-bg); --on-secondary-fixed:var(--ok-fg);
  --tertiary:#86642a; --on-tertiary:#fff; --tertiary-container:#d9c08d; --tertiary-fixed:#ece0c4; --on-tertiary-fixed:#3a2a0c;
  --inverse-surface:#2b2721; --inverse-on-surface:#f6f2ea;
  --maxw:42.5rem; --header-h:0px; --radius:4px;
  --r-bg:var(--bg); --r-fg:var(--ink); --r-paper:var(--panel); --r-paper-line:var(--rule);
}
@supports (color:oklch(0.5 0.1 30)){ :root{ --accent:oklch(0.5 0.12 30); } html[data-theme="dark"]{ --accent:oklch(0.74 0.1 50); } }
html[data-theme="dark"]{
  --bg:#16140f; --ink:#ece6da; --muted:#a59c8c; --rule:#3a352b; --panel:#211e17;
  --accent:#e0a37f; --ph:#24211a; --ph2:#2c2820; --field:#1c1912;
  --err-bg:#4a211a; --err-fg:#f3b9a8; --ok-bg:#2a3322; --ok-fg:#c4d4ab;
  --primary-container:#c98a66; --on-primary:#16140f;
  --secondary:#a8b894; --on-secondary:#16140f; --tertiary:#d1ad6a; --on-tertiary:#16140f; --tertiary-container:#6b5424; --tertiary-fixed:#33280f; --on-tertiary-fixed:#f0dfb9;
  --inverse-surface:#ece6da; --inverse-on-surface:#16140f;
  color-scheme:dark;
}
html{background:var(--bg)}
body{background:var(--bg);color:var(--ink);font-family:var(--font-sans);transition:background .25s,color .25s}
a:hover{color:var(--accent)}
::selection{background:var(--accent);color:var(--bg)}
.ms{font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24}

/* ---------- 2. หัวเว็บ (masthead) ---------- */
.site-header,.bottom-nav{display:none!important}
main.page{padding-top:0;padding-bottom:0;min-height:60vh}
main.page > .wrap{padding-top:0}
.page .wrap{animation:none}
.masthead{position:relative;background:var(--bg)}
.mast-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;max-width:1200px;margin:0 auto;padding:30px 64px 0}
.mast-left{display:flex;align-items:center;gap:18px;justify-self:start}
.mast-right{display:flex;align-items:center;gap:10px;justify-self:end}
.wordmark{font-family:var(--font-serif);font-size:46px;font-weight:500;letter-spacing:.02em;line-height:1.2;text-align:center;color:var(--ink)}
.wordmark:hover{color:var(--ink)}
.wordmark.sm{font-size:24px}
.mast-links{display:flex;gap:20px;font-size:14px;color:var(--muted)}
.mast-links a[aria-current]{color:var(--ink);border-bottom:1px solid var(--accent)}
.mast-burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;gap:6px;background:transparent}
.mast-burger span{display:block;width:22px;border-top:1.5px solid var(--ink)}
.mast-pill,.mast-theme{font-family:var(--font-sans);font-size:13px;color:var(--muted);background:transparent;border:1px solid var(--rule);border-radius:20px;padding:6px 14px;cursor:pointer;line-height:1.4;display:inline-flex;align-items:center;gap:6px}
.mast-pill:hover,.mast-theme:hover{color:var(--ink);border-color:var(--muted)}
.mast-theme{padding:5px 8px}
.mast-theme{font-size:16px;line-height:1;padding:6px 10px}
.mp-name{max-width:9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mast-nav{display:flex;justify-content:center;gap:30px;font-size:16px;font-family:var(--font-serif);color:var(--muted);padding:18px 64px 18px;max-width:1200px;margin:0 auto;white-space:nowrap}
.mast-nav a{padding-bottom:2px;border-bottom:1px solid transparent}
.mast-nav a[aria-current]{color:var(--ink);border-bottom-color:var(--accent)}
.mast-rule{max-width:1200px;margin:0 auto;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);height:3px;width:calc(100% - 128px)}
.site-menu{position:absolute;left:12px;top:64px;z-index:60;min-width:13rem;background:var(--bg);border:1px solid var(--rule);box-shadow:0 12px 32px rgba(0,0,0,.18);padding:6px;display:flex;flex-direction:column}
.site-menu[hidden]{display:none}
.site-menu a,.site-menu button{text-align:left;padding:10px 14px;font-family:var(--font-sans);font-size:15px;color:var(--ink);background:transparent;border-radius:2px}
.site-menu a:hover,.site-menu button:hover{background:var(--panel);color:var(--ink)}

.site-footer{margin-top:88px;padding:36px 64px 44px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-family:var(--font-sans);font-size:14px;color:var(--muted);max-width:1200px;margin-left:auto;margin-right:auto}
.site-footer .wordmark{color:var(--ink)}
.foot-links{display:flex;gap:24px}
.foot-note{font-family:var(--font-serif);font-style:italic}

/* ---------- 3. เลย์เอาต์ทั่วไป ---------- */
.wrap{max-width:1200px;padding:0 64px}
.kicker{font-family:var(--font-sans);font-size:13px;letter-spacing:.12em;color:var(--accent)}
.kicker a:hover{text-decoration:underline}
.sec-title{display:flex;align-items:center;gap:20px;margin-bottom:32px}
.sec-title::before,.sec-title::after{content:"";flex:1;border-top:1px solid var(--rule)}
.sec-title span{font-family:var(--font-sans);font-size:13px;letter-spacing:.14em;color:var(--muted)}
.block-sec{margin-top:72px}
.list-head{padding:56px 0 8px;display:flex;flex-direction:column;gap:12px}
.list-head.center{align-items:center;text-align:center}
.list-head h1{font-family:var(--font-serif);font-size:52px;font-weight:400;line-height:1.3}
.list-head p{font-family:var(--font-serif);font-style:italic;font-weight:300;font-size:18px;color:var(--muted)}
.page-head{text-align:center;padding:40px 0 8px;display:flex;flex-direction:column;gap:6px;align-items:center}
.page-head .top{justify-content:center;gap:14px}
.page-head h1{font-family:var(--font-serif);font-size:36px;font-weight:400}
.page-head p{font-family:var(--font-serif);font-style:italic;font-weight:300;color:var(--muted);font-size:16px}
.tag-pill{display:none}
.pager{margin:56px 0 0;padding-top:20px;border-top:1px solid var(--rule);font-family:var(--font-sans)}
.pager a{background:transparent;border:1px solid var(--rule);border-radius:20px;font-weight:500}
.pager a:hover{border-color:var(--accent);color:var(--accent)}
.empty-note{display:flex;flex-direction:column;align-items:center;gap:10px;padding:56px 0;text-align:center;font-family:var(--font-serif);color:var(--muted)}
.empty-note b{font-size:24px;font-weight:400;color:var(--ink)}

/* ---------- 4. การ์ดเรื่อง ---------- */
.story{display:flex;flex-direction:column;gap:12px;color:var(--ink)}
.story:hover{color:var(--ink)}
.story:hover .story-title{color:var(--accent)}
.story-media{overflow:hidden;background:var(--ph);height:220px}
.story-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.story:hover .story-media img{transform:scale(1.025)}
.story-ph{display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,var(--ph),var(--ph) 8px,var(--ph2) 8px,var(--ph2) 16px);font-family:var(--font-serif);font-size:20px;color:var(--muted)}
.story-poem{height:220px;border-top:3px double var(--rule);border-bottom:3px double var(--rule);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;font-family:var(--font-serif);font-size:19px;line-height:1.8;text-align:center;padding:0 12px}
.story-body{display:flex;flex-direction:column;gap:10px}
.story-title{font-family:var(--font-serif);font-size:25px;line-height:1.45;font-weight:400;text-wrap:pretty;transition:color .15s}
.story .dek{font-family:var(--font-serif);font-size:17px;line-height:1.7;color:var(--muted);text-wrap:pretty}
.story .kicker{font-size:12px}
.story .meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-family:var(--font-sans);font-size:13px;color:var(--muted)}
.story .meta b{font-weight:500;color:var(--ink)}
.story .av{width:36px;height:36px;border-radius:50%;background:var(--panel);display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-serif);font-size:16px;color:var(--ink);margin-right:4px;border:1px solid var(--rule)}
.story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:44px;row-gap:56px}
.story-grid .story-media,.story-grid .story-poem{height:220px}
.feature{margin-top:56px}
.feature .story-feat{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:56px;align-items:center}
.story-feat .story-media{height:500px}
.story-feat .story-body{gap:18px}
.story-feat .story-title{font-size:52px;line-height:1.3;text-wrap:balance}
.story-feat .dek{font-size:21px;font-style:italic;font-weight:300;line-height:1.65}
.story-feat .kicker{font-size:13px}
.story-feat.is-poem{grid-template-columns:1fr}
.story-feat .story-poem{height:360px;font-size:28px;line-height:1.9}
.story-feat.story-feat:not(.has-img):not(.is-poem){grid-template-columns:1fr;max-width:760px;margin:0 auto;text-align:center}
.story-feat:not(.has-img):not(.is-poem) .story-ph{display:none}
.story-feat:not(.has-img):not(.is-poem) .meta{justify-content:center}
.story-center{text-align:center}
.story-center .meta{justify-content:center}
.story-grid-3 .story-media{height:180px}

.quote-band{background:var(--panel);margin:88px calc(50% - 50vw) 0;padding:64px 24px;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.quote-band p{max-width:820px;font-family:var(--font-serif);font-size:36px;font-weight:300;font-style:italic;line-height:1.55;text-wrap:balance}
.quote-band .src{font-family:var(--font-serif);font-style:italic;font-size:16px;color:var(--muted)}
.quote-band .src:hover{color:var(--accent)}
.writer-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px}
.writer{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;color:var(--ink)}
.writer:hover{color:var(--accent)}
.writer img{width:96px;height:96px;border-radius:50%;object-fit:cover;background:var(--ph);border:1px solid var(--rule)}
.writer b{font-family:var(--font-serif);font-size:19px;font-weight:500}
.writer small{font-family:var(--font-sans);font-size:13px;color:var(--muted)}

/* หน้านักเขียน */
.author-hero{display:flex;gap:36px;align-items:center;max-width:820px;margin:56px auto 0;padding:0 0 40px;border-bottom:1px solid var(--rule)}
.author-hero .av-wrap{flex:none;width:140px;height:140px}
.author-hero .av-wrap img{width:100%;height:100%;border-radius:50%;object-fit:cover;background:var(--ph);border:1px solid var(--rule)}
.ah-body{display:flex;flex-direction:column;gap:8px;min-width:0}
.ah-body h1{font-family:var(--font-serif);font-size:44px;font-weight:400;line-height:1.3}
.ah-body .role{font-family:var(--font-sans);font-size:14px;color:var(--muted)}
.ah-body .bio{font-family:var(--font-serif);font-size:18px;line-height:1.8;color:var(--ink)}
.ah-body .quote{font-family:var(--font-serif);font-style:italic;font-weight:300;font-size:18px;color:var(--muted)}
.ah-stats{display:flex;gap:24px;font-family:var(--font-sans);font-size:13px;color:var(--muted)}
.ah-stats b{color:var(--ink);font-weight:500;font-size:16px}
.sub-nav{display:flex;justify-content:center;gap:26px;padding:18px 0;font-family:var(--font-serif);font-size:16px;color:var(--muted);overflow-x:auto;white-space:nowrap}
.sub-nav a[aria-current]{color:var(--ink);border-bottom:1px solid var(--accent)}
.series-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px}
.series{padding:0;background:transparent;border:0;border-top:3px double var(--rule);border-radius:0;box-shadow:none;padding-top:20px;display:flex;flex-direction:column;gap:12px}
.series:hover{box-shadow:none}
.series h3{font-family:var(--font-serif);font-size:26px;font-weight:400}
.series>p{font-family:var(--font-serif);font-size:17px;color:var(--muted);line-height:1.7}
.series .chapters{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.series .chapters a{display:flex;gap:14px;padding:9px 0;border-bottom:1px solid var(--rule);font-family:var(--font-serif);font-size:17px}
.series .chapters .no{flex:none;font-family:var(--font-sans);font-size:12px;letter-spacing:.08em;color:var(--accent);padding-top:5px;width:5.2em}
.series-foot{display:flex;justify-content:space-between;gap:12px;font-family:var(--font-sans);font-size:13px;color:var(--muted);border:0;margin:0;padding:0}
.series-foot a{color:var(--accent);font-weight:500}

/* รายชื่อนักเขียน */
.author-list{max-width:820px;margin:32px auto 0;display:flex;flex-direction:column}
.author-row{display:flex;gap:28px;padding:32px 0;border-bottom:1px solid var(--rule);color:var(--ink);align-items:center}
.author-row:first-child{border-top:1px solid var(--rule)}
.author-row:hover h2{color:var(--accent)}
.author-row img{flex:none;width:96px;height:96px;border-radius:50%;object-fit:cover;background:var(--ph);border:1px solid var(--rule)}
.ar-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.ar-body h2{font-family:var(--font-serif);font-size:28px;font-weight:400;transition:color .15s}
.ar-body .role{font-family:var(--font-sans);font-size:13px;color:var(--muted)}
.ar-body .quote{font-family:var(--font-serif);font-style:italic;font-weight:300;font-size:17px;color:var(--muted)}
.ar-meta{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--font-sans);font-size:13px;color:var(--muted)}
.ar-meta b{color:var(--ink);font-weight:500}
.ar-meta .tags{color:var(--accent)}

/* ---------- 5. ปุ่ม / ฟอร์ม / กล่อง (ทั้งเว็บ) ---------- */
.btn{border-radius:20px;font-family:var(--font-sans);font-weight:500;letter-spacing:.01em;transition:background .15s,color .15s,border-color .15s}
.btn-primary{background:var(--ink);color:var(--bg)}
.btn-primary:hover{background:var(--accent);color:#fff}
html[data-theme="dark"] .btn-primary:hover{color:var(--bg)}
.btn-secondary{background:var(--ink);color:var(--bg)}
.btn-white,.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--rule)}
.btn-white:hover,.btn-ghost:hover{background:var(--panel);border-color:var(--muted)}
.btn-danger{background:transparent;color:var(--err-fg);border:1px solid var(--err-fg)}
.btn-danger:hover{background:var(--err-fg);color:var(--bg)}
.pill{border-radius:20px;background:transparent;border:1px solid var(--rule);color:var(--muted)}
.pill:hover{background:var(--panel)}
.pill.active,.pill-cat.active,.pill-sec.active{background:var(--ink);color:var(--bg);border-color:var(--ink);box-shadow:none}
.pill-cat{background:transparent}
.fld input,.fld textarea,.fld select,.guest-name-input,.inline-form input,.settings select,.settings textarea,.settings input[type=text],.settings input[type=number],.cat-form input[type=text],.cat-form input[type=number],.blk-body textarea,.blk-body input[type=text]{border-radius:2px;background:var(--field);border-color:var(--rule);color:var(--ink);font-family:var(--font-sans)}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:1px solid var(--accent);border-color:var(--accent)}
.auth-card,.modal-card,.owner-panel,.canvas,.editor-tools-in,.settings,.autosave,.user-row,.details,details.pen,details.pw,.takeaway,.comment-form,.comment,.blk,.cover-box,.persona-opt{border-radius:2px;box-shadow:none}
.auth-card{background:var(--field);border-color:var(--rule);margin-top:48px}
.auth-card h1,.auth-card h2{font-family:var(--font-serif);font-weight:400;font-size:26px}
.modal{background:rgba(10,8,5,.5)}
.modal-card{background:var(--bg);border:1px solid var(--rule)}
.modal-head{border-color:var(--rule)}
.modal-head h3{font-family:var(--font-serif);font-weight:500;font-size:20px}
.menu-links a,.menu-links button{border-radius:2px;background:transparent;border:1px solid transparent}
.menu-links a:hover,.menu-links button:hover{background:var(--panel)}
.toast{background:var(--ink);color:var(--bg);border-radius:2px;bottom:2rem;font-family:var(--font-sans)}
.toast .ms{color:var(--bg)}
.form-error{background:var(--err-bg);color:var(--err-fg);border-radius:2px}
.op-warn{background:var(--err-bg);color:var(--err-fg);border-radius:2px}
.badge{border-radius:20px;font-family:var(--font-sans)}
.badge-primary,.badge-secondary{background:var(--ok-bg);color:var(--ok-fg)}
.badge-neutral{background:var(--panel);color:var(--muted)}
.badge-danger{background:var(--err-bg);color:var(--err-fg)}
.mr-warn{color:var(--err-fg)!important}
.empty{background:var(--panel);border-radius:2px}
.user-row,.manage-row{background:var(--field);border-color:var(--rule)}
.manage-row .mr-title a{font-family:var(--font-serif);font-size:18px;font-weight:500}
.persona-opt{background:var(--field);border-color:var(--rule)}
.persona-opt.selected{background:var(--panel);border-color:var(--accent);color:var(--ink)}
.title-input{font-family:var(--font-serif);font-weight:400}
.canvas,.editor-tools-in,.settings,.autosave,.cover-box{background:var(--field);border-color:var(--rule)}
.editor-tools,.read-toolbar{background:color-mix(in srgb,var(--bg) 92%,transparent);top:0}
.blk{background:var(--field);border-color:var(--rule)}
.blk-head{background:var(--panel)}
.blk-ta.mono{background:#1f1d1a!important;color:#f2e9e1}
.blk-img,.cover-preview,.img-box{background:var(--ph)}
.add-btn,.align-btn,.insert-count{background:var(--panel);color:var(--ink);border:1px solid var(--rule)}
.add-btn:hover:not(:disabled){background:var(--ph)}
.align-btn.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.insert-count.full{background:var(--err-bg);color:var(--err-fg)}
.switch{accent-color:var(--accent)}

/* ---------- 6. หน้าอ่านบทความ ---------- */
.reader{background:transparent;color:var(--ink);min-height:0}
.read-toolbar{position:static;padding:10px 64px 0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border:0}
.read-toolbar-inner{max-width:1200px;background:transparent;border:0;box-shadow:0;padding:0;justify-content:flex-end;gap:18px;border-radius:0;box-shadow:none}
.size-btn{border:1px solid var(--rule);font-family:var(--font-serif)}
.size-btn:hover{background:var(--panel)}
.tool-group .lbl{font-family:var(--font-sans);font-size:12px}
.bm-btn{font-family:var(--font-sans);border:1px solid var(--rule);padding:4px 12px}
.owner-panel,.mode-note{max-width:680px;margin:20px auto 0;border-radius:2px;font-family:var(--font-sans)}
.owner-panel{background:var(--panel);color:var(--ink);border:1px solid var(--rule)}
.mode-note{background:transparent;border:1px solid var(--rule);color:var(--muted);text-align:left}
.mode-member,.mode-guest{background:transparent;color:var(--muted)}
.article{max-width:none;padding:56px 0 0;gap:0;align-items:center}
.art-head{width:680px;max-width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
.art-title{font-family:var(--font-serif);font-size:60px;font-weight:400;line-height:1.3;letter-spacing:0;margin:0;text-wrap:balance}
.art-byline{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 12px;margin:8px 0 0;padding:0;border:0;font-family:var(--font-sans);font-size:14px;color:var(--muted)}
.art-byline .av{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--ph);border:1px solid var(--rule)}
.art-byline b{color:var(--ink);font-weight:500}
.art-byline a:hover b{color:var(--accent)}
.art-byline .badge{font-style:normal;background:var(--panel);color:var(--accent);padding:1px 10px}
.share-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--rule);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;margin-left:4px}
.share-btn:hover{color:var(--accent);border-color:var(--accent);background:transparent}
.orn-diamond{display:flex;gap:10px;align-items:center;margin:20px 0 12px}
.orn-diamond i{width:48px;border-top:1px solid var(--rule)}
.orn-diamond b{width:7px;height:7px;background:var(--accent);transform:rotate(45deg)}
.end-orn{display:flex;gap:10px;align-items:center;margin:56px 0}
.end-orn b{width:7px;height:7px;background:var(--accent);transform:rotate(45deg)}

.prose{width:680px;max-width:100%;font-family:var(--font-serif);font-size:21px;line-height:1.95;gap:26px;text-wrap:pretty}
.reader[data-size="0"] .prose{font-size:18px;line-height:1.85}
.reader[data-size="2"] .prose{font-size:24px;line-height:2}
.prose p{text-align:left;margin:0}
.prose .drop{float:left;font-family:var(--font-serif);font-size:88px;line-height:.95;padding:10px 12px 0 0;color:var(--accent);font-weight:400}
.prose strong{color:var(--ink);font-weight:600}
.prose em{font-family:var(--font-serif);font-style:italic}
.prose a{color:var(--accent);text-decoration:underline}

/* รูป: คงสัดส่วนเดิม */
.prose figure{margin:0}
.fig-hero{width:1000px;max-width:calc(100vw - 48px);margin:56px 0 56px calc((680px - min(1000px,100vw - 48px)) / 2);display:flex;flex-direction:column;gap:14px;align-items:center}
.fig-hero .img{background:var(--ph);width:fit-content;max-width:100%;border-radius:0;box-shadow:none}
.fig-hero img{display:block;width:auto;height:auto;max-width:100%;max-height:min(80vh,720px);margin:0 auto}
.fig-hero.full .img{width:100%}
.fig-hero.full img{width:100%;max-height:none}
figcaption{font-family:var(--font-serif);font-size:15px;font-style:italic;line-height:1.6;color:var(--muted)}
.fig-hero figcaption{text-align:center}
.clearfix{display:flow-root}
.fig-side{width:300px;max-width:46%;display:flex;flex-direction:column;gap:10px;margin:8px 0 16px}
.fig-side.left{float:left;margin-right:36px;margin-left:-110px}
.fig-side.right{float:right;margin-left:36px;margin-right:-110px}
.fig-side .img{background:var(--ph);border-radius:0}
.fig-side img{display:block;width:100%;height:auto}
.fig-side.right figcaption{text-align:right}
.p-gap>p+p{margin-top:26px}

/* บทกวี: เส้นคู่ + 2 วรรคต่อแถว */
.poem{width:680px;max-width:100%;margin:56px 0;padding:44px 0 36px;border:0;border-top:3px double var(--rule);border-bottom:3px double var(--rule);border-radius:0;background:transparent;box-shadow:none;display:flex;flex-direction:column;align-items:center;gap:22px;align-self:center}
.poem-label{font-family:var(--font-sans);font-size:13px;letter-spacing:.14em;color:var(--accent)}
.poem-lines{display:flex;flex-direction:column;gap:18px;font-family:var(--font-serif);font-size:23px;line-height:1.9;text-align:center}
.poem-st{display:flex;flex-direction:column;gap:6px}
.poem-row{margin:0;display:grid;grid-template-columns:auto auto;column-gap:44px;justify-content:center;text-align:left}
.poem-row span:only-child{grid-column:1/3;text-align:center}
.poem cite{font-family:var(--font-serif);font-size:16px;font-style:italic;color:var(--muted);background:transparent;border:0;padding:0}
.poem cite::before{display:none}
.poem-copy,.code-copy{font-family:var(--font-sans);border-radius:20px;background:transparent;border-color:var(--rule);color:var(--muted);margin-top:0}
.poem-copy:hover{background:var(--panel);color:var(--ink)}

/* คำคม: ตัวเอียงใหญ่ กึ่งกลาง เครื่องหมายคำพูดสีแอคเซนต์ */
.quote-block{width:760px;max-width:100%;margin:24px 0 56px;padding:0;background:transparent;border:0;border-radius:0;color:var(--ink);text-align:center;align-self:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.quote-block::before{content:"\201C";position:static;font-family:var(--font-serif);font-size:84px;line-height:.6;height:44px;color:var(--accent)}
.quote-block blockquote{margin:0;font-family:var(--font-serif);font-size:36px;font-weight:300;font-style:italic;line-height:1.55;text-wrap:balance}
.quote-block blockquote p{text-align:center}
.quote-block figcaption{font-family:var(--font-serif);font-size:16px;font-style:italic;font-weight:400;color:var(--muted);text-align:center;margin-top:6px}

/* โค้ด: กล่องมืดแบบเอกสาร ต่างจากกลอน/คำคมชัดเจน */
.code-block{width:760px;max-width:100%;margin:40px 0;align-self:center;border-radius:2px;background:#1b1915;color:#ece6da;border:1px solid #3a352b;box-shadow:none}
.code-head{background:#25221b;border-bottom:1px solid #3a352b}
.code-lang{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#e0a37f;letter-spacing:.06em}
.code-head .code-copy{border-color:#4a443f;color:#c8bfae}
.code-block pre{font-size:15px;line-height:1.7}

.takeaway{width:680px;max-width:100%;align-self:center;background:transparent;border:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:24px 0;gap:18px}
.takeaway .ico{background:transparent;border:1px solid var(--rule);color:var(--accent)}
.takeaway b{font-family:var(--font-sans);font-size:13px;letter-spacing:.12em;color:var(--accent);font-weight:500}
.takeaway p{font-family:var(--font-serif);font-size:19px;color:var(--ink);line-height:1.8}
.tag-list{width:680px;max-width:100%;align-self:center}
.tag-list span{background:transparent;border:1px solid var(--rule);border-radius:20px;color:var(--muted);font-family:var(--font-sans);font-size:13px}

.author-box{width:680px;max-width:100%;display:flex;gap:24px;align-items:center;padding:28px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.author-box img{flex:none;width:76px;height:76px;border-radius:50%;object-fit:cover;background:var(--ph);border:1px solid var(--rule)}
.author-box .nm{font-family:var(--font-serif);font-size:21px;font-weight:500;color:var(--ink)}
.author-box .nm:hover{color:var(--accent)}
.author-box p{font-family:var(--font-serif);font-size:17px;line-height:1.7;color:var(--muted)}
.more-sec{width:1000px;max-width:100%;margin-top:72px}
.more-sec .sec-title{margin-bottom:28px}

.art-footer{width:680px;max-width:100%;border:0;padding-top:48px;gap:36px}
.cheer-bar{flex-direction:row;justify-content:space-between;padding:20px 0;background:transparent;border:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);border-radius:0}
.cheer-bar .ico{background:transparent;border:1px solid var(--rule);color:var(--accent)}
.cheer-bar b{font-family:var(--font-serif);font-weight:500;font-size:19px}
.cheer-big{background:var(--ink);color:var(--bg);font-family:var(--font-sans)}
.cheer-big:hover{background:var(--accent);color:#fff}
.cheer-big.on{background:var(--accent);color:#fff}
html[data-theme="dark"] .cheer-big.on,html[data-theme="dark"] .cheer-big:hover{color:var(--bg)}
.cheer-big .n{background:rgba(127,127,127,.25)}
.quick button{font-family:var(--font-sans)}
.quick button:hover{background:var(--panel)}
.comments{gap:20px}
.comments-head h3{font-family:var(--font-serif);font-size:24px;font-weight:400}
.comments-head .n{background:var(--panel);color:var(--muted)}
.comment-form{background:transparent;border:1px solid var(--rule)}
.comment-form textarea{background:var(--field);border:1px solid var(--rule);border-radius:2px;font-family:var(--font-serif);font-size:17px;color:var(--ink)}
.comment-form textarea:focus{outline:1px solid var(--accent)}
.comment{background:transparent;border:0;border-top:1px solid var(--rule);border-radius:0;padding:18px 0}
.comment p{font-family:var(--font-serif);font-size:18px;line-height:1.8;color:var(--ink);padding-left:2rem}
.comment .who{font-family:var(--font-sans)}

/* ---------- 7. มือถือ ---------- */
@media (max-width:900px){
  .story-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
  .writer-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .story-feat{grid-template-columns:1fr!important;gap:22px!important}
  .story-feat .story-media{height:300px}
  .story-feat .story-title{font-size:40px}
  .series-list{grid-template-columns:1fr}
}
@media (max-width:720px){
  .mast-top{grid-template-columns:44px 1fr auto;padding:12px 8px 0 8px}
  .mast-links,.mast-pill,.only-wide{display:none}
  .mast-burger{display:flex}
  .wordmark{font-size:26px}
  .mast-nav{justify-content:flex-start;overflow-x:auto;gap:22px;font-size:15px;padding:10px 22px 12px;scrollbar-width:none}
  .mast-rule{width:100%;border-top:0;height:0;border-bottom:1px solid var(--rule)}
  .site-menu{left:8px;top:58px}
  .wrap{padding:0 22px}
  .site-footer{padding:28px 22px 36px;margin-top:56px;flex-direction:column;align-items:flex-start}
  .block-sec{margin-top:44px}
  .sec-title{margin-bottom:8px}
  .sec-title span{font-size:12px}
  .feature{margin:0 -22px}
  .feature .story-feat{gap:0!important}
  .story-feat .story-media{height:260px}
  .story-feat .story-body{padding:22px 22px 0;gap:10px}
  .story-feat .story-title{font-size:32px;line-height:1.35}
  .story-feat .dek{font-size:17px}
  .story-feat .story-poem{height:auto;padding:28px 22px;font-size:22px;margin:0 22px}
  .story-feat .av{display:none}
  /* รายการแบบแถว: ชื่อเรื่องซ้าย รูปจิ๋วขวา */
  .story-grid{display:flex;flex-direction:column;gap:0}
  .story-grid .story{display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:6px 14px;padding:20px 0;border-bottom:1px solid var(--rule);align-items:start}
  .story-grid .story-body{grid-column:1;grid-row:1;gap:6px}
  .story-grid .story-media{grid-column:2;grid-row:1;height:92px;width:92px}
  .story-grid .story-title{font-size:20px;line-height:1.45}
  .story-grid .dek{display:none}
  .story-grid .story-poem{grid-column:1/-1;grid-row:1;height:auto;padding:16px 0;font-size:17px;margin-bottom:6px}
  .story-grid .is-poem .story-body{grid-row:2;grid-column:1/-1}
  .story-grid .story .meta{font-size:12px}
  .story-grid-3 .story-media{height:92px}
  .quote-band{margin-top:44px;padding:36px 22px}
  .quote-band p{font-size:24px}
  .writer-row{display:flex;overflow-x:auto;gap:18px;margin:0 -22px;padding:0 22px;scrollbar-width:none}
  .writer{flex:none;width:84px}
  .writer img{width:64px;height:64px}
  .writer b{font-size:14px;line-height:1.4}
  .writer small{display:none}
  .list-head{padding:36px 0 4px}
  .list-head h1{font-size:34px}
  .author-hero{flex-direction:column;text-align:center;margin-top:32px;gap:18px;padding-bottom:28px}
  .author-hero .av-wrap{width:104px;height:104px}
  .ah-body h1{font-size:32px}
  .ah-stats{justify-content:center}
  .sub-nav{justify-content:flex-start;gap:20px;font-size:15px;margin:0 -22px;padding:14px 22px}
  .author-row{gap:16px;padding:22px 0}
  .author-row img{width:68px;height:68px}
  .ar-body h2{font-size:22px}
  /* บทความ */
  .read-toolbar{padding:8px 22px 0}
  .read-toolbar-inner{justify-content:space-between}
  .tool-group .lbl{display:none}
  .article{padding:36px 22px 0}
  .art-head{gap:16px}
  .art-title{font-size:34px;line-height:1.35}
  .art-byline{font-size:13px;gap:6px 8px}
  .art-byline .av{width:32px;height:32px}
  .prose{font-size:18px;line-height:1.9;gap:22px}
  .reader[data-size="0"] .prose{font-size:16px}
  .reader[data-size="2"] .prose{font-size:20px}
  .prose .drop{font-size:68px;padding:8px 10px 0 0}
  .fig-hero{width:calc(100% + 44px);max-width:none;margin:36px -22px}
  .fig-hero figcaption{padding:0 22px}
  .fig-side{width:44%;max-width:none}
  .fig-side.left{margin-left:0;margin-right:16px}
  .fig-side.right{margin-right:0;margin-left:16px}
  .poem{margin:40px 0;padding:32px 0 28px}
  .poem-lines{font-size:19px;gap:14px}
  .poem-row{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:0 6px}
  .poem-row span:nth-child(2){padding-left:2.2em}
  .poem-row span:only-child{align-self:center}
  .quote-block blockquote{font-size:25px}
  .quote-block{margin:12px 0 40px}
  .code-block{margin:28px 0}
  .code-block pre{font-size:13px}
  .author-box{gap:16px}
  .author-box img{width:60px;height:60px}
  .cheer-bar{flex-direction:column;align-items:flex-start;gap:14px}
  .more-sec{margin-top:48px}
  .story-grid-3{display:flex}
  .page-head h1{font-size:28px}
  .auth-card{margin-top:28px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* หน้าฟอร์ม/จัดการ: คอลัมน์แคบอ่านง่าย */
main.page > .wrap:has(#write-form,.manage-bar,.user-list,.auth-card,.cat-form,details.pen){max-width:860px}