/* ==========================================================================
   Page: about — Headline column + Sidebar of info cards
   ========================================================================== */

.about {
  padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 8vw, 7rem);
  background-image:
    linear-gradient(to right,  rgba(17, 17, 17, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17, 17, 17, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
}

[data-theme="dark"] .about {
  background-image:
    linear-gradient(to right,  rgba(244, 244, 238, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244, 244, 238, 0.05) 1px, transparent 1px);
}

.about__inner {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 980px) {
  .about__inner {
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(3rem, 5vw, 5rem);
  }
}

/* ---- Left column: headline + body copy --------------------------------- */

.about__lead {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.about__headline {
  font-family: var(--ff-display);
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}

.about__paragraph {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--ink-soft);
  max-width: 60ch;
}

/* ---- Right column: stack of info cards --------------------------------- */

.about__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.info-card {
  border: 3px solid var(--stroke);
  background-color: var(--surface);
  color: var(--ink);
  box-shadow: var(--sh-md);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.info-card--accent { background-color: var(--accent);      color: var(--ink-on-accent); }
.info-card--ink    { background-color: var(--ink);         color: var(--bg); }
.info-card--pink   { background-color: var(--c-pink-soft); }

[data-theme="dark"] .info-card--ink { background-color: var(--surface-2); color: var(--ink); }

@media (hover: hover) and (pointer: fine) {
  .info-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--sh-lg);
  }
}

.info-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--stroke);
}

.info-card__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-tight);
  text-transform: lowercase;
  color: inherit;
  margin: 0;
}

.info-card__no {
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-extra);
  text-transform: uppercase;
  opacity: 0.7;
}

.info-card__row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.info-card__rowlabel {
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  opacity: 0.7;
}

.info-card__rowvalue {
  font-family: var(--ff-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-base);
  color: inherit;
}

.info-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  list-style: none;
  padding: 0;
  margin: 0;
}

.info-card__list li {
  font-family: var(--ff-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-snug);
  display: flex;
  gap: var(--sp-2);
}

.info-card__list li::before {
  content: "—";
  flex-shrink: 0;
  opacity: 0.6;
}

/* Career: groups of company + items */
.career-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding-block: var(--sp-2);
  border-bottom: 1px dashed var(--stroke);
}

.career-group:last-child { border-bottom: none; padding-bottom: 0; }
.career-group:first-child { padding-top: 0; }

.career-group__co {
  font-family: var(--ff-display);
  font-size: var(--fs-h4);
  letter-spacing: var(--ls-tight);
  margin: 0;
}

.career-group__items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--ff-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-snug);
  opacity: 0.85;
}