/* ブログ一覧・記事ページ専用（既存の部品で足りない分だけ） */

/* 題が長いので3行で切る */
.post h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;word-break:auto-phrase}
/* 画像が無い記事の代わりの枠 */
.card-img.noimg{display:flex;align-items:center;justify-content:center;background:var(--tint);font-family:var(--en);font-weight:900;font-size:clamp(18px,1.8vw,30px);letter-spacing:.06em;color:var(--slate)}
/* note への案内 */
.blog-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 20px;margin-top:clamp(40px,4vw,72px);color:var(--ink);font-weight:500;text-align:center}

/* 記事ページの頭：題が長いので小さめ・座布団なし */
.ph-single .ph-side{max-width:none}
.ph-single .prose-meta{margin-bottom:12px}
.ph-single h1{font-size:clamp(20px,2.2vw,40px);line-height:1.6;word-break:auto-phrase;text-wrap:pretty}

/* 動画（16:9） */
.prose .yt{position:relative;aspect-ratio:16/9;background:var(--ink)}
.prose .yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* 前の記事／次の記事 */
.pn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;max-width:46em;margin:clamp(48px,5vw,96px) auto 0;border-top:1px solid var(--line)}
.pn a{display:block;padding:clamp(20px,2vw,32px) 0;color:var(--ink)}
.pn-prev{padding-right:clamp(16px,2vw,32px)!important}
.pn-next{padding-left:clamp(16px,2vw,32px)!important;text-align:right;border-left:1px solid var(--line)}
.pn-lb{display:block;font-size:12px;font-weight:900;letter-spacing:.06em;color:var(--accent)}
.pn-tt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;margin-top:8px;font-size:clamp(14px,1vw,16px);font-weight:700;line-height:1.7;word-break:auto-phrase}
.pn a:hover .pn-tt{color:var(--accent-deep)}
.pn-back{margin-top:clamp(32px,3vw,56px);text-align:center}
@media (max-width:639.98px){
  .pn{grid-template-columns:1fr}
  .pn-prev,.pn-next{padding-left:0!important;padding-right:0!important}
  .pn-next{text-align:left;border-left:0;border-top:1px solid var(--line)}
}


/* 記事ページの頭：左に日付と英字、右に記事の題（下端を英字の足元にそろえる） */
.ph-single .prose-meta{order:1;margin:0 0 clamp(10px,1vw,16px)}
.ph-single h1{order:2;margin-bottom:clamp(24px,2.6vw,40px)}
@media (min-width:1024px){
  .ph-single .prose-meta{grid-column:1;grid-row:1;margin:0 0 clamp(14px,1.5vw,28px)}
  .ph-single h1{grid-column:2;grid-row:1 / span 2;align-self:end;justify-self:stretch;margin:0;padding-bottom:clamp(16px,1.7vw,32px)}
}