/* Reading surfaces extend the existing XIANG black-and-white design. */
.blog-page { font-family: "Noto Sans TC", system-ui, sans-serif; }
.blog-page .nav__menu { font-family: "Noto Sans TC", system-ui, sans-serif; }
.blog-page :focus-visible { outline: 3px solid #555; outline-offset: 5px; }
.blog-skip { position: fixed; top: -80px; left: 16px; z-index: 100; padding: 12px 18px; background: #000; color: #fff; }
.blog-skip:focus { top: 8px; }
.blog-shell { max-width: 1212px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.blog-main { padding-top: 104px; padding-bottom: 100px; min-height: 65vh; }
.blog-breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 52px; font-size: 13px; color: #666; }
.blog-breadcrumb a { padding: 6px 0; text-decoration: underline; text-underline-offset: 4px; }
.blog-eyebrow { font-family: "Jersey 25", "Noto Sans TC", sans-serif; font-size: 24px; letter-spacing: .08em; line-height: 1.2; }
.blog-heading { margin-bottom: 56px; max-width: 760px; }
.blog-heading h1 { font-size: clamp(36px, 5vw, 64px); letter-spacing: -.035em; line-height: 1.25; margin: 14px 0 22px; }
.blog-heading > p:last-child { color: #555; font-size: 17px; line-height: 1.9; }
.blog-count { font-size: 13px; color: #666; padding-bottom: 18px; border-bottom: 1px solid #ddd; margin-bottom: 30px; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: stretch; }
.blog-grid .post { min-width: 0; display: flex; flex-direction: column; background: #f5f5f5; border-radius: 18px; overflow: hidden; }
.blog-grid .post__img { width: 100%; aspect-ratio: 1.905; overflow: hidden; }
.blog-grid .post__img img { width: 100%; height: 100%; object-fit: cover; }
.blog-grid .post__body { display: flex; flex-direction: column; flex: 1; padding: 22px; }
.post .post__meta { display: block; color: #666; font: 12px/1.7 "Noto Sans TC", system-ui, sans-serif; margin: 0 0 12px; }
.post .post__meta time { display: inline; margin: 0; color: inherit; }
.blog-grid .post h3 { font: 700 20px/1.6 "Noto Sans TC", system-ui, sans-serif; margin-bottom: 12px; overflow-wrap: anywhere; }
.post .post__excerpt { font: 14px/1.9 "Noto Sans TC", system-ui, sans-serif; color: #555; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post__read { display: flex; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 22px; font: 500 13px/1.7 "Noto Sans TC", system-ui, sans-serif; }
.blog-grid .post--text { border-top: 6px solid #000; }
.blog-grid .post:hover h3 { text-decoration: underline; text-underline-offset: 5px; }
.blog-pagination { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; border-top: 1px solid #ddd; padding-top: 24px; margin-top: 48px; font-size: 14px; }
.blog-pagination a { min-height: 44px; display: flex; align-items: center; }
.blog-pagination a:last-child { justify-content: flex-end; }
.article { max-width: 840px; margin: 0 auto; }
.article-heading h1 { font-size: clamp(30px, 4.1vw, 48px); line-height: 1.45; letter-spacing: -.025em; margin: 20px 0 24px; overflow-wrap: anywhere; }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; color: #666; font-size: 12px; line-height: 1.9; padding-bottom: 30px; border-bottom: 1px solid #ddd; }
.article-cover { margin: 34px 0 42px; }
.article-cover img { width: 100%; height: auto; border-radius: 14px; }
.article-content { padding-top: 30px; color: #272727; font-size: 17px; line-height: 2; overflow-wrap: anywhere; }
.article-content p { margin: 0 0 1.35em; }
.article-content h2 { font-size: 27px; line-height: 1.6; margin: 2.2em 0 .8em; color: #000; }
.article-content h3 { font-size: 22px; line-height: 1.6; margin: 1.8em 0 .75em; color: #000; }
.article-content h4, .article-content h5, .article-content h6 { font-size: 19px; line-height: 1.7; margin: 1.5em 0 .6em; }
.article-content :is(h2,h3,h4,h5,h6) { scroll-margin-top: 90px; }
.article-content :is(ul,ol) { padding-left: 1.5em; margin: 0 0 1.5em; }
.article-content li + li { margin-top: .5em; }
.article-content a, .article-source a { text-decoration: underline; text-underline-offset: 4px; }
.article-content img { max-width: 100%; height: auto; border-radius: 10px; margin: 24px auto; }
.article-content figure { margin: 28px 0; }
.article-content figcaption { font-size: 13px; color: #666; text-align: center; }
.article-content blockquote { margin: 28px 0; padding: 8px 0 8px 24px; border-left: 3px solid #000; }
.article-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 24px 0; font-size: 15px; }
.article-content th, .article-content td { border: 1px solid #ddd; padding: 12px; text-align: left; min-width: 120px; }
.article-content th { background: #f5f5f5; }
.article-content pre { overflow-x: auto; background: #f5f5f5; padding: 20px; border-radius: 8px; font-size: 14px; }
.article-content hr { border: 0; border-top: 1px solid #ddd; margin: 40px 0; }
.article-source { margin-top: 56px; padding: 26px 28px; background: #f5f5f5; border-radius: 14px; font-size: 13px; line-height: 1.9; color: #555; }
.article-source h2 { font-size: 15px; color: #000; margin: 0 0 12px; }
.article-source p + p { margin-top: 12px; }
.article-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-top: 38px; font-size: 14px; }
.article-actions > a { min-height: 44px; display: inline-flex; align-items: center; }
.blog-empty { max-width: 640px; margin: 50px auto 80px; padding: 48px 0; }
.blog-empty h1, .blog-empty h2 { font-size: clamp(26px, 4vw, 40px); line-height: 1.5; margin: 16px 0; }
.blog-empty > p:not(.blog-eyebrow) { line-height: 1.9; color: #555; margin-bottom: 28px; }
.blog-recovery { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; font-size: 14px; }
.blog-footer { background: #f5f5f5; border-top: 1px solid #e5e5e5; padding: 48px 0; font-size: 13px; line-height: 1.9; }
.blog-footer img { margin-bottom: 24px; }
.blog-footer p + p { margin-top: 5px; color: #555; }
.blog-footer nav { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 22px; }
.blog-footer a { min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 1000px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .blog-shell { padding-left: 22px; padding-right: 22px; }
  .blog-main { padding-top: 88px; padding-bottom: 60px; }
  .blog-breadcrumb { margin-bottom: 32px; }
  .blog-heading { margin-bottom: 36px; }
  .blog-heading > p:last-child { font-size: 15px; }
  .blog-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .blog-grid .post__body { padding: 22px; }
  .article-heading h1 { font-size: 29px; line-height: 1.5; }
  .article-meta { gap: 6px 14px; }
  .article-meta > span:first-child { width: 100%; }
  .article-cover { margin: 28px 0 16px; }
  .article-content { font-size: 16px; line-height: 1.95; }
  .article-content h2 { font-size: 24px; }
  .article-content h3 { font-size: 20px; }
  .article-source { padding: 22px; }
  .article-actions { align-items: flex-start; flex-direction: column; gap: 16px; }
  .blog-pagination { font-size: 13px; gap: 8px; }
  .blog-empty { margin: 18px 0 40px; }
}

/* 設計知識 cards follow the homepage design (Figma) on both the homepage and /blog/:
   white card + soft shadow, image 375:262, title → 2-line excerpt → date */
.blog-page { background: var(--gray-100); }
.blog-count { border-bottom-color: #e2e2e2; }
.blog-grid { gap: 46px; }
.blog-grid .post { display: block; background: #fff; border-radius: var(--radius-lg); }
.blog-grid .post--text { border-top: 0; }
.blog-grid .post__img { aspect-ratio: 375 / 262; }
.post .post__body, .blog-grid .post__body { display: flex; flex-direction: column; padding: 22px 20px 20px; }
.post h3, .blog-grid .post h3 { order: 1; margin: 0; font: 700 20px/1.5 "Noto Sans TC", system-ui, sans-serif; }
.post .post__excerpt { order: 2; margin-top: 12px; font-size: 15px; line-height: 1.55; color: #777; -webkit-line-clamp: 2; }
.post .post__meta { order: 3; margin: 14px 0 0; font-size: 0; }   /* show the date only, like the design */
.post .post__meta time { font-size: 12px; color: #777; }
.post__read { display: none; }
.blog-grid .post:hover h3 { text-decoration: none; }
@media (max-width: 1000px) { .blog-grid { gap: 24px; } }
/* posts without a cover get a quiet placeholder so every card keeps the same shape */
.post--text::before { content: ""; display: block; aspect-ratio: 375 / 262; background: #ececec url(/assets/mark.png) center / 64px no-repeat; }
.post--text .post__body { justify-content: flex-start; }