/* About PGGB: existing theme tokens, readable history, no additional image payload. */
.about-page .about-intro { padding-block: 52px 60px; }
.about-hero { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(210px, .7fr); align-items: center; gap: clamp(32px, 6vw, 88px); }
.about-hero-copy { max-width: 750px; }
.about-hero h1 { font-size: clamp(38px, 4.6vw, 62px); }
.about-hero-copy > p:last-child { max-width: 66ch; }
.about-avatar { width: min(100%, 300px); justify-self: center; margin: 0; }
.about-avatar img { display: block; width: 100%; height: auto; border-radius: 22px; }
:root[data-theme=dark] .about-avatar img { mix-blend-mode: lighten; }
.about-avatar figcaption { text-align: center; color: var(--muted); font-size: 12px; line-height: 1.5; margin-top: 12px; }
.about-page main > section:not(.intro) { padding-block: 64px; }
.about-page main > section h2 { max-width: 850px; font-size: clamp(29px, 3.3vw, 43px); margin-bottom: 28px; }
.about-background, .about-community { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(240px, .8fr); gap: clamp(30px, 6vw, 88px); align-items: center; }
.about-background { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(30px, 4vw, 56px); align-items: center; }
.about-community { grid-template-columns: minmax(0, 1.5fr) minmax(340px, 1fr); gap: clamp(28px, 4vw, 56px); }
.about-page #behind-pggb h2 { max-width: 23ch; }
.about-prose { max-width: 72ch; }
.about-prose p:last-child { margin-bottom: 0; }
.about-note { padding: 30px; background: var(--canvas); border-radius: var(--radius); }
.about-note > .icon { color: var(--accent); width: 30px; height: 30px; margin-bottom: 16px; }
.about-note h3 { font-size: 24px; }
.about-note .text-link { margin-top: 8px; }
.about-listening-card { min-width: 0; perspective: 1400px; }
.about-card-ready .about-card-inner { position: relative; transform-style: preserve-3d; transition: transform .48s ease, height .35s ease; }
.about-card-ready .about-card-face { position: absolute; inset: 0 0 auto; box-sizing: border-box; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.about-card-ready .about-card-back { transform: rotateY(180deg); }
.about-card-ready[data-flipped=true] .about-card-inner { transform: rotateY(180deg); }
.about-card-switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 44px; margin: 22px 0 0; padding: 17px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; line-height: 1.5; text-align: left; cursor: pointer; }
.about-card-switch[hidden] { display: none; }
.about-card-switch:hover { color: var(--accent); }
.about-card-switch > .about-flip-chevron { width: 16px; height: 16px; flex: none; color: var(--accent); }
.about-card-back .about-flip-chevron { transform: rotate(180deg); }
.about-card-back { position: relative; }
.about-card-revert { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; min-height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--accent); cursor: pointer; }
.about-card-revert[hidden] { display: none; }
.about-card-revert:hover { background: var(--surface); border-color: var(--accent); }
.about-card-revert > svg { width: 16px; height: 16px; }
.about-card-revert:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.about-card-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.about-system-list { display: grid; grid-template-columns: 1fr; gap: 15px; margin: 0; padding: 0; }
.about-system-list > div { min-width: 0; }
.about-system-list dt { margin: 0 0 5px; color: var(--ink); font-size: 14px; font-weight: 650; }
.about-system-list dd { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.about-system-list a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .2em; }
.about-system-list a:hover { color: var(--accent); text-decoration-color: currentColor; }
.about-history-intro { max-width: 66ch; margin-bottom: 38px; }
.about-timeline { list-style: none; padding: 0; margin: 0; }
.about-milestone { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 36px; margin: 0; }
.about-release-date { padding-top: 28px; text-align: right; }
.about-release-date time { display: block; color: var(--accent); font-weight: 650; font-size: 15px; }
.about-release-date span { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
.about-release { position: relative; padding: 24px 0 32px 36px; border-left: 1px solid var(--line); }
.about-release::before { position: absolute; content: ''; left: -5px; top: 34px; width: 9px; height: 9px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 5px var(--canvas); }
.about-version { color: var(--muted); font-size: 13px; margin: 0 0 10px; }
.about-version span { margin-inline: 5px; }
.about-release h3 { font-size: clamp(21px, 2vw, 26px); margin: 0 0 12px; }
.about-origin-mark { display: inline-flex; vertical-align: -.12em; margin-right: 10px; color: var(--accent); }
.about-origin-mark .route-icon { width: 24px; height: 24px; }
.about-release > p:last-child { max-width: 73ch; margin-bottom: 0; }
.about-anniversary { display: grid; grid-template-columns: 1fr; gap: 14px; width: 100%; max-width: 280px; align-self: center; justify-self: center; text-align: center; color: var(--accent); }
.about-experience-badge { min-width: 0; padding: 20px 24px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 14px; background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface)); box-shadow: var(--shadow); }
:root[data-theme=dark] .about-experience-badge { background: var(--detail-surface); }
.about-anniversary-number { display: block; font-size: clamp(48px, 4.6vw, 64px); font-weight: 600; line-height: 1; letter-spacing: -.06em; }
.about-anniversary-label { display: block; font-size: 16px; font-weight: 600; margin-top: 10px; }
.about-anniversary p { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 14px 0 0; }
.about-page .actions { flex-wrap: wrap; gap: 18px 28px; margin-top: 26px; }
@media (max-width: 760px) {
  .about-page .about-intro { padding-block: 32px 42px; }
  .about-hero { grid-template-columns: 1fr; gap: 24px; }
  .about-avatar { width: 185px; }
  .about-background, .about-community { grid-template-columns: 1fr; gap: 28px; }
  .about-page main > section:not(.intro) { padding-block: 42px; }
  .about-note { padding: 24px; }
  .about-system-list { grid-template-columns: 1fr; gap: 18px; }
  .about-milestone { grid-template-columns: 1fr; gap: 10px; padding-left: 22px; border-left: 1px solid var(--line); position: relative; padding-bottom: 28px; }
  .about-release-date { text-align: left; padding-top: 0; }
  .about-release-date span { display: inline; margin-left: 10px; }
  .about-release-date time { display: inline; }
  .about-release { border: 0; padding: 0; position: static; }
  .about-release::before { top: 7px; }
  .about-version { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .about-card-ready .about-card-inner { transition: none; } }