/* Personal pages share the reading site's Material colors and components. */
.portfolio-layout { grid-template-columns: 192px minmax(0, 1fr); max-width: 1280px; gap: 48px; }
.portfolio-layout .writing-main { max-width: none; }
.page-navigation { margin-left: 12px; padding-left: 14px; }
.page-navigation a { padding: 8px 0; }
.portfolio-site :is(section[id], header[id]) { scroll-margin-top: 8px; }
.material-card { min-width: 0; border: 1px solid var(--md-border-color); border-radius: 12px; background: var(--md-default-bg-color); }
.material-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 10px 20px; border-radius: 24px; background: var(--md-primary-fg-color); color: var(--md-default-bg-color); font-size: 14px; font-weight: 600; transition: box-shadow .15s, background .15s; }
.material-button:hover { background: var(--md-primary-fg-color--dark); color: var(--md-default-bg-color); box-shadow: var(--md-shadow); }
.material-chip { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 32px; padding: 3px 12px; border: 1px solid var(--md-border-color); border-radius: 8px; font-size: 12px; font-weight: 500; color: var(--md-primary-fg-color); cursor: pointer; }
.material-chip:hover { background: var(--md-hover-color); border-color: var(--md-primary-fg-color); }
.material-chip i { font-size: 12px; }
.profile { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 32px; align-items: start; padding: 32px; margin-bottom: 40px; }
.profile-text-only { grid-template-columns: minmax(0, 1fr); }
.profile-content { min-width: 0; }
.profile h1 { margin: 0 0 12px; font-size: 36px; font-weight: 500; letter-spacing: -.8px; }
.profile-subtitle { margin-bottom: 22px; color: var(--md-default-fg-color--light); font-size: 15px; }
.profile-subtitle > :first-child { margin-top: 0; }
.profile-subtitle > :last-child { margin-bottom: 0; }
.bio { font-size: 16px; }
.bio > :last-child { margin-bottom: 0; }
.profile-aside { text-align: center; }
.profile-img { display: block; width: 100%; height: auto; border-radius: 8px; }
.profile-img.circular { border-radius: 50%; }
.profile-more-info { margin-top: 16px; white-space: pre-line; overflow-wrap: anywhere; font-size: 13px; color: var(--md-default-fg-color--light); }
.social-icons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.social-icon { width: 40px; border: 1px solid var(--md-border-color); color: var(--md-primary-fg-color); }
.social-icon:hover { color: var(--md-primary-fg-color); }
.home-section { margin: 36px 0 0; }
.material-section-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin-bottom: 16px; }
.material-section-heading h2 { display: flex; align-items: center; gap: 12px; font-size: 22px; line-height: 1.5; font-weight: 500; letter-spacing: -.3px; margin: 0; }
.material-section-heading h2 > i { font-size: 17px; color: var(--md-primary-fg-color); }
.text-action { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; }
.text-action i { font-size: 11px; }
.section-card { padding: 4px 24px; }
.scroll-box { max-height: 300px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--md-border-color) transparent; padding-right: 12px; }
.scroll-box:focus-visible { outline: 2px solid var(--md-accent-fg-color); outline-offset: -2px; }
.news-list, .post-list { list-style: none; margin: 0; padding: 0; }
.news-item, .post-item { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: baseline; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--md-border-color); }
.news-item:last-child, .post-item:last-child { border-bottom: 0; }
.news-item time, .post-item time { color: var(--md-default-fg-color--light); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.news-item .document-content { font-size: 14px; }
.news-item .document-content > :first-child { margin-top: 0; }
.news-item .document-content > :last-child { margin-bottom: 0; }
.post-item { grid-template-columns: 104px minmax(0, 1fr) 12px; }
.post-item h3 { font-size: 16px; line-height: 1.6; font-weight: 500; margin: 0; overflow-wrap: anywhere; }
.post-item h3 a { color: var(--md-default-fg-color); }
.post-item h3 a:hover { color: var(--md-primary-fg-color); }
.post-excerpt { margin: 6px 0 0; color: var(--md-default-fg-color--light); font-size: 14px; overflow-wrap: anywhere; }
.post-arrow { color: var(--md-default-fg-color--lighter); font-size: 12px; }
.section-empty { margin: 0; padding: 24px; color: var(--md-default-fg-color--light); font-size: 14px; }
.section-card .section-empty { padding-left: 0; padding-right: 0; }
.publication-list { display: grid; gap: 16px; }
.pub-card { padding: 24px; }
.pub-with-preview { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: start; gap: 24px; }
.pub-preview { width: 100%; height: 104px; object-fit: contain; border-radius: 6px; background: var(--md-code-bg-color); }
.pub-content { min-width: 0; }
.pub-title { font-size: 17px; font-weight: 500; line-height: 1.6; margin: 0 0 8px; overflow-wrap: anywhere; }
.pub-title a { color: var(--md-default-fg-color); }
.pub-title a:hover { color: var(--md-primary-fg-color); }
.artifact-badge { width: 24px; height: 24px; margin-left: 5px; vertical-align: -.35em; object-fit: contain; }
.pub-authors { font-size: 14px; color: var(--md-default-fg-color--light); overflow-wrap: anywhere; }
.pub-authors strong { color: var(--md-default-fg-color); }
.pub-venue { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--md-default-fg-color--light); font-size: 13px; margin-top: 8px; }
.pub-venue .tag { font-size: 11px; border-radius: 4px; }
.pub-links { display: flex; flex-wrap: wrap; align-items: start; gap: 8px; margin-top: 16px; }
.pub-citation { display: contents; }
.pub-citation > summary { list-style: none; }
.pub-citation > summary::-webkit-details-marker { display: none; }
.pub-citation[open] > summary { border-color: var(--md-primary-fg-color); background: var(--md-hover-color); }
.pub-citation > .document-content { flex: 0 0 100%; min-width: 0; }
.pub-citation .document-content pre { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.pub-citation .document-content .codehilite { margin: 4px 0 0; }
.portfolio-page-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.portfolio-page-header h1 { margin-bottom: 0; }
.cv-timeline { display: grid; gap: 20px; border-left: 2px solid var(--md-border-color); margin-left: 6px; padding-left: 24px; }
.cv-entry { position: relative; padding: 24px; }
.cv-entry::before { content: ''; position: absolute; top: 30px; left: -32px; width: 12px; height: 12px; border: 3px solid var(--md-default-bg-color); border-radius: 50%; background: var(--md-primary-fg-color); box-shadow: 0 0 0 1px var(--md-primary-fg-color); }
.cv-entry-meta { color: var(--md-primary-fg-color); font-size: 12px; font-weight: 600; margin-bottom: 10px; }
.cv-entry-body, .cv-entry-text { min-width: 0; }
.cv-entry-with-image .cv-entry-body { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 24px; align-items: start; }
.cv-entry-title { font-size: 18px; font-weight: 500; line-height: 1.5; margin: 0; overflow-wrap: anywhere; }
.cv-entry-title a { color: var(--md-default-fg-color); }
.cv-entry-title a:hover { color: var(--md-primary-fg-color); }
.cv-entry-title i { font-size: 11px; color: var(--md-default-fg-color--lighter); margin-left: 8px; vertical-align: .15em; }
.cv-entry-subtitle { margin: 6px 0 0; color: var(--md-default-fg-color--light); font-size: 14px; overflow-wrap: anywhere; }
.cv-entry-location { display: flex; align-items: baseline; gap: 7px; margin: 8px 0 0; color: var(--md-default-fg-color--light); font-size: 12px; }
.cv-entry-summary { margin-top: 16px; font-size: 14px; }
.cv-entry-summary > :last-child { margin-bottom: 0; }
.cv-entry-highlights { margin: 12px 0 0; color: var(--md-default-fg-color--light); font-size: 14px; }
.cv-entry-highlights li p { margin: 0; }
.cv-entry-image { border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--md-code-bg-color); }
.cv-entry-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.friends-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.friend-card { display: flex; align-items: start; gap: 18px; padding: 24px; transition: border-color .15s, box-shadow .15s; }
.friend-card:hover, .friend-card:focus-within { border-color: var(--md-primary-fg-color); box-shadow: var(--md-shadow); }
.friend-avatar { display: block; width: 64px; height: 64px; flex-shrink: 0; border-radius: 50%; object-fit: cover; }
.friend-avatar-placeholder { display: flex; align-items: center; justify-content: center; background: var(--md-hover-color); color: var(--md-primary-fg-color); font-size: 24px; font-weight: 500; }
.friend-content { min-width: 0; flex: 1; }
.friend-name { font-size: 17px; font-weight: 500; line-height: 1.5; margin: 0 0 6px; overflow-wrap: anywhere; }
.friend-name a { color: var(--md-default-fg-color); }
.friend-name a:hover { color: var(--md-primary-fg-color); }
.friend-name i { font-size: 11px; color: var(--md-default-fg-color--lighter); margin-left: 8px; vertical-align: .15em; }
.friend-description { color: var(--md-default-fg-color--light); font-size: 14px; margin: 0; overflow-wrap: anywhere; }
.portfolio-site .writing-empty { margin-top: 28px; }
.error-page { padding: 60px 24px; text-align: center; }
.error-page h1 { color: var(--md-primary-fg-color); font-size: 64px; }

@media (min-width: 900px) and (max-width: 1240px) {
  .portfolio-layout { grid-template-columns: 160px minmax(0, 1fr); gap: 32px; }
  .profile { grid-template-columns: minmax(0, 1fr) 180px; padding: 28px; gap: 28px; }
  .profile-text-only { grid-template-columns: minmax(0, 1fr); }
  .cv-entry-with-image .cv-entry-body { grid-template-columns: minmax(0, 1fr) 150px; gap: 20px; }
}
@media (max-width: 899px) {
  .portfolio-layout { max-width: 820px; }
  .profile { grid-template-columns: minmax(0, 1fr) 180px; gap: 28px; }
  .profile-text-only { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 699px) {
  .profile { display: flex; flex-direction: column; padding: 24px; gap: 24px; }
  .profile-aside { order: -1; align-self: center; width: 160px; }
  .profile h1 { font-size: 30px; }
  .pub-with-preview { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pub-preview { max-height: 180px; height: auto; width: auto; max-width: 100%; }
  .cv-entry-with-image .cv-entry-body { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .cv-entry-image { max-width: 320px; }
  .friends-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 599px) {
  .material-section-heading h2 { font-size: 20px; gap: 10px; }
  .home-section { margin-top: 28px; }
  .profile { margin-bottom: 28px; }
  .section-card { padding: 2px 18px; }
  .news-item, .post-item { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 16px 0; }
  .post-arrow { display: none; }
  .pub-card, .cv-entry, .friend-card { padding: 20px; }
  .cv-timeline { padding-left: 18px; gap: 16px; }
  .cv-entry::before { left: -26px; }
  .friend-card { gap: 16px; }
  .friend-avatar { width: 56px; height: 56px; }
}
@media print {
  .portfolio-layout { display: block; max-width: none; }
  .portfolio-site .material-card { box-shadow: none; }
  .cv-entry, .friend-card, .pub-card { break-inside: avoid; }
  .portfolio-page-header .material-button { display: none; }
}