/*─────────────────────────────────────────────────────────────────────────────
  ABOUT PAGE — all declarations are prefixed with “about_…”
  Built on top of the global tokens from styles.css & bias.css
─────────────────────────────────────────────────────────────────────────────*/

.about_page {
  /* keeps body padding consistent with the rest of the site */
  padding: 0 0;
  background: #fff;
  color: var(--col-text-primary);
  padding-bottom: 40px;
}

/* Header --------------------------------------------------------------- */
.about_header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);     /* 8 px */
  margin-top: 42px;         /* annotation */
  max-width: 920px;
  margin: 8px auto;
}

.about_back {
  width: 24px;
  height: 24px;
  background: url("icons/arrow-left.svg") no-repeat center / contain;
  flex-shrink: 0;
}

.about_logo {
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
}

a,
a:link,
a:visited,
a:hover,
a:active {
  color: #000000; /* Or your desired color */
}

a.about_back,
a.about_back:link,
a.about_back:visited,
a.about_back:hover,
a.about_back:active {
  color: #000000; /* Or your desired color */
  text-decoration: none;
  font-size: 32px;
  line-height: .7;
  margin-right: 8px ;
}
a.about_back:hover {color: #ff0000;}

/* Typography ----------------------------------------------------------- */
.about_title     { font-size: 40px; line-height: 40px; font-weight: 400; }
.about_subheading,
.about_subheading_card { font-size: 18px; line-height: 24px; font-weight: 700; }
.about_paragraph { font-size: 18px; line-height: 24px; font-weight: 400; }
.about_year      { font-size: 18px; line-height: 24px; font-weight: 700; }
.about_year-count{ font-weight: 700; }
.about_version   { font-size: 72px; line-height: 80px; font-weight: 400; }
.about_summary   { font-size: 22px; line-height: 1.1; font-weight: 400; }
.about_tagline   { font-size: 22px; line-height: 24px; font-weight: 400; }
.about_headline_connect  { font-size: 40px; line-height: 40px; font-weight: 400; }

/* Layout helpers ------------------------------------------------------- */
.about_container { max-width: 920px; margin: 0 auto; }
.about_section   { margin-bottom: 108px; }
.about_timeline  { margin-bottom: 100px; }

.about_version-row {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
}

/* Cards (grey blocks in the PDF) -------------------------------------- */
.about_card_lookingfor,
.about_card_join {
  border-radius: var(--radius-sheet, 16px);
  padding: var(--space-sm);
  margin-bottom: 40px;           /* annotation “100” arrow */
}

.about_card_lookingfor {background: #91888F;}
.about_card_join {background: #888D91;}

.about_list       { list-style: none; padding: 0; margin: 0; }
.about_list li    { font-size: 24px; line-height: 24px; font-weight: 400;
                    margin-bottom: 6px; }

/* Links inherit site colour palette */
.about_link       { color: var(--col-link); text-decoration: underline; }




/* Layout ----------------------------------------------------------- */

.about_header {
  padding: 8px 16px 42px 16px;
}

.about_container {
  padding-bottom: 20px;
}

.about_title {
  border-top: 1px solid #000;
  padding: 8px 16px 108px 16px;
}

.about_section1 {
  border-top: 1px solid #000;
  padding: 8px 16px 108px 16px;
}

.about_section2 {
  border-top: 1px solid #000;
  padding: 8px 16px 108px 16px;
}

.about_timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #000;
  padding: 8px 16px 8px 16px;
}

.about_summary_wrapper {padding-top: 8px;}
.about_version-row {padding: 8px 16px 8px 16px;}
.about_summary {padding-bottom: 32px;}

h3.about_version{
  margin-right: 12px;
}

.about_card_lookingfor,
.about_card_join {margin-left: 16px; margin-right: 16px}

.about_subheading_card {
  border-bottom: 1px solid #000;
  padding: 8px 0 8px 0;
  font-weight: 400;
}

.about_list,
.about_paragraph {
  padding-top: 20px;
}

.about_headline_connect {
  padding: 40px 0;
}


/* Media-query — bump side-padding slightly on bigger screens ---------- */
/* @media (min-width: 480px) {
  .about_page { 
    padding-left: var(--space-md); 
    padding-right: var(--space-md); 
  }
} */