/**
 * ABOUT PAGE — LAYOUT OVERRIDES
 * ==============================
 * Loaded after the site's main stylesheet, so these rules win without
 * editing that hard-to-read hashed file.
 *
 * Note: the two-column layout (photo | bio) and the mobile stacking below
 * 992px already come for free from the site's existing `.content` grid —
 * that's untouched here.
 */

/* The vertical photo: no longer stretched/cropped to match the grid row
   ("the raster") — it just renders at its own natural portrait proportions
   and can run longer than the bio column next to it. align-self: start
   stops CSS Grid's default behavior of stretching every item to match the
   row height. */
.format-portrait {
  align-self: start;
}

.format-portrait img {
  width: 80%; /* adjust: smaller/larger percentage shrinks or grows the photo, keeping its proportions */
  height: auto;
  display: block;
}

/* Photo credit — same font/size/color as the work page's credit lines. */
.about-photo-credit {
  font-size: .64em;
  margin-top: .5em; /* adjust: space between photo and credit */
  color: #000;
}

/* The bio column also gets align-self: start, so it doesn't stretch down
   to match the (now much taller) photo — it stays only as tall as its own
   content instead of being stretched to match the photo's height. */
#bio {
  align-self: start;
}

/* Note: intro text sizing and the black text color used to be overridden
   here, but your actual about.5a599d0d.css now sets .project__big-text to
   font-size:.8em and color:#000 directly — so nothing needed on those two
   from this file anymore. If that base file ever changes back, this file
   would need those rules restored. */

/* "Currently working/studying" — visible immediately, styled like the
   site's other body copy. */
.about-currently {
  font-family: gangstergrotesk-light;
  color: #000;
  background: #fff;
  font-size: .8em;
  margin-top: .5em;
}

/* Exhibitions: sits right under "currently" in the bio column, so it's
   visible immediately alongside the top of the photo — not below the
   whole two-column area, which a tall portrait photo would push far down
   the page. */
.about-exhibitions-section {
  margin-top: 3em; /* adjust: space above the whole section */
  color: #000;
  background: #fff;
  font-size: .8em; /* matches the work page's description text and the "currently" line */
}

/* "Exhibitions" heading: uppercase, in terminalgrotesk (contrasting with
   the gangstergrotesk-light body copy used elsewhere on this page). */
.about-exhibitions-section > p {
  font-family: terminalgrotesk;
  margin-bottom: 1em; /* adjust: space between heading and the list */
}

/* Each exhibition: name / place / date stacked on their own lines, in
   gangstergrotesk, with space between entries. */
.exhibitions-list {
  font-family: gangstergrotesk;
}

.exhibition-entry {
  margin-bottom: 1.5em; /* adjust: space between exhibitions */
}

.exhibition-entry:last-child {
  margin-bottom: 0;
}

/* Links inside "currently" (studio/university), bold and underlined. */
.about-currently a {
  font-weight: 700;
  text-decoration: underline;
}

/* Star icon: rotates while it moves side to side on desktop, and just
   rotates in place (no side-to-side) on mobile — same as the work page. */
@media (min-width: 768px) {
  nav.navbar > ul.main > li.star > img {
    animation: pingpong 3s cubic-bezier(0, .35, 1, .65) infinite alternate;
  }

  @keyframes pingpong {
    0% {
      left: calc(50% - 50px);
      transform: rotate(0deg);
    }
    to {
      left: calc(-50% + 50px);
      transform: rotate(360deg);
    }
  }
}

@media (max-width: 767px) {
  nav.navbar > ul.main > li.star > img {
    animation: spin 3s linear infinite;
  }

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
}