/* Shared reading-first styles; also used by the standalone goals page. */
html { scroll-padding-top: 88px; }
body { background: #fff; color: #303844; letter-spacing: normal; word-break: normal; overflow-wrap: break-word; }
body #navbar { padding-top: 10px; padding-bottom: 10px; background: rgba(255,255,255,.97); border-bottom: 1px solid #edf0f2; box-shadow: none; }
body #navbar .nav-link, body #navbar .logo-text, body #navbar .menu-toggle { color: #1a365d; }
body #navbar .nav-link-active { border-color: #1a365d; }
body #navbar .logo-text { font-size: 21px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid #3182ce; outline-offset: 4px; }
.author-intro { padding: 116px 0 48px; background: #f8fafb; border-bottom: 1px solid #edf0f2; }
.author-intro-inner { display: flex; align-items: flex-start; gap: 28px; }
.author-avatar { width: 96px; height: 96px; flex-shrink: 0; border-radius: 50%; border: 1px solid #e2e8f0; }
.author-eyebrow { font-size: 13px; color: #687586; margin-bottom: 10px; }
.author-intro h1 { font-size: 34px; line-height: 1.3; font-weight: 700; color: #1a365d; margin-bottom: 12px; }
.author-description { font-size: 19px; line-height: 1.7; }
.author-belief { font-size: 14px; line-height: 1.8; color: #687586; margin-top: 8px; }
.author-links { display: flex; gap: 24px; margin-top: 20px; font-size: 14px; color: #226caf; }
body .home-section { padding: 48px 0; }
.section-heading { margin-bottom: 24px; text-align: left; }
body .section-heading h2 { font-size: 26px; line-height: 1.4; margin-bottom: 6px; }
body .section-heading p { margin-top: 0; font-size: 14px; }
.article-feed { display: grid; grid-template-columns: minmax(0,1fr); }
body .article-feed > div:not(.feed-more), body #blog-list > div, body #columns-list > div { border-radius: 0; box-shadow: none; border-bottom: 1px solid #e7ebef; transform: none; }
body .article-feed > div > .p-6, body #blog-list > div > .p-6, body #columns-list > div > .p-6 { padding: 24px 0; }
body .article-feed > div:first-child > .p-6 { padding-top: 0; }
body .article-feed h3 { display: block; overflow: visible; -webkit-line-clamp: unset; font-size: 20px; line-height: 1.55; }
body .article-feed p, body #blog-list > div > .p-6 > p, body #columns-list > div > .p-6 > p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.8; font-size: 15px; margin-bottom: 12px; }
body .article-feed .mb-4.flex { margin-bottom: 10px; }
.feed-more { padding-top: 24px; }
body .feed-more a, body #columns .mt-12 a { background: transparent; color: #226caf; padding: 0; font-size: 14px; }
body #columns .mt-12 { margin-top: 24px; text-align: left; }
body #columns .grid > div, body #projects .grid > div { border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: none; transform: none; }
body #columns .grid p { font-size: 15px; line-height: 1.8; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
body #columns .grid h3, body #projects h3 { font-size: 18px; line-height: 1.6; }
body .page-heading { padding: 104px 0 28px; background: #f8fafb; border-bottom: 1px solid #edf0f2; }
body .page-heading .container { text-align: left; }
body .page-heading h1 { font-size: 32px; line-height: 1.4; color: #1a365d; margin-bottom: 8px; }
body .page-heading p { font-size: 16px; color: #687586; margin-left: 0; }
body .article-list-section { padding: 28px 0 48px; }
body .article-list-section > .container { max-width: 1120px; }
body #blog-list, body #columns-list { gap: 0; }
body .label-filter-wrap { justify-content: flex-start; gap: 8px; }
body .category-filter { font-size: 14px; padding: 6px 14px; }
body .label-collapsed { max-height: 40px; overflow: hidden; }
body .label-filter-toggle { margin-bottom: 20px; }
body .article-list-section form { width: 340px; margin: 0; }
body .reading-section .container, body .article-breadcrumb .container { max-width: 1080px; }
.reading-layout { display: grid; grid-template-columns: minmax(0,740px) 220px; gap: 40px; }
body .reading-aligned { max-width: 740px; margin-left: 0; margin-right: 260px; }
body .reading-section h1 { font-size: 32px; line-height: 1.45; }
body .reading-section .reading-aligned > .mb-12 { margin-bottom: 28px; }
body .reading-layout .detail-content-markdown { min-width: 0; max-width: 740px; }
body #article-toc { width: auto; }
body.article-without-toc .reading-layout { display: block; }
body.article-without-toc .reading-aligned,
body.article-without-toc .reading-layout .detail-content-markdown { margin-left: auto; margin-right: auto; }
body.article-without-toc #article-toc { display: none; }
body .article-breadcrumb ol li:not(:last-child) { flex-shrink: 0; white-space: nowrap; }
body .article-breadcrumb ol li:last-child { min-width: 0; }
.mobile-back { display: none; }
body .detail-content-markdown { overflow-wrap: anywhere; }
body .detail-content-markdown h2, body .detail-content-markdown h3 { color: #1a365d; }
body .detail-content-markdown h2 { font-size: 24px; }
body .detail-content-markdown p { font-size: 17px; line-height: 1.8; padding-bottom: 14px; }
body .detail-content-markdown pre { overflow-x: auto; white-space: pre; margin: 20px 0; border-radius: 6px; background: #4b5a68; }
body .detail-content-markdown pre code.hljs { overflow: visible; min-width: max-content; padding: 18px 20px; }
body .detail-content-markdown pre::-webkit-scrollbar { height: 14px; }
body .detail-content-markdown pre::-webkit-scrollbar-track { background: #e2e8f0; border-radius: 0 0 6px 6px; }
body .detail-content-markdown pre::-webkit-scrollbar-thumb { background: #8093a6; border: 3px solid #e2e8f0; border-radius: 7px; }
body .detail-content-markdown pre::-webkit-scrollbar-thumb:hover { background: #526b85; }
body .detail-content-markdown code { letter-spacing: normal; }
body .detail-content-markdown table { display: block; max-width: 100%; overflow-x: auto; }
body .detail-content-markdown img:hover { transform: none; }
body .detail-content-markdown p:has(img) { padding-left: 0; padding-right: 0; }
body .about-content { padding: 40px 0; background: #fff; }
body .about-content .shadow-xl { box-shadow: none; border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 0; }
body .about-content .md\:w-1\/3 { align-items: flex-start; background: #f4f7fa; }
body .about-content .md\:w-1\/3 p, body .about-content .md\:w-1\/3 h2 { color: #1a365d; }
body .about-content .md\:w-1\/3 img { width: 112px; height: 112px; box-shadow: none; }
body .about-content h2 { font-size: 24px; }
body .about-content p { line-height: 1.85; }
body .about-content .md\:p-12 { padding: 28px; }
body .friend-links { padding: 24px 0; border-top: 1px solid #edf0f2; }
body .friend-links .mb-12 { margin-bottom: 12px; text-align: left; }
body .friend-links h2 { font-size: 14px; margin-bottom: 0; }
body .friend-links .h-1 { display: none; }
body .friend-links .flex { justify-content: flex-start; gap: 20px; }
body .friend-links a { background: transparent; padding: 0; font-size: 14px; }
body .site-footer { padding: 32px 0 24px; background: #f8fafb; border-top: 1px solid #e2e8f0; }
body .site-footer h3, body .site-footer a { color: #334b65; }
body .site-footer p, body .site-footer li, body .site-footer span { color: #687586; font-size: 13px; }
body .site-footer h3 { font-size: 15px; margin-bottom: 12px; }
body .site-footer .border-t { margin-top: 24px; padding-top: 16px; border-color: #e2e8f0; }
body .goal-heading { padding-top: 100px; padding-bottom: 32px; background: #1a365d; }
body .goal-heading h1 { font-size: 32px; }
body .goal-heading > .absolute { display: none; }
body .goal-heading p.text-xl { font-size: 16px; }
body .category-card { scroll-margin-top: 132px; }
body #category-nav { top: 60px; padding: 12px 0; }
@media (max-width: 1023px) {
  .reading-layout { display: block; }
  body .reading-aligned { margin-right: auto; margin-left: auto; }
  body .reading-layout .detail-content-markdown { margin-left: auto; margin-right: auto; }
}
@media (max-width: 767px) {
  body .container { padding-left: 20px; padding-right: 20px; }
  .author-intro { padding: 88px 0 28px; }
  .author-intro-inner { display: block; position: relative; }
  .author-avatar { position: absolute; right: 0; top: 0; width: 64px; height: 64px; }
  .author-eyebrow { font-size: 12px; max-width: calc(100% - 80px); }
  .author-intro h1 { font-size: 28px; margin-bottom: 8px; }
  .author-description { font-size: 17px; }
  .author-belief { font-size: 13px; }
  .author-links { margin-top: 16px; }
  body .home-section { padding: 28px 0; }
  body .section-heading { margin-bottom: 18px; }
  body .section-heading h2 { font-size: 23px; }
  body .article-feed h3, body #blog-list h3, body #columns-list h3 { font-size: 18px; line-height: 1.6; }
  body .page-heading { padding: 88px 0 24px; }
  body .page-heading h1, body .reading-section h1 { font-size: 26px; }
  body .page-heading p { font-size: 14px; line-height: 1.8; }
  body .article-list-section { padding-top: 20px; }
  body .article-breadcrumb { padding-top: 84px; }
  body .article-breadcrumb ol { display: none; }
  .mobile-back { display: inline-block; color: #687586; font-size: 14px; }
  body .reading-section .reading-aligned > .mb-12 { margin-bottom: 24px; }
  body .about-content { padding: 24px 0; }
  body .about-content .md\:w-1\/3 { padding: 24px; }
  body .about-content .md\:p-12 { padding: 20px; }
  body .site-footer .grid { gap: 24px; }
  body .goal-heading h1 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body *, body *::before, body *::after { animation: none !important; transition: none !important; }
}

/* Browsing lists share the page grid; long-form reading retains its narrower column. */
.list-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; margin-bottom: 16px; }
.list-filters { flex: 1; min-width: 0; }
body .list-search { flex: 0 0 340px; }
body .list-search input { padding-right: 42px; height: 40px; }
body .list-toolbar .category-filter { display: inline-flex; align-items: center; white-space: nowrap; }
body .list-toolbar .label-filter-toggle { margin: 8px 0 0; align-items: center; gap: 6px; }
.article-row { position: relative; padding: 24px 0; border-bottom: 1px solid #e7ebef; transition: background-color .15s ease; }
.article-row:hover, .article-row:focus-within { background: #f8fafb; }
.article-row h3 { font-size: 20px; line-height: 1.55; font-weight: 600; margin-bottom: 10px; }
.article-row-link { color: #263f5c; }
.article-row-link::after { content: ''; position: absolute; inset: 0; }
.article-row-link:focus-visible { outline: none; }
.article-row:focus-within { outline: 2px solid #3182ce; outline-offset: 4px; }
.article-excerpt { max-width: 900px; color: #5b6675; font-size: 15px; line-height: 1.8; margin-bottom: 12px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.article-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; color: #6b7583; font-size: 13px; }
.article-label { color: #38638d; background: #eef4f9; padding: 2px 8px; border-radius: 4px; }
.list-status { display: flex; flex-wrap: wrap; gap: 8px 16px; color: #687586; font-size: 14px; margin: 16px 0 4px; }
.list-status:empty { display: none; }
.list-status a, .list-empty a { color: #226caf; }
.list-empty { padding: 56px 0; text-align: center; color: #687586; }
.list-empty h3 { font-size: 18px; color: #334b65; margin-bottom: 12px; }
.list-empty p { margin-bottom: 16px; }
@media (max-width: 767px) {
  .list-toolbar { flex-direction: column; gap: 16px; }
  .list-filters { width: 100%; }
  body .article-list-section .list-search { flex: auto; width: 100%; }
  .article-row { padding: 20px 0; }
  .article-row h3 { font-size: 18px; }
  .article-meta { gap: 8px 12px; }
}

/* Homepage articles use the same native stretched link as the article lists. */
.home-article-card { position: relative; }
body .home-article-card:hover, body .home-article-card:focus-within { background-color: #f8fafb; }
/* Raise the focused card above the following sibling so its outer ring stays visible. */
.home-article-card:focus-within { z-index: 1; outline: 2px solid #3182ce; outline-offset: 4px; }

/* Keep repository actions above the card's detail link. */
.project-card { position: relative; }
body .project-card:hover, body .project-card:focus-within { background-color: #f8fafb; }
.project-card:focus-within { z-index: 1; outline: 2px solid #3182ce; outline-offset: 4px; }
.project-external-link { position: relative; z-index: 2; }
body .site-footer a:hover, body .site-footer a:focus-visible { color: #226caf; text-decoration: underline; }