/* ============================================================
   記事（บทความ）
   ------------------------------------------------------------
   ★ ここだけ、ほかのページと考え方を変えています。
     商品ページは「探して、選んで、買う」ための画面ですが、
     記事は「読む」ための画面です。読むための設計は、
     余白と行送りと一行の長さでほとんど決まります。

   ★ タイ語の組みについて
     タイ文字は上下に母音記号と声調記号が積みます。
     日本語や英語と同じ行送りだと、記号どうしが詰まって読みにくい。
     本文は 1.95 まで開けています。
   ============================================================ */

/* ── 記事の入口（ヒーロー）───────────────────────── */
/* ★ 地は白にします
     もともと淡いベージュ（--tint）の帯の中に、白い箱を置き、その中に
     もう一度白い枠つきの絵を置いていました。枠が二重で、
     「箱の中の箱」に見えていました。
     地を白にして外側の箱をやめ、絵に細い罫を1本だけ残します。
     挿絵は白い背景のものと透明のものが混ざっているので、
     地が白なら、どちらも同じように見えます。 */
.art-hero{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  padding:clamp(40px,7vw,84px) 0 clamp(32px,5vw,56px);
}
.art-hero__inner{max-width:min(760px, 100% - clamp(32px,6vw,88px)); margin:0 auto}
.art-hero__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
  margin:0 0 18px;
}
.art-kicker{
  font-family:var(--fd); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--blue-deep); background:var(--blue-pale);
  padding:4px 11px; border-radius:2px;
}
.art-hero__meta time,
.art-hero__read{font-size:var(--t-xs); color:var(--grey); font-family:var(--fd)}
.art-hero__meta .dot{color:var(--line)}
.art-hero h1{
  font-family:var(--fd); font-weight:700; color:var(--ink);
  font-size:clamp(26px,4.2vw,40px); line-height:1.4; letter-spacing:.01em;
  margin:0; text-wrap:balance;
}
.art-hero__fig{
  margin:clamp(24px,4vw,34px) 0 0;
  display:grid; place-items:center;
}
/* ★ 見出し画像も枠をやめます（同じ理由）。 */
.art-hero__fig img{
  max-width:min(340px,80%); height:auto; display:block;
}

/* ── 本文と目次 ────────────────────────────────── */
.art-body{
  max-width:var(--page); margin:0 auto;
  padding:clamp(32px,5vw,60px) 0 clamp(40px,6vw,72px);
  display:grid; gap:clamp(24px,4vw,52px);
  grid-template-columns:1fr;
}
.art-body > *{min-width:0}
/* 目次が無い記事は1列。本文は真ん中に置きます。
   ★ 以前は目次の有無にかかわらず 230px + 本文 の2列にしていたので、
     目次が出ない記事では本文が 230px の列に入り、文字も図も
     細い帯に潰れていました。 */
.art-body:not(.has-toc) .art-prose{margin-inline:auto}
@media (min-width:1000px){
  .art-body.has-toc{grid-template-columns:230px minmax(0,1fr); align-items:start}
  /* 目次は本文の左。読みながら現在地が分かるように貼り付けます。
     ★ 高さに上限を付けます。
       見出しが20個ある記事だと、目次だけで 778px になります。
       1440×800 のノートPCでは画面に入りきらず、下のほうの項目に
       永久にたどり着けません（貼り付いているので流れていかない）。
       画面に収まらない分は、目次の中だけを送れるようにします。 */
  .art-toc{
    position:sticky; top:96px;
    max-height:calc(100vh - 128px);
    overflow-y:auto; overscroll-behavior:contain;
    padding-right:6px;
  }
  /* 中身が続いていることが分かるように、細い罫を1本 */
  .art-toc::-webkit-scrollbar{width:6px}
  .art-toc::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px}
  .art-toc{scrollbar-width:thin; scrollbar-color:var(--line) transparent}
  /* 画面が広いときは開閉させる理由が無いので、つまみを隠して開いたままに */
  .art-toc summary{display:none}
}

.art-toc{font-size:var(--t-xs)}
.art-toc__h{
  font-family:var(--fd); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--grey); margin:0 0 12px; padding-bottom:10px; border-bottom:1px solid var(--line);
}
.art-toc ol{list-style:none; margin:0; padding:0; counter-reset:toc}
.art-toc li{counter-increment:toc; margin:0 0 2px}
.art-toc a{
  display:grid; grid-template-columns:1.9em 1fr; gap:4px;
  padding:7px 0; color:var(--grey); line-height:1.6; text-decoration:none;
  border-left:2px solid transparent; padding-left:10px; margin-left:-12px;
  transition:color .14s ease, border-color .14s ease;
}
.art-toc a::before{
  content:counter(toc,decimal-leading-zero);
  font-family:var(--fd); color:var(--line); font-size:11px; padding-top:2px;
}
.art-toc a:hover{color:var(--ink); text-decoration:none}
.art-toc a:hover::before{color:var(--blue-deep)}
.art-toc a.on{color:var(--ink); border-left-color:var(--blue-deep)}
.art-toc a.on::before{color:var(--blue-deep)}

/* モバイルでは開閉。長い記事ほど、目次は閉じていたほうが読み始めやすい。 */
@media (max-width:999px){
  .art-toc{border:1px solid var(--line); background:var(--tint); padding:0}
  .art-toc__h{display:none}
  .art-toc details{margin:0}
  .art-toc summary{
    list-style:none; cursor:pointer; padding:14px 16px;
    font-family:var(--fd); font-size:var(--t-sm); color:var(--ink);
    display:flex; align-items:center; justify-content:space-between;
  }
  .art-toc summary::-webkit-details-marker{display:none}
  .art-toc summary::after{content:"＋"; color:var(--blue-deep); font-size:15px}
  .art-toc details[open] summary::after{content:"−"}
  .art-toc ol{padding:0 16px 14px}
  .art-toc a{margin-left:0; padding-left:8px}
}

/* ── 読みもの本体 ───────────────────────────────── */
.art-prose{
  /* ★ 幅は px で決めます。
     62ch にしていましたが、この書体だと 62ch = 約 394px にしかならず、
     読む列としては細すぎました（1文字の幅が狭い書体なので）。
     タイ語の本文は 650〜700px あたりがいちばん読みやすい。 */
  max-width:min(700px, 100%);
  font-size:clamp(15.5px,1.05vw,17px);
  line-height:1.95;            /* タイ文字の記号が積める高さ */
  color:var(--ink);
}
.art-prose > *:first-child{margin-top:0}
.art-prose p{margin:0 0 1.5em}

/* 見出しは、番号ではなく細い罫で区切ります。
   記事は手順書ではないので、番号を振ると順番があるように読めてしまいます。 */
.art-prose h2{
  font-family:var(--fd); font-weight:700; color:var(--ink);
  font-size:clamp(19px,2.1vw,24px); line-height:1.55;
  margin:2.4em 0 .9em; padding-top:1.1em;
  border-top:1px solid var(--line);
  scroll-margin-top:96px;      /* 目次から飛んだとき、ヘッダに隠れないように */
  text-wrap:balance;
}
.art-prose h2:first-child{margin-top:0; padding-top:0; border-top:0}
.art-prose h3,
.art-prose h4{
  font-family:var(--fd); font-weight:700; color:var(--ink);
  font-size:clamp(16px,1.5vw,18.5px); line-height:1.6;
  margin:2em 0 .7em; scroll-margin-top:96px;
}
.art-prose h4{color:var(--blue-deep)}

.art-prose a{color:var(--blue-deep); text-underline-offset:3px}
.art-prose strong,.art-prose b{font-weight:700; color:var(--ink)}
.art-prose ul,.art-prose ol{margin:0 0 1.5em; padding-left:1.4em}
.art-prose li{margin-bottom:.55em}
.art-prose blockquote{
  margin:1.8em 0; padding:2px 0 2px 20px;
  border-left:2px solid var(--blue); color:var(--grey);
}

/* 図版。
   ★ 白い台紙と枠をやめました。
     取り込んだ記事の図版は、もともと自分で枠や余白を持っている
     スクリーンショットや作図が多く、こちらで枠を足すと
     「枠の中の枠」になります。地が白なので台紙も要りません。
     小さなロゴやボタン画像まで額装されてしまうのも不自然でした。 */
.art-prose img{
  display:block; height:auto; max-width:100%;
  margin:1.8em auto;
}
.art-prose figure{max-width:100%}
.art-prose figure{margin:1.8em 0}
.art-prose figcaption{
  font-size:var(--t-xs); color:var(--grey); text-align:center; margin-top:10px; line-height:1.7;
}
.art-prose table{
  width:100%; border-collapse:collapse; font-size:var(--t-sm); margin:1.6em 0;
}
.art-prose th,.art-prose td{border:1px solid var(--line); padding:9px 12px; text-align:left}
.art-prose th{background:var(--tint); font-weight:700; color:var(--ink)}
.art-prose hr{border:0; border-top:1px solid var(--line); margin:2.4em 0}

/* ── 記事のあと ───────────────────────────────── */
.art-after{border-top:1px solid var(--line); background:var(--tint)}
.art-after__in{max-width:var(--page); margin:0 auto; padding:clamp(36px,6vw,64px) 0}
.art-after__h{
  font-family:var(--fd); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--grey); margin:0 0 20px;
}

/* ── 記事カード（一覧・関連）──────────────────── */
.art-grid{display:grid; gap:clamp(14px,2vw,22px); grid-template-columns:1fr}
@media (min-width:640px){ .art-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .art-grid{grid-template-columns:repeat(3,1fr)} }
.art-grid > *{min-width:0}

.art-card{
  display:flex; flex-direction:column; background:var(--paper);
  box-shadow:0 0 0 1px var(--line); text-decoration:none; color:inherit;
  transition:box-shadow .16s ease, transform .16s ease;
}
.art-card:hover{
  box-shadow:0 0 0 1px var(--grey), 0 12px 28px rgba(53,54,58,.10);
  transform:translateY(-3px); text-decoration:none;
}
/* ★ 媒体の地も白にします（見出し画像と揃えました）。
     白地に白い台紙だと絵の輪郭が消えるので、台紙の罫だけ残します。 */
.art-card__media{
  aspect-ratio:16/10; background:var(--paper);
  display:grid; place-items:center; overflow:hidden;
  box-shadow:0 1px 0 var(--line);
}
/* 引き伸ばさない。元が 148〜220px しかないので、cover にすると粗くなります。
   ★ 白い台紙を敷きます
     挿絵は、背景が透明のものと白で塗りつぶされたものが混在しています
     （6枚中3枚が不透明）。淡い地に直接置くと、白い四角が浮いて見える絵と
     きれいに溶ける絵が並んでしまいます。全部に白い台紙を敷けば揃います。
     額装したように見えるので、水彩の挿絵にはこのほうが合います。 */
/* ★ 台紙と罫をやめました。
   記事の絵は、もともと自分で枠を持っているものが混ざっています。
   そこにこちらの罫を重ねると、二重の枠に見えます。 */
.art-card__media img{
  max-width:86%; max-height:88%; width:auto; height:auto; display:block;
}
.art-card__ph{
  width:100%; height:100%; display:block;
  background:
    radial-gradient(circle at 30% 35%, var(--blue-pale) 0 34%, transparent 35%),
    radial-gradient(circle at 68% 62%, var(--blush) 0 22%, transparent 23%),
    var(--tint);
  opacity:.85;
}
.art-card__body{padding:16px 18px 20px; display:flex; flex-direction:column; gap:7px; flex:1}
.art-card__kick{
  font-family:var(--fd); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue-deep);
}
.art-card__t{
  font-family:var(--fd); font-weight:700; font-size:var(--t-base); line-height:1.5;
  color:var(--ink); margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.art-card__x{
  font-size:var(--t-xs); color:var(--grey); line-height:1.75; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.art-card__f{
  margin-top:auto; padding-top:10px; font-family:var(--fd);
  font-size:var(--t-xs); color:var(--grey);
  display:flex; gap:8px; align-items:center;
}

/* 一覧の先頭だけ、横長で大きく。読み始めの入口を1つに絞ります。 */
@media (min-width:900px){
  .art-card--lead{grid-column:1 / -1; flex-direction:row; align-items:stretch}
  .art-card--lead .art-card__media{aspect-ratio:auto; flex:0 0 44%; box-shadow:1px 0 0 var(--line)}
  .art-card--lead .art-card__media img{max-width:78%; max-height:80%}
  .art-card--lead .art-card__body{justify-content:center; padding:clamp(24px,3vw,40px)}
  .art-card--lead .art-card__t{font-size:clamp(21px,2.2vw,27px); -webkit-line-clamp:3; line-height:1.45}
  .art-card--lead .art-card__x{font-size:var(--t-sm); -webkit-line-clamp:3}
}

@media (prefers-reduced-motion:reduce){
  .art-card{transition:none}
  .art-card:hover{transform:none}
}