/* One public header, including the static Portal and server-rendered pages. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: portal-leave 160ms ease both; }
::view-transition-new(root) { animation: portal-enter 220ms ease both; }
::view-transition-group(portal-header) { animation: none; }
@keyframes portal-leave { to { opacity: 0; } }
@keyframes portal-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
html:root { --portal-header-height: 74px; scroll-padding-top: calc(var(--portal-header-height) + 16px); }
body.blog-page .article-toc nav { top: calc(var(--portal-header-height) + 24px); }
body.blog-page .reading-progress { top: var(--portal-header-height); z-index: 51; }
body.blog-page .skip-link { z-index: 70; }
.portal-header,.portal-header * { box-sizing: border-box; }
.portal-header { position: fixed; inset: 0 0 auto; z-index: 50; background: rgba(247,248,244,.94); border-bottom: 1px solid #20291e12; backdrop-filter: blur(16px); view-transition-name: portal-header; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; line-height:1.5; color: #171c1a; }
.portal-header-inner { width: min(1240px,calc(100% - 48px)); margin: auto; display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px; min-height: 74px; align-items: center; }
.portal-brand { display: inline-flex; align-items: center; gap: 10px; width: fit-content; text-decoration: none; font-size: 14px; font-weight: 800; letter-spacing: .08em; }
.portal-brand img { width: 22px; height: 22px; }
.portal-nav { display: flex; align-items: center; gap: 32px; }
.portal-nav a { display: inline-flex; align-items: center; position: relative; min-height: 44px; white-space: nowrap; text-decoration: none; color: #70776f; font-size: 14px; font-weight: 550; letter-spacing: 0; text-transform: none; }
.portal-nav a:hover,.portal-nav a[aria-current="page"] { color: #17251b; }
.portal-nav a[aria-current="page"]::after { content: ''; position: absolute; inset: auto 0 0; height: 1px; background: currentColor; }
.portal-header .member-nav { justify-self: end; max-width: 180px; min-height: 40px; }
.portal-header a:focus-visible { outline: 2px solid #376250; outline-offset: 5px; }
body.blog-page { padding-top: 74px; }
.portal-home .site-footer { padding: 0; margin-top: 80px; }
.portal-footer-inner { width: min(1240px,calc(100% - 48px)); margin: auto; min-height: 96px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; border-top: 1px solid #20291e18; color: #70776f; font-size: 12px; }
.portal-footer-inner a { text-decoration: none; }
.portal-home .skill-showcase-card { min-height: 270px; }
.portal-home .skill-showcase-card h3 { margin-top: 14px; }
.portal-home .card-body { padding-top: 18px; }
.portal-home .insight-card h3 { margin-top: 0; }
@media(max-width:680px) {
  html:root { --portal-header-height: 106px; }
  .portal-header-inner { width: calc(100% - 32px); min-height: 106px; grid-template-columns: 1fr auto; gap: 0 16px; padding-top: 8px; }
  .portal-brand { font-size: 13px; }
  .portal-header .member-nav { grid-column: 2; grid-row: 1; max-width: 150px; }
  .portal-nav { grid-column: 1 / -1; grid-row: 2; width: 100%; justify-content: space-between; gap: 16px; }
  .portal-nav a { min-height: 46px; font-size: 13px; }
  body.blog-page { padding-top: 106px; }
  .portal-footer-inner { width: calc(100% - 32px); padding-block: 24px; }
}
@media(prefers-reduced-motion:reduce) {
  ::view-transition-old(root),::view-transition-new(root),::view-transition-group(portal-header) { animation: none; }
}