.about-hero { padding: 18vh var(--pad-page) 2vh; max-width: var(--maxw); margin-inline: auto; }
.about-hero h1 { font-size: var(--fs-hero); margin: 0.2em 0; }
.about-hero .lead { max-width: 52ch; }

.story-section { max-width: 760px; margin-inline: auto; }
.story-section h2 { font-size: var(--fs-h2); margin-bottom: 1.25rem; }
.story-section p { color: var(--ivory-dim); font-size: var(--fs-lead); margin-bottom: 1.2rem; }
.story-section p strong { color: var(--ivory); font-weight: 500; }
.story-section .pull { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.6rem, 3.5vw, 2.4rem); color: var(--ivory); line-height: 1.3; }

/* Timeline */
.timeline { max-width: 760px; margin: 0 auto; padding-left: 2rem; border-left: 1px solid var(--hair-strong); }
.timeline .tl { position: relative; padding-bottom: 3rem; }
.timeline .tl:last-child { padding-bottom: 0; }
.timeline .tl::before { content: "°"; position: absolute; left: calc(-2rem - 7px); top: -4px; color: var(--gold); font-family: var(--font-mono); font-size: 1.3rem; background: var(--bg); padding: 0 6px; transition: color var(--dur-bg) linear; }
.timeline .yr { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.2em; color: var(--accent); transition: color var(--dur-bg) linear; }
.timeline h3 { font-size: var(--fs-h3); margin: 0.3rem 0; }
.timeline p { color: var(--ivory-dim); font-size: 0.95rem; }

.about-close { text-align: center; padding: 12vh var(--pad-page); background: radial-gradient(50% 60% at 50% 50%, rgba(201, 162, 75, 0.08), transparent 70%); }
.about-close .big { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-display); }