/* ==============================================================
 * lazarjovovic.com — about.css
 * Styles for the full About page. Loaded after site.css + page.css.
 * ============================================================== */

.about-full{padding:170px 0 60px}

/* ——— Intro ——— */
.about-hero{display:grid;grid-template-columns:auto 1fr;gap:clamp(34px,6vw,72px);align-items:start;margin-bottom:clamp(70px,10vw,130px)}
.about-hero-portrait{padding-top:6px}
.about-hero-portrait img,
.about-hero-portrait .portrait-ph{
  width:clamp(160px,18vw,240px);
  height:clamp(160px,18vw,240px);
  border-radius:50%;
}
.about-hero-portrait img{object-fit:cover;object-position:center 10%;display:block}
.about-hero-portrait .portrait-ph{background:var(--paper-2);border:1px solid var(--line);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.about-hero-portrait .pinit{font-family:var(--display);font-size:4.8rem;font-weight:500;color:var(--accent);opacity:.22;line-height:1}
.about-hero-portrait .pcap{display:none}
.about-hero-text .kicker{margin-bottom:20px}
.about-hero-text h1{font-family:var(--display);font-weight:500;font-size:clamp(2.4rem,5vw,4rem);letter-spacing:-.025em;line-height:1.02;margin-bottom:30px}
.about-hero-text h1 em{font-style:italic;color:var(--accent)}
.about-hero-text p{color:var(--ink-soft);font-size:1.08rem;margin-bottom:20px;max-width:60ch}

/* ——— Sections ——— */
.about-section{padding:clamp(50px,7vw,90px) 0;border-top:1px solid var(--line)}
.about-section-head{margin-bottom:50px}
.about-section-head .kicker-sm{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.about-section-head h2{font-family:var(--display);font-weight:500;font-size:clamp(1.8rem,3.6vw,2.8rem);letter-spacing:-.02em;line-height:1.05;max-width:20ch}

/* ——— Timeline ——— */
.timeline{display:flex;flex-direction:column}
.timeline-row{display:grid;grid-template-columns:.3fr 1.7fr;gap:clamp(20px,4vw,60px);padding:30px 0;border-top:1px solid var(--line)}
.timeline-row:first-child{border-top:none}
.timeline-period{font-family:var(--mono);font-size:.8rem;letter-spacing:.04em;color:var(--accent);text-transform:uppercase;padding-top:4px}
.timeline-body h3{font-family:var(--display);font-size:1.5rem;font-weight:500;letter-spacing:-.01em;margin-bottom:10px}
.timeline-body p{color:var(--ink-soft);font-size:1rem;max-width:60ch}

/* ——— Principles ——— */
.principles{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.principle{background:var(--paper);padding:clamp(28px,3vw,42px);display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;transition:background .4s ease}
.principle:hover{background:var(--paper-2)}
.principle .ix{font-family:var(--mono);font-size:.8rem;color:var(--accent);padding-top:6px}
.principle h3{font-family:var(--display);font-size:1.35rem;font-weight:500;letter-spacing:-.01em;margin-bottom:8px}
.principle p{color:var(--ink-soft);font-size:.98rem}

/* ——— Book strip ——— */
.about-book{padding:clamp(50px,7vw,90px) 0;border-top:1px solid var(--line)}
.about-book-text .kicker-sm{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.about-book-text h2{font-family:var(--display);font-weight:500;font-size:clamp(1.8rem,3.4vw,2.6rem);letter-spacing:-.02em;margin-bottom:18px}
.about-book-text p{color:var(--ink-soft);font-size:1.05rem;max-width:60ch;margin-bottom:22px}

/* ——— CTA ——— */
.about-cta{text-align:center;padding:clamp(70px,10vw,130px) 0 40px;border-top:1px solid var(--line)}
.about-cta h2{font-family:var(--display);font-weight:500;font-size:clamp(2rem,4.6vw,3.4rem);letter-spacing:-.02em;line-height:1.05;margin-bottom:30px;max-width:20ch;margin-inline:auto}
.about-cta h2 em{font-style:italic;color:var(--accent)}

/* ——— Mobile ——— */
@media(max-width:880px){
    .about-full{padding:130px 0 40px}
    .about-hero{grid-template-columns:1fr;gap:40px;align-items:start}
    .about-hero-portrait{display:flex;justify-content:center}
    .timeline-row{grid-template-columns:1fr;gap:8px}
    .principles{grid-template-columns:1fr}
}