/* =========================================================
   BARKER PUBLISHING HOUSE — About v2 (page-specific)
   Luxury story: cinematic founding block, hairline milestones
   timeline, real team (Armando). Loads after golden.css.
   ========================================================= */

/* ---------- Milestones timeline ---------- */
.timeline { position: relative; max-width: 780px; margin-inline: auto; }
.timeline::before {
  content: ""; position: absolute; left: 108px; top: 8px; bottom: 8px; width: 1px;
  background: linear-gradient(180deg, var(--hair-gold), rgba(204,138,27,0.08));
}
.tl-item { display: grid; grid-template-columns: 84px 48px 1fr; align-items: baseline; padding-block: 1.5rem; }
.tl-year {
  font-family: var(--font-display); font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  color: var(--ember-600); font-weight: 380; text-align: right;
}
.tl-dot { position: relative; height: 100%; }
.tl-dot::before {
  content: ""; position: absolute; left: 21px; top: 0.35em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--paper-50); border: 1.5px solid var(--ember-500);
}
.tl-item h3 { font-size: clamp(1.15rem, 1.8vw, 1.45rem); margin-bottom: 0.35rem; color: var(--text-strong); }
.tl-item p { color: var(--text-body); max-width: 52ch; font-size: 0.98rem; }

/* ---------- Team: real people ---------- */
.team-lead { display: grid; grid-template-columns: 0.72fr 1.28fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.team-photo { position: relative; max-width: 360px; }
.team-photo img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block;
  border-radius: 300px 300px 10px 10px;
  box-shadow: 0 36px 80px -32px rgba(19,27,47,0.45), 0 3px 10px rgba(19,27,47,0.12);
}
.team-photo::after {
  content: ""; position: absolute; inset: 14px -14px -14px 14px; z-index: -1;
  border: 1px solid var(--ember-300); opacity: 0.55; border-radius: 300px 300px 12px 12px;
}
.team-name { font-family: var(--font-display); font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-weight: 380; color: var(--text-strong); }
.team-role { font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ember-700); margin-top: 0.5rem; display: inline-flex; align-items: center; gap: 0.6rem; }
.team-role::before { content: ""; width: 26px; height: 1px; background: var(--hair-gold); }
.team-bio { margin-top: 1.3rem; max-width: 56ch; }
.team-quote {
  margin-top: 1.8rem; padding: 1.3rem 1.6rem;
  border-left: 2px solid var(--ember-400);
  background: var(--gallery); border-radius: 0 10px 10px 0;
  font-family: var(--font-display); font-style: italic; font-size: 1.06rem; line-height: 1.55;
  color: var(--text-strong);
}
.team-quote cite { display: block; margin-top: 0.7rem; font-family: var(--font-body); font-style: normal; font-size: 0.8rem; color: var(--text-muted); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .timeline::before { left: 84px; }
  .tl-item { grid-template-columns: 64px 44px 1fr; }
  .team-lead { grid-template-columns: 1fr; }
  .team-photo { margin-inline: auto; }
}