.reading-page { padding: 32px 0 80px; min-height: 70vh; }
.breadcrumbs { display:flex; gap:14px; font-size:12px; margin-bottom:40px; color:var(--muted); }
.article-content { max-width:850px; margin:auto; overflow-wrap:anywhere; font-size:16px; line-height:1.9; }
.article-content h1 { font-size:clamp(35px,5vw,60px); margin:0 0 30px; line-height:1.12; }
.article-content h2 { font-size:clamp(26px,3vw,36px); margin:42px 0 18px; line-height:1.25; }
.article-content h3 { font-size:22px; margin:28px 0 14px; }
.article-content h4 { font-size:18px; margin:24px 0 12px; }
.article-content p { margin:16px 0; }
.article-content li { margin:8px 0; color:var(--muted); }
.article-content ul,.article-content ol { padding-left:25px; margin:20px 0; }
.article-content a { color:var(--accent); text-decoration:underline; text-underline-offset:4px; }
.article-content img { display:block; max-width:100%; height:auto; margin:25px auto; border-radius:var(--radius); }
.article-content a img { display:inline-block; margin:6px 4px; vertical-align:middle; }
.article-content iframe { display:block; width:100%; height:auto; aspect-ratio:16/9; border:0; margin:25px 0; border-radius:var(--radius); }
.article-content pre { overflow:auto; padding:22px; border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); max-width:100%; }
.article-content code { font-family:ui-monospace,SFMono-Regular,monospace; font-size:.88em; }
.article-content pre code { white-space:pre; }
.article-content blockquote { border-left:3px solid var(--accent); margin:25px 0; padding:8px 25px; background:var(--surface); }
.article-content hr { border:0; border-top:1px solid var(--line); margin:35px 0; }
.article-content table { display:block; overflow:auto; border-collapse:collapse; margin:25px 0; }
.article-content th,.article-content td { border:1px solid var(--line); padding:10px 14px; text-align:left; }
.portfolio-page { max-width:none; }
.portfolio-page header { max-width:800px; margin:20px 0 48px; }
.portfolio-page #portfolio>div,.library-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.portfolio-page #portfolio a,.library-item { display:block; padding:28px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); text-decoration:none; }
.portfolio-page #portfolio a:hover,.library-item:hover { border-color:var(--accent); }
.portfolio-page #portfolio h3,.library-item h2 { font-family:inherit; font-weight:600; font-size:23px; margin:0 0 15px; line-height:1.35; }
.portfolio-page #portfolio p { font-size:14px; margin:0; }
.library-grid { margin-top:35px; }
.library-item span { font-size:12px; color:var(--muted); }
.article-content .library-item { text-decoration:none; }
.site-header nav { flex-wrap:wrap; }
@media(max-width:760px) {
  .reading-page { padding-top:22px; }
  .breadcrumbs { margin-bottom:28px; }
  .article-content { font-size:16px; }
  .portfolio-page #portfolio>div,.library-grid { grid-template-columns:1fr; }
  .portfolio-page #portfolio a,.library-item { padding:24px; }
}