:root{
  --paper:#F6F7F5; --ink:#15191C; --ochre:#965F14; --leaf:#6B6F68; --rule:#DDDFD9;
  --measure:64ch;
  --head:"Literata",Georgia,serif;
  --body:"Source Sans 3",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#14120F; --ink:#E9E6DE; --ochre:#D9A253; --leaf:#9A9589; --rule:#2B2721;
  }
}
:root[data-theme="dark"]{
  --paper:#14120F; --ink:#E9E6DE; --ochre:#D9A253; --leaf:#9A9589; --rule:#2B2721;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.65;
  font-variant-numeric:tabular-nums;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--ochre); outline-offset:3px; border-radius:2px}
img{max-width:100%; display:block}

/* ---------- shell: reading column + marginalia rail ---------- */
.wrap{max-width:1160px; margin:0 auto; padding:0 20px}
.grid{display:block}
@media (min-width:1024px){
  .grid{display:grid; grid-template-columns:150px minmax(0,var(--measure)) 1fr; column-gap:48px}
  .col{grid-column:2}
}

/* signature move: marginalia rail (desktop only) */
.mark{display:none}
@media (min-width:1024px){
  .mark{
    display:block; grid-column:1; position:relative;
    font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
    color:var(--leaf); padding-top:.55rem; text-align:right; padding-right:22px;
  }
  .mark::after{
    content:""; position:absolute; top:0; right:0; bottom:-3.5rem; width:1px; background:var(--rule);
  }
  .mark::before{
    content:""; position:absolute; top:.95rem; right:-3px; width:7px; height:7px;
    background:var(--ochre); border-radius:50%;
  }
}

/* ---------- header ---------- */
header{border-bottom:1px solid var(--rule)}
.bar{display:flex; align-items:baseline; justify-content:space-between; gap:24px; padding:22px 0; flex-wrap:wrap}
.wordmark{
  font-family:var(--head); font-weight:800; font-size:19px; letter-spacing:-.01em;
  text-decoration:none; white-space:nowrap;
}
nav{display:flex; gap:26px; flex-wrap:wrap}
nav a{
  text-decoration:none; font-size:15px; color:var(--leaf);
  border-bottom:1px solid transparent; padding-bottom:2px;
  transition:color 160ms ease-out, border-color 160ms ease-out;
}
nav a:hover{color:var(--ink); border-bottom-color:var(--ochre)}

/* ---------- type ---------- */
h1{
  font-family:var(--head); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(2.4rem,6vw,4.1rem); line-height:1.06; margin:0 0 1.4rem;
}
h2{
  font-family:var(--head); font-weight:700; letter-spacing:-.01em;
  font-size:clamp(1.55rem,3vw,2.1rem); line-height:1.2; margin:0 0 1rem;
}
h3{font-family:var(--head); font-weight:700; font-size:1.12rem; line-height:1.3; margin:0 0 .3rem}
p{margin:0 0 1.15rem; max-width:var(--measure)}
.lead{font-size:1.2rem; line-height:1.55}
.quiet{color:var(--leaf)}
.small{font-size:14.5px}

section{padding:74px 0; border-bottom:1px solid var(--rule)}
.eyebrow{
  display:block; font-size:12px; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ochre); margin-bottom:1rem;
}
@media (min-width:1024px){.eyebrow{display:none}}

/* ---------- hero ---------- */
.hero{padding:86px 0 74px}
/* ภาพลุงตัดพื้นหลังออกแล้ว (portrait.png) — ยืนอยู่บนกระดาษตรง ๆ ไม่มีกรอบ ไม่มีกล่อง */
.portrait{margin:2.2rem 0 0}
.portrait img{
  width:100%; max-width:330px; height:auto;
  filter:saturate(.94);            /* ลดความจัดของสีให้เข้ากับพื้นกระดาษ */
}
@media (min-width:1024px){
  .portrait{grid-column:3; margin:-1.2rem 0 0; padding-left:4px}
  .portrait img{max-width:330px}
}
.facts{
  margin-top:2.2rem; padding-top:1.4rem; border-top:1px solid var(--rule);
  display:flex; flex-wrap:wrap; gap:8px 30px; font-size:14.5px; color:var(--leaf); max-width:var(--measure);
}
.facts b{color:var(--ink); font-weight:600}

/* ---------- books ---------- */
.books{display:flex; flex-direction:column; gap:34px; margin-top:2rem}
.book{
  display:grid; grid-template-columns:96px minmax(0,1fr); gap:22px; align-items:start;
  padding-bottom:34px; border-bottom:1px solid var(--rule);
}
.book:last-child{border-bottom:0; padding-bottom:0}
.book img{border-radius:2px; border:1px solid var(--rule); width:96px; height:auto}
.book .sub{color:var(--leaf); font-size:15px; margin:.15rem 0 .8rem; max-width:52ch}
.buy{
  display:inline-block; text-decoration:none; font-size:14.5px; font-weight:600;
  padding:7px 15px; border:1px solid var(--ink); border-radius:4px;
  transition:color 160ms ease-out, border-color 160ms ease-out, background-color 160ms ease-out;
}
.buy:hover{background:var(--ink); color:var(--paper)}
.penname{font-size:13.5px; color:var(--leaf); margin:.65rem 0 0}

/* ---------- research ---------- */
.works{margin:1.6rem 0 0; padding:0; list-style:none; max-width:var(--measure)}
.works li{padding:14px 0; border-bottom:1px solid var(--rule)}
.works li:last-child{border-bottom:0}
.works .t{font-weight:600}
.status{
  display:inline-block; font-size:12px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--leaf); margin-top:3px;
}
.status.live{color:var(--ochre)}

/* ---------- contact ---------- */
.mailto{
  display:inline-block; text-decoration:none; font-family:var(--head); font-weight:700;
  font-size:1.25rem; border-bottom:2px solid var(--ochre); padding-bottom:3px;
  transition:color 160ms ease-out;
}
.mailto:hover{color:var(--ochre)}

footer{padding:40px 0 60px; font-size:14px; color:var(--leaf)}

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

/* ═══════════ บทความ (articles) ═══════════ */
.crumb{font-size:13.5px; color:var(--leaf); margin:0 0 1.4rem}
.crumb a{text-decoration:none; border-bottom:1px solid transparent;
  transition:border-color 160ms ease-out}
.crumb a:hover{border-bottom-color:var(--ochre)}

/* บัตรหมวด — ไม่ใช่การ์ดไอคอน 3 ใบ เป็นรายการแบบตัวหนังสือนำ */
.cats{margin:2rem 0 0; padding:0; list-style:none; max-width:var(--measure)}
.cats li{padding:22px 0; border-bottom:1px solid var(--rule)}
.cats li:last-child{border-bottom:0}
.cats a{text-decoration:none; display:block}
.cats h3{margin-bottom:.25rem; transition:color 160ms ease-out}
.cats a:hover h3{color:var(--ochre)}
.cats .d{color:var(--leaf); font-size:15px; margin:0}
.cats .n{font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--leaf); margin-top:.45rem; display:block}

/* รายการบทความในหมวด */
.posts{margin:2rem 0 0; padding:0; list-style:none; max-width:var(--measure)}
.posts li{padding:26px 0; border-bottom:1px solid var(--rule)}
.posts li:last-child{border-bottom:0}
.posts a{text-decoration:none; display:grid; grid-template-columns:132px minmax(0,1fr); gap:20px; align-items:start}
.posts img{width:132px; height:88px; object-fit:cover; border-radius:2px; filter:saturate(.94)}
.posts h3{margin-bottom:.25rem; transition:color 160ms ease-out}
.posts a:hover h3{color:var(--ochre)}
.posts .d{color:var(--leaf); font-size:15px; margin:0}
.posts .meta{font-size:12px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--leaf); margin-top:.5rem}
@media (max-width:560px){
  .posts a{grid-template-columns:1fr; gap:12px}
  .posts img{width:100%; height:180px}
}

/* ตัวบทความ */
.lede{font-size:1.18rem; line-height:1.55; color:var(--leaf); margin:0 0 2rem; max-width:var(--measure)}
.hero-img{margin:0 0 2.4rem}
.hero-img img{width:100%; height:auto; border-radius:2px; filter:saturate(.94)}
.hero-img figcaption{font-size:13px; color:var(--leaf); margin-top:.55rem}
.prose{max-width:var(--measure)}
.prose h2{margin-top:2.6rem; font-size:clamp(1.35rem,2.4vw,1.7rem)}
.prose p{font-size:17.5px; line-height:1.72}
.prose p:first-of-type{font-size:19px}
.byline{font-size:14px; color:var(--leaf); padding-top:1.5rem; margin-top:2.8rem; border-top:1px solid var(--rule); max-width:var(--measure)}
.next{margin-top:2.6rem; max-width:var(--measure)}
.next a{text-decoration:none; font-weight:600; border-bottom:2px solid var(--ochre); padding-bottom:2px}
.prose h3{font-family:var(--head); font-weight:700; font-size:1.05rem; line-height:1.35;
  margin:2rem 0 .45rem; color:var(--ink)}