/* About area — hero, story, work, ventures, contact. */

section { position: relative; padding-block: var(--space-9); }
section:first-of-type { padding-top: 0; }

.section-head {
  max-width: 640px;
  margin-bottom: var(--space-8);
}
.section-head h2 {
  font-size: var(--text-3xl);
  margin-top: var(--space-3);
}
.section-head p {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

/* ---- Hero ---- */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: var(--space-8);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -20%;
  left: 50%;
  width: 1100px;
  height: 1100px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--color-accent-bg), transparent);
  pointer-events: none;
  z-index: -1;
}
.hero__content { max-width: 780px; }
.hero__tagline {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
  margin-bottom: var(--space-5);
  display: block;
}
.hero__headline {
  font-size: var(--text-4xl);
  line-height: 0.98;
}
.hero__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
}
.hero__intro {
  margin-top: var(--space-6);
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 56ch;
  line-height: var(--leading-normal);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-7);
}

/* ---- Story ---- */
.story {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-9);
  align-items: start;
}
.story__text p + p { margin-top: var(--space-5); }
.story__text {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

.facts {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-7);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  background: var(--color-bg-elevated);
}
.facts__item dt {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.facts__item dd {
  margin: var(--space-1) 0 0;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text);
}

.story__media {
  position: sticky;
  top: 120px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  aspect-ratio: 4 / 5;
}
.story__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story .placeholder { margin-block: var(--space-5); }

/* ---- Work timeline ---- */
.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  max-width: 820px;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--color-border-strong);
}
.timeline__item {
  position: relative;
  padding-left: var(--space-7);
}
.timeline__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 2px solid var(--color-accent);
}
.timeline__period {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
}
.timeline__title {
  font-size: var(--text-xl);
  margin-top: var(--space-2);
}
.timeline__desc {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  max-width: 62ch;
}
.timeline__item .placeholder {
  margin-top: var(--space-4);
  max-width: 62ch;
}

/* ---- Ventures ---- */
.ventures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
  align-items: start;
}
.venture-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  background: var(--color-bg-elevated);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: border-color var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);
}
.venture-card:hover { border-color: var(--color-border-strong); transform: translateY(-3px); }
.venture-card__tag {
  align-self: flex-start;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  border: 1px solid var(--color-border-strong);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}
.venture-card__tag--current { color: var(--color-accent-strong); border-color: var(--color-accent); }
.venture-card h3 { font-size: var(--text-xl); }
.venture-card p { color: var(--color-text-muted); }
.venture-card__link {
  align-self: flex-start;
  font-weight: 600;
  color: var(--color-accent-strong);
}
.venture-card__link:hover { text-decoration: underline; }

/* ---- Contact ---- */
.contact {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-9);
  align-items: center;
}
.contact__intro {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 50ch;
  margin-bottom: var(--space-6);
}
.contact__list { display: flex; flex-direction: column; gap: var(--space-4); }
.contact__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.contact__row dt {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  width: 90px;
  flex-shrink: 0;
}
.contact__row dd a {
  font-size: var(--text-lg);
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
.contact__row dd a:hover { color: var(--color-accent-strong); border-color: var(--color-accent-strong); }

.contact__portrait {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  aspect-ratio: 3 / 4;
  justify-self: center;
  width: 100%;
  max-width: 340px;
}
.contact__portrait img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .story, .contact { grid-template-columns: 1fr; }
  .story__media { position: static; order: -1; max-width: 360px; }
  .contact__portrait { order: -1; max-width: 280px; }
  .facts { grid-template-columns: 1fr 1fr; }
  .ventures { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .facts { grid-template-columns: 1fr; }
  section { padding-block: var(--space-8); }
}