/**
 × about_css v2.12 × updated 2026-09-09 ×
 × created 2026-04-18 × raimundo p. solar ×
 **/


/****
        Shared About section layout.
 ****/

.about-section-page .about-tf-right,
#objectives .tf-right,
#history .tf-right {
  grid-column: 1 / -1;
}

.about-copy > :first-child,
#objectives .objective-item > :first-child,
#history .history-item > :first-child {
  margin-top: 0;
}

.about-copy > :last-child,
#objectives .objective-item > :last-child,
#history .history-item > :last-child {
  margin-bottom: 0;
}

.about-copy--separated,
#objectives .objective-item.is-separated,
#history .history-item.is-separated {
  padding-top: 0.25rem;
  border-top: 0.9px solid var(--color-black);
}


/****
        Members page.
 ****/

.members-page {
  width: 100%;
  padding-top: 1rem;
  padding-bottom: var(--breche-m);
}

.members-role {
  padding-top: 0;
  padding-bottom: var(--breche-l);
}

.members-role__layout {
  position: relative;
  align-items: start;
}

.members-role__left,
.members-list {
  min-width: 0;
}

.members-role__title {
  margin: 0;
}

.members-role__empty {
  margin: 0;
}


/****
        Members list.
 ****/

.members-list {
  width: 100%;
}

.member-item {
  width: 100%;
  margin: 0;
}

.member-item + .member-item {
  margin-top: 0.18rem;
  padding-top: 0.18rem;

  border-top:
    0.9px
    solid
    var(--color-black);
}


/****
        Member name and metadata.
 ****/

.member-item__heading {
  margin: 0;
  padding: 0;

  font: inherit;
}

.member-item__trigger {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr);

  gap: 0.05rem;

  width: 100%;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 0;

  color: inherit;
  background: transparent;

  font: inherit;
  line-height: inherit;
  text-align: left;

  appearance: none;
  -webkit-appearance: none;

  cursor: pointer;

  transition:
    color 160ms ease,
    opacity 160ms ease;
}

.member-item__trigger:hover,
.member-item__trigger:focus-visible,
.member-item.is-open .member-item__trigger {
  color: var(--color-orange);
}

.member-item__trigger:focus-visible {
  outline: none;
}

.member-item__name,
.member-item__meta {
  display: block;
  min-width: 0;
}

.member-item__meta {
  color: var(--color-black);
  opacity: 0.62;
}

.member-item__trigger:hover .member-item__meta,
.member-item__trigger:focus-visible .member-item__meta,
.member-item.is-open .member-item__meta {
  color: inherit;
  opacity: 1;
}


/****
        Member biography.
 ****/

.member-item__panel[hidden] {
  display: none;
}

.member-item__panel:not([hidden]) {
  animation:
    member-bio-in
    160ms
    ease;
}

.member-item__bio {
  padding:
    0.25rem
    0
    0.45rem;
}

.member-item__bio > :first-child {
  margin-top: 0;
}

.member-item__bio > :last-child {
  margin-bottom: 0;
}

@keyframes member-bio-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


/****
        Member profile image.
 ****/

.members-role__photo {
  width: 100%;
  margin: 0;

  aspect-ratio: 4 / 2.9;

  overflow: hidden;
}

.members-role__photo[hidden] {
  display: none;
}

.members-role__photo img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

.members-role__photo-placeholder {
  display: block;

  width: 100%;
  height: 100%;

  background: #e2e2e2;
}

.members-role__photo-placeholder[hidden],
.members-role__photo img[hidden] {
  display: none;
}


/****
        Desktop.
 ****/

@media (min-width: 640px) {

  .about-section-page
  .grid.tf
  > .about-tf-right,
  #objectives
  .grid.tf
  > .tf-right,
  #history
  .grid.tf
  > .tf-right {
    grid-column: 5 / -1;
  }


  .members-role__left {
    position: relative;

    grid-column:
      1
      / 5;
  }

  .members-list {
    grid-column:
      5
      / -1;
  }


  .member-item__trigger {
    grid-template-columns:
      minmax(10rem, 0.8fr)
      minmax(0, 1.2fr);

    column-gap:
      var(--breche-s);

    align-items: baseline;
  }


  .members-role__photo {
    position: absolute;

    top:
      var(
        --member-photo-top,
        0
      );

    left: 0;
    right: 0;
  }
}


/****
        Mobile.
 ****/

@media (max-width: 639px) {

  .members-page {
    padding-top: 0.5rem;
    padding-bottom:
      var(--breche-s);
  }

  .members-role {
    padding-bottom:
      var(--breche-m);
  }

  .members-role__layout {
    row-gap:
      var(--breche-s);
  }

  .members-role__photo {
    position: static;

    margin-top:
      var(--breche-s);

    margin-bottom:
      var(--breche-s);
  }

  .member-item__trigger {
    grid-template-columns:
      minmax(0, 1fr);
  }
}


/****
        Reduced motion.
 ****/

@media (
  prefers-reduced-motion: reduce
) {

  .member-item__trigger {
    transition-duration:
      0.01ms;
  }

  .member-item__panel:not([hidden]) {
    animation: none;
  }
}
/****
        Supporters page.
 ****/

.supporters-page {
  width: 100%;
  padding-top: 1rem;
  padding-bottom: var(--breche-m);
}

.supporters-section {
  padding-top: 0;
  padding-bottom: var(--breche-l);
}

.supporters-section__layout {
  position: relative;
  align-items: start;
}

.supporters-section__left,
.supporters-list {
  min-width: 0;
}

.supporters-section__title {
  margin: 0;
}


/****
        Supporters list.
 ****/

.supporters-list {
  width: 100%;
}

.supporter-item {
  width: 100%;
  margin: 0;
}

.supporter-item + .supporter-item {
  margin-top: 0.18rem;
  padding-top: 0.18rem;

  border-top:
    0.9px
    solid
    var(--color-black);
}


/****
        Supporter name and metadata.
 ****/

.supporter-item__heading {
  margin: 0;
  padding: 0;

  font: inherit;
}

.supporter-item__trigger {
  width: 100%;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 0;

  color: inherit;
  background: transparent;

  font: inherit;
  line-height: inherit;
  text-align: left;

  appearance: none;
  -webkit-appearance: none;

  cursor: pointer;

  transition:
    color 160ms ease,
    opacity 160ms ease;
}

.supporter-item__trigger:hover,
.supporter-item__trigger:focus-visible,
.supporter-item.is-open .supporter-item__trigger {
  color: var(--color-orange);
}

.supporter-item__trigger:focus-visible {
  outline: none;
}

.supporter-item__name,
.supporter-item__meta {
  display: block;
  min-width: 0;
}

.supporter-item__meta {
  color: var(--color-black);
  opacity: 0.62;
}

.supporter-item__trigger:hover .supporter-item__meta,
.supporter-item__trigger:focus-visible .supporter-item__meta,
.supporter-item.is-open .supporter-item__meta {
  color: inherit;
  opacity: 1;
}


/****
        Supporter expandable panel.
 ****/

.supporter-item__panel[hidden] {
  display: none;
}

.supporter-item__panel:not([hidden]) {
  animation:
    supporter-panel-in
    160ms
    ease;
}

@keyframes supporter-panel-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


/****
        Supporting institutions.
 ****/

.supporter-item__trigger--institution {
  display: block;
}

.supporter-item__panel--institution {
  padding:
    0.3rem
    0
    0.55rem;
}

.supporter-institution__details {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr);

  gap:
    var(--breche-s);
}

.supporter-institution__copy {
  min-width: 0;
}

.supporter-institution__description {
  margin: 0;
  max-width: 30rem;
}

.supporter-institution__description > :first-child {
  margin-top: 0;
}

.supporter-institution__description > :last-child {
  margin-bottom: 0;
}

.supporter-institution__website {
  margin:
    0.3rem
    0
    0;
}


/****
        Institution logo.

        The box follows the 16:9 Canid image language.
        The logo itself uses contain and is never cropped.
 ****/

.supporter-logo {
  width: 100%;
  margin: 0;

  aspect-ratio: 16 / 9;

  overflow: hidden;
}

.supporter-logo img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
}

.supporter-logo__placeholder {
  display: block;

  width: 100%;
  height: 100%;

  background: #e2e2e2;
}


/****
        Photography.
 ****/

.supporter-item__trigger--photographer {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr);

  gap: 0.05rem;
}

.photographer-gallery {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    var(--breche-s);

  padding:
    0.3rem
    0
    0.55rem;
}

.photographer-gallery__item {
  width: 100%;
  margin: 0;
}

.photographer-gallery__item img {
  display: block;

  width: 100%;

  aspect-ratio: 16 / 9;

  object-fit: cover;
}


/****
        Supporters desktop.
 ****/

@media (min-width: 640px) {

  .supporters-section__left {
    position: relative;

    grid-column:
      1
      / 5;
  }

  .supporters-list {
    grid-column:
      5
      / -1;
  }


  .supporter-institution__details {
    grid-template-columns:
      minmax(10rem, 0.8fr)
      minmax(0, 1.2fr);

    column-gap:
      var(--breche-s);

    align-items: start;
  }

  .supporter-institution__copy {
    grid-column: 1;
  }

  .supporter-logo {
    grid-column: 2;
  }


  .supporter-item__trigger--photographer {
    grid-template-columns:
      minmax(10rem, 0.8fr)
      minmax(0, 1.2fr);

    column-gap:
      var(--breche-s);

    align-items: baseline;
  }
}


/****
        Supporters mobile.
 ****/

@media (max-width: 639px) {

  .supporters-page {
    padding-top: 0.5rem;
    padding-bottom:
      var(--breche-s);
  }

  .supporters-section {
    padding-bottom:
      var(--breche-m);
  }

  .supporters-section__layout {
    row-gap:
      var(--breche-s);
  }

  .supporter-institution__details {
    display: block;
  }

  .supporter-logo {
    margin-top:
      var(--breche-s);
  }

  .supporter-item__trigger--photographer {
    grid-template-columns:
      minmax(0, 1fr);
  }

  .photographer-gallery {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }
}


/****
        Supporters reduced motion.
 ****/

@media (
  prefers-reduced-motion: reduce
) {

  .supporter-item__trigger {
    transition-duration:
      0.01ms;
  }

  .supporter-item__panel:not([hidden]) {
    animation: none;
  }
}