/* ══════════════════════════════════════════
   ABOUT PAGE — css/about.css
   Styles for the standalone About page only.
   Requires: css/global.css, css/nav.css
   ══════════════════════════════════════════ */

/* ── Page layout ── */
.about-page { position: relative; z-index: 1; }
.about-page-inner { max-width: 880px; margin: 0 auto; padding: 7rem 2.4rem 5rem; }
/* ── Typography ── */
.about-eyebrow { font-family: var(--sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; }
.about-hero { font-family: var(--serif); font-weight: 300; font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.04; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 1.2rem; }
.about-hero em { font-style: italic; color: var(--accent); }
.about-lede { font-family: var(--sans); font-size: 1.05rem; font-weight: 300; line-height: 1.7; color: var(--muted); max-width: 540px; margin: 0 0 3.4rem; }
.about-pull { font-family: var(--serif); font-size: 1.5rem; font-weight: 300; line-height: 1.3; color: var(--ink); margin: 0 0 1.2rem; }
.about-body { font-family: var(--sans); font-size: 0.96rem; font-weight: 300; line-height: 1.75; color: var(--muted); margin: 0; }

/* ── Roots grid ── */
.about-roots-grid { display: grid; grid-template-columns: 1.2fr 0.9fr; gap: 2.6rem; margin-bottom: 3.4rem; }
@media (max-width: 760px) { .about-roots-grid { grid-template-columns: 1fr; } }

/* ── Credentials card ── */
.credentials-card { position: relative; padding: 2rem; border-radius: 20px; background: var(--glass); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow), var(--glass-inset); }
.cred-list { list-style: none; margin: 0; padding: 0; }
.cred-list li { font-family: var(--sans); font-size: 0.88rem; color: var(--ink); padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.cred-list li:last-child { border-bottom: none; }
.cred-stamp { position: absolute; bottom: -22px; right: -16px; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; }
.cred-stamp-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spinSeal 22s linear infinite; }
.cred-stamp-text { font-family: var(--sans); font-size: 7.2px; font-weight: 600; letter-spacing: 1.5px; fill: var(--accent); text-transform: uppercase; }
.cred-stamp-core { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--glass-3); border: 1px solid var(--glass-edge); color: var(--accent); box-shadow: var(--glass-inset); transition: transform 0.3s; }
.cred-stamp:hover .cred-stamp-ring { animation-duration: 6s; }
.cred-stamp:hover .cred-stamp-core { transform: scale(1.12); }

/* ── Bottom grid ── */
.about-bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-bottom: 3.6rem; }
@media (max-width: 760px) { .about-bottom-grid { grid-template-columns: 1fr; gap: 2.4rem; } }

/* ── Fun facts ── */
.fun-facts { margin: 0; }
.fun-facts > div { padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.fun-facts dt { font-family: var(--sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.3rem; }
.fun-facts dd { font-family: var(--sans); font-size: 0.94rem; font-weight: 300; color: var(--ink); margin: 0; line-height: 1.5; }

/* ── Path timeline ── */
.path-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.path-timeline li { position: relative; padding: 0 0 1.6rem 1.8rem; border-left: 1px solid var(--line); }
.path-timeline li:last-child { padding-bottom: 0; }
.path-timeline .dot { position: absolute; left: -5px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--muted-soft); }
.path-timeline .dot-now { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.path-timeline .yr { font-family: var(--sans); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-soft); margin-bottom: 0.3rem; }
.path-timeline .yr.now { color: var(--accent); }
.path-timeline .ev { font-family: var(--serif); font-size: 1.16rem; color: var(--ink); line-height: 1.2; }
.path-timeline .sub { font-family: var(--sans); font-size: 0.82rem; font-weight: 300; color: var(--muted); margin-top: 0.2rem; }

/* ── Widgets section ── */
.widgets-section { margin-bottom: 3.4rem; }
.widgets-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 1.4rem; }
@media (max-width: 860px) { .widgets-grid { grid-template-columns: 1fr; } }
.widget { padding: 1.5rem; border-radius: 18px; background: var(--glass); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow), var(--glass-inset); }
.widget-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.widget-head span:first-child { font-family: var(--sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.widget-head .muted { font-family: var(--sans); font-size: 0.66rem; color: var(--muted-soft); text-transform: lowercase; letter-spacing: 0.04em; }

/* ── Currently widget ── */
.currently { margin: 0; }
.currently > div { padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.currently > div:last-child { border-bottom: none; }
.currently dt { font-family: var(--sans); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-soft); margin-bottom: 0.2rem; }
.currently dd { font-family: var(--sans); font-size: 0.9rem; font-weight: 300; color: var(--ink); margin: 0; }

/* ── Bookshelf widget ── */
.widget-shelf { display: flex; flex-direction: column; }
.shelf-stage { position: relative; height: 240px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; overflow: visible; }
.shelf-book { position: absolute; left: 50%; width: 82px; margin-left: -41px; cursor: pointer; transform: translateX(var(--x,0)); z-index: var(--z,1); transition: transform 0.5s cubic-bezier(0.22,0.61,0.36,1), filter 0.3s; filter: brightness(0.8) saturate(0.85); }
.shelf-book img { width: 100%; border-radius: 6px; box-shadow: 0 10px 26px rgba(27,35,46,0.22); display: block; transform-origin: bottom center; transition: transform 0.35s ease; animation: bookSway 4s ease-in-out infinite alternate; }
.shelf-book:nth-child(1) img { animation-duration: 4.3s; animation-delay: -0.8s; }
.shelf-book:nth-child(2) img { animation-duration: 3.7s; animation-delay: -2.2s; }
.shelf-book:nth-child(3) img { animation-duration: 4.6s; animation-delay: -1.4s; }
.shelf-book:nth-child(4) img { animation-duration: 3.9s; animation-delay: -3s; }
.shelf-book:hover { transform: translateX(var(--x,0)) translateY(-24px) scale(1.16); z-index: 20; filter: none; }
.shelf-book:hover img { animation: none; transform: rotate(0deg); }
.shelf-book.is-active { filter: none; }
@keyframes bookSway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.shelf-meta { text-align: center; display: flex; flex-direction: column; gap: 0.2rem; }
.shelf-meta .now-label { font-family: var(--sans); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.shelf-meta .shelf-title { font-family: var(--serif); font-size: 1.06rem; color: var(--ink); }
.shelf-meta .shelf-author { font-family: var(--sans); font-size: 0.78rem; font-weight: 300; color: var(--muted); }

/* ── CTA ── */
.about-cta { text-align: center; padding-top: 1rem; }
.connect-q { font-family: var(--serif); font-size: 1.7rem; font-weight: 300; color: var(--ink); margin: 0 0 1.2rem; }
.connect-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; color: #fff; background: var(--accent); padding: 13px 26px; border-radius: 40px; transition: background 0.2s, transform 0.2s; }
.connect-btn:hover { background: var(--accent-deep); transform: translateY(-2px); }