/* bio.css — /bio/ page: portrait, CV, timeline, bio lengths */

.bio-grid { display: grid; gap: 32px; }
@media (min-width: 768px) { .bio-grid { grid-template-columns: 220px 1fr; align-items: start; } }

.bio-portrait { aspect-ratio: 3/4; border-radius: 4px; overflow: hidden; max-width: 220px; margin: 0 auto; }
@media (min-width: 768px) { .bio-portrait { margin: 0; } }
.bio-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 35%; display: block; }

.bio-length-card { background: white; border: 1px solid var(--ink08); border-radius: 3px; padding: 20px; margin-bottom: 14px; }
.bio-length-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.bio-length-h p { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink30); }
.bio-length-card .bio-length-text { font-size: 15px; color: #3a3a38; line-height: 1.7; white-space: pre-line; }
.bio-length-card .bio-length-text p { margin-bottom: 1em; }
.bio-length-card .bio-length-text p:last-child { margin-bottom: 0; }

.copy-btn {
  font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 12px; border: 1px solid var(--ink12); background: transparent; color: #525250;
  border-radius: 2px; cursor: pointer; transition: all .3s;
}
.copy-btn:hover { border-color: #686866; color: #1a1a18; }
.copy-btn.copied { border-color: rgba(10,110,96,.4); color: #0a6e60; }

.timeline-v { position: relative; padding-left: 24px; margin-top: 8px; }
.timeline-v::before { content: ''; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1px; background: var(--ink12); }
.timeline-i { position: relative; margin-bottom: 24px; }
.timeline-i::before { content: ''; position: absolute; left: -24px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--pink); }
.timeline-i:last-child { margin-bottom: 0; }
.timeline-place { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--pink); margin-bottom: 4px; }
.timeline-detail { font-size: 15px; color: #3a3a38; line-height: 1.5; }
.timeline-year { font-family: var(--mono); font-size: 12px; color: var(--ink30); }