/* About page only; shared tokens, header and book covers come from styles.css. */
.about-page { background: var(--paper); }
.about-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(36px,6vw,96px); align-items: center; padding: calc(var(--header-height) + 72px) clamp(22px,6vw,96px) 72px; background: var(--navy); color: var(--paper); }
.about-kicker { margin: 0 0 18px; color: var(--gold-light); font: 10px/1.4 "SFMono-Regular", Consolas, monospace; letter-spacing: .14em; }
.about-hero h1 { margin: 0; font: 500 clamp(64px,7vw,104px)/1.1 "Songti SC", STSong, serif; letter-spacing: .03em; }
.about-claim { margin: 22px 0 0; font: 400 clamp(22px,2.1vw,32px)/1.55 "Songti SC", STSong, serif; color: #f3eee3; }
.about-lead { max-width: 560px; margin: 22px 0 0; color: #aeb9bd; font-size: 15px; line-height: 1.9; }
.about-roles { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.about-roles li { padding: 6px 12px; border: 1px solid #e2c78c55; color: var(--gold-light); font-size: 12px; }
.about-portrait { position: relative; margin: 0; aspect-ratio: 4 / 5; max-height: 620px; overflow: hidden; border: 1px solid #e2c78c55; box-shadow: 18px 24px 40px #00000040; }
.about-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.about-portrait figcaption { position: absolute; left: 14px; top: 12px; padding: 4px 8px; background: #071526cc; color: #c9d1d4; font: 9px monospace; letter-spacing: .1em; }
.about-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); background: var(--navy); padding: 0 clamp(22px,6vw,96px) 56px; }
.about-stats a { display: flex; flex-direction: column; gap: 8px; padding: 24px 22px 0; border-left: 1px solid #f3eee31f; color: #aeb9bd; font-size: 13px; }
.about-stats a:first-child { border-left: 0; padding-left: 0; }
.about-stats strong { font: 400 56px/1 "Songti SC", STSong, serif; color: var(--gold-light); }
.about-stats a:hover span { color: var(--gold-light); }
.about-section { max-width: 1180px; margin: 0 auto; padding: 88px clamp(22px,5vw,64px) 0; display: grid; grid-template-columns: .38fr 1fr; gap: 28px 6vw; }
.about-section:last-of-type { padding-bottom: 110px; }
.about-section-head .about-kicker { color: var(--vermillion); }
.about-section-head h2 { margin: 0; font: 500 clamp(30px,3.2vw,46px)/1.25 "Songti SC", STSong, serif; }
.about-section-head p:not(.about-kicker) { margin: 16px 0 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.about-section-head p a { color: var(--vermillion); }
.about-profile { display: grid; gap: 0; }
.about-profile article { padding: 26px 0; border-top: 1px solid var(--rule); }
.about-profile article:first-child { padding-top: 0; border-top: 0; }
.about-profile h3 { margin: 0 0 10px; font: 500 22px/1.4 "Songti SC", STSong, serif; }
.about-profile p { margin: 0; color: #3c4752; font-size: 15px; line-height: 1.95; }
.about-books { display: grid; gap: 22px; }
.about-book { display: grid; grid-template-columns: 150px 1fr; gap: 28px; padding: 18px; border: 1px solid var(--rule); background: #f8f3e9; color: var(--ink); }
.about-book .book-cover { min-height: 200px; padding: 20px 16px; }
.about-book .book-cover strong { margin-top: 30px; font-size: 25px; }
.about-book h3 { margin: 6px 0 10px; font: 500 21px/1.45 "Songti SC", STSong, serif; }
.about-book p { margin: 0; color: #4e5964; font-size: 14px; line-height: 1.8; }
.about-meta { color: var(--vermillion) !important; font: 10px/1.5 "SFMono-Regular", Consolas, monospace !important; letter-spacing: .08em; }
.about-more { display: inline-block; margin-top: 14px; color: var(--vermillion); font-size: 13px; }
.about-book:hover h3 { color: var(--vermillion); }
.about-timeline { margin: 0; padding: 0; list-style: none; }
.about-timeline li { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 16px 0; border-top: 1px solid var(--rule); }
.about-timeline li:first-child { border-top: 0; padding-top: 0; }
.about-timeline time { color: var(--vermillion); font: 12px/1.7 "SFMono-Regular", Consolas, monospace; }
.about-timeline span { display: block; color: var(--muted); font-size: 12px; }
.about-timeline a { display: inline-block; margin-top: 4px; color: var(--ink); font: 500 17px/1.6 "Songti SC", STSong, serif; }
.about-timeline a:hover { color: var(--vermillion); }
.about-timeline-more a { font: 400 14px/1.8 inherit; color: #4e5964; }
.about-build { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.about-build a { display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--rule); background: #f8f3e9; color: var(--ink); }
.about-build span { color: var(--vermillion); font: 10px/1.5 "SFMono-Regular", Consolas, monospace; letter-spacing: .08em; }
.about-build h3 { margin: 14px 0 10px; font: 500 21px/1.4 "Songti SC", STSong, serif; }
.about-build p { margin: 0 0 18px; color: #4e5964; font-size: 13px; line-height: 1.8; }
.about-build b { margin-top: auto; font-weight: 500; font-size: 13px; color: var(--vermillion); }
.about-method { grid-column: 2; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.about-method li { padding: 18px; border-top: 2px solid var(--gold); background: #f8f3e9; font: 500 18px/1.4 "Songti SC", STSong, serif; }
.about-method b { display: block; margin-bottom: 8px; color: var(--vermillion); font: 10px monospace; }
.about-links { grid-column: 2; display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 6px 0 0; font-size: 14px; }
.about-links a { color: var(--vermillion); }
@media (max-width: 1100px) {
  .about-section { grid-template-columns: 1fr; }
  .about-method, .about-links { grid-column: 1; }
  .about-build { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .about-hero { grid-template-columns: 1fr; padding: calc(var(--header-height) + 40px) 22px 40px; }
  .about-portrait { max-height: 440px; }
  .about-stats { grid-template-columns: 1fr 1fr; padding: 0 22px 36px; }
  .about-stats a, .about-stats a:first-child { padding: 18px 0 0; border-left: 0; }
  .about-stats a:nth-child(even) { padding-left: 16px; border-left: 1px solid #f3eee31f; }
  .about-stats strong { font-size: 42px; }
  .about-section { padding-top: 60px; }
  .about-book { grid-template-columns: 1fr; }
  .about-book .book-cover { min-height: 150px; }
  .about-timeline li { grid-template-columns: 1fr; gap: 4px; }
  .about-build, .about-method { grid-template-columns: 1fr; }
}